/* Mobile */
@media only screen and (max-width: (@tabletBreakpoint - 1)) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: (@computerBreakpoint - 1)) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: @computerBreakpoint) and (max-width: (@largeMonitorBreakpoint - 1)) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: (@widescreenMonitorBreakpoint - 1)) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.left.sidebar{
    margin-left: 2.4rem !important;
  }
}

body {
  background: #f2f2f2;
  max-height: 100vh;
  font-size: 15px !important;
}

body.pushable{
  background: rgb(255, 255, 255) !important
}

a {
  color: #5f5f5f;
  text-decoration: none;
}

a:hover {
  color: #444444;
  text-decoration: none;
}


p {
  margin: 0 0 2em;
  line-height: 1.5285em !important;
}

h1 {
  font-size: 1.4rem;
}

.ui.grid{
		padding: 0 !important;
}
.pushable.segment{
  margin: 0 !important;
}

.posts {
  height: 100%;
  overflow: scroll;
}

.segments{
  margin: 1rem 0 !important;
}

.ui .segments{
  margin: 1rem 0 !important;
}

.menu {
  background: #f2f2f2 !important;
}
.ui.label .right {
  float:right;
}

.ui.label .left {
  float:left;
}


.ui.selection.list .list>.item, .ui.selection.list>.item {
  color: #000 !important;
}

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

.post-count-label {
  position: absolute !important;
  transform: translateX(-126%) !important;
  padding: .501em .833em !important
 }

.description {
  margin-top: 2.4rem !important;
  font-size: 1.19rem !important;
}
.ui.card{
  background: #f7f7f7;
}
 /* make segments flat*/
 .ui.segment {
  border-radius: 0em !important;background: #f2f2f2 !important;
 }

 .ui.left.sidebar{
   min-width: 22rem;
   max-width: 100%;
   margin-top:3rem !important;
   z-index: 999;
   padding-bottom: 3rem !important;
 }

 .ui.sidebar.menu .item{
   line-height: 1.3rem !important;
 }

 .ui.segments .segment {
   font-size: 1.14rem !important;
 }

.ui.vertical.menu .item > .label{
  background: #d9d9d9 !important;
  color: #5d5d5d !important;
}
 /* Search */
.ui[class*="right aligned"].search>.results {
  right: auto;
  left: 0;
}

.ui.selection.dropdown{
  min-height: initial !important;
  font-size: .85714286rem;
}

select.ui.dropdown{
  height: auto !important;
}

.ui.menu.fixed {
  /* Set a fixed width for the navbar */
  width: 100%;
  display: flex;
}

.scrollable-wrapper {
  overflow-x: auto;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer 10+ */
}

.scrollable-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.link-group {
  white-space: nowrap; /* Prevent line breaks for horizontal layout */
}

.ui.menu.fixed .item{
  max-height: 42px !important;
}

.link{
  cursor: pointer;
  word-break: break-all;
}

/**
* Pusher, Sidebar, Scroll Fix
 */
.pusher{
  margin-top:2rem !important
}
.pushable{
  height:initial !important;
}

.pushable:not(body) {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.pushable:not(body) > .ui.sidebar,
.pushable:not(body) > .fixed,
.pushable:not(body) > .pusher:after {
  position: fixed;
}

.ui.menu .item::before{
  content: none;
}

.description a.item {
  color: #0f0f10 !important;
}
.description {
  text-align: justify;
}

#cc-main {
  --cc-footer-bg: #f2f2f2;
  --cc-btn-secondary-bg: #e0e1e2;
  --cc-btn-secondary-color: #5a5a5a;
  --cc-btn-primary-hover-bg: #cacbcd;
  --cc-btn-primary-hover-color: rgba(0,0,0,.8);
  --cc-btn-primary-hover-border-color: #cacbcd;

  --cc-btn-secondary-hover-bg: #cacbcd;
  --cc-btn-secondary-hover-color: rgba(0,0,0,.8);
}

.overlay-img {
  position: absolute;
  right: -0.3rem;
  width: 2.3rem;
  height: auto;
  pointer-events: none;
  filter: grayscale(100%);
  opacity: 0.2;
  z-index: 1;
  top: .2rem;
}