@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

html {
    background: #f9fafc;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    width: 100%;
    font-family: 'Poppins', Arial, sans-serif;
}

a {
    text-decoration: none;
}

table,
th,
td {
    border: none;
}

th {
    font-weight: 500;
}

button:focus,
button:active {
    outline: none;
}

.empty-data-presentation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 50px;
}

.empty-data-presentation svg {
    float: left;
}

.empty-data-presentation__text {
    float: left;
    padding-left: 16px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 16px;
    color: #394357;
}

/* Loading spinner */
.loading-container {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-circle {
    position: absolute;
    top: 0;
    left: 0;
    border: 4px solid;
    border-color: #222065 #222065 #222065 transparent;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 10px;
    animation: pulse 1s infinite alternate, spin 2s linear infinite;
}

.loading-circle:before,
.loading-circle:after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    left: 4px;
}

.loading-circle:before {
    top: 4px;
}

.loading-circle:after {
    bottom: 4px;
}

@keyframes pulse {
    from {
        border-color: #222065 #222065 #222065 transparent;
    }

    to {
        border-color: #009997 #009997 #009997 transparent;
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.loading-svg {
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-left: 15px;
}

.loading-svg__top {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: top-animation;
    transform-origin: center;
    /* animation-timing-function: ease-in-out; */
}

.loading-svg__bottom {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: bottom-animation;
    transform-origin: center;
    animation-delay: 0.15s;
    /* animation-timing-function: ease-in-out; */
}

@keyframes top-animation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes bottom-animation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotateY(-360deg);
    }
}

.animate {
    animation: shimmer 2s infinite linear;
    /* background: linear-gradient(to right, rgba(239, 241, 243, 0.8) 4%, rgba(226, 226, 226, 0.8) 25%, rgba(239, 241, 243, 0.8) 36%); */
    background: linear-gradient(to right, rgba(239, 241, 243, 0.6) 4%, rgba(236, 236, 236, 0.6) 50%, rgba(239, 241, 243, 0.36) 100%);
    background-size: 320px 100%;
}

@keyframes shimmer {
    0% {
        background-position: -320px 0;
    }

    100% {
        background-position: 320px 0;
    }
}

/* ==========================================================================
   SIMPLE HELPER CLASSES 
   ========================================================================== */
.bg-is-green {
    background: #2caa58;
}

.bg-is-yellow {
    background: #f5c000;
}

.bg-is-orange {
    background: #ff8335;
}

.bg-is-red {
    background: #d0021b;
}

.bg-is-purple {
    background: #a07ad7;
}

.bg-is-pink {
    background: #b771a3;
}

.bg-is-gray {
    background: #e4e6ea;
}


.bg-is-mediumgray {
    background: #cecece;
}

.bg-is-darkgray {
    background: #919aa8;
}

.bg-is-bluegray {
    background: #54617a;
}

.bg-is-blue {
    background: #5c83cf;
}

.bg-is-greenblue {
    background: #009a98;
}

.bg-is-cyan {
    background: #5dc8d1;
}

.spinner-container .spinner.spinner--white {
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

/* ==========================================================================
   GENERAL BASE CLASSES 
   ========================================================================== */

/* Buttons
   ======================================= */

.btn {
    background: transparent;
    border-radius: 22.5px;
    border: 2px solid #54617a;
    color: #54617a;
    cursor: pointer;
    font-size: 15px;
    height: 36px;
    line-height: 32px;
    padding: 0 18px;
    font-weight: 700;
}

.btn .btn__icon {
    fill: #54617a;
}

.btn--aligncenter{
    text-align: center;
}

.btn:hover,
.btn:active {
    background: #54617a;
    border: 2px solid #54617a;
    color: #fff;
}

.btn:hover .btn__icon {
    fill: #fff;
}

.btn--greenblue {
    color: #009a98;
    border: 2px solid #009a98;
}

.btn--greenblue .btn__icon {
    fill: #009a98;
}

    .btn--greenblue:hover,
    .btn--greenblue:active {
        background: #009a98;
        border: 2px solid #009a98;
        color: #fff;
    }

.btn[disabled] {
    border: 2px solid rgb(148, 148, 148);
    color: rgb(148, 148, 148);
}

.btn[disabled]:hover,
.btn[disabled]:active {
    border: 2px solid rgb(148, 148, 148);
    color: rgb(148, 148, 148);
    cursor: initial;
    background: transparent;
}

.btn__icon-container {
    height: 32px;
    float: right;
    padding: 4px 0 4px 8px;
}

.btn[disabled] .btn__icon {
    fill: rgb(148, 148, 148);
}

.btn--yellow {
    background: #f5c000;
    border: 2px solid #f5c000;
    color: #2f3643;
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.162), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 1, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--yellow:hover,
.btn--yellow:hover,
.btn--yellow:active {
    background: #ffc700;
    border: 2px solid #ffc700;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.162), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    color: #222065;
}

.btn--red {
    background: #d0021b;
    border: 2px solid #d0021b;
    color: #fff;
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.162), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 1, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--red:hover,
.btn--red:hover,
.btn--red:active {
    background: #f0021f;
    border: 2px solid #f0021f;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.162), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    color: #fff;
}

.btn--blue {
    color: #3e64ad;
    border: 2px solid #3e64ad;
}

.btn--blue:hover,
.btn--blue:active {
    background: #3e64ad;
    border: 2px solid #3e64ad;
    color: #fff;
}

.btn__suffix-triangle {
    float: right;
    height: 12px;
    margin-top: 9px;
    margin-left: 12px;
    width: 6px;
}

.btn__suffix-triangle--down {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.btn__suffix-triangle--up {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

/* Button loading spinner */
.btn-loading__circle-container {
    display: none;
    width: 18px;
    height: 18px;
    margin: 6px 0 6px 9px;
    position: relative;
    float: right;
}

.btn-loading__circle {
    border: 2px solid;
    border-color: #222065 #222065 #222065 transparent;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: btn-pulse 1s infinite alternate, btn-spin 2s linear infinite;
}

.btn-loading-circle:before,
.btn-loading-circle:after {
    content: '';
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    left: 2px;
}

.btn-loading__circle:before {
    top: 2px;
}

.btn-loading__circle:after {
    bottom: 2px;
}

@keyframes btn-pulse {
    from {
        border-color: #222065 #222065 #222065 transparent;
    }

    to {
        border-color: #009997 #009997 #009997 transparent;
    }
}

@keyframes btn-spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Google Material UI style ripple effect on button click */
.ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

.ripple:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: 0.2;
    transition: 0s;
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal {
    background: #f9fafc;
    border-top: 3px solid #f9fafc;
    display: none;
    left: 250px;
    min-height: 400px;
    position: absolute;
    top: 0;
     width: 700px; 
    z-index: 300;
    min-width:320px;
}

@media screen and (max-width: 640px) {
    .modal {
        height: 100vh;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

.modal__head {
    background: #f9fafc;
    border-bottom: 2px solid #ebeff5;
    color: #000;
     float: left; 
    font-family: Poppins;
    font-size: 16px;
    height: 51px;
    line-height: 48px;
    padding: 0 20px;
    width: 100%;
}

.modal__head-left {
    float: left;
}

.modal__head-right {
    float: right;
    margin-right: -15px;
}

.modal__close-icon {
    cursor: pointer;
    fill: #54617a;
}

.modal__close-icon:hover,
.modal__close-icon:active {
    fill: #d0021b;
}

.modal__content {
    float: left;
    padding: 20px;
    width: 100%;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

@media screen and (max-width: 640px) {
    .modal__content {
        padding: 20px 0;
        max-height: calc(100vh - 51px);
    }
}

.modal__content-left {
     border: 1px solid gray; 
    float: left;
    margin-right: 20px;
    width: 320px;
    min-height: 300px;
}

@media screen and (max-width: 640px) {
    .modal__content-left {
        float: none;
        margin: 0 auto 20px auto;
    }
}

.modal__content-right {
     border: 1px solid gray; 
    float: left;
    width: 320px;
    min-height: 300px;
}

@media screen and (max-width: 640px) {
    .modal__content-right {
        float: none;
        margin: 0 auto;
    }
}

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

/* Dark overlay used with mobile sidebar, modals, popups */
.screen-dark-overlay {
    background: #000;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 210;
}

.modal-dark-overlay {
    background: #000;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 400;
}

/* ==========================================================================
   ALERT POPUP
   ========================================================================== */
.alert {
    background: #fff;
    display: none;
    left: 378px;
    position: absolute;
    top: 100px;
    width: 438px;
    z-index: 500;
}

@media screen and (max-width: 640px) {
    .alert {
        left: 0;
        width: calc(100% - 20px);
        margin: 0 10px;
    }
}

.alert__header {
    height: 46px;
    padding: 0 20px;
    line-height: 46px;
    font-size: 16px;
    font-weight: 400;
}

.alert__header-left {
    float: left;
}

.alert__header-right {
    float: right;
    height: 46px;
}

.alert__close-icon {
    display: none;
    margin: 9px -8px 0 0;
    cursor: pointer;
    fill: #54617a;
}

.alert__close-icon:hover,
.alert__close-icon:active {
    fill: #d0021b;
}

.alert__body {
    background: #f9fafc;
    width: 100%;
    float: left;
    border-top: 2px solid #e4e6ea;
    border-bottom: 2px solid #e4e6ea;
    min-height: 88px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

.alert__info {
    padding: 20px;
    line-height: 1.5em;
    font-weight: 300;
}

.alert__info p {
    font-size: 16px;
}

.alert__show-option {
    display: none;
}

.alert__footer {
    min-height: 76px;
    line-height: 76px;
    width: 100%;
    float: left;
    padding: 10px;
}

.alert__btn {
    margin-top: 10px;
    float: right;
    margin-left: 10px;
}

@media screen and (max-width: 640px) {
    .alert__btn {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   HELP
   ========================================================================== */
.help {
    background: #4970b9;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    color: #fff;
    left: 240px;
    max-height: 80vh;
    min-height: 600px;
    overflow-y: scroll;
    position: fixed;
    top: 50px;
    width: 320px;
    z-index: 666;
    display: none;
}

@media screen and (max-width: 640px) {
    .help {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        max-height: 100%;
    }
}

.help__head {
    color: #fff;
    float: left;
    font-family: Poppins;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    width: 100%;
}

@media screen and (max-width: 640px) {
    .help__head {
        font-size: 20px;
    }
}

.help__head-left {
    float: left;
}

.help__head-right {
    float: right;
    margin-right: -15px;
}

.help__close-icon {
    cursor: pointer;
    fill: #fff;
}

.help__close-icon:hover,
.help__close-icon:active {
    fill: #fe8896;
}

.help__section {
    display: block;
    width: 100%;
    float: left;
    padding: 10px 0;
}

.help__section-topic {
    color: #bdcdec;
    float: left;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 2px;
    padding-left: 15px;
    text-transform: uppercase;
    width: 100%;
}

.help__list {
    display: block;
    float: left;
    width: 100%;
}

.help__item {
    width: 100%;
    height: auto;
}

.help__item-btn {
    cursor: pointer;
    float: left;
    line-height: 32px;
    padding: 0 15px 0 15px;
    width: 100%;
}

.help__item-btn:hover,
.help__item-btn:active {
    background: #5781d2;
}

.help__item-btn--is-active {
    background: #5781d2;
}

.help__icon-container {
    float: left;
    height: 32px;
    line-height: 32px;
    position: relative;
    width: 25px;
}

.help__item-name {
    float: left;
    font-size: 15px;
    letter-spacing: -0.19px;
    line-height: 32px;
    padding: 0 8px;
}

.help__triangle-container {
    float: right;
}

.help__triangle--is-collapsed {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.help__triangle--is-expanded {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.help__item-content {
    box-shadow: 0 10px 10px -8px rgba(5, 50, 118, 0.25) inset, 0 -10px 10px -8px rgba(5, 50, 118, 0.25) inset;
    display: block;
    float: left;
    padding: 10px 15px;
    display: none;
}

.help__content-text {
    color: #fff;
    font-family: Arial, sans-serif;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
    background: #3e64ad;
    color: #ffffff;
    height: 100vh;
    position: fixed;
    width: 250px;
    z-index: 205;
    transition: 0.5s;
}

@media screen and (max-width: 640px) {
    .sidebar {
        display: none;
    }
}

/* Logo
   ======================================= */

.sidebar-logo {
    display: block;
    float: left;
    margin: 21px 0 24px 0;
    padding-left: 32px;
    width: 100%;
}

.sidebar-logo__img {
    display: block;
    width: 178px;
}

/* Sidebar navigation
   ======================================= */

.sidebar-nav {
    float: left;
    height: auto;
    width: 100%;
}

.sidebar-nav__section {
    float: left;
    height: auto;
    margin-bottom: 20px;
    width: 100%;
}

.sidebar-nav__topic {
    color: #bdcdec;
    display: block;
    float: left;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 2px;
    padding-left: 32px;
    text-transform: uppercase;
    width: 100%;
}

.sidbar-nav__list {
    display: block;
    float: left;
    width: 100%;
}

.sidebar-nav__dropdown-group {
    background: #4970b9;
    box-shadow: 0 10px 10px -8px rgba(5, 50, 118, 0.52) inset, 0 -10px 10px -8px rgba(5, 50, 118, 0.52) inset;
    display: block;
    float: left;
    padding: 10px 0;
}

.sidebar-nav__link {
    color: #fff;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.sidebar-nav__link:visited,
.sidebar-nav__link:active,
.sidebar-nav__link:hover {
    text-decoration: none;
    color: #fff;
}

.sidebar-nav__item {
    cursor: pointer;
    float: left;
    line-height: 32px;
    padding: 0 20px 0 32px;
    width: 100%;
}

.sidebar-nav__item:hover,
.sidebar-nav__item:active {
    background: #5781d2;
}

.sidebar-nav__item--active,
.sidebar-nav__item--is-dropdown.sidebar-nav__item--active {
    background: #5781d2;
}

.sidebar-nav__item--is-dropdown {
    background: #4970b9;
    display: none;
    float: left;
    padding-left: 42px;
}

.sidebar-nav__item--is-wide {
    padding-right: 0;
}

.sidebar-nav__text {
    float: left;
    font-size: 15px;
    letter-spacing: -0.19px;
    line-height: 32px;
    padding: 0 8px;
    white-space: nowrap
}

.sidebar-nav__icon-container {
    float: left;
    height: 32px;
    line-height: 32px;
    position: relative;
    width: 25px;
}

.sidebar-nav__triangle-container {
    float: right;
}

.sidebar-nav__triangle--is-collapsed {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.sidebar-nav__triangle--is-expanded {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

/* Vehicle search popup
   ======================================= */
.sidebar-vehicles {
    background: #4970b9;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.162), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    color: #fff;
    display: none;
    font-size: 13px;
    left: 240px;
    max-height: 80vh;
    overflow-y: scroll;
    min-height: 600px;
    position: fixed;
    top: 50px;
    z-index: 666;
    width: 340px;
}

.sidebar-vehicles__search-container {
    width: 100%;
    padding: 24px 20px 20px 20px;
}

.sidebar-vehicles__search-input {
    background-color: transparent;
    background-image: url('../media/icons/icon_search.png');
    background-position: 245px 13px;
    background-repeat: no-repeat;
    border: 1px solid #9da8be;
    color: #fff;
    float: none;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

.sidebar-vehicles__search-input:focus {
    border: 1px solid #bdcae5;
}

.sidebar-vehicles__link {
    color: #fff;
    font-size: 13px;
}

.sidebar-vehicles__list {
    height: auto;
    width: 100%;
}

.sidebar-vehicles__list-head {
    background: #5781d2;
    float: left;
    height: 40px;
    padding: 0 18px;
    width: 100%;
}

.sidebar-vehicles__head-cell {
    float: left;
    line-height: 40px;
    text-transform: uppercase;
    width: 33.33%;
    /* font-weight: 500; */
}

.sidebar-vehicles__list-item {
    border-bottom: 1px solid #9da8be;
    float: left;
    font-family: Arial, sans-serif;
    font-size: 13px;
    height: 40px;
    padding: 0 18px;
    width: 100%;
}

.sidebar-vehicles__list-item:hover,
.sidebar-vehicles__list-item:active {
    background: #f1f2f5;
    border-left: 5px solid #009a98;
    color: #54617a;
    cursor: pointer;
}

.sidebar-vehicles__list-item:hover .sidebar-vehicles__id,
.sidebar-vehicles__list-item:active .sidebar-vehicles__id {
    color: #009a98;
}

.sidebar-vehicles__list-item:hover .sidebar-vehicles__arrow,
.sidebar-vehicles__list-item:active .sidebar-vehicles__arrow {
    fill: #009a98;
}

.sidebar-vehicles__arrow {
    margin-left: 5px;
}

.sidebar-vehicles__item-cell {
    float: left;
    line-height: 40px;
    width: 33.33%;
}

.sidebar-vehicles__result-count {
    float: left;
    height: 35px;
    line-height: 35px;
    margin-top: -15px;
    text-align: center;
    width: 100%;
}

.sidebar-map {
    background: #4970b9;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: none;
    font-size: 13px;
    left: 240px;
    max-height: 700px;
    overflow-y: scroll;
    min-height: 600px;
    position: fixed;
    top: 50px;
    z-index: 219;
    width: 320px;
}

@media screen and (max-width: 640px) {
    .sidebar-map {
        top: 0;
        left: 0;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
    }
}

.sidebar-map__head {
    color: #fff;
    float: left;
    font-family: Poppins;
    font-size: 16px;
    height: 51px;
    line-height: 48px;
    padding: 0 20px;
    width: 100%;
}

.sidebar-map__head-left {
    float: left;
}

.sidebar-map__head-right {
    float: right;
    margin-right: -15px;
}

.sidebar-map__close-icon {
    cursor: pointer;
    display: none;
    fill: #fff;
}

@media screen and (max-width: 640px) {
    .sidebar-map__close-icon {
        display: inline-block;
    }
}

.sidebar-map__close-icon:hover,
.sidebar-map__close-icon:active {
    fill: #fe8896;
}

/* ==========================================================================
   SIDEBAR MOBILE
   ========================================================================== */

.sidebar-mobile {
    background: #3e64ad;
    color: #ffffff;
    display: block;
    height: 100%;
    left: -300px;
    -ms-overflow-style: none;
    opacity: 1;
    overflow-y: scroll;
    position: fixed;
    scrollbar-width: none;
    top: 0;
    transition: left 0.15s;
    width: 300px;
    z-index: 220;
}

.sidebar-mobile::-webkit-scrollbar {
    display: none;
}

@media screen and (min-width: 640px) {
    .sidebar-mobile {
        display: none;
    }

    .sidebar-mobile::-webkit-scrollbar {
        display: none;
    }
}

.sidebar-mobile-closed {
    left: -300px;
}

.sidebar-mobile--open {
    left: 0;
}

.sidebar-mobile-header {
    background: #2d539a;
    float: left;
    height: 92px;
    line-height: 92px;
    padding: 29px 35px;
    position: relative;
    width: 100%;
}

.sidebar-mobile-roles {
    width: 230px;
}

.sidebar-mobile-roles-btn__current {
    font-weight: 700;
}

.sidebar-mobile-roles__list-container {
    position: relative;
    width: 100%;
}

.sidebar-mobile-roles__list {
    border-radius: 6px;
    box-shadow: 0px 2px 10px rgba(60, 76, 105, 0.3);
    display: none;
    font-size: 13px;
    left: 0px;
    position: absolute;
    top: 4px;
    width: 100%;
    z-index: 10;
}

.sidebar-mobile-roles__list-item {
    background: #ffffff;
    border-bottom: 1px solid #eff3f9;
    color: #54617a;
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 46px;
    line-height: 46px;
    padding: 0 16px;
}

.sidebar-mobile-roles__list-item:first-child {
    border-radius: 6px 6px 0 0;
}

.sidebar-mobile-roles__list-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.sidebar-mobile-roles__list-item:hover,
.sidebar-mobile-roles__list-item:active {
    background: #f1f2f5;
}

.sidebar-mobile-roles__list-item--selected {
    color: #009a98;
}

.sidebar-mobile-roles__selected-icon {
    display: none;
    padding-left: 5px;
}

.sidebar-mobile-roles__selected-icon--visible {
    display: inline-block;
}

.sidebar-mobile-roles__img {
    display: inline-block;
    margin-bottom: 2px;
}

/* Mobile sidebar navigation */

.sidebar-mobile-nav {
    float: left;
    height: auto;
    width: 100%;
}

.sidebar-mobile-nav__login-btn {
    margin: 0 auto;
    text-align: center;
    width: 150px;
}

.sidebar-mobile-nav__section {
    border-bottom: 1px solid #5d85d1;
    float: left;
    height: auto;
    margin-bottom: 12px;
    padding-bottom: 12px;
    width: 100%;
}

.sidebar-mobile-nav__section:first-of-type {
    margin-top: 12px;
}

.sidbar-mobile-nav__list {
    display: block;
    float: left;
    width: 100%;
}

.sidebar-mobile-nav__dropdown-group {
    background: #4970b9;
    box-shadow: 0 10px 10px -8px rgba(5, 50, 118, 0.52) inset, 0 -10px 10px -8px rgba(5, 50, 118, 0.52) inset;
    display: block;
    float: left;
    padding: 10px 0;
}

.sidebar-mobile-nav__link {
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: #fff;
}

.sidebar-mobile-nav__item {
    cursor: pointer;
    float: left;
    height: 51px;
    line-height: 51px;
    padding: 0 41px 0 41px;
    width: 100%;
}

.sidebar-mobile-nav__item:hover,
.sidebar-mobile-nav__item:active {
    background: #5781d2;
}

.sidebar-mobile-nav__item--is-dropdown {
    background: #4970b9;
    display: none;
    float: left;
    padding-left: 58px;
}

.sidebar-mobile-nav__item--active,
.sidebar-nav__item--is-dropdown.sidebar-nav__item--active {
    background: #5781d2;
}

.sidebar-mobile-nav__item--is-wide {
    padding-right: 0;
}

.sidebar-mobile-nav__text {
    float: left;
    font-size: 17px;
    letter-spacing: -0.19px;
    line-height: 51px;
    padding: 0 8px;
}

.sidebar-mobile-nav__icon-container {
    float: left;
    height: 51px;
    line-height: 51px;
    padding-top: 10px;
    position: relative;
    width: 25px;
}

.sidebar-mobile-nav__icon-svg {
    fill: yellow;
}

.sidebar-mobile-nav__triangle-container {
    float: right;
}

.sidebar-mobile-nav__triangle--is-collapsed {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.sidebar-mobile-nav__triangle--is-expanded {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.sidebar-mobile-logo {
    float: left;
    padding: 5px 0 0 41px;
}

.mobile-vehicles {
    background: #4970b9;
    border-top: 3px solid transparent;
    display: none;
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 219;
}

.mobile-vehicles__head {
    color: #fff;
    float: left;
    font-family: Poppins;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    width: 100%;
}

.mobile-vehicles__head-left {
    float: left;
}

.mobile-vehicles__head-right {
    float: right;
    margin-right: -15px;
}

.mobile-vehicles__search-input {
    background-color: transparent;
    background-image: url('../media/icons/icon_search.png');
    background-position: calc(100% - 15px) 13px;
    background-repeat: no-repeat;
    border: 1px solid #9da8be;
    color: #fff;
    display: block;
    float: left;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    margin: 0 15px;
    padding: 0 15px;
    width: calc(100% - 30px);
}

.mobile-vehicles__search-input:focus {
    border: 1px solid #bdcae5;
}

.mobile-vehicles__close-icon {
    cursor: pointer;
    fill: #fff;
}

.mobile-vehicles__close-icon:hover,
.mobile-vehicles__close-icon:active {
    fill: #fe8896;
}

.mobile-vehicles__content {
    color: #fff;
    float: left;
    padding: 20px 0;
    width: 100%;
}

.mobile-vehicles__list-items {
    float: left;
    height: calc(100vh - 170px);
    overflow-y: scroll;
    width: 100%;
}

.mobile-vehicles__link {
    color: #fff;
    font-size: 13px;
}

.mobile-vehicles__list {
    height: auto;
    width: 100%;
}

.mobile-vehicles__list-head {
    background: #5781d2;
    border-left: 5px solid transparent;
    float: left;
    height: 40px;
    padding: 0 18px;
    width: 100%;
}

.mobile-vehicles__head-cell {
    float: left;
    line-height: 40px;
    text-transform: uppercase;
    width: 33.33%;
    /* font-weight: 500; */
}

.mobile-vehicles__list-item {
    border-bottom: 1px solid #9da8be;
    border-left: 5px solid transparent;
    float: left;
    font-family: Arial, sans-serif;
    font-size: 15px;
    height: 40px;
    padding: 0 18px;
    width: 100%;
}

.mobile-vehicles__list-item:hover,
.mobile-vehicles__list-item:active {
    background: #f1f2f5;
    border-left: 5px solid #009a98;
    color: #54617a;
    cursor: pointer;
}

.mobile-vehicles__list-item:hover .mobile-vehicles__id,
.mobile-vehicles__list-item:active .mobile-vehicles__id {
    color: #009a98;
}

.mobile-vehicles__list-item:hover .mobile-vehicles__arrow,
.mobile-vehicles__list-item:active .mobile-vehicles__arrow {
    fill: #009a98;
}

.mobile-vehicles__arrow {
    margin-left: 5px;
}

.mobile-vehicles__item-cell {
    float: left;
    line-height: 40px;
    width: 33.33%;
}

.mobile-vehicles__result-count {
    float: left;
    font-family: Arial, sans-serif;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    margin-top: -15px;
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   MAIN (containing topbar and content)
   ========================================================================== */
.main {
    background: #f9fafc;
    float: left;
    padding-left: 250px;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 640px) {
    .main {
        padding-left: 0;
        padding-top: 61px;
    }
}

/* ==========================================================================
   TOPBAR CONTAINER
   ========================================================================== */

.topbar {
    background: #f2f3f6;
    border-bottom: 1px solid #eaeaea;
    float: left;
    height: 63px;
    left: 250px;
    position: fixed;
    top: 0;
    width: calc(100% - 250px);
    z-index: 200;
}

@media screen and (max-width: 640px) {
    .topbar {
        border-bottom: 1px solid #eaeaea;
        left: 0;
        position: fixed;
        top: 0;
        transition: top 0.25s;
        width: 100%;
    }
}

/* Topbar left section   
   ======================================= */

.topbar-left {
    float: left;
}

@media screen and (max-width: 640px) {
    .topbar-left {
        width: 65px;
    }
}

/* Datetime */

.topbar-datetime {
    float: left;
    font-size: 14px;
    line-height: 63px;
    margin-left: 58px;
}

.topbar-datetime__date-icon {
    margin-bottom: -1px;
    margin-right: 2px;
    opacity: 0.7;
}

.topbar-datetime__time-icon {
    margin-bottom: -1px;
    margin-left: 5px;
    opacity: 0.9;
}

.topbar-datetime__time {
    margin-left: 2px;
}

@media screen and (max-width: 640px) {
    .topbar-datetime {
        display: none;
    }
}

/* Mobile menu button */

.topbar-mobile-menu {
    display: none;
    float: left;
    height: 63px;
    line-height: 63px;
    margin-left: 18px;
    padding-top: 8px;
}

@media screen and (max-width: 640px) {
    .topbar-mobile-menu {
        display: block;
    }
}

.topbar-mobile-menu__icon {
    cursor: pointer;
}

.topbar-mobile-menu__icon:hover,
.topbar-mobile-menu__icon:active {
    fill: #009a98;
}

/* Topbar center section   
   ======================================= */
.topbar-center {
    display: none;
    float: left;
    width: calc(100% - 170px);
}

@media screen and (max-width: 640px) {
    .topbar-center {
        display: block;
        text-align: center;
        width: calc(100% - 130px);
    }
}

/* Mobile logo */
.topbar-mobile-logo {
    display: none;
    margin: 0;
    width: 100%;
}

@media screen and (max-width: 640px) {
    .topbar-mobile-logo {
        display: block;
    }
}

.topbar-mobile-logo__img {
    /*margin-left: calc(50% - 89px);*/
    width: 220px;
    margin-top: 21px;
}

@media screen and (max-width: 400px) {
    .topbar-mobile-logo__img {
        /*height: 21px;*/
        /*margin-left: calc(50% - 75px);*/
        width: 200px;
    }
}

/* Topbar right section   
   ======================================= */
.topbar-right {
    float: right;
}

@media screen and (max-width: 640px) {
    .topbar-right {
        width: 65px;
    }
}

/* Roles in topbar + roles list in mobile menu */
.topbar-roles {
    float: right;
    height: 63px;
    padding-bottom: 14px;
    padding-right: 30px;
    padding-top: 13px;
    position: relative;
}

@media screen and (max-width: 640px) {
    .topbar-roles {
        display: none;
    }
}

.roles-btn {
    min-width: 150px;
}

.roles-btn__current {
    font-weight: 700;
}

.roles-list-container {
    position: relative;
    width: 100%;
}

.roles-list {
    border-radius: 6px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.162), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    display: none;
    font-size: 13px;
    left: 0px;
    position: absolute;
    top: 4px;
    width: 100%;
    z-index: 10;
}

.roles-list__item {
    background: #ffffff;
    border-bottom: 1px solid #eff3f9;
    color: #54617a;
    cursor: pointer;
    display: block;
    height: 46px;
    line-height: 46px;
    padding: 0 16px;
}

.roles-list__item:first-child {
    border-radius: 6px 6px 0 0;
}

.roles-list__item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.roles-list__item:hover,
.roles-list__item:active {
    background: #f1f2f5;
}

.roles-list__item--selected {
    color: #009a98;
}

.roles-list__selected-icon {
    display: none;
    padding-left: 5px;
}

.roles-list__selected-icon--visible {
    display: inline-block;
}

.roles-list__item-img {
    display: inline-block;
    margin-bottom: 2px;
}

/* Demo login popup */
.topbar-login {
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 2px 10px rgba(60, 76, 105, 0.3);
    display: none;
    font-size: 13px;
    right: 0px;
    position: absolute;
    top: 53px;
    width: 250px;
    z-index: 10;
}

.mobile-login {
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 2px 10px rgba(60, 76, 105, 0.3);
    display: none;
    font-size: 13px;
    left: 35px;
    position: absolute;
    top: 75px;
    width: 230px;
    z-index: 10;
}

.login-form {
    padding: 15px;
}

.login-form__label {
    padding-bottom: 5px;
    width: 100%;
    float: left;
    font-size: 12px;
}

.login-form__input-email {
    margin-bottom: 10px;
}

.login-form__input-password {
    margin-bottom: 15px;
}

.login-form__submit {
    float: right;
    margin-bottom: 15px;
}

.login-form__feedback {
    width: 100%;
    float: left;
    color: #d00216;
    font-size: 12px;
    margin-bottom: 10px;
}

/* Notifications */
.topbar-notifications {
    display: none;
    float: right;
    padding-right: 30px;
    padding-top: 18px;
}

@media screen and (max-width: 640px) {
    .topbar-notifications {
        padding-right: 14px;
    }
}

.topbar-notifications__svg {
    cursor: pointer;
}

.topbar-notifications__svg:hover,
.topbar-notifications__svg:active {
    fill: #009a98;
}

.topbar-notifications__circle {
    fill: #d00216;
    opacity: 0;
}

.topbar-notifications__circle--has-notifications {
    opacity: 1;
}

/* .notification-list { */
/*     width: 320px; */
/*     position: absolute; */
/*     right: 100px; */
/*     top: 54px; */
/*     padding: 0; */
/* } */
/* */
/* .notification { */
/*     padding: 20px 25px; */
/*     width: 100%; */
/*     float: left; */
/*     border-radius: 3px; */
/*     font-family: Arial, sans-serif; */
/*     font-size: 15px; */
/*     box-shadow: 0px 2px 10px rgba(60, 76, 105, 0.3); */
/*     margin-bottom: 8px; */
/* } */

/* User */
.topbar-user {
    float: right;
    padding-right: 56px;
    padding-top: 18px;
    position: relative;
}

.topbar-user__link {
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: #fff;
}

@media screen and (max-width: 640px) {
    .topbar-user {
        padding-right: 18px;
    }
}

.topbar-user__svg {
    cursor: pointer;
}

.topbar-user__svg:hover,
.topbar-user__svg:active {
    fill: #009a98;
}

.topbar-user__svg--active {
    fill: #009190;
}

.topbar-user__list {
    border-radius: 6px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.162), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    display: none;
    font-size: 13px;
    position: absolute;
    right: 10px;
    top: 51px;
    width: 200px;
    z-index: 10;
}

@media screen and (max-width: 640px) {
    .topbar-user__list {
        font-size: 16px;
    }
}

.topbar-user__list-item {
    background: #ffffff;
    border-bottom: 1px solid #eff3f9;
    color: #54617a;
    cursor: pointer;
    display: block;
    height: 46px;
    line-height: 46px;
    padding: 0 16px;
}

.topbar-user__list .topbar-user__link:first-of-type .topbar-user__list-item {
    border-radius: 6px 6px 0 0;
}

.topbar-user__list .topbar-user__link:last-of-type .topbar-user__list-item {
    border-radius: 0 0 6px 6px;
    border-bottom: none;
}

.topbar-user__list-item:hover,
.topbar-user__list-item:active {
    background: #f1f2f5;
}

/* ==========================================================================
   CONTENT CONTAINER
   ========================================================================== */
.content {
    float: left;
    margin-top: 100px;
    max-width: 1200px;
    min-width: 1200px;
    padding: 0 0 0 58px;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 640px) {
    .content {
        margin-top: 0;
        min-width: 320px;
        padding-left: 0;
        padding-top: 27px;
    }
}

.content-wrapper {
    max-width: 1200px;
    min-width: 1200px;
}

@media screen and (max-width: 640px) {
    .content-wrapper {
        max-width: 100%;
        min-width: 320px;
        width: 100%;
    }
}

.page-header {
    width: 100%;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 26px;
    font-weight: 300;
    margin: 0 0 20px 0;
}

@media screen and (max-width: 640px) {
    .page-header {
        width: 320px;
        margin: 0 auto 20px auto;
    }
}

.page-h2 {
    font-size: 16px;
    font-weight: 300;
    margin: 14px 0;
}

@media screen and (max-width: 640px) {
    .page-h2 {
        width: 320px;
        margin: 14px auto;
    }
}

.page-description {
    margin: 0 0 20px 0;
    line-height: 28px;
}

@media screen and (max-width: 640px) {
    .page-description {
        margin: 0 auto 20px auto;
        width: 320px;
    }
}

/* ==========================================================================
   FORM STYLES
   ========================================================================== */

input,
select {
    height: 42px;
    /*line-height: 42px;*/
    /* width: 100%; */
    border: 1px solid #e4e6ea;
    padding-left: 12px;
    padding-right: 12px;
    color: #394357;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    box-sizing: border-box;
    
    font-weight: 400;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 15px;
}

    input[type="password"], input[type="text"] {
        cursor: text;
    }

textarea, select {
    cursor: initial;
}

input::-ms-clear {
    display: none;
}

select::-ms-expand {
    display: none;
}

/*select {*/
/*    background-image: linear-gradient(45deg, transparent 50%, gray 50%),*/
/*    linear-gradient(135deg, gray 50%, transparent 50%),*/
/*    linear-gradient(to right, #ccc, #ccc);*/
/*    background-position: calc(100% - 15px) calc(1em + 2px),*/
/*    calc(100% - 10px) calc(1em + 2px),*/
/*    calc(100% - 2.1em) 0.5em;*/
/*    background-size: 5px 5px,*/
/*    5px 5px,*/
/*    1px 1.5em;*/
/*    background-repeat: no-repeat;*/
/*    padding-right: 33px;*/
/*    min-width: unset;*/
/*}*/

textarea {
    padding: 6px 12px;
}

input[disabled],
select[disabled] {
    background-color: #fbfbfb;
    color: #676767;
}

input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
   outline: 2px solid #00b3b0; 
}

input.error:focus:not(:focus-visible),
textarea.error:focus:not(:focus-visible),
select.error:focus:not(:focus-visible) {
    outline: 2px solid #d0021b;
}

input:focus:focus-visible,
textarea:focus:focus-visible,
select:focus:focus-visible {
    outline: 2px solid #00b3b0;
}

input.error:focus:focus-visible,
textarea.error:focus:focus-visible,
select.error:focus:focus-visible {
    outline: 2px solid #d0021b;
}

select {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAICAYAAAAiJnXPAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACxSURBVHgBjZAxCsJQDIaTp+DqAdycBTs4uBU8QSfBrScQj9DNUS8h1skLPPomLbi8wd0OHsDV4TW+oIUnBvUfEpI/HyHB8WS6AoA5/K81cvRg4VP8axqB7EHvIsUFOUyBoPpKeL92KnnCL43i2bCtXOE7XQG4UY1RabYVl6rpn8zGEuBC3KIgawBWK/Sul7Pt9QeIwX1EmJU6X8LbbYKCx+yPOk8+FwvquDsPGp9TyX8A90Y2lzzKa5MAAAAASUVORK5CYII=');
    background-size: 13px 8px;
    padding-right: 33px;
    background-position: calc(100% - 15px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px), calc(100% - 2.1em) 0.5em;
    background-repeat: no-repeat;
    min-width: 69px;
}

select optgroup {
    font-style: normal;
    font-weight: 700;
}

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

.form label.error {
    font-size: 14px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    color: #d0021b;
    display: inline-block;
    padding-top: 8px;
}

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

.form__section--width-third {
    width: 33.33%;
    padding-right: 23px;
}

.form__section--width-two-thirds {
    width: 66.66%;
    padding-right: 23px;
}

.form__section.form__section--width-third:last-child {
    padding-right: 0;
}

@media screen and (max-width: 640px) {
    .form__section--width-third,
    .form__section--width-two-thirds {
        width: 100%;
    }

    .form__section {
        padding-right: 16px;
    }

}

.form__error, .form__error p {
    color: #d0021b;
    font-size: 14px;
    margin: 8px 0;
    line-height: 16px;
}

.form__input-label {
    color: #394357;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 15px;
    /*text-transform: uppercase;*/
    height: 28px;
    line-height: 26px;
    display: block;
}

.form__input-group {
    float: left;
    width: 100%;
    padding-bottom: 14px;
    position: relative;
}

.form__input-group .btn {
    margin-top: 30px;
    float :right;
}

.form__input-group--inline {
    width: auto;
    padding-right: 20px;
}
.form__input-group--inline:last-child {
    padding-right: 0;
}
.form__input-group--inline .btn {
    margin-top: 3px;
    float : left;
}

.form__input-date {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAWlBMVEUAAABQYHBQYIBQYHhVYHpUYHhTYHlSYHhSYHpVYHpUYHlUYHtUYnpUYHhUYHpVYHpTYHlVYnlVYnpUYHhUYXlUYXtUYXpUYXtTYXpVYXlVYXpUYXpUYXtUYXpPBVTuAAAAHXRSTlMAEBAgMEBQYGBgcHB/gICfoK+vsL+/z8/f39/v7/JHNFMAAACCSURBVHjajc8DFsRAEATQ2Lbq/tfcxirOD6beuA0RI9IQSvhokWso0GpwMzKgy0SHkRvbwJGauudh4J+YOcxoqTvY7p19uqvjbr/3tNvh8OneeNSdgE3mpruCsDfdlsuc+71Nm5jbbnsBizbdLkS63cSWwx6VU2YbDXcfoO6sPRC8ABUSGDmcZJ3DAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position-x: calc(100% - 12px);
    background-position-y: 50%;
    width: 280px;
}

.form__checkbox {
    color: #394357;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 16px;
    height: 42px;
    z-index: 10;
    position: relative;
}

.form__checkbox-label {
    height: 42px;
    line-height: 43px;
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 35px;
}

.form__checkbox-label:hover {
    color: #009a98;
}

input[type='checkbox'] {
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #aaa;
    width: 22px;
    height: 22px;
    padding: 2px;
    top: 10px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    line-height: 22px;
    cursor: pointer;
    margin: 0;
    min-width: 0;
}

input[type='checkbox']:hover,
input[type='checkbox']:active:hover,
input[type='checkbox']:focus:hover {
    border: 2px solid #009a98;
}

input[type='checkbox']:active,
input[type='checkbox']:focus {
    border: 2px solid #aaa;
    box-shadow: none;
    outline: none;
}

input[type='checkbox']:checked {
    background-color: #fff;
    border: 2px solid #009a98;
    color: #009a98;
}

/*        input[type=checkbox]:checked ~ label {
            color: #009a98;
        }*/

input[type='checkbox']:checked:after {
    content: '\2714';
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: -1px;
    left: 1px;
    color: #009a98;
}

.form__input-group.form__radio {
    color: #394357;
    position: relative;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 16px;
    height: 35px;
    cursor: pointer;
    padding: 0;
    width: auto;
    padding-right: 20px;
}

@media screen and (max-width: 640px) {
    .form__input-group.form__radio {
        width: 100%;
        padding-right: 0;
        margin-bottom: 5px;
    }
}

.form__radio input[type='radio'] {
    position: absolute;
    display: none;
}

.form__radio:hover label {
    color: #009a98;
}

.radio__label {
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    width: 100%;
    height: 100%;
    display: block;
    padding-left: 35px;
    z-index: 10;
    position: relative;
}

.form__radio input[type='radio']:disabled ~ .radio__label {
    color: #8f8f8f;
}

.form__radio:hover input[type='radio']:disabled ~ .radio__label {
    color: #8f8f8f;
}

.radio__check {
    display: block;
    position: absolute;
    border: 2px solid #aaaaaa;
    border-radius: 100%;
    height: 22px;
    width: 22px;
    top: 6px;
    left: 0;
}

.form__radio:hover .radio__check {
    border: 2px solid #009a98;
}

.form__radio:hover input[type='radio']:disabled ~ .radio__check {
    border: 2px solid #aaaaaa;
}

.radio__check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 4px;
    left: 4px;
    margin: auto;
}

input[type='radio']:checked ~ .radio__check {
    border: 2px solid #009a98;
}

input[type='radio']:disabled:checked ~ .radio__check {
    border: 2px solid #aaaaaa;
}

input[type='radio']:checked ~ .radio__check::before {
    background: #009a98;
}

input[type='radio']:disabled:checked ~ .radio__check::before {
    background: #aaaaaa;
}

input[type='radio']:checked ~ label {
    color: #009a98;
}

.number-input-wrapper {
    position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    text-align: center;
    padding: 0 40px;
}

input[type=number]:invalid {
    outline: 2px solid #d0021b;
}

.number-nav {
    /*position: relative;*/
    height: 42px;
    width: 0;
}

.number-nav--right {
    float: right;
}

.number-nav--left {
    float: left;
}

.number-button {
    position: relative;
    cursor: initial;

    width: 40px;
    text-align: center;
    color: #333;
    font-size: 15px;
    font-family: "Roboto Condensed", Helvetica, sans-serif !important;
    line-height: 42px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.number-button.number-increase {
    position: absolute;
    height: 100%;
    border-left: 1px solid #eee;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.number-button.number-decrease {
    position: absolute;
    height: 100%;
    border-right: 1px solid #eee;
    top: 0;

}

/* ==========================================================================
   CARD (TILE) STYLES
   ========================================================================== */

/* card column group */
.card-group {
    float: left;
    margin-right: 30px;
    width: 320px;
}

.card-group:last-of-type {
    margin-right: 0;
}

@media screen and (max-width: 640px) {
    .card-group {
        margin: 0 calc((100% - 320px) / 2);
    }
}

/* 1.5x width card column group */
.card-group--lg {
    width: 480px;
}
@media screen and (max-width: 640px) {
    .card-group--lg {
        width: 320px;
    }
}

/* double width card column group */
.card-group--xl {
    width: 700px;
}
@media screen and (max-width: 640px) {
    .card-group--xl {
        width: 320px;
    }
}

/* triple width card column group */
.card-group--xxl {
    width: 1080px;
    margin-right: 0;
}
@media screen and (max-width: 640px) {
    .card-group--xxl {
        width: 320px;
    }
}

/* card used as `header` for a column group */
.card-group__header {
    background: #fff;
    border-top: 3px solid #fff;
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .162), 0 .6px 1.8px 0 rgba(0, 0, 0, .108);
    color: #2f3643;
    /* font-family: 'Roboto Condensed', Arial, sans-serif; */
    font-size: 16px;
    height: 52px;
    line-height: 49px;
    margin-bottom: 18px;
    padding: 0 17px;
    position: relative;
    width: 320px;
}

/* Card ("tile")  
   ======================================= */
.card {
    float: left;
    height: auto;
    margin-bottom: 18px;
    width: 320px;
}

/* 1.5x width card */
.card--lg {
    width: 480px;
}

@media screen and (max-width: 640px) {
    .card--lg {
        width: 320px;
    }
}

/* double width card */
.card--xl {
    width: 700px;
}
@media screen and (max-width: 640px) {
    .card--xl {
        width: 320px;
    }
}

/* triple width card */
.card--xxl {
    width: 1080px;
}
@media screen and (max-width: 640px) {
    .card--xxl {
        width: 320px;
    }
}

/* card header above tile */
.card__header-above {
    width: 100%;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 16px;
    font-weight: 200;
}

@media screen and (max-width: 640px) {
    .card__header-above {
        text-align: center;
    }
}

/* Top status border 
   ------------------------ */
.card__status {
    background: #fff;
    height: 3px;
    width: 100%;
}

/* status border color */
.card__status--green {
    background: #2caa58;
}

.card__status--yellow {
    background: #f5c000;
}

.card__status--orange {
    background: #ff8335;
}

.card__status--red {
    background: #d0021b;
}

.card__status--purple {
    background: #a07ad7;
}

.card__status--pink {
    background: #b771a3;
}

.card__status--gray {
    background: #e4e6ea;
}

.card__status--bluegray {
    background: #54617a;
}

.card__status--blue {
    background: #5c83cf;
}

.card__status--greenblue {
    background: #009a98;
}

.card__status--cyan {
    background: #5dc8d1;
}

/* body of card */
.card__body {
    background: #fff;
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .162), 0 .6px 1.8px 0 rgba(0, 0, 0, .108);
    float: left;
    width: 100%;
}

/* topic of card */
.card__topic {
    border-bottom: 1px solid #eff3f9;
    color: #2f3643;
    font-size: 16px;
    height: 52px;
    line-height: 49px;
    padding: 0 17px;
    position: relative;
    width: 100%;
}

/* Minimize card feature
   ------------------------ */
.card__minimize {
    cursor: pointer;
    display: none;
    float: right;
    height: 49px;
    line-height: 49px;
    margin-left: 10px;
    padding-top: 2px;
}

.card__minimize-icon {
    opacity: 0.85;
}

.card__minimize-icon--is-minimized {
    transform: rotate(180deg);
}

@media screen and (max-width: 640px) {
    .card__minimize {
        display: block;
    }
}

/* Info on hover feature
   ------------------------ */
.card__info {
    float: right;
    height: 49px;
    line-height: 49px;
    padding-top: 5px;
}

.card__info-icon {
    fill: #54617a;
    height: 23px;
    width: 23px;
}

.card__info-box {
    background: #fff;
    border-top: 3px solid #3e64ad;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .162), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
    font-family: Arial;
    font-size: 14px;
    height: auto;
    line-height: 18px;
    opacity: 0;
    padding: 10px 10px;
    position: absolute;
    right: 10px;
    top: 42px;
    transition-timing-function: ease-in-out;
    transition: 0.15s;
    visibility: hidden;
    width: 300px;
    z-index: 5;
}

@media screen and (max-width: 640px) {
    .card__info-box {
        right: 10px;
    }
}

/* triangle on top of info box */
.card__info-box::after {
    border-color: transparent transparent #3e64ad transparent;
    border-style: solid;
    border-width: 7px;
    bottom: 100%;
    content: "";
    left: 275px;
    position: absolute;
}

/* moves triangle on small screen to match new position of info icon because of minimize icon */
@media screen and (max-width: 640px) {
    .card__minimize + .card__info .card__info-box::after {
        left: 241px;
    }
}

.card__info-box--modal {
    right: 10px;
}

.card__info-box--modal::after {
    left: 93.5%;
}

.card__info:hover .card__info-icon,
.card__info:active .card__info-icon {
    fill: #3e64ad;
}

.card__info:hover .card__info-box,
.card__info:active .card__info-box {
    opacity: 1;
    visibility: visible;
}

.card__content {
    float: left;
    min-height: 220px;
    position: relative;
    width: 100%;
}

.card__content.card__content--singlerow{
    min-height:0;
}

@media screen and (max-width: 640px) {
    .card__content {
        overflow-x: auto;
    }
}

.card__content--padding {
    padding: 23px;
}

@media screen and (max-width: 640px) {
    .card__content--padding {
        padding: 23px 12px;
    }
}

/* card tabs */
.card__tabs {
    border-bottom: 1px solid #e0e6ee;
    float: left;
    /* margin-top: 15px; */
    width: 100%;
}

.card__tab {
    border-top: 5px solid #e0e6ee;
    color: #2f3643;
    float: left;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 15px;
    height: 46px;
    line-height: 40px;
    text-align: center;
}

.card__tab:nth-child(odd) {
    border-right: 1px solid #ecf3fb;
}

.card__tab:not(.card__tab--active):hover {
    background: #f4f5f7;
    cursor: pointer;
}

.card__tab--half {
    width: 50%;
}

.card__tab--active {
    background: #f9fafc;
    border-top: 5px solid #009a98;
}

.card__footer {
    background: transparent;
    color: #4c566b;
    float: left;
    font-size: 12px;
    font-weight: 500;
    height: 32px;
    line-height: 32px;
    width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.card__results {
    float: left;
}

.card__pages {
    float: right;
}

.card__current-page {
    float: left;
    padding: 0 10px;
}

.card__page-controls {
    float: left;
    height: 32px;
    line-height: 32px;
    font-family: Arial;
    font-weight: 700;
    font-size: 19px;
    color: #4c566b;
}

.card__page-prev {
    cursor: pointer;
    height: 20px;
    width: 20px;
    line-height: 17px;
    border: 1px solid #4c566b;
    border-radius: 50%;
    margin-top: 6px;
    padding-right: 1px;
    text-align: center;
    float: left;
    margin-right: 8px;
    opacity: 0.75;
}

.card__page-next {
    cursor: pointer;
    height: 20px;
    width: 20px;
    line-height: 17px;
    border: 1px solid #4c566b;
    border-radius: 50%;
    margin-top: 6px;
    text-align: center;
    padding-left: 1px;
    float: right;
    opacity: 0.75;
}

.card__page-next:hover,
.card__page-prev:hover {
    opacity: .9;
    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.14);
}

.card__page-prev--inactive,
.card__page-next--inactive {
    cursor: initial;
    opacity: 0.2;
}

.card__page-prev--inactive:hover,
.card__page-next--inactive:hover {
    cursor: initial;
    opacity: 0.2;
}


/* Card lists
------------------------ */
.card-list__container {
    float: left;
    height: auto;
    /* margin-bottom: 20px; */
    /* margin-top: 15px; */
    position: relative;
}

.card-list__scroller {
    overflow-x: auto;
    overflow-y: visible;
}

.card-list {
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
    table-layout: auto;
    white-space: nowrap;
    color: #2f3643;
}

.card-list__row {
    border-bottom: 1px solid #eff3f9;
    display: none;
    line-height: 34px;
    padding: 0 10px;
}


.card-list__row:hover,
.card-list__row:hover .card-list__ellipsis-btn,
.card-list__row:active,
.card-list__row:active .card-list__ellipsis-btn {
    background: #f1f2f5;
}

.card-list__row:hover > .card-list__cell--fixed,
.card-list__row:active > .card-list__cell--fixed {
    background: #f1f2f5;
    border-left: 5px solid #009a98;
}

.card-list__row--is-active {
    background: #f1f2f5;
}

.card-list__row--is-active > .card-list__cell--fixed {
    background: #f1f2f5;
    border-left: 5px solid #009a98;
}

.card-list__row--is-active .card-list__ellipsis-btn {
    /* background: #edf3f3; */
    background: #f1f2f5;
}

.card-list__row--is-link {
    cursor: pointer;
}

.card-list__row--is-link:hover .card-list__arrow,
.card-list__row--is-link:active .card-list__arrow {
    fill: #009a98;
}

.card-list__cell--fixed:hover .card-list__arrow,
.card-list__cell--fixed:active .card-list__arrow {
    fill: #009a98;
}

.card-list__row--is-link:hover .card-list__arrow,
.card-list__row--is-link:active .card-list__arrow {
    fill: #009a98;
}

.card-list__row--is-active td {
    background: #f1f2f5;
}

.card-list__row--is-active td .card-list__arrow {
    fill: #009a98;
}

.card-list__row--is-active td .card-list__eye-icon {
    fill: #009a98;
}

.card-list__row--is-active > .card-list__cell--fixed {
    border-left: 5px solid #009a98;
}

.card-list__cell-link {
    background: none;
    outline: 0;
}

.card-list__cell-link:hover {
    cursor: pointer;
}

.card-list__cell-link:hover .card-list__arrow,
.card-list__cell-link:active .card-list__arrow {
    fill: #009a98;
}

.card-list__link-wrapper {
    height: 100%;
    width: 100%;
}

.card-list__head-row {
    border-bottom: none;
    line-height: 39px;
    padding: 0 10px;
}

.card-list__head {
    background: #f9fafc;
    border-bottom: 1px solid #eff3f9;
    color: #4c566b;
    font-size: 14px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-weight: 500;
    text-align: left;
}

.card-list__head-cell {
    line-height: 39px;
    background: #f9fafc;
    padding: 0 7px 0 7px;
    position: relative;
    white-space: nowrap;
    text-align: left;
}

.card-list__head-cell.js-is-sortable {
    cursor: pointer;
}

.card-list__head-cell--fixed {
    border-bottom: 1px solid #eff3f9;
    border-right: 1px solid #eff3f9;
    height: 40px;
    left: 0;
    /*padding: 0 7px 0 15px;*/
    padding: 0 5px 0 10px;
    position: absolute;
    top: 0;
}

.card-list__head--has-spacer {
    padding-right: 30px;
}

.card-list__sort-asc {
    fill: #cfd9df;
}

.card-list__head-cell.is-sorted-desc .card-list__sort-desc {
    fill: #54617A;
}

.card-list__head-cell.is-sorted-desc .card-list__sort-asc {
    fill: transparent;
}

.card-list__head-cell.is-sorted-asc .card-list__sort-asc {
    fill: #54617A;
}

.card-list__head-cell.is-sorted-asc .card-list__sort-desc {
    fill: transparent;
}

.card-list__head-sort {
    margin-left: 3px;
    display: inline-block;
}

.card-list__head-sort .card-list__sort-svg {
    margin-bottom: -3px;
}

.card-list__head-dropdown {
    width: 0;
    padding: 0;
}

.card-list__body {
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 14px;
}

.card-list__cell {
    height: 40px;
    line-height: 39px;
    padding: 0 7px 0 7px;
    /*padding: 0 4px 0 4px;*/
    position: relative;
    white-space: nowrap;
}

.card-list__cell--fixed {
    border-bottom: 1px solid #eff3f9;
    border-left: 5px solid transparent;
    border-right: 1px solid #eff3f9;
    height: 40px;
    left: 0;
    line-height: 39px;
    /*padding: 0 7px 0 10px;*/
    padding: 0 5px 0 5px;
    position: absolute;
    top: auto;
}

.card-list__cell--is-link:hover,
.card-list__cell--is-link:active {
    color: #009a98;
    cursor: pointer;
}

.card-list__cell--status-red {
    border-left: 5px solid #d0021b;
}

.card-list__cell--status-yellow {
    border-left: 5px solid #f5c000;
}

.card-list__cell--status-orange {
    border-left: 5px solid #ff8335;
}

.card-list__cell--has-spacer {
    padding-right: 30px;
}

.card-list__cell-btn {
    background: #fff;
    border: 1px solid #CFD9DF;
    border-radius: 3px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 25px;
}

.card-list__cell-icon {
    margin: 0 4px;
    display: inline-block;
}

.card-list__cell-icon--block {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-list__cell-text {
    color: #2f3643;
    display: inline-block;
    width: 100%;
}

.card-list__cell-text--link {
    display: unset;
    border-bottom: 1px solid #2f3643;
}

.card-list__cell-text--link:hover,
.card-list__cell-text--link:active {
    color: #009a98;
    border-bottom: 1px solid #009a98;
}

.card-list__status-circle {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.card-list__status-span {
    border-radius: 4px;
    display: inline-block;
    height: 21px;
    line-height: 21px;
    padding: 2px 8px;
    text-align: center;
    width: 100%;
}

.card-list__status-span--yellow {
    background: #f5d556;
}

.card-list__status-span--orange {
    background: #ff8335;
    color: #fff;
}

.card-list__status-span--red {
    background: #d0021b;
    color: #fff;
}

.card-list__status-span--green {
    background: #2caa58;
    color: #fff;
}

.card-list__modal-link {
    cursor: pointer;
}

.card-list__cell:hover .card-list__eye-icon {
    fill: #009a98;
}

.card-list__ellipsis-container {
    position: relative;
    width: 0;
}

.card-list__item-options {
    border-bottom: 1px solid #eff3f9;
    border-left: 5px solid transparent;
    border-right: 1px solid #eff3f9;
    height: 40px;
    left: 0;
    line-height: 39px;
    position: absolute;
    top: auto;
    width: 0;
    padding: 0;
}

.card-list__ellipsis-btn {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    left: 280px;
    fill: #5e6b84;
    text-align: right;
    cursor: pointer;
    border-bottom: 1px solid #eff3f9;
    z-index: 2;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 58%, rgba(255, 255, 255, 1) 100%);
    padding-right: 8px;
}

.card--xxl .card-list__ellipsis-btn {
    left: 1040px;
}

@media screen and (max-width: 640px) {
    .card--xxl .card-list__ellipsis-btn {
        left: 280px;
    }
}


.card-list__ellipsis-btn:hover .card-list__ellipsis-icon {
    fill: #000;
}

.card-list__row:hover .card-list__ellipsis-btn,
.card-list__row:active .card-list__ellipsis-btn {
    background: linear-gradient(90deg, rgba(241, 242, 245, 0) 0%, rgba(241, 242, 245, 1) 66%, rgba(241, 242, 245, 1) 100%);
}

.card-list__row--is-active .card-list__ellipsis-btn {
    background: linear-gradient(90deg, rgba(241, 242, 245, 0) 0%, rgba(241, 242, 245, 1) 66%, rgba(241, 242, 245, 1) 100%);
}

.card__no-results {
    font-size: 14px;
    margin: 30px auto;
    text-align: center;
    width: 100%;
}

.card-list__dropdown-container {
    position: relative;
    width: 0;
    padding: 0;
}

.card-list__dropdown {
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .162), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
    display: none;
    font-size: 13px;
    position: absolute;
    left: 98px;
    top: -6px;
    width: 220px;
    z-index: 150;
}

.card--xxl .card-list__dropdown {
    left: 858px;
}

@media screen and (max-width: 640px) {
    .card--xxl .card-list__dropdown {
        left: 98px;
    }
}

.card-list__dropdown-item {
    background: #ffffff;
    border-bottom: 1px solid #eff3f9;
    color: #54617a;
    cursor: pointer;
    display: block;
    height: 46px;
    line-height: 46px;
    padding: 0 12px;
    width: calc(100% + 2px);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.card-list__dropdown .card-list__dropdown-item:last-of-type {
    border-bottom: none;
}

.card-list__dropdown-item:hover,
.card-list__dropdown-item:active {
    background: #f1f2f5;
}

.card-list__dropdown--is-active {
    display: inline-block;
    opacity: 1;
    animation-name: fade-in;
    animation-duration: 80ms;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.card-list__dropdown-icon {
    width: 30px;
    height: 46px;
    line-height: 46px;
    float: left;
    line-height: 46px;
}

.card-list__dropdown-svg {
    margin-bottom: -2px;
}

.card-list__dropdown-text {
    width: auto;
    height: 46px;
    line-height: 46px;
    float: left;
    font-size: 14px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

.card-list__head-row.two-row-cells p.card-list__head-text {
    color: #4c566b;
}

.card-list__head-row.two-row-cells .card-list__head-cell,
.card-list__row.two-row-cells .card-list__cell {
    height: 56px;
    line-height: 56px;
}

.card-list__head-row.two-row-cells p.card-list__head-text,
.card-list__row.two-row-cells p.card-list__cell-text {
    line-height: 20px;
    display: block;
}

.card-list__head-row.two-row-cells p:nth-of-type(odd),
.card-list__row.two-row-cells p:nth-of-type(odd) {
    margin: 8px 0 0 0;
}

.card-list__head-row.two-row-cells p:nth-of-type(even),
.card-list__row.two-row-cells p:nth-of-type(even) {
    margin: 0 0 8px 0;
    font-weight: 300;
}

.card-list__head-row.two-row-cells .card-list__status-circle,
.card-list__row.two-row-cells .card-list__status-circle {
    height: 14px;
    width: 14px;
    margin-bottom: -2px;
}

.card-list__row.two-row-cells:nth-of-type(even) .card-list__cell,
.card-list__row.two-row-cells:nth-of-type(even) .card-list__cell--fixed {
    background: #f9f9fb;
}

.card-list__row.two-row-cells:nth-of-type(even):hover .card-list__cell,
.card-list__row.two-row-cells:nth-of-type(even):hover .card-list__cell--fixed {
    background: #f1f2f5;
}

.card-list__row.two-row-cells .card-list__cell--fixed {
    padding: 0 4px 0 5px;
}
.card-list__row.two-row-cells .card-list__head-cell--fixed {
    padding: 0 4px 0 10px;
}
    /* ==========================================================================
       ROLLING STOCK INFO VIEWS
       ========================================================================== */

/*.content-wrapper {*/
/*    display: block;*/
/*    float: left;*/
/*    height: auto;*/
/*    width: 1080px;*/
/*}*/

.presentation-header {
    font-size: 34px;
    height: 51px;
    line-height: 51px;
    margin-bottom: 40px;
}

.feature {
    float: left;
    margin-bottom: 150px;
    width: 100%;
}

.feature__anchor {
    position: relative;
    top: -110px;
    visibility: hidden;
}

.feature__left {
    float: left;
    position: relative;
    width: 510px;
}

.feature__right {
    float: right;
    position: relative;
    width: 510px;
}

.feature__right-image {
    box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    float: right;
    height: 273px;
    position: relative;
    width: 510px;
    z-index: 10;
}

.feature__left-image {
    box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    float: left;
    height: 273px;
    position: relative;
    width: 510px;
    z-index: 10;
}

.feature__right-circle {
    border-radius: 50%;
    height: 340px;
    left: 195px;
    position: absolute;
    top: -32px;
    width: 340px;
    z-index: 0;
}

.feature__left-circle {
    border-radius: 50%;
    height: 340px;
    left: -25px;
    position: absolute;
    top: -32px;
    width: 340px;
    z-index: 0;
}

.feature__header {
    border-left: 5px solid #009a98;
    margin-bottom: 40px;
    padding-left: 20px;
    width: 100%;
}

.feature__header-label {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    width: 100%;
}

.feature__header-topic {
    color: #009a98;
    font-size: 28px;
    line-height: 40px;
    width: 100%;
}

.feature__text {
    color: #181819;
    font-size: 15px;
    line-height: 28px;
    text-align: left;
}

.additional-features {
    float: left;
    margin-bottom: 40px;
    width: 100%;
}

.additional-features__header {
    color: #181819;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    margin: 0 auto;
    padding-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 750px;
}

.additional-features__body {
    color: #181819;
    font-size: 22px;
    line-height: 34px;
    margin: 0 auto;
    text-align: center;
    width: 750px;
}

.features {
    float: left;
    position: relative;
    width: 100%;
}

.features__logo-container {
    float: left;
    margin: 40px 0 50px 0;
    text-align: center;
    width: 100%;
}

.features__tree-outer {
    border-left: 2px solid #d1d1d1;
    border-right: 2px solid #d1d1d1;
    border-top: 2px solid #d1d1d1;
    height: 50px;
    left: 162px;
    position: absolute;
    top: 100px;
    width: calc(100% - 324px);
}

.features__tree-inner {
    border-right: 2px solid #d1d1d1;
    height: 50px;
    width: 50%;
}

.branches-container {
    float: left;
    width: 100%;
}

.branch {
    float: left;
    position: relative;
    width: 30%;
}

.branch__link,
.branch__link:visited,
.branch__link:active,
.branch__link:hover {
    color: initial;
    text-decoration: none;
}

.branch__tree-line {
    border-right: 2px solid #d1d1d1;
    height: 450px;
    left: 0;
    position: absolute;
    top: 200px;
    width: 50%;
    z-index: 0;
}

.branch__tree-line--short {
    height: 350px;
}

.branch:nth-of-type(even) {
    margin-left: 5%;
    margin-right: 5%;
}

.branch__root {
    background: #fff;
    box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    cursor: pointer;
    float: left;
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
    width: 100%;
    z-index: 10;
}

.branch__root:hover,
.branch__root:active {
    /* box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.branch__root--current {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.branch__header1 {
    background: #f9fafc;
    border-bottom: 1px solid #eff3f9;
    color: #3e64ad;
    font-size: 23px;
    height: 80px;
    line-height: 80px;
    padding: 0 24px;
}

.branch__header2 {
    float: left;
    font-size: 15px;
    font-size: 18px;
    line-height: 26px;
    padding: 30px 24px;
}

.branch__header2-btn {
    float: left;
    margin: 0 0 24px 24px;
}

.branch__icon {
    float: left;
    height: 80px;
    line-height: 80px;
    padding-top: 2px;
    width: 24px;
}

.branch__name {
    float: left;
    padding-left: 16px;
}

.branch__feature {
    background: #fff;
    box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    cursor: pointer;
    float: left;
    margin: 20px 0 0;
    padding: 20px 24px;
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
    width: 100%;
    z-index: 10;
}

.branch__feature:hover,
.branch__feature:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    /* box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); */
}

.branch__feature--current {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.branch__feature-name {
    color: #3e64ad;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
}

.branch__feature-span {
    border-bottom: 1px solid #3e64ad;
}

.branch__feature-description {
    color: #181819;
    font-size: 13px;
}

/* ==========================================================================
   TOASTR NOTIFICATIONS
   ========================================================================== */

.toast-title {
    font-weight: bold;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

.toast-message {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-size: 15px;
    font-family: Arial, sans-serif;
}

.toast-message a,
.toast-message label {
    color: #ffffff;
}

.toast-message a:hover {
    color: #cccccc;
    text-decoration: none;
}

.toast-close-button {
    position: relative;
    right: -0.3em;
    top: -0.3em;
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    -webkit-text-shadow: 0 1px 0 #ffffff;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    line-height: 1;
}

.toast-close-button:hover,
.toast-close-button:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40);
}

.rtl .toast-close-button {
    left: -0.3em;
    float: left;
    right: 0.3em;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.toast-top-center {
    top: 0;
    right: 0;
    width: 100%;
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%;
}

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%;
}

.toast-top-left {
    top: 12px;
    left: 12px;
}

.toast-top-right {
    top: 70px;
    right: 20px;
    z-index: 999999;
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px;
}

.toast-bottom-left {
    bottom: 12px;
    left: 12px;
}

#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    /*overrides*/
    top: 70px;
    right: 20px;
}

#toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#toast-container > div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    background-position: 15px 12px;
    background-repeat: no-repeat;
    -moz-box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.15), 0px 0px 10px 0 rgba(0, 0, 0, 0.075);
    color: #ffffff;
    opacity: 0.95;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
}

#toast-container > div.rtl {
    direction: rtl;
    padding: 15px 50px 15px 15px;
    background-position: right 15px top;
}

#toast-container > div:hover {
    -moz-box-shadow: 0px 6px 18px -2px rgba(0, 0, 0, 0.35), 0px 0px 11px 0 rgba(0, 0, 0, 0.095);
    -webkit-box-shadow: 0px 6px 18px -2px rgba(0, 0, 0, 0.35), 0px 0px 11px 0 rgba(0, 0, 0, 0.095);
    box-shadow: 0px 6px 18px -2px rgba(0, 0, 0, 0.35), 0px 0px 11px 0 rgba(0, 0, 0, 0.095);
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    cursor: pointer;
}

#toast-container > .toast-info {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=') !important;
}

#toast-container > .toast-error {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=') !important;
}

#toast-container > .toast-success {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==') !important;
}

#toast-container > .toast-warning {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=') !important;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

.toast {
    background-color: #030303;
}

.toast-success {
    background-color: #5da25d;
}

.toast-error {
    background-color: #bd443d;
}

.toast-info {
    background-color: #3c98b3;
}

.toast-warning {
    background-color: #f79b19;
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000000;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40);
}

@media all and (max-width: 640px) {
    #toast-container {
        right: calc(50% - 150px);
    }
}

/* ==========================================================================
   TIPPY TOOLTIP 
   ========================================================================== */

.tippy-box[data-theme~='predge'] {
    /* background: #394357; */
    background: #455064;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    border-radius: 2px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.162), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
}

.tippy-box[data-placement^='top'] > .tippy-arrow:before,
.tippy-box[data-placement^='top-start'] > .tippy-arrow:before,
.tippy-box[data-placement^='top-end'] > .tippy-arrow:before {
    bottom: -4px;
    border-width: 5px 5px 0;
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow:before,
.tippy-box[data-placement^='bottom-start'] > .tippy-arrow:before,
.tippy-box[data-placement^='bottom-end'] > .tippy-arrow:before {
    top: -4px;
    border-width: 0 5px 5px;
}

.tippy-box[data-placement^='left'] > .tippy-arrow:before,
.tippy-box[data-placement^='left-start'] > .tippy-arrow:before,
.tippy-box[data-placement^='left-end'] > .tippy-arrow:before {
    border-width: 5px 0 5px 5px;
    right: -4px;
}

.tippy-box[data-placement^='right'] > .tippy-arrow:before,
.tippy-box[data-placement^='right-start'] > .tippy-arrow:before .tippy-box[data-placement^='right-end'] > .tippy-arrow:before {
    left: -4px;
    border-width: 5px 5px 5px 0;
}

.tippy-box[data-inertia][data-state='visible'] {
    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
    width: 5px;
    height: 5px;
    color: #455064;
    /* color: #3e64ad; */
}

.tippy-content {
    position: relative;
    padding: 6px 12px;
    z-index: 1;
}