html {
	font-size: 10px;
}

html,body {
	height: 100% !important;
	border: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	overflow-x: hidden;
}

body {
	background-color: rgb(228, 237, 243);
	font-size: 1.2rem;
}

/* ******************************************************************
								LOGIN 
******************************************************************* */

#login-btn, #register-btn, #reset-btn, #btn_forgot, #check_status, #btc_amount, #btc_amount_label {
	background-color: #17a2b8;
	border: 1px solid #17a2b8;
}



#add_funds, #add_btn{
	background-color: #17a2b8;
	border: 1px solid #17a2b8;
}

#wallet_address {
	font-size: 1.08rem !important;
}

.wallet_display, .plans_display {
	height: 400px;
}

.activities_display {
	min-height: 259px;
	
}

#silver_amount,
#gold_amount,
#diamond_amount {
	width: 3.8rem;
}

#silver_spinner, #gold_spinner, #diamond_spinner {
	padding-left: 7rem !important;
}

/* Hide the default number input spinner */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    /* Optional: Control input styles */
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield; /* Other browsers */
}

input {
	font-size: 1.6rem !important;
}

#trx {
	background-color: #eee;
}

/* #eye-slash-password {

} */

#add_photo {
	position: absolute;
	top:76%;
	left: 43%;
	height: 3.5rem;
	border-radius: 10% 10% 20% 20%;
}

#form-photo {
	margin: -1.2rem;
}

#_body .brand {
	width: 10rem;
	height: 10rem;
	overflow: hidden;
	border-radius: 50%;
	margin: 4rem auto;
	/* box-shadow: 0 4px 8px rgba(0,0,0,.05); */
	position: relative;
	z-index: 1;
	background-color: #004767;
}

#_body .brand img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#add_photo-label {
	position: relative;
    font-size: 3rem;
    top: -1.2rem;
    cursor: pointer;
	color: #555;
	padding: 0 0.5rem;
	border-radius: 2.5rem;
	background-color: #fff;
	color: #03BFCB;
}

#forgot_brand {
	cursor: pointer;
}

.form-control:focus {
	box-shadow: none !important;
}

#_body .brand img {
	width: 100%;
}

#_body .card-wrapper {
	width: 40rem;
	margin: 0 auto;
}

#_body .card {
	border-color: transparent;
	/* box-shadow: 0 4px 8px rgba(0,0,0,.05); */
}

#_body .card.fat {
	padding: 1rem;
}

#_body .card .card-title {
	font-family: 'Montserrat', sans-serif, Times, serif;
	font-weight: 700;
	margin-bottom: 3.5rem;
	font-size: 2.2rem !important;
	color: #4b4a4a;
}



#refresh_captcha{
	font-size: 1.55rem;
}

#copy_amount_btn, #copy_address_btn {
	color: #17a2b8;
	font-size: 2rem;
}

.spinner-border {
	color : #17a2b8 !important;
}

#_body .form-control {
	border-width: 0.23px;
}

#_body .form-group label {
	width: 100%;
}

#_body .btn.btn-block {
	padding: 1.2rem 1rem;
}

#_body .footer {
	margin: 4rem 0;
	color: #888;
	text-align: center;
}

/*********************************************************/
/*                        PROFILE                        */
/*********************************************************/

.titles {
	font-size: 1.4rem;
	color: #272727;
	text-transform: uppercase;
}

.fullname  {
	font-size: 1.4rem;
	color: #03BFCB;
	font-weight: bold;
	text-transform: uppercase;
}


.middle-container{
	background-color: #eee;
	border-radius: 1.2rem;

}
.middle-container:hover {
	border: 1px solid #03BFCB;
}
.dollar-div{
	background-color: #03BFCB;
	padding: 1.2rem;
	border-radius: 1rem;
}

.round-div{
	border-radius: 50%;
	width: 3.5rem;
	height: 3.5rem;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.dollar{
	font-size: 1.6rem !important;
	color: #03BFCB !important;
	font-weight: bold !important;
}


.current-balance{
	font-size: 1.4rem;
	color: #272727;
}
.amount{
	color: #03BFCB;
	font-size: 1.6rem;
	font-weight: bold;
}
.dollar-sign{
	font-size: 1.6rem;
	color: #272727;
}

button {
	appearance: none;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	line-height: 1;
	padding: 1em 1.5em;
	position: relative;
	border: none;
	transition: filter var(--motion-duration);
}

button:hover {
	filter: brightness(1.1);
}

button:active {
	filter: brightness(0.9);
}

button > span {
	display: block;
	position: relative;
	transition: transform var(--motion-duration) var(--motion-ease);
	z-index: 1;
}

button:hover > span {
	transform: scale(1.05);
}

button:active > span {
	transform: scale(0.95);
}

button > svg {
	fill: #03BFCB;
	position: absolute;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
}

button > svg > path {
	transition: var(--motion-duration) var(--motion-ease);
}

button:hover > svg > path {
	d: path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0");
}

button:active > svg > path {
	d: path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0");
}

button:focus {
	outline: none !important;	
}

#loading_sp {
	z-index: 10000000;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #55555527;
}

#instructions {
	position: absolute;
	font-size: 1.4rem;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000a4;
	z-index: 10000000;
	color: #fff;
}

#info, #infoPlans {
	background-color: #17a2b8 !important;
	color: #fff !important;
	border: none !important;
}
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 25rem; /* Set a default minimum width */
	margin-left: -12.5rem; /* Divide value of min-width by 2 */
	background-color: #03BFCB; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 0.2rem; /* Rounded borders */
	padding: 1.6rem; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 6rem; /* 30px from the bottom */
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
	However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 6rem; opacity: 1;}
  }
  
  @keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 6rem; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
	from {bottom: 6rem; opacity: 1;}
	to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
	from {bottom: 6rem; opacity: 1;}
	to {bottom: 0; opacity: 0;}
  }

@media screen and (max-width: 505px) {

	#reset_section, #verification_section, #login_section, #forgot_section, #register_section {
		background-color: #fff;
	}

	
	#_body .card-wrapper {
		/* width: 90%; */
		margin: 0 auto;
		background-color: #fff;
	}

	.card {
		border: none !important;
		background-color: #fff;
		box-shadow: none !important;
	}
}

@media screen and (max-width: 320px) {
	#_body .card.fat {
		padding: 0;
	}

	#_body .card.fat .card-body {
		padding: 1.5rem;
	}

	#reset_section, #verification_section, #login_section, #forgot_section, #register_section {
		background-color: #fff;
	}
	
	#_body .card-wrapper {
		width: 90%;
		margin: 0 auto;
		background-color: #fff;
	}

	.card {
		border: none !important;
		background-color: #fff;
		box-shadow: none !important;
	}
}