/* Button styles */
.minimaxsync-animated-button {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.minimax-resync-button,
.minimax-resetorder-button,
.minimax-marksynced-button {
    font-size: 12px;
    color: #0073aa;
    padding: 5px 10px;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}

.minimax-resync-button:hover,
.minimax-resetorder-button:hover,
.minimax-marksynced-button:hover {
    background: #0073aa;
    color: #fff;
}

/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */
 *{
    box-sizing: border-box!important;
}
 :root{
    --minimaxsync-main: #005c84;
    --minimaxsync-main-hover: #52c4f5;
    --minimaxsync-wizard-start-gradient: #9ee1ff;
    --minimaxsync-wizard-end-gradient: #d4f2ff;
    --minimaxsync-accept:#26d583;
    --minimaxsync-accept-hover:#3d9840;
    --minimaxsync-error:#a00;
    --minimaxsync-grey:#bdbdbd;
    --minimaxsync-grey-hover:#adadad;
}
.option-content-wrap{
    border-radius: 0px 0px 5px 5px;
    padding: 0px;
    border: 1px solid #fff;
    background: #fff;
    border-top: 0px;
}
.auth-options, .auth-check{
    padding: 15px;
}
.option-grid{
    grid-template-columns: 1fr 1fr;
}
.grid{
    display: grid;
}
.grid-center{
    align-items: center;
}
.grid-1-1{
    grid-template-columns: 1fr 1fr;
}
.grid-2-1{
    grid-template-columns: 2fr 1fr;
}

.minimax-header span.active a{
    color: #fff;
}
.minimax-header span.active{
    background: linear-gradient(0deg, #0679ab, #2d6a9a);
}
.minimax-header span.active:hover{
    background: linear-gradient(0deg, #2271b1, #3480bc);
}
.minimax-header span:hover {
    color: #fff;
}
.minimax-header span:hover {
    color: #fff;
    background: #99ccf4;
    border-color: #ebebeb;
}
.select2-results__option--highlighted{
    background: var(--minimaxsync-main) !important;
}


.select2-container .select2-search__field{
    min-width: 50px !important;
}

#minimax-status-message {
    margin: 5px;
    padding: 5px;
}

#minimax-status-message.failed {
    background: red;
    color: white;
    border-radius: 10px;
}

.minimax-resync-button:hover{
    background: var(--minimaxsync-main-hover);
}
.minimax-resync-button{
    background: var(--minimaxsync-main);
}
.minimax-delete-button{
    background: #ab1a0c;
}
.minimax-resync-button,
.minimax-resetorder-button,
.minimax-marksynced-button,
.minimax-delete-button {
    margin: 0px;
    padding: 8px 5px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: 500ms ease-in-out;
    border-radius: 5px;
}

.minimaxsync-button:hover{
    background: var(--minimaxsync-main-hover);
}
.minimaxsync-button{
    padding: 6px 15px;
    transition: 250ms ease-in-out;
    font-size: 14px;
    font-weight: 500;
    background: var(--minimaxsync-main);
    color: #fff;
    cursor: pointer;
}
.minimax-status-message{
    border-radius: 5px;
}
.minimax-status-message.error{
    padding: 5px;
    background: #ff000047;
}
.minimax-status-message.success{
    padding: 5px;
    background: #00ff0047;
}
.minimax-status-data > a{
    line-height: 28px;
    vertical-align: top;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
}


.minimax-notice{
    padding: 20px 10px;
    margin-top: 10px;
    border-radius: 5px;
}
.minimax-notice.minimax-error{
    background: #ff0000b3;
    color: #fff;
}
.minimax-notice.minimax-success{
    background: #23ad23;
    color: #fff;
}
.minimax-notice p{
    font-size: 14px;
    margin: 0px;
}

.minimax-metabox-status{
    margin: 10px 0px;
}
.minimax-metabox-status > span{
    display: inline-block;
}

.minimax-metabox-status > span#minimax-status{
    margin-bottom: 0px;
    display: inline-block;
    width: max-content;
    font-weight: 500;
    margin-left: 5px;
    background: #8b8b8b;
    color:#fff;
    padding: 4px 10px;
    border-radius: 10px;
}
.minimax-metabox-status > span#minimax-status.success{
    background: #019201;
}
.minimax-metabox-status > span#minimax-status.error{
    background: red ;
}
#minimax-status{
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}
#minimax-status.success{
    color:#019201;
}
.post-type-product .manage-column.column-minimax{
    max-width:180px;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 10px;
    padding: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}