/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
    background: white;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #58C6D3;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #58C6D3;
}

/* Cookie popup */
.cookie-popup {
    display: block;
    background-color: rgba(0,0,0,0.2);
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: 30px;
    align-items: center;
    justify-content: center;
    flex: auto;
    padding: 9px;
    border-radius: 2px;
    z-index: 999;
    transition: linear 0.3s;
    border: 0 solid rgba(0,0,0,0.1);
}

.cookie-popup:hover {
    background: #58C6D3;
}

.button-navbar {
    color: #FFFFFF;
    background-color: #58C6D3;
    margin: 0;
    height: 80px;
    line-height: 60px;
}

.button-navbar:hover {
    color: #FFFFFF;
    background-color: #000000;
    transition: linear 0.3s;
}

.button-custom-1 {
    color: #FFFFFF;
    background-color: #58C6D3;
    margin: 0;
    height: 50px;
    line-height: 35px;
}

.button-custom-1:hover {
    color: #58C6D3;
    background-color: #FFFFFF;
    transition: linear 0.3s;
}

.button-custom-2 {
    color: #58C6D3;
    background-color: #FFFFFF;
    margin: 0;
    height: 50px;
    line-height: 35px;
}

.button-custom-2:hover {
    color: #FFFFFF;
    background-color: #58C6D3;
    transition: linear 0.3s;
}

.question-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.button-custom-3 {
    color: #FFFFFF;
    background-color: #58C6D3;
    margin: 0;
    height: 50px;
    line-height: 35px;
}

.button-custom-3:hover {
    color: #FFFFFF;
    background-color: #000000;
    transition: linear 0.3s;
}

.car-icon {
    color: #58C6D3;
    margin-right: 5px;
}

.img-shadow-left {
    box-shadow: -10px -10px #58C6D3;
}

.img-shadow-right {
    box-shadow: 10px -10px #58C6D3;
}

.text-blurry {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Month header */
.month {
    padding: 25px 25px;
    width: 100%;
    background: #58C6D3;
    text-align: center;
    align-items: center;
}

/* Month list */
.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
    position: absolute;
    left: 0;
    padding: 30px;
    transition: linear 0.3s;
}

.prev:hover {
    transform: scale3d(1.2,1.2,1.2);
}

/* Next button */
.month .next {
    position: absolute;
    right: 0;
    padding: 30px;
    transition: linear 0.3s;
}

.next:hover {
    transform: scale3d(1.2,1.2,1.2);
}

/* Weekdays (Mon-Sun) */
.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color:#ddd;
}

.weekdays li {
    display: inline-block;
    width: 13%;
    color: #666;
    text-align: center;
}

/* Days (1-31) */
.days {
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13%;
    margin: 2px 0;
    padding: 10px;
    text-align: center;
    justify-content: center;
    font-size:12px;
    color: #777;
}

.days li:hover {
    background: #ddd;
}

/* Highlight the "current" day */
.day-active {
    background: #58C6D3 !important;
    color: white !important
}

/* Highlight the "reserved" day */
.day-reserved {
    background: rgba(176, 48, 48, 0.8) !important;
    color: white !important;
}

/* Highlight the "service" day */
.day-service {
    background: rgba(216, 196, 46, 0.8) !important;
    color: white !important;
}

/* Highlight the "in interval" day */
.day-interval {
    background: rgba(88, 198, 211, 0.5) !important;
    color: white !important
}

.calendar-border-left {
    border-left: 1px solid #FFFFFF;
}

.red {
    color: red !important;
}

.green {
    color: green !important;
}

.blue {
    color: #58C6D3 !important;
}

.border-red {
    border: 2px solid rgba(176, 48, 48, 0.8);
}

/* Custom range */
.custom-range {
    width: 30px !important;
    -webkit-appearance: none;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: -5px 0 5px 0;
    background: #58C6D3 !important;
}

.custom-range:disabled::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: -5px 0 5px 0;
    background: rgba(216, 216, 216, 0.85) !important;
}

.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

.custom-range:disabled::-moz-range-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: -5px 0 5px 0;
    background: rgba(216, 216, 216, 0.85) !important;
}

.custom-range::-moz-range-track {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

.custom-range:disabled::-ms-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: -5px 0 5px 0;
    background: rgba(216, 216, 216, 0.85) !important;
}

.custom-range::-ms-track {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

/* Highlight the "passed" day */
.day-passed {
    background: rgba(221, 221, 221, 1) !important;
    color: white !important
}

/* Mobile --------------------------------------------*/

@media(max-width: 660px) {

    .cookie-popup {
        margin: 10px;
    }

}