/* MAIN STYLES */

body {
		height: 100%;
		width: 100%;
		margin: 0;
		background: black;
		overflow: hidden;
}
html {
		width: 100%;
		overflow: hidden;
		background: black;
}
::selection {
  	background: rgba(255,255,255,0.2);
}
::-moz-selection {
  	background: rgba(255,255,255,0.2);
}
* {
	-webkit-tap-highlight-color: transparent;
	scrollbar-width: none;
}
*::-webkit-scrollbar {
	display: none;
}
video::-internal-media-controls-overlay-cast-button {
    display: none;
}
 


/* TEXT CONTENT */

.m {
		display: none;
}

@media only screen and (max-width: 720px) {
		.m {
				display: unset;
		}
		.d {
				display: none;
		}
}


/* FONTS */

h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 34px;
    display: block;
    overflow-wrap: break-word;
    font-weight: 650;
    margin: 0;
    letter-spacing: -1px;
    line-height: 35px;
    color: white;
    -webkit-font-smoothing: antialiased;
}
h3 {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    margin: 0;
    line-height: 21px;
    display: inline-block;
    letter-spacing: -0.5px;
    font-weight: 450;
    color: white;
    -webkit-font-smoothing: antialiased;
}
h5 {
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    margin: 0;
    line-height: 27px;
    display: inline-block;
    letter-spacing: -0.5px;
    font-weight: 450;
    color: white;
    -webkit-font-smoothing: antialiased;
}
h5 [class*="dvcn-"] {
	font-size: 11px;
	margin-right: 3px;
}
.op {
		opacity: 0.7;
}
@font-face {
    font-family: 'icons';
    src: url(icons.ttf);
		font-size: 24px;
}
h4.vector {
		margin: 0;
		line-height: 21px;
		display: inline-block;
		letter-spacing: -0.5px;
		-webkit-font-smoothing: antialiased;
		cursor: default;
		font-family: 'icons';
}
h4.vector::selection {
		background: none;
}
h4.vector::-moz-selection {
		background: none;
}
h3 a {
		color: white;
		opacity: 0.6;
		transition: opacity 0.2s;
}
h3 a:hover {
		opacity: 1;
}
h3.emphasis {
		font-weight: 530;
		display: block;
		margin-bottom: 5px;
}
h1 .new_label {
	font-size: 20px;
    padding: 2px 6px;
    background: white;
    color: black;
    border-radius: 5px;
    transform: translateY(-3px);
    display: inline-block;
    line-height: 22px;
}
h1 .next_to_new {
	margin-right: 10px
}

/* ICONS */

.icon {
    width: 17px;
    height: 17px;
    display: inline-block;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    margin-right: 10px;
    background-position: center;
    margin-bottom: -1px;
}
.icon.pfp {
		transform: scale(1.2);
		border-radius: 32px;
		background-size: cover;
}
.icon.pfp.smaller {
		border-radius: 30px;
		height: 20px;
		width: 20px;
		margin-left: -3px;
}


/* SIDES */

section.left {
	min-width: 50%;
	width: calc(100% - 700px);
	position: fixed;
	overflow: hidden;
	top: 0;
	border-radius: 80px;
	z-index: 1;
	height: 100%;
	background: var(--main-bg, #242424);
	transition: background 0.2s;
} 
section.right {
	position: fixed;
    box-sizing: border-box;
    width: 50%;
	max-width: 700px;
    height: 100%;
    border-radius: 80px;
    top: 0;
    right: 0;
	background: #242424;
}
scroll {
	overflow-y: scroll;
	position: relative;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: block;
	border-width: none;
	overflow-x: hidden;
}

.scroll_section {
		scrollbar-width: none;
}
.scroll_section::-webkit-scrollbar {
		display: none;
}
@media only screen and (min-width: 2130px) {

		.right_side {
				width: 700px;
				right: calc(50% - 350px);
				height: calc(100% - 50px);
				top: 25px;
		}
}
@media only screen and (max-width: 1130px) {
		.right_side {
		    width: 100%;
		    z-index: 1000;
		    top: calc(100% - 137px);
		    overflow: auto;
				height: calc(100% - 120px);
		    transition: top 0.3s;
		}
		.right_side.active {
		    top: 100px;
		}
}
@media only screen and (max-width: 720px) {
		.right_side {
				border-radius: 40px;
				top: calc(100% - 120px);
				height: calc(100% - 101px);
		}
}



/* TAP INFO */

.tap_info_content {
	padding: 20px 15px;
}



.tap_info {
    height: 100%;
	width: 100%;
	border-radius: 80px;
	padding: 0;
	border-top: 3px solid rgba(255,255,255,0.1);
	box-sizing: border-box; 
}
.tap_info::-webkit-scrollbar {
		display: none;
}
.tap_settings {
		margin-bottom: -20px;
		display: block;
}
.tap_settings .mini_tile.active {
		filter: none;
}
.tap_settings .mini_tile.active:hover {
		filter: none;
}
.tap_settings.tap_emergency .tap_emergency {
		display: inline-block;
}
.tap_settings.tap_exclusives .tap_exclusives {
		display: inline-block;
}
  


/* MINI TILES */


.mini_tile {
		cursor: pointer;
		box-sizing: border-box;
		width: calc(50% - 10px);
		margin: 0 10px 10px 0;
		display: inline-block;
		background: #242424;
		border-radius: 70px;
		position: relative;
		height: 130px;
		background: rgba(255,255,255,0.2);
		transition: background 0.2s, filter 0.2s;
}

.mini_tile_content {
    height: 130px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    width: calc(100% - 70px);
    left: 35px;
}
.mini_tile.loading .icon {
		background-image: url('https://divecons.heydive.com/loading.gif') !important;
}
.mini_tile_content .inner {
		position: relative;
		width: 100%;
}
.mini_tile_content .inner .icon {
		position: absolute;
		top: 1;
}

.mini_tile_content h3 {
		width: calc(100% - 30px);
}
.mini_tile .mini_tile_desc {
    display: inline-block;
    opacity: 0.7;
    margin-top: 5px;
    padding-left: 27px;
}
.mini_tile .mini_tile_title {
		padding-left: 27px;
}
.mini_tile.active {
		background: white;
		filter: drop-shadow(0 0 17px rgba(255,255,255,0.2));
}
.main_active.mini_tile .icon {
		background-image: url(https://divecons.heydive.com/off.svg);
}
.main_active.mini_tile.active .icon {
		background-image: url(https://divecons.heydive.com/on.svg);
}
.mini_tile.active h3 {
		color: black;
}
.mini_tile.active .icon {
		filter: invert(1);
}

.mini_tile.emergency_mode.active {
		background: #FB274C;
		filter: drop-shadow(0 0 17px rgba(251,39,74,0.5));
}
.emer_m {
		display: none;
}


@media (hover: hover) {
		.mini_tile.active:hover {
				background: white;
				filter: drop-shadow(0 0 17px rgba(255,255,255,0.4));
		}
		.mini_tile.emergency_mode.active:hover {
				background: #FB274C;
				filter: drop-shadow(0 0 17px rgba(251,39,74,0.7));
		}
		.mini_tile:hover {
				background: rgba(255,255,255,0.3);
		}
}
@media (hover: none) {
		.mini_tile.active:active {
				background: white;
				filter: drop-shadow(0 0 17px rgba(255,255,255,0.4));
		}
		.mini_tile.emergency_mode.active:active {
				background: #FB274C;
				filter: drop-shadow(0 0 17px rgba(251,39,74,0.7));
		}
		.mini_tile:active {
				background: rgba(255,255,255,0.3);
		}
}

.mini_tile.emergency_mode.active h3 {
		color: white;
}
.mini_tile.emergency_mode.active .icon {
		filter: none;
}


@media only screen and (max-width: 720px) {
		.mini_tile {
				border-radius: 35px;
				margin: 0 5px 5px 0;
				width: calc(50% - 5px);
		}
		.mini_tile_content {
				width: calc(100% - 36px);
				left: 18px;
		}
}
@media only screen and (max-width: 431px) {
		.emer_m {
				display: unset;
		}
		.emer_d {
				display: none;
		}
}
@media only screen and (max-width: 385px) {
		.mini_tile {
				width: calc(100% - 5px);
		}
}


/* TILE LAYOUT */

.tile_layout {
		margin: 15px -25px 5px -15px;
}
.tap_settings .tile_layout.second {
		margin-top: 0;
}

@media only screen and (max-width: 720px) {
		.tile_layout {
				margin-bottom: 2px;
				width: calc(100% + 36px);
				margin-top: 5px;
		}
		.tap_settings .tile_layout {
				margin-bottom: 0;
		}
}


/* CARD DROPDOWN */

.card_preview {
	width: 250px;
	height: 156px;
	background-image: url(https://hydr.in/img/rainbow.png);
	background-size: cover;
	background-position: center;
	border-radius: 3% 3% 3% 3% / 4.5% 4.5% 4.5% 4.5%;
	cursor: pointer;
	top: 50px;
	left: calc(50% - 125px);
}

.card_dropdown_parent {
	height: 100%;
	transition: top 0.5s cubic-bezier(1,0,0,1);
	position: absolute;
	top: -100%;
	width: 100%;
	pointer-events: none;
}
.card_dropdown_parent.active {
	top: 0px;
}
.card_dropdown {
	max-height: calc(100% - 96px);
	position: relative;
	width: 100%;
	top: 96px;
	z-index: 1;
	background: var(--bg-darker, #1d1d1d);
	pointer-events: auto;
	transition: background 0.2s;
}
.card_dropdown scroll {
	max-height: calc(100% - 96px);
	height: max-content;
}
.dropdown_card {
	padding: 35px 30px;
	border-bottom: 3px solid var(--line-darker, #2a2a2a);
	cursor: pointer; 
	transition: background 0.2s, border 0.2s;
}
.dropdown_card .card_preview {
	width: 61px;
	height: 38px;
	display: inline-block;
}
.dropdown_card .content {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 85px);
	margin: 0 0 0 20px;
}
.dropdown_card .nickname {
	display: block;
	font-weight: 650;
	margin: 0 0 3px 0;
}
.dropdown_card h3 div {
	margin-right: 7px;
}
.dropdown_card h3.action {
	transition: color 0.2s;
	color: var(--main-light, #8a8a8a);
}
.dropdown_card.buy {
	padding: 35px;
}
.dropdown_card:nth-last-child(1) {
	border-bottom: none;
}


.dropdown_card[data-orient='vertical'] .card_preview {
	width: 38px;
	height: 61px;
	margin: -10px 11px;
}


@media only screen and (max-width: 720px) {
		card .card_preview {
				top: calc(20.5185%);
		}
		card .loading_message {
				border-radius: 30px;
		}
		.card_preview_backdrop_container {
				border-radius: 30px;
		}
}
@media (hover:hover) {
	.dropdown_card:hover {
		background: var(--line-darker, #2a2a2a);
	}
}
@media (hover:none) {
	.dropdown_card:active {
		background: var(--line-darker, #2a2a2a);
	}
}


/* CARD SELECTION */

.card_selection {
	padding: 40px 35px 35px;
	transition: background 0.2s, border 0.2s;
	cursor: pointer;
	box-sizing: border-box;
	border-bottom: 3px solid var(--main-line, #3a3a3a);
	height: 96px;
	position: relative;
	z-index: 2;
	background: var(--main-bg, #242424);
}
.card_selection .dvcn-godown {
	position: absolute;
	top: 40px;
	right: 35px;
	color: white;
}
@media (hover:hover) {
	.card_selection:hover {
		background: var(--main-line, #3a3a3a);
	}
}
@media (hover:none) {
	.card_selection:active {
		background: var(--main-line, #3a3a3a);
	}
}



/* CARD SHARE */

.card_share {
	position: absolute;
	height: calc(100% - 96px);
	top: 96px;
	width: 100%;
}
.card_share .share {
	box-sizing: border-box;
	transition: border 0.2s; 
}

.card_share .share.qr {
	height: 60%;
	border-bottom: 3px solid var(--main-line, #3a3a3a);
}
.card_share .share.qr #qrcode.qr_holder {
	display: none;
}
.card_share .qr_final canvas {
	height: 100%;
	width: 100%;
	object-fit: contain;
	box-sizing: border-box;
	padding: 2vw;;
	object-position: center;
}

.card_share .share.design {
	width: 50%;
	height: 40%;
	position: absolute;
	top: 60%;
	border-right: 3px solid var(--main-line, #3a3a3a);
}
.card_share .share.link {
	width: 50%;
	height: 40%;
	position: absolute;
	top: 60%;
	left: 50%;
	padding: 2vw;
}
.share.design canvas {
	width: 100%;
	max-height: calc(100% - 6vw);
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: 2vw 2vw 0 2vw;
	filter: drop-shadow(0 20px 24px #00000050);
}
.share.design h3.design_title {
	padding: 2vw;
	font-weight: 530;
	color: var(--main-light, #8a8a8a);
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}
.card_share .share.link h5 {
	word-break: break-word;
	line-height: 1.3em;
	font-weight: 530;
}
.card_share .share.link h1 {
	word-break: break-word;
	margin-top: 10px;
	font-size: 3.5vw;
	line-height: 1em;
	color: var(--main-light, #8a8a8a);
}


/* FEATURED ACTION */

.featured_action {
	background: #fff;
	text-align: center;
	padding: 50px 0 15px;
	box-sizing: border-box;
	width: 100%;
}
.featured_action .main_button {
	height: 180px;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
}
.main_button button {
	height: 100%;
	vertical-align: top;
	border-radius: 65px;
	border: 3px solid black;
	display: inline-block;
	box-sizing: border-box;
	background: black;
	padding: 0;
	position: relative;
	text-align: left;
	cursor: pointer;
	transition: transform 0.2s cubic-bezier(.17,.67,.29,2.71), background 0.2s;
}
.main_button button.active {
	background: white;
}

@media (hover:hover) {
	.main_button button:hover {
		transform: scale(1.03);
	}
	.main_button button:active {
		transform: scale(1);
	}
}
@media (hover:none) {
	.main_button button:active {
		transform: scale(1.03);
	}
}


.main_button [data-name='main_action_toggle'] {
	width: calc(100% - 215px);
	margin-right: 15px;
}
[data-name='main_action_toggle'] .toggle_message {
	padding: 25px;
}

.toggle_message h1, .toggle_message h3 {
	color: white;
	transition: color 0.2s;
}
button.active .toggle_message h1, button.active .toggle_message h3 {
	color: black;	
}


.toggle_message h1::after {
	content: 'Off';
}
.active .toggle_message h1::after {
	content: 'On';
}
.toggle_message h1 div {
	font-size: 24px;
	vertical-align: middle;
	margin: 0px 15px 6px 0;
}
.active .toggle_message h1 .dvcn-off::before {
	content: "\e95a";
}

[data-name='main_action_toggle'] .action {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 150px;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
[data-name='main_action_toggle'] .action .back {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	border-radius: 0 62px 62px 0;
	opacity: 0.2;
}
[data-name='main_action_toggle'] .action .content {
	position: relative;
	z-index: 1;
}
[data-name='main_action_toggle'] .action h3.title {
	font-weight: 530;
	display: block;
}
[data-name='main_action_toggle'] .action h3.title div {
	margin-right: 5px;
}


[data-name='main_action_toggle'] {
	--action-content: 'No action';
	--action-color: black;
	--action-icon: "\e958";
}
[data-name='main_action_toggle'][data-action='hydrin'] {
	--action-content: 'Hydrin';
	--action-color: #8000FF;
	--action-icon: "\e93d";
}
[data-name='main_action_toggle'][data-action='file'] {
	--action-content: 'File';
	--action-color: #EC5F51;
	--action-icon: "\e92e";
}
[data-name='main_action_toggle'][data-action='contact'] {
	--action-content: 'Contact';
	--action-color: #25A0EF;
	--action-icon: "\e967";
}
[data-name='main_action_toggle'][data-action='link'] {
	--action-content: 'Link';
	--action-color: #6dae00;
	--action-icon: "\e947";
}
[data-name='main_action_toggle'] .action h3.title::after {
	content: var(--action-content, 'No action');
	color: var(--action-color, 'black');
}
[data-name='main_action_toggle'] .action h3.title .dvcn-nope::before {
	color: var(--action-color, 'black'); 
	content: var(--action-icon, '\e958');
}
[data-name='main_action_toggle'] .action .back { 
	background: var(--action-color, 'black');
}



[data-name='main_action_toggle'] .action h3.desc {
	font-weight: 350;
	display: block;
	color: white;
	transition: color 0.2s;
}
[data-name='main_action_toggle'].active .action h3.desc {
	color: black;
}

.main_button [data-name='tap_info_toggle'] {
	width: 200px;
	padding: 25px;
}
.main_button [data-name='tap_info_toggle'] h3 {
	color: white;
	transition: color 0.2s;
}
.main_button [data-name='tap_info_toggle'].active h3 {
	color: black;
}
.main_button [data-name='tap_info_toggle'] .toggle_message {
	margin-top: 10px;
}



/* EXTRA */

.extra {
	padding: 35px 35px 38px;
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
}
.extra.input {
	cursor: default;
	padding: 0;
	transition: background 0.2s;
}
.extra::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transition: background 0.2s;
	height: 3px;
	background: #3a3a3a;
}
.extra.input input, .extra.input textarea {
	width: 100%;
	padding: 35px;
	box-sizing: border-box;
	font-family: rubik,sans-serif;
	font-size: 20px;
	line-height: 21px;
	display: inline-block;
	letter-spacing: -.5px;
	font-weight: 450;
	color: white;
	-webkit-font-smoothing: antialiased;
	background: 0 0;
	border: none;
	outline: none;
	resize: none;
	transtion: color 0.2s;
}
.extra.input textarea {
	height: 95px;
}
.rounded_panel .extra.input {
	margin: 0 5px 5px;
	background: var(--darker,#242424);
	border-radius: 10px;
}
.extra.input.with_button input {
	width: calc(100% - 70px);
	vertical-align: top;
}
.extra.input.with_button button {
	background: none;
	width: 70px;
	height: 95px;
	vertical-align: top;
	border: none;
	outline: none;
	border-left: #3a3a3a;
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
}
@media (hover:hover) {
	.extra.input.with_button button:hover {
		background: #3a3a3a;
	}
}
@media (hover:none) {
	.extra.input.with_button button:active {
		background: #3a3a3a;
	}
}


/* EXTRA BLOCK */
.extra_block {
	margin: 0 5px 5px;
}
.rounded_panel .extra_block .extra {
	margin: 0;
	border-radius: 0;
}
.rounded_panel .extra_block .extra:nth-child(1) {
	border-radius: 10px 10px 0 0;
}
.rounded_panel .extra_block .extra:nth-last-child(1) {
	border-radius: 0 0 10px 10px;
}
.rounded_panel .extra_block .extra.input::before {
	display: block;
	background: var(--darker-stroke,#3a3a3a);
}
.rounded_panel .extra_block .extra.input:nth-last-child(1)::before {
	display: none;
}


/* EXTRA WITH DROPDOWN */

.extra.input.with_dropdown input {
	width: calc(100% - 100px);
	vertical-align: top;
}
.extra.input.with_dropdown .dropdown {
	width: 97px;
	border-left: 3px solid var(--darker-stroke, #3a3a3a);
	display: inline-block;
	height: 91px;
	background: red;
	cursor: pointer;
	vertical-align: top;
	text-align: center;
	padding: 30px 0px;
	box-sizing: border-box;
}

.extra.input.with_dropdown .dropdown [class*="dvcn-"] {
	font-size: 26px;
}
.extra.input.with_dropdown .dropdown [class*="dvcn-"]:nth-child(1) {
	margin-right: 25px;
}


/* ROUNDED PANEL */

.rounded_panel {
	border-radius: 70px;
	background: black;
	position: relative;
} 
scroll .rounded_panel {
	margin-bottom: 15px;
}
.rounded_panel .extra.input::before {
	display: none;
}
.rounded_panel .extra.input input {
	color: var(--lightest, white);
}
.rounded_panel .extra.input input::placeholder {
	color: var(--placeholder, #3a3a3a);
}


/* TABS */

.rounded_panel .tabs {
	margin: 0;
	border-bottom: 3px solid #fff;
}
.rounded_panel .tabs button {
	width: 50%;
	border: none;
	text-align: left;
	padding: 40px 35px;
	background: 0 0;
	transition: background .2s;
	cursor: pointer;
}
.rounded_panel .tabs button.active {
	background: #fff;
	cursor: default;
}
.rounded_panel .tabs button h3 {
	transition: color 0.2s;
}
.tabs button h3 {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rounded_panel .tabs button.active h3 {
	color: #000;
}
.rounded_panel .tabs button:nth-child(1) {
	border-top-left-radius: 70px;
}
.rounded_panel .tabs button:nth-child(2) {
	border-top-right-radius: 70px;
}



/* POP PANELS */

.pop_panel_container {
		position: fixed;
		bottom: 0;
		width: 50%;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 1001;
		border-radius: 0 0 80px 80px;
}
.pop_panel {
		box-sizing: border-box;
		background: black;
		border-radius: 70px;
		margin: 15px;
		position: relative;
		transition: margin 0.5s;
		overflow: hidden;

}
.pop_panel .scroll_section {
		padding: 105px 35px 125px 35px;
		box-sizing: border-box;
		overflow-y: scroll;
		overflow-x: hidden;
		scrollbar-width: none;
		position: relative;
		scroll-behavior: smooth;
		border-radius: 70px;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
}

.pop_panel .scroll_section::-webkit-scrollbar {
		display: none;
}
.pop_panel_container.right {
		left: unset;
    right: 0;
}
.pop_panel_container .complete_button {
		display: none;
}
.pop_panel_container.bottom .incomplete_button {
		display: none;
}
.pop_panel_container.bottom .complete_button {
		display: inline-block;
}
.pop_panel_container.bottom.grayed .complete_button {
		cursor: default;
}
.pop_panel_container.bottom.grayed .complete_button .icon {
		opacity: 0.4;
		filter: none;
}
.pop_panel_container.bottom.grayed .complete_button:hover {
		background: rgba(255,255,255,0.2);
}
.complete_button .icon {
		background-image: url(https://divecons.heydive.com/save.svg);
}
.pop_panel_container .button_gallery .button {
		animation: button_scale 0.2s ease-out;
}
.pop_panel h1 {
		margin-bottom: 5px;
}
@keyframes button_scale {
		0% {
				transform: scale(0.5);
		} 100% {
				transform: scale(1);
		}
}

.pop_panel_overlay {
		height: 100%;
		width: 50%;
		border-radius: 80px;
		top: 0;
		right: 0;
		background: #2b2b2b;
		position: absolute;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition: visibility 0.2s, opacity 0.2s;
}
.pop_panel_overlay.active {
		opacity: 1;
		visibility: visible;
}
.pop_panel_overlay .bubble {
		width: 200px;
		height: 200px;
		position: absolute;
		top: -50px;
		left: -50px;
		filter: blur(70px);
		background: white;
		opacity: 0.5;
		animation: bubble_movement 2s infinite;
		border-radius: 1000px;
}
.pop_panel_overlay .bubble:nth-child(2) {
		top: 300px;
		left: unset;
		right: 40px;
		width: 300px;
		height: 300px;
		border-radius: 1000px;
		animation-delay: -1s;
}
.pop_panel_overlay .bubble:nth-child(3) {
		top: unset;
		bottom: 150px;
		left: -20px;
		width: 300px;
		height: 200px;
		border-radius: 1000px;
		animation-delay: -1.5s;
		animation-direction: alternate;
}
@keyframes bubble_movement {
		0% {
				transform: translate(0px, 0px);
		} 50% {
				transform: translate(10px, 30px);
		} 70% {
				transform: translate(15px, 20px);
		} 100% {
				transform: translate(0px, 0px);
		}
}

.pop_panel_overlay.hydrin_panel_overlay {
		background: #210030;
}
.pop_panel_overlay.hydrin_panel_overlay .bubble {
		background: #B10FFC;
}
.pop_panel_overlay.link_panel_overlay {
		background: #272727;
}
.pop_panel_overlay.link_panel_overlay .bubble {
		background: black;
}
.pop_panel_overlay.file_panel_overlay {
		background: #2F1310;
}
.pop_panel_overlay.file_panel_overlay .bubble {
		background: #FF5248;
}
@media only screen and (min-width: 2130px) {
		.pop_panel_container {
				width: 700px;
				bottom: 40px;
		}
		.pop_panel_container.right {
				right: calc(50% - 350px);
		}
		.pop_panel_overlay {
				width: 700px;
				height: calc(100% - 50px);
				top: 25px;
				right: calc(50% - 350px);
		}
		.open_account {
				display: none;
		}
}
@media only screen and (max-width: 1130px) {
		.pop_panel_container {
		    width: 100%;
		}
		.pop_panel_overlay {
				width: 100%;
				border-radius: 40px;
				z-index: 1001;
		}
}
@media only screen and (max-width: 720px) {
		.pop_panel {
		    padding: 0;
		    background: black;
		    border-radius: 35px;
		    margin: 5px;
		}
		.pop_panel_container {
				border-radius: 0 0 40px 40px;
		}
		.pop_panel .scroll_section {
				padding: 105px 25px 90px 25px;
				border-radius: 35px;
		}
}

/* PANEL */

.panel {
    height: 100%;
    width: 50%;
    position: fixed;
    top: 0;
    background: #1c1c1c;
    border-radius: 80px;
    box-sizing: border-box;
    padding: 50px;
    display: none;
		overflow: hidden;
		right: 0;
		z-index: 1;
}
@keyframes panel_open {
		0% {
				transform: scale(0.95);
		}
		100% {
				transform: scale(1);
		}
}
.panel.active {
    display: block;
		animation: panel_open 0.2s;
}
.panel .scroll_section {
		height: 100%;
		overflow-y: scroll;
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 125px 5px 15px 15px;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		border-radius: 70px;
}
.panel.left {
		right: unset;
		left: 0;
		z-index: 1001;
}
@media only screen and (min-width: 2130px) {
		.panel {
				width: 700px;
				height: calc(100% - 50px);
				top: 25px;

		}
		.panel.left {
				left: calc(50% - 1050px);
		}
}
@media only screen and (max-width: 1130px) {
		.panel {
				width: 100%;
		}
}
@media only screen and (max-width: 720px) {
		.panel {
				border-radius: 40px;
		}
		.panel .scroll_section {
				border-radius: 40px;
		}
}

/* USER PANEL */

.user_panel .scroll_section {
		padding: 140px 5px 10px 15px;
}
.mini_tile.hydrin_tile {
		background: rgba(183, 0, 255, 0.2);
}
.mini_tile.hydrin_tile h3 {
		color: #b700ff;
}

.mini_tile.discord_tile {
		background: rgba(88, 105, 233, 0.2);
}
.mini_tile.discord_tile h3 {
		color: #5869E9;
}


@media (hover: hover) {
		.mini_tile.hydrin_tile:hover {
				background: rgba(183, 0, 255, 0.3);
		}
		.mini_tile.discord_tile:hover {
				background: rgba(88, 105, 233, 0.3);
		}
}
@media (hover: none) {
		.mini_tile.hydrin_tile:active {
				background: rgba(183, 0, 255, 0.3);
		}
		.mini_tile.discord_tile:active {
				background: rgba(88, 105, 233, 0.3);
		}
}
.user_profile .pfp {
		height: 75px;
		width: 75px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 1000px;
		position: absolute;
		top: 35px;
		left: 35px;
}
.user_profile .pfp.pfp_glow {
		filter: saturate(3) blur(10px);
		top: 40px;
}
.user_profile .profile_info {
		position: absolute;
		top: 47px;
		left: 130px;
}
.user_profile .profile_info h1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: calc(100%);
}
.user_panel .user_panel_glow {
	filter: blur(33px);
	top: -10px;
	left: -10px;
	height: 200px;
	width: 100%;
	position: absolute;
	opacity: 0.5;
}
.user_panel .user_panel_desk_bg {
		display: none;
		height: calc(100% - 50px);
		width: 700px;
		opacity: 0.15;
		position: fixed;
		top: 25px;
		border-radius: 80px;
		right: calc(50% - 1050px);
}
form {
		all: unset;
}
.logout_button {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		border-radius: 70px;
		border: none;
		background: none;
		cursor: pointer;
		opacity: 0;

}
.user_panel .complete_button {
		display: inline-block;
}
.user_panel .pop_panel {
		z-index: 3;
}
@media only screen and (min-width: 2130px) {
		.pop_panel_container.right.user_panel {
				bottom: unset !important;
				top: 25px;
				width: 700px;
				border-radius: 80px;
				right: calc(50% - 1050px);
				height: calc(100% - 50px);
				overflow-y: scroll;
				scrollbar-width: none;
		}
		.pop_panel_container.right.user_panel::-webkit-scrollbar {
				display: none;
		}
		.user_panel .pop_panel {
				position: relative;
				margin-bottom: unset !important;
		}
		.user_panel .scroll_section {
				position: relative;
				display: block;
				height: auto;
		}
		.user_panel .account_panel {
				position: relative;
				padding: 0;
				width: 670px;
    		right: 0;
		    margin: 15px;
				display: block;
				height: auto;
				animation: none;
				transition: none;
		}
		.user_panel .account_panel .scroll_section {
				padding: 15px 5px 15px 15px;
		}
		.user_panel_overlay {
				display: none;
		}
		.user_panel .user_panel_desk_bg {
				display: block;
		}
}
@media only screen and (max-width: 720px) {
		.mini_tile {
				margin-bottom: 5px;
		}
		.user_panel .scroll_section {
		    padding: 140px 0px 0px 5px;
		}
		.user_panel .account_panel .scroll_section {
				padding: 85px 0px 0px 5px;
		}
		.user_profile .profile_info {
		    position: absolute;
		    top: 47px;
		    left: 115px;
		    width: calc(100% - 200px);
		}
		.user_profile .pfp {
		    left: 20px;
		}
}



/* MAIN BUTTONS */

.button {
    padding: 10px 20px;
    border-radius: 100px;
    border: none;
    outline: none;
    background: rgba(255,255,255,0.2);
    transition: padding 0.2s, background 0.2s;
    cursor: pointer;
    margin-right: 5px;
}
.button .icon {
    transition: filter 0.2s;
}
@media (hover: hover) {
	button.singular:hover {
	    background: rgba(255,255,255,1);
	}
	button.singular:hover div {
		color: black;
	}
}
@media (hover: none) {
	button.singular:active {
			background: rgba(255,255,255,1);
	}
	button.singular:active div {
		color: black;
	}
}

/* SINGULAR BUTTONS */


.button.singular {
    height: 60px;
    width: 60px;
    padding: 5px 5px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    margin: 0 5px 0 0px;
}
.button_gallery {
		padding: 10px 5px 10px 10px;
		border-radius: 80px;
		background: black;
		position: absolute;
		right: 30px;
		bottom: 30px;
		z-index: 1;
}
.button_gallery button {
	vertical-align: top;
	margin-right: 10px;
}
.button.singular div {
	font-size: 26px;
	color: #fff;
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 17px;
	left: 0;
	transition: color 0.2s;
}
button.singular .icon {
	position: absolute;
	height: 52px;
	width: 52px;
	background-size: cover;
	border-radius: 30px;
	background-position: center;
	margin: 0;
	transition: color .2s;
	top: 4px;
	left: 4px;
}






/* POP PANEL MARQUEE */

.pop_panel .marquee {
		width: calc(100% + 70px);
		margin: -105px -35px 30px -35px;
		height: 300px;
		background-image: url(https://divecons.heydive.com/tap/file_animated.gif);
		background-size: 250px 250px;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		z-index: 1;
}
.pop_panel .gradient {
		height: 150px;
		width: 100%;
		position: absolute;
		top: 150px;
		left: 0;
		opacity: 0.5;
		-webkit-mask-image: linear-gradient(to bottom, transparent, black);
  	mask-image: linear-gradient(to bottom, transparent, black);
}

.link_panel .marquee {
		background-image: url(img/link_animated.gif);
}
.link_panel .gradient {
		background-color: #666666;
		animation: none;
}
.hydrin_panel .marquee {
		background-image: url(img/hydrin_animated.gif);
}
.hydrin_panel .gradient {
		background-color: #731eb0;
		animation: none;
}



/* FILE UPLOAD */

.file_panel .gradient {
		background: #FF5248;
}
.file_uploader_container {
    position: relative;
		margin: 30px -20px 0 -20px;
    width: calc(100% + 40px);
}
.file_uploader {
    width: 100%;
    height: 380px;
    border-radius: 55px;
    outline: none;
    padding: 40px 35px;
    background: #242424;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
		box-sizing: border-box;
}
.upload_message {
    width: 100px;
    height: 100px;
    border: 4px solid white;
    padding: 25px 30px 35px 30px;
    text-align: center;
    border-radius: 30px;
    opacity: 0.5;
    animation: action_lightup 1s infinite;
}
.file_uploader input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 70px;
    opacity: 0;
    cursor: pointer;
}
.upload_message h3 {
    font-weight: 650;
		line-height: 27px;
}
.upload_file_viewer .upload_image {
		border-radius: 55px;
		display: none;
		width: 100%;
}
.upload_file_viewer .upload_video {
		display: none;
		border-radius: 55px;
		width: 100%;
}
.upload_file_viewer .upload_video {
		display: none;
		border-radius: 55px;
		width: 100%;
}
.upload_file_viewer .upload_audio_container {
		width: calc(100%);
		display: none;
		border-radius: 55px;
		margin: 0;
		outline: none;
		background: white;
		padding: 28px;
		box-sizing: border-box;
}
.upload_file_viewer .upload_audio_container audio {
    width: 100%;
    outline: none;
}
.upload_file_viewer .upload_font {
		width: calc(100%);
		display: none;
		border-radius: 70px;
		margin: 15px -35px 0 0px;
		outline: none;
		background: #242424;
		padding: 40px 35px;
		font-size: 20px;
		color: white;
		box-sizing: border-box;
		overflow-wrap: break-word;
}
.upload_file_viewer .upload_text {
    width: calc(100%);
    border-radius: 55px;
    outline: none;
    background: #242424;
    padding: 40px 35px;
		box-sizing: border-box;
    font-size: 20px;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: scroll;
    min-height: 56px;
    scrollbar-width: none;
		display: none;
}
.upload_file_viewer .upload_text::-webkit-scrollbar {
		display: none;
}
.upload_file_viewer.image .upload_image {
		display: unset;
}
.upload_file_viewer.video .upload_video {
		display: unset;
}
.upload_file_viewer.audio .upload_audio_container {
		display: block;
}
.upload_file_viewer.text .upload_text {
		display: block;
}
.upload_file_viewer.font .upload_font {
		display: block;
}
.upload_file_viewer.file_here .file_uploader {
		display: none;
}
.replace_button {
		display: none;
}
.replace_button.active {
		display: inline-block;
}
.file_uploader.card_info_preview_screen {
		background: rgba(255,255,255,0.1);
		width: calc(100% + 40px);
		border-radius: 70px;
		position: absolute;
		height: calc(100% - 30px);
		top: 15px;
		left: 15px;
		width: calc(100% - 30px);
		cursor: default;
}
.file_upload_info {
		width: calc(100%);
		border-radius: 70px;
		margin: 15px 0px 0 0px;
		outline: none;
		background: #242424;
		padding: 35px;
		box-sizing: border-box;
		display: none;
}
.file_upload_title {
		display: block;
}
.file_upload_title .icon {
		background-image: url(https://divecons.heydive.com/file.svg);
}
.file_upload_size {
		display: block;
}
.file_upload_size .icon {
		background-image: url(https://divecons.heydive.com/size.svg);
}
.upload_file_viewer.file_here .file_upload_info  {
    display: block;
}
.upload_anything_content.not_compatible .file_upload_info {
    margin-top: -10px;
}
.upload_file_viewer .compatibility_message::after {
		content: "This file can be previewed before downloading";
}
.upload_file_viewer .compatibility_message .icon {
		background-image: url(https://divecons.heydive.com/check.svg);
}
.upload_file_viewer.not_compatible .compatibility_message::after {
		content: "This file can't be previewed before downloading";
}
.upload_file_viewer.not_compatible .compatibility_message .icon {
		background-image: url(https://divecons.heydive.com/alert.svg);
}
.file_upload_info h3 {
    margin-top: 3px;
}
.file_upload_info h3:nth-child(1) {
		margin: 0;
}
.upload_file_viewer.image .file_upload_title {
		color: #876FF6;
}
.upload_file_viewer.image .file_upload_title .icon {
		background-image: url(https://divecons.heydive.com/image_color.svg);
}
.upload_file_viewer.video .file_upload_title {
		color: #FF5248;
}
.upload_file_viewer.video .file_upload_title .icon {
		background-image: url(https://divecons.heydive.com/video_color.svg);
}
.upload_file_viewer.audio .file_upload_title {
		color: #FF7135;
}
.upload_file_viewer.audio .file_upload_title .icon {
		background-image: url(https://divecons.heydive.com/audio_color.svg);
}
.upload_file_viewer.text .file_upload_title {
		color: #25A0EF;
}
.upload_file_viewer.text .file_upload_title .icon {
		background-image: url(https://divecons.heydive.com/text_color.svg);
}
.upload_file_viewer.font .file_upload_title {
		color: #86D500;
}
.upload_file_viewer.font .file_upload_title .icon {
		background-image: url(https://divecons.heydive.com/font_color.svg);
}

@media only screen and (max-width: 720px) {
		.file_uploader {
				border-radius: 30px;
		}
		.file_input {
				border-radius: 30px;
		}
		.file_upload_info {
				border-radius: 30px;
				padding: 30px 25px;
		}
		.upload_file_viewer .upload_video {
				border-radius: 30px;
		}
		.upload_file_viewer .upload_image  {
				border-radius: 30px;
		}
		.upload_file_viewer .upload_audio_container {
				border-radius: 30px;
				padding: 5px;
		}
		.upload_file_viewer .upload_text {
				border-radius: 30px;
		}
		.upload_file_viewer .upload_font {
				border-radius: 30px;
		}
		.file_upload_info {
				margin-top: 5px;
		}
}

/* TOOLTIPS */

.tooltip {
		position: fixed;
		color: white;
		visibility: hidden;
		padding: 1px 8px;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
		background: rgba(255,255,255, 0.7);
		text-align: right;
		z-index: 1000;
		border-radius: 10px;
		opacity: 0;
		transition: visibility 0.1s, opacity 0.1s;
		white-space: nowrap;
}
.tooltip h5 {
		color: black;
}

@media (hover: hover) {
		.button:hover .tooltip {
				visibility: visible;
				opacity: 1;
		}
		card:hover .tooltip {
				visibility: visible;
				opacity: 1;
		}
}
@media (hover: none) {
		button:active .tooltip {
				visibility: visible;
				opacity: 1;
		}
		card:active .tooltip {
				visibility: visible;
				opacity: 1;
		}
}
@media only screen and (max-width: 1130px) {
		.tooltip {
				bottom: 5px !important;
				top: unset !important;
				left: 5px !important;
				width: calc(100% - 30px) !important;
				text-align: center;
				padding: 10px;
				border-radius: 30px;
		}
}


/* SPEED MODE */

.speed_panel .gradient {
		background: #25A0EF;
}
.speed_panel .marquee {
		background-image: url(https://divecons.heydive.com/tap/speed_mode.gif);
		background-size: 400px 250px;
}
.speed_panel_overlay {
		background: #032840;
}
.speed_panel_overlay .bubble {
		background: #4bb8ff;
}
.speed_panel .scroll_section {
		padding: 105px 35px 55px 35px;
}
@media only screen and (max-width: 720px) {
		.speed_panel .scroll_section {
				padding: 105px 25px 45px 25px;
		}
}


/* HYDRIN LINKS */

.hydrin_preview {
    border-radius: 70px;
}
.hydrin_preview iframe {
	border-radius: 70px;
}
[data-name="hydrin_preview_panel"] .inner_preview {
	display: block;
	opacity: 0;
}
[data-name="hydrin_preview_panel"].active .inner_preview {
	opacity: 1;
}
[data-name="hydrin_preview_panel"] .starter_text {
	width: 100%;
	margin: 0;
	padding: 0 35px;
	align-items: center;
	display: flex;
	height: 100%;
	position: absolute;
	border-radius: 70px;
	background: var(--stroke, #3a3a3a);
	box-sizing: border-box;
	transition: opacity 0.2s;
}
[data-name="hydrin_preview_panel"].active .starter_text {
	opacity: 0;
}
[data-name="add_hydrin_input"]::placeholder {
	color: var(--lightest, white);
}
.hydrin_preview .starter_text::after {
	content: 'Enter DOT to view preview';
}
.hydrin_preview .starter_text.loading::after {
	content: 'Loading';
}
.hydrin_panel .input_block {
	margin: 10px 0 30px;
}
.hydrin_preview[data-name="hydrin_preview_panel"] {
	min-height: 180px;
	position: relative;
}
.inner_preview iframe {
	width: 100%;
    border: none;
	height: 180px;
	pointer-events: none;
	transition: height 0.5s;
}


@media only screen and (max-width: 720px) {
		.hydrin_preview {
				margin: 10px -25px -25px -25px;
		}
		.hydrin_preview_background {
				padding: 5px;
				box-sizing: border-box;
				border-radius: 35px;
		}
		.hydrin_preview_foreground {
				border-radius: 30px;
				padding: 40px 25px 30px 25px;
		}
}



/* ADD LINK */

.button_collection {
	padding: 0 5px 5px;
}

h3.hydrin_link.select_link {
	border-bottom: 3px solid #3a3a3a;
	cursor: pointer;
	padding: 32px 20px;
	display: block;
	box-sizing: border-box;
	transition: background 0.2s;
	height: 95px;
	background: #242424;
}
h3.hydrin_link.select_link.active {
	background: white;
	color: black;
	cursor: default;
	pointer-events: none;
}
h3.hydrin_link.select_link:nth-child(1) {
	border-radius: 10px 10px 0 0;
}
h3.hydrin_link.select_link:nth-last-child(1) {
	border-radius: 0 0 65px 65px;
	border: none;
}

[data-name="main_link_input"]::placeholder {
	color: var(--lighter,#808080);
}
.rounded_panel [data-name="main_link_input_container"] textarea {
	color: var(--lighter,white);	
}
[data-name="main_link_input_container"].active textarea::placeholder {
	color: var(--darker,#242424);
}
[data-name='action_panel'] .rounded_panel [data-name="main_link_input_container"] {
	border-radius: 65px 65px 10px 10px;
}
[data-name='action_panel'][data-action='link'] .rounded_panel {
	padding-top: 5px;
} 
.rounded_panel [data-name="main_link_input_container"].active {
	background: var(--lightest);
}
[data-name="main_link_input_container"].active textarea {
	color: black;
}


/* MAIN NAV BAR */

.button.singular.main_user_button .icon {
	position: absolute;
	height: 52px;
	width: 52px;
	background-size: cover;
	border-radius: 30px;
	background-position: center;
	margin: 0;
	transition: color .2s;
	top: 4px;
	left: 4px;
}
@media (hover: hover) {
		.button.singular.main_user_button:hover .icon:nth-child(2) {
				filter: drop-shadow(0 0 10px rgba(255,255,255,0));
		}
}
@media (hover: none) {
		.button.singular.main_user_button:active .icon {
				filter: none;
		}
}
@media only screen and (max-width: 720px) {
	.button_gallery {
		right: 5px;
		bottom: 5px;
		border-radius: 50px 50px 37px 50px;
	}
}



/* PROGRESS */

svg.prog {
	width: 26px;
	height: 26px;
	animation: none;
	display: none;
}
.prog svg.prog {
	display: unset;
	animation: prog_main 1.7s infinite cubic-bezier(.8,-.3,.05,1);
}
svg.prog circle {
	transition: stroke-dashoffset .5s;
	stroke-width: 7px;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: center;
	fill: transparent;
	stroke-dasharray: 135;
	r: 21;
	cx: 25;
	cy: 25;
}
svg.prog circle.base {
	stroke: rgba(0,0,0,.2);
	stroke-dashoffset: 135;
}
svg.prog circle.perc {
	stroke: #000;
	stroke-dashoffset: 135;
	transform: scaleY(-1) scaleX(-1);
	stroke-dashoffset: 135;
}
svg.prog rect {
	width: 10;
	height: 10;
	fill: #fff;
	x: 20;
	y: 20;
}
svg.prog path {
	fill: transparent;
	stroke: #000;
	stroke-linejoin: round;
	stroke-width: 7px;
	stroke-linecap: round;
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
}
svg.prog path.check {
	d: path("M17 27 L23 32 L33 19");
}
svg.prog.complete path.check {
	animation: complete_check .3s;
	stroke-dashoffset: 175;
}
@keyframes complete_check {
	0% {
		stroke-dashoffset: 200;
	} 100% {
		stroke-dashoffset: 175;
	}
}
svg.prog path.x {
	d: path("M17 25 L33 25");
}
svg.prog.failed path.x {
	animation: complete_x .3s;
	stroke-dashoffset: 183;
}
@keyframes complete_X {
	0% {
		stroke-dashoffset: 200;
	} 100% {
		stroke-dashoffset: 183;
	}
}
svg.prog.complete, svg.prog.failed {
	animation: prog_finish .3s;
}
svg.prog.complete rect, svg.prog.failed rect {
	fill: transparent;
}
@keyframes prog_finish {
	0% {
		transform: scale(1);
	} 50% {
		transform: scale(1.1);
	} 100% {
		transform: scale(1);
	}
}


.button.singular svg.prog {
	position: absolute;
	top: 17px;
	left: 17px;
}
.button.singular svg.prog circle {
	stroke: #fff;
}
.button.singular svg.prog path {
	stroke: #fff;
}
.button.singular.prog div {
	display: none;
}
.button.singular.prog {
	background: rgba(255,255,255,.1);
	pointer-events: none;
}





/* TABS */

.tab {
    height: 125px;
    width: 65px;
    cursor: pointer;
    margin: 0;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    transition: background 0.2s;
}
.tab:nth-child(2) {
    border-radius: 75px 10px 10px 10px;
    padding: 0 20px;
    box-sizing: unset;
}
.tab_highlight {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: white;
    height: 90px;
    width: 74px;
    filter: blur(30px);
		opacity: 0.4;
    transition: background 0.2s;
}
.tab .tab_indicator {
    height: 132px;
    padding: 55px 5px;
    box-sizing: border-box;
    display: inline-block;
    transition: border 0.2s;
    border-bottom: 2px solid rgba(255,255,255,0);
}
.tab.active .tab_indicator {
		border-bottom: 2px solid rgba(255,255,255,1);
}
.tab .tab_indicator .icon {
    background-image: url(img/edit.svg);
    margin: 0;
    height: 24px;
    width: 24px;
    background-size: 22px 22px;
}

.tab_bar {
    height: 140px;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
@media (hover: hover) {
		.tab:hover {
		    background: rgba(255,255,255,0.1);
		}
}
@media (hover: none) {
		.tab:active {
				background: rgba(255,255,255,0.1);
		}
}

/* INPUTS */


.input_section {
		display: inline-block;
		padding: 0 0 0 49px;
		border: 3px solid #242424;
		width: calc(100%);
		margin-top: -3px;
		box-sizing: border-box;

		position: relative;
}
.input_section_icon.icon {
		position: absolute;
		top: 11px;
		left: 16px;
}
.input_section input {
		background: black;
		padding: 10px 20px;
		border: solid #242424;
		border-left-width: 3px;
		border-top-width: 2px;
		border-bottom-width: 1px;
		border-right: none;
		font-family: 'Rubik', sans-serif;
		font-size: 20px;
		line-height: 21px;
		display: inline-block;
		letter-spacing: -0.5px;
		font-weight: 450;
		color: white;
		-webkit-font-smoothing: antialiased;
		width: calc(100%);
		outline: none;
		transition: border-color 0.2s;
		position: absolute;
		top: 0;
		left: 0;
		text-overflow: ellipsis;
}
.input_section h3.input {
		background: black;
		padding: 10px 20px;
		border: solid #242424;
		border-left-width: 3px;
		border-top-width: 2px;
		border-bottom-width: 1px;
		border-right: none;
		letter-spacing: -0.5px;
		font-weight: 450;
		color: white;
		-webkit-font-smoothing: antialiased;
		width: calc(100% - 52px);
		outline: none;
		transition: border-color 0.2s;
		position: absolute;
		top: -2px;
		left: 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
}
.input_section .icon_button {
		width: 50px;
		position: absolute;
		top: 0;
		left: 0;
		height: 41px;
		display: block;
		background: #242424;
		opacity: 0;
		transition: opacity 0.2s;
}
.input_section .icon_button:hover {
		opacity: 0.3;
}
.input_section input::placeholder {
		color: rgba(255,255,255,0.5);
}
.input_block .input_section:nth-child(1) {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
}
.input_block .input_section:nth-child(1) .row:nth-child(1) input:nth-last-child(1) {
		border-top-right-radius: 10px;
}
.input_block .input_section:nth-last-child(1) {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
}
.input_block .input_section:nth-last-child(1) .row:nth-last-child(1) input:nth-last-child(1) {
		border-bottom-right-radius: 10px;
}
.input_section .row {
		position: relative;
		width: 100%;
		display: block;
		height: 44px;
}



.input_section .row.dual input {
		width: calc(50%);
}
.input_section .row.dual input:nth-child(2) {
		left: calc(50%);
}

.input_section .row.dual.tri input {
		width: calc(100% / 3);
}
.input_section .row.dual.tri input:nth-child(2) {
		left: calc(100% / 3);
}
.input_section .row.dual.tri input:nth-child(3) {
		left: calc(2 * (100% / 3));
}

.input_section .row:nth-last-child(1) input {
		border-bottom: 0;
}
.input_section .row:nth-last-child(1) {
		height: 43px;
}
.input_section .row:nth-child(1) input {
		border-top: 0;
}
.input_section .row:nth-child(1) {
		height: 42px;
}
.input_section .row:nth-child(1):nth-last-child(1) {
		height: 41px;
}
@media only screen and (max-width: 600px) {

		.input_section .row.dual {
				height: 86px;
		}
		.input_section .row.dual input {
				width: calc(100%);
		}
		.input_section .row.dual input:nth-child(1) {
				border-bottom: 3px solid #242424;
		}
		.input_section .row.dual input:nth-child(2) {
				left: 0;
				top: 44px;
		}
		.input_block .input_section:nth-child(1) .row:nth-child(1) input:nth-child(1) {
				border-top-right-radius: 10px;
		}
		.input_section .row.dual:nth-child(1):nth-last-child(1) {
		    height: 86px;
		}
		.input_block .input_section .row.dual .selector {
				width: 100%;
				top: 44px;
				left: 0;
		}
		.input_section .row.dual:nth-child(1):nth-last-child(1) {
		    height: 85px;
		}
		.input_section .row.dual.tri {
				height: 129px;
		}
		.input_section .row.dual.tri:nth-child(1):nth-last-child(1) {
		    height: 129px;
		}
		.input_section .row.dual.tri input {
		    width: calc(100%);
		}
		.input_section .row.dual.tri input:nth-child(2) {
		    top: 44px;
				left: 0;
				border-bottom: 3px solid #242424;
		}
		.input_section .row.dual.tri input:nth-child(3) {
		    top: 88px;
				left: 0;
		}
}


/* SELECTORS */

.input_section .selector {
		width: calc(100%);
		height: 41px;
		border: solid #242424;
		border-left-width: 3px;
		border-top-width: 2px;
		border-bottom-width: 2px;
		border-right: none;
		position: absolute;
		left: 0;
		box-sizing: border-box;
		overflow: hidden;
}
.input_section .row.dual .selector {
		width: calc(50%);
		left: 50%;
}
.input_section .row:nth-last-child(1) .selector {
		border-bottom: 0;
}
.input_section .row:nth-child(1) .selector {
		border-top: 0;
}
.input_block .input_section:nth-child(1) .row:nth-child(1) .selector:nth-last-child(1) {
		border-top-right-radius: 7px;
}
.input_block .input_section:nth-last-child(1) .row:nth-last-child(1) .selector:nth-last-child(1) {
		border-bottom-right-radius: 7px;
}
.input_section .selector .option {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
}
.input_section .selector .option.active {
		display: block;
}
.input_section .selector .option h3 {
		width: calc(100%);
		margin-top: 10px;
		text-align: center;
		cursor: default;
}
.option h3::selection {
		background: none;
}
.option h3::-moz-selection {
		background: none;
}
.input_section .selector .selector_arrows h4.vector {
		position: absolute;
		top: 0;
		padding: 11px 15px 9px 20px;
		box-sizing: border-box;
		height: 41px;
		cursor: pointer;
		z-index: 1;
		transition: transform 0.2s;
}
.input_section .selector .selector_arrows h4.vector:nth-child(1) {
		right: 0;
}
.input_section .selector .selector_arrows h4.vector:nth-child(2) {
		left: 0;
}
.input_section .selector .selector_arrows h4.vector:nth-child(1):hover {
		transform: translateX(5px);
		padding-left: 25px;
}
.input_section .selector .selector_arrows h4.vector:nth-child(2):hover {
		transform: translateX(-5px);
		padding-right: 25px;
}
.input_section .selector .option input.custom_label {
		background: none;
		left: 44px;
		padding: 10px 0;
		border: none;
		text-align: center;
		width: calc(100% - 85px);
}
.input_section .inline_toggle {
		width: calc(100% + 1px);
		display: inline-block;
		padding: 10px 18px;
		border: none;
		text-align: left;
		margin: -3px 1px -3px -1px;
		box-sizing: border-box;
		position: absolute;
		border: 3px solid #242424;
		border-right: none;
}
.input_section .dual .inline_toggle {
		width: calc(50% + 1px);
    display: inline-block;
    padding: 10px 18px;
    transform: translate(2px, 0px);
    border: none;
    text-align: left;
    margin: -3px 1px -3px -1px;
    box-sizing: border-box;
    position: absolute;
    border: 3px solid #242424;
		border-right: none;
}
.inline_toggle .icon {
		background-image: url(https://divecons.heydive.com/checkbox_unfilled_red.svg);
}
.inline_toggle.active .icon {
		background-image: url(https://divecons.heydive.com/checkbox_filled_red.svg);
}
.input_section .inline_toggle input.checkbox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% + 3px);
		opacity: 0;
		cursor: pointer;
}
@media only screen and (max-width: 600px) {
		.input_section .dual .inline_toggle {
				width: 100%;

		}
}


/* LOGIN PANEL */

.input_section .dual.password .inline_toggle {
		width: 172px;
		background: rgba(251, 39, 74, 0.3);
		position: absolute;
		left: calc(100% - 173px);
}

.input_section .dual.password .inline_toggle h3 {
		color: #FB274C;
}
.inline_toggle h3 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
}
.signup_content .inline_toggle h3 {
		overflow: unset;
		white-space: unset;
		text-overflow: unset;
}
.input_section.agree .inline_toggle {
		background: rgba(251, 39, 74, 0.3);
}
.input_section.agree .inline_toggle h3 {
		color: #FB274C;
}
.input_section .dual.password .input {
		width: calc(100% - 173px);
}
.input_block .input_section:nth-last-child(1) .inline_toggle:nth-last-child(1) {
		border-bottom-right-radius: 8px;
}

.login_content {
		display: none;
}
.signup_content {
	 display: none;
}
.login_panel.login .login_content {
		display: block;
}
.login_panel.signup .signup_content {
		display: block;
}
.login_panel_overlay {
		right: unset;
		left: 0;
}
.login_panel .tab_buttons {
		position: relative;
		padding: 0;
		margin: 20px 0 10px;
}
.login_panel .tab_buttons .bottom_indicator {
		bottom: unset;
		top: 0;
}
.login_panel .tab_buttons button {
		width: calc(50% - 5px);
}
.login_panel .tab_buttons button:nth-child(1) {
		border-radius: 10px;
}
.login_panel .tab_buttons button:nth-last-child(1) {
		border-radius: 10px;
}
.login_panel .tab_buttons button.active {
		background: rgba(255,255,255,0.2);
		cursor: default;
}
.login_panel .tab_buttons button.active:hover {
		background: rgba(255,255,255,0.2);
}
.logo_array .icon {
		margin-right: 5px;
}
.login_panel .user_panel_glow {
		background-image: url(https://divecons.heydive.com/backdrop_accent.png);
		height: 149px;
		width: calc(100% + 100px);
		position: absolute;
		left: -50px;
		top: -8px;
		filter: blur(45px);
		z-index: 0;
		opacity: 1;
		background-size: cover;
		background-position: top;
}
.content_raise {
		position: relative;
		z-index: 1;
}
.login_button {
		display: none;
}
.login_panel.login .login_button {
		display: block;
}
.signup_button {
		display: none;
}
.login_panel.signup .signup_button {
		display: block;
}
.login_panel .scroll_section {
		overflow-x: hidden;
}
.login_panel .file_warning {
		margin-top: 10px;
		padding: 0 10px;
}
.login_alerts {
		padding: 13px 20px;
		background: rgba(251, 39, 74, 0.3);
		border-radius: 10px;
		margin: 0 0 10px 0;
}
.login_alerts h3 {
		color: #FB274C;
}
@media only screen and (max-width: 600px) {
		.input_section .dual.password .inline_toggle {
				width: calc(100%);
				top: 44px;
				left: -1px;
				border-radius: 0 0 10px 0;
		}
		.input_section .dual.password .input {
				width: calc(100% - 0px);
		}
}
@media only screen and (max-width: 472px) {
		.input_section.agree .inputs div.row {
				height: 62px;
		}
}
@media only screen and (max-width: 319px) {
		.input_section.agree .inputs div.row {
				height: 83px;
		}
}
@media only screen and (max-width: 264px) {
		.input_section.agree .inputs div.row {
				height: 104px;
		}
}
@media only screen and (max-width: 240px) {
		.input_section.agree .inputs div.row {
				height: 125px;
		}
}
@media only screen and (max-width: 230px) {
		.input_section.agree .inputs div.row {
				height: 167px;
		}
}

/* CONTACT PANEL */


.contact_panel .gradient {
		background: #25A0EF;
}
.contact_panel .marquee {
		background-image: url(https://divecons.heydive.com/tap/profile_animated.gif);
}
.contact_panel_overlay {
		background: #032840;
}
.contact_panel_overlay .bubble {
		background: #4bb8ff;
}
.invalid {
		background: red;
}

.contact_panel .input_block {
		margin: 30px -5px 0 -5px;
		width: calc(100% + 10px);
}

.input_section .contact_pfp {
		opacity: 0;
		cursor: pointer;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0;
		line-height: 70px;
}

.inline_toggle.pfp {
		cursor: pointer;
		background: rgba(255,255,255,0.1);
}
.inline_toggle.delete_button {
		left: calc(100% - 55px);
		background: rgba(255,0,60,0.2);
		width: 56px;
		cursor: pointer;
}
@media (hover:hover) {
		.inline_toggle.delete_button:hover {
				background: rgba(255,0,60,0.3);
		}
}
@media (hover:none) {
		.inline_toggle.delete_button:active {
				background: rgba(255,0,60,0.3);
		}
}
.inline_toggle.delete_button h3 {
		color: #ff003c;
}
.inline_toggle.delete_button .icon {
		margin: 2px 0 2px;
}
.inline_toggle.cancel_file .icon {
		background-image: url(https://divecons.heydive.com/exit_red.svg);
}
.inline_toggle.delete_file .icon {
		background-image: url(https://divecons.heydive.com/delete_red.svg);
}
.row.file_upload .inline_toggle.cancel_file {
		display: none;
}
.row.file_upload .inline_toggle.delete_file {
		display: none;
}
.row.file_upload.new_file .inline_toggle.cancel_file {
		display: unset;
}
.row.file_upload.existing_file .inline_toggle.delete_file {
		display: unset;
}
.row.file_upload.existing_file.new_file .inline_toggle.delete_file {
		display: none;
}
.inline_toggle.pfp h3 {
		color: #999999;
}
.input_section_icon.icon.contact_pfp_preview {
		border-radius: 30px;
		width: 23px;
		height: 23px;
		object-fit: cover;
		object-position: center;
		top: 9px;
		left: 13px;
}
.input_section_icon.icon.contact_pfp_preview.new {
		display: none;
}
.input_section_icon.icon.contact_pfp_preview.new.active {
		display: unset;
}



/* MAIN CONTENT */


.right_side.main_content {
		height: calc(100% - 140px);
		margin-top: 135px;
		border-radius: 0 80px 0 0;
		border-top: 3px solid rgba(255,255,255,0.1);
		box-sizing: border-box;
		overflow: hidden;
}
@media only screen and (max-width: 1130px) {
		.right_side.main_content {
		    margin-top: 0;
		    border-radius: 0 40px 0 0;
		}
}

/* SMALL HALF TILE */

.half_tile {
	width: 50%;
	height: 95px;
	box-sizing: border-box;
	display: inline-block;
	overflow: hidden;
	position: relative;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	background: none;
	border: none;
	text-align: left;
	vertical-align: top;
}
.swipe_holder .content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0 30px;
}
.half_tile:nth-last-child(2) {
    border-radius: 0 0 0 70px;
}
.half_tile:nth-last-child(1) {
    border-radius: 0 0 70px 0;
}




/* SWIPE PULL */

.tap_functions {
	margin-top: -1px;
}
button.half_tile {
	transition: transform 0.2s cubic-bezier(0.77, 0, 0, 1.32), border-radius 0.2s cubic-bezier(0.77, 0, 0, 1.32), box-shadow 0.2s;
	cursor: pointer;
	outline: none;
}
.swipe_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: right;
}
button.half_tile.swiping {
	transform: scale(1.07);
	z-index: 1;
	border-radius: 15px;
	box-shadow: 0 0 20px 0 #00000040;
}
.swipe_pull {
	margin-right: -15px;
	box-shadow: inset 0 0 0 3px #242424;
	box-sizing: border-box;
	height: 75px;
	width: 70px;
	overflow: hidden;
	border-radius: 40px 0 0 40px;
	transition: background 0.2s, box-shadow 0.2s, width 0.3s cubic-bezier(0.77, 0, 0, 1.32), height 0.3s cubic-bezier(0.77, 0, 0, 1.32), border-radius 0.3s cubic-bezier(0.77, 0, 0, 1.32);
	display: flex;
	align-items: center;
	z-index: 1;
	justify-content: right;
}
.swipe_pull h3 {
	position: relative;
	right: -15px;
	white-space: nowrap;
	opacity: 0;
}
.swipe_holder.swiping .swipe_pull h3, .swipe_holder.active .swipe_pull h3 {
	opacity: 1;
}
.swipe_holder .dvcn-goleft {
	color: white;
	right: 10px;
	position: absolute;
	top: calc(50% - 8px);
	transition: top 0.2s, color 0.2s, opacity 0.5s;
	z-index: 1;
	pointer-events: none;
}
.swipe_holder.active .dvcn-goleft {
	opacity: 0;
}
.swipe_holder.swiping .swipe_pull {
	transition: none;
	background: white;
	box-shadow: none;
	overflow: hidden;
}
.swipe_holder.swiping .dvcn-goleft {
	color: black;	
}
.swipe_holder.active .swipe_pull {
	border-radius: 0;
	width: calc(100% + 15px);
	height: 100%;
	background: white;
	box-shadow: none;
}

.swipe_holder[data-action='hydrin'], [data-name='action_panel'][data-action='hydrin'] {
	--swipe-bg: #190032;
	--main-color: #8000FF;
	--lighter: #8000FF;
	--lightest: #c284ff;
	--darker: #290051;
	--stroke: #5f00bd;
	--contrast: white;
}
.swipe_holder[data-action='link'], [data-name='action_panel'][data-action='link'] {
	--swipe-bg: #1a2800;
	--main-color: #86D500;
	--lighter: #86D500;
	--lightest: #daff9d;
	--darker: #294100;
	--stroke: #6ba900;
	--contrast: black;
}
.swipe_holder[data-action='file'], [data-name='action_panel'][data-action='file'] {
	--swipe-bg: #350200;
	--main-color: #ff5248;
	--lighter: #ff5248;
	--darker: #571310;
	--stroke: #c9221b;
	--contrast: white;
}
.swipe_holder[data-action='contact'], [data-name='action_panel'][data-action='contact'] {
	--swipe-bg: #00131e;
	--main-color: #25A0EF;
	--lighter: #25A0EF;
	--lightest: #9dd9ff;
	--darker: #00263f;
	--stroke: #0080d3;
	--darker-stroke: #0a3057;
	--placeholder: #4879ad;
	--contrast: white;
}



.swipe_holder {
	background: var(--swipe-bg, black);
}
.swipe_holder .content h3 {
	color: var(--lighter, white);
}
.swipe_holder .swipe_pull {
	box-shadow: 0 0 0 3px var(--darker, #242424);
}
.swipe_holder .dvcn-goleft {
	color: var(--lighter, white);
}
.swipe_holder.swiping .swipe_pull, .swipe_holder.active .swipe_pull {
	background: var(--main-color, white);
	box-shadow: none;
}
.swipe_holder.active .swipe_pull h3 {
	color: var(--contrast, black);
}
.swipe_holder.swiping .dvcn-goleft {
	color: var(--contrast, black);
}


/* ACTION PANEL */

[data-name='action_panel'] {
	position: fixed;
	z-index: 1;
	height: 95px;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
}
[data-name='action_panel'] scroll {
	height: calc(100% - 113px);
}
[data-name='action_panel'].active {
	opacity: 1;
	width: 50%;
	left: 50%;
	max-width: 700px;
	height: 100%;
	background: var(--main-color, #242424);
	transition: height 0.5s cubic-bezier(1, 0, 0, 1), top 0.5s cubic-bezier(1, 0, 0, 1), border-radius 0.5s cubic-bezier(1, 0, 0, 1), left 0.5s cubic-bezier(1, 0, 0, 1), width 0.5s cubic-bezier(1, 0, 0, 1);
	top: 0;
	pointer-events: initial;
	border-radius: 80px;
	z-index: 2;
}
[data-name='action_panel'].transition .exp_header, [data-name='action_panel'].transition scroll {
	display: none;
}

[data-name='action_panel'] .preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	pointer-events: none;
}
[data-name='action_panel'] .preview .swipe_pull {
	justify-content: left;
}
[data-name='action_panel'] .preview .swipe_pull h3 {
	left: 30px;
}
[data-name='action_panel'].transition .preview {
	display: block;
}
[data-name='action_panel'] .exp_header {
	border-bottom: 3px solid var(--stroke, #3a3a3a);
}
[data-name='action_panel'] .extra::before {
	background: var(--stroke, #3a3a3a);
}
[data-name='action_panel'] .extra h3 {
	line-height: 1.1em;
	color: var(--contrast, white);
}
[data-name='action_panel'] .padded_content {
	padding: 25px 15px 120px;
}
[data-name='action_panel'] .extra.input.with_button button {
	border-left: 3px solid var(--stroke, #3a3a3a);
}

@media (hover:hover) {
	[data-name='action_panel'] .extra.input.with_button button:hover {
		background: var(--stroke, #3a3a3a);
	}
}
@media (hover:none) {
	[data-name='action_panel'] .extra.input.with_button button:active {
		background: var(--stroke, #3a3a3a);
	}
}

[data-name='action_panel'] scroll {
	opacity: 0;
}
[data-name='action_panel'].transition.active .button_gallery {
	opacity: 0;
}
[data-name='action_panel'].done scroll {
	opacity: 1;
	animation: content_enter 0.5s cubic-bezier(0, 0, 0, 1);
}
@keyframes content_enter {
	from {
		transform: translateY(40px);
	} to {
		transfrom: translateY(0px);
	}
}




/* LONG LOADER */

[data-name='action_panel'] .long_loader {
	top: 250px;
	left: calc(50% - 64px);
	background: 0 0;
}
svg.long_loader {
	width: 150px;
	height: 35px;
	position: absolute;
	top: 29px;
	right: -35px;
	background: #fff;
	padding-left: 20px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
svg.long_loader path {
	fill: none;
	stroke: var(--contrast, white);
	stroke-width: 4px;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-dasharray: 90;
	stroke-dashoffset: 180;
}
.loading svg.long_loader {
	opacity: 1;
}
.loading svg.long_loader path {
	animation: long_loader_entrance .6s cubic-bezier(.02,.45,.6,.69),long_loader .5s .6s infinite linear;
}
@keyframes long_loader_entrance {
	0% {
		stroke-dasharray: 158;
		stroke-dashoffset: 474;
	} 100% {
		stroke-dasharray: 90;
		stroke-dashoffset: 180;
	}
}
@keyframes long_loader {
	0% {
		stroke-dasharray: 90;
		transform: translateX(0);
		stroke-dashoffset: 180;
	} 100% {
		stroke-dasharray: 90;
		transform: translateX(-152px);
		stroke-dashoffset: 142;
	}
}


/* HYDRIN PANEL */

button[data-name='set_own_hydrin'] .icon {
	position: absolute;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	object-fit: cover;
	top: 32px;
	left: 20px;
}





/* EXP HEADER */

.exp_header {
	padding: 25px 35px;
	box-sizing: border-box;
	background: var(--main-color, #242424);
	display: flex;
	align-items: center;
	z-index: 1;
	width: 100%;
	border-radius: 80px 80px 0 0;
}
.exp_header .button.singular.exit {
	background: white;
}
button.singular.yep {
	background: rgba(134,213,0,.2);
}
button.singular.yep .dvcn-yep {
	color: #86d500;
}
.exp_header h3 {
	color: white;
	font-weight: 530;
	margin-left: 10px;
}
.exp_header button.singular .dvcn-exit {
	color: #ff003e;
}

@media (hover:hover) {
	section.right .exp_header .button.singular.exit:hover {
		background: rgba(255, 0, 64, 1);
	}
	section.right .exp_header .button.singular.exit:hover .dvcn-exit {
		color: white;
	}
	button.singular.yep:hover {
		background: #86d500;
	}
	button.singular.yep:hover .dvcn-yep {
		color: #000;
	}
}
@media (hover:none) {
	section.right .exp_header .button.singular.exit:active {
		background: rgba(255, 0, 64, 1);
	}
	section.right .exp_header .button.singular.exit:active .dvcn-exit {
		color: white;
	}
	button.singular.yep:active {
		background: #86d500;
	}
	button.singular.yep:active .dvcn-yep {
		color: #000;
	}
}







/* SECTIONS */

.section_label {
    opacity: 0.15;
    margin: 50px 0 20px 0;
    animation: section_label 1.5s infinite;
    cursor: default;
}
.section_label h3 {
    font-weight: 650;
}
.rounded_barrier {
		height: 80px;
		width: calc(100% + 70px);
		border-radius: 0 70px 0 0;
		border-top: 3px solid rgba(255,255,255,0.1);
		margin: 10px -51px 0 -35px;
}
.content_section {
		position: relative;
		margin: -80px -35px -50px -35px;
		padding: 35px;

}

/* USES */

.uses .half_tile_container {
		margin: 10px 0 0 0;
}
.uses {
		margin: 0px -15px 15px -15px;
		background: black;
		border-radius: 70px;
		position: relative;
}
.uses h3.uses_title {
		padding: 40px 35px 15px;
}
.uses .speed_button {
		padding: 20px 38px 20px 26px;
		background: rgba(255,255,255,0.2);
		border-radius: 1000px;
		position: absolute;
		top: 16px;
		right: 25px;
		border: none;
		width: 170px;
		cursor: pointer;
		transition: background 0.2s;
		outline: none;
}

@media (hover: hover) {
		.uses .speed_button:hover {
				background: rgba(255,255,255,0.3);
		}
		.uses .speed_button:hover .icon {
				filter: none;
		}
}
@media (hover: none) {
		.uses .speed_button:active {
				background: rgba(255,255,255,0.3);
		}
		.uses .speed_button:active .icon {
				filter: none;
		}
}

.uses .inspire_button {
		position: absolute;
		top: 16px;
		right: 202px;
}
.uses .inspire_button .icon {
		background-image: url(https://divecons.heydive.com/inspire.svg);
}
.uses .speed_button:active {
		background: rgba(255,255,255,0.4);
}
.uses .speed_button h3::after {
		content: 'Default';
}
.uses .speed_button .icon {
		background-image: url(https://divecons.heydive.com/cursor.svg);
}
.uses.speed .speed_button h3::after {
		content: 'Speed';
}
.uses.speed .speed_button .icon {
		background-image: url(https://divecons.heydive.com/speed_mode.svg);
}
@media only screen and (max-width: 720px) {
		.uses {
				border-radius: 35px;
				margin-bottom: 5px;
		}
		.uses .speed_button {
				top: 7px;
				right: 2px;
		}
		.uses h3.uses_title {
		    padding: 30px 20px 10px;
		}
}

/* BACKDROP DOTS */

.backdrop_dots {
		background-image: url(https://tap.dive.fyi/img/dot_array.svg);
		width: 300px;
		height: 300px;
		top: 50px;
		left: -50px;
		opacity: 0.2;
		background-size: 300px 300px;
		background-position: center;
		position: absolute;
		filter: invert(1);
		background-repeat: no-repeat;
}

/* ANALYTCS */

.analytics_graph {
		box-sizing: border-box;
		margin: 0px -15px 0px -15px;
		background: rgba(0,0,0,0.2);
		border-radius: 70px;
		padding: 35px;
		position: relative;
		overflow: hidden;
}

canvas.graph {
		margin: 90px -35px 55px -35px;
		filter: drop-shadow(0 0 14px rgba(255,255,255,0.5));
		width: calc(100% + 70px);
		animation: glow_in 0.5s;
		animation-fill-mode: both;
}
@keyframes glow_in {
		from {
				filter: drop-shadow(0 0 14px rgba(255,255,255,0));
		} to {
				filter: drop-shadow(0 0 14px rgba(255,255,255,0.5));
		}
}
.analytics_graph.load_forward canvas.graph {
		animation: none;
}
.analytics_graph.load_backward canvas.graph {
		animation: none;
}
.graph_buttons {
		width: 100%;
		height: 265px;
		cursor: pointer;
		position: absolute;
		top: 110px;
		left: 0;
}
.graph_buttons .gb {
		width: calc(100% / 7);
		height: 265px;
		background: rgba(255,255,255,0);
		display: inline-block;
		transition: background 0.2s;
		border-radius: 10px;
}
.graph_buttons .gb .tooltip h5 {
		display: block;
		margin: 0;
		line-height: 25px;
		text-align: left;
}
.graph_buttons .gb .tooltip {
		margin-top: -30px;
		background-image: linear-gradient(to bottom, rgba(255, 0, 64, 0.5), rgba(255, 255, 255, 0.5));
		padding: 3px 8px;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
}
.graph_buttons .gb .tooltip .counter {
		background: black;
		color: white;
		padding: 2px 4px;
		border-radius: 5px;
		margin-left: 5px;
}
.graph_buttons .gb .tooltip h5.head {
		color: black;
		text-align: left;
		padding: 0px 7px;
		margin: -1px -8px 3px -8px;
		box-sizing: border-box;
		border-bottom: 2px solid rgba(0,0,0,0.2);
}
.graph_buttons .gb:hover .tooltip {
		opacity: 1;
		visibility: visible;
}
.graph_buttons .gb:hover {
		background: rgba(255,255,255,0.1);
}



.placeholder {
		display: none;
}
.tu_label::after {
		content: "Total";
}
.counter.unique {
		display: none;
}
.tooltip .hour_peak {
		display: none;
}
.date_range {
		padding: 45px 35px;
		background: black;
		margin: 0 -35px -35px;
		position: relative;
		border-radius: 0 0 70px 70px;
}
.date_range .icon {
		background-image: url(https://divecons.heydive.com/timeline.svg);
}
.date_range span {
		background: white;
		padding: 1px 6px;
		color: black;
		border-radius: 5px;
		margin: 1px 5px;
		display: inline-block;
}
.date_range .button_gallery {
		padding: 0;
		right: 25px;
		background: none;
		box-shadow: none;
		bottom: 0;
    top: 25px;
}
.date_range .title {
		width: calc(100% - 140px);
}
.specific_info {
		margin: 15px -35px -35px;
		padding: 15px 5px 15px 15px;
		background: black;
		box-sizing: border-box;
		position: relative;
		display: none;
}
.analytics_graph.expanded .specific_info {
		display: block;
}
.analytics_graph.expanded .date_range {
		border-radius: 0;
}
.specific_info .info_card {
		border-radius: 65px;
		background: #242424;
		width: calc(50% - 10px);
		margin-right: 10px;
		display: inline-block;
		box-sizing: border-box;
		padding: 30px 25px;
    height: 130px;
		animation: raise_card 0.2s;
}
.analytics_graph.day .specific_info .info_card.peak {
		display: none;
}
.analytics_graph.day .specific_info .info_card {
		width: calc(100% - 10px);
}
@keyframes raise_card {
		from {
				transform: translateY(10px);
		} to {
				transform: translateY(0);
		}
}
.specific_info .info_card h3 {
		display: block;
		opacity: 0.8;
		white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.specific_info .info_card.moment .heading {
		color: #FB274C;
		filter: drop-shadow(0 0 7px #FB274C);
}
.specific_info .info_card.moment {
		background: rgba(251, 39, 74, 0.2);
}
.specific_info .info_card.moment h3 {
		color: #FB274C;
}
.specific_info .info_card.peak .heading {
		margin-top: 10px;
}
.specific_info .info_card .heading {
		font-weight: 530;
		opacity: 1;
		margin-bottom: 5px;
		filter: drop-shadow(0 0 7px rgba(255,255,255,0.5));
}
.specific_info .info_card .content {
		position: absolute;
}

@media only screen and (max-width: 1130px) {
		.analytics_graph .tooltip {
				display: none;
		}
}

@media only screen and (max-width: 720px) {
		.analytics_graph {
				border-radius: 35px;
				padding: 25px 25px 35px 25px;
		}
		.specific_info {
				padding: 20px 0 0 5px;
		}
		.specific_info .info_card {
				width: calc(100% - 25px);
				margin: 0px 5px 5px 10px;
				border-radius: 30px;
				padding: 31px 20px;
		}
		.date_range {
			  padding: 30px;
				border-radius: 0 0 35px 35px;
		}
		.date_range .button_gallery {
				right: 20px;
		}
		.date_range {
				display: flex;
				align-items: center;
				min-height: 48px;
				margin: 0 -25px -35px;
		}

}
@media only screen and (max-width: 400px) {
		.date_range .title {
				display: block;
				width: 100%;
		}
		.date_range {
				padding-bottom: 85px;
				padding-top: 15px;
		}
		.date_range .button_gallery {
				top: unset;
				bottom: 10px;
				right: 13px;
		}
}


/* TAB BUTTONS */

.tab_buttons {
		padding: 5px 0 5px 5px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
}
.month_button {
		margin-right: 0;
}

.tab_buttons button {
		height: 100px;
		width: calc((100% / 3) - 5px);
		margin-right: 5px;
		border-radius: 10px;
		background: none;
		border: none;
		text-align: left;
		padding: 30px;
		cursor: pointer;
		outline: none;
		position: relative;
		overflow: hidden;
		transition: background 0.2s;
		vertical-align: top;
}

.tab_buttons button.active {
		background: black;
}


@media (hover: hover) {
		.tab_buttons button:hover {
				background: rgba(255,255,255,0.1);
		}
		.tab_buttons button.active:hover {
				background: #0e0e0e;
		}
}
@media (hover: none) {
		.tab_buttons button:active {
				background: rgba(255,255,255,0.1);
		}
		.tab_buttons button.active:active {
				background: #0e0e0e;
		}
}

.tab_buttons button .bottom_indicator {
		height: 3px;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		background: rgba(255,255,255,0.2);
		opacity: 1;
		transition: opacity 0.2s;
}
.tab_buttons button.active .bottom_indicator {
		opacity: 0;
}
.tab_buttons button:nth-child(1) {
		border-radius: 67px 10px 10px 10px;
}
.tab_buttons button:nth-last-child(1) {
		border-radius: 10px 67px 10px 10px;
}
.tab_buttons .s {
		display: none;
}
.tab_buttons button.active .s, .tab_buttons button.active .l {
		display: none;
}
.analytics_graph .tab_buttons button.active .icon {
		background-image: url(https://divecons.heydive.com/refresh.svg) !important;
}
.tab_buttons button .ref {
		display: none;
}
.tab_buttons button.active .ref {
		display: unset;
}
.tab_buttons button.animation .icon {
		animation: circle_refresh 0.3s;
		animation-fill-mode: both;
}
@keyframes circle_refresh {
		0% {
				transform: rotate(-20deg);
		}
		99% {
				transform: rotate(-360deg);
		}
		100% {
				transform: rotate(0deg);
		}
}


@media only screen and (max-width: 720px) {
		.tab_buttons button:nth-child(1) {
				border-radius: 30px 10px 10px 10px;
		}
		.tab_buttons button:nth-last-child(1) {
				border-radius: 10px 30px 10px 10px;
		}
		.tab_buttons button {
				padding: 20px;
		}
}
@media only screen and (max-width: 550px) {
		.tab_buttons .s {
				display: unset;
		}
		.tab_buttons .l {
				display: none;
		}
}
@media only screen and (max-width: 450px) {
		.tab_buttons button.active .ref {
				opacity: 0;
		}
		.tab_buttons button.active .icon {
				margin: 0;
				position: absolute;
				height: 100%;
				width: 100%;
				background-size: 23px 23px;
				top: 0;
				left: 0;
		}
}
@media only screen and (max-width: 370px) {
		.tab_buttons .s {
				display: none;
		}
		.tab_buttons button.active .ref {
				display: none;
		}
		.tab_buttons .icon {
				margin: 0;
				position: absolute;
				height: 100%;
				width: 100%;
				background-size: 23px 23px;
				top: 0;
				left: 0;
		}
}


/* MOBILE RETURN */

.mobile_return {
		height: 180px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), #636363);
		visibility: hidden;
		opacity: 0;
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);

}
.mobile_return .icon {
		background-image: url(https://divecons.heydive.com/move_down.svg);
		top: 42px;
		left: calc(50% - 8px);
		position:absolute;
}

/* ALERT */

.alert {
		position: fixed;
		top: 0;
		right: 0;
		width: 50%;
		padding: 50px 35px 100px;
		box-sizing: border-box;
		z-index: 2000;
		border-radius: 80px 80px 0 0;
		overflow: hidden;
		background-image: linear-gradient(to bottom, black, transparent);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.5s, visibility 0.5s;
}
.alert .alert_back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 60px);
		background-image: url(https://divecons.heydive.com/tap/rainbow_alert.gif);
		background-size: cover;
		filter: blur(25px) drop-shadow(0px 0px 10px black);
		background-repeat: no-repeat;
}
.alert h3 {
		position: relative;
		z-index: 1;
		filter: drop-shadow(0 0 20px rgba(0,0,0,1));
}
.alert.active {
		opacity: 1;
		visibility: visible;
}
.alert .icon {
		background-image: url(https://divecons.heydive.com/alert.svg);
}

@media only screen and (min-width: 2130px) {
		.alert {
				width: 700px;
				right: calc(50% - 350px);
				top: 25px;
		}
}
@media only screen and (max-width: 1130px) {
		.alert {
				width: 100%;
		}
}
@media only screen and (max-width: 720px) {
		.alert {
				border-radius: 40px 40px 0 0;
		}
}


/* ACCOUNT SETTINGS */

.profile_gradient {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: 0.3;
}
.panel_setting_content {
		width: calc(100% - 115px);
}
.panel_setting .button.singular {
		position: absolute;
		right: 35px;
		bottom: 35px;
}
.panel_setting_content.text {
		padding: 42px 10px 37px 35px;
		box-sizing: border-box;
}
.panel_setting .input_block {
		margin-top: 30px;
		margin-left: -3px;
}
.panel_setting .inner_background {
		width: 100%;
		height: 200px;
		background: rgba(255,255,255,0.2);
		border-radius: 60px 10px 10px 60px;
		box-sizing: border-box;
		padding: 35px;
		position: relative;
}
.panel_setting .inner_background .input_block {
		position: absolute;
		width: calc(100% - 65px);
		bottom: 35px;
}
.panel_setting .inner_background .input_block input {
		background: none;
}
.panel_setting .inner_background .input_section {
		border-color: white;
}
.panel_setting .inner_background .input {
		color: white;
		border-color: white;
		transition: none;
}
.panel_setting .inner_background.black .input_section {
		border-color: black;
}
.panel_setting .inner_background.black .input {
		color: black;
		border-color: black;
}
.panel_setting .inner_background .color_input {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border: none;
		border-radius: 60px 10px 10px 60px;
		cursor: pointer;
		opacity: 0;
}
.panel_setting.pfp_changer .inner_background .pfp_preview {
		height: 120px;
		width: 120px;
		border-radius: 1000px;
		position: absolute;
		top: 40px;
		left: calc(50% - 60px);
		background: #242424;
		object-fit: cover;
		object-position: center;
		transition: transform 0.2s;
}
.panel_setting.pfp_changer .new_pfp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
		border-radius: 60px 0 0 60px;
		z-index: 1;
		opacity: 0;
}
.icon.color_icon {
		border-radius: 100px;
		box-shadow: inset 0 0 0 3px white;
}
.account_panel .mini_tile.active {
		filter: none;
}
.account_panel .mini_tile.active h3 {
		color: white;
}
.account_panel .mini_tile.active .icon {
		filter: none;
}
.account_panel .user_panel_glow {
		height: 500px;
		width: calc(100% + 100px);
		position: absolute;
		left: -50px;
		top: 0;
		filter: blur(45px);
		z-index: 0;
		opacity: 0.7;
}

.prof_name .panel_setting.prof_name {
		display: inline-block;
}
.prof_color .panel_setting.prof_color {
		display: inline-block;
}
.prof_image .panel_setting.prof_image {
		display: inline-block;
}
.prof_password .panel_setting.prof_password {
		display: inline-block;
}

@media (hover: hover) {
		.panel_setting.pfp_changer .inner_background:hover .pfp_preview {
				transform: scale(1.1);
		}
}
@media (hover: none) {
		.panel_setting.pfp_changer .inner_background:active .pfp_preview {
				transform: scale(1.1);
		}
}
@media only screen and (max-width: 720px) {
		.panel_setting_content.text {
				padding: 30px 20px 90px 20px;
				box-sizing: border-box;
				width: 100%;
		}
		.panel_setting .button.singular {
		    right: 10px;
		    bottom: 15px;
		}
		.panel_setting .input_block {
		    margin-top: 20px;
		    margin-left: -3px;
		}
		.panel_setting .inner_background {
				border-radius: 30px 30px 10px 10px;
		}
		.panel_setting_content {
				width: 100%;
		}
		.account_panel .rounded_panel.panel_setting.pfp_changer {
				padding: 5px 5px 90px 5px;
		}
		.account_panel .rounded_panel.panel_setting.prof_color {
				padding: 5px 5px 90px 5px;
		}
}


/* PROGRESS CIRCLE */

.prog_cir_container {
		height: 24px;
		width: 24px;
		position: absolute;
		top: calc(50% - 12px);
		left: calc(50% - 12px);
		filter: drop-shadow(0 0 7px white);
}
.prog_cir_container .half {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		overflow: hidden;
}
.prog_cir_container .half.first {
		right: 0;
}
.prog_cir_container .half.second {
		left: 0;
}
.prog_cir_container .half .mask {
		position: absolute;
		top: 0;
		width: 200%;
		height: 100%;
		transform: rotate(-180deg);
}
.prog_cir_container .half.first .mask {
		right: 0;
}
.prog_cir_container .half.second .mask {
		right: -100%;
}
.prog_cir_container .half .mask .circle {
		position: absolute;
		height: calc(100% - 8px);
		width: calc(50% - 4px);
		top: 0;
		border: 4px solid white;

}
.prog_cir_container .half.first .mask .circle {
		right: 0;
		border-radius: 0 1000px 1000px 0;
		border-left: none;
}
.prog_cir_container .half.second .mask .circle {
		left: 0;
		border-radius: 1000px 0 0 1000px;
		border-right: none;
}





/* LARGE CONTAINER */

.large_container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: black;
		display: flex;
		justify-content: center;
		align-items: center;
}
.inner_container {
		background: black;
		width: 50%;
		border-radius: 70px;
		overflow: hidden;
		position: relative;
		width: 600px;
		max-height: calc(100% - 20px);
}
.inner_container .scroll_section {
		width: 100%;
		max-height: 100%;
		position: relative;
		padding: 50px 45px 132px;
		box-sizing: border-box;
		overflow-y: scroll;
		border-width: none;
}
.inner_container .scroll_section.no_button {
		padding-bottom: 50px;
}

.inner_container::-webkit-scrollbar {
		display: none;
}
.inner_container .user_panel_glow {
		filter: blur(33px);
		top: -10px;
		left: -10px;
		height: 200px;
		width: 100%;
		position: absolute;
		opacity: 0.5;
		z-index: 0;
}
.inner_container .content {
		position: relative;
		z-index: 1;
}
.shared_message {
	  padding-left: 30px;
}
.shared_message .icon.pfp {
	  position: absolute;
		top: 1px;
		left: 0;
}
.inner_container .file_upload_previews {
	  margin: 30px -30px 0;
}

@media only screen and (max-width: 720px) {
		.inner_container {
				width: calc(100% - 10px);
				max-height: calc(100% - 10px);
				border-radius: 40px;
		}
		.inner_container .scroll_section {
				padding: 40px 30px 90px;
		}
		.inner_container .scroll_section.no_button {
				padding-bottom: 40px;
		}
		.inner_container .button_gallery {
				border-radius: 50px 50px 45px 50px;
		}
		.inner_container .file_upload_previews {
		    margin: 30px -25px 0;
		}
		.shared_message {
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
		}
}


/* RICH PREVIEW */

.rich_preview {
		margin: 20px -7px 5px -7px;
		padding: 10px 15px 8px;
		transition: background 0.2s, border 0.2s, filter 0.2s;
		position: relative;
		animation: active_preview 2s infinite;
}
.rich_preview .border {
		border-radius: 10px;
		border: 3px solid white;
		position: absolute;
		width: 100%;
		height: 100%;
		top: -3px;
		left: -3px;
}
@keyframes active_preview {
		0% {
				opacity: 0.7;
		} 50% {
				opacity: 1;
		} 100% {
				opacity: 0.7;
		}
}
.rich_preview .file_upload_title {
		display: inline-block;
		width: auto;
		font-weight: 530;
}
.rich_preview h3 {
		margin-right: 10px;
		margin-bottom: 4px;
		max-width: calc(100% - 10px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.rich_preview .file_upload_size {
		display: inline-block;
		width: auto;
}
.upload_file_viewer.image .rich_preview .border {
		border-color: #876FF6;
}
.upload_file_viewer.video .rich_preview .border {
		border-color: #FF5248;
}
.upload_file_viewer.audio .rich_preview .border {
		border-color: #FF7135;
}
.upload_file_viewer.text .rich_preview .border {
		border-color: #25A0EF;
}
.upload_file_viewer.font .rich_preview .border {
		border-color: #86D500;
}
.inner_container .file_warning {
		opacity: 0.4;
		padding-left: 30px;
		position: relative;
}
.upload_file_viewer .file_warning {
		display: none;
		margin-bottom: 20px;
		margin-top: -11px;
}
.upload_file_viewer.incompatible .file_warning {
		display: block;
}
.inner_container .file_warning .icon {
	  position: absolute;
		top: 1px;
		left: 0;
}


textarea.upload_font {
		border: none;
		resize: none;

}



/* CONTACT CREATION */

.contact_creation {
		margin: 30px -30px 0;
		height: 200px;
		background: rgba(0,0,0,0.5);
		border-radius: 50px;
		position: relative;
		overflow: hidden;
}
.contact_creation .icon.main_icon {
		background-size: 40px 40px;
		height: 100%;
		width: 100%;
		position: absolute;
}
.contact_creation.creating .icon.main_icon {
		background-image: url(https://divecons.heydive.com/tap/create_contact.gif);
}
.contact_creation.downloading .icon.main_icon {
		background-image: url(https://divecons.heydive.com/tap/download.gif);
}
.contact_creation.error .icon.main_icon {
		background-image: url(https://divecons.heydive.com/nope_color.svg);
}
.contact_creation .bubble {
		height: 200px;
		width: 200px;
		position: absolute;
		left: 0;
		top: 0;
		background: #25A0EF;
		border-radius: 1000px;
		filter: blur(100px);
		animation: contact_creation 1.5s infinite;
		transition: background 0.5s, width 0.5s, left 0.5s, animation 0.5s;
}
.contact_creation.downloading .bubble {
		background: gray;
		animation: none;
		width: 100%;
		left: 0;
}
.contact_creation.error .bubble {
		background: #FD7441;
		animation: none;
		width: 100%;
		left: 0;
}
.scroll_section.no_button.contact_download {
		padding-bottom: 20px;
}
@keyframes contact_creation {
		0% {
				left: 0px;
		} 50% {
				left: calc(100% - 200px);
		} 100% {
				left: 0px;
		}
}

.manual_contact_download {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: background 0.2s;
		border-radius: 50px;
}

@media (hover:hover) {
		.manual_contact_download:hover {
				background: rgba(255,255,255,0.1);
		}
}
@media (hover:none) {
		.manual_contact_download:active {
				background: rgba(255,255,255,0.1);
		}
}

@media only screen and (max-width: 720px) {
		.scroll_section.no_button.contact_download {
				padding-bottom: 5px;
		}
		.contact_creation {
				margin: 30px -25px 0;
				border-radius: 35px;
		}
		.manual_contact_download {
				border-radius: 35px;
		}
}


/* EMERGENCY */

.file_warning.emergency {
		margin-bottom: 25px;
}
.input_section_icon.phone_dial {
		animation: phone_dial 2.5s infinite;
}
@keyframes phone_dial {
		0% { transform: translate3d(0em, 0, 0); }
		2% { transform: translate3d(0.1em, 0, 0); }
		4% { transform: translate3d(-0.1em, 0, 0); }
		6% { transform: translate3d(0.1em, 0, 0); }
		8% { transform: translate3d(-0.1em, 0, 0); }
		10% { transform: translate3d(0.1em, 0, 0); }
		12% { transform: translate3d(-0.1em, 0, 0); }
		14% { transform: translate3d(0.1em, 0, 0); }
		16% { transform: translate3d(-0.1em, 0, 0); }
		18% { transform: translate3d(0.1em, 0, 0); }
		20% { transform: translate3d(-0.1em, 0, 0); }
		22% { transform: translate3d(0.1em, 0, 0); }
		24% { transform: translate3d(-0.1em, 0, 0); }
		26% { transform: translate3d(0.1em, 0, 0); }
		28% { transform: translate3d(-0.1em, 0, 0); }
		30% { transform: translate3d(0.1em, 0, 0); }
		32% { transform: translate3d(-0.1em, 0, 0); }
		34% { transform: translate3d(0.1em, 0, 0); }
		36% { transform: translate3d(-0.1em, 0, 0); }
		38% { transform: translate3d(0.1em, 0, 0); }
		40% { transform: translate3d(-0.1em, 0, 0); }
		42% { transform: translate3d(0.1em, 0, 0); }
		44% { transform: translate3d(-0.1em, 0, 0); }
		46% { transform: translate3d(0em, 0, 0); }
}



/* ACTIVE TEXT */

.active_text::after {
		content: 'inactive';
}
.mini_tile.active .active_text::after {
		content: 'active';
}
.enable_text::after {
		content: 'enable';
}
.mini_tile.active .enable_text::after {
		content: 'disable';
}




/* LINK PAGE */

.link_card_prev {
		padding-top: calc(62.963% - 18.8889px);
		width: calc(100% + 20px);
		background-size: cover;
		background-position: center;
		border-top-left-radius: 2% 3%;
    border-top-right-radius: 2% 3%;
    border-bottom-left-radius: 2% 3%;
    border-bottom-right-radius: 2% 3%;
		box-shadow: 0 5px 20px rgb(0 0 0 / 20%);
		margin-left: -10px;
}
.link_card_prev.vertical {
		padding-top: calc(79.41%);
		width: calc(50%);
		margin-left: 25%;
}

span.tap_link .login_panel {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to bottom, black, #242424);
		border-radius: 0;
		display: flex;
		align-items: center;
		justify-content: center;
}
span.tap_link .login_panel .pop_panel {
		width: 600px;
}
.iframe_video_container iframe {
		width: 100%;
		border-radius: 10px;
		position: absolute;
		height: 100%;
		top: 0;

}
.iframe_video_container {
		width: calc(100% + 20px);
		padding-top: calc(((100% + 20px) / 16) * 9);
		margin-left: -10px;
		position: relative;
		height: auto;
		margin-top: 0;
		border-radius: 10px;
		background: #242424;
}
@media only screen and (max-width: 720px) {
		.link_card_prev {
				margin-bottom: -11px;
		}
		.rich_preview.link_card {
				margin-bottom: 20px;
		}
		.iframe_video_container {
				margin-bottom: -11px;
		}
}




/* WARNINGG PANEL */

.user_panel_glow {
		height: 149px;
		width: calc(100% + 100px);
		position: absolute;
		left: -50px;
		top: -8px;
		filter: blur(45px);
		z-index: -1;
		opacity: 1;
		background-size: cover;
		background-position: top;
}
.root_warning_panel .user_panel_glow {
		background-image: url(https://divecons.heydive.com/backdrop_accent.png);
}
.root_warning_panel .pop_panel .scroll_section {
		padding: 105px 35px 55px 35px;
}
@media only screen and (max-width: 720px) {
		.root_warning_panel .pop_panel .scroll_section {
				padding: 105px 25px 45px 25px;
		}
}


/* LOGOUT ALL PANEL */

.logout_panel_overlay {
		background: #60001A;
		z-index: 1001;
}
.logout_panel_overlay .bubble {
		background: #FE003D;
}
.logout_panel .user_panel_glow {
		background: #a40027;
}

/* LANDING */


.tile {
		background: rgba(0,0,0,0.3);
		width: 100%;
		padding-top: calc(100%);
		border-radius: 70px;
		margin: 0 0 15px 0;
		display: inline-block;
		overflow: hidden;
		position: relative;
		background: rgba(0,0,0,0.1);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
}
.tile .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 45px;
    box-sizing: border-box;
}
.tile_container {

		display: flex;
		justify-content: center;
}
.tile_container .inner_tile_container {
		max-width: 670px;
}
.buy_panel .scroll_section {
		padding: 15px 15px 15px 15px;
}
.inspire_panel .scroll_section {
		padding-left: 15px;
		padding-right: 15px;
}
.buy_panel {
		background: linear-gradient(to top, #171717, black 30%, black 70%, #171717);
}

@media only screen and (max-width: 720px) {
		.tile {
		    margin: 0 0 5px 0;
		    border-radius: 35px;
		}
		.tile .content {
		    padding: 25px;
		}
		.buy_panel .scroll_section {
				padding: 90px 5px 5px 5px;
		}
		.inspire_panel .scroll_section {
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 100px;
		}

}



/* NBT SPECIFICS */

.tile.auto.nbt {
		background: rgba(255,0,149,0.3);
}
.tile.auto.nbt .hr {
		background: #83275C;
}
.tile.nbt h3 {
		color: #ff81cb;
}
.tile.nbt h1 {
		color: #ff81cb;
}
.tile.nbt .button.gallery_arrow {
		background: #83275C;
}
.tile.nbt .button_gallery {
		background: #FF0096;
		box-shadow: 0 0 25px 0 rgba(0,0,0,0.3)
}
.tile.nbt .button_gallery h3 {
		color: white;
}


/* CREATOR SPECIFICS */

/* NBT SPECIFICS */

.tile.auto.creator {
		background-image: linear-gradient(to bottom, rgba(255,0,60,0.3), rgba(0,0,0,0.2));
}
.tile.auto.creator .hr {
		background: #ff003b;
}
.tile.creator h1 {
		color: #ff003b;
}
.tile.creator .button_gallery h3 {
		color: white;
}
.tile.creator .button_gallery {
		background: #ff003b;
		box-shadow: 0 0 25px 0 rgba(0,0,0,0.3)
}


/* AUTO TILES */

.tile.auto {
		height: auto;
		padding: 0;
		background: #242424;
		-webkit-backface-visibility: unset;
		-moz-backface-visibility: unset;
		-webkit-transform: unset;
		-moz-transform: unset;
}
.tile.auto .content {
		position: relative;
		height: auto;
}
.land_card_prev {
		padding-top: calc(62.963%);
		width: 100%;
		background-size: cover;
		background-position: center;
		border-top-left-radius: 2% 3%;
    	border-top-right-radius: 2% 3%;
    	border-bottom-left-radius: 2% 3%;
    	border-bottom-right-radius: 2% 3%;
		margin-bottom: 30px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.land_card_prev.vert {
		padding-top: calc(79.412%);
		width: calc(50% - 13px);
		display: inline-block;
}
.land_card_prev.vert:nth-child(1) {
		margin-right: 15px
}
.land_card_prev.bundle {
		background-size: contain;
		box-shadow: none;
		background-repeat: no-repeat;
		padding-top: calc(80%);
		width: calc(100% + 20px);
		margin: -10px -10px -10px -10px;
}
.tile.auto .hr {
		height: 4px;
		background: #505050;
		margin: 45px -45px;
}
.tile.auto .slide {
		margin: -45px;
		padding: 45px 45px 135px 45px;
		display: none;
}
.tile.auto .gallery_arrow {
		height: 60px;
		width: 60px;
		padding: 5px 5px;
		box-sizing: border-box;
		overflow: hidden;
		position: absolute;
		margin: 0 5px 0 0px;
		border-radius: 1000px;
		background: #505050;
		margin-top: -28px;
		right: 15px;
}
.tile.auto .gallery_arrow.left {
		right: unset;
		left: 15px;
}
.tile.auto .gallery_arrow.left .icon {
		transform: scaleX(-1);
}
@media (hover: hover) {
		.tile.auto .gallery_arrow:hover {
				background: white;
		}
		.tile.auto .gallery_arrow:hover .icon {
				filter: invert(1);
		}
		.tile.nbt .button.gallery_arrow:hover {
				background: white;
		}
}
@media (hover: none) {
		.tile.auto .gallery_arrow:active {
				background: white;
		}
		.tile.auto .gallery_arrow:active .icon {
				filter: invert(1);
		}
		.tile.nbt .button.gallery_arrow:active {
				background: white;
		}
}
.tile.auto .gallery_arrow .icon {
		height: 56px;
		width: 58px;
		background-size: 23px 23px;
		margin: -3px 0 0 -4px;
		position: relative;
		z-index: 1;
		filter: drop-shadow(0 0 10px white);
}
.tile.auto .slide.active {
		display: block;
}




/* DIVE WELCOME */

.dive_welcome_logo {
		height: 45px;
		margin: 0 0 20px 0;
		display: block;
}
.dive_welcome_logo.blur {
		filter: blur(20px);
		position: absolute;
}
.scroll_section.welcome {
		padding-bottom: 110px;
}
.scroll_section.guide {
		padding-bottom: 110px;
}
.scroll_section.guide .iframe_video_container {
		margin-bottom: 20px;
		padding-top: calc(((100% + 20px) / 9) * 16);
}
@media only screen and (max-width: 720px) {
		.inner_container .scroll_section.guide {
				padding: 40px 30px 85px;
		}
}


/* SAFARI SPECIFICS */




@media not all and (min-resolution: 0.001dpcm) {
		.input_section input {
				transform: translateY(0px);
				height: 41px;
		}
		@media only screen and (max-width: 1130px) {
				.right_side {
						height: calc(100% - 100px);
				}
		}

}



/* FIREFOX SPECIFICS */

@-moz-document url-prefix() {
  	.right_side .main_content {
				height: calc(100% - 138px);
		}
		.right_side .main_content .tap_info {
				height: calc(100% + 3px);
		}
		.input_section input {
				height: 42px;
		}
}