@font-face {
    font-family: 'HelveticaRounded LT Std BdCn'; /*a name to be used later*/
    src: url('/Content/Fonts/HelveticaRoundedLTStd-BdCn.otf'); /*URL to font*/
}


@font-face {
    font-family: 'Source Sans Pro'; /*a name to be used later*/
    src: url('/Content/Fonts/SourceSansPro-Regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'Source Sans Pro Semibold'; /*a name to be used later*/
    src: url('/Content/Fonts/SourceSansPro-Semibold.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'Source Sans Pro Bold'; /*a name to be used later*/
	font-weight: bold;
    src: url('/Content/Fonts/SourceSansPro-Bold.ttf'); /*URL to font*/
}


* {
	font-family: 'Source Sans Pro';
}

h3 {
	margin: 2px 0;
}


a {
	text-decoration: none !important;
}

div[data-role="page"] div[data-role='header'] {
	background: white !important;
}

div[data-role='header'] {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
	height: 50px !important;
	text-align: center !important;
}

div[data-role='header'] h1 {
	color: #000000 !important;
    font-size: 26px !important;
    text-transform: uppercase;
	vertical-align: bottom;
}

/* Display header image and text inline. */
.headerImage {
    float: left;
    height: 50px;
}

/* Resize the header image (sets the header size). */
.headerImage img {
    height: 50px;
		
}

/* Display the menu image on the right. */
.headerMenu {
    float: right;
    height: 50px;
    vertical-align: top;
}

.headerMenu .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.headerMenu img {
    vertical-align: top;
	height: 50px;
}

.bg-blue {
	background-color: #1dbbee !important;
    color:white;
}

.bg-green {
	background-color: #94cc76 !important;
    color:white;
}

.border-blue {
	border-color: #1EBFED !important;
}

.border-green {
	border-color: #94cc76 !important;
}

/*

.circle {
	width: 32vw;
}
*/

.alt-font {
	font-family: 'HelveticaRounded LT Std BdCn';
	font-weight: normal !important;
}

.menuButton {
	width: 50%;
    height: 40vw;
    background-color: #1dbbee;
    text-align: center;
}

.menuButton  > a {
	color: white !important;text-decoration: none;
}
.menuButton img {
	margin-bottom: 2vw;height: 10vw;
}

.menuButton2 {
	width: 100%;height: 30vw;background-color: #000;text-align: center;
}
.menuButton2 img {
	height: 10vw; vertical-align: middle;margin-right: 2vw;
}

.menuButton2  > a {
	color: white !important;text-decoration: none;
}

.menuButton > a > div {
    display:table;
    width: 100%;
    height: 100%;
}

.menuButton > a > div > div {
    display:table-cell;
    vertical-align: middle;
}

@media only screen and (min-width: 425px) {
	.menuButton {
		width: 50%;height: 120px; background-color: #1dbbee;text-align: center;
	}

	.menuButton img {
		margin-bottom: 8px;height: 40px;
	}

	.menuButton2 {
		width: 100%;height: 60px;background-color: #000;text-align: center;
	}
	.menuButton2 img {
		height: 40px; vertical-align: middle;margin-right: 4px;
	}
	.menuButton2  > a {
		color: white !important;text-decoration: none;
	}

}

.settingsButton {
	width: 35%;height: 40vw;text-align: center;
}
.settingsButton > a {
	color: white !important;text-decoration: none;
}
.settingsButton img {
	margin-bottom: 1vw;height: 20vw;
}


.green-circle {
	display: -moz-inline-stack; /* RZU: hack for safari */
	display: inline-block;
	width: 36px;
	width: 10vw;
	height: 36px; 
	height: 10vw; 
	border-radius: 50%;
	text-align:center;text-decoration: none;
	line-height: 36px;
	line-height: 10vw;
	font-size:16px;	font-size: 5vw;
	border: 2px solid #94cc76;
	border:1vw solid #94cc76;
	
	color: black !important; background: #fff;
}



.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.tagLabel {
 /*   display: inline-block;*/
}

.tagLabel.ui-li-route-count:not(:first-child)  {
    margin-left: 18px;
	width: 40px;
	text-align: right;
}

.flipH {
    -moz-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

/* jquery mobile theme overrides */


.ui-content {
	padding: 0 !important;
}

.ui-btn[data-role='button'], .ui-btn[data-role='button']:visited, .ui-btn[data-role='button']:active {
	background: black !important; color: white !important;
	box-shadow: none !important;
	font-family: 'Source Sans Pro Semibold' !important;
}

.ui-header, .ui-slider-bg {
	border: none !important;
	background-color: #1dbbee !important;
}

.ui-slider-bg {
    border-radius: 10px !important;
}

.ui-title {
	color: white !important;
	margin: 0 auto !important;
}

.ui-body-a {
	border: none !important;
}

.ui-btn.ui-slider-handle {
	border: none;
	border-radius: 16px !important;
}

.ui-slider .ui-slider-track {
    background-color: #ffffff;
    border-color: #1dbbee;
    border-radius: 16px;
}

.ui-icon-carat-d::after {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%231dbbee%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E");
}

.ui-select > .ui-btn {
	color: black !important;
	background: #ffffff !important;
}


.ui-slider-handle {
	background-color: black !important;
}

/* .ui-page .ui-slider input#extraminutes = Input spinner */
/*
.ui-page .ui-slider input#extraminutes .ui-spinner-button {
    background-color: #1dbbee !important;
}
*/

/* Portrait */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {


/*Geen button bar voor mobile devices with low resolution*/
    div[data-role="footer"] {
		display: none;
	}
}


@media only screen and (min-width: 425px) {
	/*Geen button bar voor laptops*/
	div[data-role="footer"] {
		display: none;
	}
}



.ui-page .menuFooter { /* Alle Footer */
    height: 30vw;
    background: #ffffff;
	padding-top: 2vw;
}

.ui-page .menuFooter .icon-container {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.ui-page .menuFooter .icon-container img {
    width: 16vw;
}

/* Bij aanpassen van left/right margin, ook: ".ui-page#punten .ui-content .bg-green" aanpassen */
.ui-page .ui-content .content-inset-no-top {
    margin: 2% 4% 0 4%;
}

.ui-page .ui-content #content-data-container {
    margin: 2% 4% 2% 4%;
}


/* ===== PUNTEN PAGE ===== */

.ui-page#punten .ui-content {
    margin: 0px !important;
}


.ui-page#punten .ui-content img {
    position: absolute;
    top: 4.5em;
}

.ui-page#punten .ui-content table {
    table-layout: fixed;
    width: 100%;
    font-weight: bold;
    border-collapse: collapse;
    margin-bottom: 1em;
    margin-top: 1em;
}

.ui-page#punten .ui-content table tr:first-child td {
    padding-bottom: 1em;
}

.ui-page#punten .ui-content table tr {
    vertical-align: bottom;
}

.ui-page#punten .ui-content table td span {
    margin-left: 0.5em;
}

.ui-page#punten .ui-content table td:nth-child(odd) {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #1dbbee;
    max-width: 4em;
}

.ui-page#punten .ui-content .bg-green {
    color: #ffffff;
    padding: 0.1% 4% 2% 4%;
    margin-bottom: 1em;
}

.ui-page#punten .ui-content .bg-green table td:nth-child(odd) {
    border-right-color: #ffffff;
}

/* ===== RITINFO PAGE ===== */

.ui-page#ritdetail .ui-content .ui-li-static {
	background-color: #1dbbee;
    color: #ffffff;
    border-width: 0px;
}

.ui-page#ritdetail .ui-content .ui-li-static .cellheading {
    display: inline-block;
    width: 50%;
    font-weight: bold;
}

.ui-page#ritdetail .ui-content .ui-li-static .celldetail {
    font-weight: normal;
}

/* ===== RITTEN PAGE ===== */

.ui-page#ritten #tripList {
    box-shadow: none;
}

.ui-page#ritten .ui-li-divider { 
    padding: 1.8em 0em 0.5em 0em;
    font-size: 1em;
}

.ui-page#ritten .ui-bar-inherit { /* Footer en list separators in Ritten*/
    background: #ffffff;
}

.ui-page#ritten #tripList .ui-btn { /* Individual list items (button) */
    width: 100%;
    background-color: #ffffff;
    font-weight: 100;
    border: solid 0px white;
    border-bottom: solid 1px black;
    padding: 0.4em 0em;
}

.ui-page#ritten #tripList #loadMore { /* 'Eerder' knop onderaan de lijst */
    font-weight: bold;
    text-decoration: underline !important;
    border-bottom: solid 0px black;
}

.ui-page#ritten #tripList .ui-btn-icon-right::after { /* Button icon (pijltje) rechts in list-item */
    /* Licht blauw: 1d bb ee*/
	background-color: #1dbbee
}

.ui-page#punten #totalPoints {
    font-weight: bold;
}

/* Notify (settings->berichten) */

.ui-page#notify .ui-content .ui-slider-track .ui-btn-active {
    background-color: #94cc76; /* blue = #1dbbee; */
    border-color: #94cc76;
    color: #ffffff;
    text-shadow: 0 0px 0 #94cc76;
}

.ui-page#notify a.ui-slider-handle.ui-btn:focus {
    box-shadow: 0 0 12px #94cc76;
}

.ui-page#notify .ui-content img {
    padding-top:2em;
    display:block;
    width:75%;
    margin:auto;
}

/* Faq (Settings -> FAQ)*/
.ui-page#faq .ui-collapsible-heading-toggle {
    white-space: normal;
}

.ui-page#faq .ui-collapsible a { /* Collapsible/clickable items (background etc) */
    border: solid 0px white;
    background-color: #ffffff;
}

.ui-page#faq .ui-collapsible-heading a.ui-icon-minus {
    border: solid 1px #dddddd;
}

.ui-page#faq .ui-collapsible .ui-btn:focus {
    box-shadow: none;
}

.ui-page#faq .ui-collapsible .ui-btn-icon-left {
    padding-left: 1em;
}

.ui-page#faq .ui-collapsible .ui-btn-icon-left::after {
    display: none;
}

.ui-page#faq .ui-collapsible h5 a {
    text-decoration: underline !important;
    font-weight: bold !important;
}


.ui-page .ui-content .boxed-text {
	margin: auto auto;
    padding: 4vw 14vw;
    text-align: center;
    display: inline-block;
    color: #ffffff;
    font-weight: bold;
    border-radius: 10px;
    background-color: #1dbbee;
}

.ui-panel-inner {
    padding: 0 !important;
}

.ui-panel {
    border-width: 0;
    display: block;
    max-height: 100% !important;
    min-height: 0 !important;
    position: absolute;
    top: 0;
    width: 60%;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 60%;
}

@media only screen and (min-width: 425px) {

.ui-panel {
    border-width: 0;
    display: block;
    max-height: 100% !important;
    min-height: 0 !important;
    position: absolute;
    top: 0;
    width: 25em;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    right: 25em;
}

}