@media only screen and (min-width : 320px) and (max-width :575px){
  .fit-width.form-group.mb-3{
      width: 100%;
  }
  .flex-xs-1{
      flex: 1;
  }
  .login-page .col-12.col-lg-8{
      padding: 0;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      display: flex;
  }
  .login-box {
      width: calc(100% - 20px);
      flex-direction: column;
      margin: 0px auto;
      overflow: hidden;
      max-width: 100vw;
      background: transparent;
      border-radius: 10px;
      position: relative;
  }
  .login-box .tab-content{
      background: transparent;
      padding: 30px;
  }
  .login-form p.form-title {
      font-size: 32px !important;
  }
  .login-page{
      padding: 0;
      background-position: 63% center;
  }
  .login-form{
      padding: 20px;
      background: rgba(255,255,255,0.8);
      position: relative;
      z-index: 2;
  }
  .add-btn{
    top: unset;
    bottom: 16px;
    position: absolute;
  }
  .westion-role  > div{
      width: 50% !important;
  }
  .modal-body{
      max-height: calc(100vh - 74px);
  }
  input:-internal-autofill-selected {
      appearance: menulist-button;
      background-color:var(--white-lite) !important;
      background-image: none !important;
      color: -internal-light-dark(black, white) !important;
  }
  .login-bg__left-top{
      width: 100%;
  }
  .login-bg__left-top.widget-box{
    width: 100%; 
    height: 100%;
    background-position: 50% 0;
  }
  .cal-box-wrap{
      height: unset !important;
      max-width: calc(100vw - 30px);
  }
  .flex-wrap-sm{
      flex-wrap: wrap;
  }
  .d-none-sm{
    display: none;
}
.width-xs-full{
    width: 100%!important;
}
.font-14-xs{
    font-size: 14px;
}
.wet-button{
    width: 100%!important;
}
.login-page-h{
    height: calc(100vh - 68px);
}
.height-400-modal{
    max-height: 250px;
}
.padding-15-xs{
    padding: 15px!important;
}
.login-bg__line-right{
    width: 80%;
}
.padding-field-l{
    padding-left:12px!important;
}
.padding-field-r{
    padding-right:12px!important;
}
.search-media-top{
    top:50px!important;
    height: 44px;
}
.footer-bg {
	height: 70px;
}
ul.sidebar-panel-nav {
    flex-grow: unset;
}
.height-scroll{
	height: calc(-77px + 100vh)!important;
}
.messageto-label{
    min-width: 85px;
}
.messageto-tags{
    max-width: 180px;
}
}

@media only screen and (min-width : 576px) and (max-width :767px){
  .flex-sm-1{
      flex: 1;
  }
  .login-page .col-12.col-lg-8{
      padding: 0;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      display: flex;
  }
  .login-box {
      width: calc(100% - 100px); 
      max-width: 80vw;
      flex-direction: column;
      margin: 0px auto;
      overflow: hidden;
      background: transparent;
      border-radius: 10px;
      position: relative;
  }
  .login-box .tab-content{
      background: transparent;
      padding: 30px;
  } 
  .login-form p.form-title {
      font-size: 32px !important;
  }
  .login-page{
      padding: 0;
      background-position: 63% center;
  }
  .login-form{
    padding: 0px;
    background: rgba(255,255,255,0.9);
    position: relative;
    z-index: 2;
  }
  .login-bg__left-top{
    width: 60%;
  }
  .login-bg__left-top.widget-box{
    height: 100%;
    background-position: 50% 0;
  }
  .cal-box-wrap{
    height: unset !important; 
  }
  .d-none-md{
    display: none;
}
.login-form{
    padding: 30px;
    background: rgba(255,255,255,0.8);
    position: relative;
    z-index: 2;
}
.search-media-top{
    top:15px!important;
    height: 44px;
}
.height-scroll{
	height: calc(-70px + 100vh)!important;
}
}
@media only screen and (min-width : 320px) and (max-width :991px){
    .width-md-sm-100{
        width: 100%!important;
 }  
 .flex-wrap-md{
     flex-wrap: wrap;
 }
 .img-upload:hover:before{
    opacity: 0;
 }
}
@media only screen and (min-width : 992px) and (max-width :1073px){
    .width-lg-100{
        width: 100%!important;
 }  
}
@media(max-width:767px){
  .login-widget-bg{
    position: absolute;
    background-color: white;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.16);
    width: 100vw;
    height: 100vh;
    filter: blur(6px);
    background-image: url(../images/bg.png);
    background-position: 60% 0px;
    background-size: 220%;
    overflow: hidden;
  }
  .flex-sm-1{
      flex: 1;
  }
  .sm-full-width{
      width: 100%;
  }
  .radius-sm-0 {
      border-radius: 0px;
  }
  .menu-position{
    position: fixed;
    z-index: 11;
}
.menu-open .content-wrap{
    margin-left: 0px;
}
  .pagehead-wrap .box > input {
      width: calc(100vw - 128px);
      flex: unset;
  }
  .close-icon-sm{
      position: absolute;
      right: 13px;
  }
  .content-wrap .wrapper > .main{
      padding: 15px;
  } 
  .email-entry{
      padding: 0px !important;
      display: block;
      padding-top: 120px !important;    
  }
  .role-card {
      flex-direction: column;
      align-items: flex-start !important;
  }
  .tab-content,#advance-search-form{
      padding: 15px ;
  }
  .button-mini{
      min-width: 130px !important;
  }
  .westion-role {
      flex-wrap: wrap;
       width: 100% !important;
  }
  .westion-role-card{
      flex-direction: column !important;
  }
  .westion-role-head{
      width: 100% !important;
  }
  .organization-box{
      padding:5px 15px !important;
  }
  .width-sm-full{
      width: 100%;
  }
  .pagehead-wrap .box {
      display: none !important;
      position: absolute;
      left: 15px;
      margin-left: 0 !important;
      width: calc(100% - 30px);
      z-index: 10;
      top: 15px;
      border-radius: 6px;
      height: 43px;
  }
  .pagehead-wrap .box.active {
      display: flex !important;
  }
  .wrapper-scroll{
    height: calc(100vh - 50px);
 }
 body{
     overflow: auto!important;
 }
 .report-header{
    border-radius: 0px;
}
.notification-dot{
    padding-top: 1px;
}
.menu-sm .sidebar{
    margin-left: -260px;
    box-shadow: none;
}
.menu-sm .menu-overlay{
    width: 0px!important;
}
.sidebar{
    margin-left: 0;
}
.modal-backdrop{
    z-index: 10!important;
    }
}
 @media only screen and (min-width : 768px) and (max-width :991px){
  .login-box {
      width: calc(100% - 30px);
  }
  .pagehead-wrap .box.active {
      display: flex !important;
  }
  .pagehead-wrap .box {
      display: none !important;
      position: absolute;
      left: 24px;
      margin-left: 0 !important;
      width: calc(100% - 48px);
      z-index: 10;
      top: 23px;
      height: 43px;
  }
  .login-bg__left-top{
      width: 60%;
  }
  .login-bg__left-top.widget-box{
    height: 100%;
    background-position: 50% 0;
  }
  .d-none-lg{
    display: none;
}
.width-full-768{
    width: 100%;
}
.search-media-top{
    top:24px!important;
}
}

@media (max-width: 991px) {
  .responsive > thead th {
    display: none;
  }
  .responsive > tbody td,
  .responsive > tbody th {
    display: block;
  }
  .responsive > tbody > tr:nth-child(even) td,
  .responsive > tbody > tr:nth-child(even) th {
    background-color: #eee;
  }
  [row-header] {
    position: relative;
    width: 50%;
    vertical-align: middle;
  }
  [row-header]:before {
    content: attr(row-header);
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 50%;
    padding-right:30px;
  }
  .dk__toast.emr-toast{
      font-size: 12px;
  }
  .report-sub-text{
    width: 100%;
    }
    .width-full-991{
        width: 100%;
    }
}
@media (max-width:1200px){
  .input-stich{
      flex-basis:auto;
  }
  .width-full-1200{
    width: 100%;
}
}
@media (max-width:1323px){
    .width-full-1323{
      width: 100%;
  }
  .flex-wrap-1323{
    flex-wrap: wrap;
  }
  }
  @media (min-width:1323px){
    .max-width-30-per{
        max-width: 30%;
    }
    .max-width-22-per{
        max-width: 22%;
    }
    .text-ellipsis-100{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  }

/*  ------ toast   ------  */

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

  .dk__toast-mobile-container{
      width: calc(100vw - 0px) !important;
      z-index: 10001;
  }
  .success-toast {
      border: 1px solid rgba(0,0,0,.05) !important;
      border-bottom: 3px solid #54cc72 !important;
  }
  .warning-toast{
      border: 1px solid rgba(0,0,0,.05) !important;
      border-left: 3px solid #ff9231 !important;  
  }
  .info-toast{
      border: 1px solid rgba(0,0,0,.05) !important;
      border-left: 3px solid #3172ff !important;  
  }
  .danger-toast{
      border: 1px solid rgba(0,0,0,.05) !important;
      border-left: 3px solid #ff3131 !important;  
  }
}

@media only screen and (min-width : 320px){
.responsive-menu{
    flex-direction: column;
}
.responsive-menu .side-menu-wrap  {
    height: 60px;
    position: relative;
    top: 0;
    background: white;
    width: 100%; 
}
.content-wrap{
    transition: all 200ms ease-in-out;
}
.content-wrap > .wrapper{
  margin-bottom: 0px;
}
footer.footer{
  position: relative;
}
.responsive-menu .content-wrap::before {
    box-shadow: 10px 0px 30px 0 rgba(0, 0, 0, .1);
    background: transparent;
    content: '';
    height: 15px;
    width: 100%;
    z-index: 0;
    top: -15px;
    position: absolute;
}
.side-menu-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar{
    top: 0;
    box-shadow: 3px 80px 30px 0 rgba(0, 0, 0, .1);
    height: 100%;
    transition: all 200ms ease-in-out;
}
#burger.active .burger-button{
    top: 0;
}
.menu-overlay{
    width: 0vw;
    height: 100vh;
    position: absolute;
    background: #e3e1e159;
    z-index: 0;
    opacity: 0;
    transition: all 300ms ease-in-out;
}
.menu-open .menu-overlay {
    width: 100vw;
    opacity: 1;
    transition: all 300ms ease-in-out;
}

} 
@media only screen and (min-width : 768px){
.menu-overlay{
    display: none;
}
.menu-position{
    position: fixed;
    z-index: 11;
}
}
@media only screen and (min-width : 355px) and (max-width :409px){
    .ql-snow .ql-picker.ql-expanded .ql-picker-options{
        right: 0;
    }
}
@media only screen and (min-width : 485px) and (max-width :555px){
    .ql-snow .ql-picker.ql-expanded .ql-picker-options{
        right: 0;
    }
}