/*
Template Name: OntimePlus
Author: Business City
Version: 10.0.0
Website: https://bc.com.sa/
Contact: ontime@bc.com.sa
File: Ontime Css File
*/

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

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

/* Ontime Theme (Start) */
:root {
    --ontimeplus-color-2a3042: #2a3042; /* Side Menu*/
    --ontimeplus-color-2E3548: #2E3548;
    --ontimeplus-color-4458b8: #4458b8;
    --ontimeplus-color-485ec4: #485ec4; /*(btn-primary:hover)*/
    --ontimeplus-color-556ee6: #556ee6; /*(primary)*/

    --ontimeplus-color-a6b0cf: #a6b0cf; /* Side Menu Text*/
    --ontimeplus-color-side-menu-active: #ffffff; /* Side Menu Active Text*/
    --ontimeplus-color-79829c: #79829c; /* Side Menu Sub Menu Text*/
    --ontimeplus-color-6a7187: #6a7187; /* Side Menu Title*/

    --ontimeplus-color-85-110-230-0-1: rgba(85, 110, 230, 0.1);
    --ontimeplus-color-85-110-230-0-18: rgba(85, 110, 230, 0.18);
    --ontimeplus-color-85-110-230-0-2: rgba(85, 110, 230, 0.2);
    --ontimeplus-color-85-110-230-0-25: rgba(85, 110, 230, 0.25); /* Profile */
    --ontimeplus-color-85-110-230-0-3: rgba(85, 110, 230, 0.3);
    --ontimeplus-color-85-110-230-0-4: rgba(85, 110, 230, 0.4);
    --ontimeplus-color-85-110-230-0-5: rgba(85, 110, 230, 0.5);
    --ontimeplus-color-85-110-230-0-8: rgba(85, 110, 230, 0.8);
    --ontimeplus-color-85-110-230: 85, 110, 230; /* Profile Font*/
}
/* Ontime 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;
}
/*
    *********************************************
    ** HRTnA Theme (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(--ontimeplus-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(--ontimeplus-color-85-110-230-0-8) !important;
}
/* ############################# */

.carousel-inner {
    overflow: hidden;
}

.carousel-item .d-block {
    background-color: var(--ontimeplus-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(--ontimeplus-color-85-110-230);
    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: #b8c5ec;
    color: white;
}

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

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

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

table.dataTable tbody tr.trmaintableodd {
    background-color: #848da9;
}

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


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: #b8c5ec;
    color: white;
}

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

/* ###################### */
/* 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) 
    *********************************************
*/