html,
body, #app {
    height: 100%;
}
.bg-dqs{
    background-color:#BE1010!important;
}
.btn-dqs{
    background-color:#BE1010!important;
}
.txt-dqs{
    color:#BE1010!important;
}
.border-dqs{
    border-color:#BE1010!important;
}
.portal-button{
    width:200px;height:200px;
    max-width:100%;
    position:relative;
    max-height:100%;
}
.portal-button i{
    font-size:60px;
}
.portal-button b{
    font-size:70px;
    color:white;
}
.portal-col{
    max-width:50% !important;
    max-height:250px;
    padding-top: 5px;
    text-align:center;
}
@media only screen and (max-width: 600px) {
 
  .portal-button b{
      font-size:30px;
  }
  .portal-button{
      width:100px;height:100px;
  }
  .portal-button i{
    font-size:40px;
}
  .portal-button svg{
    width:35px;
    height:35px;
}
.portal-col{
    max-width:33% !important;
}
  .portal-title{
      font-size:15px;
  }
  .smallfont-lg{
      font-size:10px;
      line-height:10px;
      display:inline-block;
  }
  
}
@media only screen and (max-height: 757px){
    .main-portal-row{
    padding-top:30px;
    }
}
@media only screen and (max-height: 700px){
    .main-portal-row{
    padding-top:80px;
    }
}

.topmenubar{
    width:100% !important;
    height:65px;
    top:0;
    left:0;
    position:fixed !important;
}
.useritem{
    display:block;
    width:100%;
    padding:5px;
}
.userlist{
    display:block;
}
.useritem:nth-child(odd){
    background-color:#0000ff33;
}
.useritem > div{
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 200px;
}
.useritem .user-name{
    max-width:200px;
    flex-grow:0;
}
.useritem {
    display:flex;
    flex-direction:row;
}
.portal-title{
    position:absolute;bottom:5px;left:0px;width:100%;text-align:center;opacity:.5;
    color:white;
}

.portal-button.btn:hover{
    color:white;
}
.portal-button .material-icons{
    color:white;
}
.portal-button:hover .portal-title{
    opacity:1;
}

#sideMenu{
    position:fixed;width:300px;height:calc(100% - 65px);top:65px;left:-300px;
    transition: left .2s;
    z-index:10;
    background-color:white;
    border-right:solid gray 1px;
    
}
#sideMenu.expanded{
    left:0px;
}
#sideMenu li{
    cursor:pointer;
}
@media only screen and (min-width: 1200px) {
    #sideMenu{
        width:370px;
        left:-370px;
    }
    #sideMenu.expanded{
        left:0px;
    }
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.member-picture-container{
    width:64px;
    height:64px;
    display:inline-block;
    position:relative;
}
.member-list-card{
    height:64px;
    line-height:64px;
    display:flex;
}
.member-list{
    max-height:350px;
    height:350px;
    overflow-y:auto;
}
.member-picture{
    width:100%;
    height:100%;
    border-radius:1280px;
    background-position:center center;
    background-size:cover;
}
.member-name{
    display:inline-block;
    position:relative;
    margin-left:10px;
}
.message-groups-holder{
    height:100%;
    position:relative;
}
.picture-editor{
    position:relative;
}
.edit-indicator{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.3);
}
.picture-editor .edit-indicator{
    display:none;
}
.picture-editor.round .edit-indicator{
    border-radius:300px;
}
.picture-editor:hover .edit-indicator{
    display:block;
}