/*
    Copyright (C) 2024 Nair and Associates, LLC
    All rights reserved.
    Warning: This computer program is protected by copyright and international
    treaties.  Unauthorized reproduction or distribution of this program, or any
    portion of it, may result in severe civil and criminal penalties, and will
    be prosecuted to the maximum extent possible under the law.
    Distributed under licensing agreement with Nair and Associates, LLC.
    For further information contact Nair and Associates, LLC at +1-301-529-5870
    or support@nair-assoc.com
*/

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

@media only screen and (max-width: 1125px) {
    #header-app-name-container {
      padding: 2px 0;
    }
  
    #header-search-social {
      display: block;
      height: 25px;
    }
}

@media only screen and (max-width: 1000px) {
    
    #popup-overall, #popup-cpp-alerts, #popup-cpp-edits{
        width: 70%;
        margin: 0px 15%;
        overflow: auto;
    }

    #full-screen-content{
        height: 100vh;
        overflow-y:scroll
    }

    

}

@media only screen and (max-width: 991px) {
    .container {
      width: auto;
    }
    .weather-icon-hub {
      display: none;
    }

    #login-page_relative-footer .bottom-footer-login {
      position: relative !important;
      /* background-color: #000; */
    }
}
  
@media only screen and (max-width: 940px) {
    /* Header Level 2 */
    #overall-header {
      text-align: center;
    }
  
    #header-left-side-info {
      display: inline-block;
      margin: 0 auto;
      text-align: center;
    }
  
    #header-web-functions-container {
      width: 100%;
      padding: 20px 0;
      text-align: center;
      border-top: 1px solid #8eabc9;
    }
  
    #header-app-name-container {
      padding: 2px 0;
      text-align: center;
    }
  
    #header-share-container {
    }
  
    #header-search-social {
      display: inline-block;
      margin-bottom: 0;
    }
  
    #header-customer-dropdown .simple-dropdown-content {
      right: auto;
    }
  
    #header-weather {
      text-align: left;
    }
}

/* MOBILE HEADER ACTIVATED */
@media only screen and (max-width: 860px) {
    #theme-switcher-button, #header-searchbar, #overall-header, #button-header-collapse, #header-navigation-content, #header-fixed-position{
      display:none;
    } 

    #header-navigation-container{
      height:100%;
    }

    #header-fixed-position{
      height:75px;
    }

    #header-mobile-menu{
      display:block;
    }

    .container {
      width: auto;
    }

    #full-screen-background.login-page_full-screen-background{
      height:110%;
    }

    /* Meter Data Entry ---------------------------------------*/
    .cpp-inner-panels{
      overflow: auto; 
      height: auto;
    }

    .cpp-main-panels{
        height: auto;
        width:100%;
        padding-top:15px;
        margin-bottom:30px;
        max-width:100% !important;
        flex:none !important;
    }

    .cpp-panel-header{
      padding-top:0px;
    }
}

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

    /* Login Page */

    #login-page_system-name{
      line-height:1.25em;
    }
  
    .bg-black-gradient-40 {
      background-image: none;
    }
  
    #button-sidebar-collapse-closed,
    #button-header-collapse,
    #button-sidebar-collapse-opened {
      display: none;
    }
  
    #home-container-hub,
    #left-container-hub,
    #left-container-hub-charts, #left-container-hub-archive {
      display: inline-block;
      height: auto;
      min-height: auto;
      padding-bottom: 20px;
      /* overflow: auto;
      overflow-x:hidden; */
    }
  
    .main-content-container {
      display: inline-block;
      overflow: auto;
      overflow-x: auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      padding: 0 !important;
      padding-bottom: 50px;
    }


    .login-page_request-form{
      background-color:#000000c5;
    }

    #full-screen-background.login-page_full-screen-background{
      height:110%;
    }
}
  
@media only screen and (max-width: 620px) {
    /* Header Level 3 */
    #header-logo-container,
    #header-personal-info-container {
      width: 92%;
      margin: 0 4%;
    }
  
    #header-personal-info-container {
      padding: 0;
      text-align: center;
    }
  
    #overall-header {
      text-align: center;
    }
  
    #header-left-side-info {
      display: inline-block;
      width: 100%;
      margin: 0 auto;
      text-align: center;
    }
  
    #header-web-functions-container {
      width: 100%;
      padding: 20px 0;
      text-align: center;
      border-top: none;
    }
  
    #header-app-name-container {
      padding: 2px 0;
      text-align: center;
    }
  
    #header-share-container {
    }
  
    #header-search-social {
      display: inline-block;
      margin-bottom: 0;
    }
  
    #header-customer-dropdown .simple-dropdown-content {
      right: auto;
    }
  
    #header-weather {
      text-align: center;
    }
  
    #header-weather-container {
      display: none;
    }
  
    .weather-icon {
      float: none;
    }
}
  
@media only screen and (max-width: 600px) {
    #header-main-menu-centered,
    #header-navigation-centered {
      display: none;
    }
  
    #header-mobile-menu-centered,
    #header-mobile-navigation-centered {
      display: inline-block;
    }
  
    #header-main-menu-content,
    #header-navivation-content {
      text-align: center;
    }
}

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

    /* -------------------------------------------------------*/
    /*   CPP DATA PAGE ---------------------------------------*/
    /*--------------------------------------------------------*/

    .cpp-button-text{
      font-size:14px;
    }

    .cpp-button{
      overflow:hidden;
      display:inline-block !important;
      margin:5px !important;
    }

    .cpp-button-alpha-edit, #cpp-panel-2-meter-id-3-alpha{
      display:none !important;
    }

    #main-panels-2 .cpp-input-field{
      margin: 5px 20px 30px 20px;
    }

    .panel-alt-container{
      padding-top:0px;
    }

    .cpp-panel-header{
      margin-bottom:0px;
      height:auto;
      padding:3px 15px;
    }

    .cpp-panel-header-inner{
      padding: 5px 0px;
    }

    .cpp-main-panels{
      margin-bottom:5px;
    }


    #panel-alt-container-1{
     
    }

    #panel-alt-container-0, #panel-alt-container-1, #panel-alt-container-2{
      padding:10px 0px;
    }

    #popup-cpp-edits, #popup-cpp-alerts{
      margin:auto;
      height:auto;
      width:94%;
      margin:auto 3%;
    }

    #popup-cpp-alerts-content hr{
      margin: 10px 0px;
    }

    #popup-cpp-alerts .cpp-button-alert{
      height: 50px;
      display: block;
      width: 90%;
      cursor: pointer;
      margin-bottom: 20px;
    }

    


    #popup-cpp-edits-content{
      padding-bottom: 30px !important;
    }


    /*   Header / Mobile Menu ---------------------------------------*/
    #header-application, #header-navigation-container{
        display: none;
    }

    .main-content-container{
        margin-top: 0px;
    }

    #mobile-main-header{
        width: 100%;
        height: 60px;
        background-image: url('img/header-background.png');
        background-position: 700px 0px;
    }

    #mobile-button-container{
        float: right;
    }

    #header-mobile-menu, #footer-application{
      background-size:cover;
    }

    #mobile-menu-close{
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 25;
    }

    #mobile-menu-button{
        height: 40px;
        width: 40px;
        background-color: #fff;
        z-index: 999;
        border-radius: 20px;
        margin: 10px;
        float: right;
    }

    .button-click{
        width: 100%;
        height: 50px;
        z-index: 200;
        position: absolute;
    }

    .nav-submenu-button{
        width:75%; 
        background-color:#fff;
        color:#34516f
    }

    #mobile-customer-container{
        text-align: center;
    }

    #mobile-slide-menu{
        width: 100%;
        position: absolute;
        height: 400px;
        background-color: #34516f;
        z-index: 9999999;
        color: #fff;
        text-align: center;
        height: 100vh;
        overflow-y: auto;
    }

    .cpp-button{
        font-family: 'Yantramanav', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1em;
    }

    .nopadding {
       padding: 0 !important;
       margin: 0 !important;
       vertical-align: top;
    }

    #mobile-customer-dropdown{
        display: inline-block;
    }

    .simple-dropdown-button{
        width: 175px;
    }

    .simple-dropdown-content{
        /* width: 175px; */
    }

    #mobile-header-logo{
        display: inline-block;
    }

    #mobile-header-logo img{
        height: 50px;
        margin: 5px 10px;
    }

    /* Homepage Start ---------------------------------------*/

    #home-container-dashboard{
        width: 100%;
        height:100%;
        margin-bottom: 75px !important;
    }

    #home-favorite-display{

    }

    #report-name{
        line-height: 1.25em;
        font-size: 125%;
    }

    #container-main-chart-header{
        padding-bottom: 10px;
    }

    #home-button-container{
        text-align: left;
    }

    #button-sidebar-collapse-closed{
      position: absolute;
      display: none;
      top: 121px;
      right: 8px !important;
      /* left: auto !important; */
      z-index: 501;
      width: 30px;
      height: 30px;
      padding: 0 4px;
      cursor: pointer;
      color: #fff;
      border: 1px solid #64819f;
      border-radius: 50%;
      background-color: #34516f;
      background-color: #fff !important;
      color: #145c93 !important;
    }

    .archive-page-container #button-sidebar-collapse-closed{
      top: 91px;
    }

    #archive-hierarchy-container{
      padding-left:33px;
    }

    #archive-main-container #page-header-h1 {
      padding-left:45px;
    }

    .sidebar-close-icon{
        font-size: 20px !important;
    }


    .calendar-button{
        font-family: 'Yantramanav', sans-serif;
        font-size: 17px;
        z-index: 10;
        height: 35px;
        width: 35px;
        text-align: center;
        padding: 8px !important;
        margin-top: 0px;
    }

    #chart-dd-0-container{
            overflow: hidden;
            
    }

    #footer-fixed-position{
        /* position: relative; */
    }

    #chart-dd-0-load-container{
        margin: 0px 15px;
        overflow: scroll;
    
    }


    .chart-graph-legend-container{
        display: block;
    }

    #static-legend{
      overflow-x: auto;
      overflow-y:hidden;
      display: flex;
      height: 89px;
      bottom:auto;
    }

    #static-legend-mobile-helper{
      flex: 0 0 auto; /* Prevent flex-grow and flex-shrink */
      white-space: nowrap;
    }

    #chart-00{
      min-width:650px;
    }

    #chart-00-height{
      overflow-x:auto;
    }

    .legend-card-container{
      white-space: nowrap;
    }

    .spreadsheet_table{
        width: 1000px;
        margin: 0px !important;
    }




    /* Homepage Stop ---------------------------------------*/

    .fa-stack { font-size: 0.5em; }
    i { vertical-align: middle; }


    #full-screen-content{
        overflow: auto;
        /* height: auto; */
        padding-bottom: 250px;
    }

    .cpp-inner-panels{
        overflow: auto;
    }

    .panel-alt-container{
        margin-top: 0px;
    }

    #popup-overall-list, #popup-overall{
        height: auto;
        max-height: 400px;
    }

    #popup-overall-list{
        max-height: 350px;
    }


    .popup-second-level{
        position: fixed;
    }

    #popup-overall, #popup-cpp-alerts, #popup-cpp-edits{
        width: 96%;
        margin: 0px 2%;
        overflow: auto;
    }

    #popup-cpp-edits{
        margin: auto 2%;
        height: auto;
        max-height: 450px;
    }

    .popup-header{
        padding-left: 10px;
        width: 101%;
        text-align: left;
    }

    #popup-contracts, #popup-funding, #popup-descriptions, #popup-accounts, #popup-mod-contracts, #popup-mod-funding, #popup-multiple-selection, #popup-multiple-selection-footer, #popup-mod-edit, #popup-mod-new, #popup-mod-view, #popup-multiple-utility, #popup-report-group-name, #popup-add-vendor, #popup-edit-vendor, #popup-add-vendor-alert, #popup-edit-vendor-alert, #popup-delete-vendor-warning, #popup-delete-mod-warning, #popup-delete-vendor-success, #popup-multiple-setting-utility, #popup-overall, #popup-cpp-alerts, #popup-cpp-simple, #popup-cpp-edit-meter, #popup-cpp-edits, #popup-overall-secondary, #popup-generic-message, #popup-allocations, #popup-collector{
        top: 20%;
        left: auto;
    }

    #popup-cpp-alerts{
      top:0px;
      margin-top:10px;
    }

    #popup-cpp-edits{
      top:10px;
    }

    #popup-overall{
      top:15px;
      max-height:95%;
    }

    .overlay-inner, .overlay-inner-generic{
        background-color: black;
    }

    .cpp-header-text{
        line-height: 1.5em;
        margin-top: 10px;
        margin-bottom: 10px;
    }


    #popup-cpp-alerts-content, #popup-cpp-edits-content{
        margin-left: 20px;
    }

    #api-data-table{
        margin: 0px;
    }

    table.dataTable thead th{

    }

    #api-data-table_wrapper{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #api-data-table_wrapper th{
        color:#fff;
    }

    #cpp-edit-input-field{
        width: 100%;
    }

    #popup-cpp-edit-meter-content{
        padding: 10px 50px 0px 50px;
    }

    #popup-cpp-alerts-list{
        height: auto;
    }

    #popup-cpp-edit-meter, #popup-cpp-simple{
      margin: 0;
      top: 10px;
      width: 96%;
      margin-left: 2%;
      height:auto;
    }

    .field-divs{
        min-width: auto;
        width: 100%;
    }

    .dataTables_scrollHead{
        margin-bottom: 0px;
    }
    #api-data-table{
      table-layout:fixed
    }


    #collapse-dashboard-tools-button{
      display:none;
    }

    #dashboard-edit-buttons{
      display: inline-block;
      padding: 5px 5px 5px 0px;
      vertical-align: top;
      margin-left:20px;
    }

    .main-charts-page .dashboard-controls-background{
      width: 100%;
        margin-left: 0px;
    }
    
    .main-charts-page .controls-background-color{
      margin-left:0px;
      width: 100%
    }

    .main-charts-page #dashboard-button-section{
      height: 77px !important;
    }

    .main-charts-page #main-chart-stage, #chart-dd-0-load-container{
      margin:0px;
      padding:0px;
    }

    .main-charts-page #report-heading{
      margin: 5px 0px;
    }

    .main-charts-page #main-chart-stage{
      margin-top: -3px;
    }

    #popup-overall-list{
      padding-left: 10px;
      padding-right: 10px;
    }

    .import-report-button{
      margin:2px 0px 2px 0px !important;
    }

    .collapse-vert-text{
      display:none;
    }

    #rt-drop-0-container{
      width:100%;
      margin-left:0px;
      margin-top:2px;
    }

    #archive-main-container{
      width:98%;
      margin-left:1%;
      margin-right:1%;
    }


    /* Reports, Charts, Events ---------------------------------------*/
}

@media only screen and (max-width: 450px) {
    #full-screen-background {
     /*  position: fixed;
     background-color: #012578;
      background-image: none !important; */
    }
  }

/* HEIGHT BASED MOBILE */

@media screen and (max-height: 850px) {
  #login-page_relative-footer-sm .bottom-footer-login {
     position: relative !important;
     /*background-color: #000; */
   }
}

@media screen and (max-height: 1150px) {
  #login-page_relative-footer .bottom-footer-login {
     position: relative !important;
     /*background-color: #000; */
   }
}