/*!
* Design by AvrialR
* avrial87@gmail.com
*/

.content_login{
	text-align: center;
	padding-top: 7.5%;
}
.bgform_login{
	padding: 10px;
}
.form_login{
	padding: 15px;
	background-color: #FFFFFF;
	border-radius: 10px;
	border: 1px solid #E6E7E8;
	position: relative;
	margin-bottom: 11px;
	-webkit-box-shadow: 0 0 11px rgba(33,33,33,0.3);
	box-shadow: 0 0 11px rgba(33,33,33,0.3);
}
.form_login .logo img{
	width: 100%;
}
.form_login .head{
	font-size: 18px;
	color: #4B4B4D;
}
.form_login .tag{
	font-size: 13px;
	color: #4B4B4D;
}
.form_login .error_alert{
	margin-top: 5px;
}
.form_login .error_alert .alert{
	margin: 5px 0px;
	padding: 8.5px;
}
.form_login .error_alert .close{
	margin-top: -2px;
}
.form_login .tag a{
	text-decoration: none;
	color: #F96D01;
}
.input_login .title{
	font-weight: 600;
	padding: 5px 0px;
	font-size: 13px;
	color: #4B4B4D;
}
.input_login input[type=email],.input_login input[type=text],.input_login input[type=password],.input_login input[type=number] {
	width: 100%;
	height: 40px;
	padding: 5px;
	margin-bottom: 5px;
	background-color:#FFF;
	border:1px solid #E6E7E8;
	color:#4B4B4D;
	-moz-appearance: textfield;
	border-radius: 5px;
	cursor: text;
}
.input_login input[type=email]:disabled,.input_login input[type=text]:disabled,.input_login input[type=password]:disabled,.input_login input[type=number]:disabled {
	background-color: #EEE;
	cursor: not-allowed;
}
.input_login input:focus,.input_login input:hover {
	border: 1px solid #BDBFC1;
}
.input_login button{
	font-size: 13px;
	width: 100%;
	height: 40px;
	margin-top: 10px;
	color: #FFFFFF;
	border-radius: 5px;
	border: 1px solid #3789C1;
	background-color: #3789C1;
}
.input_login button:hover{
	color: #FFFFFF;
	background-color: #3789C1;
}
.footer_login{
    padding-top: 10px;
    color: #4B4B4D;
}

.password-container {
    position: relative;
}

.password-container input {
    width: 100%;
    padding-right: 40px;
}

.password-container .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;	
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toggle-password.open {
    /* transform: rotate(180deg);  */ /* Ikon akan berputar saat membuka/menutup */
    opacity: 0.8; /* Berikan efek transparansi saat berubah */
}

.password-container .toggle-password.closed {
    opacity: 0.5; /* Berikan efek sedikit transparansi saat tertutup */
}

@media (max-width:1200px){
    .form_login{
        max-width: 50%;
        margin-left: 25%;
    }
}