﻿.subCartPage {
  margin-bottom: 45px;
}

.subCartPage .formWrap {
  padding: 20px 15px;
  background-color: #CEDFEA;
  border: 1px solid #000;
  border-radius: 9px;
}

.subCartPage .formWrap input,
.subCartPage .formWrap select {
  border: none;
}

.subCartPage .formWrap label:not(.showLabel) {
  display: none;
}

.subCartPage .formHeader {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
  border-bottom: 1px solid #FFF;
}

.subCartPage .leftPanel {
  margin-bottom: 30px;
}

.subCartPage .backBtnWrap {
  padding-top: 35px;
}

.subCartPage .cart {
  padding: 30px 15px;
  color: #FFF;
  background: linear-gradient(180deg, var(--brandLightBlue) 4.6%, var(--brandDarkBlue) 104.6%);
  border: 1px solid #000;
  border-radius: 9px;
}

.subCartPage .cartHeader {
  margin-bottom: 25px;
  font-weight: 800;
  font-size: 26px;
}

.subCartPage .planDetails {
  padding: 18px;
  font-size: 10px;
  font-weight: 500;
  background-color: #00629C;
  border: 1px solid #FFF;
  border-radius: 10px;
}

.subCartPage .planDetails > *:not(:last-child) {
  margin-bottom: 10px;
}

.subCartPage .planRow {
  display: flex;
  justify-content: space-between;
}

.subCartPage .planServiceName {
  flex: 1;
}

.subCartPage .planServiceName .name {
  font-size: 15px;
  font-weight: 700;
}

.subCartPage .planFee .name {
  margin-bottom: 4px;
}

.subCartPage .planServiceName .planDesc {
  font-size: 9px;
}

.subCartPage .planServicePrice {
  flex: 0 1 115px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.subCartPage .includes {
  font-size: 10px;
}

.subCartPage .includes ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.subCartPage .includes li::before {
  content: "✓";
}

.subCartPage .upsells {
  padding-top: 20px;
}

.subCartPage .orderSummary {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #FFF;
}

.subCartPage .cartSectionHeader {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}

.subCartPage .cartRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.subCartPage .cartRow .left {
  flex: 1;
  display:flex;
}

.subCartPage .cartRow .left input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  position: relative;
  top: -1px;
  border: 1px solid #FFF;
}

.subCartPage .cartRow .left input[type="checkbox"]:not(:checked) {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
}

.subCartPage .cartRow .right {
  flex: 0 1 135px;
  text-align: right;
}

.subCartPage .unselected .right {
  color: #FFFFFF80;
}

.subCartPage .right .renewal {
  font-size:11px;
}

.subCartPage .cartRow .itemDesc {
  font-size: 9px;
  font-weight:500;
}

.subCartPage .totalRow {
  padding-left:0;
  font-size: 15px;
  font-weight: 700;
}

.subCartPage .formBtnRow {
  padding-top:20px;
  text-align:center;
}

.subCartPage .formBtnRow .btn {
  font-size:18px;
  text-transform:none;
}


.subCartPage .info-wrapper {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
  cursor: pointer;
}

.subCartPage .info-icon {
  color: #ff4500;
  font-size: 14px;
}

.subCartPage .info-icon img {
  width: 13px;
  height: auto;
  position: relative;
  top: 1px;
}

.subCartPage .tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  width: 200px;
  position: absolute;
  top: 160%;
  left: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
  transform: translateX(-46.5%);
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  justify-content: center;
}

.subCartPage .tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

.subCartPage .info-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}





@media screen and (min-width:960px) {
  .subCartPage {
    display: flex;
    justify-content: space-between;
    align-items:center;
  }

  .subCartPage .leftPanel {
    flex: 1;
    padding-right: 60px;
  }

  .subCartPage .rightPanel {
    flex: 0 1 425px;
  }
  /*.subCartPage .cart {
    position: sticky;
    top: 123px;
    padding: 40px;
    border-radius: 20px;
  }*/
}
