.body__form-header-search-btn--suggest:disabled {
    opacity: 0.2;
}

.body__form-header-group-admin-btn-space .dropdown-toggle:focus {
    box-shadow: none !important;
}

.body__paragraph-text {
    color: var(--white-color);
    margin: 0px;
    text-align: center;
}

.body__link-text {
    color: var(--white-color);
    text-decoration: none;
}

.body__link-text:hover {
    color: var(--red-color);
}

/* The message box is shown when the user clicks on the password field */
#message {
    display: none;
}

#message h1 {
    font-family: "Montserrat", sans-serif;
    margin: 0px;
    color: var(--white-color);
    font-size: 16px;
    display: inline;
}

#message p {
    margin: 0px;
    color: var(--white-color);
    display: inline;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: var(--green-color);
    margin: 0px;
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: var(--red-color);
    margin: 0px;
}

/* register-account-page */
.body__register-account-space {
    background-image: url(../image/register_account_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
}

.body__register-account-space-filter {
    background: var(--form-bg);
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: inherit;
}

.body__register-account-content-icon-space {
    height: 80px;
    aspect-ratio: 1/1;
    margin: 0px auto;
    position: relative;
}

.body__register-account-content-icon {
    height: 100%;
    border-radius: 50%;
}

.body__register-account-content-status-icon-space {
    height: 30%;
    aspect-ratio: 1/1;
    background: var(--brown-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: 70%;
    left: 70%;
}

.body__register-account-content-status-icon {
    font-size: 1em;
    color: var(--white-color);
    line-height: normal;
}

.body__register-account-content-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--white-color);
    text-align: center;
    letter-spacing: 2px;
    margin: 28px 0px 40px 0px;
}

.body__register-account-content-form-space {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 200px;
}

.body__register-account-content-form-input-space {
    height: 50px;
    width: 100%;
    border-radius: 4px;
    display: flex;
    background: var(--white-color);
    align-items: center;
}

.body__register-account-content-form-input-space--disable {
    background: var(--disable-bg-color);
}

.body__register-account-content-form-input-icon-space {
    width: 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40%;
    border-right: 1.6px solid var(--brown-color);
}

.body__register-account-content-form-input-icon-space--change-style {
    width: 14%;
    height: 100%;
    border: none;
}

.body__register-account-content-form-input {
    width: 74%;
    border: none;
    padding: 0px 10px;
    background: none;
}

.body__register-account-content-form-input:disabled {
    background: none;
    color: var(--white-color);
}

.body__register-account-content-form-input::placeholder {
    font-size: 16px;
    line-height: normal;
    font-family: "Montserrat", sans-serif;

}

.body__register-account-content-form-input-icon {
    font-size: 1rem;
    color: var(--brown-color);
}

.body__register-account-content-form-input-icon--disable {
    color: var(--white-color);
}

.body__register-account-content-form-input-icon-space--disable {
    border-right: 1px solid var(--white-color);
}

.body__register-account-content-form-input-icon-confirm-psw {
    height: 21px;
}

.body__register-account-content-form-submit-btn {
    height: 50px;
    padding: 0px 30px;
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    background: var(--pink-color);
    color: var(--white-color);
    border: none;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
}

.body__register-account-content-form-submit-btn:hover {
    border: 2px solid var(--pink-color);
    background: var(--white-color);
    color: var(--pink-color);
}

/* registration-completed-account-page */
.body__register-account-content-link-home-text {
    font-size: 20px;
    color: var(--white-color);
    text-underline-offset: 7px;
}

.body__register-account-content-link-home-text:hover {
    color: var(--orange-color);
}

.body__register-account-content-link-home-text-space {
    width: 100%;
    text-align: center;
}

/* body__business-form-space */
.body__business-form-space {
    width: 100%;
    background-image: url(../image/register_account_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
}

.body__business-form-space-filter {
    width: 100%;
    background: var(--form-bg);
    min-height: inherit;
}

/* 9:28 */

.body__form-header-image {
    height: 60px;
    min-width: 60px;
}

.body__form-header-group-admin {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.body__form-header-group-admin-setting-icon {
    height: 20px;
    cursor: pointer;
}

.body__form-header-group-admin-setting-icon:hover {}

.fa-bell {
    cursor: pointer;
}

.body__form-header-group-admin-avatar-icon {
    height: 40px;
    border-radius: 50%;
}

.body__form-header-search-space {
    border-top: 2px solid var(--white-color);
    border-bottom: 2px solid var(--white-color);
}

.body__form-header-search {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.body__form-header-group-admin-btn-space {
    background: none;
    border: none;
    order: 1;
}

.body__form-header-group-admin-dropdown-menu {
    top: 12% !important;
}

.body__form-header-group-admin-dropdown-menu .dropdown-item {
    letter-spacing: 0px;
    font-weight: 500;
}

.body__form-header-group-admin-dropdown-menu .dropdown-item:hover {
    background: var(--disable-bg-color);
    color: var(--white-color);
}

.body__form-paragraph-text {
    order: 2;
    margin: 0px;
    color: var(--white-color);
    font-weight: 500;
}

.body__business-form-space label {
    font-size: 16px;
    color: var(--white-color);
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.body__form-input-field-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.body__form-input-field-box input {
    height: 38px;
    padding: 0px 10px;
    border-radius: 4px;
    border: none;
}

.body__form-input-field-box input:disabled {
    color: var(--white-color), #fff;
}

.body__form-input-field-box select {
    padding: 0px 10px;
    height: 38px;
    border-radius: 4px;
    border: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}

.body__form-input-field-box select:disabled {
    background: var(--disable-bg-color);
    color: var(--white-color);
}

.body__form-input-field-box option {
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
}

.body__form-header-search-btn {
    height: 40px;
    border-radius: 4px;
    border: none;
    background: var(--pink-color);
    color: var(--white-color);
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    margin-top: 10px;
    letter-spacing: 0.2px;
}

.body__form-header-search-btn:hover {
    border: 2px solid var(--pink-color);
    color: var(--pink-color);
    background: var(--white-color);
}

.body__form-content {}

/* form-content  */
.body__form-content-search-domain-space {
    width: 100%;
    border: 1.6px solid var(--white-color);
    border-radius: 4px;
}


.body__form-content-search-domain-field-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white-color);
    height: 40px;
    border-radius: 4px;
}

.body__form-content-search-domain-field-input input {
    width: 100%;
    border: none;
}

.body__form-content-search-domain-field-input p {
    margin: 0px;
    padding: 0px 12px;
    font-weight: 600;
}

.body__form-content-search-domain-field-input i {
    padding: 0px 12px;
}

.body__form-content-search-domain-extra-information-ndk p {
    color: var(--white-color);
    margin: 0px;
}

.body__form-content-search-domain-extra-information-ndk p span {
    color: var(--pink-color);

}

.body__form-header-search-btn--suggest {
    width: 100%;
    margin: 0px;
    background: var(--white-color);
    color: var(--black-color);
}

.body__form-header-search-btn--check {
    width: 100%;
    margin: 0px;
    background: var(--red-color);
}

.body__form-header-search-btn--suggest:hover {
    background: var(--black-color);
    color: var(--white-color);
    border: 2px solid var(--white-color);
}

.body__form-header-search-btn--check:hover {
    background: var(--white-color);
    color: var(--red-color);
    border: 2px solid var(--red-color);
}

.body__form-header-search-btn--check:hover a {
    color: var(--red-color);
}


.body__form-content-search-domain-checkbox-space input {
    margin: auto 8px auto 0px;
}


.body__form-content-search-domain-alert-message {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--white-color);
    display: none;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--white-color);
}

.body__form-content-search-domain-alert-message p {
    color: var(--white-color);
    margin: 0px;
    font-size: 18px;
}

.body__form-content-title {
    font-size: 18px;
    color: var(--white-color);
    text-align: center;
    margin-bottom: 0px;
    font-weight: 600;
    padding-bottom: 12px;
}

.body__form-input-field-box-can-edit {
    width: 100%;
    display: flex;
    height: auto;
    background: var(--white-color);
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.body__form-input-field-box-can-edit input {
    width: 100%;
}

.body__form-input-field-box-can-edit i {
    padding-right: 10px;
}

textarea:focus,
input:focus {
    outline: none;
}

.body__form-content-submit-btn {
    height: 40px;
    width: 140px;
    margin: 0px auto;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.body__form-content-submit-btn:hover {
    background: var(--black-color);
    color: var(--white-color);
    border: 2px solid var(--white-color);
}

.body__form-content-search-domain-extra-information {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 4px;
    padding-top: 12px;
}

.body__form-content-search-domain-extra-information input {
    vertical-align: middle;
    background: none;
    border: none;
    color: var(--pink-color);
    font-weight: 500;
    font-size: 16px;
}

.body__form-content-search-domain-extra-information--service {
    column-gap: 16px;
}

.body__form-content-search-domain-extra-information--service input {
    vertical-align: middle;
}

.body__form-content-search-btn {
	height: 40px;
    width: 140px;
    margin: 19px 0px 0px 0px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: linear-gradient(90deg, #DA2128 0%, #ED6C30 100%);
    color: white;
}

.body__form-content-search-btn:hover {
    background: var(--black-color);
    color: var(--white-color);
    border: 2px solid var(--white-color);
}

.body__form-content-customer-infor {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.body__register-account-header {
    padding: 0px 0px 40px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.body__register-account-header-image {
    height: 80px;
}

.body__register-account-header-text-space {
    display: none;
}

.body__register-account-content-form-extra-login {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
    column-gap: 8px;
}

.body__register-account-content-form-extra-login a {
    color: var(--white-color);
}

.body__register-account-content-form-extra-login a:hover {
    color: var(--pink-color);
}

.body__register-account-content-form-extra-login-remember-account {
    display: flex;
    gap: 8px;
    color: var(--white-color);
}

.body__domain-list-table-space {
    border-top: 2px solid var(--white-color);
}

.table-bordered {
    border-radius: 4px;
    overflow: hidden;
}

th {
    vertical-align: top;
}

.tableexport-caption .button-default {
    height: 40px;
    width: 140px;
    margin-top: 20px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.tableexport-caption .button-default:hover {
    background: var(--black-color);
    color: var(--white-color);
    border: 2px solid var(--white-color);
}

.body__form-content-submit-btn--export-file {
    margin-top: 20px;
    margin-left: auto;
    margin-right: 0px;
}

/* error page */
.body__error-page-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    max-width: 600px;
}

.body__error-page-space h1 {
    font-size: 80px;
    color: var(--red-color);
    font-weight: 500;
}

.body__error-page-title {
    font-size: 30px;
    color: var(--white-color);
    padding: 20px 0px 30px 0px;
    letter-spacing: 2px;
    text-align: center;
}

.body__error-page-content {
    font-size: 18px;
    color: var(--white-color);
    text-align: center;
    line-height: 26px;
}

.body__error-page-content-link {
    color: var(--red-color);
    text-underline-offset: 3px;
}

.body__error-page-content-link:hover {
    color: var(--white-color);
}

.d-md-flex {
    color: var(--white-color);
}

/* custom library */
.collapse-bg--custom {
    background: var(--white-color);
}

.outnav--custom::after {
    border-top: .3em solid var(--white-color);
}

.outnav--custom:hover::after {
    border-top: .3em solid var(--orange-color);
}

.outnav--custom.show::after {
    border-top: .3em solid var(--orange-color);
}

.dropdown-menu.show {
    min-width: 200px;
}

.dropdown--custom {
    position: absolute;
    height: 70px;
    right: 0;
    top: 0;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}




/* Long-width-screen */
@media screen and (min-width:992px) {

    .body__form-paragraph-text {
        order: 1;
    }

    .body__form-header-group-admin-btn-space {
        order: 2;
    }

    /* Accout-page */
    .body__register-account-space-filter {

        align-items: center;
    }

    .body__register-account-content-icon-space {
        height: 120px;
    }

    .body__register-account-content-text {
        font-size: 20px;
    }



    /* body__business-form-space */

    .body__form-header-group-admin-avatar-icon {
        height: 46px;
    }

    .body__form-header-group-admin-setting-icon .fa-bell {
        height: 30px;
        cursor: pointer;
    }

    .body__register-account-header-text-space {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: var(--white-color);
        font-weight: 600;
        font-size: 18px;
    }

    .body__register-account-content-status-icon {
        font-size: 1.2em;
    }

    .body__register-account-content-form-space {
        width: 500px;
    }

    .body__register-account-content {
        padding: 60px 0px 120px 0px;
    }

    .body__register-account-content-form-input-icon-space {
        width: 10%;
    }

    .body__register-account-content-form-input-icon-space--change-style {
        width: 10%;
    }

    .body__register-account-content-form-input {
        width: 80%;
    }


}

/* short-width-screen */
@media screen and (min-width:540px) and (max-width:991px) {
    .body__register-account-content-form-input-icon-space {
        width: 10%;
    }

    .body__register-account-content-form-input-icon-space--change-style {
        width: 10%;
    }

    .body__register-account-content-form-input {
        width: 80%;
    }

    .body__register-account-content-form-space {
        width: 500px;
    }
}

@media screen and (min-width:769px) {
    .dropdown--custom {
        width: auto;
    }

    .collapse-bg--custom {
        background: transparent;
    }

    /* custom library */


    .dropdown-toggle::after {
        border-top: .3em solid var(--white-color);
    }

    .nav-text--custom:hover::after {
        border-top: .3em solid var(--orange-color);
    }

    .nav-text--custom.show::after {
        border-top: .3em solid var(--orange-color);
    }


    .nav-text--custom {
        color: var(--white-color);
    }

    .navbar-nav .nav-text--custom.active,
    .navbar-nav .nav-text--custom.show {
        color: var(--orange-color) !important;
    }

    .nav-text--custom:hover {
        color: var(--orange-color) !important;
    }

    .nav-text--custom:focus {
        color: var(--orange-color);
    }
}