html{height:100%;}

body{font: 13px/20px 'ProximaNova-Regular'!important;color: #3b3d40!important;-moz-osx-font-smoothing: grayscale;text-rendering: optimizelegibility;}

* {box-sizing: border-box;}

.pad-top{padding-top:30px;} .pad-bottom{padding-bottom:30px;}

/* Table */
.white-bkg{background:#fff;}
.green-bkg{background:#e7f2d9;}
.bright-green-bkg{background:#8ac43f;}
.black-bkg{background: #000;}
.yellow-bkg{background:#feedc8;}
.orange-bkg{background:#fccfb7;}
.light-grey-bkg{background: #f2f2f3;}
.light-blue-bkg{background: #00aeef;}

/* Header */
.matrix-header{height:140px;margin-bottom:10px;padding: 10px 20px;background: #f2f2f3 url("../img/header.png") no-repeat scroll right center / 220px auto;}
.matrix-header h1{font: 45px/50px "FFNettoWebProBold"; margin-top: 20px;margin-bottom: 0px;color:#1e4952;}
.matrix-header p{font: 15px/15px "FFNettoWebProBold";color:#1e4952;margin-top: 5px;}

.matrix-key{float: right;height: 35px;margin-bottom: 25px;width: 36%;background: #e2e3e4;}
.matrix-key ul{padding: 8px 0 0 30px;font-size: 10px;font-weight: bold;margin: 0;}
.matrix-key li{display: inline;list-style: outside none none; color: #3b3d40 }
.matrix-key li img{width:15px;height:auto;vertical-align: middle;}

.materials-matrix sup {font-size: 60%;}

li.key-title{color:#000;}
li.key-label{ margin-left: 5px;margin-right: 2px;}

.materials-matrix .container {width: 1316px; margin-left: auto;margin-right: auto;position: relative;}

.materials-matrix .row {clear: both;}
.materials-matrix .col-md-2, .materials-matrix .col-md-3, .materials-matrix .col-md-12{float: left;min-height: 1px;position: relative;}
.materials-matrix .col-md-2{width: 16.6667%;}
.materials-matrix .col-md-3{width: 25%;}
.materials-matrix .col-md-12 {width: 100%;}

.materials-matrix table {font-size: 11px;border-collapse: collapse;border-spacing: 0;margin:0 auto;}
.materials-matrix table tr{padding: 0;}
.materials-matrix table td{border-right: 1px solid #fff;border-bottom: 1px solid #fff;padding: 0;white-space: nowrap;width:25px; height:25px;}

.materials-matrix td.component-title {height: 70px;}
.materials-matrix td.component-title > div {transform: translate(0, 23px) rotate(-90deg);width: 25px;}

.materials-matrix table td.hoz-spacer {height: 10px;}

.materials-matrix table td.vert-spacer {width:1px;}

.materials-matrix td:first-child{padding-left:10px;}

.recycle-icon{cursor: pointer;}
.recycle-icon img{height:25px;width:25px;
        -webkit-transition: all .3s ease;
           -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
                transition: all .3s ease;
                }

.recycle-icon img:hover{background: #00aeef!important;}

.materials-matrix .grey-bottom-border{border-bottom: 1px solid #ccc;}
.materials-matrix .grey-right-border{border-right: 1px solid #ccc;}

.materials-matrix .no-bottom-border{border-bottom:none;}
.materials-matrix .no-right-border{border-right:none;}

.matrix-results{height: 235px;position: fixed!important;z-index: 999999;bottom:-235px!important;width: 1316px; margin: 0 auto;
  -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
          transition: all .3s ease;}

.matrix-results.open{bottom: 0!important;}

.matrix-results-btn{position: absolute;top: -40px;cursor: pointer;padding: 10px 40px;right: 0;left: 0;width: 180px;margin-left: auto;margin-right: auto;    font: 15px/20px "ProximaNova-Bold" !important;background: #1e4952;color: #fff;}

.matrix-results-btn:after{font-family: "Font Awesome 5 Pro";content: '\f102';font-size: 26px;opacity: 1;position: absolute;right: 28px;top: 10px;color:#fff;}
.matrix-results.open .matrix-results-btn:after{content: '\f103';}


/* Form */
#query-alt-label{display: none;}
.matrix-results .title{font: 30px/25px "FFNettoWebProBold";color:#1e4952;margin-top: 5px; margin: 0 0 0 20px;padding: 0 0 20px;border-bottom: 1px solid #1e4952;width:75%;}
.matrix-results .component-wrap{padding: 0 20px;margin-top:30px;}
.materials-matrix form {float: none;margin-right: 0px;}
.materials-matrix form input{background: #909ea5;border: medium none;padding: 11px 15px;width: 75%;color: #FFF;margin-top: 13px;font-weight: bold;}

.materials-matrix form .reset{background: #8ac43f url("../img/reset.jpg") no-repeat scroll right 10px center / 16px auto;border: medium none;padding: 5px 15px;width: 25%;color: #FFF;font-weight: bold;float: right;cursor: pointer;text-align: left;}

.materials-matrix form .alt{font: 14px/20px "ProximaNova-Bold";background: #8ac43f;border: medium none;padding: 5px 15px;width: 50%;color: #FFF;font-weight: bold;float: right;cursor: pointer;text-align: left;position: absolute;right: 0;bottom: 0;z-index: 99999999;}



.display-field{background: #909ea5 none repeat scroll 0 0;border: medium none;color: #fff;font-weight: bold;margin-top: 40px;min-height: 40px;padding: 10px 15px;text-transform: capitalize;width: 100%;}


.component-result-title{font: 15px/20px "ProximaNova-Bold" !important;color:#1e4952;float:left;}
.reset1, .reset2, .reset3{width:25px; height:25px;background:#909ea5 url("../img/delete.png") no-repeat scroll center center / 16px auto;cursor: pointer;float:right;color: #FFF;}

.green-input{background: #8ac43f !important;}

.materials-matrix .reset-btn { background: transparent; border-radius: 0;color: #1e4952;font-family: "Open Sans Condensed",sans-serif;font-size: 1.1em;font-weight: normal;outline: medium none;padding: 5px 15px;border: 0;cursor: pointer;}

.preview-wrap{background: #FFF;border: 1px solid #1e4952; top: -76px;height: 235px;text-align: center;}
.preview-wrap img{max-height:130px;  position: relative;top: 37%;transform: translateY(-50%);}

.materials-matrix .preview-btn, .materials-matrix .download-btn, .materials-matrix .help-btn{background: #1e4952 none repeat scroll 0 0;border-radius: 0;color: #fff;cursor: pointer; font: 14px/20px "ProximaNova-Bold";margin: 0;padding: 5px 15px; text-align: left;}

.materials-matrix .download-btn{bottom: 0;float: left;left: 0;position: absolute;text-decoration: none;width: 100%;}
.materials-matrix .help-btn{bottom: 0;float: left;left: 0;position: absolute;text-decoration: none;width: 100%;font-size: 12px;}

.error-title{color: #1e4952;font: 25px/25px "FFNettoWebProBold";margin: 23px 0 0;}
.error-message{font: 12px/17px "ProximaNova-Bold";padding: 0 20px;}

.img-responsive{max-width:100%;}
.hide{display: none;}

/* Footer */
.materials-matrix footer, .materials-matrix-results footer{background: #e1e6e9; padding: 20px 0;margin-top: 30px;}

.materials-matrix footer sup, .materials-matrix-results footer sup {font-size: 7px !important;left: -7px;margin-right: -3px;position: relative;vertical-align: text-top;}

.footer-title{color:#589ba5;font: 20px/20px "FFNettoWebProBold";float:left;width:6%;padding: 0 15px;}

.footer-notes{color:#6d6e71;font: 10px/13px "ProximaNova-Bold";float:left;padding: 0 15px;}

.footer-notes.one{width:16%;border-right:1px solid #ccc;}
.footer-notes.two{width:14%;border-right:1px solid #ccc;}
.footer-notes.three{width:10%;border-right:1px solid #ccc;}
.footer-notes.four{width:10%;border-right:1px solid #ccc;}
.footer-notes.five{width:7%;border-right:1px solid #ccc;}
.footer-notes.six{width:16%;}
.footer-notes.seven{width:20%;}

/* Single lebel */
.label-results{padding-top:20px;padding-bottom:20px;}
.selected-label img{max-height: 200px;}
.selected-label, .download-links{float: left;}
.download-links{padding-left: 30px;}

.materials-matrix-results .download-links .title{font: 14px/25px  "ProximaNova-Bold"}

.materials-matrix-results .download-links ul{padding:0;margin:0;}
.materials-matrix-results .download-links li::before {content: ""!important;}
.materials-matrix-results .download-links li{list-style:none;}
.materials-matrix-results .download-links li a{color:#1f4a53;font: 14px/25px  "ProximaNova-Regular";display: block;color:#1f4a53;border-bottom:1px solid #c0ccce;padding: 0 0 0 5px;background: rgba(0, 0, 0, 0) url("img/btn-download-artwork.png") no-repeat scroll right 3px center / 11px auto}
.materials-matrix-results .download-links li a:hover{color:#8ac43f;}
.materials-matrix-results .download-links .label-format-list li:last-child a{border-bottom:none;}