/*
Template Name: ZamTnA
Author: Awan Entrepreneurship
Version: 11.0.0
Website: https://awan.om/
Contact: dev@awan.om
File: Ontime Css File
*/


.completedlink {
    color: #FFDA00 !important;
}

    .completedlink a:link a:visited a:hover a:active {
        color: #FFDA00 !important;
    }


/*
    *********************************************
    ** Theme - Ver11 (Start) 
    *********************************************
*/

/*
    *********************************************
    **  Theme (Start) 
    *********************************************
*/

/* Theme (Start) */
/* Theme (Start) */
:root {

    /* Primary brand color */
    --zamtna-color-2a3042: #3f5d7a;

    /* Site background overlay */
    --zamtna-color-site-background: rgba(220, 228, 236, .14);

    /* Cards */
    --zamtna-color-card-background: rgba(255, 255, 255, .97);

    /* Accent */
    --zamtna-chart-border-color: rgb(63, 93, 122);

    /* Blend */
    --zamtna-profile-blend-bg: #c8d5e2;

    /* Secondary */
    --zamtna-color-2E3548: #364f69;
    --zamtna-color-4458b8: #3f5d7a;
    --zamtna-color-485ec4: #6b86a1;

    /* IMPORTANT */
    --zamtna-color-556ee6: #3f5d7a;

    /* Light text */
    --zamtna-color-a6b0cf: #f1f6fb;

    /* Active */
    --zamtna-color-side-menu-active: #ffffff;

    /* Sidebar text */
    --zamtna-color-79829c: #f1f6fb;
    --zamtna-color-6a7187: #f1f6fb;

    /* Transparency system */
    --zamtna-color-85-110-230-0-1: rgba(63, 93, 122, 0.1);
    --zamtna-color-85-110-230-0-18: rgba(63, 93, 122, 0.18);
    --zamtna-color-85-110-230-0-2: rgba(63, 93, 122, 0.2);
    --zamtna-color-85-110-230-0-25: rgba(63, 93, 122, 0.25);
    --zamtna-color-85-110-230-0-3: rgba(63, 93, 122, 0.3);
    --zamtna-color-85-110-230-0-4: rgba(63, 93, 122, 0.4);
    --zamtna-color-85-110-230-0-5: rgba(63, 93, 122, 0.5);
    --zamtna-color-85-110-230-0-8: rgba(63, 93, 122, 0.8);

    /* RGB */
    --zamtna-color-85-110-230: 63, 93, 122;

    /* Timestamp */
    --zamtna-color-ts-device-4458b8: rgb(63, 93, 122);

    /* Accent */
    --zamtna-color-ts-location-2a3042: rgb(102, 132, 162);

    /* Light */
    --zamtna-color-ts-beacon-556ee6: rgb(241, 246, 251);

    /* Manual */
    --zamtna-color-ts-manual-6a7187: rgb(95, 104, 118);

    /* Medium */
    --zamtna-color-ts-wifi-79829c: #6b86a1;

    /* Scroll */
    --zamtna-color-scrollbar-color: rgba(63, 93, 122, 0.45);
    --zamtna-color-scrollbar-bgcolor: #f1f6fb;
}
/* Extra - Start */
.vertical-menu .metismenu li.mm-active > a,
.vertical-menu .metismenu li > a.active {
    /* Active Menu Item Text */
    color: var(--zamtna-color-side-menu-active) !important;
    /* Active Menu Item background */
    background-color: var(--zamtna-color-2a3042);
}

    .vertical-menu .metismenu li.mm-active > a i,
    .vertical-menu .metismenu li > a.active i {
        /* Active Menu Item Icon */
        color: var(--zamtna-color-side-menu-active) !important;
    }
/* Extra - End */

/* Custom - Start */
.text-color-on-main-backgropund {
    color: white
}

/* ############################################################ */
/* SECTION 1: HORIZONTAL PROFILE IMAGE (LEFT/RIGHT BLEND)       */
/* ############################################################ */

/* 1. Base Image Styling */
.blended-profile-img {
    mix-blend-mode: luminosity;
    opacity: 0.8;
    filter: contrast(1.2) brightness(0.9);
    transition: all 0.3s ease;
}

/* 2. English (LTR) Settings */
.blended-profile-img {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}

.zamtna-gradient {
    /* Transitions from dynamic background to the sidebar primary color */
    background: linear-gradient(to right, var(--zamtna-profile-blend-bg) 0%, var(--zamtna-profile-blend-bg) 12%, var(--zamtna-color-2a3042) 42%, var(--zamtna-color-2a3042) 100% ) !important;
}

/* 3. Arabic (RTL) Settings */
[dir="rtl"] .blended-profile-img {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}

[dir="rtl"] .zamtna-gradient {
    background: linear-gradient(to left, var(--zamtna-profile-blend-bg) 0%, var(--zamtna-profile-blend-bg) 12%, var(--zamtna-color-2a3042) 42%, var(--zamtna-color-2a3042) 100% ) !important;
}

/* ########## END OF SECTION 1 ########## */


/* ############################################################ */
/* SECTION 2: SIDEBAR BOTTOM BLENDED STYLE (VERTICAL BLEND)     */
/* ############################################################ */

/* 1. Base Image Styling (Sidebar Vertical Version) */
.sidebar-bottom-blended {
    mix-blend-mode: luminosity;
    opacity: 0.8;
    filter: contrast(1.2) brightness(0.9);
    transition: all 0.3s ease;
    width: 100%;
    display: block;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    object-fit: contain;
    object-position: bottom;
}

/* 2. Background Gradient (Dynamic Logic) */
.sidebar-bottom-container {
    margin-top: auto;
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    max-height: 250px;
    /* Uses the variable that changes between dark.css and light.css */
    background: linear-gradient(to top, var(--zamtna-profile-blend-bg) 0%, var(--zamtna-profile-blend-bg) 12%, var(--zamtna-color-2a3042) 42%, var(--zamtna-color-2a3042) 100% ) !important;
}

/* 3. Layout Fixes */
.vertical-menu [data-simplebar] .simplebar-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

#sidebar-menu {
    flex: 1 0 auto;
}

/* 4. RTL Support for Sidebar */
[dir="rtl"] .sidebar-bottom-container {
    background: linear-gradient(to top, var(--zamtna-profile-blend-bg) 0%, var(--zamtna-profile-blend-bg) 12%, var(--zamtna-color-2a3042) 42%, var(--zamtna-color-2a3042) 100% ) !important;
}

/* ########## END OF SECTION 2 ########## */


/* Pushes the element to the end of its container based on language direction */
/* Right in English (LTR) and Left in Arabic (RTL) */
.push-to-end {
    margin-inline-start: auto;
    margin-inline-end: 8px;
    width: max-content;
}

/* Custom - End */

/* Theme (End) */

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
/*
    *********************************************
    ** Diwan  (End) 
    *********************************************
*/


/*
    *********************************************
    ** Theme - Ver11 (End) 
    *********************************************
*/

/* Exampe to Change Primary Button */

/* OLD
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #265a88 !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
    */

/* ############################# */
/* ScrollTextList (Start)        */
/* ############################# */
.carousel-indicators li {
    background-color: var(--zamtna-color-85-110-230-0-5) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin: 0 4px !important;
    cursor: pointer !important;
}

.carousel-indicators .active {
    background-color: var(--zamtna-color-85-110-230-0-8) !important;
}
/* ############################# */

.carousel-inner {
    overflow: hidden;
}

.carousel-item .d-block {
    background-color: var(--zamtna-color-85-110-230-0-25);
    margin-bottom: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 60px;
    width: 100%;
}

.carousel-item p {
    color: var(--zamtna-color-556ee6);
    font-size: 15px;
    text-align: center;
    padding: 10px;
    width: 100%;
    overflow: hidden;
}

/* ############################# */
/* ScrollTextList (End)          */
/* ############################# */

/* ###################### */
/* Main DataTable (Start) */
/* ###################### */
table .dataTable tbody tr.selected {
    background-color: #6a9cca !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    color: white !important;
}

    table.dataTable tbody tr.selected td.sorting_1 {
        background-color: #6a9cca !important;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        color: white !important;
    }

table#datatable-main.dataTable tbody tr:hover {
    background-color: #f8f6fe;
}

    table#datatable-main.dataTable tbody tr:hover > .sorting_1 {
        background-color: #eaebec;
    }

table.dataTable tbody tr.maintableeven {
    background-color: #f8f9fa;
}

    table.dataTable tbody tr.maintableeven td.sorting_1 {
        background-color: #f5f6f7;
    }

table.dataTable tbody tr.trmaintableodd {
    background-color: white;
}

    table.dataTable tbody tr.trmaintableodd td.sorting_1 {
        background-color: #f5f6f7;
    }


tr.odd td.sorting_1 {
    background-color: #f5f6f7;
}

    tr.odd td.sorting_1 tr:hover > .sorting_1 {
        background-color: #f5f6f7;
    }
/* ###################### */
/* Main DataTable (End)   */
/* ###################### */

/* ###################### */
/* Sub DataTable (Start) */
/* ###################### */
table#datatable-sub.dataTable tbody tr:hover {
    background-color: #f8f6fe;
}

    table#datatable-sub.dataTable tbody tr:hover > .sorting_1 {
        background-color: #eaebec;
    }

/* ###################### */
/* Sub DataTable (End)    */
/* ###################### */

/* ###################### */
/* Wizard Round  (Start)  */
/* ###################### */
.wizard .steps ul li:not(:first-child) a::before {
    background-color: #fff
}

.wizard .steps ul li:not(:last-child) a::after {
    background-color: #eef9ff;
}

.wizard .steps ul li a {
    background-color: #eef9ff;
    color: #aaa;
}

.wizard .steps .current:not(:last-child) a::after {
    background-color: #fe9901
}

.wizard .steps .current a, .wizard-round .steps .current a::before, .wizard-round .steps .done a::before {
    background-color: #fe9901;
    color: #fff
}

    .wizard .steps .current a .number {
        background-color: #fff;
        color: #fe9901
    }

.wizard .steps .number {
    background-color: #a6d2eb;
    color: #fff
}

.wizard .actions a, .wizard-round .actions a {
    background-color: #fe9901;
    color: #fff
}

.wizard .actions .disabled a {
    background-color: #eee;
    color: #aaa
}

.wizard.vertical .steps ul li:last-child a::after {
    background-color: #eef9ff;
}

.wizard.vertical .steps ul .current:last-child a::after {
    background-color: #fe9901
}

.wizard label.error {
    color: #8a1f11
}

.wizard input.error {
    background-color: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #8a1f11
}

.wizard-round .steps ul li a {
    color: #ebebeb;
}

    .wizard-round .steps ul li a::before {
        background-color: #fff;
        box-shadow: 0 0 0 5px #ebebeb;
    }

    .wizard-round .steps ul li a::after {
        background-color: #ebebeb;
    }

.wizard-round .steps .current a, .wizard-round .steps .done a {
    color: #fe9901
}

    .wizard-round .steps .current a::after, .wizard-round .steps .done a::after {
        background-color: #fe9901
    }

.wizard-round .actions .disabled a {
    background-color: #eee;
    color: #aaa
}

.wizard-tabcontrol .steps a {
    color: #333
}

    .wizard-tabcontrol .steps .current a, .wizard-tabcontrol .steps a:hover {
        color: #fe9901
    }

.wizard-tabcontrol .steps .current {
    border-left: 1px solid #bbb;
    border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
    background-color: #fff
}

.wizard-tabcontrol .content {
    border-top: 1px solid #bbb;
}

.wizard-sub .steps ul li a {
    background-color: #f9c8dd;
}

    .wizard-sub .steps ul li a::after {
        border-top: 88px solid #f9c8dd;
    }

.wizard-sub .actions a, .wizard-sub .steps .current a, .wizard-sub .steps .done a {
    background-color: #de4d88;
    color: #fff
}

    .wizard-sub .steps .current a::after, .wizard-sub .steps .done a::after {
        border-top: 88px solid #de4d88
    }

.wizard-sub .steps .current small, .wizard-sub .steps .done small {
    color: #f9c8dd
}

.wizard-sub .steps .disabled a {
    background-color: #f9c8dd;
    color: #666
}

.wizard-sub .steps small {
    color: #777
}

.wizard-sub .actions .disabled a {
    background-color: #eee;
    color: #aaa
}
/* ###################### */
/* Wizard Round  (End)    */
/* ###################### */



/*
    *********************************************
    ** Override Bootstrap Theme (Start) 
    *********************************************
    Goto https://getbootstrap.com/docs/3.4/customize/
    and then create a new CSS file and paste it here

    Example:

    .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
        background-color: #8064A2 !important;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    }
    *********************************************
    ** Override Bootstrap Theme (End) 
    *********************************************
*/