/*
Author: DisignX
Author URI: https://www.disignx.com
Version: 2024.1
*/
		
@import "compass/css3";	
	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, tt, var, b, u, i, center, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
*{box-sizing: border-box;}
*, *::after, *::before {box-sizing: border-box!important;}

*{
	margin: 0;
	padding: 0;
	outline: none;
	line-height: inherit;
	min-width: 0;
	min-height: 0;
}

*, *::before, *::after
{
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
}

:root {
  font-size: calc(100vw / 100);
  --fcolor: rgb(241,247,247,1);
  --basic-background-color:rgb(3,15,15,1);
  --rich-dark-green:rgb(2,26,26,1);
  --dark-green:rgb(4,34,34,1);
  --carriba-green:rgb(0,223,130,1);
  --mountain-green:rgb(44,194,149,1);
  --bangee-green:rgb(3,98,76,1);
  --burger-menu-transition: 300ms;
  --transition-duration-04: 0.4s;
}

@media(max-width: 1199.98px){:root {font-size: calc(100vw / 50);}}
@media(max-width: 767.98px){:root {font-size: calc(100vw / 30);}}


body, html
{
font-family: "Plus Jakarta Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
color:var(--fcolor);
font-size: 1rem;
background:var(--basic-background-color);
}


/*
##########################################
TOOLKIT
##########################################
*/
@media(max-width: 1199.98px){
[class^="col-"], [class*=" col-"] {margin-bottom:3rem;}
}
.nocmare{margin-bottom:0rem;}
/*
##########################################
HEADINGS
##########################################
*/

h1{display:inline-block;font-size:4.7rem;font-weight:100;padding-bottom:2rem;font-weight:400;}
@media(max-width: 767.98px){h1{font-size:3rem;}}


h2{position:relative;display:inline-block;font-size:2.7rem;font-weight:700;padding-bottom:1rem;margin-bottom:1.5rem;}
h2::after{content:'';position:absolute;width:5rem;height:0.2rem;background:var(--red-1);left:0rem;bottom:0rem;}
h2.center-bottom-line::after{left:50%;margin-left:-2.5rem;}

h3{position:relative;display:inline-block;font-size:1.9rem;padding-bottom:1rem;font-weight:700;}


h4{position:relative;display:inline-block;font-size:1.6rem;color:white;font-weight:600;padding-bottom:0.5rem;margin-bottom:2rem;}
h4::after{content:'';position:absolute;width:3rem;height:2px;background:var(--white-transparent-middle);left:2rem;bottom:-0.5rem;}

h5{display:inline-block;font-size:1.4rem;color:var(--fcolor);font-weight:200;margin-bottom:1rem;}


h6{position:relative;display:inline-block;color:var(--red-1);font-weight:700;padding-bottom:1rem;margin-bottom:1rem;letter-spacing: 0.3rem;}

/*
##########################################
GENERAL TRANSITIONS
##########################################
*/
a, header, .gt04, .reservation::after, .week-reservation::after
{
  -o-transition:.4s;
  -ms-transition:.4s;
  -moz-transition:.4s;
  -webkit-transition:.4s;
  transition:.4s;
}

/*
##########################################
GLOBAL ELEMENTS
##########################################
*/

a{text-decoration: none;color:var(--fcolor);position: relative;z-index:10;}
a:hover{color:var(--fcolor);}
a::before{content: '';background-color:var(--red-1);position: absolute;left: 0;bottom:0rem;width: 100%;height: 0.1rem;z-index: -1;transition: all .3s ease-in-out;}
a:hover::before {bottom: 0;height: 100%;}


b{font-weight:700!important;}
iframe{max-width:100%;}

i, em{font-style: italic;}
p{float:left;display:block;width:100%;line-height: 150%;}
img{max-width:100%;height:auto;}
strong{font-weight:700;}

/*
##########################################
GOOGLE MATERIAL ICONS
##########################################
*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 100,
  'GRAD' -25,
  'opsz' 24
}
.material-symbols-outlined {font-size:6rem!important;}

/*RESPONSE POINTS
@media(max-width: 575.98px){}
@media(max-width: 767.98px){}
@media(max-width: 991.98px){}
@media(max-width: 1199.98px){}
@media(max-width:1600px){}


/*######################  DIRECT CSS ELEMENTS  ######################*/
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

.top{top:0;}
.bottom{bottom:0;}
.mirrored{transform: rotate(180deg);}

.hidden{display:none!important;}
.no-points{list-style-type:none;}
.no-margin{margin:0!important;}
.no-padding{padding:0!important;}

/*######################  TABLE MANAGEMENT  ######################*/
.table{display:block;float:left;height:100%;}
.table tr{display:block;float:left;width:100%;}


.shadowed{
  -webkit-box-shadow: 0px 0px 0.8rem 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 0.8rem 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 0.8rem 0px rgba(0, 0, 0, 1);
}
/*
##########################################
GLOBAL SPACERS
##########################################
*/

.spacer-12rem{display:block;float:left;width:100%;height:12rem;}
.spacer-9rem{display:block;float:left;width:100%;height:9rem;}
.spacer-8rem{display:block;float:left;width:100%;height:8rem;}
.spacer-6rem{display:block;float:left;width:100%;height:6rem;}
.spacer-5rem{display:block;float:left;width:100%;height:5rem;}
.spacer-4rem{display:block;float:left;width:100%;height:4rem;}
.spacer-3rem{display:block;float:left;width:100%;height:2rem;}
.spacer-2rem{display:block;float:left;width:100%;height:2rem;}
.spacer-1rem{display:block;float:left;width:100%;height:1rem;}
.spacer-05rem{display:block;float:left;width:100%;height:0.5rem;}

.only-resp{display:none;}
@media(max-width: 1199.98px){.only-resp{display:block;}}

/*
##########################################
BUTTONS
##########################################
*/
.button{display:block;float:left;padding:1.5rem 2rem 1.5rem 2rem;text-decoration:none;color:var(--fcolor);font-weight:700;background:var(--carriba-green);border:0;margin:0;border-radius:2rem;margin-bottom:1rem;}
.button:hover{background:var(--bangee-green);}

.button-opt-red{background:#e21c34!important;}
.button-opt-red:hover{background:#ba001f!important;}

.button-1{float:left;display:block;padding:1.5rem 3rem 1.5rem 3rem;margin-top:1rem;font-size:1.5rem;border-radius:5rem;border:0.2rem solid var(--carriba-green);color:var(--fcolor);background:transparent;font-weight:700;}
.button-1:hover{border:0.2rem solid var(--carriba-green);color:var(--fcolor);background:var(--carriba-green);}

/*
##########################################
HEADER
##########################################
*/
header{position:fixed;display:block;z-index:1001;left:0px;top:0px;width:100%;height:auto;text-align:right;padding: 1rem 4rem 1rem 4rem;}
@media(max-width: 1199.98px){header{height:6.7rem;}}
.header-logo{position:absolute;top:0rem;left:0rem;width:20rem;}
.header-logo img{display:block;width:100%;height:auto;}

/*
##########################################
RESERVATION SYSTEM AND SHEETS
##########################################
*/
.wrapper-carouselReservations{position:relative;display:block;width:100%;min-height:100vh;}
#carouselReservations{position:relative;display:block;width:100%;}

.reservation-sheet{display:block;width:100%;}
.reservation-sheet-header{position:fixed;z-index:500;left:0;top:0;right:0;display:block;float:left;width:100%;text-align:center;padding-top:1rem;height:4.5rem;background:var(--basic-background-color);}

.reservation-sheet-content{position:relative;display:block;width:100%;float:left;padding-top:4.5rem;}

.room-title h4{margin:0;padding:0;}
.room-title{display:block;width:100%;float:left;padding-top:2rem;padding-bottom:2rem;background:var(--rich-dark-green);border-bottom:2px solid var(--bangee-green);}

button.carousel-control{position:fixed;z-index:600;display:block;width:10%;height:4.5rem;background:var(--basic-background-color);opacity:1;}
button.carousel-control:hover, button.carousel-control:focus, button.carousel-control:active{background:var(--mountain-green);}
@media(max-width: 1199.98px){button.carousel-control{width:20%;}}


button.carousel-control-prev{top:0rem;border-right:0.1rem solid var(--mountain-green);border-bottom:0.1rem solid var(--mountain-green);border-bottom-right-radius: 2rem;}
button.carousel-control-next{top:0rem;border-left:0.1rem solid var(--mountain-green);border-bottom:0.1rem solid var(--mountain-green);border-bottom-left-radius: 2rem;}


/*
##########################################
TABLE GRIDS
##########################################
*/
.wrapper-tables {
  position: relative;
  display: flex;
  float:left;
  width: 100%;
  overflow-x: auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
  cursor: ew-resize;
}

.wrapper-tables:active {
  cursor: grabbing;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard-Syntax */
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  position:relative;
  text-align: center;
  vertical-align: top;
  height: 4rem; /* DEFAULT HEIGHT OF COL */
}

table th {
  font-weight: 700;
}

#sticky-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;

}

#time-container 
{
  position: relative;
  display:block;
  width: 5rem;
  height:100%;
  overflow:hidden;
  
  /* Kein overflow: hidden; */
}


#time-container td, #time-container th {
  width: 5rem;
  min-width: 5rem;
}

#table-container {
  position: relative;
  z-index: 99;
  display: block;
  margin-left:5rem;
}

#table-container.week, #table-container.month{margin-left:0rem;border-bottom:2px solid var(--bangee-green);}

#table-container td, #table-container th {
  width: 10rem;
  min-width: 10rem;
  border-right:2px solid var(--bangee-green);
}

#table-container.week td, #table-container.week th {
  width: 15rem;
  min-width: 15rem;
  border-right:2px solid var(--bangee-green);
}

#table-container.month td, #table-container.month th {
  width: 20rem;
  min-width: 20rem;
  border-right:2px solid var(--bangee-green);
}


table tr:nth-child(even) { background-color: var(--rich-dark-green);}

#time-container table tr:nth-child(even){background:transparent;}

/*######################  ELEMENTS TABLE HEAD ROW ######################*/
span.table-number{position:absolute;top:0.5rem;left:50%;background:var(--fcolor);color:var(--rich-dark-green);width:3rem;height:3rem;line-height:3rem;border-radius:50%;margin-left:-1.5rem;}
span.time{position:absolute;top:0.5rem;left:0.5rem;background:var(--fcolor);color:var(--rich-dark-green);width:4.5rem;height:3rem;line-height:3rem;border-radius:0.5rem;font-size:80%;font-weight:700;}

span.descr{padding-top:1rem;display:inline-block;}
span.descr h4{margin:0;padding:0;}


/*######################  ELEMENTS TABLE HEAD ROW ######################*/
.select-reservation{position:absolute;top:0.5rem;left:0.5rem;right: 0.5rem;border:2px solid var(--rich-dark-green);height:3rem;border-radius:0.5rem;}

table tr:nth-child(even) .select-reservation{
  border:2px solid var(--basic-background-color);
}


/*######################  PLUS GRID - SELECT RESERVATION ######################*/
.select-reservation:hover, table tr:nth-child(even) .select-reservation:hover{border:2px solid var(--carriba-green);cursor:pointer;}
.select-reservation.selected:hover{border:2px solid var(--carriba-green);}

table tr:nth-child(even) .select-reservation.selected{border:2px solid var(--carriba-green);}

span.add{position:absolute;top:1rem;left:50%;width:1rem;height:1rem;background:url(img/add_symbol.svg),no-repeat;background-size:auto 100%;margin-left:-0.5rem;opacity:0.5;}

.select-reservation:hover span.add{background:url(img/add_symbol_hover.svg),no-repeat;background-size:auto 100%;opacity:1;}

.select-reservation.selected{background:var(--carriba-green);border:2px solid var(--carriba-green);}
.select-reservation.selected span.add{top:0.75rem;width:1.5rem;height:1.5rem;margin-left:-0.75rem;background:url(img/selected.svg),no-repeat;background-size:100% 100%;opacity:1;}


/*######################  BUTTONS IN RESERVATION BLOCK ######################*/
.edit-reservation{position:absolute;display:block;bottom:0.5rem;right:0.5rem; width:1.5rem;height:1.5rem;background:url(img/edit.svg);background-repeat: no-repeat;background-size:auto 60%;border:0.05rem solid var(--fcolor);background-position:center center;border-radius:0.2rem;opacity: 0;}
.reservation-time{position:absolute;display:block;bottom:0.5rem;left:0.5rem; width:auto;height:2rem;line-height:2rem;padding-left:0.5rem;font-size:1rem;padding-right:0.5rem;border:0.05rem solid var(--fcolor);border-radius:0.2rem;}

/*######################  RESERVATION BLOCK DAY ######################*/
.reservation{position:absolute;z-index:500;top:0.5rem;left:0.5rem;right:0.5rem;border:2px solid var(--rich-dark-green); height:3rem;border-radius:0.5rem;cursor:pointer;}
.reservation::after{content:"";position: absolute;top:0;left:0;right:0;bottom:0;border:0.2rem solid var(--fcolor);border-radius:0.5rem;opacity:0;}
.reservation.selected::after{opacity: 1;}
.reservation:hover::after{opacity: 1;}
.reservation.selected .edit-reservation{opacity: 1;}
.reservation:hover .edit-reservation{opacity: 1;}
    .reservation .name-of-reservation-contact {
        position: absolute;
        display: block;
        top: 2.5rem;
        left: 1rem;
        right: 2rem;
        font-size: 75%;
        font-weight: bold;
        color: var(--fcolor);
        text-align: left;
    }
.reservation .name-of-reservation-info {
        position: absolute;
        display: block;
        top: 4rem;
        left: 1rem;
        right: 2rem;
        font-size: 60%;
        color: var(--fcolor);
        text-align: left;
    }


/*######################  RESERVATION BLOCK WEEK ######################*/
.week-reservation{position:relative;z-index:500;margin:0.5rem;margin-bottom:0rem;display:block;float:left;width: calc(100% - 1rem);border:2px solid var(--rich-dark-green);border-radius:0.5rem;cursor:pointer;}
.week-reservation::after{content:"";position: absolute;top:0;left:0;right:0;bottom:0;border:0.2rem solid var(--fcolor);border-radius:0.5rem;opacity:0;}
.week-reservation.selected::after{opacity: 1;}
.week-reservation:hover::after{opacity: 1;}
.week-reservation.selected .edit-reservation{opacity: 1;}
.week-reservation:hover .edit-reservation{opacity: 1;}
    .week-reservation .name-of-reservation-contact {
        position: relative;
        display: block;
        float: left;
        padding-top: 2.5rem;
        padding-left: 1rem;
        padding-right: 2rem;
        padding-bottom: 4rem;
        font-size: 75%;
        font-weight: bold;
        color: var(--fcolor);
        text-align: left;
    }
    .week-reservation .name-of-reservation-contactWithInfo {
        position: relative;
        display: block;
        padding-top: 2.5rem;
        padding-left: 1rem;
        padding-right: 2rem;
        padding-bottom: 1rem;
        font-size: 75%;
        font-weight: bold;
        color: var(--fcolor);
        text-align: left;
    }
    .week-reservation .name-of-reservation-info {
        position: relative;
        display: block;
        float: left;
        padding-left: 1rem;
        padding-right: 2rem;
        padding-bottom: 4rem;
        font-size: 60%;
        color: var(--fcolor);
        text-align: left;
    }


/*######################  RESERVATION BUTTONS  ######################*/
.wrapper-reservation-button{display:block;float:left;padding:0.5rem;}
.reservation-button{position:relative;display:block;float:left;width:4rem;height:4rem;background:var(--rich-dark-green);border-radius:50%;border:0.1rem solid var(--carriba-green);margin-right:0.5rem;}
.reservation-button:hover{background:var(--carriba-green);}
.reservation-button.add-new-reservation span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(img/add_symbol.svg);background-repeat: no-repeat;background-size:auto 50%;background-position:center center;}
.reservation-button.link-to-day  span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(img/move_up.svg);background-repeat: no-repeat;background-size:auto 30%;background-position:center center;}

/*######################  RESERVATION BLOCK MONTH ######################*/
.month-reservation-block{display:block;float:left;width:100%;padding:0.5rem;font-size:70%;text-align:left;}
.reservation-date{display:block;float:left;width:100%;font-weight:700;border-bottom:0.1rem solid var(--carriba-green);color:var(--carriba-green);padding-bottom:0.5rem;margin-bottom:0.5rem;}

.wrapper-month-reservation-details{display:block;float:left;width:100%;margin-bottom:0.2rem;}
.reservation-point{display:block;float:left;width:1rem;height:1rem;border-radius:50%;}
.wrapper-month-reservation-details span{padding-left:0.3rem;padding-right:0.3rem;}
.wrapper-month-reservation-details span:nth-child(2){font-weight:700;}


/*######################  RESERVATION BLOCK UNIVERSAL CSS ######################*/
.in-reservation-tag{position:absolute;display:block;font-size:70%;font-weight:700;padding:0.3rem 0.8rem 0.3rem 0.8rem;border-radius:0.25rem;}
.team-code{top:0.5rem;left:0.5rem;color:var(--fcolor);background:var(--rich-dark-green);}
.number-of-persons{top:0.5rem;right:0.5rem;background:var(--fcolor);color:var(--rich-dark-green);}
.additional-info-icon{position:absolute;display:block;top:2.5rem;right:0.5rem;width:1rem;height:1rem;background:url(img/info.svg);background-size:100% 100%;}
.table-numer{top:0.5rem;right:4rem;color:var(--fcolor);background:var(--rich-dark-green);}

/*######################  RESERVATION BLOCK COLORS ######################*/
.standard{background: linear-gradient(45deg, #ba001f 0%, #e21c34 100%);}
.admin{background: linear-gradient(45deg, #baab00 0%, #e2e01c 100%);}



/*######################  MANAGE DURATION ######################*/
.duration-2{height:7rem;}
.duration-3{height:11rem;}
.duration-4{height:15rem;}
.duration-5{height:19rem;}
.duration-6{height:23rem;}
.duration-7{height: 27rem;}
.duration-8{height: 31rem;}
.duration-9{height: 35rem;}
.duration-10{height: 39rem;}
.duration-11{height: 43rem;}
.duration-12{height: 47rem;}
.duration-13{height: 51rem;}
.duration-14{height: 55rem;}
.duration-15{height: 59rem;}
.duration-16{height: 63rem;}
.duration-17{height: 67rem;}
.duration-18{height: 71rem;}
.duration-19{height: 75rem;}
.duration-20{height: 79rem;}

/*
##########################################
CONFIRM RESERVATION BUTTON - RIGHT SIDE BOTTOM 
##########################################
*/

.confirm-selection{position:fixed;z-index:900;bottom:1rem;right:1rem;visibility:hidden;opacity:0;}
.confirm-selection.active{visibility:visible;opacity:1;}
@media(max-width: 767.98px){.confirm-selection{background: var(--dark-green);bottom:0;left:0;right:0;padding:1rem;}}

.confirm-selection button{display:block;float:left;background:var(--carriba-green);padding:1.5rem 2rem 1.5rem 2rem;font-weight:700;border:0;border-radius:1rem;}
.confirm-selection button h4{padding:0;margin:0;color:var(--fcolor);}

.confirm-selection button.confirm-button:hover{background: var(--bangee-green);}

.confirm-selection button.exit-button h3{color:var(--carriba-green);}
.confirm-selection button.exit-button{position: relative;margin-left:1rem;float:right;padding:1.5rem 2.5rem 1.5rem 2.5rem;}

.confirm-selection button.exit-button span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(img/close.svg);background-repeat: no-repeat;background-size:auto 30%;background-position:center center;}

/*
##########################################
SYSTEM NAVIGATION BUTTONS - RIGHT SIDE BOTTOM 
##########################################
*/
.system-navigation{position:fixed;z-index:890;bottom:0rem;right:0rem;padding:0.8rem;background:var(--basic-background-color);border-top-left-radius:1rem;text-align:center;}
@media(max-width: 767.98px){.system-navigation{left:0rem;border-left:0rem solid var(--mountain-green);border-top-left-radius:0rem;}}
.wrapper-system-buttons{display:inline-block;}
.system-navigation-button, .system-selectedTable-button {display:block;float:left;width:3rem;height:3rem;border:0.1rem solid var(--mountain-green);background:var(--dark-green);margin-right:0.5rem;border-radius:0.5rem; color:white;margin-bottom: 5px;}
.system-navigation-button:hover, .system-navigation-button:active, .system-navigation-button:focus{border:0.1rem solid var(--carriba-green);background:var(--carriba-green);}
.system-navigation-button.active{border:0.1rem solid var(--carriba-green);background:var(--carriba-green);}
.system-navigation-button span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(img/calendar_day.svg);background-repeat: no-repeat;background-size:auto 50%;background-position:center center;}

.system-navigation-button.month span{background:url(img/calendar_month.svg);background-repeat: no-repeat;background-size:auto 50%;background-position:center center;}
.system-navigation-button.week span{background:url(img/calendar_week.svg);background-repeat: no-repeat;background-size:auto 50%;background-position:center center;}
.system-navigation-button.settings span{background:url(img/settings.svg);background-repeat: no-repeat;background-size:auto 50%;background-position:center center;}

.system-selectedTable-button.selected { border: 0.1rem solid var(--carriba-green); background: var(--carriba-green); }


/*
##########################################
MODAL EDIT RESERVATION
##########################################
*/
.modal-content {
    border-radius: 2rem;
    background: var(--fcolor);
}

.modal-header{padding:2rem;padding-top:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #ccdddc;}
.modal-header h3{color:var(--carriba-green);margin:0;padding:0;}
.btn-close{position:absolute;top:2rem;right:2rem;display:block;width:1rem;height:1rem;float:right;}


.modal-body{padding:2rem;color:var(--dark-green);}
.modal-body label{display:block;float:left;width:100%;margin-bottom:1rem;font-weight:700;}
.modal-body input, .modal-body textarea{display:block;float:left;min-width:10rem;margin-bottom:2rem;padding:1rem;color:var(--dark-green);background:#ccdddc;border-radius:2rem;border:0;}
    .modal-body select {
        appearance: none; /* Remove the default select styling */
        -webkit-appearance: none; /* For Safari */
        -moz-appearance: none; /* For Firefox */
        display: block;
        float: left;
        min-width: 10rem;
        margin-bottom: 2rem;
        padding: 1rem;
        color: var(--dark-green);
        background: #ccdddc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="black" d="M0 3l5 5 5-5z"/></svg>') no-repeat right 1rem center;
        border-radius: 2rem;
        border: 0;
        background-size: 1rem;
    }
.modal-body input:hover, .modal-body textarea:hover{background:#aaccc9;}
.modal-body input:active, .modal-body textarea:active{background:#aaccc9;}
.modal-body input:focus, .modal-body textarea:focus{background:#aaccc9;}
.modal-body textarea{width:100%;border-radius:0.5rem;height:6rem;}

.modal-footer{padding:2rem;padding-top:1.5rem;padding-bottom:1.5rem;border-top:1px solid #ccdddc;}


/*
##########################################
FORMS
##########################################
*/
.bg-login{position:fixed;display:block;z-index:-1;top:0;left:0;right:0;bottom:0;background: linear-gradient(45deg, var(--basic-background-color) 0%, var(--bangee-green) 100%);}
#loginForm{display:block;float:left;width:50%;margin-left:25%;padding:4rem;}
@media(max-width: 1199.98px){#loginForm{width:90%;margin-left:5%;}}
.logo-gastroxpert{display:block;float:left;width:100%;text-align:center;padding-bottom:2rem;user-select: none; }
.logo-gastroxpert img{display:inline-block;width:60%;}
@media (max-width: 767.98px){.logo-gastroxpert img{width:100%;}}

#loginForm .form-description{display:block;float:left;width:100%;padding-bottom:2rem;}
#loginForm .form-row{display:block;float:left;width:100%;border-radius:2rem;margin-bottom:1rem;}
#loginForm label{display:block;float:left;padding:1.2rem 3rem 1.2rem 3rem;}
#loginForm input{display:block;float:left;padding:1.2rem 3rem 1.2rem 3rem;border-radius:2rem;color:var(--fcolor);border:0.2rem solid var(--fcolor);background:var(--rich-dark-green);}
#loginForm input:hover,#loginForm input:focus, #loginForm input:active{outline:0px;border:0.2rem solid var(--carriba-green);background:var(--bangee-green);}


.desk80{width:80%;}
.desk70{width:70%;}
.desk50{width:50%;}
.desk30{width:30%;}
.desk20{width:20%;}

@media (max-width: 767.98px) {
    .desk50 { width: 100%; }
    .desk20 { width: 100%; }
    .desk80 { width: 100%; }
    .desk30 { width: 100%; }
    .desk70 { width: 100%; }
}
/*
##########################################
Footer
##########################################
*/
footer{padding-top:5rem;padding-bottom:5rem;}

/*
##########################################
LIGHT GALLERY 
##########################################
*/

/*
##########################################
LOADING SPINNER
##########################################
*/
#loading-page{position:fixed;z-index:5000;top:0px;left:0px;width:100%;height:100%;background: linear-gradient(45deg, var(--basic-background-color) 0%, var(--bangee-green) 100%);}
#loading-wrapper{position:absolute;top:50%;left:50%;margin-top:-5rem;margin-left:-5rem;}
#loading{display:inline-block; width: 10rem; height: 10rem;border: 0.5rem solid rgba(255,255,255,.3);border-radius: 50%;border-top-color:white;animation: spin 1s ease-in-out infinite;-webkit-animation: spin 1s ease-in-out infinite;}
@keyframes spin { to { -webkit-transform: rotate(360deg); }}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); }}


/*
##########################################
ADMIN
##########################################
*/
/*.sapFShellBar{background:transparent!important;}
.sapTntToolPageContentWrapper{padding-top:4rem;}
.sapUiBody header{padding:0rem!important;}
.sapFShellBar .sapFShellBarPrimaryTitle{padding-top:2rem!important;}*/