html {
	font-size: 1rem;
}

body {
	min-width: 350px;
}

#pc-table {
	width: 100%;
	border: none;
	padding-right: 0;
	margin-top: -0.2rem;
	margin-left: auto;
	margin-right: auto;
}

#nav-menu {
	margin-bottom: 0px;
	position: sticky;
	z-index: 2;
	top: 0;
	height: 4rem;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#top-nav {
	margin-bottom: 0px;
	position: fixed;
	z-index: 5;
	top: 0;
	min-height: 4rem;
	width: 100%;
	box-shadow: none;
	padding: 0;
}

#top-nav-items {       
	padding-top: 0.5rem;
}

#cogs-and-search {
	display: flex;
	align-items: center;
}

#company-directory-title {
	padding-left: 1rem;
}

#search-box {
	margin-left: auto;
	margin-right: auto;
}

#search-box-icon {
	margin-left: -15rem;
}

#company-logo {
	width: 30%;
	text-align: center;
	padding-top: 1rem;
}

#mobile-search-options {
	display: none;
}

#search-accordion {
	display: flex;
	justify-content: center
}

#mobile-search-options-wrapper {
	width: 100%;
	padding: 0 3rem
}

.mobile-radio-field {
	width: fit-content !important
}

.item.location-group {
	break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block;
}

.floating-error {
	position: fixed !important;
	width: 90%;
	text-align: center
}

#grid-view {
	margin: 0;
	display: block;
}

#pc-search {
	position: fixed;
	width: 30%;
	top: 4rem;
	height: 93%;
	margin: 0;
	border-top: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#overflow-filter {
   overflow: auto;
   width: 90%;
}

#pc-search-column-wrapper {
	display: flex;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

#pc-search-column {
	width: 40%;
}

.search-option-segment {
	width: 97%;
	margin-bottom: 0 !important;
}

#management-btns {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}	

#manage-depts-btn {
	/* margin-bottom: 0.3rem; */
	text-align: justify;
	min-width: 11rem;
	margin: 0;
}

#manage-locs-btn {
	min-width: 11rem;
	text-align: justify;
	margin: 0;
}

i.fas.fa-wrench {
	float: right
}

.btn-wrapper {
	padding: 0.2rem;
}

#search-option-segments {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 0.8rem;
}

#append-mobile-filters {
	columns: 2;
}

.location-group {
	border: none !important;
}

.ui.checkbox {
	display: block;
}

#pc-table-segment {
	width: 100%;
	margin-top: 0;
	padding: 0;
	border-top: none;
}

#last-search-option {
	margin-bottom: 1rem;
}

thead {
	position: sticky;
	top: 4rem;
	z-index: 2;
	background: #F9FAFB;
}

th,
td {
	width: 50%;
	border-right: none;
	/*
	border-right: 1px solid rgba(34, 36, 38, 0.1);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(34, 36, 38, 0.1);
	*/
}

.break {
	flex-basis: 100%;
	height: 0;
}

#footer {
	position: fixed;
	background: grey;
	width: 90%;
	height: 5vh;
	top: 95vh;
}

#first-employee {
	visibility: hidden;
}

h1 {
	margin: 0 !important
}

.employee-panel-name {
	display: flex;
	flex-wrap: wrap;
}

td#employee-details-field {
	position: sticky;
	z-index: 1;
	top: 8.4rem;
	vertical-align: top;
}

.employee-detail-fields {
	visibility: hidden;
}

.email-address {
	word-break: keep-all
}

.employee-panel-btn {
	display: block !important;
	margin-left: auto !important;
	margin-bottom: 1rem !important;
}

.alert-modal-text {
	text-align: center;
}

.display-none-field {
	display: none !important;
}

.hidden-field {
	visibility: hidden;
}

#employee-details-modal {
	min-width: 330px;
}


/*
#create-employee-alert-modal-btn,
#modal-deny-btn,
#manage-depts-and-locs,
#close-employee-modal,
#edit-employee-modal-btn,
#delete-department-modal-btn,
#delete-location-modal-btn,
#update-employee-modal-btn,
#submit-depts-and-locs,
#create-new-location-btn,
#save-new-location-btn,
*/


/*First modal*/
#create-new-location-btn,
#create-new-department-btn,
#close-only-btn,
#cancel-first-modal-btn,
#save-new-employee,
#submit-edit-employee,
/*invisible*/
#open-second-modal-btn {
	display: none;
}

#create-new-location-btn {
	float: left
}

#create-new-department-btn {
	float: left;
}



/*2nd modal*/
#refresh-departments-btn,
#second-modal-no-btn,
#confirm-delete-dept-btn,
#refresh-locations-btn,
#confirm-delete-loc-btn,
#refresh-editing-employee-btn {
	display: none;
}

/*Alert modal*/
#close-alert-modal-btn,
#delete-employee-modal-btn,
#alert-modal-no-btn,
#refresh-window-btn {
	display: none;
}

/*Accordions*/
#department-accordion-segment,
#location-accordion-segment {
	display: none;
}

/*Forms*/
#employee-modal-create-fields,
#employee-modal-edit-fields,
#employee-modal-view-fields {
	display: none;
}

/*mobile*/
#create-employee-btn-mobile {
	display: none;
}

/*Panel*/

#delete-employee-btn {
	float: left
}


.employee-btn {
	float: right;
	display: none !important;
}


.employee-modal-btn {
	display: none !important;
}

.scrolling.image.content {
	display: block !important;
}

.description {
	margin-left: auto;
	margin-right: auto;
	width: 70%;
}



h4.ui.image.header {
	display: inline;
}

.default.text {
	color: black !important;
}

.input[type="text"]:focus {
	border-color: #22242626;
}

.manage-dept-row {
	margin-top: 1rem;
}

.department-details {
	margin-bottom: 1rem;
}

.manage-dept-btns {
	display: inline-flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: flex-end;
}

.loc-action-button {
	/* margin-bottom: 0.5rem !important; */
}

.dept-action-button {
	margin-bottom: 0.5rem !important;
}

.location-message-panel {
	background-color: white !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.location-header {
	display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.location-header-text {
	display: inline;
	margin-top: auto !important;
	margin-bottom: auto;
	padding-left: 1rem;
	font-weight: 900;
	font-size: 1.3rem;
}

.location-title-row {
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	align-items: center;
}


.department-title-row {
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	align-items: center;
}
.employee-count-icon {
	margin-right: 0.5rem;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	flex-wrap: nowrap
}

.loc-employee-info-icons {
	display: flex;
	align-items: center;
}

.dept-employee-info-icons {
	display: flex;
	align-items: center;
}

.ui.one.top.attached.black.disabled.button {
	text-align: left;
}

.location-trash-icon {
	float: right;
	font-size: 1.2rem;
	padding-right: 1rem;
}

.location-field-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 0.4rem;
}

.department-field-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 0.4rem;
}

.edit-dept-text-item {
	min-width: 8rem;
	text-align: right;
	padding-right: 0.5rem;
}

.edit-loc-text-item {
	min-width: 8rem;
	text-align: right;
	padding-right: 0.5rem;
}


.rename-accordion-buttons {
	display: flex;
	/* padding: 0.3rem 0; */
	flex-direction: row;
	justify-content: flex-end;
}

.dept-employee-figure {
	margin: 0 !important;
	display: flex;
	align-self: center;
	font-weight: bold;
	margin-left: 0.5rem !important;
} 

.loc-name-field {
	display: flex;
	flex-grow: 1;
	margin: 0 !important;
	margin-right: 0.2rem !important;
}

.loc-name-field {
	display: flex;
	flex-grow: 1;
	margin: 0 !important;
	margin-right: 0.2rem !important;
}

.dept-name-field {
	display: flex;
	flex-grow: 1;
	margin: 0 !important;
	margin-right: 0.2rem !important;
}

.create-loc-btn {
	display: flex;
	padding: 0.5rem
}

.create-dept-btn {
	display: flex;
	padding: 0.5rem
}

#container-column {
	padding-top: 0
}

#location-accordion-segment {
	margin-top: 0;
	margin-bottom: 0;
	display: none
}

#accordion-title {
	display: none;
}

i.fas.fa-info-circle {
	float: right;
	font-size: 2rem;
	margin-right: 2rem;
}


i.fas.fa-user-plus {
	display: none;
}

/*
i.fas.fa-users-cog {
	display: none;
}


i.fas.fa-users-cog {
	display: flex;
	font-size: 2.3rem;
	margin-left: 2rem;
	padding-top: 0.5rem;
}
*/

i.fas.fa-users-cog {
 display: none
}

.search-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row;
}

i.fas.fa-user-edit {
	font-size: 4rem;
}


.employee-row-content {
	width: 100%;
}

.employee-count-number {
	margin-right: 0.6rem
}

.pointer {
	cursor: pointer !important;
}

.default-cursor {
	cursor: default !important;
}

#scrolling-modal-pane {
	background-color: #d4d4d5;
	max-height: calc(80vh - 8rem);
}

#append-location-panels {
	padding-top: 1rem;
}

.edit-dept-icon {
	margin-right: 1rem;
}

.new-loc-accordion {
	margin-top: 0;
	margin-bottom: 0;
}

.new-dept-accordion {
	/* margin-top: 0; */
	margin-bottom: 0 !important;
}

.department-segment {
	/* padding-bottom: 0.2rem !important; */
}

.location-segment {
	padding-bottom: 0.2rem !important;
}

.loc-delete-edit-btns {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.dept-delete-edit-btns {
	display: flex;
	flex-wrap: nowrap;
}

#input-new-location-field {
	margin-bottom: 0.5rem;
}

#icon-block {
	width: 2rem;
	display: inline-block;
}

.mobile-category {
	display: flex
}

.mobile-checkbox {
	margin-bottom: 0.4rem
}

.mobile-checkbox-spacer {
	visibility: hidden;
}

.active-radio-checkbox {
	margin-top: 0.5rem;
}

/*
#manage-depts-and-locs-btn {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
*/

#close-mobile-accordion-options {
	float: right;
	margin-top: 0.5rem;
}

.last.container {
	margin-bottom: 300px !important;
}

h1.ui.center.header {
	margin-top: 3em;
}

h2.ui.center.header {
	margin: 4em 0em 2em;
}

h3.ui.center.header {
	margin-top: 2em;
	padding: 2em 0em;
}

#employee-details-column {
	border-left: 1px solid #2224261a;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #2224261a;
}

#alert-modal-content {
	font-size: 1.2rem;
	text-align: center;
}

@media only screen and (max-width: 767.98px) {

	#company-directory-title {
	    display: none;
    }

	i.fas.fa-users-cog {
       display: inline-block;
       font-size: 2.5rem;
       padding-left: 1.5rem;
       padding-top:0.2rem
    }

    tr#first-employee-row {
	  padding-bottom: 0;
	  padding-top: 0;
    }

	.rename-accordion-buttons {
	   margin-top: 0.3rem
    }
	
	#search-box-icon {
		margin-left: 0
	}

	html {
		font-size: 0.75rem;
	}


	i.fas.fa-user-plus {
		display: flex;
		font-size: 2rem;
		margin-right: 2rem;
		padding-top: 0.3rem;
	}

	#employee-details-field,
	#employee-details-column,
	#pc-search-column,
	.employee-btn {
		display: none !important;
	}

	#create-employee-btn-mobile { /* #manage-depts-and-locs-btn */
		display: none;
		float: right;
	}

	#mobile-search-options {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	.employee-count-icon {
		font-size: 0.9rem;
	}

	#pc-table {
		width: 90%;
		margin-top: 3rem;
	}

	thead {
		top: 6rem;
	}

	.employee-modal-btn {
		display: inherit !important;
		max-width: 10rem;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.ui.column {
		padding-bottom: 0 !important;
	}


}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: #fff;
	}
	#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #f2f2f2;
	border-top: 6px solid #56829e ;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: animate-preloader 1s linear infinite;
	animation: animate-preloader 1s linear infinite;
	}
	@-webkit-keyframes animate-preloader {
	0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
	}
	@keyframes animate-preloader {
	0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
	}