/*=============================================================================
  BUILDER PAGE CSS (NOT NEEDED ON TACKLE)

  * CSS has not been improved on this page - Awaiting work
=============================================================================*/

.builder_title {
    margin: 0;
    line-height: var(--font-line-height-04);
}

.builder_functions {
    line-height: var(--font-line-height-02);
}

.builder_functions>.btn {
    color: var(--black);
    padding-top: 0;
    padding-bottom: 0;
}

.builder_functions .dropdown-menu {
    float: left;
    position: absolute;
    line-height: var(--font-line-height-06);
}

.builder_functions-more {
    background-color: var(--white);
    padding: 0 var(--spacing-02);
    border: 0;
}

@media (min-width: 768px) {

    .builder_title {
        line-height: var(--font-line-height-04);
    }

    .builder_functions>.btn {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .builder_functions-more {
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

/* Dashboard (Builder) */
.dashboard {
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-header {
    padding-bottom: var(--spacing-06);
    margin-top: var(--spacing-06);
    border-bottom: var(--border-weight-01) solid var(--gray-100);
}

.dashboard-header .dropdown {
    margin-left: auto;
}

.dashboard-header-more {
    padding: var(--spacing-01);
}

.dashboard-header-text {
    margin: var(--spacing-06) 0 0;
}

.dashboard-components {
    margin-top: var(--spacing-10);
}

.dashboard-components>* {
    margin-bottom: var(--spacing-06);
}

.dashboard-cell {
    height: 100%;
    border: var(--border-weight-01) solid var(--gray-100);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.dashboard-cell-upper {
    padding: 7px 7px 16px;
    flex: 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.dashboard-cell-imgwrap {
    display: inline-block;
}

.dashboard-cell-img {
    width: 100%;
    max-width: 180px;
}

.dashboard-cell-img.is-racquet {
    padding-left: 21%;
    padding-right: 21%;
}

.dashboard-cell-name {
    margin: auto 0 0;
    text-align: center;
    font-size: var(--font-size-50);
    min-height: 48px;
}

.dashboard-cell-optional {
    position: absolute;
    top: var(--spacing-02);
    right: var(--spacing-02);
    display: inline-block;
    font-size: var(--font-size-25);
    padding: var(--spacing-01) var(--spacing-02);
    background-color: var(--gray-100);
    line-height: var(--font-line-height-04);
    border-radius: var(--border-radius-sm);
}

.dashboard-cell-lower {
    border-top: var(--border-weight-01) solid var(--gray-100);
    display: flex;
    flex: 0 0 auto;
}

.dashboard-cell-btn {
    flex: 1 0;
    line-height: var(--font-line-height-02);
}

.dashboard-cell-btn+.dashboard-cell-btn {
    border-left: var(--border-weight-01) solid var(--gray-100);
}

.dashboard-cell-btn button {
    display: block;
    width: 100%;
    background-color: transparent;
    padding: var(--spacing-02) var(--spacing-04);
    border: 0;
    cursor: pointer;
}

.dashboard-cell-btn .icon {
    display: inline-block;
}

@media (min-width: 480px) {

    .dashboard-cell-upper {
        padding: var(--spacing-04) 15px;
    }

    .dashboard-cell-img {
        max-width: 210px;
    }
}

@media (min-width: 576px) {

    .dashboard-cell-upper {
        padding: var(--spacing-06) 23px var(--spacing-04);
    }
}

.dashboard-summary {
    position: sticky;
    bottom: 0;
    background-color: var(--white);
    text-align: right;
}

.dashboard-summary.is-stuck {
    box-shadow: 0 5px 50px -15px rgba(0, 0, 0, 0.3);
}

.dashboard-summary-inner {
    max-width: 1152px;
    padding-top: var(--spacing-04);
    padding-bottom: var(--spacing-04);
    margin: auto;
    border-top: var(--border-weight-01) solid var(--gray-100);
}

.is-stuck .dashboard-summary-inner {
    border: 0;
}

.dashboard-summary-total {
    font-size: var(--font-size-200);
    margin-right: var(--spacing-06);
}

.dashboard-drop {
    padding: 0;
}

.dashboard-drop>* {
    padding: 0 var(--spacing-04);
}

.dashboard-drop .dropdown-item {
    padding: var(--spacing-04) var(--spacing-06) var(--spacing-04) 0;
    border-top: var(--border-weight-01) solid var(--gray-100);
}

.dashboard-drop>*:first-child .dropdown-item {
    border-top: 0;
}

.dashboard-drop .icon {
    display: inline-block;
    margin-right: var(--spacing-04);
}

.dashboard-drop .dropdown-item>* {
    vertical-align: middle;
}

/* Component Page */
.component_page {
    max-width: 1200px;
    padding-top: var(--spacing-06);
    margin: 0 auto;
}

.component_page-prev {
    padding: 0 var(--spacing-03) 0 6px;
}

.component_page-back_btn {
    background: var(--white);
    border: 0;
}

.component_page-back_btn .icon {
    display: inline-block;
    margin-right: var(--spacing-02);
}

@media (min-width: 576px) {

    .component_page-prev {
        padding-left: var(--spacing-03);
        padding-right: 18px;
    }
}

@media (min-width: 768px) {

    .component_page-prev {
        padding-left: 18px;
        padding-right: var(--spacing-06);
    }
}

/* Summary Panel */
.build_summary {
    padding-bottom: 160px;
}

.build_summary-header {
    padding: var(--spacing-04) var(--spacing-03);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    display: flex;
}

.build_summary-header h3 {
    line-height: var(--font-line-height-02);
    margin: 0;
}

.build_summary-header .icon {
    margin-left: auto;
    background-color: var(--white);
    border: 0;
}

.build_summary-comp {
    padding: var(--spacing-06) var(--spacing-03) 0;
}

.build_summary-comp-cell {
    display: flex;
    padding: var(--spacing-04) 0;
    border-top: var(--border-weight-01) solid var(--gray-100);
}

.build_summary-comp-cell:last-child {
    border-bottom: var(--border-weight-01) solid var(--gray-100);
}

.build_summary-comp-cell-img {
    flex: 0 0 64px;
    margin-right: var(--spacing-04);
}

.build_summary-comp-cell-img img {
    width: 64px;
}

.build_summary-comp-cell-img .is-racquet {
    padding-left: 14px;
    padding-right: 13px;
}

.build_summary-comp-cell-name {
    font-size: var(--font-size-50);
    font-weight: var(--font-weight-bold);
    flex: 1 1;
    line-height: var(--font-line-height-04);
}

.build_summary-comp-cell-name p {
    margin: 0;
}

.build_summary-cell-optional {
    display: inline-block;
    font-size: var(--font-size-25);
    font-weight: var(--font-weight-reg);
    padding: var(--spacing-01) var(--spacing-02);
    background-color: var(--gray-100);
    line-height: var(--font-line-height-04);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-02);
}

.build_summary-comp-cell-end {
    margin-left: var(--spacing-04);
}

.build_summary-info {
    padding: 0 var(--spacing-03);
    margin-top: var(--spacing-06);
}

.build_summary-info-note {
    font-size: var(--font-size-50);
    margin: var(--spacing-02) 0 0;
}

.build_summary-extra_info {
    padding-bottom: var(--spacing-06);
    border-bottom: var(--border-weight-01) solid var(--gray-100);
    margin-top: var(--spacing-04);
}

.build_summary-extra_info .form-group:last-child {
    margin-bottom: 0;
}

.build_summary-extra_info .form-control {
    text-transform: uppercase;
}

.build_summary-order {
    padding: 0 var(--spacing-03) var(--spacing-06);
    margin-top: var(--spacing-06);
}

.build_summary-order-box {
    border: var(--border-weight-01) solid var(--gray-100);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-04);
}

.build_summary-order-total:not(:first-child) {
    border-top: var(--border-weight-01) solid var(--gray-100);
}

.build_summary-order-sub,
.build_summary-order-total {
    padding: var(--spacing-04);
}

.build_summary-order-row {
    display: flex;
}

.build_summary-order-row+.build_summary-order-row {
    margin-top: var(--spacing-02);
}

.build_summary-order-row span {
    margin-left: auto;
}

.build_summary-order-value {
    font-weight: var(--font-weight-bold);
    color: var(--teal);
}

.build_summary-order-btn {
    margin-top: var(--spacing-06);
}

/* Wish List Panel */
.build_summary-wish_panel {
    position: absolute;
    top: 0;
    left: -100%;
    background-color: var(--white);
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition-timing-function: ease-in-out;
    transition-duration: .3s;
    transition-property: left, visibility;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 3;
}

.build_summary-wish_panel.is-shown {
    left: 0;
    visibility: visible;
}

.build_summary-wish_panel-content {
    padding: var(--spacing-06) var(--spacing-03) var(--spacing-04);
}