@media (max-width:1024px){
    
    
    
    /* full width and heigth html and body */
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .layoutcharts{
      padding:10px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 15px;
      display: flex;
      max-height: 40%;
    }
    
    
    
    .layoutcontainer {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
    }
    
    .layoutcontrols{
      padding: 8px;
      /* color: white; */
      /* color: #1445cd; */
      font-family: Arial;
      /* background: #16702f; */
      /* background: #7c7c7c; */
      background-color: #efcc35;
    }
    
    #app > div.layoutcontrols  select{
      
      border-radius: 10px;
      padding: 5px;
      width: 200px;
    }

    div.layoutcontrols > div{
        display: inline-block;
    }
    
    .layoutcontrols, .layoutcontent {
      display: block;
      flex-direction: column;
    }
    
    #portal-links{
      display: inline-block;
      margin-top: 10px;
      justify-content: center;
      align-content: center;
      align-items: center;
    }
    
    .layoutcontrols{
      /* border-bottom: 4px solid lightblue; */
      border-bottom: 2px solid #b3ade6;
    
    }
    
    .layoutcontent {
      flex: 1;
      position: relative;
    }
    
    #app > div.layoutcontent > div.layoutfloating {
    
      position: absolute;
      padding-top: 10px;
      right:auto;
      width: 90%;
      top: auto;
      bottom: 20px;
      left: 50%;
      translate: -50%;
      height: auto;
      z-index: 10;
    
    }
    
    .separator-div{
      border-bottom: 0.5px solid #000000;
        padding: 0.25px;
        margin-bottom: 3px;
        background: white;
        opacity: 0.5;
    }
    
    /* Equal width for map and chart container */
    .layoutcontent > div:first-child{
      flex: 2
    }
    
    .layoutcontent > div:last-child{
      flex: 1
    }
    
    #leftchart, #rightchart {
      overflow: hidden;
      border-radius: 15px;
      box-shadow: 1px 1px 6px grey;
      flex: 1;
      margin: 5px;
    }
    
    /* classes for counters */
    .layoutcounters{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      height: 95px;
      margin-bottom: 10px;
    }
    
    .counter-container{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 15px;
      min-width: auto;
    }
    
    .counter {
      flex: 1;
      cursor: pointer;
      padding: 5px;
      background: white;
      border-radius: 10px;
      margin: 5px;
      box-shadow: 1px 1px 6px;
      min-height: 60px;
    }
    
    .counter > div:first-child{
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    
      font-size: 22px;
    /* -webkit-text-stroke-width: 1.1px; */
    /* -webkit-text-stroke-color: #545454; */
      -webkit-text-fill-color: #ffffff;
      letter-spacing: 2px;
      font-family: Arial, Helvetica, sans-serif;
      /* text-shadow: 1px 1px 6px black; */
      color: white;
      text-shadow: rgb(0 0 0) 1px 0px 1px,
      rgb(0 0 0) 0.540302px 0.841471px 1px,
      rgb(0 0 0)  -0.416147px 0.909297px 1px,
      rgb(0 0 0)  -0.989992px 0.14112px 1px,
      rgb(0 0 0)  -0.653644px -0.756802px 1px,
      rgb(0 0 0)  1.283662px -0.958924px 1px,
      rgb(0 0 0)  0.96017px -0.279415px 1px;
    
    }
    
    .counter > div:last-child{
      font-size: 14px;
      text-align: center;
      font-weight: bold;
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      text-shadow: rgb(255 255 255) 1px 0px 1px,
      rgb(255 255 255) 0.540302px 0.841471px 1px,
      rgb(255 255 255)  -0.416147px 0.909297px 1px,
      rgb(255 255 255)  -0.989992px 0.14112px 1px,
      rgb(255 255 255)  -0.653644px -0.756802px 1px,
      rgb(255 255 255)  1.283662px -0.958924px 1px,
      rgb(255 255 255)  0.96017px -0.279415px 1px;
    }
    
    
    .header, .mobile-title {
      /* background-color: #b5e5da; */
      /* background-color: #6a74bd47; */
      /* background-color: #4b57af78; */
      width: 100%;
      padding: 5px;
      z-index: 2;
      border-bottom: 2px solid #b3ade6;
      display: flex;
      align-items: center;
      background-color: #d2e593;
      font-family: arial,sans-serif;
      justify-content: center;
      /* background-image: linear-gradient(45deg, white,#4b4f7c); */
    }
    
    .header-select-label {
      margin: 5px 5px 5px 15px;
      width: 100px;
      
      font-weight:bold;
      display: inline-block;
      color:black;
    
    }
    
    
    .footer-mobile{
      background-color: #d2e593;
      display: flex;
      justify-content: center;
      padding:8px;
      font-size: 12px;
      text-align: center;
      width: 110%;
      /* background-image: linear-gradient(45deg, white,#4b4f7c); */
    }
    
    .highcharts-credits{
      display: none;
    }
    
    /*modal css*/
    
    

    .modal-export{
        margin-bottom: 5px;
    }

    .table-category-title{
        display: inline-block;
    }
    
    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    
    /*modal css end*/
    
    
    /* table and table-striped */
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
      cursor: pointer;
    }
    
    tr:nth-child(even) {
      background-color: #dddddd;
    }
    
    
    
    /* table and table-striped end */
    
   
    
    
    
    .no-data{
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #ff0000;
      margin-top: 10px;
    }
    
   
    
    
    /* param description css */
    .param-description{
      height: 90px;
      cursor: pointer;
      padding: 5px;
      background: white;
      border-radius: 10px;
      margin: 5px;
      box-shadow: 1px 1px 6px;
      overflow-y: auto;
    }
    
    .param-description-container{
      padding: 10px;
      padding-top: 5px;
      font-family: Arial, Helvetica, sans-serif;
      color:rgb(51, 51, 51);
    }
    
    .param-description-header-text{
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 3px;
    }

    .mobile-data-selector-toggle {

        text-align: center;
        background-color: #eacc55;
        border-bottom: 2px solid #b2afe2;
        border-top: 2px solid #b2afe2;
        padding: 3px;
        font-family: Arial, Helvetica, sans-serif;
        width:100%;
        cursor: pointer;
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-data-selector-toggle > span > span {
        display: inline-block;
    }

    .chevron{
       
        text-decoration: none;
        display: inline-block;
        margin-left:10px;
        color:white;
        background-color: #6768dd;
        padding:5px;
        border-radius: 5px;
        margin: 3px;

    }

    .mobile-toggle-buttons{
        display: flex;
        border: 1px solid #b2afe2;
        border-radius: 5px;
        color: #6963E4;
        background: white;
        margin: 20px;
    
    }

  

    .mobile-toggle-buttons > div:first-child {
        
        border-left: none;
        
    }

    .mobile-toggle-buttons > div{
        
        flex: 1;
        padding: 5px;
        border-left: 1px solid #b2afe2;
        text-align: center;
    }

    .mobile-toggle-buttons > div.active{
        background-color: #6963E4;
        color: white;
      
    }

    



    
  
.img-group {
    display: flex;

  }

  .img-gog-sub {
    height: 60px;
    width: 40px;
    margin-left: 10px;
  }

  .img-gidm-sub {
    height: 60px;
    width: 60px;
    margin: 0 10;
  }

  .img-g20-sub {
    height: 60px;
    width: 60px;
    margin: 0;
  }

  .sac-logo-sub {
    height: 60px;
    width: 60px;
    margin: 0 10;
  }

  .isro-logo {
    height: 60px;
    width: 70px;
    margin: 0;
  }

  .rightside-logo {
    max-width: 200px;
    margin: 5px;
    margin-right: 20px;
    
  }

  .sub-heading{
   
      display: block;
      
      font-size: 20px;
    
      /* color: #6610f2; */
     
  }


  

  .vedas-logo{
    height: 80px;
    width: 80px;
    z-index: 5;
    position: fixed;
    /* top: 150px; */
    right: 10px;
    left: auto;
  }

  .header img {
      max-height: 40px;
  }

  #portal-links{
      margin-top:0px;
  }

  #dsslink{
    display: none;
  }

  


    
    
    
    }