* {
    font-family: acumin-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
}

html, body {
    height: 100%;
}

#main-container {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#main-container>div {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#left {
    flex: 3;
    display: flex;
    flex-direction: column;
}

#jumbotron {
    flex: 1;
    padding: 2.5em; 
    padding-left: 10em;  
}

#jumbotron>h1 {
    font-size: 96px;
    font-weight: bold;
    margin: 0 auto;
}

#jumbotron-sm {
    display: none;
}

#signup-form {
    flex: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 10em;
}

#form-signup {
    padding-top: 2em;
}

#signup-form-primary {
    flex: 1;
    /* padding-right:5em; */
}

#signup-form-social {
    flex: 1;
    display: flex;
    /* align-items: center; */

}

#social-wrapper {
    margin: 0 auto;
}

#social-wrapper > div {
    transform: translateY(33%);
}

.social-facebook {
    background-color: #0D47A1;
}

.social-apple{
    background-color: rgb(0, 0, 0);
}

.fa-apple {
    color:rgb(0, 0, 0);
}
.fa-facebook:before {
    content: "\f39e"!important;
    color: #0D47A1;
}

.social-google {
    background-color: #2196F3;
}

.social {
    border: 1px solid transparent;
    border-radius: 25px;
    width: 300px;
    text-align: left;
    text-decoration: none;
    margin: 5px 2px;
    height: 50px;
}

.social>.badge-right {
    padding: 12px 20px;
    color: white;
}

.social>.badge-left {
    height: 100%;
    width: 50px;
    background-color: white;
    border: 0px solid transparent;
    border-radius: 1px;
}

.social>.badge-left>i {
    margin: 0 auto;
}

#social-sm, #social-sm-title, #signup-sm-btn {
    display: none;
    ;
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

#right {
    flex: 1.3;
    display: flex;
    flex-direction: column;
}

#ic {
    background-image: url('/../../../images/icbg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 10px;
    flex: 2;
}

#ic>img {
    margin: 0 auto;
}

#signin-portal {
    flex: 1;
    background-color:#1D1D1D;
}

#signin-portal > h1 {
    font-weight: bold;
}

#signin-portal>a.btn-large {
    font-weight: bold;
    border-radius: 30px;
  
}

.ic-dark-pink-text {
    color: #C81344;
}

.ic-pink-text {
    color: #F21D66;
}

.ic-pink {
    background-color: #C81344;
}

.ic-grey {
    background-color: #F9F9F9;
}

.ic-grey-text {}

.no-uppercase {
    text-transform: none;
}

/* inputs */
.tallInput {
    height: 3.5rem!important;
}
/* label animation */

.input-field label {
    color: #9e9e9e;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    font-size: 1.2rem;
    cursor: text;
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    text-align: initial;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    pointer-events: none;
}

.input-field label:not(.label-icon).active {
    -webkit-transform: translateY(-14px) scale(0.8);
    transform: translateY(-14px) scale(0.8);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: auto!important;
    height: auto!important;
    z-index: 1;
    background-color: white;
    padding: 0px 4px 0px 4px;
    margin-left: 10px;
}

/* border transformation on focus */

input:not([type]):not([readonly]), input[type=text]:not(.browser-default):not([readonly]), input[type=password]:not(.browser-default):not([readonly]), input[type=email]:not(.browser-default):not([readonly]), input[type=url]:not(.browser-default):not([readonly]), input[type=time]:not(.browser-default):not([readonly]), input[type=date]:not(.browser-default):not([readonly]), input[type=datetime]:not(.browser-default):not([readonly]), input[type=datetime-local]:not(.browser-default):not([readonly]), input[type=tel]:not(.browser-default):not([readonly]), input[type=number]:not(.browser-default):not([readonly]), input[type=search]:not(.browser-default):not([readonly]), textarea.materialize-textarea:not([readonly]) {
    padding-left: 10px;
}

input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-color: #707070;
    -webkit-box-shadow: 0 0px 0 0 #707070;
    box-shadow: 0 0px 0 0 #707070;
}

/* Validations coloring */

/* invalid */

/* .has-error>label, .help-block-error, .has-error > input {
    color: #F44336;
} */

.help-block-error {
    color: #F44336;
}

.has-error>input {
    border-color: #F44336!important;
    /* border:none;
    border: 1px solid #F44336!important;; 
    padding-left: 10px!important;
    border-radius: 4px!important;*/
    /* color:#F44336;  */
}

input:focus {
    border: 1px solid #707070!important;
    border-radius: 25px!important;
}

.has-error>input:focus {
    border-color: #F44336!important;
    /* border:none!important; */
    /* border: 1px solid #F44336!important; 
    border-radius:4px !important;
    -webkit-box-shadow:none!important;;
    box-shadow:none!important; */
}

/* empty */

.has-error>input[value=""] {
    /* border:none!important;
    border-bottom: 1px solid #F44336!important; 
    border-radius:0px !important;
    -webkit-box-shadow:none!important;;
    box-shadow:none!important; */
}

.has-error>input[value=""]:focus {
    /* border:none!important; */
    /* border: 1px solid #F44336!important; 
    border-radius:4px !important;
    -webkit-box-shadow:none!important;;
    box-shadow:none!important; */
}

/* non empty */

.has-error>input[value]:not([value=""]) {
    /* border: 1px solid #F44336!important;;  */
}

/* valid */

.has-success>label, .help-block-success {
    /* color: #4CAF50; */
}

.has-success>input, .has-success>input:not(.invalid), .has-success>input:not(.valid), .has-success>input.valid, .has-success>input.invalid {
    /* color: #4CAF50!important;
    border: 1px solid #4CAF50!important;;
    border-radius: 4px;
    padding-left: 10px;
    -webkit-box-shadow: 0 0px 0 0 #4CAF50!important;
    box-shadow: 0 0px 0 0 #4CAF50!important; */
}

/* autofill */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: black;
}

input.valid:-webkit-autofill, input.valid:-webkit-autofill:hover, input.valid:-webkit-autofill:focus, input.valid:-webkit-autofill:active {
    /* -webkit-text-fill-color: #4CAF50;
    border: 1px solid #4CAF50!important;
    color: #4CAF50; */
}

input.invalid:-webkit-autofill, input.invalid:-webkit-autofill:hover, input.invalid:-webkit-autofill:focus, input.invalid:-webkit-autofill:active {
    /* -webkit-text-fill-color: #F44336;
    border: 1px solid #F44336!important;
    color: #F44336; */
}

/* buttons */

.ic-btn {
    background: linear-gradient(to right, #871535, #E11650);
    font-weight: bold;
    border-radius: 30px;
    padding: 0 30px;
}

form div.required label.control-label:after {
    content: " * ";
    color: red;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1300px) {
    #jumbotron {
        display: none;
    }
    #signin-portal {
        display: none;
    }
    #main-container, #main-container>div {
        flex: 1;
        flex-direction: column;
        height: auto!important;
    }
    #right {
        flex: 0;
        order: 1;
        flex-direction: row;
    }
    #left {
        order: 2;
    }
    #signup-form {
        order: 2;
        flex-direction: column;
        padding: 0;
    }
    #signup-form-primary {
        order: 1;
        flex: 1;
        padding: 0 2em;
    }
    #signup-form-social {
        display: none;
        ;
    }
    .ic-btn {
        display: none;
    }
    #ic {
        order: 1;
        height: 200px;
        border-bottom: 6px solid #C81344;
    }
    #jumbotron-sm {
        text-align: center;
        display: flex;
        flex-direction: column;
        order: 2;
        padding: 20px;
    }
    #jumbotron-sm>h1 {
        order: 1;
        flex: 1;
        margin: 0;
        font-size: 3.2rem;
        font-weight:bold;
    }
    #jumbotron-sm>h6 {
        order: 2;
        flex: 1;
    }
    #social-sm {
        order: 3;
        display: flex;
        flex: 1;
        margin-bottom: 20px;
    }
    #social-sm>div, #social-sm-ul {
        display: flex;
        flex: 1;
        justify-content: space-around;
    }
    #social-sm-title {
        display: block;
        order: 2;
        flex: 1;
        text-align: center;
        font-weight: bold;
    }
    #signup-sm-btn {
        order: 4;
        /* flex:1; */
        background: linear-gradient(to right, #871535, #E11650);
        padding:20px;
        border: none;
        text-align: center;
        display: block;
        font-size:2em;
    }
    /* #signup-sm-btn>h6 {
        flex: 1;
    } */
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {}