@media (min-width: 992px) {
	body {
		background-image: linear-gradient(0deg, #f2f2f7, #f2f2f7) !important;
	}

	body.theme-dark {
		background-color: #1b1d21;
		background-image: none !important;
	}

	#page {
		max-width: 1140px;
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		margin-left: auto;
		margin-right: auto;
	}

	.btn.full-width {
		max-width: 50%;
		margin: auto;
	}

	.header {
		max-width: 1050px;
		margin: auto;
		border-radius: 20px;
	}

	.menu-box-bottom,
	#footer-bar {
		max-width: 500px;
		margin: auto;
	}

	#footer-bar {
		border-radius: 20px;
	}

	.card {
		margin: 10px 30px 20px 30px !important;
	}

	#table_data a {
		padding: 2px 20px;
	}

	#table_data a:hover {
		background: rgb(255 0 0 / 5%);
		border-radius: 15px;
	}

	.card.auth_page {
		max-width: 540px;
		margin: auto !important;
	}
}

@media (min-width: 1200px) {
	body {
		background-image: linear-gradient(0deg, #f2f2f7, #f2f2f7) !important;
	}

	body.theme-dark {
		background-color: #1b1d21;
		background-image: none !important;
	}

	#page {
		max-width: 1140px;
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		margin-left: auto;
		margin-right: auto;
	}

	.header {
		max-width: 1050px;
		margin: auto;
		border-radius: 20px;
	}

	.menu-box-bottom,
	#footer-bar {
		max-width: 500px;
		margin: auto;
	}

	#footer-bar {
		border-radius: 20px;
	}

	.btn.full-width {
		max-width: 50%;
		margin: auto;
	}

	.card {
		margin: 10px 30px 20px 30px !important;
	}

	.card-no-margin-right {
		margin-right: 0 !important;
	}

	.card-no-margin-left {
		margin-left: 0 !important;
	}

	#table_data a {
		padding: 2px 20px;
	}

	#table_data a:hover {
		background: rgb(255 0 0 / 5%);
		border-radius: 15px;
	}
}

.statement table tr:nth-child(even) {
	background: #fefefe;
}

.statement table tr:nth-child(odd) {
	background: #e2e2e2;
}

.ltr {
	direction: ltr !important;
}

.profit_sim {
	font-size: 25px;
	padding: 10px;
	font-weight: 900;
}

a.disable {
	pointer-events: none;
	cursor: default;
	opacity: 0.8;
}

@media (max-width: 650px) {
	.ce-popover {
		position: absolute !important;
	}
}

.cdx-notify {
	width: auto !important;
}

.cdx-notifies {
	right: 20px !important;
	left: auto !important;
	bottom: 90px !important;
}

.cdx-notify::before {
	right: 0px !important;
	left: auto !important;
}

.cdx-notify__cross {
	display: none;
}

.ce-popover__item-icon {
	margin-right: auto !important;
	margin-left: 10px !important;
}

.ce-block__content {
	max-width: 800px !important;
}

.ce-toolbar__content {
	max-width: 800px !important;
}

@media (min-width: 651px) {
	.ce-toolbar__actions {
		left: 100% !important;
		right: auto !important;
	}
}

.theme-dark .ce-toolbar__plus {
	color: white;
	background: #191b1e;
}

.theme-dark .ce-toolbar__settings-btn {
	color: white;
	background: #191b1e;
}

.theme-dark .ce-popover.ce-popover--opened {
	color: white;
	background: #191b1e;
}

.theme-dark .ce-popover__item-icon {
	color: white;
	background: #191b1e;
}

.cdx-list {
	padding-right: 40px;
	padding-left: inherit;
}

@media (min-width: 1200px) {
	.analyze_list .card {
		margin: 10px 10px 20px 10px !important;
	}
}

#analyze_content .link-tool__content {
	display: block;
	padding: 25px;
	box-shadow: 0 0 0 2px #fff;
	color: initial !important;
	text-decoration: none !important;
	margin: 20px 0;
	background: #fff;
	border: 1px solid rgba(201, 201, 204, 0.48);
	border-radius: 6px;
}

#analyze_content .link-tool__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5em;
	margin: 0 0 10px 0;
}

#analyze_content .link-tool__description {
	margin: 0 0 20px 0;
	font-size: 15px;
	line-height: 1.55em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#analyze_content .link-tool__anchor {
	display: block;
	font-size: 15px;
	line-height: 1em;
	color: #888 !important;
	border: 0 !important;
	padding: 0 !important;
}

#analyze_content .link-tool__content::after {
	content: "";
	clear: both;
	display: table;
}

@media (min-width: 1000px) {
	.analyze_top_cover {
		max-width: 1050px;
		margin-left: 30px !important;
		margin-right: 30px !important;
	}
}

.checkbox-wrapper-fa1 * {
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.checkbox-wrapper-fa1 input[type="checkbox"] {
	display: none;
}

.checkbox-wrapper-fa1 label {
	--size: 25px;
	--shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1);

	position: relative;
	display: block;
	width: var(--size);
	height: var(--size);
	margin: 0 auto;
	background-color: #a5a5a5;
	border-radius: 50%;
	box-shadow: 0 var(--shadow) #ffffff;
	cursor: pointer;
	transition: 0.2s ease transform, 0.2s ease background-color,
		0.2s ease box-shadow;
	overflow: hidden;
	z-index: 1;
}

.checkbox-wrapper-fa1 label:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	width: calc(var(--size) * 0.7);
	height: calc(var(--size) * 0.7);
	margin: 0 auto;
	background-color: #fff;
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: inset 0 var(--shadow) #ffbeb8;
	transition: 0.2s ease width, 0.2s ease height;
}

.checkbox-wrapper-fa1 label:hover:before {
	width: calc(var(--size) * 0.55);
	height: calc(var(--size) * 0.55);
	box-shadow: inset 0 var(--shadow) #ff9d96;
}

.checkbox-wrapper-fa1 label:active {
	transform: scale(0.9);
}

.checkbox-wrapper-fa1 .tick_mark {
	position: absolute;
	top: -1px;
	right: 0;
	left: calc(var(--size) * -0.05);
	width: calc(var(--size) * 0.6);
	height: calc(var(--size) * 0.6);
	margin: 0 auto;
	margin-left: calc(var(--size) * 0.14);
	transform: rotateZ(-40deg);
}

.checkbox-wrapper-fa1 .tick_mark:before,
.checkbox-wrapper-fa1 .tick_mark:after {
	content: "";
	position: absolute;
	background-color: #fff;
	border-radius: 2px;
	opacity: 0;
	transition: 0.2s ease transform, 0.2s ease opacity;
}

.checkbox-wrapper-fa1 .tick_mark:before {
	left: 0;
	bottom: 0;
	width: calc(var(--size) * 0.1);
	height: calc(var(--size) * 0.3);
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
	transform: translateY(calc(var(--size) * -0.68));
}

.checkbox-wrapper-fa1 .tick_mark:after {
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(var(--size) * 0.1);
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
	transform: translateX(calc(var(--size) * 0.78));
}

.checkbox-wrapper-fa1 input[type="checkbox"]:checked+label {
	background-color: #07d410;
	box-shadow: 0 var(--shadow) #92ff97;
}

.checkbox-wrapper-fa1 input[type="checkbox"]:checked+label:before {
	width: 0;
	height: 0;
}

.checkbox-wrapper-fa1 input[type="checkbox"]:checked+label .tick_mark:before,
.checkbox-wrapper-fa1 input[type="checkbox"]:checked+label .tick_mark:after {
	transform: translate(0);
	opacity: 1;
}

.path_init .card {
	margin: 0 2px 4px 2px;
}

.path_init .card .content {
	margin: 20px 12px 20px 12px;
}

.bg-101 {
	background-image: url(../images/pictures/11l.jpg);
}

.bg-101 .card-content {
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

/* Timeline Container */
.timeline {
	background: var(--primary-color);
	margin: 20px auto;
	padding: 20px;
}

/* jcard container */
.jcard {
	position: relative;
	max-width: 400px;
}

/* setting padding based on even or odd */
.jcard:nth-child(odd) {
	padding: 20px 0 20px 20px;
}

.jcard:nth-child(even) {
	padding: 20px 20px 20px 0;
}

/* Global ::before */
.jcard::before {
	content: "";
	position: absolute;
	width: 50%;
	border: dashed;
}

/* Setting the border of top, bottom, left */
.jcard:nth-child(odd)::before {
	left: 0px;
	top: -4.5px;
	bottom: -4.5px;
	border-width: 2px 0 2px 2px;
	border-radius: 50px 0 0 50px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
	.jcard:nth-child(odd)::before {
		top: -2px;
		bottom: -4px;
	}
}

/* Setting the border of top, bottom, right */
.jcard:nth-child(even)::before {
	right: 1px;
	top: 1px;
	bottom: 0;
	border-width: 2px 2px 2px 0;
	border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first jcard */
.jcard:first-child::before {
	border-top: 0;
	border-top-left-radius: 0;
}

/* Removing the border if it is the last jcard  and it's odd */
.jcard:last-child:nth-child(odd)::before {
	border-bottom: 0;
	border-bottom-left-radius: 0;
}

/* Removing the border if it is the last jcard  and it's even */
.jcard:last-child:nth-child(even)::before {
	border-bottom: 0;
	border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
	display: flex;
	flex-direction: column;
	background: white;
	color: gray;
	/* border-radius: 30px; */
	padding: 20px;
}

/* Title of the jcard */
.title {
	/* color: orangered; */
	position: relative;
}

/* Timeline dot  */
/* .title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 999px;
    border: 3px solid orangered;
} */

/* text right if the jcard is even  */
.jcard:nth-child(even)>.info>.title {
	text-align: right;
}

/* setting dot to the left if the jcard is odd */
.jcard:nth-child(odd)>.info>.title::before {
	left: -45px;
	top: 5px;
}

/* setting dot to the right if the jcard is odd */
.jcard:nth-child(even)>.info>.title::before {
	right: -42px;
	top: 5px;
}

.theme-dark .card-overlay.bg-white {
	background-color: #040404 !important;
}

.theme-dark .info {
	background-color: #0f1117;
}

.disable {
	pointer-events: none !important;
}

.login-with-google-btn {
	transition: background-color 0.3s, box-shadow 0.3s;

	padding: 12px 16px 12px 42px;
	border: none;
	border-radius: 3px;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);

	color: #757575;
	font-size: 14px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
	background-color: white;
	background-repeat: no-repeat;
	background-position: 12px 11px;

	&:hover {
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	&:active {
		background-color: #eeeeee;
	}

	&:focus {
		outline: none;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25),
			0 0 0 3px #c8dafc;
	}

	&:disabled {
		filter: grayscale(100%);
		background-color: #ebebeb;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
		cursor: not-allowed;
	}
}

.login-with-phone-btn {
	transition: background-color 0.3s, box-shadow 0.3s;
	padding: 12px 16px 12px 42px;
	border: none;
	border-radius: 3px;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);

	color: #757575;
	font-size: 14px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjA2IDE0Ljg1TDExLjE1IDhhMSAxIDAgMCAwLTEuNCAwTDUuOTMgMTEuNzRhMSAxIDAgMCAwIDAgMS40bDMuNjEgMy42YTEgMSAwIDAgMCAxLjQgMGw3LjEyLTYuOTJhMSAxIDAgMCAwIDAtMS40WiIgZmlsbD0iIzQyODVGNCIvPgo8L3N2Zz4K);
	background-color: white;
	background-repeat: no-repeat;
	background-position: 12px 11px;

	&:hover {
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
	}

	&:active {
		background-color: #eeeeee;
	}

	&:focus {
		outline: none;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25),
			0 0 0 3px #c8dafc;
	}

	&:disabled {
		filter: grayscale(100%);
		background-color: #ebebeb;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
		cursor: not-allowed;
	}
}


.no-curve {
	border-radius: 0 !important;
}

:root {
	--countdown_smaller: 0.32;
}

#countdown .container {
	color: #333;
	margin: 0 auto;
	text-align: center;
	padding: 0;
}

#countdown li {
	display: inline-block;
	font-size: 3.5em;
	list-style-type: none;
	padding: 0em 0.3em;
	text-transform: uppercase;
}

.game_text {
	font-size: 1.5em;
}

#countdown li span {
	display: block;
}

#countdown ul {
	padding: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: row-reverse;
}

#countdown .rotater {
	font-size: 14px;
	padding: 0;
	animation: spin, spinback;
	animation-delay: 0.5s, 0.5s;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	margin-right: 11px;
}

@media all and (max-width: 768px) {
	.game_text {
		font-size: calc(3rem * var(--countdown_smaller));
	}

	#countdown h1 {
		font-size: calc(1.5rem * var(--countdown_smaller));
	}

	#countdown li {
		font-size: calc(1.125rem * var(--countdown_smaller));
	}

	#countdown li span {
		font-size: calc(10.375rem * var(--countdown_smaller));
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

@keyframes spinback {
	0% {
		-webkit-transform: rotate(181deg);
		transform: rotate(181deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		color: black;
	}
}

.purchase_btn:disabled {
	background-color: #da4453;
}

.purchase_btn .spinner-border {
	--bs-spinner-width: 1.2rem;
	--bs-spinner-height: 1.2rem;
}

.profile_btn:disabled {
	background-color: #da4453;
}

.profile_btn .spinner-border {
	--bs-spinner-width: 1.2rem;
	--bs-spinner-height: 1.2rem;
}

.price_unit {
	font-size: 12px;
}

.purchase_loading {
	height: 50%;
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.purchase_delete_loading {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 10px 0 !important;
	margin-left: -5px;
}

.purchase_delete .spinner-border {
	--bs-spinner-width: 1.2rem;
	--bs-spinner-height: 1.2rem;
}

.purchase_actions {
	position: sticky;
	bottom: 0;
	background: white;
}

.theme-dark .purchase_actions {
	background: rgba(33, 37, 42, 1) !important;
}

.purchase_info_header {
	position: sticky;
	top: 0;
	background: white;
}

.theme-dark .purchase_info_header {
	background: rgba(33, 37, 42, 1) !important;
}

.cfab {
	position: fixed;
	right: calc(50% - 35px);
	bottom: 90px;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50% !important;
	z-index: 100;
	box-shadow: rgb(0 0 0 / 50%) 0 20px 25px -5px,
		rgb(0 0 0 / 50%) 0 10px 60px -10px !important;
}

.theme-dark .cfab {
	color: black !important;
}

.spinner-container {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	padding: 50px;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
}

.spinner-container .spinner-border {
	position: auto !important;
	top: auto !important;
	left: auto !important;
	margin-left: auto !important;
	font-size: 20px;
}

.theme-dark .spinner-container {
	background: #333333 !important;
}

.game-day-container {
	position: absolute;
	top: -3px;
	right: 0;
	width: 100%;
	text-align: right;
}

.theme-dark .game-day-container {
	color: black !important;
}

.game-money-container {
	position: absolute;
	top: -3px;
	left: 0;
	border-bottom-right-radius: 25px;
}

.theme-dark .game-money-container {
	color: black !important;
}

.theme-dark #game_day {
	color: black !important;
}

.theme-dark .price_unit {
	color: #616161 !important;
}

.theme-dark .bg-yellow-dark {
	color: #616161 !important;
}

.theme-dark .purchase_btn {
	color: #616161 !important;
}

.purchase-history-container {
	background: #e9e9e9;
}

.theme-dark .purchase-history-container {
	background: #252525;
}

.purchase_title {
	color: #616161;
	font-weight: 500;
}

.purchase_info {
	color: #616161;
}

.input-style.has-borders.input-style-active label.error {
	right: 0;
	color: red;
	opacity: 0.5;
}

.namefr {
	text-align: center;
	font-size: 18px;
	font-weight: bolder;
}

.namefrdet {
	text-align: justify;
	font-size: 15px;
	line-height: 40px;
}

.conresult {
	text-align: center;
	font-weight: bolder;
	margin-bottom: 40px;
}

.condetail {
	text-align: justify;
	font-size: 15px;
	line-height: 40px;
}


.datepicker-plot-area .datepicker-day-view .month-grid-box .header {
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

.datepicker-container.pwt-mobile-view .datepicker-plot-area {
	padding-top: calc(env(safe-area-inset-top) * 1.5) !important;
}

.bg-bio {
	background-image: url(../images/num/eslami/bio.jpeg);
}

.bg-name {
	background-image: url(../images/num/eslami/name.png);
}

.bg-marriage {
	background-image: url(../images/num/eslami/Marriage-Goals.webp);
}

.bg-fortune {
	background-image: url(../images/num/eslami/fortune.jpg);
}

.bg-partnership {
	background-image: url(../images/num/eslami/partnership.webp);
}

.bg-pet {
	background-image: url(../images/num/eslami/pet.jpg);
}

.bg-job {
	background-image: url(../images/num/eslami/job.jpg);
}

.bg-brand {
	background-image: url(../images/num/eslami/brand.jpg);
}

.bg-migrate {
	background-image: url(../images/num/eslami/migrate.jpg);
}

.bg-destiny {
	background-image: url(../images/num/pythagoras/destiny.webp);
}

.bg-year {
	background-image: url(../images/num/pythagoras/year.jpg);
}

.bg-personality {
	background-image: url(../images/num/pythagoras/personality.jpg);
}

.bg-life {
	background-image: url(../images/num/pythagoras/life.jpg);
}

.bg-desire {
	background-image: url(../images/num/pythagoras/desire.jpg);
}

.bg-1card {
	background-image: url(../images/tarot/1card.webp);
}

.bg-3card {
	background-image: url(../images/tarot/3card.webp);
}

.bg-4card {
	background-image: url(../images/tarot/4card.webp);
}

.bg-5card {
	background-image: url(../images/tarot/5card.webp);
}

.bg-6card {
	background-image: url(../images/tarot/6card.jpg);
}

.bg-lovecard {
	background-image: url(../images/tarot/love.jpeg);
}

.bg-daily {
	background-image: url(../images/tarot/daily.jpeg);
}

.bg-yesno {
	background-image: url(../images/tarot/yesno.jpeg);
}

.theme-dark {
	.datepicker-plot-area {
		background-color: black !important;
	}

	.datepicker-plot-area * {
		color: white !important;
	}

	.datepicker-plot-area .datepicker-navigator .pwt-btn-next,
	.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
	.datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
		color: white !important;
	}

	.datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
		background-color: black;
	}

	.datepicker-plot-area .datepicker-day-view .table-days td span,
	.datepicker-plot-area .datepicker-year-view .year-item,
	.datepicker-plot-area .datepicker-month-view .month-item {
		background-color: black !important;
	}

	p {
		color: #cfcbcb;
	}
}

.cbtn {
	display: flex;
	justify-content: center;
	align-items: center;

	.spinner-border {
		height: 18px;
		width: 18px;
	}
}


.cursor {
	display: inline-block;
	width: 2px;
	height: 25px;
	background-color: #aaa5a5;
	/* margin-left: 4px; */
	margin-top: -2px;
	position: absolute;
}

.input-style label {
	width: auto;
	text-align: center !important;
	min-width: 50px;
}

.input-style.input-style-active label {

	width: auto;
	min-width: 60px;
	text-align: center !important;
}

.noClick {
	pointer-events: none;
}

.cardsx {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.cardsx,
.cardx {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.cardx {
	font-size: 12vw;
	margin: 0px -20px;
	position: relative;
	cursor: pointer;
	color: #292A18;
	--s: 0;
	--spread: 0;
	--spreadAbs: 0;
}

.cardx:before,
.cardx:after {
	content: '';
	display: block;
	pointer-events: none;
}

.cardx:before {
	position: absolute;
	top: 50%;
	right: 0;
	bottom: -5%;
	left: 0;
	margin: auto;
	background: #000;
	filter: blur(10px);
	opacity: 0;
	transition: opacity 0.35s linear;
}

.cardx:after {
	position: relative;
	width: 1em;
	height: 1.8em;
	border-radius: 0.1em;
	background: #EEE;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
	text-align: center;
	padding: 0.1em 0;
	line-height: 1;
	transform-origin: center bottom;
	transition: transform 0.4s cubic-bezier(0.46, 0.01, 0.3, 0.98);
	transition-timing-function: cubic-bezier(0.1, 0.98, 0.47, 0.99);
}

.cardx:nth-child(1) {
	--spread: 0 - 0.5;
	--spreadAbs: 0.5;
	--origin: 1 * 100%;
	/* Fallback for CSSvar-less browsers */
}

.cardx:nth-child(1):before,
.cardx:nth-child(1):after {
	transform: rotate(-17.5deg) translateY(2.5%);
	transform-origin: var(--origin) 100%;
}

.cardx:nth-child(2) {
	--spread: 0.25 - 0.5;
	--spreadAbs: 0.25;
	--origin: 0.75 * 100%;
	/* Fallback for CSSvar-less browsers */
}

.cardx:nth-child(2):before,
.cardx:nth-child(2):after {
	transform: rotate(-8.75deg) translateY(1.25%);
	transform-origin: var(--origin) 100%;
}

.cardx:nth-child(3) {
	--spread: 0.5 - 0.5;
	--spreadAbs: 0;
	--origin: 0.5 * 100%;
	/* Fallback for CSSvar-less browsers */
}

.cardx:nth-child(3):before,
.cardx:nth-child(3):after {
	transform: rotate(0deg) translateY(0%);
	transform-origin: var(--origin) 100%;
}

.cardx:nth-child(4) {
	--spread: 0.75 - 0.5;
	--spreadAbs: 0.25;
	--origin: 0.25 * 100%;
	/* Fallback for CSSvar-less browsers */
}

.cardx:nth-child(4):before,
.cardx:nth-child(4):after {
	transform: rotate(8.75deg) translateY(1.25%);
	transform-origin: var(--origin) 100%;
}

.cardx:nth-child(5) {
	--spread: 1 - 0.5;
	--spreadAbs: 0.5;
	--origin: 0 * 100%;
	/* Fallback for CSSvar-less browsers */
}

.cardx:nth-child(5):before,
.cardx:nth-child(5):after {
	transform: rotate(17.5deg) translateY(2.5%);
	transform-origin: var(--origin) 100%;
}

@supports ((--a: 0)) {

	.cardx:nth-child(n):before,
	.cardx:nth-child(n):after {
		transform: rotate(calc(var(--spread) * 35deg)) translateY(calc(var(--spreadAbs) * 5%));
		transform-origin: var(--origin) 100%;
	}
}

.cardx:hover:before {
	opacity: 0.25;
	z-index: 2;
	transition-duration: 0.2s;
}

.cardx.activex:hover:after {
	z-index: 3;
	pointer-events: auto;
	transition-duration: 0.25s;
	/* transition-timing-function: cubic-bezier(0.37, -0.12, 0.32, 1.49); */
	transform: translate(0%, -75%) scale(1.75);
	transform: rotate(calc(var(--spread) * 25deg)) translate(0%, -40%) scale(2.75);
}

.cardx img {
	width: 100%;
	display: none;
	/* تصویر مخفی باشد */
}

.cardx.activex img {
	display: block;
	position: relative;
	width: 1.5em;
	height: 2.5em;
	border-radius: 0.1em;
	background: #EEE;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	text-align: center;
	padding: 0.1em 0;
	line-height: 1;
	transition: transform 0.4s cubic-bezier(0.46, 0.01, 0.3, 0.98);
	transition-timing-function: cubic-bezier(0.1, 0.98, 0.47, 0.99);
	transform-origin: var(--origin) 100%;
	z-index: 4;
	pointer-events: auto;
	transition-duration: 0.25s;
	transform: rotate(calc(var(--spread)* 25deg)) translate(18%, 50%) scale(1.8);
}

.card_dsc {
	flex-direction: column;
	display: flex;
	margin-bottom: 30px;
	justify-content: center;
	border: 1px solid;
	padding: 15px;
	padding-top: 20px;
	text-align: justify;
	font-size: 15px;
	line-height: 40px;
}

.card_dsc img {
	margin: auto;
}

.first_card img,
.second_card img,
.third_card img,
.fourth_card img,
.fifth_card img,
.sixth_card img,
.seventh_card img {
	border-radius: 10px;
}

@media (max-width: 450px) {
	.col-xs-2_4 {
		flex: 0 0 auto;
		width: 20%;
	}
}

@media (max-width: 450px) {
	.col-xs-1_4 {
		flex: 0 0 auto;
		width: 14.28%;
	}
}

.theme-dark .card {
	background-color: rgba(0, 0, 0, 0.6);
}




label.error {
	right: 0;
	left: auto !important;
	color: #e57979;
	font-size: 10px;
}

body .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

body .loader .bar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #F5F5F5;
	width: 180px;
	height: 33px;
	border: 1px solid #F5F5F5;
	border-radius: 2px;
	color: white;
	text-align: center;
}

body .loader .bar .loaded {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #54054F;
	height: 100%;
	max-width: 100%;
	width: 0%;
	border-radius: 2px;
	transition: width 1s linear;
}

body .loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 200px;
	-webkit-animation: bar 8s linear infinite;
	animation: bar 8s linear infinite;
	transition: height 1s ease-in;
}

body .loader .spinner:before {
	content: "";
	position: absolute;
	/* top: 0px; */
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 4px;
	border-radius: 100px;
	background-color: #54054F;
}

@-webkit-keyframes bar {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes bar {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.loader_text {
	z-index: 100;
	position: absolute;
	right: 0;
	left: 0;
}