/* try to style the default accordion layout */
#accordion .ui-accordion-content {
    width: 100% !important;
    background-color: #f3f3f3 !important;;
    color: #777 !important;;
    font-size: 10pt !important;;
    line-height: 16pt !important;;
}
#accordion .ui-accordion-content > * {
    margin: 0 !important;;
    padding: 20px !important;;
}
#accordion .ui-accordion-header {
    background-color: #ccc !important;;
    margin: 0px !important;;
}
#accordion .ui-accordion-header a {
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2) !important;;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2) !important;;
    border-right: 1px solid rgba(0, 0, 0, .2) !important;;
    border-left: 1px solid rgba(0, 0, 0, .2) !important;;
    border-bottom: 1px solid rgba(0, 0, 0, .2) !important;;
    border-top: 1px solid rgba(250, 250, 250, .2) !important;;
}

.btn.btn-square {
    border-radius: 0;
}

#search-assets {
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 10px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

.version {
    color: gray;
    padding-top: 15px;
    padding-right: 15px;
    font-style: italic;
    font-size: 12px;
}

.gd-container {
    z-index: 1000 !important;
}

.error-message {
    color: red;
    font-size: 14px;
    font-weight: bold;
}

.logo-container {
    display: block;
    margin: auto;
    max-width: 500px;
    height: 200px;
}

#loading {
    background-color: #333;
    opacity: 0.8;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url('_loader.gif');
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

#map-canvas {
    height: 100%;
    /* overflow: auto; */
}
#maps {
    height: 100%;
}
#page-wrapper {
    margin-top: -2px;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 200px;

}
.nav-scroll {
    overflow: auto;
}

.active {
    font-weight: bold;
    color: #555;
    background-color: #e7e7e7;
}

.beck-nav {
    /* padding-bottom: 18px; */
}

html, body, #wrapper, #page-wrapper {
    /* width: 100%; */
    height: 100%;
}

.distance-div {
    background: white;
    border-style: solid;
    border-width: 2px;
    text-align: center;
    height: 20px;
}
.distance-display {
    font-family: Arial,sans-serif;
    font-size: 12px;
    padding-left:  4px;
    padding-right: 4px;
    top: 26px;
}

.d-flex {
    display: flex;
    flex-flow: row wrap;
}
.d-flex > div {
    float: none;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

#filetree { min-width:319px; border-right:1px solid silver; overflow:auto; padding:0px 0; }
#data { }
#data textarea { margin:0; padding:0; height:100%; border:0; background:white; display:block; line-height:18px; resize:none; }
#data, #code { font: normal normal normal 12px/18px 'Consolas', monospace !important; }

#filetree .folder { background:url('/jstree/themes/default/file_sprite.png') right bottom no-repeat; }
#filetree .file { background:url('/jstree/themes/default/file_sprite.png') 0 0 no-repeat; }
#filetree .file-pdf { background-position: -36px 0 }
#filetree .file-as { background-position: -36px 0 }
#filetree .file-c { background-position: -72px -0px }
#filetree .file-iso, #filetree .file-mp4 { background-position: -108px -0px }
#filetree .file-htm, #filetree .file-html, #filetree .file-xml, #filetree .file-xsl { background-position: -126px -0px }
#filetree .file-cf { background-position: -162px -0px }
#filetree .file-cpp { background-position: -216px -0px }
#filetree .file-cs { background-position: -236px -0px }
#filetree .file-sql { background-position: -272px -0px }
#filetree .file-xls, #filetree .file-xlsx { background-position: -362px -0px }
#filetree .file-h { background-position: -488px -0px }
#filetree .file-crt, #filetree .file-pem, #filetree .file-cer { background-position: -452px -18px }
#filetree .file-php { background-position: -108px -18px }
#filetree .file-jpg, #filetree .file-jpeg, #filetree .file-png, #filetree .file-gif, #filetree .file-bmp, #filetree .file-JPG { background-position: -126px -18px }
#filetree .file-ppt, #filetree .file-pptx { background-position: -144px -18px }
#filetree .file-rb { background-position: -180px -18px }
#filetree .file-text, #filetree .file-txt, #filetree .file-md, #filetree .file-log, #filetree .file-htaccess { background-position: -254px -18px }
#filetree .file-doc, #filetree .file-docx { background-position: -362px -18px }
#filetree .file-zip, #filetree .file-gz, #filetree .file-tar, #filetree .file-rar { background-position: -416px -18px }
#filetree .file-js { background-position: -434px -18px }
#filetree .file-css { background-position: -144px -0px }
#filetree .file-fla { background-position: -398px -0px }


#internal-filetree { min-width:319px; border-right:1px solid silver; overflow:auto; padding:0px 0; }
#internal-data { }
#internal-data textarea { margin:0; padding:0; height:100%; border:0; background:white; display:block; line-height:18px; resize:none; }
#internal-data, #internal-code { font: normal normal normal 12px/18px 'Consolas', monospace !important; }

#internal-filetree .folder { background:url('/jstree/themes/default/file_sprite.png') right bottom no-repeat; }
#internal-filetree .file { background:url('/jstree/themes/default/file_sprite.png') 0 0 no-repeat; }
#internal-filetree .file-pdf { background-position: -36px 0 }
#internal-filetree .file-as { background-position: -36px 0 }
#internal-filetree .file-c { background-position: -72px -0px }
#internal-filetree .file-iso, #internal-filetree .file-mp4 { background-position: -108px -0px }
#internal-filetree .file-htm, #internal-filetree .file-html, #internal-filetree .file-xml, #internal-filetree .file-xsl { background-position: -126px -0px }
#internal-filetree .file-cf { background-position: -162px -0px }
#internal-filetree .file-cpp { background-position: -216px -0px }
#internal-filetree .file-cs { background-position: -236px -0px }
#internal-filetree .file-sql { background-position: -272px -0px }
#internal-filetree .file-xls, #internal-filetree .file-xlsx { background-position: -362px -0px }
#internal-filetree .file-h { background-position: -488px -0px }
#internal-filetree .file-crt, #internal-filetree .file-pem, #internal-filetree .file-cer { background-position: -452px -18px }
#internal-filetree .file-php { background-position: -108px -18px }
#internal-filetree .file-jpg, #internal-filetree .file-jpeg, #internal-filetree .file-png, #internal-filetree .file-gif, #internal-filetree .file-bmp, #internal-filetree .file-JPG { background-position: -126px -18px }
#internal-filetree .file-ppt, #internal-filetree .file-pptx { background-position: -144px -18px }
#internal-filetree .file-rb { background-position: -180px -18px }
#internal-filetree .file-text, #internal-filetree .file-txt, #internal-filetree .file-md, #internal-filetree .file-log, #internal-filetree .file-htaccess { background-position: -254px -18px }
#internal-filetree .file-doc, #internal-filetree .file-docx { background-position: -362px -18px }
#internal-filetree .file-zip, #internal-filetree .file-gz, #internal-filetree .file-tar, #internal-filetree .file-rar { background-position: -416px -18px }
#internal-filetree .file-js { background-position: -434px -18px }
#internal-filetree .file-css { background-position: -144px -0px }
#internal-filetree .file-fla { background-position: -398px -0px }

.no_checkbox > i.jstree-checkbox {
    display: none
}

.custom-menu, .route-custom-menu {
    display: none;
    z-index: 100000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
}

.custom-menu li, .route-custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
}

.custom-menu li:hover, .route-custom-menu li:hover {
    background-color: #DEF;
}

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid #999;
    padding: 0.5rem;
}

td.right {
    text-align: right;
}


.tabs {
    width: 1000px;
    white-space: nowrap;
    padding: 50px;
}
/*
.ui-tabs .ui-tabs-nav li {
    width: 49%;
    text-align: center;
}

.ui-tabs .ui-tabs-nav li a {
    display: inline-block;
    float: none;
    padding: 5px;
    text-decoration: none;
    width: 100%;
}
*/

.ui-dialog { overflow:visible; }
.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix { border:none }

.details-table .left { text-align: left; }
.details-table .right { text-align: right; }
.details-table td {
    border: none !important;
}

@media only screen and (max-width: 979px) {
    .routes {
        padding-top: 48px !important;
    }
}

/* don't show legends on mobile */
@media only screen and (max-width: 900px) {
    .hide-mobile {
        display: none !important;
    }

    /*
    #page-wrapper {
        margin-top: 44px;
        padding-bottom: 44px;
    }
    */
}
/*
@media screen and (max-height: 800px) {
    .hide-mobile {
        display: none !important;
    }
}
*/

@media only screen and (min-width: 0px) and (max-width: 768px) {
    /* As soon as we fall below the Ipad's width I use my 'mobile'
       design. So, everything in this query is meant for
       smartphones and other small screens. */
    .browser {
        margin-left: 0 !important;
    }

    .config-toggle, .config-route-toggle {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    /* As soon as we fall below the Ipad's width I use my 'mobile'
       design. So, everything in this query is meant for
       smartphones and other small screens. */
    .map, .routes {
        margin-left: -265px !important;
    }
}

@media only screen and (max-width: 378px) {
    #projects-table {
        padding-top: 125px !important;
    }
}

@media only screen and (max-width: 979px) and (min-width: 768px) {
    /* As soon as we fall below the Ipad's width I use my 'mobile'
       design. So, everything in this query is meant for
       smartphones and other small screens. */
    #projects-table {
        padding-top: 43px !important;
    }
}

@media only screen and (max-width: 696px) and (min-width: 378px) {
    #projects-table {
        padding-top: 50px !important;
    }

    .map, .routes {
        padding-top: 50px;
    }
}

.table-responive {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 3px;
    margin-left: 5px;
}

input[type=radio] {
    bottom: 2px;
}

.beck-form-field {
    padding: 10px;
}

.highlight {
    background-color: #9dfcfc !important;
    font-weight: bold;
}

.map-upload {
    display: none;
}

.maps-collapse a {
    text-decoration: none;
    padding: 10px;
}

.route-meta-content {
    background: beige;
    padding: 20px;
    opacity: 0.9;
    box-shadow: 5px 5px 10px #888888;
    /*
    max-width: 300px;
    */
    max-height: 800px;
    overflow-y: auto;
}

#map-legends {
    max-height: 800px;
    overflow-y: auto;
}

.progress {
    display: none;
}

.dismiss {
    cursor: pointer;
    width: 30px;
}

.marker-details {
    margin: 0;
}

.vertical {
    position: relative;
    background-color: #DDDDDD;
    padding: 10px;
    border-radius: 0 0 5px 5px;
    float: left;
    transform: rotateZ(90deg) rotateX(180deg) rotateY(-180deg) scale(-1, -1) translate3d(100%, 100%, 0);
    transform-origin: 100% 100%;
}

body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

.form-check-input {
    margin-left: 15px !important;
}

.bootstrap-datetimepicker-widget {
    z-index: 9999999 !important;
    overflow-x: visible !important;
}

.schedule {
    padding: 25px;
}

.event-tooltip {
    width: 150px;
    background: rgba(0, 0, 0, 0.85);
    color: #FFF;
    padding: 10px;
    position: absolute;
    z-index: 10001;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}

.control-label {
    padding-right: 10px;
}

.multiselect-container > li {
    white-space: normal !important;
    max-width: 250px;
}

.multiselect-container > li > a > label {
    white-space: normal !important;
}

/* Route list formatting */
.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

.rid, .mid {
    font-size: 8px;
    text-align: center;
}

.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.9em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    border: 1px solid silver;
    padding: 0.5em;
}

.highcharts-data-table tr:nth-child(even),
.highcharts-data-table thead tr {
    background: #f8f8f8;
}

.highcharts-data-table tr {
    cursor: pointer;
}

.highcharts-data-table tr:hover {
    background: #eff;
}

.highcharts-data-table caption {
    border-bottom: none;
    font-size: 1.1em;
    font-weight: bold;
}

.highcharts-sort-ascending::after {
    content: " ↓";
}

.highcharts-sort-descending::after {
    content: " ↑";
}