@charset "UTF-8";
/* CSS Document */
body{
	background-color: #100E17;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
	border: 1px solid green;
	-webkit-text-fill-color: #BDBDBD;
	-webkit-box-shadow: 0 0 0px 1000px #000 inset;
	transition: background-color 5000s ease-in-out 0s;
}
/* Animations */
.fade-in {
	animation: fadeIn ease 3s;
	-webkit-animation: fadeIn ease 3s;
	-moz-animation: fadeIn ease 3s;
	-o-animation: fadeIn ease 3s;
	-ms-animation: fadeIn ease 3s;
}
.fade-in-fast{
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;
}
.fade-in-middle{
	animation: fadeIn ease 2s;
	-webkit-animation: fadeIn ease 2s;
	-moz-animation: fadeIn ease 2s;
	-o-animation: fadeIn ease 2s;
	-ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
	0% {opacity:0;}
	10% {opacity:0;}
	90% {opacity:0.9;}
	100% {opacity:1;}
}

@-moz-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
	0% {opacity:0;}
	10% {opacity: 0;}
	90% {opacity:0.9;}
	100% {opacity:1;}
}

@-o-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}


/* Main */
*{
	font-family: 'somatic', 'moon', 'calibri', 'arial';
}

@font-face{
	font-family:'somatic';
	src:url("font/Somatic-Rounded.otf");
	font-weight:100
}
@font-face{
	font-family:'moon';
	src:url("font/Moon2.0-Bold.otf");
	font-weight:100
}
::-webkit-scrollbar {
	display: none;
}
::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin:0;
}
#main, #account{
	margin-top: 80px;
	padding-bottom: 30px;
}
#main{
	height: 90vh;
}
#navbar{
	border-bottom:3px solid #201C29;
}

/* Stopwatch */
#stopwatch{
	border: 2px solid #100E17;/*#201C29*/
	height: 140px;
	border-radius: 25px 25px 0 0;
	margin: 5px -5px -20px -5px;
	padding: 20px 25px 20px 25px;
	/*background-color: #201C29;*/
	background-color:hsla(253,26%,7%,0.90);
	-webkit-backdrop-filter: blur(20px);
	/*
	MODE 2 
	border: 1px solid #201C29;
	height: 140px;
	border-radius: 25px 25px 0 0;
	margin: 5px 5px -20px 5px;
	padding: 20px;
	MODE 1 height: 75px;
	border-radius: 100px;
	margin: 5px 25px 45px 25px;
	padding: 10px;
	opacity: 0.97;*/
}
.stopwatch_control{
	font-size: 26px;
	border-radius: 100px;
	height: 54px;
	width: 54px;
}
#stopwatch_text{
	position: relative;
	top:8px;
}
.stopwatch_text_component{
	display: inline-block;
	min-width: 35px;
	text-align: left;
	padding-left:5px;
	font-size: 22px;
}

/* Personal class */
.pointer{
	cursor: pointer;
}
.d-none-opacity{
	opacity:0;
}
.gradient{
	background-image: linear-gradient(90deg,#ff8a00,#e52e71);
}
.gradient-2{
	background-image: linear-gradient(90deg,#ff8a00,orange);
}
.gradient-3{
	background-image: linear-gradient(90deg,#ff8a00,#e52e71 85%);
}
.gradient-4{
    background-image: linear-gradient(45deg, #ff8a00, limegreen);
}
.gradient-grey{
    background-image: linear-gradient(45deg, #222, #333);
}
.text-gradient{
	background: linear-gradient(90deg,#ff8a00,#e52e71);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	-webkit-box-decoration-break:clone;
}
.text-gradient-2{
	background: linear-gradient(90deg,#ff8a00,orange);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	-webkit-box-decoration-break:clone;
}
.text-gradient-2-like{
	color:#ff8a00;
}

.text-dark-purple{
	color: #100E17;
}
.text-dark-purple-light{
	color: #201C29;
}

.bg-dark-purple{
	background-color: #100E17;
}
.bg-dark-purple-light{
	background-color: #201C29;
}

.btn-dark-purple{
	background-color: #201C29;
	color:#ff8a00;
}
.btn-dark-purple:hover{
	background-color:#2B2638;	
	color:#ff8a00;
}

.spinner-size-1{
	width: 26px; 
	height: 26px;
}
.spinner-size-2{
	width: 20px; 
	height: 20px;
}

/* Cards */
.card_main{
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}
.card_img{
	width: 128px;
	margin: -20px 15px -20px -20px;
	border-radius: 0px;
}
.card_text{
	margin: -10px -15px -10px -10px
}
.card_kg{
	font-size: 20px;
	padding: 10px;
	margin-left: -10px;
}
.card_body{
	 height: 170px;
}
.card_favorite{
	float: right;
	font-size: 24px;
	position: relative;
	top:5px;
}
.change_kg_input{
	width: 95px;
	height: 50px;
	position: relative;
	top:-94px;
	left: 113px;
	border-radius: 10px;
	background-color:#2B2638;
	border: 0px;
	-webkit-box-shadow: none;
	box-shadow: none;
	font-size: 20px;
	padding-left: 15px;
	font-weight: 700;
	-webkit-backdrop-filter: blur(15px);
}
.change_kg_input:focus{
	outline: none;
}
.change_kg_input::placeholder{
	font-size: 20px;
	font-weight:700
}

/* Search */
#search_input{
	border-radius: 12px;
	border: 0px solid #777;
	font-weight:700;
	color: #444;
	border-color: #999;
	-webkit-box-shadow: none;
	box-shadow: none;
	font-size: 18px;
}
#search_input:focus { 
	outline: none; 
	background-color:#2B2638;
}	
#search_cancel{
	float: right;
	position:relative;
	top:-29px;
	left: -10px;
	cursor: pointer;
	visibility: hidden;
	margin:-10px;
	padding: 10px 15px 10px 25px;
	border: none;
	border-radius: 10px;
}
#search_cancel:hover{
	background-color:#2B2638;
}
#search_right_panel{
	float: right;
	position: relative;
	top: -41px;
	left: -7px;
	margin-bottom: -30px;
}
#search_home, #search_fav{
	height: 33px;
	border-radius: 10px;
	font-size: 17px;
}
#badge_fav_item, #badge_home_item, .badge_muscle_item{
	font-size: 18px;
	border-radius: 12px;
}
#badge_fav_item{
	margin-left: -14px;
}
/*#badge_muscle_container{
	overflow-x: scroll;
	width: 97vw;
	margin-left: -8px;
	padding-left: 22px; 
}
#scrollshadow_left{
	position: absolute;
	left: -90px;
	margin-top: 5px;
	height: 50px;
	width: 45px;
	box-shadow: 50px 0px 10px 20px #100E17;
	display: none;
}
#scrollshadow_right{
	position: absolute;
	right:0px;
	margin-top: 4px;
	height: 50px;
	width: 0px;
	box-shadow: -0px 0px 10px 20px #100E17;
	border: 2px solid #100E17;
}
*/
#badge_muscle_container{
	overflow-x: scroll;
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 22px;
	width:auto;
}
#scrollshadow_left{
	position: absolute;
	left: -80px;
	margin-top: 5px;
	height: 50px;
	width: 40px;
	box-shadow: 50px 0px 15px 20px #100E17;
	display: none;
}
#scrollshadow_right{
	position: absolute;
	right:0px;
	margin-top: 5px;
	height: 50px;
	width: 1px;
	box-shadow: -8px 0px 15px 20px #100E17;
}
@media (orientation: landscape) {
	#badge_muscle_container{
		overflow-x: scroll;
		margin-left: 0px;
		margin-right: 0px;
		width:100%;
	}
	#badge_muscle_container{
		padding-left: 15px;
	}
}
/* Connect */
#signin_email, #signin_password, #register_password, #register_verify, #register_email, #register_first_name, #register_last_name{
	background-color:#2B2638;
	-webkit-box-shadow: none;
	box-shadow: none;
	font-size: 20px;
	border-radius: 10px;
	border:0px;
	color: #BDBDBD;
	margin-top: 3px;
}
.signin_form_inputs::placeholder{
	color:#BDBDBD;
}
#signin_email_label, #signin_password_label{
	color: #BDBDBD;
}
#register_password:invalid, #register_first_name:invalid, #register_last_name:invalid, .register_password_invalid{
	/*background-color: #E83541;*/
	background-image: linear-gradient(-90deg,#E83541,#DC3243);
	color: #100E17;
}
.register_password_invalid::placeholder{
	color: #100E17;
}
#signin_submit, #register_submit{
	font-size: 20px;
	border-radius: 10px;
}
#signin_error_area{
	border-radius: 10px;
}

/* Account */
#account_card{
	border-radius: 10px;
}
#logout, #account_goback{
	border-radius: 10px
}
#account_button, #stopwatch_button{
	padding-right: 15px;
	padding-left: 15px;
}
#version{
	height: 40px;
	position: fixed;
	bottom: -20px;
	background-color: #100E17;
	-webkit-box-shadow: 0px -16px 20px 10px #100E17;
}

.modal-content{
	border-radius: 30px ;
	overflow: hidden;
}
.modal {
	background:hsla(253,24%,7%,0.7);
	-webkit-backdrop-filter: blur(10px);	
}
.modal_img_body{
	margin-top: -24px;
	padding: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.modal_img_close{
	font-size: 20px;
}
.modal_img_img{
	width: 100%;
}
.modal_img_close{
	position: relative;
	top: 40px;
	left: -10px;
	background-color: #111;
	border-radius: 50px;
	padding: 8px 13px 9px 14px;
	color:white;
}
.modal_info_body{
	color:white;
	position: relative;
	top:70px;
	border-radius: 25px;
	padding: 30px;
	align-content: center;
}
.modal_card_kg{
	float: right;
	font-size: 24px;
	position: relative;
	top: -40px;
}