:root {
    --gray: #f3f4f6;
    --gray-hover: #e2e2e2;
    --white: #fff;
    --white-hover: #f0f0f0;
    --gray-dark: #959595;
    --gray-dark-hover: #a7a7a7;
    --gray-darker: #4b4b4b;
    --gray-darker-hover: #575757;
    --text-gray: #adadad;
    --black: #000;
    --red-validate: #ff0000;
    --text-orange: #ff6b00;
    --dark-blue: #122b46;
    --dark-blue-hover: #1c3b5f;
    --gold: #ae8d68;
}

/*=== Hide the arrow up/down input number ===*/
/* Chrome, Safari, Edge, Opera */
.hide-up-down::-webkit-outer-spin-button,
.hide-up-down::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hide-up-down {
    -moz-appearance: textfield;
}
/*=== End of Hide the arrow up/down input number ===*/

/*Make black arrow accordion bootstrap*/
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/*End of Make black arrow accordion bootstrap*/

/* eden */
.eden-bg-dark-blue {
    background-color: var(--dark-blue);
}

.eden-text-gold {
    color: var(--gold);
}

.eden-bg-gold {
    background-color: #f4efea;
}

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

.eden-bg-dark-blue {
    background-color: var(--dark-blue);
}

    .eden-btn-dark-blue:hover {
        background-color: var(--dark-blue-hover);
    }

.eden-separate-line {
    border-bottom: 1px solid #f1f2f3 !important;
}

.eden-separate-card {
    border-bottom: 8px solid #f1f2f3 !important;
}

.eden-rounded-top {
    border-radius: 16px 16px 0 0;
}

.eden-modal-fixed-bottom {
    position: absolute;
    bottom: 0;
}

.eden-modal {
    width: 100%;
    margin: auto;
    height: 100%;
}

.eden-radio {
    accent-color: #122B46;
    width: 20px;
    height: 20px;
}


.eden-check {
    accent-color: #122B46 !important;
    width: 20px;
    height: 20px;
    min-width: 20px;
}

.eden-btn-disabled {
    background-color: #F1F2F3;
    color: #A3A5AE !important;
}

/* Eden font size, font weight, text color, background color*/
.eden-fs-10 {
    font-size: 10px !important;
}

.eden-fs-11 {
    font-size: 11px !important;
}

.eden-fs-12 {
    font-size: 12px !important;
}

.eden-fs-14 {
    font-size: 14px !important;
}

.eden-fs-17 {
    font-size: 17px !important;
}

.eden-fs-18 {
    font-size: 18px !important;
}

.eden-fs-20 {
    font-size: 20px !important;
}

.eden-fs-24 {
    font-size: 24px !important;
}

.eden-fs-30 {
    font-size: 30px !important;
}

.eden-fw-400 {
    font-weight: 400 !important;
}

.eden-fw-500 {
    font-weight: 500 !important;
}

.eden-fw-600 {
    font-weight: 600 !important;
}

.eden-fw-700 {
    font-weight: 700 !important;
}

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

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

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

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

.border-color-gray {
    border: 0.5px solid var(--gray);
}

.bg-landing-page-success {
    background-color: #EEFAF5;
}
/* End of Eden font size, font weight, text color, background color */


/* Eden form control */
input {
    font-size: 14px !important;
}

    input::placeholder {
        font-size: 14px;
        color: var(--text-gray) !important;
    }

textarea::placeholder {
    font-size: 14px;
    color: var(--text-gray) !important;
}

.eden-fs-14 > option {
    font-size: 14px !important;
}

.eden-fs-14 select {
    font-size: 14px !important;
}
/* End of Eden form control */


hr.hr-white-space {
    position: relative;
    border: none;
    height: 1px;
    background: #000;
    opacity: 0.25;
}

    hr.hr-white-space::before {
        content: "";
        display: inline-block;
        background: #fff;
        color: #000;
        border-radius: 30rem;
        padding: 0.2rem 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

a.no-decoration:link,
a.no-decoration:visited,
a.no-decoration:hover,
a.no-decoration:active {
    text-decoration: none;
}

ul.no-list-style {
    list-style-type: none;
}

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

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

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

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

    .btn-gray-dark:hover {
        background-color: var(--gray-dark-hover);
        color: var(--white);
    }

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

    .btn-gray-darker:hover {
        background-color: var(--gray-darker-hover);
        color: var(--white);
    }

.btn-white {
    background-color: var(--white);
    border: 1px solid #e1e2e5;
}

    .btn-white:hover {
        background-color: var(--white-hover);
        border: 1px solid #e1e2e5;
    }

.dock-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.text-pre-wrap {
    white-space: pre-wrap !important;
}

/*.mobile-container {
    max-width: 430px;
}*/
/* home page */
.message-container {
    width: 100%;
    white-space: nowrap;
    overflow: auto;
}

.message-card {
    display: inline-block;
    width: 160px;
    height: 220px;
}

.message-content {
    width: 100%;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
}

.message-text {
    color: #5e4c38;
    height: 125px;
}

.message-writer {
    color: #ae8d68;
}

.flower-container {
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    padding-top: 2rem;
}

.flower-card {
    display: inline-block;
    width: 146px;
}

.flower-card-content {
    position: relative;
    height: 190px;
    width: 160px;
    border: 1px solid #f1f2f3;
}

.flower-image {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: -3rem;
}

.flower-image > img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.flower-sender-message {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50px;
    width: 100%;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
}

.donation-account-container{
    text-align: center;
}

.donation-item {
    display: inline-block;
    border: 1px solid #C1C1C1;
    border-radius: 10px;
    width: 31%;
    margin-bottom: 6px;
    padding: 10px 10px 10px 10px;
}

.donation-item:hover {
    cursor: pointer;
}

.mx-item{
    margin-left: 3px;
    margin-right: 3px;
}

/* buy page */
.icon-check {
    height: 25px;
    width: 25px;
    text-align: center;
}

/* order page */
.message-example-list li:hover {
    background-color: var(--white-hover);
    cursor: pointer;
}

.black-dot-23 {
    height: 23px;
    width: 23px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--gray);
}

.white-dot-23 {
    height: 23px;
    width: 23px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #c4c6cd;
}

.white-dot-20 {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #c4c6cd;
}

.black-dot-check {
    height: 20px;
    width: 20px;
    background-color: #122B46;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--gray);
    background-image: url(../img/white-check-icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

.table-bank td:hover {
    background-color: var(--white-hover);
    cursor: pointer;
}

.table-bank td div {
    padding-top: 6px;
    padding-bottom: 6px;
}

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

/* Message write */
#text-area-condolence-message {
    position: relative;
}

#count-character {
    position: absolute;
    right: 10px;
    bottom: 5px;
}

.border-top-thin {
    border-top: 1px solid #384D64;
}

/* Product list */
.active-tab {
    border-bottom: 3px solid #000 !important;
}

.bg-accordion {
    background-color: #f9f7f4;
}

/* Product detail */
.btn-quantity {
    width: 32px;
    height: 32px;
}