/* input(3115,24): run-time error CSS1046: Expect comma, found '50'
input(3115,30): run-time error CSS1046: Expect comma, found '/'
input(3115,61): run-time error CSS1046: Expect comma, found '0'
input(3115,65): run-time error CSS1046: Expect comma, found '/' */
/* ===========Icons============= */
@import "icons.css";
@import "site-responsive.css";
/* ===========Icons============= */
@font-face {
    font-family: 'KiaSignatureBold';
    src: url('./fonts/eot/KiaSignatureBold.eot?v=KeMj7sn-s0IVM48qCN3j8BPCtok');
    src: url('./fonts/eot/KiaSignatureBold.eot?v=KeMj7sn-s0IVM48qCN3j8BPCtok&#iefix') format('embedded-opentype'), url('./fonts/OTF/KiaSignatureBold.otf?v=vf3cu0I_W4g0jQDjnzzOV11F0B4') format('opentype'), url('./fonts/woff2/KiaSignatureBold.woff2?v=s8wXIBUEg7X4_ndmB5xpuA4RrOU') format('woff2'), url('./fonts/woff/KiaSignatureBold.woff?v=O-hhbCbN9MimnFrJ2cVMlVCL6YU') format('woff'), url('./fonts/TTF/KiaSignatureBold.ttf?v=FVmf4TOIBX_lHfyh32FMqTNL1_A') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DesignKB';
    src: url('./fonts/DesignKOTF/DesignKB.otf?v=JgznKWj1Hd6Ivh1y5NSKpnDlmEc') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DesignKM';
    src: url('./fonts/DesignKOTF/DesignKM.otf?v=-a5qvkPkO_w_sKOpQ7Auol_E-Mo') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DesignKL';
    src: url('./fonts/DesignKOTF/DesignKL.otf?v=CLEP0DSR-ifB2Gy2FZmD8lyleLI') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KiaSignatureRegular';
    src: url('./fonts/eot/KiaSignatureRegular.eot?v=IK0AOre_H_IwChTEuxywBT1dBRw');
    src: url('./fonts/eot/KiaSignatureRegular.eot?v=IK0AOre_H_IwChTEuxywBT1dBRw&#iefix') format('embedded-opentype'), url('./fonts/OTF/KiaSignatureRegular.otf?v=v-wYMPcVu0EokoYhTZQq0A8oqIA') format('opentype'), url('./fonts/woff2/KiaSignatureRegular.woff2?v=eg-_sK9BC24UhhPB_YpozTGiOc0') format('woff2'), url('./fonts/woff/KiaSignatureRegular.woff?v=aLKTcHnugBPYAUOdx62xNaaIgPw') format('woff'), url('./fonts/TTF/KiaSignatureRegular.ttf?v=JTirizwHzj7SowF4_-qzu-nAH20') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KiaSignatureLight';
    src: url('./fonts/eot/KiaSignatureLight.eot?v=rgGFR9QErvw9c4Akhj6-9opXt2M');
    src: url('./fonts/eot/KiaSignatureLight.eot?v=rgGFR9QErvw9c4Akhj6-9opXt2M&#iefix') format('embedded-opentype'), url('./fonts/OTF/KiaSignatureLight.otf?v=ODFHdiWqzpB7UWF_uLimXMCab4s') format('opentype'), url('./fonts/woff2/KiaSignatureLight.woff2?v=mGGUKy7VjgGj-MdmFsU5cYfKxxw') format('woff2'), url('./fonts/woff/KiaSignatureLight.woff?v=s-W61sje-ywWW1gUUWRe10OGVSI') format('woff'), url('./fonts/TTF/KiaSignatureLight.ttf?v=NbdZ396ReJnNzJsrbtluonBAdGU') format('truetype');
    font-weight: normal;
    font-style: normal;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 9px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(185, 182, 182);
    border-radius: 5px;
}

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

body {
    margin-bottom: 60px;
    font-family: 'KiaSignatureRegular';
    background-color: #fff;
    color: #222222;
    margin-top: 82px;
}

header {
    position: fixed;
    width: 100%;
    z-index: 2;
    top: 0px;
    background-color: #fff;
}

.messge-container {
    position: relative;
    width: 100%;
}

.success-message {
    position: absolute;
    left: 42%;
    top: 17px;
    background-color: #5D7D2B;
    border-radius: 4px;
    padding: 11px 15px;
    color: #fff;
    z-index: 6;
}

.error-message {
    position: fixed;
    left: 38%;
    top: 16%;
    background-color: #ed5b5b;
    border-radius: 4px;
    padding: 5px 14px 14px;
    color: #fff;
    z-index: 7;
}

    .error-message .ka-clear::before {
        vertical-align: middle;
    }

.required-star {
    color: #EA0029;
}

section#page-heading, section#content {
    padding-top: 25px;
    padding-bottom: 18px;
}

.page-heading {
    padding-top: 30px;
    padding-bottom: 18px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 0px;
    color: #05141F;
    text-transform: capitalize;
}

h1 {
    display: inline;
    text-transform: uppercase;
}

h2 {
    display: inline-block;
}

nav.navbar-toggleable-sm.navbar-light.desktop {
    height: 78px;
    box-shadow: 0px 3px 6px #00000029;
    background-color: #fff;
}

.navbar-nav > li > a {
    padding: 0px 15px;
    color: #05141F !important;
}

.navbar-collapse {
    flex-grow: unset;
}

.logo-container {
    margin-top: 20px;
}

.top-menu {
    margin-top: 0px;
    padding: 0px;
    margin-bottom: 0px;
}

.logout-container .ka-notification::before, .logout-container .ka-date::before, .ka-date::before {
    vertical-align: baseline;
    font-size: 25px;
}

.black-bg {
    background-color: #05141F !important;
}

.nav-logo {
    width: 120px;
    float: left;
    height: 38.82px;
}

span.e-delivery {
    font-family: 'DesignKB';
    line-height: 31px;
    display: inline-block;
    margin-top: 1px;
}

    span.e-delivery::before {
        content: "";
        font-size: 20px;
        margin-right: 15px;
        margin-left: 9px;
        border-left: 2px solid #000;
    }

a.navbar-brand {
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.display {
    display: none;
}

.white {
    color: #ffffff;
}

    .white:hover {
        color: #ffffff;
    }

.red {
    color: #EA0029;
}

.black {
    color: #05141F;
}

    .black:hover {
        color: #05141F;
    }

.cursor {
    cursor: pointer;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

.extra-content-hide {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
    margin-left: 6px;
    cursor: pointer;
    z-index: 1;
    vertical-align: middle;
    margin-top: 5px;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 210px;
        background-color: #05141F99;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 8px 12px;
        position: absolute;
        z-index: 1;
        top: 121%;
        left: 50%;
        margin-left: -100px;
    }

span.tooltip-icon {
    background-color: #05141F;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: #fff;
    padding: 0px 6px;
    overflow: hidden;
    font-size: 12px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
/* ===========Custom Checkbox============ */
.checkbox-container {
    position: relative;
    display: inline-block;
    padding-left: 35px;
    margin-bottom: 10px;
}

.custom-checkbox {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: unset;
    color: #05141F;
}

label.custom-checkbox a:hover {
    color: #EA0029;
}
/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Create a custom checkbox */
.checkmark-checkbox {
    position: absolute;
    top: 0px;
    left: -35px;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #cfcfcf;
    border-radius: 2px;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark-checkbox {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark-checkbox {
    background-color: #05141F;
    border: 0px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark-checkbox:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark-checkbox:after {
    left: 6px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* ======================Custome Checkbox================== */
/* Provide sufficient contrast against white background */
a {
    color: #FFFFFF;
    font-size: 16px;
    font-family: 'KiaSignatureRegular';
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.top-menu li.active {
    border-bottom: 4px solid #05141F;
    padding-top: 0px;
    margin-top: 0px;
}

.navbar-expand-sm .navbar-nav .nav-link {
    height: 21px;
    padding-left: 0px;
    padding-right: 0px;
}

.tab-menu {
    display: none;
}

.top-menu li {
    margin: 0px 0px;
    display: inline-block;
}

.logout-container a {
    color: rgba(0, 0, 0, 0.9);
}

.top-menu li:last-child {
    margin: 0px 0px 0px 20px;
}

.top-header a {
    color: #fff;
    text-transform: uppercase;
}

.navbar-collapse.collapse.d-sm-inline-flex.flex-sm-row-reverse {
    margin-top: 1.2rem;
}

.save {
    background-color: #05141F;
    color: #fff;
    border: 1px solid #000;
    height: 46px;
    padding-left: 30px;
    padding-right: 30px;
}

.cancel {
    background-color: #fff;
    color: #05141F;
    border: 1px solid #000;
    margin-right: 10px;
    height: 46px;
    padding-left: 30px;
    padding-right: 30px;
}

a.save {
    background-color: #05141F;
    color: #fff !important;
    border: 1px solid #000;
    height: 46px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 11px;
    cursor: pointer;
}

    a.save:hover {
        text-decoration: underline !important;
    }

a.cancel {
    background-color: #fff;
    color: #05141F !important;
    border: 1px solid #000;
    margin-right: 10px;
    height: 46px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 11px;
    cursor: pointer;
}

    a.cancel:hover {
        text-decoration: underline !important;
    }

.disabled {
    background-color: #05141F66;
    border: 1px solid #05141F66;
}

a.create-cat-btn.disabled {
    background-color: #05141F66;
    border: 1px solid #05141F66;
    cursor: not-allowed;
}

.cancel:focus, .cancel:active, .save:focus, .save:active {
    border-radius: 0px;
    outline: none;
    border: 1px solid #000;
}

.cancel:hover, .save:hover {
    text-decoration: underline;
    outline: none;
}

textarea.custom-text-box {
    width: 100%;
    height: 54px;
    border: 1px solid #05141F33;
    padding-left: 10px;
    padding-right: 10px;
    color: #05141F;
    resize: none;
    outline: none;
    margin-top: 20px;
    padding-top: 8px;
}

    textarea.custom-text-box:focus-visible {
        border: 1px solid #05141F33;
    }

input.custom-text-box {
    width: 100%;
    height: 30px;
    border: 1px solid #05141F33;
    padding-left: 10px;
    color: #05141F99;
}

.field-label {
    margin-bottom: 5px;
}
/*=========================Default Font======================*/
.f-28 {
    font-size: 28px;
}

.f-24 {
    font-size: 24px;
}

.f-23 {
    font-size: 23px;
}

.f-22 {
    font-size: 22px;
}

.f-21 {
    font-size: 21px;
}

.f-20 {
    font-size: 20px;
}

.f-18 {
    font-size: 18px;
}

.f-17 {
    font-size: 17px;
}

.f-16 {
    font-size: 16px;
}

.f-15 {
    font-size: 15px;
}

.f-14 {
    font-size: 14px;
}

.f-12 {
    font-size: 12px;
}

.f-11 {
    font-size: 11px;
}

.f-b {
    font-family: KiaSignatureBold !important;
}

.f-r {
    font-family: KiaSignatureRegular !important;
}

.f-l {
    font-family: KiaSignatureLight !important;
}
/*=========================Default Font======================*/

/* ========================Custom Checkbox=================== */
.radio-btn {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .radio-btn input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.radio-checkmark {
    position: absolute;
    top: 3px;
    left: 0px;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #05141F;
}

label.radio-btn span {
    display: inline-block;
    margin-top: 5px;
}
/* On mouse-over, add a grey background color */
.radio-btn:hover input ~ .radio-checkmark {
    background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.radio-btn input:checked ~ .radio-checkmark {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-btn input:checked ~ .radio-checkmark:after {
    display: block;
}

.radio-btn .radio-checkmark:after {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #05141F;
}
/* ========================Custom Checkbox=================== */

/* Sticky footer styles-------------------------------------------------- */
section#footer {
    position: fixed;
    width: 100%;
    bottom: 0px;
    z-index: 1;
}

.footer a {
    font-size: 12px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 57px; /* Vertically center the text there */
    background-color: #fff;
    font-size: 12px;
    box-shadow: 15px 15px 27px #000;
}

.footer-content {
    width: 48%;
    float: left;
}

.footer .footer-content:first-child {
    margin-left: 2%;
}

.footer .footer-content:last-child {
    margin-right: 2%;
}

.footer-text {
    color: rgba(0, 0, 0, 0.9);
}

    .footer-text a:hover {
        text-decoration: underline;
    }

    .footer-text a {
        color: rgba(0, 0, 0, 0.9);
    }
/* Sticky footer styles-------------------------------------------------- */

/* ==============Landing page============== */
.create-cat-btn {
    padding: 17px 0px;
    background-color: #05141F;
    border-radius: 4px;
    margin-bottom: 22px;
    width: 331px;
    height: 60px;
    vertical-align: middle;
}

a.create-cat-btn {
    color: #fff !important;
    border-radius: 0px;
    text-align: center;
    display: block;
}

    a.create-cat-btn:hover {
        text-decoration: underline;
    }

section#delivery {
    width: 50%;
    float: left;
    min-height: calc(100vh - 137px);
    background-size: 100%;
    background-repeat: no-repeat;
    left: 0px;
}

section#delivery-button-holder {
    text-align: center;
    width: 50%;
    float: left;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 40vw;
}

.category-delivery-btn {
    margin-left: 85px;
}
/* ==============Landing page============== */

/* ==============Vin Search page============== */
section#vin-search {
    width: 50%;
    float: left;
    background-image: url("../img/delivery.png?v=m5kF-HYjYHTjP1dIU55dWjVUYao");
    min-height: calc(100vh - 80px);
    background-size: 100%;
    background-repeat: no-repeat;
    left: 0px;
    margin-top:80px;
}

section#vin-search-holder {
    text-align: center;
    width: 50%;
    float: right;
    justify-content: center;
    align-items: center;
    display: flex;
    height: calc(100vh / 2);
    margin-top:80px;
}

section#thankyou-holder {
    padding-top: 14%;
    text-align: center;
    width: 100%;
}

.search-vin {
    color: #05141F;
    margin-left: 85px;
    padding-bottom: 30px;
    text-align: left;
}

.searchbox {
    position: relative;
    margin-left: 85px;
    float: left;
    width: 331px;
}

.or-vin {
    color: #05141F;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 85px;
    overflow: hidden;
    clear: both;
    width: 331px;
}

.searchbox input[type="text"] {
    height: 38px;
    border: 1px solid #05141F33;
    padding-left: 10px;
    color: #05141F;
    float: left;
    width: 100%;
}

    .searchbox input[type="text"].required {
        border: 1px solid #EA0029;
    }

.searchbox .error {
    color: #EA0029;
    display: block;
    overflow: hidden;
    clear: both;
    float: left;
    margin-top: 5px;
}

.searchbox .ka-search {
    position: absolute;
    font-size: 34px;
    right: 7px;
    color: #000;
    font-weight: bold;
    top: 1px;
    cursor: pointer;
}

.vin-search-btn {
    width: 85px;
    text-align: center;
    border: 1px solid #05141F;
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
    float: left;
    display: inline-block;
    margin-left: 8px;
}

    .vin-search-btn span:hover {
        text-decoration: underline;
    }
/* ==============Vin Search page==============*/

/* ==============Vehicle Details==============*/
section#vehicle-info {
    width: 100%;
    min-height: calc(100vh - 138px);
    background-size: 100% 100%;
    position: relative;
}

.vehicle-info-container {
    padding-top: 22px;
    padding-bottom: 22px;
    opacity: 1;
    background: #ffffffc7 0% 0% no-repeat padding-box;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.model-name {
    color: #05141F;
}

.vin-number span {
    display: block;
    color: #000000;
}
/* ==============Vehicle Details==============*/

/*=====Get Ready=======*/
.question-container {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 21px;
    border-bottom: 1px solid #05141F1F;
}

.get-ready-number {
    color: #05141F;
    margin-left: 10px;
}

.get-ready-status {
    color: #05141F;
    margin-left: 76px;
    display: inline-block;
}

.question {
    color: #222222;
    line-height: 32px;
}

.sub-qus-container {
    width: 1100px;
    border: 1px solid #05141F1F;
    padding-bottom: 25px;
    border-radius: 2px;
    margin-top: 10px;
    margin-left: 27px;
    display: none;
}

.qus-item {
    border-bottom: 1px solid #05141F1F;
    overflow: hidden;
    clear: both;
    padding: 20px 20px 20px 20px;
}

.sub-qus-container .qus-item:last-child {
    border-bottom: 0px;
    padding-bottom: 0px;
}

.get-ready-qus-list .question-container:first-child {
    padding-top: 0px;
}

.model-qus {
    margin-top: 20px;
    margin-left: 20px;
    color: #222222;
}

.get-ready-btn,
.kia-activate-btn {
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
    clear: both;
    width: 100%;
    display: inline-block;
    align-self: flex-end;
    z-index: 1;
}
/*=====Get Ready=======*/

/*=====Customer Info=======*/
.already-reg-container {
    display: flex;
    height: 60px;
}

.already-registered {
    display: inline-block;
    align-self: flex-end;
    color: #EA0029;
    cursor: pointer;
}

.footer-btn {
    min-height: calc(100vh - 410px);
    display: flex;
    width: 100%;
}

.customer-info-holder {
    display: inline-block;
    margin-right: 140px;
}

#customer-info .customer-info-holder:last-child {
    margin-right: 0px;
}

.customer-info-container {
    padding-bottom: 20px;
    border-bottom: 1px solid #0000001f;
}

.field span {
    color: #05141F;
}

.terms-select {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/*=====Customer Info=======*/
/* =========Right Panel=========== */
.right-sidebar {
    position: fixed;
    width: 462px;
    right: -462px;
    box-shadow: 0px 3px 6px #00000029;
    background-color: #fff;
    /*height: 90%;*/
    top: 110px;
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
    /*height: calc(100vh - 110px);*/
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

    .right-sidebar.active {
        right: 0px;
        z-index: 3;
    }

    .right-sidebar::-webkit-scrollbar {
        width: 10px;
    }

    .right-sidebar::-webkit-scrollbar-track {
        background-color: darkgrey;
    }

    .right-sidebar::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

.bar:after.active {
    right: 0px;
    z-index: 1;
}

.right-title {
    padding: 15px 0px 17px 29px;
    border-bottom: 1px solid #EEEFF2;
    background-color: #05141F08;
    color: #05141F;
}

.right-form-holder {
    padding: 20px 29px;
}

.right-sidebar-btn {
    padding-right: 29px;
    padding-bottom: 25px;
    padding-top: 25px;
    margin-top: auto;
    border-top: 1px solid #EEEFF2;
}

.overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 80px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

    .overlay.active {
        z-index: 1;
        opacity: 1;
        display: block;
    }

.terms-heading {
    padding-bottom: 20px;
    overflow: hidden;
    clear: both;
}

    .terms-heading span {
        color: #05141F;
    }

        .terms-heading span:last-child {
            margin-top: 8px;
        }

.terms-content {
    color: #05141F;
}

.forgot-pass {
    padding-left: 8px;
    padding-top: 2px;
    color: #1592e6;
}
/* =========Right Panel=========== */

/* =========Activate Kia=========== */
.feature-highlight {
    color: #05141F;
}

.check-out {
    color: #EA0029;
    margin-left: 20px;
    display: inline-block;
}

    .check-out:hover {
        color: #EA0029;
        text-decoration: underline;
    }

.left-info {
    float: left;
    width: 70%;
}

.right-info {
    float: left;
    width: 30%;
}

.passcode-type .radio-btn {
    margin-right: 82px;
}

    .passcode-type .radio-btn:last-child {
        margin-right: 0px;
    }

.kia-activate-footer-btn {
    min-height: calc(100vh - 524px);
    display: flex;
    width: 100%;
}

.ultimate {
    background-color: #05141f1a;
    text-align: center;
    color: #05141F;
    padding-top: 20px;
    padding-bottom: 16px;
    border-bottom: 4px solid #5D7D2B;
}

.trial-plan-content {
    box-shadow: 0px 3px 6px #00000029;
    margin-top: 35px;
}

.plan-features {
    padding-left: 22px;
    padding-top: 19.5px;
    padding-bottom: 21px;
    padding-right: 22px;
    color: #000;
}

    .plan-features ul {
        padding-left: 0px;
        margin-top: 13px;
    }

        .plan-features ul li {
            margin-bottom: 10px;
            list-style-type: none;
        }

.text-info-left {
    float: left;
    width: 40%;
    margin-right: 5%;
    overflow: hidden;
    clear: both;
}

.text-info-right {
    float: left;
    width: 40%;
}

.checkout-holder {
    border-bottom: 1px solid #0000001f;
}

.passcode-resend {
    color: #05141F;
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
}

    .passcode-resend .span {
        display: inline-block;
    }

.resend {
    color: #fff;
    padding: 6px 15px 5px;
    background-color: #05141F;
    border-radius: 15px;
    margin-left: 25px;
    cursor: pointer;
}

.disabled-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    clear: both;
}

.disabled-layer {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-color: #fff;
    z-index: 1;
}

.plan-features .ka-check {
    margin-right: 25px;
    font-size: 20px;
    color: #5D7D2B;
}

.success.text-info-left {
    position: relative;
    padding-right: 5%;
}

.success .field .custom-text-box {
    border: 1px solid #5D7D2B;
}

.success .field span {
    color: #5D7D2B;
    display: block;
    padding-left: 10px;
    padding-top: 4px;
}

.success .field .ka-check-circle-black {
    position: absolute;
    right: 12px;
    color: #5D7D2B;
    font-size: 20px;
    top: 26px;
}
/* =========Activate Kia=========== */
/* =========Get Ready Checklist=========== */
.right-sidebar {
    position: fixed;
    width: 662px;
    right: -662px;
    box-shadow: 0px 3px 6px #00000029;
    background-color: #fff;
    height: 100%;
    top: 0px;
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
    /*height: calc(100vh - 80px);*/
    display: flex;
    flex-direction: column;
}

    .right-sidebar.active {
        right: 0px;
        z-index: 3;
    }

    .right-sidebar::-webkit-scrollbar {
        width: 10px;
    }

    .right-sidebar::-webkit-scrollbar-track {
        background-color: darkgrey;
    }

    .right-sidebar::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

.bar:after.active {
    right: 0px;
    z-index: 1;
}

.sidebar-title {
    padding: 15px 0px 17px 29px;
    border-bottom: 1px solid #EEEFF2;
    background-color: #05141F08;
    color: #05141F;
}

.sidebar-form-holder {
    padding: 24px 29px;
}

.check {
    width: 10%;
    float: left;
}

.check-content {
    width: 90%;
    float: left;
}

.get-ready-checklist {
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
    clear: both;
    border-bottom: 1px solid #EEEFF2;
}

    .get-ready-checklist:first-child {
        padding-top: 0px;
    }

    .get-ready-checklist:last-child {
        padding-bottom: 0px;
        border-bottom: 0px;
    }

.check .ka-ready-check {
    color: #5D7D2B;
    font-size: 22px;
}

.check .ka-clear {
    color: #EA0029;
    font-size: 22px;
}

.sidebar-save {
    background-color: #05141F;
    color: #fff;
    border: 1px solid #000;
    padding: 14px 26px;
}

.sidebar-close {
    background-color: #fff;
    color: #05141F;
    border: 1px solid #000;
    margin-right: 10px;
    padding: 14px 26px;
}

    .sidebar-close:focus,
    .sidebar-close:active,
    .sidebar-save:focus,
    .sidebar-save:active {
        border-radius: 0px;
        outline: none;
        border: 1px solid #000;
    }

    .sidebar-close:hover,
    .sidebar-save:hover {
        text-decoration: underline;
        outline: none;
    }

.sidebar-sidebar-btn {
    padding-right: 29px;
    padding-bottom: 25px;
    padding-top: 25px;
    /*margin-top: auto;*/
    border-top: 1px solid #EEEFF2;
}

a.schedule-appointment {
    color: #fff !important;
    background-color: #05141F;
    border-radius: 20px;
    padding: 4px 14px;
    cursor: pointer;
    display: inline-block;
}

.appointment-time {
    color: #5D7D2B;
}
/* =========Get Ready Checklist=========== */
/*=====Hotspot=======*/
.category-container {
    box-shadow: 7px 4px 24px -14px #00000029;
    float: left;
    height: 100%;
}

.category {
    font-family: "DesignKL";
    cursor: pointer;
    margin-bottom: 27px;
    width: 100%;
    float: left;
    color: #05141F;
    text-align: center;
}

    .category.active {
        border-right: 4px solid #05141F;
    }

        .category.active .ka {
            font-family: "DesignKM";
            color: #fff;
        }

        .category.active div {
            font-family: "DesignKB" !important;
        }

    .category .ka {
        margin-left: 12px;
        color: #000;
    }

    .category:hover {
        font-family: "DesignKM";
    }

.category-container .category:last-child {
    margin-right: 0px;
}

.category img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #00000029;
}

.category.active img {
    border: 2px solid #05141F;
}

.map-area-container {
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    position: relative;
}

.selector {
    position: absolute;
    padding: 5px 0px;
    touch-action: none;
    user-select: none;
}

div#myImgId {
    position: relative;
    height: auto;
    z-index: 1;
}

.map-area-container {
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.selector.active {
    z-index: 1;
}

.hotspot {
    background: #05141fb2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: default;
    position: relative;
    opacity: 1;
    border: 2px solid #fff;
}

.scrollbar.scrollbar-primary {
    position: relative;
    height: auto;
    z-index: 101;
    border: solid 1px #ffffff;
}

.selector.active .selectBoxShow,
.selector.done:hover .selectBoxShow {
    position: absolute;
    top: -2px;
    width: 382px;
    left: 32px;
    display: block;
    padding: 0px 0px 20px;
    background-color: #fff;
    border-radius: 5px;
    display: block;
    cursor: default;
}

.selector.done {
    background-color: #fff;
    min-width: 192px;
    height: 40px;
    border-radius: 30px;
    z-index: 1;
}

    .selector.done .complete::before {
        content: "";
        background-color: transparent;
        border: 2px solid #000000;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        top: 0px;
        position: absolute;
        left: 18px;
    }

    .selector.done .complete {
        display: block;
        color: #05141F;
        padding-bottom: 6px;
        padding-left: 60px;
        margin-top: -12px;
        width: 200px;
        position: relative;
        height: unset;
        border-radius: unset;
        background-color: transparent;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-top: 3px;
    }

    .selector.done .hotspot {
        display: none;
    }

    .selector.done:hover .hotspot,
    .selector.done.active:hover {
        display: block;
        cursor: move;
        z-index: 2;
    }

    .selector.done:hover {
        background-color: transparent;
        min-width: unset;
        height: unset;
        border-radius: unset;
    }

        .selector.done:hover .complete {
            display: none !important;
        }

.hotspot-header {
    padding: 10px 30px 10px 17px;
    border-bottom: 1px solid #EEEFF2;
    text-align: right;
    position: relative;
    display: none;
}

.hotspot-footer {
    padding: 20px 19px 0px 17px;
    text-align: right;
    position: relative;
}

    .hotspot-footer .cancel {
        border: 1px solid #707070;
        padding: 7px 15px 6px;
        border-radius: 15px;
        margin-right: 10px;
        cursor: pointer;
    }

.add-feature {
    color: #fff;
    background-color: #05141F66;
    border-radius: 15px;
    padding: 7px 15px 6px;
    pointer-events: none;
    cursor: pointer;
}

    .add-feature .ka-plus {
        margin-left: 6px;
    }

    .add-feature:hover {
        background-color: #05141F;
    }

.hotspot-header .ka-delete {
    vertical-align: middle;
    margin-left: 38px;
    cursor: pointer;
    color: #05141F66;
}

    .hotspot-header .ka-delete:hover {
        color: #05141F;
    }

.hotspot-header .active-switch {
    vertical-align: middle;
    display: none;
}

.hotspot-header .ka-edit {
    vertical-align: middle;
    margin-left: 22px;
    display: none;
    cursor: pointer;
}

.selectBoxShow .field-container {
    margin-bottom: 0px;
    padding: 10px 19px 0px;
}

.selectBoxShow {
    display: none;
}

a.add-feature {
    font-size: 12px;
    float: right;
    padding-top: 8px;
    color: #bb162b;
    text-decoration: none;
}

    a.add-feature .fa-plus {
        font-size: 10px;
    }

label {
    font-size: 12px;
    margin-bottom: 8px;
}

select.form-select {
    font-size: 12px;
}

.complete {
    width: 10px;
    background: #fff;
    position: absolute;
    height: 10px;
    border-radius: 50%;
    top: 12.5px;
    z-index: 2;
    right: 12.5px;
    display: none;
}

.not-complete {
    position: absolute;
    top: 7.5px;
    z-index: 2;
    right: 12.5px;
    color: #fff;
    display: none;
}

.hotspot-features {
    padding-top: 2px;
    padding-left: 21px;
    display: none;
}

    .hotspot-features h6 {
        color: #222222;
        padding-top: 6px;
    }

ul.hotspot-feature-list {
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: decimal;
}

    ul.hotspot-feature-list li {
        list-style-type: none;
        margin-top: 15px;
        margin-bottom: 7px;
        margin-left: 0px;
        margin-right: 10px;
    }

        ul.hotspot-feature-list li .ka-star {
            margin-right: 15px;
            vertical-align: middle;
        }

.hotspot-feature-add .add-feature {
    vertical-align: middle;
    float: right;
    margin-right: 29px;
    background-color: #05141F;
    pointer-events: auto;
    cursor: pointer;
}

.hotspot-feature-add .checkmark-checkbox {
    border: 2px solid #000000;
    background-color: #fff;
}

.hotspot-feature-add ul.featurelist {
    padding-left: 0px;
    margin-left: -6px;
}

    .hotspot-feature-add ul.featurelist li {
        list-style-type: none;
        margin-bottom: 25px;
    }

ul.featurelist .ka-edit {
    margin-left: 15px;
    cursor: pointer;
    vertical-align: -webkit-baseline-middle;
}

.featurelist .checkbox-container {
    padding-left: 30px;
    display: inline-block;
    width: auto;
    height: auto;
}

.featurelist .custom-checkbox {
    color: #5a5a5a;
    font-family: "DesignKM";
    width: 288px;
}

.featurelist .checkmark-checkbox {
    left: -31px;
}

.featurelist .ka-star:before {
    color: #05141F;
    vertical-align: -webkit-baseline-middle;
}

.featurelist .inactive.ka-star:before {
    color: #fff;
}

section#hotspot-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
    clear: both;
}

.hotspot-save {
    border-top: 0px;
    padding-right: 0px;
}

.hotspot-feature-add .ka-plus {
    margin-left: 7px;
}

.sub-cat-name {
    font-family: "DesignKM";
    color: #5a5a5a;
    position: absolute;
    left: 19px;
    top: 11px;
}

.preview-container {
    position: absolute;
    top: 37px;
    right: 28px;
    z-index: 1;
    color: #ffffff;
    cursor: pointer;
}

span.preview-eye {
    border-top: 5px solid #fff;
    text-align: center;
    display: inline-block;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 21px;
    height: 23px;
    vertical-align: middle;
    border-radius: 3px;
}

    span.preview-eye .ka-eye {
        vertical-align: top;
    }

.preview {
    font-family: "DesignKM";
}

.preview-holder {
    /* position: absolute;
    top: 118px;
    bottom: 0px;*/
    display: none;
    z-index: 2;
    width: 90%;
    overflow-x: auto;
    position: unset;
    min-height: 650px;
    width: 100%;
}

.hotspotholder {
    position: absolute;
    padding: 5px;
}

    .hotspotholder:hover {
        z-index: 1;
    }

    .hotspotholder .hotspots {
        background-color: #fff;
        height: 29px;
        border-radius: 30px;
    }

    .hotspotholder:hover .hotspot-feature-holder {
        display: block;
    }

    .hotspotholder .hotspots::before {
        content: "";
        background-color: transparent;
        border: 2px solid #f3c300;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        top: 2px;
        left: 4px;
    }

    .hotspotholder .hotspots .hotspot-subcat {
        display: block;
        color: #05141F;
        padding-top: 3px;
        padding-bottom: 4px;
        margin-left: 32px;
        padding-right: 27px;
        font-size: 13px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 150px;
    }

.hotspots {
    background-color: #05141fb3;
    min-width: 25px;
    height: 25px;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0.9;
    position: relative;
    cursor: pointer;
}

    .hotspots::before {
        content: "";
        position: absolute;
        background-color: #fff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: 5.5px;
        left: 5.5px;
    }

.hotspot-subcat {
    display: none;
}

.hotspot-feature-holder {
    display: none;
    width: 332px;
    position: absolute;
    min-height: 34px;
    max-height: 150px;
    overflow-y: auto;
    top: 36px;
    z-index: 2;
    padding: 4px 0px 4px 6px;
    background-color: hsl(0deg 0% 84%);
    border-radius: 5px;
}

.feature-holder {
    float: left;
    background-color: #fff;
    opacity: 1;
    position: relative;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    height: 40px;
}

    .feature-holder.active {
        /*background-color: hsl(0deg 0% 67%);*/
        border: 1px solid #000;
    }

    .feature-holder.viewed {
        /*border: 1px solid #000;*/
        background-color: hsl(0deg 0% 67%);
    }

.hotspot-checkbox {
    float: left;
    padding-left: 2px;
}

    .hotspot-checkbox .checkmark-checkbox {
        top: 0px;
        left: 0;
        height: 10px;
        width: 10px;
    }

        .hotspot-checkbox .checkmark-checkbox::after {
            left: 3px;
            top: -1px;
            width: 5px;
        }

.hotspot-recommand {
    float: right;
    padding-right: 5px;
    padding-top: 3px;
    cursor: pointer;
    display: inline-block;
    width: 17px;
    height: 20px;
    margin-top: -3px;
}

    .hotspot-recommand .fa-star {
        font-size: 12px;
        display: none;
    }

        .hotspot-recommand .fa-star.active {
            color: #bb162b;
            display: block;
        }

.hotspot-icon-holder {
    text-align: center;
    position: absolute;
    top: 22px;
    left: 38px;
}

.hotspot-feature-des {
    text-align: center;
    font-size: 10px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    width: 114px;
    padding-bottom: 2px;
    height: 35px;
    font-family: "DesignKM";
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: inline-block;
    /*text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;*/
}

.hotspot-icon-holder .fa {
    font-size: 25px;
}

.close-preview {
    color: #fff;
    position: absolute;
    right: 28px;
    top: 37px;
    cursor: pointer;
    width: 141px;
    background-color: #05141F;
    text-align: center;
    border-radius: 19px;
    height: 37px;
    border: 3px solid white;
}

div#previewImageID .close-preview {
    left: 28px;
}

.close-preview.video {
    border: 1px solid #fff;
}

.close-preview a {
    font-family: "DesignKM";
    display: inline-block;
    margin-top: 3px;
    color: #fff;
    text-decoration: none;
}

.model-name {
    padding-bottom: 20px;
    padding-top: 20px;
    color: #5D7D2B;
    text-align: center;
    text-transform: capitalize;
}

.hotspot-container-left {
    width: 9%;
    float: left;
    height: 100%;
}

.hotspot-container-right {
    width: 90.2%;
    float: left;
    margin-left: 0.8%;
    min-height: 760px;
    display: flex;
    flex-direction: column;
}

.thumb-image img {
    width: 139px;
    height: 78px;
    border-radius: 4px;
}

.image-container {
    min-height: 88px;
    float: left;
    margin-top: 20px;
    visibility: hidden;
    position: absolute;
    opacity: 0;
}

.image {
    border: 1px solid #05141f8a;
    border-radius: 5px;
    padding: 10px 25px 15px;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 139px;
    height: 78px;
    float: left;
}

    .image span {
        display: block;
        text-align: center;
        color: #000;
    }

.image-container .image:last-child {
    margin-right: 0px;
}

.image span .ka {
    color: #707070;
}

.thumb-image {
    width: 139px;
    height: 78px;
    position: relative;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
}

.image-row .thumb-image:last-child {
    margin-right: 0px;
}

.thumb-image img {
    width: 139px;
    height: 78px;
    border-radius: 4px;
}

.thumb-image .ka-delete {
    position: absolute;
    color: #fff;
    top: 9px;
    right: 10px;
}

.thumb-image .ka-update {
    position: absolute;
    top: 9px;
    right: 42px;
    color: #fff;
}

span.select-feature .ka-checkmark {
    padding-left: 4px;
    margin-top: 0px;
    font-size: 15px;
    color: #fff;
}

    span.select-feature .ka-checkmark.active {
        color: rgba(0, 0, 0, 0.9);
    }

.preview-section {
    position: fixed;
    /*min-width: 1200px;
    max-width: 1300px;*/
    height: 100%;
    top: 0;
    left: 0;
    overflow: scroll;
    z-index: 2;
    display: none;
    width: 100%;
    background-color: #05141F;
}

.fullscreen-feature {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}

    .fullscreen-feature.active {
        display: block;
    }

.section-down-arrow-wrap {
    cursor: pointer;
    background-color: #f3f3f4d9;
    padding: 14px;
    border-radius: 10px;
}

.img-container img {
    width: 100%;
    /* height:100%;*/
}

.document-container {
    width: 524px;
    padding: 20px 30px;
    position: absolute;
    right: 60px;
    background-color: #05141F;
    top: 20px;
}

.selected-feature-title div {
    color: rgb(243, 195, 0);
}

.selected-feature-title .ka-video:before {
    color: #fff !important;
    font-size: 28px;
}

.selected-feature-title a:hover {
    text-decoration: none;
}

.selected-feature-title .ka-file-text-o:before {
    color: #fff !important;
    font-size: 20px;
}

.selected-feature-title span {
    color: rgb(255, 255, 255);
}

.section-down-arrow-wrap {
    position: absolute;
    top: 20px;
    left: 58px;
}

    .section-down-arrow-wrap div {
        display: inline-block;
    }

.preview-up-active,
.preview-up-inactive,
.preview-down-active,
.preview-down-inactive {
    display: none;
}

.feature-video-container {
    position: absolute;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    display: none;
    left: 5%;
    height: 550px;
    top: 10%;
}

    .feature-video-container video {
        margin-top: 7%;
    }

    .feature-video-container.active {
        display: block;
        background-color: #05141FD9;
    }
/*=====Hotspot=======*/
/*=====Parts & Services=======*/
.parts-service-container {
    border-bottom: 1px solid #EEEFF2;
}

    .parts-service-container:first-child .page-heading {
        padding-top: 0px;
    }

    .parts-service-container:last-child {
        border-bottom: 0px;
    }

.additional-service-icon {
    width: 50px;
    float: left;
    margin-right: 24px;
}

.additional-service-link {
    color: #EA0029;
    display: inline-block;
    width: 100%;
}

    .additional-service-link:hover {
        color: #EA0029;
        text-decoration: underline;
    }

.additional-service-container {
    width: 100%;
    float: left;
}

.additional-service-icon {
    width: 14%;
    float: left;
    margin-right: 6%;
}

.additional-service-content {
    width: 80%;
    float: right;
}

.parts-service span.checkmark-checkbox {
    top: 5px;
}

.parts-service span {
    vertical-align: -webkit-baseline-middle;
}
/*=====Parts & Services=======*/
/*=====Feedback & Signature=======*/
.feedback-question-container {
    width: 75%;
    float: left;
}

.feedback-container {
    width: 25%;
    float: left;
}

.feedback-comment {
    padding-top: 20px;
    overflow: hidden;
    clear: both;
    display: none;
}

.feedback-question {
    border-bottom: 1px solid #05141F1F;
    padding-bottom: 30px;
    padding-top: 30px;
    min-height: 80px;
    overflow: hidden;
    clear: both;
}

    .feedback-question:first-child {
        padding-top: 0px;
    }

    .feedback-question:last-child {
        border-bottom: 0px;
    }

.feedback-top-section {
    border-bottom: 1px solid #05141F1F;
}

.emoji-radio-btn {
    display: inline-block;
    position: relative;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .emoji-radio-btn input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.emoji-radio-checkmark.yes {
    position: absolute;
    top: -4px;
    left: 0px;
    /*background-image: url("../img/default-emoji.png?v=N999iOazZjFL_R2Z24Btuk_Y7zU");*/
    width: 34px;
    height: 34px;
    background-size: 100%;
}

.emoji-radio-checkmark.no {
    position: absolute;
    top: -4px;
    left: 0px;
    /*background-image: url("../img/sad-emoji.png?v=TYkwzhmZEujJ8TNR9y-DcRUfxEk");*/
    width: 34px;
    height: 34px;
    background-size: 100%;
}

label.emoji-radio-btn span {
    display: inline-block;
    margin-top: 5px;
}
/* On mouse-over, add a grey background color */
.emoji-radio-btn:hover input ~ .emoji-radio-checkmark {
    background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.emoji-radio-btn input:checked ~ .emoji-radio-checkmark {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.emoji-radio-checkmark:after {
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.emoji-radio-btn input:checked ~ .emoji-radio-checkmark:after {
    display: block;
}

.emoji-radio-btn .emoji-radio-checkmark.yes:after {
    top: 0px;
    left: 0px;
    /*background-image: url("../img/like-emoji.png?v=w3C_FMl6l5697gs3fEgXvC45a7c");*/
    width: 34px;
    height: 34px;
    background-size: 100%;
}

.emoji-radio-btn .emoji-radio-checkmark.no:after {
    top: 0px;
    left: 0px;
    /*background-image: url("../img/dislike-emoji.png?v=4HzzBLGbzPvY5ibe62W4HZFeeAI");*/
    width: 34px;
    height: 34px;
    background-size: 100%;
}

.feedback-bottom-section ul {
    margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 14px;
}

.feedback-bottom-section {
    padding-bottom: 40px;
    border-bottom: 1px solid #05141F1F;
}
/*=====Feedback & Signature=======*/
/*=====Login=======*/
nav.navbar-toggleable-sm.navbar-light.desktop.login {
    height: 61px;
}

.login-form {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0px -1px 12px #00000029;
    background-color: #fff;
}

    .login-form .footer-btn {
        min-height: 100%;
    }

section#login {
    padding-top: 68px;
    padding-bottom: 370px;
    background-image: url("../img/kia-login.jpg?v=8YQojbe9kvhmcg5a8ndtzEWlRps");
    background-size: 100%;
    background-repeat: no-repeat;
}

.forgot-password {
    color: #222222;
}

    .forgot-password:hover {
        color: #222222;
    }

form#loginForm .field {
    position: relative;
}

form#loginForm i.ka.ka-user {
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 18px;
    cursor: pointer;
}

form#loginForm i.ka.ka-eye, form#loginForm i.ka.ka-eye-slash {
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 18px;
    cursor: pointer;
    display: none;
}

form#loginForm i.ka.active.ka-eye, form#loginForm i.ka.active.ka-eye-slash {
    display: block;
}
/*=====Login=======*/
/*=====Selfie=======*/
.capture-selfie {
    position: fixed;
    width: 80%;
    height: 560px;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 4;
    background-color: #fff;
}

.camera {
    width: 690px;
    height: 400px;
    margin-left: 20px;
}

.selfie-overlay.active {
    z-index: 2;
    display: block;
    opacity: 1;
}

.selfie-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

.selfie-title {
    padding: 15px 0px 17px 29px;
    border-bottom: 1px solid #EEEFF2;
    background-color: #05141F08;
    color: #05141F;
}

img#idImg {
    position: absolute;
    top: 74px;
    right: 10px;
    width: 150px;
    height: 180px;
}

.close-preview.selfie-close {
    top: 17px;
}
/*=====Selfie=======*/
/*=====Scan Vin=======*/
.scan-vin {
    position: absolute;
    width: 500px;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 4;
    background-color: #fff;
    text-align: left;
}

.vin-overlay.active {
    z-index: 2;
    display: block;
    opacity: 1;
}

.vin-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

#barcodevideo, #barcodecanvas, #barcodecanvasg {
    width: 100%;
    height: 430px;
}

#barcodecanvasg {
    position: absolute;
    top: 0px;
    left: 0px;
}

#result {
    font-family: verdana;
    font-size: 1.5em;
}

#barcode {
    position: relative;
    padding-top: 22px;
    text-align: center;
}

#barcodecanvas {
    display: none;
}

.vin-title {
    padding: 15px 0px 17px 29px;
    border-bottom: 1px solid #EEEFF2;
    background-color: #05141F08;
    color: #05141F;
}

.close-preview.scan-close {
    top: 17px;
}
/*=====Scan Vin=======*/
/*=====Iframe popup=======*/
.iframe-popup {
    position: fixed;
    width: 880px;
    height: 560px;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 4;
    background-color: #fff;
    text-align: left;
}

.iframe-overlay.active {
    z-index: 3;
    display: block;
    opacity: 1;
}

.iframe-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

.close-preview.schedule-close {
    top: 17px;
}
/*=====Iframe popup=======*/
section#error-page {
    padding-top: 100px;
    text-align: center;
}

.error {
    color: #EA0029 !important;
    display: block;
    overflow: hidden;
    clear: both;
    float: left;
    margin-top: 5px;
}

.hotspotholder:hover::before {
    content: "Select a feature below & click on view";
    position: absolute;
    background-color: #fff;
    border-radius: 6px;
    text-align: center;
    top: -24px;
    font-size: 13px;
    padding: 2px;
    width: 248px;
    left: -82px;
    display: none;
}

.feature-preview-icon {
    background-color: #fff;
    border-radius: 50%;
    width: 39px;
    height: 39px;
    vertical-align: middle;
}

    .feature-preview-icon .ka.ka-clear {
        margin-left: 5px;
        margin-top: 4px;
    }

.loading {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 4;
    opacity: 0.5;
    text-align: center;
    height: 100%;
    display: none;
    top: 0px;
    left: 0px;
}

.loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #171717;
    width: 65px;
    height: 65px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.forgot-pass-container {
    overflow: hidden;
    clear: both;
}

form#loginForm {
    position: relative;
}

.vinSearchBtn {
    overflow: hidden;
    border: 0px;
    position: absolute;
    top: 2px;
    right: 1px;
    width: 50px;
    height: 34px;
    background-color: #fff;
}

    .vinSearchBtn:focus-visible {
        outline: none;
    }

.logout-container.float-right .ka-date, .ka-date {
    color: #f8c404;
}

.img-container {
    width: 100%;
    height: 100%;
    text-align: center;
}

.category.catBgColor.active {
    padding-top: 7px;
    padding-bottom: 7px;
    box-shadow: 0px 4px 12px 8px #d0d4d4;
}

.right-sidebar::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #aaa;
}

.right-sidebar::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.right-sidebar::-webkit-scrollbar-corner {
    background: #000;
}

.feedback-terms-condition .get-ready-btn {
    z-index: 1;
}
/*Schedule*/
.schedule-popup {
    position: fixed;
    width: 600px;
    height: 340px;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 4;
    background-color: #fff;
    text-align: left;
}

.schedule {
    height: 400px;
    margin-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.schedule-overlay.active {
    z-index: 3;
    display: block;
    opacity: 1;
}

.schedule-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

.schedule-title {
    padding: 15px 0px 17px 29px;
    border-bottom: 1px solid #EEEFF2;
    background-color: #05141F08;
    color: #05141F;
}

.schedule-popup .schedule-close {
    top: 13px;
}

a.nearByDealer {
    color: rgba(0, 0, 0, 0.9);
    margin-top: 20px;
    text-transform: uppercase;
}

.hotspot-container-right .get-ready-btn, .kia-activate-btn {
    z-index: 2;
}

section#vehicle-info img {
    width: 100%;
}

span.select-feature .ka-checkmark.viewed {
    color: #000;
}

span.select-feature .ka-checkmark.active.viewed {
    color: #000;
}

#get-ready-save {
    display: none;
}

.topright-close {
    position: absolute;
    top: 5px;
    right: 60px;
    font-size: 28px;
    float: right;
    margin-right: -30px;
    cursor: pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #101010;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 6px;
    z-index: 9;
}

.appointmentIcon {
    display: inline-block;
    float: right;
    margin-right: 6px;
    cursor: pointer;
}

.logout-container .ka-date::before {
    vertical-align: middle;
}
/*=====Agreement popup=======*/
.agreement-popup {
    position: absolute;
    width: 90%;
    max-height: 90%;
    min-height: 500px;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 5;
    background-color: #fff;
    text-align: left;
    padding: 40px 40px 0px;
    overflow-y: auto;
}

.agreement-overlay.active {
    z-index: 4;
    display: block;
    opacity: 1;
}

.agreement-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

.close-preview.agreement-close {
    top: 17px;
}
/*=====Agreement popup=======*/
.kop-success-message {
    position: fixed;
    left: 42%;
    top: 0px;
    background-color: #fff;
    border-radius: 4px;
    padding: 11px 15px;
    color: #fff;
    z-index: 6;
    color: #222222;
}

    .kop-success-message .ka-checkmark:before {
        color: #5D7D2B;
    }

.kop-error-message {
    position: fixed;
    left: 38%;
    top: 0px;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px 14px 14px;
    color: #fff;
    z-index: 7;
    color: #222222;
}

    .kop-error-message .ka-clear::before {
        vertical-align: middle;
        color: #ed5b5b;
        font-weight: bold;
    }

.parts-service-container .page-heading {
    padding-top: 20px;
}

section#parts-service-content .footer-btn {
    min-height: unset;
}

span.select-feature {
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
}

span.hotspot-recommand .ka-star {
    font-size: 12px;
}
/*=====Agreement popup=======*/
.email-preview-popup {
    position: absolute;
    width: 90%;
    max-height: 90%;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 5;
    background-color: #fff;
    text-align: left;
    padding: 40px 40px 0px;
    overflow-y: auto;
}

.email-preview-overlay.active {
    z-index: 4;
    display: block;
    opacity: 1;
}

.email-preview-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

.close-preview.email-preview-close {
    top: 17px;
}
/*=====Agreement popup=======*/
iframe {
    overflow: auto;
}

.firstappointment {
    position: absolute;
    top: 30px;
    right: 147px;
}

.appointmentDateTime {
    display: inline-block;
    width: 350px;
}

.topright-close.schedule-close {
    right: 43px;
    top: 17px;
}
/*=====Agreement popup=======*/

/*=====Time Picker=======*/
.datetimepicker-container {
    position: relative;
    width: 152px;
}

.datetimepicker-input {
    height: 34px;
}

.clock {
    position: absolute;
    top: 7px;
    right: 8px;
    cursor: pointer;
}

.time-container {
    position: relative;
}

.times {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    display: none;
    padding: 5px 5px 15px;
    box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
    background-color: #fff;
}

.hours {
    width: 40px;
    float: left;
    height: 200px;
    overflow-y: auto;
    text-align: center;
    margin-right: 5px;
}

.minutes {
    width: 40px;
    float: left;
    height: 200px;
    overflow-y: auto;
    text-align: center;
    margin-right: 5px;
}

.ampm {
    width: 40px;
    float: right;
    height: 200px;
    overflow-y: auto;
    text-align: center;
    position: relative;
}

.hours::-webkit-scrollbar, .minutes::-webkit-scrollbar {
    display: none;
}

.hours, .minutes {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .hours div, .minutes div, .ampm div {
        height: 30px;
        margin-bottom: 5px;
        margin-top: 5px;
        cursor: pointer;
        border-radius: 2px;
        padding-top: 5px;
    }

        .hours div:hover, .minutes div:hover, .ampm div:hover {
            background-color: #05141F66;
        }

        .hours div.selected, .minutes div.selected, .ampm div.selected {
            background-color: #05141F;
            color: #fff;
        }

        .hours div:hover, .minutes div:hover, .ampm div:hover {
            background-color: #05141F66;
        }

        .hours div.selected, .minutes div.selected, .ampm div.selected {
            background-color: #05141F;
        }

.selectionDone {
    background-color: #05141F;
    color: #fff;
    height: 25px !important;
    position: absolute;
    width: 100%;
    bottom: 0px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.clock {
    position: absolute;
    top: 5px;
    right: 5px;
}
/*=====Time Picker=======*/
.partsServiceAppointment {
    position: unset !important;
    top: unset !important;
    right: unset !important;
    margin-right: 0px !important;
    float: unset !important;
    margin-top: 2px;
    z-index: 2;
}

.partsServiceAppointmentClose {
    display: inline-block;
    padding-top: 1px;
}

.dateContainer {
    position: relative;
}

.readonlyDate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    width: 100%;
    height: 30px;
}

i.ka.ka-calender {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 19px;
    cursor: pointer;
}

.warning-msg {
    color: #EA0029;
    padding-top: 0px;
    padding-bottom: 4px;
}

.errorMessage {
    color: #ff0000;
}

.signatureWrapper {
    position: relative;
    width: 100%;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #05141F33;
    color: #05141F99;
}

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
}

div#scandit-barcode-picker {
    max-width: 1280px;
    height: 75vh;
}
/*Comment*/
.comment-popup, .checklist-popup {
    position: fixed;
    width: 600px;
    height: 264px;
    margin: 2% auto 0%;
    left: 0;
    right: 0;
    top: 0px;
    display: none;
    z-index: 4;
    background-color: #fff;
    text-align: left;
}

.commentbox {
    height: 96px;
    margin-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.comment-overlay.active {
    z-index: 3;
    display: block;
    opacity: 1;
}

.comment-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 0px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

.comment-title {
    padding: 15px 0px 17px 29px;
    border-bottom: 1px solid #EEEFF2;
    background-color: #05141F08;
    color: #05141F;
}

.comment-popup .comment-close {
    top: 13px;
}
/*Comment*/

.redelivery-confirm-box {
    position: fixed;
    top: 0px;
    width: 500px;
    margin: 15% auto;
    left: 0px;
    right: 0px;
    z-index: 7;
    background-color: #fff;
    display: none;
}

.redelivery-confirm-box-heading {
    border-bottom: 1px solid #EEEFF2;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 12px;
    text-align: left;
}

.redelivery-confirm-box-content {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 20px;
    text-align: left;
}

.redelivery-confirm-box .upload-sidebar-btn {
    border-top: 0px;
}

.upload-save {
    background-color: #05141F;
    color: #fff;
    border: 1px solid #000;
    padding: 14px 26px;
}

.upload-close {
    background-color: #fff;
    color: #05141F;
    border: 1px solid #000;
    margin-right: 10px;
    padding: 14px 26px;
}

    .upload-close:focus, .upload-close:active, .upload-save:focus, .upload-save:active {
        border-radius: 0px;
        outline: none;
        border: 1px solid #000;
    }

    .upload-close:hover, .upload-save:hover {
        text-decoration: underline;
        outline: none;
    }

.upload-sidebar-btn {
    padding-right: 29px;
    padding-bottom: 25px;
    padding-top: 25px;
    margin-top: auto;
    border-top: 1px solid #EEEFF2;
}

.revindelivery-close {
    right: 43px;
    top: 17px;
}

.tech-check {
    position: fixed;
    top: 14%;
    width: 409px;
    margin: 15% auto;
    left: 75%;
    transform: translate(-80%, -50%);
    background-color: #fff;
    display: block;
    text-align: left;
    border: 3px solid #ccc0c0;
    z-index: 2;
    opacity: 1;
}

.tech-check-heading {
    border-bottom: 1px solid #EEEFF2;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 12px;
    color: #EA0029;
}

.tech-check-body {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 20px;
    font-weight: bold;
}

.tech-check-btn {
    border-top: 0px;
}

.tech-check-btn-style:hover {
    text-decoration: underline;
    cursor: pointer;
}

.tech-check-btn-style {
    background-color: black;
    padding: 5px 10px;
    color: white;
    margin: 10px;
}

.table-responsive {
    display: none;
    width: 1000px;
    max-height: 500px;
    overflow-y: auto;
    padding: 20px 0px 0px 100px;
}

    .table-responsive table {
        margin-top: 30px;
    }

.table {
    width: 99.92% !important;
}

.t-head {
    background-color: #05141F99;
    color: #fff;
    box-shadow: 0px 1px 0px #05141F1F;
}

.text-left {
    text-align: left !important;
}

.f-b {
    font-family: KiaSignatureBold !important;
}

.ka {
    font-family: 'DesignKM';
}

.f-r {
    font-family: KiaSignatureRegular !important;
}

.text-left {
    text-align: left !important;
}

.btn-PhonePasscodeSend, .btn-EmailPasscodeSend, .txt-phonePasscode, .txt-emailPasscode, .btn-PhonePasscodeVerify, .btn-EmailPasscodeVerify, .lbl-phonePass, .lbl-emailPass {
    display: none;
}

.phonePasscodeSend, .emailPasscodeSend, .btn-PhonePasscodeVerify, .btn-EmailPasscodeVerify {
    background-color: #05141F;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    height: 30px;
    margin-top: 26px;
}

.lbl-Phone, .lbl-Email {
    display: none;
}

.btn-resend {
    background-color: #fff;
    color: #05141F;
    border: 2px solid #EBEBE4;
    backdrop-filter: blur(5px);
    margin-top: 26px;
    height: 30px;
    width: 100px;
}

.btnRegisterLater {
    backdrop-filter: blur(5px);
    background-color: #EBEBE4;
    color: #b3c3cf;
    border: 2px solid #EBEBE4;
    pointer-events: none;
}

.btn-PhonePasscodeSend, .btn-EmailPasscodeSend, .btn-PhonePasscodeVerify, .btn-EmailPasscodeVerify {
    width: 100%;
}

.footer-height {
    min-height: 10px;
}

.btn-PhonePasscodeSend:hover, .btn-EmailPasscodeSend:hover, .btn-PhonePasscodeVerify:hover, .btn-EmailPasscodeVerify:hover {
    text-decoration: underline;
}

.checklist-border {
    border-color: #666;
    border: 2px;
    border-style: solid;
    padding: 5px, 3px, 5px, 3px;
}

.checklist-popup {
    border: 5px solid gray;
    max-width: max-content;
    max-height: max-content;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.checklist-title {
    border-bottom: 1px solid #EEEFF2;
    padding-left: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #EA0029;
}

.checklist-content {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 20px;
}

.checklist-close {
    top: 20px;
}

.center {
    text-align: center;
}

.black {
    color: #000;
}

.session-expired-heading {
    display: none;
    color: #EA0029;
}

.session-expired-box {
    position: fixed;
    top: 0px;
    width: 409px;
    margin: 15% auto;
    left: 0px;
    right: 0px;
    z-index: 7;
    background-color: #fff;
    display: none;
    text-align: left;
}

.session-expired-confirm-box-heading {
    border-bottom: 1px solid #EEEFF2;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 12px;
}

.session-expired-confirm-box-content {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 20px;
    color: #EA0029;
}

.session-expired-confirm-box .upload-sidebar-btn {
    border-top: 0px;
}

.session-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    background-color: #05141FD9;
    height: 100%;
    top: 80px;
    z-index: 0;
    opacity: 0;
    display: none;
    cursor: pointer;
}

    .session-overlay.active {
        z-index: 1;
        opacity: 1;
        display: block;
    }

.text-center {
    text-align: center !important;
}

.fixed-width-btn {
    width: 250px;
    height: 50px;
}

.login-bg-url {
}

section#feature-list-login {
    width: 50%;
    background-image: url("../img/kia-login.jpg?v=8YQojbe9kvhmcg5a8ndtzEWlRps");
    float: left;
    min-height: calc(100vh - 79px);
    margin-top: 50px;
    margin-left: 50px;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 0px;
}

.margin-btn{
    margin-top:150px;
    margin-left:115px;
}
.rounded-close-button {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.top-div-margin {
    margin-top:80px;
}
.top-div-margin-agreementpopup {
    margin-top: 95px;
}
.down-div-margin {
    margin-bottom: 80px;
}
html {
    font-size: 16px;
    scrollbar-color: #222222 #e0e0e0;
    scrollbar-width: thin;
}