*{
  margin: 0;
  padding: 0;
}
#token-button{
  width: 4%;
}
.loader {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
  max-width: fit-content;
}
.country-modal .modal-body{
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.selection{
  position: fixed;
  padding: 20px;
  top: 0px;
  left: 0px;
  z-index: 10;
  background: white;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
table {
  margin-top: 130px;
  border: none;
  white-space: nowrap;
  border-collapse: separate;
  width: 100%;
  text-align: center;
  border-spacing: 0;
  border: 1px solid rgb(85, 83, 83);
}
thead{
  position: sticky;
  top: 110px;
    left: 0;
  z-index: 4;
}
table td, table th {
  border: 1px solid rgb(85, 83, 83);
}

td,th{
  padding: 10px;
  background-color: white;
}
.slno{
  position: sticky;
  left: 0;
}
/* .slno .checkbox_for_block{
  pad
  word-wrap: break-word;
} */
.ext{
  overflow: hidden;
  text-overflow: initial;
  white-space: initial;
  word-break: break-word;
  min-width: 200px;
}
.error{
  background-color: red;
}
.unAccepted{
  color:red;
}
.warning{
  background-color: #FF9800;
}
.success{
  background-color: rgb(2, 131, 2);
}
.error-updated{
  background-color: rgb(253, 69, 69);
}
.warning-updated{
  background-color: yellow;
}
.success-updated{
  background-color: rgb(1, 198, 1);
}
.success-gray{
  background-color: rgb(152, 152, 152);
}
.small{
  font-size: 15px;
}
.left-sticky{
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
}
.status-box{
  width: 50px;
}
.lm-box{
  width: 150px;
}
.em-box{
 width: 50px;
}
.location-box{
   max-width: 200px;
}
.ext-box{
  max-width: 200px;
}
td input{
  width: 100%;
}
.edit-lm{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.get-message{
  cursor: pointer;
}
.message-profile{
  font-weight: 600;
    font-size: 20px;
}
.message-item-user{
  font-weight: 600;
  font-size: 16px;
}
.message-item-timestamp{
  font-size: 13px;
}
.message-box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 10px;
  height: 100%;
}
.message-list{
  height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}
.message-list li{
  margin-bottom: 10px;
    width: 50%;
    background: #f3f3f3;
    border-radius: 7px;
    padding: 8px;
}
.message-content{
  word-break: break-word;
}
.message-content p{
  margin: 0;
}
.message-item-right{
  align-self: flex-end;
}
.message-item-center{
  align-self: center;
  opacity: 0.69;
}
.message-reply{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
}
.emojionearea-editor{
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.message-reply input{
  flex: 1;
}
.offcanvas-end{
  width: auto;
}
.offcanvas-header{
  border-bottom:1px solid grey;
  background: #f3f3f3;
}
.offcanvas-body{
  display: grid;
  grid-template-columns: 200px 400px;
  padding: 0;
}
.message-people-list{
  list-style: none;
  padding: 0;
  margin: 0;
  border-right: 1px solid grey;
  background: #f3f3f3;
  height: 80vh;
    overflow: auto;
}
.message-people-item{
  padding: 15px 8px;
  cursor: pointer;
}
.message-people-item:hover{
  background-color: #cfcdcd;
}
#right{
  display: none;
}
#url_short,#block_btn{
  display: none;
}
#checkbox_for_block{
  display: none;
}

input[type="checkbox"] {
	 position: relative;
	 width: 1.0em;
	 height: 1.0em;
	 color: #363839;
	 border: 1px solid #bdc1c6;
	 border-radius: 4px;
	 appearance: none;
	 outline: 0;
	 cursor: pointer;
	 transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
}
 input[type="checkbox"]::before {
	 position: absolute;
	 content: '';
	 display: block;
	 top: 1px;
	 left: 3px;
	 width: 8px;
	 height: 10px;
	 border-style: solid;
	 border-color: #fff;
	 border-width: 0 2px 2px 0;
	 transform: rotate(45deg);
	 opacity: 0;
}
 input[type="checkbox"]:checked {
	 color: #fff;
	 border-color: #06842c;
	 background: #06842c;
}
 input[type="checkbox"]:checked::before {
	 opacity: 1;
}
 input[type="checkbox"]:checked ~ label::before {
	 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 label {
	 position: relative;
	 cursor: pointer;
	 font-size: 1.0em;
	 /* padding: 0 0.25em 0; */
	 user-select: none;
}
 label::before {
	 position: absolute;
	 content: attr(data-content);
	 color: #9c9e9f;
	 clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
	 text-decoration: line-through;
	 text-decoration-thickness: 1px;
	 text-decoration-color: #363839;
	 transition: clip-path 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
 .captain{
  color: rgb(73, 73, 227);
  font-weight:500;
 }
 .highlight{
  color: rgb(73, 73, 227);
 }
.gray{
  color:gray
}
.update-status{
  position: relative;
}
.user-box{
  position: relative;
}
.note,.add-note{
  position: absolute;
  top: 50%;
  left: 105%;
    border: 1px solid black;
    box-shadow: 2px 2px 10px black;
    padding: 5px;
    background-color: white;
    z-index: 10;
}
.note{
  display: none;
}
.update-status:hover .note{
  display: block;
}
.note{
  background-color: white;
  min-height: 50px;
  min-width: 50px;
  white-space: initial;
}
.add-note{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.add-note button{
  margin: 10px 0px;
}
.note::before{
  content:"\A";
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent black transparent transparent;
    position: absolute;
    left: -15px;
}
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.hide{
  display: none ;
}
/* intern messaging dashboard css below */
.intern_messaging_container{
  display: none;
}
.filters {
  display: flex;
  padding: 15px 0;
  gap: 15px;
}
.message-dashboard-container {
  background-color: pink;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: minmax(40px, auto) 80vh;
  background-color: grey;
  gap: 2px;
  border: 2px solid grey;
}
.active-msg {
  background-color: lightgray;
}
.message-dashboard-heading {
  background-color: white;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 0 10px;
}
#unsent-count{
  color: red;
}
#unRepliedClient-count{
  color: red;
}
#connections {
  background-color: white;
  overflow: auto;
}

#connection-messages {
  background-color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.connection-messages-list {
  display: block;
  flex: 1;
  overflow-y: auto;
}

.connection-item .follower-item{
  padding: 10px;
  border-bottom: 1px solid grey;
  cursor: pointer;
}

.connection-item:hover .follower-item:hover{
  background-color: rgba(211, 211, 211, 0.507);
}
.intern-message {
  display: flex;
  margin-bottom: 9px;
}
.intern-message-box{
  padding: 12px;
  width: 240px;
  display: block;
  background: lightgray;
  word-break: break-all;
  position: relative;
}
.intern-message-left {
  display: flex;
justify-content: flex-end;
 
}
.intern-message-center{ 
  display: flex;
 justify-content: center;
 opacity: 0.7;
}
.intern-message-right {
  display: flex;
 justify-content: flex-start;
}

.intern-message-item-user {
  font-weight: 700;

}

.intern-message-item-timestamp {
  font-size: smaller;
  opacity: 0.7;
}

.intern-active-msg {
  background-color: lightgray;
}

.intern-three-dots-icon {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.intern-three-dots-icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  background-color: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.intern-three-dots-icon span:nth-child(2) {
  top: calc(50% - 6px);
}

.intern-three-dots-icon span:nth-child(3) {
  top: calc(50% + 6px);
}

.intern-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 5px;
}

.intern-dropdown-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.intern-dropdown-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.intern-dropdown-menu li:hover {
  background-color: #ddd;
}

.intern-dropdown-menu.show {
  display: block;
}
.intern-message-reply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
}

.intern-emojionearea-editor {
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.intern-message-reply input {
  flex: 1;
}
.messageContainer{
  display: flex;
  gap: 4px;
}