.osm-color-primary {
  color: var(--osm-color-primary);
}

.osm-color-primary_2 {
  color: var(--osm-color-primary_2);
}

.osm-color-primary_3 {
  color: var(--osm-color-primary_3);
}

.osm-color-secondary {
  color: var(--osm-color-secondary);
}

.osm-color-secondary_2 {
  color: var(--osm-color-secondary_2);
}

.osm-color-orange {
  color: var(--osm-color-orange);
}

.osm-color-orange_2 {
  color: var(--osm-color-orange_2);
}

.osm-color-green {
  color: var(--osm-color-green);
}

.osm-color-green_2 {
  color: var(--osm-color-green_2);
}

.osm-color-blue {
  color: var(--osm-color-blue);
}

.osm-color-blue_2 {
  color: var(--osm-color-blue_2);
}

.osm-color-red {
  color: var(--osm-color-red);
}

.osm-color-red_2 {
  color: var(--osm-color-red_2);
}

.osm-color-yellow {
  color: var(--osm-color-yellow);
}

.osm-color-yellow_2 {
  color: var(--osm-color-yellow_2);
}

.osm-bg-color-primary {
  background-color: var(--osm-color-primary);
}

.osm-bg-color-primary_2 {
  background-color: var(--osm-color-primary_2);
}

.osm-bg-color-primary_3 {
  background-color: var(--osm-color-primary_3);
}

.osm-bg-color-secondary {
  background-color: var(--osm-color-secondary);
}

.osm-bg-color-secondary_2 {
  background-color: var(--osm-color-secondary_2);
}

.osm-bg-color-orange {
  background-color: var(--osm-color-orange);
}

.osm-bg-color-orange_2 {
  background-color: var(--osm-color-orange_2);
}

.osm-bg-color-green {
  background-color: var(--osm-color-green);
}

.osm-bg-color-green_2 {
  background-color: var(--osm-color-green_2);
}

.osm-bg-color-blue {
  background-color: var(--osm-color-blue);
}

.osm-bg-color-blue_2 {
  background-color: var(--osm-color-blue_2);
}

.osm-bg-color-red {
  background-color: var(--osm-color-red);
}

.osm-bg-color-red_2 {
  background-color: var(--osm-color-red_2);
}

.osm-bg-color-yellow {
  background-color: var(--osm-color-yellow);
}

.osm-bg-color-yellow_2 {
  background-color: var(--osm-color-yellow_2);
}



#tabs-tab_CHATS {
  overflow-y: hidden;
}

#chat-div_toolbar_bottom .tab-link-active {
  opacity: 1;
  color: var(--osm-color-green) !important;
  border-top: 2px solid var(--osm-color-green) !important;
}

#chat-div_toolbar_bottom .tab-link i {
  margin-top: 0.2em !important;
  font-size: 1.3em !important;
  margin-bottom: 0 !important;
}

#chat-div_toolbar_bottom .tab-link-active {
  opacity: 1;
  color: var(--osm-color-green) !important;
  border-top: 2px solid var(--osm-color-green) !important;
}

.tag-conv-unread {
  height: 1em !important;
  width: 1em !important;
  font-size: 0.6em;
  padding: 3px 5px 3px 5px;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  color: white;
}

.tag-conv-all {
  height: 0.8em !important;
  width: 0.8em !important;
  font-size: 0.5em;
  padding: 2px 3px 2px 3px;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  color: grey;
}

.tag-conv-unread.red {
  background-color: var(--osm-color-red) !important;
  color: white !important;
}


.oc-tabs {
  display: flex;
  padding: 0px 3px 0px 3px;
  height: 2em !important;
}

.oc-tab {
  flex: 1;
  padding: 3px 0;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  transition: background 0.3s;
  border-bottom: 2px solid lightgrey;
  opacity: 0.8;
}

.oc-tab.active {
  border-bottom: 3px solid var(--osm-color-green);
  color: var(--osm-color-green);
  font-weight: bold;
  opacity: 1;
}
.div_tab_CHAT_table {
  width: 100%;
  height: var(--vh-oc-conv);
  overflow-y:scroll;
}

.avatar-container {
  width: 50px;
  height: 50px;
  position: relative;
}

.avatar-container-md {
  width: 60px;
  height: 60px;
  position: relative;
}

.avatar {
  width: 95%;
  border-radius: 50%;
  border: 2px solid var(--osm-color-primary_2);
}

.avatar-status {
  display: inline-block;
  line-height: 1;
  border-radius: 50%;
  border: 2px solid white;
  background-color: grey;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
}

.avatar-status.true {
  background-color: var(--osm-color-green) ;
}

.avatar-channel {
  display: inline-block;
  line-height: 1;
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: -5px;
  margin-bottom: -5px;
  width: 20px;
  height: 20px;
}

.chat-contact-container,
.address.card.outline.icon,
.edit.outline.icon,
.plus.circle.icon,
.check.icon {
  cursor: pointer;
}

.chat-contact-container {
  text-align: left;
}

.msg-unread {
  display: inline-block;
  line-height: 1;
  border-radius: 50%;
  border: 2px solid white;
  background-color: grey;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 1px;
}

.msg-unread.true {
  width: 1.5em;
  height: 1.5em;
  background-color: var(--osm-color-red);
  display: flex;
  justify-content: center;
  align-items: center;
}
.msg-unread-text {
  color: #FFF;
  font-size: 0.8em;
}
.msg-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Change to n lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ui.compact.table {
  width: 100%;
}

table.dataTable {
  border-top: none !important;
  border-bottom: none !important;
}

table.dataTable.table td,
table.dataTable.table th {
  border-bottom: none !important;
}

table.dataTable.table>tbody>tr.selected>td {
  border-radius: 1em ;
}

.ui.compact.table>tbody>tr>td,
.ui.compact.table>tfoot>tr>td,
.ui.compact.table>tr>td {
  vertical-align: top;
  padding: 1em 0.5em 1em 0.5em;
}

.icon-channel {
  padding: 0.3em;
  height: 1.5em;
  width: 1.5em;
  border: 1px solid #FFF;
  border-radius: 50%;
}

.icon-channel-md {
  height: 1.7em;
  width: 1.7em;
}

#chat-filter .item-status {
  background-color: #FFF;
  padding: 0.5em 0.7em 0.5em 0.7em;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between
}
#chat-filter .item-status:hover {
  background-color: var(--osm-color-orange_2);
  padding: 0.5em 0.7em 0.5em 0.7em;
  border-radius: 0.5em;
  cursor: pointer;
}
#chat-filter .item-status.active {
  background-color: var(--osm-color-orange_2);
  color: var(--osm-color-orange);
  padding: 0.5em 0.7em 0.5em 0.7em;
  font-weight: bold;
  border-radius: 0.5em;
  cursor: pointer;
}

#chat-table thead th {
  display: none;
}

#chat-textarea_chat_input,
#chat-tags_usr {
  width: 75%;
  border: none;
  resize: none;
  height: 1.5em;
  overflow-y: scroll;
}

#chat-chat_input_warning_24hrs,
#chat-chat_input_warning_7days,
#chat-chat_input_warning_oth,
#chat-chat_input_warning {
  width: auto;
  text-align: center;
  margin-top: 0.5em;
  padding: 1em;
  font-size: 0.9em;
  display: none;
  margin: 0.2em 0.5em 0.2em 0.5em;
  border-radius: 0.5em;
}

#chat-chat_input_warning_oth {
  background-color: var(--osm-color-yellow_2);
}

#chat-chat_input_warning_24hrs,
#chat-chat_input_warning {
  background-color: var(--osm-color-blue_2);
}

#chat-chat_input_warning_7days {
  background-color: var(--osm-color-red_2);
}


#chat-tags_usr.disabled {
  background-color: #FFF !important;
}

#chat-textarea_chat_input {
  padding-left: 1em;
  color: var(--osm-color-blue);
}

#chat-div_input {
  width: 100%;
  top: 0;
}

#chat-div_input .ui.circular.button>.icon {
  font-size: 1.2em;
}

#chat-textarea_chat_input:focus-visible,
#chat-tags_usr:focus-visible {
  outline: none;
}

#chat-div_info .address.card.outline.icon:hover,
#chat-div_info .edit.outline.icon:hover,
#chat-div_info .check.icon:hover,
#chat-div_info .plus.circle.icon:hover {
  cursor: pointer;
  color: var(--osm-color-green);
}

#chat-textarea_chat_input {
  line-height: 2em;
}

#chat-filter .item-status,
#chat-filter .item-status.active {
  font-size: 0.8em !important;
}

.ochat-container {
  width: 95%;
  font-size: 0.9em;
  /* height: calc(92vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-safe-area-bottom)); */
  height: calc(92vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-toolbar-height) - var(--f7-safe-area-bottom));
  overflow-y: scroll;
  overflow-x: hidden;
  border-bottom: 1px solid var(--osm-color-green);
}

.ui.green.button,
.ui.green.buttons .button {
  background-color: transparent;
  color: var(--osm-color-green) !important;
  font-weight: 100;
  font-size: 1em;
}

.ui.button,
.ui.buttons .button {
  background-color: #FFF;
  color: var(--osm-color-main);
  font-weight: 100;
  font-size: 1em;
}

.osm-file_input_button span {
  font-size: 0.5em !important;
}

.oc-chat-action-tile {
  font-size: 1.5em;
  width: 25%;
  margin-bottom: 1em;
}

#chat-div_modal_template_preview,
#chat-div_modal_template_custom_wam ,
#chat-div_modal_saved_reply_preview {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: calc(var(--vh-oc-media-review) - 10vh);
}

#chat-modal_template_preview,
#chat-modal_saved_reply_preview,
#chat-modal_media_upload,
#chat-modal_media_show {
  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  background: transparent;
  width: 96%;
  height: auto;
  margin-left: 2%;
  margin-right: 2%;
}


#chat-modal_transfer,
#chat-modal_binding,
#chat-modal_cta_show_tags,
#chat-modal_cta_show_actions,
#chat-modal_saved_tags {
  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top) + 6vh);
  background: transparent;
  width: 96%;
  height: auto;
  margin-left: 2%;
  margin-right: 2%;
}

#chat-modal_media_upload,
#chat-modal_media_show {
  border-radius: 0.3em !important;

}

#chat-modal_saved_reply,
#chat-modal_saved_reply_preview,
#chat-modal_template,
#chat-modal_template_preview {

}

#chat-modal_saved_reply,
#chat-modal_template {
  height: auto !important;
}

#chat-table_template,
#chat-table_saved_reply {
  width: 95% !important;
  max-height: calc(var(--vh-oc-media-review) - 10vh);
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.row-oc-saved-reply {
  border-bottom:1px solid lightgrey;
  padding: 0.5em;
  border-radius: 1em;
  min-height: 10vh;
}

#chat-modal_saved_reply .sheet-modal-inner,
#chat-modal_template .sheet-modal-inner,
#chat-modal_saved_reply_preview .sheet-modal-inner,
#chat-modal_template_preview .sheet-modal-inner,
#chat-modal_media_upload .sheet-modal-inner,
#chat-modal_media_show .sheet-modal-inner,
#chat-modal_transfer .sheet-modal-inner,
#chat-modal_binding .sheet-modal-inner,
#chat-modal_cta_show_tags .sheet-modal-inner,
#chat-modal_cta_show_actions .sheet-modal-inner,
#chat-modal_saved_tags .sheet-modal-inner {
  border-radius: 1em;
  background: #FFF;
  height: 100%;
}

#chat-modal_media_upload .sheet-modal-inner,
#chat-modal_media_show .sheet-modal-inner {
  border-radius: 0.3em;
  background-color: transparent !important;
}

#chat-modal_saved_reply .sheet-modal-inner .block,
#chat-modal_template .sheet-modal-inner .block,
#chat-modal_saved_reply_preview .sheet-modal-inner .block,
#chat-modal_template_preview .sheet-modal-inner .block,
#chat-modal_media_upload .sheet-modal-inner .block,
#chat-modal_media_show .sheet-modal-inner .block,
#chat-modal_transfer .sheet-modal-inner .block,
#chat-modal_binding .sheet-modal-inner .block,
#chat-modal_cta_show_tags .sheet-modal-inner .block,
#chat-modal_cta_show_actions .sheet-modal-inner .block,
#chat-modal_saved_tags .sheet-modal-inner .block {
  margin: 0.2em;
}

#chat-modal_media_upload .sheet-modal-inner .block,
#chat-modal_media_show .sheet-modal-inner .block {
  margin: 0;
}

#chat-modal_saved_reply .toolbar-bottom,
#chat-modal_saved_reply_preview .toolbar-bottom,
#chat-modal_template .toolbar-bottom,
#chat-modal_template_preview .toolbar-bottom,
#chat-modal_media_upload .toolbar-bottom,
#chat-modal_media_show .toolbar-bottom,
#chat-modal_transfer .toolbar-bottom,
#chat-modal_binding .toolbar-bottom,
#chat-modal_cta_show_tags .toolbar-bottom,
#chat-modal_cta_show_actions .toolbar-bottom,
#chat-modal_saved_tags .toolbar-bottom{
  display: none;
}

#chat-modal_saved_reply .toolbar-top,
#chat-modal_saved_reply_preview .toolbar-top,
#chat-modal_template .toolbar-top,
#chat-modal_template_preview .toolbar-top,
#chat-modal_media_upload .toolbar-top,
#chat-modal_media_show .toolbar-top,
#chat-modal_transfer .toolbar-top,
#chat-modal_binding .toolbar-top,
#chat-modal_cta_show_tags .toolbar-top,
#chat-modal_cta_show_actions .toolbar-top,
#chat-modal_saved_tags .toolbar-top {
  display: none;
}

#chat-modal_saved_reply .toolbar,
#chat-modal_saved_reply_preview .toolbar,
#chat-modal_template .toolbar,
#chat-modal_template_preview .toolbar {
  display: none;
}

#chat-tags_usr {
  color: var(--osm-color-green) !important;
}

.info-row {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 5px;
  line-height: 2em;
}
.info-icon {
  width: 24px;
  text-align: center;
  margin-right: 5px;
  color: #555;
}
.info-text {
  padding: 0.2em 0;
  flex-grow: 1;
  word-break: break-word;
  text-align: left;
  font-size: 1.1em;
}
.info-text-0 {
  flex-grow: 1;
  word-break: break-word;
  text-align: left;
}

.info-edit {
  width: 24px;
  text-align: center;
  margin-right: 5px;
  color: #555;
}

.info-edit>i {
  font-size: 1.3em;
}

.ui.form textarea:not([rows]) {
  height: 3em;
  min-height: 5em;
  max-height: 10em;
}

.tag.primary {
  background-color: var(--osm-color-primary_2);
  padding: 0.3em 1em 0.3em 1em;
  border-radius: 1em;
  border: 1px solid var(--osm-color-primary);
  color: var(--osm-color-primary);
  margin: 0.2em;
}

.tag.green {
  background-color: var(--osm-color-green_2);
  padding: 0.3em 1em 0.3em 1em;
  border-radius: 1em;
  border: 1px solid var(--osm-color-green);
  color: var(--osm-color-green);
  margin: 0.2em;
}

.tag.red {
  background-color: var(--osm-color-red_2);
  padding: 0.3em 1em 0.3em 1em;
  border-radius: 1em;
  border: 1px solid var(--osm-color-red);
  color: var(--osm-color-red);
  margin: 0.2em;
}

.tag.blue {
  background-color: var(--osm-color-blue_2);
  padding: 0.3em 1em 0.3em 1em;
  border-radius: 1em;
  border: 1px solid var(--osm-color-blue);
  color: var(--osm-color-blue);
  margin: 0.2em;
}

.tag.EMPTY {
  border: 1px solid var(--osm-color-primary);
  color: var(--osm-color-primary);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.tag.SYS,
.tag.ADMIN {
  border: 1px solid var(--osm-color-primary);
  background-color: var(--osm-color-primary_2);
  color: var(--osm-color-primary);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.tag.BOT {
  border: 1px solid var(--osm-color-orange);
  background-color: var(--osm-color-orange_2);
  color: var(--osm-color-orange);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.tag.CSO {
  background-color: var(--osm-color-blue_2);
  border: 1px solid var(--osm-color-blue);
  color: var(--osm-color-blue);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.tag.WBA {
  background-color: var(--osm-color-red_2);
  border: 1px solid var(--osm-color-red);
  color: var(--osm-color-red);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.tag.MKT {
  background-color: var(--osm-color-yellow_2);
  border: 1px solid var(--osm-color-yellow);
  color: var(--osm-color-yellow);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.tag.OPS {
  background-color: var(--osm-color-green_2);
  border: 1px solid var(--osm-color-green);
  color: var(--osm-color-green);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.font.ADMIN {
  color: var(--osm-color-primary);
}

.font.CSO {
  color: var(--osm-color-blue);
}

.font.WBA {
  color: var(--osm-color-red);
}

.font.MKT {
  color: var(--osm-color-yellow);
}

.font.OPS {
  color: var(--osm-color-green);
}

.badge.primary {
  background-color: #FFF;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border: 1px solid var(--osm-color-primary);
  color: var(--osm-color-primary);
  margin: 0.2em;
}

.badge.store {
  background-color: #FFF;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid var(--osm-color-primary_2);
  color: var(--osm-color-primary);
  font-size: 0.9em;
  margin: 0.2em;
}

.badge.store-main {
  background-color: #E0DAC970;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid var(--osm-color-primary_2);
  color: var(--osm-color-primary);
  font-weight: bold;
  font-size: 0.9em;
  margin: 0.2em;
}

.badge.id {
  background-color: #FFF;
  border-bottom: 1px solid var(--osm-color-primary_2);
  padding-bottom: 0em !important;
  margin-bottom: 0.5em;
  border-radius: 0.2em;
  font-weight: bold;
  min-width: 150px !important;
  text-align: left;
  padding: 0.3em 0.5em 0.3em 0.5em;
}

.badge.green {
  background-color: var(--osm-color-green_2);
  border: 1px solid var(--osm-color-green);
  color: var(--osm-color-green);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.in-progress,
.badge.red {
  background-color: var(--osm-color-red_2);
  border: 1px solid var(--osm-color-red);
  color: var(--osm-color-red);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.new,
.badge.blue {
  background-color: var(--osm-color-blue_2);
  border: 1px solid var(--osm-color-blue);
  color: var(--osm-color-blue);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.closed,
.badge.grey {
  background-color: lightgrey;
  border: 1px solid grey;
  color: grey;
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.SYS,
.badge.ADMIN {
  background-color: var(--osm-color-primary_2);
  padding: 0.1em 0.3em 0.1em 0.3em;
  border: 1px solid var(--osm-color-primary);
  color: var(--osm-color-primary);
  font-size: 0.8em;
  min-width: 45px !important;
}

.badge.CSO {
  background-color: var(--osm-color-blue_2);
  border: 1px solid var(--osm-color-blue);
  color: var(--osm-color-blue);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.WBA {
  background-color: var(--osm-color-red_2);
  border: 1px solid var(--osm-color-red);
  color: var(--osm-color-red);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.MKT {
  background-color: var(--osm-color-yellow_2);
  border: 1px solid var(--osm-color-yellow);
  color: var(--osm-color-yellow);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.badge.OPS {
  background-color: var(--osm-color-green_2);
  border: 1px solid var(--osm-color-green);
  color: var(--osm-color-green);
  padding: 0.1em 0.5em 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 1em;
  margin: 0.2em;
}

.f7-action-button {
  font-weight: 400 !important;

}

.f7-action-button.color-orange {
  background-color: var(--osm-color-orange);
}

.f7-action-button.color-red {
  background-color: var(--osm-color-red);
}

.f7-action-button.color-blue {
  background-color: var(--osm-color-blue);
}

.f7-action-button.color-green {
  background-color: var(--osm-color-green);
}

.f7-action-button.color-null-green {
  font-size: 1em;
  background-color: transparent;
  color: var(--osm-color-green);
}

.f7-action-button.color-null-green >i {
  font-size: 1em;
}

.swal2-title {
  font-size: 0.7em !important;
}

.swal2-popup {
  width: 90vw !important;
  font-size: 0.9em !important;
  padding: 0.3em !important;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {

}

.swal2-html-container,
.swal2-actions {
  font-size: 0.6em !important;
  padding: 0.5em !important;
  margin: 0.3em !important;
}

.swal2-input {
  height: 1.8em !important;
  font-size: 0.6em !important;
  padding: 0.5em !important;
  margin: 0.5em 1em !important;
  align-items: center !important;
}

input[type=text] {
  border: 1px solid var(--osm-color-main) !important;
}

.swal2-textarea {
  height: cal(1.8em * 3) !important;
  font-size: 0.8em !important;
  padding: 0.5em !important;
  margin: 0.5em 1em !important;
}

.swal2-confirm, .swal2-deny, .swal2-cancel {
  font-size: 0.8em !important;
  width: 6em !important;
}

.swal2-html-container {
  text-align: left !important;
}

.swal2-actions {
  justify-content: flex-end;
}

.swal2-styled.swal2-confirm {
  background-color: var(--osm-color-green) !important;
}

.chat-tag-container .btn-tag-delete-wba,
.chat-tag-container .btn-tag-delete-mkt,
.chat-tag-container .btn-tag-delete-ops,
.chat-tag-container .btn-tag-delete-cso {
  cursor: pointer;
  color: lightgrey;
  font-size: 1.2em;
}

#chat-modal_binding .shiny-input-container:not(.shiny-input-container-inline),
#chat-modal_transfer .shiny-input-container:not(.shiny-input-container-inline) {
  width: 100%;
  font-size: 0.9em;
}

.omessage {

}

.omessage.sender {
  font-size: 12px;
}

.omessage-time {
  color: #aaa;
  width: 100%;
  font-size: 0.6rem;
  margin: 0 3px 0 3px;
  font-style: italic;
  margin-bottom: 1em !important;
}

.omessage.cus {
  text-align: left !important;
}

.omessage.usr {
  text-align: right !important;
}

.omessage.bot {
  text-align: center;
}

.omessage.sys {
  text-align: center;
}

.omessage.usr .bubble {
  background: #e7f3ff;
  border-radius: 10px;
  display: inline-block;
  padding: 10px 14px;
  text-align: left;
  min-width: 59% !important;
  max-width: 59% !important;
  word-break: break-word;
}

.omessage.usr .bubble-none {
  border-radius: 10px;
  display: inline-block;
  text-align: left;
  min-width: 59% !important;
  max-width: 59% !important;
}

.omessage.usr .bubble-none > div {
  border-radius: 10px ;
}

.omessage.usr .bubble-card {
  background: #e7f3ff;
  border-radius: 10px;
  display: inline-block;
  padding: 10px 14px;
  text-align: left;
  width: 65% !important;
}

.omessage.usr .bubble-error {
  background: var(--osm-color-red_2) ;
  border-radius: 10px;
  display: inline-block;
  padding: 10px 14px;
  min-width: 59% !important;
  max-width: 59% !important;
}

.omessage.cus .bubble {
  background: #f0f0f0;
  border-radius: 5px;
  display: inline-block;
  padding: 10px;
  text-align: left;
  min-width: 59% !important;
  max-width: 59% !important;
  word-break: break-word;
}

.omessage.cus .bubble-none {
  border-radius: 2px;
  display: inline-block;
  text-align: left;
  min-width: 59% !important;
  max-width: 59% !important;
}

.omessage.cus .bubble-none > div {
  border-radius: 10px;
}

.omessage.cus .bubble-error {
  background: var(--osm-color-red_2) ;
  border-radius: 10px;
  display: inline-block;
  padding: 10px 14px;
  min-width: 59% !important;
  max-width: 59% !important;
}

.omessage.bot .bubble {
  background: var(--osm-color-green_2) ;
  border-radius: 10px;
  display: inline-block;
  padding: 10px 14px;
  min-width: 59% !important;
  max-width: 59% !important;
}

.omessage.sys .bubble {
  background: transparent ;
  display: inline-block;
  padding: 10px 14px;
  min-width: 59% !important;
  max-width: 59% !important;
}

.modal_media_show_container {
  display: flex;
  width: 100% !important;
  justify-content: center;
  max-height: var(--vh-oc-media-review);
  overflow-y: scroll;
  border-radius: 1em;
}

.sheet-backdrop {
  background: rgba(0, 0, 0, .9);
}

.template-wam-footer {
  margin-top: 0.2em;
  color: grey;
  font-size: 0.9em;
}

.template-wam-btn {
  padding: 0.7em;
  text-align: center;
  color: var(--osm-color-blue) !important;
  border-top: 1px solid var(--osm-color-blue_2) !important;
}

.template-wam-btn a {
  color: var(--osm-color-blue) !important;
}

.reply-box {
  background: var(--osm-color-blue_2);
  width: 90% !important;
  padding: 3% !important;
  border-radius: 0.4em;
  border-left: 3px solid var(--osm-color-blue);
  align-items: center;
}

a {
  color: var(--osm-color-blue);
}

[id^=chat-template_wam_btn_var],
[id^=chat-platform_header_wam_media_url],
[id^=chat-platform_header_wam_text],
[id^=chat-template_wam_body_var_] {
  font-size: 1em;
  padding: 0em 1em !important;
  width: 95%;
  height: 2.5em !important;
  border: 1px solid var(--osm-color-green) !important;
  border-radius: 0.5em !important;
  color: var(--osm-color-green) !important;
}

#chat-modal_saved_tags .shiny-input-container:not(.shiny-input-container-inline) {
  width: 100%;
}