/* Start ACE & M Cultivo login pages (Shared styles) */ .login-social-icons { margin-top: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 36px; } .login-social-icons a:nth-child(1) svg { width: 16px; height: 16px; } .login-social-icons a:nth-child(2) svg { width: 17px; height: 16px; } .login-social-icons a:nth-child(2) { margin-left: 36px; margin-right: 36px; } .login-social-icons a:nth-child(3) svg { width: 23px; height: 16px; } /* End ACE & M Cultivo login pages (Shared styles) */ /* Start ACE login page */ .ace-login { min-height: 650px; background-color: #f5f5f5; } .ace-login .login-image-section { width: 45%; min-height: 100%; background: url("../../../images/login/coffee-beans.jpg"); background-color: #f5f5f5; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .ace-login .login-image-section > div { max-width: 364px; position: absolute; left: calc(50% - 55px); top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ace-login .login-image-section p { font-family: "Lato"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 32px; text-align: center; color: #ffffff; margin: 30px 0px 0px !important; } .ace-login .login-form-section { width: 100%; min-height: 100%; background-color: #f5f5f5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .ace-login .login-form-section form { width: 90%; background: #ffffff; -webkit-box-shadow: 0px 3px 14px 2px rgba(36, 40, 40, 0.12), 0px 8px 10px 1px rgba(36, 40, 40, 0.14), 0px 5px 5px -3px rgba(36, 40, 40, 0.2); box-shadow: 0px 3px 14px 2px rgba(36, 40, 40, 0.12), 0px 8px 10px 1px rgba(36, 40, 40, 0.14), 0px 5px 5px -3px rgba(36, 40, 40, 0.2); border-radius: 32px; padding: 40px 30px; } .ace-login .login-form-section .form-controls-container { margin: 32px 0px 16px 0px; } .ace-login .login-form-section form h1 { font-family: "Lato"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 32px; color: #402020; } .ace-login .login-form-section form h2, .ace-login .login-form-section form label { font-family: "Lato"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: var(--black75-color); margin: 0px; } .ace-login .login-form-section form input[type="text"], .ace-login .login-form-section form input[type="password"] { border: 1px solid #dddee0; border-radius: 8px; background-color: transparent; color: var(--black-color); } .ace-login .login-form-section form .login-btn { padding: 4px; background: #402020; border-radius: 24px; font-family: "Lato"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 32px; color: #ffffff; border: 0px; outline: none; } .ace-login .login-social-icons path { fill: #dbaa00; } .ace-login .login-form-section .curve-image { position: absolute; left: -52px; bottom: 0; } .ace-login .for-mobile-only { background: url("../../../images/login/coffee-beans.jpg"); background-color: #f5f5f5; background-repeat: no-repeat; background-position: center; background-size: cover; } .ace-login .for-mobile-only img { max-width: 200px; } .ace-login .for-mobile-only p { max-width: 230px; color: #ffffff; margin: 0 !important; } @media (min-width: 768px) { .ace-login .login-form-section form { width: 70%; padding: 60px 70px; } } @media (min-width: 992px) { .ace-login { min-height: 1024px; } .ace-login .login-form-section { width: 55%; padding-left: 75px; left: -75px; border-top-left-radius: 56px; } .ace-login .login-form-section form { width: 562px; padding: 60px 70px; } } @media (min-width: 1200px) { .ace-login .login-form-section { width: 50%; padding-left: 100px; } .ace-login .login-image-section { width: 50%; } } @media (min-width: 1400px) { .ace-login .login-form-section form { padding: 60px 100px; } } /* End ACE login page */ /* Start M Cultivo login page */ .mcultivo-login { width: 100%; min-height: 650px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; background-color: #f5f5f5; } .mcultivo-login .login-form-section { min-height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: -o-linear-gradient( 90.58deg, rgba(0, 142, 143, 0.73) 0.62%, rgba(0, 142, 143, 0) 190.88% ); background: linear-gradient( 359.42deg, rgba(0, 142, 143, 0.73) 0.62%, rgba(0, 142, 143, 0) 190.88% ); -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 59.38px rgba(36, 40, 40, 0.12), 0px 2px 59.38px rgba(36, 40, 40, 0.14); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 1px 59.38px rgba(36, 40, 40, 0.12), 0px 2px 59.38px rgba(36, 40, 40, 0.14); -webkit-backdrop-filter: blur(29.69px); backdrop-filter: blur(29.69px); position: relative; } .mcultivo-login .project-owner-link { position: absolute; left: 24px; bottom: 32px; font-family: "Lato"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 166%; text-align: center; letter-spacing: 0.4px; color: #ffffff; } .mcultivo-login .login-form-section form { width: 92%; background: #ffffff; -webkit-box-shadow: 0px 3px 14px 2px rgba(36, 40, 40, 0.12), 0px 8px 10px 1px rgba(36, 40, 40, 0.14), 0px 5px 5px -3px rgba(36, 40, 40, 0.2); box-shadow: 0px 3px 14px 2px rgba(36, 40, 40, 0.12), 0px 8px 10px 1px rgba(36, 40, 40, 0.14), 0px 5px 5px -3px rgba(36, 40, 40, 0.2); border-radius: 32px; padding: 40px 30px; } .mcultivo-login .login-form-section .form-logo img { width: 172px; } .mcultivo-login .login-form-section .form-controls-container { margin: 16px 0px; } .mcultivo-login .login-form-section form h1 { font-weight: 400; font-size: 24px; line-height: 32px; margin-top: 40px; } .mcultivo-login .login-form-section form label { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: var(--black75-color); margin: 0px; max-width: 356px; } .mcultivo-login .login-form-section form input[type="text"], .mcultivo-login .login-form-section form input[type="password"] { border: 1px solid #dddee0; background-color: transparent; color: var(--black-color); } .mcultivo-login .login-form-section form .login-btn { padding: 4px; background: var(--button-contained-background); border-radius: var(--button-contained-radius); font-family: "buttonFont", sans-serif !important; font-style: normal; font-weight: 400; font-size: 16px; line-height: 32px; color: var(--button-contained-color); border: 0px; outline: none; } .mcultivo-login .login-form-section form .login-bt:hover { background: var(--button-contained-hover); } .mcultivo-login .login-social-icons path { fill: #ffffff; } .mcultivo-login .login-form-section .curve-image { position: absolute; left: -52px; bottom: 0; } @media (min-width: 576px) { .mcultivo-login .login-form-section form { width: 75%; } } @media (min-width: 768px) { .mcultivo-login { min-height: 1024px; background: url("../../../images/login/Kula-coffee-farmer-transporting-coffee.jpg"); background-color: #f5f5f5; background-repeat: no-repeat; background-position: center; background-size: cover; } .mcultivo-login .login-form-section { width: 65%; border-top-left-radius: 56px; } .mcultivo-login .login-form-section form { width: 80%; padding: 40px 50px; } } @media (min-width: 992px) { .mcultivo-login .login-form-section { width: 55%; } .mcultivo-login .login-form-section form { padding: 45px 60px; } } @media (min-width: 1200px) { .mcultivo-login .login-form-section form { width: 592px; padding: 60px 100px; } } /* End M Cultivo login page */