/* Form Search*/

 .search-container form { display: flex; position: relative; background-color: #475c6a; padding: 32px 10px; border-radius: 12px; margin: 35px 0px; justify-content: space-evenly;}
 .search-container form label{ margin: 0px 20px; font-weight: 600; font-size: 18px; color: white; flex: 1;}
 .search-container form [type=text]{ border: none; min-height: 50px; font-size: 16px; margin-top: 20px; color: black; font-weight: 400; width: 100%; display: flex;}
 .search-container input::placeholder{ color: black; font-size: 16px;}

 .search-container form select{ border: none; min-height: 50px; margin-top: 20px; color: black; font-weight: 400; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: white url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 370px center; display: flex;}

 .search-container form [type=submit]{ border-radius: 10px; min-height: 50px; align-items: center; border: none; padding: 10px 60px; background-color: white; font-weight: 600; color: #475c6a; font-size: 16px; cursor: pointer; transition: 0.5s;justify-content: center; margin: 37px 20px 0px 20px; display: flex;}

.search-container form [type=submit]:hover{ background-color: #002b8e;  color: white;}
.search-container form [type=submit]:active{ background-color: #005cb9; color: white;}


/* Alphabet Search*/
h2{    margin: 35px 0px;

}
 .alphabet-container ul{ display: flex;}

 .alphabet-container li a{ display: flex; text-decoration: none; font-weight: 600; padding: 8px; margin: 0px 2px; color: #425564; font-size: 26px; position: relative; justify-content:flex-start;}
 .alphabet-container li a.active,
 .alphabet-container li a:hover{background-color: var(--primary-color);color: white;}

 .alphabet-container li a:active{ background-color: #005cb9; color: white;}

 /* Search Results header*/

 .results-container{ display: flex; justify-content: space-between;}
 .filter-results-container{display: inline-flex;align-self: center;}
 .filter-results-container #results-label{ display: inline-flex; width: 550px; align-items: center; font-weight: 600;}

 /* Results Table*/

 .results-table{ width: 100%; margin-top: 20px;}
 .results-table th{ background-color: #425564; color: white; font-weight: 600; text-align: left; padding: 26px 16px; font-size: 18px;}
 .results-table tr td{ color: black; padding: 10px 0px 35px 16px; text-align: left; border: solid 2px lightgrey;}
 .results-table tr td:nth-child(1) svg{ max-height: 40px; position: relative; margin: 15px 0px -15px 15px;}
 .results-table tr:nth-child(even) {background: #FFF}
 .results-table tr:nth-child(odd) {background: #f2f2f2}
 .results-table tr td:nth-child(2) {font-weight: 700;}

.results-table tr th{min-height: 50px !important;max-height: initial !important;height: 30px;padding-top: 22px !important;}
.results-table tr th svg{width: 24px;margin: 0px 0px -4px 8px; cursor: pointer;}
.results-table tr:nth-child(1) > th:first-child {border-radius: 5px 0 0 5px;}
.results-table tr:nth-child(1) > th:last-child {border-radius: 0 5px 5px 0;}
.results-table th:nth-child(2){text-decoration: underline; font-weight: 700;}
.results-table th:nth-child(3){text-decoration: underline;font-weight: 700;}
.results-table th:nth-child(4){text-decoration: underline;font-weight: 700;}
.results-table th:nth-child(5){font-weight: 700;}
.results-table th:nth-child(6){font-weight: 700;}

.results-table:first-child{border-radius: 12px;}

.results-table tbody tr > td:first-child span {display: flex;justify-content: center;align-items: center;background-color: white;padding: 0px;border-radius: 8px;width: 55px;height: 55px;margin: auto;position: relative;overflow: hidden;}
.results-table tbody tr > td:first-child span svg {display: block;background-color: white;margin: 0;padding: 3px;height: 45px;width: 45px;}
.results-table tbody tr > td:first-child span img { max-width: 100%}

.results-table tr th{min-height: 50px !important;max-height: initial !important;height: 30px;padding-top: 22px !important;}
.results-table tr th svg{width: 24px;margin: 0px 0px -4px 8px; cursor: pointer;}
.results-table tr a {text-decoration: none;margin-left: 5px;} 
.results-table tr td:nth-child(1) a {text-decoration: none;color: #005cb9;display: flex;justify-content: center;align-items: center;width: 55px;height: 55px;border-radius: 10px;} 

.dataTables_wrapper .dataTables_filter { margin: 25px 0; position: absolute; right: 0; bottom: 100%;}
.dataTables_wrapper .dataTables_filter label { color: #231F20;}
.dataTables_wrapper .dataTables_filter label input{background-color: white;height: 40px;margin-left: 20px;margin-bottom: 10px;border: none;border-radius: 0px;width: 25vw;min-width: 160px;max-width: 300px;}
table.dataTable thead .sorting {text-decoration: none; font-size: 12px}

 /* Side Search box*/
.side-search-container{  background-color: #425564;  width: 320px;  border-radius: 12px;  color: white;  padding: 0px 14px 22px 14px;}
.search-sm-header{ display: flex; justify-content: space-between;}
.search-bar-sm{ display: flex; justify-content: space-between;}
.search-bar-sm svg{ width: 27px;}
.search-sm-header svg{ width: 20px;}
.search-sm-header > button{ background-color: transparent; border: none; cursor: pointer;}

.search-bar-sm form{ display: flex;}
.search-bar-sm input{ max-height: 40px;  min-width: 250px; margin-top: 10px; color: black; display: flex;}
.search-bar-sm input::placeholder{ color: black; font-weight: 400;}
.search-bar-sm button{ background-color: transparent; border: none; display: flex; cursor: pointer; margin: 12px 0px 0px 5px;}
.search-sm-text p{ display: flex; text-align: right; line-height: 1.2rem;}

.sm-line-divider{  border: solid 2px lightgrey;  width: 320px;  margin: 16px 0px;}


/* You are here Section*/

.you-are-here-content ul a{ background-color: white; text-decoration: none; font-size: 12px; padding: 0px 30px; line-height: 2rem;}
.you-are-here-content ul a:hover{ font-weight: 600; text-decoration: underline;}
.you-are-here-content{ margin-top: -10px;}

.you-are-here-container h4{  padding-top: 20px;  padding-left: 24px;  margin-bottom: -4px;}
.you-are-here-container{ background-color: white; border-radius: 12px; width: 320px; margin-bottom: 20px; padding-bottom: 10px;}


  /* Side Navigation*/

.side-navigation-sm{ width: 320px;}
.page-title-container{ display: flex; background-color: transparent; width: 320px; padding: 14px 18px; justify-content: space-between;}

.computer{ width: 25px; display: flex; cursor: pointer;}

.down-arrow{  width: 20px; display: flex; margin-top: 3px; margin-right: 5px;  cursor: pointer;}
.search-icon{ width: 18px; margin-left: 110px; cursor: pointer;}
.collapsible{  display: flex;  background-color: transparent;  cursor: pointer;  font-weight: 600;  width: 120px;  border: none;}
.page-title-container:hover { background-color: white; border-radius: 12px; padding: 14px 18px;}
.content ul a{ text-decoration: none; font-size: 12px; padding: 0px 24px; line-height: 2rem;}
.content ul a:hover{ font-weight: 600; text-decoration: underline;}
.content { background-color: white; overflow: hidden; display: none; border-radius: 12px;
  }



 /* Form Search*/

 .search-container form {display: flex;position: relative;background-color: var(--primary-color);padding: 32px 10px;border-radius: 10px;margin: 35px 0px;justify-content: space-evenly;}
 .search-container form label{ margin: 0px 20px; font-weight: 600; font-size: 18px; color: white; flex: 1;}
 .search-container form [type=text]{ border: none; min-height: 50px; font-size: 16px; margin-top: 20px; color: black; font-weight: 400; width: 100%; display: flex;}
 .search-container input::placeholder{ color: black; font-size: 16px;}
 .search-container form select{ border: none; min-height: 50px; margin-top: 20px; color: black; font-weight: 400; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: white url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 370px center; display: flex; background-position: calc(100% - 15px) 50%;}

 .search-container form [type=submit]{ border-radius: 10px; min-height: 50px; align-items: center; border: none; padding: 10px 60px; background-color: white; font-weight: 600; color: #475c6a; font-size: 16px; cursor: pointer; transition: 0.5s; justify-content: center; margin: 37px 20px 0px 20px; display: flex;
}

.search-container form [type=submit]:hover{ background-color: #002b8e;  color: white;}
.search-container form [type=submit]:active{  background-color: #005cb9;  color: white;
}


/* Alphabet Search*/
h2{    margin: 35px 0px;

}
 .alphabet-container ul{  display: flex; flex-wrap: wrap;}
 .alphabet-container li a{display: flex;text-decoration: none;font-weight: 600;padding: 8px;margin: 0px 2px;color: var(--primary-color);font-size: 26px;position: relative;justify-content:flex-start;}
 .alphabet-container li a:hover{background-color: var(--primary-color);color: white;}
 .alphabet-container li a:active{ background-color: #005cb9; color: white;
 }

 /* Search Results header*/

 .results-container{ display: flex; justify-content: space-between;}

 .filter-results-container{ display: inline-flex; align-self: center;}

 .filter-results-container #results-label{ display: inline-flex; width: 550px; align-items: center; font-weight: 600;}

 /* Results Table*/

 .results-table{width: 100%; margin-top: 20px;
}

 .results-table th{
   background-color: var(--primary-color);
   color: white;
   font-weight: 600;
   text-align: left;
   padding: 26px 16px;
   font-size: 18px;
 }

 .results-table tr td{
   color: black;
   padding: 10px 0px 35px 16px;
   text-align: left;
   border: solid 2px lightgrey;
   vertical-align: middle;
 }

 .results-table tr td:nth-child(1) svg{
   max-height: 40px;
   position: relative;
   margin: 0;
   width: 40px;
}

 .results-table tr:nth-child(even) {background: #FFF}
 .results-table tr:nth-child(odd) {background: #f2f2f2}
 .results-table tr td:nth-child(2) {font-weight: 700;}

.results-table tr th{min-height: 50px !important;max-height: initial !important;height: 30px;padding-top: 22px !important;}
.results-table tr th svg{width: 24px;margin: 0px 0px -4px 8px; cursor: pointer;}

.results-table th:nth-child(2){text-decoration: underline; font-weight: 700;}
.results-table th:nth-child(3){text-decoration: underline;font-weight: 700;}
.results-table th:nth-child(4){text-decoration: underline;font-weight: 700;}
.results-table th:nth-child(5){font-weight: 700;}
.results-table th:nth-child(6){font-weight: 700;}

.results-table:first-child{border-radius: 12px;}

table.dataTable tbody tr td:nth-child(1) {
    max-width: 65px;
    width: 65px;
}

 /* Side Search box*/
.side-search-container{
   background-color: #425564;
   width: 320px;
   border-radius: 12px;
   color: white;
   padding: 0px 14px 22px 14px;
}

.search-sm-header{
   display: flex;
   justify-content: space-between;
}

.search-bar-sm{
   display: flex;
   justify-content: space-between;
}

.search-bar-sm svg{
    width: 27px;
}

.search-sm-header svg{
    width: 20px;
}

.search-sm-header > button{
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.search-bar-sm form{ display: flex;}

.search-bar-sm input{
   max-height: 40px;
    min-width: 250px;
   margin-top: 10px;
   color: black;
   display: flex;
}

.search-bar-sm input::placeholder{
    color: black;
    font-weight: 400;
}

.search-bar-sm button{
   background-color: transparent;
   border: none;
   display: flex;
   cursor: pointer;
   margin: 12px 0px 0px 5px;
}

.search-sm-text p{
   display: flex;
   text-align: right;
   line-height: 1.2rem;
}

.sm-line-divider{
   border: solid 2px lightgrey;
   width: 320px;
   margin: 16px 0px;
}


/* You are here Section*/

.you-are-here-content ul a{
    background-color: white;
    text-decoration: none;
    font-size: 12px;
    padding: 0px 30px;
    line-height: 2rem;
}

.you-are-here-content ul a:hover{
    font-weight: 600;
    text-decoration: underline;
 }

 .you-are-here-content{
    margin-top: -10px;
 }

.you-are-here-container h4{
    padding-top: 20px;
    padding-left: 24px;
    margin-bottom: -4px;
}
.you-are-here-container{
    background-color: white;
    border-radius: 12px;
    width: 320px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

  /* Side Navigation*/

.side-navigation-sm{
    width: 320px;
}

.page-title-container{
    display: flex;
    background-color: transparent;
    width: 320px;
    padding: 14px 18px;
    justify-content: space-between;
}

.computer{
    width: 25px;
    display: flex;
    cursor: pointer;
}

.down-arrow{
    width: 20px;
    display: flex;
    margin-top: 3px;
    margin-right: 5px;
    cursor: pointer;
}
.search-icon{
    width: 18px;
    margin-left: 110px;
    cursor: pointer;
}

.collapsible{
    display: flex;
    background-color: transparent;
    cursor: pointer;
    font-weight: 600;
    width: 120px;
    border: none;
}

.page-title-container:hover {
    background-color: white;
    border-radius: 12px;
    padding: 14px 18px;
  }

.content ul a{
    text-decoration: none;
    font-size: 12px;
    padding: 0px 24px;
    line-height: 2rem;
}

.content ul a:hover{
   font-weight: 600;
   text-decoration: underline;
}

.content {
    background-color: white;
    overflow: hidden;
    display: none;
    border-radius: 12px;
  }

    /* ===============
    * 
    * MOBILE 
    * 
    * ===============
    */
    @media only screen and (min-device-width: 375px) 
    and (max-device-width: 812px)
    { 
     /* Form Search*/

    .search-container form {display: block;}
    .search-container form label{    margin: 0;}
    .search-container form [type=text]{ margin-bottom: 20px;}
    .search-container form select{margin-bottom: 20px;}
    .search-container form [type=submit]{ margin: 10px 0px 0px 0px;width: 100%;margin-top: 1;}

    /* Search Results header*/

    .results-container{display: block; }
    .results-container .results-title h2{display: block;margin: 30px 0px 0px;}
    .results-container #table_id_filter{display: block; }
    .filter-results-container #results-label{ display: block;}
    .dataTables_wrapper .dataTables_filter label input {/* display: block; */position: relative;min-width: 70vw;}
    .dataTables_wrapper .dataTables_filter {/* margin: 25px 0; */position: relative;/* right: 0; *//* bottom: 100%; */margin-top: -20px;}
    .dataTables_wrapper .dataTables_filter label {color: #231F20;display: flex;align-items: center;}

    /* Results Table*/

    .results-table{}
    .results-table th{}
    .results-table tr td{}
    table.dataTable{}

 }