/*
 *    $Revision$
 *    $Id$
 *
 *    Facilitor default.css, styles for Mobile
 */

/* class overrules */
.ui-title {
    margin:0 11% 0 !important;
}

.ui-content,
.ui-mobile .ui-page {
    background-color: #fff;
}
.ui-li-count {
    max-width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Mobile Grid 3 kolommen: plaatje en tekst centreren */
.ui-grid-b img {
    display: block;
    height: 85px !important;
    margin: 0 auto;
    border-radius: 4px;
}
.ui-grid-b .imgCaption {
  width: 100%;
  font-size: 12px;
  text-align: center;
}
  i.miconimg {
    font-size: 4em;
  }
/* als groter (bv landscape) dan groter */
@media all and (min-width: 480px) {
  .ui-grid-b img {
    height: 100px !important;
  }
  .ui-grid-b .imgCaption {
    font-size: 13px;
  }
  i.miconimg {
    font-size: 5em;
  }
}
@media all and (min-width: 640px) {
  .ui-grid-b img {
    height: 120px !important;
  }
  .ui-grid-b .imgCaption {
    font-size: 14px;
  }
  i.miconimg {
    font-size: 6em;
  }
}

@media all and (min-width: 800px) {
  .ui-grid-b img {
    height: 140px !important;
  }
  .ui-grid-b .imgCaption {
    font-size: 15px;
    line-height: 2em;
  }
  i.miconimg {
    font-size: 7em;
  }
}

/* FACILITOR classes */
#loginhtml { background-image: none !important; }
#loginfooter {
	position: relative !important;
	margin-top: 24px !important;
	bottom: 0!important;
}

#mod_pass2mail  {width: 300px !important;}

.c1, .n1 { color: #111; font-size: 0.9em !important; font-weight: lighter !important;}
.cs1 {color: #CD2324; margin-left: 8px;  font-size: 0.9em;}
.c2, .date, .n2 { font-size: 0.7em; font-weight: normal;}
.omschr { font-size: 0.6em; font-weight: normal;}

.f1 { font-size: 0.9em;}
.f2 { font-size: 0.8em; font-style: italic;}

.n2 {	white-space: nowrap; }
.rticon {
    margin: 15px 0 0 2px;
}

.moreinfo input {
    font-weight: bold;
    color: #000 !important;
    }
.required  {
    border: 1px solid #D14B1C!important;
    }
.missing,
.suggest.missing {
    background-color: #FFD0D0!important;
    }
.attention {
    color: #E63600 !important;
    }

.resruimte .ui-page,
.resruimte .ui-content {
   padding: 0;
   margin: 0;
}
.bezet, .vrij {font-weight: bold; text-align: center; text-transform: uppercase;}
.bezet {background-color: transparent; margin-bottom:6px;}
.vrij {background-color: transparent;}
.bezetinfo {font-size: 0.9em;}
.resruimte div.dbezet,
.resruimte div.dvrij {
   padding: 0 10%;
}
div.dbezet {background-color: #E63600; color: white;}
div.pbezet {background-color: #E63600 !important; color: white;}
div.dbezet .bezetinfo {color: white;}
div.dbezet .plantime {color: #333;}
.cvrij, .cbezet {
   margin-top: 1em;
}

#fbanner, #hbanner {
    height: 40px;
    padding: 2px 0 1px 0;
    background-position: center;
    background-color: #fff;
    background-image: url(../Pictures/mfbanner.png);
    background-repeat:no-repeat ;
}

.mobile2touch {
    float: right;
}

.mobile2touch a {
   font-weight: 400 !important;
   color: #fff !important;
   font-size: 0.8em;
}

.micon {
    padding: 10px 6px 10px 6px !important;
    text-align: center;
}

.selfie {
    border-radius: 20px;
}
.footerphoto {
    height: 40px;
    max-width: 40px;
    float: right;
    border-radius: 20px;
}

.ui-collapsible-heading{
    font-size:16px !important;
}

.m-bijlagepopup-ext1 {
    width: 100% !important;
    height: 17em !important;
}

#bijlagepopup {
    width:100%;
    padding:0.4em !important;
}
.mfcltmodal {
    width:270px;
    height:160px !important;

}

#mod_bijlagenM {
    width:250px;
    height:140px;
}
body.modal .fcltblock {
    background-color:transparent;
    border:0px;
}
.fcltblock .inside {
    padding: 1px 3px 2px 3px;
    background-color:transparent;
}
/* Bovenop in mobile */
#ui-datepicker-div {
     z-index: 9999 !important;
}
.subject {
    line-height:2em;
    font-size: 0.95em;
}
div.subheader {
    text-overflow: ellipsis;
    overflow:hidden;
}
.subheader .listbodykop {
    color: #888;
    font-size: 0.7em;
    margin-top: 0px;
    margin-bottom: 4px;
}
.subheader .listbodytext {
    font-weight: normal;
    font-size: small;
    white-space:normal; /* Wordwrap gewenst in listviews */
}

.suggest {
    background-color: #FFFFE3 !important;
}

#mobplan {
    text-align: center;
}

#mobplan img {
    border: 1px solid #333;
}

#rsMaxLines {
  color: red;
  background-color: white;
  font-weight: bold;
}

/* For internal styling within textarea's */
.fclthtml {
  line-height: 1.5em;
}
.fclthtml table, .fclthtml td, .fclthtml th {
  border-collapse: collapse;
  border: solid 1px #888;
}
.fclthtml th {
  background-color: #999;
}
.fclthtml td {
  filter: alpha(opacity=80);
  opacity: 0.8;
}

/* reserveringsinfoschermpje */
.resruimte {
   text-align: center;
}
.resphoto {
    width: 100%;
    padding: 2px 0 1px 0;
    text-align: center;
}
table.planbord div.click {
    cursor: auto;
}
table.planbord {
  margin: 5px auto;
}
.resphoto img {
    margin: 0;
    max-width: 100%;
    max-height: 300px;
}

@media all and (min-width: 480px) {
    .resphoto img {
        min-width: 400px;
        max-height: 400px;
    }
}

div.plantime {
    font-size: 0.7em;
}
.resoms {
    background-color: white;
    color: #333;
    line-height: 1.2em;
    padding: 0.5em 1em;
    font-size: 0.95em;
    text-align: center;
    box-shadow: 2px 2px 2px #888888;
    max-width: 100%;
    margin: auto;
}
div.dbezet .resoms {
   background: none;
   color: #fff;
   box-shadow: none;
}

@media all and (min-width: 720px) {
   .vrij, .bezet,
   .resruimte .ui-btn {
      font-size: 2em;
   }
   .bezetinfo {font-size: 1em;}
   .resoms {
      line-height: 2em;
      font-size: 1.4em;
   }
   .resphoto img {
      width: 100%;
      max-height: 100%;
   }
   .resplan {
      display: none;
   }
}

/* Set de default jQuery mobile font-weight naar lighter  */
body,
input,
select,
textarea,
button,
.ui-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif /*{global-font-family}*/ !important;
}

.ui-header {
  font-family: -apple-system-headline, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif /*{global-font-family}*/ !important;
}

.ui-footer{
  font-family: -apple-system-footnote, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif /*{global-font-family}*/ !important;
}

input,
textarea,
.fldflex, .fldflexC, .fldflexC50, .fldflexD, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS {
    font-size: 0.9em !important;
    color: rgb(116,117,120) !important;
}
i.fa {
color: #bbb;
 }

input[readonly] {background-color: #f9f9f9 !important;}
textarea {
    height: 49px;
}

.flexlabel {
    color: #CD2324;
}
.flexlabelvalue, .fldfinreg1, .fldfinreg2 {
    font-size:  0.9em; !important;
    color: #777 !important;
    padding-top: 2px;
    padding-bottom: 2px;
}
/* Form labels (overrides font-weight bold in bars, and mini font-size) */
.ui-mobile label,
div.ui-controlgroup-label {
	font-weight: lighter !important;
    padding-top: 6px !important;
}
.ui-mobile label, .ui-mini {
    font-size: 1em !important;
    font-weight: 400 !important;
}

/* Buttons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn,
label.ui-btn {
	font-weight: lighter !important;
}

.ui-listview>li h2 {
	font-weight: lighter !important;
}

/* Bar: Toolbars, dividers, slider track */
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit,
.ui-bar-c,
.ui-page-theme-c .ui-bar-inherit,
html .ui-bar-c .ui-bar-inherit,
html .ui-body-c .ui-bar-inherit,
html body .ui-group-theme-c .ui-bar-inherit,
.ui-bar-d,
.ui-page-theme-d .ui-bar-inherit,
html .ui-bar-d .ui-bar-inherit,
html .ui-body-d .ui-bar-inherit,
html body .ui-group-theme-d .ui-bar-inherit,
.ui-bar-e,
.ui-page-theme-e .ui-bar-inherit,
html .ui-bar-e .ui-bar-inherit,
html .ui-body-e .ui-bar-inherit,
html body .ui-group-theme-e .ui-bar-inherit {
	font-weight: normal !important;
}

.ui-bar-b,
.ui-page-theme-b .ui-bar-inherit,
html .ui-bar-b .ui-bar-inherit,
html .ui-body-b .ui-bar-inherit,
html body .ui-group-theme-b .ui-bar-inherit {
	font-weight: normal !important;
}


/* Links */
.ui-page-theme-a a,
html .ui-bar-a a,
html .ui-body-a a,
html body .ui-group-theme-a a,
.ui-page-theme-b a,
html .ui-bar-b a,
html .ui-body-b a,
html body .ui-group-theme-b a,
.ui-page-theme-c a,
html .ui-bar-c a,
html .ui-body-c a,
html body .ui-group-theme-c a,
.ui-page-theme-d a,
html .ui-bar-d a,
html .ui-body-d a,
html body .ui-group-theme-d a,
.ui-page-theme-e a,
html .ui-bar-e a,
html .ui-body-e a,
html body .ui-group-theme-e a {
	font-weight: normal;
}
/* einde font-weight overrule */

.ui-overlay-c,.ui-page-theme-c,.ui-page-theme-c .ui-panel-wrapper{
  color: #555;
}

input[type="file"] {
    display: none !important;
}
label.uploadbutton {
    cursor: pointer;
    font-weight: bold !important;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 1px 10px;
    text-align: center;
}
div.suggestklikker, i.dateklikker, i.timeklikker {
    display:inline-block;
    width:0px;
    text-align:center;
    position: relative;
    left: -26px;
}
.ui-input-text input,
.ui-input-search input {
    display: inline-block!important;
}
input[type="file"] {
    display: none !important;
}

.mlegendatitel {
    margin-bottom: 4px;
}
.mlegendaregel {
    font-size: 0.8em;
    line-height: 1.8em;
    padding-left: 8px;
}