.RoutePanel {
    position: relative;
    height: 100%;
}

#routePanelContainer {
    height: 100%;
}

.routePanelTextInput {
    height: 34px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    /* font-weight: 600; */
    color: #333333;
    width: 100%;
    box-sizing: border-box;
}

    .routePanelTextInput[selected] {
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    .routePanelTextInput[resulted] {
        border-radius: 4px 4px 0 0;
    }

.ineligible {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#routePanelTabSelector {
    display: flex;
    height: 39px;
}

.routePanelSeperator {
    height: 1px;
    background-color: #DCDCDC;
    box-shadow: 0px 1px 3px #DCDCDC;
}

.routePanelTabInner {
    margin: 0 auto;
    padding: 10px 0 10px 20px;
    display: table;
    /* margin-top: 0; */
    border-bottom: 2px solid #ffffff00;
    background-repeat: no-repeat;
    background-position: 0;
    font-size: 14px;
    color: rgb(239, 151, 0);
}

.routePanelTabButton {
    cursor: pointer;
    opacity: 0.5;
    width: 50%;
    margin: 0 5%;
    overflow: hidden;
    white-space: nowrap;
}

    .routePanelTabButton.routePanelTabButtonSelected {
        font-weight: 600;
        opacity: 1;
        border-bottom: 2px solid #FFBA00;
    }

    .routePanelTabButton[data-content="routecreate"] .routePanelTabInner {
        background-image: url(Images/routecreate.svg);
    }

    .routePanelTabButton[data-content="routelist"] .routePanelTabInner {
        background-image: url(Images/routelist.svg);
    }

#routePanelTabContentContainer {
    position: relative;
}

.routePanelTabContent {
    display: none;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.routePanelInnerContent {
    width: 100%;
    position: absolute;
    padding: 20px 10px;
    bottom: 0;
    top: 0;
    box-sizing: border-box;
    overflow-y: auto;
}

#routePanelPointListTable tr:not(#routePanelPointListTableConstantRow):nth-child(2n+1) td:first-child {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 27px;
}

#routePanelPointListTable tr:nth-child(2n+1) td:last-child {
    vertical-align: middle;
    display: contents;
    text-align: center;
}

    #routePanelPointListTable tr:nth-child(2n+1) td:last-child div {
        cursor: pointer;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #BE0A0A;
    }

#routePanelPointListTable tr td:nth-child(2) {
    /*position: relative;*/
}

#routePanelPointList table tr:nth-child(2n) td:last-child {
    font-weight: 600;
    margin: auto 0;
    padding-left: 10px;
}

    #routePanelPointList table tr:nth-child(2n) td:last-child div,
    #routePanelResultTable table tr:last-child td:last-child div,
    .routePanelDetailRowInfo div:not(:first-child) {
        padding: 2px 10px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: 12px;
        padding-left: 17px;
        white-space: nowrap;
        float: left;
    }

        #routePanelPointList table tr:nth-child(2n) td:last-child div:empty,
        #routePanelResultTable table tr:last-child td:last-child div:empty,
        .routePanelDetailRowInfo div:not(:first-child):empty {
            display: none;
        }

        #routePanelPointList table tr:nth-child(2n) td:last-child div:first-child,
        #routePanelTotalDistanceValue,
        .routePanelDetailRowInfo div:nth-child(2) {
            background-image: url(Images/range.svg);
        }

        #routePanelPointList table tr:nth-child(2n) td:last-child div:last-child,
        #routePanelTotalDurationValue,
        .routePanelDetailRowInfo div:nth-child(3) {
            background-image: url(Images/duration.svg);
        }

#routePanelPointListTable tr td:first-child div:first-child {
    position: absolute;
    width: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: 0 auto;
    z-index: -1;
    top: 0;
    border: 1px solid #B7B7B7;
    height: 36px;
    background-color: #B7B7B7;
}

#routePanelPointList {
}

    #routePanelPointList table {
        width: 100%;
        border-spacing: 0;
        /*display: grid;*/
    }

#routePanelPointListTable {
    /*display: table-caption;*/
    max-height: 203px;
    /*overflow-y: hidden;*/
    padding-bottom: 3px;
}

    #routePanelPointListTable tr {
        display: flex;
    }

        #routePanelPointListTable tr td:first-child {
            position: relative;
        }

        #routePanelPointListTable tr:last-child {
            height: 20px !important;
        }

            #routePanelPointListTable tr:last-child td:first-child div {
                border-style: dashed !important;
                height: 20px !important;
                background-color: white !important;
            }

#routePanelPointList table tr {
    height: 36px;
}

#routePanelResultTable tr:first-child {
    background-color: #f5f5f5;
    height: 36px;
    width: 100%;
    color: #FF9900;
    font-weight: 600;
    cursor: pointer;
}

    #routePanelResultTable tr:first-child:hover {
        background-color: #f2f2f2;
    }

    #routePanelResultTable tr:first-child td:first-child {
        background-image: url(Images/addpoint.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 14px;
        cursor: pointer;
    }

    #routePanelResultTable tr:first-child td:last-child {
        padding-left: 8px;
    }

#routePanelResultTable tr:nth-child(2) td:first-child {
    padding: 0 15px;
    font-weight: bold;
    font-size: 10px;
    height: 40px;
}

#routePanelPointsContainer {
    overflow-y: auto;
    max-height: 203px;
    min-height: 60px;
    overflow-x: hidden;
    box-sizing: border-box;
}

#routePanelAltRouteList {
    position: absolute;
    width: 100%;
    bottom: 0;
}

    #routePanelAltRouteList table {
        width: 100%;
        border-spacing: 0;
        font-weight: 600;
        padding: 0 10px 10px;
    }

        #routePanelAltRouteList table tr {
            height: 50px;
        }

            #routePanelAltRouteList table tr:hover:not(:only-child) {
                background-color: #f2f2f2;
                cursor: pointer;
            }

        #routePanelAltRouteList table td {
            border-bottom: 1px solid #DCDCDC;
        }

.routePanelAltLine {
    padding: 0 15px;
    min-width: 13px;
}

    .routePanelAltLine div {
        background-color: #adb9c3;
        border-radius: 5px;
        height: 5px;
    }

#routePanelAltRouteList table tr:only-child {
    cursor: initial !important;
}

    #routePanelAltRouteList table tr:only-child td div {
        background-color: #1A8CF2 !important;
    }


#routePanelAltRouteList table tr[selected] td div {
    background-color: #1A8CF2;
}

/*#routePanelRouteListScrollView {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 160px;
}*/

.routePanelAltRouteItem {
}

.routePanelCreateButtons {
    left: 0;
    right: 0;
    padding: 10px;
    position: absolute;
    box-sizing: inherit;
    bottom: 0;
    background-color: white;
}

#routePanelCreateButton, #routePanelSaveButton {
    float: right;
}

.routePanelCancelButton {
}

#routeSaveContainer {
    position: absolute;
    padding: 0 10px;
    left: 0;
    right: 0;
}

    #routeSaveContainer table {
        width: 100%;
        border-spacing: 0;
    }

        #routeSaveContainer table tr td {
            padding-bottom: 10px;
            padding-top: 20px;
        }

        #routeSaveContainer table tr:first-child td {
            padding-top: 0 !important;
        }

        #routeSaveContainer table tr.routePanelBorderBottom td {
            border-bottom: 1px solid #dcdcdc;
            padding-bottom: 20px;
            padding-top: 10px;
        }

        #routeSaveContainer table tr.routePanelSingleRow td {
            padding-top: 20px;
        }

#routePanelColorPicker {
    height: 24px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 4px 4px;
    width: 52px;
    position: relative;
}

    #routePanelColorPicker[opened] {
        height: 25px;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        z-index: 9;
    }

.routePanelColor {
    background-color: #0080FF;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    float: left;
}

#routePanelColorPickerButton {
    background-image: url(Images/down.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    cursor: pointer;
    float: left;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    border-radius: 4px;
}

    #routePanelColorPickerButton:hover {
        background-color: #f2f2f2;
    }

#routePanelToleranceBox {
    margin: 2px 0px 2px 10px;
    width: 50px !important;
    float: right;
    height: 22px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    /*font-weight: 600;*/
    color: #333333;
}

#routePanelSpeedBox1, #routePanelSpeedBox2 {
    margin: 2px 0px;
    /*width: 100px !important;*/
    height: 22px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    color: #333333;
}

#routePanelColorSelector {
    position: absolute;
    top: 31px;
    background-color: white;
    border: 1px solid #DCDCDC;
    width: 113px;
    padding: 2px;
    border-radius: 0 4px 4px 4px;
    left: -1px;
    display: none;
}

    #routePanelColorSelector .routePanelColor {
        width: 24px;
        height: 24px;
        margin: 2px;
        box-sizing: border-box;
    }

        #routePanelColorSelector .routePanelColor:hover {
            cursor: pointer;
            border: 1px solid #646464;
        }

#routePanelColorPicker[opened] #routePanelColorSelector {
    display: block;
}
/*Route List Page*/
#routePanelListBar {
    width: 100%;
    display: inline-flex;
    padding-top: 10px;
    border-bottom: 1px solid #dcdcdc;
    z-index: 1;
    background-color: white;
}
#routePanelListSearchBox {
    width: 100%;
    height: 34px;
}

#routePanelClear {
    width: 23%;
    white-space: nowrap;
    position: static !important;
    font: normal normal normal 14px/19px Segoe UI;
    padding-top: 9px;
}

#routePanelClear > .dx-checkbox-container > .dx-checkbox-text {
    white-space: nowrap;
}

#routePanelClear > .dx-checkbox-container {
    height: auto;
    padding-left: 19px;
}

#routePanelListButtons {
    width: 27%;
    position: relative;
    text-align: right;
}

    #routePanelListButtons .routePanelListSeperator {
        top: 0;
    }

    #routePanelListButtons div:not(.routePanelListSeperator) {
        /*transform: scale(0.9, 0.9);*/
        border-radius: unset;
        display: inline-table;
    }

.routePanelListSeperator {
    position: absolute;
    width: 2px;
    background-color: #f1f1f1;
    height: 80%;
    margin: auto;
    /*bottom: 0;
    top: 0;*/
    box-sizing: border-box;
}

#routePanelListContainer {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 110px;
    padding: 0 0px;
    bottom: 0;
    box-sizing: border-box;
    overflow: auto;
}

    #routePanelListContainer table {
        width: 100%;
        border-spacing: 0;
        /*border-bottom: 1px solid #dcdcdc;*/
    }

        #routePanelListContainer table td {
            word-break: break-all;
        }

            #routePanelListContainer table td .routePanelListSeperator {
                left: -2px;
                height: 100%;
            }

        #routePanelListContainer table tr {
            height: 48px;
        }

            #routePanelListContainer table tr:not(.routePanelDetailRow) {
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

        #routePanelListContainer table:not([filtered]) tbody tr:nth-child(4n-1) {
            background-color: #F5F5F5;
        }

        #routePanelListContainer table tr[selected] {
            box-shadow: 0px 3px 6px #00000029;
        }

        #routePanelListContainer table tr:not([style*="display: none"])[selected] + tr {
            display: table-row;
        }

        #routePanelListContainer table tr[selected] + tr td {
            position: relative;
            height: 80px;
            border-top: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
        }

        #routePanelListContainer table td:nth-child(1) {
            width: 10%;
            text-align: left;
        }

        #routePanelListContainer table td:nth-child(2) {
            font-weight: bold;
            padding-right: 10px;
        }

        #routePanelListContainer table td:nth-child(3), #routePanelListContainer table td:nth-child(4) {
            width: 102px;
            font: normal normal normal 12px/14px Segoe UI;
        }

            #routePanelListContainer table td:nth-child(3) div:only-child, #routePanelListContainer table td:nth-child(4) div:only-child {
                position: relative;
            }

.routePanelDetailRow {
    display: none;
    font-weight: 600;
    box-sizing: border-box;
}

    .routePanelDetailRow td {
        padding: 10px 30px;
    }

        .routePanelDetailRow td div.AAPI-SnakeWaiter:not(:only-child) {
            display: none;
        }

.routePanelDetailRowPoint {
    padding-left: 34px;
    text-align: left;
    min-height: 34px;
    position: relative;
    padding-top: 6px;
    max-height: 50px;
    overflow: hidden;
    font-size: 12px;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
}

    .routePanelDetailRowPoint div {
        background-image: url(Images/routepoint.svg);
        background-position: initial;
        background-repeat: no-repeat;
        background-size: 35px;
        width: 35px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        padding: 7px 0;
        font-weight: bold;
        font-size: 11px;
        text-align: center;
    }

.routePanelDetailRowInfo {
    width: 100%;
    text-align: left;
    padding-left: 34px;
    height: 34px;
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

.routePanelDetailLine {
    width: 2px;
    position: absolute;
    left: 16px;
    top: -32px;
    bottom: -17px;
    background-color: #B7B7B7;
    z-index: -1;
    height: 100px;
}

.routePanelListItemValue {
    background-position: left;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-left: 17px;
    white-space: nowrap;
}

#routePanelListContainer table td:nth-child(3) .routePanelListItemValue {
    background-image: url(Images/range.svg);
}

#routePanelListContainer table td:nth-child(4) .routePanelListItemValue {
    background-image: url(Images/duration.svg);
}

.routePanelListItemHeader {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #B7B7B7;
}

.routePanelListItemContainer {
    margin: 0 10px;
    display: table;
}

.routePanelSearchResults {
    position: fixed;
    background-color: white;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
    display: none;
    z-index: 999;
}

    .routePanelSearchResults div {
        width: 100%;
        min-height: 30px;
        padding: 6px 20px;
        box-sizing: border-box;
    }

        .routePanelSearchResults div.routePanelSearchItem:hover {
            cursor: pointer;
            background-color: #f2f2f2;
        }

.routePanelSearchItemHeader {
    font-weight: 600;
    background-color: #DCDCDC;
    color: #333333;
}

.routePanelAlert {
    color: #7f7f7f;
    font-weight: 600;
    background-image: url(Images/info.svg);
    background-repeat: no-repeat;
    background-size: 40px;
    display: table-cell;
    padding: 4px 0 4px 45px;
    font-size: 11px;
    text-align: justify;
}

    .routePanelAlert b {
        color: #464545;
    }

#routePanelUploadContent {
    display: none;
}

#routePanelUpload .dx-widget, #routePanelUpload .dx-fileuploader-input-label {
    margin-left: -6px !important;
    margin-top: -7px !important;
}

#routePanelUpload {
    background: white;
    bottom: auto;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    padding: 15px;
}

    #routePanelUpload table {
        width: 100%;
    }

        #routePanelUpload table tr:not(:first-child) {
            height: 50px;
        }

            #routePanelUpload table tr:not(:first-child):not(:last-child) td:first-child {
                text-align: left;
                font-weight: bold;
                padding: 18px 10px 18px 5px;
                min-width: 72px;
                vertical-align: top;
            }

#routePanelUploadCancelButton {
    float: right;
}

.routePanelInform {
    color: #7f7f7f;
    font-weight: 600;
    background-image: url(Images/info.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 20px;
    display: table-cell;
    padding: 2px 0 4px 22px;
    font-size: 10px;
    position: absolute;
    margin-top: 8px;
}

.routePanelFormHeader {
    text-align: right;
    font-weight: bold;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 73px;
    text-overflow: ellipsis;
    /*    overflow-wrap: anywhere;*/
}

#routePanelTimePickerEnd,
#routePanelTimePickerStart {
    max-width: 105px;
}

#routePanelSpeedBox1,
#routePanelSpeedBox2 {
    max-width: 86px;
}

#routeSaveContainer
.dx-datebox.dx-auto-width .dx-texteditor-input, .dx-datebox:not(.dx-texteditor-empty).dx-auto-width .dx-texteditor-input {
    padding-right: 0px;
}

#routeSaveContainer
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

#routePanelNameAlert, #routePanelUploadAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    margin-top: 2px;
    display: none
}

#routeSaveContainer .errorIndicator {
    border: 2px solid #ff7d7d;
}

    #routeSaveContainer .errorIndicator + div {
        display: block;
    }

.routePanelScrollView {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 55px;
    left: 0;
    right: 0;
    padding: 20px 10px;
    box-sizing: border-box;
}

.routePanelResultHeader {
    background-color: #cfcfcf;
    background-position: left;
    background-repeat: no-repeat;
    background-size: 64px;
    font-weight: bold;
    text-align: center;
    padding: 5px 50px;
    box-sizing: border-box;
}

.routePanelResultList {
    padding-bottom: 5px;
    background-color: white;
}

#routePanelDaysBox {
    max-width: 303px;
}

#routePanelSaveResultMask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: white;
    display: none;
}

#routePanelSaveResult {
    position: relative;
    box-shadow: 0px 3px 6px #00000029;
    background-color: #ffffff;
    margin: 10px;
    border-radius: 5px;
    max-height: 80%;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    padding: 15px 15px 60px 15px;
    overflow: hidden;
    display: none;
}

#routePanelSaveResultScroll {
    overflow-y: auto;
    box-sizing: border-box;
    position: absolute;
    bottom: 60px;
    left: 15px;
    top: 15px;
    right: 15px;
}

.routePanelCorrectResults {
}

    .routePanelCorrectResults .routePanelResultHeader {
        background-image: url(Images/done.svg);
        /*border-top: 2px solid #58c558;*/
    }

.routePanelFailedResults {
}

    .routePanelFailedResults .routePanelResultHeader {
        background-image: url(Images/error.svg);
        /*border-top: 2px solid #ca5353;*/
    }

#routePanelSaveResultButton {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.routePanelGroupButtons {
    text-align: center;
}

#routePanelGroupNewButton {
    width: 180px;
    background-image: url(Images/addpoint.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left;
    background-position-x: 5px;
    font: normal normal 600 14px/19px Segoe UI;
    color: #FF9900;
    background-color: #DCDCDC;
    margin-right: 20px;
}

.RoutePanel_SaveButton {
    background-color: #5cb85c;
    border-color: transparent;
    color: #fff;
    margin-left: 10px;
}

.RoutePanel_SaveCancel > .dx-button-text {
    font-weight: bold;
}

#routePanelGroupListNewButton {
    width: 70%;
    height: 36px;
    /*background-image: url(Images/addpoint.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left;
    background-position-x: 100px;*/
    font: normal normal 600 14px/19px Segoe UI;
    background-color: #79B110;
    margin-bottom: 10px;
    /*margin-left: 10px;*/
}

    #routePanelGroupListNewButton > .dx-button-content{
        padding: 0 0 0 0;
    }

    #routePanelGroupAssignButton {
        width: 180px;
        font: normal normal 600 14px/19px Segoe UI;
        letter-spacing: 0px;
        color: #333333;
    }

.routePanelGroupAlert {
    color: #7f7f7f;
    font-weight: 600;
    background-image: url(Images/info.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    display: table-cell;
    padding: 4px 0 4px 45px;
    font-size: 11px;
}

    .routePanelGroupAlert b {
        color: #464545;
    }

.RouteNewGroupDefinitionTree {
    float: left;
    width: 100%;
    height: 550px;
    margin-top: 10px;
}

.RoutePanelEditGroupPopup {
    overflow: hidden;
}

.RouteNewGroupDefinitionTreeLine {
    width: 100%;
    height: 36px;
    line-height: 36px;
}

.RouteNewGroupDefinitionTreeLineLabel {
    float: left;
    width: calc(100% - 125px);
    width: -moz-calc(100% - 125px);
    width: -webkit-calc(100% - 125px);
    height: 100%;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}

.RouteNewGroupDefinitionTreeLineButton {
    float: right;
    width: 36px;
    margin: 0 5px 0 0 !important;
    border: none;
}

    .RouteNewGroupDefinitionTreeLineButton .dx-icon {
        margin-right: 0 !important;
        color: #1A8CF2;
    }

.RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-node.dx-treeview-item-with-checkbox .dx-checkbox,
.RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-toggle-item-visibility {
    margin-top: 5px;
}

.RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item {
    background-color: #f5f5f5;
}

    .RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item * {
        color: #000;
    }

.routeNewGroupSearchTitle {
    text-align: right;
    font-weight: bold;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 30%;
}

.routePanelNewGroupTextInput {
    height: 34px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    /* font-weight: 600; */
    color: #333333;
    box-sizing: border-box;
}

    .routePanelNewGroupTextInput[selected] {
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    .routePanelNewGroupTextInput[resulted] {
        border-radius: 4px 4px 0 0;
    }

#routePanelGroupNameAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    margin-top: 2px;
    display: none
}

.NewGroupTable {
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.NewGroupTableBottom {
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.RoutePanel_SaveCancel {
    margin-top: 10px;
    text-align: right;
}

.RouteGroupsListTitle {
    font: normal normal normal 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #949494;
    opacity: 1;
    height: 35px;
}

.RouteNewGroupDefinitionTree {
    float: left;
    width: 100%;
    height: 550px;
    margin-top: 10px;
}

.RouteNewGroupDefinitionTreeLine {
    width: 100%;
    height: 36px;
    line-height: 36px;
}

.RouteNewGroupDefinitionTreeLineLabel {
    float: left;
    width: calc(100% - 125px);
    width: -moz-calc(100% - 125px);
    width: -webkit-calc(100% - 125px);
    height: 100%;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}

.RouteGroupDefinitionTreeLineButton {
    float: right;
    width: 36px;
    margin: 0 5px 0 0 !important;
    border: none;
}

    .RouteGroupDefinitionTreeLineButton .dx-icon {
        margin-right: 0 !important;
        color: #1A8CF2;
    }

.RouteGroupDefinitionTree {
    /*overflow-x: scroll;
    display: inline-block;
    overflow-y:hidden;*/
}

    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-node.dx-treeview-item-with-checkbox .dx-checkbox,
    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-toggle-item-visibility {
        margin-top: 5px;
    }

    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item {
        background-color: #f5f5f5;
    }

        .RouteGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item * {
            color: #000;
        }

    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-search {
        width: 300px;
        margin-bottom: 15px;
        z-index: 2;
    }

    .RouteGroupDefinitionTree > .dx-scrollable > .dx-scrollable-wrapper > .dx-scrollable-container {
        overflow-x: auto;
        display: flex;
        flex-flow: column wrap;
    }

.FlexElement {
    display: flex;
    justify-content: space-between;
}

.routeGroupName {
    max-width: 102px;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    width: 102px;
    font-size: 12px;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
}

    .routeGroupName > div {
        max-height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: initial;
    }

        

.RouteParentRouteLineCheck {
    /*width: 80%;*/
    text-align: left;
    position: static !important;
    float: left;
    /*white-space: nowrap;*/
    /*word-break: break-all;*/
}

.RouteParentRouteLineNode {
    width: 65px;
    text-align: right;
    float: right;
    flex: none;
}

.RouteParentRouteLineCheck > .dx-checkbox-container > .dx-checkbox-text {
    word-break: break-word;
    white-space: nowrap;
}

.ChkRouteList {
    margin: 0px 0px 0px 8px;
}
/*PURE JS TREE*/
.RouteGroupsTree {
    width: 420px;
    /*overflow-x: auto;*/
    display: flex;
    flex-flow: column wrap;
}

    .RouteGroupsTree li {
        list-style-type: none;
        list-style: none;
    }

.routeGroupParent {
    display: flex;
    justify-content: space-between;
    font: normal normal normal 14px/19px Segoe UI;
    height: 54px;
    padding-right: 15px;
}

.routeGroupLeft {
    white-space: nowrap;
    position: static !important;
    font: normal normal normal 14px/19px Segoe UI;
    padding-top: 15px;
}

.routeGroupRight {
    white-space: nowrap;
    flex: none;
    width: 65px;
    text-align: right;
    float: right;
    font: normal normal normal 14px/19px Segoe UI;
    padding-top: 15px;
}

.routeGroupLeft > .dx-checkbox-container > .dx-checkbox-text {
    white-space: nowrap;
}

.routeGroupLeft > .dx-checkbox-container {
    height: auto;
    padding-left: 5px;
}

.RouteGroupsTree ul {
    padding-left: 20px;
}

.firstTier {
    padding-left: 0px !important;
}

.RouteGroupsTree ul:nth-child(0) {
    padding-left: 0px;
}

.routeGroupFirstTier {
    font: normal normal bold 14px/19px Segoe UI;
}

/*.parent_li {
    list-style-type: disclosure-closed !important;
}*/
/*.RouteGroupsTree li {
    list-style: none;
    position: relative;
    padding: 6px 0 0 20px;
}

.RouteGroupsTree ul li:before {
    background-image: url('Images/down.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 8px;
}

.RouteGroupsTree ul li:before {
    background-position: 0px -16px;
}*/
.contentOdd {
    background-color: #F5F5F5;
}

.contentEven {
    background-color: #FFFFFF;
}

.routeTable:not([filtered]) tbody tr:nth-child(4n-1) {
    background-color: #F5F5F5;
}

.routeTable{
    padding-left:20px;
    width:400px !important;
}
.routeGroupsRoot {
    line-height: 54px;
    padding-left: 10px;
}

.parent_li > .contentOdd::before {
    content: "\25BC";
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 17px;
    left: 5px;
    transform: rotate(-90deg);
}

.parent_li > .contentEven::before {
    content: "\25BC";
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 17px;
    left: 5px;
    transform: rotate(-90deg);
}

.parent_li > .contentOdd.active::before {
    transform: rotate(0deg);
}

.parent_li > .contentEven.active::before {
    transform: rotate(0deg);
}

.RouteGroupsTree li > .contentOdd {
    padding-left: 24px;
    position: relative;
}


.RouteGroupsTree li > .contentEven {
    padding-left: 24px;
    position: relative;
}


.routeGroupOther {
    padding-left: 32px;
    color: #333;
}

/*NEW DESIGN*/

.RouteGroupDefinitionEditTreeListItem {
    float: left;
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionUserListGrid {
    width: 100%;
    height: 95%;
    float: left;
}

.RouteGroupDefinitionUserListGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
}

.RouteGroupDefinitionUserListGridHeaderCount {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
    text-align: right;
}

.RouteGroupDefinitionUserListGridContainer {
    width: 100%;
    height: 95%;
    float: left;
}

.RouteGroupDefinitionUserListGridHeader {
    width: 100%;
    float: left;
    height: 5%;
}

.RouteGroupDefinitionUserListButtonContainer {
    width: 100%;
    float: right;
    height: 5%;
}

.RouteGroupDefinitionEditContainer {
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionEditGridContainer {
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionEditSourceGridContainer {
    width: 48%;
    height: 100%;
    float: left;
    margin-top: 84px;
}

.RouteGroupDefinitionEditSourceGridHeader {
    width: 100%;
    float: left;
}

.RouteGroupDefinitionEditSourceGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.RouteGroupDefinitionEditSourceGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.RouteGroupDefinitionEditSourceGrid {
    width: 100%;
    height: calc(100% - 71px);
    height: -webkit-calc(100% - 71px);
    height: -moz-calc(100% - 71px);
    float: left;
}

.RouteGroupDefinitionEditButtonContainer {
    width: 4%;
    height: 100%;
    float: left;
    padding-left: 13px;
}

.RouteGroupDefinitionEditAddButton {
    position: relative;
    top: calc(50% - 56px);
    top: -webkit-calc(50% - 56px);
    top: -moz-calc(50% - 56px);
}

.RouteGroupDefinitionEditRemoveButton {
    position: relative;
    top: calc(50% - 46px);
    top: -webkit-calc(50% - 46px);
    top: -moz-calc(50% - 46px);
}

.RouteGroupDefinitionEditTargetGridContainer {
    width: 47%;
    height: 100%;
    float: left;
    margin-left:5px;
}

.RouteGroupDefinitionEditTargetGridHeader {
    width: 100%;
    height: 40px;
    float: left;
}

.RouteGroupDefinitionEditTargetGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.RouteGroupDefinitionEditTargetGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.RouteGroupDefinitionEditTargetGridNav {
    width: 100%;
    height: 20px;
    float: left;
}

.RouteGroupDefinitionEditGroupName {
    float: left;
    width: 237px;
    height: 36px;
    margin-top: 5px;
}

.RouteGroupDefinitionEditTargetGrid {
    width: 100%;
    height: calc(100% - 71px);
    height: -webkit-calc(100% - 71px);
    height: -moz-calc(100% - 71px);
    float: left;
    margin-top: 10px;
}

.RouteGridDistanceCell {
    background-image: url(Images/range.svg);
}

.RouteGridDurationCell {
    background-image: url(Images/duration.svg);
}

#routePanelListButtons > .dx-button > .dx-button-content > .ion-upload {
    transform: scale(1.3, 1.3);
}

.RoutePanelNewGroupPopup {
    float: left;
    width: 100%;
    height: 100%;
}


    .RoutePanelNewGroupPopup .dx-treelist .dx-row > td {
        padding-top: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        padding-bottom: 15px !important;
    }

/* Route Panel Vehicle Info*/

#routePanelListSearchVehicleBox {
    width: 100%;
    height: 34px;
}

#routePanelListVehicleBar {
    width: 100%;
    display: inline-flex;
    padding-top: 10px;
    position: relative;
    z-index: 1;
    background-color: white;
}

#routePanelListVehicleContainer {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    padding: 0 0px;
    bottom: 0;
    box-sizing: border-box;
    overflow: auto;
}

    #routePanelListVehicleContainer table {
        width: 100%;
        border-spacing: 0;
        /*border-bottom: 1px solid #dcdcdc;*/
    }

        #routePanelListVehicleContainer table td {
            word-break: break-all;
        }

            #routePanelListVehicleContainer table td .routePanelListSeperator {
                left: -2px;
                height: 100%;
            }

        #routePanelListVehicleContainer table tr {
            height: 48px;
        }

            #routePanelListVehicleContainer table tr:not(.routePanelDetailRow) {
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

        #routePanelListVehicleContainer table:not([filtered]) tbody tr:nth-child(4n-1) {
            background-color: #F5F5F5;
        }

        #routePanelListVehicleContainer table tr[selected] {
            box-shadow: 0px 3px 6px #00000029;
        }

        #routePanelListVehicleContainer table tr:not([style*="display: none"])[selected] + tr {
            display: table-row;
        }

        #routePanelListVehicleContainer table tr[selected] + tr td {
            position: relative;
            height: 80px;
            border-top: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
        }

        #routePanelListVehicleContainer table td:nth-child(1) {
            width: 10%;
            text-align: left;
        }

        #routePanelListVehicleContainer table td:nth-child(2) {
            font-weight: bold;
            padding-right: 10px;
        }

        #routePanelListVehicleContainer table td:nth-child(3), #routePanelListVehicleContainer table td:nth-child(4) {
            width: 102px;
            font: normal normal normal 12px/14px Segoe UI;
        }

            #routePanelListVehicleContainer table td:nth-child(3) div:only-child, #routePanelListVehicleContainer table td:nth-child(4) div:only-child {
                position: relative;
            }



            #routePanelListVehicleContainer table td:nth-child(3) .routePanelListItemValue {
                background-image: url(Images/range.svg);
            }

            #routePanelListVehicleContainer table td:nth-child(4) .routePanelListItemValue {
                background-image: url(Images/duration.svg);
            }