html,
body {
    height: 100%;
}

body { font-family: 'Roboto', sans-serif; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
div { box-sizing: border-box; margin:0; padding:0; border:0; }
a, a:hover { text-decoration:none; } 
h3 {margin-top: 3px;}

#app {
    font-family: 'Roboto', sans-serif;
}


:root {
    --main-color-1: rgba(164,16,8,1); 
    --main-color-2: rgba(0,45,89,1);
    --pp-golden: rgba(255,204,0,1);
    font-size:100%;
  }
  @media screen and (max-width:1200px) {
  :root { font-size:90%; }
  }
  @media screen and (max-width:800px){
  :root { font-size:80%; }
  }

/*
.wrap {
    position:fixed; top:0; left:0; bottom:0; right:0;
    overflow-x: hidden; overflow-y: auto;
    background:var(--main-color-1);
    background-image:linear-gradient(#a11e21,#8a1619);
    background-size: 100vw 100vh;
}
*/

.wrap {
    position:fixed; top:0; left:0; bottom:0; right:0;
    overflow-x: hidden; overflow-y: auto;
    background:white;
    background-size: 100vw 100vh;
}


.wrap > .container {
    width:70%; position:relative; max-width:400px; padding: 170px 30px 20px 30px; color: black; 
    background: url('/images/KKS_app_header_1.svg') top center no-repeat; background-size: 200px;
}

.wrap > .container a {color:white; }
.wrap > .container a:hover {color:lightgreen; }

.wrap > .container .thin_yellow_line { height:1px; margin:0 0 30px 0; background: black;}


.wrap > .container .alert { display:none; } 



.wrap > .container .alert_jail .alert { display:block; width:100%; text-align:center; font-size:20px; padding: 0; margin: 0; 
    background:none; border: none; }

.wrap > .container .alert_jail .alert-danger { color:var(--main-color-1); } 
.wrap > .container .alert_jail button { display:none; }

.ala_login { display:flex; flex-direction: column; min-height: calc(100vh - 240px); }

.ala_login .form_header { padding-bottom:5px; text-align: center; }
.ala_login .form_body { flex:1; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.ala_login .form_footer { height:150px; text-align:center; }

.ala_login p { font-size:120%; line-height: 1.1; margin:0 0 20px 0; text-align: center; }

.ala_login .bunch_of_cubies { width:100%; display:flex; justify-content:center; align-items:center; }
.ala_login .cubie { width:26px; height:30px; border:solid 1px black; border-radius:8px; margin:0 5px; font-size:20px; text-align:center; }

.form_btn_block { padding: 0; margin:0 0 20px 0; position:relative; }
@media screen and (max-width:1200px) {
    .form_btn_block { width:100%; text-align: center; padding: 0; margin:0 0 20px 0; }
}

.ala_login .form_btn {
    display: inline-block; position:relative; margin-bottom: 0;  font-weight: 300; text-align: center; white-space: nowrap;
    vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; 
    background-color: black; color:white;
    border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
    border-left-color: transparent; padding: 4px 26px; font-size: 20px; line-height: 1.42857143; border-radius: 10px;
}

.ala_login .choke { position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(66,66,66,0); }

.ala_login .form_btn.disabled { background-color: gray; }

.ala_login .error_block { min-height: 20px; padding:0; text-align:left; }
.ala_login .error_block .help-block { font-size: 12px; margin-bottom: 5px; margin-top: 7px; margin-left: 12px; line-height: 1; text-align:left; }

.ala_login .form_btn a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.ala_login .has-error .control-label { color: black; }
.ala_login .has-error .help-block { color:var(--main-color-1); }
.ala_login input.form-control.has-success .control-label { color:limegreen; }

.ala_login input.form-control { border-radius: 12px; border-color: black; }
.ala_login input.form-control.has-error { border-color: transparent; }
.ala_login input.form-control.has-success { border-color: limegreen; }
.ala_login input.form-control:focus { border-color: black; }
.ala_login .form-group_ { margin:0 -15px 20px -15px; text-align: center; }
.ala_login .checkbox_block { padding:0 0 0 15px; }
.ala_login .checkbox_block label { font-weight: normal; padding:0 0 0 6px; }


.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}






/* ============================= */
/* >>>>>>>> Placeholders >>>>>>> */
/* ============================= */

#chat_list_placeholder { position:fixed; top:5vh; left:20vh; width:360px; bottom:5vh; background:white; border:solid 3px saddlebrown; border-radius:3px; }
#chat_block_placeholder { position:fixed; top:5vh; left:calc(20vh + 380px); right:20vh; bottom:5vh; background:white; margin:0 auto; border:solid 3px red;
    padding: 20px; border-radius:3px; }

@media screen and (max-width:1200px) {
    #chat_block_placeholder { top:0; left:0; right:0; bottom:0; background:white; margin:0 auto; border:solid 3px red;
        padding: 20px; border-radius:none; }
}

/* <<<<<<<< Placeholders <<<<<<< */


/* ============================= */
/* >>>>>>>> Login form >>>>>>>>> */
/* ============================= */
.login_container { width:320px; max-height:600px; margin:16px; padding:0; background:rgba(255,255,255,0); border-radius:3px; overflow:hidden; }
.enter_button { width:calc(50% - 10px); height:36px; display:flex; justify-content:center; align-items:center; border-radius:3px; background:#337ab7; 
	color:white; margin:0 0 10px 0; cursor:pointer; position:relative; }
.enter_button a { position:absolute; top:0; left:0; bottom:0; right:0; }
.back_container	{ background:rgba(255,255,255,0.7); border-radius:3px; padding:20px 20px 10px 20px; }
.login_container p { font-size:14px; }
.login_container a { color:var(--main-color-2); text-decoration:underline; }
.login_container h3 { color:var(--main-color-2); font-size:22px; }
.login_container .panel { margin-bottom:30px; }
.login_container .checkbox_std label { font-size:14px; padding:0 0 0 24px; text-indent:-24px; }
.login_container .checkbox_std label span { padding:0 0 0 10px; width:90%; }
@media screen and (max-width:1200px) {
	.login_container { margin:16px; }
}
@media screen and (max-width:800px) { 
	.login_container { margin:10px;  background:rgba(27, 145, 255, 0.1); }
	.back_container { background:none;}
}
@media screen and (max-width:400px) {
	.login_container { margin:0 0 20px 0; }
}



/* =============================== */
/* >>>>>>>>> Main chat  >>>>>>>>>> display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start;*/
/* =============================== display:flex; flex-direction:row-reverse; align-items:flex-start; justify-content: flex-start;*/

.body_noscroll { height:100%; overflow:hidden; }
.main_chat_block { width:100%; height:90vh; min-height:240px; position:relative;  margin:0 0 20px 0; padding: 20px; 
    background-image:url(/images/backgr_header_1.jpg); background-repeat: repeat-x; background-size: 14px; }
.main_chat_block .in { width:100%; margin:0 0 10px 0; font-size:0; line-height:0; position:relative;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.main_chat_block .in.selected { background:rgba(200,200,200,0.5); border-radius:10px 24px 24px 10px; }
.main_chat_block .in .check { width:32px; height:32px; position:absolute; top:calc(50% - 16px); right:10px; background:none; border:solid 1px rgb(130, 160, 160);
	background-size:32px; border-radius:16px; }
.main_chat_block .in .check.checked { background:url(/images/message_selected_1.svg) center no-repeat;  }
.main_chat_block .in .mess { min-width:120px; max-width:90%; display:inline-block; position:relative; padding:4px 12px; margin:0; background:white;
    border-radius:0 10px 10px 10px;  box-shadow: 2px 2px rgb(130,160,160); text-align:left; font-size:1.2rem; line-height:1.2; }
.main_chat_block .in .mess p { overflow: hidden; }
.main_chat_block .out { width:100%; margin:0 0 10px 0; text-align:right; font-size:0; line-height:0; position:relative;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.main_chat_block .out.selected { background:rgba(200,200,200,0.5); border-radius:24px 10px 10px 24px; }
.main_chat_block .out .check { width:32px; height:32px; position:absolute; top:calc(50% - 16px); left:10px; background:none; border:solid 1px rgb(130, 160, 160);
	 background-size:32px; border-radius:16px; }
.main_chat_block .out .check.checked { background:url(/images/message_selected_1.svg) center no-repeat;  }
.main_chat_block .out .mess { min-width:120px; max-width:90%; display:inline-block; position:relative; padding:4px 12px; margin:0; background:rgb(197, 255, 197); 
    border-radius:10px 0 10px 10px; box-shadow: 2px 2px rgb(130,160,160); text-align:right; font-size:1.2rem; line-height:1.2; }
.main_chat_block .out .mess p { overflow: hidden; }

.main_chat_block .out .mess.deleted { background-color:lightgrey; }
.main_chat_block .in .mess.deleted { background-color:lightgrey; }

/* .main_chat_block .out .mess::before { display:block; position:absolute; top:calc(100% - 22px); left:-28px; width:24px; background-repeat:no-repeat;
    background-position:center; height:24px; content: " "; }
.main_chat_block .out .mess.delivering::before { background-image:url(/images/message_delivering_1.svg); }
.main_chat_block .out .mess.delivered::before { background-image:url(/images/message_delivered_1.svg); }
.main_chat_block .out .mess.read0perc::before { background-image:url(/images/message_read_by_0percent_1.svg); }
.main_chat_block .out .mess.read25perc::before { background-image:url(/images/message_read_by_25percent_1.svg); }
.main_chat_block .out .mess.read50perc::before { background-image:url(/images/message_read_by_50percent_1.svg); }
.main_chat_block .out .mess.read75perc::before { background-image:url(/images/message_read_by_75percent_1.svg); }
.main_chat_block .out .mess.delivering::before { background-image:url(/images/message_delivering_1.svg); }
.main_chat_block .out .mess.read::before { background-image:url(/images/message_read_1.svg); }
.main_chat_block .out .mess.deleted { background-color:lightgrey; }
.main_chat_block .out .mess.deleted::before { background-image:url(/images/message_deleted_1.svg); }
.main_chat_block .in .mess.deleted { background-color:lightgrey; }
.main_chat_block .in .mess.deleted::before { background-image:url(/images/message_deleted_1.svg); }

.main_chat_block .out .mess.testclass::before { background-image:url(/images/message_read_by_25percent_1.svg); } */

/* .main_chat_block .out .status_block { display:block; position:absolute; top:calc(100% - 22px); left:-28px; width:24px; height:24px; background-repeat:no-repeat;
	background-position:center; height:24px; }
.main_chat_block .out .status_block.delivering { background-image:url(/images/message_delivering_1.svg); }
.main_chat_block .out .status_block.delivered { background-image:url(/images/message_delivered_1.svg); }
.main_chat_block .out .status_block.read0perc { background-image:url(/images/message_read_by_0percent_1.svg); }
.main_chat_block .out .status_block.read25perc { background-image:url(/images/message_read_by_25percent_1.svg); }
.main_chat_block .out .status_block.read50perc { background-image:url(/images/message_read_by_50percent_1.svg); }
.main_chat_block .out .status_block.read75perc { background-image:url(/images/message_read_by_75percent_1.svg); }
.main_chat_block .out .status_block.delivering { background-image:url(/images/message_delivering_1.svg); }
.main_chat_block .out .status_block.read { background-image:url(/images/message_read_1.svg); }
.main_chat_block .out .status_block.deleted { background-image:url(/images/message_deleted_1.svg); }
.main_chat_block .in .status_block.deleted { background-image:url(/images/message_deleted_1.svg); } */
  

.main_chat_block p { margin:0; padding:0; }
.main_chat_block .out .time { padding:0; text-align:right; font-size:1rem; line-height:1.3; }
.main_chat_block .in .time { padding:0; text-align:left;  font-size:1rem; line-height:1.3; }
.main_chat_block .time span { background:none; color:var(--main-color-2); border:solid 1px var(--main-color-2); border-radius:10px 10px 0 0; border:none; font-size:0.9rem; line-height:1; padding:2px 8px; }
.main_chat_block .time span span { color:grey; font-size:0.8rem; }
.main_chat_block .whoes_chat { width:100%; height:50px; }

.main_chat_block .out .mess.call_block { padding-left: 44px; background-repeat: no-repeat; background-position: center left 8px; background-size: 26px;
    background-image:url(/images/media_call_control_button_small_1.svg); }
.main_chat_block .in .mess.call_block { padding-right: 44px; background-repeat: no-repeat; background-position: center right 8px; background-size: 26px;
    background-image:url(/images/media_call_control_button_small_1.svg); }

.main_chat_block .in .mess::before { display:block; position:absolute; top:calc(100% - 22px); left:calc(100% + 4px); width:24px; background-repeat:no-repeat;
        background-position:center; height:24px; content: " "; }

.main_chat_block .out .mess.missed::before { background-image:url(/images/call_arrow_outbound_fail_1.svg); background-size: 20px; }
.main_chat_block .out .mess.success::before { background-image:url(/images/call_arrow_outbound_success_1.svg); background-size: 20px; }
.main_chat_block .in .mess.missed::before { background-image:url(/images/call_arrow_inbound_fail_1.svg); background-size:20px; }
.main_chat_block .in .mess.success::before { background-image:url(/images/call_arrow_inbound_success_1.svg); background-size: 20px; }

.call_mess { font-style: normal; }
.call_time { font-size: 10px; font-style: normal; }


.main_chat_block .whoes_chat .chatlist_item.in_main_block { overflow:visible; padding-left:0; }
.main_chat_block .whoes_chat .open_list_arrow { position:absolute; top:0; left:0; width:40px; height:40px; 
    background: url(/images/open_list_arrow_1.svg) center no-repeat; cursor:pointer; display:none; }

.main_chat_block .chatlist_item { padding: 0; }
.main_chat_block .whoes_chat .select_controls { height:30px; position:absolute; top:8px; right:80px; display:flex; justify-content:center; align-items:center; }
.main_chat_block .whoes_chat .ctrl { min-width:34px; height:34px; margin:0 6px 0 0; } 
.main_chat_block .whoes_chat .ctrl.del { background:url(/images/message_delete_1.svg) center no-repeat; cursor:pointer; }
.main_chat_block .whoes_chat .ctrl.forward { background:url(/images/ctrl_forward_arrow_1.svg) center no-repeat; cursor:pointer; }
.main_chat_block .whoes_chat .ctrl.answer { background:url(/images/ctrl_answer_arrow_1.svg) center no-repeat; cursor:pointer; }
.main_chat_block .whoes_chat .ctrl.copy { background:url(/images/ctrl_copy_sign_1.svg) center no-repeat; cursor:pointer; }
.main_chat_block .whoes_chat .ctrl.share { background:url(/images/ctrl_share_sign_1.svg) center no-repeat; cursor:pointer; }
.main_chat_block .whoes_chat .ctrl.sel_num { color:white; font-size:1.7rem; text-align:center; line-height:34px; margin:0 20px 0 0; }
.main_chat_block .whoes_chat .ctrl.desel_all { background:url(/images/ctrl_close_cross_1.svg) center no-repeat; cursor:pointer; margin:0; }

/* .main_chat_block .mess_img { width:150px; height:150px; position:relative; background-color:white; flex-shrink:0; border-radius:5px; margin:0 10px 0 0; 
	cursor:pointer; background-position:center; background-repeat:no-repeat; background-size:cover; } */

.main_chat_block .attachment_block { width:150px; height:150px; position:relative; flex-shrink:0; border-radius:5px; margin:0 10px 0 0; }

.main_chat_block .attachment_media { width:100%; height:100%; border-radius:5px; cursor:pointer; background-position:center; 
    background-repeat:no-repeat; background-size:cover; }
.main_chat_block .attachment_file { width:100%; height:100%; border-radius:5px; cursor:pointer; color:white; background-position:center; 
    background-repeat:no-repeat; background-size:cover; }

.main_chat_block .attachment_file .file_sign { position: absolute; top:7%; left:7%; width:34%; height:34%;
    background-image:url('/images/doc_sign_common_1.svg'); background-color:rgba(255,255,255,0); background-position:center; 
    background-repeat: no-repeat; background-size: contain; }
.main_chat_block .attachment_file .ext { height:18%; width:34%; position:absolute; top:18%; left:36%; text-align:left;
    padding:0; font-size:20px; font-weight: 500; line-height:1.1; color:white; overflow: hidden; }
.main_chat_block .attachment_file .display_name { height:30%; max-height:38%; width:84%; position: absolute; top:44%; left:8%;
    padding:0; font-size:14px; line-height:1.1; color:white; overflow-wrap: break-word; word-wrap: break-word;  text-align:left;
    overflow-y: hidden; }
.main_chat_block .attachment_file .download_button { position: absolute; top:7%; right:7%; width:24%; height:24%; border-radius:30%; 
    background-image:url('/images/close_butt_wt_1.svg'); background-color:rgba(0,0,0,0.7); background-position:center; 
    background-repeat: no-repeat; background-size: contain; }
.main_chat_block .attachment_file .download_button a { position:absolute; top:0; left:0; right:0; bottom:0; border:solid 1px lime; }
.main_chat_block .attachment_file .size { height:auto; width:auto; position: absolute; bottom:7%; right:8%; background:rgba(0,0,0,0.7);
    border-radius:20px; padding:2% 6% 1% 6%; font-size:14px; color:white; } 

.main_chat_block .attachment_audio { width:100%; height:100%; border-radius:5px; cursor:pointer; color:var(--main-color-1); background-position:center; 
    background-repeat:no-repeat; background-size:cover; background-color: var(--pp-golden); }

.main_chat_block .attachment_audio .audio_sign { position: absolute; top:7%; left:7%; width:34%; height:34%;
    background-image:url('/images/audio_sign_common_1.svg'); background-color:rgba(255,255,255,0); background-position:center; 
    background-repeat: no-repeat; background-size: contain; }
.main_chat_block .attachment_audio .ext { height:18%; width:34%; position:absolute; top:28%; left:8%; text-align:left;
    padding:0; font-size:20px; font-weight: 500; line-height:1.1; overflow: hidden; }
.main_chat_block .attachment_audio .author { height:11%; width:54%; position: absolute; top:48%; left:8%;
    padding:0; font-size:14px; line-height:1.3; text-align:left; overflow: hidden; }
.main_chat_block .attachment_audio .author div { width:200px; }
.main_chat_block .attachment_audio .title { height:12%; width:84%; position: absolute; top:61%; left:8%;
    padding:0; font-size:14px; line-height:1.3; text-align:left; overflow: hidden; }
.main_chat_block .attachment_audio .title div { width:300px; }
.main_chat_block .attachment_audio .playbutton { position: absolute; top:6%; right:7%; width:32%; height:32%;
    background-image:url('/images/audio_play_sign_1.svg'); background-position:center; 
    background-repeat: no-repeat; background-size: contain; }
.main_chat_block .attachment_audio .playbutton.onpause { background-image:url('/images/audio_play_sign_1.svg'); }
.main_chat_block .attachment_audio .playbutton.playing { background-image:url('/images/audio_pause_sign_1.svg'); }

.main_chat_block .attachment_audio .loudbutton { position: absolute; top:39%; right:9%; width:24%; height:24%;
    background-image:url('/images/loudspeaker_button_off_2.svg'); background-position:center;
    background-repeat: no-repeat; background-size: contain; }
.main_chat_block .attachment_audio .loudbutton.loud { background-image:url('/images/loudspeaker_button_on_2.svg'); }
.main_chat_block .attachment_audio .loudbutton.still { background-image:url('/images/loudspeaker_button_off_2.svg'); }


.main_chat_block .attachment_audio .timing_block { height:auto; display:flex; justify-content: space-between; position: absolute; bottom:15%; left:8%; right:8%;
    padding:0; font-size:14px; color:var(--main-color-1); } 
.main_chat_block .attachment_audio .current_time { padding:0; }
.main_chat_block .attachment_audio .duration { padding:0; }
.main_chat_block .attachment_audio .progress_block { height:9%; position: absolute; bottom:6%; left:6%; right:6%; background:rgba(255,255,255,0.7);
border-radius: 5px; padding:1%; }
.main_chat_block .attachment_audio .progress { width:60%; height:100%; background:var(--main-color-1);
    border-radius: 4px; }
.main_chat_block .attachment_audio .sensitive_area { position: absolute; bottom:0; left:0; width:100%; height:30%; }
.main_chat_block .attachment_audio .extra_control_block { position:fixed; top:0; bottom:0; left:0; right:0; z-index: 9000; }
.main_chat_block .attachment_audio .curtain { width:100%; height:100%; background: rgba(255,255,255,0.6); }
.main_chat_block .attachment_audio .controls_container { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction: column; 
    justify-content: center; align-items: center; border:solid 1px crimson; }

.main_chat_block .attachment_audio .controls { width:90%; max-width:600px; min-height:60px; background: var(--pp-golden); border-radius:16px;
        display:flex; justify-content: center; align-items: center; padding:20px; }

.main_chat_block .attachment_audio .size { height:auto; width:auto; position: absolute; bottom:7%; right:8%; background:rgba(0,0,0,0.7);
    border-radius:20px; padding:2% 6% 1% 6%; font-size:14px; color:white; }
.main_chat_block .attachment_audio .audio { display:none; }
    
    

    
    
    
    

.main_chat_block .main_chat_wrapper { position:absolute; bottom:80px; left:20px; right:20px; top:90px; }
.main_chat_block .main_chat { position:absolute; bottom:0; left:0; right:0; max-height:100%; min-height: 100px; overflow:auto; padding:20px 20px 0 20px; }
/*		background-image: linear-gradient(to bottom right,rgb(212, 244, 255), white, rgb(221, 253, 227)); border-radius: 10px; } 
 .main_chat_block .main_chat { position:absolute; bottom:80px; left:20px; right:20px; max-height:calc(100% - 170px); min-height: 100px; overflow:auto; padding:20px 20px 0 20px; 
		background-image: linear-gradient(to bottom right,rgb(212, 244, 255), white, rgb(221, 253, 227)); border-radius: 10px; } */

.main_chat_block .chat_form { height:40px; position:absolute; bottom:20px; left:26px; right:30px; }
.main_chat_block .chat_form_container { display:flex; width:100%; justify-content:space-between; align-items:flex-end; position:absolute; bottom:0; }

.main_chat_block .imagestosend_block { position:absolute; display:flex; flex-wrap:wrap; min-width:50px; max-width:100%; min-height:50px; top:-190px; left:0; border:solid 1px var(--main-color-2); 
	border-radius:26px 26px 22px 22px; padding:8px; background:white; }

.main_chat_block .imgstosend_block { position:absolute; display:flex; flex-wrap:wrap; min-width:50px; max-width:100%; min-height:50px; top:-190px; left:0; border:solid 1px var(--main-color-2); 
    border-radius:26px 26px 22px 22px; padding:10px 0 0 10px; background:white; }
.main_chat_block .imgstosend { position:relative; width:150px; height:150px; margin:0 10px 10px 0; background:lightgrey; flex-shrink:0;
    border-radius:16px 16px 12px 12px; background-position:center; background-size:cover; background-repeat:no-repeat; }
.main_chat_block .removeimgstosend	{width:34px; height:34px; position:absolute; top:2px; right:2px; background:url(/images/img_close_cross_2.svg) center no-repeat; 
        background-size:20px; cursor:pointer;}

.main_chat_block [v-cloak] { display: none; }

.main_chat_block .input_container { position:relative; flex: 0 0 calc(100% - 50px); border-radius:20px; padding:8px 50px 6px 30px; border:solid 1px var(--main-color-2); 
		min-height:10px; background:white; }
.main_chat_block .chat_input { border-radius:0; }
.main_chat_block .chat_button_tel { flex: 0 0 43px; margin:0 0 0 16px; height:43px; border-radius:25px; color:white; font-size:180%; border:none; 
		background:var(--main-color-2) url(/images/but_chat_send_1.svg) center no-repeat; background-size: contain; }

.main_chat_block .chat_button { flex: 0 0 43px; margin:0 0 0 16px; height:43px; border-radius:25px; color:white; font-size:180%; border:none; 
		background:var(--main-color-2) url(/images/but_chat_send_1.svg) center no-repeat; background-size: contain; }

.main_chat_block .chat_date { width:100%; text-align:center; margin:0 0 20px 0; padding:16px 0 0 0; }
.main_chat_block .chat_date span { display:inline-block; background:none; color:var(--main-color-2); border:solid 1px var(--main-color-2); padding:2px 10px; border-radius:16px; }
.main_chat_block .att_file { width:30px; height:30px; position:absolute; right:10px; bottom:4px; background:url(/images/button_att_file_1.svg) center no-repeat; 
	background-size:36px; }
.main_chat_block .att_file	.att_file_but { position:absolute; width:30px; height:30px; bottom:0; left:0; cursor:pointer; }
.main_chat_block textarea { box-shadow:none; outline: none; }
.main_chat_block textarea:focus, .main_chat_block textarea:active { outline: none; -webkit-box-shadow: none; box-shadow:none !important; }

.main_chat_block ::placeholder { color: lightblue; opacity: 1; /* Firefox */}
.main_chat_block :-ms-input-placeholder { /* Internet Explorer 10-11 */color: lightblue; }
.main_chat_block ::-ms-input-placeholder { color: lightblue; }

.main_chat_block .main_chat_scrolling_date { position:absolute; width:100px; text-align:center; top:110px; left:calc(50% - 58px); z-index:20; 
	color:blue; opacity:0; }
.main_chat_block .main_chat_scrolling_date span { display:inline-block; background:var(--main-color-2); color:white; 
	border:solid 1px var(--main-color-2); padding:3px 10px 2px 10px; border-radius:16px; }
.main_chat_block .scrolling_date_on { opacity:1; }


@media screen and (max-width:1200px) {
    .main_chat_block { width:100%; height:100vh; }
    .main_chat_block .whoes_chat .open_list_arrow { display:block; }
    .main_chat_block .whoes_chat .chat_info { padding-left:40px; }
}

@media screen and (max-width:640px) {
    .main_chat_block { padding: 20px; }
    .main_chat_block .whoes_chat .select_controls { top:8px; right:80px; }
    .main_chat_block .main_chat_wrapper { position:absolute; bottom:80px; left:0; right:0; top:84px; }
    .main_chat_block .main_chat { padding:20px 16px 0 16px; }
    .main_chat_block .in .mess { max-width:86%; }
    .main_chat_block .out .mess { max-width:86%; }
	.main_chat_block .in .check { width:28px; height:28px; top:calc(50% - 14px); right:8px; background-size:28px; border-radius:14px; }
    .main_chat_block .out .check { width:28px; height:28px; top:calc(50% - 14px); left:8px; background-size:28px; border-radius:14px; }
	.main_chat_block .chat_form { bottom:20px; left:14px; right:22px; }
}


/* for main_chat_block */

/* .chat_info { width:100%; height:45px; padding:0; overflow:hidden; position:relative; font-size:0; line-height:0; color:rgb(252,179,22); }
.chat_info a { position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer; }
.chat_info a:hover { background:rgba(0,0,0,0.1); border-radius:12px; }
.chat_info .like_a { position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer; }
.chat_info .like_a:hover { background:rgba(0,0,0,0.1); border-radius:12px; }
.chat_info_avatar { width:42px; height:42px; border-radius:12px; display:inline-block; vertical-align:top; position: relative; background-position:center; background-repeat:no-repeat; background-size:cover; }
.chat_info_avatar .status_sign { width:11px; height:11px; position:absolute; bottom:3px; right:3px; border:solid 1px white; border-radius:6px; }
.chat_info_content { width:calc(100% - 43px); min-height:30px; display:inline-block; vertical-align:top; font-size:12px; line-height:1.1; padding:2px 0 0 14px; overflow:hidden; }
.chat_info_content span { display:inline-block; min-width:500px; }
.chat_info .name { font-size:18px; font-weight:bold; height:22px; }
.chat_info .ins_and_year { font-size:0; line-height:0; }
.chat_info .ins_short { max-width:100%; height:15px; display:inline-block; vertical-align:top; font-size:11px; line-height:1.1; padding:0 0 0 0; overflow:hidden; border:solid 1px red; }
.chat_info .year_short { max-width:12%; height:14px; display:inline-block; vertical-align:top; font-size:11px; line-height:1.1; padding:0 0 0 2px; }
.chat_info .messages { padding:0; background:none; color:grey; overflow:hidden; font-size:12px; }
.chat_info .messages span { color:green; }
.chat_info .are_new { background:url(/images/mess_gif_1.gif) left center no-repeat; color:black; }
.chat_info .online { background:url(/images/online_status_online_circle_1.svg) left center no-repeat; background-size:9px; }
.chat_info .available { background:url(/images/online_status_online_circle_1.svg) left center no-repeat; background-size:9px; }
.chat_info .offline { background:url(/images/online_status_offline_circle_1.svg) left center no-repeat; background-size:9px; }
.chat_info .dontdisturb { background:url(/images/online_status_busy_circle_1.svg) left center no-repeat; background-size:9px; }
.chat_info .away { background:url(/images/online_status_away_circle_1.svg) left center no-repeat; background-size:9px; }
.chat_info .concealed { background:url(/images/online_status_concealed_circle_1.svg) left center no-repeat; background-size:9px; } */

/*
@media screen and (max-width:640px) {
	.main_chat_block { position:fixed; height:auto; top:calc(4vh + 10vw); bottom:0; left:0; right:0; z-index:+11; margin:0; border:none; }
	.main_chat_block .to_chatlist { display:block; }
	.main_chat_block .main_chat {  }
	.main_chat_block .main_chat_wrapper { left:16px; right:16px; }
	.main_chat_block .in .check { width:28px; height:28px; top:calc(50% - 14px); right:8px; background-size:28px; border-radius:14px; }
	.main_chat_block .out .check { width:28px; height:28px; top:calc(50% - 14px); left:8px; background-size:28px; border-radius:14px; }
	.main_chat_block .chat_form { bottom:24px; left:26px; right:30px; }
}
*/

.txtstuff_w {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden; height:23px; border:none; padding:0; margin:0;
}

.hiddendiv {
    display: block;
    position:absolute;
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common_w {
	width:100%;
	min-height:24px;
    font-family: 'Roboto', sans-serif; 
    font-size: 16px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}

/* <<<<<<<<< Main chat =========== */



/* ================================= */
/* >>>>>>> Standard button >>>>>>>>> */
/* ================================= */
.button_std { min-height:40px; display:inline-block; position:relative; text-align:left; padding:8px 15px 5px 18px; margin:0; color:white; 
	background:var(--main-color-2); background-position:left 6px center; background-repeat:no-repeat; font-size:20px; font-weight: normal; line-height:1.1; border:none; 
	border-radius:3px; cursor:pointer; }
.button_std.inactive { background-color:lightgray; }
.button_std a { display:block; position:absolute; top:0; bottom:0; left:0; right:0; }
.button_std a, .button_std a:hover { color:white; }
.button_std_with_picture { padding:8px 15px 5px 40px; }
.button_std_light { color:var(--main-color-2); background-color:white; border:solid 1px var(--main-color-2); }
.button_std_small_with_picture { min-height:30px; padding:6px 10px 6px 32px; margin:0; background-position:left 4px center; background-size:26px; font-size:16px; }
.but_pict_check { background-image:url(/images/but_pict_check_1.svg); }
.but_pict_plus { background-image:url(/images/but_pict_plus_white_1.svg); }
.but_pict_pen_up { background-image:url(/images/but_pict_pen_up_1.svg); }
.but_pict_arr_up { background-image:url(/images/but_pict_arr_up_1.svg); }
.but_pict_arr_left { background-image:url(/images/but_pict_arr_left_1.svg); }
.but_pict_finger_up_light { background-image:url(/images/but_pict_finger_up_1.svg); }

@media screen and (max-width:1200px) {
.button_std { min-height:calc(1.2vw + 25.7px); padding:7px calc(0.6vw + 8px) calc(0.2vw + 2px) calc(0.7vw + 9.4px); /* margin:calc(0.5vw + 4px) calc(1vw + 2px);*/ background-position:left calc(0.2vw + 3px) center; font-size:calc(0.7vw + 11px); }
.button_std_with_picture { padding:7px calc(0.6vw + 8px) calc(0.2vw + 2px) calc(1.2vw + 25.7px); background-size:calc(0.9vw + 18.5px); }
.button_std_small_with_picture {  min-height:24px; padding:6px 10px 6px 32px; background-size:22px; font-size:14px; }
}

@media screen and (max-width:480px) {
.button_std { min-height:30px; padding:7px 10px 7px 12px; /* margin:6px 6px;*/ background-position:left 4px center; font-size:14px; line-height:1; 
	border-radius:3px; cursor:pointer; }
.button_std_with_picture { padding:7px 10px 7px 30px; background-size:22px; }
.button_std_small_with_picture {  }
}
/* <<<<<<< Standard button ========== */


/* ================================= */
/* >>>>> Standard formatting >>>>>>> */
/* ================================= */
.flex_center_left { width:100%; display:flex; justify-content:flex-start; align-items:center; }
.margin_bot_20 { margin:0 0 20px 0; }
.ltr_container_std { width:100%; display:flex; justify-content:flex-start; align-items:top; margin:0 0 20px 0; }
.ltr_container_std .button_std { margin:0 20px 0 0; }

/* <<<<< Standard formatting ======= */





.header_one { width:100%; height:150px; padding:20px; background:grey;  }
.header_two { width:100%; height:100px; padding:20px; background:lightgrey; position:sticky; top:0;  }
.chat_list { width:100%; height:calc(100vh - 270px); min-height:240px; background:white; padding:20px; position:sticky; top:120px; transition: left 0.25s ease; overflow:auto; border:solid 1px black; padding:20px 10px 20px 10px; border-radius:3px;  }  
.chat_list.open_w { }
.content { width:100%; padding:20px; margin:0 0 20px 0; min-height:300px; background:lightgray; }

.call_chat { width:60px; height:120px; position:fixed; bottom:60px; left:0; display:none; padding:0; transition: left 0.25s ease; z-index:12; }
.call_chat span { display:block; width:100px; height:26px; overflow: hidden; position:absolute; top:110px; left:0; background:var(--main-color-1); color:white; margin:0; 
	padding:0; text-align: center; line-height:26px; font-size:14px; transform-origin: 0 0; transform: rotate( -90deg); border-radius:0 0 10px 10px; user-select: none; } 
#call_ins_1.call_chat { bottom:200px; }
.curtain_dark { position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.4); z-index:13; display:none; }
.curtain_dark.open_w { display:block; }
.chat_list .mystatus_select { width:53%; border:none; color: var(--main-color-2); vertical-align: middle; -webkit-appearance: none; 
	-moz-appearance: none; appearance: none; padding: 2px 0 0 16px; margin:0; font-size:14px; transition:width 0.5s ease; text-align:left;
	background-image: url(/images/online_status_online_circle_1.svg);
	background-repeat:no-repeat; background-position: left center; background-size: 12px; }
.chat_list .mystatus_select:focus { outline:none; }
.chat_list .mystatus_select.contracted { width:16px; }
.chat_list .mystatus_select.online { background-image: url(/images/online_status_online_circle_1.svg); }
.chat_list .mystatus_select.away { background-image: url(/images/online_status_away_circle_1.svg); }
.chat_list .mystatus_select.concealed { background-image: url(/images/online_status_concealed_circle_1.svg); }
.chat_list .mystatus_select.dontdisturb { background-image: url(/images/online_status_busy_circle_1.svg); }
.chat_list .string_to_search { width:66px; padding:0; margin:0; transition:width 0.5s ease; }
.chat_list .string_to_search.expanded { width:calc(100% - 30px); }
.chat_list .string_to_search_input { border:solid 1px lightgray; width:100%; height:30px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
	border-radius:15px; font-size:13px; padding:2px 10px 2px 13px; margin:0; line-height:2; }
.chat_list .string_to_search_input:focus { outline:none; }

@media screen and (max-width:1200px) {
	.chat_list { position:sticky; top:120px; height:calc(100vh - 150px); }
}

@media screen and (max-width:900px) {
  .chat_list { width:240px; height:auto; position:fixed; top:0; bottom:0; left:-240px; z-index:13; border:none; border-right:solid 1px red; border-radius:0; }
  .header_one { display:none; }
  .call_chat { display:block; }
  .call_chat.open_w { left:240px; }
  .chat_list.open_w { left:0; }
}

@media screen and (max-width:600px) {
	.chat_list .mystatus_select { height:32px; line-height:1; padding:6px; font-size:12px; }
}

/* ================================= */
/* >>>>>>> Chat docks for chatapp >>>>>> */
/* ================================= */

#chat_list_dock { width:100%; height:100%; background:white; }
#chat_list_dock.dockered { position:fixed; top:20px; left:20px; width:300px; height:600px; background:none; padding:0 50px 0 0; }
#chat_list_dock.dockered.open_w { transform: translate(250px); }
.chat_handle { width:50px; height:120px; position:absolute; bottom:60px; right:0; padding:0; transition: left 0.25s ease; }
.chat_handle span { display:block; width:100px; height:26px; overflow: hidden; position:absolute; top:110px; left:0; background:var(--main-color-1); color:white; margin:0; 
	padding:0; text-align: center; line-height:26px; font-size:14px; transform-origin: 0 0; transform: rotate( -90deg); border-radius:0 0 10px 10px; user-select: none; } 


/* ================================= */
/* >>>>>>> Chat list for chatapp >>>>>> */
/* ================================= */

.chatlist { width:100%; height:100%; overflow:auto; padding:16px 10px 20px 10px; background-image:url(/images/backgr_header_1.jpg); 
    background-position:left top; background-repeat: repeat-x; } 
.content { width:100%; padding:20px; margin:0 0 20px 0; min-height:300px; background:lightgray; }


.curtain_dark { position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.4); z-index:13; display:none; }
.curtain_dark.open_w { display:block; }
.chatlist .mystatus_select { width:53%; border:none; color: var(--main-color-2); vertical-align: middle; -webkit-appearance: none; 
	-moz-appearance: none; appearance: none; padding: 2px 0 0 16px; margin:0; font-size:14px; transition:width 0.5s ease; text-align:left;
	background-image: url(/images/online_status_online_circle_1.svg); background-color:rgb(223,230,230);
	background-repeat:no-repeat; background-position: left center; background-size: 12px; }
.chatlist .mystatus_select:focus { outline:none; }
.chatlist .mystatus_select.contracted { width:16px; }
.chatlist .mystatus_select.online { background-image: url(/images/online_status_online_circle_1.svg); }
.chatlist .mystatus_select.away { background-image: url(/images/online_status_away_circle_1.svg); }
.chatlist .mystatus_select.concealed { background-image: url(/images/online_status_concealed_circle_1.svg); }
.chatlist .mystatus_select.dontdisturb { background-image: url(/images/online_status_busy_circle_1.svg); }
.chatlist .string_to_search { width:66px; padding:0; margin:0; transition:width 0.5s ease; }
.chatlist .string_to_search.expanded { width:calc(100% - 30px); }
.chatlist .string_to_search_input { border:solid 1px lightgray; width:100%; height:30px; -webkit-appearance: none; -moz-appearance: none; 
    appearance: none; border-radius:15px; font-size:13px; padding:2px 30px 2px 13px; margin:0; line-height:2;
    background: white url('/images/zoom_lense_1.svg') right 7px center no-repeat; background-size: 18px; }
.chatlist .string_to_search_input.expanded { border:solid 1px lightgray; width:100%; height:30px; -webkit-appearance: none; -moz-appearance: none; 
    appearance: none; border-radius:15px; font-size:13px; padding:2px 30px 2px 13px; margin:0; line-height:2;
    background: white; }
.chatlist .string_to_search_input:focus { outline:none; }
.chatlist .scroll_container { position:absolute; top:136px; bottom:20px; left:10px; right:10px; overflow-y: auto; overflow-x: hidden; background-color: none; }
.chatlist .scroll_container.found_items_list { background-color: #dfe6e6; }

@media screen and (max-width:900px) {
  .header_one { display:none; }
  .chat_handle { display:block; }
  .chat_handle.open_w { left:240px; }
  .chatlist.open_w { left:0; }
}

@media screen and (max-width:600px) {
	.chatlist .mystatus_select { height:32px; line-height:1; padding:8px 6px 6px 16px; font-size:12px; }
}

/* <<<<<< Chat list for chatapp <<<<<< */


/* ================================= */
/* >>>>> Standard modal alert >>>>>> */
/* ================================= */

.modal_std_block { position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); 
	display:flex; justify-content:center; align-items:center; z-index:999; }
.modal_std_curtain { position:absolute; top:0; bottom:0; left:0; right:0;  cursor:pointer; }
.modal_std { max-width:500px; width:80vw; min-height:300px; max-height:80vh; background: white; padding:30px 40px 100px 40px; position:relative;
	border:solid 1px black; border-radius:3px; }
.modal_std .modal_header { min-height:60px; font-size:1.4rem; line-height:1; color:var(--main-color-2); margin: 0 0 30px 0; padding:0; }
.modal_std .modal_header.with_picture { padding:20px 10px 6px 80px; background-image:url(/images/pen_drawing_dark_1.svg); background-size:60px; background-position: left center; background-repeat:no-repeat; }
.modal_std .modal_header.with_picture.error { background-image:url(/images/alert_pict_error_1.svg); }
.modal_std .modal_header.with_picture.success { background-image:url(/images/alert_pict_check_1.svg); }
.modal_std .modal_header.with_picture.attention { background-image:url(/images/alert_pict_attention_1.svg); }
.modal_std .modal_header.with_picture.alert { background-image:url(/images/alert_pict_alert_1.svg); }
.modal_std .modal_header.with_picture.info { background-image:url(/images/alert_pict_info_1.svg); }
.modal_std .modal_body { max-height:calc(80vh - 210px); overflow: auto; }
.modal_std .modal_message { font-size:120%; }
.modal_std .modal_message.with_picture { padding:0 0 0 30px; }
.modal_std .modal_footer { position:absolute; width:calc(100% - 80px); bottom:40px; display:flex; align-items:bottom; justify-content:center; }

/* <<<<< Standard modal alert <<<<<< */


/* ================================= */
/* >>>>> Image block component >>>>> */
/* ================================= */

:root { --img-w: 240px; --img-h: 180px; --img-n :3; }
.images_comp_block { width:calc(var(--img-w) + 2px); height:calc(var(--img-h) + 2px); border:solid 1px black; border-radius: 3px; 
	background:url(/images/no_photo_1.svg) center no-repeat; position:relative; overflow:hidden; }
.adv_images_container { width:calc(var(--img-w) * var(--img-n)); position:absolute; top:0; left:calc(0px - 0 * var(--img-w)); font-size:0; line-height:0; text-align:left; }
.adv_image { width:var(--img-w); height:var(--img-h); display:inline-block; overflow:hidden; }
.fence_board { position:absolute; width:calc(var(--img-w) / var(--img-n) + 0px); height:var(--img-h); top:0; left:0; }
.fence_notch { position:absolute; width:calc(100% - 10px); height:5px; bottom:5px; left:5px; border:solid 1px black; background:rgba(255,255,255,0.5); }
.fence_notch.open { border:solid 1px white; background:rgba(0,0,0,1); }
.full_img_block { position:fixed; top:0; left:0; right:0; bottom:0; padding:0; background:rgba(0,0,0,0.8); z-index:20; }
.full_img_block .img_scroll_container { position:absolute; top:0; left:0; right:0; bottom:0; border:solid 1px lime; overflow:auto; }
.full_img_block .loaded { width:100%; height:100%; background:none; overflow:hidden; display:flex; justify-content:center; align-items:center; }
.full_img_block .loaded.img_loaded { width:500%; height:500%; }
.full_img_block .loaded img { width:100%; height:auto; border-radius:3px; transition: width 0.5s, height 0.5s; } 
.full_img_block .loaded img.notrans { transition: width 0s, height 0s, left 0.1s, top 0.1s; } 
.images_comp_block .progress_animation { position:absolute; left:calc(50% - 80px); top:calc(50% - 80px); width: 160px; height:160px; background:white url(/images/stars_progress_1.svg) center no-repeat; border-radius:10px; }

@media screen and (max-width:600px) {
	.full_img_block .loaded { display:flex; justify-content:center; align-items:center; }
	.full_img_block .loaded img { transition: width 0s, height 0s, left 0s, top 0s; } 
	.full_img_block .loaded img.notrans { transition: width 0s, height 0s, left 0s, top 0s; } 

}

/* <<<<< Image block component <<<<< */

/* ================================= */
/* >>>>> Image viewer component >>>> */ 
/* ================================= *   <<< TO BE MOVED TO full-image.vue */


/* .fiv_block { position:fixed; top:0; left:0; right:0; bottom:0; padding:0; background:rgba(0,0,0,0.8); z-index:20; }
.fiv_block .loaded { width:100%; height:100%; background:none; overflow:hidden; position:relative; }
.fiv_block .loaded img { position:absolute; width:100%; height:auto; border-radius:3px; } 
.fiv_block .controls .button_previous { width:50px; height:50px; position:absolute; left:40px; top:calc(50% - 25px); background:url(/images/img_previous_arrow_1.svg)center no-repeat; cursor:pointer; }
.fiv_block .controls .button_next { width:50px; height:50px; position:absolute; right:40px; top:calc(50% - 25px); background:url(/images/img_next_arrow_1.svg)center no-repeat; cursor:pointer; }
.fiv_block .controls .button_close { width:50px; height:50px; position:absolute; right:40px; top:50px; background:url(/images/img_close_cross_1.svg)center no-repeat; cursor:pointer; } 

.fiv_block .touch_controls { width:40px; position:absolute; right:20px; bottom:20px; }
.fiv_block .touch_control { width:40px; height:40px; margin:0 0 10px 0; background-position:center; background-repeat:no-repeat; background-size:contain;
	background-color:rgba(0,0,0,0.6); border-radius:6px; }
.fiv_block .touch_controls .touch_control.button_previous { background-image:url(/images/img_previous_arrow_touch_1.svg); }
.fiv_block .touch_controls .touch_control.button_next { background-image:url(/images/img_next_arrow_touch_1.svg); }
.fiv_block .touch_controls .touch_control.button_zoomplus { background-image:url(/images/img_zoom_plus_touch_1.svg); }
.fiv_block .touch_controls .touch_control.button_zoomminus { background-image:url(/images/img_zoom_minus_touch_1.svg); }
.fiv_block .touch_controls .touch_control.button_close { background-image:url(/images/img_close_cross_touch_1.svg); } */


/* <<<<< Image viewer component <<<< */


/* ================================== */
/* >>>>> Avatar picker component >>>> */ 
/* ================================== *   <<< TO BE MOVED TO ava-picker.vue */


.ava_picker_wrapper { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; justify-content: center; align-items: center; 
    background:rgba(0,0,0,0.4); z-index:99999; }
.ava_picker_block { width:calc(100% - 80px); max-width:400px;  min-width:200px; max-height: calc(100% - 80px); min-height: 350px; padding:20px; 
    background:white; overflow-y:auto; overflow-x:hidden; border-radius:16px; }
.ava_container { width:100%; position:relative; background-repeat: no-repeat; background-position: center; background-size: contain; }
.ava_container img { width:100%; height:auto; border-radius:8px; }
.ava_container .success_sign { width:60px; height:60px; position:absolute; bottom:30px; right:calc(50% - 30px); background-color: green; 
    background-image: url(/images/but_pict_check_1.svg); background-position: center; background-size: contain; border-radius: 50px; }
.ava_buttons { width:100%; height:140px; display: flex; justify-content: space-between; align-items: center; flex-direction: column; 
    padding:40px 0 0 0; }
.ava_button { min-width:200px; min-height:40px; background: lightgreen; color:white; display:flex; justify-content: center; align-items: center; 
    margin:0 0 20px 0; border-radius:8px; font-size: 14px; font-weight: 300; user-select: none; cursor: pointer; }
.ava_button.ok { background: lightgreen; }
.ava_button.add { background: green; }
.ava_button.cancel { background: gray; }
.ava_button.w_close { background: gray; }

/* <<<<< Avatar picker component <<<< */


/* ================================= */
/* >>>>>>>>> Media manager >>>>>>>>> */
/* ================================= */ 

#attachment_menu_1 { width:60px; height:250px; position:absolute; bottom:38px; left:-15px; margin:0; padding:0; }
.main_chat_block .att_file ul { position:absolute; top:0; bottom:0; left:0; right:0; list-style:none; margin:0; padding:0; }
.main_chat_block .att_file ul > li { width:50px; height:50px; margin:0 5px 10px 5px; border-radius:16px; cursor:pointer; }
.main_chat_block .att_file ul > li.photo { background: var(--main-color-1) url(/images/button_att_photo_white_1.svg) center no-repeat; background-size:44px; }
.main_chat_block .att_file ul > li.video { background: var(--main-color-1) url(/images/button_att_video_white_1.svg) center no-repeat; background-size:42px; }
.main_chat_block .att_file ul > li.file { background: var(--main-color-1) url(/images/button_att_file_white_1.svg) center no-repeat; background-size:42px; }
.main_chat_block .att_file ul > li.audio { background: var(--main-color-1) url(/images/button_att_audio_white_1.svg) center no-repeat; background-size:42px; }


.media_manager .items_container { font-size:0; line-height:0; text-align:left; }
.media_manager .media_item_block { position: relative; width: 128px; height: 128px; cursor: pointer; border-radius: 10px; 
	padding: 4px; line-height: 1; background-color: #fff; transition: all 0.2s ease-in-out; display: inline-block; vertical-align:top;
	font-size:0.8rem; max-width: 100%; margin:0 10px 10px 0; }
.media_manager .media_item_block.selected { background: rgba(0,200,100,1); }
.media_manager .media_item { width:100%; height:100%; border-radius: 6px; border: none; display: block; padding: 4px; margin-bottom: 20px; line-height: 1;
	background-color: #fff; transition: border 0.2s ease-in-out; padding:4px; }
.media_manager .media_thumb { width:100%; height:calc(100% - 20px); background:lightgrey; background-size:cover; background-position:center; background-repeat:no-repeat;
	border-radius:3px; position:relative; }
.media_manager .media_thumb.img { height:100%; }
.media_manager .media_thumb span { position:absolute; top:0; left:0; right:0; bottom:0; background-size:60px; background-position:center; background-repeat:no-repeat;
	border-radius:3px; background-image:url(/images/video_play_sign_1.svg); }
.media_manager .media_name { height:20px; width:100%; overflow:hidden; padding:5px 0 0 0; }
.media_manager .media_name > div { width:1000px; height:20px; }


.media_manager .select_controls { height:30px; position:absolute; top:20px; right:15px; display:flex; justify-content:center; align-items:center; }
.media_manager .ctrl { min-width:30px; height:30px; }
.media_manager .ctrl.del { background:url(/images/message_delete_1.svg) center no-repeat; cursor:pointer; }
.media_manager .ctrl.sel_num { color:var(--main-color-2); font-size:1.5rem; text-align:center; line-height:30px; padding:2px 0 0 0; }
.media_manager .ctrl.deselect_all { background:url(/images/ctrl_close_cross_1.svg) center top 7px no-repeat; background-size:20px; cursor:pointer; }

.media_manager_button { display:inline-block; vertical-align:middle; width:50px; height:50px; cursor:pointer; background-size:50px;
	background-position:center; background-repeat:no-repeat; }
.media_manager_button.image { background-image:url(/images/button_att_photo_1.svg); }
.media_manager_button.video { background-image:url(/images/button_att_video_1.svg); }


.video_marker { position:absolute; top:0; left:0; right:0; bottom:0; background-size:60px; background-position:center; background-repeat:no-repeat;
	border-radius:3px; background-image:url(/images/video_play_sign_1.svg); }

@media screen and (max-width:600px) {
	.media_manager .items_container { width:100%; font-size:0; display:flex; flex-wrap:wrap; line-height:0; justify-content:center; }
	.media_manager .media_item_block { display: block; margin:5px 5px 5px 5px; }
}

/* <<<<<<<<< Media manager <<<<<<<<< */

/* ================================= */
/* >>> Media manager perversive >>>> */
/* ================================= */

.modal_win_std .modal_footer_ { width:100%; min-height:124px; margin-top:auto; display:flex; align-items:center; justify-content:center; 
	border-radius:0 0 8px 8px; background: whitesmoke; }
.media_manager .select_controls_ { height:30px; position:absolute; top:16px; left:120px; display:flex; justify-content:center; align-items:center; }
.media_manager .button_add_ { width:60px; height:60px; background:var(--main-color-2); background-position:center; background-size:50px; background-repeat:no-repeat; border:none; 
	border-radius:30px; cursor:pointer; background-image:url(/images/but_pict_plus_white_1.svg); }
.media_manager .button_select_ { width:60px; height:60px; background:var(--main-color-2); background-position:center; background-size:60px; background-repeat:no-repeat; border:none; 
		border-radius:30px; cursor:pointer; background-image:url(/images/but_chat_send_2.svg); }	
.media_manager .button_add_.inactive { background-color:lightgray; }
.media_manager .button_select_.inactive { background-color:lightgray; }

/* <<< Media manager perversive <<<< */


[v-cloak] { display:none; }

.visible_only_on_desktop { display:block; }
@media screen and (max-width:1200px) {
	.visible_only_on_desktop { display:none; }
}

.visible_only_on_mobile { display:none; }
@media screen and (max-width:1200px) {
	.visible_only_on_mobile { display:block; }
}

.display_none { display:none; }

.pulsar {
	animation: pulsate 2s linear infinite;
}
@keyframes pulsate {
	0% { opacity: 0; }
	25% { opacity: 0; }
	30% { opacity: 1; }
	95% { opacity: 1; }
	100% { opacity: 0; }
}

/* ================================= */
/* >>>>>> Chat call controls >>>>>>> */
/* ================================= */

/* .call_buttons_menu { position:absolute; top:0; right:0; }
.call_root_button { width:40px; height:40px; position:absolute; top:0; right:0; 
	background: url(/images/media_call_control_button_1.svg)center no-repeat; border-radius:25px; cursor:pointer; }
.camera_root_button { width:40px; height:40px; position:absolute; top:0; right:40px; 
    background: url(/images/take_photo_1.svg)center no-repeat; border-radius:25px; cursor:pointer; } 
.call_buttons_menu .curtain_transparent { position:fixed; top:0; bottom:0; left:0; right:0; background:white; opacity:0; z-index:5098; }
.call_buttons_menu .call_buttons { width:50px; height:100px; position:absolute; top:70px; right:16px; display:flex; flex-direction:column; z-index:5099; }
.call_buttons_menu .call_button { width:40px; height:40px; margin:0 5px 10px 5px; background-color: var(--main-color-2); background-position:center; background-repeat:no-repeat; border-radius:16px; cursor:pointer; }
.call_buttons_menu .call_button.start_audio { background-image:url(/images/start_audio_call_button_1.svg); }
.call_buttons_menu .call_button.start_video { background-image:url(/images/start_video_call_button_1.svg); } */

/* <<<<<< Chat call controls <<<<<<< */

/* ================================= */
/* >>>>>>>>> Webrtc calls >>>>>>>>>> */
/* ================================= */
.webrtc { width:250px; position:fixed; bottom:10px; right:10px; background-color:white; border:solid 1px black; border-radius:16px; 
    text-align:center; padding:20px 20px 0 20px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; z-index:1000; }
.webrtc button { border:none; border-radius:6px; background-color:var(--main-color-2); color:white; padding:10px 16px; margin:0 0 20px 0; width:100%; }
.webrtc .spinner-grow { display:block; width:60px; height:60px; margin:0 auto 20px auto; }
.webrtc .spinner-border { display:block; width:60px; height:60px; margin:0 auto 20px auto; }
.webrtc .call_progress { display:block; width:60px; height:60px; margin:0 auto 20px auto; border-radius:30px; background:green; }
.webrtc .text_info { margin:0 0 20px 0; font-size:1.7rem; line-height:1.1; color:var(--main-color-2); }
.video_call_block { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.9); overflow:hidden; z-index:999; }
.video_call_block .inbound_video { position:absolute; top:0; left:0; width:100px; height:auto; }
.video_call_block .outbound_video { position:absolute; bottom:50px; right:50px; width:150px; height:auto; border:solid 1px white; border-radius:3px; }
.video_call_block .outbound_video.mobile { bottom:20px; right:20px; width:100px; }
.video_call_block .incall_controls { position:absolute; bottom:-70px; width:100%; display:flex; justify-content:center; align-items:center; 
    transition:bottom 0.3s; }
.video_call_block .incall_controls.appear { bottom:80px; }
.video_call_block .incall_control { width:60px; height:60px; margin:0 8px; border-radius:20px; background-color:darkred; 
    background-position:center; background-repeat:no-repeat; cursor:pointer; }
.video_call_block .incall_control.hangup { background-image:url(/images/end_call_button_1.svg); }
#callinfo_ { }


/* ================================= */
/* >>>>>>>> Newbie stuff >>>>>>>>>>> */
/* ================================= */

.hello_message { width:100%; min-height:100px; padding:100px 30px 20px 30px; background:white; border-radius:3px; font-size:120%; 
    color:rgb(130, 160, 160); text-align:center; margin:0 0 20px 0; 
    background-image: url(/images/nb_1.svg); background-position:top 20px center; background-repeat: no-repeat; background-size:80px; }
.hello_message.hello_ins { background:#d6e6e6 url(/images/nb_1.svg)top 20px center no-repeat; }
.hello_message.hello_chats {  }
.hello_message.hello_nocontent { background:#d6e6e6 url(/images/nb_1.svg) top 20px center no-repeat; }

/* <<<<<<<< Newbie stuff <<<<<<<<<<<< */

.invitation_button { position:absolute; left:20px; bottom:10px; cursor:pointer; padding:6px 20px; padding:3px 6px 5px 36px; margin:0; background: url(/images/invite_friend_icon_1.svg) left center no-repeat;
    background-size: 36px; }

/* .inv_sender { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index: 100; }
.inv_sender .is_block { position:absolute; top:calc(50% - 150px); left:calc(50% - 120px); right:calc(50% - 120px); bottom:calc(50% - 150px); 
    background:white; border-radius: 16px; padding:20px; }

.inv_sender .input_field { width:100%; padding:0; margin:0 0 20px 0; position:relative; }

.inv_sender .input_field input { border:solid 1px lightgray; width:100%; height:30px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    border-radius:8px; font-size:13px; padding:2px 20px 2px 13px; margin:0; line-height:2; }
.inv_sender .input_field input:focus { outline:none; }
.inv_sender .input_field .confirm { width:8px; height:8px; position:absolute; right:7px; top:12px; background:none; border-radius:4px; }
.inv_sender .input_field .confirm.ok { background:lightgreen; }
.inv_sender .input_field .confirm.notok { background:coral; }

.inv_sender .inv_header { display: block; padding:3px 6px 5px 36px; margin:0 0 20px 0; background: url(/images/invite_friend_icon_1.svg) left center no-repeat;
    background-size: 36px; }

.inv_sender .input_field.message textarea { width:100%; height:100px; border:solid 1px lightgray; -webkit-appearance: none; -moz-appearance: none; appearance: none;
     resize:none; border-radius:8px; font-size:13px; padding:10px 10px 10px 13px; margin:0; line-height:1.2; }
.inv_sender .input_field.button { width:100%; padding:10px; color:white; background: forestgreen; cursor:pointer; text-align: center; 
    border-radius: 8px; }

.inv_sender .input_field.button.disabled { background: grey; cursor:auto; }

.inv_sender .is_alert { position:absolute; top:calc(50% - 150px); left:calc(50% - 120px); right:calc(50% - 120px); bottom:calc(50% - 150px); 
    background:white; border-radius: 16px; padding:20px; }
.inv_sender .is_alert.red { background:crimson; }
.inv_sender .is_alert.green { background:forestgreen; }

.inv_sender .alert_button {  width:60%; padding:5px; margin-left:20%; color:white; background: forestgreen; cursor:pointer; text-align: center; 
    border-radius: 8px; }
.inv_sender .alert_button.red {  color:crimson; background: rgba(255,255,255,0.7); }
.inv_sender .alert_button.green {  color:forestgreen; background: rgba(255,255,255,0.7); }

.inv_sender .alert_text { width:100%; height:150px; text-align: center; margin:40px 0 20px 0; }
.inv_sender .alert_text.red { color:white; }
.inv_sender .alert_text.green { color:white; }

.inv_sender .is_spinner  { position:absolute; top:calc(50% - 150px); left:calc(50% - 120px); right:calc(50% - 120px); bottom:calc(50% - 150px); 
    background:white url('/images/spinner_1.gif') center no-repeat; border-radius: 16px; padding:20px; } */



/* CONT_FINDER.VUE */

.cont_finder_block { width:100%; }
.cont_finder_block .cont_finder { width:100%; padding:0 8px; min-height:30px; position:relative; margin:0 0 20px 0; display:flex; justify-content:flex-end; align-items:center; }
.cont_finder_block .string_to_search_cont { width:66px; padding:0; margin:0; transition:width 0.5s ease; }
.cont_finder_block .string_to_search_cont.expanded { width:100%; }
.cont_finder_block .string_to_search_cont_input { border:solid 1px lightgray; width:100%; height:30px; -webkit-appearance: none; 
    -moz-appearance: none; appearance: none; border-radius:15px; font-size:13px; padding:2px 10px 2px 13px; margin:0; line-height:2; }
.cont_finder_block .string_to_search_cont_input:focus { outline:none; }
.cont_finder_block .drop_search_button { width:30px; height:30px; position:absolute; top:0; right:8px; cursor:pointer; 
    background:url(/images/ctrl_close_cross_2.svg) center no-repeat; background-size:16px; }


/* CONT_FIDER.VUE */
    
.frame { overflow: hidden; }

.drop_search_button { width:30px; height:30px; position:absolute; top:0; right:8px; cursor:pointer; 
    background:url(/images/ctrl_close_cross_1.svg) center no-repeat; background-size:16px; }


/* CONTLIST_FOUND_ITEM.VUE */

.contlist_found_item  { width:100%; height:58px; padding:8px; overflow:hidden; position:relative; font-size:0; line-height:0; user-select:none; }
.contlist_found_item_avatar { width:42px; height:42px; border-radius:12px; display:inline-block; vertical-align:top; position: relative; background-position:center; background-repeat:no-repeat; background-size:cover; }
.contlist_found_item_avatar .status_sign { width:11px; height:11px; position:absolute; bottom:3px; right:3px; border:solid 1px white; border-radius:6px; }
.contlist_found_item_content { width:calc(100% - 43px); min-height:30px; display:inline-block; vertical-align:top; font-size:12px; line-height:1.1; padding:14px 0 0 14px; overflow:hidden; }
.contlist_found_item_content span { display:inline-block; min-width:500px; }
.contlist_found_item .name { font-size:15px; font-weight:bold; height:19px; }
.contlist_found_item .like_a { position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer; }
.contlist_found_item .like_a:hover { background:rgba(130,160,160,0.3); border-radius:12px; }

.contlist_found_item .right_block { min-width: 40px; min-height:30px; position: absolute; text-align: right; top:14px; right:10px; font-size:12px; 
    line-height:1.1; }
.contlist_found_item .butt { width:32px; height:32px; background:url('/images/plus_1.svg') center no-repeat; background-size: 26px;
    border-radius:16px; cursor:pointer; }
.contlist_found_item .butt:hover { background-color:white; }



.ant_back { position:absolute; left:20px; top:10px; width:36px; height:36px; background:url(/images/ant_hill_1.svg) center no-repeat; }
.close_butt { position:absolute; width:40px; height:40px; top:15px; right:10px; background:url(/images/ctrl_close_cross_1.svg) center no-repeat; }

.curtain_menu { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); }
.curtain_menu .cm_wrapper { position:absolute; top:0; left:100px; right:0; bottom:0; background:rgba(255,255,255,1); padding:90px 0 0 0; overflow-x:hidden; overflow-y:auto; }
.curtain_menu .cm_wrapper > ul { width:100%; list-style:none; margin:0; padding:0; font-size:18px; }
.curtain_menu .cm_wrapper > ul > li { width:100%; padding:20px 20px 20px 30px; position:relative; font-weight: bold; cursor: pointer; user-select: none; }
/* non-idiotic original 
.curtain_menu .cm_wrapper > ul > li { width:100%; padding:20px 20px 20px 60px; position:relative; cursor: pointer; user-select: none; }  
.curtain_menu .cm_wrapper > ul > li.update { background: url(/images/update_icon_gray_1.svg) left 26px top 20px no-repeat; background-size:22px; 
    color:lightgray; }
.curtain_menu .cm_wrapper > ul > li.update.available { background: url(/images/update_icon_1.svg) left 26px top 20px no-repeat; background-size:22px;
    color:black; }    
*/
.curtain_menu .cm_wrapper > ul > li.settings { background: url(/images/update_icon_1.svg) left 26px top 20px no-repeat; background-size:22px; }   
.curtain_menu .cm_wrapper > ul > li.update { color:black; font-weight: 500; }
.curtain_menu .cm_wrapper > ul > li.update.available { color:black; font-weight: bold; }
.curtain_menu .cm_wrapper > ul > li .like_a { position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer; }
.curtain_menu .cm_wrapper > ul > li.invite { background: url(/images/invite_friend_icon_1.svg) left 14px center no-repeat; background-size:44px; }
.curtain_menu .cm_wrapper > ul > li.signout { background: url(/images/signout_button_sign_1.svg) left 16px top 10px no-repeat; background-size:44px; }
.curtain_menu .cm_ava { position:absolute; top:2px; width:38px; height:38px; border-radius:10px; display:inline-block; vertical-align:top; 
    position: relative; background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden; }
.curtain_menu .cm_ava img { width:100%; height:auto; position:absolute; top:-20%; left:0; }



/* CALL WIDGET TEST */


.call_widget { position:fixed; top:70px; right:0; width:316px; height:50px; background:#dfe6e6; border-radius:25px 0 0 25px; z-index:6000; }
.call_widget .widget_body { position:absolute; top:0; left:0; width:250px; height:50px; display:flex; background:var(--main-color-2); border-radius:25px; }
.call_widget .status_indicator_block { display:none; width:50px; height:50px; border-radius:25px; padding:5px; }
.call_widget .status_indicator { background-color:lightgreen; width:40px; height:40px; border-radius:20px; background-position:center; background-repeat:no-repeat; background-size:34px; }
.call_widget .widget_body.ready .status_indicator { background:none; }
.call_widget .widget_body.in_progress .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/call_in_progress_1.svg); }
.call_widget .widget_body.bad_connection .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/call_interrupted_1.svg); }
.call_widget .widget_body.no_connection .status_indicator { background-color:var(--main-color-1); background-image:url(/images/call_no_connection_1.svg); }
.call_widget .widget_body.closing_connection .status_indicator { animation: ringing-out 2.5s ease infinite; background-image:url(/images/closing_connection_1.svg); }
.call_widget .widget_body.inbound_ringing .status_indicator { animation: ringing-in .75s linear infinite; background-image:url(/images/answer_call_button_1.svg); }
.call_widget .widget_body.outbound_ringing .status_indicator { animation: ringing-out 2.5s ease infinite; background-image:url(/images/outbound_call_1.svg); }

.call_widget .widget_body.info_busy { background:var(--main-color-1); }
.call_widget .widget_body.info_no_answer { background:var(--main-color-1); }
.call_widget .widget_body.info_busy .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/info_sign_1.svg); }
.call_widget .widget_body.info_no_answer .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/info_sign_1.svg); }

.call_widget .call_info { display:none;  height:50px; overflow:hidden; padding:0 0 0 5px; }
.call_widget .call_info .status { min-width:500px; height:20px; color:lightgreen; font-size:13px; padding:3px 0 0 0; }
.call_widget .widget_body.bad_connection .call_info .status { color:var(--pp-golden); }
.call_widget .widget_body.no_connection .call_info .status { color:var(--pp-golden); }
.call_widget .call_info .name { min-width:500px; height:30px; color:white; font-size:18px; padding:0 0 2px 0; }
.call_widget .call_info .ava { display:none; }

.call_widget .widget_body.info_busy .call_info, .call_widget .widget_body.info_no_answer { padding:0; }
.call_widget .widget_body.info_busy .call_info .status { height:50px; color:var(--pp-golden); font-size:14px; line-height:50px; padding:0; }
.call_widget .widget_body.info_no_answer .call_info .status { height:50px; color:var(--pp-golden); font-size:14px; line-height:50px; padding:0; }

.call_widget .widget_body.info_busy .call_info .name { display:none; }
.call_widget .widget_body.info_no_answer .call_info .name { display:none; }

.call_widget .end_call_button_block { display:none; width:50px; height:50px; border-radius:25px; padding:5px; cursor:pointer; display:flex; }
.call_widget .end_call_button_block.ext { display:none; width:100px; }

.call_widget .end_call_button { width:40px; height:40px; border-radius:20px; background-color:var(--main-color-1);
    background-image:url(/images/end_call_button_1.svg); background-position:center; background-repeat:no-repeat; background-size:34px; }

.call_widget .loudspeaker_button { display:none; width:40px; height:40px; margin-right:10px; border-radius:20px; background-color:lightgray;
    background-image:url(/images/loudspeaker_button_off_1.svg); background-position:center; background-repeat:no-repeat; background-size:34px; }
.call_widget .loudspeaker_button.on { background-image:url(/images/loudspeaker_button_on_1.svg); }
    

.call_widget .widget_body.info_busy .end_call_button { background-color:white; background-image:url(/images/ok_button_1.svg); background-size:42px; }
.call_widget .widget_body.info_no_answer .end_call_button { background-color:white; background-image:url(/images/ok_button_1.svg); background-size:42px; }

/* non-idiotic original
.call_widget .minimax_button { width:40px; height:40px; position:absolute; right:16px; top:5px; cursor:pointer;
    background-image:url(/images/minimax_button_maximize_1.svg); background-position:center; background-repeat:no-repeat; background-size:36px; }
*/
.call_widget .minimax_button { position:absolute; top:0; right:0; left:0; bottom:0; cursor:pointer; }

.call_widget .return_line { width:100%; display:flex; justify-content:center; align-items:center; color:lightgreen; }

.call_widget_max_bl { position:fixed; top:0; bottom:0; left:0; right:0; z-index:6000; }
.call_widget_max_bl .widget_body { position:fixed; top:0; bottom:0; left:0; right:0; display:flex; flex-direction:row; justify-content: space-evenly;  align-items: flex-end;
    background:var(--main-color-2); padding:0 0 20vh 0; border-radius:0; z-index:6000; }
.call_widget_max_bl .status_indicator_block { width:50px; height:50px; border-radius:25px; padding:5px; }
.call_widget_max_bl .status_indicator { background-color:lightgreen; width:40px; height:40px; border-radius:20px; background-position:center; background-repeat:no-repeat; background-size:34px; }
.call_widget_max_bl .widget_body.ready .status_indicator { background:none; }
.call_widget_max_bl .widget_body.in_progress .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/call_in_progress_1.svg); }
.call_widget_max_bl .widget_body.bad_connection .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/call_interrupted_1.svg); }
.call_widget_max_bl .widget_body.no_connection .status_indicator { background-color:var(--main-color-1); background-image:url(/images/call_no_connection_1.svg); }
.call_widget_max_bl .widget_body.closing_connection .status_indicator { animation: ringing-out 2.5s ease infinite; background-image:url(/images/closing_connection_1.svg); }
.call_widget_max_bl .widget_body.inbound_ringing .status_indicator { animation: ringing-in .75s linear infinite; background-image:url(/images/answer_call_button_1.svg); }
.call_widget_max_bl .widget_body.outbound_ringing .status_indicator { animation: ringing-out 2.5s ease infinite; background-image:url(/images/outbound_call_1.svg); }

.call_widget_max_bl .widget_body.info_busy { background:var(--main-color-1); }
.call_widget_max_bl .widget_body.info_no_answer { background:var(--main-color-1); }
.call_widget_max_bl .widget_body.info_busy .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/info_sign_1.svg); }
.call_widget_max_bl .widget_body.info_no_answer .status_indicator { background-color:rgba(255,255,255,0); background-image:url(/images/info_sign_1.svg); }

.call_widget_max_bl .call_info { width:300px; position:absolute; top:16vh; left:calc(50vw - 150px); padding:0; text-align: center; 
    display:flex; flex-direction: column-reverse; align-items: center; }
/* .call_widget_max_bl .call_info .status { width:170px; overflow:hidden; height:50px; line-height: 50px; color:lightgreen; font-size:13px; padding:0 20px 0 20px; } */
.call_widget_max_bl .widget_body.bad_connection .call_info .status { color:var(--pp-golden); }
.call_widget_max_bl .widget_body.no_connection .call_info .status { color:var(--pp-golden); }
.call_widget_max_bl .call_info .name { width:100%; color:white; margin:0 0 10px 0;
    font-size:20px; line-height: 1.2; padding:0 0 2px 0; }
.call_widget_max_bl .call_info .status { width:100%; color:lightgreen; 
    font-size:18px; padding:0 0 2px 0; }
.call_widget_max_bl .call_info .ava { width:150px; height:180px; margin:0 0 20px 0; 
    background-image: url("/images/ava_empty_1.svg"); background-position: center; background-repeat: no-repeat; border-radius:30px; }

.call_widget_max_bl .widget_body.info_busy .call_info .status { min-width:auto; width:170px; height:50px; color:var(--pp-golden); font-size:16px; line-height:50px; padding:0; }
.call_widget_max_bl .widget_body.info_no_answer .call_info .status { min-width:auto; width:170px; height:50px; color:var(--pp-golden); font-size:16px; line-height:50px; padding:0; }



.call_widget_max_bl .end_call_button_block { width:100px; height:50px; border-radius:25px; padding:5px; cursor:pointer; display:flex; }
.call_widget_max_bl .end_call_button_block.ext { width:150px; }
.call_widget_max_bl .end_call_button { width:40px; height:40px; border-radius:20px; background-color:var(--main-color-1);
    background-image:url(/images/end_call_button_1.svg); background-position:center; background-repeat:no-repeat; background-size:34px; }
.call_widget_max_bl .loudspeaker_button { width:40px; height:40px; margin-right:10px; border-radius:20px; background-color:lightgray;
    background-image:url(/images/loudspeaker_button_off_1.svg); background-position:center; background-repeat:no-repeat; background-size:34px; }
.call_widget_max_bl .loudspeaker_button.on { background-image:url(/images/loudspeaker_button_on_1.svg); }

.call_widget_max_bl .widget_body.info_busy .end_call_button { background-color:white; background-image:url(/images/ok_button_1.svg); background-size:42px; }
.call_widget_max_bl .widget_body.info_no_answer .end_call_button { background-color:white; background-image:url(/images/ok_button_1.svg); background-size:42px; }

/* .call_widget_max_bl .minimax_button { width:40px; height:40px; position:absolute; right:16px; top:16px; z-index:6000; cursor: pointer;
    background-image:url(/images/minimax_button_minimize_1.svg); background-position:center; background-repeat:no-repeat; } */
.call_widget_max_bl .minimax_button { width:40px; height:40px; margin-right:10px; z-index:6000; cursor: pointer;
    background-image:url(/images/minimax_button_minimize_1.svg); background-position:center; background-repeat:no-repeat; 
    background-size: 36px; }
    

    .tab_dot { width:8px; height:8px; position:absolute; top:0; right:0; border-radius: 4px; background:var(--pp-golden); }
    .ava_dot { width:8px; height:8px; position:absolute; top:5px; right:5px; border:solid 1px white; border-radius: 4px; background:var(--main-color-1); }