body {
    background-color: #faf9fe;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    }
    .bg {
    max-width: auto;
    max-height: 150px;
    padding-top: 150px;
    background-color: #ffffff;
        }

    .block-migrate{
        width: auto;
        height: 40px;
        background: linear-gradient(90deg, #024089 0%, #e53935 33%, #fbc02d 66%, #43a047 100%);
    }

    .block2-migrate{
        width: auto;
        height: 15px;
        background: linear-gradient(90deg, 
            #024089 0%, #024089 25%, 
            #e53935 25%, #e53935 50%, 
            #fbc02d 50%, #fbc02d 75%, 
            #43a047 75%, #43a047 100%);
    }
        
    .block{
    width: auto;
    height: 40px;
    background-color: #024089;
    
        }
    
    .block2{
    width: auto;
    height: 15px;
    background-color: #024089;
        } 
        
    .block3{
    width: 400px;
    height: 2px;
    background-color: #024089;
    margin: auto;
    
        }  
    .container-built{
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff; 
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    margin-top: 40px;
    border: 1px solid #ccc;
        position: relative;
     top: -150px;
        }
    
    .title{
    width:auto;
    height: auto;
    padding-top: 10px;
        }
    
    
        
    .form-container {
    background-color: #fff;
    border-radius: 5px;
    padding: 50px;
    padding-top: 0px;
    }
    
    h1{
    color:  #1d3c66; 
    font-family: sans-serif;
    text-align: center;
    line-height: 1.0;
        }
    h1 span.line-first {   
    font-size: 16px;
    text-align: center;
    font-style: normal;
    position: relative;
    
    }
    h1 span.line-second {   
    font-size: 22px;
    font-style: bold;
    text-align: center;
    vertical-align: 10px;
    }
        
    p1 {
    margin-bottom: 0px;
    }
        
    p2 {
    margin-top: 500px;
    }
    
    p {
    margin-bottom: 20px;
    }
    p:first-child {
    margin-top: 0;
    }
    p:last-child {
    margin-bottom: 0;
    }
    .signature {
    color: rgb(116, 115, 115);
    font-size: 14px;
    font-style: italic;
    text-align: justify;
    }
    form {
        margin-top: 20px;
        text-align: center;

        
    }
    .input-wrapper{
        display: inline-block;
        text-align: left;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 30px;
    }
    
    tunjuk {
        font-size: 14px;

    }
	
    /* CSS to hide underline on <a> elements */
    a {
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
	.cardblue {
		background-color: #4A90E2; 
		padding: 10px;
		color: white;
		text-align: center;
		text-decoration: bold;
		border-radius: 10px;
		box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}
	
	.cardred {
		background-color: #D0021B; 
		padding: 10px;
		color: white;
		text-align: center;
		text-decoration: bold;
		border-radius: 10px;
		box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}	

	.cardyellow {
		background-color: #FAC00C;
		padding: 10px;
		color: white;
		text-align: center;
		text-decoration: bold;
		border-radius: 10px;
		box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}	

	.cardgreen {
		background-color: #27AA55; 
		padding: 10px;
		color: white;
		text-align: center;
		text-decoration: bold;
		border-radius: 10px;
		box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}	

	.card-a {
		color: white;
		text-decoration: none;
		display: inline-block;
		transition: transform 0.2s ease-in-out;
		position: relative;
	}
	.card-a:hover {
		transform: scale(1.05);
		text-decoration: underline;
	}

	/* Readonly username field styling */
	.username-readonly {
		background-color: #f8f9fa !important;
		color: #6c757d !important;
		cursor: not-allowed !important;
	}

.my-box {
	text-align: center;
	border: 2px solid #333; /* Adds a solid border */
	background-color: #f0f0f0; /* Adds a light gray background */
	padding: 20px; /* Adds space between the border and the text */
	margin: 10px; /* Adds space outside the box */
	border-radius: 8px; /* Rounds the corners of the box */
}