/*^ IMPORTS */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&family=Seymour+One&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&family=Seymour+One&display=swap');

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'El Messiri';
	/* font-size: calc(100% + 4pt); */
}

/*^ Variables*/
:root {
	--trans: 800ms ease-in-out;
	--orange: #de7504;
	--aqua: #3dffec;
}


/*@ Dark Theme */
div.alert,
.list-group-item,
input.form-control,
input.form-control:focus,
textarea.form-control,
textarea.form-control:focus,
textarea.admin,
textarea.admin:focus,
.modal-content,
textarea.admin:read-only,
textarea.article-content,
textarea.article-content:focus,
textarea.article-content::-webkit-scrollbar,
textarea.article-content::-webkit-scrollbar-corner,
select[name="users-table_length"],
select[name="posts-table_length"],
select[name="earth-table_length"],
/*~ How to select a pagination button in datatables table */
.page-link,
/*~ How to select a textarea scrollbars */
textarea::-webkit-scrollbar,
textarea::-webkit-scrollbar-corner,
/*~ How to select a form-control-file (file upload) button */
input::-webkit-file-upload-button,
.darktheme,
div.form-control.btn-group,
.accordion-body {
	background: black !important;
	color: white !important;
}

/*^  			FOR INDEX.html or INTRO */

.section-header {
    background-color: black;
    border-radius: 1rem;
    letter-spacing: .1rem;
    font-weight: bold;
	margin: 0px;
}

.header-cont {
	padding-top: .25rem;
	padding-bottom: 1rem;
	margin: 0px;
}

.body-text {
	margin: 6px 4px 3px 12px;
}

s {
	text-decoration: line-through;
	text-decoration-thickness: 3px;
}

/*
~ 							  __  ______________   ______________________
@ 							 / / / /_  __/  _/ /  /  _/_  __/  _/ __/ __/
* 							/ /_/ / / / _/ // /___/ /  / / _/ // _/_\ \
/ 							\____/ /_/ /___/____/___/ /_/ /___/___/___/
*/

/*!     					TO DISABLE ENTIRE PAGE */
.disable-page {
	pointer-events: none;
	scroll-behavior: none;
}

/*@ For No Wraps */
span.nowrap {
	word-wrap: nowrap;
}

/*@ For Indenting */
.indentme {
	margin-left: 2rem;
}

/*@ For reducing containers to the size of their content */
.fit-content {
	width: fit-content!important;
	height: fit-content!important;
}

/*@ For centering block-level elements */
.centerme {
	margin-inline: auto;
}

/*@ For Darktheme */
.darkme {
	background-color: black!important;
	color: white!important;
}

/*@ For Darktheme Less Specificity*/
.darkme-ls {
	background-color: black;
	color: white;
}

/*@ For Black Backgrounds Only */
.blackground {
	background-color: black;
}

/*@ For making borders rounder */
.round-me {
	border-radius: 4px;
}

.pillme {
	border-radius: 18px;
}

.teardropme {
	border-radius: 0px 40px;
}
.r-teardropme {
	border-radius: 40px 0px;
}

/*@ Dividing Line */
hr.b-line {
	padding-bottom: 2px;
	margin: 5px 0px 8px 0px;
	border: 1px solid white !important;
	color: white !important;
	border-width: 100% !important;
}

/*@ For Scroll To Top Button */
body .scroll-to-top {
	bottom: 0.8rem;
	display: none;
	position: fixed;
	right: 1rem;
	text-decoration: none;
	z-index: 1000;
}

/*@ For Making Text Too Small To Read */
.too-small {
	font-size: 1pt;
}

/*@ For Button Text */
.btn {
	font-weight: bold;
}

.overflow-down {
	background-clip: padding-box;
	padding-bottom: 50px;
}

.overflow-up {
	background-clip: padding-box;
	padding-top: 50px;
}

/*^  			Utilities For Borders */

.b-top {
	border-top: 2px solid white;
	border-right: none;
	border-bottom: none;
	border-left: none;

}

.b-right {
	border-top: none;
	border-right: 2px solid white;
	border-bottom: none;
	border-left: none;
}

.b-bottom {
	border-top: none;
	border-right: none;
	border-bottom: 2px solid white;
	border-left: none;
}

.b-left {
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 2px solid white;
}

.b-left-right {
	border-top: none;
	border-right: 2px solid white!important;
	border-bottom: none;
	border-left: 2px solid white!important;
}

.b-top-bottom {
	border-top: 2px solid white;
	border-right: none;
	border-bottom: 2px solid white;
	border-left: none;
}

.b-no-bottom {
	border-top: 2px solid white;
	border-right: 2px solid white;
	border-bottom: none;
	border-left: 2px solid white;
}

.b-no-top {
	border-top: none;
	border-right: 2px solid white;
	border-bottom: 2px solid white;
	border-left: 2px solid white;
}



/*^  For Post-Pagination Container & for EarthPics Pagination Container */
div.post-pages {
	padding: 1rem;
	width: fit-content;
	border-radius: 4px 30px;
}

/*^  For Pagination Buttons & For EarthPics Pagination Buttons*/
a.page-button{
	font-weight: bold;
}

/*^  For Pagination Ellipses */
span.text-info.ellipsis {
	font-size: 20pt;
}

/*
*             _____ ___ _     _____     _   _ ____  _     ___    _    ____  ____
*            |  ___|_ _| |   | ____|   | | | |  _ \| |   / _ \  / \  |  _ \/ ___|
*            | |_   | || |   |  _|     | | | | |_) | |  | | | |/ _ \ | | | \___ \
*            |  _|  | || |___| |___    | |_| |  __/| |__| |_| / ___ \| |_| |___) |
*            |_|   |___|_____|_____|    \___/|_|   |_____\___/_/   \_\____/|____/
*/

/*@ Removing the file upload button */
/*~ How to select a form-control-file (file upload) button */
/* input::-webkit-file-upload-button {
	display: none;
} */

input.form-control-file.text-info#profile_pic {
	max-width: 200px;
}

.form-control-file {
	border: 1px solid white;
	background-color: black;
	border-radius: .2rem;
}

/*@ Dropzone Field Colors */
.dz-remove,
.dz-preview,
.dz-details {
	background-color: #000 !important;
	color: #3dffec !important;
}

/*@ Remove Progress Bar */
.dz-progress {
	display: none;
}

span[data-dz-size],
span[data-dz-name] {
	background-color: #000 !important;
}

/*@ Reduce Dropzone Box Width */
div#dz-picture {
	max-width: 200px;
}

.dz-error-message {
	margin-top: 30px  !important;
	/* position: relative!important; */
}


/*@ For page links and file upload buttons hover */
.page-link:hover,
li.paginate_button.page-item a:hover,
li#earth-table_previous a:hover,
li#earth-table_next a:hover,
a.page-link:hover,
input::-webkit-file-upload-button:hover {
	background: #58bbe3 !important;
	color: black !important;
	transition: var(--trans)!important;
}

/*@ For file upload button border */
input::-webkit-file-upload-button {
	border: 1px solid #58bbe3  !important;
	margin-left: 0px;
	padding-left: 0px;
}

/*@ For Border Hover & Focus */
.border-hov:hover,
.border-hov:focus,
.border-hov:focus-visible,
.border-hov:focus-within {
	border-color: #58bbe3 !important;
	transition: var(--trans);
}

/*@ For File Upload Label */
.up-label {
	margin-bottom: 10px;
}

.col-3.form-control-file.text-info.mb-2.me-5.border-hov {
	padding-left: 0px;
	min-width: 150px;
}

.content {
	height: 120px;
	font-size: 16px;
}

body {
	margin-top: 5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #c9c9c9;
}

/*
^						__   _ _______ _    _ ______  _______  ______
^						| \  | |_____|  \  /  |_____] |_____| |_____/
^						|  \_| |     |   \/   |_____] |     | |    \_
*/

/*@ For navbar background */
nav.navbar {
	background: hsla(180, 100%, 25%, 0.505);
	background: repeating-linear-gradient(45deg, hsla(180, 100%, 25%, 0.533) 17%, hsla(0, 0%, 0%, 0.548) 35%, hsla(195, 100%, 51%, 0.521) 50%, hsla(0, 0%, 0%, 0.539) 66%, hsla(285, 90%, 15%, 0.534) 72%, hsla(180, 100%, 17%, 0.548) 83%);

	transition: var(--trans);
}

/*@ For navbar background hover */
nav.navbar:hover {
	background-color: hsl(281, 100%, 27%);
	transition: var(--trans);
}

/*@ For nav-header,  */
.site-header,
.nav-link,
.nav-dropdown-item {
	color: #e3f5ff;
	font-weight: 1rem;
	transition: var(--trans);
}


.site-header,
.nav-link:hover,
a[class="navbar-brand mr-4 tt"]:hover {
	color: var(--aqua)!important;
	transition: var(--trans);
}

.nav-dropdown-item:hover {
	background-color: black;
	color: var(--aqua)!important;
	transition: var(--trans);
}

.nav-link:hover,
.nav-dropdown-item:hover {
	font-size: 1.1rem;
	transition: var(--trans);
}

.site-header .navbar-nav .nav-link.active {
	font-weight: 500;
}

.nav-img {
	height: 30px;
	width: 30px;
	margin-right: 5px;
	border: 1px solid brown;
	background-color: brown;
}

/*@ For Navbar Dropdown */

li.nav-item-dropdown-menu {
	position: relative;
}

.nav-dropdown-list-item {
	transition: var(--trans) ease-in-out;
}


.content-section {
	background: black;
	color: white;
	padding: 10px 20px;
	border: 1px solid #dddddd;
	border-radius: 6px!important;
	margin-bottom: 20px;
}

.article-title {
	color: #b7b7b7;
	transition: var(--trans);
}

a.article-title:hover {
	color: #428bca;
	text-decoration: none;
	transition: var(--trans);
}

.article-content {
	width: 100%;
	scroll-behavior: smooth;
	height: 100px;
	max-height: 520px;
	overflow: scroll;
	resize: vertical;
}

.datetime {
	line-height: 15px;
}

.no-decoration {
	text-decoration: none;
	line-height: 19px;
}

/*@ For User Link */
a.user-name {
	font-size: 16pt;
	transition: var(--trans);
}

.article-img {
	height: 65px;
	width: 65px;
	margin-right: 16px;
	border: 1px solid brown;
	background-color: brown;
}

.rounded-circle.article-img,
.rounded-circle.account-img,
.rounded-circle.nav-img {
	background-size: cover;
	background-position: center center;
	object-fit: cover;
}


.article-metadata {
	padding-bottom: 1px;
	margin-bottom: 4px;
	border-bottom: 1px solid #e3e3e3;
}

/*@ For Divider HRs */
div.head-div#head-div {
	padding-bottom: 2px;
	margin: 20px 0px 8px 0px;
	border: 1px solid white !important;
	color: white !important;
	border-width: 100% !important;

}

.article-metadata a:hover {
	color: firebrick;
	text-decoration: none;
	transition: var(--trans);
}

.article-svg {
	width: 25px;
	height: 25px;
	vertical-align: middle;
}

.account-img {
	height: 125px;
	width: 125px;
	margin-right: 20px;
	margin-bottom: 16px;
	background-color: brown;
}

.account-heading {
	font-size: 2.5rem;
}

.text-muted {
	color: #bdbaba !important;
}

/*@ For About Page Message Textarea */
textarea.textarea-complaint {
	height: 8rem!important;
}

/*^  		For Flash Messages/Alerts */

div.alert.alert-success {
	border: 2px solid #00ff00;
	color: #0f0 !important;
}

div.alert.alert-danger {
	border: 2px double #f00;
	color: #f00 !important;
}

div.alert.alert-warning {
	border: 2px solid #ffff00;
	color: #ffff00 !important;
}

div.alert.alert-info {
	border: 2px solid #4791fe;
	color: #aaccfe !important;
}

/*@ 					 For Alert Before Fade */
.alert.alert-dismissible {
	opacity: 1;
	transition: 2000ms;
}

/*^ 					 For Alerts Fade Out Behavior*/
.fademe {
	opacity: 0;
	transition: 5000ms;
}


.modal-content {
	border: 1px solid white;
}


/*@ For Anything Hidden */
.hidden {
	display: none;
}

/*
*				    _    ____  __  __ ___ _   _   _____  _    ____  _     _____ ____
*				   / \  |  _ \|  \/  |_ _| \ | | |_   _|/ \  | __ )| |   | ____/ ___|
*				  / _ \ | | | | |\/| || ||  \| |   | | / _ \ |  _ \| |   |  _| \___ \
*				 / ___ \| |_| | |  | || || |\  |   | |/ ___ \| |_) | |___| |___ ___) |
*				/_/   \_\____/|_|  |_|___|_| \_|   |_/_/   \_\____/|_____|_____|____/
*/

/*^  						FOR ADMIN SECTION BORDER */
div.section-border {
	margin-top: 5rem;
}

/*^  							FOR ALL TABLES */

/*@ FOR ALL HEADERS */
.admin-edit-header {
	width: 147px;
}


/*@  For table id */
td.admin-id {
	width: 64px;
}

/*@ 		For every row */
td.admin,
td.a-size.admin.admin-post-size {
	max-height: 32px;
	overflow: hidden;
	resize: both;
}

/*@ For All Button Groups */
td.btn-group.a-edit {
	height: 60px !important;
}

/*^ 							FOR USER HEADERS */

.admin-id-header {
	width: 43px;
}

.admin-username-header {
	width: 17ch;
}

.admin-email-header {
	width: 24ch;
}

.admin-application-date-header {
	width: 15ch;
}

.admin-account-confirmed-header {
	width: 5ch;
}

.admin-registration-date-header {
	width: 23ch;
}

/*^ 						FOR POST HEADERS */

th.a-size {
	min-width: 80px;
}

.a-user {
	width: 43px;
}

th.a-title {
	width: 145px;
}

th.a-content {
	width: 250px;
}

th.a-postdate {
	min-width: 90px;
}






/*
&                 ____   ___  ____ _____        ___ __  __    _    ____ _____ ____
&                |  _ \ / _ \/ ___|_   _|      |_ _|  \/  |  / \  / ___| ____/ ___|
&                | |_) | | | \___ \ | |         | || |\/| | / _ \| |  _|  _| \___ \
&                |  __/| |_| |___) || |         | || |  | |/ ___ \ |_| | |___ ___) |
&                |_|    \___/|____/ |_|        |___|_|  |_/_/   \_\____|_____|____/
*/

.post-image {
	max-height: 20rem;
	border-color: brown;
}

.post-image-cont {
	border-color: brown;
}


/*@ For Upload Space Remaining Display (create_post.html) */
div.bytes-display,
div.inlineme {
	max-width: 120px;
	max-height: 35px;
	border-radius: 8% !important;
	border: turquoise solid 2px !important;
	text-align: center !important;
	font-size: larger;
	padding-top: 0px;
}

/*@ For Upload Space Remaining Label (create_post.html) */
input[class="col-4 form-label usr-label tt"][id="usr-label"] {
	padding: 100px !important;
}

/*@ For 2nd Upload Space Remaining Label (account.html) */
/* div.usr-label-2 {
	padding-top: 4rem!important;
} */

/*^  			For Embedded Videos */
div.video-frame {
	max-width: 450px;
}

/*^  			For Accordion Menus */


div.label-row {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.accordion-button.home:not(.collapsed) {
	color: #0F0 !important;
	background-color: black !important;
	font-weight: bolder;
	font-size: 15pt;
	transition: 1000ms;
}


.accordion-button.home.collapsed {
	color: #fff4d9 !important;
	background-color: black !important;
	transition: 1000ms;
}


.accordion-button.home.collapsed:hover {
	color: rgb(187, 207, 255) !important;
	transition: 1000ms;
	font-weight: bolder;
	font-size: 15pt;
	background-color: #00589f !important;
}


/*^  		INTERESTS LINKS */

div.list-group a.interests-item {
	border: 1px solid rgb(106, 106, 254);
	border-radius: 4px;
	transition: var(--trans);

}

/* @ animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
div.list-group a.interests-item:is(:hover, :focus, :active, .active) {
	border: 1px solid hsla(150, 66%, 54%, 0.856);
	color: var(--orange)!important;
	font-size: calc(100% + 2pt);

}

@keyframes mymove {
	0% {left: 0px; background-color: red; top: 0px;}
	50% {left: 350px; background-color: #970505; top: 100px;}
	100% {left: 0px; background-color: #4679e8; top: 0px;}
}

/*

* 				#######  ##### ######  ###### ### ### ###### ####### #####  #####
* 				 ###     #####  ###### ######  ## ##   ######  ###  ### ## ###  #
* 				 #####   ## ##  ##  ## # ## #  #####   ##  ##  ###  ###    #####
* 				 ###     #####  #####    ##    #####   #####   ###  ###     #####
* 				 ###     ## ##  #####    ##    ## ##   ###     ###  ### ## #  ###
* 				####### ### ### ##  ##  ####  ### ### #####  ####### ##### #####
earthpics
*/

/*^  				DISCLAIMER */
.disclaimer-cont {
	width: 20%;
	margin-bottom: 2rem;
	transition: 200ms ease-in-out;
}

.accordion-button.collapsed.earthpics {
	color: black !important;
	font-size: 12pt;
	background-color: yellow !important;
	transition: var(--trans);
	height: .2rem;
}

.accordion-button.earthpics:not(.collapsed:hover) {
	background-color: black;
	color: var(--aqua);
	font-size: 14pt;
}

.accordion-button.collapsed.earthpics:hover {
	color: blue!important;
	font-size: 14pt;
	background-color: #ff0000!important;
	transition: var(--trans);
}

.disclaimer-cont.expanded {
    width: 100%;
	transition: 200ms ease-in-out;
}





/*^  				TABLE BODY */
.vertical-table td {
	display: block;
	text-align: center;
	border: none;
}

/*^  				ID */
tr .earthpics-id {
	font-size: 18pt;
	color: #3dffec!important;
}

.earthpics-id-cont {
	border-top: 2px solid white!important;
	border-left: 2px solid white!important;
	border-right: 2px solid white!important;
	border-bottom: 1px solid white!important;
	border-radius: 40px 40px 0px 0px!important;
}

/*^  				IMAGE */
.earthpics-image {
	max-height: 40rem;
}

.earthpics-image-cont {
	padding: 2rem;
	border-top: 1px solid white!important;
	border-left: 2px solid white!important;
	border-right: 2px solid white!important;
	border-bottom: 1px solid white!important;
}

/*^  				NAME */
td.earthpics-name {
	font-size: 16pt;
	color: var(--orange);
	border-top: 1px solid white;
	border-left: 2px solid white;
	border-right: 2px solid white;
	border-bottom: 1px solid white;
}

/*^  				SIZE */
td.earthpics-size {
	color: var(--aqua);
}


/*^  				DATE_ADDED */
td.earthpics-date-added {
	color: var(--aqua);
	border-top: 1px solid white;
	border-left: 2px solid white;
	border-right: 2px solid white;
	border-bottom: 2px solid white;
	border-radius: 0px 0px 40px 40px;
}


/*@ I don't know why I put this here. Delete if 2023/01/08  11:15 AM */
/* table.vertical-table {
	border: none;
} */

tr.earthpics-headers {
	align-items: center;
	font-size: large;
	margin-top: 2rem;
}

/*@ For Blanking The Spacer */
tr.content-section td:last-child {
	min-height: 3rem;
	background-color: rgba(0, 0, 0, 0)!important;
	color: rgba(0, 0, 0, 0)!important;
	border: none;
}

/*@ For Centering Table Header Text Horizontally */
th.col.sorting {
	text-align: center;
}

/*@ For Removing Empty "tags", "social", and "artist" cells*/
td.nodisplay {
	display: none;
}

/*^  				FOR DATATABLES ELEMENTS */

/*@ For DataTables Info (Bar at the bottom of the page) */
div#earth-table_info {
	padding: 4px 6px;
	width: fit-content;
	height: fit-content;
	background-color: black;
	border: 1px solid white;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-content: center;
}

div.col-sm-12.col-md-6 {
	margin-bottom: 1rem!important;
}


/*
/ 									 _     ___    _    ____ ___ _   _  ____
/ 									| |   / _ \  / \  |  _ \_ _| \ | |/ ___|
/ 									| |  | | | |/ _ \ | | | | ||  \| | |  _
/ 									| |__| |_| / ___ \| |_| | || |\  | |_| |
/ 									|_____\___/_/   \_\____/___|_| \_|\____|
/ 							     _    _   _ ___ __  __    _  _____ ___ ___  _   _
/ 							    / \  | \ | |_ _|  \/  |  / \|_   _|_ _/ _ \| \ | |
/ 							   / _ \ |  \| || || |\/| | / _ \ | |  | | | | |  \| |
/ 							  / ___ \| |\  || || |  | |/ ___ \| |  | | |_| | |\  |
/ 							 /_/   \_\_| \_|___|_|  |_/_/   \_\_| |___\___/|_| \_|
*/


div.loader1-wrapper {
	display: none;
	position: fixed;
	top: 65%;
	left: 30%;
	width: 100%;
	height: 100%;
	z-index: 99;
}

body#bawdy {
	opacity: 1;
}

h1.loader1 {
	font-family: "Open Sans", -apple-system, "Segoe UI", sans-serif;
	font-size: 50px;
	font-weight: bold;
	color: white;
	box-sizing: border-box;
}

.dots {
	display: inline-flex;
}

.dots--animate .dot.z {
	-webkit-animation: scale 0.8s 0.2s forwards;
	animation: scale 0.8s 0.2s forwards;
}

.dots--animate .dot.f,
.dots--animate .dot.s {
	-webkit-animation: right 0.5s forwards;
	animation: right 0.5s forwards;
}

.dots--animate .dot.l {
	-webkit-animation: rightDown 0.4s 0.1s forwards linear, drop 2s 0.4s forwards linear;
	animation: rightDown 0.4s 0.1s forwards linear, drop 2s 0.4s forwards linear;
}

.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 10px;
	position: relative;
	margin-left: 6px;
}

.dot.z {
	position: absolute;
	transform: scale(0);
}

@-webkit-keyframes scale {
	100% {
		transform: scale(1);
	}
}

@keyframes scale {
	100% {
		transform: scale(1);
	}
}

.dot.f,
.dot.s {
	transform: translateX(0px);
}

@-webkit-keyframes right {
	100% {
		transform: translateX(16px);
	}
}

@keyframes right {
	100% {
		transform: translateX(16px);
	}
}

.dot.t {
	background: transparent;
}

.dot .l {
	margin-left: 0;
	position: absolute;
	top: 0;
	left: 0;
}

@-webkit-keyframes rightDown {
	50% {
		top: 4px;
		left: 16px;
	}

	100% {
		top: 12px;
		left: 24px;
	}
}

@keyframes rightDown {
	50% {
		top: 4px;
		left: 16px;
	}

	100% {
		top: 12px;
		left: 24px;
	}
}

@-webkit-keyframes drop {
	100% {
		transform: translate(70px, calc(35px + (100vh/2)));
	}
}

@keyframes drop {
	100% {
		transform: translate(70px, calc(35px + (100vh/2)));
	}
}