:root {
  --brandColor1: #a32020;
  --brandColor2: #464646;
  --brandColor3: #f2f2f2;
  --brandColorError: #a32020;
  --brandColor4: #d93954;
}

#rightWrapper {
  margin-inline-start: 10px;
}

.jobListingInfo a {
  inline-size: max-content;
  border: 0px;
  display: block;
  color: var(--brandColor4);
  font-weight: bold;
}

.jobListingInfo a + span {
  font-size: 15px;
}

.jobListingInfo a:not(:first-of-type) {
  margin-block-start: 10px;
}

#jobList_container {
  display: flex;
  flex-direction: row;
}

#jobList_container > div:first-of-type {
  display: flex;
  flex-direction: column;
  max-inline-size: 400px;
}

#jobList_container > div:first-of-type > div {
  background-color: var(--brandColor3);
  padding-inline-start: 10px;
  overflow: hidden;
  overflow-y: scroll;
  block-size: auto;
  max-block-size: 600px;
}

#jobList_container > div:first-of-type label {
  font-size: 14px;
}

#jobList_container input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  background-color: var(--brandColor2);
  border: 1px solid var(--brandColor2);
  border-radius: 5px;
  accent-color: var(--brandColor4);
  margin-inline-end: 5px;
}

#jobList_container input:checked + label {
  color: black;
}

#jobList_container label,
#jobList_container input[type="checkbox"] {
  display: inline-block;
  vertical-align: top;
  color: var(--brandColor2);
}

/*#jobList_container input[type="checkbox"] + label {
  padding-block-start: 4px;
}*/

#jobList_container input[type="checkbox"] ~ label {
  padding-inline-start: 3px;
  display: inline-block;
  inline-size: calc(98% - 30px);
  padding-block-end: 10px;
}

#jobList_container .FilterPopUp {
  display: flex;
  background-color: var(--brandColor3);
  padding: 5px;
  margin-inline-end: 10px;
  border-radius: 10px;
  color: black;
  font-size: 14px;
  margin-block-end: 10px;
  align-items: center;
}

#jobList_container .FilterText {
  /*padding: 10px 0px 10px 10px;*/
  margin: 0px 5px;
}

#jobList_container .FilterCloseIcon {
  display: flex;
  font-weight: normal;
  color: var(--brandColor4);
  border: 2px solid transparent;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 15px;
  inline-size: 20px;
  block-size: 20px;
  font-size: 20px;
}

#jobList_container .selectErrMsg {
  color: var(--brandColorError);
}

#jobList_container .jobCountInfo {
  display: block;
  color: var(--brandColor4);
  margin: 10px 0px;
  font-size: 14px;
}

#jobList_container .switch {
  position: relative;
  display: inline-block;
  width: 49px;
  height: 22px;
  margin-top: 3px;
}

#jobList_container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#jobList_container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

#jobList_container .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

#jobList_container input:checked + .slider {
  background-color: var(--brandColor4);
}

#jobList_container input:focus + .slider {
  box-shadow: 0 0 1px var(--brandColor4);
}

#jobList_container input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

#jobList_container .slider.round {
  border-radius: 34px;
}

#jobList_container .slider.round:before {
  border-radius: 50%;
}
/*
#jobList_container input[type="checkbox"]:disabled,
#jobList_container input[type="checkbox"]:disabled + label {
  display: none;
}
*/
.dropDown{
  cursor: pointer;
}
.DropdownArrow {
 border: solid var(--brandColor4);
 border-width: 0 2px 2px 0;
 padding: 4px;
 float: right;
 margin-inline-end: 10px;
}
 
.upArrow,
.downArrow {
transition: transform 0.5s ease;
-webkit-transition: -webkit-transform 0.3s ease;
}
.upArrow {
 transform: rotate(-135deg) !important;
 -webkit-transform: rotate(-135deg) !important;
}

.downArrow {
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

.hideDetails{
  block-size: 0px;
  overflow: hidden;
  transition: height .8s ease;
}

.showDetails{
  block-size1: 95% !important;
  block-size: auto !important;
}