/* Roboter mit Sprechblase */
.robot-animation img {
    width  : 100%;
    height : auto;
}

.robot-animation img.robot-img-start {
    max-width : 120px;
}

.robot-animation .robot {
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin-top      : 40px !important
}

#SideBar .robot-animation.sections,
#SideBar .robot-animation .robot {
    margin-top : 0px !important
}

.robot-animation .robot-bubble {
    margin-top : 6em;
    position   : relative;
}

.robot-animation .robot-bubble .bubble-text {
    position        : absolute;
    right           : 0;
    bottom          : 0;
    top             : 0;
    left            : 20%;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    padding         : 8px;
    color           : var(--darkgray);
    font-weight     : 500;
}

.robot-animation .robot-bottom {
    width         : 100%;
    height        : 40px;
    border-radius : 70%;
    background    : var(--lightgray-2);
    max-width     : 310px;
    margin        : auto;
    margin-top    : 20px;
    margin-bottom : 0px;
}


/** progress-bar */
.easyscan-search .itrk-form {
    position      : relative;
    width         : 100%;
    overflow      : hidden;
    background    : white;
    border-radius : var(--itrk-border-radius);
}

.easyscan-search .progress-bar-wrapper {
    height     : 37px;
    width      : 0;
    transition : all 1s ease;
}

.easyscan-search.loading input.itrk-input,
.easyscan-search.loading input.itrk-input:focus {
    color : white !important;
}

.easyscan-search input.itrk-input {
    transition       : all 0.5s ease;
    background-color : transparent !important;
    color            : var(--darkgray-2) !important;
    padding          : 10px 15px !important;
    height           : 37px !important;
    margin-bottom    : 0 !important;
    position         : absolute;
    left             : 0;
    right            : 0;
    top              : 0;
    z-index          : 10;
}

.easyscan-search .progress-bar {
    position      : relative;
    flex          : 1;
    border-radius : var(--itrk-border-radius);
    height        : 100%;
    overflow      : hidden;
    border-radius : 7px 0 0 7px;
}

.easyscan-search .progress-bar .loader-bar {
    position         : absolute;
    top              : 0;
    left             : 0;
    bottom           : 0;
    right            : 0;
    background-image : linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    z-index          : 1;
    background-size  : 50px 50px;
    animation        : move 3s linear infinite;
    overflow         : hidden;
}

.easyscan-search .error-msg {
    font-size : 12px;
    color     : var(--red-color);
    padding   : 15px 10px 0px 10px;
    display   : none;
    line-height: 1.4em;
}

@keyframes move {
    0% {
        background-position : 0 0;
    }
    100% {
        background-position : 50px 50px;
    }
}

.easyscan-banner {
    border-radius    : var(--itrk-border-radius);
    border           : 1px solid var(--lightgray-border);
    padding          : 40px;
    background-color : var(--lightgray);
    position         : relative;
    container-type   : inline-size;
    overflow         : hidden;
    margin           : 3rem 0;
}

.easyscan-banner:before {
    content             : '';
    position            : absolute;
    top                 : 0;
    right               : 30px;
    bottom              : 0;
    background-image    : url(/gfx/easysafe/radar-orange.svg);
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    opacity             : 0.15;
    width               : 400px;
}

.easyscan-banner img {
    height : 36px;
}

.easyscan-banner .text-end {
    display               : grid;
    grid-template-columns : 1fr auto;
    grid-template-rows    : auto;
    gap                   : 20px;
}

.easyscan-banner .itrk-form {
    min-width : 100px;
}

.easyscan-banner .easyscan-search {
    z-index  : 5;
    position : relative;
}

.easyscan-banner .error-msg {
    grid-column : 1 / -1;
    grid-row    : 2 / 3;
    order       : 2;
}

.easyscan-banner .itrk-input.easyscan-url, .easyscan-banner .itrk-form {
    height : 37px !important;
}

@media all and (max-width : 767px) {
    .easyscan-banner:before {
        background-size     : auto 125%;
        background-position : right;
        width               : 100%;
        right               : -10px;
    }

    .easyscan-banner {
        margin : 30px 0;
    }
}

@media all and (max-width : 430px) {
    .easyscan-banner:before {
        background-size : auto 115%;
        right           : 0;
    }
}