@import url('https://fonts.googleapis.com/css2?family=Nova+Script&display=swap');

/* :root{
    --default-color:#023460;
    --primary-color:#023460;
    --secondary-color:#2ae958;
} */
.exo-font{
    font-family: 'Exo', sans-serif;
font-family: 'Kaushan Script', cursive;
}
/* custom scrolbar */
::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    background: lightgray;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
  }
/* custom classes  */

.disabled {
    pointer-events: none !important;
    filter: contrast(0.5) opacity(0.4) !important;
}

.round-20px{border-radius: 20px !important;}

.hoverColor:hover{color: var(--primary-color) !important;}

.animated-gradient-background {
    background: linear-gradient(257deg,#99fff8,#d4f7c5,#f5dfbd,#96c2ff,#f4f6f9);
    background-size: 300% 300%;
    animation: gradient-animation 10s ease infinite;
  }

  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

.w-150px{width: 150px !important;}
.h-100vh{height: 100vh !important;}

.rotate-center{-webkit-animation:rotate-center 5s linear infinite both;animation:rotate-center 5s linear infinite both}
@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.text-primary{color: var(--default-color);}
.shadow{box-shadow: 0px 5px 10px #898989;}
.right-0{right: 0 !important;}
.left-0{left: 0 !important;}
.top-0{top: 0 !important;}
.bottom-0{bottom: 0 !important;}
.bg-primary{background-color: var(--primary-color) !important;}
.gap-10px{gap:10px !important}
.bg-primary{background-color: var(--primary-color) !important; transition:.2s}
.bg-primary *{color: #fff; transition:.2s}
/* .bg-primary:hover{background-color:transparent !important; border:2px solid var(--primary-color) !important; color: var(--primary-color) !important; transition:.2s} */
.bg-secondary{background-color: var(--secondary-color) !important; transition:.2s}
.bg-secondary *{color: var(--primary-color); transition:.2s}
/* .bg-secondary:hover{background-color:transparent !important; border:2px solid var(--secondary-color) !important; color: var(--secondary-color) !important; transition:.2s} */

.bg-outline-primary{background-color:transparent !important; border:2px solid var(--primary-color) !important; transition:.2s}
.bg-outline-primary *{color: var(--primary-color);}
.bg-outline-primary:hover{background-color: var(--primary-color) !important; transition:.2s}
.bg-outline-primary:hover *{color: #fff !important; transition:.2s}
.bg-outline-secondary{background-color:transparent !important; border:2px solid var(--secondary-color) !important; color: var(--secondary-color) !important; transition:.2s}
.bg-outline-secondary *{color: var(--primary-color);}
.bg-outline-secondary:hover{background-color: var(--secondary-color) !important; transition:.2s}
.secondary-color{color: var(--secondary-color) !important;}
.font-digi{font-family: digi !important;}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    filter: saturate(0.5);
}
.btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active, .show>.btn-primary.dropdown-toggle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem;
    filter: opacity(0.8);
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color: var(--primary-color) !important;}
.border-2px{border-width:2px !important}
.w-fit{width: fit-content !important;}

.letter::before {
    content: attr(letter);
    position: absolute;
    font-size: 7rem;
    left: -7px;
    top: 30%;
    transform: translateY(-50%);
    opacity: .2;
    font-family: 'Exo', sans-serif;
}
.cursor-pointer{cursor: pointer !important;}

/* var(--primary-color) */
/* var(--primary-color) */


/* header css  */
.brand-big {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    display: flex;
    align-items: center;
    z-index: 1;
}
nav.navbar a.menu-btn{color:#fff !important; border-color: #fff !important;}
nav.navbar{border-bottom:none !important}
nav.navbar * {color:#fff}
#site_logo_main img{width: 150px;}
nav.navbar {background: var(--primary-color);}
#site_title_main{color: var(--secondary-color);font-weight: bold;}

.logoBg{
    width:200px;
    height:100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position:absolute;
    background-color: #fff;
    left:50%;
    transform:translateX(-50%)
}
.logoBg::before
{
content: "";
position: absolute;
left: -20px;
bottom:0;
width: 20px;
height: 20px;
background: var(--primary-color);
border-bottom-right-radius: 20px;
box-shadow: 6px 6px 0 5px #fff;
}
.logoBg::after
{
content: "";
position: absolute;
right: -20px;
bottom:0;
width: 20px;
height: 20px;
background: var(--primary-color);
border-bottom-left-radius: 20px;
box-shadow: -6px 6px 0 5px #fff;
}
nav.navbar .nav-item a i, nav.navbar .btn-link i{color: #fff ;}
.dropdown-item:focus{background-color: transparent !important}
/* .dropdown-item:focus, .dropdown-item:hover{background-color: transparent !important} */
header img.profile-photo{border: 1px solid #fff;}


/* dashboard card css  */
.name::before {
    content: attr(letter);
    position: absolute;
    font-size: 7rem;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .1;
    font-family: 'Exo', sans-serif;
}
.db-cards .count-title .count-number {
    font-size: 1.5em;
    margin-top: 17px;
    position: absolute;
    bottom: 0;
    width: 80%;
    left: 50%;
    border-top: 1px solid;
    transform: translateX(-50%);
}
.db-cards .image4::after,.db-cards .image6::after{content: none !important;}

.card_avatar{
    width: 120px;
    height: 120px;
    box-shadow: 0 0 0px 3px #fff, 0 0 0px 5px var(--primary-color);
    border-radius: 10px;
}
.card_avatar img{
    object-fit: cover;
}
.image3 .card_avatar img{width: 100% !important; height: 100% !important; border-radius: 10px;}
.image3 .wrapper::before {
    background: var(--primary-color);
    content: '';
    width: 70%;
    height: 100%;
    position: absolute;
    right: 17px;
    border-radius: 135px 0 0;
}
.attendance_count_card .wrapper::before {
    content: '';
    position: absolute;
    right: 0;
    background: var(--primary-color);
    width: 60%;
    height: 100%;
    border-radius: 20px 0 0 20px;
}


/* mixed css  */
     .highcharts-container {
            height: 453px !important;
        }
        .highcharts-credits{
            visibility: hidden !important;
        }
        #legend-container{
            display: none !important;
        }
        .image3 img{
            width: 50px !important;
            height: 50px !important;
        }
        .image3 h4{
            color: var(--primary-color) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            margin: 10px 0px
        }
        .image3 h4{
            color: var(--primary-color) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            margin: 10px 0px
        }
        .image3 .wrapper{
            border: 2px solid var(--primary-color) !important
        }
        .image2 .count-title{
            background-color: #fcff28ab !important;
            color : #fff;
            border: 2px solid  #fcff28ab
        }
        .image2 .count-title:hover{
            background-color: #fff !important;
            color : #fcff28ab ;
            border: 2px solid  #fcff28ab
        }
        .image2 .count-title a{

            color : #fff !important
        }
        .image2 .count-title:hover a{

            color : #fcff28ab !important
        }
        .image2 .count-title a strong{
            font-size: 17px !important;
            color : #fff !important
        }
        .image2 .count-title:hover a strong{

            color : #fcff28ab !important
        }
        .image2{
            position: relative !important;
        }
        .image2::before {
            content: url(http://127.0.0.1:8000/images/immigration.png)!important;
            position: absolute !important;
            /* z-index: 99999; */
            display: inline-block;
            transform: scale(0.8);
            top: -10px;
            right: 1px;
            width: 130px;
            height: 130px;
            opacity: 15%;
        }
        .btn-check{
            background: transparent;
            border: 0px;
            color: #d7d7d7;
            text-decoration: underline;

        }
        .highcharts-container {
            height: auto !important;
        }

    /* charts tab  */
    .charts_tab .nav-link{color: #fff;transition: none !important;}
    .charts_tab .nav-link:hover{color:#fff !important}
    .charts_tab .nav-link.active{
        border-color: var(--primary-color) var(--primary-color) transparent;
        border-radius: 10px 10px 0 0;
        color: var(--primary-color);
        position: relative;
    }
    .charts_tab .nav-link.active:hover{color: var(--primary-color) !important;}
    .charts_tab .nav-tabs{border-color: var(--primary-color) !important;background-color: var(--primary-color);}
    .charts_tab .nav-link.active::before {
        content: "";
        position: absolute;
        left: -20px;
        bottom: -1px;
        width: 20px;
        height: 20px;
        background: var(--primary-color);
        border-bottom-right-radius: 20px;
        box-shadow: 5px 5px 0 5px #fff;
    }
    .charts_tab .nav-link.active::after {
        content: "";
        position: absolute;
        right: -20px;
        bottom: -1px;
        width: 20px;
        height: 20px;
        background: var(--primary-color);
        border-bottom-left-radius: 20px;
        box-shadow: -5px 5px 0 5px #fff;
    }




    /* 1024 screen resolution */
    @media (max-width:1024px)
    {
        .fa-3x{font-size: 2em !important;}
        .db-cards .name::before{font-size: 5rem !important;}
        .wrapper:has(.profile_card) {background: var(--primary-color) !important;}
        .profile_card{display: block;margin: 0 auto;}
        .profile_card [class^="col-"]{
            margin: 0 auto;
            padding: 0 !important;
        }
        .profile_card .col-md-7 p{white-space: nowrap;}
        .profile_card .card_avatar{width: 100px;height: 100px;margin-bottom: 10px;}
        .profile_card h1{font-size: 3em;}
        .profile_card .wrap.w-fit{text-align: center !important;margin: 0 auto;}
        .profile_card .btn.btn-sm{display: block;width: fit-content;margin: 0 auto;}
        .attendance_count_card [class^="col-"]{
            max-width: 50%;
        }
        .attendance_count_card .wrapper::before{width: 50%;}
        .attendance_count{display: block !important;margin:0 auto !important;}
        .attendance_count img{width: 100px !important;height: 100px !important;}
        .display_attendance .count{margin-top: 10px !important;}
        .charts_calender .col-md-6{max-width: 100% !important;flex: 0 0 100% !important;}
    }

    /* 1366 media query  */
    @media (max-width:1366px)
    {
        .db-cards .name::before{font-size: 5rem !important;}
        .count-title{padding: 1rem !important;}
        .fa-3x{font-size: 2.5em !important;}
        .fa-2x{font-size: 1.5em !important;}
        .attendance_count_card .count-title{padding: 0 !important;}
        .attendance_count .wrap{width: 65%;}
        .attendance_count .display_attendance{width: 35%;}
        .fc-dayGrid-view .fc-body .fc-row{min-height: 2.5em !important;}
        .display_attendance .url{font-size: 12px !important;}
        .db-cards .count-title .count-number{font-size: 1.2em !important;}
    }

    ul.nav-tabs.vertical li {
        margin: 5px;
        background: var(--primary-color);
        color: #fff !important;
        border-radius: 5px;
    }

    ul.nav-tabs.vertical li a{
        color: #fff !important;
        padding: 10px !important;
        border-radius: 5px;
    }
    ul.nav-tabs.vertical li a.active{
        color: var(--primary-color) !important;
        background-color: #fff !important;
        border: 1px solid !important;
    }
    .image_avatar{
        width: 120px;
        aspect-ratio: 1/1;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 0px 3px #fff, 0 0 0px 5px var(--primary-color);
    }

    span.salaryAmount{display: none;}
    .colorBox {
        width: 50px;
        height: 25px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: var(--primary-color);
    }




    /* uploader  */
    .label_imageUpload {
        width: 100px;
        height: 100px;
        border: 2px dashed;
        border-radius: 10px;
        display: grid;
        color: var(--primary-color);
        place-content: center;
        cursor: pointer;
        opacity: 1;
    }
    .label_imageUpload i {
        font-size: 2rem;
    }
    .label_imageUpload .previewImage{width: 90px;height: 90px;border-radius: 5px;}
    input[type='file']{display: none;}


    .btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active, .show>.btn-primary.dropdown-toggle {
        box-shadow: 0 0 0 0.2rem rgb(204, 204, 204) !important;
    }

    table .profile-photo{
        width: 50px;
        height: 50px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--primary-color) !important;

    }
    table th{padding: 0 !important;}
    table td .badge{padding: 7px 21px;}

    table th[aria-label*="action"],table th[aria-label*="Action"]{text-align: center !important;}
    table thead th{padding: 10px 0 !important;}
    table td:has(.badge){text-align: center !important;}
    table td:has([class*="edit"]),table td:has(button[name*="delete"]){text-align: center;}
    table thead{background-color: var(--primary-color) !important;}
    table thead th{color: #fff !important;}
    table .checkbox{text-align: center !important;}


    .datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover{color: black !important;}


    /* loader  */
    div.loader_ {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: #3a3a3ac4;
        background-size: cover;
        z-index:99999999;
        display:grid;
        place-content:center;
        pointer-events: none;
    }

    div.loader_::before{
        content:'';
        height: 45px;
      aspect-ratio: 1.2;
      --c:no-repeat repeating-linear-gradient(90deg,#fff 0 20%,transparent 0 40%);
      background:
        var(--c) 50% 0,
        var(--c) 50% 100%;
      background-size: calc(500%/6) 50%;
      animation: l10 1s infinite linear;

    }
    @keyframes l10 {
      33%  {background-position: 0   0   ,100% 100%}
      66%  {background-position: 0   100%,100% 0   }
      100% {background-position: 50% 100%,50%  0   }
    }
    /* .loader_ .message {
        content: '';
        background: #ffd0d0cc;
        padding: 15px 30px;
        min-width: 500px;
        text-align: center;
        color: red;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translateX(-50%);
        font-size: 1rem;
        border: 1px solid;
    } */
    #content .alert.alert-danger,#content .alert.alert-success{display: none !important;}
    .message .alert.alert-danger,.message .alert.alert-success{display: block !important;}