body {

	background-color: #7d1c5f;

}



.boldit {

    font-weight: bold;

}



.languageButton {

    cursor: pointer;

    color: #000; /* White font color */

}



.selected {

    font-weight: bold; /* Indication for selected language */

}





.checkbox-option {

	display: flex;

    align-items: flex-start;

	margin: 15px 0px 8px;

}



.checkbox-option label {

    display: inline-block;

    cursor: pointer;

    margin-left: 5px; /* Add spacing between the checkbox and label */

}





.radio-group {

    display: flex;

}



.radio-option {

    margin-bottom: 5px;

}



.radio-option input[type="radio"] {

    display: none; /* Hide the default radio button */

}



.radio-option label {

    display: inline-block;

    cursor: pointer;

    margin-left: 5px; /* Add spacing between the radio button and label */

}



/* Style for selected radio button */

.radio-option input[type="radio"]:checked + label {

    font-weight: bold;

	color: #7d1c5f; /* Make the label text bold when radio button is selected */

}





.formButtonContainer {

	display: flex;

    flex-direction: row;

    align-items: center;

    align-content: center;

    flex-wrap: wrap;

    justify-content: center;

}



.formButton {

    padding: 15px;

    border-radius: 8px;

    border: 0;

    background: #7d1c5f;

    color: white;

    font-weight: bold;

    margin: 10px auto;

    width: 100%;

	cursor: pointer;

    transition: background-color 0.3s ease;

}



.formCriteriaBtn {

    margin: 0;

    width: fit-content;

    text-align: center;

    margin: 0 auto;

    width: 50%;

    padding: 15px;

    border-radius: 8px;

    border: 0;

    background: #7d1c5f;

    color: white;

    font-weight: bold;

	cursor: pointer;

    transition: background-color 0.3s ease;

}



.noSelect {

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

    -moz-user-select: none; /* Firefox */

    -ms-user-select: none; /* IE 10+ */

    user-select: none; /* Standard syntax */

}



.introContainer {

	flex-direction: column;

    font-size: 14px;

    line-height: 1.5;

    text-align: justify;

}





.custom-file-container {

    position: relative;

    display: inline-block;

    overflow: hidden;

    width: 100%;

}



.custom-file-input {

    position: absolute;

    font-size: 10px;

    right: 0;

    top: 0;

    opacity: 0;

    cursor: pointer;

}



.custom-file-label {

    display: inline-block;

    padding: 6px 12px;

    margin: 10px 0px;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.42857143;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    background-color: #fff;

    border: 1px solid #ccc;

    border-radius: 4px;

    width: -webkit-fill-available;

}



.uploadProgress {

	width: 90%;

    margin: 0 auto;

}



.imageViewer {

	display: block;

    display: inline-block;

    padding: 6px 12px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.42857143;

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    background-color: #66BB6A;

    color: white;

    border: 1px solid #ccc;

    border-radius: 4px;

    width: 94%;

    margin: 10px 0px;

}



.custom-file-input:focus + .custom-file-label,

.custom-file-label:focus {

    outline: 1px dotted #000;

    outline: -webkit-focus-ring-color auto 5px;

}







.spinner {

	display: inline-block;

    width: 10px;

    height: 10px;

    border: 3px solid rgb(255 255 255 / 30%);

    border-radius: 50%;

    border-top-color: #fff;

    margin: -3px 10px;

    animation: spin .6s linear infinite;

}

  

  @keyframes spin {

    0% { transform: rotate(0deg); }

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

  }





.dateContainer {

    margin: 0px;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}



.dateContainerInner {

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 49%;

}



.hiddenClass {

	display: flex;

	flex-direction: column;



}



.kembali_button {

	padding: 15px;

    border-radius: 8px;

    border: 1px solid #008789;

    background: #ffffff;

    color: #008789;

    font-weight: bold;

	flex: 1;

    margin: 25px 10px 25px 0px;

    width: 100%;

}



.sockrayflex {

    flex: 2;

	margin: 25px auto !important;

}



.buttonContainer {

	display: flex;

    flex-direction: row;

}



.sampleContainer {

	display: flex;

    align-content: center;

    align-items: center;

    flex-direction: column;

	margin: 1em 0px;

}



input {

    box-sizing: border-box;

    width: 100%;

    padding: 13px;

    border: 1px solid #ccc;

    border-radius: 5px;

    background-color: #fff;

    font-size: 16px;

    color: #333;

    transition: border-color 0.3s ease-in-out;

}



hr {

	border: none;

    height: 1px;

    background-color: #000;

    margin: 5px 0 18px;

}



input:focus {

    outline: none;

    border-color: #007bff;

}



/* CSS for dropdown */

.custom-select {

    box-sizing: border-box;

    width: 100%;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    background-color: #fff;

    font-size: 16px;

    color: #333;

    transition: border-color 0.3s ease-in-out;

}



/* CSS for the select element */

.custom-select select {

    width: 200px;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    background-color: #fff;

    cursor: pointer;

    color: black;

}



/* CSS for the select element's options */

.custom-select select option {

    padding: 10px;

    color: black;

}



.form-control {

	text-transform: uppercase;

}



.form-form {

    display: flex;

    flex-direction: column;

    margin: 20px;

    position: relative;

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

}



.p_label {

    padding: 15px 0px 5px;

    font-size: 14px;

}



.login_button {

	padding: 15px;

    border-radius: 8px;

    border: 0;

    background: #7d1c5f;

    color: white;

    font-weight: bold;

    margin: 10px auto;

    width: 100%;

}



.get_help {

	text-align: center;

    font-size: 12px;

    margin: 0px;

}



.p_title{

	margin: 1em 0em 0em;

	font-weight: 600;

	font-size: 16px;

}



.p_subtitle {

	margin: 0;

    padding: 5px 0px;

    font-size: 14px;

}



.maincheckbox_container {

	display: flex;

    flex-direction: column;

    align-items: stretch;

    align-content: flex-start;



}



.checkbox-container {

	display: flex;

    vertical-align: top;

    align-items: flex-start;

    font-size: 12px;

    text-align: left;

    padding: 0px 6px;

}



input[type="checkbox"] {

    display: flex;

    margin-right: 5px;

    vertical-align: top;

    box-sizing: border-box;

    width: 12px;

}



.formComplete {

    flex-direction: column;

}



.complete_lottie {

	width: 250px;

    height: 250px;

    margin: 2rem auto 0rem;

}



.p_complete1 {

    margin: 0em 3em 0em;

    text-align: center;

    font-size: 17px;

    font-weight: 600;

}

.p_complete2 {

    margin: 1em 5em 4em;

    text-align: center;

    font-weight: normal;

    font-size: 14px;

}







		#countdownbefore{

			text-align: center;

		    background: black;

		    color: white;

		    height: 100%;

		    font-family: sans-serif;

		    padding: 50px;

		    font-size: 70px;

		}

		.modal-body-promo{

			background: #ececec;

			padding: 0;

		}

		.modal-footer-promo{

			background: #ececec;

			border-top: 0;

			padding: 0px 25px 10px 25px;

		}



		.img-responsive{

			max-width: 100%;

			height: auto;

			display: block;

		}

		#pageloader

		{

		  background: rgba( 255, 255, 255, 0.8 );

		  display: none;

		  height: 100%;

		  position: fixed;

		  width: 100%;

		  z-index: 9999;

		}



		#pageloader img

		{

		  left: 50%;

		  margin-left: -32px;

		  margin-top: -32px;

		  position: absolute;

		  top: 50%;

		}

		.hide{

		  display:none;

		}

		.show{

		  display:block;

		}

		table {

			font-size: 16px;

		}



		.ui-draggable, .ui-droppable {

			background-position: top;

		}

		.center{

			display: block;

			margin-left: auto;

			margin-right: auto;

		}

		.form_container {

		    width: 500px;

            max-width: 100%;

			margin: 20px auto;

			margin-top: 60px;

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

			border-radius: 5px;

			background-color: #fdfdfdbd;

			padding: 20px;

			box-shadow: 0px 1px 5px 0px rgba(32, 32, 35, 0.12);

		}

		.modal_style_rk{

			padding-left:40px;

			padding-right:40px;

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

			line-height:30px

		}

		/* .p_title{

			margin-bottom: 0rem !important;

			font-weight: 600;

			font-size: 18px;

		} */

		.btn-disable {

			color: #fffafa;

			background-color: #f36f21c9 !important;

		}

		.btn-info {

			color: #fff;

			background-color: #f36f21 !important;

		}

		.btn-info:not([disabled]):not(.disabled):active, .btn-info:not([disabled]):not(.disabled).active, .show>.btn-info.dropdown-toggle {

			background-color: #e05300 !important;

			-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);

			box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);

		}

		/* Smartphones (portrait and landscape) ----------- */

		@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

			html {

				font-size: 16px;

			 }



			.form_container {

				width: 100%;

				margin: 0 auto;

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

				border-radius: 5px;

				background-color: #fdfdfd;

				padding: 20px;

				box-shadow: 0px 1px 5px 0px rgba(32, 32, 35, 0.12);

			}

			.modal_style_rk{

				padding-left:10px;

				padding-right:10px;

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

				font-size: 16px;

				line-height:30px;

			}

		}



		/* Smartphones (landscape) ----------- */

		@media only screen and (min-width : 321px) {

		/* Styles */

		}



		/* Smartphones (portrait) ----------- */

		@media only screen and (max-width : 320px) {

		/* Styles */

			html {

				font-size: 16px;

			 }

		}



		/* iPads (portrait and landscape) ----------- */

		@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

			.form_container {

				width: 60%;

				margin: 0 auto;

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

				border-radius: 5px;

				background-color: #fdfdfd;

				padding: 20px;

				box-shadow: 0px 1px 5px 0px rgba(32, 32, 35, 0.12);

			}

			.modal_style_rk{

				padding-left:10px;

				padding-right:10px;

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

				font-size: 14px;

				line-height:30px

			}

		}