:root {
    --color-primary: #2b9cba;
    --color-primary-light: #40bdde;
    --inactive: #cdd0d3;
    --error-primary: #da3b1f;
    --error-background: #f1e4e1;
    --font-primary: #010a11;
    --white: #ffffff;
  }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
      
}

html, body
{
    font-size: 10px;
    margin: 0;
    box-sizing: border-box !important;
    min-width: 320px;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    min-height: 100%;

}



header
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 7vh;
    background: #333;
    text-align: center;
    z-index: 20;

}
header h1
{
    margin: auto;
    margin-top: 2vh;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 3vh;
}


body {
  background: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  font: inherit;
  min-height: 100vh;
}


/* nav */
.nav {
    background: #2b9cba;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font-size: 2rem;
    height: 100vh;
    left: -280px;
    padding: 6rem 2rem 2rem 2rem;
    position: fixed;
    top: 0;
    transition: all 0.5s;
    width: 280px;
    z-index: 25;
  }
  .nav.expanded {
    left: 0;
  }
  .nav ul {
    list-style: none;
    margin: auto 0;
    padding: 0;
  }
  
  .nav button {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
    background: none;
    border: none;
  }
  .nav a:hover {
    opacity: 0.8;
  }
  
  
  .nav li
  {
      margin: 10px 0;
  }

/* nav toggle */
.nav-toggle {
  cursor: pointer;
  height: 0;
  left: 10px;
  position: fixed;
  top: 3.5vh;
  width: 35px;
  z-index: 30;
  text-align: left;
}

.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #ffffff;
  content: "";
  height: 0.2rem;
  transition: all 0.5s;
  width: 100%;
}
.nav-toggle .nav-toggle-bar {
  margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
  margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
  margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
  background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
  background: #ffffff;
  margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* nav */
.nav {
  background: #2b9cba;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  font-size: 2rem;
  height: 100vh;
  left: -280px;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  transition: all 0.5s;
  width: 280px;
  z-index: 25;
}
.nav.expanded {
  left: 0;
}
.nav ul {
  list-style: none;
  margin: auto 0;
  padding: 0;
}

.nav a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
}
.nav a:hover {
  opacity: 0.8;
}



main
{
    margin-top: 7vh;
    background: #f9f9f9;
    min-height: 93vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}

h2
{
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 16px 0;
}


main input, select
{
    border: solid 2px #2b9cba;
    border-radius: 5px;
    height: 30px;
    width: 80%;
    margin: 10px;
    font-size: 12px;
    padding: 5px;
    transform:translate3d(0,10px,0);
    text-transform: uppercase;
    background: #fff;
}


#types {
    color: #555;
}

select
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

main input[type="submit"]
{
    border-radius: 0;
    height: 30px;
    width: 50%;
    margin: 10px;
    font-size: 12px;
    padding: 5px;
    text-transform: uppercase;
    background: #2b9cba;
    color: #fff;
    font-weight: 800;
}

ul
{
    padding-inline-start: 0;
    margin-block-end: 0;
    margin-block-start: 0;
}

footer
{
    background: #f9f9f9;
    z-index: 8;
}

.primary-color
{
    color: #2b9cba !important;
}

/*---------------------------home---------------------------*/

.home-banner,.home-banner img
{
    margin: 0;
    width: 100%;
    margin-bottom: 10px;
}


.img-magnifier-container {
  position: relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 5px solid #2b9cba;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 50px;
  height: 50px;
}

.img-magnifier-glass:after
{
    display: block;
    margin-top: 38px;
    margin-left: 28px;
    content: "";
    width: 25px;
    height: 35px;
    background: transparent url('../img/magnifier_handle.png') no-repeat;
}

main .home-form
{
    width: 100%;
    text-align: center;
}


#home-form::-webkit-calendar-picker-indicator
{
  display: none;
}

/*#home-form .input-datalist-wrapper:after*/
/*{*/
/*     content: "▼";*/
/*    font-size: 9px;*/
/*    padding: 2px 0;*/
/*    color: #777;   */
/*    position: absolute;*/
/*}*/

.datalist-clear
{
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 24px;
    background-image: url('../img/clear.png'); 
    background-size: cover; 
    right: calc(10% + 10px);
    border: none;
    background-color: transparent;
}

.datalist-clear:focus
{
    outline: none;
}

.type-helper
{
    margin-top: 15px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
}

.continue-report
{
    width: 100vw;
    margin: 20px auto;
    padding: 20px 0;
    font-size: 12px;
    text-align: center;
    background: #efefef;
    margin-bottom: -20px;
    padding-bottom: 0;
    border-top: solid 2px #2b9cba;
    border-bottom: solid 2px #2b9cba;
    min-height: 78px;
    
}

.continue-report input[type="submit"]
{
    width: 40vw;
    padding: 0;
    border: solid 2px #2b9cba;
    margin: 0;
    background: #fff;
    color: #2b9cba;
    margin-bottom: -20px;
}

.error-message
{
    position: fixed;
    transform: translateY(0px);
    left: 50%;
    margin-left: -20vw;
    width: 40vw;
    background: rgba(255,200,200,0.6);
    transition: all 1s ease;
    height: 0;
    font-size: 18px;
}

.error-message.visible
{
    display: block;
    transform: translateY(20vh);
    height:  auto;
    width: 80vw;
    border: solid 2px #f00;
    text-align: center;   
    color: #f00;
    margin-left: -40vw;
    padding: 5px;
    min-height: 40px;
}

.info-message
{
    position: fixed;
    transform: translateY(0px);
    left: 0;
    width: 100vw;
    background: #fff;
    transition: all 1s ease;
    height: 0;
    font-size: 18px;
    overflow: hidden;
}

.info-message.visible
{
    display: block;
    transform: translateY(40vh);
    height:  auto;
    border-top: solid 2px #2b9cba;
    border-bottom: solid 2px #2b9cba;
    text-align: center;   
    color: #333;
    padding: 5px;
    min-height: 17vh;
    z-index: 10;
}

.info-message h2
{
    padding: 10px;
}

.info-message button
{
    min-width: 30vw;
    padding: 0;
    border: solid 2px #2b9cba;
    margin: 20px;
    background: #fff;
    color: #2b9cba;
    text-transform: uppercase;
    font-size: 20px;
    padding: 5px;
}

/*---------------------------level---------------------------*/

.control-level
{
    margin: auto;
    text-align: center;
}

.control-level.button
{
    background: #fff;
    border: solid 3px #2b9cba;
    border-radius: 3px;
    width: 300px;
    height: 75px;
    margin: 20px auto;
}


.control-level.button .icon
{
    width: 60px;
    display: block;
    background: #2b9cba;
    height: 100%;
    float: left;
    line-height:  32px;
    text-align: center;
    padding-right: 3px;
}

.control-level.button .icon img
{
    display:inline-block;
    vertical-align: bottom;
    height: 16px;
}

.control-level.button .icon .time
{
    color: #fff;
    font-size: 12px;
}

.control-level.button .text h3
{
    display: block;
    margin: 0;
    
    color: #2b9cba;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    padding-top: 4px;
}

.control-level.button .text div
{
    height: 50px;
    display: table;
    padding: 0 5px;
}

.control-level.button .text span
{
    margin: 0 5px;
    width: 240px;
    font-size: 12px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

.control-level.button .text h3
{
    text-align: center;

}


/*---------------------------questions---------------------------*/


.progress-item:nth-child(4n+1)
{
    background-color: #30adce;
}

.progress-item:nth-child(4n+3)
{
    background-color: #2b9cba;
}



.progress-bar
{
    background: #2b9cba;
    text-transform: uppercase;
}

.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
  
  }
  .breadcrumb li { 
    float: left; 
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
  }

  .breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 5px 0 5px 20px;
    background: brown; /* fallback color */
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
  }

  .breadcrumb li a::after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 30px solid transparent; /* Go big on the size, and let overflow hide */
    border-bottom: 30px solid transparent;
    border-left: 15px solid;
    position: absolute;
    top: 50%;
    margin-top: -30px; 
    left: 100%;
    z-index: 2;
    
  }

  .breadcrumb li img {
    width: 13px;
    margin: 0 5px;
  }

  .breadcrumb li:first-child a {
    padding-left: 10px;
  }
  .breadcrumb li:nth-child(2n) a       { background:        #30adce; }
  .breadcrumb li:nth-child(2n) a:after { border-left-color: #30adce; }
  .breadcrumb li:nth-child(2n+1) a       { background:        #2b9cba; }
  .breadcrumb li:nth-child(2n+1) a:after { border-left-color: #2b9cba; }
  .breadcrumb li:last-child a:after { border: none }

.question-nav
{
    padding: 10px 0px;
    list-style-type: none; 
}

.question-group
{
    margin: 10px 15px 0px 15px;
    padding-top: 10px;
    font-size: 16px;
    color: #777;
    text-transform: uppercase;
    font-weight: 900;
    border-top: solid 1px #ccc;
    text-align: left;
}

.question-list
{
    max-height: 0;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    overflow: overlay;
    padding: 0 0 0 15px;
    transition: all 0.4s linear;
}

.question-list li
{
    display: flex;
}

.question-item
{
}

.question-item div
{
    font-size: 14px;
    font-weight: bold;
    width: calc(100vw - 120px);
    color: #333;
    margin: 10px 5px 5px 5px;
}

.question-item p
{
    font-weight: normal;
}

.question-list button
{
    height: 25px;
    width: 25px;
    position: relative;
    margin-top: 10px;
    background-size: 17px 17px;
    background-repeat: no-repeat;
    background-position: 3px 3px;
    border: 1px solid #ccc;

}

.question-list .ok
{
    background-image: url("../img/ok_button_inactive.png") ;
    left: 10px;
}

.question-list .notok
{
    background-image: url("../img/notok_button_inactive.png") ;
    left: 25px;
}


.question-list .ok.active
{
    background-image: url("../img/ok_button.png") ;
    border: 1px solid #91ffb2;
    height: 25px;

}

.question-list .notok.active
{
    background-image: url("../img/notok_button.png") ;
    border: 1px solid #ff9191;
    height: 25px;
}
.question-nav.lvl1 li
{
    padding: 10px 4px 10px 10px;
    /* border-bottom: 1px dotted #777; */
    overflow: hidden;
    max-height: 16px;
    transition: max-height 0.4s ease;
    box-sizing: content-box;
}

.question-nav .nav-title
{
    width: calc(100vw - 140px);
    padding-left: 10px;
}

.question-nav .nav-title:before
{
        content: none;
}

.question-nav.lvl2 li
{
        border-bottom: none;
    padding: 10px 0;
    display: flex;

}

.question-nav.lvl1 div
{
    height: 25px;
    font-size: 12px;
    color: #777;
    margin-left: 20px;
}

.question-nav.lvl1 div:before
{
        content: "▼";
    position: absolute;
    color: #777;
    left: 10px;
    transition: 0.4s ease-in-out;
}

.question-nav.lvl1 .active:before
{
    font-size: 12px;
    color: #333;
    left: 10px;
}

.question-nav.lvl1 .expanded:before
{
    transform: rotateX(180deg);
}


.question-nav.lvl1 .active
{
    font-size: 12px;
    color: #333;
}

.question-nav li a
{
    text-decoration: none;
    color: #333;
    
}

.question-nav li.question-wrapper
{
    display: block;
}

.questions-container
{
    width: 300vw;
    position: relative;
    transform: translate(-100vw, 0);
    height: 68vh;
}

.transition-left
{
    transform: translate(-200vw, 0);
    transition: transform 0.5s ease;
}

.transition-right
{
    transform: translate(0, 0);
        transition: transform 0.5s ease;

}


.faded
{
    opacity: 0;
}

.transition-fade
{
    opacity: 1;
    transition: opacity 0.5s ease;
}




.question-body
{
	width: 100%;
	z-index: 1;
    background: #e7e9e9;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.progress
{
    background: linear-gradient(90deg, rgba(64,189,222,1) 0%, rgba(43,156,186,1) 0%);
    position: relative;
    height: 10vh;
    margin-top: -5vh;
    text-align: center;
    color: #fff;
    font-size: 2.5vh;
    padding-top: 5.8vh;
    font-family: arial;
    font-weight: 900;
    text-transform: uppercase;
    z-index: 18;

}

.progress.expanded:after
{
    transform: rotateX(180deg);
}



@keyframes moveUp {
    0% { transform: translate(0, 0); }
    100% { transform: translate(0, -4vh); }
}

@keyframes moveDown {
    0% { transform: translate(0, -10vh); }
    100% { transform: translate(0, 0); }
}

#problems
{
    display: none;
}

#more-info
{
    display: none;
}

#question-wrapper
{
    display: none;
}

.question-wrapper
{
    width: 90%;
    border: solid #2b9cba 5px;
    border-radius: 5px;
    position: fixed;
    top: 18vh;
    margin: auto;
    left: 0;
    right:0;
    background: #fff;
    z-index: 15;
    filter:none;
    -o-filter:none;
    -ms-filter:none;
    -moz-filter:none;
    -webkit-filter:none;
}




.question-problems .question-img
{
    width: 100%;
    background: #f9f9f9;
    text-align: center;
    height: 18vh;
    
}
.question-problems .question-img img
{
    margin-top: 2vh;
    height: 14vh;
}


  
.question-problems  .question-title
{
    text-align: center;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    padding: 15px 0 0 0;
    background: linear-gradient(0deg, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);

}

.question-problems .question-text
{
    text-align: justify;
    font-size: 14px;
    font-weight: 300;
    margin: 0 20px;
    min-height: 30vh;
    max-height: 40vh;
    overflow: overlay;
}


@media screen and (max-height: 650px)
{
    .question-problems
    {
        top: 12vh;
    }
}

@media screen and (max-height: 480px)
{
    .question-problems .question-text
    {
        top: 5vh;
        max-height: 30vh;
    }
}


.question-problems .question-text strong
{
    font-weight: 600;
}

.question-problems .question-text img
{
    width: 70%;
    margin: 10px 15%;
}

.question-problems .cost-table 
{
    padding: 0 20px 20px 20px;
    font-size: 14px;
}

.question-problems .cost-table span + span
{
    float: right;
    font-weight: 600;
}

.question-wrapper .close
{
    width: 100%;
    color: white;
    text-transform: uppercase;
    background: #2b9cba;
    text-align: center;
    padding: 10px 0 5px 0;
    font-size: 20px;
    font-weight: 800;
}


/*---------------------------summary---------------------------*/

.summary-car-name
{
    background: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    padding: 0 5px;
}

.summary-score-wheel
{
    background: #fff;
}

  .single-chart {
    width: 50%;
    margin: auto;
  }
  
  .circular-chart {
    display: block;
    margin: 0 auto;
    padding: 10px;
    max-width: 80%;
    max-height: 150px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 4.8;
  }
  
  .circle {
    fill: none;
    stroke-width: 4.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
      stroke: #2b9cba;
    }
    50%
    {
        stroke:  #2b9cba;
    }
    100%
    {
        stroke:  #2b9cba;
    }
  }
  

  .percentage {
    fill: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.4em;
    font-weight: 800;
    text-anchor: middle;
  }

  .summary-score-text
  {
      text-align: center;
      font-size: 14px;
  }
  .summary-score-text p
  {
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 3px 0;
  }

  .summary-report-item
  {
      padding: 10px;
  }
  .summary-report-item:nth-child(2n+1)
  {
    background: #fff;
  }
  .summary-report-item table
  {
      margin: auto;
      width: 100%;
      max-width: 480px;
  }

  .summary-report-item .bullet
  {
      width: 15px;
      vertical-align: top;
      padding-top: 2px;
  }
  .summary-report-item .bullet img
  {
      width: 10px;
  }
  .summary-report-item .title
  {
      width: calc(100% - 15px);
      font-size: 18px;
      font-weight: 200;
  }
  .summary-report-item .cost
  {
      font-size: 14px;
      width: 130px;
  }

.summary-report-item ul.cost-table 
{
    padding: 0;
    list-style: none
}

.summary-report-item ul.cost-table span + span
{
    float: right;
    font-weight: 600;
}

.summary-report-item .button
{
    width: calc(100% - 145px);
    text-align: right; 
}
.summary-report-item button
{
    
    width: 90%;
    color: #fff;
    background: #2b9cba;
    padding: 5px;
    border: none;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
@media screen and (min-width: 425px)
{
    .summary-report-item button
    {
        padding: 5px 20px;
        width: 210px;
    }
}


.summary-costs
{
    width: 80%;
    max-width: 420px;
    margin: 10px auto;
    border: solid 5px #2b9cba;
    border-radius: 3px;
    background: #fff;
}

.summary-costs h3
{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    margin: 0;
    padding: 3px 10px;
}


.summary-partial-costs
{
    width: 100%;
    margin: auto;
    color: #333;
    font-size: 14px;
}




.summary-partial-costs ul {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
.summary-partial-costs ul li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    color: #aaa;
    content:
 "........................................"
 "........................................"
 "........................................"
 "........................................"}

 .summary-partial-costs ul 
{
    margin: 5px;
    line-height: 20px;
    list-style: none
}
.summary-partial-costs ul span:first-child 
{    
    background: white;
    padding-right: 3px;
}

.summary-partial-costs ul span + span
{
    float: right;
    padding-left: 3px;
    background: white;
    font-weight: 600;
}

.summary-total-cost
{
    
    margin: auto;
    color: #fff;
    font-size: 18px;
    background: #2b9cba;
    padding: 2px 5px;
}

.summary-total-cost span + span
{
    float: right;
    font-weight: 600;
}

.summary-savings
{
    margin: 0 auto;
}

.summary-savings .info-icon
{
   width: 30px;
}
.summary-savings .info-icon img
{
    width: 90%;
}

.summary-savings .text
{
    text-align: justify;
    font-size: 12px;
    width: 268px;
}

/*---------------------------reports---------------------------*/

.report-actions 
{
    margin: auto;
    height: 60px;
    width: 320px;
    display: flex;
    justify-content: space-between;
}

.report-actions .button
{
    background: #fff;
    border: solid 3px #2b9cba;
    border-radius: 3px;
    width: 140px;
    height: 40px;
    float: left;
    box-sizing: content-box;
}


.report-actions .button .icon
{
    width: 40px;
    display: block;
    background: #2b9cba;
    height: 100%;
    float: left;
    line-height:  40px;
    text-align: center;
    padding-right: 3px;
}

.report-actions .spacer
{
    
    width: 100%;
    height: 40px;
    float: left;
}

.report-actions .button .icon img
{
    display:inline-block;
    vertical-align: middle;
}

.report-actions .button .text
{
    display: block;
    width: 97px;
    float: left;
    color: #2b9cba;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    padding-top: 4px;
}

.report-menu h2
{
    padding: 10px 0;
}

.report-list i
{
    text-align: center;
    font-size: 12px;
    margin: 0 20px;
}

.report-list ul
{
    list-style: none;
    font-size: 14px;
}

.report-list li
{
    padding: 5px 20px;
    font-size: 14px;
}

.report-list .car-name
{
    text-transform: uppercase;
    font-weight: 800;
}

.report-list .date
{
    padding: 5px 20px;
}


.report-list ul li::before {
    content: "■"; 
    color: #2b9cba;
    display: inline-block;
    margin: 3px 5px;
    top: -2px;
    position: relative;
  }

.report-menu button
{
    
    width: 90%;
    color: #fff;
    background: #2b9cba;
    padding: 5px;
    border: none;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

/*---------------------------overlay---------------------------*/

.overlay {
    background:rgba(255, 255, 255, 0.8);
    z-index: 10;
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(8px);
}

.overlay-close-trigger
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 14;
}


/*---------------------------redisign---------------------------*/
.toast
{
    position: fixed;
    right: 0;
    top: 40px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    height: 80px;
    width: 200px;
    padding: 10px;
    z-index: 99999999999;
    font-size: 12px;
    animation-name: example;
    animation-duration: 1s;
    /* animation-delay: 5s; */
    /* animation-iteration-count: 2; */
    animation-direction: alternate;
}

@keyframes example {
    0%   {right:-220px;}
    100% {right: 0px;}
  }

.toast h2
{
    font-size: 16px;
    text-align: left;
}


.toast.error
{
    color: var(--font-primary);
    background: var(--error-background);
    border-left: solid 3px var(--error-primary);
}


.question-wrapper
{
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: center;
    width: 90%;
    border: solid #2b9cba 5px;
    border-radius: 5px;
    position: fixed;
    top: 18vh;
    margin: auto;
    left: 0;
    right:0;
    background: #fff;
    z-index: 15;
    filter:none;
    -o-filter:none;
    -ms-filter:none;
    -moz-filter:none;
    -webkit-filter:none;
}

.question-wrapper img
{
    width: 50%;
}

.question-wrapper span
{
    width: 100%;
    min-height: 40vh;
    padding: 0 30px;
}

.question-wrapper button
{
    width: 100%;
    color: white;
    text-transform: uppercase;
    background: #2b9cba;
    text-align: center;
    padding: 10px 0 5px 0;
    font-size: 20px;
    font-weight: 800;
    border: none;
}

.get-report
{
    display: flex;
    width: 100%;
    border: 0;
    border-radius: 0;
    color: var(--white);
    background: var(--inactive);
    align-items: center;
    justify-content: center;
    font-size: 16px;
    height: 60px;
    text-transform: uppercase;
    position: fixed;
    bottom: 0;
}

.get-report.active
{
    color: var(--white);
    background: var(--color-primary);
}

.problem-list
{
    display: flex;
    flex-direction: column;
    background-color: white;
    font-size: 18px;
    padding-inline-start: 0px;
    list-style: none;
    width: 100%;
}

.problem-list li::before
{
    content: '';
    display: inline-block;
    height: 27px;
    width: 16px;
    transform: scale(0.6) translate(-10px, 11px);
    background-image: url("../img/bullet.png");
}

.problem-list li
{
    padding: 16px 32px;
    background-color: #ffffff;

}

.problem-list li:nth-child(2n)
{
    background-color: #f9f9f9;
}

.question-group-wrapper 
{
    margin-bottom: 100px;
}

.circular-chart-wrapper
{
    width: 100%;
    height: 100px;
}

.report-wrapper
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f9f9f9;
}

.report-wrapper h2
{
    padding-top: 24px;
    width: 100%;
}

.button
{
    border-radius: 0;
    height: 30px;
    width: 50%;
    margin: 10px auto;
    font-size: 12px;
    padding: 5px;
    text-transform: uppercase;
    background: #2b9cba;
    color: #fff;
    font-weight: 800;
    border: none;
}

.level-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.level {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: solid var(--color-primary) 3px;
    border-radius: 3px;
    width: 75%;
    min-height: 75px;
    gap: 20px;
    font-size: 12px;
}

.level .icon {
    background: var(--color-primary);
    color: var(--white);
    flex: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6px
}

.level .icon div {
    display: flex;
}

.level .icon img {
    width: 20px;
}

.level .text {
    flex: 75%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
}

.level h3 {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
}

.problem-details-cost-wrapper {
    font-size: 14px;
    display: flex;
    width: 160px;
    flex-wrap: wrap;
}

.problem-details-cost-wrapper span {
    width: 80px;
}

.problem-details-cost-wrapper span:nth-child(2n)
{
    font-weight: 700;
}

.problem-details-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.problem-details-wrapper button {
    height: auto;
}