body {
  background-color: rgb(0, 44, 62);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    min-width: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

#BackGround {
    background-color: aqua;
    height: 100%;
    width: 100%;
}

#imgBackground {
    position: relative;
    height: 100vh;
    width: 100%;
}

#Header {
    display: none;
    background-color: white;
    height: 5.5vh;
    width: 100%;
    left: 0;
    top: 0%;
    position: absolute;
    border-bottom: 2px solid;
    border-color: rgb(242, 122, 90);

}

#lblFeus {
    color: black;
    font-size: 40px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 2vh;
    font-weight: bold;

}

#CustTypeSelect {
    height: 100%;
    width: 225px;
    left: 0;
    position: absolute;
    top: 7%;
    
}

#CustResidential {
    background-color: rgb(242, 122, 90);
    cursor: pointer;
    height: 200px;
    margin-bottom: 40px;
    width: 200px;
    position: relative;

}

#CustSmallGeneral {
    background-color: rgb(242, 122, 90);
    cursor: pointer;
    height: 200px;
    margin-bottom: 40px;
    width: 200px;
    position: relative;

}

#CustMediumGeneral {
    background-color: rgb(242, 122, 90);
    cursor: pointer;
    height: 200px;
    margin-bottom: 40px;
    width: 200px;
    position: relative;
}

#CustLargeGeneral {
    background-color: rgb(242, 122, 90);
    cursor: pointer;
    height: 200px;
    margin-bottom: 40px;
    width: 200px;
    position: relative;
}

#ResidentialImg,
#SmallGeneralImg,
#MediumGeneralImg,
#LargeGeneralImg {
    height: 80%;
    width: 100%;
}

#lblResidential {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 86%;
    text-align: center;
    font-size: 20px;
    width: 100%;
}

#lblResidentialUnder {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 95%;
    text-align: center;
    font-size: 15px;
}

#lblSmallGeneral {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 86%;
    text-align: center;
    font-size: 20px;
    width: 100%;

}

#lblSmallGeneralUnder {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 95%;
    text-align: center;
    font-size: 15px;
    width: 100%;
}

#lblMediumGeneral {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 86%;
    text-align: center;
    font-size: 20px;
    width: 100%;

}

#lblMediumGeneralUnder {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 95%;
    text-align: center;
    font-size: 15px;
    width: 100%;
}

#lblLargeGeneral {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 86%;
    text-align: center;
    font-size: 20px;
    width: 100%;

}

#lblLargeGeneralUnder {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 95%;
    text-align: center;
    font-size: 12px;
    width: 100%;
}

#CustNextStep {

    display: none;
    height: 100%;
    width: 100%;
    position: absolute;

}

#CheckImgResidential {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;

}

#CheckImgSmall {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;
}

#CheckImgMedium {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;
}

#CheckImgLarge {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;
}

#SelectResidentialNoSolar,
#SelectSmallNoSolar,
#SelectMediumNoSolar,
#SelectLargeNoSolar {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;
}

#SelectResidentialFixedSolar,
#SelectSmallFixedSolar,
#SelectMediumFixedSolar,
#SelectLargeFixedSolar {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;
}

#SelectResidentialTrackingSolar,
#SelectSmallTrackingSolar,
#SelectMediumTrackingSolar,
#SelectLargeTrackingSolar {
    display: none;
    height: 40%;
    width: 40%;
    position: absolute;
    top: 25%;
    left: 30%;
}

#CustomerServiceType {
    height: 100%;
    width: 225px;
    position: absolute;
    left: 20%;
    top: 7%;

}

#ResidentialEnergyOptions,
#SmallEnergyOptions,
#MediumEnergyOptions,
#LargeEnergyOptions {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;

}

#ResidentialNoSolar,
#SmallNoSolar,
#MediumNoSolar,
#LargeNoSolar {
    cursor: pointer;  
    background-color: rgb(242, 122, 90);
    height: 200px;
    width: 200px;
    position: relative;
    top: 1%;
    margin-bottom: 40px;
}

#ResidentialFixedSolar,
#SmallFixedSolar,
#MediumFixedSolar,
#LargeFixedSolar {
    cursor: pointer;
    background-color: rgb(242, 122, 90);
    height: 200px;
    width: 200px;
    position: relative;
    margin-bottom: 40px;

}

#ResidentialTrackingSolar,
#SmallTrackingSolar,
#MediumTrackingSolar,
#LargeTrackingSolar {
    background-color: rgb(242, 122, 90);
    cursor: pointer;
    height: 200px;
    width: 200px;
    position: relative;
  
}

#ResidentialNoSolarImg,
#ResidentialFixedSolarImg,
#ResidentialTrackingSolarImg,
#SmallNoSolarImg,
#SmallFixedSolarImg,
#SmallTrackingSolarImg,
#MediumNoSolarImg,
#MediumFixedSolarImg,
#MediumTrackingSolarImg,
#LargeNoSolarImg,
#LargeFixedSolarImg,
#LargeTrackingSolarImg {
    height: 80%;
    width: 100%;
}

#lblRNoSolar,
#lblRFixedSolar,
#lblRTrackingSolar,
#lblSNoSolar,
#lblSFixedSolar,
#lblSTrackingSolar,
#lblMNoSolar,
#lblMFixedSolar,
#lblMTrackingSolar,
#lblLNoSolar,
#lblLFixedSolar,
#lblLTrackingSolar {
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    top: 90%;
    text-align: center;
    font-size: 20px;
    width: 100%;
}

#ResidentialNextStep {

    display: none;
    height: 100%;
    width: 100%;
    position: absolute;

}

#CustomerInputOptions {
    display: none;
    height: 70vh;
    width: 58vw;
    position: absolute;
    right: 1vw;
    top: 10%;
}

#UseInformationNoSolar {
    background-color: hsl(195deg 43% 26%);
    color: white;
    display: none;
    height: 350px;
    width: 100%;
    position: absolute;
    top: 25%;
}

#NoSolarInfoTitle {
    transform: translate(-50%, -50%);
    color: white;
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 100%;
    top: 5%;
    font-weight: bolder;
    border-bottom: 2px solid;
    text-align: center;
}

#NoSolarEnterConsumption {
    transform: translate(-50%, -50%);
    color: white;
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 100%;
    top: 15%;
    font-weight: bolder;
    text-align: center;
}

#NoSolarEnterDemand {
    transform: translate(-50%, -50%);
    color: white;
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 100%;
    top: 35%;
    font-weight: bolder;
    text-align: center;
}

#txtNoSolarkWh {
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 200px;
    background-color: gray;
    color: white;
    top: 25%;
}

#txtNoSolarDemand {
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 200px;
    top: 44%;
    background-color: gray;
    color: white;
}

.button:hover {
    background-color: yellow;

}

.buttonClear:hover {
    background-color: red;
}

#BtnNoSolarCalcBill {
    cursor: pointer;
    height: 8%;
    width: 25%;
    transform: translate(-50%, -50%);
    left: 45%;
    position: absolute;
    top: 62%;
}

#BtnNoSolarBack {
    cursor: pointer;
    height: 8%;
    width: 25%;
    transform: translate(-50%, -50%);
    left: 70%;
    position: absolute;
    top: 60%;
}

#lblCalculateNoSolar {
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 100%;
    top: 60%;
    text-align: center;
    height: 100%;

}

#lblBackNoSolar {
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    font-size: 25px;
    width: 100%;
    top: 60%;
    text-align: center;
    height: 100%;
}

#BtnRefresh {
    height: 55px;
    width: 50px;
    cursor: pointer;
}

#imgCalc {
    height: 35px;
    width: 35px;
}

#imgBack {
    height: 55px;
    width: 50px;
}

#imgRefresh {
    height: 110px;
    width: 85px;
    cursor: pointer;
    position: absolute;
    left: 100%;
    top: 46%;
}

#Splitter {
    background-color: rgb(0, 44, 62);
    transform: translate(-50%, -50%);
    left: 50%;
    height: 100%;
    width: 2px;
    position: absolute;
    top: 50%;

}

#LeftSide {
    background-color: white;
    transform: translate(-50%, -50%);
    left: 25%;
    height: 100%;
    width: 50%;
    position: absolute;
    top: 50%;
}

#RightSide {  
    background-color: white;
    transform: translate(-50%, -50%);
    left: 75%;
    height: 100%;
    width: 50%;
    position: absolute;
    top: 50%;
    overflow-y: auto;
}

#TopBarLeft {
    height: 10vh;
    width: 100%;
    border-bottom: 2px solid rgb(0, 44, 62);
    text-align: center;
}

#TopBarRight {
    height: 10vh;
    width: 100%;
    border-bottom: 2px solid rgb(0, 44, 62);
    text-align: center;
}

#FUSESLogo {
    transform: translate(-50%, -50%);
    left: 50%;
    height: 140px;
    position: absolute;
    top: 12%;

}

#FUSESCharge {
    transform: translate(-50%, -50%);
    left: 50%;
    height: 22vh;
    position: absolute;
    top: 12%;
}

#LblBillInfoHeader {
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 2vw;
    width: 100%;
    top: 5vh;
    color: black;
    font-weight: bold;
}

#LblBillInfoHeaderRight {
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 2vw;
    width: 100%;
    top: 3vh;
    color: black;
    font-weight: bold;
}

#lblSelectedPath {
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 3vh;
    width: 100%;
    top: 2vh;
    color: black;
    font-weight: bold;
}

#lblBaseRateForPath {
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 3vh;
    width: 100%;
    top: 10vh;
    color: black;
    font-weight: bold;
}

#lblSolarType {
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 3vh;
    width: 100%;
    top: 18vh;
    color: black;
    font-weight: bold;
}

#lblTotalBill {
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 3vh;
    width: 100%;
    top: 26vh;
    color: black;
    font-weight: bold;
}

#ConsumptionInfoNoSolar {
    transform: translate(-50%, -50%);
    left: 50%;
    height: 70%;
    position: absolute;
    width: 100%;
    top: 35vh;
    text-align: center;
    align-content: center;
}

#BillInformatioLayout {
    transform: translate(-50%, -50%);
    left: 50%;
    height: 55vh;
    position: absolute;
    width: 100%;
    top: 38vh;
    text-align: center;
    align-content: center;
    overflow-y: auto;
}

.InputLabels {
    font-size: .99vw;
    text-align: center;
    font-family: system-ui;
    color: black;
    width: 100%;
}

.txtBoxes {
    background-color: rgb(0, 44, 62);
    width: 202px;
    height: 30px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    text-align: center;
}

#lblMonthlyKWNoSolar {
    top: 17%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
}

#txtMonthlyKwh {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 25%;
}

#lblMonthlyDemandNoSolar {
    top: 35%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;

}

#txtMonthlyDemandNoSolar {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 43%;
}

.button {
    height: 35px;
    width: 150px;
    cursor: pointer;
    color: black;
}

.buttonClear {
    height: 35px;
    width: 150px;
    cursor: pointer;
    color: black;
}

#BtnCalculateNoSolar {
    border-radius: 5px;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 50px;
    left: 45%;
    width: 50px;
    top: 40vh;
}

#imgCalculateNoSolar {
    height: 100%;
    width: 100%;
}

#BtnCalculateSolar {
    border-radius: 5px;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 50px;
    left: 45%;
    width: 50px;
    top: 40vh;
}

#imgCalculateSolar {
    height: 100%;
    width: 100%;
}

#BtnClearNoSolar {
    border-radius: 5px;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 50px;
    left: 60%;
    width: 50px;
    top: 40vh;
}

#imgClearNoSolar {
    height: 100%;
    width: 100%;
}

#lblDisclaimer {
    transform: translate(-50%, -50%);
    position: absolute;
    height: 20px;
    width: 100%;
    bottom: 20vh;
    font-size: 2vh;
    font-weight: bold;
    text-align: center;
    color: black;
}

#lblSolarPanelCapacity {
    top: 2vh;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    display: none;
}

#txtPanelCapacityKwh {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 6vh;
    display: none;
}

#lblCapacityFactor {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 10vh;
    display: none;
}

#lblCapacityNote {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 13vh;
    font-size: 15px;
    display: none;
}

#txtCapacityFactor {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 17vh;
    display: none;
}

#lblMonthlyKwConsumption {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 21vh;
    display: none;
}

#txtMonthlyKwConsumption {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 25vh;
    display: none;
}

#lblMonthlyDemandSolar {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 29vh;
    display: none;

}

#txtMonthlyDemandSolar {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 33vh;
    display: none;
}

#FEUSWelcome {
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 70px;
    left: 58vw;
    top: 50vh;
    background-color: white;
    height: 15vh;
    width: 80%;
}

#lblWelcome {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 44vw;
    top: 4vh;
    color: black;
    font-size: 4vw;
    font-weight: bold;
    width: 100%;
}
#FMTNImg{
    height: 5vh;
    width: 12vw;
    position: absolute;
    left: 5%;
}
#lblInfo1 {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 57%;
    top: 11vh;
    color: black;
    font-size: 1vw;
    font-weight: bold;
    width: 100%;
}
::-webkit-scrollbar{
    width: 10px;
    background-color: rgb(242, 122, 90);
    
}
::-webkit-scrollbar-thumb{
    background-color: rgb(25, 178, 255);
}
#MobileRestart{
    display: none;
    position: absolute;
    bottom: 0vh;
    left: 44%;
}
#imgReloadMobile{
    height: 8vh;
}
#Facts{
    background-color: white;
    display: none;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 65vw;
    height: 35vh;
    width: 30vw;
    top: 35vh;
    border-radius: 70px;
}
#lblFact1{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 5vh;
    font-size: 2vh;
    font-weight: bold;
    width: 90%;
}
#lblFact2{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 13vh;
    font-size: 2vh;
    font-weight: bold;
    width: 90%;
}
#lblFact3{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 21vh;
    font-size: 2vh;
    font-weight: bold;
    width: 90%;
}
#lblFact4{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 29vh;
    font-size: 2vh;
    font-weight: bold;
    width: 90%;
}