:root{
    --text-secondary : #666666;
    --soft-text : rgba(0,0,0,.87);
    --primary : #004C23;
    --border : #d4d4d5
}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
}


/** material icons */


@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    /* src: url(https://example.com/MaterialIcons-Regular.eot); For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      /* url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'), */
      url(/foreign/assets/fonts/material/MaterialIcons-Regular.ttf) format('truetype');
  }
  
  /* round */
  
  @font-face {
      font-family: 'Material Icons - round';
      font-style: normal;
      font-weight: 400;
      /* src: url(https://example.com/MaterialIcons-Regular.eot); For IE6-8 */
      src: local('Material Icons'),
        local('MaterialIconsRound-Regular'),
        /* url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
        url(https://example.com/MaterialIcons-Regular.woff) format('woff'), */
        url(/foreign/assets/fonts/material/MaterialIconsRound-Regular.otf) format('opentype');
    }
  
    /* two toned */
  
    @font-face {
      font-family: 'Material Icons - twoTone';
      font-style: normal;
      font-weight: 400;
      /* src: url(https://example.com/MaterialIcons-Regular.eot); For IE6-8 */
      src: local('Material Icons'),
        local('MaterialIconsTowTone-Regular'),
        /* url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
        url(https://example.com/MaterialIcons-Regular.woff) format('woff'), */
        url(/foreign/assets/fonts/material/MaterialIconsTwoTone-Regular.otf) format('opentype');
    }
  
    /* outline */
  
    @font-face {
      font-family: 'Material Icons - outline';
      font-style: normal;
      font-weight: 400;
      /* src: url(https://example.com/MaterialIcons-Regular.eot); For IE6-8 */
      src: local('Material Icons'),
        local('MaterialIconsOutlined-Regular'),
        /* url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
        url(https://example.com/MaterialIcons-Regular.woff) format('woff'), */
        url(/foreign/assets/fonts/material/MaterialIconsOutlined-Regular.otf) format('opentype');
    }
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;  /* Preferred icon size */
      display: inline-block;
      line-height: 1;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
      color: rgba(0, 0, 0, 0.54);
    
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
    
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
    
      /* Support for IE. */
      font-feature-settings: 'liga';
    }
  
    .material-icons.round{
      font-family: "Material Icons - round"
    }
    .material-icons.outline{
      font-family: "Material Icons - outline";
    }
    .material-icons.twoTone{
      font-family:"Material Icons - twoTone"
    }


    .hide{
      display: none !important;
    }

    html{
      width: 100%;
      height: 100%;
    }
    body{
      width: 100%;
      height: 100%;
    }

    button{
      outline:none;
      cursor: pointer;
    }


   


    .std-btn{
      display: flex;
      flex-direction: row;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
      border:none;
      outline:none;
      padding:12px 15px;
      cursor: pointer;
      margin:20px 0;
      background-color: var(--primary);
  }

  .std-btn > .ldr{
    display: none;
    margin-right:10px;
  }
  
  .std-btn:disabled > .ldr {
    display: flex;
  }

  .std-btn:disabled > .material-icons{
    display: none;
  }

  .std-btn:disabled p{
    cursor: not-allowed;
    opacity: 0.8;
  }
  
  .std-btn > p{
      font-size: 0.9rem;
      color: white;
      margin-right: 10px;
  }

  .std-btn > .material-icons{
      font-size: 1.1rem;
      color: white;
      margin-right: 5px;
  }
    #l-panel{
      width:260px;
      padding:3% 0%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: fixed;
      top:0;
      left:0;
      height:100%;
      background-color: var(--primary);
    }



    .menus {
      width:100%;
      padding:2% 1%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-top:15%;
    }
    #l-panel img{
      width:50%;
     
    }

    .mn{
      width:100%;
      padding:4% 5%;
      margin:5px 0 ;
      display: flex;
      flex-direction: row;
      text-decoration: none;
      color: unset;
      align-items: center;
   
    }

    .mn:hover{
      background-color: rgba(255, 255, 255, 0.099);
    }


    .mn .material-icons{
      color: rgba(245, 245, 245, 0.6);
      font-size: 1.2rem;
      margin-right: 10px;
    }

    .mn p{
      margin:0;
      color: rgba(245, 245, 245, 0.6);
      font-size: 0.9rem;
    }


    .mn > .bubble{
      margin-left:auto;
      margin-right: 10px;
      background-color: rgba(255, 8, 8, 0.642);
      color:white;
      font-size: 12px;
      height:20px;
      border:none;
      width:20px;
      text-overflow: ellipsis;
      overflow: hidden;
      text-wrap: nowrap;
      padding:0;
     
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:50%;
    }























    #top-nav{
      width:calc(100% - 260px);
      height: 60px;
      background-color: white;
      position: fixed;
      top:0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      right:0;
      padding:1% 2%;
      z-index: 10;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
    }

    #top-nav #menu-btn{
      background-color: transparent;
      border: none;
      outline: none;
      display: none;
      cursor: pointer;
    }


    #menu-btn .material-icons{
      color : black;
      font-weight: 600;
      font-size: 2rem;
    }

    .accnt{
      position: relative;
      margin-left: auto;
    }
    
  
    #top-nav .accbtn{

      padding:10px 15px;
      border-radius: 5px;
      background-color: transparent;
      display: flex;
      border:none;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      justify-content: center;
    }


    #top-nav .accbtn:hover{
      background-color: rgba(0,0,0,.035);
    }


    .accbtn .material-icons{
      font-size: 1.3rem;
      margin:0;
      margin-right: 10px;
      color:var(--soft-text);
    }


    .accbtn p {
      margin:0;
      white-space: nowrap;
      color: var(--soft-text);
      font-size :0.9rem;
    }

    .accnt .acc-float{
      width:250px;
      background-color: white;
      border: 1px solid whitesmoke;
      border-radius: 5px;
      padding:10px;
      position: absolute;
      top:42px;
      right:0;
      display: flex;
      flex-direction: column;
    }


    .acc-float > .id-bx{
      width:100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }

    .acc-float .id-bx span{
      width:50px;
      height:50px;
      overflow: hidden;
      border-radius: 50%;
      background-color: whitesmoke;
    }

    .acc-float .id-bx img{
      width:100%;
      height:auto;
      object-fit: fill;
    }



    .app-id{
      display: flex;
      flex-direction: column;
      margin-left: 15px;
   

    }

    .app-id > p{
      font-weight: 600;
      font-size: 0.9rem;
      color:var(--text-secondary);
      
    }

    .app-id > .id{
      font-weight: 500;
      font-size: 0.8rem;
    }

    .acc-float a.lgout{
      text-decoration: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding:15px 5px 0px;
      margin-top: 10px;
      border-top: 1px solid whitesmoke;

    }

    .acc-float a.lgout .material-icons{
      font-size: 1em;
      color: var(--primary);
      margin-right:15px;
      
    }

    .acc-float a.lgout p{
      font-size: 0.9rem;
      color: var(--text-secondary);
    }





  .main{
    width:calc(100% - 260px);
    margin-left: 260px;
    margin-top: 60px;
    padding:1%;
  }





  @media screen and (max-width: 1020px) {
    #l-panel{
      z-index:12;
      width: 270px;
      max-width: 90%;
      display: none;
    }

    #l-overlay{
      display: none;
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,.5);
      z-index: 11;
    }
    .main{
      width:100%;
      margin-left: 0;
    }
    #top-nav{
      width:100%;
      margin-left: 0;
    }



    body.menu-open #l-panel{
      display: flex;
    }

    body.menu-open #l-overlay{
      display: block;
    }


    #top-nav #menu-btn{
      display: block;
    }
    
  }