body {
    /* background: url(/img/home/vectormb.svg), white;
    background-size: cover; */
    background: #ff724b;
}
.popup{
  background: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  display: none;
  z-index: 99998;
  align-items: center;
  justify-content: center;
}

.popup-content{
  width: 500px;
  background: #FFF;
  padding:20px;
  border-radius: 8px;
  position: relative;
  text-align: left;
  z-index: 99999;
  color: #000;
  display: flex;
}
/* container components */
.container {
    width: min(1190px, 100%);
    margin-inline: auto;
}
.col-2 {
    display: grid;
    height: 100vh;
    grid-template-rows: max-content;
}
/* form */
#form-container {
    background: white;
    border-radius: 1rem 1rem 0 0;
}
.form-content {
    width: 90%;
    margin: auto;
    margin-block-start: 2rem;
    margin-block-end: 1rem;
}
.form-soc-med {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
.form-soc-med a {
    height: 3rem;
    width: 3rem;
    border: 1px solid var(--clr-primary);
    border-radius: .5rem;
    position: relative
}
.form-soc-med a:hover {
    background: var(--clr-primary);
}
.form-soc-med a:hover::before {
    color: white;
}
.form-soc-med a::before {
    color: var(--clr-secondary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.form-content div {
    position: relative;
}
.form-content .show-pass {
    position: absolute;
    top: 53%;
    right: 3%;
    transform: translateY(-53%);
    cursor: pointer;
    color: #919191;
}
.show-error-message input[type="text"],
.show-error-message input[type="password"],
.show-error-message input[type="email"] {
    
}
.form-error-message,
.form-success-action {    
    display: none;
}
.form-success-action {
    background: var(--clr-secondary);
    color: white;
}
.form-show-success-action .form-success-action {
    display: inline-block;
}
.show-error-message .form-error-message {
    display: inline-block;
}
.show-error-message .show-pass {
    top: 42%;
    transform: translateY(-42%);
}
.form-show-error-action .form-error-action .form-error-message {
    display: inline-block;
}
/* img template */
.form-vector-bg{
    position: absolute;
    width: 80%!important;
    top: 19%;
    
}
.form-vector-bg.img1 {
    transform: rotate(358deg);
    right: 15%;
}
.form-vector-bg.img2 {
    transform: rotate(249deg);
    right: 15%;
}
.forgot-link {
    margin-top: 0.5rem;
    display: block;
}
.dtop-content {
    display: none;
}
.mob-content {
    width: 100%;
}
.mob-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
    width: calc(100% - 2rem);
    gap: 1rem;
    margin: 0.5rem 1rem;
}
.mob-header span {
    margin-left: auto;
}
.mob-content h1 {
    margin-block: 0.5rem;
    font-size: 1rem;
}
.mob-content img {
    width: 3rem;
    filter: brightness(0) invert(1);
}
.col-2 > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.mob-bg {
    position: absolute;
    top: 3%;
}
.btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    color:#FFF;
}
/* terms and condition */
.tnc-content {    
    background: white;
    padding: 1rem 1rem;
    position: absolute;
    width: min(1190px, 100%);
    margin-inline: auto;
    top: 16vh;
    z-index: 1;
}
.tnc-info {    
    overflow-y: scroll;
    margin: 1rem 1rem;
    padding: 0.5rem;
    height: 52vh;
    background: #f7f7f7;
}
.tnc-info h4 {
    padding-block: 1rem;
}
.tnc-info p {
    line-height: 2;
}
.tnc-content .btn-primary {
    justify-self: center;
    align-self: center;
}
form#recover {
    margin-block-start: 7rem;
}
/* tablet */
@media (30em <= width < 50em) {
    .col-2 > div:last-child {
        margin-inline: 2rem;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
}
/* desktop exclusive */
@media (min-width: 50em) {
    
    body {
        /* background: url(/img/home/vectorbg.svg), white;
        background-size: cover; */
        background: white;
    }
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .col-2 {
        /* background: var(--clr-primary); */
        background: #171717;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        justify-content: center;
        align-items: center;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        height: auto;
    }
    .col-2 > div {
        min-height: auto;
    }
    .col-2 > div:last-child {
        order: -1;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: none;
    }
    .col-2 #form-container {
        background: white;
        padding-block: 4rem;
        border-radius: 0;
        height: 100%;
    }
    .mob-content {
        display: none;
    }
    .dtop-content {
        display: contents;
        /* background: var(--clr-primary); */
    }
    .dtop-content img {
        width: 100%;
        align-self: end;
    }
    .form-content {
        width: 70%; 
        margin: auto;
        /* margin-block-start: 5rem; */
    }
    .form-login {
        margin-block-start: 6rem;
    }
    .form-org {
        margin-block-start: 3.5rem;
    }
    .form-show-error-action {
        margin-block-start: 5rem;
    }
    form#recover {
        margin-block-start: 5rem;
    }
    .signup-success h1 {
        font-size: 2rem;
        line-height: 1.25;
    }
    .signup-success h2 {
        width: 80%;
        margin: auto;
        font-size: 1rem;
    }
    .signup-success .btn-cta {
        width: 70%;
        margin: 3rem auto 0;
    }
}

#login-logo {
    padding: 0px 30px !important;
}