.leaflet-control-playback {
    background-color: rgba(68, 65, 65, 0.84);
    border: 1px solid rgba(68,65,65, 1);
    box-shadow: 0 0 4px 0 black;
    padding: 4px;
    color: #fff;
    border-radius: 4px;
}

.leaflet-control-playback > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaflet-control-playback > div div {
    flex: 1;
    width: 112px;
}
.optionsContainer > div > div {
    display: flex;
}

.optionsContainer,
.sliderContainer {
    padding-bottom: 4px
}

.infoContainer, 
.customContainer {
    padding-top: 4px
}

.sliderContainer {
    padding: 8px 0;
}


.optionsContainer {
    border-bottom: 1px solid #ffffff;
}

.customContainer1,
.infoContainer1 {
    text-align: left;
}
.customContainer2,
.infoContainer2 {
    text-align: center;
}
.customContainer3,
.infoContainer3 {
    text-align: right;
}

.infoContainer1 {
    padding-right: 4px ;
}
.infoContainer3 {
    padding-left: 4px ;
}
.customContainer1 > div,
.customContainer2 > div,
.customContainer3 > div {
    display: inline;
}

.optionsContainer1 > div {
    justify-content: flex-start;
}
.optionsContainer2 > div {
    justify-content: center;
}
.optionsContainer3 > div {
    justify-content: flex-end;
}

.optionsContainer .trackplayback-input {
    margin-left: 0
}
.leaflet-control-playback .cols {
    width: 33.3333%;
}
.time-slider {
    width: 100%;
}

.legendContainer {
    position: relative;
    padding: 6px 0;
    margin-top: 26px;
}

/* /* .leaflet-control-playback .optionsContainer{position:relative;}
.leaflet-control-playback .optionsContainer > div {
    display: inline-block;
}
.leaflet-control-playback .buttonContainer {} */
.leaflet-control-playback .buttonContainer  a {
    display: inline-block;
    width: 36px;
    height: 32px;
    text-decoration: none;
    cursor: pointer;
}

.leaflet-control-playback .buttonContainer .btn-stop {
    background: url(./images/play.svg) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-start {
    background: url(./images/stop.svg) no-repeat center;
    background-size: 26px;
}
.leaflet-control-playback .buttonContainer .btn-restart {
    background: url(./images/replay2.svg) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-slow {
    background: url(./images/slow.svg) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-quick {
    background:  url(./images/quick.svg) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-close {
    background: url(./images/icon-close.png)   no-repeat center;
}

/* .buttonContainer {
    display: flex;
} */

.buttonContainer > a {
    background-size: 32px !important;
}

/* .leaflet-control-playback .infoContainer {}
.leaflet-control-playback .sliderContainer {} */

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin:0;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}

/* track */
input[type=range]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    width: 100%;
    height: 14px;
    cursor: pointer;
    border: 1px solid #d49500;
    border-radius: 5px;
    background: #9d0300;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    box-sizing: border-box;
    background: #9d0300;
}

input[type=range]::-moz-range-track {
    box-sizing: border-box;
    width: 100%;
    height: 14px;
    cursor: pointer;
    border: 1px solid #d49500;
    border-radius: 5px;
    background: #9d0300;
}
input[type=range]::-ms-track {
    box-sizing: border-box;
    width: 100%;
    height: 12px;
    cursor: pointer;
    border: 1px solid #d49500;
    border-radius: 5px;
    background: #9d0300;
}

/* thumb */
input[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    -webkit-appearance: none;
    margin-top: -3px;
    width: 18px;
    height: 18px;
    border: 6px solid #d49500;
    border-radius: 50%;
    background: #FFF;
    cursor: pointer;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 6px solid #d49500;
    border-radius: 50%;
    background: #FFF;
    cursor: pointer;
}
input[type=range]::-ms-thumb {
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 6px solid #d49500;
    border-radius: 50%;
    background: #FFF;
    cursor: pointer;
}


.leaflet-control-toolbar .buttonContainer .btn-custom-control {
    width: 30px;
    height: 30px;
}