/* CSS Document */
body *{font-family:Segoe UI, Verdana, Helvetica, sans-serif;font-size:16px;}
body.saving *{cursor:progress !important;}
#container{position:absolute;/*overflow:hidden;*/width:100%;height:100%;}
html{background-color:#eae3fc;/*overflow:hidden;*/}

header{position:absolute;width:100%;height:100px;background-color:#333;z-index:500;box-sizing:border-box;padding:15px;box-shadow:0 0 4px #000000;color:#fff;}
header img{height:100%;width:auto;}
header .TipTile-logo{cursor:pointer;}
header .right{float:right;}
header .btn{background-color:#000;color:#fff;border:2px solid #fff;padding:4px;filter:invert(100%);margin-left:5px;font-variant:small-caps;line-height:12px;height:30px;box-sizing:border-box;}
header .langicon{height:30px;width:auto;padding:5px 0px;box-sizing:border-box;}
header select{padding:0px !important;line-height:normal !important;}
header .btn:hover{filter:invert(90%);}
#feedback{position:absolute;padding:10px;z-index:501;text-align:center;width:100%;}
header .tutorial{margin-left:15px;border-radius:5px;}
.tutorial{cursor:pointer;}
.tutorial:hover{filter:invert(10%);}

#ttHolder{position:absolute;top:100px;bottom:0px;width:100%;overflow:hidden;}
#ttHolder.noheader{top:0px;}
#ttContainer{position:absolute;width:160px;height:90px;box-sizing:border-box;background-size:cover;background-position:center center;background-repeat:no-repeat;font-size:0;overflow:hidden;top:50%;border:5px solid #000;}
#ttContainer *{font-size:0px;}

#loading{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.2);display:none;z-index:4999;color:#FFF;text-shadow:0 0 2px #000;}
#loading .progress{max-width:500px;top:45%;position:relative;display:inline-block;left:50%;margin-left:-250px;padding:3px;}
#loading .progressback{width:100%;background-color:rgba(255,255,255,.5);height:30px;}
#loading .filename,#loading .counter{font-weight:bold;margin:3px 0;display:inline-block;}

#tiptile_list{position:absolute;border-left:5px solid #601d75;width:320px;margin-right:-320px;top:100px;bottom:0px;right:0px;padding:0px;font-size:0px;z-index:499;background-color:#FFF;}
#tiptile_list.noheader{top:0px;}
#tiptile_list .toggler{cursor: pointer;position: absolute;top: 50px;left: -30px;width: 30px;height: 140px;background-color: #601d75;color:#fff;border-radius: 5px 0px 0px 5px;overflow:hidden;xbox-shadow: -3px 0px 2px -1px rgba(0,0,0,0.68);}
#tiptile_list .toggler span{font-weight:bold;font-size:20px;position: absolute;left: 0;top: 0;display: block;font-variant:small-caps;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);width: 140px;height: 25px;transform-origin: bottom left 0;margin-top: -12.5px;margin-left:2px;}
#tiptile_list input{height:30px;box-sizing:border-box;line-height:0;vertical-align:middle;display:block;padding:5px;}
#TipTileListContainer{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;}
.TipTileList{width:100%;}
.TipTileList td:not(:first-child) {width:20px;}
.TipTileList tr:nth-child(even){background-color:rgba(0,0,0,.04);}
.TipTileList td{padding:10px 5px;box-sizing:border-box;}
.TipTileList td:last-child{padding-right:25px;}
#tiptile_list .shared{font-style: normal;font-weight: bold;color:#000;font-size:.8em;}
*[onclick]{cursor:pointer;}

#configuratie {
	position: fixed;
	border: 5px solid #000;
	width: 400px;
	height: 100%;
	top: 0px;
	left: 0px;
	box-shadow: 0 0 4px rgba(0,0,0,0);
	/* padding: 15px; */
	/* padding-right: 20px; */
	padding-top: 30px;
	font-size: 0px;
	z-index: 1000;
	background-color: #FFF;
	box-shadow: 0 0 0 1px rgba(85,85,85,1);
	box-sizing: border-box;
}
#configuratie .handle{position:absolute;display:none;top:0px;left:0px;right:0px;width:100%;height:30px;background-color:#000;color:#FFF;text-align:center;cursor:move;font-size:25px;}
#configuratie .menu{position:absolute;top:0px;left:0px;right:0px;width:100%;background-color:#000;color:#FFF;text-align:left;}
#configuratie #configForm {
	height: calc(100% - 50px);
	overflow-y: scroll !important;
}

.page{display:block;position:absolute;width:100%;margin-top:100px;text-align:center;}
.page .feedback{color:#FFF;font-weight:bold;font-size:.8em;padding:5px 3px 8px 3px;margin-bottom:5px;text-align:center;width:100%;background-color:#F66;display:none;border-radius:3px;box-sizing:border-box;overflow:hidden;box-sizing:border-box;}/*display:block; position:absolute;width:100%;text-align:center;z-index:100;}*/
.userdata{position:relative;display:inline-block;box-sizing:border-box;width:450px;height:300px;background-color:#eee;border:4px solid #000;padding:10px;margin:10px;text-align:left;border-width:0px 4px 4px 4px;overflow:hidden;}
.userdata h1{font-weight:bold;font-size:1.2em;margin-bottom:5px;width:100%;background-color:#000;color:#fff;position:absolute;left:0;top:0;padding:10px;box-sizing:border-box;}
.userdata table{width:100%;border-collapse:collapse;border-style:dotted;border-color:#ddd;border-width:2px 0px;margin-top:30px;}
.userdata td{padding:2px 2px;border-style:dotted;border-color:#ddd;border-width:0px 0px 2px 0px;vertical-align:middle;height:30px;}
.userdata td input{width:100%;max-width:100%;border:none;border-radius:5px;background-color:rgba(255,255,255,.7);box-shadow:0 0 3px rgba(0,0,0,.6) inset;display:block;box-sizing:border-box;height:30px;padding:3px 6px;}


.accountlink{position:absolute;font-size:14px; font-style:normal;display:inline-block;bottom:0px;margin-bottom:10px;left:10px;cursor:pointer;}
.accountlink.green{background-color:#090;}
.accountlink.red{color:#900;}
.accountlink.red:hover{color:#000;}

.accountbtn{position:absolute;color:#FFF;font-size:14px; font-style:normal;font-weight:bold;padding:10px 8px !important;background-color:#999;display:inline-block;border-radius:3px;border:2px solid #fff;width:182px;box-sizing:border-box;bottom:0px;margin-bottom:10px;left:10px;}
.accountbtn.green{background-color:#090;}

.submit_userdata{position:absolute;color:#FFF;font-size:14px; font-style:normal;font-weight:bold;background-color:#090;display:inline-block;border-radius:3px;border:2px solid #fff;width:182px;box-sizing:border-box;bottom:0px;bottom:10px;left:251px;vertical-align:middle;height:38px;}
a.submit_userdata{padding:10px 8px;}

.validateWithPass{display:none;}
.validateWithPass.caption td{font-size:10px;height:auto;border:none;text-align:right;color:#090;}

/* BACKGROUNDS */
.bg_facebook{background-image:url(images/facebook.png);background-repeat:no-repeat;background-color:rgba(59, 89, 150, 1);text-align:center;color:#fff;}

/* FONT SIZES */
.bigBtn{font-size:16px;font-weight:bold;text-transform:uppercase;cursor:pointer;} /* aanmelden, inloggen */

.userform .link{margin-bottom:5px;text-align:center;width:100%;}
.userform {position:absolute;z-index:200;padding:5px;font-size:12px;font-weight:normal;text-transform:none;cursor:default;line-height:normal;width:300px;left:50%;margin-left:-150px;top:110px;text-align:left;color:#fff;}
.userform input:not([type="submit"]){margin-bottom:5px;font-family:Segoe UI, Arial, Helvetica, sans-serif;}
.userform .menu-separator{background:url(images/separator.png) repeat-x 0 50%;margin:5px 0;text-align:center;}
.userform .menu-separator span{font-size:14px;padding:0 8px;background-color:#555;color:#fff;}
.userform input[type="submit"],.userform input[type="button"]{width:100%;height:40px;border:none !important;color:#fff !important;text-transform:uppercase;font-weight:bold;cursor:pointer;background-color:#000 !important;}
.userform input[type="submit"]:hover,.userform input[type="button"]:hover{filter:invert(100%);}
.userform select{height:28px;border:none;color:#000;cursor:pointer;padding:0px;margin:0px 0px 5px 0px;font-size:12px;}
.myDatepicker{position:relative;text-align:justify;width:100%;height:33px;}
.userform #day{position:relative;max-width:22%;display:inline-block;}
.userform #month{position:relative;max-width:45%;display:inline-block;}
.userform #year{position:relative;max-width:27%;display:inline-block;}
.userform input[type="text"],.userform input[type="password"]{position:relative;width:100%;border:none;padding:5px;background-color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #000;}
.userform .invalid {border:2px solid #900 !important; background-color:#DDD !important;}
.fb_login{height:45px;line-height:45px;padding-left:45px;}
a,.link{text-decoration:none;font-style:italic;text-align:center;display:inline-block;}
.userform .feedback{color:#FFF;font-weight:bold;font-size:1em;padding:5px 3px;margin-bottom:5px;text-align:center;width:100%;background-color:#F66;display:none;border-radius:3px;box-sizing:border-box;}
.userform label{font-size:16px !important;}
.userform #upgradepro{background-color:#0C0;}

.wrongField{border-color:#900 !important;background-color:#FFD9D9 !important;}


.tiptile{position:relative;box-sizing:border-box;display:inline-block;background-color:rgba(255,255,255,0);}
.ttFilled{cursor:move;}
.emptyTile{cursor:pointer;}
.tiptile.active{border:#FC0 dashed 3px !important;}

#dismissed{position:absolute;top:480px;left:0px;width:640px;}
label{display:inline-block;font-size:18px;font-style:italic;margin-bottom:5px;}
label.range{width:205px;padding-left:3px;box-sizing:border-box;}
label.color{width:140px;}
label.text{width:140px;box-sizing:border-box;}
input, .rangeval,select{float:right;}
input[type=checkbox]{float:left;}
label.radio,input[type=radio]{float:none;}
input[type=text]{width:216px;box-sizing:border-box;border:1px solid #000;padding:3px;}
input[type=range]{width:150px;}
input[type=file]{display:none;}
label.btn:hover{filter:invert(10%)}
input[type=submit]:not(.submit_userdata),input[type=button],label.btn{display:inline-block;font-size:18px;font-style:normal;margin:0;background-color:#fff;color:#000;border-radius:0px;border:2px solid #000;padding:3px 5px;height:36px;line-height:24px;box-sizing:border-box;cursor:pointer;}
.rotate{height:25px;width:auto;margin-left:5px;}
textarea{width:100%;box-sizing:border-box;border:1px solid #000;padding:3px;resize:vertical;z-index:0;display:block;font-family: monospace !important;}

a.link{color:#FFF; font-style:normal;font-weight:bold;padding:0px 8px !important;background-color:#000;display:inline-block;border-radius:3px;border:2px solid #fff;}
a.link:hover{filter: invert(100%);}



.futureFunc{opacity:.5;pointer-events:none;}


.formItem:not(.cu){margin:0px 0px 15px 0px;}
.fileItem img,.fileItem video,.fileItem audio{max-height:100px;margin-top:3px;}
.fileItem audio{width:100%;box-sizing:border-box;}
.fileItem{padding:5px;box-sizing:border-box;background-color:#FFF;border:1px solid #000;margin:0px 0px 15px 0;}
.fileItem .formItem:not(.cu){margin:0;}
.fileItem .progress,#loading .progress{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:3px;}
.fileItem .fileName{z-index:10;}
.fileItem .progressbar,#loading .progressbar{height:100%;background-color:#09F;overflow:hidden;color:#fff;font-weight:bold;text-align:center;line-height:30px;}
.hidden{display:none;}

.tileimage{text-align:left;width:100%;padding:3px;box-sizing:border-box;background-color:#fff;color:#000;overflow:hidden;max-height:45px;font-size:.7em;}

.cu{position:absolute;margin-top:43px;right:30px;}
.cu .b_info{margin-right:-110px;}
.cu .infotext{margin-right:-30px;width:200px;}
.cutOut{width:66px;height:66px;font-size:0px;position:relative;float:right;margin:5px;}
.cutOut input[type="radio"]{display:none;}
.cutOut label{width:20px;height:20px;margin:1px;box-sizing:border-box;display:block;background-color:#FFF;border:1px solid #000;float:left;cursor:pointer;}
.cutOut input[type="radio"]:checked+label {background-color:#000;cursor:default;}

.section {padding:15px 25px 0px 15px;margin:0px;width:100%;box-sizing:border-box;display:none;background-color:#fff;height:480px;overflow-x:hidden;overflow-y:auto;}
#configuratie .section{height:100%;}
h1.sectie{display:inline-block;box-sizing:border-box;height:30px;color:#FFF;padding:5px;line-height:20px;cursor:pointer;font-weight:bold;border-collapse:collapse;}
h1.sectie:hover{background-color:#333;color:#FFF;}
h1.active{cursor:default;background-color:#FFF !important;color:#000 !important;}
#bUpload{display:none;}
.frmPreview{max-width:200px;}
.uploadFileForm{box-sizing:border-box;padding:5px;background-color:rgba(0,0,0,.05)}
.deleteFile{box-sizing:border-box;position:relative;width:20px;height:20px;line-height:16px;text-align:center;border:2px solid #000;top:0px;right:0px;background-color:#fff;float:right;font-weight:bold;color:#900;cursor:pointer;}

#progress{position:absolute;background-color:rgba(0,0,0,.8);z-index:9999;display:none;padding:20px;width:400px;left:20px;right:20px;}
#queue-list{width:400px;height:auto}

.ttUplBtn{position:absolute !important;left:0;right:0;z-index:10;width:100%;height:100%;background-color:rgba(0,0,0,0);}
.ttUplBtn input{cursor:pointer !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;}
.uploadify_knop{display:block;background-color:#FFF;border:3px solid #000;box-sizing:border-box;width:100px;height:25px;line-height:25px;display:table-cell;cursor:pointer !important;font-family:Segoe UI, Verdana, Helvetica, sans-serif;font-size:16px;}
.uploadify_knop:hover{background-color:#EEE;}
.uploadify_knop input{cursor:pointer;}


#content::-webkit-file-upload-button {
  visibility: hidden;
}
#content::before {content: 'Select some files';display: inline-block;background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);border: 1px solid #000; padding: 5px 8px;  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
#content:hover::before {
  border-color: black;
}
#content:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}



#cutout{width:60px;height:60px;}
#cutout div{width:20px;height:20px;float:left;box-sizing:border-box;border:2px solid #fff;background-color:#CCC;}
#cutout div.active{background-color:#FC0;}


#frmFooter{position:absolute;left:0px;right:0px;box-sizing:border-box;bottom:0px;padding:10px 5px 5px 5px;background-color:#000;}
.b_config{position:absolute;height:30px;cursor:pointer;left:3px;margin:3px;}
div{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

.prevnext{padding:3px;background-color:#FFF;border:2px solid #000;box-sizing:border-box;float:left;cursor:pointer;height:25px;font-weight:bold;}
#saveConfigForm,.saveConfigForm{margin-left:10px;filter: invert(100%);}
#saveConfigForm:hover,.saveConfigForm:hover,.prevnext:not(.inactive):hover{filter: invert(0%);}
#saveConfigForm.saving{background-image:url(images/loadingbar.gif);background-position:center center;background-size:auto 100%;background-repeat:no-repeat;}

.progressbar.saving{background-image:url(images/uploadingbar.gif);background-position:center center;background-size:cover;background-repeat:no-repeat;}
.prevnext img{height:100%;width:auto;}
.prevnext.inactive{opacity:.2;cursor:default;}
.prev img{-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}
.pagenum{color:#fff;padding:3px;box-sizing:border-box;float:left;height:25px;width:25px;text-align:center;line-height:18px;font-weight:bold;font-size:12px;}
.pages{position:relative;top:5.5px;width:75px;left:50px;/*margin-left:-32.5px;*/display:none;}
.invert{filter:invert(100%);}

.fullscreenbutton{width:32px;height:32px;background-image:url(images/fullscreen.png);filter:invert(100%);background-size:100% 100%;background-repeat:no-repeat;margin-left:10px;}
.fullscreenbutton:hover{width:38px;height:38px;margin:-3px -3px 0 0;}

.welcomeMessage{position:absolute;display:none;width:660px;height:570px;padding:10px;left:50%;top:50px;margin-left:-500px;font-size:1.5em;color:rgba(255,255,255,.5);font-weight:bold;line-height:1.6em;text-align:center;box-sizing:border-box;z-index:998;}


.app-block-container *{
	font-family: Verdana, "sans-serif";
	line-height: 15px;
	font-size: 12px;
}
.app-block-container h1.title {
	font-size: 2.3em;
	color: #f77936;
	font-weight: bold;
}
.app-block-container h2 {
	font-size: 1.5em;
	margin-bottom: 5px;
	color: #f77936;
	font-family: "Nunito", sans-serif;
  	font-weight: 800;
}

.app-block-container {
	padding-right:285px;
	min-width: 250px;
	width: 70%;
	display: none;
	flex-wrap: wrap;
	margin: 0 auto;
	z-index:50;
	position: relative;
}
.app-block-container > div {
	min-width:250px;
	width: 40%;
	box-sizing: border-box;
	margin: 15px;
	padding: 40px;
	border-radius: 5px;
	background-color:#fff;
	text-align: left;
}
.app-title-block{
	text-align: center !important;
}
.app-title-block,
.app-help-block,
.app-instruction-block,
.app-manual-block {
	background-color: #f0f0f0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.app-help-block{
	background-color: #611D77 !important;
	color:#fff;
}
.app-instruction-block p{
	margin-bottom:10px;
}
.app-title-block img{
	max-width:500px;
	max-height:500px;
	width:50%;height:auto; display: inline-block;position: relative;
}
.app-manual-block h2 {
	margin-top: 0;
}
.app-block-container a button {
	padding: 10px 20px;
	background-color: #611d77;
	color: white;
	border: none;
	cursor: pointer;
	border-radius:5px;
	border:2px solid #611d77;
	font-weight: bold;
}
.app-block-container a button:hover {
	background-color:white;
	color: #611d77;
}


.app-instruction-block ul,
.ul {
  display: block;
  margin: 1em 0; /* Dit kan variëren, maar vaak is het ongeveer 1em boven en onder */
  padding: 0; /* Lijst-items hebben meestal geen extra padding standaard */
  list-style-type: disc; /* De standaard lijststijl is een bolletje (disc) */
}

strong{font-weight: bold;}


.b_info.textarea{margin-top:25px;}
.infotext.contenttextarea{margin-top:40px;}

.b_info.file{margin-right:-35px;}
.b_info{width:22px;margin-right:-29px;margin-top:0px;line-height:18px;font-size:17px;text-align:center;font-weight:bold;height:auto;float:right;border-radius:35px 0 0 35px;box-sizing:border-box;background-color:#000;color:#fff;padding:2px;}
.infotext{position:absolute;max-width:200px;height:auto;padding:5px;font-size:12px;background-color:#fff;border:2px dotted #000;box-shadow:0 0 2px rgba(0,0,0,.3);margin-top:15px;line-height:14px;right:10px;}
.infotext h1{font-weight:bold;font-size:12px;line-height:inherit;}

.rotate{cursor:pointer;}

.IsIcon{display:none;}
.IsIcon+label{display:inline-block;font-size:18px;font-style:normal;margin:0;background-color:#fff;color:#000;border-radius:0px;border:2px solid #000;padding:3px 5px;height:36px;line-height:24px;box-sizing:border-box;cursor:pointer;}

.sharedBody{display:none;}

.sharedBody .lightbox{z-index:1000;}
.sharedBody #legenda {
	z-index: 1001;
	bottom: 210px;
	position: fixed;
}
.sharedTipTiles {
	height: 100%;
	width:200px;
	overflow: scroll;
	xbottom: 0px;
	background: #fff;
	overflow-x: hidden;
	border-top: 4px solid #601d75;
	z-index:498;
}