@charset "utf-8";

/* CSS Document */
.brand {
	width: 100% !important;
}

.navbar-brand {
	margin-right: 0px!important;
}

.navbar-toggler {
	color: transparent!important;
	border-color: transparent!important;
	padding: 0.25rem 0rem !important;
	font-size: 0.7rem !important;
	line-height: 1;
	background-color: transparent;
	border: 1px solid transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 0.25rem;
	margin-top: 10px;
	margin-left: 0px!important;
}

.profileLink {
	text-decoration: none!important;
	color: #7c7c7d !important;
	text-align: right;
}

/*::-webkit-scrollbar {
	display: none;
}*/

.fa-user-circle {
	color: #7c7c7d;
	font-size: 1em;
	margin-top: 15px;
	position: absolute;
	right: 0;
	padding-right: 15px;
}

#icon {
	color: #a3bf5d;
	font-size: 0.6em;
	margin-top: 0px;
	position: inherit !important;
	margin-left: 15px;
}

.navbar {
	-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
	   -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
			box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
}

.eventCard {
	padding: 0px;
	margin-left: 0px !important;
	margin-bottom: 5px;
	margin-top: 5px;
}

.teamLogo {
	background-color: white;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	margin: 5px;
}

.teamIcon {
	width: 100%;
	border-radius: 50%;
	margin-left: 0%;
}


.eventImage {
	height: 90px;
	background: url("images/event image.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.eventTitle {
	font-size: 0.8rem;
	color: #9c9c9c;
}

.eventDescription {
	font-size: 0.6rem;
	color: #9c9c9c;
}

.eventAttendance {
	font-size: 0.6rem;
	margin-top: -4px;
	margin-left: 15px;
	color: #687864;
}

.event {
	margin-top: 0.3em;
}

.line {
	margin-top: -0.5em;
	margin-bottom: 0 !important;
}

.animated-icon1 {
width: 15px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: #9c9c9b;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 5px;
}

.animated-icon1 span:nth-child(3) {
top: 10px;
}

.animated-icon1.open span:nth-child(1) {
top: 5px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 5px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.btn-logout {
	background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

/*navmenu*/

.burgerMenuIcon {
	font-size:15px;
	cursor:pointer; 
	color: #9b9b9b;
	padding: 15px;
}

.burgerIcon {
	padding-top: 10px;
}
/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 280px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1000; /* Stay on top */
  top: 0px; /* Stay at the top */
  left: 0px;
  background-color: var(--blue-dark);
  overflow-x: hidden; /* Disable horizontal scroll */
  /*padding-top: 10px;
	margin-top: 20px;*/
	scrollbar-width: none;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 30px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.profileImage {
	width: 40%;
	margin-left: 30%;
	padding: 5px;
	border-radius: 50%;
	border: 1px solid #99c155;
}

.profilePicture {
	width: 100%;
	border-radius: 50%;
}

.profileInfo {
	text-align: center;
	background-color: #272c30;
	background-size: cover;
	padding-top: 15px;
	padding-bottom: 15px;
}

.profileName {
	color: white;
	font-size: 15px;
}

.editProfile {
	font-size: 12px !important;
	margin: 0px !important;
	padding: 0px !important;
	color: #757a7e;
}

.icons {
	background-color: #393c41;
	border-radius: 50%;
	padding: 7px;
	border: 1px solid white;
	margin-right: 15px;
	font-size: 15px;
	width: 14%;
	text-align: center;
}

.row {
	margin-right: 0px !important;
}

.topMenu {
	margin-bottom: 15px;
}

.memberBanner {
	background-color: #4087c2;
	text-align: center;
	height: 40px
}

.memberBanner p {
	font-size: 0.8em;  
	color: white;
}

.joinBtn {
	background-color: transparent;
	border: 1px solid white;
	color: white;
	padding: 2px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 0.8em;
	border-radius: 50px;
	margin-top: 0.5em;
}

.joinBtn:hover {
	background-color: white;
	color: #4087c2;
}

.row{
	margin-right: 0px!important;
	margin-left: 0px!important;
}
.crewBanner h4 {
	color: white;
	text-align: center;
}

.crewlogo {
	width: 100%;
	border-radius: 50%;
}

.crewLogoBanner {
	width: 36%;
	margin-left: 32%;
	border-radius: 50%;
	background-color: #8dc340;
	padding: 5px;
}

.crewDescription p {
	padding: 2px;
	text-align: center;
	color: #9d9d9d;
	font-size: 0.8rem;
}

.btn-group {
	width: 100%;
	background-color: #4087c3 !important;
	border-top-left-radius: 15px !important;
	border-bottom-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
	text-align: center;
}

.btn-Events {
	color: white;
	border-top-left-radius: 15px !important;
	border-bottom-left-radius: 15px !important;
	border-right: 1px solid white;
}

.btn-Gallery {
	color: white;
	border-top-right-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
	border-left: 1px solid white;
}

.btn-Members {
	color: white;
}

.newImage {
	width: 100%;
	border-radius: 50%;
}

.newMemberImage p{
	font-size: 0.5em;
	text-align: center;
	color: #9d9d9d;
	margin-top: 0px !important;
}

.newMembers h4 {
	font-size: 0.8em;
	color: #6E6E6E;
	margin-top: 15px;
}

.newMembers p {
	font-size: 0.5em;
	color: #9d9d9d;
	margin-top: -8px
}

.newLine {
	margin-top: -5px;
}

.img-New {
	width: 100%;
	padding: 2px;
}

.imagePost h4 {
	font-size: 0.8rem;
	color: #6e6e6e;
}

.imagePost p {
	font-size: 0.5em;
	color: #9d9d9d;
	margin-top: -8px;
}

.memberImage {
	width: 80px;
	border-radius: 50%;
	margin-top: -1px;
	margin-left: -2%;
	height: 80px;
}

.memberDetailAdmin {
	border: 1px solid #98c154;
	width: 90%;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	margin-top: 15px;
}

.memberDetailMember {
	border: 1px solid #4087c2;
	width: 90%;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	margin-top: 15px;
}

.memberDetailAdmin h4 {
	font-size: 0.8rem;
	text-align: center;
	color: #9d9d9d;
}

.memberDetailMember h4 {
	font-size: 0.8rem;
	text-align: center;
	color: #9d9d9d;
}

.dateJoint {
	font-size: 0.4rem;
	text-align: center;
	color: #9d9d9d;
	margin-top: -8px;
}

.memberDescription {
	font-size: 0.5rem;
	text-align: center;
	color: #9d9d9d;
	margin-top: -8px;
	padding: 2px;
}

.crewPosition {
	font-size: 0.7rem;
	text-align: center;
	background-color: #4087c2;
	color: white;
	padding: 5px 0px;
	margin-bottom: 0px;
}

.crewPositionCap {
	font-size: 0.7rem;
	text-align: center;
	background-color: #98c154;
	color: white;
	padding: 5px 0px;
	margin-bottom: 0px;
}

.col-4, .col-3 {
	padding: 0px !important;
}

.galleryImage {
	width: 96%;
	margin-left: 2%;
	margin-top: 4%;
	height: 60px;
}

.gallery {
	margin-top: 30px;
}


.eventMain {
	width: 100%;
	background-image: url("images/event image.jpg");
	background-size: cover;
	background-position: center;
}

.eventDetails {
	width: 60%;
	background-color: white;
	padding-left: 5px;
}

.eventDetails p {
	font-size: 0.6rem;
	color: #9d9d9d;
	margin-bottom: 0px;
	padding-bottom: 15px;
}

.eventDetails h4 {
	color: #9d9d9d;
	margin-top: -5px;
}

.eventMain p {
	font-size: 0.6rem;
}

.eventImageMain {
	width: 100%;
	height: 100%;
}

.eventConfirmation {
	border: 1px solid #98c155;
}

.attendanceBar {
	background-color: #98c154;
}

.attendanceBar h4 {
	color: white;
	font-size: 1rem;
	padding-top: 15px;
	padding-left: 15px;
}

.img-attending {
	width: 60%;
	margin-left: 20%;
	border-radius: 50%;
	margin-top: 0px;
	margin-bottom: 15px;
}

.locationDetails {
	background-color: #4087c2;
	padding: 15px;
}

.locationDetails p {
	font-size: 0.6rem;
	color: white;
	margin-bottom: 0px;
}

.locationDetails h4 {
	color: white;
}

.confirmBtn {
	width: 50%;
}

.actionAttending {
	text-align: center;
	color: #9d9d9d;
	font-size: 0.8rem;
	padding-top: 15px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.navbar-toggle {
  float: left;
}

.event-name-colour {
  color: grey !important;
}

.make-me-green {
  color: var(--green) !important;
  font-size: 18px;
}
.make-me-white {
  color: var(--white) !important;
  font-size: 18px;
}

.profile-image-menu {
  border: 3px solid var(--blue) !important;
	border-radius: 50px !important;
  height: 80px !important;
  margin-left: 0em !important;
  margin-top: 2em !important;
  width: 80px !important;
}
.profile-image-menu:hover {
  cursor: pointer;
}

.username-menu {
  color: #fff !important;
  padding-top: 10px !important;
  font-size: 16px !important;
}
.useraddress-menu {
  color: #fff !important;
  padding-top: 5px !important;
  padding-bottom: 15px !important;
  font-size: 14px !important;
}
.userabout-menu {
  color: #fff !important;
  padding-top: 5px !important;
  padding-bottom: 50px !important;
  font-size: 14px !important;
}

.editprofile-menu {
  color: var(--white) !important;
  font-size: 22px;
}
.editprofile-menu:hover {
  color: var(--blue) !important;
}

.navbar-collapse {
  background-color: #292929;
}

.blue-div {
  background-color: var(--blue);
  padding-top: 55px;
  text-align: center;
}
.blue-div-chat {
  background-color: var(--blue);
  padding-top: 60px;
  text-align: center;
}
.blue-div-change-pass {
  background-color: var(--blue);
  padding-top: 120px;
  text-align: center;
}
.blue-div-change-payment {
  background-color: var(--blue);
  padding-top: 120px;
  text-align: center;
}
.blue-div-team {
  background-color: var(--blue);
  text-align: center;
}
.green-div {
  background-color: var(--green);
  margin-top: -1.8em;
  padding-bottom: 35px;
  padding-top: 30px;
  text-align: center;
}

.team-members-team {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.team-attendee-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.user-crews-profile {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.user-crew-container-profile {
  padding-left: 10px;
  padding-right: 10px;
}

.event-count-team {
  color: #fff;
  font-size: 16px;
}
.event-wording-team {
  color: #fff;
  font-size: 14px;
}
.member-count-team {
  color: #fff;
  font-size: 16px;
}
.member-wording-team {
  color: #fff;
  font-size: 14px;
}
.about-text-team {
  color: grey;
  font-size: 18px;
  padding-top: 1em;
  text-align: center;
}

.join-leave-wording-team {
  border: 2px solid #fff !important;
	border-radius: 15px !important;
  color: #fff;
  margin-top: 0.4em;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
}

.member-name-team {
  color: grey;
  font-size: 14px;
}
.member-role-team {
  color: grey;
  font-size: 12px;
}

.min-width-150 {
  min-width: 150px;
}

.team-role-icon {
  font-size: 18px !important;
  z-index: 150;
}

.new-member-heading {
  color: grey;
  font-size: 18px;
  margin-top: 1em;
  padding-left: 10px;
}
.new-member-heading-caption {
  color: grey;
  font-size: 10px;
  padding-left: 10px;
}

.tl-gallery-heading {
  color: grey;
  font-size: 18px;
  margin-top: 1em;
  margin: 0% 4%;
}
.tl-gallery-heading-caption {
  color: grey;
  font-size: 10px;
  margin: 0% 4%;
}

.team-image-gallery {
  height: 170px;
  max-width: 220px;
  width: 100%;
}

.padding-left-5 {
  padding-left: 5px;
}

@media screen and (max-width: 260px)
{
  .team-image-gallery {
    height: 100px;
    max-width: 130px;
    width: 100%;
    
  }
}

.team-image-gallery-new {
  height: 100px;
  max-width: 220px;
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 260px)
{
  .team-image-gallery-new {
    height: 100px;
    max-width: 130px;
    width: 100%;
    min-height: 75px;
    max-height: 80px;
    object-fit: cover;
  }
}

.team-gallery-all-team {
  /*display: -webkit-inline-box;
  overflow-x: scroll;
  -webkit-flex-wrap: nowrap !important;*/
}
.padding-bott {
  padding-bottom: 10px;
}

.team-gallery-new-team {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  
  
  /*overflow-x: scroll;
  -webkit-flex-wrap: nowrap !important;*/
}

.team-gallery-new-team .col-xs-3 {
  min-width: 130px;
 max-width: 150px;
 width: 100%;

}

.tab-button-padding {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.tab-button-left {
  background-color: var(--blue);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.tab-button-middle {
  background-color: var(--blue);
}
.tab-button-right {
  background-color: var(--blue);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.tab-button-text {
  color: #fff;
  font-size: 18px;
}
.event-team-butty-cont {
  padding-top: 1em;
  text-align: center;
  width: 100%;
}

.team-name-team {
  color: #fff;
  margin-top: -1.5em;
  text-align: center;
  font-size: 26px;
  text-shadow: 2px 2px #686868;
}

.nav-tabs {
  border-bottom: none !important;
}

.add-images-wording-team {
  background-color: var(--blue);
  border: 2px solid #fff !important;
  border-radius: 15px !important;
  color: #fff;
  margin-top: 0.4em;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 18px;
}

.btn--edit {
  background: #fff !important;
  border-radius: 10px !important;
  color: var(--blue)!important;
  font-size: 20px !important;
  margin-top: -1em;
  padding-left: 2em;
  padding-right: 2em;
  text-transform: none !important;
  width: auto;
}

.icon-contact-button {
  color: #fff !important;
  font-size: 32px !important;
  right: 25px;
  position: absolute;
  top: 65px;
}

.modal-contact-element {
  color: grey;
  font-size: 22px;
  /*word-wrap: anywhere;*/
}
.is-inline-p {
  display: inline;
  padding-left: 15px;
}
.modal-contact-element-div {
  padding: 15px 10px 10px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-contact-element-icon {
  color: grey !important;
  font-size: 30px;
}
.modal-contact-details {
  border: none;
  border-radius: 30px;
}
.modal-contact-details-pos {
  top: 30%;
}
.modal-contact-close {
  margin-right: 0.2em !important;
  margin-top: 0em !important;
}
.modal-backdrop {
  background-color: transparent !important;
}
.modal {
  background-color: transparent !important;
  padding-left: 10px;
  padding-right: 10px;
}

.table-area-back {
  padding-left: 0px;
  padding-right: 0px;
	/*margin-top: -10em;*/
}
.main-content {
  padding: 0px 0px 0px 0px;
}

.event-container-back-butt {
  background-color: var(--blue);
  height: 60px;
}

.padding-top-45 {
  padding-top: 45px;
}
.padding-top-30 {
  padding-top: 30px;
}
.padding-top-15 {
  padding-top: 15px;
}

.map-padding {
  padding-left: 10px;
  padding-right: 10px;
}

.menu-icons {
  margin-left: 1em;
  padding-top: 8px;
}
.menu-icon-colour {
	color: var(--gray-light) !important;
	text-align: inherit;
}
.menu2-icon-colour {
  color: #fff !important;
  left: 20px;
  position: absolute;
}
.menu-item-padding {
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;
}
.menu-item-padding:hover {
  background: #F0F9FE;
	cursor: pointer;
}
.menu-button-add {
  background: var(--grey-menu-light);
  border-radius: 30px;
  color: var(--gray-light);
  font-size: 18px;
  height: 40px;
  width: 60px;
}
.menu-item-count {
  background: var(--grey-menu-light);
  border-radius: 50px;
  color: var(--gray-light);
  font-size: 12px;
  height: 30px;
  margin-left: 1.5em;
  width: 30px;
}
.main-menu-item {
	color: var(--gray-light);
	font-size: 16px;
	margin-top: 0.5em;
	padding-left: 10px;
}
.main-menu-item-logout {
	color: var(--blue);
	font-size: 20px;
	font-weight: 800;
	margin-top: 2em;
	text-align: center;
}
.main-menu-item-logout:hover {
	color: var(--white);
	cursor: pointer;
}
.main-menu-item2 {
  color: var(--gray-light);
  font-size: 14px;
}

.left-align {
  text-align: left;
}
.left-align-menu-pad {
  padding-left: 52px;
  text-align: left;
}

.team-events-list-cont {
  padding-top: 20px;
}

.profile-settings-about {
  /*background-color: transparent;*/
  color: grey;
  font-size: 14px;
  width: -moz-available;
}

.center-me {
  text-align: center;
}

.pull-right {
  text-align: end !important;
}

.make-me-grey {
  color: grey !important;
}

/*@media(max-width: 542px) {
  .nav-toggy-butty {
    margin-top: 0px !important;
    padding-left: 0px !important;
    padding-top: 5px !important;
  }
}
@media(max-width: 500px) {
  .nav-toggy-butty {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
}*/
.green-div-event {
  background-color: var(--green);
  margin-top: -1.8em;
  padding-bottom: 10px;
  padding-top: 15px;
  text-align: center;
}
.blue-div-event {
  background-color: var(--blue);
  padding-bottom: 20px;
  padding-top: 20px;
  text-align: center;
}
.event-attendee-heading {
  color: #fff;
  margin-left: 1em;
  margin-top: 1.5em;
  float: left;
  font-size: 14px;
}
.event-location-heading {
  color: #fff;
  font-size: 15px;
}
.event-location-value {
  color: #fff;
  font-size: 12px;
  padding-top: 10px;
}
.event-attending-heading {
  color: #fff;
  font-size: 15px;
}
.event-attending-count {
  color: #fff;
  font-size: 24px;
  padding-top: 10px;
}

.event-details-container {
  background-color: #fff;
  height: 350px;
  opacity: 0.9;
  position: absolute;
  width: 60%;
}
.event-location-details {
  color: grey;
  font-size: 16px;
  margin-top: 1.5em;
  padding-left: 25px;
  text-align: left;
}
.event-name-details {
  color: grey;
  font-size: 22px;
  padding-left: 25px;
  padding-top: 10px;
  text-align: left;
}
.event-desc-details {
  color: grey;
  font-size: 12px;
  padding-left: 25px;
  padding-top: 10px;
  text-align: left;
}

.attendee-name-event {
  color: #fff;
  font-size: 10px;
}

.event-image-profile-overlay {
  border-radius: 50px;
  height: 50px;
  left: 16px;
  position: absolute;
  top: 2px;
  width: 50px;
}

.attendance-buttons-container {
  padding-bottom: 15px;
  padding-top: 5px;
}
.event-attendance-butt {
  color: grey;
  font-size: 18px;
}
.event-attendance-image {
  height: 50px;
  padding-top: 5px;
  width: 50px;
}
.event-attendance-selected {
  /*background-color: lightblue;*/
  border: 6px solid var(--blue);
  border-left: 6px solid var(--blue) !important;
  border-right: 6px solid var(--blue) !important;
}
.attendance-butt-borders {
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}

.navbar-toggle {
  left: 10px !important;
  margin: 0px;
  padding: 0px;
  position: absolute !important;
  top: 15px !important;
}

.navbar-header {
  height: 50px;
}

.blue-background {
  background-color: var(--blue);
}

.padding-top-10 {
  padding-top: 10px;
}
.padding-top-15 {
  padding-top: 15px;
}
.padding-top-20 {
  padding-top: 20px;
}
.padding-top-25 {
  padding-top: 25px;
}
.padding-bottom-15 {
  padding-bottom: 15px;
}

/*ENLARGE IMAGE STUFF*/
/* Modal Content (Image) */
.modal-content-image {
  margin: auto;
  display: block;
  height: 70%;
  width: 80%;
  max-width: 700px;
}

.modal-top {
  top: 50px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, .modal-content-image, #caption {
  animation-name: zoom;
  animation-duration: 1s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content-image {
    width: 100%;
  }
}
/*ENLARGE IMAGE STUFF*/


/*NEW STYLING STUFF - 2019-11-28*/
.btn-blue {
	background: var(--green) !important;
	color: var(--white);
}
.btn-blue:hover {
	background: var(--blue) !important;
	cursor: pointer;
}

.login-btn {
	margin-top: 2em;
	width: 60%;
}
.register-btn {
	margin-top: 2em;
	width: 60%;
}
.reset-btn {
	margin-top: 1em;
	width: 60%;
}

.input-icon { 
	color: var(--gray) !important;
	font-size: 15px;
	right: 5px;
	padding: 10px;
	min-width: 40px;
	margin-top: -0.5em;
	z-index: 100;
	position: absolute !important;
}

.sign-text-cont {
	text-align: left;
	margin-top: 1em;
	margin-bottom: 1em;
}
.sign-in-header {
	color: var(--white);
	font-size: 24px;
	font-weight: 999;
}
.sign-in-text {
	color: var(--blue);
	font-size: 14px;
	font-weight: 400;
}

/*.header-image-cont {
	box-shadow: 0px 0px 10px 0px #000;
	position: fixed;
	padding-right: 280px;
	margin-left: 280px;
	top: 0px;
	height: 250px;
	width: 100%;
	z-index: 1000;
	overflow: hidden;
}*/

.header-image-cont {
	/*background: #000;*/
	box-shadow: 0px 0px 10px 0px #000;
	position: fixed;
	padding-right: 280px;
	margin-left: 280px;
	top: 0px;
	height: 250px;
	width: 100%;
	overflow: hidden;
	z-index: 1000;
}
.header-shape-cont {
	border-right: 70px solid transparent;
	height: 100px;
	width: 250px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-top: 125px solid rgba(20, 20, 20, 0.8);
	width: 35%;
}
.header-shape-cont:before {
  position: absolute;
	left: -10px;
	width: 100%;
	content: "";
	transform: skewX(45deg);
	transform-origin: right top;
	box-shadow: 5px 1px 4px 3px var(--green);
}

.header-image {
	background-image: url("../images/backgrounds/header_image.jpg");
	background-size: cover;
	background-position: center;
	height: 100%;
	width: 100%;
}
.header-text-cont {
	margin-left: 4em;
	margin-top: -8em;
}
.header-text {
	color: var(--white);
	font-size: 22px;
	font-weight: 800;
}
.header-desc {
	color: var(--white);
	font-size: 14px;
	font-weight: 800;
}

.menu-logo-size {
	margin-top: 1em;
	height: 80px;
	width: 200px;
}

.faq-cont {
	
}
.faq-row {
	background: var(--white);
	border-radius: 10px;
	margin-top: 0.5em;
	padding-bottom: 10px;
	padding-top: 10px;
}
.faq-user-profile-pic {
	border: 2px solid var(--blue);
	border-radius: 40px;
	height: 60px;
	width: 60px;
}
.faq-user-profile-pic-cont {
	margin-top: 0.4em;
	text-align: center;
}
.faq-date-asked {
	font-size: 10px;
	margin-top: 0.5em;
}
.faq-user-asked {
	font-size: 14px;
	font-weight: 800;
}
.faq-text {
	font-size: 12px;
	font-weight: 400;
}
.view-answers-text {
	font-size: 10px;
	font-style: underline;
	font-weight: 200;
}
.faq-reply-icon {
	margin-top: 1.2em;
}

/*CALENDAR STUFFS*/
#calendar {
	padding-left: 10px;
	/*padding-right: 10px;*/
	margin-top: 0.7em;
}
td.fc-day {
  background: #fff !important;
  font-family: "Open Sans", sans-serif;
}
td.fc-today {
  background: #fff !important;
  position: relative;
}

.fc-first th {
  font-family: "Open Sans", sans-serif;
  background: #f7f7f7 !important;
  color: #36474f;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-top: 1px solid #ccc;
}
.fc-event-inner {
  font-family: 'Open Sans', sans-serif;
  background: #03a9f3 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 5px 4px !important;
}

.fc {
  direction: ltr;
  text-align: left;
}

.fc table {
  border-collapse: collapse;
  border-spacing: 0;
}

html .fc,
.fc table {
  font-size: 1em;
  font-family: "Montserrat", sans-serif;
}

.fc td,
.fc th {
  padding: 0;
  vertical-align: top;
}

/* Header
------------------------------------------------------------------------*/

.fc-header td {
  white-space: nowrap;
  padding: 15px 10px 0px;
}

.fc-header-left {
  width: 25%;
  text-align: center;
}

.fc-header-center {
  text-align: center;
}

.fc-header-right {
  width: 25%;
  text-align: center;
}

.fc-header-title {
  display: inline-block;
  vertical-align: top;
  /*margin-top: -5px;*/
}

.fc-header-title h2 {
  margin-top: 0;
  white-space: nowrap;
  font-size: 32px;
  font-weight: 100;
  margin-bottom: 10px;
  font-family: "Open Sans", sans-serif;
}
span.fc-button {
  font-family: "Open Sans", sans-serif;
  color: #36474f;
  font-weight: 600;
  text-transform: capitalize;
	margin-top: -1em;
	padding-bottom: 19px;
}
.fc-state-down,
.fc-state-active {
  background-color: transparent !important;
  color: #137abb !important;
  font-weight: 600;
  border-bottom: 3px solid #137abb;
}
  
.fc .fc-header-space {
  padding-left: 10px;
}

.fc-header .fc-button {
  vertical-align: top;
}

/* buttons edges butting together */

.fc-button-wrap {
  display: inline-block;
  min-width: 68px;
  padding: 0 1.06em;
  margin: 0;
}

.fc-header .fc-button {
  margin-right: -1px;
}

.fc-header .fc-corner-right,
/* non-theme */ .fc-header .ui-corner-right {
  /* theme */
  margin-right: 0; /* back to normal */
}

/* button layering (for border precedence) */

.fc-header .fc-state-hover,
.fc-header .ui-state-hover {
  z-index: 2;
}

.fc-header .fc-state-down {
  z-index: 3;
}

.fc-header .fc-state-active,
.fc-header .ui-state-active {
  z-index: 4;
}

/* Content
------------------------------------------------------------------------*/

.fc-content {
  clear: both;
  zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
}

.fc-view {
  width: 100%;
  overflow: hidden;
}

/* Cell Styles
------------------------------------------------------------------------*/

/* <th>, usually */
.fc-widget-content {
  /* <td>, usually */
  border: 1px solid #e5e5e5;
}
.fc-widget-header {
  border-bottom: 1px solid #eee;
}
.fc-state-highlight {
  /* <td> today cell */ /* TODO: add .fc-today to <th> */
  /* background: #fcf8e3; */
}

.fc-state-highlight > div > div.fc-day-number {
  background-color: #ff3b30;
  color: #ffffff;
  border-radius: 50%;
  margin: 4px;
}

.fc-cell-overlay {
  /* semi-transparent rectangle while dragging */
  background: #bce8f1;
  opacity: 0.3;
  filter: alpha(opacity=30); /* for IE */
}

/* Buttons
------------------------------------------------------------------------*/

.fc-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.9em;
  line-height: 1.9em;
  white-space: nowrap;
  cursor: pointer;
}

/*
	Our default prev/next buttons use HTML entities like ‹ › « »
	and we'll try to make them look good cross-browser.
*/

/*.fc-text-arrow {
  margin: 0 0.4em;
  font-size: 2em;
  line-height: 23px;
  vertical-align: baseline; /* for IE7 */
/*}*/
.fc-text-arrow {
	font-size: 4em;
	line-height: 10px;
}

.fc-button-prev .fc-text-arrow,
.fc-button-next .fc-text-arrow {
  /* for ‹ › */
  font-weight: bold;
}

/* icon (for jquery ui) */

.fc-button .fc-icon-wrap {
  position: relative;
  float: left;
  top: 50%;
}

.fc-button .ui-icon {
  position: relative;
  float: left;
  margin-top: -50%;

  *margin-top: 0;
  *top: -50%;
}

.fc-state-default {
  border-color: #137abb;
  color: #137abb;
}
.fc-button-month.fc-state-default,
.fc-button-agendaWeek.fc-state-default,
.fc-button-agendaDay.fc-state-default {
  text-align: center;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  color: #36474f;
  background-color: #f7f7f7;
  border-radius: 4px;
}

.fc-state-hover {
  color: #ff3b30;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

.fc-state-down,
.fc-state-active {
  background-color: #ff3b30;
  background-image: none;
  outline: 0;
  color: #ffffff;
  border-radius: 0;
}

.fc-state-disabled {
  cursor: default;
  background-image: none;
  background-color: #ffe3e3;
  filter: alpha(opacity=65);
  box-shadow: none;
  border: 1px solid #ffe3e3;
  color: #ff3b30;
}

/* Global Event Styles
------------------------------------------------------------------------*/

.fc-event-container > * {
  z-index: 8;
}

.fc-event-container > .ui-draggable-dragging,
.fc-event-container > .ui-resizable-resizing {
  z-index: 9;
}

.fc-event {
  border: 1px solid #fff; /* default BORDER color */
  background-color: #fff; /* default BACKGROUND color */
  color: #919191; /* default TEXT color */
  font-size: 12px;
  cursor: default;
}
.fc-event.chill {
  background-color: #f3dcf8;
}
.fc-event.info {
  background-color: #c6ebfe;
}
.fc-event.important {
  background-color: #ffbebe;
}
.fc-event.success {
  background-color: #beffbf;
}
.fc-event:hover {
  opacity: 0.7;
}
a.fc-event {
  text-decoration: none;
}

a.fc-event,
.fc-event-draggable {
  cursor: pointer;
}

.fc-rtl .fc-event {
  text-align: right;
}

.fc-event-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 15px;
}

.fc-event-time,
.fc-event-title {
  padding: 0 1px;
}

.fc .ui-resizable-handle {
  display: block;
  position: absolute;
  z-index: 99999;
  overflow: hidden; /* hacky spaces (IE6/7) */
  font-size: 300%; /* */
  line-height: 50%; /* */
}

/* Horizontal Events
------------------------------------------------------------------------*/

.fc-event-hori {
  border-width: 1px 0;
  margin-bottom: 1px;
}

.fc-ltr .fc-event-hori.fc-event-start,
.fc-rtl .fc-event-hori.fc-event-end {
  border-left-width: 1px;
  /*
border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
*/
}

.fc-ltr .fc-event-hori.fc-event-end,
.fc-rtl .fc-event-hori.fc-event-start {
  border-right-width: 1px;
  /*
border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
*/
}

/* resizable */

.fc-event-hori .ui-resizable-e {
  top: 0 !important; /* importants override pre jquery ui 1.7 styles */
  right: -3px !important;
  width: 7px !important;
  height: 100% !important;
  cursor: e-resize;
}

.fc-event-hori .ui-resizable-w {
  top: 0 !important;
  left: -3px !important;
  width: 7px !important;
  height: 100% !important;
  cursor: w-resize;
}

.fc-event-hori .ui-resizable-handle {
  _padding-bottom: 14px; /* IE6 had 0 height */
}

/* Reusable Separate-border Table
------------------------------------------------------------*/

table.fc-border-separate {
  border-collapse: separate;
}

.fc-border-separate th,
.fc-border-separate td {
  border-width: 1px 0 0 1px;
}

.fc-border-separate th.fc-last,
.fc-border-separate td.fc-last {
  border-right-width: 1px;
}

.fc-border-separate tr.fc-last td {
}
.fc-border-separate .fc-week .fc-first {
  border-left: 0;
}
.fc-border-separate .fc-week .fc-last {
  border-right: 0;
}
.fc-border-separate tr.fc-last th {
  border-bottom-width: 1px;
  border-color: #cdcdcd;
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
}
.fc-border-separate tbody tr.fc-first td,
.fc-border-separate tbody tr.fc-first th {
  border-top-width: 0;
}

/* Month View, Basic Week View, Basic Day View
------------------------------------------------------------------------*/

.fc-grid th {
  text-align: center;
}

.fc .fc-week-number {
  width: 22px;
  text-align: center;
}

.fc .fc-week-number div {
  padding: 0 2px;
}

.fc-grid .fc-day-number {
  float: right;
  padding: 0 2px;
}

.fc-grid .fc-other-month .fc-day-number {
  opacity: 0.3;
  filter: alpha(opacity=30); /* for IE */
  /* opacity with small font can sometimes look too faded
	   might want to set the 'color' property instead
	   making day-numbers bold also fixes the problem */
}

.fc-grid .fc-day-content {
  clear: both;
  padding: 2px 2px 1px; /* distance between events and day edges */
}

/* event styles */

.fc-grid .fc-event-time {
  font-weight: bold;
}

/* right-to-left */

.fc-rtl .fc-grid .fc-day-number {
  float: left;
}

.fc-rtl .fc-grid .fc-event-time {
  float: right;
}

/* Agenda Week View, Agenda Day View
------------------------------------------------------------------------*/

.fc-agenda table {
  border-collapse: separate;
}

.fc-agenda-days th {
  text-align: center;
}

.fc-agenda .fc-agenda-axis {
  color: var(--blue);
	width: 50px;
  padding: 0 4px;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
  font-weight: normal;
}

.fc-agenda .fc-week-number {
  font-weight: bold;
}

.fc-agenda .fc-day-content {
  padding: 2px 2px 1px;
}

/* make axis border take precedence */

.fc-agenda-days .fc-agenda-axis {
  border-right-width: 1px;
}

.fc-agenda-days .fc-col0 {
  border-left-width: 0;
}

/* all-day area */

.fc-agenda-allday th {
  border-width: 0 1px;
}

.fc-agenda-allday .fc-day-content {
  min-height: 34px; /* TODO: doesnt work well in quirksmode */
  _height: 34px;
}

/* divider (between all-day and slots) */

.fc-agenda-divider-inner {
  height: 2px;
  overflow: hidden;
}

.fc-widget-header .fc-agenda-divider-inner {
  background: #eee;
}

/* slot rows */

.fc-agenda-slots th {
  border-width: 1px 1px 0;
}

.fc-agenda-slots td {
  border-width: 1px 0 0;
  background: none;
}

.fc-agenda-slots td div {
  height: 20px;
}

.fc-agenda-slots tr.fc-slot0 th,
.fc-agenda-slots tr.fc-slot0 td {
  border-top-width: 0;
}

.fc-agenda-slots tr.fc-minor th.ui-widget-header {
  *border-top-style: solid; /* doesn't work with background in IE6/7 */
}

/* Vertical Events
------------------------------------------------------------------------*/

.fc-event-vert {
  border-width: 0 1px;
}

.fc-event-vert.fc-event-start {
  border-top-width: 1px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.fc-event-vert.fc-event-end {
  border-bottom-width: 1px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.fc-event-vert .fc-event-time {
  white-space: nowrap;
  font-size: 10px;
}

.fc-event-vert .fc-event-inner {
  position: relative;
  z-index: 2;
}

.fc-event-vert .fc-event-bg {
  /* makes the event lighter w/ a semi-transparent overlay  */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.25;
  filter: alpha(opacity=25);
}

.fc .ui-draggable-dragging .fc-event-bg,
/* TODO: something nicer like .fc-opacity */ .fc-select-helper .fc-event-bg {
  display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
}

/* resizable */

.fc-event-vert .ui-resizable-s {
  bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */
  width: 100% !important;
  height: 8px !important;
  overflow: hidden !important;
  line-height: 8px !important;
  font-size: 11px !important;
  font-family: monospace;
  text-align: center;
  cursor: s-resize;
}

.fc-agenda .ui-resizable-resizing {
  /* TODO: better selector */
  _overflow: hidden;
}

thead tr.fc-first {
  background-color: #f7f7f7;
}
table.fc-header {
  background-color: #ffffff;
  border-radius: 6px 6px 0 0;
}

.fc-week .fc-day > div .fc-day-number {
  font-size: 15px;
  margin: 2px;
  min-width: 19px;
  padding: 6px;
  text-align: center;
  width: 30px;
  height: 30px;
}
.fc-sun,
.fc-sat {
  color: #b8b8b8;
}

.fc-week .fc-day:hover .fc-day-number {
  background-color: #b8b8b8;
  border-radius: 50%;
  color: #ffffff;
  transition: background-color 0.2s;
}
.fc-week .fc-day.fc-state-highlight:hover .fc-day-number {
  background-color: #ff3b30;
}
.fc-button-today {
  border: 1px solid rgba(255, 255, 255, 0);
}
.fc-view-agendaDay thead tr.fc-first .fc-widget-header {
  text-align: right;
  padding-right: 10px;
}

/*!
 * FullCalendar v1.6.4 Print Stylesheet
 * Docs & License: http://arshaw.com/fullcalendar/
 * (c) 2013 Adam Shaw
 */

/*
 * Include this stylesheet on your page to get a more printer-friendly calendar.
 * When including this stylesheet, use the media='print' attribute of the <link> tag.
 * Make sure to include this stylesheet IN ADDITION to the regular fullcalendar.css.
 */

/* Events
-----------------------------------------------------*/

.fc-event {
  background: #fff !important;
  color: #000 !important;
}

/* for vertical events */

.fc-event-bg {
  display: none !important;
}

.fc-event .ui-resizable-handle {
  display: none !important;
}
/*CALENDAR STUFFS*/

.header-img {
	height: 200px;
	width: 100%;
}
.header-heading-cont {
	background: var(--gray);
	height: 55px;
	opacity: 0.7;
	padding-bottom: 15px;
	position: absolute;
	top: 230px;
	width: -moz-available;
}
	.header-heading {
	color: var(--white);
	font-size: 28px;
	font-weight: 800;
	margin-left: 0.6em;
	margin-top: 0.3em;
}
.header-username {
	position: fixed;
	color: var(--white);
	font-size: 12px;
	margin-top: -1em;
	right: 20px;
}

.padding-top-30 {
  padding-top: 30px;
}
.padding-top-60 {
  padding-top: 60px;
}
.padding-top-75 {
  padding-top: 75px;
}
.padding-top-85 {
  padding-top: 85px;
}
.padding-top-175 {
  padding-top: 175px;
}

.make-me-blue {
	color: var(--blue) !important;
}
.make-me-red {
	color: var(--red) !important;
}

.modal-header {
	border-bottom: none;
}
.modal-footer {
	border-top: none;
}

.padding-bottom-10 {
	padding-bottom: 10px;
}
.padding-bottom-150 {
	padding-bottom: 150px;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding: 8px;
	line-height: 1.5;
	vertical-align: top;
	border-top: 1px solid #ddd;
}

.btn-add {
	position: fixed;
	left: 34em;
	top: 30px;
	width: 150px;
	z-index: 1000;
}
.btn-add2 {
	background-color: var(--blue-dark) !important;
	border-radius: 10px !important;
	float: right;
	margin-right: 20px;
	margin-top: -4em;
	height: 50px;
	width: 150px;
}
.btn-add2:hover {
	background-color: #F0F9FE !important;
	color: var(--blue-dark) !important;
}

.dataTables_filter {
	/*position: fixed;*/
	background-color: var(--white);
	border-radius: 5px;
	/*left: 26em;
	top: 30px;*/
	height: 40px;
	/*width: 180px !important;*/
	z-index: 1000;
}

.table-spacing {
	margin-top: 2em;
	margin-left: 1em;
	margin-right: 1em;
	overflow-x: scroll !important;
}
.table-spacing2 {
	margin-top: 1em;
	margin-left: 1em;
	width: 98%;
	overflow-x: scroll !important;
}
.table-spacing3 {
	margin-top: 0em;
	margin-left: 1em;
	width: 98%;
	overflow-x: scroll !important;
}
.table-spacing4 {
	margin-top: 0.5em;
	margin-left: -0.5em;
	width: 98%;
	overflow-x: scroll !important;
}
.table-spacing-chats {
	margin-top: 1em;
	width: 100%;
}
.table-heading-cont {
	background-color: var(--green);
	height: 75px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-left: 16px;
	margin-right: 15px;
	margin-top: 3em;
	width: 98%;
}
.table-heading-text {
	color: var(--white);
	font-size: 30px;
	font-weight: 800;
	padding-left: 20px;
	padding-top: 18px;
}

.fa-bell {
	color: var(--white);
	font-size: 20px;
	margin-top: 0.6em;
}
.notification-count {
	background-color: red;
	border-radius: 50px;
	font-size: 9px;
	float: right;
	margin-right: 1em;
	margin-top: 0.8em;
	margin-left: -0.5em;
}

.no-table-data-cont {
	background-color: var(--green);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-left: 16px;
	margin-right: 15px;
	margin-top: 1.5em;
	width: 98%;
	height: 100px;
}
.no-table-data-text {
	color: var(--gray);
	font-size: 18px;
	font-weight: 400;
	padding-top: 40px;
	text-align: center;
}

/*TABLE BODY BACKGROUND*/
tr > td {
	background-color: var(--white);
	color: var(--gray);
}
tr:hover > td {
	background-color: #F0F9FE;
	cursor: pointer;
}
/*TABLE BODY BACKGROUND*/

/* Chat */
.chat-name {
	font-size: 16px;
  color: var(--gray);
  margin-top: 1em;
	margin-left: 1em;
}
.chat-activity-date {
	font-size: 12px;
  color: var(--orange);
	margin-left: 1.4em;
}
.message-area {
	background-color: rgba(255,255,255,0.4);
	padding: 15px;
	position: fixed;
	bottom: 100px;
	padding-top: 370px;
	left: 280px;
	right: 0px;
	overflow-y: scroll;
	height: 100%;
	/*-ms-overflow-style: none;*/
}
.message-received {
	background-color: var(--blue-light);
	border-radius: 10px;
	color: var(--white);
	padding: 8px;
	position: relative;
  padding-top: 5px;
  padding-left: 5px;
  min-height: 30px;
  height: auto;
  text-align: left;
  margin-right: 10em;
}
.message-received:after {
	content: '\f0da';
	font-family: 'Font Awesome 5 Free';
	position: absolute;
	right: -10px;
	width: 16px;
	text-align: center;
	font-weight: 900;
	font-size: 20px;
	color: var(--blue-light);
	bottom: 0px;
}
.message-sent {
	background-color: var(--green);
	border-radius: 10px;
	color: var(--gray);
	padding: 8px;
	position: relative;
  padding-top: 5px;
  padding-right: 5px;
  min-height: 30px;
  height: auto;
  text-align: right;
  margin-left: 10em;
}
.message-sent:after {
	content: '\f0d9';
	font-family: 'Font Awesome 5 Free';
	position: absolute;
	left: -10px;
	width: 16px;
	text-align: center;
	font-weight: 900;
	font-size: 20px;
	color: var(--green);
	bottom: 0px;
}
.message-textarea {
	border: 3px solid var(--orange);
	border-radius: 10px;
	width: 100%;
	padding: 8px 8px 0;
	font-size: 12px;
}
.messagebar {
	background-color: var(--blue-dark);
	padding-bottom: 20px;
	padding-top: 20px;
	position: fixed;
	bottom: 0px;
	right: 0px;
	left: 280px;
	z-index: 100 !important;
}
.message-text {
	color: var(--white);
	font-size: 14px;
	font-weight: 800;
}
.message-footer {
  color: var(--white);
	padding-top: 5px;
  font-size: 11px;
	font-weight: 200;
}
.btn-send {
	background: var(--blue) !important;
	height: 50px;
	margin-top: 0.4em;
}
.btn-send:hover {
	background: var(--white) !important;
	color: var(--gray) !important;
	height: 50px;
	margin-top: 0.5em;
}
/* Chat */

.table-no-border {
	border-top: none !important;
}

.navbar-header {
	float: none !important;
}
.container-fluid {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.menu-burger-bars {
	font-size: 24px !important;
}
.menu-burger {
	display: none !important;
}

.profile-margins {
	margin-left: 3em;
	margin-top: 20em;
}

.no-pears-image {
	height: 250px;
	width: 250px;
}
.no-more-pears-image {
	position: relative;
	height: 250px;
	width: 250px;
}

/*MOBILE VERSION*/
/* On screens that are less than 1280px wide, make the sidebar into a topbar */
@media screen and (max-width: 1280px) {
	.login-logo-size {
    height: 120px !important;
    width: 170px !important;
	}
	
	.input-icon {
    margin-top: -0.2em !important;
	}
	
	.sidenav {
		width: 0px !important;
		overflow-y: scroll !important;
	}
	.header-image-cont {
		margin-left: 0px !important;
		padding-right: 0px !important;
		height: 70px !important;
	}
	.header-shape-cont {
		border-top: 70px solid rgba(20, 20, 20, 0.8) !important;
		width: 125% !important;
	}
	.header-text-cont {
		margin-left: 6em !important;
    margin-top: -5.5em !important;
	}
	.header-text {
		font-size: 20px !important;
	}
	.header-desc {
		font-size: 12px !important;
	}
	.menu-burger {
		display: block !important;
		position: absolute !important;
		left: 20px !important;
		top: 23px !important;
		z-index: 1001 !important;
	}
	
	#main_contents {
    /*margin-left: -15px !important;*/
    margin-left: 0px !important;
		padding-right: 16px !important;
		/*margin-top: -8em !important;*/
		margin-top: -3.6em !important;
		width: 100%;
		height: 100%
		/*padding-left: 10px;*/
	}
	
	#main_contents th, td {
    font-size: 10px !important;
	}
	
	.back-button-pos {
		left: 15px !important;
	}
	
	.table-spacing2 {
		display: block !important;
		margin-left: 0em !important;
		overflow-x: scroll !important;
	}
	
	.dataTables_wrapper input {
		font-size: 12px !important;
		padding-top: 12px !important;
	}
	.dataTables_wrapper .dataTables_length{
		width: 60% !important;
	}
	.dataTables_wrapper .dataTables_filter{
		width: 40% !important;
	}
	
	.table {
    width: 101% !important;
	}
	.table-heading-cont {
		height: 50px !important;
		width: 100% !important;
	}
	.table-heading-text {
    font-size: 18px !important;
    font-weight: 600 !important;
    padding-left: 15px !important;
    padding-top: 14px !important;
	}
	.btn-add2 {
    border-radius: 10px !important;
		float: right !important;
    margin-right: 10px !important;
    margin-top: -3.6em !important;
    padding-bottom: 31px !important;
    height: 30px !important;
    width: 110px !important;
    font-size: 9px !important;
	}
	.btn-back {
    position: relative !important;
    width: 80% !important;
    left: 15% !important;
    margin-top: -1em !important;
	}
	
	.profile-pic-image {
    border-radius: 50px !important;
    margin-bottom: 3em !important;
    margin-top: 0em !important;
    height: 100px !important;
    width: 100px !important;
	}
	
	.profile-margins {
		margin-top: 7em !important;
	}
	
	.menu-bars {
		padding-left: 15px !important;
	}
	
	.modal-title {
    font-size: 10px !important;
	}
	.btn-modal-submit-marg-top {
		font-size: 10px !important;
		margin-left: 10% !important;
		margin-top: -1em !important;
		width: 80% !important;
	}
	.btn-modal-submit {
		font-size: 10px;
		margin-left: 10% !important;
		margin-top: -2em !important;
		width: 80% !important;
	}
	.btn-modal-link {
		font-size: 10px !important;
	}
	.btn-modal-link-small {
		font-size: 8px !important;
		margin-bottom: 10px !important;
		width: 100px !important;
	}
	.btn-modal-link-smaller {
		font-size: 8px !important;
		margin-bottom: 10px !important;
		width: 75px !important;
	}
	.btn-modal-delete {
		font-size: 10px !important;
	}
	
	.no-table-data-text {
    font-size: 14px !important;
	}
	
	.message-area {
		top: 70px !important;
    left: 0px !important;
    padding: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
    padding-top: 15px;
    padding-bottom: 222px;
    height: auto;
	}
	.messagebar {
    left: 0px !important;
	}
	
	.faq-user-profile-pic {
		height: 45px !important;
		width: 45px !important;
	}
	.faq-user-profile-pic-cont {
		margin-bottom: auto !important;
		text-align: left !important;
	}
	.faq-date-asked {
		font-size: 9px !important;
		margin-top: 0.5em !important;
	}
	.faq-user-asked {
		font-size: 10px !important;
		font-weight: 800 !important;
	}
	.faq-text {
		font-size: 10px !important;
		font-weight: 400 !important;
	}
	.faq-cont {
		width: 112% !important;
	}
	
	#calendar {
		padding-left: 0px !important;
    margin-top: 0.5em !important;
	}
	.cally-me {
		width: 112% !important;
	}
	.calendar-arrow-icon {
		font-size: 14px !important;
	}
	.fc-header td {
		padding: 10px 0px 0px 0px !important;
    font-size: 7px !important;
	}
	.fc-header-title h2 {
		font-size: 8px !important;
    font-weight: 400 !important;
    margin-right: -0.5em !important;
	}
	.fc-button-wrap {
		min-width: 25px !important;
		margin-left: -5px !important;
		margin-right: -5px !important;
	}
	.table-spacing4 {
		margin-top: 1em !important;
    margin-left: 0px !important;
  }
	
	.form-info-text {
		font-size: 12px !important;
		top: 124px !important;
	}
	.form-info-text2 {
		font-size: 12px !important;
		top: 576px !important;
	}
	
	.profile {
		background-color: var(--green) !important;
		width: 245px !important;
		height: 80px !important;
		/*margin-bottom: 5em;
		margin-top: 10em;*/
	}
	.profile .photo {
		width: 80px !important;
		height: 80px !important;
		border: 3px solid #fafafa !important;
		margin-left: -45px !important;
	}
	.profile .content .text h3, .profile .content .text h6 {
    font-size: 12px !important;
	}
	.profile .content .text {
    margin-top: 15px !important;
    margin-left: 40px !important;
	}
	.profile .content .btn {
    width: 50px;
    height: 50px;
    right: 20px !important;
    top: 16px !important;
	}
	.profile .box {
    width: 110px !important;
    height: 110px !important;
    top: 50%;
    right: -65% !important;
		transform: translate(-135%, -50%) !important;
	}
	.profile .box.open i {
  left: 25px !important;
	}
	.profile .box.open i:nth-of-type(1) {
		transform: rotate(-70deg) translateX(105px) rotate(70deg) !important;
	}
	.profile .box.open i:nth-of-type(2) {
		transform: rotate(-30deg) translateX(100px) rotate(30deg) !important;
	}
	.profile .box.open i:nth-of-type(3) {
		transform: rotate(10deg) translateX(85px) rotate(-10deg) !important;
	}
	.profile .box.open i:nth-of-type(4) {
		transform: rotate(60deg) translateX(70px) rotate(-60deg) !important;
	}
	
	.no-data-gallery-view {
		margin-top: 4em !important;
	}
	.no-data-explore-view {
		margin-top: 12em !important;
	}
	.no-data-explore-view-last {
		margin-top: 2em !important;
	}
	
	.back-button-pos {
		left: 30px !important;
	}
	
	.modal-confirm .modal-content {
    transform: translate(4%,0%) !important;
	}
	
	.upload-gallery-btn {
		transform: translate(50%,0%);
	}
	
	div.gallery ul li img {
		width: 80px !important;
		height: 80px !important;
	}
	div.gallery ul li img:hover {
		width: 80px !important;
		height: 80px !important;
		margin-top: 0px !important;
		margin-left: 0px !important;
		top: 0 !important;
		left: 0 !important;
	}
	div.gallery ul li {
		width: 80px !important;
		height: 80px !important;
	}
	.wrapper {
		width: 80% !important;
	}
	.card img {
		height: 225px !important;
		max-width: 300px !important;
	}
	.card-wrapper {
		left: 52% !important;
	}
	
	.explore-view-margin-top {
		margin-top: -10em !important;
	}
	.margin-top-pears-view {
		margin-top: 10em !important;
	}
	.margin-top-gallery-view {
		margin-top: 1em !important;
	}
	.margin-top-notifications-view {
		margin-top: 1em !important;
	}
	.notification-cont {
		width: 95% !important;
	}
	.notification-pic-image {
		height: 50px !important;
    width: 50px !important;
	}
	.notification-text {
		font-size: 12px !important;
		margin-left: 4.5em !important;
		line-height: 0 !important;
		margin-top: -2em !important;
	}
	.notification-li {
    height: 60px !important;
	}
	
	.privacy-policy-text {
		font-size:10px !important;
	}
	.play-store-icon {
		display: none;
	}
	
	.back-button-pos-gallery {
		left: 0.5em !important;
		top: 0.5em !important;
	}
	.back-button-pos-password {
		position: absolute !important;
		left: 0.5em !important;
		top: 0.5em !important;
	}
	
	.profile-btn {
		width: 100% !important;
	}
	.profile-image-menu {
    margin-top: 8em !important;
	}
	.personal-details-form {
		margin-top: -4em !important;
	}
	.profile-margins {
		margin-left: 0em !important;
		margin-top: 4em !important;
	}
	
	.modal-confirm .modal-content {
		padding: 0px !important;
		font-size: 12px !important;
	}
	.modal-dialog {
    width: 90% !important;
	}
	
	#sendy_butt {
		position: absolute !important;
		bottom: -50px !important;
		right: 15px !important;
		height: auto !important;
	}
	.profile {
    margin-bottom: 6em !important;
	}
}
/* On screens that are less than 700px wide, make the sidebar into a topbar */
/*MOBILE VERSION*/

.make-me-100 {
	width: 100% !important;
}

.no-data-headings-white {
	color: #fff;
	color: var(--white);
	font-size: 14px;
	font-weight: 400;
}

/*GALLERY STUFF*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, 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;
}*/

.wrapper {
	width: 75%;
	margin: 40px auto;
}

div.gallery {
	margin-top: 30px;
}

div.gallery ul {
	list-style-type: none;
	margin-left: 35px;
}

/* animation */
div.gallery ul li, div.gallery li img {
	-webkit-transition: all 0.1s ease-in-out;
  	-moz-transition: all 0.1s ease-in-out;
  	-o-transition: all 0.1s ease-in-out;
  	transition: all 0.1s ease-in-out;
}

div.gallery ul li {
	position: relative;
	float: left;
	width: 220px;
	height: 220px;
	margin: 5px;
	padding: 5px;
	z-index: 0;
}

/* Make sure z-index is higher on hover */
/* Ensure that hover image overlapped the others */
div.gallery ul li:hover {
	z-index: 5;
}

/* Image is position nicely under li */
div.gallery ul li img {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #dddddd;
	padding: 2px;
	width: 220px;
	height: 220px;
	background: #f0f0f0;
}

div.gallery ul li img:hover {
	width: 300px;
	height: 300px;
	margin-top: -130px;
	margin-left: -130px;
	top: 50%;
	left: 50%;
}

@media only screen and (min-width: 499px) and (max-width: 1212px) {
	.wrapper {
		width: 500px;
	}
}

@media only screen and (max-width: 498px) {
	.wrapper {
		width: 300px;
	}

	div.gallery ul {
		list-style-type: none;
		margin: 0;
	}
}
/*GALLERY STUFF*/

/*SPEECH BUBBLE STUFF*/
/*Copyright (c) 2020 by Ana Tudor (https://codepen.io/thebabydino/pen/hzcwl)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/
.speech-bubble {
  position: relative;
  margin: .5em auto;
  padding: 1em;
  width: 13em; 
	height: 5em;
  border-radius: 10px;
  transform: rotate(-4deg) rotateY(15deg);
  background: var(--green);
  font: 2em Century Gothic, Verdana, sans-serif;
  text-align: center;
}
.speech-bubble:before, .speech-bubble:after {
  position: absolute;
  z-index: -1;
  content: '';
}
.speech-bubble:after {
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
  background: #f4fbfe;
}
.speech-bubble:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #f4fbfe;
  border-bottom: solid .25em var(--green);
  bottom: .25em; left: 1.25em;
  width: 0; height: 1em;
  transform: rotate(45deg) skewX(75deg);
}
.speech-bubble-no-location {
  height: 8em !important;
}
/*SPEECH BUBBLE STUFF*/

/*USER PROFILE STUFF*/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Poppins:300,400');

.card-content_desc h1 {
	color: var(--lighter-grey) !important;
	/*font-size: 18px !important;*/
	padding-top: 5px;
}
.card-content_desc p {
	color: var(--lighter-grey) !important;
	padding-top: 10px;
}

.cf {
  *zoom: 1;
  
  &:after,
  &:before {
    content: " ";
    display: table;
  }
  
  &:after {
    clear: both;
  }
}

.canvas {
  position: relative;
  min-height: 580px;
	height: 100%;
  width: 100%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 500vh;
  width: 500vh;
  border-radius: 50%;
  transition: all 1000ms ease-in-out;
}

.controls1 {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  
  button {
    &:not(:last-child) {
      margin-right: 30px;
    }
  }
}

.card-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
  display: inline-block;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translate(-50%, -50%);
  /*height: 400px;
  width: 300px;*/
  border-radius: 10px;
  transition: all 1000ms ease-in-out;
  overflow: hidden;
  
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
}

.card-active {
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
  z-index: 5;
  opacity: 1;
  
  &:after {
    display: none;
  }
}

.cb1 {
  transform: translate(-50%, calc(-50% + 20px)) scale(.95);
  background-color: white;
  z-index: 4;
  opacity: .5;
}

.cb2 {
  transform: translate(-50%, calc(-50% + 40px)) scale(.90);
  background-color: white;
  z-index: 3;
  opacity: .25;
}

.card-hide {
  transform: translate(-50%, calc(-50% + 70px)) scale(.90);
  background-color: pink;
  z-index: 2;
  opacity: 0;
}

.card {
  &-image,
  &-content,
  &-buttons {
    width: 100%;
  }
  
  &-image {
    height: 160px !important;
    background-color: green;
  }
  
  &-content {
    height: 169px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    
    &_desc {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      
      h1 {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 22px;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 8px;
      }
    }
  }
  
  &-buttons {
    padding: 0px 10px;
  }
}

.btn {
  /*float: left;*/
  width: 50%;
  padding: 15px 10px;
  
  button {
    position: relative;
    bottom: 0;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0;
    border-radius: 200px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
    transition: all 150ms ease-in-out;
  }
}

.likeBtn {
  background-color: #2fb371;
	margin-top: 1em;
}
.likeBtn:hover {
  background-color: #1c6b43;
}

/*.likeBtn::before {
  font-family: fontAwesome;
  content: "\f004";
}*/

.dislikeBtn {
  background-color: #cf4447;
	margin-top: 1em;
}
.dislikeBtn:hover {
  background-color: #7a2a2a;
}
/*USER PROFILE STUFF*/

/*NOTIFICATIONS STUFF*/
.notification-cont {
  min-height: 400px;
  width: 480px;
  /*transform: translate(-50%,-50%);*/
  transform: translate(2%,0%);
  margin: 0 auto;
  border-radius: 1rem;
  border: 0.5rem solid white;
  background: var(--green);
  box-shadow: 0 15px 30px rgba(0,0,0,.65);
}

.list {
  margin: 0.5em auto;
  padding: 0 2rem 2rem;
  list-style-type: none;
  clear: both;
  font-size: 1.4rem;
}

.notification-li {
	height: 85px;
}
.notification-text {
	font-size: 16px;
	font-weight: 400;
	color: #000;
	line-height: 6;
	margin-left: 6em;
	margin-top: -5em;
	/*text-shadow: 0 1px 0 #fff;*/
}
.notification-text:hover {
	cursor: pointer;
}
.notification-pic-image {
	border: 2px solid var(--white) !important;
	border-radius: 80px;
	margin-top: 0.25em;
	height: 75px;
	width: 75px;
}
/*NOTIFICATIONS STUFF*/

/*USER PEARS STUFF*/
/*Copyright (c) 2020 by XiChen (https://codepen.io/xichen/pen/ZpgdGq)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/
@import 'https://fonts.googleapis.com/css?family=Raleway';
* {
  outline: none;
  user-select: none;
}

body, html {
  margin: 0;
  background: #ddd;
  /*color: #7a7b7c;*/
}

body {
  font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
}

.profile {
  width: 330px;
  height: 100px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #fafafa;
  box-shadow: 0 0 2rem #babbbc;
  animation: show-profile 1s forwards ease-in-out;
	margin-bottom: 5em;
	/*margin-top: 10em;*/
}
@keyframes show-profile {
  0% {
    width: 0;
  }
}
.profile .photo, .profile .content {
  box-sizing: border-box;
}
.profile .photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fafafa;
  background-color: #fafafa;
  margin-left: -50px;
  box-shadow: 0 0 0.5rem #babbbc;
  animation: rotate-photo 0.5s forwards ease-in-out;
}
@keyframes rotate-photo {
  100% {
    transform: rotate(-360deg);
  }
}
.profile .photo img {
  width: 100%;
}
.profile .content {
  padding: 10px;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.profile .content::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 150px;
  background-color: var(--green);
  left: 0;
  top: -20px;
  z-index: -1;
  transform: rotate(-8deg);
}
.profile .content .text {
  margin-top: 20px;
  margin-left: 50px;
}
.profile .content .text h3, .profile .content .text h6 {
  font-weight: normal;
  margin: 3px 0;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.profile .content .btn {
  background-color: #abc;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 25px;
  top: 25px;
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  transition-duration: 0.3s;
  animation: pop-btn 0.3s both ease-in-out 0.5s;
}
@keyframes pop-btn {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.profile .content .btn:hover {
  box-shadow: 0 0 0 5px rgba(170, 187, 204, 0.5);
}
.profile .content .btn span {
  width: 60%;
  height: 2px;
  position: absolute;
  background-color: white;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  animation: to-hamburger 0.3s forwards ease-in-out;
}
.profile .content .btn span::before, .profile .content .btn span::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  background-color: white;
  transition-duration: 0.3s;
  transform: rotate(0deg);
  right: 0;
}
.profile .content .btn span::before {
  margin-top: -7px;
}
.profile .content .btn span::after {
  margin-top: 7px;
}
.profile .content .btn.active span {
  animation: to-arrow 0.3s forwards ease-in-out;
}
.profile .content .btn.active span::before, .profile .content .btn.active span::after {
  width: 60%;
  right: -1px;
}
.profile .content .btn.active span::before {
  transform: rotate(45deg);
}
.profile .content .btn.active span::after {
  transform: rotate(-45deg);
}
@keyframes to-hamburger {
  from {
    transform: translateY(-50%) rotate(-180deg);
  }
}
@keyframes to-arrow {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(180deg);
  }
}
.profile .box {
  width: 150px;
  height: 150px;
  opacity: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  right: -40%;
  transform: translate(-50%, -50%);
  transition-duration: 0.3s;
}
.profile .box i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ececec;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  left: 18px;
  top: calc(75px - 50px/2);
  box-shadow: 0 0 0.5rem #babbbc;
  transition-duration: 0.3s;
}
.profile .box i:hover {
  transition-delay: initial !important;
  box-shadow: 0 0 0 5px #babbbc;
}
.profile .box.open {
  opacity: 1;
}
.profile .box.open i {
  left: 60px;
}
/*.profile .box.open i:nth-of-type(1) {
  transform: rotate(-90deg) translateX(120px) rotate(90deg);
  transition-delay: 0s;
}
.profile .box.open i:nth-of-type(2) {
  transform: rotate(-45deg) translateX(120px) rotate(45deg);
  transition-delay: 0.1s;
}
.profile .box.open i:nth-of-type(3) {
  transform: rotate(0deg) translateX(120px) rotate(0deg);
  transition-delay: 0.2s;
}
.profile .box.open i:nth-of-type(4) {
  transform: rotate(45deg) translateX(120px) rotate(-45deg);
  transition-delay: 0.3s;
}
.profile .box.open i:nth-of-type(5) {
  transform: rotate(90deg) translateX(120px) rotate(-90deg);
  transition-delay: 0.4s;
}*/
.profile .box.open i:nth-of-type(1) {
  transform: rotate(-60deg) translateX(120px) rotate(60deg);
  transition-delay: 0s;
}
.profile .box.open i:nth-of-type(2) {
  transform: rotate(-20deg) translateX(120px) rotate(20deg);
  transition-delay: 0.1s;
}
.profile .box.open i:nth-of-type(3) {
  transform: rotate(20deg) translateX(120px) rotate(-20deg);
  transition-delay: 0.3s;
}
.profile .box.open i:nth-of-type(4) {
  transform: rotate(60deg) translateX(120px) rotate(-60deg);
  transition-delay: 0.4s;
}
/*USER PEARS STUFF*/

/*MODAL STUFF*/
.modal-title {
	text-align: center !important;
}
.modal-confirm {
  color: #636363;
  width: 400px;
}
.modal-confirm .modal-content {
  padding: 20px;
  border-radius: 5px;
  border: none;
  text-align: center;
  font-size: 14px;
}
.modal-confirm .modal-header {
  border-bottom: none;
  position: relative;
}
.modal-confirm h4 {
  text-align: center;
  font-size: 26px;
  margin: 30px 0 -10px;
}
.modal-confirm .close {
  position: absolute;
  top: -5px;
  right: -2px;
}
.modal-confirm .modal-body {
  color: #999;
}
.modal-confirm .modal-footer {
  border: none;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
  padding: 10px 15px 25px;
}
.modal-confirm .modal-footer a {
  color: #999;
}
.modal-confirm .icon-box {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  z-index: 9;
  text-align: center;
  border: 3px solid #f15e5e;
}
.modal-confirm .icon-box i {
  color: #f15e5e;
  font-size: 46px;
  display: inline-block;
  margin-top: 13px;
}
.modal-confirm .btn {
  color: #fff;
  border-radius: 4px;
  background: #60c7c1;
  text-decoration: none;
  transition: all 0.4s;
  line-height: normal;
  min-width: 120px;
  border: none;
  min-height: 40px;
  border-radius: 3px;
  margin: 0 5px;
  outline: none !important;
}
.modal-confirm .btn-info {
  background: #c1c1c1;
}
.modal-confirm .btn-info:hover, .modal-confirm .btn-info:focus {
  background: #a8a8a8;
}
.modal-confirm .btn-danger {
  background: #f15e5e;
}
.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
  background: #ee3535;
}
.trigger-btn {
  display: inline-block;
  margin: 100px auto;
}
.modal-image-size {
	height: 120px !important;
	width: 120px !important;
}
/*MODAL STUFF*/

/*RANGE SLIDER STUFF*/
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 15px; /* Specified height */
	border-radius: 5px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
	padding-right: 0px !important;
	padding-left: 0px !important;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
	border-radius: 50%;
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
	border-radius: 50%;
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
/*RANGE SLIDER STUFF*/

/*REPORT PEAR RADIO BUTTON STUFF*/
@import url('https://fonts.googleapis.com/css?family=Lato');

body, html{
  height: 100%;
  background: #222222;
	font-family: 'Lato', sans-serif;
}

.container-r{
  display: block;
  position: relative;
  height: auto;
  width: 100%;
}

.container-r ul{
  list-style: none;
  margin: 0;
  padding: 0;
	/*overflow: auto;*/
}

ul li{
  color: var(--gray-light);
  display: block;
  position: relative;
  float: left;
  width: 100%;
  /*height: 60px;*/
	border-bottom: 1px solid var(--gray-light);
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 400;
  font-size: 1em;
  padding: 20px 5px 0px 60px;
  height: 10px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
	margin-top: -0.5em;
  left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid var(--gray-light);
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 12px;
  width: 12px;
  top: 2px;
	left: 2px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid var(--green);
}

input[type=radio]:checked ~ .check::before{
  background: var(--green);
}

input[type=radio]:checked ~ label{
  color: var(--green);
}
/*REPORT PEAR RADIO BUTTON STUFF*/

.form-border {
	border: solid 1px var(--blue);
	border-radius: 10px;
	padding: 5px 10px 20px 10px;
}
.form-label {
	margin-top: 10px;
}
.form-info-text {
	background-color: var(--backy);
	color: #fff;
	font-size: 14px;
	padding: 0px 5px 0px 5px;
	position: absolute;
	top: 162px;
}
.form-info-text2 {
	background-color: var(--backy);
	color: #fff;
	font-size: 14px;
	padding: 0px 5px 0px 5px;
	position: absolute;
	top: 468px;
}

.no-data-pear-view {
	margin-top: -8em;
}
.no-data-pear-view {
	margin-top: -4em;
}
.no-data-notifications-view {
	margin-top: 6em;
}
.no-data-explore-view {
	margin-top: 20em;
}
.no-data-explore-view-last {
	margin-top: 3em;
}

.explore-view-margin-top {
	margin-top: 0em;
}
.margin-top-pears-view {
	margin-top: 25em;
}
.margin-top-gallery-view {
	margin-top: 14em;
}
.margin-top-notifications-view {
	margin-top: 14em;
}

.privacy-policy-text {
	color: #fff;
	font-size:16px;
}

.play-store-icon {
	position: absolute;
	bottom: 20px;
	left: 20px;
	height: 60px;
	width: 180px;
}

.back-button-pos-gallery {
	left: 20px;
	position: absolute;
	top: 5em;
	z-index: 1;
}

/*GALLERY MODAL STUFF*/
/* The Modal (background) */
.gallery-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Stay on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.gallery-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.gallery-modal-content {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.gallery-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 1s;
}

.gallery-close:hover,
.gallery-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .gallery-modal-content {
    width: 100%;
  }
}
/*GALLERY MODAL STUFF*/

/*EMOJI STUFF*/
.row:after, .row:before {
  content: " ";
  display: table;
  clear: both;
}
.span6 {
  float: left;
  width: 48%;
  padding: 1%;
}

.emojionearea-standalone {
  float: right;
}
.emojionearea-button
{
	opacity:0 !important;
}
/*EMOJI STUFF*/

.selectize-width {
	width: 100% !important;
}

.modal-font-size {
	font-size: 12px;
}

.red-error-border {
	border: 2px orangered solid;
}

/*SEARCHABLE MULTI-SELECT STUFF*/
/*Copyright (c) 2020 by Vitor Hugo da Silva Lima (https://codepen.io/vdhug/pen/xxbPoJe)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/

select[data-multi-select-plugin] {
	display: none !important;
}

.multi-select-component {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	width: 100%;
	padding: 3px 8px;
	font-size: 14px;
	line-height: 1.42857143;
	padding-bottom: 0px;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.autocomplete-list {
	border-radius: 4px 0px 0px 4px;
}

.multi-select-component:focus-within {
	box-shadow: inset 0px 0px 0px 2px #78ABFE;
}

.multi-select-component .btn-group {
	display: none !important;
}

.multiselect-native-select .multiselect-container {
	width: 100%;
}

.selected-wrapper {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	border: 1px solid #d9d9d9;
	background-color: #ededed;
	white-space: nowrap;
	margin: 1px 5px 5px 0;
	height: 22px;
	vertical-align: top;
	cursor: default;
}

.selected-wrapper .selected-label {
	max-width: 514px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 4px;
	vertical-align: top;
}

.selected-wrapper .selected-close {
	display: inline-block;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.49em;
	margin-left: 5px;
	padding-bottom: 10px;
	height: 100%;
	vertical-align: top;
	padding-right: 4px;
	opacity: 0.2;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	font-weight: 700;
}

.search-container {
	display: flex;
	flex-direction: row;
}

.search-container .selected-input {
	background: none;
	border: 0;
	color: #000 !important;
	font-size: 14px !important;
	height: 20px;
	/*width: 60px;*/
	padding: 0;
	margin-bottom: 6px;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.search-container .selected-input:focus {
	outline: none;
}

.dropdown-icon.active {
	transform: rotateX(180deg)
}

.search-container .dropdown-icon {
	display: inline-block;
	padding: 10px 5px;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 10px;
	height: 10px;
	border: 0 !important;
	/* needed */
	-webkit-appearance: none;
	-moz-appearance: none;
	/* SVG background image */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-position: center;
	background-size: 10px;
	background-repeat: no-repeat;
}

.search-container ul {
	position: absolute;
	list-style: none;
	padding: 0;
	z-index: 3;
	margin-top: 29px;
	width: 100%;
	right: 0px;
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	border-bottom: none;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.search-container ul :focus {
	outline: none;
}

.search-container ul li {
	display: block;
	text-align: left;
	padding: 8px 29px 2px 12px;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	min-height: 31px;
}

.search-container ul li:first-child {
	border-top: 1px solid #ccc;
	border-radius: 4px 0px 0 0;
}

.search-container ul li:last-child {
  border-radius: 4px 0px 0 0;
}


.search-container ul li:hover.not-cursor {
	cursor: default;
}

.search-container ul li:hover {
	color: #333;
	background-color: rgb(251, 242, 152);
	border-color: #adadad;
	cursor: pointer;
}

#userList {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#userList li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  display: block; /* Make it into a block element to fill the whole list */
	text-align: center;
}

#userList li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

.member-search {
	color: #000;
	background-color: #fff;
	border-radius: 5px !important;
	margin-bottom: 1em;
	margin-top: 3em;
	padding: 10px;
}

/*Back To Top*/
#btn_totop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--blue); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#btn_totop:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
/*Back To Top*/

/* Adding scroll to select options */
.autocomplete-list {
	max-height: 130px;
	overflow-y: auto;
}
/*SEARCHABLE MULTI-SELECT STUFF*/

/*BOOTSTRAP OVERRIDE*/
.form-control {
	border-radius: 5px !important;
}
/*BOOTSTRAP OVERRIDE*/

/*#bowling_center_error {
	transition: all 3s ease-out 0s;
}*/

/*NEW STYLING STUFF - 2020-03-20*/