/* Plus Jakarta Sans, self-hosted.
 *
 * This replaced an @import of fonts.googleapis.com. An @import is the slowest
 * way to load a webfont: the browser has to download this stylesheet, parse
 * the first line, fetch a second stylesheet from Google, parse that, and only
 * then start on the font itself. Three round trips to two extra hosts before a
 * single glyph renders, plus the visitor's IP handed to Google on every view.
 *
 * One file per unicode subset covers every weight -- Plus Jakarta Sans is a
 * variable font, so 200 through 800 come out of the same 27 KB. That matters
 * here: the stylesheets use font-weight 500 eighteen times and 600 once, and
 * the five static .woff files previously staged in this folder covered neither.
 * They are deleted; this supersedes them.
 *
 * font-weight below is a RANGE, not a value. Do not "fix" it to a single
 * number -- that is what tells the browser one file serves all weights.
 *
 * Only latin and latin-ext are shipped, which covers NL, DE and EN. Google's
 * CSS also offers cyrillic-ext and vietnamese; add them the same way if the
 * site ever needs those scripts.
 *
 * font-display: swap keeps text visible in the fallback while the font loads,
 * matching what the Google CSS asked for.
 *
 * Licence: SIL Open Font License 1.1 -- see fonts/PlusJakartaSans/OFL.txt.
 * Self-hosting is explicitly permitted; the licence must travel with the files.
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/PlusJakartaSans/PlusJakartaSans-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/PlusJakartaSans/PlusJakartaSans-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@-webkit-keyframes lds-roller {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes lds-roller {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

body {
  background-color: #fff;
  min-width: 350px;
  min-height: 450px;
  overflow: hidden;
  font-size: .85rem;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

::-webkit-scrollbar {
  position: absolute;
  left: 0;
  width: 8px;
}

.scrollable {
  width: 99%;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #dcdcdc;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(136, 136, 136, 0.583);
}

::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.template_img {
  width: 100% !important;
  padding: 0 15px;
}

.alert {
  display: none !important;
}

.btnvjSelection .fa-solid {
  display: none;
  margin-right: 0;
  color: #eef1f4;
}

.btnvjSelection.active .fa-solid {
  display: inline !important;
  margin-right: 0.18vw;
  color: #333 !important;
}

.moduleicon {
  display: inline-block;
  background-image: url("/Images/icons/bus open dicht icon-05.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

a::-moz-selection,
div::-moz-selection,
h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection,
label::-moz-selection,
li::-moz-selection,
p::-moz-selection,
span::-moz-selection {
  background-color: #e37e2b;
  color: #fff;
}

a::selection,
div::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
label::selection,
li::selection,
p::selection,
span::selection {
  background-color: #e37e2b;
  color: #fff;
}

#vjShowHideUIIcon::-moz-selection,
.vjCircle::-moz-selection,
.vjVink::-moz-selection,
img::-moz-selection {
  background: 0 0;
}

#vjShowHideUIIcon::selection,
.vjCircle::selection,
.vjVink::selection,
img::selection {
  background: 0 0;
}

a,
button,
h1,
h2,
h3,
h4,
h5,
h6,
input,
p {
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

button,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.qpopupimg {
  position: relative;
  left: 0;
  width: 3vw;
}

.qpopupmessage {
  position: relative;
  top: -1vh;
  left: 0.5vw;
  font-weight: 700;
}

.qpopupprice {
  position: relative;
  top: 1vh;
  left: 0.5vw;
}

.qpopupicon {
  position: relative;
  left: -0.5vw;
  float: left;
  z-index: 10;
  margin-top: 2px;
  border: 1px solid #e37e2b;
  border-radius: 100%;
  background-color: #e37e2b;
  width: 2rem;
  height: 2rem;
  color: #fff !important;
  font-size: 1.25rem;
  line-height: normal;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#vjProgressBar {
  border-radius: 0 15px 10px 10px;
  background-color: #e37e2b !important;
}

.vjBasisCostOverviewContainer h5 {
  margin-bottom: 16px;
}

.progress {
  z-index: 1;
  height: 0.75rem;
}

#busModels {
  margin-top: -1rem;
  margin-bottom: 2rem;
  border-radius: 2%;
  background-color: #ece3dc;
  padding-bottom: 1rem;
}

#busModels li {
  line-height: 1.5;
  list-style-type: none;
}

#busModels ul {
  margin-top: -0.5rem;
  list-style: none;
}

.vjVink {
  padding-right: 8px;
  color: #46cc82;
}

#busModelsText {
  margin-left: 2rem;
  padding-top: 1rem;
  font-weight: 700;
}

#ofJorn,
.transmissionDriveBtn:hover,
.transmissionDriveBtn:hover::before {
  color: #e37e2b;
}

#OpenExisting {
  padding: 0 !important;
}

#OpenExisting .bus-card-button {
  border-radius: 25px;
  padding: 1em;
  line-height: 1.2;
}

.bus-card {
  color: #333 !important;
}

.bus-card p {
  margin-bottom: 0 !important;
}

#qmaze-vj-sleepAndSit {
  background-color: #fff;
  width: 20rem;
}

#vjProgressBarContainer {
  width: 100%;
  height: 10px;
}

#vj-afspraakmaken-modal .modal-dialog {
  min-height: 700px;
  width: 400px;
}

#vj-afspraakmaken-modal .modal-dialog iframe {
  min-height: 700px !important;
}

#vjLogo {
  width: auto;
  height: 3.5rem;
}

#btnvjMyVan,
#btnvjMyVan.active {
  margin-left: 0.5rem;
  border: 1px solid #eef1f4;
  border-radius: 25px;
  background-color: #fff;
  color: #333;
}

#btnvjMyVan.active {
  border: 1px solid #fff;
  background-color: #e37e2b;
  color: #fff;
}

#nextPageMyVan {
  display: none;
}

#btnvjMyVan:hover,
#vj3DExplanation:hover {
  cursor: pointer;
}

.btnvjContinue {
  border-radius: 30%;
  padding: 0.5rem;
}

#btnContinueContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: flex-end;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 2.5rem;
}

.vjProductNameLg {
  display: inline-block;
}

.buskosten,
.gewichtBtn {
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.buskosten {
  display: inline-flex;
  position: absolute;
  right: 65px;
  align-items: center;
  transition: color 0.3s;
  cursor: initial !important;
  margin-top: -52px;
  border: 0 !important;
  padding: 2px 8px !important;
  color: #fff !important;
  font-size: 12px;
}

.gewichtBtn {
  margin-top: 6px;
  border-radius: 100px;
  background-color: #eef1f455;
  color: #333;
  font-size: 10px;
}

.gewichtBtn,
.gewichtBtnGrey,
.transmissionDriveBtn {
  display: inline-flex;
  position: relative;
  align-items: center;
  transition: color 0.3s;
  border: 0 !important;
  padding: 2px 8px !important;
}

.gewichtBtnGrey {
  margin-top: -1px;
  border-radius: 100px;
  background-color: #ccc;
  color: #333;
  font-weight: 500;
  font-size: 10px;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.transmissionDriveBtn {
  border-radius: 25px;
  background-color: #eef1f4;
  font-size: 12px;
}

.transmissionDriveBtn::before {
  transition: color 0.3s;
  margin-right: 6px;
  content: "";
  color: #a9a9a9;
  font-weight: 900;
  font-size: 10px;
  font-family: "Font Awesome 5 Free";
}

.btnvjReturn {
  margin-top: 0.25rem;
  border-radius: 25px;
  background-color: #fff;
  color: #333;
}

.btnvjAfspraak {
  margin-bottom: 4px;
}

.btnvjAfspraak,
.btnvjBellen {
  width: 70% !important;
  color: #333 !important;
  font-size: 14px;
  font-family: unset !important;
  text-align: left;
}

.imgvjAfspraakBellen {
  float: inline-end;
  width: 24px;
}

@media only screen and (max-width: 1700px) {
  .btnvjAfspraak,
  .btnvjBellen {
    width: 44% !important;
    font-size: 12px;
  }

  .imgvjAfspraakBellen {
    width: 16px;
  }
}

@media only screen and (max-width: 1402px) {
  #vjAfspraakText,
  #vjBellenText {
    display: none;
  }

  .btnvjAfspraak,
  .btnvjBellen {
    width: 40% !important;
    text-align: center;
  }

  .imgvjAfspraakBellen {
    float: none;
    width: 24px;
  }
}

#save-configuration-modal-buttons {
  margin-top: 15px;
}

#save-configuration-modal-message {
  margin-bottom: 5px;
  margin-left: 0;
}

.btnvjSave {
  border-radius: 25px;
  background-color: #7fbc43;
  color: #fff;
}

.btnvjSave:hover {
  background-color: #6ea33a;
  color: #fff;
}

.color-black {
  color: #333 !important;
}

.color-red {
  color: red;
}

#vj3DExplanation {
  margin-top: 4rem;
  margin-right: 0;
  margin-bottom: 0.9rem;
  margin-left: 0.3rem;
  border-radius: 2rem 0 0 2rem;
  background-color: #333;
  width: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
}

#vjHeaderContainer {
  z-index: 1;
}

#vjLogoContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#vjHeaderContainer .col-4 {
  max-width: calc(50% - 107px);
  flex: unset;
}

#vjHeaderContainer #vjLogoContainer.col-4 {
  max-width: 214px;
  flex: unset;
}

#vjHeader {
  display: -webkit-box;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#vj3DControls,
#vjToTopContainer {
  position: absolute;
  bottom: 0;
  z-index: 1;
}

#vj3DControls,
.vjCircle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#vj3DControls {
  right: 0;
}

.vjCircle {
  position: sticky;
  margin-left: 0.5rem;
  box-shadow: 3px 3px 55px -15px rgba(180, 180, 180, 0.388);
  border: 1px solid #eef1f4;
  border-radius: 100%;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.vjCircle.active:hover {
  color: #fff !important;
}

.vjCircle.active {
  background-color: #e37e2b;
  color: #fff;
}

.vjCircle.visited:hover {
  background-color: #e8e7e7;
}

.vjCircle.finished {
  background-color: #48c77d;
}

.vjCircle a {
  color: #333;
}

#vjToTopContainer {
  left: 0;
  margin: 0;
}

.btnvjToTop {
  background-color: #eef1f4;
  color: #e37e2b;
}

#vjPriceContainer {
  margin: 0;
  border-top: solid 1px #888;
  padding: 10px 0 0;
  overflow: hidden;
}

#vjPriceContainer #vjPriceL {
  float: left;
  font-weight: 700;
  font-size: 0.75rem;
}

#vjPriceContainer #vjPriceR {
  float: right;
  margin: 0;
  padding: 0;
}

#vjPriceContainer #vjPriceR .row {
  float: right;
  margin: 0;
  width: 80%;
}

.vjProductCardLg {
  float: left;
  margin: 1rem 0;
  padding: 0;
}

.vjProductCardLg:nth-child(1) {
  margin-top: 2vh;
}

.vjColorImgLg {
  border-radius: 1rem;
  width: 100%;
}

.vjColorImgLg:hover {
  -webkit-box-shadow: 5px 10px #eef1f4;
  box-shadow: 5px 10px #eef1f4;
  color: #eef1f4;
}

.vjColorImgSm {
  border-radius: 5%;
  width: 100%;
  height: 10vh;
}

.vjColorPriceLg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  bottom: 2rem;
  margin-right: 0.5rem;
  text-align: right;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  color: #333 !important;
}

#vjProductsPopular {
  overflow: hidden auto;
}

.vjTextCard .vjProductMinus,
.vjTextCard .vjProductPlus {
  display: block;
  float: left;
  margin-top: 2rem;
  margin-left: 2rem;
}

.vjTextCard {
  margin-bottom: 1rem;
  height: 20vh;
  line-height: 1.5rem;
}

.vjTextCardName {
  float: left;
  width: 90%;
  font-weight: 700;
  font-size: 1.3rem;
}

.vjTextCardDescription {
  float: left;
  line-height: 1.5;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-width: 80% !important;
  overflow: hidden;
}

.vjTextCardInfo,
.vjTextCardPrice {
  float: left;
}

.vjTextCardInfo .fas.fa-info-circle {
  padding: 0;
  width: 16px;
  height: 16px;
}

.fa-info-circle {
  border: 1px solid #333 !important;
  border-radius: 50% !important;
  background-color: #333 !important;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  color: #fff !important;
}

.fa-info-circle:hover {
  cursor: pointer;
  border: 1px solid #e37e2b !important;
  background-color: #e37e2b !important;
}

.vjCollapseIcon {
  position: relative;
  top: -10%;
}

.vjProductCardContainerL {
  float: left;
}

.vjProductCardContainerR {
  float: right;
  padding: 0;
  padding-left: 1.5rem;
}

#overview-total-weight {
  position: absolute;
  top: 2.7rem;
  right: 17px;
  font-size: 90%;
}

#vjPriceR .vjPriceText {
  position: absolute;
  top: 3.9rem;
  right: 1rem;
  height: 100%;
  font-weight: 700;
  font-size: 0.5rem;
  line-height: 0.75rem;
  text-align: end;
}

.btnvj,
.btnvjWhite {
  border-radius: 25px;
  background-color: #e37e2b;
  color: #fff;
}

.btnvjWhite {
  border: 0 solid #e37e2b !important;
  background-color: #fff;
  color: #e37e2b;
}

.btnvjWhite:hover {
  color: #e37d29;
  font-weight: 700;
}

.btn {
  margin-right: 5px;
  font-weight: 700;
}

.btn.focus,
.btn:focus {
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 0 !important;
  box-shadow: 0 0 0 0 !important;
}

.btnvj:hover {
  background-color: #cb7025;
  color: #fff;
}

.vjTotalPrice {
  height: 5rem;
}

.vjTotalPrice img {
  position: absolute;
  margin-left: 0;
  width: 100%;
  height: 3rem;
}

.vjTotalPrice .overview-total-price {
  position: absolute;
  top: 0.6rem;
  padding-right: 15px;
  width: 100%;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: "Plus Jakarta Sans" !important;
  text-align: right;
}

#btnvjContinue {
  width: 20%;
}

#btnvjPreviousSm {
  border-radius: 25px;
  background-color: #eef0f3;
  width: 20%;
  color: #333;
}

#btnvjOverviewPrevious {
  position: absolute;
  top: 2%;
  right: -5%;
  padding: 0.5rem 1rem;
  width: auto;
  font-weight: 700;
}

.vjBasisIntro {
  padding: 0 1rem;
}

.vjBasisCostOverviewContainer .vjBasisCostOverview .checkmark::after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.vjBasisCostOverviewContainer {
  display: inline-block;
  width: 100%;
  line-height: 1.5rem;
}

.vjBasisCostOverviewContainer .vjBasisCostOverview {
  padding: 0;
}

.vjBasisCostOverviewContainer .vjBasisCostOverview:first-child {
  padding-right: 1rem;
}

.vjBasisCostOverview {
  float: left;
}

.vjBasisOrange {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 5%;
  border-radius: 10px;
  background-color: #e37e2b;
  padding: 7px 0;
  width: 100%;
  max-width: 100%;
  min-height: 5rem;
  color: #fff;
}

.vjBasisOrange p {
  display: inline-block;
  margin-left: 1rem;
  max-width: 75%;
}

.vjBasisOrange img {
  position: absolute;
  right: 0;
  width: 20%;
}

#vjBasisCostRoofSelection,
#vjBasisCostWindowSelection,
.vjBasisCostOverviewChecksContainer {
  border-radius: 10px;
  background-color: #fff;
}

.vjBasisCostOverviewChecksContainer {
  margin-top: 1vh;
  padding-top: 10px;
}

#vjProductContainerOldBus {
  height: auto;
}

#vjBasisCostOverviewChecks,
.vjBasisCostOverviewChecks {
  margin-right: -10px;
  margin-left: 10px;
  padding: 3px;
  list-style: none;
}

.vjPriceAccent {
  color: #e37e2b;
}

.vjPrice {
  margin: 0;
  padding: 0;
}

.qmaze-vj-productList {
  border-radius: 10px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow: auto;
  color: #333;
}

.qmaze-vj-productList .qmaze-list-picker {
  display: inline-block;
  width: 100%;
}

#vjBekledingProducts > :nth-child(1) {
  margin-bottom: 4vh;
  height: 15vh;
}

#vjLakProducts .vjRadioDesignContainer .checkmark {
  position: absolute;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  cursor: pointer;
}

#vjLakProducts {
  padding: 1rem 0 0 .5rem;
}

.vjConfigurationProductList {
  margin-bottom: 1vw;
  margin-left: -0.5vw;
  background-color: #fff;
  padding: 0 1rem;
  width: 99%;
  height: 57vh;
  overflow: auto;
  color: #333;
}

.vjConfigurationProductList #accordion {
  background-color: #fff;
  padding: 1rem;
}

.vjConfigurationProductList #accordion .card {
  border: 0;
}

.vjConfigurationList {
  padding-right: 0;
  padding-left: 1rem;
}

#vjUIContainer {
  position: relative;
  top: -3.5rem;
  height: calc(100vh - 0.75rem);
}

.vjConfigurationContainer {
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(90px);
  margin-left: 0.85rem;
  box-shadow: 3px 3px 55px -15px rgba(180, 180, 180, 0.388);
  border: 0.5px solid #acacac54;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.45);
  padding-top: 0.75rem;
  padding-left: 0.2rem;
  height: calc(95vh - 6rem);
  overflow: hidden auto;
}

.vjConfigurationContainer .scrollable {
  position: absolute;
  height: 80%;
  overflow: hidden scroll;
}

.vjConfigurationContainer .sticky {
  position: absolute;
  top: 80%;
  padding-right: 0 !important;
  width: 98%;
}

.qmaze-vj-productContainer {
  border-radius: 10px;
}

.vjBasisCostOverview .vjRadioDesignContainer {
  margin-top: -5px;
  margin-bottom: -7px;
  border-radius: 8px;
  background-color: #fff;
  padding: 0.2rem 0.5rem;
}

#vjShowHideUI,
.vjRadioDesignContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.vjRadioDesignContainer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-top: 0.5rem;
}

#vjShowHideUIIcon:hover {
  cursor: pointer;
}

#vjShowHideUI {
  position: relative;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
  border-radius: 0 50% 50% 0;
  background-color: #e37e2b;
  width: 2.5rem;
  height: 40px;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#vjShowHideUIIcon {
  position: relative;
  height: 100%;
  font-weight: 700;
}

#qmaze-vj-variables,
#vjRadioSelection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#qmaze-vj-variables {
  position: relative;
  margin-bottom: -2vh;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 10;
}

#qmaze-vj-variables a:hover,
#vjConfigPopupSelection a:hover {
  color: #e37e2b;
  text-decoration: none;
}

#vjRadioSelection {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 1rem;
  margin-left: 1rem;
  border-radius: 2%;
  background-color: #e37e2b;
  color: #fff;
}

.qmaze-vj-productList .vjProductCard .vjRadioContainer {
  position: relative;
  top: -2.75rem;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
}

.vjIntroTitle {
  padding: 1rem;
  padding-bottom: 5px;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.visited {
  color: #e37e2b;
}

#vjPriceOverviewTitle {
  margin: 1rem 0;
  text-align: center;
}

#vjContainerP5 .btn {
  margin-top: 0.5rem;
}

#vjHeader .btn {
  font-size: .85rem;
  margin: 2.5px;
}

.btnvjOverview {
  margin: 0 2.5%;
  width: 95% !important;
}

.vjPRiceOverviewButtons {
  margin-top: -5%;
}

#overview-amount-accessoires,
#overview-amount-modules,
#overview-amount-styling {
  padding: 0 0.5rem;
}

#vjContainerP5 {
  height: calc(95vh - 6rem);
  overflow: hidden auto;
}

#vjContainerP5 .vjConfigurationProductList {
  background-color: transparent;
}

#vjContainerP5 .vjPriceText {
  position: absolute;
  top: 3rem;
  margin-left: 2.5rem;
  font-weight: 700;
  font-size: 0.5rem;
  line-height: 0.75rem;
}

#vjContainerP5 .card {
  margin-top: 1rem;
  border-bottom: 0;
}

#vjContainerP5 .card-header {
  margin: 0 1rem !important;
  border: 1px solid #333 !important;
  background-color: #fff !important;
}

#vjContainerP5 .collapse,
#vjContainerP5 .collapsing {
  margin-right: 1rem;
  margin-left: 1rem;
  border: 1px solid #333;
}

.vjOverviewPriceAndWeight {
  display: flex;
  margin: 0 1rem;
}

.vjOverviewPriceAndWeight > .vjOverviewPrice {
  margin-right: 0;
  width: 50%;
}

.vjOverviewWeight {
  width: 50%;
}

.vjOverviewPrice {
  margin-right: 1rem;
  color: #e37d2b;
  text-align: right;
}

.btn.vjCollapseBtn {
  float: right;
  margin-top: -5%;
  border-radius: 100%;
  background-color: #333;
  padding: 0;
  width: 25px;
  height: 25px;
  color: #fff;
}

#vjCamper3D {
  position: absolute;
  z-index: 0;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.vjProductPriceLg {
  display: flex;
  margin-top: 5px;
  font-weight: 700;
}

.vjProductWeight {
  margin-left: 25px;
  color: #929ba3;
  font-weight: 500;
}

.vjProductTitle {
  padding-top: 0.5rem;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.vjProductImage {
  width: 100%;
  height: 5vh;
}

.vjProductImgLg {
  float: right;
  margin-left: 5px;
  max-width: 70%;
}

.vjProductCard {
  float: left;
  margin-bottom: 1rem;
  width: 50%;
  line-height: 1.5;
}

.vjProductCard.container {
  display: flex;
  flex-direction: column;
}

.vjRadio {
  position: relative;
  top: -125%;
  left: -5%;
}

.vjProductDescriptionLg {
  width: 100%;
  line-height: 1.5;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#vjColorContainerText {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
}

.vjColorCardLg {
  padding-bottom: 1rem;
}

.vjColorCardContainerL {
  height: 15vh;
}

#vjContainerP4 .vjProductInfoLg {
  float: right;
}

.vjProductInfoLg {
  float: right;
  width: 10%;
}

.vjProductCard .form-check {
  float: left;
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.controlActive {
  margin: 5px;
  box-shadow: 0 0 13px rgba(151, 151, 151, 0.6);
  background-color: #e37e2b !important;
  color: #fff !important;
}

.vjProductAlterContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 108px;
}

.vjProductMinus:hover,
.vjProductPlus:hover {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.vjProductMinus.disabled,
.vjProductPlus.disabled {
  border: 1px solid #fff;
  background-color: #979797;
  color: #fff;
}

.vjProductMinus,
.vjProductPlus {
  float: left;
  z-index: 10;
  margin-top: 2px;
  border: 1px solid #e37e2b;
  border-radius: 100%;
  background-color: #e37e2b;
  width: 2rem;
  height: 2rem;
  color: #fff !important;
  font-size: 1.25rem;
  line-height: normal;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.vjProductCounter {
  -webkit-transform: translateY(-1rem);
  -ms-transform: translateY(-1rem);
  transform: translateY(-1rem);
  border: 1px solid #fff;
  border-radius: 0 0 1rem 1rem;
  background-color: #d8d8d8;
  width: 2rem;
  height: 2.5rem;
  color: #979797 !important;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
}

.vjProductCounter:hover {
  text-decoration: none;
}

#vj3DControl2D:hover,
#vj3DControl3D:hover,
#vj3DControlsMinus:hover,
#vj3DControlsPlus:hover {
  cursor: pointer;
}

#vj3DControlOpenClose a {
  margin: 5px;
  box-shadow: 0 0 13px rgba(151, 151, 151, 0.6);
  cursor: pointer;
}

#vj3DControl2D,
#vj3DControl3D,
#vj3DControlClose,
#vj3DControlOpen,
/* .vjDelete / .vjReset are the class twins for report 156's copies of these
   buttons. 92 and 156 both rendered id="vjDelete" and id="vjReset" into the
   same composed page -- 92 owns the control group (vj3DControlsMinus and
   vj3DControlsPlus exist only there), so 156's became classes. A bare id
   selector styles every duplicate, so the twins are needed to keep 156's
   buttons looking the same. */
#vj3DControlsMinus,
#vj3DControlsPlus,
#vjDelete,
.vjDelete,
#vjReset,
.vjReset {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-width: 0;
  border-radius: 100%;
  background-color: #eef0f400;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#vj3DControlClose img {
  margin-bottom: 0 !important;
}

.control-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(90px);
  margin: 0.9rem;
  border: 0.5px solid #acacac54;
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#vjVanPopup,
.vjInitialPopup,
.vjPopup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 9999;
  height: 100vh;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  position: fixed;
  justify-content: center;
}

.vjInitialPopup,
.vjPopup {
  width: 100vw;
  -webkit-box-align: center;
  -ms-flex-align: center;
  position: absolute;
  align-items: center;
}

#vjVanPopupBackground {
  position: fixed;
  opacity: 0.8;
  background-color: #333;
  width: 100%;
  height: 100%;
}

#vjInitialPopupBusSelection {
  float: left;
  width: 100%;
}

#vjInitialPopup h5,
#vjInitialPopup label,
#vjInitialPopup p {
  font-size: 1rem !important;
}
#vjInitialPopupContent,
.vjInitialPopupContent,
.vjPopupContent{
  width: 50vw;
  min-height: 500px;
}
#vj-open-existing-modal #vjInitialPopupContent,
#vj-open-existing-modal .vjInitialPopupContent{
  padding-bottom: 0;
  width: auto !important;
}

#vj-open-existing-modal #vj-open-existing-body {
  background-color: #eef1f4;
}

#vjInitialPopupBusContainer .vjRadioDesignContainer .checkmark::after {
  top: 0 !important;
  left: 0 !important;
  width: 25px !important;
  height: 25px !important;
}

#vjInitialPopupBusContainer .vjRadioDesignContainer .checkmark {
  border: 0 !important;
}

#vjInitialPopupBusContainer h5,
.vjInitialPopupVanContainer {
  float: left;
}

.vjInitialPopupVanContainer img {
  width: 100%;
  height: auto;
}

.vjInitialPopupVanContainer p {
  line-height: 1.3rem;
}

#vjInitialPopupButtonContainer {
  position: relative;
  top: -2.5%;
  min-width: 250px;
}

#vjInitialPopupBusContainer {
  margin-top: 3%;
}

#vjInitialPopupBusContainer p {
  float: left;
  text-align: left;
}

#vjInitialPopupSelectionContainer {
  border-radius: 10px;
  background-color: #dadadb;
  width: 100%;
  height: 100%;
  color: #333;
}

.vjInitialPopupSelectionWhite {
  float: left;
  margin-top: 3%;
  margin-right: 7.5%;
  margin-left: 5%;
  border: 3px solid #e37e2b;
  border-radius: 10rem;
  background-color: #fff;
  width: 40%;
  color: #333;
}

.vjInitialPopupSelectionOrange {
  float: left;
  margin-top: 3%;
  margin-left: 7.5%;
  border: 3px solid #fff;
  border-radius: 10rem;
  background-color: #e37e2b;
  width: 40%;
  color: #fff;
}

#vjInitialPopupDimensionDescriptionBottom {
  margin-top: 2%;
  line-height: 1.25rem;
}

#vjInitialPopupTextContainerL,
#vjInitialPopupTextContainerR {
  float: left;
}

.vjConfigurationPopup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 9999;
  height: 100vh;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  position: fixed;
  top: 0;
  justify-content: center;
}

#vjPopupCarouselConfigurations {
  background: #ddd;
  width: 100%;
}

#vjPopupCarouselConfigurations .carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.1s ease-in-out left;
  -o-transition: 0.1s ease-in-out left;
  transition: 0.1s ease-in-out left;
}

#vjPopupCarouselConfigurations .carousel-inner {
  height: 100%;
}

.vjConfigurationPopup hr {
  background-color: #fff;
}

.vjPopupDivider {
  height: 2.5rem;
}

#vjPopupIntro,
.vjPopupTextBD {
  text-align: center;
}

.carousel-inner {
  padding: 0;
}

.carousel-control-prev {
  left: -15%;
}

.carousel-control-next {
  left: 100%;
}

.vjInteriorConfigTextContainer {
  height: 60vh;
}

#vjConfigPopupSpecs {
  height: 100%;
}

.vjConfigPopupTextContainer {
  padding-left: 1rem;
  height: 100%;
}

.vjPopupBackground {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  background-color: #28282c;
  width: 100%;
  height: 100%;
}
#vjInitialPopupContent,
.vjInitialPopupContent,
.vjPopupContent{
  position: relative;
  color: #fff;
  text-align: center;
}
#vjInitialPopupContent h5,
.vjInitialPopupContent h5{
  margin-top: -1rem;
  margin-bottom: 1rem;
}
#vjInitialPopupContent .btn,
.vjInitialPopupContent .btn{
  border-radius: 25px;
}

#vjInitialPopupBtnBack {
  margin-right: 0.2rem;
}

#vjInitialPopupButtonContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.vjConfigPopupImageContainer {
  height: 60vh;
}

#vjVanPopupTextContainer .btn {
  margin-top: 14%;
  margin-right: -15%;
  padding: 0.7rem 1.5rem;
}

#vjVanPopupClose:hover,
.vjConfigPopupClose:hover {
  cursor: pointer;
}

#vjConfigPopup {
  position: fixed;
  z-index: 999;
  padding: 0;
  width: 100%;
  height: 100%;
}

#vjConfigPopupBackground {
  opacity: 0.8;
  background-color: #333;
  width: 100vw;
  height: 100vh;
}

#vjPopupContent {
  position: fixed;
  margin-top: 2.5rem;
  max-width: 50rem;
  color: #fff;
}

.vjConfigPopupText {
  margin-top: 2rem;
  height: 100%;
  color: #333;
}

.vjConfigPopupPrice {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 2rem;
  margin-right: 1rem;
  margin-bottom: 0;
}

.vjConfigPopupPrice h5,
.vjRadioContainer .radioText {
  margin-left: 1rem;
}

.vjConfigPopupVATText {
  font-weight: 700;
  font-size: 0.5rem;
}

.vjConfigPopupList {
  margin-top: 2rem;
  width: 100%;
  line-height: 1.5rem;
}

.vjConfigPopupText h1 {
  margin-top: 5%;
}

.vjConfigPopupImg img {
  width: 100%;
  height: 100%;
}

.vjConfigPopupCloseSm {
  position: absolute;
  left: 90%;
  color: #333;
  font-size: 1.5rem;
}

#vjConfigPopupCloseLg {
  position: absolute;
  left: 140%;
  color: #fff;
  font-size: 2.5rem;
}

#vjConfigPopupAdd {
  position: absolute;
  top: 95%;
  right: -5%;
  z-index: 999;
  white-space: nowrap;
}

#vjConfigPopupTitleVan {
  color: #e37e2b;
}

#vjConfigPopupSelection,
.vjRadioContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#vjConfigPopupSelection {
  position: relative;
  margin-bottom: -1rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 3;
  width: 100%;
}

#vjVanPopupTextContainer {
  float: left;
  margin-top: 1%;
  margin-right: 8%;
  background-color: #fff;
  width: 37%;
  height: 46%;
  color: #333;
}

#vjVanPopupClose {
  float: right;
  margin-right: 1rem;
  font-size: 1.3rem;
}

#vjVanPopupContent {
  position: relative;
  top: 25%;
  width: 100%;
  color: #fff;
  text-align: center;
}

#vjVanPopupContent > img {
  float: left;
  padding-left: 25%;
  width: 50%;
  height: 50%;
}

#vjVanPopupTextContainer > #vjVanPopupTitle {
  margin-top: 10%;
  margin-left: 10%;
  font-weight: 700;
  text-align: left;
}

#vjVanPopupTextContainer > #vjVanPopupName {
  margin-top: -4%;
  padding-left: 10%;
  text-align: left;
}

#vjVanPopupList li {
  list-style: none;
}

#vjVanPopupList p {
  float: left;
  padding-left: 1%;
}

#vjVanPopupList .vjVink {
  float: left;
  margin-right: 10%;
  margin-left: 10%;
  font-weight: 700;
}

.vjRadioContainer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: -0.75rem;
  padding-top: 0.5rem;
}

.vjRadioContainer input,
.vjRadioDesignContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.vjProductCard .checkmark,
.vjRadioDesignContainer .checkmark {
  position: relative;
  border: 1px solid #e37e2b;
  border-radius: 50%;
  background-color: #fff;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.vjProductCard input:checked ~ .checkmark::after,
.vjRadioDesignContainer input:checked ~ .checkmark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 13px rgba(151, 151, 51, 0.6);
  border-radius: 50%;
  background-color: #e37e2b;
  width: 65% !important;
  height: 65% !important;
  content: "";
}

.vjColorCardContainerL .vjRadioDesignContainer .checkmark {
  position: absolute;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  cursor: pointer;
}

.vjRadioProductCard {
  position: relative;
  float: left;
  margin-top: 5%;
  max-width: 100%;
}

.vjRadioColorCardLg {
  position: relative;
  top: -5rem;
  left: -2.5rem;
}

.vjRadioColorCard {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: clip;
}

.checkmark {
  position: relative;
  border: 1px solid #333;
  border-radius: 50%;
  background-color: #fff;
  width: 30px;
  height: 30px;
}

.vjRadioContainer:hover input ~ .checkmark,
.vjRadioDesignContainer:hover input ~ .checkmark {
  background-color: #eef0f3;
}

.checkmark:after {
  display: none;
  position: absolute;
  content: "";
}

.vjRadioContainer input:checked ~ .checkmark:after,
.vjRadioDesignContainer input:checked ~ .checkmark:after {
  display: block;
}

.vjRadioContainer .checkmark:after {
  top: 4px;
  left: 4px;
  border-radius: 50%;
  background: #333;
  width: 20px;
  height: 20px;
}

.vjRadioColorCard li {
  border-radius: 0.5rem !important;
  width: 100% !important;
  height: 8vh !important;
  min-height: 50px;
}

#vjLoading,
.lds-roller,
.vjLoading {
  position: fixed;
  z-index: 2;
}

#vjLoading,
.vjLoading {
  top: 53vh;
  left: 51.5vw;
}

.vjProductCard li:active {
  -webkit-box-shadow: 6px 6px #eef0f3;
  box-shadow: 6px 6px #eef0f3;
  border-radius: 10%;
  color: #eef0f3;
}

.lds-roller {
  display: inline-block;
  top: 50vh;
  left: 50vw;
  width: 80px;
  height: 80px;
}

.lds-roller div {
  -webkit-transform-origin: 40px 40px;
  -ms-transform-origin: 40px 40px;
  transform-origin: 40px 40px;
  -webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.lds-roller div:after {
  display: block;
  position: absolute;
  margin: -4px 0 0-4px;
  border-radius: 50%;
  background: #333;
  width: 7px;
  height: 7px;
  content: " ";
}

.lds-roller div:nth-child(1) {
  -webkit-animation-delay: -0.036s;
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2) {
  -webkit-animation-delay: -0.072s;
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3) {
  -webkit-animation-delay: -0.108s;
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4) {
  -webkit-animation-delay: -0.144s;
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5) {
  -webkit-animation-delay: -0.18s;
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6) {
  -webkit-animation-delay: -0.216s;
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7) {
  -webkit-animation-delay: -0.252s;
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8) {
  -webkit-animation-delay: -0.288s;
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}

@media only screen and (max-width: 1390px) {
  #vjVanPopupList {
    height: 45%;
  }

  #vjVanPopupList p {
    float: left;
    padding-left: 0;
    width: 90%;
    font-size: 0.75rem;
  }

  #vjVanPopupList .vjVink {
    float: left;
    margin: 5px;
    width: 10%;
  }

  #vjVanPopupList li {
    padding-top: 2vh;
    width: 100%;
    height: 20%;
    list-style: none;
  }
}

@media only screen and (max-width: 991px) {
  #vjPriceContainer #vjPriceL {
    float: left;
  }

  #vjPriceContainer #vjPriceR {
    float: left;
    margin: 0;
    padding: 0;
  }
}

@media only screen and (max-width: 576px) {
  body {
    overflow-y: scroll;
  }

  #qmaze-vj-variables {
    margin-top: 5%;
    margin-bottom: -1%;
  }

  #vjRadioSelection {
    margin-left: 1rem;
  }

  #vj3DControls,
  #vjLogoContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  #vjLogoContainer {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    float: none;
    padding-left: 0;
  }

  #vj3DControls {
    position: fixed;
    right: 0;
    bottom: 0;
    color: #959595;
  }

  #vjShowHideUI {
    display: none;
  }

  #btnvjOverviewPrevious {
    top: 0;
    left: 0;
  }

  #vjCamper3D {
    position: relative;
  }
}

@media only screen and (max-width: 600px) {
  #vjInitialPopupContent,
  .vjInitialPopupContent {
    margin: 2%;
    width: 100%;
    min-width: 400px;
    height: 50%;
    min-height: 400px;
    font-size: 75%;
  }
}

@media only screen and (max-width: 450px) {
  #btnvjOverviewPrevious {
    top: -3%;
  }
}

.card-header > h5,
.card-header > h6,
.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vjConfigurationProductList .card-header {
  padding: 0.25rem 0.5rem;
}

#vjContainerP5 .vjCollapseBtn {
  margin: 0;
}

#vjContainerP5 .card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#vjContainerP5 .card-body {
  padding: 0.25rem 0.5rem;
}

#vjContainerP5 .card-body > .row > .col-3 {
  text-align: end;
}

.vjExplanationPopup {
  display: none;
  display: table;
  position: absolute;
  right: 15px;
  bottom: 15px;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.62);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.62);
  border-radius: 20px;
  background-color: #333;
  padding: 13px;
  width: 40%;
  height: 45%;
  color: #fff;
}

.vjExplanationVideoPlayer {
  border-radius: 12px;
  object-fit: contain;
}

.vjExplanationVideoPlayerContainer {
  padding: 0 13px;
}

.vjExplanationCircle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 100%;
  background-color: #e37e2b;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 7px;
  font-weight: 700;
  font-size: 1.5rem;
}

.vjExplanationCircle:hover {
  color: #fff;
}

.vjExplanationCloseContainer {
  margin-top: -46px;
}

.vjExplanationCloseButton {
  margin: -5px;
  border-radius: 25px 0 0 0;
  background-color: #333;
  padding: 10px 5px 5px 10px;
  width: fit-content;
}

.vjExplanationClose {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 0.5rem;
  border: 2px solid #fff;
  border-radius: 100%;
  background-color: #f6f7f9;
  width: 2.5rem;
  height: 2.5rem;
  color: #e37e2b;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 7px;
  font-weight: 700;
  font-size: 1.5rem;
}

.vjExplanationClose:hover {
  color: #e37e2b;
}