/**Stylesheet - Login**/

body {font-family: "Montserrat", sans-serif; background: #0D0D0D;}

img {max-width: 100%;}

.site-content {height: 100vh;}

.login-wrapper {display: flex; align-items: center; height: 100%;}

.login-wrapper .col {width: 50%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px}

.login-wrapper .col-left {background: linear-gradient(90deg, rgba(233, 67, 163, 0.4) 0%, rgba(124, 17, 151, 0.4) 100%), url(../images/bg-image.png); background-repeat: no-repeat; background-size: cover; background-position: center; clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}

.welcome-content {text-align: center; max-width: 400px; margin: 0 0 100px 0;}

.welcome-content h1, .welcome-content p {color: #fff}

.phasatek-logo-block img {max-width: 350px;}

.phasatek-logo-block {margin: 0 0 30px 0;}

.phasatek-social-block {display: flex; align-items: center; gap: 20px;}

.login-header h2 {color: #fff;}

.phasatek-social-block ul {padding: 0; list-style: none; display: flex; gap: 10px; margin: 0;}

.phasatek-social-block h3 {color: #fff; margin: 0; font-size:20px}

.phasatek-social-block a {width: 30px; height: 30px; background: #E943A3; color: #fff; padding: 6px; border-radius: 100%; display: flex; align-items: center; text-decoration: none;}

.phasatek-social-block a i {font-size: 12px;}

.login-form {max-width: 600px; width: 100%;}

.form-wrapper {width: 100%; background: #111113; padding: 60px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;}

.login-header  p {color: rgba(255,255,255,1);}

.login-form label {margin: 20px 0 10px 0; color: #fff;}

.login-form .form-group {margin: 20px 0;}

.login-form .form-group .form-control {background: transparent; border-color: rgba(255,255,255,0.2); color: #fff; font-size: 14px; min-height: 45px; border-radius: 8px; box-shadow: none;}

.login-button {display: flex; justify-content: center; width: 100%; align-items: center; gap: 20px; flex-direction: column;}

.login-button button {height: 45px; background: linear-gradient(90deg, #E943A3 0%, #7C1197 100%); border: none; min-width: 200px; transition-duration: .3s}

.login-button button:hover {background: linear-gradient(90deg, #7C1197 0%, #E943A3 100%)}

.login-button button:disabled {opacity: 0.6; cursor: not-allowed;}

.login-button p {margin: 0; color: #fff;}

.login-button p a {color: #E943A3; text-decoration: none;}

.alert-danger {background: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.4); color: #ff6b7a; border-radius: 8px; padding: 12px 16px; font-size: 14px;}


/***Responsive CSS**/

@media (max-width: 1540px)
{
	.form-wrapper {padding: 20px;}

	 .login-form label {margin: 10px 0;}

	.login-button p, .login-button button,.login-form label {font-size: 14px;}

	.login-button button, .login-form .form-group .form-control {height: 35px; min-height: 35px}

	.login-form {max-width: 500px;}

	.login-form .form-group {margin: 5px 0;}
}

@media (max-width: 1024px)
{
	.login-wrapper {flex-direction: column;}

	.login-wrapper .col {width: 100%;}

	.site-content {height: auto;}

	.login-form {max-width: 100%;}
}

@media (max-width: 767px)
{
.form-wrapper {padding: 20px;}

.login-wrapper .col {padding: 40px 20px;}

.login-wrapper .col-left {padding-bottom: 120px; clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 79%, 53% 95%, 53% 95%, 0 79%, 0% 20%);}

.login-form .flex-group {flex-direction: column; gap: 10px;}

.phasatek-logo-block img {max-width: 250px;}

.phasatek-social-block {flex-direction: column; gap: 10px;}

.welcome-content {margin: 0 0 20px 0;}

.login-header  p {font-size: 14px;}
}