a {
    text-decoration: none;
}

.required-badge {
    border-radius: 12px;
    background-color: var(--bag-req-bg-color);
    color: var(--bag-req-text-color);
    font-size: var(--fsize-9);
    padding: 5px 15px;
}

.border-bottom-dashed {
    border-bottom: 1px dashed var(--border-color);
}
.border-top-dashed {
    border-top: 1px dashed var(--border-color);
}

body.content-no-bars>header,
body.content-no-bars>.wapper-bottom-nav {
    display: none;
}

body.content-no-bars-footer>.wapper-bottom-nav {
    display: none;
}

.fs-medium {
    font-size: var(--fsize-medium-under);
}

.fs-small {
    font-size: var(--fsize-small);
}

.fs-large {
    font-size: var(--fsize-large);
}

.btn-orange {
    background-color: var(--btn-color-orange);
    color: var(--btn-text-color);
}

.btn-blue {
    background-color: var(--btn-color-blue);
    color: var(--btn-text-color);
}

.btn-gray {
    background-color: var(--btn-color-gray);
    color: var(--btn-text-color);
}

.btn-white {
    background-color: var(--btn-color-white);
    color: var(--text-color-label);
}

.btn-green {
    background-color: var(--btn-color-green);
    color: var(--btn-text-color);
}
.btn-green-text {
    background-color: transparent;
    color: var(--btn-color-green);
}
.btn.radius-10 {
    border-radius: 10px !important;
}
.btn.radius-8 {
    border-radius: 8px !important;
}
.btn.padding-5-7,
.btn.padding-5-10,
.btn.padding-7,
.btn.padding-7-10,
.btn.padding-7-15 {
    padding: 7px 15px !important;
    border-radius: 10px !important;
    font-size: var(--fsize-15);
    font-family: var(--font-family);
    font-weight: 600;
    line-height: var(--line-height-20);
    word-wrap: break-word;
    padding: 5px 8px;
}
.btn.padding-7-10 {
    padding: 7px 10px !important;
}
.btn.padding-7 {
    padding: 7px 7px !important;
}
.btn.padding-5-7 {
    padding: 5px 7px !important;
}
.btn.padding-5-10 {
    padding: 5px 10px !important;
}
.link-goto,
.link-text {
    display: flex;
    color: var(--text-color-green);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-16);
    word-wrap: break-word;
    white-space: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    text-align: left;
    text-decoration: none;
}
.link-goto .link-text {
    text-align: right;
    margin-right: 0;
    white-space: nowrap;
}
.link-goto .link-img {
    display: inline-flex;
    margin-left: 5px;
    align-items: center;
}
.btn-violet {
    background-color: var(--btn-color-violet);
    color: var(--btn-text-color);
}

.btn-red {
    background-color: var(--btn-color-red);
    color: var(--btn-text-color);
}

.bg-transparent {
    background-color: transparent;
}

.btn-orange:hover,
.btn-orange {
    background-color: var(--btn-color-orange) !important;
    color: var(--btn-text-color);
}

.btn-blue:hover,
.btn-blue {
    background-color: var(--btn-color-blue) !important;
    color: var(--btn-text-color);
}

.btn-gray:hover,
.btn-gray {
    background-color: var(--btn-color-gray) !important;
    color: var(--btn-text-color);
}
.btn-white-border-radius-green,
.btn-white-border-radius-green:hover,
.btn-white-border-radius-green:active,
.btn-white-padding-radius,
.btn-white-padding-radius:active,
.btn-white-padding-radius:hover,
.btn-white-padding,
.btn-white-padding:active,
.btn-white-padding:hover,
.btn-white,
.btn-white:active,
.btn-white:hover {
    background-color: var(--btn-color-white) !important;
    color: var(--text-color-green) !important;
}
.btn-white-border-radius-green > .btn-text,
.btn-white-border-radius-green:hover > .btn-text,
.btn-white-border-radius-green:active > .btn-text,
.btn-white-padding-radius > .btn-text,
.btn-white-padding-radius:active > .btn-text,
.btn-white-padding-radius:hover > .btn-text,
.btn-white-padding > .btn-text,
.btn-white-padding:active > .btn-text,
.btn-white-padding:hover > .btn-text,
.btn-white > .btn-text,
.btn-white:active > .btn-text,
.btn-white:hover > .btn-text {
    color: var(--text-color-green) !important;
}

.btn-green-border-radius-white,
.btn-green-border-radius-white:active,
.btn-green-border-radius-white:hover,
.btn-green-padding-radius,
.btn-green-padding-radius:active,
.btn-green-padding-radius:hover,
.btn-green-padding,
.btn-green-padding:active,
.btn-green-padding:hover,
.btn-green,
.btn-green:active,
.btn-green:hover {
    background-color: var(--btn-color-green) !important;
    color: var(--btn-text-color) !important;
    padding: 5px;
}
.btn-green-border-radius-white > .btn-text,
.btn-green-border-radius-white:active > .btn-text,
.btn-green-border-radius-white:hover > .btn-text,
.btn-green-padding-radius > .btn-text,
.btn-green-padding-radius:active > .btn-text,
.btn-green-padding-radius:hover > .btn-text,
.btn-green-padding > .btn-text,
.btn-green-padding:active > .btn-text,
.btn-green-padding:hover > .btn-text,
.btn-green > .btn-text,
.btn-green:active > .btn-text,
.btn-green:hover > .btn-text {
    color: var(--btn-text-color) !important;
}
.btn-white-padding,
.btn-green-padding {
    padding: 7px 10px 7px 10px;
}

.btn-green-padding-radius {
    border-radius: 4px;
}

.btn-white-border-radius-green,
.btn-border-radius-green,
.btn-green-border-radius-white,
.btn-border-radius-white {
    border-radius: 8px;
}
button.btn-green-border-radius-white {
    padding: 0px 0px 0px 0px !important;
}
.btn-green-border-radius-white > .btn-text,
.btn-green-border-radius-white:active > .btn-text,
.btn-green-border-radius-white:hover > .btn-text,
.btn-border-radius-white > .btn-text,
.btn-border-radius-white:active > .btn-text,
.btn-border-radius-white:hover > .btn-text,
.btn-border-white > .btn-text,
.btn-border-white:hover > .btn-text,
.btn-border-white:active > .btn-text {
    border: 1px dashed var(--border-color-white) !important;
    /*outline: 1px var(--border-color-white) dashed;*/
    /*outline-offset: -0.50px;*/
    text-align: center;
    margin: 5px !important;
    padding: 5px;
    color: var(--btn-text-color) !important;
    display: block !important;
}

.btn-padding-no-padding {
    padding: 0 0 0 0 !important;
}
.btn-padding-no-padding > .btn-text {
    margin-left: 4px !important;
    margin-right: 4px !important;
    display: block !important;
}
.btn-white-border-radius-green > .btn-text,
.btn-border-radius-green > .btn-text,
.btn-border-green > .btn-text {
    border: 1px dashed var(--border-color-green) !important;
    /*outline: 1px var(--border-color-green) dashed;*/
    /*outline-offset: -0.50px;*/
    text-align: center;
    margin: 5px;
    padding: 5px;
}

button.btn-green-border-radius-white.btn .btn-text,
.btn-green-border-radius-white.btn .btn-text {
    margin-left: 0px;
    margin-right: 0px;
    display: inline-block;
}
.btn-white-border-radius-green .btn-text,
.btn-border-radius-green .btn-text,
.btn-green-border-radius-white .btn-text,
.btn-border-radius-white .btn-text {
    border-radius: 6px;
}

.btn-border-grey > span,
.btn-border-grey > div {
    border: 1px dashed var(--border-color-white) !important;
    text-align: center;
    border-radius: 6px;
    margin: 5px;
    padding: 5px;
}

.text-green {
    color: var(--text-color-active);
}

.text-gray {
    color: var(--text-color-label);
}

.form-filter .box-form-submit,
.form-setting .box-form-submit {
    display: block;
    margin-top: 5px;
    padding: 10px;
}
.form-filter .box-form-submit > .btn-submit,
.form-setting .box-form-submit > .btn-submit {
    display: block;
    width: 100%;
    padding: 5px;
}
.form-filter .box-form-submit > .btn-submit > .btn-text,
.form-setting .box-form-submit > .btn-submit > .btn-text {
    font-size: var(--fsize-15);
    font-weight: 600;
    line-height: var(--line-height-20);
    word-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px;
}
.form-filter .box-form-submit .buttons,
.form-setting .box-form-submit .buttons {
    flex-direction: column;
    display: flex;
    margin-top: 20px;
}

.form-filter .box-form-submit .buttons .item-line,
.form-setting .box-form-submit .buttons .item-line {
    margin-top: 15px;
}
.form-filter .box-form-submit .buttons .item-line:first-child,
.form-setting .box-form-submit .buttons .item-line:first-child {
    margin-top: 0px;
}
.form-filter .box-form-submit .item-line button,
.form-filter .box-form-submit .item-line a[role="button"],
.form-setting .box-form-submit .item-line button,
.form-setting .box-form-submit .item-line a[role="button"] {
    /*height: 48px;*/
}
.form-filter .box-form-submit .item-line .btn,
.form-setting .box-form-submit .item-line .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
.form-filter .box-form-submit .item-line .btn > .btn-text,
.form-setting .box-form-submit .item-line .btn > .btn-text {
    font-size: var(--fsize-15);
    font-family: var(--font-family);
    font-weight: 600;
    line-height: var(--line-height-20);
    word-wrap: break-word;
    /*height: 40px;*/
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.form-filter .box-form-submit .item-line .btn.btn-goto > .btn-text,
.form-setting .box-form-submit .item-line .btn.btn-goto > .btn-text {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.my-120 {
    margin-top: 120px;
    margin-bottom: 120px;
}

.user-add-wapper,
.user-back-wapper {
    padding: 0 15px;
}

.user-add-wapper .wapper-btn {
    padding: 3px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    border-radius: 12px;
    background-color: var(--btn-color-green);
}

.user-back-wapper .wapper-btn {
    padding: 3px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid var(--btn-color-green);
}


.user-add-wapper .wapper-btn > .btn,
.user-add-wapper .wapper-btn > .btn:focus,
.user-add-wapper .wapper-btn > .btn:active,
.user-add-wapper button,
.user-add-wapper button:focus,
.user-add-wapper button:active {
    color: #fff;
    background-color: var(--btn-color-green);
    border: 1px dashed #fff;
    border-radius: 12px;
}


.user-back-wapper button,
.user-back-wapper button:focus,
.user-back-wapper button:active {
    color: var(--btn-color-green);
    background-color: #fff;
    border: 1px dashed var(--btn-color-green);
    border-radius: 12px;
}

.badge-danger {
    background-color: var(--badge-bg-color);
    color: var(--badge-text-color);
}

.btn-sharing-line {
    outline-offset: -0.50px;
    color: white;
    background-color: #06c725;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;

    height: 54px;
    border-radius: 8px;
    border-radius: 10px;
}
.btn-sharing-line > .btn-text {
    color: #82B697;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-sharing-line > .btn-text > img {
    margin-left: 10px;
}
.btn-sharing-line > .btn-text > .v-line {
    display: inline-block;
    width: 0px;
    height: 54px;
    outline: 1px rgba(0, 0, 0, 0.08) solid;
    outline-offset: -0.50px;
    margin-left: 15px;
}

.btn-sharing-line > .btn-text > .end-line {
    width: 50px;
    display: inline-block;
}
.btn-sharing-line > .btn-text > .btn-sub-text {
    flex-grow: 1;
    text-align: center;
    color: white;
    font-size: var(--fsize-15);
    font-family: var(--font-family-n);
    font-weight: 600;
    word-wrap: break-word;
}
.btn-sharing-line.btn-sharing-qrcode {
    background-color: #9E9E9E;
}
.btn-sharing-line.btn-sharing-qrcode > .btn-text {
    font-size: var(--fsize-15);
    font-family: var(--font-family-n);
    font-weight: 600;
    word-wrap: break-word;
}
.qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    aspect-ratio:1 / 1;
    max-width: 271px;
    max-height: 271px;
    margin: 15px auto;
    text-decoration: none;
}
.qr-text {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #494949;
}
.form-row .input-help {
    color: #000000;
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-16);
    word-wrap: break-word;
    margin-top: 15px;
    /*margin-bottom: 15px;*/
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.form-row .input-help > .dot {
    justify-content: flex-start;
    display: flex;
    width: 25px;
}
.form-row .input-help > .text {
    justify-content: flex-start;
    display: flex;
    flex-grow: 1;
    width: auto;
}
.form-row .input-help.empty {
    height: 0px;
    margin-bottom: 0px;
}


.dialog-sub-popup .modal-title {
    display: flex;
}

.dialog-sub-popup .left-title-icon {
    width: 75px;
    justify-content: left;
    text-align: left;
    flex-direction: row;
}

.modal-header .left-title-icon .btn-close {
    --bs-btn-close-bg: none;
    margin-left: 0px;
    display: inline-block;
}

.dialog-sub-popup .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}
.dialog-sub-popup .modal-title > .left-title-icon {
    display: flex;
    align-items: center;
    max-width: 65px;
    min-width: 50px;
    justify-content: flex-start;
    white-space: nowrap;
    width: auto;
}
.dialog-sub-popup .modal-title > .left-title-icon > a.btn-close {
    margin: -4px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.dialog-sub-popup .modal-title > .right-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    width: auto;
    min-width: 50px;
    max-width: 75px;
}
.dialog-sub-popup .modal-title > .center-title {
    text-align: center;
    white-space: nowrap;

    flex-grow: 1;
    width: auto;
    min-width: 0;
}

.dialog-sub-popup .left-title-icon .btn-close {
    display: inline-block;
    width: 75px;
    color: var(--text-color-white) !important;
    --bs-btn-close-opacity: 1.0;
    --bs-btn-close-hover-opacity: 1.0;
    --bs-btn-close-disabled-opacity: 1.0;
    --bs-btn-close-focus-shadow: none;
}
.dialog-sub-popup .left-title-icon .btn-close > img {
    height: 22px;
    margin-top: 2px;
}
.dialog-sub-popup .left-title-icon .btn-close > span.text {
    display: inline-block;
    color: var(--text-color-white) !important;
}
.dialog-sub-popup .left-title-icon .btn-close,
.dialog-sub-popup .left-title-icon .btn-ok-back {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.dialog-sub-popup .left-title-icon .btn-close:focus,
.dialog-sub-popup .left-title-icon .btn-close:active,
.dialog-sub-popup .left-title-icon .btn-ok-back:focus,
.dialog-sub-popup .left-title-icon .btn-ok-back:active {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}
.dialog-theme-white.dialog-sub-popup .left-title-icon .btn,
.dialog-theme-white.dialog-sub-popup .left-title-icon .btn > span,
.dialog-theme-white.dialog-sub-popup .left-title-icon .btn .text,
.dialog-theme-white.dialog-sub-popup .right-title .btn,
.dialog-theme-white.dialog-sub-popup .right-title .btn > span,
.dialog-theme-white.dialog-sub-popup .right-title .btn .text {
    color: var(--text-color) !important;
    text-align: left;
    font-size: var(--fsize-15);
    line-height: var(--line-height-20);
    font-weight: 400;
    height: 18px;
    align-items: center;
}

.dialog-sub-popup .center-title{
    display: flex;
    flex-grow: 1;
    justify-content: center;

    color: var(--text-color);
    text-align: center;
    font-size: var(--fsize-16);
    line-height: var(--line-height-22);
    font-weight: 400;
}

.dialog-sub-popup .right-title {
    width: 45px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10px;
}

.dialog-sub-popup .right-title .btn,
.dialog-sub-popup .right-title .btn > span {
    color: var(--text-color);
    text-align: right;
    font-size: var(--fsize-15);
    line-height: var(--line-height-22);
    font-weight: 500;
}
.dialog-theme-green.dialog-sub-popup .right-title .btn,
.dialog-theme-green.dialog-sub-popup .right-title .btn > span {
    color: var(--text-color-white) !important;
}


.dialog-sub-popup .modal-dialog {
    margin: 0 0 0 0;
    height: 100%;
}
.dialog-sub-popup .modal-dialog .modal-content {
    height: 100%;
}
.dialog-sub-popup .modal-header {
    padding: 10px 0px 5px 0px;
    background-color: var(--nav-bg-color);
}
.dialog-theme-white.dialog-sub-popup .modal-header {
    padding: 10px 0px 5px 0px;
    background-color: var(--bag-req-text-color);
}
.dialog-preview-image .modal-header .btn-close,
.dialog-theme-green.dialog-sub-popup .modal-title a.btn-close,
.dialog-theme-green.dialog-sub-popup .modal-title .text,
.dialog-theme-green.dialog-sub-popup .modal-title .title {
    color: var(--text-color-white) !important;
    font-size: var(--fsize-15);
    font-family: var(--font-family);
    font-weight: 500;
    line-height: var(--line-height-22);
    word-wrap: break-word;
}
.hidden {
    display: none !important;
}

.box-image-thumbnail {
    position: relative;
}
.btn-remove-image {
    background-image: url("/assets/design/svg/icon-remove-image.svg");
    background-repeat: no-repeat;
    background-size: contain contain;
    text-decoration: none;
    width: 20px;
    height: 21px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 5px;
}
.box-image-thumbnail > img {
    width: 100%;
    height: auto;
}

.list-group.grid-group {
    display: grid;
    gap: 10px;
    padding: 0 10px;
}
.list-group.grid-group > .list-group-item {
    width: 100%;
}
.list-group.grid-group > .list-group-item > .btn {
    display: block;
    width: 100%;
    height: 100%;
}
.list-group.grid-group > .list-group-item > .btn > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}
.list-group.grid-group-4-cols {
    grid-template-columns: repeat(4, 1fr);
}
.padding-bottom-30 {
    padding-bottom: 30px;
    width: 100%;
    display: block;
}
.select-groups {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0;
    gap: 10px;
}
.select-groups-date-time {
    gap: 30px;
    margin-left: 10px
}
.select-input {
    border: 0px solid transparent !important;
    width: auto;
    background-color: transparent !important;
    color: var(--text-color);
    font-size: var(--fsize-15);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-16);
    word-wrap: break-word;
}
.select-year {
    width: 70px;
}
.select-year-include-age {
    width: 130px;
}
.select-month {
    width: 60px;
}
.select-day {
    width: 60px;
}
.badge-label-18,
.badge-label {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 5px;
    align-items: center;
}
.badge-label-18 {
    line-height: var(--line-height-18);
    padding-bottom: 15px;
    border-bottom: 1px dashed #DEB478;
}
.badge-text {
    color: var(--text-color);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 600;
    line-height: var(--line-height-16);
    word-wrap: break-word;
    justify-content: flex-start;
    display: inline-flex;
    align-items: center;
}
.badge-text-green {
    color: var(--text-color-green);
    font-weight: 600;
    text-decoration: underline;
    word-wrap: break-word;
}
.badge-required {
    color: var(--text-color-white);
    font-family: var(--font-family-n);
    font-size: var(--fsize-9);
    font-weight: 600;
    line-height: var(--line-height-12);
    word-wrap: break-word;
    height: 16px;
    padding: 3px 6px 3px 6px;
    background: var(--badge-bg-color);
    border-radius: 4px;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}
.badge-extra {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.badge-text-center {
    color: var(--text-color);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-16);
    word-wrap: break-word;
}

.group-gift-icon {
    color: var(--text-color);
    font-family: var(--font-family);
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
}
.group-gift-icon .icon-text {
    font-size: var(--fsize-13);
    font-weight: 600;
    line-height: var(--line-height-16);
    word-wrap: break-word;
}
.group-gift-icon .btn-icon-image {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    min-width: 80px;
    min-height: 80px;
}
.group-form .group-gift-icon .btn-icon-image {
    /*background-color: #D9D9D9;*/
    width: 200px;
    height: 100px;
    align-items: center;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    position: relative;
}
.family-form .group-gift-icon .btn-icon-image > .icon-camera,
.group-form .group-gift-icon .btn-icon-image > .icon-camera {
    border-radius: 10px;
}
.family-form .group-gift-icon .btn-icon-image > .icon-camera-trans,
.group-form .group-gift-icon .btn-icon-image > .icon-camera-trans {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.group-gift-icon .btn-icon-image > .icon-gift {
    min-width: 80px;
    min-height: 80px;
}
.group-gift-icon .btn-icon-image > .icon-gift+.icon-camera {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 1;
    border-radius: 50%;
}

:focus-visible {
    outline: var(--bs-border-color) auto 1px !important;
}

.form-input-text {
    height: 44px;
    border-radius: 22px;
    border: 1px rgba(0, 0, 0, 0.2) solid;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.input-group-seach {
    position: relative;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.input-group-seach input[name="search"] {
    color: #212121;
    /* background-color: #9E9E9E; */
    background-color: rgba(158, 158, 158, 0.2);
    font-size: var(--fsize-15);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-20);
    word-wrap: break-word;
    border-radius: 15px;
    border-width: 0 0 0 0 !important;
    width: 100%;
    padding: 5px 15px;
}
.input-group-seach .input-voice {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 2;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0 0 0 0;
}
.input-group-seach .input-voice > img {
    width: 100%;
}
.form-group-input {
    border-radius: 15px;
    background-color: white;
    padding: 15px;
    margin-top: 30px;
    margin-left: 8px;
    margin-right: 8px;
}
.form-group-input > .row {
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
}
/*.form-group-input > .row*/
/*border-bottom: 1px dashed var(--border-color);*/

.form-group-input > .row:before {
    content: " ";
    position: absolute;
    top: 0px;
    left: 15px;
    right: 15px;
    height: 0px;
    border-top: 1px dashed var(--border-color);
}
.form-group-input > .row:first-child::before {
    border-top-width: 0;
}
.form-group-input .row-memo {

}
.form-group-input .memo-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 600;
    word-wrap: break-word;
    font-size: var(--fsize-13);
    line-height: var(--line-height-16);
    gap: 10px;
}

.form-group-input .row-memo .memo-title {
    border-bottom-width: 0px;
    padding-bottom: 10px;
}
.form-group-input .memo-title .align-left {
    color: var(--text-color);
    flex-grow: 1;
    justify-content: flex-start;
    width: auto;
}
.form-group-input .memo-title .align-right,
.form-group-input .memo-title .align-right > .btn {
    color: var(--btn-color-green) !important;
    justify-content: flex-end;
    width: 70px;
}
.form-group-input .memo-description {
    color: var(--text-color);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-18);
    word-wrap: break-word;
    justify-content: flex-start;
    display: flex;
    width: 100%;
}
.form-group-input .memo-description-area {
    background-color: rgba(0, 0, 0, 0.20);
    border-radius: 22px;
    padding: 0 0 0 0 !important;
    margin: 0 auto 15px auto !important;
}
.memo-description a{
    color: var(--text-color-green);
    text-decoration: none;
}
.form-group-input .memo-description-area .area-textarea {
    height: 156px;
    border-radius: 22px;
    position: relative;
    color: var(--text-color);
    font-size: var(--fsize-15);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-20);
    word-wrap: break-word;
    /* border: 1px solid #cbcbcb; */
    border: 1px solid var(--bs-border-color);
    width: 100%;
    padding: 7px;
}
.box-goto-setting-notification .notification {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    align-items: center;
}
.box-goto-setting-notification .notification .label {
    justify-content: flex-start;
    flex-grow: 1;
    color: var(--text-color);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 600;
    line-height: var(--line-height-16);
    word-wrap: break-word;
}
.box-goto-setting-notification .notification .sticky-switch {
    justify-content: flex-end;
}
.box-goto-setting-notification .buttons {

}
.box-goto-setting-notification .buttons > .btn {
    color: var(--text-color-green);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-16);
    word-wrap: break-word;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 0px;
    padding-right: 0px;
}
.group-controls .buttons {
    flex-direction: column;
    display: flex;
}
.group-controls .buttons .item-line {
    margin-top: 15px;
}
.group-controls .buttons .item-line:first-child {
    margin-top: 0px;
}
.group-controls .buttons .item-line .btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
.group-controls .buttons .item-line .btn-submit > .btn-text {
    vertical-align: middle;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
}
.box-goto-setting-notification .description {
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--fsize-13);
    line-height: var(--line-height-16);
    font-weight: 300;
}
.event-detail-page .box-form-delete {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.event-detail-page .btn-submit-delete {
    border-width: 0 0 0 0 !important;
    background-color: transparent !important;
}
.event-detail-page .btn-submit-delete > .btn-text {
    border-width: 0 0 0 0 !important;
}
.box-memo-detail .box-memo-detail-title {
    color: var(--text-color-green);
    font-size: var(--fsize-11);
    font-family: var(--font-family);
    font-weight: 600;
    line-height: var(--line-height-14);
    word-wrap: break-word;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}
.box-memo-detail .box-memo-detail-title .title {
    margin: 0 0 0 0;
    font-size: var(--fsize-11);
}
.box-memo-detail .box-memo-detail-body {
    margin-top: 15px;
    color: var(--text-color);
    font-size: var(--fsize-13);
    font-family: var(--font-family);
    font-weight: 300;
    line-height: var(--line-height-18);
    word-wrap: break-word;
    padding-bottom: 10px;
}

.tab-contents {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.tab-contents .tab-content {
    display: none;
    align-items: flex-start;
    width: 100%;
}
.tab-contents .tab-content .tab-items {
    width: 100%;
}
.tab-contents .tab-content.show {
    display: flex;
}

.text-color {
    color: var(--text-color) !important;
}
.label-color {
    color: var(--text-color-label) !important;
}
.gap-4 {
    gap: 4px !important;
}
.gap-5 {
    gap: 5px !important;
}
.gap-10 {
    gap: 10px !important;
}
.gap-15 {
    gap: 15px !important;
}
.gap-20 {
    gap: 20px !important;
}
.br-6 {
    border-radius: 6px !important;
}
.br-8 {
    border-radius: 8px !important;
}
.br-10 {
    border-radius: 10px !important;
}
.br-12 {
    border-radius: 12px !important;
}
.fs-9 {
    font-size: var(--fsize-9) !important;
}
.fs-11 {
    font-size: var(--fsize-11) !important;
}
.fs-13 {
    font-size: var(--fsize-13) !important;
}
.fs-14 {
    font-size: var(--fsize-14) !important;
}
.fs-15 {
    font-size: var(--fsize-15) !important;
}
.fs-16 {
    font-size: var(--fsize-16) !important;
}
.fs-17 {
    font-size: var(--fsize-17) !important;
}
.fs-18 {
    font-size: var(--fsize-18) !important;
}
.fs-20 {
    font-size: var(--fsize-20) !important;
}
.fs-22 {
    font-size: var(--fsize-22) !important;
}
.fs-24 {
    font-size: var(--fsize-24) !important;
}
.lh-9 {
    line-height: var(--line-height-9) !important;
}
.lh-10 {
    line-height: var(--line-height-10) !important;
}
.lh-11 {
    line-height: var(--line-height-11) !important;
}
.lh-12 {
    line-height: var(--line-height-12) !important;
}
.lh-13 {
    line-height: var(--line-height-13) !important;
}
.lh-14 {
    line-height: var(--line-height-14) !important;
}
.lh-15 {
    line-height: var(--line-height-15) !important;
}
.lh-16 {
    line-height: var(--line-height-16) !important;
}
.lh-17 {
    line-height: var(--line-height-17) !important;
}
.lh-18 {
    line-height: var(--line-height-18) !important;
}
.lh-20 {
    line-height: var(--line-height-20) !important;
}
.lh-22 {
    line-height: var(--line-height-22) !important;
}
.lh-24 {
    line-height: var(--line-height-24) !important;
}
.fw-300 {
    font-weight: 300 !important;
}
.fw-400 {
    font-weight: 400 !important;
}
.fw-600 {
    font-weight: 600 !important;
}
.box-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}
.box-column {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}
.box-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.box-fix {
    flex-grow: 1;
}
.box-fix-right {
    flex-grow: 1;
}
.box-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.box-fix.box-right {
    justify-content: flex-start;
}
.box-fix-right.box-right {
    justify-content: flex-end;
}
.dialog-sub-popup .box-group-filter {
    width: 100%;
}
.box-group-filter input.form-control {
    background-color: rgba(33, 33, 33, 0.15) !important;
    border-radius: 10px;
    height: 30px;
    border: 1px solid rgba(58, 158, 158, 0.2);
    background-repeat: no-repeat;
}
.box-group-filter input.form-control.icon-search {
    background-image: url('/assets/design/svg/icon-input-search.svg');
    background-size: 18px 18px;
    background-position: 5px 7px;
    padding-left: 24px;
}
.box-group-filter input.form-control.icon-micro {
    background: url('/assets/design/svg/icon-micro.svg') no-repeat right 4px top 5px;
    background-size: 18px 18px;
    padding-right: 24px;
}
.box-group-sort {
    flex-direction: row;
}
.box-group-sort > .form-select1 {
    border-width: 0 0 0 0 !important;
}






.box-memo-detail .box-images {
    display: grid;
    gap: 10px;
    padding: 0 0 0 0;
}
.box-memo-detail .box-images .btn-preview-image {
    display: inline-flex;
    width: 100%;
    height: 100%;
}
.box-memo-detail .box-images .btn-preview-image,
.box-memo-detail .box-images img {
    width: 100%;
    height: auto;
}
.box-memo-detail .box-images img {
    object-fit: cover;
    aspect-ratio: 1/1;
}

.box-memo-detail .box-images {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 12px;
}

.box-memo-detail .box-images img {
    border: unset;
    width: 100%;
    object-fit: cover;
    max-width: auto;
}

.visibility-hidden {
    visibility: hidden;
}

svg.btn-border {
    display: none;
}

@media (min-width: 481px) {
    /*.box-images {*/
    /*    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
    /*}*/
    .box-memo-detail .box-images img {
        max-width: 200px;
    }
}

@media screen and (max-width: 430px) {
    .fs-small {
        font-size: 0.8rem;
    }

    .fs-medium {
        font-size: 1rem;
    }

    .fs-large {
        font-size: 1.5rem;
    }
}