html, body {
    background-color: #F8FAFB;
}
#auth-container{
    width: 100%;
    min-height: 100%;
    text-align: center;
}
#content {
    max-width: 2000px;
    display: inline-block;
    text-align: left;
    width: 100%;
}
.menu-item-profile {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    float: right;
    position: relative;
    top: -8px;
    margin-left: 15px;
}
.img-profile {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0px 0px 15px 1px rgba(69,65,78,0.2);
}
.container{
    overflow: hidden;
}
img.logo {
    display: inline-block;
    width: 165px;
}
.menu-item {
    display: inline-block;
    /* padding: 0px 30px 0px 0px; */
    padding: 0px 29.5px 0px 0px;
    font-family: 'Montserrat', sans-serif;
}
.menu-item a{
    font-size: 21px;
    font-weight: 500;
    text-decoration: none; color: #707070;
}
.menu-item.active a{
    color: #15ACC6;
}
header {
    padding: 14px 33px 26px;
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 5px #E2E4E5;
}
.main-logo-container {
    display: inline-block;
    position: relative;
    top: 4px;
}
header .menu-item-special{
    padding-right: 0px;
    padding-left: 0px;
}
header .menu-item-special a{
    text-decoration: none;
    color: white;
    background-color: #F2A939;
    /* box-shadow: 0px 0px 3px 0px #888888; */
    padding: 8px 18px;
    border-radius: 20px;
}
div#content-about {
    padding: 60px 60px 10px;
    margin-bottom: 50px;
}
.menu-container {
    /* margin-top: 13px; */
    margin-top: 11px;
    float: right;
}
.mob-nav-group-container {
    display: none;
    float: right;
    margin-top: -4px;
    padding: 11px 16px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 10px;
}
.mob-nav-group-container:active {
    background: #dacece;
}

/* mobile-menu */
#mobile-menu {
    display: none;
    position: fixed;
    background: rgba(174, 165, 165, 0.4);
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0px;
}
.mob-menu-content {
    width: 70%;
    background: white;
    min-height: 100%;
}
.mob-list-menu {
    padding-top: 25px;
}
#mobile-menu .m-dropdown__header {
    padding: 10px 20px;
    margin-bottom: 20px;
}
#mobile-menu .menu-item {
    display: block;
    padding: 10px 20px;
}
#mobile-menu .menu-item a {
    font-size: 15px;
}
#mobile-menu .menu-item-special a{
    text-decoration: none;
    color: white;
    background-color: #F2A939;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
}
#auth-content{
    min-height: 100%;
    width: 100%;
    margin-top: 6%;
}
div#login-container,
div#register-container {
    padding-bottom: 5%;
    width: 100%;
    text-align: center;
}
div#register-container {
    margin-top: -2%;
}
.form-container {
    display: inline-block;
    width: 515px;
    text-align: center;
    padding-bottom: 25px;
    box-shadow: 0px 0px 3px -2px #000000;
    border-radius: 25px;
    background-color: white;
}
.form-content-title {
    font-size: 20px;
    font-family: 'Montserrat';
    font-weight: 500;
    color: #727272;
    margin-bottom: 27px;
}
.form-content-title.register-title {
    margin-bottom: 5px;
    font-size: 22px;
    font-weight: 700;
}
.form-content-title.register-subtitle {
    font-weight: 400;
}
img#img-login {
    width: 100%;
}
.form-content{
    text-align: left;
    width: 88%;
    display: inline-block;
    margin-top: 25px;
}
.form-content .form-group label {
    /* font-size: 16px; */
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: 0px;
}
.form-content .form-group{
    /* margin-top: 3%; */
}
.form-content .form-group label.form-control-sublabel {
    font-size: 12px;
}
.form-content .m-form .m-form__group {
    padding-bottom: 5px;
}
.remember_me-container label {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #727272;
    padding-left: 25px;
}
#m_login_forget_password,
#m_login_register_password,
label.lbl-don-t-have-an-account {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
}
.lbl-or-register {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;

}
#form-login-g-recaptcha-response {
    margin-top: 0px;
    padding-bottom: 0px;
}
.lbl-or-register-container {
    margin-top: 15px;
    position: relative;
}
.lbl-or-register-container:after {
    content: "";
    width: 100%;
    top: 55%;
    height: 1px;
    background: #989898;
    position: absolute;
    left: 0px;
}
.lbl-or-register {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    padding-left: 17px;
    padding-right: 17px;
    position: relative;
    background: white;
    z-index: 10;
}
.m-radio>span.remember_me-box,
.m-checkbox>span.remember_me-box {
    top: 2px;
    height: 16px;
    width: 16px;
}
.input-group {
    margin-top: 7px;
}
img.input-left-icon {
    position: absolute;
    z-index: 5;
}
img.input-left-icon.input-left-icon-message {
    width: 20px;
    left: 11px;
    top: 14px;
}
img.input-left-icon.input-left-icon-padlock {
    width: 15px;
    left: 14px;
    top: 11px;
}
img.input-left-icon.input-left-icon-user {
    width: 16px;
    left: 13px;
    top: 11px;
}
.line-icon-input {
    position: absolute;
    height: 100%;
    top: 0px;
    left: 41px;
    width: 0px;
    z-index: 5;
    border-right: 1px solid #ebedf2;
}
.list-login-medsos {
    display: flex;
    /* justify-content: space-between; */
    justify-content: space-evenly;
    margin-top: 8px;
}
.item-login-medsos {
    display: inline-block;
    cursor: pointer;
}
.item-login-medsos:active {
    -webkit-transform: scale(0.8) rotate(0.01deg);
    transform: scale(0.8) rotate(0.01deg);
}
img.icon-login-medsos {
    width: 135px;
}
.domain-username-berbagilink {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 11px 15px 11px;
    background: #14BCC3;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    font-weight: bold;
    color: white;
    z-index: 5;
    font-size: 13px;
}

input.form-control:focus + .line-icon-input {
    border-color: #716aca;
}
.input-group>.form-control, .input-group>.custom-select, .input-group>.custom-file{
    margin-bottom: 0;
    padding-left: 55px;
    background: #FFFFFF;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    padding-top: 12px;
    font-weight: 400;
    border-radius: 7px !important;
}
#form-register-username .input-group>.form-control,
#form-login-username .input-group>.form-control {
    padding-left: 125px;
}
#m_login_signin_submit,
#m_verification_submit,
#m_login_signup_submit{
    width: 100%;
    border-color: transparent;
    background-color: #14BCC3;
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 11px;
    font-size: 15px;
}
#m_forget_password__request_submit,
#m_forget_password__reset_submit,
#m_forget_password__verify_submit{
    margin-top: 20px;
}
#m_verification_submit{
    width: auto;
    font-size: 200%;
}
.m-login__form-sub a{
    color: #18B0B3;
    font-size: 135%;
    font-weight: 400;
}
.m-login__form-sub span{
    font-size: 135%;
    font-weight: 400;
}
footer .image-container {
    margin-top: 80px;
}
footer .image-container img {
    width: 100%;
    margin-bottom: -3px;
}
.has-danger .form-control-feedback{
    font-size: 100%;
    text-transform: capitalize;
}
.verification-email{
    word-break: break-word;
}
.alert.m-alert--outline.alert-danger,
.alert.m-alert--outline.alert-success {
    font-size: 120%;
}
.m-forget-password__request .alert.m-alert--outline.alert-danger,
.m-forget-password__request .alert.m-alert--outline.alert-success,
.m-forget-password__verify .alert.m-alert--outline.alert-danger,
.m-forget-password__verify .alert.m-alert--outline.alert-success,
.m-forget-password__reset .alert.m-alert--outline.alert-danger,
.m-forget-password__reset .alert.m-alert--outline.alert-success {
    margin-top: 20px;
}

.menu-item-profile {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    float: right;
    position: relative;
    top: -8px;
    margin-left: 15px;
}

.img-profile {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0px 0px 15px 1px rgba(69,65,78,0.2);
}
#feedback-recaptcha-verify,
#feedback-recaptcha-reset {
    display: inline-block;
}
#form-reset-password ,
#form-reset-password_confirmation {
    position: relative;
}
#form-reset-password .unvisible-password,
#form-reset-password_confirmation .unvisible-password{
    top: 29px;
}
#register-container div#feedback-recaptcha,
#register-container #feedback-recaptcha-verify,
#register-container #feedback-recaptcha-reset {
    display: inline-block;
    transform: scale(0.75);
    transform-origin: top right;
    top: 15px;
    right: 20.75%;
    position: relative;
}
#form-register-referral_code label {
    font-size: 10px;
}
#form-register-referral_code.form-group input {
    font-weight: 400px;
    padding-left: 1.15rem;
    font-size: 10px;
}
#form-register-referral_code{
    padding-top: 0px;
    padding-bottom: 0px;
}

.m-form label.i-agree-lbl {
    font-size: 12px;
    padding-left: 26px;
}
.m-login__form-sub a.i-agree-link {
    font-size: 12px;
    color : #18B0B3;
}

@-webkit-keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
  
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
  
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
@keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
  
    5%,
    15% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
  
    10%,
    20% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

.animation-shake {
    animation: shake 2s ease infinite;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 825px)  {
    /* header */
    header {
        transform: scale(0.5);
        transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        width: 200%;
        position: absolute;
        margin-top: 1.5px;
    }
    header .menu-item-special{
        /* position: absolute;
        left: 7%;
        bottom: -25px; */
    }
    #auth-content {
        margin-top: 12%;
    }
}

@media only screen and (max-width: 730px)  {
    /* header {
        padding: 10px 15px 10px;
    }
    img.logo {
        width: 23%;
    }
    .menu-container{
        margin-top: 0px;
    }
    .menu-item {
        display: inline-block;
        padding: 0px 0px 0px 10px;
        line-height: normal;
    }
    .menu-item a {
        font-size: 58%;
    } */
    
    #auth-content {
        margin-top: 12%;
        min-height: auto;
    }
    .form-container {
        width: 65%;
        padding-bottom: 9%;
        box-shadow: 0px 0px 10px 5px #d6d0d0;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .form-content .form-group {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .form-content .form-group label {
        font-size: 80%;
    }
    .m-form label.i-agree-lbl {
        font-size: 80%;
    }
    .input-group {
        margin-top: 3px;
        border-radius: 10px;
    }
    img.input-left-icon.input-left-icon-message {
        width: 20px;
        left: 11px;
        top: 6px;
    }
    img.input-left-icon.input-left-icon-padlock {
        width: 12px;
        left: 9.5px;
        top: 7px;
    }
    .col-6.remember_me-container .mt-3 {
        margin-top: -5px !important;
    }
    .line-icon-input {
        left: 29px;
    }
    #m_login_forget_password, #m_login_register_password, .m-form label.lbl-don-t-have-an-account {
        font-size: 80%;
    }
    .input-group>.form-control, .input-group>.custom-select, .input-group>.custom-file{
        margin-bottom: 0;
        font-size: 80%;
        height: 30px;
        padding: 8px 10px 8px 40px;
        border-radius: 6px !important;
    }
    .has-danger .form-control-feedback {
        font-size: 9px;
    }
    .alert.m-alert--outline.alert-danger,
    .alert.m-alert--outline.alert-success {
        font-size: 80%;
    }
    .unvisible-password, .visible-password {
        top: 9px;
        right: 8px;
        font-size: 14px;
    }
    .verification-email{
        font-size: 1rem;
    }
    #m_login_signin_submit,
    #m_verification_submit,
    #m_login_signup_submit {
        font-size: 120%;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 10px;
    }
    .m-login__form-sub a {
        color: #18B0B3;
        font-size: 70%;
        font-weight: 400;
    }
    footer .image-container {
        margin-top: 7%;
    }
    #auth-content{
        /* background-image: url(https://berbagi.link/images/auth/bg-auth-mobile.svg); */
        overflow-x: hidden;
    }
    #form-login-g-recaptcha-response,
    #form-register-g-recaptcha-response{
        height: 70px;
    }
    div#feedback-recaptcha,
    #feedback-recaptcha-verify,
    #feedback-recaptcha-reset {
        display: inline-block;
        transform: scale(0.65);
        /* transform-origin: top left; */
        transform-origin: top center;
    }
    .domain-username-berbagilink{
        font-size: 80%;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        padding: 7px 15px 7px;
    }
    #form-register-username .input-group>.form-control,
    #form-login-username .input-group>.form-control {
        padding-left: 100px;
    }
    .m-login__form-sub label{
        font-size: 70%;
        padding-left: 20px;
    }
    .m-login__form-sub a{
        font-size: 80% !important;
    }
    .m-login__form-sub a.i-agree-link {
        font-size: 100% !important;
    }
    .m-login__form-sub span{
        font-size: 70%;
    }
    .m-checkbox.m-checkbox--focus>span {
        top: -2px;
        height: 15px;
        width: 15px;
    }
    .m-login__form-sub .m--align-left a,
    .m-login__form-sub .col-6.m--align-right a {
        font-size: 75% !important;
    }
    .form-content .form-group label.form-control-sublabel {
        font-size: 70%;
    }
    div#register-container {
        margin-top: 0px;
        display: inline-block;
    }
}

@media only screen and (max-width: 555px)  {
    header .menu-item-special {
        left: 5%;
        bottom: -25px;
    }
}

@media only screen and (max-width: 500px)  {
    /* header */
    header {
        /* padding: 10px 20px 10px; */
        transform: scale(0.5);
        transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        width: 200%;
        position: absolute;
        padding: 20px 30px 20px;
        margin-bottom: 4px;
        margin-top: 1.5px;    
    }
    img.logo {
        width: 195px;
    }
    .menu-container {
        display: none;
    }
    .mob-nav-group-container {
        display: block;
    }
    #auth-content {
        /* margin-top: 15%; */
        margin-top: 20%;
    }

    .form-container {
        width: 85%;
    }

    .list-login-medsos {
        display: flex;
        justify-content: space-around;
        margin-top: 8px;
        word-break: break-word;
        flex-wrap: wrap;
    }
    img.icon-login-medsos {
        /* width: 100px; */
        width: 118px;
    }
    img.input-left-icon.input-left-icon-message {
        width: 17px;
        left: 7px;
        top: 9px;
    }
    .input-group>.unvisible-password, .input-group>.visible-password {
        font-size: 13px;
    }
    .input-group>.form-control {
        padding-right: 27px;
    }

    div#register-container {
        margin-top: 10px;
    }
    .form-content-title.register-title {
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: 700;
        padding-left: 9px;
        padding-right: 9px;
    }
    .form-content-title.register-subtitle {
        font-size: 16px;
        font-weight: 400;
        padding-left: 9px;
        padding-right: 9px;
    }
    #m_login_forget_password, #m_login_register_password, label.lbl-don-t-have-an-account {
        font-size: 13px;
    }
    #register-container div#feedback-recaptcha, 
    #register-container #feedback-recaptcha-verify, 
    #register-container #feedback-recaptcha-reset {
        display: inline-block;
        transform: scale(0.75);
        transform-origin: top center;
        top: 5px;
        right: auto;
        position: relative;
        left: -4%;
    }
    .lbl-or-register {
        font-size: 12px;
    }
}

@media only screen and (max-width: 412px)  {
    header .menu-item-special {
        left: 1%;
        bottom: -17px;
    }
}

.m-dropdown.m-dropdown--arrow .m-dropdown__wrapper {
    padding-top: 10px;
}
.m-dropdown.m-dropdown--align-right .m-dropdown__wrapper {
    right: 0;
}
.m-dropdown .m-dropdown__wrapper .m-dropdown__inner {
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(69,65,78,0.2);
    box-shadow: 0px 0px 15px 1px rgba(69,65,78,0.2);
}
.m-dropdown .m-dropdown__wrapper, .m-dropdown.m-dropdown--hoverable:hover .m-dropdown__wrapper {
    display: block;
    -webkit-animation: m-dropdown-fade-in .3s ease 1, m-dropdown-move-up .3s ease-out 1;
    animation: m-dropdown-fade-in .3s ease 1, m-dropdown-move-up .3s ease-out 1;
}
.m-dropdown .m-dropdown__wrapper {
    top: 100%;
    text-align: left;
    display: none;
    position: absolute;
    z-index: 101;
    padding-top: 0;
    width: 245px;
    border-radius: 4px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 101;
    right: -12px;
}
.m-dropdown .m-dropdown__wrapper .m-dropdown__header {
    padding: 20px 20px;
    border-radius: 4px 4px 0 0;
}
.m-dropdown__arrow.m-dropdown__arrow--right.m-dropdown__arrow--adjust{
    width: 100%;
    height: 10px;
    display: block;
    text-align: right;
    position: relative;
    margin-top: 4px;
}
.m-dropdown__arrow.m-dropdown__arrow--right.m-dropdown__arrow--adjust:before{
    content: '';
    position: absolute;
    width: 6px;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid white;
    right: 10px;
}
.m-dropdown .m-dropdown__header {
    -webkit-box-shadow: 1px 34px 52px -19px rgba(68,62,84,0.03);
    box-shadow: 1px 34px 52px -19px rgba(68,62,84,0.03);
}

@media screen and (max-width: 1400px) and (min-width: 1200px) {
    .register-form div#feedback-recaptcha{
        display: block;
        transform: scale(0.8);
        transform-origin: top left;
        position: relative;
    }
}
@media screen and (max-width: 1200px) and (min-width: 1100px) {
    .register-form div#feedback-recaptcha{
        display: block;
        transform: scale(0.75);
        transform-origin: top left;
        position: relative;
    }
}
@media screen and (max-width: 1100px) and (min-width: 992px) {
    .register-form div#feedback-recaptcha{
        display: block;
        transform: scale(0.7);
        transform-origin: top left;
        position: relative;
    }
}

@media (min-width: 1025px){
    .m-dropdown .m-dropdown__wrapper {
        width: 350px;
    }
}

@media (min-width: 1025px){
    .m-dropdown .m-dropdown__wrapper {
        width: 350px;
    }
}