/* K2A Red = #eb2026 */
/* K2A Charcoal = #3f4044 */
/* K2A Field Service Teal = #47a2b0 */
:root {
    --k2a-red: #eb2026;
    --k2a-charcoal: #3f4044;
    --k2a-teal: #47a2b0;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: white;
    overflow: hidden;
}

#registrationContainer {
    background-image: url(imgs/SCHEDULE.png);
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    width: 400px;
    height: 200px;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#registrationMessage {
    width: 300px;
    top: 100px;
    position: relative;
    left: 50px;
    text-align: center;
}

#logoutContainer {
    background-image: url(imgs/SCHEDULE.png);
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    width: 400px;
    height: 200px;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#logoutMessage {
    width: 300px;
    top: 100px;
    position: relative;
    left: 50px;
    text-align: center;
}

.progress-bar2 {
    position: relative;
    top: 125px;
    height: 10px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 0.4s linear;
    transition-property: width, background-color;
}

.progress-moved .progress-bar2 {
    width: 100%;
    background-color: var(--k2a-red);
    animation: progressAnimation 2s infinite;
}

@keyframes progressAnimation {
    0% {
        width: 5%;
        background-color: var(--k2a-red);
    }

    100% {
        width: 100%;
        background-color: var(--k2a-red);
    }
}

#registrationProgress {
    height: 18px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 0.4s linear;
    transition-property: width, background-color;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% {
        width: 5%;
        background-color: #F9BCCA;
    }

    100% {
        width: 100%;
        background-color: #EF476F;
    }
}

.dropdown-hover:hover {
    background-color: var(--k2a-teal);
    color: white;
}

#loginForm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    padding: 5px;
    border-width: 2px;
}

#loginButton,
#loginButton .dx-button-content {
    padding: 0;
}

#loginButton .button-indicator {
    height: 24px;
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.boldTimeStampLabel {
    font-weight: bold;
    font-size: 1em;
}


.lateTimeStamp {
    font-weight: bold;
    font-size: 1em;
    background-color: var(--k2a-red);
    color: white;
}

.timeStampLabel {
    font-size: 1em;
}

.wrappedColumnClass {
    white-space: normal;
    word-wrap: break-word;
    vertical-align: text-top !important;
}

.nonWordWrappedColumn {
    vertical-align: text-top !important;
}

.form-avatar {
    height: 96px;
    width: 96px;
    margin-right: 10px;
    border: 1px solid #d2d3d5;
    border-radius: 50%;
    background-image: url('imgs/blank-profile.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.highlighted_timespan {
    transition: background-color 400ms;
    -moz-transition: background-color 400ms;
    -webkit-transition: background-color 400ms;
    -o-transition: background-color 400ms;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

    .highlighted_timespan:hover {
        background-color: #ccc;
    }

div#mainContainer {
    position: relative;
    border: 1px solid #dfdfdf;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
}

div#mapInfoBoxDiv {
    padding: 4px 4px 4px 4px;
}

.logo {
    margin-left: 10px;
    margin-bottom: 2px;
    margin-top: 2px;
}

.grid_hover {
    background-color: #f2f2f2; /*var(--k2a-teal);*/
    /*color: white !important;*/
}

.outofShift_section {
    background-color: lightgrey;
    opacity: 0.25;
    filter: alpha(opacity = 25);
}

.companyUserHeader {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
}

.formButtonRight {
    float: right;
}
/* classes for header cell content */
.buttonHeaderCell {
    cursor: pointer;
    margin-left: 20px;
}

.rightHeaderCell {
    float: right;
    margin-right: 10px;
}

.sideBarControls {
    margin-left: 250px;
}
/* end classes for header cell content */

/* form labels */
.formLabel {
    font-weight: 700;
}
/* end form labels */

#registrationFailure {
    position: absolute;
    width: 800px;
    height: 200px;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -400px;
    text-align: center;
}

/*#registrationContainer {
    position: fixed;
    width: 400px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -200px;
    text-align: center;
}*/

/* DHTMLx Overrides */
.DatePickerButton {
    width: 16px;
    height: 16px;
}
/* Grid */
div.gridbox_dhx_web.gridbox table.obj tr td, .dhx_grid_adjust {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
}

div.gridbox_dhx_web.gridbox table.obj.row20px tr td {
    border-bottom: 1px solid #ededed;
    border-right: none;
}

div.gridbox_dhx_web.gridbox table.hdr td {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    border-width: 0 0px 0 0;
    border-top: 1px solid #dbdbdb;
    border-right-color: #dbdbdb;
}

div.gridbox_dhx_web.gridbox .odd_dhx_web {
    background-color: white;
    border-bottom-color: #f9f9f9;
    color: #000;
}

div.gridbox_dhx_web.gridbox table.obj tr.rowselected {
    background-color: var(--k2a-teal);
    color: #ffffff;
}

    div.gridbox_dhx_web.gridbox table.obj tr.rowselected td {
        background-color: var(--k2a-teal);
        color: #ffffff;
    }

div.gridbox_dhx_web.gridbox table.obj.row20px tr.rowselected td {
    background-color: var(--k2a-teal);
    border-right-color: var(--k2a-teal);
    color: #ffffff;
}

div.gridbox_dhx_web.gridbox table.obj tr td.cellselected {
    background-color: var(--k2a-teal);
    color: #ffffff;
}

div.gridbox_dhx_web.gridbox .xhdr {
    background-color: #f4f4f4;
    border-bottom: none;
}
/* End Grid */

/* Menu */
div.dhtmlxMenu_dhx_web_TopLevel_Item_Normal, div.dhtmlxMenu_dhx_web_TopLevel_Item_Disabled, div.dhtmlxMenu_dhx_web_TopLevel_Item_Selected {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
}

    div.dhtmlxMenu_dhx_web_TopLevel_Item_Normal:hover, div.dhtmlxMenu_dhx_web_TopLevel_Item_Disabled:hover, div.dhtmlxMenu_dhx_web_TopLevel_Item_Selected:hover {
        color: white !important;
    }

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon:hover table.dhtmlxMebu_SubLevelArea_Tbl:hover div.sub_item_text:hover {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: white !important;
}

div.dhtmlxMenu_dhx_web_TopLevel_Item_Selected {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
    background-color: var(--k2a-teal);
}

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item_selected td {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
    background-color: var(--k2a-teal);
}

div.dhtmlxMenu_dhx_web_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl td {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
}

/* End Menu */
.dhtmlx-alert .dhtmlx_popup_title, .dhtmlx-confirm .dhtmlx_popup_title, .dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title {
    color: white;
    background: var(--k2a-red);
    z-index: 0;
}

/* Popup */
.dhtmlx_popup_button:first-child {
    background: var(--k2a-teal);
    color: white;
    border: 1px solid var(--k2a-teal);
    box-shadow: none;
}

div.dhx_popup_dhx_web div.dhx_popup_area tr:hover td.dhx_popup_td {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    background-color: var(--k2a-red);
}

div.dhx_popup_dhx_web div.dhx_popup_area.dhx_popup_area_ie tr.tr_hover td.dhx_popup_td {
    background-color: var(--k2a-red);
}
/* End Popup */

.dhtmlx_modal_box {
    background: #fff;
    width: 330px;
    z-index: 10000;
}

.reportHeader {
    text-align: center;
}

/* Calendar */
.dhx_cal_event_clear.print_event {
    color: black !important;
    background-color: white !important;
    border-color: black;
}

/* End Calendar */

/* Color Picker */
.dhtmlxcp_dhx_web .dhxcp_g_area {
    position: absolute;
    width: 254px;
    height: 327px;
    border: 1px solid #fff;
    background-color: #f4f4f4;
    box-shadow: 0 0 5px 2px #d7d7d7;
    border-radius: 0;
}

.dhtmlxcp_dhx_web .dhxcp_sub_area {
    margin: 1px;
    width: 252px;
    height: 325px;
    background-color: #f4f4f4;
    border-radius: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


.dhtmlxcp_dhx_web .dhxcp_buttons_area button, .dhtmlxcp_dhx_web .dhxcp_memory_button_cont button {
    outline: none;
    border-radius: 0;
    background-color: white;
    border: 1px solid var(--k2a-charcoal);
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 11px;
    color: var(--k2a-charcoal);
}

.dhtmlxcp_dhx_web .dhxcp_contrast_area {
    border: 1px solid #bfc8ca;
    position: relative;
    height: 120px;
    width: 10px;
    cursor: pointer;
    float: right;
    padding: 5px;
}

.dhtmlxcp_dhx_web .dhxcp_buttons_area button:hover, .dhtmlxcp_dhx_web .dhxcp_memory_button_cont button:hover {
    /*background-color: #f56a6c;*/
    background-color: white;
    border: 1px solid var(--k2a-charcoal);
    color: var(--k2a-charcoal);
}
/* End Color Picker */
.dhxwins_vp_dhx_web div.dhxwin_hdr div.dhxwin_icon.k2a {
    background-image: url(../CSS/imgs/Schedule_icon_16.png);
    display: block;
}


/* Form */
.dhxform_obj_dhx_web {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
}

    .dhxform_obj_dhx_web div.dhxform_btn {
        background-color: white;
        border: solid 1px var(--k2a-charcoal);
        font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
        font-size: inherit;
        color: var(--k2a-charcoal);
    }

    .dhxform_obj_dhx_web div.dhxform_label {
        font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        color: #000;
    }

    .dhxform_obj_dhx_web .dhxform_textarea {
        font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
    }

    .dhxform_obj_dhx_web input.dhxform_textarea, .dhxform_obj_dhx_web textarea.dhxform_textarea {
        font-size: 12px;
    }

    .dhxform_obj_dhx_web .dhxform_select {
        font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        color: black;
    }

    .dhxform_obj_dhx_web div.dhxform_btn.dhxform_btn_over {
        background-color: white;
    }

    .dhxform_obj_dhx_web div.dhxform_btn.dhxform_btn_pressed {
        background-color: white;
    }


    /* enabled, not checked */
    .dhxform_obj_dhx_web div.dhxform_img.btn2state_0 {
        background-image: url("../CSS/imgs/button2state/toggle_off.png");
        width: 42px;
        height: 20px;
    }
    /* enabled, checked */
    .dhxform_obj_dhx_web div.dhxform_img.btn2state_1 {
        background-image: url("../CSS/imgs/button2state/toggle_on.png");
        width: 42px;
        height: 20px;
    }

    /* disabled, not checked */
    .dhxform_obj_dhx_web div.disabled div.dhxform_img.btn2state_0 {
        background-image: url("../CSS/imgs/button2state/toggle_off_dis.png");
        width: 42px;
        height: 20px;
    }
    /* disabled, checked */
    .dhxform_obj_dhx_web div.disabled div.dhxform_img.btn2state_1 {
        background-image: url("../CSS/imgs/button2state/toggle_on_dis.png");
        width: 42px;
        height: 20px;
    }

    .dhxform_obj_dhx_web div.dhxform_label div.dhxform_label_nav_link:focus {
        color: black;
    }
/* common */
/* fix label align a bit */
.dhxform_obj_material div.dhxform_item_label_right div.dhxform_label div.dhxform_label_nav_link {
    padding-top: 2px;
}

/* End Form */

/* Layout */
.dhxlayout_base_dhx_web div.dhx_cell_layout div.dhx_cell_hdr {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
}

.dhxlayout_base_dhx_web div.dhx_cell_layout div.dhx_cell_hdr {
    background-color: var(--k2a-charcoal);
}

/* End Layout */

/* Calendar */
.dhtmlxcalendar_dhx_web div.dhtmlxcalendar_dates_cont ul.dhtmlxcalendar_line li.dhtmlxcalendar_cell.dhtmlxcalendar_cell_month_date {
    color: #ffffff;
    background-color: var(--k2a-teal);
}

.dhtmlxcalendar_dhx_web div.dhtmlxcalendar_dates_cont ul.dhtmlxcalendar_line li.dhtmlxcalendar_cell.dhtmlxcalendar_cell_month_date_hover {
    background-color: var(--k2a-teal);
}

.dhtmlxcalendar_dhx_web div.dhtmlxcalendar_selector_obj table.dhtmlxcalendar_selector_table td.dhtmlxcalendar_selector_cell_middle ul li.dhtmlxcalendar_selector_cell_active {
    background-color: var(--k2a-teal);
    color: #ffffff;
}
/* End Calendar */

/* Combo List */
div.dhxcombolist_dhx_web div.dhxcombo_option {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
}

div.dhxcombolist_dhx_web.dhxcombolist_hdr div.dhxcombo_hdrtext {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
}

div.dhxcombolist_dhx_web div.dhxcombo_option.dhxcombo_option_selected {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    background-color: var(--k2a-teal);
}

div.dhxcombolist_dhx_web.dhxcombolist_multicolumn div.dhxcombo_option.dhxcombo_option_selected {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    background-color: var(--k2a-teal);
    border-top-color: var(--k2a-teal);
    border-bottom-color: var(--k2a-teal);
}

    div.dhxcombolist_dhx_web.dhxcombolist_multicolumn div.dhxcombo_option.dhxcombo_option_selected div.dhxcombo_cell {
        font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        border-left-color: var(--k2a-teal);
        color: #ffffff;
    }
/* End Combo List*/

/* Combo */
div.dhxcombo_in_grid_parent div.dhxcombo_dhx_web {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    border-color: var(--k2a-red);
}

div.dhxcombo_dhx_web div.dhxcombo_select_button {
    background-color: white;
    /*border: solid 1px var(--k2a-charcoal);*/
}

div.dhxcombolist_dhx_web.dhxcombolist_hdr {
    height: 33px;
    line-height: 33px;
    border-color: #eaeaea;
    border-bottom: 2px solid none;
    box-shadow: none;
}
/* End Combo */

/* Ribbon */
.dhtmlxribbon_dhx_web .dhxrb_highlight0 {
    border: 1px solid var(--k2a-red);
    background-color: var(--k2a-red);
    color: #ffffff;
}
/* End Ribbon */

/* Toolbar */
div.dhx_toolbar_poly_dhx_web .tr_btn_over td,
div.dhx_toolbar_poly_dhx_web .tr_btn_selected td {
    background-color: var(--k2a-teal);
}

.dhx_toolbar_dhx_web div.dhx_toolbar_btn.dhxtoolbar_btn_pres, .dhx_toolbar_dhx_web div.dhx_toolbar_arw.dhxtoolbar_btn_pres {
    background-color: #c7cfd1;
}

.dhx_toolbar_dhx_web div.dhx_toolbar_btn.dhxtoolbar_btn_dis, .dhx_toolbar_dhx_web div.dhx_toolbar_arw.dhxtoolbar_btn_dis {
    color: white;
}

.dhx_toolbar_dhx_web {
    background-color: #c7cfd1;
    color: #000;
}

    .dhx_toolbar_dhx_web div.dhx_toolbar_btn.dhxtoolbar_btn_over {
        background-color: #c7cfd1;
    }

    .dhx_toolbar_dhx_web div.dhx_toolbar_arw.dhxtoolbar_btn_over {
        background-color: #c7cfd1;
    }
/* End Toolbar */

/* DataView */
.dhx_dataview_default_item_selected {
    background-color: var(--k2a-teal);
    color: var(--k2a-red);
    border-color: var(--k2a-red);
}
/* End DataView */

/* List */
.dhx_list_default_item_selected {
    background-color: var(--k2a-teal);
    color: white;
    border-color: var(--k2a-teal);
}
/* End List */

/* Sidebar */
.dhxsidebar_base_dhx_web div.dhxsidebar_cont div.dhx_cell_sidebar div.dhx_cell_sidebar_hdr {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    background-color: #b1b7b9;
    color: #000000;
}

.dhxsidebar_base_dhx_web div.dhxsidebar_cont div.dhxsidebar_side {
    background-color: #c7cfd1;
    border-top: 10px solid #c7cfd1;
}

    .dhxsidebar_base_dhx_web div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item {
        background-color: #c7cfd1;
        color: #000000;
    }

        .dhxsidebar_base_dhx_web div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item:hover {
            background-color: #c7cfd1;
            color: #000000;
        }

        .dhxsidebar_base_dhx_web div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item.dhxsidebar_item_selected {
            background-color: #c7cfd1;
        }

.dhxsidebar_base_dhx_web div.dhxsidebar_cont div.dhxsidebar_arrows {
    border-color: #c7cfd1;
    background-color: #c7cfd1;
}
/* End Sidebar */
/* Tabbar */
.dhxtabbar_base_dhx_web div.dhxtabbar_tabs {
    background-color: var(--k2a-charcoal);
}

    .dhxtabbar_base_dhx_web div.dhxtabbar_tabs div.dhxtabbar_tab {
        background-color: var(--k2a-charcoal);
        font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        border-left: 2px solid var(--k2a-charcoal);
        border-right: 2px solid var(--k2a-charcoal);
    }
/* End Tabbar */

/* Window */
.dhxwins_vp_dhx_web div.dhxwin_hdr {
    background-color: #c7cfd1;
    color: black;
}

.dhxwins_vp_dhx_web div.dhxwin_active div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button:hover {
    background-color: #c7cfd1;
}

.dhxwins_vp_dhx_web div.dhxwin_brd {
    border-left: 5px solid #c7cfd1;
    border-right: 5px solid #c7cfd1;
    border-bottom: 5px solid #c7cfd1;
}
/* End Windows */

/* Scheduler */
.dhx_matrix_scell, .dhx_timeline_scale_header {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 11px;
}

.dhtmlxcalendar_dhx_web div.dhtmlxcalendar_month_cont {
    background-color: #c7cfd1;
    color: #000;
}

.dhx_cal_container {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
}

.dhx_cal_event .dhx_title {
    height: 16px;
}

.dhtmlxcalendar_dhx_web div.dhtmlxcalendar_time_cont {
    background-color: #c7cfd1;
    color: #000;
}

.dhtmlxcalendar_dhx_web div.dhtmlxcalendar_days_cont ul.dhtmlxcalendar_line {
    height: 23px;
    background-color: #f4f4f4;
    border-bottom: 2px solid #f4f4f4;
}

.dhx_cal_navline .dhx_cal_date {
    font-size: 18px;
    font-weight: 400;
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif;
}
/* End Scheduler */

/* End DHTMLx Overrides */

table {
    border-collapse: inherit !important;
}

.long-title h3 {
    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
    font-weight: 200;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
}

.requestLabel {
    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
    font-weight: 200;
    font-weight: bold;
    font-size: 16px;
    text-align: right;
    width: 175px;
    max-width: 175px;
    padding: 5px;
}

.requestData {
    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
    font-weight: 200;
    font-size: 16px;
    text-align: left;
    width: 450px;
    padding: 5px;
}



.expiredRequest {
    background-color: var(--k2a-red) !important;
    color: white !important;
}

.resourceHeaderDetail {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.resourceDataDetail {
    display: flex;
    height: 18px;
    line-height: 18px;
}

#RelatedLocationData, #RelatedCustomerData {
    background-color: white;
    width: 100%;
}

#customerHub {
    overflow: hidden;
}
/* DevExpress overrides */
.serviceRequestColumn {
    vertical-align: top;
}

.dx-field-item-label-text {
    color: black;
}

.dx-toast-content {
    min-height: 50px;
}

.dx-toast-error {
    transform: none !important;
    max-width: none !important;
    background-color: var(--k2a-red);
}

.dx-toast-success {
    transform: none !important;
    max-width: none !important;
    background-color: green;
}

.dx-toast-custom {
    transform: none !important;
    max-width: none !important;
}

.dx-scrollable-scroll-content {
    background-color: var(--k2a-charcoal) !important;
}

.dx-button-mode-text.dx-button-default {
    color: var(--k2a-charcoal);
    background-color: white;
    border: solid 1px var(--k2a-charcoal);
}

    .dx-button-mode-text.dx-button-default.dx-state-hover {
        color: var(--k2a-charcoal);
        background-color: white;
        border: solid 1px var(--k2a-charcoal);
    }

.dx-popup-title.dx-toolbar {
    background-color: var(--k2a-charcoal);
    color: white;
}

.dx-item .dx-toolbar-item .dx-toolbar-label {
    max-width: 100% !important;
}

.dx-button-mode-text.dx-button-default .dx-icon {
    color: white;
}

.formDateBox {
    font-family: 'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans- serif !important;
    font-size: 11px !important;
    color: #000;
}

#acceptButton,
#acceptButton .dx-button-content,
#rejectButton,
#rejectButton .dx-button-content {
    padding: 5px;
}

    #acceptButton .button-indicator,
    #rejectButton .button-indicator {
        height: 32px;
        width: 32px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

.dx-tabpanel .dx-tabs {
    background-color: #3f4044;
}

.dx-tabpanel .dx-tab {
    min-width: 72px;
}

.dx-tab.dx-state-hover {
    background-color: white;
    color: var(--k2a-charcoal);
}

.dx-tab.dx-tab-selected.dx-state-hover {
    color: var(--k2a-charcoal);
}

.dx-tab.dx-tab-selected {
    color: var(--k2a-charcoal);
}

.dx-tab {
    min-width: 90px;
    background-color: white;
    color: white;
}

    .dx-tab.dx-tab-selected:before {
        background-color: white;
    }

.dx-tabs-nav-button.dx-button.dx-tabs-nav-button.dx-button-has-icon:not(.dx-button-has-text) .dx-icon {
    color: white;
}

.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > tr > td {
    background-color: var(--k2a-teal);
    color: #ffffff;
}

    .dx-datagrid-rowsview .dx-selection.dx-row > td.dx-datagrid-group-space,
    .dx-datagrid-rowsview .dx-selection.dx-row:hover > td.dx-datagrid-group-space,
    .dx-datagrid-rowsview .dx-selection.dx-row > tr > td.dx-datagrid-group-space,
    .dx-datagrid-rowsview .dx-selection.dx-row:hover > tr > td.dx-datagrid-group-space {
        border-right-color: var(--k2a-teal);
    }

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-lines) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover:not(.dx-row-lines) > td {
    border-bottom: 1px solid var(--k2a-teal);
    border-top: 1px solid var(--k2a-teal);
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused).dx-row-lines > td, .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover.dx-row-lines > td {
    background-color: var(--k2a-teal);
    color: #fff;
}

.dx-pager .dx-pages .dx-selection,
.dx-pager .dx-page-sizes .dx-selection {
    background-color: var(--k2a-teal);
    color: #fff;
}

.dx-texteditor.dx-state-focused:before,
.dx-texteditor.dx-state-active:before {
    border-bottom: 2px solid var(--k2a-teal);
}

.dx-loadindicator-segment-inner {
    position: relative;
    height: 100%;
    border-color: var(--k2a-teal);
    border-width: 0.12em;
    border-style: solid;
    border-bottom-color: transparent;
    -webkit-animation: none;
    animation: none;
    border-radius: 50%;
}

.dx-checkbox-indeterminate .dx-checkbox-icon {
    background-color: var(--k2a-teal);
    color: #fff;
    border: none;
}

.dx-checkbox-checked .dx-checkbox-icon {
    color: #fff;
    background-color: var(--k2a-teal);
    border: none;
}

.dx-calendar-cell.dx-calendar-selected-date span, .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today span {
    color: #fff;
    background-color: var(--k2a-teal);
}

.dx-calendar-navigator-previous-view.dx-button .dx-icon, .dx-calendar-navigator-previous-month.dx-button .dx-icon {
    color: var(--k2a-teal);
}

.dx-calendar-navigator .dx-button .dx-icon {
    color: var(--k2a-teal);
}

.dx-timeview-format12.dx-dropdowneditor-button-visible .dx-texteditor-input {
    padding-right: 10px;
}

.dx-field-item-required-mark {
    color: red;
}

.dx-texteditor.dx-editor-outlined.dx-state-focused {
    -webkit-box-shadow: inset 0 0 0 2px var(--k2a-teal);
    box-shadow: inset 0 0 0 2px var(--k2a-teal);
}

.dx-datagrid-focus-overlay:after {
    background-color: var(--k2a-teal);
}

.dx-switch-handle:before {
    background-color: rgba(86,86,86,.2);
}

.dx-switch-on-value .dx-switch-handle:before {
    background-color: var(--k2a-teal);
}

.dx-switch-on-value .dx-switch-container:before {
    background-color: rgba(71,162,176,.5);
}

#contactForm::-webkit-scrollbar {
    width: .7em;
}

#contactForm::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#contactForm::-webkit-scrollbar-thumb {
    background-color: var(--k2a-charcoal);
    outline: 1px solid slategrey;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > tr > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) .dx-command-edit .dx-link {
    background-color: var(--k2a-teal);
    color: #fff;
}

.dx-list-item.dx-state-hover,
.dx-list-item.dx-state-active {
    background-color: var(--k2a-teal);
    color: white;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused {
    background-color: var(--k2a-teal);
    color: white;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {
    background-color: var(--k2a-teal);
}

.dx-item.dx-toolbar-item.dx-toolbar-label {
    max-width: unset !important;
}
/* End DevExpress overrides */

/* Label Color Changes */
.formLabelBlack {
    color: black;
}

/* mapping styles */
.container {
    width: 100%;
    background-color: #f0f0f0;
}

.sidebar {
    float: left;
    min-height: 170px;
    max-width: 435px;
}

    .sidebar .nav {
        padding: 10px;
    }

#resourceMap {
    margin-left: 10px;
}

.content {
    float: left;
    min-height: 170px;
}

    .content .section {
        padding: 10px;
    }

    .content h2 {
        font-size: 16px;
        margin: 0px;
    }

.clearfix {
    clear: both;
}

#trafficContainer {
    /*border-radius: 10px;*/
    background-color: white;
    width: 125px;
    padding: 5px;
    text-align: center;
}

#serviceRequestGrid {
    position: relative;
    width: 100%;
    height: 100%;
}
/* end mapping styles */

.expiredContract {
    color: var(--k2a-red);
}

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    padding-left: 7px;
    padding-right: 7px;
}

.custom-item {
    position: relative;
    min-height: 30px;
    /* display: flex;
    align-items: center;
    width: 100%; */
}

.dx-dropdowneditor-input-wrapper .custom-item > img {
    padding-left: 8px;
}

.custom-item .resourceText {
    display: inline-block;
    padding-left: 50px;
    text-indent: 0;
    line-height: 32px;
    font-size: 15px;
    width: 100%;
}

.custom-item .dropDownItem {
    display: inline-block;
    padding-left: 50px;
    text-indent: 0;
    line-height: 32px;
    font-size: 12px;
    width: 100%;
}

.custom-item .statusText {
    display: inline-block;
    padding-left: 30px;
    text-indent: 0;
    line-height: 16px;
    font-size: 12px;
    width: 100%;
}

.status-item .statusText {
    display: inline-block;
    padding-left: 30px;
    text-indent: 0;
    line-height: 16px;
    font-size: 12px;
    width: 100%;
}

.custom-item > img {
    left: 1px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

.custom-item > div {
    left: 1px;
    position: absolute;
    /* top: 50%; */
    /* margin-top: -15px; */
}

/*.form-avatar {
    height: 32px;
    width: 32px;
    margin-right: 10px;
    border: 0px solid #d2d3d5;
    border-radius: 50%;
    background-image: url('imgs/blank-profile.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
*/
.item-badge {
    text-align: center;
    float: left;
    margin-right: 12px;
    color: white;
    width: 18px;
    height: 18px;
    font-size: 19.5px;
    border-radius: 18px;
    /* margin-top: 2px; */
}