@font-face {
    font-family: kanit-light;
    src: url('../font/Kanit/Kanit-Light.ttf');
}

@font-face {
    font-family: kanit-med;
    src: url('../font/Kanit/Kanit-Medium.ttf');
}

@font-face {
    font-family: kanit-bold;
    src: url('../font/Kanit/Kanit-Bold.ttf');
}

* {
    font-family: kanit-light;

}

html {
    scroll-behavior: smooth;
}
body{
    overflow-x: none;
}
/* default text */
.text-header-card {
    background: rgb(18, 6, 108);
    background: linear-gradient(360deg, rgba(18, 6, 108, 1) 35%, rgba(57, 14, 176, 0.9640231092436975) 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 3px 3px rgba(0, 0, 0, 0.15);
    color: white !important;
    font-weight: bold !important;
    border: 0px !important;
}
.text-header-theme {
    color: #00105e !important;
    font-weight: bold;
}
.text-header {
    font-weight: bold;
    font-size: 1.2rem;
}

.text-button {
    font-size: 19.2px;
}

/* card */
.card-title {
    color: #00105e !important;
    font-weight: bold !important;
}

.card-menu-text {
    font-size: 60px;
    font-weight: bold;
}
/* items - index */
.card-body>.row>.col {
    max-height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #aaaaaa;
    font-weight: bold;
}

/* ICON */
.search-i {
    font-size: 15px
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;

    border-top: 8px solid #9596A2;
    /* border-top: 8px solid #fff; */
    margin: 5px;
}

/* Custome scrollbar */
/* width */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 15px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 15px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* items- add, edit  */

.code-name-group {
    margin-left: 0px;
    margin-right: 0px;
}

.border-img {
    /* border: 2px dashed #555;
        border-radius: 10px; */
    border-radius: 10px;
    padding: 10px;
    background-image: repeating-linear-gradient(to right, #555 0%, #555 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #555 0%, #555 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #555 0%, #555 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #555 0%, #555 50%, transparent 50%, transparent 100%);
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
    /* max-width: 532px;
        max-height: 532px; */
}
nav {
    height: auto;
}

.button-icon {
    font-size: 24px !important;
}
/* items spec - add, edit  */
.card-overflow-input {
    margin-left: 0px;
    margin-right: 0px;
    max-height: 50vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.insert-spec-btn {
    background-color: #00044b !important;
    color: white !important;
    border-radius: 10px !important;
}
.save-btn{
    background: rgb(0,90,117);
    background: linear-gradient(360deg, rgba(0,90,117,1) 35%, rgba(0,216,152,1) 100%);
    color:white !important;
}
.cancel-btn{
    background: rgb(34,30,31);
    background: linear-gradient(360deg, rgba(34,30,31,1) 35%, rgba(99,99,99,1) 100%);
    color:white !important;
}

/* responsive */
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (max-width: 576px) {      
    .card-menu-wrapper>* {
        top: 80px;
        position: absolute;
        /* z-index: 10; */
    }

    .wrapper {
        top: 200px;
        position: relative;
    }

    .head-wrapper {
        font-size: 20px;
        font-weight: bold;
        color: rgb(18, 6, 108);
    }

    nav {
        height: 150px;
    }

}

@media only screen and (min-width: 600px) {
    .card-menu-wrapper>* {
        top: 100px;
        position: absolute;
        /* z-index: 10; */
    }

    .wrapper {
        top: 200px;
        position: relative;
    }

    .head-wrapper {
        font-size: 30px;
        font-weight: bold;
        color: rgb(18, 6, 108);
    }

    nav {
        height: 150px;
    }

    /* For tablets: */
    /* .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;} */
}

@media only screen and (min-width: 992px) {

    /* Index.php */
    .card-menu-wrapper>* {
        top: 30px;
        position: absolute;
        /* z-index: 10; */
    }

    .head-wrapper {
        font-size: 40px;
        font-weight: bold;
        color: rgb(18, 6, 108);
    }

    .wrapper {
        top: 200px;
        position: relative;
    }

    .material-symbols-outlined {
        font-size: 50px;
    }

    nav {
        height: auto;
    }

    /* For desktop: */
    /* .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;} */
}