/*
*  Stylesheet for:
*	  BuyTronEnergy & BuyTronBandwidth 2023 theme
*     Based heavily on bootstrap 5.3 dark theme
*/

/*
*  Title Font - Quicksand
*  https://fonts.google.com/specimen/Quicksand?preview.text=B%20A%20N%20D%20W%20I%20D%20T%20H&preview.size=62&preview.layout=row&preview.text_type=custom&category=Sans+Serif,Display
*/
	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');

/*
*  Alternate Font - Product Sans
*/
	@font-face {
		font-family: 'ProductSansLight';
		src: url('../webfonts/ProductSans-Light.woff') format('woff');
		font-weight: 300;
		font-style: normal;

	}
	@font-face {
		font-family: 'ProductSansRegular';
		src: url('../webfonts/ProductssSansRegular.woff2') format('woff');
		font-weight: 400;
		font-style: normal;
	}
	@font-face {
		font-family: 'ProductSansMedium';
		src: url('../webfonts/ProductSans-Medium.woff') format('woff');
		font-weight: 500;
		font-style: normal;
	}
	@font-face {
		font-family: 'ProductSansBold';
		src: url('../webfonts/ProductSansBold.woff2') format('woff');
		font-weight: 600;
		font-style: normal;
	}


/*
*  General Styles
*/
	/*
	*  Background Gradient Creator
	*  https://www.freecodecamp.org/news/css-radial-gradient/
	*/
	body {
		margin: 0;
		padding: 0 0 80px 0;
		background-color: #11131e;
		background-size: 2000px 1000px;
		background-repeat: repeat-y;
		background-position-x: center;
		background-image: 
			/* Blue Blobs */
			radial-gradient(
				500px at 500px 250px,
				rgba(30, 32, 73, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 1500px 250px,
				rgba(30, 32, 73, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 500px 1250px,
				rgba(30, 32, 73, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 1500px 1250px,
				rgba(30, 32, 73, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 1000px 250px,
				rgba(30, 32, 73, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 1000px 1250px,
				rgba(30, 32, 73, 0.6), 
				transparent
			),
			/* Pink Blogs */
			radial-gradient(
				500px at 600px 750px,
				rgba(48, 26, 65, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 600px -250px,
				rgba(48, 26, 65, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 1400px 750px,
				rgba(48, 26, 65, 0.6), 
				transparent
			),
			radial-gradient(
				500px at 1400px -250px,
				rgba(48, 26, 65, 0.6), 
				transparent
			);
	}

	/* Centered container */
		.c_center {
			text-align: center;
		}

	/* No wrap container */
		.c_nowrap {
			white-space: nowrap;
		}

	/* Switchable text */
		/* Default to full word */
			.switchable::after {
				content: attr(data-full);
			}
	
		/* Show abbreviation only between 1201px and 1400px */
			@media (min-width: 1201px) and (max-width: 1400px) {
				.switchable::after {
					content: attr(data-short);
				}
			}

	/* Button loading animated ellipsis */
		.loading:after {
			content: ' .';
			font-weight: 500;
			animation: dots 1s steps(5, end) infinite;
		}
		@keyframes dots {
			0%,
			20% {
				color: transparent;
				text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
			}
			40% {
				color: #fff;
				text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
			}
			60% {
				text-shadow: 0.25em 0 0 #fff, 0.5em 0 0 transparent;
			}
			100%,
			80% {
				text-shadow: 0.25em 0 0 #fff, 0.5em 0 0 #fff;
			}
		}

	/* Resource schedule animated alert glow */
		.c_energy .glow,
		#modal_energy_recovery_schedule .glow {
			animation: glow_energy 2s ease-in-out infinite alternate;
		}
		@keyframes glow_energy {
			from {
				color: inherit;
				text-shadow: 0 0 10px rgba(202, 92, 88, 0);
			}
			to {
				color: rgba(202, 92, 88);
				text-shadow: 0 0 3px rgba(202, 92, 88, 0.8);
			}
		}

		.c_bandwidth .glow,
		#modal_bandwidth_recovery_schedule .glow {
			animation: glow_bandwidth 2s ease-in-out infinite alternate;
		}
		@keyframes glow_bandwidth {
			from {
				color: inherit;
				text-shadow: 0 0 10px rgba(120, 93, 200, 0);
				
			}
			to {
				color: rgb(120, 93, 200);
				text-shadow: 0 0 3px rgba(120, 93, 200, 0.8);
			}
		}


/*
*  Navbar Styles
*/
	.navbar {
		transition: background-color .25s;
		background: transparent;
	}
		.navbar-brand {
			margin-right: 0;
		}
		.navbar-nav li:nth-of-type(3) {
			display: none;
		}
		.navbar-toggler:focus {
			box-shadow: none;
		}

	.navbar-nav li a {
		text-transform: uppercase;;
	}
	.navbar-nav li:nth-of-type(3) #btn_connect_tronlink,
	.mobile_tronlink_button .btn_connect_tronlink {
		margin: 0 auto;
	}


	html:not([data-scroll='0']) {
		.navbar {
			background: linear-gradient(180deg, rgba(18,20,33,1) 0%, rgba(18,20,33,0.5) 100%);
		}
		.navbar-nav li:nth-of-type(3) {
			margin-top: 10px;
			display: block;
		}
	}

	
	

/*
*  Logo Styles
*/
	.logo {
		color: #fff;
		font-family: 'Quicksand', sans-serif;
		font-size: 20px;
		font-weight: 300;
		white-space: nowrap;
		position: relative;
	}
		.logo strong {
			font-weight: 600;
		}
		.logo svg {
			position: absolute;
			top: 3px;
			left: 0;
		}

	#logo_energy {
		padding: 10px 10px 10px 52px;
	}
		#logo_energy strong {
			color: #da5353;
		}

	#logo_bandwidth {
		padding: 10px 10px 10px 52px;
	}
		#logo_bandwidth strong {
			color: #7860c8;
		}


/*
*  Responsive Nav & Logo
*/
	@media (min-width: 576px) { 
		
	}
	@media (min-width: 768px) {
		.logo {
			font-size: 20px;
		}
		.logo svg {
			top: 3px;
		}
	}
	@media (min-width: 992px) {
		.logo {
			font-size: 30px;
		}
		.logo svg {
			top: 12px;
		}
		.navbar-nav li:nth-of-type(2) {
			margin-right: 10px;
		}
		.navbar-nav li:nth-of-type(3) {
			display: block;
		}
		.mobile_tronlink_button {
			display: none;
		}

		html:not([data-scroll='0']) {
			.navbar-nav li:nth-of-type(3) {
				margin-top: 0;
				display: block;
			}
		}
	}


/*
*  Custom Spinner
*/
	.c_bte_loader {
		display: none;
	}
	.bte_loader {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
		position: relative;
		transform: scale(0.5);
	}
		.bte_loader .microchip {
			font-size: 200px;
			color: #2d3134;
			overflow: hidden;
		}
		.bte_loader .microchip.body {
			width: 124px;
			/*color: #2d3134;*/
		}
			.bte_loader .microchip.body span {
				border-radius: 18px;
				width: 124px;
				height: 200px;
				background-color: #2d3134;
				display: block;
			}
		.bte_loader .microchip.leftleg {
			width: 37px;
			color: #3a3e42;
		}
		.bte_loader .microchip.rightleg {
			width: 37px;
			color: #3a3e42;
			position: relative;
			overflow: hidden;
		}
			.bte_loader .microchip.rightleg i {
				position: relative;
				left: -163px;
			}
		.bte_loader .gearmask {
			border: 1px solid #2d3134;
			border-radius: 14px;
			width: 102px;
			height: 102px;
			overflow: hidden;
			background-color: #1e2226;

			position: absolute;
			bottom: 98px;
		}
			.bte_loader .gearmask_relative {
				width: 100px;
				height: 100px;
				overflow: hidden;
	
				position: relative;
			}
				.bte_loader .gearmask .gear1,
				.bte_loader .gearmask .gear2 {
					font-size: 100px;
					
					position: absolute;
				}
				.bte_loader .gearmask .gear1 {
					color: #b44d49;
					top: 6px;
					left: 32px;
				}
				.bte_loader .gearmask .gear2 {
					color: #785dc8;
					bottom: 7px;
					right: 32px;
				}


/*
*  TronLink Button
*/
	.btn_login_with_tronlink,
	#btn_connect_tronlink,
	.btn_connect_tronlink {
		border-radius: 20px;
		padding: 6px 6px 6px 7px;
		width: 287px;
		height: 40px;
		font-size: 28px;
		color: #fff;
		background-color: #145dcc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		overflow: hidden;
	}
	.btn_login_with_tronlink:hover,
	#btn_connect_tronlink:hover,
	.btn_connect_tronlink:hover {
		background-color: #1e66d1;
	}	
		.btn_login_with_tronlink svg,
		#btn_connect_tronlink svg,
		.btn_connect_tronlink svg {
			margin: 0 0 3px 5px;
			padding-bottom: 2px;
			width: 28px;
			height: 28px;
		}
		.btn_login_with_tronlink span,
		#btn_connect_tronlink span,
		.btn_connect_tronlink span {
			padding-right: 5px;
			color: #fcfcfc;
			font-family: 'ProductSansBold';
			font-size: 14px;
			font-weight: 700;
		}
	.btn_login_with_tronlink {
		width: 268px;
	}
		.btn_login_with_tronlink span {
			padding-right: 17px;
		}


/*
*  Account Info Section
*/
	.c_account_info {
		display: none;
	}
	.tronlink_connected .c_account_info {
		display: block;
	}
	.c_account_section {
		color: #fcfcfc;
		display: flex;
		flex-direction: column;
	}
		.c_account_section .can_delegate_resource,
		.c_account_section .can_delegate_stake_amount {
			padding-right: 4px;
		}
		.c_account_section .can_delegate_resource .fs-7-t,
		.c_account_section .can_delegate_stake_amount .fs-7-t {
			line-height: 10px;
		}

		.c_account_section #c_seller_buttons {
			flex-direction: row;
		}
		.c_account_section #c_seller_buttons button {
			border: 1px solid #666;
			padding: 0.375rem .65rem;
			color: #666;
		}
		.c_account_section #c_seller_buttons button:hover {
			border: 1px solid #888;
			color: #fff;
		}
		.c_account_section #c_seller_buttons button:last-of-type {
			margin-left: 3px;
			border: 1px solid #84704f;
			color: #84704f;
		}
		.c_account_section #c_seller_buttons button:last-of-type:hover {
			border: 1px solid #98815b;
			color: #bf985a;
		}

	/*
	*  Energy
	*/
		.c_account_info .c_energy .can_delegate,
		.c_account_info .c_energy .stake_amount {
			line-height: 22px;;
			font-size: 22px;
			color:rgb(202, 92, 88);
		}
		.c_account_info .c_energy .can_delegate_resource,
		.c_account_info .c_bandwidth .can_delegate_resource {
			display: none;
		}

		.energy .c_account_info .card {
			border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
			border: none;
			border-bottom: 2px solid;
			border-image: 
				linear-gradient(
					to right, 
					rgb(202, 92, 88),
					rgb(120, 93, 200)
				) 100% 2;
		}

	/*
	*  Bandwidth
	*/
		.c_account_info .c_bandwidth .can_delegate,
		.c_account_info .c_bandwidth .stake_amount {
			line-height: 22px;;
			font-size: 22px;
			color:rgb(120, 93, 200)
		}

		.bandwidth .c_account_info .card {
			border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
			border: none;
			border-bottom: 2px solid;
			border-image: 
				linear-gradient(
					to right, 
					rgb(120, 93, 200),
					rgb(202, 92, 88)
				) 100% 2;
		}
	

/*
*  Energy & Bandwidth Market Sections
*/
	/*
	*  Mobile Toggle Buttons
	*/
		#mobile_tabs {
			height: 39px;
			display: flex;
			justify-content: space-between;
			overflow-y: visible;
		}
			#mobile_tabs div {
				width: 50%;
				height: 40px;
				position: relative;
			}
			#mobile_tabs div:first-of-type {
				margin-right: 1px;
				width: calc(50% - 1px);
			}
				#mobile_tabs button {
					border: 1px solid #434549;
					border-bottom: 1px solid #212529;
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
					width: 100%;
					height: 40px;
					color: #fcfcfc;
					font-family: 'ProductSansBold';
					font-size: 1rem;
					font-weight: 700;
				}
				#mobile_tabs button[aria-expanded="true"] {
					background-color: #212529;
					position: absolute;
					top: 0;
					z-index: 3;
				}
		.market .card {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
		.mobile_toggle_group h5.card-title {
			display: none;
		}

		/* Instant Toggle */
			.market .collapsing {
				-webkit-transition: none;
				transition: none;
				display: none;
			}

	/*
	*  Chart.js Resource Meters
	*  Font-awesome FREE icons: https://fontawesome.com/search?p=4&o=r&m=free
	*/
		.c_meter {
			margin: 0 auto 20px;
			border-radius: 10px;
			padding: 10px calc(50% - 125px) 0;
			width: 100%;
			height: 260px;
			background-color: #1e2226;
			position: relative;
		}
			.c_meter canvas {
				position: relative;
				z-index: 10;
			}
			.c_resource_badge {
				text-align: center;
				font-size: 36px;
				position: absolute;
				top: 106px;
				right: 0;
				left: 0;
			}
			.c_energy .c_resource_badge {
				color: rgb(202, 92, 88);
			}
			.c_bandwidth .c_resource_badge {
				color: rgb(120, 93, 200);
			}
			.c_resources_available {
				text-align: center;

				display: flex;
				justify-content: center;
				align-items: center;

				position: absolute;
				right: 0;
				bottom: 20px;
				left: 0;
				z-index: 10;;
			}
				
	/*
	*  Resource Price Ribbon Banners
	*/
		.ribbon {
			width: 150px;
			height: 150px;
			overflow: hidden;
			position: absolute;
		}
			.ribbon::before,
			.ribbon::after {
				position: absolute;
				z-index: -1;
				content: '';
				display: block;
				border: 5px solid rgb(164, 65, 62);
			}
			.ribbon span {
				padding: 15px 0;
				width: 225px;
				color: #fff;
				text-align: center;
				font-family: 'ProductSansBold';
				font-size: 19px;
				line-height: 21px;
				text-shadow: 0 1px 1px rgba(0,0,0,.2);
				text-transform: uppercase;
				background-color: rgb(202, 92, 88);
				box-shadow: 0 5px 10px rgba(0,0,0,.1);
				position: absolute;
				display: block;
			}

		.ribbon-top-right {
			top: -5px;
			right: -5px;
		}
			.ribbon-top-right::before,
			.ribbon-top-right::after {
				border-top-color: transparent;
				border-right-color: transparent;
			}
			.ribbon-top-right::before {
				top: 0;
				left: 0;
			}
			.ribbon-top-right::after {
				bottom: 0;
				right: 0;
			}
			.ribbon-top-right span {
				transform: rotate(45deg);
				top: 30px;
				left: -21px;
				z-index: 2;
			}

		.ribbon-top-left {
			top: -5px;
			left: -5px;
		}
			.ribbon-top-left::before,
			.ribbon-top-left::after {
				border-top-color: transparent;
				border-right-color: transparent;
			}
			.ribbon-top-left::before {
				top: 0;
				right: 0;
			}
			.ribbon-top-left::after {
				bottom: 0;
				left: 0;
			}
			.ribbon-top-left span {
				transform: rotate(315deg);
				top: 30px;
				left: -54px;
				z-index: 2;
			}

		/*
		*  Energy
		*/
			.c_energy .ribbon::before,
			.c_energy .ribbon::after {
				border: 5px solid rgb(164, 65, 62);
			}
			.c_energy .ribbon span {
				background-color: rgb(202, 92, 88);
			}

		/*
		*  Bandwidth
		*/
			.c_bandwidth .ribbon::before,
			.c_bandwidth .ribbon::after {
				border: 5px solid rgb(94, 73, 168);
			}
			.c_bandwidth .ribbon span {
				background-color: rgb(120, 93, 200);
			}

/*
*  Responsive Energy & Bandwidth Market Sections
*/
	@media (min-width: 576px) { 
		#mobile_tabs button {
			font-size: 1.2rem;
		}
	}
	@media (min-width: 768px) {
		#mobile_tabs {
			display: none;
		}
		.market .card {
			border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
		}
		.mobile_toggle_group h5.card-title {
			display: block;
		}
		.collapse.dont-collapse-sm {
			display: block;
			height: auto !important;
			visibility: visible;
		}
	}
	@media (min-width: 992px) {
		
	}




/*
*  Energy & Bandwidth Orders Section
*/
	#c_energy_market,
	#c_bandwidth_market {
		position: relative;
		z-index: 1;
	}
	.c_energy .c_order .mine {
		border-color: rgb(202, 92, 88);
	}
	.c_bandwidth .c_order .mine {
		border-color: rgb(120, 93, 200);
	}
	.c_order .row>* {
		padding-right: 0;
	}
	.c_order_section {
		text-transform: uppercase;
		display: flex;
		flex-direction: column-reverse;
	}
		.c_order .c_order_section:nth-of-type(1) {
			flex-grow: 1;
		}
		.c_order .c_order_section:nth-of-type(2) {
			flex-grow: 1.5;
		}
			.c_order .payout,
			.c_order .stake_amount,
			.c_order .apy,
			.c_order .resource,
			.c_order .price,
			.c_order .duration {
				font-weight: 700;
				color: #fff;
			}
			.c_energy .c_order.open .payout,
			.c_energy .c_order.open .stake_amount {
				color: rgb(202, 92, 88);
			}
			.c_bandwidth .c_order.open .payout,
			.c_bandwidth .c_order.open .stake_amount {
				color: rgb(120, 93, 200);
			}
				.c_order_section .fs-7 {
					line-height: 21px;;
					vertical-align: top;
				}

			.market .equation_text {
				font-size: 0.75rem;
				color: #acb5bd;
				text-align: center;
			}

	/*
	*  Order Progress Bars
	*/
		.c_energy .progress-bar {
			background-color: rgb(202, 92, 88);
		}
		.c_bandwidth .progress-bar {
			background-color: rgb(120, 93, 200);
		}
		.c_energy .filled .progress-bar,
		.c_bandwidth .filled .progress-bar {
			background-color: #333;
		}



/*
*  Contact Form
*/		
	#contact-connect-tronlink {
		display: none;
	}
	.energy #contact-connect-tronlink {
		color: rgb(202, 92, 88);
	}
	.bandwidth #contact-connect-tronlink {
		color: rgb(120, 93, 200);
	}
	#contact-form {
		margin-top: 10px;
		display: none;
	}






/*
*  Bootstrap Theme Mods	
*/
	/*
	*  Add smaller text options
	*/
		.fs-7,
		.fs-7-t,
		.fs-7-u {
			color: var(--bs-body-color);
			font-size: 0.75rem !important;
		}
		.fs-7-t {
			line-height: 16px;
			vertical-align: text-top;
		}
		.fs-7-u {
			text-transform: uppercase;;
		}
		.unit {
			color: var(--bs-body-color);
			text-transform: uppercase;;
			font-size: 0.75rem;
			line-height: 16px;
			vertical-align: text-top;
		}

	/*
	*  Poppin Tooltip
	*/
		.site-tooltip {
			--bs-tooltip-padding-x: 15px;
			--bs-tooltip-padding-y: 10px;
			--bs-tooltip-color: #fff;
			--bs-tooltip-bg: rgba(0,0,0, 0.70);
		}

	/* 
	*  Buttons
	*/
		.btn-energy-primary {
			--bs-btn-active-border-color: transparent;
			--bs-btn-color: var(--bs-white);
			--bs-btn-hover-color: var(--bs-white);
			--bs-btn-active-color: var(--bs-white);
			--bs-btn-bg: rgb(202, 92, 88);
			--bs-btn-hover-bg: rgb(180, 77, 73);
			--bs-btn-active-bg: rgb(164, 65, 62);

		}
		.btn-bandwidth-primary {
			--bs-btn-active-border-color: transparent;
			--bs-btn-color: var(--bs-white);
			--bs-btn-hover-color: var(--bs-white);
			--bs-btn-active-color: var(--bs-white);
			--bs-btn-bg: rgb(120, 93, 200);
			--bs-btn-hover-bg: rgb(101, 80, 177);
			--bs-btn-active-bg: rgb(94, 73, 168);
		}
		.btn-grey-primary {
			--bs-btn-active-border-color: transparent;
			--bs-btn-color: rgb(140, 140, 140);
			--bs-btn-hover-color: rgb(140, 140, 140);
			--bs-btn-active-color: rgb(140, 140, 140);
			--bs-btn-bg: rgb(73, 73, 73);
			--bs-btn-hover-bg: rgb(59, 59, 59);
			--bs-btn-active-bg: rgb(45, 45, 45);
		}
		.btn_toggle {
			border: none;
			padding: 0;
			height: 18px;
			line-height: 26px;
			color: #666;
			background: none;
		}
		.btn_copy {
			border: none;
			padding: 0;
			font-size: 12px;
			color: #666;
			background: none;
		}
		.btn_recovery_schedule {
			margin-left: 4px;
			border: none;
			padding: 0;
			font-size: 16px;
			color: #666;
			background: none;
		}

	/*
	*  Cards
	*/
		.card-title {
			color: #fcfcfc;
			font-family: 'ProductSansBold';
			font-size: 1.2rem;
			font-weight: 700;
		}
	
	/*
	*  Accordians
	*/
		.accordion-button {
			border-color: rgb(73, 80, 87);
		}
		.accordion-button:focus {
			border-color: rgb(73, 80, 87);
			outline: 0 none;
			box-shadow: none;
		}
		.accordion-button:not(.collapsed) {
			border-bottom: 1px solid rgb(73, 80, 87);
			color: rgb(202, 92, 88);
			outline: 0 none;
			box-shadow: none;
			background-color: transparent;
		}
		.accordion-button::after {
			background: none;
			font-family: FontAwesome;
			content: "\f078";
			display: inline-block;
			padding-right: 3px;
			vertical-align: middle;
		}
		.accordion-button:not(.collapsed)::after {
			background: none;
		}

	/*
	*  Form Elements
	*/
		.bs_input_tag {
			width: 45px;
			display: flex;
			justify-content: center;
		}

		.energy textarea:focus,
		.c_energy textarea:focus,
		.c_energy select:focus,
		.energy input[type="text"]:focus,
		.energy input[type="email"]:focus,
		.c_energy input[type="text"]:focus,
		.c_energy input[type="password"]:focus,
		.c_energy input[type="datetime"]:focus,
		.c_energy input[type="datetime-local"]:focus,
		.c_energy input[type="date"]:focus,
		.c_energy input[type="month"]:focus,
		.c_energy input[type="time"]:focus,
		.c_energy input[type="week"]:focus,
		.energy input[type="number"]:focus,
		.c_energy input[type="number"]:focus,
		.c_energy input[type="email"]:focus,
		.c_energy input[type="url"]:focus,
		.c_energy input[type="search"]:focus,
		.c_energy input[type="tel"]:focus,
		.c_energy input[type="color"]:focus,
		.c_energy .uneditable-input:focus {   
			border-color: rgba(202, 92, 88, 0.8);
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(202, 92, 88, 0.6);
			outline: 0 none;
		}

		.bandwidth textarea:focus,
		.c_bandwidth textarea:focus,
		.c_bandwidth select:focus,
		.bandwidth input[type="text"]:focus,
		.bandwidth input[type="email"]:focus,
		.c_bandwidth input[type="text"]:focus,
		.c_bandwidth input[type="password"]:focus,
		.c_bandwidth input[type="datetime"]:focus,
		.c_bandwidth input[type="datetime-local"]:focus,
		.c_bandwidth input[type="date"]:focus,
		.c_bandwidth input[type="month"]:focus,
		.c_bandwidth input[type="time"]:focus,
		.c_bandwidth input[type="week"]:focus,
		.bandwidth input[type="number"]:focus,
		.c_bandwidth input[type="number"]:focus,
		.c_bandwidth input[type="email"]:focus,
		.c_bandwidth input[type="url"]:focus,
		.c_bandwidth input[type="search"]:focus,
		.c_bandwidth input[type="tel"]:focus,
		.c_bandwidth input[type="color"]:focus,
		.c_bandwidth .uneditable-input:focus {   
			border-color: rgba(120, 93, 200, 0.8);
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(120, 93, 200, 0.6);
			outline: 0 none;
		}

		.form-check-input {
			width: 40px;
			height: 20px;
			outline: 0 none;
		}
		.energy .form-check-input:checked {
			background-color: rgba(202, 92, 88, 0.8);
			border-color: rgba(202, 92, 88, 0.8);
			box-shadow: 0 0 0 .25rem rgba(202, 92, 88, 0.25);
		}
		.bandwidth .form-check-input:checked {
			background-color: rgba(120, 93, 200, 0.8);
			border-color: rgba(120, 93, 200, 0.8);
			box-shadow: 0 0 0 .25rem rgba(120, 93, 200, 0.25);
		}

		input[type="text"][readonly]:focus,
		input[type="number"][readonly]:focus {
			border: var(--bs-border-width) solid var(--bs-border-color);
			box-shadow: none;
			outline: 0 none;
			cursor: not-allowed;
		}
		
	/*
	*  Modals
	*/	
		.modal .disclaimer {
			text-align: center;
		}
		.modal-content.no-header {
			padding-top: 1rem;
		}
		.modal-content.no-footer {
			padding-bottom: 1rem;
		}
			.modal-header {
				border-bottom: none;
				color: #fcfcfc;
				font-family: 'ProductSansBold';
				font-size: 1.2rem;
				font-weight: 700;
			}
				.modal-title {
					font-size: 1rem;
				}
				.modal-body .section-dark {
					border-radius: 10px;
					background-color: #1e2226;	
				}
			.modal-body-dark {
				margin: 0 1rem;
				border-radius: 10px;
				background-color: #1e2226;
				padding: var(--bs-modal-padding);
				position: relative;
				flex: 1 1 auto;
			}
			.modal-dialog-scrollable .modal-body-dark {
				overflow-y: scroll;
			}
			.modal-footer {
				border-top: none;
			}

		/* Modal Warning */
			.modal-body .warning {
				margin-bottom: 10px;
				border-width: 1px;
				border-style: solid;
				border-color: transparent;
				padding: 5px 10px;
			}
			.energy .warning {
				border-color: rgb(202, 92, 88);
				color: rgb(202, 92, 88);
			}
			.bandwidth .warning {
				border-color: rgb(120, 93, 200);
				color: rgb(120, 93, 200);
			}
			.energy .correction,
			.energy .warning .fs-7-t {
				color: rgb(202, 92, 88);
			}
			.bandwidth .correction,
			.bandwidth .warning .fs-7-t {
				color: rgb(120, 93, 200);
			}

		/* Modal Tables */
			.custom-table {
				width: 100%;
			}
			.custom-table thead tr th {
				padding-bottom: 6px;	
			}
				.custom-table tbody tr { 
					border-top: 1px solid #333;
					width: 100%;
				}
				.custom-table tbody tr:nth-of-type(1) {
					border-top: none;
				}
				
					.custom-table tbody tr td {
						padding: 11px 3px;
					}
					.custom-table tbody tr:last-of-type td {
						padding: 11px 3px 0px;
					}

					.custom-table .align-left,
					.order-bill .label {
						text-align: left;
					}
					.custom-table .align-right,
					.order-bill .value {
						text-align: right;
					}

		/* Modal Resource Order */
			.order-bill .row {
				margin-right: 0;
				margin-left: 0;
				margin-bottom: 6px;
			}
			.order-bill .value {
				color: #fcfcfc;
			}
			.order-bill .value .unit {
				
			}
			.order-bill .total-cost {
				margin-top: 1rem;
				border-top: 1px solid #333;
				padding-top: 1rem;
			}

		/* Modal View / Fill Order */
			#modal_fill_order .modal-body,
			#modal_view_order .modal-body {
				padding-top: 0;
			}
			.multisig-staking-header,
			.stake-amount-header {
				margin-bottom: 4px;
				display: flex;
				justify-content: space-between;
			}
				.multisig-staking-header .label {
					display: none;
				}
				.active .multisig-staking-header .label {
					display: inline;
				}
				.multisig-staking-header .multisig-staking-btn,
				.stake-amount-header .max-stake-button {
					text-align: right;
					flex-grow: 1;
					cursor: pointer;
				}
				.multisig-address {
					margin-bottom: 1rem;
					display: none;
				}
				.active .multisig-address {
					display: block;
				}

			.modal-body .order-information {
				margin-bottom: 1rem;
				padding: 1rem 0.2rem;
				display: flex;
				justify-content: space-between;
			}
				.modal-body .order-information>div {
					text-align: center;
					flex-basis: 50%;
				}
				.modal-body .order-information>div:nth-of-type(1) {
					border-right: 2px solid rgb(140, 140, 140);
				}
					.modal-body .order-information .amount {
						line-height: 22px;
						font-size: 22px;
					}
					.modal-body.energy .amount,
					.modal-body.energy .value,
					.modal-body.energy a {
						color: rgb(202, 92, 88);
					}
					.modal-body.bandwidth .amount,
					.modal-body.bandwidth .value,
					.modal-body.bandwidth a {
						color: rgb(120, 93, 200);
					}
					.modal-body .amount .fs-7-u,
					.modal-body .value .fs-7-u {
						vertical-align: text-top;
					}
					.modal-body .order-information .label {
						font-size: 0.75rem;
					}


			.modal-body .payout,
			.modal-body .refund {
				margin-top: 1rem;
				padding: 1rem;
				line-height: 22px;
				font-size: 22px;
				display: flex;
				justify-content: space-between;
			}
			.modal-body .payout .label,
			.modal-body .refund .label {
				color: #fcfcfc
			}

			.modal-body .order-transactions>div {
				padding: 1rem;
			}


		/* Modal MessageBox */
			#messagebox-modal .modal-body-dark {
				text-align: center;
			}

			#messagebox-modal .icon {
				margin-bottom: 1rem;
				font-size: 100px;
			}
			.success .icon {
				color: rgb(33, 151, 7);
			}
			.error .icon,
			.tronlink-connect2 .icon,
			.tronlink-wrong-network .icon {
				color: rgb(168, 22, 22);
			}
			.refresh .icon,
			.tronlink-connect .icon {
				color: rgb(20, 93, 204);
			}
			#messagebox-modal .title {
				margin-bottom: 1rem;
				font-size: 2rem;
			}
			#messagebox-modal .message {
				margin-bottom: 1rem;
				padding: 0 40px;
				text-align: center;
			}
			#messagebox-modal .button-container {
				padding-top: 1rem;
				display: flex;
				justify-content: center;
			}

			#messagebox-modal .button {
				padding: 0.375rem 2rem;
			}
			#messagebox-modal .success .button {
				background-color: rgb(33, 151, 7);
			}
			#messagebox-modal .refresh .button {
				background-color: rgb(20, 93, 204);
			}
			#messagebox-modal .error .button {
				background-color: rgb(168, 22, 22);
			}

		/* Modal Seller */
			#seller-modal .modal-body-dark {
				overflow-y: scroll;
			}
			.c_seller_login {
				padding: 100px 0;
				display: flex;
				justify-content: center;
			}
				/* Stats */
					#seller_stats .c_account_section {
						padding-top: 10px;
						text-align: center;;
					}
						#seller_stats .c_account_section div:last-of-type {
							font-size: 1.8em;
							line-height: 1.2em;
						}
						#seller_stats .c_account_section .fs-7-t {
							line-height: 22px;
						}
												
				/* Charts */
					.seller-chart-container {
						height: 500px !important;
					}
					.multiplier-chart-container {
						margin-top: 20px;
						height: 300px !important;
					}

				/* DataTables */
					#seller-modal #c_seller_datatable {
						width: auto;
						height: auto;
						overflow-x: auto;
						overflow-y: visible;
					}
						#seller_datatable_wrapper>div {
							margin-left: 0 !important;
							margin-right: 0 !important;
						}
					#seller-modal table.dataTable thead th {
						text-align: center !important;
						padding: 5px 30px 5px 0;
						font-size: 15px;
					}
					#seller-modal table.dataTable tbody td {
						text-align: center !important;
						padding: 5px 30px 5px 0;
						font-size: 15px;
					}
					#seller-modal .page-link,
					#seller_datatable_info {
						font-size: 14px;
					}
					#seller-modal thead tr {
						background-color: #191c1e;
					}
					#seller-modal tbody tr:nth-child(even) {
						background-color: #191c1e;
					}
					/* Colors */
						#seller-modal table.dataTable tr .col_energy {
							color: rgb(212, 86, 78);
						}
						#seller-modal table.dataTable tr .col_energy_multiplier {
							color: rgb(224, 114, 109);
						}
						#seller-modal table.dataTable tr .col_bandwidth {
							color: rgb(136, 57, 210);
						}
						#seller-modal table.dataTable tr .col_bandwidth_multiplier {
							color: rgb(158, 101, 220);
						}
						#seller-modal table.dataTable tr .col_tron_usd {
							color: rgb(144, 238, 144);
						}
						#seller-modal table.dataTable tr .col_my_usd {
							color: rgb(0, 128, 0);
						}
						#seller-modal table.dataTable tr .col_my_tron {
							color: rgb(100, 149, 237);
						}
						#seller-modal table.dataTable tr .col_staked {
							color: rgb(0, 206, 209);
						}

		/* Modal Seller Payments */
			.bg-purple {
				background-color: rgb(120, 93, 200);
			}
			#paymentsAccordion .accordion-header {
				display: flex;
			}
				.c_tx_link {
					padding-left: 10px;
					display: flex;
					align-items: center;
				}
					.c_tx_link a {
						width: 60px;
						height: 32px;
						font-size: 12px;
					}
				#paymentsAccordion .accordion-item .accordion-button {
					border: none;
				}
				.payment-info {
					width: calc(100% - 40px);
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
				}
					.payment-info ul {
						margin: 0;
						padding: 0;
						list-style: none;
						font-size: 14px;
						flex-grow: 1;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
					}
						.payment-info ul li {
							margin-right: 30px;
							/*width: calc(50% - 30px);*/
						}
						.payment-info ul li:first-child {
						
						}
					.payment-info span {
						font-weight: bold;
					}
			
			#paymentsAccordion .accordion-collapse {
				border-top: none;
				background-color: #1e2226;
			}
			#paymentsAccordion .accordion-collapse.show {
				border-top: 1px solid rgb(57 63 68);
			}
				#paymentsAccordion .accordion-body {
					padding: 0;
				}
					.sales-list {
						padding: 0 10px;
					}
						.sales-list table {
							margin: 0 0 5px;
							font-size: 14px;
							background-color: #1e2226;
						}
							.sales-list table thead {
								border-bottom: 1px solid #333;
							}
							.sales-list table th,
							.sales-list table td {
								width: 16%;
								text-align: center;
								background-color: #1e2226;
							}
							.sales-list table th.sale_order_id,
							.sales-list table td.sale_order_id {
								width: 23%;
							}
							.sales-list table th.sale_resource,
							.sales-list table td.sale_resource {
								width: 11%;
							}
							.sales-list table tbody tr:nth-child(even) td {
								background-color: #1e2226;
							}
							.sales-list table tbody tr:nth-child(odd) td {
								background-color: #1d1f21;
							}

		/* Modal Seller Options */
			#f_seller_options .input-group-text {
				width: 48px;
				justify-content: center;
			}
			#f_seller_options .input-group input {
				text-align: right;
			}
			#f_seller_options .c_center {
				border-top: 1px solid #666;
				padding-top: 20px;
			}

			/* Energy / Bandwidth Ratio Slider */
				#i_freeze_slider {
					display: flex;
				}
					#i_freeze_ratio {
						-webkit-appearance: none;
						-moz-appearance: none;
						/*
						margin: auto;
						display: block;
						margin-top: 35px;
						*/
						background: transparent;
					}
					#i_freeze_ratio:focus {
						outline: none;
					}
					#i_freeze_ratio::-webkit-slider-runnable-track {
						-webkit-appearance: none;
						border-radius: 10px;
						background: transparent;
						/* fallback for old browsers */
						background: -webkit-linear-gradient(to right,
								rgba(202, 92, 88, 1),
								rgba(120, 93, 200, 1));
						/* Chrome 10-25, Safari 5.1-6 */
						background: linear-gradient(to right,
								rgba(202, 92, 88, 1),
								rgba(120, 93, 200, 1));
						/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
						height: 7.5px;
					}
					#i_freeze_ratio:disabled::-webkit-slider-runnable-track {
						background: #666;
					}
					#i_freeze_ratio::-webkit-slider-thumb {
						-webkit-appearance: none;
						border: 6px solid;
						border-radius: 50%;
						height: 30px;
						width: 30px;
						max-width: 80px;
						position: relative;
						bottom: 7px;
						background-color: transparent;
						cursor: -webkit-grab;

						-webkit-transition: border 1000ms ease;
						transition: border 1000ms ease;
					}
					#i_freeze_ratio::-webkit-slider-thumb {
						border-color: #1e2226;
						background-color: #adb5bd;
					}
					#i_freeze_ratio:focus::-webkit-slider-thumb {
						outline: none;
						box-shadow: none;
					}
					#i_freeze_ratio::-webkit-slider-thumb:active {
						outline: none;
						cursor: -webkit-grabbing;
					}
					

					#i_freeze_slider .energy {
						padding: 0 10px;
						font-size: 20px;
						color: rgb(202, 92, 88);
					}
					#i_freeze_slider .bandwidth {
						padding-left: 10px;
						font-size: 20px;
						color: rgb(153, 102, 255);
					}
					#i_freeze_slider.disabled .energy,
					#i_freeze_slider.disabled .bandwidth {
						color: #666;
					}

					datalist#tickmarks {
						margin: 0 25px 1rem;
						display: flex;
						justify-content: space-between;
						color: #acb5bd;
						font-size: 12px;
					}
						datalist#tickmarks option {
							color: #acb5bd;
						}