
.accordion-item { border-radius: 15px !important; border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important }
.accordion-button { border-radius: 15px !important; }
.accordion-button:not(.collapsed) { background: transparent; border-bottom: 0; box-shadow: none; }
/*.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: rgb(255, 193, 7); color: black; }*/
.nav-link { color: #0079AB; cursor: pointer; }
.mapviewtoggle, .mapviewtoggle:hover, .text-yellow { color: rgb(255, 193, 7); }
.mapviewtoggle.active { background: rgb(255, 193, 7) !important; border-color: rgb(255, 193, 7) !important; }

/* GENERAL */
body { font-family: 'Open Sans', sans-serif; padding-top: 50px; }
.btn { border-radius: 0; }
.icon-square { border-radius: 100%; }
.disabled { opacity: 0.5; }
.half_grey_background { background: #f3f3f3; height: 100%; width: 40%; position: fixed; right: 0; z-index: -1; top: 0; }
body.white .half_grey_background { display: none; }
.btn-dark { background: #0079AB; border-color: #0079AB; }
.footer { background: white; }
.contact { background: white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
a, label a { color: #0079AB; }
label a { text-decoration: underline !important; color: #0079AB !important; cursor: pointer !important; }

/* MAIN NAVIGATION */
#main_navigation { background: #0079AB; }
#main_navigation .navbar-brand { color: white; font-weight: 100; }
.navbar-toggler { border-color: white; }
.navbar-toggler i { color: white; }
.mainmenu { background: white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.mainmenu .navbar-brand { text-transform: uppercase; font-weight: 600; opacity: 0.8; }

/* INTRODUCTION */
.introduction_photo { background: url("../images/manchester-storage.jpg") no-repeat center center; background-size: cover; }
.introduction { background: rgba(0, 121, 171, 0.1); color: white; padding-top: 56px; }
.introduction h1 { font-weight: 700; text-shadow: 2px 2px 1px #000; }
.introduction p { font-weight: bold; text-shadow: 2px 2px 1px #000; }
.introduction .btn-dark { background: white; color: #0079AB; border-color: white; box-shadow: 2px 2px 1px #000; }
.introduction .btn-outline-secondary { color: white; border-color: white; }
.introduction .btn-outline-secondary:hover { background: #0079AB; }
.introduction img { filter: drop-shadow(2px 2px 1px rgb(0 0 0)) }

/* HOWTO */
.howto { }
.howto_block { padding: 20px; background: white; margin-top: -50px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: relative; background: #0079AB; color: white; height: calc(100% + 50px); }
.howto_block .counter { position: absolute; width: 40px; height: 40px; line-height: 40px; color: #0079AB; background: white; top: -10px; left: -10px; font-weight: bold; font-size: 1.2rem; }
.howto_block a { color: white; }
.howto_block h3 { font-size: 1.3rem; font-weight: bold; }
.howto_block img { width: 100%; height: 150px; }
.howto_item .image img { width: 40%; border-radius: 100% }
.howto_item h3 { font-weight: 600; }

/* ONZE UNITS */
.categories {  }
.categories .carousel-item { }
.categories .carousel-item .image img { width: 100%; }
.carousel-control-next-icon, .carousel-control-prev-icon { width: 1.5rem; height: 1.5rem; }
.carousel-inner { border-radius: 0; background: white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.categories_v2 {  }
.categories_v2 .category { border: 1px solid #ddd; background: white; }
.categories_v2 .category:hover { border: 1px solid #0079AB; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.categories_v2 .sticky-top { top: 80px; }

/* UNIT DETAILS */
.unit_image { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background: white; }

/* STERKTES */
.sterktes { background: white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }

/* REGISTER */
#register_form .container { background: white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }

/* RESERVATION */
.reservation { background: white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }

@media (max-width: 991px) {
    .half_grey_background { display: none; }
    .sterktes { box-shadow: none; background: #f3f3f3 }
}

@media (max-width: 767px) {
    .howto_block { margin-top: 30px; height: auto; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; }
    .howto_block .counter { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; }
    .howto_block.first { margin-top: -50px; }
    #register_form .container { box-shadow: none; }
    .sterktes { box-shadow: none; background: #f3f3f3 }
}
