/*Search Tables*/

@font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/roboto-400.woff2') format('woff2'), url('../fonts/roboto-400.woff') format('woff');
}
@font-face {font-family: 'RobotoCond'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/roboto-400-cond.woff2') format('woff2'), url('../fonts/roboto-400-cond.woff') format('woff');
}

.sorttblhelp, .ph1msg {text-align: center; font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 24px;}
.sorttblhelp {margin-top: 30px;} .ph1msg {margin-top: 10px; color: #F00;}

#sortablesectionback {text-align: center; margin: 0 auto 40px auto;}
#sortableback2 {position: relative; background-color: #AAA; padding-top: 32px; display: inline-block;}
#sortableback {overflow-y: auto; overflow-x: hidden; max-height: 765px;}

.sortable th:nth-child(1) div {border-left: none;}
.sortable th:nth-child(1) div, .sortable th:nth-child(4) div {font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;}

.sortable {background-color: #e6f6f5; text-align: center; margin: auto; border: 1px solid #4B96A6; border-top: 0; border-collapse: collapse;}
.sortable * {user-select: none;}

.sortable tr, .sortable td {cursor: pointer; color: #0164CA;} .sortable tr:first-child td {border-top: 0;}
.sortable tr:hover {background-color: #bce6e7;}

.sortable th {height: 0; padding: 0;}
.sortable th div {font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 24px; font-weight: 400; position: absolute; top: 0; padding: 4px 6px; text-align: center; color: #FFF; border-left: 1px solid #A4C6BD; background-color: #268397; white-space: nowrap;}
.sortable th div:hover, .sortable th div:active, .sortable th div:focus {background-color: #4fbdd5;} .sortable th:hover {cursor: pointer;}
.sortable th div:after {content: ""; background-image:url(../webimgs/updownarrow.png); display: inline-block; padding-left: 6px; padding-bottom: 1px; height: 11px; width: 7px; background-position: right center; background-size: 7px 11px; background-repeat: no-repeat;}

.sortable td {text-align: left; font-family: 'RobotoCond', Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.35; padding: 6px; border: 1px solid #A4C6BD;}

.datehead div, .sortable td:nth-child(1) {width: 45px; font-size: 14px; white-space: nowrap;} /*date*/
.scenthead div, .sortable td:nth-child(2) {width: 140px;}
.sortable td:nth-child(2) {position: relative;} /*scent name - position relative so link stretches across other columns*/
.typehead div, .sortable td:nth-child(3) {width: 85px; white-space: nowrap;} /*scent type*/
.throwhead div, .sortable td:nth-child(4) {width: 52px; text-align: center;} /*throw*/ .throwhead, .throwhead div {text-align: left !important;}

.sortable a:before {content: ''; position:absolute; left: -60px; top: 0; bottom: 0; display: block; width: 100vw;} /*extends link to all columns*/
.sortable a {color: inherit; text-decoration: none;}

@media (min-width: 396px) {.sortable {width: 380px;}}
@media (max-width: 395px) {
.sortable {width: 320px;} .sortable td {font-size: 16px;} .scenthead div, .sortable td:nth-child(2) {width: 100px;}
.typehead div, .sortable td:nth-child(3) {width: 80px;} .throwhead div {font-size: 16px; letter-spacing: -.5px; width: 50px;}
}
@media (max-width: 335px) {
.sortable {width: auto;} .throwhead div {font-size: 16px; letter-spacing: -.5px;} .ph1msg {display: block !important;}
.sortable th:nth-child(3), .sortable td:nth-child(3) {display: none;}
.scenthead div, .sortable td:nth-child(2) {width: 125px;}
}