:root{
        --main-bg-color: #1a1d1a;     
        --secondary-bg-color: #F5FBF4;
        --accent-bg-color: #f57a07;

        --main-font-color: #eef3ee;     
        --secondary-font-color: #464746;   
        --accent-font-color: #f8fcf8e8;   

        --fs-xl:    3rem;
        --fs-400:   1rem ;
        --fs-500:   1.25rem;
        --fs-600:   1.5rem;
        --fs-tiny:  0.8rem;
}

.main_color{
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
}


.secondary_color{
    background-color: var(--secondary-bg-color);
    color: var(--secondary-font-color);
}


.accent_color{
    background-color: var(--accent-bg-color);
    color: var(--accent-font-color);
}

.lp-1{
    letter-spacing: 2px;
}

.lp-2{
    letter-spacing: 4px;
}


.p-1{
    padding: 5px;
}


.p-2{
    padding: 10px;
}


.p-3{
    padding: 15px;
}

.p-4{
    padding: 20px;
}

.p-5{
    padding: 30px;
}

.m-1{
    margin: 5px;
}


.m-2{
    margin: 10px;
}


.m-3{
    margin: 15px;
}

.m-4{
    margin: 20px;
}

.m-5{
    margin: 30px;
}

.border-bevel{
    border-radius: 10px 10px 0 0;
    margin: -10px;
    margin-bottom: 15px;
   
}


.wbbox{
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(185, 184, 184, 0.2), 2px 2px 2px 1px rgba(107, 106, 106, 0.19);
    
}

.wbbox-grey{
    background-color: rgb(233, 228, 228);        
}


.roboto-text{
    font-family:Roboto;
}


.barlow-text{
    font-family:Barlow;
}

.thin {
    font-weight: 100;
    font-style: normal;
}
  
.light {
font-weight: 300;
font-style: normal;
}

.regular {
font-weight: 400;
font-style: normal;
}

.medium {
font-weight: 500;
font-style: normal;
}
  

.bold {
    font-weight: 700;
    font-style: normal;
    }
    


.font-normal {
    font-size: 1rem;
    font-style: normal;
}

.font-h1 {
    font-size: 2rem;
    font-style: normal;
}


.font-h2 {
    font-size: 1.8rem;
    font-style: normal;
}


.font-h3 {
    font-size: 1.6rem;
    font-style: normal;
}


.font-h4 {
    font-size: 1.4rem;
    font-style: normal;
}



.font-h5 {
    font-size: 1.2rem;
    font-style: normal;
}


.font-tiny {
    font-size: .85rem;
    font-style: normal;
}


.font-super-tiny {
    font-size: .75rem;
    font-style: normal;
}
    
a {
  text-decoration: none ;
}


form {
    margin-right: 10px ;
    margin-left:10px;
    margin-bottom:20px;
    padding: 5px;
    background: #fcfcfcf3;
    border-radius: 10px;
    
  }


  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="datetime"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  input[type="textarea"],
  select,
  textarea{
    background: white;
    border: none;
    height: 45px;
    margin: 0;
    outline: 0;
    padding: 10px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    color: black;
    width:90%;
    border-radius: 8px;
    margin: 10px;
    font-weight: 300;
    font-style: normal;
  }
  
  input[type="radio"],
  input[type="checkbox"] {
    margin: 0 4px 8px 0;
  }
  
    dropdown {
        height: 100px;
    }
  
  select{
    padding: 3px;
    line-height:1px;
    background:#f4f4f4;
     border-radius: 10px;
    
  }
  
  
  fieldset {
    margin-bottom: 10px;
    border: none;
  }
  
  legend {
    font-size: var(--fs-600);
    margin-bottom: 3px;
  }
  
   label {
    display: block;
    font-size: var(--fs-tiny);
    margin-top: 10px;
    padding:2px;
    margin-bottom: 3px;
    font-family:Arial;
    font-weight: 500;
    font-style: normal;
    font-size: .75rem;
    letter-spacing: 2px;
  }




  
  label.light {
    font-weight: 300;
    display: inline;
  }
  
  .number {
    background-color: #5fcf80;
    color: #fff;
    height: 30px;
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 100%;
  }
  

  .stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    font-family:Barlow;
    font-weight: 300;
    font-style: normal;
    font-size: .8rem;
  }
  
    
  
  
  .stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
  }
  
  .stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
  }
  
  .stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ece7e7;
    margin-bottom: 6px;
  }
  
  .stepper-item.active {
    font-weight: bold;
  }
  
  .stepper-item.completed .step-counter {
    background-color: #4bb543;
  }
  
  .stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 4px solid #47a840;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
  }
  
  .stepper-item:first-child::before {
    content: none;
  }
  .stepper-item:last-child::after {
    content: none;
  }


  hr {
    width: 100%;
    height: 2px;
    margin-left: auto;
    margin-right: auto;
    background-color: #b7d0e2;
    border: 0 none;
    margin-top:1rem;
  }

  button {
    font-size: .8rem;
    color:white;
    background-color: var(--accent-bg-color);
    padding: 0.675em 1em;
    border: 1px solid #caced1;
    border-radius: 2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  
  html, body {
     padding: 0;
    box-sizing: border-box;
    background: #fff;
    color: #22313F; 
    
  }
  
  h1, h2 {
    display: inline-block;
    width: 100%;
    font-family: "Helvetica Neue", "Arial";
    font-size: 3em;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 3px;  
    text-align: center;
  }
  
  h1 {
    color: #364e65;
    text-transform: none;
    padding: 0;
    margin: 0;
  }
  
  .card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin:5px;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  /* Add some padding inside the card container */
  .container {
    padding: 2px 16px;
  }