/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
  padding-top: 0rem;
  padding-bottom: 0rem;
  color: #5a5a5a;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 200;
}

main{
    margin-top: 110px;
}

@media(max-width:1120px){
    main{
        margin-top: 105px;
    }
}

.forgeMain{
    margin-top: 0;
}

.text-background {
  background: rgba(0, 0, 0, .5);
}

/* CUSTOMIZE THE FORM
-------------------------------------------------- */

/* Declare heights because of positioning of img element */
.calc-form-container {
  background: rgba(90, 90, 90, 1);
  padding: 1rem;
  border-radius: 1rem;
  /* background-colour:(""); */
  /*background-image: url("img/stainless-steel-background-1000x700px.jpg");*/
  /* The image used */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}

.form-control {
  border-color: #777;
}

.form-control:focus {
  border-color: #777;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  width: 100%;

  background-color: #343a40;
}

.carousel-item>img {

  top: 0;
  left: 0;
  width: 100%;


}

.carousel-inner img {

  top: 0;
  left: 0;

  width: 100%;
  display: block;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.marketing h2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 3rem 0;
  /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

.btn-success {
  color: #3a3a3a;
  background-color: #f8a933;
  border-color: #f8a933;
}

.btn-success:hover {
  color: #3a3a3a;
  background-color: #d89030;
  border-color: #d89030;
}

.btn-success:active {
    color: #3a3a3a;
    background-color: #d89030;
    border-color: #d89030;
  }

  .btn-success:focus {
    color: #3a3a3a;
    background-color: #d89030;
    border-color: #d89030;
  }

.btn-success:disabled {
    color: #3a3a3a;
    background-color: #d88f309e;
    border-color: #d89030;
  }

.btn-success-green {
  color: #eeeeee;
  background-color: #198754;
  border-color: #198754;
}

.btn-success-green:hover {
  color: #eeeeee;
  background-color: #157347;
  border-color: #146c43;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 50em) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 2rem;
  }
}

/* spinner-lock */
.spinner-lock {
  position: relative;
}

.spinner-lock:disabled::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #FFFFFF;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}


@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

/* alert */

.alert-container {
  position: relative;
  display: block;
  margin-top: 40px;
}

.alert {
  position: absolute;
  display: block;
  z-index: 1040;

  width: 33%;
  left: 33%;
}

/* DXF previewer */

.canvas-holder {
  padding: 0;
  width: 100%;
  height: 300px;
}

#dxf-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
}

.preview-text {}

.editableSpan {
  display: inline-block;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
}

.editableSpan2 {
  position: absolute;
  padding-left: 2px;
  padding-right: 2px;
}

.text-wrapper {
  z-index: 5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.testclass {
  width: 100%;
  position: relative;
  height: 100%;
  top: -24px;
}

.rotateddiv {
  transform-origin: top left;
  rotate: -90deg;
  left: 0;
  position: absolute;
  height: 20px;
  width: 444px;
  display: flex;
  justify-content: center;
}

.bendline-feedback-container {
  display: none;
}

.bendline-feedback {
  color: green;
}

/* Dropzone */
div#dropzonetext {
  margin-top: 48px;
  text-align: center;
}

div#dropzone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: visibility 175ms, opacity 175ms;
  display: table;
  text-shadow: 1px 1px 2px #000;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  font: bold 42px Oswald, DejaVu Sans, Tahoma, sans-serif;
}

div#dropzonetextnode {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  transition: font-size 175ms;
}

/* SVG text input */
.svg-text {
  -webkit-user-select: none;
  user-select: none;
}

.svg-text-holder {
  z-index: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.svg-text-holder-horizontal {
  z-index: 7;
  right: 0;
  width: 100%;
  position: absolute;
}

.svg-text-holder-vertical {
  z-index: 7;
  right: 0;
  top: 46%;
  height: 20vw;
  position: absolute;
}

.svg-text-input {
  display: none;
  text-align: center;
  color: greenyellow;
  margin: 0 auto;
  background-color: black;
  outline: none;
  padding: 0px;
}

.svg-text-input:not(:focus) {
  border: 1px solid black;
}

#svg-size-textbox2
{
  margin: 0;
}

.svg-text-input-vertical {
  float: left;
}

.svg-text-input:focus {
  border: 1px solid greenyellow;
}

/* force single line for input */
[contenteditable="true"].svg-text-input {
  white-space: nowrap;
  overflow: hidden;
}

[contenteditable="true"].svg-text-input br {
  display: none;

}

[contenteditable="true"].svg-text-input * {
  display: inline;
  white-space: nowrap;
}

/* Right side slide */
.right-side-slide {
    pointer-events: none;
    position: relative;
    right: -20vw;
}

.right-side-slide div{
    pointer-events: all;
}

.right-side-slide.slide-out {
  right: 0 !important;
}

.rightToolbar-hidden {
  top: 0 !important;
  right: 20vmin !important;
  width: 50px !important;
}

.rightToolbar-zoomed {
  top: 99% !important;
  width: 80vmin !important;
  left: 0 !important;
}

/* Right toolbar */
.rightToolbar {
  display: block;
  position: absolute;
  top: 20vmin;
  right: 0px;
  width: 20vmin;
  background: black;
  z-index: 1;
}

.rightToolbarButton {
  border-color: greenyellow;
  color: greenyellow;
}

.rightToolbarButton:hover {
  border-color: greenyellow;
  background-color: greenyellow;
  color: black;
}

.rightToolbarItem {
  margin: 0 0.25rem;
  float: left;
  display: block;
  text-align: center;
}

.rightToolbar-hidden .rightToolbarItem {
  float: none !important;
}

.rightToolbar-zoomed .rightToolbarItemNonZoom {
  display: none;
}

.rightToolbarItemOnlyZoom {
  display: none;
}

.rightToolbar-zoomed .rightToolbarItemOnlyZoom {
  display: block;
}

@media only screen and (max-width: 768px) {
  .rightToolbar {
    display: block;
    position: absolute;
    background: black;
    z-index: 1;
    top: 0;
    right: 0;
    width: 40px;
  }

  .zoom .rightToolbar {
    display: block;
    position: absolute;
    top: 20vw;
    right: 0px;
    width: 20vw;
    background: black;
    z-index: 1;
  }

  .rightToolbarItemPc {
    display: none;
  }

  #KritaSvg {
    display: none;
  }
}

.zoom #KritaSvg {
  display: block;
}

.zoom .rightToolbarItemPc {
  display: block;
}

.rightToolbarText {
  font-size: x-small;
  display: block;
  color: greenyellow;
}

/* Zoom cut view */
.cutviewModal {
  display: block;
  position: fixed;
  z-index: 2000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.cutviewContent {
  position: absolute;
  right: 0;
  top: 0;
  width: 20vmin;
  height: 20vmin;
}

.zoom {
  width: 80vmin;
  height: 80vmin;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
}

.markerItem {
  pointer-events: none;
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  left: 0;
  top: 0;
  z-index: 1;
}

.cursorItem {
  pointer-events: none !important;
  display: none;
  position: absolute;
  width: 20px;
  height: 20px;
  border-style: solid;
  border-color: red;
  border-width: 1px;
  border-radius: 10px;
  left: 0;
  top: 0;
  z-index: 1;
}

.line {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  transform-origin: bottom left;
  /*border-bottom: red solid 1px;*/
  z-index: 1;
  justify-content: center;
  display: flex;
}

.lineDiv
{
  height: 1px;
  width: 100%;
  background-color: red;
}

.measureText {
  pointer-events: none !important;
  display: block;
  position: absolute;
  color: red;
  text-align: center;
}

.measureTextContainer {
  display: block;
  pointer-events: all;
  cursor: pointer;
  outline: none;
}

.measureText.selected {
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  background-color: #000000a1;
}

.arcContainer {
  position: absolute;
  z-index: 1;
  stroke: red;
  fill: rgba(255, 0, 0, 0.24);
  background-color: none;
}

.arcItem {
  pointer-events: none;
  position: absolute;
}

.arcText {
  pointer-events: none;
  text-align: center;
  width: 100%;
  color: white;
  position: absolute;
  top: 59px;
  z-index: 2;
}

.tutorialElement {
  position: absolute;
  left: 3px;
  top: 34px;
  width: 100px;
  background-color: rgb(255, 208, 0);
  border-style: solid;
  border-color: rgb(0, 0, 0);
  border-width: 1px;
  color:rgb(0, 0, 0);
}

.tutorialMarkedElement {
  position: absolute;
  left: 3px;
  top: 0px;
  height: 32px;
  width: 100px;
  border-style: solid;
  border-color: rgb(255, 208, 0);
  border-width: 2px;
  z-index: 9;
  animation-name: example;
  animation-duration: 0.35s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
  border-radius: 5px;
  pointer-events: none
}

@keyframes example2 {
  0%   {width: 100px; height: 30px; left: 216px; top: 7px;}
  100%  {width: 105px; height: 32px; left: 213px; top: 6px;}
}

@keyframes example {
  0%   {transform: scale(1.0);}
  100% {transform: scale(1.05);}
}

@media (max-width:768px) {
  .krita-alert-on-mobile-visible {
    width: 100vw !important;
    left: 0px !important;
  }

  .krita-alert-on-mobile-visible-right-toolbar {
    top: 22px;
  }

  .krita-alert-on-mobile-visible-container {
    padding-top: 33px !important;
  }
}


.krita-alert-container {
  position: absolute;
  left: 100%;
  top: 0;
  width: 886px;
  transition: width 0.3s ease;
  z-index: 11;
}

.krita-alert-number-container {
    position: relative;
    float: right;
    padding-right: 0.4em;
    display: table;
    padding-top: 0.1em;
}

.krita-alert-number-container>.badge {
  display: table-cell;
  vertical-align: middle;
}

.krita-alert-container>.alert{
  padding: 0;
  text-align: center;
  display: block;
  position: initial;
  z-index: 1040;
  width: 100%;
  left: 0;
  margin: 0;
  font-size: small;
}

.krita-alert-container>.alert {
  border-radius: 0;
  display: none;
}

.krita-alert-container>.alert-success {
  --bs-alert-color: #000000;
  --bs-alert-bg: #b5e47777;
  --bs-alert-border-color: #90D733;
}

.krita-alert-container>.alert-danger {
  --bs-alert-color: #842029;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f5c2c7;
}

.krita-alert-container>.alert-primary {
  --bs-alert-color: #084298;
  --bs-alert-bg: #cfe2ff;
  --bs-alert-border-color: #b6d4fe;
}

.side-slide>.krita-alert-container>.alert-primary {
  --bs-alert-bg: #cfe2ff93 !important;
}

.side-slide>.krita-alert-container>.alert-danger {
  --bs-alert-bg: #f8d7da94 !important;
}


.krita-alert-container>.alert>.btn-close {
  float: right;
  margin-right: 1em;
}

.tutorialHoverElement {
  position: relative;
  display: inline-block;
}

.tutorialHoverElement:hover .krita-alert-tooltip {
  visibility: visible;
  opacity: 1;
}

.krita-alert-tooltip {
  border-style: solid;
  color: black;
  border-color: black;
  border-width: 1px;
  visibility: hidden;
  position: absolute;
  left: -200px;
  top: 29px;
  width: 300px;
  z-index: 1041;
  background-color: white;
}

.krita-alert-tooltip > img {
  width: 100%;
}

.krita-alert-tooltip-content-container {
  padding: 0.25em;
}

.krita-alert-tooltip-title {
  text-align: left !important;
  font-size: medium;
  font-weight: 500;
}

.krita-alert-tooltip-content {
  text-align: left !important;
}

.alertType
{
  font-weight: 500;
}

.showTipsText{
  font-weight: 500;
}

.badge-button {
  cursor: pointer;
}

.badge-button:hover {
  background-color: #5c636a !important;
}

#firstTimeModal .modal-footer {
  font-size:small;
}

.firstTimeModalPartImage {
  width: 100%;
}

.firstTimeModalPartGif {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.firstTimeImageContainer{
  position: relative;
}

.firstTimeImageContainer:hover .firstTimeModalPartGif{
  visibility: visible;
}

.playIconContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: xxx-large;
  transform: translate(-50%, -50%);
}

#SavedIndicator {
  position: absolute; 
  z-index: 11;
  margin-left:2px;
  font-size: small;
}

.no-form .hide-on-no-form {
  display: none;
}

/* Materials pages on homepage*/

.thicknesses-list {
    font-weight: 800;
    ul {
        display: inline;
        padding: 0px;
        li {
            display: inline;
            background-color: #DDDDDD;
            padding: 5px;
            border-radius: 5px;
            
        }
    }
    text-decoration: none;
    color: #333333;
}

hr.material-divider {
    margin-top: 50px;
}

.material-picture {
    text-align: center;
    margin-top: 10px;
}

.rounded-rect {
  border-style: solid;
  border-radius: 20px;
  padding: 20px;
  height: 100%;
}

.toggle-icon {
  color: #f8a933;
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}
.rotate-icon {
  transform: rotate(90deg);
}

.faq-li {
  font-weight: 600;
  color: black !important;
}

#faq-container > .collapse:not(.show) {
  display: block;
  height: 1px;
  overflow: hidden;
}

#faq-container > .collapsing {
  height: 1px;
}

.homepage-banner {
  background-color: #2a2e33;
  color: rgb(161, 161, 161);
  width: 100%;
  z-index: 9;
}

.homepage-banner li { 
  display: inline;
  margin-right: 20px;
}

.pf-yellow {
  color: #f8a933;
}

.spinner-lock {
  position: relative;
}

.spinner-lock.disabled {



}

.spinner-lock:disabled::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #FFFFFF;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}


@keyframes button-loading-spinner {
  from {
      transform: rotate(0turn);
  }

  to {
      transform: rotate(1turn);
  }
}

/* Navbar container */
.pf-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgb(52, 58, 64);
  padding: 0.5rem 1rem;
  z-index: 1000;
  padding-bottom: 55px;
}
#mobileMenuToggler{
    display: none;
}

/* @media only screen and (max-width: 1120px) { */
    .pf-navbar-container-resp.pf-navbar-container .inner-menu{
        display:none !important;
    }

    .pf-navbar-container-resp.pf-navbar-container .inner-menu.show{
        display:flex !important;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 100%;
        background-color: #2a2f34;
        color: #fff;
        z-index: 999;
        margin-left: -1rem;
        display:flex;
        flex-direction: column;
        width: 100vw;
        padding-bottom: 5px;
    }

    .pf-navbar-container-resp.pf-navbar-container .inner-menu .pf-navbar-menu{
        display:flex;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }

    .pf-navbar-container-resp.pf-navbar-container .inner-menu .pf-navbar-menu.right{
        display:flex;
        flex-direction: row;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
    }

    .pf-navbar-container-resp.pf-navbar-container .inner-menu .pf-navbar-menu .pf-nav-item{
        width: 100%;
    }

    .pf-navbar-container-resp.pf-navbar-container .inner-menu .pf-navbar-menu.right .pf-nav-item{
        width: auto;
    }
    
    .pf-navbar-container-resp.pf-navbar-container .inner-menu .pf-navbar-menu .pf-nav-link{
        display: block;
    }

    .pf-navbar-container-resp.pf-navbar-container .inner-menu .pf-navbar-menu.right .pf-nav-link.icon-link{
        padding-top: 0;
    }

    .pf-navbar-container-resp .pf-menu-dropdown.show{
        position: relative !important;
        /* top: 100% !important; */
        transform: none !important;
    }

    .pf-navbar-container-resp .pf-navbar-menu.right .pf-menu-dropdown.show{
        position: absolute !important;
        top: 100% !important;
    }

    .pf-navbar-container-resp #mobileMenuToggler, .pf-navbar-container-resp #mobileMenuToggler:hover, .pf-navbar-container-resp #mobileMenuToggler:active, .pf-navbar-container-resp #mobileMenuToggler:focus{
        display:block;
        margin-left:auto;
        color: #fff !important;
        font-size: 1.8rem;
    }
/* } */



.pf-navbar-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.pf-navbar-container .inner-menu{
    display: flex;
    justify-content: space-between;
    flex: 1;
    align-items: center;
    margin-left: 30px;
}

.pf-navbar-container-resp {
  justify-content: space-between !important;
}

.pf-navbar-brand {
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.navbar-brand{
    height: 30px;
    width: 197px;
}

.pf-navbar-menu {
  display: flex;
  list-style: none;
  /*overflow: hidden;*/
  transition: max-height 0.3s ease-in-out;
  margin-bottom: 0;
  padding-left: 0;
  align-items: center;
}

.pf-navbar-menu.right .pf-nav-item{
    margin-right: 5px;
}

.pf-navbar-menu .menu-link-button{
    border-radius: 32px;
    display: flex;
    background-color: #f8a933;
    color: #fff;
    border-radius: 32px;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 8px 18px;
}

.pf-navbar-menu.pf-open {
  max-height: 550px;
}

.pf-navbar-menu.pf-closed {
  /* max-height: 0; */
  /* display: none; */
}

.pf-nav-item {
  margin-right: 10px;
  color: rgb(90, 90, 90);
}

.pf-nav-link {
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, .5);
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-nav-link.icon-link{
    color:#fff;
    font-size: 1.3rem;
}

.pf-nav-link.dropdown-toggle::after{
    margin-left: 0;
}

.pf-nav-item.active .pf-nav-link {
  color: white;
}

.pf-nav-link:hover {
  text-decoration: none;
  color: rgb(255, 255, 255, .75);
}

/* Toggler button for small screens */
.pf-navbar-toggler {
  z-index: 9999;
  display: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .5);
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .25rem;
}

.pf-navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.pf-toggler-icon::before,
.pf-toggler-icon::after {
  content: '';
  display: inline-block;
  width: 25px;
  height: 3px;
  background-color: white;
  position: absolute;
  left: 0;
}

.pf-toggler-icon::before {
  top: -8px;
}

.pf-toggler-icon::after {
  top: 8px;
}

.pf-navbar-menu-resp {
  flex-direction: column;
  /* max-height: 0; */
  overflow: hidden;
  position: absolute;
  top: 100%;
  /* left: -20px; */
  width: 100vw;
  background-color: rgb(52, 58, 64);
  z-index: 999;
  padding-left: 40px;
}

.pf-navbar-menu-resp.pf-open {
  display: block;
}

.pf-navbar-toggler-resp {
  display: none;
}

.material-ul {
  display: inline !important; 
  padding: 0 !important; 
  list-style-type: none !important;
}

.material-li {
  display: inline !important; 
  background-color: #DDDDDD !important; 
  padding: 5px !important; 
  border-radius: 5px !important; 
  margin-right: 5px !important;
}

.lang-picker-button {
  display: inline-flex; /* Ensures the text and image stay on the same row */
  align-items: center; /* Vertically aligns the text and image */
  white-space: nowrap; /* Prevents wrapping of the text and image */
  margin-right: 10px;
  margin-left: 20px;
  border-style: none;
  color: #ffffff;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .lang-picker-button {
    margin-right: 0px !important;
    margin-left: 0px !important;
    font-size: x-small;
  }
}

.lang-picker-button img {
  margin-left: 5px;
  width:30px; 
  height: 30px; 
  border-radius: 50%; 
  object-fit: cover;
  pointer-events: none;
}

.lang-picker-button span {
  pointer-events: none;
}

.lang-picker-button:hover {
  color: #c9c9c9;
}

/* LANGUAGES SIDEBAR */
.open-button-lang {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.sidebar-lang {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: #333;
  color: white;
  transition: right 0.3s ease; 
  z-index: 99999;
  padding: 20px;
}

.close-button-lang {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.overlay-lang {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.overlay-lang.active {
  visibility: visible;
  opacity: 1;
}

.sidebar-lang.active {
  right: 0;
}

.language-link {
  display: flex;
  align-items: center;
  margin: 15px 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.language-link span {
  text-decoration: none;
  color: inherit; 
}

.language-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.language-link img {
  width: 30px;
  margin-right: 10px;
}

.language-link span {
  font-size: 18px;
  color: white
}

.sidebar-lang h2 {
  margin-top: 20px;
}

.material-link {
  padding: 10px;
  background-color: #f3f3f3;
  align-items: center;
  display: flex;
  border-radius: 8px;
}

.material-link:hover {
  background-color: #d3d3d3;
}

.material-link span {
  color: #535353;
  font-size: x-large;
  font-weight: 500;
  margin-left: 10px;
  flex: 1;
}

.material-link img {
  height: 90px;
}

.material-page-gallery {
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  max-width: 100%;
  gap: 10px;
}

.material-page-gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.material-page-gallery div {
  flex: 1 1 calc(20% - 10px);
  box-sizing: border-box;
}

.material-element {
  cursor: pointer;
  position: relative;
}

.image-text {
  position: absolute;
  bottom: 8px;
  right: 8px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 4px 8px;
  font-size: 0.9rem;
  border-radius: 4px;
  pointer-events: none;
}

.material-element:hover {
  border-radius: 8px;
  box-shadow: 0 0 4px 0px #5d5c5c;
}

.gallery-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1000;
}
.gallery-modal-content {
    width: 100%;
    height: auto;
    max-height: 100%;
}
.gallery-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.gallery-prev, .gallery-next {
  position: absolute;
  top: 50%;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.gallery-prev {
  left: 20px;
}
.gallery-next {
  right: 20px;
}
.gallery-caption {
  color: #fff;
  font-size: 1rem;
  text-align: center;
  margin-top: 15px;
  max-width: 80%;
}
.gallery-content-container {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.gallery-image-container {
  max-width: 80%;
  height: 80vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-footer-container {
  display: flex;
  background-color: #343a40;
  height: 132px;
  justify-content: center;
}

.homepage-footer-container .center-column {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  width: 33%;
}

.homepage-footer-container .center-column img {
  padding-top: .3125rem;
  padding-bottom: .3125rem;
}

.homepage-footer-container .year {
  font-size: smaller;
  color: rgb(212, 212, 212)
}

.homepage-footer-container .left-column {
  display: flex;
  flex-direction: column;
  color: rgb(212, 212, 212);
  font-size: smaller;
  margin-top: 12px;
  width: 33%;
}

.homepage-footer-container .left-column div {
  flex-direction: column;
  display: flex;
  align-self: end;
}

.homepage-footer-container .right-column {
  display: flex;
  flex-direction: column;
  color: rgb(212, 212, 212);
  font-size: smaller;
  margin-top: 12px;
  width: 33%;
}

.homepage-footer-container .right-column div {
  flex-direction: column;
  display: flex;
}

.homepage-footer-container .right-column div div {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-direction: row;
}

.homepage-footer-container .right-column div img {
  height: 20px;
}

@media screen and (max-width: 700px) {
  .homepage-footer-container {
    display: flex;
    background-color: #343a40;
    height: 240px;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .homepage-footer-container .center-column {
    order: -1;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    width: 100vw;
  }
  
  .homepage-footer-container .center-column img {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
  }
  
  .homepage-footer-container .year {
    font-size: smaller;
    color: rgb(212, 212, 212)
  }
  
  .homepage-footer-container .left-column {
    order: 0;
    display: flex;
    flex-direction: column;
    color: rgb(212, 212, 212);
    font-size: smaller;
    margin-top: 12px;
    width: 50%;
  }
  
  .homepage-footer-container .left-column div {
    flex-direction: column;
    display: flex;
    align-self: center;
  }

  .homepage-footer-container .right-column {
    order: 0;
    display: flex;
    flex-direction: column;
    color: rgb(212, 212, 212);
    font-size: smaller;
    margin-top: 12px;
    width: 50%;
  }
  
  .homepage-footer-container .right-column div {
    flex-direction: column;
    display: flex;
    align-self: center;
  }
  
  .homepage-footer-container .right-column div div {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-direction: row;
  }
  
  .homepage-footer-container .right-column div img {
    height: 20px;
  }
}

.contact-info-container {
  display: flex;
  flex-direction: column;
}

.phone-button {
  display: block;
  padding: 4px 8px;
  background-color: #f8a933;
  color: #3a3a3a;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  font-family: Arial, sans-serif;
  transition: box-shadow 0.3s ease;
  text-decoration: none;
  margin-bottom: 8px;
}

.phone-button:hover {
  background-color: #f8a933;
  text-decoration: none;
  color: #3a3a3a;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.4);
}

.phone-button div {
    align-items: center;
    display: flex;
    gap: 4px;
    font-family: 'Chakra Petch';
    font-weight: 500;
}

.about-us-container {
    display: flex;
    flex-direction: column;
    background-color: #e9e9e9;
    padding:12px;
    border-radius: 8px;
    font-size: 14px;
    width: 180px;
    line-height: 1.25;
}

.checkout-cart-item {
  display: flex;
  justify-content: space-between;
}

.checkout-cart-item-icon-name-container {
  display: flex;
}

.checkout-cart-item-name-container {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  justify-content: center;
}

.checkout-cart-item-name-container #material {
  color: #0000007d;
  font-size: small;
}

.checkout-cart-item-name-container #dimension {
  color: #0000007d;
  font-size: small;
}

.checkout-cart-item-count-price-container {
  display: flex;
  align-items: center;
}

.checkout-cart-item-count-button {
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  border-color: #0000001f;
  margin: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 5px;
}

.checkout-cart-item-count {
  margin-right: 1rem;
}

.checkout-cart-item-price {
  font-weight: 500;
}

.checkout-cart-item-price-small {
  font-weight: 100;
  font-size: small;
  margin-left: 10px;
}

.checkout-cart-item-price-ordinary {
  font-weight: 300;
  font-size: 0.7rem;
  margin-right: 5px;
  text-decoration: line-through;
}

.number-container {
  display: flex;
  align-items: center;
  line-height: 1;
  justify-content: center;
}

.large-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
}

.icon {
  width: 100%;
  height: 100%;
}

.number {
  margin: 0 0.5rem;
  display: inline-flex;
  justify-content: center;
  width: 30px;
}

.number:focus {
  outline: none;
  border: 1px rgb(175, 175, 175) solid;
}

.number-container {
  display: flex;
  line-height: 1;
}

.number-review {
  display: inline-flex;
}

#cartItems::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

#cartItems::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
  border: 2px solid #f1f1f1;
}

#cartItems::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}

#checkoutCart {
  overflow-y: auto;
}

#checkoutCustomerInformation {
  overflow-y: auto;
}

#checkoutReview {
  overflow-y: auto;
}

#checkoutCustomerInformation::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

#checkoutCustomerInformation::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
  border: 2px solid #f1f1f1;
}

#checkoutCustomerInformation::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}

.carouselViews {
  display: flex;
  height: 60vh;
  width: 300%;
  transition: transform 0.5s ease;
}

.carouselView {
  width: 33.3333%;
  padding: 5px;
}

.carouselContainer {
  overflow: hidden;
  position: relative;
}

.checkoutReviewAddressBox {
  font-size: smaller;
}

.checkoutReviewAddressBox p {
  margin: 0;
}

#checkoutReview::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

#checkoutReview::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
  border: 2px solid #f1f1f1;
}

#checkoutReview::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}

.checkoutAddressTitleContainer {
  display: flex;
  align-items: baseline;
}

.checkoutAddressChangeButton {
  font-size: small;
  color: blue;
  margin-left: 0.5rem;
  cursor: pointer;
}

.checkoutAddressChangeButton:hover {
  color: rgb(188, 188, 255);
}

/* Basic dropdown styling */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.dropdown-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.dropdown-content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
  border: 2px solid #f1f1f1;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}

.dropdown-btn {
  padding: 5px;
  border-radius: 5px;
  background-color: #898989;
  color: white;
  border: none;
  cursor: pointer;
}

.dropdown-btn:hover {
  background-color: #5f5f5f;
}

.dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  max-height: 200px;
  overflow-y: auto; /* Enable scroll if content exceeds height */
}

.dropdown-item {
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.dropdown-item p {
  margin: 5px 0; /* Space between lines in each item */
}

/* Hover effect for items */
.dropdown-item:hover {
  background-color: #f1f1f1;
}

.address-table {
  font-family: 'Chakra Petch', sans-serif;
  table-layout: auto;
  width: 100%;
  box-shadow: 0 0 2px 0px #999999;
  border-radius: 8px;
}

.address-table td:first-child {
  width:auto;
  text-align:right;
  white-space: nowrap
}

.address-table td {
  width:100%;
  font-weight: 400;
  padding: 8px;
}

.address-table input {
  width: 100%;
  border-style: none;
}

.address-table input::placeholder {
  color: rgb(190, 190, 190);
  font-weight: 400;
}

.address-table tr {
  border-bottom: 1px solid #ddd;
}

#removeCartItemButton {
  cursor: pointer;
}

#removeCartItemButton:hover {
  color: red;
}

#main-container {
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  background-color: hsl(0deg 0% 100%);
}

@media(max-width:1120px){
    #main-container{
        margin-top: 105px;
    }
}

.map-image{
    max-width: 100%;
}
@media(min-width:769px){
    .map-image{
        max-width:700px
    }
}

#frontpage-top-video-container {
  width: 100%;
  height: calc(100vh - 56px);
  overflow: hidden; /* Hide the overflowing parts of the video */
  position: relative;
}

#frontpage-top-video-container video {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%); /* Center the video */
  min-width: 100%; /* Make sure the video covers the width */
  min-height: 100%; /* Make sure the video covers the height */
  height: 100%;
  object-fit: cover; /* Scale the video to maintain aspect ratio and fill the container */
}

#frontpage-video-overlay {
  position: relative;
  display: flex;
  justify-content: center;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.178);
}

#frontpage-video-overlay div {
  color: white;
  margin: 0 40px;
}

#frontpage-video-overlay div div {
  display: flex;
  margin: 0;
  align-items: center;
}

#frontpage-video-overlay div div span {
  cursor: pointer;
  background-color: #f8a933;
  color: black;
  font-size: clamp(13px, 3.5vw, 40px);
  text-wrap-mode: nowrap;
  font-weight: 600;
  display: inline-flex;
  height: max-content;
  align-items: center;
  justify-content: center;
  border-radius: 77px;
  line-height: 1;
  padding: 15px 40px;
  margin-right: 17%;
  box-shadow: 0 0 12px 0px #3f3f3f;
}

#frontpage-video-overlay div div span a {
  text-decoration: none;
  color: inherit;
}

#frontpage-video-overlay div div span:hover {
  background-color: #f89b10;
  color: white;
  border: 1px rgb(255, 255, 255) solid;
  box-shadow: 0 0 12px 0px #ffffff;
}

@media (max-width: 500px) {
  #frontpage-video-overlay div div {
    flex-direction: column;
  }


  #frontpage-video-overlay div div span {
    padding: 10px 20px;
    margin-right: 0%;
    font-size: clamp(13px, 6.5vw, 70px);
  }
}

#frontpage-video-overlay div div ul {
  font-size: clamp(14px, 1.3vw, 32px);
  font-weight: 600;
  margin-right: auto;
  text-shadow: 0 0 10px #000000;
}

#frontpage-video-overlay h1 {
  font-size: clamp(30px, 5.8vw, 70px);
  font-weight: 600;
  margin-top: 31.7vh;
  margin-bottom: 12px;
  text-shadow: 0 0 10px #000000;
}

#frontpage-video-overlay h2 {
  font-size: clamp(20px, 3.8vw, 50px);
  font-weight: 600;
  max-width: clamp(450px, 43vw, 43vw);
  text-shadow: 0 0 10px #000000;
}

#frontpage-video-overlay #info-box {
  padding: 12px;
  display: flex;
  flex-direction: column;
  font-size: medium;
}

#frontpage-video-overlay #info-box span {
  text-shadow: 1px 1px black;
}

#frontpage-video-overlay #button{
  font-size: x-large;
  font-weight: 400;
  margin-top: 18px;
  color: black;
  background-color: #ffd89e;
  border-radius: 12px;
  padding: 0px 16px 0px 16px;
  cursor: pointer;
}

#frontpage-video-overlay #button:hover{
  background-color: #f5bc67;
}

.frontpage-card-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 36px;
  padding-bottom: 95px;
  padding-top: 24px;
}

@media (max-width: 1023px) { 
  .frontpage-card-container  {
    padding-left: calc(50vw - 168.5px); 
    padding-right: calc(50vw - 168.5px);
  }
}

@media (min-width: 1024px) {
  .frontpage-card-container  {
      display: flex;
      justify-content: center;
      overflow-x: hidden;
      padding-left: 0;
      padding-right: 0;
  }
}


.frontpage-card-item {
  flex: 0 0 337px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
}

.frontpage-card-item h2 {
  font-size: clamp(30px, 3.8vw, 60px);
  font-weight: 500;
  color: #333333;
}

.frontpage-card {
  cursor: pointer;
  padding: 16px;
  width: 337px;
  height: 325px;
  background-color: white;
  border-radius: 32px;
  box-shadow: 0 0 20px 0px #d3d2d2;
  display: flex;
  flex-direction: column;
  color: #333333;
  text-decoration: none;
  gap: 8px;
}

a:hover {
    text-decoration: none;
    color: #333333;
}

.frontpage-card:hover {
  box-shadow: 0 0 20px 0px #6b6b6b;
}

.frontpage-card h2 {
  font-size: x-large;
  font-weight: 700;
  margin-top: 0px;
  text-align: center;
} 

.frontpage-card span {
  font-size: medium;
  font-weight: 700;
  text-align: center;
  color: #f8a933;
} 

.frontpage-card .img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 185px;
}

.frontpage-card .img-container li {
  font-weight: 500;
  font-size: smaller;
  color: #333333;
  margin-bottom: 12px;
}

.frontpage-card .img-container img {
  height: 100%;
}

.frontpage-customer-container {
  padding-top: 24px;
  padding-bottom: 95px;
  display: flex;
  gap: 32px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

@media (max-width: 1023px) { 
  .frontpage-customer-container  {
    padding-left: calc(50vw - 168.5px); 
    padding-right: calc(50vw - 168.5px);
  }
}

@media (min-width: 1024px) {
  .frontpage-customer-container {
      display: flex;
      justify-content: center;
      overflow-x: hidden;
      padding-left: 0;
      padding-right: 0;
  }
}

.frontpage-customer-item {
  flex: 0 0 337px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  scroll-snap-align: center;
}

.frontpage-customer-item .rating {
  display: flex;
  gap: 5px;
  padding-bottom: 12px;
}

.frontpage-customer-item .rating div {
  width: 24px;
  height: 24px;
  background-color: gold;
  clip-path: polygon(
      50% 0%, 61% 35%, 98% 35%, 
      68% 57%, 79% 91%, 50% 70%, 
      21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

.frontpage-customer-item .comment {
  padding: 16px;
  width: 337px;
  height: 168px;
  background-color: white;
  border-radius: 32px;
  box-shadow: 0 0 20px 0px #d3d2d2;
  display: flex;
  flex-direction: column;
  color: #333333;
  justify-content: space-between;
  align-items: center;
}

.frontpage-customer-item .comment h2 {
  font-size: larger;
  text-align: center;
}

.frontpage-customer-item .comment span {
  font-size: smaller;
}

.frontpage-customer-item .img-container {
  border-radius: 32px;
  width: 318px;
  height: 318px;
  overflow: hidden;
  box-shadow: 0 0 20px 0px #d3d2d2;
}

.frontpage-customer-item .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#frontpage-slogan {
  border-top: 5px #ffaa00 solid;
  padding-top: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333333;
}

#frontpage-slogan h2 {
  font-size: clamp(20px, 3.8vw, 50px);
  font-weight: 700;
}

#frontpage-button {
  font-weight: 400;
  margin-top: 18px;
  color: black;
  background-color: #ffd89e;
  border-radius: 12px;
  padding: 4px 16px 4px 16px;
  cursor: pointer;
  display: inline-block;
}

.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  max-width: 600px;
}

.custom-modal-content button {
  margin: 10px;
  padding: 4px 20px;
  cursor: pointer;
  border: 1px #b9b9b9 solid;
  border-radius: 4px;
}

.custom-modal-content a {
  color: #7d7575;
  font-weight: 500;
}

.custom-modal img {
  width: 50px;
}

.custom-modal p {
  font-size: larger;
}

.location-language-item {
  border: 1px #c9c9c9 solid;
  display: flex;
  gap: 8px;
  align-items: center;
  display: inline-flex;
  padding: 4px;
  border-radius: 4px;
}

.custom-modal #language-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 8px;
}

.custom-modal #country{
  font-weight: 500;
}

#language-list .lang-item-link {
  width: calc(33% - 4px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px #ebebeb solid;
  padding: 4px 2px;
  white-space: normal;
  text-align: left;
}

#language-list img {
  width: 40px;
}

#language-list span {
  display: block;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  line-height: 1;
}

@media (max-width:768px) {
  #language-list .lang-item-link {
    width: calc(50% - 8px);
  }
}

.lang-item-link:hover {
  cursor: pointer;
  color: black;
}

.frontpage-social-container {
  padding-bottom: 95px;
  padding-top: 24px;
  display: flex;
  gap: 32px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-bottom: 5px #ffaa00 solid;
}

@media (max-width: 1023px) { 
  .frontpage-social-container  {
    padding-left: calc(50vw - 168.5px); 
    padding-right: calc(50vw - 168.5px);
  }
}

@media (min-width: 1024px) {
  .frontpage-social-container {
      display: flex;
      justify-content: center;
      overflow-x: hidden;
      padding-left: 0;
      padding-right: 0;
  }
}

.frontpage-social-item {
  cursor: pointer;
  flex: 0 0 337px;
  height: 337px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  scroll-snap-align: center;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 0 20px 0px #d3d2d2;
  position: relative;
}

.frontpage-social-item:hover {
  box-shadow: 0 0 20px 0px #6b6b6b;
}

.frontpage-social-item a {
  width: 100%;
  height: 100%;
}

.frontpage-social-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frontpage-social-item.hoverable img, .frontpage-social-item.hoverable video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}
.frontpage-social-item.hoverable video {
  opacity: 0;
}
.frontpage-social-item.hoverable:hover video {
  opacity: 1;
}
.frontpage-social-item.hoverable:hover img {
  opacity: 0;
}

#customer-container {
  margin-top: 105px;
  min-height: calc(100vh - 105px - 45px);
  height: calc(100vh - 105px - 45px);
  background-color: #f8f8f8;
}

.customer-tab {
  padding-bottom: 50px;
}

.customer-tab#checkout {
  display: block;
  padding-top: 20px;
  background-color: #f8f8f8;
}

@media (min-width:768px) {
  .customer-tab {
    padding: 0 10%;
    padding-bottom: 50px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
  }
}

#customer-tab-bar {
  width: 100vw;
  display: flex;
  height: 45px;
  background-color: #343a40;;
  position: fixed;
  bottom: 0;
  left: 0;
}

#customer-tab-bar div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: small;
  justify-content: center;
  width: 25%;
  color: rgb(236, 236, 236);
  cursor: pointer;
}

#customer-tab-bar div:not(:last-child) {
  border-right: 1px solid #555555;
}

.customer-tab-closed {
  display: none !important;
}

#customer-container #home {
}

#customer-container #orders {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: scroll;
}

#customer-container #order {
  display: flex;
  flex-wrap: wrap; 
  gap: 8px;
  height: 100%;
  overflow-y: scroll;
}

#customer-container #blueprints {
  height: 100%;
  overflow-y: scroll;
}

#customer-container #account {
  height: 100%;
  overflow-y: scroll;
  padding-top: 20px;
  display: block;
}

#customer-container #checkout {
  height: 100%;
  overflow-y: scroll;
  padding-top: 20px;
  display: block;
}

#customer-container .group {
  padding: 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.light-bg-border {
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
}

@media (min-width:1120px) {
  #customer-container {
    margin-top: 140px;
  }

  #customer-tab-bar {
    border-top: 1px #555555 solid;
    top: 110px !important;
  }

  .order-first-on-large {
    order: 0;
    flex: 1;
  }

  .order-after-on-large {
    order: 1;
    flex: 1;
  }
}

#customer-container .group-no-padding {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#customer-container .group-title {
  font-size: 1.45rem;
  font-weight: 600;
}

#customer-container .group-content {
  font-weight: 400;
  padding-top: 18px;
}

.customer-bold-heading {
  font-weight: 500;
  cursor: pointer;
  color: #6262c3;
}

.customer-bold-heading:hover {
  text-decoration: underline;
}

.group-order-item img{
  width: 50px;
  height: 50px;
}

.group-order-item {
  display: flex;
}

.group-order-item:not(:first-child) {
  margin-top: 18px;
}

.group-order-item-name-material {
  display: flex;
  flex-direction: column;
  line-height: 1;
  justify-content: center;
  margin-left: 8px;
  align-items: end;
  width: 100%;
}

.group-order-item-name-material #name{
  margin-bottom: 4px;
}

.group-order-item-name-material #price{
  font-size: small;
}

.group-order-item-name-material #price-small{
  color: #adadad;
  font-size: small;
}

.group-order-item-name-material #material{
  font-size: small;
  color: #adadad;
  margin-top: 4px;
}

.group-order-sum-container {
  border-top: 1px #dadada solid;
  display: flex; 
  justify-content: end; 
  font-size: smaller; 
  margin-top: 18px;
  padding-top: 4px;
}

.group-order-sum-container.checkout-sum {
  border-top: none !important;
  display: flex; 
  justify-content: end; 
  font-size: smaller; 
  margin-top: 0 !important;
  padding-top: 4px;
}

.group-order-sum-container .titles {
  display: flex; 
  flex-direction: column;
}

.group-order-sum-container .values {
  display: flex; 
  flex-direction: column; 
  margin-left: 0.5rem;
}

.group-order-events-container {
  overflow: hidden;
  margin-bottom: 18px;
}

.group-order-events-container.loaded {
  overflow: hidden;
  margin-bottom: 18px;
  transition: height 0.5s ease;
}

.group-order-events {
}

.group-order-events.loaded {
  transition: transform 0.5s ease;
}

.group-order-event {
  border-bottom: 1px #d9d8d8 solid;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.group-order-event-thin {
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-radius: 4px;
  border: solid #ebebeb 1px;
  flex-direction: column !important;
  margin-bottom: 0px !important;
}


.group-order-event #dispatcher{
  font-size: x-small;
  border-radius: 4px;
  padding: 1px;
  width: fit-content;
}

.group-order-event #dispatcher.postnord{
  border: 1px hsl(207 100% 87% / 1) solid;
  background-color: #d3ebff;
}

.group-order-event #dispatcher.proforger{
  border: 1px hsl(29, 100%, 87%) solid;
  background-color: #ffedd3;
}

.group-order-event #content {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.group-order-event #name {
  font-weight: 600;
  font-size: small;
  color: #6d6d6d;
}

.group-order-event #name-short {
  font-weight: 600;
  font-size: small;
  color: #6d6d6d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.group-order-event #dispatchname {
  display: flex;
}

.group-order-event #latest-update {
  display: flex;
  flex-direction: column;
  font-size: small;
}


.group-order-event #datetime {
  font-size: small;
  display: flex;
  flex-direction: column;
  width: 72px;
  flex-shrink: 0;
}

.group-order-event #time {
}
.group-order-event #date {
}

.group-order-event-buttons {
  color: #a1a1a1;
  font-size: smaller;
  display: flex;
  justify-content: space-between;
}

#last-order-toggle-events-button {
  cursor: pointer;
  color: #636363;
  background-color: #f9f9f9;
  padding: 2px;
  box-shadow: 0px 0px 1px #a3a3a3;
}

#last-order-toggle-events-button:hover {
  background-color: #f1f1f1;
  box-shadow: 0px 0px 1px #515151;
}

.customer-order-container {
  display: flex;
  flex-direction: column;
}

.customer-order-container .customer-order-item:nth-child(odd) {
  background-color: rgb(245, 245, 245);
}

.customer-order-container .customer-order-item:nth-child(even) {
  background-color: #ffffff;
}

.rating-holder {
    display: flex;
    justify-content: center;
}

.rating {
    direction: rtl;
    font-size: 2rem;
    unicode-bidi: bidi-override;
    display: inline-block;
}

.star {
    cursor: default;
    color: #ccc;
}

.star.selected {
    color: #ffc107;
}

.customer-order-item {
  display: flex;
  flex-direction: column;
  padding: 14px 8px 14px 8px;
  margin: 4px;
  border-radius: 4px;
  border: 1px solid #cbcbcb;
}

.customer-order-item > .id-date-container {
  display: flex;
  justify-content: space-between;
  font-size: small;
  color: #8f8f8f;
}

.customer-order-item > .id-date-container #orderId {
  font-weight: 500;
  cursor: pointer;
  color: #6262c3;
}

.customer-order-item > .id-date-container #orderId:hover { 
  text-decoration: underline;
}

.customer-order-item > .info-container {
  display: flex;
  justify-content: space-between;
  font-size: medium;
  font-weight: 500;
}

#adress-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.add-address-group-header {
  border-bottom: 1px solid #d1d1d1;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

#inputs-container .add-address-group-header {
  margin-top: 16px;
}

#add-new-address-container {
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  margin-bottom: 16px;
  padding: 8px;
  max-width: 500px;
}

.adress-item {
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.adress-item #display-container {
  display: block;
}

.adress-item #display-container.hidden {
  display: none !important;
}

.adress-item-hidden {
  display: none !important;
}

.adress-item #name-container {
  display: flex;
  flex-direction: column;
}

.adress-item .header-container {
  display: flex;
  justify-content: space-between;
}

.corporate-name-container {
  display: flex;
  flex-direction: column;
}

.left-button-container {
  display: flex;
  gap: 8px;
  margin-bottom: 48px;
}

.filter-button {
  background-color: #dbdada;
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  font-size: smaller;
  display: flex;
  gap: 4px;
  align-items: center;
  line-height: 1.5;
}

.adress-item #group {
  background-color: #ececec;
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  font-size: smaller;
  display: flex;
  align-items: center;
  line-height: 1.5;
  padding: 0px 4px;
  color: #8d8d8d;
  display: flex;
  gap: 6px;
}

.adress-item #name,#adr,#orgNr {
  font-weight: 500;
}

.adress-item #contact {
  color: #8d8d8d;
  font-weight: 400;
}

.adress-item #main-address-container {
  display: flex;
  gap: 8px;
  padding: 0 4px;
  font-size: smaller;
}

.adress-item #change-button {
  background-color: #dbdada;
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  font-size: smaller;
  display: flex;
  gap: 4px;
  align-items: center;
  line-height: 1.5;
  cursor: pointer;
  padding: 0 4px;
}

.adress-item #update-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adress-item #update-container.hidden {
  display: none !important;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adress-item,.form-container  #inputs-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-container {
  display: flex;
  justify-content: end;
  gap: 8px;
}

.my-page-button {
  display: inline-block;
  padding: 4px;
  font-weight: 400;
  border-radius: 4px;
}

.my-page-button.hidden {
  display: none !important;
}

#save-button {
  background-color: #cbf3cb;
  border: 1px solid #b3e9b3;
}

#cancel-button {
  background-color: #dbdada;
  border: 1px solid #cbcbcb;
}

#remove-button {
  background-color: #ffc9c9;
  border: 1px solid #ffb0b0;
}

.my-pages-button {
  background-color: #343a40;
  border-radius: 4px;
  border: 1px solid #343a40;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  line-height: 1.5;
  color: #f7f7f7;
  padding: 4px;
}

#canonical-display-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  padding: 8px;
}

#canonical-container {
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  padding: 8px;
}

#canonical-display-container #fields-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#canonical-display-container #change-button {
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  font-size: smaller;
  display: flex;
  gap: 4px;
  align-items: center;
  line-height: 1.5;
  margin: 2px;
  cursor: pointer;
}

.canonical-item {
  display: flex;
  flex-direction: column;
}

.canonical-item span {
  line-height: 1.1;
}

#update-password-container {
  padding: 8px;
  background-color: rgb(245, 245, 245);
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  margin-bottom: 32px;
}

#cart-img-container {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table td {
  padding: 4px;
  vertical-align: top;
}

.info-table td:first-child {
  white-space: nowrap;
  width: 1px;
}

.order-address-info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-address-info {
  background-color: white; 
  padding: 8px; 
  flex: 1;
  border: 1px #dddddd solid;
  border-radius: 4px;
}

.filter-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-container {
  display: flex;
  gap: 8px;
}

.checkbox-container {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

#pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-material-pill {
  cursor: pointer;
  font-size: x-small;
  background-color: #dddddd;
  border-radius: 50px;
  padding: 0px 4px;
  border: 1px rgb(141, 141, 141) solid;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.customer-material-pill.small {
  margin-top: 2px;
  font-size: xx-small;
  cursor: default;
}

.customer-material-pill.selected#material-6 {
  color: rgb(41, 41, 41);
  background-color: #ffb7b7;
  border: 1px #f88282 solid;
}

.customer-material-pill.selected#material-2 {
  color: rgb(41, 41, 41);
  background-color: #fdbfff;
  border: 1px #ff56da solid;
}

.customer-material-pill.selected#material-1 {
  color: rgb(41, 41, 41);
  background-color: #b7e1ff;
  border: 1px #82b8f8 solid;
}

.customer-material-pill.selected#material-3 {
  color: rgb(255, 255, 255);
  background-color: #8b5a2b;
  border: 1px #633e1c solid;
}

.customer-material-pill.selected#material-5 {
  color: rgb(41, 41, 41);
  background-color: #b7ffcc;
  border: 1px #82f8a2 solid;
}

.customer-material-pill.selected#material-4{
  color: rgb(41, 41, 41);
  background-color: #ffef92;
  border: 1px #ffdd48 solid;
}

#blueprint-orders {
  display: flex;
  gap: 8px;
}

#blueprint-icon {
  width: 50px;
  height: 50px;
  padding: 2px;
}

#blueprint-orders .order-link2,.blueprint-link {
  cursor: pointer;
  background-color: white;
  border: 1px rgb(209, 209, 209) solid;
  padding: 1px;
  border-radius: 4px;
}

.blueprint-link {
  position: relative;
}

.blueprint-link.selected {
  background-color: hsl(104.54deg 100% 96.07%) !important;
}

.blueprint-group #title {
  font-size: large;
  font-weight: 500;
}

.blueprint-group-container-holder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blueprint-group-container-holder .title {
  font-size: large;
  font-weight: 500;
}

.blueprint-group-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.blueprint-group-container > .item {
  display: flex;
  gap: 8px;
  border: 1px #dddada solid;
  width: calc(25% - 8px);
  background-color: #e9e9e9;
  align-items: center;
} 

.blueprint-group-container > .item:hover {
  border: 1px #000000 solid;
  background-color: #ffe8c6;
}

@media (max-width:768px) {
  .blueprint-group-container > .item {
    width: 100%;
  } 
}

.blueprint-group-container > .item div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
} 

.blueprint-group-container > .item img {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border: 1px #c1c1c1 solid;
  padding: 2px;
  border-radius: 4px;
  margin-left: 4px;
} 

.blueprint-group-container > .item #name {
  font-weight: 500;
  color: #4d4d4d;
}

.blueprint-group-container > .item #project {
  font-size: medium;
  color: #979797;
}

.blueprint-group-container > .item #size {
  font-size: small;
  color: #b5b5b5;
}

.blueprint-group-container > .item #deleted {
  color: #ff8181;
  font-style: italic;
  font-size: small;
  display: none;
}

#blueprint-hover-element {
  background-color: #ffffff;
  box-shadow: 0 0 9px 0px #696969;
  color: #000000;
  border-radius: 4px;
  position: absolute;
  top: 0px;
  left: 20px;
  white-space: nowrap;
  display: inline-block;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#blueprint-hover-element.hover-hidden {
  display: none;
}

#blueprint-hover-element > .item {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

#blueprint-hover-element > .item:hover {
  background-color: #efefef;
}

#blueprint-page-image {
  width: 100%;
  max-height: 300px;
}

.customer-page-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: #00000028;
  width: 100vw;
  height: 100vh;
}

.customer-page-modal.hidden {
  display: none;
}

.customer-page-modal > .modal-container {
  background-color: white;
  box-shadow: 0 0 20px 2px #7d6b6b;
  max-width: 600px;
  max-height: 600px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
}

.customer-page-modal > .modal-container > #footer {
  align-self: end;
  padding: 16px;
}

@media (max-width:768px) {
  .customer-page-modal > .modal-container > #footer {
    align-self: auto;
    text-align: center;
    padding: 16px;
    display: inline-flex;
    gap: 4px;
    flex-direction: column-reverse;
  }
}

.customer-page-modal > .modal-container > .modal-inner-container {
  flex: 1;
  overflow: auto;
}

#checkout-cart-container > .item,
#add-to-cart-modal > .modal-container > .modal-inner-container > .item {
  display: flex;
  padding: 16px;
  gap: 16px;
  align-items: stretch;
  border-bottom: 1px #dbdbdb solid;
}

#checkout-cart-container > .item .has-error {
  background-color: rgb(255, 165, 165);
}

#add-to-cart-modal > .modal-container > .modal-inner-container > .item img {
  width: 50px;
  height: 50px;
}

.item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.icon-holder {
  display: flex;
  position: relative;
  align-items: center;
  width: 50px;
}

#trashcan-holder {
  cursor: pointer;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7f7f;
  border-radius: 6px;
}

#clone-cart-item {
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

#clone-cart-item svg {
  pointer-events: none;
}

#clone-cart-item:hover {
  background-color: #cccccc;
}

.name-copy-holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#trashcan-holder:hover {
  background-color: #cccccc;
}

#trashcan-holder svg {
  pointer-events: none;
}

.item-content .selection-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-content .selection-container span {
  font-weight: 500;
  color: #737373;
}

.item-content .selection-container .select-wrapper {
  display: flex;
  gap: 4px;
}

.item-content select {
  flex: 1;
  border: 1px solid #ededed;
  border-radius: 4px;
  color: #737373;
}

.item-content .quantity-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.item-content .quantity-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.item-content .quantity-controls span {
  cursor: pointer;
  background-color: #e7e7e7;
  width: 23px;
  height: 22px;
  display: flex;
  align-items: end;
  justify-content: center;
  font-weight: 600;
  font-size: x-large;
  border-radius: 6px;
  line-height: 1;
}

.item-content .quantity-controls span:hover {
  background-color: #cccccc;
}

.item-content input[name="count"] {
  width: 40px;
  border: 1px solid #ededed;
  border-radius: 4px;
  text-align: center;
  color: #737373;
}

.item-content .price {
  font-size: medium;
  font-weight: 200;
  color: rgb(90, 90, 90);
}

.item-content .price span {
  color: #373737;
}

#footer span {
  padding: 8px;
  border-radius: 8px;
  font-weight: 500;
}

#footer .cancel {
  cursor: pointer;
  color: #757575;
  border: 2px solid #e7e7e7;
}

#footer .cancel:hover {
  color: #575757;
  border: 2px solid #8d8d8d;
}

#footer .submit {
  cursor: pointer;
  color: #757575;
  background-color: #e7e7e7;
  border: 2px solid #e7e7e7;
}

#footer .submit:hover {
  color: #575757;
  border: 2px solid #8d8d8d;
}

#footer .add {
  cursor: pointer;
  background-color: #e7e7e7;
}

#footer .add:hover {
  background-color: #cccccc;
  color: #464646;
}

#selection-display {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: end;
  justify-content: center;
}

#selection-display > span {
  pointer-events: all;
  cursor: pointer;
  background-color: #f3f3f3;
  padding: 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px #9f9f9f solid;
  box-shadow: 0 0 10px 0 #6b6b6b;
  font-weight: 500;
  font-size: large;
}

#selection-display #count {
  border: 1px #afafaf solid;
  border-radius: 59px;
  padding: 1px 4px;
  background-color: white;
}

@media (max-width:768px) {
  #selection-display > span {
    margin-bottom: 45px;
  }
}

.form-address-group-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.form-address-group {
  flex: 1 1 100%;
  position: relative;
}

@media (min-width: 1024px) {
  .form-address-group.name-group {
      flex: 1 1 calc(50% - 5px);
  }
}

.form-address-group input,
.form-address-group select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  background: white;
}

.form-address-group input.not-valid, select.not-valid {
  background-color: pink;
}

.form-address-group label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background: white;
  padding: 0px 5px;
  color: #999;
  font-size: 14px;
  transition: 0.3s ease;
  pointer-events: none;
  border: 1px #ffffff solid;
}

.form-address-group input:focus + label,
.form-address-group input:not(:placeholder-shown) + label,
.form-address-group select:focus + label,
.form-address-group select:not([value=""]) + label {
    top: 0;
    font-size: 12px;
    color: #333;
    border: 1px #dddddd solid;
    border-radius: 8px;
}

.flex-column-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-row-container {
  display: flex;
  gap: 8px;
}

.flex-column-container > h5 {
  margin-bottom: 0;
}

#waiting-for-checkout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.checkout-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.in-cart-popup {
  position: absolute;
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  max-width: 380px;
  opacity: 0;
  animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.my-pages-button-white {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px #cbcbcb solid;
  border-radius: 4px;
  padding: 0px 4px;
  cursor: pointer;
  background-color: white;
}

.my-pages-button-white:hover {
  border-color: black;
  color:black
}

.my-pages-button-white#select.selected {
  border: 1px dashed rgb(78, 78, 78) !important;
}

.my-pages-button-white#select > .selected-svg {
  display: none;
}

.my-pages-button-white#select > .un-selected-svg {
  display: block !important;
}

.my-pages-button-white#select.selected > .un-selected-svg {
  display: none !important;
}

.my-pages-button-white#select.selected > .selected-svg {
  display: block !important;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-size: 0.9rem;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group .form-control-sm{
    padding: .25rem .5rem !important;
    border-radius: .25rem !important;
    font-size: .875rem !important;
    border: 1px solid #ced4da;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.massUploadOverlay{
    background-color: #ffffffab;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.import-warning{
    width: 100%;
    left: 0;
    top: 0;
    margin: 0;
    position: absolute;
}
.cursor-pointer{
    cursor: pointer;
}

.prof-import-container{
    height: 100%;
}

.uploaded-container.selected{
    border: 2px solid rgb(0 23 56 / 51%) !important;
    box-shadow: 0px 4px 8px -3px rgb(0 23 56 / 51%);
}

.uploaded-header{
    border-radius: 8px 8px 0px 0px;
}

.prof-uploaded-container{
    /* min-height: 100%; */
    max-height: 100%;
    overflow-y: scroll;
}

.prof-uploaded-container .uploadHeader{
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items:flex-start;
    align-self: flex-start;
    gap: 10px;
    padding: 5px;
    height: 45px;
    border-bottom: 1px solid #bbbbbb;
}

.prof-uploaded-container .uploadBody{
    background-color: #f3f3f3;
}

#selected-dxfs{
    background-color: #fefefe;
}

#selected-dxfs .selected-container{
    box-shadow: 0px 3px 8px -3px rgb(0 23 56 / 51%);
}

.importMenuWrapper{
    height: 100%;
    max-height: 100%;
    display: block;
    overflow-y: scroll;
    position: relative;
}
.importMenuWrapper::-webkit-scrollbar{
    width: 4px;
}

.importMenuWrapper::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.importMenuWrapper::-webkit-scrollbar-thumb{
    background-color: #585858;
    border-radius: 12px;
}

.importMenuWrapper .importMenu{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.importMenuWrapper .importMenu .header{
    flex: 0 0 40px;
    max-height: 40px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

.importMenuWrapper .importMenu .body{
    flex: 0 0 auto;
    width: 100%;
    margin: -4px;
    padding: 0;
}

.imageTemplateSettingContainer{
    position: absolute;
    width: 80%;
    background-color: #fff;
    border-radius: 12px;
    display:flex;
    flex-direction: column;
    box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.51);
    -webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.51); 
    padding: 10px;

    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.imageTemplateSettingContainer .close{
    position: absolute;
    top: 2px;
    right: 10px;
    font-size: 0.75rem;
}

.edit-button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 5px;
  transition: color 0.2s;
}
.mobile-bulk-import{
    display: none;
}

.mobile-bulk-import-close{
    display:none;
}

.edit-button:hover {
  color: #333;
}

.pf-nav-link.dropdown-toggle.show{
    background-color: #030304 !important;
}

.pf-menu-dropdown{
    background-color: #030304 !important;
    color: #f8f8f8 !important;
    border-radius: 0 !important;
    padding: 0;
    margin: 0;
    border: 0;
    top: -2px !important;
    z-index: 999999;
}

.pf-menu-dropdown .pf-dropdown-item{
    padding: 4px 12px;
    color: #fff;
    display: block;
}
.pf-menu-dropdown .pf-dropdown-item.has-children{
    display: flex;
    justify-content: space-between;
}
.pf-menu-dropdown .pf-dropdown-item.has-children::after{
    content: '\F285';
    font-family: "bootstrap-icons" !important;
    font-family: Boot;
    margin-left:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.multi-level-dropdown{
    position: relative;
}

.multi-level-dropdown .level-content{
    display: none;
}

.multi-level-dropdown:hover .level-content{
    display: block;
    position: absolute;
    left: 100%;
    top:0;
    background-color: #343a40;
    list-style: none;
    margin: 0;
    padding: 0px;
}

.multi-level-dropdown:hover .level-content .pf-dropdown-item{
    padding: 4px 12px;
}

.multi-level-dropdown:hover .level-content .pf-dropdown-item:hover{
    background-color: #2a2e33;
}

.multi-level-dropdown:hover .pf-dropdown-item{
    background-color: #343a40;
}

.pf-menu-dropdown .pf-dropdown-item:hover{
    background-color: #343a40;
}

.news-banner{
    background-color: #2a2f34;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 45px;
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}
.news-banner .inner{
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: None;
}

.news-banner .inner::-webkit-scrollbar {
    display: none;
}

.news-banner .inner .item{
    width: 100vw;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    left: 0;
    flex: 1 0 100%;
}

.news-banner .inner .item p,
.news-banner .inner .item h1, 
.news-banner .inner .item h2, 
.news-banner .inner .item span,
.news-banner .inner .item h3,
.news-banner .inner .item h4,
.news-banner .inner .item h5,
.news-banner .inner .item h6
{
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* display: -webkit-inline-box; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.menu-cart-item{
    list-style: none;
}


.menu-cart-window{
    position: fixed;
    top: 0px;
    right: 0;
    width: 100%;
    height: 100%;
    background: #00000046;
    display: block;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.45s ease;
}

#menu-cart-btn{
    position: relative;
}

#menu-cart-btn .cart-tooltip{
    position: absolute;
    top: 3px;
    right: 3px;
    color: #000;
    background-color: #d89030;
    width: 17px;
    height: 17px;
    text-align: center;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    font-weight: bold;
    font-family: initial;
    border-radius: 50%;
}
@media(max-width:768px){
    .menu-cart-window{
        top: 0;
        left: 0;
        width: 100vw;
        max-height: 100vh;
    }

    .menu-cart-window.alt{
        top: 100%;
    }
}

.menu-cart-window.open{
    opacity: 1;
    pointer-events: all;
}

.menu-cart-window .cart-menu-inner{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 340px;
    max-width: calc(100vw - 20px);
    position: absolute;
    right: -100%;
    top:0;
    background-color: #fff;
    transition: all 0.45s;
}


.menu-cart-window.open .cart-menu-inner{
    display:flex;
    right: 0;
}

.menu-cart-window .cart-menu-inner .header{
    color: #fff;
    background-color:#f8a933;
    flex: 0 0 7%;
    max-height: 7%;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 1.2rem;
    font-weight: 500;
}

.menu-cart-window .cart-menu-inner .header .close-cart-btn{
    font-size: 1.15rem;
    position: absolute;
    top: 5px;
    right: 7px;
    color: #fff !important;
    cursor: pointer;
}

.menu-cart-window .cart-menu-inner .body{
    flex:  0 0 75%;
    max-height: 75%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0px 5px;
}

.menu-cart-window .cart-menu-inner .body .product{
    display:flex;
    flex-direction: row;
    flex: 1 1 17%;
    max-height: 17%;
    border-bottom: 1px solid #ebebea;
    justify-content: space-between;
    padding: 5px 0px;
}

.menu-cart-window .cart-menu-inner .body .product .img{
    flex: 0 0 15%;
    max-width: 15%;
    max-height: 100%;
    height: 100%;
    position: relative;
}

.menu-cart-window .cart-menu-inner .body .product .img img{
    width: 100%;
    height: 100%;
}

.menu-cart-window .cart-menu-inner .body .product .img .rm-icon{
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: #f08184;
    color: #fff;
    width: 15px;
    height: 15px;
    font-size: 12px;
    border-radius: 50%;
    z-index: 99;
    display:flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    padding-bottom: 1px;
    cursor: pointer;
    line-height: 0.2;
}

.menu-cart-window .cart-menu-inner .body .product .img .rm-icon::after{
    content: "";
    display: flex;
    justify-content: center;
    align-self: center;
}
.menu-cart-window .cart-menu-inner .body .product .info{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex:  0 0 80%;
    max-width: 80%;
}

.menu-cart-window .cart-menu-inner .body .product .info .item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #969796 !important;
    gap: 5px;
    margin: 2px 0px;
}

.menu-cart-window .cart-menu-inner .body .product .info .item .input-field{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ededed;
    color: #737373
}

.menu-cart-window .cart-menu-inner .body .product .info .item .quantity-container{
    width: 45%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.menu-cart-window .cart-menu-inner .body .product .info .item .quantity-container .countButtons{
    cursor: pointer;
    background-color: #e7e7e7;
    width: 23px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: x-large;
    border-radius: 6px;
    line-height: 1;
}

.menu-cart-window .cart-menu-inner .body .product .info .item .quantity-container .input-field{
    width: 35px;
    text-align: center;
}

.menu-cart-window .cart-menu-inner .footer{
    flex: 0 0 16%;
    max-height: 16%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ebebea;
    gap: 5px;
    justify-content: flex-start;
    background-color:  #f2f2f2;
}

.menu-cart-window .cart-menu-inner .footer .pricing-total{
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    padding: 0px 10px;
    padding-top: 5px;
    width: 100%;
    font-weight: 800;
}

.menu-cart-window .cart-menu-inner .footer .pricing-block{
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 5px;
}

.menu-cart-window .cart-menu-inner .footer .pricing-total #menu_cart_total_pricing{
    font-weight: normal;
}
.menu-cart-window .cart-menu-inner .footer .actions-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.menu-cart-window .cart-menu-inner .footer .actions-container .footer-actions{
    border-radius: 12px;
    padding: 12px 18px;
    margin: 0;
    line-height: 1;
    color: #fff !important;
    font-size: 1rem;
    display: block;
    font-weight: bold;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;

    width: 100%;
}

.menu-cart-window .cart-menu-inner .footer .footer-actions.primary{
    background-color: #d89030;
}
.menu-cart-window .cart-menu-inner .footer .footer-actions.secondary{
    background-color: #b7b7b6;
}

.menu-cart-window .cart-menu-inner .footer .footer-actions:hover{
    filter: brightness(1.08);
    transition: all 0.45s;
}

@media (max-width: 768px){
    .menu-cart-window .cart-menu-inner .footer{
        gap: 0;
    }

    .menu-cart-window .cart-menu-inner .body .product{
        flex: 1 1 18%;
        max-height: 18%;
    }
}


.address-view {
  display: none;
  line-height: 1.6;
  color: #555;
}

.address-view.active {
  display: block;
}

.address-form {
  display: none;
}

.address-form.active {
  display: block;
}

.address-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.address-selector {
  margin-bottom: 15px;
}

.address-selector select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background-color: white;
}

.panel-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 20px;
}

.panel-container.checkout-container {
  grid-template-columns: 3fr 2fr;
}

.right-side-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-title {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pathSearch{
    padding: 3px 5px;
    cursor: pointer;
    margin: 0;
}

.pathSearch:hover{
    background-color: #c7c7c7;
}

@media (max-width: 1000px) {
  .panel-container {
    grid-template-columns: 1fr !important;
    overflow-x: scroll;
  }

  .right-side-panels {
    flex-direction: column;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

.mypages-checkout-button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.mypages-checkout-button:hover {
  background-color: #04c27c;
  color: black;
}

.hidden {
  display: none !important;
}

.my-pages-edit-button {
  background: none;
  border: none;
  cursor: pointer;
  background-color: #ecf2ff;
  margin: 0;
  padding: 4px;
  border-radius: 4px;
  color: rgb(92, 92, 92);
}

.my-pages-edit-button:hover {
  background-color: #d8d8d8;
  color: black;
}

.my-pages-save-button {
  background: none;
  border: none;
  cursor: pointer;
  margin: 0;
  color: rgb(122, 209, 82);
  padding: 0px;
}

.my-pages-save-button:hover {
  color: rgb(89, 179, 47);
}

.vat-input-wrapper {
  position: relative;
}

.vat-spinner-overlay {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  padding: 2px;
  z-index: 2;
}

.vat-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: vat-spin 1s linear infinite;
}

@keyframes vat-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.table-edit-button {
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}

.table-edit-button:hover {
  color: black;
  background-color: rgb(206, 206, 206);
}

.customer-page-modal#edit-address-modal {
  z-index: 999999;
}

.popup-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  padding-top: 20vh;
  justify-content: center;
  align-items: flex-start; /* ensure it sticks to padding-top area */
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.popup-outer.fade-out {
  animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

.popup-inner {
  position: relative;
  width: 250px;
  display: flex;
  flex-direction: column;
  font-size: larger;
  background-color: hsl(0deg 0% 98.57%);
  color: #4b4b4b;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px 0px #777777;
  align-items: center;
  gap: 12px;
}

.popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #555;
  padding: 0;
}

.popup-close:hover {
  color: #000;
}

.message-list {
  list-style-type: none;
  padding: 0;
  color: #4b4b4b;
  font-size: 1rem;
}

.message-list li {
  margin-bottom: 4px;
}

.selection-element {
  position: absolute;
  top: -24px;
  right: 1px;
  width: 32px;
  height: 32px;
  background-color: hsl(96.23deg 85.58% 79.18%);
  border-radius: 8px;
}

.blueprint-link.selected .selection-element {
  background-color: rgb(255, 233, 233);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.blueprint-link .checkbox-icon.unchecked {
  display: inline;
}

.blueprint-link.selected .checkbox-icon.unchecked {
  display: none;
}

.blueprint-link .checkbox-icon.checked {
  display: none;
}

.blueprint-link.selected .checkbox-icon.checked {
  display: inline;
}

.selection-element.small {
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background-color: hsl(96.23deg 85.58% 79.18%);
  box-shadow: 0 0 2px 0px #0000009c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selection-element.small svg {
  width: 16px;
  height: 16px;
}

.selection-element:hover {
  border: 1px #868686 solid;
}

.blueprint-selection-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px #cbcbcb solid;
  border-radius: 4px;
  background-color: white;
}

.blueprint-selection-button.selected {
  /*background-color: hsl(120 113% 96% / 1) !important*/
}

.blueprint-selection-button:hover {
  border: 1px rgb(87, 87, 87) solid;
  color: black;
}

.blueprint-selection-button>.selection-element {
  border: none;
  pointer-events: none;
}

.blueprint-selection-button>.selection-element:hover {
  border: none;
}

.blueprint-selection-button span {
  display: none;
  pointer-events: none;
}

.blueprint-selection-button:not(.selected) span:first-child {
  display: inline;
}

.blueprint-selection-button.selected span:nth-child(2) {
  display: inline;
}

.cart-event-container {
  position: absolute;
  top: 43px;
  right: 0;
  width: 100% !important;
  display: flex;
  flex-direction: column;
}

.cart-event-item {
  background-color: #ffffff;
  border: 1px black solid;
  border-radius: 4px;
  padding: 0px 16px;
  width: 150px !important;
  height: 30px;
  color: black !important;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-in, height 0.3s ease-in;
  overflow: hidden;
  display: flex;
  flex-direction: row !important;
  gap: 8px;
  justify-content: space-between !important;
  white-space: nowrap;
}

.cart-event-item span {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.cart-event-item.added {
  background-color: #d9ffd9;
}

.cart-event-item.removed {
  background-color: #ffcece;
}

/* Fade out and collapse */
.cart-event-item.fade-out {
  height: 0;
  opacity: 0;
}

@media (max-width:768px) {
  .cart-event-container {
    pointer-events: none;
    position: absolute;
    top: -100vh;
    right: 0;
    width: 150px !important;
    height: 100vh;
    display: flex;
    flex-direction: column-reverse !important;
    justify-content: end !important;
  }

  .news-banner .inner .item{
    font-size: 1.1rem;
  }

  .importMenuWrapper{
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 99;
    background: #fff;
    transition: all 0.3s;
  }
    .importMenuWrapper.show{
        left: 0;
        transition: all 0.3s;
    }
  .importMenuWrapper .importMenu .header{
        /* flex-direction: column; */
        max-height: 55px;
        flex: 0 0 55px;
    }

    .mobile-bulk-import{
        display: block;
    }
    .mobile-bulk-import-close{
        display:block;
        color:inherit;
        position: absolute;
        top: 5px;
        right: 5px;
    }
}

.cart-item-count {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    font-weight: 500;
}

@keyframes flashInput {
  0%   { background-color: #fff3cd; }  /* soft yellow */
  50%  { background-color: #ffeeba; }
  100% { background-color: white; }
}

@keyframes shakeInput {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-2px); }
  40%, 80% { transform: translateX(2px); }
}

.flash {
  animation: flashInput 0.8s ease, shakeInput 0.4s ease;
}

.custom-tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: fadeInOut 2s ease forwards;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; transform: translateY(-4px); }
  20%, 80% { opacity: 1; transform: translateY(0); }
}

#fm-change-material-button {
  display: flex; 
  justify-content: end;
}

#fm-change-material-button > span {
  color:#5858ff;
  cursor: pointer;
}

#fm-change-material-button > span:hover {
  color:#000000;
}

#no-material-canvas-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0,0,0,0.7);
  background: rgba(255,255,255,0.8);
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 15px;
  text-align: center;
  cursor: pointer;   
}

.post-treatment-remove-button {
  color: #ff8181;
  cursor: pointer;
}

.post-treatment-remove-button:hover {
  color: #000000;
}

#new-hole-post-treatment-view {
  background-color: #e9ecef;
  border: 1px #cfd4da solid;
  border-radius: 6px;
  font-size: 10pt !important;
}

#new-hole-post-treatment-view h4 {
  font-size: 10pt !important;
}

input.invalid {
  background-color: rgb(255, 183, 183) !important;
}

.focus_menu_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confirm-input-btn {
  padding: 2px 6px !important;
  font-size: 7pt !important;
  font-weight: 500 !important;
  line-height: 1;
  width: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 99 !important;
}

.input-group .confirm-input-btn {
    display: none;
}

.input-group:focus-within .confirm-input-btn {
    display: inline-block;
}

.fm-input-group {
  position: relative;
}

.pf-muted-card{
    padding: 30px;
    background-color: #f2f2f2;
    border-radius: 24px;
}

.pf-muted-card ul{
    line-height:2.5rem;
}

.footer-link a{
    color: rgb(212, 212, 212);
    font-weight: 500;
}

.footer-link a:hover{
    text-decoration: underline;
}

.pf-menu-dropdown .whoami{
    padding: 3px 5px;
    color: #fff;
    background-color: #1a1a1a;
    font-size: 12px;
    border-bottom: 1px solid #525252;
}
.coating-wrap { padding: 12px 4px; }
.coating-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 10px; font-weight: 500; }
.coating-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.coating-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 6px 8px; gap: 5px;
    border: 1.5px solid #e0e0e0; border-radius: 8px;
    background: #fff; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.coating-btn:hover { border-color: #bbb; }
.coating-btn.selected { border-color: #3a7cfc; box-shadow: 0 0 0 2px rgba(58,124,252,0.18); }

.swatch {
    width: 64px; height: 64px; border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.13);
    position: relative; overflow: hidden; flex-shrink: 0;
}
.swatch.gloss::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
    transform: skewX(-15deg);
    animation: shimmer 2.4s ease-in-out infinite;
}
@keyframes shimmer { 0%,40%{left:-60%} 70%,100%{left:130%} }
.swatch.matt { filter: contrast(0.92) brightness(1.02); }
.swatch.struct::after {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0px, rgba(255, 255, 255, 0.28) 1px, transparent 1px, transparent 4px);
}

.coating-name { font-size: 0.85rem; color: #999; font-weight: 500; letter-spacing: 0.02em; }
.ral-code { font-size: 0.75rem; color: #bbbbbb; font-weight: 500; letter-spacing: 0.02em; }
.finish-badge { font-size: 0.78rem; padding: 1px 5px; border-radius: 3px; font-weight: 500; letter-spacing: 0.03em; }
.badge-gloss  { background: #dbeafe; color: #1d4ed8; }
.badge-matt   { background: #f3f4f6; color: #6b7280; }
.badge-struct { background: #fef3c7; color: #92400e; }

.info-btn {
    position: absolute; top: 5px; right: 5px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid #d0d0d0; background: #f5f5f5;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #888; font-weight: 700; font-family: serif;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1; padding: 0;
}
.info-btn:hover { background: #e8e8e8; border-color: #aaa; color: #333; }

.popup-overlay {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.45);
    align-items: center; justify-content: center;
}
.popup-overlay.open { display: flex; }
.popup-card {
    background: #fff; border-radius: 12px; padding: 20px;
    width: 400px; max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    position: relative;
}
.popup-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.popup-swatch { width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.12); flex-shrink: 0; position: relative; overflow: hidden; }
.popup-title { font-size: 0.9rem; font-weight: 600; color: #111; }
.popup-sub { font-size: 0.82rem; color: #888; }
.popup-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 18px; cursor: pointer; color: #999; line-height: 1; padding: 0;
}
.popup-close:hover { color: #333; }
.popup-images { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.popup-img-wrap { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #f0f0f0; }
.popup-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.popup-img-placeholder {
    width: 100%; aspect-ratio: 1; border-radius: 6px;
    background: #f5f5f5; border: 1px dashed #ddd;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: #bbb; font-size: 0.65rem;
}
.popup-desc { font-size: 0.92rem; color: #666; line-height: 1.5; }

.coating-picker-trigger.display-color{
    animation: display-color-animation 10s ease-in-out infinite;
}

@keyframes display-color-animation{
    0% {background-color: rgba(33, 37, 41, 0);}
    15% {background-color: rgba(204, 6, 5, 0.4)}
    35% {background-color: rgba(33, 37, 41, 0);}
    50% {background-color: rgba(0, 51, 153, 0.4);}
    70% {background-color: rgba(33, 37, 41, 0);}
    85% {background-color: rgba(231, 193, 46, 0.4);}
    100% {background-color: rgba(33, 37, 41, 0);}
}

.template-image-zoom-container{
    height: 150px;
    width: 14px;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.template-image-zoom-container .form-range{
    writing-mode: vertical-lr;
    direction: rtl;
    
    width: 14px;
    height: 100px;
}