.htcompare-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .htcompare-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; word-break: break-word; } .htcompare-row:nth-child(2n) .htcompare-col { background-color: #F7F7F7; } .htcompare-col { border-right: 1px solid #ddd; } .htcolumn-value { -webkit-box-flex: 0; -ms-flex: 0 1 26%; flex: 0 1 26%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .compare-data-primary .htcolumn-value { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-top: 0; border-top: 1px solid #ddd; } .htcolumn-field-name { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; color: #2d2a2a; text-transform: uppercase; font-weight: 600; font-size: 16px; } .htcompare-remove{ position: relative; display: inline-block; padding: 10px; margin-left: -5px; } .htcompare-remove:focus{ outline: none; } .htcompare-remove::after, .htcompare-remove::before { content: " "; position: absolute; top: 50%; display: inline-block; width: 15px; height: 2px; background-color: #2d2a2a; right: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .htcompare-remove::after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .htcompare-remove:hover::after,.htcompare-remove:hover::before{ background: #EC1E1E; } .htcompare-product-image{ display: block; } .htcompare-return-to-shop .button{ display: inline-block; } .htcompare-empty-page-text,.htcompare-return-to-shop{ text-align: center; } .htcompare-empty-page-text { margin-bottom: 10px; } .htcompare-table{ position: relative; } .htcompare-table.loading:before{ position: absolute; content:""; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: rgba(255,255,255,.6); } .htcompare-table .htcompare-table-loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 50px; height: 50px; -webkit-animation: htcomspin 1s linear infinite; animation: htcomspin 1s linear infinite; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-30px, -25px); display: none; } .htcompare-table.loading .htcompare-table-loader{ display: block; } /* Safari */ @-webkit-keyframes htcomspin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes htcomspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } a.htcompare-btn.loading,a.htcompare-cart-button.loading{ opacity: .25; padding-right: 2.618em; position: relative; } a.htcompare-btn.loading::after,a.htcompare-cart-button.loading::after{ font-family: WooCommerce; content: '\e01c'; vertical-align: top; -webkit-font-smoothing: antialiased; font-weight: 400; position: absolute; top: auto; right: 1em; animation: spin 2s linear infinite; } a.htcompare-btn.added::after,a.htcompare-cart-button.added::after{ font-family: WooCommerce; content: '\e017'; margin-left: .53em; vertical-align: bottom; } .htcompare-popup{ display: none; position: fixed; z-index: 9999; top: 0; left: 0; visibility: hidden; overflow: hidden; opacity: 0; width: 100%; height: 100%; padding-right: 17px; -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); background-color: rgba(0, 0, 0, 0.5); } .htcompare-popup.open{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 1; visibility: visible; } .htcompare-popup .htcompare-popup-content-area { width: calc(100% - 30px); max-width: 1500px; margin: auto; padding: 30px; background: #fff; position: relative; } .htcompare-popup .htcompare-popup-content-area .htcompare-table{ max-height: 750px; overflow-y: auto; overflow-x: hidden; } .htcompare-popup-close { position: absolute; width: 25px; height: 25px; background: #fff; right: -10px; top: -10px; border-radius: 100%; cursor: pointer; } .htcompare-popup-close::after, .htcompare-popup-close::before{ content: " "; position: absolute; top: 50%; display: inline-block; width: 15px; height: 2px; background-color: #2d2a2a; right: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .htcompare-popup-close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .htcompare-popup-close:hover::after,.htcompare-popup-close:hover::before{ background: #EC1E1E; }