html,

/* Uncomment this to see the outline of the divs in red*/

/*div {
        border: solid 1px red;
}*/


.xdebug-error{
    color: black;
}

.error-message {
    color: red;
    /* font-weight: 500; */
    /* font-size: 0.85em; */
    margin-top: 4px;
}

/* First we set the colors for the light theme */
:root {

/* New color naming scheme test */
    --main-color: #eaeaea;
    --stroke-color: black;

/* old color naming scheme*/
    --menuhoverColor:#7EB3CD;
    --menuactiveBackgroundColor:#5299BC;
    --menuBackgroundColor: #B0D0E0;
    --selecthoverColor:#B0D0E0;
    --selectBackgroundColor: #B0D0E0;
    --searchboxBackgroundColor: #B0D0E0;
    --containerBackgroundColor: #B0D0E0;
    --tableCellTextColorWeb: #000000;
    --tableCellTextColorMobile: #000000;
    --buttonTextColor: #000000;
    --buttonTextColorHover: #000000;
    --linkcolor: #3344cc;
    --buttonbackgroundcolor: #1280c4;
    --topnavactivecolor: #1280c4;
    --bordercolor: #1280c4;
    --radioforegroundcolor:#1280c4;
    --radiobackgroundcolor:#B0D0E0;
    --highlightcolor:#000000;
    --dotcolor:#1280c4;

    --foregroundcolor: #000000;
    --backgroundcolor: #f9f9f9;
    --hoverBackground: #5299BC;
    --button: #B0D0E0;
    --textColor: #000000;
    --card_background: #5299BC;
    /*--small_iconfilter:invert(0%) sepia(19%) saturate(6673%) hue-rotate(43deg) brightness(119%) contrast(86%);*/
    --small_iconfill:#4071A6;
    --small_iconfillHover:#8CC7DE;
}

/* If the user prefers dark colors we override the variables */
@media (prefers-color-scheme: dark) {
:root {
    --menuhoverColor:#2f3640;
    --menuactiveBackgroundColor:#3D5266;
    --menuBackgroundColor: #000000;
    --selecthoverColor:#304050;
    --selectBackgroundColor: #2f3640;
    --searchboxBackgroundColor: #2f3640;
    --containerBackgroundColor: #2f3640;
    --tableCellTextColorWeb: #FFFFFF;
    --tableCellTextColorMobile: #FFFFFF;

    --tableCellBackground: var(--containerBackgroundColor);
    --tableCellTextColor: var(--tableCellTextColorMobile);

    --buttonTextColor: #FFFFFF;
    --buttonTextColorHover: #FFFFFF;
    --linkcolor: #3344cc;
    --buttonbackgroundcolor: #4071A6;
    --topnavactivecolor:#4071A6;
    --bordercolor: #4071A6;
    --radioforegroundcolor:#4071A6;
    --radiobackgroundcolor:#2f3640;
    --highlightcolor:#4c8bf5;
    --dotcolor:#2196F3;

    --foregroundcolor: #f1f1f1;
    --backgroundcolor: #15202B;
    --hoverBackground: #2f3640;
    --button: #102030;
    --textColor: #FFFFFF;
    --card_background: #22303C;
    /*--small_iconfilter:invert(39%) sepia(54%) saturate(507%) hue-rotate(170deg) brightness(93%) contrast(91%);*/
    --small_iconfill:#4071A6;
    --small_iconfillHover:#8CC7DE;
}

}

/* Here we set the variables that are related to web view.  */
:root {
    --radioDisplay:grid;
    --menuFontWeight: normal;
    --scale: 1;
    --tableCellBorderRadius: 40px;
    --tableCellBackground: var(--containerBackgroundColor);
    --marginTop: 5px;
    --paddingbt: 15px;
    --input_padding: 0.6rem;

    --searchFieldSize: 10px;
    --searchButtonSize: 40px;
    --searchFieldTopMargin: 0px;
    --borderRadius: 5px;
    --tableCellTextColor: var(--tableCellTextColorWeb);
    --tablePartMaxWidthSuperLong: 50%;
    --tablePartMaxWidthExtraLong: 40%;
    --tablePartMaxWidthLong: 30%;
    --tablePartMaxWidthMedium: 20%;
    --tablePartMaxWidthShort: 15%;
    --tablePartMaxWidthExtraShort: 10%;
    --title_size: 3rem;
    --text_size: 1.1rem;
    --h1_size: 80px;
    --h2_size: 1.8em;
    --h3_size: 1.5em;
    --h4_size: 1rem;
    --h5_size: 0.5rem;
    --h6_size: 0.3rem;
    --input_size: 1.1rem;
    --button_size: 1.1rem;
    --select_size: 1.1rem;
    --flex-direction: row;
    --small_icon: 20px;
    --svgwidth:25px;
    --svgheight:25px;
    --standard_margin: 3px;
    --radiodot_size: 8px;
    --border: solid 2px var(--bordercolor);
    --multiply_value: 1;
    --number_size: 7rem;
    --flex_basis:33.33%;
}

/* Here we override the variables that relates to layout for the mobile view */
@media only screen and (max-width: 1200px) {
    :root {
        --menuFontWeight: bold;
        --scale: 10;
        --tablePartMaxWidthSuperLong: 100%;
        --tablePartMaxWidthExtraLong: 100%;
        --tablePartMaxWidthLong: 100%;
        --tablePartMaxWidthMedium: 100%;
        --tablePartMaxWidthShort: 100%;
        --tablePartMaxWidthExtraShort: 100%;
        --tableCellBorderRadius: 40px;
        
        --paddingbt: 50px;
        --input_padding: 1.2rem;

        --searchFieldTopMargin: -10px;
        --marginTop: 10px;
        --border: solid 5px var(--bordercolor);
        --borderRadius: 10px;
        --searchFieldSize: 20px;
        --searchButtonSize: 60px;
        --title_size: 6rem;
        --h1_size: 6rem;
        --h2_size: 4rem;
        --h3_size: 3rem;
        --h4_size: 2.5rem;
        --h5_size: 1.5rem;
        --h6_size: 1.0rem;
        --input_size: 3rem;
        --button_size: 3rem;
        --select_size: 2.5rem;
        --text_size: 2.5rem;
        --flex-direction: column;
        --small_icon: 60px;
        --svgwidth:50px;
        --svgheight:50px;
        --standard_margin: 20px;
        --radiodot_size: 16px;
        --multiply_value: 2;
        --number_size: 14rem;
        --flex_basis:50%;

}
}

/*note map_new.css assets */
/* todo reavalue what is needed and integrate them into this file and remove the others */

.layerMenu {
    /*width: 25rem;*/
    border-radius: var(--borderRadius);
    /* box-shadow: 0 0 3pt 2pt black; */
    box-shadow: 0 0 0 1pt black;
   /* height: 120px;*/
    margin: 0.5rem 0rem;
    background: #fff;
    text-align: left;
    /*outline: 1px solid rgba(0, 0, 0, 128);*/
    color: #000;
    border: 5px solid rgba(255, 255, 255, 0);
}

.layeroptions{
    display: flex;
    justify-content: space-between;
    align-items: anchor-center;
    flex-wrap: nowrap;
    cursor: pointer;
    padding: 5px;
    font-size: var(--text_size);
    &:hover{
        border-radius: 30px;
        background-color: #B0D0E0;
    }
    &:checked{
        border-radius: 30px;
        background-color: #5299BC;
    }
}

.ent_popup {
    border:var(--border);
    display: block;
    position: fixed;
    background: #fff;
    border-radius: var(--borderRadius);
    min-width: 200px;
    min-height: 200px;
    max-height: 90vh;
    max-width: 90vW;
    overflow-y: auto;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    bottom: calc(2em / var(--scale));
    margin-top: 0px;
    margin-left: calc(3em / var(--scale));

}

.entpopup-container {
    text-align: left;
    /* cursor: pointer; */
    display: block;
    & > :nth-child(odd) {
        background-color: #f2f2f2;
        
    }
    & > * {
        padding: 0.4em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--borderRadius);
        
    }
   
}
.FormContent-container {
    width: 35rem;

    margin: 0.3rem 0;
    text-align: left;
    & > span{
        display: flex;
        flex-wrap: wrap;
        & > button{
            flex: 1;
            margin:2px;
        }
    }
}

.menuwheel {
    --x: 0px;
    --y: 0px;
    --width: 0px;
    --height: 0px;
    position: fixed;
    top: var(--y);
    left: var(--x);
    width: var(--width);
    height: var(--height);
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%;

}
.menuwheel.on .arc {
    opacity: 0.8;
    transform: scale(1) rotate(var(--rotation)) !important;
    transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1.5);
    background-position: center bottom;
}
.menuwheel .arc {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    background-image: radial-gradient(
    circle at 0% 100%,
    transparent,
    transparent 20%,           /* Inner gap radius */
    var(--color-border) 11%,   /* Ring start */
    var(--color-border) 11.5%,
    var(--color) 12%,          /* Main arc fill */
    var(--color) 50%,          /* Arc thickness */
    var(--color-border) 50.25%,
    var(--color-border) 51.5%,
    transparent 51.75%
    );    
    background-position: center bottom;
    transition-property: transform, opacity, filter;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, -0.4, 0.7, -0.3);
    -webkit-clip-path: polygon(0 0, 0 99%, 99% 0);
    /* 74% for 10 segments and 99% for 8 segmenst */
    clip-path: polygon(0 0, 0 99%, 74% 0);
    opacity: 0;
}

.color-only {
  border: none;
  width: 40px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  color: transparent;      /* hides text */
  text-shadow: none;       /* hides possible text shadow */
  caret-color: transparent;/* hides caret */
  
}


.input-wrapper[data-unit]:not([data-unit="0"]):not([data-unit=""]) {
    position: relative;
    display: inline-block;
  }
  
  .input-wrapper[data-unit]:not([data-unit="0"]):not([data-unit=""]) input {
    width: 5em;
    text-align: center;
  }
  
  .input-wrapper[data-unit]:not([data-unit="0"]):not([data-unit=""])::after {
    content: attr(data-unit);
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* color: #888; */
    font-size: 0.9em;
  }

  .form-section{
    /* margin-bottom: 5px; */
    margin-top: 10px;
        & > label {
            display: block;
        }
    }
    
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    
    .ol-zoom {
        left: unset;
        right: 8px;
        top:  unset;
        bottom: 50px;
        width: 50px;
        height: 100px;
     }


   .ol-zoom Button {
       width: 50px;
       height: 50px;
   }

   .ol-zoom
   .ol-zoom-in {
       background-image: url("/img/zoom-in.svg");

     }
   .ol-zoom
   .ol-zoom-out {
       background-image: url("/img/zoom-out.svg");
     }

   .scaleRuler {
       font-family: 'Fira Sans', sans-serif;
       background-color: rgba(0, 0, 0, 0.0);
       color: #fff;
       position:fixed;
       right:50px;
       bottom:10px;
       /*background: #ff0000;*/
   }

   .ol-scale-line {
       font-family: 'Fira Sans', sans-serif;
       background-color: #ccc;
       color: #f0f;
       /*position:fixed;*/
       right:50px;
       /*background: #ff0000;*/
   }

     .ol-tooltip {
       position: relative;
       background: rgba(0, 0, 0, 0.5);
       border-radius: 4px;
       color: white;
       padding: 4px 8px;
       opacity: 0.7;
       white-space: nowrap;
       font-size: 12px;
     }
     .ol-tooltip-measure {
       opacity: 1;
       font-weight: bold;
     }
     .ol-tooltip-static {
       background-color: #ffcc33;
       color: black;
       border: 1px solid white;
     }
     .ol-tooltip-measure:before,
     .ol-tooltip-static:before {
       border-top: 6px solid rgba(0, 0, 0, 0.5);
       border-right: 6px solid transparent;
       border-left: 6px solid transparent;
       content: "";
       position: absolute;
       bottom: -6px;
       margin-left: -7px;
       left: 50%;
     }
     .ol-tooltip-static:before {
       border-top-color: #ffcc33;
     }

   #menuwrapperMobile  {
    display: none;
    flex-flow: row Wrap;
    position: fixed;
    width: 260px;

    max-height: 85vh;
    max-width: 90vW;
    overflow-y: auto;
    height: auto;
    background: white;
    border: 1px solid black;
    border-radius: 30px 0px 0px 30px;
    padding: 16px;
    /*text-align:right;*/
    bottom: 20px;
    transition:right 0.2s, opacity 0.5s;
   }

   /*#menuwrapperMobile div{
       border: 1px solid red;
   }*/
   /*label {
       border: 2px solid red;
   }*/

#mainMobileOpenBtn{
   position: fixed;
   bottom: 172px;
   right: 5px;
   display: none;
}

#ToolMenu{
   display:none;
   transition:right 0.2s, opacity 0.5s;
   position:fixed;
   top:25px;
   right:5px;
   & > .svg-container{
           background-color:#2196F3;
       }

}

.legend-container {
    max-width: 250px;
    max-height: 250px;
    display: flex;
    overflow: hidden;
    margin-bottom: 15px;
    margin-left: 10px;
    /* border: 5px solid black; */
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.legend-svg {
    max-width: 100%; /* Ensure SVGs do not exceed the container width */
    max-height: 100%; /* Ensure SVGs do not exceed the container height */
    width: auto; /* Allow SVGs to scale naturally */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Fit within the container while maintaining aspect ratio */
}



.grid-container {
    display: grid;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    align-items:left;
    width: 260px;
    font-size: 1.5rem;
    user-select: none;
}

/* note end of map_new.css assets */


/* Body style */

body {
    margin: 0;
    background: var(--backgroundcolor);
    color: var(--foregroundcolor);
    padding: 0;
    height: 100%;
    width: 100%;
    line-height:calc(28px * var(--multiply_value));
    letter-spacing: 0.5px;
    font-weight: 300;
    font-size: var(--text_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}




a {
    text-decoration: none;
    font-size: var(--text_size);
    color: var(--textcolor);

    &:link {
    color: var(--textcolor);
    }

    &:visited {
    color: var(--textcolor);
    }

    &:hover {
    color: red;
    text-decoration: underline;
    }

    &:active {
    color: red;
    text-decoration: underline;
    transform: scale(0.95);
    }
}



/* cleanlink is used for normal links that needs a little extra flare  */
.cleanLink {
    width: fit-content;
    display: inline-block;
    padding: 7px;
    border-radius: 30px;
    background-color: var(--selectBackgroundColor);
    &:hover{
    background-color: var(--menuactiveBackgroundColor);
    text-decoration: none;
    border-radius: 30px;
    }
}

 
/* wrapper anchors placement */
.help-wrapper {
  display: inline-block;
  position: relative;
}

/* the “?” icon (you can keep your existing positioning) */
.help-text {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    --helparrowsize: calc(10px * var(--multiply_value, 1));
    display: inline-flex;
    justify-content: center;
    align-items: stretch;
    width: var(--svgwidth, 20px);
    height: var(--svgheight, 20px);
    background-color: var(--card_background, #22313f);
    color: var(--fg, #fff);
    font-weight: bold;
    border-radius: 50%;
    cursor: help;
    user-select: none;
    margin-left: calc(8px + var(--helparrowsize));
    z-index: 1;
}

.help-text.is-editing::before,
.help-text.is-editing::after {
  pointer-events: none;     /* clicks go to the .help-text element */
  /* no opacity override — keep your normal :hover opacity behavior */
}

.help-text::before {
  content: "";                         /* arrow */
  position: absolute;
  top: 0;
  left: calc(-1 * var(--helparrowsize));
  width: 0;
  height: 0;
  border-top: var(--helparrowsize) solid transparent;
  border-bottom: var(--helparrowsize) solid transparent;
  border-right: var(--helparrowsize) solid var(--card_background, #22313f);
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 9;
}
.help-text::after {                    /* bubble with text */
  content: attr(data-help);
  position: absolute;
  top: -55%;                           
  left: 0;
  background: var(--card_background, #22313f);
  padding: 0.6em 0.9em;
  border-radius: var(--borderRadius, 10px);
  white-space: pre-wrap;               
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  max-width: 500px;                    
  min-width: 140px;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 10;
}

/* show tooltip on hover (normal mode) */
.help-text:hover::before,
.help-text:hover::after { opacity: 1; }

/* yellow edit outline */
.help-text.__i18n-editable {
  outline: 2px dashed #ffbf00;
  outline-offset: 2px;
}

/* while the Lang editor is active, don’t let the tooltip block clicks */
.help-text.is-editing::before,
.help-text.is-editing::after {
  opacity: 0 !important;
  pointer-events: none !important;
}





/* Text Styles */
p {
    color: var(--textcolor);
    font-weight: 400;
    font-size: var(--text_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

h1 {
    line-height:calc(84px * var(--multiply_value));
    letter-spacing: -1.5px;
    font-weight: 700;
    font-size: var(--h1_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

h2 {
    line-height:calc(64px * var(--multiply_value));
    letter-spacing: -1px;
    font-weight: 700;
    font-size: var(--h2_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

h3 {
    /* margin: 15px; */
    line-height:calc(52px * var(--multiply_value));
    letter-spacing: -0.5px;
    font-weight: 700;
    font-size: var(--h3_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

h4 {
    line-height:calc(36px * var(--multiply_value));
    letter-spacing: 0px;
    font-weight: 700;
    font-size: var(--h4_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

h5 {
    line-height:calc(20px * var(--multiply_value));
    letter-spacing: 0px;
    font-weight: 700;
    font-size: var(--h5_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

h6 {
    line-height:calc(20px * var(--multiply_value));
    letter-spacing: 0px;
    font-weight: 700;
    font-size: var(--h6_size);
    font-family: "BrownStd","Helvetica",sans-serif;
}

/* .material-icons{
    font-size: 1.25em;
} */



.text  {
    /* change back to --textcolor after fixing selectors */
    color: var(--textColor);
    font-size: var(--text_size);
}

/* Used in the GUI lib for the labels for each value */
.label  {
    color: var(--textcolor);
    font-size: var(--text_size);
}

/* Wrap styles */
.wrap-all {
    margin: auto;
    width: 90%;
    font-family: "BrownStd","Helvetica",sans-serif;
}

.centerWrap {
    margin: auto;
    text-align: center;
}


.leftWrap {
    margin: 0rem 0rem 0rem 4vw;
    text-align: left;
}

.formWrap {
    display: flex;
    justify-content: space-evenly;
}

.button-wrap {
    margin: auto;
    width: 100%;

}

.title {
    margin: 0;
    padding-top: 0.5em;
    font-size: var(--title_size);
    font-weight: 300;
    text-align: center;
}

/* Input styles */

.button, button, input[type=submit],input[type=file] {
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.3rem 1.0rem;
    border: var(--border);
    border-radius:var(--borderRadius);
    font-size: var(--button_size);
    color: var(--buttonTextColor);
    background: var(--button);
    text-decoration: none;
    transition: 0.3s;

    &:active {
    text-decoration: none;
    transform: scale(0.95);
    }

    &:hover{
    background: var(--hoverBackground);
    color: var(--buttonTextColorHover);
    border-radius:30px;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s;
    }



}

/* This is to override the links with button classes*/
.button:link, .button:visited {
    color: var(--buttonTextColor);

}

.projectlink{

    &:hover{
    appearance: none;
    text-decoration: none;
    }
}





input[type=text], input[type=password], textarea,input[type=tel] {
    font-size: var(--input_size);
    padding: var(--input_padding);
    border: var(--border);
    border-radius: 5px;
    background: var(--backgroundcolor);
    color: var(--buttonTextColor);
    transition: 0.2s;
}

input[type=date]{
    font-size: var(--input_size);
    padding: var(--input_padding);
    border: var(--border);
    border-radius: 5px;
    background: var(--backgroundcolor);
    color: var(--buttonTextColor);
    transition: 0.2s;
}


input[type=file]::file-selector-button {
    max-height: 60px;
    border: none;
    background: var(--buttonbackgroundcolor);
    border-radius: 5px;
    color: var(--buttonTextColor);
    cursor: pointer;
    transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
    color: var(--buttonTextColorHover);

}

input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
}

input[type=number] {
        border: solid 2px var(--bordercolor);
        border-radius: 30px;
        width: var(--number_size);
        font-size: var(--input_size);
        text-align:center;
        padding: var(--input_padding);
        background: var(--backgroundcolor);
        color: var(--buttonTextColor);
        -webkit-transition: 0.2s;
        transition: 0.2s;
        outline:none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
}

.label_container{
    display: flex;
    align-items:center;
        > *{
                margin-right: 30px;
        }

}

.number-input {
        border: solid 2px var(--bordercolor);
        border-radius: 30px;
        display: inline-flex;

        > input[type=number]{
            width: var(--number_size);
            border: none;
        }

}

.number-input button {
        -webkit-appearance: none;
        appearance: none;
        outline:none;
        border: none;
        width: 30px;
        cursor: pointer;
        background: url(../img/Gui_downarrow.svg)no-repeat right 0.4em center / 0.8em,linear-gradient(to left, var(--selecthoverColor) 2em, var(--selectBackgroundColor) 2em);
        &:hover{
        background: url(../img/Gui_downarrow.svg)no-repeat right 0.4em center / 0.8em,linear-gradient(to left, var(--selecthoverColor) 2em, var(--selectBackgroundColor) 2em);
        --selecthoverColor:#4071A6;
        }
        &.minusbt{
        border-radius:25px 0px 0px 25px;
        padding-left: var(--paddingbt);
        }
        &.plusbt{
        border-radius:0px 25px 25px 0px;
        padding-right: var(--paddingbt);
        }
}






select {
    /* Reset */
    appearance: none;
    border: var(--border);
    outline: 0;
    font-size: var(--h3_size);

    /* Personalize */
    width: auto;
    max-width: 600px;
    height: auto;
    padding: 0.1em 2.5em 0.1em 0.5em;
    background: url(../img/Gui_downarrow.svg)no-repeat right 0.4em center / 0.8em,linear-gradient(to left, var(--selecthoverColor) 2em, var(--selectBackgroundColor) 2em);
    background-color: var(--selectBackgroundColor);
    color: var(--textColor);
    border-radius: 50px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    /* Remove focus outline */
    &:focus {
        outline: none;
    }
    &:hover {
        --selecthoverColor:#4071A6;
    }
    /* Remove IE arrow */
    &::-ms-expand {
        display: none;
    }

}
select[multiple]{
    background:none;
    border: var(--border);
    border-radius: 20px 0px 0px 20px;
    padding: 0.1em 0.5em 0.1em 0.5em;
    & option::before {
        padding-right:0.3em;
        content: "\2610";
        text-align: center;
        display: inline-block;
    }
    & option:checked::before {
        padding-right:0.3em;
        content: "\2611";
    }
}

/* select[multiple] option::before {
    padding-right:0.3em;
    content: "\2610";
    text-align: center;
    display: inline-block;
} */
/* select[multiple] option:checked::before {
    padding-right:0.3em;
    content: "\2611";
} */

/* have not been tested  */

.multiselect {
    width: 100%;
}

.selectBox {
    position: relative;
    & select {
        width: fit-content;
    }
}


/* .selectBox select {
    width: fit-content;
} */


.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#mySelectOptions 
{
    display: none;
    border: 0.5px #7c7c7c solid;
    max-height: 150px;
    overflow-y: scroll;
    width:fit-content;
        & label{
            display: block;
        font-weight: normal;
        display: block;
        white-space: nowrap;
        min-height: 1.2em;
        padding: 0 2.25rem 0 .75rem;
            &:hover{
                background-color: var(--selecthoverColor);
            }
        }
}
/* #mySelectOptions label {
    display: block;
    font-weight: normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 0 2.25rem 0 .75rem; */
    /* padding: .375rem 2.25rem .375rem .75rem; */
/* } */

/* #mySelectOptions label:hover {
    background-color: var(--selecthoverColor);
} */

.hidden {
    display: none;
}






/* input[type="radio"] {
    appearance: none;
   
    width: var(--h3_size);
    height: var(--h3_size);
    border: var(--border);
    margin: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);

    display: var(--radioDisplay);
    place-content: center;

    &::before {
    content: "";
    width: var(--radiodot_size);
    height: var(--radiodot_size);
    border-radius: 50%;
    box-shadow: inset var(--radiodot_size) var(--radiodot_size) var(--dotcolor);
    transform: scale(0);
    }

    & + label{
    cursor: pointer;
    padding: 6px 8px;
    }

    &:hover{
    transform: scale(1.2);
    border-color: var(--highlightcolor);
    box-shadow: 0 0 10px var(--highlightcolor);
    }

    &:hover + label{
    border-radius: 30px;
    background-color:var(--hoverBackground);
    text-shadow: var(--highlightcolor) 1px 0 10px;
    }

    &:checked{
    transform: scale(0.8);

    color: var(--highlightcolor);
    }

    &:checked + label{
       border-radius: 30px;
       color: var(--highlightcolor);
       text-shadow: var(--highlightcolor) 1px 0 10px;
       font-weight: 500;
    }

    &:checked::before {
    transform: scale(1);
    }

} */

/*------------------
 RADIO AND CHECKMARK
--------------------*/

.radio-container { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 5px;
    max-width: 35em;
    margin-bottom: 5px;
    font-size: var(--text_size);
    border: 2px solid var(--searchboxBackgroundColor);
    border-radius: 10px;
    background: var(--searchboxBackgroundColor);
   

    & > span {
        display: flex;
        align-items: center;
        padding-left: 5px; 
        border-radius: 5px; 
    }
    &.two-option {
        max-width: 23.3em; 
        /* grid-template-columns: 1fr 1fr;  */
    }
}
 
/* Base style shared by radios and checkboxes */
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  width: var(--h3_size);
  height: var(--h3_size);
  margin: 0;
  display: var(--radioDisplay);
  place-content: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: var(--border);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

/* --------------------
   RADIO BUTTON STYLING
--------------------- */
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]::before {
  content: "";
  width: var(--radiodot_size);
  height: var(--radiodot_size);
  border-radius: 50%;
  box-shadow: inset var(--radiodot_size) var(--radiodot_size) var(--dotcolor);
  transform: scale(0);
  transition: transform 0.3s ease-in-out;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="radio"]:checked {
  transform: scale(0.8);
  color: var(--highlightcolor);
}

/* --------------------
   CHECKBOX STYLING
--------------------- */

input[type="checkbox"]::before {
  content: "✔";
  font-size: calc(var(--h3_size) * 0.6);
  color: var(--dotcolor);
  line-height: 1;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* --------------------
   SHARED LABEL + HOVER
--------------------- */
input[type="radio"] + label,
input[type="checkbox"] + label {
  cursor: pointer;
  padding: 6px 8px;
  transition: all 0.2s ease-in-out;
}

input[type="radio"]:hover,
input[type="checkbox"]:hover {
  border-color: var(--highlightcolor);
  box-shadow: 0 0 10px var(--highlightcolor);
}

input[type="radio"]:hover + label,
input[type="checkbox"]:hover + label {
  border-radius: 30px;
  background-color: var(--hoverBackground);
  text-shadow: var(--highlightcolor) 1px 0 10px;
}

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  border-radius: 30px;
  color: var(--highlightcolor);
  text-shadow: var(--highlightcolor) 1px 0 10px;
  font-weight: 500;
}




/* Tablepart styles */

.table_round {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: solid 2px var(--bordercolor);
    border-radius: 10px;
    transition: 0.2s;
}

.table_clean {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: 0.2s;
}

.tableCell {
    text-align: left;
    display: flex;
    justify-content: space-around;
    grid-auto-flow:column;
    flex-wrap: wrap;
    flex-direction: var(--flex-direction);
    align-items:center;
    transition: 0.2s;
    color: var(--tableCellTextColor);
    background: var(--tableCellBackground);
    border-radius: var(--tableCellBorderRadius);
    margin-top: var(--marginTop);

    &#Parent{
        border: var(--border);
    }
}

.tablepart {
    font-weight: 100;
    color: var(--tableCellTextColor);
    margin: auto;
    flex-grow: 0;
}

.tbl-extrashort {
    min-width: 10%;
    max-width: var(--tablePartMaxWidthShort);
    margin: auto;
    text-align: left;
}

.tbl-short {
    min-width: 15%;
    max-width: var(--tablePartMaxWidthShort);
    margin: auto;
    text-align: left;
}

.tbl-medium {
    min-width: 20%;
    max-width: var(--tablePartMaxWidthMedium);
    margin: auto;
    text-align: left;
}

.tbl-long {
    min-width: 30%;
    max-width: var(--tablePartMaxWidthLong);
    margin: auto;
}

.tbl-extralong {
    min-width: 40%;
    max-width: var(--tablePartMaxWidthLong);
    margin: auto;
}

.tbl-superlong {
    min-width: 50%;
    max-width: var(--tablePartMaxWidthLong);
    margin: auto;
}

.paramContainer {
    min-width:300px;
    max-width:550px;
    margin-left:5px;
    float:left;
}



/* Image styles */
/* .image {
    -webkit-transform: var(--scale);
    transform: var(--scale);
} */

.small_icon {
    width: var(--small_icon);
    height: var(--small_icon);
    margin: var(--standard_margin);
    padding: 2px;
    fill: var(--small_iconfill);
    &:hover{
    fill: var(--small_iconfillHover);
    }
    &:active{
    transform: scale(0.9);
    }
}

.svg-container{
    display: flex;
    position: relative;
    cursor: pointer;
    width: var(--svgwidth);
    height: var(--svgheight);
    padding: 10px;
    background-color: #eee;
    border: 1px solid grey;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin: 2px;
    &:hover{
        background-color: #ccc;
        transition: 0.3s;
    }
    & > svg{
    width: inherit;
    height: inherit;
    }

}






.radio-hide {
    --radioDisplay:none;
    display: none;

    &:checked+ .svg-container{
    background-color: #2196F3;
    }
 }


.popup {
    opacity:0;
}


/* Animation styles */
.popupAnimation {
    background: var(--card_background);
    color: var(--textcolor);
    width: auto;
    text-align: center;
    font-size: var(--h3_size);
    padding: 0.6rem;
    border: 3px solid var(--buttonbackgroundcolor);
    border-radius: 10px;
    position: fixed;
    text-align: center;
    left:50%;
    bottom: 0px;
    animation: fadeinout 2s linear forwards;
    opacity: 0;
}

@keyframes fadeinout {
            0% { opacity: 0; bottom: 0px;}
            10% { opacity: 1; bottom: 20px; }
            90% { opacity: 1; bottom: 20px; }
            100% { opacity: 0; bottom: 0px;}
}

/* Modal styling */
.universalModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.modalContent {
    background-color: var(--card_background);
    margin: 15% auto;
    padding: 20px;
    border-radius: 33px;
    border: 4px solid rgb(41, 40, 40);
    width: fit-content;
    text-align: center;
}
.prompt-text {
    font-size: 16px;
}
.highlight {
    color: red;
    font-weight: bold;
    font-family: Arial, sans-serif;
}
#modalPrimaryButton, #modalSecondaryButton {
    margin-top: 15px;
}




/* This is the sidepanel topnav */
.sidepanel  {
    width: auto;
    left:-500px;
    position: fixed;
    z-index: 2;
    height: 100%;
    border: solid 2px var(--bordercolor);
    background-color: var(--menuBackgroundColor);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 16px;
    font-family: "BrownStd","Helvetica",sans-serif;
    font-weight: var(--menuFontWeight);
    border-radius: 0px 30px 30px 0px;
}

.sidepanel a {
        padding: 16px 32px 16px 32px;
        text-decoration: none;
        font-size: var(--h3_size);
        color: var(--TextColor);
        display: block;
        border:none;
        transition: 0.3s;
        &:hover {
        border-radius: 30px;
        background-color: var(--menuhoverColor);
        }
}

.sidepanel a.active2 {
        color:white;
        border-radius: 30px;
        background-color: var(--menuactiveBackgroundColor);
        &:hover {
        border-radius: 30px;
        background-color: var(--menuhoverColor);
        }

}


.sidepanel .closebtn {
        top: 0;
        padding: 16px 15px 16px 32px;
        display: block;
        font-size: var(--h3_size);
}

.openbtn,.backbtn {
    height: 2em;
    font-size: var(--h3_size);
    font-family: "BrownStd","Helvetica",sans-serif;
    font-weight: var(--menuFontWeight);
    cursor: pointer;
    background-color: var(--menuBackgroundColor);;
    color: var(--TextColor);
    /*padding: 10px 15px; */
    border:none;
    float: left;
    &.openbtn{
    border-radius:0px 15px 15px 0px;
    }
    &.openbtn:hover {
    background-color: var(--menuhoverColor);
    border:none;
    transition: 0.3s;
    border-radius:0px 30px 30px 0px;
    }
    &.backbtn{
    border-right: solid var(--menuhoverColor);
    display: grid;
    border-radius: 15px 0px 0px 15px;
    align-items: center;
    }
    &.backbtn:hover{
    border-radius: 30px 0px 0px 30px;
    }

}



#mainbtn{
    position: absolute;
    padding: 16px;
    z-index: 1;
    &:after {
    content: "";
    clear: both;
    display: table;
    }

}



.jscolor{
    font-size: var(--h4_size);
    cursor: pointer;
    background-color: var(--containerBackgroundColor);
    color: var(--textColor);
    border: var(--border);
    border-radius: 30px;
}


.div_conatiner{
    display: flex;
    flex-flow: column wrap;
    align-items:flex-start;
    gap: 10px;
}




.searchBox {
    background: var(--searchboxBackgroundColor);
    height: 40px;
    border-radius: 40px;
    padding-top:  var(--searchFieldSize);
    padding-bottom: var(--searchFieldSize);
    padding-left: 10px;
    padding-right: 10px;
    margin-top: var(--marginTop);
    &:hover > .searchInput {
    max-width:600px;
    width: 15em;
    padding: 0 6px;
    }
    :focus-within > .searchInput {
    max-width:600px;
    width: 15em;
    padding: 0 6px;
    }
}

.searchBox:focus-within > .searchInput {
    max-width:600px;
    width: 15em;
    padding: 0 6px;
}

.searchBox:hover > .searchButton {
    background: var(--card_background);
    color: var(--buttonTextColorHover);
}

.searchButton {
    color: var(--buttonTextColor);
    float: right;
    width: var(--searchButtonSize);
    height: var(--searchButtonSize);
    border: var(--border);
    border-radius: 50%;
    background: var(--card_background);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    margin-top: var(--searchFieldTopMargin);
}

.searchInput {
    border: none;
    background: none;
    outline:none;
    border-radius: 0px;
    float:left;
    padding: 0;
    color: var(--textcolor);
    font-size: var(--input_size);
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
    margin-top: var(--searchFieldTopMargin);
}


.ent-container {
    border-radius: 5px;
    min-width: 300px;
    max-width:95%;
    box-shadow: 0 0 0 1pt black;
    margin: 0.3rem 0;
    background: var(--containerBackgroundColor);
    text-align: left;
    cursor: pointer;
    font-size: var(--text_size);
    color: var(--textColor);
    border: 5px solid rgba(255, 255, 255, 0);
}

/* .layeroptions {
    border-radius: 8px;
    box-shadow: 0 0 0 1pt black;
    margin: 0.3rem 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
    color: #000;
    border: 5px solid rgba(255, 255, 255, 0);
} */



.ent-textbox-input {
    width: 20rem;
    font-size: 1.0rem;
    padding: 0.1rem;
    border: 1px solid white;
    border-radius: 5px;
    box-shadow: 0 0 0 1pt grey;
    background: #fff;
    color: black;
}

.ent-spacing {
    font-size: 0.4rem;
}


/*
    General dropdown input
*/

/* .ent-select-input {
    padding: 0.4rem;
    color: #1280c4;
    background: #fff;
    border: 3px solid white;
    border-radius: 5px;
    box-shadow: 0 0 0 1pt grey;
} */

/*
    select dropdown Option
*/
.ent-option {
    font-size: 0.9rem;
    background-color: #fff;
    color: #1280c4;
}

/*
    General number input
*/
.ent-number-input {
    width: 10rem;
    font-size: 1.3rem;
    padding: 0.1rem;
    border: 1px solid white;
    border-radius: 5px;
    /* box-shadow: 0 0 0 1pt grey; */
    background: #fff;
    color: black;
}

.ent-number-input:disabled {
    background: #dddddd;
}

.loading-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    position: relative;
}

.loadingbar {
    box-sizing: border-box;
    display: inline-block;
    width: 50px;
    height: 80px;
    border-top: 5px solid var(--textColor);
    border-bottom: 5px solid var(--textColor);
    position: relative;
    background: linear-gradient(#1280c4 30px, transparent 0) no-repeat;
    background-size: 2px 40px;
    background-position: 50% 0px;
    animation: spinx 8s linear infinite;
}
.loadingbar:before, .loadingbar:after {
    content: "";
    width: 40px;
    left: 50%;
    height: 35px;
    position: absolute;
    top: 0;
    transform: translatex(-50%);
    background: rgba(128, 128, 128, 0.4);
    border-radius: 0 0 20px 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0px;
    animation: lqt 8s linear infinite;
}
.loadingbar:after {
    top: auto;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    animation: lqb 8s linear infinite;
}
@keyframes lqt {
    0%, 100% {
        background-image: linear-gradient(#1280c4 40px, transparent 0);
        background-position: 0% 0px;
    }
    50% {
        background-image: linear-gradient(#1280c4 40px, transparent 0);
        background-position: 0% 40px;
    }
    50.1% {
        background-image: linear-gradient(#1280c4 40px, transparent 0);
        background-position: 0% -40px;
    }
}
@keyframes lqb {
    0% {
        background-image: linear-gradient(#1280c4 40px, transparent 0);
        background-position: 0 40px;
    }
    100% {
        background-image: linear-gradient(#1280c4 40px, transparent 0);
        background-position: 0 -40px;
    }
}
@keyframes spinx {
    10%, 49% {
        transform: rotate(0deg);
        background-position: 50% 36px;
    }
    51%, 95% {
        transform: rotate(180deg);
        background-position: 50% 4px;
    }
    100% {
        transform: rotate(360deg);
        background-position: 50% 36px;
    }
}


.loader-text {
    --w:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.4em;
    letter-spacing: var(--w);
    width: var(--w);
    overflow: hidden;
    white-space: nowrap;
    color: #0000;
    text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor);
    animation: l20 3s infinite linear;
}
.loader-text:before {
    content:"Loading...";
}

@keyframes l20 {
    9.09% {text-shadow:
                calc( 0*var(--w)) -10px var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    18.18% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) -10px var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    27.27% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) -10px var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    36.36% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) -10px var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    45.45% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) -10px var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    54.54% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) -10px var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    63.63% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) -10px var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    72.72% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) -10px var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    81.81% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) -10px var(--textColor),calc(-9*var(--w)) 0 var(--textColor)}
    90.90% {text-shadow:
                calc( 0*var(--w)) 0 var(--textColor),calc(-1*var(--w)) 0 var(--textColor),calc(-2*var(--w)) 0 var(--textColor),calc(-3*var(--w)) 0 var(--textColor),calc(-4*var(--w)) 0 var(--textColor),
                calc(-5*var(--w)) 0 var(--textColor),calc(-6*var(--w)) 0 var(--textColor),calc(-7*var(--w)) 0 var(--textColor),calc(-8*var(--w)) 0 var(--textColor),calc(-9*var(--w)) -10px var(--textColor)}
}


.gears {
    position: relative;
    margin: 0 auto;
    width: auto; height: 0;

    &.gears .gear:nth-child(1) {
    left: -130px;
    }
    &.gears .gear:nth-child(2) {
    top: -75px;
    }
    &.gears .gear:nth-child(3) {
    top: -235px;
    left: 130px;
    }

}
.gear {
    position: relative;
    z-index: 0;
    width: 120px; height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--stroke-color);

    &:before{
    position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
    z-index: 2;
    content: "";
    border-radius: 50%;
    background: var(--main-color);
    }
    &:after {
    position: absolute; left: 25px; top: 25px;
    z-index: 3;
    content: "";
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 5px solid var(--stroke-color);
    box-sizing: border-box;
    background: var(--main-color);
    }
}



.gear .bar {
    position: absolute; left: -15px; top: 50%;
    z-index: 0;
    width: 150px; height: 30px;
    margin-top: -15px;
    border-radius: 5px;
    background: var(--stroke-color);
    &:before {
    position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
    z-index: 1;
    content: "";
    border-radius: 4px;
    background: var(--main-color);
    }
    &:nth-child(2) {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    }
    &:nth-child(3) {
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    }
}
@-webkit-keyframes clockwise {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes anticlockwise {
    0% { -webkit-transform: rotate(360deg);}
    100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes clockwiseError {
    0% { -webkit-transform: rotate(0deg);}
    20% { -webkit-transform: rotate(30deg);}
    40% { -webkit-transform: rotate(25deg);}
    60% { -webkit-transform: rotate(30deg);}
    100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes anticlockwiseErrorStop {
    0% { -webkit-transform: rotate(0deg);}
    20% { -webkit-transform: rotate(-30deg);}
    60% { -webkit-transform: rotate(-30deg);}
    100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes anticlockwiseError {
    0% { -webkit-transform: rotate(0deg);}
    20% { -webkit-transform: rotate(-30deg);}
    40% { -webkit-transform: rotate(-25deg);}
    60% { -webkit-transform: rotate(-30deg);}
    100% { -webkit-transform: rotate(0deg);}
}
.gears .gear:nth-child(1) {
    -webkit-animation: anticlockwiseErrorStop 2s linear infinite;
}
.gears .gear:nth-child(2) {
    -webkit-animation: anticlockwiseError 2s linear infinite;
}
.gears .gear:nth-child(3) {
    -webkit-animation: clockwiseError 2s linear infinite;
}

/*
Custom font Family for BrownStd
*/

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-Regular.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-Bold.woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-BoldItalic.woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-Italic.woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-Light.woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-LightItalic.woff2");
    font-weight: 300;
    font-style: Italic;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-ReclinBold.woff2");
    font-weight: 700;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-ReclinLight.woff2");
    font-weight: 300;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-ReclinRegular.woff2");
    font-weight: 400;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-ReclinThin.woff2");
    font-weight: 100;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-Thin.woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BrownStd;
    src: url("/fonts/BrownStd/BrownStd-ThinItalic.woff2");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}