/* Form Search*/

 .search-container form {
    display: flex;
    position: relative;
    background-color: var(--primary-color);
    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: var(--primary-color);
    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;color: #005cb9;} 

.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;}

 /* 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: var(--primary-color);
    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: 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 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;}

 /* 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{}

 }