@import "https://unpkg.com/leaflet@1.3.4/dist/leaflet.css";
@import "https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css";
@import "https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css";

.leaflet-popup-content-wrapper {
    background: #fff;
}

.ph-carrier {
    margin: 20px 0;
}

.ph-carrier > div {
    display: flex;
    align-items: end;
}

.ph-carrier > div p:first-child {
    flex-grow: 1;
    padding: 0 20px 0 0;
}

.ph-carrier > div p:last-child {
    padding: 0 0 4px 0;
}

.ph-carrier input[type="text"] {
    width: 100%;
}

.ph-carrier p + p {
    margin-left: auto;
}

.ph-carrier > div:last-child {
    display: none;
}

.ph-carrier > div:last-child p {
    line-height: 1.4;
}

.ph-carrier > div:last-child a {
    color: var(--button-color);
}

.ph-carrier.selected > div:first-child {
    display: none;
}

.ph-carrier.selected > div:last-child {
    display: flex;
}


#map-sm {
    display: --show-popup;
}

#map-sm * {
    font-family: var(--font-family);
}

.show-popup {
    display: var(--show-popup);
}

.show-included {
    display: var(--show-included);
    margin: 0 0 15px;
}  

.sm-points-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.sm-points-box hr {
    margin: 15px 0 !important;
}

#sm_points_list {
    overflow: auto;
    max-height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#sm_points_list::-webkit-scrollbar {
    display: none;
}

.popup-l {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100%;
    height: 100%;
}

.popup-m {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100000;
    width: calc(100% - 30px);
    max-width: 1200px;
    max-height: min(80vh, 700px);
    height: 100%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.popup-s {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100000;
    width: calc(100% - 30px);
    max-width: 900px;
    max-height: min(80vh, 450px);
    height: 100%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.localization_title {
    font-size: 12px;
    color: var(--button-color);
}


.map .inner {
    display:flex;
    justify-content: space-between;
    align-items:stretch;
    align-content:stretch;
    width: 100%;
    height: 100%;
}


.panel1 {
    width: 420px;
    background: #fff;
    padding: 20px 30px;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    order:1;

    display: flex;
    flex-direction: column;
}

.panel2 {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    order:1;
    width: 100%;
    background-color: white;
    position: relative;
}

#map-container {
    position: relative;
    height: 100% !important;
    width: 100%;    
}

#map-warning, #map-locating, #map-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10000;
    color: #fff;
    padding: 20px;
}

#map-warning.show, #map-locating.show, #map-loading.show {
    display: flex;
}

.singleOption:nth-child(even) {
    background: #f7f7f7;
}

.singleOption.active {
    background: var(--bg-color);
}

.singleOption.active h3,
.singleOption.active h4,
.singleOption.active h5 {
    color: #fff;
}

.btnBox1 {
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.btnBox1 .btn1,
.btnBox1 .btn2 {
    width: 100%;
}

.btn1 {
    background: var(--button-color);
    padding: 10px;
    font-size: 14px;
    color: var(--button-text-color);
    border-radius: 5px;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    border: 0;
    cursor: pointer;
}

.btn2 {
    background: #fff;
    padding: 10px;
    font-size: 11px;
    color: #333;
    border-radius: 5px;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

.selectBox {
    width: 100%;
    position: relative;
}

.selectBox select {
    width: 80%;
    padding: 5px 10px;
    font-size: 14px;

}

.selectBox:after {
    content: "km";
    position: absolute;
    right: 10px;
    top: 10px;
    color: #000;
    width: auto;
    font-weight: 500;
}

.inputBox {
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.inputBox input {
    width: 100%;
    padding: 11px 10px;
    font-size: 12px;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    border: none;
    border-radius: 5px;
}

.inputBox select{
    width: 50%;
    padding: 11px 10px;
    font-size: 14px;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    border: none;
    border-radius: 5px;
    margin-right: 20px;
}

.inputBox button{
    width: 10%;
    height: 25px;
}

.singleOption {
    padding: 10px;
    
}

.sm_widget_ldiv{
    cursor: pointer;
}

.sm_widget_ldiv label {
    display: block;
}

.sm_widget_ldiv input {
    display: none;
}

.singleOptionFirstRow {
    display: flex;
    margin-top: 10px;
}

.singleOptionFirstRowL {
    flex-grow: 3;
    text-align: left;
}

.singleOptionFirstRowL h3, .point1 h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
}

.singleOptionFirstRowL h3, .singleOptionSecondRow h4, .point1 h4, .point1 h3{
    color: var(--text-color);
}

.singleOptionFirstRowR {
/*    flex-grow: 1;*/
}

.singleOptionSecondRow {
    text-align: left;
}

.singleOptionSecondRow h4, .point1 h4 {
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 7px;
}

.minilogo {
    width: 60px;
    display:var(--logo-display);
}

.line2 {
    height: 1px;
    background: #000;
    margin: 0 0 7px;
}


.point1
{
    height: auto;
    padding: 15px;
    border: solid 1px #333;
    box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -webkit-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    -moz-box-shadow: 2px 2px 11px -4px rgba(74, 74, 74, 0.79);
    background: #fff;
    border-radius: 5px;
    position: relative;
}
.point1:after
{
    position: absolute;
    bottom:-12px;
    left: 48%;
    width:20px;
    height: 20px;
    background:#fff;
    transform:rotate(45deg);
    content: '';
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
}
.leaflet-popup-content-wrapper {
    background: transparent;
    box-shadow: none;
}

.leaflet-popup-tip-container {
    opacity: 0;
}

a.leaflet-popup-close-button {
    margin-top: 19px;
    margin-right: 30px;
    color: black !important;
}

input[type="radio" i] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}


h1{
    font-size: 16px;
}

hr{
    width: 100%;
}

.upper{
    text-transform: uppercase;
}

.close-button-x{
    width: 20px;
    height:20px;
}

.show-popup-close{
    position: absolute;
    right: 11px;
    top: 17px;
    display: var(--show-popup);
    z-index: 1000;
}


.dots_animated {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

span.distance-box{
    right: 0px;
    top: 15px;
    display: block;
    margin-bottom: 20px;
    font-weight: 800;
    position: absolute;
    font-size: 10px;
}

h4.distance-box-wrapper{
    position: relative;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.btn1.smaller{
    font-size: 12px;
    padding: 5px;
}

.radio.singleOption label{
    cursor: pointer !important;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { 
    padding: 2px 5px; 
    border-bottom: 1px solid #aaa; 
    white-space: nowrap; 
    overflow: hidden; 
    cursor: pointer;
    font-size: 12px;
}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }


@media (max-width: 768px) {

    .sm-points-box {
        display: none;
    }

    .map .inner {
        flex-direction: column;
        height: 100%;
    }

    .panel1 {
        width: 100%;
        max-height: 400px;
        box-sizing: border-box;
    }

    .panel2 {
        padding: 10px;
        flex-grow: 1;
        box-sizing: border-box;
        min-width: 0;
    }

    #map-warning, #map-locating, #map-loading {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


@media (max-width: 580px) {

    .ph-carrier > div {
        display: block;
    }

    .ph-carrier.selected > div:last-child {
        display: block;
    }

    .ph-carrier > div p:first-child {
        padding: 0;
    }

    .ph-carrier > div p:last-child {
        text-align: center;
    }

    .ph-carrier.selected > div p:last-child {
        text-align: left;
    }
}