/*=========== HEADER ============ */

.single-post .gel-test-chart h2 {
    font-size: 3em;
    font-family: 'Pathway Gothic One', sans-serif;
    border:none;
    margin-top:5px;
    text-align: center;
    font-weight: normal;
    width: 100%;
    padding-left: 250px;
    color:#444545;
    margin-bottom: 16px;
}

 .gel-test-chart__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

.gel-test-chart .test-results-labels {
    list-style: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    margin-left: 0px;
    padding-left: 5px;
    min-width: 260px;
}

 .gel-test-chart .test-results-labels li:nth-child(2n) {
     margin-top: 1px;
     margin-bottom: 1px;
 }

 .gel-test-chart .test-results-labels li span.label {
    margin:0px;
    padding: 0px;
    width: auto;
    display: inline-block;
    float: none;
    height: auto;
    padding: 0 4px;
    background-color: #262626;
    color: #fff;
    width: 70px;
    border-radius: 0px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}

.gel-test-chart .test-results-labels li span.test-gun {
    margin-right:2px;
    background: #dadada;
    padding: 3px;
}

 /*=========== TABLE ============ */

.gel-test-chart table tr td {
    color: #fff;
}
.gel-test-chart table tr td span {
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    display: inline-block;
    width: 61px;
    vertical-align: middle;
    text-align: center;
}

.gel-test-chart table tr td .depth-container {
    display: inline-block;
    max-width: 477px;
    max-height: 52px;
}

.gel-test-chart table tr td .depth-container img {
    width: 100%;
    max-height: 50px;
}

.gel-test-chart .product-name {
    background-color: #837d6d;
    margin: 15px;
    cursor: pointer;
}
.gel-test-chart .product-name:hover {
    text-decoration: underline;
}

.gel-test-chart .product-name a{
    text-decoration: none;
    color: #fff;
}
.gel-test-chart .product-name a:hover {
    text-decoration: underline;
}
.gel-test-chart .average-depth  span {
    padding-top: 10px;
    background-color: #486546 ;
    width: 63px;
    font-size: 18px;
    cursor: pointer;
}
.gel-test-chart .average-diameter-expansion  {
    cursor: pointer;
}
.gel-test-chart .average-diameter-expansion img {
    width: 100%;
    max-height: 50px;
}

.gel-test-chart .penetration-graph  {
    cursor: pointer;
}

 .gel-test-chart .penetration-graph  .depth-icon{
     display: none;
 }
 .gel-test-chart .penetration-graph  .depth-container{
     display: block;
 }
.gel-test-chart .average-diameter  span {
    padding-top: 10px;
    background-color: #304268;
    width: 63px;
    font-size: 18px;
    cursor: pointer;
}

.gel-test-chart .average-velocity  span {
    padding-top: 10px;
    background-color: #7e3435;
    width: 63px;
    font-size: 18px;
}

.gel-test-chart .barrel-length  span {
    padding-top: 10px;
    background-color: #7e3435;
    width: 63px;
    font-size: 18px;
}


 .gel-test-chart table tr td span.depth-icon {
     background-color: #486546 ;
     color: #fff;
 }
 .gel-test-chart table tr td span.depth-icon .fa {
     font-size: 16px;
     margin-top: 5px;
     height: auto;
 }
 .gel-test-chart table tr td span.depth-icon .info {
     display: block;
     height: auto;
     font-size: 11px;
     font-family: 'Pathway Gothic One', sans-serif !important;

 }
 .gel-test-chart .ui-jqgrid-labels .s-ico{
     display: inline-block !important;
     margin-top: 0px;
     font-size: 16px;
     height: 12px;
     margin-left: 5px;
 }

.gel-test-chart .ui-jqgrid-labels th.penetration-graph{
    background-color: #486546 ;
    border-right-color: #486546 ;
}
.gel-test-chart .ui-jqgrid-labels th.average-depth{
    background-color: #486546 ;
}
.gel-test-chart .ui-jqgrid-labels th.average-depth .s-ico{
    display: none !important;
}
.gel-test-chart .ui-jqgrid-labels th.average-diameter .s-ico{
    display: none !important;
}
.gel-test-chart .ui-jqgrid-labels th.average-diameter{
    background-color: #304268;
}
.gel-test-chart .ui-jqgrid-labels th.average-diameter-expansion{
    background-color: #304268;
    border-right-color: #304268;
}
.gel-test-chart .ui-jqgrid-labels th.average-velocity .s-ico{
    display: none !important;
}
.gel-test-chart .ui-jqgrid-labels th.average-velocity{
    background-color: #7e3435;
}
 .gel-test-chart .ui-jqgrid-labels th.barrel-length{
    background-color: #7e3435;
}

.grid-body-spacer {
    margin-top: 96px !important;
}

.grid-header-sticky {
    position: fixed !important;
    top: 0px;
    border-bottom: solid 3px #486546;
    z-index: 1000;

    -webkit-box-shadow: 0 6px 4px -4px #82b77f;
    -moz-box-shadow: 0 6px 4px -4px #82b77f;
    box-shadow: 0 6px 4px -4px #82b77f;
}


.gel-test-chart .ui-jqgrid tr > th {
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    border-collapse: separate;
    border-spacing: 10px 5px;
    color: #fff;
    text-transform: uppercase;
    white-space: normal;
}

.ui-jqgrid-labels .ui-th-column-header, .ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
    white-space: normal;
}
.gel-test-chart .ui-jqgrid tr.jqgrow > td {
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    border-collapse: separate;
    border-spacing: 10px 5px;
    position: relative;
    padding:0px;
}

.gel-test-chart .ui-jqgrid tr.jqgrow > td.product-name span{
    text-decoration: none;
    color:#fff;
    font-size: 1.3em;
    font-weight: bold;
    white-space: normal;
    text-align: center;
    height: auto;
    width: auto;
    font-size: inherit;
    cursor: default;
}

.gel-test-chart .ui-jqgrid tr.jqgrow > td.product-name {
    font-size: 1.3em;
    font-weight: bold;
    white-space: normal;
    text-align: center;
    height: 50px;
}

.gel-test-chart .ui-jqgrid .ui-jqgrid-hdiv .ui-search-toolbar .ui-th-column {
    border-top: 5px solid #fff;
}

.gel-test-chart .ui-search-toolbar .ui-th-column {
    height: 50px;
}

 .gel-test-chart .ui-search-toolbar .ui-th-column input{
     font-size: 18px;
     padding-left: 8px !important;
     padding-right: 8px !important;
     color: #342f2a;
 }


.gel-test-chart .ui-search-toolbar .ui-th-column.penetration-graph {
    background:url('../img/scale.jpg');
    background-repeat: no-repeat;
    background-position:bottom left;
    background-size: contain;
    background-color: #fff;
}
.gel-test-chart .ui-search-toolbar .ui-th-column.average-depth {
    background-color: #837d6d;
}
.gel-test-chart .ui-search-toolbar .ui-th-column.average-diameter {
    background-color: #837d6d;
}
.gel-test-chart .ui-search-toolbar .ui-search-clear{
    display: none;
}
 .gel-test-chart .ui-search-toolbar .product-name .ui-search-clear {
    display: table-cell;
}

 .gel-test-chart .ui-search-toolbar .product-name .ui-search-clear a.clearsearchclass{
     padding-right: 0.5em !important;
     padding-left: 0.5em !important;
     font-size: 1.8em;
     background-color: #486546;
 }

.gel-test-chart .ui-search-toolbar .ui-th-column.average-diameter-expansion {
    background-color: #837d6d;
}
.gel-test-chart .ui-search-toolbar .ui-th-column.average-velocity {
    background-color: #837d6d;
}
.gel-test-chart .ui-search-toolbar .ui-th-column.barrel-length {
    background-color: #837d6d;
}

 .gel-test-chart .ui-search-toolbar .label-second-header {
     font-size: 1em;
     color: #fff !important;
     text-align: center;
     background-color: transparent;
     width: 100%;
     display: inline-block;
     vertical-align: middle;
     padding-top: 3px;
 }


 .gel-test-chart table tr td span.zoom-indicator {
     width: 22px;
     height: 22px;
     position: absolute;
     right: 0;
     top:0;
     background:url('../img/zoom.png');
     background-repeat: no-repeat;
     background-position:top right;
 }

 /*=========== PAGER ============ */


.geltest-pager {
    background-color: #837d6d;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: 'Pathway Gothic One', sans-serif !important;
}
.gel-test-chart .geltest-pager td{
    vertical-align: middle;
    font-size: 18px !important;
}
.geltest-pager .pager-btn-container{
    min-width: 260px;
}

.gel-test-chart .geltest-pager span{
    height: auto;
    width: auto;
    padding: 2px;
    margin:0px;
    font-size: 18px !important;
}

.gel-test-chart .geltest-pager .ui-pg-input{
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: right;
    vertical-align: middle;
    font-size: 18px !important;
}

.gel-test-chart .ui-jqgrid-labels span{
    font-size: 12px;
    height: 7px;
    width: auto;
    padding-top: 0px;
}

 .gel-test-chart .geltest-pager .ui-pg-button span{
     padding-left: 5px;
     padding-right: 5px;
 }
 .gel-test-chart .geltest-pager .pager-btn-next, .gel-test-chart .geltest-pager .pager-btn-previous{
    background-color: #0F8541;
     border: solid 2px #fff;
 }
 .gel-test-chart .geltest-pager .pager-label{
     line-height: 1;
 }

 .gel-test-chart .ui-jqgrid-labels .s-ico span {
     font-size: 16px;
 }

 /*=========== SHARE SECTION ============ */

 .gel-test-share {
     background: linear-gradient(176deg, #298a47 0%,#298a47 50%,#2f9c3d 51%,#2f9c3d 100%);;
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
     padding: 15px 20px;
     color: #fff;
     display: flex;
     justify-content: space-between;
 }

 .gel-test-share .share-icon{
     width: 38px;
     height: 38px;
     fill: white;
     rotate: 270deg;
 }


 .gel-test-share .share-description {
     margin-bottom: 20px;
 }

 .gel-test-share div.simplesocialbuttons {
  margin-top: 0px;
 }
 .retention-notice{
     text-align: right;
     font-size: 0.9em;
     color: #808080;
     padding-right: 10px;
 }

 .weight-retention {
     position: relative;
 }
 .weight-retention:before {
     position: absolute;
     font-family: 'FontAwesome';
     top: 0;
     right: 6px;
     content: "*";
     font-size: 18px;
 }

 /* Interaction Cues
 ----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .5;
    filter:Alpha(Opacity=5); /* support: IE8 */
    background-image: none;
}
.ui-state-disabled .ui-icon {
    filter:Alpha(Opacity=5); /* support: IE8 - See #6059 */
}

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}
 /*=========== PRELOADER ============ */

 .chart-grid-preloader {
     width: 200px;
     height: 70px;
     text-align: center;
     background:url('../img/preloader.gif');
     background-repeat: no-repeat;
     background-position:top center;
     font-weight: bold;
     color: #837d6d ;
     padding-top: 50px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 100px;
     margin-bottom: 100px;
 }

 /*=========== LIGHTBOX CSS MODIFICATION============ */
 .geltest-lightbox-wrapper .sl-image{
     scale: 0.8;
 }
 .geltest-lightbox-wrapper .sl-additional-html{

     background-color: #318040;
     background-image: url("../img/video_thumb.jpg");
     background-repeat: no-repeat;
     background-position: 5px center;
     background-size: contain;
     border-top: #318040 solid 5px;
     border-bottom: #318040 solid 5px;
     padding-top: 5px;
     padding-right: 10px;
     margin-top:7px;
     cursor: pointer;
     vertical-align: middle;
     color: #FFF;
     font-size: 2em;
     text-align: right;
     width: 776px;
     margin-left: auto;
     margin-right: auto;
     height: 100px;
 }
 .geltest-lightbox-wrapper .sl-additional-html .title-label{
     color:  #F6EE26;
     position: relative;
 }
 .geltest-lightbox-wrapper .sl-additional-html .accent{
     color:  #FFF;
     font-weight: bold;
     text-decoration: underline;
 }
 .geltest-lightbox-wrapper .sl-additional-html .subtitle{
     text-align: right;
     font-size: 0.8em;
     position: absolute;
     color:  #FFF;
     right: 0px;
     bottom: -35px;
 }


 /*=========== MEDIA QUERIES ============ */

 @media (max-width: 991px) {
     .single-post .gel-test-chart h2 {
         font-size: 2.7em;
         padding-left: 0;
     }


     .gel-test-chart .ui-search-toolbar .label-second-header {
         font-size: 0.85em;
         width: 100%;
         padding-top: 1px;
     }

     .gel-test-chart .ui-jqgrid tr.jqgrow > td.product-name {
         font-size: 1em;
         font-weight: bold;
         white-space: normal;
         text-align: center;
     }

     .gel-test-chart .average-depth  span {
         padding-top: 10px;
         width: 45px;
         font-size: 15px;
     }
     .gel-test-chart .average-diameter  span {
         padding-top: 10px;
         width: 45px;
         font-size: 15px;
     }

     .gel-test-chart .average-velocity  span {
         padding-top: 10px;
         width: 45px;
         font-size: 15px;
     }

     .gel-test-chart .ui-search-toolbar .ui-th-column {
         height: 30px;
     }

     .gel-test-chart table tr td span {
         height: 45px;
     }

     .geltest-lightbox-wrapper .sl-image{
         scale:none;
     }
     .geltest-lightbox-wrapper .sl-additional-html {
         height: 70px;
         font-size: 1.2em;
         width: 400px;
         padding-right: 10px;
         padding-left: 120px;
     }

     .geltest-lightbox-wrapper .sl-additional-html .subtitle{
         font-size: 0.9em;
         bottom: -28px;
     }

 }

 @media (max-width: 768px) {

     .gel-test-chart__header {
         flex-direction: column;
     }

     .gel-test-chart .test-results-labels {
         width: 100%;
     }

     .single-post .gel-test-chart h2 {
         font-size: 1.9em;
     }

     .gel-test-chart .ui-search-toolbar .label-second-header {
         font-size: 0.8em;
         width: 100%;
         padding-top: 0px;
     }

     .gel-test-chart .ui-jqgrid tr.jqgrow > td.product-name {
         font-size: 1em;
         font-weight: bold;
         white-space: normal;
         text-align: center;
     }

     .gel-test-chart .average-depth  span {
         padding-top: 10px;
         width: 50px;
         font-size: 14px;
     }
     .gel-test-chart .average-diameter  span {
         padding-top: 10px;
         width: 50px;
         font-size: 14px;
     }

     .gel-test-chart .average-velocity  span {
         padding-top: 10px;
         width: 50px;
         font-size: 14px;
     }

     .gel-test-chart table tr td span {
         height: 40px;
     }

     /*grid paddings*/

     .gel-test-chart .ui-jqgrid tr > th {
         border-bottom: 2px solid #fff;
         border-right: 2px solid #fff;
     }

     .gel-test-chart .ui-jqgrid tr.jqgrow > td {
         border-bottom: 2px solid #fff;
         border-right: 2px solid #fff;
     }

     .gel-test-chart .ui-jqgrid .ui-jqgrid-hdiv .ui-search-toolbar .ui-th-column {
         border-top: 2px solid #fff;
     }

     /*header labels*/

     .gel-test-chart .test-results-labels {
         font-size: 11px;
         font-weight: bold;
         padding-left: 5px;
         float: left !important;
     }

     .gel-test-chart .test-results-labels li span.label {
         padding: 3px 3px;
         font-size: 11px;
         font-weight: bold;
     }

     .gel-test-chart .ui-search-toolbar .ui-th-column.penetration-graph {
         background:none;
     }

     .gel-test-chart .ui-jqgrid tr.jqgrow > td.product-name {
         height: auto;
     }

     .ui-jqgrid-labels .ui-th-column-header, .ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
         font-size: 11px;
     }
     .gel-test-chart table tr td span.zoom-indicator {
         width: 22px;
         height: 22px;
         position: absolute;
         right: 0;
         top:0;
         background:url('../img/zoom.png');
         background-repeat: no-repeat;
         background-position:top right;
         background-size: 15px 15px;
         display: block;
     }

     .geltest-lightbox-wrapper .sl-image{
         scale:none;
     }
     .geltest-lightbox-wrapper .sl-additional-html{
         height: 70px;
         font-size: 0.8em;
         width: 360px;
         padding-right: 10px;
         padding-left: 120px;
     }

     .geltest-lightbox-wrapper .sl-additional-html .subtitle{
         font-size: 1em;
         bottom: -20px;
     }

     .gel-test-chart .depth-container {
         display: none !important;
     }
     .gel-test-chart .depth-icon {
         display: block !important;
     }
     .gel-test-share {
         display: none;
     }
 }


 @media (max-width: 480px) {

     .single-post .gel-test-chart h2 {
         font-size: 1.5em;
     }

     .gel-test-chart .ui-search-toolbar .label-second-header {
         font-size: 0.6em;
         width: 100%;
         padding-top: 0px;
     }

     .gel-test-chart .ui-jqgrid tr.jqgrow > td.product-name {
         font-size: 0.9em;
         font-weight: bold;
         white-space: normal;
         text-align: center;
     }

     .gel-test-chart .average-depth  span {
         padding-top: 5px;
         width: 30px;
         font-size: 10px;
     }
     .gel-test-chart .average-diameter  span {
         padding-top: 5px;
         width: 30px;
         font-size: 10px;
     }

     .gel-test-chart .barrel-length  span {
         padding-top: 5px;
         width: 30px;
         font-size: 10px;
     }

     .gel-test-chart .average-velocity  span {
         padding-top: 5px;
         width: 30px;
         font-size: 10px;
     }

     .gel-test-chart table tr td span {
         height: 30px;
     }

     .gel-test-chart .ui-jqgrid-labels{
         font-size:0.8em;
     }

     /*grid paddings*/
     
     .gel-test-chart .ui-jqgrid tr > th {
         border-bottom: 1px solid #fff;
         border-right: 1px solid #fff;
     }

     .gel-test-chart .ui-jqgrid tr.jqgrow > td {
         border-bottom: 1px solid #fff;
         border-right: 1px solid #fff;
     }

     .gel-test-chart .ui-jqgrid .ui-jqgrid-hdiv .ui-search-toolbar .ui-th-column {
         border-top: 1px solid #fff;
     }

     /*header labels*/

     .gel-test-chart .test-results-labels {
         font-size: 9px;
         font-weight: bold;
         padding-left: 5px;
         /*font-family: 'Pathway Gothic One', sans-serif !important;*/
     }

     .gel-test-chart .test-results-labels li span.label {
         padding: 2px 2px;
         font-size: 9px;
         font-weight: bold;
     }

     .gel-test-chart table tr td span.depth-icon .fa {
         font-size: 13px;
         margin-top: 0px;
         padding-top:4px;
         height: auto;
         margin-bottom:0;
         padding-bottom:0;
         display: block;
     }
     .gel-test-chart table tr td span.depth-icon .info {
         font-size: 9px;
         padding-top:0;
         margin-top:0;
         font-family: 'Pathway Gothic One', sans-serif !important;
         display: block;
     }

     .geltest-lightbox-wrapper .sl-image{
         scale:none;
     }
     .geltest-lightbox-wrapper .sl-additional-html{
         height: 60px;
         font-size: 0.8em;
         width: 290px;
         padding-right: 5px;
         padding-left: 120px;
     }

     .geltest-lightbox-wrapper .sl-additional-html .subtitle{
         font-size: 1em;
         bottom: -15px;
     }
 }