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

/* QUERIES
__Below 1344px (Smaller desktops)
__Below 944px (Tablets) 
__Below 704px (Smaller tablets)
__Below 544px (Phones)
*/

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


/* || QUERIES */

/* ===================================
-- Below 1344px (Smaller desktops) 
===================================== */


@media (max-width: 1344px) {
    .grid__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 25px;
        grid-row-gap: 20px;
        padding: 0 15px;
    }

	.find__us__icons {
		gap: 32px;
	}

	.filter__text button {
		padding: 0;
	}

	.modal-content {
		width: 62%;
		margin: 0 auto !important;
	}
}

/* ===================================
-- Below 1188px 
===================================== */

@media (max-width: 1188px) {
	.secondary__nav {
		font-size: 14px;
		gap: 27px;
		padding: 20px 25px;
	}

	.report__container > div > label {
		width: unset;
	}

	.container-buttons-search {
		margin-right: unset;
	}
}


/* ===================================
-- Below 944px (Tablets) 
===================================== */

@media (max-width: 944px) {
	.header__nav {
		font-size: 12px;
		gap: 26px;
	}

	.badge {
		top: -11px;
		right: -4px;
		padding: 1px 3px;
		font-size: 8px;
	}

	.secondary__nav {
		gap: 30px;
		font-size: 12px;
	}

	.filter, 
	.information {
		display: none;
	}

	.main {
		display: unset;
	}

	.search__bar {
		display: none;
	}

	.clients__overview__side {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		gap: 32px;
	}

	.clients__overview__side div:first-child {
		-ms-flex-preferred-size: 90%;
		    flex-basis: 90%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		gap: 24px;
	}

	.additional__info__container {
		padding: 5px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: self-end;
		    -ms-flex-align: self-end;
		        align-items: self-end;
		-ms-flex-preferred-size: 18%;
		    flex-basis: 18%;
	}

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

	.profile__details__container {
		margin-bottom: 32px;
	}

	.client__img__container {
		margin: 6px auto;
	}

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

	.client__details__container {
		-webkit-box-ordinal-group: 5;
		    -ms-flex-order: 4;
		        order: 4;
		-ms-flex-preferred-size: unset !important;
		    flex-basis: unset !important;
	}

	.client__details__container button::after {
		content: 'Edit content';
		display: inline-block;
		font-weight: 700;
		margin-bottom: 32px;
		margin-left: 8px;
	}

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

	.grid__container__overview {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
	}

	.location__container > div {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 16px;
	}

	.location__container__details {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	.location__container__name {
		grid-area: 1 / 1 / 2 / 2;
	}

	.location__container__details > div:nth-child(2) {
		grid-area: 1 / 2 / 2 / 3;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	    -ms-flex-direction: column;
    	        flex-direction: column;
    	-ms-flex-pack: distribute;
    	    justify-content: space-around;
	}

	.location__container__details > div:nth-child(3) {
		grid-area: 2 / 1 / 3 / 3;
		text-align: left;
	}

	.find__us__icons {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 16px;
		margin-bottom: 10px;
	}

	.edit__icon__container {
		padding: 12px;
	}

	.card {
        margin: 0 16px 16px;
    }

	.information {
		-ms-flex-preferred-size: 35%;
		    flex-basis: 35%;
			display: none; 
	}

	.main__content {
		-ms-flex-preferred-size: 63%;
		    flex-basis: 63%;
	}

	.directory--table tr { 
		display: -webkit-box; 
		display: -ms-flexbox; 
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.directory--table td { 
		width: unset;
	}

	.grid__container {
		grid-template-rows: unset;
        grid-row-gap: 0;
		grid-column-gap: 0;
        padding: 6px;
    }

	.modal-content {
		width: 55%;
	}

	.modal-container button, 
	.button-container button,
	.button-primary {
		width: 100%;
	}

	.report__container > div {
		grid-template-columns: repeat(2, 1fr);
	}

	.container-buttons-search .button-primary {
		width: 114px;
	}
}


/* ===================================
-- Below 704px (Smaller tablets) 
===================================== */

@media (max-width: 704px) {
	.header {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: unset;
		    -ms-flex-align: unset;
		        align-items: unset;
	}

	.header__logo__wrapper {
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		width: 100%;
	}

	.header__nav {
		gap: 0;
	}

	.location__container__details {
		display: unset;
	}

	.grid__container {
        display: block;
		padding: 0 5px;
    }

	.modal-content {
		width: 80%;
		margin: 0 auto !important;
	}
}


/* ===================================
-- Below 544px (Phones) 
===================================== */

@media (max-width: 544px) {
	nav {
		letter-spacing: unset;
	}

	.information {
		display: none;
	}

	.main {
		display: unset;
	}

	.card {
        margin: 0 10px 10px;
    }

	.add__icon__container button::before {
		content: 'Add Vacancy';
		text-transform: uppercase;
	}

	.main--login input, 
	.main--login button {
		width: 300px;
	}

	.directory__card__container {
		width: 90%;
		margin: 0 auto;
		gap: unset;
		-webkit-transform: unset;
		    -ms-transform: unset;
		        transform: unset;
	}

	.card__img__container img {
		-webkit-transform: unset;
		    -ms-transform: unset;
		        transform: unset;
	}

	.report__container > div {
		grid-template-columns: repeat(1, 1fr);
	}

	.container-buttons-search {
		-webkit-box-pack: justify;
    		-ms-flex-pack: justify;
        		justify-content: space-between;
	}

}