@media only screen and (min-width: 768px) and (min-height: 600px)
{
  .my-custom-modal-css .modal-wrapper {
    height:100%;
   width: 100%;
    position: absolute; 
    display: block;  
  }
  .CustomModal2 .modal-wrapper{
    border-radius: 15px;
    height: 410px;
    overflow-y: overlay;
  }
  .sidebar{
    /* // width: 0; */
    width: 0px;

  }
  .Dashboard{
    margin-left: 0px;

  }
  #HeaderNav{
    margin-left: 0px;
 }
 #collapsebutton{
    display: block;
   
}
.IconNoPadding{
  padding-right: 0;
}
.TbResponsiveClas{
  display: none;
}
.btn_Hidden{
  display: block;
}
.ClasFlex{
  display: flex; align-items: center;
}
.ScrollContainer{
  height: auto;
  overflow-y: scroll;
}
#login{
  border-right:1px solid transparent;
  }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .my-custom-modal-css .modal-wrapper {
    height:100%;
    width: 100%;
    position: absolute; 
    display: block;  
  }
  .CustomModal2 .modal-wrapper{
    border-radius: 15px;
    height: 630px;
    overflow-y: overlay;
  }
  .sidebar{
    width: 0; 
  }
  .Dashboard{
    margin-left: 0px;

  }
  #HeaderNav{
    margin-left: 0px;
 }
 #collapsebutton{
    display: block;
}
.IconNoPadding{
  padding-right: 0;
}
.TbResponsiveClas{
  display: none;
}
.btn_Hidden{
  display: block;
}
.ClasFlex{
  display: flex; align-items: center;
}
.ScrollContainer{
  height: auto;
  overflow-y: scroll;
}
#login{
  border-right:1px solid transparent;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .my-custom-modal-css .modal-wrapper {
    height: 276px;
    position: absolute; 
    display: block; 
    width: 330px;
    border-radius: 15px;
    margin: 24px; 
  }
  .CustomModal2 .modal-wrapper{
    border-radius: 15px;
    height: 630px;
    overflow-y: overlay;
  }
  .sidebar{
     width: 0;
  }
  .Dashboard{
    margin-left: 0px;

  }
  #HeaderNav{
    margin-left: 0px;
 }
 #collapsebutton{
    display: block;
}
.IconNoPadding{
  padding-right: 0;
}
.TbResponsiveClas{
  display: none;
}
.btn_Hidden{
  display: block;
}
.ClasFlex{
  display: flex; align-items: center;
}
.ScrollContainer{
  height: auto;
  overflow-y: scroll;
}
#login{
  border-right:1px solid transparent;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .my-custom-modal-css .modal-wrapper {
    height: 276px;
   
    position: absolute; 
    display: block;  
  }
  .CustomModal2 .modal-wrapper{
    border-radius: 15px;
    height: 610px;
    overflow-y: overlay;
  }
  .sidebar{
   width: 0; 
  }
  .Dashboard{
    margin-left: 0px;

  }
  #HeaderNav{
    margin-left: 0px;
 }
 #collapsebutton{
    display: block;
}
.IconNoPadding{
  padding-right: 0;
}
.TbResponsiveClas{
  display: none;
}
.btn_Hidden{
  display: block;
}
.ClasFlex{
  display: flex; align-items: center;
}
.ScrollContainer{
  height: auto;
  overflow-y: scroll;
}
#login{
  border-right:1px solid white;
  }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .my-custom-modal-css .modal-wrapper {
    height: 276px;
    position: absolute; 
    display: block;  
  }
  .CustomModal2 .modal-wrapper{
    border-radius: 15px;
    height: 410px;
    overflow-y: overlay;
  }
  .sidebar{
   width: 0; 
  }
  .Dashboard{
    margin-left: 0px;

  }
  #HeaderNav{
    margin-left: 0px;
 }
 #collapsebutton{
    display: block;
}
.IconNoPadding{
  padding-right: 70px;

}
.TbResponsiveClas{
  display: table-cell;

}
.btn_Hidden{
  display: none;
}
.ClasFlex{
  display: table-cell;
}
.ScrollContainer{
  height: 69vh;
  overflow-y: scroll;
}
#login{
  border-right:1px solid white;
  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .my-custom-modal-css .modal-wrapper {
    height: 276px;
    position: absolute; 
    display: block;  
    width: 600px;
  }
  .CustomModal2 .modal-wrapper{
    border-radius: 15px;
    height: 410px;
    overflow-y: overlay;
  }
  .sidebar{
    width: 65px;

    /* // width: 0; */
  }
  .Dashboard{
    margin-left: 65px;

  }
  #HeaderNav{
    margin-left: 65px;
 }
 #collapsebutton{
     display: none;
 }
 .IconNoPadding{
  padding-right: 70px;
}
.TbResponsiveClas{
  display: table-cell;

}
.btn_Hidden{
  display: none;
}
.ClasFlex{
  display: table-cell;
}
.ScrollContainer{
  height: 69vh;
  overflow-y: scroll;
}
#login{
  border-right:1px solid white;
  }
}