/* Bubble */
.YOB-bubbleImg{
    position: fixed;
    right: 3%;
    color: white;
    text-align: center;
    font-size: 1em;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    font-family: Arial;
    min-width: 135px; 
    z-index: 11000000000;
    min-height: 15px;
}

.YOB-bubbleRounded{
    top: 85%;
    overflow:hidden;
    -webkit-border-radius:7%;
    -moz-border-radius:50px;
    border-radius:50px;
    width:60px;
    height: 103px;
    background-repeat : no-repeat;
    background-position : center;
}

.YOB-bubbleLargeRounded{
    top: 85%;
    overflow:hidden;
    -webkit-border-radius:7%;
    -moz-border-radius:50px;
    border-radius:50px;
    width:10%;
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;

}

.YOB-bubbleImgClose:hover{
    cursor: pointer;
}
.YOB-bubbleImgOpen:hover{
    cursor: pointer;
}

/* Chat window*/
.YOB-chat{
    all: initial;
    position: fixed;
    right: 6%;
    top: 5%;
    height: 65%;
    width: 25%;
    font-family: Arial;
    min-width: 340px;
    z-index: 10000000000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding:0;
    margin:0;
}

.YOB-enlargeChat{
    margin-top: none;
    position: fixed;
    top: 1%;
    right: 0%;
    height: 99%;
    width: 50%;
    font-family: Arial;
    min-width: 500px;
    z-index: 10000000000; 
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Header */
.YOB-chatHeader
{
    color: white;
    z-index: 98;
    width: 100%;
    font-size: 1em;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.YOB-enlargeChat .YOB-chatHeader{
    font-size: 1.4rem;
}

.YOB-headerTitle{
    padding-right: 25%;
    padding-left: 25%;
}

.YOB-headerButtons{
    right: 45px;
    top:13px;
    z-index: 444;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    max-width: 35px;
    position: absolute;
}

.YOB-enlargeChat .YOB-headerButtons{
    width: 45px;
    min-height: 20px;
    top:15px;
    right: 45px;
}

.YOB-headerButtons img{
    height: 20px;
    background-color: rgba(0,0,0,0) !important;
}

.YOB-closeCross{
    cursor: pointer;
    margin-left: 15%;
}

.YOB-enlargeButton{
    cursor: pointer;
    margin-left: 15%;
}

.YOB-refreshButton{
    cursor: pointer;
}
/* Footer */
.YOB-chatFooter
{
    padding-top: 35px;
    height: 50px;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    color: white;
    margin-top: -30px;
}

.YOB-chatFooter a{
    color: white;
}

.YOB-chatFooter a:hover{
    cursor: pointer;
}

.YOB-enlargeChat .YOB-chatFooter{
    height: 5%;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
}

/* FIX integration */
.YOB-chat .video-container{
    all: unset;
    width: 100%;
    height: 100%;
}

.YOB-enlargeChat .video-container{
    all: unset;
    width: 100%;
    height: 100%;
}

/* Chat body */
.YOB-iframe{
    height: 100% !important;
    width: 100% !important;   
    background-color: white;
    z-index: 100000;
    border-right: none;
    border-left: none;
    border-top: none; 
    margin: 0 !important;   
}

.YOB-enlargeChat .YOB-iframe{
    height: 90% !important;
}


/* PopUp */
.YOB-popup{
    height: 15%;
    width: 25%;
    background-color: rgba(240, 240, 240, 0.952);
    border-radius: 25px;
    position: fixed;
    right: 12%;
    top: 60%;
    padding-top:1%;        
}

.YOB-PopUpTextZone
{
    text-align: justify;
    font-size: 1.1em;
    font-family: Arial;
    margin-left: 5%;
    padding-right: 10%;
    margin-top: 0;
}

.YOB-closePopUpCross{
    width: 6%;
}


/*Mobile*/
@media (max-width: 812px)  {
    
    .YOB-chat{
        position: fixed;
        top: 0;
        height: 100%;
        width: 96%;
        right: 2%;
        background-repeat: no-repeat;
        font-family: Arial;
        min-width: 270px; 
    }

    .YOB-chatHeader{
 
        color: white;
        z-index: 98;
        width: 100%;
        text-align: center;
        font-size: 1.4em;
        font-weight: bold;
        box-shadow: 0px 0px 0px rgba(75, 75, 75, 0);
    }
    
    .YOB-headerTitle {
        padding-left: 0%;
    }

    .YOB-chatFooter{
        height: 5%;
        width: 100%;
        padding-top: 0%;
        text-align: center;
        margin-top: -3%;
        color: white;
    }

    .YOB-iframe{
        height: 82% !important;
        width: 100% !important;
        background-color: white;
        margin-left: 2%;
        z-index: 100000;
        border-right: none;
        border-left: none;
        border-top: none;

        /* Zoom of iFrame */
        transform: scale(1);
        -ms-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .YOB-enlargeButton {
        display: none;
    }

    .YOB-closeCross{
        width: 6%;
        margin-right: 10%;
        margin-left: 0%;
        cursor: pointer;
        
    }

    .YOB-headerTitle{
        padding-right: 10%;
        padding-left: 10%;
    }
    
    .YOB-headerButtons{
        right: 5px;
        z-index: 444;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: absolute;   
    }

    .YOB-headerButtons img{
        width : 70%;
        height: unset;
        background-color: initial;
    }

    @supports (-ms-ime-align:auto) {
        .selector {
            property: value;
        }
    }

    .YOB-bubbleImg{
        position: fixed;
        right: 3%;
        color: white;
        text-align: center;
        font-size: 1em;
        padding-top: 1.5%;
        padding-bottom: 1.5%;
        font-family: Arial;
        min-width: 135px; 
        z-index: 11000000000;
        min-height: 40px;
    }
    
    .YOB-bubbleRounded{
        top: 80%;
        overflow:hidden;
        -webkit-border-radius:7%;
        -moz-border-radius:50px;
        border-radius:50px;
        width:10%;
        background-repeat : no-repeat;
        background-position : center;
    }
    
    .YOB-bubbleLargeRounded{
        top: 85%;
        overflow:hidden;
        -webkit-border-radius:7%;
        -moz-border-radius:50px;
        border-radius:50px;
        width:25%;
        background-size : cover;
        background-repeat : no-repeat;
        background-position : center;
    
    }
}