body {
  width: 100%;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 2em;
}
@media only screen and (max-width: 2500px) {
  body{
    font-size: 1.75em;
  }
}
@media only screen and (max-width: 2000px) {
  body{
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 1630px) {
  body{
    font-size: 1.2em;
  }
}
@media only screen and (max-width: 1300px) {
  body{
    font-size: 1em;
  }
}
@media only screen and (max-width: 1150px) {
  body{
    font-size: 0.8em;
  }
}
@media only screen and (max-width: 1000px) {
  body{
    font-size: 0.5em;
  }
}
* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
}
.container {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  text-align: center;
}
.container-left {
  width: 15vw;
  min-width: 180px;
  height: 100%;
  margin: 0 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container-right {
  width: 85vw;
  height: 100%;
}
.logo {
  width: 10em;
  height: 10em;
}
a {
  color: black;
  text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
input[type=text] ,input[type=password] ,input[type=number],input[type=submit],input[type=file],input[type=button] , select , button{
  width: 10em;
  font-size: 0.8em;
  height: 1.5em;
  padding-left: 10px;
  margin-top: 10px;
  color: black;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid #d9c07c;
}
input[type=checkbox] {
  margin: 5px;
}
input[type=radio]:checked + img {
  border: 2px solid #999;
  border-radius: 5px;
}
.zoom{
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 5px;
  border: 2px solid #d9c07c;
  position:absolute;
  right:50vw;
  z-index:501;
  font-size: 1.1em;
  background-color: white;
}
.ruler{
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 5px;
  border: 2px solid #d9c07c;
  position:absolute;
  right:40vw;
  z-index:501;
  font-size: 0.9em;
  padding:0.1em;
  background-color: white;
}
.line{
  position: absolute;
  transform-origin: 0 100%;
  height: 3px;
  /*background: #000;*/
  border-bottom: 2px black dashed;
  font-size:0.8em;
  text-shadow: 0 0 5px #ffffff;
}
.holeAmount{
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 5px;
  border: 2px solid #d9c07c;
  position:absolute;
  right:55vw;
  z-index:501;
  font-size: 1em;
  background-color: white;
}
.print-dialog,.createView{
  font-size: 0.9em;
  position:absolute;
  background-color:white;
  border-radius: 5px;
  border: 2px solid #d9c07c;
  z-index: +5;
  text-align: left;
  padding: 10px;
}
.wind {
  width: 5em !important;
}
.commentField {
  width: 13em;
}
.loading {
  color: grey;
}
#register-form input , #register-form select , #register-form button{
  width: 270px;
}
.logoutBtn{
  margin-top: 30px;
  display: block;
}
.register-line {
  margin-top: 10px;
  font-size: 0.9em;
}
.register-line a {
  line-height: 2em;
}
.ui-datepicker {
  font-size: 0.7em !important;
  width: 10vw !important;
  min-width: 170px;
}
#datepicker {
  margin: 10px 0;
}
.course {
  color: black;
  width: 190px;
  border-bottom: 2px solid #d9c07c;
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
}
.login-modal {
  padding: 50px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
  text-align: center;
}
.login-modal > div > a {
  text-decoration: none;
  color: #d9c07c;
  margin: 10px;
}
#register-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.field-image {
  width: 150px;
  height: 150px;
}
.field-image img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.title{
  width: 100%;
  margin-top: 50px;
  font-size: 28px;
  text-align: center;
}
#club-name {
    font-size: 1.2em;
}

.container-right-sub {
  width:100%;
  vertical-align: top;
}
.fields-list {
  width: 10em;
  columns: 2;
}
.fields-list-single-column {
  width: 4.5em;
  columns: 1;
  margin: auto;
}
}
.fields-map {
  float:left;
  display: inline-block;
}
.fields-control {
  margin-left: 10px;
  float: left;
  display: inline-block;
}
.fields-list-button {
  margin-bottom: 10px;
  margin-left: 10px;
  color: black;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
  line-height: 2em;
}
.fields-list-button-selected {
  background-color: yellow;
}
.highlighted-day {
  background-color: yellow;
}
table {
  text-align: left;
}
td {
  padding: 3px;
}
.content {
  text-align: left;
}
.highlight {
  font-weight: bold;
}
.hole-details {
  background-color: #ede9de;
  padding: 10px;
  color: black;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
  line-height: 2em;
}
.hole-details-right {
  width: 11em;
  float:right;
  margin-top: 2em;
  margin-right: 2em;
}
.tab {
  width: 32%;
  display: inline-block;
  line-height: 1.5em;
  margin-bottom: 10px;
  background-color: #ede9de;
  color: black;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
}
.bg {
  width:100%;
  background-color: #ede9de;
  padding: 10px;
  color: black;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
  line-height: 2em;
}
.dot {
	position: absolute;
	color: #66440a;
	cursor: pointer;
	z-index: +2;
}
.description {
	display: none;
	color: black;
	z-index: +2;
	position: relative;
	background-color: white;
	text-shadow: none;
}
.dot:hover .description {
	display: block;
	border-radius: 1em;
	border: 2px solid #d9c07c;
	white-space: nowrap;
	padding: 0 0.5em;
	background-color: white;
	font-weight: bold;
	line-height: 1.2em;
	top: -1.5em;
	position: absolute;
	left: -2em;
}
.image {
	position: relative;
}
#source {
  width: 24em;
}
.field-map-image {
  position: relative;
}
.field-map-image-container {
  position: absolute;
}
.field-map-container {
  display: block;
  margin:auto;
}
.field-map-image,.field-map-image-container,.field-map-container {
  width: 130px;
  height: 220px;
}
.field-map-container {
  position:relative;
}
.register-button {
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: black;
  background-color: black;
}
#login-form ,#login-form p{
  margin-top: 10px;
}

.plus,.minus,.notify {
  width: 1.7em;
  font-weight: bold;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 1em;
}
.filler{
  width: 1.7em;
  display: inline-block;
}
.newEventDates {
  display: inline-block;
}
.event-logo {
  max-width: 170px;
}
.bottom-floater {
  position: fixed;
  bottom: 0;
  left: 0;
  min-width: 200px;
  padding: 10px;
  vertical-align: middle;
  display: block;
  text-align: center;
  color: black;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid;
  border-color: #d9c07c;
  background-color: white;
  margin: 30px 6%;
  z-index: +10;
}
.bottom-floater-video {
display:none;
width: 50vw;
height: 50vh;
}

.date-inline {
  font-size: 0.8em;
}
.b{
  
  font-weight: bold;
}

.pos-inline{
  font-size: 0.8em;
}

.wind-inline,
.slope-inline,
.speed-inline,
.firmness-inline
{
  margin-left: 5px;
  font-size: 0.8em;
  display: inline-block;
}
.hole-inline {
  line-height: 0.8em;
  margin-bottom: 15px;
}
.comment-inline {
  word-break: break-all;
  line-height: 0.8em;
  max-width: 300px;
}
.delete:hover{
  color: red;
}
.users td {
  padding: 5px 20px;
}
.users tr:nth-child(2n) {
  background-color: #eee;
}
.statistics td {
  padding: 5px 20px;
}
.statistics tr:nth-child(2n) {
  background-color: #eee;
}
.small-logo{
  max-height: 70px;
}
.approval-list div:nth-child(2n){
  background-color: #eee;
}
.approval-list div{
  max-width: 300px;
}
.dot {
  text-align: center;
  max-width: 1px !important;
   line-height: 1em;
}
.dot-used-1 {
  color: #be43ec;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-2 {
  color: #43ece7;
  text-shadow: 0 0 7px black;
  font-size: 1.5em;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-3 {
  color: #29ff42;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-4 {
  color: #4a03ff;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-5 {
  color: #ff04ea;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-6 {
  color: #ffc600;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-7 {
  color: #ff7a0b;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-8 {
  color: #b36500;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-9 {
  color: #5132a2;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-10 {
  color: #ca8acb;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-11 {
  color: #b091ff;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-12 {
  color: #007eff;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-13 {
  color: #d0088c;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-14 {
  color: #1b6280;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-15 {
  color: #ffb87d;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-16 {
  color: #b8abc4;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-17 {
  color: #16b416;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-18 {
  color: #a00e1a;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-19 {
  color: #ffb9b9;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-20 {
  color: #050000;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-21 {
  color: #b9fff9;
  text-shadow: 0 0 7px black;
   font-size: 1.6em;
   left: -0.1em;
   position: relative;
}
.dot-used-event {
  color: #ccc;
  text-shadow: 0 0 7px black;
   line-height: 1em;
}
.dot-disabeled{
  display: none;
}
.dot-quarantined{
  color: #fd0617;
}
.dot-selected,.dot-used-0 {
	font-weight: bold;
	color: yellow;
	animation: pulse 1s infinite;
	text-shadow: 0 0 7px black;
}
.confirm button {
  color: red;
}

     .table {
	width: 100%;
	text-align: center;
     }
.ui-datepicker{
  min-width: 13em;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.popup-button {
	cursor: pointer;
	display: inline-block;
}

.popup-hidden {
	display: none;
}
.popup-displayed {
	display: block;
	position: absolute;
	background-color: white;
	border: black 1px dotted;
	border-radius: 0.5em;
	padding: 0.5em;
	z-index: +10;
}

.scoresTable td{
  padding:0 0.5em;
}
.scoresTable tr:nth-child(even){
  background:#ccc;
}
.scoresTable th{
  font-weight: bold;
  font-size: 0.6em;
  padding:0 0.5em;
}