/* progress bar header */

	.container.mt-5 {
		margin-bottom: 3rem; 
		width: 65%;
	}

	@media (max-width: 480px) {
		.container.mt-5 {
		margin-bottom: 3rem; 
		width: 100%;
		}
	}

	.step {
		display: none;
	}
	.step.active {
		display: block;
	}
	.progress-container {
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-bottom: 30px;
		/* margin-left: 7%; */
		width: 100%;
		flex-wrap: wrap;
	}

	@media (max-width:480px){
		.progress-container {
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-bottom: 30px;
			/* margin-left: 7%; */
			width: 100%;
			flex-wrap: nowrap;
		}
	}

	.progress-circle {
		width: 100px;
    	height: 100px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 2;
	}
	@media (max-width:480px){
		.progress-circle {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 2;
		}
	}

	.progress-circles {
		width: 90px;
    	height: 75px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 2;

	}

	.progress-circle.active.circle-1 {
		color: #5f5c5c;
	}
	.progress-circle.active.circle-2 {
		color: #5f5c5c;
	}
	.progress-circle.active.circle-3 {
		color: #5f5c5c;
	}

	.progress-line {
		height: 4px;
		background: #ddd;
		position: absolute;
		top: 50px;
		width: 100%;
		z-index: 1;
	}
	@media (max-width:480px){
		.progress-line {
			height: 4px;
			background: #ddd;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;
		}
	}

	.progress-circle.active.circle-1 {
		background: #fe5e9d;
	}

	/* .progress-circle.active.circle-1 {
		background: #fe5e9d;
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	
	@media (max-width: 768px) {
		.progress-circle.active.circle-1 {
			width: 50px;
			height: 50px;
		}
	}
	
	@media (max-width: 480px) {
		.progress-circle.active.circle-1 {
			width: 30px;
			height: 30px;
		}
	} */

	.progress-circle.switch.circle-2 {
		background: #dfd9db; 
	}
	.progress-circle.switch.active.circle-2 {
		background: #fe5e9d; 
	}

	.progress-circle.switch.circle-3 {
		background: #dfd9db; 
	}
	.progress-circle.switch.active.circle-3 {
		background: #fe5e9d; 
	}


	.progress-circles.active.circle-1 {
		background: #ffffff;
		width: 70px;
    	height: 70px;
	}
	@media (max-width:480px){
		.progress-circles.active.circle-1 {
			background: #ffffff;
			width: 60px;
			height: 60px;
		}
	}

	.progress-circles.active.circle-2 {
		background: #ffffff;
		width: 70px;
    	height: 70px;
	}
	@media (max-width:480px){
		.progress-circles.active.circle-2 {
			background: #ffffff;
			width: 60px;
			height: 60px;
		}
	}

	.progress-circles.active.circle-3 {
		background: #ffffff;
		width: 70px;
    	height: 70px;
	}
	@media (max-width:480px){
		.progress-circles.active.circle-3 {
			background: #ffffff;
			width: 60px;
			height: 60px;
		}
	}

	.hidden {
		opacity: 0; /* Or use display: none; */
		pointer-events: none; /* Prevent interaction */
		transition: opacity 0.3s ease; /* Optional for smooth transition */
	}
/* end code */

/* untuk upload dokumen */
	#lanjut-button{
		margin: 5px 0px 30px 0px;
		border: 1px;
		border-radius: 33px;
		font-size: 12px;
		width: 162px;
	}

	#lanjut-button-next{
		margin: 5px 0px 30px 0px;
		border: 1px;
		border-radius: 33px;
		font-size: 12px;
		width: 162px;
	}


	#file-to-upload {
		display: none;
	}
/* end code */

	.my-5 {
			margin-bottom: -3rem !important;
	}

	.drop-area {
		text-align: center;
		position: relative;
	}

	.drop-area.hover {
		border-color: #0056b3;
	}

	iframe {
            width: 100%;
            height: 400px;
            border: none;
            display: none; 
            margin-top: 10px;
        }

	.box.box-primary {
		border-top-color: #2b3339;
	}

	.box {
		background: #dfdcdc;
	}

    .round-tab {
        text-align: center; 
    }

	.header-atas {
		font-size: medium;
		margin-top: 10px;

		margin-left: 20px;
		color: cornflowerblue;
		font-family: 'Montserrat', sans-serif;;
	}
	.header-wrapper {
		border: 1px solid #e0e0e0;
		border-radius: 10px 10px 0px 0px;
		background-color: #ffffff;
	}

	/*gives all divs (the spacer and the checbox-div) inside of the header-wrapper the same size and leaves the rest of space for the header, with this the header is centered and looks better*/
	.header-wrapper div {
		width: 33%;
	}

	.header-wrappers {
		border: 1px solid #e0e0e0;
		border-radius: 0px 0px 10px 10px;
		background-color: #ffffff;
	}

	.row {
		--bs-gutter-x: 1.5rem;
		--bs-gutter-y: 0;
		display: flex;
		flex-wrap: wrap;
		margin-top: 1px;
		margin-right: 0px;
		margin-left: 0px;
		justify-content: space-around;
	}
	
	.required {
	color: red; 
	font-weight: bold;
	}

	.modal-dialog-centered {
    display: flex;
    min-height: calc(100% - var(--bs-modal-margin)* 2);
    justify-content: space-evenly;
	}

	.lanjut-next-upload{
		display: none;
	}

	input[type=number]::-webkit-outer-spin-button,
	input[type=number]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Hide arrows in input[type=number] for Firefox */
	input[type=number] {
		-moz-appearance: textfield;
	}