/* CSS custom properties */
:root {
    --bluebean365-color-1: #6465FE;
    --bluebean365-color-2: #3A3CFF;
    --bluebean365-color-3: #F7FAFF;
    --bluebean365-color-4: #EFF0FF;
    --bluebean365-color-5: #313159;
    --bluebean365-color-6: #646A73;
    --bluebean365-color-7: #9090FF;
    --bluebean365-color-8: #E9E9FF;
    --bluebean365-color-9: #FFA5BB;
    --bluebean365-color-10: #DEE2E6;
    --bluebean365-color-11: #407BFF;
    --bluebean365-gradient-1: linear-gradient(90deg, #DEF4FB 0%, #E6F0FC 25%, #EDEFFC 50%, #F6F1F5 75%, #FFF3F2 100%);
    --bluebean365-gradient-2: linear-gradient(270deg, var(--bluebean365-color-3) 0%, var(--bluebean365-color-4) 100%);
    --bluebean365-gradient-3: linear-gradient(90deg, var(--bluebean365-color-1) 0%, var(--bluebean365-color-9) 100%);
}

/* header */
#bb365-head {
    background-color: white;
    border-bottom-color: var(--bluebean365-color-1);
    .icon-nav li {
        color: var(--bluebean365-color-5);
        p.nav-contact-phone i {
            color: var(--bluebean365-color-1);
        }
        a {
            color: var(--bluebean365-color-5) !important;
        }
        a:hover {
            color: var(--bluebean365-color-6) !important;
        }
    }
    .menu-btn-top {
        a {
            border-color: var(--bluebean365-color-1);
            span {
                color: var(--bluebean365-color-1);
            }
        }
        a:hover {
            background-color: var(--bluebean365-color-4);
        }
        a span {
            color: var(--bluebean365-color-1);
        }
        i {
            color: white;
        }
    }
    #nav-drawer {
        &, li, a {
            color: var(--bluebean365-color-5);
        }
        li:hover, a:hover {
            color: var(--bluebean365-color-6);
        }
        li:hover {
            background-color: var(--bluebean365-color-4);
        }
        #nav-content {
            background-color: white;
            li:nth-child(odd) {
                background-color: white;
                &:hover {
                    background-color: var(--bluebean365-color-4);
                }
            }
        }
    }
}

/* footer */
#bb365-foot {
    background-color: var(--bluebean365-color-5);
    .foot-widgets {
        border-bottom-color: var(--bluebean365-color-2);
    }
    .bb365-copyrights {
        &, a {
            color: var(--bluebean365-color-4);
        }
        a:hover {
            color: white;
        }
    }
}

/* other */
#basic-plan, #add-options, #add-facility {
    h2.sium-title {
        color: var(--bluebean365-color-2);
        span {
            background-color: var(--bluebean365-color-2);
        }
    }
    h2::after {
        color: var(--bluebean365-color-2);
    }
    h3.external {
        color: var(--bluebean365-color-1);
        hr {
            border-color: var(--bluebean365-color-1);
        }
    }
    input.sceneoutput {
        color: var(--bluebean365-color-1);
    }
    .option-select-inner, .option-radio-inner, .select-IPtelephones, .select-IPheadsets, .select-USBheadsets {
        border-color: var(--bluebean365-color-1);
        select {
            border-color: var(--bluebean365-color-10);
        }
        label::after {
            color: var(--bluebean365-color-1);
            border-color: var(--bluebean365-color-1);
        }
        .radio-btn+label::before {
            border-color: var(--bluebean365-color-1);
        }
        .radio-btn+label::after {
            background-color: var(--bluebean365-color-1);
        }
    }
    .select-IPtelephones, .select-IPheadsets, .select-USBheadsets {
        input {
            color: var(--bluebean365-color-1);
            border-color: var(--bluebean365-color-10);
        }
    }
    .price-explan {
        color: var(--bluebean365-color-6);
        background-color: var(--bluebean365-color-3);
    }
    .scene-input-area {
        border-color: var(--bluebean365-color-1);
    }
    .straight {
        .input-box hr,
        .input-inner {
            border-color: var(--bluebean365-color-1);
        }
    }
}
#add-facility {
    h4 {
        color: var(--bluebean365-color-1);
    }
    h5 p.product-name{
        color: var(--bluebean365-color-5);
    }
}
#total-result {
    background-image: var(--bluebean365-gradient-1);
}
#common-documents, #member-certification {
    h2 {
        color: var(--bluebean365-color-1);
    }
}
#complete-message {
    h2 {
        color: var(--bluebean365-color-1);
    }
    i {
        color: var(--bluebean365-color-1);
    }
}
article#container {
    a, h1 {
        color: var(--bluebean365-color-1);
    }
    #floatingnavigation {
        p, li::after {
            color: var(--bluebean365-color-1);
        }
        a {
            border-color: var(--bluebean365-color-1);
        }
    }
    #floatingaddcart #panel-label {
        color: var(--bluebean365-color-1);
    }
}
.balloon {
    color: var(--bluebean365-color-1) !important;
    background-color: var(--bluebean365-color-3) !important;
    border-color: var(--bluebean365-color-3) !important;
}
.btn-blue {
    &, +span {
        color: var(--bluebean365-color-1) !important;
        border-color: var(--bluebean365-color-1);
    }
    i {
        color: var(--bluebean365-color-1) !important;
    }
}
.btn-blue:hover {
    color: var(--bluebean365-color-1) !important;
    background-color: var(--bluebean365-color-4);
}
.btn-darkblue {
    background-color: var(--bluebean365-color-1);
    border-color: var(--bluebean365-color-1);
}
.btn-darkblue:hover {
    background-color: var(--bluebean365-color-2);
    border-color: var(--bluebean365-color-2);
}
.btn-red {
    background-color: var(--bluebean365-color-1);
    border-color: var(--bluebean365-color-1);
}
.btn-red:hover {
    background-color: var(--bluebean365-color-2);
    border-color: var(--bluebean365-color-2);
}
.btn-red:disabled {
    background-color: inherit;
    border-color: inherit;
}
.btn-red_white {
    color: var(--bluebean365-color-1) !important;
    border-color: var(--bluebean365-color-1);
}
.btn-red_white:hover {
    color: var(--bluebean365-color-1) !important;
    background-color: var(--bluebean365-color-4);
    border-color: var(--bluebean365-color-1);
}
.btn-lightbrown_white,
.btn-lightbrown_white_xs {
    color: var(--bluebean365-color-1) !important;
    border-color: var(--bluebean365-color-1);
}
.btn-lightbrown_white:hover,
.btn-lightbrown_white_xs:hover,
.login-board+p a:hover {
    color: var(--bluebean365-color-1) !important;
    background-color: var(--bluebean365-color-4);
    border-color: var(--bluebean365-color-1);
}
.modal {
    border-color: var(--bluebean365-color-1);
    .close-modal {
        color: var(--bluebean365-color-1);
    }
    .submit-company-name {
        span {
            color: var(--bluebean365-color-1);
        }
        input[type=text] {
            border-color: var(--bluebean365-color-10);
        }
        input[type=text]:focus{
        outline: 0;
        border-color: var(--bluebean365-color-1);
    }
    }
}
.arrow-steps-flow {
    .step {
        color: var(--bluebean365-color-5);
        background-color: var(--bluebean365-color-4);
    }
    .step::after {
        border-left-color: var(--bluebean365-color-4);
    }
    .step.current {
        background-image: var(--bluebean365-gradient-3);
    }
    .step.current::after {
        border-left-color: var(--bluebean365-color-9);
    }
}
.Simulation-flow {
    background-color: var(--bluebean365-color-4);
    background-image: var(--bluebean365-gradient-2);
    ul li {
        color: var(--bluebean365-color-5);
    }
    .flow-active {
        color: var(--bluebean365-color-11) !important;
    }
}
.swal2-popup {
    &.license-define-content-class {
        border-color: var(--bluebean365-color-1);
    }
    .swal2-confirm.swal2-styled {
        background-color:var(--bluebean365-color-1);
    }
}
.gray-radius12,
.white-radius12 {
    h3 {
        color: var(--bluebean365-color-1);
    }
}
.additional-check {
    label {
        color: var(--bluebean365-color-1);
    }
    label::before {
        color: var(--bluebean365-color-1);
        border-color: var(--bluebean365-color-1);
    }
}
.ask-billto {
    label[for="check-billto"]::before {
        color: var(--bluebean365-color-1);
    }
}
.privacy-policy-box {
    background-color: var(--bluebean365-color-3);
}
.privacy-policy-section,
.terms-section,
.maintenance-section {
    h3 {
        &.privacy-policy-title,
        &.terms-title {
            color: var(--bluebean365-color-1);
        }
    }
}
.privacy-policy-content,
.terms-content {
    h3 {
        color: black;
    }
}
.demo-apply-phrase {
    background-color: var(--bluebean365-color-3);
    border-color: var(--bluebean365-color-7);
}
.demo-apply-phrase::after {
    border-top-color: var(--bluebean365-color-7);
}
.cart-display-total {
    border-color: var(--bluebean365-color-1);
    span {
        color: var(--bluebean365-color-11);
    }
    p {
        color: var(--bluebean365-color-2);
    }
}
.existing .existing-inner p {
    border-color: var(--bluebean365-color-1);
    color: var(--bluebean365-color-1);
}
.existing::before {
    background-color: var(--bluebean365-color-1);
}
.login-board {
    span {
        color: var(--bluebean365-color-5);
    }
    input[type=text],
    input[type=password] {
        border-color: var(--bluebean365-color-10);
    }
    input[type=text]:focus,
    input[type=password]:focus {
        outline: 0;
        border-color: var(--bluebean365-color-1);
    }
}
.page-description {
    background-color: var(--bluebean365-color-3);
    i {
        color: var(--bluebean365-color-1);
    }
}
.section-plus {
    color: var(--bluebean365-color-1);
}
.cart-table {
    tbody {
        input[type=text],
        input[type=password],
        select {
            border-color: var(--bluebean365-color-10);
        }
        input[type=text]:focus,
        input[type=password]:focus,
        select:focus {
            outline: 0;
            border-color: var(--bluebean365-color-1);
        }
        label.select-pulldown-arrow::after {
            color: var(--bluebean365-color-1);
            border-color: var(--bluebean365-color-1);
        }
    }
}
.cart-detail-table thead tr th {
    background-color: var(--bluebean365-color-7);
}