@import url(root.css);

body {
	font-family: var(--fontRegular);
	margin: 0px;
	padding: 0px;
	background-color: #4a0300;
}

/* langualge start */
body.dir_rtl {
	direction: rtl;
	text-align: right;
}

body.dir_ltr {
	direction: ltr;
	text-align: left;
}

/* langualge end */
.d-none {
	display: none;
}

.clr {
	clear: both;
}

.progress_wrap {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 100;
	background-color: #000000b5;
}

.bg {
	background: url(../images/bg_01.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}

.opacity-0 {
	opacity: 0;
}

.logo {
	margin: 0 auto;
	text-align: center;
	padding: 20px 0px;
}

.logo img {
	height: 100px;
}

.head {
	text-align: center;
	color: var(--white);
	margin-bottom: 40px;
}

.head h2 {
	font-family: var(--fontBold);
	font-size: var(--ft22);
	margin: 0px;
	color: var(--secndary);
}

.head h3 {
	font-family: var(--fontMedium);
	margin: 0px;
	margin-top: 10px;
	font-size: 1.17em;
	color: var(--white);
}


.col-60 {
	width: 60% !important;
}

.col-70 {
	width: 70% !important;
}

.col-80 {
	width: 80% !important;
}

.col-90 {
	width: 90% !important;
}

.col-100 {
	width: 100% !important;
}

.content-wheel {
	margin: 0 auto;
	text-align: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	position: relative;
}

.content-wheel .content {
	position: relative;
	top: -70px;
	left: -6px;
}

.form_wrap {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background-color: #520301;
	border-radius: 1000px;
	width: 400px;
	height: 400px;
	justify-content: center;
	position: relative;
	top: 22px;
}

.form_hdr {
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 10px;
}

.form_hdr.regDetail {
	flex-direction: column;
}

.form_hdr.regDetail .form_row {
	flex-direction: column;
}

.form_hdr.regDetail .form_group {
	flex-direction: row;
	align-items: center;
}

.form_hdr.regDetail .form_group label {
	text-align: right;
	width: 50%;
}

.form_hdr.regDetail .form_group label span {
	margin: 0px 5px;
}

.form_hdr.regDetail .title {
	color: var(--white);
	width: 100%;
	text-align: left;
}

.form_wrap .head {
	color: var(--secndary);
	font-size: var(--ft16);
	margin-bottom: 0px;
}

.form_hdr .form_row {
	display: flex;
	gap: 10px;
}

.form_hdr .form_row.rowSelect {
	width: 105%;
}

.form_hdr .form_group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: 2px;
	position: relative;
}

.form_hdr .form_group label {
	font-size: 10px;
	color: var(--white);
	opacity: .5;
}

.form_hdr .form_group .mobExt select {
	height: 30px;
	border-radius: var(--radius);
	border: 1px solid #ffffff44;
	background-color: transparent;
	color: var(--white);
	font-size: var(--ft12);
}

.form_hdr .form_group input,
.form_hdr .form_group .selectHdr select {
	background-color: transparent;
	border: 1px solid #ffffff44;
	padding: 5px 10px;
	width: 100%;
	height: 30px;
	border-radius: var(--radius);
	box-sizing: border-box;
	color: var(--white);
	font-size: var(--ft12);
}

.bootstrap-select .dropdown-toggle::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: .5em;
	vertical-align: .255em;
	border-top: .4em solid;
	border-right: .4em solid transparent;
	border-left: .4em solid transparent;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	width: inherit !important;
}

.form_hdr .form_group .selectHdr .bootstrap-select {
	width: 100%;
}


.form_hdr .form_group .selectHdr button.btn.dropdown-toggle.form-control {
	background: transparent;
	border: 1px solid #ffffff44;
	padding: 0px 10px;
	width: 100%;
	height: 30px;
	border-radius: var(--radius);
	box-sizing: border-box;
	color: var(--white);
	font-size: var(--ft12);
}


.form_hdr .form_group select option {
	color: #000;
}

.form_hdr .form_group input::placeholder {
	color: #ffffff44;
}

.form_hdr .form_group .selectHdr {
	width: 100%;
}

.form_hdr .form_group .selectHdr select {
	height: 30px;
}


.form_hdr .form_group .mobExt {
	display: flex;
	gap: 10px;
}

.form_hdr .tnc_hdr {
	color: var(--white);
	font-size: var(--ft12);
	display: flex;
	align-items: center;
	gap: 5px;
}

.form_hdr .tnc_hdr a {
	text-decoration: underline;
	color: var(--white);
	cursor: pointer;
}

.form_hdr .tnc_hdr .chkBox {
	width: 15px;
	height: 15px;
	display: block;
}

.btn {
	background-image: linear-gradient(#D59E03, #771601);
	padding: 5px 20px;
	border-radius: var(--radius);
	border: none;
	color: var(--white);
	box-sizing: border-box;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
}

.btn:hover {
	background-image: linear-gradient(#771601, #D59E03);
}

input.error,
select.error {
	border: 2px solid red !important;
	background: #ffe6e6;
}

.error-message {
	color: red;
	font-size: 12px;
	margin-top: 2px;
	display: block;
	position: absolute;
	bottom: 10px;
	display: none;
}

.contOpn {
	position: absolute;
	width: 210px;
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cont-01 {
	left: -380px;
	top: -285px;
}

.cont-02 {
	right: 176px;
	top: 65px;
}

.cont-03 {
	left: 150px;
	bottom: 85px;
}

.cont-04 {
	right: -365px;
	bottom: -285px;
}

.contOpn .title {
	font-size: var(--ft16);
	color: var(--white);
	padding: 10px 30px;
}

.contOpn .title h3 {
	font-size: var(--ft18);
	color: var(--secndary);
	font-family: var(--fontMedium);
	margin-top: 0px;
}

.content_wrap {
	position: absolute;
}

.title.imgHdr h3 {
	font-size: var(--ft14);
	width: 80%;
	margin: auto;
	margin-bottom: 10px;
}

.title.imgHdr .prdImg {
	height: 100px;
}

.sts_msg {
	color: var(--white);
	width: 75%;
	margin: auto;
	display: flex;
	gap: 20px;
	flex-direction: column;
}

.sts_msg .head {
	font-size: var(--ft18);
	font-family: var(--fontBold);
}

.ad_log .form_hdr {
	gap: 15px;
	display: flex;
}

.reg_user .btn-link {
	color: var(--secndary);
	text-decoration: none;
}

.reg_user .btn-link_c {
	color: var(--white);
	text-decoration: none;
}

.reg_user .btn_wrap {
	display: flex;
	gap: 10px;
	text-align: center;
	justify-content: center;
}

.reg_user {
	width: 60%;
	margin: auto;
	box-shadow: 0px 0px 20px #ff2003be;
}

.reg_user table th {
	color: var(--secndary);
	padding: 5px;
}

.reg_user table td {
	color: var(--white);
	/* text-align: center; */
	padding: 10px 0px;
	border-bottom: 1px solid #ffffff70;
}

.reg_user table {
	width: 100%;
}

.reg_user .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #520301;
	padding: 10px;
	color: var(--secndary);
}

.reg_user .header h3 {
	color: var(--secndary);
	font-size: 1.17em;
	margin: 0px;
}

.reg_user .header input::placeholder {
	color: #ffffffc9;
}

.reg_user .header input {
	border: 1px solid #ffffff44;
	background-color: transparent;
	padding: 10px 20px;
	/* box-sizing: border-box; */
	border-radius: var(--radius);
}

.reg_user .list {
	background-color: #860400;
	padding: 10px;
}

.cong_msg {
	display: flex;
	gap: 20px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cong_msg .head {
	font-size: var(--ft22);
	font-family: var(--fontBold);
}

.cong_msg .winName {
	font-size: var(--ft32);
	margin: 20px 0px;
	/* display: none; */
}

.cong_msg .title {
	color: var(--secndary);
	font-size: var(--ft18);
}

.cong_msg h3 {
	margin: 0px;
	color: var(--white);
}

.cong_msg .col-secondary {
	color: var(--secndary) !important;
}

.lotti_ani {
	position: absolute;
	z-index: 1;
	display: flex;
	width: 100vw;
	height: 100vh;
}

.lotti_ani #lottie1 {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.lotti_ani #lottie2 {
	/* transform: scaleX(1); */
	height: 100vh;
	position: absolute;
	right: 0px;
	filter: invert() sepia(21);
	opacity: .2;
}

.lotti_ani #lottie3 {
	/* transform: scaleX(1); */
	height: 100vh;
	position: absolute;
	left: 0px;
	filter: invert() sepia(21);
	opacity: .3;
}

.lotti_ani #NextCustlottie2 {
	/* transform: scaleX(1); */
	height: 100vh;
	position: absolute;
	right: 0px;
	filter: invert() sepia(21);
	opacity: .2;
}

.lotti_ani #NextCustlottie3 {
	/* transform: scaleX(1); */
	height: 100vh;
	position: absolute;
	left: 0px;
	filter: invert() sepia(21);
	opacity: .2;
}


.hidden {
	opacity: 0;
}

.fadeIn {
	opacity: 1;
	transition: opacity 1s ease;
}

.flashy {
	animation: flashBlink 1s ease-in-out infinite;
	color: #ff0;
	font-weight: bold;
	text-shadow: 0 0 10px #f00, 0 0 20px #f00;
}

@keyframes flashBlink {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.4;
		transform: scale(1.1);
	}
}

.arrow {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 40px solid red;
	position: absolute;
	left: 43%;
	transform: translateX(-50%);
	top: 30px;
	z-index: 2;
	rotate: 180deg;
}

#wheel-container {
	position: relative;
	width: 500px;
	margin: 0 auto;
	text-align: center;
	top: -45px;
	left: -5px;
}

#wheelcanvas {
	border-radius: 50%;
	transition: transform 5s ease-out;
}

.spin_hdr {
	position: absolute;
	height: 50vh;
	background: #330000d9;
	width: 100%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 40%;
	flex-direction: column;
}

.spin_hdr .headline {
	font-size: 62px;
	margin-bottom: 20px;
	color: var(--secndary);
	font-style: italic;
	font-weight: bold;
	/* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
}

.spin_hdr .btn {
	font-size: 20px;
}

#result {
	font-size: 2rem;
	color: var(--white);
	position: absolute;
}

/* laoder start */
#loader {
	position: fixed;
	inset: 0;
	/* shorthand for top, right, bottom, left: 0 */
	/* background: transparent; */
	display: grid;
	place-items: center;
	z-index: 1000;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.spinner {
	width: 48px;
	height: 48px;
	border: 5px solid #ccc;
	border-top: 5px solid #333;
	border-radius: 50%;
	animation: spin 10s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

#loader.hidden {
	display: none;
}

/* laoder end */

/* modal start */
.modal-content.modWrap {
	background-color: rgb(117, 0, 0);
	border: none;
}

.modal-content.modWrap .modal-header .modal-title {
	color: var(--white);
}

.modal-content.modWrap .modal-header {
	border-bottom: 1px solid #ffffff75;
}

.modal-header .btn-close {
	color: var(--white);
	filter: invert();
}

.modal-content.modWrap .modal-footer {
	color: var(--white);
	border: none;
}

.modal-content.modWrap .modal-body {
	color: var(--white);
}

.modal-dialog.tnc_wrap {
	max-width: 50%;
	height: 70vh;
}

.tnc_wrap .modal-header {
	justify-content: space-between;
	display: flex;
}

.tnc_wrap .tnc_hdr .btn {
	position: absolute;
	right: -10px;
	top: -10px;

}

.tnc_wrap .tnc_hdr h5 {
	margin-top: 20px;
	margin-bottom: 20px;
	color: var(--white);
	border-bottom: 1px solid var(--black_200);
	padding-bottom: 10px;
}

.tnc_wrap .tnc_hdr .tncScroll {
	font-size: var(--ft14);
	height: 60vh;
	overflow-y: scroll;
	width: 95%;
	text-align: left;
}

.tnc_wrap .tnc_hdr .tncScroll::-webkit-scrollbar {
	background-color: rgb(164, 0, 0);
	width: 5px;
	position: relative;

}

.tnc_wrap .tnc_hdr .tncScroll::-webkit-scrollbar-thumb {
	height: 50px;
	background-color: rgb(82, 0, 0);
}

.tnc_wrap .tnc_hdr ol li {
	color: var(--secndary);
	padding-top: 10px;
}

.tnc_wrap .tnc_hdr ol li ul {
	margin-left: -15px;
}

.dir_rtl .tnc_wrap .tnc_hdr .tncScroll {
	text-align: right;
}

.dir_rtl .tnc_wrap .tnc_hdr {
	padding-right: 15px;
}

.tnc_wrap .tnc_hdr ol {
	padding-left: 15px;
}

.dir_rtl .tnc_wrap .tnc_hdr ol {
	padding-right: 15px;
}


.dir_rtl .tnc_wrap .tnc_hdr ol li ul {
	margin-right: -15px;
}

.dir_rtl .tnc_wrap .tnc_hdr ol li ul {
	margin-right: -15px;

}

.tnc_wrap .tnc_hdr ol li ul li {
	color: var(--white);
	padding-top: 0px;
}


/* modal end */

.remark_wrap {
	background: #430000d6;
	border: none;
	padding: 20;
	box-sizing: border-box;
	width: 100%;
	color: #fff;
	border: none;
}

textarea::placeholder {
	color: var(--black_200);
}

textarea:focus {
	outline: none;
}

.form_group.label_hdr label {
	font-size: 14px;
}

.bootstrap-select .dropdown-menu.inner {
	max-height: 150px !important;
	overflow-y: auto;
}

/* Optional: adjust button height */
.bootstrap-select .btn {
	height: 45px;
	line-height: 30px;
}

.dropdown-menu .active>.dropdown-item,
.dropdown-menu li:hover>.dropdown-item {
	color: var(--secndary);
}

.dropdown-item {
	color: var(--white);
}

.dropdown-menu {
	background: #a40a00;
	border: none;
}

.lang-hdr {
	display: flex;
	gap: 5px;
	flex-direction: column;
	padding: 20px;
	position: absolute;
	justify-content: end;
	align-items: flex-end;
	right: 20px;
	left: 20px;
}

.lang-hdr lable {
	font-size: var(--ft12);
	color: #ffffff93;
}

.lang-hdr .btn {
	font-size: var(--ft12);
	padding: 3px 10px;

}

.dir_rtl .bootstrap-select .dropdown-menu li,
.dir_rtl .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
	text-align: right;
}

@media (width: 1024px) {

	/* .wrapper {
        zoom: .85;
    }
    .form_wrap {
        zoom: 0.82;
        top: 30px;
        left: -5px;
    }
     */

	.cont-01 {
		left: -410px;
		top: -285px;
	}

	.cont-02 {
		right: 200px;
		top: 90px;
	}

	.cont-03 {
		left: 180px;
		bottom: 90px;
	}

	.cont-04 {
		right: -400px;
		bottom: -285px;
	}

	.form_wrap {
		width: 430px;
		height: 430px;
	}

	.reg_user {
		width: 90%;
	}

	/* .content-wheel {
        width: 100vw !important;
        height: 70vw !important;
        background-size: contain;
    } */

	#wheelcanvas {
		width: 560px;
		left: -31px;
		position: relative;
	}

	.content-wheel {
		width: 99% !important;
		background-size: contain;
		zoom: 1.1;
	}
}

@media (min-width: 640px) and (max-width: 900px) {
	.wrapper {
		zoom: .85;
	}

	.form_wrap {
		zoom: 0.82;
		top: 30px;
		/* left: -5px; */
	}

	.cont-01 {
		left: -350px;
		top: -265px;
	}

	.cont-02 {
		right: 135px;
		top: 65px;
	}

	.cont-03 {
		left: 125px;
		bottom: 65px;
	}

	.cont-04 {
		right: -340px;
		bottom: -265px;
	}

	.reg_user {
		width: 90%;
	}

	.content-wheel {
		width: 100vw !important;
		height: 70vw !important;
		background-size: contain;
		zoom: 1.1;
	}

	#wheelcanvas {
		width: 430px;
	}

	.modal-dialog.tnc_wrap {
		max-width: 80%;
	}
}

@media (min-width: 320px) and (max-width: 480px) {
	.content-wheel {
		position: relative;
		top: 150px;
	}

	.contOpn {
		position: relative;
	}

	.contOpn .cont-01 {}

	.content-wheel {
		position: relative;
		top: 20px;
		background-image: none !important;
		width: 100% !important;
	}

	.content_wrap {
		position: absolute;
		display: flex;
		flex-wrap: wrap;
		width: 89%;
		top: 590px;
		zoom: .9;
		margin: 0 auto;
		text-align: center;
		padding: 0px 20px;
		margin-top: 30px;
		display: none;
	}

	.cont-01 {
		left: 0;
		top: 0;
	}

	.cont-02 {
		right: 0px;
		top: 0px;
	}

	.cont-03 {
		left: 0px;
		top: 25px;
	}

	.cont-04 {
		right: 0px;
		top: 25px;
	}

	.form_wrap {
		top: 100px;
		width: 100%;
	}

	.head {
		margin-bottom: 0px;
		zoom: .85;
		width: 100%;
	}

	.col-70, .col-90, .col-80, .form_row.col-100 {
		width: 100% !important;
		flex-direction: column;
	}

	.content-wheel .content, .form_hdr .form_group .mobExt {
		width: 100%;
	}

	.form_wrap {
		background-color: transparent;
	}

	.form_hdr {
		width: 100%;
	}

	.cont-01, .cont-02, .cont-03, .cont-04 {
		zoom: 0.85;
	}

	.form_hdr {
		gap: 10px;
		padding: 0px 20px;
	}

	.content-wheel .content {
		left: 0px;
	}

	.wrapper {
		padding-bottom: 150px;
	}

	div#divRegConfirm {
		top: -50px;
	}

	.head br {
		display: none;
	}


	.logo {
		position: relative;
		top: 40px;
	}

	.logo img {
		height: 80px;
	}

	.lang-hdr {
		display: flex;
		gap: 5px;
		flex-direction: column;
		padding: 10px;
		/* position: absolute; */
		justify-content: center;
		/* align-items: center; */
		right: 0;
		left: 0;
		/* top: 90px; */
		z-index: 1;
	}

	.modal-dialog.tnc_wrap {
		max-width: 100%;
	}

	.content-wheel .content {
		position: relative;
		top: -40px;
	}
	.form_wrap.mob_hdr {
		top: 60px;
		border: 1px solid red;
		padding: 10px;
		height: 280px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 280px;
		margin: auto;
	}
	.content-wheel {
		width: 90% !important;
		height: 85vh !important;
		justify-content: flex-start;
		align-items: flex-start;
		top: 12%;
	}


}

@media (width: 320px) {
	.cont-01, .cont-02, .cont-03, .cont-04 {
		zoom: .6;
	}

	/* .content-wheel {
		width: 90% !important;
		height: 85vh !important;
	} */

	.head {
		width: 100%;
	}

	.form_wrap .head {
		width: 100%;
	}

	.content_wrap {
		width: 100%;
		justify-content: space-between;
	}
	.form_hdr {
		gap: 10px;
		padding: 0px 0px;
	}

}