/*----------------------------------- Tooltip and Badge -------------------------------*/

:root {
    --miniature-colors-white: #fff;
    --miniature-colors-black: #000;
    --miniature-colors-grey: #f5f5f5;
    --miniature-colors-dark-grey: #414141;
    --miniature-colors-green: #4bbf39;
    --miniature-colors-red: #d62a29;
    --miniature-colors-yellow: #ffa500;
    --miniature-colors-blue: #70a8e4;
    --miniature-font-weight-normal: 400;
    --miniature-font-weight-semi-bold: 500;
    --miniature-font-weight-bold: 700;
    --miniature-letter-spacing-expanded: 0.1em;
    --miniature-border-radius-base: 5px;
    --miniature-border-radius-lg: 30px;
    --miniature-content-element-spacing-base: 50px;
    --miniature-element-spacing-base: 30px;

    --miniature-body-background-color: #ffffff;
    --miniature-primary-color: #4169e1;
    --miniature-text-color: #414141;
    --miniature-secondary-text-color: #757575;
    --miniature-headings-color: #414141;
    --miniature-border-color: #d9d9d9;
    --miniature-forms-background-color: #ffffff;
    --miniature-forms-border-color: #858585;
    --miniature-forms-text-color: #414141;
    --miniature-buttons-background-color: #4169e1;
    --miniature-buttons-text-color: #ffffff;
    --miniature-buttons-border-color: #4169e1;
    --miniature-header-background-color: #f5f5f5;
    --miniature-header-text-color: #414141;
    --miniature-footer-background-color: #333333;
    --miniature-footer-border-color: #d9d9d9;
    --miniature-footer-title-color: #4169e1;
    --miniature-footer-text-color: #ffffff;

    --crox-fan-widget-component-fan: #4d4d4d;
}

.crox-tooltip {
    background-color: var(--miniature-body-background-color);
    padding: 0.2rem 0.6rem 0.2rem;
    font-size: 0.9em;
    font-weight: 500;
}

.component_inner .crox-tooltip > div {
    line-height: 1.5em;
    margin-left:15px;
}

.crox-tooltip.crox-incompat {
    margin-bottom: 0;
    padding:0 1.6em;
}

.crox-hidden {
    display: none !important;
}

.composite_component.component.last + .crox-tooltip {
    margin-bottom: 0px;
    font-size: 1.1em;
}

.crox-icon:before {
    font-family: 'Font Awesome 5 Free';
    margin-right:8px;
    font-size:1.3em; 
    font-weight: 900;
}.crox-icon.icon-error:before {
    /*content: '\f06a';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(214,42,41)" class="size-6"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-red);
    width:21px;
    position: absolute;
    left: 0;
}.crox-icon.icon-info:before {
    content: '\f05a';
    color: var(--miniature-primary-color);
}.crox-icon.icon-warning:before {
    /*content: '\f071';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,165,0)" class="size-6"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-yellow);
    width:22px;
}.crox-icon.icon-tip:before {
    /*content: '\f5eb';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="rgba(255,255,255)" class="size-4"><path fill-rule="evenodd" d="M6.25 12.5A2.75 2.75 0 0 0 9 9.75V4.56L6.78 6.78a.75.75 0 0 1-1.06-1.06l3.5-3.5a.75.75 0 0 1 1.06 0l3.5 3.5a.75.75 0 0 1-1.06 1.06L10.5 4.56v5.19a4.25 4.25 0 0 1-8.5 0v-1a.75.75 0 0 1 1.5 0v1a2.75 2.75 0 0 0 2.75 2.75Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-primary-color);
    font-size: 1.3em;
    /*transform: scaleY(-1);*/
    transform: rotateZ(90deg);
    background-color: var(--miniature-primary-color);
    width:16px;
    padding:0px;
    margin:1px;
}

.tooltip-info {
    border-color: var(--miniature-border-color);
    display: block;
}
.tooltip-warning {
    border-color: var(--miniature-colors-yellow);
    background-color: #ffebc5;
    display: block;
}
.tooltip-incompatibility {
    border-color: var(--miniature-colors-red);
    background-color: #ffe2e2;
    display: block;
}

.crox-badge {
    line-height: 1.2em;
    font-size: 0.8em;
    position: absolute;
    transform: translateY(-4em);
    background-color: var(--miniature-primary-color);
    font-family: Roboto, sans-serif;
    font-weight: 500;
    color: #f6f7f7;
    padding: 5px 10px;
    border-radius: var(--miniature-border-radius-base);
    z-index:1000;
}

.crox-orange {
    color: var(--miniature-colors-yellow);
}

.crox-button-disabled,
.crox-rental-button-disabled {
    pointer-events: none;
    opacity: 0.5;
}

/*------------------ Incompatibility Styling --------------------------*/

.composite_form .component_title_toggled .component_title_text.icon-error:after {
    /*content: '\f06a';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(214,42,41)" class="size-6"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-red);
    font-family: 'Font Awesome 5 Free';
    padding-left: 0.3em;
    width:21px;
    position: absolute;
}

/*------------------ Crox Tooltip More Info ---------------------------*/

a.crox-tooltip-link {
    text-decoration: underline;
}

div.crox-tooltip-more-info {
    padding: 1em;
    position: absolute;
    background-color: #eeeeee;
    z-index: 15;
    border-radius: var(--miniature-border-radius-base);
    transition: transform .25s ease .2s,opacity .25s ease .2s,visibility 0s ease .35s;
    box-shadow: 0 0 24px rgb(0 0 0 / 25%);
    border: 3px solid var(--miniature-primary-color);
    visibility: hidden;
    opacity: 0%;
    color: #000000;
    font-style: italic;
}

div.crox-tooltip-more-info.crox-visible-transition {
    visibility: visible;
    transform: translate(0,10px);
    opacity: 100%;
    transition-delay: 0s,0s,0s;
}

div.crox-tooltip-more-info i {
    animation: crox-spin 1.7s linear infinite;
    font-size: 1.5em;
    margin: 2px 15px;
}

div.crox-tooltip-more-info td {
    border: none;
    padding: 0.5em;
}

div.crox-tooltip-more-info:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    border: 10px solid transparent;
    width: 0;
    border-bottom-color: inherit;
    height: 0;
}

button.more-info-close {
    margin-top: 5px;
    border: none;
    padding: 4px 8px;
    border-radius: var(--miniature-border-radius-base);
    cursor: pointer;
    float: right;
}

/*---------------- Validation Section -------------------------*/

.crox-validation-container {
    padding: 1rem 0;
}

.crox-validation-container h4 {
    margin-bottom: 0px;
    /*display: inline;*/
}

.crox-validation-container h4.icon-warning:after {
    /*content: '\f071';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,165,0)" class="size-6"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-yellow);
    width:22px;
} .crox-validation-container h4.icon-invalid:after {
    /*content: '\f06a';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(214,42,41)" class="size-6"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-red); 
    width:22px;
}

.crox-validation-container h4:after {
    /*content: '\f058';*/
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(75,191,57)" class="size-6"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-green);
    width:21px;
}

.crox-validation-container h4:after {
    font-family: 'Font Awesome 5 Free';
    padding-left: 0.3em;
}

.crox-validation-container.crox-invalid h4:after {
    /*content: '\f057';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(214,42,41)" class="size-6"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" /></svg>');
    color: var(--miniature-colors-red);
    width:22px;
}

.crox-validation h6 {
    margin-bottom: 5px;
    cursor: pointer;
}

.crox-validation h6:before {
    font-family: 'Font Awesome 5 Free';
}

.crox-validation-container > .crox-validation {
    /* margin-left: 30px; */
}

.crox-validation  > h6:before {
    font-family: 'Font Awesome 5 Free';
    color: var(--miniature-buttons-border-color);
    padding-right: 0.3em;
}

.crox-validation.closed > h6:before {
    content: '\f078';
}

.crox-validation.open > h6:before {
    /*content: '\f077';*/
    content:url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="rgba(65,105,225)" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" /></svg>');
    width:16px !important;
    position: absolute;
    left:0;
    margin-top:2px;
}
.crox-validation.crox-recommendations h6{
    margin-left:20px;
}
.crox-validation-content {
    margin-left: 3.2em;
    font-size: 0.9em;
    line-height: 1.6em;
}

.crox-validation-content .crox-icon:before {
    position: absolute;
    left: 1.2em;
}

.crox-validation.opening .crox-validation-content .crox-icon:before, .crox-validation.closing .crox-validation-content .crox-icon:before {
    content: '';
}

/*-------------------------- Loading Popup --------------------------------*/

div#crox-loading-popup {
    position: absolute;
    width: 102%;
    height: 100%;
    z-index: 1000;
    min-height: 400px;
    font-size: 1.5em;
    padding: 7% 10%;
    border-radius: var(--miniature-border-radius-base);
    color: var(--miniature-header-text-color);
    background-color: var(--miniature-header-background-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: visibility 1.5s ease 0.5s, opacity 1.5s ease 0.5s, transform 1.5s ease 0.5s;
    text-align: center;
    transform: scale(1.01);
}

div#crox-loading-popup div {
    line-height: normal;
    vertical-align: middle;
}

#crox-loading-popup .popup-progress-inner {
    width: 0%;
    position:relative;
    padding:1px 8px;
    height: 1em;
    background-color: var(--miniature-header-text-color);;
    border-radius: 1em;
    background-size: 160% 1em;
    animation: loading-bar 3s linear infinite;
    transition: width 1s ease 0.1s;
}

#crox-loading-popup .popup-subtitle {
    
}

#crox-loading-popup .popup-progress {
    width: 90%;
    margin: 2% 5%;
    background-color:#d8d8d8a1;
    border-radius:1em;
}

#crox-loading-popup .popup-description {
    font-size: 0.8em;
    text-align: justify;
}

#crox-loading-popup .popup-close {
    width: 100%;
    border: none;
    background-color: var(--miniature-footer-background-color);
    border-radius: 1em;
    color: white;
    padding: 0.2EM;
    cursor: pointer;
}

#crox-loading-popup .popup-break {
    margin-top: 1.8em;
}

#crox-loading-popup .popup-message {
    text-align: center;
}

#crox-loading-popup .popup-title {
    font-size: 1.8em;
    font-weight: 700;
}

div#crox-loading-popup.popup-hidden {
    visibility: hidden;
    opacity: 0%;
    transform: translateY(-30px);
}

@media (min-width:320px) and (max-width:767px){
    div#crox-loading-popup {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        font-size: 1.5em;
        padding: 5%;
        border-radius: var(--miniature-border-radius-base);
        color: var(--miniature-header-text-color);
        background-color: var(--miniature-header-background-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        visibility: visible;
        transition: opacity 0.3s ease-in-out;
    }
    .composite_form.cart {
        position: relative;
        min-height: 500px;
    }
}

/*---------------------------------------------- Appearance Disclaimer ------------------------------------*/

figcaption.woocommerce-product-gallery__caption {
    font-size: 0.8em;
    text-align: center;
}

/*----------------------------------------------- Power Supply Widget  ---------------------------------*/

.crox-power-info-widget {
    display: flex;
    border: 2px solid var(--miniature-border-color);
    border-radius: var(--miniature-border-radius-base);
    margin: auto;
    margin-top: 1.2em;
    max-width: 90%;
    position: relative;
}

.crox-power-info-widget:before {
    content: 'Based on the current configuration:';
    position: absolute;
    font-size: 0.7em;
    top: -1.6em;
}

.crox-power-info-widget-inner {
    flex-grow: 1;
    text-align: center;
    border-left: 2px solid var(--miniature-border-color);
}

.crox-power-info-widget-inner:first-child {
    border-left: none;
}

.crox-power-info-widget-inner .crox-widget-header {
    font-size: 0.9em;
    line-height: 1.3em;
    font-weight: 500;
    color: white;
    background-color: var(--miniature-colors-green);
}

.crox-widget-header.peak-header[satisfied='false'] {
    background-color: var(--miniature-colors-red);
}

.crox-widget-header.minimum-header[satisfied='false'] {
    background-color: var(--miniature-colors-red);
}

.crox-widget-header.recommended-header[satisfied='false'] {
    background-color: var(--miniature-colors-yellow);
}

.crox-power-info-widget-inner:first-child .crox-widget-header {
    border-radius: 4px 0 0 0;
}

.crox-power-info-widget-inner:last-child .crox-widget-header {
    border-radius: 0 4px 0 0;
}

.crox-power-info-widget-inner .crox-widget-power {
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: 500;
}

.crox-power-info-widget a.crox-tooltip-link {
    text-decoration: none;
    height: 1.2em;
    position: absolute;
    right: 0.1em;
    bottom: 0.2em;
    font-size: 1.2em;
}

/* ----------------------------------------- Fan Widget --------------------------------------------*/

:root {
    --crox-fan-widget-component-fan:#4d4d4d;
}

.crox-fan-widget {
    max-width:95%;
    margin: auto;
    padding-bottom: 20px;
}

.crox-fan-widget.disabled .fan-widget-display {
    filter: opacity(50%);
    pointer-events: none;
}


.fan-widget-display {
    display:flex;
    flex-wrap:wrap;
    padding: 10px 0px;
    justify-content: center;
}

.fan-icon-wrapper {
    position:relative;
}

.fan-widget-icon {
    height: 40px;
    margin: 2px 3px;
    background-color: #eaeaea;
    display: inline-block;
}

.fan-widget-icon.supported-fan {
    grid-row:top;
    width: 40px;
    -webkit-mask-image: url(/wp-content/uploads/fan_logov2.svg);
    -webkit-mask-size: 40px 40px;
}

div.fan-widget-case-section:not([occupied]) h5.case-section-heading[selected] ~ .fan-widget-icon.supported-fan div, 
div.fan-widget-case-section:not([occupied]) h5.case-section-heading:hover ~ .fan-widget-icon.supported-fan div,
div.fan-widget-case-section[occupied] .fan-widget-icon.included-fan div {
    background-size: 100% 100%;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%;
    filter:blur(4px);
    position:relative;
}

.fan-widget-summary {
    text-align: center;
    flex-basis: 100%;
}

.fan-widget-summary h5 {
    margin-bottom: 5px;
}

.fan-widget-summary input[type="number"] {
    padding: 0px;
    height: auto;
    width: min-content;
    text-align: left;
    display: inline;
    border: none;
}

i.active ~ .summary-more-info {
    transform: translateY(5px);
    opacity: 100%;
    visibility: visible;
    pointer-events: all;
}

.summary-more-info {
    opacity: 0%;
    visibility: none;
    transform: translateY(0px);
    user-select: none;
    transition: transform .25s ease .2s,opacity .25s ease .2s,visibility 0s ease .35s;
    z-index: 1000;
    background-color: white;
    border: 2px solid grey;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    font-size:0.8em;
    text-align:
    justify;
    display: block;
    pointer-events: none;
}

.summary-more-info:before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    border: 6px solid transparent;
    width: 0;
    height: 0;
    border-bottom-color: grey;
}

.fan-widget-case-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    margin: 5px;
}

.fan-widget-display .fan-widget-case-section h5 {
    margin-bottom: 0;
    margin-right: 0.5em;
    padding: 10px 14px;
    color: white;
    background-color: var(--miniature-primary-color);
    border-radius: var(--miniature-border-radius-lg);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: 1em;
    font-weight: 500;
    font-family: 'Roboto';
    width: 9em;
}

.fan-section-info {
    position: absolute;
    z-index: 1000;
    background-color: white;
    padding: 10px;
    top: 50px;
    display: none;
    box-shadow: 0 0 24px rgb(0 0 0 / 25%);
    font-size: 0.8em;
    line-height: 1.1em;
    border-radius: 5px;
}

h5.case-section-heading:hover ~ .fan-section-info {
    display: block;
}

@media(min-width: 992px) { /*disabled on mobile*/
    .fan-widget-display div.fan-widget-case-section:not([occupied]) h5.case-section-heading:hover ~ .fan-widget-icon.supported-fan div {
        filter:blur(4px) opacity(30%);
    }

    .fan-widget-display h5.case-section-heading[selected]:hover ~ .fan-widget-icon.supported-fan div {
        filter:blur(4px) opacity(70%);
    }
}

.crox-fan-widget[fan-lighting-type="argb"] .fan-widget-icon.supported-fan div, .fan-widget-case-section[type='ARGB'] .fan-widget-icon.supported-fan.included-fan div {
    background: conic-gradient(#ff2400, #e8a91d, #ffff00, #93e81d, #1de88b, #1ddde8, #1d95e8, #0031f3, #9200f3, #ff00a4);
    -webkit-animation: rainbow 4s linear infinite;
    -z-animation: rainbow 4s linear infinite;
    -o-animation: rainbow 4s linear infinite;
    animation: rainbow 4s linear infinite;
}

.crox-fan-widget[fan-lighting-type="rgb"] .fan-widget-icon.supported-fan div, .fan-widget-case-section[type='RGB'] .fan-widget-icon.supported-fan.included-fan div {
    background: conic-gradient(#ff2400, #e8a91d, #ffff00, #93e81d, #1de88b, #1ddde8, #1d95e8, #0031f3, #9200f3, #ff00a4);
}

.crox-fan-widget[fan-lighting-type="none"] .fan-widget-icon.supported-fan div, .fan-widget-case-section[type='STD'] .fan-widget-icon.supported-fan.included-fan div {
    background: #212121;
}

.crox-fan-widget[fan-lighting-type="static"] .fan-widget-icon.supported-fan div, .fan-widget-case-section[type='LED'] .fan-widget-icon.supported-fan.included-fan div {
    background: red;
}

.fan-widget-case-section[occupied=cooler] .fan-widget-icon.supported-fan div {
    background: var(--miniature-colors-dark-grey);
}

h5.case-section-heading[selected]:after {
    content: '\f14a';
}

h5.case-section-heading:after {
    font-family: 'Font Awesome 5 Free';
    margin-left: 0.4em;
    content: '\f0c8';
    font-weight: 400;
    float: right;
}

.fan-widget-case-section[occupied] h5.case-section-heading:after {
    content: '\f00c';
    font-weight:700;
}

.fan-widget-case-section[occupied] h5.case-section-heading {
    cursor: default;
    background-color: var(--miniature-forms-border-color);
}

.fan-widget-case-section:not([occupied]) h5.case-section-heading:hover {
    box-shadow: 0 0 24px rgb(0 0 0 / 25%);
}

.fan-widget-case-section[occupied=cooler] .fan-section-info:before {
    content: 'This case section is occupied by the selected liquid cooler';
}

.fan-widget-case-section[occupied=case-fans] .fan-section-info:before {
    content: 'This case section is occupied by fans included with the case';
}

@media(min-width: 992px) { /*disabled on mobile*/
    .fan-widget-case-section:not([occupied]) .fan-section-info:before {
        content: 'This case section is empty! Click to add fans to this section';
    }

    .fan-widget-case-section:not([occupied]) h5.case-section-heading[selected] ~ .fan-section-info:before {
        content: 'This case section has been populated with the selected fan';
    }
}

@keyframes rainbow { 
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@media(max-width:1230px) {
    .fan-widget-display {
        justify-content:space-between;
    }

    .crox-fan-widget {
        padding-bottom: 0px;
    }

    .fan-widget-case-section {
        margin-bottom: 0px;
    }
}


/* ------------------------------ Extra Disable Recommended Filter Button ------------------------- */

.crox_display_all button {
    margin: auto;
    margin-top: 1em;
    display: block;
    padding-left: 20%;
    padding-right: 20%;
    color: var(--miniature-primary-color) !important;
    background-color: var(--miniature-background-color);
}

.component .component_filters.filtered ~ .crox_display_all {
    display: block !important;
}

.crox_display_all button:hover{
    color: white !important;
}

.crox_display_all button.button {
    background: var(--miniature-primary-color) !important;
    color: white !important;
}

.component .component_filters ~ .crox_display_all {
    display: none;
}

.miniature-product-summary-wrap .cart_group .crox-validation-container .crox-custom-valid-text{
    margin-left:25px;
}
@media (min-width:320px) and (max-width:991px){
    .miniature-product-summary-wrap .cart_group .crox-validation-container .crox-custom-valid-text{
        clear:"both";
        overflow:hidden;
        white-space:nowrap;
    }
}
@media (min-width:320px) and (max-width:991px){
    .miniature-product-summary-wrap .cart_group .crox-validation-container .crox-custom-valid-text{
        position:relative;
        right:5px !important;  
    }
    .miniature-product-summary-wrap .cart_group .crox-validation-container .crox-validation{
        padding-top:12px;   
    }
}
.miniature-product-summary-wrap .cart_group .crox-validation-container .crox-custom-valid-text{
        position:relative;
        bottom:0px !important;
        line-height: 18.04px;
        letter-spacing: -0.25px;
    }

@media (min-width:992px) and (max-width:1200px){
    .miniature-product-summary-wrap .cart_group .crox-validation-container .crox-custom-valid-text{
        clear:"both";
        overflow:hidden;
        white-space:nowrap;
    }
    .crox-bf-badge{
        font-size: 0.6em !important;
        transform: translateY(-11em) !important;
    }
}
@media (min-width:1201px) and (max-width:1400px){
    .crox-bf-badge{
        font-size: 0.7em !important;
        right:20px !important;
        transform: translateY(-10em) !important;
    }
}
@media (min-width:320px) and (max-width:991px){
    .miniature-product-summary-wrap .composite_wrap .composite_add_to_cart_button{
        margin-right:30px !important;
    }
}

/*------------------------------- Animations --------------------------------*/

@keyframes crox-fade {
    from {
        opacity: 100%;
        display: block;
    }

    to {
        opacity: 0%;
        display: none;
    }
}

@keyframes crox-spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.crox-subchild-title{
    font-size: 0.7em;
    color: #222;
    font-weight: 400;
    padding: 10px 0;
}
.crox-validation h6{margin-left:20px;}
.crox-bf-badge {
    line-height: 1.2em;
    font-size: 0.7em;
    position: absolute;
    transform: translateY(-13.5em);
    background-color: #000;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    color: #f6f7f7;
    padding: 5px 10px;
    border-radius: var(--miniature-border-radius-base);
    z-index:1;
    right:0px;
}