form {
  margin: 0;
  padding: 0
}

label {
  color: #606770;
  cursor: default;
  font-weight: 600;
  vertical-align: middle
}

label input {
  font-weight: normal
}

textarea,.inputtext,.inputpassword {
  -webkit-appearance: none;
  border: 1px solid #ccd0d5;
  border-radius: 0;
  margin: 0;
  padding: 3px
}

textarea {
  max-width: 100%
}

select {
  border: 1px solid #ccd0d5;
  padding: 2px
}

input,select,textarea {
  background-color: #fff;
  color: #1c1e21
}

.inputtext,.inputpassword {
  padding-bottom: 4px
}

.inputtext:invalid,.inputpassword:invalid {
  box-shadow: none
}

.inputradio {
  margin: 0 5px 0 0;
  padding: 0;
  vertical-align: middle
}

.inputcheckbox {
  border: 0;
  vertical-align: middle
}

.inputbutton,.inputsubmit {
  background-color: #4267b2;
  border-color: #DADDE1 #0e1f5b #0e1f5b #d9dfea;
  border-style: solid;
  border-width: 1px;
  color: #fff;
  padding: 2px 15px 3px 15px;
  text-align: center
}

.inputaux {
  background: #ebedf0;
  border-color: #EBEDF0 #666 #666 #e7e7e7;
  color: #000
}

.inputsearch {
  background: #FFFFFF url(/rsrc.php/v3/yL/r/unHwF9CkMyM.png) no-repeat left 4px;
  padding-left: 17px
}

html {
  touch-action: manipulation
}

body {
  background: #fff;
  color: #1c1e21;
  direction: ltr;
  line-height: 1.34;
  margin: 0;
  padding: 0;
  unicode-bidi: embed;
}

body,button,input,label,select,td,textarea {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px
}

h1,h2,h3,h4,h5,h6 {
  color: #1c1e21;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  padding: 0
}

h1 {
  font-size: 20px
}

h4,h5,h6 {
  font-size: 15px
}

p {
  margin: 1.4em 0
}

b,strong {
  font-weight: 600
}

a {
  color: #385898;
  cursor: pointer;
  text-decoration: none
}

button {
  margin: 0
}

a:hover {
  text-decoration: underline
}

img {
  border: 0
}

td,td.label {
  text-align: left
}

dd {
  color: #000
}

dt {
  color: #606770
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}

abbr {
  border-bottom: none;
  text-decoration: none
}

hr {
  background: #dadde1;
  border-width: 0;
  color: #dadde1;
  height: 1px
}

*::-webkit-input-placeholder {
  color: #606770
}

*:focus::-webkit-input-placeholder {
  color: #bec3c9
}

.no_js *::-webkit-input-placeholder {
  color: #000
}

body {
  overflow-y: scroll;
}

.mini_iframe {
  overflow-y: visible;
}

.auto_resize_iframe {
  height: auto;
  overflow: hidden
}

.pipe {
  color: gray;
  padding: 0 3px
}

#content {
  margin: 0;
  outline: none;
  padding: 0;
  width: auto
}

.profile #content,.home #content,.search #content {
  min-height: 600px
}

.UIStandardFrame_Container {
  margin: 0 auto;
  padding-top: 20px;
  width: 960px
}

.UIStandardFrame_Content {
  float: left;
  margin: 0;
  padding: 0;
  width: 760px
}

.UIStandardFrame_SidebarAds {
  float: right;
  margin: 0;
  padding: 0;
  width: 200px;
  word-wrap: break-word
}

.UIFullPage_Container {
  margin: 0 auto;
  padding: 20px 12px 0;
  width: 940px
}

.empty_message {
  background: #f5f6f7;
  font-size: 13px;
  line-height: 17px;
  padding: 20px 20px 50px;
  text-align: center
}

.see_all {
  text-align: right
}

.standard_status_element {
  visibility: hidden
}

.standard_status_element.async_saving {
  visibility: visible
}

img.tracking_pixel {
  height: 1px;
  position: absolute;
  visibility: hidden;
  width: 1px
}

._li._li._li {
  overflow: initial
}

._aj3e,._aj3e video {
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: -1
}

._aowd._li._li._li {
  overflow: hidden
}

._9053 ._li._li._li {
  overflow-x: hidden
}

._72b0 {
  position: relative;
  z-index: 0
}

.registration ._li._9bpz {
  background-color: #f0f2f5
}

._li ._9bp- {
  padding-top: 5px;
  text-align: center
}

._li ._9bp- .fb_logo {
  height: 100px
}

._li ._a66f {
  padding-top: 5px;
  text-align: center
}

._li ._a66f .fb_logo {
  height: 80px;
  padding-top: 72px
}

._19_u :focus {
  outline: none!important
}

._1m42 {
  display: block
}

._1w_m ._1m42 img,._53s ._1m42 i {
  -webkit-filter: brightness(50%) blur(5px);
  transition: filter .5s ease-out
}

._5v3q ._1m42::before,._1m42::before {
  animation: rotateSpinner 1.2s linear infinite;
  background-image: url(/rsrc.php/v3/yH/r/xgVgalBG80z.png);
  border: 0;
  content: '';
  display: inline-block;
  height: 24px;
  left: 50%;
  margin: -12px -12px;
  position: absolute;
  top: 50%;
  width: 24px;
  z-index: 10
}

@keyframes CSSFade_show {
  0% {
      opacity: 0
  }

  100% {
      opacity: 1
  }
}

@keyframes CSSFade_hide {
  0% {
      opacity: 1
  }

  100% {
      opacity: 0
  }
}

html {
  touch-action: manipulation
}
html,
body {
  overflow-x: hidden; 
}
body {
  
  color: #1c1e21;
  direction: ltr;
  line-height: 1.34;
  margin: 0;
  padding: 0;
  unicode-bidi: embed;
}
main{
  margin: 10px 10px 20px 10px; 
}
.header-title{
  margin-left: 270px;
}

footer p,
footer ul,
footer ol,
footer ul li,
footer ol li,
footer a,
footer h5,
footer ul li a i {
  color: #fff;
}
.journalFormCard,
.postFormCard,
.quoteFormCard,
.contactFormCard {
max-height: 400px;
overflow-y: hidden;
}

.journalFormCard:hover,
.postFormCard:hover,
.quoteFormCard:hover,
.contactFormCard:hover{
overflow-y: auto;
}

@media screen and (max-width: 740px) {
  .profile{
      border-bottom: 2px solid #aaa;
  }
  .header-title{
  margin-left: 0;
  display: none;
}
.journalFormCard,
.postFormCard,
.quoteFormCard,
.contactFormCard {
max-height: 100%;
overflow-y: hidden;
}
}

.post-form,
.journal-form,
.quote-form,
.volume-form,
.video-form{
border-radius: 8px;
padding: 20px;
background-color: #f2f2f2;
}

      .post-form textarea,
      .journal-form textarea,
      .quote-form textarea,
      .volume-form textarea{
          width: 100%;
          height: auto;
          border: none;
          resize: vertical;
          padding: 10px;
          font-size: 16px;
      }

      .post-form .post-image-label,
      .journal-form .journal-image-label,
      .quote-form .quote-image-label,
      .volume-form .volume-image-label,
      .video-form .video-image-label {
          display: flex;
          align-items: center;
          margin-top: 10px;
          color: #888;
          cursor: pointer;
      }

      .post-form .post-image-label i,
      .journal-form .journal-image-label i,
      .quote-form .quote-image-label i,
      .volume-form .volume-image-label i,
      .video-form .video-image-label i {
          margin-right: 5px;
      }

      .post-form .content-submit-btn,
      .journal-form .journal-submit-btn,
      .quote-form .quote-submit-btn,
      .volume-form .contactFormSubmitBtn,
      .video-form .video-submit-btn{
          margin-top: 10px;
          background-color: #337ab7;
          color: #fff;
          border: none;
          padding: 8px 16px;
          border-radius: 4px;
          cursor: pointer;
      }

      .post-form .content-submit-btn:hover,
      .journal-form .journal-submit-btn:hover,
      .quote-form .quote-submit-btn:hover,
      .volume-form .contactFormSubmitBtn:hover,
      .video-form .video-submit-btn:hover {
          background-color: #286090;
      }

      .post-form .image-preview,
      .journal-form .journal-image-preview,
      .quote-form .quote-image-preview,
      .volume-form .volume-image-preview,
      .video-image-preview,
      .journal-file-preview {
          margin-top: 10px;
      }

      .post-form .image-preview img,
      .journal-form .journal-image-preview img,
      .quote-form .quote-image-preview img,
      .volume-form .volume-image-preview img,
      .video-form .video-image-preview img,
      .video-form .video-file-preview video {
          max-width: 200px;
          max-height: 200px;
          border: 1px solid #ccc;
          border-radius: 4px;
      }

form {
  margin: 0;
  padding: 0
}

label {
  color: #606770;
  cursor: default;
  font-weight: 600;
  vertical-align: middle
}

label input {
  font-weight: normal
}

textarea,.inputtext,.inputpassword {
  -webkit-appearance: none;
  border: 1px solid #ccd0d5;
  border-radius: 0;
  margin: 0;
  padding: 3px
}

textarea {
  max-width: 100%
}

select {
  border: 1px solid #ccd0d5;
  padding: 2px
}

input,select,textarea {
  background-color: #fff;
  color: #1c1e21
}

.inputtext,.inputpassword {
  padding-bottom: 4px
}

.inputtext:invalid,.inputpassword:invalid {
  box-shadow: none
}

.inputradio {
  margin: 0 5px 0 0;
  padding: 0;
  vertical-align: middle
}

.inputcheckbox {
  border: 0;
  vertical-align: middle
}

.inputbutton,.inputsubmit {
  background-color: #4267b2;
  border-color: #DADDE1 #0e1f5b #0e1f5b #d9dfea;
  border-style: solid;
  border-width: 1px;
  color: #fff;
  padding: 2px 15px 3px 15px;
  text-align: center
}

.inputaux {
  background: #ebedf0;
  border-color: #EBEDF0 #666 #666 #e7e7e7;
  color: #000
}


html {
  touch-action: manipulation
}

body {
  background: #fff;
  color: #1c1e21;
  direction: ltr;
  line-height: 1.34;
  margin: 0;
  padding: 0;
  unicode-bidi: embed;
  overflow-y: scroll;
}

body,button,input,label,select,td,textarea {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px
}

h1,h2,h3,h4,h5,h6 {
  color: #1c1e21;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  padding: 0
}

h1 {
  font-size: 20px
}

h4,h5,h6 {
  font-size: 15px
}

p {
  margin: 1.4em 0
}

b,strong {
  font-weight: 600
}

a {
  color: #385898;
  cursor: pointer;
  text-decoration: none
}

button {
  margin: 0
}

a:hover {
  text-decoration: underline
}

img {
  border: 0
}

td,td.label {
  text-align: left
}

dd {
  color: #000
}

dt {
  color: #606770
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}

abbr {
  border-bottom: none;
  text-decoration: none
}

hr {
  background: #dadde1;
  border-width: 0;
  color: #dadde1;
  height: 1px
}

*::-webkit-input-placeholder {
  color: #606770
}

*:focus::-webkit-input-placeholder {
  color: #bec3c9
}

.no_js *::-webkit-input-placeholder {
  color: #000
}

body {
  overflow-y: scroll;
}

.mini_iframe {
  overflow-y: visible;
}

.auto_resize_iframe {
  height: auto;
  overflow: hidden
}

.pipe {
  color: gray;
  padding: 0 3px
}

#content {
  margin: 0;
  outline: none;
  padding: 0;
  width: auto
}

.profile p{
color: #000;
}
.profile a{
color: #000;
}
.profile h6, h4{
color: #000;
margin: 2.5px;
}

.hidden-dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

#close-withdraw-dialog{
  padding:3px;
  color: #291;
}
#close-withdraw-dialog:hover{
  background-color:#291;
  color: #eee;
}

#withdraw-submit{
  background-color: #db9834;
}
#withdraw-submit:hover{
  background-color: #ca5412;
}

/* post text editor  */
  .editor-container {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 10px;
  }

  .editor-toolbar {
      margin-bottom: 10px;
  }

  .editor-toolbar button,
  .editor-toolbar span {
      margin-right: 10px;
      border: none;
      padding: 8px;
      color: #24033b;
  }

  .editor-toolbar button:hover,
  .editor-toolbar span:hover {
      background-color: #ccc;
  }

  #image-preview {
      max-width: 100%;
      max-height: 300px;
      display: none;
  }

@media (max-width: 396px) {
      /*    .profile-picture {
              height: auto;
              width: 84px;
          } */

.editor-container {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 3px;
  }

  .editor-toolbar {
      margin-bottom: 13px;
  }

  .editor-toolbar button,
  .editor-toolbar span {
      margin-right: 3px;
      padding: 3px;
  }
  .editor-toolbar span i{
    font-size: 13px;
  }
}

@media (max-width: 316px) {
.editor-toolbar span i{
    font-size: 11px;
  }
  .editor-toolbar button,
  .editor-toolbar span {
      margin-right: 3px;
      padding: 3px;
  }
}
/* reactions  */

.reaction-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: transparent;
  padding: 20px 0;
  
}
.reaction-button {
  display: flex;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  margin: 0 15px;
  padding: 10px 32px 10px 32px;
  border-radius: 22px;
  background-color: #f0f0f0;
}
.reaction-button:hover {
  background-color: #e9e9e9;
}
.reaction-button i {
  font-size: 24px;
  margin-right: 5px; /* Add some space between icon and count */
}
.reaction-count {
  font-size: 14px;
}

@media (max-width: 446px) {
.reaction-button {
  margin: 0 8px;
  padding: 3px 6px 3px 6px;
  border-radius: 22px;
  background-color: #f0f0f0;
}
}

/* Scrollbar Track */
::-webkit-scrollbar {
width: 4px;
margin: 0 10px 0 22px;
}

/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
background: #888; /* Color of the thumb */
border-radius: 2px; /* Rounded thumb */
}

/* Scrollbar Track on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f0f0f0;
 /* Color of the thumb and track */
}

/* Hide IE and Edge scrollbars */
* {
-ms-overflow-style: none;
scrollbar-width: none;
}
.message {
display: none;
position: fixed;
top: 270px;
left: 44%;
transform: translateX(-50%);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.absentFeature{
cursor: pointer;
}
#bioPen{
cursor: pointer;
}
h5 .fas{
color:purple!important;
}


/*  user table */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 7px 0;
}

.styled-table thead {
  background-color: #f2f2f2; 
}

.styled-table th {
  padding: 6px;
  font-size: 14px;
  text-align: left;
}

/*  rows */
.styled-table tbody {
  border-top: 2px solid #ddd;
}

/*  cells */
.styled-table td {
  padding: 6px;
  font-size: 13px; 
  border-bottom: 1px solid #ddd;
}

/*  icon */
.styled-table td span {
  color: #555;
  font-size: 15px; 
}
/*  modal (actions-content) */
.actions-content,
.actionsPendingContent,
.actionsPendingkid_Content {
  display: none;
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  z-index: 1;
  display: none;
  position: relative;
}

/* Remove unnecessary borders and color for the buttons */
.actions-content button,
.actionsPendingContent button,
.actionsPendingkid_Content button {
  border: none;
  background: none;
  padding: 5px;
  cursor: pointer;
}

/* Style for the buttons on hover */
.actions-content button:hover,
.actionsPendingContent button:hover,
.actionsPendingkid_Content button:hover {
  background-color: #ddd;
}

/* Style for the ellipsis icon on hover */
.userActions:hover,
.pendingContentActions,
.actionsPendingkid_Content {
  background-color: #ddd;
}

.button-style {
  display: inline-block;
  padding: 7px 12px;
  font-size: 16px;
  color: #fff;
  
  border: 1px solid purple;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  
}

.button-style:hover {
  color: #fff !important;
  background-color: purple !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.button-style i {
  margin-right: 8px;
}