.shadowLight{
    box-shadow: 0 0 17px 0 rgba(0,0,0,0.1);
}

  
.d-line-separator > .text {
  position: relative;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--grayMedium);
  text-align: center;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

 .d-line-separator > .text::after {
    margin-left: 30px;
  }
  
   .d-line-separator > .text::before {
    margin-right: 30px;
  }
  
.d-line-separator > .text::before, .d-line-separator > .text::after {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    content: '';
    background-color: #bbbcbc;
    opacity: 0.5;
    height: 1px;
    width: 250px;
}

.displayNone{
    display: none !important;
}

/**
*** Image ***
************/

.imgFluid{
    width: 100%;
    height: auto;
}

/**
*** SLIDER *** 
**************/

.logoSlider .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.logoSlider .swiper-slide img{
    height: auto;
    max-height: 100px;
    max-width: 100%;
}

/****************
*** ACCORDION ***
****************/

.accordionJobWrapper {

    border-bottom: 1px solid var(--greenDark);
    padding: 5px;

}

.accordionJobHeader{
    position: relative;
    padding: 10px 0;
}

.accordionJobHeader p{
    cursor: pointer;
    font-weight: 500;
    line-height: 1.5;
    font-size: 1rem;
}

.accordionJobHeader p .material-symbols-outlined{
    font-size: 1rem;
    line-height: 1.3;
    padding: 0;
    margin: 0;
    vertical-align: text-bottom;
    color: var(--greenDark);
    
}
.accordionJobHeader .ulJobTitle,
.ulNavIcons{
    margin: 0;
    padding: 0;
    display: flex;
}

.iconNavBar{
    
}

.openAccordionNav{
    position: relative;
    cursor: pointer;
    width: 40px;
    text-align: center;
}

.ulNavIconsHidden{
    position: absolute;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid var(--greenDark);
    border-radius: 5px;
    z-index: 3;
    padding: 10px 10px 5px 10px;
    display: none;
    margin: 10px 0 0 0;
    box-shadow: 0 0px 12px rgb(0 0 0 / 55%);
    max-width: 100%;
    text-align: center;
    width: max-content;
}

.ulNavIconsHidden li{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 5px 10px 10px 10px;
    text-align: center;
    padding: 0 0px 0 10px!important;
    font-weight: 300;
    color: var(--black);
    font-size: 0.825rem;
}




.ulNavIcons{
    display:block;
    text-align: end;
}

.accordionJobHeader .ulJobTitle li,
.ulNavIcons li{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0 0 0 5px;
}

.ulNavIcons li{
    text-align: center;
    padding: 0 0px 0 10px!important;
    font-weight: 300;
    color: var(--black);
    font-size: 0.825rem;
}

.ulNavIcons li a,
.ulNavIcons li a:hover,
.ulNavIconsHidden li a,
.ulNavIconsHidden li a:hover{
    text-align: center;
    font-size: 0.825rem;
    display: inline-block;
    text-decoration: none;
    font-weight: 300;
    color: var(--black);
}

.ulNavIcons li .material-symbols-outlined,
.ulNavIcons li a .material-symbols-outlined,
.ulNavIconsHidden li .material-symbols-outlined,
.ulNavIconsHidden li a .material-symbols-outlined{
    font-size: 1rem;
    line-height: 1.3;
    padding: 0;
    margin: 0;
    vertical-align: text-bottom;
    color: var(--greenDark);
    
}

.rotate-90 > span { 
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: .5s;
}



.accordionJobHeader .ulJobTitle li p{
    margin: 0;
    padding: 0;
}

.accordionJobContent {
    display: none;
    padding-left: 20px;
    padding-bottom: 0px;
    padding-right: 20px;
    padding-top: 20px;
    overflow-x: auto;

}

.accordionJobContent .table th,
.accordionJobContent .table td{
    font-size: 0.875rem;
}

.accordionJobContent .table tr:last-child th,
.accordionJobContent .table tr:last-child td{
    border-bottom: none !important;
}

.accordionStandard{
    margin-bottom: 30px;
    border-left: 2px solid var(--greenDark);
    box-shadow: 0 0px 12px rgb(0 0 0 / 55%);
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
}

.accordionStandard .accordionHeader{
    padding: 20px 20px 10px 20px;
    position: relative;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}

.accordionStandard .accordionHeader.accordionActive{
    background-color: var(--greenLight);
}

.accordionStandard .accordionHeader h3{
    font-weight: 500;
    line-height: 1.3;
    font-size: 1.250rem;
}

.accordionStandard .accordionHeader .spanAccordionArrow{
    position: absolute;
    right: 20px;
    padding: 0;
    margin: 0;
    top: 20px;
    z-index: 2;
}

.accordionStandard .accordionHeader .spanAccordionArrow img{
    width: 30px;
    height: auto;
    transition: .5s;
}

.accordionStandard .accordionHeader.accordionActive .spanAccordionArrow img{
    transform: rotate(90deg);
    transition: .5s;
}



.accordionStandard .accordionContent{
    display: none;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 20px;
    padding-top: 20px;
}

.accordion {

    margin-bottom: 10px;
    margin-left: 0px;

}

.accordion .accordionWrapper {

    border-bottom: 1px solid var(--greenDark);
    padding: 5px;
    margin-bottom: 10px;

}

.accordion .accordionHeader {

    cursor: pointer;
    position: relative;
    padding-right: 50px;
    padding-bottom: 10px;

}

.accordion .accordionHeader h3 {

    font-size: 1.250rem;
    line-height: 1.3;
    color: var(--greenDark) !important;
    padding: 0;
    margin: 0;
    font-weight: 300;
    padding-left: 0px

}

.accordion .accordionHeader span.openAccordion {

    position: absolute;
    right: 20px;
    padding: 0;
    margin: 0;
    top: 0px;
    z-index: 2;

}

.accordion .accordionHeader span.openAccordion::after {
    content: '\0002B';
    color: var(--greenDark);
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    padding: 5px 10px;
    line-height: 1.5rem;
}

.accordion .accordionHeader span.accordionActive::after {
    content: '\2212' !important;
    color: var(--greenDark);
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    border-radius: 50%;
    padding: 5px 10px;
    line-height: 1.5rem;
}

.accordionOpen .accordionContent {

    display: block;

}

.accordion .accordionContent {
    display: none;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-top: 10px;

}

/**
*** DIV Card Job Details ***
****************************/

.cardJobDetails{
    border-bottom: 1px solid var(--grayLight);
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.cardJobDetails .jobItem p{
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0;
    font-weight: 500;
}

.cardJobDetails .jobItem p .material-symbols-outlined{
    font-size: 1rem;
    line-height: 1.0;
    margin: 0;
    vertical-align: text-bottom;
}

.cardJobDetails .jobItemDetail,
.cardJobDetails .jobItemDetail p{
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0;
    font-weight: 300;
}

.cardJobDetails .jobItemDetail .material-symbols-outlined,
.cardJobDetails .jobItemDetail p .material-symbols-outlined{
    font-size: 1rem;
    line-height: 1.0;
    margin: 0;
    vertical-align: text-bottom;
}


/**********
*** DIV Application
*****/

.divApplication{
    margin: 0;
    padding: 10px 10px;
    border-bottom: 1px solid var(--greenDark);
    overflow-x: hidden;
}

.divApplication:last-child{
    margin: 0;
    padding: 10px 10px;
    border-bottom: none;
}

.divApplication p{
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.divApplication p span{
    margin: 0 !important;
    font-size: 0.875rem;
    font-weight: 300;
}

/***********
*** Card Job ***
***************/

.divJob{
    padding: 0;
    margin: 0 0 20px 0;
    box-shadow: 0 0px 12px rgb(0 0 0 / 55%);
    background-color: var(--grayExtraExtraLight);
}

.divJob .divJobCo{
    padding: 30px 30px 30px 30px;
    border-right: 1px solid var(--greenDark);
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.divJob .divJobCo a,
.divJob .divJobCo a:hover{
    text-decoration: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.divJob .divJobCo a img{
    width: 100%;
    height: auto;
    max-height: 100px;
}

.divJob .divJobDetails{
    padding: 20px 20px 20px 40px;
}

.divJob .divJobDetails h3{
    font-size: 1.250rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--greenDark);
}

.ulJobsOverview{
    display: block;
    padding: 0px 0 10px 0 ;
    margin: 0;
}

.ulJobsOverview li{
    list-style: none;
    display: block;
    padding: 0 0px 5px 10px;
    font-size: 1rem;
    line-height: 1.3;
}

.ulJobsOverview li .material-symbols-outlined{
    vertical-align: bottom;
  line-height: 1.3;
  font-size: 1.125rem;
  padding-right: 5px
}

/**
*** CARD Blog ***
****************/


.cardBlog {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 60px 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    box-shadow: 0 0 9px 0 rgba(0,0,0,0.6);
    border-bottom: 1px solid var(--greenDark);
}

.cardBlog .blogCat{
    width: 100%;
    background-color: var(--grayLight);
    padding: 5px 20px;
    margin: 1px 0 0 0;
    text-align: end;
}

.cardBlog .blogCat p{
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    color: var(--grayDark);
    margin-bottom: 0 !important;
}

.cardBlog .blogImage{
    padding: 0;
    width: 100%;
    margin: 0;
    height: 200px;
    
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--white);
    
}


.cardBlog .blogText {
    
    padding: 20px 20px 20px 20px;
    width: 100%;
    margin: 0;
    
}

.cardBlog .blogText h3{
    font-weight: 500;
    font-size: 1.250rem;
    color: var(--greenDark);
    
}

.cardBlog .blogFooter{
    width: 100%;
    padding: 0px 20px 20px 20px;
    margin: 0;
    position: absolute;
    z-index: 2;
    bottom: 0;
}

.cardBlog .blogFooter ul{
    padding: 0;
    margin: 0;
    display: block;
}
.cardBlog .blogFooter ul li{
    display: inline-block;
    list-style: none;
    width: 50%;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}

.cardBlog .blogFooter p{
    color: var(--grayMedium);
    font-size: 0.875rem;
    display: block;
    text-align: end;
    margin-top: 0;
    margin-bottom: 0px;
    padding: 0;
    line-height: 1;
}


/***
*** CARD ***
***********/

.cardDeckAuto {
    display: inline-flex;
    flex-wrap: wrap;
    margin: -20px 0 0 -20px;
    width: calc(100% + 20px);
}

.cardDeckAuto>* {
    margin: 20px 0 0 20px;
}

.cardDeck {
    --gap: 30px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: stretch;
}

.cardDeck.card-1 {
    --columns: 1;
}

.cardDeck.card-2 {
    --columns: 2;
}

.cardDeck.card-3 {
    --columns: 3;
}

.cardDeck.card-4 {
    --columns: 4;
}

.cardDeck.card-5 {
    --columns: 5;
}
.cardDeck.card-6 {
    --columns: 6;
}

.cardDeck.card-7 {
    --columns: 7;
}

.cardDeck .cardWithButton,
.cardDeck .cardCounter,
.cardDeck .cardTeam,
.cardDeck .cardRef,
.cardDeck .cardButton,
.cardDeck .cardInside,
.cardDeck .cardTabInside,
.cardDeck .cardBlog{
    width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}


.cardInside {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 0 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
}

.cardInside .form-check-label{
    font-size: 0.875rem !important;
    line-height: 1.3;
}

.cardTabInside {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 0 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
}

.cardButton{
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 0 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.cardButton .cardButtonHead{
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    top: -35px;
    
}

.cardButton .cardButtonIcon{
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--greenDark);
    padding: 15px;
    box-sizing: border-box;
    margin: 0;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: 77%;
    background-color: var(--white);
    box-shadow: 0 0 12px 2px rgba(0,0,0,0.6);
    
}

.cardButton .cardButtonIcon.imgJobCreator{
    background-image: url(/files/page/images/icons/ameba-JobCreator.png);
}

.cardButton .cardButtonIcon.imgJobAdmin{
    background-image: url(/files/page/images/icons/ameba-JobAdmin.png);
}

.cardButton .cardButtonIcon.imgJobPublisher{
    background-image: url(/files/page/images/icons/ameba-JobPublisher.png);
}

.cardButton .cardButtonIcon.imgTargeting{
    background-image: url(/files/page/images/icons/ameba-TARGETING.png);
}

.cardButton .cardButtonBody{
    padding: 10px 10px 10px 20px;
    background-color: var(--greenDark);
    margin: 0 0 0 60px;
    border-radius: 5px;
    color: var(--white);
    font-weight: 500;
    text-align: center;
    font-size: 1.125rem;
    box-shadow: 0 0 12px 2px rgba(0,0,0,0.6);
}




.cardCounter{
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 0 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    text-align: center;
}

.cardCounter p{
    font-weight: 400;
    font-size: 1.75rem;
}

.cardCounter p span{
    font-weight: 500;
    font-size: 2.5rem;
}

.cardTeam {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 0 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    box-shadow: 0 0 9px 0 rgba(0,0,0,0.6);
    background-color: var(--grayExtraLight);
    border-radius: 0 0 10px 10px;
    
}

.cardTeam .cardImage{
    width: 100%;
    padding: 0;
    background-color: var(--white);
    padding: 0 0 5px 0;
    
}

.cardTeam .cardImage img{
    width: 100%;
    height: auto;
}


.cardTeam .cardName{
    width: 100%;
    padding: 20px 20px 10px 20px;
    border-left: 1px solid var(--greenDark);
    border-right: 1px solid var(--greenDark);
}

.vCard h4,
.cardTeam .cardName h4{
    font-family: 'Bai Jamjuree';
    font-size: 1.250rem;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 0;
}

.vCard h4{
    color: var(--greenDark);
}

vCard p,
.cardTeam .cardName p{
    font-family: 'Bai Jamjuree';
    font-size: 1.000rem;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 0;
    font-weight: 400;
}


.cardTeam .cardContact{
    width: 100%;
    padding: 20px 20px 20px 20px;
    border-left: 1px solid var(--greenDark);
    border-bottom: 1px solid var(--greenDark);
    border-right: 1px solid var(--greenDark);
    border-radius: 0 0 10px 10px;
}

.vCard table td a,
.vCard table td a:hover,
.cardTeam .cardContact table td a,
.cardTeam .cardContact table td a:hover{
    font-weight: 300;
    text-decoration: none;
    font-size: 1rem;
    color: black;
}

.vCard table tr td,
.cardTeam .cardContact table tr.WhatsApp td{
    padding-top: 5px;
}

.vCard table tr td img,
.cardTeam .cardContact table tr.WhatsApp td img{
   width: 20px;
   height: auto;
}

.vCard table td span.material-symbols-outlined,
.cardTeam .cardContact table td span.material-symbols-outlined{
    color: var(--greenDark);
    font-size: 1.250rem;
    padding-right: 10px;
    vertical-align: middle;
}

.cardRef {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 30px 30px 10px 30px;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    box-shadow: 0 0 14px 0 rgba(0,0,0,0.1);
    
}

.cardRef p{
        font-size: 1.125rem;
        line-height: 1.5;
        font-weight: 400;
        text-align: justify;
}



.cardWithButton {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 90px 0;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    box-shadow: 0 0 9px 0 rgba(0,0,0,0.6);
    background-color: var(--white);
    border: 1px solid var(--white);
}

.cardWithButtonHead{
    
    width: 100%;
    background-color: var(--grayExtraLight);
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center
}

.cardWithButtonHead h2,
.cardWithButtonHead h2 span{
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
}

.cardWithButtonHead hr{
    border-top: 1px solid var(--grayMedium);
    padding: 0;
    margin: 10px 20px;
}

.cardWithButtonHead p{
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 400;
}

.cardWithButtonBody{
    background-color: var(--white);
    width: 100%;
    padding: 30px;
    text-align: center;
}

.cardWithButtonFooter{
    
    width: 100%;
    padding: 0 20px 0 20px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    
}

.cardWithButtonFooter hr{
    border-top: 1px solid var(--grayMedium);
    padding: 0;
    margin: 0;
}

/*
* Button
*/

.btnFooter,
.btnFooter:hover{
    padding: 10px 10px;
    margin: 0 0 0 0;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    background-color: var(--greenDarkExtra);
    width: 100%;
}

.btnMore,
.btnMore:hover{
    padding: 10px 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
    display: inline-block;
    background-color: var(--greenDark);
    color: var(--white);
    font-size: 1.125rem;
    width: 90%;
}

.btnMore:hover{
    box-shadow: 0 0px 12px rgb(0 0 0 / 75%);
}


.btnSmall,
.btnSmall:hover{
    padding: 10px 20px !important;
    margin-top: 0;
    border-radius: 5px;
    font-size: 1.000rem !important;
    line-height: 1.000rem !important;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
    display: inline-block;
}

.btnSmall .material-symbols-outlined,
.btnSmall:hover .material-symbols-outlined{
    font-size: 1.000rem;
    line-height: 1.000rem;
}

.btnRegular,
.btnRegular:hover{
    padding: 15px 30px;
    margin-top: 0;
    border-radius: 5px;
    font-size: 1.250rem !important;
    line-height: 1.250rem !important;
    font-weight: 500 !important;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
    display: inline-block;
}

.btnRegular .material-symbols-outlined,
.btnRegular:hover .material-symbols-outlined{
    font-size: 1.250rem;
    line-height: 1.250rem;
}

.btnLarg,
.btnLarg:hover{
    padding: 15px 40px;
    margin-top: 0;
    border-radius: 5px;
    font-size: 1.500rem !important;
    line-height: 1.500rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center;
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
    display: inline-block;
}

.btnLarg .material-symbols-outlined,
.btnLarg:hover .material-symbols-outlined{
    font-size: 1.500rem;
    line-height: 1.500rem;
}

.btnSmall:hover,
.btnRegular:hover,
.btnLarg:hover{
    box-shadow: 0 0px 12px rgb(0 0 0 / 65%) !important;
}

.btnWhite,
.btnWhite:hover{
    background-color: var(--white) !important;
    border: var(--white) !important;
    color: var(--greenDark) !important;
}

.btnGreenLight,
.btnGreenLight:hover{
    background-color: var(--greenLight) !important;
    border: var(--greenLight) !important;
    color: var(--white) !important;
}

.btnGreenMedium,
.btnGreenMedium:hover{
    background-color: var(--greenMedium) !important;
    border: var(--greenMedium) !important;
    color: var(--white) !important;
}

.btnGreenRegular{
    background-color: var(--greenRegular) !important;
    border: var(--greenRegular) !important;
    color: var(--white) !important;
}

.btnGreenRegular:hover{
    background-color: var(--greenDark) !important;
    border: var(--greenDark) !important;
    color: var(--white) !important;
}


.btnGreenDark{
    background-color: var(--greenDark) !important;
    border: var(--greenDark) !important;
    color: var(--white) !important;
}

.btnGreenDark:hover{
    background-color: var(--greenDarkExtra) !important;
    border: var(--greenDarkExtra) !important;
    color: var(--white) !important;
}

.btnRedRegular{
    background-color: var(--redRegular) !important;
    border: var(--redRegular) !important;
    color: var(--white) !important;
}

.btnRedRegular:hover{
    background-color: var(--redDark) !important;
    border: var(--redDark) !important;
    color: var(--white) !important;
}

.btnGrayLight{
    background-color: var(--grayLight) !important;
    border: var(--grayLight) !important;
    color: var(--black) !important;
}

.btnGrayLight:hover{
    background-color: var(--grayLight) !important;
    border: var(--black) !important;
    color: var(--black) !important;
}


.btnGreenRegular.btnSpinning .material-symbols-outlined,
.btnGreenRegular.btnSpinning:hover .material-symbols-outlined,
.btnGreenDark.btnSpinning .material-symbols-outlined,
.btnGreenDark.btnSpinning:hover .material-symbols-outlined,
.btnRedRegular.btnSpinning .material-symbols-outlined,
.btnRedRegular.btnSpinning:hover .material-symbols-outlined,
.btnGrayLight.btnSpinning .material-symbols-outlined,
.btnGrayLight.btnSpinning:hover .material-symbols-outlined{
    display: none;
}

.btnGreenRegular.btnSpinning.spinning .material-symbols-outlined,
.btnGreenRegular.btnSpinning.spinning:hover .material-symbols-outlined,
.btnGreenDark.btnSpinning.spinning .material-symbols-outlined,
.btnGreenDark.btnSpinning.spinning:hover .material-symbols-outlined,
.btnRedRegular.btnSpinning.spinning .material-symbols-outlined,
.btnRedRegular.btnSpinning.spinning:hover .material-symbols-outlined,
.btnGrayLight.btnSpinning.spinning .material-symbols-outlined,
.btnGrayLight.btnSpinning.spinning:hover .material-symbols-outlined{
    display: inline-block !important;
}

.btnSpinning.spinning{
    cursor: no-drop !important;
}

.btnSpinning.spinning .material-symbols-outlined{
    margin-right: 0px;
    animation: rotate360 .9s infinite linear;
    transition: .5s;
    margin-left: 10px;
}

@keyframes rotate360 { 
    100% {
        transform: rotate(360deg);
    }
}

/*
*** TABS
*/


.tabsContent{
    border-left: 1px solid var(--grayLight);
    border-right: 1px solid var(--grayLight);
    border-bottom: 1px solid var(--grayLight);
    padding: 20px;
}

ul.ulTabs{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.ulTabs li{
    flex-grow: 1;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    background-color: var(--greenDark);
    border-radius: 10px 10px 0 0;
    border-top: 1px solid var(--grayMedium);
    border-left: 1px solid var(--grayMedium);
    border-right: 1px solid var(--grayMedium);
    border-bottom: 1px solid var(--grayLight);
    margin-right: 2px;
}

.ulTabs li:last-child{
    margin-right: 0 !important;
}

.ulTabs li.liTabsActive{
    border-bottom: none;
    border-left: 1px solid var(--grayLight) !important;
    border-right: 1px solid var(--grayLight) !important;
    border-top: 1px solid var(--grayLight) !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--white) !important;
}

.ulTabs li p{
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    margin-bottom: 0;
    color: var(--white);
}


.ulTabs li.liTabsActive p{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--black) !important;
}

.tabTwoContent {
  display: none;
  margin-left: 10px;
  margin-top: 10px;
  background-color: var(--grayExtraLight);
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
}

.tabTwoContent .ulTabsTwo li{
    border-right: none !important;
    width: 250px !important;
}

.ulTabsTwo{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
}

.ulTabsTwo li {
  width: 300px;
  text-align: left;
  padding-left: 0px;
  padding-top: 5px;
  padding-right: 40px;
  padding-bottom: 5px;
  margin-bottom: 0px;
  margin-left: 5px;
  position: relative;
  border-right: 1px solid var(--grayMedium);
  list-style: none;
}

.ulTabsTwo li .openTabTwo {
  position: absolute;
  right: 10px;
  padding: 0 10px 0 10px;
  margin: 0;
  top: 0px;
  z-index: 2;
}

.ulTabsTwo li .openTabTwo::after {
    content: '\002B';
    color: var(--greenDark);
    font-size: 1.5rem;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    transition: .5s;
}

.ulTabsTwo li .openTabTwo.activeTab::after {
    content: '\2212';
    color: var(--greenDark);
    font-size: 1.5rem;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    transition: .5s;
}

.ulTabsTwo li .form-check-inline {
  padding-left: 40px;
  padding-top: 0px;
}

.ulTabsTwo li div label {
  color: rgb(0,0,0);
  font-size: 1rem;
  font-weight: 500;
}

/**
*** Overlay ***
***/

.divSingleContact{
    width: 100%;
    max-width: 450px;
    border-radius: 5px;
    padding: 0;
    margin: 0 0 20px 0;
    background-color: var(--white);
}

.divSingleContact .divHead{
    width: 100%;
    border-radius: 5px 5px 0 0;
    background-color: var(--greenDark);
    padding: 20px 20px 20px 20px;
    border-radius: 5px 5px 0 0;
    text-align: center;
    border: 1px solid var(--white);
}

.divSingleContact .divHead h3{
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 10px;
}

.divSingleContact .divHead h5{
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 0;
    font-weight: 500; 
}

.divSingleContact .divImage{
    width: 100%;
    padding: 0;
    margin: 0; 
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);
}

.divSingleContact .divImage img{
    width: 100%;
    height: auto; 
}

.divSingleContact .divContact {
    width: 100%;
    border-radius: 0 0 5px 5px;
    background-color: var(--white);
    padding: 20px 20px 20px 20px;
    text-align: center;
    border-left: 1px solid var(--greenDark);
    border-right: 1px solid var(--greenDark);
    border-bottom: 1px solid var(--greenDark);
}


#overlay{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 99;
}

#overlayInner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#respondApplicants,
#noteApplicants{
    display: none;
}

.requestTargeting,
#respondApplicants,
#noteApplicants,
#popUpDefault,
.deletePopUp{
    border-radius: 5px;
    border: 1px solid var(--white);
    background-color: var(--white);
    box-shadow: 0 0px 12px rgb(0 0 0 / 65%) !important;
}

#respondApplicants{
    width: 560px;
}

#noteApplicants,
#popUpDefault,
.deletePopUp{
    width: 350px;
}

.requestTargeting .divHead,
#respondApplicants .divHead,
#noteApplicants .divHead,
#popUpDefault .divHead,
.deletePopUp .divHead{
    width: 100%;
    border-radius: 5px 5px 0 0;
    background-color: var(--greenDark);
    padding: 20px 20px 20px 20px;
}

.requestTargeting .divHead h4,
#respondApplicants .divHead h4,
#noteApplicants .divHead h4,
#popUpDefault .divHead h4,
.deletePopUp .divHead h4{
    font-weight: 500;
    font-size: 1.250rem;
    line-height: 1.5;
    margin: 0;
    color: var(--white);
}

.requestTargeting .divBody,
#respondApplicants .divBody,
#noteApplicants .divBody,
#popUpDefault .divBody,
.deletePopUp .divBody{
    width: 100%;
    background-color: var(--white);
    padding: 20px 20px 5px 20px;
    text-align: center;
}

.requestTargeting .divBody p,
#respondApplicants .divBody p,
#noteApplicants .divBody p,
#popUpDefault .divBody p,
.deletePopUp .divBody p{
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 300;
    margin-bottom: 0.8125rem;
    color: var(--black);
}

.requestTargeting .divBody ul,
#respondApplicants .divBody ul,
#noteApplicants .divBody ul,
#popUpDefault .divBody ul,
.deletePopUp .divBody ul{
    padding: 10px 0 20px 0;
    margin: 0;
}

.requestTargeting .divBody ul li,
#respondApplicants .divBody ul li,
#noteApplicants .divBody ul li,
#popUpDefault .divBody ul li,
.deletePopUp .divBody ul li{
    padding: 0 5px 0 5px;
    margin: 0;
    list-style: none;
    display: inline-block;
}

.requestTargeting .divFooter,
#respondApplicants .divFooter,
#noteApplicants .divFooter,
#popUpDefault .divFooter,
.deletePopUp .divFooter{
    background-color: var(--grayExtraLight);
    width: 100%;
    padding: 15px 15px 15px 15px;
    border-radius: 0 0 5px 5px;
    text-align: left
}

.requestTargeting .divFooter button,
#respondApplicants .divFooter button,
#noteApplicants .divFooter button,
#popUpDefault .divFooter button,
.deletePopUp .divFooter button{
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--black);
    border: none;
    background-color: var(--grayExtraLight);
}

.requestTargeting .divFooter button .material-symbols-outlined,
#respondApplicants .divFooter button .material-symbols-outlined,
#noteApplicants .divFooter button .material-symbols-outlined,
#popUpDefault .divFooter button .material-symbols-outlined,
.deletePopUp .divFooter button .material-symbols-outlined{
    font-size: 1.250rem;
    line-height: 1.0;
    margin-bottom: 0;
    vertical-align: text-bottom;
}






.swiper-wrapper {
  -webkit-transition-timing-function:linear!important; 
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; 
}

/****************
*** DIV Alert ***
*****************/

.divAlert{
    display: block;
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.divAlert p{
    margin-bottom: 0;
}

.divAlert.divAlertDanger{
    border: 1px solid var(--redRegular);
    background-color: var(--redTransparent);
}

.divAlert.divAlertSuccess{
    border: 1px solid var(--greenDark);
    background-color: var(--greenDarkTransparent);
}

.divAlert.divAlertNote{
    border: 1px solid var(--greenDark);
    background-color: var(--grayTransparent);
}

.divAlert.divAlertWarning{
    border: 1px solid var(--orangeRegular);
    background-color: var(--orangeTransparent);
}

.divAlert .alertIcon{
    min-width: 30px;
    min-height: 30px;
    padding-right: 10px;
}

.divAlert .alertText{
    min-height: 30px;
}

.divAlert.divAlertDanger .alertText{
    color: var(--redRegular);
}
.divAlert.divAlertWarning .alertText{
    color: var(--orangeRegular);
}


.divAlert.divAlertDanger .alertIcon .material-symbols-outlined{
    color: var(--redRegular);
    font-size: 1.250rem;
    line-height: 1.5;
    vertical-align: top;
}

.divAlert.divAlertNote .alertIcon .material-symbols-outlined{
    color: var(--greenDark);
    font-size: 1.250rem;
    line-height: 1.5;
    vertical-align: top;
}

.divAlert.divAlertWarning .alertIcon .material-symbols-outlined{
    color: var(--orangeRegular);
    font-size: 1.250rem;
    line-height: 1.5;
    vertical-align: top;
}

.divAlert.divAlertSuccess .alertText{
    color: var(--greenDark);
}

.divAlert.divAlertSuccess .alertIcon .material-symbols-outlined{
    color: var(--greenDark);
    font-size: 1.250rem;
    line-height: 1.5;
    vertical-align: top;
}


.divAlert .alertText{
    font-size: 1.125rem;
    padding: 0;
    margin: 0;
    font-weight: 500
}

.divAlert  .alertText a,
.divAlert  .alertText a:hover{
    font-size: 1.125rem;
    padding: 0;
    margin: 0;
    font-weight: 600;
    color: var(--black);
}


/***
*** Youtube Overlay ***
***********************/

.youtubeOverlay{
    width: 100%;
    margin: 0;
    padding: 30px 0 0 0;
    position: relative;
}

.youtubeOverlayInner{
    position: absolute;
    width: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.mfp-iframe-holder .mfp-content{
    max-width: 1200px;
}

.popup-youtube img{
    max-width: 100%;
    width: 100%;
    height: auto;
}

/***
*** Helper ***
*************/

.imgFluid{
    width: 100%;
    height: auto;
}