/**
 * This Software is property of ACTIVETRAFFIC is protected by
 * copyright law - it is NOT Freeware.
 * Any unauthorized use of this software without a valid license agreement
 * will be prosecuted by civil and criminal law.
 *
 * @link        http://www.activetraffic.de
 * @projectlink	http://www.flexia.de
 * @authors     Mario Krell <mario.krell@activetraffic.de>
 * @copyright   (C) ACTIVETRAFFIC 
 * @module      Flexia's Adviser
 * @version     15.04.2019 1.0.0
 */

.service-contact-box .service-info-box {
    padding: 35px 15px;
}

.service-box {
    position: fixed;
    z-index: 999;
    bottom: 75px;
    right: 17px;
}

.service-box .service-form,
.service-box.article .agent-info {
    padding-top: 0;
}

.service-box a:hover,
.service-contact-box .agent-name .contact-btn,
.service-contact-box .agent-name .contact-btn:hover,
.service-contact-box .agent-name .contact-btn:active,
.service-contact-box .agent-name .contact-btn:focus {
    color: #fff;
    text-decoration: none;
}

#wrapper .service-form button.btn.btn-primary {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

#wrapper .service-form button.btn.btn-primary i {
    font-weight: bold;
    vertical-align: middle;
}

.service-contact-box .agent-contact-form {
    display: none;
}

@media screen and (min-width: 320px) {
    #wrapper .service-box {
        flex: 0 0 100%;
    }

    #wrapper .service-box .service-box-inner {
        background-color: #035ca8;
        color: #ffffff;
        border-radius: 25px;
        padding: 0 5px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        box-shadow: 0 6px 20px 0 rgb(3 92 168 / 23%);
        justify-content: center;
        align-items: center;
        width: auto;
        min-width: 50px;
        height: 50px;
    }

    #wrapper .service-box .agent-item.close {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        padding: 0;
        transition: all 0.1s;
    }

    #wrapper .service-box .agent-item {
        opacity: 1;
        visibility: visible;
        padding: 5px 0 5px 5px;
        height: 100%;
        position: relative;
        max-width: 1000px;
        transition: max-width 0.5s, opacity 0.5s;
    }

    #wrapper .service-box .agent-item .thumbnail-wrapper {
        width: 40px;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #fff;
    }

    #wrapper .service-box .agent-item .agent-thumbnail {
        position: relative;
        top: -3px;
        cursor: pointer;
    }

    #wrapper .service-box .service-agent {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        min-width: 200px;
        min-height: 245px;
        bottom: 100%;
        transform: translateY(50px);
        right: 0;
        padding: 30px 0;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: rgb(3 92 168 / 23%) 0px 30px 80px;
        transition: opacity .8s cubic-bezier(0.25, 1, 0.33, 1), transform .6s cubic-bezier(0.25, 1, 0.33, 1);
        -o-transition: opacity .8s cubic-bezier(0.25, 1, 0.33, 1), -webkit-transform .6s cubic-bezier(0.25, 1, 0.33, 1);
        -moz-transition: opacity .8s cubic-bezier(0.25, 1, 0.33, 1), -webkit-transform .6s cubic-bezier(0.25, 1, 0.33, 1);
        -webkit-transition: opacity .8s cubic-bezier(0.25, 1, 0.33, 1), -webkit-transform .6s cubic-bezier(0.25, 1, 0.33, 1);
        transition-delay: 0.2s;
    }

    #wrapper .service-box .agent-item a.btn {
        opacity: 0;
        transition: all 0.2s;
    }

    #wrapper .service-box .agent-item.open a.btn {
        opacity: 1;
        transition: all 0.2s;
    }

    #wrapper .service-box .service-title {
        order: 0;
        font-size: 18px;
        line-height: normal;
        font-weight: bold;
    }

    .adviser-icon {
        order: 0;
    }

    .adviser-icon {
        padding: 15px;
    }

    .adviser-icon.left {
        padding: 15px 12px;
    }

    .adviser-icon:hover {
        cursor: pointer;
    }

    .agent-item {
        order: 1;
    }

    .agent-item.extended-adviser {
        order: 2;
    }

    #wrapper .service-box .agent-item:not(.open)~.adviser-icon,
    #wrapper .service-box .agent-item.open:not(.extended-adviser)~.customers-title,
    #wrapper .service-box .agent-item.open.extended-adviser~.ext-advisor-title {
        opacity: 1;
        max-width: 1000px;
        transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;
    }

    #wrapper .service-box .agent-item:not(.extended-adviser).open~.customers-title,
    #wrapper .service-box .agent-item.extended-adviser.open~.ext-advisor-title {
        padding: 18px;
    }

    #wrapper .service-box .agent-item:not(.extended-adviser).open~.customers-title,
    #wrapper .service-box .agent-item.extended-adviser.open~.ext-advisor-title {
        transition-delay: 0.2s;
    }

    #wrapper .service-box .agent-item.open~.adviser-icon,
    .ext-advisor-title,
    .customers-title {
        padding: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.2s;
        -o-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }

    #wrapper .service-box .service-agent .service-contact-box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-img {
        width: 100px;
        height: 100px;
        margin-bottom: 25px;
        border-radius: 50%;
        overflow: hidden;
        max-height: 150px;
        border: 2px solid #bbb;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-img img {
        background-color: #fff;
        top: -15px;
        position: relative;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-details a,
    #wrapper .service-box .service-agent .service-contact-box .agent-details a:hover,
    #wrapper .service-box .service-agent .service-contact-box .agent-details {
        color: #676767;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-details a.btn {
        color: #ffffff;
        margin-top: 15px;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-details {
        line-height: normal;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-details>div {
        flex: 0 0 100%;
    }

    #wrapper .service-box .service-agent .service-contact-box a.servicetype,
    #wrapper .service-box .service-agent .service-contact-box a.servicetype:hover,
    #wrapper .service-box .service-agent .service-contact-box .agent-name a,
    #wrapper .service-box .service-agent .service-contact-box .service-text a:hover {
        color: #676767;
        flex: 100%;
    }

    #wrapper .service-box .agent-item.open .service-agent {
        opacity: 1;
        visibility: visible;
        transform: translateY(5px);
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-name:hover a {
        color: #035ca8;
    }

    #wrapper .service-box .service-agent .service-contact-box .agent-tel {
        margin-top: 10px;
    }

    .close-agent {
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 25px;
        cursor: pointer;
        color: #676767;
    }
}

@media screen and (min-width: 690px) {
    #wrapper .service-box {
        flex: 0 0 50%;
    }

    #wrapper .service-box {
        margin: 0;
    }
}

@media screen and (min-width: 991px) {
    #wrapper .service-box .close-agent {
        display: none;
    }

    #wrapper .service-box .agent-item.open a.btn {
        opacity: 1;
        transition: all 0.2s;
    }
}

@media screen and (min-width: 1645px) {
    .service-box {
        right: calc((80vW - 1245px) / 2);
    }
}
