:root{	
--mcolor:#0c0f4a;
--scolor:#50d6f9;
--slctd:rgba(255, 0, 0, 0.2);
}
*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
body{
line-height: 1.5;
margin: 0;
box-sizing:border-box;
font-family: Tahoma;
color:var(--mcolor);
font-size:16px;
font-weight:normal;
background-color: #fff;
}
a {
color: var(--mcolor);
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
.part_title{
text-align: right;
padding:15px;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(241,241,241,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(241,241,241,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(241,241,241,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(241,241,241,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(241,241,241,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1', GradientType=1 );
}
.hwrap{
background-color: var(--mcolor);
background-image: url("/webroot/img/bg.png");
background-repeat: no-repeat;
background-position: left bottom;
display: flex;
align-items: center;
justify-content: center;
width:100%;
height:100vh;
}
.fwrap{
width:300px;
padding:30px;
border:1px solid #fff;
background-color: var(--scolor);
}
.txtbx{
padding:8px 15px;
border:1px solid #3faac5;
font-size:13px;
outline:none;
margin-bottom:10px;
width:100%;
}
.slct{
padding:8px 15px;
border:1px solid #3faac5;
font-size:17px;
outline:none;
margin-bottom:10px;
width:100%;
}
label{
font-size:14px;
margin-bottom:5px;
display:block;
font-style: italic;
}
.button{
padding:8px 15px;
border:1px solid #3faac5;
font-size:14px;
outline:none;
color: var(--mcolor);
letter-spacing: 1px;
cursor: pointer;
}
.button:hover{
background-color: var(--mcolor);
color: #fff;
}
.flabel{
font-size:13px;
text-align:right;
margin-bottom:15px;
}
.finner{
width:95%;
max-width:1300px;
margin:30px auto;
}
.c2{
display: grid;
grid-template-columns: 50% auto;
grid-gap:50px;
}
#preview{
display: none;
position: absolute;    
background-color: var(--hcolor);    
width:200px;
-webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.1);
}
#preview img{
width:200px;
display:block;
border: 2px solid var(--hcolor);
}
#hresponse, #rresponse{
font-size: 13px;
margin-left:20px;
}
#mstabel {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#mstabel td, #mstabel th {
border: 1px solid #ddd;
padding: 8px;
}
#mstabel tr:nth-child(even){
background-color: #f2f2f2;
}
#mstabel tr:hover {
background-color: #ddd;
}
#mstabel th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: var(--mcolor);
color: white;
}
#lres{
font-size:13px;
margin: 10px 0;
}
.notification{
margin: auto;
margin-top:calc(50vh - 38px);
border:1px solid #ccc;
width:350px;
padding:25px;
box-sizing: border-box;
text-align:center;
}
.upload_wrapper{
max-width:1300px;
margin:30px auto;
}
#ddArea {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
text-align: center;
font-size: 19px;
background-color: #f9f9f9;
margin:auto;
margin-bottom: 25px;
border-radius: 5px;
}
.selectfs{
background-color:#ededed;
border: 1px solid var(--scolor);
padding:15px;
color: var(--mcolor);
border-radius: 5px;
margin-left:15px;
cursor: pointer;
}
.drag_over {
color: #000;
border-color: #cc0000!important;
background-color: #ddd!important;
}
ul#showThumb{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns: repeat(6, 1fr);
grid-gap:30px;
list-style: none;
}
ul#showThumb li {
display:inline-block;
text-align: center;
}
ul#showThumb img {
width: 100%;
height: 150px;
padding: 2px;
border: 2px solid lightgray;
border-radius: 3px;
object-fit:cover;
display:block;
}
ul#showThumb p {
cursor: pointer;
font-size:13px;
text-align:center;
user-select: none;
word-break: break-all;
margin:25px;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
#fresponse{
font-size:14px;
margin-top:25px;
margin-bottom:25px;	
}















/* PAGEING */
ul.paging{
clear:both;
padding:10px 0 10px 0;
text-align:center;
margin:18px 0;
}
ul.paging li{
display:inline;
list-style:none;
font-size:15px;
cursor:pointer;
}
ul.paging li a{
display:inline-block;
line-height:34px;
width:33px;
height:33px;
margin:2px;	
color:var(--mcolor);
text-align:center;
text-decoration:none;
}
ul.paging li a:hover{
background-color:var(--mcolor);
color:#fff;
}
ul.paging li.current{
background-color:var(--mcolor);
display:inline-block;
line-height:34px;
width:33px;
height:33px;
margin:20px;	
color:#fff;
text-align:center;
text-decoration:none;
}
/* ATTRIBUTES */
.nothing{
margin:20px auto;
width: 50%;
padding:8px 18px;
border:1px solid #ddd;
font-weight:normal;
text-align:center;
font-size:20px;
color:#ccc;
}
.e{
color:red;
}
.s{
color:green;
}
/* Back to top */
img.back-to-top{
width:40px;
margin:auto;
display:block;
z-index:8;
position: fixed;
right: 20px;
bottom: 20px;
background-color: var(--green);
padding:15px 8px;
transition:0.8s;
}
img.back-to-top:hover{
background-color: var(--blue);    
}
/* Tabs */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#logout{
text-align:right;
max-width:1300px;
margin: auto;;
}
/* Calendar */
.calendar-wrp{
display:grid;
grid-template-columns: repeat(4, 1fr);
margin: 30px auto;
}
.calendar-item {
min-width: 200px;
display: inline-block;
vertical-align: top;
margin: 0 16px 20px;
font: 14px/1.2 Arial, sans-serif;
}
.calendar-head {
text-align: center;
padding: 5px;
font-size: 14px;
}
.calendar-item table {
border-collapse: collapse;
width: 100%;
}
.calendar-item th {
font-size: 12px;
padding: 6px 7px;
text-align: center;
color: #888;
font-weight: normal;
}
.calendar-item td {
font-size: 13px;
padding: 6px 5px;
text-align: center;
border: 1px solid #ddd;
user-select: none;
}
.calendar-item tr th:nth-child(6), .calendar-item tr th:nth-child(7),
.calendar-item tr td:nth-child(6), .calendar-item tr td:nth-child(7)  {
color: #e65a5a;
}	
.calendar-day.last {
color: #999 !important;
}	
.calendar-day.today {
font-weight: bold;
}
.calendar-day.std {
background-color:#ccc;
position: relative;
cursor: pointer;
}
.calendar-day.std:hover .calendar-popup {
display: block;
}
.calendar-popup {
display: none;
position: absolute;
top: 40px;
left: 0;
min-width: 115px;
padding: 15px;
background: #fff;
text-align: left;
font-size: 13px;
z-index: 100;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
color: #000;
}
.calendar-popup:before {
content: ""; 
border: solid transparent;
position: absolute;    
left: 8px;    
bottom: 100%;
border-bottom-color: #fff;
border-width: 9px;
margin-left: 0;
}
#datelist{
margin: 0;
padding:0;
display:grid;
grid-template-columns: repeat(9, 1fr);
grid-gap:5px;
}
#datelist li{
list-style: none;
padding:3px 5px;
border:1px solid #ccc;
background-color: #ededed;
font-size: 12px;
color: var(--mcolor);
text-align: center;
}
#datelist li.lasti{
background-color: #ffcccc;
}
#calo p{
text-align: center;
color: red;
padding:15px;
}
.free{
background-color: #ceead6!important;
}
.busy{
background-color: #fad2cf!important;
}
#textam, #textru, #texten{
overflow-y:scroll;
}
ul.languages{
max-width:1300px;
margin: auto;
text-align:right;
}
ul.languages li{
display:inline-block;
margin:7px 0 7px 7px;
}
.amenities_wrapper{
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap:10px;
}
.aheader{
font-size:16px;
font-style:oblique;
font-weight:bold;
margin:10px 0;
}
/* MEDIA QUERIES */
@media screen and (min-width: 1101px) {

}
@media screen and (max-width: 1300px) {
	.footeri{
	width:95%;
	}
}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 1000px) {
	.footeri {
	grid-template-columns: repeat(2, 1fr);
	}
	
}
@media (min-width: 992px){

}
@media screen and (max-width: 1181px) {

}
@media screen and (max-width: 1180px) {

}
@media screen and (max-width: 800px) {
  margin:25px;
}
@media screen and (max-width: 700px) {
    
}
@media screen and (max-width: 600px) {

}
@media screen and (max-width: 550px) {

}
@media screen and (max-width: 450px) {

}