@extends('layout.basic.main')
@section('title','1:1チャット')
@push('css')
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    {{--    <link rel="stylesheet" href="/chat_files/font-awesome.min.css">--}}
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css?v={{config("sns-line.version")}}" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/chat_files/emojione.min.css">
    <link rel="stylesheet" href="/chat_files/emojionearea.min.css">
    <script src="/chat_files/nanoscroller.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="/chat_files/lodash.min.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script>
        var laravel_authorization_data = {
            "media-write": true,
            "tag-write": true,
        };

        function authorize(expression, target) {
            return _.get(laravel_authorization_data, expression, false);
        }

        Vue.prototype.authorize = authorize;

    </script>

    <style type="text/css">
    </style>
    <style type="text/css">
        i{
            font-family: "Font Awesome 5 Pro" !important;
        }
        i:before {
            font-family: "Font Awesome 5 Pro" !important;
        }
        .fade1.in{
            transform: initial !important;
            -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
            -moz-animation:fadeIn ease-in 1;
            animation:fadeIn ease-in 0.3s !important;

            -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
            -moz-animation-fill-mode:forwards;
            animation-fill-mode:forwards;

            -webkit-animation-duration:1s;
            -moz-animation-duration:1s;
            animation-duration:0.5s !important;
        }

        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            -o-transition: -unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        .group-ic-sort{
            width: 20px;
            height: 32px;
            margin-top: 2px;
        }
        .group-ic-sort i{
            line-height: 6px;
            color: rgba(125,145,149,1);
        }
        .md-tilte-left{
            color: #FFFFFF;
            padding: 8px;
            margin-left: 12px;
            background-color: rgba(125,145,149,1);
            width: 100%;
            border-radius: 4px;
            text-align: center;
        }
        .d-flex-center{
            display: flex;
            align-items: center;
        }
        .mt-20{
            margin-top: 20px;
        }
        .mt-3{
            margin-top: 15px;
        }
        .content-email{
            display: flex;
            align-items: center;
            width: 18vw;
            height: 3vw;
            user-select: none;
            -webkit-user-select: none;
            font-size: 1.6vw;
        }
        .ic-file-i{
            font-size: 19px;
            color: white;
            padding: 11px 13px;
            border-radius: 50%;
            background: #7d9094;
            margin-right: 8px;
        }
        .box-file-a{
            background: #aaaaaa5e;
            border-radius: 5px;
            padding: 7px;
            margin: 5px;
            display: flex;
            align-items: flex-start;
        }
        .div-icon-file{
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #7d9094;
            text-align: center;
            float: left;
            margin-right: 10px  ;
        }
        .div-ic-download-file{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #b0c1c57a;
            text-align: center;
            margin: 0 auto;
            margin-left: 20px;
        }
        #templateModal_chat .bg_preview_wap {
            width: 100%;
            margin: auto;
            background: #fff;
            word-break: break-word;
        }
        #templateModal_chat .message {
            text-align: center;
            background: #F2F2F2;
            padding: 25px;
            margin: 20px;
        }
        #templateModal_chat .model_close_preview {
            width: 200px;
        }
        #templateModal_chat .text_preview {
            padding: 16px !important;
        }

        .tooltip_error{
            opacity: 0;
            position: absolute;
            width: 450px;
            background-color: white;
            box-shadow: 0 0 5px #ccc;
            padding: 10px;
            top: -85px;
            visibility: hidden;
        }
    </style>
    <style type="text/css">
        .vue-fine-uploader-file-input {
            display: inline-block
        }

        .vue-fine-uploader-file-input label {
            cursor: pointer
        }

        .vue-fine-uploader-file-input input[type=file] {
            width: 1px;
            height: 1px;
            opacity: 0
        }

        [v-cloak] {
            display: none;
        }

        label:after {
            display: block;
            position: absolute;
            content: "";
            right: 10px;
            top: 0;
            font-family: FontAwesome;
        }

        #tagEditModaltagSelector input[type='checkbox'] {
            top: 5px;
        }

        input[name='single_template_id'] {
            top: 5px;
        }

        .taggroupdiv b {
            font-weight: bold;
        }

        i.glyphicon-folder-open {
            color: #f0ad4e !important;
        }
        i.fa-folder-open {
            color: #f0ad4e !important;
        }
        #mediaClientEl .modal-content {
            width: 60%;
            margin: auto;
            top: 30px;
        }

        .thumbnail.active {
            border: 4px solid #204d74 !important;
        }

        .selected_foot {
            float: right;
            width: 110px;
        }

        span.btn, span.btn a {
            margin: 0;
        }

        .timepicker-orient-top td {
            text-align: center !important;
        }

        .timepicker-orient-top td a {
            text-align: center !important;
        }

        .timepicker-orient-top input {
            width: 50px !important;
        }

        .nano > .nano-pane > .nano-slider {
            margin-left: 30px;
            float: left;
            height: 300px;
            width: 65px;
            background: #F5F5F5;
            overflow-y: scroll;
            margin-bottom: 25px;
        }

        .nano-content {
            overflow-y: scroll !important;
        }

        #detail .nano-wrapper {
            overflow-y: scroll;
        }

        .nano > .nano-pane > .nano-pane::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        .nano > .nano-pane > .nano-pane::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
        }

        .nano > .nano-pane > .nano-pane::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #555;
        }

        .nano-inner::-webkit-scrollbar-thumb:hover {
            background: red;
        }

        .nano-inner {
            /*height: 95vh !important;*/
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding-bottom: 11px;
        }
        .select-stamp{
            height: 300px !important;
        }

        .nano-wrapper {
            overflow: hidden !important;
        }

        .nano-content {
            overflow: hidden !important;
            right: 2px !important;
        }

        .nano-inner:hover .nano-content {
            overflow: hidden !important;
            right: -5px !important;
        }

        .nano-pane {
            display: none !important;
        }

        .user-message.me {
            margin-right: -10px !important;
            right: -5px;
        }

        .tag-container {
            word-break: break-word;
        }

        .loadBtn {
            bottom: 0px;
            position: absolute;
            display: none !important;
        }

        #tab-store li:hover {
            cursor: pointer;
        }

        .doll-box {
            word-break: break-all;
        }

        #message-modal-body {
            width: 560px;
        }

        #messageModal .user-message {
            width: 270px;
        }

        #messageModal .user-message.detail_button {
            margin: auto !important;

        }

        #messageModal .user-message.detail_carousel {
            margin-right: 20px !important;
            float: left;
        }

        .shorten_url {
            position: absolute;
            bottom: 49px;
            width: 100%;
            height: 21px;
            background: #f9f9f9;
            padding-left: 8px;
            font-size: 14px;
        }

        .main{
            padding-bottom: 0;
        }

        @media (max-width: 1280px) {
            .shorten_url {
                height: auto;
                font-size: 13px;
            }

            .pc-body #visual #detail .nano-wrapper .nano {
                height: 95% !important;
            }
        }
        .avt-default{
            width: 30px;
            height: 29px;
            border-radius: 50%;
            float: left;
            margin-top: 9px;
            margin-left: 3px;
            margin-right: 2px;
            border: 1px solid rgba(176,194,198,1);
        }

        #setProfileModal .nick-name{
            width: 77% !important;
            height: 39px !important;
            border-radius: 6px;
            margin-left: 14px;
            margin-right: 14px;

        }
        #setProfileModal .modal-body-set-profile{
            padding: 3px 60px;
        }
        #setProfileModal .txt-note{
            margin-top: 10px;
            padding: 14px;
            background: #F8F8F8;
            border-radius: 5px;
            margin-bottom: 21px;
            font-size: 14px;
        }
        #setProfileModal table {
            border-collapse: collapse;
            width: 100%;
        }

        #setProfileModal th, td {
            text-align: left;
            padding: 5px 8px;;;
        }

        #setProfileModal tr:nth-child(even) td{
            /*background-color: rgba(214,214,214,1) !important;*/
        }
        #setProfileModal tr:nth-child(old) td{
            border-radius: 0 !important;
        }
        #setProfileModal label input[type=radio]{
            position: relative;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-size: inherit;
            width: 1em;
            margin: 0;
            color: inherit;
            outline: none;
            font-family: "Font Awesome 5 Pro";
            transition: 300ms ease-out;
        }
        #setProfileModal label input[type=radio]::after{
            content: "";
            display: inline-block;
            text-align: center;
            width: 1em;
        }
        #setProfileModal label input[type=radio]:checked::after {
            font-weight: 900;
        }
        #setProfileModal label input[type=radio]:active{
            transform: scale(0.6);
        }

        #setProfileModal label input[type=radio]:checked::after {
            content: "";
        }
        #setProfileModal .col-event{
            font-weight: bold;
            color: #51595C;
        }
        #setProfileModal .col-event >*{
            margin-right: 5px;

            font-size: 17px;

        }
        #setProfileModal .inputGroup {
            display: block;
            position: relative;
        }
        #setProfileModal .inputGroup label {
            padding: 15px 0px;

            display: block;
            text-align: left;
            color: #3c454c;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: color 200ms ease-in;
            overflow: hidden;
        }
        #setProfileModal .inputGroup label:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            z-index: -1;
        }
        #setProfileModal .inputGroup label:after {
            width: 26px;
            height: 27px;
            content: "";
            border: 1px solid rgba(167,167,167,1);;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg width='27' height='29' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
            background-repeat: no-repeat;
            background-position: 2px 3px;
            border-radius: 50%;
            z-index: 2;
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            transition: all 200ms ease-in;
        }
        #setProfileModal .inputGroup input:checked ~ label {
            color: #fff;
        }
        #setProfileModal .inputGroup input:checked ~ label:before {
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
            opacity: 1;
        }
        #setProfileModal .inputGroup input:checked ~ label:after {
            background-color: #5cb85b;
            border-color: #5cb85b;
        }
        #setProfileModal .inputGroup input {
            width: 32px;
            height: 32px;
            order: 1;
            z-index: 2;
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            visibility: hidden;
        }


        #setProfileModal *,
        #setProfileModal *::before,
        #setProfileModal *::after {
            box-sizing: inherit;
        }
        #setProfileModal .img_responsive{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            float: left;
            margin-right: 8px;
        }
        #setProfileModal .box-upload{
            border-radius: 50%;
            height: 51px;
            width: 51px;
            border: 1px solid rgba(167,167,167,1);
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(167,167,167,1);
        }
        #setProfileModal .img_upload_view{
            border-radius: 50%;
            height: 40px;
            width: 40px;
        }
        #chatSettingInfo .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 6px;
            color: rgba(190,190,190,1);
        }

    </style>
    <style type="text/css"></style>
    <style type="text/css">
        li.disabled > span[data-v-0448c604] {
            cursor: default !important
        }

        .btn.menuBtn img, .stickerBtn img {
            position: relative;
            top: 13px;
        }

        .glyphicon-send {
            position: relative;
            top: 0;
        }

        #visual #detail #visual-sender .senderEdit {
            margin-right: 52px;
            margin-left: 127px;
        }

        #queryName {
            border: 2px solid #F8F8F8 !important;
            border-right: none !important;
            box-shadow: unset;
            border-top: 2px solid rgb(248, 248, 248) !important;
            height: 40px;
            text-align: center;
            margin-left: 9px;
            width: 79%;
            font-weight: normal;
            padding-bottom: 16px;
        }
        #queryName:focus {
            box-shadow: unset;
            border-top: 2px solid rgb(248, 248, 248) !important;
         }
        #queryName::placeholder{
            color: #C9C9C9;
            font-size: 11px;
        }

        #sizing-addon2 {
            background: white !important;
        }

        #visual #list .search-inputs .input-group-btn button:hover {
            background-color: #f9f9f9;
        }

        .glyphicon-search:hover {
            cursor: pointer;
        }
        .avtBtnDefautlt{
            border-radius: 0;
            float: left;
            width: 32px;
            height: 45px;
            text-align: center;
            padding: 0;
            line-height: 25px;
            border: 0;
        }

        #name_send_default{
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 108px;
            font-size: 13px;
            font-weight: normal;
        }
        @media  screen and (max-width: 1280px) {
            #name_send_default{
                width: 62px !important;
            }
        }
        #visual #list .search-inputs .input-group-btn button {
            height: 34px;
            /*background-color:#eee!important;*/
        }

        .search_tags {
            /*background-color: #f0ad4e !important;*/
        }

        .message-body {
            max-width: 60% !important;
            word-break: break-word;
        }

        #message-modal-body {
            margin: auto;
        }

        #message-modal-body .button-balloon {
            margin: auto;
        }

        #message-modal-body .message-body {
            margin-left: auto;
            margin-right: 1em;
            float: right;
        }

        #message-modal-body .button-balloon > p {
            padding: 1em;
            margin-bottom: 0;
            background: white;
            margin-bottom: 0;
        }

        #message-modal-body .button-balloon > p b {
            display: block;
        }

        #message-modal-body .button-balloon-img {
            height: 11.26em;
            background-size: cover;
            background-position: center center;
            border-top-left-radius: 0.5em;
            border-top-right-radius: 0.5em;

        }

        #message-modal-body .button-balloon .button-actions {
            border-top: 0px solid #ccc;
            color: #3e6292;
        }

        #message-modal-body .button-balloon .button-actions .button-action {
            width: 100%;
            display: block;
            text-align: center;
            padding: 1em;
            cursor: pointer;
            background: white;
        }

        #message-modal-body b {
            font-weight: bold;
        }

        #status-rec {
            border-radius: 5px 5px;
            margin-left: 10px;
            color: white;
            font-weight: bold;
            background: #67c6ef;
            padding: 5px 10px;
        }

        #list-buttons {
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .list-button {
            border: 1px solid #ccc;
            padding: 10px 15px;
            margin-bottom: 1px;
        }

        .label-type {
            padding: 4px 15px;
            background-color: #272828;
            border-radius: 4px;
            color: white;
            margin-right: 3px;

        }

        .listitems .thumbnail:hover {
            margin: 0px !important;
            padding: 0 !important;

        }

        /*.modal-backdrop {*/
        /*    position: fixed;*/
        /*    top: 0;*/
        /*    right: 0;*/
        /*    bottom: 0;*/
        /*    left: 0;*/
        /*    z-index: 1040;*/
        /*    background-color: #000;*/
        /*}*/

        /*.modal-backdrop.in {*/
        /*    display: block;*/
        /*}*/

        #templateModal .nano-pane {
            display: none !important;
        }

        div:focus, div:visited {
            outline: none !important;
        }

        .taggroupdiv {
            word-break: break-word;
        }

        .carousel-title {
            font-size: 18px;
            margin-bottom: 20px;
        }

        ul > li.list-button:first-child {
            margin-top: 10px;
        }

        ul > li.list-button:last-child {
            margin-bottom: 20px;
        }

        .list-button b {
            margin-bottom: 10px;
        }

        .modal-title {
            color: #000;
            font-weight: normal;
        }

        #visual #detail #visual-sender .senderEdit .emojionearea .emojionearea-editor {
            height: 48px !important;
            padding-left: 0;
        }

        .emojionearea .emojionearea-editor {
            min-height: 6em;
        }
        .div-is{
            display: flex;
            align-items: center;
            justify-content: inherit;
            /*margin-top: 10px;*/
        }

        .div-is .btn-search{
            float: left;
            width: 16%;
            padding: 0px 0px 4px 1px;
            background: #ffffff;
            font-size: 17px;
            border: 2px solid #F8F8F8;
            border-left: none !important;
            cursor: pointer;
            border-left: none;
            height: 40px;
            border-radius: 0 4px 4px 0;
        }
        .div-is input{
            padding: 10px;
            font-size: 15px;
            float: left;
            height: 35px;
            margin-right: 0px;
            border-right: none;
            border-radius: 4px 0 0 4px;
            color: #000000;
        }
        .btn-top .btn-dark{
            background-color: #7d9195 !important;
            color: white;
            width: 113px ;
            margin-top: 10px;
        }
        .btn-filter{
            margin-top: 10px;
            background: #F2F2F2 0% 0% no-repeat padding-box;
            border-radius: 5px;
            padding: 6px 10px;

        }
        .btn-filter .btn-fill{
            /*border: 2px solid rgba(8,191,90,1);*/
            color: #96ADB2 !important;
            border: none;
            background-color: #F2F2F2 ;
            width: 90px ;
        }
        .btn-filter .btn-active{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            width: 90px ;
            color: #51595C;
            border: none;
        }
        #doll .btn-filter .btn-active{
            background: #7D9195 !important;
            color: #fff !important;
        }
        .active-folder{
            background: #08BF5A !important;
            color: #fff !important;
        }
        .non-active-folder{
            background: #F4FBF2 !important;
            color: #707070;
            border: 1px solid #707070;
        }

        #visual_deepsearch .list-group li{
            border-radius: 4px !important;
            margin-bottom: 5px;
            border-color: #F6F6F6;
            color: #51595C;
            font-weight: bold;
        }
        #visual_deepsearch .list-group li label{
            color: #51595C;
            font-weight: bold;
        }

        #search-tab .active{
            background-color: #7D9195 !important;
            color: #FFFFFF;
        }
        #search-tab li{
            background-color: #fff !important;
            color: #51595C;

        }
        .user-message.me .covert-time{
            position: absolute;
            color: #7D9195 !important;
            left: -3px;
            bottom: -21px;
            font-size: 13px;
        }
        .user-message.me .you-time{
            display: none;
        }
        .user-message.you .me-time{
            display: none;
        }
        .po-relative{
            position: relative;
        }

        .user-message.you .covert-time{
            position: absolute;
            bottom: -18px;
            right: 0px;
            color: #7D9195;
            font-size: 13px;
        }

        .user-message.me {
            margin-right: -10px !important;
            right: -5px;
        }
        .doll-user .content-txt{
            /*overflow: hidden;*/
            /*display: block;*/
            /*text-overflow: ellipsis;*/
            /*white-space: nowrap;*/
            word-break: break-word;
            font-size: 15px;
        }
        .text-one-line{
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    </style>
    <style type="text/css">
        .style-mobie {
            display: none;
        }

        .detail-mobie {
            height: 100%;
            width: 500px;
        }

        .show-doll {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            transform: translateY(-200);
            width: 20px;
        }

        .show-doll.info {
            opacity: 1;
            visibility: visible;
            transform: rotate(0deg) translateY(6);
            transition: 0.6s;
        }
        .show-doll.info.turn{
            transform: rotate(180deg);
        }

        .message-send-test {
            margin-right: 7px !important;
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
            padding: 2px 3px;
            border-radius: 5px;
            font-size: 13px;
            margin-top: 1px;
            display: inline-block;
        }
        #img_pdf {
            max-width: 50px;
            max-height: 50px;
            margin-top:5px;
            margin-bottom: 7px;
        }
        .copy-notification {
            color: #ffffff;
            background-color: rgba(0,0,0,0.8);
            padding: 20px;
            border-radius: 30px;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 250px;
            margin-top: -30px;
            margin-left: -85px;
            display: none;
            text-align:center;
        }
        .b-select{
            position: relative;
        }
        .b-select i{
            position: absolute;
            right: 9px;
            top: 7px;
            font-size: 22px;
        }
        .cus-file{
            padding: 5px;
            background: #5799db;
            color: #fff;
            width: 50px;
            font-size: 14px;
            text-align: center;
            border-radius: 5px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .cus-file input[type="file"] {
            display: none;
        }
        .content-mail{
            font-size: 18px;
            text-align: left;
            color: rgba(81,89,92,1);
            word-break: break-word;
        }
        #search-tab #1{
            width: 44%;
            border: 1px solid #707070;
            border-bottom: none;
            position: absolute;
            top: 2px;
            left: 17px;
        }
        #search-tab #2{
            width: 44%;
            /* margin-left: 20px; */
            border: 1px solid #707070;
            position: absolute;
            top: 2px;
            right: 16px;
            border-bottom: none;
        }
        #search-tab{
            border-bottom: 1px solid #ddd;
            position: relative;
            height: 40px;
        }
        #tagEditModaltagSelector .listFolder >*, #single_template_idSelector .listFolder >*{
            margin-bottom: 5px;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            color: #51595C;
        }
        #tagEditModaltagSelector .listItemInFolder >*,  #single_template_idSelector .listItemInFolder >*{
            margin-bottom: 5px;
            border: 1px solid #F6F6F6;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            padding: 0;
            color: #51595C
        }
        #tagEditModaltagSelector .listItemInFolder .checkbox{
           margin: 0;
        }
        #tagEditModaltagSelector .listItemInFolder .checkbox label{
            font-weight: bold;
            padding: 10px 10px 10px 30px;
            width: 100%;
        }
        #tagEditModaltagSelector .listItemInFolder .checkbox input{
            top: 12px;
        }
        #single_template_idSelector .listItemInFolder .checkbox{
            margin: 0;
        }
        #single_template_idSelector .listItemInFolder .checkbox label{
            font-weight: bold;
            padding: 10px;
            width: 100%;
        }
        #single_template_idSelector .listItemInFolder .checkbox input{
            top: 12px;
        }

        .box_item_of_folder::-webkit-scrollbar , .box_folder_tag::-webkit-scrollbar
        ,#memoEditModalMemo::-webkit-scrollbar, #tag_id_1 .list-group::-webkit-scrollbar, #tag_id_2 .list-group::-webkit-scrollbar{
            width: 13px;
        }
        .box_item_of_folder::-webkit-scrollbar-track ,.box_folder_tag::-webkit-scrollbar-track,
        #memoEditModalMemo::-webkit-scrollbar-track ,#tag_id_1 .list-group::-webkit-scrollbar-track, #tag_id_2 .list-group::-webkit-scrollbar-track{
            /*box-shadow: inset 0 0 5px grey;*/
            border-radius: 10px;
        }
        .box_item_of_folder::-webkit-scrollbar-thumb , .box_folder_tag::-webkit-scrollbar-thumb
        ,#memoEditModalMemo::-webkit-scrollbar-thumb , #tag_id_1 .list-group::-webkit-scrollbar-thumb, #tag_id_2 .list-group::-webkit-scrollbar-thumb{
            background: #96ADB2;
            border-radius: 10px;
        }

        #memoEditModalMemo:focus{
            outline: none;
            box-shadow: none;
        }
        #scenarioEditModal >* {
            color:#51595C ;
            font-weight: bold;
        }
        #scenarioEditModal .checkbox label, .radio label{
            font-weight: bold ;
        }
        #scenarioEditModal select option, #richEditModal select option{
            color:#51595C ;
            font-weight: bold;
        }
        #scenarioEditModal input , #scenarioEditModal select {
            border-color:  #96ADB2;
        }
        #richEditModal >* ,#templateModal>*{
            color:#51595C ;
            font-weight: bold;
        }
        #richEditModal select {
            border-color:  #96ADB2;
        }
        #scenarioEditModal #c_step_to_setting input[type='radio']{
            transform: scale(1.3);
        }
        .ic-close{
            color: #898F90;
            padding: 2px 6px 7px 6px;
        }
        .ic-close:hover{
            background-color: #96ADB2;
            color: #FFFFFF !important;
            border-radius: 4px;
            padding: 2px 6px 3px 6px;
        }
        .ic_filter_new{
            color: #DDDDDD;
            padding: 8px 8px 7px 7px;
            /*margin-left: 10px;*/
            font-size: 20px;
            margin-right: 5px;
            margin-left: 3px;
            border-radius: 4px;
            border: 2px solid #F8F8F8;
        }
        .ic_filter_new:hover{
            background-color: #96ADB2;
            color: #FFFFFF !important;
            border-radius: 4px;
            border: 2px solid #96ADB2;
            /*padding: 8px 8px 7px 7px;*/
            /*margin-left: 10px;*/
            /*font-size: 20px;*/
            /*margin-right: 5px;*/
        }

        .btn:hover{
            opacity: 0.7;
        }
        .buttons_title {
            font-weight: 700
        }
        .head_buttons {
            word-break: break-all;
            border-bottom: 1px solid #ccc;
            padding: 5px;
        }

        #templateDetail .message {
            text-align: center;
            background: #F2F2F2;
            padding: 25px;
            margin: 10px
        }

        #templateDetail .bg_preview_wap {
            width: 100%;
            margin: auto;
            background: #fff;
            word-break: break-word;
        }

        #templateDetail .text_preview {
            padding: 16px !important
        }

        #templateDetail .preview_video_wap {
            border-radius: 5px;
            width: 60%;
            margin-left: 20%;
            background: #fff;
            min-height: 250px;
            overflow-y: scroll;
            padding-bottom: 10px
        }

        #templateDetail .video_wap_preview {
            width: 100%
        }

        #templateDetail .preview_thumb img {
            width: 150px;
            max-height: 200px;
            float: left;
            padding-left: 10px
        }

        #templateDetail .message .question_wap {
            border-radius: 5px;
            width: 370px;
            margin-left: 25%;
            background: #fff
        }

        #templateDetail .question_title {
            border-bottom: 1px solid #ccc;
            padding: 10px !important;
            overflow: hidden;
            word-break: break-all
        }

        #templateDetail .answer_question {
            min-height: 40px;
            overflow: auto;
        }
        .temp_name {
            font-size: 14px !important;
            font-weight: 700;
            margin: 0 10px;
        }
        .box_chat_top{
            background-color: rgb(242, 242, 242);
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }
        .box_chat_top_l{

            /*width: 260px;*/
            height: 85px;
            background: #FFFFFF;
            box-shadow: 0px 0px 10px #0000001A;
            border-radius: 5px;
            padding: 2px;
            margin-bottom: 10px;
            /*display: flex;*/
            /*align-items: center;*/
        }
        .box_chat_top_r{
            /*width: 293px;*/
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 0px 10px #0000001A;
            border-radius: 5px;
            padding: 10px;
            height: 85px;
            margin-bottom: 10px;
        }
        .notifile_page{
            position: absolute;
            background-color: rgb(125, 145, 149);
            color: rgb(255, 255, 255);
            border-radius: 5px;
            padding: 5px 6px;
            font-size: 12px;
            right: 14px;
            top: -9px;
            display: none;
            box-shadow: 0px 3px 6px #00000029;
        }
        .itemSystem{
            margin-right: 5px;
        }
        .itemLine{
            padding-right: 0;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            cursor: pointer;
        }
        .itemLine:hover{
            background-color: #F4FBF3 ;
        }
        .itemLine:hover .notifile_page{
            display: block;
        }
        .box_chat_top_c_content{
            display: flex;
            align-items: inherit;
            margin-left: 6px;
            height: 85px;
        }
        .box_chat_top_c{
            /*margin-left: 272px;*/
            /* margin-left: 272px; */
            width: 99%;
            /* background: #FFFFFF 0% 0% no-repeat padding-box; */
            /* box-shadow: 0px 0px 10px #00000012; */
            border-radius: 5px;
            /* padding: 5px; */
            /* margin-left: 5px; */
            /* margin-right: 5px; */
            margin-bottom: 10px;
            height: 85px;
        }
        .box_chat_top_c_l{
            box-shadow: 0px 0px 10px #00000012;
            padding: 10px;
            background: white;
            border-radius: 4px;
            /*margin-left: 22px;*/
        }
        .box-avt-top{
            background: #F8F8F8 0% 0% no-repeat padding-box;
            box-shadow: 0px 2px 0px #00000029;
            border-radius: 5px;
            width: 181px;
            padding: 14px;
            color: #51595C;
            margin: 0 auto;
            margin-top: 12px;
            font-weight: bold;
        }
        .box-avt-top:hover{
            background: #08BF5A 0% 0% no-repeat padding-box;
            box-shadow: 0px 2px 0px #00000029;
            border-radius: 5px;
            color: white;
        }
        .box-avt{
            background-color: unset;
        }
        body{
            font-weight: bold;
        }
        .lb-top-c{
            color: rgb(125, 145, 149);
            font-size: 13px;
            margin-bottom: 5px;
        }

            /*Styling Selectbox*/
        .top-c-3 .dropdown {
            width: 100%;
            display: inline-block;
            position: relative;
            font-size: 14px;
            color: #51595C;
            text-align: center;
            background: #F6F6F6 0% 0% no-repeat padding-box;
            border-radius: 3px;
        }
        .top-c-3 .dropdown .select {
            cursor: pointer;
            display: block;
            padding: 7px 10px;
        }
        .top-c-3 .dropdown .select > i {
            font-size: 13px;
            color: #888;
            cursor: pointer;
            float: right;
            line-height: 20px
        }
        .top-c-3 .dropdown:hover {
            box-shadow: 0 0 4px rgb(204, 204, 204)
        }
        .top-c-3 .dropdown:active {
            background-color: #f8f8f8
        }
        .top-c-3 .dropdown.active:hover,
        .top-c-3 .dropdown.active {
            box-shadow: 0 0 4px rgb(204, 204, 204);
            border-radius: 2px 2px 0 0;
            background-color: #f8f8f8
        }

        .top-c-3 .dropdown .dropdown-menu {
            position: absolute;
            width: 100%;
            left: 0;
            margin-top: 1px;
            overflow: hidden;
            display: none;
            max-height: 210px;
            overflow-y: auto;
            z-index: 9;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
        }
        .top-c-3 .dropdown .dropdown-menu li {
            padding: 6px 11px;;
            cursor: pointer;
            font-size: 12px;
        }
        .top-c-3 .dropdown .dropdown-menu {
            padding: 0;
            list-style: none;
            background: white;
        }
        .top-c-3 .dropdown .dropdown-menu li:hover {
            background-color: #f2f2f2
        }
        .top-c-3 .dropdown .dropdown-menu li:active {
            background-color: #e2e2e2
        }
        .btn-edit-sys{
            position: absolute;
            right: 6px;
            top: 9px;
            color: #DDDDDD;
        }
        .cm-e-menu {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            position: relative;
            z-index: 1000;
            font-size: 14px;
            margin-top: 8px;

        }
        .cm-e-menu ul {
            margin: 0; padding: 0;
        }
        .cm-e-menu li {
            position: relative;
            white-space: nowrap;
            cursor: pointer;
            text-transform: capitalize !important;
            list-style: none;

            /*-webkit-transition: background-color ease-in 300ms;*/
            /*-moz-transition: background-color ease-in 300ms;*/
            /*-ms-transition: background-color ease-in 300ms;*/
            /*-o-transition: background-color ease-in 300ms;*/
            /*transition: background-color ease-in 300ms;*/
        }
        .cm-e-menu li:hover {
            background-color: #f2f2f2;
        }
        .cm-e-menu ul li a{
            font-weight: bold;
        }
        .cm-e-menu ul li.topmenu {
            /*display: inline-table;*/
            padding: .3em 1em;
            font-weight: bold;
        }
        .cm-e-menu .topmenu ul {
            /*display:none;*/
            opacity: 0;
            visibility: hidden;
            position: absolute;
            background-color: #ffffff;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            width: 100%;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        
        .cm-e-menu li:hover > ul {
            display: block;
            opacity: 1;
            visibility: visible;

        }
        .cm-e-menu ul.submenu {
            top: 100%; left: 0;
            padding-top: .5em;
            padding-bottom: .5em;


        }
        .cm-e-menu ul.submenu .submenu {
            top: -.5em;
            left: 100%;
        }
        .cm-e-menu ul.submenu li {
            padding: 7px 10px;
            color: #51595C;
        }
        .cm-e-menu li.divider {
            padding: 0;
            border-top: 1px solid #343434;
            margin: .5rem auto .3rem;
            cursor: default;
        }
        .cm-e-menu li.divider:hover {
            background-color: transparent;
        }

        .radio_action_type:checked,
        .radio_action_type:not(:checked) {
            position: absolute;
            left: -9999px;
        }

        .radio_action_type:checked + label {
            position: relative;
            padding-left: 28px;
            cursor: pointer;
            line-height: 19px;
            display: inline-block;
            color: #51595C;
        }
        .radio_action_type:not(:checked) + label {
            position: relative;
            padding-left: 28px;
            cursor: pointer;
            line-height: 20px;
            display: inline-block;
            color: #51595C;
        }
        .radio_action_type_confirm:checked + label{
            line-height: 20px !important;
        }
        .radio_action_type:checked + label:before,
        .radio_action_type:not(:checked) + label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 18px;
            height: 18px;
            border: 1px solid #96ADB2;
            border-radius: 100%;
            background: #fff;
        }
        .radio_action_type:checked + label:after,
        .radio_action_type:not(:checked) + label:after {
            content: "";
            width: 12px;
            height: 12px;
            background: #96ADB2;
            position: absolute;
            top: 5px;
            left: 3px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        .radio_action_type:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .radio_action_type:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        .radio_action_type_user:checked,
        .radio_action_type_user:not(:checked) {
            position: absolute;
            left: -9999px;
        }
        .radio_action_type_user:checked + label,
        .radio_action_type_user:not(:checked) + label {
            position: relative;
            padding-left: 28px;
            cursor: pointer;
            line-height: 20px;
            display: inline-block;
            color: #51595C;
        }
        .radio_action_type_user:checked + label:before,
        .radio_action_type_user:not(:checked) + label:before {
            content: "";
            position: absolute;
            left: 5px;
            top: -19px;
            width: 25px;
            height: 25px;
            border: 2px solid #F2F2F2;
            border-radius: 100%;
            background: #fff;
        }
        .radio_action_type_user:checked + label:after,
        .radio_action_type_user:not(:checked) + label:after {
            content: "";
            width: 13px;
            height: 13px;
            background: #08BF5A;
            position: absolute;
            top: -13px;
            left: 11px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        .radio_action_type_user:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .radio_action_type_user:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        .name-fol-right-new{
            text-align: left;
            border-bottom: 2px solid #DDDDDD;
            padding-bottom: 3px;
            margin-bottom: 4px;
            font-size: 16px;
            margin-top: 8px;
        }
        #chatSettingStatus table>tbody>tr>td{
            border: none;
            border-bottom: 1px solid #F8F8F8;
        }
        #chatSettingStatus .table>thead>tr>th{
            border: none;
        }
        .box_color_val{
            width: 30px;
            height: 30px;
            border-radius: 50%
        }
        .box_color{
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            /*display:grid;*/
            grid-template-columns: 1fr 1fr 1fr 1fr ; /* chia làm 4 cột */
            grid-column-gap: 10px; /* khoảng cách giữa các cột */
            grid-row-gap: 10px; /* khoảng cách giữa các hàng cột */
            padding: 15px;
            position: absolute;
            top: -103px;
            background: #ffffff;
            right: -66px;
            display: none;
        }
        .checkedColor{
            opacity: 1 !important;
            margin-bottom: 20px;
        }
        .unCheckColor{
            opacity: 0;
            transition: all 0.3s ease;
        }
        .bx_edit_info{
            background: #F6F6F6;
            border-radius: 5px;
            height: 35px;
            padding: 7px;
            border: 1px solid #F6F6F6;
            font-weight: normal;

            /*font-size: 14px;*/
        }
        .text_ellip{
            width: 190px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .textType{
            height: auto !important;
            font-size: 13px;
            /*display: block;*/
            /*display: -webkit-box;*/
            /*max-width: 100%;*/
            /*margin: 0 auto;*/
            /*font-size: 14px;*/
            /*line-height: 1;*/
            /*-webkit-line-clamp: 3;*/
            /*-webkit-box-orient: vertical;*/
            /*overflow: hidden;*/
            /*text-overflow: ellipsis;*/
        }
        .bx_edit_info:hover{
            background: #ffffff;
            border: 1px solid #ccc;
        }
        .ic-cal-ip {
            position: absolute;
            left: 8px;
            top: 6px;
            color: rgba(190,190,190,1);
        }
        .ic_zoom_out{
            transform: rotate(90deg);
            font-size: 27px;
            position: absolute;
            bottom: 0;
            left: 64px;
            background: white;
            padding: 5px;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 1px;
            cursor: pointer;
        }
        .cus-file-info-img{
            background: #F2F2F2 0% 0% no-repeat padding-box;
            box-shadow: 0px 2px 0px #00000029;
            border-radius: 2px;
            color: #51595C;
            margin: 5px 0;
            width: 72px;
            cursor: pointer;
        }
        .cus-file-info-img:hover{
            opacity: 0.7;
        }

        .item-sort{
            background: #FFFFFF ;
            border: 2px solid #F2F2F2;
            border-radius: 5px;
            padding: 8px;
            width: 100%;
        }
        .tbl_info_md thead tr th{
            padding: 6px 9px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none!important;
        }
        .tbl_info_md tbody tr td{
            border-bottom: 1px solid #F8F8F8;
        }
        #doll .nano-inner::-webkit-scrollbar,
        #list_friend::-webkit-scrollbar,
        #messages-container::-webkit-scrollbar,
        .statusBoxScroll::-webkit-scrollbar
        {
            width: 5px;
        }
        #doll .nano-inner::-webkit-scrollbar-track,
        #list_friend::-webkit-scrollbar-track,
        #messages-container::-webkit-scrollbar-track,
        .statusBoxScroll::-webkit-scrollbar-track{
            /*box-shadow: inset 0 0 5px grey;*/
            border-radius: 10px;
        }
        #doll .nano-inner::-webkit-scrollbar-thumb,
        #list_friend::-webkit-scrollbar-thumb,
        #messages-container::-webkit-scrollbar-thumb,
        .statusBoxScroll::-webkit-scrollbar-thumb{
            background: #96ADB2;
            border-radius: 10px;
        }
        #chatSettingInfo .modal-body::-webkit-scrollbar {
            width: 10px;
        }

        #chatSettingInfo .modal-body::-webkit-scrollbar-track{
            /*box-shadow: inset 0 0 5px grey;*/
            border-radius: 10px;
        }
        #chatSettingInfo .modal-body::-webkit-scrollbar-thumb{
            background: #96ADB2;
            border-radius: 10px;
        }
        .box_setting_filter{
            border: 2px solid rgb(248, 248, 248);
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 8px;
            margin-left: 30px;
            margin-right: 30px;
        }
        .bd_title{
            width: 10px;
            background: rgb(8, 191, 90);
            border-radius: 2px;
            height: 30px;
            margin-right: 10px;
        }

        .radio_form_setting label {
            display: flex;
            cursor: pointer;
            font-weight: 500;
            position: relative;
            overflow: hidden;


        }
        .radio_form_setting label input {
            position: absolute;
            left: -9999px;
        }
        .radio_form_setting label input:checked + span {
            background-color: #F4FBF2;
            border: 2px solid #44CB80;
        }

        .radio_form_setting label input:checked + span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            background-color: #00a65a;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            margin-right: 32px;
            transition: 0.25s ease;
            border: 2px solid #08BF5A;
            box-shadow: inset 0 0 0 4px #F4FBF2;
        }
        .radio_form_setting label input:checked + span:after {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            margin-right: 0.375em;
            background: red;
        }
        .radio_form_setting label span {
            display: flex;
            align-items: center;
            padding: 7px 12px;
            border: 2px solid #96ADB2;
            border-radius: 5px;
            width: 400px;
        }
        .radio_form_setting label span:hover {
            background: #F4FBF2 ;
            border: 2px solid #44CB80;
        }
        .radio_form_setting label span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            margin-right: 32px;
            background: #FFFFFF;
            border: 2px solid #96ADB2;
        }
        #chatSetting::before, #modalPreviewImage::before, #chatSettingInfo::before,
        #modalPreviewAvata::before , #qAModal:before{
            content: '';
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            right: 0px;
            background: black;
            opacity: 0.6;
            z-index: 1001;
        }
        #chatSetting .modal-dialog, #modalPreviewImage .modal-dialog ,
        #chatSettingInfo .modal-dialog, #modalPreviewAvata .modal-dialog,
        #qAModal .modal-dialog{
            height: 100% !important;
            /*width: 34% !important;*/
            z-index: 1040;
            position: fixed;
            left: 50%;
            transform: translate(-50%, 0px) !important;
        }

        .text-bottom-chat{
            text-align: right;
            font-size: 11px;
            color: #7D9195;
            margin-top: 4px;
            padding-right: 257px;
            text-decoration: underline;
        }
        #messages-container{
            background: rgb(255, 255, 255);
            border-radius: 5px;
            padding-bottom: 0px;
            margin-right: 5px;
        }
        #backDropDisable::before{
            content: '';
            width: 100%;
            height: 100%;
            top: 0px;
            position: fixed;
            right: 9px;
            left: 32%;
            background: black;
            opacity: 0.6;
            z-index: 999;
        }
        .ic-hide-top{
            position: relative;
            width: 96%;
            text-align: center;
        }
        .ic-hide-top i{
            position: absolute;
            background: #F8F8F8;
            z-index: 1;
            padding: 1px 9px;
            border-radius: 4px;
            font-size: 20px;
        }
        @media screen and (max-width: 1280px){
            #backDropDisable::before{
                left: 37%;
            }
        }
        @media screen and (max-width: 1440px) and (min-width: 1366px){
            #visual{
                height: 90vh !important;
            }
            .ic-hide-top{
                width: 94%;
            }
            #backDropDisable::before{
                left: 35%;
            }
            #visual-sender .emojionearea .emojionearea-editor{
                min-height: 81px;
            }
            .itemSystem{
                margin-right: 8px !important;
            }
            .user-block-time{
                /*inset: 5px -52px -206px -124px !important;*/
            }
            #list_friend{
                height: 66.7vh !important;
            }
            #messages-container
            {
                height: 436.72px !important;
            }
            #visual #detail #visual-sender{
                bottom: 35px !important;
            }
            #doll .box-info-setting{
                height: 57vh !important;
            }
            #doll .box-note-right{
                height: 17vh !important;
                padding: 0;
            }
            .txt_area_botom{
                min-height: 77px !important;
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            .ic-hide-top{
                width: 94%;
            }
            #backDropDisable::before{
                left: 35%;
            }
            #visual-sender .emojionearea .emojionearea-editor{
                min-height: 72px;
            }
            .user-block-time{
                /*inset: 5px -52px -206px -124px !important;*/
            }
            #visual{
                height: 90vh !important;
            }
            #detail{
                height: 90vh !important;
            }
            #list_friend{
                height: 63.7vh !important;
            }
            #visual #detail #visual-sender{
                bottom: 22px !important;
            }
            #doll .box-info-setting{
                height: 54.4vh !important;
            }
            #doll .box-note-right{
                height: 17.5vh !important;
                padding-bottom: 0 !important;
            }

            #messages-container
            {
                height: 374.6px !important;
            }
            .txt_time_content{
                right: 40% !important;
            }
            #modal-image{
                max-height: 533px !important;
            }
            .txt_area_botom {
                min-height: 62px !important;
            }
            /* Styles for Desktops */
        }
        @media screen and (max-width: 1919px)  and (min-width: 1441px){
            #visual-sender .emojionearea .emojionearea-editor{
                min-height: 81px;
            }
            .user-block-time{
                inset: 5px -52px -206px -124px !important;
            }
            #list_friend{
                height: 71.5vh  !important;
            }
            #visual #detail #visual-sender{
                bottom: 23px !important;
            }
            #doll .box-info-setting{
                height: 63.3vh !important;
            }
            #doll .box-note-right{
                height: 14.4vh !important;
            }
            .txt_area_botom {
                min-height: 64px !important;
                padding-bottom: 0 !important;
            }
            #messages-container{
                height: 567px !important;
            }
        }

        @media   (max-width: 2560px) and (min-width: 1921px) {
            #backDropDisable::before{
                left: 27% !important;
            }
            #visual-sender .emojionearea .emojionearea-editor{
                min-height: 86px;
            }
            .user-block-time{
                /*inset: 5px -52px -206px -124px !important;*/
            }
            #list_friend{
                height: 75.5vh !important;
            }
            #visual #detail #visual-sender{
                bottom: 19px !important;
            }
            #doll .box-info-setting{
                height: 68vh !important;
            }
            #doll .box-note-right{
                height: 12vh !important;
                margin-top: 3px;
                padding: 0;
            }
            .txt_area_botom{
                min-height: 71px !important;
            }
            #messages-container{
                height: 68vh !important;
            }
            /*.itemLine{*/
            /*    width: 33% ;*/
            /*}*/
            /*.itemStatus{*/
            /*    margin-left: 81px;*/
            /*}*/
            .text-bottom-chat{
                padding-right: 304px;
                font-size: 12px;
            }
        }
        @media  (width: 1920px)  {
            /*.box_chat_top_c{*/
            /*    width: 99.5% !important;*/
            /*}*/
            #visual{
                height: 92vh !important;
            }
            #backDropDisable::before{
                left: 30%;
            }
            #visual-sender .emojionearea .emojionearea-editor{
                min-height: 86px;
            }
            .user-block-time{
                /*inset: 5px -52px -206px -124px !important;*/
            }
            #list_friend{
                height: 73.4vh !important;
            }
            #visual #detail #visual-sender{
                bottom: 21px !important;
                width: 99.5% !important;
            }
            #doll .box-info-setting{
                height: 65vh !important;
            }
            #doll .box-note-right{
                height: 14vh !important;
                padding: 0;
            }
            .txt_area_botom{
                min-height: 79px !important;
            }
            #messages-container{
                height: 65vh !important;
            }
            /*.itemLine{*/
            /*    width: 33% ;*/
            /*}*/
            /*.itemStatus{*/
            /*    margin-left: 81px;*/
            /*}*/
            .text-bottom-chat{
                padding-right: 304px;
                font-size: 12px;
            }
        }
        @media  (width: 1920px) and (height: 1080px ) {
            /*.box_chat_top_c{*/
            /*    width: 99.5% !important;*/
            /*}*/
            #visual{
                height: 92vh !important;
            }
            #visual-sender .emojionearea .emojionearea-editor{
                min-height: 86px;
            }
            .user-block-time{
                /*inset: 5px -52px -206px -124px !important;*/
            }
            #list_friend{
                height: 7575.4vh !important;
            }
            #visual #detail #visual-sender{
                bottom: 21px !important;
                width: 99.5% !important;
            }
            #doll .box-info-setting{
                height: 67.8vh !important;
            }
            #doll .box-note-right{
                height: 12vh !important;
                margin-top: 2px;
            }
            .txt_area_botom{
                min-height: 122px ;
            }
            #messages-container{
                height: 67.6vh !important;
            }
            /*.itemLine{*/
            /*    width: 33% ;*/
            /*}*/
            /*.itemStatus{*/
            /*    margin-left: 81px;*/
            /*}*/
            .text-bottom-chat{
                padding-right: 304px;
                font-size: 12px;
            }
        }

        .boxChat11 .emojionearea{
            /*box-shadow: 0px 0px 10px #00000012;*/
            box-shadow:unset;
            /*border: 1.5px solid #FFFFFF;*/
            border: none;
            border-radius: 0 0 5px 5px;
        }
        .avtBoxHover{
            width: 40px;
            height: 40px;
        }
        .avtBoxHover:hover + .check_hover{
            display: block !important;
        }
        .check_hover:hover{
            display: block !important;
        }
        /*.avt_hover:hover + .check_hover{*/
        /*    display: block !important;*/
        /*}*/
        #detail{
            flex-grow: 1;
        }
        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }
        input:focus{
            outline: none;
            box-shadow: unset;
            border-color: #5799DB;
        }
        #doll .box-info-setting input:hover{
            outline: none;
            box-shadow: unset;
            border-color: #5799DB;
        }
        #doll .box-info-setting select:hover{
            outline: none;
            box-shadow: unset;
            border-color: #5799DB;
        }
        .no-drop-ic i{
            cursor: no-drop;
        }
        .inp_point::-webkit-inner-spin-button,
        .inp_point::-webkit-outer-spin-button, .inp_point {
            appearance: none;
        }
        #settingActionUrlModal .ic-close{
            color: #ffffff;
        }
        #chatSetting .form-check {
            display: block;
            margin-bottom: 2px;
        }

        #chatSetting .form-check input {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            display: none;
            cursor: pointer;
        }

        #chatSetting .form-check label {
            position: relative;
            cursor: pointer;
        }

        #chatSetting .form-check label:before {
            content:'';
            -webkit-appearance: none;
            border: 2px solid #F2F2F2;
            border-radius: 5px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 7px;
            padding: 9px;
        }

        #chatSetting .form-check input:checked + label:after {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: 8px;
            width: 7px;
            height: 12px;
            border: solid #51595C;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }
        .div-profile-default:hover{
            background: #96ADB2;
            color: white;
        }
        .div-profile-default{
            min-width: 180px !important;
        }

        .search_tags .ic_filter_new{
            color: #ffffff;
            background-color:#08BF5A ;
            border-radius: 6px;
            border: 1px solid #08BF5A;
        }
        .search_tags .ic_filter_new:hover{
            border: 1px solid #08BF5A;
        }
        .closeFilter{
            position: absolute;
            right: -2px;
            top: -7px;
            font-size: 17px;
            color: #7D9195;
            cursor: pointer;
            background: white;
            border-radius: 50%;
        }
        #messages-container div,
        #list_friend div ,
        #list_friend span,
        #visual-sender .emojionearea-editor{
            font-weight: normal !important;
        }
        .message_noti_chat{
            padding: 30px 0px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: 14px
        }
        .message_noti_chat_content{
            background-color: white;
            padding: 2px 16px 4px 23px;
            color: #51595C;
            width: auto !important;
            margin-top: -26px;
            /*margin-bottom: -35px;*/
            margin-bottom: 1px;
            font-size: 14px;
            border-bottom: 2px solid #DDDDDD;
        }
        .line-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .line-clamp-all{
            display: inline-block;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .checkAllFriend {
            -moz-appearance:none;
            -webkit-appearance:none;
            -o-appearance:none;
            outline: none;
            content: none;
        }

        .checkAllFriend:before {
            content: "\f00c";
            font-size: 15px;
            color: transparent !important;
            background: #fef2e0;
            display: block;
            width: 15px;
            height: 15px;
            border: 1px solid black;
            margin-right: 7px;
        }

        .checkAllFriend:checked:before {
            color: black !important;
        }
        .sendMessTxT div{
            font-weight: normal;
        }

    </style>
    <style type="text/css">
        #templateDetail .message .btn_modal_preview {
            padding: 10px !important
        }
        #templateDetail .message .container-btn-quick-reply {
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            padding: 0 10px;
        }

        #templateDetail .message .container-btn-quick-reply .btn-quick-reply {
            margin-top: 8px !important;
            width: 110px;
            height: auto;
            background-color: #9A9FB2;
            border-radius: 10px;
            color: #FFFFFF;
        }

        #templateDetail .message .container-btn-quick-reply .btn-quick-reply:nth-child(2n) {
            page-break-after: always;
            break-after: always;
        }

        #templateDetail .message .question_wap .answer_button_2{
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            width: 95%;
            margin: 10px auto;
            padding-bottom: 10px;
        }

        #templateDetail .message .question_wap .answer_button_2 p{
            width: 47%;
            margin-bottom: 10px;
            height: auto;
            word-wrap: break-word;
        }

        #templateDetail .message .question_wap .answer_button_2 p:nth-child(1n) {
            page-break-after: always;
            break-after: always;
        }

        #templateDetail .message .question_wap .button_type_image{
            position: relative;
        }

        #templateDetail .message .question_wap .button_type_image p.buttons_title{
            top: 10px;
            left: 10px;
            padding: 3px 10px;
            border-radius: 10px;
        }

        #templateDetail .message .question_wap .button_type_image p.buttons_content{
            bottom: 15px;
            transform: translate(-50%, 0);
            left: 50%;
            padding: 7px;
            width: 85%;
            text-align: center;
            border-radius: 10px;
        }
    </style>
@endpush
@section('content')
    <section>
        <div class="container-fluid pc-body">
            <div class="row">
                <div class="col-xs-12 col-sm-12">
                    <div class="row">
                        <div class="col-sm-12">
                        </div>
                        <div class="row">
                            <div class="col-sm-12" style="padding:0">
                                <div id="visual" style="height: 92vh">
                                    <ul class="nav nav-tabs visual-selector">
                                        <li role="presentation" class="">
                                            <a><i class="glyphicon glyphicon-user"></i>
                                                <span class="pill-label">リスト</span>
                                            </a>
                                        </li>
                                        <li role="presentation" class="active">
                                            <a><i class="glyphicon glyphicon-comment"></i>
                                                <span class="pill-label">メッセージ</span>
                                            </a>
                                        </li>
                                        <li role="presentation" class="">
                                            <a><i class="glyphicon glyphicon-list-alt"></i>
                                                <span class="pill-label">情報</span>
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="visual-main detail"
                                         style="height: 100%; background-color: rgb(242, 242, 242);display: flex;justify-content: space-between;padding-top: 10px;" v-cloak>
                                        <div id="list" class="visual-list">
                                            <div class="box_chat_top_l" v-bind:style="checkFriend.length == 0 ? '    background: #FFFFFF;': 'background: #7D9195;color:#FFFFFF'">
                                                <div v-if="checkFriend.length == 0" class="" style=" align-items: center;display: flex; margin-top: 20px;justify-content: center">
                                                    <div class="div-is" >
                                                        <input type="text" style=""
                                                               id="queryName" class="form-control" v-model="search" placeholder="友だち名・システム表示名" maxlength="1000">
                                                        <button class="btn-search "><i class="far fa-search" style="color: #BEBEBE ; font-weight: 500;"></i></button>
                                                    </div>

                                                    <div v-on:click="getCategories"
                                                         :class="(search_tag.length>0 && is_searching || search_tab >0 && is_searching || search_status.length >0 && is_searching)?'search_tags':''"
                                                         style="position: relative"
                                                       >
                                                        <i class="fas fa-filter ic_filter_new"  data-toggle="modal"  data-target="#visual_deepsearch"></i>
                                                        <i v-if="is_searching" class="fas fa-times-circle closeFilter" v-on:click="removeTagsInSearch"></i>
                                                    </div>


                                                </div>
                                                <div class="" v-else style="    width: 213px; margin: 10px;">
                                                    <div style="color: #ffffff;justify-content: space-between;display: flex;align-items: center;">
                                                        <label>
                                                            全選択
                                                            <input  type="checkbox" name="" value="" v-model="selectAll" style="transform: scale(1.5);">
                                                        </label>
                                                        <label>選択中 @{{ checkFriend.length }} 件</label>
                                                    </div>
                                                    <div class="cm-e-menu">
                                                        <ul>
                                                            <li class="topmenu">
                                                                <a style="color: #DDDDDD">
                                                                    <div class="select text-center" style="position: relative">
                                                                        <span style="    color: #96ADB2;font-size: 13px;">選択してください</span>
                                                                        <i style="  position: absolute;  color: #DDDDDD;;right: -6px; top: 3px;" class="far fa-chevron-down"></i>
                                                                    </div>
                                                                </a>
                                                                <ul class="submenu">
                                                                    <li>
                                                                        <a>ブックマーク</a>
                                                                        <ul class="submenu">
                                                                            <li>
                                                                                <i class="far fa-chevron-left"></i> ブックマーク
                                                                            </li>
                                                                            <li>
                                                                            <span style="display: inline-block">
                                                                                <input type="radio" class="radio_action_type" id="bookmark" name="is_bookmark" value="1" v-model="bookMarkAll">
                                                                                <label for="bookmark" class="font-weight-bold">ブックマークする</label>
                                                                            </span>
                                                                            </li>
                                                                            <li>
                                                                            <span style="display: inline-block">
                                                                                <input type="radio" class="radio_action_type" id="del_bookmark" name="is_bookmark" value="0" v-model="bookMarkAll">
                                                                                <label for="del_bookmark" class="font-weight-bold">ブックマークを外す</label>
                                                                            </span>
                                                                            </li>
                                                                            <div class="text-center">
                                                                                <button class="btn btn-sns-line btn-sns-line-success" v-on:click="bookMarkFriends" style="width: 104px; font-size: 14px;margin-top: 10px;">実行</button>
                                                                            </div>

                                                                        </ul>
                                                                    </li>
                                                                    <li>
                                                                        <a> 対応ステータス</a>

                                                                        <ul class="submenu statusBoxScroll"  style="max-height: 302px;overflow-y: auto;">
                                                                            <li>
                                                                                <i class="far fa-chevron-left"></i> 対応ステータス変更
                                                                            </li>
                                                                            <li>
                                                                            <span style="display: inline-block">
                                                                                <input type="radio" class="radio_action_type" id="status_cons_0"  v-model="statusAll" name="status_cons" value="">
                                                                                <label for="status_cons_0" class="font-weight-bold">なし</label>
                                                                            </span>
                                                                            </li>
                                                                            <li v-for="(item,index) in status_setting" >
                                                                            <span style="display: inline-block">
                                                                                <input type="radio" class="radio_action_type" :id="'status_cons_'+item.id"  v-model="statusAll" name="status_cons" :value="item.id">
                                                                                <label  :for="'status_cons_'+item.id"  class="font-weight-bold">@{{ item.name_status }}</label>
                                                                            </span>
                                                                            </li>

                                                                            <div class="text-center">
                                                                                <button class="btn btn-sns-line btn-sns-line-success" v-on:click="updateStatusSettingCons" style="width: 104px; font-size: 14px;margin-top: 10px;">実行</button>
                                                                            </div>
                                                                        </ul>
                                                                    </li>
                                                                    <li>
                                                                        <a> 確認状況</a>
                                                                        <ul class="submenu">
                                                                            <li>
                                                                                <i class="far fa-chevron-left"></i> 確認状況変更
                                                                            </li>
                                                                            <li>
                                                                            <span style="display: inline-block">
                                                                                <input type="radio" class="radio_action_type radio_action_type_confirm" id="is_confirm_cons"
                                                                                       name="is_confirm_cons" value="1" v-model="is_confirm_cons">
                                                                                <label for="is_confirm_cons" class="font-weight-bold">確認済</label>
                                                                            </span>
                                                                            </li>
                                                                            <li>
                                                                            <span style="display: inline-block">
                                                                                <input type="radio" class="radio_action_type" id="is_uconfirm_cons"
                                                                                       name="is_confirm_cons" value="0" v-model="is_confirm_cons">
                                                                                <label for="is_uconfirm_cons" class="font-weight-bold">未確認</label>
                                                                            </span>
                                                                            </li>
                                                                            <div class="text-center">
                                                                                <button class="btn btn-sns-line btn-sns-line-success" v-on:click="updateStatusConfirm" style="width: 104px; font-size: 14px;margin-top: 10px;">実行</button>
                                                                            </div>
                                                                        </ul>
                                                                    </li>
                                                                    <li v-on:click="hideFriends()">
                                                                        <a>非表示</a>
                                                                    </li>
                                                                    <li v-on:click="blockFriends()">
                                                                        <a>ブロック</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

                                            </div>
                                            <div style="background-color: #ffffff; padding-top: 1px; border-radius: 5px;">
                                                <div class="">

                                                    <div class="btn-filter" style="display: flex; align-items: center;justify-content: space-evenly;margin: 11px;  width: 210px; !important;">
                                                        <button class="btn btn-sns-line btn-default" style="font-size: 12px" v-bind:class="{ 'btn-active': is_unconfirm == 0, 'btn-fill':is_unconfirm == 1}"
                                                                type="button" @click="loadFriendUnconfirm(0)">一覧</button>
                                                        <button class="btn btn-sns-line btn-default" style="font-size: 12px" v-bind:class="{ 'btn-active': is_unconfirm == 1, 'btn-fill':is_unconfirm == 0}"
                                                                type="button" @click="loadFriendUnconfirm(1)">未確認</button>
                                                    </div>
                                                </div>


                                                <div class="user-list nano-wrapper" style="padding-top: 0px; background: #ffffff;border-radius: 0 0 5px 5px;">
                                                    @include('layout.screen_chat.left-sidebar')
                                                </div>
                                                <div class="list-footer"></div>
                                            </div>

                                        </div>
                                        @include('layout.screen_chat.detail_content')
                                        <div v-if="checkFriend.length >0 " id="backDropDisable"></div>

                                        <div id="doll" class="visual-doll" style=" padding-left: 5px;">
                                            <div class="box_chat_top_r" style="    ">
                                                <div class="top-c-3 itemStatus itemStatus" v-if="listFriend.length >0 ">
                                                    <label class="lb-top-c" style="">対応ステータス</label><br>
                                                    <div class="dropdown" id="statusBox" >
                                                        <div class="select" v-on:click="openBoxStatusTop"   v-bind:style="'background:'+ (current_friend.bg_status ? current_friend.bg_status: '')  + ';color:' + (current_friend.color ? current_friend.color : '#96ADB2;') ">
                                                            @{{ current_friend.id_status ? current_friend.name_status : 'なし' }}
                                                            <i class="far fa-chevron-down"></i>
                                                        </div>
                                                        <input type="hidden" name="id_status" v-model="current_friend['id_status']">
                                                        <ul class="dropdown-menu statusBoxScroll" >
                                                            <li id="0"  v-on:click="changeStatus('none',$event)">なし</li>
                                                            <li  v-for="(item,index) in status_setting" :id="item.id"
                                                                 v-on:click="changeStatus(current_friend.id_status,$event)">@{{ item.name_status }}</li>
                                                            <div style="background: #F8F8F8 ;text-align: center;    padding-top: 7px;padding-bottom: 7px;font-size: 12px; cursor: pointer"
                                                                 v-on:click="openChatSettingStatus"
                                                            > 対応ステータス編集 <i class="fas fa-edit"> </i> </div>
                                                        </ul>
                                                    </div>

                                                </div>

                                            </div>
                                            <div class="nano-wrapper" style="background: rgb(242, 242, 242);">
                                                <div class="nano has-scrollbar">
                                                    <div class="nano-content" tabindex="0">
                                                        <div class="nano-inner box-info-setting" :style="current_friend.type_line_user != 1 ? 'background-color: white' : 'background-color: #E0E0E0'" style="height: 54vh ;  border-radius: 5px;padding-bottom: 1px">
                                                            <div class="doll" v-show="current_friend.type_line_user != 1">
                                                                <div class="btn-filter" style="display: flex; align-items: center;justify-content: space-evenly;margin: 11px;width: 204px;">
                                                                    <button class="btn btn-sns-line btn-default"
                                                                            v-bind:class="{ 'btn-active': tabActiveRight == 'info', 'btn-fill':tabActiveRight == 'tag'}"
                                                                            type="button" @click="activeTypeRight('info')" style="padding: 5px; font-size: 12px; width: 86px;">友だち情報</button>
                                                                    <button class="btn btn-sns-line btn-default" style="font-size: 12px;    width: 86px;"
                                                                            v-bind:class="{ 'btn-active': tabActiveRight == 'tag', 'btn-fill':tabActiveRight == 'info'}"
                                                                            type="button" @click="activeTypeRight('tag')">タグ</button>
                                                                </div>
                                                                <button type="button" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-sm" v-if="tabActiveRight == 'info'"
                                                                        style="background: #96ADB2; color: #FFFFFF !important; margin-left: 10px; border-radius: 5px;
                                                                        box-shadow: 0px 2px 0px #00000029; width: 90%;"
                                                                        :disabled="listFriend.length == 0 "
                                                                        v-on:click="openChatSettingInfo(current_friend)">表示設定</button>
                                                                <button type="button" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-sm" v-if="tabActiveRight == 'tag'"
                                                                        style="background: #96ADB2; color: #FFFFFF !important; margin-left: 10px; border-radius: 5px;
                                                                        box-shadow: 0px 2px 0px #00000029; width: 90%;"
                                                                        :disabled="listFriend.length == 0"
                                                                        v-on:click="getCategories()" data-toggle="modal"
                                                                        data-target="#tagEditModal">タグ編集</button>

                                                                <div class="" style="margin: 10px"
                                                                     v-if="tabActiveRight == 'tag'"
                                                                >
                                                                    <div v-for="category in category_tags"
                                                                         v-show="category.tags.length>0">
                                                                        <div class="name-fol-right-new">@{{category.name }}</div>
                                                                        <div v-for="tag in category.tags" style="width: 190px;
                                                                                overflow: hidden;
                                                                                text-overflow: ellipsis;
                                                                                white-space: nowrap;">
                                                                            <span style="font-size: 13px; font-weight: normal"><i class="fas fa-tag" style="color: #7D9195"></i> @{{ tag.name }}</span> <br>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="doll-user" v-if="listFriend.length !=0 && tabActiveRight == 'info'" style="padding: 0; background-color: white; margin: 12px">


                                                                    <div v-for="(info,index) in infoCustomDisplay">
                                                                        <div class="text-left title-mypage"
                                                                             v-if=" info.id_setting != 1 && info.id_setting != 2 && info.id_setting != -1">@{{ info.title }}


                                                                        <div class="content-txt" v-if="info.type == 0 && info.id_setting == -2">
                                                                            <div v-if="index != indexEditInfo"  v-on:click="editItemInfo(index,info)" class="bx_edit_info text_ellip">
                                                                                @{{info.value }}
                                                                            </div>
                                                                            <input v-if="index == indexEditInfo" v-model="info.value" class="form-control" v-on:blur="saveItemInfo(info)" >


                                                                        </div>
                                                                        <div class="content-txt" v-if="info.type == 0 && info.id_setting == -3">
                                                                            <div v-if="index != indexEditInfo"  v-on:click="editItemInfo(index,info)" class="bx_edit_info text_ellip">
                                                                                @{{info.value }}
                                                                            </div>
                                                                            <input v-if="index == indexEditInfo" v-model="info.value" class="form-control" v-on:blur="saveItemInfo(info)" >

                                                                        </div>
                                                                        <div class="content-txt" v-if="info.type == 0 && info.id_setting == -4">

                                                                            <div v-if="index != indexEditInfo"  v-on:click="editItemInfo(index,info)" class="bx_edit_info text_ellip">
                                                                                @{{info.value ?  formatDate(info.value) : ''}}
                                                                            </div>

                                                                            <div style="position: relative; display: inline-block; width: 100%"  v-if="index == indexEditInfo">
                                                                                <input type="date" v-model="info.value"
                                                                                       max="{{ date('Y-m-d') }}"
                                                                                       v-on:blur="saveItemInfo(info)"
                                                                                       class="form-control birthday dateInput"
                                                                                       style="width:100%; padding-left: 40px; background-color: white">
                                                                                <i style="position: absolute; left: 8px; top: 10px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                                                            </div>
                                                                        </div>
                                                                        <div class="content-txt" v-if="info.type == 0 && info.id_setting == -5">

                                                                            <div v-if="index != indexEditInfo"  v-on:click="editItemInfo(index,info)" class="bx_edit_info text_ellip">
                                                                                @{{info.value}}
                                                                            </div>
                                                                            <input  v-if="index == indexEditInfo" class="form-control" type="number"
                                                                                    v-on:blur="saveItemInfo(info)"
                                                                                    v-model="info.value" style="height: 34px">
                                                                        </div>
                                                                        <div class="content-txt" v-if="info.type == 0 && info.id_setting == -6">
                                                                            <div v-if="index != indexEditInfo"  v-on:click="editItemInfo(index,info)" class="bx_edit_info text_ellip">
                                                                                @{{info.value }}
                                                                            </div>
                                                                            <select  v-if="index == indexEditInfo"  class="form-control my_class " v-model="info.value"
                                                                                     v-on:change="saveItemInfo(info)">
                                                                                <option value="">-</option>
                                                                                <option v-for="i in info.valueOption" :value="i">@{{ i }}</option>
                                                                            </select>

                                                                        </div>
                                                                        <div  class="content-txt"  v-if=" info.type == 1">
                                                                            <div v-if="info.type_data == 4">
                                                                                <div  style="position: relative" v-if="info.value != '' && info.value != null ">
                                                                                    <img
                                                                                          :id="'preview_image_info'+index"
                                                                                          :src="(info.value.startsWith('http') ? '' : '