@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');

/* Page settings */
body {
	display: flex;
	font-family: 'Roboto', sans-serif;
	margin: 0;
}

body {
	height: 100%;
}
.page {
	flex: 1;
	margin-left: 75px;
}
.page.nav-opened {
	margin-left: 240px;
}
.page-header {
	height: 60px;
	padding-left: 30px;
	border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
.page-content {
	padding: 30px;
	padding-bottom: calc(70px + 1rem); /* 70px = button bar height */
}

.crumbs {
	font-size: 18px;
}
.crumbs>a {
	text-decoration: none;
	color: black;
}
.crumbs-back-button {
	margin-right: 10px;
	cursor: pointer;
}

.gbc {
	background-color: rgb(246, 247, 248);
}

/* Display */
.flex {
	display: flex;
}
.inline-block {
	display: inline-block;
}

/* Flex settings */
.flex-row {
	flex-direction: row;
}
.flex-col {
	flex-direction: column
}
.flex-wrap {
	flex-wrap: wrap;
}
.f-1 {
	flex: 1;
}
.f-2 {
	flex: 2;
}

/* Flex grow */
.f-g-1 {
	flex-grow: 1;
}
.f-g-2 {
	flex-grow: 2;
}
.f-g-3 {
	flex-grow: 3;
}
.f-g-4 {
	flex-grow: 4;
}
.f-g-5 {
	flex-grow: 5;
}
.f-g-6 {
	flex-grow: 6;
}
.f-g-7 {
	flex-grow: 7;
}
.f-g-8 {
	flex-grow: 8;
}
.f-g-9 {
	flex-grow: 9;
}

/* Flex basis */
.f-b-5 {
	flex-basis: 5%;
}
.f-b-7 {
	flex-basis: 7%;
}
.f-b-10 {
	flex-basis: 10%;
}
.f-b-15 {
	flex-basis: 15%;
}
.f-b-18 {
	flex-basis: 18%;
}
.f-b-20 {
	flex-basis: 20%;
}
.f-b-25 {
	flex-basis: 25%;
}
.f-b-30 {
	flex-basis: 30%;
}
.f-b-35 {
	flex-basis: 35%;
}
.f-b-40 {
	flex-basis: 40%;
}
.f-b-50 {
	flex-basis: 50%;
}
.f-b-60 {
	flex-basis: 60%;
}
.f-b-70 {
	flex-basis: 70%;
}
.f-b-75 {
	flex-basis: 75%;
}
.f-b-80 {
	flex-basis: 80%;
}
.f-b-90 {
	flex-basis: 90%;
}
.f-b-100 {
	flex-basis: 100%;
}

/* Flex justify content */
.f-jc-fs {
	justify-content: flex-start;
}
.f-jc-fe {
	justify-content: flex-end;
}
.f-jc-c {
	justify-content: center;
}
.f-jc-sb {
	justify-content: space-between;
}
.f-jc-se {
	justify-content: space-evenly;
}
.f-jc-sa {
	justify-content: space-around;
}

/* Flex align items */
.f-ai-fs {
	align-items: flex-start;
}
.f-ai-c {
	align-items: center;
}
.f-ai-s {
	align-items: stretch;
}
.f-ai-fe {
	align-items: flex-end;
}

/* Flex column gaps */
.fcg-5 {
	column-gap: 5%;
}
.fcg-10 {
	column-gap: 10%;
}

.fcg-5p {
	column-gap: 5px;
}
.fcg-10p {
	column-gap: 10px;
}
.fcg-20p {
	column-gap: 20px;
}

/* Widths */
.w-a {
	width: auto;
}
.w-5 {
	width: 5%;
}
.w-10 {
	width: 10%;
}
.w-15 {
	width: 15%;
}
.w-20 {
	width: 20%;
}
.w-25 {
	width: 25%;
}
.w-30 {
	width: 30%;
}
.w-33 {
	width: 33%;
}
.w-40 {
	width: 40%;
}
.w-45 {
	width: 45%;
}
.w-50 {
	width: 50%;
}
.w-55 {
	width: 55%;
}
.w-60 {
	width: 60%;
}
.w-65 {
	width: 65%;
}
.w-70 {
	width: 70%;
}
.w-75 {
	width: 75%;
}
.w-80 {
	width: 80%;
}
.w-85 {
	width: 85%;
}
.w-90 {
	width: 90%;
}
.w-95 {
	width: 95%;
}
.w-100 {
	width: 100%;
}

.w-80p {
	width: 80px;
}
.w-250p {
	width: 250px;
}
.w-270p {
	width: 270px;
}
.w-300p {
	width: 300px;
}
.w-600p {
	width: 600px;
}

/* Minimum widths */
.nmw {
	min-width: 0 !important;
}
.m-w-100p {
	min-width: 100px;
}
.m-w-150p {
	min-width: 150px;
}
.m-w-200p {
	min-width: 200px;
}
.m-w-250p {
	min-width: 250px;
}
.m-w-270p {
	min-width: 270px;
}
.m-w-300p {
	min-width: 300px;
}
.m-w-400p {
	min-width: 400px;
}
.m-w-500p {
	min-width: 500px;
}
.m-w-600p {
	min-width: 600px;
}
.m-w-700p {
	min-width: 700px;
}
.m-w-1000p {
	min-width: 1000px;
}
.m-w-1500p {
	min-width: 1500px;
}
/* Heights */
.h-50 {
	height: 50%;
}
.h-80 {
	height: 80%;
}
.h-100 {
	height: 100%
}


.mh-80 {
	max-height: 80%;
}
.mh-280p {
	max-height: 280px;
}
.mh-600p {
	max-height: 600px;
}

/* Margins */
.m-a {
	margin: auto;
}
.m-10p {
	margin: 10px;
}
.m-30p {
	margin: 30px;
}
.m-t-10p {
	margin-top: 10px;
}
.m-t-15p {
	margin-top: 15px;
}
.m-t-20p {
	margin-top: 20px;
}
.m-t-30p {
	margin-top: 30px;
}
.m-t-36p {
	margin-top: 36px;
}
.m-t-40p {
	margin-top: 40px;
}
.m-t-50p {
	margin-top: 50px;
}
.m-b-0p {
	margin-bottom: 0px;
}
.m-b-10p {
	margin-bottom: 10px;
}
.m-b-15p {
	margin-bottom: 15px;
}
.m-b-20p {
	margin-bottom: 20px;
}
.m-b-30p {
	margin-bottom: 30px;
}
.m-r-10 {
	margin-right: 10%;
}
.m-r-10p {
	margin-right: 10px;
}
.m-r-20p {
	margin-right: 20px;
}
.m-r-30p {
	margin-right: 30px;
}
.m-l-15p {
	margin-left: 15px;
}
.m-l-30p {
	margin-left: 30px;
}

/* Padding */
.p-4p {
	padding: 3px;
}
.p-5p {
	padding: 4px;
}
.p-15p {
	padding: 15px;
}
.p-r-80p {
	padding-right: 80px;
}
.p-b-30p {
	padding-bottom: 30px;
}
.p-b-400p {
	padding-bottom: 400px;
}
.p-t-15p {
	padding-top: 15px;
}
.p-t-30p {
	padding-top: 30px;
}

/* Position */
.p-f {
	position: fixed;
}
.p-b-0 {
	bottom: 0;
}
.pos-r {
	position: relative;
}

/* others */
.ovf-a {
	overflow: auto;
}
.ovf-h {
	overflow: hidden;
}

.hidden {
	display: none;
}

/* Text */
.ta-c {
	text-align: center;
}

.disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

/* Responsive Classes */
@media only screen and (min-width: 750px) {
	.small-only {
		display: none !important;
	}
}

@media only screen and (max-width: 749px) {
	.small-hidden {
		display: none !important;
	}
}

/* Inputs */
.labelled-input {
	display: flex;
	flex-direction: column;
}
.def-text {
	margin: 5px 0px;
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 16px;
	background: #fff;
	padding: .6875rem .75rem;
	border-radius: 4px;
	border: 1px solid silver;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #333e47;
	transition: all .3s ease;
	width: 250px
}
.def-text:focus {
	outline: none;
	border: 1px solid rgb(77, 176, 218);
}
.def-checkbox {
	/* margin: 5px 0px; */
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 16px;
	background: #fff;
	/* padding: .6875rem .75rem; */
	border-radius: 4px;
	border: 1px solid silver;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #333e47;
	transition: all .3s ease;
	width: 48px;
	height: 48px;
	margin-right: 20px;
}


.block-input {
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 16px;
	background: #fff;
	padding: .6875rem .75rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #333e47;
	transition: all .3s ease;
	width: 250px;
}
.block-input:focus {
	outline: none;
	border: 1px solid rgb(77, 176, 218);
}

.block-input-single{
	border-radius: 4px;
	border: 1px solid silver;
}

.block-input-first-labelled {
	border-radius: 0 4px 0 0;
	border: 1px solid silver;
	border-bottom: 1px solid transparent;
}
.block-checkbox-first-labelled {
	border-radius: 0 4px 0 0;
	border: 0.5px solid silver;
	border-bottom: 1px solid transparent;
}
.block-input-mid-labelled {
	border-radius: 0;
	border: 1px solid silver;
	border-bottom: 1px solid transparent;
}
.block-checkbox-mid-labelled {
	border-radius: 0;
	border: 0.5px solid silver;
	border-bottom: 1px solid transparent;
}
.block-input-last-labelled {
	border-radius: 0 0 4px 0;
	border: 1px solid silver;
}
.block-checkbox-last-labelled {
	border-radius: 0 0 4px 0;
	border: 0.5px solid silver;
}
.block-input-single-labelled {
	border-radius: 0 4px 4px 0;
	border: 1px solid silver;
}
.block-checkbox-single-labelled {
	border-radius: 0 2px 2px 0;
	border: 0.5px solid silver;
}

.multi-input-middle {
	border-top: 1px solid silver;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-left: 1px solid silver;
}

.multi-input-middle-single {
	border-top: 1px solid silver;
	border-right: 1px solid transparent;
	border-bottom: 1px solid silver;
	border-left: 1px solid silver;
}

.multi-input-middle-last {
	border-top: 1px solid silver;
	border-right: 1px solid transparent;
	border-bottom: 1px solid silver;
	border-left: 1px solid silver;
}

.input-terrace {
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 16px;
	background: #fff;
	padding: .6875rem .75rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #333e47;
}
.input-terrace:focus {
	outline: none;
	border: 1px solid rgb(77, 176, 218);
}
.input-terrace-single-first {
	border-radius: 4px 0 0 4px;
	border: 1px solid silver;
}
.input-terrace-single-mid {
	border-radius: 0;
	border: 1px solid silver;
	border-left: 1px solid transparent;
}
.input-terrace-single-last {
	border-radius: 0 4px 4px 0;
	border: 1px solid silver;
	border-left: 1px solid transparent;
}
.input-terrace-top-first {
	border-radius: 4px 0 0 0;
	border: 1px solid silver;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
}
.input-terrace-top-mid {
	border: none;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
}
.input-terrace-top-last {
	border: 1px solid silver;
	border-bottom: 1px solid transparent;
}
.input-terrace-mid-first {
	border-radius: 0;
	border: 1px solid silver;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
}
.input-terrace-mid {
	border-radius: 0;
	border: 1px solid silver;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
}
.input-terrace-mid-last {
	border: 1px solid silver;
	border-bottom: 1px solid transparent;
}
.input-terrace-bottom-first {
	border-radius: 0 0 0 4px;
	border: 1px solid silver;
	border-right: 1px solid transparent;
}
.input-terrace-bottom-mid {
	border-radius: 0;
	border: 1px solid silver;
	border-right: 1px solid transparent;
}
.input-terrace-bottom-last {
	border-radius: 0 0 4px 0;
	border: 1px solid silver;
}
.invalid-input {
	background-color: rgba(255,0,0,0.1) !important;
	border-color: rgba(255,0,0,0.3) !important;
}

/* Labels */
.def-text-label {
	user-select: none;
	display: inline;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
}
.def-checkbox-label {
	user-select: none;
	display: flex;
  	align-items: center;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	padding-right: 24px;
	font-family: 'Roboto', sans-serif;
}

.def-optional-label {
	font-weight: 300;
	font-style: italic;
	color: rgba(19, 19, 19, 0.5)
}

.block-input-label {
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 16px;
	background: #eaeef3;
	padding: .6875rem .75rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color: #333e47;
	transition: all .3s ease;
}
.block-input-label-first {
	border-radius: 4px 0 0 0;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
}
.block-input-label-mid {
	border-radius: 0;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
}
.block-input-label-last {
	border-radius: 0 0 0 4px;
	border: 1px solid silver;
	border-right: 1px solid transparent;
}
.block-input-label-single {
	border-radius: 4px 0 0 4px;
	border: 1px solid silver;
	border-right: 1px solid transparent;
}
.block-header-label {
	border-radius: 4px 4px 0 0;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	border-right: 1px solid silver;

	flex-basis: 100%;
	text-align: center;
}

.block-input-stacked-label-single {
	border-radius: 4px 4px 0 0;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
}


/* Buttons */
.btn {
	line-height: 1.5;
	font-size: 16px;
	font-weight: 400;
	position: relative;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: 'Roboto', sans-serif;
	transition: color .3s ease, background-color .3s ease, border-color .3s ease;
	text-decoration: none;
	padding: .6875rem 1.5rem;
	text-align: center;
	outline: none;
	cursor: pointer;
}

.btn-primary {
	background-color: rgb(77, 176, 218);
	color: #fff;
	fill: #fff;
}
.btn-primary:disabled {
	background-color: rgb(77, 176, 218);
	color: #ccc;
	fill: #ccc;
}

.btn-primary:not([disabled]):hover {
	background-color:#18769d;
	fill:rgb(77, 176, 218);
}

.btn-primary-outline {
	background-color: transparent;
	color: rgb(128, 128, 128);
	fill: rgb(128, 128, 128);
	border-color: rgb(77, 176, 218);
	border: 2px solid rgb(77, 176, 218);
}
.btn-primary-outline:hover {
	background-color: rgba(128, 128, 128, 0.2);
}

.btn-secondary {
	border-color: #18769d;
	color: #444;
	fill: #444;
}
.btn-secondary:disabled {
	border-color: #18769d;
	color: #ccc;
	fill: #ccc;
}
.btn-secondary:not([disabled]):hover {
	border-color: rgb(77, 176, 218);
	color: rgb(77, 176, 218);
	fill: rgb(77, 176, 218);
}

.btn-tertiary {
	background-color: rgb(224, 88, 88);
	color: white;
	fill: white;
}

.btn-tertiary:hover {
	background-color:rgba(168, 62, 62);
	fill:rgba(168, 62, 62);
}

.btn-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.div-ticket {
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 16px;
	padding: .6875rem .75rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #333e47;
	transition: all .3s ease;
	/* background-color: rgba(56,217,34,0.41); */
	background-color: rgba(234, 238, 243,1);
	width: auto;
	margin: 0 5px 5px 0;
	cursor: pointer;
}

.div-ticket-delete {
	color: rgba(168, 62, 62); 
	font-size: 1.2rem;
	cursor: pointer;
}

.tooltip-icon {
	cursor: pointer;
}

.tooltip {
	position: absolute; 
	top: 50px; 
	border: 1px solid silver; 
	background-color: #eaeef3; 
	border-radius: 4px; 
	/* margin-top: 5px;  */
	padding:10px;
}

.brdbox {
	box-sizing: border-box;
}