#pc-builder {
  margin-top: 50px;
  margin-bottom: 50px;
}

#pc-builder .pc-components-main-title {
  font-size: 28px;
  font-family: 'font-8';
  color: #999;
  margin-bottom: 20px;
}

#pc-builder .pc-builder-container {
  margin-bottom: 60px;
}

#pc-builder .component-icon-col {
  width: 110px;
  padding: 25px 25px;
  margin-right: 10px;
}

#pc-builder .pc-component {
  background-color: #141414;
  border: 1px solid #1b1b1b;
}

#pc-builder .pc-component-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pc-builder .pc-component:hover,
#pc-builder .pc-component:hover .selected-component {
  border-color: #272727;
}

#pc-builder .pc-component:not(:last-child) {
  margin-bottom: 30px;
}

#pc-builder .component-icon-col svg {
  fill: #c80000;
  width: 60px;
  height: 60px;
}

#pc-builder .component-controls-col svg {
  width: 32px;
  height: 32px;
  fill: #616161;
}

#pc-builder .component-title {
  font-size: 22px;
  font-family: font-5;
  color: #767676;
}

#pc-builder .cols-group {
  display: flex;
  align-items: center;
}

#pc-builder .selected-component-cols-group {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

#pc-builder .component-controls-col .component-remove-button {
  padding: 16px 25px;
  border-left: 1px solid #1b1b1b;
  cursor: pointer;
}

#pc-builder .component-controls-col .component-remove-button:hover svg > * {
  stroke: #7c7c7c;
}

#pc-builder .component-controls-col .component-select-button {
  background-color: #1a1a1a;
  margin-right: 25px;
  font-size: 18px;
  font-family: font-8;
  color: #5a5a5a;
  padding: 8px 16px;
  border: 1px solid #222222;
}

#pc-builder .component-controls-col .component-select-button:hover {
  border-color: #282828;
}

#pc-builder .display-none {
  display: none !important;
}

#pc-builder .configurator-info {
  border: 1px solid #1c1c1c;
  padding: 18px;
  color: #676767;
  font-family: font-7;
  font-size: 15px;
  background-color: #181818;
  margin-bottom: 30px;
}

#pc-builder .configurator-info h6 {
  color: #9b9b9b;
  font-size: 16px;
  font-family: font-6;
}

#pc-builder .configurator-info p {
  margin: 0;
  padding: 0;
}

#pc-builder .summary-col svg {
  width: 18px;
  height: 18px;
}

#pc-builder .summary-col .system-price-wrapper {
  padding: 12px;
}

#pc-builder .summary-col .system-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#pc-builder .summary-col .system-price-row:not(:last-child) {
  margin-bottom: 8px;
}

#pc-builder .summary-col .summary-container {
  background-color: #181818;
  border: 1px solid #1f1f1f;
}

#pc-builder .summary-col .price-title {
  font-family: font-8;
  font-size: 16px;
  color: #868686;
}

#pc-builder .summary-col .actual-price svg,
#pc-builder .summary-col .discount svg {
  fill: #979797;
  margin-right: 4px;
  margin-top: -2px;
}

#pc-builder .summary-col #current-price,
#pc-builder .summary-col #system-discount {
  font-size: 18px;
  color: #979797;
  font-family: font-4;
}

#pc-builder .summary-col .system-price {
  display: flex;
  align-items: center;
}

#pc-builder .summary-col .system-buy-button-wrapper {
  margin-bottom: 6px;
  padding: 12px;
}

#pc-builder .summary-col .system-buy-button-wrapper button{
  display: block;
  width: 100%;
  border: none;
  padding: 6px 12px;
  font-size: 18px;
  font-family: font-6;
  background-color: #c80000;
  color: #dcdcdc;
  font-weight: 100;
}

#pc-builder .summary-col {
  position: sticky;
  top: 120px;
}

#pc-builder .summary-col .system-control-item {
  text-align: center;
  cursor: pointer;
  padding: 10px 12px;
  background-color: #1f1f1f;
  border: 1px solid #292929;
  margin-bottom: 4px;
}

#pc-builder .summary-col .system-control-item:hover {
  border-color: #363636;
}

#pc-builder .summary-col .system-control-item:not(:last-child) {
  margin-right: 6px;
}

#pc-builder .summary-col .system-controls-wrapper {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

#pc-builder .summary-col .system-control-title {
  font-size: 12px;
  font-family: 'font-6';
  color: #666666;
}

#pc-builder .summary-col .system-control-item svg {
  margin-bottom: 6px;
  fill:  #7c7c7c;
  width: 20px;
  height: 20px;
}

#pc-builder .summary-col .system-control-item polygon,
#pc-builder .summary-col .system-control-item path,
#pc-builder .summary-col .system-control-item circle,
#pc-builder .summary-col .system-control-item polyline,
#pc-builder .summary-col .system-control-item rect,
#pc-builder .summary-col .system-control-item g {
  stroke: #7c7c7c;
}

#pc-builder .configurator-summary-text-wrapper {
  border-bottom: 1px solid #1f1f1f;
  border-top: 1px solid #1f1f1f;
  margin-bottom: 10px;
}

#pc-builder .configurator-summary-text {
  padding: 12px;
  font-size: 14px;
  font-family: 'font-8';
  color: #717171;
}

#pc-builder .summary-col .ready-systems-button-wrapper a {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 16px;
  font-family: font-6;
  background-color: #1f1f1f;
  color: #808080;
  text-decoration: none;
  text-align: center;
  border: 1px solid #292929;
}

#pc-builder .summary-col .ready-systems-button-wrapper {
  padding: 12px;
  margin-bottom: 6px;
}

#pc-builder .summary-col .ready-systems-button-wrapper a:hover {
  border-color: #363636;
}

#pc-builder .selected-component {
  border-top: 1px solid #1b1b1b;
}

#pc-builder .selected-component .selected-component-image-col {
  position: relative;
  padding: 20px;
  width: 20%;
  margin-right: 20px;
}

#pc-builder .selected-component .selected-component-image-col img {
  width: 100%;
  background-color: #111111;
  border: 1px solid #1b1b1b;
}

#pc-builder .selected-component .selected-component-details-col {
  width: calc(60% - 20px);
  font-size: 15px;
  color: #808080;
  font-family: font-7;
}

#pc-builder .selected-component .selected-component-title {
  font-size: 14px;
  padding-top: 20px;
  color: #939393;
  border-bottom: 1px solid #202020;
  padding-bottom: 8px;
}

#pc-builder .selected-component .selected-component-price-col {
  padding: 20px;
  font-size: 20px;
  font-family: font-4;
  width: 20%;
}

#pc-builder .selected-component .selected-component-price-col svg {
  width: 21px;
  height: 21px;
  margin-right: 3px;
  margin-top: 3px;
}

#pc-builder .selected-component .selected-component-price-col .current-price svg {
  fill: #747474;
}

#pc-builder .selected-component .selected-component-price-col .old-price svg {
  fill: #363636;
}

#pc-builder .selected-component .selected-component-price-col .current-price {
  margin-bottom: 10px;
  color: #747474;
  display: flex;
  justify-content: flex-end;
}

#pc-builder .selected-component .selected-component-price-col .old-price {
  color: #363636;
  display: flex;
  position: relative;
  justify-content: flex-end;
}

#pc-builder .selected-component .selected-component-price-col .old-price .old-price-wrapper {
position: relative;
display: flex;
}

#pc-builder .selected-component .selected-component-price-col .old-price .old-price-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #363636;
  top: 14px;
}

@media only screen and (max-width: 1199px) {
  #pc-builder .selected-component .selected-component-price-col {
    font-size: 18px;
    display: flex;
    flex-direction: column;
  }

  #pc-builder .selected-component .selected-component-price-col .current-price {
      margin-right: 0;
  }

  #pc-builder .selected-component .selected-component-price-col svg {
      width: 18px;
      height: 18px;
      margin-top: 4px;
  }
}

@media only screen and (max-width: 991px) {
  #pc-builder .summary-col .price-title,
  #pc-builder .summary-col #current-price,
  #pc-builder .summary-col #system-discount,
  #pc-builder .summary-col .ready-systems-button-wrapper a,
  #pc-builder .component-controls-col .component-select-button {
    font-size: 14px;
  }
  #pc-builder .component-title {
      font-size: 18px;
  }
  #pc-builder .component-controls-col .component-select-button {
      padding: 4px 8px;
  }
  #pc-builder .component-controls-col svg {
      width: 20px;
      height: 20px;
  }
  #pc-builder .component-icon-col svg {
      width: 50px;
      height: 50px;
  }
  #pc-builder .pc-component-row.selected-component,
  #pc-builder .pc-component-row.selected-component .cols-group {
      flex-direction: column;
  }
  
      #pc-builder .selected-component .selected-component-details-col .selected-component-specifications {
      padding-bottom: 10px;
  }
}

/* build general modal style */

#build-general-modal {
  width: 100%;
  background-color: #181818;
  border: 1px solid #2e2e2e;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
}

#build-general-modal-overlay .modal-container {
    padding: 20px 0 0 0;
    overflow-y: auto;
    width: calc(100% - 40px);
    margin: 0 auto;
}

#build-general-modal-overlay.is-active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(0 0 0 / 52%);
  z-index: 9999;
  width: 100%;
  height: 100%;
}

#build-general-modal-overlay.is-active #build-general-modal {
  display: flex;
  flex-direction: column;
}

#build-general-modal-overlay .modal-wrapper {
  height: calc(100% - 3.5rem);
  transform: none;
  margin: 1.75rem auto;
  position: relative;
  max-width: 600px;
  display: none;
}

#build-general-modal-overlay.is-active .modal-wrapper {
  display: flex;
  align-items: center;
}

#build-general-modal .modal-main-title {
  padding: 20px;
  font-size: 20px;
  font-family: font-8;
  text-align: left;
  color: #a0a0a0;
  position: relative;
}

#build-general-modal .modal-main-title::before {
  content: "";
  width: 100%;
  border-top: 1px solid #333333;
  position: absolute;
  left: 0;
  top: 100%;
}

#build-general-modal-close-button {
  padding: 20px 20px 12px 12px;
  position: absolute;
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}

#build-general-output {
  font-size: 16px;
  font-family: 'font-8';
  color: #797979;
}

/* save build modal style */

#save-build-modal {
  width: 100%;
  background-color: #181818;
  border: 1px solid #2e2e2e;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
}

#save-build-modal-overlay .modal-container {
    padding: 20px 0 0 0;
    overflow-y: auto;
    width: calc(100% - 40px);
    margin: 0 auto;
}

#save-build-modal-overlay.is-active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(0 0 0 / 52%);
  z-index: 9999;
  width: 100%;
  height: 100%;
}

#save-build-modal-overlay.is-active #save-build-modal {
  display: flex;
  flex-direction: column;
}

#save-build-modal-overlay .modal-wrapper {
  height: calc(100% - 3.5rem);
  transform: none;
  margin: 1.75rem auto;
  position: relative;
  /*max-width: 720px;*/
  display: none;
}

#save-build-modal-overlay.is-active .modal-wrapper {
  display: flex;
  align-items: center;
}

#save-build-modal .modal-main-title {
  padding: 20px;
  font-size: 20px;
  font-family: font-8;
  text-align: left;
  color: #a0a0a0;
  position: relative;
}

#save-build-modal .modal-main-title::before {
  content: "";
  width: 100%;
  border-top: 1px solid #333333;
  position: absolute;
  left: 0;
  top: 100%;
}

#save-build-modal-close-button {
  padding: 20px 20px 12px 12px;
  position: absolute;
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}

#save-build-modal .modal-warning {
  font-size: 14px;
  font-family: font-8;
  color: #999;
}

#build-id-input {
  width: 250px;
  background-color: #212121;
  outline: none;
  padding: 8px 12px;
  color: #7e7e7e;
  border: 1px solid #2a2a2a;
  font-family: font-4;
  font-size: 20px;
  margin-right: 20px;
}

#load-build-button {
  outline: none;
  padding: 8px 12px;
  font-family: font-6;
  font-size: 20px;
  background-color: #c80000;
  color: #dcdcdc;
  border: 1px solid #c80000;
}

#build-id-input::placeholder {
  font-size: 16px;
  font-family: font-6;
}

#build-id-input:focus {
  border-color: #393838;
}

#save-build-modal .build-id-block {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
}

#load-build-error-output {
  width: 65%;
  font-size: 14px;
  border: 1px solid #303030;
  padding: 8px 12px;
  background-color: #242424;
  color: #939393;
  font-family: font-8;
  margin-top: 20px;
  display: none;
}

#load-build-error-output.is-active {
  display: block;
}

/* component select modal style */

#configurator-components-list-modal {
  width: 100%;
  background-color: #181818;
  border: 1px solid #2e2e2e;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
}

#configurator-components-list-modal-overlay .modal-container {
    padding: 0;
    overflow-y: auto;
    width: calc(100% - 40px);
    margin: 0 auto;
    border: 1px solid #1f1f1f;
}

#configurator-components-list-modal #components-list .build-item:not(:last-child) {
  border-bottom: 1px solid #1f1f1f;
}

#configurator-components-list-modal-overlay.is-active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(0 0 0 / 52%);
  z-index: 9999;
  width: 100%;
  height: 100%;
}

#configurator-components-list-modal-overlay.is-active #configurator-components-list-modal {
  display: flex;
  flex-direction: column;
}

#configurator-components-list-modal-overlay .modal-wrapper {
  height: calc(100% - 3.5rem);
  transform: none;
  margin: 1.75rem auto;
  position: relative;
  max-width: 900px;
  display: none;
}

#configurator-components-list-modal-overlay.is-active .modal-wrapper {
  display: flex;
  align-items: center;
}

#configurator-components-list-modal-overlay .modal-main-title {
  padding: 20px;
  font-size: 24px;
  font-family: font-8;
  text-align: left;
  color: #a0a0a0;
  position: relative;
  padding-right: 40px;
}

#configurator-components-list-modal-overlay .modal-main-title::before {
  content: "";
  width: 100%;
  border-top: 1px solid #333333;
  position: absolute;
  left: 0;
  top: 100%;
}

#configurator-components-list-modal-close-button {
  padding: 20px 20px 12px 12px;
  position: absolute;
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}

#configurator-components-list-modal.is-active .modal-container::-webkit-scrollbar {
  width: 8px;
}

#configurator-components-list-modal.is-active .modal-container::-webkit-scrollbar-track {
  background: #282828;
}

#configurator-components-list-modal.is-active .modal-container::-webkit-scrollbar-thumb {
  background: #3f3f3f;
}

#filter-container {
  padding: 20px;
}

#configurator-components-list-modal .filter-items-container {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid #212121;
  width: 100%;
  overflow-x: auto;
}

#configurator-components-list-modal .filter-items-container:not(:first-child) {
  padding-top: 16px;
}

#configurator-components-list-modal .filter-items-container .filter-item {
  text-decoration: none;
  color: #aaa;
  margin-right: 12px;
  padding: 4px 12px;
  cursor: pointer;
  background-color: #2e2e2e;
  margin-bottom: 8px;
  white-space: nowrap;
}

#configurator-components-list-modal .filter-items-container .filter-item.active-filter-item {
  background-color: #b30101;
  color: #c6c6c6;
  pointer-events: none;
}

#configurator-components-list-modal .filter-items-container .filter-item:not(.active-filter-item):hover {
  opacity: 0.9;
}

#configurator-components-list-modal #components-list .build-image-col {
  width: 20%;
  position: relative;
  margin-right: 12px;
}

#configurator-components-list-modal #components-list .build-details-col .modal-build-title {
  font-size: 14px;
  color: #7e7e7e;
  font-family: 'font-8';
}

#configurator-components-list-modal #components-list .build-details-col .modal-build-specifications {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  border-top: 1px solid #212121;
  padding-top: 16px;
}

#pc-builder .selected-component .selected-component-details-col .selected-component-specifications {
  display: flex;
  flex-wrap: wrap;
  padding-top: 12px;
}

#configurator-components-list-modal #components-list .build-mixed-col {
  width: 25%;
  position: relative;
  text-align: center;
}

#configurator-components-list-modal #components-list .build-mixed-col .modal-build-item-select {
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  font-family: font-6;
  background-color: #c80000;
  color: #dcdcdc;
  margin-top: 20px;
  width: 70%;
  margin-bottom: 10px;
}

#configurator-components-list-modal #components-list .build-mixed-col .modal-build-item-discounted-price {
  margin-top: 20px;
  color: #949494;
  font-size: 16px;
  font-family: 'font-4';
}

#configurator-components-list-modal #components-list .build-mixed-col .modal-build-item-price {
  margin-top: 12px;
  font-size: 16px;
  font-family: 'font-4';
  color: #4b4b4b;
  text-decoration: line-through;
}

#configurator-components-list-modal #components-list .build-details-col .modal-build-specifications .modal-build-specifications-item,
#pc-builder .selected-component .selected-component-details-col .selected-component-specifications .selected-component-specifications-item {
  display: flex;
  margin-right: 12px;
  font-size: 13px;
  font-family: 'font-8';
  margin-bottom: 6px;
}

#configurator-components-list-modal #components-list .build-details-col .modal-build-specifications .modal-build-specifications-item .modal-build-specifications-item-key,
#pc-builder .selected-component .selected-component-details-col .selected-component-specifications .selected-component-specifications-item .selected-component-specifications-item-key {
  margin-right: 6px;
  color: #adadad;
}

#configurator-components-list-modal #components-list .build-details-col .modal-build-specifications .modal-build-specifications-item .modal-build-specifications-item-value,
#pc-builder .selected-component .selected-component-details-col .selected-component-specifications .selected-component-specifications-item .selected-component-specifications-item-value {
  color: #5b5b5b;
}

#configurator-components-list-modal #components-list .build-item {
  display: flex;
  padding: 15px;
  background-color: #111111;
  cursor: pointer;
}

#configurator-components-list-modal #components-list .build-image-col img {
  width: 100%;
}

#configurator-components-list-modal #components-list::-webkit-scrollbar {
  width: 8px;
}
#configurator-components-list-modal .filter-items-container::-webkit-scrollbar {
    height: 5px;
}
#configurator-components-list-modal #components-list::-webkit-scrollbar-track,
#configurator-components-list-modal .filter-items-container::-webkit-scrollbar-track {
  background: #282828;
}

#configurator-components-list-modal #components-list::-webkit-scrollbar-thumb,
#configurator-components-list-modal .filter-items-container::-webkit-scrollbar-thumb {
  background: #3f3f3f;
}

#configurator-components-list-modal #components-list .build-details-col {
  width: calc(55% - 30px);
  padding-top: 6px;
  margin-right: 10px;
}

#configurator-components-list-modal #components-list .component-quantity-container {
  margin-top: 10px;
}

#configurator-components-list-modal #components-list .quantity-wrapper {
  display: flex;
  justify-content: center;
}

#configurator-components-list-modal #components-list .quantity-wrapper .control-plus,
#configurator-components-list-modal #components-list .quantity-wrapper .control-minus {
  border: 1px solid #333333;
  width: 20%;
  color: #a6a6a6;
  padding-top: 3px;
  padding-bottom: 3px;
  background-color: #1c1c1c;
  box-sizing: border-box;
  font-size: 16px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#configurator-components-list-modal #components-list .quantity-wrapper .control-plus:hover,
#configurator-components-list-modal #components-list .quantity-wrapper .control-minus:hover {
  border-color: #484848;
}

#configurator-components-list-modal #components-list .quantity-wrapper .quantity-input {
  width: 30%;
  color: #fff;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 3px;
  color: #a6a6a6;
  font-family: 'font-4';
  font-size: 14px;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media only screen and (max-width: 700px) {
  #pc-builder .component-controls-col .component-remove-button {
    padding: 16px 12px;
  }
  #pc-builder .component-controls-col .component-select-button,
  #pc-builde .component-title-col {
    margin-right: 10px;
  }
  #configurator-components-list-modal-overlay .modal-wrapper {
    max-width: calc(100% - 24px);
    margin-left: 12px;
  }
  #load-build-button {
      margin-top: 6px;
  }
  #pc-builder .summary-col .system-control-title {
      display: none;
  }
  #configurator-components-list-modal #components-list .build-item {
    flex-direction: column;
    align-items: center;
  }
  #configurator-components-list-modal #components-list .build-image-col {
      width: 60%;
      margin-top: 20px;
      margin-right: 0;
      margin-bottom: 10px;
  }
  #configurator-components-list-modal #components-list .build-details-col {
    width: 60%;
    margin-right: 0;
  }
  #configurator-components-list-modal #components-list .build-mixed-col {
    width: 50%;
  }
  #configurator-components-list-modal #components-list .build-details-col .modal-build-specifications .modal-build-specifications-item, #pc-builder .selected-component .selected-component-details-col .selected-component-specifications .selected-component-specifications-item {
      display: block;
  }
  
  #pc-builder .component-title {
      font-size: 13px;
      font-family: font-8;
  }
  #pc-builder .component-icon-col {
    width: 60px;
    padding: 25px 12px;
    margin-right: 0px;
  }

  #pc-builder .component-icon-col svg {
    width: 32px;
    height: 32px;
  }

  #pc-builder .component-controls-col svg {
    width: 16px;
    height: 16px;
  }
  
  #pc-builder .summary-col .price-title, #pc-builder .summary-col #current-price, #pc-builder .summary-col #system-discount, #pc-builder .summary-col .ready-systems-button-wrapper a,
  #pc-builder .component-controls-col .component-select-button,
  #configurator-components-list-modal .filter-items-container .filter-item {
      font-size: 13px;
  }
  
  #pc-builder .selected-component-cols-group {
      flex-direction: column;
      align-items: center;
  }
  
  #pc-builder .selected-component .selected-component-details-col,
  #pc-builder .selected-component .selected-component-image-col {
      width: 60%;
  }
  
  #pc-builder .selected-component .selected-component-image-col {
      padding: 0;
      margin-bottom: 10px;
      margin-top: 20px;
      margin-right: 0;
  }
  
  #pc-builder .selected-component .selected-component-price-col {
      align-items: center;
      width: 70%;
  }
  
  #pc-builder .summary-col .system-control-item {
      padding: 6px 12px;
  }
  
  #build-general-modal {
	width: calc(100% - 40px);
    margin: 0 auto;  
  }
  
  #build-general-output {
	  font-size: 14px;
  }
  #configurator-components-list-modal-overlay .modal-main-title {
      font-size: 16px;
  }
  #pc-builder .pc-components-main-title {
      font-size: 20px;
  }
  #save-build-modal .modal-main-title {
      font-size: 16px;
  }
  #save-build-modal-close-button {
      padding-top: 16px;
  }
}

/* iframe style */

#build-pdf-iframe-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  transition: opacity .2s linear;
  touch-action: pinch-zoom;
  overflow: hidden;
}

#build-pdf-iframe-overlay.is-active {
  display: block;
  opacity: 1;
}

#build-pdf-iframe-overlay.is-active iframe {
  width: 95%;
  height: calc(100% - 100px);
  margin: 0 auto;
  display: block;
}

#build-pdf-iframe-overlay .iframe-control-bar {
  width: 95%;
  margin: 0 auto;
  height: 50px;
  background-color: #333;
  position: relative;
}

#build-pdf-iframe-close-button {
  padding: 10px;
  position: absolute;
  right: 6px;
  top: 0px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}

#build-pdf-iframe-close-button:hover line {
  stroke: #cacaca;
}

.remove-scroll-bar {
  overflow-y: clip;
  touch-action: none;
  padding-right: 17px;
}