/*Global Varables*/
:root {
    --kona-splitter-thickness: 10px;
    --kona-splitter-touch-thickness: 20px
}

na.clear {
    clear: both;
    display: block;
    content: "";
    width: 100%;
}

html {
    height: 100%;
}

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /*margin-top: 50px;*/
    background-color: #09518a;
    height: 100%;
}

#wrapper {
    padding-left: 40px;
    height: 100%;
}

    #wrapper.menu-level2-opened {
        padding-left: calc(40px + 120px);
    }

    #wrapper.menu-level3-opened {
        padding-left: calc(40px + 40px + 120px);
    }

#page-wrapper {
    padding: 0 0;
    height: 100%;
    background: white;
}

@media (min-width: 150px) and (max-width: 768px) {
    #page-wrapper {
        overflow: auto;
    }
}

.badge {
    background-color: #FF1E1E;
}


.cgbootstrap-nav {
    background-color: #1c467d;
    border: none;
}

    .cgbootstrap-nav .navbar-brand {
        color: #fff;
    }

    /*Common Item*/
    .cgbootstrap-nav .navbar-nav > li a,
    .masthead a {
        color: #fff;
        padding-left: 5px;
        padding-right: 5px;
        outline: none;
    }

        /*Common Item - Hover/Focus*/
        .cgbootstrap-nav .navbar-nav > li a:hover,
        .cgbootstrap-nav .navbar-nav > li a:focus {
            color: black; /*hover-focus color*/
            background: white; /*hover-focus backgound color*/
        }

    /*Common Item - Active*/
    .cgbootstrap-nav .navbar-nav > .active > a
    /*.cgbootstrap-nav .navbar-nav > .active > a:hover*/ {
        color: #fff;
        background-color: #408cc6;
        /*border-right-width: 5px;*/
        border-right-width: 0;
        border-right-style: solid;
        /*border-right-color: #60aaed;*/
        padding-right: 10px;
    }

        /*Common Item - Active - Hover/Focus*/
        .cgbootstrap-nav .navbar-nav > .active > a:hover,
        .cgbootstrap-nav .navbar-nav > .active > a:focus {
            color: black; /*hover-focus color*/
            background: white; /*hover-focus backgound color*/
        }

    /*Common Item - Svg*/
    .cgbootstrap-nav .navbar-nav > li a > .svg {
        background: white;
    }

    /*Common Item - Svg - Hover/Focus*/
    .cgbootstrap-nav .navbar-nav > li a:hover > .svg,
    .cgbootstrap-nav .navbar-nav > li a:focus > .svg {
        background: black; /*hover-focus color*/
    }

    /*Level 2 Item - Active*/
    .cgbootstrap-nav .navbar-nav.level2 > .active > a {
        background: #295f89;
    }

    /*Level 2 Item - Active - Hover/Focus*/
    .cgbootstrap-nav .navbar-nav > .active > a:hover,
    .cgbootstrap-nav .navbar-nav > .active > a:focus {
        color: black; /*hover-focus color*/
        background: white; /*hover-focus backgound color*/
    }

    /*.cgbootstrap-nav .nav .open > a,
.cgbootstrap-nav .nav .open > a:hover,
.cgbootstrap-nav .nav .open > a:focus {
    background-color: #18437c;
    color: #fff;
}*/

    .cgbootstrap-nav .navbar-toggle {
        border-color: #b84d45;
    }

        .cgbootstrap-nav .navbar-toggle:hover {
            background-color: #b84d45;
            border-color: #b84d45;
        }

    .cgbootstrap-nav .navbar-collapse {
        border: none;
    }

    .cgbootstrap-nav .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    .cgbootstrap-nav .nav .caret {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }

    .cgbootstrap-nav .nav .open > a, .nav .open > a:hover .caret,
    .cgbootstrap-nav .nav .open > a:focus .caret,
    .cgbootstrap-nav .nav .active .caret,
    .cgbootstrap-nav .nav a:hover .caret,
    .cgbootstrap-nav .nav a:focus .caret {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }

    .cgbootstrap-nav .dropdown-menu > li > a:hover,
    .cgbootstrap-nav .dropdown-menu > li > a:focus,
    .cgbootstrap-nav .dropdown-menu > .active > a,
    .cgbootstrap-nav .dropdown-menu > .active > a:hover,
    .cgbootstrap-nav .dropdown-menu > .active > a:focus {
        background-color: #3a7ccb;
    }

.fixed-height .dropdown-menu {
    max-height: 250px;
    overflow: auto;
}

/* Side Nav */

.side-nav {
    margin-left: -20px;
    width: 40px;
    position: fixed;
    height: 100%;
    border-radius: 0;
    border: none;
    background-color: #60aaed;
    overflow-y: auto;
}

    .side-nav.level2 {
        background-color: #408cc6;
    }


    /* Bootstrap Default Overrides - Customized Dropdowns for the Side Nav */

    .side-nav > li.dropdown > ul.dropdown-menu {
        position: relative;
        min-width: 225px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;
    }

        .side-nav > li.dropdown > ul.dropdown-menu > li > a {
            color: #fff;
            padding: 15px 15px 15px 25px;
        }

            .side-nav > li.dropdown > ul.dropdown-menu > li > a:hover,
            .side-nav > li.dropdown > ul.dropdown-menu > li > a.active,
            .side-nav > li.dropdown > ul.dropdown-menu > li > a:focus {
                color: #fff;
                background-color: #236ec5;
            }

    .side-nav > li a,
    .side-nav > li div {
        color: #fff;
        text-decoration: none;
        font-size: 9px;
        height: 40px;
        width: 40px;
    }

        .side-nav > li a > *,
        .side-nav > li div > * {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }

        .side-nav > li a > i.rotate-90 {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .side-nav > li a > i.rotate-180 {
            transform: translate(-50%, -50%) rotate(180deg);
        }

        .side-nav > li a > i.rotate-270 {
            transform: translate(-50%, -50%) rotate(270deg);
        }

        .side-nav > li a > i.flip-horizontal {
            transform: translate(-50%, -50%) scale(-1, 1);
        }

        .side-nav > li a > i.flip-vertical {
            transform: translate(-50%, -50%) scale(1, -1);
        }

.navbar-inverse .navbar-nav > li a:hover,
.navbar-inverse .navbar-nav > li a:focus {
    background-color: #60aaed;
}

/*Kona Splitters - Begin*/

.ui-resizable-disabled .kona-splitter {
    display: flex; /*Kona splitter is visible even if disabled*/
}

.kona-splitter {
    background: gray;
    position: relative;
    display: flex;
    align-items: center;
}

    .kona-splitter.hidden {
        display: none;
    }

    /*Vertical*/
    .kona-splitter.vertical {
        cursor: e-resize;
        width: var(--kona-splitter-thickness);
        right: 0;
        top: 0;
        flex-direction: column;
    }

        .kona-splitter.vertical.disabled {
            cursor: default;
        }

    .kona-splitter.horizontal {
        cursor: s-resize;
        height: var(--kona-splitter-thickness);
        left: 0;
        bottom: 0;
        flex-direction: row;
    }

        .kona-splitter.horizontal.disabled {
            cursor: default;
        }

.touch-screen .kona-splitter.vertical {
    width: var(--kona-splitter-touch-thickness) !important;
}

.touch-screen .kona-splitter.horizontal {
    height: var(--kona-splitter-touch-thickness) !important;
}

@media (min-width:150px) and (max-width:768px) {
    .kona-splitter {
        display: none !important;
    }
}
/*Horizontal*/

/*Kona Splitters - End*/

.history-line {
    vertical-align: top;
    height: 35px;
}

.rightMainMenu img {
    cursor: pointer;
    /*padding: 0 0 0 4px;*/
}


.angular-leaflet-map {
    min-height: 350px;
}

.FilterBlock {
    padding: 6px 0;
}

    .FilterBlock div, .FilterBlock select {
        width: 100%;
    }


@media (min-width:150px) and (max-width:768px) {
    .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        padding: 0;
    }

    .menu-item {
        display: none;
    }

    .nav > li {
        display: inline-block !important;
        vertical-align: top;
    }

    .side-nav {
        width: 100%;
        height: 40px;
    }

    #wrapper {
        padding-left: 0;
        padding-top: 40px;
    }

        #wrapper.menu-level2-opened {
            padding-left: 0;
            padding-top: 90px;
        }

        #wrapper.menu-level3-opened {
            padding-left: 0;
            padding-top: 130px;
        }

    .li-bottom {
        right: var(--offset);
        bottom: 0 !important;
    }
}


/* Nav Messages */

.messages-dropdown .dropdown-menu {
    min-width: 300px;
}

    .messages-dropdown .dropdown-menu li a {
        white-space: normal;
    }



/* Common buttons*/
.button-with-icon-default {
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    outline: none;
}

.trash-button-png {
    border: none;
    padding: 0;
    background: url('../images/trash.png') no-repeat 0 0;
    background-size: 30px;
    /*padding-top: 14px;*/
}

.arrow-down {
    border: none;
    padding: 0;
    background: url('../images/arrow-down.png') no-repeat 0 0;
    width: 30px;
    height: 30px;
    /*padding-top: 14px;*/
}

.arrow-up {
    border: none;
    padding: 0;
    background: url('../images/arrow-up.png') no-repeat 0 0;
    width: 30px;
    height: 30px;
    /*padding-top: 14px;*/
}

.select-all-button-png {
    background: url('../images/checkbox_selectAll_512.png') no-repeat 0 0;
}

.select-none-button-png {
    background: url('../images/checkbox_selectNone_512.png') no-repeat 0 0;
}

.delete-btn {
    color: red;
}
/* end Common buttons*/

/* leaflet overrides - these images aren't being picked up by grunt. */
.leaflet-control-layers-toggle {
    background-image: url('../images/layers.png');
}

.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url('../images/layers-2x.png');
}

.leaflet-container {
    cursor: default;
    cursor: -moz-grab;
}

.leaflet-control.disabled {
    opacity: .5;
    pointer-events: none;
}

#MainViewHolder {
    padding: 10px;
}

#ListHolder {
    padding: 0 10px 10px 10px;
}


#MainMenu > table {
    width: 100%;
}

#MainMenu div {
    display: inline-block;
    /*border: solid 1px #000;*/
    padding-bottom: 10px;
    padding-right: 4px;
}

#MainMenu {
    margin: 0px auto;
    /*color: white;*/
    padding-bottom: 4px;
}

.work-item-filter-info {
    color: white;
}

#CommonMenuButtonsHolder div > img, #DispatchMainMenu div > img, #MainMenu div > img {
    cursor: pointer;
}

#CommonMenuButtonsHolder div > img, #DispatchMainMenu div > img {
    width: 36px;
    height: 36px;
}


#MainMenu div {
    width: 32px;
    height: 32px;
}


#DispatchMainMenu {
    padding: 10px;
    color: white;
}

/*#DispatchMainMenu > table {
    width: 100%;
    color: white;
}*/


#AddressSearchBlock {
    text-align: right;
    width: 300px;
}


#DispatchMainMenu div, #CommonMenuButtonsHolder div {
    display: inline-block;
    text-align: right;
    padding-left: 4px;
}


.current-menu-state {
    font-size: 26px;
    color: white;
    /*width: 150px;*/
    /*padding-left: 10px;*/
}

#CommonMenuButtonsHolder {
    text-align: right;
    vertical-align: bottom;
}


/*#MapCurrentLocationInfo {
    color: white;
}*/


/*select {
    height: 28px;
}*/




/* override bootstrap.css */
.side-nav {
    margin: 0;
}



.hideMap {
    margin-left: -10000px;
}

.history-search table {
    width: 100%;
}

/* Tnd work item */

/*.tndButtons {
    width: 200px;
    text-align: right;
}*/

.tndRightTopColumn {
    padding-left: 16px;
    width: 200px;
    vertical-align: top;
}

.tndButtons {
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
}


    .tndButtons div {
        display: inline-block;
    }

        .tndButtons div > img {
            width: 50px;
            height: 50px;
            cursor: pointer;
        }


/* work log */

.workLog {
    overflow: auto;
    height: 250px;
    border: #18437C solid 1px;
    margin-top: 10px;
}

    .workLog > div {
        padding: 4px;
    }

    .workLog .createdDate {
        font-style: italic;
        white-space: nowrap;
        padding-right: 6px;
    }

    .workLog .type {
        font-weight: bold;
        white-space: nowrap;
        padding-right: 6px;
    }

    .workLog .description {
        width: 100%;
    }

.selectableTable tr:hover {
    background: #CDDEF3;
}

.selectableTable .selected td {
    background-color: #3A7CCB;
}

.selectableTable td {
    cursor: pointer;
}

/* end work log */

/* Do Not Show Number Input Arrows - Start */
.disable-number-input-arrows::-webkit-inner-spin-button,
.disable-number-input-arrows::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}
/* Do Not Show Number Input Arrows - End */

/* Contacts */

.contactLink {
    cursor: pointer;
    color: #3A7CCB;
}

    .contactLink:hover {
        color: #d9534f;
    }



/* end Contacts */


/* end TND work item */


/* CSF work item */

.csfButtons {
    width: 200px;
    text-align: right;
}

    .csfButtons div {
        display: inline-block;
    }

        .csfButtons div > img {
            width: 54px;
            height: 54px;
            cursor: pointer;
        }

/* end CSF work item */




/* Modal Dialog */

.modal-dialog {
    margin-top: 60px;
}

.dialog-with-label .label, .checkbox-tree-level .label {
    font-weight: bold;
    color: black;
    font-size: 14px;
    padding-left: 0px;
}

.modal-body textarea, .modal-body table, .modal-body select {
    width: 100%;
}

.modal-body h2 {
    margin-top: 0;
}

.modal-body .table > thead > tr > th,
.modal-body .table > tbody > tr > th,
.modal-body .table > tfoot > tr > th,
.modal-body .table > thead > tr > td,
.modal-body .table > tbody > tr > td,
.modal-body .table > tfoot > tr > td {
    padding: 4px;
}

/* end Modal Dialog */



/* Work Item Filter Dialog */

.filter-criteria-selection-modal .modal-dialog,
.filter-criteria-editor-modal .modal-dialog {
    width: 1000px;
}

.filter-details {
    overflow: auto;
    height: 400px;
    border: #C0C0C0 1px solid;
}


    .filter-details > div {
        padding: 4px;
    }

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

    .btn-bold.btn-default {
        font-weight: normal;
        color: #94a4a9;
    }


.creteria-table td {
    padding: 1px 4px;
}


.filter-details-list-criteria {
    overflow: auto;
    height: 150px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: left;
}

.filter-details-list-widths {
    width: 50%;
}

.filter-details-list-block-label {
    display: block;
}


.filter-details-date-criteria, .filter-details-string-criteria, .filter-details-numeric-criteria, .filter-details-tree-list-criteria {
    padding: 10px 0;
    text-align: left;
}


    .filter-details-tree-list-criteria div.label {
        padding-left: 4px;
    }


    .filter-details-tree-list-criteria .tree-level {
        padding-left: 20px;
    }


    .filter-details-date-criteria > input {
        width: 170px;
    }


    .filter-details-string-criteria > input {
        width: 100%;
    }

/* end Work Item Filter Dialog */

/* start Add Asset From List Modal */

.toggleSelectedCell {
    text-align: center;
}

.asset-from-list-bold-label {
    font-weight: bold;
}

.asset-from-list-italic-label {
    font-style: italic;
}

.asset-from-list-select-input {
    padding: 10px 10px 10px 0;
}

.asset-from-list-top-align-cell {
    vertical-align: top;
}

.asset-from-list-top-bottom-margin {
    margin: 10px 0;
}

.asset-from-list-result-label {
    height: 2.5em;
}

.asset-from-list-change-mode {
    width: 90px;
    text-align: right;
}

.asset-from-list-filtered-grid {
    margin: 20px 0;
}

.assets-from-list-selected {
    overflow-y: scroll;
    max-height: 100px;
    width: 100%;
}

.assets-from-list-selected-row {
    padding: 5px 0;
}

.assets-from-list-selected-toggle {
    width: 75px;
    text-align: center;
}

/* end Add Asset From List Modal */

/* About Dialog */

.about-dialog .modal-dialog {
    height: 200px;
    width: 650px;
}

/* Log Messages Dialog */

.log-messages-dialog .modal-dialog {
    height: 600px;
    width: 800px;
}

.checkbox-tree-level {
    padding-left: 25px;
}


/* User Details Dialog */

.user-info-dialog .modal-dialog {
    width: 600px;
}

/* Asset informtaion dialog */

.asset-information-dialog .asset-name, .asset-information-dialog .asset-type {
    text-align: right;
}

    .asset-information-dialog .asset-name div, .asset-information-dialog .asset-type div {
        display: inline;
        padding-right: 6px;
        font-size: 17px;
    }

    .asset-information-dialog .asset-name .value, .asset-information-dialog .asset-type .value {
        font-weight: bold;
    }

.asset-information-dialog .type-label {
    font-size: 17px;
    font-weight: bold;
}






/* Status history dialog */

.status-history-table, .status-history-table th {
    border: 1px solid lightgray;
}

.status-history-table td {
    border-left: 1px solid lightgray;
}

.status-history-table td, .status-history-table th {
    padding: 7px;
}

.status-history-table thead {
    background-color: #ededed
}

.status-history-table tr:nth-child(even) {
    background-color: #f1f1f1
    }

.status-history-dialog .created-date,
.status-history-dialog .user {
    white-space: nowrap;
    vertical-align: top;
}

.status-history-dialog .status {
    font-weight: bold;
}

.status-history-dialog .comment {
    font-style: italic;
    display: block;
}

.status-history-dialog .modal-section-header {
    font-weight: bold;
    margin-top: 0px;
    font-size: 16px;
}

.status-history-container {
    overflow: auto;
    height: 250px;
    margin-bottom: 20px;
}

.single-line-comment-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .single-line-comment-input label {
        margin: 0 15px 0 0
    }

.selectable-work-list-item-grid {
    height: 300px;
    margin-bottom: 20px;
}

/* Work Item list context menu */

#configListContextMenu, #mapMarkerContextMenu {
    background: #37a092;
    /*border: 1px solid gray;*/
    padding: 2px;
    display: inline-block;
    min-width: 100px;
    /*-moz-box-shadow: 2px 2px 2px silver;
    -webkit-box-shadow: 2px 2px 2px silver;*/
    z-index: 99999;
    color: white;
}

    #configListContextMenu, #mapMarkerContextMenu li {
        padding: 4px 10px 4px 10px;
        list-style: none;
        cursor: pointer;
        /*background: url("../images/arrow_right_peppermint.png") no-repeat center left;*/
    }

        #configListContextMenu, #mapMarkerContextMenu li:hover {
            background-color: #5dbfb2;
        }

/*

/*dispatch label*/
.d-label {
    font-weight: bold;
    padding: 4px 0;
}

.progress {
    margin-bottom: 0px;
}

.progress-bar .progress-bar-success {
    line-height: 20px;
    vertical-align: top;
}


.status-link {
    cursor: pointer;
    color: #60aaed;
    display: inline;
}

    .status-link:hover {
        text-decoration: underline;
    }



.percent-complete-bar {
    /*display: inline-block;
  height: 6px;*/
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}





.common-form textarea, .common-form input {
    width: 100%;
}

.common-form td {
    padding: 2px;
}


input.form-control.ng-invalid {
    border: 1px solid #D9534F;
}

/* autocomplete control */
.angucomplete-dropdown {
    width: auto;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0;
}


.angucomplete-selected-row, .angucomplete-row:hover {
    background-color: #3171ab;
    color: #ffffff;
}

.create-work-order-dialog .angucomplete-dropdown {
    width: 350px;
}



/* fixes for datepicker */

.dropdown-menu {
    z-index: 1001;
}






.leaflet-contextmenu {
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

    .leaflet-contextmenu a.leaflet-contextmenu-item {
        display: block;
        color: #333;
        font-size: 14px;
        line-height: 20px;
        text-decoration: none;
        padding: 5px;
        cursor: pointer;
    }

    .leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
        opacity: 0.5;
    }

    .leaflet-contextmenu a.leaflet-contextmenu-item:hover {
        background: #BFD4F0;
    }

    .leaflet-contextmenu .leaflet-menu-item-elements {
        display: flex;
        align-items: center;
    }

    .leaflet-contextmenu .leaflet-menu-item-icon {
        width: 14px;
        height: 14px;
        position: relative;
        margin: 0 5px;
    }

        .leaflet-contextmenu .leaflet-menu-item-icon i {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }

        .leaflet-contextmenu .leaflet-menu-item-icon .fa {
            font-size: 14px;
        }

    .leaflet-contextmenu .leaflet-menu-item-label {
        margin: 0 5px;
    }

    .leaflet-contextmenu a.leaflet-contextmenu-item-disabled:hover {
        background-color: inherit;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

.leaflet-contextmenu-icon {
    margin: 2px 8px 0 0;
    width: auto;
    height: auto;
    float: left;
    border: 0;
}

.leaflet-contextmenu-separator {
    border-bottom: 1px solid white;
    margin: 5px 0;
}

.awesome-marker-icon-center {
    position: absolute;
    margin-top: 4px;
    margin-left: 3px;
    font-size: 14px;
    width: 100%;
    color: white;
}

.awesome-marker-icon-top {
    position: absolute;
    width: 100%;
    font-size: 0;
    margin-top: -10px;
}

/* Tap Meter Lookup */

.TapMeterLookup {
    padding-top: 30px;
}

    .TapMeterLookup .search {
        font-weight: bold;
        display: inline-block;
    }

        .TapMeterLookup .search > div, .TapMeterLookup .search > div > div, .TapMeterLookup .search > div > button {
            display: inline-block;
        }

        .TapMeterLookup .search .buttons img {
            cursor: pointer;
        }

    .TapMeterLookup .nowrap td {
        white-space: nowrap;
    }

    .TapMeterLookup .table {
        margin-bottom: 0;
    }

        .TapMeterLookup .table .odd {
            background: #fff;
        }

        .TapMeterLookup .table .selected {
            background: #BFD4F0;
        }

        .TapMeterLookup .table tfoot {
            display: none;
        }

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







.marker-cluster-selected {
    background-color: rgba(181, 226, 140, 0.6);
}

    .marker-cluster-selected div {
        background-color: rgba(110, 204, 57, 0.6);
    }


.marker-cluster-common {
    background-color: #bfd4f0
}

    .marker-cluster-common div {
        background-color: skyblue
    }


.vector-button button {
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    background: #019FD9;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border: 0;
}

    .vector-button button:hover {
        background: #0479a3;
    }

    .vector-button button:disabled {
        background: #94a4a9;
    }

.trash-button {
    -webkit-mask-image: url("../images/work-items/trash.svg");
}

.save-button {
    -webkit-mask-image: url("../images/work-items/save.svg");
}

.options-button {
    -webkit-mask-image: url("../images/work-items/options.svg");
}

.search-button {
    -webkit-mask-image: url("../images/work-items/search.svg");
}


.dw-truck-online {
    background: url('../images/user-states/truck-online.svg') no-repeat 0 0;
}

.dw-truck-offline {
    background: url('../images/user-states/truck-offline.svg') no-repeat 0 0;
}
/*.leaflet-popup-tip-container {
    display: none;
}*/

.leaflet-popup-content {
    margin: 0;
}

.leaflet-rrose-content-wrapper {
    padding: 0;
}

.leaflet-rrose-content {
    margin: 0;
}

.leaflet-rrose-tip-container {
    display: none;
}

/* Log Messages Dialog */

.user-group-dialog .modal-dialog {
    height: 600px;
    width: 1000px;
}





/* Work Type Definitions */

.work-type-definition-view {
    height: 100%;
    width: 60%;
    background: white;
    padding: 10px;
}

/*ng Grid*/
.ng-grid-cell-green {
    color: #009700
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/*tabs - vertical*/


/*Vertical - Common Item*/
#main-menu > .vertical .nav > li > a {
    color: white;
    outline: none;
}

    /*Vertical - Common Item - Hover/Focus*/
    #main-menu > .vertical .nav > li > a:hover,
    #main-menu > .vertical .nav > li > a:focus {
        color: black; /*hover-focus color*/
        background: white; /*hover-focus backgound color*/
    }

/*Vertical - Common Item - Active*/
#main-menu > .vertical .nav > li.active > a {
    color: black;
    background: white;
}

    /*Vertical - Common Item - Active - Hover/Focus*/
    .vertical .nav > li.active > a:hover,
    .vertical .nav > li.active > a:focus {
        color: black; /*hover-focus color*/
        background: white; /*hover-focus backgound color*/
    }

/*Vertical - Common Item - Svg*/
.vertical .nav > li > a > .svg {
    background: white;
}

/*Vertical - Common Item - Svg - Hover/Focus*/
.vertical .nav > li > a:hover > .svg,
.vertical .nav > li > a:focus > .svg {
    background: black; /*hover-focus color*/
}

/*Vertical - Common Item - Svg - Active*/
.vertical .nav > li.active > a > .svg {
    background: black;
}

/*Vertical - Common Item - Svg - Active - Hover/Focus*/
.vertical .nav > li.active > a:hover > .svg,
.vertical .nav > li.active > a:focus > .svg {
    background: black; /*hover-focus color*/
}

.li-bottom {
    bottom: var(--offset);
}


/*Begin - - - - - - - - - - - - - - - - - - - 769px < Width - - - - - - - - - - - - - - - - - - - Begin*/
@media (min-width:769px) {
    .navbar-fixed-top.level2 {
        left: 40px;
    }

    .navbar-fixed-top .side-nav > li > .menu-icon-compact {
        height: 100px;
    }

        .navbar-fixed-top .side-nav > li > .menu-icon-compact > .svg {
            width: 30px;
            height: 30px;
            background: #fff;
        }

    .tabbable.vertical {
        /*height: 100%;*/
        position: relative;
    }

    .tabbable.last {
        position: absolute;
        bottom: 0;
    }

    .tabbable.vertical.nav-stacked {
        position: fixed;
        top: 0;
        bottom: 0;
        border: 0;
        margin: 0;
        width: 120px;
    }

        .tabbable.vertical.nav-stacked.level2 {
            left: 40px;
        }

        .tabbable.vertical.nav-stacked.level3 {
            background: #295f89;
            left: 80px;
        }

            .tabbable.vertical.nav-stacked.level3 .nav {
                height: auto;
            }

        .tabbable.vertical.nav-stacked .navbar-header-icon {
            z-index: 2001;
            position: absolute;
            color: #fff;
            top: 27px;
            left: 15px;
        }

            .tabbable.vertical.nav-stacked .navbar-header-icon.svg {
                width: 70px;
                height: 70px;
                -webkit-mask-size: 70px;
                background: #fff;
            }

        .tabbable.vertical.nav-stacked .nav {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            padding-top: 120px;
        }

    .vertical.nav-stacked.level2 .nav {
        background: #408cc6;
    }

    /*Vertical - Common Item*/
    #main-menu > .vertical .nav > li > a {
        width: 120px;
        font-size: 14px;
        text-align: left;
    }

    /*Label for Cell Phone navigation tab*/
    .vertical.navbar-fixed-top .navbar-brand,
    .vertical.navbar-static-top .navbar-brand,
    .vertical.navbar-fixed-bottom .navbar-brand {
        display: none;
    }
}
/*End - - - - - - - - - - - - - - - - - - - 769px < Width - - - - - - - - - - - - - - - - - - - End*/

/*Begin - - - - - - - - - - - - - - - - - - - 150px < Width < 768px - - - - - - - - - - - - - - - - - - - Begin*/
@media (min-width:150px) and (max-width:768px) {

    .navbar-fixed-top.level2 {
        top: 40px;
    }

    .navbar-fixed-top .side-nav > li > .menu-icon-compact {
        width: 100px;
    }

        .navbar-fixed-top .side-nav > li > .menu-icon-compact > .svg {
            width: 30px;
            height: 30px;
            background: #fff;
        }

    .vertical.navbar-fixed-top,
    .vertical.navbar-static-top,
    .vertical.navbar-fixed-bottom {
        margin-bottom: 0;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 2000;
    }

        .vertical.navbar-fixed-top.level2,
        .vertical.navbar-static-top.level2,
        .vertical.navbar-fixed-bottom.level2 {
            top: 40px;
            background: #408cc6;
        }

        .vertical.navbar-fixed-top.level3,
        .vertical.navbar-static-top.level3,
        .vertical.navbar-fixed-bottom.level3 {
            top: 80px;
            background: #295f89;
        }

        .vertical.navbar-fixed-top .navbar-brand,
        .vertical.navbar-static-top .navbar-brand,
        .vertical.navbar-fixed-bottom .navbar-brand {
            color: #fefefe;
        }

    .vertical .navbar-toggle {
        border-color: white;
    }

    .vertcal.level2 .navbar-toggle {
        background: #408cc6;
    }

    .vertcal.level3 .navbar-toggle {
        background: #84b8ca;
    }

    .vertical .navbar-toggle .icon-bar {
        background-color: white;
    }

    .vertical.level2 .navbar-toggle:hover,
    .vertical.level2 .navbar-toggle:active,
    .vertical.level2 .navbar-toggle:focus {
        background: #4e7fb1 !important;
    }

    .vertical.level3 .navbar-toggle:hover,
    .vertical.level3 .navbar-toggle:active,
    .vertical.level3 .navbar-toggle:focus {
        background: #408cc6 !important;
    }

    .vertical.navbar-fixed-top .navbar-collapse,
    .vertical.navbar-static-top .navbar-collapse,
    .vertical.navbar-fixed-bottom .navbar-collapse {
        padding-left: 15px;
        padding-right: 15px;
    }

    .vertical .nav > li {
        display: block !important;
        /*vertical-align: top;*/
    }

        /*Vertical - Common Item*/
        .vertical .nav > li > a {
            font-size: 14px;
            text-align: left;
        }

    .vertical .nav.level2 > li.active > a {
        color: #39444c !important;
    }

    .vertical.nav-stacked .navbar-header-icon {
        float: left;
        font-size: 2em;
        margin-top: 10px;
        margin-left: 10px;
        color: #fff;
    }

        .vertical.nav-stacked .navbar-header-icon.svg {
            background: #fff;
            width: 30px;
            height: 30px;
            -webkit-mask-size: 30px;
        }

    .vertical.tab-content .tab-view .tab-view-header {
        display: none !important;
    }

        .vertical.tab-content .tab-view .tab-view-header + .tab-view-body {
            padding-top: 0 !important;
        }
}
/*End - - - - - - - - - - - - - - - - - - - 150px < Width < 768px - - - - - - - - - - - - - - - - - - - End*/

.level3.navbar-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
}


/*Tabs - content*/
.vertical.tab-content {
    height: 100%;
    /*padding-left: 120px;*/
}

    /*.tab-content .tab-pane {*/
    .vertical.tab-content > div {
        height: 100%;
    }

    .vertical.tab-content .tab-view {
        height: 100%;
        position: relative;
        padding: 20px;
    }

        .vertical.tab-content .tab-view .tab-view-header {
            min-height: 16.428571429px;
            padding: 0px 10px 10px 10px;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 15px;
            position: absolute;
            left: 20px;
            right: 20px;
        }

            .vertical.tab-content .tab-view .tab-view-header .tab-view-title {
                margin: 0;
                line-height: 1.428571429;
            }

        .vertical.tab-content .tab-view .tab-view-body {
            height: 100%;
        }

        .vertical.tab-content .tab-view .tab-view-header + .tab-view-body {
            12 padding-top: 51px;
        }

        .vertical.tab-content .tab-view .tab-view-navigation {
            /*position: absolute;*/
            height: 50px;
        }

        .vertical.tab-content .tab-view .tab-view-body .tab-view-navigation + div {
            height: -moz-calc(100% - 50px);
            height: -webkit-calc(100% - 50px);
            height: -o-calc(100% - 50px);
            height: calc(100% - 50px);
        }


/*ng-grid styles*/

.ng-grid-view {
    margin-top: 15px;
    border: 1px solid #a9a9a9;
}

    .ng-grid-view.no-scrolling .ngViewport {
        overflow: hidden;
    }

/*slick grid*/
.error-row.error-row-code > .slick-cell.l0.r0 {
    background: #f60c0c !important;
}

.error-row.error-row-sql > .slick-cell.l1.r1 {
    background: #f60c0c !important;
}


/* configuration */

/* Apply a slow transition from light to dark to see image on different background */
.bg-colorsafe {
    background-image: linear-gradient(45deg,#fff 25%,#ccc 25%,#ccc 50%, #fff 50%, #fff 75%,#ccc 75%,#ccc 100%);
    background-image: -moz-linear-gradient(45deg,#fff 25%,#ccc 25%,#ccc 50%, #fff 50%, #fff 75%,#ccc 75%,#ccc 100%);
    background-image: -ms-linear-gradient(45deg,#fff 25%,#cccccc 25%,#ccc 50%, #fff 50%, #fff 75%,#ccc 75%,#ccc 100%);
    background-image: -o-linear-gradient(45deg,#fff 25%,#ccc 25%,#ccc 50%, #fff 50%, #fff 75%,#ccc 75%,#ccc 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #ccc), color-stop(.25, #fff),color-stop(.5, #fff),color-stop(.5, #ccc),color-stop(.75, #ccc),color-stop(.75, #fff),color-stop(1, #fff));
    background-image: -webkit-linear-gradient(45deg,#fff 25%,#ccc 25%,#ccc 50%, #fff 50%, #fff 75%,#ccc 75%,#ccc 100%);
    -webkit-animation: lightToDark linear 2s infinite;
    -moz-animation: lightToDark linear 2s infinite;
    -ms-animation: lightToDark linear 2s infinite;
    -o-animation: lightToDark linear 2s infinite;
    animation: lightToDark linear 2s infinite;
}

/* transition from light to dark */
@-moz-keyframes lightToDark {
    from {
        background-position: 31px;
    }

    to {
        background-position: 0;
    }
}

@-webkit-keyframes lightToDark {
    from {
        background-position: 31px;
    }

    to {
        background-position: 0;
    }
}

@keyframes lightToDark {
    from {
        background-position: 31px;
    }

    to {
        background-position: 0;
    }
}

/*login page*/

.form-signin {
    /*max-width: 280px;*/
    padding: 15px;
    margin: 0 auto;
    margin-top: -10px;
}

    .form-signin .form-signin-heading,
    .form-signin {
        margin-bottom: 10px;
        color: #fff;
    }

        .form-signin .form-control {
            position: relative;
            font-size: 16px;
            height: auto;
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

            .form-signin .form-control:focus {
                z-index: 2;
            }

        .form-signin input[type="text"] {
            margin-bottom: -1px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: none;
            border-left-style: solid;
            border: 1px solid #ccc;
        }

        .form-signin input[type="password"] {
            margin-bottom: -1px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top-style: none;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border: 1px solid #ccc;
        }

        .form-signin button {
            margin-top: 10px;
        }

        .form-signin .logo-icon {
            background: white;
            padding: 15px 45px;
            border-radius: 6px;
        }

@media (min-width: 150px) and (max-width: 768px) {
    .form-signin .logo-icon {
        padding: 10px;
        width: 100%;
    }
}

.main-alert {
    position: absolute;
    top: 70px;
    left: 5px;
    right: 5px;
    max-width: 400px;
    margin: 0 auto;
}

.alert-hidden {
    visibility: hidden;
}

.ui-view-container {
    position: relative;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
}

.main-view-full-size {
    width: 100%;
    height: 100%;
    background: white;
}

.outgoing-process-actions {
    position: absolute;
    color: #18437c;
    font-size: 16px;
    padding-left: 16px;
    margin-top: 11px;
    font-weight: bold;
}

.inbound-process-actions {
    position: absolute;
    color: #18437c;
    font-size: 16px;
    padding-left: 16px;
    margin-top: -10px;
    font-weight: bold;
}

    .inbound-process-actions .badge {
        background-color: #198a03;
        font-size: 10px;
    }

.outgoing-process-actions .badge {
    background-color: #ff1e1e;
    font-size: 10px;
}


.custom-tab-content {
    padding: 15px;
    border: 1px solid #ccc;
    border-top-width: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 16px;
}




















/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
    position: relative;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

    /**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
    .simpleDemo ul[dnd-list] .dndDraggingSource {
        display: none;
    }

    /**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
    .simpleDemo ul[dnd-list] .dndPlaceholder {
        display: block;
        background-color: #ddd;
        min-height: 42px;
    }

    /**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
    .simpleDemo ul[dnd-list] li {
        background-color: #fff;
        border: 1px solid #ddd;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        display: block;
        padding: 10px 15px;
        margin-bottom: -1px;
    }

        /**
 * Show selected elements in green
 */
        .simpleDemo ul[dnd-list] li.selected {
            background-color: #dff0d8;
            color: #3c763d;
        }




/* ng-sortable css file */
.as-sortable-item, .as-sortable-placeholder {
    display: block
}

.as-sortable-item {
    -ms-touch-action: none;
    touch-action: none
}

.as-sortable-item-handle {
    cursor: move
}

.as-sortable-drag {
    position: absolute;
    pointer-events: none;
    z-index: 9999
}

.as-sortable-hidden {
    display: none !important
}

.as-sortable-un-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.as-sortable-item-handle {
    cursor: pointer;
}

/* Form Group - checkbox list */
.form-group .form-checkbox-list {
    border: solid 1px #ccc;
    border-radius: 4px;
    padding: 10px 20px 10px 20px;
    margin-bottom: 30px;
}

.ladda-button .ladda-spinner {
    width: auto;
}

/*
Styles for MapSearchService.js (search input and two buttons on the map)
*/

.ui-search-control-container > input {
    height: 26px;
    width: 240px;
    padding: 0;
    border: 0;
    display: inline-block;
    text-indent: 5px;
}

.ui-search-control-container > input,
.ui-search-control-container > a {
    display: inline-block;
    border-left: 1px solid #ccc;
    vertical-align: top;
    border-bottom: none;
}

.ui-search-control-container > a {
    font-size: 16px;
}

    .ui-search-control-container > a:hover {
        display: inline-block;
    }

    .ui-search-control-container > a:last-child {
        border-radius: 0;
    }

.ui-search-control-container {
    border-radius: 4px;
    overflow: hidden;
    height: 26px;
}



.work-task-header {
    padding-bottom: 40px;
    border-bottom: 1px gray solid;
}

.network-status {
    z-index: -1;
}

    .network-status.online {
        color: lawngreen
    }

    .network-status.offline {
        color: lightsalmon
    }

    .network-status.pending {
        color: gold
    }

.rightMainMenu {
    font-size: 40px;
}

    .rightMainMenu i {
        cursor: pointer;
    }

    .rightMainMenu > div {
        display: inline-block;
    }

        .rightMainMenu > div > div, .rightMainMenu > div > i {
            padding: 0 5px;
        }





/*User Groups*/
div.user-groups-tree-view {
    border: 1px lightgray solid;
    border-radius: 5px;
    margin-top: 10px;
    min-height: 300px;
    padding: 5px 10px 5px 0;
}

div.user-group-details {
    margin-top: 10px;
}

/*Type Definitions*/
div.type-definitions-reference-select {
    margin-top: 10px;
}

div.type-definitions-list {
    display: inline-block;
    margin-top: 35px;
    width: 310px;
    vertical-align: top;
}

div.type-definition-details {
    display: inline-block;
    margin-top: 35px;
    width: calc(100% - 330px);
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

/*Appointment Booking - Capacity*/
div.usergroup-capacity-configuration-section {
    border: 2px solid lightgrey;
    margin: 5px 0 10px 0;
    padding: 7px 0 15px 0;
    /*Border Radius*/
    border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

/*Appointment Booking - Capacity - Schedules*/
.calendar-popup {
    display: none;
    position: fixed;
    width: 200px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    z-index: 100;
}

    .calendar-popup:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 93px;
        top: -6px;
        width: 14px;
        height: 14px;
        background-color: #fff;
        box-shadow: -2px -2px 2.5px rgba(0, 0, 0, .4);
        -webkit-box-shadow: -2px -2px 2.5px rgba(0, 0, 0, .4);
        -moz-box-shadow: -2px -2px 2.5px rgba(0, 0, 0, .4);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
    }

    .calendar-popup button {
        height: 25%;
        width: 100%;
    }

    .calendar-popup .glyphicon-ok {
        color: green;
        float: left;
    }

    .calendar-popup .glyphicon-pencil {
        color: black;
        float: left;
    }

    .calendar-popup .glyphicon {
        float: left;
    }

    .calendar-popup .glyphicon-remove {
        color: red;
    }

div.usergroup-capacity-schedule-editor-wrapper {
    margin-top: 10px;
}

/*Appointment Booking - Capacity - Filters*/
div.usergroup-capacity-filters-table {
    border: 1px solid #a9a9a9;
    height: 603px;
}

    div.usergroup-capacity-filters-table .ngCell {
        display: table-cell;
        height: auto !important;
        overflow: visible;
        position: static;
    }

    div.usergroup-capacity-filters-table .ngRow {
        display: table-row;
        height: auto !important;
        position: static;
    }

    div.usergroup-capacity-filters-table .ngCellText {
        height: auto !important;
        white-space: normal;
        overflow: visible;
    }

div.usergroup-capacity-filters-table-wrapper {
    margin-top: 10px;
}

div.usergroup-capacity-filter-editor-wrapper {
    margin-top: 10px;
}

.well {
    /*border: 1px solid #AAA;*/
    border: none;
    display: table;
    width: 100%;
    padding: 4px;
}


.leaflet-bar, .leaflet-control-layers, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: solid 1px #C0C0C0;
    box-shadow: none;
}

    /* leaflet shifted icons on bar */
    .leaflet-touch .leaflet-bar a {
        line-height: unset;
    }

.fullMap {
    height: 100%;
}

.smallMap {
    height: 60%;
}

.work-type-icon {
    width: 24px;
    height: 24px;
    border-radius: 15px;
    margin-left: 5px;
}

.content-selector .ui-select-search, .content-selector .ui-select-toggle {
    padding-left: 40px;
}

.content-selector .ui-select-bootstrap .ui-select-toggle > .caret {
    right: 86px;
}

.content-selector .upload-icon {
    position: absolute;
    right: 52px;
    z-index: 1;
    border-radius: 0;
}

.content-selector .delete-icon {
    position: absolute;
    right: 15px;
    z-index: 1;
}

.content-selector .dropdown-icon {
    display: inline-block;
    height: 28px;
    width: 28px;
    border-radius: 3px;
    margin-left: -10px;
    margin-right: 5px;
}

.content-selector .selected-content-icon {
    position: absolute;
    height: 28px;
    width: 28px;
    z-index: 1;
    margin: 3px;
    border-radius: 3px;
}

    .content-selector .selected-content-icon .image-icon {
        height: 26px;
        width: 26px;
        margin: 1px;
    }

    .content-selector .selected-content-icon .audio-play-button {
        width: 28px;
        height: 28px;
        padding-left: 9px;
    }

    .content-selector .selected-content-icon .audio-stop-button {
        width: 28px;
        height: 28px;
        padding-left: 7px;
    }

button.no-left-round {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

button.no-right-round {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}


.out-of-time {
    color: #FF0505;
}

.next-appointment.out-of-time {
    background-color: #FF0505;
    color: white;
}


.next-appointment.no-appointment {
    background-color: white;
    color: black;
    border: #dddddd;
}

.next-appointment.less-then-5-minutes {
    background-color: #cc1d1d;
    color: white;
}

.next-appointment.less-then-15-minutes {
    background-color: #FF6400;
    color: white;
}

.next-appointment.more-then-15-minutes {
    background-color: #0d8726;
    color: white;
}

.timelineSeries_SelectedAppointment {
    cursor: default !important;
}

.hidden {
    display: none;
}

.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width: 75px;
}

    .button:hover {
        background: #333;
        cursor: pointer;
    }






.radio label::before {
    border-color: #7B7B7B;
}




/*.radio label, .checkbox label {
    font-weight: bold;
}*/







.work-type-icon {
    height: 18px;
    width: 18px;
    margin-top: 3px;
    margin-left: 3px;
    position: absolute;
}

.work-state-icon {
    margin: -21px 0 0 2px;
    width: 20px;
    position: absolute;
}

.work-state-icon-fisrt {
    margin: -21px 0 0 -10px;
    width: 20px;
    position: absolute;
}

.work-schedule-type-second {
    margin: -21px 0 0 14px;
    width: 20px;
    border-radius: 10px;
    position: absolute;
}

.vector-marker {
    width: 24px;
    height: 38px;
    display: inline-block;
    -webkit-mask: url(/kona/common/images/pin.svg) no-repeat 50% 50%;
    mask: url(/kona/common/images/pin.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    mask-border: 1px solid red;
}


.awesome-marker-icon-top i {
    margin-top: -10px;
    margin-left: 5px;
    font-size: 20px;
}

.awesome-marker-icon-top {
    z-index: 100;
}






.work-filter-panel {
    position: relative;
    width: 100%;
    margin: 0px auto;
}

    .work-filter-panel .left {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 114px;
        margin-top: -14px;
    }

    .work-filter-panel .right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80px;
    }







.btn-failureCode {
    color: #717171;
    background-color: #F6F6F6;
    border-color: #FFFFFF;
    text-align: left;
    text-transform: uppercase;
}

    .btn-failureCode:focus,
    .btn-failureCode.focus {
        color: #525252;
        background-color: #FEFEFE;
        border-color: #FFFFFF;
    }

    .btn-failureCode:hover {
        color: #525252;
        background-color: #FDFDFD;
        border-color: #FFFFFF;
    }

    .btn-failureCode:active,
    .btn-failureCode.active,
    .open > .dropdown-toggle.btn-failureCode {
        color: #FFFFFF;
        background-color: #31B0D5;
        border-color: #FFFFFF;
        /*opacity: 0.8;*/
    }

        .btn-failureCode:active:hover,
        .btn-failureCode.active:hover,
        .open > .dropdown-toggle.btn-failureCode:hover,
        .btn-failureCode:active:focus,
        .btn-failureCode.active:focus,
        .open > .dropdown-toggle.btn-failureCode:focus,
        .btn-failureCode:active.focus,
        .btn-failureCode.active.focus,
        .open > .dropdown-toggle.btn-failureCode.focus {
            color: #FFFFFF;
            background-color: #269ABC;
            border-color: #FFFFFF;
        }

    .btn-failureCode:active,
    .btn-failureCode.active,
    .open > .dropdown-toggle.btn-failureCode {
        background-image: none;
    }

    .btn-failureCode .badge {
        color: #DEDFE7;
        background-color: #F4F4F4;
    }



.slick-row.odd {
    background-color: white;
}

.slick-row.non-organizational-entity {
    /*color: red;*/
    background-color: #ff000040;
}

.slick-row.persisted-locally-entity {
    background-color: #4caf507a;
}

.slick-row.cant-be-removed-from-local {
    background-color: #d2d2d2;
}

.slick-row.inactive-entity {
    color: gray;
}



div.type-picture {
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-right: 3px;
    border-radius: 14px;
}

.type-picture img {
    width: 22px;
    height: 22px;
    padding: 0 0 2px 2px;
}

.ui-grid-cell-contents div.type-picture {
    width: 24px;
    height: 24px;
    margin-right: 0px;
}

.ui-grid-cell-contents {
    overflow: hidden !important;
}

.ui-grid-cell-contents .type-picture img {
    width: 20px;
    height: 20px;
    padding: 2px 0 2px 4px;
}

.ui-grid-cell-contents.center-content {
    text-align: center;
}

.ui-grid-row-disabled {
    color: grey;
}

.ui-grid-cell-pointer {
    cursor: pointer;
}

.work-status-image {
    width: 26px;
    height: 26px;
    padding: 2px;
    display: inline-block;
    margin-right: 4px;
}


.user-picture {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}


div.type-picture-detail {
    width: 36px;
    height: 36px;
    display: inline-block;
    margin-right: 3px;
    border-radius: 18px;
}

.type-picture-detail img {
    width: 36px;
    height: 36px;
    padding: 4px;
}


/*Messaging - Begin*/
/*.user-message-view .filter {
    margin: 10px;
    width: 270px;
    padding-right: 20px;
}

.recipient-list .fa-search {
    position: absolute;
    right: 15px;
    top: 15px;
}*/

/*Messaging - Recipient List - Begin*/
.messaging-recipient-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

    .messaging-recipient-list .recipient-filter-container {
        padding: 10px;
    }

    .messaging-recipient-list .recipient-rows-container {
        flex: 1;
        overflow: hidden;
    }

    .messaging-recipient-list .recipient-rows {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px;
        height: 100%;
    }

    .messaging-recipient-list .recipient-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
    }

        .messaging-recipient-list .recipient-row:hover {
            background-color: #E3F5FD;
        }

        .messaging-recipient-list .recipient-row.selected {
            background-color: #B2E1F5;
        }

        .messaging-recipient-list .recipient-row .recipient-icon {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin: 5px;
        }

        .messaging-recipient-list .recipient-row .recipient-name {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .messaging-recipient-list .recipient-row .recipient-badge {
            margin: 5px;
        }
/*Messaging - Recipient List - End*/

/*Messaging - Chat - Begin*/
.messaging-chat {
    background: white;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

    .messaging-chat hr {
        width: 100%;
    }

        .messaging-chat hr.blue {
            border-top: 1px solid #88BDD7;
        }

    /*Messaging - Chat - Recipient Info - Begin*/
    .messaging-chat .recipient-info {
        display: flex;
        align-items: center;
    }

        .messaging-chat .recipient-info .recipient-icon {
            width: 80px;
            height: 80px;
            border-radius: 40px;
        }

        .messaging-chat .recipient-info .recipient-name {
            font-size: 32px;
        }

        .messaging-chat .recipient-info .recipient-online-status {
            color: #00AA36;
            font-weight: bold;
        }

        .messaging-chat .recipient-info .recipient-offline-status {
            color: #AA3600;
            font-weight: bold;
        }
    /*Messaging - Chat - Recipient Info - End*/

    /*Messaging - Chat - Chat History - Begin*/
    .messaging-chat .chat-history {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        margin-bottom: 20px;
    }

        .messaging-chat .chat-history .message-row {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            margin: 20px;
            position: relative;
            min-width: 300px;
        }

            .messaging-chat .chat-history .message-row .recipient-icon {
                width: 40px;
                height: 40px;
            }

            .messaging-chat .chat-history .message-row .message-bubble {
                flex: 1;
                overflow: hidden;
                min-height: 40px;
                border-radius: 5px;
                padding: 5px 20px;
                display: flex;
                align-items: center;
            }

                .messaging-chat .chat-history .message-row .message-bubble.me {
                    background-color: #EBEBEB;
                    margin-right: 20px;
                    margin-left: 15%;
                }

                .messaging-chat .chat-history .message-row .message-bubble.recipient {
                    background-color: #B2E1F5;
                    margin-right: 15%;
                    margin-left: 30px;
                }

                .messaging-chat .chat-history .message-row .message-bubble::before {
                    content: "\00a0";
                    display: block;
                    height: 16px;
                    position: absolute;
                    top: 12px;
                    transform: rotate( 29deg ) skew( -35deg );
                    -moz-transform: rotate( 29deg ) skew( -35deg );
                    -ms-transform: rotate( 29deg ) skew( -35deg );
                    -o-transform: rotate( 29deg ) skew( -35deg );
                    -webkit-transform: rotate( 29deg ) skew( -35deg );
                    width: 20px;
                }

                .messaging-chat .chat-history .message-row .message-bubble.me::before {
                    background-color: #EBEBEB;
                    right: 10px;
                }

                .messaging-chat .chat-history .message-row .message-bubble.recipient::before {
                    background-color: #B2E1F5;
                    left: 60px;
                }

            .messaging-chat .chat-history .message-row .message {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
            }

                .messaging-chat .chat-history .message-row .message .message-text {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 14px;
                    font-weight: bold;
                    margin: 5px 0;
                }

                .messaging-chat .chat-history .message-row .message .message-datetime {
                    flex: 1;
                    overflow: hidden;
                    color: gray;
                    font-style: italic;
                    font-weight: normal;
                    font-size: 12px;
                    margin-top: 7px;
                    text-align: right;
                    min-width: 135px;
                }

@media (min-width: 150px) and (max-width: 768px) {
    .messaging-chat .chat-history {
        flex: none;
        height: 600px;
    }
}
/*Messaging - Chat - Chat History - End*/

/*Messaging - Chat - Input Area - Begin*/
.messaging-chat .input-area {
    display: flex;
    flex-direction: row;
}

    .messaging-chat .input-area .text-area-container {
        flex: 1;
        overflow: hidden;
        border: 1px solid lightgrey;
        border-radius: 5px;
        padding: 5px 5px 0 5px;
    }

        .messaging-chat .input-area .text-area-container textarea {
            border: 0;
            height: 100px;
            width: 100%;
            resize: none;
            font-style: italic;
        }

            .messaging-chat .input-area .text-area-container textarea:focus {
                outline: 0 !important;
                -webkit-appearance: none;
            }

    .messaging-chat .input-area .buttons-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: auto;
        margin-left: 10px;
    }

        .messaging-chat .input-area .buttons-container button {
            display: block;
            margin-bottom: 5px;
            width: 100px;
        }
/*Messaging - Chat - Input Area - End*/
/*Messaging - Chat - End*/
/*Messaging - End*/


.leaflet-shadow-pane {
    display: none;
}


button.work-flow-editor-btn {
    margin-top: 10px;
    width: 100px;
}

div.flow-step-details {
    border-radius: 10px;
    border: 2px solid lightgray;
    padding: 0 30px 20px 30px;
    margin-top: 20px
}

.code-editor {
    width: 100%;
    height: 600px;
}

    .code-editor.bordered {
        border: 1px solid lightgray;
    }

span.messaging-menu-item-badge {
    position: absolute;
    right: 3px;
    font-size: 10px;
    width: 15px;
    height: 15px;
    text-align: center;
    padding: 2px;
    top: 10px;
}

div.offline-map-layer-configuration-item {
    margin-bottom: 10px;
    padding-top: 15px;
    margin: 0;
}

div.offline-map-layer-configuration-item-active {
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

div.offline-map-layer-configuration-item-inactive {
}


.kona-custom-legend {
    text-align: left;
    line-height: 18px;
    color: #555;
    border: solid 1px #C0C0C0;
}

    .kona-custom-legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }

.kona-custom-legend {
    padding: 6px 8px;
    background: white;
    background: rgba(255,255,255,0.8);
    border-radius: 5px;
}

    .kona-custom-legend canvas {
        margin-bottom: -4px;
        margin-right: 8px;
    }

.analytic-filter .filter-details {
    height: 100% !important;
}

.print-only {
    display: none !important;
}



@media print {
    input textarea select label {
        page-break-inside: avoid;
        page-break-after: always;
    }

    .form-group {
        page-break-inside: avoid;
        page-break-after: always;
    }

    .ui-resizable {
        position: absolute !important;
    }

    button {
        display: none
    }

    .btn {
        display: none
    }

    .no-print {
        display: none;
    }

    .print-only {
        display: inline !important;
    }

    /* Don't show the subview container (this will hide the data grids), but do
        show the section we are going to print */
    .split-subview-container {
        visibility: hidden;
    }

    .section-to-print {
        visibility: visible !important;
    }

    /* Use the entire width (by default the inline style width is used by the
        subview to track the width) */
    .split-subview-container.left {
        width: 100% !important;
    }

    /* Remove extra left padding */
    #wrapper, #wrapper.menu-level2-opened {
        padding-left: 0px;
    }

    #page-wrapper, .default-configuration-page-wrapper.primary,
    .split-view.split-subview-container,
    .kona-container.no-overflow {
        overflow: visible !important;
    }

    /* Don't show the state machine or splitter */
    .state-machine,
    .kona-splitter {
        display: none;
    }

    /* By default the scrolling happens in a container and not the main body.
        Set overflow and positions to make the body scroll. */
    .swappable-subview,
    .split-subview,
    .split-subview-container,
    .swappable-view-container,
    .split-view {
        overflow: visible !important;
    }

    .work-list.kona-container {
        display: block !important;
        position: static !important;
    }

    .detail-view {
        padding: 0px !important;
        overflow-y: visible !important;
    }
}

/*Predefined Messages*/
.predefined-messages-configuration .predefined-message {
}

    .predefined-messages-configuration .predefined-message .cell {
        padding: 20px 10px;
        border-bottom: solid lightgray 1px;
        vertical-align: top;
    }

    .predefined-messages-configuration .predefined-message .text-cell {
        /*background: lightblue;*/
    }

        .predefined-messages-configuration .predefined-message .text-cell .text {
        }

        .predefined-messages-configuration .predefined-message .text-cell .text-editable {
        }

            .predefined-messages-configuration .predefined-message .text-cell .text-editable textarea {
                resize: vertical;
            }


    .predefined-messages-configuration .predefined-message .buttons-cell {
        text-align: center;
        width: 100px;
    }


.kona-success {
    color: green;
}

.kona-error {
    color: red;
}

/*Entity Grid*/
.entity-grid-container {
    height: 280px;
    margin-bottom: 25px;
}

.entity-grid {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .entity-grid .entity-grid-header {
        display: flex;
        flex-direction: row;
        padding: 0 5px;
        width: 100%;
    }

        .entity-grid .entity-grid-header .entity-grid-header-section {
            padding-top: 5px;
        }

            .entity-grid .entity-grid-header .entity-grid-header-section.counters-section {
                flex: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-style: italic;
                padding-bottom: 5px;
                overflow: hidden;
            }

            .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section {
                flex: 1;
            }

                .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container {
                    display: inline-block;
                    margin-bottom: 5px;
                }

                    .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button {
                        height: 40px;
                        width: 40px;
                    }

                        .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button.svg-icon {
                            position: relative;
                        }

                        .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button.dropdown-toggle {
                            width: 60px;
                        }

                        .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button *.centered {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin-right: -50%;
                            transform: translate(-50%, -50%);
                        }

                        .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button i.svg {
                            background: black;
                            display: inline-block;
                            width: 14px;
                            height: 14px;
                        }


                        .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button.dropdown-toggle .svg-with-caret {
                            display: flex;
                            align-items: center;
                        }


                            .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section .button-container button.dropdown-toggle .svg-with-caret .caret {
                                margin-left: 10px;
                            }



                .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section.entity-operations {
                    text-align: left;
                }

                .entity-grid .entity-grid-header .entity-grid-header-section.buttons-section.grid-operations {
                    text-align: right;
                }


    .entity-grid .grid-container {
        flex: 1;
        overflow: hidden;
    }

    .entity-grid .grid {
        border-left: 1px solid lightgrey;
        border-bottom: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
    }

@media (min-width: 150px) and (max-width: 768px) {
    /*Remove after work list rework*/
    .work-list .grid-container {
        height: 600px;
    }

    .entity-grid .grid-container {
        flex: none;
        height: 600px;
    }
}

/*Data Grids*/
.grid-cell-icon-wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
}

    .grid-cell-icon-wrapper > .grid-cell-icon {
        height: 77%;
        border-radius: 3px;
        padding: 3px;
    }

.grid-cell-checkbox-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center
}

    .grid-cell-checkbox-wrapper > .grid-cell-checkbox {
        margin: 0 auto;
        pointer-events: none;
    }


/*Configuration*/
.editor .revision-block {
    margin-bottom: 20px;
    overflow: visible;
}

.editor .editor-block .editor-block-header {
    font-size: 18px;
}

.editor .editor-block input.editor-checkbox {
    height: 20px;
    width: 20px;
    margin-top: 7px;
}

.editor .editor-buttons {
    float: right;
}

    .editor .editor-buttons .editor-button {
        width: 100px;
    }

/*.default-configuration-page-wrapper {
    width: 100%;
    height: 100%;
    background: white;
    position: relative;
    overflow-y: auto;
}

.default-configuration-page-wrapper.level1 {
    padding: 10px;
}*/

.default-configuration-page-wrapper {
    width: 100%;
    height: 100%;
    background: white;
    position: relative;
}

    .default-configuration-page-wrapper.primary {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .default-configuration-page-wrapper .abstract-view {
        width: 100%;
        height: 100%;
        position: relative;
    }

/*Reference Control Region Container - Begin*/
.reference-control-region-container {
    float: left;
    height: 100%;
    min-width: 200px;
    margin-bottom: 10px;
}

    .reference-control-region-container .vertical-scrollable {
        overflow-y: auto;
    }

    .reference-control-region-container > .panel {
        height: 100%;
        margin-bottom: 0;
    }

        .reference-control-region-container > .panel > .panel-body.region {
            height: calc(100% - 41px);
        }

            .reference-control-region-container > .panel > .panel-body.region .region-control-wrapper {
                padding: 2px 10px;
            }

                .reference-control-region-container > .panel > .panel-body.region .region-control-wrapper .region-control {
                    display: flex;
                }

                    .reference-control-region-container > .panel > .panel-body.region .region-control-wrapper .region-control .region-control-label {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .reference-control-region-container > .panel > .panel-body.region .region-control-wrapper .region-control .region-control-properties-wrapper {
                        display: flex;
                    }

                        .reference-control-region-container > .panel > .panel-body.region .region-control-wrapper .region-control .region-control-properties-wrapper .region-control-properties {
                            margin-left: auto;
                            display: flex;
                            align-items: center;
                        }

                            .reference-control-region-container > .panel > .panel-body.region .region-control-wrapper .region-control .region-control-properties-wrapper .region-control-properties .region-control-property {
                                margin-left: 5px;
                            }
/*Reference Control Region Container - End*/

/*Panels - Begin*/
.panel > .panel-heading > .panel-header-top-right-button {
    background: none;
    border: 0;
    float: right;
    height: 35px;
    margin-top: -7px;
    margin-right: -12px;
    outline: none;
    width: 40px;
}
/*Panels - End*/


/*Select with the placeholder - Begin*/
select.placeholder {
    color: gray;
}

option.placeholder {
    color: gray;
}

select.placeholder > option {
    color: black;
}

select > option[disabled] {
    color: #c4c4c4;
}

    select.placeholder > option.placeholder {
        color: gray;
    }
/*Select with the placeholder - End*/

/*Separator*/
hr.separator-default {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid lightgray;
    margin: 0 0 15px 0;
    padding: 0;
}

/*Links*/
.not-active-link {
    pointer-events: none;
    cursor: default;
}

/*Reference State Machine Reference States Editor - Begin*/
.state-machine-states-editor button.state {
    width: 221px;
}

.state-machine-states-editor button.state-button {
    width: 45px;
    height: 34px;
}

    .state-machine-states-editor button.state-button.visibility.fa-eye.gray {
        color: gray;
    }

    .state-machine-states-editor button.state-button.sound {
        width: auto;
    }

    .state-machine-states-editor button.state-button.no-sound {
    }

.state-machine-states-editor div.state-to {
    margin-bottom: 2px;
}

.state-machine-states-editor .transition-element {
    display: inline-block;
    vertical-align: top;
}
/*Reference State Machine Reference States Editor - End*/


.download-button {
    width: 100%;
    font-weight: bold;
}

.download-label {
    color: black;
    font-weight: normal;
    padding-top: 10px;
    padding-left: 0px;
}

.download-service {
    background-color: #eeeeee;
    border: none;
    text-align: center;
    font-size: 130%;
    color: white;
    display: block;
    padding: 20px 20px 20px 20px;
}


/*Main Menu Items*/
.default-main-menu-item {
    cursor: pointer;
}

    .default-main-menu-item > .svg {
        display: inline-block;
    }

/*Navigation Icons*/
.navigation-icons {
    --navigation-icon-container-size: 40px;
    --navigation-icon-size: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-flow: row-reverse;
}

    .navigation-icons .navigation-icon-container {
        width: var(--navigation-icon-container-size);
        height: var(--navigation-icon-container-size);
        line-height: var(--navigation-icon-container-size);
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
    }

        .navigation-icons .navigation-icon-container .navigation-icon {
            color: #295f89;
            cursor: pointer;
            font-size: var(--navigation-icon-size);
            line-height: var(--navigation-icon-container-size);
        }

            .navigation-icons .navigation-icon-container .navigation-icon.details-icon,
            .navigation-icons .navigation-icon-container .navigation-icon.tree-icon,
            .navigation-icons .navigation-icon-container .navigation-icon.calendar-icon {
                font-size: calc(var(--navigation-icon-size) - 2px)
            }

            .navigation-icons .navigation-icon-container .navigation-icon.disabled {
                opacity: 0.6;
                cursor: not-allowed;
                pointer-events: none;
            }

            .navigation-icons .navigation-icon-container .navigation-icon.active {
                opacity: 1;
                color: white;
            }

/*Num Pad Modal*/
.num-pad-modal .modal-dialog {
    width: 210px;
}

.num-pad-modal .modal-body {
    width: 100%;
    height: 100%;
    padding: 10px;
}

.num-pad-modal .default-block {
    margin: 5px;
}

    .num-pad-modal .default-block .default-element {
        width: 100%;
    }

.num-pad-modal .buttons-block {
    text-align: center;
}

.num-pad-modal input {
    text-align: right;
}

.num-pad-modal .buttons-block button {
    width: 50px;
    height: 50px;
    margin: 5px;
}


/*Split View - Start*/
.split-view {
}

.split-view {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
}

    .split-view.vertical {
        flex-direction: row;
    }

    .split-view.horizontal {
        flex-direction: column;
    }

    .split-view .split-subview-container {
        display: flex;
        overflow: hidden;
    }

    .split-view.vertical .split-subview-container {
        flex-direction: row;
        height: 100%;
    }

    .split-view.horizontal .split-subview-container {
        flex-direction: column;
        width: 100%;
    }

    .split-view .split-subview-container .split-subview {
        flex: 1;
        overflow: hidden;
    }

    .split-view.vertical .split-subview-container .split-subview {
        height: 100%;
    }

    .split-view.horizontal .split-subview-container .split-subview {
        width: 100%;
    }

    .split-view .split-subview-container .split-subview-collapse-button-container {
        --icon-offset: 5px;
        width: calc(var(--kona-splitter-thickness) + var(--icon-offset));
        height: calc(var(--kona-splitter-thickness) + var(--icon-offset));
        line-height: calc(var(--kona-splitter-thickness) + var(--icon-offset));
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
    }

        .split-view .split-subview-container .split-subview-collapse-button-container .split-subview-collapse-button {
            color: white;
            font-size: calc(var(--kona-splitter-thickness) + var(--icon-offset));
            cursor: pointer;
        }

.touch-screen .split-view .split-subview-container .split-subview-collapse-button-container {
    width: calc(var(--kona-splitter-touch-thickness) + var(--icon-offset));
    height: calc(var(--kona-splitter-touch-thickness) + var(--icon-offset));
    line-height: calc(var(--kona-splitter-touch-thickness) + var(--icon-offset));
}

    .touch-screen .split-view .split-subview-container .split-subview-collapse-button-container .split-subview-collapse-button {
        font-size: calc(var(--kona-splitter-touch-thickness) + var(--icon-offset));
    }

@media (min-width: 150px) and (max-width: 768px) {
    .split-view {
        height: auto;
    }

        .split-view.vertical,
        .split-view.horizontal {
            flex-direction: column;
        }

        .split-view .split-subview-container {
            width: 100% !important;
            height: auto !important;
            flex-direction: column;
        }

            .split-view .split-subview-container .split-subview {
                width: 100%;
            }
}

/*Split View - End*/
/*Headered View - Start*/
.headered-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.headered-view-header {
    background: #60aaed;
    color: white;
    width: 100%;
    height: auto;
    padding: 0 10px;
}

    .headered-view-header .header-top-panel {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin: 2px 0 15px 0;
    }

        .headered-view-header .header-top-panel .header-label {
            font-size: 28px;
        }

        .headered-view-header .header-top-panel .navigation-icons {
            flex: 1;
        }

    .headered-view-header .header-controls {
        width: 100%;
        height: auto;
    }

    .headered-view-header header-control {
        display: block;
        height: auto;
        margin-bottom: 10px;
    }

        .headered-view-header header-control .header-selector {
            display: flex;
            flex-direction: row;
            align-items: center
        }

            .headered-view-header header-control .header-selector .header-selector-label {
                width: 150px;
                margin: 0 10px 0 0;
                text-align: right;
            }

            .headered-view-header header-control .header-selector .header-selector-input {
                flex: 1;
            }

.headered-view-contents {
    flex: 1;
    overflow: hidden;
}
/*Headered View - End*/

/*Configuration Page - Start*/
.configuration-page {
    width: 100%;
    height: 100%;
    background: white;
    overflow-x: hidden;
    overflow-y: auto;
}

    .configuration-page.default-padding {
        padding: 20px;
    }

    .configuration-page.with-sticky-footer {
        padding-bottom: 0;
    }

    .configuration-page.default-padding .modal-header {
        padding: 0 0 15px 0;
    }

    .configuration-page.default-padding .modal-body {
        padding: 15px 0 0 0;
    }

    .configuration-page .configuration-header {
        font-size: 18px;
        padding-bottom: 5px;
        margin-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .configuration-page .configuration-body {
    }

    .configuration-page .configuration-block {
        margin-bottom: 40px;
        /*overflow: hidden;*/
    }

        .configuration-page .configuration-block .configuration-block-header {
            font-size: 18px;
        }

    .configuration-page .configuration-panel {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px 10px 0 10px;
    }

        .configuration-page .configuration-panel .configuration-panel-element {
            margin-bottom: 10px;
        }

    .configuration-page .configuration-footer {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #e5e5e5;
        position: sticky;
        bottom: 0;
        height: 55px;
        background-color: white;
    }

        .configuration-page .configuration-footer button {
            float: right;
            margin-left: 5px;
            width: 100px;
        }

    .configuration-page .nothing-to-show-box {
        color: gray;
        text-align: center;
        font-size: 18px;
    }
/*Configuration Page - End*/

/*Configuration Page With Grid - Start*/
.configuration-page-with-grid {
    height: 100%;
}

    .configuration-page-with-grid .vertical-split-view-container {
        height: 100%;
    }

    .configuration-page-with-grid .entity-editor {
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }
/*Configuration Page With Grid - End*/

/*Kona Container - Begin*/
.kona-container {
}

    .kona-container.default-padding {
        padding: 20px;
    }

        .kona-container.default-padding .modal-header {
            padding: 0 0 15px 0;
        }

        .kona-container.default-padding .modal-body {
            padding: 15px 0 0 0;
        }

    .kona-container.fits-parent {
        width: 100%;
        height: 100%;
    }

    .kona-container.no-overflow {
        overflow: hidden;
    }

    .kona-container.auto-vertical-overflow {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .kona-container.auto-overflow {
        overflow: auto;
    }

/*Kona Container - End*/

/*Kona Text - Begin*/
.kona-text.bold {
    font-weight: bold;
}
/*Kona Text - End*/


/*Headered Collapsible View - Start*/
.headered-collapsible-view {
    width: 100%;
    height: 100%;
}

    .headered-collapsible-view > .header > .header-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
        padding: 10px 10px 5px 10px;
    }

        .headered-collapsible-view > .header > .header-body button {
            background: none;
            outline: none;
        }

        .headered-collapsible-view > .header > .header-body > span.collapse-button {
            margin-right: 10px;
            margin-top: -2px;
        }

        .headered-collapsible-view > .header > .header-body > .header-label {
            flex: 1;
            overflow: hidden;
            font-weight: bold;
        }

        .headered-collapsible-view > .header > .header-body > .header-buttons {
            background: none;
            outline: none;
        }

    .headered-collapsible-view > .header > .header-separator {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid lightgray;
        padding: 0;
        margin: 0;
    }
/*Headered Collapsible View - End*/


/*Context Menu - Begin*/
.kona-context-menu-item {
    padding: 5px;
    cursor: pointer;
}

    .kona-context-menu-item:hover {
        background: #BFD4F0;
    }

    .kona-context-menu-item.disabled {
        color: gray;
    }

    .kona-context-menu-item .menu-item-elements {
        display: flex;
        align-items: center;
    }

    .kona-context-menu-item .menu-item-element {
        margin: 0 5px
    }

    .kona-context-menu-item .menu-item-icon {
        width: 14px;
        height: 14px;
        position: relative;
        border-radius: 2px;
    }

        .kona-context-menu-item .menu-item-icon i {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }

        /*Font Awesome*/
        .kona-context-menu-item .menu-item-icon .fa {
            font-size: 14px;
        }

        /*SVG*/
        .kona-context-menu-item .menu-item-icon .svg {
            width: 14px;
            height: 14px;
            background: black;
        }

    .kona-context-menu-item.disabled .menu-item-icon .svg {
        background: gray;
    }

    /*IMG*/
    .kona-context-menu-item .menu-item-icon .img {
        width: 14px;
        height: 14px;
        border-radius: 2px;
    }

        .kona-context-menu-item .menu-item-icon .img img {
            width: 14px;
            height: 14px;
            vertical-align: top;
        }

    .kona-context-menu-item.disabled .menu-item-icon .img {
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
/*Context Menu - End*/

/*Work Order(s) Cration Form - Begin*/
.work-order-creation-form .form-group {
    margin: 0 0 10px 0;
}

    .work-order-creation-form .form-group .read-only-field {
        height: 34px;
        display: flex;
        align-items: center;
    }
/*Work Order(s) Cration Form - End*/

/*Check Box Tree - Begin*/
.check-box-tree .tree-level {
    padding-left: 25px;
}

.check-box-tree .tree-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 5px;
}

    .check-box-tree .tree-item .tree-item-elem {
        margin: 0 5px 0 0;
    }

    .check-box-tree .tree-item i.tree-item-elem {
        margin-top: -4px;
    }

    .check-box-tree .tree-item i.copy-icon {
        visibility: hidden;
        cursor: pointer;
    }

    .check-box-tree .tree-item:hover i.copy-icon {
        visibility: visible;
    }

    .check-box-tree .tree-item .tooltip-inner {
        background-color: #337ab7;
        border-color: #2e6da4;
    }
/*Check Box Tree - End*/

/*Revision Control - Begin*/
.revision-control .control-items {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .revision-control .control-items .revert-button {
        height: 38px;
    }

    .revision-control .control-items div[isteven-multi-select] {
        margin: 0 10px;
    }

    .revision-control .control-items toggle label.btn {
        height: 38px;
        padding-top: 8px;
    }
/*Revision Control - End*/

/*isteven-multi-select - Begin*/
div[isteven-multi-select].fits-parent-horizontally > span > button {
    width: 100%;
}

.multiSelect .inputFilter {
    color: inherit !important;
}
/*isteven-multi-select - End*/

/*Change colors for toggle*/
.toggle-button .btn-group .btn.btn-primary {
    background-color: #7093B1;
}

    .toggle-button .btn-group .btn.btn-primary.active {
        background-color: #286090;
    }

.moment-picker {
    position: absolute;
    z-index: 1500;
}

/*Detail View - Start*/
.detail-view {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

    .detail-view .detail-view-block {
        margin-bottom: 40px;
        /*overflow: hidden;*/
    }

    .detail-view .detail-view-buttons {
        float: right;
    }

        .detail-view .detail-view-buttons .detail-view-button {
            width: 100px;
        }

    .detail-view .revision-block {
        margin-bottom: 20px;
    }

    .detail-view .block-header {
        font-size: 18px;
    }

/*Detail View - End*/

/*Dashboard View - Start*/
.dashboard-view {
    height: 100%;
    width: 100%;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}
/*Dashboard View - End*/


/*Kona Controls - Start*/
.kona-control {
    /*overflow: hidden*/
    /*outline: none;*/
}
/*Kona Controls - End*/

/*Default Kona Control-Based Detail View - Start*/
.default-kona-control-based-detail-view {
    /*overflow: hidden*/;
}

    .default-kona-control-based-detail-view .kona-control-container {
        outline: none;
    }

        .default-kona-control-based-detail-view .kona-control-container .kona-control-header {
            font-size: 16px;
            background-color: white;
            border-bottom: #8F8F8F solid 2px;
            min-height: 36px;
        }

        .default-kona-control-based-detail-view .kona-control-container:focus .kona-control-header {
            color: #4D90FE;
            border-bottom-color: #4D90FE;
        }

        .default-kona-control-based-detail-view .kona-control-container .kona-control-header .kona-control-label {
            margin: 0;
        }

        .default-kona-control-based-detail-view .kona-control-container .kona-control-header .expand-collapse-button {
            font-size: 12px;
            margin: 0 5px 0 0;
        }

        .default-kona-control-based-detail-view .kona-control-container .kona-control-header .remove-button {
            background-color: white;
            padding: 2px 6px;
        }

        .default-kona-control-based-detail-view .kona-control-container .kona-control-body .buttons-stack {
            display: flex;
            flex-direction: column;
        }

            .default-kona-control-based-detail-view .kona-control-container .kona-control-body .buttons-stack button {
                margin-bottom: 5px;
                white-space: normal;
            }

                .default-kona-control-based-detail-view .kona-control-container .kona-control-body .buttons-stack button:last-child {
                    margin-bottom: 0;
                }

        .default-kona-control-based-detail-view .kona-control-container .kona-control-body .status-label {
            text-align: center;
        }

            .default-kona-control-based-detail-view .kona-control-container .kona-control-body .status-label .status-label-text {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    .default-kona-control-based-detail-view .main-region {
        padding: 0;
    }

        .default-kona-control-based-detail-view .main-region .kona-control-container {
            /*border: 2px solid red;*/
            /*display: table;*/
            margin-bottom: 30px;
            width: 100%;
        }

            .default-kona-control-based-detail-view .main-region .kona-control-container .kona-control-header {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 10px;
            }

                .default-kona-control-based-detail-view .main-region .kona-control-container .kona-control-header .kona-control-label {
                    flex: 1;
                }

                .default-kona-control-based-detail-view .main-region .kona-control-container .kona-control-header .remove-button {
                    font-size: 19px;
                }

    .default-kona-control-based-detail-view .right-region {
        padding: 0 0 0 20px;
    }

        .default-kona-control-based-detail-view .right-region .kona-control-container {
            border: 0;
            box-shadow: none;
        }

            .default-kona-control-based-detail-view .right-region .kona-control-container .kona-control-header {
                margin-bottom: 0;
                text-align: center;
                overflow: hidden;
                padding-left: 35px;
                padding-right: 35px;
                position: relative;
                padding-bottom: 3px;
            }

                .default-kona-control-based-detail-view .right-region .kona-control-container .kona-control-header .remove-button {
                    font-size: 16px;
                    position: absolute;
                    right: 5px;
                    top: 5px;
                }

            .default-kona-control-based-detail-view .right-region .kona-control-container .kona-control-body {
                overflow: hidden;
            }
/*Default Kona Control-Based Detail View - End*/

/*Default Kona Control-Based Map Hover - Start*/
.default-kona-control-based-map-hover {
}

    .default-kona-control-based-map-hover .main-region {
    }

        .default-kona-control-based-map-hover .main-region .kona-control-container {
            margin-bottom: 10px;
        }
/*Default Kona Control-Based Map Hover - End*/

/*Default Kona Control-Based Dashboard View - Start*/
.default-kona-control-based-dashboard-view {
    /*overflow: hidden*/;
}

    .default-kona-control-based-dashboard-view .kona-control-container {
        outline: none;
    }

        .default-kona-control-based-dashboard-view .kona-control-container .kona-control-header {
            font-size: 16px;
            background-color: white;
            border-bottom: #8F8F8F solid 2px;
            min-height: 36px;
        }

        .default-kona-control-based-dashboard-view .kona-control-container:focus .kona-control-header {
            color: #4D90FE;
            border-bottom-color: #4D90FE;
        }

        .default-kona-control-based-dashboard-view .kona-control-container .kona-control-header .kona-control-label {
            margin: 0;
        }

        .default-kona-control-based-dashboard-view .kona-control-container .kona-control-header .expand-collapse-button {
            font-size: 12px;
            margin: 0 5px 0 0;
        }

        .default-kona-control-based-dashboard-view .kona-control-container .kona-control-header .remove-button {
            background-color: white;
            padding: 2px 6px;
        }

        .default-kona-control-based-dashboard-view .kona-control-container .kona-control-body .buttons-stack {
            display: flex;
            flex-direction: column;
        }

            .default-kona-control-based-dashboard-view .kona-control-container .kona-control-body .buttons-stack button {
                margin-bottom: 5px;
                white-space: normal;
            }

                .default-kona-control-based-dashboard-view .kona-control-container .kona-control-body .buttons-stack button:last-child {
                    margin-bottom: 0;
                }

        .default-kona-control-based-dashboard-view .kona-control-container .kona-control-body .status-label {
            text-align: center;
        }

            .default-kona-control-based-dashboard-view .kona-control-container .kona-control-body .status-label .status-label-text {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    .default-kona-control-based-dashboard-view .main-region {
        padding: 0;
    }

        .default-kona-control-based-dashboard-view .main-region .kona-control-container {
            /*border: 2px solid red;*/
            display: table;
            margin-bottom: 30px;
            width: 100%;
        }

            .default-kona-control-based-dashboard-view .main-region .kona-control-container .kona-control-header {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 10px;
            }

                .default-kona-control-based-dashboard-view .main-region .kona-control-container .kona-control-header .kona-control-label {
                    flex: 1;
                }

                .default-kona-control-based-dashboard-view .main-region .kona-control-container .kona-control-header .remove-button {
                    font-size: 19px;
                }

    .default-kona-control-based-dashboard-view .right-region {
        padding: 0 0 0 20px;
    }

        .default-kona-control-based-dashboard-view .right-region .kona-control-container {
            border: 0;
            box-shadow: none;
        }

            .default-kona-control-based-dashboard-view .right-region .kona-control-container .kona-control-header {
                margin-bottom: 0;
                text-align: center;
                overflow: hidden;
                padding-left: 35px;
                padding-right: 35px;
                position: relative;
                padding-bottom: 3px;
            }

                .default-kona-control-based-dashboard-view .right-region .kona-control-container .kona-control-header .remove-button {
                    font-size: 16px;
                    position: absolute;
                    right: 5px;
                    top: 5px;
                }

            .default-kona-control-based-dashboard-view .right-region .kona-control-container .kona-control-body {
                overflow: hidden;
            }
/*Default Kona Control-Based Dashboard View - End*/

/*Default Kona Control-Based Creation Modal View - Start*/
.default-kona-control-based-creation-modal-view {
    /*overflow: hidden*/;
}

    .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-header {
        font-size: 16px;
        background-color: white;
        border-bottom: #8F8F8F solid 2px;
        min-height: 36px;
    }

        .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-header button {
            background-color: white;
            outline: none;
        }

        .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-header .remove-button {
            background-color: white;
            padding: 2px 6px;
        }

    .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-body .buttons-stack {
        display: flex;
        flex-direction: column;
    }

        .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-body .buttons-stack button {
            margin-bottom: 5px;
            white-space: normal;
        }

            .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-body .buttons-stack button:last-child {
                margin-bottom: 0;
            }

    .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-body .status-label {
        text-align: center;
    }

        .default-kona-control-based-creation-modal-view .kona-control-container .kona-control-body .status-label .status-label-text {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .default-kona-control-based-creation-modal-view .main-region {
        padding: 0;
    }

        .default-kona-control-based-creation-modal-view .main-region .kona-control-container {
            /*border: 2px solid red;*/
            display: table;
            margin-bottom: 25px;
            width: 100%;
        }

            .default-kona-control-based-creation-modal-view .main-region .kona-control-container:last-child {
                margin-bottom: 0;
            }

            .default-kona-control-based-creation-modal-view .main-region .kona-control-container .kona-control-header {
                margin-bottom: 10px;
            }

                .default-kona-control-based-creation-modal-view .main-region .kona-control-container .kona-control-header .remove-button {
                    font-size: 19px;
                }
/*Default Kona Control-Based Creation Modal View - End*/

/*Entity Grid Column Configurations Editor Modal - Start*/
.entity-grid-columns-configurations-editor-modal .entity-grid-columns-configurations {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px;
}

    .entity-grid-columns-configurations-editor-modal .entity-grid-columns-configurations .entity-grid-column-configuration {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
/*Entity Grid Column Configurations Editor Modal - End*/

/*About Modal - Start*/
.about-modal {
}

    .about-modal .about-block {
        margin-bottom: 25px;
    }

        .about-modal .about-block:last-child {
            margin-bottom: 0;
        }

    .about-modal .app-info-table {
        width: 100%;
    }

        .about-modal .app-info-table .app-info-column {
            padding-bottom: 10px;
        }

        .about-modal .app-info-table .app-info-row:last-child .app-info-column {
            padding-bottom: 0;
        }

        .about-modal .app-info-table .app-info-row .app-info-column.app-info-key {
            text-align: right;
            font-weight: bold;
            white-space: nowrap;
            vertical-align: top;
            padding-right: 15px;
        }

        .about-modal .app-info-table .app-info-row .app-info-column.app-info-value button {
            width: 130px;
        }
/*About Modal - End*/


/*Route Sequencing Bar - Start*/
.route-sequencing-bar {
    display: flex;
    align-items: center;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px;
    min-width: 250px;
}

    .route-sequencing-bar .bar-section {
        flex: 1;
    }
/*Route Sequencing Bar - End*/


/*Reccurrence Editor - Start*/
.recurrence-editor .flex-row {
    display: flex;
    align-items: center;
}

    .recurrence-editor .flex-row * {
        margin-right: 10px;
    }

        .recurrence-editor .flex-row *:last-child {
            margin-right: 0;
        }

.recurrence-editor button {
    width: 55px;
    margin-right: 3px;
}

    .recurrence-editor button:last-child {
        margin-right: 0;
    }
/*Reccurrence Editor - End*/


/*Schedule Editor Modal - Start*/
.schedule-editor-modal .form-group {
    margin-bottom: 5px;
}
/*Schedule Editor Modal - End*/

.modal-body .modal-block {
    margin-bottom: 25px;
}

    .modal-body .modal-block:last-child {
        margin-bottom: 0;
    }

    .modal-body .modal-block .modal-block-header {
        font-size: 18px;
        color: gray;
    }


/*Role Claims Editor - Start*/
.role-claims-editor .claim-container .claim-checkbox {
    padding-right: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*Role Claims Editor - End*/

.esri-feature-asset-details .form-control {
    height: 25px;
    padding: 3px 11px;
}

.esri-feature-asset-details th {
    text-align: right;
    height: 32px;
    width: 200px;
}

.esri-feature-asset-details td {
    padding: 0 10px;
    word-break: break-word;
}

.esri-date-selector {
    display: flex;
}

.esri-date-selector .esri-date-icon {
    display: inline;
    width: 40px;
    padding: 8px;
}

.esri-date-selector input {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.ui-widget-content.no-border {
    border: 0px;
}


/*Google Street View Container - Start*/
.street-view-container {
    width: 100%;
}

    .street-view-container.visible {
        height: 40%;
    }

    .street-view-container.invisible {
        display: none;
    }
/*Google Street View Container - End*/

/*Google Street View - Start*/
.street-view {
    height: 100%;
    width: 100%;
}

    .street-view .main {
        height: 100%;
        width: 100%;
    }

    .street-view .unavailable {
        height: 100%;
        width: 100%;
        color: gray;
        background: lightgray;
        display: flex;
        justify-items: center;
        align-items: center;
    }

        .street-view .unavailable .contents {
            text-align: center;
            width: 100%;
        }


        .street-view .unavailable .icon {
            font-size: 128px;
        }


        .street-view .unavailable .message {
            font-size: 24px;
        }
/*Google Street View - End*/

/*Addin Configuration Page - Start*/
.modal-header.with-status {
    display: flex;
    align-items: center;
}

    .modal-header.with-status .status {
        margin-left: 5px;
        text-transform: uppercase;
    }
/*Addin Configuration Page - End*/


/*Swappable View - ABC - Start*/
.swappable-view.abc {
    width: 100%;
    height: 100%;
}

    .swappable-view.abc .swappable-subview {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .swappable-view.abc.toggle {
        cursor: pointer;
        display: inline-block;
        background: white;
        width: 20px;
        height: 20px;
    }
/*Swappable View - ABC - End*/


/*steven multiselect full container support - start*/
.multiSelect > button {
    width: 100%;
}

.leaflet-rrose-content-wrapper {
    min-width: 200px;
}
/*steven multiselect full container support - end*/

/*Layer Menu - Start*/
.layer-sub-menu {
    border-left: 1px solid lightgray;
    margin-left: 5px;
}

    .layer-sub-menu .property-label {
        margin-left: 10px;
        padding-left: 15px;
        text-indent: -15px;
    }

    .layer-sub-menu input[type="checkbox"].property-input,
    .layer-sub-menu input[type="radio"].property-input {
        position: relative;
        top: -3px;
        vertical-align: bottom;
    }
/*Layer Menu - End*/



.label-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}




/*Reference Item Data Objects Editor - Start*/
.reference-item-data-objects-editor {
    display: flex;
    flex-wrap: wrap;
}

    .reference-item-data-objects-editor button {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 12px;
    }

    .reference-item-data-objects-editor .add-button-container {
        margin: 0 10px 5px 0
    }

    .reference-item-data-objects-editor .links-container {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .reference-item-data-objects-editor .link-container {
        margin: 0 15px 5px 0;
    }

        .reference-item-data-objects-editor .link-container .link {
            display: flex;
            flex-direction: row;
            align-items: center
        }

            .reference-item-data-objects-editor .link-container .link input[type="checkbox"] {
                min-width: 20px;
                min-height: 20px;
                width: 20px;
                height: 20px;
                margin: 0 0 0 5px;
            }

            .reference-item-data-objects-editor .link-container .link .separator {
                /*font-weight: bold;*/
            }
/*Reference Item Data Objects Editor - End*/

.split-view-hidden {
    visibility: hidden;
}

/* Work Documents Modal View - Start */
div.work-documents-information div.documents {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.work-documents-information div.documents-select {
    flex-grow: 1;
    margin: 0 10px;
}
/* Work Documents Modal View - End */

/* Notes Editor - Start */
.notes-editor .notes-editor-grid {
    max-height: 300px;
}

.notes-editor .notes-input-block {
    margin-top: 20px;
    display: flex;
}

.notes-editor .action-container {
    margin-left: 15px;
    width: 100px
}

    .notes-editor .action-container button {
        width: 100%;
    }

        .notes-editor .action-container button:first-child {
            margin-bottom: 6px;
        }

.notes-editor textarea,
.full-note-textarea {
    resize: vertical;
    max-height: 300px;
}

.notes-grid-meta-data {
    text-align: center;
}

.notes-grid-btn-container {
    padding: 11px 7px;
}

.notes-grid-text {
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-grid-btn-container span {
    cursor: pointer;
    margin-right: 5px;
}

.notes-grid-btn-container .delete-note-btn {
    color: red;
}

.notes-modal-meta {
    margin: 0;
}

/* Notes Editor - End */

/* Asset Attributes Editor Directive - Start */

.asset-attribute-editor {
    clear: both;
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    max-height: 705px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    width: 100%;
}

    .asset-attribute-editor > table {
        padding: 15px;
        margin: 5px 0 5px 0;
        width: 100%;
    }

        .asset-attribute-editor > table > tbody {
            position: relative;
        }

        .asset-attribute-editor > table > tbody > tr > td {
            padding: 5px 15px 5px 15px;
            border: 0px;
        }

        .asset-attribute-editor > table tbody > tr > td:first-child {
            font-weight: bold;
        }

        .asset-attribute-editor > table > caption {
            font-weight: bold;
            caption-side: top;
            padding: 0px 5px 5px 15px;
            color: black;
        }

.asset-attribute-date-selector {
    display: flex;
}

    .asset-attribute-date-selector .date-icon {
        display: inline;
        width: 40px;
        padding: 8px;
    }

    .asset-attribute-date-selector input {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

.asset-attribute-editor span {
    display: inline-block;
}

.asset-attribute-editor .attribute-required::after {
    color: red;
    content: '*';
    font-weight: bolder;
    display: inline-block;
    width: 20px;
    margin-right: -20px;
}

/* Chrome, Safari, Edge, Opera */
.asset-attribute-editor input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.asset-attribute-editor input[type=number] {
    -moz-appearance: textfield;
}

/* Asset Attributes Editor Directive - End */

/* Register Asset Directive (Control) - Start */
.register-asset-control .asset-data-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

.register-asset-control .asset-data-label {
    width: 110px;
    text-align: left;
    padding-top: 0;
}

.register-asset-control .register-asset-item {
    display: block;
    width: 100%;
    margin-left: -15px;
}

.register-asset-control hr.asset-data-delimiter {
    display: block;
    height: 1px;
    width: 100%;
    border: 0;
    border-top: 1px solid lightgray;
    margin: 1em 1em;
}

.register-asset-control .register-asset-buttons {
    width: 200px;
}

.register-asset-control .register-asset-buttons button {
    width: 100%;
}

.register-asset-control .register-image-capture {
    max-width: 300px;
    min-width: 100px;
}

.register-asset-control textarea {
    resize: vertical;
}

.register-asset-control .register-image-container {
    align-self: center;
}

.register-asset-control .register-asset-core {
    display: flex;
}
/* Register Asset Directive (Control) - End */

/* Create Region Directive - Start */
#create-region-kcb-detail-view {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #B1D9B1;
    box-shadow: 0px 4px 4px rgba(0,0,0,.1);
    padding: 20px;
    margin: -20px -20px 20px -20px;
}

#create-region-kcb-detail-view h4 {
    margin: 0 auto 0 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8rem;
}
/* Create Region Directive - End */

/* Edit Region Directive - Start */
#edit-region-kcb-detail-view .edit-mode {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #F6DA82;
    box-shadow: 0px 4px 4px rgba(0,0,0,.1);
    padding: 20px;
    margin: -20px -20px 20px -20px;
}

#edit-region-kcb-detail-view .edit-mode h4 {
    margin: 0 auto 0 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8rem;
}

#edit-region-kcb-detail-view .align-right {
    text-align: right;
    padding-right: 0px;
}

.edit-region-kcb-detail-view-pin-to-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100
}
    /* Edit Region Directive - End */

/* UI Grid With Edit Directive - Start */
.ui-grid-cell .format-cell-style input {
    padding: 6px 12px;
    border-radius: 4px;
}

.ui-grid-cell .wo-checkbox input {
    margin: 3px;
}

.ui-grid-cell .format-cell-style {
    padding: 5px;
}

.ui-grid-cell .format-cell-style .delete-btn {
    padding: 6px 3px;
}
.ui-grid-cell .format-cell-style .edit-btn {
    padding: 6px 3px;
}

.ui-grid-cell .format-non-edit-cell-style {
    padding: 12px 5px 12px 5px;
}
/* UI Grid With Edit Directive - End */

/* Planned Work Template Conflicts UI Grid */
.planned-work-template-conflicts-grid {
    max-height: 145px;
    margin: 10px 0 20px 0;
}

.planned-work-template-conflicts-grid .status-row {
    text-align: center;
}

.planned-work-template-conflicts-grid .status-active {
    display: inline-block;
    color: green;
}

.planned-work-template-conflicts-grid .status-inactive {
    display: inline-block;
    color: red;
}

.copy-text i {
    visibility: hidden;
    cursor: pointer;
}

.copy-text:hover i {
    visibility: visible;
}

.copy-text .tooltip-inner {
    background-color: #337ab7;
    border-color: #2e6da4;
}

/* Add Assets From Map - Start */
.asset-from-map-loading {
    color: #067919;
}

.asset-from-map-no-fetch {
    color: #FF0000;
}

.asset-from-map-loading,
.asset-from-map-no-fetch {
    text-align: center;
    margin-bottom: 10px;
}

.asset-from-map-float-right {
    float: right;
}

.assets-selected-footer-text {
    float: left;
    font-weight: bolder;
    padding-top: 6px;
}

.assets-modal-map {
    width: 100%;
    height: 100%;
}

.assets-modal-grid {
    height: 300px
}
/* Add Assets From Map - End */

/* static form header - Create/Edit experience - start */
.control-header .form-columns-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

    .control-header .form-columns-row .form-column {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 10px;
    }

.control-header .form-group {
    margin-right: 0;
    margin-left: 0;
}


.control-header label {
    width: 160px;
    margin-right: 15px;
    padding-top: 0;
}

.control-header .form-columns-full-width {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.control-header textarea {
    width: 100%;
}

.control-header input, .control-header select {
    max-width: 300px;
    min-width: 180px;
}

.control-header .content-selector {
    position: relative;
}

    .control-header .content-selector .ui-select-container.ui-select-bootstrap {
        min-width: 10px !important;
    }

    .control-header .content-selector .delete-icon {
        right: 0;
    }

    .control-header .content-selector .upload-icon {
        right: 37px;
    }

.control-header kona-select {
    max-width: 300px;
    min-width: 180px;
    padding: 0;
}

.kona-control-width {
    max-width: 300px;
    min-width: 180px;
    padding: 0;
    width: 100%;
}

.control-header kona-select > div > span.multiSelect > button {
    min-height: 32px !important;
    height: 32px;
}
/* static form header - end*/
/* static form header - view only experience - start*/
.control-header .left-right {
    display: flex;
}

.control-header .align-right {
    text-align: right;
    flex-grow: 1;
    margin-left: 40px;
    margin-right: auto;
}

.control-header .align-left {
    text-align: right;
    margin-left: 0;
    margin-right: auto;
}

.control-header textarea {
    margin-left: 0;
    flex-grow: 1;
}

.control-header .description-container {
    display: flex;
}

    .control-header .description-container label {
        display: block;
    }

.control-header textarea {
    width: 100%;
}

/*static form header - view only experience - end*/

/* File To Blob Uploader - Start */
.file-to-blob-uploader .overflow-hidden-ellipsis-container {
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-to-blob-uploader .progress-bar-text {
    color: white;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(0,0,0,.75);
}

.file-to-blob-uploader .flex-center-parent {
    display: flex;
    align-items: center;
}

.file-to-blob-uploader .flex-child {
    flex: 1;
}

.file-to-blob-uploader .upload-info-text {
    font-size: 12px;
}

.file-to-blob-uploader .success-icon-float-right {
    margin-left: 10px;
    text-align: center;
}
/* File To Blob Uploader - End */

/* New Notification Modal AND Automated Notification Modal - Start */
.notification-modal .form-multiselect,
.notification-modal .form-input {
    margin-bottom: 10px;
}

.notification-modal .has-error > div > kona-select > div > span > button {
    border-color: #a94442;
}

.notification-modal .has-success > div > kona-select > div > span > button {
    border-color: #3c763d;
}

.notification-modal .has-error.validation-section {
    border: 1px solid #a94442;
    border-radius: 4px;
}

.notification-modal .has-success.validation-section {
    border: 1px solid #3c763d;
    border-radius: 4px;
}

.notification-modal .form-multiselect .control-label,
.notification-modal .form-input .control-label,
.notification-modal .form-checkbox .control-label {
    padding-right: 10px;
    padding-top: 0;
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.notification-modal .email-preview p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.notification-modal .email-preview {
    display: flex;
    justify-content: space-between;
}

    .notification-modal .email-preview div {
        align-self: flex-start;
    }

        .notification-modal .email-preview div button span {
            color: #2e6da4
        }

.notification-modal .form-section {
    padding: 5px;
}

@media (min-width:768px) {
    .notification-modal .form-multiselect,
    .notification-modal .form-input,
    .notification-modal .form-checkbox{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
}

.notification-modal .edit-notification-row {
    text-align: right;
}

.notification-modal .section-break {
    border-color: #e5e5e5
}

.notification-modal .measurement-value-container {
    display: table;
}

/* New Notification Modal AND Automated Notification Modal - End */

/* Email Profiles Configuration - Start */
.email-configuration-tab-content {
    font-size: 14px;
}

.email-configuration-editor {
    height: 250px;
}

.email-configuration-preview {
    all: unset;
}

.email-configuration-preview-text {
    margin-top: 7px;
}
/* Email Profiles Configuration - End */

/* Moment Time Picker Editor Directive - Start */

.date-selector-wrapper, .time-selector-wrapper {
    display: flex;
}

.date-selector-wrapper>span.input-group-addon, .time-selector-wrapper>span.input-group-addon {
    width: 41px;
}

.date-selector-wrapper .fa-fw,
.time-selector-wrapper .fa-fw {
    vertical-align: middle;
    width: auto;
}

.date-selector-wrapper .form-control,
.time-selector-wrapper .form-control,
.time-duration-wrapper .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 34px;
}

/* Moment Time Picker Editor Directive - End */

.modal-error-message {
    text-align: center;
    color: red;
    margin-bottom: 10px;
}

.modal-footer-label {
    margin-right: 10px;
}

/* WO Modal CSS - Start */
.spacing-bottom {
    margin-bottom: 10px;
}

.spacing-top {
    padding-top: 5px;
}
/* WO Modal CSS - End */

/* Full Screen Modal - Start */
span#maximize-icon {
    float: right;
    margin-top: 8px;
    cursor: pointer;
}

.modal-full-screen.modal-dialog {
    margin: 0;
    height: 100vh;
    width: 100vw;
}

.modal-full-screen .modal-content {
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.modal-full-screen .angular-leaflet-map {
    height: 80vh;
}
/* Full Screen Modal - End */

#parent-asset-input-container {
    padding-right: 15px;
    padding-left: 15px;
}

.success-count-indicator {
    background-color: #198a03;
    position: absolute;
}

.ui-grid-single-check-box-field input[type="checkbox"] {
    margin-top: 3px;
}

.leaflet-control.disabled #map-reset-filter-marker {
    pointer-events: auto;
    cursor: default;
}

.leaflet-control.disabled #map-reset-filter-marker:hover {
    background-color: #fff;
}

.leaflet-bar.disabled:hover {
    background-color: #fff;
}

.kona-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
    background-color: white;
    border-bottom: #8F8F8F solid 2px;
    min-height: 36px;
}

.kona-label {
    flex: 1;
    margin: 0;
}