#activityTable tr:hover {
    cursor: pointer;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/*
 * General styling
 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 350px !important;
    overflow-x: hidden;
    font-family: montserrat_regular, sans-serif;
    background-color: var(--dark_grey);
}

.hidden-element {
    display: none;
!important;
}

label {
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    display: block;
}

/*tablet*/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
    td, th, #welcome_section, #username_section, #logout_button, .dataTables_length, .dataTables_filter {
        font-size: 0.8em !important;
    }

    .dataTables_length, .dataTables_filter {
        height: 80% !important;
    }

    .navbar-top-links li a {
        padding: 0;
    !important;
    }

    .sidebar-label {
        display: none !important;

    }

    .sidebar {
        width: 90px !important;
    }

    .navbar {
        margin: 0;
    !important;
    }

    #side-nav-bar-head {
        display: none !important;
    }

    #page-wrapper {
        margin-left: 100px !important;
        width: -webkit-calc(100% - 100px) !important;
        width: -moz-calc(100% - 100px) !important;
        width: calc(100% - 100px) !important;
    }

    .navbar {
        min-height: 40px;
    !important;
    }

    .bottom-building-background {
        display: none !important;
    }

    .table-responsive {
        margin-right: 10px !important;
    }

    #side-menu div {
        margin-bottom: 10px !important;
    }

    #menu-headers {
        margin-bottom: 60px;
    }

    .navbar-top-links {
        margin-top: 10px;
    }
}

/*tablet*/
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    .sidebar-label {
        display: none !important;
    }

    .navbar {
        min-height: 30px;
    !important;
    }

    .padding {
        padding-left: 25px !important;
        padding-right: 25px !important;
        padding-top: 10px !important;
    }

    .sidebar {
        width: 60px !important;
    }

    .sidebar-icon {
        margin-left: 15px !important;
    }

    .table-responsive {
        margin-right: 7px !important;
    }

    #page-wrapper {
        margin-left: 70px !important;
        width: -webkit-calc(100% - 70px) !important;
        width: -moz-calc(100% - 70px) !important;
        width: calc(100% - 70px) !important;
    }

    .navbar {
        margin: 0;
    !important;
    }

    #side-nav-bar-head {
        display: none !important;
    }
}

/*Big device*/
@media screen and (min-width: 770px) {
    .padding {
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 25px;
    }
}

h4, h5 {
    font-family: montserrat_bold, sans-serif;
    font-size: 16px;
    color: var(--black);
}

h4 {
    text-transform: uppercase;
}

h5 {
    padding-bottom: 5px;
    padding-top: 15px;
    margin-top: 0px;
}

/*
 * Page wrapper optimalisation
 */
#page-wrapper {
    position: absolute;
    height: -webkit-calc(100% - 95px);
    height: -moz-calc(100% - 95px);
    height: calc(100% - 95px);
    background: var(--dark_grey);
    padding: 0 !important;
    width: -webkit-calc(100% - 320px);
    width: -moz-calc(100% - 320px);
    width: calc(100% - 320px);
    margin-left: 320px;
    min-height: 780px !important;
    overflow: auto !important;
    padding-bottom: 50px !important;
}

.container {
    padding-left: 45px !important;
    padding-right: 45px !important;
    width: 100%;
}

/*
 * Button styling
 */
.btn {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.success-color {
    margin-left: 10px;
    color: rgba(19, 181, 147, 0.7);
}

.success-color:hover {
    color: rgba(19, 181, 147, 1);
}

.danger-color {
    margin-left: 10px;
    color: rgba(210, 21, 37, 0.7);
}

.danger-color:hover {
    color: rgba(210, 21, 37, 1);
}

/*
 * Error message styling
 */
.alert-danger {
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: var(--red);
    border: none;
}

.alert-success {
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: var(--dark_red);
    border: none;
}

.alert-warning {
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: rgba(242, 146, 13, 0.7);
    border: none;
}

.alert-info {
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: rgba(42, 143, 215, 0.70);
    border: none;
}

.state-informer-negative {
    color: var(--red);
    font-family: montserrat_extralight, sans-serif;
    font-size: 12px;
    padding: 0;
    margin-bottom: 0;
}

/*
 * Sidebar styling
 */
#side-nav-bar-head {
    color: white;
    text-align: center;
    font-family: montserrat_bold, sans-serif;
    font-size: 20px;
}

#side-nav-bar-subhead {
    color: white;
    text-align: center;
    font-family: montserrat_extralight, sans-serif;
    font-size: 14px;
}

#menu-headers {
    margin-bottom: 90px;
    margin-top: 20px;
}

#menu-headers a:hover, .open-access-control-dialog {
    text-decoration: none !important;
}

.sidebar {
    margin-top: 0;
    background: linear-gradient(180deg, var(--dark_red), var(--light_red));
    min-height: 100%;
    position: fixed;
    -webkit-box-shadow: 2px 0 10px -5px grey;
    width: 320px;
}

.sidebar ul li a.active {
    background: linear-gradient(180deg, var(--light_red), var(--light_red)) !important;
}

.sidebar ul li {
    border-bottom: none !important;
}

/* Label right to icon in sidebar */
.sidebar-label {
    font-size: 20px;
    letter-spacing: 0.1em;
    font-family: montserrat_light, sans-serif;
}

/*Fixed crooked underline on hover sidebar label links bootstrap override*/
#side-menu li div a {
    text-decoration: none !important;
    display: table-cell;
}

#side-menu li div a .sidebar-label {
    -o-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    /* ...and now for the proper property */
    transition: .25s;
}

#side-menu li div a:hover .sidebar-label {
    color: #483f74;
    text-shadow: 0 0 0.25px grey;
}

#side-menu li div a.active {
    color: var(--dark_red) !important;
    background-color: white !important;
}

.sidebar-icon, .sidebar-label {
    margin-left: 25px;
    vertical-align: middle;
}

/*UNDERLINE NAVBAR LINKS*/
/*#side-menu li div a:hover .sidebar-label {*/
/*border-bottom: 1px solid currentColor;*/
/*}*/

/* Icons in navbar */
.sidebar-icon {
    width: 29px;
    color: white;
}

#side-bar-icon-users {
    height: 29px;
    width: 36px;
    margin-left: 21px;
}

#side-bar-icon-companys {
    height: 29px;
    width: 32px;
    margin-left: 23px;
}

.sidebar-label {
    border: none;
    color: white;
    margin-left: 20px;
}

#side-bar-label-companys {
    margin-left: 20px;
}

#side-menu > li div {
    margin-bottom: 25px;
}

.nav > li a {
    color: black;
}

/*
 * Topbar styling
 */
.navbar-top-links {
    right: 0;
    font-size: 18px;
    margin-top: 10px;
}

#logout_button {
    color: var(--dark_red);
    font-family: montserrat_bold, sans-serif;
    margin-left: 30px;
}

#logout_button:hover {
    background-color: unset;
}

.open-access-control-dialog {
    color: var(--dark_red);
    font-family: montserrat_bold, sans-serif;
    padding-left: 10px;
    cursor: pointer;
}

#welcome_section {
    font-family: montserrat_extralight, sans-serif;
}

#username_section {
    font-size: 18px;
}

/*
 * The content container
 */
.container {
    max-width: 100% !important;
}

/*
 * Styling for the DataTables
 */

.table-responsive {
    min-width: 250px !important;
}

.table-responsive label {
    margin-bottom: 10px;
}

.table-responsive label > span {
    margin-right: 10px;
}

.dataTables_paginate {
    border-radius: 5px;
!important;
    padding: 0 !important;
    margin-top: 10px !important;
    border: 1px solid #ddd !important;
}

.table-responsive table[id^="tabledata"][id$="_next"], .table-responsive table[id^="tabledata"][id$="_previous"] {
    color: var(--dark_red) !important;
}

.table-responsive table[id^="tabledata"] {
    border-bottom: none;
!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 !important;
    border-right: 1px solid #ddd !important;
    color: var(--dark_red) !important;
}

.dataTables_paginate {
    border-radius: 999px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    border-bottom-left-radius: 999px !important;
    border-top-left-radius: 999px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-bottom-right-radius: 999px !important;
    border-top-right-radius: 999px !important;
}

.dataTables_wrapper .dataTables_paginate a[id^="tabledata"][id$="next"]:hover, .paginate_button.next:hover, .dataTables_wrapper .dataTables_paginate a[id^="tabledata"][id$="previous"]:hover, .paginate_button.previous:hover {
    background: none;
!important;
    margin: 0 !important;
    border-color: #ddd !important;
    background-color: #eee !important;
    border-right: 1px solid #ddd !important;
    color: #666 !important;
}

.table-responsive table[id^="tabledata"][id$="_paginate"] > span > a {
    color: var(--dark_red) !important;
    border-left: 1px solid #ddd;
!important;
}

div[id^="tabledata"][id$="_paginate"] > span > a.paginate_button:hover {
    color: white !important;
    background: none;
!important;
    background-color: #e7745d !important;
    border-color: #e7745d !important;
}

div[id^="tabledata"][id$="_paginate"] > span > a.paginate_button.current:hover {
    cursor: default !important;
    color: white !important;
}

div[id^="tabledata"][id$="_paginate"] > span > a.paginate_button.current {
    background: none !important;
    color: white !important;
    border-color: var(--dark_red) !important;
    background-color: var(--dark_red) !important;
}

.dataTable th {
    padding-left: 10px !important;
    font-family: montserrat_medium, sans-serif;
    font-size: 16px;
    color: var(--light_black);
    border: none !important;
    letter-spacing: 0.5px;
}

/* override bootstrap table bs */
.table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td, .table > tfoot > tr > th,
.table > thead > tr > td, .table > thead > tr > th {
    vertical-align: middle;
    border-top: 0;
}

tbody {
    font-family: montserrat_extralight, sans-serif;
}

.dataTable tbody {
    font-size: 18px;
}

/* override jQuery */
table.dataTable {
    border-spacing: 0 7px;
}

.dataTable tr {
    height: 50px;
    background-color: var(--dark_grey) !important;
}

.dataTable td, th {
    background-color: white !important;
}

.dt-right {
    padding-right: 50px !important;
}

.dataTable td {
    border-top: none;
!important;
}

.access-control-text {
    vertical-align: middle;
    display: inline-block;
    padding-left: 5px;
}

/*Hack for rounding each table row */
.dataTable tr td:first-child, tr th:first-child {
    border-radius: 15px 0 0 15px;
    -moz-border-radius: 10px 0 0 10px;
}

.dataTable tr td:last-child, tr th:last-child {
    border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
}

/*
 * Table filter styling
 */
.refresh-filters {
    margin-right: 15px;
}

.filter-wrapper {
    margin-left: 35px;
    padding-right: 41px;
}

.active-filter-row {
    margin-left: 173px;
    margin-top: 5px;
}

.active-filter-wrapper {
    width: 300px !important;
}

.range-filter-right {
    margin-left: 2px;
}

.remove-filter-button {
    margin-left: 9px;
    cursor: pointer;
    margin-right: 12px;
}

/*
 * Login page styling
 */
.login-box {
    display: table;
    margin: 0 auto;
    height: 100%;
    min-width: 500px;
    box-shadow: 2px 2px 4px 0 #729642;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position: relative;
}

.login-full-width {
    display: table-cell;
    vertical-align: middle;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(#b3f442, #64bc38);
    background-size: 100vw 100vh;
}

.login-form #username, .login-form #password {
    border-radius: 100px !important;
    height: 40px !important;
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey;
    transition: ease-in-out 0.25s;
    padding-left: 45px;
    margin-right: 17px;
}

.login-form #username::placeholder, .login-form #password::placeholder {
    font-family: montserrat_extralight, sans-serif;
    font-size: 16px;
    color: rgba(34, 34, 34, 0.8);
}

#login-subrow-ride {
    font-family: montserrat_regular, sans-serif;
}

/* Icons inside username,password input */
.login-form img {
    transform: translateX(220%);
    height: 21px;
    width: 18px;
    margin-bottom: 3px;
}

#login-title {
    font-size: 28px;
    font-family: montserrat_medium, sans-serif;
    color: #4a4a4a;
    margin-top: 50px;
    text-shadow: 1px 1px 2px darkgray;
}

#login-subrow {
    font-size: 19px;
    margin-bottom: 40px !important;
    font-family: montserrat_light, sans-serif;
    color: #4a4a4a;
    text-shadow: 1px 1px 2px darkgray;
}

.main-center {
    background-color: white;
    text-align: center !important;
}

.main-login {
    padding: 20px;
    border-radius: 15px;
    position: relative;
}

#login-button {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    border-radius: 100px !important;
    height: 40px !important;
    background-color: var(--dark_red);
    color: white;
    font-family: montserrat_bold, sans-serif;
    font-size: 18px;
    box-shadow: 1px 2px 3px lightgrey;
}

#login-faded-bike-left {
    height: 62px;
    position: absolute;
    top: -45px;
    left: 21%;
    transform: translateX(-22%);
}

#login-faded-bike-right {
    height: 74px;
    position: absolute;
    top: -61px;
    right: 23%;
    transform: translateX(25%);
}

.bottom-building-background {
    -webkit-filter: invert(15%);
    width: 100%;
    height: 25%;
    position: absolute;
    opacity: 0.10;
    background: url("/images/backend/ic_bike_rent_background.png") repeat-x;
    left: 0;
    bottom: 0;
    pointer-events: none;
}

#login-logo {
    width: 157px;
    height: 92px;
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
}

/*username, password, loginbutton*/
.login-box input {
    border: 0 !important;
    display: unset;
    width: 330px;
    margin-top: 12px;
}

.login-form {
    font-size: 16px;
    margin-bottom: 13px !important;
    font-family: montserrat_extralight, sans-serif;
    color: rgba(34, 34, 34, 0.8);
    vertical-align: middle;
}

.copyright {
    color: white;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    display: inline-block;
}

/**
 * Image Upload styles
 */
.image-holder > img {
    max-width: 230px;
    margin-bottom: 20px;
}

.image-holder > img.hidden {
    display: none;
    margin-bottom: 0px;
}

label.custom-file-upload input[type="file"] {
    position: fixed;
    top: -1000px;
}

/*Custom file upload button*/
.custom-file-upload {
    color: white;
    background: var(--dark_red);
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-family: montserrat_light, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: center;
    width: 150px;
    border-radius: 20px;
    border-style: none;
    cursor: pointer;
    text-decoration: none !important;
}

.table-image {
    width: 230px;
    height: auto;
    max-height: 130px;
}

/*
CSS Icons
 */

.circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 7px;
    margin-bottom: 2px;
}

.red {
    background-color: #d01f27;
}

.green {
    background-color: var(--dark_red);
}

/**
 * Modal styling
 */

#loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;
}

.extension-plus-button, .remove-extension-button, .bike-plus-button, .remove-bike-button,
.remove-location-button, .location-plus-button,
.refresh-filters {
    margin-left: 5px;
    cursor: pointer;
}

[class$="-toggle"], .end-session-modal-toggle {
    color: var(--dark_red);
    text-decoration: underline;
    cursor: pointer;
}

/*Icons in action columns*/
a[class$="-toggle"] img {
    padding-left: 4px;
}

.trash-icon {
    position: absolute;
    right: 55px;
    top: 58px;
}

.trash-icon-location {
    top: 5%;
}

.trash-icon-bike {
    top: 7.5%;
}

.trash-icon-company {
    top: 58px;
}

/* The buttons on the bottom of the modals */
.button-save, .button-end, .button-cancel {
    padding: 7px 18px;
    width: 200px;
    height: 35px;
    min-width: 170px;
    border-radius: 20px;
    border-style: none;
    cursor: pointer;
    margin-left: 25px;
    margin-right: 25px;
    text-decoration: none !important;
}

.button-new {
    margin-left: 0;
    margin-top: 10px;
    color: white !important;
}

.button-save, .custom-file-upload {
    color: white;
    background-color: var(--dark_red);
}

.button-end {
    color: white;
    background-color: var(--red);
}

.button-cancel {
    color: var(--dark_red);
    background-color: white;
    border: 1px solid var(--dark_red) !important;
}

.end_session_cell {
    color: var(--red) !important;
    cursor: pointer;
    font-family: montserrat_medium, sans-serif;
}

.modal-header {
    margin-top: 20px;
    text-transform: uppercase;
}

.subrow {
    font-family: montserrat_regular, sans-serif;
    font-size: 12px
}

.table-row-active {
    font-family: montserrat_medium, sans-serif;
}

.modal-description {
    font-family: montserrat_light, sans-serif;
    color: var(--black);
}

/* Links to other modals inside a modal. */
.modal-description .user-edit-modal-toggle {
    font-family: montserrat_bold, sans-serif;
    text-decoration: none;
}

.modal-label {
    font-family: montserrat_regular, sans-serif;
    color: var(--light_black);
    font-size: 16px;
}

.no-company {
    color: #222222;
    font-family: montserrat_extralight, sans-serif;
}

#modal-delete .modal-footer {
    padding-top: 25px;
}

#modal-delete h5 {
    padding-top: 20px;
}

/*Company in user modal*/
.company-holder div:nth-child(2) {
    padding-left: 3px;
}

.input-element, .select2-selection, .dataTables_filter input {
    color: #222222;
    font-family: montserrat_extralight, sans-serif;
    border-radius: 30px !important;
    border-style: none !important;
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey;
    height: 32px !important;
    padding-left: 13px;
}

.input-element-no-border {
    color: #222222;
    font-family: montserrat_extralight, sans-serif;
    height: 32px !important;
}

/*.input-element, .select2-selection--single, .dataTables_filter input {*/
/*width: 250px;*/
/*}*/

.input-element, .dataTables_filter input {
    width: 250px;
}

/*.select2-selection--multiple {*/
/*width: 400px;*/
/*}*/

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}

/*Filter dropdown styling*/
.filter-section .select2-container, .filter-section .select2-selection, .select2-dropdown, .filter-section .input-element {
    font-family: montserrat_extralight, sans-serif;
    color: #222222;
}

.select2-dropdown {
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey !important;
    border: unset;
}

/*.modal-dialog .select2-dropdown {*/
/*width: 250px; !important;*/
/*}*/

.select2-results__options li {
    padding-left: 13px !important;
}

.select2-dropdown--below {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

/*Select 2 wrapper has 3px padding*/
.select2-selection {
    padding-left: 7px;
}

.input-element {
    transition: box-shadow 0.25s ease-in-out;
}

.input-element:focus, .dataTables_filter input:focus,
span.select2-selection.select2-selection--single:focus, .select2-container--focus > span > span,
.div-input-shadow {
    border-color: var(--dark_red);
    box-shadow: 0 0 8px var(--dark_red) !important;
    outline: none;
}

.select2-search__field {
    margin-top: 6px !important;
}

/*The location in the company modal right below every bike*/
.selectLocationBike ~ .select2 {
    margin-left: 48px !important;
    margin-top: 2px;
}

/*Show x results*/
.dataTables_length .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 3px !important;
}

.input-element-textarea {
    padding-top: 3px;
    min-width: 570px;
    height: 100px !important;
    border-radius: 7px !important;
    transition: box-shadow 0.25s ease-in-out;
}

input[type="text"]:disabled, .select2-container--default.select2-container--disabled .select2-selection--single {
    background: white !important;
}

/* Datepicker styling */
.ui-datepicker {
    width: 18em;
}

.ui-widget {
    font-family: montserrat_regular, sans-serif;
}

.ui-datepicker-calendar tbody {
    font-size: 14px;
}

.ui-state-highlight {
    color: var(--dark_red) !important;
    background-color: rgb(246, 246, 246) !important;
    font-family: montserrat_bold, sans-serif;
    border: 1px solid #c5c5c5 !important;
}

/*override jQuery UI*/
.ui-autocomplete {
    position: fixed;
    top: 100%;
    left: 5%;
    z-index: 1051 !important;
    display: none;
    min-width: 160px;
    width: 160px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

.bike-icon {
    margin-right: 5px;
}

.ui-state-hover, .ui-state-active {
    text-decoration: none;
    background-color: var(--light_grey);
    cursor: pointer;
}

.ui-menu-item {
    padding: 1px 3px !important;
    margin-bottom: 3px;
!important;
}

.ui-menu .ui-menu-item .ui-menu-item-icon {
    background: no-repeat 2px, 0;
    background-size: 16px;
    padding-left: 23px;
    z-index: 1051 !important;
}

.stat-counter {
    text-align: center;
    margin-right: 30px;
    margin-top: 20px;
}

.stat-counter > div:first-child {
    font-family: montserrat_bold, sans-serif;
    font-size: 40px;
}

.stat-counter > div:last-child {
    font-family: montserrat_extralight, sans-serif;
    font-size: 16px;
}

.modal li {
    margin-bottom: 15px;
}

ul {
    list-style: none;
    padding-left: 0;
}

.state-informer {
    margin-left: 5px;
    font-family: montserrat_light, sans-serif;
}

#wrapper > nav > ul > li > ul > li > a {
    color: black !important;
    background-color: white !important;
}

#wrapper > nav > ul > li > ul > li > a i {
    color: #e7745d !important;
}

.modal {
    text-align: center;
    padding: 0 !important;
    border-radius: 0px !important;
}

.bikes-list-wrapper {
    max-height: 135px;
    overflow-y: auto;
}

#bike-modal .state-informer {
    padding-top: 10px;
}

.bikes-list, .input-list {
    margin-top: 5px;
}

.overflowy-list-wrapper {
    margin-top: 5px;
    margin-left: 2px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden !important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 850px;
}

.modal-dialog .col-md-6 {

}

/* LOCATION MODAL OVERRIDES */
#location-modal .modal-dialog {
    width: 1000px;
    max-height: 900px;
    top: 43%;
!important;
}

/* SIMPLE USER MODAL OVERRIDES */
#user-simple-modal .modal-dialog {
    width: 650px;
}

#location-modal .modal-header, #location-modal .modal-body {
    padding-left: 80px;
    padding-right: 80px;
    margin-left: 0;
}

#location-modal .modal-header {
    padding-top: 40px;
}

#location-modal .modal-footer {
    padding-top: 20px;
}

#company-modal .modal-dialog {
    width: 1000px;
}

.modal-footer, .modal-header {
    border: none;
}

.modal-header, .modal-body {
    padding-left: 90px;
    padding-right: 90px;
    margin-left: 0;
}

.modal-header {
    padding-top: 60px;
    margin-top: 0;
    padding-bottom: 5px;
}

/*Action point table */
#actionpoint-table tr {
    height: 30px;
}

#actionpoint-table .marker-hover {
    background-color: lightgrey !important;
}

/*Hack for rounding each table row */
#actionpoint-table tr td:first-child, tr th:first-child {
    border-radius: 0;
    -moz-border-radius: 0;
}

#actionpoint-table tr td:last-child, tr th:last-child {
    border-radius: 0;
    -moz-border-radius: 0;
}

#actionpoint-table tbody, #actionpoint-table th, #actionpoint-table_wrapper th {
    font-size: 14px;
}

#actionpoint-table .subrow {
    font-size: 12px;
}

#actionpoint-table, .dataTables_scrollBody, #actionpoint-table_wrapper .dataTable {
    border-spacing: 0 !important;
    border-bottom: 0 !important;
}

#actionpoint-table th, #actionpoint-table td, #actionpoint-table_wrapper th {
    padding-top: 5px;
    padding-bottom: 5px;
}

.second-column {
    padding-left: 30px;
}

.modal-dialog .user-company-modal-toggle {
    padding-left: 4px;
}

.modal-footer {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 35px;
}

.add-extension-button {
    float: right;
    color: var(--dark_red);
    cursor: pointer;
}

.add-extension-button > img {
    margin-right: 5px;
}

/*select2 general styling*/
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: white;
}

.select2-results__option--highlighted {
    background-color: #5897fb !important;
}

.modal .select2-results li {
    margin-bottom: 0;
    text-align: left;
}

.select2-selection--multiple {
    height: 100% !important;
}

.select2-selection__arrow {
    top: 2px !important;
}

/*Show x entries, top left of tables*/
.dataTables_length .select2-container, .dataTables_length .select2-selection {
    padding-left: 4px;
    width: 56px !important;
}

/*Google map styling*/
#map-last-known, #map, #map-session-history {
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    height: 100%;
}

/*Google maps autocomplete dropdown. */
.pac-container {
    z-index: 2500;
    font-family: montserrat_light, sans-serif;
}

#map-wrapper {
    height: 300px;
    width: 405px;
}

#map-last-known-wrapper, #map-session-history-wrapper {
    height: 400px;
    width: 610px;
}

.detail-page-block {
    border-radius: 6px;
    background-color: #fff;
    padding: 20px 20px 30px 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.24)
}

.no-margin {
    margin: 0 !important;
}

/* Tables */
table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting:after, table.dataTable thead .sorting_desc:after {
    float: none;
    padding-left: 15px;
}

/* button */
.btn.btn-success, .btn.btn-danger {
    -webkit-border-radius: 999px !important;
    -moz-border-radius: 999px !important;
    border-radius: 999px !important;
    outline: none !important;
    border: none !important;
    padding-left: 15px;
    padding-right: 15px;
}

.btn.btn-success {
    background-color: rgba(19, 181, 147, 0.7);
}

.btn.btn-success:hover, .btn.btn-success:focus {
    background-color: rgba(19, 181, 147, 1);
}

.btn.btn-danger {
    background-color: rgba(210, 21, 37, 0.7);;
}

.btn.btn-danger:hover, .btn.btn-danger:focus {
    background-color: rgba(210, 21, 37, 1);
}

/* questions */
.question {
    border: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 15px;
    margin-top: 20px;
}

/* video */
.new-video-preview.hidden {
    display: none;
}

.image-holder {
    white-space: nowrap;
}

.image-holder video {
    max-width: 100%;
    margin-bottom: 15px;
    display: block;
}

.image-holder span {
    display: block;
}

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

.icon-no-padding {
    padding-left: 0 !important;
}

#side-menu > li.dropdownsecond > ul > li > a.active, .nav > li > a:focus, .nav > li > a:hover {
    background: none !important;
    color: #403667 !important;
}

.navbar {
    z-index: 9;
    margin-bottom: 0;
    border: none !important;
    height: 75px !important;
    background-color: white !important;
    box-shadow: 0 4px 10px 0 lightgrey !important;
}

#breadcrumbs {
    top: 80%;
    height: 75px;
    font-size: 20px;
    color: var(--dark_red);
    margin-left: 320px;
    padding-left: 30px;
    position: absolute;
    transform: translateY(-50%);
}

#breadcrumbs li {
    display: inline-block;
}

#breadcrumbs li a {
    color: var(--dark_red);
}

.fix {
    left: 50%;
    bottom: 20px;
    width: 150px;
    position: absolute;
    transform: translateX(-50%);
}

/*
 * The content container
 */
.container {
    max-width: 100% !important;
}

#wrapper {
    background-color: #f0f0f0 !important;
}

#page-wrapper {
    padding: 0;
    min-height: 845px;
}

/*
 * Styling for the table data
 */
#tabledata_filter > label > input[type="search"] {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
}

#tabledata_filter > label > input[type="search"]:focus, #tabledata_filter > label > input[type="search"]:active {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none !important;
}

.dataTables_paginate {
    border-radius: 5px;
    padding: 0 !important;
    margin-top: 10px !important;
    border: 1px solid #ddd !important;
}

#tabledata_next, #tabledata_previous {
    color: #303440 !important;
}

.paginate_button {
    margin: 0 !important;
    border-right: 1px solid #ddd !important;
}

#tabledata_next:hover, #tabledata_previous:hover {
    background: none;
    margin: 0 !important;
    border-color: #ddd !important;
    background-color: #eee !important;
    border-right: 1px solid #ddd !important;
}

#tabledata_paginate > span > a.paginate_button.current {
    background: none;
    color: #ffffff !important;
    border-color: #303440 !important;
    background-color: #303440 !important;
}

#tabledata_paginate > span > a {
    color: #303440 !important;
    border-left: 1px solid #ddd;
    background-color: white !important;
}

#tabledata_paginate > span > a:hover {
    color: white !important;
    background: none;
    background-color: #e7745d !important;
    border-color: #e7745d !important;
}

.table-actions {
    min-width: 85px;
}

/*
 * DTT logo in the bottom
 */
.menu-logo {
    position: fixed;
    padding-left: 50px;
    padding-bottom: 15px;
    bottom: 0px;
}

/**
 * Image Upload styles
 */
.image-holder > img {
    max-width: 200px;
    margin-bottom: 20px;
}

.image-holder > img.hidden {
    display: none;
    margin-bottom: 0;
}

label.custom-file-upload input[type="file"] {
    position: fixed;
    top: -1000px;
}

.custom-file-upload {
    color: white;
    background: #303440;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

.custom-file-upload:hover, .custom-file-upload:active {
    color: #303440;
    background-color: white;
    border: #303440 1px solid;
}

.table-image {
    width: 100px;
    height: auto;
    max-height: 200px;
}

#company-panel {
    color: white;
    background-color: #303440;
    overflow: hidden;
    height: 60px;
    line-height: 40px;
    font-size: 20px
}

.sp-replacer, .sp-preview {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 75px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

label#input {
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

label#input input[type=radio] {
    margin-right: 10px;
}

#blueprint-div {
    width: 100%;
    position: relative;
    background-size: contain;
}

#svg {
    position: absolute;
    top: 0;
    left: 0;
}

#blueprint-image {
    width: 100%;
    z-index: 999;
}

#searchInput {
    border-left: 0;
    border-radius: 0;
    box-shadow: inset -1px 1px 1px rgba(0, 0, 0, .075) !important;
}

#searchInputIcon {
    border-radius: 0;
    background-color: white;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .075) !important;
}

.top-buttons-installation > a,
.top-buttons-installation > div > a,
.top-buttons-installation > button {
    font-size: 1em;
    margin-left: 7px;
    padding: 15px 20px;
    text-transform: none;
    text-decoration: none;
}

.btn-black {
    color: #ffffff;
    background-color: var(--dark_red);
}

#installationTable {
    overflow: auto;
    height: 460px;
    width: 100%;
}

#installationTable > table > tbody > tr {
    height: 75px;
    background-color: white;
    border-bottom: 1px solid lightgray;
}

.installation-table-head {
    margin-bottom: 0;
}

.form-control:focus {
    border-color: rgb(204, 204, 204) !important;
}

.installation-table-icon {
    color: #000;
    cursor: pointer;
    padding: 0 10px;
    font-size: 1.3em;
    position: relative;
}

#installationEditDiv,
#top-buttons-installation-edit-div {
    width: 430px;
    display: none;
}

.installation-menu {
    top: 0;
    z-index: 1;
    right: 10px;
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.installation-menu > ul {
    margin-bottom: 0;
}

.installation-menu > ul > li {
    color: red;
    width: 170px;
    font-size: 15px;
    font-weight: 500;
    padding: 20px 25px;
    font-family: sans-serif;
    border-bottom: 1px solid #eaeaea;
}

.installation-menu > ul > li > i {
    padding-right: 10px;
}

.without-padding {
    top: 2px;
    position: relative;
    font-size: 2em !important;
    padding-right: 0 !important;

}

.edit-installation-section-pop-up.WHITE,
.edit-installation-section.WHITE,
.installation-status-bar.WHITE {
    background-color: #eee !important;
}

.edit-installation-section-pop-up.BLUE,
.edit-installation-section.BLUE,
.installation-status-bar.BLUE {
    background-color: blue !important;
}

.edit-installation-section-pop-up.GREEN,
.edit-installation-section.GREEN,
.installation-status-bar.GREEN {
    background-color: green !important;
}

.edit-installation-section-pop-up.ORANGE,
.edit-installation-section.ORANGE,
.installation-status-bar.ORANGE {
    background-color: orange !important;
}

.edit-installation-section-pop-up.RED,
.edit-installation-section.RED,
.installation-status-bar.RED {
    background-color: red !important;
}

.edit-installation-section {
    width: 15px;
    height: 34px;
    display: inline-block;
}

.edit-installation-section-pop-up {
    width: 27px;
    height: 50px;
    display: inline-block;
}

.installationStatus {
    float: right;
    display: inline-block;
    width: calc(100% - 15px);
}

.floor-canvas {
    position: relative;
    border: 1px solid lightgrey;
}

.thead-tr {
    border: 1px solid #ccc;
}

.first-dropdown-icon {
    padding-right: 10px;
}

.second-dropdown-icon {
    padding-right: 14px;
}

.installation-form {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: white;
}

.installation-form > div > div > input,
.installation-form > div > div > textarea {
    border-radius: 0;
}

.installation-form > div > div > select {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#ccc' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

.textarea-not-resizable {
    resize: none;
}

.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    top: -3px;
    padding: 0;
    right: -2px;
    border-radius: 0;
    margin-left: 6px;
    position: absolute;
    border-color: transparent;
}

.dropdown-menu > li > a {
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 15px;
}

.dropdown-menu > li.divider {
    margin: 0;
}

.font-weight-bold {
    font-weight: bolder !important;
}

.upload-blueprint-header {
    padding-top: 30px;
}

.upload-blueprint-header > h4 {
    text-transform: initial;
}

.upload-blueprint-body {
    margin: 0 20px;
    padding: 100px;
    border: 1px solid #ccc;
}

.upload-blueprint-body > i {
    padding-bottom: 20px;
}

.muted-icon {
    color: #CCCCCC;
}

.upload-blueprint-footer {
    padding-top: 30px;
    padding-bottom: 30px;
}

.upload-blueprint-footer > a,
.upload-blueprint-footer > input {
    width: 150px;
    margin: 5px 0 !important;
}

.upload-blueprint-footer > a:last-child {
    margin-left: -3px !important;
}

.modal-content {
    border-radius: 0 !important;
}

.btn-default[disabled] {
    background-color: var(--dark_red);
}

.blueprint-image-quickview {
    max-width: 100%;
    max-height: 100%;
}

/************************* Drag and drop file ********************************/

.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
    display: none;
}

.box.has-advanced-upload {
    background-color: white;
    outline: 2px dashed black;
    outline-offset: -10px;
}

.box.has-advanced-upload .box__dragndrop {
    display: inline;
}

.box.is-dragover {
    background-color: grey;
}

.box.is-uploading .box__input {
    visibility: none;
}

.box.is-uploading .box__uploading {
    display: block;
}

.box__button {
    display: none;
}

.no-js .box__button {
    display: block;
}

/************************************** MAP STYLING **********************************************/

#map {
    height: 550px;
}

#mapBtnCenter {
    top: 80px;
    left: 10px;
    width: 34px;
    height: 34px;
    z-index: 800;
    color: #000000;
    cursor: pointer;
    font-size: 18px;
    max-width: 40px;
    overflow: hidden;
    line-height: 30px;
    border-radius: 4px;
    position: absolute;
    text-align: center;
    background: #FFFFFF;
    vertical-align: top;
    display: inline-block;
    border: 2px solid #b1b1b1;
    transition: max-width 0.2s ease;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
}

#map .map-crosshair {
    position: relative;
    display: block;
    background: url(/images/backend/floorplan-crosshair.png) center no-repeat;
    background-size: contain;
    background-size: 20%;
    width: 100%;
    height: 100%;
    z-index: 500;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div {
    width: 470px;
    left: -236px !important;
    bottom: 0 !important;
}

.pop-table {
    margin: 0;
    color: black;
    font-weight: bold;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    color: #333;
    text-align: left;
    background: white;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-content {
    border: none;
    font-size: 16px;
    min-width: 100%;
    border-radius: 3px;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.marker-pop-header {
    height: 49px;
    width: 470px;
    display: block;
    overflow: hidden;
    line-height: 30px;
    padding: 10px 30px 10px 50px;
    position: relative;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid rgba(19, 22, 48, 0.10);
}

.leaflet-popup-close-button {
    display: none !important;
}

.marker-line-status {
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    display: block;
    position: absolute;
}

.marker-pop-id {
    display: inline-block;
    width: 48%;
    float: left;
}

.marker-chevron {
    line-height: 30px;
}

.pop-button {
    cursor: pointer;
    font-size: 1.1em;
    padding-right: 25px;
    color: #000 !important;
}

.pop-button:hover {
    color: #ccc !important;
}

.marker-pop-content {
    padding: 10px 17px;
}

.marker-pop-buttons {
    padding: 10px 25px;
}

.pop-button:last-child {
    padding-right: 0;
}

.leaflet-popup-content-wrapper {
    border-radius: 10px !important;
}

/************************* Custom Checkmark styling ********************************/
/* The checkmark-container */
.checkmark-container {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: white;
    border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.checkmark-container:hover input ~ .checkmark {
    background-color: #eee;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkmark-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkmark-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.installation-table-body {
    margin: 0;
}

.floor-canvas-image {
    display: none;
    border: 1px solid lightgrey;
}

#floor-canvas-image-element {
    width: 100%;
    height: 100%;
}

.modal {
    z-index: 9999 !important;
}

#product-modal > .modal-header {
    text-transform: inherit !important;
    padding: 40px 30px 0 30px !important;
}

#product-modal > .modal-header > h4 {
    text-transform: inherit !important;
}

#product-modal > .modal-body {
    padding-left: 30px;
    padding-right: 30px;
}

.select-products-row {
    padding-top: 15px;
}

#product-div {
    padding-top: 20px;
}

.product-checkmark {
    padding-right: 15px;
    display: inline-block !important;
}

#product-div > span {
    bottom: 5px;
    position: relative;
}

.product-select-btn {
    text-transform: inherit;
}

.product-select-btn:focus,
.product-select-btn:hover {
    text-transform: inherit;
}

#product-modal > .modal-footer {
    text-align: left;
    padding-top: 20px;
    padding-left: 30px;
    padding-bottom: 30px;
}

#close-select-products {
    opacity: 1;
    font-size: 3em;
    margin-top: -10px;
}

#close-select-products:focus {
    outline: none;
}

#delete-modal > .modal-header {
    padding-bottom: 30px !important;
}

#delete-modal > .modal-header > .modal-title {
    font-size: 20px !important;
    text-transform: initial !important;
}

#delete-modal > .modal-footer > button {
    padding: 13px 60px;
    text-transform: initial !important;
}

.installation-list-and-edit {
    width: 430px;
    display: inline-block;
}

.installation-map-and-image {
    float: right;
    padding-right: 15px;
    display: inline-block;
    width: calc(100% - 450px);
}

.always-visible {
    display: table-cell !important;
}

.installation-images-block {
    display: table;
}

.installation-image-block {
    width: 100px;
    height: 65px;
    margin: 10px 19px;
    position: relative;
    display: inline-flex;
    border: 1px solid lightgrey;
}

.installation-image-block > img {
    max-width: 100%;
    max-height: 100%;
}

.installation-image-block > span > i:nth-child(1) {
    color: red;
}

.installation-image-block > span > i:nth-child(2) {
    color: white;
}

.installation-image-block > span {
    top: 4px;
    right: 3px;
    font-size: 0.6em;
    position: absolute;
}

.fa-stack.fa-lg.icon-red:hover {
    cursor: pointer;
}

.mt3px {
    margin-top: 3px;
}

.mb15px {
    margin-bottom: 15px;
}

.ml5px {
    margin-left: 5px;
}

.installation-status-change {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/sv…='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

.no-padding {
    padding: 0 !important;
}

#dragMessage {
    bottom: 0;
    width: 100%;
    z-index: 999;
    color: white;
    height: 40px;
    display: none;
    font-size: 15px;
    position: absolute;
    text-align: center;
    line-height: 2.5em;
    background-color: #696d76;
}

#dragFinal {
    right: 30px;
    width: 50px;
    color: white;
    height: 50px;
    z-index: 999;
    bottom: 75px;
    display: none;
    font-size: 15px;
    cursor: pointer;
    padding-top: 9px;
    position: absolute;
    text-align: center;
    border-radius: 100%;
    background-color: #3a3e4a;
}

#mailMessageBox {
    min-height: 200px;
    resize: vertical;
}

.center-content {
    text-align: center;
}

.modal-scroll-body {
    height: 700px !important;
    overflow-y: auto !important;
}

#btnAddMarker:active,
#btnAddMarker:focus,
#btnAddMarker:hover {
    text-transform: initial;
}

.customMarkerOnMap {
    border-radius: 100%;
    width: 40px !important;
    height: 40px !important;
    background-color: white;
}

.customMarkerOnMap > img {
    width: 100%;
    height: 100%;
    padding: 0 10px 10px 0;
}

.customMarkerOnMap > span {
    top: 20px;
    left: 16px;
    color: red;
    width: 20px;
    position: absolute;
    text-align: center;
}