.noble-form-container {
    max-width:1024px;
    margin:0 auto;
    /* background-color:#f9f9f9; */
    min-height:400px;
    --noble-blue:#00539f;
    --noble-blue-dark:#172643;
    color:#555;
}

.noble-form-container strong {
    font-weight:700;
}

.noble-fixed {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.9);
    z-index:10000;
}

.noble-form-container h2 {
    color:var(--noble-blue);
    font-size:24pt;
    font-weight:700;
}

.noble-form-container label.number {
    font-size:20pt;
    font-weight:700;
    padding:0 20px 0 80px;
}

.noble-form-container input[type=number] {
    width:100px;
    padding:4px;
    font-size:16pt;
    margin:4px 0;
    border:1px solid #ccc;
    border-radius:4px;
}

.noble-form-container textarea {
    margin:8px;
    width:calc(100% - 16px);
    border-width:0;
    height:150px;
    border-radius:8px;
    outline:none;
    resize:none;
}

.noble-form-container ul {
    /* color:#aaa; */
    /* font-size:0.9em; */
    list-style-position:outside;
    /* margin-top:40px; */
}

.noble-5-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-gap:20px;
}
.noble-5-grid .noble-selection {
    grid-column: 1 / span 5;
}

.noble-3-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-gap:20px;
}
.noble-3-grid .noble-selection {
    grid-column: 1 / span 3;
}
#noble-drain-length {
    grid-column: 1 / span 3;
    padding-top:60px;
    margin-top:60px;
    border-top:1px solid #aaa;
}

.noble-2-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-gap:20px;
}
.noble-2-grid .noble-selection, .noble-2-grid > h2 {
    grid-column: 1 / span 2;
}

.noble-blue-background {
    background-color:var(--noble-blue-dark);
    padding:14px 20px 20px 20px;
    border-radius:8px;
    margin-top:20px;
}
.noble-blue-background > div:nth-child(1) {
    font-size:16pt;
    font-weight:700;
    color:#fff;
    padding-bottom:12px;
}
.noble-blue-background > div:nth-child(2) {
    background-color:#fff;
    border-radius:8px;
    padding:20px;
}

.noble-confirmation {
    width:500px;
    max-width:100%;
    margin:24px auto;
}

.noble-confirmation-buttons {
    padding:24px 0;
}
.noble-confirmation-buttons > span {
    background-color:var(--noble-blue-dark);
    color:#fff;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
    margin:0 20px 0 0;
}

.noble-quantity {
    text-align:right;
    font-weight:700;
    padding:20px 0;
}
#noble-price {
    font-size:1.4em;
    margin-right:12px;
}

.noble-form-container .noble-quantity input[type=number] {
    height:32px;
    width:96px;
    padding:4px;
    font-size:16pt;
    margin:0 12px;
    border:1px solid #aaa;
    border-radius:40px;
    text-align:center;
}
.noble-form-container .noble-quantity .noble-button {
    display:inline-block;
    height:32px;
    background-color:#fff;
    border:1px solid var(--noble-blue);
    color:var(--noble-blue);
    padding:4px 24px;
    border-radius:40px;
    cursor:pointer;
    vertical-align:top;
    line-height:32px;
}
.noble-form-container .noble-quantity .noble-button:hover {
    background-color:var(--noble-blue);
    color:#fff;
}

.noble-separator {
    border-top:1px solid #aaa;
    margin:60px 0;
}

.noble-option {
    border:4px solid var(--noble-blue);
    border-radius:8px;
    background-color:#fff;
    padding:12px 0;
    text-align:center;
    color:var(--noble-blue);
    cursor:pointer;
}

.noble-option.selected {
    background-color:var(--noble-blue);
    color:#fff;
}

.noble-selection, #noble-drain-length {
    display:block;
    color:var(--noble-blue);
    font-weight:700;
    font-size:16pt;
}
#noble-drain-length {
    color:#000;
    text-transform:uppercase;
    font-size:14pt;
}

#noble-drain-length > select { 
    padding:4px 8px;
    border-radius:4px;
}

.noble-option > div {
    font-weight:700;
    font-size:14pt;
}

.noble-option > div > small {
    font-size:8pt;
    display:block;
}

.noble-option > div:last-child {
    font-weight:400;
    font-size:11pt;
    padding-top:8px;
}

.noble-radio-group > div {
    display:flex;
    align-items:center;
}
.noble-radio-group > div > input {
    margin:0 12px;
}

#noble-errors {
    background-color:#fff3e6;
    border:1px solid #ffcc00;
    color:#cc0000;
    padding:20px;
    border-radius:8px;
    margin:20px 0;
}

#noble-1, #noble-2, #noble-3, #noble-4, #noble-5,
#noble-6, #noble-7, #noble-8, #noble-9, #noble-10, #noble-11,
#noble-09, #noble-010, #noble-011, #noble-12, #noble-13, #noble-14, #noble-15, #noble-16, #noble-17,
#noble-97, #noble-98, #noble-99 {
    display:block;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    padding-top:100%;
    margin:0 20px;
}
#noble-6, #noble-7, #noble-8,
#noble-9, #noble-10, #noble-11,
#noble-09, #noble-010, #noble-011,
#noble-97, #noble-98, #noble-99 {
    padding-top:50%;
}

#noble-12, #noble-13, #noble-14, #noble-15, #noble-16, #noble-17 {
    position:relative;
}
#noble-12 > svg, #noble-13 > svg, #noble-14 > span > svg, #noble-15 > svg, #noble-16 > svg, #noble-17 > svg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#noble-1 {
    background-image:url(./assets/multi-slope-point-drains.svg);
}
#noble-2 {
    background-image:url(./assets/single-slope-linear-drains.svg);
}
#noble-3 {
    background-image:url(./assets/multi-slope-linear-drains.svg);
}
#noble-4 {
    background-image:url(./assets/neo-angle-point-drains.svg);
}
#noble-5 {
    background-image:url(./assets/unique-any-drains.svg);
}
#noble-6 {
    background-image:url(./assets/FreeStyle\ Thin-Bed\ Drain.svg);
}
#noble-7 {
    background-image:url(./assets/Bonding\ Flange\ Drain.svg);
}
#noble-8 {
    background-image:url(./assets/Clamping\ Ring\ Drain.svg);
}
#noble-9 {
    background-image:url(./assets/FreeStyle\ Linear\ Drain_body\ on\ substrate.svg);
}
#noble-10 {
    background-image:url(./assets/FreeStyle\ Linear\ Drain_flanges\ on\ substrate.svg);
}
#noble-11 {
    background-image:url(./assets/Solutions\ Linear\ Drain.svg);
}
#noble-09 {
    background-image:url(./assets/FreeStyle\ Linear\ Drain_body\ on\ substrate_MULTI-SLOPE.svg);
}
#noble-010 {
    background-image:url(./assets/FreeStyle\ Linear\ Drain_flanges\ on\ substrate_MULTI-SLOPE.svg);
}
#noble-011 {
    background-image:url(./assets/Solutions\ Linear\ Drain_MULTI-SLOPE.svg);
}
/* #noble-12 {
    background-image:url(./assets/Multi-Slope\ DIMENSIONS.svg);
} */
/* #noble-13 {
    background-image:url(./assets/Multi-Slope\ Linear\ Drain\ DIMENSIONS.svg);
} */
/* #noble-14 {
    background-image:url(./assets/Neo-Angle\ DIMENSIONS.svg);
    position:relative;
    padding-top:100%;
    height:0;
    margin-top:48px;
} */
#noble-14 > div { 
    width:100%;
    height:24px;
    top:85%;
    left:0;
    text-align:center;
    /* background-color: var(--noble-blue); */
    position:absolute;
    font-weight:700;
    color:#000;
}
/* #noble-15 {
    background-image:url(./assets/Single-Slope\ Standard\ Filler\ DIMENSIONS.svg);
}
#noble-16 {
    background-image:url(./assets/Single-Slope\ Custom\ Filler\ DIMENSIONS.svg);
}
#noble-17 {
    background-image:url(./assets/Single-Slope\ No\ Filler\ DIMENSIONS.svg);
} */
#noble-97 {
    background-image:url(./assets/Honeycomb\ Base\ Material.svg);
}
#noble-98 {
    background-image:url(./assets/Waterproof\ Honeycomb\ Base\ Material.svg);
}
#noble-99 {
    background-image:url(./assets/Waterproof\ Foam\ Base\ Material.svg);
}
#noble-unique-notice {
    grid-column: 1 / span 2;
}

.noble-5-grid .noble-header {
    grid-column: 1 / span 5;
}
.noble-3-grid .noble-header {
    grid-column: 1 / span 3;
}
.noble-2-grid .noble-header {
    grid-column: 1 / span 2;
}

.noble-header {
    font-size:16pt;
    font-weight:700;
    color:var(--noble-blue);
}

@media (max-width:1000px) {
    .noble-3-grid.noble-filler-options {
        grid-template-columns:1fr;
    }
}

@media (max-width:960px) {
    .noble-5-grid, .noble-3-grid, .noble-2-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .noble-5-grid .noble-selection {
        grid-column: 1 / span 2;
    }
    .noble-3-grid .noble-selection {
        grid-column: 1 / span 2;
    }
    #noble-drain-length {
        grid-column: 1 / span 2;
    }
    .noble-2-grid .noble-selection, .noble-2-grid h2 {
        grid-column: 1 / span 2;
    }
    #noble-drain-length {
        grid-column: 1 / span 2;
    }
    .noble-5-grid .noble-header {
        grid-column: 1 / span 2;
    }
    .noble-3-grid .noble-header {
        grid-column: 1 / span 2;
    }
    .noble-2-grid .noble-header {
        grid-column: 1 / span 2;
    }
}

@media (max-width:540px) {
    .noble-5-grid, .noble-3-grid, .noble-2-grid {
        grid-template-columns:repeat(1,1fr);
    }
    .noble-5-grid .noble-selection {
        grid-column: 1 / span 1;
    }
    .noble-3-grid .noble-selection {
        grid-column: 1 / span 1;
    }
    #noble-drain-length {
        grid-column: 1 / span 1;
    }
    .noble-2-grid .noble-selection, .noble-2-grid > h2 {
        grid-column: 1 / span 1;
    }
    #noble-drain-length {
        grid-column: 1 / span 1;
    }
    #noble-unique-notice {
        grid-column: 1 / span 1;
    }
    .noble-5-grid .noble-header {
        grid-column: 1 / span 1;
    }
    .noble-3-grid .noble-header {
        grid-column: 1 / span 1;
    }
    .noble-2-grid .noble-header {
        grid-column: 1 / span 1;
    }
}