input.login-input[type="text"],
input.login-input[type="email"] input.login-input[type="password"],
input.login-input[type="number"],
.login-form-control,
.custom-select {
    border-width: 1px;
    border-color: #e3e5ee;
    border-style: solid;
    border-radius: 6px;
    background-color: #fff;
    font-size: 1.15rem;
    height: calc(3.25rem + 2px);
    padding: 0.75rem 1.375rem;
    width: 100%
}

@media (min-width: 1025px) {
    input.login-input[type="text"],
    input.login-input[type="email"] input.login-input[type="password"],
    input.login-input[type="number"],
    .login-form-control,
    .custom-select {
        font-size: 1rem;
        height: calc(3.25rem - 2px)
    }
}

.login-form-control-lg {
    height: calc(4rem + 2px) !important;
    padding: 0.75rem 1.625rem !important
}

@media (min-width: 1025px) {
    .login-form-control-lg {
        height: calc(4rem - 2px) !important
    }
}

.login-form-control-sm {
    height: calc(2.5rem + 2px) !important;
    padding: 0.75rem 1.125rem !important;
    font-size: .8125rem !important
}

@media (min-width: 1025px) {
    .login-form-control-sm {
        height: calc(2.5rem - 2px) !important
    }
}

.form-inline .login-form-control {
    text-align: center
}

@media (min-width: 600px) {
    .form-inline .login-form-control {
        text-align: left
    }
}

.search-bar .form-inline .login-form-control {
    background: none;
    border: none;
    border-radius: 0;
    padding-right: .625rem;
    padding-left: .625rem;
    min-width: 12.5rem .search-bar .form-inline .login-form-control
}

.search-bar .form-inline .login-form-control:active,
.search-bar .form-inline .login-form-control:focus {
    outline: none;
    box-shadow: none !important
}

.form-inline .btn {
    width: 100%
}

@media (min-width: 600px) {
    .form-inline .btn {
        width: auto
    }
}

@media (min-width: 600px) {
    .search-bar {
        display: none
    }
}

a.api-get-plain {
    color: #007bff;
}

input.login-input:focus,
select.login-input:focus,
textarea.login-input:focus,
.multiselect:focus,
.login-form-control:focus {
    border: 1px solid #4d5bed;
    box-shadow: 0px 0px 15px 0px rgba(77, 91, 237, 0.2) !important
}

input.input--invalid,
input.input--invalid:focus,
select.input--invalid,
select.input--invalid:focus,
textarea.input--invalid,
textarea.input--invalid:focus,
.multiselect.input--invalid,
.multiselect.input--invalid:focus,
.login-form-control.input--invalid,
.login-form-control.input--invalid:focus {
    border: 1px solid rgba(245, 61, 85, 0.47);
    box-shadow: 0 0 15px 0 rgba(245, 61, 85, 0.2) !important
}

input.input--valid,
input.input--valid:focus,
select.input--valid,
select.input--valid:focus,
textarea.input--valid,
textarea.input--valid:focus,
.multiselect.input--valid,
.multiselect.input--valid:focus,
.login-form-control.input--valid,
.login-form-control.input--valid:focus {
    border: 1px solid rgba(102, 223, 124, 0.55);
    box-shadow: 0 0 15px 0 rgba(102, 223, 124, 0.2) !important
}

label.input--invalid {
    color: #f53d55;
    font-size: .75rem
}

label.input--valid,
label.input--invalid {
    margin-bottom: 0
}

.invalid-feedback {
    display: block;
}

.error-bag {
    color: var(--red);
    text-align: right;
}

.error {
    color: var(--red) !important;
}

.alert-error {
    padding: 0 15px 10px;
    color: var(--red);
}

.custom-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10px' height='6px'%3e%3cpath fill-rule='evenodd' fill='rgb(173, 179, 200)' d='M10.001,1.463 C10.000,1.409 9.977,1.358 9.935,1.320 L8.581,0.082 C8.493,0.002 8.350,0.001 8.261,0.081 L5.010,3.005 L1.786,0.057 C1.697,-0.024 1.554,-0.025 1.465,0.056 L0.101,1.284 C0.011,1.364 0.010,1.494 0.099,1.574 L4.836,5.906 C4.925,5.986 5.068,5.987 5.158,5.906 L9.934,1.611 C9.978,1.572 10.002,1.518 10.001,1.463 Z'/%3e%3c/svg%3e");
    background-size: 10px 6px
}

label {
    color: #101f41
}

label.required-field::after {
    content: "*";
    color: #f53d55;
    margin-left: .125rem
}

.login-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.social-auths {
    display: flex;
    width: 100%;
}

.login-btn-facebook {
    background-color: #3b5999;
    height: 100%;
}

.login-btn-twitter {
    background-color: #1A91DA;
}

.login-btn-facebook:hover, .btn-twitter:hover {
    color: #fff;
}

.login-btn-brand {
    padding: 0.75rem 1.75rem;
    border: 1px solid transparent;
    color: #fff;
}
.login-btn {
    font-size: 1rem;
    border: 1px solid;
}
.login-btn {
    font-family: "Inter",sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.5;
    padding: .75rem 2.5rem;
    border-radius: .375rem;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.login-btn.login-btn-brand.login-btn-google-white {
    background-color: #fff;
    color: #222 !important;
}

.login-btn-brand-container {
    padding-left: 5px;
    padding-right: 5px;
    flex: 1;
}

.login-btn-brand {
    padding: .5rem 1rem;
}

.login-btn-brand:hover {
    color: #fff;
    text-decoration: none;
}

.login-btn.login-btn-brand {
    color: #fff !important;
    border: transparent;
}

.tos {
    display: inline-block;
}

.auth-login-wrapper {
    margin: 100px auto; 
    width: 50%
  }

  @media (max-width: 1300px) {
    .auth-login-wrapper {
      width: 50%;
    }
  }

  @media (max-width: 1100px) {
    .auth-login-wrapper {
      width: 60%;
    }
  }

  @media (max-width: 767px) {
    .auth-login-wrapper {
      width: 80%;
    }
  }

  @media (max-width: 576px) {
    .login-btn-brand-container {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  @media (max-width: 500px) {
    .auth-login-wrapper {
      width: 100%;
    }
  }