.area-app-login {
    display: flex;
    justify-content: center;
    align-items: center;
}
.app-login-action {
    position: relative;
    min-height: 40px;
}
#loginBtn {
    position: absolute;
    left: 0;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
/**************************
    START::LOGIN
**************************/
.app-customer-auth {
    max-width: 700px;
    width: 100%;
}
.app-login-panel {
    display: flex;
    width: 100%;    
    box-shadow: var(--app-shadow);
}
.app-login-panel > .app-login {
    flex: 1;
}
.app-login-panel > .app-login-with-apps {
    flex-basis: 320px;
}
.app-login, .app-login-with-apps {
    background-color: #fff;
    padding: 40px 50px;
}
.app-login-caption {
    margin-bottom: 20px;
}
.app-login-caption p {
    margin: 0;
    color: var(--text-color, var(--app-text-color));
}
.app-login-caption h4 {
    color: var(--text-heading-color, var(--app-text-heading-color));
}
.app-login-box-app {    
	padding-top: 34px;
}
.app-login-with-apps {
    padding-inline: 40px;
    position: relative;
    background: #E8F4F2 url(../../../../../resources/images/shape-tr.jpg) top right no-repeat;
    z-index: 1;
}
.app-login-with-apps::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1;
    z-index: -1;
    background: url(../../../../../resources/images/spirals.png) bottom left no-repeat;
    opacity: .04;
}
.app-clients {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app-clients > li:not(:last-child) {
    margin-bottom: 20px;
}
.app-button-client {
	padding: 12px 15px;
	border: none;
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 2px;
	font-size: 1rem;
	color: #fff;
    gap: 10px;
}
.app-button-client i {
	width: 24px;
	text-align: center;
}
/* .client-fb, #loginBtn, #signupBtn {
    background-color: #1977F2;
} */
.client-fb {
    background-color: #1977F2;
}
.client-gm {
    background-color: #EB4235;
}
/**************************
    END::LOGIN
**************************/

.modal-fullscreen.gap-xy {
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	margin: 10px;
}

.modal-body {
    padding: 20px 30px;
}
.modal-header, .modal-footer {
	padding-left: 30px;
	padding-right: 30px;
}
.modal-footer > * {
	margin: 0;
}
.modal-footer {
	margin: 0;
	display: flex;
	gap: 5px;
    align-items: center;
}
.modal-content {
    border: none;
}
.modal-title {
	font-size: 18px;
}
.modal-header {
	background-color: #fff;
	box-shadow: 0 19px 20px -10px #ddd;
	border-radius: 7px 7px 0 0;
    border-bottom: none;
}
.modal-header .btn-close{
    font-size: 12px;
    box-shadow: none !important;
    outline: none !important;
}


@media(max-width: 767px){
    .app-login-panel {
        flex-direction: column;
    }
}