@import url(./roboto.css);

@media (prefers-color-scheme: light) {
	:root {
		--main-text-color: #424242;
		--main-background-color: #fff;
		--navbar-background-color: #222;
		--border-color: #ddd;
		--border-extra-color: #111;

		--weitere-text-color: #737373;
		--genemight-text-color: #131313;
		--bareboat-marker-color: #777;
		--bareboat-background-color: #eee;

		--cell-background-color-odd: #f9f9f9;
		--cell-background-color-even: #fff;
		--table-background-color-even: #0a0707;
		--cell-background-color-youngest: #93c47d;
		--cell-border-color-youngest: #5e9644; /*#5c784f;*/
		--text-color-youngest: #111;
	}
}

@media (prefers-color-scheme: dark) {
 	:root {
		--main-text-color: #cdcdcd;
		--main-background-color: #222;
		--navbar-background-color: #222;
		--border-color: #ddd;
		--border-extra-color: #ececec;
		
		--weitere-text-color: #9c9c9c;
		--genemight-text-color: #d8d8d8;
		--bareboat-marker-color: #586771;
		--bareboat-background-color: #282b2d;

		--cell-background-color-odd: #202020;
		--cell-background-color-even: #0e0e0e;
		--table-background-color-even: #070707;
		--cell-background-color-youngest: #5e9644;
		--cell-border-color-youngest: #93c47d;
		--text-color-youngest: #eee;
	}
}

body {
	font-family: 'Roboto';
	color: var(--main-text-color);
	font-size: 120%;
	background-color: var(--main-background-color);
}

h1 {
	font-weight: 600;
	font-size: medium;
}

h4 {
	font-size: medium;
	margin-top: 2em;
	margin-bottom: 1.2em;
	font-weight: 575;
}

span.hervorheben {
	font-size: 1.16em;
	font-weight: 550;
}

div.table_container {
	/*margin: 0 auto;*/
	height: 60vh;
}

.first_column {
	font-weight: 700;
}

.bold {
	font-weight: 900;
}

.dt-top {
	vertical-align: top !important;
}

.dt-bottom {
	border-top: none !important;
	border-bottom: 1px solid var(--border-color) !important;
}

.dt-first {
	border-left: 1px solid var(--border-color) !important;
}
.dt-last {
	border-bottom: 1px solid var(--border-color) !important;
}

.dt-next-extra {
	border-right: 1px solid var(--border-color) !important;
}

.dt-next-no-extra {
	border-right: 1px solid var(--border-color) !important;
}

.dtfc-right-top-blocker {
	background-color: transparent !important;
}

tr.odd td {
	background-color: var(--cell-background-color-odd);
}

tr.even td {
	background-color: var(--cell-background-color-even);
}

.youngest {
	background-color: var(--cell-background-color-youngest) !important;
	border-right-color: var(--cell-border-color-youngest) !important;
	color: var(--text-color-youngest) !important;
	/*font-weight: 600;*/
}


thead th {
	background-color: var(--table-background-color);
}

table.dataTable thead th {
	border-bottom-color: var(--border-extra-color);
}

.no-cell-border {
	border-left: none !important;
	border-right: none !important;
	background-color: var(--main-background-color) !important;
}

.no-top-border {
	border-top: none !important;
}

.no-bottom-border {
	border-bottom: none !important;
}

.dt-discret-border {
	border-bottom: 1px solid var(--border-color);
}

.cell-crew-other, .cell-crew-second {
	border: none !important;
	border-right: 1px solid var(--border-color) !important;
	background-color: var(--main-background-color) !important;
}

.cell-crew-second {
	border-top: 1px solid var(--border-color) !important;
}

.extra-crew-cell, .extra-crew-cell-top {
	border-bottom: 1px solid var(--border-color) !important;
}

.no-extra-crew-cell-top {
	border-top: 1px solid var(--border-color) !important;
}

.no-extra-crew-cell, .no-extra-crew-cell-top {
	border: none !important;
	background-color: var(--main-background-color) !important;
}

.extra-crew-cell-top {
	border-top: 1px solid var(--border-color) !important;
	border-bottom: none !important;
}

.extra-crew-cell-right {
	border-right: 1px solid var(--border-color) !important;
}

.weitere {
	font-size: 83%;
	color: var(--weitere-text-color);
}

span.reisen {
	font-size: 127%;
}

.navbar {
	margin-bottom: 0px;
}

.navbar-inverse .navbar-brand {
	font-size: 1.2em;
	color: #fff;
}

.navbar-inverse .navbar-brand:hover {
	color: #ccc;
}

.navbar-collapse, .container {
	/* width: max(1380px, 87vw) !important; */
}

.main-container {
	margin-top: 7px;
}

.registration-form {
	max-width: 450px;
	margin: 0 auto;
}

.small-container-500 {
	max-width: 500px;
  	padding: 15px;
  	margin: 0 auto;
}

.small-container-330 {
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}


.small-container .small-container-heading,
.small-container .checkbox {
	margin-bottom: 10px;
}
.small-container .checkbox {
	font-weight: normal;
}
.small-container .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		  	  box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}
.small-container .form-control:focus {
	z-index: 2;
}

/* Signin */
.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.login {
	color: #fff;
}

.login td {
	padding-right: 2px;
	padding-left: 2px;
}

.form-group {
	width: 42%
}

label {
	font-weight: 900;
	font-size: 90%;
}

.bestaetigt {
	font-weight: normal;
	text-decoration: underline;
	font-style: normal;
}

.empfohlen {
	font-weight: normal;
	text-decoration: none;
	font-style: oblique;
}

.genehmigt {
	font-weight: 645;
	font-size: 98%;
	color: var(--genemight-text-color);
	text-decoration: none;
	font-style: normal;
}

p.legende {
	font-size: smaller;
	margin-bottom: 0px;
}

.notification {
	position: relative;
	z-index: 3;
	margin-top: -193px;
	margin-left: -15px;
	width: 88%;
	min-height: 50%;
	border-radius: 5px;
	padding: 7px;
}

#error_known {
	background-color: #ffc3d7;
	border: solid 1px #ff3e7d;
	visibility: hidden;
}

#success_known {
	background-color: #bbffd2;
	border: solid 1px #009331;
	visibility: hidden;
}

.bareboat {
	border-left: solid 12px var(--bareboat-marker-color) !important;
	border-top: none !important;
	background-color: var(--bareboat-background-color) !important;
}



.dt-next-extra {
	border-right: 1px solid var(--border-color) !important;
}

sup { 
	font-size: 100%;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
}