body{
     font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    font-size: 14px;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 902px;
  }
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 902px;
  }
}

@media (min-width: 992px) {
  .container, .container-lg, .container-md, .container-sm {
    max-width: 902px;
  }
}

.navbar{
    border-top: 5px solid #005192;
}

.navbar h1{
    font-size: 30px;
    color: #000;
    line-height: 41px;
    font-weight: 600;

}
.navbar .navbar-logo{
    width: auto;
    height: 70px;
}

#reset-colors:hover{
    border:1px solid #BEBEBE;
    background-color: transparent;
    color: rgb(33, 37, 41);
}
.btn-logout{
    background: #CA1362;
    color:#fff;
    border:1px solid #CA1362;
    font-weight: 600;
}
.btn-logout:hover{
    background: #fff;
    color: #CA1362;
    border:1px solid #CA1362;
}

.color-image-header{
    border-bottom:1px solid #C7C7C7;
    padding: 20px 25px;
    justify-content: space-between;
}
.color-image-header span{
    font-size: 22px;
    line-height: 40px;
    color: #005192;
    font-weight: 600;
}
.color-image-header button.btn-gray{
    background: #BEBEBE;
    color:#fff;
    font-weight: 600;
}
.color-image img{
    width: 100%;
    aspect-ratio: 1/1;
}

.badge{
    padding:2px;
}
.badge:hover{
  cursor:pointer;
}
.badge.active{
    border: 1px solid #652C2C;
}
.badge span{
    display: flex;
    width: 21px;
    height: 21px;
    border-radius: 4px;
}

.badge.badge-default span{
  color: #FF0000;
  font-size: 22px;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-weight: 400;
}

.color-selection-column{
    position:relative;
    padding:24px 25px 24px 12px;
}

.color-selection-column .color-selection-item{
    padding:10px 15px;
    margin-bottom: 20px;
    border:1px solid #C7C7C7;
    border-radius: 5px;
}

.color-range-slider{
    position: relative;
    z-index: 1;
}

.color-range-slider .range-slider-steps{
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    top:-10px;
    left:0;
    font-size: 20px;
    line-height: 1em;
    z-index: -1;
}

.color-range-slider .range-slider-steps span{
    color:#C7C7C7;
}

.color-range-slider .range-slider-steps span:first-child,.color-range-slider .range-slider-steps span:last-child{visibility: hidden;}
input[type="range"]{
      -webkit-appearance: none;
    appearance: none; 
    background: #E5E5E5;
    background: linear-gradient(90deg,rgba(229, 229, 229, 0) 0%, rgba(229, 229, 229, 0.48) 50%, rgba(229, 229, 229, 1) 100%);
    display: flex;
    height: 5px;
}

.selected-code-text{
    padding:5px;
    border: 1px solid #C7C7C7;
    border-radius: 5px;
}
ul.typo3-messages{
    padding-left:0;
    list-style-type: none;
}


@media (max-width: 991px) {
  .navbar h1 {
    font-size: 16px;
    line-height: 22px;
    max-width: 200px;
    word-break: break-word;
  }
  .navbar .fw-bold{
    max-width: 70%;
  }
    .navbar .navbar-logo{
        height: 36px;
    }
  .color-selection-section.py-5{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
  .color-selection-column{
    padding: 35px 24px;
  }
  .color-selection-column .color-selection-item{
    padding:0;
    border:0;
  }
    .color-image-header{
        padding: 10px 10px;
    }
    .color-image-header span{
        font-size: 15px;
    }
    .color-image-header .gap-4{
        gap:10px !important;
    }
    .color-image-header .btn{
        display: flex;
        align-items: center;
    }
    .card.box-shadow .row .row{
        margin:0;
        padding:0;
    }
    .color-image img{
        aspect-ratio: unset;
        height: auto;
    }
  .selected-code-text{
    position:absolute;
    top:0;
    left:50%;
    display: block;
    transform: translate(-50%,-50%);
    width: 80%;
    text-align: center;
    background: #fff;
  }
  .badge-list{
    flex-flow: row wrap;
    justify-content: center;
  }
  .badge span{
    width: 37px;
    height: 37px;
  }
}