/* Styles specific to the Login page/layout */

.login-container {
   max-width: 800px;
   width: 100%;
   background-color: var(--mud-palette-surface) !important;
   border-radius: 16px !important;
   overflow: hidden;
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.login-sidebar {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: var(--gradient-banner) !important;
   color: white !important;
   padding: 40px;
   height: 100%;
   min-height: 420px;
}

.login-form {
   padding: 40px;
   background-color: transparent !important;
}

.div-title-img {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
}

.text-white {
   color: white !important;
}

.opacity-75 {
   opacity: 0.75;
}

@media (max-width: 960px) {
    .login-container {
       border-radius: 12px !important;
       margin: 16px;
    }

    .login-sidebar {
       padding: 30px 20px;
       text-align: center;
       min-height: 160px;
    }

    .login-container-sidebar {
       margin-bottom: 0px;
    }

    .login-form {
       padding: 30px 20px;
    }

    .div-title-img {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column-reverse;
       text-align: center;
    }
}