@charset "UTF-8";

@font-face {
  font-family: "Roboto";
  src: url("https://storage.googleapis.com/inscribirme.appspot.com/media/spacesforevents/fonts/roboto_flex/RobotoFlex.ttf") format("truetype-variations");
  font-weight: 100 1000;
} 
@font-face {
  font-family: "RobotoSerif";
    src: url("https://storage.googleapis.com/inscribirme.appspot.com/media/spacesforevents/fonts/roboto_serif/robotoserif.ttf") format("truetype-variations");
  font-weight: 100 1000;
} 

:root {
    --main: #ed8914; /*237,137,20*/
    --main80: #ef952c; 
    --main20: #fceddc; 
    --maindark: #df841a; 
    --secondary: #675c53; /*103,92,83*/
    --secondary20: #e1dedd;
    --secondary40: #c2beba;
    --secondary60: #a49d98;
    --secondary80: #857d75;
    --text: #333333;
    --white: #ffffff;
    --black: #000000;
    --secondaryt: #675c5360;
      --red: #cb0101;/*203,1,1*/
      --green: #7CA22F;/*124,162,47*/
}
.dropzone .dz-preview .dz-image img {
  width: 100%;
}

body, html {background: #fff!important; padding: 0px; margin: 0px}
.spaces_body {font-size: 1em; font-family: "Roboto"!important; font-weight: 250; color: var(--text); display:flex; flex-direction:column;min-height: 100vh; overflow-x: hidden}
.clickable:hover {cursor: pointer;}
a {text-decoration: none; color: var(--main)}
a:hover {text-decoration: underline}

.create_new {color: var(--secondary); font-size: 1.05em; font-weight: 400}
.create_new i {color: var(--main); }
.create_new:hover, .create_new i:hover {text-decoration: none}

.back {font-size: 0.8em; font-weight: 200; color: var(--secondary60)}

textarea {resize: none}
.in_the_middle {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%)}
.center_content {display: flex; justify-content: center; align-items: center}

.center {text-align: center!important}
.left {text-align: left!important}
.right {text-align: right!important}

.m5 {margin: 5px 0px 0px!important}
.m10 {margin: 10px 0px 0px!important}
.m20 {margin: 20px 0px 0px!important}
.m30 {margin: 30px 0px 0px!important}
.m40 {margin: 40px 0px 0px!important}
.m50 {margin: 50px 0px 0px!important}
.m60 {margin: 60px 0px 0px!important}
.m70 {margin: 70px 0px 0px!important}
.m90 {margin: 90px 0px 0px!important}

.main_header, .main_display, .main_footer {border: 0px solid #f87800; width: calc(100% - 240px); padding: 0px 120px; position: relative}
.main_header {position: relative}


.main_display {flex-grow: 1; position: relative}

button, .button {font-size: 1.05em; font-weight: 350!important; text-align: center; text-transform: uppercase; height: 30px; line-height: 30px; border-radius: 7px; color: var(--white); background: var(--main); text-shadow: 1px 1px 2px rgba(0,0,0,0.2); display: table; border: none; padding: 0px 30px; cursor: pointer}
button:hover,.button:hover {color: var(--secondary); text-decoration: none!important; background: var(--main)}

.button_small {font-size: 0.9em; font-weight: 350!important; text-align: center; text-transform: uppercase; height: 24px; line-height: 24px; border-radius: 7px; color: var(--white); background: var(--main80); text-shadow: 1px 1px 2px rgba(0,0,0,0.2); display: table; border: none; padding: 0px 20px; cursor: pointer}

.close-btn {background: none!important; padding: 0px!important; position: absolute; top: 10px; right: 20px; text-align: right; color: var(--main); margin-bottom: 30px; display: block}

.dialog-box p {margin: 30px 0px}

.minibutton {font-size: 0.8em; font-weight: 350!important; text-align: center; text-transform: uppercase; height: 18px; line-height: 18px; border-radius: 5px; color: var(--white); background: var(--secondary40); text-shadow: 1px 1px 2px rgba(0,0,0,0.2); display: table; border: none; padding: 0px 10px; cursor: pointer}
.minibutton:hover {color: var(--white)!important; background: var(--secondary80)}

.miniorange {background: var(--main80)!important}
.miniorange:hover {background: var(--main)!important}

/*** caroulsel ***/

.loop-container-flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  border: 0px solid #f09;
  z-index: 1;
}

.bg-trans-cross-fade {
  width: 100%;
  height: calc(100vh - 138px);
  position: relative;
  z-index: 1;
  margin:5px 0px 20px;
}

.bg-trans-cross-fade .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-trans-cross-fade .bg-layer .fg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-size: cover;
    background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 2s;
}

.bg-trans-cross-fade .bg-layer .fg-layer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  z-index: 4;
}

.bg-trans-cross-fade .bg-layer .text-layer {
    
  border: 0px solid #fff;
  position: absolute; 
  top: 50%;
  left: 50%;
    transform: translateX(-50%) translateY(-50%);
  width: 80%;
  height: auto;
  color: white;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.bg-trans-cross-fade .bg-layer .text-layer h2 {font-size: 4.5vw; font-weight: 300; line-height: 5vw; font-family: 'RobotoSerif', serif; text-shadow: 2px 2px 3px rgba(0,0,0,0.3); display: none}
/*** end caroulsel ***/

.home_search {background: rgba(103,92,83,0.98); padding: 1% 1%; position: absolute; z-index: 500; width: calc(35vw - 120px); margin: 0px 20px; bottom: 20px; height: calc(100vh - 208px); right: 0px; border-radius: 0px; box-shadow: 2px 2px 4px  rgba(0,0,0,0.2)}
.home_search h3 {color: var(--main); font-size: 2vw; font-weight: 200; font-family: 'RobotoSerif', serif; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); margin: 20px 0px!important}
.home_search .bigger {font-size: 1.4em; font-weight: 300; color: var(--white)}
.home_search label {color: var(--secondary20)}
.innersearch {border: 0px solid #f89; width: calc(100% - 60px)}

.mobile_search {display: none}

/* signing */
.wrappersign {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 20px 0px;
  width: calc(100% - 0px);
    min-height: 65vh; 
  border: 0px solid #ee0000;
}

.forms label {margin: 10px 0px 5px;; display: block}
.forms label.radio_label {display: inline;}

.star {color: var(--main); font-size: 90%; font-weight: 200; transform: translateY(-12%); display: inline-block}

.boxsign {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
}

.s1aa {grid-row: 1;  grid-column: 1 / span 2} 
.s1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.s1b {grid-row: 1;  grid-column: 2; padding-left: 10px; position: relative} 

.centerbg {background-size: cover!important; background-repeat: no-repeat!important; background-position: center center!important}

.sign_form {position: absolute}

.wrappersign h1 {font-size: 1.5em; font-weight: 200; color: var(--main); text-transform: uppercase}
.wrappersign h2 {font-size: 2.5em; font-weight: 200; color: var(--main)}
.wrappersign h5 {font-size: 1.1em; font-weight: 200; color: var(--text); margin: 5px 0px!important}
.wrappersign h6 {font-size: 1.0em; font-weight: 200; color: var(--text); margin: -10px 0px 15px!important}

.input_text, #id_email {max-width: 100%; min-width: calc(100% - 8px); display: block; font-family: 'RobotoSerif'!important; font-size: 0.95em; font-weight: 300; color: var(--secondary)!important; padding: 7px 3px; background: var(--white); border: 1px solid var(--secondary20); margin: 5px 0px 10px}
.input_text:focus, #id_email:focus {border-bottom: 1px solid var(--secondary60); outline: none!important}
.wrappersign label {font-size: 1em; margin: 5px 0px 0px}

.input_text:-webkit-autofill,
.input_text:-webkit-autofill:hover,
.input_text:-webkit-autofill:focus,
.input_text:-webkit-autofill:active  {-webkit-box-shadow: 0 0 0 60px #fff inset!important;}

.amenities_table input[type="number"] {width: 100px!important}
.amenities_table {}
.amenities_table table {; width: 100%}

.disabled {opacity: 1; cursor: pointer!important; pointer-events: auto}
.disabled1 {opacity: 0.5; pointer-events: none}

.forgot { margin: 0px!important; font-size: 0.9em}

.fomr_subt {font-size: 1.1em; font-weight: 400; color: var(--black); margin: 10px 0px 0px}
.fomr_subt i {font-size: 0.8em;  color: var(--main); transform: translateY(-1px)}
form .smaller {font-size: 85%; font-weight: 200; color: #777}

.smaller80 {font-size: 85%; font-weight: 200; color: #777}

.lema_home {margin: 20px 0px 20px; width: 100%; text-align: center}
.lema_home h1 {font-size: 2.4em; font-weight: 100; color: var(--main); padding: 0px!important; margin: 0px!important; font-family: 'RobotoSerif', serif}

.lemes_home {display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border: 0px solid #f89; margin: 0px 0px 30px}

.lemes_home div {text-align: center}
.lemes_home h5 {font-size: 1.5em; font-weight: 250; color: var(--secondary); letter-spacing: 1px; padding: 0px!important; margin: 0px!important}
.lemes_home h5 b {font-weight: 350;  letter-spacing: 0px;}

.lemes_home img {width: 110px; margin: 10px 0px 5px}

/* 2 columns */
.wrappertwo {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

.boxtwo {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.k1aa {grid-row: 1;  grid-column: 1 / span 2} 
.k1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.k1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 

.k2aa {grid-row:2;  grid-column: 1 / span 2} 
.k2a {grid-row: 2;  grid-column: 1; padding-right: 10px;border: 0px solid #ee0000} 
.k2b {grid-row: 2;  grid-column: 2; padding-left: 10px;border: 0px solid #ee0000} 

.k3aa {grid-row: 3;  grid-column: 1 / span 2} 
.k3a {grid-row: 3;  grid-column: 1; padding-right: 10px} 
.k3b {grid-row: 3;  grid-column: 2; padding-left: 10px} 

.k4aa {grid-row: 4;  grid-column: 1 / span 2} 
.k4a {grid-row: 4;  grid-column: 1; padding-right: 10px} 
.k4b {grid-row: 4;  grid-column: 2; padding-left: 10px} 

.k5aa {grid-row: 5;  grid-column: 1 / span 2} 
.k5a {grid-row: 5;  grid-column: 1; padding-right: 10px} 
.k5b {grid-row: 5;  grid-column: 2; padding-left: 10px} 

.k6aa {grid-row: 6;  grid-column: 1 / span 2} 
.k6a {grid-row: 6;  grid-column: 1; padding-right: 10px} 
.k6b {grid-row: 6;  grid-column: 2; padding-left: 10px} 
/* end 2 columns */

.twosmall {grid-template-columns: 50% 50%!important; width: 100%!important}

.twosmall .k1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.twosmall .k1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 

.wrappertwobook {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.kb1aa {grid-row: 1;  grid-column: 1 / span 2} 
.kb1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.kb1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 

.kb2aa {grid-row:2;  grid-column: 1 / span 2} 
.kb2a {grid-row: 2;  grid-column: 1; padding-right: 10px;border: 0px solid #ee0000} 
.kb2b {grid-row: 2;  grid-column: 2; padding-left: 10px;border: 0px solid #ee0000} 

.kb3aa {grid-row: 3;  grid-column: 1 / span 2} 
.kb3a {grid-row: 3;  grid-column: 1; padding-right: 10px} 
.kb3b {grid-row: 3;  grid-column: 2; padding-left: 10px} 

.kb4aa {grid-row: 4;  grid-column: 1 / span 2} 
.kb4a {grid-row: 4;  grid-column: 1; padding-right: 10px} 
.kb4b {grid-row: 4;  grid-column: 2; padding-left: 10px} 

.kb5aa {grid-row: 5;  grid-column: 1 / span 2} 
.kb5a {grid-row: 5;  grid-column: 1; padding-right: 10px} 
.kb5b {grid-row: 5;  grid-column: 2; padding-left: 10px} 

.kn6aa {grid-row: 6;  grid-column: 1 / span 2} 
.kn6a {grid-row: 6;  grid-column: 1; padding-right: 10px} 
.kn6b {grid-row: 6;  grid-column: 2; padding-left: 10px} 


/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 33.3% 33.4% 33.3% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.boxthree {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.autocomplete-container {display: table; width: 100%!important}

.h1aa {grid-row: 1;  grid-column: 1 / span 2} 
.h1aaa {grid-row: 1;  grid-column: 1 / span 3} 
.h1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.h1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 
.h1c {grid-row: 1;  grid-column: 3; padding-left: 10px} 

.h2aa {grid-row: 2;  grid-column: 1 / span 2} 
.h2aaa {grid-row: 2;  grid-column: 1 / span 3} 
.h2a {grid-row: 2;  grid-column: 1; padding-right: 10px} 
.h2b {grid-row: 2;  grid-column: 2; padding-left: 10px} 
.h2c {grid-row: 2;  grid-column: 3; padding-left: 10px} 

.h3aa {grid-row: 3;  grid-column: 1 / span 2} 
.h3aaa {grid-row: 3;  grid-column: 1 / span 3} 
.h3a {grid-row: 3;  grid-column: 1; padding-right: 10px} 
.h3b {grid-row: 3;  grid-column: 2; padding-left: 10px} 
.h3c {grid-row: 3;  grid-column: 3; padding-left: 10px} 

.h4aa {grid-row: 4;  grid-column: 1 / span 2} 
.h4aaa {grid-row: 4;  grid-column: 1 / span 3} 
.h4a {grid-row: 4;  grid-column: 1; padding-right: 10px} 
.h4b {grid-row: 4;  grid-column: 2; padding-left: 10px} 
.h4c {grid-row: 4;  grid-column: 3; padding-left: 10px} 

.h5aa {grid-row: 5;  grid-column: 1 / span 2} 
.h5aaa {grid-row: 5;  grid-column: 1 / span 3} 
.h5a {grid-row: 5;  grid-column: 1; padding-right: 10px} 
.h5b {grid-row: 5;  grid-column: 2; padding-left: 10px} 
.h5c {grid-row: 5;  grid-column: 3; padding-left: 10px} 

/* end 3 columns */



/* 4 columns */
.wrapperfour {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.boxfour {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.f1a {grid-row: 1;  grid-column: 1; padding: 0px 5px 0px 0px} 
.f1aa {grid-row: 1;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.f1aaa {grid-row: 1;  grid-column: 1 / span 3; padding: 0px 5px 0px 0px} 
.f1aaaa {grid-row: 1;  grid-column: 1 / span 4; padding: 0px} 
.f1b {grid-row: 1;  grid-column: 2; padding: 0px 5px } 
.f1c {grid-row: 1;  grid-column: 3; padding: 0px 5px } 
.f1cc {grid-row: 1;  grid-column: 3 / span 2; padding: 0px 0px 0px 5px} 
.f1d {grid-row: 1;  grid-column: 4; padding: 0px 0px 0px 5px} 

.f2a {grid-row: 2;  grid-column: 1; padding: 0px 5px 0px 0px} 
.f2aa {grid-row: 2;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.f2aaaa {grid-row: 2;  grid-column: 1 / span 4; padding: 0px 5px 0px 0px} 
.f2b {grid-row: 2;  grid-column: 2; padding: 0px 5px } 
.f2c {grid-row: 2;  grid-column: 3; padding: 0px 5px } 
.f2cc {grid-row: 2;  grid-column: 3 / span 2; padding: 0px 0px 0px 5px} 
.f2d {grid-row: 2;  grid-column: 4; padding: 0px 0px 0px 5px} 

.f3a {grid-row: 3;  grid-column: 1; padding: 0px 5px 0px 0px} 
.f3aa {grid-row: 3;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.f3aaa {grid-row: 3;  grid-column: 1 / span 3; padding: 0px 5px 0px 0px} 
.f3aaaa {grid-row: 3;  grid-column: 1 / span 4; padding: 0px 5px 0px 0px} 
.f3b {grid-row: 3;  grid-column: 2; padding: 0px 5px } 
.f3c {grid-row: 3;  grid-column: 3; padding: 0px 5px } 
.f3cc {grid-row: 3;  grid-column: 3 / span 2; padding: 0px 0px 0px 5px} 
.f3d {grid-row: 3;  grid-column: 4; padding: 0px 0px 0px 5px} 

.f4a {grid-row: 4;  grid-column: 1; padding: 0px 5px 0px 0px} 
.f4aa {grid-row: 4;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.f4aaaa {grid-row: 4;  grid-column: 1 / span 4; padding: 0px 5px 0px 0px} 
.f4b {grid-row: 4;  grid-column: 2; padding: 0px 5px } 
.f4c {grid-row: 4;  grid-column: 3; padding: 0px 5px } 
.f4cc {grid-row: 4;  grid-column: 3 / span 2; padding: 0px 0px 0px 5px} 
.f4d {grid-row: 4;  grid-column: 4; padding: 0px 0px 0px 5px} 

.f5a {grid-row: 5;  grid-column: 1; padding: 0px 5px 0px 0px} 
.f5aa {grid-row: 5;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.f5aaaa {grid-row: 5;  grid-column: 1 / span 4; padding: 0px 5px 0px 0px} 
.f5b {grid-row: 5;  grid-column: 2; padding: 0px 5px } 
.f5c {grid-row: 5;  grid-column: 3; padding: 0px 5px } 
.f5cc {grid-row: 5;  grid-column: 3 / span 2; padding: 0px 0px 0px 5px} 
.f5d {grid-row: 5;  grid-column: 4; padding: 0px 0px 0px 5px} 

.ff1aa {grid-row: 1;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.ff1cc {grid-row: 1;  grid-column: 3 / span 2; padding: 0px 0px 0px 5px} 

.ff2aa {grid-row: 2;  grid-column: 1 / span 2; padding: 0px 5px 0px 0px} 
.ff2c {grid-row: 2;  grid-column: 3; padding: 0px 5px } 
.ff2d {grid-row: 2;  grid-column: 4; padding: 0px 0px 0px 5px} 

.ff3a {grid-row: 3;  grid-column: 1; padding: 0px 5px 0px 0px} 
.ff3b {grid-row: 3;  grid-column: 2; padding: 0px 5px } 
.ff3c {grid-row: 3;  grid-column: 3; padding: 0px 5px } 
.ff3d {grid-row: 3;  grid-column: 4; padding: 0px 0px 0px 5px} 

.ff4 {grid-row: 4;  grid-column: 1 /span 4; padding: 0px 0px 0px 0px} 
.ff4 {grid-row: 4;  grid-column: 1 /span 4; padding: 0px 0px 0px 0px} 

/* end 4 columns */

.columns3 {display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr)}
.columns2 {display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr)}
.columns4 {display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr)}
.columns5 {display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr)}
.columnsfotos {display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr)}

/* search results */
.extra_seacrh {margin: 20px 0px; padding: 10px; font-size: 90%; background: var(--secondary20)}
.extra_seacrh .bigger {font-size: 1.2em; line-height: 35px; color: var(--secondary); font-weight: 400}
.extra_seacrh .label1 {
  background-color: var(--main);
  color: var(--white);
  padding: 5px;
  text-decoration: none;
  font-size: 1.1em; font-weight: 300;
  display: block;
    cursor: pointer; 
    margin: 10px 0px
}
.extra_seacrh i {font-size: 0.9em; margin-right: 5px}

input#display-toggle,.label1#display-button {display: none;}

.label1#hide-button{  display: none;}

#hidden-content {display: block;}

input#display-toggle:checked ~ .label1#display-button {  display: block;}

input#display-toggle:checked ~ .label1#hide-button {  display: none;}

input#display-toggle:checked ~ #hidden-content {  display: none;}

.err_messages {font-size: 0.9em; font-weight: 300; color: var(--main); margin: 10px 0px}

.results_title {margin-top: 10px; font-size: 1.2em; font-weight: 200; color: var(--text)}
.results_title b { font-weight: 400; color: var(--main)}

/* cards */
.results_cards {max-width: 100%;margin: 20px 0px;display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr);}
.res_card { border: 1px solid var(--secondary20); padding: 5px 5px 20px}
.res_card:hover { border: 1px solid var(--main)}
.card_image {height: 130px; background-size: cover!important; background-position: center center!important; background-repeat: no-repeat!important}
.res_card .name {font-size: 1.1em; color: var(--secondary); font-weight: 400; margin: 10px 0px 0px}
.res_card .location {font-size: 1.0em; color: var(--black); font-weight: 250; margin: 0px 0px 10px}
.res_card .tags span {font-size: 0.7em; color: var(--secondary); font-weight: 250; margin-right: 5px; background: var(--secondary20); padding: 2px 5px; border-radius: 3px}
.res_card .tags  { margin: 20px 0px 1px; }
.res_card .details {font-size: 0.95em; color: var(--text); font-weight: 200; margin: 5px 0px 1px}
.res_card .details b { font-weight: 250; }

.results_cards a:hover {text-decoration: none!important;}


.login_error {color: var(--red); font-size: 0.9em; margin: 5px 0px 20px}

/* VENUE PAGE */
.venue_details .name {font-size: 1.5em; color: var(--secondary)}

.venue_details .venue_book {background: var(--secondary20); margin: 23px 0px 0px; padding: 20px; min-height: 410px; position: relative}
.venue_details .venue_book h1 {margin: 0px 0px 20px!important; font-size: 1.5em; font-weight: 400; padding: 0px; color: var(--secondary)}

.venue_details .venue_book h4 {margin: 20px 0px 20px!important; font-size: 1.2em; font-weight: 300; padding: 0px}

.venue_details .venue_book .b_form {border: 0px solid #f90; ; width: calc(100% - 40px); position: absolute; top: 50%; transform: translateY(-50%)}

.venue_details .checkav {background: var(--secondary20); height: 70px; text-align: center; padding-top: 5px}
.venue_details .but_avl {background: var(--main); color: var(--white); text-transform: uppercase; font-size: 1.2em; font-weight: 350; line-height: 30px; padding: 5px 20px; border-radius: 7px; margin: 10px auto 0px; display: table; text-shadow: 1px 1px 2px rgba(0,0,0,0.2)}
.venue_details .but_avl:hover {text-decoration: none; color: var(--secondary)}

.description_conditions .location {margin: 10px 0px 30px}
.description_conditions iframe {width: 100%; height: 250px; background: none!important}

.description_conditions h2 {font-size: 1.3em; color: var(--secondary); font-weight: 300; margin: 10px 0px 5px; padding: 0px}
.description_conditions h3 {font-size: 1.1em; color: var(--secondary); font-weight: 300; margin: 10px 0px 5px; padding: 0px}
.description_conditions p {font-size: 1.0em; color: var(--text); font-weight: 200; margin: 0px 0px 20px!important}

.detail_items {grid-template-columns: repeat(5, 1fr); display: grid; gap: 10px}
.detail_items p {font-size: 0.9em; line-height: 1.5em; margin: 0px!important}
.detail_items p::before {  content: "• "; color: var(--main); font-size: 1.1em}

.err_messages {color: var(--red)!important}

/* end VENUE PAGE */

.thank_you h3 {font-size: 2.1em; font-weight: 200; color: var(--main)}
.thank_you h4 {font-size: 1.4em; font-weight: 150; color: var(--text)}

.table_details {border: 1px solid var(--secondary40); border-left: none; border-top: none; font-size: 0.9em; font-weight: 200}
.table_details td, .table_details th {border-top: 1px solid var(--secondary40); border-right: 0px solid var(--secondary40); border-left: 1px solid var(--secondary40); padding: 5px 3px}

.table_details td b {font-weight: 350}
.table_details th {font-weight: 450; color: var(--secondary); font-size: 105%}
.table_details .total_price {font-size: 105%}

.extra_left {transform: translateX(30px)}

.sec_title {font-size: 1.5em; color: var(--secondary); font-weight: 400; margin: -5px 0px 20px; padding: 0px}

.book_form {width: 90%}

/* profile editing */
.own {grid-template-columns: repeat(4, 1fr)}
.no_own {grid-template-columns: repeat(3, 1fr)}
.profile_menu {display: grid; gap: 10px; margin: 20px 0px 30px}
.profile_menu a {width: calc(100% - 40px); background: var(--secondary80); color: var(--white); text-align: center; padding: 6px 20px; font-weight: 300}
.profile_menu a:hover {text-decoration: none; background: var(--main)}
.profile_menu .active {background: var(--secondary40)!important; pointer-events: none; color: var(--secondary); font-weight: 400}

/* dashboard */
.dash_banner {height: 280px; margin-top: 20px; background-size: cover!important; background-repeat: no-repeat!important; background-position: center bottom!important}

.table_spaces {border: 1px solid var(--secondary40); border-left: none; border-top: none; font-size: 0.9em; font-weight: 200; margin-bottom: 20px; text-align: left}
.table_spaces td, .table_spaces th {border-top: 1px solid var(--secondary40); border-right: 0px solid var(--secondary40); border-left: 1px solid var(--secondary40); padding: 7px 3px}

.table_spaces td b {font-weight: 350}
.table_spaces th {font-weight: 450; color: var(--secondary); font-size: 105%; background: var(--secondary20)}

.table_spaces i { color: var(--main); font-size: 102%; margin: 0px 5px}

.fine_line {margin: 30px 0px 5px 0px; border: none; height: 1px; background: var(--secondary20)}

.correct28 {transform: translateY(28px)}

/* create event */

.creation {grid-template-columns: repeat(5, 1fr); font-size: 95%}

.places_list {font-size: 1.05em; font-weight: 400; outline: none!important}
.places_list select {font-weight: 200; background: none!important; border: none!important; font-size: 1em}

.alloance_op {margin: 15px 0px; display: inline; font-size: 0.9em; font-weight: 250}
.save_space {width: 50%!important; margin: 30px 25%!important}

.radio_op {margin: 10px 0px 5px; display: block; font-size: 1.05em; font-weight: 300}
.radio_op .smaller {margin-left: 10px; color: var(--main)}

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip .tooltiptext {
  visibility: hidden;  min-width: 300px;  background-color: var(--secondary);  color: var(--white); font-size: 1em;
  border-radius: 5px;  padding: 10px;
  position: absolute;  bottom: 100%;   left: 0%;
  z-index: 1;
  opacity: 0; white-space: nowrap;
  transition: opacity 0.3s; 
}

.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}

.sevendays {grid-template-columns: repeat(7, 1fr); font-size: 1em; display: grid}
.sevendays .days {margin: 10px 0px 0px; display: inline-block}

.tabledates td {padding-right: 15px}
.tabledates .fa-circle-minus {color: var(--red); padding: 10px 0px 0px}
.fa-circle-plus {color: var(--green); padding: 0px 0px; margin: -10px 0px 0px 5px}
.tabledates   tr:last-child {height: 0px!important; line-height: 0px!important}

.small_input {border: none; margin: 0px 15px 0px 10px; background: none!important; outline: none!important; font-family: 'RobotoSerif'!important; font-weight: 300; color: var(--text)!important}
.small_input1 {border: 1px solid #efefef; margin: 0px 5px; background: none!important; outline: none!important; font-family: 'RobotoSerif'!important; font-weight: 300; color: var(--text)!important; padding: 1px!important}

.in_small {width: 60px!important}
.in_small50 {width: 50px!important}

.small_table i {color: var(--main); margin: 0px 5px}

.someleft {margin-left: 25px!important;}

.phototable {width: 100%}
.phototable img {max-height: 15vw; max-width: 15vw}
.phototable i {height: 28px; color: var(--red)}

.booking_details h3 {font-size: 1.1em; font-weight: 350; color: var(--secondary); margin: 5px 0px 0px!important; padding: 0px!important}
.booking_details h3 b { font-weight: 450; margin-bottom: -15px!important; padding: 0px!important}
.booking_details h4 {font-size: 1em; font-weight: 250; color: var(--text); margin: 5px 0px 0px!important; padding: 0px!important}
.booking_details h5 {font-size: 0.9em; font-weight: 200; color: var(--text); margin: 0px 0px 0px!important; padding: 0px!important}

.booking_details { padding: 0px}
.booking_details td {padding-right: 10px; white-space: nowrap}
.booking_details .boxthree, .booking_details .boxfour {margin-top: 10px; }

.booking_detail {grid-template-columns: calc(100% - 300px) 300px ;}
.booking_detail .k1a , .booking_detail .k1b {height: 300px;}
.booking_detail .location iframe {min-width: 100%!important; height: 250px!important}

.booking_detail h2 {margin: 0px 0px 5px 0px; padding: 0px; ; font-size: 1.15em; font-weight: 450}
.booking_detail p {margin: 5px 0px 25px 0px; padding: 0px; ; font-size: 1.0em; font-weight: 250}

.space_det {position: absolute; bottom: 0px; left: 0px}
.space_det h1 {margin: 0px 0px 5px 0px; padding: 0px; color: var(--main); font-size: 1.5em; font-weight: 400}
.space_det h2 {margin: 0px 0px 10px 0px; padding: 0px; color: var(--secondary); font-size: 1.3em; font-weight: 350}
.space_det h3 {margin: 20px 60px 10px 0px; padding: 0px; color: var(--text); font-size: 1.2em; font-weight: 400}
.space_det h4 {margin: 00px 40px 2px 0px; padding: 0px; color: var(--text); font-size: 1.1em; font-weight: 400}
.space_det h5 {margin: 00px 40px 0px 0px; padding: 0px; color: var(--text); font-size: 1.05em; font-weight: 250}

.booking_actions {width: 280px; border: 1px solid var(--secondary40); margin-left: -10px; padding: 10px}

.book_amentity {font-size: 1.0em; font-weight: 200}
.book_amentity b {font-size: 1.01em; margin: 0px 10px 0px 5px; font-weight: 250}

.amenities_table {min-width: 65%; display: table}
.amenities_table table {border: 1px solid var(--secondary40); border-left: none; border-top: none; font-size: 0.9em; font-weight: 200; margin-bottom: 2px; text-align: left; }
.amenities_table td, .amenities_table th {border-top: 1px solid var(--secondary40); border-right: 0px solid var(--secondary40); border-left: 1px solid var(--secondary40); padding: 7px 3px}

.amenities_table td b {font-weight: 350}
.amenities_table th {font-weight: 450; color: var(--secondary); font-size: 105%; background: var(--secondary20)}

.amenities_table .smaller {font-size: 70%; font-weight: 200; text-align: right}

/* footer pages */
.footer_banner {height: 280px; margin-top: 20px; background-size: cover!important; background-repeat: no-repeat!important; background-position: center center!important}

.price_card {width: calc(100% - 40px); border: 1px solid var(--secondary40); padding: 10px 20px; border-radius: 7px; position: relative}

.price_card p {display: block; }
.price_card .pricing {position: absolute; bottom: 20px; display: table; padding-top: 30px; width: calc(100% - 20px); text-align: center}
.price_card h2 {font-size: 1.4em!important; color: var(--main)!important; margin: 10px 0px 10px!important; padding: 0px 0px 10px 0px!important; font-weight: 450!important; text-align: center!important; width: calc(100% - 20px); border-bottom: 1px solid var(--secondary20); letter-spacing: 1px}
.price_card h3 {font-size: 1.3em!important; color: var(--secondary)!important; margin: 0px!important; padding: 0px!important; font-weight: 350!important}
.price_card h4 {font-size: 1.0em!important; color: var(--secondary60)!important; margin: 0px!important; padding: 0px!important; font-weight: 250!important}
.price_card ul {margin:  0px 0px 110px; padding:  10px 0px 10px 1em!important}
.price_card li {margin:  0px 0px 10px 0px!important; color: var(--main); line-height: 1.5em}
.price_card li span {font-weight: 250; color: var(--text)}

.footer_pages h3 {font-size: 1.3em!important; color: var(--secondary)!important; margin: 25px 0px 5px!important; padding: 0px!important; font-weight: 350!important}
.footer_pages p {font-size: 1.0em!important; color: var(--text)!important; margin: 0px 0px 10px!important; padding: 0px!important; font-weight: 250!important; line-height: 1.3em}

.footer_pages ol, .footer_pages ul { color: var(--text); margin: 10px 0px 10px 0px; padding: 0px 0px 0px 1.3em; font-weight: 250}

.footer_pages li {margin: 0px 0px 5px!important; padding: 0px!important; line-height: 1.4em; color: var(--main)}
.footer_pages li span {color: var(--text)}

.pagination {font-size: 0.85em; font-weight: 300; white-space: nowrap}
.pagination .current {margin: 0px 10px}
.pagination .fast {margin: 0px 4px; font-size: 80%; transform: translateY(-1px)}


/* drop fotos */
#my-dropzone {margin: 30px 0px!important;  border: 1px solid #efefef!important; border-radius: 7px!important; text-align: center!important}
#my-dropzone .dz-message { text-align: center!important; text-transform: none!important}
#my-dropzone .dz-preview { border-radius: 0px!important}
#my-dropzone .dz-size { display: none!important}
#my-dropzone .dz-button { text-align: center!important; text-transform: none!important; margin: 0px auto!important; font-size: 1.05em!important; font-weight: 300!important; text-shadow: none!important; color: var(--main)!important}
#my-dropzone .dz-remove i {  font-size: 1.2em!important; color: var(--red)!important; transform: translateY(2px)}
#my-dropzone .dz-remove { text-align: center!important; text-transform: none!important; margin: 0px auto!important; font-size: 0.8em!important; font-weight: 300!important; text-shadow: none!important; color: var(--text)!important; cursor: pointer!important}

/***************************************** smaller screen **************************************/
@media (max-width: 1300px) {
.results_cards { grid-template-columns: repeat(3, 1fr); gap: 10px}
.main_header, .main_display, .main_footer {border: 0px solid #f87800; width: calc(100% - 40px); padding: 0px 20px; position: relative}
    
.home_search {width: calc(50vw - 120px)}
    
}

/***************************************** very small screen **************************************/
@media (max-width: 800px) {
.results_cards { grid-template-columns: repeat(2, 1fr); gap: 10px}
    
}

/***************************************** very small screen **************************************/
@media (max-width: 600px) {
.results_cards { grid-template-columns: repeat(1, 1fr); gap: 10px}
    
}




/* Dialog box styling */
.dialog-box {
  display: none; /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
}

/* Overlay to dim the background */
#overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.booking_ts {
  padding: 10px;
  border: 1px solid black;
}
.booking_ts.ts_selected {
  background-color: var(--main);
}

.autocomplete-container {
  position: relative;
  width: 300px;
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  background: white;
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
}

.autocomplete-item {
  padding: 8px;
  cursor: pointer;
}

.autocomplete-item:hover {
  background-color: #f0f0f0;
}

.hidden {
  display: none;
}

.no-options {
  padding: 8px;
  color: #666;
  font-style: italic;
}


.lds-dual-ring,
.lds-dual-ring:after {
  box-sizing: border-box;
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6.4px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}