:root {
	--header-background: rgba(0, 0, 0, 0.15);
	--body-background: #1E1E1E;
	--tr-flash: yellow;
	--card-bg: #292929;
	--success: #269a26;
	--success-hover: #32CD32;
	--success-light: #7ade7a;
	--success-dark: #196419;
	--danger: rgb(220, 53, 69);
	--danger-hover: #8E1B1B;
	--danger-light: #DC3545;
	--danger-dark: #971a26;
	--info: #1EBBDE;
	--secondary: #3e3e3e;
	--light: #6F6F6F;
	--dark: #1E1E1E;
	--dark-light: #535353;
	--text-gray: rgba(255, 255, 255, .55);
	--text-gray-light: #B8B8B8;
	--text-gray-dark: var(--light);
	--text-warning-light: #ffe083;
	--text-warning-dark: #b78a00;
	--canvas-arrow: #969696;
	--flag-bg: #D8D8D8;
	--stacked-card-shadow: #3D3D3D;
	--light-icon: #D9D9D9;
	--golden: #ffde59;
}

.spin {
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


.card-main {
    background-color: var(--body-background);
    color: var(--text-gray);
}

.showOnPhone {
	display: none;
}

.mb-n-4 {
    margin-bottom: -1.5rem !important;
}

.squared {
    border-radius: 0px !important;
}

/* Responsive layout for smaller screens */
@media screen and (max-width: 600px) {
	.dontShowOnPhone {
		display: none;
	}

	.showOnPhone {
		display: table-cell;
	}
}

/* #region Cookie Accept overlay */
.cookie-overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: end;
	z-index: 9999;
}

.cookie-popup {
	color: var(--text-gray);
	background-color: var(--card-bg);
	padding: 20px;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	max-width: 90%;
	width: 90%;
	margin-bottom: 2rem;
}

.cookie-popup p {
	margin-bottom: 20px;
	font-size: 16px;
}

.cookie-popup .btn {
	margin: 0 10px;
}
/* #endregion Cookie Accept overlay */

/* #region Range Slider */
	input[type="range"] {
		/* Remove default styles */
		-webkit-appearance: none;
		appearance: none;
		/* Set width and height to adjust the appearance */
		width: 100%;
		height: 0.5rem;
		/* Customize track color */
		background-color: var(--light);
		/* Use custom variable for thumb color */
		border-radius: 5px;
	}

    /* Styles for the thumb (handle) */
    input[type="range"]::-webkit-slider-thumb {
        /* Use custom variable for thumb color */
        -webkit-appearance: none;
        appearance: none;
        width: 1rem;
        height: 1rem;
        background-color: var(--golden); /* Use custom variable for primary color */
        border-radius: 50%; /* Rounded shape */
        cursor: pointer;
    }

    /* Additional styles for Firefox */
    input[type="range"]::-moz-range-thumb {
        width: 1rem;
        height: 1rem;
        background-color: var(--golden);
        border-radius: 50%;
        cursor: pointer;
    }

    /* Additional styles for IE */
    input[type="range"]::-ms-thumb {
        width: 1rem;
        height: 1rem;
        background-color: var(--golden);
        border-radius: 50%;
        cursor: pointer;
    }
/* #endregion Range Slider */


.form-check-input:checked {
	background-color: var(--golden) !important;
	border-color: var(--golden) !important;
	
}

.form-switch .form-check-input:checked, .form-switch .form-check-input:focus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23292929'/%3e%3c/svg%3e");
}

.form-check-input:focus {
	box-shadow: 0 0 0 0;
}

.form-check-input:checked[type=checkbox] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23292929' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.modal-open {
	overflow-y: auto !important;
}

.text-golden {
	color: var(--golden);
}

.colored-toast.swal2-icon-success {
	background-color: var(--card-bg) !important;
}

.colored-toast.swal2-icon-error {
	background-color: var(--card-bg) !important;
}

.colored-toast.swal2-icon-warning {
	background-color: var(--card-bg) !important;
}

.colored-toast.swal2-icon-info {
	background-color: var(--card-bg) !important;
}

.colored-toast.swal2-icon-question {
	background-color: var(--card-bg) !important;
}

.colored-toast .swal2-title {
	color: white;
}

.colored-toast .swal2-close {
	color: white;
}

.colored-toast .swal2-html-container {
	color: white;
}


.nav-link:hover > .text-top {
	color: rgba(255, 255, 255, .75);
	font-weight: 100;
}

.no-hover {
	pointer-events: none;
}

.apexcharts-menu-item {
    background-color: var(--body-background);
}
.apexcharts-menu-item:hover {
	background-color: var(--card-bg) !important;
}

.apexcharts-xaxis-label {
	cursor: pointer;
}

.btn-fake-sm {
	border-radius: 0.5rem;
	border: none;
	font-size: 0.8rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}

.font-1 {
	font-size: 1rem;
}

.smaller {
	font-size: 0.75rem;
}

.hover-text-white:hover {
	color: white;
}

.hide {
	display: none;
}

.sanded {
	border-radius: 0.5rem !important;
}

.sanded-top {
	border-top-left-radius: 0.5rem !important;
	border-top-right-radius: 0.5rem !important;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.sanded-bottom {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

.sanded-right {
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0.5rem !important;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0.5rem !important;
}

.sanded-left {
	border-top-left-radius: 0.5rem !important;
	border-top-right-radius: 0px !important;
	border-bottom-left-radius: 0.5rem !important;
	border-bottom-right-radius: 0px !important;
}



.modal-content {
	border-radius: 0.5rem;
}

.modal-body {
	background-color: var(--body-background);
}

.modal-footer {
	border-top-color: var(--body-background);
}

.modal-header {
	border-bottom-color: var(--body-background);
}

.toast-success {
	background-color: var(--success);
}

.toast-danger {
	background-color: var(--danger);
}

.swal2-modal {
	border-radius: 0.5rem !important;
	background-color: var(--body-background);
}

.swal2-success-circular-line-left, .swal2-success-circular-line-right, .swal2-success-fix {
	background-color: transparent !important;
}

.swal2-confirm {
	background-color: var(--success) !important;
}

.swal2-confirm:focus {
	box-shadow: none !important;
}

.swal2-success, .swal2-success-ring {
	color: var(--success) !important;
	border-color: var(--success) !important;
}

.swal2-success-line-tip, .swal2-success-line-long {
	background-color: var(--success) !important;
}

.canvas-arrow {
	color: var(--canvas-arrow);
}

/* #region scrollbar */

/* width */
::-webkit-scrollbar {
	width: 0.5rem;
}

/* Track */
::-webkit-scrollbar-track {
	background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--text-gray-light);
	border-radius: 0.5rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--text-gray-dark);
}

/* #endregion scrollbar */

body {
	font-family: 'Roboto Condensed';
	font-size: 0.9rem;
	background-color: var(--body-background);
}

input[type=button], input[type="button"]:focus, button, button:focus {
	outline: none !important;
	box-shadow: none !important;
}

.bg-main {
	background-color: var(--body-background);
}

.bg-navbar {
	background-color: var(--header-background) !important;
}

.bg-card-dark {
	background-color: var(--card-bg);
}

.bg-black {
	background-color: black !important;
}

.offcanvas {
	color: var(--text-gray);
	background-color: var(--body-background);
}

.pointer {
	cursor: pointer;
}

.grabbing-handle {
	cursor: grabbing;
}

.error {
	color: var(--danger-light);
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu {
		display: none;
	}

	.navbar .nav-item:hover .nav-link {}

	.navbar .nav-item:hover .dropdown-menu {
		display: block;
	}

	.navbar .nav-item .dropdown-menu {
		margin-top: 0;
	}
}

/* ============ desktop view .end// ============ */

.dropdown-menu {
	background-color: var(--card-bg);
}

.dropdown-item {
	color: var(--text-gray-light);
}

.forex-bg {
	background-image: url('../img/background.jpg');
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
}

.fi-round-bg {
	width: 2rem;
	height: 2rem;

	background-color: var(--flag-bg);
	padding: 0.5rem;
	border-radius: 999rem;

	display: flex;
	align-items: center;
}

.pin-bg {
	width: 3rem;
	height: 3rem;

	background-color: var(--body-background);
	padding: 1rem;
	border-radius: 999rem;

	display: flex;
	align-items: center;
}

.keep-together {
	overflow: hidden;
	white-space: nowrap;
}

.icon-navbar-bottom {
	font-size: 1.25rem;
}

.nav-active-bottom {
	color: var(--text-gray-light) !important;
}

.link {
	cursor: pointer;
}

.link, .btn-link, .btn-link:focus, .link:focus {
	color: #FFFFFF;
	text-decoration: none;
}

.text-top {
	font-size: 0.6rem;
	color: var(--light);
	font-weight: 700;
}

.text-dark-light {
	color: var(--dark-light);
}

.bg-dark-light {
	background-color: var(--dark-light);
}

.border-gray {
	border-color: var(--secondary) !important;
}

.bg-gray {
	background-color: var(--secondary);
}

.bg-golden {
	background-color: var(--golden);
}

.text-main {
	color: var(--text-gray) !important;
}

.text-main-light {
	color: var(--text-gray-light) !important;
}

.text-warning-light {
	color: var(--text-warning-light) !important;
}

.text-warning-dark {
	color: var(--text-warning-dark) !important;
}

.bg-warning-light {
	background-color: var(--text-warning-light) !important;
}

.bg-warning-dark {
	background-color: var(--text-warning-dark) !important;
}

.text-nav-light, .text-nav-light:focus {
	color: var(--light);
}

.text-nav-light:hover {
	color: var(--body-background);
}

.alert-success {
	color: white;
	background-color: var(--success);
	border-color: var(--success);
}

.alert-danger {
	color: white;
	background-color: var(--danger);
	border-color: var(--danger);
}

.text-success {
	color: var(--success) !important;
}

.text-danger {
	color: var(--danger) !important;
}

.text-info {
	color: var(--info);
}

.dot {
	font-size: 0.375rem;
}

.dot-raised {
	position: relative;
	top: -0.5rem;
}

.nav-link {
	border-radius: 0.5rem;
}

.nav-link:hover {
	background-color: var(--light);
}

.nav-active {
	color: var(--golden) !important;
}

.tg-dialog {
	color: var(--text-gray) !important;
	background-color: var(--card-bg) !important;
	border-radius: 0.5rem !important;
}

.tg-arrow {
	background: var(--card-bg) !important;
}

.tg-dialog-title {
	font-weight: 300 !important;
}

.tg-dialog-btn {
	background-color: var(--light) !important;
	color: white !important;
	border-width: 0px !important;
	border-radius: 0.5rem !important;
}

.card {
	border-radius: 0.5rem !important;
}

.card-title {
	padding: 1rem;
	font-size: 1.35rem;
	font-weight: 500;
}

.card-dark {
	color: var(--text-gray);
	background-color: var(--card-bg);
}

.card-darker {
	color: var(--text-gray);
	background-color: var(--body-background);
	border-color: var(--body-background);
}

.card-currency-second {
	color: var(--text-gray-dark);
}

.card-description {
	font-size: 0.75rem;
}

.card-time {
	color: var(--text-gray-light);
	font-size: 0.6rem;

	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
}

.btn-sm {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
	font-size: 0.8rem;
}

.table-main {
	--bs-table-bg: var(--card-bg);
	--bs-table-striped-bg: #2c3034;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #373b3e;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: var(--body-background);
	--bs-table-hover-color: #fff;

	color: var(--text-gray);
	border-color: #373b3e;

	font-size: 0.8rem;
}

.card-table-tr>th {
	font-size: 0.8rem !important;
	color: var(--text-gray-dark);
}

.bi-lg {
	font-size: 1.5rem;
}

.bi-light {
	color: var(--light-icon);
}

.form-select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

	text-align-last: center;

    padding-left: 2.25rem;
}


.placeholder-light::placeholder {
	color: var(--light);
	text-align: center;
}

.form-control,
.form-select {
	background-color: var(--secondary);
	color: var(--flag-bg);
	border: none;

	border-radius: 0.5rem !important;
}

.form-select {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23D8D8D8'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;

	background-size: 1rem !important;
	background-position: right 7% bottom 40% !important;
	background-color: var(--secondary);
	background-repeat: no-repeat;
}

.form-control-clear {
	border-radius: 0rem !important;
	text-align: center;
}

.form-control:focus,
.form-select:focus {
	background-color: var(--card-bg);
	color: var(--text-gray-light);
}

.rounded-0-5 {
	border-radius: 0.5rem;
}

.btn {
	border-radius: 0.5rem;
	border: none;
}

.btn-sm {
	border-radius: 0.25rem;
	min-width: 3.5rem;
	min-height: 1.5rem;
}

.btn-live {
	min-width: 1.5rem !important;
}

.btn-secondary {
	background-color: var(--secondary);
	color: var(--text-gray-light);
}

.btn-secondary-no-hover:hover {
	background-color: var(--secondary);
	color: var(--text-gray-light);
}

.btn-light {
	background-color: var(--light);
	color: white;
}

.btn-dark {
	background-color: var(--dark);
}

.btn-darker {
	background-color: black;
}

.btn-golden {
	background-color: var(--golden);
}

.btn-success {
	background-color: var(--success);
}

.btn-success-light {
	background-color: var(--success-hover);
}

.btn-success-dark {
	background-color: var(--success-dark);
	color: white;
}

.btn-danger {
	background-color: var(--danger);
}

.btn-danger-light {
	background-color: var(--danger-hover);
}

.btn-danger-dark {
	background-color: var(--danger-dark);
	color: white;
}

.btn-notch-right {
	content: "'";
	color: white;
	background-color: var(--success);
		
	-webkit-clip-path: polygon(0% 0%, 90% 0%, 90.5% 1%, 91% 2%, 
		91.5% 3%, 99% 48%, 
		100% 50%, 99% 52%, 91.5% 97%, 91% 98%, 
		90.5% 99%, 90% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 90% 0%, 90.5% 1%, 91% 2%, 91.5% 3%, 99% 48%, 100% 50%, 99% 52%, 91.5% 97%, 91% 98%, 90.5% 99%, 90% 100%, 0% 100%);
		
	/*clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);*/
}

.btn-notch-right:hover {
	background-color: var(--success-hover);
}

.btn-notch-left {
	content: "'";
	color: white;
	background-color: var(--danger);
	-webkit-clip-path: polygon(8.5% 3%, 9% 2%, 9.5% 1%, 10% 0%,
			100% 0%, 100% 100%,
			10% 100%, 9.5% 99%, 9% 98%, 8.5% 97%,
			1% 52%, 0% 50%, 1% 48%);
	clip-path: polygon(8.5% 3%, 9% 2%, 9.5% 1%, 10% 0%,
			100% 0%, 100% 100%,
			10% 100%, 9.5% 99%, 9% 98%, 8.5% 97%,
			1% 52%, 0% 50%, 1% 48%);
	/*clip-path: polygon(25% 0%, 100% 0, 100% 100%, 25% 100%, 0% 50%);*/
}

.btn-notch-left:hover {
	background-color: var(--danger-hover);
}

label.active {
	background-color: var(--success) !important;
}

.navbar-toggler {
	border: none;
}

/* #region Font Weights*/

.font-weight-100 {
	font-weight: 100 !important;
}

.font-weight-200 {
	font-weight: 200 !important;
}

.font-weight-300 {
	font-weight: 300 !important;
}

.font-weight-400 {
	font-weight: 400 !important;
}

.font-weight-500 {
	font-weight: 500 !important;
}

.font-weight-600 {
	font-weight: 600 !important;
}

.font-weight-700 {
	font-weight: 700 !important;
}

.font-weight-800 {
	font-weight: 800 !important;
}

.font-weight-900 {
	font-weight: 900 !important;
}

/* #endregion Font Weights*/

.ms-n0-5 {
	margin-left: -0.25rem;
}

.ms-n1 {
	margin-left: -0.5rem;
}

.mt-n0-5 {
	margin-top: -0.25rem;
}

.mt-n1 {
	margin-top: -0.5rem;
}

/* #region Stacked Cards CSS */

.closed .card {
	box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.4), 0 0.7rem 0 -4px var(--stacked-card-shadow);
	transition: box-shadow 0.5s ease-in-out;
}




/* #endregion Stacked Cards CSS */



.flash {
	-moz-animation: flash 1s ease-out;
	-moz-animation-iteration-count: 1;
	-webkit-animation: flash 1s ease-out;
	-webkit-animation-iteration-count: 1;
	-ms-animation: flash 1s ease-out;
	-ms-animation-iteration-count: 1;
	--bs-table-bg: transparent !important;
}

@keyframes flash {
	0% {
		background-color: transparent;
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: transparent;
	}
}

@-webkit-keyframes flash {
	0% {
		background-color: transparent;
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: transparent;
	}
}

@-moz-keyframes flash {
	0% {
		background-color: transparent;
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: transparent;
	}
}

@-ms-keyframes flash {
	0% {
		background-color: transparent;
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: transparent;
	}
}

.solid-flash-60s {
	-moz-animation: flash-solid 60s ease-out;
	-moz-animation-iteration-count: 1;
	-webkit-animation: flash-solid 60s ease-out;
	-webkit-animation-iteration-count: 1;
	-ms-animation: flash-solid 60s ease-out;
	-ms-animation-iteration-count: 1;
	--bs-table-bg: transparent !important;
}

@keyframes flash-solid {
	0% {
		background-color: var(--tr-flash);
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: var(--tr-flash);
	}
}

@-webkit-keyframes flash-solid {
	0% {
		background-color: var(--tr-flash);
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: var(--tr-flash);
	}
}

@-moz-keyframes flash-solid {
	0% {
		background-color: var(--tr-flash);
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: var(--tr-flash);
	}
}

@-ms-keyframes flash-solid {
	0% {
		background-color: var(--tr-flash);
	}

	50% {
		background-color: var(--tr-flash);
	}

	100% {
		background-color: var(--tr-flash);
	}
}

.uparrow {
	animation-name: greenToBlank;
	animation-duration: 1s;
}

.downarrow {
	animation-name: redToBlank;
	animation-duration: 1s;
}

@keyframes greenToBlank {
	from {
		background-color: var(--success);
	}

	to {
		background-color: transparent;
	}
}

@keyframes redToBlank {
	from {
		background-color: var(--danger);
	}

	to {
		background-color: transparent;
	}
}

.pipsup {
	color: var(--success);
}

.pipsdown {
	color: var(--danger);
}