body {
    display: flex;
}

main {
    width: 100vw;
    margin: auto;
    display: flex;
    height: 1036px;
    max-width: 1920px;
    flex-wrap: wrap;
    min-width: 1920px;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.text-red {
    color: #9D0D1C;
}

.form-control {
    font-size: 38px;
     padding: 20px 30px;
}
.form-control:placeholder {
color:#B4B4B4;
}
input.search-dropdown {
    width: 100%;
    height: 70px;
    border: none;
    padding: 0px 20px;
    font-size: 16px;
}
.btn-primary.red {
    border-color: #9D0D1C; 
    background: #9D0D1C;
    font-size: 38px;
    text-transform: uppercase;
    font-weight: 700;
}
label {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

header.bg-red {
    width: 100%;
    height: 75px;

}
.bg-red {
    background: #9D0D1C;
}

.appname {
    font-size: 34px;
    font-weight: 700;
    color: white;
}

.separator {
    background: #840c19;
    width: 1px;
    margin: 0px 20px;
    display: block;
    min-height: 100%;
    height: auto;
}
.left-side {
            padding: 10px 20px;
}
.right-side {
    margin-left: auto;
  

}
main.app {
    background: #F2F2F2;
}


.username {
    background: #880512;
    color: white;
    font-weight: bold;
    font-size: 22px;
    padding: 20px;
}

header button.simple-text {
    border: none;
    background: none;
    font-size: 22px;
    padding: 20px;
    color: white;
}

.map {
    height: 865px;
    width: 100%;
    margin-top: 0px;
}

 .controls {
    width: 100%;
    height: 290px;
    background: #9D0D1C;
}

.controls-heading {
    font-size: 30px;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
}

.control-action-wrapper {
    height: 100%;
    border: 1px solid #880512;
    padding: 20px;
    text-align: center;
}

.wrapper-controls {
    padding: 15px 30px;
}

.control-action-wrapper i {
    color: white;
    font-size: 80px;
}
.control-action-wrapper svg {
    height: 80px;
    width: 80px;
}
.control-label {
    font-size: 16px;
    color: white;
    font-weight: bold;
    margin-top: 20px;
}
.bg-dark-red {
    background: #880512;
}
.control-action-wrapper {
    height: 100%;
    border: 1px solid #880512;
    padding: 25px 5px 15px 5px;
    text-align: center;
}
span.line-heading {
    display: block;
    width: 100%;
    height: 1px;
    position: relative;
    top: -30px;
    z-index: 0;
}
.controls-heading {
    display: inline-block;
    background: #9D0D1C;
    padding-right: 15px;
    position:relative;
    z-index: 1;
}

.bg-dark-red .controls-heading {
    background: #880512;
}


.button-action {
    font-size: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    padding: 35px 20px;
}

.central-controls  {
    padding-left: 0px;
}

.left-controls {
    padding-right: 0px;
}
.lots {
    width: 100%;
    text-align: center;
    padding-top: 20px;
}
.right-controls {
    padding-left: 0px;
        padding-right: 0px;
}

.legend-box {
    padding: 20px;
    background: white;
    font-size: 16px;
}

.single-legend span {
    width: 16px;
    height: 16px;
    background: black;
    display: inline-block;
    position: relative;
    top: 2px;
}
.single-legend span {
    border: 1px solid #bbbbbb;
}
.single-legend:last-child {
    margin-bottom: 0px;
}
.single-legend {
    margin-bottom: 10px;
}

.single-legend.pm-legend span {
    background: orange;
}

.single-legend.d-legend span {
  background: #da9694;
}

.single-legend.se-legend span {
  background: #4a96dd;
}

.single-legend.qd-legend span {
    background: #92d050;
}

.control-action-wrapper:hover {
    background: #880512;
    cursor: pointer;
}

.button-action.bg-red:hover {
    background: #6e010c;
    cursor: pointer;
}

.central-controls {
    padding-left: 0px;
    padding-right: 0px;
}

.logout:hover {
    background: #6e010c;
}

.control-action-wrapper {
    border-radius: 5px;
        box-shadow: 0px 0px 6px rgb(0 0 0 / 26%);
}

.button-action {
    border-radius: 5px;
        box-shadow: 0px 0px 6px rgb(0 0 0 / 26%);
}

.map-header-box.bg-se {
    background: #4a96dd;
}
.map-header .col-3 {
    padding: 0px;
    margin: 0px;
}

.map-header-box.bg-pm {
    background: orange;
}
.map-header .row {
    margin: 0px;
}

.legend-box {
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 26%);
}
.control-action-wrapper.switch-map {
    background: #9d0d1c;
}
    .map-header-box.bg-d {
    background: #da9694;
}

.map-header-box {
    text-align: center;
    background: white;
    padding: 10px 20px;
    color:white;
    font-size: 20px;
    font-weight: bold;
}

.pile-infos {
    font-size: 18px;
}
 
.column-box.non-highlighed {
    opacity: .1;
}
.single-boxes.non-highlighed {
    opacity: .1;
}
.single-boxes.highlighed .box-label {
    background: #8bc34a;
}
 
.column-box.highlighed {
    border: 1px solid #9d0d1c;
}
.single-boxes.highlighed .box-in-pile {
    border:   #8bc34a!important;
}
.map-header-box.bg-qd {
    background: #92d050;
}
.search-header input {
    border: none;
    height: 45px;
    padding: 15px 15px;
    outline: none!important;
    min-width: 320px;
    margin-left: 100px;
        background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2Ljk2NiA1Ni45NjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU2Ljk2NiA1Ni45NjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTU1LjE0Niw1MS44ODdMNDEuNTg4LDM3Ljc4NmMzLjQ4Ni00LjE0NCw1LjM5Ni05LjM1OCw1LjM5Ni0xNC43ODZjMC0xMi42ODItMTAuMzE4LTIzLTIzLTIzcy0yMywxMC4zMTgtMjMsMjMgIHMxMC4zMTgsMjMsMjMsMjNjNC43NjEsMCw5LjI5OC0xLjQzNiwxMy4xNzctNC4xNjJsMTMuNjYxLDE0LjIwOGMwLjU3MSwwLjU5MywxLjMzOSwwLjkyLDIuMTYyLDAuOTIgIGMwLjc3OSwwLDEuNTE4LTAuMjk3LDIuMDc5LTAuODM3QzU2LjI1NSw1NC45ODIsNTYuMjkzLDUzLjA4LDU1LjE0Niw1MS44ODd6IE0yMy45ODQsNmM5LjM3NCwwLDE3LDcuNjI2LDE3LDE3cy03LjYyNiwxNy0xNywxNyAgcy0xNy03LjYyNi0xNy0xN1MxNC42MSw2LDIzLjk4NCw2eiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: 98% 50%;
}

.search-header {
    padding: 5px 20px;
    padding-bottom: 0px;
}
.map {
    overflow: hidden;
}

input.search-dropdown {
    background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2Ljk2NiA1Ni45NjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU2Ljk2NiA1Ni45NjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTU1LjE0Niw1MS44ODdMNDEuNTg4LDM3Ljc4NmMzLjQ4Ni00LjE0NCw1LjM5Ni05LjM1OCw1LjM5Ni0xNC43ODZjMC0xMi42ODItMTAuMzE4LTIzLTIzLTIzcy0yMywxMC4zMTgtMjMsMjMgIHMxMC4zMTgsMjMsMjMsMjNjNC43NjEsMCw5LjI5OC0xLjQzNiwxMy4xNzctNC4xNjJsMTMuNjYxLDE0LjIwOGMwLjU3MSwwLjU5MywxLjMzOSwwLjkyLDIuMTYyLDAuOTIgIGMwLjc3OSwwLDEuNTE4LTAuMjk3LDIuMDc5LTAuODM3QzU2LjI1NSw1NC45ODIsNTYuMjkzLDUzLjA4LDU1LjE0Niw1MS44ODd6IE0yMy45ODQsNmM5LjM3NCwwLDE3LDcuNjI2LDE3LDE3cy03LjYyNiwxNy0xNywxNyAgcy0xNy03LjYyNi0xNy0xN1MxNC42MSw2LDIzLjk4NCw2eiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: 98% 50%;
}
.map-zoom-container {
      cursor: move;
      position: relative;
}
div#map {
    position: relative;
    height: calc(100% - 365px);
}
div#map svg {
    width: 100%;
    margin: 0px;
    height: 100%;
}

.map {
    overflow: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.map::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge add Firefox */
.map  {
  -ms-overflow-style: none;
  scrollbar-width: none; /* Firefox */
}

header.bg-red, .controls.d-flex {
    position: relative;
    z-index: 99999;
}

 

.map-header {
    margin-bottom: 20px;
} 

div#map {
    position: relative;
}

 

.close-button {
    text-align: right;
}
.steps {
    text-align: center;
}
button.close {
    border: none;
    font-size: 40px;
    padding: 10px 15px;
    font-weight: bold;
    line-height: 40px;
}

 .dropdown-menu.show {
    display: block;
    width: 100%;
}

.dropdown-menu.show {
    padding: 0px;
    margin: 0px;
}
button.dropdown-item {
    color: #9D0D1C;
    font-size: 32px;
    font-weight: bold;
    padding: 10px 20px;
    background: whitesmoke;
    border-bottom: 1px solid #d5d5d5;
}
.dropdown-toggle::after {
    float: right;
    top: 17px;
    position: relative;
    color: #9D0D1C;
    font-size: 50px;
}

html {
    max-width: 1920px;
    margin: auto;
}