﻿label > input[type=radio] {
    vertical-align: top;
    margin: 5px 5px 5px 0;
    cursor: pointer;
}

.configurator {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.configurator-form label {
    cursor: pointer;
}

.configurator-form {
    width: 375px;
    margin-right: 60px;
    flex-shrink: 0;
}

    .configurator-form h4 {
        font-weight: 700;
    }

    .configurator-form label{
        display:block;
        margin-bottom: 0;
    }

.price-subtotal{
    display:inline-block;
}

.configurator-visual {
    margin-top: 20px;
    position: relative;
    max-width: 1000px;
    width: 100%;
    /*height: calc(100vh - 126px);*/
    display: flex;
    justify-content: center;
}

    .configurator-visual > .floating-container {
        z-index: 9;
        position: absolute;
    }

    .configurator-form-heading:hover, .configurator-form-heading:hover h4 {
        cursor: pointer;
        color: #F68C1F;
    }

    .configurator-form-heading.collapsed .showtext,
    .configurator-form-heading:not(.collapsed) .hidetext {
        display: none;
    }

.configurator-form-caption {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: .85em;
}

.accordionHeading.collapsed .showtext,
.accordionHeading:not(.collapsed) .hidetext {
    display: none;
}

@media only screen and (max-width:1024px) {
    .configurator {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (max-width: 992px) {
    .configurator {
        flex-wrap: wrap;
        padding-left: 0px;
        padding-right: 0px;
    }

    .configurator-form {
        width: 100%;
        order: 1;
        padding: 0 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .configurator-visual {
        padding: 0;
        width: 100%;
        height: auto;
    }

        .configurator-visual > .floating-container {
            padding: 20px;
            background-color: #fff;
            border-bottom: 1px solid #DCDCDC;
            width:100%;
            position:static;
        }
}

.switcherControls .btn, .btn.toggle, .btn[data-toggle="button"] {
    background-color: transparent;
    color: #F68C1F !important;
}

    .switcherControls .btn::before, .btn.toggle::before, .btn[data-toggle="button"]::before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
        content: "\f0c8";
        margin-right: 5px;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

.btn.selected::before, .btn.on::before, .btn.toggle.active::before, .btn.active[data-toggle="button"]::before {
    content: "\f14a";
}

.btnInvert.selected, .btnInvert.on, .btn-outline-primary.active {
    background-color: #F68C1F;
    color: #ffffff !important;
}

.fa-square-o {
    margin-right: 2px;
}

.systemRendering {
    /*max-width: 1000px;*/
    margin: 0 auto;
    background-color: #231f20;
    /* Allows background color to be printed */
    printer-colors: exact !important;
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
}

.scoreboardRendering, .stat-panel-rendering {
    display: inline-block;
    max-width: 100%;
    position: relative;
}

    .scoreboardRendering img,
    .scoreboardRendering img.optionOverlay,
    .stat-panel-rendering img,
    .stat-panel-rendering img.optionOverlay {
        height: auto;
        width: auto;
        max-width: 100%;
    }

#VinylLayer, .vinylLayer {
    height: 100%;
    overflow: hidden;
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #666;
}

.optionOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.addOnPanel {
    height: 60px;
    text-align: center;
    font-weight: bold;
    line-height: 1em;
}

#SponsorLayer, .sponsor-layer {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    border-top: 1px solid #666;
}

#NameLayer, .name-layer {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
}

/* needed to show text shadow on printer friendly*/
.accent-text * {
    text-shadow: inherit !important;
}

.accent-text {
    color: #fff;
    text-shadow: -3px 0 #000, 0 -3px #000, 3px 0 #000, 0 3px #000, -3px -3px #000, 3px -3px #000, -3px 3px #000, 3px 3px #000 !important;
    letter-spacing: .1em;
    font-size: 4em;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1;
}

.name-layer > .accent-text, #NameLayer, #TextWidthFinder.NameLayer, #TextWidthFinder.name-layer {
    text-shadow: -1px 0 #666, 0 -1px #666, 1px 0 #666, 0 1px #666, -1px -1px #666, 1px -1px #666, -1px 1px #666, 1px 1px #666 !important;
}

.sponsor-layer, #SponsorLayer, #TextWidthFinder.SponsorLayer, #TextWidthFinder.sponsor-layer {
    color: #fff;
    font-size: 2.5em;
}

    .sponsor-layer > .accent-text {
        text-shadow: none !important;
        text-transform: none
    }



.accent-text.name-layer, .accent-text.sponsor-layer, .sponsor-layer>.accent-text, .name-layer>.accent-text{
    letter-spacing: inherit;
    line-height: inherit;
}

@media (max-width: 576px), (max-height: 768px) {
    .accent-text {
        text-shadow: -2px 0 #000, 0 -2px #000, 2px 0 #000, 0 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000 !important;
    }
}

@media (max-width: 480px), (max-height: 576px) {
    .accent-text {
        text-shadow: -1px 0 #000, 0 -1px #000, 1px 0 #000, 0 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000 !important;
    }
}

@media print{
    @page{
        size: letter;
    }
}

#NameLayer, #SponsorLayer, .name-layer, .sponsor-layer {
    overflow: hidden;
}

#AccentLayer, .accentLayer {
    position: relative;
}

    #AccentLayer img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .accentLayer img{
        width: 100%;
        height: 100%;
        vertical-align: initial;
    }

    #AccentLayer .accent-text, .accentLayer .accent-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

.videoLayer {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}
.video-cabinet {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.video-image {
    height: auto;
    width: auto;
    max-width: 100%;
}

#RollupImage {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 400px;
}

#SideVideoLayer {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.hidden {
    visibility: hidden;
}

.caption {
    font-size: 75%;
    font-style: italic;
    margin-top: 5px;
}
.pricing-card .text-danger {
    color: red !important;
}

.scoreboardOptionStack img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 400px;
}

.scoreboardModes a {
    cursor: pointer;
}

    .scoreboardModes a.selected {
        cursor: default;
        color: #333;
    }

.colorOptions {
    display: flex;
    flex-wrap: wrap;
}

.colorOption {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    margin: 5px;
    cursor: pointer;
    box-shadow: 0 0 1px 1px #DCDCDC;
}

    .colorOption:hover {
        box-shadow: 0 0 1px 1px #333;
    }

    .colorOption.selected::after {
        content: "\f00c";
        font-family: "Font Awesome 6 Pro";
        font-size: 1.25em;
        color: #fff;
        text-shadow: 0 0 2px #333 !important;
        display: inline-block;
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

.colorOption[data-optionvalue="Black"] {
    background-color: #231f20;
}

.colorOption[data-optionvalue="Blue"] {
    background-color: #004689;
}

.colorOption[data-optionvalue="Brick Red"] {
    background-color: #a02125;
}

.colorOption[data-optionvalue="Bright Orange"] {
    background-color: #f26722;
}

.colorOption[data-optionvalue="Bright Yellow"] {
    background-color: #ffe14f;
}

.colorOption[data-optionvalue="Brown"] {
    background-color: #973f1b;
}

.colorOption[data-optionvalue="Burgundy"] {
    background-color: #6d0020;
}

.colorOption[data-optionvalue="Cardinal Red"] {
    background-color: #ae132a;
}

.colorOption[data-optionvalue="Cherry Red"] {
    background-color: #b51218;
}

.colorOption[data-optionvalue="Dark Gray"] {
    background-color: #58595b;
}

.colorOption[data-optionvalue="Dark Green"] {
    background-color: #006140;
}

.colorOption.vinyl[data-optionvalue="Forest Green"] {
    background-color: #004133;
}

.colorOption[data-optionvalue="Forest Green"] {
    background-color: #003d1d;
}

.colorOption[data-optionvalue="Gray"] {
    background-color: #808080;
}

.colorOption[data-optionvalue="Harvest Gold"] {
    background-color: #e6b711;
}

.colorOption[data-optionvalue="Jade Green"] {
    background-color: #00a65e;
}

.colorOption[data-optionvalue="Kelly Green"] {
    background-color: #009457;
}

.colorOption[data-optionvalue="Light Blue"] {
    background-color: #0078b9;
}

.colorOption[data-optionvalue="Light Navy"] {
    background-color: #002d5b;
}

.colorOption[data-optionvalue="Light Orange"] {
    background-color: #f38f1d;
}

.colorOption[data-optionvalue="Maroon"] {
    background-color: #7a1315;
}

.colorOption[data-optionvalue="Midnight Blue"] {
    background-color: #001c49;
}

.colorOption[data-optionvalue="Medium Gray"] {
    background-color: #c7c9c8;
}

.colorOption[data-optionvalue="Navy Blue"] {
    background-color: #003062;
}

.colorOption[data-optionvalue="Olympic Blue"] {
    background-color: #008ccc;
}

.colorOption[data-optionvalue="Orange"] {
    background-color: #f37321;
}

.colorOption[data-optionvalue="Pine Green"] {
    background-color: #008047;
}

.colorOption[data-optionvalue="Peacock Blue"] {
    background-color: #43c5e4;
}

.colorOption[data-optionvalue="Perfect Match Red"] {
    background-color: #ed1944;
}

.colorOption[data-optionvalue="Purple"] {
    background-color: #472f92;
}

.colorOption[data-optionvalue="Red"] {
    background-color: #ed1c24;
}

.colorOption[data-optionvalue="Royal Purple"] {
    background-color: #422c88;
}

.colorOption[data-optionvalue="Sapphire Blue"] {
    background-color: #043673;
}

.colorOption[data-optionvalue="Satin Aluminum"] {
    background-color: #BCBDBC;
}

.colorOption[data-optionvalue="Satin Gold"] {
    background-color: #988642;
}

.colorOption[data-optionvalue="Sunflower Yellow"] {
    background-color: #ffce34;
}

.colorOption.vinyl[data-optionvalue="Teal"] {
    background-color: #007c8a;
}

.colorOption[data-optionvalue="Teal"] {
    background-color: #007983;
}

.colorOption[data-optionvalue="White"] {
    background-color: #fafafa;
}

.colorOption[data-optionvalue="Yellow"] {
    background-color: #ffcb05;
}

.colorOption[data-optionvalue="No Striping"], .colorOption.no-striping {
    background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 46%, rgba(255,0,0,1) 50%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 100%);
}

.colorOption.selected::after {
    z-index: 1;
}
