/* ##Device = Desktops
   ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1367px) { /* CSS */
}

@media (min-width: 1281px) and (max-width: 1366px) { /* CSS */
}

/* ##Device = Laptops, Desktops
   ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) { /* CSS */
}

/* ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) { /* CSS */
}

/* ##Device = Tablets, Ipads (landscape)
   ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { /* CSS */
}

/* ##Device = Low Resolution Tablets, Mobiles (Landscape)
   ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) { /* CSS */
}

/* ##Device = Most of the Smartphones Mobiles (Portrait)
   ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) { /* CSS */
}


.ico::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


body {
    font-family: 'PT Sans', sans-serif !important;
    min-height: -webkit-calc(100vh - 80px);
    min-height: -moz-calc(100vh - 80px);
    min-height: calc(100vh - 80px);
    padding-bottom: 10px;
}

.body-login { /* login background */
    background-image: url("../images/login-bg.jpg") !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media (max-width: 767px) {
    .body-login {
        background-image: url("../images/login-bg-mobile.jpg") !important;
    }
}

.body-authenticated { /* common background */
    background-image: url("../images/page-bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media (max-width: 767px) {
    .body-authenticated {
        background-image: url("../images/page-bg-mobile.png") !important;
        background-size: contain;
        background-color: #F5F5F5;
    }
}


/* main .begin */
main {
    margin-top: 75px !important; /* accommodate top menu */
}

@media (max-width: 767px) { /* mobile */
    main {
        margin-top: 60px !important; /* accommodate top toolbar */
        margin-bottom: 50px !important; /* accommodate bottom nav bar */
    }

    /* ios only .begin */
    @supports (-webkit-touch-callout: none) {
        /* Padding to avoid the "unsafe" areas behind notches in the screen - ios 11.0–11.2 */
        @supports (margin-top: constant(safe-area-inset-top)) {
            main {
                margin-top: calc(constant(safe-area-inset-top) + 60px) !important;
            }

            .mobile-menu-toolbar {
                margin-top: constant(safe-area-inset-top);
            }
        }

        /* Padding to avoid the "unsafe" areas behind notches in the screen - ios > 11.2 */
        @supports (margin-top: env(safe-area-inset-top)) {
            main {
                margin-top: calc(env(safe-area-inset-top) + 60px) !important;
            }

            .mobile-menu-toolbar {
                margin-top: env(safe-area-inset-top);
            }
        }
    }
    /* ios only .end */
}
/* main .end */


/* backdrop .begin */
body.busy .backdrop {
    overflow: hidden;
    display: block;
}

.backdrop {
    display: none;
    position: fixed;
    z-index: 1700;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
/* backdrop .end */


/* height .begin */
.height-70 {
    min-height: 70vh;
}

.height-80 {
    min-height: 80vh;
}

.height-90 {
    min-height: 90vh;
}
/* height .end */


.form-group { /* data entry form group row */
    margin-bottom: 0.4rem !important;
}

.col-form-label,
.form-check-label { /* data entry form label */
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap !important;
}

.ails-label-wrap {
    font-size: 14px;
    font-weight: 700;
    white-space: normal !important;
}

/* main menu .begin */
#ails-nav{
    z-index: 1500 !important;
}

.navbar {
    height: 60px !important;
    font-size: 18px !important;
    background-color: #FFFFFF; /* White */
    background-image: linear-gradient(to right, #FFFFFF 60%, #85B6FF, #466EE5);
    box-shadow: 0px 4px 10px 0px #00000040;
}

@media (min-width: 1366px) { /* logo, version */
    .navbar-brand {
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

#navbarContentRight .nav-link { /* user name, entity, language, support */
    color: #FFFFFF !important;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .has-megamenu {
        position: static !important;
        align-self: center;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        padding: 2rem 0.1rem 0rem 0.1rem;
        background-color: #F2F2F2;
        font-size: 14px;
        letter-spacing: 0.06em;
        box-shadow: 0px 4px 18px 1px rgba(0, 0, 0, 0.25);
        border-radius: 0px 0px 30px 30px;
        max-height: 85vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

.navbar li.nav-item,
.navbar li.nav-item.dropdown {
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
}
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px) {
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse {
        overflow-y: auto;
        max-height: 90vh;
        margin-top: 10px;
    }
}
/* ============ mobile view .end// ============ */

/* menu dropdown curtain */
.dropdown-menu {
    background-color: #F2F2F2;
}

.navbar .megamenu .dropdown-item {
    padding-left: 1rem;
}

.dropdown-menu .dropdown-divider {
    margin: 0.6rem 2rem 0.6rem 1rem;
}

/* menu group font */
.menu-grp {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0.03em
}

/* menu group font color */
.menu-grp-files {
    color: #466EE5;
}
.menu-grp-gps, .menu-grp-operation {
    color: #466EE5;
}
.menu-grp-declaration {
    color: #08B783;
}
.menu-grp-billingcosting {
    color: #FF375F;
}
.menu-grp-inquiry {
    color: #FF9F0E;
}
.menu-grp-administration {
    color: #78CEA1;
}

/* menu group icon */
.menu-grp-ico-files::before {
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900;
    content: "\f15c";
}
.menu-grp-ico-operation::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: '\f46d';
}
.menu-grp-ico-declaration::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: '\f571';
}
.menu-grp-ico-gps::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: '\f0d1';
}
.menu-grp-ico-billingcosting::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: '\f53a';
}
.menu-grp-ico-inquiry::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: '\f4ad';
}
.menu-grp-ico-administration::before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: '\f0c0';
}

/* menu group vertical line */
.menu-grp-items-files {
    border-left: 3px solid #466EE5;
}
.menu-grp-items-gps,
.menu-grp-items-operation {
    border-left: 3px solid #5A5AEA;
}
.menu-grp-items-declaration {
    border-left: 3px solid #08B783;
}
.menu-grp-items-billingcosting {
    border-left: 3px solid #FF375F;
}
.menu-grp-items-inquiry {
    border-left: 3px solid #FF9F0E;
}
.menu-grp-items-administration {
    border-left: 3px solid #78CEA1;
}

/* menu group divider */
.menu-grp-items-files .dropdown-divider {
    border-top: 1px solid #466EE5;
}
.menu-grp-items-gps .dropdown-divider,
.menu-grp-items-operation .dropdown-divider {
    border-top: 1px solid #5A5AEA;
}
.menu-grp-items-declaration .dropdown-divider {
    border-top: 1px solid #08B783;
}
.menu-grp-items-billingcosting .dropdown-divider {
    border-top: 1px solid #FF375F;
}
.menu-grp-items-inquiry .dropdown-divider {
    border-top: 1px solid #FF9F0E;
}
.menu-grp-items-administration .dropdown-divider {
    border-top: 1px solid #78CEA1;
}

/* menu item hover */
.menu-grp-items-files .dropdown-item:hover {
    font-weight: 700;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #466EE5, #F2F2F2);
}
.menu-grp-items-gps .dropdown-item:hover, .menu-grp-items-operation .dropdown-item:hover {
    font-weight: 700;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #5A5AEA, #F2F2F2);
}
.menu-grp-items-declaration .dropdown-item:hover {
    font-weight: 700;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #08B783, #F2F2F2);
}
.menu-grp-items-billingcosting .dropdown-item:hover {
    font-weight: 700;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #FF375F, #F2F2F2);
}
.menu-grp-items-inquiry .dropdown-item:hover {
    font-weight: 700;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #FF9F0E, #F2F2F2);
}
.menu-grp-items-administration .dropdown-item:hover {
    font-weight: 700;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #78CEA1, #F2F2F2);
}
/* main menu .end */


img.asolute-logo {
    content: url("../images/asolute-logo.png");
    max-height: 60px !important;
}

@media (max-width: 767px) {
    img.asolute-logo {
        max-height: 45px !important;
    }
}

.appVer {
    font-weight: 700;
    font-size: 16px;
}


#_PageHeader_Title {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
}


/* login .begin */
.login-card {
    width: 35vw;
    margin-top: 10vh;
    box-shadow: 0px 15px 30px 5px rgba(0, 0, 0, 0.25);
    border-radius: 46px;
    border: none;
    padding: 5px;
    background-image: conic-gradient(from 220deg, rgba(44, 217, 151, 1), rgba(255, 213, 0, 1), rgba(255, 89, 99, 1), rgba(70, 110, 229, 1), rgba(44, 217, 151, 1));
    background-image: repeating-conic-gradient(from 220deg, rgba(44, 217, 151, 1), rgba(255, 213, 0, 1), rgba(255, 89, 99, 1), rgba(70, 110, 229, 1), rgba(44, 217, 151, 1));
}

@media (max-width: 1366px) { /* -> 1366 */
    .login-card {
        width: 45vw;
    }
}

@media (max-width: 767px) { /* mobile */
    .login-card {
        margin-top: 5vh;
        width: 100vw;
    }
}

.login-card .card-body {
    padding: 25px 50px 25px 50px;
    border-radius: 46px;
    background-color: #FFFFFF;
}

@media (max-width: 767px) { /* mobile */
    .login-card .card-body {
        padding: 10px 35px 10px 35px;
    }
}

.login-card .card-title {
    font-size: 64px;
    font-weight: 700;
    color: #466EE5;
}

@media (max-width: 767px) { /* mobile */
    .login-card .card-title {
        font-size: 36px;
    }
}

.login-card .col-form-label {
    font-size: 24px; /* override .col-form-label */
}

@media (max-width: 767px) { /* mobile */
    .login-card .col-form-label {
        font-size: 18px; /* override .col-form-label */
    }
}
/* login .end */


/* main toolbar .begin */
#_ButtonBar {
    background-color: transparent;
    margin-bottom: 10px;
}

    #_ButtonBar .dx-button {
        border-radius: 20px;
        /*border-color: #DEEDF9;*/
        border: none;
        background-color: #DEEDF9;
        font-size: 14px;
        color: #466EE5;
        /*min-width: 110px;*/
        min-width: 50px;
        max-height: 35px;
    }

    #_ButtonBar .dx-icon { /* button icon */
        color: #466EE5;
    }

    #_ButtonBar .dx-button:hover, /* button hover */
    #_ButtonBar .dx-button:hover .dx-icon {
        color: #FFFFFF;
        background-color: #466EE5;
        /*font-weight: 600;*/
        border: none;
    }
/* main toolbar .end */

/* _PageHeader_RecordStatus .begin */
#_PageHeader_RecordStatus {
    font-family: 'Ubuntu', sans-serif !important;
    color: #FFFFFF;
    font-weight: 700;
    font-style: italic;
    font-size: 14px;
}

    #_PageHeader_RecordStatus .ails-audit-approved {
        color: green !important;
    }

    #_PageHeader_RecordStatus .ails-audit-cancelled {
        color: red !important;
    }
/* _PageHeader_RecordStatus .end */

/*.card-gradient-v {*/ /* gps dashboard card */
/*color: #FFFFFF;*/ /* White */
/*font-size: 18px;
    font-weight: 700;
    background-image: linear-gradient(to bottom, #85B6FF, #466EE5 20%, #85B6FF)
}*/


.dx-widget { /* devextreme all widget font */
    font-family: 'PT Sans', sans-serif !important;
}

.dx-toast-message {
    white-space: pre-line;
}

/* button .begin */
.dx-button.dx-button-default.dx-button-has-text { /* default button. E.g. OK / Save */
    color: #FFFFFF;
    background-color: #466EE5;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
}

.dx-button.dx-button-danger.dx-button-has-text { /* danger button. */
    color: #FFFFFF;
    /*background-color: #466EE5;*/
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
}

.dx-button.dx-button-normal.dx-button-has-text:not(.dx-datagrid-toolbar-button.dx-button.dx-button-normal.dx-button-has-text) { /* normal button. E.g. Cancel / Close */
    color: #466EE5;
    background-color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    border: 2px solid #466EE5;
}

    .dx-button.dx-button-normal.dx-button-has-text .dx-icon:not(.dx-datagrid-toolbar-button.dx-button.dx-button-normal.dx-button-has-text .dx-icon) { /* default button. E.g. Cancel / Close */
        color: #466EE5; /* icon color */
    }

.dx-buttongroup-item.dx-buttongroup-item-content.dx-button.dx-button-normal.dx-button-mode-outlined.dx-button-has-text.dx-item-selected { /* button group selected button */
    background-color: #c8ddfa !important
}

.dx-btn-gradient { /* login button */
    color: rgba(255, 255, 255, 1) !important;
    background-image: linear-gradient(to right, rgba(133, 182, 255, 1), rgba(70, 110, 229, 1)) !important;
    font-size: 18px;
    font-weight: 700;
    border: none !important;
}
/* button .end */


/* input editor .begin */
.dx-widget input,
.dx-widget textarea {
    font-family: 'PT Sans', sans-serif !important;
}

.dx-texteditor.dx-editor-outlined { /* editor's border */
    border-radius: 5px;
    border: 1px solid #DDDDDD !important;
}

/*.dx-editor-outlined .dx-texteditor-input.readOnly,*/ /* read only background */
/*.dx-tagbox.readOnly {
    background-color: #E5E5E5 !important;*/ /* light grey */
/*}*/
.dx-editor-outlined.dx-state-readonly .dx-texteditor-input,
.dx-tagbox.dx-editor-outlined.dx-state-readonly {
    background-color: #E5E5E5 !important; /* light grey */
}

.dx-editor-outlined .dx-texteditor-input.required, /* required background */
.dx-tagbox.dx-editor-outlined.required {
    background-color: #FFECCC; /* light yellow */
}

.dx-dropdowneditor-overlay .dx-overlay-content { /* combobox dropdown */
    min-width: 300px;
}

.dx-dropdowneditor-overlay.dx-popup-wrapper div.dx-overlay-content.dx-popup-normal .dx-popup-content { /* combobox dropdown content */
    padding: 10px;
}

.dx-tagbox .dx-tag-content {
    background-color: transparent !important;
}
/* input editor .end */

/* datagrid .begin */
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row td { /* header row */
    background-color: #466EE5;
}

.dx-datagrid .dx-header-filter:not(.dx-header-filter-empty) { /* header filter icon - Filtered */
    color: #FF9F0E !important;
}

.dx-datagrid .dx-header-filter:not(.dx-header-filter-empty):before { /* header filter icon - Filtered */
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900 !important;
    content: "\f0b0";
}

.dx-datagrid .dx-header-filter.dx-header-filter-empty { /* header filter icon - Empty */
    color: #FFFFFF !important;
}

.dx-header-row > td[role="columnheader"] > div.dx-datagrid-text-content { /* header text */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #FFFFFF;
}

.dx-datagrid .dx-link { /* hyperlink within grid row */
    text-decoration: none !important;
    color: #337ab7 !important;
}

.dx-datagrid .dx-editor-cell .dx-texteditor { /* editor inside datagrid */
    border: none !important;
}

.dx-datagrid-search-panel.dx-textbox.dx-texteditor.dx-editor-outlined.dx-searchbox { /* search panel textbox */
    min-width: 200px;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
    background-color: #c8ddfa;
}

.ails-grid-Container {
    /*padding: 1rem 0.5rem 1rem 0.5rem !important;*/
    /*border: 1px solid #c8ccd0 !important;*/
    /*border-radius: 20px;
    background-color: #FFFFFF;*/
}
/* datagrid .end */


/* v-datagrid .begin */
.ails-vgrid .dx-cell-modified .dx-highlight-outline::after {
    border-color: transparent !important;
}

.ails-vgrid .dx-datagrid .dx-row > td,
.ails-vgrid .dx-datagrid .dx-row > tr > td { /* row height */
    padding: 3px 0px 3px 1px !important;
    height: 42px !important;
}

.ails-vgrid .dx-datagrid .dx-row.dx-group-row > td, /* group row height */
.ails-vgrid .dx-datagrid .dx-row.dx-group-row > tr > td {
    padding: 15px 0px 5px 0px !important;
}

.ails-vgrid .dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) { /* group row */
    font-size: 16px;
    color: #466EE5;
    background: transparent;
}

.ails-vgrid .dx-datagrid-rowsview .dx-row.dx-group-row td { /* group row border */
    border: none;
}

.ails-vgrid .col-form-label { /* description label */
    vertical-align: middle !important;
}

.ails-vgrid .dx-datagrid-focus-overlay { /* focus row effect */
    border: none;
}

.ails-vgrid .dx-datagrid .dx-editor-cell .dx-texteditor { /* text editor */
    border-radius: 5px !important;
    border: 1px solid #DDDDDD !important;
}
/* v-datagrid .end */


/* div rounded container .begin */
.ails-container {
    padding: 10px 15px 10px 15px;
    background-color: #FFFFFF;
    border-radius: 20px;
    height: 100%;
}

.ails-container-shadow {
    padding: 5px 5px 5px 5px;
    border-radius: 10px;
    height: 100%;
    box-shadow: 0px 2px 6px rgb(0 0 0 / 25%);
}
/* div rounded container .end */


/* ails card .begin */
.ails-card.card {
    border-radius: 25px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    margin: 5px;
}

.ails-card.card .card-header {
    background-color: transparent;
    font-size: 16px;
    font-weight: 700;
    color: #466EE5;
    height: 40px;
}

    .ails-card.card .card-body {
        padding: 8px 16px 8px 16px;
    }
/* ails card .end */


/* separator .begin */
.ails-separator {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 0px 5px 0px;
    border-top: 1px solid #D4D4D4;
    font-size: 16px;
    font-weight: 700;
    color: #466EE5;
    /*height: 40px;*/
}

    .ails-separator::before {
        content: attr(data-content)
    }
/* separator .end */

/* Horizontal Line .begin */
.ails-hr-text {
    /*line-height: 1rem;*/
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 1.5rem;
    opacity: 0.7;
}

    .ails-hr-text:before {
        content: "";
        background: linear-gradient(to right, transparent, #818078, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
    }

    .ails-hr-text:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: black;
        padding: 0 0.5rem;
        line-height: 1.5rem;
        color: red;
        background-color: #ffffff;
    }
/* Horizontal Line .end */

/* section .begin */
.ails-section {
    margin: 12px 0px 8px 0px !important;
    height: 35px;
}

    .ails-section.ails-section-green .flex-fill,
    .ails-section.ails-section-blue .flex-fill {
        border-bottom: 3px solid black;
    }

    .ails-section.ails-section-green .ails-section-left-corner,
    .ails-section.ails-section-blue .ails-section-left-corner {
        width: 50px;
        border-radius: 100% 0px 0px 0px
    }

    .ails-section.ails-section-green .ails-section-label,
    .ails-section.ails-section-blue .ails-section-label {
        min-width: 25% !important;
        color: #FFFFFF;
        font-weight: 700;
        font-size: 16px
    }

    .ails-section.ails-section-green .ails-section-right-corner,
    .ails-section.ails-section-blue .ails-section-right-corner {
        width: 50px;
        border-radius: 0px 0px 100% 0px
    }

    .ails-section.ails-section-green .flex-fill { /* green */
        border-image: linear-gradient(to right, #FFFFFF 0%, #7BD1A4) !important;
        border-image-slice: 1 !important;
    }

    .ails-section.ails-section-green .ails-section-left-corner {
        border-bottom: 3px solid #7BD1A4 !important;
        background-color: #7BD1A4 !important;
    }

    .ails-section.ails-section-green .ails-section-label {
        background-color: #7BD1A4;
        border-bottom: 3px solid #7BD1A4;
    }

    .ails-section.ails-section-green .ails-section-right-corner {
        background-color: #7BD1A4;
    }

    .ails-section.ails-section-blue .flex-fill { /* blue */
        border-image: linear-gradient(to right, #FFFFFF 0%, #85B6FF) !important;
        border-image-slice: 1 !important;
    }

    .ails-section.ails-section-blue .ails-section-left-corner {
        border-bottom: 3px solid #85B6FF !important;
        background-color: #85B6FF !important;
    }

    .ails-section.ails-section-blue .ails-section-label {
        background-color: #85B6FF;
        border-bottom: 3px solid #85B6FF;
    }

    .ails-section.ails-section-blue .ails-section-right-corner {
        background-color: #85B6FF;
    }
/* section .end */


/* tab .begin */
.dx-tabpanel .dx-tabs { /* tab strip */
    background-color: transparent;
    border: none;
}

.dx-item.dx-tab { /* tab */
    background-color: #FFFFFF;
    border-radius: 20px 20px 0px 0px;
    padding: 10px 15px 5px 15px;
    min-width: 100px;
}

    .dx-item.dx-tab.dx-tab-selected { /* selected tab's border */
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    }

        .dx-item.dx-tab.dx-tab-selected::after { /* selected tab's border */
            border: none;
        }

    .dx-item.dx-tab .dx-tab-text { /* tab label */
        font-family: 'Ubuntu', sans-serif !important;
        font-size: 18px;
        color: #8C8C8C;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-decoration: none;
    }

    .dx-item.dx-tab.dx-tab-selected .dx-tab-text { /* selected tab label */
        color: #000000;
        text-decoration: underline;
    }

.dx-tabpanel .dx-tab:not(.dx-tab-selected):not(.dx-state-hover) { /* non-selected tab's background*/
    background-color: #F2F2F2;
}

.dx-tabpanel .dx-multiview-wrapper { /* tab content bottom's corner */
    border: none;
    border-radius: 0px 20px 20px 20px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}

.dx-item-content.dx-multiview-item-content { /* tab content */
    background-color: #FFFFFF;
    padding: 10px 15px 10px 15px;
}
/* tab .end */


/* popup .begin */
@media (min-width: 768px) { /* popup rouned corner browser only  */
    .dx-overlay-wrapper.dx-popup-wrapper.dx-overlay-modal > .dx-overlay-content.dx-popup-normal.dx-popup-draggable {
        border-radius: 30px;
    }
}

.dx-toolbar.dx-popup-title {
    font-family: 'Ubuntu';
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, #466EE5 0%, #85B6FF 99.14%);
}

    .dx-toolbar.dx-popup-title .dx-toolbar-items-container .dx-toolbar-before {
        min-width: 60%
    }

.dx-closebutton .dx-icon-close { /* popup close button */
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.06em;
    color: #FFFFFF;
}
/* popup .end */

/* gallery .begin */
.dx-gallery .dx-gallery-nav-button-prev::before {
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900 !important;
    content: "\f104";
}

.dx-gallery .dx-gallery-nav-button-next::before {
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900 !important;
    content: "\f105";
}
/* gallery .end */

/* mobile menu .begin */
.mobile-menu-toolbar {
    position: fixed;
    top: 0px;
    z-index: 1;
}

    .mobile-menu-toolbar .dx-toolbar-items-container {
        height: 100% !important;
    }

    .mobile-menu-toolbar .dx-toolbar-before .dx-button {
        background: transparent;
        border: none;
    }

    .mobile-menu-toolbar .dx-toolbar-after .dx-button {
        background: transparent;
        border: none;
    }

    /*.mobile-menu-toolbar .dx-toolbar-after .dx-toolbar-item-content {*/ /* asolute logo */
        /*margin-right: 10px;
    }*/

    .mobile-menu-toolbar .dx-toolbar-label { /* page title */
        font-family: 'Ubuntu', sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em;
    }

.mobile-menu-toolbar-login { /* mobile toolbar on login */
    background: transparent;
    border: none;
}

    .mobile-menu-toolbar-login .dx-toolbar-before .dx-button .dx-icon { /* left button fore color */
        color: #FFFFFF;
    }

.mobile-menu-toolbar-authenticated { /* mobile toolbar after login */
    background-color: #FFFFFF;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #FFFFFF 20%, #85B6FF, #466EE5) !important;
    border-image-slice: 1 !important;
}

    .mobile-menu-toolbar-authenticated .dx-toolbar-before .dx-button .dx-icon { /* left button fore color */
        color: #000000;
    }

.mobile-menu-drawer.dx-drawer-opened {
    margin-top: -10px;
    margin-left: -15px;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    background: #FFFFFF !important;
    z-index: 10;
}

.mobile-menu-drawer .dx-list .dx-list-item {
    border-top: none;
    border-left: 5px solid #466EE5;
    background-color: #F2F2F2;
}

.mobile-menu-drawer .dx-list .dx-list-group-header i {
    font-size: 16px !important;
}

.mobile-menu-drawer .dx-list .dx-list-item a {
    font-size: 16px !important;
}
/* mobile menu .end */

/* mobile bottom nav .begin */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 55px;
        background-color: #ffffff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 400;
        color: #000000;
        /*
        flex-grow: 1;
        min-width: 50px;
        overflow: hidden;
        white-space: nowrap;
        font-family: sans-serif;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.1s ease-in-out;*/
    }

.mobile-bottom-nav-active a {
    color: #466EE5;
    border-bottom: 2px solid #466EE5;
}
/* mobile bottom nav .end */