@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 2.75rem;
    --normal-font-size: 1rem;
    --smaller-font-size: 0.813rem;
  }
}

@media screen and (max-width: 400px),
screen and (max-height: 700px) {
  .Headtag {
    display: none;
  }

  .accordion {
    display: block;
  }

  #paramUG {
    display: none;
  }

  .form_body {
    top: 25%;
  }

  .login_box {
    padding: 57px 35px 23px;
  }
}

@media screen and (min-width: 401px) and (min-height: 701px) {
  .Headtag {
    display: block;
    color: azure;
  }

  .accordion {
    display: none;
  }

  #paramUG {
    display: block;
  }

  #paramOH {
    display: block;
  }

  .form_body {
    top: 35%;
  }
}

/* information media */
@media screen and (min-width: 968px) {
  .information_box {
    width: 55rem;
    height: 43rem;
  }

  #ST_days {
    width: 20rem;
  }

  .schedule_box {
    width: 33rem;
    min-height: 28rem;
    height: auto;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }

  #sch_box {
    min-height: 28rem;
    height: auto;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }

  /* Keep SCtime/SCrequired fields in strict label-input rows on larger screens. */
  #SCtime,
  #SCrequired {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
  }

  #SCtime > .schedule-field-title,
  #SCrequired > .schedule-field-title {
    flex: 0 0 220px;
    max-width: 220px;
    margin: 0;
    white-space: normal;
  }

  #SCtime > .wrap-login_input,
  #SCrequired > .wrap-login_input {
    flex: 1 1 calc(100% - 234px);
    min-width: 220px;
    margin-bottom: 0 !important;
  }

  #SCtime #STstart,
  #SCtime #STstop,
  #SCrequired #WDT,
  #SCrequired #Attempts,
  #SCrequired #Interval {
    width: auto;
    top: 0;
    left: 0;
    bottom: 0;
  }

  #SchTAcc {
    display: none;
  }

  #SchRAcc {
    display: none;
  }

  #schedule_wrap {
    top: 0rem;
  }

  #decor_net {
    display: block;
  }

  #netAcc {
    display: none;
    margin-bottom: 0px;
  }

  #threAcc {
    display: none;
    margin-bottom: 0px;
  }

  #peakAcc {
    display: none;
    margin-bottom: 0px;
  }

  #paramAcc {
    display: none;
    margin-bottom: 0px;
  }

  #scheduleAcc {
    display: none;
    margin-bottom: 0px;
  }

  #decor_refill {
    display: block;
  }

  #decor_peak {
    display: block;
  }

  .decor {
    top: 1rem;
  }

  .decor1 {
    top: 1rem;
    margin-top: 27px;
  }

  .seperator {
    display: block;
    bottom: 32rem;
  }

  #param_card {
    display: none;
  }

  #schedule_card {
    display: none;
  }

  .seperator {
    display: block;
  }
}

@media screen and (max-width: 967px) and (min-width: 850px) and (min-height: 701px) {
  .information_section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
 .login_title {
    font-size: 28px;
    
  }
  #information_title {
    font-size: 28px;
    left: 37.5%;
  }
  #SchTAcc {
    display: none;
  }

  #SchRAcc {
    display: none;
  }

  .information_box {
    width: 51rem;
    height: 40rem;
  }

  .schedule_box {
    width: 33rem;
    min-height: 28rem;
    height: auto;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }

  #sch_box {
    min-height: 28rem;
    height: auto;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }

  /* Keep SCtime/SCrequired fields in strict label-input rows on medium-large screens. */
  #SCtime,
  #SCrequired {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
  }

  #SCtime > .schedule-field-title,
  #SCrequired > .schedule-field-title {
    flex: 0 0 220px;
    max-width: 220px;
    margin: 0;
    white-space: normal;
  }

  #SCtime > .wrap-login_input,
  #SCrequired > .wrap-login_input {
    flex: 1 1 calc(100% - 234px);
    min-width: 220px;
    margin-bottom: 0 !important;
  }

  #SCtime #STstart,
  #SCtime #STstop,
  #SCrequired #WDT,
  #SCrequired #Attempts,
  #SCrequired #Interval {
    width: auto;
    top: 0;
    left: 0;
    bottom: 0;
  }

  #schedule_wrap {
    top: 0rem;
  }

  #decor_net {
    display: block;
  }

  #netAcc {
    display: none;
    margin-bottom: 0px;
  }

  #threAcc {
    display: none;
    margin-bottom: 0px;
  }

  #peakAcc {
    display: none;
    margin-bottom: 0px;
  }

  #paramAcc {
    display: none;
    margin-bottom: 0px;
  }

  #scheduleAcc {
    display: none;
    margin-bottom: 0px;
  }

  #decor_refill {
    display: block;
  }

  #netHead {
    display: flex;
  }

  #refillHead {
    display: flex;
  }

  #PT_heading {
    display: flex;
  }

  #ST_heading {
    display: flex;
  }

  #paramHead {
    display: flex;
  }

  #decor_peak {
    display: block;
  }

  #inform_close {
    left: 0rem;
  }

  .decor {
    top: 1px;
  }

  .decor1 {
    top: 1px;
    margin-top: 29px;
  }

  .seperator {
    display: block;
    bottom: 31.5rem;
  }

  #param_card {
    display: none;
  }

  #schedule_card {
    display: none;
  }
}
@media screen and (min-width: 850),
screen and (min-height: 701) {
  #WDT{
    top: -13.84rem
  }
}
@media screen and (max-width: 849px),
screen and (max-height: 700px) {
  
  .information_body {
    position: absolute;
    top: 25%;
  }
  .login_title {
    font-size: 28px;
 
  }
  #information_title {
    font-size: 28px;
    left: 25%;
  }
  #icons {
    display: none;
  }

  /* #information {
        top: 20%;
        width: 345px;
        height: 32rem;
        padding-left: 10px;
        padding-right: 10px;
    } */

  #inform_close {
    left: 0rem;
  }

  .seperator {
    display: none;
    margin-top: 3px;
    bottom: 0rem;
    right: 0;
    float: none;
  }

  #netHead {
    display: none;
  }

  #param_card {
    display: block;
  }

  #schedule_card {
    display: block;
  }

  #refillHead {
    display: none;
  }

  #PT_heading {
    display: none;
  }

  #ST_heading {
    display: none;
  }

  #paramHead {
    display: none;
  }

  #decor_net {
    margin-top: 10px;
  }

  #decor_refill {
    display: none;
    margin-top: 10px;
  }

  #decor_peak {
    display: none;
    margin-top: 10px;
  }

  #decor_param {
    display: none;
    margin-top: 10px;
  }

  #decor_schedule {
    display: none;
    margin-top: 10px;
  }

  #netAcc {
    display: block;
    margin-bottom: 0px;
  }

  #threAcc {
    display: block;
    margin-bottom: 0px;
  }

  #peakAcc {
    display: block;
    margin-bottom: 0px;
  }

  #paramAcc {
    display: block;
    margin-bottom: 0px;
  }

  #scheduleAcc {
    display: block;
    margin-bottom: 0px;
  }

  .information_box {
    padding: 18px 10px;
    padding-right: 2rem;
    width: 390px;
    height: 38rem;
  }

  .decor {
    top: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 2px;
    border-radius: 1rem;
    margin-top: 3px;
    width: 100%;
  }

  .decor1 {
    top: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0px;
    margin-top: 3px;
    border-radius: 1rem;
    width: 100%;
  }

  .headings3 {
    margin: 0px;
  }

  /* scheduling section */
  .schedule_box {
    width: 390px;
    min-height: 52rem;
    height: auto;
  }
  #sch_box{
    min-height: 50rem;
    height: auto;
  }

  #schedule_slider_inline:before{
    height: 26px;
    width: 26px;
    bottom: 4px;
  }

  #schedule_slider_auto:before{
    height: 26px;
    width: 26px;
    bottom: 4px;
  }

  #schedule_slider:before{
    height: 26px;
    width: 26px;
    bottom: 4px;
  }
  

  /* input:checked + #schedule_slider_inline:before{
    transform: translateX(20px);
  }
  input:checked+#schedule_slider_auto:before{
    transform: translateX(20px);
  }
  input:checked+#schedule_slider:before{
    transform: translateX(20px);
  }


  #enableInlineButton{
    display: block;
    width:44px;
    height:23px;
    left: 88%;
    bottom: 2.75rem;
  }

  #InlineEnableLabel {
    margin-top: 0rem;
    bottom: -0.6rem;
  }

  #enableAutoButton{
    display: block;
    width:44px;
    height:23px;
    left: 88%;
    bottom: 3.75rem;
  }
  #AutoEnableLabel {
    margin-top: 0rem;
    bottom: 0.4rem;
  }
  #enableScheduleButton{
    display: block;
    width:44px;
    height:23px;
    left: 88%;
    bottom: 4.75rem;
  }
  #schedule_title{
    margin-top: -2px;
  }
  
  #enableInlineButton {
    display: block;
    position: relative;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  #InlineEnableLabel{
    position: relative;
    margin-top: 0rem;
  }

  #enableAutoButton {
    display: block;
    position: relative;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
  }

  #enableScheduleButton {
    position: relative;
  }

  input:checked + #schedule_slider_inline:before{
    transform: translateX(26px);
  }
  input:checked + #schedule_slider_auto:before{
    transform: translateX(26px);
  }
  input:checked + #schedule_slider:before{
    transform: translateX(26px);
  }

  #schedule_title{
    margin-top: -2px;
  }

  #InlineEnableLabel,
  #AutoEnableLabel,
  #ScheduleEnableLabel {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 0;
    margin-bottom: .4rem;
  }

  #enableInlineButton,
  #enableAutoButton,
  #enableScheduleButton {
    display: block;
    position: relative;
    width: 44px;
    height: 23px;
    left: 0;
    bottom: 0;
    margin-top: .35rem;
    margin-bottom: 1.35rem;
  }



  #SchTAcc {
    position: relative;
    top: 0;
    margin-bottom: 0.5rem;
  }

  #SchRAcc {
    display: none;
    position: relative;
    width: 100%;
    top: 0;
    margin-bottom: 0.75rem;
  }

  .schedule_body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    align-items: flex-start;
    padding: 10px;
  }

  #drop_down {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-bottom: 1rem;
  }
  /* #sbSave{
    position: relative;
    bottom: 0;
    margin-top: 1rem;
  } */
   
  #sbSave{
    position: static;
    margin-top: 1rem;
    margin-bottom: 0;
  }
  /* #days{
    display: none;
  } */

  #STstart {
    position: static;
    line-height: 1;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  #STstop {
    position: static;
    left: auto;
    line-height: 1;
    width: 100%;
    top: auto;
    bottom: auto;
    margin-bottom: 0.5rem;
  }

  #WDT {
    position: static;
    width: 100%;
    top: auto;
    bottom: auto;
    left: auto;
    margin-bottom: 0.5rem;
  }

  #Attempts {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    top: auto;
    margin-bottom: 0.5rem;
  }

  #Interval {
    position: static;
    left: auto;
    width: 100%;
    bottom: auto;
    top: auto;
    margin-bottom: 0.5rem;
  }

  .schedule_box,
  #sch_box {
    width: min(390px, calc(100vw - 20px));
    min-height: auto;
    height: auto;
  }

  #schedule_time-settings-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-column-gap: 0.75rem !important;
    grid-row-gap: 0.55rem !important;
    align-items: center !important;
    width: 100%;
  }

  #InlineEnableLabel,
  #AutoEnableLabel,
  #ScheduleEnableLabel {
    margin: 0;
    grid-column: 1;
  }

  #enableInlineButton,
  #enableAutoButton,
  #enableScheduleButton {
    grid-column: 2;
    justify-self: end;
    margin: 0;
  }

  #SchTAcc,
  #SCtime,
  #SchRAcc,
  #SCrequired,
  #drop_down,
  #sbSave {
    grid-column: 1 / -1;
  }

  #sch_box {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 429px) {
  .all_cards {
    display: contents;
    flex-wrap: wrap;
    height: 0px;
    /* display: grid; */
    grid-template-columns: repeat(2, 2fr);
  }

  .tank__card {
    margin-top: 1rem;
  }

  .tank__card_1 {
    margin-top: 1rem;
  }

  #mode_check_ug {
    font-size: 13px;
    left: 17px;
    bottom: 45px;
  }

  #mode_check_oh {
    font-size: 13px;
    left: 17px;
    bottom: 45px;
  }

  .tank__pill {
    height: 180px;
    width: 80px;
  }

  .tank__pill_1 {
    height: 180px;
    width: 80px;
  }
}

@media screen and (max-width: 319px) {
  .settings-section {
    width: 100%;
  }

  .login_title {
    font-size: 20px;
  }

  /* 
    #param_close {
        left: 10.5rem;
    } */

  .tank__card {
    height: 200px;
    width: auto;
    padding: 0.3rem 0.6rem;
  }

  .tank__pill {
    width: 80px;
  }

  .tank__percentage {
    font-size: 25px;
  }

  .tank__card_1 {
    height: 200px;
    width: auto;
    padding: 0.3rem 0.6rem;
  }

  .tank__pill_1 {
    width: 80px;
  }

  .tank__liquid_1 {
    height: 20px;
  }

  .tank__liquid {
    height: 20px;
  }

  .tank__percentage_1 {
    font-size: 25px;
  }

  .tank__status {
    bottom: 0.5rem;
  }

  .tank__status_1 {
    bottom: 0.5rem;
  }

  .tank__text {
    font-size: 15px;
    bottom: 2rem;
  }

  .switch {
    bottom: 1rem;
  }

  .settings-icon-button {
    width: 40px;
    height: 40px;
  }

  .settings-icon-button1 {
    width: 180px;
  }

  .stlx {
    top: 1.65rem;
    left: 3.8rem;
    font-size: 1rem;
  }

  .user_name {
    /* top: 4rem;
      right: 1rem;
      font-size: 1rem; */

    top: 4rem;
    right: 1rem;
    max-width: calc(100% - 5rem);
    /* Limit the width to the available space */
    text-align: right;
    /* Align text to the right within the p tag */
    font-size: 1rem;
  }

  #navigation {
    z-index: 0;
    top: -6px;
  }

  #mode_check_ug {
    font-size: 10px;
    left: 8px;
    bottom: 30px;
  }

  #mode_check_oh {
    font-size: 10px;
    left: 8px;
    bottom: 30px;
  }

  .UG_show_height_bracket {
    bottom: 2.5rem;
    left: 3rem;
  }
}

/* @media screen and (min-width: 320px) and (max-width:330px) {
    #param_close {
        left: 11rem;
    }
}

@media screen and (min-width: 330px) and (max-width:350px) {
    #param_close {
        left: 12.2rem;
    }
} */

@media screen and (min-width: 320px) and (max-width: 429px) {
  .tank__card_1 {
    height: 220px;
    width: auto;
    padding: 0.3rem 0.9rem;
  }

  .login_title {
    font-size: 23px;
  }

  .tank__pill_1 {
    height: 180px;
    width: 80px;
  }

  .tank__liquid_1 {
    height: 36px;
  }

  .tank__percentage_1 {
    font-size: 20px;
  }

  #mode_check_ug {
    font-size: 10px;
    left: 12px;
    bottom: 35px;
  }

  #mode_check_oh {
    font-size: 10px;
    left: 12px;
    bottom: 35px;
  }

  .UG_show_height_bracket {
    bottom: 3rem;
    left: 3.4rem;
  }

  .tank__status_1 {
    bottom: 10px;
  }

  .tank__status {
    bottom: 10px;
  }
}

/* For medium devices */
@media screen and (min-width: 430px) and (max-width: 799px) {
  .tank__card_1 {
    height: 340px;
    width: auto;
    padding: 0.3rem 1.1rem;
  }
  .tank__card {
    height: 340px;
    width: auto;
    padding: 0.3rem 1.1rem;
  }
  .tank__text{
    font-size: 30px;
    bottom: 5rem;
  }

  .login_title {
    font-size: 26px;
  }

  /* .tank__pill_1 {
        height: 280px;
        width: 80px;
    } */

  .tank__liquid_1 {
    height: 56px;
  }

  .tank__percentage_1 {
    font-size: 40px;
  }
}

@media screen and (min-width: 800px) and (max-width: 3023px) and (max-height: 766px) {
  .tank__card {
    height: 300px;
    width: auto;
    padding: 0.3rem 1.2rem;
  }

  .tank__pill {
    height: 230px;
    width: 100px;
  }

  .tank__liquid {
    height: 46px;
  }

  .tank__percentage {
    font-size: 50px;
  }

  .tank__text {
    font-size: 30px;
    bottom: 4rem;
  }

  .switch {
    bottom: 3rem;
  }

  .settings-icon-button {
    width: 60px;
    height: 60px;
  }

  .settings-icon-button1 {
    width: 280px;
  }

  .stlx {
    top: 1.75rem;
    left: 5rem;
    font-size: 1.8rem;
  }

  .user_name {
    /* width: 110px;
      top: 1.75rem;
      right: 5rem;
      font-size: 1.8rem; */

    top: 2rem;
    right: 5rem;
    max-width: calc(100% - 5rem);
    /* Limit the width to the available space */
    text-align: right;
    /* Align text to the right within the p tag */
    font-size: 1.8rem;
  }

  #navigation {
    top: 10px;
  }

  /*  */
  .tank__card_1 {
    height: 300px;
    width: auto;
    padding: 0.3rem 1.2rem;
  }

 

  .tank__pill_1 {
    height: 230px;
    width: 100px;
  }

  /* .tank__text {
        font-size: 40px;
        bottom: 5rem;
    } */
  .tank__liquid_1 {
    height: 46px;
  }

  .tank__percentage_1 {
    font-size: 50px;
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) and (min-height: 766px) {
  .tank__card_1 {
    height: 400px;
    width: auto;
    padding: 0.3rem 1.2rem;
  }

  .login_title {
    font-size: 28px;
    /* left: 38.35%; */
  }

  .tank__pill_1 {
    height: 330px;
    width: 100px;
  }

  .tank__liquid_1 {
    height: 66px;
  }

  .tank__percentage_1 {
    font-size: 50px;
  }
}

/* For large devices */
@media screen and (min-width: 1024px) and (min-height: 766px) {
  .tank__card_1 {
    height: 500px;
    width: auto;
    padding: 1.5rem 2rem;
  }

  .login_title {
    font-size: 32px;
  }
  #information_title {
    font-size: 32px;
    left: 36%;
  }

  .tank__pill_1 {
    height: 400px;
    width: 120px;
  }

  .tank__liquid_1 {
    height: 80px;
  }

  .tank__percentage_1 {
    font-size: 60px;
  }
}

@media screen and (min-width: 320px) and (max-width: 429px) {
  .tank__card {
    height: 220px;
    width: auto;
    padding: 0.3rem 0.9rem;
  }

  .tank__pill {
    height: 180px;
    width: 80px;
  }

  .tank__liquid {
    height: 36px;
  }

  .tank__percentage {
    font-size: 20px;
  }

  .tank__text {
    font-size: 17px;
    bottom: 2.2rem;
  }

  .switch {
    bottom: 1.5rem;
  }

  .settings-icon-button {
    width: 45px;
    height: 45px;
  }

  .settings-icon-button1 {
    width: 165px;
    /* height: 45px; */
  }

  /* .settings-icon-button1 {
        width: 45px;
        height: 45px;
    } */

  .stlx {
    top: 1.75rem;
    left: 4rem;
    font-size: 1rem;
  }

  .user_name {
    /* top: 5rem;
      right: 10px;
      font-size: 2rem; */

    top: 4rem;
    right: 10px;
    max-width: calc(100% - 5rem);
    /* Limit the width to the available space */
    text-align: right;
    /* Align text to the right within the p tag */
    font-size: 1rem;
  }

  #navigation {
    top: -3px;
  }
}

@media screen and (max-width: 600px) and (min-width: 430px) {
  .all_cards {
    display: contents;
    flex-wrap: wrap;
    height: 0px;
    /* display: grid; */
    grid-template-columns: repeat(2, 2fr);
  }

  .tank__card {
    margin-top: 1rem;
    height: 293px;
    width: auto;
  }

  .tank__card_1 {
    margin-top: 1rem;
    height: 293px;
    width: auto;
  }

  #mode_check_ug {
    font-size: 13px;
    left: 17px;
    bottom: 45px;
  }

  #mode_check_oh {
    font-size: 13px;
    left: 17px;
    bottom: 45px;
  }

  .tank__pill {
    height: 235px;
    width: 108px;
  }

  .tank__pill_1 {
    height: 235px;
    width: 108px;
  }
  .tank__text {
    font-size: 21px;
  }
}

@media screen and (min-width: 601px) and (max-width: 799px) {
  .tank__pill {
    height: 280px;
    width: 120px;
  }

  .tank__pill_1 {
    height: 280px;
    width: 120px;
  }

  #mode_check_ug {
    font-size: 13px;
    left: 17px;
    bottom: 45px;
  }

  #mode_check_oh {
    font-size: 13px;
    left: 17px;
    bottom: 45px;
  }
}
@media screen and (min-width: 430px) and (max-width: 600px) {
  .tank__card {
    height: 285px;
    width: auto;
    padding: 0.3rem 1.1rem;
  }
  .tank__card_1 {
    height: 285px;
    width: auto;
    padding: 0.3rem 1.1rem;
  }
  .tank__text {
    font-size: 23px;
    bottom: 4rem;
  }
}
/* For medium devices */
@media screen and (min-width: 430px) and (max-width: 799px) {

  /* .tank__pill {
        height: 280px;
        width: 80px;
    } */

  .tank__liquid {
    height: 56px;
  }

  .tank__percentage {
    font-size: 40px;
  }

  .settings-icon-button {
    width: 50px;
    height: 50px;
  }

  .settings-icon-button1 {
    width: 180px;
    /* height: 50px; */
  }

  .stlx {
    top: 1.9rem;
    left: 4.3rem;
    font-size: 1.5rem;
  }

  .user_name {
    /* width: 55px;
      top: 1.9rem;
      right: 6rem;
      font-size: 1.5rem; */

    top: 2rem;
    right: 5rem;
    max-width: calc(100% - 5rem);
    /* Limit the width to the available space */
    text-align: right;
    /* Align text to the right within the p tag */
    font-size: 1.5rem;
  }

  #navigation {
    top: 6px;
  }
}

@media screen and (min-width: 430px) and (max-width: 508px) {
  .tank__text {
    font-size: 20px;
    bottom: 4rem;
  }

  .switch0 {
    bottom: 2rem;
  }

  .switch1 {
    bottom: 2rem;
  }
}

@media screen and (min-width: 509px) and (max-width: 600px) {
  .tank__text {
    font-size: 25px;
    bottom: 4rem;
  }

  .switch0 {
    bottom: 2rem;
  }

  .switch1 {
    bottom: 2rem;
  }
}

@media screen and (min-width: 601px) and (max-width: 680px) {
  .tank__text {
    font-size: 22px;
    bottom: 5rem;
  }
  .tank__card_1 {
    height: 340px;
    width: 18rem;
    padding: 0.3rem 1.1rem;
  }
  .tank__card {
    height: 340px;
    width: 18rem;
    padding: 0.3rem 1.1rem;
  } 
  .switch0 {
    bottom: 2rem;
  }

  .switch1 {
    bottom: 2rem;
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) and (min-height: 766px) {
  .tank__card {
    height: 400px;
    width: auto;
    padding: 0.3rem 1.2rem;
  }

  .tank__pill {
    height: 330px;
    width: 100px;
  }

  .tank__liquid {
    height: 66px;
  }

  .tank__percentage {
    font-size: 50px;
  }

  .tank__text {
    font-size: 40px;
    bottom: 6rem;
  }

  .switch {
    bottom: 3rem;
  }

  .settings-icon-button {
    width: 60px;
    height: 60px;
  }

  .settings-icon-button1 {
    width: 180px;
    /* height: 60px; */
  }

  .stlx {
    top: 1.75rem;
    left: 5rem;
    font-size: 1.8rem;
  }

  .user_name {
    /* width: 110px;
      top: 1.75rem;
      right: 5rem;
      font-size: 1.8rem; */

    top: 2rem;
    right: 5rem;
    max-width: calc(100% - 5rem);
    /* Limit the width to the available space */
    text-align: right;
    /* Align text to the right within the p tag */
    font-size: 1.8rem;
  }

  #navigation {
    top: 10px;
  }
}

/* For large devices */

@media screen and (min-width: 1024px) and (min-height: 766px) {
  .tank__card {
    height: 500px;
    width: auto;
    padding: 1.5rem 2rem;
  }

  .tank__pill {
    height: 400px;
    width: 120px;
  }

  .tank__liquid {
    height: 80px;
  }

  .tank__percentage {
    font-size: 60px;
  }

  .tank__text {
    font-size: 40px;
    bottom: 7rem;
  }

  .switch {
    bottom: 3rem;
  }

  .settings-icon-button {
    width: 70px;
    height: 70px;
  }

  /* .settings-icon-button1 {
        width: 70px;
        height: 70px;
    } */

  .settings-icon-button1 {
    width: 280px;
    /* height: 70px; */
  }

  .stlx {
    top: 1.85rem;
    left: 5.5rem;
    font-size: 2rem;
  }

  .user_name {
    /* width: 130px;
      top: 1.85rem;
      right: 6.5rem;
      font-size: 2rem; */
    top: 1.85rem;
    right: 5.5rem;
    max-width: calc(100% - 5rem);
    /* Limit the width to the available space */
    text-align: right;
    /* Align text to the right within the p tag */
    font-size: 2rem;
  }

  #navigation {
    top: 10px;
  }
}