#product-variables-table { padding: 0; } #product-variables-table > .wpcfto-field-content { width: 100%; } #product-variables-table > .wpcfto-field-content > table.wpcfto-table { width:100%; margin-bottom:1em; } #product-variables-table > .wpcfto-field-content > table.wpcfto-table th { vertical-align: bottom; } th[data-cell="name"] { text-align: left!important; } th[data-cell="price"], td[data-cell="price"], th[data-cell="sale"], td[data-cell="sale"] { max-width: 150px; } th[data-cell="stock"], td[data-cell="stock"], th[data-cell="weight"], td[data-cell="weight"] { max-width: 100px; } /* Toggle Switch Styles */ .switch { position: relative; display: inline-block; width: 36px; height: 20px; vertical-align: middle; } .switch input { display:none; } .slider { position: absolute; cursor: pointer; background-color: #ccc; border-radius: 20px; top: 0; left: 0; right: 0; bottom: 0; transition: .4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .4s; } input:checked + .slider { background-color: #2985f7; } input:checked + .slider:before { transform: translateX(16px); } /* Gray out inactive rows */ .variation-inactive { background: #eee !important; opacity: 0.7; } .price-input-wrapper { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .price-input-wrapper span { background: #eee; padding: 0 8px; border-right: 1px solid #ccc; user-select: none; white-space: nowrap; height: 40px; display: flex; align-items: center; } .price-input-wrapper input { border: none!important; outline: none; padding: 6px 8px!important; flex: 1; text-align: right; } .button-link.child-row-toggle { transition: all .5s ease-out; } .button-link.child-row-toggle:active, .button-link.child-row-toggle:focus { box-shadow: unset!important; } .button-link.child-row-toggle.active { transform: rotate(180deg); } td.manual-price-hint { color: #8c99a5; text-align: center; cursor: pointer; } .variation-details-content { padding: 1rem; border: 1px dashed #bec5cb; border-radius: 1rem; margin-bottom: 1rem; } .price-input-wrapper > .price-currency { min-width: 40px; justify-content: center; } table.wpcfto-table.inner-table { width: 100%; border-collapse:collapse } table.wpcfto-table.inner-table tr > th { text-transform: uppercase; background-color: #bec5cb; padding: 5px; font-size: 12px; } table.wpcfto-table.inner-table tr td { padding: 5px 0 5px 5px; } table.wpcfto-table.inner-table tbody tr:hover td { background-color: #dfe7ee; } table.wpcfto-table.inner-table tr > *:is(th, td):first-child { width: 50%; text-align: left; }