:root {
    --cx-red: #C20052;
    --cx-green: #00966D;
    --cx-blue-dark: #11395E;
    --cx-blue-light: #00AAD2;
    --cx-grey-mid: #CBCBCB;
    --cx-grey-dark: #979797;
}

.body-dark {
    background-color: var(--cx-blue-dark);
}

.w-35 {
  width: 35% !important; }

.w-70 {
  width: 70% !important; }

.error-text {
    color: var(--cx-red);
}

.cx-btn-sm {
    width: 30px;
}

.cx-word-break {
    word-break: break-all;
}

.cx-control-button {
    margin-bottom: 0.5rem;
}

.cx-system-button-module-sale {
    margin-top: 0.25rem;
}

.cx-fade-in {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.8s linear;
}

.opacity-0 {
    opacity: 0;
}

.cx-img-container {
    display: inline-block;
    position: relative;
    text-align: center;
}

.cx-img-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.connector-bg {
    min-width: 35px
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

.rotating-slow {
    -webkit-animation: rotating 5s linear infinite;
}

.mobile-nav-items{
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.required:after {
    content: " *";
    color: red;
}

.table-cell-link-hover:hover {
    background-color: #e9ecef;
    text-decoration: underline;
}

.table-cx-sm td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

td.no-padding {
    padding-bottom: 0;
    padding-top: 0;
}

.text-button:hover {
    font-weight: bold;
    text-decoration: underline;
}

.change-button-cell {
    width: 5%;
    white-space: nowrap;
}

.accordion-button:not(.collapsed) {
    background-color: #E5E7EB;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.2s ease-in-out;
}

.content-no-sidebar {
  overflow: hidden;
  padding: 0 1rem 0 1rem;
  transition: all 0.3s; }
  @media (prefers-reduced-motion: reduce) {
    .content-no-sidebar {
      transition: none; } }
  @media (min-width: 800px) {
    .content-no-sidebar {
      margin-left: 10%;
      margin-right: 10%; } }
  @media (min-width: 1100px) {
    .content-no-sidebar {
      margin-left: 20%;
      margin-right: 20%; } }
  @media (min-width: 1500px) {
    .content-no-sidebar {
      margin-left: 25%;
      margin-right: 25%; } }
  @media (min-width: 1700px) {
    .content-no-sidebar {
      margin-left: 30%;
      margin-right: 30%; } }

.rainbow:hover {
    animation: colorRotate .8s linear 0s infinite;
    animation-delay: 2.5s;
    transition-delay: 2.5s;
}

.rainbow:hover > #sku-field:after {
    content: ' BINGO';
    animation-delay: 0s;
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes colorRotate {
from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}