@font-face {
    font-family: "Popins-Bold";
    src: url('Poppins-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans-Bold";
    src: url('OpenSans-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-width: 700px) {

    .logo_login {
        left: 30% !important;
    }
}

div[data-role="content"] {
    bottom: 62px;
    background-color: var(--background2);
}

.logo_login {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 10%;
    top: 1%;

}

.logo0 {
    position: absolute;
    background: url('images/svg/logo.svg') no-repeat;
    width: 110px;
    height: 110px;
}

.logo1 {
    position: absolute;
    padding-top: 95px;
    padding-left: 15px;
    font-family: Popins-Bold;
    font-size: 34px;
}

.logo2 {
    position: absolute;
    padding-top: 129px;
    padding-left: 0px;
    font-family: Popins-Bold;
    font-size: 34px;
    color: var(--color);
}

.logo3 {
    position: absolute;
    padding-top: 175px;
    left: -6px;
    font-family: OpenSans-Bold;
    font-size: 11px;
}

.logo_header {
    /*   position: absolute;
    width: 50%;
    height: 50%;
    left: 15%;
    top: 1%;*/
    display: flex;
    justify-content: center;
}

.logo0-h {
    position: absolute;
    background: url('images/svg/logo.svg') no-repeat;
    width: 110px;
    height: 110px;
    transform: scale(0.7);
    margin-left: -161px;
    top: 0px;
}

.logo1-h {
    position: absolute;
    padding-top: 35px;
    padding-left: 85px;
    font-family: Popins-Bold;
    font-size: 24px;
    margin-left: -112px;
}

.logo2-h {
    position: absolute;
    padding-top: 35px;
    padding-left: 155px;
    font-family: Popins-Bold;
    font-size: 24px;
    color: var(--color);
    margin-left: -25px;
}

.logo3-h {
    position: absolute;
    padding-top: 63px;
    font-family: OpenSans-Bold;
    font-size: 8px;
    margin-left: 48px;
}


.settings-password {
    display: none;
}

.ble {
    top: auto !important;
    bottom: 0px !important;
    background-color: transparent !important;
}

.ble2 {
    top: auto !important;
    bottom: 50px !important;
    background-color: transparent !important;
}

.bac_tran {
    background-color: transparent !important;
}

.bg {
    background: url('images/bg.png') no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: var(--background) !important;
}

.bg_home {
    background: url('images/bg_home.png') no-repeat;
    background-position: center;
    background-size: contain;
}

.inputlogin {
    border: solid var(--color) 2px !important;
    height: 60px !important;
    text-align: left !important;
    padding-left: 25% !important;

}

.inputlogin::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--text);
    opacity: 1;
    /* Firefox */
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
    box-shadow: 0.5px 0.5px 2px 1px var(--color);
}

.eye-input-icon {
    top: 22px;
    right: 7%;
    transform: scale(0.5);
}

.forgotpassword {
    color: var(--color);
    font-size: smaller;
}

.usericon {
    position: absolute;
    left: 16%;
    padding-top: 20px;
    transform: scale(1.2);
}

.pswicon {
    position: absolute;
    left: 14%;
    padding-top: 20px;
}

.ui-btn-my1 {
    background-color: var(--color);
    height: 50px;
}

.versionapp {
    margin-top: 20px;
    border: none;
}

.icon_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon-menu {
    width: 140px;
    height: 115px;
    margin: 14px 20px;
    border-radius: 15px;
    border: none;
    box-shadow: none;
}

.icon-menu-svg {
    float: none;
    padding-left: unset;
    position: relative;
    top: 25px;
    fill: var(--color);
}

.icon-menu-areas {
    margin: 5px auto;
    width: 90%;
    height: 60px;
    border-radius: 30px;
    border: solid var(--border) 2px;
    box-shadow: 1px 1px 5px 1px var(--border);
    background-color: var(--iconbackg);
}

.menu-description {
    float: none;
    margin: auto;
    display: flex;
    justify-content: center;
    position: relative;
    top: 26px;
}

.icon-menu-notification-badge {
    position: relative;
    font-size: 13px;
    width: 20px;
    border-radius: 20px;
    height: 20px;
    top: -65px;
    left: 100px;
}

.menu {
    height: 65px;
}

.icon-menu-bottom {
    border-radius: unset;
    height: 65px;
    width: 100%;
}

.icon-menu-bottom-background-active {
    background: var(--color);
    height: 65px;
}


.round-list {
    border: unset;
    border-radius: unset;
    background-color: var(--background2);
}

.round-list-horizontal {
    padding: unset;
    margin-bottom: unset;
}

.carusel-item-status {
    top: unset;
    border: unset;
    border-radius: unset;
    padding: unset;
    font-size: unset;
    transform: scale(0.9);
    stroke: unset !important;
    fill: var(--color);
}

.carusel-item-status-icon-active {
    stroke: var(--background) !important;
}

.carusel-item-status-icon {
    top: 15px;
    left: 9px;
    transform: scale(0.9);
    stroke: unset;
    fill: var(--color);
}

.carusel-item-status-ign {
    top: 15px;
    left: 9px;
    transform: scale(0.9);
    stroke: unset;
    fill: var(--color);
}

.carusel-item-status-ign-active {
    stroke: var(--background) !important;
}

.carusel-item {
    padding: 0px 12px 0px 45px;
    text-align: left;
}

.carusel-item-active {
    border: unset;
    border-radius: unset;
    background-color: var(--color);
}

.round-list>li,
.round-list>div {
    min-height: 65px;
    padding-top: 13px;
}

.ol-control {
    background-color: unset;
}

.ol-control:hover {
    background-color: unset;
}

.ol-control button {
    color: black;
    background-color: rgba(255, 255, 255, 0.5);
    border: solid;
    border-radius: 5px !important;
}

.ol-control button:focus,
.ol-control button:hover {
    background-color: rgba(252, 113, 49, 0.7)
}

.ol-layerswitcher-image button {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' xmlns='http://www.w3.org/2000/svg' fill='black' version='1.1' xml:space='preserve'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg stroke='null' id='svg_1'%3E%3Ccircle stroke='null' cx='20.04347' cy='11.89831' r='0.40099' id='svg_2'/%3E%3Ccircle stroke='null' cx='4.56439' cy='11.89831' r='0.40099' id='svg_3'/%3E%3Ccircle stroke='null' cx='5.85431' cy='13.10129' r='0.40099' id='svg_4'/%3E%3Ccircle stroke='null' cx='8.43416' cy='13.10129' r='0.40099' id='svg_5'/%3E%3Ccircle stroke='null' cx='7.14424' cy='14.30428' r='0.40099' id='svg_6'/%3E%3Ccircle stroke='null' cx='9.72408' cy='14.30428' r='0.40099' id='svg_7'/%3E%3Ccircle stroke='null' cx='11.01401' cy='15.50726' r='0.40099' id='svg_8'/%3E%3Ccircle stroke='null' cx='13.59386' cy='15.50726' r='0.40099' id='svg_9'/%3E%3Ccircle stroke='null' cx='14.88378' cy='14.30428' r='0.40099' id='svg_10'/%3E%3Ccircle stroke='null' cx='12.30393' cy='16.71024' r='0.40099' id='svg_11'/%3E%3Ccircle stroke='null' cx='16.1737' cy='13.10129' r='0.40099' id='svg_12'/%3E%3Ccircle stroke='null' cx='18.75355' cy='13.10129' r='0.40099' id='svg_13'/%3E%3Ccircle stroke='null' cx='17.46363' cy='14.30428' r='0.40099' id='svg_14'/%3E%3Cpath stroke='null' d='m20.2748,14.63309l4.03918,-2.15214l-4.15183,-2.19865l4.15183,-2.21229l-11.81398,-6.25672l-11.81441,6.25672l4.15183,2.21229l-4.15183,2.19865l4.15183,2.21229l-4.15183,2.19865l11.81441,6.29481l11.81441,-6.29481l-4.15183,-2.19865l0.03053,-0.01644c0.0301,-0.01043 0.05504,-0.02727 0.0817,-0.04371zm-7.7748,-11.89791l10.07688,5.33684l-3.28372,1.74994l0,0l-6.79274,3.61938l-10.07731,-5.36932l10.07688,-5.33684zm-7.02922,8.13377c0.06966,0.13353 0.2137,0.22736 0.38354,0.22736c0.11609,0 0.22015,-0.04371 0.29754,-0.11348l0.9726,0.51808c-0.22789,0.01002 -0.4102,0.18245 -0.4102,0.39739c0,0.22135 0.19263,0.40099 0.42997,0.40099s0.42997,-0.17965 0.42997,-0.40099c0,-0.06937 -0.02365,-0.13113 -0.05676,-0.18807l4.44164,2.36667c-0.04988,0.06536 -0.08513,0.14115 -0.08513,0.22736c0,0.22135 0.19263,0.40099 0.42997,0.40099s0.42997,-0.17965 0.42997,-0.40099c0,-0.02045 -0.00903,-0.03769 -0.01247,-0.05734l4.3221,-2.30291c0.02537,0.19889 0.19994,0.35488 0.42009,0.35488c0.23735,0 0.42997,-0.17965 0.42997,-0.40099c0,-0.13032 -0.07095,-0.241 -0.17457,-0.31398l0.9468,-0.50445c0.02924,0.00601 0.05676,0.01644 0.08771,0.01644c0.19091,0 0.34699,-0.11789 0.40332,-0.27829l0.13759,-0.07338l3.28243,1.73831l-0.85264,0.45433c-0.06751,-0.13915 -0.21628,-0.23699 -0.39042,-0.23699c-0.23735,0 -0.42997,0.17965 -0.42997,0.40099c0,0.08661 0.03569,0.1624 0.08556,0.22776l-1.69625,0.90384l0,0l-2.74668,1.46363c0.03354,-0.05694 0.05762,-0.1195 0.05762,-0.18927c0,-0.22135 -0.19263,-0.40099 -0.42997,-0.40099s-0.42997,0.17965 -0.42997,0.40099c0,0.21533 0.18317,0.38776 0.41149,0.39739l-0.97303,0.51849c-0.0774,-0.06977 -0.18188,-0.11388 -0.2984,-0.11388c-0.23735,0 -0.42997,0.17965 -0.42997,0.40099c0,0.03208 0.01204,0.06055 0.01978,0.09062l-1.97358,1.05141l-2.37217,-1.26393c-0.0559,-0.1608 -0.21241,-0.27909 -0.40375,-0.27909c-0.03139,0 -0.05934,0.01083 -0.08857,0.01684l-0.94637,-0.50405c0.10362,-0.07338 0.175,-0.18366 0.175,-0.31438c0,-0.22135 -0.19263,-0.40099 -0.42997,-0.40099c-0.22015,0 -0.39515,0.15679 -0.42009,0.35568l-4.32296,-2.30291c0.00301,-0.01965 0.01247,-0.03729 0.01247,-0.05774c0,-0.22135 -0.19263,-0.40099 -0.42997,-0.40099c-0.10276,0 -0.19306,0.03809 -0.26701,0.09423l-0.58434,-0.31117l3.04809,-1.6144zm17.10568,6.02494l-10.07688,5.36932l-10.07645,-5.36932l3.282,-1.73831l6.79489,3.62018l6.79446,-3.62018l3.282,1.73831z' id='svg_15'/%3E%3C/g%3E%3Cg id='svg_16'/%3E%3Cg id='svg_17'/%3E%3Cg id='svg_18'/%3E%3Cg id='svg_19'/%3E%3Cg id='svg_20'/%3E%3Cg id='svg_21'/%3E%3Cg id='svg_22'/%3E%3Cg id='svg_23'/%3E%3Cg id='svg_24'/%3E%3Cg id='svg_25'/%3E%3Cg id='svg_26'/%3E%3Cg id='svg_27'/%3E%3Cg id='svg_28'/%3E%3Cg id='svg_29'/%3E%3Cg id='svg_30'/%3E%3C/g%3E%3C/svg%3E")
}

.list-item-logbook {
    padding: unset !important;
    margin: 0px 15px 15px 15px;
    border: solid;
    border-radius: 15px;
    background-color: var(--background);
}

.logbook-daytop {
    position: relative;
    text-align: center;
    background-color: var(--text);
    color: var(--background);
    height: 35px;
    padding-top: 8px;
    margin-bottom: 8px;
}

.drivermark {
    display: none;
}

.arrow_open_rides {
    top: 6px;
}

.left-bar:after {
    background-color: var(--color)
}

.right-bar:after {
    background-color: var(--color)
}

.open_ride {
    background-color: var(--background);
    height: 40px;
    width: 50px;
    border-radius: unset;
}

.rides {
    padding: 2px 0px 0px 50px !important;
    border-bottom: solid var(--background2);
    width: 96%;
    margin-left: 2%;
    height: 28px;
}

.rides_ride {
    font-size: 11px;
}

.dailydetail {
    background-color: var(--background2);
}

.open_ride-daily {
    background-color: unset;
}

.totaldaily {
    height: 28px;
}

.totaldailtdur {
    position: relative;
    left: 10px;
    top: 5px;
    background-image: url('images/svg/time.svg');
    background-repeat: no-repeat;
    padding: 3px 0px 5px 20px;
}

.totaldailykm {
    position: absolute;
    top: unset;
    background-image: url('images/svg/point_small.svg');
    background-repeat: no-repeat;
    padding: 5px 0px 5px 20px;
    right: 10px;
    background-position: 0px 3px;
}

.maxdailyspeed {
    padding-left: 45px;
    position: relative;
    top: 5px;
}

input[type=checkbox].toggle-switch-same::after {
    background-color: var(--color);
}

input[type=checkbox].toggle-switch:checked::after {
    background-color: var(--color);
}

.toggle-icon-active {
    fill: var(--color);
}

#scrollrides {
    background-color: var(--background2);
}

.round-list-logbook {
    padding-top: 10px;
}

.btnnotif {
    top: -2px
}

.btnnotifoff {
    right: 10px;
    top: 15px;
}

.btnnotifbadge {
    color: var(--text);
    background-color: var(--text);
    top: 8px;
    right: 13px;
}

.overview_adress {
    border: none;
    border-radius: unset;
    margin: unset;
    color: var(--text);
    background-color: var(--background2);
}

.overview-icon-small {
    fill: var(--color);
}

.carusel-view {
    border: none;
    border-radius: unset;
    margin-top: -3px;
}

.carusel {
    background-color: var(--background2);
    border-radius: 30px 30px 0px 0px;
    padding-top: 5px !important;
}

.overview-icon-big {
    fill: var(--color);
}

.btnback2 {
    top: 0px;
}

.search-input-icon {
    top: 33px !important;
    fill: var(--color);
}

.search-input {
    background-color: var(--text) !important;
    text-align: left !important;
    padding-left: 50px !important;
    color: var(--background) !important;
    border: unset !important;
}

.search-div {
    border: none;
    min-height: 55px;
}

.mask-search::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--background);
    opacity: 1;
    /* Firefox */
}

.deletinput {
    color: var(--background2) !important;
}

.round-list-overview {
    padding-bottom: 30px;
}

.list-item-overview {
    background-color: white;
    margin: 10px 20px;
    border-radius: 15px;
    border: none;
}

.overview-name {
    margin-top: -5px;
}

.overview-map {
    background-color: unset;
    top: 45%;
}

.overview-stamp {
    background-color: var(--background2);
    border-radius: 5px;
    padding: 0px 5px;
}

.icon-menu-user {
    fill: var(--color);
}

.btncheckmarker {
    transform: scale(1.2);
    border: none;
    padding-top: 5px;
    background-color: var(--background);
}


.editinput {
    transform: scale(1.5);
    padding-top: 9px;
    border: none;
    fill: var(--color);
}

.choosecolor {
    height: 45px;
    width: 45px;
}

.iconselect2 {
    fill: var(--color);
}

.select2-selection .iconselect2 {
    fill: var(--color);
}

.btncheckmarker-edit {
    padding-top: 7px;
    transform: scale(1.5);
}

.newarea_iOS {
    bottom: 20px;
    border-top: solid var(--background);
}

.iOS_safezone {
    bottom: 20px !important;
    ;
}

.dailyfuelval {
    left: 10px;
    margin-top: 5px;
}

.drivername {
    display: none;
}