:root {
    --darkgray:#DDD;  
}
html{font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;scroll-behavior: smooth;}
body {margin: 0;color: var(--text);display: flex;flex-direction: column;font-weight:300;font-size: .9em;font-family: var(--bodytext);font-weight: 400;color: var(--text);text-align: left;position: relative;/* min-height: 100vh; */}
 
hr{ margin-top: 15px; margin-bottom: 15px;border: 0;border-top: 1px solid var(--gray);}
 
/* subpage_slider*/
.subpage_slider {  padding: 100px 0; background-position: center center;  background-attachment: fixed;  background-size: cover;  }

/* ==================== News & Events Block ==================== */
.slider-block{background: var(--primary);padding: 15px 0;}
.eventsBlock h2, .latestNewsBlock h2, .homeTiles h2 {color: var(--white); margin: 0 0 15px; border-bottom: 1px solid var(--white); font-size: 1.8em; font-weight: 300;
    a {display: block; color: var(--white); } 
}
.eventsBlock {display:flex;height: 100%;flex-wrap:wrap;flex-direction: column;justify-content: space-between;
  .bnrnav {height: 280px; width: 96%; margin: 0 auto; padding-bottom: 20px; border: 0; }
  .EventRow {padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--dark); display: flex; flex-direction: row; justify-content: flex-start; align-content: center; align-items: center; width: 100%; 
    &:last-child {border: 0; }
    p {text-align: left; color: var(--white); display: block; 
      a {color: var(--white); line-height: 1.2; font-family: var(--bodytext); display: block; } 
    }
    div.dateBlock {text-align: center;min-width: 70px;color: var(--dark);margin-right: 5px; 
      .date {background: var(--white);margin: 5px;border-radius: 5px;font-weight: 400;overflow: hidden;box-shadow: 0px 0px 1px 1px var(--gray);
        span {
          &.month {background: var(--highlight); display: block; padding: 0; color: var(--white); font-size: 16px; }
          &.date {padding: 0;margin: 0;border: 0;line-height: 1.2;display: block;box-shadow: none;}
          &.week {display: block; }
        }
      }
    }
  }
}


.eventrow  {border-bottom: 1px solid var(--gray);padding-bottom:10px;margin-bottom:15px;}
.eventrow li {display:flex;align-items: center;margin-bottom: 5px;}
.eventrow li i {color: var(--darkgray);font-size: .85em;vertical-align: middle;}


/* ==================== News Items ==================== */
#jsnews_1706, #jsnews_2699, #jsnews_3069 {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.latestNewsBlock {height: 100%;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: space-between;
  .news .dtls {margin-bottom: 20px;
    p{margin:0; color:var(--white);}
    h3 a{color:var(--white);}
  }
}
.nwsitm {
  .nws {width: 100%; color: var(--dark); } 
  p {font-size: 0.85em; color: var(--text); font-weight: 600; margin: 2px 0; } 
  h2 {font-size: 0.98em; margin-bottom: 0; display: inline-block; vertical-align: top; } 
  span {font-style: italic; display: block; text-align: left; font-size: 0.8em; text-transform: capitalize; } 
  .readmore {float: right; } 
}
.hmnws {
  em {display: block; font-size: 0.78em; color: var(--darkgray); float: left; } 
  > a {float: right; color: var(--darkgray); font-size: 0.9em; } 
}

/*News & Blog posts*/
.rssFeedBlock h2{margin-bottom: 15px; border-bottom: 1px solid var(--highlight); font-size: 1.8em; font-weight: 300; padding-left: 5px;}
.entry-wrapper {display: flex; height: 100%; align-items: center; border: 1px solid var(--darkgray); 
  &:after {content: ''; display: table; clear: both; } 
  .entry-text {padding: 15px; } 
  .entry-image {line-height: 0; /* Uncomment and adjust these as needed */ /* flex: 0 0 50%; max-width: 50%; height: 100%; padding-right: 10px; */ 
    a {min-width: 100%; } 
  }
  img {min-width: 200px; } 
  .entry-title {
      h4 {margin: 0; 
      a {margin: 0; font-weight: 400; font-family: var(--bodytext); font-size: 1em; }
    }
  } 
  .entry-date {margin-top: 5px; } 
  .entry-content {
    a {display: block; }
  } 
  .entry-link {
    a {font-size: 0.73em; background: var(--primary); padding: 2px 3px; color: var(--white); display: none; 
      &:after {content: "\f231"; font-family: bootstrap-icons!important; display: inline-block; margin: 0 3px; color: var(--white); } 
    } 
  } 
}
 
/* ==================== Board Group ==================== */
.board_group {
  & .board_member {display: flex;/* border: 1px solid var(--darkgray); */padding: 10px 0;align-items: center;height: 100%;flex-wrap: wrap; 
    & .thumb{flex: 0 0 auto;width: 50%;text-align: center;/* height: 100%; */}   
    & .details{flex: 0 0 auto;width: 50%;}               
    img {padding: 0 10px;height: 100%;} 
    .details {padding: 5px; 
      h4 {font-weight: 600;font-family: var(--bodytext);font-size: 1.2em;text-transform: uppercase;} 
      strong {display: block; font-size: 1.1em; } 
    } 
  } 
  @media all and (min-width: 0px) and (max-width: 1199px) {
     & .board_member {flex-direction: column;align-items: flex-start;
      & .thumb {width: 50%;} 
      .details {width: 90%;padding: 10px;}                 
      img {height:auto;padding-bottom: 10px;}
    }     
  }
  
  @media all and (min-width: 0px) and (max-width: 992px) { 
    & .board_member {flex-direction: column;
      & .thumb, & .details {width: 100%;text-align: left;} 
      img {height:auto;padding-bottom: 10px;}
    }
  }
}

body.boardArea {
  footer{
    & .address * { color:var(--text);}
       & .address{text-align: left;
          p{padding-left: 25px; word-break: break-all; 
            i{display:inline-block;margin-left: -25px; text-align:center; vertical-align:middle; width: 25px; color:var(--primary);}
          }
                 
      }
    .iframe {min-height: 400px;}
    & .foot_form h2{color:var(--primary);}
  } 
}

/* ==================== Staff Directory ==================== */
.staff-directory {text-align: center; 
  .staff_member {display: inline-block; border: 1px solid var(--darkgray); padding: 10px 0; align-items: center; 
    img {padding: 0 10px; } 
    h4 {text-align: center; } 
  } 
}

/*County Details Block (Header)*/
.HeaderCounty {background:var(--gray); padding:15px 0;}

/* ==================== Home Tiles ==================== */
.homeTiles {
  h2 {margin-bottom: 15px; padding-left: 5px; border-bottom: 1px solid var(--highlight); font-size: 1.8em; font-weight: 300; } 
  .H_tile {display: flex; flex-direction: column; justify-content: flex-start; color: var(--text); height: 100%; margin-bottom: 10px; padding-bottom: 10px; 
    .thumb {display: flex; align-items: center; justify-content: center; text-align: center; min-height: 300px; margin-bottom: 10px; border-bottom: 1px solid var(--darkgray); 
      img {max-width: 100%; max-height: 300px; object-fit: cover; } 
      &[data="#"] {background: url(/image/cache/placeholder.jpg) no-repeat center; background-size: cover; background-color: var(--white); } 
    } 
  } 
}

.filteropts h2{ display:inline-block;font-size:12px; }
.postwebform{ margin:10px 5px; }
.postwebform td { padding:5px;}
.postwebform td.labelcol{ width:35%;padding-right:8px; vertical-align:top; }
.postwebform td.valuecol{ width:68%;vertical-align:top; } 

/* ==================== Upload Form ==================== */
#frm_update_info, #uploadform{
  table {width:90%;margin-bottom: 15px;
    tr td{padding: 5px 0;vertical-align:top;min-width: 100px;
      input[type="radio"] { margin:0;margin-left:15px;}
    }
  }
}
#frm_update_info{
  & .user_info_block { padding:0;
    & .userinfotitle{display:none;}            
  }
   table.updateinfo tr.password_msg td{font-size: .85em;padding-top: 25px;} 
}

/* ==================== Download Form ==================== */
#downloadform {
  & .fieldrow {margin: 10px 0; 
    & .fieldval, .fieldlabel {width: 30%; } 
    &:nth-child(5) {width: 65%; text-align: right; } 
    & .date {display: inline-block; width: 25%; 
      & .fieldval, .fieldlabel {display: block; width: 100%; font-weight: normal; } 
      & .fieldval input {width: calc(100% - 31px); } } 
      & .fieldval input, & .fieldval select {width: 100%; 
        &[type="radio"], &[type="submit"] {width: auto; } 
      } 
    } 
    ~ table {border: 1px solid var(--darkgray); border-collapse: collapse; font-size: 0.84em; 
      th, td {border: 1px solid var(--gray); padding: 5px; } 
    } 
  }


/* ==================== Board Survey ==================== */
form#selectmode, form[name="boardsurvey"], form[name="countysurvey"], form[name="countysurvey2"], form[name="slisurvey"], form[name="fringeSurvey"], div.column.link {margin: 10px; 
  input[type="submit"] {margin: 10px 0; } 
  select {width:auto;min-width: 25%;  
    option[value="Commission"], option[value="Software Vendor"] {font-weight: bold; } 
  } 
}

div.column.link a {cursor: pointer; }

/* ==================== Miscellaneous Forms and Tables ==================== */
.report_multicheckbox {
  span, input {display: inline-block; vertical-align: middle; }
}

#salary_report_results {
  h3 {padding: 6px 0; }
  table {border: 1px solid var(--darkgray); font-size: 0.9em; 
    td {padding: 3px; border-bottom: 1px solid var(--darkgray); border-left: 1px solid var(--darkgray); } 
    th {padding: 3px; border-bottom: 1px solid var(--darkgray); border-left: 1px solid var(--darkgray); font-size: 0.9em; } 
    & .classhead {color: var(--white); background: #808080; } 
    & .departhead {color: var(--white); background: #c0c0c0; } 
  }
}

table.individualrecord tr td, .recordtable tr td, .jdreventtable tr td, .jdreventtable tr th {border: 1px solid var(--darkgray); padding: 2px 5px; }

/* ==================== Salary Survey Search ==================== */
.salary_survey_search {padding: 10px; background: #f8f8f8; border: 1px solid var(--gray); 
  tr td{ padding:10px;}
  & .optionsCol {display: inline-block; min-width: 32%; margin-bottom: 10px; 
    div {font-weight: bold; 
      + div {display: inline-block; margin-right: 10px; } 
    } 
    & .select2-container {width: 100% !important; 
      &--default .select2-selection--multiple {border-radius: 0 !important; border: 1px solid var(--darkgray); 
        ul {} 
      } 
    } 
    &.submit {margin: 10px 0; display: block; } 
  } 
}
/* ==================== Salary Survey Search ==================== */
.salary_survey_search {
  tr {
    td#display_county {width: 420px; } 
    td.form-action {text-align: center; } 
    td {
      .population, .taxvalue {display: flex; flex-direction: row; justify-content: flex-start; margin-top: 15px; 
        .population_head, .taxvalue_head {padding-right: 5px; min-width: 120px; } 
      } 
    } 
  }

  .optionsCol {display: inline-block; min-width: 32%; margin-bottom: 10px; 
    div {font-weight: bold; } 
    .select2-container {width: 100% !important; 
      &--default {
        .select2-selection--multiple {border-radius: 0 !important; border: 1px solid #ddd; } 
        .select2-selection--multiple ul { Unnecessary styles can be commented out or removed } 
      } 
    } 
    div + div {display: inline-block; margin-right: 10px; } 
    &.submit {margin: 10px 0; display: block; } 
  }
}


/* ==================== Missing Salary Survey Table ==================== */
.missing-ss-table {width: auto; border-collapse: collapse; border: 1px solid var(--darkgray); 
  tr {
    th {background: #f2f2f2; } 
    th, td {padding: 1px 8px !important; text-align: left; } 
    &:nth-child(odd) {background: #f6f6f6; } 
  } 
}

/* ==================== Acknowledge Section ==================== */
.ss-acknowlege {margin: 10px 0; }

/* ==================== Upload Form ==================== */
.ss-upload-form {padding-top: 10px; 
  td {padding: 6px; } 
}

/* ==================== General Table Styles ==================== */
.divTable {display: table; width: 100%; margin: 0 auto; border-collapse: collapse; 
  & .listRow {display: table-row; background: transparent; 
    & .listCol {display: table-cell; border: 1px solid var(--darkgray); padding: 4px; text-align: left; vertical-align: middle; color: var(--dark); background: transparent; 
      &.options {text-align: center; 
        a {display: inline-block; padding: 4px 8px; border: 1px solid #e23c2c; font-size: 13px; 
          &.view {background: #e23c2c; color: var(--white); } 
          &:hover {background: #e23c2c; color: var(--white); } 
        } 
      } 
    } 
    &.head {
      & .listCol {background: #cecece; padding: 5px 10px; color: var(--dark); font-size: 1.1em; font-weight: 600; } 
    } 
    &.GroupHeader {border: 1px solid var(--darkgray); 
      & .listCol {border: 0; font-weight: bold; font-size: 1em; padding: 2px 5px; background: #cecece; } 
    } 
  }   
  &.fringeReport {
    & .listRow.head {display: none; } 
  } 
}
/* ==================== Report Data Table ==================== */
.reportDataTable {
  h2 {margin: 0; } 
  & .divTable {margin-bottom: 20px; 
    & .listRow.head {
      & .listCol {padding: 3px 5px; border-bottom: 1px solid var(--darkgray); border-left: 1px solid var(--darkgray); font-size: 0.9em; } 
    } 
  } 
}

/* ==================== Job Listings ==================== */
.jobListings {margin: 0; margin-bottom: 30px; 
  .jobListing {padding: 5px; margin: 0; 
    h3 {color: var(--primary); padding: 8px; font-size: 1.5em; cursor: pointer; margin: 0; 
      &:before {content: "\f4fc"; /* Plus icon */ font-family:bootstrap-icons!important; display: inline-block; padding: 0 5px; font-size: 1em; color: var(--highlight); min-width: 25px; text-align: center; } 
      &.expand:before {content: "\f2e8"; /* Minus icon */ } 
    }

    .accordion-value {margin: 5px 0 10px;padding: 10px;padding-bottom: 30px;color: var(--text);border-bottom: 1px solid var(--darkgray); 
      p {padding: 10px; margin: 0; 
        & + p:before {content: ""; } 
      } 
      span.icon-checkmark {margin-right: 5px; font-size: 1.4em; vertical-align: sub; color: var(--dark); } 
    }

    .jobLink a[href=""] {display: none; }
  }
}

/* ==================== FAQs ==================== */
.faqs {
  > p {text-align: right; display: block; 
    > a {text-decoration: none; } 
  }

  .faq {padding: 10px 0px;margin: 0; 
    h4 {color: var(--primary);font-size: 1em;/* line-height: 1; */font-weight: 600;font-family: var(--bodytext);font-style: normal;cursor: pointer;padding-left: 25px;margin: 0;display: flex;align-items: center;justify-content: flex-start; 
      &:before {content:"\F504"; /* Plus icon */font-family:bootstrap-icons!important;margin-left: -25px;display: inline-block;vertical-align: middle;padding: 0 5px;font-size: 20px;color:var(--highlight);} 
      &.expand:before {content: "\f2e8"; /* Minus icon */ } 
    } 
    .accordion-value {padding: 15px 25px 0; color: var(--dark); 
      &.expand {display: block; } 
    } 
  }
}

/* ==================== County Histories ==================== */
.countyHistories {margin: 0; margin-bottom: 30px; 
  .county {padding: 5px; margin: 0; h3 {color: var(--primary); padding: 5px; font-size: 1.1em; cursor: pointer; margin: 0; font-family: var(--bodytext); text-transform: uppercase; font-weight: 500; 
    &:before {content: "\f067"; /* Plus icon */ font-family: FontAwesome; display: inline-block; padding: 0 5px; font-size: 0.8em; color: var(--highlight); } 
    &.expand:before {content: "\f068"; /* Minus icon */ } 
  } 
  .accordion-value {margin: 5px 0 10px; color: var(--dark); padding: 10px; border-bottom: 1px solid var(--highlight); 
    p {padding: 10px; margin: 0; 
      & + p:before {content: ""; } 
    } 
    span.icon-checkmark {margin-right: 5px; font-size: 1.4em; vertical-align: sub; color: var(--dark); } 
    &.expand {display: block; } 
  } 
} 
}

/* ==================== Collapsible Wrapper ==================== */
.collapsible-wrapper {
  .accordion-value {display: none; 
    &.expand {display: block; } 
  } 
}

/* ==================== COD ==================== */
#changeparameters_13,#changeparameters_15 {display: none !important; } 
.COD a:hover {text-decoration: none; }

/* ==================== Home Icons ==================== */
.homeicons {list-style: none; margin: 0; padding: 0; text-align: center; display: flex; 
  li {display: inline-block; padding: 10px; min-width: 30%; border: 1px solid var(--gray); margin: 10px; transition: all 0.5s ease; 
    a {text-align: center; float: none; margin: 0; display: block; } 
    span {display: block; font-weight: bold; font-size: 20px; padding-top: 10px; } 
    i {font-size: 0; 
      &:before {font-size: 100px; } 
    } 
    &:hover {background: #f2f2f2; 
      a {color: var(--primary); } 
    } 
    a:hover {text-decoration: none; } 
  } 
}

/* ==================== Counties List ==================== */
#countiesList {display: block; min-width: 250px; }

.datalist {
  a {display: flex; padding: 0.7em 10px; font-size: 1em; border-bottom: 1px solid var(--gray); justify-content: space-between; align-items: center; 
    &[role=""] {display: none; } 
    &:after {content: "\f285"; font-family: bootstrap-icons !important; font-size: 24px; } 
    &:hover {background: #f5f5f5; } } 
    a[role="Commission Chair"], a[role="County Administrative Assistant"], a[role="Human Resources Generalist"], a[role="Commission Vice Chair"], 
    a[role="All Other/Support"], .eblock[data-position="All Other/Support"] .position {display: none; } 
  }

.hide {display: none; }

/* ==================== County Info Block ==================== */
.countyInfoBlock {display: flex; flex-wrap: wrap; justify-content: space-between; 
  &::after {content: ''; display: table; clear: both; } 
  div {flex: 0 0 auto; width: 33%; } 
}

/* ==================== Contact Details ==================== */
.cdetail {position: relative; margin: 1em 0; border-bottom: 1px solid var(--gray); padding-bottom: 10px; margin-bottom: 0; 
  img {padding: 1%; border: 1px solid var(--gray); margin-bottom: 10px; max-width: 90%; } 
}

.county_img, .conty_info {/* float:left; */ /* width: 37%; */ }
.county_map {/* width: 25%; */ /* float:left; */ }
.conty_details {float: none; clear: both; display: table; width: 100%; border-collapse: collapse; }
.CD_table {display: table-row; }
.CD_col {display: table-cell; vertical-align: top; border: 1px solid var(--gray); padding: 3px; background: #f7f7f7; }
.CD_row {padding: 5px; padding-top: 0; } 
.CD_row.head {font-weight: bold; padding-top: 5px; padding-bottom: 0; }

.eblock {margin-bottom: 0.6em; padding: 0.6em; background: #f5f5f5; 
  > div {display: inline-block; width: 49%; vertical-align: bottom; } 
  a {color: var(--primary); } 
  .cpaddr i, .smfont {font-size: 0.87em; color: var(--dark); } 
  > div.cphone .phone {padding-left: 20px; background: url(/image/cache/phone.png) no-repeat center left; }
   > div.cphone .phone.cell {background-image: url(/image/cache/cell.png); } 
   > div.cphone .fax {background-image: url(/image/cache/fax.png); background-size: 14px; } 
   > div.cphone .email {padding-left: 20px; background: url(/image/cache/email-14.png) no-repeat center left; } 
   .cdepart:last-child {margin-bottom: 40px; } 
   .cdetail p {padding: 0.3em 0; } 
   .cdetail p strong {display: inline-block; margin-right: 0.5em; } 
   .cdepart h3 {padding: 1em 10px 1em 5px; border-bottom: 1px solid var(--gray); cursor: pointer; font-weight: 700; font-size: 1.2em; margin: 0; color: var(--primary); font-family: var(--subheader); } 
   .cdepart h3.shide, .cdepart h3:hover {background: #f5f5f5; } 
   .srch h3 {padding: 0.5em 0; } 
   .srch h3 i {display: block; color: var(--text); font-size: 0.87em; font-weight: 400; } 
   .deptinfo {margin-bottom: 1em; /* display: none; */ } 
         
   div.homephone[data-homephone=""], div.cellphone[data-cellphone=""], div.cphone .phone.home, div.cphone .phone.cell {display: none;} 
   &[data-position^="Commission"] > div.cphone .phone.home, &[data-position="Commissioner"] > div.cphone .phone.cell {display: block; } 
   &[data-position^="Commission"] > div.cphone .phone.home, &[data-position="Commission Chair"] > div.cphone .phone.cell {display: block; } 
   &[data-position^="Commission"] > div.cphone .phone.home, &[data-position="Commission Vice Chair"] > div.cphone .phone.cell {display: block; }
 }

/* ==================== Map Block ==================== */
mapBlock {max-width: 800px; }
.mapBlock svg path {fill: #f5f9ff; stroke: var(--highlight); transition: 0.3s ease; cursor: pointer; 
  &.active, &:hover {fill: #c8ddf2; transition: 0.3s ease; } 
  &.highlightCounty {fill: #bfdfce; } 
  svg text {fill: var(--primary); font-size: 8px; font-weight: 400; font-family: var(--bodytext); pointer-events: none; }                    
}

/* ==================== Member Login Box ==================== */
#memberloginbox {margin-bottom: 20px; margin: 5px auto; width: 100%; max-width: 350px; padding: 10px; 
  label {margin: 0; font-weight: 300; } 
  input {width: 93%; padding: 3%; } 
  select {width: 100%; } 
}

/* ==================== Search Box ==================== */
.searchbox {text-align: right; 
  input[type=submit] {background: url(/image/cache/searchicon.png) no-repeat center; border: 0; margin-left: -3em; } 
}

#byname {min-width: 22em; border: 0; padding: 5px 2em 5px 3px; }
#searchbyName {padding: 4px; background: #E1EBF2; border-bottom: 1px solid var(--gray); }
table.form_31_options, #clearform31, .search_options {display: none; }
.searchtype {text-align: center; padding: 0.5em 0; display: none; }

/* ==================== Tabs ==================== */
ul.tabs {padding: 0; margin: 0; border: 0; list-style: none; display: flex; width: 100%; text-align: center; justify-content: flex-start; /* margin-bottom: -1px; */ 
  li {padding: 10px 20px; cursor: pointer; margin-right: 1px; min-width: 47%; font-weight: bold; text-transform: uppercase; font-size: 1.2em; background: var(--darkgray); border-bottom: 0; border-top-left-radius: .25rem; border-top-right-radius: .25rem; /* box-shadow: 0px 0px 1px rgb(0 0 0 / 40%); */ 
    &:hover {color: var(--highlight); } 
    &.select {border: 1px solid var(--darkgray)ddd; color: var(--primary); margin-bottom: -1px; background: var(--white); border-bottom: 0; border-color:var(--white); position: relative; z-index: 9; } 
  } 
}

/* ==================== Tab Holder ==================== */
.tabholder {
  div.tabcont {display: none; padding: 10px; } 
  div.showtab {display: block; position: relative; z-index: 1; border: 1px solid var(--darkgray)ddd; border-bottom: 0; border-top-left-radius: .25rem; border-top-right-radius: .25rem; box-shadow: 0px 0px 0px rgb(0 0 0 / 20%); 
    iframe {width: 100%; min-height: 340px; } 
  } 
  div.showtab#tab2 {/* margin-bottom:100px; */ } 
}


/*Media Library*/
.folinfo{
  & .rgtsec {margin: 10px;
    .viewmode{display:flex;margin: 0;}  
  }
  & .viewmode div{width: 36px;height: 30px;}
  & .viewmode div.gridm{display:flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;}
  & .viewmode div.lstm {display:flex;align-items:center;flex-direction: column;justify-content: center;
    span{width:100%;margin: 2px;}                     
  }
  & .gridview .holder{display: grid;grid-template-columns: repeat(5, 1fr);grid-column-gap: 15px;grid-row-gap: 15px;
      & .mrow{height: 100%;float: none;background: var(--gray);margin-bottom: 15px;font-size: .9em;
        & .filename{height:auto;background: none;}      
      } 
                      
  }
}
/* ==================== Register ==================== */
.loginfield_msg {font-size: 14px; margin-bottom: 10px; } 
.user_info_block {background: rgb(250, 250, 250); border: 1px solid #ededed; padding: 15px; margin: 15px 0; padding-bottom: 35px; } 
.userinfotitle {padding: 0; margin-bottom: 15px; font-size: 20px; font-weight: 600; width: 70%; margin: 0 auto; }
.user_info_block {
  table.register {min-width: 70%; margin: 0 auto; position: relative; 
    input {margin: 5px 0; width: 100%; } 
    tr td {vertical-align: middle; position: static; 
      &:nth-child(2) {display: none; } 
    } 
  } 
}

/* ==================== Data Table Styles ==================== */
.data-table {display: table; width: 91%; margin: 0 auto; border-collapse: collapse;
  .data-row {display: table-row; border: 0; 
    &.caption {display: table-caption; width: 100%; 
      & .data-col {display: table; width: 100%; background: #00853e; border: 0; 
        h4, h2 {margin: 5px;color: var(--white);} 
      } 
    }
    .data-col {display: table-cell; border: 1px solid #ddd; padding: 2px 5px; 
      &.result {
        .fail {color: #e23c2c; font-weight: bold; } 
        .pass {color: #00853e; font-weight: bold; } 
      }
      &.options {text-align: center; 
        a {display: inline-block; padding: 0 8px; color: #f16368; } 
      }
    }

    &.head {
      & .data-col {background: #eee; padding: 3px 5px; color: #000; font-size: 14px; } 
    }
  }
}

/* ==================== User Data Table ==================== */
.userData {margin: 10px 0; margin-bottom: 25px; padding: 0 10px; 
  & .data-table {display: table; width: 100%; margin: 0 auto; border-collapse: collapse; 
    & .data-row {
      &.caption {
        & .data-col {
          h2 {font-size: 1.1em; color: #00853e; } 
        } 
      } 
      & .data-col {
        input {display: block; width: 95%; padding: 10px 5px; border: 1px solid #ddd; background: #eee; } 
        sup {color: red; } 
      } 
    } 
  } 
  &.error {
    & .data-table {
      & .data-row {
        & .data-col {
          input {border-color: red; } 
        } 
      } 
    } 
  } 
}

/* ==================== Test/Quiz ==================== */
.test_row {padding: 0 10px; margin-bottom: 10px; border-bottom: 1px solid #ddd; 
  h3 {color: #333; margin: 0; } 
  h2 {
    a {color: #e23c2c; font-weight: bold; } 
  } 
}

#testDetails {
  h3 {color: #e23c2c; padding: 10px; font-size: 1.2em; } 
}
/* ==================== User Details ==================== */
.userDetails {margin: 20px 0; display: table; 
  .detailsRow {display: table-row; 
    .detailsCol {display: table-cell; padding: 2px; 
      input {outline: none; pointer-events: none; border: 0; 
        &.require.error {border-bottom: 1px solid red; } 
      } 
    } 
  } 
}

/* ==================== Question Row ==================== */
.questionRow {margin-bottom: 10px; padding-left: 40px; 
  &.highlight {
    .question {color: #e23c2c; } 
  } 
  .question {font-weight: 400; padding-left: 0; 
    strong {font-weight: 600; margin-left: -33px; display: inline-block; width: 28px; text-align: right; padding-right: 5px; } 
  } 
  #form_166_post &.incorrectAns .question {color: #e23c2c; } 
}

/* ==================== Large Text Area ==================== */
.largeTexrArea {
  &.Radio {display: none; } 
  textarea {width: 80%; min-height: 60px; } 
}

/* ==================== Answer Block ==================== */
.AnswerBlock {font-weight: 200; 
  .correctAns {
    input {display: none; margin: 5px; } 
    label {color: #00853e; border: 1px solid #00853e; padding: 0; 
      &:before {content: ''; background: url('/image/cache/correct.png') no-repeat center center; background-size: 16px; display: inline-block; vertical-align: middle; width: 24px; height: 24px; } 
    } 
  } 
  .incorrectAns {
    input {display: none; margin: 5px; } 
    label {color: #000; border: 1px solid #e23c2c; padding: 0; 
      &:before {content: ''; background: url('/image/cache/incorrect.png') no-repeat center center; background-size: 16px; display: inline-block; vertical-align: middle; width: 24px; height: 24px; } 
    } 
  } 
  .qExp {
    p {font-size: 11px; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; color: #000; } 
  } 
}

/* ==================== Results Wrapper ==================== */
.resultsWrapper {padding: 0; 
  .test_row {padding: 0; margin: 0; 
    h1 {font-size: 24px; } 
  } 
  .userDetails {width: 100%; 
    &.data-table {margin: 10px 0; } 
  } 
  .question_answers {padding: 0 10px; } 
  .questionRow {
    &.Radio {
      .AnswerBlock > div {color: #333; margin-bottom: 5px; margin-left: 10px; 
        input {display: none; }
         label {display: inline-block; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #888; } 
       } 
     } 
   } 
 }

/*Admin area*/
/* ==================== Content and Sidebar Areas ==================== */
.contentArea {width: 78%; float: left; }

.sideNavArea {float: left; width: 20%; padding-left: 1%; 
  ul {margin: 0; padding: 0; margin-top: 50px; list-style: none; 
    li {display: block; 
      a {color: #fff; padding: 5px 10px; display: block; font-size: 16px; background: #e23c2c; border-bottom: 1px solid #fff; 
        &:hover {text-decoration: none; background: #e23c2c; } 
      } 
    } 
  } 
}

/* ==================== Test Results ==================== */
.test_results_individual {width: 100%; margin-bottom: 10px; }
.questionRow {
  .adminQuestion {padding: 5px; margin-bottom: 10px; border: 1px solid #e9eaea; background: #f9f9f9; 
    .AnswerBlock, .qBlock {display: table; width: 100%; border-collapse: collapse; 
      .AnswerBlockRow, .qBlockRow {display: table-row; 
        .AnswerBlockCol, .qBlockCol {display: table-cell; 
          &.links {min-width: 100px; 
            li {
              a {font-size: 12px; 
                &.delQue, &.delAns {background: #999; color: #fff; font-size: 10px; } 
              } 
            } 
          } 
        } 
      } 
    }

    h4 {font-weight: 600; padding-left: 30px; font-size: 15px; margin-bottom: 10px; 
      span {margin: 0 5px 0 -30px; color: #666; 
        &.edit {font-style: italic; 
          a {color: #e23c2c; font-size: 11px; font-weight: 600; display: inline-block; margin: 0 5px; } 
        } 
      } 
    }
  }
}

/* ==================== Admin Tests ==================== */
.AdminTests {
  .test_row {
    &:after {content: ''; display: table; clear: both; } 
    .testDts {float: left; } 
    .testActions {float: right; } 
    ul.question_options {margin: 20px 0; 
      li {display: inline-block; vertical-align: middle; margin: 0 5px; 
        &.Radio {display: inline-block; } 
        a {color: #ffffff; display: block; padding: 4px 10px; font-size: 14px; background: #3e3d3d; text-align: center; } 
      } 
    } 
  } 
  a.backLink {display: inline-block; vertical-align: middle; margin: 5px; 
    &.hide0 {display: none; } 
  } 
}

/* ==================== Answer Blocks ==================== */
.AnswerBlock {
  .AnswerBlockRow {
    h5 {margin: 0; font-size: 14px; font-weight: 500; display: none; } 
    .AnswerBlockCol {border-bottom: 1px solid #e9eaea; padding: 5px 0; background: #f9f9f9; 
      &:last-child {border: 0; } 
      .qAns {position: relative; padding-left: 20px; margin: 0; 
        &::before {content: ''; position: relative; left: 0; top: 0; display: inline-block; vertical-align: middle; width: 20px; height: 16px; background-repeat: no-repeat; background-position: center center; background-size: contain; margin-left: -20px; 
          &.crctAnsNo {background-image: url('/image/cache/incorrect.png'); } 
          &.crctAnsYes {background-image: url('/image/cache/correct.png'); } 
        } 
        span {
          &.expln {font-size: 12px; border: 1px dashed #ddd; padding: 1px; width: 100%; line-height: 16px; 
            &[data=""] {display: none; } 
            small {display: inline-block; background: #e9eaea; padding: 2px; margin-right: 3px; line-height: 16px; } 
          } 
          &.answer {display: inline-block; vertical-align: middle; } 
        } 
        strong {font-weight: 500; color: #666; } 
        a {position: absolute; float: right; right: 0; bottom: 0; display: block; width: 50px; text-align: center; color: #797979; font-size: 11px; font-weight: 600; display: inline-block; } 
      } 
    } 
  }
}

/* ==================== Actions ==================== */
ul.actions {margin: 0; padding: 0; text-align: right; list-style: none; 
  li {display: inline-block; vertical-align: middle; margin: 0 5px; 
    a {color: #e23c2c; font-size: 13px; font-weight: 500; display: inline-block; padding: 0 2px; } 
    &.add {display: none; } 
  } 
}
/* ==================== Question Answers ==================== */
.question_answers {margin: 30px 0 20px; 
  .questionRow {margin-bottom: 10px; padding-left: 30px; 
    &.Radio {
      .AnswerBlock {
        > div {display: none; 
          &.correctAns, &.incorrectAns {display: block !important; } 
        } 
      } 
    }
    .AnswerBlock {
      > div {color: #333; margin-bottom: 5px; margin-left: 5px; 
        input {display: none; } 
        label {display: inline-block; min-width: 500px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #888; padding: 0 5px; } 
      } 
      .correctAns {
        input {display: none; margin: 5px; } 
        label {color: #00853e; padding: 0; 
          &:before {content: ''; background: url('/image/cache/correct.png') no-repeat center center; background-size: 16px; display: inline-block; vertical-align: middle; width: 24px; height: 24px; } 
        } 
      } 
      .incorrectAns {
        input {display: none; margin: 5px; } 
        label {color: #000; padding: 0; 
          &:before {content: ''; background: url('/image/cache/incorrect.png') no-repeat center center; background-size: 16px; display: inline-block; vertical-align: middle; width: 24px; height: 24px; } 
        } 
      } 
      .qExp {
        p {font-size: 11px; margin: 0 0 10px; font-family: Arial, Helvetica, sans-serif; color: #888; } 
      } 
      .largeTexrArea {
        p {margin: 0 0 10px; color: #666; } 
      } 
    }
    .question {font-weight: 400; 
      strong {margin-left: -40px; display: inline-block; width: 35px; text-align: left; padding-right: 5px; } 
    }
    .question_description {display: none; }
  }
}
/* ==================== Modal Window ==================== */
.modalwindow {width: 100%; z-index: 100; position: fixed; height: 100%; background: #fff; margin: 0 auto; }
.modalcontent {text-align: center; 
  a {font-size: 20px;color: #ccc;background: red;padding: 0 6px;color: #fff;position: absolute;display: block;z-index: 10;right: 0px;top: 0px;width: 25px;height: 25px;text-align: center;line-height: 1;} 
  p a {float: none; } 
}
.player {
  iframe {width: 90%; height: 500px; max-width: 890px; } 
}

/* Modal */
#modalxwindow {position: fixed;top: 0;bottom: 0;margin: auto;left: 0;height: 90%;z-index: 9999;width: 100%;}
#shade {background: rgba(0, 0, 0, 0.7); background-image: url(/image/cache/overlay-pattern.png); z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; }
#modalxdata {width: 60%; height: 530px; padding: 1%; margin: 0 auto; position: relative; text-align: center; background: none; 
  &.modalFormData {background: #fff; } 
}
#shadex {display: block;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;background: #000;z-index: 9998;opacity: 0.75;filter: alpha(opacity=75);}
.modalcontent {height: 100%; }

#modalxbox {height: 100%; 
  .embed {width: 98%; padding: 1%; text-align: left; background: #171717; color: #fff; 
    textarea {padding: 5px; max-width: 98.5%; max-height: 30px; width: 98.5%; height: 30px; background: #2f2f2f; color: #898f8f; border: 0; 
      &:focus {color: #ccc; outline: 0; } 
    } 
  } 
  &.form-popup {padding: 10px; background: #fff; 
    iframe {width: 100%; height: 100%; min-height: 470px; } 
  } 
}

@media all and (min-width: 0px) and (max-height: 470px) {
  #modalxwindow #modalxdata.modalFormData {height: 100%; overflow: hidden; }
  #modalxwindow #modalxdata.modalFormData {height: 95%; overflow-y: scroll; padding: 1%; }
}




@media all and (min-width: 0px) and (max-width: 992px) { 
.logo button {display:block;font-size: 24px;}
.searchBlock {margin:10px 0;width: 100%;/* justify-content: space-between; */}   
.HeaderNav .searchBlock.collapse.show {position: relative;width:100%;display: block;z-index: 9;margin: 10px;}    
.searchBlock { }
.searchBlock form{float:none;width: 100%;}
.searchBlock input[type=text]{ width:100%;}
.mobileTop {/* display:block; */background: var(--primary);padding: 5px 0;}
.mobileTop ul{    justify-content: center;}
.logo img{max-width: 200px;}
.navIcon {display: flex;justify-content: flex-end;align-items: center;}
.userNav ul li { padding:0 10px;}


 .slider-block .slider_block { height:300px;}
 .sliderContent div.base.slShow div.caption {width:auto;}
 .sliderContent div.base div.caption h2 { font-size:2em;}
 #footnav > ul > li.head {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
 .entry-wrapper {flex-direction:column;}

 .countyInfoBlock {
  .county_img{ flex: 0 0 auto; width: 100%;
    img{display:block;margin: 15px auto;/* width:100%; */max-width:100%;}     
  }
   &  .conty_info, & .county_map {flex: 0 0 auto; width: 50%;}}              
 }  

}

 @media all and (min-width: 0px) and (max-width: 880px) { 

 }

@media all and (min-width: 0px) and (max-width: 768px) { 
.userNav, .userNav ul, .Header #social ul {text-align:center;justify-content: center;}
.HeaderNav .searchBlock { display:none;} 
.iconsBarWrapper .iconsBar ul li{-ms-flex: 0 0 30%;flex: 0 0 30%;max-width: 30%;}
  #footnav > ul > li.head {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
 
}
@media all and (min-width: 0px) and (max-width: 520px) {
 .iconsBarWrapper .iconsBar ul li { min-width:20%;}
   .CD_col { display:block;}  
}

@media all and (min-width: 0px) and (max-width: 460px) {
 .homeicons { display:block;}
 .homeicons li{ display:block;}
 .iconsBarWrapper .iconsBar ul li{-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}  

 .countyInfoBlock {
   & .conty_info, & .county_map {flex: 0 0 auto; width: 100%;}
 }          
 
  .eblock > div{width:100%;display: block;margin: 10px 0;}
}

@media all and (min-width: 0px) and (max-width: 380px) {
 .logo img {max-width:100%;}
 .navIcon .NavbarToggle, .navIcon .searchbarToggle {padding: 5px;}
 .navIcon .NavbarToggle i {padding: 10px 5px;}
}