:root {

    --primary-color: #811c1c;
	--secondary-color: #191919;
	--secondary-transparent: #7c0000c9;
	--primary-transparent: #cc0000d9;
    --primary-text-color: #fff;

}



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {
	background-color: var(--secondary-color) !important;
	font-family: "Rajdhani", sans-serif !important;
	display: flex;
	flex-direction: column;
}



.row {

    margin-left: 0!important;

    margin-right: 0!important;

}



.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

	padding-right: 0!important;

	padding-left: 0!important;

}



a {

	color: var(--primary-text-color)!important;

	transition: 0.2s!important;

}



a:hover {

	color: #bbb!important;

	text-decoration: none!important;

}

.mobile-btn-wrapper i {
	display: none;
}

.btn-custom {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	border-radius: 8px !important;
}



.btn-custom2 {
	background-color: var(--secondary-color) !important;
	border-color: var(--secondary-color) !important;
	border-radius: 8px !important;
}



.input-custom {

	border-radius: 8px!important;

}



.main-wrapper {
	min-height: 100vh;
	background-image: url(../img/body-bg.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}



.container-custom {
	margin-left: auto;
	margin-right: auto;
	max-width: 900px;
	width: 100%;
}

.header-wrapper {
	background-color: var(--primary-color);
}

.logo {
	text-align: center;
	width: 100%;
}

.logo img {
	width: 250px;
}

.sticky-nav {
	position: fixed;
	width: 100vw;
	z-index: 100;
	bottom: 0px;
}

.sticky-nav-inner {
	background: rgb(49,49,49);
	background: linear-gradient(180deg, rgba(49,49,49,1) 50%, rgba(41,41,41,1) 50%);
	border-radius: 8px 8px 0px 0px;
}

.sticky-nav ul {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.sticky-nav ul li {
	display: inline-block;
	padding: 1rem;
}

.sticky-nav ul li a {
	font-weight: 700;
	text-transform: uppercase;
}

.top-nav-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}



.top-nav-inner ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	background-color: var(--secondary-color);
	border-radius: 8px;
	padding: 15px;
}

.top-nav-inner ul li {
	list-style: none;
	font-weight: 600;
	font-size: 15px;
}

.top-result {
	background-color: var(--primary-color);
	border-top-left-radius: 16px;
	border-bottom-right-radius: 16px;
	background-image: url(../img/result-bg.png);
	background-repeat: no-repeat;
	background-size: 32%;
	background-position-x: -1px;
	background-position-y: -1px;
}

.first-prize-result-date {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: var(--primary-text-color);
	font-size: 15px;
	padding: 28px;

}



.first-pool-title {
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	background-color: var(--secondary-color);
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px;
	width: 90%;
}



.first-pool-title i {

	font-size: 17px;

}



.pool-date {

	font-weight: 600;

}



.pool-ball-result-inner li {

	list-style: none;
	background: -webkit-radial-gradient(90% 15%, circle, rgba(83, 63, 63), #313131, #360505);
	background: -moz-radial-gradient(90% 15%, circle, rgb(83, 63, 63), #313131, #360505);
	background: -o-radial-gradient(90% 15%, circle, rgba(83, 63, 63), #313131, #360505);
	background: -ms-radial-gradient(90% 15%, circle, rgba(83, 63, 63), #313131, #360505);
	background: radial-gradient(90% 15%, circle, rgba(83, 63, 63), #313131, #360505);
	border-radius: 50%;
	height: 97px;
	width: 97px;
	color: var(--primary-text-color);
	display: flex;
	justify-content: center;
	align-items: center;

}

.pool-ball-result-inner li span {
	border: 4px solid var(--primary-text-color);
	border-radius: 50%;
	font-size: 2.5rem;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	align-items: center;
	background-color: var(--secondary-color);
}

.pool-ball-result-inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 100%;

}

.ball-result {
	transition:all 0.3s ease;
	cursor: pointer;
}



/* .ball-result:hover {
	-webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 2; */
}



@-webkit-keyframes swing {

    15% {

        -webkit-transform: translateY(5px);

        transform: translateY(5px);

    }

    30% {

        -webkit-transform: translateY(-5px);

        transform: translateY(-5px);

    }

    50% {

        -webkit-transform: translateY(3px);

        transform: translateY(3px);

    }

    65% {

        -webkit-transform: translateY(-3px);

        transform: translateY(-3px);

    }

    80% {

        -webkit-transform: translateY(2px);

        transform: translateY(2px);

    }

    100% {

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



@keyframes swing {

    15% {

        -webkit-transform: translateY(5px);

        transform: translateY(5px);

    }

    30% {

        -webkit-transform: translateY(-5px);

        transform: translateY(-5px);

    }

    50% {

        -webkit-transform: translateY(3px);

        transform: translateY(3px);

    }

    65% {

        -webkit-transform: translateY(-3px);

        transform: translateY(-3px);

    }

    80% {

        -webkit-transform: translateY(2px);

        transform: translateY(2px);

    }

    100% {

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



.date-now-wrapper {

	font-size: 15px;

}



.running-text-wrapper {

	font-size: 15px;

}


.date-runningtext {
	background-color: var(--primary-color);
}

.date-now {
	color: var(--primary-text-color);
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.7px;
	background-color: var(--secondary-color);
}



.date-now span:nth-child(2) {

	font-weight: 600;

}



.running-text {
	display: flex;
	align-items: center;
	color: var(--primary-text-color);
	padding: 8px;
	border-top-right-radius: 8px;
	height: 100%;
}



.marquee {

	overflow: hidden;

	font-size: 14px;

	letter-spacing: 1px;

}



.marquee p {

	margin: 0;

}



.countdown-wrapper {
	border-radius: 8px;

}



.result-wrapper {
	border-radius: 8px;

}



.countdown-wrapper {

	color: var(--primary-text-color);

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	min-height: 348px;

}



.next-result-heading {
	font-family: "Rajdhani", sans-serif;
	font-weight: 800;
	font-size: 1.7rem;
	letter-spacing: 2px;
	border-radius: 25px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
}



.last-draw-date {
	background-color: var(--secondary-color);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 1px;
	border-radius: 8px;
	padding: 10px 15px;
}



.last-draw-date span:nth-child(2) {

	font-weight: normal;

}



.prize-label-wrapper {

	color: var(--primary-text-color);

}



.prize-label {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
}



.result-wrapper {

	font-size: 15px;

	font-weight: 600;

}



.prize-value-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: var(--primary-color);
	color: var(--primary-text-color);
	min-height: 38px;
}



.cons-starter-value-inner {

	display: flex;

	align-items: center;

	justify-content: center;

	color: var(--primary-text-color);

	padding: 3px;

}



.cons-starter-value-wrapper {

	background-color: var(--primary-color);

	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;

	min-height: 73px;

}


/* .web-logo a img {

	-webkit-filter: drop-shadow(5px 5px 5px #222);

	filter: drop-shadow(5px 5px 5px #222);

} */



.web-url {

	display: flex;

	justify-content: center;

	align-items: center;

}



.web-url span {

	background-color: var(--secondary-color);

	border-radius: 25px;

	padding: 7px 18px 7px 18px;

	font-size: 14px;

	font-weight: 600;

	transition: 0.2s;

}



.web-url span:hover {

	background-color: var(--primary-color);

}



.web-url span:hover > a {

	color: var(--primary-text-color)!important;

}



.web-url span a {

	display: flex;

	align-items: center;

	justify-content: center;

}



.web-url span a:hover {

	letter-spacing: 1px;

}



.web-url span a i {

	font-size: 18px;

}



/* .web-url span a:hover > i {

	color: var(--primary-color);

} */



.license-logo-wrapper ul {

	display: flex;

	justify-content: space-evenly;

	align-items: center;

}



.license-logo {

	list-style: none;

}



.license-logo img {

	width: 75px;

	padding: 10px;

}



.license-logo .rounded-logo {

	width: 65px;	

}



.soc-med ul {

	display: flex;

	justify-content: space-evenly;

	align-items: center;

	height: 100%;

}



.soc-med ul li {

	list-style: none;

	color: var(--primary-text-color);

}



.socmed-text {

	font-size: 15px;

	font-weight: 600;

}



.socmed-link {

	font-size: 1.8rem;

}



.copyright {
	color: var(--primary-text-color);
	padding-bottom: 6rem;
	font-size: 13px;
	letter-spacing: 2px;
}



/* .clock-prev {

	flex-direction: column;

} */



.clock-prev-label {

	width: 100%;

}



.clock-prev-label {

	width: 100%;

	margin-bottom: 3px;

	font-size: 11px;

	text-align: center;

}



.clock-prev-label .col-4:nth-child(1) {

	padding-right: 20px !important;

}



.clock-prev-label .col-4:nth-child(3) {

	padding-left: 20px !important;

}



.clock-prev-dot {

	font-size: 40px;

	font-family: "Open Sans", sans-serif;

	font-weight: bold;

	margin: 2px;

	padding: 2px 9px 2px 9px;

}



.clock-num {

	background-color: #313131;

	border-radius: 5px;

	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);

	font-size: 40px;

	font-family: "Open Sans", sans-serif;

	font-weight: bold;

	margin: 2px;

	padding: 2px 9px 2px 9px;



}



.no-selection {

	-webkit-touch-callout: none; /* iOS Safari */

	-webkit-user-select: none; /* Safari */

	-khtml-user-select: none; /* Konqueror HTML */

	-moz-user-select: none; /* Old versions of Firefox */

	-ms-user-select: none; /* Internet Explorer/Edge */

	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

}



.padding-spin {

	padding: 4px;

}





.table-result-wrapper {

	font-size: 15px;

}



.table-head-wrapper {
	background-color: var(--primary-color);
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
}



.table-head {

	display: flex;

	justify-content: center;

	align-items: center;

}



.table-result-container {

	color: var(--primary-text-color);

}

.table-wrapper {
	background-color: var(--primary-color);
	border-radius: 8px;
	padding: 15px 0;
}

.table-content-wrapper {
	border-top: 1px solid #751616;
	color: var(--primary-text-color);
}

.table-content-wrapper:first-child {
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top: none;
}

.table-content-wrapper:last-child {
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.table-content {
	display: flex;
	justify-content: center;
}



.title-page {

	background-color: var(--primary-transparent);

	border-radius: 45px;

}



.title-page-label {

	padding: 3px 20px 3px 20px;

	background-color: var(--secondary-color);

	border-radius: 25px;

	color: var(--primary-text-color);

	border: 3px solid var(--primary-text-color);

	font-weight: 600;

	font-size: 1.2rem;

}



.content-page-wrapper {

	background-color: var(--primary-transparent);

	border-radius: 10px;

}



.prediksi-img-thumb-wrapper {

	display: flex;

	justify-content: center;

	align-items: center;

}



.thumb-grid-img {

	border-radius: 8px;

}



.prediksi-img-thumb-wrapper:hover > .overlay-prediksi-img {

	opacity: 1;

}

.overlay-prediksi-img {

	background-color: #540707b0;

	height: 97%;

	width: 97%;

	position: absolute;

	border-radius: 8px;

	opacity: 1;

	transition: 0.5s;

	justify-content: center;

	align-items: center;

}



.thumb-data-wrapper {

	width: 100%;

	justify-content: center;

}



.thumb-category-name {

	height: 30px;

	width: 100%;

	color: var(--primary-text-color);

	text-align: center;

	font-weight: 600;

	font-size: 1.2rem;

}



.border-separator {

	height: 1px;

	background-color: var(--primary-text-color);

	width: 50%;

	margin-top: 10px;

	margin-bottom: 10px;

}



.thumb-date {

	height: 30px;

	width: 100%;

	color: var(--primary-text-color);

	text-align: center;

	font-size: 13px;

}



.zoom-img {

	font-size: 2.5rem;

}



.zoom-img:hover {

	color: var(--primary-color)!important;

}



.banner-img {

	border-radius: 8px;

	transition: 0.5s;

	cursor: pointer;

}



.banner-img:hover {

	transform: scale(1.1);

}


#tableResult {
	opacity: 0;
}



#onDrawing {
	display: none;
	height: 75vh;
	background-color: var(--primary-color);
	border-radius: 8px;
	color: #fff;
}



#onDrawing .row {

	height: 100%;

}



.on-drawing-msg {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

}



.on-drawing-msg h2 {

	font-size: 1.6rem;

	font-weight: 600;

	letter-spacing: 1px;

}



.on-drawing-msg h5 {

	font-weight: 300;

	letter-spacing: 1px;

}



.on-drawing-logo {

	width: 400px;

}



.btn-on-drawing a {

	background-color: var(--secondary-color);

	border-radius: 25px;

	padding: 7px 18px 7px 18px;

	font-size: 1.1rem;

	font-weight: 400;

	transition: 0.2s;

	letter-spacing: 2px;

	display: flex;

	justify-content: center;

	align-items: center;

	border: 3px solid var(--primary-color);

}



.btn-on-drawing a:hover {

	letter-spacing: 3px;

	border: 3px solid var(--primary-text-color);

	color: var(--primary-text-color)!important;

}



.btn-on-drawing a i {

	font-size: 1.6rem;

}



#afterEmail {

	height: 75vh;

	background-color: var(--primary-transparent);

	border-radius: 8px;

	color: #fff;

}



#afterEmail .row {

	height: 100%;

}



.contact-wrapper {
	background-color: var(--primary-color);
	border-radius: 8px;
}



.contact-wrapper-inner {

	display: flex;

	justify-content: center;

}



#contactForm input, textarea {

	font-size: 14px !important;

}



.contact-list-wrapper-inner {

	width: 100%;

	margin: 0;

}



.contact-right {

	background-color: var(--primary-color);

	border-top-right-radius: 8px;

	border-bottom-right-radius: 8px;

	display: flex;

	justify-content: center;

	align-items: center;

}



.contact-list-wrapper-inner li {

	list-style: none;

	color: var(--primary-text-color);

	font-size: 1rem;

	background-color: var(--secondary-color);

	width: 100%;

	border-radius: 8px;

	padding: 5px;

	margin-bottom: 1rem;

	display: flex;

	justify-content: center;

	align-items: center;

}



.contact-list-wrapper {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 100%;

}



.contact-text {

	text-align: center;

	margin-bottom: 10px;

	color: var(--primary-text-color);

	font-weight: 600;

}



.contact-url {

	width: 100%;

	display: flex;

	align-items: center;

}



.contact-icon {

	padding-right: 8px;

	font-size: 1.4rem;

	width: 20%;

	text-align: center;

}



.contact-value {

	font-size: 1rem;

	width: 80%;

}

.spin-wrapper {
	background-color: var(--primary-transparent);
	border-radius: 8px;
}

.spin-container {
	max-width: 700px;
	margin: 0 auto;
	color: var(--primary-text-color);
}

.spin-inner {
	min-height: 180px;
}

.spin-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.spin-left h3 {
	text-align: right;
	font-weight: 600;
	font-size: 1.8rem;
}

.spin-left p {
	font-weight: 300;
	text-align: right;
}

.number-spin-wrapper {

}

.number-spin-wrapper li {
	list-style: none;
	width: 55px;
	height: 55px;
	background-color: #7c0000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	font-size: 1.2rem;
	border: 3px solid var(--primary-text-color);
}

.number-spin-wrapper li input {
	width: 75%;
	text-align: center;
	border: transparent;
	background-color: transparent;
	font-weight: 600;
	color: var(--primary-text-color);
	cursor: default;
	outline: none;
}

.number-spin-wrapper {
	display: flex;
	justify-content: space-around;
	padding-top: 15px;
}

.spin-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.spin-right button {
	background-color: #313131;
	color: #fff;
	border-radius: 25px;
	padding: 6px 25px;
	border: none;
	width: 90%;
	margin: 20px;
	transition: 0.2s;
}

.spin-right button:hover {
	color: #bbb;
}

.spin-right button:focus {
	outline: none;
}

.bm-table {
	background-color: #ffffffed;
	border-radius: 8px;
	max-height: 700px;
	overflow-y: auto;
}

.table-bm {
	color: #313131;
	font-size: 15px;
}

.table-bm p {
	margin: 0;
}

.bm-number {
	font-weight: 600;
	color: var(--secondary-color);
}