:root
{
    --mainColor:rgba(211,113,153); 
    --background:rgba(211,113,153,0.1);
    --black:rgb(0,0,0);
    --white:rgb(255,255,255);
    --grey:rgb(153 143 143);
}

body
{
    margin: 0;
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #c8c8c8;
    text-align: left;
    background-color: var(--background);
    height: 100vh;  
    font-family: "Jost Regular", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.card
{
    background-color: transparent;
    border:0;
    align-items: center;  
    overflow:hidden; 
    width:50%;    
    min-width:320px;
    margin: auto;
}

.card-header
{
    background-color: transparent;
    border-bottom:0;
}

.card-footer {

    background-color: transparent;
    border: 0;
    position: relative;
    z-index: -1;
    height:200px; 
}

#loginForm .col-xl-12
{   
    margin: 12px;
}

.form-control
{
    background-color:var(--white);
    color:var(--black);
    max-width:500px;
    width:100%;
    min-width:280px;
    font-size: large;
    padding: 12px;
    margin: auto;
}

#loginForm .btn-success
{
    background-color:var(--mainColor);
    border:0;    
    color:var(--black);
    border-radius: 0.15rem;
    text-transform:uppercase;
    display: block;
    margin: auto;

    max-width:150px;
    min-width: 150px;
}

#loginForm .partition
{
    background-color: transparent;
}

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:var(--black);
    opacity:  1;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:var(--black);
   opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:var(--black);
   opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:var(--black);
   opacity:  1;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
   color:var(--black);
}

.form-control::placeholder { /* Most modern browsers support this now. */
   color:var(--black);
   opacity:  1;
}



.css-1owq2hv, [data-css-1owq2hv] {
    width: 375px;
    height: 400px;
    position: absolute;
    z-index: 1000;
    right: 40%;
    visibility: visible;
    transition: visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.css-1oz4tqn, [data-css-1oz4tqn] {
    position: absolute;
    top: 344px;
    left: 344px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    z-index: 100001;
}

.css-5sa19j, [data-css-5sa19j] {
    background-color:var(--white);
    border-radius: 50%;
    opacity: 0.95;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100000;
    transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s, opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
    transform: scale(1);
}

.css-j9z7vu
{
    position: relative;
    top: 60px;
    right: -45%;
    text-align: left;
    width: 100px;
    font-size: 22px;
    font-weight: 400;
    white-space: pre-line;
    font-family: "Jost", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--grey) !important;
    line-height: 1.1;
}

@media screen and (max-width: 850px) {

    .css-1owq2hv
    {
        position: relative;
    }
    .css-j9z7vu
    {
        top: 50px;
        right: -200px;
    }

    #loginPage .container-at
    {
        padding:0;
    }
}