/*
Basic input element using psuedo classes
*/
.nav-link {
  text-decoration: none;
  position: relative;
}

.nav-link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background-color: #ffffff;
  bottom: 10px;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav-link:hover::before {
  transform-origin: right;
  transform: scaleX(.65);
}

#copyright{
  font-weight: bold;
}
.terms {
  color: white;
  text-decoration: none;
}

.terms {
  font-weight: bold;
  background:linear-gradient(
      to right,
      rgb(255 84 84 / 0%),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

.terms:hover {
  background-size: 0 3px, 100% 3px;
}


.lightbox-container-welcome {
  display: block; /* Hide the container by default */
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  z-index: 1; /* Ensure the lightbox appears on top of other content */
}

.vindkamer_welcome{
  width: 50vw;
  max-width: 600px;
  background: white;
  height: auto;
  display: none;
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* position: absolute; */
  border-style: solid;
  border-width: 1px;
  border-radius: 2em;
  border-color: lightgray;
  margin-top: 10vh;
  padding: 1em;
  text-align: center;
  top: 10%;
  /* left: 42vw; */
  z-index: 2;
}
.interest_select span,
{
        border: thin solid hsl(60, 70%, 60%);
        border-radius: 0.25em;
        /* padding: 0.125em 0.25em 0.125em 0.5em; */
        margin-left: 0.5em;
        margin-right: 0.5em;
        margin-top: 0;
        margin-bottom: 0;
        background: #61a3ff21;
}
#background_click:hover{
  cursor: pointer;
  opacity: .5;
}
.interest_category h5{
    display: none;
}
.interest_select div
{
	display: flex;
	flex-flow: row wrap;
}

.interest_select label
{
	display: inline-block;
	margin: 0.375em 0;
}
.interest_label.unselected{
    /* display: none; */
}
.interest_select input
{
	position: relative;
	z-index: 1;
}
.interest_select input
{
	display:none;

}


.interest_select:not(:hover):not(:focus-within) span
{

}

.interest_select:not(:hover):not(:focus-within) input,
.interest_select:not(:hover):not(:focus-within) :not(:checked) + span
{
	/*display: none;*/
}
.interest_select_span:hover{
  cursor: pointer;
  background-color: aliceblue;
}


#select_interests_label{
  cursor: pointer;

}
.interest_select input:not(:checked) + span
{
    border-radius: 0.25em;
    /* padding: 0.125em 0.25em 0.125em 0.5em; */
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-top: 0;
    margin-bottom: 0;
    background: #61a3ff21;
}

.interest_select input:checked + span
{
	background: hsl(60, 70%, 90%) !important;
    border: thin solid hsl(60, 70%, 60%);
    border-radius: 0.25em;
    /* padding: 0.125em 0.25em 0.125em 0.5em; */
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-top: 0;
    margin-bottom: 0;
    background: #61a3ff21;
}

a.room_link:visited{
  color: rgb(0, 102, 204);
}

#legal_tickbox_1, #legal_tickbox_2{
  display:block;
  width: 1.5em;
  float: left;
  height: 1.5em;
}
.big_thumbs{
  height: 15em !important;
    max-width: 15em !important;
    min-width: 15em !important;
}

.table-wrap{
  /* overflow: scroll; */
/* margin: 0; */
word-break: break-all;

width: 100%;
height: 100%;

}
#add_user_form{
  text-align: center;
}
.edit_image_icon{
  font-size: 5em;
      color: coral;
      position: absolute;
      top: 0.4em;
      right: -41%;
    }
    .edit_image_icon:hover{
      cursor: pointer;
}
.open_filters_mobile{
  transform: translateX(50%);
}
.navbar{
  align-items: center;
justify-content: center;

}
#stripe_payment{
  font-size: 1.5em;
  width: 90%;
  margin-top: 5%;
  font-family: 'Noto Sans';
  box-shadow: 3px 0px 20px rgb(0 0 0 / 8%);
  border: 2px solid #0e0e0e;
  border-radius: 0.5em;
  transition: 0.5s;
  white-space: nowrap;
  color: white;
  /* margin-right: auto; */
  background: #3d9cff;
  margin: 5%;
  /* margin-right: 60%; */
}
.new_row{
  position: absolute;
      left: 9%;
      font-size: 1.3em;
      transition: .5s;
      user-select: none;
    }
#stripe_payment:hover{
  color: #2f2f2f;
  background-color: #538ff080;
}
.filter_selected_text{
  font-weight: bold;
color: coral;
text-decoration: underline;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.open_filters{
  width: 100% !important;
}
.mobile_select_hide{
  opacity: 0 !important;
  visibility: hidden !important;

}
.open_filters_mobile_toggle_filters{
  float: none !important;
  width: 50% !important;
  margin: 2% !important;
  margin-left: 28% !important;
  text-align: center !important;
}

.open_filters_mobile_submain{
  width: 0% !important;
  opacity: 0 !important;
}
.open_filters_mobile_sidebar{
  width: 95% !important;
  opacity: 1 !important;

}


.sidebar{
  width: 20%;
  position: absolute;
  left: 0;
  /* padding-top: 3%; */
  transition-duration: .75s;

}

.submain{
  touch-action:auto;
  width: 80%;
  height: 100%;
background: white;
  position: absolute;
  right: 0;
  top: 0;
      overflow-x: hidden;
  border-style: solid;
  border-width: 1px;
  border-radius: 1em;
  border-color: #d7d7d7;
  border-top: none;
  border-bottom: none;
  transition-duration: .5s;
    overflow-y: scroll;
}

.gallery_img_thumb, #gallery-img-1-thumb, #gallery-img-2-thumb, #gallery-img-3-thumb, #gallery-img-4-thumb{
  padding: 5%;
border: solid;
border-color: black;
border-width: 1px;
border-radius: 1em;
}
/* COOKIE CONSENT BOX */
.anchor{
    display: none;
}
.navbar-brand{
    user-select: none;
}
.fully_verified_checkmark {
    position: absolute;
        top: -10px;
        right: 85px;
        /* background: white; */
        color: dodgerblue !important;
        font-size: 2em;
    }
    #toggle_size_div{
      transition: 0.5s
    }
    #toggle_size_div:hover{
      cursor: pointer;
      background-color: lightgray !important;
    }
  .not_verified_checkmark {
    position: absolute;
        top: -10px;
        right: 85px;
        /* background: white; */
        color: #0000001a !important;
        font-size: 2em;
    }

  #google_translate_element {
      margin-left: 1%;
  }
#login_btn{

  border-radius: 0.5em;
      border-width: 1px;
      border: solid;
      border-color: black;
      border-width: 1px;
      background-color: dodgerblue;
      color: white;
      /* font-weight: bold; */
      letter-spacing: 1px;
      padding: 0.4em;
      width: 50%;
      margin-left: 25%;
      margin-top: 5%;
      margin-bottom: 5%;
    }
#login_btn:hover{
  background-color: #75bbff;

}
.cookie-disclaimer {
  background: rgb(255,0,0);
  background-image: linear-gradient(to right, #ff9966, #ff5e62);  color: #FFF;
  opacity: 0.9;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 6em;
  position: fixed;
}
.cookie_container {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1%;
}

.control-label{
  /* font-weight: bold; */
      white-space: nowrap;
}
#login_email, #login_password, #repeat_password, #first_name, #login_email_forgot_password{
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    width: 100%;
    height: auto;
    padding: 0.75rem 1.25rem;
    border: none;
    outline: none;
    border-radius: 2rem;
    color: var(--color-black);
    background: #f9f9f9;
    text-transform: unset;
    text-rendering: optimizeLegibility;
}
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.search {
  width: 100%;
  position: relative;
  display: flex;
  padding: 0.2em;
}
.chat_icon.message_left:hover{
  cursor: pointer;
}

.earlier_messages{
  border-style: solid;
  border-width: 1px;
  border-color: rgb(233, 233, 233);
  border-radius: 1em;
}

.earlier_messages:hover{
  cursor: pointer;
  background-color: #bababa;
}

.searchTerm,.searchTermEmojis {
  width: 100%;
  /* border: 3px solid #00B4CC; */
  border-right: none;
  /* padding: 5px; */
  /* height: 20px; */
  /* border-radius: 5px 0 0 5px; */
  /* background-color: #ff7f5082; */
  outline: none;
  color: #000000;
}
.form-group h4{
  width: 70%;
      font-size: 1.2em;
    }
.fa-spinner{
  color: #ff7340;
}
.map_div{
  display: inline-block;
width: 100%;
height: 25vh;
padding: 2%;
}
.searchTerm:focus{
  color: #000000;
}

.searchButton {
  width: 2em;
  /* height: 36px; */
  border: 1px solid lightgray;
  background: lightgray;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 1em;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pulse {

  border-radius: 50%;
  box-shadow: 0 0 0 green;
  animation: pulse 2s infinite;
}
.pulse:hover {
  /* animation: none; */
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 green;
  }
  70% {
      -webkit-box-shadow: 0 0 0 5px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 green;
    box-shadow: 0 0 0 0 green;
  }
  70% {
      -moz-box-shadow: 0 0 0 5px rgba(204,169,44, 0);
      box-shadow: 0 0 0 5px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
input.toggleswitch[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}
.toggle_filters{
  float: left;
    font-size: 1.2em;
    margin-left: 2%;
    /* color: darkslategray; */
    padding: 4px;
    /* margin-top: -.5%; */
    margin-bottom: .5%;
   border-width: 1px;
   border-radius: 0.3em;
   border-color: #00000070;
   background-color: #f0f0f0;
}
.toggle_filters:hover{
  background-color:lightgray;

}

#create_user_listing{
  font-weight: 400;

    text-decoration: underline;
}

#create_room, #create_group, #create_user_listing, #view_map{

width: auto;
color: black !important;
float: left;
/* border-style: solid; */
border-width: 1px;
border-color: dimgray;
/* margin-bottom: 1%; */
/* padding: 0.3em; */
/* margin: 2%; */
/* margin-left: 45%; */
border-radius: 0.4em;
font-size: 1.3em;
transition: all .25s;
background-color: white;
}
.vk_button{

	width: auto;
color: black !important;
float: left;
border-style: solid;
border-width: 1px;
border-color: dimgray;
margin-bottom: 1%;
padding: 0.3em;
/* margin: 2%; */
margin-left: 45%;
border-radius: 0.4em;
font-size: 1.3em;
transition: background-color .5s;
background-color: white;
}
label.toggleswitch {

      cursor: pointer;
      text-indent: -9999px;
      width: 4.5em;
      height: 2em;
      background: gray;
      display: block;
      border-radius: 100px;
      position: relative;
}

label.toggleswitch:after {
  content: '';
      position: absolute;
      top: 0.25em;
      left: 0.25em;
      width: 1.5em;
      height: 1.5em;
      background: #fff;
      border-radius: 90px;
      transition: 0.3s;
    }

input.toggleswitch:checked + label {
	background: coral;
}

input.toggleswitch.refresh:checked + label {
    background: #76fc90 !important;
}

input.toggleswitch:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

/* label.toggleswitch:active:after {
	width: 130px;
} */



.image-upload > input
{
    display: none;
}
#profile_thumb{
  width: 100px;
  height: 100px;
  object-fit: cover;

}

.settings{
  font-size: 1.5em;
      padding: 5%;
}

.placeholder_img {
}
.city_span, .verify_mobile_div, .verify_cc_div{
  cursor: pointer;
}
.verify_mobile_div, .verify_cc_div{
  transition: all 250ms ease;
  opacity: .8;
}
.verify_mobile_div:hover, .verify_cc_div:hover{
  opacity: .4;
}
.chat_icon{
  width: 50px;
      object-fit: contain;
      position: relative;
      top: 50%;
      max-height: 50px;
      /* transform: translateY(-50%); */
      border-radius: 3em;
      border-style: solid;
      border-width: 1px;
      margin: 0.5%;
}
.user_detail_input{
  display: inline;
  width: 85%;
  background-color: aliceblue;
  border-width: 1px;
  border-style: dashed;
  border-color: lightgray;
  margin-left: 5%;
}
#bio_texbox_textarea{
  background-color: aliceblue;
  border-width: 1px;
  border-style: dashed;
  border-color: lightgray;
  padding: 2%;
  width: 90%;
}
.interests{
  padding-left:0;
}
.user_detail_interest{
  display: inline;
  width: 100%;
  background-color: aliceblue;
  border-width: 1px;
  border-style: dashed;
  border-color: lightgray;
  /* margin-left: 5%; */
}

h3, h5{
  text-align: center;
}
h6{
  font-size: .9em;
  text-align: center;

}
.upload-image{
  float: right;
  padding-left: 1.5%;
  font-size: 2.5em;
  margin-top: -0.5%;
  color: #000000;
}

.verify_icon{
  font-size: 3.5em !important;
    color: lightgray;
}
.verify_icon.phone{
  font-size:5em !important
}
.verify_mobile_div{
  float: left;
      margin-left: 60%;
          text-align: center;
      margin-top: -8em;
    }
    .verify_cc_div{
      float: left;
          margin-left: 25%;
              text-align: center;
          margin-top: -7em;
        }


.image-upload img
{
  border-radius: 1em !important;

    /* width: 80px; */
    cursor: pointer;
    object-fit: cover;
width: 100px;
height: 100px;
}
.reset_div{
  margin: 1em;
  font-size: 1.5em;
  margin-top: 20%;
  font-size: 1.3em;
  width: fit-content;
  height: fit-content;
  margin-left: 2%;
  padding: 1%;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.3em;
}
.placeholder_image_1:not(.create_room_placeholder)
{
    /* width: 80px; */
    cursor: pointer !important;
    object-fit: cover !important;
width: auto !important;
height: 316px !important;
}
.create_room_button:hover,.create_group_button:hover{
  /* width: 45% !important; */
  opacity: .5;
}

.create_room_button,.create_group_button{
  /* width: 45% !important; */
  transition: all 0.25s !important;
}


html {
  font-family: 'Lora', sans-serif;
  width: 100%;

     height:auto !important;

}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.about{
  text-align: center;
}
.form-control-view{
  font-weight: bold;
}

.filter-bar {
  float: left;
  border-top: none;
    border-top-width: medium;
  /* border-bottom-style: solid; */
  width: 100%;
  border-bottom-color: gray;
  border-left: none;
    border-left-width: medium;
  border-width: 0 0 1px 0;
    border-right-width: 0px;
  padding: .5%;
  border-right: none;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  transition: all 1s ease;
    }
    label {
      cursor: default;

  }
.filter-button{
  width: auto;


      color: black !important;
      float: left;
      border-style: dashed;
      border-width: 1px;
      border-color: dimgray;
          margin-bottom: 1%;
      padding: 0.3em;
      /* margin: 2%; */
      margin-left: 45%;
      border-radius: 1.8em;
      font-size: 1.3em;
      transition: background-color .5s;
      background-color: #ffffff;
}
.filter-button-link{
  transition: all .25s;
      /* text-decoration: none; */
      /* color: #491a75 !important; */
      font-weight: 400;
}
.vk_button:hover{
  /* color:#ffffff !important; */
	background-color: lightblue;
}
#create_room:hover, #create_group:hover, #view_map:hover,#create_user_listing:hover,{
  /* color:#ffffff !important; */
	/* background-color: lightblue; */
  opacity: .7;
}
h1{
  text-align: center;
  margin-top: 3%;
}
.filter-button:hover{
  width: auto;
      color: black !important;
      float: left;
      border-style: dashed;
      border-width: 1px;
      border-color: dimgray;
      padding: 0.3em;
      /* margin: 2%; */
      border-radius: 1.8em;
      font-size: 1.3em;
      transition: background-color .5s;
      background-color: #e9e9e9;

}
.container {
  transition: 0.5s !important;
  height: auto;
  padding-top: 0.5%;
  box-shadow: 0px 0px 65px rgb(0 0 0 / 31%);
  /* border-top-right-radius: 1.5em;
    border-top-left-radius: 1.5em; */
    /* border-radius: 1.5em; */
    /* overflow:hidden; */
/* box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; */
background-color: white !important;
min-height: 89vh;
/* background: linear-gradient(131deg, rgb(255 255 255) 33%, rgba(240,248,255) 125%) !important; */
/* transition: height 1s ease; */
}
.page-header{
      Z-INDEX: 5;
      width: 100%;
      align-items: center;
      display: flex;
      justify-content: center;
      background-image: linear-gradient(to right, #ff9966, #ff5e62);
      height: 5vh;
      color: white;

}
.page-footer{

      width: 100%;
      align-items: center;
      display: flex;
      justify-content: center;
      background-image: linear-gradient(to right, #ff9966, #ff5e62);
      height: 4vh;
      color: white;

}
.profile-left-column{
  margin-top: 1em;
    margin-left: 2em;
}
.profile_nav{
  /* position: absolute;
right: 1em;
top: 1em; */
}
.listing_title{
      text-align: center;
}
.form-horizontal{
  padding: 2%;
}
.radio{
  float:left;
  margin-left: 15%;

}
.orange{
  background: rgb(255,0,0);
  background-image: linear-gradient(to right, #ff9966, #ff5e62);
}
btn.orange{
--bs-btn-color: #fff;
--bs-btn-bg: linear-gradient(to right, #ff9966, #ff5e62);
--bs-btn-border-color: #ffc107;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #ffca2c;
--bs-btn-hover-border-color: #ffc720;
--bs-btn-focus-shadow-rgb: 217, 164, 6;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #ffcd39;
--bs-btn-active-border-color: #ffc720;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #ffc107;
--bs-btn-disabled-border-color: #ffc107;
}
.user_icon_name{
  text-align: center;
      padding: 5%;
      font-size: 0.9em;
      /* font-weight: bold; */
      font-style: italic;
      /* font-kerning: normal; */
      letter-spacing: 0.1em;

}
.form-group{
  float: left;
  width: 46%;
  padding: 1%;
  height: 6em;
  margin: 2%;
  font-size: 1.5em;
  border-style: dashed;
  border-color: #d3d3d378;
  /* border-radius: 0.5em; */
  border-left: none;
  border-right: none;
  border-top: none;
  /* border-image-width: 40%; */
  padding-top: 0;
  margin-top: 0%;
    margin-bottom: 0;
      }
  .formfield{
		padding-left: 5%;
		font-size: 1.2em;
    width: 50%;
  }
	html {
	  overflow-y: scroll;
	}


  .form-group.description{
        width: 100%;
        height:auto;
        border-bottom: none;
    }
    .formfield.description{
      width: 90%;
    }
  .form-control.description{
    min-height: 300px;

  }
#success_message{
  display: none;
}
.city_span::after{
  content: " 🗺️"
}
.profile-name-header{
  text-align: center;
}
.image-upload{
  /* float: left; */
  /* width: 30%; */
  display: inline-block;
  border-style: dashed;
  border-color: #80808094;
  border-width: thin;
  border-radius: 2em;
  /* opacity: .6; */
  margin: 1%;

}
.placeholder_images div:first-of-type{
  display: flex;
align-items: center;
justify-content: center;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
      padding: .3%;
          max-height: 400px;
    }
/* .placeholder_image{
  float: left;
  width: 20%;
  border-style: dashed;
  border-color: gray;
  border-width: thin;
  border-radius: 2em;
  opacity: .6;
  margin: 1%;
} */
.details{
  list-style-type: none;
      text-align: left;
      padding-left: 0.5em;
      font-size: 1.2em;
    }
.about{
  float: left;
    width: 100%;
}
.details li{
margin-top:.5em;
    }
.details li>div{
font-weight: bold;
    }


    .img-fluid{
      /* float: left;
          margin-left: 30%; */
          margin-right: auto;
          display: inline-block;
          width: 41%;
              border-radius: 4em;
            }
.interests-div{
  float: left;
margin-left: 2em;
width: 100%;
    margin-top: .2em;
}
.sidebar_img{
  width:90%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3em;
  border-style: solid;
  border-width: 1px;
}
.group_icon_img{
  width:90%;
  position: relative;
  top: 34%;
  max-height: 50%;
      object-fit: cover;
  transform: translateY(-50%);
  border-radius: 3em;
  border-style: solid;
  display: inline;
  border-width: 1px;
}

.create_room{
  overflow-y: scroll !important;
  overflow-x: hidden;

  display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* box-shadow: rgb(0 0 0 / 28%) 1px -25px 37px -10px; */
}
.profile-section{
  display: block;
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  min-height: 500px;
  overflow-y: scroll !important;
  overflow-x: hidden;
  /* box-shadow: rgb(0 0 0 / 28%) 1px -25px 37px -10px; */
}
h4{
  background: rgb(255,0,0);
background-image: linear-gradient(to right, #ff9966, #ff5e62);
color: #ffffff;
text-align: center;
border-radius: .5em;
}
.description-view{
  overflow-wrap: anywhere;
      white-space: pre-wrap;
}
.interests li{
  list-style-type: none;
  float: left;
  margin: 0px 1%;
  border-style: dashed;
  border-color: gray;
  border-width: thin;
  padding: 0.5em;
  border-radius: 1em;
  }
  #cc_form_div{
    width: 100%;
/* display: flex; */
/* align-content: center; */
float: left;
display: flex;
align-items: center;
justify-content: center;
  }
  #cc_form{
    width:60%;
}
#cc_form ul{
  list-style-type: none;

}
#cc_form ul>li{
  width: 45%;
  float: left;
  border-style: solid;
  background-color: aliceblue;
  border-width: 1px;
  margin: 1%;
  border-radius: 0.9em;
  overflow: hidden;
  box-shadow: rgb(0 0 0 / 21%) 6px 9px 11px -4px;

}
.valid:after{
  content: " ✅"
}
.notvalid:after{
  content: " ❌"
}
.cc_input input{
  width: 50%;
  border-width: 1px;
  border-style: solid;
  margin-left: 25%;
  float: left;
}

.cc_input{
  width: 45%;
  float: left;
  border-style: solid;
  background-color: aliceblue;
  border-width: 1px;
  margin: 1%;
  border-radius: 0.9em;
  overflow: hidden;
  box-shadow: rgb(0 0 0 / 21%) 6px 9px 11px -4px;

}
.chat-sidebar-top {
  width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1em;
      /* margin-bottom: 1%; */
      /* border-style: dashed; */
      /* border-width: 1px;*/
    }
.new:after{
  content: "✨";
      position: relative;
      font-size: 0.6em;
      top: -0.6em;
      left: 0.3em;
}
.new_chat_notify:after{
  content: "✨";
      font-size: 1.6em;
      top: -0.6em;
      left: 0.3em;
}
.chat_top_icon{
  /* margin-left: 10%; */
  float: left;
  color: lightblue;
  cursor: pointer;
  /* margin-right: 10%; */
  /* border-style: dashed; */
  border-width: 1px;
  border-bottom: none;
  text-align: center;
  padding: 3%;
  /* border-top-left-radius: 1em;
    border-top-right-radius: 1em; */
  width: 50%;
  padding-left: 15%;
  padding-right: 15%;
  border-color: gray;
  border-left: none;
  transition: all 0.25s;
}
.chat_top_icon:hover{
  opacity: .5;
}
.chat_top_icon.active{
  background-color: aliceblue;
  color: black;
}
#cc_form ul>li:first-of-type{
  width: 100%;
}
.placeholder_images{
margin-top: 25%;
  padding: 2%;
  text-align: center;
}

.user_grid_thumbnail {
    height: auto;
width: 50%;
max-height: 15em;
object-fit: cover;
}
#user_grid_div{
  text-align: center;
}
.chat_item.active{
	background-color: #bbe6ffa8 !important;
}
.user_grid{
  display: inline-block;
  transition: all .25s;
  width: 99%;
  /* display: flex; */
  column-count: 4;
  /* display: inline-block; */
  /* flex-wrap: wrap; */
  /* align-items: center; */
  /* flex-grow: 1; */
  /* min-height: 900px; */
  /* height: 90vh; */
  /* flex-direction: row; */
  -moz-column-gap: 0.5em;
  /* padding: 0; */
  -webkit-column-gap: 0.5em;
}
.city_span{
  font-size: 1em;
  white-space: nowrap;

}
.user_table{
  width: 100%;
}
.user_table_img_tr{
  display: flex;
      padding: 1%;
      width: 100%;
      min-height: 10em;
      /* height: 13em; */
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
.profile_nav:after{
  /* content: " ⤴";
  position: absolute;
  top: 0.2em; */
  /* right: -2.8em; */
  /* right: 1.6em;
  font-size: 1.2em; */

}
.filter_button{
  background:none;
}
#city_filter{
  /* font-weight: bold; */

}
.logout{
  margin-left: 1.3em !important;
    margin-top: 0.25em;
    color: gray;
}
.user_table_img_tr img{
  padding: 1%;
  align-self: center;
  border-radius: 2em;
}

#area {
  /* position: relative; /* not necessary any more */
  height: 150px;
  background: #eee;
  margin: 40px;
}
.nav-item{
  font-size: 2em;
  margin-left:2em;
  color: white !important;
  user-select: none;
}
.nav-link{
  color: white !important;
user-select: none;
}
.invite_link_emoji{
	font-size: 1em !important;
	cursor: pointer;
	padding: .5%;
	/* width: 75%; */
	border-radius: 0.5em;
	/* height: 90%; */

}
.link_emoji_roompage{
  cursor: pointer;
  border-radius: 0.5em;

}
.save_btn:hover{
	opacity:.9;
}

.delete_btn:hover{
	opacity:.9;
}
.link_emoji {
  border: 0;
    border-style: solid;
    border-width: 2px;
  font-size: 1em !important;
  cursor: pointer;
  padding: 10%;
  /* width: 75%; */
  border-radius: 0.5em;
  height: 90%;
}
.link_emoji:after, .invite_link_emoji:after, .link_emoji_roompage:after {
  background: #1abc9c;
  opacity: 1;
  transition: all 0.25s;
}
.link_emoji:hover, .invite_link_emoji:hover, .link_emoji_roompage:hover {
  background: #1abc9c;
  opacity: 1;
  transition: all 0.25s;
}
#copy_tooltip {
  z-index: 3;
  position: fixed;
  padding: 0.2%;
  background-color: white;
  border: black;
  border-width: 1px;
  border-radius: 0.5em;
  border-style: dashed;
  display: none;
  }​
  .edit_img{
    display: none;
  }
  .chat-sidebar li:nth-child(even),  .chat-sidebar-unconfirmed li:nth-child(even){
    background-color: white;
}
.hidden{
  display: none !important;
}

.hidden-fade{
  opacity: 0;
}

  .chat-sidebar,.chat-sidebar-unconfirmed {
    float: left;
    list-style: none;
    height: 73vh;
    /* overflow-y: scroll; */
    */: ;
    word-break: break-word;
    overflow-x: hidden;
    border-right-style: dashed;
    border-width: 1px;
    min-width: 20%;
    border-color: #0000002b;
    width: 25%;
  }
  a:hover{
    cursor:pointer;
  }
.group_link{
  float: right;
      font-size: 1.5em;
      padding: 0.1em;
    }
    .chat_top_links{
      margin-left: 5em;
          font-size: 1.3em;
          margin-right: 1em;
        }

.chat_item {
  padding: 2%;
	background-color: white;

      /* border-bottom-style: dashed; */
      border-bottom-width: 1px;
      border-top-style: dashed;
      border-top-width: 1px;
      float: left;
      padding-left: 5%;
      width: 100%;
      transition: all 500ms ease;


    }
    .chat_item:hover {
      cursor:pointer;
      opacity: .6;
}
tr{
  /* transition: all 1000ms ease; */

}
tr:hover{
  /* opacity: .7; */

}
.user_tile:hover{
  /* opacity: .8; */
}


.link_emoji:active:after {
  opacity: 1;
  transition: 0.8s;
}
.date_picker{
  display:inline !important;
  max-width: 35%;
  cursor: pointer;
}

.the-datepicker__button-content{
  display:inline !important;
display: block;
margin: 0;
padding: 0;
border: none;
font-size: 1em;
}
.the-datepicker__deselect {
    position: relative !important;
    float: right;
    margin: 0;
    padding: 0;
}
.the-datepicker__main td.the-datepicker__cell a.the-datepicker__button .the-datepicker__button-content.the-datepicker__day-content {
    padding: 0 0 !important;
}
.main{
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  touch-action:auto;

  /* overflow-y: scroll; */
  width: 100%;
  margin-right: 0px;
  float: right;
  scrollbar-width: none;
  transition: transform 0.5s;
}
body{
  /* transition: background-image 1s linear; */

   scrollbar-width: none;
  overflow: hidden;
}
.save_btn{
  margin: 2%;
  font-size: 1.3em;
  width: 51%;
}
.edit_room_btn,.edit_group_btn {
  /* margin: 2%; */
  font-size: 1.2em;
    /* width: 55%; */
  }
  .edit_group_btn {
    /* margin: 2%; */
    font-size: 1.3em;
      /* width: 55%; */
    }

.edit_btn, .delete_btn{
  margin-top: 2%;
  font-size: 1.3em;
    width: auto%;
  }
.msg_btn, .msg_submit_btn,.msg_submit_btn_room, .chat_message_btn, .gen_link_btn, .vk_button{
  width: 60%;
      font-size: 1em;

}
.sidebar_img_div {
  width: 50px;
      height: 50px;
      /* overflow: hidden; */
      /* width: 100%; */
      PADDING: 2%;
      float: left;
      margin: 0.5%;
    }
.group_img_div {
    width: 100px;
    height: 100px;
    /* overflow: hidden; */
        /* width: 100%; */
        float: left;
            margin: 0.5%;
            text-align: center;
}
.room_image:hover{
  opacity:.7;
}
.filter_title{
  transition: 1s;
  display: inline-block;
user-select: none;
text-decoration: underline;
font-size: 1.2em;
margin-left: 7%;
/* margin: 4%; */
margin-left: 5%;
}
.rainbow-text .char {
  margin: 0.1em;
  margin-top: 0;
  padding-top: 0;
  font-size: 1.4em;
  color: hsl( calc(360deg * var(--char-percent) ), 90%, 65% );
}
.word{
  margin-top: 0;
}
#refresh_room_btn, #refresh_user_btn{
  margin: 1em;
  padding: 2%;
      width: 50%;
      white-space: nowrap;
      border-radius: 0.4em;
      margin-left: 25%;
      margin-right: auto;
      margin-top: 4%;
      overflow-wrap: ;
      border-width: 1.5px;
    }
#refresh_room_btn:hover{
background: lightgray;
}
.checkbox-dropdown {
      width: 85%;
  white-space: nowrap;
      /* border: 1px solid #aaa; */
      /* padding: 10px; */
      vertical-align: middle;
      position: relative;
      margin: 0.1em;
      display: flex;
      /* margin: 0 auto; */
      user-select: none;
      /* font-weight: bold; */
      /* text-decoration: underline; */
      margin: 0.1em;
      padding: 0.4em;
    /* text-decoration: underline; */
}
.checkbox_item{
  background-color: white;
}
.checkbox_item label{
  margin: .2em;
}
.dropdown{

  display: inline-block !important;
  margin-right: 0.5em;
}
}
/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #000;
    top: 50%;
    right: 10px;
    margin-top: -3px;
}

/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: #000;
    border-top-color: #fff;
    margin-top: -9px;
}

  .checkbox-dropdown-list {
    z-index: 1;
    list-style: none;
        width: 102%;
        margin: 0;
        /* display: table; */
        /* flex: 1; */
        max-height: 200px;
        background-color: white;
        padding: 0;
        position: absolute;
        top: 107%;
        overflow: auto;
        /* border: inherit; */
        /* border-width: 1px; */
        border-bottom: dashed;
        border-right: dashed;
        /* height: 100%; */
        left: -1px;
        border-left: dashed;
        right: -1px;
        opacity: 0;
        /* border-style: solid; */
        border-width: 1px;
        /* height: 200px; */
        overflow: scroll;
        overflow-x: hidden;
        pointer-events: none;  }
.is-active .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
}
.user_detail_output{
  margin-left: 2%;
  margin-top: 1%;
  font-size:1.2em;
  overflow-wrap: break-word;
}
.checkbox-dropdown-list li label {
    display: block;
    border-bottom: 1px solid silver;
    padding: .1em;

    transition: all 0.2s ease-out;
}

.checkbox-dropdown-list li label:hover {
    background-color: #555;
    color: white;
}


.rainbow-text.animated .char {
  animation: rainbow-colors 2s linear infinite;
  animation-delay: calc(-2s * var(--char-percent));
}
/* Unfortunately, browsers try to take the shortest distance between transition/animation properties, so a simple `0turn` to `1turn` doesn't get the proper effect. */
@keyframes rainbow-colors {
  0% { color: hsl(0turn, 90%, 65%); }
  25% { color: hsl(.25turn, 90%, 65%); }
  50% { color: hsl(.5turn, 90%, 65%); }
  75% { color: hsl(.75turn, 90%, 65%); }
  100% { color: hsl(1turn, 90%, 65%); }
}

.msg_btn, .msg_submit_btn,.msg_submit_btn_room, .chat_message_btn, .gen_link_btn, .vk_button{
  margin: 2%;
  font-size: 1.3em;
  margin-left: auto;
  margin-right: auto;
  width: auto;
    display: none;
  border-color: lightgray;
  background-color: aliceblue;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  box-shadow: rgb(0 0 0 / 21%) 6px 9px 11px -4px;

}



.pop-btn{
  width:200px;
  height:100px;
  margin:0px auto;
  display:block;
}

.lightbox_div{
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  position:fixed;
  top:0;
  left:0;
  z-index:1;
  display:none;
}
#msg_editor{
  width:90%;
    border: solid;
    border-width: 1px;
    border-color: #9f9f9f;
    border-radius: 0.5em;
    min-height: 35vh;
}
  .popup-container{
    min-width: 500px;
    max-width: 700px;
width: auto;
padding: 0.5%;
    border-radius: .2em;
    border: 1px solid #ffffff;
    background-color: white;
    position: absolute;
    font-size: 1.5em;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

    .close_btn{
      /* @include transition(background-color .2s ease); */
      background-color:$medium-green;
      border-color: $medium-green;
      color: white;
      float:right;
      margin:25px;
    }
.map_thumb{
  width: 10em !important;
  height: auto !important;
}
.group_img_div:hover{
  cursor: pointer;
}
.create_listing_images{
  display: flex;
    align-content: center;
    justify-content: normal;
}
.create_room_img_upload{
  margin-left: 7%;
}
.create_room_img_icon{
  font-size: 3em;
    color: coral;
    position: absolute;
    top: -0.4em;
    right: 25%;
}
.icon{
  height: 5vh;
  max-height: 35px;
  /* mix-blend-mode: multiply; */
  /* padding: 5px; */
  margin-left: 2em;
  margin-right: 0.5em;
  user-select: none;
    }

    #input-preview{
      display: none;
    }
    #output-preview{
      display: none;
    }
    .upload-image label:hover{
      cursor: pointer;
    }
.verify_cc_div{
  position: relative;
}
.bank_verified:after{
  content: "✅";
  position: absolute;
  top: -5px;
  right: 20px;
}
.verify_mobile_div{
  position: relative;
}
.mobile_verified:after{
  content: "✅";
      position: absolute;
      top: 0px;
      right: 35px;
    }

.selected_filter_box{
  background-color:#ff7f5024;
}

.user_tile{
  transition: all .25s ease;
  display: inline-block;
  width: 100%;
  margin: .25%;
  max-width: 370px;
  min-width: 180px;
  /* vertical-align: top; */
  /* margin-left: .5%; */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: #6b686833;
  border-style: solid;
  border-width: 1px;
  border-radius: 1em;
  padding: 1%;
  overflow: hidden;
  /* height: 21em; */
  box-shadow: rgb(0 0 0 / 12%) 0px 14px 21px -4px;
    }
.flag_user{
  float: right;
      font-size: 1.6em;
      margin-top: -5.1em;
      opacity: 0.8;
}
.user_tile:hover{
  cursor: pointer;
}
#popup {
    z-index: 1;
  height: 300px;
  position: fixed;
  width: 400px;
  overflow: hidden;
  /* padding: 0.5em; */
  background: white;
  /* margin: 4px; */
  display: none;
    padding: 0.5%;
    border-style: solid;
    border-radius: 0.5em;
    border-width: 1px;
}
.room_image:hover{
    cursor:pointer;
}
#popup_room_images {
    z-index: 1;
  height: 300px;
  position: fixed;
  width: 400px;
  overflow: hidden;
  /* padding: 0.5em; */
  background: white;
  /* margin: 4px; */
  display: none;
    padding: 0.5%;
    border-style: solid;
    border-radius: 0.5em;
    border-width: 1px;
}

#popup_interests_search {
    z-index: 1;
  height: 300px;
  position: fixed;
  width: 400px;
  overflow-y: scroll;
  /* padding: 0.5em; */
  background: white;
  /* margin: 4px; */
  display: none;
    padding: 0.5%;
    border-style: solid;
    border-radius: 0.5em;
    border-width: 1px;
}


.inputfile{
  /* background-color: indigo; */
  /* color: white; */
  width: 100%;
  padding: 0.1rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  float: left;
  /* margin-top: 1rem; */
}
#popupMap,#map {
  height: 100%;
  /* width: 56px; */
  padding: 0.5em;
}
h1 {
  font-size: 28px;
  margin-bottom: 2.5%;
}
.room_link, .private_room_link{
  font-size: 1.3em;
  overflow-wrap: anywhere;
}
.chat-window-div{

border-top-style: solid;
border-top-width: 1px;
}
.chat-window{
  /* position: absolute;
    width: 100%; */
    bottom: -9em;
    width: 92%;
    float: right;
    /* background-color: aliceblue; */
}
.message_right {
  animation: show-chat-even 0.15s 1 ease-in;
  -moz-animation: show-chat-even 0.15s 1 ease-in;
  -webkit-animation: show-chat-even 0.15s 1 ease-in;
  float: right;
  color: black; }

  .message_right_div {
    width:100%;
        text-align: right;
        white-space: pre-wrap;
  }
  .message_left_div {
    width:100%;
        text-align: left;
        white-space: pre-wrap;
  }

  .message_left {
    animation: show-chat-even 0.15s 1 ease-in;
    -moz-animation: show-chat-even 0.15s 1 ease-in;
    -webkit-animation: show-chat-even 0.15s 1 ease-in;

    float: left;
    color: black; }

.chat-window>textarea{
  width: 84%;
      border-radius: 1.4em;
      float: right;
      min-height: 2.2em;
      margin-right: 0px;
      background-color: aliceblue;
      border-style: solid;
      border-width: 1px;
      border-color: #d0d0d0;
      padding: 0;
      font-size: 1em;
      padding-left: 3%;
      height: 2.2em;
      /* padding-top: 2%; */
      }
input,
span:not(.interest_select_span),
label,
textarea {
  /* font-family: 'Ubuntu', sans-serif; */
  display: block;
  margin: 10px;
  padding: 0.1em;
  border: none;
  font-size: .9em;
}

textarea:focus,
input:focus {
  outline: 0;
}
/* Question */

input.question,
textarea.question {
  font-size: 1em;
  font-weight: 300;
  border-radius: 2px;
  margin: 0;
  border: none;
  width: 100%;
  min-height: 125px;
  background: rgba(0, 0, 0, 0);
  transition: padding-top 0.2s ease, margin-top 0.2s ease;
  overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
}
/* Underline and Placeholder */

input.question + label,
textarea.question + label {
  display: block;
  position: relative;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  width: 10%;
  border-top: 1px solid red;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
  height: 0px;
}

input.question:focus + label,
textarea.question:focus + label {
  width: 80%;
}

input.question:focus,
input.question:valid {
  padding-top: 35px;
}

textarea.question:valid,
textarea.question:focus {
  /* margin-top: 5px; */
}

input.question:focus + label > span,
input.question:valid + label > span {
  top: -100px;
  font-size: 22px;
  color: #333;
}

textarea.question:focus + label > span,
textarea.question:valid + label > span {
  top: -150px;
  font-size: 22px;
  color: #333;
}

input.question:valid + label,
textarea.question:valid + label {
  border-color: green;
}

input.question:invalid,
textarea.question:invalid {
  box-shadow: none;
}
button {
    margin: 4px;
    cursor: pointer;
}
input.question + label > span,
textarea.question + label > span {
  font-weight: 300;
  margin: 0;
  position: absolute;
  color: #8F8F8F;
  font-size: 1em;
  top: -66px;
  left: 0px;
  z-index: -1;
  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
input[type="submit"] {
  -webkit-transition: opacity 0.2s ease, background 0.2s ease;
  transition: opacity 0.2s ease, background 0.2s ease;
  display: block;
  opacity: 1;
  margin: 10px 0 0 0;
  padding: 10px;
  cursor: pointer;
}
.topBarPadding{
  top: 10% !important;
}
input[type="submit"]:hover {
  background: #EEE;
}

input[type="submit"]:active {
  background: #999;
}

input.question:valid ~ input[type="submit"], textarea.question:valid ~ input[type="submit"] {
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
}

input.question:invalid ~ input[type="submit"], textarea.question:invalid ~ input[type="submit"] {
  display: none;
}
/* Pulling in reset css and fonts http://seodesigns.com/projects/TD/css/reset.css */
body {}
p {font-family: "Webly Sleek SemiLight",Helvetica-,droid sans,sans-serif;font-weight: normal;margin: 0 0 1rem;}
.centerbox {position: absolute;top:50%;left:50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
width:620px;min-height:52px;z-index:2}
.centerbox h1 {margin-bottom: 25px;font-size:36px;font-family: "Webly Sleek SemiLight";font-weight: normal;text-align: center;}
.centerbox p.description {margin-bottom:40px;text-align: center;}
.description a {text-decoration:none;}
.main-input { background: #fff; height: 50px; width: 327px;color: #a7b1ab; border: 1px solid #cccccc; margin-bottom: 0px; -webkit-appearance: none; border-radius: 4px 0px 0px 4px; -moz-border-radius: 4px 0px 0px 4px; -webkit-border-radius: 4px 0px 0px 4px;display: inline-block;text-align: left;font-size: 16px; font-weight: 500; padding:0px 0px 0px 57px;font-size:16px;border-right:0px;background: #ffffff url("http://seodesigns.com/projects/TD/images/search.png") 18px 15px no-repeat;background-size:18px 18px;float:left;}
.main-location {display: none;}
.main-interest {display: none;}
#main-submit { background: #3cb13c;color: #fff; display: inline-block; font-size: 19px; font-weight: 500;text-align: center; cursor: pointer;margin-bottom: 0px; -webkit-appearance: none;
border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; -webkit-border-radius: 0px 4px 4px 0px;width:141px;height:50px;border: 0pxpadding-top:0px;float:left;}
#main-submit:hover { background: #00a221; color: #fff !important; -webkit-appearance: none; }
#main-submit-mobile {display: none;}
footer { border-top: 0px;}
.main-btn {display: inline-block;width:150px;height:50px;border: 1px solid #cccccc;padding:0px;position: relative;float:left;border-right:0px;background: #ffffff url("http://seodesigns.com/projects/TD/images/main-bullet.png") 122px 23px no-repeat;background-size:6px 6px;cursor: pointer;}
.search-small {font-size:12px;margin:0px;color:#9B9B9B;position: absolute;top: 6px;left:16px;display: inline-block;width:80px;height:20px;text-align:left;}
.search-large {font-size:16px;margin:0px;color:#4A4A4A;position: absolute;top: 19px;left:16px;display: inline-block;width:105px;height:20px;font-weight:900;text-align:left;}
.main-form-container {height:50px;position: relative;}
ul.search-description {width:150px;position: absolute; background: #fff;right:143px;top:55px;
border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;padding:14px 0px;border: 1px solid #E5E5E5;display: none;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.search-description li {font-size:16px;color:#4A4A4A;font-weight:900;padding:6px 0px;display:block;padding-left:16px;cursor: pointer;}
.search-description li:hover {background:#f8f8f8;}












/* responsive css below */
@media screen and (max-width: 680px) {
  .page-header{
    height: auto !important;
  }

    .main-btn {border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; -webkit-border-radius: 0px 4px 4px 0px;border-right:1px solid #cccccc;}
    ul.search-description {right:0px;z-index:9999;}
    .centerbox p.description {width:284px;margin:0 auto 40px auto;}
    .centerbox {width:auto;transform: translate(-50%, -60%);
    -ms-transform: translate(-50%, -60%); /* IE 9 */
    -webkit-transform: translate(-50%, -60%); /* Chrome, Safari, Opera */
    }
    .main-form-container {width:477px}
    #main-submit {display: none;}
    #main-submit-mobile { background: #3cb13c;color: #fff; display:block; font-size: 19px; font-weight: 500;text-align: center; cursor: pointer;margin-bottom: 0px; -webkit-appearance: none;border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;width:141px;height:50px;border: 0px;padding-top:0px;float:none;border:0px;position: fixed;bottom: 0px;right:0px;width: 100%;z-index:1;}
    #main-submit-mobile:hover { background: #00a221; color: #fff !important; -webkit-appearance: none; }
    footer {padding-bottom:50px;}
}

@media screen and (max-width: 515px) {
  .page-header{
    height: auto !important;
  }

    .main-input {width:210px;}
    .main-form-container {width:360px}
    .centerbox h1 {width:280px;margin:0 auto 15px auto;}
    .centerbox {position: absolute;top:50%;left:50%;
    }
}

@media screen and (max-width: 375px) {
  .page-header{
    height: auto !important;
  }

    /* .cover {background: rgba(0, 0, 0, 0) url("seodesigns.com/projects/TD/images/background.jpg") no-repeat center -175px;} */
    .main-input {width: 185px;padding-left:42px;background: #ffffff url("http://seodesigns.com/projects/TD/images/search.png") 12px 15px no-repeat;background-size:18px 18px;}
    .main-btn {width:108px;background: #ffffff url("http://seodesigns.com/projects/TD/images/main-bullet.png") 85px 23px no-repeat;background-size:6px 6px;}
    .main-form-container {width:293px}
    .search-small {left:13px;}
    .search-large {left:13px;}
}
@-webkit-keyframes appear {
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  100% {
    opacity: 1;
  }
}
/* Media Query for Mobile Devices */
@media screen and (max-width: 600px) {
  .page-header{
    height: auto !important;
  }
	.chat_top_links {
	margin-left: 1em;
	font-size: 1.3em;
	margin-right: 1em;
}
.user_grid{
  column-count: 2;
}
}
@media screen and (max-width: 1000px) {
	.chat_top_links {
	margin-left: 1em;
	font-size: 1.3em;
	margin-right: 1em;
}
.page-header{
  height: auto !important;
}

}
@media screen and (max-width: 480px) {
    article {
            width: 100%;
            margin-left: 0%;
            }

  .create_group_button, .create_room_button{
    /* border-radius: 2em !important; */
  }
  .btn_container{
      width: 49% !important;
  }
  .reset_div{
    margin: 0;
    font-size: 1.5em;
    margin-top: 50%;
    font-size: 1.3em;
    width: fit-content;
    height: fit-content;
    margin-left: 2%;
    padding: 2%;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.3em;
}
  .image-upload{
    border-radius: 1em;
  }
  .create_room_placeholder{
    width: 100px !important;
        height: auto !important;
        }
        .create_room_img_icon {
    font-size: 1.5em;
  }
  #add_group_user{
    margin-left: 0;
    width: 100%;
  }
  .vindkamer_welcome{
    width: 90vw;
/* max-width: 600px; */
  background: white;
  height: auto;
  /* margin-left: auto; */
  /* margin-right: auto; */
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-radius: 2em;
  border-color: lightgray;
  margin-top: 10vh;
  padding: 1em;
  text-align: center;
  top: 10%;
  left: 4vw;
  z-index: 1;
}
  #popup_interests_search{
    width: 350px;

  }
  .view_map_no_user{
    margin-left: 27% !important;
  }

  .table tbody td{font-size: calc(1.5vw + 10px) !important;}

  .msg_btn{
    margin-left: 5% !important;
    width: 90% !important;
  }
  .create_fieldset{
    text-align: center;
  }
  .room_image{
    padding-right: 1.2em !important;
  }
  .legal_checkbox_div{
    width: 98% !important;
    font-size: 0.7em !important;
  }
    .container{
    height: 87vh;
    min-height: 87vh;
    overflow: hidden;
  }

  body{
    position: fixed !important;
    width: 100%;
  }
  .user_grid{
    column-gap: 0.1em;
  }
  .popup-container{
    min-width: 330px;
    width: 25%;
  }
  .gallery__thumb > a > img {
      max-width: 75% !important;
  }
  .checkbox-dropdown{
    width: 40vw !important;
  }
.chat-thread-div{
      margin-top: 7% !important;
}

  #top_link_bar {
      margin-left: 12% !important;
  }

  .create_room_button, .create_group_button {
      font-size: 1em !important;
  }
  .formfield {
    width: 90%;
  }
  #copyright{
    display: none;
  }
  .room_image{
    width: 4em;
  }
  .room_link{
    font-size: 1.1em;
  }
  .submain{
    border: none;
  overscroll-behavior-y: contain;
    height: 85vh;
  }
  .main{
    overflow-scrolling: touch;
    height: 100%;
    min-height: 85vh;
    height: 85vh;
  }
  .sidebar{
    overflow-scrolling: touch;

        height: 85vh;
  }
  .city_span{
    font-size: 1em;

  }
  .jconfirm-box-container {
    width: 100% !important;
    margin-left: 12% !important;
}
.room_image{
  padding-left: 3% !important;
    padding-right: 1% !important;
}
#popup_room_images{
  height: 200px;
  width: 250px;
}

#popup{
  height: 200px;
  width: 250px;
}
.chat-window>textarea {
    width: 78%;
    margin-right: 1%;
  }

  .chat_message_btn{
    display: block;
    width: 15% !important;
    float: right;
    margin: 1%;
    margin-top: 2% !important;
    padding: 0.4%;
  }
  #profile_thumb{
    width: 40vw;
        height: 40vw;
        border-radius: 5em;
        }

  .placeholder_image_1:not(.create_room_placeholder)) {
    display: none !important;
  }
  #create_room{
    /* margin-left: 13% !important;
    /* margin-top: 5%; */
    /* width: 38% !important;
    margin-right: 15% !important; */
    }
  .login-box {
    max-width: 80% !important;
}
.chat-window {
  width: 81% !important;
}

.col-md-8{
  margin-top: 10%;
}

  .chat-window-div {
    width: 50% !important;
}
  .page-footer {
    align-items: normal;
    padding: 1%;
}

  .edit_btn, .delete_btn, .edit_room_btn, .edit_group_btn {
    width: 98%;
}
.settings{
      padding: 2%;
}
  h5{
    font-size: 1.5em;

  }
  #add_group_user{
    margin-left: 0;
    width: 98%;
  }
  #popup_message{
    padding: 2%;
  }
  #popup_message h5{
    font-size: 0.8em;
        overflow-wrap: anywhere;

  }
  .user_info{
    font-size: 1em;

  }
  .settings{
    font-size: 1em;

  }
  #user_grid_div{
    overflow-scrolling: touch;

  }
  .verify_mobile_div {
    margin-left: 58%;
  }

  .verify_cc_div {
    margin-left: 10%;
  }

  .verify_cc_div, .verify_mobile_div{
    font-size: 0.7em;

  }
  .chat-thread-div{
    margin: 0 !important;
    width: 48% !important;
    /* display: none; */
  }
  .chat-sidebar,.chat-sidebar-unconfirmed {
    width: 50% !important;
  }

    .triggers {
        font-size: 1em !important;
    }
    .profile-section {
        width:100%;
    }
    .page-header{
      height: auto !important;
    }

    .user_tile{
          width: 100%;
    }

    .icon{
      display: none;
    }
    .filter_button{
          font-size: 1em;
    }

}
.gen_link_btn{
    font-size: 1em;
    width: 60%;
}