:root {
    --main-color: #400;
    /*#460000*/
    /*#8a110b*/
    /*#332310*/
    --main-text-color: #fff;
    --bs-font-sans-serif: 'Montserrat';
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-weight: 100;
    --bs-body-bg: var(--main-color);
    --bs-body-bg-rgb: 68, 0, 0;
    /*51, 35, 16*/
    /*68, 0, 0*/
    /*64, 9, 7*/
    --bs-body-color: var(--main-text-color);
    --bs-secondary-bg: var(--main-color);
    --bs-secondary-color: var(--main-text-color);
    --bs-link-color-rgb: var(--main-text-color);
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-body-font-size: 1.0rem;
    --bs-box-shadow: 0 0 2rem rgba(0, 0, 0, 1);
}

/* Remove ugly scrollbar in chrome */
::-webkit-scrollbar {
    display: none;
}

.italianno {
    font-family: 'Italianno';
}

a {
    text-decoration: none !important;
    opacity: 1;
    transition: opacity 0.4s;
}

.bg-image {
    background-image: url('../images/1_background_img.jpg');
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
}

.custom-btn {
    background: none;
    border: none;
}

.custom-icon {
    height: 2rem;
}

.custom-btn:hover {
    opacity: 0.75;
}

#menu {
    min-height: 55rem;
}

.custom-pizza-name {
    line-break: anywhere;
}

/*animations for the filter and menu*/
.slide-animation-right {
    animation: slide-right 1s ease-in-out forwards;
}

@keyframes slide-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.slide-animation-left {
    animation: slide-left 1s ease-in-out forwards;
}

@keyframes slide-left {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(0);
    }
}

/*Removes the animations on small screens*/
@media (max-width: 576px) {
    .slide-animation-left {
        animation: none;
    }

    .slide-animation-right {
        animation: none;
    }

}

/*Custom css for the price slider*/

.noUi-base {
    background: rgb(173, 173, 173);
}

#price-range {
    height: 10px;
}

#price-range .noUi-connect {
    background: #ffffff;
}

#price-range .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px;
    /* half the width */
    border-radius: 9px;
}

.noUi-touch-area {
    padding: 2.5vh;
    position: absolute;
    top: 0.5vh;
    transform: translate(-50%, -50%);
}

/* Hide the pseudo-elements that create the lines inside the handle */
.noUi-handle:before,
.noUi-handle:after {
    display: none;
}

.noUi-tooltip {
    display: none;
    color: black;
    font-weight: bolder;
}

/*Overwrites the bootstrap css starts here*/
.form-check-input:focus {
    border-color: #000000;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

.form-check-input[type=checkbox] {
    border-color: #000000;
    background-color: #ff0000 !important;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}

.custom-form-check-input[type=checkbox] {
    border-color: #ffffff;
    background-color: transparent !important;
    --bs-form-check-bg-image: none !important;
}

.form-check-input:checked[type=checkbox] {
    border-color: #000000;
    background-color: #007e00 !important;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/*Overwrites the bootstrap css end here*/

/*Pseudo elements for custom borders*/
.custom-left-border,
.custom-right-border {
    position: relative;
}

.custom-left-border::after,
.custom-right-border::before {
    content: '';
    position: absolute;
    top: 7rem;
    bottom: 5vh;
    width: 1px;
    background-color: rgb(255, 255, 255);
}

.custom-left-border::after {
    left: 0;
}

.custom-right-border::before {
    right: 0;
}

.carousel-img {
    width: 60vmin;
    box-shadow: var(--bs-box-shadow);
}

.top-2 {
    top: 2% !important;
}

.bottom-7 {
    bottom: 7% !important;
}

/*custom css for the search*/
.search-custom-color::placeholder {
    color: #000000;
}

.search-custom-height {
    height: 40px;
}

.opacity-75-hover:hover {
    opacity: 0.75;
}

@media (max-width: 768px) {
    .bg-image {
        background-position: left -17vh bottom 0;
    }

    .welcome-text {
        font-size: 1rem !important;
    }

    .booking-info {
        font-size: 0.7rem !important;
    }
}