/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@font-face {
    font-family: Adelle Sans;
    src: url('fonts/AdelleSans-Regular.otf');
    font-weight: normal;
    font-style: normal;
}


:root {
    scroll-behavior: smooth;
    --blue-color: #5A96F1;
}

body {
    font-family: Adelle Sans;
    color: #444444;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: #4154f1;
    text-decoration: none;
}

    a:hover {
        color: #717ff5;
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Adelle Sans;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0;
}

@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 10px;
}

    .pagetitle h1 {
        font-size: 24px;
        margin-bottom: 0;
        font-weight: 600;
        color: #012970;
    }
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
}

@media (min-width: 1200px) {
    .logo {
        width: 240px;
    }
}

.logo img {
    max-height: 100px;
    margin-right: 6px;
}

.logo span {
    font-size: 28px;
    font-weight: 600;
    color: #202020;
    font-family: Adelle Sans;
    line-height: 36px;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;
}

    .header li.nav-item {
        margin: 0 20px 0;
    }

        .header li.nav-item a {
            color: #2B2B2B;
            padding: 0 0;
            font-weight: 500;
            font-size: 20px;
        }

    .header .toggle-sidebar-btn {
        font-size: 32px;
        padding-left: 10px;
        cursor: pointer;
        color: #012970;
    }

    .header .search-bar {
        min-width: 360px;
        padding: 0 20px;
    }

li.nav-item.d-flex.custom-right-head a {
    font-size: 16px;
    color: #616D7B;
}
nav.header-nav {
    align-items: end;
    align-self: end;
}

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

    .header .search-form input {
        border: 0;
        font-size: 14px;
        color: #012970;
        border: 1px solid rgba(1, 41, 112, 0.2);
        padding: 7px 38px 7px 8px;
        border-radius: 3px;
        transition: 0.3s;
        width: 100%;
    }

        .header .search-form input:focus,
        .header .search-form input:hover {
            outline: none;
            box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
            border: 1px solid rgba(1, 41, 112, 0.3);
        }

    .header .search-form button {
        border: 0;
        padding: 0;
        margin-left: -30px;
        background: none;
    }

        .header .search-form button i {
            color: #012970;
        }

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-right: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

    .header-nav .nav-profile img {
        max-height: 36px;
    }

    .header-nav .nav-profile span {
        font-size: 14px;
        font-weight: 600;
    }

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
}

.header-nav .notifications {
    inset: 8px -15px auto auto !important;
}

    .header-nav .notifications .notification-item {
        display: flex;
        align-items: center;
        padding: 15px 10px;
        transition: 0.3s;
    }

        .header-nav .notifications .notification-item i {
            margin: 0 20px 0 10px;
            font-size: 24px;
        }

        .header-nav .notifications .notification-item h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .header-nav .notifications .notification-item p {
            font-size: 13px;
            margin-bottom: 3px;
            color: #919191;
        }

        .header-nav .notifications .notification-item:hover {
            background-color: #f6f9ff;
        }

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

    .header-nav .messages .message-item {
        padding: 15px 10px;
        transition: 0.3s;
    }

        .header-nav .messages .message-item a {
            display: flex;
        }

        .header-nav .messages .message-item img {
            margin: 0 20px 0 10px;
            max-height: 40px;
        }

        .header-nav .messages .message-item h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #444444;
        }

        .header-nav .messages .message-item p {
            font-size: 13px;
            margin-bottom: 3px;
            color: #919191;
        }

        .header-nav .messages .message-item:hover {
            background-color: #f6f9ff;
        }

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

    .header-nav .profile .dropdown-header h6 {
        font-size: 18px;
        margin-bottom: 0;
        font-weight: 600;
        color: #444444;
    }

    .header-nav .profile .dropdown-header span {
        font-size: 14px;
    }

    .header-nav .profile .dropdown-item {
        font-size: 14px;
        padding: 10px 15px;
        transition: 0.3s;
    }

        .header-nav .profile .dropdown-item i {
            margin-right: 10px;
            font-size: 18px;
            line-height: 0;
        }

        .header-nav .profile .dropdown-item:hover {
            background-color: #f6f9ff;
        }

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed !important;
    top: 60px !important;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 996;
    transition: all 0.3s;
    padding: 60px 10px 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
    width: 300px !important;
    background: #34495e !important;
}

@media (max-width: 1199px) {
    .sidebar {
        left: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .sidebar-nav li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sidebar-nav .nav-item {
        margin-bottom: 5px;
    }

    .sidebar-nav .nav-heading {
        font-size: 11px;
        text-transform: uppercase;
        color: #899bbd;
        font-weight: 600;
        margin: 10px 0 5px 15px;
    }

    .sidebar-nav .nav-link {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 500;
        color: #abb4be;
        transition: 0.3;
        padding: 10px 15px;
        border-radius: 4px;
    }

        .sidebar-nav .nav-link i {
            font-size: 1.5rem;
            margin-right: 10px;
            color: #abb4be;
        }

        .sidebar-nav .nav-link.collapsed {
            color: #abb4be;
        }

            .sidebar-nav .nav-link.collapsed i {
                color: #abb4be;
            }

        .sidebar-nav .nav-link:hover {
            color: #abb4be;
            background: #171717;
        }

            .sidebar-nav .nav-link:hover i {
                color: #abb4be;
            }

        .sidebar-nav .nav-link .bi-chevron-down {
            margin-right: 0;
            transition: transform 0.2s ease-in-out;
        }

        .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
            transform: rotate(180deg);
        }

    .sidebar-nav .nav-content {
        padding: 5px 0 0 0;
        margin: 0;
        list-style: none;
    }

        .sidebar-nav .nav-content a {
            display: block;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            transition: 0.3;
            padding: 10px 0 10px 40px;
            transition: 0.3s;
        }

        .sidebar-nav .nav-content p.type {
            font-size: 10px;
            margin-bottom: 0;
            padding-left: 15px;
        }

        .sidebar-nav .nav-content a i {
            font-size: 6px;
            margin-right: 8px;
            line-height: 0;
            border-radius: 50%;
        }

        .sidebar-nav .nav-content a:hover,
        .sidebar-nav .nav-content a.active {
            color: #abb4be;
        }

            .sidebar-nav .nav-content a.active i {
                background-color: #4154f1;
            }

i.bi.bi-list.toggle-sidebar-btn {
    color: #c3c3c3;
    font-size: 1.7rem;
    cursor: pointer;
    position: relative;
    left: -84px;
}

body#myDIV .login-page {
    padding: 0 300px;
}

.header li.nav-item.d-flex {
    gap: 30px;
}

    .header li.nav-item.d-flex form button {
        color: #000;
        position: relative;
        top: 0px;
    }

.row.login-top img {
    width: 70%;
    margin-bottom: 10px;
}

.row.login-top {
    align-items: center;
}

    .row.login-top h2 {
        border-radius: 5px 5px 0 0;
        color: #FFF;
        display: inline-block;
        font-size: 18px;
        line-height: 2rem;
        padding: 13px 17px;
        background: #0088cc;
        float: right;
        position: relative;
        top: 24px;
    }

section.login-form-section {
    background: #FFF;
    border-radius: 5px 0px 5px 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 33px 33px 15px;
}

    section.login-form-section label {
        position: relative;
        margin: 0;
        padding: 0;
        color: #777;
        font-size: 18px;
    }

    section.login-form-section .form-control:-webkit-autofill {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    section.login-form-section .form-control:not(:placeholder-shown) {
        padding-top: 0;
        padding-bottom: 0;
    }

    section.login-form-section .input-icons {
        float: right;
        position: absolute;
        right: 15px;
        margin-top: 46px;
        font-size: 20px;
        color: #555555;
    }

    section.login-form-section .row.bottom-check-login {
        align-items: baseline;
    }

    section.login-form-section button.w-100.btn.btn-lg.btn-primary {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background: #0088cc;
        border-color: #0088cc;
    }

h1.page-title {
    font-size: 22px;
    margin-top: 50px;
}

.brand-logo {
    margin-right: 0px;
    padding-left: 80px;
}

.header li.nav-item.d-flex.active a {
    /*color: #fff;*/
    font-weight: 700;
}

.header a.nav-link.active {
    padding: 0px 2px;
    font-weight: 500;
    border-bottom: 2px solid #AFAFAF;
}

.header li.nav-item.d-flex.custom-right-head {
    position: absolute;
    right: 0;
    gap: 8px;
    align-items: center;
}

.align-right {
    text-align: right;
}

.section-top {
    padding: 20px 0 0;
    margin-bottom: 50px;
}
    .section-top.home-top {
        margin-bottom: 0;
        padding-top: 50px;
    }

.gray-bg {
    padding: 15px 0;
}

.white-bg {
    background: #fff;
    margin: 10px 10px;
    padding: 25px 30px;
    border: 1px solid #B6C0CB;
    box-shadow: 0 0 5px #c8c8c8;
}

.section-top .white-bg {
    margin-top: 0;
    margin-bottom: 0;
}

.section-bottom {
    background: #1B3F68;
    padding: 30px 0 50px;
}

.title-bar {
    background: #FBFBFB;
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    border-bottom: 12px solid #FFF30A;
}

    .title-bar h2.section-title {
        text-transform: uppercase;
        font-size: 32px;
        color: #515151;
        font-weight: 500;
        margin-bottom: 0px;
    }

.mylogo {
    animation: rotation 3s infinite linear;
}

.spinner {
    text-align: center;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.imagecontainer {
    position: relative;
    width: 100%;
    max-width: 294px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    margin: 3px 3px;
}

.imagecontainer .imagebutton {
    color: white;
    font-size: 11px;
    border: none;
    text-align: center;
    position: relative;
    top: 2px;
    left: -3px;
    background: #646D70;
    border-radius: 100px;
    float: right;
}

    .imagecontainer .imagebutton:hover {
        background-color: black;
    }

.roundimg {
    width: 100px !important;
    height: 100px !important;
}

.pl-0 {
    padding-left: 0;
}
.plr-0 {
    padding-left: 0;
    padding-right: 0;
}

.width-100 {
    width: 100%;
    height: 100%;
}

.question-right-content {
    border-bottom: 40px solid #FFF30D;
    padding: 0 65px;
    height: 100%;
}

    .question-right-content h2 {
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 40px;
        color: #2B2B2B;
    }
    .question-right-content p {
        color: #646D70;
        font-size: 22px;
    }

.k-pager-numbers-wrap .k-button-flat-primary {
    color: #646D70;
    font-weight: 500;
    top: 2px;
}

.k-grid-pager span.k-pager-sizes {
    text-transform: uppercase;
    color: #616D7B;
}

.k-listview-pager span.k-pager-sizes {
    text-transform: uppercase;
    color: #616D7B;
}

button.telerik-blazor.k-button.add-edit.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
    background: #FFF30A;
    font-size: 16px;
    padding: 3px 10px;
    font-weight: 500;
}

button.telerik-blazor.k-button.delete-btn.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
    background: #ed2300;
    color: #fff;
    font-weight: 500;
    padding: 3px 10px;
    font-size: 16px;
}

.k-popup.k-dropdownlist-popup .k-selected.telerik-blazor {
    background-color: #646D70 !important;
}
.k-grid-header .k-sort-icon {
    color: #646D70 !important;
}
.k-grid-header .k-sort-order {
    color: #646D70 !important;
}
.k-grid-content::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    margin-top: 10px;
}


.k-grid .k-grid-header .k-table-th {
    font-weight: 600;
}

/*.k-grid-content::-webkit-scrollbar-track {
    background-color: #646D70;
}*/

.k-grid-content::-webkit-scrollbar-thumb {
    height: 5px;
    width: 5px;
    background-color: #646D70;
}
.k-column-title {
    font-weight: 600;
}

.k-grid-pager {
    background-color: #fff;
    border: none;
}
td.k-table-td.k-command-cell span {
    display: flex;
    gap: 5px;
}

.col-form-label {
    font-weight: 500;
    font-size: 20px;
}

.title-bar.yellow-border-75 {
    border-bottom: 75px solid #FFF30A;
}

.section-top.search-page {
    padding-top: 0px;
    margin-bottom: 80px;
}

    .section-top.search-page .search-bar {
        position: relative;
        top: -40px;
        border: 1px solid #E9E9E9;
        background: #FDFDFD;
        padding: 40px 100px;
        width: 65%;
        margin: auto;
        align-items: center;
    }
    .section-top.search-page .search-bar input#txtFilterByQuestion {
        padding-left: 35px;
    }

        .section-top.search-page .search-bar .fa-magnifying-glass.fa-w-16 {
            position: absolute;
            z-index: 9;
            margin-top: 12px;
            margin-left: 10px;
            color: #9A9A9A;
        }

    .section-top.search-page .search-bar button.telerik-blazor.k-button.add-edit.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
        color: #625E00;
        height: 40px;
        border-radius: 0;
        width: 100%;
        font-size: 18px;
    }

    .section-top.search-page .search-bar button.telerik-blazor.k-button.delete-btn.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
        border-radius: 0;
        width: 100%;
        height: 40px;
        font-size: 18px;
    }

    .section-top.search-page .search-bar span.k-textbox.k-input.form-control.telerik-blazor.k-input-solid.k-rounded-md.k-input-md {
        background: #E6E6E6;
        color: #424242;
        font-size: 18px;
        height: 40px;
        border-radius: 0;
    }
        .section-top.search-page .search-bar .fa-filter.fa-w-16 {
            position: absolute;
            margin-left: -34px;
            margin-top: 10px;
            color: #303C42;
        }

    .section-top.search-page .gray-bg {
        background: #F5F5F5;
        width: 65%;
        margin: auto;
        padding: 30px 0px;
        position: relative;
        top: 30px;
    }
        .section-top.search-page .gray-bg.top-space {
            top: -16px !IMPORTANT;
        }
    .section-top.search-page .k-listview {
        border-color: rgba(0, 0, 0, 0.08);
        color: #424242;
        background-color: #f5f5f5;
    }
    .section-top.search-page .k-listview-item {
        background: #F5F5F5;
        margin-bottom: 15px;
        padding-left: 30px;
        padding-right: 30px;
    }
        .section-top.search-page .k-listview-item .row .col-md-12 p {
            border-bottom: 1px solid #B2B2B2;
            padding-bottom: 20px;
            padding-top: 20px;
            text-align: justify;
        }
    .section-top.search-page .k-listview-content {
        overflow: hidden;
    }
    

    .section-top.search-page .k-listview button.telerik-blazor.k-button.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
        background: #DEDEDE;
        border-radius: 0;
        color: #424242;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 500;
    }
    .section-top.search-page .k-listview-item a {
        color: #2468CF;
        font-size: 12px;
        font-weight: 500;
        position: relative;
       /* top: 2px;*/
    }

    .section-top.search-page .k-listview-item p {
        font-size: 16px;
        color: #646D70;
        font-weight: 400;
    }

    .section-top.search-page .k-pager {
        background: none;
        position: absolute;
        bottom: -98px;
        width: 100%;
        border-color: rgba(0, 0, 0, 0.08);
        color: #424242;
        background-color: #fafafa;
    }

.k-pager-numbers .k-selected {
    cursor: inherit;
    z-index: 2;
    border-bottom: 1px solid #646D70 !important;
    font-weight: 600;
    min-width: 5px !IMPORTANT;
}
.k-button.k-selected::before {
    opacity: 1;
    background: none;
    color: #616D7B;
}
.k-pager-info {
    color: #616D7B;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
}

.title-bar button.telerik-blazor.k-button.k-button-solid.k-rounded-md.k-button-md.k-button-solid-base {
    left: 96px;
    background: none;
    border: none;
    font-size: 24px;
    font-weight: 500;
    color: #646D70;
    position: absolute;
    margin-top: 15px;
}

.water-page .gray-bg-col {
    background: #F5F5F5;
    padding: 30px 30px;
}
.text-right {
    text-align: right;
}
.width-65 {
    width: 65%;
    margin: auto;
}

.water-page .k-listview-content {
    overflow: hidden;
}

.water-page .row.gray-bg-col.top-water-col a {
    color: #2468CF;
    font-size: 16px;
    font-weight: 700;
}

.water-page .row.gray-bg-col.top-water-col p.ques-title {
    font-size: 18px;
    font-weight: 500;
    color: #2B2B2B;
    text-align: justify;
}
.water-page .row.gray-bg-col.top-water-col p.left-title {
    color: #616D7B;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 0;
}
.water-page .row.gray-bg-col.top-water-col p.right-ans {
    font-size: 14px;
    color: #616D7B;
    font-weight: 500;
    margin-bottom: 0;
}

.water-page .row.gray-bg-col.bottom-water-col.mb-0 h5 {
    color: #646D70;
    font-size: 14px;
    font-weight: 700;
}

.water-page .row.gray-bg-col.bottom-water-col p {
    color: #646D70;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 25px;
}
.water-page .water-img {
    border: 2px solid #C6C6C6;
    background: #fff;
    text-align: center;
    padding: 15px 0;
    margin: 0 20px 5px;
}

.water-page .row.gray-bg-col.top-water-col .row {
    margin-bottom: 10px;
    align-items: baseline;
}

.water-page .row.gray-bg-col.top-water-col {
    padding-bottom: 20px;
}

.water-page .k-listview-pager {
    border-width: 0;
    border-color: inherit;
    background: #f5f5f5;
    padding: 0 46px 30px;
}
.water-page .row.gray-bg-col.bottom-water-col {
    padding-bottom: 10px;
    margin-top: 15px;
}
.water-page .row.gray-bg-col.top-water-col .col-md-8 {
    padding-left: 0;
}

.k-grid .k-table-row.k-selected > .k-table-td {
    background-color: #cecece !important;
    border-color: #a5a5a5;
}

.k-scrollview-nav > .k-link.k-primary {
    background: #616D7B !important;
    border: #616D7B !important;
}
.search-page-answer {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1100px) and (max-width: 1560px) {
    .header li.nav-item a {
            font-size: 16px;
        }
        .header li.nav-item {
            margin: 0 10px 0;
        }
        .brand-logo {
            margin-right: 10px;
        }
    }

@media (min-width: 1700px) and (max-width:1890px){
    .header li.nav-item a {
        font-size: 24px;
    }
}

@media (min-width: 1891px) and (max-width:2000px) {
    .header li.nav-item a {
        font-size: 24px;
        padding: 0 14px;
    }
}