@import url(https://fonts.googleapis.com/css?family=Nunito);
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-font-sans-serif: "Rethink Sans", "Roboto", sans-serif;
    /*--bs-font-sans-serif: "Noto Sans Display", "Rethink Sans", "Roboto", sans-serif;*/
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9em;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: #212529;
    --bs-body-bg: #f8fafc;
}

body {
    background-color: #00425112 !important;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

#license_img_view{
    width: 100px;
}

.nav-tabs .nav-link{
    color: #000000;
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    /*background-color: #007bff;*/
    color: #1499bb;
}

.outer-container {
    position: relative;
    background: none;
    box-shadow: none;
    padding-top: 50px;
}

.card-container{
    width: 510px;
    margin: 0 auto;
}

.top-25 {
    top: 25%;
}

.rounded-corner {
    border-radius: 0px !important;
}

.quick-link-card {
    border-radius: 15px;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
    color: #000000;
}

.quick-link-card:hover {
    opacity: 1;
    text-decoration: none;
    color: #0e789d;
    box-shadow: 0 4px 8px rgba(14, 120, 157, 0.2);
}

.passport_img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}


.dataTables_filter {
    display: flex;
    align-items: center;
}

.dataTables_filter label {
    display: flex;
    align-items: center;
}

.dataTables_filter input {
    margin-left: 5px; /* Adjust spacing between the label and the input as needed */
}

.card{
    border-radius: 0 !important;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
}

.card-header{
    font-weight: bold;
    text-transform: uppercase;
}
.card-tools {
    display: block;
    float: none;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    text-align: right;
    margin-top: -9px !important;
}

.required_field{
    color: red;
    font-weight: 500;
    margin-left: 2px;
}
.zoom {

    transition: all .5s;
    /* Animation */

}

a{
    text-decoration: none;
}


a:hover{
    text-decoration: none;
}

.application-card {
    border-radius: 0;
    max-width: 18em;
    max-height: 18em;
    display: flex;
    justify-content: center;
    padding: 10px;
    transition: all 0.3s ease-in-out;
    /*color: #18829c;*/
}

.application-card:hover{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.top-half {
    background-color: #1499bb;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%;
    z-index: 99999;
}

.zartsa-logo{
    width: 50px ;
    height: 50px ;
}

@media (max-width: 768px) {

    .top-half .top-half-title {
        font-size: 13px !important;
    }

}

@media (max-width: 640px) {
    .lang{
        font-size: 13px !important;
    }


    .top-half .top-half-title {
        font-size: 11px !important;
    }

    .zartsa-logo{
        display: none;
    }

    #bell-notification {
        display: none;
    }

    .profile-photo {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .top-half .top-half-title {
        font-size: 6px !important;
    }

    .lang{
        font-size: 11px !important;
    }

    .lang-flag {
        height: 14px !important;
        width: 14px !important;
    }

    .zartsa-logo{
       display: none;
    }

    #bell-notification {
        display: none;
    }

    .profile-photo {
        display: none !important;
    }
}

@media (max-width: 300px) {
    .top-half .top-half-title {
        font-size: 4px !important;
    }

    .lang{
        font-size: 6px !important;
        margin-top: -5px !important;
    }

    .lang-flag {
        height: 12px !important;
        width: 12px !important;
    }
}

.lang{
    font-size: 16px;
    color: #fff;
    margin-left: 5px;
}


.lang-flag{
    height: 20px;
    width: 20px;
}

.zoom:hover {
    transform: scale(1.01);
}

.card-wrap {
    flex: 0 0 33.333%;
    display: flex;
    padding: 10px;
}


.card-link {
    background-color: #3e7cb1;
    font-size: 1em;
    color: #dbe4ee;
}

.file-item {
    color: #034e61;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 0;
    font-weight: bold;
    background: #2a92ac21;
    border: 0.2px solid #61b5ca;
}

.file-item:hover {
    color: #0a5669;
    font-weight: bold;
    background: #1499bb4d;
}

.file-item .bi {
    font-size: 2em;
}

.invalid-feedback{
    font-size: 12px;
    color:red !important;
}
.form-control {
    border-radius: 0;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.form-control:focus{
    border-color: #3e7cb1;
    box-shadow: none;
}

.form-select {
    border-radius: 0;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.form-select:focus {
    border-color: #3e7cb1;
    box-shadow: none;
}

.title-text {
    color: white;
}

.bg-alt {
    background-color: #00b32036 !important;
}

.language-link {

    color: rgb(51, 50, 50);
    /* padding: 15px 25px; */
    text-decoration: none;
    font-size: 1em;
}

.search-title {
    font-size: 1.2em;
}

.all-contents {
    margin-top: 20px;
}

.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 75%;
}

/* sidebar

 */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    min-height: 90vh;
    transition: all 0.3s;
    overflow-x: hidden;
}

.bg-all
{
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    padding: 20px 10px;
    border-left: 5px solid #006f8b !important;
}

.app-status-link{
    text-decoration: none;
    color: #1499bb;;
}

.app-status-link:hover{
    text-decoration: none;
    color: #1499bb;;
}

.no_count{
    font-size: 13px !important;
}

.navbar-nav > .active > a {
    color: white !important;
    background-color: #006f8b !important;
}

.nav-item > a:hover {
    color: black !important;
    background: #cecece !important;
}

.navbar-nav > .active > a:hover {
    background-color: #0483a6 !important;
    color: white !important;
}

.nav-link-title {
    vertical-align: text-bottom !important;
}

.applications-title {
    display: none
}

@media (max-width: 991.98px) {
    .applications-title {
        display: block
    }
}

.applications-view-btn,.applications-view-btn:hover {
    padding: 5px 17px;
    border: none;
    background-color: #666668;
    font-size: 13px;
    color: white;
    text-decoration: none;
}

.applications-form-btn,.applications-form-btn:hover {
    padding: 5px 17px;
    border: none;
    background-color: #5c77fc;
    font-size: 16px;
    color: white;
    text-decoration: none;
}

.applications-submit-btn,.applications-submit-btn:hover {
    padding: 5px 17px;
    border: none;
    background-color: #5c77fc;
    font-size: 16px;
    color: white;
    text-decoration: none;
}

.btn {
    border-radius: 0px !important;
    font-size: .9em
}

nav .pagination {
    margin-top: 0;
    justify-content: left;
}

nav .pagination .page-item {
    margin-right: 0;
}

.badge {
    font-size: .9em;
    border-radius: 15px;
    text-transform: capitalize;
    font-weight: bold;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.nav-item, .nav-link {
    border-radius: 0px !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-top: 2px solid #1499bb;
    background-color: white;
    border-bottom: 0;
}

label.required::after {
    content: "*";
    color: red;
    margin-right: 5px;
}
.flash-message{
    margin-top: 5px;
}

.badge-danger{
    border-radius: 1rem; background: #f43f5e; color: #F5F5F5; font-size: 15px;
}

.badge-success{
    border-radius: 1rem; background: #10b981; color: #F5F5F5; font-size: 15px
}
.badge-warning{
    border-radius: 1rem; background: #fbbf24; color: #F5F5F5; font-size: 15px;
}

.badge-primary{

    border-radius: 1rem; background: #3b82f6; color: #F5F5F5; font-size: 15px;
}
.badge-black{
    border-radius: 1rem; background: black; color: #F5F5F5; font-size: 15px;
}

.table-head{
    background-color: #265662;
    color: #FFFFFF;
    text-transform: capitalize;
}

#back-arrow{
    font-size: 20px;
}

.renewal-passport {
    border-radius: 50%;
    height: 200px;
    width: 200px;
    object-fit: cover
}

.font-1 {
    font-size: 1em !important;
}

.w-1 {
    width: 1px;
}