/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ebe9fb; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #c3bef4;
    border-radius: 10px; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #887de8;
}

.center {
    text-align: center;
}

textarea {
    resize: none;
}

input:focus, input:active, button:focus, button:active {
    outline: none!important;
}

.login-logo-container {
    text-align: center;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.login-logo-container img {
    height: 18vh;
}

.error-msg {
    color: #ff0000;
}

.sb-nav-link-icon svg {
    width: 20px;
    fill: #858796;
}

.nav-link:hover svg {
    fill: #fff;
}

.sb-sidenav-light .sb-sidenav-menu .nav-link.active .sb-nav-link-icon svg {
    fill: #fff;
}

#page-title {
    color: #fff;
    margin-left: 1vw;
}

main {
    margin-top: 3vh;
}

.action-buttons-container {
    padding: 1vh 1vw;
    margin-bottom: 3vh;
}

.form-footer {
    padding: 1vh 1vw;
    margin-top: 3vh;
}

.btn-tbl {
    border: none;
    background: #6154e1;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    margin-left: 0.3vw;
    margin-right: 0.3vw;
}

.btn-tbl:hover, .btn-filter:hover {
    background: #887de8;
}

.btn-tbl svg {
    fill: #fff;
    width: 15px;
}

.btn-action {
    color: #6154e1;
    background: none;
    border: solid 1px #6154e1;
    text-align: center;
    padding: 1vh 1vw;
    text-transform: uppercase;
    border-radius: 5vw;
    margin-right: 1vw;
}

.btn-maps {
    color: #6154e1;
    background: none;
    border: solid 1px #6154e1;
    text-align: center;
    padding: 1vh 1vw;
    text-transform: uppercase;
    border-radius: 5vw;
    margin-right: 1vw;
    width: 80%;
}

.btn-action:hover, .btn-maps:hover, .btn-form-add:hover {
    text-decoration: none;
    background: #6154e1!important;
    color: #fff!important;
}

.required-asterisk {
    color: #ff0000;
}

.success-msg-container {
    background: rgba(102, 255, 102, 0.3);
    /* border: solid 1px #ccffcc; */
    color: #009900;
    padding: 2vh 1vw;
    margin-bottom: 1vh;
    border-radius: 10px;
}

.success-msg-container p, .error-msg-container p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.error-msg-container {
    background: rgba(255, 128, 128, 0.3);
    /* border: solid 1px #ff0000; */
    color: #b30000;
    padding: 2vh 1vw;
    margin-bottom: 1vh;
    border-radius: 10px;
}

.map-container {
    display: flex;
    width: 100%;
}

#form-map {
    width: 80%;
    height: 85vh;
}

#map-controls {
    margin-left: 1%;
    width: 18%;
}

.map-field-button-set {
    display: flex;
    width: 100%;
}

.mfbs-field {
    width: 90%;
}

.mfbs-btn {
    width: 9.5%;
    margin-left: 0.5%;
}

.btn-field {
    background: #6154e1;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    border-radius: 5px;
    border: none;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    color: #fff;
}

.btn-field:hover, .btn-map-reset:hover {
    background: #887de8;
}

.btn-map-reset {
    background: #6154e1;
    margin-bottom: 1vh;
    color: #fff;
    border-radius: 5px;
    border: none;
}

.tbl-route-stops {
    width: 100%;
    border-collapse: collapse;
}

.tbl-route-stops th {
    background: #6154e1;
    color: #fff;
    text-align: center;
}

.tbl-route-stops td {
    padding-top: 1vh;
}

.nr-seq-col {
    width: 6%;
    padding-left: 0.5%;
    padding-right: 0.5%;
    text-align: center;
}

.nr-stop-col {
    width: 17%;
    padding-left: 0.5%;
    padding-right: 0.5%;
}

.nr-path-col {
    width: 57%;
    padding-left: 0.5%;
    padding-right: 0.5%;
}

.nr-path-col .mfbs-field {
    width: 80%;
}

.nr-path-col .mfbs-btn {
    width: 19.5%;
    margin-left: 0.5%;
}

.nr-duration-col {
    width: 16%;
    padding-left: 0.5%;
    padding-right: 0.5%;
}

.btn-form-add {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #6154e1;
    background: none;
    border: solid 1px #6154e1;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-top: 2vh;
    border-radius: 10px;
}

.edit-areas-container {
    margin-top: 3vh;
}

.edit-areas-container table {
    width: 100%;
}

.eac-col-field {
    width: 95%;
}

.view-map-container {
    width: 100%;
    display: flex;
}

#view-map, #tracking-map {
    height: 85vh;
    width: 79%;
    margin-right: 0.5%;
}

#view-bus-map, #view-truck-map {
    height: 85vh;
    width: 69%;
    margin-right: 0.5%;
}

#view-map-legend {
    width: 20%;
    margin-left: 0.5%;
    height: 85vh;
    overflow-y: scroll;
}

#view-bus-map-legend, #view-truck-map-legend {
    width: 30%;
    margin-left: 0.5%;
    height: 85vh;
    overflow-y: scroll;
}

#tracking-map-legend {
    width: 20%;
    margin-left: 0.5%;
    height: 85vh;
}

.horizontal-legend {
    margin-top: 2vh;
}

.legend-title {
    font-weight: 600;
}

.hlegend-list {
    width: 69%;
    margin-top: 1vh;
    display: flex;
}

.horizontal-legend table {
    width: 32%;
    margin-right: 1%;
}

.horizontal-legend table td {
    text-align: left;
}

.leg-icon-col {
    width: 15%;
}

.btn-view-map {
    display: flex;
    width: 90%;
    background: none;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-right: 2%;
    padding-left: 2%;
    border: none;
    border-radius: 10px;
    border: solid 1px rgba(255, 255, 255,0);
    text-align: left;
}

.btn-view-map:hover {
    border: solid 1px #6154e1;
}

.btn-view-map-desc {
    margin-left: 10px;
}

.vml-heading, .tml-heading {
    font-weight: 500;
    color: #6154e1;
    font-size: 1.8rem;
}

.route-color-icon {
    color: transparent;
}

.tracking-info {
    font-size: 1.2rem;
    font-weight: 600;
}

.container-heading {
    background: #6154e1;
    color: #fff;
}

.color-form-group {
    display: flex;
    width: 100%;
}

.color-form-group div {
    width: 33%;
}

.actions-col {
    width: 15%;
}

.leg-bvehicle-col {
    width: 40%;
}

.leg-bop-col {
    width: 30%;
    text-align: center;
}

.leg-emer-col {
    width: 30%;
    text-align: center;
}

.leg-tvehicle-col {
    width: 60%;
}

.leg-top-col {
    width: 40%;
    text-align: center;
}

.inactive-indicator {
    color: transparent;
    text-shadow: 0 0 0 #b8b8b8;
}

.active-indicator {
    color: transparent;
    text-shadow: 0 0 0 #00e600;
}

.calm-indicator {
    color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

.panic-indicator {
    color: transparent;
    text-shadow: 0 0 0 #e60000;
}

.filter-field {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    line-height: 1.5;
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.filter-field:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none!important;
}

.btn-filter {
    background: #6154e1;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    line-height: 1.5;
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
}

.filter-elements {
    text-align: right;
}