*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
p{
    margin-bottom: 10px !important;
}
.main{
    display: grid;
    grid-template-columns: 4fr 320px;   
    overflow: hidden;
    height: 100vh;
}
/* .Col1{
    height: 100vh;
} */
#app{
    width: 100%;
    height: 100%;
    border: none;
}
.sidebar{
    /*background-color: #241F1F;*/
    background-color: #16588B;
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;
}
.watermark{
    position: absolute;
    height: 250px;
    top: 35%;
    left: 25%;
    opacity: 0.4;
    z-index: 1111;
}
.logoDiv{
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
}
.logoDiv,.logo{
    max-height: 120px;
    max-width: 100%;
}
.card-header{
    /* background: #ce132e !important; */
    background: #F4CB43 !important;
}
.card-header:hover{
    /* background: #ce132e !important; */
    background: #C0992A !important;
}
.card-body{
    /* background: #333 !important; */
    /*background: #241F1F !important;*/
    background: #16588B !important;
    color: #fff !important;
}
.btn-link{
    text-decoration: none !important;
    /* color: #fff !important; */
    color: #000 !important;
    text-align: center !important; 
    outline: none !important;
    border: none;
}
.accIcon{
    float: right;
    width: 25px;
}
:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
  }

  /* select */
  
select {
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance:none;
    outline:0;
    box-shadow:none;
    border:0!important;
    background: #767475;
    flex: 1;
    padding: 0 .5em;
    color:#fff;
    cursor:pointer;
    font-size: 1em;
    text-indent: 5px;
    max-height: calc(1.2em + 24px);
    height: calc(1.2em + 24px);
 }
 
 select::-ms-expand {
    display: none;
 }
 .select {
    position: relative;
    display: flex;
    height: 3em;
    line-height: 3;
    
    /* overflow: hidden; */

 }
 .select select:hover{
    background-color: #7b7e85 !important;
 }
 .select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1em;
    cursor: pointer;
    pointer-events: none;
    transition: .25s all ease;
    font-size: 8px;
    /* padding: 15px;
    margin-right: 25px; */
    padding: 9px 20px;
    margin-right: 0px;
    
}
 
 .select option{
    background-color: #fff !important;
    color: #000 !important;
    padding: 10;
    margin-top: -1px;
    margin-bottom: -1px;
    box-shadow: 0px 20px 30px 10px #e6e4e1;
    font-size: 18px !important;
    margin-left: 10px !important;
    
}
/* turn it off completely */

  
  /* make it red instead (with with same width and style) */
  /* select option:hover,
  select option:focus,
  select option:active {
      background: linear-gradient(#000000, #000000);
      background-color: red !important; 
      color: #ffed00 !important;
  }

  select option:checked {
      background: linear-gradient(#63656a, #63656a);
      background-color: #63656a !important;
      color: #fff !important;
  } */

  /* range */
  .range-slider {
    margin: 20px 0 0 0%;
    display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
justify-content: center;
align-items: center;
}
.range-slider {
    width: 100%;
}
.range-slider__range {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ce132e;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
    background: #ce132e;
}
.range-slider__range:active::-webkit-slider-thumb {
    background: #ce132e;
}
.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #ce132e;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
    background: #ce132e;
}
.range-slider__range:active::-moz-range-thumb {
    background: #ce132e;
}
.range-slider__range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ce132e;
}
.range-slider__value {
    display: inline-block;
    position: relative;
    width: 40px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ce132e;
    color: #000;
    padding: 5px;
    margin-left: 8px;
}
.range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
}
::-moz-range-track {
    background: #d7dcdf;
    border: 0;
}
input::-moz-focus-inner, input::-moz-focus-outer {
    border: 0;
}
/* checkbox*/
input[type="checkbox"] {
    transform: scale(1.5);
}
.wainscotDiv{
    margin: 10px 0px;
}
.checkboxLabel{
    margin-left: 15px;
}
/* modal center to all screens */
.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
/*  */
.modal-header{
    font-size: 1.75rem !important;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 1px;
}
.btn-dark{
    background-color: #767475 !important;
    padding: 10px 30px;
    border: none
}
.btn-dark:hover{
    background: #7b7e85 !important;
}
.checkBoxDivs{
    padding: 5px 0px;
}
.leanDepthSlider{
    margin: 0 !important;
}
/*  */

.demo{
        margin-bottom: 20px;
    }
  .dropdown-container {
    position: relative;
  }

  .colorSelect {
    width: 100%;
    height: 50px;
    /* font-size: 100%; */
    font-size: 19px;
    /* font-weight: bold; */
    cursor: pointer;
    border-radius: 0;
    /*background-color: #600000;*/
    border: none;
    /* border-bottom: 2px solid #962d22; */
    /* color: #000; */
    appearance: none;
    padding: 10px;
    padding-right: 38px;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
  }
    #rgb,#rgb3{
       background-color: #385864; 
    }
    #rgb2{
       background-color: #41413f; 
    }
    #rgb4{
       background-color: #7b0e04; 
    }
  /* For IE <= 11 */
  .colorSelect::-ms-expand {
    display: none; 
  }

  .select-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 36px;
    pointer-events: none;
    border: 2px solid #962d22;
    padding-left: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .select-icon svg.icon {
    transition: fill 0.3s ease;
    fill: white;
  }

  .colorSelect:hover ~ .select-icon,
  .colorSelect:focus ~ .select-icon {
    background-color: white;
    /* border-color: #DCDCDC; */
  }
  /* .colorSelect:hover ~ .select-icon svg.icon,
  .colorSelect:focus ~ .select-icon svg.icon {
    fill: #c0392b;
  } */
  #burgundy,#burgundy2,#burgundy3,#burgundy4{
      background-color: #600000;
  }
  #forestGreen,#forestGreen2,#forestGreen3,#forestGreen4{
      background-color: #003301;
  }
  #hawaiianblue,#hawaiianblue2,#hawaiianblue3,#hawaiianblue4{
    background-color: #00c3e3;
  }
  #zincGrey,#zincGrey2,#zincGrey3,#zincGrey4{
    background-color: #7A7672;
  }
  #barnRed,#barnRed2,#barnRed3,#barnRed4{
    background-color: #7b0e04;
  }
  #lightStone,#lightStone2,#lightStone3,#lightStone4{
      background-color: #cabea8;
  }
  #pebbleBeige,#pebbleBeige2,#pebbleBeige3,#pebbleBeige4{
      background-color: #f2e4c5;
  }
  #pewterGrey,#pewterGrey2,#pewterGrey3,#pewterGrey4{
      background-color: #767673;
  }
  #brown,#brown2,#brown3,#brown4{
    background-color: #3a150d;
}
#mochaTan,#mochaTan2,#mochaTan3,#mochaTan4{
    background-color: #ad8e71;
}
#taupe,#taupe2,#taupe3,#taupe4{
    background-color: #483C32;
}
#black,#black2,#black3,#black4{
    background-color: #000;
}
#brightWhite,#brightWhite2,#brightWhite3,#brightWhite4{
    background-color: #FDFEFF;
    
}
#cardinalRed,#cardinalRed2,#cardinalRed3,#cardinalRed4{
    background-color: #C41E3A;
}
#galVolume,#galVolume2,#galVolume3,#galVolume4{
    background-color: #c0cad0;
}
#ivory,#ivory2,#ivory3,#ivory4{
    background-color: #ebd9c3;
}
#white,#white2,#white3,#white4{
    background-color: #fff;
    color: #000;
}
#charcoal,#charcoal2,#charcoal3,#charcoal4{
    background-color: #41413f;
}
#burnishSlate,#burnishSlate2,#burnishSlate3,#burnishSlate4{
    background-color: #211d1a;
}
#galleryBlue,#galleryBlue2,#galleryBlue3,#galleryBlue4{
    background-color: #09293c;
}
#slateBlue,#slateBlue2,#slateBlue3,#slateBlue4{
    background-color: #385864;
}
#clay,#clay2,#clay3,#clay4{
    background-color: #817a6b;
}
#brightRed,#brightRed2,#brightRed3,#brightRed4{
    background-color: #890100;
}
  /*  */
  #hawaiianblue,#lightStone,#pebbleBeige,#pewterGrey,#brightWhite,#galVolume,#hawaiianblue2,#lightStone2,#pebbleBeige2,#pewterGrey2,#brightWhite2,#galVolume2,#hawaiianblue3,#lightStone3,#pebbleBeige3,#pewterGrey3,#brightWhite3,#galVolume3,#hawaiianblue4,#lightStone4,#pebbleBeige4,#pewterGrey4,#brightWhite4,#galVolume4,#white1,#white2,#white3,#white4{
      color: #000;
  }
  .colorSelect option:active, .colorSelect option:hover, .colorSelect option:focus {
    outline: none;
    outline:0;
}
#burgundy:active,#burgundy:hover,#burgundy:focus{
    background-color: #600000;
    outline: #600000 !important;
}
/*  */
.activeRgb{
    background-image: url('../images/tickmark.webp');
    width: 50px;
    background-repeat: no-repeat;
    background-position: center;
}
.wainScotColorDiv{
    display: none;
}
.cardBodySize{
    padding: 0.9rem !important;
}
.sizeBtnsDiv{
    margin: 10px 0px;
}
.sizeBtnsDiv button{
    font-size: 0.64rem;
}
/*.range-slider__rangeOverall{*/
/*    cursor: not-allowed;*/
/*}*/
#myModal2 .modal-content{
    max-width: 300px !important;
}

/* NEW CSS */
.rangeSelect{
    width: 194px;
    /* text-align: center; */
}
/* default */
#roundWidth,#roundDepth,#roundHeight,#barnAllWidth,#barnCenterWidth,#barnDepth,#barnHeight,#commercialWidth,#commercialDepth,#commercialHeight{
    display: none;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      
      .watermark{
        position: absolute;
        height: 100px;
        top: 35%;
        left: 25%;
        opacity: 0.4;
        z-index: 1111;
    }

}