body,
html {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent !important;

}

body {
    margin: 0px;
    height: 100%;
    width: 100%;
    position: relative;
}

.video-list,
ul {
    list-style-type: none;
    list-style: none;
}

#video-container {
    position: relative;
    width: 251px;
    /* margin: 0 auto; */
    top: 57px;
    left: 79px;
    height: 294px;
}

.video-container_transformed {
    width: 250px;
    height: 250px;
}

.video-list {
    height: 150px;
    overflow-y: scroll;
    /* width: 171px; */
    margin: 31px auto;
}

.video-container_details,
.video-conatiner_datavideo,
#video-container_webcam,
#video-container_select,
#video-container_videolist,
#show-iframe_btn {
    position: absolute;
}



#show-iframe_btn {
    top: -20px;
    left: -20px;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
}

#show-iframe_btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff9c;
    cursor: pointer;
    position: absolute;
    border: 4px solid #0099ff;
    z-index: 999999;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}


#show-iframe_btn:after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #ffffff9c;
    position: absolute;
    top: 16px;
    left: 18px;
    -webkit-animation: pulse 2s ease 0s infinite;
    animation: pulse 2s ease 0s infinite;
}

@-webkit-keyframes pulse {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    80% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(3);
        transform: scale(3);
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    80% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(3);
        transform: scale(3);
    }
}

#video-container.minimized #show-iframe_btn {
    display: block;
}

#video-container.minimized #video-container-main_videos,
#video-container.minimized #bot,
#video-container.minimized #video-content,
#video-container.minimized #video-container_videolist,
#video-container.minimized .video-container_details,
.help-iframe_header {
    display: none;

}

#video-content {
    opacity: 0;
}

.help-iframe_header {
    width: 182px;
    height: 45px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: -25%;
    top: 50%;
    background-image: url("https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/ramka_niebieski.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    border-radius: 4px;
    ;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.help-iframe_header span {
    font-size: 14px;
    color: white;
    padding: 16px;
}

#show-iframe_btn:hover~.help-iframe_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}

#video-container_webcam {
    top: 0px;
    overflow: hidden;
    padding: 20px 34px;
}

#video-container_select {

    -ms-flex-pack: distribute;

    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0px auto;
    top: 10%;
    left: 6%;
}

.video-container_details {
    z-index: 12;
    margin: -15px;
    width: 40px;

}

.video-title {
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 20px;
}

.video-container_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.close-btn {
    position: absolute;
    right: 2px;
    top: 4px;

}

.transformed-btn {
    position: relative !important;
    bottom: -219px !important;
    left: 86px !important;
}

.goback-btn {
    width: 40px;
    height: 40px;
}

.video-container-transformed_inner {
    background: white;
    border-radius: 15px;
    width: 250px;
    height: 250px;
}

.video-container_details div {
    position: relative;
}

.video-container_details div:nth-child(1) {
    left: 24px;
    bottom: 15px;
}

.video-container_details div:nth-child(2) {
    left: -9px;
    bottom: 21px;
}

.video-container_details div:nth-child(3) {
    left: -36px;
    bottom: 15px;
}

.video-container_details div:nth-child(4) {
    left: -44px;
}

.video-container_details img {
    width: 40px;
}

/* .video-conatiner_datavideo {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
} */
.videoplayer-datavideo {
    width: 250px;
    height: 250px;
    border-radius: 300px;
    -webkit-border-radius: 300px;
    -moz-border-radius: 300px;
    -ms-border-radius: 300px;
    -o-border-radius: 300px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}


#video-container-main_videos {
    -webkit-perspective: 800px;
    perspective: 800px;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    overflow: hidden;
}

video {
    height: inherit;
}

.video-container_details-bottom {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: flex;
    width: 250px;
    margin-top: 31px;
    left: -36px;
    bottom: -57px;

}

#video-list_home {
    display: flex;
    justify-content: center;
    cursor: pointer;
    /* width: 40px;
    height: 40px; */
    position: absolute;
    left: 38%;
    bottom: 2px;

}

#list-btns {
    z-index: 99999;
}

#video-container_videolist {
    height: 310px;
    width: 250px;
    top: 0px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0px auto;
    border-radius: 20px;
    background-color: white;
    overflow: hidden;
    opacity: 0;
    visibility: visible !important;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

/* #video-container_videolist:hover {
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
} */

.video-btn {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 31px;
    height: 31px;
}

.content-btn {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    cursor: pointer;
}

.content-btn:hover {
    border-radius: 70%;
    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 0 2px #f05f75;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 0 2px #f05f75;
    -webkit-border-radius: 70%;
    -moz-border-radius: 70%;
    -ms-border-radius: 70%;
    -o-border-radius: 70%;
}

.video-btn:hover {
    border-radius: 70%;
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4), 0 0 0 2px #f05f75;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4), 0 0 0 2px #f05f75;
    -webkit-border-radius: 70%;
    -moz-border-radius: 70%;
    -ms-border-radius: 70%;
    -o-border-radius: 70%;
}

/* #video-list_home:hover{
    border-radius: 70%;
    -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4), 0 0 0 2px #f05f75;
            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4), 0 0 0 2px #f05f75;
    -webkit-border-radius: 70%;
    -moz-border-radius: 70%;
    -ms-border-radius: 70%;
    -o-border-radius: 70%;
    cursor: pointer;
} */

#video-chat_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/chat.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-camera_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/kamerka.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-replay_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/replay.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-voice_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/glosny.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-muted_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/wyciszony.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-close_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/x.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-play_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/play.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-pause_btn {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/stop.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-container_transform {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/transform.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-container_list {
    background-image: url('https://d1di1n3u3z4v3g.cloudfront.net/ideabank-bot-mainpage/images/lista.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#video-content {
    height: 300px;
}


#video_btn-bottom {
    left: 80px;
    bottom: -149px;
    display: flex;
}

#kredyt, #konto {
    margin-right: 10px;
    font-size: 14px;
}

#konto,
#kredyt,
#czat {
    padding: 0px 10px !important;
    color: white;
    background: #0099ff;
    border: none;
    font-size: 14px;
}

#konto:hover {
    background-color: #0598de;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

#kredyt:hover {
    background-color: #0598de;
    -webkit-transition: transform 0.5s, -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: transform 0.5s, -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -moz-transition: transform 0.5s, -webkit-transform 0.5s;
    -ms-transition: transform 0.5s, -webkit-transform 0.5s;
}

#czat {
    display:  none;
    background-color: #0598de;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

.iframe-display_btn img {
    width: 100%;
}

.hide-content {
    display: none;
}

#video-container_transform {
    left: 10px;
    bottom: 0px;
    margin-right: 26px;
}

#video-container_home {
    left: 0px;
    bottom: 3px;
    margin-right: 28px;
}

#video-container_list {
    bottom: 0px;
}

#video-container_left {
    right: 46px;
    bottom: -2px;
}

#video-container_right {
    right: 53px;
}

#video-player_not-transformed {
    opacity: 1;
}

#video-pause_btn,
#video-play_btn {
    left: -16px;
    bottom: -70px;
}

#video-voice_btn {
    display: none;
    left: 6px;
    bottom: -113px;
}

#video-play_btn {
    display: none;
}

#video-camera_btn {
    left: 30px;
    bottom: 25px;
}

#video-muted_btn {
    left: 6px;
    bottom: -113px;
}

#video-voice_btns {
    bottom: 53px;
    left: -22px;
}

#video-close_btn {
    bottom: -64px;
    left: -22px
}

#video-chat_btn {
    left: 65px;
    bottom: 16px;
}

#video-replay_btn {
    bottom: -57px;
    left: -3px;
}

.video-btn,
.transform-show {
    cursor: pointer;
}

.btn-select {
    text-align: center;
}

#video-container_select {
    height: 100px;
    width: 230px;
    background: #f9f9f9;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.video-container_details .video-btn {
    display: block;
}

#video-content_btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: -10px;
}

.video-container_details .video-btn#video-container_home {
    display: none;
    opacity: 0;
}

.video-container_details.state-list .video-btn#video-container_home {
    display: block;
}

.show-home_btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    margin-left: -69px;
    opacity: 1 !important;
}

/* new csss */


.rf-container {
    width: 100%;
    margin: 0 auto;
    max-width: 1090px
}

.open-answer,
.show {
    display: block !important
}

.open-answer .faq-comp-heading .read-more-btn {
    background-color: #999 !important
}

.open-answer .faq-comp-heading .read-more-btn .plus-minus+.plus-minus {
    -webkit-transform: rotate(-180deg) !important;
    -ms-transform: rotate(-180deg) !important;
    transform: rotate(-180deg) !important
}

.open-answer .faq-answer {
    opacity: 1 !important;
    max-height: 500px !important
}


.video-list {
    padding: 0 20px 13vh;
}

.video-list .rf-container .video-list-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.video-list .rf-container .page-title {
    text-align: left;
    font-size: 12px;
}


.video-list .rf-container .faq-content.rf-ar .faq-component .faq-comp-heading .read-more-btn {
    margin: 0 0 0 15px !important
}

.video-list .rf-container .faq-content .faq-component {
    display: none;
    max-width: 845px;
    margin-top: 20px
}

.video-list .rf-container .faq-content .faq-component .faq-comp-heading {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 2vh;
    cursor: pointer
}

.video-list .rf-container .faq-content .faq-component .faq-comp-heading .read-more-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: #7EE016;
    background-repeat: no-repeat;
    margin-right: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.video-list .rf-container .faq-content .faq-component .faq-comp-heading .read-more-btn .plus-minus {
    width: 12px;
    height: 1px;
    background-color: #FFF;
    display: block;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear
}

.video-list .rf-container .faq-content .faq-component .faq-comp-heading .read-more-btn .plus-minus+.plus-minus {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -1px
}

.video-list .rf-container .faq-content .faq-component .faq-comp-heading .faq {
    color: #666;
    font-size: 12px;
}

.video-list .rf-container .faq-content .faq-component .faq-answer img {
    width: 100%;

}

.video-list .rf-container .faq-content .faq-component .faq-answer {
    color: #666;
    font-weight: 300;
    line-height: 26px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear
}

.video-list .rf-container .faq-content .faq-component .faq-answer a {
    color: #0684ED
}

.video-list .rf-container .faq-content .faq-component .faq-answer a:hover {
    color: #259CFF
}

.video-list .rf-container .faq-content .faq-component .faq-answer a:active {
    color: #0073D2
}

.video-list .open-ticket-container .open-ticket {
    height: 90px;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #F2F2F2;
    border-radius: 20px;
    padding: 30px;
    margin-top: 5vh
}

.video-list .open-ticket-container .open-ticket .ask-question {
    padding-right: 40px;
    width: 136px !important
}

.video-list .open-ticket-container .open-ticket .open-ticket-text {
    width: 50%
}

.video-list .open-ticket-container .open-ticket .descr {
    color: #666;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 20px
}

.video-list .open-ticket-container .open-ticket .rf-btn {
    margin-left: auto;
    font-size: 14px;
    letter-spacing: 0
}

.rf-btn {
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    border-radius: 30px;
    padding: 0 40px;
    display: inline-block;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 300
}

.rf-btn.btn-blue {
    background-color: #0684ED;
    color: #FFF
}

.btn-blue:hover {
    background-color: #259CFF
}

.btn-blue:active {
    background-color: #0073D2
}

@media (max-width:768px){

    #video-container{
        transform: scale(0.8);
    }
}