/*
==========Color Palette===========

Light blue		#52B5F0		82, 181, 240
Blue			#2C4BEC		44, 75, 236
Light purple	#7376F7		115, 178, 247
Purple			#923AFD		146, 58, 253
Auqa			#00DBC6		0, 219, 198
Yellow			#FFE41F		255, 228, 31
Grey			#B3B3B3		179, 179, 179
Almost black	#0E082A		14, 8, 42
Navy			#2C2444		44, 36, 68

*/


/*==========================================================
						General Style
===========================================================*/
* {
	box-sizing:border-box;
}

:root {
	--header-height: 3em;
	--background-color: #0E082A;
	--color-text: #fff;
	--title-font: 'Righteous', cursive;
	--body-font: 'Hind Guntur', sans-serif;;
	--color-light-blue: #52B5F0;
	--color-blue: #2C4BEC;
	--color-light-purple: #7376F7;
	--color-purple: #923AFD;
	--color-yellow: #FFE41F;
	--color-aqua: #00DBC6;
	--color-navy: #2C2444;
	--color-grey: #B3B3B3;
	--gradient-aqua-lightblue: linear-gradient(to right, #00DBC6, #52B5F0);
	--gradient-pink-purple: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
	--gradient-purple-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-navy-grey: linear-gradient(to right, #243949 0%, #517fa4 100%);
	--gradient-purple-blue: linear-gradient(135deg, #7376f7 0%, #00dbc6 100%);
	--gradient-pink-yellow: linear-gradient(-135deg, #feb569 0%, #ff9194 100%);
	--box-shadow-on-dark: 0px 6px 15px -5px rgba(75,107,104,.5);
}


/*==========================================================
						Common Style
===========================================================*/
body {
	background-color: var(--background-color);
	color: var(--color-text);
	font-family: var(--body-font);
}

h1 {
	font-family: var(--title-font);
	color: var(--color-aqua);
}

a {
	text-decoration: none;
}

a:link {
	color: var(--color-text);
}

a:visited {
	color: var(--color-text);
}

button {
	border-width: 0;
}

input {
	color: var(--color-text);
}

p {
	margin: 0;
}


.ui-mobile .ui-page-active {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ui-mobile [data-role=header],
.ui-mobile [data-role=footer] {
	height: var(--header-height);
	border-width: 0;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 7px rgba(100, 100, 100, 0.2);
	line-height: var(--header-height);
	background-color: var(--background-color);
}

.ui-mobile [data-role=main] {
	flex: 1 1 100%;
	position: relative;
}

.ui-mobile [data-role=footer] {
	order: 3;
}

.ui-header .ui-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.fill-parent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.scrolling {
	overflow: auto;
}


.container {
	max-width: 1024px;
	padding: 0 1em;
	margin-left: auto;
	margin-right: auto;
}

#list-page .container,
#create-ghost-page .container {
	margin: 0px;
}

.flex-parent { display:flex; }
.flex-child {flex:1 1 auto;}
.flex-none { flex:none; }
.flex-align-center { align-items:center; }
.flex-justify-center { justify-content:center; }
.flex-justify-space { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.flex-vertical { flex-direction:column; }

.text-center { text-align:center; }
.text-right { text-align:right; }
.text-left { text-align:left; }
.text-justify { text-align:justify; }

.media-image { max-width:100%; }
.border-none { border: none; }

.hidden { display: none; }
.noclick { pointer-events: none; }

.position-rel {position: relative; }

.padding-top {
	padding-top: 1em;
}


.centered-child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.bottomed-child {
	position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

/*==========================================================
					Onboarding Page
===========================================================*/
#onboarding-page .map-button a {
	background-image: var(--gradient-aqua-lightblue);
}


.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: var(--background-color);
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-pagination-bullet {
	background: #fff;
}


.onboarding-button {
	background-image: var(--gradient-aqua-lightblue);
}

.onboarding-text {
	position: absolute;
    bottom: 3em;
}



/*==========================================================
						Sign in/up
===========================================================*/
#signin-page [data-role=main]{
	background-color:var(--background-color);
	display:flex;
	flex-direction:column;
}

#signin-page .logo,
#signup-page .logo,
#forgot-username-page .logo {
	max-width: calc(100% - 8em);
}

.signin-form-wrapper {
	width: 90%;
    /* text-align: center; */
    margin-left: auto;
    margin-right: auto;
}

.logo-wrapper {
	padding-top: 4em;
}


.sign-up-link {
	padding-bottom: 3em;
}

.form-control {
	width: 100%;
	position: relative;
	height: 4em;
	overflow: hidden;
	margin-top: 1em;
}

/*Input animation learned with tutorial: https://www.youtube.com/watch?v=IxRJ8vplzAo*/

.form-input {
	width: 100%;
	height: 100%;
	color: var(--color-text);
	padding-top: 12px;
	font-size: 1.5em;
	border: none;
	background-color: transparent;
	outline: none;
}

.form-label {
	position: absolute;
	bottom: 0;
	left: 0%;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-bottom: 1px solid var(--color-aqua);
}

.form-label::after {
	content: "";
	position: absolute;
	left: 0px;
	bottom: -1px;
	height: 100%;
	width: 100%;
	border-bottom: 2px solid var(--color-light-blue);
	transform: translateX(-100%);
	transition: transform 0.3s ease;

}

.content-name {
	position: absolute;
	font-size: 1.2em;
	bottom: 0px;
	left: 0px;
	transition: all 0.3s ease;
}

.form-input:focus + .form-label .content-name, 
.form-input:valid + .form-label .content-name {
	transform: translateY(-100%);
	font-size: 1em;
	color: var(--color-light-blue);
}

.form-input:focus + .form-label::after, 
.form-input:valid + .form-label::after {
	transform: translateX(0%);
}

.form-button {
    width: 100%;
    height: 2.5em;
    font-size: 1.2em;
    background-image: var(--gradient-aqua-lightblue);
    border-radius: 1.5em;
    border: none;
    outline: none;
}



.alert-msg-wrong-pass {
	color: var(--color-yellow);
}



/*==========================================================
						Navigation
===========================================================*/
[data-role=header] .nav ul, 
[data-role=footer] .nav ul {
    display: flex;
}

header h1 {
	font-size: 1.4em;
	letter-spacing: 1px;
}

.nav-wrapper {
	padding-top: 1em;
}

/*mobile navigation source: https://tutsos.com/t/mobile-navigations*/

.nav-mobile ul {
    list-style-type:none;
    padding-left:0;
    margin-top:0;
    margin-bottom:0;
    display:flex;
    position:relative;
}
.nav-mobile li>a,
.nav-mobile li>span {
    padding:0 0.5rem;
    color:inherit;
    display:block;
}
.nav-mobile li:first-child>h1,
.nav-mobile li:first-child>a,
.nav-mobile li:first-child>span {
    padding-left: 1rem;
}

.nav-mobile li:last-child>h1,
.nav-mobile li:last-child>a,
.nav-mobile li:last-child>span {
    padding-right: 1rem;
}

/*.nav-mobile li>a:hover {
	text-decoration:none;
	background-color:#eee;
}*/

.icon>img,
.icon>svg {
    height: 2em;
    pointer-events: none;
    vertical-align: text-bottom;
}

.icon-labels .icon-img {
    height:  calc(var(--header-height) * 0.7);
    line-height: calc(var(--header-height) * 0.7);
    display: block;
}

.icon-img {
	padding-top: 0.4em;
}
.icon-labels .icon-label {
    height:  calc(var(--header-height) * 0.3);
    line-height: calc(var(--header-height) * 0.3);
    font-size: 0.6em;
    display: block;
}

.nav-mobile-hump a {
    position: relative;
    z-index: 3;
    background-color: var(--background-color);
}
.nav-mobile-hump a::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 5em;
    height: 3em;
    background-color: var(--background-color);
    border-radius: 50%;
    transform: translate(-50%,1em);
    transition: all 0.3s;
    box-shadow: 0 0 7px rgba(100, 100, 100, 0.2);
}
.nav-mobile-hump li.active a::before {
    transform: translate(-50%,-1em);
}
.nav-mobile-hump a::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    transition: all 0.3s;
}
.nav-mobile-hump .icon {
    content: '';
    position: relative;
    z-index: 4;
    transition: all 0.3s;
}

.nav-icon-selected {
	display: none;
}

[data-role=footer] li.active .nav-icon-default{
	display: none;
}

[data-role=footer] li.active .nav-icon-selected{
	display: unset;
}


/*==========================================================
						Map Page
===========================================================*/
.map {
    height: 100%;
    width: 100%;
    position:absolute;
}

#map-page .container {
	margin: 0;
}

#map-page [data-role=main] {
	background:
		center
		no-repeat
		/*url(../img/map.png);*/
	background-size:cover;
}

#map-page .form-input {
	color: var(--color-text);
}

.button-wrapper {
	position: absolute;
}

.map-button a {
    display: block;
    text-align: center;
    font-size: 1.4em;
    color: var(--color-text);
    /* background-image: var(--gradient-aqua-lightblue); */
    background-color: var(--background-color);
    border-radius: 1.5em;
    border: none;
    outline: none;
    padding: 0.3em 0 0.2em;
    box-shadow: var(--box-shadow-on-dark);
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 6rem);
    vertical-align: text-bottom;
    margin-top: 2em;
}


.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.modal.active {
	pointer-events:initial;
    opacity: 1;
}

.modal-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}
.modal-back.clear {
	background-color: transparent;
}



.modal-popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,calc(-50% + 3em));
	max-width: calc(100% - 4em);
	max-height: calc(100% - 4em);
	transition:all 0.3s;
}
form.modal-popup {
	width:calc(100vw - 4em);
}
.modal-popup h1 {
	font-size:1em;
}
.modal.active .modal-popup {
	transform: translate(-50%,-50%);
}
.modal-foot,
.modal-head {
	background-color: var(--color-navy);
	padding: 0 0.5em;
	height:2em;
	line-height:2em;
}
.modal-popup>:first-child {
	border-radius: 0.2em 0.2em 0 0;
}
.modal-popup>:last-child {
	border-radius: 0 0 0.2em 0.2em;
}

.modal-foot input {
	padding:0;
	height:100%;
}
.modal-head h1 {
	margin:0;
	display:inline-block;
}
.modal-body {
	background-color: var(--background-color);
	padding: 0.5em;
}

.modal-body .form-input {
	font-size: 1.2em;
}

.modal-drawer {
    position: absolute;
    background-color: var(--color-navy);
    transition: all 0.3s;
}

.modal-drawer.bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8em;
    transform: translateY(100%);
}
.modal.active .modal-drawer-bottom,
.modal.active .modal-drawer-top {
	transform:translateY(0);
}
.modal-drawer.small.bottom {
	width:calc(100% - 2em);
	left:1em;
	bottom:1em;
}

.modal-drawer.modal-drawer-bottom {
    width: calc(100% - 2em);
    left: 1em;
    bottom: 0em;
    border-radius: 2em 2em 0 0;
    height: 11em;
    transform: translateY(100%);
    padding: 0 1em;
 }

.modal-drawer.modal-drawer-top {
    width: calc(100% - 2em);
    left: 1em;
    top: 0em;
    border-radius: 0 0 2em 2em;
    height: 8em;
    transform: translateY(-100%);
    padding: 0 1em;
}
}

.modal-drawer.left {
    top: 0;
    left: 0;
    width: calc(100% - 6em);
    max-width:300px;
    height: 100%;
    transform: translateX(-100%);
}
.modal.active .modal-drawer.left {
	transform:translateX(0);
}


.modal-head a, 
.modal-foot a,
[data-role=header] a, 
[data-role=footer] a {
	color:inherit;
	text-decoration:none;
	font-weight:bold;
	padding-left:1em;
	padding-right:1em;
	display:block;
}

.fake-location {
	position: relative;
}

.ghost-location-1 img {
	position: absolute;
    top: 16em;
    left: 14em;
}

.ghost-location-2 img {
	position: absolute;
    top: 22em;
    left: 6em;
}


.map-ghost-info-img-wrapper {
	flex-basis: 35%;
}

.map-ghost-info-content {
	padding-left: 1em;
}

.map-ghost-info-content span {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-yellow);
}

.gm-style img {
	max-width: 10em;
}

.map-info-content {
	color: var(--background-color);
}

.map-info-content-name {
	font-weight: 700;
	color: var(--color-blue);
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.main-map-img-wrapper {
	height: 5rem;
    width: 5rem;
    margin-right: 0.5rem;
}
/*==========================================================
						Ghost List
===========================================================*/

section#list-page {
	background-color: var(--color-navy);
}

#list-page header,
#list-page div.nav-mobile {
	background-color: var(--background-color);
}

.ghost-list.flex-parent {
	flex-wrap: wrap;
}

.list-content {
    background-color: rgba(14,8,42,.7);
    border-radius: 0.5em 0.5em 2em 0.5em;
    padding: 0.5em;
    box-shadow: var(--box-shadow-on-dark);
    /* flex: 1 0 50%; */
    margin: 0.4em;
}

.ghost-list {
	/*height: unset;*/
}

.ghost-list .flex-child {
	width: 50%;
	/* position: relative; */
	/* height: 0; */
	/* padding-bottom: 60%; */
	flex: initial;
}

.list-title {
	text-align: center;
	color: var(--color-text);
	padding-top: 0.5em;
}

.back-btn {
	width: 50px;
}

.icon-general {
	width: 1.5rem;
    vertical-align: middle;
    height: 1.5rem;
}

.modal-search {
	z-index: 2;
	width: calc(100% + 2em);
    margin-left: -1em;
}

.modal-search img.icon-general {
	margin-right: 0.5rem;
}

.modal-search .form-input:focus + .form-label .content-name img, 
.modal-search .form-input:valid + .form-label .content-name img{
	width: 1rem;
	height: 1rem;
}

.modal-search .modal-drawer.modal-drawer-top {
	height: 18em;
	opacity: 0.8;
}

/*.faction-wrapper {
	width: 80%;
}
*/
.sort-ghost-wrapper {
	padding-top: 1em;
}

.sort-ghost-wrapper .flex-child img {
	width: 4em;
}

.sort-ghost-wrapper .flex-child {
	color: var(--color-grey);
}

.ghost-image-item {
	position: absolute;
}

.ghost-image-set img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.ghost-image-set {
	position: relative;
	height: 0;
	width: 100%;
	padding-bottom: 100%;
}

.filter-icon {
	opacity: 0.5;
}

.filter-icon.active {
	opacity: 1;
}

.list-img img {
	vertical-align: bottom;
}



/*==========================================================
						Create Ghost
===========================================================*/

.bkgrd-1,
.bkgrd-2,
.bkgrd-3,
.bkgrd-4,
.bkgrd-5,
.stage-1, /* ctrl/cmd + G */
.stage-2,
.stage-3,
.stage-4 {
	height: 2em;
}

.bkgrd-1 {
	background-image: var(--gradient-navy-grey);
}

.bkgrd-2 {
	background-image: var(--gradient-purple-purple);
}

.bkgrd-3 {
	background-image: var(--gradient-purple-blue);
}

.bkgrd-4 {
	background-image: var(--gradient-pink-purple);
}

.bkgrd-5 {
	background-image: var(--gradient-pink-yellow);
}

.stage-1 {
	/*background-color: var(--color-aqua);*/
	background-image: url('../img/stage-thumb-star.png');
}

.stage-2 {
	/*background-color: var(--color-purple);*/
	background-image: url('../img/stage-thumb-fear-me.png');
}

.stage-3 {
	/*background-color: var(--color-yellow);*/
	background-image: url('../img/stage-thumb-leaf.png');
}

.stage-4 {
	background-color: var(--color-grey);
}

.stage-1,
.stage-2,
.stage-3,
.stage-4 {
	background-size: cover;
	background-repeat: no-repeat;
}

.create-button a {
    margin-top: 1em;
    display: block;
    text-align: center;
    font-size: 1.4em;
    color: var(--color-text);
     background-image: var(--gradient-aqua-lightblue); 
    /*background-color: var(--background-color);*/
    border-radius: 1.5em;
    border: none;
    outline: none;
    padding: 0.3em 0 0.2em;
    box-shadow: var(--box-shadow-on-dark);
    /* position: fixed; */
    /* bottom: 6rem; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* width: calc(100% - 6rem); */
    vertical-align: text-bottom;
}

.create-ghost-wrapper img {
	transition: margin .5s;
}

.arrow-buttons {}

.right-button,
.left-button {
	position: absolute;
    height: 3em;
    width: 3em;
    border-radius: 50%;
    top: 50%;
    margin-top: -1.5em;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
}

/*.right-button:hover,
.left-button:hover {
	opacity: .65;
}*/

.right-button {
	background-image: url('../img/icon/arrow-right.svg');
	right: 1em;
}

.left-button {
	background-image: url('../img/icon/arrow-left.svg');
	left: 1em;
}

.customize-wrapper {
	margin-bottom: 0.7em;
}

.big-margin {
    margin-top: calc(100% + 3em);
}

.create-bkgrd-wrapper {
	position: absolute;
	z-index: auto;
}

.choose-bkgrd-wrapper label,
.choose-stage-wrapper label {
	opacity: 0.5;
}

.edit-bkgrd-wrapper input:checked+label,
.edit-stage-wrapper input:checked+label,
.choose-bkgrd-wrapper input:checked+label,
.choose-stage-wrapper input:checked+label {
	opacity: 1;
}

/*.choose-bkgrd-wrapper  label.ui-radio-off,
.choose-stage-wrapper  label.ui-radio-off {
	opacity: 0.5;
}

.choose-bkgrd-wrapper  label.ui-radio-on,
.choose-stage-wrapper  label.ui-radio-on{
	opacity: 1;
}*/

.ui-radio input {
	opacity: 0;
}


/*.create-img-wrapper {
	background-image: url('../img/bkgrd-dark-blue-to-grey.png');
	background-size: cover;
	max-width: 100%;
	background-repeat: no-repeat;
}
*/
.create-ghost-wrapper {
	position: absolute;
	z-index: 1;
}

.create-stage-wrapper {
	position: absolute;
	z-index: 2;
}

/*==========================================================
						Create Ghost
===========================================================*/
#edit-ghost-page .container {
	margin-left: 0px;
	margin-right: 0px;
}


/*==========================================================
						Choose Ghost
===========================================================*/
section#choose-ghost-page {
	background-color: var(--color-navy);
}

#choose-ghost-page .container {
	margin: 0;
}

#choose-ghost-page header {
	background-color: var(--background-color);
}



/*==========================================================
						Add Location
===========================================================*/
#add-location-page [data-role=main] {
	background:
		center
		no-repeat
		/*url(../img/map-add-location.png);*/
	background-size:cover;
	width: 100%;
}

.icon-add-location {
    width: 3rem;
    vertical-align: middle;
    height: 3rem;
}

.add-location-pin {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.map-button input {
	display: block;
	text-align: center;
	font-size: 1.4em;
	color: var(--color-text);
	/* background-image: var(--gradient-aqua-lightblue); */
	background-color: var(--background-color);
	border-radius: 1.5em;
	border: none;
	outline: none;
	padding: 0.3em 0 0.2em;
	box-shadow: var(--box-shadow-on-dark);
	position: fixed;
	bottom: 6rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 6rem);
	vertical-align: text-bottom;
	/* margin-top: 2em; */
	padding-top: 0.5em;
	padding-bottom: 0.7em;
}

.add-location-top {
	/*position: relative;*/
    z-index: 2;
}

.add-location-map {
	position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/*==========================================================
						Ghost Profile
===========================================================*/
#ghost-profile-page .container {
	margin-left: 0px;
	margin-right: 0px;
}

.ghost-profile-img img {
	border-radius: 0 0 4em 0;
	max-height: 35vh;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.ghost-profile-img {
	overflow: hidden;
}

.ghost-profile span {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-aqua);
	display: block;
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.add-location-link span {
	color: var(--color-text);
    font-size: 1.2em;
    padding-left: 0.5em;
}

.add-location-wrapper {
	align-items: center;
}

.add-location-wrapper img {
	flex: 0 0 auto;
}

.icon-padding-right {
	padding-right: 1em;
}

.map-profile {
	background-size: cover;
    background-image: url(../img/map-profile.png);
    height: 9em;
    background-repeat: no-repeat;
}

.ghost-profile-function {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#ghost-profile-page .ghost-image-set {
	padding-bottom: 35vh;
}

.confirm-rem-button {
	background-image: var(--gradient-aqua-lightblue);
    border-radius: 5em;
}



/*==========================================================
						Add Location
===========================================================*/
#create-ghost-page .map-button a {
	background-image: var(--gradient-aqua-lightblue);
}

#add-location-info-page .map {
	height: 38%;
}

.location-info-wrapper {
	position: relative;
    /* padding-top: 30vh; */
    background-color: var(--color-navy);
    height: 100vh;
    /* padding-left: 1rem; */
    /* padding-right: 1em; */
    /* display: block; */
    padding-bottom: 3em;
    margin-bottom: -3em;
}

.location-info-wrapper input.form-button {
	/* position: absolute; */
    width: 100%;
    /* padding-bottom: 2em; */
    /* margin-bottom: 5em; */
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.add-location-info-form-wrapper {
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1.5em;
	border-radius: 3em 3em 0 0;
	background-color: var(--background-color);
	z-index: 2;
	margin-bottom: -4em;
	/* bottom: 1em; */
}

.location-info-img-wrapper {
	height: 32vh;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 1em;
}

.add-location-info-form-wrapper span {
	color: var(--color-aqua);
	font-weight: 700;
}


/*==========================================================
						User Profile
===========================================================*/
section#user-page {
	background-color: var(--color-navy);
}

section#user-page .modal-popup>:last-child {
    border-radius: 0 0 2em 2em;
}

/*#user-page header,
#user-page div.nav-mobile {
	background-color: var(--background-color);
}
*/

#user-page .full-width {
	background-color: var(--background-color);
    margin-bottom: 1em;
}

#user-page .container {
	margin-left: 0px;
	margin-right: 0px;
}

.user-img-wrapper {
	width: 25%;
}

.user-img {
	border-radius: 50%;
	/*border: 1px solid var(--color-yellow);*/
}

.user-info {
	padding-left: 1em;
}

.user-info-wrapper {
	padding-top: 1em;
}

.user-info span {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--color-yellow);
}

.user-setting-section {
	padding: 1em 0;
	border-top: 1px solid #B3B3B350;
}

.border-none {
	border: none;
}

.user-setting-section p {
	padding-left: 1em;
}

img.edit-btn {
    position: absolute;
    bottom: 0px;
    /*right: 0;*/
}

.form-btn {
	background-image: var(--gradient-aqua-lightblue);
    padding: 0.3em 1em 0.1em;
    font-size: 1.2em;
    border-radius: 2em;
    display: inline-block;
    text-align: center;
}

#edit-ghost-page .create-new-wrapper {
	height: 100vw;
}

.user-edit-btn {
	margin: 1em 0px;
}

.user-edit-btn a {
	width: 50%;
    border-radius: 2em;
}

.user-edit-submit {
	width: 50%;
    background-image: var(--gradient-aqua-lightblue);
    border-radius: 2em;
}

.user-edit-btn .form-input {
	padding-top: 10px;
	padding-bottom: 14px;
}

.user-edit-btn>:first-child {
	margin-right: 0.3em;
	background-color: var(--color-grey);
	background-image: none;
}

.user-edit-btn>:last-child {
	margin-left: 0.3em;
}

.right-arrow {
	padding-top: 0.4rem;
    padding-bottom: 0.2rem;
}

.dark-theme-btn,
.light-theme-btn {
	border-radius: 3em;
    height: 3em;
    margin-top: 1em;
    outline: none;
}

.dark-theme-btn {
	background-image: var(--gradient-navy-grey);
    color: var(--color-text);
}

.light-theme-btn {
	background-image: var(--gradient-pink-yellow);
}

.user-track-wrapper {
	text-align: center;
	background-color: var(--color-light-blue);
	margin-right: 1em;
	height: 12rem;
	margin-bottom: 1em;
	border-radius: 0 0 3rem 3rem;
}


/*==========================================================
						Image Upload
===========================================================*/

/*Cite Source: https://codepen.io/bronkula/pen/bvrgxQ*/

/* Create the look of a generic thumbnail */
.thumbnail {
  position:relative;
  display:inline-block;
  width:6em;
  height:6em;
  border-radius:0.6em;
  border: 0.1em solid var(--color-yellow);
  vertical-align:middle;
  /* box-shadow:0 0.15em 0.35em 0.1em rgba(0,0,0,0.2); */
  margin:0.5em;
  background-position:center;
  background-size:cover;
}

.location-upload-image {
	position: relative;
	display: inline-block;
	width: 100%;
	padding-top: 100%;
	height: same-as-width;
	border-radius: 0.6em;
	border: 0.1rem solid var(--color-light-blue);
	vertical-align: middle;
	box-shadow: 0 0.15em 0.35em 0.1em rgba(0,0,0,0.2);
	margin: 0.5em;
	background-position: center;
	background-size: cover;
}



/* This will hide the file input */
.imagepicker input {
  display:none;
}
.imagepicker {
  cursor:pointer;
  color:white;
  background-color: rgba(255, 255, 255, 0.2);
}
/* This will add the floating plus symbol to the imagepicker */
.imagepicker:before {
  content:'';
  position:absolute;
  font-size:3em;
  vertical-align:middle;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
/* This will hide the plus symbol behind the background of the imagepicker if the class "picked" is added to the element */
.imagepicker.picked:before {
  z-index:-1;
}

.location-upload-description {
	position: absolute;
	vertical-align: middle;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.imagepicker.picked .location-upload-description {
	z-index: -1;

}

.location-info-wrapper .icon-general {
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

#user-page .user-upload-wrapper .thumbnail {
	margin: 0px;
    width: 100%;
    /* padding-top: 100%; */
    height: 100%;
    vertical-align: bottom;
    border-radius: 50%;
}

.user-upload-wrapper {
	padding-bottom: 1em;
}

#user-page .imagepicker img {
	vertical-align: middle;
}

#user-page .imagepicker.picked img.user-img {
	opacity: 0;
}