.jqx-widget-content-office {
    font-family: 'dinotregular', arial;
    color: #505759;
}

.jqx-widget-office .jqx-grid-cell-office, .jqx-widget-office .jqx-grid-column-header-office, .jqx-widget-office .jqx-grid-group-cell-office {
    cursor: default;
}

.jqx-grid-column-header div div span {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    cursor: pointer !important;
    white-space: normal;
    word-wrap: break-word;
    position: inherit;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.jqx-grid-cell-Office div.jqx-grid-cell-left-align {
    padding-left: 10px;
}

.jqx-grid-cell-Office div.jqx-checkbox-Office {
    padding-left: 0px !important;
}

.jqx-widget-content {
    font-size: 15px !important;
}

.jqx-grid-column-header-office {
    cursor: pointer !important;
}

/*Change default color of Jqx grid*/


.jqx-fill-state-hover-office {
    border-color: #d4d4d4 !important;
    color: #000;
    background: #F4F7F9 !important;
}

.jqx-input-office, .jqx-input-button-content-office {
    border-color: #d4d4d4;
}

.jqx-fill-state-focus-office, .jqx-combobox-content-focus-office, .jqx-numberinput-focus, .jqx-datetimeinput-office .jqx-fill-state-hover-office, .jqx-datetimeinput-office .jqx-fill-state-pressed-office {
    border-color: #d4d4d4 !important;
}

.jqx-fill-state-pressed-office {
    border-color: #d4d4d4 !important;
    color: #000;
    background: #99d4ea !important;
}

.jqx-icon-arrow-right {
    cursor: pointer !important
}

.jqx-icon-arrow-left {
    cursor: pointer !important
}

.jqx-tooltip {
    border-radius: 0px !important;
}

.jqx-tooltip-text {
    font-family: 'dinotregular', arial !important;
    background-color: #E9F8FF !important;
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 5px !important;
    border: 1px solid #000 !important;
    border-radius: 0px !important;
    color: #505759 !important;
}

.bootstrap-datetimepicker-widget {
    z-index: 999999;
}

    .bootstrap-datetimepicker-widget table tr td {
        border: none !important;
        background-color: #FFF;
    }

    .bootstrap-datetimepicker-widget table th {
        border: none !important;
        background-color: #FFF;
    }

.breadcrumbs li span {
    color: #494b4d;
    font-size: 12px;
    line-height: 16px;
    display: block;
}

.btn-outer input[type="submit"] {
    float: left;
    padding: 0 40px;
    background: #0094cc;
    height: 32px;
    cursor: pointer;
    outline: none !important;
    text-transform: uppercase;
    color: #fff;
    border: 0px;
}

/*.selectedOption li {
    display: inline;
    margin: 3px 5px 3px 2px;
    padding: 3px 3px;
    border: 1px solid #C5C4C4;
    border-radius: 3px;
    float: left;
}

.cancelTag {
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
    color: black;
}

    .cancelTag:hover {
        color: red;
    }

.ulTag {
    border: 1px solid #ddd;
    width: 300px;
    overflow: auto;
    padding: 0px 1px;
}*/

.greenclass .jqx-input {
    padding-left: 10px;
    margin: 0px 0px 0px 5px;
    border: 1px solid;
    width: 95% !important;
    height: 95% !important;
}

a.ic-download {
    background: url(../images/download-icon.png) no-repeat center;
    height: 26px;
    width: 26px;
    text-align: center;
    display: inline-block;
    margin-left: 3px;
    margin-top: 4px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

a.ic-edit {
    background: url(../images/ic-edit.png) no-repeat center;
    height: 26px;
    width: 26px;
    text-align: center;
    display: inline-block;
    margin-left: 3px;
    margin-top: 4px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

a.ic-MoveUp {
    background: url(../images/ar_up.png) no-repeat center;
    height: 26px;
    width: 26px;
    text-align: center;
    display: inline-block;
    margin: 10px 10px 10px 10px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

a.ic-MoveDown {
    background: url(../images/ar_bottom.png) no-repeat center;
    height: 26px;
    width: 26px;
    text-align: center;
    display: inline-block;
    margin: 10px 10px 10px 20px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

a.ic-view {
    background: url(../images/ic-view.png) no-repeat center;
    height: 26px;
    width: 26px;
    text-align: center;
    display: inline-block;
    margin-left: 3px;
    margin-top: 4px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

a.ic-delete {
    background: url(../images/ic-delete.png) no-repeat center;
    height: 26px;
    width: 26px;
    text-align: center;
    display: inline-block;
    margin-left: 3px;
    margin-top: 4px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
}

a.ic-download:hover {
    background-color: #e3e3e3;
}

a.ic-edit:hover {
    background-color: #e3e3e3;
}

a.ic-view:hover {
    background-color: #e3e3e3;
}

a.ic-delete:hover {
    background-color: #e3e3e3;
}

/* Flexible Slide-to-top Accordion Style*/
.wrapper {
    width: 100%;
    /*max-width:800px;*/
    margin: 30px auto;
}

.st-accordion {
    width: 100%;
    min-width: 270px;
    margin: 0 auto;
}

    .st-accordion ul li {
        height: 50px;
        border: 1px solid #c7deef;
        border-top: 1px solid #fff;
        overflow: hidden;
    }

        .st-accordion ul li:first-child {
            border-top: none;
        }

        .st-accordion ul li > a {
            background-color: rgba(195, 195, 195, 0.25);
            font-family: 'Josefin Slab',Georgia, serif;
            font-size: 22px;
            display: block;
            position: relative;
            line-height: 40px;
            outline: none;
            -webkit-transition: color 0.2s ease-in-out;
            -moz-transition: color 0.2s ease-in-out;
            -o-transition: color 0.2s ease-in-out;
            -ms-transition: color 0.2s ease-in-out;
            transition: color 0.2s ease-in-out;
            border: 1px solid #c7deef;
            color: #000;
            padding: 5px;
            text-transform: capitalize;
        }


            .st-accordion ul li > a span {
                background: transparent url(../images/down.png) no-repeat center center;
                text-indent: -9000px;
                width: 26px;
                height: 14px;
                position: absolute;
                top: 50%;
                right: -26px;
                margin-top: -7px;
                opacity: 0;
                -webkit-transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
            }

            .st-accordion ul li > a:hover {
                color: #000;
            }

                .st-accordion ul li > a:hover span {
                    opacity: 1;
                    right: 10px;
                }

        .st-accordion ul li.st-open > a {
            color: #4B4950;
        }

            .st-accordion ul li.st-open > a span {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                transform: rotate(180deg);
                right: 10px;
                opacity: 1;
            }

.st-content {
    padding: 5px 0px 30px 0px;
}

    .st-content p {
        font-size: 16px;
        font-family: Georgia, serif;
        font-style: italic;
        line-height: 28px;
        padding: 0px 4px 15px 4px;
    }

    .st-content div a {
        color: #4193EB;
        font-size: 20px;
        text-transform: capitalize;
        margin-left: 20px;
        margin-bottom: 15px;
    }

    .st-content div {
        margin: 15px;
        border-bottom: 1px solid #c7deef;
    }

    .st-content a.ic-delete, .st-content a.ic-edit, .st-content a.ic-view {
        margin: 0px;
        margin-bottom: -5px;
    }

.ic-radio {
    display: inline-block;
    margin-left: 35px;
    padding-left: 26px;
    background: url(../images/radio-check.png) 0 0 no-repeat;
    height: 20px;
    line-height: 20px;
    vertical-align: -4px;
    margin-top: 11px;
}

.ic-radiochecked {
    display: inline-block;
    margin-left: 35px;
    padding-left: 26px;
    background: url(../images/radio-check.png) 0 0 no-repeat;
    height: 20px;
    line-height: 20px;
    vertical-align: -4px;
    background-position: 0 -20px;
    margin-top: 11px;
}

.ic-checkbox {
    display: inline-block;
    margin-left: 35px;
    padding-left: 26px;
    background: url(../images/radio-check.png) 0 0 no-repeat;
    height: 20px;
    line-height: 20px;
    vertical-align: -4px;
    background-position: 0 -40px;
    margin-top: 11px;
}

.ic-checkboxchecked {
    display: inline-block;
    margin-left: 35px;
    padding-left: 26px;
    background: url(../images/radio-check.png) 0 0 no-repeat;
    height: 20px;
    line-height: 20px;
    vertical-align: -4px;
    background-position: 0 -60px;
    margin-top: 11px;
}

.modal-body input[type=checkbox] {
    display: inline-block;
    width: 18px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-appearance: none;
    outline: 0;
    /*background: url(../images/radio-check.png) 0 0 no-repeat;*/
    vertical-align: -4px;
    opacity: 0 !important;
    outline: none !important;
}

    .modal-body input[type=checkbox]:checked {
        background-position: 0 -60px;
    }

    .modal-body input[type=checkbox]:not(:checked) {
        background-position: 0 -40px;
    }

.btn-outer input[type="submit"] {
    border: 0;
    padding: 0 20px;
    height: 32px;
    cursor: pointer;
    outline: none !important;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    float: right;
}

#dvGroupBy, .divGroupBy {
    display: block;
    margin-top: 15px !important;
    padding: 10px !important;
    border: none !important;
}

#expandall {
    background: #00a0dc;
    border-radius: 0px;
    padding: 8px;
    text-align: center;
}

#collapseall {
    background: #00a0dc;
    border-radius: 0px;
    padding: 8px;
    text-align: center;
}

div.successmsg {
    line-height: 25px;
    padding: 5px;
    margin: 5px 15px 15px 0;
    border: solid 1px;
    color: green;
    /*background-color: #D8F9E6;*/
}

    div.successmsg span {
        white-space: pre-line;
    }

        div.successmsg span b {
            font-size: 18px;
        }

div.errormsg {
    line-height: 25px;
    padding: 5px;
    margin: 5px 15px 15px 0;
    border: solid 1px;
    color: #F50707;
    display: block;
    /*background-color: #FFC3C3;*/
}

    div.errormsg span {
        white-space: pre-line;
    }

        div.errormsg span b {
            font-size: 18px;
        }

div.alertmsg {
    line-height: 25px;
    padding: 5px;
    margin: 5px 15px 15px 0;
    border: solid 1px;
    color: #BB7C05;
    display: block;
    /*background-color: #FFF2C3;*/
}

    div.alertmsg span {
        white-space: pre-line;
    }

        div.alertmsg span b {
            font-size: 18px;
        }

div.infomsg {
    line-height: 25px;
    padding: 5px;
    margin: 5px 15px 15px 0;
    border: solid 1px;
    color: #003bb2;
    display: block;
}

    div.infomsg span {
        white-space: pre-line;
    }

        div.infomsg span b {
            font-size: 18px;
        }

.errormsg {
    color: #F50707;
}

.demoContainer {
    position: absolute;
    top: 0;
    left: 0;
    /*right:0;*/
}


/*dashboard*/
.SubMenuDiv {
    position: absolute;
    z-index: 10;
    left: 36%;
    top: 18%;
    background-color: white;
    height: auto;
    width: 150px;
    display: none;
    max-height: 281px;
    width: 225px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.SecondSubMenu {
    position: absolute;
    z-index: 10;
    left: 36%;
    top: 18%;
    /*background-color: white;*/
    width: 150px;
    display: none;
    width: 225px;
    /*height: 225px;*/
    z-index: 11;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

    .SecondSubMenu::-webkit-scrollbar {
        display: none;
    }

/* to hide scrollbar webkit in firefox */
@-moz-document url-prefix() {
    .SecondSubMenu {
        overflow-y: hidden !important;
    }
}

/* to hide scrollbar webkit in Edge */
@supports (-ms-ime-align:auto) {
    .SecondSubMenu {
        overflow-y: hidden !important;
    }
}

.ActiveCard:hover .smenu {
    display: block;
    color: #FFB03B;
}

.ActiveCard {
    position: relative;
    color: #333;
    border-radius: 8px;
    background-size: 104px 104px;
    -webkit-background-size: 104px 104px !important;
}



body {
    /*font-family: 'Segoe UI';*/
}

.SubOption {
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid lightgray;
    width: 225px;
}

    .SubOption a {
        color: #333;
        padding: 8px 12px;
        display: block;
    }

        .SubOption a:hover {
            background-color: #f0f0f0;
        }

.SecondSubOption a {
    color: #333;
    padding: 8px 12px;
    display: block;
}

    .SecondSubOption a:hover {
        background-color: #f0f0f0;
    }

.SecondSubOption {
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid lightgray;
    width: 220px;
    border-left: 1px solid lightgray;
}

.container > div > span {
    text-transform: uppercase;
}

.shortcutDiv {
    width: 250px;
    float: left;
    padding-top: 10px;
}

.shortcutItems {
    height: 104px;
    width: 104px;
    border-radius: 8px;
    float: left;
    margin: 0 10px 10px 0;
    background-size: 104px 104px;
    -webkit-background-size: 104px 104px !important;
}

.clickableDiv {
    height: 104px;
    width: 104px;
    display: table;
}

.clickableDivLink {
    text-align: center;
    display: table-cell;
    vertical-align: bottom;
    color: white;
    font-size: 11px;
    text-transform: uppercase;
}

.ActiveCard a {
    text-decoration: none !important;
}

/******* Changes of merged which mistakenly merged into Style.css *******/
.header-left {
    float: left;
    /*width: 80%;*/
}

.page-desc {
    float: left;
    padding-top: 13px;
    /*width: 80%;*/
}

.main-nav-block a {
    height: auto;
    line-height: 16px;
    padding: 11px;
    display: block;
}

.main-menu > li {
    width: 33.33%;
    text-align: center;
    float: left;
    padding: 10px 0 0 0;
    min-height: 120px;
}

.color13 .menu-icon {
    background: #e68e00;
}

.breadcrumbs li:after {
    position: absolute;
    content: "";
    right: 2px;
    top: -1px;
    line-height: 16px;
}

.dashboard .page-desc {
    padding-top: 18px;
    position: absolute;
    left: 200px;
    right: 300px;
    top: 0;
}

.dashboard-content {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    padding: 50px 0;
}

    .dashboard-content .inner-content {
        max-width: 1090px;
        margin: 0 auto;
        padding: 0 15px;
        overflow: auto;
    }

    .dashboard-content .dashboard-listing li a span {
        text-align: left;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 9px;
        width: 100%;
        box-sizing: border-box;
        /*text-transform: uppercase;*/
        font-size: 12px;
        font-family: 'dinotmedium', arial;
        text-align: center;
        word-wrap: break-word;
    }

    .dashboard-content .dashboard-listing2 li a span {
        text-align: left;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        /*text-transform: uppercase;*/
        font-size: 12px;
        font-family: 'dinotmedium', arial;
        text-align: center;
        word-wrap: break-word;
    }

.btn-outer .btn {
    float: left;
    padding: 0 40px;
}

/************** RADIO - CHECKBOX **************/
.modal-body .radio label, .checkbox label {
    margin-right: 6px;
    padding-left: 20px;
    display: inline-block;
    margin-bottom: 8px;
    color: white;
}

.modal-body input[type=checkbox], .modal-body input[type=radio] {
    vertical-align: middle;
}

    .modal-body input[type=checkbox]:not(old), .modal-body input[type=radio]:not(old) {
        margin: 0;
        padding: 0;
    }

        .modal-body input[type=checkbox]:not(old) + span, .modal-body input[type=radio]:not(old) + span {
            display: inline-block;
            margin-left: -20px;
            padding-left: 26px;
            background: url(../images/radio-check.png) 0 0 no-repeat;
            height: 20px;
            line-height: 20px;
            vertical-align: -4px;
        }

        .modal-body input[type=checkbox]:not(old) + span, .modal-body input[type=radio]:not(old) + span {
            position: relative;
        }

        .modal-body input[type=radio]:not(old):checked + span {
            background-position: 0 -20px;
        }

        .modal-body input[type=checkbox]:not(old) + span {
            background-position: 0 -40px;
        }

        .modal-body input[type=checkbox]:not(old):checked + span {
            background-position: 0 -60px;
        }

        .modal-body input[type=radio]:not(old):checked ~ img {
            border: 2px solid white;
        }

        .modal-body input[type=radio]:not(old) ~ img {
            border: 2px solid gray;
            position: relative;
            top: 28px;
            left: 10px;
        }

.boldText {
    font-family: 'dinotmedium', arial;
    font-size: 20px;
    color: #333;
    padding: 0 0 7px 0;
    margin: 0;
}

.textslogan {
    font-size: 18px;
    color: #0094cc;
    display: block;
    text-align: center;
    padding: 0 0 13px 0;
}

.form-group span {
    padding: 5px;
    font-size: 15px;
}

.form-group a {
    color: blue;
}

.jqx-grid-column-header div div span.jqx-checkbox-check-checked {
    padding-left: 0px;
}

.jqx-grid-column-header div div span.jqx-checkbox-check-indeterminate {
    padding-left: 0px;
}
/* Jqgrid CSS */

.selectedOption li {
    display: inline;
    margin: 2px 5px 2px 2px;
    padding: 3px 3px;
    border: 1px solid #C5C4C4;
    border-radius: 3px;
    float: left;
}

.cancelTag {
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
    color: black;
}

    .cancelTag:hover {
        color: red;
    }

.ulTag {
    border: 1px solid #ddd;
    /*width: 300px;*/
    overflow: auto;
    padding: 0px 1px;
}

.arrow {
    padding: 10px;
    cursor: pointer;
    color: #6b787d !important;
}

.arrow1 {
    padding-left: 10px;
    cursor: pointer;
    color: #6b787d !important;
}

.downarrow {
    margin-left: 10px;
}

.downloadtext {
    display: inline-block;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.customCell {
    margin-top: 6px;
}

    .customCell a {
        color: blue;
        text-decoration: underline;
    }

.smaller_lighter {
    color: #666;
    font-size: 11px;
}
/* End of Jqgrid */

.filterStatusLabel {
    float: left;
    line-height: 25px;
}

/******* End Of Changes ********/

a.ic-btn span.lblspan {
    display: inline-block;
    padding: 0px;
    position: relative;
    box-sizing: border-box;
    width: auto;
}

.jqx-input-button-header-office, .jqx-calendar-title-header-office, .jqx-grid-office .jqx-widget-header-office, .jqx-grid-header-office, .jqx-grid-column-header-office, .jqx-grid-office, .jqx-widget-content-office, .jqx-widget-office, jqx-grid-cell, .jqx-grid-cell-office, .jqx-item jqx-item-office, .jqx-grid-group-cell, .jqx-grid-group-cell-office, .jqx-fill-state-normal-office {
    font-family: 'dinotregular', Arial !important;
}

.jqx-grid-column-header, .jqx-grid-column-header-office, .jqx-widget-header, .jqx-widget-header-office {
    background: #f4f7f9 none repeat scroll 0 0 !important;
    font-weight: normal !important;
}

/*#contenttablejqxgrid .ic-radio,#contenttablejqxgrid .ic-radiochecked{display:block; width:26px; margin:10px auto 0;}*/
#contenttablejqxgrid .ic-radio, #contenttablejqxgrid .ic-radiochecked, #contenttablejqxgrid .ic-checkbox, #contenttablejqxgrid .ic-checkboxchecked {
    margin-left: 14px !important;
}

.jqx-grid-cell-left-align {
    margin-left: 14px !important;
    white-space: normal !important;
    word-wrap: break-word;
}

.jqx-grid-cell-sort {
    background-color: #fff;
}

.jspVerticalBar {
    display: block !important;
}

.fixed-content {
    /*overflow: hidden !important;*/
    width: 100% !important;
}

/*Start For grid scrollbar*/
.grid .jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    /*background: red;*/
}

.grid .jspHorizontalBar {
    position: absolute;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 7px;
}

.grid .jspTrack {
    background: #dddddd;
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.grid .jspDrag {
    background: #0094cc;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.grid .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
    z-index: 1000;
}
/*End For grid scrollbar*/
.center-cell {
    padding-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-left: 4px;
    margin-right: 2px;
    margin-bottom: 12.5px;
    margin-top: 12.5px;
    font-weight: bold;
}

.center-cell2 {
    margin-top: 12.5px;
}

#ContentPlaceHolder1_lbl_system_helper {
    display: list-item;
}

#ContentPlaceHolder1_lbl_hints_tips {
    display: list-item;
}

.btn-arrow {
    margin-bottom: 5px;
    text-align: center;
    width: 32px;
    padding: 5px 0 6px 0;
}

.btn-arrowright {
    background: url(../images/rightar.png) #0090d0 center center no-repeat;
    width: 32px;
    padding: 15px;
}

.btn-arrowrightdouble {
    background: url(../images/rightar_double.png) #0090d0 center center no-repeat;
    width: 32px;
    padding: 15px;
}

.btn-arrowleft {
    background: url(../images/leftar.png) #0090d0 center center no-repeat;
    width: 32px;
    padding: 15px;
}

.btn-arrowleftdouble {
    background: url(../images/leftar_double.png) #0090d0 center center no-repeat;
    width: 32px;
    padding: 15px;
}

.btn-arrowupar {
    background: url(../images/upar.png) #0090d0 center center no-repeat;
    width: 32px;
    padding: 15px;
}

.btn-arrowdownar {
    background: url(../images/downar.png) #0090d0 center center no-repeat;
    width: 32px;
    padding: 15px;
}

.multiSelect_input {
    height: 155px !important;
}

#iFrameSelectBox {
    width: 100%;
    border: none;
    /*height:500px;*/
}

.form-group .checkbox label {
    color: #505759;
}

.slide-panel {
    z-index: 9999;
}

.form-group span.input-group-btn {
    padding: 0px;
}

.form-control.auto {
    height: auto;
    min-height: 32px;
}

.form-group.half {
    width: 50%;
}

/*Calendar Control CSS*/
.Cal_Theme {
    width: auto !important;
    z-index: 1000 !important;
}

    .Cal_Theme .ajax__calendar_container {
        background-color: #35AEDB;
        border: solid 1px #cccccc;
        font-family: "dinotregular",arial !important;
    }

    .Cal_Theme .ajax__calendar_header {
        background-color: #d1edf7;
        margin-bottom: 4px;
    }

    .Cal_Theme .ajax__calendar_title,
    .Cal_Theme .ajax__calendar_next,
    .Cal_Theme .ajax__calendar_prev {
        color: #004080;
        padding-top: 3px;
    }

    .Cal_Theme .ajax__calendar_body {
        background-color: #FFFFFF;
        border: solid 1px #cccccc;
        width: auto !important;
    }

    .Cal_Theme .ajax__calendar_dayname {
        text-align: center;
        font-weight: bold;
        margin-bottom: 4px;
        margin-top: 2px;
        font-size: 12px;
    }

    .Cal_Theme .ajax__calendar_days,
    .Cal_Theme .ajax__calendar_months,
    .Cal_Theme .ajax__calendar_years {
        width: 160px;
    }

    .Cal_Theme .ajax__calendar_day,
    .Cal_Theme .ajax__calendar_month,
    .Cal_Theme .ajax__calendar_year {
        text-align: center;
        font-size: 12px;
    }

    .Cal_Theme .ajax__calendar_hover .ajax__calendar_day,
    .Cal_Theme .ajax__calendar_hover .ajax__calendar_month,
    .Cal_Theme .ajax__calendar_hover .ajax__calendar_year,
    .Cal_Theme .ajax__calendar_active {
        color: #FFFFFF;
        font-weight: bold;
        background-color: #4A89B9;
    }

    .Cal_Theme .ajax__calendar_today {
        font-weight: bold;
        font-size: 12px;
    }

    /*.Cal_Theme .ajax__calendar_other,*/
    .Cal_Theme .ajax__calendar_hover .ajax__calendar_today,
    .Cal_Theme .ajax__calendar_hover .ajax__calendar_title {
        color: #000000;
    }

    .Cal_Theme .ajax__calendar_title {
        font-size: 12px;
    }

    .Cal_Theme .ajax__calendar_other {
        color: #cccccc;
    }

    .Cal_Theme .ajax__calendar_footer {
        height: 20px;
        color: #000;
    }

    .Cal_Theme TD {
        border: 0 !important;
    }

.autoheight {
    height: auto;
}

.colorGrid td {
    padding: 5px;
}

.viewData {
    color: #0094cc !important;
}

.table td a {
    color: #007bff !important;
}

.table.policies-popup td {
    font-size: 16px;
}

.dgHeader td a {
    color: #000 !important;
    font-weight: bold;
}

.dgHeader td {
    color: #000 !important;
    font-weight: bold;
}


/*Start - multi selection box css*/
.multi-select-box {
    display: block;
}


.div_multi_select_box {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding-right: 50px !important;
    float: none !important;
    height: auto !important;
}

.multi_select_box_input_group_btn {
    position: absolute;
    width: auto;
    right: 0;
    top: -1px;
}

.multi_select_box_ul_tag {
    float: none !important;
    display: block !important;
    border: 0 !important;
    overflow: hidden;
}
/*End - multi selection box css*/

/*Satrt - expand panel css*/
.headers {
    background-color: white;
    border: 1px solid #b4bec8;
    padding: 3px;
}

    .headers input[type=text], input[type=password] {
        border: #fff 1px solid;
        padding: 4px;
        margin: 0;
        font-family: Calibri, Arial;
        font-size: 14px;
        color: #313131;
        -webkit-appearance: none;
    }

.highlight {
    background-color: #FFFFCC;
    border: solid 1px red;
    padding: 2px;
}

.switchcontent {
    border: 1px solid #b4bec8;
    border-top-width: 0;
    padding: 10px;
}
/*End - expand panel css*/

/*Satrt - follow up date css*/
.follow-up-date > .float-left {
    padding: 10px 10px 0 0;
}

.follow-up-date .checkbox, .form-group .follow-up-date .until-closed {
    padding: 0;
    margin: 8px 0 0 0;
    display: inline-block;
}

    .follow-up-date .checkbox label {
        margin: 0;
    }

/*End - follow up date css*/

/*Start - heighlight box css*/
#dhtmltooltip, #hintbox {
    background-color: #FFFFCC;
    border: 1px solid black;
    font-size: 11px;
    padding: 2px;
    position: absolute;
    visibility: hidden;
    width: 150px;
    z-index: 1000;
}
/*End - heighlight box css*/


.popup-overlay {
    z-index: 12 !important;
}

.popup {
    z-index: 13 !important;
}
/*Start - table header column css*/
.table tr:first-child td {
    /*font-weight: normal;*/
    background: #f4f7f9;
    text-align: left;
    border: solid 1px #d0dbe6;
    font-size: 14px;
    color: #333 !important;
    font-family: 'dinotmedium', arial;
}

    .table tr:first-child td a {
        color: #333 !important;
    }

.table tr:not(:first-child) {
    cursor: pointer;
}

.table tr:last-child {
    cursor: default;
}
/*Start - table header column css*/

.exp-col .row a.more {
    color: #337ab7;
    font-size: 15px;
    padding: 5px;
}

.more2 {
    color: #337ab7;
    font-size: 15px;
}

.moreQue {
    color: black;
    font-weight: lighter;
    text-align: justify;
}

a.moreQue:hover {
    color: black;
}

.center-cell-Que {
    padding-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-left: 15px;
    margin-right: 2px;
    margin-bottom: 12.5px;
    margin-top: 12.5px;
}

.graybox .row a.more {
    color: #337ab7;
    font-size: 15px;
    padding: 5px;
    cursor: pointer !important;
}

.jqx-grid-cell a.more {
    color: #337ab7;
}

a.more {
    color: #337ab7 !important;
}

.flip-box .front img {
    /*width: 50px;*/
    height: 50px;
}

.flip-box .fronts img {
    width: 70px;
    height: 70px;
}

#divMsg {
    display: none;
    position: absolute;
    top: 45%;
    left: 45%;
    border: 3px solid black;
    box-shadow: 1px 1px 10px black;
    border-radius: 20px;
    background-color: white;
    z-index: 1002;
    text-align: center;
    overflow: auto;
    height: 203px;
}

#divMsgOverlay {
    height: 98%;
    width: 97%;
    display: none;
    position: absolute;
    z-index: 1000;
}

#divMsgScan, #msbLoadingBar {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    z-index: 1002;
    text-align: center;
    overflow: auto;
    height: 150px;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.loading {
    font-family: Arial;
    font-size: 10pt;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    z-index: 999;
}

.filtered {
    background-color: #e1e6eb;
}

.input-group a {
    color: #6b787d;
}

.hr-clear-both {
    border-color: #d0dbe6;
    margin: 8px;
    width: 98%;
}

#defField .col-md-3 {
    vertical-align: middle;
    margin: 3px 0;
}

.repTable tr td {
    padding: 5px;
}


/*Sets Action link horizontally center*/
.viewRedirect {
    text-align: center !important;
    margin-left: 0 !important;
}

    .viewRedirect:hover {
        cursor: pointer !important
    }

.versionReview:hover {
    cursor: pointer !important
}

.revisionApprove:hover {
    cursor: pointer !important
}

.pad-7 {
    padding: 7px !important;
    margin-bottom: -10px !important;
}

.bold-font {
    font-weight: bold;
}

.leaveTypeCustomHeight {
    padding-bottom: 5%;
}

.jqx-scrollbar-mobile .jqx-scrollbar-thumb-state-normal-horizontal, .jqx-scrollbar-mobile .jqx-scrollbar-thumb-state-normal {
    z-index: 0 !important;
}

.bg-warning-open-action {
    background-color: #f3e5ff !important;
}

    .bg-warning-open-action:hover {
        background-color: #f3e5ff !important;
    }

/*-------------------Left menu Style -------------------------*/

.SubMenuDivLeft {
    position: absolute;
    z-index: 10;
    left: 36%;
    top: 18%;
    background-color: white;
    height: auto;
    display: none;
    max-height: 281px;
    -webkit-overflow-scrolling: touch;
    padding: 0px;
    border: 1px solid lightgray;
    width: 225px;
    margin-bottom: 5px;
    overflow: hidden;
}

    .SubMenuDivLeft::-webkit-scrollbar {
        display: none;
    }

/*to hide scrollbar webkit in firefox*/
@-moz-document url-prefix() {
    .SubMenuDivLeft {
        overflow-y: hidden;
    }
}

/*to hide scrollbar webkit in Edge*/
@supports (-ms-ime-align:auto) {
    .SubMenuDivLeft {
        overflow-y: hidden;
    }
}

.SubMenuDivLeft .subMenuWrapper {
    position: relative;
    margin: 0px;
}

/*.SubMenuDivLeft .scroll-box-div-left{max-height: 482px; overflow: hidden; width: 100%!important;z-index: 1200;}
.SubMenuDivLeft .scroll-box-div-left li > a img{position: absolute; left: 11px;}
.SubMenuDivLeft .scroll-box-div-left li > a:hover img{opacity: 0.8;}*/

div[id^='ascrail'] {
    display: block;
}

.SubOptionLeft {
    font-size: 13px;
    color: #333;
    border: 1px solid lightgray;
}

    .SubOptionLeft a, .SubOptionLeft a:link {
        color: #333;
        padding: 8px 12px;
        display: block;
    }

        .SubOptionLeft a:hover {
            background-color: #f0f0f0;
        }

/*.SubMenuDivLeft ul {
            padding: 0px 1px
        }*/

/*--------------*/
.ActiveCardLeft:hover .smenu {
    display: block;
    color: #FFB03B;
}

.ActiveCardLeft {
    position: relative;
    color: #333;
    border-radius: 8px;
    background-size: 104px 104px;
    -webkit-background-size: 104px 104px !important;
}

    .ActiveCardLeft a {
        text-decoration: none !important;
    }

/*--------------*/

.SecondSubMenuLeft {
    position: absolute;
    z-index: 10;
    left: 36%;
    top: 18%;
    width: 150px;
    display: none;
    width: 225px;
    /*height: 225px;*/
    z-index: 11;
    overflow: hidden;
    border: 1px solid lightgray;
    height: auto;
    max-height: 281px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .SecondSubMenuLeft::-webkit-scrollbar {
        display: none;
    }

/*to hide scrollbar webkit in firefox*/
@-moz-document url-prefix() {
    .SecondSubMenuLeft {
        overflow-y: hidden;
    }
}

/*to hide scrollbar webkit in Edge*/
@supports (-ms-ime-align:auto) {
    .SecondSubMenuLeft {
        overflow-y: hidden;
    }
}

.SecondSubOptionLeft {
    font-size: 13px;
    color: #333;
    border: 1px solid lightgray;
    width: 220px;
}

    .SecondSubOptionLeft a, .SecondSubOptionLeft a:link {
        color: #333;
        padding: 8px 12px;
        display: block;
    }

        .SecondSubOptionLeft a:hover {
            background-color: #f0f0f0;
        }


/*** Dashboard Welcome Note***/
.marqueediv {
    height: 80px;
    overflow: hidden;
    position: absolute;
    left: 180px;
    right: 300px;
}

    .marqueediv h5 {
        color: white;
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        line-height: 20px;
        text-align: center;
        /* Starting position */
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        /* Apply animation to this element */
        -moz-animation: marqueediv 35s linear infinite;
        -webkit-animation: marqueediv 35s linear infinite;
        animation: marqueediv 35s linear infinite;
        white-space: nowrap;
        -moz-animation-name: marqueediv;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -webkit-animation-name: marqueediv;
        -webkit-animation-duration: 35s;
        -webkit-animation-direction: normal;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-name: marqueediv;
        animation-duration: 35s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

/* Move it (define the animation) */
@-moz-keyframes marqueediv {
    0% {
        -moz-transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes marqueediv {
    0% {
        /* -webkit-transform: translateX(100%);*/
        -moz-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%);
    }

    100% {
        /*    -webkit-transform: translateX(-100%);*/
        -moz-transform: translateX(-100%); /* Firefox bug fix */
        transform: translateX(-100%);
    }
}

/* IE<=11 fix */
@keyframes marqueediv {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* for Ipad */
.marqueedivIpad {
    height: 80px;
    overflow: hidden;
    position: absolute;
    left: 200px;
    right: 300px;
}

    .marqueedivIpad h5 {
        color: white;
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        line-height: 20px;
        text-align: center;
        /* Starting position */
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        white-space: nowrap;
        -moz-animation-name: marqueedivIpad;
        -moz-animation-delay: 0s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -webkit-animation-name: marqueedivIpad;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 30s;
        -webkit-animation-direction: normal;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        -webkit-animation-fill-mode: forwards;
        animation-name: marqueedivIpad;
        animation-delay: 0s;
        animation-duration: 30s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

/* Move it (define the animation) */
@-moz-keyframes marqueedivIpad {
    0% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -moz-transform: translateX(100%);
    }

    100% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -moz-transform: translateX(-350%);
    }
}

@-webkit-keyframes marqueedivIpad {
    0% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%);
    }

    100% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateX(-450%);
        -moz-transform: translateX(-450%); /* Firefox bug fix */
        transform: translateX(-450%);
    }
}

@keyframes marqueedivIpad {
    0% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%);
    }

    100% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateX(-450%);
        -moz-transform: translateX(-450%); /* Firefox bug fix */
        transform: translateX(-450%);
    }
}

/*** END OF Dashboard Welcome Note***/

.termination-table {
    overflow-x: auto;
}


@media screen and (max-width: 1024px) {

    .hr-clear-both {
        width: 96%;
    }

    #marqueediv h5 {
        font-size: 18px;
    }
}

@media screen and (max-width: 992px) {
    .btn-arrowright {
        background: url(../images/downar.png) #0090d0 center center no-repeat;
        width: 32px;
        padding: 15px;
    }

    .btn-arrowrightdouble {
        background: url(../images/downar_double.png) #0090d0 center center no-repeat;
        width: 32px;
        padding: 15px;
    }

    .btn-arrowleft {
        background: url(../images/upar.png) #0090d0 center center no-repeat;
        width: 32px;
        padding: 15px;
    }

    .btn-arrowleftdouble {
        background: url(../images/upar_double.png) #0090d0 center center no-repeat;
        width: 32px;
        padding: 15px;
    }
}

@media screen and (max-width:991px) {
    .follow-up-date > .float-left .form-group {
        margin: 0;
    }

    .follow-up-date > .float-left {
        width: auto;
        padding: 10px 7px 0 0;
    }

        .follow-up-date > .float-left:last-child {
            padding-right: 0px;
        }

    #marqueediv h5 {
        font-size: 14px;
    }
}

@media screen and (max-width:767px) {
    .fixed-content {
        overflow: auto;
    }

    .header-left {
        width: 25%;
    }

        .header-left .logo img {
            width: 80px !important;
        }

    .slide-panel {
        margin-left: 0px !important;
    }

    .header-right {
        width: 75%;
    }

    .marqueediv {
        left: 100px;
        right: 180px;
    }
}

@media screen and (max-width:480px) {
    .follow-up-date > .float-left.every-text {
        width: 100%;
    }
}

@media screen and (max-width: 320px) {
    .st-accordion ul li > a {
        font-size: 30px;
        text-transform: capitalize;
        color: #808080 !important;
    }
}

.filtering_options .filtering_legend {
    font-size: 18px;
}

@media screen and (min-width: 768px) {
    .filtering_options .filtering_legend {
        font-size: 20px;
    }
}