@font-face {
    font-family: 'Anek Odia';
    src: url('fonts/Anek_Odia/AnekOdia-VariableFont_wdth,wght.ttf') format('ttf'), 
         url('fonts/Anek_Tamil/AnekTamil-VariableFont_wdth,wght.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 14px;
    font-family: 'Anek Odia';
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: linear-gradient(to bottom right, #f2f2f2, #b3b3b3); /* Blue color */
}

.listhead {
    border: 2px solid white;
    padding: 10px 15px 5px;
    margin: 0 0 10px 0;
    color: white;
    background: linear-gradient(to bottom right, #0066cc, #9fbfdf);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
.card {
    margin: 5px;
    border-radius: 15px;
    background: linear-gradient(to top right, #dddddd, white );
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.card-header {
    text-align: center;
    padding-top: 14px;
    color: #355539;
}
.cardlabel {
text-align: left;
font-size: 15px;
color: #3d5c5c;
font-weight: bold;
}
.cardcontent {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #8d1010;
    text-shadow: 2px 2px 5px grey;
}
.btn {
    border: 1px solid dimgrey;
    box-shadow: 2px 2px 5px dimgrey;
}
.butt {
    color: white;
    border: 2px solid #fff; /* White border */
    min-width: 100px;
    padding: 5px 10px;
    margin: 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;

    cursor: pointer;
    border-radius: 8px;
    transition: color 0.3s;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Add shadow */
    transition: box-shadow 0.3s, border-color 0.3s;
}
.add-button {
    background: linear-gradient(to bottom left, #0099ff, #005999); /* Blue color */
}
.edit-button {
    background: linear-gradient(to bottom left, #ff9933, #804000); /* Orange color */
}
.del-button {
    background: linear-gradient(to bottom left, #ff1a1a, #804000); /* Red color */
}
.save-button {
    background: linear-gradient(to bottom left, #00ff00, #006600); /* Green color */
}
.back-button {
    background: linear-gradient(to bottom left, #85adad, #3d5c5c); /* grey color */
}


.add-button:not(:disabled):hover,
.save-button:not(:disabled):hover,
.edit-button:not(:disabled):hover,
.del-button:not(:disabled):hover,
.back-button:not(:disabled):hover {
    color: #ffff00;
    box-shadow: 0 0 10px #0066ff;
    border-color: #336699; /*Navy Blue*/
}

.add-button:disabled,
.save-button:disabled,
.edit-button:disabled,
.del-button:disabled,
.back-button:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    color: silver; /* New text color for disabled button */
    border-color: #696969; /*Navy Blue*/
}

.instyle {
    border: 1px solid dimgrey;
    box-shadow: 2px 2px 5px dimgrey;
    transition: box-shadow 0.3s
}

/*below class is dedicated to filename textbox*/
.instyle2 {
    border: 1px solid dimgrey;
    box-shadow: 2px 2px 5px dimgrey;
    transition: box-shadow 0.3s
}
.instyle:focus {
    box-shadow: 0 0 8px #0066ff;
}

.infilter {
    box-shadow: 2px 2px 5px dimgrey;
    transition: box-shadow 0.3s;
}
.infilter:focus {
    box-shadow: 0 0 8px #0066ff;
}

.chkstyle {
    border: 1px solid dimgrey;
    box-shadow: 2px 2px 5px dimgrey;
    height: 20px;
    width: 15px;
    margin: 4px;
}

.scroll-box {
    max-height: 400px;
    overflow: auto;
    border: 2px solid #ccc;
    padding: 10px;
    background: linear-gradient(to bottom left, #ffffff, #ffffff);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.mystyle1 {
    border: 2px solid white;
    background: linear-gradient(to bottom left, #d9e6f2, #79a6d2);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow-y: auto;
}

.mystyle2 {
    border: 2px solid white;
    background: linear-gradient(to bottom right, #eeeedd, #b2b266);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow-y: auto;
}

.mystyle3 {
    border: 2px solid white;
    background: linear-gradient(to top right, #669999, #b3cccc);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow-y: auto;
}

.noaccess {
    border: 2px solid white;
    color: white;
    padding: 10px;
    background: linear-gradient(to top right, #991f00, #ff3300);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    text-shadow: 5px 5px 10px black;
}

.notif {
    border: 2px solid #fff; /* White border */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); /* Add shadow */
}
.codered {
    background: linear-gradient(to bottom left, #ffcccc, #ff8080);
    border-color: red;
    color: #4d0000;
    /*text-shadow: 2px 2px 15px #4d0000;*/
}
.codeorg {
    background: linear-gradient(to bottom left, #ffe6cc, #ff9933);
    border-color: darkorange;
    color: #663300;
    /*text-shadow: 2px 2px 12px black;*/
}

.codegre {
    background: linear-gradient(to bottom left, #ccffcc, #80ff80);
    border-color: #009900;
    color: #003300;
    /*text-shadow: 2px 2px 12px black;*/
}
.tabulator {
    /*font-size: 12px;*/
}
.tabulator-col {
    color: darkred;
}
.tabulator .tabulator-row {
    border: 1px solid #ccc;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal;
}

@media (max-width: 768px) {
    html {
        font-size: 12px;
    }
    .tabulator {
        font-size: 12px;
    }
    .tabulator-responsive-collapse {
        font-size: 12px;
    }
}
@media (max-width: 576px) {
    html {
        font-size: 12px;
    }
    .tabulator {
        font-size: 10px;
    }
    .tabulator-responsive-collapse {
        font-size: 10px;
    }
}