.creator-lms-page,
.creator-lms-page * {
  box-sizing: border-box;
}

.creator-lms-page {
    a {
        transition: all 0.3s ease;
    }
    
    .creator-lms-container {
        width: 100%;
        max-width: 1230px;
        margin: 0 auto;
        padding: 0 15px;

        @media (max-width: 1399px) {
            max-width: 1170px;
        }

        @media (max-width: 1199px) {
            max-width: 960px;
        }

        @media (max-width: 991px) {
            max-width: 720px;
        }

        @media (max-width: 767px) {
            max-width: 540px;
        }

    }

    .creator-lms-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .creator-lms-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .creator-lms-img-fluid {
        max-width: 100%;
        height: auto;
        display: block;
    }

    //--------creator lms input field default style--------
    .creator-lms-form-wrapper {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        gap: 20px;
        row-gap: 24px;

        @media screen and (max-width: 991px) {
            gap: 12px;
            row-gap: 15px;
        }
    }

    .creator-lms-form-group {
        width: 100%;

        &.half-width {
            width: calc(50% - 10px);

            @media screen and (max-width: 767px) {
                width: 100%;
            }
            
        }

        & > label {
            color: var(--creator-lms-heading-color);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2;
            display: block;
            margin: 0 0 9px;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        input[type="url"],
        select,
        textarea {
            display: block;
            border-radius: 10px;
            border: 1px solid #EBEBEF;
            background-color: #FFF;
            color: var(--creator-lms-heading-color);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.3;
            margin: 0;
            box-shadow: none;
            outline: none;
            padding: 9px 16px;
            width: 100%;
            transition: all 0.3s ease;

            &::-webkit-input-placeholder {
                color: #A1A1AA;
            }
            &::-moz-placeholder {
                color: #A1A1AA;
            }
            &:-ms-input-placeholder {
                color: #A1A1AA;
            }
            &:-moz-placeholder {
                color: #A1A1AA;
            }

            &:focus {
                border-color: var(--creator-lms-primary-color);
                box-shadow: 0px 0px 4px 0px rgba(var(--creator-lms-primary-color-rgb), 0.50);
                outline: none!important;
            }

            
            &:-webkit-autofill {
                -webkit-box-shadow: 0 0 0 30px white inset !important;
                box-shadow: 0 0 0 30px white inset !important;
                -webkit-text-fill-color: var(--creator-lms-body-text-color);
            }
    
            &:-moz-autofill {
                background-color: transparent !important;
                color: var(--creator-lms-body-text-color);
            }
    
            &:-ms-autofill {
                background-color: transparent !important;
                color: var(--creator-lms-body-text-color);
            }
        }
    }

    //--------creator lms password strength style--------
    .creator-lms-password-strength {
        ul {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                color: #FF6F6F;
                font-size: 13px;
                font-weight: 400;
                line-height: 1.2;
                position: relative;
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                gap: 5px;

                &:before {
                    content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjRkY2RjZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEwLjU4IDFsLTkgOW0wLTlsOSA5Ii8+PC9zdmc+");
                    width: 9px;
                    height: auto;
                    display: block;
                }

                &:last-child {
                    margin-bottom: 0;
                }

                &.matched {
                    color: #19AA32;

                    &:before {
                        content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjMTlBQTMyIiBkPSJNOS41MjQuMjhMNC4xMTMgNS42OTFsLTIuNDgtMi40OEEuOTU3Ljk1NyAwIDAwLjI4IDQuNTY0TDMuNDM3IDcuNzJhLjk1Ny45NTcgMCAwMDEuMzUzIDBsNi4wODctNi4wODdBLjk1Ny45NTcgMCAwMDkuNTI0LjI4eiIvPjwvc3ZnPg==");
                        width: 11px;
                    }
                }

                &.weak {
                    color: #f4a020;

                    &:before {
                        content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjRjRBMDIwIiBkPSJNOS41MjQuMjhMNC4xMTMgNS42OTFsLTIuNDgtMi40OEEuOTU3Ljk1NyAwIDAwLjI4IDQuNTY0TDMuNDM3IDcuNzJhLjk1Ny45NTcgMCAwMDEuMzUzIDBsNi4wODctNi4wODdBLjk1Ny45NTcgMCAwMDkuNTI0LjI4eiIvPjwvc3ZnPg==");
                        width: 11px;
                    }
                }
            }
        }
    }

    //--------best seller tag--------
    .best-seller-tag {
        border-radius: 8px;
        background-color: #FFD100;
        color: var(--creator-lms-heading-color);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 5px 9px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

}