.myChart {
  height: 400px !important;
}

.custom-chart {
  position: relative;
}

.controls-block {
  position: absolute;
  top: -78px;
  right: 0;
}

.controls-block .controls {
  display: flex;
}

.controls-block .controls div {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}

.chart-previous-arrow,
.chart-next-arrow {
  width: 10.93px;
  height: 18.89px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.chart-previous-arrow svg path,
.chart-next-arrow svg path {
  transition:0.3s all;
}

.chart-previous-arrow {
  transform: rotate(180deg);
}

.chart-next-arrow:hover svg path, .chart-previous-arrow:hover svg path{
  fill:#0B5669;
  fill-opacity:1;
}


/* Calculation form */

.fuel-calculation-form .pb0.pbreak {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  gap: 125px;
}

.fuel-calculation-form .cp_cff_13 #fbuilder input[readonly], .cp_cff_13 #fbuilder textarea[readonly] {
  background-color: transparent;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 57.6px;
  color: #0B576A;
  box-shadow: none !important;
  transition: none !important;
  padding: 0;
}

.fuel-calculation-form .cp_cff_13 input:focus {
  box-shadow: none !important;
}

.fuel-calculation-form #fieldname12_1,.fuel-calculation-form #fieldname12_2 {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.fuel-calculation-form .cff-calculated-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fuel-calculation-form .cff-calculated-field label {
  display: flex;
  order: 2;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 19.6px;
  color: #3D3D3D;
}

.fuel-calculation-form .cff-calculated-field.dfield {
  display: flex;
  order: 1;
}

.fuel-calculation-form #fbuilder .fields:not(.cff-container-field) {
   padding: 0px; 
}

.fuel-calculation-form #fbuilder .fields, #fbuilder .fform {
  display: flex;
  flex-direction: column;
  padding: 0px;
  width: 100%;
  clear: both;
  justify-content: center;
}

.fuel-calculation-form .cff-form-buttons-container {
  display: none !important;
}

.fuel-calculation-form #field_1-0, .fuel-calculation-form #field_2-0 {
  min-width: 635px;
}

.fuel-calculation-form .cff-div-field.cff-container-field label {
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 22.4px;
  color: #3D3D3D;
}

.fuel-calculation-form .cp_cff_13 #fbuilder span.uh {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: #666666;
  margin-top: 4px;
  font-style: normal;
}

.fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_1,.fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_1 input,.fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_2 input {
  border-radius: 5px;
  padding: 12px 20px;
  background-color: #FFFFF;
  border: 1px solid #0000001A;
  min-height: 46px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  color: #3D3D3D;
  margin-top: 12px;
}

.fuel-calculation-form #fbuilder .top_aligned .fields .dfield {
  padding: 0 !important;
}

.fuel-calculation-form #fbuilder .fields:not(.cff-container-field) {
  padding: 0px;
  /*gap: 8px;*/
}

.fuel-calculation-form .cp_cff_13 #fbuilder .fields>label {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 19.6px;
  color: #3D3D3D;
  padding: 0 !important;
}

.fuel-calculation-form .clearer {
  display: none !important;
}

.fuel-calculation-form .cp_cff_13 #fbuilder input::placeholder {
    color: #0B576A;
}

            .custom-chart {
                display: flex;
                align-items: center;
                position: relative;
            }

            .chart-legend {
                position: absolute;
                left: 0; /* Align to the left */
                top: 50%;
                transform: translateY(-50%) rotate(-90deg); /* Center vertically and rotate */
                transform-origin: left center; /* Ensure proper rotation point */
                white-space: nowrap; /* Prevent line breaks */
            }
            
            .chart-legend ul {
                padding: 0;
                list-style: none;
                margin: 0;
            }
            
            .chart-legend li {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                font-family: "Roboto", sans-serif;
                font-size: 14px;
                color: #333;
                transform: rotate(360deg);
                transform-origin: left center;
            }
            
            .chart-legend span {
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-right: 5px;
            }

@media only screen and (max-width: 767px) {
    .chart-legend li {
        margin-bottom: 14px !important;
        font-size: 12px;
    }
                
  .controls-block {
      top: -55px;
  }

  .myChart {
      height: 250px !important;
  }
  
  .fuel-calculation-form #fbuilder .fields, #fbuilder .fform {
      justify-content: flex-start;
  }
  
  
   #fieldlist_1 .pb0.pbreak,#fieldlist_2 .pb0.pbreak {
        flex-direction: column !important;
        gap: 40px;
  }
  
  .fuel-calculation-form #field_1-0,.fuel-calculation-form #field_2-0 {
        min-width: 295px;
    }
    
    .fuel-calculation-form .cp_cff_13 #fbuilder input[readonly], .cp_cff_13 #fbuilder textarea[readonly] {
        font-size: 28px;
        line-height: 33.6px;
    }
    
    .fuel-calculation-form #fieldname12_1,.fuel-calculation-form #fieldname12_2 {
        justify-content: space-between;
        gap: 24px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
   .controls-block {
      top: -60px;
  }
  
    #fieldlist_1 .pb0.pbreak,#fieldlist_2 .pb0.pbreak {
        flex-direction: column !important;
        gap: 60px;
    }
  
    #fbuilder .top_aligned .fields .dfield {
        /*width: calc(100% - 60px) !important;*/
    }
    
    .fuel-calculation-form #fieldname12_1,.fuel-calculation-form #fieldname12_2 {
        flex-direction: row;
        justify-content: space-between;
        gap: 74px;
    }
    
    .fuel-calculation-form #fbuilder .fields, #fbuilder .fform {
        justify-content: start;
    }
    
     .fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_1,.fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_2 {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }
    
     .fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_1 > .fields,.fuel-calculation-form .cff-div-field.cff-container-field #fieldname13_2 > .fields {
        flex: 1 1 calc(50% - 24px); /* 50% width minus gap */
    }
    
    .fuel-calculation-form #field_1-0,.fuel-calculation-form #field_2-0 {
        min-width: 272px;
    }
    
    .fuel-calculation-form .cp_cff_13 #fbuilder input[readonly], .cp_cff_13 #fbuilder textarea[readonly] {
        font-size: 28px;
        line-height: 33.6px;
    }
    
    
    #field_1-2 .dfield input,
    #field_1-2 label,#field_2-2 .dfield input,
    #field_2-2 label {
        text-align: right !important;
    }
    
    #field_1-2,#field_2-2 {
        min-width: 100px;
    }
    
    #field_1-3,
    #field_1-4,#field_2-3,
    #field_2-4 {
        min-width: 160px;
    }
}