#energyLabelHolder {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 25px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
}


#energyLabelHolder.check-blue-mode {
    border: 1px solid #11a0db;
    background: #11a0db;
    color:#fff;
}

#energyLabelForm {
    display:flex;
    flex-flow: column;
    width:100%;
    color:#000c00;

    align-items:center;
}

#energyLabelHolder.check-blue-mode #energyLabelForm {
    color:#fff;
}

#energyLabelForm .info{
    margin-bottom: 15px;
    text-align: center;
    line-height: 24px;
}

#energyLabelForm .input-group{
    display:none;
    column-gap:15px;
}

#energyLabelForm .input-group.show{
    display:flex;
    column-gap:15px;
    flex-wrap: nowrap;
}

#energyLabelForm .info p:first-child{
    font-size:24px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -.3px;
    color: #000;
    margin:0;
    margin-bottom:4px;
}
 
#energyLabelHolder.check-blue-mode #energyLabelForm .info p:first-child{
    color:#fff; 
}

#energyLabelHolder.check-blue-mode #energyLabelForm .info p{
    color:#fff; 
}

#energyLabelHolder.check-blue-mode #result p{
    color:#fff; 
}

#energyLabelHolder.check-blue-mode .info p{
    color:#fff; 
}

#energyLabelForm .info p:last-child{
    font-size:14px;
    line-height:16px;
    margin:0;
    opacity:0.6;
}

#energyLabelHolder.check-blue-mode #energyLabelForm .info p:last-child{
    color:#fff;
}

#energyLabelForm .input-text{
    width:100%;
    box-sizing: border-box;
}

#energyLabelForm .input-text:last-of-type{
    width:45%;
    box-sizing: border-box;
    margin-right:auto;
}


#energyLabelForm .input-text input{
    width: 100%;
    padding: 10px 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

#energyLabelForm .input-text input:focus{
    border-color: #00a2e2;
    outline: none;
}

#energyLabelForm label{
    display:block;
    margin-bottom:3px;
    font-size:13px;
}

#energyLabelForm input[type="submit"]{
    background-color: #b39759;
    border-radius:6px;
    color: #fff; 
    padding: 10px 30px;
    font-weight:600;
    font-size: 16px;
    width:100%;
    margin-top:25px;
    border: none;    
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#energyLabelForm input[type="submit"]:hover {
    background-color: #b39759;
}

#energyLabelForm input[type="submit"]:active {
    background-color: #b39759;
}



#energyLabelHolder.check-blue-mode #energyLabelForm input[type="submit"]{
    background-color: #000;
}

#energyLabelHolder.check-blue-mode #energyLabelForm input[type="submit"]:hover {
    background-color: #000;
}

#energyLabelHolder.check-blue-mode #energyLabelForm input[type="submit"]:active {
    background-color: #000;
}

.check-go-back {
    border:0;
    padding: 10px 30px;
    font-weight:500;
    font-size: 14px;
    background:#eee;
    color:#aaa;
    border-radius:6px;
    display:none;
}

#energyLabelHolder.check-blue-mode .check-go-back {
    background: #0000002b;
    color: #ffffff9c;
}

.check-go-back.show {
    display:inline-block;
}

.check-go-back:hover {
    cursor:pointer;
}

.labels ul {
    display:flex;
    margin:0 auto;
}

.labels ul li {
    opacity:0.3;
    filter:grayscale(1)
}

.labels ul {
    list-style-type: none;
    padding: 0;
}

#energyLabelHolder.check-blue-mode .labels ul li {
	color:#fff;
}

#checkLabels {
    display:none;
}

.labels ul li {
    padding: 10px 20px;
    width: 40px;
    margin: 5px 5px;
    font-weight: bold;
    height: 40px;
    font-size: 35px;
    text-align: center;
    line-height: 36px;
    border-radius:5px;
    box-sizing: content-box;
}

.label-A {
    background-color: #008000; /* Groen */
    color: white;
}

.label-B {
    background-color: #66CC00;
    color: white;
}

.label-C {
    background-color: #FFFF00; /* Geel */
    color: white;
}

.label-D {
    background-color: #FFCC00;
    color: white;
}

.label-E {
    background-color: #FF6600;
    color: white;
}

.label-F {
    background-color: #FF0000; /* Rood */
    color: white;
}

.label-G {
    background-color: #990000;
    color: white;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ripple div {
    position: absolute;
    border: 4px solid #00a2e2;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  #energyLabelHolder.check-blue-mode .lds-ripple div {
    border: 4px solid #fff;
  }

  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    4.9% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
  }


  @media(max-width:768px){
    #energyLabelHolder {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 15px;
    }
    .labels ul li {
        padding: 10px 10px;
        width: 17px;
        margin: 5px 3px;
        font-weight: bold;
        height: 28px;
        font-size: 24px;
        text-align: center;
        line-height: 26px;
    }
    #energyLabelForm .input-group {
        display:none;
    }
    #energyLabelForm .input-group.show {
        display:flex;
        flex-wrap: wrap;
        width: 100%;
    }
    #energyLabelForm input[type="submit"] {
        margin-top:15px;
    }
    #energyLabelForm .input-text {
        width:calc(33.3333% - 10px);
    }
    #energyLabelForm .input-text:last-of-type {
        width:100%;
    }
  }