@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: rgb(198, 198, 198);
  font-family: 'Poppins', sans-serif !important;
  overflow: hidden;
}
.logoDiv {
  position: absolute;
  top: 5%;
  left: 40%;
  text-align: center;
}
/* .logoImg {
  width: 100%;
} */
.logoHdng {
  margin-top: 20px;
}

.main {
    height: 100%;
    width: 100%;
}
.iframe-box {
    position: relative;
    height: 100vh;
    width: 100vw;
}
.configure-content {
    border: 1px solid;
}
.left-accordions {
    /* border: 1px solid; */
    border-right: 2px solid;
    position: absolute;
    left: 15%;
    top: 30%;
    height: 350px;
    width: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}


.left-accordions::-webkit-scrollbar {
  width: 1px;
}
.left-accordions::-webkit-scrollbar-track {
  background: none;
}
.left-accordions::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.left-accordions::-webkit-scrollbar-thumb:hover {
  background: black;
}



.accordions-box {
  border-left: 2px solid;
  position: absolute;
  top: 30%;
  right: 10%;
  height: 350px;
  width: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.accordions-box::-webkit-scrollbar {
  width: 2px;
}
.accordions-box::-webkit-scrollbar-track {
  background: none;
}
.accordions-box::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.accordions-box::-webkit-scrollbar-thumb:hover {
  background: black;
}





  /* .nav-wrap {
    width: 100%;
    margin: 1em auto 0;
  }
  @media (min-width: 992px) {
    .nav-wrap {
      width: 50%;
    }
  }
  [hidden] {
    display: none;
    visibility: hidden;
  } */
  .acnav {
    width: 100%;
  }
  .acnav__list {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  /* .acnav__list--level1 {
    border: 1px solid #fcfcfc;
  } */
  .has-children > .acnav__label::before {
    content: "\f067";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    margin-right: 1em;
    transition: transform 0.3s;
  }
  .has-children.is-open > .acnav__label::before {
    transform: rotate(405deg);
  }
  .acnav__link, .acnav__label {
    display: block;
    font-size: 1.1rem;
    padding: 10px 1em;
    margin: 0;
    cursor: pointer;
    color: black;
    /* background: #317589; */
    /* box-shadow: inset 0 -1px #3988a0; */
    transition: color 0.25s ease-in, background-color 0.25s ease-in;
  }
  /* .acnav__link:focus, .acnav__label:focus, .acnav__link:hover, .acnav__label:hover {
    color: #e3e3e3;
    background: #2d6b7e;
  } */
  .acnav__link--level2, .acnav__label--level2 {
    padding-left: 2em;
    /* background: #2d6b7e; */
  }
  /* .acnav__link--level2:focus, .acnav__label--level2:focus, .acnav__link--level2:hover, .acnav__label--level2:hover {
    background: #296272;
  } */
  .acnav__link--level3, .acnav__label--level3 {
    padding-left: 3em;
    /* background: #296272; */
  }
  /* .acnav__link--level3:focus, .acnav__label--level3:focus, .acnav__link--level3:hover, .acnav__label--level3:hover {
    background: #255867;
  } */
  .acnav__link--level4, .acnav__label--level4 {
    padding-left: 6em;
    /* background: #255867; */
  }
  /* .acnav__link--level4:focus, .acnav__label--level4:focus, .acnav__link--level4:hover, .acnav__label--level4:hover {
    background: #214f5c;
  } */
  .acnav__list--level2, .acnav__list--level3, .acnav__list--level4 {
    display: none;
  }
  .is-open > .acnav__list--level2, .is-open > .acnav__list--level3, .is-open > .acnav__list--level4 {
    display: block;
  }
  

  /* Colors  */
  
.color-circles,.numberColor-circles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: center;
  text-align: center;
  margin: 0 auto; */
  gap: 8px;
  padding: 10px 0;
}

  .colors,.numberColors,.fluorColors {
  /*border: 0.1px solid #aaaaaa;*/
  border-radius: 50%;
  height: 30px;
  width: 30px;
  cursor: pointer;
}
.colors.active,.numberColors.active,.fluorColors.active{
  border: 0.1px solid #aaaaaa;
}
/* .colors:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
} */
.colors:focus-visible,.numberColors:focus-visible {
  border: 2px solid black;
  padding: 10px;
}

.colors-active,.numberColors-active {
  border: 2px solid black;
  padding: 6px;
}

.svg-div {
  /* border: 2px solid #ccc;
  background-color: #20202033; */
  height: 100%;
  width: 80%;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 10px 30px;
}
.numbersSelect{
    width: 100%;border: 1px solid #b9b2b2;padding: 3px 15px;
}

#gold {
    background-color: #fbc308;
}
#white {
    background-color: #fffffe;
}
#black {
    background-color: #0e090c;
}
#sky {
    background-color: #b0d9f4;
}
#nzSky {
    background-color: #66abdd;
}
#royal {
    background-color: #1477c6;
}
#navy {
    background-color: #082242;
}
#red {
    background-color: #dd1044;
}
#maroon {
    background-color: #740232;
}
#bottle {
    background-color: #005d45;
}



#gold2 {
  background-color: #fbc308;
}
#white2 {
  background-color: #fffffe;
}
#black2 {
  background-color: #0e090c;
}
#sky2 {
  background-color: #b0d9f4;
}
#nzSky2 {
  background-color: #66abdd;
}
#royal2 {
  background-color: #1477c6;
}
#navy2 {
  background-color: #082242;
}
#red2 {
  background-color: #dd1044;
}
#maroon2 {
  background-color: #740232;
}
#bottle2 {
  background-color: #005d45;
}




#gold-hood {
  background-color: #fbc308;
}
#white-hood {
  background-color: #fffffe;
}
#black-hood {
  background-color: #0e090c;
}
#sky-hood {
  background-color: #b0d9f4;
}
#nzSky-hood {
  background-color: #66abdd;
}
#royal-hood {
  background-color: #1477c6;
}
#navy-hood {
  background-color: #082242;
}
#red-hood {
  background-color: #dd1044;
}
#maroon-hood {
  background-color: #740232;
}
#bottle-hood {
  background-color: #005d45;
}






.drop-zone {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt {
  color: black;
  font-size: 12px;
}






.drop-zone2 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over2 {
  border-style: solid;
}

.drop-zone__input2 {
  display: none;
}

.drop-zone__thumb2 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt2 {
  color: black;
  font-size: 12px;
}


/* ====== */
.drop-zone3 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over3 {
  border-style: solid;
}

.drop-zone__input3 {
  display: none;
}

.drop-zone__thumb3 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt3 {
  color: black;
  font-size: 12px;
}

/* ====== */
.drop-zone4 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over4 {
  border-style: solid;
}

.drop-zone__input4 {
  display: none;
}

.drop-zone__thumb4 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt4 {
  color: black;
  font-size: 12px;
}

/* ====== */
.drop-zone5 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over5 {
  border-style: solid;
}

.drop-zone__input5 {
  display: none;
}

.drop-zone__thumb5 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt5 {
  color: black;
  font-size: 12px;
}

/* ====== */
.drop-zone6 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over6 {
  border-style: solid;
}

.drop-zone__input6 {
  display: none;
}

.drop-zone__thumb6 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt6 {
  color: black;
  font-size: 12px;
}

/* ====== */
.drop-zone7 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over7 {
  border-style: solid;
}

.drop-zone__input7 {
  display: none;
}

.drop-zone__thumb7 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt7 {
  color: black;
  font-size: 12px;
}

/* ====== */
.drop-zone8 {
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 1px dashed black;
  border-radius: 2px;
}

.drop-zone--over8 {
  border-style: solid;
}

.drop-zone__input8 {
  display: none;
}

.drop-zone__thumb8 {
  height: 100%;
  width: 900px !important;
  border-radius: 2px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}
.drop-zone__prompt8 {
  color: black;
  font-size: 12px;
}


/* .drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
} */



.right-btuns {
    position: absolute;
    top: 85%;
    right: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.config-btns {
  color: black;
  width: 190px;
  padding: 8px;
  background: none;
  transition: all 0.4s ease;
  border: 2px solid rgb(45, 45, 45);
}
.config-btns:hover {
  background-color: black;
  color: white;
}



.cen {
  display: flex;
  justify-content: center;
  align-items: center;
}

.patterns-circles {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2px solid black;
  padding-top: 20px;
}
.patterns-img {
  height: 60px;
  width: 60px;
  border-radius: 60px;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
}
#London {
  background-image: url('patterns/1.jpg');
}
#Moscow {
  background-image: url('patterns/2m.jpg');
}
#Madrid {
  background-image: url('patterns/3.jpg');
}
#Budapest {
  background-image: url('patterns/4.jpg');
}
#Kiev {
  background-image: url('patterns/5.jpg');
}
#Prague {
  background-image: url('patterns/6.jpg');
}
#Lisbon {
  background-image: url('patterns/7.jpg');
}
#Belgrade {
  background-image: url('patterns/8.jpg');
}
#Helsinki {
  background-image: url('patterns/9.jpg');
}
#Vienna {
  background-image: url('patterns/10.jpg');
}
#Amsterdam {
  background-image: url('patterns/11.jpg');
}
#Athens {
  background-image: url('patterns/12.jpg');
}
#Nicosia {
  background-image: url('patterns/13.jpg');
}
#Monaco {
  background-image: url('patterns/14.jpg');
}
#Last {
  background-image: url('patterns/15.jpg');
}
/* #Last {
  background-image: url('patterns/16');
} */


.patterns-img-active {
  border: 3px solid black;
}

/* SWIPER CSS START */
:root {
  --swiper-navigation-size: 30px !important;
}
.swiper-container {
  width: 500px;
  height: 60px;
  overflow: hidden;
}
/* .swiper-wrapper {
  pointer-events: none;
} */
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.swiper-button-next,
.swiper-button-prev {
  color: black !important;
  top: var(--swiper-navigation-top-offset,55%) !important;
  width: calc(var(--swiper-navigation-size)/ 30 * 27);
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset,-10px) !important;  
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset,-10px) !important;
}
.swiper-button-next:focus,
.swiper-button-prev:focus {
  outline: none;
}

/* SWIPER CSS END */



/*  ===========   Media Queries For Responsive  ========== */

/* Tablet & Mobile */
@media only screen and (min-device-width: 300px) and (max-device-width: 1000px) {
  .logoDiv {
    top: 10px;
    right: 10px;
    left: unset;
  }
  .logoImg {
    width: 60px;
  }
  .logoHdng {
    margin-top: 20px;
    font-size: 15px;
  }
  .acnav__label {
    font-size: 12px;
  }

  .left-accordions {
    position: absolute;
    left: 0;
    top: 0;
    height: 250px;
    width: 200px;
    padding: 10px 0px 0px 10px;
    border: none;
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }

  .left-accordions::-webkit-scrollbar {
    width: 2px;
  }
  .left-accordions::-webkit-scrollbar-track {
    background: none;
  }
  .left-accordions::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 5px;
  }
  .left-accordions::-webkit-scrollbar-thumb:hover {
    background: black;
  }
  

  .swiper-container {
    height: 60px;
    width: 300px;
  }
  :root {
    --swiper-navigation-size: 20px !important;
  }
  .accordions-box {
    top: unset;
    bottom: 80px;
    left: 0;
    height: 180px;
    width: 200px;
    border: none;
    border-radius: 5px;
    overflow-y: scroll;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .patterns-circles {
    bottom: 0;
  }
  /* .cen {
    justify-content: flex-end;
  }
  .patterns-circles {
    top: 0;
    bottom: unset;
    padding-top: 0;
    border-top: none;
    border-right: 2px solid black;
    padding-right: 10px;
    flex-direction: column;
    gap: 10px;
  } */
  .patterns-img {
    height: 50px;
    width: 50px;
    border-radius: 30px;
  }

.right-btuns {
  display: none;
}
  
.btuns-mobile {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.config-btnsImg {
  color: black;
  padding: 10px;
  background: none;
  transition: all 0.4s ease;
  border: none;
}
}    

/* Laptop */
@media only screen and (min-device-width: 1001px) and (max-device-width: 1220px) {
  .left-accordions {
    left: 1%;
  }
  .accordions-box {
    right: 0;
  }
  .right-btuns {
    right: 7%;
  }
}