html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.JLVNoAudio {
    height: 100%;
}

.JLViews * {
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    color: #474F5C;
}

.JLViews {
    width: 100%;
    height: 100%;
    background: #fff;
    /*box-shadow: grey 0px 0px 13px -2px;*/
    overflow: hidden;
}

.JLVmain {
    position: fixed;
    width: 100%;
    max-width: 1020px;
    /*min-width: 620px;*/
    background: #fff;
    top: 10%;
    /*left: 50%;*/
    margin: auto;
    /*transform: translate(-50%, -50%);*/
    overflow: hidden;
    z-index: 99;
}

.JLViews.fullscreen {
}

.JLV { /*View*/
    /*display: none;*/
    text-align: center;
    /*height: 100%;*/
    position: relative;
    align-items: center;
}

    .JLV .container {
        width: 100%;
        padding: 5px;
    }


    /*Main V*/
    .JLV.JLVmain {
    }


        .JLV.JLVmain .chatOptions {
            display: none;
        }

.JLViews .grey-box {
    /*max-width: 600px;*/
    padding: 8px;
    margin: 0 auto 10px;
    color: #474F5C;
    background-color: #E1E3E7;
}

    .JLViews .grey-box.white {
        background-color: #FFFFFF;
    }


/*Form V*/
.JLV.JLVform {
}

.JLV .comm_type {
    margin-bottom: 40px;
}

    .JLV .comm_type span {
        padding: 0 30px;
        display: inline-block;
    }

    .JLV .comm_type button {
        height: 50px;
        padding: 50px 0px 0px 0px;
        font-size: 11pt;
        min-width: 50px;
    }

    .JLV .comm_type .choose_mic {
        background: url(../images/voice_passive.svg) center center transparent no-repeat;
    }

        .JLV .comm_type .choose_mic.active {
            background-image: url(../images/voice_active.svg)
        }

    .JLV .comm_type .choose_key {
        background: url(../images/chat_passive.svg) center center transparent no-repeat;
    }

        .JLV .comm_type .choose_key.active {
            background-image: url(../images/chat_active.svg)
        }

/*Chat V*/
.JLV.JLVchat {
}

    .JLV.JLVchat .container .cam-panel {
        width: calc(65vw - 30px);
        height: calc(calc(65vw - 30px) * 0.5625);
        float: left;
        /*transition: all 500ms ease-in;*/
        /*background: #dadee1 url("../images/bg_studio.jpg")  no-repeat;*/
        background-size: cover;
        position: relative;
    }

    .JLV.JLVchat .container .chat-panel {
        width: 35vw;
        height: calc(calc(65vw - 30px) * 0.5625);
        float: right;
        background-color: #dadee1;
        position: relative;
        /*transition: all 500ms ease-in;*/
        text-align: left;
        font-size: 10pt;
    }

    .JLV.JLVchat .container .banner-pannel {
        clear: both;
    }

.cam-panel .video {
    height: 100%;
}

#players {
    height: 100%;
    position: relative;
}

#localPlayer {
    overflow: hidden;
    height: 0px;
}

#remotePlayer {
    height: 100%;
}

    #remotePlayer > div > video {
        position: relative !important;
    }

    #remotePlayer .pip {
        position: absolute !important;
        width: 250px !important;
        height: 140.625px !important;
        top: 10px !important;
        left: auto !important;
        right: 10px !important;
    }

/*Chat Buttons*/
.JLV.JLVchat .container .cam-panel .video-control {
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    background: rgb(0,0,0,0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .5) 100%);
}


.JLViews button {
    border-radius: 4px;
    transition: 0.3s;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    padding: 15px 30px;
    font-size: 18px;
}

    .JLViews button.shadow {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    }

    .JLViews button.red {
        color: #fff;
        background-color: #E30613;
    }


        .JLViews button.red:disabled {
            background-color: #efa3a3;
            /*border: 1px solid #cfd0d2; */
            color: white;
            cursor: not-allowed;
        }

    .JLViews button.default {
        color: #525F6B;
        background-color: #DBDEE1;
    }

        .JLViews button.default:hover {
            color: #fff;
            background-color: #838c94;
            border-color: #838c94;
        }


.JLViews .video-control .btn_voice,
.JLViews .video-control .btn_endcall,
.JLViews .video-control .btn_chat {
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
    border-radius: 17px;
    padding: 0px;
}

.JLViews .video-control .btn_voice {
    width: 33px;
    height: 32px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: url(../images/voice.png) center center transparent no-repeat;
}

    .JLViews .video-control .btn_voice.muted {
        background-color: red;
    }

.JLViews .video-control .btn_endcall {
    width: 33px;
    height: 32px;
    position: absolute;
    left: calc(50% - 15px);
    bottom: 10px;
    background: url(../images/endcall.png) center center transparent no-repeat;
}

.JLViews .video-control .btn_chat {
    width: 33px;
    height: 32px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: url(../images/chatpanel.png) center center transparent no-repeat;
}

.JLViews .btn_fullscreen {
    width: 33px;
    height: 32px;
    position: absolute;
    right: 10px;
    top: 10px;
    background: url(../img/fullscreen_on.webp) top right transparent no-repeat;
    background-size: contain;
    z-index: 9;
}


/*CHAT BAR*/

.nochat .JLV.JLVchat .container .cam-panel {
    width: calc(100vw - 20px);
    height: 100%; /*calc(100vw  * 0.5625);*/
}

.nochat .JLV.JLVchat .container .chat-panel {
    display: none;
}


.chat-panel.chatpanel-none {
    display: none !important;
}

/* JS-driven lock: the customer enters Step2 in queue/waiting state and
   the panel only unlocks once the operator joins the LiveKit room
   (RoomEvent.ParticipantConnected, or remoteParticipants already populated
   on rejoin). High specificity so this beats the portrait override. */
.JLViews .JLV.JLVchat .container .chat-panel.chat-locked {
    display: none !important;
}

.nochat .JLV.JLVchat .container .chat-frame {
    display: none;
}

.JLV.JLVchat .container .chat-panel .info-box {
    width: calc(100% - 20px);
    height: 20px;
    margin: 0 10px;
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 2px #91949b solid;
}

    .JLV.JLVchat .container .chat-panel .info-box span {
        float: right;
    }

.JLV.JLVchat .container .chat-panel .messages {
    margin: 0 10px;
    height: calc(100% - 125px);
    overflow: scroll;
    overflow-x: hidden;
}

.JLV.JLVchat .container .chat-panel .chat-form {
    margin: 10px;
    padding: 10px;
    position: relative;
    background: #fff;
}

    .JLV.JLVchat .container .chat-panel .chat-form textarea {
        width: 70%;
        border: 0px;
        outline: none;
        resize: none;
    }

    .JLV.JLVchat .container .chat-panel .chat-form button {
        width: 24%;
        float: right;
        background-color: #838c95;
        color: #fff;
        border-radius: 4px;
        transition: 0.3s;
        font-size: 18px;
        padding: unset;
    }


/*MESSAGES*/
.JLViews .chat-panel .messages .message-item {
    margin-bottom: 2px;
    overflow: auto;
}

    .JLViews .chat-panel .messages .message-item.center {
        text-align: center;
    }

    .JLViews .chat-panel .messages .message-item.left span {
        float: left;
        margin-left: 10px;
        margin-top: 10px;
        font-size: 14px;
    }

    .JLViews .chat-panel .messages .message-item.right span {
        float: right;
        margin-right: 10px;
        margin-top: 10px;
        font-size: 14px;
    }

    .JLViews .chat-panel .messages .message-item p {
        border-radius: 10px;
        display: inline-block;
        padding: 10px;
        max-width: 60%;
        margin: 0;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .JLViews .chat-panel .messages .message-item.typing p {
        padding: 0 10px;
    }

    .JLViews .chat-panel .messages .message-item.right p {
        float: right;
        background-color: #666e7b;
        color: #fff;
        text-align: left;
        margin-right: 5px;
    }

    .JLViews .chat-panel .messages .message-item.left p {
        float: left;
        color: #666e7b;
        background-color: #fff;
        text-align: left;
    }
/*Generic*/
.JLViews .logo {
    max-width: 50%;
    margin: 5% auto 0;
}


.JLoffline {
    text-align: center;
    font-family: Arial;
    background: rgba(255,255,255,0.5);
    margin: 10px auto;
    padding: 8px;
    width: 80%;
}


.nochat.tablet .JLV.JLVchat .container .cam-panel {
    width: calc(81vw - 20px);
    height: calc(81vw * 0.5625);
    left: 50%;
    margin-left: calc(calc(81vw - 20px) / 2 * -1);
}

/*Overlays*/

#quenum {
    position: absolute;
    background: #fff;
    bottom: 49%;
    border-radius: 16px;
    font-size: 11pt;
    text-align: center;
    box-shadow: #d2d2d2 1px 1px 0px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
}


#blockCatch, #blockCatchMic, #clickUnblock {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    color: #fff;
    background: rgba(0,0,0,0.6);
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#blockCatchMic {
    bottom: auto;
}

#blockCatch .pointer {
    position: absolute;
}

#clickUnblock {
    top: unset;
    display: block;
}

#micPleaseAllow {
    width: 300px;
    background: #fff;
    box-shadow: 2px 2px 6px #909090;
    margin: 21px;
    text-align: left;
    padding: 10px;
    position: relative;
    left: 150px;
    top: 60px;
    display: none;
    position: absolute;
}

    #micPleaseAllow:after {
        margin: 0;
        left: 0;
        right: auto;
        border-width: 5px;
        border-color: transparent;
        border-bottom-color: #fff;
        border-left-color: #fff;
        top: -10px;
        bottom: auto;
        content: "";
        display: block;
        border-style: solid;
        position: absolute;
    }

@keyframes clickHere {
    0% {
        padding-left: 35px;
        padding-top: 35px;
        width: 40px;
    }

    50% {
        padding-left: 65px;
        padding-top: 65px;
        width: 60px;
    }

    100% {
        padding-left: 35px;
        padding-top: 35px;
        width: 40px;
    }
}

#blockCatch .pointer svg {
    width: 50px;
    animation: clickHere 5s infinite;
}

.JLV.JLVchat .speaker {
    vertical-align: middle;
    box-sizing: border-box;
    display: inline-block;
    background: currentColor;
    background-clip: content-box;
    width: 1em;
    height: 1em;
    border: .333em solid transparent;
    border-right-color: currentColor;
    position: relative;
    left: -.337em;
    font-size: 50pt;
    color: #c00;
}

    .JLV.JLVchat .speaker.-on:before, .speaker.-on:after {
        content: '';
        background: currentColor;
        width: .1em;
        position: absolute;
    }

    .JLV.JLVchat .speaker.-on:before {
        height: .333em;
        right: -.533em;
    }

    .JLV.JLVchat .speaker.-on:after {
        height: .667em;
        right: -.733em;
        top: -50%;
    }

    .JLV.JLVchat .speaker.-off:before, .speaker.-off:after {
        content: '';
        background: currentColor;
        width: .1em;
        position: absolute;
        height: 1.2em;
        margin-top: -.333em;
        top: -.1em;
        left: .1em;
        transform: translateX(.333em) rotate(-45deg);
    }

    .JLV.JLVchat .speaker.-off:before {
        background: #980000;
        left: .2em;
    }


/**************** Is IOS IPHONE/IPAD CSS BEGIN***************/

.is-not-ios, .is-ipad {
    height: 100%;
}

.is-mobile.is-ios.keyboard-off {
    height: 100%;
}

.is-mobile.is-not-ios.keyboard-off {
    height: 100%;
}

.is-mobile.is-ios #imgFullScreen {
    display: none;
}

.is-mobile #imgFullScreen {
    display: none;
}


.is-tablet #imgFullScreen {
    display: inline;
}


.is-mobile.is-ios.keyboard-on {
    align-items: self-start !important;
    /*height: calc(100% - 240px) !important;*/ /* min:240 Max:240*/
    height: 100%;
}

    .is-mobile.is-ios.keyboard-on .container {
        /*height: calc(100% - 200px) !important;*/
    }

/**************** Is IOS IPHONE/IPAD CSS END***************/

/**************** Is Mobile CSS BEGIN***************/



.is-mobile .container .chat-panel {
    min-width: 100%;
    max-height: calc(98vh - calc(100vw * 0.5625));
    display: block;
    flex: 1;
}

.is-mobile .container .cam-panel {
    width: calc(100vw) !important;
    height: calc(100vw * 0.5625) !important;
}




@media only screen and (orientation: landscape) {


    .is-ipad .container .cam-panel,
    .is-tablet .container .cam-panel {
        width: calc(65vw - 30px) !important;
        height: calc(calc(65vw - 30px) * 0.5625) !important;
    }

    .nochat .is-ipad .container .cam-panel,
    .nochat .is-tablet .container .cam-panel {
        width: calc(100vw - 20px) !important;
        height: 100% !important;
    }

    .nochat .is-ipad .divButtons,
    .nochat .is-tablet .divButtons {
        bottom: 70px;
    }


    .is-ipad .container .chat-panel,
    .is-tablet .container .chat-panel {
        min-width: 1% !important;
        max-height: 100% !important;
    }

    .is-ipad .container,
    .is-tablet .container {
        height: auto !important;
    }

    .is-tablet.keyboard-on {
        align-items: flex-start !important;
        /*height: 50%;*/
    }

    .is-mobile.is-ios.is-chrome .video {
    }

    .is-mobile.is-ios.is-firefox .video {
        margin-right: 100px;
    }

    .is-mobile.is-ios.is-edge .video {
        margin-right: 100px;
    }
}

@media only screen and (min-device-width: 600px) and (orientation: landscape) {
    .divButtons {
        bottom: 70px !important;
    }
}

@media only screen and (orientation: portrait) {


    .is-ipad.keyboard-on .container {
        /* height: 10% !important;*/
    }

    .is-ipad.keyboard-on.browsertab-open .chat-frame {
        height: 90% !important;
    }

    .is-ipad.keyboard-on.browsertab-close .chat-frame {
        height: 90% !important;
    }

    .is-ipad.keyboard-on {
        align-items: self-start !important;
    }


    /*.is-mobile.is-ios.portrait.keyboard-on .chat-panel {
		bottom: 216pt;*/ /*for iphone always 216pt in potrait mode*/
    /*}*/

    /*.is-mobile.is-ios.portrait.keyboard-on.is-ipad .chat-panel {
		bottom: 264pt;*/ /*for ipad always 216pt in potrait mode*/
    /*}*/

    .JLViews.keyboard-on.is-iphone.is-safari {
        height: 62% !important; /* 55% */
        /*bottom: 324pt;*/ /*for ipad always 352pt in landscape mode*/
        position: fixed !important;
        bottom: 1px !important; /*bottom: 10px; for old IOS < 15.0 */
        top: initial; /*top: initial;*/
    }

    .JLViews.keyboard-on.is-ipad.is-safari {
        height: 75% !important;
        /*bottom: 324pt;*/ /*for ipad always 352pt in landscape mode*/
        position: fixed !important;
        bottom: 10px;
    }

    .JLViews.keyboard-on.is-andoid-phone1 {
        height: 62% !important; /* 55% */
        /*bottom: 324pt;*/ /*for ipad always 352pt in landscape mode*/
        position: fixed !important;
        bottom: 1px !important; /*bottom: 10px; for old IOS < 15.0 */
        top: initial; /*top: initial;*/
    }

    .JLViews.keyboard-on.is-android-tablet1 {
        height: 75% !important;
        /*bottom: 324pt;*/ /*for ipad always 352pt in landscape mode*/
        position: fixed !important;
        bottom: 10px;
    }
}



.cam-panel {
    z-index: 99;
}

.is-mobile .container .chat-panel {
    min-width: 100%;
    max-height: calc(98vh - calc(100vw * 0.5625));
    display: block;
    flex: 1;
}

.is-mobile .container {
    height: 100%
}
/**************** Is Mobile CSS END***************/

/*Mobile Phones*/

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    /*, (max-device-width: 1024px) and (max-aspect-ratio: 13/9)*/

    #micPleaseAllow {
        left: 10px;
        right: 10px;
        top: 5px;
    }

    .JLViews .container {
        height: 100%;
        padding: 0px;
        display: flex;
        flex-direction: column;
    }

    .JLV.JLVchat .container .cam-panel {
        width: calc(100vw) !important;
        height: calc(100vw * 0.5625) !important;
    }

    .JLV.JLVchat .container .chat-panel {
        min-width: 100%;
        max-height: calc(98vh - calc(100vw * 0.5625));
        display: block;
        flex: 1;
    }

    /* Phone portrait: chat panel always visible — legacy behaviour.
       The `.nochat` toggle is meant for landscape/desktop where the
       camera takes the full viewport and the user reveals chat with
       the message icon. On portrait that icon is hidden anyway, so
       leaving `.nochat` opaque would just trap the user with no chat.
       The :not(.chat-locked) carve-out lets the JS gate the panel
       while the customer is still in the queue (no operator yet). */
    .nochat .JLV.JLVchat .container .chat-panel:not(.chat-locked) {
        display: block !important;
    }

    /* Dark sticky chat input bar (matches the legacy mobile look). */
    .JLV.JLVchat .chat-panel #chatPanelContainer { height: 100%; }

    .JLV.JLVchat .chat-panel .discussion-list {
        background: #e1e3e7;
    }

    .JLV.JLVchat .chat-panel .discussion-message {
        background: #4a5260;
        border-top: none;
        /* v2.17.28 — sol padding 12px → 4px.
           v2.17.29 — 4px → 0; orphan &nbsp; collapse.
           v2.17.30 — 0 → 6px (dizayn nefesi).
           v2.17.31 — 6px → 15px. Input'un inline `padding-left:15px`'i var
           (emoji ile "Zum" arasi 15px). Bar'in sol padding'i ayni 15px
           olunca emoji simetrik konumlanir: sol bosluk = emoji-input bosluk. */
        padding: 10px 12px 10px 15px;
    }

    /* v2.17.29 — _ChatPanel.cshtml'de plus/minus ikonlari arasindaki orphan
       `&nbsp;` text node'larini collapse et. mobile portrait'te ikonlar zaten
       gizli ama aralarindaki nbsp karakterleri hala yer kaplayip emoji
       butonunu icerden baslatiyordu. font-size:0 sadece text node'lari
       sifirlar; explicit font-size'li cocuklar (#emojiToggle 25px,
       #inpMessages 22px) etkilenmez. */
    .JLV.JLVchat .chat-panel .message-block {
        font-size: 0 !important;
    }

    .JLV.JLVchat .chat-panel .d-message .message-block input[type="text"] {
        color: #fff;
        background: transparent;
        /* iOS Safari auto-zooms any focused input below 16px and the
           viewport stays scaled-up after the keyboard closes. Pin the
           field to 16px so focus/blur leave the page at scale 1. */
        font-size: 16px;
    }
    .JLV.JLVchat .chat-panel .d-message .message-block input[type="text"]::placeholder {
        color: #c5c9d0;
    }
    .JLV.JLVchat .chat-panel .d-message .send-msg,
    .JLV.JLVchat .chat-panel .d-message .send-msg i {
        color: #fff;
    }
    /* Hide font +/- on phones — limited row width. */
    .JLV.JLVchat .chat-panel #plusIcon,
    .JLV.JLVchat .chat-panel #minusIcon {
        display: none;
    }

    /* Only mic + endcall belong on the cam strip in portrait. */
    .JLV.JLVchat #imgFullScreen { display: none !important; }

    .JLV.JLVchat .container .btn_chat,
    .JLV.JLVchat .container .btn_fullscreen {
        display: none;
    }

    .JLViews .cam-panel #quenum {
        font-size: 9pt;
    }

    .JLVmain {
        top: 0px;
    }
}

@media only screen and (max-device-height: 812px) and (orientation: landscape) and (min-aspect-ratio: 13/9) {

    #micPleaseAllow {
        left: 10px;
        right: 10px;
        top: 5px;
    }

    .JLViews {
        overflow: unset;
        box-shadow: unset;
    }


    .JLVmain {
        top: 0px;
    }

    .JLV .container {
        padding: 0px;
    }

    /*	.JLV.JLVchat .container .cam-panel {
			width: calc(100vh * 1.77777778);
			height: calc(100vh);
			float: unset;
			margin: 0 auto;
		}*/

    /*.JLV.JLVchat .container .chat-panel,
		.JLV.JLVchat .container .btn_chat,
		.JLV.JLVchat .container .btn_fullscreen {
			display: none;
		}*/

    .JLViews .logo {
        max-width: 30%;
        margin: 0 auto 0;
    }

    .JLV .main_title {
        margin: 0px;
    }

    .JLV .main_text,
    .JLV h2 {
        margin: 0 auto 8px;
        /*font-size: 11pt;*/
    }

    .JLViews .grey-box.white {
        padding: 0px;
    }

    .JLV .comm_type {
        margin-bottom: 25px;
    }

    .JLViews .cam-panel #quenum {
        font-size: 9pt;
    }
}

/* samsung tablet on keyboard on */
@media only screen and (orientation: landscape) {

    .JLV.JLVchat.portrait .container .cam-panel {
        width: calc(100vw) !important;
        height: calc(100vw * 0.5625) !important;
    }

    .JLV.JLVchat.portrait .container .chat-panel {
        min-width: 100%;
        width: calc(100vw) !important;
        max-height: calc(98vh - calc(100vw * 0.5625));
        display: block;
        flex: 1;
    }

    .JLV.JLVchat.portrait #imglocalMessage {
        display: none !important;
    }
}

/*Tablet*/

/*Toolkit*/



::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 2px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    /*  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
    background-color: rgba(100, 100, 100, .50);
}

.rst {
    clear: both;
}

.divButtons {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.jura_client_remotevdeo {
    height: 100% !important;
    width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.grey-box {
    padding: 20px !important;
}

.JLViews h1, .JLViews h2, .JLViews h3, .JLViews h4, .JLViews h5, .JLViews h6 {
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .JLViews {
        height: 100%;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: 0px;
        transform: none;
        width: 100vw;
    }
}


/* Only for firefox */
@-moz-document url-prefix() {
    .nochat .JLV.JLVchat .container .cam-panel {
        height: calc(100vh);
    }
}

@media only screen and (orientation: landscape) {

    .nochat .JLV.JLVchat .container .cam-panel {
        height: calc(100vh);
    }

    /* set height only for mobile */
    .nochat .JLV.JLVchat.is-mobile .container .cam-panel {
        height: calc(100vw * 0.5625) !important;
    }

    /* if for mobile phones */
    .nochat .JLV.JLVchat.is-mobile.use-max-height .container .cam-panel {
        height: calc(100vh - 1px) !important;
    }

    .nochat .JLV.JLVchat.is-mobile.is-ios.use-max-height .container .cam-panel .divButtons {
        bottom: 30px;
    }

    .nochat .JLV.JLVchat.is-mobile {
        align-items: self-start;
    }


    .JLV.JLVchat.is-mobile #imglocalRotate {
        display: inline !important;
    }

    .JLV.JLVchat.is-mobile.is-tablet #imglocalRotate {
        display: inline !important;
        /*display: none !important;*/
    }


    .JLV.JLVchat.is-mobile.is-tablet.keyboard-on #imglocalRotate {
        display: none !important;
        /*display: none !important;*/
    }

    .JLV.JLVchat.is-mobile.is-tablet.portrait #imglocalRotate {
        display: none !important;
        /*display: none !important;*/
    }


    /*.is-mobile.landscape.keyboard-on.is-ipad .container {
		position: absolute;
		bottom: 374pt;*/ /*for ipad always 352pt in landscape mode*/
    /*}*/

    .JLViews.keyboard-on.is-ipad {
        height: 49% !important;
        /*bottom: 324pt;*/ /*for ipad always 352pt in landscape mode*/
        position: fixed !important;
        bottom: 20;
    }
}

@media only screen and (orientation: landscape) {
    .JLV.JLVchat.is-mobile #imglocalMessage {
        display: none;
    }

    .JLV.JLVchat.is-mobile.is-tablet #imglocalMessage {
        /*display: inline;*/
    }

    .quenum {
        top: 150px;
    }

    .imglocalRotate-off {
        display: none !important;
    }
}

@media only screen and (orientation: portrait) {
    /* if portrait than don't show message icon */
    #imglocalRotate {
        display: none !important;
    }

    #imglocalMessage {
        display: none;
    }

    .quenum {
        bottom: 250px;
    }
}

.imglocalFullScreen-off, .imglocalMessage-off {
    display: none !important;
}

.ResumeShortly {
    position: absolute;
    background: #fff;
    bottom: 49%;
    border-radius: 16px;
    font-size: 17pt;
    text-align: center;
    box-shadow: #d2d2d2 1px 1px 0px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
    z-index: 9;
}

.lbl_join_chat_header span {
    font-size: 48pt;
    font-family: Arial;
    color: #9A7348;
}

.lbl_join_chat_text, .lbl_join_headset_text, .lbl_join_click_mouse_hand_text {
    font-size: 16pt;
    font-family: Arial;
    color: #575756;
}


.btn_join_chat {
    font-family: Arial;
    background-color: #6EBA5A !important;
    color: #ffffff;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

    .btn_join_chat span {
        font-size: 26pt;
    }

.img_client_headset {
    max-height: 50px;
    padding-right: 15px;
}

.div_icon_client {
    padding-top: 50px;
    padding-bottom: 50px;
}

.img_client_mouse_click {
    max-height: 50px;
    padding-right: 15px;
}

.hr_client {
    border-color: grey;
}

.img_client_ofis {
    max-height: 200px
}

.btn_customer_service {
    font-size: 12pt;
    font-family: Arial;
    background-color: #474F5C !important;
    color: #ffffff;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-top: 20px !important;
}

.lbl_customer_service {
    font-size: 16pt;
    font-family: Arial;
    color: #575756;
    margin-bottom: 30px;
}

.div_headset_text {
    text-align: left;
    padding-left: 60px;
}

.JLViews button.green:disabled {
    background-color: #a8d99b !important;
    color: white;
    cursor: not-allowed;
}

.JLViews button.green {
    background-color: #6EBA5A !important;
    color: white;
}

/* ============================================================
   v2.17.17 — Mobile (<=767px): mikrofon + telefonu kapat kontrolleri
   video uzerinden video ALTINDAKI hafif gri seride tasinir. Operator
   video icerigi (yuz, urun gosterimi) kontroller tarafindan engellenmesin.

   Yapi:
     1) #playerRemoteVideo'ya `aspect-ratio: 16/9` verilir → container tam
        video aspect'i kadar yer kaplar, internal letterbox kalkar.
     2) .divButtons `top: 100%` ile container'in alt kenarinin DIBINE
        konumlandirilir → cam-panel'in gri arkaplaninda strip olarak gorunur.
     3) #e0e0e0 (hafif gri) arkaplanli yatay serit; mic + endcall iconlari
        ortalanmis, 18px aralik.

   `aspect-ratio` Safari 15+ destekli; iOS 26 (gozlem: production
   trafigi cogunlukla bu surum ve uzeri) tam destekli. Daha eski
   Safari'de internal letterbox yine kalir, buton biraz daha asagida
   gorunur — UX hala kullanilabilir.

   Sadece mobile media query'sinde aktif; tablet/desktop'ta mevcut overlay
   pozisyonu (bottom:30px-70px varyantlari) korunur.
============================================================ */
/* v2.17.20 — KOK NEDEN BULUNDU + DUZELTILDI:
   Once tum bu kurallar `.nochat` prefix'iyle yazilmisti. Ama operator chat
   mesaji gelince [Areas/Client/Views/Home/Index.cshtml:1429-1430] `nochat`
   class'i JLViews'tan kaldiriliyor (chat panelini otomatik acmak icin) →
   tum `.nochat` prefixli kurallar dusuyordu → divButtons absolute/top:100%
   pozisyonunu kaybediyor, default overlay positioning'e donuyor → buton'lar
   video UZERINE biniyordu.

   Sebep neden client tarafinda fark edilmiyordu: client kendi mesaj yazinca
   `sendChatMessage` cagriliyor (line 1470), bu fonksiyon nochat KALDIRMIYOR.
   Sadece operator-from-DataReceived path'i nochat'i kaldiriyor.

   Fix: bu mobile portrait kurallarini `.nochat` prefixsiz yaz — chat acik
   veya kapali fark etmez, mobile portrait'te buton-strip ve video aspect-ratio
   her zaman ayni davranmali. Cam-panel kilidi (v2.17.19) zaten prefixsizdi. */
@media only screen and (max-width: 767px) {
    .JLV.JLVchat .container .cam-panel #playerRemoteVideo {
        aspect-ratio: 16 / 9;
        height: auto !important;
        max-height: calc(100vw * 0.5625) !important;
        width: 100% !important;
        position: relative;
        /* Inline `overflow: hidden` aspect-ratio'lu kutu DISINDAKI divButtons'i
           (top: 100%) kirpiyordu. !important inline'i ezer. */
        overflow: visible !important;
    }

    .JLV.JLVchat .container .cam-panel .divButtons {
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        /* v2.17.23 — alt padding'e safe-area-inset-bottom ekle (iPhone home indicator
           altinda strip kesilmesini onler). viewport-fit=cover Layout meta'da set edildi. */
        padding: 14px 0 max(14px, env(safe-area-inset-bottom)) 0 !important;
        background-color: #e0e0e0 !important;
        text-align: center !important;
        z-index: 5 !important;
    }

    .JLV.JLVchat .container .cam-panel .divButtons #imglocalMic,
    .JLV.JLVchat .container .cam-panel .divButtons #imglocalVideoEndCall {
        margin: 0 18px !important;
        height: 50px !important;
        vertical-align: middle !important;
    }

    /* v2.17.18 — cam-panel yuksekligi VIDEO + STRIP olacak sekilde uzatildi.
       (Eski portrait media cam-panel: 100vw * 0.5625 → sadece video yuksekligi.
       Strip top:100% ile DISA cikiyor, chat-panel TOP'una biniyordu.)
       v2.17.19 — Defansif: flex-shrink/grow:0 + min/max-height kilit.
       v2.17.20 — Artik nochat-bagimsiz; selector zaten prefixsizdi.
       v2.17.23 — Strip ekstra alt padding (safe-area-inset-bottom) icin cam-panel
       yuksekligi de safe-area kadar uzatilir; aksi halde strip cam-panel disina tasar. */
    .JLV.JLVchat .container .cam-panel {
        height: calc(100vw * 0.5625 + 78px + env(safe-area-inset-bottom)) !important;
        min-height: calc(100vw * 0.5625 + 78px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100vw * 0.5625 + 78px + env(safe-area-inset-bottom)) !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    /* v2.17.23 — chat-panel chat-locked iken (operator henuz katilmadi) chat-panel
       display:none → cam-panel + bos alan. Bu durumda cam-panel kalan viewport'u
       doldursun, alttaki beyaz bosluk gorulmesin. `:has()` Safari iOS 15.4+ destekli.
       Video (aspect-ratio + max-height) sabit 16:9 kalir; cam-panel'in geri kalani
       jura_client_background (gri) ile dolar. Strip top:100% ile video altinda kalir. */
    .JLV.JLVchat .container:has(.chat-panel.chat-locked) .cam-panel {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        /* v2.19.15 — bekleme modunda cam-panel full ekran (100vw). Eskiden
           default cam-panel width (calc(65vw-30px)) kaliyordu → sag 35vw
           bosluyordu, jura_client_background studio resmi yarisi sag tarafta
           gozukmuyordu. v2.19.14'te cam-panel width calc(65vw-15px) yapilinca
           ayni "yarim resim" sorunu narrow desktop'ta belirgin hale geldi. */
        width: 100vw !important;
    }

    /* v2.19.7 — Bekleme ekraninda (chat-locked: operator henuz katilmadi) .divButtons
       gri kusagi (#e0e0e0) "kontrol bar zaten aktif gibi" sinyali veriyordu →
       kullaniciya yanlis gorsel. Bu kosulda:
         - Gri arkaplan saydam (kusak gozukmesin).
         - End-call butonu position:fixed ile viewport'a sabitlenir; .quenum
           (queue position text, position:fixed bottom:250px) ALTINDA, ortalanmis.
       Operator katilinca chat-locked class'i kalkar → normal layout (gri serit
       + mic + endcall) geri gelir. setWaitingMode zaten chat/fullscreen/volume/mic'i
       gizler — bekleme ekraninda divButtons icinde yalniz endcall butonu gorulur. */
    .JLV.JLVchat .container:has(.chat-panel.chat-locked) .cam-panel .divButtons {
        position: fixed !important;
        top: auto !important;
        bottom: calc(120px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        background-color: transparent !important;
        padding: 0 !important;
    }

}

/* ============================================================
   v2.19.17 — Narrow desktop (mouse pointer) optimizasyonlari.

   Onceki v2.19.14-v2.19.16'da bu kurallar `@media max-width:767px` icinde
   ana media query ile birlikte yaziliyordu — ama o media query hem narrow
   desktop browser'da hem gercek mobile'da (iPhone Safari) tetikleniyor.
   `.is-mobile` class reset denemesi de iPhone'da etkili olmadi (class hic
   eklenmiyor ya da gec ekleniyor → CSS rule pas geciyor → iPhone'da
   cam-panel 65vw kaliyordu ve chat-panel mesaj gelene kadar gizliydi).

   Cozum: `pointer: fine` media feature. Mouse/touchpad (desktop browser)
   pointer:fine, parmak (mobile/tablet) pointer:coarse. iPhone Safari
   pointer:coarse → bu media query pas gecer → mobile portrait default
   davranisi korunur (cam-panel 100vw, chat-panel her zaman gorunur).
   Narrow desktop browser'da pointer:fine → kurallar aktif → 15px gap +
   mesaj yokken chat-panel gizli optimizasyonu uygulanir.
============================================================ */
@media only screen and (max-width: 767px) and (pointer: fine) {
    /* Sol/sag panel arasi yatay aralik 30px → 15px (cam-panel `calc(65vw-15px)`).
       v2.19.12'deki 5px denemesi container width kontrolune dustugu icin chat-panel
       wrap ediyordu; 15px gap orta yol, wrap riski az. */
    .JLV.JLVchat .container .cam-panel {
        width: calc(65vw - 15px) !important;
    }

    /* v2.19.8 (v2.19.18'de pointer:fine'a tasindi) — chat-panel height'i cam-panel
       ile esitle. Default chat-panel height (calc((65vw-30px)*0.5625)) cam-panel
       max-width:767px height'inden (100vw*0.5625+78px) 78px kisa kaliyor → chat
       input row video kontrol seridiyle hizali degil DAHA YUKARIDA gozukuyor.
       chatPanelContainer flex-column oldugu icin divMessage (chat input row)
       chat-panel'in en altina yapisir → kontrol seridiyle hizalanir. Bu rule
       SADECE pointer:fine (narrow desktop browser) icin; mobile portrait'te
       `.is-mobile` rule chat-panel'i flex:1 ile parent icindeki kalan alani
       doldurur → mobile'da chat-panel sayfanin altina kadar uzanir, bu rule
       altindaki bos alani yaratan kati height'i devreye girmez. */
    .JLV.JLVchat .container .chat-panel {
        height: calc(100vw * 0.5625 + 78px + env(safe-area-inset-bottom)) !important;
        min-height: calc(100vw * 0.5625 + 78px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100vw * 0.5625 + 78px + env(safe-area-inset-bottom)) !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    /* Gorusme AKTIF ama mesaj YOK iken chat-panel gizle + cam-panel full ekran.
       Discussion-block bos iken (`#discussion-block:empty`) chat-panel display:none
       + cam-panel width 100vw. Ilk mesaj DOM'a eklenir → :empty false → :has()
       reactive olarak chat-panel'i geri acar + cam-panel 65vw-15px'e daraltir.
       `:not(.chat-locked)` defansif (chat-locked rule onceliklidir). */
    .JLV.JLVchat .container:has(#discussion-block:empty) .chat-panel:not(.chat-locked) {
        display: none !important;
    }
    .JLV.JLVchat .container:has(#discussion-block:empty) .cam-panel {
        width: 100vw !important;
    }
}

/* ============================================================
   v2.17.21 — Mobil LANDSCAPE (yan tutus): chat gizle, video full,
   rotate-phone uyari ikonu mic+endcall yaninda (badge ile unread count).

   Tetikleyici: orientation:landscape AND max-width:950px.
     - iPhone Pro Max landscape width 932px → tetiklenir
     - iPhone Plus landscape 926px → tetiklenir
     - iPad mini landscape 1024px → tetiklenmez (iyi, iPad'ler etkilenmez)
     - Desktop pencerede <=950px width + landscape orientation nadir → trade-off ok

   v2.17.22 — Initial deploy'da buton gorulmedi. Ilk media query (max-height:500px)
   Safari iOS'ta URL bar dinamik yuzunden tetiklenmiyordu. width-based daha guvenli.
   Ek olarak `.divButtons` defansif olarak override ediliyor: video uzerinde
   absolute bottom:30px overlay; v2.17.17-20'deki portrait kurallari `max-width:767px`
   media'inda tutuluyor → landscape mobile'da otomatik dusuyor ama defansif
   olarak buradan da set ediliyor.
============================================================ */
@media only screen and (orientation: landscape) and (max-width: 950px) {
    /* Chat panel'i tamamen gizle — landscape'te yer yok, kullanici portrait'e
       cevirince gorur. nochat class'i kaldirilmis olsa bile bu kural ezer. */
    .JLV.JLVchat .container .chat-panel {
        display: none !important;
    }

    /* v2.17.24 — Cam-panel 90vh (eski 100vh) + 5vh ust margin ile ortala.
       v2.17.25 — `vh` yerine `svh` (small viewport height). Safari URL+tab bar
       acikken viewport kuculur, svh garantili minimum gorunur alan.
       v2.17.26 — Cam-panel 90svh → 100svh, margin-top kaldirildi (kullanici ust
       beyaz bosluk istemiyordu). object-fit:contain (asagida force) ile video
       aspect korunur, kesim olmaz; iPhone landscape 2.17:1, video 16:9 → yan'larda
       pillarbox (siyah/gri seritler) gorulur, ust/alt'ta kesim yok. */
    .JLV.JLVchat .container .cam-panel {
        width: 100vw !important;
        height: 100svh !important;
        max-height: 100svh !important;
        min-height: 100svh !important;
        margin-top: 0 !important;
    }

    /* playerRemoteVideo full ekran (portrait aspect-ratio kuralinin yan etkisi
       olmamasi icin landscape'te explicit reset) */
    .JLV.JLVchat .container .cam-panel #playerRemoteVideo {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* v2.17.24 — object-fit:contain force. .jura_client_remotevdeo default'ta
       contain (line 986-989) ama bir yerde ezilmis olabilir → cover gibi
       davraniyor ve video ust/alt kesiliyordu. Force ile letterbox/pillarbox
       guvenceli — video aspect korunur, kesilmez. */
    .JLV.JLVchat .container .cam-panel #remoteVideo,
    .JLV.JLVchat .container .cam-panel .jura_client_remotevdeo {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Defansif: buton stripi video uzerinde absolute overlay olsun, transparan,
       bottom:30px (default landscape kuralinda 70px ama mobile'da 30px daha guzel).
       Portrait media'sindaki gri-strip kurallari `(max-width:767px)` icinde,
       landscape'te tetiklenmez ama emniyet icin sifirla. */
    .JLV.JLVchat .container .cam-panel .divButtons {
        position: absolute !important;
        bottom: 30px !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        text-align: center !important;
        z-index: 9 !important;
        display: block !important;
    }

    /* Default landscape `bottom: 70px` kurali (line 695) buton'lari yanlis konuma
       atabilir; explicit 30px. */

    .JLV.JLVchat .container .cam-panel .divButtons #imglocalMic,
    .JLV.JLVchat .container .cam-panel .divButtons #imglocalVideoEndCall {
        display: inline-block !important;
        margin: 0 12px !important;
        height: 50px !important;
        vertical-align: middle !important;
    }

    /* Rotate hint wrap'i goster — mic+endcall yaninda. Inline `display:none` ezilir. */
    #rotateWrap {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* v2.17.23 — Landscape mobile'da sadece 3 dugme: rotate + mic + endcall.
       Diger ikonlar (chat, fullscreen, volume) gizli; chat-panel zaten yok,
       fullscreen ekran zaten dolu, volume controls cep telefonu donanim
       tuslariyla yapilir → gereksiz. */
    .JLV.JLVchat .container .cam-panel .divButtons #imglocalMessage,
    .JLV.JLVchat .container .cam-panel .divButtons #imgFullScreen,
    .JLV.JLVchat .container .cam-panel .divButtons #volumeControls,
    .JLV.JLVchat .container .cam-panel .divButtons #imglocalVideo {
        display: none !important;
    }

    /* v2.17.26 — Rating screen landscape mobile'a sigsin diye kompakt boyutlar.
       v2.17.34 — Kullanici talebi: %25 buyume. Ust degerler:
       title 18→23, text 13→16, stars 32→40, submit 14→18, paddings buyutuldu.
       Toplam iceriklerin yine svh viewport'una sigdigi dogrulandi: 23 + 16 +
       40 + 18 + paddings = ~160px, iPhone landscape ~270px → rahat sigar. */
    #divStep2_2 .grey-box.step1 {
        padding: 10px 20px !important;
        max-height: 100svh !important;
        overflow-y: auto !important;
    }
    #divStep2_2 .JLV.JLVmain {
        overflow: visible !important;
    }
    #divStep2_2 .review-title {
        font-size: 23px !important;
        margin: 0 !important;
    }
    #divStep2_2 .review-text {
        font-size: 16px !important;
        margin-top: 3px !important;
    }
    #divStep2_2 .rating {
        font-size: 40px !important;
        margin: 8px 0 !important;
    }
    #divStep2_2 #rSubmit {
        font-size: 18px !important;
        padding: 10px 30px !important;
    }

    /* v2.17.35 — Step1 lobby ("Persönliche Kaufberatung" + Jetzt anrufen)
       landscape mobile'da iceriklerin toplami viewport'tan uzun → call button
       altta kesik. Default boyutlar: title 48pt, text 16pt, button 26pt,
       icons + columns. Burada hepsi sikistirilir:
       title 48pt → 22pt, text 16pt → 12pt, button 26pt → 16pt, paddings/margins
       azaltilir. Toplam icerik ~210px, iPhone landscape ~270px → sigar. */
    #pnlStep1 .grey-box.white {
        padding: 8px 12px !important;
    }
    #pnlStep1 .lbl_join_chat_header span {
        font-size: 22pt !important;
    }
    #pnlStep1 h1.main_title.lbl_join_chat_header {
        margin: 4px 0 6px 0 !important;
    }
    #pnlStep1 .lbl_join_chat_text,
    #pnlStep1 .lbl_join_headset_text,
    #pnlStep1 .lbl_join_click_mouse_hand_text {
        font-size: 11pt !important;
    }
    #pnlStep1 p.main_text {
        margin: 4px 0 6px 0 !important;
    }
    #pnlStep1 .div_icon_client {
        margin: 4px 0 !important;
    }
    #pnlStep1 .img_client_headset,
    #pnlStep1 .img_client_mouse_click {
        max-height: 50px !important;
        width: auto !important;
    }
    #pnlStep1 .btn_join_chat span {
        font-size: 16pt !important;
    }
    #pnlStep1 .btn_join_chat {
        padding: 6px 30px !important;
        margin-top: 6px !important;
    }
    /* Alttaki Kundenservice bolumu landscape'te gerekmez (zaten ikincil) */
    #pnlStep1 #hrClient,
    #pnlStep1 #divClientCustomer {
        display: none !important;
    }
}

/* ============================================================
   v2.19.14 — Gorusme AKTIF iken cam-panel JURA studio bg image'ini gizle.
   Bekleme modunda (chat-panel chat-locked) JURA studio resmi KORUNUR
   (kullanici arka plan gormek ister). cam-panel HTML class listinde
   `jura_client_background` var: webrtc.css'te `background: #dadee1
   url(../img/jura_bg_studio2.webp) no-repeat; background-size: cover`.
   Narrow desktop'ta video aspect cam-panel'in tum yuksekligini doldurmaz
   → video DISINDA studio resmi sizar → kullanicinin gordugu "hafif gri
   yatay bant" hissi. `:not(:has(.chat-locked))` chat-panel chat-locked
   class'i YOKKEN (yani gorusme aktif iken) override eder; bekleme modunda
   chat-locked aktif → bu rule uygulanmaz → studio resmi gorulur.
   Mobile portrait'te + geniş desktop'ta video cam-panel'i tam doldurdugu
   icin bu override gorsel olarak etkisiz, regresyon yok. */
.JLV.JLVchat .container:not(:has(.chat-panel.chat-locked)) .cam-panel {
    background-image: none !important;
    background-color: #fff !important;
}