.ibfr { float: right; display: inline-block; }
.mobile { display: none !important; }

@media screen and (max-width: 650px) {
	.menublock, .desktop, .ibfr { display: none; }
	.contentblock { width: 90% !important }
	.wideronmobile { width: 90% !important; position: initial !important; }
    .mobile { display: block !important; }
    .headerbar img { margin-left: 2em; }
    .drawer-hamburger { margin-top: 1em; }
    .drawer-nav { z-index: 3 !important; }
    .thumbshere { line-height: 1.85em; margin-right: 0px; }
    .sitename { padding-left: 2.35em; }
    button { margin: 12px 8px; }
    .ifbr { float: none !important; }
    .notify { font-weight: normal; }


    .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    
    background-color: @hamburgercolour !important;
    }
}


/* media manager and config manager for mobile */
@media screen and (max-width: 1000px){
  fieldset, 
  #mediamanager__page, 
  #mediamanager__page .filelist{ 
    max-width: 100%; min-width: unset; 
  }
  #mediamanager__page .file, 
  #mediamanager__page .namespaces, 
  #mediamanager__page .panel { 
    width: 100%; clear: both; float: none;
  }

/* #mediamanager__page .namespaces { min-width: unset; } */

  /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/
  #config__manager tr { }
  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 75%;  }
  #config__manager fieldset {  margin: 1em 0px; width: 100%; box-sizing: border-box; }

     /* make <select> not exceed it's parent div's width */
    /* https://stackoverflow.com/q/44810056/337306 */
    div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; }

  fieldset { width: unset; }
  #config__manager fieldset td.value { width: unset; }
  td.label { word-wrap: anywhere; }

  #config__manager td .input, 
  #config__manager fieldset td.value, 
  input, textarea,
  #config__manager td input.edit,
  #config__manager td textarea.edit { 
    max-width: 100%; 
    width: auto;
  }
}