* {
    font-family: Poppins;
    /*scroll-behavior:smooth;*/
    /* Commented due to telerik time picker will auto scroll down */
}

/*Dashboard - Bless (Light)*/
/*:root,
[dashboard-bless-theme=light] {
    --card-colour: #20184E;
    --middle-colour: #3E29AA;
    --tbl-start-colour: #d7d8ff;
    --tbl-address: #DEE3FF;
    --text-color: white;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

[dashboard-bless-theme=night] {
    --card-colour: #583CEF;
    --middle-colour: #7C7AFF;
    --tbl-start-colour: #c4caff;
    --tbl-address: #DEE3FF;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

[dashboard-ind-theme=light] {
    --card-colour: #411016;
    --middle-colour: #892935;
    --tbl-start-colour: #f6d6d5;
    --tbl-address: #FBE9E7;
    --text-color: white;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

[dashboard-ind-theme=night] {
    --card-colour: #C23C47;
    --middle-colour: #E58788;
    --tbl-start-colour: #f6d2d2;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

[dashboard-Agency-theme=light] {
    --card-colour: #07254B;
    --middle-colour: #064787;
    --tbl-start-colour: #b9dcfe;
    --tbl-address: #E0EDFE;
    --text-color: white;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

[dashboard-Agency-theme=night] {
    --card-colour: #0068CB;
    --middle-colour: #34A1FC;
    --tbl-start-colour: #bde6ff;
    --tbl-address: #E0EDFE;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}*/


:root {
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

/* Bless (Light) */
html[data-role-theme="bless-light"] {
    --card-colour: #f7e5d4;
    --middle-colour: #d99008;
    --text-ascent: #d99008;
    --fixed-sidebar: #ffffff;
    --background-colour: #faf8f4;
    --tbl-start-colour: #FEF6E7;
    --tbl-address: #FDEDCE;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: black;
    --subheader-colour: #FFF7F0;
    --header-color: #faf8f4;
    --text-header-color: black;
    --text-header-link-color: white;
    --dropdown-hover: white;
    --header-card-color: #D9D4FF;
    --primary-button: #d99008;
    --primary-button-hover: #C48208;
    --secondary-100: #FEF6E7;
    --secondary-200: #FDEDCE;
    --secondary-300: #FBDA9D;
    --secondary-400: #F9C86C;
    --secondary-500: #F7B53B;
    --secondary-600: #F5A30A;
    --secondary-700: #C48208;
    --tertiary-100: #D6D7F5;
    --tertiary-200: #ACB0EC;
    --tertiary-300: #8388E2;
    --tertiary-400: #5A60D8;
    --tertiary-500: #3038CF;
    --tertiary-600: #272DA5;
    --tertiary-700: #1D227C;
    --row-custom: #fff;
    --alt-row: #f4f4f4;
    --row-hover: #e7e7e8;
    --action-icon: #0d6efd;
    --action-row: #dee2e6;
}

/* Bless (Night) */
html[data-role-theme="bless-night"] {
    --card-colour: #533803;
    --middle-colour: #D99008;
    --text-ascent: #D99008;
    --fixed-sidebar: #11100c;
    --background-colour: #0A0905;
    --tbl-start-colour: #c4caff;
    --tbl-address: #DEE3FF;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: white;
    --header-color: #161a1d;
    --subheader-colour: #533803;
    --text-header-color: white;
    --text-header-link-color: black;
    --dropdown-hover: #2d353c;
    --header-card-color: #3A2F7D;
    --primary-button: #d99008;
    --primary-button-hover: #C48208;
    --primary: #2f37ca;
    --secondary-100: #FEF6E7;
    --secondary-200: #FDEDCE;
    --secondary-300: #FBDA9D;
    --secondary-400: #F9C86C;
    --secondary-500: #F7B53B;
    --secondary-600: #F5A30A;
    --secondary-700: #C48208;
    --tertiary-100: #D6D7F5;
    --tertiary-200: #ACB0EC;
    --tertiary-300: #8388E2;
    --tertiary-400: #5A60D8;
    --tertiary-500: #3038CF;
    --tertiary-600: #272DA5;
    --tertiary-700: #1D227C;
    --row-custom: #2c333a;
    --alt-row: #2c343a;
    --row-hover: #2c333a;
    --action-icon: #fff;
    --action-row: #747373;
}

/* IND (Light) */
html[data-role-theme="ind-light"] {
    --card-colour: #dae0f3;
    --middle-colour: #8e9edc;
    --text-ascent: #363dce;
    --fixed-sidebar: #ffffff;
    --background-colour: #F6F8FF;
    --tbl-start-colour: #f6d6d5;
    --tbl-address: #FBE9E7;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: black;
    --header-color: #f4f4ff;
    --subheader-colour: #F1F4FF;
    --text-header-color: black;
    --text-header-link-color: white;
    --header-card-color: #eeefff;
    --dropdown-hover: white;
    --primary-button: #4ebdc8;
    --primary-button-hover: #30939C;
    --primary: #3138c9;
    --secondary-100: #EBEEF9;
    --secondary-200: #D8DDF3;
    --secondary-300: #B1BCE7;
    --secondary-400: #8A9ADB;
    --secondary-500: #6379CF;
    --secondary-600: #3C57C3;
    --secondary-700: #30469C;
    --tertiary-100: #EBF8F9;
    --tertiary-200: #D8F1F3;
    --tertiary-300: #B1E3E7;
    --tertiary-400: #8AD4DB;
    --tertiary-500: #63C6CF;
    --tertiary-600: #30939C;
    --tertiary-700: #246E75;
    --row-custom: #fff;
    --alt-row: #f4f4f4;
    --row-hover: #e7e7e8;
    --action-icon: #0d6efd;
    --action-row: #dee2e6;
}

/* IND (Night) */
html[data-role-theme="ind-night"] {
    --card-colour: #0f102b;
    --middle-colour: #343cce;
    --text-ascent: #3138c9;
    --fixed-sidebar: #11100c;
    --tbl-start-colour: #f6d2d2;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: white;
    --header-color: #161a1d;
    --subheader-colour: #0f102b;
    --text-header-color: white;
    --text-header-link-color: black;
    --header-card-color: #862932;
    --dropdown-hover: #2d353c;
    --primary-button: #4ebdc8;
    --primary-button-hover: #30939C;
    --primary: #3138c9;
    --secondary-100: #EBEEF9;
    --secondary-200: #D8DDF3;
    --secondary-300: #B1BCE7;
    --secondary-400: #8A9ADB;
    --secondary-500: #6379CF;
    --secondary-600: #3C57C3;
    --secondary-700: #30469C;
    --tertiary-100: #EBF8F9;
    --tertiary-200: #D8F1F3;
    --tertiary-300: #B1E3E7;
    --tertiary-400: #8AD4DB;
    --tertiary-500: #63C6CF;
    --tertiary-600: #30939C;
    --tertiary-700: #246E75;
    --row-custom: #2c333a;
    --alt-row: #2c343a;
    --row-hover: #2c333a;
    --action-icon: #fff;
    --action-row: #747373;
}

/* Agency (Light) */
html[data-role-theme="agency-light"] {
    --card-colour: #FAC3C3;
    --middle-colour: #810808;
    --subheader-colour: #f8f1f1;
    --text-ascent: #810808;
    --fixed-sidebar: #ffffff;
    --background-colour: #FFF6F6;
    --subcard-color: white;
    --subtext-color: black;
    --header-color: #f7f2fd;
    --subheader-colour: #FAE4E4;
    --text-header-color: black;
    --text-header-link-color: white;
    --header-card-color: #B9DCFE;
    --dropdown-hover: white;
    --primary-button: #ae4040;
    --primary-button-hover: #792B2B;
    --secondary-100: #e8e8ff;
    --secondary-200: #bbbbff;
    --secondary-300: #8f8fff;
    --secondary-400: #6060ff;
    --secondary-500: #2121ff;
    --secondary-600: #0000b3;
    --secondary-700: #00005b;
    --tertiary-100: #a7ffff;
    --tertiary-200: #00dede;
    --tertiary-300: #00b3b3;
    --tertiary-400: #008a8a;
    --tertiary-500: #006363;
    --tertiary-600: #003f3f;
    --tertiary-700: #001e1e;
    --row-custom: #fff;
    --alt-row: #f4f4f4;
    --row-hover: #e7e7e8;
    --action-icon: #0d6efd;
    --action-row: #dee2e6;
}

/* Agency (Night) */
html[data-role-theme="agency-night"] {
    --card-colour: #4f2828;
    --middle-colour: #4f2828;
    --text-ascent: #810808;
    --tbl-start-colour: #bde6ff;
    --tbl-address: #E0EDFE;
    --text-color: black;
    --fixed-sidebar: #0f0a15;
    --subcard-color: white;
    --subtext-color: white;
    --header-color: #161a1d;
    --subheader-colour: #4f2828;
    --dropdown-hover: #2d353c;
    --text-header-color: white;
    --text-header-link-color: black;
    --header-card-color: #053665;
    --primary-button: #ae4040;
    --primary-button-hover: #1391F1;
    --primary: #3138c9;
    --secondary-100: #EBEEF9;
    --secondary-200: #D8DDF3;
    --secondary-300: #B1BCE7;
    --secondary-400: #8A9ADB;
    --secondary-500: #6379CF;
    --secondary-600: #3C57C3;
    --secondary-700: #30469C;
    --tertiary-100: #EBF8F9;
    --tertiary-200: #D8F1F3;
    --tertiary-300: #B1E3E7;
    --tertiary-400: #8AD4DB;
    --tertiary-500: #63C6CF;
    --tertiary-600: #30939C;
    --tertiary-700: #246E75;
    --row-custom: #2c333a;
    --alt-row: #2c343a;
    --row-hover: #2c333a;
    --action-icon: #fff;
    --action-row: #747373;
}

/* ADMIN (Light) */
html[data-role-theme="admin-light"] {
    --card-colour: #2E3B4E;
    --middle-colour: #4A5A73;
    --tbl-start-colour: #E1E5ED;
    --tbl-address: #F1F3F7;
    --text-color: white;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
    --header-color: white;
}

/* ADMIN (Night) */
html[data-role-theme="admin-night"] {
    --card-colour: #465569;
    --middle-colour: #6B7C91;
    --tbl-start-colour: #D4DAE2;
    --tbl-address: #E6EAF0;
    --text-color: black;
    --subcard-color: white;
    --subtext-color: black;
    --btn_reset: #B4B4B4;
    --lbl_btn_reset: #000000;
    --chart-card: #FFFFFF;
}

.dashboard-stat {
    background-color: var(--card-colour);
    color: var(--text-color);
    height: 150px;
    width: 100%;
    position: relative;
    display: block;
    margin: 0 0 25px;
    overflow: hidden;
    border-radius: 20px;
}

.dashboard-stat .visual {
    width: 80px;
    height: 80px;
    display: block;
    float: left;
    padding-top: 10px;
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: 35px;
    line-height: 35px;
}

.dashboard-stat .visual>img {
    margin-left: 0px;
    font-size: 110px;
    line-height: 110px;
    color: #fff;
    opacity: 0.1;
    z-index: 99;
}

.dashboard-stat .details {
    position: absolute;
    right: 15px;
    padding-right: 15px;
    color: #fff;
    font-size: 25px;
}

.dashboard-stat .details .number .desc {
    text-transform: capitalize;
    text-align: right;
    font-size: 30px;
    letter-spacing: 0;
    font-weight: 300;
}

.dashboard-card-chart-title {
    color: #000000;
    font-size: 23px;
    font-weight: 900;
}

.dashboard-stat .details {
    padding-top: 25px;
    text-align: right;
    font-size: 20px;
    line-height: 36px;
    letter-spacing: -1px;
    margin-bottom: 0;
    font-weight: 300;
}

.dashboard-stat .number {
    padding-top: 25px;
    text-align: right;
    font-size: 50px;
    line-height: 36px;
    letter-spacing: -1px;
    margin-bottom: 0;
    font-weight: bold;
}

.dashboard-card-title {
    font-size: 20px;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 40%;
    /* Ensure it spans the full height */
}

.dashboard-card-data {
    font-size: 40px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 50%;
    /* Ensure it spans the full height */
}

.dashboard-card-chart {
    margin-left: 10px;
    background-color: var(--chart-card);
    border-radius: 10px;
    height: 100%;
    width: 98%;
}

.dashboard-card-chart-data {
    background-color: var(--chart-card);
    display: flex;
    margin: 20px 20px 20px 20px;
    height: 90%;
    width: 95%;
}

.dashboard-card-quickstart {
    background-color: var(--card-colour);
    margin-left: 10px;
    color: var(--text-color);
    border-radius: 10px;
    height: 750px;
    width: 95%;
}

.dashboard-card-quickstart-title {
    margin: 20px 20px 20px 20px;
    font-size: 25px;
    font-weight: bold;
}

.dashboard-card-quickstart-data {
    margin: 20px 20px 20px 20px;
    height: 80%;
}

.dashboard-quickstart-title {
    margin: 20px 20px 20px 20px;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.dashboard-quickstart-data a {
    font-size: 50px;
    margin: 20px 20px 20px 20px;
    color: var(--text-color);
}

.dashboard-card-FAQ {
    background-color: var(--card-colour);
    color: var(--text-color);
    border-radius: 10px;
    height: 750px;
    width: 95%;
    margin-left: 10px;
}

.dashboard-card-FAQ-title {
    margin: 20px 20px 20px 20px;
    font-size: 25px;
    font-weight: bold;
}

.dashboard-card-FAQ-data {
    margin: 20px 20px 20px 20px;
    height: 80%;
}

.dashboard-FAQ-title {
    margin: 20px 20px 20px 20px;
    color: var(--text-color);
    font-size: 20px;
    font-weight: bold;
}

.dashboard-FAQ-data {
    margin: 20px 20px 20px 20px;
    color: var(--text-color);
}

/*Footer - start*/
.footer {
    /*background: linear-gradient(45deg,var(--card-colour), var(--middle-colour), var(--card-colour));*/
    background: var(--card-colour);
    color: var(--text-color);
    text-align: center;
    padding: 5px 0;
    position: fixed;
    /*position: block;*/
    bottom: 0;
    width: 100%;
    font-size: 14px;
    z-index: 9999999;
}

.footer-content {
    margin: 0 auto;
    max-width: 1200px;
    /* Adjust for responsiveness */
    color: var(--subtext-color)
}

/*Footer - end*/

.slideshow-container {
    position: relative;
    width: 100%;
    /* Adjust width based on your design */
    height: 100%;
}

.mySlides {
    display: none;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.prev {
    top: 50%;
    left: 0;
}

.next {
    top: 50%;
    right: 0;
}

.slideshow-container:hover .prev,
.slideshow-container:hover .next {
    opacity: 1;
}

/*JGN PADAM*/



.k-input-inner,
.k-radio-label {
    font-family: Poppins;
    background: var(--dropdown-hover);
    font-size: .75rem;
}



/* Modify date css */
.k-input-button {
    border-inline-start-width: 0;
}

.k-button-solid-base {
    background-color: transparent;
}

.k-button-solid-base:hover {
    background-color: transparent;
}



/* Question mark in the input field */
.position-relative {
    position: relative;
}

.field-hint {
    cursor: help;
    color: #48B0F7;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}



/*Password Input*/
.toggle-password-btn {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.toggle-password-btn:focus {
    outline: none;
    box-shadow: none;
}

.password-conditions {
    background-color: #edf1f7;
    border-radius: 8px;
    padding: 20px;
    font-size: smaller;
    text-align: left;
    list-style-type: none;
}

.password-conditions li {
    display: flex;
    align-items: flex-start;
}



img {
    border-radius: 8px;
}


.form-floating>.form-control:focus::placeholder,
.form-floating>.form-control-plaintext:focus::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.5;
}


.swal2-title {
    font-size: 1.125em;
    font-weight: 400;
}


.card>border {
    border-radius: 8px;
}


/* Hide Telerik Upload label - Drag and drop files here to upload */
.k-dropzone-hint {
    display: none;
}



.notification-preferences .form-switch .form-check-input {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.notification-preferences .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.notification-preferences .fa {
    min-width: 1.5rem;
    text-align: center;
}

.notification-subsettings .form-switch {
    flex-shrink: 0;
}


/* shared icon style */
.icon-base {
    background-color: var(--dropdown-hover);
    border-radius: 4px;
    padding: 8px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    line-height: 1;
}

.icon-img {
    max-width: 40px;
    max-height: 24px;
    height: auto;
    width: auto;
}

/* color variations */
.icon-universal {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-universal:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-jpn {
    border-color: var(--action-icon);
}

.icon-jpn:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-ban {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-ban:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-pencil {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-pencil:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-reactive_license {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-reactive_license:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-cancel {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-cancel:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-payment {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-payment:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-form {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-form:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-print {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-print:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-preview {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-preview:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-chatlog {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-chatlog:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}


.icon-checklist {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-checklist:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-excel {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-excel:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-send {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-send:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-delete {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-delete:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-approval {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-approval:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-edit {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-edit:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-user_view {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-user_view:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-unclaim {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-unclaim:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-new_application {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-new_application:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-cancel_application {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-cancel_application:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-amendment_Application {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-amendment_Application:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-restrict_user {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-restrict_user:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-sorting {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-sorting:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-claim_task {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-claim_task:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-receipt {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-receipt:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-update {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-update:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-key {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-key:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-notification {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-notification:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-upload {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-upload:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

/*.icon-camera {
    color: var(--action-icon);
    border-color: var(--action-icon);
}
    .icon-camera:hover {
        background-color: var(--primary-button);
        color: white;
        border-color: var(--primary-button);
    }*/
.icon-passport {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-passport:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-emel {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-emel:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-pending_payment {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-pending_payment:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-pending_task {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-pending_task:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-pdf {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-pdf:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-activate {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-activate:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-deactivate {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-deactivate:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-add_hierarchy {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-add_hierarchy:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-hierarchy {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-hierarchy:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-summary {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-summary:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-revoke {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-revoke:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-delegate {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-delegate:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-workflow {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-workflow:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-building {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-building:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-rollback {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-rollback:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-access {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-access:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

.icon-building {
    color: var(--action-icon);
    border-color: var(--action-icon);
}

.icon-building:hover {
    background-color: var(--primary-button);
    color: white;
    border-color: var(--primary-button);
}

/* Main popup container */
.k-list-container.k-popup,
.k-list-container.k-dropdownlist-popup {
    background: var(--dropdown-hover) !important;
    color: var(--text-header-color) !important;
}

/* Dropdown items */
.k-list-container.k-popup .k-list-item,
.k-list-container.k-dropdownlist-popup .k-list-item {
    background: var(--dropdown-hover) !important;
    color: var(--text-header-color) !important;
}

/* MyReport page only — wrap long text inside dropdown popup items */
.myreport-ddl-popup .k-list-item {
    white-space: normal !important;
    word-break: break-word !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Hover state */
.k-list-container.k-popup .k-list-item.k-hover,
.k-list-container.k-dropdownlist-popup .k-list-item.k-hover {
    background: #333333 !important;
    color: var(--text-header-color) !important;
}

/* Hide exclamation icon for upload failed using telerik upload */
.k-svg-i-exclamation-circle {
    display: none;
}