@import 'variable.css';

body {
    font-family: SST;
    font-weight: 400;
}

.body-login-page {
    background-image: url('../img/banner-login.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.input-field {
    position: relative;
}

    .input-field input {
        padding: 8px 12px;
        width: 100%;
        outline: none;
        box-shadow: none;
        border: 1px solid var(--line);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: var(--sony-black);
    }

        .input-field input::placeholder {
            color: transparent;
            opacity: 0;
            visibility: hidden;
            letter-spacing: 0.2px;
        }

    .input-field.disabled {
        pointer-events: none;
        user-select: none;
    }

        .input-field.disabled input {
            color: var(--sony-gray-dashboard);
        }

    .input-field label {
        position: absolute;
        top: 50%;
        left: 9px;
        transform: translateY(-50%);
        font-size: 15px;
        font-weight: 400;
        color: var(--sony-dark-gray);
        pointer-events: none;
        transition: 0.3s;
        background-color: var(--sony-white);
        padding: 0 3px;
    }

        .input-field label span {
            color: var(--sony-error);
            font-weight: 400;
        }

.login-form-bottom p a {
    display: inline-block;
}
.w-100 {
    width: 100% !important;
}

.input-checkbox input {
    position: absolute;
    opacity: 0;
    background-color: transparent;
    outline: none;
    border: none;
}

.input-checkbox label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    cursor: pointer;
}

    .input-checkbox label:before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid var(--line);
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        background: var(--sony-white);
        margin-right: 10px;
        z-index: 2;
    }

    .input-checkbox label::after {
        position: absolute;
        content: "";
        display: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 0;
        background: var(--sony-blue-5);
        z-index: 1;
        top: -6px;
        left: -6px;
    }

    .input-checkbox label span {
        width: calc(100% - 32px);
        margin-top: -4px;
        line-height: 24px;
    }

        .input-checkbox label span span {
            color: var(--sony-error);
        }

.input-checkbox input:checked ~ label:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='3.5' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0662 6.69199L8.16167 14.5965L3.91602 10.0191L4.83248 9.16908L8.19552 12.7949L15.1823 5.80811L16.0662 6.69199Z' fill='white' stroke='white' stroke-width='0.5'/%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='3.5' stroke='black'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    z-index: 3;
}

.input-checkbox input:focus-visible ~ label::after {
    display: block;
}

.input-checkbox input:checked ~ label::after {
    display: none;
}

.category-selection-field {
    min-height: 42px;
    border: 1px solid var(--line) !important;
    background-color: var(--sony-white) !important;
    position: relative !important;
}

    .category-selection-field:hover {
        cursor: pointer;
    }

.category-select-icon {
    position: absolute;
    top: 13px;
    right: 12px;
    font-size: 10px;
}

.category-selection-field.selected .category-select-icon {
    transform: rotateX(180deg);
}

.category-selection-field:focus,
.category-selection-field:focus-visible {
    outline: none;
}

.select-account-category {
    border: 1px solid var(--line);
    background: var(--sony-white);
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: 8px 12px;
    color: var(--sony-black);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.175 7.15039L10 10.9754L13.825 7.15039L15 8.33372L10 13.3337L5 8.33372L6.175 7.15039Z' fill='%23333333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 95% 8px;
}

    .select-account-category::-ms-expand {
        display: none;
    }

    .select-account-category:hover {
        cursor: pointer;
    }

    .select-account-category:focus,
    .select-account-category:focus-visible {
        outline: none;
    }

.select-category {
    border: 1px solid var(--line);
    background: var(--sony-white);
    position: absolute;
    z-index: 1;
}

.select-category-item {
    padding: 9px 24px;
    color: var(--sony-black);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    background-color: var(--sony-white);
    text-align: left;
}

    .select-category-item:hover {
        background-color: var(--sony-blue-5);
        cursor: pointer;
    }

.select-field .select-account-category ~ label,
.input-field input:focus ~ label,
.input-field:not(.disabled) input:not(:placeholder-shown) ~ label,
.input-field.disabled input:not(:placeholder-shown) ~ label {
    top: -2px;
    font-weight: 500;
    font-size: 12px;
    color: var(--sony-gray-1);
}

body h3,
p {
    margin-top: 0;
    margin-bottom: 0;
}

.error {
    color: var(--sony-error);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

    .error.itemLevel p {
        font-size: 12px;
    }

.success {
    color: var(--sony-success-dark);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media (min-width: 1024px) {
    body h3 {
        font-size: 22px;
    }
}

.ml-auto, .mx-auto {
    margin-left: auto;
}

p {
    font-size: 15px;
    line-height: 22px;
}

a {
    font-size: 15px;
    line-height: normal;
}

    a:hover {
        text-decoration: none;
    }

.sony-dark-gray {
    color: var(--sony-dark-gray);
}

.sony-black {
    color: var(--sony-black);
}

.button-text {
    color: var(--button-text);
}

.color-yellow {
    color: var(--sony-yellow-1);
}

[class*="icon-sony-20"] {
    font-size: 20px;
}

.sony-btn-text {
    color: var(--button-text);
}

a.sony-btn-text {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.sony-btn-text:hover,
.sony-btn-text:hover * {
    text-decoration: none;
    color: var(--sony-blue-2);
}

.sony-btn-text:focus,
.sony-btn-text:focus-visible {
    outline: none;
    border-radius: 0;
}

a.color-black {
    color: var(--sony-black) !important;
}

.color-black {
    color: var(--sony-black);
}

a.sony-dark-gray {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

    a.sony-dark-gray:hover {
        color: var(--sony-black)
    }

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;
}

.mt--19 {
    margin-top: -19px;
}


.color-gray {
    color: var(--sony-gray);
}

.bgc-white {
    background-color: var(--sony-white);
}

input {
    font-family: SST;
}

.input-btn {
    box-shadow: none;
    outline: none;
    border: 0;
    width: 100%;
    min-height: 44px;
    background-color: var(--sony-black);
    color: var(--sony-white);
    padding: 11px 16px 14px;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    line-height: initial;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    font-family: SST;
}

    .input-btn:hover {
        color: var(--sony-white);
        text-decoration: none;
        background-color: var(--sony-dark-gray);
    }

    .input-btn:focus,
    .input-btn:focus-visible {
        outline: none;
    }

.font-12 {
    font-size: 12px;
}

.font-15 {
    font-size: 15px;
}

.pt-9px {
    padding-top: 9px;
}

.p-2-25 {
    padding: 1.25rem;
}

.pt-4-5 {
    padding-top: 2.5rem;
}

.pb-4-5 {
    padding-bottom: 2.5rem;
}

.p-4-5 {
    padding: 2.5rem;
}

.px-3-25 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.py-3-25 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.mb-1-25 {
    margin-bottom: 10px;
}

.mb-3-5 {
    margin-bottom: 2rem;
}

h3,
.h3 {
    font-style: normal;
    line-height: normal;
}

p {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 0;
}

.input-field input.error {
    border-color: var(--sony-error);
}

.index-1 {
    z-index: 1;
}

.radius-8 {
    border-radius: 8px;
}

.w-448 {
    max-width: 448px;
    width: 100%;
}

.input-field.disabled input {
    background-color: var(--line);
    color: var(--sony-gray-1);
    pointer-events: none;
}

.input-field.error input {
    border-color: var(--sony-error) !important;
}

input.disable ~ label {
    color: var(--sony-gray-1);
    background-color: var(--line);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: url('../images/icon-styleguide/Vector.png') no-repeat;
    background-size: 15px;
    cursor: pointer;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    height: 40px;
    margin: 0;
    background-position: 94% 40%;
    position: absolute;
}

.datepicker,
.datepickerdate {
    min-width: calc(100% - 24px);
    box-sizing: border-box;
    background: transparent;
    min-height: 40px;
    text-align: left;
    text-align: -webkit-left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 16 18' fill='none'%3E%3Cpath d='M13.8333 15.833H2.16667V6.66634H13.8333V15.833ZM11.3333 0.833008V2.49967H4.66667V0.833008H3V2.49967H2.16667C1.24167 2.49967 0.5 3.24134 0.5 4.16634V15.833C0.5 16.275 0.675595 16.699 0.988155 17.0115C1.30072 17.3241 1.72464 17.4997 2.16667 17.4997H13.8333C14.2754 17.4997 14.6993 17.3241 15.0118 17.0115C15.3244 16.699 15.5 16.275 15.5 15.833V4.16634C15.5 3.24134 14.75 2.49967 13.8333 2.49967H13V0.833008H11.3333ZM12.1667 9.99967H8V14.1663H12.1667V9.99967Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) 9px;
}

input::-webkit-date-and-time-value {
    text-align: left;
}

a.-active {
    color: var(--sony-black);
}

.font-weight-500 {
    font-weight: 500;
}

.hidden {
    display: none;
}

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

    .py-md-3-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .px-md-4-5 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .mr-md-4-375 {
        margin-right: 4.375rem;
    }

    .mb-md-4-5 {
        margin-bottom: 2.5rem;
    }
}