/* ============== TABLE OF CONTENTS ============== */

/* COMPONENTS
__Card
__Information, filter sidebar
__Filter and reset all buttons
__Criteria box - location
__Criteria box - checkbox
__Main content
__Add icon
__Grid - Vacancy page
__Pagination
__Table
__Information (aside) - Client overview page 
__Main content - Client overview page
__Add button container - Client conversations page
__Cards - Vacancies overview page 
__Info tabs - Vacancies overview page 
__Grid - Vacancies overview page
__Grid table - Clients page
__Modal
__Interviews modal - Vacancy overview page
__Client Map Box - Client Overview Page
__Vacancy overview modals
__Icon containers
__My profile page
__Time picker - Vacancy overview page
__Message boxes
__Export page
__Agencies page, Schools page
*/

/* ================================================ */


/* || SITE COMPONENTS */

/* ===== Card ===== */

.card {
    background-color: #fff; /* White */
    -webkit-box-shadow: 0 2px 8px rgba(85, 83, 99, 0.2);
    -moz-box-shadow: 0 2px 8px rgba(85, 83, 99, 0.2);
    box-shadow: 0 2px 8px rgba(85, 83, 99, 0.2);
    padding: 16px;
    color: #808080; /* Grey */
    border-radius: 10px;
}

.card__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    font-size: 13px;
    font-weight: 500;
}

.card__date-text {
    color: #e33434; /* Red */;
}

.card__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color:  #feae01; /* Dark orange */
}

.card__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    width: 100%;
}

.card__footer {
    color: #686a72; /* Darker Grey */
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px;
    margin-right: -20px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

}

.card__footer p:not(:first-child) {
    border-left: 2px solid #feae01; /* Dark orange */
    padding-left: 10px;
}


.card__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.card__button > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

.card__collapse-content, 
.card__collapse-content-2 {
    margin: 12px;
    padding: 6px 16px;
    display: none;
    overflow: hidden;
}

.page-num{
    color: #808080;
    padding: 8px;
    cursor: pointer;
}

.pagination .active{
    color: #feae01;
}

.page-num:hover{
    color: #feae01;
}

.hours-hover, 
.salary-hover {
    padding: 8px;
    cursor: pointer;
    color: #808080;
}

.hours-hover:hover,
.salary-hover:hover {
    color: #202125;
}

#vacancyContainer .card i {
    color: #686a72; /* Darker Grey */
}


/* ===== Information, filter sidebar ===== */

.information,
.filter {
    background-color: #fff; /* White */
    -ms-flex-preferred-size: 18%;
        flex-basis: 18%;
    overflow: hidden;
    -webkit-box-shadow: 3px 0 10px -10px rgb(0,0,0,0.9);
    box-shadow: 3px 0 10px -10px rgba(0,0,0,0.9);   
}


/* ===== Filter and reset all buttons ===== */

.filter__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #ffad00; /* Orange */
    color: #fff; /* White */
    padding: 18px 15px;
    gap: 15px;
}

.filter__text button {
    background-color: #ffad00; /* Orange */
    color: #fff; /* White */
    border: 0;
    font-size: 13px;
    text-align: right;
    padding: 5px 0 5px 16px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-radius: 20px;
    width: 50%;
}

.filter__text button:hover {
    color: #ebebeb; /* Light Grey */
}

.filter__text div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
            width: 42%;
            gap: 8px;
}

@media (max-width: 1601px) {
    .filter__text div {
        width: 56%;
        gap: 0;
    }
}


/* ===== Criteria box - location  ===== */

.filter__box {
    color: #808080; /* Grey */
    border-bottom: 2px solid #808080; /* Grey */
    margin: 15px;
    font-weight: 700;
}

.filter__label {
    display: inline-block;
    margin-top: 10px;
}

.location__input,
.filter__input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #808080; /* Grey */
    border-radius: 20px;
	padding: 7px 14px;
    background-color: #fff; /* White */
    margin-top: 5px;
}

.location__input button,
.filter__input button, 
.location__input input,
.filter__input input {
    border: 0;
    background-color: #fff; /* White */
}

.location__input input,
.filter__input input {
    width: 100%;
    margin-left: 10px;
}


/* ===== Criteria box - checkbox  ===== */

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 15px;
}

.container:hover input ~ .checkmark {
    background-color: #ccc;
}

.container input:checked ~ .checkmark {
    background-color: #ffad00; /* Orange */
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff; /* White */
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox__label {
    display: inline-block;
    margin-top: 3px;
}

.checkbox__wrapper {
    border-bottom: unset;
    font-weight: 400;
}

.checkbox__wrapper p {
    font-weight: 700;
}

.form__checkbox__container {
    width: 90%;
    margin: 0 auto 6px;
}

.form__checkbox__container p {
    margin-top: 8px;
    margin-bottom: 8px;
}

.form__checkbox__container > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

@media (max-width: 1696px) {
    .form__checkbox__container > div {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}


/* ===== Main content ===== */

.main {
    min-height: 772px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

}

.main__content {
    flex-basis: 82%;
}


/* ===== Add icon  ===== */

.add__icon__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 25px 15px;
    min-height: 72px;
}

.add__icon__container button {
    border: 0;
    font-size: 16px;
    color: #feae01; /* Dark orange */
}

.add__icon__container button:hover,
.secondary__nav__wrapper button:hover {
    color: #F98C1E; /* Darker orange */
}


/* ===== Grid - Vacancy page  ===== */

.grid__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 0 20px;
}


/* ===== Pagination ===== */

.pagination {
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
    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;
}

.pagination a {
    color: #808080; /* Grey */
    padding: 8px;
    text-decoration: none;
}
 
a.active,
.pagination a:hover:not(.active) {
    color:  #feae01; /* Dark orange */
}


/* ===== Table ===== */

table {
    border-collapse: collapse;
}

thead tr {
    color: #212227; /* Darker blue */
}

th, 
td {
    padding: 15px;
}

tbody tr:nth-child(odd) {
    background-color: #ebebeb; /* Light Grey */
}

.nav__activ {
    padding-bottom: 1px;
    border-bottom: 2px solid #feae01; /* Dark orange */
}


/* ===== Information (aside) - Clients Overview page ===== */

.client__img__container {
    margin: 10px auto;
}

.client__img__container img {
    max-width: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    margin: 20px auto 50px;
}

.client__img__container div {
    text-align: center;
    color: #808080; /* Grey */
    margin-top: 20px;
}

.client__details__container-2,
.client__details__container-3  {
    text-align: center;
    color: #808080; /* Grey */
    margin: 40px 16px 0;
}

.client__details__container-2 :nth-child(1){
    border: 0;
    text-transform: uppercase;
    color: #feae01; /* Dark orange */
    font-weight: 700;
    margin: 10px; 
}

.client__details__container-3 :nth-child(1) {
    color: #212227; /* Darker blue */
    font-weight: 700;
    margin-bottom: 10px;
}

.additional__info__container {
    text-align: center;
    background-color: #202125; /* Dark blue */
    color: #ffad00; /* Orange */
    padding: 35px;
}

.additional__info__container p {
    margin: 10px;
    font-weight: 700;
}

.additional__info__container a {
    display: inline-block;
    color: #ffad00; /* Orange */
    margin: 10px;
    font-weight: 700;
}

.additional__info__container a:hover {
    text-decoration: underline;
}


/* ===== Main content - Clients Overview page ===== */

.secondary__nav {
    text-transform: uppercase;
    font-weight: 700;
    color: #212227; /* Darker blue */
    padding: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px;
}

.secondary__nav a {
    color: #212227; /* Darker blue */
    padding-bottom: 1px;
}

.secondary__nav a:hover, 
.secondary__nav__active {
    padding-bottom: 1px;
    border-bottom: 2px solid #212227; /* Darker blue */
}

.secondary-nav-dropdown {
    position: relative;
    display: inline-block;
}

.secondary-nav-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff; /* White */
    min-width: 254px;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
    z-index: 1;
    padding: 8px;
    top: 22px;
}

.secondary-nav-dropdown-content a {
    padding: 12px 16px;
    display: block;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 500;
}

.secondary-nav-dropdown-content a:hover {
    background-color:  #ebebeb; /* Light Grey */
    border-bottom: unset;
    padding: 12px 16px
}

.secondary-nav-dropdown:hover .secondary-nav-dropdown-content {
    display: block;
}

.details__descr {
    grid-area: 1 / 1 / 2 / 2;
    margin-left: 20px;
}

.details__descr :nth-child(1) {
    color: #feae01; /* Dark orange */
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.details__descr :nth-child(2n) {
    color: #212227; /* Darker blue */
    font-weight: 700;
}

.details__descr :nth-child(3) {
    margin-bottom: 10px;
}

.map__img__container img {
    max-width: 100%;
}

.find__us__icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
    margin-bottom: 10px;
}

.find__us__icons i {
    margin-right: 5px;
}

.find__us__icons a {
    color: #808080; /* Grey */
}

.find__us__icons a:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #212227; /* Darker blue */
}

.grid__container__overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 340px);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
    
.main__contacts__table { 
    grid-area: 2 / 1 / 3 / 4; 
    margin: 0 20px 20px; 
    overflow-y: scroll; 
}

.main__contacts__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 15px;
    color: #feae01; /* Dark orange */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
}

.main__contacts__header button, 
.location__header button {
    border: 0;
    font-size: 16px;
    color: #feae01; /* Dark orange */
    background-color: #fff; /* White */
}

button[aria-label~="Add"]:hover {
    color: #F98C1E; /* Dark orange */
}

.main__contacts__table > table {
    width: 100%;
    padding: 15px;
    text-align: left;
}

.clients__overview__side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 40px;
}


/* ===== Add button container - conversations page ===== */

.callback__due__container,
.documents-add-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 15px;
    font-weight: 700;
    color: #808080; /* Grey */
    min-height: 51px;
}

.callback__due__container p {
    line-height: unset;
}

.callback__due__container button,
.documents-add-container button {
    border: 0;
    font-size: 16px;
    color: #feae01; /* Dark orange */
    background-color: #fff; /* White */
}

.callback__due__container > i {
    color: 	#de1330; /* Dark red */
    margin: 0 10px 5px;
}

.conversations__table {
    width: 100%;
    padding: 0 50px 15px 15px;
    text-align: left;
}

.conversations__table td {
  margin: unset;
}

.conversations--table tr {
    border: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: flex-start;
}

.conversations--table tr:hover td:nth-child(1),
.conversations--table tr:hover td:nth-child(2),
.conversations--table tr:hover td:nth-child(3),
.conversations--table tr:hover td:nth-child(4) {
    text-decoration: underline;
    color: #212227; /* Darker blue */
}

.flagged__cell,
.client-map-header,
.modal-header,
.download__cell-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.modal-header {
    margin-bottom: 15px;
}

.modal-header p {
    font-size: 21px;
    text-transform: uppercase;
}

.download__cell a {
    color: #808080; /* Grey */
}

.flagged__cell i {
    color: #de1330; /* Dark red */
}

.secondary__nav__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-right: 15px;
}

.secondary__nav__wrapper button {
    border: 0;
    font-size: 16px;
    color: #feae01; /* Dark orange */
}

#documentContainer td {
    width: 30%;
}


/* ===== Cards - Client Vacancies overview page ===== */

.flex-col-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
    margin: 0 20px 20px;
}

.flex-col-3 > div {
    flex-basis: 33%;
}

.v-details__container,
.v-description__container,
.info__tabs__container,
.flex-col-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
}

.v-details__container p:nth-child(1) {
    color: #212227; /* Darker blue */
    font-weight: 700;    
}

.v-details__container > p.card__header,
.card__header {
    color: #feae01; /* Dark orange */
    font-weight: 700;
    text-transform: uppercase;   
}


/* ===== Info tabs -  Vacancies overview page =====*/

.info__tabs {
    background-color: #ffad00; /* Orange */
    color: #fff; /* White */
    border-radius: 10px;
    padding: 10px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 500;
}

.info__tabs--active {
    background-color: #202125;
    color: #ffad00; /* Orange */
}

.info__tabs:hover, 
.info__tabs--active:hover {
   text-decoration: underline;
}

.comments-button-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin: 20px auto;
}

.comments-button-container button {
    border: 0;
}

.comments-button-container i {
    color: #808080; /* Grey */
    margin-right: -2px;
}

.comments-button-container i:hover {
    color: #212227; /* Darker blue */
}

.view-comments-container {
    width: 78%;
    margin: 32px auto 16px;
}

#editCommentsWrap, #editObjectivesWrap {
    display: none;
}


/* ===== Grid - Vacancies overview page page =====*/

.v-description__container {
    height: 100%; 
}

.info__tabs__container {
    -ms-flex-item-align: start;
        align-self: flex-start; 
}

.v-description__container a { 
    color: unset; 
}

.v-description__container a:hover { 
    color: #212227;  /* Darker blue */
    text-decoration: underline; 
}

.v-location__container > p {
    margin-bottom: 20px;
}

.v-location__container > .find__us__icons {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 8px;
}

.card--table {
    height: 680px;
	overflow-y: scroll;
    margin: 0 20px 20px;
}

.file--icon {
    margin-left: -5px;
}

.table-interviews tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}


/* ===== Grid table - Clients page =====*/

.parent__table--grid div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
    text-align: left;
    -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.parent__table--grid div {
    color: #212227;  /* Darker blue */
    font-weight: 700;
}

.parent__table--grid a,
.parent__table--grid a p {
    color: #808080; /* Grey */
}

.parent__table--grid a:hover p,
.parent__table--grid a:hover + div > p {
    text-decoration: underline;
    color: #202125; /* Dark blue */
}

.parent__table--grid a p,
.parent__table--grid div p {
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
    padding: 15px;
}

.parent__table--grid .grid__row:nth-child(even) {
    background-color: #ebebeb; /* Light Grey */
}

.row__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-pack: justify; 
        -ms-flex-pack: justify; 
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; 
    -ms-flex-preferred-size: 90%; 
        flex-basis: 90%;
}

.row__container p { 
    -ms-flex-preferred-size: 90%;
    flex-basis: 90%;
}

.row__icons__container {
    margin-right: 16px;
    /* -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #808080; */
}

.row__icons__container p,
.row__icons__container i {
    color: #808080; /* Grey */
}

/* Change icon class */
.row__icons__container i:hover,
.modal__icons__container i:hover,
.modal__icons__container :nth-child(2):hover,
.icon-hover:hover,
.star__icon:hover {
    color: #202125; /* Dark blue */
    cursor: pointer;
}

.grid__row div p {
    color: #808080; /* Grey */
    -ms-flex-preferred-size: unset;
    flex-basis: unset;
}

.modal__icons__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 16px;
}

.table-learners--grid td {
    width: 16%;
}


/* ===== Modal ===== */

.modal-container,
.modal-container-2 {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
	padding-bottom: 50px;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content{
    margin: auto;
    padding: 20px;
    width: 40%;
    border-top: 3px solid #feae01;
    font-weight: 700;
    overflow-x: hidden;
}

#applicationModal > .modal-content {
	width: 60%;
}

@media only screen and (max-width: 1366px) {
    .modal--content{
        width: 50%;
    }
}

.form-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px;
}
 
.form-inner input, 
.form-inner textarea, 
.form-inner select {
    border : 2px solid #ebebeb; /* Light Grey */
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 700;
	resize: none;
}

.form-inner label, 
.form-inner input, 
.form-inner textarea, 
.form-inner select,
.checkbox-form-vacancy {
    display: block;
    width: 90%;
    margin: 0 auto;
}

.form-inner label,
.checkbox-form-vacancy p {
   margin-bottom: 5px;
   margin-top: 10px;
}

[class*="close"] {
    color: #aaaaaa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

[class*="close"]:hover {
    color: #212227; /* Darker blue */
}

.button-container {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.modal-container button,
.button-container button,
.button-primary {
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    background-color: #feae01;  /* Dark orange */
    color: #fff;  /* White */
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 12px;
}

.modal-container button:hover,
.button-container button:hover,
.button-primary:hover {
    background-color: #F98C1E;  /* Darker orange */
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.confirm-btn-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     gap: 8px;
}


/* ===== Interviews Modal - Vacancy Overview page =====*/

@media (max-width: 100em) {
    #interviewModal > .modal-content {
        width: 50%;
    }
}


/* ===== Client Map Box - Client Overview Page =====*/

#clientMapBox {
    z-index: 10001;
}


/* ===== Vacancy Overview Modals =====*/

#viewWrap table {
    width: 100%;
    text-align: left;
    margin-top: 1.5rem;
}

.modal-vacancy{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 50px;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-vacancy h3 {
    margin: 30px auto 10px;
    /* color: #505050; */
    color: #212227; /* Darker blue */
}

.btn-set-btn{
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    background-color: #ebebeb; /* Light Grey */
    color: #feae01; /* Dark orange */
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 12px;
    width: 40%;
}

.active-btn-set{
    color: #fff!important; /* White */
    background-color: #feae01!important; /* Dark orange */
}

.btn-set{
    text-align: center;
}

.left-btn{
    border-radius: 10px 0px 0px 10px;
}

.right-btn{
    border-radius: 0px 10px 10px 0px;
}

#addNewWrap, 
#addNewWrapApp,
#addNewWrapLearners, 
#viewWrapPreviousLearners {
    display: none;
}

.delete-p {
    margin: 0 8px;
}

.btn-set--three {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 2px;
}

.btn-set--three :nth-child(2){
    border-radius: 0;
}


/* ===== Icon containers ===== */

.main__contact__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
}

.contact__text {
    width: 1.75rem;
}

.main-contact-star{
	color: #feae01; /* Dark orange */
}

.edit__icon__container {
    padding: 25px;
}

.edit__icon__container button:hover, 
.edit__icon__container a:hover {
    color: #212227; /* Darker blue */
}

.edit__icon__container button,
.edit__icon__container a {
    border: 0;
    color: #808080; /* Grey */
    margin-left: 16px;
}

.table-clients-overview-contacts td {
    width: 20%;
}


/* ===== My profile page ===== */

.my-profile-box {
	margin-left: 20px;
}

.location__container { 
	grid-area: 1 / 2 / 2 / 4;
	margin-right: 20px;
}

.card .location__container__header {
	color: #feae01; /* Dark orange */
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
}

.location__container > div { 
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 48px;
}

.location__container > div >* { 
   width: 50%;
}

.location__container div img {
	max-width: 100%;
}

.location__container__details {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 24px;
	font-weight: 400;
}

.location__container-heading {
   color: #212227; /* Darker blue */
   text-transform: uppercase;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 4px;
}

.location__container-select {
	color: #212227; /* Darker blue */
   	text-transform: uppercase;
   	font-size: 16px;
   	font-weight: 700;
   	margin-bottom: 4px;
	font-family: 'Roboto', sans-serif;
	margin-left: -5px;
}

.location__container__details div a {
   color: #808080; /* Grey */
}

.location__container__details div a:hover {
   color: #212227; /* Darker blue */
   text-decoration: underline;
}

.location__container__details i {
   margin-right: 5px;
}

.location__container__details > .find__us__icons {
   margin-bottom: unset;
}

.profile__details__container {
	text-align: center;
	color: #808080; /* Grey */
	margin-top: 40px;
}

.profile__details__container :first-child {
	text-transform: uppercase;
	color: #feae01; /* Dark orange */
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
}

.log-out-box {
	padding: 16px;
}

.log-out-box span {
	text-transform: capitalize;
    margin-right: 2px;
}

.expanded-row-content {
	display: grid;
	grid-column: 1/-1;
	padding-top: 5px;
}

.hide-row {
	display: none !important;
}

.my__profile__table tr  {
	border: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.my__profile__table tr:hover td:nth-child(-n+3),
.my__profile__table tr:hover .main__contact__container :first-child {
  text-decoration: underline;
  color: #212227; /* Darker blue */
}

.expanded-row-content :first-child {
	text-transform: uppercase;
	color: #feae01; /* Dark orange */
}

.documents--table td {
    width: 33%;
}

.documents--table .download__cell {
    width: 100%;
}

.warning__col ~ p {
    margin: 0 8px;
}

.location__container-buttons {
    text-align: end;
}

.location__container-buttons button:not(:first-child) {
    margin-left: 8px;
    color:#808080; /* Grey */
}

.location__container-buttons button:not(:first-child):hover {
    color:#212227; /* Darker blue */
}

.applications--table {
    width: 100%;
}

.applications--table th {
    text-align: left;
}

.applications--table td {
/*    width: 45%;*/
	width: 30%;
}


/* ===== Time picker =====*/

.ui-timepicker-standard .ui-state-hover {
    background-color: #feae01 !important; /* Dark orange */
    border: 1px solid #feae01 !important; /* Dark orange */
    color: #fff !important; /* White */
}


/* ===== Message boxes ===== */

#errorFilterBox,
#successUpdateBox,
#successUpdateSite,
#addContactBox,
#successDeleteBox,
#successDeleteSiteBox,
#successDeleteContactBox,
#successDeleteVacancyBox,
#successDeleteApplicationBox,
#successDeleteInterviewBox,
#successDeleteLoginBox,
#successDeleteConversationBox,
#successDeleteDocumentBox,
#successOpenVacancyBox,
#statusDate,
#successCloseVacancyBox, 
#removeLearnerBox,
#successRemoveLearnerBox,
#selectAgency,
#selectAgency_edit {
    display: none;
}

.modal-delete-box {
    display: block;
    position: fixed;
    padding-top: 50px;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    z-index: 10000;
}

.paragraph-date-italic {
    font-size: 12px;
    font-style: italic;
    margin-top: 2px;
}

.table__learners {
    width: 100%;
    text-align: left;
}

.table__learners td {
    width: 30%;
}

#contactContainerLearners tr td:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    gap: 16px;
}

.modal-text-header{
	color: #616161;
}

.modal-p{
	margin-bottom: 5px!important;
}


/* ===== Export page ===== */

.container-export-vacancy {
    /* max-height: 992px; */
    max-height: 1555px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.container-export-vacancy div {
    max-width: 25%;
    max-width: 30%;
}

.card--container-export {
    margin: 16px auto;
    padding: 22px;
    max-width: 62%;
    overflow: hidden;
}

@media (max-width: 1366px) {
    .card--container-export {
        max-width: 80%;
    }
}

.container-button-export {
    width: 62%;
    margin: -16px auto 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

@media (max-width: 1366px) {
    .container-button-export {
        width: 80%;
    }
}


.display-asterisk::after {
    content: " *";
}

.checkbox-form-vacancy label,
.checkbox-form-vacancy input {
    display: inline-block;
    width: unset;
}

.checkbox-form-vacancy label {
    margin: 3px 16px 0;
}


.text-small-information {
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    width: 90%;
    margin: -3px auto 5px;
}


/* Agencies page, Schools page */

.table-column--3 th, 
.table-column--3 td {
    width: 30%;
}