/*----------------------   CUSTOM STYLES     ---------------------------*/
:root {
    --first-color: #28B4D0;
    --second-color: rgb(85, 209, 47);
    --third-color: rgb(254, 180, 73);
    --fourth-color: rgb(67, 67, 67);

    --squares-size: 500px;
}

* {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

a {
    text-decoration: none !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-6 {
    margin-left: 4rem !important;
}

.ms-7 {
    margin-left: 6rem !important;
}

.ms-8 {
    margin-left: 8rem !important;
}

.ms-9 {
    margin-left: 10rem !important;
}

.ms-10 {
    margin-left: 12rem !important;
}

.ms-11 {
    margin-left: 14rem !important;
}

.ms-12 {
    margin-left: 16rem !important;
}

.card {
    border: none !important;
}

/* .main-login .bg-filter
{
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgb(54,54,54);
  background: linear-gradient(87deg, rgba(54,54,54,0.5480567226890756) 0%, rgba(0,0,0,0.5368522408963585) 100%);
  opacity: 0.65;
} */

.page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--squares-size)*0.085);
}

.page-header .container {
    z-index: 1;
}


.right-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: var(--squares-size) !important;
    /* height: var(--squares-size) !important; */
    height: auto !important;
    /* height: 100vh;
  min-width: 100vw; */
    margin: 0 !important;
    padding: 27px !important;
    box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.363);
    overflow: visible;
    z-index: 1;
    background-color: rgb(255, 255, 255);
    position: relative;
    border-radius: 40px;
}

.right-container .right-form-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 5% 0 10% 0;
    position: relative;
}


.copy-txt-login {
    position: absolute;
    bottom: 1px;
    right: 3%;
    font-weight: bolder;
    color: rgb(6, 134, 6);
}


.right-container .right-form-container>div {
    width: 100%;
    height: 100%;
}


.right-container .alert {
    position: absolute;
    top: 0;
    transform: translateY(-120%);
}

.cont-txt-login {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--fourth-color);
    width: 100%;
}

.cont-txt-login>img {
    width: 70%;
}


.cont-txt-login .txt-login-subtitle {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    transform: scaleY(0.93);
    text-align: center;
}

.right-form-container .aula-title {
    display: flex;
    width: 80% !important;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    margin-top: 10px;
    font-family: 'Roboto-condensed', Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: var(--fourth-color);
    border-bottom: 2px solid rgb(228, 228, 228);
}

.right-form-container .card-body>form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right-form-container .card-body .input-box {
    width: 100%;
    max-width: 350px;
}

.right-form-container .card-body input {
    background-color: rgb(238, 238, 238) !important;
    padding: 1em !important;
    font-weight: 400;
    font-size: 1em;
    border: none;
}

.right-form-container .card-body input~.invalid-feedback {
    color: rgb(221, 3, 3);
}

.right-form-container .card-body input:focus {
    box-shadow: inset 0 0 0 2px var(--second-color);
}

.right-form-container .card-body input::placeholder {
    color: rgb(146, 146, 146);
}

.right-form-container .card-body .btn-login-submit {
    width: 100%;
    max-width: 200px;
}

.card {
    box-shadow: none;
}

.msg-send-reset {
    max-width: 350px;
}

.login-form button[type='submit'] {
    background-color: var(--first-color);
    color: white;
    padding: 8px;
    font-size: 1.1em;
    letter-spacing: 3px;
    font-weight: bolder;
    font-family: 'Roboto-condensed', Arial, Helvetica, sans-serif;
    transition: none;
    border-radius: 10px !important;
    border: none;
}

.login-form button[type='submit']:active {
    background-color: var(--first-color);
    color: white;
}

.login-form button[type='submit']:hover {
    background-color: var(--first-color);
}

.right-container .form-container .card div>h4:nth-child(2) {
    font-weight: 300;
    font-size: 20px;
}

.right-container .card .card-body {
    padding: 0 !important;
}

.right-container .form-container .card-header {
    background-color: transparent;
    border: none !important;
}

.right-container .form-container .card-header .row {
    justify-content: space-evenly;
}

.right-container .form-container .card-header a.btn {
    margin: 0;
    background-color: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-forgot-password {
    position: absolute;
    bottom: 1px;
    left: 3%;
}


/* @media (min-width: 1200px) {

.left-container
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.right-container
{
  height: 100vh;
  min-width: 33.3vw;
}

.cont-img-logo
{
  margin: 30px 0 60px 0;
}

.right-container .card .card-body
{
  padding: 1.5rem !important;
}
}

@media (min-height: 497px)
{
  .right-container
{
  align-items: center;
}

} */