/******************************************************************************
 * This program is the property of Innovative Software Engineering
 * It is confidential and proprietary to Innovative Software Engineering
 * and may not be copied, used or disclosed without the advance
 * written permission of Innovative Software Engineering.
 * ****************************************************************************/

/*****************************************************************************
-
-
-	LINKS
-
-
******************************************************************************/

.logo-large {
    background-image: url("../Images/ISE_Banner.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* adjust these to match the image size */
    height: 124px;
    width: 225px;
    margin-left: 25px;
    margin-top: 10px;
    padding-bottom: 5px;
}

.powered-by-efs-logo-large {
    background-image: url("../Images/PoweredByEFleetSuite.png");
    background-size: 150px 34px;
    background-repeat: no-repeat;
    /* adjust these to match the image size */
    height: 57px;
    width: 225px;
    margin-left: 25px;
    margin-top: 25px;
}

.logo-small {
    background-image: url("../Images/ISE_Banner.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* adjust these to match the image size */
    height: 78px;
    width: 225px;
    margin-left: 25px;
    margin-top: 10px;
    padding-bottom: 5px;
}

.powered-by-efs-logo-small {
    background-image: url("../Images/PoweredByEFleetSuite.png");
    background-size: 100px 22px;
    background-repeat: no-repeat;
    /* adjust these to match the image size */
    height: 45px;
    width: 225px;
    margin-left: 25px;
    margin-top: 10px;
}

/*
    Header User Information
*/
.header-user-info {
    float: right;
    margin-top: 5px;
    margin-right: 10px
}

    .header-user-info > div {
        display: block;
    }

        .header-user-info > div:first-child {
            margin-bottom: 3px;
        }

a:active {
    color: #000000;
    text-decoration: none;
}

a:link, .link-style-button {
    color: #54585a;
}

a:visited {
    color: #54585a;
}

a:hover, .link-style-button:hover {
    color: #833177;
    text-decoration: none;
}

.largeLink {
    /* Large Hyperlink */
    font-weight: bold;
    font-size: 1.05em;
    color: Navy;
}

/*
    Help/SignOut
*/
.help-signout-container > div {
    display: inline-block;
    width: 90px;
    background-color: #54585a;
    text-align: center;
    height: 20px;
    font-size: 1.05em !important;
    margin-top: 3px;
    margin-right: 10px;
}

    .help-signout-container > div > a {
        text-decoration: none;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.logoff {
    font-weight: bold;
    font-size: 1.05em !important;
    color: white;
    background-color: #54585a;
    padding: .1em .25em
}

#driverGroupDiv {
    margin-right: 10px;
    margin-top: 70px;
}


/*****************************************************************************
-
-
-	BODY / HEADER
-
-
******************************************************************************/

BODY {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0;
    padding-top: 0;
    font-size: 100%;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
    background-repeat: repeat-y;
}


h2 {
    text-align: center;
}


.titleName {
    color: #54585a;
    font-weight: bold;
    font-size: 1.4em;
}


#logonInfo TD {
    color: White;
    font-size: 0.8em;
}


#logonInfo A {
    color: White;
    font-weight: bold;
    font-size: 0.9em;
}

.headerTable {
    width: 100%;
    height: 138px;
}

/* Do not show CDL Import in menu by default. */
#cdlImport {
    visibility: collapse;
}

.bodyTable {
    padding: 14px;
    background-color: transparent;
    width: 100%;
    height: 90%;
}

.table-align-top tr td {
    vertical-align: top;
}

.middle-align {
    vertical-align: middle;
    align-items: center;
}

.padded-div {
    padding-left: 8px;
}

.user-pref-combo-box-width {
    width: 10em;
}

/*****************************************************************************
-
-
-	CONTENT TABLES
-
-
******************************************************************************/

.contentTable {
    width: 100%;
    height: 100%;
    border-top: 1px;
    border-left: 1px;
    border-right: 1px;
    border-bottom: 1px;
    background-color: Transparent;
}

.contentTableShort {
    width: 100%;
    background-color: Transparent;
}

.contentTableShortWithPadding td {
    padding: 2px;
}

.contentCell {
    vertical-align: top;
    padding-top: 15px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: .95em;
    color: black;
    background-color: transparent;
}

.contentCellLessPadding {
    vertical-align: top;
    padding-top: 15px;
    padding-left: 3px;
    padding-right: 0;
    font-weight: bold;
    font-size: .95em;
    color: black;
    background-color: transparent;
}

.dataEntryTable {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 800px;
}


/*****************************************************************************
-
-
-	TABLE CONTENTS
-
-
******************************************************************************/

.deletedItem {
    background-color: rgb(240, 240, 240);
}

/*****************************************************************************
-
-
-	DATAGRIDS
-
-
******************************************************************************/

.dataGrid {
    width: 100%;
    margin: 5px;
    border-style: none;
}

.dataGridFooter {
    font-weight: bold;
    font-size: 1em;
    border: 0;
    border-top: 2px solid black;
}

.dataGridHeader, .one-line-grid-header, .md-header {
    /* ASP DataGrid  HeaderStyle */
    padding-left: 4px;
    font-weight: bold;
    font-size: 1em;
    color: white;
    background-color: transparent;
    border-style: none;
}

.dataGridHeaderWithImage {
    color: #54585a;
    text-decoration: underline;
    display: inline-block;
}

.md-header, .one-line-grid-header {
    padding-left: 15px;
    padding-right: 15px;
}

.one-line-grid-header {
    overflow: hidden;
    white-space: nowrap;
}

.dataGridHeaderNotSortable {
    padding-left: 4px;
    font-weight: bold;
    font-size: 1em;
    background-color: transparent;
    border-style: none;
    color: #323436;
}

.headerWithDefaultPadding {
    padding-left: 15px;
}

.dataGridCheckBoxHeader {
    /* ASP DataGrid  HeaderStyle */
    padding-left: 4px;
    font-weight: bold;
    font-size: 1em;
    background-color: transparent;
    border-style: none;
    width: 0;
    color: black;
}

.dataGridItem, .eventGridItem {
    /* ASP DataGrid ItemStyle */
    border-left: none;
    border-right: none;
    font-size: 0.9em;
    background-color: white;
}


    .eventGridItem td {
        border-top: white;
        border-bottom: white;
    }

.dataGridCheckBoxItem {
    /* ASP DataGrid ItemStyle */
    border-left: none;
    border-right: none;
    font-size: 1em;
    width: 0;
    color: black;
}

.dataGridAlternatingItem, .eventGridAlternatingItem {
    /* ASP DataGrid AlternatingItemStyle */
    border-left: none;
    border-right: none;
    font-size: 0.9em;
    background-color: #d9d9d6;
}

.multipleDaysLog .dataGrid {
    table-layout: fixed;
}

.eventGridAlternatingItem td {
    border-top: #d9d9d6;
    border-bottom: #d9d9d6;
}

.gridItem, .centeredGridItem, .time-grid-item, .md-grid-item {
    border-left: none;
    border-right: none;
    padding: 4px;
    margin: 1px;
}


.time-grid-item {
    overflow: hidden;
    white-space: nowrap;
}

.md-grid-item, .time-grid-item {
    text-align: left;
    padding-left: 15px;
}

.centeredGridItem {
    text-align: center;
}

.spacedGridItem {
    padding-right: 50px !important;
}

.gridHeader {
    border-left: none;
    border-right: none;
    color: black;
    background-color: transparent;
    font-weight: bold;
    font-size: 0.95em;
}


.dataGridItem.subtotalDataGridItem {
    background-color: #f6be00;
}

.dataGridDateListItem {
    padding: 5px 15px;
    border-style: none;
}

.dataGridItemSizedByColumn {
    padding: 5px 15px;
}

.active td {
    color: black;
    border-top: none;
    border-bottom: none;
}

.inactiveRequested td {
    color: red;
    font-weight: bold;
    border-top: none;
    border-bottom: none;
}

.inactiveChanged td {
    font-style: italic;
    color: black;
    border-top: none;
    border-bottom: none;
}

.inactiveRejected td {
    font-style: italic;
    color: #808080;
    border-top: none;
    border-bottom: none;
}

.inactiveWontAssign td {
    color: #323436;
    font-style: italic;
    border-top: none;
    border-bottom: none;
}

.inactiveWontAssignStatusText {
    color: mediumslateblue;
}

.gridNavigationButtons td {
    text-align: center;
}

.gridNavigationButtons input[type="button"] {
    margin: 0 .5em
}

.eventGridAlternatingItem {
    /* ASP DataGrid AlternatingItemStyle */
    border-left: none;
    border-right: none;
    font-size: 0.9em;
    background-color: #d9d9d6;
}

    .eventGridAlternatingItem td {
        border-top: #d9d9d6;
        border-bottom: #d9d9d6;
    }

.eventGridHosViolationItem {
    border-left: none;
    border-right: none;
    font-size: 0.9em;
    background-color: #f8aeae;
}

    .eventGridHosViolationItem td {
        border-top: #f8aeae;
        border-bottom: #f8aeae;
    }

.eventGridHosViolationAlternatingItem {
    border-left: none;
    border-right: none;
    font-size: 0.9em;
    background-color: #f97d7d;
}

    .eventGridHosViolationAlternatingItem td {
        border-top: #f97d7d;
        border-bottom: #f97d7d;
    }


.dataGridItem.subtotalDataGridItem {
    background-color: #f6be00;
}

/*****************************************************************************
-
-
-	GRIDVIEWS
-
-
******************************************************************************/

.Grid {
    width: 100%;
    margin: 5px;
    border-style: none;
}

    .Grid td {
        border-left: none;
        border-right: none;
        font-size: 1em;
        padding-right: 4px;
        padding-left: 4px;
        padding-bottom: 4px;
        padding-top: 4px;
        margin: 1px;
    }

    .Grid th {
        border-left: none;
        border-right: none;
        padding-left: 4px;
        font-weight: bold;
        font-size: 1em;
        color: #323436;
        background-color: transparent;
        border-style: none;
    }

.GridItem {
    border-left: none;
    border-right: none;
    font-size: 1em;
    background-color: white;
}

.GridItemAlt {
    background-color: #d9d9d6;
}

.Grid .pgr td {
    font-size: 1em;
}


/*****************************************************************************
-
-
-	TEXT
-
-
******************************************************************************/

/* Use this style of text when displaying a warning or "Note" */
.WarningText {
    font-weight: bold;
    font-style: italic;
    font-size: 1em;
    color: #833177;
}

/*	Use this style of text when displaying an error that occurred
	or an invalid operation by the user*/
.ErrorText {
    color: Red;
    font-size: 1em;
    line-height: 1.2em;
}

/*	Use this style of text when displaying an error that occurred
	or an invalid operation by the user*/
.SuccessText {
    color: Green;
    font-size: 1em;
    line-height: 1.2em;
}

/* Use this style of text when displaying explanatory text in a table */
.ExplanatoryText {
    font-style: italic;
    font-weight: bold;
}

.upgradeInProgress {
    padding: 5px;
    margin: 5px;
    /*color: #0194d3;*/
    font-weight: bold;
    border: 2px solid #ee7131;
    text-align: center;
}

.reportDescription {
    color: #000000;
    font-size: 0.95em;
    font-weight: bold;
}

.reportSubDescription {
    color: #000000;
    font-size: 0.85em;
    font-weight: normal;
    padding-top: 0.4em
}

.inPageHeading {
    color: #000000;
    font-size: 1.2em;
    font-weight: bold;
}

.standardText {
    color: #000000;
    font-size: 1em;
}

.filterText {
    color: #10829f;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: 1.2em;
}


/*****************************************************************************
-
-
-	New CSS for entry form controls
-
-
******************************************************************************/

.inputSectionHeader {
    color: white;
    font-size: 1.05em;
    font-weight: bold;
    line-height: 30px;
    width: 100%;
    background-color: #833177;
}

.inputSectionHeaderNoPurple {
    color: white;
    font-size: 1.05em;
    font-weight: bold;
    line-height: 30px;
    width: 100%;
    background-color: transparent;
}

.parameterLabel {
    color: #000000;
    font-size: 1em;
    font-weight: bold;
}

    .parameterLabel input[type="checkbox"] + label {
        position: relative;
        top: -2px;
        padding: 0 .25em;
    }

.disabled {
    color: #808080;
}

.outlineBox input[type="checkbox"] {
    outline: 2px solid #c00;
    outline-offset: 1px;
}

.inputText {
    color: #000000;
    font-size: 1em;
    line-height: 1.5em;
}

.inputRequiredField {
    color: Red;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.5em;
}

.inputRequiredAsteriskSmall {
    color: Red;
    font-weight: bold;
    font-size: 1em;
    line-height: 1em;
}

.uppercaseOnlyEditBox {
    text-transform: uppercase;
    color: #000000;
    font-size: 1.0em;
}

.standardCheckBox {
    color: #000000;
    font-size: 0.85em;
    font-weight: normal;
}

    .standardCheckBox label {
        position: relative;
        top: -2px;
    }

.standardCombo {
    color: #000000;
    font-size: 1em;
    max-width: 250px;
    word-wrap: break-word;
}

.standardListBox {
    color: #000000;
    font-size: 1em;
}

.standardEditBox {
    color: #000000;
    font-size: 1em;
}

.standardRadio {
    color: #000000;
    font-size: 1em;
}

    .standardRadio label {
        position: relative;
        top: -2px;
    }

.standardLabel {
    color: #000000;
    font-size: 1em;
}

.ruleSetCombo {
    color: #000000;
    font-size: 1em;
    max-width: 350px;
    word-wrap: break-word;
}


.headerLabel {
    color: #ffffff;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
    font-size: .75em;
    font-weight: bold;
}


/*****************************************************************************
-
-
-	BUTTONS
-
-
******************************************************************************/


input:disabled {
    background-color: #d9d9d6;
    color: white;
}

input[type="text"] {
    padding: .1em .2em;
    font-size: 1em;
}

select {
    padding: .11em .2em;
    font-size: 1em;
}

input[type="image"]:disabled {
    background-color: transparent;
    color: #808080;
}

input[type="text"]:disabled, select:disabled, option:disabled {
    background-color: #d4d0c8;
    color: #808080;
}

input[type="radio"][disabled] + label {
    color: #808080;
}

option:disabled {
    background-color: #d4d0c8;
    color: #808080;
}

.standardButton, .addRemoveButton, .prevnextButton {
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background-color: #54585a;
    border: 1px solid #ccc;
    outline: none;
    min-height: 25px;
    padding: .25em .5em
}

    .standardButton:active {
        box-shadow: 0 2px
    }

.addRemoveButton {
    width: 130px;
    margin-bottom: 10px;
}

.standardButton.divButton {
    background-color: #d9d9d6;
    height: 30px;
}

    .standardButton.divButton.selectedDivButton { background-color: #833177; }

.link-style-button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}


/******************************************************************************
-
-
-	DOT FORM
-
-
******************************************************************************/

TD {
    font-size: 1em;
}

pre {
    font-size: 1em;
}

.dotFormTable {
    background-color: Transparent;
}

.dotFormCell {
    vertical-align: top;
}

/******************************************************************************
-
-
-	DATE-PICKER CALENDAR STYLES
-
-
******************************************************************************/

.dayHeaderStyle {
    font-size: small;
    color: #000000;
    background-color: #D3D3D3;
}

.monthHeaderStyle {
    font-size: small;
    color: white !important;
    background-color: #54585a;
}

.selectedDateStyle {
    font-size: small;
    color: #000000;
    background-color: #d9d9d6;
}

.todayDayStyle {
    font-size: small;
    color: #000000;
    background-color: #f2b3ff;
}

.weekdayStyle {
    font-size: small;
    color: #000000;
    background-color: #ffffff;
}

.weekendStyle {
    font-size: small;
    color: black;
    background-color: #d9d9d6;
}

.holidayStyle {
    font-size: small;
    color: #000000;
    background-color: #ffffff;
}

.offMonthStyle {
    font-size: small;
    color: #000000;
    background-color: White;
}

.goToTodayStyle {
    font-size: small;
    color: Navy;
    background-color: White;
    font-weight: bold;
}

.clearDateStyle {
    font-size: small;
    color: #000000;
    background-color: White;
}

/******************************************************************************
-
-
-	Sophisticated Layout for Report
-
-
******************************************************************************/
.driverInfoLeftContainer {
    width: 412px !important;
    float: left;
    margin-bottom: 10px;
    line-height: 1.5em;
}
.driverInfoLeftContainer h3 {
    color: #626262;
    margin-bottom: 5px;
    margin-top: 5px;
}

.driverNameContainer {
    float: left;
    margin-bottom: 10px;
}

.logGridContainer {
    border-right: solid 1px black;
    float: left;
    margin-bottom: 15px;
    padding-right: 10px;
    width: 610px;
}

.areaTitleContainer {
    line-height: 2em;
    background-color: #833177;
    padding: .3em .5em;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.areaTitleLeft {
    margin-right: auto;
}

.areaSubtitleContainer {
    border-bottom: solid 1px #dadada;
}

.areaContentContainer {
    padding: 5px 5px 10px 14px;
}

.areaSubcontentContainer {
    padding: 5px 5px 10px 7px;
}

.SectionHeader {
    color: #000000;
    font-size: 1em;
    font-weight: bold;
}

.SectionHeaderWhite {
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
}

.SectionHeader2 {
    color: white;
    font-size: 0.95em;
    font-weight: bold;
}

.SectionHeader2Grid {
    color: black;
    font-size: 0.95em;
    font-weight: bold;
}

.SectionHeader3 {
    color: #000000;
    font-size: 0.9em;
    font-weight: bold;
}

.menu-items-list {
    padding-left: 150px;
    padding-top: 35px;
}

    .menu-items-list a {
        font-size: 1.05em;
        font-weight: bold;
    }

    .menu-items-list p {
        color: #000000;
        font-size: 1em;
        margin-top: 5px;
        padding-left: 15px;
    }

.ellipsis {
    max-width: 10em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.tooltip {
    display: none;
    position: absolute;
    z-index: 100;
    background-color: white;
    border: 1px solid green;
    padding: 3px;
    color: green;
    right: 20px;
}

.tooltipParentCell:hover span.tooltip {
    display: inline-block;
}

/******************************************************************************
-
-
-	MAPS
-
-
******************************************************************************/
.olClusterFeaturePopup {
    width: 300px;
    border-bottom: solid 1px #c4c4c4;
}

    .olClusterFeaturePopup p {
        background: #e9e7e7;
        padding: 5px 5px;
        margin: 0;
        font-weight: bold;
        border: solid 1px #c4c4c4;
        border-bottom: none;
        cursor: pointer;
    }

        .olClusterFeaturePopup p:hover {
            background-color: #e3e2e2;
        }

    .olClusterFeaturePopup div {
        background: #f7f7f7;
        margin: 0;
        padding: 10px 15px 15px;
        border-left: solid 1px #c4c4c4;
        border-right: solid 1px #c4c4c4;
    }

.olSingleFeaturePopup {
    width: 300px;
    border-bottom: solid 1px #c4c4c4;
}

    .olSingleFeaturePopup p {
        background: #e9e7e7;
        padding: 5px 5px;
        margin: 0;
        font-weight: bold;
        border: solid 1px #c4c4c4;
        border-bottom: none;
    }

    .olSingleFeaturePopup div {
        background: #f7f7f7;
        margin: 0;
        padding: 10px 15px 15px;
        border-left: solid 1px #c4c4c4;
        border-right: solid 1px #c4c4c4;
    }

.olControlAttribution-Custom {
    bottom: 3px;
    display: block;
    font-size: smaller;
    left: 3px;
}

    .olControlAttribution-Custom img {
        border: 0;
    }

/******************************************************************************
-
-
-	OTHER
-
-
******************************************************************************/
.b1 {
    font-size: 1px;
    overflow: hidden;
    display: block;
    height: 1px;
    background: #333333;
    margin: 0 5px;
}

.b2 {
    font-size: 1px;
    overflow: hidden;
    display: block;
    height: 1px;
    background: #c0c0c0;
    border-right: 2px solid #333333;
    border-left: 2px solid #333333;
    margin: 0 3px;
}

.b3 {
    font-size: 1px;
    overflow: hidden;
    display: block;
    height: 1px;
    background: #c0c0c0;
    border-right: 1px solid #333333;
    border-left: 1px solid #333333;
    margin: 0 2px;
}

.b4 {
    font-size: 1px;
    overflow: hidden;
    display: block;
    height: 2px;
    background: #c0c0c0;
    border-right: 1px solid #333333;
    border-left: 1px solid #333333;
    margin: 0 1px;
}

.contentb {
    background: #8dc63f;
}

.clearBoth {
    clear: both;
}


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.upArrow {
    height: 0px;
    width: 0px;
    display: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #10829f;
    cursor: pointer
}

.downArrow {
    height: 0px;
    width: 0px;
    display: inline-block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #10829f;
    cursor: pointer
}

.spacerRow {
    font-size: .1em;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
/* End hide from IE-mac */

/******************************************************************************
-
-
-	CSS Menu
-
-
******************************************************************************/
#menu {
    width: 100%;
    background-color: #8dc63f;
    float: left;
    line-height: 30px;
    font-size: 1.3em;
    font-family: Calibri, Arial, Verdana, Helvetica, Sans-Serif;
}

    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
        width: auto;
    }

        /*Top level menu link items style*/
        #menu ul li h2 a {
            display: block;
            padding: 0 17px;
            text-decoration: none;
            font-weight: bold !important;
            font-size: 1em !important;
            color: white;
        }

    #menu a, #menu h2 {
        font-weight: bold !important;
        font-size: 1em !important;
        display: block;
        margin: 0;
    }

    #menu h2 {
        color: Navy;
        text-transform: uppercase;
        white-space: nowrap;
    }

/* Text in the submenus*/
    #menu a {
        color: #54585a;
        text-decoration: none;
        white-space: nowrap;
        padding-left: .25em;
    }

    /*Sub level menu link items style*/
    #menu p {
        font-weight: bold !important;
        font-size: 1em !important;
        display: block;
        margin: 0;
        color: Navy;
        text-decoration: none;
        background-color: white;
        border: 1px solid #54585a;
    }

    #menu h2 a:hover {
        color: white;
    }

    /* Links within the submenus*/
    #menu p a:hover {
        background-color: #F5F5F5 !important; /*White Smoke*/
    }

    #menu a.arrow {
        background: url('../Images/MenuArrow.png') no-repeat;
        background-position: right;
    }

    #menu li {
        position: relative;
        z-index: 1200;
    }

    #menu ul ul {
        position: absolute;
        z-index: 5000;
    }

        #menu ul ul ul {
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 5000;
        }

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
    display: none;
}

    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul {
        display: block;
    }

.multipleDaysLog .axis {
    font: 14px sans-serif;
}

.multipleDaysLog .bar, .multipleDaysLog .highlight {
    clip-path: url(#clip);
}

.multipleDaysLog .grid line {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.multipleDaysLog .zoom {
    cursor: move;
    fill: none;
    pointer-events: all;
}

/******************************************************************************
-
-
-	Dialogs
-
-
******************************************************************************/

.dialog {
    border: 1px solid black;
    padding: 5px;
    display: none;
    position: absolute;
    z-index: 5001;
    background-color: #fff;
    max-width: 50vw;
}

.dialog * {
    margin: 5px;
}

.dialog-warning {
    color: red;
    font-weight: bold;
}

.dialog-centered * {
    margin: 5px;
}

.dialog-centered {
    z-index: 5001;
    background-color: #fff;
    border: 1px solid black;
    display: none;
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dialog_column_indent {
    padding-left: 7px;
    text-indent: -5px;
}

.dialog-label-style {
    display: inline-block;
    margin-top: 15px;
}

.dialog-right-column-indent {
    padding-right: 10px;
}

.dialog_max_width_column {
    max-width: 250px;
}

#dialogOverlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #aaa;
    opacity: .70;
    filter: alpha(opacity=70);
    z-index: 5000;
}

.homepageDataPanel {
    margin: 15px 8px 0 7px;
    border-radius: 3px;
    border: 7px solid #833177;
    float: left;
    cursor: pointer;
    color: #54585a;
}

    .homepageDataPanel:hover {
        box-shadow: 0 0 30px #833177;
    }

.homepageData {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.homepageLabel {
    text-align: center;
    position: relative;
    display: table-row;
    width: 100%;
}

.homepageLabelPanel {
    position: relative;
    top: 65%;
    transform: translateY(-100%);
    display: table;
    width: 100%;
    padding-bottom: 5px;
}

.homepageTimeLabel {
    color: #777777;
    font-style: italic;
}

/* extra large screen */
@media screen and (min-width: 1200px) {
    .homepageDataPanel {
        width: 12%;
    }

    .homepageData {
        font-size: 50px;
        font-size: 4vw;
    }

    .homepageDataLabel {
        font-size: 12px;
        font-size: 1.15vw;
    }

    .homepageTimeLabel {
        font-size: 10px;
        font-size: 1vw;
    }
}

/* desktop screen */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .homepageDataPanel {
        width: 15%;
    }

    .homepageData {
        font-size: 50px;
        font-size: 5vw;
    }

    .homepageDataLabel {
        font-size: 12px;
        font-size: 1.4vw;
    }

    .homepageTimeLabel {
        font-size: 10px;
        font-size: 1.2vw;
    }
}

/* tablet screen */
@media screen and (max-width: 992px) and (min-width: 600px) {
    .homepageDataPanel {
        width: 18%;
    }

    .homepageData {
        font-size: 50px;
        font-size: 6vw;
    }

    .homepageDataLabel {
        font-size: 12px;
        font-size: 1.6vw;
    }

    .homepageTimeLabel {
        font-size: 10px;
        font-size: 1.4vw;
    }
}

/* phone screen */
@media screen and (max-width: 600px) {
    .homepageDataPanel {
        width: 43%;
    }

    .homepageData {
        font-size: 50px;
        font-size: 10vw;
    }

    .homepageDataLabel {
        font-size: 12px;
        font-size: 2.5vw;
    }

    .homepageTimeLabel {
        font-size: 10px;
        font-size: 2.3vw;
    }
}

.homeTerminalPicklist {
    color: #000000;
    font-size: 1em;
    min-width: 15.25em;
    max-width: 30em;
    word-wrap: break-word;
}

.homeTerminalNameEditBox {
    color: #000000;
    font-size: 1em;
    width: 30em;
}

.groupPicklist {
    color: #000000;
    font-size: 1em;
    min-width: 10em;
    width: fit-content;
    word-wrap: break-word;
    box-sizing: border-box;
}

.groupFilterDropDown {
    font-size: 0.95em;
    max-width: 843px;
    height: 100%;
    float: right;
}

.subFeatureParameterLabel {
    margin-left: 5%
}

.hideSubFeaturePermissionRow {
    display: none;
}

.showHideAdvancedSettingsLabel {
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    background-color: #54585a;
    height: 25px;
    border: 2px solid #d9d9d6;
    box-shadow: 0 0 0 1px #d9d9d6;
    outline: none;
    cursor: default;
    padding: 1%;
}

.advancedSettingsLegendLabel {
    white-space: pre-line;
    display: block;
}

.carrierNameDropDown {
    max-width: 25.3em;
    padding: 2px 1px;
}

.import-input {
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.import-container {
    margin-bottom: 15px;
}

.multi-select-item {
    min-height: 1.5em;
    background-color: #eee;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius:6px;
}

.multi-select-remove {
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin-left: 4px;
    padding: 2px;
    color: #626262;
}

.multi-select-remove:hover {
    font-weight: bolder;
    color: black;
}

.multi-select-selected-area {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.multi-select-search {
    max-width: 90%;
}

.multi-select-area {
    display: inline-block;
}

.multi-select-text-n-tool {
    display: inline-flex;
    align-items: center;
    padding-bottom: 5px;
}

.yard-radio-buttons {
    display: inline-flex;
    gap: 10px;
    white-space: nowrap;
}


/******************************************************************************
-
-
-	Third Party ID Elements
-
-
******************************************************************************/
.btn {
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-shadow: 0 2px 2px 0 #CCC, 0 3px 1px -2px #CCC, 0 1px 5px 0 #CCC;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 #CCC, 0 3px 1px -2px #CCC, 0 1px 5px 0 #CCC;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #eceff1 !important;
    color: #000000 !important;
    text-decoration: none;
    margin-top: 1em;
}

    .btn:hover {
        box-shadow: 0 2px 2px 0 #CCC, 0 3px 1px -2px #CCC, 0 1px 5px 0 #CCC;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
    }

.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

    .waves-effect img {
        position: relative;
        z-index: -1;
    }


.logo {
    max-height: 20px;
    margin-right: .5em;
}

.valign-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.content_wrapper {
    width: 100%;
    text-align: center;
}

.org_container {
    display: inline-block;
    width: 30%;
}

    .org_container > * img {
        max-height: 100%;
        max-width: 100%;
    }

.orgBtn {
    height: 100% !important;
}

.data-grid-tooltip {
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.data-grid-tooltip .data-grid-tooltip-content {
    background: white;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    display: flex;
    opacity: 1;
    position: absolute;
    bottom: 100%;
    visibility: hidden;
    z-index: 1;
}

.data-grid-tooltip .data-grid-tooltip-content .data-grid-tooltip-content-column {
    padding: 5px 15px 5px 5px;
    white-space: nowrap;
    bottom: 100%;
}

.data-grid-tooltip:hover .data-grid-tooltip-content {
    visibility: visible;
}


/******************************************************************************
-
-
-	Toggle Switch Control
-
-
******************************************************************************/

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .switch input {
        opacity: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(170%);
    -ms-transform: translateX(170%);
    transform: translateX(170%);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.vehicleInformationTable {
    width: 100%;
    margin-bottom: 1.5vh;
    border-style: hidden;
    border-collapse: collapse;
}

.vehicleInformationTable td {
    border: 0;
    padding: 5px;
    display: table-cell;
}

.vehicleInformationHeaderStyle {
    padding-left: 100px;
}

.vehicleInformationTableHeader {
    line-height: 2em;
    background-color: #833177;
    padding: .3em .5em;
}

.vehicleInformationFooter {
    font-weight: bold;
}

.flexContainer {
    display: flex;
    vertical-align: middle;
    flex-wrap: wrap;
    align-items: center;
}

img#BodyContent_controlDriverLogDetail_selectedCountry {
    height: 1.5em;
    margin-top: auto;
    margin-bottom: 5px;
    margin-left: 1em;
}

td.oneThirdPart {
    display: table-cell;
    vertical-align: top;
    width: 33%;
}

.eventDetailedText:not(.expanded) {
    display: none;
}

.expandEvent.expanded {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
}

.expandEvent {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate( 45deg );
}

.tableContentDiv {
    height: auto;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.locationDialogRuleSetChange {
    left: 650px !important;
    top: 300px !important;
}