/*Copyrighted by Christos
Do not use without permission.*/

html {
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
}

body {
	height: 100%;
	width: 100%;
	margin: 0px;
	display: block;
	box-sizing: border-box;
	background: white;
	font-family: 'Roboto Mono', monospace;
	/*padding: 8px;*/
}

body_container {
	display: block;
	background: white;
	height: 100%;
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13) inset;
}

header {
	position: relative;
	z-index: 1;
	height: 15%;
	padding-left: 20px;
/*	color: #f5f5f5;
	background: linear-gradient(90deg, rgba(4,0,73,1) 0%, rgba(21,16,209,1) 100%);
        background: repeating-linear-gradient(
          -45deg,
	  rgba(4,0,73,1),
          rgba(4,0,73,1) 1px,
          rgba(21,16,160,1) 1px,
          rgba(21,16,160,1) 2px
        );*/
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
	display: flex;
}

header_title {
	font-family: 'Playfair Display', serif;
	font-family: 'Merienda', cursive;
	font-size: 2em;
	align-self: center;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	margin-left: 5px;
}
h3{
	position: relative;
	z-index: 1;
}

main {
	height: 70%;
	width: 100%;
	padding-top: 10px;
	box-sizing: border-box;
	overflow: auto;
}

canvas_container, loading_container {
	position: relative;
	/*overflow: hidden;*/
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

loading_container {
	position: relative;
	z-index: 3;
	width: 50%;
	margin: auto;
	top: 40%;
	line-height: 100%;
	font-size: 2em;
	vertical-align: middle;
	text-align: center;
}

events_container {
	position: relative;
	display: block;
//	min-height: 100%;
	width: 100%;
	margin: auto;
	text-align: center;
}

main_header {
	overflow: auto;
	position: relative;
	display: block;
	height: 10%;
	font-size: 1.5em;
	padding-left: 5px;
}

currentuserspopup {
	display: none;
	position: absolute;
	top: 50%;
}
chat_container {
	overflow: auto;
	position: relative;
	display: block;
	height: 70%;
	padding-left: 5px;
}
send_message {
	position: relative;
	display: block;
	height: 20%;
}


img {
	position: relative;
	top: 10px;
	z-index: 2;
	max-width: 80%;
	max-height: 95%;
	margin-left: auto;
	margin-right: auto;
	display: block;
/*	border: solid #0077FF 2px;*/
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}
.order_details_img{
	position: absolute;
	height: 100%;
	top: 0%;
	left: 50%;
	z-index = 0;
	opacity: 0.5;
}

left_arrow {
	position: absolute;
	z-index: 3;
	top: 40%;
	left: 20px;
	font-size: 5em;
/*	background-color: rgba(255,255,255);*/
	opacity: 0.7;
	border-radius: 20px;
	cursor: pointer;
}
right_arrow:hover {
	cursor: pointer;
}
left_arrow::after {
	content: "<";
}

right_arrow {
	position: absolute;
	z-index: 3;
	top: 40%;
	right: 20px;
	font-size: 5em;
/*	background-color: rgba(255,255,255);*/
	opacity: 0.7;
	border-radius: 20px;
	cursor: pointer;
}
right_arrow:hover {
	cursor: pointer;
}
right_arrow::after {
	content: ">";
}

canvas {
/*	position: absolute;*/
	top: 0px;
	z-index: 1;
/*	max-width: 100%;
	max-height: 100%;*/
	margin-left: auto;
	margin-right: auto;
	display: block;
	border: solid #0077FF 2px;
	box-sizing: border-box;
/*	background: white;*/
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}
a {
        color: #F8F9FA;
        text-decoration: none;
        transition: 0.3s;
}
a:hover {
        color: #C9C9C9;
}
.dark {
        color: #032775;
}
button {
        color: #F8F9FA;
        text-decoration: none;
        transition: 0.3s;
	padding: 5px;
	border-radius: 5px;
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
	font-size: 1em;
        color: #032775;
        padding: 2px;
        border-radius: 4px;
        background: repeating-linear-gradient(
          -45deg,
          #ffcd41,
          #ffcd41 1px,
          #c49c2b 1px,
          #c49c2b 2px
        );
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}
.button {
	width: 80%;
        color: #032775;
        padding: 2px;
        border-radius: 4px;
        background: repeating-linear-gradient(
          -45deg,
          #ffcd41,
          #ffcd41 1px,
          #c49c2b 1px,
          #c49c2b 2px
        );
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
	position: relative;
	white-space: nowrap;
	z-index: 1;

}
.button.border{
	border: 1px solid #c49c2b;
        box-shadow: 0 1px 1px 0 #c49c2b, 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}
.lightbutton {
        color: #032775;
        padding: 2px;
        border-radius: 4px;
        background: repeating-linear-gradient(
          -45deg,
          #ddeeff,
          #ddeeff 1px,
          #5aacff 1px,
          #5aacff 2px
        );
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);

}
.button:hover {
	cursor: pointer;
}
.lightbutton:hover {
	cursor: pointer;
}

a:hover {
	cursor: pointer;
}
a:hover.button {
        color: #E1E1E1;
}

footer {
	padding-top: 10px;
	height: 10%;
}

modal {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
}

copyright {
	position: fixed;
	bottom: 0px;
	right: 0px;
	font-size: 0.8em;

}
copyright::after {
	content: "All content copyrighted 2022";
}

order_details {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
}
order_details_text {
	display: block;
	position: relative;
	width: 80%;
	margin: auto;
	padding: 10px;
	background-color: white;
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}

div.payment_form {
	margin: auto;
	padding: 5px;
	padding-top: 20px;
	height: auto;
	background-color: white;
	width: 90%;
	max-width: 600px;
	background-color: #20828f;
	background: repeating-linear-gradient(
	  45deg,
	  #ffcd41,
	  #ffcd41 1px,
	  #c49c2b 1px,
	  #c49c2b 2px
	);
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}

div.input {
	margin: 0px;
	padding: 5px;
	vertical-align: middle;
	height: 100%;
	min-width: 45px;
        display: inline-block;
	box-sizing: border-box;
	height: 2.75rem;
	background: repeating-linear-gradient(
	  -45deg,
	  #ffcd41,
	  #ffcd41 1px,
	  #c49c2b 1px,
	  #c49c2b 2px
	);
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}

input {
	border-radius: 4px;
	background-color: #f0f5fb;
	border: 0;
	font-size: 1.125rem;
	padding: 5px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
}

select {
	width: 100%;
	height: 100%;
	background: white;
}

line,linetext {
	display: inline-block;
	height: auto;
	height: 3rem;
}
line {
	display: block;
}

.w10 {
	width: 10%;
}
.w20 {
	width: 20%;
}
.w30 {
	width: 30%;
}
.w40 {
	width: 40%;
}
.w50 {
	width: 50%;
}
.w60 {
	width: 60%;
}
.w70 {
	width: 70%;
}
.w80 {
	width: 80%;
}
.w90 {
	width: 90%;
}
.w100 {
	width: 100%;
}

div.input.center {
	margin: auto;
}

div.form_row {
	height: 40px;
	height: auto;
	margin-bottom: .625rem;
	display: flex;
}

div.form-row{
	width: 100%;
}

div.weather_main{
	display: inline-block;
	height: 100%;
	overflow: auto;
}
div.weather_element{
	width: auto;
	margin: 5%;
	font-size: 2em;
	border: solid #0077FF 2px;
	display: inline-block;
}
div.weather_header{
	border: solid #99CCFF 2px;
	display: inline-block;

}
div.weather_parameter{
	border: solid #66FF99 2px;
	display: inline-block;

}

info_modal{
	position: absolute;
	z-index: 3;
	background-color: rgba(255,255,255,0.7);
	-webkit-transition: 1s;
	display: none;
}

.topshadow{
        box-shadow: 0 -4px 4px 0 rgba(51, 62, 72, 0.13);
}

.StripeElement {
	display: none;
  box-sizing: border-box;

 /* height: 40px;*/

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
        box-shadow: 0 4px 4px 0 rgba(51,62,72,0.13), 0 4px 4px 0 rgba(51, 62, 72, 0.13);
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}