@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "Bold";
    src: url("./public/Fonts/static/Inter-Bold.ttf");
}
@font-face {
    font-family: "ExtraBold";
    src: url("./public/Fonts/static/Inter-ExtraBold.ttf");
}
@font-face {
    font-family: "ExtraLight";
    src: url("./public/Fonts/static/Inter-ExtraLight.ttf");
}
@font-face {
    font-family: "Light";
    src: url("./public/Fonts/static/Inter-Light.ttf");
}
@font-face {
    font-family: "Medium";
    src: url("./public/Fonts/static/Inter-Medium.ttf");
}
@font-face {
    font-family: "Regular";
    src: url("./public/Fonts/static/Inter-Regular.ttf");
}
@font-face {
    font-family: "SemiBold";
    src: url("./public/Fonts/static/Inter-SemiBold.ttf");
}
@font-face {
    font-family: "Thin";
    src: url("./public/Fonts/static/Inter-Thin.ttf");
}
body{
    font-family: 'Inter', sans-serif !important;
}


/* manage admin user listing page */
.main-screen.sidebarClosed{
    margin-left: 5%;
    width: 95%;
    padding-left: 30px;
}
. ::after{
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    width: 38px;
    height: 4px;
    background-color: #106EB4;
    border-radius: 22px;
}
    /* scrollbar for table */
.scroll-bar::-webkit-scrollbar {
    -webkit-appearance: none;
}
.scroll-bar::-webkit-scrollbar:vertical{
    width: 4px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 8px !important;
}
.scroll-bar::-webkit-scrollbar:horizontal {
    height: 8px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 8px !important;
}
.scroll-bar::-webkit-scrollbar-thumb {
    background-color: #C2DCEF;
    border: 1px solid #C2DCEF;
    border-radius: 22px;
    height: 8px;
}
    /* checkbox for roles */
.checkbox.custom-checkBoxBlue input{
    opacity: 0;
}
.checkbox.custom-checkBoxBlue input[type="checkbox"]:checked ~ label::before {
    color: #106EB4;
    background-color: #106EB4 !important;
    border-color: #106EB4;
    border-radius: 4px;
}
.checkbox.custom-checkBoxBlue label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    margin: 0;
    height: 18px;
    width: 18px;
    background-color: white;
    transition: transform 0.28s ease;
    border: 1.5px solid #106EB4;
    border-radius: 4px;
    transform: translateY(-50%);
}
.checkbox.custom-checkBoxBlue input[type="checkbox"]:checked ~ label::after {
    transform: rotate(-45deg) scale(1);
}
.checkbox.custom-checkBoxBlue label::after {
    content: '';
    display: block;
    width: 10px;
    height: 4px;
    border-bottom: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    transform: rotate(-45deg) scale(0);
    transition: transform ease 0.25s;
    will-change: transform;
    position: absolute;
    top: 10px;
    left: 5px;
}
    /* scrollbar for offcanvas */
.offcanvas-Scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
}
.offcanvas-Scrollbar::-webkit-scrollbar:vertical{
    width: 4px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 8px !important;
}
.offcanvas-Scrollbar::-webkit-scrollbar:horizontal {
    height: 8px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 8px !important;
}
.offcanvas-Scrollbar::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border: 1px solid #D9D9D9;
    border-radius: 22px;
    height: 8px;
}