/* Custom styles financing calc */

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
h4 {
    font-size: 20px;
    margin-top: 15px;
}
.smallSelect{
    top: 7px;left: 197px;
}
.smlInput {
    width: 150px;
    background-color: #fff;
    border: 1px solid rgba(128, 128, 128, 0.5);
    /* border-radius: 7px; */
    padding: 10px;
    font-size: 18px;
    text-align: center;
    margin: 15px 0px;
}
.defInput {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 2px;
    padding: 10px;
    font-size: 18px;
}

.defInput:hover {
    cursor: pointer;
    border: 1px solid rgba(128, 128, 128, 1);
}
.ui-slider .ui-slider-handle {
    background-color: black;
    border-radius: 50%;
    height: 1.2em!important;
    width: 1.2em!important;
    outline: none;
}
.ui-state-disabled span {
  background-color: #303A40 !important;
  opacity: 1;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -0.45em;
    margin-left: -.6em;
}
.ui-slider .ui-slider-handle:hover {
    cursor: pointer;
}
.ui-slider .ui-slider-handle:after{
    content: ' ';
    border: 1px solid #1A1A1A;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: -4.4px;
    top: -4.1px;
}
.ui-slider .ui-slider-handle{
    background-color: #1A1A1A !important;
    transform: translate(3px, -1px);
    height: 15px !important;
    width: 15px !important;
    border-radius: 50% !important;
}
.makeCenter {
    display: block;
    text-align: center;
}

.slider span, .slider div {
    display: inline-block;
}

.slider div {
    width: 100%;
    margin-top: 20px;
    height: 8px;
}

.slider input {
    border: 1px solid rgba(128, 128, 128, 0.5);
    /* border-radius: 7px; */
}

.slider span {
    font-size: 18px;
}

.rowCell {
  margin-bottom: 0;
  padding: 0;
}
#AdvanceSliderMax, #endPaymentSliderMax {
    float: right;
    width: 100px;
}

#AdvanceSliderMin, #endPaymentSliderMin {
    float: left;
    width: 100px;
}

#carAdvancePrice, #carEndPaymentPrice {
    position: relative;
    bottom: 5px;
    margin: 0;
}

.pright {
    text-align: right;
}

.pleft {
    text-align: left;
}

.row {
    display: inline-block;
}
.item:nth-child(9)>h4 {
    margin-bottom: 20px;
}

.tabs {
    margin-top: 50px;
}

.tabs, .tabs h4 {
    text-align: center;
    display: block;
    margin: 10px auto 0 auto;
}

.tabs input {
    display: none;
}

.tabs input:hover {
    cursor: pointer;
}

#carPriceSection, .sectionChooseMonths, .sectionMonthlyPayment {
    text-align: center;
}

#carPriceSection>*:nth-child(1), .sectionChooseMonths>*:nth-child(1), .sectionMonthlyPayment>*:nth-child(1) {
    text-align: right;
    margin: 0 auto 25px auto;
}

#financingCalcForm {
    margin-top: 0;
}

.item.makeCenter.sectionCenter h4 {
    margin: 0;
    margin-bottom: 10px;
}

.item.printHide h4 {
    margin: 50px 0px;
}

#carPriceSection>*:nth-child(2), .monthSelect, #monthlyPay {
    width: 30%;
    margin: 0 auto 25px auto;
}
.financingCalcLogo{
    width: 150px;
    position: absolute;
    left: 430px;
    top: 70px;
}
textarea{
    font-family: Arial;
}
.tabs label {
    display: inline-block;
    padding: 12px;
    font-size: 18px;
    font-weight: bolder;
    border-bottom: #ccc 2px solid;
}

table {
    /* background-color: #f1f1f1; */
    width: 100%;
    margin: 0 auto;
    text-align: right;
    border-collapse: collapse;
    /* box-shadow: -1px 5px 30px 0px rgba(32, 34, 39, 0.2); */
}

/* table, th, td {
    border: 1px solid #fff;
} */

table td {
    padding: 5px
}

.sectionCenter {
    width: 95%;
    margin: 25px auto 0 auto;
}
form .formRow input:hover {
    cursor: pointer;
}

form h4 {
    text-align: center;
    margin: 30px 0px;
}

form textarea {
    max-height: 200px;
}

form .formRow.okBtn {
    text-align: center;
    margin-top: 20px;
}

form .formRow>.defInput {
    margin-bottom: 46px;
}

form button {
    padding: 12px 26px;
    font-size: 18px;
    background: #303A40;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin: 16px 0;
}

form button:hover {
    cursor: pointer;
}
.financingCondContent ul li {
    margin: 10px 0px;
    color: #1b1b1b;
}

@media only screen and (max-width: 765px) {
    .slider div {
        margin-top: 15px;
    }
    #carAdvancePrice, #carEndPaymentPrice {
        padding: 7px 0px;
    }
    #AdvanceSliderMax, #endPaymentSliderMax {
        width: auto;
    }
    #AdvanceSliderMin, #endPaymentSliderMin {
        width: 70px;
    }
}

@media print {
  .sectionCenter{
    margin: 0;
  }

  table {
    margin: 0;
    box-shadow: none;
  }

}
/* KOR: Added for custom image above model selector */
.modelImage{
    display: block;
    width: auto;
    height: 80px;
    margin-bottom: 20px;
}
.model-image-financing{
    width: 200px;
    height: auto;
    display: none;
    margin-bottom: 20px;
}
/* Form common css shared by all forms */
#agencyName {
    display:block;
    width:100%;
}
.forms input[type="tel"] {
    width: 100%;
    height: 43px;
    border: none;
    background-color: #f0f0f0;
    border-radius: 2px;
    color: #1e2a32;
    margin-top: 8px;
    padding: 7px 6px 9px 16px;
}
.forms input[type=checkbox]:checked + label:before {
    margin-right: -9px;
}
.forms input[type=checkbox] + label:before {
    margin-right: -9px;
}
#phonelabel {
    display:block;
}
/* #phoneNum {
    width:75%;
    display:inline-block;
    float:left;
    margin-top: 0;
} */
#phonePrefix {
    width:27%;
    display:inline-block;
    float:left;
    margin-top: 0 !important;
}
#phoneLabelContainer {
    display:block;
}
#phonePerfixLabel {
    width:20%;
    display:inline-block;
    float:left;
}
#phoneNumLabel {
    width:75%;
    display:inline-block;
    float:right;
}
#phonePrefix {
    width:20%;
    display:inline-block;
    float:left;
    margin-top: 0;
}
#agencyNameError {
    margin-top: 10px;
}
.select2-container {
    width:100%!important;
    height:43px;
}
.select2-selection{
    background-color:#f0f0f0!important;
    font-size:16px!important;
    margin-top:7px;
}
.select2-container--default .select2-selection--single {
    height:43px;
    vertical-align:middle;
    padding: 7px 6px 3px 16px;
    border-radius: 0;
    border: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color: #000 transparent transparent transparent;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left:10px;
    top:15px;
}
.select2-selection__clear{
    display:none;
}

/* Updated behavior for new html5 silders (replaced js sliders) */
.sliderContainer {
    width: 100%;
}

.sliderContainer .inputSlider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    direction: ltr;
    margin-top: 20px;
}

.sliderContainer .inputSlider:hover {
    opacity: 1;
}

.sliderContainer .inputSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #E50000;
    cursor: pointer;
    border-radius: 10px;
}

.sliderContainer .inputSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    /* background: #E50000; */
    background-color: black;
    cursor: pointer;
    border-radius: 10px;
}
.disabledSlider.inputSlider::-webkit-slider-thumb,
.disabledSlider.inputSlider::-moz-range-thumb {
    background: #b6b9bb !important;
}

.sliderContainer .inputSlider:disabled, .disabledSlider {
    opacity: .4;
    user-select: none;
    pointer-events: none;
}