/* General Styling */
.content .form-page {
    font-family: 'Arial';
    line-height: 1.4;
    background: #fff;
    color: #000;
}

.content .form-render .form-body .products-container {
    max-width: 775px;
}

.content fieldset {
    border: 0;
    border-top: 1px solid #c0c0c0;
}

.content legend {
    font-weight: bold;
    font-size: 24px;
    font-family: 'Arial';
    position: relative;
    top: -8px;
    text-shadow: 0 1px 0px #999;
}

.content .form-render .form-body fieldset.section .form-row > label {
    /*display: none;*/
}

.content .form-render .form-step-navigation ul li h2 a {
    color: #000;
}

.content .form-header a {
    border-radius: 0;
    border: solid 1px #ded6c7;
    background: transparent;
    box-shadow: none;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    padding: 10px;
}

.content .main-content-block .form-header a:hover {
    color: #fff;
    background: rgba(0,0,0,0.5);
}

.content .form-render .form-body .products-container .tool-tip, 
.content .form-render .form-body .location-container .tool-tip, 
.content .form-render .form-body .address-container .tool-tip, 
.content .form-render .form-body .form-row .value .tool-tip {
    border: 1px solid #ccc;
    background: #f1f1f1;
    position: relative;
    right: 0;
    top: 100%;
    white-space: pre-wrap;
    z-index: 100;
    padding: 5px;
    color: #333;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
}

.form-render .form-body .tool-tip p {
    margin: 0;
}

/* Breadcrumb styling */

.content .form-render .form-step-navigation ul li:nth-child(even) {
    display: none;
}

.content .form-render .form-step-navigation ul li h2 {
    font-size: .8rem;
}

.content .form-render .form-step-navigation ul li.selected-step h2 {
    font-weight: normal;
}

.content .form-render .form-step-navigation ul li {
    float: none;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    padding-left: 5px;
}

.content .form-render .form-step-navigation ul li:first-child {
    padding-left: 0;
}

.content .form-render .form-step-navigation ul li h2:after {
    content: ' / ';
    padding-left: 5px;
    display: inline-block;
}

.content .form-render .form-step-navigation {
    min-height: 25px;
    font-size: 0.6em;
}

/* Category Styling */

.content .form-page .form-body .form-row {
    width: 100%;
}

.content .form-page .form-body .plan-select-section .form-row {
    position:relative;
    z-index: 3;
    border-bottom: 1px solid #f1f1f1;
    background: #f1f1f1;
}

.plan-select-section .form-row:before,
.plan-select-section .form-row:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 5px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    /* background: #999; */
    -webkit-box-shadow: 0 15px 10px #999;
    -moz-box-shadow: 0 15px 10px #999;
    box-shadow: 0 15px 10px #999;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.plan-select-section .form-row:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 5px;
    left: auto;
}

.content .form-render .plan-select-section .package-selector-heading {
    background: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    padding-bottom: 5px;
}

.content .form-render .plan-select-section .package-container {
    display: inline-block;
    background: #f1f1f1;
}

.content .form-render .plan-select-section .package-container .input-package img {
    max-width: 100%;
    margin: 0;
}

.content .form-render .plan-select-section .package-container .input-package:hover img {
    max-width: 100%;
}

.content .form-render .plan-select-section .package-container .input-package {
    height: 160px;
}

.content .form-render .plan-select-section .package-container .input-package .details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translate3d(0%, 45%, 0);
    overflow: hidden;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    background-color: rgb(229,229,229);
    background-color: rgba(229,229,229,0.8);
    font-family: 'Arial';   
}

.content .form-render .plan-select-section .package-container .input-package .details .package-name {
    text-shadow: 0 1px 0 #fff;
}

.content .form-render .plan-select-section .package-container .input-package:hover .details {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0%, 0%, 0);
    background-color: rgb(0,0,0);
    background: rgba(0,0,0,0.4);
    color: #fff;
}

.content .form-render .plan-select-section .package-container .input-package {
    overflow: hidden;
    width: 80%;
}

.content .form-render .form-body .plan-select-section .form-row .instructions-container {
    display: inline-block;
    max-height: 185px;
    vertical-align: top;
    overflow: hidden;
    max-width: 390px;
    background: #f1f1f1;
    position: relative;
    z-index: 3;
    width: 85%;
    height: 185px;
    margin-bottom: 0;
}

.content .form-render .form-body .plan-select-section .form-row .instructions-container ul {
    margin-top: .5rem;
    max-height: 150px;
    overflow: hidden;
}

/* Product Main view */

.content .product-selector ul.category-list > li > a {
    border-radius: 2px;
}
.content .product-selector ul.category-list > li > a {
    padding: 3px 10px;
}

.content .product-selector ul.category-list > li:hover a {
    color: #333;
}

.content .product-selector .products .product img {
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin-top: 0;
}

.content .product-selector .product dl.details {
    text-align: left;
    font-family: 'Arial';
}

.content .product-selector .products .product .thumbnail:hover {
    transform: none !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.content .product-selector .products .product .thumbnail {
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1, 1);
}

.content .product-selector .product dl.details {
    text-align: left;
}

.content .product-selector .products {
    text-align: center;
    border-top: 2px solid #f1f1f1;
    border-top: 2px solid rgba(0,0,0,0.1);
}

.content .product-selector ul.category-list {
    margin-left: 30px;
}

.content .product-selector .products .product .thumbnail {
    height: 150px;
}

.content .product-selector .products .product:hover .thumbnail img {
    transform: none;
}

.content .product-selector .products .product {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 30%;
    padding: 5px;
    box-shadow: none;
    border: none;
    margin: .5rem;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    opacity: 0.5;
}

.content .product-selector .product dl.details dd.price {
    font-weight: normal;
    margin-top: 0;
    text-align: center;
}

.content .product-selector .product dl.details dd.name {
    color: #15AAE2;
    font-weight: normal;
    text-align: center;
    height: auto;
}

.content .product-selector .products .product:hover {
    box-shadow: none;
    opacity: 1;
}

.content .product-selector .product dl.details dd.name {
    color: #333;
    text-shadow: 0 1px 0px rgba(0,0,0,0.5);
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
}

.content .product-selector .products .product:hover .details .price,
.content .product-selector .products .product:hover .details .name {
    color: #000;
}

.content .form-render .button-row .yui3-button {
    border-radius: 0;
    border: solid 1px #ded6c7;
    box-shadow: 1px 1px 3px 0 #000;
    background: #f1f1f1;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
}

.content .form-render .button-row .yui3-button:hover {
    color: #fff;
    background: rgba(0,0,0,0.5);
}

.content .product-selector nav {
    width: 100%;
}

.content ul.pager > li a, 
.content ul.pager > li span {
    border: none;
    font-family: 'Arial';
    padding: 0px 9px;
    margin-left: 0;
    font-size: 20px;
    background-color: transparent;
    color: #666;
}

.content ul.pager > li.active a, 
.content ul.pager > li.active span {
    border: 1px solid #888;
    border-radius: 50px;
    background: #999;
    color: #fff !important;
    z-index: 2;
    padding: 0px 9px;
    margin-top: 0px;
}

.content .product-selector ul.category-list > li.active > a, 
.content .product-selector ul.category-list > li.active > a:hover, 
.content .product-selector ul.category-list > li.active > a:focus {
    background-color: #333;
    background-color: rgba(0,0,0,0.5);
}

/* Product View */

.content .product-view .product .yui3-button {
    position: relative;
    display: block;
    border-radius: 2px;
    box-shadow: none;
    border: 2px solid #f1f1f1;
    background: transparent;
    transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
}

.content .product-view .product .yui3-button:hover {
    background: #999;
    color: #fff;
}

.content .product-selector .product-view .product .product-image {
    margin: 2.5rem auto;
    height: auto;
    width: 60%;
    text-align: center;
    display: inline-block;
    border: 2px solid #f1f1f1;
    background: #fff;
}

.content .product-selector .product-view .product .column-container {
    font-size: 0;
    display: inline-block;
    vertical-align: top;
    width: 39%;
    margin-top: 2.5rem;
}

.content .product-selector .product-view .product .col-one-half {
    width: 100%;
    text-align: center;
}

.content .product-selector .product-view .product dl.details {
    text-align: center;
}

.content .product-selector .product-view .product .table > tbody > tr > td {
    padding: 0;
    line-height: 1.42857143;
    vertical-align: middle;
    width: 100%;
    font-size: 20px;
    font-family: 'Arial';
    display: block;
}

.content .product-selector .product-view .product .table td.quantity {
    min-width: 130px;
    width: 100%;
    display: block;
    margin-top: 20px;
}

.content .product-selector .product-view .product .table td.quantity button {
    position: relative;
    width: 100%;
    box-shadow: none;
    border-radius: 2px;
    border: 1px solid #999;
    background: #4a87bc;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
}

.content .main-content .product-selector .product-view .product .table td.quantity button.addQuantity, 
.content .main-content .product-selector .product-view .product .table td.quantity button.removeQuantity {
    width: 10%;
}

.content .main-content .product-selector .product-view .product .spinner-control {
    text-align: center;
}

.content .product-selector .product-view .product .table td.quantity button:hover {
    opacity: 0.7;
}

.content .product-selector .product-view .product {
    padding: 0px;
    background: #fff;
    position: relative;
    z-index: 0;
}

/* Side-Cart */

.content .main-content-block {
    position: relative;
}

#form-side-cart-container .form-side-cart .expand-side-cart, 
#side-cart-sub-total, 
.form-side-cart {
    border-radius: 2px 2px 0 0;
    height: 100%;
    background: #f1f1f1;
    border: 1px solid #333;
}

.content .main-content #form-side-cart-container .form-side-cart .expand-side-cart {
    border-bottom: 0;
}

.content .main-content #side-cart-sub-total {
    border-radius: 0;
    margin-top: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.content .form-side-cart {
    border-bottom: 0;
}

.content #form-side-cart-container {
    position: absolute;
    float: none;
    right: 0px;
    top: 0px;
    margin-top: 50px;
    font-family: 'Arial';
    width: 20%;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
}

.content .form-side-cart h2 {
    background-color: #333;
    background-color: rgba(0,0,0,0.5);
    border-radius: 0;
}

.content #form-side-cart-container .arrow-down {
    width: 20px;
    height: 21px;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-top: 0px solid #eff4f9;
    background-image: url(../images/arrow-down.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: -3px;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
}

.content #form-side-cart-container .arrow-up {
    width: 20px;
    height: 21px;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid #eff4f9;
    background-image: url(../images/arrow-up.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: -3px;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
}

.content .form-side-cart h2:before {
    content: "";
    background-image: url(../images/my_selections.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    height: 15px;
    width: 18px;
    position: absolute;
    top: 11px;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
}

.content .main-content #side-cart-sub-total .sub-total-text:before {
    content: "";
    background-image: url(../images/tot_cost.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    height: 15px;
    width: 18px;
    position: absolute;
    top: 11px;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    display: none;
}

.content #side-cart-product-list li {
    border-bottom: 1px solid #fff;
}

.content .item-name, .content .item-price, .content .sub-total-text, .content .sub-total-value {
    font-size: 10px;
}

/*
   New additions
*/
.content .form-render .form-body .plan-select-section .form-row .instructions-container {
   max-width: 384px;
}
.content .form-render .form-body .plan-select-section .form-row .instructions-container p {
   margin: 0;
}
.content .form-render .form-body .plan-select-section .form-row .instructions-container ul li {
    font-size: 15px;
}

.content .form-render .form-body h3 {
    display: none;
}

.plan-select-section .form-row:before, 
.plan-select-section .form-row:after {
  display: none;
}

.content .form-render .form-body .plan-select-section .form-row .instructions-container ul {
  max-height: 100%;
}

.content .form-render .form-body .plan-select-section .form-row .instructions-container {
    display: inline-block;
    max-height: 100%;
    overflow: visible;
    position: relative;
    height: auto;
}

.content .form-page .form-body .plan-select-section .form-row {
    border-bottom: 1px solid #999;
    box-shadow: 0px 16px 5px -13px #999;
}

/*Special cases for Package Descriptions */
.content .form-render .plan-select-section.pkg-description.word-structure .package-container .input-package .tool-tip {
    position: relative;
    display: inline-block;
    color: #000;
    width: 45%;
    background: transparent;
    white-space: normal;
    top: 0;
    border: none;
    margin: 0 10px;
    text-align: left;
}
.content .form-render .plan-select-section.pkg-description.word-structure .package-container .input-package {
    height: auto;
}
.content .form-render .plan-select-section.pkg-description.word-structure .package-container .input-package img {
    margin: 0 auto;
    margin-top: 10px;
    display: inline-block;
    vertical-align: top;
}
.content .form-render .plan-select-section.pkg-description.word-structure .package-container .input-package .details {
   display: none;
}
.content .form-render .plan-select-section.pkg-description.word-structure .package-container .input-package:hover {
    background-color: #e5e5e5;
    border: 1px solid #000;
}

.admin-page #form-side-cart-container {
    right: 10px;
}

.management-data-entry {
    max-width: 100%;
}

.content .form-render .form-step-navigation {
    display: none;
}

.content .form-render .form-body .form-row .value .file-upload-label > input {
    display: none;
}

/* Responsive */
@media only screen and (width: 1024px) {
    .content .form-render .form-body .plan-select-section .form-row .instructions-container {
        max-width: 100%;
        width: 60.9%;
    }
}
@media only screen and (max-width: 1024px) {
    .content .form-side-cart {
        border: none;
    }
    
    .content #form-side-cart-container.layout-adjust {
        width: 100%;
        right: 0;
    }
    
    .content .main-content #side-cart-sub-total {
        border: none;
        border-top: 1px solid #333;
    }
    .content #form-side-cart-container .arrow-down {
        display: block;
    }
    
    .content .item-name, .content .item-price, .content .sub-total-text, .content .sub-total-value {
        font-size: 19px;
    }
    
    .content #form-side-cart-container .arrow-down {
        top: 0;
    }
    
    .content .form-side-cart h2:before {
        top: 13px;
        background-image: none;
    }
    
    .content #form-side-cart-container .arrow-up {
        top: 30px;
    }
    
    .content #side-cart-sub-total {
        padding: 1em;
        margin-top: 0;
        border-radius: 2px;
        border: none;
        border-top: 1px solid #333;
    }
    
    .content #form-side-cart-container {
        position: fixed;
        left: 0;
        bottom: 0;
        top: auto;
        right: 0;
        z-index: 10000;
        width: 100%;
        margin: 0 auto;
        border-radius: 0;
    }
    
    .content #form-side-cart-container .form-side-cart .expand-side-cart, 
    .content #side-cart-sub-total, .form-side-cart {
        overflow: hidden;
        border: 1px solid #4a87bc;
        border-radius: 2px 2px 0 0;
        background-color: #eff4f9;
    }
    
    .content .form-side-cart h2 {
        font-size: 25px;
        border-radius: 0;
        font-family: 'Arial';
    }
}

@media only screen and (max-width: 900px) {
    .content .form-render .plan-select-section .package-container .input-package img {
        max-height: 1000%;
    }
    
    .content .form-render .plan-select-section .package-container {
        display: block;
    }
    
    .content .form-render .form-body .plan-select-section .form-row .instructions-container {
        display: block;
        max-height: 100%;
        overflow: visible;
        max-width: 100%;
        width: 100%;
        height: 185px;
        margin-bottom: 0;
    }
    
    .content .form-render .form-body .plan-select-section .form-row .instructions-container ul {
        margin-top: .5rem;
        max-height: 100%;
        overflow: visible;
        margin: 0 auto;
        padding-left: 12%;
    }
    
}

@media only screen and (max-width: 850px) {
    .content .form-render .plan-select-section .package-container .input-package {
        float: none;
    }
}

@media only screen and (max-width: 768px) {
    .content .form-render .form-body .products-container .tool-tip, 
    .content .form-render .form-body .location-container .tool-tip, 
    .content .form-render .form-body .address-container .tool-tip, 
    .content .form-render .form-body .form-row .value .tool-tip {
        display: block;
    }
    
    .content .product-selector .products .product {
        opacity: 1;
    }
    
    .content .form-render .plan-select-section .package-container .input-package .details {
        transform: translate3d(0%, 0%, 0);
        position: relative;
    }
    
    .content .form-render .plan-select-section .package-container .input-package {
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .content .main-content .product-selector ul.category-list {
        margin-left: 0;
        width: 100%;
        display: block;
    }
    
    .content .main-content .product-selector ul.category-list > li {
        float: none;
        text-align: center;
    }
}

@media only screen and (max-width: 640px) {
    .content .main-content .form-render .form-step-navigation {
        display: none;
        height: auto;
    }
    
    .content .main-content .form-render .form-step-navigation ul li:last-child {
        padding: 0;
    }
    
    .content .main-content .form-render .form-step-navigation ul li h2 {
        text-align: center;
    }
    
    .content .main-content .form-render .form-step-navigation ul li h2:after {
        content: none;
    }

    .content .product-selector .products .product {
        width: 45%;
    }
    
    .content .product-selector .product-view .product .product-image,
    .content .product-selector .product-view .product .column-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        margin-top: 10px;
    }
    
    .form-render .form-with-side-cart .form-with-product-container .button-row {
        margin-top: 0;
    }
}

@media only screen and (max-width: 480px) {
    .content .form-render .form-body .plan-select-section .form-row .instructions-container {
        height: 205px;
    }
    
    body .form-render .form-body .form-row h3 {
        font-size: 22px;
        transition: 0.2s linear;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -o-transition: 0.2s linear;
    }
    
    .content .form-page h1 {
        transition: 0.2s linear;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -o-transition: 0.2s linear;
        font-size: 24px;
    }
    
    .form-header {
        text-align: center;
        margin-top: 10px;
        transition: 0.2s linear;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -o-transition: 0.2s linear;
    }
    
    .content .product-selector .products .product .thumbnail {
        height: auto;
        transition: 0.2s linear;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -o-transition: 0.2s linear;
    }
}

@media only screen and (max-width: 400px) {
    .content #form-side-cart-container .arrow-up {
        top: 0px;
    }
}

@media only screen and (max-width: 359px) {
    .content .product-selector .products .product {
        width: 100%;
    }
}