/* IF YOU'RE LOOKING WHERE TO SET THE HEIGHT OF THE ACTUAL POST TEXT - IT'S IN .slider-container */

:root {
  --header-height: 34px;
  --footer-height: 20px;
  --slide-container-portrait: 42.5vh;
  --slide-container-landscape: 35vh;
}

*.bold {
  font-weight: bold !important;
}

/* Useability */
.noselect {
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;
}

.small {
  font-size: 90%;
}
.small a,
.small a:hover,
.small a:visited,
.small a:active,
.small a:focus {
  text-decoration: underline;
  border: 0 none;
}
/* to keep showing selected text as "highlighted" when bluring focus outside editor on composer */
.highlight {
  background-color: #ccc;
}
:disabled {
  opacity: 0.5;
}
.sticky {
  position: fixed !important;
}

a, a:hover, a:focus, a:active, a:visited {
  border: 0 none;
  outline: 0 none;
}

/* Add "placeholder" support for contenteditable (for post title, mostly) */
[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block; /* For Firefox */
  color: #aaa;
}
/* Always show editing cursor in contenteditable */
[contenteditable=true] {
  cursor: text;
}
/* HTML5 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,button {
    display:block;
}

article.flat {
  margin: 20px 21px 0 2px !important;
}

[contenteditable] {
  outline: 0 none;
  border: 0 none;
}
/* GUI */
*,*:before,*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

ul, li {
  margin: 0;
  padding: 0;
}
/* Triangle for the "square bubbles" (like user menu) */
.knob:before,
.knob:after
{
  content: '';
  display: block;
  position: absolute;
  border: 10px solid transparent;
  border-bottom-color: #fff;
}
.knob.top:before,
.knob.top:after
{
  top: -20px;
}
.description {
  font-size: 0.95rem;
}
input[type="checkbox"].large {
  position: relative;
  /* top: 3px; */
  width: 16px !important;
  height: 16px !important;
  margin-left: 6px;
}

input[type="checkbox"] {
  float:right !important;
}
.link-box {
  direction: ltr;
  text-align: left;
  border: 1px solid #aaa;
}

.soft {
  border: 1px solid #ddd !important;
}
.intro {
  float: right;
  padding-top: 16px;
  margin: 0;
  clear: both;
}

html, body {
  margin: 0;
  padding: 0;
  /* overflow:hidden; */
  /* position: absolute; */
  /* left: 0; */
  /* top: 0; */
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
  -webkit-tap-highlight-color: rgba(221, 221, 221, 0.5);
}
html {
  /*
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
  */
  width: 100%;
  height: calc(100vh + 34px);
  overflow: hidden;
}
body {
  background-color: #ffffff;
  color: #363636;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  font-weight: normal;
  font-family: 'Open Sans Hebrew', serif;
  line-height: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
a,a:focus,a:hover,a:visited {
  color: #363636;
  text-decoration: none;
  border-bottom: 1px solid #363636;
}

h1, h2, h3, h4, h5 {
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: bold;
  line-height: 1.25;
}
hr {
  border: 0 none;
  border-bottom: 1px solid #ccc;
}

article,
p {
  padding: 0;
  margin: 0 0 0.9em 0;
  text-align:justify;
  line-height:normal;
  direction: rtl;
}
#wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

/* Loading Overlay (also used in 404.jade) */
#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index:9999;
}
.circle-container {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  border-radius: 50%;
  text-align: center;
}
.circle-content {
  height: 50px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff !important;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}
.circle-point {
  background-color: #ffffff;
  border-radius: 50%;
  height: 0.6em;
  margin: 0 2px;
  position: relative;
  top: 18px;
  width: 0.6em;
  box-shadow: 0 1px 2px #000;
  font-size: 1.8rem;
  display: inline-block;
  animation-name: loading;
}
#loading-content .logoPoint {
  display: inline-block;
}

.help-bubble {
	position: absolute;
  background: #fff;
  top: 64px;
  z-index: 9994;
  font-size: 12px;
  color: #363636;
  border: 1px solid #ccc;
  padding: 6px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  border-radius: 0.25em;
}

.help-bubble:after, .help-bubble:before {
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
  bottom: 100%;
  left: 50%;
	border: solid transparent;
}

.help-bubble:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 8px;
	margin-left: -8px;
}
.help-bubble:before {
	border-color: rgba(204, 204, 204, 0);
	border-bottom-color: #ccc;
	border-width: 9px;
	margin-left: -9px;
}
.help-bubble button {
  display: block !important;
  margin: 4px auto 0;
}
/* Header */
#header {
  position: absolute;
  top: 0;
  background-color: #3a3a3a;
  height: 34px;
  height: var(--header-height,34px);
  width: 100%;
  color: #ffffff;
  line-height: 1.3;
  /* z-index: 9999; */
  margin-bottom: 4px;
}

#logo {
  line-height: 1.1;
  position: relative;
  right: 6%;
  color: #fff !important;
}
#header > div, #logo > div {
  float: right;
}

.logoText {
  color: #fff !important;
  font-size: 1.62em;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}
.logoPoint {
  background-color: #ffffff;
  border-radius: 0.3em;
  height: 0.6em;
  margin-right: 4px;
  position: relative;
  top: 17px;
  width: 0.6em;
  box-shadow: 0 1px 2px #000;
}

.logoTagline {
    margin-right: 18px;
    line-height: 2;
}
#subLogo {
  font-size: 1.2em;
  font-weight: 900;
  line-height: 1.1;
  margin-right: 18px;
  margin-top: 2px;
}
.authorPic,
#header #user,
#userPic {
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 17px;
  box-shadow: 0 2px 9px 7px rgba(5, 5, 5, 0.5) inset, 1px 1px 1px 0 rgba(50, 50, 50, 0.4);
  float: right;
  height: 34px;
  position: relative;
  top: 14px;
  width: 34px;
  z-index: 5;
  /* cursor: pointer; */
}

#header #user,
#userPic.offline,
#userPic.offline.male {
  background-image:url("/img/user_male.png");
  box-shadow: none;
}
#userPic.offline.female {
  background-image:url("/img/user_female.png");
}
#header #user {
  right: 2.5%;
  top: 4px;
  width: 26px;
  height: 26px;
  background-color: #fff;
}

#footer {
  width: 100%;
  height: 20px;
  height: var(--footer-height, 20px);
  font-size: 10.5px;
  position: fixed;
  bottom: 0;
  z-index: 999;
  text-align: left;
  padding: 0 0 0 16px;
}
#footer ul {
  list-style-type: none;
}
#footer ul li {
  display: inline-block;
  margin-left: 30px;
}
#footer ul li a,
#footer ul li a:hover,
#footer ul li a:visited,
#footer ul li a:focus {
  text-decoration: none;
  border: 0 none;
  outline: 0 none;
  color: #767676;
}

#new-post-button {
  float: left !important;
  position: relative;
  left: 6%;
  color: #fff;
  font-weight: bold;
  font-size: 36px;
  font-weight: 600;
  text-shadow: 0 1px 2px #000;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  border: 0 none;
  top: 1px;
}

/* Header menu */
.header-menu {
  display: table;
  position: absolute;
  top: 34px;
  top: var(--header-height,34px);
  /* top: 38px; */
  background-color: #ddd;
  border: 1px solid #fff;
  font-weight: bold;
  padding: 14px;
  z-index: 9999;
  display: none;
}
.header-menu.knob:before,
.header-menu.knob:after
{
  border-bottom-color: #ddd;
}
.header-menu.right.knob:before,
.header-menu.right.knob:after
{
  right: calc(2.5% + 30px)
}

.header-menu.left.knob:before,
.header-menu.left.knob:after
{
  left: calc(2.5% + 30px);
}

.header-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.header-menu ul > li {
  margin: 7px 0;
  border-bottom: 1px solid #363636;
  padding-bottom: 8px;
}
.header-menu ul > li a {
  border-bottom: none;
  padding: 4px;
}
.header-menu ul > li a:hover {
  background-color: #eee;
}

/* Help Menu Icon */
#help {
  float: left !important;
  position: relative;
  left: 2.5%;
  color: #eee;
  font-weight: bold;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 2px #000;
  margin: 0;
  line-height: 1.5;
  cursor: pointer;
  border: 0 none;
  top: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  opacity: 0.86;
}

#user-menu {
  right: 16px;
}
#help-menu {
  left: 16px;
  font-size: 14px !important;
}

#content-wrapper {
  width: 100%;
  height: calc(100% - 34px - 4px);
  height: calc(100vh - 34px - 4px);
  height: calc(100vh - var(--header-height,34px) - 4px);
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  top: 34px;
  top: var(--header-height,34px);
  /* top: 0; */
  padding-bottom: 6px;
  background-color: #fff;
}

#container {
  width: 100%;
  height: calc(100% - 34px - 4px);
  height: calc(100vh - 34px - 4px);
  height: calc(100vh - var(--header-height,34px) - 4px);
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  padding-bottom: 6px;
  background-color: #fff;
  padding: 5% 0;
}
.scrollable #container {
  max-height: none !important;
  height: auto !important;
}
#content {
  direction: rtl;
  margin: 0 auto;
  padding: 10% 0;
  /*
  bottom: -15%;
  bottom: -15vh;
  margin-bottom: 15%;
  margin-bottom: 15vh;
  */
}

#content.full,
#content.scrollable {
  /*
  height: calc(100vh - 10% - 86px);
  min-height: 116px;
  */
}

.content-header {
  display: table;
  width: 100%;
  padding: 0 16px;
}
.content-header h1,
.content-header h2,
#home-feed .feed-post-header h2,
.content-header i
{
  float: right;
  line-height: 1;
  right: 8px;
  margin-top: 23px;
  max-width: 86%;
  position: relative;
}
.content-header h2,
.content-header i {
  margin-top: 0;
}
#userPicInput {
  opacity: 0;
  width: 1px;
}
/* Class for actual content div */
.content {
 /* margin: 0 20px !important; */
 padding: 0 20px;
 overflow-y: hidden !important;
 overflow-x: hidden !important;
 direction: rtl !important;
 /* padding-right: 38px; */
}

/* Used on desktop browsers (usually) where there is a scrollbar which is hidden by the custom scrollbar (simple-scrollbar) */
.ss-content.withScrollbar .content {
  padding: 0 21px 0 2px !important;
  /* margin: 0 21px 0 2px !important; */
}
/* Used on mobile browsers where usually the default scrollbar is not shown */
.ss-content.noScrollbar .content {
  padding: 0 20px !important;
}
.scrollable {
 overflow-x: hidden;
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch;
 scroll-behavior: smooth;
 direction: ltr !important;
 text-align:right;
}

.scrollable > * {
  direction: rtl !important;
}

/* Slider (slick) */
.slider-container {
  margin: 0 0 6vh auto !important;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.slide-container {
  height: 42.5%;
  height: 42.5vh;
  height: var(--slide-container-portrait, 42.5vh);
  overflow: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.slick-list {
  margin: 20px 0 !important;
}

.pageIndicator {
  text-align: center;
  padding: 11px 0;
  margin: 0;
}
.pageIndicator li {
  display: inline-block;
}
.pageIndicator li button {
  background: #cccccc;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1;
  margin-right: 3px;
  text-align: center;
  width: 1.6em;
  height: 1.6em;
  font-size: 64%;
  /*
  width: 20px;
  height: 20px;
  font-size: 74%;
  */
  padding: 0.29em;
  border: 0 none;
  outline: 0 none;
}
.pageIndicator li.slick-active button {
  background: #999999;
}


/* Forms */

form hr {
  margin: 36px 0;
}
.form-group {
  margin: 12px 0;
}
.form-control:focus,
.form-control:active {
  box-shadow: none !important;
  outline: 0 none;
}
button,
.form-control {
  border-radius: 0.25em;
  font-size: 1em;
  margin-top: 2px;
  padding: 0.25em 0.50em;
  font-family: 'Open Sans Hebrew', sans-serif;
}

.upload-button.form-control,
select.form-control,
input.form-control:not([type='radio']) {
  width: 100%;
  border: 1px solid #969696;
}
input.form-control:not([type='radio']):focus {
  box-shadow: 0px 6px 6px -8px #000 inset !important;
}
input.form-control[type='radio'] {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  margin-bottom: 4px;
}
input.form-control[type='radio'] {
  border-radius: 0.50em;
}
button.form-control:not(.upload-button) {
  background-color: #3a3a3a;
  color: #fff;
  border: 0 none;
  border-radius: 0.25em;
  cursor: pointer;
  transition: box-shadow 85ms;
  display: inline-block
}
.hover-effect:hover,
button.form-control:hover {
  box-shadow: 0px 6px 6px -6px #000;
}
.upload-button {
  background-color: #fff;
  /* padding: 1px 6px !important; */
}
.controls {
  text-align: center;
  margin: 24px 0;
}
.controls button {
  margin: 0 auto;
}
.form-message,
.form-message-sub {
  text-align: center;
  color: #dd3636;
  line-height: 1.28;
  letter-spacing: 0.62px;
}
.form-message-sub {
  color: #363636;
  margin-top: 0.6em;
}
.form-message:not(.sub) a,
.form-message:not(.sub) a:visited,
.form-message:not(.sub) a:hover {
  color: #dd3636;
}
.btm-links {
  margin: 12px 0 0 0px;
}
.btm-links a {
  border: 0 none;
}
.btm-links a:hover {
  border-bottom: 1px solid #363636;
}

.validate-msg,
.form-group.alert label:after {
  color: #dd3636;
  margin-right: 8px;
  line-height: 1.5;
  display: none;
}

/* 404 */
#four04 {
  position: absolute;
  width: 270px;
  height: 230px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Author Page */
.motto {
  clear: both;
  margin-top: 54px;
  font-size: 0.92em;
}

/* signup */
#form-signup {
  padding: 6px 0;
}
/*
#form-signup .section {
  padding: 4px 0 18px;
  border-bottom: 1px solid #ccc;
}
*/
#form-signup .section#part-1 {
  border-bottom: 1px solid #ccc;
}
#form-signup .description {
  font-size: 0.95rem;
  margin: 4px 0 8px;
  /* line-height: 1; */
  color: #797979;
  /* margin-bottom: 16px; */
}
#form-signup .description a,
#form-signup .description a:hover,
#form-signup .description a:focus,
#form-signup .description a:visited {
  color: #797979;
  border-bottom: 1px solid #797979;
}

#form-signup .form-group {
  margin: 20px 0;
}
#form-signup .form-group label {
  display: inline-block;
  margin-bottom: 4px;
}

#form-signup input, #form-signup select {
  margin-top: 0 !important;
}
/* Composer */

#composer {
  margin-top: -38px;
}
#composer .slide-container-editor {
  cursor: text;
}
#post .post-status,
#composer .post-status {
  text-align: center;
  color: #aaa;
}
i.private-post-icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/img/private.png");
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.75;
}
#composer .composer-title {
  width: 100%;
}
#composer .composer-title:focus,
#composer .composer-title:active
{
  border: none;
  outline: none;
}
#composer .toolbar {
  border-top: 5px solid #aaa;
  margin: 20px 0 0 0;
  border-bottom: 1px solid #ddd;
  display: table;
  width: 100%;
  background-color: #eee;
  padding: 1px;
}

#composer .toolbar button {
  background: #eee;
  outline: 0;
  border: 0;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  margin: 0; /* 0px 6px; */
  transition: background 0.2s ease 0;
  -webkit-transition: background 0.2s ease 0s;
  -moz-transition: background 0.2s ease 0s;
  -ms-transition: background 0.2s ease 0s;
  -o-transition: background 0.2s ease 0s;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  z-index: 2;
  position: relative;
  padding: 0;
  width: 2em; /* 26px; */
  height: 26px;
  opacity: 0.78;
}

#composer .toolbar button:hover

{
  background: #ddd;
  opacity: 1;
  border: 0 none;
  outline: 0 none;
}

#composer .toolbar button.active {
  background: #c8c8c8 !important;
  opacity: 1 !important;
}
#composer .toolbar i {
  font-style: normal;
  font-weight: bold;
  color: #222;
  font-size: 1em;
}
#composer .toolbar .bar {
  display: table;
}
#composer .nav.bar {
  border-right: 1px solid #ccc;
}
#composer .control.bar {
  border-left: 1px solid #ccc;
  padding-left: 12px;
}
#composer .edit.bar {
  padding-right: 6px;
}
#composer .nav.bar button,
#composer .nav.bar {
  float: left;
}
#composer .control.bar,
#composer .edit.bar,
#composer .control.bar button,
#composer .edit.bar button {
  float: right;
}
#composer .toolbar .nav.bar i {
  font-size: 1.4em;
}

#composer .editor
{
  outline: 0 none;
  line-height: 1.3;
  text-align: justify;
  -webkit-user-select: text;
  user-select: text;
  min-height: 1em;
  cursor: text;
}

#composer .editor br:after {
  content: '\200B';
}
#composer #publish-section {
  color: #aaa;
}
#composer #publish-section > div {
  margin: 20px 0;
}
#composer .slide-container {
  height: calc(42.5% - 20%);
  height: calc(42.5vh - 20vh);
  height: calc(var(--slide-container-portrait, 42.5vh) - 20vh);
  /*
  height: calc(90vh - 480px) !important;
  min-height: 116px;
  */
}

/* main bottom button */

.composer-modal {
  position: absolute;
  margin: -1px auto;
  border-top: 1px solid #ccc;
  width: 100%;
  /* border-bottom: 1px solid #ccc; */
  display: table;
  padding: 24px;
  background-color: #fff;
  z-index: 100;
  display: none;
}

#composer .composer-button {
  margin: 20px auto;
  display: block;
}
.composer-modal .content-header > * {
  float: right;
  margin-left: 8px;
}
.composer-modal button {
  margin: 14px auto 0;
}
.composer-modal h2 {
  margin: 0 0 12px 0;
}
.composer-modal .close {
  font-size: 1.4em;
  position: absolute;
  right: 4px;
  top: 4px;
  cursor:pointer;
}
.composer-modal#addLink-modal #addLinkInput {
  width: 100%;
  text-align:left;
  direction: ltr;
}

.slick-slide,
.slick-slide:focus,
.slick-slide:active
{
  outline: none;
}

.choose-file {
  border: 1px solid #969696;
  cursor: pointer;
  margin: 16px;
  font-size:0.9em;
}

#postImageUploadUrl {
  overflow: hidden;
  margin-top: 14px;
  display: block;
  width: 100%;
}
#postImagePreview {
  margin-top: 28px;
}

#publish.composer-modal .content {
  font-size: 14px !important;
}
#publish.composer-modal .message {
  position: absolute;
  top: 40px;
  left: 0;
  text-align: center;
  width: 100%;
  height: 54%;
  background-color: #fff;
  z-index: 999;
  display: none;
}


/* Publish, Share... */

.action-modal
{
  position: absolute;
  margin: -30px auto;
  width: 100%;
  display: table;
  padding: 24px;
  background-color: #fff;
  z-index: 100;
  display: none;
  font-size: 15px !important;
  height: 100%;
  padding-top: 14px;
}

.action-modal a {
  border: 0 none;
}


.action-modal .modal-header,
.action-modal .content-header
{
  /*margin-bottom: 2.8vh;*/
  margin-bottom: 0.48rem;
  font-size: 1rem !important;
}

.action-modal label,
.action-modal .description {
  color: #808080;
  line-height: 1.2;
}

.action-modal .title {
  margin-bottom: 3px;
}

#publish #teaser {
  width: 100%;
  height: 4rem;
  max-height: 180px;
  background-color: #ffffff;
  color: #363636;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  font-weight: normal;
  font-family: 'Open Sans Hebrew', serif;
  line-height: 1.3;
  padding: 4px 8px;
  border: 1px solid #ddd;
  overflow: hidden;
  resize: none;
}

#publish img#coverImage {
  width: 100%;
  height: auto;
}
#publish #teaser:active,
#publish #teaser:focus {
  border: 1px solid #bbb;
  outline: 0 none;
}

.action-modal .section {
  margin: 1rem 0;
}
.action-modal .section.options {
  text-align: right;
  margin-top: 4rem;
}
.action-modal .section.options .option {
  margin-top: 4px;
}
.action-modal .section.options .option input {
  position: relative;
  top: 2px;
  margin-left: 9px;
  vertical-align: baseline;
}

.action-modal .section.footer {
  margin-top: 28px;
  font-size: 12.5px !important;
}
.action-modal .section.footer label {
  font-weight: bold;
  color: #363636;
}

.info-icon {
  background-image: url('/img/info-icon.png');
  background-repeat: no-repeat;
  background-size: 18px;
  display: inline-block;
}

.help-description {
  margin: 0 4px 2px;
  cursor: pointer;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  /*
  color: #363636;
  border-radius: 50%;
  width: 17px;
  height: 18px;
  display: inline-block;
  text-align: center;
  margin: 0 6px 2px;
  vertical-align: middle;
  cursor: pointer;
  font-weight: normal;
  line-height: 0.89;
  font-size: 1.35em;
  */
}

/* Share */
#share.share-modal {
  border-top: 4px solid #aaa;
  /* margin-top: 20px !important; */
  padding-top: 22px !important;
}

#share.share-modal .copy-button {
font-size: 0.8em;
margin-right: 4px;
}

#share .section {
  margin: 2.25rem 0;
}

#share button#shareOnFB .f-svg {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}
#share button#shareOnFB .right-side {
  position: relative;
  top: 2px;
}
#share button#shareOnFB .left-side {
  float: right !important;
  width: auto !important;
}

/* Feed */
.feed-post {
  margin: 30px 0;
  border-bottom: 1px solid #ddd;
}
.feed-post-header {
  display: table;
  width: 100%;
}
#home-feed .feed-post {
  padding-bottom: 54px;
}
#home-feed .feed-post-header {
  margin-bottom: 20px;
}
#home-feed .feed-post-content {
  padding: 0 3px;
}

#my-posts .feed-post-content {
  padding: 0;
}
#my-posts .feed-post-header h2 {
  right: 0 !important;
}
#my-posts .feed-post-header {
  margin-bottom: 6px;
}
#my-posts .feed-post {
  padding-bottom: 30px;
}

a.feed-post-content,
a.feed-post-content:visited,
a.feed-post-content:hover,
a.feed-post-content:focus,
a.feed-post-content:active
{
  text-decoration: none;
  border: 0 none;
  display: block;
}

a.readMore,
a.readMore:visited,
a.readMore:hover,
a.readMore:focus,
a.readMore:active {
  color: #888;
  border-bottom-color: #888;
  padding: 0 3px;
}

/*
.form-group.alert label[for='email']:after {
  content: " (שים כתובת דוא\"ל נורמלית בבקשה)";
  color: #dd3636;
}
.form-group.alert label[for='password']:after {
  content: " (הסיסמא צריכה להכיל 5 תווים לפחות)";
  color: #dd3636;
}
*/


/* FB-button */
.f-svg {
  width: 24px;
  height: 24px;
  margin: 8px;
 }
 .f-container {
 height: 24px;
 margin: 8px;
 }

 .right-side {
   float: right;
 }
 .left-side {
   float: left;
   margin: 0;
   width: calc(100% - 56px);
 }
 .fb-button {
  background-color: #4267b2;
  border-radius: 4px;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 21px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 1.7;
}


/* My Posts */
span.post-status {
  margin-right: 1rem;
  color: #aaa;
  font-weight: normal !important;
}
.edit-links {
  font-size: 0.68em;
}
.edit-links a,
.edit-links a:hover,
.edit-links a:focus
{
  border: 0 none;
}

.feed-search {
  width: 50% !important;
  margin-top: 16px;
}
/* Post Read */

.post-read #container #content {
  max-height: calc(100vh - var(--header-height,34px) -4px);
}
.post-read #post .content a {
  background-color: #eaeaea;
}
.post-read #post .content a:hover {
  font-weight: bold;
}
.edit-link {
  font-size: 0.70em;
  /* float: right; */
  /* display: block; */
  position: absolute;
  right: 63px;
  top: 44px;
  z-index: 999;
}
a.edit-link
a:hover.edit-link
a:focus.edit-link
{
  border: 0 none;
}

.post-controls {
  display: flex;
  width: 100%;
  margin-top: 4px;
  padding: 0 10px;
}

.post-controls .icon {
  font-style: normal;
  /* margin: 8px 20px; */
}
.post-controls .icon:before {
  padding-left: 19px;
  position: relative;
  top: 1px;
}

button.post-control {
  background-color: transparent;
  border: 0 none; /*1px solid #b6b6b6; /* #969696; */
  padding: 0 8px;
  margin: 0 !important;
  height: 34px;
  line-height: 1;
  /* margin: 0 20px; */
  color: #363636;
  font-size: 14px;
  cursor: pointer;
  flex-grow: 1;
}


button.post-control:hover,
button.post-control:active {
  border: 0 none;
  background-color: #eee;
  outline: 0 none;
}
button.post-control:focus {
  background-color: transparent;
  border: 1px solid #999;
}

.post-footer {
  /* bottom: 12px; */
  width: 100%;
  position: relative;
  margin-bottom: 12px;
  /*
  position: absolute;
  bottom: 12px;
  width: 100%;
  */
}
.help-tip {
  text-align: center;
  font-size: 10px;
  color: #777;
  display: none;
  /*
  line-height: 1.3;
  position: relative;
  bottom: 14px;
  background-color: #3f3f3f;
  color: #fff;
  padding: 4px 6px;
  display: table;
  margin: 0 auto;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
  opacity: 0.96;
  */
}

.nekuda-image-container {
  width: calc(100% + 28px);
  max-height: 300px;
  position: relative;
  cursor: default;
  margin-bottom: 2px;
  margin-right: -8px;
}
.nekuda-image {
  width: 100%;
  max-height: 300px;
  /* max-height: calc(25% - 6px); /* 180px; */
  /* max-height: calc(25vh - 6px); /* 180px; */
  object-position: 50% -4px; /* 50% 50%; */
  object-fit: cover;
}
.nekuda-image.loading {
  opacity: 0.5;
}
.nekuda-image-container.active {
  border: 3px dotted gray;
}
.nekuda-image-delete {
  position: absolute;
  right: 6px;
  top: 6px;
  font-weight: bold;
  font-size: 38px;
  background-color: #fff;
  padding: 0;
  margin: 0;
  height: 25px;
  line-height: 0.6;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
  cursor: pointer;
  display: none;
}
.nekuda-image-delete:after {
  content: "\d7";
}
.nekuda-image-container.active .nekuda-image-delete {
  display: block;
}

/* Comments */

#comments {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.95);
  z-index: 999;
  font-size: 16px;
  display: none;
  /* max-height:calc(100vh - var(--header-height,34) - 4px); */
 /* padding-top: var(--header-height, 34px); */
}
#comments .content {
  /* margin-bottom: 40px !important; */
}
#comments #comments-container {
  height: calc(100% - 80px);
  margin-top: 8px;
  padding-bottom: 18px;
}
#comments #comments-handle-bar {
  text-align: center;
  padding: 0;
  cursor: pointer;
  height: 56px;
  position: relative;
  top: -18px;
  border-top: 5px solid #aaa;
}
#comments #comments-handle-bar.open {
  top: 0;
}
#comments #comments-handle-bar .comments-bar {
  background-color: #f0f0f0;
  padding: 6px 0px;
  font-weight: bold;
}
#comments #comments-handle-bar .comments-bar > * {
  display: inline-block;
}
#comments #comments-handle-bar .comments-bar .comments-count {
    width: 49.5%;
    border-left: 1px solid #aaa
}
#comments #comments-handle-bar .comments-bar .post-comment {
  width: 47.5%;
}
#comments #comments-handle-bar .comments-arrow {
  font-size: 30px;
  position: relative;
}
#comments #comments-handle-bar .comments-arrow.up {
  top: 6px;
}
#comments #comments-handle-bar .comments-arrow.down {
  top: -7px;
  color: #aaa;
}
#comments #comment-count {
  margin-left: 6px;
}
#comments .comment {
  margin-bottom: 14px;
  line-height: 1.2;
  max-width: 84%;
}
#comments .comment-replies {
  position: relative;
  right: 32px;
  margin-top: 14px;
}
#comments .comment .comment-header > *,
#comments .comment .comment-footer > * {
  display: inline-block;
}
#comments .comment .comment-footer {
  display: block;
  margin: 2px 32px 0 0;
  font-size: 11.5px;
  color: #666;
  padding: 0 6px;
  position: relative;
  min-height: 13px;
}
#comments .comment .comment-footer > * {
  margin-left: 1.5ex;
}
#comments .comment .comment-footer .comment-reply-button {
  cursor: pointer;
}
#comments .comment .comment-person {
  background-image: url("https://res.cloudinary.com/w1k/image/facebook/c_thumb,f_jpg,g_face:center,h_68,q_auto:best,r_30,w_68/10157243553837977.jpg");
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  vertical-align: text-bottom;
  margin-left: 2px;
  position: relative;
  top: 2px
}
#comments .comment .comment-name {
    font-weight: bold;
    color: #505050;
}

#comments .comment .comment-content {
  background-color: #f4f4f4;
  padding: 4px 8px;
  border: 1px solid #eee;
  margin-right: 32px;
  display: table;
}

.comment.reply .comment-send {
  position: absolute;
  left: 0;
  top: 2px;
}

.comment .comment-content.post-comment {
  display: block !important;
}
.comment .comment-content.focused {
  border: 1px solid #ddd !important;
}

#post-comment {
  background-color: #fff;
  position: absolute;
  z-index: 200;
  width: 100%;
  padding: 14px 20px;
  border-bottom: 1px solid #ddd;
  box-shadow: 0px 1px 2px 0px rgba(80,80,80,0.18);
  display: none;
}
#post-comment .x-close {
  cursor: pointer;
}
#post-comment .x-close:after {
  content: '\d7';
  position: absolute;
  left: 14px;
  font-size: 28px;
  top: 6px;
  color: #666;
}
#post-comment .comment {
  width: 90%;
}
#post-comment .comment .comment-header {
  margin-bottom: 4px;
}
.comment.reply .comment-content,
#post-comment .comment .comment-content {
  height: 74px;
  overflow: auto;
  direction: ltr;
}
.comment.reply .comment-text,
#post-comment .comment .comment-content .comment-text {
  height: 100%;
  width: 100%;
  direction: rtl;
}

#post-comment .comment .comment-send {
  float: left;
  margin-top: 8px;
  margin-left: 7px;
  height: 24px;
  padding: 2px 8px 4px 8px;
  font-size: 14px;
  background-color: #363636;
}

/* Alert / Modal */

.modal {
  border: 1px solid #ddd;
  border-radius: 0.25em;
  padding: 24px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0.25em;
  padding: 24px;
  position: absolute;
  z-index: 9999;
  background-color: #fff;
  /* box-shadow: 0 1px 1px rgba(0,0,0,0.6); */
  width: 100%;
  top: 50%;
  top: 50vh;
  transform: translateY(-50%);
}
#alert {
  text-align: center;
  display: none;
}
h1.alert-header,
h1.modal-header {
  line-height: 1;
  margin: 0 0 20px 0;
  text-align: center;
}

.alert-controls,
.modal-controls {
  text-align: center;
  margin-top: 20px;
}
.modal-controls > * {
  display: inline-block;
  margin: 0 4px;
}

/* Loader */
.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(255,255,255,0.7);
}
.loader .load-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;

}
.loader-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 200;
  -webkit-animation: pulse 1.4s ease-in-out infinite;
  animation: pulse 1.4s ease-in-out infinite;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #3a3a3a;
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(0.3); opacity:0.2; }
  50% { -webkit-transform: scale(1); opacity:1; }
  100% { -webkit-transform: scale(0.3); opacity:0.2; }
}
@keyframes pulse {
  0% { -webkit-transform: scale(0.3); opacity:0.2; }
  50% { -webkit-transform: scale(1); opacity:1; }
  100% { -webkit-transform: scale(0.3); opacity:0.2; }
}


@keyframes loading {
  from {
    margin-right: 100%;
  }
  to {
    margin-right: 0%;
  }
}

.scotch-panel-wrapper {
  height: calc(100% - 34px - 4px);
  height: calc(100vh - 34px - 4px);
  height: calc(100vh - var(--header-height,34px) - 4px);
}



/* Portrait */
@media only screen and (orientation: portrait) {
  #container {
    width: 96%;
		width:96vw;
  }
  /*
  #content {
    top: 3.5%;
    top: 3.5vh;
  }
  */
}





/* Landscape */
@media only screen and (orientation: landscape) and (max-width:680px) {

  .post-read #container #content
  {
    /* Golden ratio */
    max-width: 61.803398875%;
    max-width: 61.803398875vw;
  }

    /*
  #content {
    top: 0;
  }
  */
}

@media only screen and (orientation: landscape) and (max-height:320px) {
  #content {
    bottom: -7%;
    bottom: -7vh;
  }
}


@media only screen and (max-width:680px) {
  #user-menu {
    right: 0 !important;
  }
  #help-menu {
    left: 0 !important;
  }
  .header-menu.right.knob:before,
  .header-menu.right.knob:after
  {
    right: calc(2.5% + 6px)
  }

  .header-menu.left.knob:before,
  .header-menu.left.knob:after
  {
    left: calc(2.5% + 6px);
  }
}

/* Fixes for Facebook browser */
.standalone-browser .slide-container {
  /* height: calc(90vh - 200px) !important; */
}

.standalone-browser #composer .slide-container {
  /* height: calc(90vh - 400px) !important; */
}

/* Simple-Bar scrollbar */

.ss-wrapper {
  overflow : hidden;
  height   : 100%;
  position : relative;
  z-index  : 1;
  /* float: left; */
}

.ss-content {
  height          : 100%;
  width           : 100%;
  padding         : 0;
  position        : relative;
  /* overflow        : auto; */
  overflow-x: hidden;
  overflow-y: scroll;
  -moz-box-sizing : border-box;
  box-sizing      : border-box;
  overscroll-behavior: none;
}

.ss-content.withScrollbar {
  right: -18px;
}
.ss-content.noScrollbar {
  right: 0;
}

.ss-scroll-wrapper {
  right: 0;
  width: 12px;
  position: absolute;
  height: auto;
  left: auto;
  top: 0;
  bottom: 0;
  z-index: 2;
}
.ss-scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}
.ss-scroll-rail {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #c2c2c2;
  border-radius: 0;
  width: 12px;
  z-index: 100;
}
.ss-scroll {
  position: absolute;
  top                 : 0;
  z-index             : 2;
  cursor              : pointer;
  opacity: 1;
  background-color: #4d4d4d;
  width: 100%;
  border-radius: 0;
  opacity: 0.76;
  transition: opacity .2s ease-in-out;
  overscroll-behavior: none;
}

.ss-container:hover .ss-scroll,
.ss-container:active .ss-scroll,
.ss-container.active .ss-scroll
{
  opacity: 1;
}

.ss-grabbed {
   user-select: none;
   -o-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}


/* Help Bubbles */
#usermenu-help {
  top: 40px;
  top: calc(34px + 6px);
  top: calc(var(--header-height,34px) + 6px);
  right: 6px;
}
#usermenu-help:before,
#usermenu-help:after {
  left: calc(96% - 2.1vw);
}

#compose-help {
  top: 40px;
  top: calc(34px + 6px);
  top: calc(var(--header-height,34px) + 6px);
  left: 6px;
}
#compose-help:before,
#compose-help:after {
  left: 7vw;
}

  /*
  .slide-container {
    height: calc(90vh - 200px) !important;
  }

  /*
  #composer .slide-container {
    height: 30vh;
  }
  */


/*
@media screen and (max-height: 300px) {
  .editor,
  .slick-list {
     min-height: 132px;
  }
  #composer {
    position: relative;
    top: -90px;
  }
  #upperEditor {
    position: absolute !important;
    display: block !important;
  }
}
*/
/*
@media all and (display-mode: browser) {
  #content {
    height: calc(100vh - 10% - 86px - 10%) !important;
  }
  .slide-container {
    height: calc(90vh - 348px) !important;
  }
}
*/
/*
.slick-slider {
  margin-bottom: 0;
}
*/


@media only screen and (min-width: 594px) {
  #container {
    max-width: 594px !important;
  }
}
@media only screen and (min-height: 820px) {
  #container {
    padding-top: calc(5% + 34px);
    padding-top: calc(5% + var(--header-height,34px));
  }
  .scotch-panel-wrapper {
    height: calc(100% - 34px - 4px - 34px);
    height: calc(100vh - 34px - 4px - 34px);
    height: calc(100vh - var(--header-height,34px) - 4px - var(--header-height,34px));
  }

}

@media only screen and (orientation: landscape) and (min-width: 1128px) {
  .slide-container {
    height: 35% !important;
    height: 35vh !important;;
    height: var(--slide-container-landscape, 35vh) !important;
  }
}

/* For devices that doesn't have an hover */
@media (hover: none) {
  #composer .toolbar button:active,
  #composer .toolbar button:hover {
    background: transparent;
    opacity: inherit;
    border: 0 none;
    outline: 0 none;
  }
}

/*
@media only screen and (min-width:599px) {
   body {
      font-size: 20px;
   }
   #logo {
      line-height: 0.9;
   }
}

@media only screen and (min-width:899px) {
   body {
      font-size: 22px;
   }
   #logo {
      line-height: 0.85;
   }
}
*/