html {
    overflow-y: scroll;
  }

body {
    background-color: rgb(229,229,229);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Form*/
#formContainer {
    background-color: rgb(254,254,254);
    width: 550px;
    height: 441px;
    margin-top: 50px;
    border: 1px solid rgb(206,206,206);
    border-bottom: 2.5px solid rgb(206,206,206);
}

#formHeader {
    height: 84px;
    background-image: url('./Images/banner.jpg');
    background-size: 241%;
    background-position: 1315px 1254px;
    padding: 20px;
    color: black;
    text-align: left;
    border-bottom: 1px solid rgb(206,206,206);
}

.first, .second {
    color: rgb(82,82,82);
}

.first{
    font-size: 23px;
    font-weight: 1000;
    margin-top: 11px;
    margin-left: 20px;
    margin-bottom: 19px;
    font-family: "Noto Sans Warang Citi", sans-serif;
    letter-spacing: -0.8px;
}

.second {
    font-size: 17.1px;
    margin-left: 21px;
    margin-top: -5px;
    font-family: "Open Sans", sans-serif;
    word-spacing: -1.5px;
    font-weight: 500;
}


form {
    display: flex;
    flex-direction: column;
    padding: 41px;
    margin-top: -10px;
}

label {
    margin-top: -7px;
    color: rgb(89,110,162);
    font-family: "Lato", sans-serif;
    font-weight: 500;
}

#street {
    width: 444px; 
    height: 8px; 
    margin-top: 6px;
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    line-height: 1.4;
}

#city {
    width: 172px; 
    height: 8px;
    margin-top: 6px;
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    line-height: 1.4;
}

#state {
    width: 244px; 
    height: 22.5px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    font-size: 15px;
    line-height: 1.4;
    margin-left:15px;
    border-radius: 6px;
    color: rgb(84,84,84);
}

#street, #city, #state {
    outline: none;
}

#street:focus, #city:focus, #state:focus {
    border-width: 1.5px;
    border-color: black;
    outline: none; 
    box-shadow: none;
}


#stateLabel {
    display: block;
    margin-left: 15px;
    margin-top:0px;
    margin-bottom:0px;
}

#cityAndStateContainer {
    display: flex;
}

#cityAndStateContainer div {
    width: 45%;
}

hr {
    border: 0;
    height: 1px;
    background-color: rgb(137,137,137);
    width: 101%;
    margin-top: 7px;
}

#checkBoxLine {
    margin-bottom: 20px;
    margin-top: 6px;
}

#checkBoxLine label {
    font-size: 19px;
    font-family: "Lato", sans-serif;
}

#buttonContainer {
    display: flex;
    margin-top:1px;
}

button {
    width: 97px;
    height:47px;
    padding: 14px;
    font-size: 13.5px;
    color: white;
    border: none;
    margin-right: 3px;
    cursor: pointer;
    letter-spacing: 1px;
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

button[type="submit"] {
    background-color: rgb(85,110,165);
}

#submitButton {
    border-bottom:5px solid rgb(58,75,115);
    margin-right: 4px;
}

#submitButton:hover {
    background-color: rgb(100,123,178);
}

#resetButton {
    border-bottom:5px solid rgb(237, 138, 51);
}

#resetButton:hover {
    background-color: rgb(220,168,57);
}

button[type="reset"] {
    background-color: rgb(243, 185, 64);
}

/*No records found*/
#noRecordsMessage {
    display: none; 
    background-color: rgb(254,254,254);
    color: rgb(40,76,130); 
    font-size: 16px; 
    font-weight: 500; 
    text-align: center; 
    padding: 10px;
    margin-top: 15px;
    width: 532px;
    border: 1px solid rgb(206,206,206);
    border-bottom: 2.5px solid rgb(206,206,206);
    font-family: "Lato", sans-serif;
}

/* first weather card */
#firstWeatherCardContainer {
    width: 768px;
    margin-top: 50px;
    padding: 0;
    height: 415px;
}

#firstWeatherCardContainer:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6);
}

.weather-card {
    width: 727px;
    padding: 20px;
    background-color: white;
    height: 382px;
    border: 1.5px solid rgb(206,206,206);
    border-bottom: 3px solid rgb(206,206,206);
}

.weather-icon {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center;
    text-align: center;     
}

.weather-icon img {
    width: 166px; 
    height: 132px;
    margin-bottom: 10px; 
}

.weather-icon p {
    font-size: 20px; 
    margin: 0;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
}

.location {
    font-size: 29px;
    margin-bottom: 10px;
    margin-top: -6px;
    margin-left: 10px;
    white-space: nowrap;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;

}

.main-info {
    display: flex;
    margin-bottom: 10px;
}

.temperature {
    font-size: 121px;
    height: 150px;
    width: 243px;
    margin-left: 148px;
    margin-top: 7px;
    font-family: 'Roboto', sans-serif;
}

.weather-condition {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 23px;
    margin-top: -14px;
    margin-left: 23px;
}


.weather-details {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-left: 2px;
    margin-top: 16px;
     font-family: 'Roboto', sans-serif;
}

.weather-detail-item {
    text-align: center;
    width: 100px;
    margin-bottom: 10px;
    letter-spacing: 0.1px;
}

.weather-detail-item img {
    width: 33px;
    height: 34px;
    margin: 11px 15px;
}

.weather-detail-item p {
    font-size: 16.5px;
    margin-top: 3px;
    font-weight: 400;
}

.weather-detail-item strong {
    font-size: 16px;
    color: #000;
}

.weather-text {
    color: rgb(135, 135, 135);
    font-weight: 300;
}

/* second weather card */
 
#secondWeatherCardContainer {
    width: 1210px;
    margin-top: 34px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    height: auto;
}

.weather-table {
    width: 1165px;
    font-size: 17px;
    color: black;
    border-collapse: separate;
    border-spacing: 0 9px;
}

.weather-table th, .weather-table td {
    padding: 16px 12px;
    text-align: center;
}

.weather-table th {
    background-color: rgb(85,110,168); 
    color: black;
    font-size: 18px;
    font-weight: normal;
}

.weather-table td {
    background-color: white; 
    cursor: pointer;
}

.weather-table td img {
    vertical-align: middle;
    margin-right: 8px;
    width: 66px;
    height: 62px;
}

/* Parent Container Styling */
 #parentContainer {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 552px;
    height: 695px;
    margin-top:10px;
} 

.detailed-weather-header {
    font-size: 38px;
    color: black;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

.first-line {
    width: 65%;
    margin-top: -4px;
    border: none;
    height: 1px;
    background-color: rgb(237,237,237);
    margin-bottom: 28px;
}

#detailedWeatherContainer {
    background: linear-gradient(to bottom, rgb(253,253,253), rgb(60,76,117)); 
    width: 510px;
    height:398px;
    position: relative;
    margin-top: 42px; 
    padding: 20px;
    font-size: 23px;
    border: 1px solid rgb(206,206,206);
    border-bottom: 2.5px solid rgb(206,206,206);
}

#detailedWeatherContainer:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.detail-weather-main {
    display: flex;
    width: 100%; 
    margin-top:-2px;
    height: 181px;
    font-family: "Lato", sans-serif;
}

.weather-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 521px;
    height:177px;

}
.detailed-date {
    margin-bottom: 0px; 
    color: rgb(59, 75, 114);
    margin-top: 3px;
    font-size: 26px;
}

.detailed-description {
    color: rgb(59, 75, 114); 
    margin-top: 12px;
    font-size: 26px;
}

.detailed-temperature {
    color: rgb(59, 75, 114);
    margin-top: -12px;
    font-size: 36px;
}
.weather-main-image {
    width: 192px; 
}

.detailed-weather-icon {
    width: 225px;
    height: 170px;
}

.detailed-weather-footer {
    font-size: 38px;
    color: black;
    margin-top: 29px;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

.second-line {
    width: 46%;
    margin-top: -36px;
    border: none;
    height: 1px;
    background-color: rgb(237,237,237);
}

#individual-detailed-weather-icon {
    width: 39px;
    margin-top: 20px;
    margin-left: 47%;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    background-image: url('/static/Images/point-down-512.png');
    background-color: transparent;
    background-position: center;
    border: none;
    height: 45px;
    cursor: pointer;
}

.weather-main-parameters {
    width: fit-content;
    margin-left:85px;
    display: block;
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
}

.weather-parameters-table {
    margin: 0 20px;                 
    border-collapse: collapse;      
}

.weather-parameters-table td {
    padding: 3px; 
    margin-bottom: 5px;
}

.weather-row {
    border-bottom: 6px solid transparent; 
}

.weather-parameters-table td:first-child {
    text-align: right;      
    font-size: 20px;   
    border-bottom: none;      
}

.weather-parameters-table td:last-child {
    text-align: left;      
    font-size: 20px;
    font-weight: bold;         
}

/*first chart container*/
#highChartContainer {
    width: 980px;
    height: 380px;
    margin-top: 30px;
}

/*second chart container*/
#hourlyWeatherChartContainer {
    width: 980px;
    height:439px;
    margin-top: 41px;
}