:root {
  --default-font: 'cairo';
  --default-font-sb: 'cairo-semibold';
  --default-font-b: 'cairo-bold';
  --blue-color: #22B0E9;
  --light-blue-color: #7cdaff7a;
  --blue-color-hover: #197ca3;
  --orange-color: #D37B60;
  --light-orange-color: #ffa589b3;
  --orange-color-hover: #a15d49;
  --purple-color: #77478E;
  --purple-color-hover: #553663;
  --red-color: #B62C3F;
  --red-color-hover: #9d2b3a;
  --light-red-color: #ff96a57a;
  --mint-green-color: #6AC6BB;
  --green-color: #0DA290;
  --bckground-green-color: #6effed54;
  --light-green-color: #5A935D;
  --green-color-hover-hover: #095e54;
  --green-color-hover: #0a786b;
  --navy-blue-color: #00162E;
  --txt-color: #7e7e7e;
  --light-grey-color: #efefef;
  --light-gray-background: #f8f8f8;
  --black-color: #545454;
  --grey-color: #6E96A2;
  --background: #FAFAFA;
  --dark-grey-color: #4D6C75;
  --transition: all .3s ease-in-out;
  --dark-background: #ECECEC;
  --tab-background-color: #efefef;

}
div#cookieModal {
    height: 25rem;
    bottom: 1rem;
    width: 22rem;
    top: auto;
    left: 50%;
    right: auto;
    overflow: hidden;
    transform: translateX(-50%);
    z-index: 9;
}
.footer-bottom .visitors {
  font-size: .8rem;
  margin-top: .4rem;
  height: 4rem;
  width: auto;
}
.footer-bottom .visitors img{
height:100%;
width:100%;
object-fit:contain;
}
.footer-bottom .visitors{
        width: 6rem;
    
    }
.description li {
    position: relative;
    padding-right:2rem;
    margin:.7rem 0;
}
.description li::before{
    content:'';
    position:absolute;
    right:0;
    top: 0.6rem;
    /* transform:translateY(-50%); */
    background-color:var(--blue-color);
    height:.8rem;
    width:.8rem;
}
@keyframes fade-up{
  0%{
    opacity: 0;
    transform:translateY(100%);
  }
  100%{
    opacity: 1;
    transform:translateY(0%);
  }
}
@keyframes fade-right{
  0%{
    opacity: 0;
    transform:translateX(200%);
  }
  100%{
    opacity: 1;
    transform:translateX(0%);
  }
}
@keyframes fade-left{
  0%{
    opacity: 0;
    transform:translateX(-100%);
  }
  100%{
    opacity: 1;
    transform:translateX(0%);
  }
}
#sidePanelLink.no-click{
 cursor:pointer;
}
.available-programs .swiper-pagination {
    z-index: 1;
}
.available-programs .swiper-pagination .swiper-pagination-bullet{
    border-color: white!important;
}
.uni-statistics .swiper-button-next{
  transform: scaleX(1);
}
.uni-statistics .swiper-button-prev{
  transform: scaleX(-1);
}
/* ALL RATINGS PAGE STYLES */
.allratings {
  padding-top: 11rem;
  padding-bottom: 5rem;
}
.allratings .ratingsSection{
  display: flex;

}
.allratings .headerSection{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:2rem;
}
.allratings .col-lg-4>.card,
.allratings .col-lg-8>.card{
  border: 1px solid #e0e0e0;
}
.allratings .col-lg-4>.card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.allratings .col-lg-4>.card .topsection{
  padding:2rem 2.5rem 0;
}
.allratings .col-lg-4>.card h4{
  margin-bottom: 2rem;
}
.allratings .col-lg-8>.card  .topsection{
  padding: 2rem 2.5rem;
}
.allratings .dropdownsSection{
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  margin-bottom: 3rem;
}
.allratings .dropdownsSection .dropdown{
  margin-bottom:1rem;
}
.allratings .dropdownsSection .dropdown button{
  margin-left: 1rem;
  padding: 1rem;
  background-color: white;
  min-width: 17rem;
  text-align: right;
  position:relative;
}
.allratings .dropdownsSection .dropdown .dropdown-menu{
  width: 100%;
  border-radius: 0;
  border: none;
  right:0;
  text-align: right;
  max-height:20rem;
  overflow: auto;
  min-width:17rem;
}
.allratings .dropdown::after {
  content: "";
  width: 0.7rem;
  height: 0.9rem;
  background-image: url("/themes/uoj_theme/media/chevron-down-green.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  top: 63%;
  position:absolute;
  transform: translateY(-50%);
  border: none;
  display:block;
  left:2rem;
  right:auto;
}
.allratings .dropdownsSection .dropdown .dropdown-menu .dropdown-item{
  padding:1rem
}
.allratings .col-lg-8>.card .row .col-lg-6{
  height: auto;
  flex: 1 1 0%;
  margin-bottom: 1rem;
}
.allratings .col-lg-8>.card .row .col-lg-6:nth-child(2n+1){
  padding-right:0;
}
.allratings .col-lg-8>.card .row .col-lg-6:nth-child(2n+2){
  padding-left:0;
}
.allratings .col-lg-8>.card .row .col-lg-6 .card{
  height:100%;
}
.allratings .card .bottomsection{
  background-color:#f9f9f9;
  padding: 1rem 2.5rem;
}
.allratings .card .bottomsection p{
  margin-bottom:0;
}
.allratings .col-lg-8 .card .col-lg-6 .card .card-body{
  background-color: #f9f9f9;
}
.allratings .col-lg-8 .card .col-lg-6 .card .reasons{
  padding: 1rem ;
}
.allratings .col-lg-8 .card .col-lg-6 .card .reasons p{
  font-size: 1rem;
  color: var(--txt-color);
}
.allratings .col-lg-8 .card .col-lg-6 .card .reasons p span{
  color: var(--green-color);
  margin-left: .5rem;
  font-family: cairo-bold;
}
.allratings .headerSection .additionalinfo{
  text-decoration: underline;
}
.allratings .col-lg-8 .card .topsection .row{
  margin-top: 2rem;
  align-items:stretch;
}
.allratings .col-lg-6 .card .cardheader{
  background-color: #f5f5f5;
  padding: 2rem 1.5rem;
}
.allratings .col-lg-6 .card .cardheader h6{
  font-size:.9rem;
}
.allratings .col-lg-6 .card .cardheader span{
  color: var(--green-color);
  margin-left: .5rem;
  font-weight:600;
  font-size:1.3rem;
}
.allratings .card .bottomsection span{
  font-family: 'cairo-bold';
  margin: 0 0.3rem;
}
.allratings h2{
  font-weight: 600;
  color: var(--black-color);
}
.rating{
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.rating span{
  color: var(--blue-color);
  min-width: 2.2rem;
}
/* ALL RATINGS PAGE STYLES */
div#myTopnav{
  animation: 900ms ease-in-out 0s 1 normal none running spFadeInDown;
}
.uoj-weather{
  display: flex !important;
}
.news-advertisements .col-lg-4{
  padding: 0;
}
body.overflow{
  overflow: hidden;
}
.header-pattern img{
  height: 100%;
  width:100%;
}
.uni-statistics circle#Ellipse_6568 {
  display: none;
}
.df-messenger-wrapper {
  z-index: 2 !important;
}

#messageList {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 1rem;
  direction: rtl;
}

[scope="df-messenger"] {
  padding: 50rem;
}

.sub .old-version {
  display: none !important;
}

html,
body {
  -webkit-user-select: text;
  user-select: text;
}

a:focus-visible {
  outline: none;
}

.df-chat-icon {
  height: 30px;
  top: 15px;
  width: 36px;
}

.input-box-wrapper input {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.services-container .swiper-button-disabled {
  display: none !important;
}

.uni-statistics .swiper-button-prev:after,
.uni-statistics .swiper-button-next:after,
.tabpane-swiper .swiper-button-prev:after,
.tabpane-swiper .swiper-button-next:after,
.services-container .swiper-button-prev::after,
.services-container .swiper-button-next::after,
.quick-links.swiper .swiper-button-prev::after,
.quick-links.swiper .swiper-button-next::after {
  content: '' !important;
}

.uni-statistics .swiper-button-prev {
  right: 0 !important;
}
.opportunities-container{
  padding: 1rem 0;
}
.old-version {
  position: absolute;
  top: calc(78.7vh - 10.5vh);
  display: flex;
  font-size: 0.8rem;
  z-index: 2;
  color: #dedede;
  background-color: rgb(0 0 0 / 70%);
  padding: 1.3rem 1.1rem 1.3rem 2.3rem;
  border-top-left-radius: 20px;
  background-image: url("/themes/uoj_theme/media/mockup-pat.webp");
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .3s ease-in-out;
  animation: .7s fade-up forwards;
  display: none;
}

.old-version:hover {
  color: white;
}

.sub .old-version {
  display: none;
}

.old-version .mockup-container {
  position: relative;
  width: 4.6rem;
  height: auto;
  margin-left: 1rem;
  transition: all .3s ease-in-out;
}

.old-version .mockup-container img {
  position: absolute;
  width: 100%;
  transform: translateY(-1rem);
}

.read-more .prompt {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, .95), rgb(255, 255, 255)) !important;
  padding-top: 6rem !important;
  text-align: right !important;
  padding-bottom: 1rem;
}

.read-more .prompt .button {
  text-shadow: unset !important;
  color: var(--blue-color);
  font-family: var(--default-font-sb);
  padding: 0 !important;
  text-decoration: underline;
  line-height: 3;
  transition: .3s all ease;
}

.read-more .prompt .button:hover {
  color: var(--blue-color-hover);
}

ul {
  list-style-type: none;
}

.agent-profile .tab-content ul li {
  position: relative;
  color: var(--txt-color);
  line-height: 3;
}

.goals.access {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.agent-profile .tab-content ul {
  padding: 0 2rem 0 1rem;
}

.agent-profile .tab-content ul li::before {
  height: 0.8rem;
  width: 0.8rem;
  background-color: var(--blue-color);
  content: '';
  position: absolute;
  top: 0.9rem;
  right: -1.6rem;
}

@font-face {
  font-family: cairo;
  src: url("/themes/uoj_theme/fonts/Cairo-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: cairo-semibold;
  src: url("/themes/uoj_theme/fonts/Cairo-SemiBold.ttf");
  font-display: swap;
}

@font-face {
  font-family: cairo-bold;
  src: url("/themes/uoj_theme/fonts/Cairo-Bold.ttf");
  font-display: swap;
}

@font-face {
  font-family: Cairo-sb;
  src: url("/themes/uoj_theme/fonts/Cairo-SemiBold.ttf");
  font-display: swap;
}

@font-face {
  font-family: Cairo;
  src: url("/themes/uoj_theme/fonts/Cairo-Regular.ttf");
  font-display: swap;
}

/* AMINATIONS START */
@keyframes spFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes spFadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes seacrh-close {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes search-open {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes acc-reveal {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes poll-answers-reveal {
  0% {
    transform: translateX(3rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0rem);
    opacity: 1;
  }
}

@keyframes bar1 {
  0% {
    width: 0px;
  }

  100% {
    width: 100%;
  }
}

@keyframes mobile-menu {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes mobile-menu-close {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes tab-reveal {
  0% {
    transform: translateY(20rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


@keyframes dropdownanimation {

  from {
   transform: translateY(40%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes dropdownanimationscroll {

  from {
    transform: translateY(40%);
     opacity: 0;
   }
 
   to {
     transform: translateY(0%);
     opacity: 1;
   }
}
@keyframes dropdownanimationmobile {

  from {
    top: -1rem;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes dropdownanimationlang {

  from {
    top: 0rem;
    opacity: 0;
  }

  to {
    top: 2.7rem;
    opacity: 1;
  }
}

@keyframes dropdownanimationsearch {

  from {
    top: -.5rem;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}
/* Membership Details */
.appointments.membership-details .accordion ul li {
  max-height: unset;
  height: unset;
}
.appointments.membership-details .body-container {
  padding: 0;
}
.appointments.membership-details .type span {
  color: black;
  position: relative;
  line-height: 2;
  font-family: var(--default-font-sb);
}

.appointments.membership-details .type::after {
  content: "";
  top: 2.7rem;
  right: 0;
  position: absolute;
  height: 0.6rem;
  width: 0.6rem;
  background-color: var(--blue-color);
}

.appointments.membership-details #accordion .type ul {
  display: block;
}

.appointments.membership-details .type {
  font-size: 1rem;
  padding: 2rem 1.5rem;
  position: relative
}

.appointments.membership-details .type:not(:last-child) {
  border-bottom: 1px solid #D4D4D4;
}

.appointments.membership-details .type .points {
  margin: 1.2rem 0 0;
  color: grey;
  font-size: .9rem;
}

.appointments.membership-details .type ul li {
  height: auto;
  width: auto;
  border-bottom: none !important;
  overflow: unset;
  margin: unset;
  position: relative;
}

.appointments.membership-details .type ul li:not(:last-child) {
  margin-bottom: .8rem;
}

.appointments.membership-details .type ul li::before {
  content: '-\00a0\00a0';
}

/* Enrollment */
.enrollment-section .col-lg-6 .card .content .readmore {
  background-color: white;
  color: black;
  font-size: 1rem;
  padding: 0.5rem 2.5rem;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  position: relative;
  transition: unset;
  width: fit-content;
  margin: auto;
}

.enrollment-section .col-lg-6 .card .content .readmore:hover {
  background-color: var(--blue-color);
  color: white;
}

.enrollment-section .col-lg-6 .card .content {
  z-index: 2;
  color: white;
  text-align: center;
}

.enrollment-section .col-lg-6 .card .content .subtitle {
  font-size: 1rem;
  position: relative;
  width: fit-content;
  margin: auto;
}

.enrollment-section .col-lg-6 .card .content .subtitle::after {
  width: 50%;
  height: .1rem;
  background-color: rgba(255, 255, 255, 0.5);
  content: '';
  position: absolute;
  bottom: -.5rem;
  display: flex;
  left: 25%;
}

.enrollment-section .col-lg-6 .card .content .title {
  font-size: 1.8rem;
  font-family: var(--default-font-sb);
  margin: 1.5rem 0 2rem;
}
.enrollment-section .col-lg-6 .card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.enrollment-section .col-lg-6 .card .card-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.enrollment-section .col-lg-6 .card {
  position: relative;
  height: 19rem;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 1rem;
}
.enrollment-section .enrollment-rules {
  margin-top: 3rem;
}

.enrollment-section {
  background-color: #F4F4F4;
  height: auto;
  padding: 0 0 6rem 0;
}

.topnav.scroll .navbar .dropdown::after,
.topnav.sub .navbar .dropdown::after,
body.toolbar-horizontal .topnav .navbar .dropdown::after {
  position: absolute;
  top: 2.7rem;
  left: -0.2rem;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="%23000000"></path></svg>');
  content: '';
}
.topnav li.nav-item,.topnav .dropdown {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.topnav .navbar .dropdown::after {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="%23ffffff"></path></svg>');
  content: '';
}
.topnav .navbar .dropdown.languages::after{
  left:-.2rem;
}
.ribbon {
  margin-top: -35px;
  height: 7px;
  border-radius: 1px;
}

.svg-chart-container {
  height: 100%;
}

.node-button-g .node-button-foreign-object,
.node-button-g.expanded .node-button-foreign-object {
  height: 3rem !important;
  width: 3rem !important;
  background-color: white;
  border-radius: 50%;
  x: -25 !important;
  y: -28 !important;
  border: 1px solid lightgray;
  position: relative;
  background-repeat: no-repeat;
  background-position: 1rem;
  background-size: 1rem;
  background-image: url(/themes/uoj_theme/media/expand.svg) !important;
}

.node-button-g.collapsed .node-button-foreign-object {
  height: 3rem !important;
  width: 3rem !important;
  background-color: white;
  border-radius: 50%;
  x: -25 !important;
  y: -28 !important;
  border: 1px solid lightgray;
  position: relative;
  background-repeat: no-repeat;
  background-position: 1rem;
  background-size: 1rem;
  background-image: url(/themes/uoj_theme/media/collapsed.svg) !important;
}


.node_member .member-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.node_member .member-name-container .member-name {
  font-size: .9rem;
  text-align: center;
}

.level-0 {
  background-color: var(--blue-color) !important;
}

.level-1 {
  background-color: var(--green-color) !important;
}

.level-2 {
  background-color: var(--orange-color) !important;
}

.level-3 {
  background-color: var(--red-color) !important;
}

.level-4 {
  background-color: var(--purple-color) !important;
}

.node-button-foreign-object .node-button-div>div {
  display: none;
}

.ribbon.first-row {
  background-color: var(--red) !important;
}

.ribbon.second-row {
  background-color: var(--green);
}

.ribbon.third-row {
  background-color: var(--yellow);
}

.ribbon.fourth-row {
  background-color: var(--blue);
}

.ribbon.fifth-row {
  background-color: var(--purple);
}

.ribbon.sixth-row {
  background-color: var(--dark-gray);
}

.department.first-row {
  color: var(--red);
}

.department.second-row {
  color: var(--green);
}

.department.third-row {
  color: var(--yellow);
}

.department.fourth-row {
  color: var(--blue);
}

.department.fifth-row {
  color: var(--purple);
}

.department.sixth-row {
  color: var(--dark-gray);
}

.position-name {
  font-size: 0.8rem !important;
  color: #757575 !important;
  margin-top: 5px;
}

.department {
  border-top: 1px solid #f1f1f1;
  text-align: center;
  font-size: 0.75rem;
  padding-top: 1rem !important;
}

.small-img {
  margin-top: -30px;
  border-radius: 100px;
  width: 65px;
  height: 65px;
}

.person-details {
  padding: 20px;
  padding-top: 35px;
  text-align: center;
}

.navbar .dropdown-menu {
  position: relative;
  top: 0;
  right: 0;
  box-shadow: none;
  text-align: right;
  margin-top: 0.6rem;
  background-color: white;
  left: 0;
  border-radius: 0 !important;
  opacity: 1;
  border: none;
  padding: 0;
  animation: dropdownanimationmobile .5s;
}

.navbar .dropdown-menu .dropdown-item:not(:last-child),
.navbar .dropdown-menu li:not(:last-child) a {
  border-bottom: 1px solid rgb(228, 228, 228);
}

/* ANIMATIONS END */
.no-click {
  cursor: no-drop;
}

html {
  overflow-x: hidden;
}

html,
body {
  margin: 0px;
  padding: 0px !important;
}

body {
  background-color: #fafafa;
}

a,
a:hover {
  text-decoration: none;
  color: var(--blue-color);
}

button {
  border: none;
  outline: none;
}

h1,
h2,
h3 {
  line-height: 1.5;
}

.library-tabs .description {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

p.description,
div.description p {
  line-height: 2;
  color: var(--txt-color);
  font-size: 1rem;
  text-align: inherit;
}

.container.description {
  width: 100%;
}

.container.description img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card.no-link {
  cursor: auto;
  pointer-events: none;
}

a {
  cursor: pointer;
  text-decoration: none;
}

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: var(--black-color);
  width: 220px;
  height: 40px;
}

/* SUPERVISOR START */
.supervisor {
  display: flex;
  align-items: center;
}

.supervisor .profile {
  height: 3rem;
  width: 3rem;
  margin-left: 1rem;
  display: none;
}

.supervisor .profile img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.profile .tab-content {
  padding: 10px 1rem;
}

.profile .nav-tabs a {
  border: 0 !important;
  background-color: transparent !important;
}

.profile .nav-tabs li.swiper-slide-active a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -1.9rem;
  right: 0;
  background-color: var(--blue-color);
}

.agent-profile .nav-tabs li.swiper-slide-active a::after {
  top: 2.47rem;
}

div#associatesLoader {
  right: 49%;
}
.profile .nav-tabs li a {
  width: 100%;
  text-align: center;
}

#profileContainer .left-section {
  margin-top: 0;
}

#profileContainer .right-section {
  top: 0;
}


.profile ul.nav.nav-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  flex-wrap: nowrap;
}

.agent-profile.profile ul#scroller {
  padding-left: 2rem;
  padding-right: 2rem;
}

.agent-profile.profile .tab-pane {
  width: 100% !important;
}

.profile .swiper{
  position: relative!important;
}
.profile .swiper .swiper-button-prev, .profile .swiper .swiper-button-next{
  display: block !important;
}
.profile .tabs-wrapper {
  position: relative;
}
.profile .swiper-button-next,
.profile .swiper-button-prev,
.president-tabview span.left,
.president-tabview span.right {
  position: absolute;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  left: -50px;
  top: 8px;
  cursor: pointer;
  color: #ffffff;
}

.profile .swiper-button-prev {
  right: 1.5rem;
  top: 1.4rem;
  background-repeat: no-repeat;
  background-size: 93%;
  background-image: url('/themes/uoj_theme/media/chev.svg');
  background-position: center;
  z-index: 2;
  /*height: 100%;*/
}
.profile .swiper-slide{
  width: fit-content;
}
.profile .swiper-button-prev,.profile .swiper-button-next{
  display: block !important;
}

.president-tabview .swiper-button-next {
  right: 6.5rem;
  top: 7.1rem;
  background-repeat: no-repeat;
  background-size: 93%;
  background-image: url('/themes/uoj_theme/media/chev.svg');
  background-position: center;
  z-index: 2;
  display: none;
}

.profile .swiper-button-next {
  left: .5rem;
    top: 1.3rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: 93%;
    background-image: url(/themes/uoj_theme/media/chev.svg);
    background-position: center;
    z-index: 2;
    transform: scaleX(-1);
    display: block !important;
    height: 100%;
}
.profile .swiper-button-prev::after,.profile .swiper-button-next::after{
  content: ""!important;
}
.agent-profile span.left {
  top: 1.5rem;
}

.agent-profile span.right {
  top: 1.5rem;
}

.president-tabview span.left {
  left: 6.4rem;
  top: 7.1rem;
  background-repeat: no-repeat;
  background-size: 93%;
  background-image: url('/themes/uoj_theme/media/chev.svg');
  background-position: center;
  z-index: 2;
  transform: scaleX(-1);
  display: none;
}

.president-tabview.padding .nav-tabs {
  padding: 0;
}

.contact-us .map-container .leaflet-popup-tip {
  transform: rotate(0deg);
}

.contact-us .leaflet-popup-tip-container {
  top: 4.3rem !important;
  left: 49.6% !important;
  transform: rotate(53deg) !important;
  z-index: -1;
}

/* PERSONAL PROFILE END */
.description.container h4 {
  font-size: 1rem;
  line-height: 2.2;
  margin-bottom: 2rem;
}

.description.container ul {
  padding: 0;
}

.description.container h4 span,
.description.container p span {
  font-family: var(--default-font-sb)
}

.college.deanship.agencies-t.tabular-view .nav li:nth-child(2) a.nav-link::before {
  background-image: url(/themes/uoj_theme/media/project-members.svg);
}

.agencies-advisors {
  background-color: white;
}

.agency hr {
  margin: 0 4rem;
}

.agency .be-in-contact a {
  margin-right: .5rem;
}

.quick-links.dean {
  border-top: 1px solid #D9D9D9;
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6:first-child .card li:before {
  background-color: var(--light-green-color);
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6:nth-child(2) .card li:before {
  background-color: var(--orange-color);
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text ul a {
  color: var(--orange-color);
  margin-right: .5rem;
  transition: .3s all ease;
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text ul a:hover {
  color: var(--orange-color-hover);
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6:first-child .card .card-body .card-text ul a:hover {
  color: #446846;
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6:first-child .card .card-body .card-text ul a {
  color: var(--light-green-color);
  margin-right: .5rem;
  transition: .3s all ease;
}
.Deanship-agencies.contact-information {
  background-image: unset;
  background-color: white;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.Deanship-agencies.contact-information .agencies-tiles {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
.Deanship-agencies.contact-information .agencies-tiles .row {
  width: 100%;
  margin: 0;
}
.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 {
  padding: 0
}
.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card {
  border: 1px solid #D9D9D9 !important;
}
.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body {
  padding: 0;
}
.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-title {
  padding: 1.2rem 1.5rem;
  background-color: #F9F9F9;
  width: 100%;
}
.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text {
  padding: 0rem 1.5rem;
}

.college-standouts.deans .leader-msg .achievement {
  color: var(--green-color);
}

.college-standouts.deans .leaders .swiper-slide-prev .card .card-image::after {

  background: linear-gradient(#6B97A2 50%, #6B97A2 50%, #6B97A2 50%, #6B97A2 50%);

}

.college-standouts.deans .leaders .swiper-slide-next .card .card-image::after {
  background: linear-gradient(rgba(182, 44, 64, .7) 50%, rgba(182, 44, 64, .7) 50%, rgba(182, 44, 64, .7) 50%, rgba(182, 44, 64, .7) 50%);
}

.news-advertisements.deanship {
  background-color: white;
}

.College-sections.departs.dean {
  background-color: #8ACFEA;
}

.college.deanship.tabular-view .college-annual-report .item a.item-cta {
  transition: .3s all ease;
}

.college.deanship.tabular-view .college-annual-report .item a.item-cta:hover {
  color: var(--red-color-hover);
}

.college.deanship.tabular-view .college-annual-report.files .item a.item-cta {
  color: var(--blue-color);
  transition: .3s all ease;
  text-wrap: nowrap;
  font-size:.9rem;
}

.college.deanship.tabular-view .college-annual-report.files .item a.item-cta:hover {
  color: var(--blue-color-hover);
}

.Deanship-agencies .agencies-tiles .col-lg-6:first-child .card:first-child {
  margin-bottom: 1.5rem;
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+2) .card {
  border-right: 10px solid var(--red-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+1) .card:nth-child(2n+1) {
  border-right: 10px solid var(--blue-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+1) .card:nth-child(2n+2) {
  border-right: 10px solid var(--purple-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+1) .card:nth-child(2n+1) .pattern svg ellipse {
  fill: var(--blue-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+1) .card:nth-child(2n+2) .pattern svg ellipse {
  fill: var(--purple-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+2) .card:nth-child(2n+1) .pattern svg ellipse {
  fill: var(--red-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+1) .card:nth-child(2n+2) li::before {
  background-color: var(--purple-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+1) .card li::before {
  background-color: var(--blue-color);
}

.Deanship-agencies .agencies-tiles .col-lg-6:nth-child(2n+2) .card li::before {
  background-color: var(--red-color);
}

.survey-msg .survey-title {
  font-size: 1.4rem;
  font-family: var(--default-font-b);
  padding-bottom: 1.5rem;
  margin: 1.5rem 0;
  border-bottom: 1px solid #E0E0E0;
}

.survey-msg .msg-container {
  line-height: 2;
}

.survey-msg .msg-container ul li {
  position: relative;
}

.survey-msg .msg-container ul li::before {
  content: "";
  top: .6rem;
  right: -1.8rem;
  position: absolute;
  height: .6rem;
  width: .6rem;
  background-color: var(--blue-color);
}

/* MAP START */
.map-filter {
  min-width: 7.4rem;
  text-align: right;
  position: relative;
  min-height: 3.5rem;
  opacity: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0.8rem;
  background-color: white;
  border-left: 1px solid #e4e4e4;
}

.map-filter span:first-child {
  width: 100%;
  display: block;
  margin: auto;
  transition: all .3s ease-in-out;
}

.map-filter span:first-child::after {
  content: "";
  position: absolute;
  background-image: url('/themes/uoj_theme/media/Icon\ feather-arrow-down.svg');
  top: 0;
  left: 1rem;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: .75rem;
}

.map-filter .dropdown-menu {
  width: auto;
  min-width: 24rem;
  max-height: 19rem;
  overflow: hidden auto;
  border: none;
  right: unset;
  text-align: right;
  left: -1rem !important;
}

.popup-body a {
  float: right;
  padding: 0.5rem 1.5rem 2rem;
  position: relative;
}

.popup-body p.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  text-align: right;
  overflow: hidden;
  font-size: .9rem;
  padding: 0 1.5rem 2rem 1rem;
  line-height: 2.3;
  margin-bottom: 0;
  color: #585858;
  margin-top: .7rem;
}

.Building-Detail-Container .building-info-container {
  margin: auto;
  background-color: white;
  border-radius: 1rem;
}

.Building-Detail-Container .building-info-container .popup-body {
  padding: 0 1rem;
  line-height: 2;
  margin-bottom: 1rem;

}

.Building-Detail-Container .building-info-container .popup-body.isempty {
  min-height: 8rem;
}

.Building-Detail-Container .building-info-container .popup-body .read-more {
  color: var(--blue-color);
  text-decoration: underline;
}

.right-section svg:hover path {
  fill: var(--blue-color-hover);
}

#map .leaflet-bar a:hover {
  background-color: #ebebeb;
}

.leaflet-popup-close-button:hover {
  color: var(--blue-color-hover) !important;
}

#map .leaflet-control-fullscreen-button:hover {
  background-color: #ebebeb !important;
}

.dropdown .map-filter:hover {
  background-color: #ebebeb;
}

#tree {
  cursor: grab;
  width: auto;

}

.side-panel .general-info ul {
  padding-right: 0;
}

.side-panel .general-info ul li:first-child {
  border-top: 1px solid #E1E1E1;
}

.side-panel .general-info ul li {
  border-bottom: 1px solid #E1E1E1;
  padding: 1.2rem 2rem;
  display: flex;
}

.side-panel .diploma-list .list:not(:first-child) {
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #e1e1e1;
}

.side-panel .diploma-list .list {
  margin-bottom: 2rem;
}

.faqs.ES-material.gray-bg {
  padding-top: 1rem;
}

.news-details-link {
  width: 100%;
  justify-content: flex-end;
  display: flex;
}
.uni-inovations .news-details-link{
  display:flex;
  width:100%;
  justify-content:flex-end;
}
.faqs.ES-material {
  padding: 0 0 2rem 0;
}

.faqs.ES-material ul li:not(:first-child) {
  margin-top: .5rem;
}

.side-panel .general-info ul li .category {
  color: #828282;
  margin-left: 1rem;
}

.faqs.ES-material ul {
  padding-inline-start: 30px;
}

.faqs.ES-material ul li {
  position: relative;
}

.faqs.ES-material ul li::before {
  content: "";
  top: .8rem;
  right: -2rem;
  position: absolute;
  height: .8rem;
  width: .8rem;
  background-color: var(--blue-color);
}

.content-viewer-alt-dark .research-production {
  background: url(/themes/uoj_theme/media/repeat\ grid\ 3.png) var(--navy-blue-color);
}

.content-viewer-alt-dark .research-production .production-thumb img {
  width: 100%;
  margin-bottom: 2rem;
}

.content-viewer-alt .research-production {
  display: flex;
  background-color: #f4f4f4;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.content-viewer-alt-dark .research-production .title {
  color: white;
}

.content-viewer-alt-dark .research-production .desc {
  color: #c7c7c7;
}

.content-viewer-alt-dark.re-production .story img {
  object-fit: cover;
}

.content-viewer-alt-dark.re-production .story .our-story,
.content-viewer-alt-dark.re-production .story .image-container {
  margin-left: 0;
}

.content-viewer-alt-dark.re-production .story .image-container {
  max-height: unset;
}

.faqs.research-contact .be-in-contact {
  margin: 0;
  padding: 2rem 1rem;
}

.content-viewer-alt .research-production::before,
.content-viewer-alt-dark .research-production:before {
  content: unset;
}

.content-viewer-alt .research-production .production-thumb {
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.content-viewer-alt .research-production .desc {
  width: 100%;
}

.content-viewer-alt .research-production .production-thumb img {
  width: 100%;
}

.care-tiles.policies .row-cards {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.goals-container.re-production .description {
  text-align: center;
  margin: 1rem 0 2rem;
}

.care-tiles.policies .nav {
  justify-content: center;
  display: flex;
  margin-bottom: 3rem;
}

.care-tiles.policies .nav .nav-item .nav-link {
  background-color: unset;
  padding: .7rem 2rem;
}

.care-tiles.policies span {
  margin: 2rem auto;
}

.care-tiles.policies .nav .nav-item .nav-link:hover {
  color: var(--blue-color-hover);
}

.care-tiles.policies .nav .nav-item .nav-link.active {
  color: var(--blue-color);
  border-bottom: 2px solid var(--blue-color);
}

.orgchart-container {
  width: 100%;
  height: 31rem;
  position: relative;
}

.orgchart-container::after {
  position: absolute;
  top: 0;
  width: 95vw;
  height: 3rem;
  content: '';
  background-image: linear-gradient(to bottom, #f8f8f8, transparent);
  pointer-events: none;
}

.orgchart-container::before {
  position: absolute;
  bottom: -1rem;
  width: 95vw;
  height: 3rem;
  content: '';
  background-image: linear-gradient(to top, #f8f8f8, transparent);
  z-index: 1;
  pointer-events: none;
}

#tree.boc-light {
  background-color: #f8f8f8;
}

#tree:active {
  cursor: grabbing;
}

#tree::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background-image: linear-gradient(to right, #f8f8f8, transparent);
  width: 3rem;
  height: 100%;
  pointer-events: none;
}

#tree::before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  background-image: linear-gradient(to left, #f8f8f8, transparent);
  width: 3rem;
  height: 100%;
  pointer-events: none;
}

.Responsible-details .contactcta .call svg circle,
.Responsible-details .contactcta .mail svg circle {
  fill: rgba(34, 176, 233, 0.1);
  transition: .3s all ease;
}

.Responsible-details .contactcta .call svg:hover circle,
.Responsible-details .contactcta .mail svg:hover circle {
  fill: var(--blue-color);
}

.Responsible-details .contactcta .call svg path,
.Responsible-details .contactcta .mail svg path {
  stroke: var(--blue-color);
}

.Responsible-details .contactcta .call svg:hover path,
.Responsible-details .contactcta .mail svg:hover path {
  stroke: white;
}

.leaflet-popup-close-button {
  right: auto !important;
  left: 1.5rem !important;
  color: var(--blue-color) !important;
  top: 1rem !important;
  font-size: 2.6rem !important;
}

.disabled .map-filter span {
  opacity: 0.6;
}

.dropdown.main .map-filter {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.select-department .dropdown .map-filter {
  border-left: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}

.select-location .dropdown .map-filter {
  border-radius: 0;
}

.dropdown.clicked .map-filter span:first-child {
  font-size: 0.8rem;
  color: var(--txt-color);
}

.map-filter span {
  font-weight: var(--default-font-sb);
}

.disabled .map-filter span:first-child::after {
  background-image: url(/themes/uoj_theme/media/Icon\ feather-arrow-down-disabled.svg);
}

.dropdown.clicked #clickedValue,
#clickedFaculty,
#clickedDepartment,
#clickedBuilding {
  font-size: .9rem !important;
  color: black !important;
  max-width: 13ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: .3s all ease;
}

.dropdown .dropdown-menu#departments {
  display: none;
}

.select-location.disabled,
.select-department.disabled {
  pointer-events: none;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 8px 15px;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.Coordinates {
  color: var(--txt-color);
  margin-top: .3rem;
  display: flex;
}

.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: var(--black-color) transparent transparent transparent;
  position: absolute;
  top: 16px;
  left: 10px;
}

.select-styled:active:after,
.select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}

.building-overview .left-section {
  text-align: left;
}

.building-overview .Coordinates {
  font-size: .7rem;
  color: var(--txt-color);
}

.leaflet-top {
  bottom: 0.5rem;
  left: 1rem !important;
  align-items: end;
  top: auto !important;
  display: flex;
  flex-direction: column-reverse;
}

.selected-marker {
  opacity: 1 !important;
}

.leaflet-marker-icon {
  transition: .3s all ease;
}

.leaflet-tile-pane {
  opacity: .8;
  transition: .3s all ease;
}

.leaflet-tile-pane.active {
  opacity: .6;
}

.map-container #map {
  background-color: black;
  height: 30vh;
}

#map {
  height: calc(100vh - 8rem);
  background-color: black;
}

#map .leaflet-control-zoom {
  border: none;
  outline: none;
  box-shadow: none;
}

#map .leaflet-control-fullscreen-button {
  border-radius: 0.8rem !important;
  color: var(--blue-color) !important;
  background-color: white !important;
  background-image: url(/themes/uoj_theme/media/fullscreen-svgrepo-com.svg);
  background-size: 50%;
  background-position: center;
  height: 2.4rem;
  width: 2.4rem;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin-left: 0 !important;
}

#map .leaflet-bar a {
  color: var(--blue-color);
  margin: 0.5rem 0;
  display: flex;
  background-color: #ffffffe6;
  backdrop-filter: blur(10px);
  -webskit-backdrop-filter: blur(10px);
  align-items: center;
  transition: .3s all ease;
  border: 1px solid #e2e2e2;
  justify-content: center;
}

#map .leaflet-control-fullscreen-button {
  border-radius: 0.8rem !important;
  color: var(--blue-color) !important;
  background-color: #ffffffe6 !important;
  background-image: url(/themes/uoj_theme/media/fullscreen-svgrepo-com.svg);
  background-size: 45%;
  background-position: center;
  height: 2.8rem;
  width: 2.6rem;
  backdrop-filter: blur(10px);
  -webskit-backdrop-filter: blur(10px);
}

.leaflet-control-zoom .leaflet-control-zoom-in {
  margin-bottom: 0 !important;
  border-top-left-radius: .8rem !important;
  border-top-right-radius: .8rem !important;
}

.leaflet-control-zoom .leaflet-control-zoom-out {
  margin-top: 0 !important;
  border-bottom-left-radius: .8rem !important;
  border-bottom-right-radius: .8rem !important;
}

.select-department .dropdown .dropdown-menu.show#departments {
  display: initial;
  width: 100%;
  border: none;
  outline: none;
  height: auto;
}

.dropdown .map-filter {
  padding: 0.3rem .6rem;
}

.dropdown .map-filter:hover {
  background-color: #ebebeb;
}

.disabled .dropdown-menu.show {
  display: none;
}

/* MAP END */
/* GOOGLE ORG CHART START */
table.google-visualization-orgchart-table {
  border-collapse: inherit;
}

.google-visualization-orgchart-node {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, .125) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: 5px solid var(--blue-color) !important;
  padding: 1.5rem 1.8rem !important;
  font-size: 1rem !important;
  font-family: 'cairo', sans-serif !important;
}

.google-visualization-orgchart-noderow-medium {
  border-top: 5px solid var(--blue-color);
}

.google-visualization-orgchart-noderow-medium [title="navy-blue"] {
  border-top: 5px solid var(--navy-blue-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="red"] {
  border-top: 5px solid var(--red-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="green"] {
  border-top: 5px solid var(--green-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="orange"] {
  border-top: 5px solid var(--orange-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="dark-grey"] {
  border-top: 5px solid var(--dark-grey-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="purple"] {
  border-top: 5px solid var(--purple-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="mint-green"] {
  border-top: 5px solid var(--mint-green-color) !important;
}

.google-visualization-orgchart-nodesel {
  padding: 3rem 2.5rem !important;
}

.google-visualization-orgchart-connrow-medium {
  height: 24px !important;
}

.google-visualization-orgchart-lineleft {
  border-left: 1px solid rgba(0, 0, 0, .125) !important;
}

.google-visualization-orgchart-linebottom {
  border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

.google-visualization-orgchart-lineright {
  border-right: 1px solid rgba(0, 0, 0, .125) !important;
}

.president-tabview .nav-item .nav-link.active {
  background-color: white;
  border-top: 7px solid var(--blue-color);
}

.hamburger-submenu ul.ham-menu li,
.hamburger-submenu ul.ham-menu li a {
  border: none;
  padding: 0;
  font-size: 1rem;
  padding: .1rem 0.1rem;
  color: #495057;
  margin-bottom: 1rem;
  display: block;
}

.hamburger-submenu .ham-menu li.sub-title span {
  color: var(--navy-blue-color);
  font-size: 1.3rem;
}

.hamburger-submenu .ham-menu ul {
  padding: 1rem;
}

.hamburger-submenu ul.ham-menu,
.hamburger-submenu ul.ham-menu .subham-menu {
  display: none;
  padding: 1rem 1rem;
}

.hamburger-submenu .nav-item .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-direction: row;
  font-size: 1.4rem;
  padding-right: 2rem;
}

.steps .more-news-btn {
  display: none;
}

.hamburger-submenu .nav-item .icon svg {
  height: 1.5rem;
  width: 1.5rem;
  transform: rotate(90deg);
}

.hamburger-submenu .nav-item .icon {
  transition: all .3s ease-in-out;
}

.hamburger-submenu .nav-item.blue .icon {
  display: inline-block;
}

.hamburger-submenu .nav-item.blue .nav-link {
  color: var(--blue-color);
  padding: 0;
}

.hamburger-submenu .nav-item .ham-menu .nav-link {
  color: #495057;
  margin-bottom: 1rem;
  font-size: 1rem;
  padding: .1rem .6rem;
}

.hamburger-submenu {
  transform: translateX(-100%);
  width: 26.2rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  background-color: rgb(242, 242, 242);
  transition: all .3s ease-in-out;
  padding-bottom: 6rem;
  overflow: auto;
}

.main-menu-container .menu-links {
  padding: 0 5rem;
  width: 100%;
}

.hamburger-submenu::before {
  position: absolute;
  top: 0rem;
  left: -1rem;
  width: 77%;
  opacity: 0.5;
  height: 100%;
  transform: scale(0.9);
  background-image: url("/themes/uoj_theme/media/pattern-main-menu.svg");
  pointer-events: none;
  content: "";
}

.hamburger-submenu.enabled {
  transform: translateX(0%);
}

.hamburger-submenu .header {
  padding: 2rem 0.5rem;
  display: flex;
  align-items: baseline;
  background-color: white;
}

.hamburger-submenu .go-back,
.hamburger-submenu .header .title {
  cursor: pointer;
}

.hamburger-submenu .go-back .icon {
  transform: scaleX(0);
}

.hamburger-submenu .header .icon {
  height: 2rem;
  width: 2rem;
}

.hamburger-submenu .header .title {
  color: var(--blue-color);
  font-size: 1.5rem;
}

.hamburger-submenu .close-btn {
  display: block !important;
  top: 1.7rem !important;
  left: 1.7rem;
}

.hamburger-submenu .sub-title:first-child {
  margin-top: 1.5rem;
}

.hamburger-submenu ul {
  list-style-type: none;
  padding: 0;
}

.hamburger-submenu ul li {
  display: block;
  font-size: 1.4rem;
  padding: 0.8rem 0rem;
  border-bottom: 1px solid rgb(208, 208, 207);
}

.hamburger-submenu ul li:last-child {
  border-bottom: none;
}

.hamburger-submenu ul li.blue .icon {
  transform: rotate(-180deg);
}

.main-menu .menu-content .menu-links ul li.link {
  font-size: 1.5rem;
  margin-bottom: 1.8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.main-menu .menu-content .menu-links ul li .icon {
  height: 2rem;
  width: 2rem;
}

.main-menu .menu-content .menu-links ul .go-back .icon {
  transform: scaleX(1) !important;
}

.main-menu-container .main-menu .close-btn,
.hamburger-submenu .close-btn {
  position: absolute;
  top: 1rem;
  right: -4rem;
  z-index: 99;
  opacity: 1;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  display: none;
  height: 3rem;
  width: 3rem;
}
.main-menu-container .main-menu .close-btn svg,
.hamburger-submenu .close-btn svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* HAMBURGER SUBMENU END */
.story-img img {
  object-fit: cover !important;
}
.filter-table #table thead {
  display: none;
}
.filter-table .right-section {
  border: none;
}
.right-section .direction {
  cursor: pointer;
}
.right-section img {
  transform: scaleX(-1);
}
.gallery-container.container {
  padding: 1rem;
  min-height: 24rem;
}
.gallery-container .mason-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.gallery-container .mason-item.col-lg-4 {
  max-width: 93%;
  margin-bottom: 30px;
  padding: 0;
}
.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
}
.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #f5f5f5;
  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.select-options li:hover,
.select-options li.is-selected {
  background: #fff;
}
.select-options li[rel="hide"] {
  display: none;
}
.filter-labels {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.filter-labels span {
  margin-left: .4rem;
  min-width: max-content;
}
.filter-labels label {
  cursor: pointer;
  background-color: var(--light-grey-color);
  padding: .5rem 1.5rem;
  margin: 0;
  width: 100%;
  border-radius: .3rem;
  font-size: .9rem;
  color: var(--txt-color);
  flex-shrink: inherit;
  text-align: center;
}

.filter-labels label.active {
  background-color: #D6F3FF;
  color: var(--blue-color)
}

.submenu-item .nav-link {
  cursor: pointer;
}

.third-layer li {
  padding: .5rem 2rem !important;
  cursor: pointer;
}

.third-layer {
  display: none;
}

.third-layer div.nav-link {
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.hamburger-submenu ul .submenu-item label:hover,
.third-layer div.nav-link:hover {
  color: var(--blue-color);
}

.hamburger-submenu ul .submenu-item label {
  padding: .5rem 1rem;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.hamburger-submenu ul.submenu-item .nav-item {
  cursor: pointer;
}

.leaflet-popup-content-wrapper {
  /* width: 22.5rem; */
  width: 20rem;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  overflow: hidden;
}

.leaflet-popup-tip-container {
  left: -.6rem !important;
  margin-top: -1px;
  bottom: 162px !important;
  overflow: hidden;
  transform: rotate(90deg) !important;
  pointer-events: none;
}

.hamburger-submenu ul.third-layer li:last-child {
  border-bottom: none;
}

.filters-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 2rem;
}

.filters-container .filter-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filters-container .search-box {
  width: 88%;
}

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

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


.news-content .news-thumbnail {
  position: relative;
  z-index: 0;
}

.news-content .news-thumbnail img {
  z-index: 1
}

.card {
  border: none;
  border-radius: 0;
  width: 100%;
}

.card:hover img.card-img-top {
  transform: scale(1.1);
}

.card .card-img-top img {
  transition: all .6s ease-in-out;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.accordion-container.empty-accordion {
  cursor: unset;
  pointer-events: none;
}

.accordion-container.empty-accordion .accordion svg {
  Display: none;
}

#clickedValue,
#clickedFaculty,
#clickedBuilding {
  font-size: .7rem;
  padding-left: 2rem;
  color: #878787;
}

.menu-div {
  cursor: pointer;
  color: var(--black-color);
  transition: all .3s ease-in-out;
}

.menu-div:hover {
  color: var(--blue-color);
}

.filter-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem 1rem 1rem;
  width: 100%;
}

.filter-section .filter-btn {
  color: var(--txt-color);
  padding: .7rem 2rem;
  cursor: pointer;
  margin: 0 .3rem;
  transition: all .3s ease-in-out;
}

.filter-section .filter-btn.active {
  color: var(--blue-color);
  border-bottom: 2px solid var(--blue-color);
}

.filter-section .filter-btn.active:hover {
  border-bottom: 2px solid var(--blue-color);
}

.filter-section .filter-btn:hover {
  color: var(--blue-color-hover);
}

df-messenger {
  --df-messenger-button-titlebar-color: var(--green-color);
  --df-messenger-titlebar-padding: 1rem;
  --df-messenger-input-box-padding:0 2rem;
}

.aca-filter .dropdown button.btn.btn-light.dropdown-toggle {
  border: none;
  padding: .8rem .75rem;

}

.aca-filter .filter-dp {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.aca-filter .dp-container {
  display: none;
}

.aca-filter .dropdown-menu.radio i {
  text-align: right;
}

.aca-filter .filter-dp .dropdown {
  width: 100%;
  margin: .5rem 0;
  position: relative;
  background-color: white;
}

.filter-policies.aca-filter .filter-dp .dropdown {
  width: 100%;
}

.aca-filter .filter-dp .dropdown:first-child {
  margin-right: 0;
}

.programs-section {
  height: 60%;
  overflow: scroll;
}

.agent-profile a.nav-link {
  white-space: nowrap;
}

.agent-profile .tabs-wrapper {
  background-color: white;
  width: 100%;
}

.aca-filter .filter-dp .dropdown:last-child {
  margin-left: 0;
}
.filter-table table {
  width: 100%;
  margin-bottom: 2rem;
}

.filter-table table td {
  display: flex;
  flex-direction: column;
}

.filter-table .Table-container {
  width: 100%;
  overflow-x: auto;
}

.filter-table table thead th,
.filter-table table tbody tr:nth-child(even),
.filter-table table tbody tr.show:nth-child(even) {
  background-color: #efefef;
}

th,
td {
  padding: 12px;
}

select {
  margin: 1em 0;
}

.filter-table table th,
.filter-table table td {
  white-space: nowrap;
  width: auto;
}

.filter-table table tr.hide {
  display: none;
}

.result-section {
  background-color: #f5f5f5;
  padding: 2rem 0;
}
.result-section .result-body{
padding:2rem 0;
position: relative;
}

.filter-table table tr.show {
  display: table-row;
}

.result-body .card .card-body {
  padding: 2rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
}

.result-body .card {
  margin-bottom: 2rem;
}

.result-body .card .card-body .card-title {
  font-size: 1.4rem;
  color: black;
  margin-bottom: 1rem;
  transition: .3s all ease;
}

.result-body .card .card-body .card-text {
  color: var(--txt-color);
  line-height: 2;
}

.footer-contents .links-container {
  padding-top: .5rem;
  margin: 0;
}

.footer-contents .social-icons .fb svg,
.footer-contents .social-icons .insta svg {
  width: auto;
  height: 1.25rem;
}


.footer-contents .social-icons .fb:hover svg path,
.footer-contents .social-icons .fb:hover svg rect,
.footer-contents .social-icons .fb:hover svg circle,
.footer-contents .social-icons .Youtube:hover svg path {
  stroke: var(--blue-color-hover);
}

.footer-contents .social-icons .insta:hover svg path:last-child {
  fill: var(--blue-color-hover);
}

.footer-contents .social-icons .twitter-x:hover svg path {
  fill: var(--blue-color-hover);
  stroke: var(--blue-color-hover);
}

.footer-contents .social-icons .twitter-x svg {
  width: 1.1rem;
  height: 1.1rem;
}

.footer-contents .social-icons .Youtube svg {
  width: 1.3rem;
}

.footer-contents .links-container .title {
  position: relative;
}

.result-body .card .card-footer {
  background-color: transparent;
  padding: 2rem;
}

.result-body .card .card-footer a {
  color: var(--blue-color);
  text-decoration: none;
  transition: all .3s ease-in-out;
}

.result-body .card .card-footer a:hover {
  color: var(--blue-color-hover);
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: grey;
}

.result-header .dropdown {
  border: 1px solid #e1dfdf;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.result-header .dropdown button {
  background-color: transparent;
  padding: 1rem 2.3rem;
  font-family: var(--default-font);
}

.show-count label {
  color: var(--orange-color);
  margin: 0 .2rem;
}

.show-count .page-numb,
.show-count .res-count,
.show-count .page-count {
  font-weight: 500;
  margin: 0 .2rem;
}

.news-advertisements .news-item .card-img-overlay,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay {
  z-index: 2;
}

.life-jeddah .card {
  height: 15rem;
}

.life-jeddah .col-lg-3 .card .card-img-top img {
  height: 20rem;
  width: 100%;
  object-fit: cover;
  transition: all .3s ease-in-out;
}


.news-advertisements .news-item .card-img-top::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: "";
  z-index: 1;
  background-image: linear-gradient(225deg, rgb(0 0 0 / 75%) 1%, rgb(0 0 0 / 22%)40%, rgb(0 0 0 / 0%)50%, rgb(0 0 0 / 0%)90%);
}

.news-advertisements .news-item .card-img-top::after {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 22rem;
  width: 100%;
  content: "";
  background-image: linear-gradient(0deg, rgb(0 0 0 / 63%) 1%, rgb(0 0 0 / 58%)25%, rgb(0 0 0 / 10%)60%, rgb(0 0 0 / 13%)90%);
}

.details-panel .spinner-border {
  position: absolute;
  right: 45%;
  top: 50%;
  border: .25em solid var(--blue-color);
  border-right-color: transparent;
}

#block-facultydepartments {
  min-height: 20rem;
  position: relative;
}

#block-facultydepartments .spinner-border {
  border: .25em solid var(--blue-color);
  border-right-color: transparent;
  right: 49%;
  top: 17rem;
  display: none;
  position: absolute;
}

.submission-success {
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

lottie-player {
  height: 10rem !important;
}

.submission-success .main .animation {
  margin: auto;
}

.submission-success .success-message {
  font-size: 1.4rem;
  font-family: var(--default-font-b);
}

.labels-header {
  width: 100%;
  display: flex;
  flex-direction: column;

}

.submission-success .success-submessage {
  color: var(--gray-color);
}

.tabs.panel-tabs .card .icon {
  width: auto;
  height: 3rem;
  display: flex;
}


.card .icon {
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
}

.life-jeddah .card .icon {
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
}

.main-error-message {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem;
  background-color: rgb(255, 214, 214);
}

.main-error-message span {
  color: red;
  margin: 0 1rem;
}

.main-error-message svg {
  height: 1.5rem;
  width: 1.5rem;
  display: block;
}

.main-error-message svg path {
  fill: red;
}

form.user-login-form {
  margin: 2rem auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form.user-login-form .form-item-name,
form.user-login-form .form-item-pass {
  margin-bottom: 2rem;
}

form.user-login-form .submit-button {
  background-color: var(--blue-color);
  outline: none;
  border: none;
  color: white;
  padding: 0.7rem 2rem;
}

.fade-left,
.fade-right,
.fade-up,
.fade-in,
.zoom-in,
.fade-down {
  opacity: 0;
}

body.stop-animation .fade-left,
body.stop-animation .fade-right,
body.stop-animation .fade-up,
body.stop-animation .fade-in,
body.stop-animation .zoom-in,
body.stop-animation .fade-down {
  opacity: 1;
}

a.about-vision {
  position: relative;
  background-color: var(--blue-color);
  color: white;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  font-size: 1rem !important;
  padding: 0.6rem 3.5rem;
  line-height: 2 !important;
  display: flex !important;
  transition: all 0.3s ease-in-out 0s !important;
}
a.about-vision:hover{
  background-color: var(--blue-color-hover);
}

.vision-guidelines {
  margin: 1.5rem 0 1rem 0;

}


.vision-guidelines-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.particles-container .contents {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  padding: 0px;
  border-radius: 0;
  border: 1px solid #fff;
}

.particles-container .contents .logo {
  width: 15rem;
  height: auto;

}

.particles-container .contents .logo img {
  width: 100%;
  height: 100%;
}

.par-img {
  height: 100%;
}

.particles-container .contents .txt {
  margin: 2.5rem 0;
}

.contents .txt span {
  font-size: 1.8rem;
  color: var(--navy-blue-color);
  text-align: center;
  z-index: 1;
  display: block;
}

.news-content h1 {
  font-size: 1.6rem;
  line-height: 2;
}

.news-content h1.container {
  padding: 0 15px 0 0;
  margin: 0;
}

.wrapper .uoj-logo {
  width: 14rem !important;
  height: auto !important;
}

.masonry-grid_item.column {
  width: 100%;
  margin-bottom: 1rem;
}

#slide-10-layer-6,
#slide-10-layer-10 {
  direction: rtl;
  left: -1px;
  text-align: center !important;
  color: rgb(39, 93, 116) !important;
  font-size: 44px !important;
  line-height: 64px !important;
}

.sub .topnav .links a,
body.toolbar-horizontal .topnav .links a {
  color: var(--black-color);
}

.sub .topnav .links a:hover,
body.toolbar-horizontal .topnav .links a:hover {
  color: rgb(82, 82, 82);
}

.container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

body {
  font-family: var(--default-font);
  text-align: right;
  font-size: 1rem;
}

h2.error-message {
  display: none;
  font-size: 1.1rem;
  color: red;
  margin: auto;
}
h1.mx-auto.text-center.mb-5{
  margin-bottom: 5rem !important;
}
.input-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.input-error .input__field {
  border: 1px solid red !important;
}

.modal.search {
  animation: 500ms ease-in-out 0s 1 normal none running search-open;
}

.modal.search ins {
  font-family: Cairo, sans-serif;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: right;
  font-size: .9rem;
}

.modal.search ins p {
  margin: 0;
}

.form-check-inline .form-check-input {
  margin-left: 0.3rem;
}

.dropdown-menu.radio {
  right: 0px;
  left: auto !important;
  width: 100%;
  border: none;
  box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  height: auto;
  overflow: auto;
  animation: dropdownanimationsearch .5s;
}

.associates-tiles .dropdown-menu.radio {
  right: 0rem;
  left: auto !important;
  width: 100%;
  border: none;
  box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
  border-radius: 0;
}

#myTopnav .search svg g path {
  stroke: var(--black-color);
}

.sub #myTopnav .search svg g path,
body.toolbar-horizontal #myTopnav .search svg g path {
  stroke: var(--black-color);
}

.menu-mobile-icon #menu path {
  fill: var(--black-color);
}

div#myTopnav {
  background-color: white;
  position: relative;
}

.topnav .logo-container .long img,
.scroll .logo-container .long img {
  width: 4rem;
}

.rating .stars-container,
.left-section .card .rating {
  display: flex;
  align-items: end;
  direction: ltr;
  margin: 1rem 0 1.5rem;
  justify-content: center;
}

.rating .stars-container .star,
.left-section .card .rating .star {
  height: 1.4rem;
  width: 1.4rem;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 .1rem;
  background-size: 100%;

}

.details #detailsDesc {
  line-height: 2.2;
  font-size: 1rem;
  color: var(--txt-color);
}

.rating .stars-container .rating-value {
  color: var(--blue-color);
}

.rating .stars-container .star.empty,
.left-section .card .rating .star.empty {
  background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star-empty.svg");
}

.rating .stars-container .star.full,
.left-section .card .rating .star.full {
  background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star.svg");
}

.rating .stars-container .star.half,
.left-section .card .rating .star.half {
  background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star-half.svg");
}

line#Line_135,
line#Line_136 {
  stroke: var(--black-color);
}

g#Ellipse_27 {
  stroke: var(--black-color);
}

.details-panel line#Line_135,
.details-panel line#Line_136 {
  stroke: white;
}

.details-panel img {
  border: none;
  border-radius: 0;
  max-height: 20rem;
  object-fit: scale-down;
}

.details-panel g#Ellipse_27 {
  stroke: white;
}

.details-panel .list ul {
  list-style-type: none;
}

.details-panel .list ul li {
  color: var(--txt-color);
  line-height: 2.2;
  position: relative;
  padding: 0 1rem;
  text-align: justify;
}

.details-panel .list ul li::before {
  content: '';
  position: absolute;
  top: .8rem;
  right: -1rem;
  background-color: var(--blue-color);
  height: .8rem;
  width: .8rem;
}

.details-panel .accordion-container ul li::before {
  content: '';
  position: absolute;
  top: 1.3rem;
  right: -2rem;
  background-color: var(--blue-color);
  height: .8rem;
  width: .8rem;
}

.details-panel .accordion-container ul li::marker {
  display: none;
  font-size: 0;
}

.sec-layer {
  position: fixed;
  top: 21rem;
  left: 0;
  width: 100%;
  background-color: white;
  transform: translateX(-100%);
  height: 90%;
  transition: all .3s ease-in-out;
  overflow: auto;
}

.sec-layer.active {
  transform: translateX(0);
}

.sec-layer .header {
  display: flex;
  align-items: baseline;
}

.sec-layer .header {
  padding: 2rem 2rem 0rem;
}

.details-panel .accordion-group .collapse>span {
  padding: 1rem 1.2rem;
}

.sec-layer .header .go-back .icon {
  height: 2rem;
  width: 2rem;
}

.sec-layer .header .program-title {
  font-size: 1.7rem;
}

.ac-prog {
  padding: 0.3rem 1.2rem;
  color: var(--blue-color);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.ac-prog:hover {
  color: var(--blue-color-hover);
}

.logo-container div svg,
.topnav .logo-container div img {
  width: 2.4rem;
}

.white-logo {
  display: none;
}

.colored-logo {
  display: block;
}

.vertical-line {
  border-left: 0.03rem solid rgba(54, 54, 54, 0.29);
}

#myTopnav.scroll {
  transition: all 0.8s ease-in-out 0s;
  position: fixed;
  z-index: 4;
  background-color: white;
  animation: 900ms ease-in-out 0s 1 normal none running spFadeInDown;
  box-shadow: rgba(25, 25, 25, 0.05) 0px 10px 15px;
  top: 0;
}

#myTopnav.scroll .links a {
  color: var(--black-color);
  font-size: 0.85rem;
  padding: 0 0.7rem;
}


#myTopnav.scroll .languages .dropdown-toggle,
.sub .topnav .languages .dropdown-toggle ,
body.toolbar-horizontal .topnav .languages .dropdown-toggle{
  color: var(--black-color);
}

#myTopnav.scroll .languages svg path,
.sub .languages svg path,
body.toolbar-horizontal .languages svg path {
  fill: var(--black-color);
}

#myTopnav.scroll select {
  color: var(--black-color);
  font-size: 1.4rem;
}

#myTopnav .search svg {
  display: block;
}

.scroll .vertical-line {
  border: 0.03rem solid rgba(54, 54, 54, 0.29);
}

.scroll .accessibility svg path {
  fill: var(--black-color);
}

#myTopnav.scroll .search svg g path {
  stroke: var(--black-color);
}

.scroll .menu path {
  stroke: var(--black-color);
  fill: var(--black-color);
}

.modal-header .close-btn {
  opacity: 1;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.modal-header .close-btn:hover {
  opacity: 0.6;
}

.modal-backdrop {
  display: none !important;
}

.modal.acc-modal {
  width: 100%;
  height: auto;
  font-family: cairo, sans-serif;
  left: 0rem;
  top: auto;
  bottom: 0;
  z-index: 102;
  background-color: white;
  transform: translateY(100%);
  transition: all .3s ease-in-out;
  z-index: 102;
  display: block !important;
}

.acc-modal.enabled {
  transform: translateY(-4rem);
}

.acc-modal .modal-header {
  border: none;
  padding: 1rem 1rem 1rem;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 0px !important;
}
.acc-modal .modal-header .title{
  font-size:1.25rem;
  line-height:1.75rem;
}
.acc-modal .modal-body {
  background-color: var(--background);
}

.acc-modal .modal-body .title {
  text-align: right;
  font-size: 1.1rem;
}

.acc-modal .modal-body .imm-reader .title {
  margin-left: 1rem;
}

.acc-modal .modal-body .txt-size,
.acc-modal .modal-body .imm-reader,
.acc-modal .modal-body .colors {
  display: flex;
  background-color: white;
  padding: 1rem;
  position: relative;
}

.acc-modal .modal-body .reader {
  display: flex;
  position: relative;
}

.decrease.disabled,
.increase.disabled {
  pointer-events: none;
  background-color: lightgray !important;
}

.acc-modal .modal-body .txt-size .increase,
.acc-modal .modal-body .txt-size .decrease,
.acc-modal .modal-body .imm-reader .reader .btn-reader {
  height:2rem;
  width: 2rem;
  background-color: var(--blue-color);
  border-radius: 50%;
  padding: 0.3rem;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.acc-modal .modal-body .txt-size .increase:hover,
.acc-modal .modal-body .txt-size .decrease:hover,
.acc-modal .modal-body .imm-reader .reader .btn-reader:hover {
  background-color: var(--blue-color-hover);
}

.acc-modal .modal-body .txt-size .increase img,
.acc-modal .modal-body .txt-size .decrease img,
.acc-modal .modal-body .imm-reader .reader img {
  height: 80%;
  width: 80%;
}

.acc-modal .modal-body .txt-size .result {
  background-color: var(--background);
  padding: 0rem 3.5rem;
  border-radius: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.acc-modal .modal-body .txt-size .result input {
  border: none;
  background-color: transparent;
  text-align: center;
  width: 100%;
}

.acc-modal .modal-body .imm-reader .result {
  background-color: var(--background);
  padding: 0.1rem 4.2rem;
  margin-right: 1rem;
  border-radius: 3rem;
}

.acc-modal .modal-body .txt-size .increase {
  position: absolute;
  left: 0;
}

.acc-modal .modal-body .txt-size .decrease {
  position: absolute;
  right: 0;
}
.acc-modal .modal-body .imm-reader,
.acc-modal .modal-body .txt-size .acc-modal .modal-body .colors {
  margin: 0.2rem 0px;
}

.acc-modal .modal-body .colors {
  flex-direction: column;
}

.acc-modal .modal-body .colors .colors-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 1rem;
  align-items: flex-start;
  width: 20rem;
  gap: 0 1rem;
}

.font-editor {
  display: flex;
  width: 46%;
  margin-right: 1.5rem;
  position: relative;
}

.acc-modal .modal-body .colors .colors-list .color {
  display: flex;
  position: relative;
  text-align: right;
  align-items: center;
  justify-content: flex-start;
  width: 44%;
  margin-bottom: 1rem;
  padding: 0.5rem 1.8rem;
  cursor: pointer;
  transition: all .4s ease-in-out;
  border-radius: 3rem;
}

.protanopia {
  filter: url("#protanopia");
}

.deuteranopia {
  filter: url("#deuteranopia");
}

.achromatopia {
  filter: grayscale(100%);
}
.news-video video {
  width: 100%;
}
.details-panel.uni-pillars .side-panel {
  height: 100%;
  width: 100%;
}
.swiper-container.tabpane-swiper {
  overflow-x: clip;
  position: relative;
  width: 100%;
  margin: 3.5rem 0;
  padding: 0 1rem;
}
.details-panel.uni-pillars .container {
  padding: 1.5rem;
}

.details-panel.uni-pillars .row {
  position: relative;
}

.details-panel.uni-pillars .row:not(:last-child):after {
  position: absolute;
  height: 100%;
  width: 100%;
  content: '';
  background-repeat: no-repeat;
  bottom: -80%;
  left: 29%;
  transform: scale(.6);
  background-image: url(/themes/uoj_theme/media/Pillar-arrow.svg);
}

.details-panel.uni-pillars .row:not(:first-child) {
  margin-top: 1.8rem;
}

.details-panel.uni-pillars .row {
  align-items: center;
  justify-content: center;
}

.details-panel.uni-pillars .pillar-c {
  width: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.details-panel.uni-pillars .pillar-c .card {
  margin: .5rem;
}

.details-panel.uni-pillars .row:first-child .card,
.details-panel.uni-pillars .row:nth-child(2) .card {
  width: 9.5rem;
  height: 12.5rem;

}

.details-panel.uni-pillars .row:nth-child(2) .card .card-img-overlay {
  background-color: var(--blue-color);
}

.details-panel.uni-pillars .row:last-child .card .card-img-overlay {
  height: 2.5rem;
  background-color: var(--orange-color);
}

.details-panel.uni-pillars .row:nth-child(2) .col-md-4:first-child .card {
  float: left;
}

.details-panel.uni-pillars .row:nth-child(2) .col-md-4:last-child .card {
  float: right;
}

.details-panel.uni-pillars .row .card {
  height: 10.5rem;
  width: 8rem;
  margin: .5rem;
  border: none;
}

.details-panel.uni-pillars .row .card .card-img-top {
  min-height: unset;
}

.details-panel.uni-pillars .row .card .card-img-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 3px solid white;
  height: 3.5rem;
  width: 100%;
  color: white;
  border-radius: 0;
  left: unset;
  right: unset;
  bottom: 0;
  background-color: #002247;
  top: unset;
  font-family: var(--default-font-b);
}

.details-panel.uni-pillars .row .card .card-img-overlay .card-title {
  margin-bottom: unset;
  font-size: .82rem;
  line-height: 1.3;
  text-align: center;
}

.details-panel.uni-pillars img {
  max-height: unset;
  object-position: center;
}

.details-panel.uni-pillars {
  background-color: #F7F7F7;
}

.details-panel.uni-pillars .title {
  padding: 2rem;
  background-color: white;
}

.protanopia.color::before {
  background-color: var(--orange-color);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 0.5rem;
  opacity: 0.5;
}

.deuteranopia.color::before {
  background-color: var(--green-color);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 0.5rem;
  opacity: 0.5;
}

.tritanopia {
  filter: url("#tritanopia");
}

.filter-colors {
  display: none;
}

.tritanopia.color::before {
  background-color: var(--blue-color);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 0.5rem;
  opacity: 0.5;
}

.achromatopia.color::before {
  background-color: var(--txt-color);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 0.5rem;
  opacity: 0.5;
}

.reset.color::before {
  background-color: var(--navy-blue-color);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 0.5rem;
  opacity: 0.5;
}

.color label {
  margin-right: 0.5rem;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  cursor: pointer;
}

.acc-modal .modal-body .imm-reader .reader .btn-reader {
  position: absolute;
  right: 1rem;
  top: -1px;
}

.acc-modal .color.active {
  background-color: #f8f8f8;
  border: .2rem solid var(--blue-color);
}

.acc-modal .color {
  border: .2rem solid transparent;
}

.national-priorities {
  margin-bottom: 5rem;
}

.national-priorities .tiles-container {
  display: flex;
  flex-wrap: wrap;
}
.national-priorities .tiles-container .col-lg-3{
  padding:0;
}
.national-priorities .tiles-container .col-lg-3 .card {
  overflow: hidden;
  margin-bottom: 1rem;
}

.national-priorities .tiles-container .col-lg-3:hover .card-img-top {
  transform: scale(1.1);
}

.national-priorities .tiles-container .card-img-top {
  height: 26rem;
  min-height: unset;
  transition: all .3s ease-in-out;
}

.national-priorities .tiles-container .card-img-top::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
  content: '';
}

.national-priorities .tiles-container .card-img-top::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .2);
  content: '';
}

.national-priorities .tiles-container .card-img-overlay {
  display: flex;
  align-items: end;
}

.national-priorities .tiles-container .card {
  cursor: pointer;
}


.national-priorities .tiles-container .card-img-overlay .card-title {
  color: white;
  font-size: 1.3rem;
  margin-bottom: unset;
}

.research-priorities {
  display: none;
}

.research-priorities,
.updated-policies {
  width: 100%;
  height: auto;
  padding: 6rem 0;
  background-color: white;
}

.research-priorities img {
  height: 48rem;
}

.research-priorities .research-info {
  padding: 0 5rem 0 0;
}

.research-priorities .research-info .research-info-title {
  font-size: 2.5rem;
  font-family: var(--default-font-sb);
  color: #484848;
}

.research-priorities .research-info .research-info-description {

  font-size: 1.2rem;
  margin: 3rem 0;
  color: #828282;
  line-height: 2.3;
}

.research-priorities .accordion {
  margin: 0;
}

.research-priorities .accordion-container {
  border: 1px solid #E8E8E8;
  padding: 2rem 1.5rem;
}

.research-priorities .accordion {
  position: relative;
  display: flex;
  align-items: center;
}

.research-priorities .accordion-group {
  position: relative;
}

.research-priorities .accordion-group:not(:first-child) {
  margin-top: 1.5rem;
}

.research-priorities .accordion-group .pattern {
  position: absolute;
  top: .8rem;
  left: 1.5rem;
}


.research-priorities .accordion-container .accordion span {
  font-size: 1.2rem;
}

.research-priorities .accordion-container .accordion svg {
  transform: rotate(0deg);
  transition: .3s all ease;
}

.research-priorities .accordion-container .accordion.collapsed svg {
  transform: rotate(90deg);
}

.research-priorities .accordion-container .accordion-detail {
  margin: 1.5rem 3rem 0 1rem;
  color: #828282;
  line-height: 2.2;
  font-size: 1rem;
  width: 85%;
}

.updated-policies .title {
  font-size: 2.5rem;
}

.updated-policies .news-advertisements .card:hover .card-img-top img {
  transform: scale(1.1);
}

.updated-policies .news-advertisements .card {
  cursor: pointer;
}

.updated-policies .desc {
  font-size: 1.2rem;
  margin: 3rem auto 3.5rem;
  color: #828282;
  line-height: 2.3;
  width: 80%;
}

.updated-policies .news-advertisements {
  background-color: unset;
  padding-top: unset;
  padding-bottom: unset;
}

.side-panel .list {
  margin-top: 3rem;
  padding: 0 2rem;
}

.RP.side-panel .list h4 {
  margin-bottom: 2rem;
}

.updated-policies .news-advertisements .news-item:nth-child(2) .card {
  border-bottom-color: var(--orange-color);
}


.updated-policies .news-advertisements .news-item:nth-child(3) .card {
  border-bottom-color: var(--green-color);
}

.updated-policies .news-advertisements .icon img {
  width: 4.5rem;
  height: 4rem;
}

.updated-policies .news-advertisements .card-title {
  font-size: 1.8rem !important;
  margin-bottom: 1.5rem;
}

.updated-policies .title,
.updated-policies .desc {
  text-align: center;

}

.updated-policies .news-advertisements .card-img-overlay {
  padding: 2rem;
}

.Supported-research-programs {
  background-image: url(/themes/uoj_theme/media/Research-backdrop.jpg);
}

.Supported-research-programs .title {
  font-size: 3rem;
  text-align: center;

}

.Supported-research-programs .desc {
  font-size: 1.2rem;
  margin: 3rem auto 0;
  color: #828282;
  line-height: 2.3;
  width: 80%;
  text-align: center;
}

.side-panel-attr p {
  margin-bottom: 2rem;
}


.side-panel-attr h5 {
  margin-bottom: 2rem;
  color: black;
}

.side-panel-attr ul {
  padding: 0;
}

.side-panel-attr ul li:not(:last-child) {
  margin-bottom: .5rem;
}

.side-panel-attr ul li {
  position: relative;
  padding-right: 2rem;
}

.side-panel-attr ul li::after {
  position: absolute;
  top: .8rem;
  right: 0;
  width: .8rem;
  height: .8rem;
  background-color: var(--blue-color);
  content: '';
  display: none;
}


.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card {
  border-right: 10px solid var(--red-color);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card {
  border-right: 10px solid var(--purple-color);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card .pattern svg ellipse {
  fill: var(--red-color);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card .pattern svg ellipse {
  fill: var(--purple-color);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card li::before {
  background-color: var(--red-color);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card li::before {
  background-color: var(--purple-color);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card li:hover {
  color: var(--red-color);
  cursor: pointer;
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card li:hover {
  color: var(--purple-color);
  cursor: pointer;
}



.news-advertisements.innovations .title {
  font-size: 3.4rem;
  text-align: center;
  margin-bottom: 3rem;
}

.news-advertisements.innovations .card {
  border-width: 6px;
}

.news-advertisements.innovations .card .card-title {
  bottom: 2rem;
}

.news-advertisements.innovations .card .card-title .card-desc {
  font-size: 1rem;
  color: silver;
  margin-top: 1rem;
  opacity: 0;
  transition: .3s all ease;

}

.news-advertisements.innovations .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: auto;
  margin-top: 1.5rem;
}

.research-production {
  background-color: white;
  position: relative;
  padding: 3rem 1rem 2rem;
}

.research-production::before {
  content: '';
  top: 0;
  right: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/themes/uoj_theme/media/research-pat.png);
  background-size: cover;
}

.research-production .title,
.research-collaboration .title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.research-production .desc {
  color: #828282;
  line-height: 2;
  font-size: 1rem;
  width: 100%;
  padding-bottom: 2rem;
  text-align: justify;
}

.research-collaboration .desc {
  color: #828282;
  line-height: 2;
  font-size: 1.3rem;
}

.research-production img {
  height: 100%;
}

.research-production .production-thumb {
  display: flex;
  justify-content: flex-end;
}

.research-collaboration {
  padding-top: 10rem;
  padding-bottom: 8rem;
}

.research-collaboration img {
  width: 100%;
  height: 100%;
}

.research-production .col-md-6:first-child {

  padding-top: 0rem;
}


.research-collaboration .col-md-6:nth-child(2) {
  padding-right: 6rem;
}


.research-collaboration .row:nth-child(2) .col-md-6:nth-child(2) {
  padding-right: 4rem;
}

.research-collaboration .row:nth-child(2) .col-md-6:nth-child(1) {
  padding-top: 4rem;
  padding-left: 6rem;
}

.research-collaboration .row:nth-child(2) .col-md-6:nth-child(2) {
  transform: translateY(-4rem);
}

.main-menu-container .main-menu {
  width: 32rem;
  height: 100%;
  position: fixed;
  left: 0px;
  transform: translateX(-100%);
  top: 0px;
  background-color: rgb(242, 242, 242);
  z-index: 101;
  display: flex;
  transition: all 0.3s ease 0s;
}

.main-menu-container.enabled .main-menu {
  transform: translateX(0px);
}

.main-menu-container .dimmer {
  background-color: rgba(0, 0, 0, 0.47);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  opacity: 0;

  transition: all 0.3s ease 0s;
}

.main-menu-container .dimmer.activated {
  opacity: 1;
  z-index: 101;
}

.main-menu-container.enabled .dimmer {
  pointer-events: all;
  opacity: 1;
  z-index: 101;
}

.main-menu-container .main-menu .right-options {
  width: 22%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-left: 1px solid rgb(208, 208, 207);
  position: relative;
  overflow: hidden;
}

.main-menu-container .main-menu .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-menu-container .main-menu .logo img {
  width: 4rem;
}

.main-menu-container .main-menu .devider {
  height: 40%;
  width: 1px;
  background-color: rgb(208, 208, 207);
}

.main-menu-container .main-menu .social-icons {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-menu-container .main-menu .social-icons a {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.main-menu-container .main-menu .social-icons a svg {
  width: 4rem;
  height: auto;
}

.main-menu-container .main-menu .social-icons a:first-child:hover svg g:first-child {
  fill: rgb(255 0 0 / 20%);
}

.main-menu-container .main-menu .social-icons a:first-child:hover svg g:last-child path,
.main-menu-container .main-menu .social-icons a:first-child:hover svg g:first-child circle:last-child {
  stroke: var(--red-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(2):hover svg g:first-child {
  fill: rgb(13 162 144 / 20%);
}

.main-menu-container .main-menu .social-icons a:nth-child(2):hover svg path {
  fill: var(--green-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(2):hover svg g circle:last-child {
  stroke: var(--green-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(3):hover svg g:first-child ellipse:last-child {
  fill: rgb(0 34 71 / 20%);
  stroke: var(--navy-blue-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(3):hover svg g:last-child g>path {
  fill: var(--navy-blue-color);
  stroke: var(--navy-blue-color);
}

.main-menu-container .main-menu .social-icons a:last-child:hover svg g:first-child path:first-child {
  fill: rgb(34 176 233 / 20%);
}

.main-menu-container .main-menu .social-icons a:last-child:hover svg g:first-child path:last-child {
  fill: var(--blue-color);
}

.main-menu-container .main-menu .social-icons a:last-child:hover svg>path {
  stroke: var(--blue-color);
}

.panel-tabs.tabs {
  flex-direction: column;
}

.main-menu-container .main-menu .menu-content {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 87%;
  flex-direction: column;
  align-items: center;
  align-self: center;
  position: relative;
  overflow: hidden;
}

.main-menu-container .main-menu .menu-content::after {
  position: absolute;
  top: 0rem;
  left: -1rem;
  width: 77%;
  opacity: 0.5;
  height: 100%;
  transform: scale(0.9);
  background-image: url("/themes/uoj_theme/media/pattern-main-menu.svg");
  pointer-events: none;
  content: "";
}

.main-menu-container .main-menu .close-btn:hover {
  opacity: 0.7;
}

.main-menu-container .main-menu .close-btn img {
  width: 80%;
}

.main-menu .menu-content .main-logo {
  display: flex;
}

.main-menu .menu-content .main-logo img {
  width: 90%;
}

.main-menu .menu-content .menu-links ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.main-menu .menu-content .menu-links ul a {
  color: var(--black-color);
  transition: all 0.3s ease 0s;
}

.main-menu .menu-content .menu-links ul a:hover {
  color: var(--blue-color);
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.main-menu .menu-content .menu-links ul a.selected {
  color: var(--blue-color);
  position: relative;
}

.main-menu .menu-content .menu-links ul a.selected::after {
  position: absolute;
  content: "";
  top: 1.35rem;
  right: -3rem;
  width: 0.8rem;
  border-radius: 50%;
  height: 0.8rem;
  background-color: var(--blue-color);
}

.main-menu .menu-content .sign-in,
.hamburger-submenu .sign-in {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  margin-top: 1.8rem;
  border-top: 1px solid rgba(192, 192, 192, 0.46);
}

.main-menu .menu-content .sign-in a.btn,
.hamburger-submenu .sign-in a.btn {
  width: fit-content;
  background-color: var(--blue-color);
  padding: 1rem 4rem;
  font-family: var(--default-font-sb);
  color: white;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.main-menu .menu-content .sign-in a.btn:hover,
.hamburger-submenu .sign-in a.btn:hover {
  background-color: var(--blue-color-hover);
}

.main-menu .social-icons a:last-child {
  margin-bottom: 0px;
}

.main-menu .social-icons img {
  width: 2.5rem;
}

.close {
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.weather-side-menu .close {
  pointer-events: all;
}

.weather-side-menu {
  position: fixed;
  top: 0px;
  left: 0px;
  transform: translateX(-100%);
  z-index: 5;
  height: 100vh;
  width: 100vw;
  transition: all 0.3s ease 0s;
  display: none;
  background-color: rgb(242, 242, 242);
}

.weather-side-menu.toggled {
  transform: translateX(0px);
}

.weather-side-menu .menu-label {
  padding: 1.5rem 4rem;
  background-color: white;
  text-align: center;
  width: 100%;
  font-size: 2rem;
}

.weather-side-menu .feed {
  margin: 3rem 1rem;
}

.weather-side-menu .feed .location-detail:first-child {
  margin-top: 0px;
}

.weather-side-menu .feed .location-detail {
  padding: 1.5rem 1rem;
  background-color: white;
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.filter-table table {
  border-top: 1px solid #dbd9d9;
  border-bottom: 1px solid #dbd9d9;
}

.filter-table .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.filter-table .header .right-section {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  justify-content: space-between;
}

.filter-table .header .right-section h3 {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.filter-table tr {
  display: flex;
  flex-direction: column;
}

.filter-table tr td::before {
  font-family: var(--default-font);
}

.filter-table tr td {
  display: flex;
  flex-direction: column;
  font-family: var(--default-font-b);
}

.filter-table tr td::before {
  content: attr(data-title);
}
.details-panel .panel-tabs.subject-tabs {
  padding: 1.5rem 0 0;
}

.filter-table .header .right-section .label-count {
  background-color: #22b1e940;
  color: #0db6f9;
  padding: .5rem .6rem;
  border-radius: .5rem;

}

.filter-table .dropdown button {
  border: 1px solid #dbd9d9;
  padding: 0.7rem 1.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}
.filter-table .dropdown .dropdown-menu{
  width:100%;
}
.filter-table .header .caret svg {
  height: 1rem;
  width: 1rem;
  transform: rotate(90deg);
}

.weather-side-menu .feed .location-detail:nth-child(2n+1) {
  border-top: 0.4rem solid var(--blue-color);
}

.weather-side-menu .feed .location-detail:nth-child(2n+3) {
  border-top: 0.4rem solid var(--green-color);
}

.weather-side-menu .feed .location-detail:nth-child(2n+2) {
  border-top: 0.4rem solid var(--orange-color);
}

.weather-side-menu .feed .location-detail .status {
  align-items: center;
  display: flex;
}

.weather-side-menu .feed .location-detail .status .detail {
  margin-right: 1.5rem;
}

.weather-side-menu .feed .location-detail .status .detail .city {
  font-size: 1.1rem;
  font-family: var(--default-font-b);
}

.weather-side-menu .feed .location-detail .status .detail .city-condition {
  font-size: 1.1rem;
  color: rgb(130, 130, 130);
}

.weather-side-menu .feed .location-detail .condition {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}

.weather-side-menu .feed .location-detail .condition .low {
  padding-left: 1rem;
  border-left: 1px solid rgb(221, 221, 221);
  font-size: 2rem;
  font-family: var(--default-font-sb);
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}

.weather-side-menu .feed .location-detail .condition .high {
  margin-right: 1rem;
  font-size: 1.5rem;
  font-family: var(--default-font-sb);
  display: flex;
  align-items: center;
}

.weather-side-menu .feed .location-detail .condition .high sup {
  margin-left: 0.2rem;
}

.notifications-side-menu.toggled {
  pointer-events: all;
}

.notifications-side-menu .menu-container {
  background-color: rgb(244, 244, 244);
  width: 100vw;
  float: left;
  height: 100%;
  overflow-y: auto;
}

.notifications-side-menu .menu-label {
  padding: 1.5rem 4rem;
  background-color: white;
  text-align: center;
  width: 100%;
  font-size: 2rem;
}

.notifications-side-menu .notifications {
  display: flex;
  padding: 2rem 1rem;
  width: 100%;
  flex-direction: column;
  color: rgb(88, 88, 88);
}

.notifications-side-menu .notifications .item .date {
  font-size: 1.2rem;
  margin-top: 3rem;
}

.notifications-side-menu .notifications .item:first-child .date {
  margin-top: 0px;
}

.notifications-side-menu .notifications .item {
  width: 100%;
}

.notifications-side-menu .notifications .item .content {
  display: flex;
  flex-direction: row;
  margin-top: 1rem;
  background-color: white;
  width: 100%;
  padding: 1.2rem 2rem 1.2rem;
  justify-content: space-between;
  position: relative;
  align-items: center;
}

.notifications-side-menu .notifications .item .content::after {
  position: absolute;
  top: 0px;
  right: 0px;
  content: "";
  width: 0.7rem;
  height: 100%;
  background-color: var(--blue-color);
}

.notifications-side-menu .notifications .item:nth-child(2n) .content::after {
  background-color: var(--orange-color);
}

.notifications-side-menu .notifications .item:nth-child(3n) .content::after {
  background-color: var(--green-color);
}

.notifications-side-menu .notifications .item:nth-child(4n) .content::after {
  background-color: var(--red-color);
}

.notifications-side-menu .notifications .item .content .desc {
  font-size: 1rem;
  margin-left: 1rem;
  color: var(--black-color);
}

.notifications-side-menu .notifications .item .content .time {
  color: grey;
  text-wrap: nowrap;
}

.side-menu,
.details-panel {
  position: fixed;
  top: 0px;
  left: 0px;
  transform: translateX(-100%);
  z-index: 102;
  height: 100vh;
  transition: all 0.3s ease 0s;
  display: none;
}

.side-menu.toggled,
.details-panel.toggled {
  transform: translateX(0px);
  flex-direction: column;
  display: flex !important;
}

.twitter-side-menu {
  background-color: rgb(244, 244, 244);
}

.twitter-side-menu.toggled {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.polls-side-menu {
  display: none;
}

.polls-side-menu .menu-container {
  background-color: rgb(244, 244, 244);
  width: 100vw;
  float: left;
  height: 100vh;
  overflow: auto;
}
.polls-side-menu .questions-section {
  margin: 3rem 2rem;
  background-color: white;
  padding: 2rem;
}
.polls-side-menu .questions-section .question {
  font-size: 1.1rem;
}
.polls-side-menu .questions-section .answers {
  margin: 2rem 0px;
}
.polls-side-menu .questions-section .submit-button {
  background-color: var(--blue-color);
  padding: 0.5rem 2rem;
  text-align: center;
  width: fit-content;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.polls-side-menu .questions-section .submit-button:hover {
  background-color: var(--blue-color-hover);
}

.polls-side-menu .menu-label {
  padding: 1.5rem 4rem;
  background-color: white;
  text-align: center;
  width: 100%;
  font-size: 2rem;
}

.polls-side-menu .questions-section .answers input:last-child {
  margin-bottom: 0px;
}

.polls-side-menu .questions-section .answers input {
  margin-bottom: 1.5rem;
}

.polls-side-menu .questions-section .answers label {
  padding-right: 0.5rem;
  color: rgb(112, 112, 112);
}

.polls-side-menu .answers-section {
  margin: 3rem 1.5rem;
  background-color: white;
  padding: 2rem 0px;
  flex-direction: column;
  transition: all 0.3s ease 0s;
  transform: translateX(0rem);
  justify-content: center;
  animation: 0.3s ease 0s 1 normal none running poll-answers-reveal;
}
.polls-side-menu .answers-section h5{
  padding:0 1rem;
  margin-bottom:2rem;
}
.polls-side-menu .answers-section .result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0px;
  margin-bottom: 1rem;
}

.polls-side-menu .answers-section .result .percentage {
  width: 50%;
  margin-left: 1.5rem;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  position: relative;
}

.polls-side-menu .answers-section .result .percentage::after {
  top: -0.8rem;
  left: 0px;
  height: 3.3rem;
  width: 0.07rem;
  background-color: rgb(112, 112, 112);
  content: "";
  position: absolute;
}

.polls-side-menu .answers-section .result:nth-child(n) .percentage .bar {
  background-color: var(--blue-color);
  height: 20px;
}

.polls-side-menu .answers-section .result:nth-child(2n) .percentage .bar {
  background-color: var(--orange-color);
  height: 20px;
}

.polls-side-menu .answers-section .result:nth-child(3n) .percentage .bar {
  background-color: var(--green-color);
  height: 20px;
}

.polls-side-menu .answers-section .result .desc {
  width: 54%;
  margin-top: 1.5rem;
  text-align: center;
}

.polls-side-menu .answers-section .result .percentage .text {
  text-align: left;
  margin-left: 1rem;
  font-family: var(--default-font-b);
}

.twitter-side-menu .twitter-timeline-container {
  overflow: scroll;
  display: flex;
  width: 100%;

}

.twitter-side-menu .twitter-timeline-container .main-jeddah,
.twitter-side-menu .twitter-timeline-container .jeddah-news {
  display: none;
}

.twitter-side-menu .twitter-timeline-container .main-jeddah.active,
.twitter-side-menu .twitter-timeline-container .jeddah-news.active {
  display: block;
  width: 100%;
}

.twitter-side-menu .accounts-handler {
  width: 15%;
  background-color: rgb(244, 244, 244);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.twitter-side-menu .accounts-handler .account {
  width: 3rem;
  height: 3rem;
  background-color: white;
  border-radius: 50%;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid silver;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.twitter-side-menu .accounts-handler .account:hover {
  border: 1px solid var(--green-color);
}

.twitter-side-menu .accounts-handler .account.selected {
  border: 4px solid var(--green-color);
}

.twitter-side-menu .accounts-handler .account img {
  width: 50%;
  height: 50%;
}

.side-menu-container {
  position: fixed;
  z-index: 10;
  left: 0px;
  top: 0px;
  height: 100vh;
  width: 0px;
  display: flex;
  visibility: hidden;
  transition: width 0.8s ease 0s;
}

.side-menu-main-div {
  background-color: rgb(242, 242, 242);
  width: 85%;
  height: 100%;
  display: flex;
}

.side-menu-close-div {
  background-color: transparent;
  width: 15%;
  height: 100%;
}

.close-btn-div {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid white;
  float: right;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.side-menu-content-div {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0px;
  justify-content: space-between;
  background-image: url("/themes/uoj_theme/media/Layer 3.svg");
}

.side-menu-link-div {
  display: flex;
  align-items: center;
  justify-content: end;
}

.side-menu-link-div p {
  font-family: Cairo-Regular;
  font-size: 24px;
  margin-right: 10px;
}

.side-menu-link-div div {
  width: 10px;
  height: 10px;
  background-color: rgb(36, 156, 210);
  border-radius: 50%;
}

.side-menu-btn-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.horizontal-line-break {
  border-top: 1px solid black;
  width: 85%;
  opacity: 0.3;
}

.side-menu-btn {
  background-color: rgb(34, 176, 233);
  color: white;
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-top: 9%;
}

.side-menu-btn p {
  font-size: 15px;
  font-family: Cairo-Regular;
}

.active-side-link {
  color: rgb(36, 156, 210);
}

.side-menu-socials-div {
  width: 20%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px 30px;
}

.side-menu-vertical-line {
  border: 1px solid rgb(215, 213, 213);
  height: 40%;
}

.side-menu-social-icon-div {
  border: 1px solid black;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebuttons {
  left: 0px;
  top: 60%;
  z-index: 3;
  position: fixed;
  transform: translateX(-100%);
  opacity:0;
  transition: all 0.3s ease 0s;
  animation: .8s fade-left forwards;
}

.sidebuttons>div {
  cursor: pointer;
}

.sidebuttons .twitter-side a {
  display: flex;
  justify-content: flex-end;
}

.sidebuttons>div.twitter-side,
.sidebuttons>.other-toggles>div {
  transform: scale(1) translateX(0px);
  transition: all 0.3s ease 0s;
}

.sidebuttons>div.twitter-side:hover,
.sidebuttons>.other-toggles>div:hover {
  transform: scale(1.2) translateX(5px);
  transition: all 0.3s ease 0s;
}

.sidebuttons.toggled {
  top: 18rem;

}

.sidebuttons.toggled .other-toggles {
  transform: translateX(0px);
  display: flex;
}

.twitter-side-menu button.close {
  right: 9px;
  top: 9rem;
  position: absolute;
}

.notifications-side-menu button.close,
.weather-side-menu button.close,
.polls-side-menu button.close {
  right: 1rem;
  top: 1.7rem;
  width: fit-content;
  position: absolute;
}

.sidebuttons.toggled .sidebuttons-toggler {
  left: -.6rem;
  top: 19.6rem;
}

.sidebuttons div {
  display: flex;
  justify-content: flex-end;
}

.sidebuttons .other-toggles {
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  display: none;
  transition: all 0.3s ease 0s;
}

.sidebuttons .other-toggles div {
  margin-top: 0.5rem;
}

.sidebuttons .sidebuttons-toggler {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  left: -14px;
  top: 3.8rem;
  transition: all 0.3s ease 0s;
}

.sidebuttons .sidebuttons-toggler svg {
  transform: translateX(0px);
  transition: all 0.3s ease 0s;
  height: 40px;
  width: 40px;
}

.sidebuttons .sidebuttons-toggler:hover svg {
  transform: translateX(0.5rem);
  transition: all 0.3s ease 0s;
}

.website-loader.active {
  opacity: 1;
}

.website-loader {
  position: fixed;
  width: 100%;
  display: flex;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0px;
  z-index: 102;
  justify-content: center;
  opacity: 0;
  align-items: center;
  flex-direction: column;
  transition: all 1s ease 0s;
  pointer-events: none;
}

.website-loader .loading {
  color: white;
  font-family: var(--default-font-sb);
  text-align: center;
}

.website-loader .loader1 {
  width: 40%;
  height: 5px;
  background-color: rgb(225, 225, 225);
  border-radius: 20px;
  margin: 30px 0px;
}
.website-loader .loader1 .bar1 {
  width: 100%;
  height: 5px;
  background-color: var(--blue-color);
  z-index: 99;
  border-radius: 20px;
  animation: 2s ease-out 0s 1 normal none running bar1;
}
.uoj-electronic {
  position: absolute;
  top: 12rem;
  left: 3.5rem;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all 0.6s ease-in-out 0s;
}
.uoj-electronic:hover {
  color: white;
  text-decoration: none;
}
.topnav .uoj-electronic {
  display: none;
}
.topnav.scroll .uoj-electronic {
  top: 0rem;
  left: 3rem;
  display: flex;
  justify-content: center;
  background-color: var(--blue-color);
  padding: 0.5rem 16px;
}

.topnav.scroll .uoj-electronic img {
  width: 6rem;
  transform: rotateX(0deg) rotateY(0deg) !important;
}

.topnav.scroll .uoj-electronic .desc {
  font-size: 1rem;
  position: relative;
}

.uoj-electronic:hover img {
  transform: scale(1.1);
}

.uoj-electronic .desc {
  z-index: 1;
  font-size: 1rem;
  text-align: center;
  margin: 0;
  line-height: 1.7;
  font-family: var(--default-font-b);
}

.uoj-electronic img {
  width: 6rem;
  position: absolute;
  transition: all 0.6s ease-in-out 0s;
}

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

.swiper.programs.container {
  margin-top: 2rem;
}

.swiper {
  position: initial !important;
}

.available-programs .swiper .swiper-pagination {
  bottom: 1.5rem;
  z-index: 1;
  opacity: 1 !important;
}

.programs .card-img-overlay {
  display: flex;
  align-items: flex-end;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.header-pattern {
  position: absolute;
  right: 0px;
  top: 26.8%;
  z-index: 1;
  display: none;
}
.swiper.banner .swiper-wrapper .swiper-slide img{
height:100%;
object-fit:cover;
width:100%;
}

.swiper .headline {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 1s fade-right forwards;
}

.headline .content {
  position: relative;
  font-size: 3.5rem;
  text-align: center;
  color: white;
  font-family: var(--default-font-b);
  top: 0rem;
}

.headline .content .description {
  font-size: 1.1rem;
  font-family: var(--default-font-sb);
  text-align: center;
}

.uni-statistics {
  position: absolute !important;
  height: 6rem;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.68);
  z-index: 1;
  padding: .8rem 1.5rem;
  color: white;
  display: flex;
  overflow: auto;
  top: 44.1rem;
  align-items: center;
  animation: .7s fade-up forwards;
}
.uni-statistics .stat {
  min-width: max-content;
  border-left: 1px solid rgb(255 255 255 / 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.uni-statistics .stat:last-child {
  /* padding-left: 0px; */
  border-left: unset;
}
.uni-statistics .stat .title {
  color: white;
}

.uni-statistics .stat .value {
  text-align: center;
  font-size: 1.2rem;
  font-family: var(--default-font-b);
  color: white;
}
.swiper.banner {
  height: 42rem;
}
.swiper-slide video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.header .dimmer,
.banner .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0) 40%);
}
.header .dimmer-mobile {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 97;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
}
.uni-overview {
  background-image: url("/themes/uoj_theme/media/Intersection\ 2.webp");
  height: auto;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 3rem 0px;
  overflow: hidden;
  background-size: cover;
}
.uni-overview .overview-section1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: auto;
}
.message-tiles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.message-tiles .col-lg-4 {
  margin-bottom: 1.5rem;
}
.message-tiles .logo-container {
  position: absolute;
  transform: scale(.9) !important;
}

.message-tiles .logo {
  z-index: 2;
}

.message-tiles .card {
  background-color: transparent;
  margin-bottom: 1rem;
  align-items: center;
}

.message-tiles .card .card-title {
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
  margin: .5rem 0px .5rem;
}

.message-tiles .card .logo {
  height: 100%;
  width: auto;
  transform: scale(.9);
}

.message-tiles .card .logo svg {
  height: 100%;
  width: 100%;
  object-fit: fill;
}

.message-tiles .card .card-text {
  line-height: 2;
  font-size: 0.9rem;
  color: var(--txt-color);
  text-align: center;
  width: 90%;
}

.uni-overview .overview-pattern-1 {
  position: absolute;
  top: -8rem;
  left: -18rem;
  opacity: 0.8;
  display: none;
}

.uni-overview .overview-pattern-2 {
  z-index: 0;
  position: absolute;
  bottom: 0px;
  right: 0px;
  opacity: 0.8;
}

.uni-overview .overview-pattern-2 img {
  width: 58%;
}

.uni-overview .overview-section1 .info {
  font-size: 2.3rem;
  font-family: var(--default-font-sb);
  color: var(--black-color);
  position: relative;
  justify-content: center;
  display: flex;
  align-items: center;
}

.uni-overview .overview-section1 .desc {
  font-size: 1.1rem;
  font-family: var(--default-font);
  color: var(--txt-color);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 2.2;
  margin: 1.5rem 0px 3rem;
  justify-content: center;
  text-align: center;
}

.uni-overview .overview-section2 img {
  width: 130%;
}

.uni-programs {
  width: 100%;
  background: url("/themes/uoj_theme/media/repeat\ grid\ 3.webp") var(--navy-blue-color);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  position: relative;
  transition: all 0.3s ease 0s;
  padding-top: 0;
  padding-bottom: 7rem;
  padding-left: 0;
  padding-right: 0;
}

.uni-programs .swiper-pagination {
  bottom: 2.5rem !important;
}

.uni-programs .swiper-slide .card-img-top::after {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 75%;
  width: 100%;
  content: "";
  opacity: 0.7;
  background-image: url("/themes/uoj_theme/media/repeat\ grid\ 3.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
}

.uni-programs .swiper-button-disabled.programs-example {
  transition: all 0.3s ease 0s;
  opacity: 0 !important;
}

.uni-programs .swiper-button-prev.programs-example,
.swiper-button-next.programs-example {
  transform: translateY(-5rem);
  opacity: 0;
  transition: all 0.3s ease 0s;
}

.uni-programs .swiper.programs:hover .swiper-button-disabled.programs-example {
  transition: all 0.3s ease 0s;
  opacity: 0.4 !important;
}

.uni-programs .swiper.programs:hover .swiper-button-prev.programs-example,
.uni-programs .swiper.programs:hover .swiper-button-next.programs-example {
  transition: all 0.3s ease 0s;
  opacity: 1;
}

.swiper-pagination-bullet {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgb(188, 188, 188) !important;
  opacity: 1 !important;
  height: 0.67rem !important;
  width: 0.65rem !important;
  margin: 0.3rem !important;
  background-color: transparent !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-radius: 100%;
  border: 3px solid var(--blue-color) !important;
  opacity: 1 !important;
  height: 1.3rem !important;
  width: 1.3rem !important;
  transform: translateY(0.3rem) !important;
  background-color: transparent !important;
  position: relative !important;
}

.about-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 3px solid var(--navy-blue-color) !important;
}

.about-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  background-color: var(--navy-blue-color);
}

.about-swiper-section .about-swiper .swiper-wrapper {
  margin-bottom: 4rem;
}

.main-menu .menu-content .menu-links ul li .icon {
  transform: scaleX(-1) !important;

}

.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  height: 0.3rem;
  width: 0.3rem;
  border-radius: 50%;
  background-color: var(--blue-color);
  z-index: 99;
  content: "";
}


.uni-programs .title,
.available-programs .title {
  color: white;
  font-family: var(--default-font-sb);
}

.available-programs .pattern-1,
.functional-competitions .pattern-1 {
  position: absolute;
  top: 1rem;
  right: -66rem;
}

.available-programs .pattern-2,
.functional-competitions .pattern-2 {
  position: absolute;
  top: -5rem;
  left: -80rem;
  width: 90%;
}

.available-programs .swiper-pagination-bullet.swiper-pagination-bullet-active::after,
.competitions .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  position: absolute;
  top: 0.42rem;
  left: 0.4rem;
  background-color: white;
}

.available-programs .pattern-1 img,
.available-programs .pattern-2 img,
.functional-competitions .pattern-1 img,
.functional-competitions .pattern-2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.swiper.programs .swiper-slide {
  width: 100%;
  height: fit-content;
}

.swiper.programs .swiper-slide:first-child {
  padding-right: 15px;
}

.swiper.programs .swiper-slide:last-child {
  padding-left: 15px;
}

.swiper.programs .swiper-slide .card {
  width: 100%;
  position: relative;
  transition: all 0.3s ease 0s;
  min-height: 25rem;
  background-color: transparent;
}

.swiper.programs .swiper-slide .card .card-img-top img {
  width: 100%;
  height: 100%;
  transition: all 0.6s ease 0s;
}

.swiper.programs .swiper-slide .card:hover .card-img-top img {
  transform: scale(1.1);
}

.swiper.programs .swiper-slide .card .card-img-top {
  position: relative;
  height: 25rem;
  overflow: hidden;
}

.swiper.programs .swiper-slide .card .card-img-top::after,
.all-news .swiper-slide .card .card-img-top::after,
.competitions .swiper-slide .card-img::after,
.life-jeddah .col-lg-3 .card .card-img-top::after {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.life-jeddah .col-lg-3 .card .card-img-top img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all .3s ease-in-out;
}

.life-jeddah .col-lg-3 .card:hover .card-img-top img {
  transform: scale(1.1);
}

.swiper.programs .swiper-slide .card .card-img-overlay .card-title {
  color: white;
  font-size: 1.1rem;
  font-family: var(--default-font-sb);
  opacity: 0.8;
  transition: all 0.3s ease 0s;
  margin: 0px 0.5rem;
}

.swiper.programs .swiper-slide .card:hover .card-img-overlay .card-title {
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.swiper.programs .swiper-slide .card:hover .card-img-overlay .cta {
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.swiper.programs .swiper-slide .card .card-img-overlay .cta {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0.8;
  transition: all 0.3s ease 0s;
  width: 1.5rem;
  height: 1.5rem;
}

.swiper.programs .swiper-slide .card .card-img-overlay .cta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-advertisements.container {
  background-color: rgb(248, 247, 247);
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.leaders .swiper-slide-prev .card,
.leaders .swiper-slide-next .card {
  transition: flex-direction 2s ease-in-out 0s;
}

h1.title {
  color: var(--black-color);
  text-align: center;
  font-family: var(--default-font-sb);
  padding: 3rem 0 0 0;
  font-size: 2rem;
  margin: 0 auto 1rem;
  position: relative;
}

.focus-area {
  padding: 0;
}

.focus-area h1.title {
  margin-bottom: 0rem;
}

.uni-testimonials .swiper-horizontal>.swiper-pagination-bullets,
.uni-testimonials .swiper-pagination-bullets.swiper-pagination-horizontal,
.uni-testimonials .swiper-pagination-custom,
.swiper-pagination-fraction {
  padding: 2rem 2rem 0;
}

.focus-area h3.title {
  text-align: center;
  color: #efb60a;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.our-story .section-h1.section-title {
  color: var(--black-color);
  font-family: var(--default-font-sb);
  padding: 0px 0px 1rem;
  font-size: 2.3rem;
}

.news-advertisements .section-toggle {
  display: flex;
  justify-content: center;
  margin: 2rem 0px 2rem;
}

.news-advertisements .section-toggle a {
  color: var(--txt-color);
  border-radius: 0;
}

.achievements .tab-pane.active {
  display: flex;
  flex-wrap: wrap;
}

.news-advertisements a .card:hover .card-img-top img {
  transform: scale(1.1);
}

.news-advertisements .section-toggle a.selected {
  color: var(--blue-color);
  position: relative;
}

.news-advertisements .section-toggle a.selected::after {
  position: absolute;
  top: 3rem;
  width: 100%;
  right: 0px;
  height: 2px;
  background-color: var(--blue-color);
}

.swiper.news-advertisements {
  height: auto;
  padding-bottom: 6rem;
  width: 90%;
  display: flex;
  justify-content: center;
}

.news-advertisements .news-item .card-img-overlay .day,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .day {
  font-size: 2.5rem;
  font-family: 'cairo-bold';
}

.swiper.news-advertisements .swiper-slide {
  width: 100%;
  height: fit-content;
}

.news-advertisements .nav-link.active {
  background-color: transparent;
  border-bottom-color: var(--blue-color);
}

.news-detail-img img {
  height: 26.5rem !important;
  width: 100% !important;
  object-fit: cover;
}

.news-advertisements.department-news .nav-link.active {
  color: var(--orange-color) !important;
}



.news-advertisements .news-item .card {
  width: 100%;
  position: relative;
  border-bottom: 10px solid var(--blue-color);
  overflow: hidden;
  transition: all 0.3s ease 0s;
  height: 22rem;
  border-radius: 0px;

}

.news-advertisements.department-news .news-item .card {
  border-bottom: 10px solid var(--orange-color);
}

.news-advertisements .news-item .thumbnail img {
  transform: scale(1);
  transition: all 0.6s ease 0s;
}

.news-advertisements .news-item:hover .thumbnail img {
  transform: scale(1.1);
}

.all-news .swiper-slide .card .card-img-top {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}


.news-advertisements .news-item .card-img-top img {
  object-fit: cover;
  object-position: center top;
  height: 100%;
  width: 100%;
  transition: all 0.6s ease-in-out 0s;
}

.news-advertisements .items {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.updated-policies .items{
  width:100%!important;
}
.news-advertisements .items a {
  padding: 0;
}

.news-advertisements .news-item .card-title,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .card-title {
  position: absolute;
  bottom: 0.7rem;
  max-width: 90%;
  color: white;
  font-size: 1.1rem;
  font-family: var(--default-font-sb);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp:3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-advertisements .news-item .card-img-overlay .date,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date {
  color: white;
  font-family: var(--default-font-sb);
  font-size: 2.5rem;
  z-index: 2;
}

.news-advertisements .news-item .card-img-overlay .date .month-year,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date .month-year {
  font-size: 1.2rem;
  color: rgb(240, 240, 240);
  font-family: var(--default-font);
  margin-top: -.5rem;
}

a.more-news-btn img {
  transform: translateX(0px);
  transition: all 0.3s ease 0s;
}

a.more-news-btn:hover img {
  transform: translateX(-0.5rem);
  transition: all 0.3s ease 0s;
}

a.more-testimonials-btn img {
  transform: translateX(0px);
  transition: all 0.3s ease 0s;
}

a.more-testimonials-btn.read-more {
  margin: 0 0 2rem;
  padding-left: 2rem;
}

a.more-testimonials-btn:hover img,
.read-more img {
  transform: translateX(-0.5rem);
  transition: all 0.3s ease 0s;
}

.news-advertisements a.more-news-btn,
.uni-testimonials .read-more,
.available-programs .read-more,
.steps-app .more-news-btn ,
.uni-inovations .more-news-btn{
  color: var(--navy-blue-color);
  font-family: var(--default-font-sb);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  margin-top: 1rem;
  overflow: visible;
  position: relative;
}

.news-advertisements a.more-news-btn span,
.uni-testimonials .read-more span,
.available-programs .read-more span,
.achievements .more-news-btn,
.steps-app .more-news-btn {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
}


.news-advertisements a.more-news-btn div,
.uni-inovations .more-news-btn div{
  z-index: 1;
}

.news-advertisements a.more-news-btn span img,
.uni-testimonials .read-more span img,
.available-programs .read-more span svg,
.achievements .more-news-btn svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  z-index: 1;
  margin-right: 1rem;
}

.news-advertisements.department-news a.more-news-btn span::after {
  background-color: var(--orange-color);
}

.news-advertisements a.more-news-btn span::after, .uni-testimonials .read-more span::after, .uni-innovations .read-more span::after,.uni-inovations .more-news-btn span::after{
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--blue-color);
  top: -0.6rem;
  left: 0.4rem;
  opacity: 0.3;
  content: "";
  border-radius: 50%;
  z-index: 89;
}



.steps-app .more-news-btn {
  margin-left: 0;
  padding-left: 0.8rem;
  margin-bottom: 3rem;
}

.steps-app .more-news-btn div {
  margin-left: 0.1rem;
}

.steps-app .more-news-btn::after {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--blue-color);
  top: -0.3rem;
  left: -0.1rem;
  opacity: 0.3;
  content: "";
  border-radius: 50%;
  z-index: 89;
}

.steps-app .more-news-btn span img {
  width: fit-content;
  height: 1rem;
  margin-right: 1.2rem;
}

.achievements .news-advertisements .more-news-btn span::after {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--green-color);
  top: -0.8rem;
  left: 0.4rem;
  opacity: 0.3;
  content: "";
  border-radius: 50%;
  z-index: 89;
}

.available-programs .read-more span::after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: white;
  top: -0.5rem;
  left: 0.5rem;
  opacity: 0.3;
  content: "";
  border-radius: 50%;
  z-index: 89;
}

.uni-inovations {
  height: auto;
  width: 100%;
  position: relative;
  padding: 0;
}

.uni-inovations .section-title {
  color: var(--black-color);
  text-align: center;
  font-family: var(--default-font-sb);
  padding: 0px 0px 6.5rem;
  font-size: 2.3rem;
}

.uni-inovations .main-news {
  background-color: transparent;
  height: 26rem;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  margin-top: 2rem;
}

.uni-inovations .main-news .research .thumbnail {
  height: 100%;
  position: absolute;
  top: 0px;
  width: 100%;
}

.uni-inovations .main-news .research .thumbnail::after {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.59);
  z-index: 80;
  top: 0px;
  left: 0px;
  content: "";
}

.uni-inovations .main-news .research .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uni-inovations .main-news .research {
  height: 100%;
}

.uni-inovations .main-news .research .swiper-slide {
  display: flex;
}

.uni-inovations .main-news .research .swiper-slide .content a {
  color: rgb(255, 255, 255);
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.uni-inovations .main-news .research .swiper-slide .content a:hover {
  color: white;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.3s ease 0s;
}

.uni-inovations .main-news .research .swiper-slide .content a span svg {
  transition: all 0.3s ease 0s;
}

.uni-inovations .main-news .research .swiper-slide .content a:hover span svg {
  transform: translateX(-0.5rem);
}

.uni-inovations .main-news .research .swiper-slide .content {
  z-index: 92;
  color: white;
  padding: 2.5rem 1.5rem 0;
}

.uni-inovations .main-news .research .swiper-slide .content .title {
  font-size: 1.2rem;
  font-family: var(--default-font-b);
  line-height: 1.8;
}

.uni-inovations .main-news .research .swiper-slide .content .date {
  color: rgb(188, 188, 188);
  font-family: var(--default-font-sb);
  font-size: 1rem;
  margin: .5rem 0px;
  display: flex;
  flex-direction: row-reverse;
  width: fit-content;
}

.uni-inovations .main-news .research .swiper-slide .content .date span {
  display: flex;
  padding-left: .8rem;
  align-items: center;
}

.uni-inovations .main-news .research .swiper-slide .content .date span img {
  width: 1.2rem;
}

.uni-inovations .main-news .research .swiper-slide .content .desc {
  font-size: 1rem;
  font-family: var(--default-font-sb);
  line-height: 2;
  margin-top: 1.2rem;
  display: -webkit-box;
  opacity: 0.8;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uni-inovations .main-news .research .swiper-slide .content .read-more {
  margin-top: 1rem;
}

.uni-inovations .main-news .research .swiper-slide .content .read-more a {
  font-size: 1rem;
  font-family: var(--default-font-b);
}

.uni-inovations .content .read-more span {
  margin-right: 0.7rem;
}

.uni-inovations .inovation-container {
  display: block;
}

.uni-inovations .inovation-container .inovations-detail {
  display: flex;
  flex-direction: row;
  justify-content: end;
  width: 100%;
  position: absolute;
  bottom: 4rem;
  z-index: 1;
  left: 1rem;
}

.uni-inovations .inovation-container .inovations-detail .item {
  padding: .6rem;
  margin: .2rem;
  background-color: rgb(222, 222, 222);
  ;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  border-radius: 50%;
}

.uni-inovations .inovation-container .inovations-detail .item:hover {
  background-color: rgba(213, 213, 213, 0.1);
  transition: all 0.3s ease 0s;
}

.uni-inovations .inovation-container .inovations-detail .item.selected {
  background-color: var(--blue-color);
  transition: all 0.3s ease 0s;
  position: relative;
}

.uni-inovations .inovation-container .inovations-detail .item:last-child {
  border-bottom: 1px solid rgb(222, 222, 222);
}

.uni-inovations .inovation-container .inovations-detail .desc {
  font-size: 1.1rem;
  width: 97%;
  font-family: var(--default-font-sb);
  line-height: 2.2;
  margin-bottom: 1.5rem;
  display: none;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uni-inovations .inovation-container .inovations-detail .date {
  color: rgb(107, 107, 107);
  font-family: var(--default-font-sb);
  font-size: 1rem;
  display: none;
  flex-direction: row-reverse;
  width: fit-content;
  margin-bottom: 0.5rem;
}

.uni-inovations .inovation-container .inovations-detail .date span {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.uni-inovations .inovation-container .inovations-detail a.read-more,
.uni-inovations .inovation-container .inovations-detail a {
  color: var(--blue-color);
  font-size: 1rem;
  text-decoration: none;
}

.uni-testimonials {
  position: relative;
  width: 100%;
  padding: 0 0 1rem;
  background:url("/themes/uoj_theme/media/Repeat Grid 4.webp") rgb(240, 240, 240);
}

.uni-testimonials .section-title {
  color: var(--black-color);
  text-align: center;
  font-family: var(--default-font-sb);
  padding: 0px 0px 4rem;
  font-size: 2.3rem;
}
div#myTopnav {
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
}
.topnav .links-container {
  display: flex;
  align-items: center;
}
.topnav .links a:hover {
  color: white;
}
.topnav .navbar {
  width: 100%;
}
.navbar .navbar-brand {
  display: flex;
  margin: 0;
  padding: 0;
}
.topnav .languages .dropdown-toggle {
  color: white;
  font-size: .9rem;
  display: flex;
  align-items: center;
}
.languages .dropdown-menu li a {
  padding: .5rem 1rem;
  cursor: pointer;
  color: var(--black-color);
  font-size: .9rem;
  transition:all .3s ease-in-out;
}

.languages .dropdown-menu li a:hover {
  background-color: var(--light-gray-background);
  color: var(--blue-color);
}

.languages {
  position: relative;
  display: none;
}

.languages .dropdown-menu {
  top: 2.7rem;
  max-width: fit-content;
  animation: dropdownanimationlang .5s;
}
.navbar .dropdown .dropdown-menu a.dropdown-item,
.scroll .navbar .dropdown .dropdown-menu a.dropdown-item {
  padding: 0.8rem 1rem !important;
  font-size: .9rem;
}
.topnav .uoj-electronic-sub,
.topnav .electronic-button {
  display: none;
}
.topnav.scroll .uoj-electronic-sub {
  display: block;
  width: 2px;
  height: 3rem;
  background-color: rgba(192, 192, 192, 0.376);
  margin: 0 1rem;
}
.topnav.scroll .electronic-button {
  display: block;
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 1rem;
  background: url("/themes/uoj_theme/media/electronic-button-scroll.svg") var(--blue-color);
  font-family: var(--default-font-sb);
  font-size: 0.95rem;
  opacity: 1;
  background-size: contain;
}

.topnav.scroll .electronic-button:hover {
  background: url("/themes/uoj_theme/media/electronic-button-scroll.svg") 0% 0% / contain rgb(23, 151, 202);
}

.scroll.topnav .links-container .links {
  margin: 0px 1.1rem;
  padding-right: 0rem;
}


.topnav .right-lnk .logo-container {
  display: flex;
  align-items: center;
  opacity: 1;
}

.mobile-menu .colored-logo {
  display: block;
}
.mobile-menu .top-nav-links{
  max-height: calc( 100% - 9rem );
  height: auto;
  overflow: auto;
}
.mobile-menu .nav-item .nav-link{
  color:var(--black-color);
}
.mobile-menu .colored-logo img {
  width: 2rem;
}

.mobile-menu .colored-logo.long img {
  width: 5rem;
}

.mobile-menu .vertical-line {
  border-left: 1px solid rgba(0, 0, 0, 0.51);
}

.scroll .colored-logo {
  display: block;
}

.scroll .white-logo {
  display: none;
}

.topnav .links-container .options {
  display: flex;
  align-items: center;
}

.topnav .links-container .options .language-selector .dropdown img {
  width: 2rem;
}

.topnav .options .accessibility,
.topnav .options .menu,
.topnav .options select {
  cursor: pointer;
  transition: all 0.3s ease 0s;
  opacity: 1;
  display: none;
}

.topnav .options .menu {
  padding: 0px 1.2rem 0px 0px !important;
}


.topnav .links-container .options select {
  margin-right: 0px;
}

.sub .topnav .links-container .options select,
body.toolbar-horizontal .topnav .links-container .options select{
  color: black;
  background-image: url("/themes/uoj_theme/media/chevron-down - alt.svg");
}

.sub .topnav .colored-logo {
  display: flex;
}

.sub .topnav .white-logo,
.sub .topnav a.electronic-button,
.sub .topnav .uoj-electronic-sub {
  display: none;
}

.sub .topnav .accessibility path {
  fill: var(--black-color);
}

.topnav .links-container .options .accessibility:hover,
.topnav .links-container .options .search:hover,
.topnav .links-container .options .menu:hover,
.topnav .links-container .options select:hover {
  transition: all 0.3s ease 0s;
  opacity: 0.7;
}

.topnav .links-container .options .language-selector {
  display: flex;
  color: white;
  align-items: center;
  font-size: 1.5rem;
  flex-direction: row-reverse;
}

.topnav .links-container .options .language-selector .dropdown {
  display: flex;
}

.topnav .logo-container .long img,
.scroll .logo-container .long img {
  width: 8.5rem;
  height: 3rem;
  object-fit: contain;
}

.vertical-line {
  height: 3rem;
  margin: 0px 0.7rem;
}

.navbar a.nav-link,
.navbar a.dropdown-toggle {
  color: rgb(241, 241, 241);
  font-size: 1rem;
  font-family: var(--default-font-sb);
  transition: all 0.3s ease 0s;
  text-overflow: ellipsis;
}

.topnav a:hover {
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.topnav .icon {
  display: none;
}

.right-lnk {
  float: right;
}

.languages .icon {
  display: block;
  margin: 0 .3rem;
  display: none;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  width: 100%;
  height: auto;
  max-height: 100vh;
  transform: translateX(-100%);
  transition: all .3s ease-in-out;
  background-color: rgb(255, 255, 255);
  z-index: 101;
  overflow: hidden auto;
}


.mobile-menu .menu-close-btn {
  background-color: var(--navy-blue-color);
  height: 4rem;
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu .main-section {
  display: flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #EBEBEB;
}

.mobile-menu .main-section span {
  margin: 1rem 2rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.mobile-menu .mobile-log-in {
  padding: .8rem 1rem;
  margin: 2rem auto 1rem;
  display: flex;
  align-items: center;
  width: 90%;
  border-radius: .5rem;
  border: 1px solid #EBEBEB;
  transition: all 0.3s ease 0s;
  background-image: url('/themes/uoj_theme/media/Mask Group 7.png');
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.mobile-menu .mobile-log-in>div .icon {
  height: 2.5rem;
  width: 2.5rem;
  background-color: #E8F7FD;
  border-radius: 100%;
  padding: 0.6rem;
  margin-left: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu .mobile-log-in>div .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.mobile-menu .mobile-log-in>div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
  color: var(--black-color);
}
.mobile-menu .menu-header {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}

.mobile-menu .menu-header .logo-containers {
  display: flex;
  align-items: center;
}

.mobile-menu .menu-header .menu-close {
  display: flex;
  align-items: center;
}

.mobile-menu.re {
  top: -40rem;
  animation: 0.5s ease 0s 1 normal none running mobile-menu-re;
}

.menu-mobile-icon {
  display: block;
}

.scroll .vertical-line {
  margin: 0.1rem 1rem;
  height: 3rem;
}

.topnav .options .accessibility,
.topnav .options .search,
.topnav .options .menu-mobile-icon {
  padding: 0px 0.4rem;
  cursor: pointer;
  width: 2.5rem;
}

.topnav .options .accessibility svg,
.topnav .options .search svg,
.topnav .options .menu-mobile-icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.topnav .options .menu-mobile-icon {
  padding-left: 0px;
}


.scroll.topnav .options .menu {
  padding: 0px 0.8rem 0px 0px;
}




.mobile-menu .first.container {
  padding-bottom: 0;
}

.mobile-menu .second.container {
  padding-top: 0;
}

.mobile-menu .navbar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0;
}

.mobile-menu .navbar.second {
  padding-bottom: 1rem;
}
.mobile-menu .nav-item .nav-link{
  color: var(--black-color);
}
.mobile-menu .nav-item {
  color: var(--black-color);
  font-size: 1.1rem;
  position: relative;
  border-bottom: 1px solid #EBEBEB;
  padding: 0;
  list-style-type: none;
  width: 100%;
}
.mobile-menu .nav-item a{
  color:var(--black-color);
}
.mobile-menu .second.container .nav-item:last-child {
  border-bottom: none;
}

.mobile-menu .dropdown .nav-link {
  display: none;
}

.mobile-menu .nav-item .nav-link,
.mobile-menu .nav-item .dropdown-toggle {
  color: var(--black-color);
}

.mobile-menu .nav-item .dropdown-toggle {
  position: relative;
  display: block;
}

.mobile-menu .nav-item.sec-menu::before {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 0.5rem;
  height: 0.7rem;
  background: url("/themes/uoj_theme/media/Icon ionic-ios-arrow-back-r.svg");
  background-repeat: no-repeat;
  background-size: 84%;
  content: '';
  transition: .3s all ease;
}

.mobile-menu .nav-item .dropdown.show .dropdown-toggle::before {
  transform: scale(1.2) rotate(180deg);
}

.mobile-menu .options {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 103;
  background-color: #f9f9f9;
}

.mobile-menu .options .language-switch {
  width: 80%;
  display: flex;
  position: relative;
  align-items: center;
  border-left: 1px solid #dddddd;
  padding: 1.2rem 1rem 1.2rem 0rem;
}
.mobile-menu .language-switch.clicked::after {
  transform: rotate(90deg);
}
.mobile-menu .language-switch.clicked,.mobile-menu .accessibility-button.clicked{
  background-color: #e4e4e4;
}
.mobile-menu .accessibility-button img{
  height:2rem;
}
.mobile-menu .language-switch::after {
  position: absolute;
  top: 1.9rem;
  left: 1rem;
  width: 0.5rem;
  height: 0.7rem;
  background-repeat: no-repeat;
  background: url("/themes/uoj_theme/media/Icon ionic-ios-arrow-back-r.svg");
  background-size: 84%;
  transform: rotate(-90deg);
  background-repeat: no-repeat;
  content: '';
  transition: .3s all ease;
}

.mobile-menu .options .language-switch .icon {
  margin-left: .7rem;
}

.mobile-menu .options .accessibility-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
}

.mobile-menu .options .language-selector {
  border-left: 1px solid rgb(52, 70, 90);
  display: flex;
  justify-content: center;
  font-size: 1.1rem;
  padding: 1rem 0px;
  color: white;
  align-items: center;
  cursor: pointer;
}

.mobile-menu .options .language-selector a {
  color: white;
}

.mobile-menu .options .language-selector p {
  margin-bottom: 0;
}

.mobile-menu .options .language-selector,
.mobile-menu .options .accessibility {
  width: 50%;
}

.mobile-menu .options .accessibility {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0px;
  cursor: pointer;
}

.mobile-menu .options .accessibility svg {
  height: 1.5rem;
}

.testimonials {
  height: auto;
  position: relative !important;
  z-index: 0 !important;
  margin-top: 3rem;
}

.swiper.testimonials .swiper-slide {
  width: 100%;
  transform: scale(0.65);
  opacity: 0.5;
  display: flex;
  transition: all 0.3s ease 0s;
  align-items: center;
}



.quote-bubble img {
  width: 50%;
  height: 50%;
}

.swiper.testimonials .swiper-slide-active {
  width: 100%;
  transform: scale(1);
  opacity: 1;
  display: flex;
  z-index: 98;
  align-items: center;
  transition: all 0.3s ease 0s;
  height: 120% !important;
}

.testimonials .card {
  position: relative;
  width: 100%;
  margin: 0px 15px;
  height: 21rem;
}

.testimonials .card::after {
  position: absolute;
  width: 3.8rem;
  height: 3.8rem;
  content: "";
  top: 0px;
  border-radius: 50%;
  left: 1.5rem;
}

.testimonials .card .card-body {
  position: relative;
  background-color: white;
  padding: 2rem 15px;
  font-size: 1rem;
  line-height: 2.2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonials .swiper-slide:nth-child(3n+1) .card .card-body {
  border-bottom: 10px solid var(--blue-color);
}

.testimonials .swiper-slide:nth-child(3n+2) .card .card-body {
  border-bottom: 10px solid var(--orange-color);
}

.testimonials .swiper-slide:nth-child(3n+3) .card .card-body {
  border-bottom: 10px solid var(--green-color);
}

.testimonials .card .card-body .desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem;
}

.testimonials .card .card-body .user {
  margin-top: 2rem;
  display: flex;
  align-items: center;
}

.testimonials .card .card-body .user .card-img {
  border-radius: 50%;
  display: flex;
  align-items: center;
  height: 3rem;
  width: 3rem;
  overflow: hidden;
}

.testimonials .card .card-body .user .card-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.testimonials .card .card-body .user .info {
  margin-right: 1rem;
}

.testimonials .card .card-body .user .info .name {
  font-size: 1rem;
  font-family: var(--default-font-sb);
}

.testimonials .card .card-body .user .info .position {
  font-size: 0.8rem;
  color: grey;
}

.uni-testimonials a.more-testimonials-btn div {
  z-index: 1;
  position: relative;
}

.uni-testimonials .swiper-button-disabled.testimonials {
  transition: all 0.3s ease 0s;
  opacity: 0 !important;
}

.uni-testimonials .swiper-button-prev.testimonials,
.swiper-button-next.testimonials {
  transform: translateY(-3rem);
  opacity: 0;
  transition: all 0.3s ease 0s;
}

.uni-testimonials .swiper.testimonials:hover .swiper-button-disabled.testimonials {
  transition: all 0.3s ease 0s;
  opacity: 0.4 !important;
}

.uni-testimonials .swiper.testimonials:hover .swiper-button-prev.testimonials,
.uni-testimonials .swiper.testimonials:hover .swiper-button-next.testimonials {
  transition: all 0.3s ease 0s;
  opacity: 1;
}

.international-students .card-img-overlay .footer {
  background-color: transparent;
  margin: 2.5rem 0 1rem;
}

.footer {
  background-color: rgb(250, 250, 250);
  width: 100%;
}

.footer .copyright>a {
  color: rgb(37, 156, 210);
  text-decoration: underline;
  transition: all 0.3s ease 0s;
}

.footer .copyright>a:hover {
  color: rgb(36, 176, 233);
}

.shortcuts {
  background-color: var(--navy-blue-color);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 1rem 0px;
  z-index: 3;
  position: relative;
}

.shortcuts .open-data,
.shortcuts .map,
.shortcuts .accessibility-services {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  flex-direction: column;
  transition: all 0.3s ease 0s;
  height: fit-content;
  background-color: transparent;
}

.shortcuts .open-data a,
.shortcuts .map a,
.shortcuts .accessibility-services a {
  text-decoration: none;
}

.shortcuts .open-data a circle,
.shortcuts .map a circle,
.shortcuts .accessibility-services a circle {
  transition: all 0.3s ease 0s;
}

.shortcuts .open-data a:hover circle {
  fill: rgb(163, 94, 73);
}

.shortcuts .map a:hover circle {
  fill: rgb(9, 117, 102);
}

.shortcuts .accessibility-services a:hover circle {
  fill: rgb(86, 51, 104);
}

.shortcuts .open-data .desc,
.shortcuts .map .desc,
.shortcuts .accessibility-services .desc {
  font-size: 1.1rem;
  text-align: center;
  color: white;
  font-family: var(--default-font-sb);
  display: none
}

.shortcuts .open-data .icon,
.shortcuts .map .icon,
.shortcuts .accessibility-services .icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.shortcuts .open-data .icon svg,
.shortcuts .map .icon svg,
.shortcuts .accessibility-services .icon svg {
  width: 4.5rem;
}

.footer .footer-contents {
  background-color: rgb(245, 245, 245);
  display: flex;
  flex-direction: column;
}

.footer .footer-contents .newsletter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(239, 239, 239);
  position: relative;
  overflow: hidden;
  padding: 2rem 15px;
}

.footer .footer-contents .newsletter::after {
  position: absolute;
  bottom: -6rem;
  right: -12rem;
  content: "";
  width: 100%;
  background-repeat: no-repeat;
  height: 100%;
  z-index: 0;
  background-image: url("/themes/uoj_theme/media/footer-pattern-bottom.svg");
}

.footer .footer-contents .newsletter .info {
  font-size: 1.4rem;
  font-weight: var(--default-font-sb);
  margin-bottom: 1.5rem;
  z-index: 86;
}

.footer .footer-contents .newsletter input {
  outline: none;
  height: 2rem;
  border-radius: 0;
  border: none;
  font-size: 1rem;
  background-color: transparent;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid black;
  width: 76%;
  z-index: 1;
}

.footer .footer-contents .newsletter input::placeholder {
  font-family: var(--default-font);
}

.footer .footer-contents .newsletter .newsletter-btn,
.form-container form button {
  padding: 0.5rem 3rem;
  background-color: var(--blue-color);
  margin-top: 1.7rem;
  color: white;
  width: fit-content;
  z-index: 1;
  font-family: var(--default-font-sb);
  transition: all 0.3s ease 0s;
}

.footer .footer-contents .newsletter .newsletter-btn:hover,
.form-container form button:hover {
  background-color: var(--blue-color-hover);
  transition: all 0.3s ease 0s;
  text-decoration: none;
  color: white;
}

.footer .footer-contents .links {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.footer-contents .links .links-container {
  padding-top: 2rem;
}

.footer .footer-contents .links .column-1,
.footer .footer-contents .links .column-2 {
  display: flex;
  flex-direction: column;
}

.footer .footer-contents .links .column-1 .title,
.footer .footer-contents .links .column-2 .title {
  font-size: 1.4rem;
  font-family: var(--default-font-sb);
  margin-bottom: 1rem;
}

.leaflet-control-zoom .leaflet-control-zoom-in,
.leaflet-control-zoom .leaflet-control-zoom-out {
  width: 2.6rem !important;
  height: 2.6rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaflet-control-zoom .leaflet-control-zoom-in span,
.leaflet-control-zoom .leaflet-control-zoom-out span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem !Important;
  line-height: 0px;
  text-indent: 0;
}
.leaflet-control-zoom.leaflet-bar.leaflet-control {
  margin: 0 !important;

}
.footer .footer-contents .links .column-1 .links-container,
.footer .footer-contents .links .column-2 .links-container {
  display: flex;
  flex-direction: column;
}
.footer .footer-contents .links .column-1 .links-container a,
.footer .footer-contents .links .column-2 .links-container a {
  color: #4f4d4d;
  margin-bottom: 1rem;
  transition: all 0.3s ease 0s;
  text-decoration: none;
  font-size: 1rem;
}
.footer .footer-contents .links .column-1 .links-container a:hover,
.footer .footer-contents .links .column-2 .links-container a:hover {
  color: var(--blue-color);
  transition: all 0.3s ease 0s;
}

.footer .footer-contents .links .column-1 .links-container a:last-child,
.footer .footer-contents .links .column-2 .links-container a:last-child {
  margin-bottom: 0px;
}

.footer .footer-contents .mobile-apps {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: .5rem;
  padding: 2rem 15px;
  margin-bottom: 0;
}

.footer .footer-contents .mobile-apps::after {
  position: absolute;
  bottom: 0px;
  right: 0px;
  content: "";
  pointer-events: none;
  width: 100%;
  background-repeat: no-repeat;
  height: 100%;
  z-index: 1;
  background-image: url("/themes/uoj_theme/media/footer-pattern-2.svg");
}

.footer .footer-contents .title {
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
}

.footer-contents .links-container .title:after {
  content: '';
  position: absolute;
  background-color: #656565;
  height: 1px;
  left: 0;
  right: 8.4rem;
  top: 50%;
}

.footer .footer-contents .mobile-apps .desc {
  font-size: .9rem;
  color: var(--txt-color);
  line-height: 2.2;
  padding: .7rem 0;
}

.footer .footer-contents .mobile-apps .stores {
  display: flex;
  margin-top: 1rem;
  z-index: 2;
}

.footer .footer-contents .mobile-apps .stores .ios svg,
.footer .footer-contents .mobile-apps .stores .android svg {
  width: 3rem;
  height: 3rem;
}

.footer .footer-contents .mobile-apps .stores .ios {
  margin-left: 1rem;
}

.footer .footer-contents .mobile-apps .stores .ios svg #Intersection_3 {
  transition: all 0.3s ease 0s;
}

.footer .footer-contents .mobile-apps .stores .ios:hover svg #Intersection_3 {
  fill: var(--blue-color);
}

.footer .footer-contents .mobile-apps .stores .ios:hover svg #Rectangle_395 {
  fill: rgb(0, 0, 0);
}

.footer .footer-contents .mobile-apps .stores .android svg #Intersection_3 {
  transition: all 0.3s ease 0s;
}

.footer .footer-contents .mobile-apps .stores .android:hover svg path {
  fill: var(--blue-color);
  transition: all 0.3s ease 0s;
}

.footer .footer-contents .mobile-apps .stores .android:hover svg #Vector-6 {
  fill: var(--blue-color);
  transition: all 0.3s ease 0s;
}

.footer .footer-contents .mobile-apps .stores .android:hover svg #Rectangle_394 {
  fill: rgb(0, 0, 0);
  transition: all 0.3s ease 0s;
}

.footer-bottom.container {
  background-color: rgb(250, 250, 250);
  width: 100%;
  border-top: 1px solid silver;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: .9rem;
}

.footer-bottom .copyright {
  font-size: .8rem;
  margin-top: .7rem;
}

.footer-bottom .visitors {
  font-size: .8rem;
  margin-top: .4rem;
}

.footer-bottom .social-icons {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
}

.footer-bottom .social-icons svg {
  height: 2rem;
  width: 2rem;
}

.footer-bottom .social-icons a {
  margin-left: 1rem;
  display: flex;
}

.footer-bottom .social-icons path#Icon_feather-facebook,
.footer-bottom .social-icons path#Icon_feather-twitter {
  stroke: rgb(0, 0, 0);
  transition: all 0.3s ease 0s;
}

.footer-bottom .social-icons a:hover path#Icon_feather-facebook,
.footer-bottom .social-icons a:hover path#Icon_feather-twitter {
  stroke: var(--blue-color);
  transition: all 0.3s ease 0s;
}

.footer-bottom .social-icons a #insta-footer-logo {
  fill: rgb(0, 0, 0);
  transition: all 0.3s ease 0s;
}

.footer-bottom .social-icons a:hover #insta-footer-logo {
  fill: var(--blue-color);
}

.footer-bottom .social-icons #Icon_feather-youtube path {
  stroke: rgb(0, 0, 0);
  transition: all 0.3s ease 0s;
}

.footer-bottom .social-icons a:hover #Icon_feather-youtube path {
  stroke: var(--blue-color);
  transition: all 0.3s ease 0s;
}


.tab-links {
  margin: 0px;
  padding: 0px;
}

.tab-links a {
  color: var(--black-color);
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.tab-links a:hover {
  color: var(--blue-color);
  transition: all 0.3s ease 0s;
}

.department-news .tab-links a:hover {
  color: var(--orange-color);
  transition: all 0.3s ease 0s;
}

.tab-links li {
  margin: 0px;
  float: right;
  list-style: none;
  color: rgb(130, 130, 130);
  font-size: 1rem;
}

.card .card-img-top {
  width: 100%;
  transition: all .6s ease-in-out;
  position: relative;
  overflow: hidden;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1);
}

.functional-competitions .card .card-img-top {
  height: 25rem;
  object-fit: cover;
}

.accordion-body .card-img-top {
  min-height: fit-content;
  height: 10rem;
  width: 100%;
}

.tab-links li a.active,
li a.active:hover,
.tab-links li a.active,
li a.active:hover {
  color: var(--blue-color);
}

.image-viewer.container {
  padding: 0;
}

.image-viewer img {
  height: 100%;
  width: 100%;
}

.news-advertisements .nav-pills .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -2.5rem;
}

.nav-pills .nav-link.active {
  position: relative;
  border-radius: 0;
  background-color: transparent !important;
  color: var(--txt-color);
  text-align: center;
}

.achievement .card .image-container img {
  height: 100%;
  width: 100%;
}

.tab-content {
  padding: 15px;
  background: transparent;
}

.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

.links-container select {
  border: none;
  background-color: transparent;
  color: white;
  appearance: none;
  background-image: url("/themes/uoj_theme/media/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: 2.7rem center;
  background-size: 1.3rem;
  font-size: 1.3rem;
  text-align: left;
  width: 4rem;
}

select option {
  background-color: white;
  color: black;
}

.modal.search {
  padding: 0px !important;
}

.search .modal-dialog.modal-dialog-centered {
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  flex-direction: column;
}

.search .modal-dialog .modal-content::after {
  position: absolute;
  top: 0px;
  right: -27rem;
  content: "";
  width: 100%;
  height: 65%;
  background-image: url("/themes/uoj_theme/media/Repeat Grid 3.png");
  pointer-events: none;
}

.search .modal-dialog .modal-content {
  border: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.search .modal-dialog .modal-content .logo {
  z-index: 10;
  height: 8rem;
  width: 8rem;
  margin-bottom: 1rem;
}

.search .modal-dialog .modal-content .logo img {
  height: 100%;
  width: 100%;
}

.search .modal-dialog .modal-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px;
  margin: 0px;
  background-color: var(--background);
}
.search button.close {
  position: absolute;
  left: 1rem;
  top: 1rem;
  border-radius: 50%;
  z-index: 1;
  height: 3rem;
  width: 3rem;
}
.associates-search .search-btn {
  color: white;
  border: none;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 1rem;
  font-family: var(--default-font-sb);
  margin: 0px;
  padding: 1.2rem;
  border-radius: 0px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  background-color: var(--blue-color);
  position: relative;
}


.search .search-btn {
  color: white;
  border: none;
  display: flex;
  align-items: center;
  height: 3rem;
  font-size: 1rem;
  font-family: var(--default-font-sb);
  margin: 0px;
  padding: 1.2rem;
  border-radius: 0px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  background-color: var(--blue-color);
  position: relative;
  width: 100%;
  justify-content: center;
}

.modal.search .search-btn::after {
  content: "";
  position: absolute;
  top: 1;
  left: 40%;
  background: url("/themes/uoj_theme/media/Icon\ feather-search.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 1rem;
  width: 1rem;
}


.associates-search .search-btn label {
  display: none;
}

.associates-search .search-btn .icon::before,
.modal.search .icon::before {
  background-image: url("/themes/uoj_theme/media/Icon\ feather-search.svg");
  background-repeat: no-repeat;
  background-position: .6rem center;
  background-size: 1.2rem;
  height: 1.2rem;
  content: "";
  position: absolute;
  left: 0;
  top: .9rem;
  width: 3rem;
}

.right-panel {
  background-image: url("/themes/uoj_theme/media/pattern-main-menu.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 5rem;
  left: 0px;
  opacity: 0.6;
}

.search-footer {
  background-image: url("/themes/uoj_theme/media/Intersection 2.jpg");
  width: 100%;
  position: relative;
  display: flex;
  align-items: start;
  flex-direction: column;
  padding: 1.5rem 0px;
  overflow: hidden;
  justify-content: start;
}


.search-footer.modal-footer {
  flex-direction: row;
}

.search-footer.modal-footer .std {
  width: 100%;
  padding-right: 1.5rem;
}

.search-footer.modal-footer .link {
  padding: 0;
  width: 40%;
  margin-bottom: 1rem;
}

.search-footer.modal-footer .link:nth-child(even) {
  margin-right: 1.5rem;
}
.search-footer::after {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(153, 153, 153, 0);
  content: "";
  pointer-events: none;
}
.search-footer .link {
  font-size: 1rem;
  font-family: var(--default-font-sb);
  display: flex;
  align-items: center;
  color: var(--dark-grey-color);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  width: fit-content;
}
.search-footer .link:hover {
  color: var(--blue-color-hover);
}


.search-footer .link label {
  cursor: inherit;
}
.search-footer .link.no-click{
  cursor: no-drop!important;
}
.search-footer .link svg {
  width: 1rem;
  height: 1rem;
  margin-left: .7rem;
  transition: all 0.3s ease 0s;
}

.std {
  font-size: 1.2rem;
  padding: 2rem 2rem;
  font-family: var(--default-font-sb);
  position: relative;
  min-width: max-content;
}

.search select {
  background-image: url("/themes/uoj_theme/media/Icon feather-users.svg");
  background-repeat: no-repeat;
  background-position: left center;
  appearance: initial;
  display: flex;
}

.search button svg {
  height: 100%;
  width: 100%;
}

.dropdown-menu.radio .dropdown-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: .3rem 1rem;
}

.dropdown-menu.radio input {
  visibility: hidden;
  position: absolute;
  left: -30px;
}

.dropdown-menu.radio i {
  font-weight: normal;
  font-style: normal;
  display: block;
  text-align: right;
}

.search input.form-control {
  border: none;
  border-radius: 0px;
  font-size: .9rem;
  height: 100%;
  padding: 0px 1rem;
}

.search .input-group.mb-3 {
  display: flex;
  align-items: flex-start;
  padding: 0px;
  margin: 3rem 0px 0px;
  height: 3rem;
  width: 24rem !important;
  z-index: 90;
}

.search .input-group.mb-3 {
  display: flex;
  align-items: flex-start;
  padding: 0px;
  margin: 3rem 0px 0px;
  height: auto !important;
  width: 24rem !important;
  z-index: 90;
  flex-direction: column;
}

.search .input-group.mb-3,
.associates-search {
  display: flex;
  padding: 0px;
  margin: 2rem 0px 0px;
  height: 3rem;
  width: 100%;
}

.search .dropdown {
  border-radius: 0px;
  background-color: white;
  height: 3rem;
  margin: .5rem 0;
  width: 100%;
  display: flex;
  transition: all 0.3s ease 0s;
}

.associates-search .dropdown {
  border-radius: 0px;
  background-color: white;
  height: 100%;
  display: flex;
  transition: all 0.3s ease 0s;
}

.associates-search .dropdown button {
  padding: 0px 1rem;
  border: none;
}

.associates-search {
  margin: 0 0 3rem;
}

.search .dropdown button img {
  width: 80%;
}

.search .modal-dialog .input-group .form-control {
  padding-right: 3rem;
  border: none;
  outline: none;
  height: 3rem;
  width: 100%;
}

.associates-search .form-control {
  height: 100%;
  border: none;
}

.uni-side ins,
.users ins {
  display: none;
  width: 1.5rem;
  margin-right: 0.2rem;
  display: flex;
  align-items: center;
  position: relative;
}

.uni-side label,
.users label {
  margin-right: -.7rem;
}

.uni-side button::before,
.users button::before {
  display: none;
}

.uni-side ins::before {
  content: '';
  position: absolute;
  background-image: url('/themes/uoj_theme/media/chevron-down-orange.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 0.5rem;
  width: 0.7rem;
  right: -10px;
  top: 0;
  display: block;
}

.dropdown.users ins::before {
  content: '';
  position: absolute;
  background-image: url('/themes/uoj_theme/media/chevron-down-green.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 0.5rem;
  width: 0.7rem;
  right: 5px;
  top: 30px;
}

.uni-side ins img,
.users ins img {
  height: 100%;
  width: 100%;
  position: relative;
  display: none;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown button.btn.btn-light.dropdown-toggle:focus {
  box-shadow: none;
  background-color: unset;
  border-top: none;
  border-bottom: none;
}

.dropdown button.btn.btn-light.dropdown-toggle {
  background-color: white;
  height: 100%;
  min-width: 100%;
  font-size: 1rem;
  align-items: center;
  display: flex;
  border-radius: 0px;
  color: var(--txt-color);
  padding: 0 1rem;
  position: relative;
}

.associates-search .dropdown button.btn.btn-light.dropdown-toggle {
  border-right: none;
  border-left: 1px solid #dfdfdf
}

.dropdown button.btn.btn-light.dropdown-toggle::before {
  position: absolute;
  top: auto;
  left: 1rem;
  content: '';
  width: 10px;
  height: 10px;
  background: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="%23000000"></path></svg>');
}

.search .erase {
  position: absolute;
  right: 0rem;
  border: none;
  height: auto;
  width: 3rem;
  top: .5rem;
  border-radius: 100%;
  outline: none;
  text-align: center;
  font-weight: bold;
  padding: 2px;
  z-index: 3;
  background-color: transparent;
}

.search .erase:hover svg {
  opacity: 0.7;
}

.search .erase svg {
  width: 50%;
  height: 50%;
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.sub div#myTopnav.topnav {
  position: relative;
  background-color: white;
  top: 0rem;
}

.sub.map-page div#myTopnav.topnav {
  background-color: white;
}

.sub div#myTopnav.topnav.scroll {
  position: fixed;
  top: 0;
}

.sub .topnav a {
  color: var(--black-color);
}

.sub .topnav .vertical-line {
  border-left: 1px solid rgb(200, 200, 200);
}

.sub .topnav .options .language-selector {
  color: var(--black-color);
}

.sub .topnav .options .search path {
  stroke: var(--black-color);
}

.sub .topnav .options .menu path {
  fill: var(--black-color);
}

.uoj-breadcrumb {
  display: none;
  margin: 1rem 0 2rem 0px;
  align-items: center;
  background-color: transparent !important;
}

.uoj-breadcrumb .page a {
  color: var(--black-color);
  font-size: 1rem;
  transition: all 0.3s ease 0s;
}

.uoj-breadcrumb .page a:hover {
  text-decoration: none;
  color: var(--blue-color);
}

.uoj-breadcrumb .icon {
  display: flex;
  margin: 0px 0.5rem;
  align-items: center;
  width: 0.5rem;
}

.uoj-breadcrumb .icon img {
  width: 100%;
}

.news-content .title {
  margin: 2rem auto;
  line-height: 2.2;
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
}

.news-content .more-info {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin: 1rem auto;
}

.news-content .more-info .date {
  display: flex;
  font-family: var(--default-font-sb);
  align-items: center;
  font-size: 1rem;
  flex-direction: row-reverse;
  color: rgb(107, 107, 107);
}

.news-content .more-info .date span {
  margin-left: 1rem;
  display: flex;
}

.news-content .more-info .share-options {
  display: flex;
  align-items: center;
  font-family: var(--default-font-sb);
  font-size: 0.9rem;
  color: rgb(107, 107, 107);
  display: none;
}

.news-content .more-info .share-options .icons {
  margin-right: 2rem;
  display: flex;
}

.news-content .more-info .share-options .icons a {
  display: flex;
  justify-content: center;
}

.news-content .more-info .share-options .icons a svg {
  width: 3rem;
  transform: rotate(90deg);
  display: flex;
  margin: 0px 0.5rem;
}

.news-content .more-info .share-options #share-icon1:hover #Ellipse_25 {
  fill: rgb(182, 44, 63);
}

.news-content .more-info .share-options #share-icon1:hover path {
  stroke: rgb(255, 255, 255);
}

.news-content .more-info .share-options #share-icon2:hover #Ellipse_25 {
  fill: rgb(119, 71, 142);
}

.news-content .more-info .share-options #share-icon2:hover path {
  fill: rgb(255, 255, 255);
}

.news-content .more-info .share-options #share-icon3:hover #Ellipse_25 {
  fill: rgb(34, 176, 233);
}

.news-content .more-info .share-options #share-icon3:hover path {
  stroke: rgb(255, 255, 255);
}

.news-content .more-info .share-options #share-icon4:hover #Path_925 path:first-child {
  fill: rgb(0, 34, 71);
}

.news-content .more-info .share-options #share-icon4:hover #Icon_feather-facebook {
  stroke: rgb(255, 255, 255);
}

.news-content {
  margin-bottom: 3rem;
  min-height: 40rem;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
.news-content .news-thumbnail {
  margin-top: 2rem;
  display: flex;
  float: left;
  width: auto;
}
.news-thumbnail.container {
  width: auto;
  z-index: 2;
}
.news-content .news-thumbnail img,
.news-thumbnail img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.news-content .news-thumbnail img{
  object-fit:contain;
}
.news-thumbnail.news-detail-img {
  margin-top: 0rem;
}
.news-content .news-detail {
  color: var(--black-color);
}
.news-content .news-detail p {
  font-size: 1rem;
  line-height: 2;
  text-align: right;
  padding: 0;
}

label {
  margin-bottom: unset;
}

.subpage-pattern {
  position: absolute;
  top: -7rem;
  right: 0px;
  width: 100%;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  height: 21rem;
  background-image: url("/themes/uoj_theme/media/Repeat Grid 9.png");
}

.all-news .swiper-wrapper {
  height: 27rem;
}
.news-container .all-news .swiper-slide .card {
  height: 100%;
  border-radius: 0px;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}

a.news-item:hover .news-card .image-container img {
  transform: scale(1.1);
}

.news-container .all-news .swiper-slide .news-card .image-container img {
  height: 100%;
  transition: all 0.6s ease 0s;
  width: 100%;
  object-fit: cover;
}

.news-container .all-news .swiper-slide:nth-child(3n+1) .card {
  border-bottom: 10px solid var(--blue-color);
}

.news-container .all-news .swiper-slide:nth-child(3n+2) .card {
  border-bottom: 10px solid var(--orange-color);
}

.news-container .all-news .swiper-slide:nth-child(3n+3) .card {
  border-bottom: 10px solid var(--green-color);
}
.uni-overview h1.section-title,
.uni-overview .description {
  text-align: center;
}


h1.section-title {
  font-size: 2rem;
  position: relative;
  padding: 0px 15px;
  margin-top: 2rem;
}

.our-story h1.section-title,
.bar-chart h1.section-title {
  padding: 0;
}

.bar-chart h1.section-title::before {
  display: none;
}


.all-news-container .card-title {
  color: var(--black-color);
  transition: all 0.3s ease 0s;
}

.all-news-container a:hover .card-title {
  color: var(--blue-color);
}

.all-news-container .card-section .col-lg-4 a:hover .img-container img {
  transform: scale(1.1);
}

.all-news.swiper {
  position: relative !important;
  height: 32.5rem;
}

.patt svg,
.patt img {
  max-width: 4rem;
  min-width: 4rem;
}

.all-news-container .card-section .card .date {
  color: white;
  font-family: var(--default-font-sb);
  font-size: 3rem;
  text-align: left;
  margin: -.5rem 0rem 0rem 0.5rem;
}

.all-news-container .card-section .card .day {
  font-family: var(--default-font-b);
}

.all-news-container .card-section .card .date .month-year {
  font-size: 1.2rem;
  color: rgb(240, 240, 240);
  margin-top: -.5rem;
  font-family: var(--default-font);
}

.about-us .description,
.contact-us-container .description,
.departments .description,
.open-data .description,
.bar-chart .content .description,
.future-leader .description,
.safe-speech .description,
.f-services .description,
.news-ads .ads .description,
.all-news-container .description {
  font-size: 1rem;
  color: var(--txt-color);
  line-height: 2;
  margin: 0;
  width: 100%;
}

.values .description {
  font-size: 1rem;
  line-height: 2;
  text-align: center;
  margin-top: 1.5rem;
  color: var(--txt-color);
}


.uni-values .num {
  width: 3rem;
}


.all-news-container .card .card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1rem 0rem 0.5rem;
  line-height: 2;
}

.all-news-container .topic {
  color: var(--blue-color);
  margin: 0.5rem 0px;
  font-size: .9rem;
  display: none;
}

.all-news-container .topic::before {
  top: -0.2rem;
  right: 0px;
  position: relative;
  content: "";
  display: inline-block;
  margin: 0px 0px 0px 0.5rem;
  transition: all 0.2s ease 0s;
  height: 1px;
  width: 2rem;
  background-color: var(--blue-color);
}

.all-news-container .card .card-text {
  line-height: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  /* margin-top: 1rem; */
  font-size: 1rem;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  color: var(--txt-color);
}
.research-innovation.all-news-container .col-lg-4 .card .card-text{
display:none;
}
.all-news-container .col-lg-4 .card .moreNews{
  position:relative;
  padding-right: 1.4rem;

}
.all-news-container .col-lg-4 .card .moreNews span{
  transition:var(--transition);
  position: relative;
  display: block;
}
.all-news-container .col-lg-4 .card .moreNews::before{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  transform: translateY(-50%);
  height:1px;
  width:1rem;
  background-color: var(--blue-color);
  z-index:1;
}
.all-news-container .col-lg-4 .card .moreNews:hover span{
  transform: translateX(-0.2rem);
}
.all-news-container .card .img-container {
  height: 16rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}


.all-news-container .col-lg-4 .card:hover .img-container img.card-img-top {
  transform: scale(1.1);
}

.all-news-container .card .card-img-overlay {
height:16rem;
      	padding: 1rem;
  border-radius: 0px;
  overflow: hidden;
}


.scroll .logo-container .colored-logo img {
  height: 4rem;
  width: auto;
}

.deco2 {
  background: linear-gradient(to left, transparent 0%, rgba(255, 255, 255, 0.5) 100%);
  height: 100%;
  width: 8%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}
.pattern-image {
  padding: 0 0px 3rem;
}
.pattern-image a {
  margin: .5rem;
  width: fit-content;
  background-color: var(--blue-color);
  color: white;
  padding: 1.1rem 2rem;
  display: flex;
  transition: all 0.3s ease-in-out 0s;
}

.pattern-image a img {
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.5rem;
}

.pattern-image a:hover {
  background-color: var(--blue-color-hover);
}

[id="customBackground"] {
  background-image: url("http://emilyhayman.com/codepens/filter-1.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 100%;
  transition: background-image 0.55s ease 0s;
}

[id="customBackground"]::after {
  content: "";
  inset: 0px;
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-in 0s;
  will-change: opacity;
}

[id="customBackground"].cityscape {
  background-image: url("http://emilyhayman.com/codepens/filter-1.jpg");
}

[id="customBackground"].bus {
  background-image: url("http://emilyhayman.com/codepens/filter-2.jpg");
}

[id="customBackground"].cactus {
  background-image: url("http://emilyhayman.com/codepens/filter-3.jpg");
}

.custom-dropdown {
  position: absolute;
  cursor: pointer;
  min-width: 400px;
  margin-top: -41px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.custom-dropdown.active input[type="radio"]+label {
  visibility: visible;
  opacity: 1;
  height: auto;
}

.custom-dropdown:not(.active) input[type="radio"]:not(:checked)+label {
  visibility: hidden;
  opacity: 0;
  height: 0px;
  padding: 0px;
  margin: 0px;
}

.custom-dropdown input[type="radio"] {
  display: none;
  pointer-events: none;
}

.custom-dropdown input[type="radio"]:checked+label {
  z-index: 10;
}

.custom-dropdown label {
  cursor: pointer;
  position: relative;
  display: block;
  background-color: rgb(255, 255, 255);
  transition: all 0.25s ease-in-out 0s;
  backface-visibility: hidden;
  will-change: opacity;
}

.custom-dropdown::after {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  padding: 16px 19px 15px;
  border-left: 1px dotted rgb(204, 204, 204);
  position: absolute;
  top: 14px;
  height: 42px;
  right: 0px;
  font-size: 0.9em;
  z-index: 10;
  color: rgb(180, 180, 180);
  transition: none 0s ease 0s;
  pointer-events: none;
}

.custom-dropdown label {
  font-family: Montserrat, sans-serif;
  color: rgb(122, 122, 122);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 1.4em;
  padding: 22px 26px;
  margin-bottom: 10px;
}

.custom-dropdown.active::after {
  visibility: hidden;
}

.custom-dropdown.active input[type="radio"]:checked+label {
  color: rgb(0, 0, 0);
}

.custom-dropdown.active input[type="radio"]:checked+label:hover {
  color: rgb(255, 255, 255);
}

.custom-dropdown.active label:hover {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

.custom-dropdown.active+[id="customBackground"] {
  filter: blur(3px);
}

.custom-dropdown.active+[id="customBackground"]::after {
  visibility: visible;
  opacity: 0.5;
}

.otherservices.aos-init.aos-animate {
  width: 100%;
}

.faqs .faqs-search {
  width: 100%;
  background-color: rgb(240, 240, 240);
  padding: 2rem 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0px;
}

.faqs .faqs-search input {
  width: 90%;
  padding: 2rem 1rem;
  border: none;
  font-size: 1rem;
  background: url("/themes/uoj_theme/media/Icon feather-search-alt.svg") 1rem center / 1.6rem no-repeat white;
}

.faqs.ES-material .faq-group {
  margin-top: 1rem !important;
}

.faqs .faq-group {
  flex-direction: column;
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

.faqs .faq-group .faq-item {
  background-color: rgb(252, 252, 252);
  height: fit-content;
  padding: 1rem;
  width: 100%;
  border: 2px solid rgb(238, 238, 238);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.faqs .faq-group .faq-item:not(:first-child) {
  margin-top: 1rem;
}

.faqs .faq-group .faq-item .expand {
  display: flex;
  align-items: center;
  transform: rotate(0);
  transition: all 0.3s ease 0s;
}

.faqs .faq-group .faq-item .expand img {
  width: 2rem;
}

.faqs .faq-group .faq-item .header.expanded .expand {
  transform: rotate(180deg);
}

.faqs .faq-group .faq-item .header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
}

.faqs .faq-group .faq-item .header:hover .faq-title {
  color: var(--blue-color);
}

.faqs .faq-group .faq-item .header .faq-title {
  font-size: 1.1rem;
  transition: all 0.3s ease 0s;
}

.faqs .faq-group .faq-item .faq-parent {
  border-top: 1px solid rgb(238 238 238 / 0%);
  margin: 1.5rem 0 0;
  font-size: 1.5rem;
  font-family: var(--default-font-sb);
  transition: all 0.3s ease-in-out;
}

.faqs .faq-group .faq-item .faq-parent.show {
  border-top: 1px solid rgb(238, 238, 238);
}

.faqs .faq-group .faq-item .faq-details {
  padding: 0rem 1.5rem 0px 0px;
  margin: 1rem 0px;
  font-family: var(--default-font);
  color: rgb(88, 88, 88);
  position: relative;
  font-size: 1rem;
  line-height: 2;
  width: 100%;
}

.faqs .faq-group .faq-item .faq-details::after {
  top: 0px;
  position: absolute;
  height: 100%;
  width: 2px;
  right: 0rem;
  background-color: var(--blue-color);
  content: "";
}

.faqs .faq-group .faq-item .collapse .toggle {
  margin-left: .5rem;
  transform: rotate(90deg);
  height: fit-content;
  transition: all 0.3s ease 0s;
}

.faqs .faq-group .faq-item .collapse .toggle img {
  width: .9rem;
}

.faqs .faq-group .faq-item .faq-subheader {
  display: flex;
  margin-top: 1.5rem;
  transition: all 0.3s ease;
  font-size: 1rem;
  line-height: 2;
}

.faqs .faq-group .faq-item .faq-subheader:hover {
  color: var(--blue-color);
  cursor: pointer;
}

.faqs .faq-group .faq-item .faq-subheader.toggled {
  color: var(--blue-color);
}

.faqs .faq-group .faq-item .faq-subheader.toggled .toggle {

  transform: rotate(0deg);

  height: fit-content;

  transform-origin: center;
}

.faqs .be-in-contact a:hover {
  text-decoration: none;
}

.faqs .be-in-contact {
  margin: 0px auto 2.5rem;
}

.faqs .be-in-contact .main-desc {
  font-size: 1.1rem;
  margin-bottom: .2rem;

}

.faqs .be-in-contact .secondary-desc {
  font-size: .95rem;
  color: rgb(107, 107, 107);
  line-height: 1.8;
  margin-top: 1rem;
}

.faqs .be-in-contact .secondary-desc a {
  color: var(--blue-color);
  transition: all 0.3s ease 0s;
}

.faqs .be-in-contact .secondary-desc a:hover {
  color: var(--blue-color-hover);
}

hr.faq {
  margin: 2rem 0 1.5rem;
}

.faqs .be-in-contact .main-desc span>a {
  color: var(--orange-color);
  transition: all 0.3s ease 0s;
}

.faqs .be-in-contact .main-desc span>a:hover {
  color: var(--orange-color-hover);
}

.contact-us {
  background-image: url("/themes/uoj_theme/media/Repeat Grid 9.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

/* FIRST BRANCHES SECTION START */
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-title {
  color: var(--navy-blue-color);
}
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon ellipse {
  fill: #00162e2b;
}
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(1) .card-footer .icon:hover ellipse {
  fill: var(--blue-color);
}
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon:hover ellipse {
  fill: var(--navy-blue-color);
}
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon path {
  stroke: var(--navy-blue-color);
}
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon:hover path {
  stroke: white;
}

.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon #Path_1736 {
  fill: var(--navy-blue-color);
}

.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1736 {
  fill: white;
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-title {
  color: var(--orange-color);
}
.contact-us .branches .col-lg-6 .card-footer .icon ellipse {
  transition: all .3s ease-in-out;
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon ellipse {
  fill: #d37b603b;
}
.agency .be-in-contact {
  margin-bottom: 0;
  background-color: white;
  padding: 2rem 1rem;
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon:hover ellipse {
  fill: var(--orange-color);
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon path {
  stroke: var(--orange-color);
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon:hover path {
  stroke: white;
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon #Path_1736 {
  fill: var(--orange-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1736 {
  fill: white;
}
/* SECOND BRANCHE - SECOND CARD START */
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-title {
  color: var(--purple-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon ellipse {
  fill: #77478e4a;
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon:hover ellipse {
  fill: var(--purple-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon path {
  stroke: var(--purple-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon:hover path {
  stroke: white;
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon #Path_1736 {
  fill: var(--purple-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1736 {
  fill: white;
}

/* SECOND BRANCHE - SECOND CARD END */
/* SECOND BRANCHE - THIRD CARD START */
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-title {
  color: var(--green-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon ellipse {
  fill: #0da2904a;
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon:hover ellipse {
  fill: var(--green-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon path {
  stroke: var(--green-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon:hover path {
  stroke: white;
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon #Path_1736 {
  fill: var(--green-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card-footer .icon:hover #Path_1736 {
  fill: white;
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-title {
  color: var(--red-color);
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon ellipse {
  fill: #b62c3f2e;
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon:hover ellipse {
  fill: var(--red-color);
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon path {
  stroke: var(--red-color);
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon:hover path {
  stroke: white;
}
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon #Path_1736 {
  fill: var(--red-color);
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card-footer .icon:hover #Path_1736 {
  fill: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-title {
  color: var(--red-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon ellipse {
  fill: #b62c3f2e;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover ellipse {
  fill: var(--red-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon path {
  stroke: var(--red-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover path {
  stroke: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon #Path_1736 {
  fill: var(--red-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1736 {
  fill: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-title {
  color: var(--purple-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon ellipse {
  fill: #77478e4a;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover ellipse {
  fill: var(--purple-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon path {
  stroke: var(--purple-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover path {
  stroke: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon #Path_1667,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon #Path_1668,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon #Path_1669,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon #Path_1736 {
  fill: var(--purple-color);
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1736 {
  fill: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card .pattern ellipse,
.contact-us .branches:nth-child(2) .col-lg-6:nth-child(4) .card .pattern ellipse {
  fill: var(--red-color)
}

.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card .pattern ellipse {
  fill: var(--navy-blue-color)
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(1) .card .pattern ellipse {
  fill: var(--orange-color)
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(2) .card .pattern ellipse,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card .pattern ellipse {
  fill: var(--purple-color)
}

.contact-us .branches:nth-child(2) .col-lg-6:nth-child(3) .card .pattern ellipse {
  fill: var(--green-color)
}

.contact-us .services {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.contact-us .services .service {
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  padding: 0 0 2rem 0;
  border-bottom: 1px solid #dfdfdf
}

.contact-us .services .service:last-child {
  border-bottom: none;
  padding: 0;
}

.contact-us .branches .card .card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-us .services .service:nth-child(3) {
  border-left: none;
}

.contact-us .services .service .description {
  color: #686868;
  width: 88%;
  line-height: 2;
  font-size: 1rem;
  text-align: center;
}

.contact-us .services .service a.start {
  color: var(--blue-color);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease 0s;
}

.contact-us .services .service a.start:hover {
  color: var(--blue-color-hover);
}

.contact-us .contact-infos {
  background-color: rgb(250, 250, 250);
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  color: rgb(104, 104, 104);
  font-size: 1.1rem;
  padding-bottom: 0;
  padding-top: 0;
}

.contact-us .contact-infos .phone,
.contact-us .contact-infos .email,
.contact-us .contact-infos .fax {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  font-size: 1rem;
  justify-content: flex-end;
  background-color: white;
  padding: 1rem 1.5rem;
}

.contact-us .contact-infos .email,
.contact-us .contact-infos .phone {
  border-bottom: 1px solid rgb(213, 213, 213);
}

.contact-us .contact-infos .phone img,
.contact-us .contact-infos .email img,
.contact-us .contact-infos .fax img {
  margin-left: 1rem;
  height: 1.5rem;
}

.contact-us .contact-infos .fax {
  position: relative;
  padding: 0.85rem 1.9rem;
}

.contact-us .contact-infos .phone span,
.contact-us .contact-infos .fax span {
  direction: ltr;
}

.contact-us .map {
  background-color: rgb(227, 227, 227);
  height: 55vh;
  width: 100%;
  z-index: 1;
}

.contact-us .map-container {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

.contact-us .map-container .zoom-controls {
  position: absolute;
  bottom: 5rem;
  right: 2rem;
  z-index: 2;
}

.contact-us .map-container .print {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  z-index: 2;
  background-color: white;
  border: 1px solid rgba(192, 192, 192, 0.42);
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease 0s;
}

.contact-us .map-container .print:hover {
  background-color: rgb(226, 226, 226);
}

.contact-us .map-container .zoom-controls .zoom-in,
.contact-us .map-container .zoom-controls .zoom-out {
  width: 2.5rem;
  height: 2.5rem;
  background-color: white;
  border: 1px solid rgba(192, 192, 192, 0.42);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.contact-us .map-container .zoom-controls .zoom-in {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.contact-us .map-container .zoom-controls .zoom-out {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.contact-us .map-container .zoom-controls .zoom-in:hover,
.contact-us .map-container .zoom-controls .zoom-out:hover {
  background-color: rgb(226, 226, 226);
}

.contact-us .branches-otherservices {
  background-color: rgb(250, 250, 250);
  flex-wrap: wrap;
}

.branches-otherservices .col-lg-6 {
  padding: 0;
}

.contact-us .branches-otherservices .branches .contents {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.contact-us .branches-otherservices .branches .contents.card-columns {
  column-count: 1;
}

.contact-us .branches-otherservices .description {
  font-size: 2rem;
  margin: 2rem 0px 2rem;
  text-align: center;
  color: var(--black-color);
}

.contact-us .branches-otherservices .otherservices .contents.card-columns {
  column-count: 1;
}

.contact-us .branches-otherservices .branches .item {
  background-color: white;
  padding: 1.8rem 2rem;
  margin-bottom: 3.5rem;
  height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}



.contact-us .branches-otherservices .branches .item .pattern {
  position: absolute;
  top: 1rem;
  left: 0rem;
}



.contact-us .branches-otherservices .branches .item img,
.contact-us .branches-otherservices .otherservices .item img {
  height: 2.5rem;
  width: fit-content;
}

.contact-us .branches-otherservices .branches .item .details,
.contact-us .branches-otherservices .otherservices .item .details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-us .branches-otherservices .branches .card:last-child .item .details .identification {
  color: var(--green-color);
}

.contact-us .branches-otherservices .branches .item .details .identification {
  color: var(--blue-color);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
}

.contact-us .branches-otherservices .branches .item .details .number,
.contact-us .branches-otherservices .otherservices .item .details .number {
  font-size: 1.8rem;
  color: rgb(104, 104, 104);
}

.contact-us .branches-otherservices .otherservices .item .pattern {
  position: absolute;
  top: 1rem;
  left: 0px;
}

.contact-us .branches-otherservices .otherservices {
  width: 100%;
  overflow: hidden;
}

.contact-us .branches-otherservices .otherservices .item {
  background-color: white;
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.contact-us .branches-otherservices .otherservices .item .details .identification {
  color: var(--orange-color);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(1) {
  border-bottom: 0.5rem solid var(--orange-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(1) .item .pattern ellipse {
  fill: var(--orange-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(1) .item .pattern path {
  stroke: var(--orange-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(2) {
  border-bottom: 0.5rem solid var(--red-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(2) .item .identification {
  color: var(--red-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(2) .pattern ellipse {
  fill: var(--red-color);
}

.contact-us .branches-otherservices .card:nth-child(2) .item .pattern path {
  stroke: var(--red-color);
}

.contact-us .branches-otherservices .otherservices .card .item {
  background-color: white;
  padding: 1.8rem 2rem;
  height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.contact-us .branches-otherservices .otherservices .card,
.contact-us .branches-otherservices .branches .card {
  border: none;
  border-radius: 0px;
  margin-bottom: 1.25rem;
}

.contact-us .branches-otherservices .otherservices .card:last-child {
  border-bottom: 0.5rem solid var(--purple-color);
  margin-bottom: 0px;
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) {
  border-bottom: 0.5rem solid var(--mint-green-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) .item .details .identification {
  color: var(--mint-green-color);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) .item .pattern ellipse {
  fill: var(--mint-green-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) .item .pattern path {
  stroke: var(--mint-green-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(4) .item .identification {
  color: var(--purple-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(4) .item .pattern ellipse {
  fill: var(--purple-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(4) .item .pattern path {
  stroke: var(--purple-color);
}

.contact-us .map-container .leaflet-popup {
  height: 5rem;
}
.contact-us .map-container .leaflet-popup-content {
  min-width: 20rem;
  width: 100%;
}

.contact-us .map-container .leaflet-popup-content-wrapper,
.contact-us .map-container .leaflet-popup-tip {
  height: 100%;
  border-radius: 0;
}

.contact-us .map-container .leaflet-popup-content .location-name {
  text-align: right;
}

.contact-us .map-container .leaflet-popup-content .location-details {
  height: 4rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1rem 0;
}

.contact-us .map-container .leaflet-popup-close-button {
  position: absolute;
  top: -0.3rem !important;
  left: 0.2rem !important;
}

.contact-us .map-container .leaflet-popup-close-button span {
  font-size: 1.4rem;
  color: black;
}

.contact-us .map-container .leaflet-popup-content .location-directions {
  height: 2.3rem;
  width: 2.3rem;
  border-right: 1px solid lightgrey;
  padding-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}
.contact-us .map-container .leaflet-popup-content .location-directions img{
  height:100%;
  width:100%;
  object-fit:contain;
}
.menu {
  display: none;
}

.topnav a {
  display: flex;
  align-items: center;
}

.topnav .links {
  display: none;
}

.topnav.mobile .right-lnk .logo-container div:first-child svg>g>path {
  fill: var(--blue-color);
}

.topnav.mobile .menu-mobile-icon svg>path,
.sub .topnav .menu-mobile-icon svg>path {
  fill: var(--black-color);
}

.topnav.mobile .search svg>g>path,
.sub .topnav .search svg>g>path {
  stroke: var(--black-color);
}

.topnav.mobile .vertical-line {
  background-color: grey;
}

.error_newsletter {
  min-height: 2rem;
  margin-top: 1rem;
  color: red;
  display: none;
}

.all-news-container.research-innovation {
  padding: 4rem 0px;
}

.col-lg-6.column-1 {
  padding-right: 0px;
}

.col-lg-6.column-2 {
  padding-left: 0px;
}

.pattern-image .row {
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.story {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  padding: 2rem 15px;
}

.story .image-container {
  height: 15rem;
  position: relative;
  margin-bottom: 2rem;
}

.uni-values .column {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.uni-values .column:first-child .val-content:first-child .content {
  color: var(--blue-color);
}

.uni-values .column:first-child .val-content:nth-child(2) .content {
  color: var(--orange-color);
}

.uni-values .column:nth-child(2) .val-content:first-child .content {
  color: var(--green-color);
}

.uni-values .column:nth-child(2) .val-content:nth-child(2) .content {
  color: var(--purple-color);
}

.uni-values .column:nth-child(3) .val-content:first-child .content {
  color: var(--red-color);
}

.uni-values .column:nth-child(3) .val-content:nth-child(2) .content {
  color: var(--grey-color);
}


.uni-values .column:first-child .val-content:first-child .num {
  background-color: var(--blue-color);
  color: white;
  padding: 0rem 0.5rem;
  border-right: 10px solid var(--blue-color-hover);
  margin-left: 1rem;
}


.uni-values .column:first-child .val-content:nth-child(2) .num {
  background-color: var(--orange-color);
  color: white;
  padding: 0rem 0.5rem;
  border-right: 10px solid rgb(158, 91, 71);
  margin-left: 1rem;

}

.uni-values .column:nth-child(2) .val-content:first-child .num {
  background-color: var(--green-color);
  color: white;
  padding: 0rem 0.5rem;
  border-right: 10px solid rgb(12, 122, 109);
  margin-left: 1rem;
}

.uni-values .column:nth-child(2) .val-content:nth-child(2) .num {
  background-color: var(--purple-color);
  color: white;
  padding: 0rem 0.5rem;
  border-right: 10px solid rgb(65, 1, 65);
  margin-left: 1rem;
}

.uni-values .column:nth-child(3) .val-content:first-child .num {
  background-color: var(--red-color);
  color: white;
  padding: 0rem 0.5rem;
  border-right: 10px solid rgb(110, 1, 1);
  margin-left: 1rem;
}

.uni-values .column:nth-child(3) .val-content:nth-child(2) .num {
  background-color: var(--grey-color);
  color: white;
  padding: 0rem 0.5rem;
  border-right: 10px solid var(--dark-grey-color);
  margin-left: 1rem;
}


.story.uoj .image-container img {

  object-fit: contain;

}

.story .image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.story .image-container video {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.goals .card {
  background-color: white;
  border: none;
  border-radius: 0px;
}
.all-news-container .card-columns {
  column-gap: unset;
}

.all-news-container .card-columns .col-lg-4 .card .date {
  color: white;
  font-family: var(--default-font-sb);
  font-size: 3rem;
  margin: -1rem 0rem 0rem 0.5rem;
  text-align: left;
}

.all-news-container .card-columns .col-lg-4 .card .date .information {
  font-size: 1.3rem;
  color: rgb(240, 240, 240);
  font-family: var(--default-font);
}

.all-news-container .card {
  border: none;
  border-radius: 0px;
  width: 100%;
  background-color: transparent;
  margin-bottom: 2rem;
}

.col-lg-4 {
  margin-bottom: 1rem;
}

.row-cards .col-lg-4 {
  margin-bottom: 2rem;
}

.all-news-container .topic {
  color: var(--blue-color);
  margin: 0;
}

.all-news-container .topic::before {
  top: -0.2rem;
  right: 0px;
  position: relative;
  content: "";
  display: inline-block;
  margin: 0px 0px 0px 0.5rem;
  transition: all 0.2s ease 0s;
  height: 1px;
  width: 2rem;
  background-color: var(--blue-color);
}
.all-news-container .card .img-container::after {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
}
.our-story .title {
  font-size: 2rem;
}

.our-story .subtitle {
  font-size: 1.1rem;
  margin-top: .5rem;
}

.our-story .description {
  font-size: 1rem;
  color: var(--txt-color);
  line-height: 2;
  margin-top: 1rem;
  text-align: justify;
  margin-bottom:2rem;
}

.about-swiper {
  overflow: hidden;
}

.about-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.about-swiper .swiper-wrapper .swiper-slide .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  background-color: white;
  height: 15rem;
  margin-bottom: 2rem;
  border-radius: 0px;
}

.about-swiper .swiper-wrapper .swiper-slide .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-swiper .swiper-wrapper .swiper-slide .card .card-body .content .subt {
  color: var(--txt-color);
  font-size: 1rem;
}

.about-swiper .swiper-wrapper .swiper-slide .card .card-body .number {
  font-size: 2.5rem;
}

.image-viewer {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.particles-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.particles-container {
  height: 62vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
}

.goals .card-text,
.goals .card-title,
.volunteering .volunteer-tiles .card .card-title {
  width: 95%;
}

.volunteering .tab-pane {
  width: 100% !important;
}
.volunteering .nav-tabs .nav-item.slick-current.slick-active .nav-link {
  background-color: white;
}

.goals .card-title,
.volunteering .volunteer-tiles .card .card-title,
.Deanship-agencies .agencies-tiles .card .card-title {
  font-size: 1.4rem;
  font-weight: 600;
  width: 90%;
  line-height: 1.7;
}

.goals-container.container {
  background: url("/themes/uoj_theme/media/Intersection 2.jpg");
  width: 100%;
  height: auto;
  padding-top: 3rem;
  padding-bottom: 2rem !important;
  background-size: cover;
}

.goals-container h1 {
  padding-top: 0;
  padding-bottom: 2rem;
}

.goals .masonry-grid_item:nth-child(4n+1) .card {
  border-right: 10px solid var(--blue-color);
}

.goals .masonry-grid_item:nth-child(4n+2) .card {
  border-right: 10px solid var(--orange-color);
}

.goals .masonry-grid_item:nth-child(4n+3) .card {
  border-right: 10px solid var(--green-color);
}

.goals .masonry-grid_item:nth-child(4n+4) .card {
  border-right: 10px solid var(--red-color);
}

.goals .masonry-grid_item:nth-child(4n+1) .card li::before {
  background-color: var(--blue-color);
}

.goals .masonry-grid_item:nth-child(4n+2) .card li::before {
  background-color: var(--orange-color);
}

.goals .masonry-grid_item:nth-child(4n+3) .card li::before {
  background-color: var(--green-color);
}

.goals .masonry-grid_item:nth-child(4n+4) .card li::before {
  background-color: var(--red-color);
}

.goals .masonry-grid_item:nth-child(4n+1) .card .card-body .pattern svg ellipse {
  fill: var(--blue-color);
}

.goals .masonry-grid_item:nth-child(4n+2) .card .card-body .pattern svg ellipse {
  fill: var(--orange-color);
}

.goals .masonry-grid_item:nth-child(4n+3) .card .card-body .pattern svg ellipse {
  fill: var(--green-color);
}

.goals .masonry-grid_item:nth-child(4n+4) .card .card-body .pattern svg ellipse {
  fill: var(--red-color);
}

.goals li,
.volunteering .volunteer-tiles .card .card-body .card-text li,
.Deanship-agencies .agencies-tiles .card .card-body .card-text li {
  line-height: 2;
  font-size: 1rem;
  list-style-type: none;
  position: relative;
  width: fit-content;
  color: var(--txt-color);
  margin-bottom: 1rem;
  text-align: right;
}

.goals li:last-child,
.volunteering .volunteer-tiles .card .card-body .card-text li:last-child,
.Deanship-agencies .agencies-tiles .card .card-body .card-text li:last-child {
  margin-bottom: 0;
}

.goals .card ul li::before {
  content: "";
  top: .7rem;
  right: -2.5rem;
  position: absolute;
  height: .8rem;
  width: .8rem;
}

.achievements .swiper {
  display: flex;
  height: 40rem;
}

.achievements .news-advertisements .card {
  border-bottom: 10px solid var(--green-color);
  overflow: hidden;
  height: 100%;
}

.achievements .card:hover img {
  transform: scale(1.1);
}

.values {
  background-image: url("/themes/uoj_theme/media/footer-pattern-bottom.png");
  background-size: 28%;
  background-repeat: no-repeat;
  background-position: -7rem 7rem;
  background-color: white;
  padding: 0 1rem;
}

.uni-values {
  padding: 2.5rem 0;
  font-size: 1.2rem;
}

.uni-values .column .val-content {
  display: flex;
  flex-direction: row;
  margin-bottom: 1.5rem;
  min-width: 9rem;
}



.about-swiper {
  max-height: 70rem;
  height: fit-content !important;
  z-index: 0;
  position: relative !important;
}

.achievements .news-advertisements .nav-pills li.slick-active.slick-current .nav-link {
  color: var(--green-color) !important;
  background-color: transparent;
  border-bottom-color: 1px solid var(--green-color);
}

.achievements .news-advertisements .nav-link {
  background-color: transparent;
  border-radius: 0px;
  margin: 0;
  width: 86%;
  padding: 0;
  font-size: 1.1rem;
}

.achievements .news-advertisements .nav-link:hover {
  color: var(--green-color);
}

.achievements .news-advertisements .card {
  height: 22rem !important;
  border-radius: 0;
}

.leader-msg .leader-infos {
  margin-top: 1.5rem;
}

.leader-msg .leader-name {
  font-size: 1.2rem;
  margin-bottom: .5rem;
  font-family: var(--default-font-sb);
}

.leader-msg .achievement {
  color: var(--blue-color);
  font-size: .9rem;
}

.leaders .card {
  border: 0px;
  height: min-content;
  flex-direction: column;
}


.leaders .icon {
  transform: rotate(180deg);
  width: 3rem;
  margin-bottom: 1rem;
  height: 3rem;
}

.leaders .icon svg {
  width: 100%;
  height: 100%;
}

.leaders .card .card-text {
  color: var(--navy-blue-color);
  line-height: 2;
  font-size: 1rem;
  font-weight: 600;
}

.leaders .card .leader-msg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  opacity: 1;
  padding: 15px 15px 40px 15px;
  transition: width 2s ease 0s;
}

.leaders .card .card-image img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
}

.our-leaders {
  background: var(--background);
  padding: 0 0 2rem;
}

.leaders {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.plan .more-news,
.plan .more-news:hover {
  display: flex;
  color: white;
  background-color: var(--green-color);
  padding: 1rem 1.8rem;
  float: left;
  left: 0;
  position: absolute;
  bottom: 0;
  text-decoration: none;
  transition: all 0.3s ease-in-out 0s;
}

.plan .more-news:hover {
  background-color: rgb(11, 127, 113);
}

.plan .more-news::after {
  content: "";
  position: relative;
  background-image: url("/themes/uoj_theme/media/pdf.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 1.5rem;
  width: 1.1rem;
  display: block;
  margin: 0 1rem 0 0.5rem;
}
.plan .more-news.newclass::after{
  background-image: url("/themes/uoj_theme/media/clickHere.svg");
  transform:scaleX(-1);
  height:1.5rem;
  width:1.5rem;
}
.goals .card-text,
.volunteering .volunteer-tiles .card .card-text,
.Deanship-agencies .agencies-tiles .card .card-text {
  margin: 1.5rem 0px;
}

.goals .card-text ul,
.volunteering .volunteer-tiles .card .card-text ul {
  display: flex;
  flex-direction: column;
  padding-inline-start: 30px;
}

.achievements {
  background: url("/themes/uoj_theme/media/Intersection 2.jpg");
}

.achievements .nav-pills,
.news-advertisements .nav-pills {

  justify-content: center;
  flex-wrap: nowrap;
}

.about-swiper-section {
  position: relative;
  margin-top: 3rem;
  background: var(--background);
  padding-right: 15px;
}

.leaders .swiper-button-next,
.leaders .swiper-button-prev {
  color: white;
  top: 50%;
  display: block !important;
}

.leaders .swiper-button-prev {
  right: 1rem !important;
  top: 6.9rem;
  transform: scale(.7);

  height: 4.5rem;
  background-color: #00000063;
  width: 3rem;
  display: flex !important;
  align-items: center;

}

.leaders .swiper-button-next {
  left: 1rem !important;
  top: 6.9rem;
  transform: scale(.7);
  height: 4.5rem;
  background-color: #00000063;
  width: 3rem;
  display: flex !important;
  align-items: center;
}

.our-leaders .leaders {
  height: fit-content;
  position: relative !important;
  margin-top: 2rem;
}

.pattern-image .row .patt {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .7rem 15px;
  border-bottom: 1px solid #c0c0c0ab;
}

.pattern-image .row.six .patt:last-child {
  border-bottom: unset;
}

.pattern-image .row .patt .txt {
  font-size: 1.1rem;
  margin: 0 1.5rem 0 0;
  width: 27rem;
}

.details-panel {
  transform: translateX(-100%);
  width: 100%;
  height: 100vh;
  background-color: white;
}

.details-panel .side-panel {
  overflow-y: auto;
}

#DepartmentsFilterDropdown {
  transform: none !important;
  overflow-y: scroll;
  max-height: 20rem;
  width: fit-content;
  text-align: right;
  top: 3.4rem !important;
}

.details-panel .title {
  font-size: 1.2rem;
  padding: 1rem 2rem;
  line-height: 2;
}

.care-tiles.uni-files .download-file {
  display: flex;
  position: absolute;
  top: 0;
  font-size: 1.3rem;
  left: 0;
  font-family: 'cairo-semibold';
  color: #797979;
  padding: 1rem 1.8rem;
  background-color: #FAFAFA;
  border-bottom: 1px solid #E3E3E3;
  border-right: 1px solid #e3e3e3;
  width: 5rem;
  transition: width .3s;
  height: auto;
  align-items: center;
}

.care-tiles.uni-files .download-file:hover {
  width: 12rem;
}

.care-tiles.uni-files .download-file span {
  position: absolute;
  left: .5rem;
  opacity: 0;
  pointer-events: none;
}

.care-tiles.uni-files .download-file:hover span {
  opacity: 1;
  left: 1.5rem;
  transition: all ease-in-out .3s;
}

.care-tiles.uni-files .download-file .icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+1) .card .download-file .icon svg path {
  stroke: var(--blue-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+2) .card .download-file .icon svg path {
  stroke: var(--green-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+3) .card .download-file .icon svg path {
  stroke: var(--orange-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+4) .card .download-file .icon svg path {
  stroke: var(--purple-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+5) .card .download-file .icon svg path {
  stroke: var(--red-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+6) .card .download-file .icon svg path {
  stroke: var(--navy-blue-color);
}

label.js-form-required {

  margin-bottom: .5rem;

}



#edit-name--description,
#edit-pass--description {

  margin-top: .8rem;

  color: #828282;

  font-size: .95rem;

}



.form-actions.js-form-wrapper.form-wrapper {

  width: 100%;

}

.login-container input {
  border: 1px solid #bfbfbf;
  padding: 0.4rem;
}

.left-section form.user-login-form .submit-button {
  background-color: var(--blue-color);
  outline: none;
  border: none;
  color: white;
  font-family: 'Cairo';
  padding: 0.8rem 2.5rem;
  width: fit-content;
  margin-top: 0.5rem;
  transition: .3s all ease;
}

.left-section form.user-login-form .submit-button:hover {
  background-color: var(--blue-color-hover);
  outline: none;
  border: none;
  color: white;
  font-family: 'Cairo';
  padding: 0.8rem 2.5rem;
  width: fit-content;
  margin-top: 0.5rem;
  transition: .3s all ease;
}

.drupal-login .left-section {
  display: flex;
  align-items: center;
}

.login .left-section {
  margin-top: unset;
}

.login .right-section {
  top: 0;
}

.details-panel .description {
  font-size: 1rem;
  padding: 0rem 2rem;
  line-height: 2;
  color: var(--txt-color);
  text-wrap: wrap;
  word-wrap: break-word;
}

.details-panel .close {
  position: absolute;
  top: 1.5rem;
  z-index: 99;
  left: 1.5rem;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 50%;
}


.details-panel .accordion-group {
  margin-top: 1rem;
}

.details-panel .accordion-group .accordion-container div:nth-child(2) {
  margin-bottom: 1.2rem;
  padding: 0 2rem;
}

.details-panel .accordion-group .accordion-container .accordion-content ul li {
  position: relative;
  color: var(--txt-color);
  line-height: 3;
}

.sec-layer .accordion-group .accordion-container {
  margin-bottom: 0;
}

.accordion-group .ranking-items-div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.details-panel .accordion-group .ranking-items-div .accordion-content {
  color: var(--txt-color);
}

.details-panel .accordion-group .ranking-items-div .accordion-content p {
  margin: 0;
  padding: 0;
}

.details-panel .accordion-group .ranking-items-div span:first-child {
  margin-left: .5rem;
}

.details-panel .accordion-group .ranking-items-div {
  padding: 0 !important;
}

.details-panel .accordion-group .ranking-items-div:not(:last-child) {
  margin-bottom: .5rem;
}

.details-panel .accordion-group .accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1.2rem 2rem;
  border-top: 1px solid #e5e5e5;
  margin: 0;
}

.details-panel .accordion-group .accordion:last-child {
  border-bottom: 1px solid lightgray;
}


.details-panel .accordion-group .accordion-content p {
  padding: 0 1rem;
  color: var(--txt-color);
  line-height: 2;
  margin: 0;
}



.details-panel .accordion-group .accordion-content ul {
  padding-right: 2rem;
}

.details-panel .accordion-group .accordion span {
  font-size: 1.1rem;
}

.details-panel .tabs {
  padding: 0 1rem;
}

.details-panel .tabs .program-title {
  font-size: 1.1rem;
  margin-right: 1rem;
  margin-bottom: 1.5rem;
}


.details-panel .accordion-group .accordion svg {
  border-radius: 100%;
  background-color: var(--blue-color);
  stroke-width: 3;
  transition: all 0.3s ease-in-out 0s;
}

.details-panel .accordion-group .accordion svg g {
  position: relative;
  bottom: 0.5rem;
}

.details-panel .accordion-group .accordion svg {
  transform: rotate(-90deg);
}

.details-panel .accordion-group .accordion[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.departments .cards-section,
.f-services .cards-section {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 3rem 0;
}



.departments .bg-light-gray,
.f-services .bg-light-gray {
  padding-top: 3rem;
}

.departments .cards-section .col-lg-4.col-md-6,
.f-services .cards-section .col-lg-4.col-md-6 {
  padding: 0px;
}

.departments .cards-section a,
.f-services .cards-section a {
  width: fit-content;
}

.departments .cards-section .card::after,
.f-services .cards-section .card::after {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.47) 50%);
}

.departments .input-group-append,
.f-services .input-group-append {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blue-color);
  padding: 1rem 2rem;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.departments .input-group-append:hover,
.f-services .input-group-append:hover{
  background-color: var(--blue-color-hover);
}
.departments .dept-search,
.f-services .dept-search {
  border-radius: 0px;
  border: none;
  background-color: transparent;
  font-size: 1.1rem;
  color: white;
  padding: 0px;
  margin-left: 0.5rem;
  display: none;
}

.departments .input-group,
.f-services .input-group {
  margin-bottom: 6rem;
}

.departments input.form-control,
.f-services input.form-control {
  padding: 1rem;
  height: 100%;
  border-radius: 0px;
  border: none;
}

.departments .cards-section .col-lg-4 .card:hover img.card-img-top,
.f-services .cards-section .col-lg-4 .card:hover img.card-img-top {
  transform: scale(1.1);
}

.departments .cards-section .card,
.f-services .cards-section .card {
  height: 12rem;
  overflow: hidden;
  cursor: pointer;
}

.departments .cards-section .card .card-img-overlay,
.f-services .cards-section .card .card-img-overlay {
  z-index: 1;
}

.f-services .cards-section .card {
  width: 100%;
}

.departments .cards-section .col-lg-4:nth-child(9n+1) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+1) .card {
  border-bottom: 10px solid var(--blue-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+2) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+2) .card {
  border-bottom: 10px solid var(--orange-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+3) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+3) .card {
  border-bottom: 10px solid var(--green-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+4) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+4) .card {
  border-bottom: 10px solid var(--purple-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+5) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+5) .card {
  border-bottom: 10px solid var(--red-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+6) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+6) .card {
  border-bottom: 10px solid rgba(50, 92, 50, 0.8);
}

.departments .cards-section .col-lg-4:nth-child(9n+7) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+7) .card {
  border-bottom: 10px solid var(--mint-green-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+8) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+8) .card {
  border-bottom: 10px solid var(--navy-blue-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+9) .card,
.f-services .cards-section .col-lg-4:nth-child(9n+9) .card {
  border-bottom: 10px solid var(--dark-grey-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+1) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+1) .card svg g {
  stroke: var(--blue-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+2) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+2) .card svg g {
  stroke: var(--orange-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+3) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+3) .card svg g {
  stroke: var(--green-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+4) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+4) .card svg g {
  stroke: var(--purple-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+5) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+5) .card svg g {
  stroke: var(--red-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+6) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+6) .card svg g {
  stroke: rgba(50, 92, 50, 0.8);
}

.departments .cards-section .col-lg-4:nth-child(9n+7) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+7) .card svg g {
  stroke: var(--mint-green-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+8) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+8) .card svg g {
  stroke: var(--navy-blue-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+9) .card svg g,
.f-services .cards-section .col-lg-4:nth-child(9n+9) .card svg g {
  stroke: var(--dark-grey-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+1) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+1) .card svg path {
  fill: var(--blue-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+2) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+2) .card svg path {
  fill: var(--orange-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+3) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+3) .card svg path {
  fill: var(--green-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+4) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+4) .card svg path {
  fill: var(--purple-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+5) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+5) .card svg path {
  fill: var(--red-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+6) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+6) .card svg path {
  fill: rgba(50, 92, 50, 0.8);
}

.departments .cards-section .col-lg-4:nth-child(9n+7) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+7) .card svg path {
  fill: var(--mint-green-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+8) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+8) .card svg path {
  fill: var(--navy-blue-color);
}

.departments .cards-section .col-lg-4:nth-child(9n+9) .card svg path,
.f-services .cards-section .col-lg-4:nth-child(9n+9) .card svg path {
  fill: var(--dark-grey-color);
}

.departments .card .card-img-top,
.f-services .card .card-img-top {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.6s ease-in-out 0s;
}

.departments .card .card-img-overlay .card-title,
.f-services .card .card-img-overlay .card-title {
  background-color: white;
  align-items: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin: 0px;
  padding: .8rem 1rem;
  font-size: .9rem;
}

.departments .card .card-img-overlay .card-title svg,
.f-services .card .card-img-overlay .card-title svg {
  display: none;
}

.departments .card .card-img-overlay .card-title span,
.f-services .card .card-img-overlay .card-title span {
  margin-left: 0.5rem;
  color: var(--black-color);
}

.departments .cards-section .card .logo,
.f-services .cards-section .card .logo {
  height: 2.8rem;
  width: 2.8rem;
}

.departments .cards-section .card .logo img,
.f-services .cards-section .card .logo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.borderless {
  border: none;
  border-radius: 0px;
}

.service.col-md-4 .image {
  margin-bottom: .8rem;
  width: 8rem;
}

.service.col-md-4 .image img {
  height: 100%;
  width: 100%;
  object-fit: scale-down;
}

.data-tiles.container {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background);
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.data-tiles .col-lg-3 .pattern,
.about-swiper .pattern,
.goals-container .pattern {
  position: absolute;
  top: .7rem;
  left: 5.25rem;
  width: 1.3rem;
  height: 1.3rem;
}

.data-tiles .col-lg-3 .card {
  border: none;
  min-height: 16rem;
  height: 100%;
  position: relative;
  border-radius: 0px;
}

.data-tiles .col-lg-3 {
  margin-bottom: 2rem;
}

.data-tiles .col-lg-3.col-md-6 {
  padding: 0px;
}

.data-tiles .col-lg-3:nth-child(4n+1) .card,
.about-swiper .swiper-slide:nth-child(4n+1) .card {
  border-bottom: 10px solid var(--blue-color);
}

.data-tiles .col-lg-3:nth-child(4n+2) .card,
.about-swiper .swiper-slide:nth-child(4n+2) .card {
  border-bottom: 10px solid var(--green-color);
}

.data-tiles .col-lg-3:nth-child(4n+3) .card,
.about-swiper .swiper-slide:nth-child(4n+3) .card {
  border-bottom: 10px solid var(--orange-color);
}

.about-swiper .swiper-slide:nth-child(4n+3) .card svg g path#Path_1524 {
  fill: var(--orange-color);
}

.data-tiles .col-lg-3:nth-child(4n+4) .card,
.about-swiper .swiper-slide:nth-child(4n+4) .card {
  border-bottom: 10px solid var(--purple-color);
}

.data-tiles .col-lg-3:nth-child(4n+1) .card .card-body svg g,
.data-tiles .col-lg-3:nth-child(4n+1) .card .card-body svg path,
.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg g,
.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg path {
  stroke: var(--blue-color);
}

.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg ellipse,
.about-swiper .swiper-slide:nth-child(4n+1) .card:last-child .card-body svg path,
.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg #Path_1355,
.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg #Group_1826,
.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg #Group_1825,
.about-swiper .swiper-slide:nth-child(4n+1) .card .card-body svg #Path_1356 {
  fill: var(--blue-color);
}

.data-tiles .col-lg-3:nth-child(4n+1) .card .card-body svg path#Path_1524 {
  fill: var(--blue-color);
}

.data-tiles .col-lg-3:nth-child(4n+2) .card .card-body svg g,
.data-tiles .col-lg-3:nth-child(4n+2) .card .card-body svg path,
.about-swiper .swiper-slide:nth-child(4n+2) .card .card-body svg g,
.about-swiper .swiper-slide:nth-child(4n+2) .card .card-body svg path {
  stroke: var(--green-color);
}

.about-swiper .swiper-slide:nth-child(4n+2) .card .card-body svg rect,
.about-swiper .swiper-slide:nth-child(4n+2) .card .card-body svg circle#Ellipse_165 {
  fill: var(--green-color);
}

.about-swiper .swiper-slide:nth-child(4n+2) .card .card-body svg ellipse,
.data-tiles .col-lg-3:nth-child(4n+2) .card .card-body svg path#Path_1553,
.data-tiles .col-lg-3:nth-child(4n+2) .card .card-body svg path#Path_1552 {
  fill: var(--green-color);
}

.data-tiles .col-lg-3:nth-child(4n+3) .card .card-body svg g,
.data-tiles .col-lg-3:nth-child(4n+3) .card .card-body svg path,
.about-swiper .swiper-slide:nth-child(4n+3) .card .card-body svg g,
.about-swiper .swiper-slide:nth-child(4n+3) .card .card-body svg path {
  stroke: var(--orange-color);
}

.about-swiper .swiper-slide:nth-child(4n+3) .card .card-body svg ellipse {
  fill: var(--orange-color);
}

.about-swiper .swiper-slide:nth-child(4n+3) .card .card-body svg path#XMLID_1705_ {
  fill: var(--orange-color);
}

.data-tiles .col-lg-3:nth-child(4n+3) .card .card-body svg circle,
.data-tiles .col-lg-3:nth-child(4n+3) .card .card-body svg rect {
  fill: var(--orange-color);
}

.data-tiles .col-lg-3:nth-child(4n+4) .card .card-body svg g,
.data-tiles .col-lg-3:nth-child(4n+4) .card .card-body svg path,
.about-swiper .swiper-slide:nth-child(4n+4) .card .card-body svg g,
.about-swiper .swiper-slide:nth-child(4n+4) .card .card-body svg path {
  stroke: var(--purple-color);
}

.about-swiper .swiper-slide:nth-child(4n+4) .card .card-body svg ellipse,
.about-swiper .swiper-slide:nth-child(4n+4) .card .card-body svg path#Path_1553,
.about-swiper .swiper-slide:nth-child(4n+4) .card .card-body svg path#Path_1552 {
  fill: var(--purple-color);
}

.data-tiles .col-lg-3:nth-child(4n+4) .card .card-body svg circle,
.data-tiles .col-lg-3:nth-child(4n+4) .card .card-body svg rect {
  fill: var(--purple-color);
}

.data-tiles .col-lg-3 .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.data-tiles .col-lg-3 .card .card-body .info .card-title {
  color: var(--txt-color);
  font-size: 1.1rem;
}

.data-tiles .col-lg-3 .card .card-body .info .value,
.about-swiper .swiper-slide .card .value {
  font-size: 2.5rem;
}

.data-tiles .col-lg-3:nth-child(4n+1) .card .value,
.about-swiper .swiper-slide:nth-child(4n+1) .card .value {
  color: var(--blue-color);
}

.data-tiles .col-lg-3:nth-child(4n+2) .card .value,
.about-swiper .swiper-slide:nth-child(4n+2) .card .value {
  color: var(--green-color);
}

.data-tiles .col-lg-3:nth-child(4n+3) .card .value,
.about-swiper .swiper-slide:nth-child(4n+3) .card .value {
  color: var(--orange-color);
}

.data-tiles .col-lg-3:nth-child(4n+4) .card .value,
.about-swiper .swiper-slide:nth-child(4n+4) .card .value {
  color: var(--purple-color);
}

#chartdiv {
  width: 100%;
  height: 700px;

}

g[aria-labelledby="id-66-title"] {
  display: none;
}

#chart_div {
  width: 100%;
  height: 300px;
}

#chart_div svg>rect {
  fill: transparent
}

.bar-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bar-chart h1.section-title,
.bar-chart p.description {
  text-align: center;
}

.events-side-menu .close {
  position: absolute;
  top: 1.7rem;
  right: 1rem;
}

.events-side-menu.toggled {
  pointer-events: all;
}

.events-side-menu .menu-container {
  background-color: rgb(244, 244, 244);
  width: 100vw;
  float: left;
  height: 100%;
  overflow-y: auto;
}

.events-side-menu .menu-label {
  padding: 1.5rem 4rem;
  background-color: white;
  text-align: center;
  width: 100%;
  font-size: 2rem;
}

.events-side-menu .events .month-container:not(:first-child) {
  margin-top: 3rem;
}

.events-side-menu .events .month-container .desc {
  font-size: 1.2rem;
}

.events-side-menu .events {
  display: flex;
  padding: 2rem 1rem;
  width: 100%;
  flex-direction: column;
  color: rgb(88, 88, 88);
}

.events-side-menu .events .item {
  width: 100%;
  background-color: white;
  height: 100%;
  margin-top: 1.5rem;
}

.events-side-menu .events .item .event-date {
  display: flex;
  align-items: center;
  padding: 0px 1.2rem;
  color: white;
  background-color: var(--blue-color);
  flex-direction: column;
  justify-content: center;
  font-size: 2rem;
  font-family: var(--default-font-b);
}

.events-side-menu .events .item:nth-child(2n) .event-date {
  background-color: var(--orange-color);
}

.events-side-menu .events .item:nth-child(2n) .detail .icon svg rect {
  fill: var(--orange-color);
}

.events-side-menu .events .item:nth-child(2n) .detail .icon svg g:first-child {
  stroke: var(--orange-color);
}

.events-side-menu .events .item:nth-child(2n) .location .icon svg path {
  stroke: var(--orange-color);
  fill: var(--orange-color);
}

.events-side-menu .events .item:nth-child(3n) .event-date {
  background-color: var(--green-color);
}

.events-side-menu .events .item:nth-child(3n) .detail .icon svg rect {
  fill: var(--green-color);
}

.events-side-menu .events .item:nth-child(3n) .detail .icon svg g:first-child {
  stroke: var(--green-color);
}

.events-side-menu .events .item:nth-child(3n) .location .icon svg path {
  stroke: var(--green-color);
  fill: var(--green-color);
}

.events-side-menu .events .item:nth-child(4n) .event-date {
  background-color: var(--red-color);
}

.events-side-menu .events .item:nth-child(4n) .detail .icon svg rect {
  fill: var(--red-color);
}

.events-side-menu .events .item:nth-child(4n) .detail .icon svg g:first-child {
  stroke: var(--red-color);
}

.events-side-menu .events .item:nth-child(4n) .location .icon svg path {
  stroke: var(--red-color);
  fill: var(--red-color);
}

.events-side-menu .events .item:nth-child(5n) .event-date {
  background-color: var(--purple-color);
}

.events-side-menu .events .item:nth-child(5n) .detail .icon svg rect {
  fill: var(--purple-color);
}

.events-side-menu .events .item:nth-child(5n) .detail .icon svg g:first-child {
  stroke: var(--purple-color);
}

.events-side-menu .events .item:nth-child(5n) .location .icon svg path {
  stroke: var(--purple-color);
  fill: var(--purple-color);
}

.events-side-menu .events .item .event-date .month {
  margin-top: -0.5rem;
  font-size: 1rem;
  font-family: var(--default-font);
}

.events-side-menu .events .item .content {
  display: flex;
  width: 100%;
  position: relative;
}

.events-side-menu .events .item .content .detail {
  padding: 1.4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: rgb(155, 155, 155);
  align-items: flex-start;
}

.events-side-menu .events .item .content .detail .name {
  color: var(--black-color);
}

.events-side-menu .events .item .content .detail .time-location {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.events-side-menu .events .item .content .detail .time-location .time {
  display: flex;
  flex-direction: row-reverse;
  font-size: 0.9rem;
}

.events-side-menu .events .item .content .detail .time-location .location {
  display: flex;
  flex-direction: row-reverse;
  font-size: 0.9rem;
  justify-content: flex-end;
  margin-top: .5rem;
}

.events-side-menu .events .item .content .detail .time-location .location .icon,
.events-side-menu .events .item .content .detail .time-location .time .icon {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.swiper-slide .gridItems {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: -webkit-fill-available;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.swiper-slide .gridItems .card-img-top {
  min-height: fit-content;
}

.swiper-slide .grid-item {
  width: 100%;
}

.swiper-slide .grid-item:nth-child(3) .card,
.swiper-slide .grid-item:first-child .card {
  height: 32.4rem;
}

.swiper-slide .grid-item .card-img-top img,
.swiper-slide .grid-item .card-img-top {
  height: 100%;
  width: 100%;
  transition: all 0.6s ease-in-out 0s;
  object-fit: cover;
  object-position: center top;
}

.swiper-slide .gridItems .grid-item .card .card-img-top::after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 12rem;
  width: 100%;
  content: "";
  background-image: linear-gradient(0deg, rgb(0, 0, 0), rgb(255 0 0 / 0%));
}

.swiper-slide .gridItems .grid-item .card {
  height: 11rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.swiper-slide .gridItems .card-img-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.swiper-slide .gridItems .card-img-overlay .card-title {
  color: white;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.swiper-slide .gridItems .card-img-overlay .icon {
  height: 1.8rem;
  width: 1.8rem;
}

.swiper-slide .gridItems .card-img-overlay .icon img {
  height: 100%;
  width: 100%;
}

.swiper-slide .gridItems .grid-item .card:hover .card-img-top {
  transform: scale(1.1);
}

.available-programs {
  background-color: var(--blue-color);
  position: relative;
  overflow: hidden;
  padding: 0 0 1rem;
  min-height: 64rem;
}

.available-prog-swiper .swiper-pagination-bullet,
.competitions .swiper-pagination-bullet {
  border: 1px solid white !important;
}

.available-prog-swiper.swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid white !important;
}

.available-programs .read-more {
  color: white;
  padding: 0px 6rem;
  margin: 0rem 0rem 2rem;
}

.available-programs .section-title {
  text-align: center;
  font-size: 3.4rem;
  color: white;
}

.available-prog-swiper {
  height: 100% !important;
}

.enrollment.swiper {
  height: 50vh;
  width: 100%;
}

.enrollment.swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.enrollment.swiper img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.enrollment.swiper .swiper-slide .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.enrollment.swiper .swiper-slide .title {
  font-size: 2rem;
  color: white;
}

.enrollment.swiper .swiper-slide .readmore {
  background-color: white;
  color: black;
  font-size: 1rem;
  padding: 0.6rem 3.5rem;
  line-height: 2;
  width: fit-content;
  margin: 2.5rem 0 0;
  transition: all 0.3s ease-in-out 0s;
}


.enrollment.swiper .swiper-slide .readmore:hover {
  background-color: var(--blue-color);
  color: white;
}

.enrollment.swiper .swiper-slide::after {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
}

.appointments {
  background-color: var(--background);
  padding: 0 15px;
}

.appointments .accordion {
  margin: 2rem 0 3rem;
}

.accordion {
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
}

.accordion ul li {
  position: relative;
  transition: all 500ms ease 0s !important;
  display: flex;
  margin: 0.5rem 0;
  background-color: white;
  cursor: pointer;
}

.accordion ul li:first-child {
  margin-right: 0px;
}

.accordion ul li:last-child {
  margin-left: 0px;
}

.accordion .season-header .title {
  font-size: 1.6rem;
  margin-top: 1rem;
  font-family: var(--default-font-sb);
  text-align: center;
}

.accordion ul li:nth-child(4n+1) {
  border-bottom: 8px solid var(--blue-color);
}

.accordion ul li:nth-child(4n+2) {
  border-bottom: 8px solid var(--orange-color);
}

.accordion ul li:nth-child(4n+3) {
  border-bottom: 10px solid var(--green-color);
}

.accordion ul li:nth-child(4n+4) {
  border-bottom: 10px solid var(--red-color);
}

.accordion ul li:nth-child(4n+1) .season-title,
.accordion ul li:nth-child(4n+1) .season-header .title {
  color: var(--blue-color);
}

.accordion ul li:nth-child(4n+2) .season-title,
.accordion ul li:nth-child(4n+2) .season-header .title {
  color: var(--orange-color);
}

.accordion ul li:nth-child(4n+3) .season-title,
.accordion ul li:nth-child(4n+3) .season-header .title {
  color: var(--green-color);
}

.accordion ul li:nth-child(4n+4) .season-title,
.accordion ul li:nth-child(4n+4) .season-header .title {
  color: var(--red-color);
}

.accordion ul li div.season-container {
  display: none;
  width: 100%;
  position: relative;
  padding: 15px 20px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
  transition: all .3s ease-in-out 0s;
}

.season .pattern {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  display: none;
}

.accordion ul li div.season-container .body-container {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 400ms ease 0s;
  min-width: 100%;
}

.accordion ul li[aria-expanded="true"] {
  width: 100%;
}

.accordion li[aria-expanded="true"] .season-container.show {
  display: flex;
  flex-direction: column;
}

.accordion li[aria-expanded="true"] .season-title label {
  transform: rotate(0deg);
  align-items: start;
  justify-content: start;
  width: fit-content;
}

.accordion li[aria-expanded="true"] .season-container .body-container {
  opacity: 1;
  transform: translateX(0px);
}

.accordion ul li div.season-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
}

.accordion ul li[aria-expanded="true"] div.season-title {
  display: none;
}

.accordion ul li .season-header .month-container {
  display: flex;
}

.accordion ul li div.season-title label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  white-space: nowrap;
  width: 100%;
}

.season-container .season-header {
  font-size: 1.4rem;
  font-family: var(--default-font);
}



.season-container .season-body {
  font-family: var(--default-font);
}

.season-container .season-body .header .date {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.accordion ul li:nth-child(4n+1) .season-container .season-body .header .date {
  background-color: rgba(201, 239, 254, 0.61);
  color: var(--blue-color);
  padding: 0.6rem;
}

.accordion ul li:nth-child(4n+2) .season-container .season-body .header .date {
  background-color: rgb(255, 220, 209);
  color: rgb(211, 123, 96);
  padding: 0.6rem;
}

.accordion ul li:nth-child(4n+3) .season-container .season-body .header .date {
  background-color: rgb(215, 255, 250);
  color: rgb(13, 162, 144);
  padding: 0.6rem;
}

.accordion ul li:nth-child(4n+4) .season-container .season-body .header .date {
  background-color: rgb(255, 187, 197);
  color: rgb(182, 44, 63);
  padding: 0.6rem;
}

.accordion ul li .season-container .season-body .header .date .from,
.accordion ul li .season-container .season-body .header .date .to {
  position: relative;
  display: flex;
  align-items: center;
}

.accordion ul li .date .from svg,
.accordion ul li .date .to svg {
  height: 1rem;
  width: 1rem;
  margin: 0px 0.6rem;
  display: none;
}

.accordion ul li .date .arrow {
  margin: 0px 0.6rem;
}

.accordion ul li:nth-child(4n+1) .date .from svg path,
.accordion ul li:nth-child(4n+1) .date .to svg path {
  stroke: var(--blue-color);
}

.accordion ul li:nth-child(4n+2) .date .from svg path,
.accordion ul li:nth-child(4n+2) .date .to svg path {
  stroke: var(--orange-color);
}

.accordion ul li:nth-child(4n+3) .date .from svg path,
.accordion ul li:nth-child(4n+3) .date .to svg path {
  stroke: var(--green-color);
}

.accordion ul li:nth-child(4n+4) .date .from svg path,
.accordion ul li:nth-child(4n+4) .date .to svg path {
  stroke: var(--red-color);
}

.accordion ul li:nth-child(4n+1) .pattern ellipse,
.accordion ul li:nth-child(4n+1) .arrow svg path {
  fill: var(--blue-color);
}

.accordion ul li:nth-child(4n+2) .pattern ellipse,
.accordion ul li:nth-child(4n+2) .arrow svg path {
  fill: var(--orange-color);
}

.accordion ul li:nth-child(4n+3) .pattern ellipse,
.accordion ul li:nth-child(4n+3) .arrow svg path {
  fill: var(--green-color);
}

.accordion ul li:nth-child(4n+4) .pattern ellipse,
.accordion ul li:nth-child(4n+4) .arrow svg path {
  fill: var(--red-color);
}

.season-title .pattern {
  left: 3rem;
}

.season-container .season-body .header .certificate {
  padding: 0.6rem 1.6rem;
  color: black;
  background-color: rgb(240, 240, 240);
  margin: 1rem 0;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.season-container .season-body .information {
  color: black;
  margin-top: 1rem;
  font-weight: 600;
  min-width: 100%;
  justify-content: start;
  align-items: start;
  text-align: center;
  line-height: 2;
}

.season-container .season-body .body-container {
  padding: 2.5rem 0px;
  border-bottom: 1px solid rgb(211, 209, 209);
}

.season-container .season-body .body-container:last-child {
  border-bottom: none;
  padding-bottom: 1rem;
}

.international-students {
  position: relative;
  height: 59.5vh;
}

.international-students img.card-img-top {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.international-students .card-img-overlay {
  background-color: white;
  height: fit-content;
  right: 15px;
  left: 15px;
  top: 4rem;
  bottom: 15px;
  padding: 2rem 1.5rem;
}

.international-students .card-img-overlay .header .title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy-blue-color);
  margin-bottom: 1rem;
}

.international-students.opendt-apply .card-img-overlay .header .title {
  color: var(--light-green-color);
}

.international-students .pattern {
  position: absolute;
  top: 1rem;
  left: 2rem;
  display: none;
}

.international-students .pattern img {
  width: 5rem;
  height: 4rem;
}

.international-students .card-img-overlay .body {
  line-height: 2;
  font-size: 1rem;
  color: #808080;
}

.international-students .card-img-overlay .txt-container {
  max-height: 14rem;
  overflow-y: auto;
}

.international-students .card-img-overlay .footer a {
  background-color: var(--navy-blue-color);
  color: white;
  width: fit-content;
  padding: 0.6rem 1.5rem;
  margin-top: 1rem;
  cursor: pointer;
}

.international-students.opendt-apply .card-img-overlay .footer a {
  background-color: var(--light-green-color)
}

.steps-container {
  position: relative;
}

.svg-container {
  margin-top: 5rem;
}

.svg-container img {
  height: 100%;
  width: 100%;
  object-fit: fill;
  object-position: top;
}


.information {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.head {
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

h2.section-title {
  text-align: center;
  margin: 2.5rem auto;
  font-size: 1.6rem;
}

.reports {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
}

.reports .report {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.reports .report .description {
  width: 80%;
  text-align: center;
  color: var(--txt-color);
  line-height: 2;
  font-size: 1rem;
  margin-top: 1rem;
}

.reports .report .icon {
  padding: 1.5rem;
  max-width: 6rem;
  max-height: 6rem;
  border-radius: 50%;
}

.reports .report .icon img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.reports .report:nth-child(5n+1) .icon {
  background-color: rgb(237, 249, 254);
}

.reports .report:nth-child(5n+2) .icon {
  background-color: rgb(252, 245, 242);
}

.reports .report:nth-child(5n+3) .icon {
  background-color: rgb(236, 248, 246);
}

.reports .report:nth-child(5n+4) .icon {
  background-color: rgb(249, 238, 240);
}

.reports .report:nth-child(5n+5) .icon {
  background-color: rgb(244, 240, 246);
}

.security-report {
  padding: 0 15px;
}

.security-report .header .description {
  text-align: center;
  color: var(--txt-color);
  margin-top: 1rem;
  width: 100%;
}

.tabular-view {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.tabular-view .nav-link .icon {
  height: 2rem;
  width: 2rem;
  margin-left: .5rem;
}
.tabular-view .nav-link .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.tabular-view .tab-content {
  background-color: white;
}
.tabular-view .labels .incident-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.tabular-view .labels .label {
  width: 100%;
  background-color: rgb(246, 246, 246);
  border-radius: 2rem;
  margin: 0.5rem 0;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
}

.tabular-view .labels .incident-details .label.active {
  background-color: var(--blue-color);
  color: white;
}
.tabular-view .labels .incident-details .label:hover:not(.active) {
  background-color: rgb(233 233 233);
}
.tabular-view .case-description textarea {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  width: 99%;
  outline: 0px;
  font-size: 1rem;
  padding: 1rem;
  border: 1px solid rgb(202, 202, 202);
}

.tabular-view .case-description textarea:last-child {
  margin-bottom: 3rem;
}

.tabular-view .case-description .extent-of-influence {
  margin-bottom: 1.5rem;
  font-size:1.3rem;
}

.tabular-view .case-description .extent-of-influence .title {
  margin-bottom: 1.5rem;
}

.tabular-view .case-description .extent-of-influence .choices {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0px;
}

.submit-buttons button {
  padding: 0.7rem 2.5rem;
}

.submit-buttons button.submit {
  color: white;
  background-color: var(--blue-color);
  transition: all 0.3s ease-in-out 0s;
}

.submit-buttons button.submit:hover {
  background-color: var(--blue-color-hover);
}

.submit-buttons .reset {
  background-color: transparent;
  color: var(--blue-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .5rem;
}

.tabular-view .submit-buttons .reset .icon {
  margin: 0px 0.5rem;
}

.tabular-view .nav li.slick-active.slick-current a.nav-link span {
  font-size: 1rem;
  color: var(--txt-color);
}

.tabular-view .nav li.slick-slide a.nav-link .icon {
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.5rem;
  display: none;
}

.tabular-view .nav li.slick-slide a.nav-link .icon svg {
  height: 100%;
  width: 100%;
}

.tabular-view .nav li.slick-slide a.nav-link .icon svg path,
.tabular-view .nav li.slick-slide a.nav-link .icon svg line {
  stroke: var(--blue-color);
}

.tabular-view .tab-content .tab-pane textarea:focus {
  border-color: var(--blue-color);
}

.tabular-view .tab-content .tab-pane .submit-buttons .reset .icon svg path {
  fill: var(--blue-color);
}

.tabular-view .nav-tabs {
  border: none;
  padding: 0px;
  position: relative;
  height: 4rem;
}

.tabular-view .nav li.slick-slide a.nav-link {
  border-radius: 0px;
  background-color: var(--tab-background-color);
  height: 4rem;
  margin: 0px 1rem;
  position: relative;
  padding: 1rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(100%);
  font-size: 1rem;
}

.tabular-view .nav li:first-child a.nav-link {
  margin: 0;
}

.tabular-view .nav li:first-child a.nav-link::before {
  height: 1.6rem;
  width: 1.5rem;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: 0.7rem;
}

.tabular-view .nav li:nth-child(2) a.nav-link::before {
  background-image: url("/themes/uoj_theme/media/ic-security-unsecured.svg");
  height: 1.6rem;
  width: 1.5rem;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: 0.7rem;
}

.tabular-view .nav li.slick-current.slick-active a.nav-link {
  background-color: white;
  filter: grayscale(0%);
  justify-content: center;
}

.tabular-view .description {
  line-height: 2;
  font-size: 1rem;
  color: var(--txt-color);
  width: 100%;
}

.modal.search .radio-buttons {
  margin: auto;
}

.modal.search .form-check-label {
  margin: 1.5rem 0 0 0;
}

.modal.search .form-check-inline:first-child .form-check-label {
  border-left: 1px solid #dbdbdb;
  padding-left: 1.2rem
}

.form-check-label {
  margin: 1rem 0rem 1rem 3rem;
}

.form-check-label input {
  position: relative;
  margin-left: 1rem;
}


.form-container form .fields {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.input-section form .input-item {
  width: 45%;
  margin-bottom: 1rem;
}

.form-container form .input-item {
  width: 100%;
  margin-bottom: 0rem;
  height: 5rem;
}

.input-section .form [class*="col-"] div {
  display: flex;
}

.input-section .input,
.form-container form input {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  border-radius: 0px;
}

.input-section .input__area {
  height: 150px;
  margin-bottom: 30px;
}

.input-section .input__field,
.form-container form .input__field {
  position: relative;
  width: 100%;
  color: rgb(35, 31, 32);
  font-weight: 400;
  border: 1px solid rgb(236, 237, 238);
  padding: 12px 20px;
  outline: 0px;
  margin-bottom:1rem;
}
    input[type="date"] {
      padding: 12px 20px;
      border: 1px solid rgb(236, 237, 238);
      background-color: transparent!important;
      border-radius: 4px;
      font-size: 16px;
      font-weight:600;
      outline:0;
      -webkit-appearance: none;
      appearance: none;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
      display: block!important;
    }
    /* Custom styles for the placeholder text */
    ::-webkit-input-placeholder {
      color: #999;
    }
    :-moz-placeholder {
      color: #999;
    }
    ::-moz-placeholder {
      color: #999;
      
    }
    :-ms-input-placeholder {
      color: #999;
    }
.tabular-view .tab-content .tab-pane .input-section .input__field:focus,
.form-container form .input__field:focus {
  border-color: var(--blue-color);
}

.input-section .input__label {
  color: rgb(106, 121, 137);
  cursor: text;
  position: absolute;
  top: 3.6px;
  right: 20px;
  font-size: 1rem;
  padding: 10px 5px;
  transition: var(--transition);
}

.form-container form .input__label {
  color: rgb(128 145 164);
  cursor: text;
  position: relative;
  top: -3.4rem;
  right: 13px;
  padding: 0px 5px;
  transition: all 0.5s ease 0s;
  z-index: 1;
  border: none;
}

form .error-msg-span {
  color: red;
  margin-right: 1rem;
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#0000 10%, #22b0e9);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
  animation: spinner-zp9dbg 1s infinite linear;
  margin: auto;
}

@keyframes spinner-zp9dbg {
  to {
    transform: rotate(1turn);
  }
}


.tabular-view .tab-content .tab-pane .input-section .input__field:focus+.input__label,
.tabular-view .tab-content .tab-pane .input-section .input--filled,
.form-container form .input__field:focus+.input__label,
.form-container form .input--filled {
  transform: translate3d(0px, -24px, 0px);
  background: white;
  color: var(--blue-color);
  font-size: 0.8rem;
}

.tabular-view .tab-content .tab-pane .input-section .input-error .input__field:focus+.input__label,
.tabular-view .tab-content .tab-pane .input-section .input-error .input--filled,
.form-container form .input-error .input__field:focus+.input__label,
.form-container form .input--filled {
  color: red;
}

.form-container form .input__label.input-has-value,
.form .input-has-value {
  transform: translate3d(0px, -24px, 0px);
  font-size: 0.8rem;
  background-color: white;
}



.opportunities-main {
  background-color: var(--light-grey-color);
  padding: 0 0 3rem 0;
}

.opportunities-main .swiper.opportunities {
  padding: 0 15px;
}

.opportunities-main .swiper.opportunities.availablevacancies {
  flex-direction: row;
}

.opportunities-main .swiper.opportunities.availablevacancies .swiper-pagination {
  bottom: unset;
  margin-top: 0;
}

.opportunities-main .swiper.opportunities.availablevacancies .swiper-slide {
  margin-top: 0 !important;
}

.opportunities-main h1.title {
  margin-bottom: 2rem;
}

.opportunities.swiper .swiper-wrapper {
  height: auto;
  flex-direction: row;
}

.functional-competitions.container {
  background-color: var(--blue-color);
  position: relative;
  overflow: hidden;
  padding-bottom: 6rem;
  padding-top: 0;
}

.functional-competitions.container .swiper-pagination {
  bottom: 2rem;
}

.functional-competitions h1.title {
  color: white;
  margin-bottom: 2rem;
}

.competitions .swiper-wrapper {
  height: 25rem;
}

.competitions .swiper-slide {
  position: relative;
  height: 100%;
}

.opportunities .card {
  border: none;
  border-radius: 0px;
  height: auto;
}

.opportunities .swiper-slide .card:first-child {
  margin-bottom: 1rem;
}

.opportunities .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding-bottom: 2rem;
}

.opportunities .swiper-slide .card .card-title,
.opportunities .card .card-title {
  font-size: 1.4rem;
  margin-bottom: .4rem;
}

.opportunities .card .card-text {
  font-size: 1rem;
  line-height: 2;
  color: #808080;
  height: auto;
  margin: 1.5rem 0;
  overflow: hidden;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.loadMore {
  color: var(--navy-blue-color);
  border: 1px solid var(--navy-blue-color);
  padding: 1rem 2.5rem;
  margin: 0 auto 1.5rem;
  width: fit-content;
  transition: var(--transition);
  cursor: pointer;
}

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

.opportunities .swiper-slide:nth-child(3n+1) .card:first-child,
.std-activities .col-lg-4:nth-child(6n+1) .card {
  border-top: 10px solid var(--blue-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child,
.std-activities .col-lg-4:nth-child(6n+4) .card {
  border-top: 10px solid var(--orange-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child,
.std-activities .col-lg-4:nth-child(6n+2) .card {
  border-top: 10px solid var(--green-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child,
.std-activities .col-lg-4:nth-child(6n+5) .card {
  border-top: 10px solid var(--purple-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child,
.std-activities .col-lg-4:nth-child(6n+3) .card {
  border-top: 10px solid var(--red-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child {
  border-top: 10px solid var(--green-color-hover);
}

.std-activities .col-lg-4:nth-child(6n+6) .card {
  border-top: 10px solid var(--dark-grey-color);
}

.opportunities .swiper-slide .card .card-text {
  color: var(--txt-color);
  font-size: 1rem;
  height: auto;
}

.opportunities .swiper-slide:nth-child(3n+1) .card:first-child .icon svg path,
.opportunities .col-lg-4:nth-child(6n+1) .card .icon svg path {
  stroke: var(--blue-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child .icon svg path,
.opportunities .col-lg-4:nth-child(6n+4) .card .icon svg path {
  stroke: var(--orange-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child .icon svg path,
.opportunities .col-lg-4:nth-child(6n+2) .card .icon svg path {
  stroke: var(--green-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child .icon svg path,
.opportunities .col-lg-4:nth-child(6n+5) .card .icon svg path {
  stroke: var(--purple-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child .icon svg path,
.opportunities .col-lg-4:nth-child(6n+3) .card .icon svg path {
  stroke: var(--red-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child .icon svg path {
  stroke: var(--green-color-hover);
}

.survey-form-container {
  margin-top: 2rem;
}


.survey-form-container .js-form-item.form-item.form-wrapper.webform-section {
  padding: 2rem 0;
  background: white;

}

.survey-form-container .js-form-item.form-item.form-wrapper.webform-section:not(:first-child) {
  border-top: 1px solid #e0e0e0;
}


.survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description) {
  margin: 2rem 1rem;
}

.survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :first-child {
  border-top: 1px solid #e0e0e0;
  padding-top: 2rem;
  width: 100%;
}



.js-form-item.js-form-type-radio {
  box-sizing: border-box;
  background: #ffffff;
  color: #222;
  height: auto;
  width: 50%;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;

}

.js-form-item.js-form-type-radio * {
  box-sizing: border-box;
}

.js-form-item.js-form-type-radio input.form-radio {
  appearance: none;
  background-color: #ffffff;
  width: 22px;
  height: 22px;
  border: 1px solid #cccfdb;
  margin: 0;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.js-form-item.js-form-type-radio input.form-radio::before {
  content: "";
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.3s transform ease-in-out;
  box-shadow: inset 6px 6px #ffffff;
}

.js-form-item.js-form-type-radio input.form-radio:checked {
  background: var(--blue-color);
  border-color: var(--blue-color);
}

.js-form-item.js-form-type-radio input.form-radio:checked::before {
  transform: scale(1);
}

.js-form-item.js-form-type-radio label {
  cursor: pointer;
  padding: 6px 8px;
}

.js-form-item.js-form-type-radio label:not(:last-child) {
  margin-right: 6px;
}


h2.webform-section-title {
  margin-right: 1rem;
  font-family: var(--default-font-b);
  position: relative;
  font-size: 1.4rem;
}


h2.webform-section-title::after {
  position: absolute;
  content: '';
  left: -1rem;
  width: 8rem;
  height: 10rem;
  top: -4rem;
  transform: scale(.4);
  background-repeat: no-repeat !important;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120.33" height="163.051" viewBox="0 0 120.33 163.051"><g id="Group_3742" data-name="Group 3742" transform="translate(57.588 -15.189) rotate(30)" opacity="0.1"><circle id="Ellipse_21" data-name="Ellipse 21" cx="21.363" cy="21.363" r="21.363" transform="translate(0 72.449)" fill="%2322b0e9"/><circle id="Ellipse_23" data-name="Ellipse 23" cx="16.719" cy="16.719" r="16.719" transform="translate(1.858 29.723)" fill="%2322b0e9"/><circle id="Ellipse_24" data-name="Ellipse 24" cx="14.861" cy="14.861" r="14.861" transform="translate(46.442 46.442)" fill="%2322b0e9"/><ellipse id="Ellipse_25" data-name="Ellipse 25" cx="18.577" cy="18.577" rx="18.577" ry="18.577" transform="translate(35.296)" fill="%2322b0e9"/><ellipse id="Ellipse_22" data-name="Ellipse 22" cx="22.602" cy="22.292" rx="22.602" ry="22.292" transform="translate(53.872 104.029)" fill="%2322b0e9"/><path id="Path_235" data-name="Path 235" d="M42.382,109.425,20.42,94.013,0,65.116V37.374H15.413L39.3,51.63h4.625L39.3,40.842,35.062,10.4,22.732,0,33.5,5.589" transform="translate(16.25 9.622)" fill="none" stroke="%2322b0e9" stroke-width="2"/></g></svg>');
}


.survey-form-container .js-form-item.form-item .webform-section-wrapper .description {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1.8rem;
  margin: 1.8rem 0 1.8rem;
}

.survey-form-container .js-form-item.form-item .webform-section-wrapper .description .webform-element-description {
  color: #828282;
  margin-right: 1.5rem;
}

.survey-form-container .webform-element-description pre {
  font-size: 1.2rem;
  color: #828282;
  margin-top: 1rem;
  overflow: hidden;
  font-family: var(--default-font);
}

.survey-form-container .uj-webform-container.js-form-item-name {
  margin: 3rem 0;
  font-size: 1.5rem;
}

legend#edit-choose-1--wrapper-legend {
  margin: 2rem 0;
}

.survey-form-container .fieldset-wrapper .js-webform-radios {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.survey-form-container .fieldset-wrapper .js-webform-radios .js-form-item-choose-1 {
  margin-left: 2rem;
}

.survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper {
  background-color: white;
  padding: 0 1.5rem 4rem;
}

.survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper input.submit-button,
.webform-button--submit {
  background-color: var(--blue-color);
  padding: .7rem 2.5rem;
  color: white;
  transition: .3s all ease;
  margin: 0;
}

.survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper input.submit-button:hover,
.webform-button--submit:hover {
  background-color: var(--blue-color-hover);
}


.survey-form-container #NafathError.error-msg-span {
  display: none;
  padding: 1rem;
  background-color: #ff00001f;
  color: red;
  border-radius: .4rem;
  width: 100%;
}

.opportunities .col-lg-4:nth-child(6n+6) .card .icon svg path {
  stroke: var(--dark-grey-color);
}

#AdfsLoginSpinner,
#NafathLoginSpinner {
  display: none;
}


.opportunities .swiper-slide .card .card-body .pattern,
.opportunities .col-lg-4 .card .card-body .pattern {
  position: absolute;
  top: .6rem;
  left: .6rem;
  width: 6rem;
  height: 6rem;
}

.opportunities .swiper-slide .card .card-body .pattern svg,
.opportunities .col-lg-4 .card .card-body .pattern svg {
  width: 100%;
  height: 100%;
}

.opportunities .swiper-slide:nth-child(3n+1) .card:first-child .card-body .pattern svg ellipse,
.opportunities .col-lg-4:nth-child(6n+1) .card .card-body .pattern svg ellipse {
  fill: var(--blue-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child .card-body .pattern svg ellipse,
.opportunities .col-lg-4:nth-child(6n+4) .card .card-body .pattern svg ellipse {
  fill: var(--orange-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child .card-body .pattern svg ellipse,
.opportunities .col-lg-4:nth-child(6n+2) .card .card-body .pattern svg ellipse {
  fill: var(--green-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child .card-body .pattern svg ellipse,
.opportunities .col-lg-4:nth-child(6n+5) .card .card-body .pattern svg ellipse {
  fill: var(--purple-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child .card-body .pattern svg ellipse,
.opportunities .col-lg-4:nth-child(6n+3) .card .card-body .pattern svg ellipse {
  fill: var(--red-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child .card-body .pattern svg ellipse {
  fill: var(--green-color-hover);
}

.opportunities .col-lg-4:nth-child(6n+6) .card .card-body .pattern svg ellipse {
  fill: var(--dark-grey-color);
}

.opportunities .swiper-slide .card .date {
  display: flex;
  align-items: center;
}

.opportunities .swiper-slide .card .date svg {
  width: 1rem;
  margin-left: 0.5rem;
}

.footer.buttons {
  background-color: transparent;
  flex-direction: column;
  display: flex;
  font-size: 1rem;

}

.opportunities .card .footer.buttons {
  flex-direction: row;
  align-items: center;
}

.opportunities .swiper-slide .card .footer.buttons .apply-now {
  color: white;
  padding: 0.6rem 1rem;
  margin-left: 0.3rem;
  width: fit-content;
  transition: all .3s ease-in-out;
  font-size: 0.8rem;
}

.opportunities.availablevacancies .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .apply-now {
  background-color: var(--orange-color);
}



.opportunities .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .apply-now {
  background-color: var(--blue-color);
}

.opportunities.availablevacancies .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .apply-now:hover {
  background-color: var(--orange-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .apply-now:hover {
  background-color: var(--blue-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child .footer.buttons .apply-now {
  background-color: var(--orange-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child .footer.buttons .apply-now:hover {
  background-color: var(--orange-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child .footer.buttons .apply-now {
  background-color: var(--green-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child .footer.buttons .apply-now:hover {
  background-color: var(--green-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child .footer.buttons .apply-now {
  background-color: var(--purple-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child .footer.buttons .apply-now:hover {
  background-color: var(--purple-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child .footer.buttons .apply-now {
  background-color: var(--red-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child .footer.buttons .apply-now:hover {
  background-color: var(--red-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child .footer.buttons .apply-now {
  background-color: var(--green-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child .footer.buttons .apply-now:hover {
  background-color: var(--green-color-hover-hover);
}

.opportunities .card .footer.buttons .more-infos {
  transition: all .6s ease-in-out;
}

.opportunities.availablevacancies .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .more-infos,
.opportunities.availablevacancies .col-lg-4:nth-child(6n+1) .card .card-body .footer.buttons .more-infos {
  color: var(--orange-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .more-infos,
.opportunities .col-lg-4:nth-child(6n+1) .card .card-body .footer.buttons .more-infos {
  color: var(--blue-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .more-infos:hover,
.opportunities .col-lg-4:nth-child(6n+1) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--blue-color-hover);
}

.opportunities.availablevacancies .swiper-slide:nth-child(3n+1) .card:first-child .card-body .footer.buttons .more-infos:hover,
.opportunities.availablevacancies .col-lg-4:nth-child(6n+1) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--orange-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child .footer.buttons .more-infos,
.opportunities .col-lg-4:nth-child(6n+4) .card .card-body .footer.buttons .more-infos {
  color: var(--orange-color);
}

.opportunities .swiper-slide:nth-child(3n+1) .card:last-child .footer.buttons .more-infos:hover,
.opportunities .col-lg-4:nth-child(6n+4) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--orange-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child .footer.buttons .more-infos,
.opportunities .col-lg-4:nth-child(6n+2) .card .card-body .footer.buttons .more-infos {
  color: var(--green-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:first-child .footer.buttons .more-infos:hover,
.opportunities .col-lg-4:nth-child(6n+2) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--green-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child .footer.buttons .more-infos,
.opportunities .col-lg-4:nth-child(6n+5) .card .card-body .footer.buttons .more-infos {
  color: var(--purple-color);
}

.opportunities .swiper-slide:nth-child(3n+2) .card:last-child .footer.buttons .more-infos:hover,
.opportunities .col-lg-4:nth-child(6n+5) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--purple-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child .footer.buttons .more-infos,
.opportunities .col-lg-4:nth-child(6n+3) .card .card-body .footer.buttons .more-infos {
  color: var(--red-color);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:first-child .footer.buttons .more-infos:hover,
.opportunities .col-lg-4:nth-child(6n+3) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--red-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child .footer.buttons .more-infos {
  color: var(--green-color-hover);
}

.opportunities .swiper-slide:nth-child(3n+3) .card:last-child .footer.buttons .more-infos:hover {
  color: var(--green-color-hover-hover);
}

.opportunities .col-lg-4:nth-child(6n+6) .card .card-body .footer.buttons .more-infos {
  color: var(--dark-grey-color);
}

.opportunities .col-lg-4:nth-child(6n+6) .card .card-body .footer.buttons .more-infos:hover {
  color: var(--dark-grey-color-hover);
}

.competitions .card-img-overlay {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: white;
  flex-direction: row-reverse;
  font-size: 1.1rem;
  z-index: 1;
}

.tabular-view label {
  display: flex;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}

.tabular-view label input {
  opacity: 0;
  display: none;
}

.tabular-view .tab-content .tab-pane label input:checked+span::before {
  box-shadow: inset 0 0 0 0.36em var(--blue-color);
  border: none;
}

.tabular-view label span {
  display: flex;
  align-items: center;
  border-radius: 99em;
  transition: all 0.25s ease 0s;
  color:var(--black-color);
}

.tabular-view label span::before {
  display: flex;
  flex-shrink: 0;
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: 0.5em;
  transition: all 0.25s ease 0s;
  background-color: #fff;
  border: 1px solid #cccfdb;
}

.news-content .news-thumbnail-img img.research-img {
  width: 100%;
  padding: 1rem;
}

.news-content .news-thumbnail-img {
  flex-wrap: wrap;
}

.care-tiles.container {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background);
  padding-top: 3rem;
}

.care-tiles.container .col-md-6 {
  padding: 0;
}

.care-tiles .card {
  position: relative;
  min-height: 10rem;

}

.care-tiles .card .pattern {
  position: absolute;
  top: .5rem;
  left: .5rem;
  width: 5rem;
  height: 5rem
}

.care-tiles .card .pattern svg {
  width: 100%;
  height: 100%;
}

.care-tiles .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

}

.care-tiles .card .card-body .card-title {
  font-size: 1.1rem;
  margin-bottom: 0;
  color:var(--black-color);
}

.care-tiles .col-lg-4:nth-child(6n+1) .card {
  border-top: 10px solid var(--blue-color);
}

.care-tiles .col-lg-4:nth-child(6n+2) .card {
  border-top: 10px solid var(--green-color);
}

.care-tiles .col-lg-4:nth-child(6n+3) .card {
  border-top: 10px solid var(--orange-color);
}

.care-tiles .col-lg-4:nth-child(6n+4) .card {
  border-top: 10px solid var(--purple-color);
}

.care-tiles .col-lg-4:nth-child(6n+5) .card {
  border-top: 10px solid var(--red-color);
}

.care-tiles .col-lg-4:nth-child(6n+6) .card {
  border-top: 10px solid var(--navy-blue-color);
}

.care-tiles .col-lg-4:nth-child(6n+1) .card .pattern ellipse {
  fill: var(--blue-color);
}

.care-tiles .col-lg-4:nth-child(6n+2) .card .pattern ellipse {
  fill: var(--green-color);
}

.care-tiles .col-lg-4:nth-child(6n+3) .card .pattern ellipse {
  fill: var(--orange-color);
}

.care-tiles .col-lg-4:nth-child(6n+4) .card .pattern ellipse {
  fill: var(--purple-color);
}

.care-tiles .col-lg-4:nth-child(6n+5) .card .pattern ellipse {
  fill: var(--red-color);
}

.care-tiles .col-lg-4:nth-child(6n+6) .card .pattern ellipse {
  fill: var(--navy-blue-color);
}

.quick-links {
  display: flex;
  overflow-x: auto;
  background-image: none;
  position: relative !important;
}
.quick-links .swiper-slide{
  width: fit-content;
}
.quick-links .link {
  display: flex;
  align-items: center;
  margin: .5rem 0;
}
.research_thumb {
  padding: 2rem 0
}

.research_thumb .story .image-container img {
  object-fit: unset;

}

.quick-links .std::after {
  display: none;
}

.quick-links .logo {
  position: absolute;
  left: 2rem;
  top: 1.5rem;
  width: 4rem;
  justify-content: center;
  display: none;
}

.quick-links .logo img {
  width: 4.5rem;
}


.quick-links .link svg ellipse {
  transition: .3s all ease;
}

.quick-links .link:nth-child(2n+1) svg ellipse {
  fill: var(--orange-color);
}

.quick-links .link:hover svg ellipse {
  fill: var(--blue-color-hover);
}

.quick-links .link:nth-child(2n+1):hover svg ellipse {
  fill: var(--orange-color-hover);
}
/* ABOUT FACULTY START */
.college.tabular-view .nav li a.nav-link {
  filter: grayscale(0);
}
.college.tabular-view .nav li a.nav-link {
  border: none;
  border-radius: 0px;
  background-color: white;
  height: 4rem;
  margin: 0px 0 0 .5rem;
  position: relative;
  display: flex;
  align-items: center;

}

.college .tab-content .slick-track {
  width: 100% !important;
  margin: 0;
  display: flex;
}

.college.tabular-view .nav li:first-child a.nav-link {
  margin-right: 0px;
}

.university-services .nav-tabs .nav-item.slick-active.slick-current .nav-link {
  color: var(--txt-color);
}

.college.tabular-view .nav li.slick-active.slick-current a.nav-link {
  background-color: white;
  filter: grayscale(0%);
}


.college-programs .programs-container {
  padding: 2rem 0;
}

.college-programs .programs-container .program {
  border: 1px solid #E6E6E6;
  height: auto;
}

.college-programs.container {
  background-color: white;
  padding: 0 15px;
}

.college-programs .programs-container .program .program-name {
  font-size: 1.4rem;
  padding: 1rem;
  background-color: #F9F9F9;
}

.college-programs .programs-container .col-lg-4:nth-child(1) .program .program-name {
  color: var(--green-color);
}

.college-programs .programs-container .col-lg-4:nth-child(2) .program .program-name {
  color: var(--purple-color);
}

.college-programs .programs-container .col-lg-4:nth-child(3) .program .program-name {
  color: var(--orange-color);
}
.college-programs .programs-container .program .contents .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-bottom: 1px dashed #E4E4E4;
  align-items: center;
  cursor: pointer;

}
.college-programs .programs-container .program .contents .contents-container{
  overflow: auto;
  padding: 2rem;
}
.college-programs .programs-container .col-lg-4:nth-child(3n+3) .contents .item .cta circle {
  fill: var(--orange-color);
}
.college-programs .programs-container .col-lg-4:nth-child(3n+1) .contents .item .cta circle {
  fill: var(--green-color);
}

.college-programs .programs-container .col-lg-4:nth-child(3n+2) .contents .item .cta circle {
  fill: var(--purple-color);
}

.college-programs .programs-container .col-lg-4 .contents .item .cta circle {
  transition: .3s all ease;
}

.college-programs .programs-container .col-lg-4:nth-child(1) .contents .item:hover .name {
  color: var(--green-color-hover);
}

.college-programs .programs-container .col-lg-4:nth-child(1) .contents .item:hover .cta circle {
  fill: var(--green-color-hover);
}

.college-programs .programs-container .col-lg-4:nth-child(2) .contents .item:hover .name {
  color: var(--purple-color-hover);
}

.college-programs .programs-container .col-lg-4:nth-child(2) .contents .item:hover .cta circle {
  fill: var(--purple-color-hover);
}



.college-programs .programs-container .col-lg-4:nth-child(3) .contents .item:hover .name {
  color: var(--orange-color-hover);
}

.college-programs .programs-container .col-lg-4:nth-child(3) .contents .item:hover .cta circle {
  fill: var(--orange-color-hover);
}
.college-programs .programs-container .col-lg-4 .contents .item:hover .cta g>g {
  transition: .3s all ease;
}
.college-programs .programs-container .col-lg-4 .contents .item:hover .cta g>g:first-child {
  transform: translateY(3px)
}
.college-programs .programs-container .program .contents .item:first-child {
  padding-top: 0;
}
.college-programs .programs-container .program .contents .item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.college-programs .programs-container .program .contents .item .cta svg {
  width: 1.8rem;
  height: 1.8rem;
}
.College-sections.container {
  background-color: #078084;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.College-sections .col-lg-4:last-child {
  margin-bottom: 0;
}

.College-sections.departs {
  background-color: #19607C;
}

.College-sections .card {
  height: 12rem;
  background-color: white;
  border-bottom: .8rem solid var(--blue-color);
  transition: .3s all ease;
  overflow: hidden;
}

.College-sections .card {
  border-bottom: 10px solid var(--navy-blue-color);
}

.College-sections div:nth-child(2) .card {
  border-bottom: 10px solid var(--red-color);
}


.College-sections div:nth-child(3) .card {
  border-bottom: 10px solid var(--green-color);
}

.College-sections .col-lg-4:nth-child(3n+3) .card {
  border-bottom: 10px solid var(--light-green-color);
}

.College-sections .card .thumbnail {
  position: relative;
}

.College-sections .card .card-img-top,
.College-sections .card .card-img-top img {
  height: 100%;
  width: 100%;
  transition: all .6s ease-in-out;
}

.College-sections.departs .col-lg-4:nth-child(3n+1) .card .cta svg g {
  stroke: var(--navy-blue-color);
}

.College-sections.departs .col-lg-4:nth-child(3n+1) .card .cta svg path {
  fill: var(--navy-blue-color);
}

.College-sections.departs .col-lg-4:nth-child(3n+2) .card .cta svg g {
  stroke: var(--red-color);
}

.College-sections.departs .col-lg-4:nth-child(3n+2) .card .cta svg path {
  fill: var(--red-color);
}

.College-sections.departs .col-lg-4:nth-child(3n+3) .card .cta svg g {
  stroke: var(--light-green-color);
}

.College-sections.departs .col-lg-4:nth-child(3n+3) .card .cta svg path {
  fill: var(--light-green-color);
}

.College-sections .card .section-info {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
}

.login .code-verification {
  margin: 2rem 0;
  background-color: #FAFAFA;
  border: 1px solid #E8E8E8;
  border-radius: 0.6rem;
  padding: 1.2rem 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.login .code-verification .code-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #828282;
}

.login .code-verification .code-text .code {
  margin-top: 0.3rem;
  font-size: 2.5rem;
  color: #484848;
  letter-spacing: 0.2rem;
  font-family: var(--default-font-b);
}

.login .code-verification .timer-text {
  border-top: 1px solid #E8E8E8;
  width: 100%;
  text-align: center;
  padding-top: 0.8rem;
  margin-top: 1rem;
  color: #828282;
}

.login .code-verification .timer-text .timer {
  margin-right: 0.3rem;
  color: #484848;
  font-family: var(--default-font-b);
}


.login .code-verification .timer-text span:first-child {
  margin-left: .3rem;
}

.login .code-verification .timer-text span:last-child {
  margin-right: 0.3rem;
  font-family: var(--default-font-b);
  color: #484848;
}

.College-sections .card .section-info .section-description {
  display: flex;
  justify-content: space-between;
  background-color: white;
  width: fit-content;
  align-items: center;
  height: fit-content;
  padding: .8rem 1rem;
  transition: .3s all ease;
}
.College-sections .card:hover .card-img-top img {
  transform: scale(1.1);
}
.College-sections .card .section-info .section-description .name {
  margin-left: 1rem;
  font-size: 1rem;
  color: var(--black-color);
}
.College-sections .card .section-info .section-description .cta svg {
  width: 1.5rem;
  height: 1.5rem;
}


.College-sections .card .thumbnail::after {
  position: absolute;
  content: '';
  width: 5rem;
  height: 4rem;
  background-repeat: no-repeat;
  top: 1rem;
  right: 1rem;
  background-image: url("/themes/uoj_theme/media/Layer\ 2\ -\ College.svg");
}


.College-sections .card .thumbnail::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0rem;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));
}




.college-news.achievements .nav-link.active {
  color: var(--blue-color);
  background-color: transparent;
  border-bottom-color: var(--blue-color);
}


.college-news.achievements .nav-link:hover {
  color: var(--blue-color);
}

.achievements.college-news .swiper-slide .card {
  border-bottom: 10px solid var(--blue-color);

}



.college-standouts .leaders .swiper-slide-prev .card .card-image::after {

  background: linear-gradient(var(--green-color) 50%, var(--green-color) 50%, var(--green-color) 50%, var(--green-color) 50%);

}



.college-standouts .leaders .swiper-slide-next .card .card-image::after {
  background: linear-gradient(rgba(211, 123, 96, .7) 50%, rgba(211, 123, 96, .7) 50%, rgba(211, 123, 96, .7) 50%, rgba(211, 123, 96, .7) 50%);
}


.college.tabular-view .statistic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #D6D6D6;
  margin-bottom: 1.5rem;
  flex: auto;
  max-width: none;
  width: auto;
}

.college.tabular-view .statistic .icon img {
  width: 3rem;
  height: 2.5rem;
}

.college.tabular-view .statistic:last-child {
  border-bottom: none;
}

.college.tabular-view .statistic .desc {
  color: grey;
  margin: .7rem 0 0 0;
  font-size: 1rem;
  text-align: center;
}

.college.tabular-view .statistic .count {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.college.tabular-view .statistic:nth-child(1) .count {
  color: var(--red-color);
}

.college.tabular-view .statistic:nth-child(2) .count {
  color: var(--blue-color);
}

.college.tabular-view .statistic:nth-child(3) .count {
  color: var(--green-color);
}

.college.tabular-view .statistic:nth-child(4) .count {
  color: var(--purple-color);
}

.college.tabular-view .statistic:nth-child(5) .count {
  color: var(--orange-color);
}

.college .partnership {
  border: 1px solid #E3E3E3;
  margin-bottom: 1rem;
}

.college .partnership:hover {
  border: 1px solid #e7e7e7;
}

.college .partnership:hover .company-desc {
  background-color: #e7e7e7;
}

.college .partnership:hover .company-thumbnail {
  overflow: hidden;
}

.college .partnership:hover .company-thumbnail img {
  transform: scale(1.05);
}

.college .partnership {
  height: 21rem;
  overflow: hidden;

}

.college .partnership .company-thumbnail {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
}

.college .partnership .company-thumbnail img {
  transition: all .3s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.college .partnership .company-desc {
  background-color: #FAFAFA;
  padding: 1rem;
  display: flex;
  font-size: 1rem;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  height: 5rem;
  transition: .3s all ease;
  text-align: left;
}

.college .partnership .company-desc .cta svg {
  width: 2rem;
  height: 2rem;
}

.college .college-annual-report .item {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
  width: 100%;
}

.link-holder:hover {
  background-color: rgb(0 0 0 / 4%);
}

.college .college-annual-report .item:not(:first-child) {
  padding-top: 1.5rem;
}

.college .college-annual-report .item:not(:last-child) {
  border-bottom: 1px solid #E2E2E2;
}
.spinner-loader-container .spinner-border {

  border: 0.25em solid var(--blue-color);
  border-right-color: transparent;
}
.research-int.enabled ul li {
  padding: 0 2rem;
  position: relative;
  margin-bottom: .5rem;
}

.research-int.enabled ul li::before {
  content: '';
  position: absolute;
  top: 0.4rem;
  right: 0;
  background-color: var(--blue-color);
  height: 0.8rem;
  width: 0.8rem;
}

.research-int.enabled .empty {
  height: 100%;
}

.spinner-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.research-int .spinner-loader-container{
  height:unset;
  position:relative;
  display:block;
  
}
.research-int .spinner-loader-container .spinner-border.result{
 top:50%;
 left: 46%;
 position:absolute;
}
.college .college-annual-report .item .item-desc {
  display: flex;
  align-items: center;
  line-height: 2;
  margin-bottom: .3rem;
}

.college .college-annual-report .item .item-desc .icon {
  display: none;
}

.college .college-annual-report .item a.item-cta {
  color: var(--blue-color);
  transition: .3s all ease;
  font-size: .8rem;
}

.news-content .news-detail a {
  color: var(--blue-color);
}

.college .college-annual-report .item .item-desc .icon svg {
  width: 2rem;
  height: 2rem;
}

.college .college-annual-report .item a.item-cta:hover {
  color: var(--blue-color-hover);
}

.college .college-annual-report .item .item-desc .name {
  font-size: .85rem;
}

.college .affliated-members {
  width: 100%;
  margin: 0 auto 2rem;
}

.college .affliated-members-desc {
  text-align: center;
  font-family: var(--default-font-sb);
  line-height: 2.1;
}

.college .affliated-members input {
  background-color: #F2F2F2;
  border: none;
  padding: 1.6rem 1rem;
  font-family: var(--default-font);
  width: 100%;
}

.college .affliated-members input:focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 156, 83, 0.11);
}

.college .affliated-members .search-affliated-btn {
  background-color: var(--orange-color);
  color: white;
  padding: .6rem 0;
  width: 50%;
  margin: 1.5rem auto 0;
  align-self: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  transition: .3s all ease;
}

.college .affliated-members .search-affliated-btn:hover {
  background-color: var(--orange-color-hover);
}

.college .affliated-members .search-affliated-btn svg {
  margin-right: .5rem;
  width: 1.1rem;
  height: 1.1rem;
}
.steps-container {
  content: '';
  background: url("/themes/uoj_theme/media/group\ 2400.svg") var(--background);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-x: 15rem;
}
.steps-app {
  padding-top: 0;
  padding-bottom: 0;
}

.steps {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 2rem 0 0;
  margin: 0rem 0;
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #dfdfdf;
}

.step:last-child {
  border-bottom: unset;
}

.step:nth-child(even) .instruction {
  content: "";
  width: 100%;
  padding-bottom: 0rem;
}

.instruction.no-date {
  font-weight: 600;
}

.step:nth-child(even) .instruction.no-date {
  bottom: 12rem;
}

.step:nth-child(odd) .instruction {
  top: 17rem;
}

.step .instruction {
  min-height: fit-content;
  content: '';
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step .header .num {
  font-size: 2rem;
  font-weight: 700;
  margin-left: 0.6rem;
}

.step .header {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
  min-width: 17.6rem;
  justify-content: center;
}

.step .header span {
  text-align: center;
}

.step .header .title {
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.step .start-date,
.step .end-date {
  display: flex;
  justify-content: start;
  margin-bottom: 1rem;
}

.step .from,
.step .to {
  margin-left: .4rem;
  border-radius: 2rem;
}

.step .date {
  border-radius: 2rem;
}

.step .schedule {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.step:nth-child(5n+1) .num {
  color: var(--blue-color);
}

.step:nth-child(5n+2) .num {
  color: var(--orange-color);
}

.step:nth-child(5n+3) .num {
  color: var(--green-color);
}

.step:nth-child(5n+4) .num {
  color: var(--red-color);
}

.step:nth-child(5n+5) .num {
  color: var(--purple-color);
}

.step:nth-child(5n+1) .start-date .from,
.step:nth-child(5n+1) .start-date .date,
.step:nth-child(5n+1) .end-date .to,
.step:nth-child(5n+1) .end-date .date {
  background-color: #a3ddf3;
  padding: .5rem 1rem;
}

.step:nth-child(5n+2) .start-date .from,
.step:nth-child(5n+2) .start-date .date,
.step:nth-child(5n+2) .end-date .to,
.step:nth-child(5n+2) .end-date .date {
  background-color: #d37b609c;
  padding: .3rem .8rem;
}

.step:nth-child(5n+3) .start-date .from,
.step:nth-child(5n+3) .start-date .date,
.step:nth-child(5n+3) .end-date .to,
.step:nth-child(5n+3) .end-date .date {
  background-color: #a6e8e0;
  padding: .5rem 1rem;
}

.step:nth-child(5n+4) .start-date .from,
.step:nth-child(5n+4) .start-date .date,
.step:nth-child(5n+4) .end-date .to,
.step:nth-child(5n+4) .end-date .date {
  background-color: #b62c3e99;
  padding: .5rem 1rem;
}

.step:nth-child(5n+5) .start-date .from,
.step:nth-child(5n+5) .start-date .date,
.step:nth-child(5n+5) .end-date .to,
.step:nth-child(5n+5) .end-date .date {
  background-color: #78478eab;
  padding: .5rem 1rem;
}

.step .instruction span {
  line-height: 2;
  text-align: center;
}

.tabular-view .tab-content .input-item,
.tabular-view .tab-content .input-item item {
  width: 100%;
}

.tabular-view .nav li {
  width: 100%;
  height: auto;
}

.tabular-view .nav li a.nav-link {
  margin: 0;
  filter: grayscale(100%);
  display: flex;
  align-items: baseline;
}

.form-container textarea {
  width: 100%;
  border: 1px solid rgb(236, 237, 238);
  padding: 15px;
}

.submit-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-size: 1rem;
}

.registration-footer .stamp-img {
  height: 4rem;
  width: 10rem;
  display: block;
}

.registration-footer .stamp-img img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.mobile-apps .social-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #cccccc;
  margin-top: 2rem;
  padding-top: 2rem;
}

.mobile-apps .social-icons a {
  margin: 0 .3rem;
}

.associates-tiles.container {
  min-height: 46rem;
}
.associates-tiles .spinner-border{
  position:absolute;
}
.associates-tiles .card .card-body .card-text.res-interests {
  text-decoration: underline;
  transition: all .3s ease-in-out;
}

.associates-tiles .card .card-body .card-text.res-interests:hover {
  color: var(--blue-color) !important;
}
.university-services .services-container {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  padding: 0;
  max-height: 38rem;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 5rem;
}

.university-services .tab-pane {
  width: 100% !important;
  background-color: white;
  padding: 1rem .7rem;
}

.services-container .swiper-button-prev svg,
.services-container .swiper-button-next svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.services-container .swiper-button-prev {
  transition: .3s all ease;
  display: block;
  height: 2rem;
  width: 2rem;
  transform: scaleX(-1);
}
.services-container .swiper-button-prev svg circle,
.services-container .swiper-button-next svg circle {
  fill: var(--blue-color);
  transition: .3s all ease;
}

.services-container .swiper-button-prev:hover svg circle,
.services-container .swiper-button-next:hover svg circle {
  fill: var(--blue-color-hover);
  cursor: pointer;
}

.services-container .tabpane-swiper .swiper-button-disabled {
  display: none !important;
}

.services-container .swiper-button-next {
  transition: .3s all ease;
  height: 2rem;
  width: 2rem;
}

.partner-con .services-container .swiper-button-next {
  transform: translateX(0rem) scale(.7) rotate(0);
  transition: .3s all ease;
  left: -5rem;
  z-index: 3;
}

.partner-con .services-container .swiper-button-prev {
  transform: translateX(0rem) scale(.7) rotate(180deg);
  transition: .3s all ease;
  right: -5rem;
  z-index: 3;
}

.university-services .services-container .col-lg-3 .card {
  border: 1px solid rgba(0, 0, 0, .125);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  height: 16rem;
}
.std-activities {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
  margin-top: 2rem;
}
.std-activities .col-lg-4 {
  padding: 0;
}
.card.partnership {
  height: 16rem;
  cursor: pointer;
}
.card.partnership .name {
  font-size: .9rem;
  text-align: right;
}
.university-services .partnership {
  border: 1px solid #E3E3E3;
}
.university-services .partnership:hover {
  border: 1px solid #e7e7e7;
}

.university-services .partnership:hover .company-desc {
  background-color: #e7e7e7;
}

.university-services .partnership .company-desc svg g {
  stroke: var(--blue-color);
}

.university-services .partnership .company-thumbnail {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.university-services .partnership .company-thumbnail img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.university-services .partnership:hover .company-thumbnail img {
  transform: scale(1.05);
}

.university-services .partnership .company-desc {
  background-color: rgb(250 250 250 / 95%);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  transition: .3s all ease;
  width: 100%;
  gap: 0.6rem;
  position: absolute;
  bottom: 0;
  color: var(--black-color);
}

.university-services .partnership .company-desc .cta svg {
  width: 1.5rem;
  height: 1.5rem;
}

.university-services .tab-pane:nth-child(1) .partnership .company-desc .cta svg path {
  fill: var(--blue-color);
}

.university-services .tab-pane:nth-child(1) .partnership .company-desc .cta svg g {
  stroke: var(--blue-color);
}
.testimonials-container {
  background-color: #F4F4F4;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.testimonials-container .col-lg-4 {
  margin-bottom: 1rem;
}
.testimonials-container .card {
  margin-right: 0;
}
.testimonials .col-lg-4:nth-child(6n+1) .card-body {
  border-bottom: 5px solid var(--blue-color);
}
.testimonials .col-lg-4:nth-child(6n+4) .card .card-body {
  border-bottom: 5px solid var(--purple-color);
}
.testimonials .col-lg-4:nth-child(6n+5) .card .card-body {
  border-bottom: 5px solid var(--red-color);
}
.testimonials .col-lg-4:nth-child(6n+3) .card .card-body {
  border-bottom: 5px solid var(--green-color);
}
.testimonials .col-lg-4:nth-child(6n+2) .card .card-body {
  border-bottom: 5px solid var(--orange-color);
}
.testimonials .col-lg-4:nth-child(6n+6) .card .card-body {
  border-bottom: 5px solid var(--dark-grey-color);
}
.library-tabs {
  background-color: var(--background);
  padding-bottom: 2.5rem;
  padding-top: 0;
}
.nav-tabs {
  border: none;
}
.nav-tabs .nav-item .nav-link {
  background-color: var(--tab-background-color);
  height: 100%;
  padding: 1.4rem 4rem;
  text-align: center;
}
.cyber-tabview .nav-tabs .nav-item .nav-link{
padding:1.4rem 2rem;
}
.cyber-tabview .slick-track{
  width:100%!important;
}
.cyber-tabview .nav-tabs .slick-track{
  display:flex;
}
.cyber-tabview .nav-tabs .slick-track li{
  width:100% !important;
  flex:1 0 100%
}
.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  border: none;
  border-radius: 0;
  transition: all .3s ease-in-out;
}
.nav-tabs,
.tab-content {
  padding: 0;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link {
  background-color: white;
  color: var(--black-color);
}
.library-tabs .tab {
  background-color: white;
}
.library-tabs ul li.slick-current.slick-active a {
  color: var(--blue-color);
}
.library-tabs .tab-pane {
  background-color: white;
  border-top: none;
  overflow: hidden;
}
.library-tabs .tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  border-bottom: 2px solid #F4F4F4;
}
.library-tabs .tab:last-child {
  border-bottom: none;
}
.library-tabs .tab .content {
  display: flex;
  align-items: center;
}
.library-tabs .tab .content .card-text {
  color: var(--txt-color);
}
.library-tabs .tab .content svg {
  height: 1.5rem;
  width: 1.5rem;
  display: block;
  margin-left: .5rem;
}
.library-tabs .tab-pane:nth-child(4n+1) .content svg path {
  stroke: var(--blue-color);
}

.library-tabs .tab-pane:nth-child(4n+2) .content svg path {
  stroke: var(--orange-color);
}

.library-tabs .tab-pane:nth-child(4n+3) .content svg path {
  stroke: var(--green-color);
}

.library-tabs .tab-pane:nth-child(4n+4) .content svg path {
  stroke: var(--red-color);
}

.library-tabs .tab-pane.download {
  font-size: .8rem;
}

.library-tabs .tab-pane:nth-child(4n+1) .download {
  color: var(--blue-color);
}

.library-tabs .tab-pane:nth-child(4n+2) .download {
  color: var(--orange-color);
}

.library-tabs .tab-pane:nth-child(4n+3) .download {
  color: var(--green-color);
}

.library-tabs .tab-pane:nth-child(4n+4) .download {
  color: var(--red-color);
}

.interest .icon {
  height: 1.5rem;
  width: 1.5rem;
  transform: scaleX(-1);
}

.interest {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.library-tabs .tab-pane:nth-child(4n+1) .download:hover {
  color: var(--blue-color-hover);
}

.library-tabs .tab-pane:nth-child(4n+2) .download:hover {
  color: var(--orange-color-hover);
}

.library-tabs .tab-pane:nth-child(4n+3) .download:hover {
  color: var(--green-color-hover);
}

.library-tabs .tab-pane:nth-child(4n+4) .download:hover {
  color: var(--red-color-hover);
}

.form-container {
  background-color: var(--background);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.form-container form {
  background-color: white;
  padding: 1rem 3rem 3rem 3rem;
}

.form-container form input {
  width: 49%;
  margin-left: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e6e3e3;
  padding: 0.7rem;
}

.form-container form input:nth-child(2n+2) {
  margin-left: 0;
}

.form-container form input[type='date'] {
  width: 100%;
  margin-left: 0;
}

.form-container form input[type='checkbox'] {
  width: fit-content;
  display: flex;
  align-items: center;
}

.form-container form .file__value--remove {
  width: 10px;
  height: 10px;
  background-size: contain;
  margin-left: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.953' height='20.953' viewBox='0 0 20.953 20.953'%3E%3Cpath id='Icon_ionic-md-close' data-name='Icon ionic-md-close' d='M28.477,9.619l-2.1-2.1L18,15.9,9.619,7.523l-2.1,2.1L15.9,18,7.523,26.381l2.1,2.1L18,20.1l8.381,8.381,2.1-2.1L20.1,18Z' transform='translate(-7.523 -7.523)' fill='%22B0E9'/%3E%3C/svg%3E%0A");
}
.file__value {
  display: flex;
  align-items: center;
  justify-content: center;
}

.boxes {
  margin: 2rem 0;
}

.checkboxes {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
  color: var(--txt-color);
  line-height: 2.2;
}
/* OPEN DATA END */
/* FORM */
.form-container form .uploader {
  margin-top: 1rem;
  text-align: center;
  padding: 2rem 2rem;
  border: 2px dashed rgb(213, 213, 213);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease 0s;
}
.form-container form .file__input svg {
  width: 3rem;
  height: auto;
  display: block;
  margin: auto;
}
.form-container form .uploader-info {
  display: flex;
  flex-direction: column;
}

.form-container form .uploader-info label {
  margin-top: 1rem;
}

.form-container form .file__input--label {
  cursor: pointer;
}

.form-container form .uploader-info label.authorized-files {
  color: var(--txt-color);
  margin-bottom: 1rem;
}

.form-container form .uploader-info label:first-child {
  color: var(--blue-color);
  font-size: 2rem;
  font-weight: bold;
}

.form-container form .uploader .file__input--file {
  display: none;
}

/* ASSOCIATES DIRECTORY START */
.associates-tiles {
  background-color: var(--background);
  padding-bottom: 6rem;
}

.associates-tiles .card .pattern {
  position: absolute;
  left: 1.25rem;
  bottom: -1.55rem;
  width: 12rem;
  display: none;
}

.associates-tiles .card .pattern svg {
  height: 100%;
  width: 100%;
}

.associates-tiles .card {
  margin-bottom: 2rem;
}

.associates-tiles .card {
  border-bottom: 10px solid var(--blue-color);
}

.associates-tiles .card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.associates-tiles .card .card-body .positions {
  display: flex;
  flex-direction: column-reverse;
}

.associates-tiles .card .card-body .card-title {
  font-size: 1.3rem;
  width: fit-content;
  margin-bottom: 1rem;
  margin: auto;
}

.associates-tiles .card .card-body .positions .major,
.associates-tiles .card .card-body .positions .position {
  margin: .3rem 0;
  padding: 0.3rem 2rem;
  border-radius: .5rem;
}

.associates-tiles .card .card-body .profile {
  width: 12rem;
  height: 12rem;
  border-radius: 100%;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.associates-tiles .card .card-body .informations {
  width: 100%;
}

.associates-tiles .card .card-body .profile img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 100%;
}

.profile .personal-profile {
  position: absolute;
  background-color: #f9f9f9;
  padding: 1rem 1rem 1.5rem;
  bottom: 0;
  right: 0rem;
  width: 100%;
  color: var(--blue-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
  font-size: .9rem;
}

.profile .personal-profile:hover {
  color: white;
  background-color: rgba(25, 124, 163, 0.48);
}

.associates-tiles .card .card-body .positions .position {
  background-color: var(--light-grey-color);
  font-size: 0.9rem;
  text-align: center;
}

.associates-tiles .card .card-body .positions .major {
  background-color: rgba(34, 176, 233, 0.22);
  color: var(--blue-color);
  font-size: 0.9rem;
  text-align: center;
}

.associates-tiles .card .card-body .icon.mail svg path {
  stroke: none;
  fill: var(--blue-color);
}

.associates-tiles .card .pattern svg ellipse {
  fill: var(--blue-color);
}

.associates-tiles .card .card-body .positions>div {
  display: flex;
  flex-direction: column;
}

.associates-tiles .card .card-body .member-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;

}

.associates-tiles .card .card-body .member-info .information {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-width: 46%;
  width: fit-content;
  margin: .5rem;
}

.associates-tiles .card .card-body .member-info .information .icon {
  margin-left: 1.5rem;

}
.associates-tiles .card .card-body .member-info .information .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.associates-tiles .card .card-body .member-info .information .card-text {
  color: var(--txt-color);
}
.pattern-before svg {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  display: none;
}
.university-services {
  background-color: var(--background);
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.university-services h1 {
  margin-bottom: 1.5rem;
  padding-top: 1rem;
}

.volunteering.container {
  background: url("/themes/uoj_theme/media/Intersection 2.jpg");
  padding-top: 3rem;
  padding-bottom: 2rem;
  background-size: cover;
}

.volunteering .nav.nav-tabs {
  justify-content: center;
}

.volunteering .nav.nav-tabs li.nav-item a.nav-link {
  color: var(--txt-color);
  transition: all .3s ease-in-out;
  position: relative;
  background-color: transparent;
  padding: 1.4rem 0.5rem;
  margin: 0;
  font-size: 0.9rem;
}
.volunteering .nav.nav-tabs li.nav-item a.nav-link.active{
  color:var(--green-color);
}
.volunteering .nav.nav-tabs li.nav-item a.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4rem;
  height: 2px;
  width: 100%;
  background-color: var(--green-color);
}

.volunteering .volunteer-tiles,
.deanship-agencies .agencies-tiles {
  display: flex;
  margin-top: 2rem;
  flex-wrap: wrap;
  padding: 0;
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card {
  border-right: 10px solid var(--purple-color);
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card {
  border-right: 10px solid var(--red-color);
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card .pattern svg ellipse {
  fill: var(--purple-color);
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card .pattern svg ellipse {
  fill: var(--red-color);
}

.volunteering .volunteer-tiles .col-lg-6 .card .pattern,
.deanship-agencies .agencies-tiles .col-lg-6 .card .pattern {
  position: absolute;
  left: 1rem;
  top: .8rem;
  width: 5rem;
  height: 5rem;
}

.volunteering .volunteer-tiles .col-lg-6 .card .pattern svg,
.deanship-agencies .agencies-tiles .col-lg-6 .card .pattern svg {
  width: 100%;
  height: 100%;
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card li::before {
  background-color: var(--purple-color);
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card li::before {
  background-color: var(--red-color);
}

.volunteering .volunteer-tiles .col-lg-6 .card li::before,
.Deanship-agencies .agencies-tiles .col-lg-6 .card li::before {
  content: "";
  top: .7rem;
  right: -2.5rem;
  position: absolute;
  height: .8rem;
  width: .8rem;
}

.accordions {
  margin-top: 2.5rem;
}

.established-initiatives {
  padding: 0 15px 2.5rem;
}

.accordions .accordion .header {
  justify-content: space-between;
  align-items: center;
  display: flex;
  cursor: pointer;
}

.accordions .accordion .header .expand {
  transition: all .3s ease-in-out;
  width: 2rem;
  height: 2rem;
}

.accordions .accordion .header .expand img {
  width: 100%;
  height: 100%;
}

.accordions .accordion {
  background-color: rgb(252, 252, 252);
  border: 2px solid rgb(238, 238, 238);
  padding: 1rem;
  width: 100%;
  transition: all 0.3s ease 0s;
  margin: 1rem 0
}

.accordions .accordion .header[aria-expanded="true"] .expand {
  transform: rotate(180deg);
}

.accordions .header:hover .question {
  color: var(--blue-color);
}

.accordions .accordion-body .tiles-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgb(238, 238, 238);
}

.accordions .accordion-body .tiles-container .col-lg-6 {
  padding-left: 0;
  padding-right: 0;
}

.accordions .accordion-body .card .card-img-top img {
  margin: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.accordions .accordion-body .card-text span {
  font-size: 1rem;
}

.accordions .accordion-body .card-text {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  border: 1px solid rgb(238, 238, 238);
  align-items: center;
  padding: 1rem;
  border-radius: 0;
  font-size: .8rem;
  color: var(--txt-color);
}

.accordions .accordion-body img {
  margin-right: .5rem;
}

.accordions .accordion-body .col-lg-6 {
  margin-bottom: 2rem;
}

.accordions .accrodion .accordion-body .col-lg-6 .card .card-img-top img {
  transition: all .3s ease-in-out;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.accordions .accordion .accordion-body .col-lg-6 .card:hover .card-img-top img {
  transform: scale(1.1);
}

.details-panel .apply-link {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  color: var(--blue-color);
}

.details-panel .apply-link span {
  margin: 1rem;
}

.details-panel .apply-link:hover {
  color: var(--blue-color-hover);
}

.details-panel .apply-link:hover svg g path {
  stroke: var(--blue-color-hover);
}


.life-jeddah {
  margin-top: 2rem;
}


.life-jeddah h1 {
  padding-top: 0;
}

.life-jeddah .tiles-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.life-jeddah .tiles-container .col-lg-3 {
  margin-bottom: 1rem;
  padding-left: .5rem;
  padding-right: .5rem;
}

.life-jeddah .tiles-container .card .card-img-overlay {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.life-jeddah .tiles-container .card .card-img-overlay .card-title {
  color: white;
  font-size: 1rem;
  margin: 0;
}

.tab-content .slick-slide.slick-active,
.tab-content .slick-slide {
  display: none;
  height: fit-content;
  flex-direction: column;
}
.news-advertisements.innovations .items{
  width:100%!important;
}
.tab-content .slick-slide.slick-current.slick-active {
  display: flex;
}

.left-section .slick-list.draggable {
  border-bottom: unset;
}

.slick-list.draggable {
  width: 100%;
  height: 100%;

}

.tabular-view .tab-content .tab-pane.slick-current.slick-active {
  display: block;
  height: min-content !important;
  width: 100% !important;
  right: 0px !important;
  z-index: 0 !important;
  opacity: 1 !important;
  overflow: hidden;
  padding: 1rem;
}
.tabular-view .tab-content .tab-pane .d-flex{
  flex-direction:column;
}
.news-advertisements .slick-prev,
.news-advertisements .slick-next {
  width: 2.2rem !important;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 0;
  content: "";
  height: 100%;
  z-index: 8;
  width: 2.5rem !important;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}

.profile .deco1::before {
  content: "";
  position: absolute;
  height: 5.5rem;
  width: 3.1rem;
  top: 0;
  right: 0;
  background: linear-gradient(to left, white, #ffffffe0);
  z-index: 2;
}
.profile .deco1{
  position: relative;
  top: 0;
  right:-4rem;
  left:auto;
}
.president-tabview .deco1::before {
  content: "";
  position: absolute;
  height: 4rem;
  width: 3.1rem;
  top: 5.9rem;
  right: 6rem;
  background: linear-gradient(to left, white, rgb(255 255 255 / 60%));
  z-index: 2;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: none;
}

.profile .deco2::before {
  content: "";
  position: absolute;
  height: 5.5rem;
  width: 3.1rem;
  top: 0;
  left: 0;
  background: linear-gradient(to right, white, #ffffff);
  z-index: 2;
}

.president-tabview .deco2::before {
  content: "";
  position: absolute;
  height: 5.5rem;
  width: 3.1rem;
  top: 6rem;
  left: 6rem;
  background: linear-gradient(to right, white, rgb(255 255 255 / 60%));
  z-index: 2;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: none;
}

.slick-prev {
  right: 0;
  background-image: url(/themes/uoj_theme/media/chev.svg);
  background-position: center;
}

.security-tab-view .slick-prev,
.president-tabview .slick-prev {
  background-size: 80%;
  right: 0;
}

.president-tabview .slick-prev {
  background-color: rgb(225, 219, 219);
}

.security-tab-view .slick-next {
  left: 0;
}

.profile .slick-next {
  background-image: url(/themes/uoj_theme/media/arrow.svg);
  z-index: 2;
  background-color: transparent;
  background-size: 100%;
  background-position: center;
  border-top-left-radius: 5px;
}

.profile .slick-prev {
  transform: scaleX(-1);
  border-top-left-radius: 5px;
  z-index: 1;
}

.volunteering .slick-next {
  left: .9rem;
}

.volunteering .slick-prev {
  right: .9rem;
  transform: scaleX(-1)
}



.slick-next {
  left: 0;
  background-image: url(/themes/uoj_theme/media/arrow.svg);
}

.tabular-view .slick-prev,
.library-tabs .slick-prev {
  transform: scaleX(-1);
}

.slick-prev {
  left: 0;
  background-image: url(/themes/uoj_theme/media/arrow.svg);
}

.university-services .slick-prev {
  transform: scaleX(-1)
}

.news-advertisements .slick-prev {
  right: 0;
  background-image: url(/themes/uoj_theme/media/arrow-r.svg);
}

.news-advertisements .slick-next {
  left: 0;
  background-image: url(/themes/uoj_theme/media/arrow.svg)
}

.achievements .news-advertisements .slick-prev {
  right: 0;
  background-image: url(/themes/uoj_theme/media/arrow-r-green.svg);
}

.achievements .news-advertisements .slick-next {
  left: 0;
  background-image: url(/themes/uoj_theme/media/arrow-green.svg)
}

.slick-disabled {
  filter: grayscale(.7);
  pointer-events: none;
  opacity: .5;
}

.slick-track .tab-pane {
  right: 0 !important;
}

.input-section .form,
.form-container form .fields.open-dt {
  flex-direction: row;
  flex-wrap: wrap;
}

.form-container button[disabled] {
  filter: grayscale(100%);
  pointer-events: none;
}

.college li.nav-item.slick-slide {
  height: fit-content;
}

.tab-pane .row {
  flex-direction: column;
}

.library-tabs .tab-content .slick-track,
.library-tabs .tab-content .slick-track .tab-pane {
  width: 100% !important;
}

.slick-track {
  width: 100%;
}

.profile .slick-track {
  display: flex;
}

.news-advertisements .tab-pane {
  height: auto;
}

.news-advertisements .tab-content .slick-track {
  width: 100% !important;
}

.achievements .tab-links .slick-track,
.news-advertisements .tab-links .slick-track {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.news-advertisements .nav-pills {
  width: 100%;
  height: 3.5rem;
}

.volunteer-tiles .col-lg-6 {
  margin-bottom: 2rem;
}

#chartdiv {
  height: 350px !important;
}

#chartdiv tspan {
  font-size: 1rem;
}
.focus-area .focus-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.animation-zone {
  border: 1px solid #fafafa;
}

.ilustrator {
  position: absolute;
  top: 6.9rem;
  left: 2.6rem;
  height: 1.5rem;
  width: 1.5rem;
  display: block;
}


.focus-area .focus-body .animation-zone {
  width: fit-content !important;
  margin: auto;
}


.focus-area .focus-body .animation-zone,
.focus-area .focus-body .links {
  width: 100%;
  position: relative;
}

.focus-area .focus-body .links .link-holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid rgb(235, 235, 235);
  color: var(--black-color);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.focus-area .focus-body .links .link-holder .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.focus-area .focus-body .links .link-holder svg {
  transform: all .3s ease-in-out;
  width: 100%;
  height: 100%;
}

.focus-area .focus-body .links .link-holder:hover {
  color: black;
}

.focus-area .focus-body .links .link-holder svg path,
.focus-area .focus-body .links .link-holder svg g#Ellipse_71 {
  stroke: var(--blue-color);
}

.focus-area .focus-body .links .link-holder:hover svg path,
.focus-area .focus-body .links .link-holder:hover svg g#Ellipse_71 {
  stroke: var(--blue-color-hover);
}

.focus-area .focus-body .links .link-holder svg path {
  fill: var(--blue-color);
}

.focus-area .focus-body .links .link-holder:hover svg path {
  fill: var(--blue-color-hover);
}


.focus-area .focus-body .links .link-holder:last-child {
  border-bottom: none;
}

.focus-area .focus-body .links .link-holder .link {
  font-size: 1.1rem;
  font-family: var(--default-font-sb);
}

.focus-area .focus-body .animation-zone lottie-player {
  height: auto !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.focus-area .links {
  background: url("/themes/uoj_theme/media/focus\ area\ background.webp"), #fafafa;
  background-repeat: no-repeat;
  background-size: 100%;
}
.exit-fullscreen {
  display: none;
}

p {
  font-family: Cairo;
}

* {
  font-family: Cairo;
}

.survey-form-container fieldset.radios--wrapper.js-form-item.webform-type-radios {
  margin: 0 1.5rem 3rem;
}

.survey-form-container fieldset.radios--wrapper.js-form-item.js-webform-type-webform-radios-other {
  margin-right: 6rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-radio {
  margin-bottom: .5rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-radio label {
  padding-right: 1rem;
  font-size: 1rem;
  width: max-content;
}

fieldset legend {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 2;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield {
  margin: 0 1.5rem 3rem 0;
  transition: .3s all ease;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield input:focus-visible,
.survey-form-container .js-form-item.form-item.js-form-type-textarea textarea:focus-visible {
  outline: 1.5px solid var(--blue-color);
  border: none;

}

.survey-form-container .js-form-item.form-item.js-form-type-textfield input {
  height: 2.5rem;
  border-color: #cfcfcf;
  border-style: solid;
  border-width: 1px;
  width: 95%;
}

.survey-form-container label {
  font-size: 1.1rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield label,
.survey-form-container .js-form-item.form-item.js-form-type-textarea label {
  margin-bottom: 1.5rem;
}



.survey-form-container .js-form-item.form-item.js-form-type-textarea {
  margin: 1.5rem 1.5rem 1.5rem 0;
}

.survey-form-container .js-form-item.form-item.js-form-type-textarea textarea {
  border-color: #cfcfcf;
  border-style: solid;
  border-width: 1px;
  resize: none;
  width: 95%
}






.agent-profile .tab-pane {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.map {
  width: 100%;
  margin: 0 auto;
  background-color: rgb(227, 227, 227);
  height: 100vh;
  z-index: 1;
  position: relative;
}

.test .fullscreen {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  background-color: rgb(255, 255, 255);
  border: 2px solid rgba(0, 0, 0, 0.2);
  transition: .3s all ease;
  font-family: Cairo;
  z-index: 100000;

}

.test .fullscreen:hover {
  background-color: rgb(237, 237, 237);
  transition: .3s all ease;
  cursor: pointer;
}

.test {
  position: absolute;
  top: 9rem;
  right: 1rem;
  display: flex;
  border: 1px solid #e2e2e2;
  border-radius: 1rem;
  transition: .3s all ease;
  align-items: center;
  z-index: 2;
}

.test.sensor {

  top: -9rem;
  opacity: 0;

}

.test .select-location select,
.test select {
  width: auto;
  padding: 0 .5rem;
  display: flex;
  outline: none;
  border: none;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: white;
  z-index: 99 !important;
  border: 2px solid rgba(0, 0, 0, 0.2);
  font-family: 'Cairo';
  font-size: 1rem;
  margin-left: 1rem;
}

.leaflet-control {
  border-radius: 0 !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  width: auto !important;
}

.leaflet-popup-content-wrapper {
  padding: 0 !important;
}

.demo {
  display: flex;
  flex-direction: column;
  text-align: right;
}



.info-container {
  padding: 0rem 1rem 1rem;
  text-align: right;
  width: 15rem;
}

.building-info-container {
  text-align: right;
  width: auto;
}

.Building-Detail-Container .left-section {
  margin-top: 0;
}

.left-section {
  margin-top: 1.6rem;
}

.right-section {
  position: relative;
  top: -.7rem;
  padding: 0 2.2rem;
}

.Building-Overview .Coordinates {
  font-size: .9rem;
  color: #878787;
}

.building-info-container .Building-Overview {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}

.building-info-container .Building-Overview h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.building-info-container .Responsible-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1rem;
  border-top: 1px solid #E3E3E3;
  width: 100%;
  backdrop-filter: blur(14px);
  background-color: #f6f6f6;
  -webkit-backdrop-filter: blur(15px);
}

.building-info-container .Responsible-details .name {
  font-size: .9rem;
}

.building-info-container .Responsible-details .position {
  font-size: .8rem;
  margin-top: .4rem;
  color: #585858;
}

.building-info-container .Responsible-details .contactcta {
  display: flex;
  align-items: center;
}

.building-info-container .Responsible-details .contactcta svg {
  width: 3rem;
  height: auto;
}

.building-info-container .Responsible-details .contactcta a {
  margin: 0 .5rem;
}

.building-info-container .Responsible-details .contactcta a img {
  width: 3.5rem;
  height: 3.5rem;
}


.demo .info-container h2 {
  margin-bottom: 0;
  margin-top: 1.5rem;
}

.demo img {
  width: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

}

.details-div {
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 102;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transform: translateX(-130vw);
  transition: .3s all ease;
}


.details-div.active {
  transform: translateX(0);
}

.details-div .close {
  position: absolute;
  top: 1rem;
  left: 1rem;
}



.map-location-details .details-div .close-btn:hover {
  opacity: .7;
}






.map-location-details .details-div .details-div-desc {
  padding: 2rem;
  line-height: 2.2;
  color: #585858;
}






.map-location-details .details-div-options {
  padding: 1.3rem 2rem;
  border-top: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.map-location-details .details-div-options a svg {
  width: 4.2rem;
  height: 4.2rem;
}

.map-location-details .details-div-options a:not(:last-child) {
  margin-left: 1.5rem;
}

.details-div .cover {
  width: 100%;
  height: 18rem;
}


.details-div .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.details-div .details {
  padding: 1.8rem 1.5rem 1rem;
}

.details #detailsTitle {
  font-size: 1.8rem;
}

.details-div-options #Call ellipse,
.details-div-options #Mail ellipse,
.details-div-options #Direction ellipse,
.details-div-options #Share ellipse {
  fill: rgba(34, 176, 233, 0.1);
  transition: .3s all ease;
}

.map-location-details .details-div-options {
  padding: 1.3rem 2rem;
  border-top: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.map-location-details .details-div-options a svg {
  width: 4.2rem;
  height: 4.2rem;
}

.map-location-details .details-div-options a:not(:last-child) {
  margin-left: 1.5rem;
}

.details-div-options #Call:hover ellipse,
.details-div-options #Mail:hover ellipse,
.details-div-options #Direction:hover ellipse,
.details-div-options #Share:hover ellipse,
.details-div-options #Direction path {
  fill: var(--blue-color);
}

.details-div-options #Call:hover path,
.details-div-options #Mail:hover path,
.details-div-options #Share:hover path {
  stroke: white;
}

.details-div-options #Call path,
.details-div-options #Mail path,
.details-div-options #Share path {
  stroke: var(--blue-color);
}

.details-div-options #Direction:hover path {
  fill: white;
}

.map-page .footer {
  display: none;
}

.details #detailsCoordinates {
  line-height: 2.2;
  font-size: 1rem;
  color: var(--txt-color);
}

#departments.disabled {
  pointer-events: none;
  background-color: #f1f1f1;
  color: #b9b9b9;
}

#departments {
  width: auto;
  padding: 0 .5rem;
  display: flex;
  outline: none;
  border: none;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: white;
  z-index: 99 !important;
  border: 2px solid rgba(0, 0, 0, 0.2);
  font-family: 'Cairo';
  font-size: 1rem;
  margin-left: 1rem;
}
.tabs .nav-tabs {
  padding: 0 1rem;
  display: flex;
}

.tabs .nav-tabs .nav-item .nav-link {
  background-color: transparent;
  padding: 1rem 0 1.5rem 2rem;
  border: none;
}

.tabs .nav-tabs .nav-item .nav-link:hover {
  color: var(--blue-color-hover);
}

.tabs .nav-tabs .nav-item .nav-link.active {
  border: none !important;
  color: var(--blue-color);
}

.tabs .tiles {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background);
  padding: 2rem 1rem 0;
}
.tabs .tiles .col-md-6 {
  padding: 0;
}
.tabs .tiles .card {
  margin-bottom: 2rem;
  height: 15rem;
}
.tabs .tiles .col-md-6 .card .card-body .pattern {
  position: absolute;
  left: 1rem;
  top: .6rem;
}
.tabs .tiles .col-md-6 .card .card-body .card-text {
  font-size: 1rem;
  color: var(--txt-color);
}

.tabs .tiles .col-md-6 .card .card-body .number {
  font-size: 2rem;
  color: var(--blue-color);
}

.tabs .tiles .col-md-6 .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 10px solid var(--blue-color);
}

.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.agencies-oc.org-chart {
  padding-bottom: 5rem;
}

.org-chart .main,
.org-chart .sub-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-chart .chart-members {
  position: relative;
  margin-top: 1rem;
  width: 100%;
}

.org-chart .col-lg-4,
.org-chart.deanship .col-lg-3 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-chart .col-lg-4 .card {
  background-color: white;
  border-radius: none;
  border: 1px solid #dfdfdf;
  height: 10rem;
  position: relative;
  overflow: initial;
  margin-bottom: 5rem;
  width: 85%;
}

.org-chart .col-lg-4 .card .card-body,
.org-chart.deanship .col-lg-3 .card .card-body {
  border-top: 7px solid var(--blue-color);
}

.org-chart .main .col-lg-4 .card::after {
  content: "";
  position: absolute;
  top: 121%;
  left: 50%;
  height: 5rem;
  width: 2px;
  background-color: #dfdfdf;
}

.org-chart .col-lg-4 .card .profile,
.org-chart.deanship .col-lg-3 .card .profile {
  position: absolute;
  top: -2rem;
  right: 44%;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
}

.org-chart .col-lg-4 .card .profile img,
.org-chart.deanship .col-lg-3 .card .profile img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.org-chart .col-lg-4 .card .card-body .pattern,
.org-chart.deanship .col-lg-3 .card .card-body .pattern {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
}

.org-chart .col-lg-4 .card .card-body .card-title {
  margin-top: 2rem;
  font-size: 1.5rem;
}

.org-chart .chart-members::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #dfdfdf;
}

.org-chart .chart-members .right-side::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 5rem;
  width: 2px;
  background-color: #dfdfdf;
}

.org-chart .chart-members .col-lg-4:nth-child(6n+1) .card .card-body {
  border-top: 7px solid var(--orange-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+2) .card .card-body {
  border-top: 7px solid var(--green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+3) .card .card-body {
  border-top: 7px solid var(--purple-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+4) .card .card-body {
  border-top: 7px solid var(--light-green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+5) .card .card-body {
  border-top: 7px solid var(--navy-blue-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+6) .card .card-body {
  border-top: 7px solid var(--red-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+1) .card .card-body .pattern ellipse {
  fill: var(--orange-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+2) .card .card-body .pattern ellipse {
  fill: var(--green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+3) .card .card-body .pattern ellipse {
  fill: var(--purple-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+4) .card .card-body .pattern ellipse {
  fill: var(--light-green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+5) .card .card-body .pattern ellipse {
  fill: var(--navy-blue-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+6) .card .card-body .pattern ellipse {
  fill: var(--red-color);
}

.org-chart .chart-members .left-side::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5rem;
  width: 2px;
  background-color: #dfdfdf;
}

.org-chart .chart-members .cards-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0rem;
  position: relative;
  padding: 5rem 0rem 0;
}




.org-chart.deanship .col-lg-3:nth-child(5n+1) .card .card-body {
  border-top: 10px solid var(--orange-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+2) .card .card-body {
  border-top: 10px solid var(--green-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+3) .card .card-body {
  border-top: 10px solid var(--purple-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+4) .card .card-body {
  border-top: 10px solid var(--red-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+5) .card .card-body {
  border-top: 10px solid var(--blue-color);
}

.org-chart.deanship .main .col-lg-4 .card::after {
  content: "";
  position: absolute;
  top: 99%;
  left: 50%;
  height: 7.2rem;
  width: 2px;
  background-color: #dfdfdf;
}

.org-chart.deanship .col-lg-4 .card {
  background-color: white;
  border-radius: none;
  border: 1px solid #dfdfdf;
  height: 7rem;
  position: relative;
  overflow: initial;
  margin-bottom: 5rem;
  width: 85%;
}

.org-chart.deanship .col-lg-4 .card .card-title {
  margin-top: 1rem;
}



.org-chart.deanship .chart-members .col-lg-3:nth-child(5),
.org-chart.deanship .chart-members .col-lg-3:nth-child(9) {
  transform: translateX(-6rem);
}


.org-chart.deanship .chart-members .col-lg-3:nth-child(5) .card:after {
  position: absolute;
  width: 2.5px;
  height: 18.6rem;
  background-color: #dfdfdf;
  content: '';
  top: -5.1rem;
  right: -3rem;
}


.org-chart.deanship .chart-members .col-lg-3:nth-child(7) .card:after {
  position: absolute;
  width: 2.5px;
  height: 28.3rem;
  background-color: #dfdfdf;
  content: '';
  top: -5.1rem;
  right: -3rem;
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(5) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(9) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(6) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(10) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(14) .card:before,
.chart-members .col-lg-3:nth-child(7) .card:before,
.chart-members .col-lg-3:nth-child(11) .card:before,
.chart-members .col-lg-3:nth-child(15) .card:before {
  position: absolute;
  width: 3rem;
  height: 2.5px;
  background-color: #dfdfdf;
  content: '';
  top: 3.8rem;
  right: -3rem;
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(6),
.org-chart.deanship .chart-members .col-lg-3:nth-child(10),
.org-chart.deanship .chart-members .col-lg-3:nth-child(14) {
  transform: translateX(-12.25rem);
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(7),
.org-chart.deanship .chart-members .col-lg-3:nth-child(11),
.org-chart.deanship .chart-members .col-lg-3:nth-child(15) {
  transform: translateX(-18rem);
}

.org-chart.deanship .chart-members::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11rem;
  width: 67rem;
  height: 2px;
  background-color: #dfdfdf;
}


.org-chart.deanship .chart-members .left-side::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11rem;
  height: 5rem;
  width: 2px;
  background-color: #dfdfdf;
}

.org-chart.deanship .chart-members .left-side::after {
  content: "";
  position: absolute;
  top: 0;
  left: 33rem;
  height: 5rem;
  width: 2px;
  background-color: #dfdfdf;
}


.org-chart.deanship .chart-members .right-side::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10rem;
  height: 5rem;
  width: 2px;
  background-color: #dfdfdf;
}

.org-chart.deanship .chart-members .right-side::after {
  content: "";
  position: absolute;
  top: 0;
  right: 32rem;
  height: 37.9rem;
  width: 2px;
  background-color: #dfdfdf;
}


.org-chart.deanship .col-lg-3 .card {
  background-color: white;
  border-radius: none;
  border: 1px solid #dfdfdf;
  height: auto;
  position: relative;
  overflow: initial;
  z-index: 1;
  margin-bottom: 3rem;
  width: 100%;
}

.org-chart.deanship .col-lg-3 .card .card-body .card-title {
  margin-top: 1rem;
  font-size: 1.05rem;
}


.agencies-advisors .card .buttons-container .btn {
  width: 100% !important;
  border-left: none !important;
}



.agencies-advisors .card {
  overflow: hidden;
}

.agencies-oc .col-lg-4 .card .card-body .card-title {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.6;
}


.agencies-oc .chart-members::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28rem;
  width: 28.8rem;
  height: 2px;
  background-color: #dfdfdf;
}

.agencies-oc .chart-members .right-side::before {
  content: "";
  position: absolute;
  top: 0;
  right: 30rem;
  height: 43.6rem;
  width: 2px;
  background-color: #dfdfdf;
}

.agencies-oc .chart-members .left-side::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28rem;
  height: 8.2rem;
  width: 2px;
  background-color: #dfdfdf;
}

.agencies-oc .col-lg-4 .card {
  background-color: white;
  border-radius: none;
  border: 1px solid #dfdfdf;
  height: auto;
  position: relative;
  overflow: initial;
  margin-bottom: 2rem;
  width: 85%;
}

.agencies-oc .main .col-lg-4 {
  flex-direction: column;
}

.agencies-oc .main .card:nth-child(2) .card-body {
  border-top: 10px solid #002247;
}

.agencies-oc .col-lg-4 {
  padding: 0;
}


.agencies-oc .col-lg-4:nth-child(3n+3) {
  justify-content: flex-end;
}



.agencies-oc .col-lg-4:nth-child(3n+3) .card::after {
  position: absolute;
  top: 3.5rem;
  right: -3.3rem;
  content: '';
  width: 3.3rem;
  height: 2px;
  background-color: #dfdfdf;
}


.agencies-oc .col-lg-4:nth-child(3) .card {
  transform: translateX(14.5rem);
}


.agencies-oc .col-lg-4:nth-child(3) .card::after {
  content: unset;
}

.agencies-oc .col-lg-4:nth-child(3) .card::before {
  position: absolute;
  top: 6.6rem;
  left: 54%;
  content: '';
  width: 2px;
  height: 26.2rem;
  background-color: #dfdfdf;
}



.agencies-oc .main .col-lg-4 .card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: 4.2rem;
  width: 2px;
  background-color: #dfdfdf;
}

.agencies-oc .chart-members .col-lg-4:nth-child(3n+1) .card::after {

  position: absolute;

  top: 3.5rem;

  left: -5.4rem;

  content: '';

  width: 5.4rem;

  height: 2px;

  background-color: #dfdfdf;
}



.agencies-oc .col-lg-4:nth-child(3n+1) {
  justify-content: flex-start;
}

.agencies-oc .chart-members .col-lg-4:nth-child(3n+1) {
  transform: translateY(4rem)
}



.bg-gray {
  background-color: #F5F5F5;
}


.agencies-t .president-tabview {
  padding-top: 0;
  padding-bottom: 0;
}


.agencies-t .president-tabview.tab-pane ul li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -2.5rem;
  background-color: var(--red-color);
  height: 1rem;
  width: 1rem;

}

.president-office-oc .col-lg-4 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.president-office-oc .title {
  Margin-bottom: 5rem;

}

.president-office-oc {
  padding-bottom: 6rem;
}

.president-office-oc .main .col-lg-4 .card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: 7.1rem;
  width: 2px;
  background-color: #dfdfdf;
}


.president-office-oc .col-lg-4 .card {
  height: auto;
  margin-bottom: 1.5rem;
  Z-index: 2;
}


.president-office-oc .main .card:first-child .card-body {
  padding: 2rem;
}

.president-office-oc .main .card:first-child .card-title {
  font-size: 1.5rem !important;
}

.president-office-oc .main .card:nth-child(2) .card-body {
  border-top-color: #002247;
}

.president-office-oc .col-lg-4 .card .card-body .card-title {
  margin-top: 1rem;
  font-size: 1.2rem;
  text-align: center;
}


.president-office-oc.org-chart .chart-members::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: 16.55%;
  width: 67%;
  height: 2px;
  background-color: #dfdfdf;
}

.president-office-oc.org-chart .chart-members .left-side::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: 14.5rem;
  height: 65rem;
  width: 2px;
  background-color: #dfdfdf;
}

.president-office-oc.org-chart .chart-members .right-side::before {
  content: "";
  position: absolute;
  top: 2rem;
  right: 14.5rem;
  height: 64rem;
  width: 2px;
  background-color: #dfdfdf;
}

.president-office-oc.org-chart .main .col-lg-4 .card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: 10.1rem;
  width: 2px;
  background-color: #dfdfdf;
}

.depart-container {
  padding: 1rem 1rem 1rem;
}

.research-int .res-title {
  font-size: 2rem;
  margin-bottom: 0rem;
  padding: 1rem 2rem;
}

.research-int {
  transform: translateX(-100%);
  position: fixed;
  transition: all .3s ease-in-out;
  background-color: white;
  left: 0;
  height: 100vh;
  top: 0;
  width: 100%;
  z-index: 101;
}

.res-interests {
  cursor: pointer;
}

.research-int .close-btn {
  position: absolute;
  top: 1rem;
  display: none;
  position: absolute;
  z-index: 99;
  left: 1.5rem;
 
}
 .research-int .close-btn svg{
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
 }
.research-int .close-btn svg line#Line_135,
.research-int .close-btn svg line#Line_136{
stroke: #fff;
}
.research-int .research {
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 1.4rem;
  padding: 0 2rem;
}

.research-int.enabled {
  transform: translateX(0);
}

.research-int .image-container {
  height: 11rem;
}

.research-int .image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.mason-container .load-more {
  background-color: var(--blue-color);
  color: white;
  margin: 0rem auto 3rem;
  width: fit-content;
  padding: .7rem 2rem;
  transition: all .3s ease-in-out;
}

.mason-container .load-more:hover {
  background-color: var(--blue-color-hover);
}

.single-card.col-lg-6 {
  max-width: 100% !important;
  width: 100%;
  flex: 0 0 100%;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  margin-bottom: 3rem;
}

.leaflet-popup {
  width: max-content;
}
.map.map-page .leaflet-popup {
  left: 35px !important;
  min-height: 11rem;
  height: auto;
  bottom: -10.7rem!important;
}
.College-sections .col-lg-4:nth-child(3n+1) svg g {
  stroke: var(--navy-blue-color);
}

.College-sections .col-lg-4:nth-child(3n+2) svg g {
  stroke: var(--red-color);
}

.College-sections .col-lg-4:nth-child(3n+3) svg g {
  stroke: var(--light-green-color);
}

.College-sections .col-lg-4:nth-child(3n+1) svg path {
  fill: var(--navy-blue-color);
}

.College-sections .col-lg-4:nth-child(3n+2) svg path {
  fill: var(--red-color);
}

.College-sections .col-lg-4:nth-child(3n+3) svg path {
  fill: var(--light-green-color);
}
.supreme-president {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.profile-section .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #ffffffad;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
}

.profile-section {
  background-color: #f9f9f9;
  position: relative;
  min-height: 30rem;
  border-radius: 0.7rem;
  margin: auto;
  width: 100%;
}

.profile-section .social-icons .icon {
  margin-left: 1rem;
  height: 3rem;
  width: 3rem;
}

.profile-section .social-icons .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.profile-section .image-container {
  height: 30rem;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  top: -2rem;
}

.profile-section .image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
  transition: all .3s ease-in-out;
}

.profile-section .social-icons a.twitter.icon:hover ellipse {
  fill: var(--blue-color);
}

.profile-section .social-icons a.twitter.icon:hover path {
  stroke: white;
}

.profile-section .social-icons a.instagram.icon:hover path:nth-child(1) {
  fill: var(--blue-color);
}

.profile-section .social-icons a.instagram.icon:hover path:nth-child(2) {
  fill: white;
}

.profile-section .social-icons a.facebook.icon:hover ellipse {
  fill: var(--blue-color);
}

.profile-section .social-icons a.facebook.icon:hover path {
  stroke: white;
}

.supreme-president .president-informations .buttons-container .btn.cv:hover {
  background-color: var(--blue-color);
  color: white;
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .buttons-container .btn:hover,
.advisors .cards-container .col-lg-3:nth-child(4n+1) .card .card-body .buttons-container .btn:hover {
  color: var(--orange-color-hover);
  background-color: #f7f7f7;
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .buttons-container .btn:hover,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .buttons-container .btn:hover {
  color: var(--purple-color-hover);
  background-color: #f7f7f7;
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .buttons-container .btn:hover,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .buttons-container .btn:hover {
  color: var(--green-color-hover);
  background-color: #f7f7f7;
}

.roles.container {
  Padding-bottom: 2rem;
}

.supreme-president.president-cv .president-informations::after {
  display: none;
}

.supreme-president .president-informations::after {
  content: '';
  position: absolute;
  top: -5rem;
  left: 0rem;
  background-image: url('/themes/uoj_theme/media/Path\ 1702.png');
  height: 5rem;
  width: 5rem;
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
}
.tab-content>.tab-pane.active{
  display: flex;
  flex-direction: column;
}
.college.tabular-view.E-services .tab-pane:nth-child(4n+4) .card .e-actions a:hover svg ellipse {
  fill: var(--red-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+3) .card .e-actions a:hover svg ellipse {
  fill: var(--green-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+2) .card .e-actions a:hover svg ellipse {
  fill: var(--orange-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+1) .card .e-actions a:hover svg ellipse {
  fill: var(--blue-color);
}

.college.tabular-view.E-services .tab-pane .card .e-actions a svg * {
  transition: .3s all ease;
}

.college.tabular-view.E-services .tab-pane .card .e-actions a:hover svg path {
  stroke: white;
}


.college.tabular-view.E-services .tab-pane:nth-child(4n+4) .card .e-actions svg ellipse {
  fill: #F8E9EB;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+4) .card .e-actions svg path {
  stroke: var(--red-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+3) .card .e-actions svg ellipse {
  fill: #E6F6F4;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+3) .card .e-actions svg path {
  stroke: var(--green-color);
}


.college.tabular-view.E-services .tab-pane:nth-child(4n+2) .card .e-actions svg ellipse {
  fill: #FBF1EF;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+2) .card .e-actions svg path {
  stroke: var(--orange-color);
}


.college.tabular-view.E-services .tab-pane:nth-child(4n+1) .card .e-actions svg ellipse {
  fill: #E8F7FD;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+1) .card .e-actions svg path {
  stroke: var(--blue-color);
}

.college.tabular-view.E-services .card .card-content {
  display: flex;
  flex-direction: column;
  min-height: Calc(100% - 6rem);
  padding: 1.5rem 1rem;
  justify-content: space-between;
}

.college.tabular-view.E-services .card .card-body .e-actions .mail,
.college.tabular-view.E-services .card .card-body .e-actions .Like,
.college.tabular-view.E-services .card .card-body .e-actions .share,
.college.tabular-view.E-services .card .card-body .e-actions .Bookmark {
  width: 3rem;
  height: 3rem;
}

.college.tabular-view.E-services .card .card-body .e-actions svg {
  height: 100%;
  width: 100%;
}

.college.tabular-view.E-services .card .card-body .e-actions {
  display: flex;
  column-gap: 1rem;
}

.college.tabular-view.E-services .card .card-body {
  padding: 0;
  height: 100%;
}

.college.tabular-view.E-services .card .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #828282;
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 1rem;
}

.college.tabular-view.E-services .card .card-title img {
  width: 3.5rem;
  object-fit: contain;
  height: 3rem;
  margin-left: 1rem;
}

.college.tabular-view.E-services .card .card-title {
  padding: 1rem;
  background-color: #F9F9F9;
  font-size: 1.2rem;
  font-family: var(--default-font-sb);
  display: flex;
  margin-bottom: 0;
  align-items: center;
}

.college.tabular-view.E-services .card {
  border: 1px solid #D9D9D9;
  margin-bottom: 1.8rem;
}

.college.tabular-view.E-services .nav li:first-child a.nav-link::before {
  background-image: url("/themes/uoj_theme/media/e-globe.svg");
}

.college.tabular-view.E-services .nav li:nth-child(2) a.nav-link::before {
  background-image: url("/themes/uoj_theme/media/e-uni.svg");
  filter: brightness(0) saturate(100%) invert(80%) sepia(28%) saturate(5053%) hue-rotate(313deg) brightness(88%) contrast(90%);
}

.college.tabular-view.E-services .nav li:nth-child(3) a.nav-link::before {
  background-image: url("/themes/uoj_theme/media/e-employee.svg");
  filter: brightness(0) saturate(100%) invert(45%) sepia(65%) saturate(4642%) hue-rotate(149deg) brightness(99%) contrast(90%);
}

.college.tabular-view.E-services .nav li:nth-child(4) a.nav-link::before {
  background-image: url("/themes/uoj_theme/media/e-card.svg");
  filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(3586%) hue-rotate(331deg) brightness(72%) contrast(97%);
}

.college.tabular-view.E-services .nav li:nth-child(5) a.nav-link::before {
  content: "";
  background-image: url("/themes/uoj_theme/media/e-users.svg");
  height: 1.6rem;
  width: 1.5rem;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: 0.7rem;
}

.supreme-president .president-informations .president-name,
.agent-cv .agent-name {
  font-size: 1.8rem;
  width: 100%;
  text-align: center;
  margin: auto;
}

.supreme-president .president-informations .position,
.agent-cv .position {
  color: var(--blue-color);
  font-size: 1rem;
  margin-top: .5rem;
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}

.supreme-president .president-informations .position {
  margin-bottom: 1.2rem;
}

.supreme-president .president-informations .description p {
  text-align: center;
}

.agent-cv .card .card-img-top {
  min-height: 25rem;
  height: 25rem;

}

.supreme-president .president-informations .buttons-container .btn {
  border: 1px solid var(--blue-color);
  padding: .8rem 2.3rem;
  color: var(--blue-color);
  border-radius: .5rem;
  margin-bottom: 1rem;
  transition: .3s all ease;
}

.supreme-president .president-informations .buttons-container .btn:hover {
  background-color: rgb(34 176 233 / 19%);
}

.supreme-president .president-informations .buttons-container {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.supreme-president .president-informations .buttons-container .btn.cv {
  background-color: var(--blue-color);
  color: white;
  transition: .3s all ease;
}

.supreme-president .president-informations .buttons-container .btn.cv:hover {
  background-color: var(--blue-color-hover);
  border-color: var(--blue-color-hover);
}

.supreme-president .president-informations p.description {
  line-height: 2.7;
  margin-top: 4rem;
}

.advisors.container {
  padding-top: 0rem;
  padding-bottom: 2rem;
}

.proxies .cards-container,
.advisors .cards-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;

}

.proxies .cards-container .col-lg-3,
.advisors .cards-container .col-lg-3 {
  padding: 0
}

.proxies .cards-container .col-lg-4,
.advisors .cards-container .col-lg-4 {
  padding: 0;
  margin-bottom: 0;
}

.proxies .cards-container .card .card-body,
.advisors .cards-container .card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 1.5rem;
}

.proxies .cards-container .card,
.advisors .cards-container .card,
.agent-cv .card {
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.proxies .cards-container .card:hover img,
.advisors .cards-container .card:hover img {
  transform: scale(1.1);
}

.proxies .cards-container .card .card-img-top,
.advisors .cards-container .card .card-img-top {
  min-height: 15rem;
  height: 12rem;
}

.proxies .cards-container .card .card-img-top img,
.advisors .cards-container .card .card-img-top img {
  height: 100%;
  width: 100%;
  object-position: center;
  object-fit: cover;
  transition: all .3s ease-in-out;

}

.proxies .cards-container .card .card-body .card-title,
.advisors .cards-container .card .card-body .card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0;
  text-align: center;
}

.advisors.mini .cards-container .card .card-body .card-title {
  font-size: 1.2rem;
}

.proxies .cards-container .card .card-body .card-text,
.advisors .cards-container .card .card-body .card-text {
  color: var(--txt-color);
  line-height: 2;
  font-size: 0.9rem;
  width: 80%;
  text-align: center;
}

.proxies .cards-container .card .card-body .social-icons,
.advisors .cards-container .card .card-body .social-icons {
  display: flex;
  align-items: center;
  margin: 1rem 0 0;
}

.cards-container .card .card-body .social-icons .icon.facebook {
  margin-left: 0 !important;
}

.proxies .cards-container .card .card-body .social-icons .icon,
.advisors .cards-container .card .card-body .social-icons .icon {
  margin-left: 1rem;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;

}

.proxies .cards-container .card .card-body .social-icons .icon svg,
.advisors .cards-container .card .card-body .social-icons .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .social-icons .icon svg ellipse,
.advisors .cards-container .col-lg-3:nth-child(4n+1) .card .card-body .social-icons .icon svg ellipse {
  fill: var(--orange-color);
  opacity: 0.2;
  transition: all .3s ease-in-out;
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .social-icons .icon svg path,
.advisors .cards-container .col-lg-3:nth-child(4n+1) .card .card-body .social-icons .icon svg path {
  stroke: var(--orange-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram,
.advisors .cards-container .col-lg-3:nth-child(4n+1) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram {
  fill: var(--orange-color);
  stroke: none;
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .social-icons .icon path#Path_1701,
.advisors .cards-container .col-lg-3:nth-child(4n+1) .card .card-body .social-icons .icon path#Path_1701 {
  fill: var(--orange-color);
  opacity: 0.2;
  transition: .3s all ease;
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .social-icons .icon svg ellipse,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .social-icons .icon svg ellipse {
  fill: var(--purple-color);
  opacity: 0.2;
  transition: all .3s ease-in-out;
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .social-icons .icon.twitter svg path,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .social-icons .icon.twitter svg path {
  fill: var(--purple-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .social-icons .icon svg path,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .social-icons .icon svg path {
  stroke: var(--purple-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram {
  fill: var(--purple-color);
  stroke: none;
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .social-icons .icon path#Path_1701,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .social-icons .icon path#Path_1701 {
  fill: var(--purple-color);
  opacity: 0.2;
  transition: all .3s ease-in-out;
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .social-icons .icon svg ellipse,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .social-icons .icon svg ellipse {
  fill: var(--green-color);
  opacity: 0.2;
  transition: all .3s ease-in-out;
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .social-icons .icon.twitter svg path,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .social-icons .icon.twitter svg path {
  fill: var(--green-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .social-icons .icon svg path,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .social-icons .icon svg path {
  stroke: var(--green-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram {
  fill: var(--green-color);
  stroke: none;
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .social-icons .icon path#Path_1701,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .social-icons .icon path#Path_1701 {
  fill: var(--green-color);
  opacity: 0.2;
  transition: all .3s ease-in-out;
}

.advisors .cards-container .col-lg-3:nth-child(4n+4) .card .card-body .social-icons .icon path#Path_1701 {
  fill: var(--red-color);
  opacity: 0.2;
}

.advisors .cards-container .col-lg-3:nth-child(4n+4) .card .card-body .social-icons .icon svg path#Icon_awesome-instagram {
  fill: var(--red-color);
  stroke: none;
}

.advisors .cards-container .col-lg-3:nth-child(4n+4) .card .card-body .social-icons .icon.twitter svg path {
  fill: var(--red-color);
}



.advisors .cards-container .col-lg-3:nth-child(4n+4) .card .card-body .social-icons .icon svg path {
  stroke: var(--red-color);
}

.advisors .cards-container .col-lg-3:nth-child(4n+4) .card .card-body .social-icons .icon svg ellipse {
  fill: var(--red-color);
  opacity: 0.2;
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn,
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container .btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn:nth-child(2),
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container .btn:nth-child(2) {
  border-right: 1px solid rgba(0, 0, 0, .125);
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container,
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container {
  border-top: 1px solid rgba(0, 0, 0, .125);
  width: 100%;
  display: flex;
  height: 3.5rem;
  align-items: center;
  margin-top: 2rem;
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .buttons-container .btn,
.advisors .cards-container .col-lg-3:nth-child(4n+1) .card .card-body .buttons-container .btn {
  color: var(--orange-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .buttons-container .btn,
.advisors .cards-container .col-lg-3:nth-child(4n+2) .card .card-body .buttons-container .btn {
  color: var(--purple-color);
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .buttons-container .btn,
.advisors .cards-container .col-lg-3:nth-child(4n+3) .card .card-body .buttons-container .btn {
  color: var(--green-color);
}

.advisors .cards-container .col-lg-3:nth-child(4n+4) .card .card-body .buttons-container .btn {
  color: var(--red-color);
}

.proxies {
  padding-top: 0;
  padding-bottom: 2rem;

}

.roles .title {
  font-size: 1.6rem;
}

.roles ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 2rem;

}

.roles ul li {
  list-style-type: none;
  color: var(--txt-color);
  line-height: 2;
  font-size: 1rem;
  position: relative;
  padding: 0 2rem;
  margin-bottom: 1rem;
}



.roles ul li::before {
  content: '';
  position: absolute;
  right: 0;
  background-color: var(--green-color);
  height: .8rem;
  width: .8rem;
  top: 0.6rem;

}

.advisors .col-lg-3 .card {
  margin-bottom: 2rem;
  height: 37rem;
}

.contact-zone.container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.contact-zone .col-lg-6 {
  padding: 0;
}

.contact-zone .col-lg-6:nth-child(2n+1) .card {
  border-right: 10px solid var(--red-color);
}

.contact-zone .col-lg-6:nth-child(2n+2) .card {
  border-right: 10px solid var(--green-color);
}

.contact-zone .col-lg-6 .card .card-body {
  padding: 2rem 1.5rem;
}

.contact-zone .col-lg-6 .card .card-body .card-title {
  font-size: 1.4rem;
  font-weight: 600;

}

.contact-zone .col-lg-6:nth-child(2n+1) svg ellipse {
  fill: var(--red-color);
}

.contact-zone .col-lg-6:nth-child(2n+2) svg ellipse {
  fill: var(--green-color);
}

.contact-zone .col-lg-6 .card {
  position: relative;
}

.contact-zone .col-lg-6:first-child .card {
  margin-bottom: 1.5rem
}



.contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li {
  line-height: 2;
  font-size: 1rem;
  list-style-type: none;
  display: inline-block;
  position: relative;
  color: var(--txt-color);
  margin-bottom: 0.7rem;
  text-align: inherit;
}

.contact-zone .col-lg-6 .card .card-body ul {
  margin-bottom: 0;
}

.contact-zone .col-lg-6 .card .card-body .card-text {
  color: var(--txt-color);
  line-height: 2;
  margin: 2rem 0px 0px;
  width: 100%;

}

.contact-zone .col-lg-6:nth-child(2n+2) .card-body .btn {
  background-color: var(--green-color);
  color: white;
  padding: .7rem 2rem;
  margin-top: 1rem;
  border-radius: 0;
  transition: all .3s ease-in-out;
}

.contact-zone .col-lg-6:nth-child(2n+2) .card-body .btn:hover {
  background-color: var(--green-color-hover);
}

.contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li::before {
  content: '';
  position: absolute;
  right: -2.5rem;
  top: 0.7rem;
  height: .8rem;
  width: .8rem;
  background-color: var(--red-color);
}

.contact-zone .col-lg-6 .card .pattern {
  position: absolute;
  top: 1rem;
  left: 1rem;
  height: 5rem;
  width: 5rem;
}

.contact-zone .col-lg-6 .card .pattern svg {
  width: 100%;
  height: 100%;
}

.president-informations .bottom-section,
.agent-cv .bottom-section {
  display: flex;
  flex-direction: column;
}

.president-informations .bottom-section .nationality {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.president-informations .bottom-section>.level,
.agent-cv .bottom-section>.level,
.president-informations .bottom-section>.nationality,
.agent-cv .bottom-section>.nationality
 {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.president-informations .bottom-section .title,
.agent-cv .bottom-section .title {
  color: var(--txt-color);
  margin-bottom: 0.3rem;
  margin-top: 1.5rem;

}

.president-tabview ul li {
  list-style-type: none;
  display: inline-block;
  color: var(--txt-color);
  font-size: 1rem;
  line-height: 2.2;
  position: relative;
}

.president-tabview {
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.president-tabview .tab-pane {
  padding: 6rem 3rem;

}

.president-tabview .slick-list.draggable .nav-item {
  height: 100%;
  white-space: nowrap;
  margin-bottom: 0;
  height: 5rem;
}

.president-tabview .tab-pane ul li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -2.5rem;
  background-color: var(--blue-color);
  height: 1rem;
  width: 1rem;

}

.president-tabview .tab-content {
  background-color: white;
  height: 100%;
}

.agent-cv {
  display: flex;
  align-items: flex-start;
  padding-top: 4rem;
  flex-direction: column;
  padding-bottom: 4rem;
}

.agent-cv .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.agent-cv .card .social-icons {
  display: flex;
  align-items: center;
}

.agent-cv .card .card-body .social-icons .icon {
  height: 3rem;
  width: 3rem;
  margin-left: 1rem;
  cursor: pointer;
}

.agent-cv .card .card-body .social-icons .icon:last-child {
  margin-left: 0;
}

.agent-cv .card .card-body .social-icons .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.clearFContainer {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.clear-filter span {
  text-decoration: underline;
  color: var(--blue-color);
  cursor: pointer;
}

.agent-cv .col-lg-4 {
  padding: 0;
}

.map-location-details .details-div .details-div-desc {
  padding: 2rem;
  line-height: 2.2;
  color: #585858;
}
.map-container .gotomap {
  position: absolute;
  bottom: 0;
  left: 1rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  background-color: var(--blue-color);
  padding: 1rem 1.5rem;
  transition: all .3s ease-in-out;
}

.map-container .gotomap:hover {
  background-color: #2bc2ff;
}

.map-container .gotomap .icon {
  height: 1rem;
  width: 1rem;
  margin-left: .5rem;
  position: relative;
}

.map-container .gotomap .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: translateY(-3px);
}

.map-container .gotomap span {
  color: var(--white);
  font-size: 0.8rem;
}

a#StudyPlanLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1.4rem 1rem 1.4rem;
  border-top: 1px solid #e5e5e5;
  margin: 0;
  font-size: 1.1rem;
  border-bottom: 1px solid #e5e5e5;
  color: #212529;
  color:var(--blue-color);
}

.accordion-container:nth-child(6n+2) .contact-infos .icon svg ellipse {
  fill: var(--orange-color);
  opacity: .1;
}

.accordion-container:nth-child(6n+3) .contact-infos .icon svg ellipse {
  fill: var(--green-color);
  opacity: .1;
}

.accordion-container:nth-child(6n+4) .contact-infos .icon svg ellipse {
  fill: var(--purple-color);
  opacity: .1;
}

.accordion-container:nth-child(6n+5) .contact-infos .icon svg ellipse {
  fill: var(--purple-color);
  opacity: .1;
}

.accordion-container:nth-child(6n+6) .contact-infos .icon svg ellipse {
  fill: var(--purple-color);
  opacity: .1;
}

.accordion-container:nth-child(6n+2) .contact-infos .icon:hover svg ellipse {
  fill: var(--orange-color);
  opacity: 1;
}

.accordion-container:nth-child(6n+3) .contact-infos .icon:hover svg ellipse {
  fill: var(--green-color);
  opacity: 1;
}

.accordion-container:nth-child(6n+4) .contact-infos .icon:hover svg ellipse {
  fill: var(--purple-color);
  opacity: 1;
}

.accordion-container:nth-child(6n+5) .contact-infos .icon:hover svg ellipse {
  fill: var(--red-color);
  opacity: 1;
}

.accordion-container:nth-child(6n+6) .contact-infos .icon:hover svg ellipse {
  fill: var(--navy-blue-color);
  opacity: 1;
}

.accordion-container:nth-child(6n+1) .pattern ellipse {
  fill: var(--blue-color);
}

.accordion-container:nth-child(6n+2) .pattern ellipse {
  fill: var(--orange-color);
}

.accordion-container:nth-child(6n+3) .pattern ellipse {
  fill: var(--green-color);
}

.accordion-container:nth-child(6n+4) .pattern ellipse {
  fill: var(--purple-color);
}

.accordion-container:nth-child(6n+5) .pattern ellipse {
  fill: var(--red-color);
}

.accordion-container:nth-child(6n+6) .pattern ellipse {
  fill: var(--navy-blue-color);
}

.map-popup .contact-info-zone .icon:hover svg path,
.accordion-container .contact-infos .icon:hover svg path,
.branches .card .card-footer .icon:hover svg path {
  stroke: #fff !important;
}

.accordion-container:nth-child(6n+2) .contact-infos .icon svg path {
  stroke: var(--orange-color);
}

.accordion-container:nth-child(6n+3) .contact-infos .icon svg path {
  stroke: var(--green-color);
}

.accordion-container:nth-child(6n+4) .contact-infos .icon svg path {
  stroke: var(--purple-color);
}

.accordion-container:nth-child(6n+5) .contact-infos .icon svg path {
  stroke: var(--red-color);
}

.accordion-container:nth-child(6n+6) .contact-infos .icon svg path {
  stroke: var(--navy-blue-color);
}

.accordion-container .contact-accordion svg {
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}

.accordion-container .contact-accordion[aria-expanded="true"] svg {
  transform: rotate(0deg);
}

.accordion-container:nth-child(6n+1) .contact-accordion svg path {
  stroke: var(--blue-color);
}

.accordion-container:nth-child(6n+2) .contact-accordion svg path {
  stroke: var(--orange-color);
}

.accordion-container:nth-child(6n+3) .contact-accordion svg path {
  stroke: var(--green-color);
}

.accordion-container:nth-child(6n+4) .contact-accordion svg path {
  stroke: var(--purple-color);
}

.accordion-container:nth-child(6n+5) .contact-accordion svg path {
  stroke: var(--red-color);
}

.accordion-container:nth-child(6n+6) .contact-accordion svg path {
  stroke: var(--navy-blue-color);
}

.accordion-container:nth-child(6n+1) .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container:nth-child(6n+1) .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container:nth-child(6n+1) .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container:nth-child(6n+1) .contact-infos .icon #internet-svgrepo-com #Path_1736 {
  fill: var(--blue-color);
  stroke: none;
}

.accordion-container:nth-child(6n+2) .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container:nth-child(6n+2) .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container:nth-child(6n+2) .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container:nth-child(6n+2) .contact-infos .icon #internet-svgrepo-com #Path_1736 {
  fill: var(--orange-color);
  stroke: none;
}

.accordion-container:nth-child(6n+3) .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container:nth-child(6n+3) .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container:nth-child(6n+3) .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container:nth-child(6n+3) .contact-infos .icon #internet-svgrepo-com #Path_1736 {
  fill: var(--green-color);
  stroke: none;
}

.accordion-container:nth-child(6n+4) .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container:nth-child(6n+4) .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container:nth-child(6n+4) .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container:nth-child(6n+4) .contact-infos .icon #internet-svgrepo-com #Path_1736 {
  fill: var(--purple-color);
  stroke: none;
}

.accordion-container:nth-child(6n+5) .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container:nth-child(6n+5) .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container:nth-child(6n+5) .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container:nth-child(6n+5) .contact-infos .icon #internet-svgrepo-com #Path_1736 {
  fill: var(--red-color);
  stroke: none;
}

.accordion-container:nth-child(6n+6) .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container:nth-child(6n+6) .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container:nth-child(6n+6) .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container:nth-child(6n+6) .contact-infos .icon #internet-svgrepo-com #Path_1736 {
  fill: var(--navy-blue-color);
  stroke: none;
}

.map-popup .contact-info-zone .icon:hover g#directions-svgrepo-com path#Path_1667,
.map-popup .contact-info-zone .icon:hover g#directions-svgrepo-com path#Path_1668,
.map-popup .contact-info-zone .icon:hover g#directions-svgrepo-com #Path_1669,
.accordion-container .contact-infos .icon:hover g#directions-svgrepo-com path#Path_1667,
.accordion-container .contact-infos .icon:hover g#directions-svgrepo-com path#Path_1668,
.accordion-container .contact-infos .icon:hover g#directions-svgrepo-com #Path_1669,
.branches .card .card-footer .icon:hover g#directions-svgrepo-com #Path_1667,
.branches .card .card-footer .icon:hover g#directions-svgrepo-com #Path_1668,
.branches .card .card-footer .icon:hover g#directions-svgrepo-com #Path_1669 {
  fill: #fff;
  stroke: none;
}

.map-popup .contact-info-zone .icon:hover #internet-svgrepo-com #Path_1736,
.accordion-container .contact-infos .icon:hover #internet-svgrepo-com #Path_1736,
.branches .card .card-footer .icon:hover #internet-svgrepo-com #Path_1736 {
  fill: #fff;
  stroke: none;
}

.map-popup .pattern {
  position: absolute;
  left: 2rem;
  top: 2rem;
}

.contact-us .accordion-container {
  background-color: white;
  position: relative;
  margin-bottom: 1rem;
}

.accordion-container .contact-accordion {
  padding: 1rem .5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.accordion-container:nth-child(6n+1) .contact-accordion {
  color: var(--blue-color);
}

.accordion-container:nth-child(6n+2) .contact-accordion {
  color: var(--orange-color);
}

.accordion-container:nth-child(6n+3) .contact-accordion {
  color: var(--green-color);
}

.accordion-container:nth-child(6n+4) .contact-accordion {
  color: var(--purple-color);
}

.accordion-container:nth-child(6n+5) .contact-accordion {
  color: var(--red-color);
}

.accordion-container:nth-child(6n+6) .contact-accordion {
  color: var(--navy-blue-color-color);
}

.accordion-container .pattern {
  position: absolute;
  left: 1.5rem;
  top: 1.8rem;
  display: none;
}

.contact-collapse {
  padding: 0 2rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.accordion-container:nth-child(6n+1) .contact-infos .icon:hover svg ellipse{
  fill: var(--blue-color);
  opacity: 1;
}
.contact-collapse .contact-infos {
  background-color: transparent;
  margin: 1.5rem 0 0;
}

.contact-collapse .contact-infos .icon {
  height: 2.5rem;
  width: 2.5rem;
}

.contact-collapse .contact-infos .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.contact-collapse .contact-infos .icon {
  margin: 0 .5rem;
}

.contact-collapse .contact-infos .icon:first-child {
  margin: 0 0 0 .5rem;
}

.accordion-container .contact-collapse .informations .subtitle {
  color: var(--txt-color);
  margin-bottom: .5rem;
}

.accordion-container .contact-collapse .informations .location {
  font-size: 1rem;
}

.accordion-container .contact-collapse .informations {
  padding-right: 1rem;
}

.accordion-container:nth-child(6n+1) .contact-collapse .informations {
  border-right: 3px solid var(--blue-color);
}

.accordion-container:nth-child(6n+2) .contact-collapse .informations {
  border-right: 3px solid var(--orange-color);
}

.accordion-container:nth-child(6n+3) .contact-collapse .informations {
  border-right: 3px solid var(--green-color);
}

.accordion-container:nth-child(6n+4) .contact-collapse .informations {
  border-right: 3px solid var(--purple-color);
}

.accordion-container:nth-child(6n+5) .contact-collapse .informations {
  border-right: 3px solid var(--red-color);
}

.accordion-container:nth-child(6n+6) .contact-collapse .informations {
  border-right: 3px solid var(--navy-blue-color);
}

.branches .card-footer {
  background-color: transparent;
  display: flex;
  align-items: center;
  padding: .5rem 1rem 1.5rem;
  border: none;
}

.branches .card .pattern {
  position: absolute;
  left: 1rem;
  top: 1rem;
  height: 5rem;
  width: 5rem;
  display: none;
}

.branches .card .card-body .card-title {
  color: var(--blue-color);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.branches .card .card-body .card-text {
  color: var(--txt-color);
  margin-bottom: .5rem;
}

.branches .card .card-body .location {
  font-size: .9rem;
}

.branches .card .pattern svg {
  height: 100%;
  width: 100%;
}

.branches .card-footer .icon {
  height: 2.5rem;
  width: 2.5rem;
  display: block;
  margin: 0 0.4rem;
}

.branches .card-footer .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.right-section .card .rating .star {
  background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star-empty.svg");
  height: 1.8rem;
  width: 1.8rem;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 .2rem;
}

.profile.container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  margin-top: 3rem;
}

.profile .right-section {
  border: none;
  padding: 0;
}

.profile .left-section.col-lg-9 {
  padding: 0;
}

.right-section .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 10px solid var(--blue-color);
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, .125);
}

.right-section .card .pattern {
  position: absolute;
  left: 0rem;
  top: .7rem;

}

.right-section .card .profile-img {
  overflow: hidden;
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  margin-top: 2.5rem;
}

.right-section .card .profile-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: none;
}

.right-section .card .name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 1rem;
  text-align: center;
  width: 80%;
}

.right-section .card .position {
  margin: .5rem auto;
  color: var(--txt-color);
}

.right-section .card .contact-zone {
  padding: 0;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.right-section .card .contact-zone .icon {
  margin: 1rem .3rem 0 .3rem;
  background-color: #22b0e942;
  border-radius: 50%;
  padding: 0.5rem;
  position: relative;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
}

.right-section .card .contact-zone .icon.website,
.right-section .card .contact-zone .icon.linkedin {
  padding: 0.1rem;
}

.right-section .card .contact-zone .icon:hover {
  background-color: var(--blue-color);
}

.right-section .card .contact-zone .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.right-section .card .contact-zone .icon:hover svg path {
  stroke: #fff;
}

.right-section .card .contact-zone .icon.instagram:hover svg path {
  fill: none;
  stroke: none;
}

.right-section .card .contact-zone .icon:hover svg #insta-footer-logo {
  fill: #fff;
}

.right-section .card .review-cv {
  display: flex;
  padding: 1.5rem 0;
  border-top: 1px solid #8080802b;
  justify-content: center;
  width: 100%;
}

.right-section .card .review-cv span {
  color: var(--blue-color);
  transition: all .3s ease-in-out;
  cursor: pointer;
}

.right-section .card .review-cv:hover {
  transition: all .3s ease-in-out;
}

.right-section .card .review-cv:hover span {
  color: var(--blue-color-hover);
}

.right-section .card .review-cv .icon {
  height: 1.8rem;
  width: 1.2rem;
  margin-left: .7rem;

}

.right-section .card .review-cv .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: translateY(-3px);

}

.profile .left-section .card {
  margin-bottom: 1rem;
  border-radius: .5rem;
}

.profile .left-section .card:last-child .card-body {
  padding: 0;
}

.profile .left-section .card .card-header {
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}



.profile .left-section .card .labels {
  display: flex;
  align-items: flex-start;
}

.profile .left-section .card .labels .label:first-child {
  background-color: #00baff40;
  padding: 0.4rem 0.8rem;
  border-radius: .3rem;
  color: var(--blue-color);
  font-size: 0.9rem;

}

.profile .left-section .card .labels .label:last-child .icon svg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.left-section .card-header .card-title {
  font-size: 1.4rem;
  font-weight: 600;
}

.profile .left-section .card .infos-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem;

}

.profile .left-section .card .infos-container .information {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  white-space: nowrap;

}
.profile .left-section .card .infos-container .information .description{
  text-wrap:wrap;
}
.profile .left-section .card .infos-container .information:not(:last-child) {
  margin-bottom: 2rem;
}

.profile .left-section .card .infos-container .information .title {
  color: var(--txt-color);
  font-size: 1rem;
  margin-bottom: .5rem;
}
html .profile .left-section .card .nav-tabs{
  justify-content: unset!important;
  padding: 0 4rem;
}
.profile .left-section .card .nav-tabs,
.agent-profile .tabs-wrapper .nav-tabs {
  padding: 1.2rem 4rem;
  border-bottom: 1px solid #eeeaea;
}

.profile .left-section .card .nav-tabs .nav-item .nav-link {
  background-color: transparent;
  padding: 0;
  color: var(--txt-color);
  position: relative;
  transition: all .3s ease-in-out;
}

.agent-profile.profile .nav-tabs .nav-link {
  display: flex;
  justify-content: center;
  padding: 0;
}
.agent-profile.profile .swiper-slide-active a{
  color:var(--blue-color);
}
.profile .left-section .card .nav-tabs .nav-item .nav-link.active {
  color: var(--txt-color);
}
  .profile .left-section .card .nav-tabs .nav-item .nav-link{
    padding:1rem 0;
  }
.profile .left-section .card .nav-tabs .nav-item:first-child .nav-link {
  margin-right: 0;
}

.profile .left-section .card .nav-tabs .nav-item.slick-active.slick-current .nav-link {
  color: var(--blue-color);
  border-top: none;
}



.profile .left-section .card .tab-pane {
  margin: 1rem 0;
  padding: 1rem 0;
  width: 100% !important;
}

.profile .left-section .card .tab-pane.slick-current.slick-active {
  display: block;
  opacity: 1!important;
}

.profile .left-section .card .card-body {
  padding: 2rem 1rem;
}

.profile .left-section .card .tab-pane ul {
  list-style-type: none;
  padding-right: 2.5rem;

}

.profile .left-section .card .tab-pane ul li {
  line-height: 2;
  color: var(--txt-color);
  position: relative;
}

.profile .left-section .card .tab-pane ul li::before {
  content: '';
  position: absolute;
  right: -2rem;
  top: 0.85rem;
  height: .8rem;
  width: .8rem;
  background-color: var(--blue-color);
}
.right-section .work-hours .officeworkHours .schedule {
  display: inline;
  text-align: center;
  font-size: 1rem;
  width: max-content;
  padding: 1rem;
  padding-right: 0;
}
.right-section .work-hours .officeworkHours .schedule>div{
  display: flex;
  align-items: baseline;
}
.right-section span.header {
  text-align: right;
  color: var(--txt-color);
  border: none;
  font-weight: 500;
  border-bottom: 1px solid #dee2e6;
  padding: 0.75rem 0rem;
  width:50%;

}
.right-section span.header:first-child{
  padding-right: 1rem;
  padding-left: 1rem;
}
.right-section .schedule span {
  border: none;
 padding: 1.7rem 1rem;
 width: 50%;
}
.work-hours span#officeHoursEmpty{
  width:100%
}
.right-section table td.schedule .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 .3rem;
}

.right-section .card.work-hours {
  border-top: 1px solid rgba(0, 0, 0, .125);
  overflow: hidden;
  align-items: initial;
}

.right-section .card {
  margin-bottom: 1rem;
}

.right-section .card.work-hours .card-title {
  font-size: 1.4rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  font-weight: 600;
}

button.input-group-text.dept-search {
  background-color: var(--blue-color);
  border-radius: 0;
}

button.input-group-text.dept-search span {
  color: white;
  margin-left: 0.7rem;
}

.search.input-group .form-control {
  border-radius: 0;
  padding: .6rem 1rem;
  border: none;
}

.search.input-group {
  padding-bottom: 3rem;
  z-index: 2;
}

.result-body .card:hover .card-title {
  color: var(--blue-color);
}

.result-body .card {
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.result-body .card .card-img {
  width: 100%;
  height: auto;
}

.result-body .card .card-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.associates-tiles.spinner-border.result {
  position: absolute;
}

#SearchLoadMore,
#UniversityPoliciesLoader {
  display: none;
  margin: 1rem auto;
}

li.nav-item.has-child ul {
  padding-right: 0;
}

li.nav-item.has-child ul.show {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

li.nav-item.has-child ul li.nav-item div.head {
  justify-content: flex-start;
  align-items: start;
}

#sectors .nav-link {
  margin-right: 2rem;
}

.profile .left-section .card {
  border: 1px solid rgba(0, 0, 0, .125);
}

.news-advertisements .tab-pane {
  width: 100% !important;
}

.functional-competitions .card {
  overflow: hidden;
  height: 25rem;
}

.established-initiatives .accordion .card .category {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--blue-color);
  color: white;
  z-index: 1;
  padding: .5rem 2rem;
}

.contact-us .map-container .leaflet-popup-content-wrapper {
  display: flex;
  align-items: center;
}

.details-panel .tabs {
  display: flex;
  flex-wrap: wrap;
}

.details-panel .tabs .card .card-title {
  color: var(--txt-color);
  font-size: 1.1rem;
  min-width: fit-content;
}

.details-panel .tabs .card .card-text {
  color: var(--black-color);
  font-size: 1rem;
}

.details-panel .tiles .col-lg-4:nth-child(3n+1) {
  padding-right: 0;
}

.details-panel .tiles .col-lg-4:nth-child(3n+3) {
  padding-left: 0;
}

.details-panel .labels {
  display: flex;
  align-items: center;
  padding: 0 1rem 1rem;
}

.details-panel .labels .label {
  display: flex;
  align-items: baseline;
  padding: .5rem 1.5rem;
  font-size: .8rem;
  margin-left: 1rem;
}

.details-panel .labels .label:first-child {
  background-color: #00baff40;
  color: var(--blue-color);
}

.details-panel .labels .label:last-child {
  border: 1px solid lightgray;
}

.details-panel .labels .label:last-child .icon {
  margin-left: .4rem;
  height: 1rem;
  width: 1rem;
}

.details-panel .labels .label:last-child .icon img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.details-panel .card-img-overlay {
  display: none !important;
}

.details-panel .side-panel .card-img-overlay {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  border: 1px solid white;
  height: fit-content;
  width: fit-content;
  padding: 0.3px .7rem;
  left: 4rem;
  right: auto;
  top: 3rem;
  z-index: 75;
}

.details-panel .side-panel {
  position: relative;
  padding-bottom: 4rem;
}

.details-panel .side-panel .card-img-overlay .from,
.details-panel .side-panel .card-img-overlay .to {
  color: white;
  font-size: .7rem;
}

.details-panel .side-panel .card-img-overlay .icon svg {
  margin: 0 .5rem;
  height: .7rem;
  width: .7rem;
  position: relative;
}

.details #detailsTitle {
  margin-bottom: 0;
  font-size: 1.4rem;
}

.details #detailsCoordinates {
  line-height: 2.2;
  font-size: 1rem;
  color: var(--txt-color);
}

.map-location-details .details-div-options {
  padding: 1rem 2rem;
  border-top: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.map-location-details .details-div-options a:not(:last-child) {
  margin-left: 1.5rem;
}



.map-location-details .details-div .details-div-desc {
  padding: 1rem 2rem;
  line-height: 2.2;
  color: #585858;
}

.map-location-details .details-div-options a svg {
  width: 3rem;
  height: 3rem;
}

.map-location-details .details-div .close-btn {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  opacity: 1;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
  transition: .3s all ease;
  cursor: pointer;
  height: 2.8rem;
  width:2.8rem;
}

.map-location-details .details-div .close-btn svg {
  width: 100%;
  height: 100%;
  object-fit:cover;
}


.map-location-details .details-div .close-btn:hover {
  opacity: .7;
}

.work-hours span {
  color: var(--txt-color);
  width: 50%;
  padding: 1.4rem 1rem;
}
.work-hours .schedule .from,
.work-hours .schedule .to{
  text-wrap: balance;
  font-size: .9rem;
}
.work-hours .schedule .icon{
  align-items: center;
  justify-content: center;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty .icon {

  height: 8rem !important;

  width: 8rem !important;

  margin-bottom: 1rem;

}

.empty .icon img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}

.empty .message-title {

  font-weight: 600;

  margin-bottom: 0.5rem;

}

.empty .message-txt {

  color: var(--txt-color);

  font-size: .8rem;

}

.details-panel .img-holder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(0 0 0 / 40%);
  z-index: 60;
}

.details-panel .img-holder {
  position: relative;
}

.f-services .spinner-border {
  right: 45%;
  position: relative;
  z-index: 3;
  margin-top: 5rem;
  margin-bottom: 2rem;
  display: none;
}

.faq-loader.spinner-border {
  position: relative;
  right: 50%;
  display: none;
}

.submit-button {
  border: none;
  outline: none;
}

.open-data-iframe {
  height: 50vh;
}

.about-swiper-section .card .icon {
  height: 3rem;
  width: 3rem;
}

.about-swiper-section .card .icon img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

p.contact-mail.container a {
  color: var(--blue-color);
  margin-right: .5rem;
  font-weight: 500;

  transition: all .3s ease-in-out;
}

p.contact-mail.container a:hover {
  color: var(--blue-color-hover);
}

p.contact-mail.container {
  font-weight: 600;
  font-size: 1.3rem;
  margin: 1.3rem 0;
}

.login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: white;
}

.login .right-section {
  position: relative;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  height: auto;
  background: linear-gradient(196deg, #22B0E9, #187396, #013874, #77478E);
}

.login .right-section h4.title {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 1.5rem;
  margin-top: 4rem;
}

.login .right-section p.description {
  color: white;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.login .right-section .header .small-logo img {
  height: 4rem;
  width: 4rem;
}

.login .right-section .header .long-logo img {
  width: 11rem;
  height: 4.5rem;
  object-fit: contain;
}

.login .right-section img {
  transform: scaleX(1);
}

.login .right-section .header {
  display: flex;
  align-items: center;
}

.login .right-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("/themes/uoj_theme/media/login-pattern.png");
  background-size: 100%;
  background-position: left bottom;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.login .left-section {
  padding: 2rem 1rem;
  position: relative;
  height: auto;
  overflow: auto;
  background-color: white;
}

.login .left-section form {
  width: 100%;
  position: relative;
}

.login .left-section form input {
  position: relative;
  width: 99%;
  color: rgb(35, 31, 32);
  font-weight: 400;
  border: 1px solid rgb(236, 237, 238);
  padding: 12px 20px;
  outline: 0px;
  z-index: 1;
  background: transparent;
}

.login .left-section form .text-box {
  position: relative;
  margin-bottom: 1.5rem;
}

.login .left-section .text-box .input__field:focus {
  border-color: var(--blue-color);
}

.login .left-section form button {
  background-color: var(--blue-color);
  transition: all .3s ease-in-out;
  padding: 0.9rem 2.1rem;
  color: white;
  font-family: 'Cairo';
  font-size: 1rem;
}

.login .left-section form button:hover {
  background-color: var(--blue-color-hover);
}

.left-section .header {
  display: flex;
  align-items: center;
}

.left-section .header img {
  height: 3rem;
  width: 3rem;
  margin-left: 1rem;
}

.left-section .header .title {
  font-size: 1.4rem;
  font-weight: 600;
}

.left-section .body .choice-change {
  margin: 2rem auto;
  text-align: center;
  position: relative;
  color: var(--txt-color);
}

.left-section .body .choice-change::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 45%;
  top: .7rem;
  right: 0;
  background-color: lightgray;
}

.left-section .body .choice-change::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 45%;
  top: .7rem;
  left: 0;
  background-color: lightgray;
}

.left-section p.description {
  margin: 1.2rem 0;
  width: 100%;
}

.left-section form:last-child button {
  background-color: var(--green-color);
  transition: var(--transition);
}

.left-section form:last-child button:hover {
  background-color: var(--green-color-hover);
}

.left-section .title-section {
  display: flex;
  align-items: center;
}

.left-section .title-section .title {
  font-size: 1.4rem;
  font-weight: 600;
}

.left-section .title-section img {
  height: 2.5rem;
  width: 2.5rem;
  margin-left: 1rem;
}

.left-section .text-box .input__label {
  color: rgb(106, 121, 137);
  cursor: text;
  position: absolute;
  top: 3.6px;
  right: 20px;
  padding: 10px 5px;
  font-size: .9rem;
  background-color: white;
  z-index: 0;
  transition: var(--transition);
}

.left-section .text-box .input__field:focus+.input__label,
.left-section .text-box .input--filled {
  transform: translate3d(0px, -24px, 0px);
  background: white;
  color: var(--blue-color);
  font-size: 0.8rem;
  z-index: 1;
}

.login .left-section form .input__label.input-has-value {
  transform: translate3d(0px, -24px, 0px);
  font-size: 0.8rem;
  background-color: white;
  z-index: 1;
}

.college.tabular-view.E-services .nav li a.nav-link {
  padding: 1.5rem 3.8rem;
  margin: 0rem;
  background-color: #f2f2f2;
  color: #3a3a3a;
}

.E-services li.nav-item {
  margin-left: 0.5rem !important;
}

.image-container .social-icons .icon:hover path#path1009 {
  stroke: white;
  fill: white;
}

.image-container .social-icons .icon path {
  transition: all .3s ease-in-out;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:hover svg ellipse {
  opacity: 1
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:nth-child(3n+1):hover svg path {
  stroke: white;
  fill: white;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:nth-child(3n+2):hover svg path#Icon_awesome-instagram {
  fill: white;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:hover svg path {
  stroke: white;
}

.proxies .cards-container .col-lg-4:nth-child(3n+1) .card .card-body .social-icons .icon:hover path#Path_1701 {
  fill: var(--orange-color);
  opacity: 1;
}

.proxies .cards-container .col-lg-4:nth-child(3n+2) .card .card-body .social-icons .icon:hover path#Path_1701 {
  fill: var(--purple-color);
  opacity: 1;
}

.proxies .cards-container .col-lg-4:nth-child(3n+3) .card .card-body .social-icons .icon:hover path#Path_1701 {
  fill: var(--green-color);
  opacity: 1;
}
.beta-ribbon {
  width: 100%;
  background-color: #c5285a;
  text-align: center;
  padding: 0.5rem 0;
  color: white;
  position: relative;
  z-index: 5;
  display: none;
}

.aca-filter .dropdown::after {
  content: '';
  background-image: url('/themes/uoj_theme/media/chevron-down-green.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  left: 1rem;
  top: 1.4rem;
  height: 0.7rem;
  width: 0.7rem;
  position: absolute;
}

#PoliciesContentTab {
  opacity: 1 !important;
  width: 100%;
}

.android path {
  fill: white;
}

.care-tiles span.no-result {
  text-align: center;
  width: 100%;
  display: block;
}

.survey-form-container {
  background-color: white;
}

.form-required::before {
  content: '*';
  color: red;
  margin-left: .1rem;
}

.college .slick-track {
  display: flex;
}

.college .tabular-view {
  overflow: hidden;
}

.services-container::before {
  content: "";
  position: absolute;
  left: 0rem;
  top: 0;
  background-color: white;
  height: 100%;
  width: 1rem;
  z-index: 2;
}

.services-container::after {
  content: "";
  position: absolute;
  right: 0rem;
  top: 0;
  background-color: white;
  height: 100%;
  width: 1rem;
  z-index: 2;
}

.reader #rsmpl_container .rs-player-loadindicator,
.reader .rsbtn .rs-player-loadindicator {
  left: 0 !important;
  right: 0;
  width: 100%;
}
.dropdown-menu-container {
  position: relative;
}
.quick-links .swiper-wrapper {
  height: 100%;
  width:80%;
  position: relative;
  align-items: center;
}

.poll-view-form .submit-button {
  background-color: var(--blue-color);
  color: white;
  padding: .8rem 2rem;
  margin: 0 1.5rem;
}

.services-container .swiper-pagination {
  bottom: -2.5rem !important;
  z-index: 3;
}

.services-container .swiper-slide[aria-label="1 / 1"] {
  width: 100% !important;
}

.quick-links.swiper .swiper-button-prev {
  height: 2rem;
  width: 2rem;
  display: none;
  right: 10.4rem;
  top: 2.6rem;
  transform: scaleX(-1) translate(0);
}

.quick-links.swiper .swiper-button-next {
  height: 2rem;
  width: 2rem;
  left: 5rem;
  top: 2.6rem;
  transform: translate(0);
  display: none;
}

.quick-links .swiper-button-prev.swiper-button-disabled,
.quick-links .swiper-button-next.swiper-button-disabled {
  display: none !important;
}

.quick-links .swiper-button-prev svg,
.quick-links .swiper-button-next svg,
.quick-links .swiper-button-prev svg g,
.quick-links .swiper-button-next svg g{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.mobile-menu nav.navbar {
  padding: 0;
}
.mobile-menu .nav-item .nav-link {
  padding: 1.5rem 2rem;
}
.mobile-menu .nav-item .nav-link:hover,
.sec-menu-container .nav-item a:hover,
.mobile-menu .nav-item .dropdown-toggle:hover {
  color: var(--blue-color);
}

.mobile-menu .nav-item .nav-link:hover,
.sec-menu-container .links-container .nav-item a:hover,
.mobile-menu .nav-item .dropdown-toggle:hover {
  background-color: #fbfafa;
}
.nav-item .nav-link:hover{
  color: var(--blue-color);
}
.mobile-menu .navbar .dropdown .dropdown-menu a.dropdown-item {
  border: none;
}

.mobile-menu .navbar .dropdown-menu {
  background-color: transparent;
}

.news-advertisements.container .items a:nth-child(n+2) {
  display: none;
}

.company-thumbnail::after {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  left: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(0deg, rgb(0 0 0 /29%), rgb(0 0 0 / 8%));
}

.sec-menu-container {
  position: fixed;
  background-color: white;
  width: 100%;
  height: calc(100vh - 4.1rem);
  top: 0;
  transform: translateX(-100%);
  transition: all .3s ease-in-out;
  left: 0;
  z-index: 1;
}

.sec-menu-container.active {
  transform: translateX(0%);
}

.sec-menu-container .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0  1rem 0 0rem;
}

.sec-menu-container .sec-layer-information {
  display: flex;
  align-items: center;
  margin: 1rem;
  color: var(--blue-color);
}
.sec-menu-container .sec-layer-information .icon {
  transform: scaleX(-1);
  margin-left: .7rem;
  cursor: pointer;
}
.sec-menu-container .links-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sec-menu-container .nav-item .nav-link {
  color: var(--black-color);
}
.mobile-menu .languages-popup {
  position: fixed;
  bottom: 0;
  right: 1rem;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  border-radius: .5rem;
  background-color: white;
  width: 80% !important;
  margin: auto;
  transform: translateY(100%);
  opacity: 0;
  transition: all .3s ease-in-out;
  z-index: 2;
}

.languages-popup .languages-list {
  padding: 1rem;
  width: 100%;
}

.languages-popup .languages-popup-header {
  font-size: 1.3rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid lightgrey;
  width: 100%;
}
.mobile-menu .languages-popup.active {
  transform: translateY(-5rem);
  opacity: 1;
  display: flex !important;
}
.lang-popup-overlay.active {
  display: block;
}
.lang-popup-overlay {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: #07070759;
}

.mobile-menu .languages-popup .languages-list a.language.active {
  background-color: #f9f9f9;
}

.mobile-menu .languages-popup .languages-list a.language {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--black-color);
  position: relative;
  transition: all .3s ease-in-out;
  border-radius: 0.7rem;
  padding: 1rem 1rem;
}

.mobile-menu .languages-popup .languages-list a.language.active::after {
  content: "";
  background-image: url("/themes/uoj_theme/media/Icon awesome-check.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1.4rem;
  left: 1rem;
  height: 1.5rem;
  width: 1.5rem;
}

.mobile-menu .languages-popup .languages-list a.language .icon {
  height: 2rem;
  width: 2rem;
  margin-left: .7rem;
}

.mobile-menu .languages-popup .languages-list a.language .icon img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.tab-pane .e-service-cards{
  padding-left: 1rem;
  padding-right: 1rem;
}
.quick-links-container{
  display: flex;
  align-items: center;
  background-color: white;
}

.quick-links.swiper::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0rem;
  top: 0;
  height: 100%;
  background: linear-gradient(45deg, white, transparent);
  width: 1rem;
  display: none;
}

.quick-links.swiper::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0rem;
  top: 0;
  height: 100%;
  background: linear-gradient(45deg, white, transparent);
  width: 1rem;
}
  .contact-section-informations{
    display: flex;
    padding-right: 1rem;
    padding-left: 1rem;
    margin: 0;
  }
  .col-lg-7.contact-us{
    padding: 0;
  }
  .contact-section-informations .col-lg-5 h2.section-title{
    margin: 0;
    text-align: right;
  }
  .contact-information-zone .cinformation{
    display: flex;
    align-items: baseline;
    margin-bottom: 1.5rem;
  }
  .contact-information-zone .cinformation a{
    color: var(--blue-color);
    transition: all .3s ease-in-out;
  }
  .contact-information-zone .cinformation a:hover{
    color: var(--blue-color-hover);
  }
  .contact-information-zone .cinformation .icon{
    height:1.5rem;
    width: 1.5rem;
    margin-left: .7rem;
  }
  .contact-information-zone .cinformation .icon img{
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .contact-section-informations .map-container{
    overflow: hidden;
  }
  .contact-section-informations .map-container #map{
    height: 70vh;
    width: 100%;
  }
  .quick-links-container{
    display: flex;
    align-items: center;
  }
  .contact-section-informations .col-lg-5 p.description {
    margin-bottom: 4rem;
}
.contact-section-informations .col-lg-5 .ctopic{
  font-weight: 600;
  margin-left:.7rem;
  font-size: 1rem;
  color: var(--black-color);
}
.emerg-services ul li{
  position: relative;
  display: flex;
  font-size: 1rem;
  margin-bottom: 1.5rem;
 
}
.emerg-services ul li .ctopic{
  font-weight: 600;
  margin-left: 1rem;
  color: var(--black-color);
}
.emerg-services ul li a{
  color: var(--blue-color);
  transition: all .3s ease-in-out;
}
.emerg-services ul li a:hover{
  color: var(--blue-color-hover);
}
.emerg-services ul li::before{
  content:"";
  position: absolute;
  height: 1rem;
  width: 1rem;
  background-color: var(--blue-color);
  top: 0.3rem;
  right: -2rem;
}
.university-services .emerg-tabs .nav-item .nav-link{
  display: flex;
  align-items: center;
  justify-content: center;
}
.university-services .emerg-tabs .nav-item .nav-link .icon{
  height: 1.5rem;
  width: 1.5rem;
  margin-left: .7rem;
  display: none;
  filter: grayscale(1);
}
.university-services .emerg-tabs .nav-item .nav-link.active .icon{
  filter: grayscale(0);
}
.university-services .emerg-tabs .nav-item .nav-link .icon svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.established-initiatives .accordion .card{
  cursor: pointer;
}
.steps-app .read-more-container{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.enrollment-section .col-lg-6 .card .card-image::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 60%);
}
.emerg-services{
  padding: 1rem;
}
.associates-tiles .fade-up{
  opacity: 1!important;
}
input[type="date"].no-content:before {
  content: 'MM/DD/YYYY' !important;
}
input[type="date"]:focus.no-content:before {
  content: '' !important;
}
input[type="date"] {
  display: flex;
}
.contact-section-informations.informations-contact{
  background-color:white;
  border-bottom: 1.5px solid #eaeaea;
}
.contact-section-informations.informations-contact .map-container #map{
  height: 40vh;
}
.contact-section-informations.informations-contact .section-title{
  padding: 2rem 0 0;
  font-family: 'Cairo-sb';
}
.contact-section-informations.informations-contact .contact-information-zone{
  font-size: 1.1rem;
}
.contact-section-informations{
  background-color: white;
}
.mobile-menu .first .sec-menu .nav-item:last-child{
  display: block;
}
.contact-us .services .service a.start.no-click{
  cursor: no-drop;
}
.leaflet-popup::before {
  content:"";
  position:absolute;
  left: -0.5rem;
  background-color:white;
  height:1rem;
  width:1rem;
  top:36%;
  transform:rotate(45deg);
}
.leaflet-popup-tip-container{
  display: none;
}
a#LoginMobileView:hover {
  background-color: #EBEBEB;
}
.tab-pane.pbi{
  padding:0 !important;
}
/* FEEDBACK SECTION */
 /* LAST UPDATED June,7 2023 */

  /* Feeback v2 Section */
  
  .feedback-v2 .feedback-section{
    position: relative;
    width: 100%;
    background-color: white;
  }
  .feedback-v2 .rating,.feedback-v2 .feedback-ques{
    padding: 0;
  }
  .feedback-v2 .rating {
    border-top: 8px solid var(--navy-blue-color);
  }
  .feedback-v2 .feedback-ques{
    border-top: 8px solid var(--green-color);
    transition: transform 0.5s ease;
    transform: translateY(0);
    position: relative; 
    z-index: 2;
    background-color: white;
  }
  .feedback-v2 .feedback-ques .closebtn{
    margin-right: auto;
    display: none;
    position: relative;
    z-index: 1;
    float: left;
    border: 0;
    padding: 1rem;
    transition: opacity 0.3s ease;
    background-color: transparent;
  }
  .feedback-v2 #Line_135, .feedback-v2 line#Line_136 {
    stroke: black;
  }
  
  .feedback-v2 .feedback-ques .closebtn:hover{
    opacity: 0.4;
  }
  .feedback-v2 .feedback-ques.opened .closebtn{
    display: inline-block;
  }
  
  .feedback-v2 .col-md-6 > div{
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    height: 100%;
  }
  
  .feedback-v2 .feedback-ques.opened > div{
    border-right: 1px solid #dedede;
    
  }
  .feedback-v2 .rating > div{
    border-left: 1px solid #dedede;
  }
  .feedback-v2 .rating > div::before{
      content: url(/themes/uoj_theme/media//about-s2-t1.svg);
      position: absolute;
      left: 1rem;
      top: 0;  
  }
  
  .feedback-v2 .feedback-ques > div::before{
    content: url(/themes/uoj_theme/media//about-s2-t2.svg);
    position: absolute;
    left: 1rem;
    top: 0;
  }
  
  .feedback-v2 .title{
    font-family: var(--default-font-b);
    margin-bottom: 2rem;
  }
  .feedback-v2 .feedback-buttons li a{
    border-radius: 99rem;
    background-color: transparent;
    padding: 0.5rem 1.75rem;
    border: 1px solid #dedede;
    margin-left: 1rem;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
  }
  .feedback-v2 .feedback-buttons li a.active{
    background-color: #0DA29012;
    border-color: var(--green-color);
  }
  .feedback-v2 .feedback-buttons li:hover a{
    background-color: #0DA29012;
    border-color: var(--green-color);
  }
  
  
  .feedback-v2 .feedback-ques  .tab-content .title{
    margin-top: 4rem;
  }
  .feedback-v2 .published-time{
    border-top: 1px solid #e8e8e8;
    background-color: #FAFAFA;
    display: flex;
    padding-top:1rem;
    padding-bottom: 1rem;
    z-index: 2;
    align-items: center;
  }
  .published-time svg{
    position: absolute;
    left: 1rem;
    right: auto;
    display: none;
  }
  .published-time span svg{
    position: relative;
    left: unset;
    right: unset;
    display: block;
  }
  .feedback-v2 .published-time p{
    color:#484848;
    margin-bottom: 0;
    font-size: 0.8rem;
  }
  .feedback-v2 .published-time  span{
    margin-left: 1rem;
  }
   .rating-text{
    color: #777777;
    font-size: 0.8rem;
    margin: 1rem 0 0;
  }
  
  input[type="checkbox"] {
    scale: 1.2;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 1rem;
    border-radius: 2px;
  }
  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 77%;
    background-color: var(--green-color);
    border-color: var(--green-color);
  }
  .reason-option{
    margin-bottom: 1rem;
    font-size: 0.85rem;
  }
  .btn.disabled{
    opacity: 0.35;
    pointer-events: none;
  }
  .send-review{
    padding: 0.5rem 1.5rem;
    background-color: var(--green-color);
    border-color: var(--green-color);
    transition: all 0.3s ease;
    border-radius: 0;
    color: white;
    margin-top: 2rem;
    font-family: var(--default-font);
  }
  .send-review:hover{
  background-color:#096c60;
  border-color: #096c60;
  color: white;
  }
  .another-reason-smile,.another-reason-sad{
    display: none;
    border-bottom: 2px solid #e5e5e5;
  }
  .another-reason-smile input,.another-reason-sad input{
    background-color: transparent;
    border: 0;
  }
  .another-reason-smile input:focus,.another-reason-sad input:focus{
    outline: none;
  }
  .feedback-ques .submitted{
    display: flex;
    align-items: center;
    height: 3rem;
    margin-right: -1rem;
  }

  .feedback-ques .submitted .message{
    color: #5F5F5F;
    margin: 0;
  }
  .feedback-v2 lottie-player{
    height: auto !important;
  }
  /* Star animations and styles */
    .rating__display {
      font-size: 1em;
      font-weight: 500;
      min-height: 1.25em;
      position: absolute;
      top: 100%;
      width: 100%;
      text-align: center;
    }
    .rating__stars ,.feedback-v2 .feedback-buttons{
      display: flex;
      position: relative;
      align-items: center;
      flex-wrap: nowrap;
    }
    .rating__star {
      display: block;
      overflow: visible;
      pointer-events: none;
      width: 2em;
      height: 2em;
    }
    .rating__star-ring, .rating__star-fill, .rating__star-line, .rating__star-stroke {
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
    }
    .rating__star-ring, .rating__star-fill, .rating__star-line {
      stroke: var(--dark-blue);
    }
    .rating__star-fill {
      fill: var(--dark-blue);
      transform: scale(0);
      transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier);
    }
    .rating__star-line {
      stroke-dasharray: 12 13;
      stroke-dashoffset: -13;
    }
    .rating__star-stroke {
      stroke: #c7cad1;
      transition: stroke var(--trans-dur);
    }
    .rating__label {
      cursor: pointer;
      padding: 0.125em;
      font-size: 0.9rem;
    }
    .rating__label:last-of-type{
      margin-left:1rem;
    }
    .rating__label--delay1 .rating__star-ring, .rating__label--delay1 .rating__star-fill, .rating__label--delay1 .rating__star-line, .rating__label--delay1 .rating__star-stroke {
      animation-delay: 0.05s;
    }
    .rating__label--delay2 .rating__star-ring, .rating__label--delay2 .rating__star-fill, .rating__label--delay2 .rating__star-line, .rating__label--delay2 .rating__star-stroke {
      animation-delay: 0.1s;
    }
    .rating__label--delay3 .rating__star-ring, .rating__label--delay3 .rating__star-fill, .rating__label--delay3 .rating__star-line, .rating__label--delay3 .rating__star-stroke {
      animation-delay: 0.15s;
    }
    .rating__label--delay4 .rating__star-ring, .rating__label--delay4 .rating__star-fill, .rating__label--delay4 .rating__star-line, .rating__label--delay4 .rating__star-stroke {
      animation-delay: 0.2s;
    }
    .rating__input {
      position: absolute;
      -webkit-appearance: none;
      appearance: none;
    }
    .rating__input:hover ~ [data-rating]:not([hidden]) {
      display: none;
    }
    .rating__input-1:hover ~ [data-rating="1"][hidden], .rating__input-2:hover ~ [data-rating="2"][hidden], .rating__input-3:hover ~ [data-rating="3"][hidden], .rating__input-4:hover ~ [data-rating="4"][hidden], .rating__input-5:hover ~ [data-rating="5"][hidden], .rating__input:checked:hover ~ [data-rating]:not([hidden]) {
      display: block;
    }
    .rating__input-1:hover ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
      stroke: var(--dark-blue);
      transform: scale(1);
    }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-ring, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-ring, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-ring, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-ring, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-ring {
      animation-name: starRing;
    }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke {
      animation-name: starStroke;
    }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-line, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-line, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-line, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-line, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-line {
      animation-name: starLine;
    }
    .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-fill, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-fill, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-fill, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-fill {
      animation-name: starFill;
    }
    .rating__input-1:not(:checked):hover ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:not(:checked):hover ~ .rating__label:nth-of-type(2) .rating__star-fill, .rating__input-3:not(:checked):hover ~ .rating__label:nth-of-type(3) .rating__star-fill, .rating__input-4:not(:checked):hover ~ .rating__label:nth-of-type(4) .rating__star-fill, .rating__input-5:not(:checked):hover ~ .rating__label:nth-of-type(5) .rating__star-fill {
      fill: var(--navy-blue-color);
    }
    .rating__sr {
      clip: rect(1px, 1px, 1px, 1px);
      overflow: hidden;
      position: absolute;
      width: 1px;
      height: 1px;
    }
.result-body .spinner-border.result{
position:absolute;
right:50%;
top: 1rem;
}
    button.resetSearch {
  color: var(--blue-color);
  white-space: nowrap;
  text-decoration: underline;
}
.polls-side-menu .answers-section .result .percentage .text{
    min-width:13%;
}
@media (prefers-color-scheme: dark) {
      :root {
        --bg: #17181c;
        --fg: #e3e4e8;
      }
    
      .rating__star-stroke {
        stroke: #454954;
      }
    }
    @keyframes starRing {
      from, 20% {
        animation-timing-function: ease-in;
        opacity: 1;
        r: 8px;
        stroke-width: 16px;
        transform: scale(0);
      }
      35% {
        animation-timing-function: ease-out;
        opacity: 0.5;
        r: 8px;
        stroke-width: 16px;
        transform: scale(1);
      }
      50%, to {
        opacity: 0;
        r: 16px;
        stroke-width: 0;
        transform: scale(1);
      }
    }
    @keyframes starFill {
      from, 40% {
        animation-timing-function: ease-out;
        transform: scale(0);
      }
      60% {
        animation-timing-function: ease-in-out;
        transform: scale(1.2);
      }
      80% {
        transform: scale(0.9);
      }
      to {
        transform: scale(1);
      }
    }
    @keyframes starStroke {
      from {
        transform: scale(1);
      }
      20%, to {
        transform: scale(0);
      }
    }
    @keyframes starLine {
      from, 40% {
        animation-timing-function: ease-out;
        stroke-dasharray: 1 23;
        stroke-dashoffset: 1;
      }
      60%, to {
        stroke-dasharray: 12 13;
        stroke-dashoffset: -13;
      }
    }
    .rating-text{
      margin-top: 1rem;
    }
    .rating form{
      display: flex;
      flex-direction: column;
    }
    .feedback-v2 .feedback-buttons{
      margin-bottom: 1rem;
    }

    button#zoom-in,button#zoom-out {
      height: 3rem;
      width: 3rem;
      padding: 0.7rem;
  }
  button#zoom-in svg , button#zoom-out svg{
      height:100%;
      width:100%;
      object-fit:cover;
  }
   button#zoom-in{
    border-bottom:1px solid #d6caca;
   }
  .zoom-in-out {
    position: absolute;
    right: 0rem;
    top: -3rem;
    display: none;
    flex-direction: column;
    z-index: 1;
  }
  .card.kaffa-card{
    width: calc(100% - 2rem);
    margin: 0 1rem 2rem;
  }
  .card.kaffa-card .card-img-top img.mobile-image{
    display:block;
  }
  .card.kaffa-card .card-img-top img {
    width: 100%;
    height: auto;
    display: none;
  }
  
  .fixed-button {
    position: absolute;
    bottom: 36%;
    right: 50%;
    transform:translateX(50%);
    z-index: 1;
    padding: 0.3rem 1.6rem;
    border: none;
    font-size: 0.73rem;
    cursor: pointer;
    background-color: white;
    color: #22B0E9;
    font-family: var(--default-font);
    transition: all .3s ease-in-out;
  }
  .fixed-button:hover{
    background-color: var(--blue-color);
    color: white;
}
.swiper-labels.swiper{
  margin: 0;
}
.allratings .rating__star-fill{
  transform:scale(1);
}
.allratings [for="rating-10"] .rating__star-fill,
.allratings [for="rating-14"] .rating__star-fill,
.allratings [for="rating-15"] .rating__star-fill,
.allratings [for="rating-18"] .rating__star-fill,
.allratings [for="rating-19"] .rating__star-fill,
.allratings [for="rating-20"] .rating__star-fill,
.allratings [for="rating-22"] .rating__star-fill,
.allratings [for="rating-23"] .rating__star-fill,
.allratings [for="rating-24"] .rating__star-fill,
.allratings [for="rating-25"] .rating__star-fill{
  transform:scale(0);
}
.university-services .tab-content .slick-track {
  width: 100%!important;
}
.left-section .card .card-body .infos-container .information.description{
  text-wrap: balance;
}
.profile .left-section .card .nav-tabs .nav-item.swiper-slide-active .nav-link {
  color: var(--blue-color);
}
  .news-content.vacancy-details {
    flex-direction: row;
}
.news-content.vacancy-details .news-detail-text{
    width:fit-content;
}
.news-content.vacancy-details .news-detail a.apply-now{
background-color:var(--blue-color);
color:white;
padding:.5rem 2rem;
}
.tabular-view .case-description {
    display: flex;
    flex-direction:column-reverse;
  }
 .View-Form-Table-UJ{
  padding:10rem 1rem 4rem;
}
.View-Form-Table-UJ table,.View-Form-Table-UJ table th,.View-Form-Table-UJ table td{
  border:1px solid lightgray;
  border-collapse:collapse;
}
.View-Form-Table-UJ table td,
.View-Form-Table-UJ table th{
  width: auto;
}
.pager__items{
display:flex;
align-items:center;
}
.pager__items .pager__item{
margin:0 .4rem;
}
.pager__items .pager__item.is-active{
 text-decoration:underline;
color:var(--blue-color);
}
/* COOKIES STYLES START */
.cookiesModal .modal-dialog{
  bottom: 0rem;
  top: auto;
  position: absolute;
  width: 100%;
  border-radius: .5rem;
  overflow: hidden;
  margin:auto;
}
.cookiesModal .modal-dialog .modal-content{
  border-radius:0;
}
.cookiesModal .content-container{
  padding-right: 2.5rem;
  padding-left: 3.5rem;
}
.cookiesModal .modal-content {
   border-radius: 0.625rem;
   text-align: right;
}
.cookiesModal .modal-body {
   font-size: 1rem;

}
.cookiesModal .btn-primary {
   background-color: rgb(0, 190, 254);
   border: none;
   border-radius: 0.6rem;
   padding-right: 2rem;
   padding-left: 2rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
}
.cookiesModal .terms-link a{
   color:rgb(0, 190, 254) ;
   text-decoration: underline;
}
.cookiesModal .btn-primary:hover {
   background-color: #36acfb;
}

.cookiesModal .modal-header {
   border-bottom: none;
}
.cookiesModal .modal-footer {
   border-top: none;
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.5rem;
}
.cookiesModal .modal-body p{
   color: gray;
   text-align: right;
}
.cookiesModal .btn-close {
  border: none;
  background-color: white;
  width: 2.5rem;
  /* height: 0rem; */
  position: absolute;
  left: 1rem;
  top: 1rem;
}
/* COOKIES STYLES END */
@media(max-width:429px){
  .uni-statistics {
  top: 45.8rem;
}
}
@media (max-width: 389px) {
    .uni-statistics {
        top: 46.8rem;
    }
}
@media screen and (min-width: 600px) {
  .old-version {
    top: calc(74.7vh - 2.6rem);
  }

  .uni-statistics {
    top: calc(78.7vh - 2vh);
  }

  .volunteering .nav.nav-tabs li.nav-item a.nav-link {

    font-size: 1rem;
  }

  .accordion-container .contact-accordion {
    font-size: 1.1rem;
  }
  .college.tabular-view .statistic:last-child {
    border-left: none;
  }

  .slick-track {
    margin: auto;
  }

  .tabular-view .tab-content .tab-pane {
    width: 100% !important;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .tabular-view .tab-content .tab-pane.report1,
  .tabular-view .tab-content .tab-pane.report2{
    padding:3rem;
  }
  .tabular-view .nav-tabs .slick-list .slick-track {
    list-style-type: none;
    display: flex;
  }

  .faqs .faq-group .faq-item .header .faq-title,
  .accordions .header .question {
    font-size: 1.4rem;
  }

  .news-advertisements .news-item {
    margin-left: 0px;
    padding-left: 0px;
  }

  .news-advertisements .news-item {
    padding-right: 0px;
  }

  .story .image-container {
    margin-left: 0rem;
  }

  .university-services .tab-pane {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .associates-tiles .card .card-body .informations {
    margin: 0 4rem;
  }

  .associates-tiles .card .card-body .positions .major,
  .associates-tiles .card .card-body .positions .position {
    margin: 0 .5rem;
    padding: 0.5rem 2rem;
  }

  .associates-tiles .card .card-body .positions {
    display: flex;
    justify-content: space-between;

  }
  .associates-tiles .card .card-body .card-title {
    font-size: 2rem;
  }

  .testimonials-container .col-lg-4 {
    margin-bottom: 30px;
  }

  .news-advertisements .news-item {
    padding: 15px;
    display: block;
    height: 29rem;
  }

  .events-side-menu .menu-container {
    width: 32rem;
  }

  .events-side-menu.toggled button.close {
    position: absolute;
    top: 1.5rem;
    left: 33.2rem;
    right: auto;
  }

  .details-panel .close {
    right: -4rem;
    background-color: unset;
    border-radius: unset;
    left: auto;
  }

  .details-panel {
    width: 600px !important;
  }

  .twitter-side-menu button.close {
    right: 15px;
  }

  .twitter-side-menu.toggled {
    width: 32rem;
  }

  .contact-us .branches-otherservices .otherservices .contents.card-columns,
  .contact-us .branches-otherservices .branches .contents.card-columns {
    column-count: 2;
  }

  .uoj-breadcrumb .page a {
    font-size: .9rem;
  }

  .news-advertisements .items {
    flex-flow: row wrap;
  }

  h1.section-title,
  h1.title {
    font-size: 2.5rem;
  }

  .twitter-side-menu,
  .notifications-side-menu .menu-container,
  .weather-side-menu,
  .polls-side-menu {
    width: 32rem;
  }

  .notifications-side-menu button.close,
  .weather-side-menu button.close,
  .polls-side-menu button.close {
    position: absolute;
    top: 1.5rem;
    left: 33.4rem;
    right: auto;
  }

  .news-advertisements .news-item .card-img-top img,
  .achievements .card .card-img-top img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: all 0.6s ease-in-out 0s;
  }

  .shortcuts .open-data .icon svg,
  .shortcuts .map .icon svg,
  .shortcuts .accessibility-services .icon svg {
    width: unset;
  }

  .search svg,
  .accessibility svg,
  .menu svg {
    height: 1.7rem;
  }

  .testimonials .card .card-body {
    padding: 2rem 2rem;
  }



  .uoj-electronic img {
    width: 8rem;
  }

  .headline .content::after {
    content: "";
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 4rem;
    right: -10rem;
    height: 0.2rem;
    width: 8rem;
  }

  .headline .content {
    font-size: 4rem;
  }

  .headline .content .description {
    text-align: left;
    transform: translate(-30%, -20%);
    font-size: 1.4rem;
  }

  .header-pattern {
    display: block;
  }

  .uni-overview .overview-section1 .desc {
    width: 90%;
    justify-content: unset;
    text-align: unset;
    margin: 1.5rem 0px;
  }

  .uni-overview .overview-section1 .info {
    padding-right: 9rem;
    justify-content: unset;
    font-size: 3.4rem;
  }

  .uni-overview .overview-section1 .info::after {
    position: absolute;
    right: 0px;
    background-color: var(--blue-color);
    height: 0.2rem;
    width: 8rem;
    z-index: 1;
    content: "";
    margin-top: 1.2rem;
  }

  .sidebuttons {
    top: 20rem;
  }

  .vertical-line {
    height: 3.6rem;
  }

  .faqs .faqs-search input {
    width: 60%;
  }

  .shortcuts {
    flex-direction: row;
    padding: 3rem 15px;
  }

  .otherservices .contents {
    flex-direction: row;
  }

  .tabular-view .labels .label {
    width: fit-content;
  }

  .submit-buttons {
    flex-direction: row;
  }
}
@media(min-width:768px) {
  .fixed-button {
    bottom: 31%;
    padding: 0.5rem 1.3rem;
    font-size: 1rem;
  }
  .feedback-v2 .published-time p{
    font-size: 1rem;
  }
  .feedback-v2 .feedback-ques{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateY(calc(100% - 12.2rem));
    
}

  .feedback-v2 .feedback-ques.opened{
   transform: translateY(0);
   top: auto;
  } 
  .contact-section-informations.informations-contact .section-title{
    padding: 5rem 0 0;
  }
  .acc-modal .modal-body .txt-size .decrease {
  left: 4.5rem;
}
  .College-sections .card {
    height: 18rem;
  }
  .college .college-annual-report .item a.item-cta{
    font-size: 1rem;
  }
  .goals .card ul li::before {
    content: "";
    right: -1.8rem;
  }

  .steps-app .more-news-btn div {
    margin-left: 1rem;
  }

  .opportunities .swiper-slide .card .footer.buttons .apply-now {
    padding: 0.6rem 2.3rem;
    margin-left: 1rem;
    font-size: 1rem;
  }

  #map {
    height: calc(100vh - 8.6rem);
  }

  .leaflet-top {
    bottom: 0.5rem;
  }
  .col-lg-7 .leaflet-popup{
    opacity: 1!important;
  }
  .dropdown.clicked #clickedValue,
  #clickedFaculty,
  #clickedDepartment,
  #clickedBuilding {
    max-width: 26ch;
  }

  .test {
    top: 9.8rem;
  }

  .map-filter {
    min-width: 15.35rem;
  }

  .tabular-view label span::before {
    width: 15px;
    height: 15px;
  }

  .opportunities-main .swiper.opportunities.availablevacancies .swiper-pagination {
    margin-top: 1rem;
  }
  .agent-profile.profile .nav-tabs .nav-link {
    min-width: 60rem;
  }

  .leaflet-popup-tip-container {
    left: -.6rem !important;
    bottom: 164px !important;
  }

  .details-panel .accordion-group .collapse>span {
    padding: 1rem 2rem;
  }
  .details-panel .accordion-group .collapse p span>span{
    padding: 0!important;
  }
  .ac-prog {
    padding: 0.3rem 2rem;
  }

  .contact-us .leaflet-popup-tip-container {
    top: 4.5rem !important;
  }
  line#Line_135,
  line#Line_136 {
    stroke: white;
  }

  g#Ellipse_27 {
    stroke: white;
  }

  .modal-content g#Ellipse_27,
  line#Line_135,
  line#Line_136 {
    stroke: black;
  }

  .college-programs .programs-container .col-lg-4 {
    min-width: 100%;
    flex: 0 0 100%;
  }

  .swiper-container.tabpane-swiper {
    margin: 0;
  }
  .College-sections .col-lg-4 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .tabular-view .tab-content .tab-pane .col-lg-6 {
    max-width: 100%;
  }


  .content-viewer-alt .research-production .production-thumb img {
    width: 70%;
  }

  .research-production .row {
    flex-direction: column;
  }

  .research-production .col-md-6 {
    max-width: 100%;
  }



  .proxies .cards-container .col-lg-4,
  .advisors .cards-container .col-lg-4 {
    padding: 0 10px;
    margin-bottom: 0;
  }


  .departments .cards-section .col-lg-4.col-md-6,
  .f-services .cards-section .col-lg-4.col-md-6 {
    padding: 0px 10px;
  }


  .filters-container .search-box {
    width: 92%;
  }

  .std-activities .col-lg-4 {
    padding: 0 15px;
  }


  .our-leaders .leaders .swiper-wrapper {
    align-items: center;
  }

  .leaders .swiper-button-prev {
    right: 15.5rem !important;
  }

  .leaders .swiper-slide-prev .card .card-image::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(var(--green-color) 100%, var(--green-color) 100%, var(--green-color) 100%, var(--green-color) 100%);
    z-index: 1;
    height: 100%;
    width: 100%;
    opacity: 1;

  }

  .leaders .swiper-slide-next .card .card-image::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(rgba(211, 123, 96, 1) 100%, rgba(211, 123, 96, 1) 100%, rgba(211, 123, 96, 1) 100%, rgba(211, 123, 96, 1) 100%);
    z-index: 1;
    height: 100%;
    width: 100%;
  }

  .card .icon {
    width: 2rem;
    height: 2rem;
  }

  .functional-competitions h1.title {
    color: white;
    margin-bottom: 3rem;
  }

  .card.partnership {
    height: 20rem;
    width: auto;
  }

  .available-programs .pattern-1,
  .functional-competitions .pattern-1 {
    top: -2rem;
  }
  .news-advertisements .news-item.col-lg-4:last-child {
    display: none;
  }

  .survey-form-container .js-form-item.form-item.js-form-type-radio {
    margin-left: 2rem;
    margin-bottom: unset;
  }

  .result-body .card .card-body .card-text {
    line-height: 2.2;
  }

  .result-body .card .card-body {
    padding: 2rem;

  }

  .result-body .card .card-img {
    width: 25rem;
    height: auto;
    max-height: 15rem;
  }


  .result-body .card {
    flex-direction: row;
  }


  .result-section {
    padding: 4rem 0;
  }

  .contact-zone .col-lg-6 .card .pattern {
    height: auto;
    width: auto;
  }

  .contact-zone .col-lg-6:nth-child(2n+2) .card-body .btn {
    margin-top: 2rem;
  }

  .contact-zone .col-lg-6 .card .card-body .card-title {
    font-size: 1.5rem;
  }


  .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li::before {
    right: -2.5rem;
    top: 0.7rem;
    height: 1rem;
    width: 1rem;

  }

  .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul {
    padding: 0 2rem;

  }

  .contact-zone .col-lg-6 .card .card-body {
    padding: 3rem;
  }

  .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li {
    line-height: 2.2;
    width: 100%;
  }


  .contact-zone .col-lg-6 .card .card-body .card-text {
    line-height: 2.2;
    margin: 3rem 0px 0px;
    width: 90%;

  }
  .contact-zone .col-lg-6 {
    padding: 0 15px;
  }
  #chartdiv {
    margin-bottom: 4rem;
    padding-top: 2rem;
  }
  .open-data-iframe {
    height: 100vh;
  }
  #chart_div {
    height: 400px;
  }
  .right-section table.table.borderless .schedule {
    font-size: .8rem;
  }
  .profile .left-section .card .tab-pane ul li {
    line-height: 2.2;
    margin-bottom: 1rem;
  }

  .profile .left-section .card .tab-pane ul {
    padding-right: 3rem;

  }

  .profile .tab-content {
    padding: 10px 20px;
  }

  .profile .left-section .card .tab-pane ul li::before {
    right: -2.9rem;
    top: 0.7rem;
    height: 1rem;
    width: 1rem;
  }

  .profile .left-section .card .tab-pane {
    margin: 3rem 0;
    padding: 0 2rem;
  }



  .profile .left-section .card .infos-container .information .title {
    font-size: 0.8rem;
    margin-bottom: unset;
  }



  .profile .left-section .card .labels,
  .profile .left-section .card .infos-container {
    padding: 0 1.25rem;
  }

  .profile .left-section .card .labels .label:first-child {
    margin-left: 1rem;
  }


  .left-section .card-header .card-title {
    font-size: 1.5rem;
  }

  .profile .left-section .card .card-header {
    padding: .75rem 1.25rem;

  }
  .right-section .card.work-hours .card-title {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1.4rem;
  }
  .profile .left-section .card .card-body {
    padding: 2rem;
  }


  .right-section .card .review-cv .icon {
    height: 1.7rem;
    width: 1rem;
    margin-left: .5rem;
  }

  .right-section .card .review-cv {
    padding: 1.5rem 0;
  }

  .right-section .card .contact-zone {
    margin-bottom: 3rem;
  }

  .right-section .card .position {
    margin: 1rem auto;
  }

  .right-section .card .profile-img {
    height: 10rem;
    width: 10rem;
    margin-top: 3rem;
  }


  .all-news-container .card .card-text {
    line-height: 2.2;
  }

  .all-news.swiper {
    height: 35rem;
  }

  .gallery-container .mason-item.col-lg-4 {
    max-width: 58%;
    padding: 0 50px;
  }



  .care-tiles.container .col-md-6 {
    padding: 0 15px;
  }

  .proxies .cards-container .col-lg-3,
  .advisors .cards-container .col-lg-3 {
    padding: 0 15px;
  }


  .agency .be-in-contact {
    padding: 3rem 6rem;
  }


  .advisors {
    padding-top: 3rem;
    padding-bottom: 6rem;
  }

  .proxies .cards-container .card .card-img-top,
  .advisors .cards-container .card .card-img-top {
    min-height: 12rem;
    height: 12rem;
  }


  .tabs .nav-tabs {
    display: flex;
  }

  .tabs .nav-tabs .nav-item .nav-link {
    padding: 1rem;
  }

  .tabs .tiles .col-md-6 {
    padding: 0 15px;
  }

  .details-panel .tabs .program-title {
    font-size: 1.2rem;
    margin-right: 2rem;
  }
  .details-panel .accordion-group .accordion-content p {
    padding: 0.5rem 2rem;
    line-height: 2.2;
  }
  .details-panel .apply-link {
    padding: 0 2rem;
  }
  .university-services .tab-pane {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  a#StudyPlanLink {
    font-size: 1.25rem;
    padding: 1.4rem 2rem 1.4rem;

  }

  .library-tabs .tab {
    padding: 2rem;
    width: 100%;
  }

  .season-container .season-body .body-container {
    padding: 2rem 0px;
  }

  .Deanship-agencies .agencies-tiles .col-lg-6:first-child .card:first-child {
    margin-bottom: 1rem;
  }

  .goals .card-text,
  .volunteering .volunteer-tiles .card .card-text,
  .Deanship-agencies .agencies-tiles .card .card-text {
    margin: 2rem 0px;
  }

  .roles ul li::before {
    right: 0rem;
    height: 1rem;
    width: 1rem;
    top: 0.7rem;
  }

  .roles .title {
    font-size: 2rem;
  }

  .filter-table .dropdown button {
    width: auto;
  }

  .filter-table .header .right-section {
    justify-content: unset;
    width: auto;
    margin: 3rem 1rem 0;
  }


  .filter-table .header .right-section .label-count {
    padding: .5rem 1rem;
    margin: 0 1rem;
  }

  .filter-table .header .right-section h3 {
    font-size: 1.75rem;
    margin-bottom: .5rem;
  }


  .filter-table .header {
    flex-direction: row;
    margin-bottom: 3rem;
  }

  .f-services .spinner-border {
    right: 50%;
    margin-top: unset;
  }

  .js-form-item.js-form-type-radio {
    height: 40px;
    flex-flow: row wrap;
  }

  fieldset legend {
    line-height: 2.2;
  }

  .survey-form-container .js-form-item.form-item .webform-section-wrapper .description {
    padding-bottom: 3rem;
    margin: 1.8rem 0 3rem;
  }

  .js-form-item.js-form-type-radio {
    height: 64px;
  }

  .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description) {
    margin: 3rem 0;
  }

  .details-panel .labels .label {
    padding: .7rem 2rem;
  }

  .details-panel .tabs .card .card-title {
    font-size: 1.2rem;
  }

  .details-panel .accordion-group .accordion span {
    font-size: 1.25rem;
  }

  .details-panel .accordion-group .accordion {
    padding: 1.4rem 2rem 1.4rem;
  }

  .details-panel .accordion-group {
    margin-top: 2rem;
  }

  .details-panel .labels {
    padding: 0 2rem;
  }

  .details-panel .spinner-border {
    right: 270px;
  }

  .accordions .accordion-body .card-text {
    flex-direction: row-reverse;
    justify-content: unset;
  }

  .accordion-body .card-img-top {
    height: 18rem;
  }

  .accordions .accordion-body .tiles-container .col-lg-6 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .accordions .accordion-body .tiles-container {
    padding-top: 5rem;
  }

  .accordions .accordion .header .expand {
    width: auto;
    height: auto;
  }

  .accordions {
    margin-top: unset;
  }

  .accordions .accordion {
    padding: 2rem;
    margin: 50px 0;
  }

  .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
  .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
  }

  .volunteering .nav.nav-tabs li.nav-item a.nav-link {
    margin: 0 2rem;
  }

  .volunteering .nav.nav-tabs li.nav-item a.nav-link:hover {
    color: var(--green-color-hover)
  }

  .college.tabular-view.E-services .card .card-text {
    line-height: 2.2;
    margin-bottom: 2rem;
  }

  .college.tabular-view.E-services .card .card-content {
    padding: 2rem 1.5rem;
  }

  .faqs .be-in-contact .secondary-desc {
    font-size: 1rem;
    margin-top: unset;
    line-height: 2.2;
  }

  hr.faq {
    margin: 3rem 4rem;
  }

  .faqs .faqs-search input {
    width: 70%;
  }

  .faqs .faqs-search {
    margin: 5rem 0px;
  }

  .introduction {
    margin-bottom: 4rem;
  }

  .reports {
    margin-top: 4rem;
  }

  .security-report .header .description {
    margin-top: 2rem;
  }

  .reports .report .icon {
    padding: 2rem;
    max-width: 7rem;
    max-height: 7rem;
  }

  .reports .report .description {
    width: 60%;
    line-height: 2.2;
  }

  .tabular-view .labels .label {
    margin: 1rem;
  }

  .submit-buttons .reset {
    margin-top: unset;
  }

  .tabular-view label span::before {
    margin-left: .7rem;
  }

  .tabular-view label {
    margin-bottom: 1.5rem;
  }

  .tabular-view .case-description textarea {
    margin-bottom: 2rem;
  }

  .tabular-view .labels .incident-details {
    margin-bottom: 6rem;
  }

  .labels-header {
    margin-bottom: 3rem;
  }

  h2.section-title {
    margin: 3rem auto 1rem;
    font-size: 2rem;
  }

  .input-section form .input-item {
    margin-bottom: 2rem;
  }

  .tabular-view .description {
    line-height: 2.2;
  }

  .left-section .header img {
    margin-left: 1.5rem;
  }

  .associates-tiles .card .card-body .positions .major,
  .associates-tiles .card .card-body .positions .position {
    margin: .5rem 0;
  }

  .associates-tiles .card .card-body .member-info .information {
    margin: 1rem;
  }

  .uni-side label,
  .users label {
    margin-right: unset;
  }

  .uni-side ins::before {
    right: -18px;
    top: 7px;
  }
  .uni-side ins img,
  .users ins img {
    display: block;
  }
  .org-chart.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .goals-container h1 {
    padding: 3rem 0 0 0;
  }
  .orgchart-container::before {
    bottom: -1rem;
  }
  .news-content {
    margin-bottom: 5rem;
    
  }
  .news-content h1 {
    font-size: 2rem;
    line-height: 2.2;
  }
  .news-thumbnail.news-detail-img {
    margin-top: 2rem;
  }

  .news-detail-img img {
    height: 32.5rem !important;
    width: 28rem !important;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    top: 0.3rem;
    left: 0.35rem;
    height: 0.4rem;
    width: 0.4rem;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 1.4rem !important;
    width: 1.4rem !important;
  }

  .swiper-pagination-bullet {
    height: 0.7rem !important;
    width: 0.7rem !important;
    margin: 0.5rem !important;
  }
  #myTopnav.scroll .dropdown .dropdown-menu a.dropdown-item:hover,
  .dropdown .dropdown-menu a.dropdown-item:hover {
    background-color: var(--light-gray-background);
    color: var(--blue-color);
  }
  .navbar .dropdown-menu {
    top: 4.8rem;
    border-top: 0.3rem solid var(--blue-color);
    position: absolute;
    right: 0rem;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    animation: dropdownanimation .5s;
    min-width: 12rem;
  }
  .navbar .languages .dropdown-menu{
    min-width: max-content;
  }
  .scroll .navbar .dropdown-menu{
    top:5.5rem;
    animation: dropdownanimationscroll .5s;
  }
  .search .erase {
    height: 100%;
    width: 3rem;
    top: unset;
  }

  .search-footer.modal-footer .std {
    padding-right: 2rem;
  }
  .dropdown button.btn.btn-light.dropdown-toggle::before {

    content: unset;

  }

  .modal.search .search-btn::after {
    content: unset;
  }
  .search .search-btn {
    width: auto;
    justify-content: unset;
    height: 100%;
  }
  .dropdown button.btn.btn-light.dropdown-toggle {

    border-right: 1px solid #ebebeb;
    padding: .375rem .75rem;
  }
  .associates-search button.btn.btn-light.dropdown-toggle {
    padding: .375rem 2rem .375rem 1rem;
  }
  .search .dropdown {
    height: 100%;
    width: auto;
    margin: unset;
  }
  .search .modal-dialog .input-group .form-control {
    height: 100%;
    padding-right: 4rem;
    width: auto;
  }
  .message-tiles .col-lg-4 {
    margin-bottom: 1rem;
  }
  .polls-side-menu .answers-section .result .desc {
    margin-top: unset;
    text-align: right;
  }
  .polls-side-menu .answers-section .result {
    flex-direction: row;
    margin-bottom: unset;

  }
  .polls-side-menu .answers-section {
    margin: 3rem 1.5rem;
    padding: 4rem 0px;
  }
  .polls-side-menu .menu-container {
    width: 100%;
  }
  .weather-side-menu .menu-label,
  .polls-side-menu .menu-label {
    padding: 2rem 4rem;
    font-size: 2.5rem;
  }
  .news-advertisements .slick-prev {
    right: 1rem;
  }

  .news-advertisements .slick-next {
    left: 1rem;
  }
  .news-advertisements .items a {
    padding: 15px;
  }
  .news-advertisements .news-item.col-lg-4:nth-child(2) {
    padding-left: 7.5px;
    padding-right: 7.5px;
  }
  .events-side-menu .events .item .content .detail {
    padding: 1.6rem 2rem;
  }
  .events-side-menu .events .item .content .detail .time-location .time {
    border-left: 1px solid rgb(216, 216, 216);
    padding-left: 1rem;
  }

  .events-side-menu .events .item .content .detail .time-location .location {
    padding-right: 1rem;
    justify-content: unset;
    margin-top: unset;
  }

  .events-side-menu .events .item .content .detail .time-location {
    flex-direction: row;
  }

  .events-side-menu .events {
    padding: 2rem;
  }

  .events-side-menu .events .month-container .desc {
    font-size: 1.4rem;
  }

  .events-side-menu .menu-label {
    padding: 2rem 4rem;
    font-size: 2.5rem;
  }

  .notifications-side-menu .notifications .item .content .desc {
    font-size: 1rem;
    line-height: 2;
  }

  .notifications-side-menu .notifications .item .content {
    margin-top: 1.5rem;
    padding: 1.8rem 3rem 1.8rem 1rem;
  }

  .notifications-side-menu .notifications {
    padding: 2rem;
  }

  .notifications-side-menu .notifications .item .date {
    font-size: 1.2rem;
  }

  .notifications-side-menu button.close,
  .weather-side-menu button.close,
  .polls-side-menu button.close {
    top: 2.5rem;
  }

  .notifications-side-menu .menu-label {
    padding: 2rem 4rem;
    font-size: 2.5rem;
  }

  .side-menu.toggled,
  .details-panel.toggled {
    width: 32rem;
  }

  .registration-footer .stamp-img {
    width: 12rem;
  }

  .footer .footer-contents .title {
    font-size: 1.3rem;
  }

  .footer .footer-contents .newsletter .info {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }

  .shortcuts .open-data .icon svg,
  .shortcuts .map .icon svg,
  .shortcuts .accessibility-services .icon svg {
    width: 9rem;
  }
  a.more-testimonials-btn.read-more {
    margin: 2rem 0;
  }
  .uni-testimonials .swiper-horizontal>.swiper-pagination-bullets,
  .uni-testimonials .swiper-pagination-bullets.swiper-pagination-horizontal,
  .uni-testimonials .swiper-pagination-custom,
  .swiper-pagination-fraction {
    padding: 2rem;
  }
  .uni-testimonials {
    padding: 1rem 0 3rem;
  }
  .news-advertisements .nav-pills .nav-link {
    margin-right: 0.5rem;
  }
  .focus-area .focus-body .links .link-holder .icon {
    width: auto;
    height: auto;
  }
  .focus-area .focus-body .animation-zone {
    width: 50% !important;
    margin: unset;
  }
  .focus-area h3.title {
    margin-bottom: 4rem;
    font-size: 1.2rem;
  }
  .focus-area {
    padding: 2rem 0 0rem 0;
  }
  .swiper.programs .swiper-slide .card {
    min-height: 30rem;
  }

  .swiper.programs .swiper-slide .card .card-img-top {
    height: 30rem;
  }

  .swiper.programs .swiper-slide:first-child {
    padding-right: unset;
  }

  .swiper.programs .swiper-slide:last-child {
    padding-left: unset;
  }

  .uni-programs .swiper-pagination {
    bottom: 2rem !important;
  }

  .swiper.programs.container {
    margin-top: 4rem;
  }

  .uni-programs {
    padding-right: 1rem;
  }


  .message-tiles .logo-container {
    transform: scale(1) !important;
  }

  .message-tiles .card .logo {
    transform: unset;
  }

  .uni-overview .overview-pattern-1 {
    display: block;
  }

  .message-tiles .card .card-title {
    font-size: 1.5rem;
    margin: 1rem 0px;
  }

  .message-tiles .card .card-text {
    line-height: 2.2;
    font-size: 0.7rem;
    width: auto;
  }

  .sidebuttons .sidebuttons-toggler {
    top: 4rem;
  }

  .uni-statistics .stat .value {
    margin-top: .3rem;
    margin: unset;
    font-size: 1.3rem;
  }

  .uni-statistics .stat {
    padding: 1rem;
    align-items: center;
  }

  .uni-statistics {
    padding: 1rem 0px;
  }

  .modal.search .radio-buttons {
    margin: unset;
    margin-right: 4rem;
  }

  .modal.search .form-check-label {
    margin: 1rem 0rem 1rem 3rem;
  }

  .modal.search .form-check-inline:first-child .form-check-label {
    border-left: unset;
    padding-left: unset;
  }
  .search .erase {
    right: 0.5rem;
  }
  .search .erase svg {
    width: 60%;
    height: 60%;
  }
  .modal.search ins {
    font-size: 1rem;
  }
  .search input.form-control {
    font-size: 1rem;
    padding: 0px 3rem;
  }
  .search .input-group.mb-3 {
    height: 3.5rem !important;
    width: 40rem !important;
    flex-direction: row;
  }
  .uni-inovations {
    padding: 0 0 2rem 0;
  }
  .uni-inovations .main-news .research .swiper-slide {
    align-items: center;
  }
  .uni-inovations .inovation-container .inovations-detail {
    bottom: 3.5rem;
  }
  .uni-inovations .main-news .research .swiper-slide .content .read-more a {
    font-size: 1.1rem;
  }
  .uni-inovations .main-news .research .swiper-slide .content .desc {
    line-height: 2.2;
    margin-top: 2rem;

  }
  .uni-inovations .main-news .research .swiper-slide .content .date span img {
    width: auto;
  }

  .uni-inovations .main-news .research .swiper-slide .content .date span {
    padding-left: 1rem;
  }

  .uni-inovations .main-news .research .swiper-slide .content .date {
    margin: 1rem 0px;
  }

  .uni-inovations .main-news .research .swiper-slide .content .title {
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .news-advertisements .news-item .card-img-overlay .day,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .day {
    font-size: 3.5rem;
  }

  .news-advertisements .news-item .card {
    height: 100%;
    margin-bottom: 0;
  }

  .College-sections .card .section-info .section-description {
    padding: 1rem 2rem;
  }

  .college-programs .programs-container .program .contents .item .cta svg {
    width: 2rem;
    height: 2rem;
  }
  .college-programs .programs-container .program .program-name {
    font-size: 1.8rem;
    padding: 1.5rem 2rem;
  }

  .college-programs .programs-container {
    padding: 3rem 0;
    flex-direction: column;
  }

  .college .college-annual-report .item .item-desc .name {
    margin-right: 1rem;
  }

  .college .college-annual-report .item .item-desc .icon {
    display: block;
  }

  .college .college-annual-report .item .item-desc .name {
    margin-right: 1.5rem;
    font-size: 1.1rem;
  }
  .college .affliated-members .search-affliated-btn {
    background-color: var(--orange-color);
    color: white;
    padding: 0 2rem;
    width: auto;
    margin: 0;
    align-self: unset;
    justify-content: unset;
  }
  .college .affliated-members input {
    width: auto;
  }
  .college .affliated-members {
    margin: 2rem auto 4rem;
  }
  .college.tabular-view .statistic .desc {
    margin: .7rem 0 .4rem 0;
  }
  .college.tabular-view .statistic .icon img {
    width: 4rem;
    height: 3rem;
  }

  .contact-us .services .service:last-child {
    border-bottom: none;
    padding: 15px;
  }

  .contact-collapse .contact-infos {
    margin: 2rem 0 0;
  }

  .accordion-container .contact-collapse .informations .subtitle {
    margin-bottom: 1rem;
  }

  .contact-collapse .contact-infos .icon:first-child {
    margin: 0 .5rem;
  }

  .branches .card-footer {
    padding: 1.4rem 1rem;
  }

  .branches .card .card-body .card-text {
    margin-bottom: 1rem;
  }

  .branches .card .card-body .card-title {
    font-size: 1.4rem;
    margin-bottom: 4rem;
  }

  .contact-us .branches-otherservices .description {
    font-size: 2.3rem;
    margin: 2rem 0;
    text-align: right;
  }

  .map-container .gotomap {
    padding: 1rem;
  }

  .contact-us .contact-infos .phone,
  .contact-us .contact-infos .email,
  .contact-us .contact-infos .fax {
    font-size: 1rem;
    padding: 1rem 3rem;
  }

  .contact-us .contact-infos {
    margin: 3rem 0px 0px;
  }

  .contact-us .services .service a.start {
    margin-top: 2rem;
  }

  .contact-us .services .service .description {
    line-height: 2.2;
  }

  .service.col-md-4 .image {
    margin-bottom: 2rem;
  }
  .contact-us.deliver-voice .services .service{
    margin-bottom: 5rem;
  }
  .contact-us .services .service {
    margin-bottom: 3rem;
    padding: 15px;
    border-bottom: none;
  }

  .faqs .be-in-contact .main-desc {
    font-size: 1.5rem;
    margin-bottom: .8rem;
  }

  .faqs.research-contact .be-in-contact {
    padding: 3rem 2rem;
  }

  .faqs.ES-material.gray-bg {
    padding-top: 2rem;
  }

  .goals-container {
    padding-bottom: 2rem !important;
    padding-top: 1rem;
  }

  .goals-container .goals {
    margin-top: 2rem;
  }

  .faqs .faq-group .faq-item .faq-subheader {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    line-height: 2.2;
  }

  .faqs.ES-material ul {
    padding-inline-start: 40px;
  }

  .faqs.ES-material ul li::before {
    right: -2.5rem;
  }

  .faqs .faq-group .faq-item .faq-details::after {
    right: 2rem;
  }

  .faqs .faq-group .faq-item .faq-details {
    padding: 0rem 4rem 0px 0px;
    margin: 2rem 0px;
    line-height: 2.2;
    width: 95%;
  }

  .faqs .faq-group .faq-item .collapse .toggle {
    margin-left: 1rem;
  }

  .faqs .faq-group .faq-item .collapse .toggle img {
    width: auto;
  }

  .faqs.ES-material {
    padding: 0 0 4rem 0;
  }

  .faqs .faq-group .faq-item:not(:first-child) {
    margin-top: 2rem;
  }

  .faqs .faq-group .faq-item .expand img {
    width: auto;
  }

  .faqs .faq-group .faq-item .header .faq-title {
    font-size: 1.5rem;
  }

  .faqs .faq-group .faq-item {
    padding: 2rem;
  }

  .Deanship-agencies .agencies-tiles .col-lg-6:first-child .card:first-child {
    margin-bottom: 2.2rem;
  }

  .Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text {
    padding: 0rem 3rem;
  }

  .Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-title {
    padding: 2rem 3rem;
  }

  .Deanship-agencies.contact-information {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .filter-policies.aca-filter .filter-dp .dropdown {
    width: 50%;
  }

  .care-tiles .card .pattern {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: auto;
    height: auto;
  }

  #PoliciesContentTab {
    width: auto;
  }

  .care-tiles.policies {
    padding: 3rem 0;
  }

  p.description,
  div.description p {
    line-height: 2.2;
  }

  .proxies .cards-container .col-lg-4 .card .card-body .buttons-container,
  .advisors .cards-container .col-lg-3 .card .card-body .buttons-container {
    height: 3.7rem;
    margin-top: 2rem;
  }

  .proxies .cards-container .card .card-body .social-icons .icon,
  .advisors .cards-container .card .card-body .social-icons .icon {
    height: 3rem;
    width: 3rem;
  }

  .proxies .cards-container .card .card-body .social-icons,
  .advisors .cards-container .card .card-body .social-icons {
    margin: 1rem 0;
  }

  .proxies .cards-container .card .card-body .card-text,
  .advisors .cards-container .card .card-body .card-text {
    line-height: 2.2;
  }

  .proxies .cards-container .card .card-body,
  .advisors .cards-container .card .card-body {
    margin-top: 2rem;
  }

  .proxies .cards-container .card .card-img-top,
  .advisors .cards-container .card .card-img-top {
    min-height: 17rem;
    height: 17rem;
  }

  .proxies .cards-container,
  .advisors .cards-container {
    margin-top: 5rem;
  }

  .supreme-president {
    padding-bottom: 4rem;
  }

  .profile-section {
    margin: auto;
    width: auto;
  }

  .profile-section .image-container {
    height: 40rem;
    top: -4rem;
  }

  .aca-filter .dropdown::after {
    top: 1.7rem;
  }

  .aca-filter .dropdown button.btn.btn-light.dropdown-toggle {
    padding: 1rem;
  }

  .aca-filter .filter-dp .dropdown {
    width: 33%;
    margin: 0 1rem;
  }

  .aca-filter .filter-dp {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 3rem;
  }

  .filters-container {
    margin-top: unset;
  }

  .opportunities-main .swiper.opportunities {
    padding-right: 1.5rem;
  }

  .opportunities .swiper-slide .card .card-text {
    height: 9rem;
  }

  .opportunities .swiper-slide .card .footer.buttons .apply-now {
    padding: 0.7rem 2.3rem;
    margin-bottom: 1rem;
  }
  .opportunities .swiper-slide .card .card-title,
  .opportunities .card .card-title {
    margin-bottom: .7rem;
  }

  .opportunities-main.container {
    padding-top: 2rem;
    padding-bottom: 6rem;
  }

  .opportunities-main h1.title {
    margin-bottom: 4rem;
  }

  .steps-app .more-news-btn span img {
    width: 80%;
    height: auto;
    margin-right: unset;
  }

  .step:nth-child(5n+1) .num,
  .step:nth-child(5n+2) .num,
  .step:nth-child(5n+3) .num,
  .step:nth-child(5n+4) .num,
  .step:nth-child(5n+5) .num {
    color: unset;
  }

  .step .instruction span {
    line-height: 1.8;
    text-align: right;
  }

  .step .end-date {
    margin-right: unset;
  }

  .step .start-date {
    margin-bottom: 1rem;
  }

  .step .schedule {
    display: block;
  }

  .steps-app {
    padding-top: unset;
    padding-bottom: unset;
  }

  .international-students .card-img-overlay .footer {
    margin: 2rem 0;
  }

  .international-students .card-img-overlay .header .title {
    font-size: 1.5rem;
  }

  .international-students .card-img-overlay {
    top: 5rem;
    padding: 1.25rem;
  }

  .season-container .season-body .body-container:last-child {
    padding-bottom: 2rem;
  }

  .season-container .season-body .body-container {
    padding: 1.5rem 0px;
  }

  .season-container .season-body .information {
    margin-top: 2rem;
    font-weight: 600;
    min-width: 100%;
    justify-content: start;
    align-items: start;
    text-align: unset;
  }

  .accordion ul li .date .from svg,
  .accordion ul li .date .to svg {
    display: flex;
  }

  .season-container .season-header {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .accordion .season-header .title {
    font-size: 2rem;
  }

  .appointments .accordion {
    margin: 50px auto;
  }

  .appointments {
    padding-top: 2rem;
    padding-bottom: 4rem;
    padding-left: 15px;
    padding-right: 15px;
  }

  .enrollment.swiper .swiper-slide .readmore {
    font-size: 1.1rem;
    padding: 0.9rem 3.6rem;
    line-height: 2.2;
    margin: 3rem 0;
  }

  .swiper-slide .gridItems .card-img-overlay .icon {
    height: 2.5rem;
    width: 2.5rem;
  }

  .swiper-slide .gridItems .card-img-overlay .card-title {
    font-size: 1.1rem;
    margin-bottom: .5rem;
  }

  .swiper-slide .gridItems .grid-item .card {
    margin-bottom: 2rem;
    height: 15rem;
  }


  .available-programs {
padding: 0 0 4rem 0;
min-height: auto;
}

  .story {

    margin-bottom: 1.5rem;
  }

  .loadMore {
    margin: 0 auto 3rem;
  }

  .std {
    font-size: 1.1rem;
  }

  .opportunities .swiper-slide .card .card-body .pattern,
  .opportunities .col-lg-4 .card .card-body .pattern {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: auto;
    height: auto;
  }

  .opportunities .swiper-slide .card .card-title,
  .opportunities .card .card-title {
    font-size: 1.6rem;
  }

  .opportunities .card .card-text {
    line-height: 2.2;
    margin: unset;
  }

  .leader-msg .achievement {
    font-size: 1rem;
  }

  .university-services h1 {
    margin-bottom: 3rem;
    padding-top: unset;
  }

  .functional-competitions .card .card-img-top {
    height: 100%;
    object-fit: cover;
  }

  .competitions .card-img-overlay {
    font-size: 1.3rem;
  }

  .functional-competitions .card,
  .functional-competitions .card .card-img {
    height: 100%;
  }

  .slick-list.draggable {
    width: 100%;
    height: 100%;
    border-bottom: unset;
  }

  .tabpane-swiper {
    margin: 0 4rem;
  }

  .life-jeddah {
    margin-top: unset;
  }

  .life-jeddah .tiles-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .life-jeddah .card .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .life-jeddah .tiles-container .card .card-img-overlay .card-title {
    font-size: 1.1rem;
  }

  .news-detail-img.container {
    margin-left: 3.5rem;
    margin: 2rem auto;
  }

  .uoj-breadcrumb {
    margin: 4rem 0px;
    display: flex;
  }

  h1.title {
    padding: 3rem 0 0 0;
  }

  .leader-msg .leader-name {
    margin-bottom: .3rem;
  }

  .leaders .card .card-text {
    line-height: 2.2;
  }

  .leaders .swiper-slide-prev .card-image img,
  .leaders .swiper-slide-next .card-image img {
    filter: grayscale(100%);
  }

  .leaders .swiper-button-prev {
    right: 2.5rem !important;
    top: 50%;
    transform: unset;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    background-color: unset;
    display: block !important;
  }

  .leaders .swiper-button-next {
    left: 1.5rem !important;
    top: 50%;
    transform: unset;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    background-color: unset;
    display: block !important;
  }

  .about-swiper-section {

    padding-right: unset;
  }

  .pattern-image {
    padding: 3rem 0px;
  }

  .story .image-container {
    height: auto;
  }

  .our-story .subtitle {
    font-size: 1.2rem;
    margin-top: .8rem;
  }

  h1.section-title {
    font-size: 2.3rem;
    margin-top: unset;
    padding-right: 5.5rem;
  }

  .about-swiper-section .card .icon {
    height: 4rem;
    width: 4rem;
  }

  .achievements .news-advertisements .more-news-btn span::after {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -0.4rem;
    left: -.5rem;
  }

  .news-advertisements a.more-news-btn span img, .uni-testimonials .read-more span img, .available-programs .read-more span svg, .achievements .more-news-btn svg,.uni-inovations .more-news-btn span img {
    margin-top: 0.5rem;
  }

  .news-advertisements {
    padding-top: unset;
  }

  .news-advertisements .news-item .card-img-top::after {
    height: 100%;
  }

  .achievements .news-advertisements .nav-link {
    background-color: transparent;
    border-radius: 0px;
    margin: 0px 0.5rem;
    width: 100%;
    font-size: 1rem;
    padding: .5rem 1rem;
  }

  .achievements .news-advertisements .slick-prev {
    right: 1rem;
  }

  .achievements .news-advertisements .slick-next {
    left: 1rem;
  }

  .achievements .nav-pills,
  .news-advertisements .nav-pills {
    padding: 0px 15px;

  }

  .news-advertisements .nav-pills {
    height: 4rem;
  }

  a.about-vision {
    margin: 1rem auto;
    font-size: 1.1rem !important;
    line-height: 2.2 !important;
  }

  .particles-container .contents .txt {
    margin: 2rem 0;
  }

  .contents .txt span {
    font-size: 2.5rem;
  }

  .particles-container .contents .logo {
    width: auto;
  }

  .uni-values .column .val-content {
    margin-bottom: 2rem;
    min-width: 9rem;
  }

  .values {
    padding-bottom: 2rem;
  }

  .goals li,
  .volunteering .volunteer-tiles .card .card-body .card-text li,
  .Deanship-agencies .agencies-tiles .card .card-body .card-text li {
    line-height: 2.2;
    margin-bottom: 1.5rem;
  }

  .gals .card-text ul,
  .volunteering .volunteer-tiles .card .card-text ul {
    padding-inline-start: 40px;
  }

  .goals .card-text,
  .volunteering .volunteer-tiles .card .card-text,
  .Deanship-agencies .agencies-tiles .card .card-text {
    margin: 3rem 0px;
  }

  .goals .card-text,
  .goals .card-title,
  .volunteering .volunteer-tiles .card .card-title {
    width: 90%;
  }

  .goals .card-title,
  .volunteering .volunteer-tiles .card .card-title,
  .Deanship-agencies .agencies-tiles .card .card-title {
    font-size: 1.6rem;
  }

  .story {
    margin-bottom: unset;
    flex-direction: column;
    padding: 2rem 1rem;
  }

  .about-us .description,
  .contact-us-container .description,
  .departments .description,
  .open-data .description,
  .bar-chart .content .description,
  .future-leader .description,
  .safe-speech .description,
  .f-services .description,
  .news-ads .ads .description,
  .all-news-container .description {
    line-height: 2.2;
    margin: 1.5rem 0px;
  }

  .contact-us .contact-infos .fax::after {
    top: 0px;
    left: 0px;
    position: absolute;
    height: 2rem;
    width: 2rem;
    content: "";
    border-width: 46px 34px 20px 15px;
    border-style: solid;
    border-color: #fafafa transparent transparent #fafafa;

  }

  .contact-us .contact-infos {
    flex-wrap: nowrap;
  }

  .contact-us .branches .card .card-inner {
    flex-direction: row;
    align-items: flex-end;
  }

  .departments .cards-section .col-lg-4.col-md-6,
  .data-tiles .col-lg-3.col-md-6 {
    padding: 0 15px;
  }

  .focus-area .focus-body {
    flex-direction: row;
  }

  .achievements .news-advertisements .card {
    height: 100% !important;
  }

  .accordions .accordion-body .card-text {
    justify-content: space-between;
  }

  .contact-us .contact-infos .fax::after {
    top: 0px;
    left: 0px;
    position: absolute;
    height: 2rem;
    width: 2rem;
    content: "";
    border-width: 46px 34px 20px 15px;
    border-style: solid;
    border-color: #fafafa transparent transparent #fafafa;
  }

  .contact-us .contact-infos {
    flex-wrap: nowrap;
  }

  .contact-us .branches .card .card-inner {
    flex-direction: row;
    align-items: flex-end;
  }

  .departments .cards-section .col-lg-4.col-md-6,
  .data-tiles .col-lg-3.col-md-6 {
    padding: 0 15px;
  }

  .achievements .news-advertisements .card {
    height: 100% !important;
  }

  .accordions .accordion-body .card-text {
    justify-content: space-between;
  }
   
}
@media screen and (min-width: 992px) {


	div#cookieModal {
    min-height: 18rem;
    bottom: 1rem;
    width: 30rem;
    top: auto;
    left: 1rem;
    right: auto;
    overflow: hidden;
transform: none;
}

.acc-modal .modal-body .txt-size .result {
  padding: 0.2rem 3.5rem;
}
   .news-content {
     flex-wrap:nowrap;
   }
   .our-story .description{
    margin-bottom:0;
   }
  .tabular-view .tab-content .tab-pane .d-flex{
  flex-direction:row;
}
  .filter-labels label{
    width:max-content;
  }
.right-section .card .profile-img {
    height: 7rem;
    width: 7rem;
}
  
    .profile .left-section .card .nav-tabs .nav-item.slick-current.slick-active .nav-link::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: var(--blue-color);
  bottom: 0rem;
  right: 0;
}
.research-int .close-btn svg ellipse,
.research-int .close-btn svg line#Line_135,
.research-int .close-btn svg line#Line_136
{
  stroke:#fff;
}
  .research-int .close-btn svg{
    background-color:transparent;
  }
    .result-body .card .card-img {
  width: 25rem;
  height: auto;
}
  .national-priorities .tiles-container .col-lg-3{
  padding:0 15px;
}
  p.description, div.description p{
    text-align:justify;
  }
  .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li{
    text-align:justify;
  }
    .polls-side-menu .answers-section h5{
  padding:0 2rem;
}
    .research-int .close-btn {
  
  right: -4.3rem;

}
    .research-int{
      width:32rem;
    }

  .achievements .tab-pane.active {
    flex-direction: row !important;
  }
  .subpage-pattern{
    height:35rem;
  }
  body.toolbar-horizontal .topnav.sub{
    top: 5rem !important;
    position: relative;
    background-color: white;
  }
  .allratings .dropdownsSection .dropdown{
    margin-bottom:0rem;
  }
  .swiper-labels.swiper .swiper-wrapper .swiper-slide{
    flex-shrink:inherit;
  }
  .profile .deco1{
    right:-4rem;
  }
  .js-form-item.js-form-type-radio{
    width:max-content;
  }
  .fixed-button {
    bottom: 28%;
    right: 5%;
    transform: translateX(0);
    padding: 0.8rem 3rem;
}
  .card.kaffa-card .card-img-top img {
    display:block
  }
  .card.kaffa-card .card-img-top img.mobile-image{
    display:none;
  }
  .fixed-button {
    padding: 0.8rem 2rem;
  }
  .zoom-in-out {
    top: 4rem;
    display: flex;
  }
  .published-time svg{
    display: block;
  }
  .reason-option{
    font-size: 1rem;
  }
  .college .college-annual-report .item .item-desc{
    margin-bottom: 0;
  }
  .college .college-annual-report .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .news-content .news-detail-text{
    width: 53%;
    margin: 0;
  }
  .news-advertisements .col-lg-4{
    padding: 0 1rem;
  }
  .data-tiles .col-lg-3 .pattern,
.about-swiper .pattern,
.goals-container .pattern {
  left: 1.25rem;
}
  .contact-section-informations.informations-contact .map-container #map{
    height: 100vh;
  }
  .goals li,
.volunteering .volunteer-tiles .card .card-body .card-text li,
.Deanship-agencies .agencies-tiles .card .card-body .card-text li{
 /* text-align: justify;*/
}
  .university-services .emerg-tabs .nav-item .nav-link .icon{
    display: block;
  }
  .emerg-services{
    padding: 0 3rem;
  }
  .enrollment-section .col-lg-6 .card {
    height: 28rem;
  }
  .enrollment-section .col-lg-6 .card .content .title {
    font-size: 2.8rem;
  }
  .enrollment-section .col-lg-6 .card .card-image::before {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    content: '';
    width: 25rem;
    height: 23rem;
    background-color: #6E96A2;
    z-index: 0;
  }
  .enrollment-section .col-lg-6:not(:first-child) .card .card-image::before {
    top: -1.5rem;
    left: -1.5rem;
    right: unset;
    bottom: unset;
    background-color: #6AC6BB;
  }
  

  .enrollment-section .col-lg-6:not(:first-child) .card::after {
    transform: scale(.95) scaleX(1);
  }
  
  .enrollment-section .col-lg-6 .card::after {
    content: '';
    position: absolute;
    top: .2rem;
    left: 0;
    width: 100%;
    transform: scale(.95) scaleX(-1);
    z-index: 2;
    height: 100%;
    background-image: url("/themes/uoj_theme/media/enrollment-decorations.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
  .data-tiles .col-lg-3 .pattern,
.about-swiper .pattern,
.goals-container .pattern {
  width: 5.5rem;
  height: 5.5rem;
}
  .college-programs .programs-container .program .contents .contents-container{
    height: 28.5rem;
  }
  .images-holder.container.description img {
      object-fit: contain;
      margin: 0;
      padding: 1rem;
      display: inline-block;

  }
  .side-panel.dep .sec-layer{
    top: 0;
    height: 100%;
  }
  .opportunities.availablevacancies .card {
    height: auto!important;
  }
  .quick-links .logo {
    display: block;
  }
  .quick-links.swiper::before ,.quick-links.swiper::after{
    display: none;
  } 
  .tab-pane .e-service-cards{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .topnav.scroll .navbar .nav-item,
  .topnav.scroll .navbar .dropdown{
    padding-top:2.3rem;
    padding-bottom:2.3rem;

  }
  .tabular-view label {
    font-size: 1rem;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}
  .topnav .navbar {
  padding: 0 !important;
  width: 100%;
}
  .main-menu .menu-content .menu-links ul .head a {
    font-size: 1rem;
  }

  .quick-links.swiper .swiper-button-prev.swiper-button-disabled,
  .quick-links.swiper .swiper-button-next.swiper-button-disabled {
    display: none !important;
  }

  .topnav .links-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .news-advertisements.container .items a:nth-child(n+2) {
    display: block;
  }

  .news-advertisements .news-item {
    height: 33rem;
  }

  .quick-links.swiper .swiper-button-prev {
    height: 100%;
    width: 5rem;
    opacity: 1;
    display: flex !important;
    right: 0rem;
    top: 0rem;
    transform: scaleX(-1) translate(0);
    align-items: center;
    justify-content: center;
    bottom: 0;
    margin:0;
    background-image:linear-gradient(90deg, rgb(255 255 255),50%, rgb(255 255 255), rgb(255 255 255 / 0%));
  }
  .quick-links.swiper .swiper-button-prev svg circle,
  .quick-links.swiper .swiper-button-next svg circle{
    fill:transparent;
  }
  .quick-links.swiper .swiper-button-prev svg path,
  .quick-links.swiper .swiper-button-next svg path{
    fill:var(--blue-color);
  }.quick-links.swiper .swiper-button-prev svg,
  .quick-links.swiper .swiper-button-next svg{
    width: 3rem;
  }
  .quick-links.swiper .swiper-button-next {
    height: 100%;
    width: 5rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0rem;
    opacity: 1;
    transform: translate(0);
    bottom: 0;
    margin:0;
    background-image:linear-gradient(90deg, rgb(255 255 255),50%, rgb(255 255 255), rgb(255 255 255 / 0%));
  }

  .college-annual-report {
    padding-left: 3rem;
    padding-right: 3rem;
  }


  .services-container .swiper-pagination {
    bottom: -4rem !important;
  }

  .services-container .swiper-slide[aria-label="1 / 1"] {
    width: 18rem !important;
  }

  .services-container::before {
    width: 3rem;
  }

  .services-container::after {
    width: 3rem;
  }

  .acc-modal .modal-body .txt-size .decrease {
    position: absolute;
    left: 8.6rem;
  }

  .modal.acc-modal {
    transform: translateY(0px);
    min-width: 20rem;
    top: 8rem;
    bottom: auto;
    width: auto;
    animation: 0.5s ease 0s 1 normal none running acc-reveal;
    transition: all 0.3s ease 0s;
    box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
    height: fit-content;
    padding: 0px !important;
    overflow: visible;
  }

  .modal.acc-modal {
    transform: translateY(0px);
    animation: 0.5s ease 0s 1 normal none running acc-reveal;
    transition: all 0.3s ease 0s;
    box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
    height: fit-content;
    padding: 0px !important;
    overflow: visible;
    display: none !important;
  }

  .modal.acc-modal.show {
    display: block !important;
  }

  .scrolling.acc-modal {
    left: 8rem;
  }

  .acc-modal::before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    top: -1.5rem;
    left: 10.8rem;
    position: fixed;
    border-color: transparent rgba(255, 0, 0, 0) white transparent;
    border-style: solid;
    border-width: 0px 19px 30px;
  }

  .scrolling.acc-modal::before {
    left: 12.3rem;
  }

  .polls-side-menu .answers-section .result .desc {
    width: 50%;
    margin-top: 1.5rem;
    text-align: center;
  }

  .search .std {
    background-color: transparent;
  }
  .languages {
    display: block;
    padding: 0 .8rem;
  }

  .deanship .college-annual-report.report-files .item:last-child {
    padding-bottom: 0;
  }

  .college.tabular-view.deanship .col-lg-3 {
    margin-bottom: 2rem;
  }

  .college.tabular-view.deanship .col-lg-3:nth-child(4n+4) {
    border-left: none;
  }

  .quick-links.swiper .swiper-wrapper {
    padding: 0 4rem 0 3rem !important;
  }

  .sidebuttons.toggled {
    top: 9rem;
  }

  .filter-table .header .right-section {
    margin: 3rem 3rem 0;
  }

  .old-version .mockup-container {
    position: relative;
    width: 8rem;
    height: auto;
    margin-left: 1rem;
  }

  .old-version {
    bottom: 6rem;
    top: auto;
    font-size: 1.1rem;
    padding: 1.3rem 2.5rem 1.3rem 3.5rem;
  }

  .old-version .mockup-container img {
    position: absolute;
    width: 100%;
    transform: translateY(-3rem);
  }

  .sections .col-lg-4 {
    margin-bottom: 0;
  }

  .tabpane-swiper .swiper-button-prev,
  .tabpane-swiper .swiper-button-next {
    display: none !important;
    height: 2.6rem;
    width: 2.6rem;
  }

  .tabpane-swiper .swiper-button-next {
    right: 1.1rem !important;
  }

  .tabpane-swiper .swiper-button-prev {
    left: 1.1rem !important;
    right: auto !important;
  }

  .tabpane-swiper .swiper-button-prev svg,
  .tabpane-swiper .swiper-button-next svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .nav-tabs .nav-item .nav-link {
    padding: 1.4rem 2.8rem;
  }

  .leaders .swiper-slide-prev .card {
    flex-direction: row-reverse;
    height: 29rem;
  }

  .leaders .swiper-slide-next .card {
    flex-direction: row;
    height: 29rem;
  }

  .uni-statistics .swiper-button-prev svg,
  .uni-statistics .swiper-button-next svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .uni-statistics .swiper-button-prev,
  .uni-statistics .swiper-button-next {
    height: 3.7rem;
    width: 3.7rem;
    display: flex !important;
    height: 100%;
    top: 0;
    bottom: 0;
    background:linear-gradient(81deg, #151515, transparent);
    margin: 0;
    transition: all .4s ease;
  }
  .uni-statistics .swiper-button-prev:hover,
  .uni-statistics .swiper-button-next:hover {
    background-color:#151515;
  }
  .uni-statistics .swiper-button-next {
    left: 0 !important;
  }

  .uni-statistics .swiper-button-disabled {
    display: none !important;
  }

  .president-informations .bottom-section .nationality,
  .president-informations .bottom-section>.level,
  .agent-cv .bottom-section>.level {
    align-items: flex-start;
  }

  .webform-button--submit {
    margin: 0 6rem 3rem;
  }

  [data-drupal-messages] {
    color: red;
    padding: 0 3rem;
  }
  .bar-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bar-chart h1.section-title,
  .bar-chart p.description {
    text-align: right;
  }

  .story .image-container {
    margin-bottom: 0;
  }

  .row-cards .col-lg-4 {
    margin-bottom: 0rem;
  }

  .proxies .cards-container .card .card-img-top,
  .advisors .cards-container .card .card-img-top {
    min-height: 17vw;
    height: 17vw;
  }
  .gray-bg.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  #myTopnav.scroll .links  a {
    font-size: 0.9rem;
  }
  .beta-ribbon {
    position: fixed;
    top: 0;
  }
  .sub .beta-ribbon, body.toolbar-horizontal .beta-ribbon {
    position: relative;
  }

  .right-section .direction svg {
    width: 2rem;
  }

  .leaflet-popup-tip-container {
    left: -1.3rem !important;
    bottom: 240px !important;
  }

  .leaflet-popup-tip-container {
    left: -.45rem !important;
  }

  .Building-Detail-Container .building-info-container .popup-body {
    padding: 0 1.5rem;
  }

  .building-info-container .Responsible-details {
    padding: 1.2rem 1rem;
  }

  .building-info-container .Responsible-details .name {
    font-size: 1rem;
  }

  .building-info-container .Responsible-details .contactcta svg {
    width: 4rem;
  }

  .supervisor .profile {
    display: block;
  }

  .leaflet-popup-close-button {
    font-size: 3rem !important;
  }

  .right-section {
    padding: 0 0.8rem;
  }

  .Building-Detail-Container .left-section {
    margin-top: 1rem;
  }

  .building-info-container {
    width: 32rem;
  }

  .leaflet-popup-content-wrapper {
    width: auto;
    min-height: 10rem;
  }

  .map-location-details .details-div .close-btn svg {
    width: auto;
    height: auto;
  }

  .map-location-details .details-div .close-btn {
    border-radius: unset;
    background-color: unset;
    height: auto;
  }

  .details-div .details {
    padding: 1.8rem 2rem 1rem;
  }

  .map-location-details .details-div .close-btn {
    right: -5.5rem;
    top: 2rem;
  }

  .details-div {
    width: 33vw;
    transform: translateX(-40vw);
  }

  .dropdown.clicked #clickedValue,
  #clickedFaculty,
  #clickedDepartment,
  #clickedBuilding {
    font-size: 1rem !important;
    max-width: unset;
    overflow: unset;
    text-overflow: unset;
    white-space: unset;
  }

  .map-filter .dropdown-menu {
    min-width: 20rem;
    max-height: 19rem;
    right: 0;
    left: unset !important;
  }

  .leaflet-control-zoom .leaflet-control-zoom-in,
  .leaflet-control-zoom .leaflet-control-zoom-out {
    width: 3rem !important;
    height: 2.8rem !important;
  }

  #map .leaflet-control-fullscreen-button {
    height: 3.2rem;
    width: 3rem;
  }

  .map-filter span:first-child::after {
    left: 1.5rem;
    width: 1rem;
  }

  .dropdown .map-filter {
    padding: 0.6rem 1.5rem;
  }

  .map-filter {
    min-width: 20rem;
    min-height: 4.4rem;
  }

  .test {
    right: 6rem;
  }

  .leaflet-top {
    left: 5rem !important;
  }

  .shortcuts .open-data .icon svg,
  .shortcuts .map .icon svg,
  .shortcuts .accessibility-services .icon svg {
    width: 6.5rem;
  }

  .appointments.membership-details .accordion .season {
    height: 47rem;
  }

  .agent-profile.profile .nav-tabs li a.active {
    color: var(--blue-color);
  }

  .agent-profile.profile .nav-tabs .nav-link {
    min-width: unset;
  }

  .agent-profile.profile ul#scroller {
    padding-left: 2rem;
    padding-right: 4rem;
  }

  .agent-profile .tab-content ul {
    padding: 0 4.6rem;
  }

  .agent-profile .tab-pane {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .president-informations .bottom-section .nationality {
    margin-top: unset;
  }

  .president-informations .bottom-section,
  .agent-cv .bottom-section {
    align-items: baseline;
  }

  .president-informations .bottom-section>.level,
  .agent-cv .bottom-section>.level {
    width: 30rem;
  }

  .filter-table tr td {
    font-family: var(--default-font);
  }

  .map-container #map {
    background-color: black;
    height: 87vh;
  }

  .supreme-president .president-informations .buttons-container .btn:last-child {
    margin-right: 1.5rem;
  }

  .supreme-president .president-informations .buttons-container {
    flex-direction: row;
  }

  .leaders .swiper-slide-next .card .card-image::after {
    background: linear-gradient(rgba(211, 123, 96, .7) 50%, rgba(211, 123, 96, .7) 50%, rgba(211, 123, 96, .7) 50%, rgba(211, 123, 96, .7) 50%);
  }

  .leaders .swiper-slide-prev .card .card-image::after {
    background: linear-gradient(var(--green-color) 50%, var(--green-color) 50%, var(--green-color) 50%, var(--green-color) 50%);
    opacity: 0.7;

  }

  .library-tabs .description {
    margin-top: unset;
    margin-bottom: unset;
  }

  .library-tabs.container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .vision-guidelines {
    margin: unset;
  }

  .patt svg,
  .patt img {
    max-width: 5rem;
    min-width: 5rem;
  }

  .patt {
    margin-bottom: 1.5rem;
  }

  .pattern-image .row .patt {
    display: flex;
    align-items: center;
    width: 15rem;
    padding: 1rem 15px;
    border-bottom: unset;
  }

  .pattern-image .row .patt .txt {
    font-size: 1.1rem;
    margin: 0 1rem 0;
    width: unset;
  }

  .pattern-image .row {
    align-items: center;
    margin: 0 15px;
  }

  .story .image-container img {
    height: 80%;
    width: 50%;
    object-fit: contain;
    object-position: top;
    margin: auto;
  }

  .plan .more-news,
  .plan .more-news:hover {
    padding: 1.2rem 2.1rem;
    left: 0;
  }

  .about-swiper-section {
    margin-top: unset;
  }

  .particles-container {
    height: 74vh;
  }

  .uni-values .column .val-content {
    margin-bottom: 3.5rem;
  }

  .uni-values .num {
    width: 3.5rem;
  }

  .uni-values {
    padding: unset;
  }

  .values .description {
    margin-top: unset;
    line-height: 2.2;
  }

  .uni-values .column {
    margin: 0 4rem;
  }

  .uni-values .column {
    width: fit-content;
    align-items: start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .uni-values {
    flex-direction: row;
    display: flex;
    font-size: 2rem;
    width: 100%;
    margin: auto;
    justify-content: center;
  }

  line#Line_135,
  line#Line_136 {
    stroke: white;
  }

  g#Ellipse_27 {
    stroke: white;
  }

  .search-footer.modal-footer .link {
    padding: 0 2rem;
    width: auto;
    margin-bottom: unset;
  }


  .search-footer.modal-footer .link:nth-child(even) {
    margin-right: unset;
  }

  .search-footer.modal-footer .std {
    width: auto;
  }

  .modal.search .search-btn::after {
    top: 1.1rem;
    left: 1.1rem;
    height: 1.3rem;
    width: 1.3rem;
    content: '';
  }

  .uni-programs .swiper-pagination {
    bottom: 4rem !important;
  }

  .message-tiles {
    width: 94%;

  }

  div#myTopnav {
    position: absolute;
  }

  .care-tiles .card {
    margin-bottom: 15px;
  }



  .leaders .card .card-image img {
    width: 100%;
    height: 100%;
  }

  .uni-inovations .inovation-container .inovations-detail .item.selected::after {
    position: absolute;
    top: 40%;
    right: -2rem;
    width: 0px;
    height: 0px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 40px solid rgb(244, 244, 244);
    z-index: 2;
    content: "";
  }

  .uni-inovations .main-news .research .swiper-slide .content {
    padding: 0px 15px;
  }

  .uni-inovations .main-news {
    height: 47.75rem;
    margin-top: unset;
  }

  .college-programs .programs-container .col-lg-4 {
    min-width: 33.3%;
    flex: 0 0 33.3%;
  }

  .college-programs .programs-container {
    flex-direction: row;
  }

  .college-programs .programs-container .program {
    height: 34rem;
  }

  .university-services.container {
    padding-top: 1rem;
    padding-bottom: 6rem;
  }

  .college.tabular-view .statistic {
    margin-bottom: 0rem;
  }

  .college.tabular-view .statistic .count {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  .news-thumbnail.container {
    max-height: 40rem;
    overflow: hidden;
  }
  .gallery-container.container {
    padding: 1rem 5rem;
  }

  .gallery-container .mason-item.col-lg-4 {
    max-width: 28%;
    padding: 0 15px;
  }

  .filter-table #table thead {
    display: table-header-group;
  }

  .filter-table tr td:last-child:before,
  .filter-table tr td:nth-child(5):before,
  .filter-table tr td:nth-child(4):before,
  .filter-table tr td:nth-child(3):before,
  .filter-table tr td:first-child::before {
    content: '';
  }

  .filter-table table {
    border-top: unset;
    border-bottom: unset;
  }

  .filter-table tr {
    display: table-row;
  }

  .filter-table table td {
    display: table-cell;
  }

  .details-panel .title {
    font-size: 1.5rem;
    padding: 2rem;
  }

  #sidePanelListTitle {
    padding-right: 1rem;
  }

  .details-panel .description {
    padding: 0rem 2rem;
    line-height: 2.2;
  }

  .established-initiatives {
    padding: 15px 6rem;
  }

  .volunteering .volunteer-tiles,
  .deanship-agencies .agencies-tiles {
    margin-top: 4rem;
  }

  .volunteering .nav.nav-tabs li.nav-item.slick-active.slick-current a.nav-link {
    color: var(--blue-color);
  }

  .profile.container .deco2,
  .profile.container .deco1 {
    display: block;
  }

  .profile .left-section .card .nav-tabs .nav-item .swiper-slide-active .nav-link,
  .profile .left-section .card .nav-tabs .nav-item.slick-active.slick-current .nav-link {
    color: var(--blue-color);
  }
  .profile .swiper-button-prev,
  .profile .swiper-button-next {
    top: 1rem;
  }

  .profile .left-section .card .infos-container .information {
    width: auto;
  }

  .rating .stars-container,
  .left-section .card .rating {
    justify-content: unset;
    margin: 0 1rem;
  }

  .associates-tiles .card .card-body .positions .rating {
    margin-top: -8rem;
    left: -51rem;
    top: -6.3rem;
  }

  .associates-tiles .card .pattern {
    display: block;
  }

  .associates-tiles .card .card-body .positions>div {
    flex-direction: row;
    align-items: center;
  }

  .associates-tiles .card .card-body .positions {
    display: flex;
    flex-direction: unset;
  }

  .profile .personal-profile {
    padding: 1.4rem 3rem;
  }

  .associates-tiles .card .card-body .profile {
    width: 21rem;
    height: 16rem;
  }

  .associates-tiles .card .card-body {
    padding: 2rem;
    flex-direction: row;
  }

  .college.tabular-view .nav li a.nav-link {
    background-color: var(--tab-background-color);
    filter: grayscale(100%);
  }

  .our-leaders.container {
    padding-top: 2rem;
    padding-bottom: 5rem;
  }

  .news-advertisements .nav-link.active {
    color: var(--blue-color) !important;
  }

  .orgchart-container {
    height: 48rem;
  }

  .roles.container {
    Padding-top: 4rem;
    Padding-bottom: 6rem;
  }

  .goals-container .goals {
    margin-top: unset;
  }

  .College-sections .col-lg-4 {
    max-width: 33.3%;
    flex: 0 0 33.3%;
  }

  .College-sections .card {
    height: 18rem;
  }

  .College-sections {
    padding: 4rem 0;
  }

  .college.tabular-view .nav li a.nav-link {
    height: 5rem;
  }

  .tabular-view .nav li.slick-slide a.nav-link {
    font-size: .8rem;
  }
  .college.deanship.tabular-view .nav li:nth-child(4n+3) a.nav-link.active {
    border-top: 7px solid var(--blue-color);
  }

  .contact-zone .col-lg-6:first-child .card {
    margin-bottom: unset;
  }

  .contact-zone.container {
    flex-direction: row;
  }

  .roles ul li {
    line-height: 2.2;
    max-width: 42%;
    padding: 0 2rem;
    margin-bottom: .7rem;
  }

  .roles ul li:nth-child(2n+2) {
    margin-right: 8rem;
  }

  .survey-form-container .js-form-item.form-item.form-wrapper.webform-section {
    padding: 3rem 0 0;
  }

  .survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper {
    padding: 0 6rem 8rem;
  }

  .survey-form-container .js-form-item.form-item .webform-section-wrapper .description .webform-element-description {
    margin-right: 6rem;
  }

  .survey-form-container .js-form-item.form-item.js-form-type-textarea textarea {
    width: 36rem;
  }

  .survey-form-container .js-form-item.form-item.js-form-type-textarea {
    margin: 1.5rem 6rem 1.5rem 0;
  }

  .survey-form-container .js-form-item.form-item.js-form-type-textfield input {
    width: 36rem;
  }

  .survey-form-container fieldset.radios--wrapper.js-form-item.webform-type-radios {
    margin: 0 6rem 3rem;
  }

  .survey-form-container .js-form-item.form-item.js-form-type-textfield {
    margin: 0 6rem 3rem 0;
  }

  .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :last-child,
  .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :first-child>* {
    margin-right: 6rem;
  }

  .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :first-child {
    padding-top: 3rem;
  }

  h2.webform-section-title::after {
    left: 5rem;
    width: 7rem;
    height: 10rem;
    top: -2.5rem;
    transform: scale(.65);
  }

  h2.webform-section-title {
    margin-right: 6rem;
    font-size: 2rem;
  }

  .container.description.fade-left {
    margin-bottom: 2rem;
  }

  .college.tabular-view.E-services .col-lg-6:last-child .card,
  .college.tabular-view.E-services .col-lg-6:nth-last-child(2) .card {
    margin-bottom: 0;
  }

  .tabular-view .tab-content .tab-pane .col-lg-6 {
    max-width: 50%;
  }

  .tab-pane .row {
    flex-direction: row;
    width: 100%;
  }

  .college.tabular-view.E-services .card .card-title {
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
  }

  .college.tabular-view.E-services .card {
    height: 22rem;
  }

  .card.kaffa-card{
    height: auto !important;
    margin: 3rem 3rem 0 3rem;
    width: calc(100% - 8rem);
  }

  .college.tabular-view .nav li:first-child a.nav-link::before {
    content: "";
    background-image: url("/themes/uoj_theme/media/statistics-svgrepo-com.svg");
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
  }

  .college.tabular-view .nav li:nth-child(2) a.nav-link::before {
    content: "";
    background-image: url("/themes/uoj_theme/media/college-notebook-colered.svg");
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
  }

  .college.tabular-view .nav li:nth-child(3) a.nav-link::before {
    content: "";
    background-image: url("/themes/uoj_theme/media/partnership.svg");
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
  }

  .college.tabular-view .nav li:nth-child(4) a.nav-link::before {
    content: "";
    background-image: url("/themes/uoj_theme/media/annual\ report.png");
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
  }

  .college.deanship.tabular-view .nav li:nth-child(3) a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/files-active.svg");
  }

  .college.deanship.tabular-view .nav li:first-child a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/college-notebook-colered.svg");
  }

  .college.deanship.tabular-view .nav li:nth-child(2) a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/annual\ report.png");
  }

  .college.tabular-view .nav li a.nav-link.active {
    border-top: 7px solid var(--blue-color);
  }
  .tabular-view .case-description textarea:last-child {
    margin-bottom: unset;
  }

  .tabular-view .case-description .extent-of-influence {
    margin-bottom: 3rem;
  }

  .form-container form .fields {
    margin-top: 4rem;
  }

  .tabular-view .nav li.slick-active.slick-current a.nav-link span {
    color: var(--blue-color);
    font-size: .8rem;
  }

  .tabular-view .nav li.slick-slide a.nav-link .icon {
    display: block;
  }

  .tabular-view .nav li a.nav-link.active {
    filter: grayscale(0);
    border-top: 7px solid var(--blue-color);
  }
  .tabular-view.E-services .nav li:nth-child(4n+1) a.nav-link.active {
    border-top: 7px solid var(--blue-color);
  }
  .tabular-view.E-services .nav li:nth-child(4n+2) a.nav-link.active {
    border-top: 7px solid var(--orange-color);
  }
  .tabular-view.E-services .nav li:nth-child(4n+3) a.nav-link.active {
    border-top: 7px solid var(--green-color);
  }
  .tabular-view.E-services .nav li:nth-child(4n+4) a.nav-link.active {
    border-top: 7px solid var(--red-color);
  }

  .reports .report {
    margin-bottom: 4rem;
  }

  .security-report {
    padding: 0 6rem;
  }

  .left-section p.description {
    margin: 0 0 1.2rem;
  }

  .login .right-section h4.title {
    font-size: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  .right-section {
    border-left: 1px solid #dbdbdb;
    left: 3rem;
  }

  .news-content .more-info .date {
    margin-bottom: 1rem;
  }

  .news-content .news-detail p {
    font-size: 1.1rem;
    line-height: 2.2;
    text-align: justify;
  }

  .news-content h1.container {
    padding: 15px 5rem;
    margin-bottom: 0.5rem;
    padding: 0;
  }

  .uni-overview h1.section-title,
  .uni-overview .description {
    text-align: right
  }

  .uni-overview .overview-section1 {
    width: 41rem;
  }

  .uni-programs {
    padding-top: 1rem;
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .contact-collapse {
    align-items: center;
    padding: 0 1rem 1rem 1rem;
  }

  .accordion-container .contact-accordion {
    padding: 1rem;
  }

  .faqs.research-contact .be-in-contact {
    padding: 3rem 6rem;
  }

  .our-story .description {
    line-height: 2.2;
    margin-top: 2rem;
  }
  .our-story .title {
    font-size: 2.3rem;
  }
  .goals-container .goals {
    margin-top: 5rem;
  }
  .goals-container.re-production .description {
    margin: unset;
  }
  .content-viewer-alt-dark .research-production .production-thumb img {
    width: 90%;
    margin-bottom: unset;
  }
  .faqs.ES-material .faq-group {
    margin-top: 2rem !important;
  }

  .content-viewer-alt .research-production .production-thumb img {
    width: 100%;
  }

  .research-production .row {
    flex-direction: row;
  }

  .research-production .col-md-6 {
    max-width: 50%;
  }

  .Deanship-agencies.contact-information .agencies-tiles .col-lg-6 {
    padding: 0 15px;
  }

  .research-production .desc {
    line-height: 2.2;
    width: 84%;
  }

  .research-production {
    padding: 0;
  }

  .research-production .col-md-6:first-child {
    padding-top: 6rem;
  }

  .Deanship-agencies.contact-information .agencies-tiles {
    flex-direction: row;
  }

  .care-tiles .card .card-body .card-title {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
  }

  .care-tiles .card {
    min-height: 15rem;
    margin-bottom: 2rem;
  }

  .departments .cards-section .card .logo,
  .f-services .cards-section .card .logo {
    height: 4rem;
    width: 4rem;
  }

  .departments .card .card-img-overlay .card-title,
  .f-services .card .card-img-overlay .card-title {
    padding: 1rem 2rem;
  }

  .departments .card .card-img-overlay .card-title svg,
  .f-services .card .card-img-overlay .card-title svg {
    display: inline;
    width: 2rem;
    height: auto;
  }

  .footer .footer-contents .mobile-apps {
    margin-top: unset;
    margin-bottom: 1rem;
  }

  .footer-contents .links-container {
    padding-top: 2rem;
    margin: 0 auto;
  }

  .footer-bottom .copyright,
  .footer-bottom .visitors {
    font-size: 1rem;
    margin-top: unset;
  }

  .proxies .cards-container .card .card-body .card-title,
  .advisors .cards-container .card .card-body .card-title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
  }

  .proxies {
    padding-bottom: 6rem;
  }

  .supreme-president .president-informations .description p {
    text-align: right;
  }

  .supreme-president .president-informations .position,
  .agent-cv .position {
    font-size: 1.1rem;
    width: fit-content;
    margin-bottom: 3rem;
  }

  .supreme-president .president-informations .president-name,
  .agent-cv .agent-name {
    font-size: 2.1rem;
    width: fit-content;
    text-align: right;
    margin: unset;
  }

  .departments .cards-section .col-lg-4.col-md-6,
  .f-services .cards-section .col-lg-4.col-md-6 {
    padding: 0;
  }

  .departments .cards-section .card,
  .f-services .cards-section .card {
    height: 18rem;
    margin-bottom: 1rem;
  }

  .associates-search .search-btn .icon::before,
  .modal.search .icon::before {
    background-position: 1.2rem center;
    background-size: 1.2rem;
    height: 1.2rem;
    top: 1rem;
    width: 3rem;
  }

  .std-activities {
    margin-top: 4rem;
    margin-bottom: 2.4vw;
  }

  .filters-container .search-box {
    width: 95%;
  }

  .leaders .swiper-slide-prev .card,
  .leaders .swiper-slide-next .card {
    height: auto;
  }

  .our-leaders .leaders .swiper-wrapper {
    align-items: unset;
  }

  .our-leaders .leaders {
    margin-top: 1.5rem;
  }

  .leaders .swiper-slide {
    max-height: 28rem;
  }

  .leaders .card .card-image {
    width: 100%;
    min-height: 100%;
    position: relative;
  }

  .leader-msg .leader-infos {
    margin-top: 2rem;
  }

  .leaders .card .card-image {
    width: 50%;
  }

  .leaders .card {
    flex-direction: row;
  }

  .leaders .card .leader-msg {
    padding: 2rem;
  }

  .leaders .card {
    min-height: 28rem;
  }

  .our-leaders .leaders {
    margin-top: unset;
  }

  .functional-competitions.container {
    padding-top: 15px;
  }

  .functional-competitions h1.title {
    margin-bottom: 4rem;
  }

  .competitions .swiper-slide {
    position: relative;
  }

  .slick-prev {
    right: 15px;
  }

  .slick-next {
    left: 15px;
  }
  .swiper-container.tabpane-swiper {
    margin: 0;
    overflow: visible;
    padding: 0 3rem;
  }
  .university-services .tab-pane {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }
  .card.partnership {
    width: auto;
  }
  .university-services .nav-tabs .nav-item.slick-active.slick-current .nav-link {
    color: var(--blue-color);
  }

  .life-jeddah .tiles-container .col-lg-3 {
    padding: 0;
  }

  .life-jeddah .card,
  .life-jeddah .col-lg-3 .card .card-img-top img,
  .life-jeddah .col-lg-3 .card .card-img-top {
    height: 22rem;
  }

  .enrollment.swiper .swiper-slide .title {
    font-size: 1.8rem;
  }

  .opportunities .card {
    margin-bottom: 1.25rem;
    height: 26rem;
  }

  .opportunities .swiper-slide .card:first-child {
    margin-bottom: 1rem;
  }

  .shortcuts {
    padding: 4rem 15px;
  }

  .shortcuts .open-data .desc,
  .shortcuts .map .desc,
  .shortcuts .accessibility-services .desc {
    display: block;
  }

  .shortcuts .open-data,
  .shortcuts .map,
  .shortcuts .accessibility-services {
    margin-bottom: 2rem;
  }

  .shortcuts {
    flex-direction: row;
    padding: 3rem 0px;
  }

  .steps-app .more-news-btn {
    margin-left: unset;
    padding-left: 15px;
  }

  .steps-app .more-news-btn::after {
    width: 50px;
    height: 50px;
    top: -0.2rem;
    left: 0.2rem;
  }

  .news-advertisements a.more-news-btn span, .uni-testimonials .read-more span, .available-programs .read-more span, .achievements .more-news-btn, .steps-app .more-news-btn,.uni-inovations .more-news-btn span {
    margin-bottom: unset;
  }

  .news-advertisements a.more-news-btn, .uni-testimonials .read-more, .available-programs .read-more, .steps-app .more-news-btn,.uni-inovations .more-news-btn {
    padding-left: 15px;
  }

  .pattern-before svg {
    display: block;
  }

  .steps {
    padding: 6rem 1rem;
    background-color: #ECECEC;
  }

  .international-students {
    height: 50vh;
  }

  .season-container .season-body .header .certificate {
    justify-content: unset;
    width: fit-content;
    text-align: center;
  }

  .season-container .season-body .header .date {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .accordion .season-header .title {
    text-align: right;
  }

  .enrollment.swiper {
    height: 80vh;
  }

  .swiper-slide .grid-item {
    max-width: 91%;
  }

  .swiper-slide .gridItems {
    padding-top: unset;
  }

  .story .image-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .story.plan.show-button-true .image-container img,
  .show-button-true img{
    object-fit:cover;
  }
  .news-advertisements .news-item .card {
    height: 24rem;
  }

  .news-advertisements .news-item.col-lg-4:last-child {
    display: block;
  }

  .uni-statistics .stat:nth-child(2n) {
    border-left: none;
  }

  .uni-statistics {
    top: unset;
  }

  .topnav .links-container .options {
    transform: unset;
  }

  .login .left-section {
    padding: 2rem 5rem;
  }

  .login .right-section h4.title {
    margin-bottom: 2rem;
    margin-top: 0;
  }

  .login .right-section p.description.login .right-section p.description {

    width: 70%;

  }

  .login .left-section,
  .login .right-section {
    width: 50%;
    height: 100%;
  }

  .login .right-section {
    padding: 2rem 6rem 2rem;
    justify-content: space-between;
  }

  .login {
    flex-direction: row;
    height: 100vh;
  }

  .particles-container {
    height: 80vh;
  }

  .uni-overview {
    padding: 6.5rem 0;
  }

  .swiper.banner {
    height: 100vh;
  }

  .branches-otherservices .col-lg-6:nth-child(2n+2) {
    padding-right: 15px;
  }

  .branches-otherservices .col-lg-6:nth-child(2n+1) {
    padding-left: 15px;
  }

  .contact-us .branches-otherservices .description {
    margin: 3rem 0px;
    color: var(--black-color);
  }

  .contact-us .accordion-container {
    margin-bottom: 2rem;
  }

  .contact-collapse {
    padding: 0 6rem 3rem 2rem;
    flex-direction: row;
  }

  .accordion-container .contact-accordion {
    padding: 3rem 1.5rem;
    font-size: 1.6rem;
  }

  .branches .card .pattern,
  .accordion-container .pattern {
    display: block;
  }

  .contact-us .map {
    height: 77vh;
  }

  .contact-us .map-container .zoom-controls .zoom-in,
  .contact-us .map-container .zoom-controls .zoom-out {
    height: 3rem;
    width: 3rem;
  }

  .contact-us .map-container .zoom-controls {
    position: absolute;
    bottom: 1rem;
    top: auto;
    right: 2rem;
    z-index: 2;
  }

  .map-container .gotomap span {
    font-size: 1rem;
  }

  .map-container .gotomap {
    left: 1.4rem;
    bottom: .1rem;
    padding: 1.5rem 3rem;
  }

  .profile .left-section .card .infos-container .information {
    width: 50%;
  }

  .profile .left-section .card {
    margin-bottom: 1.5rem;
  }

  .profile .right-section .card {
    margin-bottom: 1.5rem;
  }

  .slick-prev {
    right: 0;
  }

  .slick-next {
    left: 0;
  }

  .associates-tiles .card .card-body .card-title {
    margin: 0 0 1rem;
  }

  .profile .right-section {
    position: relative;
    left: 0rem;
    top: -0.3rem;
    padding: 0 0.6rem;
  }

  .profile .left-section.col-lg-9 {
    padding: 0 15px;
  }

  .story.story-img {
    align-items: center;
    margin-bottom: 3rem;

  }

  .president-tabview ul li {
    display: block;
    margin-top: 1rem;
  }

  .proxies .cards-container .col-lg-4,
  .advisors .cards-container .col-lg-4 {
    padding: 0 15px;
  }

  .agent-cv .col-lg-4 {
    padding: 0 15px;
  }

  .agent-cv {
    flex-direction: row;
  }

  .slick-track .tab-pane {
    width: 100% !important;
    right: 0 !important;

  }

  .slick-prev,
  .slick-next {
    width: 2.1rem !important;
    z-index: 6;
    background-color: transparent;
  }

  .supreme-president .president-informations p.description {
    padding: 0;
  }

  .president-informations .bottom-section,
  .agent-cv .bottom-section {
    flex-direction: row;

  }

  .supreme-president .president-informations .buttons-container {
    justify-content: flex-start;
    margin-top: 3rem;
  }

  .profile-section .image-container {
    width: 29rem;
  }

  .profile-section {
    margin: 0;
  }

  .supreme-president .president-informations,
  .agent-cv .agent-informations {
    margin-right: 2rem;
    position: relative;
  }

  .supreme-president {
    flex-direction: row;
  }

  .university-services .nav-tabs .nav-item:nth-child(n) .nav-link.active {
    border-top: 9px solid var(--blue-color);
  }
  .focus-area .focus-body {
    padding-right: 1rem;
  }

  .uni-inovations .inovation-container .inovations-detail .item.selected {
    background-color: rgba(213, 213, 213, 0.2)
  }

  .uni-inovations .inovation-container .inovations-detail .item {
    padding: 1rem 15px;
    border-top: 1px solid rgb(222, 222, 222);
    border-radius: 0;
    background-color: transparent;
    margin: 0;
  }

  .uni-inovations .inovation-container .inovations-detail {
    flex-direction: column;
    position: initial;
  }

  .uni-inovations .inovation-container .inovations-detail .desc {
    display: -webkit-box;
  }

  .uni-inovations .inovation-container .inovations-detail .date {
    display: flex;
  }

  .departments .cards-section .col-lg-4.col-md-6,
  .f-services .cards-section .col-lg-4.col-md-6 {
    padding: 0px 15px;
  }

  .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+1),
  .f-services .cards-section .col-lg-4.col-md-6:nth-child(3n+1) {
    padding-right: 0;
  }

  .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+3),
  .f-services .cards-section .col-lg-4.col-md-6:nth-child(3n+3) {
    padding-left: 0;
  }

  .college.tabular-view .nav li a.nav-link.active {
    filter: grayscale(0);
    background-color: white;
  }

  .college.tabular-view.E-services .nav li a.nav-link.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
  }

  .life-jeddah .tiles-container .col-lg-3 {
    padding: 0 15px;
  }

  .life-jeddah .tiles-container .col-lg-3:first-child {
    padding-right: 0px;
  }

  .life-jeddah .tiles-container .col-lg-3:last-child {
    padding-left: 0;
  }

  .animation svg {

    width: 104% !important;
    height: 107% !important;
    transform: translate3d(-2rem, 0px, 0px) !important;

  }

  .focus-area .focus-body .links .link-holder .link {
    font-size: 1.6rem;
  }

  .focus-area .focus-body .links .link-holder .icon {
    width: 2rem;
    height: 2rem;
  }

  .focus-area .focus-body .links .link-holder .link .icon {
    width: 2rem;
    height: 2rem;
  }

  .focus-area .focus-body .links .link-holder .link .icon svg {
    width: 100%;
    height: 100%;
  }

  .focus-area .focus-body .links .link-holder {
    padding: 2rem 2rem 2rem;
  }

  .ilustrator {
    top: 14.3rem;
    left: 11rem;
    height: 3rem;
    width: 3rem;
  }
  .university-services .nav-tabs {
    height: 5rem;
  }

  .nav-tabs .nav-item.slick-current.slick-active:nth-child(4n+1) .nav-link {
    border-top: 10px solid var(--blue-color);
    filter: grayscale(0);
  }

  .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+2) .nav-link {
    border-top: 10px solid var(--orange-color);
    filter: grayscale(0);
  }

  .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+3) .nav-link {
    border-top: 10px solid var(--green-color);
  }

  .nav-tabs .nav-item.slick-current.slick-active:nth-child(4n+4) .nav-link {
    border-top: 10px solid var(--red-color);
  }

  .president-tabview .nav-tabs .nav-item .nav-link {
    padding: 0.6rem 2.1rem;
    width: fit-content;
    white-space: nowrap;
  }

  .president-tabview .nav-tabs .nav-item.slick-active.slick-current .nav-link {
    border-top: 10px solid var(--blue-color);
    filter: grayscale(0);
    background-color: white;
  }

  #chartdiv {
    height: 700px !important;
  }

  .library-tabs ul li a {
    color: var(--txt-color);
  }

  .library-tabs ul li:nth-child(4n+1) a.active {
    border-top: 5px solid var(--blue-color);
  }

  .library-tabs ul li:nth-child(4n+2) a.active {
    border-top: 5px solid var(--orange-color);
  }

  .library-tabs ul li:nth-child(4n+3) a.active {
    border-top: 5px solid var(--green-color);
  }

  .library-tabs ul li:nth-child(4n+4) a.active {
    border-top: 5px solid var(--red-color);
  }

  .college .affliated-members {
    width: 70%;
    margin: 2rem auto 4rem;
  }

  .nav-pills .nav-link.active {
    border-bottom: 2px solid var(--blue-color);

  }

  .department-news .nav-pills .nav-link.active {
    border-bottom: 2px solid var(--orange-color);

  }

  .volunteering .nav.nav-tabs li.nav-item.slick-active.slick-current a.nav-link {
    color: var(--green-color);
    background-color: transparent;
    border: none;
  }

  .volunteering .nav.nav-tabs li.nav-item a.nav-link.active::after {
    background-color: var(--green-color);
  }

  .story {
    flex-direction: row;
  }

  .achievements .news-advertisements .nav-pills .nav-link.active {
    color: var(--green-color) !important;
    border-bottom: 2px solid var(--green-color);
  }

  .news-advertisements .news-item .card-title,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .card-title,
  .achievements .card .card-title {
    max-width: 85%;
  }

  .achievements .tab-pane.slick-current.slick-active {
    display: flex;
  }

  .available-prog-swiper {
    max-height: 81vh;
    margin-top: 2rem;
  }

  .goals-container p.description {
    width: 100%;
    margin-bottom: 5rem;
  }

  p.description {
    line-height: 2.2;
    color: var(--txt-color);
    margin: 1.5rem 0;
    font-size: 1rem;
    width: 90%;
  }

  .story.container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .step .start-date,
  .step .end-date {
    display: flex;
    justify-content: center;
  }

  .step .header .num {
    font-size: 3.5rem;
  }

  .search .search-btn,
  .associates-search .search-btn {
    padding: 1rem 1.5rem 1rem 3rem;
  }

  .search .search-btn,
  .associates-search .search-btn label {
    display: block;
  }

  .college.tabular-view .statistic .count {
    margin-bottom: 0;
  }

  .tabular-view {
    padding: 6rem 0;
  }

  .tabular-view .nav li.slick-active.slick-current:nth-child(3) a.nav-link {
    border-top: 7px solid var(--green-color);
  }

  .tabular-view .nav li.slick-active.slick-current:nth-child(4) a.nav-link {
    border-top: 7px solid var(--red-color);
  }

  .college li.nav-item.slick-slide {
    height: 4rem;
  }

  .college.tabular-view .statistic {
    border-left: 1px solid #D6D6D6;
    border-bottom: none;
  }

  .tabular-view .tab-content .tab-pane:nth-child(2) .input-section .input-error .input__field:focus+.input__label,
  .tabular-view .tab-content .tab-pane:nth-child(2) .input-section .input--filled,
  .form-container form .input-error .input__field:focus+.input__label,
  .form-container form .input--filled {
    color: red;
  }

  .tabular-view .tab-content .tab-pane:nth-child(2) textarea:focus {
    border-color: var(--orange-color);
  }

  .tabular-view .nav-tabs li {
    width: fit-content !important;
  }

  .university-services .nav-tabs .nav-item.slick-active.slick-current .nav-link {
    color: var(--txt-color);
  }
  .profile .nav-tabs .slick-slide {
    white-space: nowrap;
  }

  .tabular-view .nav-tabs .slick-track {
    transform: translate3d(0px, 0px, 0px) !important;
  }

  .university-services .tab-pane:nth-child(n) .partnership .company-desc .cta svg path {
    fill: var(--blue-color);
  }
  .university-services .tab-pane:nth-child(3) .partnership .company-desc .cta svg path {
  fill: var(--green-color);
  } */

  .university-services .services-container .col-lg-3 .card {
    margin-bottom: none;
  }
  .university-services .tab-pane.partner-con .services-container {
    overflow: hidden;
  }

  .nav-tabs .nav-item .nav-link {
    margin: 0 0 0 1.4rem;
  }

  .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+1) .nav-link {
    border-top: 9px solid var(--blue-color);
  }

  .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+2) .nav-link {
    border-top: 9px solid var(--orange-color);
  }

  .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+3) .nav-link {
    border-top: 9px solid var(--green-color);
  }

  .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+4) .nav-link {
    border-top: 9px solid var(--red-color);
  }

  .tabular-view .nav li.slick-slide:nth-child(2) a.nav-link .icon svg path,
  .tabular-view .nav li.slick-slide a.nav-link .icon svg line {
    stroke: var(--orange-color);
  }

  .tabular-view .nav li a.nav-link {
    height: 4rem;
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .reset {
    color: var(--orange-color);
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .reset .icon svg path {
    fill: var(--orange-color);
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) label input:checked+span::before {
    box-shadow: inset 0 0 0 0.25em var(--orange-color);
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .labels .label.active,
  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .submit {
    background-color: var(--orange-color);
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .submit:hover {
    background-color: var(--orange-color-hover);
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .input-section .input__field:focus+.input__label,
  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .input-section .input--filled {
    transform: translate3d(0px, -22px, 0px);
    background: white;
    color: var(--orange-color);
    font-size: 0.8rem;
  }

  .tabular-view .tab-content .tab-pane:nth-child(2n+2) .input-section .input__field:focus {
    border-color: var(--orange-color);
  }

  .tabular-view .nav li.slick-slide a.nav-link {
    height: 5rem;
    margin: 0 0rem 0 1rem;
    display: flex;
  }

  .tabular-view .nav li a.nav-link {
    height: 3rem;
    justify-content: flex-start !important;
  }

  .tabular-view .nav li.slick-active.slick-current:nth-child(1) a.nav-link {
    border-top: 7px solid var(--blue-color);
    color: var(--txt-color);

  }

  .tabular-view .nav li.slick-active.slick-current:nth-child(2) a.nav-link {
    border-top: 7px solid var(--orange-color);
    color: var(--txt-color);
  }

  .tabular-view .nav li.slick-active.slick-current:nth-child(2) a.nav-link span {
    color: var(--orange-color);
  }

  .president-tabview .slick-prev,
  .president-tabview .slick-next {
    display: block !important;
    width: 2.9rem !important;

  }

  .president-tabview .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .president-tabview .nav-tabs.no-arrows {
    padding: 0;
  }

  .slick-prev,
  .slick-next {
    display: none !important;
  }
  .profile .slick-prev,.profile .slick-next{
    display:flex!important;
    height:100%;
    width: 3rem;
    background-size: 100%;
  }
  .profile-tabs .slick-prev,
  .profile-tabs .slick-next {
    display: block !important;
  }

  .profile-tabs .slick-prev.slick-disabled,
  .profile-tabs .slick-next.slick-disabled {
    display: none !important;
  }

  .quick-links .link {
    margin: 0;
  }

  .quick-links {
    display: flex;
    align-items: center;
    padding:0 0 0 6rem!important;
  }

  .care-tiles .col-lg-4:nth-child(6n+1),
  .care-tiles .col-lg-4:nth-child(6n+4) {
    padding-right: 0;
  }

  .care-tiles .col-lg-4:nth-child(6n+3),
  .care-tiles .col-lg-4:nth-child(6n+6) {
    padding-left: 0;
  }

  .dropdown.users ins::before {
    right: 13px;
  }

  .associates-search .dropdown button {
    padding: 0px 2rem;
  }

  .uni-side ins,
  .users ins {
    width: 2rem;
    margin-left: 1rem;
  }

  .dropdown button.btn.btn-light.dropdown-toggle label {
    display: block;
  }

  .associates-tiles .card .card-body .profile {
    margin-bottom: 0;
  }

  .associates-tiles .card .card-body .positions .major {
    margin: 0 0rem 0 1rem;
  }

  .news-content h1 {
    font-size: 1.6rem;
    font-weight: 600;

  }

  .std {
    border-left: 1.4px solid #e4e4e4;
    background-color: white;
    z-index: 2;
  }

  .std::before {
    content: "";
    position: absolute;
    width: 3.5rem;
    height: 2px;
    top: 2.9rem;
    right: -2.5rem;
    background-color: black;
  }

  .std::after {
    position: absolute;
    width: 1px;
    height: 4rem;
    top: -1rem;
    left: -2rem;
    background-color: rgb(222, 226, 230);
  }

  .chart-container {
    width: 60%;
  }

  .bar-chart .content {
    width: 40%;
  }

  .bar-chart {
    flex-direction: row;
    padding: 6rem 6rem 0;
  }

  .form-container form .input-item {
    width: 49%;
    margin-bottom: 0rem;
    height: 5rem;
  }

  .vision-guidelines-buttons {
    flex-direction: row;
  }

  .leaders.swiper {
    margin-top: 3rem;
  }

  .about-swiper-section {
    padding: 4rem 15px 4rem 0px;
  }

  .achievements .card {
    height: 34rem !important;
  }

  .achievements .more-news-btn span::after {
    width: 80px;
    height: 80px;
    background-color: var(--green-color);
    top: -1.1rem;

  }

  .achievements .more-news-btn {
    margin: 2rem 0;
  }

  .achievements .more-news-btn div {
    font-size: 1.4rem;
  }

  a.more-testimonials-btn.read-more {
    margin: 0 0 2rem 0;
    overflow: visible;
  }

  .news-advertisements .section-toggle a,
  .acheivements .section-toggle a {
    margin: 0 .5rem;
  }

  .swiper.programs .swiper-pagination {
    bottom: 2rem;
    z-index: 1;
  }

  .submit-buttons {
    margin-top: 2rem;
  }

  .tabular-view .tab-content .input-item,
  .tabular-view .tab-content .input-item .item {
    width: 48%;
  }

  .text-area .input-item,
  .text-area .item {
    width: 100% !important;
  }

  .form-container form .input-item.details {
    width: 100%;
  }

  .tabular-view .nav li a.nav-link,
  .tabular-view .nav li {
    width: fit-content;
    height: 5rem;
    margin: 0 1rem;
    transition: all .3s ease-in-out;
  }

  .tabular-view .nav li:first-child a.nav-link,
  .tabular-view .nav li {
    margin: 0 0 0 .5rem;
  }

  .radio-buttons {
    margin-right: 4rem;
  }

  .tabular-view .case-description {
    display: flex;
  }

  .input-section form .input-item:nth-child(2n+1) {
    margin-left: 1.1rem;
    margin-bottom: 0rem;
  }

  .form-container form .input-item:nth-child(2n+1) {
    margin-left: 1rem;
  }

  .tabular-view .labels .label {
    padding: 1rem 4rem;
    width: fit-content;
  }
  .tabular-view {
    flex-direction: column;
  }
  .tabular-view .nav-tabs {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .tabular-view .tab-content {
    width: 100%;
  }

  .swiper-slide .gridItems .grid-item .card {
    height: 32rem;
  }

  .swiper-slide .grid-item.holder .card {
    height: 15rem;
  }

  .swiper-slide .grid-item {
    max-width: 34%;
    width: 100%;
    padding: 1rem;
  }

  .swiper-slide .gridItems {
    flex-direction: row;
  }

  .international-students .card-img-overlay .footer {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .international-students .card-img-overlay .header .title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .international-students .card-img-overlay {
    background-color: white;
    height: fit-content;
    width: 40%;
    top: 5.5rem;
    padding: 2rem;
  }

  .season .pattern,
  .international-students .pattern {
    display: block;
  }

  .season-container .season-body .header .certificate {
    margin: 0 1rem;
  }

  .season-container .season-body .header .date {
    flex-direction: row;
  }

  .accordion ul li .date .arrow {
    transform: rotate(0);
  }

  .all-news .swiper-wrapper {
    height: 29rem;
  }

  .accordion ul li div.season-title {
    padding: 0;
  }

  .accordion ul {
    flex-direction: row;
  }

  .season-container .season-body .header {
    display: flex;
    align-items: center;
  }

  .accordion ul li {
    vertical-align: bottom;
    position: relative;
    width: 10rem;
    max-height: 36rem;
    height: 36rem;
    transition: all 500ms ease 0s !important;
    display: flex;
    margin: 0px 1rem;
    background-color: white;
    cursor: pointer;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .accordion ul li div.season-title label {
    transform: rotate(-90deg);
    font-size: 1.9rem;
  }

  .story .image-container img {
    display: block;
  }

  .message-tiles .card .card-text {
    text-align: right;
  }

  .opportunities .swiper-slide .card .footer.buttons .apply-now {
    margin-bottom: 0;
    padding: 0.7rem 1.7rem;
  }

  .footer.buttons {
    flex-direction: row;
    align-items: center;
  }

  .enrollment.swiper .swiper-slide .title {
    font-size: 4rem;
  }

  .pattern-image .row {
    margin: auto auto 4rem;
    justify-content: space-between;
  }

  .news-content .news-thumbnail-img img.research-img {
    width: 33%;
  }

  .patt {
    margin-bottom: 3rem;
  }

  .patt:nth-child(2n+1) {
    flex-direction: row-reverse;
  }

  .news-advertisements .news-item .card {
    margin-bottom: 2rem;
  }

  .message-tiles .card {
    align-items: flex-start;
  }

  .story .our-story {
    margin-right: 0px;
  }

  .pattern-image {
    background-image: url("/themes/uoj_theme/media/brain+logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 36%;
  }

  .departments .input-group-append {
    padding: 1rem 2rem;
  }

  .departments .dept-search {
    display: block;
  }

  .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+1),
  .data-tiles .col-lg-3:nth-child(4n+1) {
    padding-right: 0px;
  }

  .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+3),
  .data-tiles .col-lg-3:nth-child(4n+4) {
    padding-left: 0px;
  }

  .twitter-side-menu.toggled button.close {
    position: absolute;
    top: 1.5rem;
    right: -4rem;
  }

  .uni-inovations .main-news .research .swiper-slide .content {
    padding: 0px 6rem;
  }

  .uoj-breadcrumb .icon {
    width: 0.4rem;
    margin: 0px 0.5rem;
  }

  .contact-us .branches-otherservices .branches .item .pattern {
    left: -4.9rem;
  }

  .news-advertisements .news-item:last-child {
    margin-left: 0px;
  }

  .service.col-md-4 .image {
    width: 10rem;
    height: 10rem;
  }

  .news-content .more-info .devider {
    width: 1px;
    background-color: rgb(199, 199, 199);
    margin: 0px 1.5rem;
    height: 1rem;
    display: none;
  }

  .news-content .more-info .date {
    margin-bottom: 0px;
  }

  .news-content .more-info {
    flex-direction: row;
    align-items: center;
    width: fit-content;
    margin: 1rem 0;
    padding: 0;
  }

  .uni-overview .overview-section1 .info {
    font-size: 4rem;
  }

  .goals .card-body,
  .volunteering .volunteer-tiles .col-lg-6 .card .card-body,
  .deanship-agencies .agencies-tiles .col-lg-6 .card .card-body {
    padding: 2rem 3rem;
  }

  .goals .column {
    max-width: 50%;
  }

  .goals .column:nth-child(4n+1),
  .goals .column:nth-child(4n+4) {
    padding-left: 1rem;
  }

  .pattern-image .row {
    flex-direction: row;
  }

  .pattern-image .row.one {
    width: 48rem;
  }

  .pattern-image .row .patt {
    display: flex;
    align-items: center;
    width: 20rem;
  }

  .pattern-image .row {
    margin: auto auto 4rem;
    justify-content: space-between;
  }

  .values .description {
    margin: 3rem auto 4rem;
    width: 85%;
    text-align: center;
  }

  .library-tabs p.description {
    margin: 3rem auto;
  }

  .story .our-story {
    width: 50%;
    margin-right: 6rem;
  }

  .story.research-production .our-story {
    margin-right: 0;
    margin-left: 4rem;
  }

  .content-viewer-alt-dark .story.research-production .our-story {
    margin-right: 0;
    margin-left: 0;
  }

  .story .image-container {
    width: 50%;
    max-height: 25rem;
  }

  .contact-us .contact-infos {
    flex-wrap: nowrap;
  }

  .contact-us .contact-infos .email,
  .contact-us .contact-infos .phone {
    border-left: 1px solid rgb(213, 213, 213);
    border-bottom: none;

  }

  .contact-us .contact-infos .fax {
    position: relative;
    padding: 1rem 3rem 1rem 5rem;

  }

  .all-news-container .card .img-container {
    height: 35rem;
  }

  .contact-us .branches-otherservices .contents.card-columns {
    column-count: 1;
  }

  .news-advertisements .news-item .card {
    height: 100%;
    margin-bottom: 0px;
  }

  .news-advertisements .items {
    flex-direction: row;
  }

  .search button.close {
    top: 3rem;
    left: 3rem;
  }

  .search button.close svg g#Ellipse_27 {
    stroke: var(--black-color);
  }

  .search button.close svg line#Line_135,
  .search button.close svg line#Line_136 {
    stroke: var(--black-color);
  }

  .search-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
  .quick-links {
    justify-content: start;
    background-image: none;
    position: relative !important;
  }
  .swiper.programs .swiper-slide .card .card-img-overlay .cta {
    height: 2rem;
    width: 2rem;
  }

  .footer .footer-contents {
    flex-direction: row;
    justify-content: space-between;
  }

  .uni-inovations .inovation-container .inovations-detail {
    width: 57%;
  }

  .uni-inovations .main-news {
    width: 50%;
  }

  .uni-inovations .inovation-container {
    display: flex;
    align-items: center;
    margin-top: 5rem;
  }

  .headline .content {
    font-size: 5rem;
    text-align: initial;
    top: 0px;
  }

  .news-advertisements a.more-news-btn, .uni-testimonials .read-more, .available-programs .read-more, .achievements .read-more-btn, .steps-app .more-news-btn,.uni-inovations .more-news-btn {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
  }

  .uni-testimonials a.more-testimonials-btn span, .news-advertisements a.more-news-btn span, .steps-app .more-news-btn span,.uni-inovations .more-news-btn span {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    position: relative;
    z-index: 0;
  }

  .uni-testimonials a.more-testimonials-btn span img, .news-advertisements a.more-news-btn span img, .steps-app .more-news-btn span img,.uni-inovations .more-news-btn span img {
    width: 80%;
    z-index: 1;
  }

  .uni-testimonials .read-more span::after, .news-advertisements a.more-news-btn span::after, .steps-app .more-news-btn span::after,.uni-inovations .more-news-btn span::after {
    width: 60px;
    height: 60px;
    left: -0.875rem;
  }

  .footer-bottom .social-icons {
    margin: 0px;
  }

  .uni-inovations .inovation-container .inovations-detail .item {
    padding: 2rem 4rem;
  }

  .tab-links li {
    font-size: 1.1rem;
  }

  .swiper.programs .swiper-slide .card .card-img-overlay .card-title {
    font-size: 2rem;
  }
  .uoj-electronic {
    top: 8rem;
    left: 6rem;
  }

  .uni-inovations .inovation-container .inovations-detail .desc {
    font-size: 1.3rem;
  }

  .news-advertisements .news-item .card-title,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .card-title,
  .achievements .card-body {
    font-size: 1.1rem;
  }

  .topnav .logo-container .long img,
  .scroll .logo-container .long img {
    width: 10rem;
    height: 4.5rem;
    object-fit: contain;
  }

  .logo-container div svg,
  .topnav .logo-container div img {
    width: 4rem;
    height: 4rem;
  }

  .section-title.aos-init.aos-animate {
    font-size: 4rem;
    margin-bottom: 3rem;
  }

  .uni-programs.container {
    padding-bottom: 10rem;
  }

  .vertical-line {
    border-left: 1px solid rgba(255, 255, 255, 0.51);
  }

  #myTopnav .search svg g path {
    stroke: white;
  }

  .colored-logo {
    display: none;
  }

  .white-logo {
    justify-content: center;
    display: flex;
  }

  #myTopnav .search svg {
    width: 26px;
  }

  .sidebuttons .sidebuttons-toggler {
    top: 6rem;
  }

  .main-menu-container.enabled .main-menu .close-btn {
    display: block;
  }

  .topnav .links {
    display: flex;
    flex-direction: row;
    padding-right: 0;
    margin: 0 1.7rem;
    gap: 1rem;
  }

  .uni-overview {
    flex-direction: row;
  }

  .uni-statistics.animate__animated.animate__slideInUp {
    bottom: 0px;
    position: absolute !important;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .uni-statistics .stat {
    width: fit-content;
    min-width: 15.8rem;
    align-items: center;
    padding: 1rem 2.3rem;
  }
  .steps-app.container {
    background-color: #ECECEC;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  .steps-app .pattern-before {
    display: none;
  }
  .steps-app .steps {
    padding: 0;
  }
  .uni-statistics .stat:first-child {
    align-items: center;
    justify-content: center;
  }
  .uni-statistics .stat:nth-child(2n) {
    border-left: 1px solid rgb(255 255 255 / 25%);
  }
  .uni-statistics .stat:last-child {
    border-left: none;
  }
  .contact-us .branches-otherservices .otherservices .services-1 .item,
  .contact-us .branches-otherservices .branches .item {
    width: 20rem;
  }

  h1.section-title::before {
    top: 3.3rem;
    right: 0px;
    position: absolute;
    content: "";
    display: inline-block;
    margin: 0px 0px 0px 1rem;
    transition: all 0.2s ease 0s;
    height: 5px;
    width: 5rem;
    background-color: var(--blue-color);
  }
  .uni-overview h1.section-title{
    padding-right:5.5rem;
  }
  .our-story h1.section-title::before {
    content: none;
  }

  .shortcuts .open-data,
  .shortcuts .map,
  .shortcuts .accessibility-services {
    margin-bottom: 0px;
  }

  .topnav .links a {
    padding: 0px 0 0 1rem;
  }

  .topnav .nav-item:first-child .nav-link {
    padding-right: 0;
  }

  .menu {
    display: block;
  }

  .menu-mobile-icon {
    display: none;
  }

  div#myTopnav {
    display: block;
    background-color: transparent;
    top: 2.5rem;
  }

  .topnav .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    flex-wrap: nowrap;
  }

  .navbar.navbar-expand-sm {
    flex-direction: row;
    justify-content: space-between;
  }

  .navbar-brand {
    display: flex;
  }

  .topnav .vertical-line,
  .topnav .options .language-selector,
  .topnav .options .accessibility,
  .topnav .right-lnk div:nth-child(3) {
    display: block;
  }

  .topnav .right-lnk .logo-container div:first-child svg {
    width: auto;
  }

  .topnav .options .accessibility,
  .topnav .options .search,
  .topnav .options .menu,
  .topnav .options select {
    display: flex;
    padding: 0px 0.8rem;
    width: 3rem;
  }


  .topnav .options .accessibility,
  .topnav .options .search,
  .topnav .options .menu,
  .topnav .options select {
    display: flex;
    padding: 0px 0.8rem;
    width: 2.8rem;
  }

  .scroll.topnav .options .menu {
    padding: 0px 0.8rem 0px 0px;
  }

  .scroll .search svg,
  .scroll .accessibility svg {
    height: 1.6rem;
  }

  .all-news-container .card .img-container {
    height: 20rem;
    position: relative;
    overflow: hidden;
  }

  .faqs .faqs-search input {
    width: 40%;
  }

  .patt {
    margin-bottom: 0px;
  }

  .footer-bottom.container {
    flex-direction: row;
  }

  .international-students {
    height: 80vh;
  }

  .main-menu-container .main-menu .social-icons a svg,
  .main-menu-container .main-menu .logo img {
    width: 3rem;
    height: auto;
  }

  .profile .swiper-button-prev,
  .profile .swiper-button-next {
    top: 1.4rem;
  }

  .sidebuttons.toggled .sidebuttons-toggler {
    top: 19.5rem;
  }

  .sidebuttons .sidebuttons-toggler {
    top: 4rem;
  }

  .contact-us .leaflet-popup-tip-container {
    top: 4.5rem !important;
    transform: rotate(50deg);
  }

  .map-container .gotomap {
    left: 1rem;
    bottom: 0;
  }

  .depart-container {
    padding: 4rem 4.5rem 3rem;
  }
  .profile .left-section .card .nav-tabs {
    padding: 0rem 2rem;
    overflow: hidden;
  }
  .focus-area .focus-body .animation-zone lottie-player {
    height: 40.1rem !important;
    width: 94% !important;
    display: block;
    margin: 0;
  }

  .focus-area .focus-body .animation-zone,
  .focus-area .focus-body .links {
    width: 50%;
  }

  .focus-area .focus-body {
    padding-right: 0rem;
  }

  .quick-links .logo {
    left: 0;
    top: 2rem;
    display: none;
  }

  .wrapper .uoj-logo {
    width: 20rem !important;
  }

  .contact-us .branches-otherservices .otherservices .card:nth-child(2) {
    margin-bottom: 0px;
  }

  .contact-us .branches-otherservices .otherservices .card,
  .contact-us .branches-otherservices .branches .card {
    margin-bottom: 2rem;
  }

  .contact-us .branches-otherservices .branches .contents.card-columns {
    column-count: 1;
  }

  .contact-us .branches-otherservices .otherservices .contents.card-columns {
    column-gap: 4rem;
  }

  .uni-testimonials a.more-testimonials-btn span::after, .news-advertisements a.more-news-btn span::after, .steps-app .more-news-btn span::after,.uni-inovations .more-news-btn span::after {
    top: -.6rem;
  }

  .news-advertisements .news-item .card-title,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .card-title,
  .achievements .card .description {
    font-size: 1.1rem;
  }

  .headline .content .description {
    font-size: 1.8rem;
  }

  .swiper.programs .swiper-slide .card .card-img-overlay .card-title {
    font-size: 1.3rem;
  }
  .uni-statistics .stat {
    padding: 1rem 2rem;
  }

  .uoj-electronic {
    top: 9rem;
    left: 11rem;
  }

  .all-news-container .card .img-container,.all-news-container .card .card-img-overlay {
    height: 20rem;
  }
  .all-news-container .col-lg-3 .card .img-container,
  .all-news-container .col-lg-3 .card .card-img-overlay{
    height: 14rem;
  }
  .all-news-container .col-lg-3 .card .card-title{
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    display:-webkit-box;
    overflow:hidden;
  }
  .news-container {
    padding-right: 6rem;
  }

  .container {
    max-width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  #map {
    height: calc(100vh - 8.1rem);
  }

  .select-department .dropdown .dropdown-menu.show#departments {
    right: 0;
  }

  .leaflet-top {
    bottom: 1.5rem;
  }

  .survey-form-container {
    margin-top: 5rem;
  }

  .survey-msg .msg-container ul li::before {
    top: .75rem;
    height: .8rem;
    width: .8rem;
  }

  .survey-msg .msg-container {
    line-height: 2.2;
  }

  .survey-msg .survey-title {
    font-size: 2.3rem;
    padding-bottom: 3rem;
    margin: 3rem 0;
  }

  .leaflet-popup-tip-container {
    left: -.9rem !important;
    bottom: 122px !important;
  }

  .beta-ribbon {
    position: fixed;
  }

  .data-tiles .col-lg-3 .pattern,
  .about-swiper .pattern,
  .goals-container .pattern {
    position: absolute;
    left: 5.25rem;
  }
    .sub div#myTopnav.topnav {
  position: relative;
  background-color: white;
  top: 2.5rem;
}
}
@media(min-width:1200px) {

  .cookiesModal .modal-dialog{
    bottom: 0rem;
    left: 1rem;
    top: auto;
    position: absolute;
    width: 27rem;
    border-radius: .5rem;
    overflow: hidden;
  }
  .topnav .links {
    margin: 0 3rem;
  }
  .right-section .card .contact-zone .icon {
    height: 3rem;
    width: 3rem;
    padding:.8rem;
}
  .right-section .card .profile-img {
    height: 11rem;
    width: 11rem;
}
  label[for="edit-please-mention-any-suggestions-or-comments-if-any-through-your-e"]{
    margin-right: 6rem!important;
    margin-left: 6rem!important;
}

  .feedback-v2 .feedback-buttons{
    margin-bottom: 0;
  }
  .feedback-v2 .feedback-ques {
    transform: translateY(calc(100% - 10rem));
}
  .rating form{
    flex-direction: row;
    align-items: center;
  }
  .feedback-leftzone{
    display: flex;
    align-items: center;
  }
  .published-time svg{
    left: 4rem;
  }
  .rating-text{
    margin-top: 0rem;
  }
  .rating-text{
    font-size: 0.9rem;
    text-wrap: nowrap;
  }
  .news-thumbnail.container {
    margin:2rem 0rem 0 3.5rem;
  }
  
  .news-content .news-thumbnail::before {
    content: "";
    position: absolute;
    top: -2.7rem;
    left: 0rem;
    background-color: rgb(235 235 235 / 86%);
    height: 100%;
    width: 74%;
  }
  .news-content {
    flex-wrap: nowrap;
  }
  .contact-section-informations{
    padding-right: 5rem;
    padding-left: 0;
  }
  .pattern-image .row.one {
    width: 48rem;
  }

  .pattern-image .row.two,
  .pattern-image .row.six {
    width: 75rem;
  }

  .pattern-image .row.three {
    width: 82rem;
  }

  .pattern-image .row.four {
    width: 91rem;
  }

  .pattern-image .row.five {
    width: 82rem;
  }
  .modal.scrolling.acc-modal {
    left: 12.6rem;
    top: 5.6rem;
  }

  .modal.acc-modal {

    top: 6rem;
  }

  .acc-modal::before {
    left: 11.2rem;
  }

  .headline .content {
    font-size: 7rem;

  }

  .headline .content::after {
    top: 6rem;
  }

  .scroll.topnav .options .accessibility,
  .scroll.topnav .options .search,
  .scroll.topnav .options select {
    width: 3rem;
  }
  .topnav .languages .dropdown-toggle {
    font-size: 1rem;
  }
  .scroll .vertical-line {
    margin: 0.1rem 1.2rem;
  }
  .modal.acc-modal {
    top: 6rem;
    left: 3.95rem;
  }
  .uni-inovations .main-news {
    width: 50%;
  }

  .college.tabular-view {
    padding: 4rem 0 4rem 0;
  }

  .college-programs.container {
    padding: 1rem 6rem;
  }

  .roles ul li {
    width: 43%;
  }

  .form-container form .input-item:nth-child(2n+1) {
    margin-left: 1.1rem;
  }

  .goals .column:nth-child(4n+1),
  .goals .column:nth-child(4n+4) {
    padding: 0px 0rem 0px 2rem;
  }

  .deanship-goals .goals .column:nth-child(4n+3) {
    padding: 0px 0rem 0px 2rem;
  }

  .goals .column {
    margin-bottom: 2rem;
  }

  .contact-us .map-container .zoom-controls {
    right: 6rem;
  }
  .map-container .gotomap {
    left: 5rem;
  }
  .pattern-image {
    background-size: 48%;
  }
  .international-students .card-img-overlay {
    right: 5rem;
  }

  .step .header .num {
    font-size: 2.5rem;
  }

  .step .header .title {
    font-size: 1.2rem;
  }

  .footer-contents .links-container .title {
    margin: 0 4rem;
  }

  .step {
    margin-bottom: 3rem;
    padding-bottom: unset;
    border-bottom: unset;
  }

  .step .header {
    justify-content: unset;
  }

  .steps .step .header {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 3rem;
  }

  .step .header {
    flex-direction: column;
    min-height: 13rem;
    max-height: 13rem;
    min-width: 13rem;
  }

  .step:nth-child(even) .instruction {
    transform: translateY(-41.8rem);
    content: "";
    bottom: 8rem;
    left: 50%;
    transform: translate(50%, -50%);
    width: 100%;
    padding-bottom: 2rem;
    min-height: fit-content;
  }

  .step:nth-child(n)::before,
  .step:nth-child(5n+1) .instruction::before {
    content: '';
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    height: 5rem;
    width: 1rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .step:nth-child(5n+1)::before{
    content:none;
  }
  .step:nth-child(even)::before{
    top: 0;
  }
  .step:nth-child(odd)::before{
    bottom: -3rem;
    transform: translateY(0);
  }
  .step .instruction {
    min-height: fit-content;
    content: '';
    display: block;
    right: 50%;
    transform: translateX(50%);
    width: 100%;
  }

  .step .instruction {
    max-width: 18rem;
  }

  .step .instruction {
    position: absolute;
    text-align: center;
    min-height: 11rem;
  }

  .steps .step {
    flex-direction: row;
    margin-bottom: 0;
    align-items: center;
  }

  .step:nth-child(5n+5) .header {
    border-bottom: 2.6rem solid;
    border-image: linear-gradient(to left, #77478E 25%, #77478E 25%, #77478E 25%, #77478E 25%) 1 stretch repeat;
    padding: 0 3rem;
    border-right: 1.3rem solid;
  }

  .step:nth-child(5n+1) .header {
    border-right: 0rem solid;
    border-bottom: 2.6rem solid;
    border-left: 1.3rem solid;
    border-image: linear-gradient(to left, #22B0E9 58%, #22B0E9 48%, #D37B60 49%) 2 round repeat;
  }

  .step:nth-child(5n+2) .header {
    border-right: 1rem solid;
    border-top: 2rem solid;
    border-left: 1rem solid;
    border-image: linear-gradient(to left, #D37B60 25%, #D37B60 49%, #0DA290 50%) 2 stretch repeat;
  }

  .step:nth-child(5n+3) .header {
    border-right: 1.3rem solid;
    border-bottom: 2.6rem solid;
    border-left: 1.3rem solid;
    border-image: linear-gradient(to left, #0DA290 25%, #0DA290 49%, #B62C3F 50%) 1 stretch repeat;
  }

  .step:nth-child(5n+4) .header {
    border-right: 1.3rem solid;
    border-top: 2.6rem solid;
    border-left: 1.3rem solid;
    border-image: linear-gradient(to left, #B62C3F 25%, #B62C3F 51%, #77478E 31%) 2 stretch repeat;
  }

  .step:nth-child(5n+1) .instruction::before {
    background-image: url("/themes/uoj_theme/media/blue.svg");
    transform: rotate(180deg) translateY(3.5rem);
    height: 3rem;
  }

  .step:nth-child(5n+2)::before {
    background-image: url("/themes/uoj_theme/media/orange.svg");
  }

  .step:nth-child(5n+3)::before {
    background-image: url("/themes/uoj_theme/media/green.svg");
  }

  .step:nth-child(5n+4)::before {
    background-image: url("/themes/uoj_theme/media/red.svg");
  }

  .step:nth-child(5n+5)::before {
    background-image: url("/themes/uoj_theme/media/purple.svg");
  }

  .step:nth-child(5n) .instruction::before .step:nth-child(5n+2) .instruction::before,
  .step:nth-child(5n+4) .instruction::before {
    top: calc(100% + -2.7rem);
  }
  .step::after {
    content: "";
    width: 30%;
    height: 23px;
    border-bottom: solid 1.3rem transparent;
    border-top: solid 1.3rem transparent;
    position: absolute;
  }

  .step::after {
    border-bottom: 1.3rem solid transparent;
    border-top: 1.3rem solid transparent;
    border-top: 1.3rem solid transparent;
  }

  .step:nth-child(5n+2)::after {
    right: 8.6rem;
  }

  .step:nth-child(5n+5)::after {
    right: 17.6rem;
  }

  .step:nth-child(5n+1)::after {
    top: 17.4rem;
    right: 7.9rem;
  }

  .step:nth-child(5n+2)::after {
    top: -0.012rem;
    right: 8.6rem;
  }

  .step:nth-child(5n+3)::after {
    top: 17.4rem;
    right: 8.6rem;
  }

  .step:nth-child(5n+4)::after {
    top: -0.012rem;
    right: 8.9rem;
  }

  .step:nth-child(5n+5)::after {
    top: 17.4rem;
    right: 17.6rem;
  }

  .step:nth-child(5n+1)::before {
    content: '';
    background: url("/themes/uoj_theme/media/Group\ 2482.png") transparent;
    background-size: 56%;
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    height: 11rem;
    width: 4rem;
    z-index: 1;
    bottom: 0;
    right: -4rem;
  }

  .steps {
    flex-direction: row;
    height: 50rem;
    padding: 0 6rem;
    justify-content: center;
    align-items: center;
  }

  a.more-testimonials-btn.read-more {
    padding-left: 5rem;
  }

  .container {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  h1.section-title,
  h1.title {
    font-size: 3rem;
  }

  .uni-overview .overview-section1 {
    width: 60rem;
  }

  .message-tiles {
    padding-left: 6rem;
  }

  .focus-area .focus-body .links .link-holder {
    padding: 3rem 3rem 3.1rem 6rem;
  }

  .footer .footer-contents .mobile-apps {
    padding: 4rem 2rem 3rem 6rem;
  }

  .footer .footer-contents .newsletter {
    padding: 0rem 6rem 2rem 0px;
    margin-bottom: 0px;
  }

  .about-swiper-section {
    padding: 4rem 5rem 0rem 0px;
  }
  div#myTopnav {
    top: 2.3rem;
  }
  .beta-ribbon,
  .sub .beta-ribbon,
  body.toolbar-horizontal .beta-ribbon {
    width: 10.5rem;
    padding: 9px;
    position: fixed;
    letter-spacing: .5px;
    font-size: .9rem;
    background-color: unset;
    background: url("/themes/uoj_theme/media/beta-ribbon.webp"), linear-gradient(45deg, #C61366, #C0163B) no-repeat fixed;
    top: 1.3rem;
    left: -2.9rem;
    background-size: 200%;
    background-position-x: 49%;
    background-position-y: center;
    transform: rotate(-45deg);
    font-family: var(--default-font-sb);
  }
}
@media(min-width:1365px) {
  .step .header {
    min-width: 15.1rem;
  }
  .step:nth-child(5n+2) .header {
    border-right: 1rem solid;
    border-top: 2rem solid;
    border-left: 1rem solid;
  }
}
@media screen and (min-width: 1400px) {
  .opportunities .swiper-slide .card .card-tex{
     height: 9rem;
}
  .acc-modal::before {
    /* left: 12.8rem; */
  }

  #myTopnav.scroll .links a {
    font-size: 1rem;
  }

  .uni-inovations .inovation-container .inovations-detail .desc {
    font-size: 1.6rem;
  }

  .input-section form .input-item:nth-child(2n+1) {
    margin-left: 1.8rem;
    margin-bottom: 0rem;
  }

  .step .header {
    min-width: 15.5rem;
  }
  #map {
    height: calc(100vh - 7.2rem);
  }

  .leaflet-top {
    bottom: 2.5rem;
  }

  .leaflet-popup-tip-container {
    left: -.55rem !important;
    bottom: 166px !important;
  }

  .test {
    top: 8.5rem;
  }

  .building-info-container .Responsible-details .contactcta svg,
  .right-section .direction svg {
    width: auto;
  }

  .right-section {
    left: 2.3rem;
    top: -1.1rem;
  }

  .leaflet-popup-close-button {
    font-size: 2.2rem !important;
  }

  .tabular-view label span::before {
    width: 22px;
    height: 22px;
  }

  .orgchart-container {
    height: 31rem;
  }

  .departments .cards-section .card,
  .f-services .cards-section .card {
    height: 20rem;
  }

  .footer .footer-contents .mobile-apps .stores .ios svg,
  .footer .footer-contents .mobile-apps .stores .android svg {
    width: auto;
    height: auto;
  }

  .search-footer .link svg {
    width: auto;
    height: auto;
  }

  .departments .card .card-img-overlay .card-title svg,
  .f-services .card .card-img-overlay .card-title svg {
    width: auto;
  }

  .step:nth-child(5n+1)::before {
    bottom: 0rem;
  }

  .beta-ribbon {
    top: 10px;
    left: -38px;
  }

  .sidebuttons .sidebuttons-toggler {
    top: 3.9rem;
  }

  .data-tiles .col-lg-3 .pattern,
  .about-swiper .pattern,
  .goals-container .pattern {
    left: 2.25rem;
  }

  .beta-ribbon {
    top: 1.2rem;
    left: -3rem;
  }

  .uni-statistics .stat {
    padding: 1rem 2.5rem;
  }

  .step::after {
    height: 2.6rem;
    border-bottom: solid 1.3rem transparent;
    border-top: solid 1.3rem transparent;
  }
}
@media only screen and (min-width: 1600px) {
    .step:nth-child(5n+5) .header {
    padding: 4vw 3vw 4vw 3vw;
  }

  .step:nth-child(5n+4) .header {
    padding: 2vw 3vw 4vw 3vw;
  }
  .step:nth-child(odd) .instruction {
  top: 19vw;
}
    .step:nth-child(5n+3) .instruction::before {
    transform: translateY(-1vw);
  }
  .sidebuttons.toggled .sidebuttons-toggler{
    top: 16.3vw;
  }
  .news-thumbnail.container {
    max-height: 39vw;
  }
  .service.col-md-4 .image {
    width: 10vw;
    height: 10vw;
  }
  .modal.acc-modal {
    top: 6vw;
  }

  .acc-modal::before {
    left: 9.7vw;
  }

  .uni-statistics {
    height: 6vw;
  }

  .old-version {
    bottom: 6vw;
  }

  .story .image-container {
    max-height: 25vw;
  }

  .college .college-annual-report .item a.item-cta {
    font-size: .9vw;
  }

  .polls-side-menu .answers-section .result .percentage .text {
    margin-left: 1vw;
  }

  .polls-side-menu .answers-section .result .percentage {
    margin-left: 1.5vw;
    margin-right: 0;
  }

  .polls-side-menu .answers-section .result {
    padding: .8vw 0;
  }

  .old-version .mockup-container {
    width: 8vw;
    margin-left: 1vw;
  }

  .old-version {
    bottom: 5.7vw;
    font-size: 1.1vw;
    padding: 1.3vw 2.5vw 1.3vw 3.5vw;
  }

  .old-version .mockup-container img {
    transform: translateY(-3vw);
  }

  .services-container .swiper-container.tabpane-swiper {
    margin: 0;
  }

  .services-container::before,
  .services-container::after {
    left: -2vw;
    width: 5vw;
  }

  .services-container::after {
    right: -2vw;
  }

  .partner-con .services-container .swiper-button-next {
    left: -4vw;
  }

  .partner-con .services-container .swiper-button-prev {
    right: -4vw;
  }

  .our-leaders.container {
    padding-top: 2vw;
    padding-bottom: 5vw;
    ;
  }

  .uni-inovations .inovation-container .inovations-detail .item.selected::after {
    right: -2vw;
  }

  .uni-inovations .inovation-container .inovations-detail .date span {
    margin-left: 1vw;
  }

  .uni-inovations .main-news .research .swiper-slide .content .desc {
    margin-top: 2vw;
    font-size: 1vw;
  }

  .uni-inovations .main-news .research .swiper-slide .content .title {
    font-size: 1.6vw;
  }

  .uni-inovations .main-news .research .swiper-slide .content .date {
    margin: 1vw 0;
  }

  .uni-inovations .inovation-container .inovations-detail .item {
    padding: 2vw 4vw;
  }

  .uni-inovations .inovation-container .inovations-detail .desc {
    font-size: 1.6vw;
  }

  .uni-inovations .inovation-container .inovations-detail .date {
    font-size: 1vw;
    margin-bottom: 0.5vw;
  }

  .news-advertisements .nav-pills .nav-link {
    margin-right: 0.5vw;
  }

  .College-sections.container {
    padding-top: 4vw;
    padding-bottom: 4vw;
  }

  .College-sections .card .section-info .section-description .name {
    margin-left: 1vw;
    font-size: 1vw;
  }

  .College-sections .card .section-info .section-description .cta svg {
    width: 1.5vw;
    height: 1.5vw;
  }

  .College-sections .card {
    height: 18vw;
  }

  .college-programs .programs-container .program .program-name {
    font-size: 1.8vw;
    padding: 1.5vw 2vw;
  }
  .college-programs .programs-container .program .contents .item {
    padding: 1.2vw 0;
    font-size: 1vw;
  }
  .tabular-view .nav-tabs,
  .tabular-view .nav li a.nav-link,
  .tabular-view .nav li,
  .college.tabular-view .nav li a.nav-link {
    height: 5vw;
  }

  .nav-tabs .nav-item .nav-link {
    padding: 1.4vw 2.8vw;
  }

  .college.tabular-view .nav li a.nav-link::before {
    height: 1.6vw !important;
    width: 1.5vw !important;
    margin-left: 0.7vw !important;
  }

  .tabular-view .nav li:first-child a.nav-link,
  .tabular-view .nav li {
    margin: 0 0 0 .5vw;
  }

  college.tabular-view .nav li:first-child a.nav-link::before {
    height: 1.6vw;
    width: 1.5vw;
    margin-left: 0.7vw;
  }

  .hamburger-submenu {
    width: 26.2vw;
  }

  .college .affliated-members {
    margin: 2vw auto 4vw;
    font-size: 1vw;
  }

  .college .affliated-members .search-btn {
    padding: 0 2vw;
    font-size: 1vw;
  }

  .college.tabular-view .statistic .icon img {
    width: 4vw;
    height: 3vw;
  }

  .node_member .member-name-container .member-name {
    font-size: .9vw;
    ;
  }

  .advisors.mini .cards-container .card .card-body .card-title {
    font-size: 1.2vw;
  }

  .proxies .cards-container .card .card-body .social-icons,
  .advisors .cards-container .card .card-body .social-icons {
    margin: 1vw 0;
  }

  .college.tabular-view .statistic .desc {
    font-size: 1vw;
    margin: .7vw 0 .4vw 0;
  }

  .college.tabular-view .statistic .count {
    font-size: 2vw;
  }

  .agency .be-in-contact a {
    margin-right: .5vw;
  }
  .college .affliated-members .search-affliated-btn svg {
    margin-right: .5vw;
    height: 1.1vw;
    width: 1.1vw;
  }

  .roles ul li {
    font-size: 1vw;
    padding-left: 2vw;
  }

  .departments .card .card-img-overlay .card-title,
  .f-services .card .card-img-overlay .card-title {
    padding: 1vw 2vw;
  }

  .departments .card .card-img-overlay .card-title span,
  .f-services .card .card-img-overlay .card-title span {
    margin-left: 0.5vw;
    font-size: 1vw;
  }

  .departments .cards-section .card .logo,
  .f-services .cards-section .card .logo {
    height: 4vw;
    width: 4vw;
  }
  .contact-zone.container {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
  .org-chart.container {
    padding-top: 1vw;
    padding-bottom: 1vw;
  }
  .advisors.container {
    padding-bottom: 2vw;
  }
  .agent-profile .tab-content ul li::before {
    height: 0.8vw;
    width: 0.8vw;
    top: 0.9vw;
    right: -1.6vw;
  }
  .profile .swiper-button-prev,
  .profile .swiper-button-next {
    top: 1vw;
  }

  .agent-profile .nav-tabs li a.active::after {
    top: 2.78vw;
  }

  .agent-profile .tab-pane {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }

  .agent-profile.profile ul#scroller {
    padding-left: 2vw;
    padding-right: 4vw;
  }
  .main-menu-container .main-menu {
    width: 32vw;
  }

  .acc-modal .modal-body .txt-size .increase,
  .acc-modal .modal-body .txt-size .decrease,
  .acc-modal .modal-body .imm-reader .reader .btn-reader {
    height: 1.7vw;
    width: 1.7vw;
    padding: 0.3vw;
  }

  .form-container form .uploader-info label.authorized-files {
    margin-bottom: 1vw;
    margin-top: 1vw;
  }

  .footer .footer-contents .newsletter .newsletter-btn,
  .form-container form button {
    padding: 0.5vw 3vw;
    margin-top: 1.7vw;
  }

  .form-container form input {
    margin-left: 1vw;
    margin-bottom: 1vw;
    padding: 0.7vw;
  }

  .checkboxes {
    margin-bottom: 1vw;
  }

  .international-students .card-img-overlay .body {
    font-size: 1vw;
  }

  .international-students .pattern {
    position: absolute;
    top: 1vw;
    left: 2vw;
  }

  .library-tabs .tab .content svg {
    height: 1.5vw;
    width: 1.5vw;
    margin-left: .5vw;
  }

  .library-tabs .tab {
    padding: 2vw;
  }

  .goals .card-body,
  .volunteering .volunteer-tiles .col-lg-6 .card .card-body,
  .deanship-agencies .agencies-tiles .col-lg-6 .card .card-body {
    padding: 2vw 3vw;
  }

  .data-tiles .col-lg-3 .pattern,
  .about-swiper .pattern,
  .goals-container .pattern {
    position: absolute;
    top: .7vw;
    left: 1.25vw;
    width: 5.5vw;
    height: 5.5vw;
  }

  .data-tiles .col-lg-3 .pattern,
  .about-swiper .pattern,
  .goals-container .pattern {
    left: 2.25vw;
  }

  .goals-container .goals {
    margin-top: 5vw;
  }

  .faqs .faq-group .faq-item .faq-details {
    padding: 0rem 4vw 0px 0px;
    margin: 2vw 0px;
    font-size: 1vw;
  }

  html p {
    font-size: 1vw;
  }

  .research-production .desc {
    font-size: 1.1vw;
  }

  .research-production .title,
  .research-collaboration .title {
    font-size: 2.5vw;
  }

  .Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text {
    padding: 0 3vw;
  }

  .Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-title {
    padding: 2vw 3vw;
  }

  .care-tiles .card {
    min-height: 15vw;
    margin-bottom: 2vw;
  }

  .care-tiles .card .pattern {
    top: 1.25vw;
    left: 1.25vw;
  }

  .care-tiles .card .card-body .card-title {
    font-size: 1.4vw;
    margin-bottom: 0.75vw;
  }

  .search .search-btn,
  .associates-search .search-btn {
    padding: 1vw 1.5vw 1vw 3vw;
    font-size: 1vw;
  }

  .associates-search {
    margin: 0 0 3vw;
  }

  .proxies {
    padding-bottom: 6vw;
  }

  .proxies .cards-container .col-lg-4 .card .card-body .buttons-container,
  .advisors .cards-container .col-lg-3 .card .card-body .buttons-container {
    height: 3.7vw;
    margin-top: 2vw;
  }

  .proxies .cards-container .card .card-body .social-icons .icon,
  .advisors .cards-container .card .card-body .social-icons .icon {
    height: 3vw;
    width: 3vw;
  }

  .proxies .cards-container .card .card-body .card-text,
  .advisors .cards-container .card .card-body .card-text {
    font-size: 1vw;
  }

  .proxies .cards-container .card .card-body .card-title,
  .advisors .cards-container .card .card-body .card-title {
    font-size: 1.4vw;
    margin-bottom: 0.75vw;
  }

  .proxies .cards-container .card .card-body,
  .advisors .cards-container .card .card-body {
    margin-top: 2vw;
  }

  .profile-section .social-icons .icon {
    margin-left: 1vw;
    height: 3vw;
    width: 3vw;
  }

  .profile-section .social-icons {
    padding: 1.5vw;
  }

  .profile-section .image-container {
    width: 29vw;
    height: 40vw;
    top: -4vw;
  }

  .supreme-president .president-informations .buttons-container .btn:last-child {
    margin-right: 1.5vw;
  }

  .supreme-president .president-informations .buttons-container .btn {
    padding: .8vw 2.3vw;
    border-radius: .5vw;
    margin-bottom: 1vw;
    font-size: 1vw;
  }

  p.description,
  div.description p {
    font-size: 1vw;
  }

  .supreme-president .president-informations .position,
  .agent-cv .position {
    font-size: 1.1vw;
    margin-top: .5vw;
    margin-bottom: 3vw;
  }

  .supreme-president .president-informations .president-name,
  .agent-cv .agent-name {
    font-size: 2.1vw;
  }

  .volunteering .volunteer-tiles .col-lg-6 .card li::before,
  .Deanship-agencies .agencies-tiles .col-lg-6 .card li::before {
    top: .7vw;
    right: -2.5vw;
    height: .8vw;
    width: .8vw;
  }

  .details-panel .labels .label {
    padding: .7vw 2vw;
    font-size: 1vw;
  }

  .accordions .accordion-body .card-text {
    padding: 1vw;
    font-size: .8vw;
  }

  .details-panel .tabs .card .card-text {
    font-size: 1vw;
  }

  .details-panel .tabs .card .card-title {
    font-size: 1.2vw;
  }

  .established-initiatives .accordion .card .category {
    padding: .5vw 2vw;
    font-size: 1vw;
  }

  .accordions .accordion-body img {
    margin-right: .5vw;
  }

  .accordions .accordion-body .card-text span {
    font-size: 1vw;
  }

  .faqs .faq-group .faq-item .header .faq-title,
  .accordions .header .question {
    font-size: 1.4vw;
  }

  .volunteering .nav.nav-tabs li.nav-item a.nav-link {
    margin: 0 2vw;
    font-size: 1vw;
  }

  p.contact-mail.container {
    font-size: 1.3vw;
    margin: 1.3vw 0;
  }

  .goals .column:nth-child(4n+1),
  .goals .column:nth-child(4n+4) {
    padding: 0;
  }

  .goals .card-text,
  .volunteering .volunteer-tiles .card .card-text,
  .Deanship-agencies .agencies-tiles .card .card-text {
    margin: 3vw 0;
    font-size: 1vw;
  }

  .tabular-view .submit-buttons .reset .icon {
    margin: 0 0.5vw;
  }

  .submit-buttons button {
    padding: 0.7vw 2.5vw;
    font-size: 1vw;
  }

  .tabular-view label span {
    border-radius: 99vw;
  }

  .tabular-view label {
    font-size: 1vw;
    margin-left: 2vw;
    margin-bottom: 1.5vw;
  }

  .form-check-input {
    margin-top: .3vw;
    margin-left: -1.25vw
  }

  .tabular-view .case-description .extent-of-influence .choices {
    margin: 1vw 0;
  }

  .tabular-view .case-description .extent-of-influence .title {
    margin-bottom: 2.2vw;
    font-size:1.3vw;
  }

  .tabular-view .case-description .extent-of-influence {
    margin-bottom: 3vw;
  }

  .radio-buttons {
    margin-right: 4vw;
  }

  .tabular-view .case-description textarea {
    margin-bottom: 4vw;
    font-size: 1vw;
    padding: 1vw;
  }

  .tabular-view .labels .label {
    padding: 1vw 4vw;
    font-size: 1vw;
    margin: 1vw;
  }

  h2.section-title {
    margin: 3vw auto 1vw;
    font-size: 2vw;
  }

  .input-section .input__label {
    top: 0vw;
    right: 20px;
    font-size: 1vw;
    padding: .9vw .1vw;
  }

  .input-section .input__field,
  .form-container form .input__field {
    padding: .8vw 1.3vw;
  }

  .tabular-view .description {
    font-size: 1vw;
  }

  .tabular-view .nav-link .icon {
    height: 2vw;
    width: 2vw;
    margin-left: .5vw;
  }

  .reports .report .description {
    font-size: 1vw;
    margin-top: 1vw;
  }

  .reports .report {
    margin-bottom: 4vw;
  }

  .reports .report .icon {
    padding: 2vw;
    max-width: 7vw;
    max-height: 7vw;
  }

  .security-report .header .description {
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

  .contact-collapse .contact-infos .icon:first-child {
    margin: 0 .5vw;
  }

  .contact-collapse .contact-infos .icon {
    height: 2.5vw;
    width: 2.5vw;
  }

  .accordion-container .contact-collapse .informations .location {
    font-size: 1vw;
  }

  .accordion-container .contact-collapse .informations .subtitle {
    margin-bottom: 1vw;
  }

  .accordion-container .contact-accordion {
    padding: 3vw 1.5vw;
    font-size: 1.6vw;
  }

  .branches .card .card-body .card-text {
    margin-bottom: 1vw;
  }

  .branches .card-footer .icon {
    height: 2.5vw;
    width: 2.5vw;
    margin: 0 0.4vw;
  }

  .branches .card .card-body .location {
    font-size: .9vw;
  }

  branches .card .card-body .card-text {
    margin-bottom: 1vw;
    font-size: 1vw;
  }

  .branches .card .card-body .card-title {
    font-size: 1.4vw;
    margin-bottom: 4vw;
  }

  .branches .card .pattern {
    left: 1vw;
    top: 1vw;
    height: 5vw;
    width: 5vw;
  }

  .contact-us .branches-otherservices .otherservices .card,
  .contact-us .branches-otherservices .branches .card {
    margin-bottom: 2vw;
  }

  .contact-us .branches-otherservices .description {
    font-size: 2.3vw;
    margin: 3vw 0px;
  }

  .contact-us .map-container .zoom-controls {
    right: 6vw;
  }

  .map-container .gotomap {
    left: 5vw;
  }

  .contact-us .contact-infos .phone img,
  .contact-us .contact-infos .email img,
  .contact-us .contact-infos .fax img {
    margin-left: 1vw;
    height: 1.5vw;
  }

  .contact-us .contact-infos .phone,
  .contact-us .contact-infos .email,
  .contact-us .contact-infos .fax {
    font-size: 1vw;
    padding: 1vw 3vw;
  }

  .about-us .description,
  .contact-us-container .description,
  .departments .description,
  .open-data .description,
  .bar-chart .content .description,
  .future-leader .description,
  .safe-speech .description,
  .f-services .description,
  .news-ads .ads .description,
  .all-news-container .description {
    font-size: 1vw;
    margin: 1.5vw 0;
  }

  .contact-us .services .service a.start {
    margin-top: 2vw;
  }

  .contact-us .services .service .description {
    font-size: 1vw;
  }

  .faqs .be-in-contact .secondary-desc {
    font-size: 1vw;
  }

  .faqs .be-in-contact .main-desc {
    font-size: 1.5vw;
    margin-bottom: .8vw;
  }

  .faqs .faq-group .faq-item .faq-subheader {
    margin-top: 1.5vw;
    font-size: 1.1vw;
  }

  .faqs .faq-group .faq-item .header .faq-title {
    font-size: 1.5vw;
  }

  .faqs .faqs-search input {
    padding: 2vw 1vw;
    font-size: 1vw;
  }

  .faqs .faqs-search {
    margin: 5vw 0;
  }

  .details-panel .list ul li::before {
    top: .8vw;
    right: -1vw;
    height: .8vw;
    width: .8vw;
  }

  .details-panel .list ul li {
    padding: 0 2vw;
  }

  .details-panel .description {
    padding: 0 2vw;
    font-size: 1vw;
  }

  #sidePanelListTitle {
    padding-right: 1vw;
  }

  .details-panel .title {
    font-size: 1.5vw;
    padding: 2vw;
  }

  .details-panel img {
    max-height: 20vw;
  }

  .details-panel .close {
    right: -4vw;
    top: 1.5vw;
  }

  .services-container .swiper-button-prev {
    transform: translateX(-2vw) scale(.7) rotate(180deg);
  }

  .services-container .swiper-button-next {
    transform: translateX(2vw) scale(.7) rotate(0);
  }

  .search-footer .link {
    font-size: 1vw;
  }

  std-activities {
    margin-top: 4vw;
  }

  .loadMore {
    margin: 0 auto 3vw;
  }

  .opportunities .card {
    margin-bottom: 1.25vw;
    height: 26vw;
  }

  .footer.buttons {
    font-size: 1vw;
  }

  .opportunities .card .card-text {
    font-size: 1vw;
    margin: 1.5vw 0;
  }

  .opportunities .card .card-body {
    padding-bottom: 2vw;
  }

  .leaders .swiper-button-next {
    left: 5vw !important;
  }

  .leaders .swiper-button-prev {
    right: 5vw !important;
  }

  .functional-competitions.container {
    padding-bottom: 6vw;
  }

  .functional-competitions h1.title {
    margin-bottom: 4vw;
  }

  .competitions .card-img-overlay {
    font-size: 1.3vw;
  }

  .competitions .swiper-wrapper {
    height: 28vw;
  }

  nav-tabs .nav-item .nav-link {
    padding: 1.4vw 4vw;
  }

  .nav-tabs .nav-item .nav-link {
    margin: 0 0 0 1.4vw;
    font-size: 1vw;
  }

  .university-services .services-container {
    padding: 4vw 1vw;
  }

  .swiper-container.tabpane-swiper {
    margin: 0 6vw;
  }

  .university-services .partnership .company-desc .cta svg {
    width: 2vw;
    height: 2vw;
  }

  .card.partnership {
    height: 22vw;
  }

  .university-services .partnership .company-desc .name {
    font-size: 1vw;
  }

  .life-jeddah .card .icon {
    width: 1.4vw;
    height: 1.4vw;
  }

  .life-jeddah .tiles-container .card .card-img-overlay .card-title {
    font-size: 1.1vw;
  }

  .life-jeddah .card,
  .life-jeddah .col-lg-3 .card .card-img-top img,
  .life-jeddah .col-lg-3 .card .card-img-top {
    height: 27vw;
  }

  .pattern-image a img {
    height: 1.5vw;
    width: 1.5vw;
    margin-left: 0.5vw;
  }

  .pattern-image .row .patt .txt {
    font-size: 1.1vw;
    margin: 0 1vw 0;
  }

  .pattern-image a {
    margin: .5vw;
    padding: 1.1vw 2vw;
  }

  .pattern-image {
    padding: 3vw 0;
  }

  .pattern-image .row {
    margin: auto auto 4vw;
  }

  .pattern-image .row.one {
    width: 48vw;
  }

  .pattern-image .row.two,
  .pattern-image .row.six {
    width: 75vw;
  }

  .pattern-image .row.three {
    width: 82vw;
  }

  .pattern-image .row.four {
    width: 91vw;
  }

  .pattern-image .row.five {
    width: 82vw;
  }

  .plan .more-news::after {
    height: 1.5vw;
    width: 1.1vw;
    margin: 0 1vw 0 0.5vw;
  }

  .plan .more-news,
  .plan .more-news:hover {
    padding: 1vw 1.8vw;
  }

  .story.container {
    padding-top: 4vw;
    padding-bottom: 4vw;
  }

  .leaders .card .leader-msg {
    padding: 2vw;
  }

  .leaders .swiper-slide {
    max-height: 28vw;
  }

  .leaders .card {
    min-height: 28vw;
  }

  .leader-msg .achievement {
    font-size: 1vw;
  }

  .card .icon {
    width: 2vw;
    height: 2vw;
  }

  .leader-msg .leader-name {
    font-size: 1.2vw;
    margin-bottom: .5vw;
  }

  .leaders .card .card-text {
    font-size: 1vw;
  }

  .data-tiles .col-lg-3 .card .card-body .info .value,
  .about-swiper .swiper-slide .card .value {
    font-size: 2.5vw;
  }

  .about-swiper .swiper-wrapper .swiper-slide .card .card-body .content .subt {
    font-size: 1vw;
  }

  .about-swiper-section .card .icon {
    height: 4vw;
    width: 4vw;
  }

  .about-swiper .swiper-wrapper .swiper-slide .card {
    height: 15vw;
    margin-bottom: 2vw;
  }

  .news-advertisements .news-item .card-img-overlay .date .month-year,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date .month-year {
    font-size: 1.2vw;
    margin-top: -.5vw;
  }

  .news-advertisements .news-item .card-img-overlay .day,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .day {
    font-size: 3.5vw;
  }

  .achievements .news-advertisements .nav-link {
    margin: 0px 0.5vw;
    font-size: 1vw;
    padding: .5vw 1vw;
  }

  a.about-vision {
    margin: 1vw auto;
    font-size: 1.1vw !important;
  }

  .contents .txt span {
    font-size: 2.5vw;
  }

  .uni-values {
    font-size: 2vw;
  }

  .values .description {
    margin: 3vw auto 4vw;
    font-size: 1vw;
  }

  .goals-container.container {
    padding-top: 3vw;
    padding-bottom: 2vw !important;
  }

  .goals .column {
    padding: 0 2vw 0 0;
    margin-bottom: 2vw;
  }

  .goals .card ul li::before {
    top: .7vw;
    right: -2.5vw;
    height: .8vw;
    width: .8vw;
  }

  .goals li,
  .volunteering .volunteer-tiles .card .card-body .card-text li,
  .Deanship-agencies .agencies-tiles .card .card-body .card-text li {
    margin-bottom: 1.5vw;
    font-size: 1vw;
  }

  .goals .card-title,
  .volunteering .volunteer-tiles .card .card-title,
  .Deanship-agencies .agencies-tiles .card .card-title {
    font-size: 1.6vw;
  }

  .content-viewer-alt-dark .story .image-container {
    margin-top: 0;
  }

  .story .image-container {
    max-height: 25vw;
    margin-top: 1vw;
  }

  .opportunities.availablevacancies .card {
    height: 23vw;
  }

  .opportunities .swiper-slide .card .footer.buttons .apply-now {
    padding: 0.7vw 1.7vw;
    font-size: 1vw;
    margin-left: 1vw;
  }

  .opportunities .swiper-slide .card .date svg {
    width: 1vw;
    margin-left: 0.5vw;
  }

  .opportunities .swiper-slide .card .date span {
    font-size: 1vw;
  }

  .opportunities .swiper-slide .card .card-title,
  .opportunities .card .card-title {
    font-size: 1.6vw;
  }

  .opportunities-main h1.title {
    margin-bottom: 4vw;
  }

  .enrollment.swiper .swiper-slide .readmore {
    font-size: 1.1vw;
    padding: 0.9vw 3.6vw;
    margin: 3vw 0;
  }

  .enrollment.swiper .swiper-slide .title {
    font-size: 4vw;
  }

  .container.description.fade-left {
    margin-bottom: 2vw;
    margin: 1.5vw 0;
    font-size: 1vw;
  }

  .container.description.fade-left h6 {
    font-size: 1vw;
  }

  .section-title.aos-init.aos-animate {
    font-size: 4vw;
    margin-bottom: 3vw;
  }

  .season-container .season-body .information {
    margin-top: 2vw;
  }

  .season-container .season-body .header .certificate {
    margin: 0 1vw;
  }

  .accordion ul li .date .from svg,
  .accordion ul li .date .to svg {
    height: 1vw;
    width: 1vw;
    margin: 0px 0.6vw;
  }

  .accordion .season-header .title {
    font-size: 2vw;

  }

  .footer .footer-contents .mobile-apps .stores {
    margin-top: 1vw;
  }

  .mobile-apps .social-icons {
    margin-top: 2vw;
    padding-top: 2vw;
  }

  .mobile-apps .social-icons div:first-child {
    font-size: 1vw;
  }

  .international-students .card-img-overlay .footer a {
    padding: 0.6vw 1.5vw;
    margin-top: 1vw;
  }

  .international-students .pattern img {
    width: 5vw;
    height: 4vw;
  }

  .international-students .card-img-overlay .header .title {
    font-size: 2vw;
    margin-bottom: 2vw;
  }

  .shortcuts .open-data .desc,
  .shortcuts .map .desc,
  .shortcuts .accessibility-services .desc {
    font-size: 1.1vw;
  }

  .shortcuts .open-data .icon,
  .shortcuts .map .icon,
  .shortcuts .accessibility-services .icon {
    margin-bottom: 0.5vw;
  }

  .shortcuts .open-data .icon svg,
  .shortcuts .map .icon svg,
  .shortcuts .accessibility-services .icon svg {
    width: 6.5vw;
  }

  .step .date {
    border-radius: 2vw;
  }

  .step:nth-child(5n+3) .start-date .from,
  .step:nth-child(5n+3) .start-date .date,
  .step:nth-child(5n+3) .end-date .to,
  .step:nth-child(5n+3) .end-date .date {
    padding: .5vw 1vw;
  }

  .step .header .num {
    font-size: 3.5vw;
  }

  .step .header .title {
    font-size: 1.2vw;
  }

  .steps {
    height: 50vw;
  }

  .step .instruction span {
    font-size: 1vw;
  }

  .step:nth-child(even) .instruction {
    bottom: 10vw;
  }

  .step .header {
    min-width: 18vw;
  }

  .story .our-story {
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

  .our-story .subtitle {
    font-size: 1.2vw;
    margin-top: .8vw;
  }

  .our-story .description {
    margin-top: 2vw;
    font-size: 1vw
  }

  .our-story .title {
    font-size: 2.3vw;
  }

  .uoj-breadcrumb .icon {
    width: 0.4vw;
    margin: 0 0.5vw;
  }

  .uoj-breadcrumb .page a {
    font-size: .9vw;
  }

  .search svg,
  .accessibility svg,
  .menu svg {
    height: 1.7vw;
  }

  #myTopnav .search svg {
    width: 2vw;
  }

  .footer-bottom.container {
    padding-top: 2vw;
    padding-bottom: 2vw;
    font-size: .9vw;
  }

  .registration-footer .stamp-img {
    width: 12vw;
  }

  .footer-bottom .copyright,
  .footer-bottom .visitors {
    font-size: 1vw;
  }

  .footer-contents .links-container .title:after {
    right: 8.4vw;
  }

  .footer .footer-contents .title {
    font-size: 1.3vw;
  }

  .footer .footer-contents .links .column-1 .links-container a,
  .footer .footer-contents .links .column-2 .links-container a {
    margin-bottom: 1vw;
    font-size: 1vw;
  }

  .mobile-apps .social-icons a {
    margin: 0 .3vw;
  }

  .footer-contents .social-icons .fb svg,
  .footer-contents .social-icons .insta svg {
    height: 1.25vw;
  }

  .container {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .gray-bg.container {
    padding-top: 2vw;
    padding-bottom: 2vw;
  }

  .footer-contents .links .links-container {
    padding-top: 2vw;
  }

  .footer-contents .links-container .title {
    margin: 0 4vw;
  }

  .testimonials .card .card-body .user .info .position {
    font-size: 0.8vw;
  }

  .testimonials .card .card-body .desc,
  .testimonials .card .card-body .user .info .name {
    font-size: 1vw;
  }

  .news-advertisements a.more-news-btn span img,
  .uni-testimonials .read-more span img,
  .available-programs .read-more span svg,
  .achievements .more-news-btn svg {
    height: 1vw;
  }

  .uni-testimonials a.more-testimonials-btn span::after,
  .news-advertisements a.more-news-btn span::after,
  .steps-app .more-news-btn span::after {
    top: -.6vw;
  }

  .news-advertisements a.more-news-btn,
  .uni-testimonials .read-more,
  .available-programs .read-more,
  .achievements .read-more-btn,
  .steps-app .more-news-btn {
    font-size: 1.4vw;
    margin-bottom: 2vw;
    margin-top: 1vw;
  }

  .news-advertisements .news-item .card-img-overlay .date,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date {
    font-size: 2.5vw;
  }

  .news-advertisements .news-item .card-title,
  .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .card-title,
  .achievements .card .description {
    font-size: 1.3vw;
  }

  .news-advertisements .news-item {
    height: 35vw;
  }

  .tab-links li {
    font-size: 1.1vw;
  }

  .news-advertisements .section-toggle a,
  .acheivements .section-toggle a {
    margin: 0 0.5vw;
  }

  .focus-area .focus-body .links .link-holder .icon {
    width: 2vw;
    height: 2vw;
  }

  .focus-area .focus-body .links .link-holder .link {
    font-size: 1.6vw;
  }

  .focus-area .focus-body .links .link-holder {
    padding: 3vw 3vw 3.1vw 6vw;
  }

  .swiper.programs .swiper-slide .card {
    min-height: 30vw;
  }

  .swiper.programs .swiper-slide .card .card-img-top {
    height: 30vw;
  }

  .swiper.programs .swiper-slide .card .card-img-overlay .cta {
    height: 2vw;
    width: 2vw;
  }

  h1.title {
    padding: 3vw 0 0 0;
  }

  .scroll.topnav .options .accessibility,
  .scroll.topnav .options .search,
  .scroll.topnav .options select {
    padding: 0px 0.8vw;
    width: 3vw;
  }

  .topnav.scroll .electronic-button {
    padding: 0.5vw 1.2vw;
    border-radius: 1vw;
    font-size: 0.95vw;
  }

  .sub #myTopnav.scroll .links a,
  body.toolbar-horizontal #myTopnav.scroll .links a  {
    font-size: 1vw;
  }

  #myTopnav.scroll .links a {
    font-size: 0.9vw;
  }

  .message-tiles .card .card-text {
    font-size: .7vw;
  }

  .message-tiles .card .card-title {
    font-size: 1.5vw;
    margin: 1vw 0;
  }

  .uoj-electronic .desc {
    font-size: 1vw;
  }

  .uoj-electronic img {
    width: 8vw;
  }

  .topnav .options .accessibility,
  .topnav .options .search,
  .topnav .options .menu,
  .topnav .options select {
    padding: 0px 0.8vw;
    width: 2.8vw;
  }

  .topnav .links a {
    padding: 0px 1vw;
  }

  .navbar a.nav-link,
  .navbar a.dropdown-toggle {
    font-size: 1vw;
  }

  .topnav .logo-container .long img,
  .scroll .logo-container .long img {
    width: 10vw;
    height: 4.5vw;
  }

  .logo-container div svg,
  .topnav .logo-container div img {
    width: 4vw;
    height: 4vw;
  }
  p.description {
    font-size: 1vw;
  }
  h1.section-title,
  h1.title {
    font-size: 3vw;
  }
  .uoj-electronic {
    top: 12vw;
    left: 11vw;
  }
  .beta-ribbon,
  .sub .beta-ribbon,
  body.toolbar-horizontal .beta-ribbon {
    width: 10.5vw;
    font-size: .9vw;
    top: 1.4vw;
    left: -2.8vw;
    background-size: 200%;
    background-position-x: 49%;
    transform: rotate(-45deg);
  }

  .uni-statistics .stat .title {
    font-size: 1.2vw;
  }

  .uni-statistics .stat .value {
    font-size: 1.3vw;
  }

  .uni-statistics .stat {
    padding: 1vw 2.5vw;
  }
  .leaflet-top {
    bottom: 1rem;
  }

  #map {
    height: calc(100vh - 6.7rem);
  }

  .right-section {
    top: -1.4rem;
  }

  .leaflet-popup-tip-container {
    left: -0.5rem !important;
    bottom: 154px !important;
  }
}
@media (min-width:1700px) {
  .modal.acc-modal {
    top: 5vw;
    left: 4.7vw;
  }
}
@media (min-width:1920px) {
  .modal.acc-modal {
    top: 6.5vw;
    left: 5.5vw;
  }
}