@media screen and (orientation: landscape) {
    .modal-overlay .innerOverlay {
        margin: 2vw 6.2vw;
    }
}

@media screen and (orientation: portrait) {
    .modal-overlay .innerOverlay { margin:6.2vw; }
}

.modal_blackout {
    position:fixed;
    opacity: 0.4;
    filter: alpha(opacity=40);
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000000;
    display:none;
    z-index:5000;
}

.modal_blackout.transparent {
    opacity: 0.0;
    display:none;
    pointer-events: none;
}

.modal-overlay {
    width:100vw;
    min-height:100%;
    margin:auto;
    padding:0;
    clear:both;
    font-size:3.5vw;
    position:absolute;
    top: 0;
    left: 0;
    background-color:#ffffff;
    display:none;
    /* box-shadow:0 5px #ddd; */
    box-shadow:0 0 3vw rgba(0, 0, 0, 0.4);
    -webkit-overflow-scrolling: auto;
}

.modal-overlay.small {
    min-height:0;
    width:92vw;
    height:auto;
    margin: auto 4vw auto 4vw;
    border-bottom:0;
}

.modal-overlay.special {
    min-height:0;
    width:100vw;
    height:auto;
    margin: 0;
    border-top: .25vw solid #ccc;
    border-bottom: .25vw solid #ccc;
    box-shadow:0 0 3vw #ccc;
}

.modal-overlay.bottom { /* Once it reaches animation position at bottom, we make it permanent here */
    top:auto !important;
    bottom:0 !important;
    position:fixed !important;
}

.modal-overlay .too-big {
    position:absolute;
}
.modal-overlay, .modal-overlay * {
    z-index:5001;
}

.modal-overlay .txtCenter {
    text-align:center;
    float:none !important;
    width:auto !important;
}
.modal-overlay.horizontal {
    margin: 0;
}
.modal-overlay .absBottom {
    position: absolute;
    bottom: 0;
    width: 90.6vw;
}

.modal-overlay.horizontal .innerOverlay { padding: 3vw; margin: 0; float: left; width: 100%; }
.modal-overlay .bodyContent.forceFullWidth { width: 100%; } /* Counteracts the innerOverlay constraints */

.modal-overlay .noBottomMargin { margin-bottom:0;}
.modal-overlay .marginL { margin-left:4.7vw; }
.modal-overlay .marginR { margin-right:4.7vw; }
.modal-overlay .marginLR {  }

.modal-overlay .xbutton {
    position:absolute;
    /*top:4.5vw;*/
    right:6.2vw;
    width: 4.5vw;
    height: 4.5vw;
    background: url(data:image/gif;base64,R0lGODlhMQAxANUAAAAAAP///9/f393d3dzc3NjY2NbW1tXV1dTU1NPT09DQ0M3NzczMzMvLy8rKysnJycjIyMfHx8DAwL+/v76+vr29vbq6uri4uLe3t7W1tbOzs6+vr56enpubm5mZmZeXl5WVlf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACEALAAAAAAxADEAAAb/wIAwQIkMj8ikcnlUWJQPECjBrFqRBKkEGZVOr+Bl1rsVdr2gQ3gtHKC1gcrbS2Vfx/MMZO5F2Kt4c1sJfFJ+f0mBbw5DhIUGiEeKaIxHB4Ugh4iTXgxKjnyabJxSlUoImHVrpCANVqiFamFuha5XBqlgrAtrsHyqYpi2vZiiWMKIoHPGQqymf5eFxqyekULKb5rU1kfYaGoCmM/cAb5zFMjkSOaYaMPqR+zt7/Dx7V709ZYemB/V+ksmYMoAkMkADpg6yCoo6Z4hhkNYLYMoMVRBVhmK6dtWIJc6VsPkeVkYiRYfeiKlkLQD8pRHlulcSoNZaFwSb31WYfpXJZrFUDs71/icCEicHZwPg9VClPJLEpNz8hGLdawQL25NVbVUlzWAgphcMT24ULMg0g0BJMzhqW+olAtD1HqxqU8Z3CNy6QJ0dBcJhjIQjzzQcCQIADs=) no-repeat right center;
    background-size: 4.5vw auto;
    font-size:0.005em;
}

.modal-overlay.small .xbutton {
    width:4.95vw;
    height:4.95vw;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAMAAAArU9sbAAAAY1BMVEUAAACnp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6f////7+/u7u7uurq7v7+/Nzc3BwcHe3t7w8PDq6urZ2dnGBjRIAAAAFXRSTlMA9d69JI2CVETo1c/DtZ15d2NgNiy6n9JKAAAB00lEQVRYw63Y226DMAwGYOdAArQFVvjbnbf3f8pJXCxyITXg/LdBn5QAiR3Kx8e+c21jYJrWdX30tDt1cAY8xoV6DzENDutxw7TRGCuLfGw1khwfkpFxgpeQ6xlyztenhq8MtsRUPo/UF2zNJfu64gnbc4rryIvFntiXVaTBvjQrTLTYGxsXC3vC/pxqjvgLjuTimVLhWCr2xZqDirkmxJ9xNOc0pwCW15835PL5Cp7wvxVYjtxv74xhY/cHxo5paTly4wwfSwxb4MkukMQskAVjp1kZ+MTvt8QskDk/YBlmxT08yxl5wM3fPoSnJR31/JoFRkIQ0oRyjIzAEXkDgZEQGE8REBgJASL1EBgZQU8dJEZE0JGDxHxKCBy1kJibhKClBgIjI2jIQGBkBIaALcz3MwQgU0Ax1BSYUUNtgdVtyRV40466Al9dR32BP6CnWOBvjOSNemcwnsipdylHREG9YwYiqtW791wLOeVJ4tLZqDjVhnROy0huyE4rNcNHDknM12pRNlrOPKs8FogdUy3FmWdV0AOCkKvrPhKyZH4f67psjfl2qMbU17v62lvfBxTvSfT9kb5X0/eN+h62ZD+t7+319wz6O4/S9y/l74L091J/Lmwzhh3I/uwAAAAASUVORK5CYII=) no-repeat center;
    background-size:100% 100%;
}

.modal-overlay h2 {
    text-transform: uppercase;
    font-size:4.5vw;
    font-weight:bold;
    margin:0 5.0vw 4.8vw 5.0vw;
    padding:0;
}

.modal-overlay .radioBox h2 {
    /* margin-left: -4.8vw; */
    text-align:left;
    text-transform: uppercase;
}

.modal-overlay .innerOverlay > h2 {
    margin-left:4.8vw;
}

.modal-overlay p, .modal-overlay span {
    font-size:4.0vw;
    line-height:6vw;
}
@media (max-width: 576px) {
    .component-list-options .container-items .container-item .option-description li span {
        font-size: 4vw !important;
    }
}

.modal-overlay input[type=submit],
.modal-overlay input[type=button] {
    width: 100%;
    height:11vw;
    font-weight:bold;
    text-align:center;
    font-size:4.5vw;
    background-color:var(--btn-primary-bg-color);
    color:#fff;
    border:0;
    margin-top: 4.5vw;
    border-radius: var(--btn-border-radius, 0);
}

.modal-overlay input[type=submit].desktopColor {
    background: #F3F0EB;
    color: #5E524D;
    border:0;
}

.modal-overlay input[type=submit].halfsize {
    width: 48%;
    font-size: 4.2vw;
    text-transform: uppercase;
}
.modal-overlay input[type=submit].halfsize:first-of-type { float:left; }
.modal-overlay input[type=submit].halfsize:last-of-type { float:right; }

.modal-overlay input[type=submit].thirdsize { width:28%; font-size:3.5vw; display:inline-block; }
.modal-overlay input[type=submit].thirdsize:first-of-type { float:left; text-transform:uppercase;}
.modal-overlay input[type=submit].thirdsize:last-of-type { float:right; }
.thirdsize.savefor.later{font-size:3.5vw !important;     width: auto !important;}

.modal-overlay input[type=submit].nomargin {
    margin:0;
}

.modal-overlay input[type=submit].width100percent {
    width: 100%;
}

.modal-overlay input[type=submit].cancel,
.modal-overlay input[type=button].cancel {
    background-color:#aaaaaa;
}

.modal-overlay input[type=submit].thirdsize.reset {
    background: none;
    color: #7e6f68;
    text-decoration: underline;
    font-size:4.75vw;
}

.modal-overlay input[type=submit].thirdsize.hollow {
    display: none;
    float: left;
    margin-left: 12%;
    position: relative;
    background: none;
    color: #53ba83;
    font-size:4.75vw;
    border: 1px solid var(--btn-primary-border-color);
}

.modal-overlay input[type=submit].desktopColor,
.modal-overlay input[type=button].desktopColor {
    background: #F3F0EB;
    color: #5E524D;
    border:0;
}

.modal-overlay input[value="YES, PLEASE ADD THE GARLAND"],
.modal-overlay input[value="NO, I DON'T WANT THE GARLAND"] {
    width: 100% !important;
}

.modal-overlay .radioBox {
    border: 2px solid #ccc;
    margin-bottom: 4.8vw;
    min-height: 42vw;
}

.modal-overlay.mini-height .radioBox {
    min-height: 32vw;
}

.modal-overlay .radioBox.disabled {
    background-color: #eeeeee; /* Need to return to this */
}

.modal-overlay .radioBox.small {
    min-height:0;
}

.modal-overlay .radioBox.on {
    border:2px solid var(--btn-primary-border-color);
}

.modal-overlay .radioBox div {
    /* margin: 5.6vw 0 5.6vw 5.6vw; */
    margin: 4.8vw 0 4.8vw 4.8vw;
}

.modal-overlay ul {
    padding-left:5vw;
}

.modal-overlay li span {
    position:relative;
    left:-2vw;
}

.modal-overlay .saleprice {
    color: #f68c62;
}


.modal-overlay .twoTone {
    border:.75vw solid #7e6f68;
    width: 87vw;
    height:12vw;
    margin:6.1vw 0 0 0;
}
.modal-overlay .tone {
    color:#7e6f68;
    width:50%;
    height:11vw;
    float:left;
    text-align:center;
    display:table;
    vertical-align:middle;
}
.modal-overlay .tone:last-of-type { float:right; }
.modal-overlay .tone.on {
    background-color:#7e6f68;
    color:#fff;
}
.modal-overlay .tone span {
    display: table-cell;
    vertical-align: middle;
    line-height:4.5vw;
}
.modal-overlay .tone.on.single {
    width:100%;
}

.modal-overlay table {
    width:75vw;
    margin:auto;
}

.modal-overlay table tr { line-height: 6vw; }
.modal-overlay table tr > :first-child { width:30%; text-align:left; }
.modal-overlay table tr > :nth-child(2) { width:45%; text-align:left; }
.modal-overlay table tr > :last-child { width:25%; text-align:left; }

.modal-overlay .cardstock_details { display:none; }

.modal-overlay .coasters span {
    font-size:3.5vw;
}

.modal-overlay .showAlertContent{
    margin-bottom: 15px;
}