:root {
   --app-primary-color: #16a75c;
   --app-primary-light: #f0f9f4;
   --app-height-header: 75px;
   --app-secondary-color: red;
   --app-graylight-color: #f7f7fc;
}

body {
   font-family: 'Poppins', sans-serif;
}

@media screen and (min-width: 1200px) {
   .container {
      max-width: 1175px;
   }
}

.gutter-top-content {
   margin-top: var(--app-height-header);
}
.ua-bg-primary-light {
   background-color: var(--app-primary-light);
}

.ua-content {
   min-height: 375px;
}

/* breadcrumb */
.ua-breadcrumb .breadcrumb {
   background-color: transparent;
   margin-bottom: 0;
   padding: .5rem 0;
   border-radius: 0;
}
.ua-breadcrumb .breadcrumb-item > a {
   font-size: 14px;
   color: #5a5b75;
   font-weight: 500;
}
.ua-breadcrumb .breadcrumb-item.active {
   color: #9e9fb4;
}
.ua-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
   content: ">";
}

.ua-nav-tabs {
   border-bottom: 2px solid #dee2e6;
}
.ua-nav-tabs.is-lined .nav-link {
   border: 0;
   border-bottom: 2px solid transparent;
   padding: .65rem 1rem;
   font-weight: 500;
   color: #9e9fb4;
}
.ua-nav-tabs.is-lined .nav-item {
   margin-right: .5rem;
}
.ua-nav-tabs .nav-item.show .nav-link, 
.ua-nav-tabs .nav-link.active {
   color: var(--app-primary-color);
   border-bottom: 3px solid var(--app-primary-color);
   background-color: transparent;
}

.ua-tabs-wrapper > nav {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background-color: var(--app-graylight-color);
}

.bulletin-section {
   padding-top: 3rem;
   padding-bottom: 5rem;
}

.btn-app-theme {
   background-color: var(--app-primary-color);
   border-color: var(--app-primary-color);
}

.btn-app-theme-outline {
   background-color: transparent;
   border-color: var(--app-primary-color);
   color: var(--app-primary-color);
   border-width: 2px;
}

.btn-app-theme-outline:hover {
   background-color: var(--app-primary-color);
   border-color: var(--app-primary-color);
   color: #fff;
}

.ua-header {
   background-color: var(--app-primary-color) !important;
   min-height: var(--app-height-header);
}
.ua-header .nav-link {
   font-weight: 500;
   font-size: 13.5px;
}
.ua-header .navbar-nav .nav-link {
   padding: .875rem 1rem;
}
.ua-header.navbar-expand-lg .navbar-nav .nav-link {
   padding-left: 1rem;
   padding-right: 1rem;
}
.ua-header .right-action {
   --right-action-width: auto;
   padding: 6px 0 6px 15px;
   border-left: 1px solid #ffffff42;
   flex-basis: var(--right-action-width);
   max-width: var(--right-action-width);
}

.ua-banner-slider {
   position: relative;
   background-color: var(--app-primary-color);
   margin-top: var(--app-height-header);
   /* min-height: calc(100vh - var(--app-height-header) - 25px); */
   height: calc(100vh - var(--app-height-header) - 25px);
}

.ua-banner-slider .img-placed {
   clip-path: url(#svgImgPlaced);
   max-width: 100%;
}

.title-section > h3 {
   font-weight: 600;
   margin-bottom: 0;
   display: inline-block;
   border-bottom: 3px solid var(--app-primary-color);
   padding-bottom: 5px;
}

.bulletin-card {
   --bc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(0,0,0,.125);
   border-radius: 5px;
   box-shadow: var(--bc-shadow);
   transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.bulletin-card figure {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}
.bulletin-card figure > img {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
}
.bulletin-card .img-bulletin {
   height: 215px;
   width: 100%;
   object-fit: cover;
}
.bulletin-card .bc-date {
   color: #757575;
}
.bulletin-card .bc-title {
   font-size: 14px;
   text-align: left;
   color: #757575;
}
.bulletin-card:hover {
   --bc-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
   box-shadow: var(--bc-shadow);
}


.btn-float-open {
   background-color: var(--app-primary-color);
   color: #fff;
   position: absolute;
   bottom: 0;
   right: 0;
   margin-bottom: 2.5rem;
   margin-right: 1.25rem;
   z-index: 5;
   border-color: transparent;
   border-radius: 50px;
   padding: .35rem 1.25rem;
}

/*  DETAIL CONTENT  */
.ua-detail-content {
   position: relative;
   overflow: hidden;
}
.ua-detail-content::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 33.333%;
   height: 100%;
   /* height: 535px; */
   background-color: var(--app-graylight-color);
   display: block;
}
.ua-detail-content .is-content {
   position: relative;
   z-index: 2;
   background-color: #fff;
   padding-right: 2.875rem;
}
.ua-detail-content .is-content .small-subinfo {
   margin: 0;
}
.ua-detail-content .is-content .small-subinfo .info-item {
   color: #9e9fb4;
   font-size: 14px;
}
.ua-detail-content .is-content .small-subinfo .info-item.separator {
   line-height: 8px;
   vertical-align: middle;
}
.ua-detail-content .is-content .small-subinfo .info-item.separator .circ {
   font-size: 5px;
}
/* .ua-detail-content .is-content .image-info-wrapper::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: .2rem;
} */
.ua-detail-content .is-content .image-info-wrapper {
   border-radius: 7px;
}
.ua-detail-content .is-content .image-info-wrapper > img {
   border-radius: inherit;
}
.ua-detail-content .is-content .image-info-content {
   padding: 140px 30px 35px;
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(0, 0, 0) 100%);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
}
.small-info-item {
   font-size: 14px;
   color: #9e9fb4;
}
.ua-detail-content .is-aside {
   position: relative;
   z-index: 3;
   background-color: var(--app-graylight-color);
   border-bottom-left-radius: 6px;
}

.content-post-item {
   padding-top: 1rem;
   padding-bottom: 1rem;
   border-top: 1px solid #e8e8e8;
}
.content-post-item:first-child {
   padding-top: 0;
   border-top: 0;
}
.content-post-item:last-child {
   border-bottom: 0;
}

.title-divider {
   display: block;
   width: 70px;
   height: 3px;
   background-color: #9e9fb4;
   border-radius: 9999px;
}

.widget-card .widget-card-item > a {
   text-decoration: none;
   color: #434343;
   transition: cubic-bezier(0.47, 0, 0.745, 0.715);
}

.widget-card .widget-card-item > a:hover {
   background-color: #e7e7ed;
}
.sticky-top-offset {
   top: calc(var(--app-height-header));
}

.branch-profile {
   position: relative;
   padding: 1.25rem 1.5rem;
   background-color: var(--app-primary-light);
   border-radius: 5px;
   overflow: hidden;
   /* border: 1px solid var(--app-primary-color); */
}
.branch-profile .bp-media {
   --media-width: 125px;
   max-width: var(--media-width);
   flex: 0 0 var(--media-width);
}
.branch-profile .bp-media > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.branch-profile .bp-description-info li > span {
   font-size: 14px;
   display: flex;
   align-items: center;
   margin-bottom: 1px
}
.branch-profile .media-icon {
   position: absolute;
   bottom: -25px;
   right: 0;
   color: #16a75c36;
   width: 135px;
   height: 135px;
}

.btn-app-gray {
   background-color: var(--app-primary-light);
   border-color: var(--app-primary-light);
   /* color: #a2a5b9; */
   color: var(--app-primary-color);
}

.btn-app-gray.is-selected {
   /* background-color: var(--app-primary-color); */
   border-color: var(--app-primary-color);
   /* color: #fff; */
}

.popup-branch-profile {
   background-color: var(--app-primary-light);
   border-radius: 4px;
   position: relative;
   overflow: hidden;
}
.popup-branch-profile .label-info {
   font-size: .95rem;
   color: var(--app-primary-color);
}
.popup-branch-profile ul li {
   color: #676872;
   font-size: 14px;
}

.popup-branch-profile .media-icon-popup {
   position: absolute;
   bottom: -20px;
   right: 0;
   width: 85px;
   height: 85px;
   color: #16a75c36;
}

.btn-trigger-notes:focus {
   box-shadow: none;
   border: 1px solid var(--app-primary-color);
   background-color: var(--app-primary-light);
}

.btn-trigger-notes[aria-expanded="false"] .chevron-indicator {
   transform: rotate(0);
   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-trigger-notes[aria-expanded="true"] .chevron-indicator {
   transform: rotate(90deg);
   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.form-theme-app:focus {
   box-shadow: 0 0 0 2px var(--app-primary-color);
   border-color: transparent;
}

.ua-detail-content::before {
   display: none;
}

.ua-detail-content .is-aside::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background-color: var(--app-graylight-color);
   transform: translateX(100%);
}


.new-hero {
   margin-top: var(--app-height-header);
}
.new-hero__inner {
   min-height: calc(100vh - var(--app-height-header) - 18px);
   background-color: var(--app-primary-color);
   border-bottom-right-radius: 125px;
}
.hero-slide__image {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
}
.hero-slide__image > img {
   border-top-left-radius: 125px;
   border-bottom-right-radius: 125px;
   border-top: 11px solid #ffffff29;
}
.hero-slide__content {
   /* margin-top: 4rem; */
   margin-bottom: 6rem;
   padding-right: 3rem;
}

.hero-slide__content .hs-title {
   font-size: 34px;
   font-weight: 600;
}

.hero-slide__content .hs-text {
   margin-bottom: 1.75rem;
}

.swiper-button-next,
.swiper-button-prev {
   padding: 10px;
   background-color: #fff;
   bottom: 55px;
   top: auto;
   border-radius: 9999px;
   width: 45px;
   height: 45px;
}

.swiper-button-prev { left: 16px; }
.swiper-button-next { right: auto; left: 75px; }
.swiper-button-next::after, .swiper-button-prev::after {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--app-primary-color);
}

.swiper-pagination.is-customized {
   width: 17%;
   color: #fff;
   bottom: 55px;
   font-size: 20px;
   font-weight: 500;
   z-index: 0;
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0 15px;
}

.branch-card {
   padding: 13px;
   border: 1px solid #dfdfdf;
   border-radius: 5px;
}

.branch-card__desc {
   display: flex;
   flex-direction: column;
}

.branch-card__desc .desc-inner {
   flex: 1;
}

.branch-card__desc ul > li {
   font-size: 14px;
}

.branch-card__img {
   width: 125px;
   height: 125px;
   border-radius: 5px;
   margin-right: 12px;
}
.branch-card__img > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
}
.branch-card__link {
   border-radius: 50px;
   padding: .35rem 1.75rem;
   font-size: 14px;
}

/* widget table with flexbox */
.widget-table .widget-table-header {
   display: flex;
   align-items: center;
   padding: 0 10px;
   min-height: 50px;
   padding: 8px;
   margin-bottom: 7px;
   background-color: var(--app-graylight-color);
   border-radius: 6px;
   border-bottom: 2px solid #dee2e6;
}

.widget-table .widget-table-header span {
   flex: 1 1 0;
   display: flex;
   align-items: center;
   padding: 0 10px;
   font-weight: 500;
   color: #a2a2a2;
}

.widget-table .widget-table-header span.is-grow-2x {
   flex-grow: 2;
}

.widget-table .widget-table-row {
   display: flex;
   align-items: stretch;
   min-height: 50px;
   padding: 8px;
   margin-bottom: 8px;
   border: 1px solid #e7e7e7;
   border-radius: 6px;
}

.widget-table .widget-table-cell {
   flex: 1 1 0;
   display: flex;
   align-items: center;
   padding: 0 10px;
}

.widget-table .widget-table-cell.is-grow-2x {
   flex-grow: 2;
}

.widget-table .widget-table-cell.is-subject {
   font-weight: 500;
}

@media screen and (max-width: 992px) {
   .widget-table .widget-table-header {
      display: none;
   }

   .widget-table .widget-table-row {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      padding: 15px;
   }
   
   .widget-table .widget-table-cell {
      position: relative;
      margin-bottom: 10px;
      padding: 0;
   }

   .widget-table .widget-table-cell::before {
      content: attr(data-label);
      font-size: .9rem;
      color: #999;
      font-weight: 500;
   }

   .widget-table .widget-table-cell > .is-inner-cell {
      margin-left: auto;
   }

   .widget-table .widget-table-cell.is-subject::before {
      content: '';
   }
}

/*
*.@Author: ahmadertarizqi
*.WIDGET-TABLE-WITH-FLEXBOX
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: >= 1%,last 1 major version,not dead,Chrome >= 45,Firefox >= 38,Edge >= 12,Explorer >= 10,iOS >= 9,Safari >= 9,Android >= 4.4,Opera >= 30
*/
/* .widget-table .widget-table-row {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: stretch;
       align-items: stretch;
   min-height: 50px;
   padding: 8px;
   margin-bottom: 8px;
   border: 1px solid #e7e7e7;
   border-radius: 6px;
}

.widget-table .widget-table-cell {
   -ms-flex: 1 1 0px;
       flex: 1 1 0;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
   padding: 0 10px;
}

.widget-table .widget-table-cell.is-grow-2x {
   -ms-flex-positive: 2;
       flex-grow: 2;
}

.widget-table .widget-table-cell.is-subject {
   font-weight: 500;
}

@media screen and (max-width: 992px) {
   .widget-table .widget-table-row {
      width: 100%;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-pack: center;
          justify-content: center;
      padding: 15px;
   }
   
   .widget-table .widget-table-cell {
      position: relative;
      margin-bottom: 10px;
      padding: 0;
   }

   .widget-table .widget-table-cell::before {
      content: attr(data-label);
      font-size: .9rem;
      color: #999;
      font-weight: 500;
   }

   .widget-table .widget-table-cell > .is-inner-cell {
      margin-left: auto;
   }

   .widget-table .widget-table-cell.is-subject::before {
      content: '';
   }
} */