/* PC Builder Rules */
main {
    color: #333;
}

.pc-component {
    padding: 10px;
    /* border-radius: 5px; */
    color: #333;
    background: #E5E5E6;
    /* background: #494857; */
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.8rem;
    height: 54px;
    /* display: flex; */
}

.pc-component:hover {
    background-color: #333;
    color: white;
}

.comp-col,
.comp-button {
    padding: 5px 15px;
    border-radius: 3px;
}

.comp-button.selected {
    background-color: var(--theme-color);
    color: white;
}

.comp_add.selected {
    pointer-events: none;
}

.comp_skip {
    background: #333;
    width: fit-content;
    color: white;
    height: 30px;
    padding: 5px 30px;
    margin-right: 30px;
    cursor: pointer;
}

.comp-img img {
    width: 100px;
    height: 100px;
    /* margin: auto; */
    display: block;
}

.choose_component.disabled .comp-col {
    pointer-events: none;
}

.next-box {
    display: flex;
    justify-content: flex-end;
}

.comp-button {
  display: inline-block;
  cursor: pointer;
  color: white;
  border: 1px solid var(--theme-color);
  font-size: 12px;
  padding: 5px 30px;
  font-weight: 500;
  background: var(--theme-color);
  border-radius: 5px;
}
.comp_remove {
    margin-right: 10px;
}

.comp_row {
    display: flex;
    width: 100%;
}

.comp_prod_name {
    height: 100px;
    display: flex;
    align-content: center;
    align-items: center;
    font-weight: 600;
    color: #333;
}

.comp_prod_name a,
.comp_prod_name a:visited,
.comp_prod_name a:link,
.comp_prod_name a:hover {
    color: #333;
}

.pc-component a,
.pc-component a:visited,
.pc-component a:link,
.pc-component a:hover {
    color: #333;
}

.pc-component.active {
    background-color: #333;
    color: white;
}

.pc_total_box {
    height: 64px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 2rem;
}

.pc_checkout_btn {
    height: 44px;
    font-weight: 600;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 3px;
    cursor: pointer;
}

.pc_checkout_button {
    background-color: var(--theme-color);
}

.pc_checkout_button,
.pc_checkout_button:visited,
.pc_checkout_button:link,
.pc_checkout_button:hover {
    color: white;
}

.pc_reset_button {
    background-color: #333;
    color: white;
}

.pc-h1 {
    font-weight: 700;
    font-size: 2.4rem;
    text-align: center;
}

.comp_price {
    height: 75px;
    display: flex;
    align-content: flex-end;
    justify-content: flex-end;
    /* padding-right: 20px; */
    align-items: center;
    font-size: 2rem;
    color: #333;
}

.product_box>.col-2,
.product_box>.col-6,
.product_box>.col-4 {
    /* border-bottom: 2px solid #f4f4f4; */
    padding: 10px;
}

.disabled-active {
    pointer-events: none;
    background-color: var(--theme-color-3);
    color: white;
}

.comp-sel-col {
    padding: 10px;
}

.comp-sel-col img {
    max-width: 100px;
}

.pc_checkout {
    text-align: center;
    font-weight: bold;
    justify-content: center;
}

.choose_component.active .comp_heading {
    font-weight: 600;
}

#chosen_comp_1 {
    background-color: #0073b2;
}

#chosen_comp_2 {
    background-color: #413f77;
}

#chosen_comp_3 {
    background-color: #1a418c;
}

.chosen_comp {
    color: white;
    padding: 10px;
    border-radius: 10px;
}

.components-box h2,
#component_title {
    font-size: 2rem;
}

.components-box {
    margin-right: 20px;
}

.select_comp_count {
    position: absolute;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-style: normal;
    z-index: 1;
    right: -5px;
    top: 0px;
    font-family: Poppins, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8rem;
    background: #ec7a5c;
    color: #fff;
    text-align: center;
}

.choose_component .w-icon-cart:before {
    font-size: 30px;
    /*! padding: 5px; */
    margin-left: 10px;
}

.comp-actions-box {
    display: -webkit-box;
    position: relative;
}

.comp-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.comp-right {}

.config-box {
    padding: 0 25px;
    background-color: #fbf6f2;
    margin-left: 20px;
    min-height: 50vh;
}

#pc_builder_total {
    text-align: right;
}

#pc_configuration {
    padding-bottom: 20px;
}

.pcb_buttons {
    display: flex;
    justify-content: flex-end;
    /* padding-right: 10px; */
}

.compatibility_badge {
    padding: 2px 10px;
    border-radius: 3px;
    background: var(--theme-color-2);
    color: white;
    font-size: 12px;
    display: inline-block;
    width: 140px;
    text-align: center;
    margin-top: 5px;
    cursor: pointer;
}

.unavailable-label {
    width: 140px !important;
    justify-content: center;
    display: inline-flex !important;
}

/* height of top header = 187px */
.components_area {
    max-height: calc(100vh - 187px);
    overflow-y: scroll;
}

.hide-scrollbar {
    scrollbar-width: none;
    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* width */
::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #E5E5E6;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #E5E5E6;
}

body {
    max-height: 150vh;
    overflow-y: scroll;
}

.no-scroll {
    overflow: hidden;
}

.scroll-box {
    overflow: auto;

    /* Firefox */
    scrollbar-width: thin;
    /* auto | thin | none */
    scrollbar-color: #E5E5E6 transparent;
}

/* Chrome, Edge, Safari */
.scroll-box::-webkit-scrollbar {
    width: 3px;
    /* exact width */
    height: 6px;
}

.scroll-box::-webkit-scrollbar-thumb {
    background-color: #E5E5E6;
    ;
    border-radius: 1px;
}

.scroll-box::-webkit-scrollbar-track {
    background: transparent;
}

.fixed-col {
    height: 100vh;
    overflow: hidden;
}

/* Middle column scrolling */
.middle-scroll {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar – Chrome, Edge, Safari */
.middle-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Hide scrollbar – Firefox */
.middle-scroll {
    scrollbar-width: none;
}

/* Hide scrollbar – IE 10+ */
.middle-scroll {
    -ms-overflow-style: none;
}

.vh-100 {
    height: 100vh;
}

.h-100 {
    height: 100%;
}

.middle-scroll {
    scrollbar-width: none;
}

.middle-scroll:hover {
    scrollbar-width: thin;
}

.middle-scroll:hover::-webkit-scrollbar {
    width: 3px;
}

.selected_comp_remove {
    height: 2rem;
    width: 2rem;
    border-radius: 50% !important;
    background: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-bottom: 0 !important;
}

.selected_comp_remove i {
    font-size: 14px !important;
}
.unavailable .comp-img img {
    opacity: 0.4;
}
.unavailable .product-label-group {
  left: 1.2rem;
  top: 4.5rem;
}
.unavailable .product-label {
  font-size: 0.8em;
}
.comp-button.disabled {
  background: #e5e5e6;
  color: gray;
  pointer-events: none;
  border: 1px solid #f2f0f0;
}
/* End of PC Builder Rules */