:root {
  --primary: #FFB92A;
  --primary-dark: #e3a626;
  --primary-light: #FCF7E8;
  --secondary: #e3e3e3;
  --secondary-dark: #807e7e;
  --success: rgb(110, 231, 163);
  --success-light: rgba(147, 231, 195, 0.5);
  --success-dark: #1aae6f;
  --warning: #ffa35a;
  --warning-light: rgba(255, 163, 90, 0.73);
  --danger: #ee5151;
  --danger-light: rgba(255, 91, 100, 0.42);
  --black: #212020;
  --white: #fff;
}

@font-face {
  font-family: jf-openhuninn;
  src: url(../font/jf-openhuninn-1.1.ttf);
}

/* Required height of parents of the Half Page Carousel for proper displaying carousel itself */
html,
body,
.view {
  height: 100%;
  font-family: jf-openhuninn;
  letter-spacing: .1rem;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.h3 {
  letter-spacing: .25rem;
}

.main {
  height: auto;
  flex: 1;
}

.section {
  padding: 30px 0px;
}

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

@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}

/*=========================================
                Color
=========================================*/
a {
  color: var(--primary-dark);
}

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

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

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

.text-warning {
  color: rgb(255, 187, 51) !important;
}

.btn-primary {
  background-color: var(--primary)!important;
  color: var(--black)!important;
  border: none;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-dark)!important;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: none;
}

.btn-outline-primary {
  border:1px solid var(--primary)!important;
  color: var(--black)!important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle{
  background-color: var(--primary);
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: var(--secondary);
}

/*=========================================
                Background
=========================================*/

.bg-primary-light {
  background-color: var(--primary-light)!important;
}

/*=========================================
                Background
=========================================*/

.bg-morning {
  background-color: #d5ffef !important;
}

.bg-afternoon {
  background-color: #ffefd2 !important;
}

.bg-night {
  background-color: #ccdeff !important;
}

/*=========================================
                Utility
=========================================*/
.m-t-40 {
  margin-top: 40px;
}

.m-t-80 {
  margin-top: 80px;
}

.m-t-70 {
  margin-top: 70px;
}

.m-b-100 {
  margin-bottom: 100px;
}

.h-0 {
  height: 0 !important;
}

.right-0 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.p-relative {
  position: relative;
}

.dot-orange {
  position: relative;
  display: inline-block;
  line-height: 2.5rem;
  padding: 1rem;
}

.dot-orange:before {
  content: '';
  background-image: url("../../img/dot-orange.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: -1;
  top: 0;
  left: -.75rem;
}

.cursor-pointer {
  cursor: pointer;
}

/* Form */

.select-wrapper {
  position: relative;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::after {
  border-color: var(--primary);
  background-color: var(--primary);
  border-radius: 0.25rem;
}

.u-clearfix:after {
  content: '';
  height: 0;
  visibility: hidden;
  clear: both;
}

/*Select*/
/* Hide the default arrow */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/*customed arrow down*/
.custom-select {
  background: #fff
    url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')
    no-repeat right 0.75rem center;
  background-size: 8px 10px;
  border: 1px solid #cad1d7;
  border-radius: 0.375rem;
}

/* Half Page Carousel itself*/
.carousel {
  /*height: 100%;*/
}

.carousel .carousel-inner {
  /*height: 100%;*/
}

.carousel .carousel-inner .carousel-item,
.carousel .carousel-inner .active {
  /*height: 100%;*/
}

/* Navbar animation */

#mainNavbar.show .navbarImg-wrap {
  opacity: 0;
}

.navbar-nav {
  z-index: 1000;
}

.navbar {
  padding: 0.5rem 1rem;
  box-shadow: none;
}

.navbar .nav-item .nav-link {
  color: var(--black);
  margin: 0 1rem;
  padding: 0.5rem 0.5rem;
  box-sizing: border-box;
}

.navbar .nav-item .nav-link:after {
  content: "";
  height: 3px;
  width: 0;
  background-color: var(--primary);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease 0s, width 0.5s ease 0s, margin-left 0.5s ease 0s, left 0.5s ease 0s;
}

.navbar .nav-item .nav-link:hover:after {
  opacity: 1;
  width: 80%;
}

.navbar.scrolling-navbar {
  padding: 20px 0;
}

.navbar.scrolling-navbar.top-nav-collapse {
  padding: 12px 0;
}

.navbar-brand img {
  width: 100%;
}

.navbar {
  background-color: var(--white);
  font-weight: 400;
}

.navbar.show {
  background-color: var(--primary-light);
}

.navbar.navbar-dark .navbar-toggler {
  margin: 0.1rem;
}

.navbar-toggler-icon {
  color: var(--black);
}

.top-nav-collapse {
  background-color: #1d2088;
}

.nav-item {
  position: relative;
}

.nav-item__collapse .collapse a {
  opacity: 0.7;
}

.rotate-icon {
  transform: rotate(-180deg);
  transition: all 0.3s;
  transform-origin: center;
}

#navItemSchoolList {
  overflow: scroll;
  height: 80vh;
}

@media (max-width: 767.98px) {
  .navbar {
    display: flex;
  }
  .navbarImg-wrap {
    width: 80%;
    overflow: hidden;
  }
  .navbarImg {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 992px) {
  .navbar-nav > .nav-item > .nav-item__dropdown {
    display: none;
  }

  .navbar .navbar-brand {
    padding: 0 0.75rem;
  }

  /*.navbar {*/
  /*  padding-top: 1rem;*/
  /*  padding-bottom: 1rem;*/
  /*}*/

  .navbar-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .navbar-nav .nav-item {
    padding: 0.5rem 0;
  }

  .navbar-nav .nav-item .m-r-10 {
    margin: 0;
  }

  .navbar-nav .nav-item__collapse ul {
    padding-inline-start: unset;
  }

  .navbar-nav .nav-item__collapse li {
    padding: 0.5rem 0;
  }
  .navbar-nav .border {
    margin-top: 1rem;
  }
  .navbar-nav .nav-link {
    text-align: center;
    font-size: 1rem;
    color: var(--black);
  }
  .m-t-80 {
    margin-top: 94px;
  }
}

@media (min-width: 991.98px) {
  .navbar-nav > .nav-item > .nav-item__collapse {
    display: none;
  }
}


/* Footer color for sake of consistency with Navbar */
footer.page-footer {
  background-color: var(--primary-light);
  color: var(--black);
  padding: 3rem 0;
}

footer.page-footer a {
  color: var(--black);
}

.more-link {
  font-size: 1rem;
}

/* Jumbotron */
#mainCourseSearch {
  margin-top: auto;
  height: 50vh;
}

#schoolCourseSearch {
  margin: auto;
  z-index: 2;
}

#schoolCourseSearch .form-control::placeholder {
  color: #fff;
}

.main-jumbotron {
  margin: 130px 0 30px 0;
}

.school-carousel.mask:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.jb-img {
  /*height: 100vh;*/
  /*mask-image: url('../../img/risingsun-img-clip.svg');*/
  /*mask-clip: padding-box;*/
  /*mask-repeat: no-repeat;*/
}

/* site-layout-1 */
.site-layout-1 {
  position: relative;
  vertical-align: middle;
  padding: 0;
}

.site-layout-1 .school-carousel {
  z-index: 0;
  overflow: hidden;
}

.site-layout-1 .school-carousel .main-carousel {
  width: 100%;
}

.site-layout-1 .full-page-intro {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  width: 100%;
}

.site-layout-1 #schoolCourseSearch {
  margin: unset;
}

.site-layout-1 .school-carousel .carousel-item {
  width: 100%;
  padding-top: 40%;
}

@media (max-width: 767.9px) {
  .site-layout-1 .school-carousel .carousel-item {
    width: 100%;
    padding-top: 100%;
  }
}

.site-layout-1 .school-carousel .carousel-item img {
  position: absolute;
  top: 0;
}

/* site-layout-2 */
.site-layout-2 {
  position: relative;
  vertical-align: middle;
}

.site-layout-2 .school-carousel .carousel-item {
  width: 100%;
  padding-top: 40%;
}

.site-layout-2 .school-carousel .carousel-item img {
  position: absolute;
  top: 0;
}

.site-layout-2 .site-sm-img {
  width: 100%;
  padding: 25% 0 0 0;
  overflow: hidden;
  margin-top: 1rem;
}

.site-layout-2 .site-sm-img img {
  position: absolute;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (max-width: 767.9px) {
  .site-layout-2 .site-sm-img {
    padding: 40% 0 0 0;
    margin-top: 0;
  }
  .site-layout-2 img {
    margin-top: 0.5rem;
  }
}

/* site-layout-3 */
.site-layout-3 .school-carousel .carousel-item {
  padding-top: 100%;
  width: 100%;
}

.site-layout-3 .school-carousel .carousel-item img {
  position: absolute;
  top: 0;
}

.site-layout-3 .site-sm-img {
  width: 100%;
  padding: 50% 0 0 0;
  overflow: hidden;
}

.site-layout-3 .site-sm-img img {
  position: absolute;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (max-width: 767.9px) {
  .site-layout-3 .site-sm-img-wrap {
    margin: 1rem 0;
  }
}

/* Jumbotron3 */
.j3,
.j3 .school-carousel .main-carousel .carousel-item img {
  height: 70vh;
}
.j3-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .j3,
  .j3 .school-carousel .main-carousel .carousel-item img {
    /*height: 50vh;*/
  }
}

/* Main Carousel */
.main-carousel {
  height: 100%;
}

.main-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* School Carousel */
.school-carousel {
  /*height: 75vh;*/
}

.school-carousel .carousel-inner {
  margin: 0;
}

.school-carousel .carousel-item {
  z-index: 0;
  overflow: hidden;
}

.school-carousel .carousel-item:after {
  display: none;
}

.school-slogan {
  margin: 0 !important;
  letter-spacing: 0.25rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  width: 100%;
}

@media (max-width: 767.9px) {
  .school-slogan {
    text-align: center;
    position: relative;
    top: 0;
    transform: translateY(0%);
    margin-top: 3rem !important;
  }
}

/* Course Card */
.course-card p {
  margin-bottom: .3rem;
}

.card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-tag {
  top: 1rem;
  right: -0.75rem;
}

.course-imgbox {
  width: 100%;
  padding-top: calc(100% * 2 / 3);
  height: 0;
  position: relative;
  cursor: pointer;
  transition: 250ms ease-in;
}

.course-imgbox:hover {
  opacity: 75%;
}

.course-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.course-carousel .carousel-item {
  margin-top: 0;
}

.course-carousel .carousel-item::after {
  content: '';
  display: none;
}

.course-carousel li {
  bottom: -100px;
  background-color: #000;
}

.course-carousel .carousel-inner {
  padding: 2rem;
}

.course-carousel .controls-top {
  position: absolute;
  top: 50%;
  width: 100%;
  font-size: 1.5rem;
}

.course-carousel.carousel-mobile .controls-top {
  position: relative;
  width: 80%;
  font-size: 1.5rem;
  margin: 1rem auto;
}

/* Adjustment for mobile devices*/

@media (max-width: 767.95px) {
  .carousel {
    height: 100%;
  }
  .course-carousel.carousel-mobile {
    display: block;
  }

  .course-carousel.carousel-desktop {
    display: none;
  }

  .course-carousel .carousel-inner {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .course-carousel.carousel-mobile {
    display: none;
  }

  .course-carousel.carousel-desktop {
    display: block;
  }
}

/* Footer  */
footer.page-footer .container {
  width: 92%;
  margin: auto;
}
.footer-item {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
  /*margin-left: 2rem;*/
  float: right;
}
.footer-item li {
  float: left;
  padding-right: 3rem;
  margin-top: 0.5rem;
}
.footer-item li:last-child {
  padding-right: 0;
}

footer .footer-copyright {
  width: 100%;
}
footer.page-footer .footer-copyright {
  background-color: transparent;
  font-size: 12px;
}

footer.page-footer .footer-sm-item li {
  float: left;
  padding-right: 12px;
  margin-bottom: 0.5rem;
  margin-right: 12px;
  border-right: 1px solid;
  cursor: pointer;
}
footer.page-footer li:last-child {
  border-right: none;
}

@media (max-width: 768px) {
  .footer-item {
    margin-left: auto;
    margin-right: auto;
  }
  footer.page-footer .footer-copyright {
    margin-left: 2rem;
  }
  footer.page-footer .footer-copyright li:last-child {
    padding-right: 0;
  }
}

@media (max-width: 991px) {
  .mobile-hidden {
    display: none;
  }
}

@media (min-width: 991.9px) {
  .desktop-hidden {
    display: none;
  }
  #courseSearchDetail {
    display: block;
  }
}

/* MEMO-BADGE */
.memo-badge {
  font-size: .9rem;
  font-weight: normal;
  color: var(--secondary-dark);
}

.memo-badge:not(:first-child):before {
  content: "| ";

}

/* OWL CAROUSEL */
.owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.owl-theme .owl-nav [class*="owl-"] {
  position: absolute;
  transform: translateY(-100%);
}

.owl-theme .owl-nav [class*="owl-"]:hover {
  color: var(--primary);
  background-color: transparent;
}

.owl-prev {
  position: absolute;
  left: -2rem;
  font-size: 2rem !important;
}

.owl-next {
  position: absolute;
  right: -2rem;
  font-size: 2rem !important;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background-color: var(--primary);
}

/* Course Search */
.search-block {
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.more-search-factor {
  display: none;
}

.more-search-factor.show {
  display: flex;
}

.more-search-btn {
  border-radius: 50%;
}

.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--black);
}

.jconfirm .jconfirm-box-container {
  width: 100vw;
}