<?php header("Content-type: text/css; charset: UTF-8"); ?>
*{
  box-sizing:border-box;
  scrollbar-width:thin !important;
}
body.app{
  display:block;
  position:relative !important;
  top:0px;
  left:0px;
  width:100vw;
  height:calc(100vh - 20px);
  background-color:rgba(207,207,207,1);
}
/* login page */
    .login-form-section{
      width:100%;
      text-align:center;
    }
          .login-label{
            width:120px;
            display:inline-block;
            padding:.5em;
            text-align: right;
          }
          .login-field{
            width:calc(80% - 120px);
          }
          .login-message{
            width:80%;
            text-align: center;
            margin:auto;
            color:red;
          }
          .login-information{
            width:80%;
            text-align: center;
            margin:auto;
            color:black;
          }
          .login-link{
            width:80%;
            text-align: right;
            margin:auto;
          }
/* login page */

/* for display page */
    .univis-indent{
      margin-left:20px;
      position:relative;
      width:calc(100% - 20px);
    }
    .univis-code{
      margin-top:10px;
      margin-bottom:10px;
      margin-right:10px;
      background-color: lightgray;
      padding:10px;
      word-wrap: normal;
      max-width:600px;
      max-height:150px;
      overflow:auto;
    }
/* for display page */

/* layouts */
      body{
        margin:0px;
        padding:0px;
        font-family: var(--default_font);
      }
      /* header */
      .header{
        position:absolute;
        top:0px;
        left:0px;
        padding:0px;
        width:100%;
        height:5em;
        text-align:center;
        background: var(--header_background_color);
        background: var(--header_background_gradient);
        box-shadow: 0em 0em .5em .5em var(--header_box_shadow);
        z-index: 9;
        color:black;
      }

            .header-system-info{
              position:relative;
              display:inline-block;
              width:65px;
              height:65px;
              padding:0px;
              box-sizing:border-box;
              vertical-align:top;
            }
                  

                  #dashboardNavigation{
                    display:none;
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    font-size:28px;
                    color:var(--header_system_name_color);
                  }
                  #systemLogo{
                    display:none;
                    position:relative;
                    vertical-align:middle;
                    width:100%;
                    height:100%;
                    border:1px solid #ccc;
                  }
                        #systemLogo img{
                          object-fit:cover;
                          max-width:100%;
                          max-height:100%;
                          position:absolute;
                          top:50%;
                          left:50%;
                          transform:translate(-50%,-50%);
                        }


            .header-page-info{
              display:inline-block;
              text-align: center;
              overflow:hidden;
              height:80px;
              width:calc(100% - 160px);
              box-sizing:border-box;
              vertical-align:top;
            }
                  #systemName{
                    font-size: 1.5em;
                    max-height:2.3em;
                    font-weight: bold;
                    text-shadow:5px 5px 5px rgba(92,92,92,.5);
                    color:var(--header_system_name_color);
                    overflow: hidden;
                  }
                  #pageName{
                    position:absolute;
                    top:3.4em;
                    left:50%;
                    transform: translateX(-50%);
                    font-size: 1em;
                    overflow:hidden;
                    vertical-align: bottom;
                    font-weight: bold;
                    color:var(--header_page_name_color);
                    white-space: nowrap;
                  }

            .header-login-info{
              position:relative;
              display:inline-block;
              width:65px;
              height:65px;
              color:#a98751;
              text-align:center;
              box-sizing:border-box;
              vertical-align:top;
            }
            <?php
            if(!config('login')){
              ?>
              .header-login-info{display:none;}
              <?php
            }
             ?>
                  #loginUserbutton{
                    display:block;
                    width:40px;
                    height:40px;
                    margin:auto;
                    box-sizing: border-box;
                    border:.1em solid #a98751;
                    border-radius: 20px;
                    padding:3px;
                    cursor:pointer;
                  }
                  #loginUserbutton i{
                    color:inherit;
                    font-size: 30px;
                  }

                  #loginUserMessage{
                    font-size: .8em;
                    text-align: center;
                    padding:3px;
                    text-align:center;
                  }

            @media only screen and (max-width: 450px){

              .header-system-info{
                width:30px;
              }

              .header-page-info{
                width:calc(100% - 80px);
              }

              .header-login-info{
                width:30px;
              }
              #loginUserbutton{
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                width:28px;
                height:28px;
              }
              #loginUserbutton i{
                font-size:30px;
              }


            }

            .user-tools{
              display:none;
              position: fixed;
              width:100%;
              height:100%;
              background-color:rgba(0,0,0,.2);
              z-index: 99999;
              padding:10px;
              box-sizing: border-box;
            }
                  .user-tools-palette{
                    display: none;
                    float:right;
                    padding:10px;
                    width:calc(100% - 10px);
                    max-width:250px;
                    background-color: white;
                    border-radius: 10px;
                    box-shadow: inset 0px 3px 4px 0px #ddd, 0px 0px 3px 1px rgb(64,64,64);
                    overflow:auto;
                    z-index:9999;
                  }
                        .user-tools-palette-close{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom: 1px solid #ddd;
                          padding:10px;
                          text-align: right;
                        }
                        .user-tools-palette-close button{
                          background-color: transparent;
                          border:none;
                          cursor:pointer;
                        }

                        .user-tools-palette-welcome{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom:1px solid #ddd;
                          padding:10px;
                        }
                              .user-tools-palette-welcome .thin{
                                display:inline-block;
                                font-size: 1em;
                                font-weight:lighter;
                              }
                              .user-tools-palette-welcome .thick{
                                display:inline-block;
                                margin-left:5px;
                                font-size: 1.3em;
                                font-weight:bolder;
                              }
                        .user-tools-palette-tools{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom:1px solid #ddd;
                          padding:10px;
                        }
                              .user-tools-palette-tools button{
                                width:100%;
                                text-align: left;
                              }

                        .user-tools-palette-logout{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom:1px solid #ddd;
                          padding:10px;
                        }
                              .user-tools-palette-logout button{
                                width:100%;
                                text-align: left;
                              }

                        .user-tools-palette-loggedinTime{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          padding:10px;
                          text-align: right;
                          font-size: .8em;
                        }

            .dashboard-nav{
              display:none;
              position: fixed;
              width:100%;
              height:100%;
              background-color:rgba(0,0,0,.2);
              z-index: 99999;
              padding:10px;
              box-sizing: border-box;
            }
                  .dashboard-nav-palette{
                    display: none;
                    float:left;
                    padding:10px;
                    width:calc(100% - 10px);
                    max-width:250px;
                    background-color: white;
                    border-radius: 10px;
                    box-shadow: inset 0px 3px 4px 0px #ddd, 0px 0px 3px 1px rgb(64,64,64);
                    overflow:auto;
                    z-index:9999;
                  }
                        .dashboard-nav-palette-close{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom: 1px solid #ddd;
                          padding:10px;
                          text-align: right;
                        }
                        .dashboard-nav-palette-close button{
                          background-color: transparent;
                          border:none;
                          cursor:pointer;
                        }

                        .dashboard-nav-palette-messages{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom:1px solid #ddd;
                          padding:10px;
                        }
                              .dashboard-nav-palette-messages .dashboard-nav-button{
                                color:var(--messages-color);
                              }

                        .dashboard-nav-palette-modules{
                          display:block;
                          box-sizing: border-box;
                          width:100%;
                          border-bottom:1px solid #ddd;
                          padding:10px;
                        }

                        .dashboard-nav-button{
                          position:relative;
                          display:inline-block;
                          width:40px;
                          height:40px;
                          font-size:19px;
                          box-sizing:border-box;
                          margin:3px;
                          vertical-align:top;
                          padding:11px;
                        }
                              .dashboard-nav-button i{
                                display:block;
                                width:19px;
                                height:19px;
                              }
                              .dashboard-nav-button-indicator{
                                position:absolute;
                                top:-5px;
                                right:-5px;
                                width:14px;
                                height:14px;
                                border-radius:10px;
                                background-color:red;
                                color:white;
                                text-align:center;
                                font-size:10px;
                                padding:2px;
                              }


            #changePasswordModal{

            }
                  #changePasswordModal .modal-body{
                    width:100%;
                    text-align: center;
                  }

                  #changePasswordModal .modal-body label{
                    display: inline-block;
                    width:150px;
                    text-align: right;
                  }
                  #changePasswordDetails{
                    color:#aaa;
                    font-size: .7em;
                  }
                  #changePasswordMessage{
                    color:red;
                    font-size: .8em;
                  }

      /* header */
      /* launch screen */

            .launch-content{
              position:absolute;
              left:0px;
              top:5em;
              width:100%;
              height:calc(100% - 7.5em);
              background: var(--content_background_color);
              background: var(--content_background_gradient);
              color:var(--content_text_color);
              overflow:auto;
              scrollbar-color:var(--scrollbar_thumb_color) var(--scrollbar_track_color) !important;
              scrollbar-width:thin !important;
            }
            .lauch-content.app{
              height:calc(100% - 10.7);
            }

            <?php
            $cm = new ColorManager;

            if(isset($_SESSION["username"])){
              $dashboard = getData('users', 'dashboard', ["username"=>$_SESSION["username"]]);
              if(isset($dashboard["settings"])){
                $dcolor = $dashboard["settings"]["background-color"];
              }else{
                $dcolor = "#ffffff";
              }
            }else{
              $dcolor = "#ffffff";
            }
              ?>
      :root{
        --content_background_color:<?php echo $dcolor;?>;
        --content_background_gradient: linear-gradient(45deg, <?php echo $dcolor;?> 0%, <?php echo $cm->bkgOffset($dcolor);?> 100%);
        --content_text_color:<?php echo $cm->isLight($dcolor)?"black":"white";?>;
        --opaque_text_color:<?php echo $cm->isLight($dcolor)?"black":"white";?>;
        --outlined_text_color:<?php echo $cm->isLight($dcolor)?"black":"white";?>;
        --dashboard-option-text:<?php echo $cm->isClose($dcolor, "#548149")?$cm->isLight($dcolor)?"black":"white":"#548149";?>;
        --messages-color:<?php echo ($cm->isClose($dcolor, "#AC9813")?$cm->isLight($dcolor)?"black":"white":"#AC9813")." !important";?>;
        --dashboard-ribbon-background:<?php echo $cm->ribbonColor($dcolor);?>;
        --dashboard-ribbon-text:<?php echo $cm->isLight($dcolor)?"black":"white";?>;
        --qr-button-color:<?php echo $cm->isLight($dcolor)?"black":"white";?>;
        --scrollbar_thumb_color:<?php echo $dcolor;?>;
        --scrollbar_track_color:<?php echo $cm->hexColor($dcolor, $cm->isLight($dcolor)?-100:100);?>;
      }

            .launch-tile{
              display:inline-block;
              text-align: center;
              position:relative;
              border:none;
              border-radius: .25em;
              cursor:pointer;
              vertical-align: middle;
            }

            .launch-tile-content{
              display:block;
              text-align: center;
              height:8em;
              box-sizing: border-box;
              padding:15px !important;
              color:var(--content_text_color);
            }
            .launch-tile-content-active{
              transform:translateY(1px) !important;
            }
                  .launch-tile-image{
                    display:block;
                    margin: auto;
                    width:5em;
                    height:5em;
                    box-sizing: border-box;
                  }
                  .launch-tile-title{
                    display:block;
                    font-size: .9em;
                    height:2.2em;
                    box-sizing: border-box;
                  }

                  .tile-opaque{
                    background:none;
                    background-color:transparent;
                    border-radius:1em;
                    cursor:pointer;
                    color:var(--opaque_text_color);
                    font-size:15px;
                    padding:5px;
                    font-weight:bold;
                    text-decoration:none;
                  }
                  .tile-opaque:hover{
                    color:var(--opaque_hover_text_color);
                  }

                  .tile-outlined{
                    box-shadow:var(--box_shadow);
                    background:none;
                    background-color:transparent;
                    border-radius:1em;
                    cursor:pointer;
                    color:var(--outlined_text_color);
                    font-size:15px;
                    padding:5px;
                    font-weight:bold;
                    text-decoration:none;
                  }
                  .tile-outlined:hover{
                    background-color: var(--outlined_hover_color);
                    color:var(--outlined_hover_text_color);
                  }

                  .tile-green{
                    box-shadow:var(--box_shadow);
                  	background:var(--tile-green_background_color);
                  	background-color:#768d87;
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:#ffffff;
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-green:hover{
                    background:var(--tile-green_hover_color);
                  }

                  .tile-fail{
                    background:var(--fail_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--fail_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-fail:hover{
                    background-color: var(--fail_hover_color);
                  	color:var(--fail_hover_text_color);
                  }

                  .tile-success{
                    background: var(--success_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--success_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-success:hover{
                    background-color: var(--success_hover_color);
                  	color:var(--success_hover_text_color);
                  }

                  .tile-warning{
                    background: var(--warning_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--warning_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-warning:hover{
                    background-color: var(--warning_hover_color);
                  	color:var(--warning_hover_text_color);
                  }

                  .tile-information{
                    background: var(--information_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--information_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-information:hover{
                    background-color: var(--information_hover_color);
                  	color:var(--information_hover_text_color);
                  }

                  .tile-active{
                    background: var(--active_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--active_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-active:hover{
                    background-color: var(--active_hover_color);
                  	color:var(--active_hover_text_color);
                  }

                  .tile-inactive{
                    background: var(--inactive_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--inactive_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-inactive:hover{
                    background-color: var(--inactive_hover_color);
                  	color:var(--inactive_hover_text_color);
                  }

                  .tile-light{
                    background: var(--light_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--light_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-light:hover{
                    background-color: var(--light_hover_color);
                  	color:var(--light_hover_text_color);
                  }

                  .tile-dark{
                    background: var(--dark_background_color);
                    box-shadow:var(--box_shadow);
                  	border-radius:1em;
                  	border:1px solid #ddd;
                  	cursor:pointer;
                  	color:var(--dark_text_color);
                  	font-size:15px;
                    padding:5px;
                  	font-weight:bold;
                  	text-decoration:none;
                  }
                  .tile-dark:hover{
                    background-color: var(--dark_hover_color);
                  	color:var(--dark_hover_text_color);
                  }


            .launch-tile-badges{
              position:absolute;
              bottom:0em;
              right:0em;
              padding:.2em;
            }
                  .launch-tile-badge{
                    display:block;
                    border:none;
                    border-radius:.5em;
                    padding:.2em;
                  }
                  .badge-fail{
                    color: #fff;
                    background: var(--fail_background_color);
                    box-shadow: 0px 0px .03em .08em var(--fail_box_shadow);
                  }
                  .badge-success{
                    color: #fff;
                    background: var(--success_background_color);
                    box-shadow: 0px 0px .03em .08em var(--success_box_shadow);
                  }
                  .badge-warning{
                    color: #fff;
                    background: var(--warning_background_color);
                    box-shadow: 0px 0px .03em .08em var(--warning_box_shadow);
                  }
                  .badge-information{
                    color: #000;
                    background: var(--information_background_color);
                    box-shadow: 0px 0px .03em .08em var(--information_box_shadow);
                  }
                  .badge-active{
                    color: #fff;
                    background: var(--active_background_color);
                    box-shadow: 0px 0px .03em .08em var(--active_box_shadow);
                  }
                  .badge-inactive{
                    color: #fff;
                    background: var(--inactive_background_color);
                    box-shadow: 0px 0px .03em .08em var(--inactive_box_shadow);
                  }
                  .badge-light{
                    color: #000;
                    background: var(--light_background_color);
                    box-shadow: 0px 0px .03em .08em var(--light_box_shadow);
                  }
                  .badge-dark{
                    color: #fff;
                    background: var(--dark_background_color);
                    box-shadow: 0px 0px .03em .08em var(--dark_box_shadow);
                  }


      /* launch screen */
      /* page screen */
          .page-content{
            position:absolute;
            left:0px;
            top:5em;
            width:100%;
            height:calc(100% - 7.8em);
            padding-top:2.5em;
            background: var(--content_background_color);
            background: var(--content_background_gradient);
            color:var(--content_text_color);
            overflow:auto;
          }
          .page-content.app{
            height:calc(100% - 11);
          }
      /* page screen */
      /* footer */

      .footer{
        position: absolute;
        display:none;
        padding:0px;
        margin:0px;
        left:0px;
        bottom:0px;
        width:100%;
        height:2.5em;
        background: var(--footer_background_color);
        background: var(--footer_background_gradient);
        box-shadow: 0em 0em .5em .5em var(--footer_box_shadow);
        overflow: hidden;
      }
            .time-tab{
              display:inline-block;
              box-sizing: border-box;
              text-align: center;
              color:var(--time_tab_color);
              font-size: 1em;
              font-weight: 100;
              height:100%;
              width:calc(100% - 309px);
              vertical-align: top;
            }
            @media only screen and (max-width: 500px){
              .time-tab{
                font-size: .7em;
              }
            }
      .footer.web-only{
        display:block;
      }
      .footer.app-only{
        display:none;
        height:2.5em;
        box-shadow:none !important;
      }
      .footer-option{
        display:inline-block;
        vertical-align:top;
        font-size:28px;
        padding:4px 5px;
        width:calc(100% / 7);
        border-right:1px solid darkgray;
        text-align:center;
        box-shadow:none !important;
      }
      .footer-option:last-child{
        border-right:none;
      }
      .footer-option i{
        display:block;
        margin:auto;

        width:28px;
        height:28px;
      }

      
      .loading-indicator{
        display:none;
        position:absolute;
        padding-top:50%;
        top:0px;
        left:0px;
        width:100vw;
        height:100vh;
        background-color:rgba(0,0,0,.5);
        z-index:99;
      }
          .loading-indicator-inner{
            display:block;
            width:40px;
            height:40px;
            margin:auto;
            font-size:40px;
            color:white;
            -webkit-animation: spin 1s linear infinite; /* Safari */
            animation: spin 2s linear infinite;
          }
          
      /* footer */
/* layouts */

/* developer-tab */
.developer-tab{
  display: inline-block;
  box-sizing:border-box;
  height:100%;
  width:150px;
  text-align: right;
  padding:0em 0em;
  border-left:.1em solid #ccc;
  cursor:pointer;
  font-size: .7em;
  color:var(--developer_tab_color);
  vertical-align: top;
}
    .developerTabName{
      display:inline-block;
      height:100%;
      text-align: right;
      padding-left:5px;
      padding-right:5px;
    }
    .developerTabImage{
      display:inline-block;
      height:100%;
      padding-left:5px;
      padding-right:5px;
    }
          .developerTabImage img{
            height:90%;
          }
          .developerTabImage button{
            padding: 2px 4px;
          }
/* developer-tab */

/* loadingSpinner */
.loadingSpinner{
  position:relative;
  left:0px;
  top:0px;
  display:block;
  width:100%;
  height:100%;
  background-color:rgba(50,50,50,.8);
  z-index:99999999;
}
      .loadingSpinnerPalette{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        text-align:center;
      }
      .loadingSpinnerMessage{
        display:block;
        color:white;
        font-size:16px;
      }
      .loadingSpinnerCircle{
        border: 8px solid darkgray;
        border-radius: 50%;
        border-top: 8px solid white;
        width: 80px;
        height: 80px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
      }
      /* Safari */
      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
/* loadingSpinnter */


/* weather-tab */
.weather-tab{
  display:inline-block;
  box-sizing:border-box;
  width:150px;
  height:100%;
  text-align: center;
  border-right:.1em solid #ccc;
  cursor:pointer;
  font-size: 1em;
  vertical-align: top;
}

.weatherTab{
  width:100%;
  height:100%;
  background-color:#ddd;
  background-color:#5C5C5A;
  float:left;
}
      .weatherTabDayName{
        display:inline-block;
        vertical-align: top;
        height:100%;
        padding:2px;
        box-sizing: content-box;
        text-align: center;
        font-size: 1.5em;
        color:var(--weather_tab_day_name_color);
      }
      .weatherTabTempPrecp{
        display:inline-block;
        vertical-align: top;
        padding-left:10px;
        padding-right:10px;
        height:100%;
        box-sizing:border-box;
        font-size: .8em;
      }
            .weatherTabTempDay{
              display:block;
              color:#fff4d9;
              text-align: left;
            }
            .weatherTabTempNight{
              display:block;
              color:#28527b;
              text-align: left;
            }

            .weatherTabDayPrecipitation{
              display:block;
              color:var(--weather_tab_precipitation_color);
              padding-left:5px;
            }
                  .weatherTabDayPrecipitation i{
                    display:inline-block;
                    box-sizing: border-box;
                    height:15px;
                    width:15px;
                    padding:0px;
                  }

      .weatherTabImage {
        display:inline-block;
        vertical-align: top;
        height:100%;
      }
            .weatherTabImage i{
              display:block;
              box-sizing: border-box;
              height:30px;
              width:30px;
              padding:1px;
            }


#weather{
  position:fixed;
  display:none;
  left:0px;
  top:0px;
  z-index: 9999;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,.5);
}
      #weatherPalette{
        position:absolute;
        display:none;
        width:450px;
        height:320px;
        background-color: rgb(240,240,240);
        border-radius: 10px;
        left:10px;
        bottom:10px;
      }

      #weatherClose{
        position:absolute;
        right:5px;
        top:5px;
        background-color: transparent;
        border:none;
        color: blue;
        text-decoration: none;
        cursor:pointer;
      }
      #weatherCity{
        width:100%;
        font-size: 1.5em;
        font-weight: 200;
        text-align: center;
      }
      #weatherTitle{
        width:100%;
        font-size: 1em;
        font-weight: 100;
        text-align:center;
      }

      .weatherDay{
        display:block;
        width:100%;
        height:50px;
        border-bottom:.1em solid lightgray;
        box-sizing: border-box;
      }
      .weatherDay:last-child{
        border:none;
      }
            .weatherDayName{
              display:inline-block;
              vertical-align: top;
              height:50px;
              width:55px;
              padding-top:12px;
              padding-bottom:12px;
              box-sizing: content-box;
              text-align: center;
              font-size: 1.5em;
              color:gray;
            }
            .weatherDayTemp{
              display:inline-block;
              vertical-align: top;
              height:50px;
              width:50px;
              text-align:right;
              padding:10px;
              box-sizing: border-box;
            }
                  .weatherDayTempDay{
                    display:block;
                    height:24px;
                    width:50px;
                    font-size: 1em;
                    color:#bc7820;
                    box-sizing: border-box;
                  }
                  .weatherDayTempNight{
                    display:block;
                    height:24px;
                    width:50px;
                    font-size: .7em;
                    color:#28527b;
                    box-sizing: border-box;
                  }
            .weatherDayCondition{
              display:inline-block;
              vertical-align: top;
              box-sizing: border-box;
              text-align: center;
              height:50px;
              width:calc(100% - 215px);
              padding:10px;
              font-size:.8em;
              font-weight: 100;
            }
            .weatherDayPrecipitation{
              display:inline-block;
              vertical-align: top;
              text-align: center;
              padding-top:5px;
              height:50px;
              width:60px;
              font-size: 1.2em;
              box-sizing: border-box;
            }
                  .weatherDayPrecipitation i{
                    transform:translateY(8px);
                    display:inline-block;
                    box-sizing: border-box;
                    height:25px;
                    width:25px;
                    padding:0px;
                  }

            .weatherDayIcon{
              display:inline-block;
              vertical-align: top;
              padding:8px;
              box-sizing: border-box;
              height:50px;
              width:50px;
            }
                  .weatherDayIcon i{
                    display:inline-block;
                    box-sizing: border-box;
                    height:30px;
                    width:30px;
                    padding:0px;
                  }

          @media only screen and (max-width: 450px){
            #weatherPalette{
              width:calc(100% - 20px);
            }
          }
/* weather */

/* custom menu */

.custom-menu{
  position:absolute;
  z-index:99999999;
  width:100vw;
  height:100vh;
  top:0px;
  left:0px;
  background-color:rgba(0,0,0,.5);

}

.custom-menu-inner{
  position:absolute;
  top:40px;
  left:40px;
  background-color:white;
  padding:0px;
  box-shadow:1px 1px 1px .5px rgba(0,0,0,.8);
  border-radius:10px;
  min-width:120px;
}

.custom-menu-inner button{
  display:block;
  width:100%;
  padding:4px 8px;
  background-color:transparent;
  color:black;
  text-align:left;
  border:none;
  outline:none;
}

.custom-menu-inner button:first-child{
  padding-top:8px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

.custom-menu-inner button:last-child{
  padding-bottom:8px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}

.custom-menu-inner button:hover{
  background-color:blue;
  color:white;
}


/* custom menu */


37527