/* globale Einstellungen, die sich auf die gesamte Seite bzw. alle Controls auswirken */
:root {
  --Farbe1: #800000; /* HIER anpassen: dunkelrot #960505 */
  --Farbe2: #000000; /* schwarz */
  --Farbe3: #FFFFFF; /* weiß */
  --Farbe4: #BDBDBD; /* hellgrau */
  --Farbe5: #154c79; /* HIER anpassen: dunkelblau */
  --Farbe6: #4682b4; /* HIER anpassen: hellblau #5199d1 */
  --Farbe7: #23BF35; /* grün */
  --Farbe8: #E9E9E9; /* hellgrau */
  --Farbe9: #585754; /* dunkelgrau */
  
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
}

body {
    font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--Farbe2);
    background-color: var(--Farbe3);
	border-radius: 0px;
}

.footer {
    background: var(--Farbe5) !important;
	font-size: 10px;
}


.badge {
    background-color: var(--Farbe1) !important;
    font-size: 15px !important;
}


#main {
    min-height: 100%;
    padding-bottom: 40px;
    margin-top: 25px;
}

.form-control {
    color: var(--Farbe2);
    background-color: var(--Farbe3);
    background-image: none;
    border: 0.5px solid var(--Farbe4);
    webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--Farbe2);
    text-align: center;
    background-color: var(--Farbe5);
    border: 0.5px solid var(--Farbe4);
    border-radius: 0px;
}

/* Button Aussehen */
.btn {
    outline: none !important;
	padding: 5px ;
	font-weight: bold;
	font-size: normal;
	border: 0.5px solid var(--Farbe4);
}

.btn:hover  {
    color: var(--Farbe3);
    background-color: var(--Farbe6);
    border-color: var(--Farbe6);
}

.btn:focus {
    background-color: var(--Farbe6);
    border-color: var(--Farbe6);
}

.btn-default {
    color: var(--Farbe2);
    background-color: var(--Farbe3);
}

.btn-default.active, .btn-default:active,  .open.dropdown-toggle.btn-default {
    color: var(--Farbe3);
    background-color: var(--Farbe5);
	border-color: var(--Farbe5);
}

.btn-default.focus, .btn-default:hover {
    color: var(--Farbe3);
    background-color: var(--Farbe6);
    border-color: var(--Farbe6);
}

.btn-success {
    color: var(--Farbe3);
	background-color: var(--Farbe5) ;
    border-color: var(--Farbe5) ;
}

.btn-success:hover, .btn-success:focus  {
    color: var(--Farbe3);
    background-color: var(--Farbe6);
    border-color: var(--Farbe6);
}

.btn-primary {
    background-color: var(--Farbe5);
    border-color: var(--Farbe5);
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover  {
    background-color: var(--Farbe6);
    border-color: var(--Farbe6);
}

/* Link Aussehen */

.btn-link {
    border-color: transparent;
	color: var(--Farbe5);
}

.btn-link:active, {
    border-color: transparent;
	color: var(--Farbe1);
}

.btn-link:focus {
    border-color: transparent;
	color: var(--Farbe1);
}

.btn-link:hover {
    border-color: transparent;
	color: var(--Farbe1);
}

/* Box */
.default-box {
    margin-top: 25px;
    padding: 35px;
    border: solid 0.5px var(--Farbe4) !important;
    background-color: var(--Farbe3) !important;
	color: var(--Farbe2);
}

/* Naviagation Bar */
/*
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: var(--Farbe4);  
	background: var(--Farbe5);
	color: var(--Farbe3) !important;
}

.navbar-default .navbar-nav>li>a {
    color: var(--Farbe3) !important;
}

.navbar .container-fluid {
    background: var(--Farbe5);
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: var(--Farbe3);
    background-color: var(--Farbe1);
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {

.navbar-nav > li > .dropdown-menu {
	background: var(--Farbe5);
	
}

.dropdown-menu > li > a {
	color: var(--Farbe3) !important;
}
*/
/* Login Page */


/* Text zur Begrüßung wird überschrieben */

#page-login::before {
    content: "Willkommen beim Platzbuchungssystem des Tennisverein Ruppertshain e.V." !important;
    display: block;
    color: var(--Farbe2) !important;
    font-size: 20px !important;
    text-align: center;
    margin-top: -25px;
	font-variant: none !important;
}

/* Ankündigungen größer und in rot formatiert */
#page-login #announcements .announcement {
    border: solid 0.5px var(--Farbe4) !important;
    -webkit-box-shadow: 0px 0px 0px 0px var(--Farbe4);
    -moz-box-shadow: 0px 0px 0px 0px var(--Farbe4);
    box-shadow: 0px 0px 0px 0px var(--Farbe4);
    padding: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
	color: var(--Farbe1);
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}

/* Das Icon auf ein passende Größe gezoom */
#page-login .login-icon img {
    max-width: 100%;
    zoom: 1.2;
}

#page-login a {
    color: var(--Farbe5);
}

.glyphicon-user:before {
    color: var(--Farbe3);
}

.glyphicon-lock:before {
    color: var(--Farbe3);
}

.glyphicon-question-sign:before {
	color: var(--Farbe6);
}

.glyphicon-globe:before {
    color: var(--Farbe6);
}

/* Dashboard */
.dashboard {
 	margin-top: 10px;
 	border: 0.5px solid var(--Farbe4);
 	-webkit-box-shadow: 0px 0px 0px 0px var(--Farbe4);
 	-moz-box-shadow: 0px 0px 0px 0px var(--Farbe4);
 	box-shadow: 0px 0px 0px 0px var(--Farbe4);
}

.dashboardHeader {
   	padding: 10px 20px;
   	background-color: var(--Farbe5);
}

.dashboard .noresults {
    text-align: left;
    font-style: normal;
	font-weight: bold;
	font-size: 11pt;
}

.dashboard .no-data {
    font-style: normal;
    color: var(--Farbe2);
}

.availabilityDashboard .header {
    font-size: 1.0em;
    font-weight: bold;
	padding: 3px;
	background-color: var(--Farbe4);
	margin-top: 10px;
}
/*
.dashboardHeader .badge {
    background-color: var(--Farbe1);
    font-size: 15px;
}
*/
.availabilityDashboard h5 {
    margin-top: 10px;
    font-weight: normal;
    color: var(--Farbe2);
}

.availabilityDashboard .resourceName {
    text-overflow: ellipsis;
    color: var(--Farbe5);
    padding: 1px;
    display: inline-block;
    margin-right: 2px;
    background-color: var(--Farbe3);
}

.availabilityDashboard .resourceName a {
    color: var(--Farbe5);
	font-weight: bold;
}

.upcomingReservationsDashboard .timespan {
    padding: 3px;
    font-style: normal;
	font-weight: bold;
    color: var(--Farbe2);
    background-color: var(--Farbe4);
    border-bottom: 1px solid var(--Farbe4);
	margin-top: 10px;
}

.upcomingReservationsDashboard .reservation .col-sm-3{
    display: none;
}

.upcomingReservationsDashboard .clearfix {
	font-size: 14px;
}

.availabilityDashboard .availabilityItem .btn {
    background-color: var(--Farbe5);
    color: var(--Farbe3);
    border-color: var(--Farbe5);
    padding: 3px 20px;
}

.availabilityDashboard .availabilityItem .btn:hover  {
    color: var(--Farbe3);
    background-color: var(--Farbe6);
    border-color: var(--Farbe6);
}

#dashboardHeader div..col-xs-12
{
   visibility: hidden;
}

/* Notification Page */
.notification-type {
    font-size: 1.2em;
    margin-top: 15px;
}

/* Reservation */
/* Legende */
div.legend {
    width: 150px !important;
    margin: 0 1px !important;
    padding: 0.5em 0 !important;
    line-height: 18px !important;
    border: 0.5px solid var(--Farbe9) !important;
    text-align: center !important;
    display: inline-block !important;
	font-size: 13px !important;
}

div.center {
    margin-top: 10px;
}

div#individualDates {
    visibility: hidden;
}

/*Filter links */
#reservations-left {
    margin-top: 0px;
}

#reservations-left .form-group {
    margin-bottom: 3px;
	padding-right: 0px !important;
	padding-left: 0px !important;
}

#maxCapactiy {
    display: none;
}

label[for=maxCapactiy] {
    visibility: hidden;
}

.reservations-left-header {
    border-bottom: solid 1px var(--Farbe8);
    font-weight: bold;
    font-size: 1.3em;
    text-align: left;
    padding: 3px;
    color: var(--Farbe5);
}

.select2.select2-container.select2-container--default {
    vertical-align: top;
}

.glyphicon.glyphicon-calendar {
    top: 2.5px;
}

.schedule-dates .btn-link {
    background-color: var(--Farbe3) !important;
	zoom: 1.5;
	color: var(--Farbe5);
	vertical-align: middle;
}

.schedule-dates .btn-link:hover {
    color: var(--Farbe1);
}

.schedule-dates .btn-success {
    background-color: var(--Farbe3) !important;
	zoom: 1.5;
	vertical-align: middle;
}

/* Buchungstabelle */
table.reservations {
	font-size: 0.9em;
    border: none !important;
}

/* Detailfelder */
table.reservations td {
    border: solid var(--Farbe9) 0.5px;
    height: 25px;
    display: table-cell;
	padding: 3px !important;
	font-weight: bold;
}

/* Reservation Details */
td.resdate {
    width: auto;
	background-color: var(--Farbe5) !important;
    color: var(--Farbe3) !important;
    text-align: left !important;
	border: none !important;
	font-size: 1.2em !important;
}

/* Reservierbare Slots */
.reservable {
	border: 0.5px solid var(--Farbe4);
	border-radius: 5px !important;  
}

.reservable:hover {
	background-color: var(--Farbe5);
	border-radius: 5px !important; 
}

/* nicht reservierbare Sperrzeiten in rot */
.unreservable {
    background-color: var(--Farbe1) !important;
	text-align: center;
	font-weight: bold;
	border-radius: 5px !important;   
}

/*reservierte Zeiten */
.reserved {
    background-color: var(--Farbe5) !important;
    color: var(--Farbe3) !important;
	margin: 0.5px;
	border-top: 0.5px solid var(--Farbe3) !important;
	border-bottom: 0.5px solid var(--Farbe3) !important;
	border-radius: 5px !important; 
}

.reserved.hilite {
    background-color: var(--Farbe6) !important;
	border-radius: 5px !important; 
}

tr:nth-child(even) td.reslabel {
    
	background-color: var(--Farbe4) !important;
	border-right: 0px !important;
	text-align: center;
}

tr:nth-child(odd) td.reslabel {    
	background-color: var(--Farbe8) !important;
	border-right: 0px !important;
	text-align: center;
}

/* Tabellenzeile*/
/* ungerade erste Spalte einer Zeile */
tr:nth-child(odd) td.pasttime {
    background-color: var(--Farbe8);
}

/* Detailfeld */

.reserved span.Hilfsfeld {
 display: none;
}


.reserved span.meden:not(:empty) + span.Hilfsfeld{
    background-image: url("https://tv-ruppertshain.tennis-platz-buchen.de/img/custom-logo.png?2.7.7");
	background-size: 135%;
	-moz-background-size: 135%;
	-webkit-background-size: 135%;
	background-position: center;
	display: inline;
    border: 1px solid var(--Farbe3);
    float: left;
    min-width: 35px;
    height: 35px;
    -webkit-border-radius: 50%/50%;
    -moz-border-radius: 50%/50%; 
	border-radius: 50%/50%;
    margin-right: 5px;
    margin-bottom: 1px;
	color: var(--Farbe3);
	float: left;
}

.reserved span.meden {
 display: none;
}


.name {
    font-weight: bold;
	font-size: 1.0em;
	white-space: normal !important;
}

.spieler {
    font-weight: normal;
	font-size: 1.0em;
	text-overflow: ellipsis !important;
}

td.pasttime {
	font-weight: bold;
	border: none !important;
	text-align: center;
}

td.resourcename {
	background-color: var(--Farbe4) !important;
	color: var(--Farbe2) !important;
	font-size: 1.2em;
	text-align: center;
}

td.resourcename.hilite {
	background-color: var(--Farbe1) !important;
}

.resourceNameSelector {
    color: var(--Farbe2) !important;
	padding: 2px;
}

.resourceNameSelector.hilite {
    color: var(--Farbe3) !important;
	padding: 2px;
}

td.resourcename a {
    color: var(--Farbe2) !important;
    text-decoration: none;
}

tr.today {
    color: var(--Farbe3) !important;
    background-color: var(--Farbe6) !important;
}

td.today {
    color: var(--Farbe3) !important;
    background-color: var(--Farbe6) !important;
}

tr.today td.resdate,
td.today {
  color: var(--Farbe3) !important;
  background-color: var(--Farbe1) !important;
  font-size: 1.2em !important;
  }
}

/* Kompakte Ansicht */
.reservations.condensed .reserved,
.reservations.condensed .unreservable,
.reservations.condensed .reservable
{
  margin: 0.5px;
  cursor: pointer;
  height: 85px !important;
  white-space: nowrap;
  text-overflow: ellipsis !important;
}

.reservations.condensed .reservable {
    color: var(--Farbe9) !important;
    line-height: 15px !important;
    background-color: var(--Farbe3) !important;
}


.reservations.condensed .unreservable {
    text-align: left !important;
}

.reservations.condensed .reservable.hilite {
	background-color: var(--Farbe7) !important;
}

/* mobile Ansicht */
#reservations .mobile .reservable {
    font-size:; 1.2em !important;
}


#reservations .mobile .reservable {
    /*border: dashed 1px var(--Farbe9) !important;*/
    color: var(--Farbe9);
    line-height: 15px !important;
    background-color: var(--Farbe3) !important;
}

#reservations .mobile .reserved {
    height: 55px;
    white-space: nowrap;
    text-overflow: ellipsis !important;
}

#reservations .mobile .unreservable {
	text-align: left !important;
}

#reservations .mobile .resdate {
  background-color: var(--Farbe5) !important;
  width: auto !important;
}

#reservations .mobile td.today {
  background-color: var(--Farbe1) !important;
}

#reservations .mobile td.resourcename {
  width: auto !important;
}

#reservations .mobile .slot {
    padding: 0px;
}

/* Popup */
/* ausblenden von nicht verwendeten Feldenn, zwecks besserer Übersichtlichkeit */
/* Teilnehmer */
.res_popup_details .users {
    display: none;
}

/* Titel der Reservierung */
.res_popup_details .title {
    display: none;
}

/* eMail Adresse des Reservierenden */
.res_popup_details .email{
    display: none;
}

/* Der Platz wird fett gedruckt */
.res_popup_details .resources{
    font-weight: bold;
}

/* Zubehör wird bei uns nicht verwendet */
.res_popup_details .accessories{
    display: none;
}

/* Die Zusammenfassung wird hier nicht gebraucht */
.res_popup_details .summary{
    display: none;
}

/* Formatierung in 12px und die Breite passt sich dem Inhalt an */
.res_popup_details{
    font-size: 12px;
	min-width: auto;
}

#reference-number {
    display: none;
}

.reservation-message {
    font-size: 1.5em;
    font-weight: bold;
}

#reservation-response-image .success {
    color: var(--Farbe7);
    zoom: 0.8;
}

/* Reservation Detail readonly */
/* vergangene Reservierungen sind schreibgeschützt */
/* Ausblenden von Zeile 6: Titel der Reservierung */

#reservationDetails div.col-xs-12:nth-last-child(1) { 
	/*display: none; */
}

#reservationDetails div.col-xs-12.pull-right { 
	display: none; 
}

/* Ausblenden von Zeile 7: Beschreibung der Reservierung */
#reservationDetails div.col-xs-12:nth-last-child(2) { 
	/*display: none; */
}

#reservationDetails div.col-xs-12:nth-last-child(3) { 
	/*display: none; */
}
*/
/*Date Picker - wird beim Kalender aufgerufen amgezeigt*/

#calendar_toggle {
  color: var(--Farbe5);
}

#calendar_toggle:hover {
  color: var(--Farbe1);
}

/* Hintergrundfarbe und Textfarbe für den Monatsheader */
.ui-datepicker .ui-widget-header,
.ui-datepicker .ui-datepicker-header {
    background: var(--Farbe5);
	color: var(--Farbe3);
	font-weight: normal;
}

.ui-datepicker td .ui-state-hover {
	background: var(--Farbe3) !important; 
}

.ui-state-highlight {
    background: var(--Farbe5);
	color: var(--Farbe3);
	font-weight: normal;
}

/* Zeichensatz und Randeinstellungen */
.ui-datepicker * {
	font-family:  Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    /*-webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;*/
}

/* Zeichensatzgröße in der Tabelle, Randeinstellungen */
.ui-datepicker table {
    font-size: 11px;
    margin: 0;
    border: none;
    border-collapse: collapse;
}
.ui-datepicker-multi .ui-datepicker-group-last table {
    width: 100%;
    margin: 0 auto .4em;
}

/* Hintergrund  und Textfarbe für die Wochentagsüberschrift Table Head Element */
.ui-datepicker thead {
    background: var(--Farbe4);
	color: var(--Farbe2);
	font-weight: 600;
}

/* Kopftzelle Formatierung */
.ui-datepicker th {
    padding: 10px;
}

/* Datenelement Einstellungen */
.ui-datepicker td {
    padding: 0;
    border: 1px solid var(--Farbe8);
}

.ui-datepicker td.ui-datepicker-other-month {
    border: transparent;
}

.ui-datepicker tr:first-of-type td {
	border-top: 1px solid var(--Farbe8);
}

.ui-datepicker td.ui-datepicker-week-end {
    background-color: var(--Farbe8);
    border: 1px solid var(--Farbe8);
}

.ui-datepicker td .ui-state-default {
    background: transparent;
    border: none;
    text-align: center;
    text-decoration: none;
    width: auto;
    display: block;
    padding: 4px 8px;
    font-weight: normal;
}

.ui-datepicker td.ui-state-disabled .ui-state-default {
    opacity: 0.5;
}

/* Hintergrund und Textfarbe für die Kalendertage bei Mouseover */
.ui-datepicker td .ui-state-hover {
    background: var(--Farbe5);
    color: var(--Farbe3);
}

/* Formatierung des 'heute' Buttons */
.ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
	font-size: 13px;
	font-weight: 600;
    color: var(--Farbe3);
    background: var(--Farbe5);
	opacity: 1;
}

/* Der Cursor als Pointer bei MouseOver */
.ui-datepicker .ui-datepicker-header .ui-state-hover {
    background: transparent;
    border-color: transparent;
    cursor: pointer;
}

/* Formatierung Monatstitel */
.ui-datepicker .ui-datepicker-title {
    margin: 0;
    padding: 7px 0;
    font-size: 13px;
    line-height: 14px;
    text-align: center;
}

/* Formatierung Hintergrund Datepicker */
.ui-datepicker {
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: var(--Farbe3);
	border: 1px solid var(--Farbe5);
    border-top: none;
    min-width: 17em;
	z-index: 1000 !important;
}

/* Formatierung der Vorwärts- Rückwarts Buttons */
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
    font: normal 20px/34px 'FontAwesome';
    padding-left: 7px;
    color: var(--Farbe3);
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 34px;
    height: 34px;
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    display: none;
}

.ui-datepicker .ui-datepicker-prev-hover:before,
.ui-datepicker .ui-datepicker-next-hover:before {
    opacity: 0.7;
}

.ui-datepicker .ui-state-hover.ui-datepicker-prev,
.ui-datepicker .ui-state-hover.ui-datepicker-next {
    border: none;
}

/* Inhalt / Aussehen der Vorwärts-/Rückwärts Buttons */
.ui-datepicker .ui-datepicker-prev:before {
    content: '\f060';
}

.ui-datepicker .ui-datepicker-next:before {
    content: '\f061';
}

/* Aussehen des Date Pickers */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 33%;
}

.ui-datepicker td.ui-datepicker-today {
    background-color: var(--Farbe1);
	color: var(--Farbe3) !important;
	
}

.ui-datepicker td.ui-datepicker-current-day {
    background-color: var(--Farbe8);
	border-color: var(--Farbe8);
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    color: var(--Farbe3);
}

/* Kalender */
.fc button {
	/*border-radius: 0px ;*/
    -moz-box-sizing: border-box ;
    -webkit-box-sizing: border-box ;
    box-sizing: border-box ;
	border 0px solid ;
	background-color: var(--Farbe5);
	color: var(--Farbe3) !important;
	text-shadow: none ;
	outline: none ;
}

.fc-state-disabled {
    cursor: default;
    background-image: none;
    opacity: 1;
    box-shadow: none;
}

.fc-state-default {
    cursor: default;
    background-image: none;
    opacity: 1;
    box-shadow: none;
}

.fc-state-default.fc-corner-right {
    /*border-top-right-radius: 0px;
    border-bottom-right-radius: 0px; */
}

.fc-state-default.fc-corner-left {
    /*border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;*/
}

.fc-icon-left-single-arrow:before {
    font: normal 20px/34px 'FontAwesome';
    padding-left: 7px;
    color: var(--Farbe3);
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	width: 34px;
    height: 34px;
    font-weight: 700;
    font-size: 100%;
    top: -7%;
}

.fc-icon-right-single-arrow:before {
    font: normal 20px/34px 'FontAwesome';
    padding-left: 7px;
    color: var(--Farbe3);
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	width: 34px;
    height: 34px;
    font-weight: 700;
    font-size: 100%;
    top: -7%;
}

.note {
    font-style: normal;
    color: var(--Farbe5);
	font-size: 13px;
}

.fc-day-header {
    background-color: var(--Farbe5);
	color: var(--Farbe3);
}

.fc-unthemed td.fc-today {
    background: var(--Farbe1);
	color: var(--Farbe3);
}

/* Berichtliste über ganzes Fenster */

#report-list {
    max-height: fit-content;
}