/*
magenta #b51d1d;
grey: #5e5e5e; (text)
*/

/* STANDARD TAGS */

/* CUSTOM GENERAL CLASSES */
.alpha { opacity: 0.5; }
.back_white { background-color: white !important;  }
.back_white h1, .back_white h2, .back_white h3 { color:#b51d1d!important; }
.back_color { background-color:#A4B51B; }
.back_color h1, .back_color h2, .back_color h3, .back_color p, .back_color a { color:#fff!important; }
.back_color a { text-decoration: underline;}
.back_grey { background-color: #efefef !important; }
.back_dark { background-color: #5A5A58 !important; color:#fff; }
.back_light { background-color: #c1b19d !important; }
.boxshadow { -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.2);-moz-box-shadow:    0px 0px 3px 1px rgba(50, 50, 50, 0.2);box-shadow:         0px 0px 3px 1px rgba(50, 50, 50, 0.2);}
.block { display: block !important; }
.blur {-webkit-filter: blur(20px);  -moz-filter: blur(20px);  -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px);  opacity: 0.4; margin:-20px; width:200%;     height:200%;}
.btn_base { cursor: pointer; text-align: center; }
.btn { padding: 6px 5px 8px 5px; font-size: 16px; }
.btn_disabled { opacity: 0.3; }
.btn_dark, .btn_light, .btn_grey { cursor: pointer; text-align: center; margin: 0px; padding: 12px 15px 10px 15px; font-size: 17px; border-radius:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#fff;}
.btn_dark { background-color: #f37121; border:none;}
.btn_light { background-color: #c1b19d; border:none; }
.btn_grey { background-color: #ccc; }
.btn_light:active, .btn_dark:active { }
.btn_big { padding: 13px 19px 12px 19px; font-size: 19px; font-family:'Helvetica'; font-weight:normal; }
.btn_bighome { height:80px; width:225px; padding:0px; line-height:19px;}
.btn_small { font-size: 14px !important; }
.btn50 { width: 48%; margin-right: 4%; float: left; height: auto; padding-left: 0px; padding-right: 0px; }
.btn_close { margin: -9px -14px 0px 0px; padding: 5px; }
.btn_center{ display:inline-block; float:none; clear:both;}

.border { border: solid 1px #ffcdce; border-radius:25px; }
.bordno { border: none !important; }
.bordbot { border-bottom:#b51d1d solid 1px; }
.bordtop { border-top: solid 1px #efefef; }
.bordnotop { border: 1px solid #efefef; border-top: none; box-sizing: border-box; -webkit-box-sizing:border-box;}

.color_txt { color: #A4B51B; }
.color_inactive_txt { color: #aaa; }

.center { margin-left: auto !important; margin-right: auto !important; display: block; float: none; }
.center50p { width: 50%; margin: 0px auto; }
.center_txt { text-align: center; }
.clear { clear: both; }
.clearfix { display: block; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.col33p { width: 32%!important;  float: left; margin-right:4px!important; }
.col45p { width: 45%!important; float: left; }
.col50p { width: 50%!important; float: left; }
.col55p { width: 55%!important; float: left; }
.col65p { width: 65%!important; float: left; }

.currentpage { display: block !important; } /* TODO: nog nodig? */

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floatl { float: left !important; }
.floatr { float: right !important; }
.flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; }
.flex-item { -webkit-flex: 1 0 auto; flex: 1 0 auto; }
.fixed { position: fixed !important; }

.indent { padding-left: 1em; }
.imgempty { width: 100%; height: 130px; text-align: center; font-style: italic; padding-top: 105px; opacity: 0.8; }
.line       { border-bottom: 1px solid  #5b524f; }
.linedotted { border-bottom: 2px dotted #5b524f; }
.list_content { margin-top:-6px; background:rgba(255,255,255,0.3); }
.list_content li { padding:8px; background:rgba(255,255,255,0.3); border:2px solid #d8d1c9; border-top:none;}
.suggest_list_empty_notice { padding:8px; border:2px solid #d8d1c9; border-top:none; font-style:italic;}
.msg_wrong, .msg_notice, .msg_right { display: block; padding: 15px 15px; color: #fff; margin-top:12px; box-sizing:border-box; text-align:center; }
.msg_wrong p, .msg_notice p, .msg_right p { margin:0px 0px 6px 0px;}
.msg_wrong p:last-child, .msg_notice p:last-child, .msg_right p:last-child { margin:0px;}
.msg_wrong a, .msg_notice a, .msg_right a { color: white !important; }
.msg_wrong { background-color: #a43324; }
.msg_notice { background-color: #5b524f; }
.msg_right { background-color: #435737; }

.none { display: none !important; }
.no_underline { text-decoration: none !important; }
.nobreak{ white-space:nowrap;}



.margtop       { margin-top:    15px !important;} .margtopno     { margin-top: 0px !important; } .margtopneg     { margin-top: -14px !important; }
.margtophalf   { margin-top:    7px  !important;}
.margtopdouble { margin-top:    30px !important;}
.margtoptriple { margin-top:    45px !important;}
.margno        { margin:        0px  !important;} .margnobot     { margin-bottom: 0px  !important;} .margnoright   { margin-right:  0px  !important;}
.margbot       { margin-bottom: 15px !important;} .margbothalf   { margin-bottom: 7px  !important;}
.pad           { padding:       15px !important;}
.paddouble     { padding:       30px !important;}
.padtopbot     { padding-top:   15px !important;
                 padding-bottom:15px !important;}
.padtop        { padding-top:   15px !important;} .padnotop      { padding-top:   0px!important;}
.padtopheader  { padding-top:   57px !important;}
.padbot        { padding-bottom:15px !important;} .padnobot      { padding-bottom:0px!important;}
.padtophalf    { padding-top:   7px  !important;}
.padbothalf    { padding-bottom:7px  !important;}
.padside       { padding-left:  15px !important;
                 padding-right: 15px !important;}
.padleft       { padding-left:  15px !important;} .padnoleft     { padding-left:  0px!important;}
.padright      { padding-right: 15px !important;} .padnoright    { padding-right: 0px!important;}
.padfooter     { padding-bottom:70px !important;}
.padno         { padding:       0px  !important;}

.relative      { position: relative; }
.strikethrough { text-decoration: line-through; }

.txt_bigger { font-size: 150%;font-family:'Helvetica'; }
.txt_xs  { font-size: 80%;  }
.txt_s  { font-size: 90%;  }
.txt_l  { font-size: 120%; font-family:'Helvetica';}
.txt_left { text-align:left;}
.txt_white  {color:#fff!important;}
.txt_white a, .txt_white .afake { color:#fff!important; text-decoration:underline;}
.vertcenter span { display: -moz-inline-box; display: inline-block; line-height: normal; vertical-align: middle; }
.vertcenter li span { display: -moz-inline-box; display: inline-block; line-height: normal; vertical-align: middle; }

/* ICONS */
.icon_small { width:25px; height:25px; float:left; margin:-4px 7px 0px -4px;}
.icon_small img { width:25px; height:25px;}

.icon_base { background-size: 40px 40px; -webkit-background-size: 40px 40px; background-repeat: no-repeat; width:40px; height:40px; background-position: center; }
  .icon_back    { background-image: url(../img/icon_back.png); float:left; }
  .icon_info    { background-image: url(../img/icon_info.png); margin:-13px -13px 0px -10px; float:right; }
  .icon_share   { background-image: url(../img_generic/icon_share.png); }
  .icon_close   { background-image: url(../img/icon_close.png); float:right; }
  


  .icon_min     { background-image: url(../img/icon_min.png); }
  .icon_plus    { background-image: url(../img/icon_plus.png); }
  .icon_settings{ background-image: url(../img/icon_settings.png); background-position: center; float:right; padding:10px 5px; margin-top:0px}
  .icon_logout  { background-image: url(../img/icon_logout.png); background-position: center; float:right; padding:10px 5px; margin-top:0px}
  .icon_refresh { background-image: url(../img/icon_refresh.png); padding:7px; margin:0px -15px;  }
  .icon_refresh.animate { animation-duration: 1.2s;  animation-name: refreshrotate;  animation-iteration-count: infinite;  animation-direction:reverse; 
    animation-timing-function: linear; -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */}
  @keyframes refreshrotate {
    from { transform:rotate(0deg); -webkit-transform:rotate(0deg);  }
    to {   transform:rotate(360deg); -webkit-transform:rotate(360deg);  }
  }


/* TODO: EXAMPLE OF SOME ANIMATION (NOT USED NOW) */
#something { background: #fff; transition: transform 0.4s ease-in-out; -webkit-transition: -webkit-transform 0.4s ease-in-out; position: fixed; top: 0px; right:-75%; z-index: 11; width: 75%; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; height:100%; }
.animatingleft { transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); }
.animatingdown23{ top:265px!important; }

.Page { padding:15px; clear: both; position: relative; min-height: 100%; /*height:100%;*/ box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.overlay_base { background: #fff; display: none; width: 90%; max-width: 530px; padding: 15px 10px; }
#content_overlay { position: fixed; z-index:10; width: 100%; height: 100%; display:none; background: rgba(0,0,0,0.8);  }
#fixedfooter { display: none; position: fixed; bottom: 0px; width: 100%; max-width: 600px; z-index: 5; }
.contentblock ul { padding-left: 16px; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; }
.olli { max-width:350px; width: 90%;}

/* MODULE: LIST_BASE  */
.list_base { margin-top: 0px; }
.list_base li { clear: both; display: block; padding: 10px 0px; border-bottom: 1px solid #ccc; }
.list_base li:first-child { padding-top:0px;}
.list_base li:last-child { border-bottom: none; padding-bottom:0px;}


/* MODULE: POPUPS */
.popup { width: 80%; max-width: 400px; margin: 10px auto; border:none; position: relative; height: auto; background: #e9e3da; box-sizing: border-box; -webkit-box-sizing:border-box; margin-top: 40px; padding:0px; }
.popup-text { text-align: center; }
.popupwide { width: 90%; }
.maillist { padding:15px; list-style: initial;}
.mfp-hide-close .mfp-close { display: none; }

/* Fixes for iOS devices */ /* TODO: IOS7BAR in aparte stylesheet? */
.mfp-wrap {   -webkit-overflow-scrolling: touch;}
#ios7bar { position: fixed; z-index: 100; width: 100%; height: 20px; background: #efefef; padding: 0px; top: 0px; margin: 0px; display: none; left: 0px; }

/* FOTO */
#foto { -webkit-background-size: 100% auto; background-repeat: no-repeat; background-position: center; height: 100%; width: 100%;}


/* MODULE: FORMS  */
form { margin: 0; padding: 0; float: none; top: 0; right: 0px; }
input, textarea, select, .fakeinput { background-color: #FFF; font-family:"pt_sansregular",sans-serif; text-align:center; font-weight: 300px; color: #626262; width: 100%; border:2px solid #d8d1c9; border-radius:3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
input, .fakeinput { margin: 6px 0px; font-size: 18px; padding: 8px 8px; }
select {     text-align-last: center;}
.fakeinput {  padding: 10px 8px 9px 8px; display: block; height: 40px; font-size:15px;}
::-webkit-input-placeholder { color: #ccc;}
:-moz-placeholder {    color: #ccc;  }
::-moz-placeholder {  color: #ccc; }
:-ms-input-placeholder {     color: #ccc; }

textarea { margin: 6px 0px; font-size: 18px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 8px; }
select { margin: 8px 0px; font-size: 18px; width: 100%; height: 42px; padding:8px; text-align:center; }
input[type="text"]:disabled { opacity:0.5;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {   -webkit-appearance: none;   margin: 0; }
.input_big { height: 40px; font-size: 18px !important; text-align:center; }
.input_maxwidth{ width:225px;}
.label, .fakelabel { clear: both; padding: 14px 0px 0px 0px; width: 25%; display: block; float: left; font-size: 13px; }
.input_xsmall{ width: 30px; }
.input_small { width: 60px; }
.in_date { font-size:15px!important}
.textarea_big{ height:100px;}
.labeledcheck { margin: 5px 0px 7px 0px; padding: 0px; width: 75%; float: right; font-size: 13px; }
.checkbox { width: 20px; }
.checklabel { padding: 10px 30px; display: block; margin-top: -41px; }
.custom_checkblock { clear: both; display: block; float: left; padding-bottom:12px; }
.checkbox_hide { display: none; }
.custom_checkbox { width: 28px; height: 28px; border: 1px solid #ccc; background: #fff; float: left; padding: 3px; box-sizing: border-box; }
.custom_checklabel { margin: 0px 0px 0px 36px; min-height: 30px; line-height: 30px; }
.custom_checkhide { opacity: 0 !important; }


.radiolabelactive { border: 1px solid !important; box-sizing: border-box; }
.radiolabelwrong { border: 1px solid #cc0000 !important; color: white !important; box-sizing: border-box; background: #c00; }
.searchfield { padding-right: 39px; }
.clear_box { position: relative; width: 100%; text-align: center; }
.clear_field { padding-right: 17px; /* add space for the 'x' icon*/ }
.clear_box .icon_clear { position: absolute; right: 0px; top: 10px; padding: 3px; display: none; cursor: pointer; font: bold 1em sans-serif; color: #777; }

.inputfieldwrong { border: 1px solid #db4d00 !important; color: #db4d00 !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#login_fields { width: 225px; margin: 0px auto; }

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
/* niet nodig ivm standard style die al groter is    
  select:focus, textarea:focus, input:focus { font-size: 16px; }  
*/
}