/*------------------------------------------------------------------------------
  NHMVC Application CSS
------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------
  Misc
------------------------------------------------------------------------------*/

html {
  background-color: #f8f8f8;
}

body {
  background-color: #ffffff;
  background-image: url('/application/images/towequip_background.png');
  background-position: center center;
  background-size: 50vmin;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1, h2, h3,
a,
.text-towequip-red {
  color:            #aa0000;
}

.bg-towequip-red {
  background-color: #aa0000;
}

.h-3l {
  height:           3rem;
}

textarea.placeholder-center::placeholder {
  text-align:       center;
}

@media print {

  html {
    background-color: #ffffff;
    background-image: none;
  }

}

.order_type_order {
  background-color: rgba(0, 123, 255, 0.2);
  border-color:     rgba(0, 123, 255, 1);
  color:            rgba(0, 123, 255, 1);
}

.order_type_quote {
  background-color: rgba(108, 117, 125, 0.2);
  border-color:     rgba(108, 117, 125, 1);
  color:            rgba(108, 117, 125, 1);
}

.order_type_credit {
  background-color: rgba(255, 193, 7, 0.2);
  color:            rgba(204, 154, 6, 1);
  color:            rgba(204, 154, 6, 1);
}



/*------------------------------------------------------------------------------
  Footer
------------------------------------------------------------------------------*/

#footer {
  background-color: #f8f8f8;
  border:           1px solid #aaaaaa;
  border-width:     1px 0px 0px 0px;
}

#footer a {
  color:            #000000;
}



/*------------------------------------------------------------------------------
  Main Nav
------------------------------------------------------------------------------*/

#main_nav {
  margin-bottom:    2.5vw;
  background-color: #ffffff;
  border:           1px solid #aaaaaa;
  border-width:     0px 0px 1px 0px;
}

#main_nav .nav-link,
#notifications a {
  color:            #000000;
}

#main_menu_models .nav-link {
  display:          flex;
  align-items:      center;
}

#main_nav .nav-link.active {
  font-weight:      bold;
}

#notifications a:hover {
  text-decoration:  none;
}

#main_nav .navbar-toggler {
  color:            #000000;
  border-color:     #000000;
}

#notifications {
  box-sizing:       border-box;
  position:         absolute;
  top:              0.4rem;
  width:            100%;
  margin-left:      -1rem;
  pointer-events:   none;
}

#notifications a {
  pointer-events:   auto;
}

#home_link img {
  height:           4rem;
  margin-right:     0.75rem;
}


@media all and (min-width: 992px) {
  #notifications {
    position:         relative;
    top:              auto;
    width:            auto;
    margin-left:      0rem;
  }
}



/*------------------------------------------------------------------------------
  Home
------------------------------------------------------------------------------*/

#home .alert {
  font-size:        1rem;
  line-height:      1.5rem;
}

#home .alert big {
  font-size:        1.4rem;
  line-height:      2rem;
}

#side_panel,
#categories_panel {
  margin-top:       -2.5vw;
  margin-bottom:    -3rem;
}

#side_panel h2 {
  font-size:        1rem;
}

#categories_panel ul {
  list-style-type:  none;
}

#categories_panel li a,
#categories_panel li a:visited {
  display:          block;
  width:            100%;
  color:            #ffffff !important;
  padding:          0.35rem 0.2rem 0.35rem 0.2rem;
  font-size:        1rem;
  line-height:      1.25rem;
}

#categories_panel li a:hover,
#categories_panel li a:active {
  background-color: #0000ee;
  background-image: linear-gradient(#4444ee, #0000ee);
  color:            #ffffff !important;
  text-decoration:  none;
}


#home_carousel {
  margin:           -2.5vw 0rem 2.5vwrem 0rem;
  border:           1px solid #aaaaaa;
  border-width:     1px 0px 1px 0px;
  background-color: #ffffff;
}

.carousel {
  margin:           -2.5vw 0rem 6rem 0rem;
}

.carousel-indicators {
  bottom:           -2.5rem;
  margin-bottom:    0px;
}

.carousel-indicators li {
  background-color: #666666;
}

.carousel-indicators li.active {
  background-color: #aa0000;
}

.carousel_image {
  text-align:       center;
}

.carousel_image img {
  height:           7rem;
  max-width:        100%;
}

.carousel h1 {
  padding:          2rem 0rem;
  font-size:        1.7rem;
  line-height:      2.2rem;
}


@media (min-width: 576px) {

  .carousel_image img {
    height:           8rem;
  }

  .carousel h1 {
    font-size:        2.4rem;
    line-height:      3rem;
  }

}


@media (min-width: 768px) {

  #home_carousel {
    margin:           -2.5vw 0rem 5rem 0rem;
  }

  .carousel {
    margin:           -2.5vw 0rem 6rem 0rem;
  }

  .carousel_image {
    text-align:       right;
  }

  .carousel_image img {
    height:           10.8rem;
  }

  .carousel h1 {
    border-width:     0px;
    font-size:        1.8rem;
    line-height:      2.4rem;
  }

}


@media (min-width: 992px) {

  .carousel_image img {
    height:           14.4rem;
  }

  .carousel h1 {
    font-size:        2.4rem;
    line-height:      3rem;
  }

}


@media (min-width: 1200px) {

  .carousel_image img {
    height:           18rem;
  }

  .carousel h1 {
    font-size:        3rem;
    line-height:      3.5rem;
  }

}



/*------------------------------------------------------------------------------
  Categories/Parts
------------------------------------------------------------------------------*/

.part {
  cursor:           pointer;
}

.part .card,
.part_thumbnail {
  transition:       box-shadow 0.5s;
  background-color: #f0f0f0 !important;
}

.part:hover .card,
.part.selected .card {
  background-color: #aa0000 !important;
  color:            #ffffff;
}

.part:hover .card,
.part_thumbnail:hover {
  box-shadow:       1px 1px 5px 5px rgba(0, 0, 0, 0.25);
}

.part .card-footer {
  background-color: transparent !important;
  font-size:        1rem;
  line-height:      1.2rem;
  font-weight:      bold;
}

.part:hover .card-footer a,
.part.selected .card-footer a {
  color:            #ffffff;
  text-decoration:  none;
}

.part .card-body {
  background-position: center;
  background-repeat: no-repeat;
  background-size:  cover;
  padding-top:      0px;
  padding-left:     0px;
  padding-right:    0px;
  border-radius:    0.25rem 0.25rem 0 0;
  background-color: #ffffff !important;
}

.part_thumbnail {
  border:           1px solid rgba(0, 0, 0, 0.125);
  border-radius:    0.25rem;
  background-color: #ffffff !important;
}


@media all and (min-width: 450px) {

  .part .card-footer {
    font-size:        1.2rem;
    line-height:      1.5rem;
  }

}



/*------------------------------------------------------------------------------
  Parts
------------------------------------------------------------------------------*/

#parts_filter {
  background-color: #f8f8f8;
  color:            #ffffff;
  margin-top:       -2.5vw;
  margin-bottom:    2.5vw;
  border:           1px solid #aaaaaa;
  border-width:     0px 0px 1px 0px;
}

#parts_filter .btn,
#parts_filter input {
  padding-bottom:   0.1rem;
  margin-bottom:    0.175rem;
}

.part_divider {
  background-color: #aa0000;
  height:           0.5rem;
  width:            100%;
}

#part_specials {
  position:         absolute;
  top:              0px;
  right:            0px;
  text-align:       right;
  pointer-events:   none;
}

#part_specials img {
  margin:           0rem 0rem 2rem 2rem;
  max-width:        25%;
  max-height:       25%;
}

#part_image {
  max-height:       50vh;
}

#part_description {
  border-radius:    1rem;
  color:            #ffffff;
  background-color: #aa0000;
}

#part_description .alert {
  text-align:       center;
}

#part_details {
  border:           0.5rem solid #aa0000;
  background-color: #ffffff;
  color:            #000000;
  border-radius:    1rem 1rem 0rem 0rem;
}

#part_buy {
  position:         relative;
  bottom:           0px;
  left:             0px;
  padding:          1rem;
}

#part_price {
  font-weight:      bold;
  font-size:        1.2rem;
  line-height:      2.2rem;
}


@media all and (min-width: 450px) {

  #part_price {
    font-size:        2rem;
  }

}



/*------------------------------------------------------------------------------
  Cart
------------------------------------------------------------------------------*/

.cart_item {
  border-color:     rgba(0, 0, 0, 0.2);
}

.cart_item_image img {
  max-height:       7rem;
}

.cart_item .card-header {
  font-weight:      bold;
}

#courier_choose {
  /* background-color: #333333; */
}

#courier_choose .bg-primary {
  /* background-color: #102b4e !important; */
}

.cart_courier.disabled {
  opacity:          0.5;
}

.cart_courier img {
  max-height:       6rem;
}

@media all and (min-width: 576px) {
  .cart_item .card-header {
    border-radius:    0 calc(.25rem - 1px) 0 calc(.25rem - 1px);
    border-left:      1px solid rgba(0,0,0,.125);
  }
}

.cart_item .card-footer {
  margin-bottom:    0px;
}

@media all and (min-width: 576px) {
  .cart_item .card-footer {
    border-radius:    calc(.25rem - 1px) 0 calc(.25rem - 1px) 0;
    border-left:      1px solid rgba(0,0,0,.125);
  }
}

.cart_item .quantity {
  max-width:        4rem;
}

a.btn-paypal {
  color:            #003087 !important;
  background-color: #ffc439;
}

a.btn-paypal:hover {
  color:            #003087 !important;
  background-color: #f2ba36;
}