:root{
    --brand_color: #04214B;
}
body, td {
    color: inherit !important;
}
.valid-feedback-error{
    margin-top: .25rem;
    font-size: .75rem;
    color: red;
}

.m-l-10{
    margin-left:10px;
}
.mt-20{
    margin-top: 20px;
}
.form-control:focus {
    color: #838c96;
    background-color: #fff;
    border-color: #3a86f7;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

label.required::after {
    content: '*';
    color: red;
}

.toast-close-btn{
    position: absolute;
    right: 5%;
}
.btn-primary {
    background-color: var(--brand_color);
    border-color: var(--brand_color);
}
.btn-primary:hover {
    background-color: var(--brand_color);
    border-color: var(--brand_color);
}
.topnav {
    background-color: var(--brand_color);
}
.page-link{
    border-color: var(--brand_color);
}
.page-item.disabled .page-link{
    border-color: var(--brand_color);
}
.table-responsive .page-item.active .page-link{
    background-color: var(--brand_color) !important;
    border-color: var(--brand_color)!important; 
}
.table td, .table th{
    border-color: var(--brand_color) !important;
}
.form-control{
    border-color:#0000007a;
}
.nav-user .account-user-name {
    color: #6c757d;
}
.navbar-light .navbar-nav .nav-link {
    color: #c3c3c3;
}
.topnav .nav-item.active>a {
    color: #fff;
}
/* .navbar-light .navbar-nav .nav-link.active {
    color: #fff;
} */
.topnav .nav-item .nav-link:hover, .topnav .nav-item>a:hover {
    color: #fff;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link{
    color: #fff;
}

.btn-div{
    display: flex;
    align-items: center;
    column-gap: 10px;
    justify-content: end;
}

.main-form{
    display: flex;
    flex-wrap: wrap;
    /* column-gap: 10px; */
}
.main-form p{
    max-width: 50%;
    width: 100%;
    padding: 0 15px;
}

.main-form p:nth-child(2){
    max-width: 100% !important;
}
.mandatory::after{
    content: "*";
    color: red;
}

.dataTable thead th, .dataTable tbody td {
    white-space: nowrap;
}
.table-responsive{
    overflow-x: unset;
}
.table-responsive .table-scroll {
    overflow-x: auto;
    width: 100%;
}
.table-responsive .page-item.active .page-link{
    background-color: #57667a;
    border-color: #57667a;
}


.toggle_switch{
    font-size: 25px;
    vertical-align: middle;
}
table td:has(.form-check.form-switch){
    display: flex;
    align-items: center;
}
table .form-check.form-switch .form-check-input:checked{
    background-color: #98A6AD;
    border-color: #98A6AD;
}
table .form-check.form-switch .form-check-input{
    height: 1em;
    width: 26px;
    margin-left: -2.2em;
}
.dashboard-cards .card-title{
    font-size: 18px;
    margin-bottom: 0;
    color: #000;
}
.dashboard-cards .card-value{
    margin-top: 0;
    font-size: 26px;
    color: #000;
}


.record-box .top-content .col-md-3,
.i-box .top-content .col-md-3{
    padding-left: 45px;
}
.record-box .top-content .col-md-3 > div,
.i-box .top-content .col-md-3 > div{
    text-align: center;
}
.record-box .top-content .col-md-3 .right-side-img,
.i-box .top-content .right-side-img{
    width: 60%;
}



.login_section input::placeholder {
    color: #fff !important;
    opacity: 1; /* Firefox */
}

.login_section{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 0 100% !important;
    height: 100vh;
}
.login_section img{
    width: 100%;
}
.login_section .card_section{
    padding: 60px 120px;
    backdrop-filter: blur(40px);
    border-radius: 20px;
    width: 600px;
    background-color: #ffffff57;
    /* background-color: #ffffff7a; */
}
.login_section .col-md-12{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login_section .card_section .logo_section img{
    width: 220px;
    text-align: center;
}
.login_section .card_section .logo_section{
    text-align: center;
}
.login_section .card_section h3{
    color: #fff;
    margin-bottom: 50px;
    text-align: center;

}
.login_section .card_section form .input_field{
    padding-left: 0 !important;
}
.login_section .card_section form .input_field, .login_section .card_section .input-group-text{
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    border-radius: 0 !important;
    color: #fff !important;
}

.login_section .card_section label{
    color: #fff;
}
.login_section .card_section .mb-2{
    margin-bottom: 40px !important;
}
.login_section .forgot-password{
    color: #fff !important; 
    margin-top: 20px;
    display: inline-block;
}
.login_section input:-webkit-autofill,
.login_section input:-webkit-autofill:hover, 
.login_section input:-webkit-autofill:focus, 
.login_section input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    transition: background-color 28000s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.login_section .invalid-feedback{
    color: #fff !important;
}


.nav-user .account-user-avatar{
    left: 15px;
    top: calc(24px / 2);
}
.nav-user .account-user-avatar img{
    height: 45px;
    width: 45px;
}

body{
    background-image: url('/media/bg/dashboard_bg1.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
    color: #454545;
}
body .table{
    color: #454545;
}
body .table-secondary th{
    color: #fff;
    background-color: var(--brand_color) !important;
}

.btn-success{
    background-color: #313a46;
    border-color: #313a46;
}
.breadcrumb-item.active {
    color: #696969;
}



footer{
    background-color: var(--brand_color);
}
@media (min-width: 1900px){
    .table-responsive table:has(th:nth-child(11)){
        display: table;
    }
}
@media (min-width: 1024px) {
    .navbar .nav-item .dropdown-toggle {
        pointer-events: none;
    }
}
@media (min-width: 1024px) and (max-width: 1920px) {
    body[data-layout=topnav] .container-fluid, body[data-layout=topnav] .container-lg, body[data-layout=topnav] .container-md, body[data-layout=topnav] .container-sm, body[data-layout=topnav] .container-xl, body[data-layout=topnav] .container-xxl{
        max-width: 100%;
    }
}


@media (min-width: 1024px) and (max-width: 1600px) {
    .dashboard-cards .card-title{
        font-size: 15px;
    }
}