/* styling of the box containg description and labels if in vertical view */
.boxForLabelSelection {
    box-sizing: border-box; 
    vertical-align: middle; 
    display: flex; 
    width:98%; 
    background-color:#ffffff;
    border: 1px solid #d1d1d1;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:1%;
}

/* styling of the box containg description and labels if in horizontal view */
.boxForHorizLabelSelection {
    width:98%; 
    background-color:#ffffff;
    border: 1px solid #d1d1d1;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:1%;
    position: relative;
}

/* box containing describing image and text next to the labels (vertical view) */
.prebox {
   display: block;
   margin-top: 10px;
   margin-bottom: 10px;
   float: left;
   width: 20%; 
   height: 100%;
   text-align: center;
   font-family: 'Karla', sans-serif;
   font-size: 20px;
   color: #304045;
}

/* box containing describing image and text next to the labels (horizontal view) */
.horprebox {
    display: block;
    margin-bottom: 20px;
    padding: 20px;
    float: left;
    width: 33.333%; 
    height: 100%;
    text-align: center;
    border: 1px solid #d1d1d1;
    border-top-style: none;
    cursor: pointer;
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    hyphens: auto;
    color: #304045;
}

/* box containing the 3 preboxes (in vertical view only) */
.imageBox {
    display: block;
    height: 120px;
}

/* styling for the selected filter (in vertical view only) */
.selectedhorprebox {
    border-bottom-style: none
}

/* If you don't want to have a left boarder */
.noleftborder {
    border-left-style: none;
}

/* If you don't want to have a right boarder */
.norightborder {
    border-right-style: none;
}

/* box containing all the labels */
.bubbelbox {
    margin: 2%;
    position: flex;
    width: 96%;
}

/* box containing the counter for the currently selected jobs */
.jobCouting {
    margin-top: 5px;
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    color: #304045;
}

/* box containng a job */
.joblisting {
    width: 98%; 
    background-color:#ffffff;
    border: 1px solid #d1d1d1;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 1%;
}

/* the title of the job in the list */
.jobTitleBox {
    margin: 10px 10px 10px 10px;
    font-family: 'Karla', sans-serif;
    font-size: 20px;
	font-weight: bold;
    color: #304045;
}

.jobTitleBox:link {
    color: #304045;
}

/* the labels of each job */
.jobAttributeBox {
    margin: 10px 10px 10px 10px;
    position: flex;
}

/* center text */
.inthemiddle {
    text-align: center;
    hyphens: auto;
}

/* background colour of the entire block */
body {
	background-color: #FFFCFC;
}

/* disabeling the decoration of a link, to look like normal text (esp. for job list) */
a:link {
    text-decoration: none;
    color: #304045;
}

/* have links in the same color, even if visited. */
a:visited {
    color: #304045;
}

/* general style of a button (the labels) */
.overallButton {
	border-radius: 2px;
	display: inline-block;
	color:#ffffff;
	font-family: "PT Sans";
	font-size: 16px;
	padding: 1px 4px;
	text-decoration: none;
	margin: 2px 2px 2px 2px;
}

/* colour if a label is selected */
.anyActiveButton {
	border:1px solid #1b362e;
	background-color:#21962b;
}

.inactiveButton {
    cursor: help;
}

/* colour if label is not active anymore */
.anyInActiveButton {
	border:1px solid #E9E7E7;
	background-color:#E9E7E7;
}

/* colour for the region labels */
.locButton {
	background-color:#44B6B1;
	border:1px solid #44B6B1;
}

/* colour for the industry labels */
.industryButton {
	background-color: #304045;
	border:1px solid #304045;
}
/* colour for the category labels */
.categoryButton {
	background-color: #75CBB1;
	border:1px solid #75CBB1;
}

/* colour for the region labels in the job-list */
.jobListLocButton {
    background-color: #9ADAD7;
	border:1px solid #9ADAD7;
}

/* colour for the industry labels in the job-list */
.jobListIndustryButton {
    background-color: #7E9CA6;
	border:1px solid #7E9CA6;
}

/* colour for the category labels in the job-list */
.jobListCategoryButton {
    background-color: #ABDFCF;
	border:1px solid #ABDFCF;
}

/* color of the prev and next button */
.preNextButton {
    background-color: #304045;
	border:1px solid #304045;
    padding: 2px 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.preNextButton:disabled {
    background-color: #d1d1d1;
	border:1px solid #d1d1d1;
}

/* make display flexibel */
.beFlexible {
    display: flex;
}

/* put the normal distance to the left */
.overallDist {
    margin-left: 1%;
}

/* contains the filter-text and symbol */
.clearFilters {
    display: flex;
    margin-left: 1%;
}

.filterDistance {
    margin-left: 30px;
}

/* the text of the reset filter*/
.filterText {
    font-family: 'Karla', sans-serif;
    font-size: 20px;
    color: #304045;
    margin-left: 5px;
    cursor: pointer;
}

/* makes the mouse a cursor */
.mouseAsPointer {
    cursor: pointer;
}

/* The searchbox styling */

.search {
    width: 900px;
    margin-left: 1%;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* will be used if the window is small */
.smallSearch {
    width: 98%;
}

.searchTerm {
    max-width: 500px;
    width: 100%;
    border: 1px solid #d1d1d1;
    border-right: none;
    padding: 5px;
    height: 36px;
    outline: none;
    color: #304045;
    font-family: "PT Sans";
	font-size: 16px;
}

.searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #304045;
    background: #304045;
    text-align: center;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    display: -webkit-inline-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

.searchSymbol {
    margin: auto;
    vertical-align: middle;
    text-align: center;
}

body {
    margin:0px;
    padding:0px;
    width:100%;
}

/* for the loading spinner shown at the very beginning 
   source: https://loading.io/css/ */
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #1b362e;
    border-color: #1b362e transparent #1b362e transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}