/* 
/ Page: Car Clearance
/ Project: HOA Auto import
/ --------------------------
/ Creator:  Sharia.Design 👽
/ Web: https://Sharia.Design/ 💻
/ year: 2021 ⏳
*/


/* Page: Clearance */
.header {
  border-bottom: 1px solid var(--dark-3);
}

.page-clearance {
  margin: 83px 0 0 0;
}

.clearance-page {
  background: var(--white);
  overflow  : hidden;
}

.clearance-title {
  margin   : 0;
  font-size: 29px;
  color    : var(--black);
}

.clearance-hr {
  margin-top   : 29px;
  width        : 100%;
  border       : none;
  border-bottom: 1px solid var(--dark-2);
}

.clearance-container {
  margin-top     : 56px;
  width          : 100%;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  overflow       : hidden;
}

.clearance-form-container {
  width: calc(100% - 360px - 38px);
}

.clearance-form {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  padding-bottom : 11px;
  margin-bottom  : 22px;
  border-bottom  : 1px solid var(--dark-3);
}

.form-selects-container {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
}

.clearance-labels-container {
  padding-top : 11px;
  margin-right: 22px;
}

.cl-label {
  margin-bottom: 38px;
  display      : block;
  cursor       : pointer;
}

/* Custom Selects */
#clearance-page .select {
  width        : 140px;
  margin-bottom: 22px;
}

/* #end Custom Selects */

/* Checkboxes */
.cl-check-item {
  margin-bottom: 22px;
}

.cl-check-item:last-child {
  margin-bottom: 0;
}

.cl-check-label {
  margin  : 0;
  padding : 0;
  position: relative;
  cursor  : pointer;
  width   : 100%;
  display : block;
  opacity : .83;
}

.cl-check-label:hover {
  opacity: 1;
}

.cl-check-label:before,
.cl-check-label::after {
  transition        : var(--dur) var(--bzr);
  -webkit-transition: var(--dur) var(--bzr);
  -moz-transition   : var(--dur) var(--bzr);
  -ms-transition    : var(--dur) var(--bzr);
  -o-transition     : var(--dur) var(--bzr);
}

.cl-check-label:before {
  content              : '';
  position             : absolute;
  top                  : 8px;
  right                : -47px;
  width                : 22px;
  height               : 22px;
  border               : 1px solid var(--dark);
  background           : var(--white);
  cursor               : pointer;
  box-shadow           : none;
  border-radius        : 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius   : 4px;
  -ms-border-radius    : 4px;
  -o-border-radius     : 4px;
}

.cl-check-label:after {
  content   : '\2713';
  position  : absolute;
  top       : 9px;
  right     : -44px;
  font-size : 22px;
  color     : var(--white);
  text-align: center;
  opacity   : 0;
}

.cl-check-label:hover:before {
  border    : 1px solid var(--blue);
  box-shadow: 0px 0px 11px rgba(17, 64, 200, 0.38);
}

.cl-checkbox:checked+.cl-check-label:before {
  background: var(--blue);
  border    : 1px solid var(--blue);
  box-shadow: 0px 0px 11px rgba(17, 64, 200, 0.38);
}

.cl-checkbox:checked+.cl-check-label:after,
.cl-check-label:hover:after {
  opacity: 1;
}

/* Checkbox Logic: */
.cl-checkbox {
  display: none;
}

.cl-checkbox:checked+.cl-check-label:before {
  background: var(--blue);
  border    : 1px solid var(--blue);
}

/* #end Checkbox Logic: */


.cl-label--txt {
  margin-left: 5px;
  display    : inline-block;
  font-size  : 14px;
  color      : var(--dark);
}

.cl-label--icon {
  width         : 38px;
  height        : 38px;
  vertical-align: middle;
}

.cl-wheel {
  background: url(../icons/wheel.svg);
}

.cl-hybrid {
  background: url(../icons/calc-hybrid.svg);
}

.cl-electro {
  background: url(../icons/calc-electro.svg);
}

/* #end Checkboxes */

.clearance-form-footer {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.clearance-result {
  margin: 2px 22px 22px;
  padding: 29px 22px;
  background: var(--white);
  box-shadow: 0px 4px 22px rgba(29, 31, 37, 0.22);
}

/* Results: */
.cl-result-list {
  margin: 0;
}
.cl-result-item {
  margin-bottom: 22px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #434650;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cl-result-item--name {
  margin-right: 69px;
  font-size: 14px;
  color: var(--dark-2);
  white-space: nowrap;
}
.cl-result-item--value {
  position: relative;
  padding-right: 11px;
  text-align: right;
  font-size: 16px;
}
.cl-result-item--value:after {
  content: '\20BE';
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  font-weight: bold;
  font-family: dejavu;
  color: var(--dark-2);
}
.cl-result-sum {
  margin-top: 29px;
  font-size: 22px;
  font-weight: lighter;
  color: var(--blue);
}
.cl-result-sum strong {
  position: relative;
  padding-right: 11px;
  font-size: 38px;
  font-weight: bold;
}
.cl-result-sum strong:after {
  content: '\20BE';
  position: absolute;
  top: 22px;
  right: -22px;
  font-size: 29px;
  color: var(--blue);
  font-weight: lighter;
}

/* :Results */


.cl-call {
  font-size: 12px;
  color: var(--dark);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dark);
  will-change: transform;
}
.cl-phone-icon {
  margin-right: 4px;
  background: url(../icons/phone-16.svg);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.cl-call:hover {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}
.cl-call:active {
  transform: scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform: scale(.98);
  -ms-transform: scale(.98);
  -o-transform: scale(.98);
}

.cl-calculate {
  line-height: 54px;
  padding: 0 29px;
  text-align: center;
  background: var(--blue);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0px 7px 11px rgba(14, 50, 155, 0.22);
  will-change: transform;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.cl-calculate:hover {
  background: var(--dark);
}
.cl-calculate:active {
  transform: scale(.98);
  -webkit-transform: scale(.98);
  -moz-transform: scale(.98);
  -ms-transform: scale(.98);
  -o-transform: scale(.98);
}

.cl-calc-icon {
  margin-left: 11px;
  background: url(../icons/calc-w-22.svg);
  width: 22px;
  height: 22px;
  vertical-align: middle;
}


/* #end Page: Clearance */


@media all and (max-width: 1200px) {
  .clearance-title {
    line-height: 122%;
    font-size: 22px;
  }
  .cb-container,
  .clearance-form-footer,
  .clearance-form,
  .clearance-container {
    flex-direction: column;
  }
  .cl-calculate,
  .clearance-form-container {
    width: 100%;
  }
  .form-selects-container {
    margin-top: 29px;
    width: 100%;
    justify-content: flex-start;
  }
  .cl-call {
    margin-bottom: 11px;
  }
  .clearance-result {
    margin: 29px auto 11px auto;
    width: 94%;
  }
  .cb-others {
    margin-left: 0;
    margin-top: 29px;
    min-width: 100%;
  }

}