.fff {
    background: #fff;
}

.loading {
    position: absolute;
    width: 160px;
    height: 90px;
    text-align: center;
    color: grey;
    font-family: Avenir-Light;
    font-size: 19px;
}

.user_msg_preview {
    color: #8e8e93!important;
}

.chatter_msg_preview {
    font-family: Avenir-Heavy;
    color: black!important;
}



.show {
    display:inline;
}
.hide {
    display:none;
}

/* TEMP */
.offline_warning_header {
    font-size: 20px;
    color: #5847c4;
    font-family: Avenir-Medium;
    margin: 16px 0px 12px 0px;
    padding-left: 15px;
    padding-right: 15px;
}
.offline_warning_img {
    width: auto;
    height: 73px;
    margin-top: 7px;
}
.offline_warning_text {
    margin-top: 1px;
    padding-left: 21px;
    padding-right: 21px;
    font-size: 15px; 
    text-align: center;
}


.list-block ul:before {
    background-color: transparent!important;
}

.list-block ul:after {
    background-color: transparent!important;
}

.width100 {
    width: 100%!important;
}

.spacer_top12 {
    margin-top: 12px;
}

.spacer_top16 {
    margin-top: 16px;
}

.side_pad12 {
    padding: 0px 12px;
}

.side_pad16 {
    padding: 0px 16px;
}

.modal_message {
    margin-top: 10px;
    font-size: 16px!important;
}

#chat_unread_list_id {
    max-width: 115px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;    
}
/* temp ends */


/* OFFENSE MODALS */

.mild_offense_receiver_pic {
    position: absolute;
    z-index: 2;
    width: 80px;
    height: 80px;
    margin-left: -66px;   
}
.mild_offense_strike_icon {
    z-index: 1;
    width: 80px;
    height: 80px;
    margin-left: 54px;  
}
.mild_offense_used{
    font-size: 19px;
    font-weight: 800;
    color: #d95350;
}

/* MAIN SWIPER 2020-02-26 */
/* PRFEVIOUSLY CHAT SWIPER */

.main_swiper_container {
    width: 100%;
    height: 100%;
    font-family: Avenir-Light;
}

/* STATUS */

.status_online {
    background-color: #17a817;
    border: 1px solid white;
    /*
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    */
    /*background-color: #10af10;*/
    /*background-color: #5cb85c;*/
}
.status_online_settings {
    border-left: 5px solid #5cb85c;
    border-right: 5px solid #5cb85c;
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 30px;
    margin-bottom: 2px;
}
/*
.status_online:hover {
    background-color: #4cae4c;
}
*/
.status_away {
    background-color: #e2f424;
    border: 1px solid white;
}
.status_away_settings {
    border-left: 5px solid #e2f424;
    border-right: 5px solid #e2f424;
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 30px;
    margin-bottom: 2px;    
}
/*
.status_away:hover {
    background-color: #c6d61b;
}
*/
.status_busy {
    background-color: #d9534f;
    border: 1px solid white;    
}
.status_busy_settings {
    border-left: 5px solid #d9534f;
    border-right: 5px solid #d9534f;
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 30px;
    margin-bottom: 2px;    
}
/*
.status_busy:hover {
    background-color: #d43f3a;
}
*/

/*  
.status_brb {
    background-color: #f0ad4e;
    border-top: 1px solid white;
    border-bottom: 1px solid white;    
}
.status_brb_settings {
    border-left: 5px solid #d9534f;
    border-right: 5px solid #d9534f;    
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 30px;
    margin-bottom: 2px;
}
BRB zamnjen sa GAME */ 

.status_game {
    background-color: #f0ad4e;
    border: 1px solid white;
    /*margin-top: -1px;*/
}

.status_game_settings {
    border-left: 5px solid #f0ad4e;
    border-right: 5px solid #f0ad4e;    
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 30px;
    margin-bottom: 2px;
}


/*
.status_brb:hover {
    background-color: #eea236;
}
*/
.status_offline {
    background-color: transparent;
    /*
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    */
}
.status_offline_settings {
    border-left: 5px solid lightgray;
    border-right: 5px solid lightgray;
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 30px;
    margin-bottom: 2px;
}



/* CHAT BACKGROUND */

.pink_back {
    /*background-color: ;*/
    background-image: url("../images/purple_back_multi.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

.purple_back {
    background-image: url("../images/background640x1135.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}


/* incoming */

.incoming_center_outer {
    /*position: absolute;*/
    z-index: 9999;
    position: absolute;
    width: 100%;
    height: 0px;
    top: -41px;
    display: -webkit-flex!important;
    display: flex!important;
    -webkit-flex-direction: column!important;
    flex-direction: column!important;
    -webkit-align-items: center!important;
    align-items: center!important;
    -webkit-justify-content: center!important;
    justify-content: center!important;
    -webkit-align-content: center!important;
    align-content: center!important;
}

.incoming {
    opacity: 0;
    font-size: 14px;
    padding: 15px 21px 7px 21px!important;
    padding-top: 0px;
    color: #fff !important;
    cursor: pointer;
    text-align: center;
    left: 50%;
    height: auto;
    border-radius: 120px;
    width: auto;
    background: #4792e6;
    border: 2.1px solid rgba(251, 251, 253, 1);
}

.incoming_text {
    margin: 0px 0px 7px 0px!important;
}

.incoming_member {
    /*display: none;*/
    width: 25px;
    height: 25px;
}

.incoming_action {
    /*display: none;*/
    width: 25px;
    height: 25px;
    margin-left: -12px!important;
}


/* CHAT PAGE OUTER */
/* CHAT CLOSE RPEVIOUSLY REMOVED FROM HERE 2020-04-18 */



/* SWIPER --- MAIN */

.chat_swiper_container {
    font-family: Avenir-Medium;
    /* mm adjustment */
}


.pad_left_right15 {
    padding-left: 15px;
    padding-right: 15px;
}


/* SLIDE 1 */

.chat_subhead {
    color: #6835cb;
    font-family: Avenir-Medium;
    font-size: 1.24em!important;
    /*text-shadow: 0 0 1px #ffffff;*/
    /*width: 84%!important;*/
    margin: 0px auto 25px auto!important;
    padding: 0px 0px 0px 0!important;
    text-align: center;
}

.chat_save_button {
    margin-bottom: 25px;
}

.chat_text {
    text-align: left;
}

.chat_offensive_language_label {
    width: 61%!important;
}


/* LIPS */

.lip_container_mid_noswiping {}


/* LIP OUTER ROWS - col and widget need height 100% for calc positioning to work */

.lip_outer_left {
    position: absolute;
    left: 0;
    height: 100%;
    width: 0px;
    /*background-color: brown;*/
}

.lip_outer_right {
    position: absolute;
    right: 0;
    height: 100%;
    width: 0px;
    /*background-color: brown;*/
}

.chat_dialogue_noswiping_row {
    /*background-color: aqua;
    opacity: 0.5;*/
    z-index: 1;
    position: absolute;
    height: 100%;
    left: 15%;
    width: 82%;
}

.lip_row {
    z-index: 2;
    /*background-color: greenyellow;*/
    width: 100%!important;
    margin-top: 70px;
    height: calc(100% - 109.5px)!important;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /*   -webkit-box-pack: center; */

    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.chat_dialogue_noswiping_row_inner {
    background-color: greenyellow;
    width: 100%!important;
    margin-top: 70px;
    height: calc(100% - 109.5px)!important;
}

.lip {
    /*background-color: blue;*/
    height: 19vmin;
    width: 0px;
}


/* SLIDE 2 SWIPER */

/* CHAT UNREAD HEADER */
.chat_unread_header_row {
    width: 100%;
    height: 42px;   
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;     
}
.chat_unread_header_row {
    background-color: #cff0d9;
    /*background-color: #dde6ff;*/ 
}


/* CHAT UNREAD HEADER */
#chat_span_message_counter_id {
    margin-left: -6px;
}
.chat_unread_header_row_col {
    font-family: Avenir-Light;
    text-shadow: 0 0 1px #fbfbfd;
    display: flex!important;
    justify-content: center;
    width: 100%;
    height: 42px;
    line-height: 41px;
    font-size: 16px;

    text-shadow: 0 0 1px #fbfbfd;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

.chat_unread_header_row_col 
{
    /*  color: #5847c4; */
    color: #2e7348;
    text-shadow: 0 0 1px #fbfbfd;
    
}

.chat_unread_list_new_messages_span {
    opacity: 1;
    width: 133px;
    padding-left: 4.5px;
        
    white-space: nowrap;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; 
}



/* CHAT DIALOGUE 6 */
.chat_convo_slide {
    background-size: cover!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
}

/* CHATTER LIST 7 */
.chatter_list_slide {
    padding-top: 70px;
}



/* TOP OF SLIDE 2 */

.chat_header_background_card {
    position: fixed;
    z-index: 3;
    top: 0!important;
    height: 70px;
    
    width: 76.6vw;
    border-right: 1px solid lightgray;
    
    margin-bottom: 15px;
    /* gradient message box */
    background: rgba(251, 251, 253, 1);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(251, 251, 253, 1)), color-stop(100%, rgba(236, 233, 245, 1)));
    background: -webkit-linear-gradient(top, rgba(251, 251, 253, 1) 0%, rgba(236, 233, 245, 1) 100%);
    background: linear-gradient(to bottom, rgba(251, 251, 253, 1) 0%, rgba(236, 233, 245, 1) 100%);
    
    /* message box shadow*/
    -webkit-box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
    box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
    opacity: 0.82;
}


@media screen and (min-width: 1024px) {
      
    .chat_header_background_card {
        width: 50%;
    }
}


.chat_header_background_blur_card {
    display: none;
    position: fixed;
    top: 0;
    height: 70px!important;
    width: 100%;
    z-index: 4;
    /*add blur from trees */
    /*background: white;*/
    opacity: .3;
}

.chat_panel_left {
    z-index: 6;
    position: absolute;
    top: 20px;
    width: 200px!important;
    left: calc(16% - 33px);
}
    /* used in appearing object */
    .trip_chat_panel_left {
        display: none;
        z-index: 6;
        position: absolute;
        top: 20px;
        width: 200px!important;
        left: calc(11.3vmin + -21.5px);
    }
    .trip_list_panel_left {
        display: none;
        z-index: 6;
        position: absolute;
        top: 20px;
        width: 200px!important;
        /* changed 2018-03-27 added 0.5 to left vmin to accodomate border calc*/
        /* left: calc(11.3vmin + -21.5px); */
        left: calc(11.8vmin + -21.5px);
    }

.chat_chatter_options {
    z-index: 8;
    position: absolute;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    box-shadow: 0px 3px 7px #00000042;
    background-color: #fbfbfd;    
    background-image: url(../images/chat_user_options.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 3px;
    border: 3px solid #fbfbfd;
}

.chat_chatter_options:hover {
    border: 4px solid #fbfbfd;
}

.chat_chatter_options:active {
    border: 5px solid #fbfbfd;
    /*background-image: url(../images/X.png);*/
    
}

.trip_chat_chatter_options {
    z-index: 8;
    position: absolute;
    height: 43px !important;
    width: 43px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    
    background-color: #fbfbfd;
    background-image: url(../images/beach10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
    border: calc(0.25vmin + 3px) solid #fbfbfd;
    border-radius: 50%!important;
    margin-left: 0px!important;
}

.trip_chat_chatter_options:hover {
    border-radius: 50%!important;
    border: calc(0.5vmin + 3px) solid #fbfbfd;
}

.trip_chat_chatter_options:active {
    border: calc(1vmin + 3px) solid #fbfbfd;
}

.trip_chat_list_options {
    z-index: 8;
    position: absolute;
    height: 43px !important;
    width: 43px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/beach10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
    border: calc(0.25vmin + 3px) solid #fbfbfd;
    border-radius: 50%!important;
    margin-left: 0px!important;
}

.trip_chat_list_options:hover {
    border: calc(0.5vmin + 3px) solid #fbfbfd;
}

.trip_chat_list_options:active {
    border: calc(1vmin + 3px) solid #fbfbfd;
}


/* add chat options drop down items */

.chat_chatter_pic {
    z-index: 7;
    position: absolute;
    top: 0;
    left: 21px;
    border: 4px solid #fbfbfd;
    margin-top: -3px;
    height: 77px;
    width: 77px;    
    border-radius: 50%;
    box-shadow: 0px 3px 7px #00000042;
    /*   default image for chatter */
    background-image: url(../images/user_profile_default.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.chat_chatter_pic_backdrop
{
    z-index: 6;
    left: 26px;    
    background: #fbfbfd;
    border: 1vmin solid #fbfbfd;
    margin: 0vmin 0px 0px -0.5vmin!important;
    position: absolute;
    top: 0;
    height: calc(1vmin + 70px) !important;
    width: calc(1vmin + 70px) !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
}

.chatter_imgs {
    border-radius: 50%!important;
}

.chat_chatter_name {
    z-index: 7;
    font-size: 17.8px!important;
    position: absolute;
    width: calc(61vmin - 88px)!important;
    max-width: 460px;    
    top: 0px;
    left: 100px;
    margin: 0px 0px 0px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trip_chat_chatter_name {
    z-index: 7;
    font-size: 17.8px!important;
    position: absolute;
    /*width: calc(75vmin + -88px)!important;*/
    width: calc(66vmin + -33px)!important;
    max-width: 460px;
    font-size: 17.8px!important;
    top: 0px;
    left: 55px;
    margin-left: 0px!important;
}


.chat_chatter_status_icon {
    z-index: 7;
    position: absolute;
    top: 25px;
    left: 105px!important;
    height: 16px !important;
    width: 16px !important;
  /*  background-color: transparent;*/
    /*background-color: mediumseagreen;*/
    border-radius: 50%;
    margin-top: -1px;
}

.chat_chatter_icon_img {
    z-index: 7;
    width: 21px!important;
    height 21px!important;
    border-radius: 50%;
}

.chat_chatter_status {
    z-index: 7;
    position: absolute;
    top: 24px;
    left: 124px;
    width: calc(72vmin - 36px)!important;
    max-width: 460px;
    margin: 0px 0px 0px 5px;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trip_chat_chatter_status {
    z-index: 7;
    position: absolute;
    top: 24px;
    left: 51px;
    /*width: calc(72vmin + -88px)!important;*/
    width: calc(66vmin + -36px)!important;
    max-width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat_panel_right {
    z-index: 6;
    position: fixed;
}


/* CHATTER OPTIONS POPOVER */

.chatter_options_accordion {
    margin: 0!important;
    padding: 0!important;
}


/* CONTAINER */

.chatter_options_popover {
    color: #5847c4!important;
    font-size: 16px!important;
    font-family: Avenir-Heavy!important;
    width: 79vmin;
    max-width: 313px;
    /*left: 2.5vmin!important;*/
    padding: 2.5vmin;
    /*
    -webkit-transition: height 0.7s ease-out;
    transition: height 0.7s ease-out;
    */
    -webkit-transition: height 1s ease;
    transition: height 1s ease;
    /*overflow: hidden!important;*/
    /* specific to search results */
    /*width: 75vmin;*/
}

.chatter_options_popover_inner {
    overflow: hidden!important;
    /*
        padding-top: 0.5vmax;
        padding-bottom: 0.2vmax;
        */
}
.chatter_options_divider {
    width: calc(100% - 2.5vmin - 10px);
    height: 1px;
    background: #e3e3e6;
    margin: 12px auto 12px;
}

/* added 2018-03-06 */
@media screen and (min-width: 750px) {
    .chatter_options_popover {
        max-width: 302px;}
}
@media screen and (min-height: 750px) {
    .chatter_options_popover {
        max-width: 302px;}
}


/* MENU INSIDE */

.chat_chatter_menu_title {
    font-size: 17px;
    width: 90%!important;
    color: #5847c4!important;
    line-height: 30px!important;
    height: 30px!important;
    padding: 6px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.chat_individual_offense_item_content {
    padding-left: 12px!important;
    padding-right: 4px;
}

.chat_individual_offense_label {
    font-family: Avenir-Medium;
    font-size: 14px;
    width: 79%!important;
    color: #5847c4!important;
    line-height: 30px!important;
    height: 30px!important;
    margin-top: 6px;
    margin-bottom: 3px;
    overflow: visible;
}
    .chat_individual_offense_span {
        font-family: Avenir-Heavy;
    }
.chat_individual_offense_knob {
    position: absolute;
    left: 0;
}
.chatter_options_button_text_offense {
    color: #5847c4!important;
    line-height: 30px!important;
    height: 30px!important;
    width: 100%!important;
    left: 70px!important;
}

.chatter_options_settings_outer_div {
    width: 100%;
    padding-right: 46px;
    /*margin: 15px 1px;*/
    margin-top: 1.65vmin !important;
    margin-bottom: 1.65vmin !important;
    margin-left: 1.65vmin !important;
}

.chatter_options_button_icon {
    width: 100% !important;
    height: 30px!important;
    left: 1.15vmin !important;
    margin-top: 1.65vmin !important;
    margin-bottom: 1.65vmin !important;
    /*width: 30px!important; */
}

.chatter_options_button_icon_img {
    z-index: 1;
    /* added 2018-03-27 */
    position: absolute;
    
    bottom: 0!important;
    left: 0!important;
    width: 30px!important;
    height: 30px!important;
}
.chatter_options_button_icon_img_send_friend {
    z-index: 1;
    /* added 2018-03-27 */
    position: absolute;
    
    bottom: 0!important;
    left: 0!important;
    width: 30px!important;
    height: 30px!important;
    background-color: #c9efc9;
    border-radius: 7px;
    outline: 3px solid #c9efc9;
    transform: scale(1.15);
}
.chatter_options_button_icon_img_info {
    z-index: 1;
    position: relative;
    width: 30px!important;
    height: 30px!important;
    margin: 0px 0px -10px 7px;
}

.chatter_options_button_text {
    color: #5847c4!important;
    line-height: 30px!important;
    height: 30px!important;
    width: 100%!important;
    left: 48px!important;
}

.chatter_options_settings_icon_img {
    z-index: 1;
    position: absolute;
    width: 30px!important;
    height: 30px!important;
    /*
        margin: 21px 0px -35px 86%;
        2.5vmin (edge + left icon margin left 1.15vmin*/
    right: 1.65vmin!important;
    border-radius: 50px;
}


/* DIALOGUE ROW */


/* ROW HEIGHT FILLER VALUE ADJUSTMENT */

.row_height_def>.col>.content-area {
    min-height: 15px;
}


/* entire chat row */

.chat_dialogue_row {
    /* WORKS ON BROWSERS IOS AND ANDROID */
    z-index: 2;
    margin-top: 70px;
    overflow-y: auto;
    height: calc(100% - 109.1px);
    padding-top: 30px;
    border-right: 1px solid lightgray;
    scrollbar-color: #bcbcbc8c #e7e7e700;    
}


/* row containing two columns - left col with chatter's text message, left with chatter's pic */

.chat_chatter_message_row {
    padding: 0px 2.5vmin 5px 2.5vmin;
    margin: 0px 0px 0px 0px;
    min-height: 15px!important;
}


/* col on left with text */

.chat_chatter_textbox_col_left {
    width: auto!important;
    max-width: 85.5%!important;
    /*max-width: 340px!important;*/
    min-height: 15px!important;
}


/* Shannon */

.chat_chatter_textbox_left {
    min-height: 15px;
    border-radius: 20.5px;
    text-align: left;
    line-height: 1.25em;
    font-size: 17.8px!important;
    padding: 0;
    margin: 0;
    /* gradient message box */
    background: rgba(251, 251, 253, 1);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(251, 251, 253, 1)), color-stop(100%, rgba(236, 233, 245, 1)));
    background: -webkit-linear-gradient(top, rgba(251, 251, 253, 1) 0%, rgba(236, 233, 245, 1) 100%);
    background: linear-gradient(to bottom, rgba(251, 251, 253, 1) 0%, rgba(236, 233, 245, 1) 100%);
    
    /* message box shadow*/
    -webkit-box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
    box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
}

.chat_box_pad {
    width: 100%!important;
    padding: 10.5px 13.3px 6.5px 13.3px !important;
    margin: 0!important;
}


/* col on right with pic */

.chat_chatter_pic_col_right {
    min-height: 15px;
    padding-left: 6px!important;
    width: 14.5%;
}

.chat_chatter_pic_right {
    height: 24px !important;
    width: 24px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/user1.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.chat_chatter_offensive_pic_right {
    height: 24px !important;
    width: 24px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/exclaim.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: -9px 0px 0px 12px!important;
}
.chat_chatter_offensive_confirmed {
    height: 24px !important;
    width: 24px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/offense_confirmed.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: -9px 0px 0px 12px!important;
}


/* timestamp left */

.chat_timestamp_left {
    color: black;
    font-size: 12px!important;
    margin: 3px 0px 0px 0px;
    padding: 1px 0px 0px 12px;
}

.chat_timestamp_p_reset {
    margin: 0px 0px 0px 0px!important;
    padding: 0px 0px 0px 0px!important;
}

.chat_offensive_text {
    margin: 0px 0px 0px 0px!important;
    padding: 0px 0px 0px 0px!important;
}

/* WEDENESDAY */

.chat_day_label_row {
    
    border-top: 0.4vmin solid #5a4ec7;
    background-color: transparent;
    /*background-color: #5847c4;*/
    clear: both;
    margin-top: 4px;
    margin-bottom: 21px;
}

.chat_day_label_col {
    min-height: 0px!important;
    height: 0px;
    padding: 0;
    margin: 0;
}

.chat_day_label_text {
    color: #5a4ec7;
    font-size: 16px!important;
    /*color: white;*/
    text-align: center;
    margin-top: 9px !important;
    margin-bottom: 7px!important;
}


/* row containing two columns - left col with pic (deleted), right col with text */

.chat_user_message_row {
    padding: 0px 2.5vmin 5px 2.5vmin;
    margin: 0px 0px 0px 0px;
    min-height: 15px!important;
}


/* col containing user pic */

.chat_user_void_col_left {
    width: 14.5%;
}


/* user pic not shown on sent messages */


/* might be used for invite icon */



.chat_user_pic_left {

    height: 24px !important;
    width: 24px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/exclaim.png);
    background-size: cover;
    background-repeat: no-repeat;
}
/* added exclaim icon absolute 2018-03-01 */
.chat_user_exclaim {
    position: absolute;
    margin-left: -34px!important; 
    height: 24px !important;
    width: 24px !important;
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/exclaim-red.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
}
        


/* col containing text message */

.chat_user_textbox_col_right {
    width: auto!important;
    max-width: 85.5%!important;
    /*max-width: 340px!important;*/
    float: right!important;
}


/* message from user */


/* Yes in example */

.chat_user_textbox_right {
    min-height: 15px;
    border-radius: 20.5px;
    text-align: left;
    line-height: 1.25em;
    font-size: 17.8px!important;
    padding: 0;
    margin: 0;
    color: #fbfbfd;
    /* gradient message box outgoing */
    background: rgba(81, 22, 199, 1);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(81, 22, 199, 1)), color-stop(100%, rgba(70, 20, 169, 1)));
    background: -webkit-linear-gradient(top, rgba(81, 22, 199, 1) 0%, rgba(70, 20, 169, 1) 100%);
    background: linear-gradient(to bottom, rgba(81, 22, 199, 1) 0%, rgba(70, 20, 169, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5116c7', endColorstr='#4614a9', GradientType=0);
    /* message box shadow*/
    -webkit-box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
    box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
}


/* timestamp right */

.chat_timestamp_right {
    right: 0;
    color: black;
    font-size: 12px !important;
    margin: 3px 1.74vmin 0px 0px;
    padding: 1px 0px 0px 0px;
    text-align: right;
}

/* BOTTOM OF SLIDE 1 */


/* TYPE ROW */

.chat_typearea_row {
    bottom: 0px!important;
    z-index: 5;
    position: absolute;
    /*height: 39px!important;*/
    left: 0!important;
    width: 100%!important;
}

.chat_typearea_listblock {
    margin: 0px 0px 0px 0px!important;
    padding: 0px 0px 0px 0px!important;
}

.chat_item_input {
    width: 100%!important;
    margin: 0px 0px 0px 0px!important;
    padding: 5px 55px 5px 3px!important;
}

.chat_textarea {
    z-index: 111!important;
    font-family: Avenir-Medium;
    font-size: 17.8px!important;
    line-height: 1.24!important;
    padding: 2px 3px 0px 5px!important;
    resize: none;
    width: 100%!important;
    margin-right: 70px!important;
    max-height: 210px!important;
    background-color: white!important;
    border: 2px solid #5847c4!important;
    border-radius: 16px!important;
}

.chat_typearea_row_back {
    bottom: 0px!important;
    z-index: 3;
    position: absolute;
    left: 0!important;
    width: 100%!important;
    height: 39px!important;
    /* gradient message box */
    background: rgba(251, 251, 253, 1);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(251, 251, 253, 1)), color-stop(100%, rgba(236, 233, 245, 1)));
    background: -webkit-linear-gradient(top, rgba(251, 251, 253, 1) 0%, rgba(236, 233, 245, 1) 100%);
    background: linear-gradient(to bottom, rgba(251, 251, 253, 1) 0%, rgba(236, 233, 245, 1) 100%);
    
    /* message box shadow*/
    -webkit-box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
    box-shadow: 3px 3px 7px -4px rgba(0, 0, 0, 0.7);
    opacity: 0.62;
}

.chat_typearea_row_blur {
    /* ios bump */
    /*bottom: 20px!important; */
    bottom: 0px!important;
    z-index: 4;
    position: fixed;
    left: 0!important;
    width: 100%!important;
    height: 43px!important;
}

.chat_send_row {
    /* ios bump */
    bottom: 2px!important;
    z-index: 9;
    position: absolute;
    left: 100%!important;
    height: 48px!important;
    width: 0px!important;
    margin-left: -52px!important;
}

.chat_send {
    z-index: 111;
    width: 48px!important;
    height: 48px!important;
    border-radius: 50%!important;
    background-image: url(../images/chat_send.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #fbfbfd;
}

.chat_send:hover {
    border: 2px solid white;
}

.chat_send:active {
    border: 3px solid white;
}


/* CHAT AND SEARCH RESULTS ------ SLIDE 2 */


/* CHAT SLIDE 3 */

.chat_sort_button {
    z-index: 97;
    position: fixed;
    bottom: 70px;
    /* right: calc(11.3vmin - 30.5px); */
    right: calc(-150vw - 28px) !important;
    border-radius: 50px;
    width: 61px;
    height: 61px;
        
    flex: 0 0 auto !important;
    background-color: #fbfbfd;
    background-image: url(../images/sort.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 0px!important;
    border: 0.5vmin solid #fbfbfd;
}

.chat_user_container_buffer_slide3 {
    z-index: 25;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    /*background: pink;*/
    width: 100%!important;
}

.gamer_user_container_slide3 {
    padding-left: 0px!important;
    background: #fbfbfd!important;
    width: 100%!important;
    height: 70px;
    /*box-shadow: 0px 7px 15px #fff6ea;*/
    /*box-shadow: 0px 7px 15px #f2e4d5;*/
    border-bottom: 2px solid #f2e4d5;
}
.chat_user_container_slide3 {
    padding-left: 0px!important;
    background: #fbfbfd!important;
    width: 100%!important;
    height: 70px;
    /*box-shadow: 0px 7px 10px #cff0d9;*/
    border-bottom: 2px solid #bde5c9;
}
/* 2022-09-18 */
.game_user_panel_left {
    opacity: 0;
    font-family: Avenir-Light;
    overflow: hidden;
    z-index: 6;
    position: absolute;
    top: 20px;
    width: 73%;
    height: 90px;
    left: calc( (23.4% / 2 ) - 38.5px );
    
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out; 
}
/* 2019-10-12 */
.chat_user_panel_left {
    opacity: 0;
    font-family: Avenir-Light;
    /*overflow: hidden;*/
    z-index: 6;
    position: absolute;
    top: 20px;
    width: 73%;
    height: 90px;
    left: calc( (23.4% / 2 ) - 38.5px );
    
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out; 
}

.chat_user_status_line_icon {
    height: calc(100% - 2px);
    position: absolute;
    top: 0px;
    /*left: 1px!important;*/
    width: 4px;
    /*height: 70px!important;*/
    /* background-color: transparent;  izbacio boban !!!!*/
    /*background-color: #5cb85c;*/
}

.chat_user_pic {
   
    /* 2019-09-12 display none removed */    
    /* 2019-09-10 */
    border: 4px solid #fbfbfd;
    margin-top: -3px;
    height: 77px;
    width: 77px;
        
    z-index: 7;
    position: absolute;
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.26) 0px 3px 7px;

    border-radius: 50%;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    background-image: url(../images/user_profile_default.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.chat_user_pic_backdrop {
    z-index: 6;
    background: #fbfbfd;
    border: 1vmin solid #fbfbfd;
    margin: -0.5vmin 0px 0px -0.5vmin!important;
    position: absolute;
    top: 0;
    height: calc(1vmin + 70px);
    width: calc(1vmin + 70px);
    border-radius: 50%!important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
}

/* removed 2018-09-26 */
.chat_list_update_icon {

}
.chat_user_name,
.gamer_user_name {
    z-index: 7;
    width: 45vmin;
    font-size: 17.8px;
    margin: 0px 0px 0px 88px;
}
.gamer_user_name {}

.chat_user_name_p {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0!important;
}

.temp_status {
    background-color: #5cb85c!important;
}

.chat_user_status_icon {

    z-index: 7;
    margin: 0px 0px 0px 88px;
    height: 16px !important;
    width: 16px !important;
    /*background-color: transparent;   izbacio boban !!!!*/
    /*background-color: #5cb85c;*/
    border-radius: 50%;
}

.chat_user_status,
.gamer_user_status { 
    z-index: 7;
    width: calc(100% - 90px) !important;
    font-size: 15px!important;
    /*font-size: 17.8px!important;*/
    margin: 0px 0px 0px 88px;
}
.gamer_user_status {
    width: 45vmin!important;
}

@media screen and (max-width: 361px) {
    .chat_user_panel_left {
        top: 20px;
        width: 94vw;
        left: 1.8vmin;
    }
    
    .trip_chat_chatter_name {
        width: calc(66vmin + -33px)!important;
    }
    .trip_chat_chatter_status {
        width: calc(66vmin + -33px)!important;
    }
    
    .chat_user_pic {
        height: 19vmin!important;
        width: 19vmin!important;
    }
    .chat_user_pic_backdrop {
        height: 20vmin!important;
        width: 20vmin!important;
    }
    .chat_user_name,
    .gamer_user_name {        
        margin-left: calc(22.6vmin + 9px);        
    }
    .chat_user_status_icon {
        left: 0px;
        margin-left: calc(22.6vmin + 9px);        
    }
    .gamer_user_status {
        width 48%!important;
        margin-left: calc(22.6vmin + 10px);        
    }
    .chat_user_status {
        left: 0px;
        margin-left: calc(22.6vmin + 9px);        
    }
}


.chat_unread_message_icon {
    margin: 1px 0px 0px 0.36vmin;
    width: 16px;
    height: 16px;
    -webkit-transition: all 0.7s ease-out;


    transition: all 0.7s ease-out;    
}

.chat_unread_list {
    font-size: 16px;
    position: absolute;
    left: 16.3vmin;
    top: 6px;
    margin: 0!important;
    max-width: 66vmin;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: all 0.7s ease-out;


    transition: all 0.7s ease-out;    
}

@media screen and (min-width: 700px) {
    .chat_unread_list {
        left: 79px!important;
        max-width: 73vmin;
    }
}

.chat_list_row {
    overflow-x: auto;
    height: 100%;
}

.chat_listblock {
    margin-top: 0px!important;
    margin-bottom: 3px!important;
}


.chatter_pic {
    margin: calc(( calc(1.8vw - 1.5px) *0.618) ) calc(1.8vw - 1.5px);
    width: calc((37vw * 0.234) - 3.6vw );
    height: calc((37vw * 0.234) - 3.6vw );
    border-radius: 50%;
}

.pad_override_left {
    padding-left: 0px!important;
}

.chatter_status_line_icon {
    position: absolute;
    top: 0px;
    /*left: 1px!important;*/
    width: 4px;
    height: 100%!important;
    /*  background-color: transparent;*/
    /*background-color: mediumseagreen;*/
}
.chatter_slide3_status {
        color: black!important;
    }
.chatter_trip_subtitle{
    color: #fbfbfd;
}
    
    .trip_label_chat_img {
        width: 11.5px;
        height: 11.5px;
        margin: 0px 1px -1px 2px;
    }
    .chatter_trip_label {
        /*temp 
        white-space: pre-line;
        */
        background: #5847c4;
        color: #fbfbfd;
        border-radius: 30px;
        padding: 3px 9px 2px 5px;
    }

.chatter_message_icon {
    position: absolute;
    border-radius: 50%!important;
    bottom: 1.24vmin!important;
    left: 16vmin!important;
    width: 3.84vmin!important;
    height: 3.84vmin!important;
    min-width: 15px!important;
    min-height: 15px!important;
    max-width: 28px!important;
    max-height: 28px!important;
    background-color: #5847c4;
    margin-bottom: 12px;
    border: 0.73vmin solid white;
}

.chatter_slide3_fav_user_button {
    z-index: 5;
    position: absolute;
    border-radius: 50%!important;
    top: 10px!important;
    right: 130px!important;
    width: 38px!important;
    height: 38px!important;
    background-image: url(../images/chat_user_fav.png);
    background-position: center center;
    background-size: contain;
}

.chatter_slide3_fav_user_button:hover {
    border: 3px solid white;
}

.chatter_slide3_friend_user_button {
    z-index: 5;
    position: absolute;
    border-radius: 50%!important;
    top: 10px!important;
    right: 90px!important;
    width: 38px!important;
    height: 38px!important;
    background-image: url(../images/chat_user_friend.png);
    background-position: center center;
    background-size: contain;
}

.chatter_slide3_friend_user_button:hover {
    border: 3px solid white;
}

.chatter_slide3_options_user_button {
    z-index: 5;
    position: absolute;
    border-radius: 50%!important;
    top: 10px!important;
    right: 50px!important;
    width: 38px!important;
    height: 38px!important;
    background-image: url(../images/chat_user_options.png);
    background-position: center center;
    background-size: contain;
}

.chatter_slide3_options_user_button:hover {
    border: 3px solid white;
}

.chatter_slide3_delete_user_button
{
    z-index: 5;
    position: absolute!important;
    border-radius: 50%;
    top: 10px!important;
    right: 10px!important;
    width: 38px!important;
    height: 38px!important;
    background-image: url(../images/chat_delete_convo.png);
    background-position: center center;
    background-size: contain;
}

.chatter_slide3_delete_user_button:hover {
    border: 3px solid white;
}

@media screen and (max-width: 1023px) {
      
    .chatter_pic {
        margin-left: calc(1.5vw + 1.5px);
        margin-right: 0px;
        width: calc(23.4vw - 3vw - 3px );
        height: calc(23.4vw - 3vw - 3px );
    }
}



/* SLIDE 3 */


/* CHAT AUDIO VIDEO CALL - container for all audio_video elements */


/* DISPLAYED WHEN CLICKING USER OPTOINS (temp button) */

.audio_video {
    display: none;
}


/* CHAT AUDIO VIDEO inside elements (in order of z-index) */

.audio_video_caller_background_fixed {
    z-index: 98;
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("../images/sailor2.jpg");
    background-size: cover;
    background-position: center center;
}

.audio_video_caller_background_dim_fixed {
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.61);
}


/* CALLER VOICE fullscreen */

.audio_video_caller_voice {
    display: none;
    z-index: 100;
    position: fixed;
    width: 100%!important;
    height: 100%!important;
    background-color: rgba(11, 173, 54, 0.73);
    background-image: url("../images/audio_video_speaker_on.png");
    background-size: cover;
    background-position: center center;
}

.audio_video_speaker_container_fixed {
    z-index: 101;
    position: fixed;
    width: 100%;
}


/* CALLER VIDEO STREAM fullscreen */

.audio_video_caller_stream {
    display: none;
    z-index: 102;
    position: fixed;
    width: 100%!important;
    height: 100%!important;
    background-color: #fbfbfd;
    background-image: url("../images/audio_video_start_camera.png");
    background-size: cover;
    background-position: center center;
}


/* CAMERA VIEW, FLIP CAMERA BUTTON top left */

.audio_video_stream_container_fixed {
    display: none;
    z-index: 103;
    position: fixed;
    width: 100%;
    /*
    height: 100%;
    background-color: #fbfbfd;
    background-image: url("../images/audio_video_start_camera.png");
    background-size: cover;
    background-position: center center;
    */
}

.audio_video_buttons_container_fixed {
    z-index: 104;
    position: fixed;
    width: 100%!important;
}


/* vid aud */

.audio_video_incoming_call,
.audio_video_name_container_fixed,
audio_video_stop_call {
    z-index: 105;
    position: fixed;
    width: 100%!important;
}

.audio_video_incoming_call {
    width: 160px;
    height: 160px;
    background-image: url("../images/audio_video_start_call.png");
    background-size: cover;
    background-position: center center;
}

.audio_video_name_row_outer {
    top: 48px!important;
    width: 100%;
    height: 0px!important;
    min-height: 0px!important;
}

.audio_video_speaker_row_outer {
    bottom: 210px!important;
    position: fixed;
    width: 100%;
    height: 0px!important;
    min-height: 0px!important;
}

.audio_video_buttons_row_outer {
    bottom: 100px!important;
    position: fixed;
    width: 100%;
    height: 0px!important;
    min-height: 0px!important;
}

.audio_video_name_col_outer,
.audio_video_speaker_col_outer,
.audio_video_buttons_col_outer {
    width: 100%!important;
}

.audio_video_name_widget_outer,
.audio_video_speaker_widget_outer,
.audio_video_buttons_widget_outer {}


/* AUDIO VIDEO (on chat) */

.audio_video_button_row {
    height: 0px!important;
    min-height: 0px!important;
    margin: auto!important;
    width: 100%!important;
}


/* COL name  */

.audio_video_name_col {
    width: 61.8%!important;
    height: 20.6%!important;
}


/* COL buttons 1,5  */

.audio_video_col1,
.audio_video_col5 {
    width: 19.1%!important;
    height: 20.6%!important;
}


/* COL buttons 2,3,4  */

.audio_video_col2,
.audio_video_col3,
.audio_video_col4 {
    width: 20.6%!important;
    height: 20.6%!important;
}


/* COL 1 LEFT */

.audio_video_col1,
.audio_video_col2 {
    float: left!important;
}

.urow.cright>audio_video_col1,
audio_video_col2 {
    padding-left: 0px !important;
}

.urow:not(.cright)>audio_video_col1,
audio_video_col2 {
    clear: left;
    padding-left: 0px !important;
}


/* COL 2 MIDDLE */

.audio_video_col3 {
    width: auto;
    margin: auto!important;
}


/* COL 3 RIGHT */

.audio_video_col4,
.audio_video_col5 {
    /*float: right!important;*/
}

.urow:not(.cright)>audio_video_col4,
audio_video_col5 {
    clear: right;
    padding-right: 0px !important;
}

.urow.cright>audio_video_col4,
audio_video_col5 {
    padding-right: 0px !important;
}

.audio_video_name_col {
    width: auto;
    margin: auto!important;
}

.audio_video_col_widget1,
.audio_video_col_widget2,
.audio_video_col_widget3,
.audio_video_col_widget4,
.audio_video_col_widget5 {
    /* 
        left and right old:
        margin: auto!important;
        height: 16.72vmin!important;

        middle col old:
        top: 0;
        max-width: 116px;
        width: 21.56vmin;
        */
}


/* VIDEO LAYER */

.audio_video_camera_view {
    position: absolute;
    /*width: 100px;
        height: 177px;*/
    width: 82px;
    height: 145px;
    top: 66px;
    left: 0px;
    border: 1px solid #fbfbfd;
    border-radius: 5px;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url("../images/audio_video_start_camera.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


/* CALLER NAME and DURATION */

.audio_video_caller_name {
    font-size: 30px;
    font-family: Avenir-Light!important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.62);
    color: #fbfbfd;
    text-align: center;
    margin: 30px 0px 0px 0px!important;
}

.audio_video_caller_p {
    margin: 0!important;
}

.audio_video_caller_duration,
.audio_video_caller_muted {
    font-size: 18px;
    font-family: Avenir-Heavy;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.62);
    color: #fbfbfd;
/*    text-shadow: ; */
    text-align: center;
    margin: 0!important;
}

.audio_video_caller_muted {
    font-size: 16px;
    font-family: Avenir-Heavy;
    line-height: 19px;
    margin-top: 9px!important;
}


/* FLIP CAMERA and HIDDEN RIGHT BUTTON */

.audio_video_button_farleft_cont,
.audio_video_button_farleft,
.audio_video_button_farleft_img,
.audio_video_button_farleft:hover,
.audio_video_button_farleft:active,
.audio_video_button_farright_cont,
.audio_video_button_farright,
.audio_video_button_farright_img,
.audio_video_button_farright:hover,
.audio_video_button_farright:active {
    width: 10.33vmin!important;
    height: 10.33vmin!important;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%!important;
}

.audio_video_button_farleft_cont {
    left: 0;
    margin: 0!important;
    padding: 0!important;
}

.audio_video_button_farleft {
    z-index: 2;
    position: absolute;
}

.audio_video_button_farleft_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_flip_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_farleft:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_flip_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_farleft:active {
    /*LIGHTEN*/
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_flip_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_farright_cont {
    right: 0;
    margin: 0!important;
    padding: 0!important;
}

.audio_video_button_farright {
    z-index: 2;
    position: absolute;
}

.audio_video_button_farright_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/ho.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_farright:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/ho.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_farright:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/ao.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}


/* BUTTONS 2,3,4 */


/* LEFT START CAEMRA */

.audio_video_button_left_cont,
.audio_video_button_left,
.audio_video_button_left_img,
.audio_video_button_left:hover,
.audio_video_button_left:active,

/* LEFT STOP CAMERA */

.audio_video_button_left_switch,
.audio_video_button_left_switch_img,
.audio_video_button_left_switch:hover,
.audio_video_button_left_switch:active,

/* CENTER START/INCOMING CALL */


/*
    .audio_video_button_center_cont,
    .audio_video_button_center,
    .audio_video_button_center_img,
    .audio_video_button_center:hover,
    .audio_video_button_center:active,
    */


/* MIDDLE STOP CALL */

.audio_video_button_middle_cont,
.audio_video_button_middle,
.audio_video_button_middle_img,
.audio_video_button_middle:hover,
.audio_video_button_middle:active,

/* MIDDLE SPEAKER ON */

.audio_video_button_middle_top,
.audio_video_button_middle_top_img,
.audio_video_button_middle_top:hover,
.audio_video_button_middle_top:active,

/* MIDDLE SPEAKER OFF */

.audio_video_button_middle_switch_top,
.audio_video_button_middle_switch_top_img,
.audio_video_button_middle_switch_top:hover,
.audio_video_button_middle_swtich_top:active,

/* RIGHT MUTE BUTTONS */

.audio_video_button_right_cont,
.audio_video_button_right,
.audio_video_button_right_img,
.audio_video_button_right:hover,
.audio_video_button_right:active,

/* RIGHT UNMUTE BUTTONS */

.audio_video_button_right_switch,
.audio_video_button_right_switch_img,
.audio_video_button_right_switch:hover,
.audio_video_button_right_switch:active {
    width: 16.72vmin!important;
    height: 16.72vmin!important;
    max-width: 82px;
    max-height: 82px;
    border-radius: 50%!important;
}

.audio_video_button_left_cont {
    left: 0;
    margin: 0!important;
    padding: 0!important;
}


/* SPECIAL LANDSCAPE BUTTON ROTATION (stop call and speaker container/buttons)  */

@media screen and (max-height: 480px) and (orientation: landscape) {
    .audio_video_landscape_start_camera {
        position: fixed;
        bottom: 25px!important;
        left: 48px!important;
    }
    .audio_video_landscape_speaker {
        position: fixed;
        bottom: 25px!important;
        margin-left: -154px !important;
    }
    .audio_video_landscape_mute {
        position: fixed;
        top: 25px;
        right: 48px !important;
    }
    .audio_video_landscape_start_call {
        position: fixed;
        top: calc(50% - 66.5px);
        /*right: 48px !important;
            margin-left: 187px !important;*/
    }
    .audio_video_landscape_stop_call {
        position: fixed;
        top: calc(50% - 8.36vmin);
        right: 48px !important;
        /*margin-left: 187px !important;*/
    }
    .audio_video_landscape_ad_frame {
        bottom: 25px!important;
    }
}


/* SPECIAL RIGHT MARGIN  */

.audio_video_col_widget4 {
    margin-left: calc(100% - 16.72vmin)!important;
}

@media screen and (min-width: 500px) and (min-height: 500px) {
    .audio_video_col_widget4 {
        margin-left: calc(100% - 82px)!important;
    }
}


/* START CAMERA - before SWITCHING CLASS */

.audio_video_button_left {
    z-index: 2;
    position: absolute;
}

.audio_video_button_left_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_start_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-position: center center;
    background-size: contain;
}

.audio_video_button_left:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_start_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_left:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_start_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}


/* STOP CAMERA - after SWITCHING CLASS */

.audio_video_button_left_switch {
    z-index: 2;
    position: absolute;
}

.audio_video_button_left_switch_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_stop_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-position: center center;
    background-size: contain;
}

.audio_video_button_left_switch:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_stop_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_left_switch:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_stop_camera.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}


/* INCOMING CALL DIV */

.audio_video_start_call_div {
    z-index: 106;
    width: 100%;
    height: auto;
    top: 160px;
    position: absolute;
}


/* INCOMING/START CALL CONTAINER OUTER special */

.audio_video_button_center_cont_outer {
    margin-left: calc(50% - 66.5px);
}


/* INCOMING/START CALL CONTAINER */

.audio_video_button_center_cont {
    padding: 0!important;
    width: 133px!important;
    height: 133px!important;
    border-radius: 50%!important;
}


/* START CALL green button */

.audio_video_button_center {
    z-index: 2;
    position: absolute;
    width: 133px!important;
    height: 133px!important;
    border-radius: 50%!important;
}

.audio_video_button_center_img {
    z-index: 1;
    width: 133px!important;
    height: 133px!important;
    border-radius: 50%!important;
    background-image: url(../images/audio_video_start_call.png);
    background-size: cover;
    background-repeat: no-repeat;
    border: 1vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-position: center center;
}

.audio_video_button_center:hover {
    width: 133px!important;
    height: 133px!important;
    border-radius: 50%!important;
    background-color: rgba(251, 251, 251, 0.61);
}

.audio_video_button_center:active {
    width: 133px!important;
    height: 133px!important;
    border-radius: 50%!important;
    background-color: rgba(251, 251, 251, 0.75);
}


/* STOP CALL CONTAINER */

.audio_video_button_middle_cont {
    margin: auto;
    padding: 0!important;
}


/* STOP CALL */

.audio_video_button_middle {
    z-index: 2;
    position: absolute;
}

.audio_video_button_middle_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_stop_call.png);
    background-repeat: no-repeat;
    border: 3px solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_middle:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_stop_call.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_middle:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_stop_call.png);
    background-repeat: no-repeat;
    /*border: 0.7vmin solid #fbfbfd;*/
    /* TEMP BACKGROUND */
    border: 1vmin solid #fbfbfd;
    background-size: contain;
    background-position: center center;
}


/* SPEAKER CONTAINER */

.audio_video_button_middle_top_cont {
    margin: auto!important;
    padding: 0!important;
}


/* SPEAKER ON */

.audio_video_button_middle_top {
    z-index: 2;
    position: absolute;
}

.audio_video_button_middle_top_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_speaker_on.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_middle_top:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_speaker_on.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_middle_top:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_speaker_on.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}


/* SPEAKER OFF */

.audio_video_button_middle_switch_top {
    z-index: 2;
    position: absolute;
}

.audio_video_button_middle_switch_top_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_speaker_off.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_middle_switch_top:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_speaker_off.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_middle_switch_top:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_speaker_off.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}


/* MUTE CONTAINER RIGHT */

.audio_video_button_right_cont {
    right: 0;
    margin: 0;
    padding: 0!important;
}


/* MUTE BUTTON RIGHT */

.audio_video_button_right {
    z-index: 2;
    position: absolute;
}

.audio_video_button_right_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_mute_on.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_right:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_mute_on.png);
    background-size: cover;
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_right:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_mute_on.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}


/* UNMUTE BUTTON RIGHT */

.audio_video_button_right_switch {
    z-index: 2;
    position: absolute;
}

.audio_video_button_right_switch_img {
    z-index: 1;
    background-color: rgba(251, 251, 251, 0.61);
    background-image: url(../images/audio_video_mute_off.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_right_switch:hover {
    background-color: rgba(251, 251, 251, 0.7);
    background-image: url(../images/audio_video_mute_off.png);
    background-size: cover;
    background-repeat: no-repeat;
    border: 0.7vmin solid transparent;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_button_right_switch:active {
    background-color: rgba(251, 251, 251, 1);
    background-image: url(../images/audio_video_mute_off.png);
    background-repeat: no-repeat;
    border: 0.7vmin solid #fbfbfd;
    /* TEMP BACKGROUND */
    background-size: contain;
    background-position: center center;
}

.audio_video_ad_background {
    display: none;
    z-index: 100;
    position: fixed;
    width: 100%!important;
    height: 100%!important;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url("../images/audio_video_speaker_on.jpg");
    background-size: cover;
    background-position: center center;
}

.audio_video_ad_frame {
    display: none;
    z-index: 101;
    position: fixed;
    bottom: 100px;
    background-image: url(../images/ad_sample.png);
    background-repeat: repeat;
    height: auto;
    max-height: 210px;
    width: 100%;
    margin-top: 16px;
    /* CENTERING */
    /* display webkit box - center elements vertically/horizontally */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* box pack centering */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* box pack align centering */
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.audio_video_ad {
    display: none;
    width: auto;
    height: auto;
    max-width: 430px;
    max-height: 160px;
    margin: auto;
}

.typing_gif {
    height: 3em;
    margin-left: calc(2.5vmin - 2px);
}