/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */
 :root{
    --prim: #ff9d01;
    --sec: #f5f5f5;
 }
 .sl_matchingscreen {
    float: left;
    width: calc(100vw - 200px);
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    margin-top: 20px;
}
.sl_matchingscreen > * {
    background-color: #ececec;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    position:relative;
}
 .order > * > *,
 .order > *{
    padding: 0px;
    margin: 0px;
 }
 .order {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
.order{
    position:relative;
}
.sl_head {
    /* border-bottom: 2px solid #f4f4f4; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    grid-gap: 10px;
    height: 35px;
}
.sl_head > h5 {
    font-weight: 800;
    font-size: 14px;
    padding-left: 10px;
}
.cta_sec,
.cta_prim,
.ticker_input {
    background-color: var(--prim);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: 0px solid red;
}
.ticker_input{
    background-color: white;
}
.cta_sec{
    background-color: var(--sec);
    color: grey;
}
.product {
    list-style: none;
    display: grid;
    grid-template-columns: 60px 1fr 220px 150px;
    align-items: center;
    margin-top: 10px;
}
.product:nth-child(even) {
    background-color: #fcfaf8;
    border-radius: 3px;
}
.spec {
    padding: 0px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0px 15px;
}
.ticker {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.ticker > input {
    width: 80px;
    height: 37px;
    color: #000;
    /* border: 2px solid #ababab; */
    background-color: #f3f3f3;
    border: 0px solid #f00;
}
input.ticker_input {
    z-index: 999999;
}
.ticker > button{
    z-index: 8000;
    transition: all 100ms cubic-bezier(0.770, 0.050, 0.340, 0.940); /* custom */
    transition-timing-function: cubic-bezier(0.770, 0.050, 0.340, 0.940); /* custom */
}
button.cta_sec {
    transform: translateX(30px);
}
button.cta_prim{
    transform: translateX(-31px);
}
.ticker:hover > .cta_sec,
.ticker:hover > .cta_prim,
.order:hover > .products > .product > .spec > .ticker > .cta_sec,
.order:hover > .products > .product > .spec > .ticker > .cta_prim{
    transform: translateX(0px)!important;   
}
.p_mini {
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: 60px 1fr 150px 120px;
}
.s_img > img,
.product > img {
    width: 50px;
    height: 45px;
    mix-blend-mode: multiply;
}
.spec.s_img {
    padding: 0px;
    border: 0px solid #f00;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    min-height: 40px;
}
.statusBadge {
    padding: 5px 11px;
    background-color: #99f499;
    text-align: center;
    font-size: 17px;
    border-radius: 6px;
    font-weight: 800;
    border-radius: 7px;
}
.alert{
    font-weight: 800;
    background-color: red;
    color: white;
}
.op50{
    opacity: 0.2;
}
.pBadge,
span.miniBadge {
    margin-left: 10px;
    background-color: #ffe1e1;
    padding: 5px;
    border-radius: 5px;
    font-weight: 700;
    color: #f00;
}
.sl_head > .cta_sec,
.sl_head > .cta_prim
{
    opacity: 0;
    pointer-events: none;
}
.order:hover > .sl_head > .cta_sec,
.order:hover > .sl_head > .cta_prim{
    opacity: 1;
    pointer-events: all;
}
.pBadge {
    background-color: #f2f2f2;
    margin-left: 2px;
    color: #808080;
}
.spec > span {
    font-size: 9px;
    font-weight: 600;
}
.spec > h5 {
    margin: 0px;
    font-size: 14px;
}
.slm_filtering
{
    width: 100%;
    float :left;
    margin-bottom: 10px;
}
.orders > h2 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
}
button.slm_updateAll {
    background-color: #808080;
    background-color: var(--sl_orange);
    border: 0px solid #f00;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
}
#wpfooter{
    display: none!important;
}
.slm_helper_text{
    font-weight: 800;
    color: var(--sl_blue);
}
.slm_placeholder {
    min-width: 50px;
    min-height: 50px;
    background-color: #fafafa;
    border-radius: 5px;
}

.sl_ajaxTicker
{
    position:relative;
}
.sl_ajaxTicker:after{
    content: "";
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 4px;
    height: 4px;
    background-color: #99f499;
    border-radius: 50%;
}
.sl_edit_stock {
    display: grid;
    display: grid;
    grid-template-columns: 30px 1fr 80px;
    align-items: center;
    align-content: center;
    grid-gap: 5px;
    padding: 5px;
    position: absolute;
    top: 18px;
    right: 10px;
    cursor: pointer;
}
.sl_edit_stock > button {
    font-size: 12px;
    background-color: var(--sl_orange);
    color: #fff;
    border: 0px solid #f00;
    border-radius: 5px;
    padding: 8px;
    font-weight: 800;
}
.sl_edit_stock > img{
    width: 100%;
    transform: rotate(0DEG);
    transition: all 800ms cubic-bezier(0.905, -0.450, 0.000, 1.425); /* custom */
    transition-timing-function: cubic-bezier(0.905, -0.450, 0.000, 1.425); /* custom */
}
.sl_edit_stock > .sl_productEditor_slider_innactive
{
    transform: rotate(180DEG);
    filter: saturate(0);
}
.ticker > .ticker_input_fixed
{
    background-color: rgba(0,0,0,0)!important;
    color: rgb(39, 39, 39)!important;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%);
}
.slm_loader {
    border: 0px solid #808080;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #ffffffd1;
    height: 100%;
    border-radius: 5px;
    z-index: 9999999999999;
}
.slm_loader:after{
    content: "";
    width: 60px;
    height:60px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    position: absolute;
    background-image: url("/wp-content/plugins/sl-klantenportaal-frontend/loading.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.sld_matching,
.sld_btn_action,
.sl_edit_stock > button,
.slm_updateAll
{
    -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.11);
-moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.11);
box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.11);
cursor: pointer;
}

.sl_product.sl_stripe_h.sl_matching_item {
    grid-template-rows: 40px;
    grid-template-columns: 40px 1fr 140px;
    padding: 10px 0px;
}
.sl_product.sl_stripe_h.sl_matching_item > *{
    grid-row: unset;
    grid-column: unset;
    padding: 0px;
}
.sl_matching_item>.sl_details>.sl_detail{
    padding:0px;
}
.sl_product.sl_stripe_h.sl_matching_item > .sl_details {
    grid-template-columns: 3fr 2fr;
    display: grid;
}
.sl_detail > h5{
    font-size: 15px;
}
.sl_detail > h5 > span{
    padding: 3px;
    font-size: 14px;
    margin-left: 0px;
}
.sl_inline_alert {
    color: var(--sl_blue);
    font-weight: 700;
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 10px;
}
.sl_matchingv2 > .order > .product {
    grid-template-columns: 30px 140px 120px 120px;
    grid-gap: 2px;
}
.sl_matchingv2 > .order > .product > .spec > h5 {
    font-size: 11px;
    font-weight: 600;
    color: #5a5a5a;
}
div#sl_matching {
    grid-template-columns: 5fr 3fr;
}
.sl_portal.sl_admin_portal > .sl_content {
    width: 100vw;
    max-width: 1360px;
}
img.sl_toggle {
    width: 30px;
}
.sl_productEditor_slider_innactive{
    transform: rotate(180DEG);
    filter: saturate(0);
}

<img src="/wp-content/plugins/sl-klantenportaal-frontend/on-button.svg" @click="productEditor = !productEditor" v-bind:class="{sl_productEditor_slider_innactive : !productEditor}">
                        <span @click="productEditor = !productEditor">Voorraad aanpassen</span>
                        <button v-if="productEditor" @click="update_stock">Updaten</button>