/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */

input[type="number"] {
  -moz-appearance: textfield;
}

.youtubeVideo iframe {
  width: 100%;
}

/**********************************
******** AvenirLTPPro Font ***********
**********************************/

@font-face {
  font-family: "Avenir LT Pro 65";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-BlackOblique.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-BlackOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BlackOblique.woff2")
      format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BlackOblique.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BlackOblique.ttf")
      format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BlackOblique.svg#AvenirLTPro-BlackOblique")
      format("svg");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Avenir-Black";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Black.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Black.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Black.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Black.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Black.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Black.svg#AvenirLTPro-Black")
      format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Book.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Book.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Book.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Book.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Book.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Book.svg#AvenirLTPro-Book")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro 55 Roman";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-HeavyOblique.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-HeavyOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-HeavyOblique.woff2")
      format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-HeavyOblique.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-HeavyOblique.ttf")
      format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-HeavyOblique.svg#AvenirLTPro-HeavyOblique")
      format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro 45 Book";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-BookOblique.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-BookOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BookOblique.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BookOblique.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BookOblique.ttf")
      format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-BookOblique.svg#AvenirLTPro-BookOblique")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AvenirLTStd-Heavy";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Heavy.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Heavy.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Heavy.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Heavy.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Heavy.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Heavy.svg#AvenirLTPro-Heavy")
      format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Medium.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Medium.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Medium.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Medium.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Medium.svg#AvenirLTPro-Medium")
      format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Light.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Light.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Light.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Light.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Light.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Light.svg#AvenirLTPro-Light")
      format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AvenirLTStd-Roman";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Roman.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Roman.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Roman.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Roman.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Roman.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Roman.svg#AvenirLTPro-Roman")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro 55 Roman";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Oblique.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-Oblique.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Oblique.woff2") format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Oblique.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Oblique.ttf") format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-Oblique.svg#AvenirLTPro-Oblique")
      format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro 65";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-MediumOblique.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-MediumOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-MediumOblique.woff2")
      format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-MediumOblique.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-MediumOblique.ttf")
      format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-MediumOblique.svg#AvenirLTPro-MediumOblique")
      format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir LT Pro 35";
  src: url("../../fonts/avenirLtPro/AvenirLTPro-LightOblique.eot");
  src: url("../../fonts/avenirLtPro/AvenirLTPro-LightOblique.eot?#iefix")
      format("embedded-opentype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-LightOblique.woff2")
      format("woff2"),
    url("../../fonts/avenirLtPro/AvenirLTPro-LightOblique.woff") format("woff"),
    url("../../fonts/avenirLtPro/AvenirLTPro-LightOblique.ttf")
      format("truetype"),
    url("../../fonts/avenirLtPro/AvenirLTPro-LightOblique.svg#AvenirLTPro-LightOblique")
      format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/**********************************
******** Custom Classes ***********
**********************************/

button,
input,
optgroup,
select,
textarea {
  font-family: AvenirLTStd-Roman !important;
}

b,
strong {
  font-weight: bolder !important;
  color: black;
}

small {
  color: black;
}

.p32 {
  padding: 32px;
}

.px32 {
  padding-left: 32px;
  padding-right: 32px;
}

.p10 {
  padding: 10px;
}

.px10 {
  padding-left: 10px;
  padding-right: 10px;
}

.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.p16 {
  padding: 16px;
}

.px16 {
  padding-left: 16px;
  padding-right: 16px;
}

.py16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pt16 {
  padding-top: 16px;
}

.pb16 {
  padding-bottom: 16px;
}

.pb8 {
  padding-bottom: 8px;
}

.pt8 {
  padding-top: 8px;
}

.p5 {
  padding: 5px;
}

.px5 {
  padding-left: 5px;
  padding-right: 5px;
}

.py5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pl5 {
  padding-left: 5px;
}

.pr5 {
  padding-right: 5px;
}

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

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

.my0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.radius-20 {
  border-radius: 20px !important;
}

/**********************************
******** Custom Sonstants ***********
**********************************/

body {
  --light-gray: #f8f8f8;
  --blue: #024ea3;
  --basic-black: #111;
  --border-color-gray: #d4d4d4;
  --border-light-gray: #888888;
  --brand-bg-color: rgba(12, 80, 161, 0.1);
  --brand-blue-color: #0c50a1;
  --light-text-gray: #636363;
  --brand-bg-color-red: rgba(237, 33, 46, 0.1);
  --brand-red: #ed212e;
  --status-warning: #f2ae43;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: AvenirLTStd-Heavy !important;
  color: #111111 !important;
}

html,
body,
p,
span {
  font-family: AvenirLTStd-Roman;
}

.titleText {
  font-family: AvenirLTStd-Heavy;
  color: var(--basic-black);
  font-size: 14px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
}

.para,
.para p {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  font-family: AvenirLTStd-Roman;
  color: var(--basic-black);
}

.para a {
  font-size: 15px;
  line-height: 1.33;
  color: var(--brand-blue-color);
}

.floatRight {
  float: right;
}

/********************* web Chat screen ******************/

.wCoptionicons span img {
  cursor: pointer;
}

.wCContactLetter {
  background-color: var(--light-gray);
  border-radius: 100px;
  color: var(--blue);
  font-family: "Avenir-Black" !important;
  font-size: 15px;
  font-weight: 900;
  width: 40px !important;
  height: 40px;
  display: inline-block;
  text-align: center;
  padding: 10px 8px;
}

.chat-header {
  background-color: var(--light-gray);
  border-bottom: 1px solid var(--border-color-gray) !important;
}

.chat-area {
  background-color: var(--light-gray) !important;
  background-image: unset !important;
}

.wCContactName {
  color: var(--basic-black);
  font-size: 14px;
  font-weight: 900;
  font-family: AvenirLTStd-Heavy;
}

.wCContactLstText {
  font-size: 16px;
  font-weight: normal;
  font-family: AvenirLTStd-Roman;
  color: var(--light-text-gray);
}

.wCContactListItem {
  display: flex;
  border-bottom: 1px solid var(--border-color-gray);
}

.wCContactsListWrp .wCContactListItem .wCContactAvatar {
  margin-left: 15px;
}

.chat-application .app-chat .chat-content .sidebar {
  width: 400px !important;
}

.wCContactLsTextTime {
}

.wCContactSideBarWrp {
  /* height: 100vh; */
  overflow-y: auto;
}

.wCContactAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  overflow: hidden;
}

.chat-input {
  flex-wrap: wrap;
}

.fb-reply-modal-chat {
  background-color: white;
  border: 1.5px solid var(--brand-blue-color);
  border-radius: 4px;
  margin: auto !important;
}

.newTextOptions {
  width: 100%;
  padding: 12px 0px 6px 5px;
  border-top: 1px dashed var(--border-light-gray);
  margin: auto !important;
  margin-top: 10px;
}

.nTrightSideOption {
  text-align: right;
}

.newTextOptions .send {
  padding: unset !important;
}

.nTleftSideOptions img {
  cursor: pointer;
}

.chat-footer {
  border: 1px solid var(--border-color-gray);
  overflow: hidden;
  margin-top: 60px;
}

.chat-content-area {
  background-color: var(--light-gray);
}

.wbTypeText {
  height: 120px !important;
  padding: 10px !important;
  margin-right: 0px !important;
  background-color: #fff !important;
  color: var(--basic-black) !important;
  border: none !important;
}

.wbTypeText::placeholder {
  color: var(--basic-black) !important;
}

.chatsTextWrap {
  height: 100%;
  overflow-y: auto;
}

.chat-footer {
  border-color: var(--border-color-gray);
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
}

.chat-footer .chat-input .send {
  height: 25px !important;
}

.activeChat {
  background-color: var(--brand-bg-color);
}

.wCmyText .chat-text p {
  background-color: var(--brand-bg-color) !important;
}

body
  .chat-application
  .app-chat
  .chat-content
  .chat-content-area
  .chat-area
  .chats
  .chat.chat-right
  .chat-body
  .chat-text:first-child::before {
  /* background-color: var( --brand-bg-color) !important; */
  border-top-color: var(--brand-bg-color) !important;
  border-right-color: var(--brand-bg-color) !important;
  margin-top: 5px !important;
  box-shadow: unset !important;
}

.chat-application .app-chat .chat-content .wCmyText .chat-body .chat-text p,
.chat-application
  .app-chat
  .chat-content
  .chat-content-area
  .chat-area
  .chats
  .chat
  .chat-body
  .chat-text
  p {
  color: var(--basic-black) !important;
  padding: 14px 16px !important;
  box-shadow: unset !important;
  font-size: 15px;
  line-height: 1.33;
  border-radius: 8px !important;
}

.chat-application
  .app-chat
  .chat-content
  .chat-content-area
  .chat-area
  .chats
  .chat
  .chat-body
  .chat-text:first-child::before {
  margin-top: 3px !important;
}

.chat-application
  .app-chat
  .chat-content
  .chat-content-area
  .chat-area
  .chats
  .chat
  .chat-body
  .chat-text
  p {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

.chats .chat {
  padding-bottom: 15px;
}

.chat {
  position: relative;
}

.myTextTime {
  position: absolute;
  bottom: -1px;
  right: 65px;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.31;
  letter-spacing: normal;
  color: var(--light-text-gray);
}

.textTime {
  position: absolute;
  bottom: 0px;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.31;
  letter-spacing: normal;
  color: var(--light-text-gray);
}

.chat-area {
  overflow: auto;
}

.wCContactListItem:hover {
  background-color: #e6edf5;
}

/*** Post Comment screen Start ***/

.leftBlockWrap {
  background-color: #fff;
  min-height: 100vh !important;
  /* max-height: max-content; */
  position: relative;
  /* height: calc(100vh - 20px); */
  overflow: auto;
}

.pCContactImgs {
  position: relative;
  width: 100px !important;
}

.pCContactImgs .sendonImg {
  position: absolute;
  right: 15px;
  top: 1px;
}

.pCContentWrp {
  overflow-y: auto;
  padding-left: 18px;
  padding-right: 5px;
}

.postCommentsWrap .pCContactImgs {
  margin-left: 0px !important;
  /* margin-right: 10px; */
}

.pCPost {
  padding: 16px;
  background-color: #fff;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  padding-bottom: 0px;
}

.postTime {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.31;
  letter-spacing: normal;
  color: var(--light-text-gray);
}

.pCPost .postTitle {
  font-size: 14px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  margin-top: 0px;
  margin-bottom: 0px;
  max-width: 90%;
}

.social-post-icon {
  width: 35px;
  border-radius: 50%;
  height: 35px;
  overflow: hidden;
}

.pCPost p {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  margin-top: 5px;
  margin-bottom: 5px;
}

.postImages img {
  width: 100%;
}

.postImages .postImage {
  /* padding: 10px 1px 10px 0px !important; */
}

.postTags span {
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: var(--brand-blue-color);
}

.postTextWrp p a {
  color: var(--brand-blue-color);
}

.postTags {
  padding-bottom: 10px;
}

.postImages .postImage:first-child {
  padding-right: 1px;
  padding-left: 0px;
}

.postImages .postImage:nth-child(2) {
  padding-left: 0px;
  padding-right: 0px;
}

.postComments {
  text-align: right;
}

.userReaction {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  font-size: 2px 0px;
}

.postLikes {
  color: var(--brand-blue-color);
}

.ytPostLikeMargin {
  margin-left: 71px !important;
}

.postFooter .postOptions span {
  padding-right: 20px;
  cursor: pointer;
}

.postFooter .postOptions .pFMoreOptions {
  float: right;
  padding-right: 0px;
}

.postOptions {
  border-top: 1px dashed;
  clear: both;
  padding: 10px 15px 6px 15px;
}

.facebookpostOptions {
  padding: 8px 8px 4px 8px;
}

.userReaction {
  padding: 7px 0px;
  display: flex;
}

.postCommentsWrap {
  /* margin-top: 25px; */
}

.postComment {
  background-color: #fff;
  padding: 12px 12px 6px 5px;
  border-radius: 8px;
  border: solid 1px var(--brand-blue-color);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
}

.facebookpostComment {
  border: none;
  position: relative;
  /* padding: 12px 12px 6px 10px; */
  padding: 0px;
}

.youtubepostComment {
  border: none;
  padding: 12px 12px 6px 10px;
}

/* .postCommentsWrap {
    margin-top: 20px;
} */

.avatarComment img {
  width: 35px;
  border-radius: 50%;
  height: 35px;
  overflow: hidden;
}

.postComment .row {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0px 0px 10px;
}

.postComment .avatarComment {
  width: 8%;
}

.postCommentBody {
  width: 88%;
  padding-bottom: 5px;
}

.inline-back-button {
  display: inline-flex;
  align-items: center;
  width: min-content;
}

.postCommentBody .userReaction {
  padding-top: 20px;
  padding-bottom: 0px;
}

.postComment .postCommentTime {
  text-align: right;
  position: absolute;
  font-size: 13px;
  right: 15px;
}

.postCommentTitle {
  padding-bottom: 5px;
  max-width: 90%;
}

.postCommentTitle a {
  text-decoration: none;
  color: var(--basic-black);
}

.postCommnetFooter span {
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
}

.facebookCommnetFooter span {
  padding-left: 0px;
  padding-right: 3px;
  cursor: pointer;
}

.postCommnetFooter .postOptions {
  padding: 10px 0px 0px 0px;
}

.pFMoreOptions {
  float: right;
  padding-right: 0px !important;
}

/* .chat-footer {
    position: absolute;
    bottom: 0px;
    width: 96%;
} */

.userProfileImg img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
}

.pCUserName {
  font-family: AvenirLTStd-Heavy;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: normal;
  color: var(--brand-blue-color);
}

.userInfoWrap {
  text-align: center;
}

.userIntractionWrap .count {
  display: block;
  /* text-align: center; */
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: normal;
  font-family: AvenirLTStd-Heavy;
  color: var(--basic-black);
}

.leftMostBlockWrap {
  background-color: #fff;
  padding-top: 32px !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  min-height: 100vh !important;
  /* max-height: max-content; */
  /* height: calc(100vh - 14px); */
  position: relative;
}

.rightBlockChat {
  height: 100vh !important;
  position: relative;
}

.message-box {
  width: 90%;
  background-color: #fff;
  min-height: 40px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.message-img-ct {
  margin: 10px 0px;
}

.chat-img {
  text-align: center;
}

.rec-message-ct .message-box {
  float: left;
}

.image-chat {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
}

.send-message-ct .message-box {
  float: right;
  text-align: right;
}

.chat-texts-container {
  max-height: 100vh;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}

.chatSection {
  display: block;
  margin-top: 8px;
}

.chat-custom {
  position: absolute;
  width: 95.5%;
  bottom: 10px;
  margin-top: 20px;
}

.righttBlockWrap.col.m6 {
  height: calc(100vh - 20px);
  /* height: calc(114vh - 20px); */
  overflow: auto;
}

.userIntractionWrap {
  text-align: center;
  border-top: 1px solid var(--border-color-gray);
  margin-top: 8px;
  padding: 16px 0px;
  padding-left: 5px;
  padding-right: 13px;
}

.userContactInfo {
  border-top: 1px solid var(--border-color-gray);
  padding: 10px 15px 10px 15px;
}

.userLeftFilters {
  border-top: 1px solid var(--border-color-gray);
  padding: 22px 16px 22px 16px;
}

.userContactInfo .text {
  padding-left: 10px;
  position: relative;
  top: -8px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--light-text-gray);
}

.userFilterItem .filterOpText {
  font-family: AvenirLTStd-Heavy;
  color: var(--brand-blue-color);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.29;
  letter-spacing: normal;
  position: relative;
  padding-left: 10px;
  top: -8px;
}

.userFilterItem .count {
  font-family: AvenirLTStd-Heavy;
  color: var(--brand-blue-color);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.29;
  position: relative;
  top: 6px;
}

.userFilterItem {
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.userFilterItem:hover {
  background-color: var(--brand-bg-color);
}

.userLeftFilters .activeOption {
  background-color: var(--brand-bg-color);
}

.userMobileNumber,
.userMobileNumber {
  padding: 8px 0px;
}

.userActionButtons {
  margin-top: 52px !important;
  /* margin-bottom: 14px !important; */
  /* text-align: center; */
  width: 100%;
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0px 12px;
  /* padding-left: 10px; */
}

.userActionButtons .userWarnBtn {
  display: inline-block;
  /* padding-right: 12px; */
}

.userActionButtons .userWarnBtn a {
  background-color: #f2ae43;
  box-shadow: unset;
  padding: 10px 45px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.userActionButtons .userBanBtn {
  display: inline-block;
}

.userActionButtons .userBanBtn a {
  background-color: #ed212e;
  box-shadow: unset;
  padding: 10px 48px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.editUserCInfo {
  cursor: pointer;
}

.wCContactInfo {
  padding-left: 2px !important;
  padding-right: 0px !important;
}

.wCContactLsTextTime {
  margin-right: 5px;
}

.postCommentsWrap .chat-footer {
  border: 1px solid var(--brand-blue-color);
  border-radius: 4px;
}

textarea.materialize-textarea:focus:not([readonly]),
textarea.materialize-textarea {
  /* border-bottom: none; */
  box-shadow: unset;
}

.wCStatusTag {
  background-color: var(--brand-bg-color-red);
  width: max-content;
  padding: 2px 12px;
  border-radius: 16px;
  font-size: 15px;
  color: var(--brand-red);
  margin-top: 10px;
}

/***** Channel Posts Screen Start ****/

.channelPostContent {
  /* display: flex;
    flex-wrap: wrap; */
}

.cPostItem {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  margin-top: 10px;
  margin-bottom: 10px;
  width: 22%;
  margin-left: 16px;
  margin-right: 16px;
  height: max-content;
}

.cPostItem .postImage img {
  width: 100%;
}

.postHeader .postTimeText {
  font-size: 13px;
  color: var(--light-text-gray);
  display: block;
}

.postActions {
  text-align: center;
}

.cPostItem .postActions .text {
  position: relative;
  top: -6px;
}

.postActions .icon {
  cursor: pointer;
}

.postActions .text {
  font-size: 13px;
  color: var(--brand-blue-color);
}

.cPostItem .postBody {
  padding: 2px 16px 16px 16px;
}

.cPostItem .postBody .postContent p {
  margin-top: 0px;
}

.cPostItem .postHeader {
  padding: 16px 16px 5px 16px;
}

.cPostItem .postFooter {
  border-top: 1px dashed;
  padding-top: 12px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 8px;
}

.postOptionsIcon img {
  cursor: pointer;
}

.channelPostContent {
  height: calc(100vh) !important;
  /* height: calc(100vh - 100px) !important; */
  overflow-y: auto;
  padding-bottom: 100px;
}

.socialPlateFormWrp {
  background-color: #fff;
  padding: 30px 15px 30px 15px;
}

.socialAppItem .icon {
  position: relative;
  top: 3px;
}

.socialAppItem .text {
  font-size: 14px;
  font-weight: 900;
  color: var(--brand-blue-color);
  font-family: AvenirLTStd-Heavy;
  position: relative;
  top: -15px;
  padding-left: 5px;
}

.socialAppItem .count {
  color: var(--brand-blue-color);
  font-family: AvenirLTStd-Heavy;
  text-align: right;
  float: right;
  position: relative;
  top: 12px;
  font-size: 14px;
  font-weight: 900;
}

.socialAppItem {
  padding: 4px 12px 4px 4px;
  margin-bottom: 4px;
  margin-top: 4px;
  border-radius: 24px;
}

.socialAppItem:hover {
  background-color: var(--brand-bg-color);
}

.socialPlateFormWrp .activeApp {
  background-color: var(--brand-bg-color);
}

.socialPlateFormWrp {
  background-color: #fff;
  padding: 30px 15px 30px 15px;
  /* height: calc(114vh - 78px); */
  max-height: max-content;
  height: calc(100vh - 78px);
}

.gutter-sizer {
  width: 4%;
}

.grid-sizer,
.grid-item {
  width: 22%;
}

.chat-texts-container::-webkit-scrollbar {
  width: 10px;
}

/* Track */

.chat-texts-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */

.chat-texts-container::-webkit-scrollbar-thumb {
  background: #d8d8d8;
}

/* Handle on hover */

.chat-texts-container::-webkit-scrollbar-thumb:hover {
  background: #636363;
}

div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  /* top: 200% !important; */
  left: 50% !important;
  width: 200px !important;
  height: 100px !important;
  margin-left: -100px !important;
  margin-top: -26px !important;
  text-align: center;
  padding: 1em 0;
}

.display-flex-custom {
  display: flex;
}

#fb_reply_modal {
  top: 0 !important;
  height: 100%;
  left: auto;
  max-height: 100% !important;
  background-color: #f8f8f8 !important;
  width: 45%;
}

#social_customer_profile {
  top: 0 !important;
  height: 100%;
  left: auto;
  background-color: #f8f8f8 !important;
  max-height: 100% !important;
  width: 75%;
}

#social_customer_profile .model-content {
  height: 100% !important;
}

#fb_chat_reply_modal {
  top: 0 !important;
  height: 100%;
  left: auto;
  max-height: 100% !important;
  background-color: #f8f8f8 !important;
  width: 45%;
}

#fb_tags_modal {
  top: 0 !important;
  height: 100%;
  left: auto;
  background-color: #f8f8f8 !important;
  max-height: 100% !important;
  width: 45%;
}

#fb_mail_modal {
  top: 0 !important;
  height: 100%;
  left: auto;
  background-color: #f8f8f8 !important;
  max-height: 100% !important;
  width: 45%;
}

#fb_user_chat_modal {
  top: 0 !important;
  height: 100%;
  left: auto;
  background-color: #f8f8f8 !important;
  max-height: 100% !important;
  width: 85%;
}

#fb_user_chat_modal .modal-content {
  padding: 0px;
}

#yt_reply_modal {
  top: 0 !important;
  height: 100%;
  left: auto;
  max-height: 100% !important;
  background-color: #f8f8f8 !important;
  width: 45%;
}

.iconsLayout {
  width: 17px;
  height: 17px;
  margin: 0px 5px 0px 0;
  object-fit: contain;
}

/* .custom-tabs .indicator {
    display: none !important;
} 

.custom-tabs li a.active {
    
    transition: all 1000ms ease-in-out; 

    border-bottom: 2.7px solid #0c50a1;
} */

/* Tags Popup in Social part of React & Order Description */

.tags-category-popup {
  display: flex;
  flex-wrap: wrap;
  border-bottom: none !important;
  height: auto;
}

.tags-category-popup .tab a {
  border-bottom: 1px solid #d4d4d4;
}

.tags-categories {
  background-color: transparent;
  border-bottom: 1px solid #d4d4d4;
}

@media screen and (min-width: 1701px) and (max-width: 1800px) {
  .cPostItem {
    width: 30%;
  }

  .userActionButtons .userBanBtn a,
  .userActionButtons .userWarnBtn a {
    padding: 10px 60px !important;
  }
}

@media screen and (min-width: 1501px) and (max-width: 1700px) {
  .cPostItem {
    width: 28%;
  }
}

@media screen and (min-width: 1301px) and (max-width: 1500px) {
  .cPostItem {
    width: 40%;
  }
}

@media screen and (min-width: 1101px) and (max-width: 1300px) {
  .cPostItem {
    width: 36%;
  }
}

@media screen and (max-width: 1600px) {
  .postTextWrp {
    padding-left: 16px !important;
  }

  .postCommentBody {
    padding-left: 25px;
  }
}

@media screen and (max-width: 1600px) {
  .postTextWrp {
    padding-left: 16px !important;
  }

  .postCommentBody {
    padding-left: 25px;
  }

  .userActionButtons .userBanBtn a,
  .userActionButtons .userWarnBtn a {
    padding: 10px 42px !important;
  }

  .userActionButtons {
    position: relative;
  }

  .leftMostBlockWrap {
    height: 113.5vh !important;
  }

  .leftBlockWrap {
    height: 113.5vh !important;
  }

  .rightBlockChat {
    height: 113.5vh !important;
  }

  .chat-texts-container {
    max-height: 100vh;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 1400px) {
  .leftMostBlockWrap,
  .righttBlockWrap.col.m6 {
    height: unset !important;
  }

  .leftBlockWrap {
    height: 127vh !important;
  }

  .rightBlockChat {
    height: 127vh !important;
  }

  .chat-texts-container {
    max-height: 100vh;
    max-height: calc(100vh - 22px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.paginate_button:hover {
  background: #024ea3 !important;
  border: none !important;
}

.paginate_button:hover a {
  color: white !important;
  background: #024ea3 !important;
  border: none !important;
  border-radius: 4px;
}

.searchbarModal {
  max-width: 592px;
  /* height: 382px; */
  /* margin: 19px 0 0; */
  /* padding: 16px 0 31px; */
  border-radius: 8px;
  background-color: white;
}

.searchbarModal .modal-header {
  border-bottom: 1px solid #d4d4d4;
  background-color: white;
  color: #636363;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px;
  padding: 15px;
}

.searchbarModal .modal-header a {
  display: contents;
}

.search-modal-content {
  padding: 10px 20px !important;
}

.search-modal-content p {
  line-height: 50px;
}

.search-modal-content p label span {
  color: #111111;
}

[type="radio"].green + span:before,
[type="radio"].green + span:after {
  width: 20px;
  height: 20px;
}

[type="radio"].green:not(:checked) + span,
[type="radio"].green:checked + span {
  line-height: 30px;
}

[type="radio"].green:checked + span:after {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}

[type="radio"].green:not(:checked) + span:before,
[type="radio"].green:not(:checked) + span:after {
  border: 1px solid #d4d4d4;
}

[type="radio"].green:checked + span:after,
[type="radio"].green:checked + span:after {
  background-color: #58b957;
}

[type="radio"].green:checked + span:after,
[type="radio"].green:checked + span:before,
[type="radio"].green:checked + span:after {
  border: 1px solid #d4d4d4;
}

.searchbarModal {
  left: 7px;
}

.white-box-sm-height {
  height: 230px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dropbtn {
  background-color: #04aa6d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999999;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.old-announcement {
  position: relative;
}

.old-announcement .text {
  width: 75%;
  margin-left: 40px;
}

.old-announcement svg {
  float: left;
}

.old-announcement .date-right {
  position: absolute;
  top: 0;
  right: 0;
}

.ann-padding {
  padding-left: 30px !important;
}

.ann-padding .tabs {
  overflow: hidden;
}

/*****************
ATIYAB CUSTOM CSS
********************************************************************************************/

.sub-header {
  display: flex;
  align-items: center;
  padding: 4px 20px 4px 10px;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
}

.custom-row {
  margin: 0 -15px;
}

.body-container {
  padding: 30px;
}

.white-box-lg {
  padding: 32px;
  border-radius: 8px;
  background-color: #fff;
}

.white-box-sm {
  padding: 15px;
  border-radius: 4px;
  background-color: #fff;
}

.radius-8 {
  border-radius: 8px;
}

.radius-50 {
  border-radius: 50px;
}

.box-shadow {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.form-control-box {
  padding: 0 15px;
  position: relative;
  min-height: 34px;
  display: flex;
  align-items: center;
}

.form-control-box .text {
  color: #0c50a1;
  font-size: 14px;
  display: inline-flex;
  flex: 1;
  white-space: nowrap;
}

.form-control-box .right-icon {
  fill: #636363;
}

.form-control-box .form-control {
  font-size: 14px !important;
  color: #111;
  height: 34px !important;
}

.form-control-box .form-control::placeholder {
  color: #111;
}

.border-control-box {
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  min-height: 40px;
}

.border-control-box svg {
  min-width: 24px;
}

.main-title {
  font-size: 24px;
  margin: 0 0 15px;
}

.fw-600 {
  font-family: AvenirLTStd-Heavy;
}

.fw-300 {
  font-family: AvenirLTStd-Roman !important;
}

.p-20 {
  padding: 20px;
}

.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs-13 {
  font-size: 13px !important;
}

.fs14 {
  font-size: 14px !important;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px !important;
}

.btn-warning {
  background-color: #f2ae43;
}

.btn-warning:hover {
  background-color: #db9e3c;
}

.btn-danger {
  background-color: #ed212e;
}

.btn-danger:hover {
  background-color: #ce1a26;
}

[type="radio"] + span:before,
[type="radio"] + span:after {
  width: 24px;
  height: 24px;
}

[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
  border: 1px solid #d4d4d4;
  margin: 0;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: 1px solid #104ea3;
  margin: 0;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: #104ea3;
  border: 0;
}

[type="radio"].with-gap:checked + span:after {
  transform: scale(0.67);
}

.custom-dropdown {
  min-width: 200px;
  top: 190px !important;
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.custom-dropdown li > a {
  display: flex;
  align-items: center;
}

.custom-dropdown li > a svg {
  margin: 0 14px 0 0;
}

.select-dropdown.custom-dropdown li > a {
  color: #0c50a1;
  border-bottom: 1px solid transparent;
}

.select-dropdown.custom-dropdown li > a:hover {
  background-color: #e6edf5;
  border-color: #fff;
}

.select-dropdown.custom-dropdown li.selected > a {
  background-color: #e6edf5;
  border-color: #fff;
}

.label {
  display: inline-flex;
  padding: 4px 6px;
  font-weight: 300;
  line-height: normal;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 50px;
  min-width: 80px;
  justify-content: center;
}

.label.label-blue {
  background-color: #0c50a1;
}

.label.label-orange {
  background-color: #f2ae43;
}

.label.label-green {
  background-color: #58b957;
}

.form-control-white {
  background-color: #fff !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px !important;
  padding: 0 15px !important;
}

.search-bar {
  max-width: 592px;
  /* margin: auto; */
  min-width: 300px;
  float: right;
}

.search-bar .searchbar-flex {
  display: flex;
  align-items: center;
}

.search-bar .input-field {
  position: relative;
  flex: 1;
  z-index: 1003;
}

.search-bar .input-field input {
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
  height: 48px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.search-bar .input-field input::placeholder {
  color: #636363;
}

.search-bar .input-field .icon {
  position: absolute;
  top: 20px;
  right: 15px;
  fill: #636363;
  background-color: #f8f8f8;
  cursor: pointer;
}

.search-bar .btn {
  color: #0c50a1;
  padding: 14px 16px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: none;
  line-height: normal;
  font-size: 14px;
  height: 48px;
  margin: 0 0 0 10px;
}

.search-modal {
  top: 10px !important;
  max-width: 582px;
  background-color: transparent;
  box-shadow: none;
}

.search-modal .form-control-box {
  border: 1px solid #0c50a1;
}

.search-modal .form-control {
  height: 50px !important;
}

.search-modal .form-control:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.search-modal .modal-header {
  margin: 0 -15px;
  padding: 0 15px 15px;
  background-color: transparent;
}

.search-modal .modal-header h6 {
  margin: 0;
  color: #636363 !important;
  line-height: normal;
}

.search-modal .radio-form {
  padding: 15px 15px 0;
}

.search-modal .radio-form p {
  margin-bottom: 20px;
}

.search-modal .radio-form label {
  color: #111;
  font-size: 16px;
}

.navbar-list li.icon {
  display: flex;
  align-items: center;
  height: 64px;
  line-height: normal;
  margin: 0 0 0 15px;
}

.navbar-list li.icon > a {
  line-height: normal;
  padding: 0;
}

.navbar-list li.icon > a:hover {
  background-color: transparent;
}

.navbar-list li.icon > a.avatar-status img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.flex-control {
  display: flex;
  flex: 1 1 0;
  overflow: hidden;
  height: calc(100vh - 121px);
}

.flex-control > .flex-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 220px;
  background-color: #fff;
  box-shadow: 3px 0 4px 0 rgb(0 0 0 / 3%);
}

.flex-control > .flex-mid {
  padding: 0;
  max-width: 350px;
  border-left: 1px solid #e9e9e9;
}

.flex-control > .flex-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.flex-column > .flex-head {
  order: 1;
  flex: none;
  padding: 8px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.flex-column > .flex-body {
  order: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  height: 100%;
}

.flex-column > .flex-footer {
  order: 3;
  flex: none;
  padding: 15px;
}

.flex-column > .flex-head .anchor-icon {
  display: inline-flex;
  margin: 6px 10px;
}

.alert {
  position: fixed;
  top: 4em;
  left: 0;
  right: 0;
  padding: 20px 25px;
  z-index: 999;
  display: flex;
  align-items: center;
}

.right-modal {
  margin: auto;
  padding: 0;
  top: 0 !important;
  bottom: 0;
  left: auto;
  display: none;
  background-color: #f8f8f8;
  width: auto;
  min-width: 425px;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  overflow: hidden;
}

.right-modal.open {
  display: flex !important;
}

.right-modal .modal-header h6 {
  font-size: 18px;
  color: #636363 !important;
}

.right-modal .flex-body {
  padding: 30px;
}

.right-modal .flex-footer {
  background-color: #fff;
  border-top: 1px solid #d4d4d4;
}

.right-modal .flex-footer .btn-large {
  min-width: 136px;
  min-height: 48px;
  line-height: 43px;
  height: auto;
}

.alert .icon {
  margin: 0 20px 0 0;
}

.alert .close {
  position: absolute;
  top: 14px;
  right: 20px;
  color: #111;
}

.alert h6 {
  margin: 0;
  font-size: 18px;
}

.alert p {
  margin: 0;
  font-size: 16px;
  color: #111;
  line-height: 2.5;
}

.alert.alert-announcement {
  background-color: #d4d4d4;
}

.alert.alert-notification {
  background-color: #fefbea;
}

.tabs.custom-tabs-box {
  display: flex;
}

.tabs.custom-tabs-box > li {
  display: flex;
  align-items: center;
  margin: 0 15px 0 0;
}

.tabs.custom-tabs-box li > a {
  display: flex;
  align-items: center;
  color: #636363;
  font-weight: normal;
  min-width: 66px;
  height: 40px;
  background-color: transparent;
  border-radius: 5px;
}

.tabs.custom-tabs-box li > a .icon {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
}

.tabs.custom-tabs-box li > a svg.icon {
  width: 18px;
  height: 18px;
}

.tabs.custom-tabs-box li > .active {
  background-color: #0c50a1;
  color: #fff !important;
}

.tabs.custom-tabs-box li > .active svg.icon {
  fill: white;
}

.tabs.custom-tabs-box li.indicator {
  display: none;
}

.tabs.custom-tabs-line {
  display: flex;
  height: auto;
  padding: 0 10px;
}

.tabs.custom-tabs-line > li {
  line-height: normal;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.tabs.custom-tabs-line > li > a {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 10px;
  font-family: AvenirLTStd-Heavy;
  font-weight: normal;
  color: #636363;
}

.tabs.custom-tabs-line > li > a .icon {
  margin-right: 8px;
}

.sub-header .links {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.sub-header .links .btn {
  background-color: #fff;
  color: #111;
  font-weight: 600;
  line-height: normal;
  height: auto;
  display: flex;
  padding: 8px 14px;
  box-shadow: none;
}

.sub-header .links .btn svg {
  margin: 0 6px 0 0;
}

.custom-table {
  overflow: hidden;
}

.custom-table .table-th > th,
.custom-table tbody > tr td {
  color: #111;
  border-radius: 0;
  padding: 12px 16px !important;
  font-size: 16px;
}

.custom-table .table-th > th {
  font-family: AvenirLTStd-Heavy;
  border-bottom: 0;
}

.custom-table .table-th > th:first-child,
.custom-table tbody > tr > td:first-child {
  border-radius: 4px 0 0 4px;
}

.custom-table .table-th > th:last-child,
.custom-table tbody > tr > td:last-child {
  border-radius: 0 4px 4px 0;
}

.custom-table tbody > tr td .avatar-pic {
  width: 32px;
  height: 32px;
  line-height: normal;
}

.custom-table tbody > tr td .action-icon {
  display: inline-block;
  margin: 0 4px 0 0;
}

.custom-table .id-th {
  min-width: 110px;
}

.custom-table .actions-th {
  min-width: 100px;
}

table.striped.custom-table > tbody > tr:nth-child(odd) {
  background-color: #fff;
}

table.striped.custom-table > tbody > tr:nth-child(even) {
  background-color: rgba(242, 242, 242, 0.5);
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0 0;
}

.pagination li {
  display: flex;
  margin: 0 1px;
  background-color: #fff;
  border-radius: 4px;
  height: 36px;
}

.pagination li a {
  padding: 0;
  font-size: 14px;
  color: #111;
  min-width: 36px;
  display: flex;
  line-height: normal;
  justify-content: center;
  align-items: center;
}

.pagination li a .material-icons {
  font-size: 15px;
  color: #0c50a1;
}

.pagination li.first-last-box a {
  min-width: 55px;
}

.socials-section {
  display: flex;
  margin: 15px 0 0;
}

.socials-section li {
  display: flex;
  align-items: center;
  margin: 0 25px 0 0;
}

.socials-section li:last-child {
  margin: 0;
}

.socials-section.circle-text li .icon {
  width: 14px;
  height: 14px;
  margin: 0 8px 0 0;
  border-radius: 100%;
}

.socials-section.circle-text li .icon.fb-bg {
  background-color: #0c50a1;
}

.socials-section.circle-text li .icon.in-bg {
  background-color: #ce257e;
}

.socials-section.circle-text li .icon.yt-bg {
  background-color: #ed212e;
}

.socials-section.circle-text li .icon.tw-bg {
  background-color: #56c0e0;
}

.socials-section.circle-text li .icon.wa-bg {
  background-color: #34b53a;
}

.socials-section.circle-text li .icon.sms-bg {
  background-color: #ed212e;
}

.socials-section.circle-text li .icon.wc-bg {
  background-color: #56c0e0;
}

.socials-section.circle-text li .icon.email-bg {
  background-color: #ffb200;
}

.socials-section.circle-text li .icon.banned-bg {
  background-color: #ed212e;
}

.socials-section.circle-text li .icon.warned-bg {
  background-color: #f2ae43;
}

.socials-section.circle-text li .text {
  font-size: 14px;
  color: #111;
}

.socials-section.counter-text li .icon {
  display: flex;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 12px 0 0;
  border-radius: 100%;
}

.socials-section.counter-text li .icon svg {
  width: 28px;
}

.socials-section.counter-text li .text {
  font-size: 24px;
  color: #111;
  font-family: AvenirLTStd-Heavy;
}

.listing-pattern {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.listing-pattern > li {
  display: flex;
  flex-direction: column;
  margin: 0 0 8px 0;
}

.listing-pattern > li > a {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 56px;
  padding: 4px 12px;
  border-radius: 4px;
}

.listing-pattern > li > a:hover {
  background-color: #e6edf5;
}

.listing-pattern > li > a.active {
  background-color: #e6edf5;
}

.listing-pattern > li > a .icon {
  display: flex;
  justify-content: center;
  margin: 0 10px 0 0;
  min-width: 24px;
}

.listing-pattern > li > a .title {
  width: 100%;
  color: #111;
  font-size: 14px;
  font-family: AvenirLTStd-Heavy;
}

.inbox-main-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.inbox-main-list > li {
  display: flex;
  flex-direction: column;
  margin: 0 0 8px 0;
}

.inbox-main-list > li > a {
  display: flex;
  align-items: center;
  padding: 4px 12px 4px 4px;
  background-color: transparent;
  border-radius: 24px;
}

.inbox-main-list > li > a:hover {
  background-color: #e6edf5;
}

.inbox-main-list > li > a.active {
  background-color: #e6edf5;
}

.inbox-main-list > li > a .icon {
  display: flex;
  justify-content: center;
  margin: 0 10px 0 0;
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 100%;
}

.inbox-main-list > li > a .title {
  width: 100%;
  color: #111;
  font-size: 14px;
  font-family: AvenirLTStd-Heavy;
}

.inbox-msg-list > li {
  margin: 0;
  border-bottom: 1px solid #e9e9e9;
}

.inbox-msg-list > li > a {
  padding: 12px 18px;
  border-radius: 0;
  align-items: flex-start;
}

.inbox-msg-list > li > a .avatar-pic {
  min-width: 40px;
  height: 40px;
  margin: 0 10px 0 0;
}

.inbox-msg-list > li > a .time {
  font-size: 12px;
  padding: 0 0 0 20px;
}

.inbox-reply-sec {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.inbox-reply-sec textarea {
  display: block;
  height: 60px !important;
  padding: 15px;
  font-size: 14px;
  color: #111;
  border: 0 !important;
  overflow: hidden;
}

.inbox-reply-sec textarea::placeholder {
  color: #111;
  font-size: 14px;
}

.inbox-reply-sec .icon-sec {
  padding: 0 0 0 15px;
  border-top: 1px dotted #d4d4d4;
}

.inbox-reply-sec .icon-sec .anchor-icon {
  display: inline-flex;
  margin: 6px 15px 6px 0;
}

.chat-thread {
  padding: 15px 15px 0 !important;
}

.chat-thread li {
  padding: 10px;
  overflow: hidden;
}

.chat-thread li .bubble {
  max-width: 75%;
  font-size: 14px;
  padding: 12px 16px;
  position: relative;
  border-radius: 6px;
  color: #111;
  margin: 0 0 0 10px;
  background-color: #fff;
  float: left;
  border-top-left-radius: 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.chat-thread li .bubble.blue_bubble {
  float: right;
  margin: 0 10px 0 0;
  text-align: right;
  box-shadow: none;
  background-color: #dfe6ee;
  border-top-right-radius: 0;
  border-top-left-radius: 6px;
}

.chat-thread li .arrow {
  position: absolute;
  top: -2px;
  z-index: 100;
  display: block;
  width: 8px;
  height: 13px;
}

.chat-thread li .arrow-blue {
  right: -8px;
  color: #dfe6ee;
}

.chat-thread li .arrow-white {
  left: -8px;
  color: #fff;
}

.chat-thread li small {
  display: block;
  padding: 0 50px;
  clear: both;
  color: #636363;
}

.chat-thread li.company small {
  text-align: right;
}

.chat-thread li .avatar-pic {
  line-height: normal;
}

.chat-thread li.company .avatar-pic {
  float: right;
}

.email-body {
  padding: 20px;
  color: #636363;
}

.email-body .reply-sec {
  margin: 1.5em 0 0;
  padding: 1.5em 0 0 40px;
  position: relative;
  border-top: 1px dashed #ccc;
}

.email-body .reply-sec .reply-icon {
  position: absolute;
  left: 0;
  top: 2.3em;
}

.inbox-nomsg {
  margin: auto;
  padding: 20px;
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.inbox-nomsg h4 {
  font-size: 32px;
}

.inbox-nomsg h6 {
  font-size: 16px;
}

.post-flex-left {
  max-width: 300px !important;
}

.post-profile-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid #d4d4d4;
  margin: 0 -20px;
  padding: 0 15px 10px;
}

.post-profile-sec .avatar-pic {
  width: 80px;
  height: 80px;
}

.post-counters-sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d4d4d4;
  margin: 0 -20px;
  padding: 10px 15px;
}

.post-counters-sec span {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  padding: 0 10px;
}

.mobile-email-sec {
  display: flex;
  flex-direction: column;
  margin: 0 -20px;
  padding: 0 20px;
  border-bottom: 1px solid #d4d4d4;
}

.mobile-email-sec h6 {
  margin: 0;
  color: #636363 !important;
  line-height: normal;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-email-sec h6 .text {
  display: flex;
  flex: 1;
  align-items: center;
}

.dropDown-sec {
  padding: 15px;
  border-bottom: 1px solid #d4d4d4;
}

.dropDown-sec .form-control-box {
  border: 1px solid #d4d4d4;
}

.orders-list li {
  padding: 24px 0;
  border-bottom: 1px solid #d4d4d4;
}

.orders-list li .media-left img {
  width: 48px;
  height: 48px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
}

.orders-list li .label {
  min-width: 100px;
}

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}

.media-body {
  width: 10000px;
}

.media-body,
.media-left,
.media-right {
  display: table-cell;
  vertical-align: top;
}

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

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

.public-content-holder .avatar-md {
  height: 40px;
  line-height: normal;
  margin-right: 15px;
}

.public-content-holder .para {
  font-size: 15px;
  color: #111;
}

.fb-icon {
  background-color: rgba(59, 90, 154, 0.1);
}

.in-icon {
  background-color: rgba(194, 62, 138, 0.1);
}

.yt-icon {
  background-color: rgba(237, 31, 36, 0.1);
}

.tw-icon {
  background-color: #eef8fb;
}

.wa-icon {
  background-color: rgba(76, 175, 80, 0.1);
}

.sms-icon {
  background-color: #fde8ea;
}

.wc-icon {
  background-color: rgba(35, 193, 250, 0.1);
}

.email-icon {
  background-color: rgba(242, 200, 97, 0.1);
}

.scroll-browser {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.scroll-browser::-webkit-scrollbar {
  width: 4px;
  border-radius: 10px;
  background-color: transparent;
}

.scroll-browser::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: transparent;
}

.scroll-browser:hover::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.3);
}

.scroll-browser:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 150, 0.65);
}

/* css for contact list */
.scroll-browser2 {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.scroll-browser2::-webkit-scrollbar {
  width: 4px;
  border-radius: 10px;
  background-color: transparent;
}

.scroll-browser2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: transparent;
}

.scroll-browser2:hover::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.3);
}

.scroll-browser2:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 150, 0.65);
}

/* for Select 2 on Social Page */

.select2-search__field {
  margin-top: -5px !important;
  border-bottom: none !important;
}

span.select2.select2-container.select2-container--default {
  width: 100% !important;
}

.cmnt-icon-container {
  display: flex;
  align-items: center;
}

.white-box-sm-height .cmnt-from,
.white-box-sm-height .cmnt-by {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.white-box-sm-height .cmnt-icon-container {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cmnt-icon-container i {
  margin-right: 5px;
}

.email-iframe {
  border: none !important;
  width: 100%;
  /* height: 500px !important; */
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  display: block;
  /* iframes are inline by default */
  background: transparent;
  border: none;
  /* Reset default border */
  height: 100%;
  /* Viewport-relative units */
  /* width: 100vw; */
}

.Title-incl-shippin {
  width: 164px;
  height: 22px;
  /* margin: 0 39px 4px 0; */
  /* font-family: AvenirLTStd; */
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  color: #000;
}

.cursor-pointer {
  cursor: pointer;
}

#social_customer_profile .order-status {
  border-radius: 11px;
  padding: 12px;
  line-height: 2px;
  text-align: left;
  position: absolute;
  margin-left: 0px;
  margin-top: 5px;
}

.sms_bot_wrapper {
  padding: 30px 10px;
}

.sms_bot .sms_bot_input.brd_set {
  padding: 0px 10px;
  border-bottom: 1px solid #d4d4d4 !important;
  max-width: 200px;
  background-color: white;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px;
  border: 1px solid #d4d4d4 !important;
}

.sms_bot_step_footer {
  padding: 0px 4.5rem;
  margin-bottom: 2rem;
}

.order-dropdown-content-ct {
  /* display: block; */
  opacity: 1;
  right: 0px;
  /* min-width: 26%; */
  max-width: max-content;
  left: unset;
  top: 10px;
  margin-top: 25px;
  /* position: relative; */
}

.hideComment {
  font-size: 12px;
  bottom: 4px;
  cursor: pointer;
}

.deleteComment {
  font-size: 12px;
  bottom: 4px;
  left: 35px;
  cursor: pointer;
}

.position-relative {
  position: relative;
}

.positionRelative {
  position: relative;
}

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

.btn-social-reload {
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
  width: 120px;
  padding: 10px 20px;
  background-color: white;
  border: none;
  border-radius: 50px;
  height: 50px;
}

.btn-social-reload:focus {
  background-color: white !important;
}

.btn-social-reload:hover {
  box-shadow: 0 5px 5px 0 rgb(0 0 0 / 6%);
}

.social-feed-overflow {
  max-height: 85vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.social-feed-overflow::-webkit-scrollbar {
  width: 5px;
  /* width of the entire scrollbar */
  border-radius: 10px;
  background-color: transparent;
}
.all-completed-scroll {
  /* max-height: 85vh; */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  height: 82vh;
  /* overflow-y: auto; */
}

.social-feed-overflow::-webkit-scrollbar-thumb {
  height: 100px;
  background-color: transparent;
  /* color of the scroll thumb */
  border-radius: 10px;
  /* roundness of the scroll thumb */
  /* creates padding around scroll thumb */
}

.social-feed-overflow:hover::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.3);
}

.social-feed-overflow:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 150, 0.3);
}

.social-toggle-div > .select-wrapper > .dropdown-trigger,
.social-toggle-div > .select-wrapper > .caret {
  display: none;
}

.content-logs-header {
  display: flex;
  justify-content: space-between;
}

.content-logs-main {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5;
}

.content-logs-date {
  margin-right: 5px;
  margin-left: 17px;
}

.content-logs-main-grid {
  display: grid;
  grid-template-columns: 50% 50%;
}

.div-flex-center {
  display: flex;
  justify-content: center;
}