/*  FORM CONTAINER   */
	.form-container   {display        : grid; justify-content : center; }
	.form             {background-color  : var(--color-grey-light ); padding : 2rem;}
	.form-title       {margin-bottom  : 0.1rem; color:var(--color-grey-modern);}
	.form-description {margin-bottom  : 2rem;color:var(--color-grey-modern);}
	.form-group       {margin-bottom  : 1.6rem; position : relative;}
	.form-group-radio {margin-bottom  : 0.8rem; margin-left: 2.2rem; position : relative;}
/*  FORM CONTAINER   */

/* FORM INPUT & TEXT AREA */
	.form-input,.form-textarea,.form-select,.form-uploadfile,.form-fieldset{
		border       : 1px solid var(--color-grey75);
		color        : inherit;
		font-family  : inherit;
		font-weight  : inherit;
		outline      : none;   
	}
	.form-input,.form-textarea{
		padding      : 0.6rem;
		padding-left : 3rem;
		width        : 100%;
	}
	.form-select{
		padding-top     : 0.6rem;
		padding-bottom  : 0.6rem;
		padding-left    : 2.6rem;
		padding-right   : 3rem;
	}

	.form-fieldset{width:100%}

	legend{
		background      : var(--color-white);
		padding-bottom  : 0.7rem;
		padding-left    : 2.2rem;
		padding-right   : 1.5rem;
	}

	.form-textarea {line-height  : 1.5; resize : none;}
	.form-uploadfile{padding : 1rem; padding-left : 1.8rem; cursor : pointer; }

	.form-input:hover,.form-textarea:hover,.form-uploadfile:hover,.form-select:hover,.form-fieldset:hover{border-color : var(--color-brand-3); transition : all 300ms ease-in;}
	.form-input:focus,.form-textarea:focus,.form-uploadfile:focus,.form-select:focus,.form-fieldset:focus{border-color : var(--color-brand-3);}
/* FORM INPUT & TEXT AREA */

/* FORM LABEL */
	.form-label{
		position    : absolute;
		left        : 2.2rem; /* nilai top & left hubungan dengan animasi */
		top         : 0.7rem; /* nilai top & left hubungan dengan animasi */
		transition  : top 300ms ease-in, left 300ms ease-in, font-size 300ms ease-in;
	}
	.form-label-select{
		position    : absolute;
		font-size   : var(--font-size-100);
		left        : 0rem;
		top         : -1.3rem;
	}
	.upload-label{
		margin-left     : 2.2rem;
		margin-bottom   : 0.2rem;
	}
	.form-label-custom {
		cursor              : pointer;
		padding-left        : 35px;
		position            : relative;
		user-select         : none;
		-webkit-user-select : none;
		-moz-user-select    : none; 
	}

	/* SEMBUNYIKAN INPUT BAWAAN */
	.form-label-custom input {
		opacity     : 0;
		top         : 0;
		left        : 0;
		margin-top  : 6px;
		margin-left : 6px;
		position    : absolute;
	}
/* FORM LABEL */

/*  ANIMATION - INPUT, TEXTAREA, LABEL FORM START    */
	.form-input:focus ~ .form-label,
	.form-input:not(:placeholder-shown).form-input:not(:focus) ~ .form-label,
	.form-textarea:focus ~ .form-label, 
	.form-textarea:not(:placeholder-shown).form-textarea:not(:focus) ~ .form-label{
		font-size   : var(--font-size-100);
		left        : 0rem;
		top         : -1.3rem;
	}
	.form-input:focus + .icon-input {
		transform   :   translateX(50%);
		opacity     :   1;
		fill        :   var(--color-brand-3);
	}
	.form-textarea:focus + .icon-textarea{
		transform   :   translateX(50%);
		opacity     :   1;
		fill        :   var(--color-brand-3);
	}
/*  ANIMATION - INPUT, TEXTAREA, LABEL FORM END   */

/*  ERROR START  */
	.form-error-message{
		align-items     : center;
		color           : var(--color-red);
		display         : grid;
		font-size       : 0.75rem;
		/* position:absolute; posisi absolut agar pesan error tidak membuat layar turun ke bawah */ 
		margin-top		 : 3px;
	}
	.form-error-input,.form-error-textarea,.form-error-fieldset{
		border          : 1px solid var(--color-red);
		color           : inherit;
		font-family     : inherit;
		font-weight     : inherit;
		outline         : none;
		padding         : 0.6rem;
		padding-left    : 3rem;
		width           : 100%;
	}

	.form-error-input:hover{border-color : var(--color-red); transition : all 300ms ease-in;}
	.form-error-input:focus{border-color : var(--color-red);}
	.form-error-input:focus + .icon-input{
		transform   :   translateX(50%);
		opacity     :   1;
		fill        :   var(--color-red);
	}
	.form-error-textarea{
		/*height    : 100%;*/
		resize      : none;  
	}
	.form-error-textarea:hover{border-color : var(--color-red); transition : all 300ms ease-in;}
	.form-error-textarea:focus{border-color : var(--color-red);}
	.form-error-textarea:focus + .icon-textarea{
		transform   :   translateX(50%);
		opacity     :   1;
		fill        :   var(--color-red);
	}

	.form-error-uploadfile{
		border			: 1px solid var(--color-red);
		padding			: 1rem; 
		padding-left	: 1.8rem; cursor : pointer; 

	}

	.form-error-input:focus ~ .form-label,
	.form-error-input:not(:placeholder-shown).form-error-input:not(:focus) ~ .form-label,
	.form-error-textarea:focus ~ .form-label,
	.form-error-textarea:not(:placeholder-shown).form-error-textarea:not(:focus) ~ .form-label{
		font-size   : var(--font-size-100);
		left        : 0rem;
		top         : -1.3rem; 
	}
/*  ERROR END  */

/*	BUTTON */
	.button{
		border          : none;
		cursor          : pointer;
		display         : block;
		font-family     : inherit;
		font-weight     : inherit;
		/*margin-right  : auto;       POSISI AWAL TOMBOL DI SISI KIRI - SENGAJA DIMATIKAN */  
		/*margin-inline : auto;       POSISI TOMBOL DI TENGAH - SENGAJA DIMATIKAN */
		/*margin-left     : auto;        MENDORONG TOMBOL KE SISI KANAN */  
		outline         : none;
		padding         : 0.65rem 2rem;
		transition      : background-color 300ms ease-in;
	}

	.button-100{width : 100%; /*ATUR LEBAR TOMBOL */}

	.button-primary         {background-color : var(--color-brand-3); color : var(--color-grey-light);}
	.button-primary:hover   {background-color : var(--color-grey); color : var(--color-grey-light); transition : all 300ms ease-in;}
	.button-secondary       {background-color : var(--color-grey-modern); color : var(--color-grey-light);}
	.button-secondary:hover {background-color : var(--color-grey); transition : all 300ms ease-in;}
/*	BUTTON */



.icon-container {
	align-items : center;
	display     : flex;
	gap         : 1rem; 
}
.icon-input,.icon-textarea{
	aspect-ratio: 1;
	fill        : var(--color-grey75);
	left        : 0.5rem;
	position    : absolute;
	transition  : all 0.3s;
	transform   : translateX(0% );
	width       : 1.2rem;
	/* z-index     : 10; */
}


/*  CHECKBOX & RADIO CUSTOM */
	.checkmark,.radiomark{
		background-color    : var(--color-white); 
		border              : 1px solid var(--color-grey75);
		top                 : 0;
		left                : 0;
		height              : 25px;
		width               : 25px;
		position            : absolute;
	}

	.select{
		background-color    : var(--color-brand-1); 
		border              : 1px solid var(--color-grey75);
		top                 : 0;
		left                : 0;
		height              : 25px;
		width               : 25px;
		position            : absolute;
	}

	.upload{
		background-color    : var(--color-brand-3); 
		border              : 1px solid var(--color-grey75);
		top                 : 0;
		left                : 0;
		position            : absolute;
	}

	.checkmark{border-radius: var(--radius-25);}
	.radiomark{border-radius: var(--radius-100);}
	.upload{border-radius: var(--radius-25);}

	.form-error-radiomark,.form-error-checkmark{
		background-color    : var(--color-white); 
		border-radius       : var(--radius-100);
		border              : 1px solid var(--color-red);
		top                 : 0;
		left                : 0;
		height              : 25px;
		width               : 25px;
		position            : absolute;
	}
	/*  TAMBAHKAN BACKGROUND ABU SAAT MOUSE OVER    */
        .form-label-custom:hover input ~ .checkmark, .form-label-custom:hover input ~ .radiomark {
            /* background-color    : var(--color-grey75); */
            transition          : all 200ms ease-in;
            border              : 1px solid var(--color-brand-3);
        }
        .form-label-custom:hover input ~ .checkmark, .form-label-custom:hover input ~ .form-error-radiomark {
            /* background-color    : var(--color-grey75); */
            transition          : all 200ms ease-in;
            border              : 1px solid var(--color-brand-3);
        }
    /* TAMBAHKAN BACKGROUND SAAT DI KLIK    */
        .form-label-custom input:checked ~ .checkmark, .form-label-custom input:checked ~ .radiomark {
            animation           : tick 180ms ease-in;
            background-color    : var(--color-brand-1);
        }
        .form-label-custom input:checked ~ .checkmark, .form-label-custom input:checked ~ .form-error-radiomark {
            animation           : tick 180ms ease-in;
            background-color    : var(--color-brand-1);
        }
    /*  TEMPAT UNTUK TANDA CEKLIST   */
        .checkmark:after, .radiomark:after {
            content     : "";
            display     : none;
            position    : absolute;
        }
        .checkmark:after, .form-error-radiomark:after {
            content     : "";
            display     : none;
            position    : absolute;
        }
    /*  TAMPILKAN TANDA CEKLIST SAAT DI KLIK   */
        .form-label-custom input:checked ~ .checkmark:after, .form-label-custom input:checked ~ .radiomark:after {
            display : block; 
        }
        .form-label-custom input:checked ~ .checkmark:after, .form-label-custom input:checked ~ .form-error-radiomark:after {
            display : block; 
        }
    /* TANDA CEK */
        .form-label-custom .checkmark:after, .form-label-custom .radiomark:after {
            border              : 3px solid var(--color-white);
            border-width        : 0 3px 3px 0;
            height              : 10px;
            left                : 9px;
            top                 : 5px;
            transform           : rotate(45deg);
            width               : 5px;
            -webkit-transform   : rotate(45deg);
            -ms-transform       : rotate(45deg);
        } 
        .form-label-custom .checkmark:after, .form-label-custom .form-error-radiomark:after {
            border              : 3px solid var(--color-white);
            border-width        : 0 3px 3px 0;
            height              : 10px;
            left                : 9px;
            top                 : 5px;
            transform           : rotate(45deg);
            width               : 5px;
            -webkit-transform   : rotate(45deg);
            -ms-transform       : rotate(45deg);
        } 
    /*  KEYFRAMES   */
        @-webkit-keyframes tick {
            0% {transform   : scale(0);}
            90% {transform  : scale(1.4);}
            100% {transform : scale(1);}
        }
        @keyframes tick {
            0% {transform   : scale(0);}
            90% {transform  : scale(1.4);}
            100% {transform : scale(1);}
        }