:root {
	--primaryColor: #001f56;
	--primaryColorLighter: #aac9ff;
	--secondaryColor: #d99300;
	--thirdColor: #ffffff;
	--fourthColor: #3c3c434a;
	--fifthColor: #DCF7C5;
	--sixthColor: #3c3c4399;
	--seventhColor: #636366;
	--primaryTextColor: #FFFFFF;
	--secondaryTextColor: #000000;
	--thirdTextColor: #C7C7CC;
	--mainBodyColor: #F6F6F6;
	--overlayBodyColor: #00000066;
	--mainBodyText: #000000;
	--iconColor1: #264653ff;
	--iconColor2: #2a9d8fff;
	--iconColor3: #e9c46aff;
	--iconColor4: #f4a261ff;
	--iconColor5: #e76f51ff;
	--vh: 640px;
	--prefVW: 640px;
}

@font-face {
	font-family: TurretRoad;
	src: url(fonts/TurretRoad-Bold.ttf);
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url(fonts/Roboto-Regular.ttf);
}

.material-symbols-outlined {
	font-size: calc(6 * var(--prefVW));
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' calc(6 * var(--prefVW))
}


html, body {margin: 0; height: 100%; overflow: hidden}

body {
	background: var(--mainBodyColor);
	color: var(--mainBodyText);
  font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
}

a:link {
  color: var(--sixthColor);
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: var(--sixthColor);
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: var(--sixthColor);
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: var(--sixthColor);
  background-color: transparent;
  text-decoration: underline;
}

header {
	height: calc(10 * var(--vh));
	width: 100vw;
	position: relative;
	padding: 1px;
}

.emphasised {
	background: var(--thirdColor);
}



section {
	height: calc(80 * var(--vh));
	width: 100vw;
	padding: 1px;
}

.long-section {
	height: calc(90 * var(--vh));
}

.center-aligned-section-elements{ /* for section */
	position:absolute;
 	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
	width: 80vw;
}

footer {
	background-color: var(--thirdColor);
	height: calc(10 * var(--vh));
	width: 100vw;
	position: relative;
	padding: 1px;
	position: relative;
}

.right-aligned-column-header {
	position:absolute;
	top: 70%;
  transform: translateY(-50%);
	right: 1vw;
	padding:1vh 1vw;
	color: var(--thirdTextColor);
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
}


.right-aligned-button {
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
	right: 2vw;
	padding:1vh 1vw;
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(4 * var(--prefVW));
	color: var(--primaryColor)
}

.left-aligned-button {
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
	left: 2vw;
	padding:1vh 1vw;
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(4 * var(--prefVW));
	color: var(--primaryColor)
}

.center-aligned-button {
	position:absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
	text-align: center;
	padding:0vh 0vw;
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	color: var(--secondaryTextColor);
}

.center-aligned-title {
	position:absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
	text-align: center;
	padding:1vh 1vw;
	font-family: 'Roboto';
	font-weight:bold;
	font-size: calc(5 * var(--prefVW));
	color: var(--secondaryTextColor);
}


h1 {
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(5 * var(--prefVW));
	text-align: center;
	position:absolute;
 	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70vw;
	margin:0;
	padding:0;
}

.menu-button {
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
	right: 2vw;
}

.channels-button {
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
	left: 2vw;
}


button {
  background:none;
  border:none;
  margin:auto;
  padding:1vh 2vw;
  cursor: pointer;
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(4 * var(--prefVW));
	text-align: center;
	color:inherit;
}

button.inside {
	color:var(--primaryColor);
}

.scrollable {
	overflow-y: scroll;
	overflow-x: hidden;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 0;
	padding: 0;
}

th, td {
  text-align: left;
	vertical-align: middle;
  padding: 0;
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(2 * var(--prefVW));
}

.simple-table-row:nth-child(even) {
	background-color: inherit;
	color: inherit;
}
.simple-table-row:nth-child(odd) {
	background-color: inherit;
	color: inherit;
}

.menu-item-icon {
	font-size: calc(6 * var(--prefVW));
	color: var(--secondaryColor);
}

.little-icon {
	font-size: calc(3 * var(--prefVW));
	color: var(--secondaryColor);
}


#messages {
	height: calc(80 * var(--vh));
	overflow: auto;
	font-size: calc(3 * var(--prefVW));
}

.container {
  border-radius: 1vh;
  padding: 1vh 1vw;
  margin: 1vh auto;
	position: relative;
	width: 80vw;
}

.received {
  background-color: var(--thirdColor);
	color: var(--secondaryTextColor);
	left: -5vw;
}

.received p{
	margin-left: 2vw;
	margin-right: 2vw;
	font-size: calc(5 * var(--prefVW));
}

.received::before {
	content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 3vmin solid transparent;
  border-right: 3vmin solid var(--thirdColor);
  border-top: 3vmin solid var(--thirdColor);
  border-bottom: 3vmin solid transparent;
  left: -3vmin;
  top: 0px;
}

.sent {
	background-color: var(--fifthColor);
	color: var(--secondaryTextColor);
	left: 5vw;
}

.sent p{
	margin-left: 2vw;
	margin-right: 2vw;
	font-size: calc(5 * var(--prefVW));
}

.sent::before {
	content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 3vmin solid var(--fifthColor);
  border-right: 3vmin solid transparent;
  border-top: 3vmin solid var(--fifthColor);
  border-bottom: 3vmin solid transparent;
  right: -3vmin;
  top: 0px;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container img {
  float: left;
  max-width: 10vw;
  width: 100%;
  margin-right: 2vw;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 2vw;
  margin-right:0;
}

.container img.thumb {
	float: left;
  max-width: 53vw;
	margin-top: 1vh;
	margin-bottom: 1vh;
	margin-left: 5vw;
  border-radius: 10%;
}

.container audio {
	width: 50vw;
	height: 10vh;
}

.time-right {
	color: var(--secondaryColor);
  float: right;
  font-family: TurretRoad;
	font-weight: normal;
	font-size: calc(2 * var(--prefVW));
}

.time-left {
	color: var(--secondaryColor);
  float: left;
  font-family: TurretRoad;
	font-weight: normal;
	font-size: calc(2 * var(--prefVW));
}

.remove-bottom-margin {
	margin-bottom: 0;
}

.right-aligned {
	padding-right: 2vw;
	float: right;
}

.left-aligned {
	padding-left: 2vw;
}

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

.too-right-aligned {
	padding-right: 1vw;
	float: right;
}

.third-cell {
	padding-right: 5vw;
	float: right;
}


.basic-layer { /* has to be used with another class that specifies zindex and color */
	position: fixed;
	width: 100%;
	height: 100%;
	left: -100vw;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0.95;
}

.choices-layer {
	background-color: var(--overlayBodyColor);
	z-index: 2;
}

.messages-layer {
	background-color: var(--fourthColor);
	color: var(--secondaryTextColor);
	z-index: 3;
}

.errors-layer {
	background-color: var(--thirdColor);
	color: var(--secondaryTextColor);
	z-index: 3;
	opacity: 1;
}

.splash-layer {
	background-color: var(--thirdColor);
	color: var(--secondaryTextColor);
	z-index: 3;
	opacity: 1;
}

.overlay-header {
	background: var(--fourthColor);
	color: var(--secondaryTextColor);
}

.overlay-footer {
	background: var(--fourthColor);
	color: var(--secondaryTextColor);
}

.choices-box{
	position:absolute;
 	bottom: 1%;
	left: 50%;
	transform: translate(-50%, -1%);
	text-align:center;
	width: 80vw;
}

.choice-button {
	font-family: 'Roboto';
	font-style: normal;
	font-size: calc(4 * var(--prefVW));
	width: 80vw;
	background: var(--thirdColor);
	color: : var(--mainBodyText);
	border-radius: 2vmin;
	border-style: solid;
  border-color: var(--secondaryColor);
	margin: 0.5vh;
}



.big-button {
	height: calc(10 * var(--vh));
	width: 100vw;
	background: var(--thirdColor);
	border-bottom-style:solid;
	border-color: var(--fourthColor);
	display: flex;
}

.big-button .label{
	width: 80%;
	font-size: calc(5 * var(--prefVW));
	color: var(--primaryColor);
	text-align: left;
	margin: auto;
	padding-left: 2vw;
}

.big-button .label .dontworry{
	font-size: calc(3 * var(--prefVW));
	color: var(--mainBodyText);
	text-align: left;
}

.big-button .arrow{
	width: 20%;
	font-size: calc(5 * var(--prefVW));
	color: var(--primaryColor);
	text-align: center;
	margin: auto;
}

.settings-button {
	font-size: calc(3 * var(--prefVW));
	text-align: left;
	color: var(--primaryColor);
	border: none;
	border-radius: 3px;
	background-color: var(--thirdColor);
	box-shadow: 2px 2px var(--secondaryColor);
}

.cancel{
	color: var(--primaryColor);
}

.explain-choices{
	color: var(--primaryColor);
	border-radius: 5vmin;
}

.splash-logo {
	display: block;
  margin-left: auto;
  margin-right: auto;
	height: calc(40 * var(--vh));
	max-width: 80vw;
}

.logo-font {
	font-family: 'Rubik', sans-serif;
}

.input-field {
	height: calc(10 * var(--vh));
	width: 100vw;
	background: var(--thirdColor);
	border: none;
  outline: none;
	border-bottom-style:solid;
	border-color: var(--fourthColor);
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	color: var(--mainBodyText);
	padding: 1vmin 3vmin;
}

.right-aligned-footer-button {
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
	right: 10vw;
	color: var(--primaryColor);
}

.left-aligned-footer-button {
	position:absolute;
	top: 50%;
  transform: translateY(-50%);
	left: 10vw;
	color: var(--primaryColor);
}

.center-aligned-footer-button {
	position:absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
	text-align: center;
	color: var(--primaryColor);
}

.image-settings {
  display: block;
  margin-left: auto;
  margin-right: auto;
	height: calc(20 * var(--vh));
	width: calc(20 * var(--vh));
	border-radius: 50%;
}

.channel-row {
	height: calc(10 * var(--vh));
	background: var(--thirdColor);
	padding:0;
	margin:0;
}

.channel-image {
	display:block;
	height: calc(6 * var(--vh));
	width: calc(6 * var(--vh));
	border-radius: 50%;
	padding-left: 1vw;
}

.theme-icon {
	display:block;
	height: calc(4 * var(--vh));
	width: calc(4 * var(--vh));
	border-radius: 5%;
	padding-left: 2vw;
}

.title {
	text-align: center;
	font-family: 'Roboto';
 	font-weight: bold;
 	font-size: calc(6 * var(--prefVW));
	color: var(--mainBodyText);
 	padding: 3vh 3vw;
}

.image-container {
  width: 100vw;
  height: calc(80 * var(--vh));
  margin: auto;
}

.draw-img{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
  margin-left: auto;
  margin-right: auto;
}


.video-container {
	width: 100vw;
	height: calc(60 * var(--vh));
  margin: auto;
}

.vid {
	display: block;
	height: 100%;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

.welcome-message {
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(4 * var(--prefVW));
	color: var(--mainBodyText);
	padding: 2vmin;
	margin:0;
	text-align: center;
}

.version-number {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--mainBodyText);
	padding: 2vmin;
	margin:0;
	text-align: center;
	line-height: 1.6;
}

.about-text {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--seventhColor);
	padding: 3vmin;
	margin:0;
	text-align:justify;
	line-height: 1.6;
}

.faq-text {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--seventhColor);
	padding: 3vmin;
	margin:0;
	text-align:justify;
	line-height: 1.6;
}

.copyrights-text {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--secondaryColor);
	padding: 3vmin;
	margin:0;
	text-align:justify;
	line-height: 1.6;
}

.version-text {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--thirdTextColor);
	padding: 2vmin;
	margin:0;
	text-align:center;
	line-height: 1.6;
}

.description {
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(3 * var(--prefVW));
	color: var(--mainBodyText);
	padding: 3vh 3vw;
	margin:0;
	text-align: center;
}

.friend-name {
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(5 * var(--prefVW));
	padding: 0 1vw;
}

.friend-bio {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	padding: 0 1vw;
}

.friend-name-bio {
	border-bottom: 1px solid  var(--fourthColor);
	padding-left: 2vw;
}

.theme-name {
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(2 * var(--prefVW));
	color: var(--seventhColor);
	padding: 0 2vw;
}

.common-tab-attributes{
  display: flex;
	align-items: center;
	justify-content: center;
  color: var(--primaryColor);
	background: var(--primaryTextColor);
  padding: 0;
  text-decoration: none;
  font-size: calc(6 * var(--prefVW));
  border: 2px solid var(--primaryColor);
}

.selected-tab {
	background-color: var(--primaryColor);
	border: 2px solid var(--primaryColor);
	color: var(--primaryTextColor);

}

.left-tab{ /* in a header */
	position: absolute;
	left: 20%;
	right: 49.5%;
	top: 20%;
	bottom: 20%;
	border-radius: 1vh 0 0 1vh;
}

.right-tab{ /* in a header */
	position: absolute;
	right: 20%;
	left: 50%;
	top: 20%;
	bottom: 20%;
	border-radius: 0 1vh 1vh 0;
}

.reply-box {
	width: 80vw;
	height: 7vh;
	margin: auto;
	background: var(--thirdColor);
	mix-blend-mode: normal;
	border: 0.5px solid var(--secondaryColor);
	box-sizing: border-box;
	border-radius: 2vmin;
	overflow-x: hidden;
	overflow-y: scroll;
	text-align: left;
	padding:1vh 1vw;
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	color: var(--secondaryTextColor);

}

.reply-send {
	color:var(--primaryColor);
	font-size: calc(5 * var(--prefVW));
}

.how-to-reply {
	font-size: calc(4 * var(--prefVW));
	display: grid;
}

.on-color {
	color:var(--primaryColor);
}

.off-color {
	color:var(--primaryColorLighter);
}

.contact-info {
	position: relative;
}

.contact-info img {
	position: absolute;
	left: 50%;
  transform: translateX(-50%);
	margin:0;
	padding:0;
	height: calc(100 * var(--prefVW));
	width: calc(100 * var(--prefVW));
	object-fit: cover;
}

.contact-info .id {
	position: absolute;
	top: calc(101 * var(--prefVW));
	width: 100%;
	left: 0px;
	padding: 1vh 1vw;
	background-color: var(--thirdColor);
}

.contact-info .id .name{
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(4 * var(--prefVW));
	padding: 1vh 2vw;
	color: var(--secondaryTextColor);
}

.contact-info .id .theme {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	padding: 1vh 2vw;
	color: var(--seventhColor);
}

.contact-info .id hr {
	margin-left: 2vw;
}


.contact-info .id .bio{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	padding: 1vh 2vw;
	color: var(--secondaryTextColor);
}

.contact-info .details {
	position: absolute;
	width: 100%;
	left: 0px;
	top: calc(130 * var(--prefVW));
	margin:0;
	padding: 1vh 1vw;
	background-color: var(--thirdColor);
}

.contact-info .higher-details {
	position: absolute;
	width: 100%;
	left: 0px;
	top: calc(101 * var(--prefVW));
	margin:0;
	padding: 1vh 1vw;
	background-color: var(--thirdColor);
}

.icon-color1 {
	color: var(--iconColor1);
}

.icon-color2 {
	color: var(--iconColor2);
}

.icon-color3 {
	color: var(--iconColor3);
}

.icon-color4 {
	color: var(--iconColor4);
}

.icon-color5 {
	color: var(--iconColor5);
}

.contact-info-left-col {
	width: 18vw;
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	padding: 0 2vw;
}

.contact-info-mid-col {
	width: 72vw;
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	padding: 0 0;
	color: var(--secondaryTextColor);
}

.contact-info-right-col {
	width: 10vw;
	text-align: center;
	font-size: calc(4 * var(--prefVW));
	color: var(--thirdTextColor);
}

.references {
	position: absolute;
	width: 100%;
	left: 0px;
	top: 30vw;
	margin:0;
}


.references .list{
	padding: 1vh 1vw;
	background-color: var(--thirdColor);
}


.references .list .item{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	padding: 0 0;
	margin-left: 20vw; /* same as hr left margin  */
	color: var(--secondaryTextColor);
}

.references .empty-bottom {
	width: 100%;
	height: 2vh;
}

.media-channels {
	width: 100%;
	margin:0;
	padding: 1vh 1vw;
	background-color: var(--thirdColor);
}

.media-channels .item{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	padding: 0 0;
	margin-left: 15vw; /* same as hr left margin minus the icon width */
	color: var(--secondaryTextColor);
}

.media-channels .icon{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	padding: 0 0;
	margin-left: 1vw; /* same as hr left margin */
}

.settings-head {
	display: inherit;
	height: calc(20 * var(--prefVW));
	width: 100%;
	margin:0;
	background-color: var(--thirdColor);
}

.settings-head .img-container {
	width: 20vw;
	padding-top: 1vh;
	padding-left: 2vw;
}

.settings-head .img-container img {
	display:block;
	height: calc(15 * var(--prefVW));
	width: calc(15 * var(--prefVW));
	border-radius: 50%;
}

.settings-head .player-name {
	font-family: 'Roboto';
	font-weight: bold;
	font-size: calc(4 * var(--prefVW));
	color: var(--secondaryTextColor);
	text-align: left;
	vertical-align: text-top;
	padding-top: 3vh;
	padding-left: 3vw;
	width: 80vw;
}

.settings-head .player-name .player-info{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--thirdTextColor);
}

.settings-details {
	position: absolute;
	width: 100%;
	left: 0px;
	top: calc(50 * var(--prefVW));
	margin:0;
	padding: 1vh 1vw;
	background-color: var(--thirdColor);
}


.leaderboard-row {
	display: inherit;
	width: 100%;
	margin:0;
	padding: 2vh 1vw;
	border-bottom: 1pt solid var(--fourthColor);
	background-color: var(--thirdColor);
}

.leaderboard-row .player-image-container{
	padding: 1vh 0;
	width: 10vw;
}

.avatar-image {
	display:block;
	height: calc(8 * var(--prefVW));
	width: calc(8 * var(--prefVW));
	border-radius: 50%;
	padding-left: 1vw;
}

.leaderboard-row .player-name{
	font-family: 'Roboto';
	font-weight: bold;
	font-size: calc(3 * var(--prefVW));
	color: var(--secondaryTextColor);
	text-align: left;
	vertical-align: text-top;
	padding-top: 1vh;
	width: 80vw;
}

.player-info{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(2 * var(--prefVW));
	color: var(--thirdTextColor);
}

.leaderboard-row .points{
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	text-align: right;
	padding-right: 2vw;
	color: var(--primaryColor);
	width: 10vw;
}

.helped-friends-row {
	height: calc(20 * var(--vh));
	background: var(--thirdColor);
	padding:0;
	margin:0;
}

.helped-friends-avatar {
	width: 30vw;
	text-align: center;
	padding-left: 1vw;
}

.helped-friends-avatar img {
	display:block;
	height: calc(18 * var(--vh));
	width: calc(18 * var(--vh));
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
}


.helped-friends-name{
	width: 50vw;
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(6 * var(--prefVW));
	text-align: center;
}

.helped-friends-theme {
	width: 20vw;
	padding-right: 1vw;
}

.helped-friends-theme img {
	display:block;
	height: calc(10 * var(--vh));
	width: calc(10 * var(--vh));
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
  border-color: var(--secondaryColor);
}

.helped-friend-figure{
	float: left;
}


.story-row {
	width: 100%;
	margin:0;
	padding: 4vh 1vw;
}

.story-row:nth-child(odd) {
	background: var(--secondaryColor);
}

.story-row:nth-child(even) {
  background-color: var(--thirdColor);
}

.story-row .story-name{
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(5 * var(--prefVW));
	text-align: center;
}

.story-row .story-name .story-outcomes{
	font-weight: lighter;
	font-size: calc(4 * var(--prefVW));
}

.footer-menu {
	width: 100vw;
	border-style: none;
	padding: 2vh 1vw;
}

.footer-label {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	color: var(--secondaryColor);
}

.footer-label-end {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--secondaryColor);
}

.footer-menu-element {
	width: 16.67vw;
	border-style: none;
	text-align: center;
	color: var(--primaryColor);
}

.footer-menu-element.highlighted {
	color: var(--secondaryColor);
}

.small-line-spacing {
	line-height: 10%;
}

.footer-menu-element-label {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(2 * var(--prefVW));
}

.input-label {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	color: var(--primaryColor);
}

.output-label {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(4 * var(--prefVW));
	color: var(--primaryColor);
}

.header-image {
	display:block;
	height: calc(8 * var(--vh));
	width: calc(8 * var(--vh));
	border-radius: 50%;
}

.friend-name-header {
	font-family: 'Roboto';
	font-weight: bolder;
	font-size: calc(5 * var(--prefVW));
	padding: 0 1vw;
}

.waiting-icon {
	font-size: calc(15 * var(--prefVW));
}

.end-label {
	font-family: 'Roboto';
	font-size: calc(3 * var(--prefVW));
}

hr {
  border-top: 1px solid var(--fourthColor);
  border-radius: 1px;
  margin-left: 20vw;
}


.sexy-blue {
  background-image: linear-gradient(to bottom right, #2193b0, #6dd5ed);
}
.purple-love {
  background-image: linear-gradient(to bottom right, #cc2b5e, #753a88);
}
.mauve {
  background-image: linear-gradient(to bottom right, #42275a, #734b6d);
}
.shades-gray {
  background-image: linear-gradient(to bottom right, #bdc3c7, #2c3e50);
}
.cherry {
  background-image: linear-gradient(to bottom right, #eb3349, #f45c43);
}
.lush {
  background-image: linear-gradient(to bottom right, #56ab2f, #a8e063);
}
.kashmir {
  background-image: linear-gradient(to bottom right, #614385, #516395);
}
.pale-wood {
  background-image: linear-gradient(to bottom right, #eacda3, #d6ae7b);
}
.frost {
  background-image: linear-gradient(to bottom right, #000428, #004e92);
}

.whatsapp-background {
	background-image: url(../img/whatsappBackground.png);
	background-repeat: no-repeat;
	background-size: cover;
}


.typing-indicator {
  background-color: var(--thirdColor);
  will-change: transform;
  width: auto;
  border-radius: 5vh;
  padding: 2vh;
  display: table;
  margin: 0 5vw;
  position: relative;
  -webkit-animation: 2s bulge infinite ease-out;
          animation: 2s bulge infinite ease-out;
}
.typing-indicator::before, .typing-indicator::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2px;
  height: 2vh;
  width: 2vh;
  border-radius: 50%;
  background-color:  var(--thirdColor);
}
.typing-indicator::after {
  height: 1vh;
  width: 1vh;
  left: -1vh;
  bottom: -1vh;
}
.typing-indicator span {
  height: 1.5vh;
  width:  1.5vh;
  float: left;
  margin: 0 1px;
  background-color:  var(--fourthColor);
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
          animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
          animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
          animation: 1s blink infinite 0.9999s;
}

@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge {
  50% {
    transform: scale(1.05);
  }
}
@keyframes bulge {
  50% {
    transform: scale(1.05);
  }
}


.avatar {
	width: calc(24 * var(--prefVW));
	height: calc(24 * var(--prefVW));
	margin: auto;
}

.avatar img{
	width: calc(24 * var(--prefVW));
	height: calc(24 * var(--prefVW));
  max-width: calc(24 * var(--prefVW));

}


.settings-block {
	overflow-y: scroll;
	overflow-x: hidden;
}

.item1 { grid-area: description;}
.item2 { grid-area: avatar; }
.item3 { grid-area: info; }
.item4 { grid-area: password; }
.item5 { grid-area: helped; }

.grid-container {
  display: grid;
  grid-template-areas:
		'description avatar'
		'info password'
		'helped helped';
  gap: 10px;
  padding: 10px;
}

.grid-container > div {
  text-align: left;
  padding: 20px 0;
}

.black-background {
	background-color: black;
}
.white-text {
	color: white;
}


.option-row {
	display: inherit;
	width: 100%;
	margin:0;
	padding: 2vh 1vw;
	border-bottom: 1pt solid var(--fourthColor);
	background-color: var(--thirdColor);
	font-family: 'Roboto';
	font-weight: normal;
	font-size: calc(3 * var(--prefVW));
	color: var(--secondaryTextColor);
	text-align: center;
	vertical-align: middle;
}

.auto-choices-switch {
	width: calc(5 * var(--prefVW));
	height: calc(3 * var(--prefVW));
}