.navbar-nav>li>a,
a.navbar-brand {
    color: #3db30f !important;
}
    /* 目前該區域都套用這裡的CSS 我直接更改 */
a {
    color: #2549ff;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #00188d;
    text-decoration: underline;
}

a.navbar-brand {
    width: 138px;
}

.r-welcome-align {
    width: 92%;
}

.r-pretty-login-page>.r-controls {
    background: white;
}

.r-pretty-login-page>.r-sideimage {
    background: #f2f2f2;
}

.bs-welcome-item {
    width: 20%;
}

.dropdown-menu>li>a:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: #3bd18a;
}

.navbar-default .navbar-nav>li>a {
    color: #3db30f;
}

.r-topbar-page {
    width: 100%;
    height: 100%;
    max-width: 1100px;
    min-height: 100vh;
    padding: 0;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
}

[data-pageid="1"][data-itemid="simple_grid_field7"][data-record-id="4"] .r-images {
    width: 100%;
    /* 讓圖片寬度符合表格寬度 */
    height: auto;
    /* 讓圖片高度自動調整以維持比例 */
    object-fit: contain;
    /* 讓圖片保持原始比例並且符合容器大小 */
    margin: auto;
    /* 讓圖片在容器內置中 */
}

@media print,
(min-width: 768px) {
    [data-pageid="1"][data-itemid="simple_grid_field12"][data-record-id="4"] .r-images {
        width: 300px;
        height: 164px;
    }
}

.r-images {
    width: auto;
    height: auto;
}

@media print,
(min-width: 768px) {

    [data-pageid="1"][data-itemid="simple_grid_field12"][data-record-id="4"] .r-images {
        width: 300px;
        height: 150px;
    }
}

img {
    vertical-align: sub;
}

[data-hidden][data-hidden][data-hidden][data-hidden][data-hidden] {
    display: none;
}

.r-masonry>div>div>img {
    object-fit: cover;
    width: 100%;
    /* height: unset; */
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    text-decoration: none;
    color: #fff;
    background-color: #3db30f;
}

.navbar {
    min-height: 67px;
    color: #38a40e;
}

.navbar .btn.btn.btn .caret {
    border-top-color: #38a40e;
}

.navbar .btn.btn.btn {
    color: #3db30f;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.modal-header.ui-draggable-handle {
    background-color: #058914;
    color: white;
    font-size: larger;
}

.swal-button {
    background-color: #179107;
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    margin: 0;
    cursor: pointer;
}

.swal-button:not([disabled]):hover {
    background-color: #40e72b;
}

.swal-button--cancel:not([disabled]):hover {
    background-color: #40e72b;
}

td.r-ori-vert>span[data-itemid="simple_grid_field12"] {
    text-align: center;
}

@media screen and (max-width: 767px) {
    tr span[data-itemtype="grid_field"] div.r-images.r-masonry {
        height: 50vw !important;
        width: 50vw !important;
    }
}

tr span[data-itemtype="grid_field"] div.r-images.r-masonry {
    height: 300px !important;
    width: 300px !important;
}

img.product_view_class {
    width: -webkit-fill-available !important;
}

    /* 統一 nav 樣式 */
    img {
      max-width: 100%;
      height: auto;
    }

    .r-topbar-page .r-topheader .navbar {
      width: 100%;
      position: relative;
    }

    .r-topbar-page [data-location=supertop]>[data-cellid][data-cellid][data-cellid] a[data-itemtype=logo] {
      width: 100%;
      max-width: 60px;
      padding: 5px 0;
      transition: .3s;
    }

    /* 通知鈴鐺 */
    .r-topbar-page .r-topheader .navbar span.navbar-form.r-align-right.navbar-collapse {
      position: absolute;
      top: 10px;
      right: 50px;
      width: unset;
      border: unset;
    }

    @media (max-width: 767px) {
      body nav.navbar button.navbar-toggle {
        position: absolute;
        right: 0px;
      }

      .r-topbar-page .r-topheader .navbar span.navbar-form.r-align-right.navbar-collapse {
        top: 0;
      }
    }

    @media (max-width: 520px) {
      .r-topbar-page [data-location=supertop]>[data-cellid][data-cellid][data-cellid] a[data-itemtype=logo] {
        width: 100%;
        max-width: 50px;
        padding: 10px 0;
      }
    }

    nav.navbar span[data-itemid=logo] {
      width: auto;
      min-width: 70px;
      margin: 0 80px 0 0;
    }

    [data-location=supertop]>[data-itemtype=menu] {
      padding: 0 0 0 5px !important;
    }

    .navbar .navbar-nav>li>a {
      padding: 8px 5px;
    }

    nav.navbar ul[data-itemtype=menu] li a {
      padding: 10px 5px;
      margin: 0;
    }

    .r-topbar-page .r-topheader .navbar span.navbar-form.r-align-right.navbar-collapse {
      position: relative;
      top: 0px;
      right: -10px;
    }

    /* 鈴鐺 */
    .r-topbar-page .r-topheader .navbar span.navbar-form.r-align-right.navbar-collapse[data-itemid="notifications"] {
      padding: 0;
      margin: 0 0 0 20px;
    }

    nav.navbar span.navbar-form button.btn {
      font-size: 18px;
      padding: 10px;
    }


    @media (max-width: 767px) {
      .r-topbar-page [data-location=supertop]>[data-cellid][data-cellid][data-cellid] ul {
        padding: 0 10px 0;
        margin: 0;
      }

      /* 鈴鐺 */
      .r-topbar-page .r-topheader .navbar span.navbar-form.r-align-right.navbar-collapse[data-itemid="notifications"] {
        position: absolute;
        top: 12px;
        right: 70px;

      }

      /* 使用者 */
      .r-topbar-page .r-topheader .navbar span.navbar-form.r-align-right.navbar-collapse[data-itemid="username_button"] {
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        padding: 0 10px 0;
        margin: 0 0 10px 0;
      }
    }

    @media (max-width: 520px) {
      .r-topbar-page [data-location=supertop]>[data-cellid][data-cellid][data-cellid] a[data-itemtype=logo] {
        width: 100%;
        max-width: 50px;
        padding: 10px 0;
      }
    }