body,
html {
  margin: 0;
  padding: 0;
  background-color: white;
  /*overflow-x: hidden;*/
  font-family: Helvetica, Arial, sans-serif;
  color: #000020;
  /*user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-content-zooming: none;*/
}
body.menuopen.mobile,
html.menuopen.mobile {
  overflow-y: hidden;
}
body.menuopen.mobile .col3, body.menuopen.mobile .flex, .mobile .flex, .mobile .col3 {
  overflow: hidden;
}
.mobile .topsticky{
	position:relative;
}
*:not(input):not(textarea),
html {
  /*user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;*/
  /* disable selection/Copy of UIWebView */
  /*-webkit-touch-callout: none;*/
  /* disable the IOS popup when long-press on a link */
}
body {
}
.content .inner .whitebox {
  padding: 10px;
  background: #ffffff;
  border-radius: 4px;
}
.content .inner .homebox.nubox .whitebox {
  margin-right: 10px;
}
p {
  margin: 0 0 20px 0;
  max-width: 800px;
}
.mobile .left-menu #menulogo {
	padding-top:40px;
}
.left-menu hr{
	border-color:#ff5800;
	/*border-bottom-width:0;*/
	margin:30px 0;
}
.left-menu {
  float: left;
  width: 200px;
  height: 100%;
  display: none;
  position: fixed;
  background-color: #000020;
  overflow-y: auto;
  overflow-x: hidden;
  top:0;
}
.notmobile .left-menu{
	display:block;
}
.left-menu #menulogo {
  width: 110px;
  height: 131px;
  padding:45px;
  padding-bottom:10px;
}
.left-menu a,.left-menu a:visited {
  width: 180px;
  display: block;
  height: 30px;
  padding-left: 20px;
  padding-top: 10px;
  text-decoration: none;
  color: white;
}
.left-menu a.current {
  background-color: #000080;/*#ff5800;*/
  color: white;
}
.left-menu a:hover {
  background-color: #ff5800;/*#ff5800;*/
  color: white;
}
.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu li {
  margin: 0;
}
#hidemenu {
  background-color: black;
  opacity: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  display: none;
  left: 0px;
  top: 0px;
  z-index: 200;
}
ul {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
.menubutton,
.backbutton {
  float: left;
  display: block;
  width: 53px;
  height: 53px;
  background-position: left top;
  background-size: 53px 53px;
}
.menubutton a,
.backbutton a {
  width: 53px;
  height: 53px;
  display: block;
}
.menubutton {
  background-image: url('../images/icons/menu.png');
}
.backbutton {
  background-image: url('../images/icons/back.png');
}
.notmobile .menubutton {
  display: none;
}
.mobile .header {
  background-color: #000020;
}
.header {
  background-color: #f0f0f0;
  height: 52px;
  /*
	height : 100%;
	*/
  top: 0;
  position: fixed;
  /* fixed werkt niet goed in iOS, maar absolute ook niet, dan raakt 'ie de balk helemaal kwijt
	position : absolute;
	*/
  overflow: hidden;
  z-index: 100;
  border-bottom: 1px solid #cccccc;
  /*box-shadow: 0 5px 10px -2px #808080;*/
}
.footer{
	clear:both;
	padding:20px 10px 20px 10px;
  background-color: #f7f7f7;
  border-top: 1px solid #cccccc;
  color:#000080;
  margin-top:20px;
}
.content {
  margin-top: 53px;
}
.content h2,
.content h3,
.content h4 {
  margin: 0;
  padding: 10px 0 0 0;
  color: #000020;
}
.mobile.menuopen .content .inner,.mobile.menuopen .content .innerfull {
  overflow-y: hidden;
}
.phonepreviewbox{
	background: url("/images/phone frames/iPhone-8-Plus-Space-Gray-w230.png");
	width:230px;
	height:461px;
    margin-top: 25px;
    padding-bottom: 10px;
    background-repeat: no-repeat;
}
.iframediv{
	/*margin-left: 15px;/*33px*/
	/*padding-top: 53px;/*114px*/
	/*margin-right:15px;
	/*width:200px;/*was 200*/
	/*height:354px;/*was 354*/
	/*overflow-x:hidden;
	/*overflow-y: scroll;
    -webkit-overflow-scrolling: touch;*/
}

.phonepreviewbox iframe{
	margin-left: 15px;/*33px*/
	margin-top: 53px;/*114px*/
	margin-right:15px;
	width:400px;/*was 200*/
	height:708px;/*was 354*/
	border:0;
	/*zoom: 0.75;*/
	-ms-zoom: 0.5;
	-moz-transform: scale(0.5);
	-moz-transform-origin: 0 0;
	-o-transform: scale(0.5);
	-o-transform-origin: 0 0;
	-webkit-transform: scale(0.5);
	-webkit-transform-origin: 0 0;
	overflow:hidden;
}
.content .inner {
  padding: 10px;
  /*overflow-x: hidden;*/
}
.content ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.content ul li {
  margin: 0;
}
.mobile.menuopen .page {
  overflow-x: hidden;
}
.mobile.menuopen .content {
  overflow: hidden;
}
.menuopen .content {
  /*overflow-y: hidden;*/
}
.page {
  display: block;
  /*overflow-x: hidden;*/
  /*
	-webkit-overflow-scrolling: touch;
	*/
  -webkit-overflow-scrolling: auto;
  /*
	height: 100%;
	*/
  top: 0;
}
#container {
  /*overflow: hidden;*/
}
.mobile h1{
	color:#ffffff;
}
h1 {
  /*
	margin:0;
    padding:11px @headerheight 11px 0;
	*/
  color: #000080;
  /*text-align: center;*/
  /*text-overflow: ellipsis;*/
  padding-left:10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  padding-top:5px;
}
table,
ul,
ol {
  /*margin: 0 0 20px 0;*/
  margin: 0;
}
.topsticky{
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position:sticky;
	top:0;
	display: block;
	background-color: #ffffff;
}
.bottomsticky{
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position:sticky;
	bottom:0;
	border-top:1px solid #ccc;
	display: block;
	z-index:150;
	background-color: #ffffff;
	height: 52px;
}
.mobile #previewbutton{
	display:inline-block;
}
.button{
	height: 40px;
    min-width: 100px;
    /*background-color: rgba(0,0,32, 0.2);*/
	background-color: white;
    color: #000080;
    border: 1px solid #000080; 
    /*border: 0;*/
    border-radius: 5px;
    /*padding: 5px;
    background: #000020;
    text-align: center;
    border-radius: 14px;
    color: #ffffff;
	height: 18px;
    display: inline-block;*/
	font-size:16px;
}
button.smallbutton { 
	height: 30px;
}

.topsticky .button, .bottomsticky .button{
    margin-left: 10px;
    margin-top: 6px;
}

.topsticky button.button, .bottomsticky button.button{
	height: 40px;
}

tr:nth-child(even) {
    background-color: #eee;
}

table {
    border-spacing: 0;
    border-bottom: 1px solid #000020;
}

thead th {
    border-bottom: 1px solid #ff5800;
	color: #000020;
}

table td {
    /*padding: 2px 5px;*/
}
table td, table th{
	padding: 5px;
}

.button:hover{
    /*background: #000080;*/
    border: 1px solid #ff5800; 
}
a.button, a.button:visited{
	text-decoration: none;
	height: 18px;
	padding: 5px;
    display: inline-block;
	margin:0;
	color: #000080;
}
a, a:visited{
	color: #000080;
	text-decoration: none;
}
a:hover{
	color: #ff5800;
}
.highlightbutton{
	height: 40px;
    min-width: 100px;
    background-color: #ff5800;
    color: white;
    /* border: 1px solid #000020; */
    border: 0;
    border-radius: 5px;
    float: right;
}

.topsticky .highlightbutton, .bottomsticky .highlightbutton{
    margin-right: 10px;
    margin-top: 6px;
}

a.highlightbutton,a:visited.highlightbutton{
	height: 20px;
    min-width: 100px;
    /*background-color: #ff5800;*/
    color: white;
    border: 1px solid #ff5800;
    border: 0;
    border-radius: 5px;
    float: left;
    padding: 10px;
}/*
a.highlightbutton:hover,a:visited.highlightbutton:hover{
background-color: #ff5800;
}*/
.spacer {
  margin: 10px;
  margin-right: 15px;
}
.clr {
  clear: both;
}/*
.suggestions{
	display:none;
}*/
/*
.homebox {
  float: left;
  width: 50%;
  min-width: 300px;
}/*
.PhotoButton {
  position: absolute;
  width: 50px;
  height: 75px;
  z-index: 10;
}
.PhotoButton.left {
  left: 10px;
}
.PhotoButton.right {
  right: 10px;
}
.noscrollbuttons .PhotoButton {
  display: none;
}
.menuopen .PhotoButton.left {
  left: 310px;
}*/
.externallink{
	width:30px;
	border:1px solid #ccc;
	border-left:0;
	float:left;
}

.externallink img.icon{
	float:left;
	max-width:30px;
	max-height:100px;
	margin: 5px;
    width: 20px;
}
.externallink:hover{
	cursor:pointer;
	background: #f0f0f0;
}
.externallink::after {
  content: "";
  clear: both;
  display: table;
}
.appselectionpreview.empty{
	width: 100%;
}
.appselectionpreview{
	float:left;
	width: calc(100% - 33px);
	height:30px;
	border:1px solid #ccc;
	white-space: nowrap;
	overflow-y: hidden;
}
.appselectionpreview img.appicon{
	float:left;
	max-width:30px;
	max-height:100px;
}

.appselectionpreview .apptitle{
	padding-top:0px;
	margin-left:40px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#000020;
}

.appselectionpreview .appsearch{
	padding-top:8px;
	margin-left:40px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#000020;
}

.appselectionpreview .apppublisher{
	margin-left:40px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#ff5800;
	margin-top: -6px;
    font-size: 12px;
}
.appselectionpreview:hover{
	cursor:pointer;
	background: #f0f0f0;
}
.appselectionpreview:active{
	background: white;
}
.appsuggestion{
	width:100%;
	height:50px;
	/*border-top:1px solid #ccc;*/
	border-bottom:1px solid #ccc;
	white-space: nowrap;
	overflow-y: hidden;
}
.appsuggestion:hover{
	cursor:pointer;
	background: #f0f0f0;
}
.appsuggestion:active{
	background: white;
}
.appsuggestion img.appicon{
	float:left;
	max-width:50px;
	max-height:100px;
	margin-left:5px;
}

.appsuggestion .apptitle{
	padding-top:5px;
	margin-left:60px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#000020;
}

.appsuggestion .apppublisher{
	margin-left:60px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#ff5800;
}

.appsuggestion .desc, .appsuggestion .screenshots{
	display:none;
}

.selectapp{
	padding-left:5px;
}
.col1{
	
	overflow-x:hidden;
}
.col1, .col3{
	background-color:#ffffff;
	z-index:10;
}
.col2{
	overflow-x:hidden;
}
.col2 > div {
	display:none;
}
.flex{
	display:flex;
	/*overflow-x:hidden;*/
}
textarea{
	max-width: calc(100% - 6px);
}
.selectlogo input{
	display:none;
}
.selectlogo input[type="radio"]:checked+label img{
	border: 2px dashed #ff5800;
}
.selectlogo img{
	float:left;
	width:100px;
	height:100px;
	border: 2px solid #ffffff;
}
.col2 #logopreview{
	width:200px;
	height:200px;
}
ul.check {
    list-style-image: url('/images/icons/check.png');
	padding-left:40px;
}

.assetbutton {
    float: left;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow-y: hidden;
}
.assetbutton:hover{
	cursor:pointer;
	background: #f0f0f0;
}

#backgroundcolorpreview{
	float:left;
	width:30px;
	height:30px;
}

.assettitle{
	padding-top:0px;
	margin-left:40px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#000020;
}
.content .innercol {
    padding: 10px;
}

.assettitlefull{
	padding-top:0px;
	margin-left:5px;
	height:24px;
	width:calc(100% - 20px);
	overflow:hidden;
	display:block;
	color:#000020;
}

.assetsubtitle{
	margin-left:40px;
	height:24px;
	width:calc(100% - 60px);
	overflow:hidden;
	display:block;
	color:#ff5800;
	margin-top: -6px;
    font-size: 12px;
}
.assetsubtitlefull{
	margin-left:5px;
	height:24px;
	width:calc(100% - 20px);
	overflow:hidden;
	display:block;
	color:#ff5800;
	margin-top: -6px;
    font-size: 12px;
}
img.assetimage{
	float:left;
	max-width:30px;
	max-height:100px;
}


@media only screen and (max-width: 813px) {
	.col1{
		width: calc(100% - 21px);
		/*float:left;*/
		padding-right:10px;
		padding-left:10px;
		border-right:1px solid #ccc;
		min-height:100%;
	}
	.col2{
		/*width: calc(50% - 20px);*/
		width:100%;
		/*float:left;*/
		/*padding-right:10px;
		padding-left:10px;*/
		min-height:100%;
		display:none;
	}
	.col3{
		width: calc(100% - 20px);
		/*float:left;*/
		padding-right:10px;
		padding-left:10px;
		display:none;
		min-height:100%;
		z-index:11;
	}
}
@media only screen and (min-width: 814px) and (max-width: 949px) {
	.col1{
		width: calc(50% - 21px);
		/*float:left;*/
		padding-right:10px;
		padding-left:10px;
		border-right:1px solid #ccc;
		min-height:100%;
	}
	.col2{
		/*width: calc(50% - 20px);*/
		width:50%;
		/*float:left;*/
		/*padding-right:10px;
		padding-left:10px;*/
		min-height:100%;
	}
	.col3{
		width: calc(50% - 20px);
		/*float:left;*/
		padding-right:10px;
		padding-left:10px;
		display:none;
		min-height:100%;
		z-index:12;
	}
}
@media only screen and (min-width: 950px) {
	.col1{
		width: calc(33% - 21px);
		/*float:left;*/
		padding-right:10px;
		padding-left:10px;
		border-right:1px solid #ccc;
		min-height:100%;
	}
	.col2{
		/*width: calc(34% - 21px);*/
		width: calc(34% - 1px);
		/*float:left;*/
		/*padding-right:10px;
		padding-left:10px;*/
		border-right:1px solid #ccc;
		min-height:100%;
	}
	.col3{
		width: calc(33% - 20px);
		/*float:left;*/
		padding-right:10px;
		padding-left:10px;
		min-height:100%;
		z-index:13;
	}
	#previewbutton{
		display:none;
	}
}
.mobile .headerright img{
	margin-left: 6px;
	background-color: white;
}

.mobile .headerright .teamselector{
	display: none;
}

.mobile .headerright{
	width: 52px !important;
}

.mobile .popup{
	left: 0;
	right: 0;
	width: 100%;
}
.mobile .popup ul, .mobile .popup div{
	width: 100% !important;	
}
.mobile .popup li, .mobile .popup div{
	padding: 10px !important;
}
.hidden {
    visibility: hidden;
}
.invisible {
    display: none;
}
.error {
	color: red;
}
.form {
    border: 1px solid #000080;
    padding: 10px;
    border-radius: 5px;
}
.right {
	float: right;
}
.smallWidth {
	max-width: 1024px;
}