html, body {
    color: #505050;
}

.row {
    margin: 0;
    padding: 0;
}

a {
    color: #9bc33a;
}
a:hover {
    color: #9bc33a;
}

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.vcenter {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding: 0;
}

.stores {
    padding: 5px;
}

/**
    loader
 */
/*noinspection CssUnusedSymbol*/
.loader {
    border: 16px solid #dee2e6;
    border-radius: 50%;
    border-top: 16px solid #4cae4c;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;

    display: inline-block;
    margin-top: 20px;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/**
    menu
 */

.pane-list {    /*online*/
    overflow: scroll;
    /*height: -webkit-fill-available;*/
    position: fixed;
    top: 115px;
    left: 50px;
    width: 350px;
    bottom: 0;
}

.pane-list-title {
    overflow: hidden;
    position: fixed;
    left: 50px;
    top: 50px;
    width: 350px;
}

div#pane {
    position: fixed;
    left: 50px;
    top: 50px;
    bottom: 0;
    width: 350px;
    /*height: 100%;*/
    height: -webkit-fill-available;
    background: whitesmoke;
    transition: 0.5s;
}

.pane-details-list {    /*online*/
    overflow: scroll;
    /*height: -webkit-fill-available;*/
    position: fixed;
    top: 115px;
    left: 400px;
    width: 350px;
    bottom: 0;
    transition: 0.5s;
}

.pane-details-list-title {
    overflow: hidden;
    position: fixed;
    left: 400px;
    top: 50px;
    width: 350px;
    transition: 0.5s;
}

div#pane-details {
    position: fixed;
    left: 400px;
    top: 50px;
    bottom: 0;
    width: 350px;
    height: -webkit-fill-available;
    background: whitesmoke;
    transition: 0.5s;
}

div.huge-content {
    /*width: -webkit-calc(100% - 400px) !important;*/
    /*width: -moz-calc(100% - 400px) !important;*/
    /*width: calc(100% - 400px) !important;*/
}

div.huge-content-extra {
    /*width: -webkit-calc(100% - 50px) !important;*/
    /*width: -moz-calc(100% - 50px) !important;*/
    /*width: calc(100% - 50px) !important;*/
}

div.pane-details-huge {
    position: fixed;
    left: 400px;
    top: 115px;
    bottom: 0;
    overflow: scroll;
    transition: 0.5s;
}

div.pane-details-huge-title {
    overflow: hidden;
    position: fixed;
    left: 400px;
    top: 50px;
    transition: 0.5s;
}

/*.pane-list-vehicle-setting {    !*vehicle settings*!*/
    /*overflow: scroll;*/
    /*height: -webkit-fill-available;*/
    /*!*height: 100% !important;*!*/
    /*!*height: -webkit-calc(100% - 120px) !important;*!*/
    /*!*height: -moz-calc(100% - 120px) !important;*!*/
    /*!*height: calc(100% - 120px) !important;*!*/
/*}*/

/*.pane-list-poi {*/
    /*overflow: scroll;*/
    /*height: -webkit-fill-available;*/
    /*!*height: 100% !important;*!*/
    /*!*height: -webkit-calc(100% - 120px) !important;*!*/
    /*!*height: -moz-calc(100% - 120px) !important;*!*/
    /*!*height: calc(100% - 120px) !important;*!*/
/*}*/

/*.pane-list-contact {*/
    /*overflow: scroll;*/
    /*height: -webkit-fill-available;*/
    /*!*height: 100% !important;*!*/
    /*!*height: -webkit-calc(100% - 120px) !important;*!*/
    /*!*height: -moz-calc(100% - 120px) !important;*!*/
    /*!*height: calc(100% - 120px) !important;*!*/
/*}*/

/*.pane-list-messages {*/
    /*overflow: scroll;*/
    /*height: -webkit-fill-available;*/
    /*!*height: 100% !important;*!*/
    /*!*height: -webkit-calc(100% - 380px) !important;*!*/
    /*!*height: -moz-calc(100% - 380px) !important;*!*/
    /*!*height: calc(100% - 380px) !important;*!*/
/*}*/

/*.pane-data {*/
    /*overflow: scroll;*/
    /*height: -webkit-fill-available;*/
    /*!*height: 100% !important;*!*/
    /*!*height: -webkit-calc(100% - 65px) !important;*!*/
    /*!*height: -moz-calc(100% - 65px) !important;*!*/
    /*!*height: calc(100% - 65px) !important;*!*/
/*}*/

/*.pane-huge-list {*/
    /*overflow: scroll;*/
    /*height: -webkit-fill-available;*/
    /*!*height: 100% !important;*!*/
    /*!*height: -webkit-calc(100% - 70px) !important;*!*/
    /*!*height: -moz-calc(100% - 70px) !important;*!*/
    /*!*height: calc(100% - 70px) !important;*!*/
/*}*/

/*.boj-list {*/
    /*overflow: scroll;*/
    /*height: 100%;*/
    /*height: -webkit-calc(100% - 53px);*/
    /*height: -moz-calc(100% - 53px);*/
    /*height: calc(100% - 53px);*/
/*}*/

/*@media only screen and (max-width: 768px) {*/
    /*.boj-list {*/
        /*overflow: scroll;*/
        /*height: 100%;*/
        /*height: -webkit-calc(100% - 84px);*/
        /*height: -moz-calc(100% - 84px);*/
        /*height: calc(100% - 84px);*/
    /*}*/
/*}*/

.messages-textarea {
    margin-bottom: 10px;
    height: 150px;
}

@media only screen and (max-width: 768px) {
    .upper-brand {
        height: 80px !important;
    }

    .content {
        padding-top: 80px !important;
    }

    .messages-textarea {
        margin-bottom: 5px;
        height: 40px;
    }

}

.upper-brand {
    height: 50px; background: whitesmoke; position: fixed; top: 0;
}

div#side-menu {
    width: 50px;
    background: #505050;
    height: -webkit-fill-available;
    overflow: scroll;
    transition: 0.5s;
    position: fixed;
}

.content {
    background: #e5e5e5; padding-top: 50px;
}

img.site-logo {
    height: 35px;
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

span.site-title {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 5px;
    font-size: 20px;
    font-weight: bold;
}

button#logout {
    text-align: center;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    color: #505050;
    background: whitesmoke;
    padding-left: 10px;
    margin-left: 10px;
}

span.menu-icon {
    font-size: 22px;
    padding-top: 2px;
}

li.nav-item {
    text-align: center;
    height: 50px;
}

li.nav-item > a {
    color: ghostwhite;
    background-color: #505050;
}

li.nav-item > a:hover {
    background-color: #8d8b8b;
}

li.nav-item > a:active {
    background-color: #9bc33a;
}

li.nav-item > a.active {
    background-color: #9bc33a;
}

a.btn.btn-nav {
    border: none;
    width: 45px;
}

a.tabbed-link {
    background-color: white !important;
    color: #9bc33a !important;
}

a.tabbed-link.active {
    color: #fff !important;
    background-color: #9bc33a !important;
}

a.tabbed-link.disabled {
    color: #8d8b8b !important;
    cursor: not-allowed;
}

.btn-secondary-radio {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary-radio:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-secondary-radio:not(:disabled):not(.disabled).active, .btn-secondary-radio:not(:disabled):not(.disabled):active, .show>.btn-secondary-radio.dropdown-toggle {
    color: #fff;
    background-color: #9bc33a;
    border-color: #9bc33a;
}

div#main-content {
    padding-left: 400px;
    transition: 0.5s;
}

div.selected-menu-pane-title {
    background: gainsboro;
    padding: 10px 10px;
}

div.pane-title {
    padding: 5px 10px;
}

span.selected-menu-pane-title {
    text-transform: uppercase;
    padding: 10px 0px;
    font-weight: bold;
}

.vehicle-card {
    padding: 5px;
    border-bottom: 1px inset;
    background: white;
}
.vehicle-card.active {
    background: #9bc33a;
    color: white;
}

div.vehicle-online-details-button {
    color: gainsboro;
    border: 1px solid gainsboro;
    border-radius: 10px;
    height: 20px;
}

div.vehicle-online-details-button:hover {
    color: gainsboro;
    border: 2px outset gainsboro;
}

div.vehicle-online-details-button:active {
    color: gainsboro;
    border: 2px inset gainsboro;
}

div.vehicle-online-details-button.active {
    border: 2px inset;
    background: gainsboro;
    color: #505050;
}

/**
    map
 */

div#route-panel {
    width: 40%; !important;
    max-height: 65%;
    overflow: auto;
}

div.route {
    background-color: rgba(255,255,255,0.75) !important;
}

.auto-complete {
    width: 100%;
    font-size: small;
    padding: 5px;
}

.not-transparent {
    background-color: white;
}

.margin-row {
    /*margin: 2px;
    padding: 0px 5px 10px 0px;*/
    padding: 2px;
}

div#style-selector-control {
    padding-right: 10px;
    padding-top: 10px;
    font-size: small;
}

div#style-selector-control > select {
    background-color: white;
}

div.map-control-pane {
    background-color: white;
    border: 1px solid #505050;
    border-radius: 5px;

    margin-top: 5px;
    margin-right: 10px;

    text-align: center;
}

.map-control-icon {
    width: 45px;
    height: 45px;
}

.icon-holder{
}

.map-control-icon-inactive {
    color: lightgray;
}

.map-control-icon-active {
    color: #505050;
}

/**
    Book of journey
 */
.trip-card:hover > .boj-card, .trip-card.active > .boj-card {
    background: beige;
}

.boj-card {
    padding: 5px;
}

div.boj-label {
    font-size: small;
    margin: 0;
}
span.fa-boj {
    /*font-weight: 400;*/
    margin-left: 3px !important;
}
.boj-v-line {
    border-left: 3px solid #505050;
    height: 100%;
    color: #505050;
}
.boj-start {
    padding-bottom: 0 !important;
    border-top: 1px solid #505050;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-right: 1px solid #505050;
    border-left: 1px solid #505050;
    background: white;
}

.boj-slow, .boj-border, .boj-stop, .boj-poi, .boj-to_company, .boj-to_private {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-right: 1px solid #505050;
    border-left: 1px solid #505050;
    background: white;
}

.boj-close {
    padding-top: 0 !important;
    border-bottom: 1px solid #505050;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 1px solid #505050;
    border-left: 1px solid #505050;
    background: white;
    margin-bottom: 5px;
}

.radio-eut [type="radio"]:checked+label:after {
    border-color: #505050;
    background-color: #505050;
}
/*Gap*/

.radio-eut-gap [type="radio"].with-gap:checked+label:before {
    border-color: #505050;
}

.radio-eut-gap [type="radio"]:checked+label:after {
    border-color: #505050;
    background-color: #505050;
}

.padding-5px {
    padding: 5px;
}

.padding-10px {
    padding: 10px;
}

.group-header-check {
    margin: 5px;
}

/* */

div.hidden-block {
    visibility: hidden;
    width: 0;
    height: 0;
    padding: 0 !important;
    display: none;
}


span.dot {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    display: inline-block;

    margin-top: auto;
    margin-bottom: auto;
}

.is-invalid {
    border-color: #dc3545;
}

.invalid {
    color: #dc3545;
    font-weight: bold;
    text-align: left;
}

.color-picker {
    /*position: absolute;
    z-index: 1;
    background: whitesmoke;
    border-radius: 10px;*/
    display: none;
}

.btn-outline-success-with-bg {
    color: #28a745;
    background: white none;
    border-color: #28a745;
}

.btn-outline-success-with-bg:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

/**
    poi and area menu
 */

span.poi-and-area-label {
    padding-left: 15px;
}

.no-display {
    display: none;
}

.poi-and-area-action {
    height: 50px;
    padding: 5px;
}

.poi-and-area-action-holder {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
}

.poi-and-area-action-holder:hover {
    background-color: #28a745;
}

.poi-and-area-action-holder:active {
    background-color: #9bc33a;
}

.poi-and-area-action-holder.active {
    background-color: #9bc33a;
}

.description {
    padding: 10px;
    text-align: justify;
    margin-top: 15px;
    font-style: italic;
}

.selected-menu-pane-subtitle {
    padding: 10px;
    font-weight: bold;
    text-decoration: underline;
}

/*
messages
 */

.reply_mgs {
    background-color: #DAA520;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    color: black;
}

.out_msg {
    background-color: #2E8B57;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    color: black;
}

.pna_msg {
    background-color: #6B6BBB;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    color: black;

}

.marked-title {
    background-color: beige;
}

.eut-link {
    text-decoration: underline;
    padding: 15px;
    font-size: medium;
    cursor: pointer;
}

.settings-link {
    color: #9bc33a;
    cursor: pointer;
    padding: 15px;
}

.eut-input{
    margin-bottom: .5rem;
}

.eut-form-label {
    margin-bottom: 0;
}

.pointer {
    cursor: pointer;
}

.disabled {
    color: #cccccc;
}

.row-fix {
    margin: 0 !important;
}

.overflow-scroll {
    overflow: scroll;
}

.w-25-px {
    width: 25px;
    margin-bottom: 10px;
    margin-left: 7px;
}

.w-20-px {
    width: 20px;
    margin-bottom: 5px;
    margin-left: 7px;
}

.modem-2g {
    color: red;
    filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(137%) contrast(73%);
}

.modem-4g {
    color: #2E8B57;
}

.fuel {
    filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(70deg) brightness(137%) contrast(73%);
}

.no-fuel {
    filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(-21deg) brightness(400%) contrast(3%);
}

.percent-0 {
    /*red*/
    filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(4677%) hue-rotate(8deg) brightness(98%) contrast(110%);
}

.percent-15 {
    /*red*/
    filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(4677%) hue-rotate(8deg) brightness(98%) contrast(110%);
}

.percent-45 {
    /* orange */
    filter: brightness(0) saturate(100%) invert(49%) sepia(54%) saturate(1940%) hue-rotate(359deg) brightness(100%) contrast(106%);
}

.percent-65 {
    /*yellow green*/
    filter: brightness(0) saturate(100%) invert(99%) sepia(81%) saturate(966%) hue-rotate(1deg) brightness(93%) contrast(90%);
}

.percent-85 {
    /*light green*/
    filter: brightness(0) saturate(100%) invert(70%) sepia(96%) saturate(313%) hue-rotate(85deg) brightness(96%) contrast(92%);
}

.percent-100 {
    /*green*/
    filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(70deg) brightness(137%) contrast(73%);
}