/* dark */
:root {
  --accent: #226997;
  --main: #333;
  --light: #666;
  --lighter: #f3f3f3;
  --border: #e6e6e6;
  --bg: #ffffff;
  --body: #f4f4f2;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
    --body: #333333;
  }
} */

/* global */
a { cursor: pointer; }
body, body.pushable>.pusher {background-color: var(--body);}
.one-line {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 1; -moz-box-orient: vertical; overflow-wrap: break-word; word-break: break-all; white-space: normal; overflow: hidden;}
.two-line {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; overflow-wrap: break-word; word-break: break-all; white-space: normal; overflow: hidden;}
.pusher > .ui.container {min-height: 80vh;}
.flex-between {display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.ui.segment.labels {padding-bottom: 0.5rem !important;}
.ui.message .close.icon {position: absolute; margin: 0; top: 14px; right: 1.3em; z-index: 1;}
.ui.cards {width: 100%; margin: 0em !important}
.ui.header-title.flex-between span, .ui.header-title.flex-between .span { font-size: 1.28571429em; font-weight: 700; line-height: 1.28571429em; color: rgba(0,0,0,.87); }
.none {display: none !important;}
.ui.input>input {line-height: 1.414286em;}
body, body.pushable>.pusher { background-color: rgba(255, 255, 255, .95); }
.scroll-container { width: 100%; overflow-x: scroll; }
/* @media only screen and (min-width: 1400px) {
  .ui.container {width: 1400px; margin-left: auto!important; margin-right: auto!important;}
} */
@media only screen and (min-width: 1400px) {
  .ui.container {width: 1500px; margin-left: auto!important; margin-right: auto!important;}
}
@media only screen and (min-width: 767px) {
  .ui.container.mobile {margin: 0 auto !important; padding: 0; max-width: 767px !important;}
}
@media only screen and (max-width: 767px) {
  .ui.container.mobile {margin: 0 auto !important; padding: 0; padding-bottom: 110px;}
  .ui.items>.item>.image+.content { text-align: center; }
  footer.ui.container {display: flex; flex-direction: column; align-items: center;}
}

/* mobile tabs */
.page {padding-top: 56px;}
.tabs.bottom {max-width: 767px; position: fixed; bottom: 0; width: 100%; height: 60px; background-color: #FFF; display: flex; align-items: center; justify-content: space-around;}
.tabs.bottom .tab {display: flex; flex-direction: column; align-items: center; color: grey;}
.tabs.bottom .tab.active {color: #000;}
.tabs.bottom i {font-size: 23px; margin: 0 0 2px;}
.tabs.bottom small {height: 16px; line-height: 16px;}

/* navbar */
.navbar {background: #fff;}
.navbar i.icon {margin: 0;}
.navbar .ui.container {display: flex; align-items: center;}
.navbar .ui.container .logo {height: 35px; border-radius: 4px;}
.navbar .q-navbar {display: flex; flex: 1; justify-content: space-between; padding: 1rem 0;}
.navbar .q-navbar .left .item { color: #999; display: flex; font-size: 14px;}
.navbar .q-navbar .left .item:hover { color: #333; }
.navbar .q-navbar .left .item.active { color: #000000; font-weight: 400; display: flex; font-size: 14px;}
.navbar .items {display: flex;}
.navbar .items .item {color: rgba(0, 0, 0, 0.65); font-size: 1rem; text-decoration: none; cursor: pointer;}
.navbar .items .item:hover {color: rgba(0, 0, 0, 1);}
.navbar .q-navbar .left .item {margin-right: 3.5rem; display: flex; align-items: center;}
.navbar .q-navbar .right .item { color: #999; margin-left: 3.5rem; display: flex; align-items: center;}
.navbar .q-navbar .right .item:hover { color: #333; }
.navbar .q-navbar .right .item.active { color: #000000; font-weight: 400; display: flex; font-size: 14px;}
.navbar .q-navbar .right .item.flag-value {display: flex; justify-content: space-between; margin-left: 0;}
.navbar .q-navbar .item.flag-value i.flag {margin: 0;}
.main .item {position: relative; border: 0 solid #CCC; margin-bottom: 40px; overflow: hidden;}
.navbar .q-navbar .right.items {justify-content: flex-end; align-items: center;}
.sub-navbar {margin-top: 1rem; background: #FFF; overflow: hidden;}
.sub-navbar, .sub-navbar .items-link, .sub-navbar .ui.search {height: 48px; position: relative; top: 0; transition: top 0.3s;}
.sub-navbar .items-link {padding: 1rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.sub-navbar .ui.search {padding: 1rem; flex: 1;}
.sub-navbar .ui.search button {padding: 0; background: transparent; border: 0; cursor: pointer;}
.sub-navbar .items { display: flex; flex-direction: row;}
.sub-navbar .items>.item {margin-right: 3vw;}
.sub-navbar .items>.item:last-child {margin: 0;}

/* admin navbar */
.admin.navbar {background-color: #000;}

/* sidebar */
.ui.sidebar {flex-direction: column;}
.ui.sidebar .q-navbar {flex: 1; display: flex; flex-direction: column;}
.ui.sidebar .item.menu, .ui.sidebar .item.logo {display: none !important;}
.ui.sidebar .q-lists.left.items {display: flex; flex-direction: column; flex: 1;}

/* header */
.ui.header.header-flex-between {display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
.ui.header.header-flex-between a {margin: 0;}

/* footer */
.footer {margin-top: 1rem; padding-bottom: 1rem;}
.footer p {color: rgba(0,0,0,.4);}

/* message */
.ui.message {display: flex; flex-direction: row;}
.ui.message .content {flex: 1;}
.ui.message .content .header {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; word-wrap: break-word; word-break: break-all; white-space: normal;}
.ui.message .image {width: 100px; height: 60px; border-radius: 5px; margin-left: 1em;}

/* media */
@media only screen and (max-width: 1000px) {
  .navbar .item {display: none !important;}
  .navbar .item.user {display: block !important;}
  .navbar .items .item.menu, .navbar .content .item.logo {display: flex !important; height: 40px;}
}

@media only screen and (min-width: 1000px) {
  .navbar .items .item {display: flex;}
  .item.menu {display: none !important;}
  .navbar .content .item.logo, .navbar .content {display: none !important;}
}