@charset "utf-8";
/* CSS Document */
/* Last Edited: 05/22/2026 */

/* Structure
1.1 Main
1.2 Navbar
1.2.1 Pop Menu
1.2.2 Nav Buttons
1.3 Footerthumb
1.4 Forms
1.4.1 Toggle
1.5 Lightbox
1.5.1 Lightbox Video Player
1.5.2 Lightbox Baord Editor
1.6 Projects / Management
1.6.1 Comment Tags
1.6.2 Badges
1.6.3 Category Labels
1.7 Trays / Sidebar
1.7.1 Inspector
1.7.2 Comment Tray
1.7.3 Sidebar
1.7.4 Conversations
1.7.5 Progress Bar
1.8 Popup Selectors
1.8.1 Notifications
1.9 Dropdowns
1.10 Navigation Elements
1.11 Main Content
1.12 Tasks

2.1 Script
2.2 Translations

3.1 Object List
3.2 Object Single
3.3 Object Tiles
3.4 Data Tables
3.5 Media

4.0 Approvals

5.1 Charts

6.1 Design Elements
6.2 Icons

7.1 Animatics
*/


/* 1.1 Main */
html {
  height:100%;
  overflow:hidden;
  background-repeat:no-repeat;
}
body {
  font-family:"Sarabun",sans-serif;
  position:absolute;
  margin: 0px auto;
  color:white;
  background-color:#0C111D;
}
body.platform {
  overflow-y:hidden;
  height:100%;
  transition:width 1s, left 1s;
  left:280px;
  width:calc(100% - 280px);
}
body.fullpage {
  height:100%;
  width:100%;
}
body.navbarClosed {
  left:80px;
  width:calc(100% - 80px);
}

/* 1.11 Main Content */

.content h2 {
  color:#38baa4;
  font-size:1.7rem;
  margin-top:0px;
  margin-bottom:0px;
}

.content p {
  color:#AAAAAA;
  margin:15px 0px;
}

.content p b {
  color:#CCCCCC;
}

#progress-bar-wrapper {
  position:relative;
  height:20px;
  width:200px;
  margin-left:auto;
  margin-right:auto;
}
#progress-target {
  height:30px;
  width:4px;
  background-color:white;
  position:absolute;
  top:-5px;
  left:0px;
}
#progress {
  text-align:center;
  margin:0px 20px 8px 20px;
}
main {
  height:100%;
  border-left: 2px solid #1F242F;
  border-top: 2px solid #1F242F;

  overflow-y:auto;
  transition: margin 1s;
}
main::-webkit-scrollbar {
  display:none;
}
main.ultra-narrow {
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
}
main.has-sidebar {
  margin-left:277px;
}
main.has-inspector {
  margin-right:330px;
}
main.commentMode {
  margin-right:300px;
}
main.light-mode {
  background-color:white;
  color:black;
}
.page-row-content {
  position:relative;
  /*overflow:hidden;*/
}
.content.narrow .page-row-content {
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.narrow-stripe .page-row-content {
  padding:10px 25px;
}
.page-row-content.wide {
  max-width:1000px!important;
}
.v-center {
  position:relative;
  top:50%;
  transform: translateY(-50%);
  padding: 2px 0px;
}
h1 {
  margin-top:0px;
}

h3 {
  margin-bottom:5px;
}
h3.list-header {
  border-bottom:2px solid white;
}
border-bottom:2px solid white;
.page-row {
  padding:30px 20px;
  clear:both;
}
.page-row.full-width {
  padding: 50px 0px;
}
.title-wrapper {
  height:100%;
  width:100%;
  position:relative;
}
.page-row.title {
  padding:0px 20px;
  width:100%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.page-row.gray {
  background-color:#1f242f;
}
.page-row.gradient-background {
  background-image:linear-gradient(0deg, #02c765,#38BAA4);
}
.page-row-content.footer {
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  padding:60px 0px;
  background-color:#1f242f;
}
.page-row-content.footer h2 {
  margin-top:0px;
  margin-bottom:0px;
  font-size:2rem;
  color:#38baa4;
}
.page-row-content.features {
  background-color:#1f242f;
  padding:50px;
}
.features-header {
  text-align:center;
}
.features-header h2 {
  margin-bottom:0px;
  color:#38baa4;
  font-size:2.5rem;
}
.features-header p {
  margin-top:0px;
}
.features-list {
  text-align:center;
}
.feature {
  width:20%;
  display:inline-block;
  padding:40px;
  vertical-align:top;
}
.feature h3 {
  margin:0px;
  font-size:0.9rem;
}
.feature p {
  margin:0px;
  font-size:0.8rem;
  color:#999999;
}

.social-icons {
  margin:15px 0px;
}
.social-icon {
  display:inline-block;
  padding:0px 10px 0px 0px;
}
.full-width-background-right {
  width:calc(100% - 500px);
  position:absolute;
  top:0px;
  right:0px;
  z-index: -1;
}
.full-width-background-left {
  height:100%;
  width:calc(100% - 600px);
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
}
.full-width-background-left img, .full-width-background-right img {
  object-fit:contain;
}
.block-40 {
  width:38%;
  display:inline-block;
  vertical-align:middle;
}
.block-60 {
  width:58%;
  display:inline-block;
  vertical-align:middle;
}
.fill-image {
  width:100%;
  height:auto;
}
.fill-image img {
  height:auto;
  width:100%;
  object-fit:contain;
}
.text-block {
  padding:50px;
  text-align:center;
  background-color:#0c111D;
  box-shadow:0px 0px 40px 60px #0c111d;
}
.text-block-left {
  left:0px;
}
.text-block-right {
  right:0px;
  width:500px;
  margin-left:calc(100% - 600px);
}
.text-block p {
  font-size:1.8rem;
}
.text-block h2 {
  color: #38baa4;
  font-size:3.0rem;
  margin:15px 0px;
}
.text-block h2 span {
  color: white;
  font-size:2.5rem;
}
.page-row.gradient-background {
  background-image:linear-gradient(-90deg, #02c765,#38BAA4);
}
.block-quote {
  padding:60px;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  font-size:1.8rem;
  line-height:1.5;
  color:black;
}
.quote-name {
  text-align:right;
  padding-top:20px;
  font-weight:bold;
}

.content {
  margin-top:10%;
  min-height:calc(100% - 62px);
  /*padding:30px 0px 20px 32px;*/
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:40px;
}
.content h2 span.header-tag {
  display:block;
  color:white;
  font-size:1.0rem;
  text-align:center
  font-weight:normal;
}
.centerLogo {
  height:600px;
  width:600px;
  background-image:url('/images/evertasks_logo_dark_transparent.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-left:auto;
  margin-right:auto;
  max-width:90%;
  max-height:25vw;
  margin-bottom:40px;
}
.centerLogoIcon {
  height:180px;
  width:300px;
  background-image:url('/images/evertasks_icon.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-left:auto;
  margin-right:auto;
}
.tagline {
  text-align:center;
  color:#38baa4;
  font-size:1.2rem;
  margin-bottom:25px;
}
.tagline span {
  font-size:1.8rem;
}
.scroll {
  height:100%;
  overflow-y:auto;
  margin-top:0px;
}
.noscroll {
  overflow:hidden;
  height:calc(100% - 70px);
}

h1 {
  color:#4a90E2;
  font-weight:bold;
  font-size:1.8rem;
  text-align:center;
  margin-top:25px;
}
p.message {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  max-width:300px;
  text-align:center;
  color:#CCCCCC;
}
.page-topnav {
  margin:5px 30px 5px 45px;
  position:absolute;
  top:0px;
  right:0px;
}
.page-topnav h1 {
  display:inline;
}
.page-topnav a {
  text-decoration:none;
  color:inherit;
  text-transform:uppercase;
  font-weight:normal;
  font-size:1.2rem;
}
.page-topnav .icon {
  float:right;
  height:40px;
  width:40px;
}
.page-topnav .icon img {
  height:40px;
  width:40px;
}
.callout {
  max-width:250px;
  width:calc(100% - 120px);
  margin:40px auto;
  background-color:#1f242f;
  padding:60px;
  border-radius:20px;
  text-align:center;
}
.callout h2 {
  margin-top:0px;
  margin-bottom:20px;
  text-align:center;
}
.object-info {
  margin-left:80px;
}
.gradient-divider {
  width:100%;
  height:25px;
  background-image:linear-gradient(-90deg, #02c765,#38BAA4);
}
.stats-wrapper {
  display:flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y:hidden;
  scroll-behavior: smooth;
  border-bottom:2px solid #444444;
  padding:25px 0px 30px 0px;
}
.stats-wrapper::-webkit-scrollbar {
  display:none;
}

.stat {
  width:300px;
  flex:0 0 auto;
  position:relative;
}
.icon.stat-nav {
  display:none;
  position:absolute;
  top:20px;
  left:0px;
  z-index:6;
}
.stat-nav.right {
  left:unset;
  right:0px;
}

@media only screen AND (max-width:500px) {
  .stat {
    width: 100%;
  }
  .icon.stat-nav {
    /*display:block;*/
  }
  .centerLogo {
    height:300px;
    width:300px;
    max-height:unset;
    max-width:unset;
  }
  main.has-sidebar {
    margin-left:0px;
  }
  .page-row.title {
    padding: 30% 20px 20% 20px;
    width: calc(100% - 40px);
  }
  .page-row.border {
    border-bottom:1px solid #DDD;
  }
  .block-40 {
    width:100%;
    display:block;
    padding: 50px 0px;
  }
  .block-60 {
    width:100%;
    display:block;
    padding: 50px 0px;
  }
  .fill-image img {
    width:100%;
    height:auto;
  }
  .block-quote {
    padding: 20px;
    font-size:1.3rem;
  }
  .page-row-content.features {
    padding:50px 20px;
  }
  .features-header h2 {
    margin-bottom:5px;
    font-size:2.0rem;
  }
  .feature {
    width:calc(100% - 80px);
    border:1px solid #444444;
    border-radius:20px;
    margin:20px;
    padding:20px;
  }
  .feature h3 {
    margin-bottom:5px;
  }
  .callout {
    padding:20px;
    margin:60px auto;
  }
  .page-row-content.footer {
    padding:40px 20px;
  }
  .crumb {
    height:18px!important;
    font-size:0.8rem;
  }
  .crumb img {
    height:18px;
    width:18px;
  }
  .crumb-separator {
    height:30px!important;
  }
  .object-info {
    margin-left:60px;
  }

}

.center-div {
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin:0px!important;
}
/* 1.2 Navbar */
#logo {
  width:100%;
  height:32px;
  background-image: url('/images/evertasks_navlogo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position: left center;
  margin-bottom:24px;
  transition:height 1s;
}

#navbar {
  position:fixed;
  top:0px;
  left:0px;
  z-index:32;
  height:calc(100% - 36px);
  width:240px;
  padding:18px;
  background-color:#0C111D;
  font-family:"Sarabun",sans-serif;
  transition: width 1s;
}
#closenav {
  position:absolute;
  top:20px;
  right:-16px;
  background-image:url('/images/chevron-left.svg');
  background-repeat:no-repeat;
  opacity:0;
  height:24px;
  width:24px;
  border-radius:12px;
  overflow:hidden;
  background-color:#1f242F;
}
#closenav:hover {
  background-color:#666666;
  cursor:pointer;
}
#navbar:hover #closenav {
  opacity:1;
}
#navbar .closed-only {
  display:none;
}
@media only screen and (min-width:500px) {
  .navbarClosed #closenav {
    background-image:url('/images/chevron-right.svg');
  }
  .navbarClosed #navbar {
    width:44px;
  }
  .navbarClosed #navbar .closed-only {
    display:block;
  }
  .navbarClosed #logo {
    background-image:url('/images/evertasks_navicon.png');
    height:40px;
  }
  .navbarClosed .navitem .navtext {
    display:none;
  }
  .navbarClosed #closenav {
    background-image:url('/images/chevron-right.svg');
  }
  .navbarClosed .userinfo {
    display:none;
  }
  .navbarClosed .navicon {
    left: 10px;
  }
  .navbarClosed .navsubitem {
    margin-left:unset;
  }
  .navbarClosed .navchilditem {
    margin-left:unset;
  }
  .navbarClosed .switch-project {
    display:none;
  }
  .navbarClosed #logout {
    display:none;
  }
  .navbarClosed #searchbox {
    display:none;
  }
  .navbarClosed #search {
    border:none;
  }
  .navbarClosed #search:hover {
    background-color:#1F242F;
    cursor:pointer;
  }
}
#search {
  position:relative;
  height:32px;
  margin-bottom:24px;
  padding:4px;
  width:calc(100% - 8px);
  border:1px solid #666666;
  border-radius:10px;
}
#search.active #searchbox {
  color:#FFFFFF;
}
#search.active #searchicon {
  opacity:1;
}
#searchicon {
  opacity:0.6;
  position:absolute;
  top:8px;
  left:8px;
}
#searchbox {
  color:#666666;
  background-color:unset;
  border:none;
  position:absolute;
  left:36px;
  top: 6px;
  height:24px;
  outline:none;
  font-family:"Sarabun",sans-serif;
  font-size:1.2rem;
}
.navitem {
  position:relative;
  padding:0;
  margin:6px 0px;
  height:44px;
  border-radius:10px;
  color:#CECFD2;
  cursor:pointer;
}
.navitem.active, .nav-icon.active {
  cursor:default;
  background-color:#1F242F;
  color:#FFFFFF;
}
.navitem.active .navicon {
  opacity:1;
}
.navitem a {
  color:inherit;
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:36;
}
.navitem-content {
  padding:10px 12px;
}
.navitem:hover {
  background-color:#1F242F;
  color:#FFFFFF;
}
.navitem:hover .navicon {
  opacity:1;
}
.navitem.project {
  border-radius:22px;
}
.navitem.project .navicon {
  width:36px;
  height:36px;
  top:4px;
  left:4px;
  border-radius:18px;
  overflow:hidden;
}
.navitem.project .navicon.switch-project {
  left:unset;
  top:10px;
  right:12px;
  height:22px;
  width:22px;
  border-radius:6px;
  overflow:auto;
}
.navicon.switch-project {
  z-index:50;
  opacity:0.5!important;
  transition:transform 0.5s;
}
.navicon.switch-project:hover {
  opacity:1!important;
  transform:rotate(90deg);
}
.navicon.navgroup {
  background-image: url('/images/chevron-right.svg');
  right:5px;
  left:unset;
  top:10px;
  z-index:37;
  cursor:pointer;
}
.navitem.expanded .navgroup {
  background-image: url('/images/chevron-down.svg');
}
.navicon.navgroup.expanded {
}
.navbarClosed .navgroup {
  display:none;
}

.navgroup-Story {
  display:none;
}
.show-navgroup-Story .navgroup-Story {
  display:inherit;
}

.navgroup-Planning {
  display:none;
}
.show-navgroup-Planning .navgroup-Planning {
  display:inherit;
}
.navgroup-Visualize {
  display:none;
}
.show-navgroup-Visualize .navgroup-Visualize {
  display:inherit;
}
.navsubitem {
  margin-left:25px;
}
.navchilditem {
  margin-left:50px;
}
.navicon {
  height: 24px;
  width: 24px;
  position:absolute;
  top:10px;
  left:12px;
  opacity:0.5;
}
.navicon img {
  height:100%;
  width:100%;
}

.navtext {
  position:absolute;
  top:10px;
  left:46px;
  line-height:24px;
}
.userlogout {
  position:absolute;
  right:0px;
  top:12px;
  width:36px;
  height:36px;
  background-color:#0C111D;
  border-radius:6px;
}
.userlogout:hover {
  background-color:#1F242F;
}
.userlogout .navicon {
  top:6px;
  left:6px;
}
.navbarClosed .userlogout {
  display:none;
}
.navbarClosed #usernav {
  display:none;
}
#topnavmenu {
  height: calc(100% - 274px);
  overflow-y:auto;
  width:242px;
  padding-right:16px;
  z-index:4;
  scrollbar-width:thin;
  scrollbar-color:#1F242F #0C111D;
}
#topnavmenu::-webkit-scrollbar {

}
.navbarClosed #topnavmenu {
  width:unset;
  padding-right:unset;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.navbarClosed #topnavmenu::-webkit-scrollbar {
  display:none;
}
#bottomnavmenu {
  position:absolute;
  left:0px;
  bottom:0px;
  border-top:2px solid #1F242F;
  padding:0px 18px 18px 18px;
  width:calc(100% - 36px);
  z-index:5;
}
#usernav {
  margin-top:8px;
  border-top: 2px solid #1F242F;
  padding:12px 0px;
  width:100%;
  position:relative;
}
.settings-group-header {
  padding-bottom:4px;
  margin-bottom:8px;
}
.settings-group {
  border:1px solid #1f242f;

  border-radius:20px 0px 0px 20px;
  margin: 10px;
  padding:10px 30px;
}
.avatar-wrapper {
  width:44px;
  height:44px;
  float:left;
  margin-right:8px;
  position:relative;
}
.comment-icon .avatar-wrapper {
  display:inline-block;
  width: 36px!important;
  height: 36px!important;
  margin-right:0px;
  float:none;
  cursor:pointer;
}
.avatar {
  height:44px;
  width:44px;
  border-radius:22px;
  overflow:hidden;
  color:white;
  font-size:1.7rem;
  text-align:center;
  line-height:1.5;
  font-family: "Sarabun", sans-serif;
  font-weight:bold;
  text-transform:uppercase;
}
.comment-icon .avatar {
  height:30px!important;
  width:30px!important;
  font-size:20px!important;
  line-height:28px!important;
  border: 3px solid #38baa400;
  transition:border 1s;
}
.comment-icon .avatar:hover {
  border:3px solid #38baa4ff;
}
.comment-icon.active .avatar {
  border: 3px solid #38baa4ff;
}
.comment-icon.active-markup .avatar {
  border: 3px solid #38baa4ff;
}
.avatar img {
  height:100%;
  width:100%;
}
.avatar-cluster {
  font-size:1.2rem;
}
.commenter {
  cursor:pointer;
}
.avatar-sm {
  height:30px;
  width:30px;
  font-size:16px;
  border-radius:15px;
  font-family:"Sarabun", sans-serif;
  text-align:center;
  font-weight:bold;
  border: 1px solid #0c111D;
  line-height:30px;
  text-transform:uppercase;
  overflow:hidden;
  display:inline-block;
  margin-left:-8px;
  position:relative;
  vertical-align:middle;
}
.object-cover .avatar {
  height:100%;
  width:100%;
  line-height:60px;
  font-size:34px;
  text-align:center;
  font-weight:bold;
  text-transform:uppercase;
}
.navitem .navicon-letters {
  height:100%;
  width:100%;
  font-size:20px;
  font-family:"Sarabun", sans-serif;
  text-align:center;
  font-weight:bold;
  line-height:34px;
  overflow:hidden;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background-image:linear-gradient(0deg, #02c765,#38BAA4);
}
.comment-wrapper .avatar {
  font-weight:bold;
  font-size:28px;
  line-height:42px;
  text-align:center;
}
/*
// replacing this
.comment-box {
  background-color:#1F242F;
  padding:4px 10px;
  display:inline-block;
  border-radius:8px;
}
*/
.external-user-icon {
  position:absolute;
  width:16px;
  height:16px;
  left:30px;
  top:34px;
  z-index:32;
  background-color:#0c111D;
  overflow:hidden;
  border-radius:10px;
}
.comment-icon .external-user-icon {
  left:20px;
  top:20px;
  height:16px;
  width:16px;
}
.external-user-icon img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.icon {
  display:inline-block;
  height:24px;
  width:24px;
  padding:6px;
  cursor:pointer;
  margin:6px;
  border-radius:8px;
  opacity:0.6;
  z-index:3;
  position:relative;
}
.icon.inactive {
  opacity:0.2;
  cursor:default;
}
.icon.inactive.active {
  opacity:0.6;
  cursor:default;
}
.icon:hover {
  background-color:#1F242F;
  opacity:1;
}
.table-filters.active {
  background-color:#38baa4;
}
.comment-filters-icon.active {
  opacity:1;
  background-color:#38baa4;
}
.comment-filters-icon.active:hover {
  opacity:0.6;
}
.icon.inactive:hover {
  opacity:0.2;
  background-color:inherit;
}
.scriptline-attachments .icon {
  margin: 0px 6px;
}
.scriptline-attachments .icon:hover {
  background-color:#cccccc;
}
.comment-list-nav {
  position:absolute;
  top:5px;
  right:15px;
  color:#CCCCCC;
  font-size:0.8rem;
}
.inspector-header-nav .icon {
  vertical-align:middle;
  margin:0px;
}
#comment-nav-place {
  text-align:center;
}

.icon.sm {
  margin:0px;
  height:18px;
  width:18px;
  padding:0px 10px;
}
.comment-icon {
  position:relative;
}
.comment-icon.addcomment {
  background-image:url('/images/comment-add.svg');
  background-repeat: no-repeat;
  background-position:center;
  background-size:contain;
}
.comment-icon.has-comments {
  background-image:url('/images/comment-alert.svg');
}
.comment-cluster {
  cursor:pointer;
  padding:3px;
}
.commenter {
  height:30px;
  width:30px;
  font-size:16px;
  border-radius:15px;
  overflow:hidden;
  display:inline-block;
  /*margin-right:-15px;*/
  position:relative;
  font-family:"Sarabun", sans-serif;
  color:white;
  text-align:center;
  font-weight:bold;
  line-height:30px;
  text-transform:uppercase;
}
.avatar-pink {
  background-color:#ff8096;
}
.avatar-blue {
  background-color:#3b93e7;
}
.avatar-green {
  background-color:#479747;
}
.avatar-purple {
  background-color:#a36aff;
}
.avatar-orange {
  background-color:#cf890e;
}
.avatar-gray {
  background-color:#1F242F;
}
.icon-static {
  display:inline-block;
  height:24px;
  width:24px;
  padding:6px;
  margin:6px;
}
.icon-float-right {
  position:absolute;
  right:0px;
  top:0px;
}

.userinfo h2 {
  margin:0px;
  font-size:0.9rem;
  font-weight:300;
}
.userinfo p {
  margin:0px;
  font-size:0.7rem;
  font-weight:100;
  color:#999999;
  word-wrap:break-word;
}


#pageTitle {
  position:absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  color:#38BAA4;
  font-size:1.2rem;
  text-align:center;
}
#pageTitle a {
  text-decoration:none;
  color:#38BAA4;
}
.projectIcon {
  height:40px;
  width:40px;
  border-radius:4px;
  overflow:hidden;
  display:inline-block;
  vertical-align:middle;
  margin-right:10px;
}
.projectIcon img {
  height:100%;
  width:100%;
  object-fit:cover;
}
.moduleTitle {
  display:inline-block;
  text-transform:uppercase;
}
.componentTitle {
  font-weight:bold;
  display:inline-block;
  font-size:1.8rem;
}
.avatar-icon {
  height:40px;
  width:40px;
  margin:10px;
  border-radius: 20px;
  overflow:hidden;
  display:inline-block;
}
.avatar-icon img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center;
}
.topicon {
  height:40px;
  width:40px;
  border:1px solid black;
  border-radius:5px;
  display:inline-block;
  float:right;
  margin:10px;
  background-image:linear-gradient(0deg, #02c765,#38BAA4);
  transition:background-color 0.3s;
  cursor:pointer;
  background-color:#ffffff;
  position:relative;
}
.topicon:hover {
  /* this adds transparency so that the white background makes it highlight */
  background-image:linear-gradient(0deg, #02c765,#38BAA477);
}
.topicon img {
  height:40px;
  width:40px;
}
.topicon.active {
  background-image:none;
  background-color:#3B76FF;
}
.count-bubble {
  position:absolute;
  right:-2px;
  bottom:-2px;
  background-color:#3B76FF;
  padding:2px 5px;
  border-radius:5px;
  font-size:0.75rem;
  height:15px;
  line-height:15px;
  width:auto;
  transition:opacity 0.5s;
}
.active .count-bubble {
  opacity:1;
}
/* for comment icons within the page */
.icon .count-bubble {
  opacity:1;
  background-color:#38baa4;
  color:white;
  border:1px solid black;
  right:-10px;
}
#nav-mobile {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:calc(100% - 24px);
  height:40px;
  padding:12px;
  background-color:#0C111D;
  z-index:33;
  border-bottom:2px solid #1f242f;
}
#logo-mobile {
  background-image:url('/images/evertasks_navlogo.png');
  background-position:left center;
  background-size:contain;
  background-repeat: no-repeat;
  margin-left:10px;
  height:32px;
  width:120px;
}
#nav-mobile .icon {
  top:12px;
  right:18px;
}

@media only screen and (max-width:500px) {
  #navbar {
    display:none;
    height:calc(100% - 100px);
    left:unset;
    right:0px;
    top:64px;
    border-left:2px solid #1f242f;
    border-bottom:2px solid #1f242f;
  }
  #navbar #logo {
    display:none;
  }
  #nav-mobile {
    display:block;
  }
  #navbar.opened {
    display:block;
  }
  body.platform {
    left:0px;
    width:100%;
    top:64px;
    height:calc(100% - 64px);
  }
  .content {
    border:none;
    margin:0px;
    padding:10px 20px 40px 20px;

  }
  #avatar-icon {
    display: none;
  }
  #notifications {
    display:none;
  }
  .section-header {
    padding:12px 0px!important;
  }

  .projectIcon {
    float:left;
  }
  .moduleTitle {
    display:inline;
    font-size:1.0rem;
  }
  #pageTitle {
    width:calc(100% - 80px);
    left:10px;
    top:15px;
    transform:none;
    text-align:left;
  }
  .mainButton.float-right {
    margin-right:0px;
  }
  .mainButton .button-text {
    display:none;
  }
  .icon {
    background-color:#1F242F;
    opacity:1;
  }
}

.pagehead {
  position:sticky;
  top:0px;
  height:40px;
  padding-top:5px;
  padding-left:25px;
  padding-right:25px;
  width:calc(100% - 50px);
  background-color:white;
  z-index:3;
}

/* 1.2.1 Pop Menu */

#popmenu {
  position:fixed;
  width:100%;
  z-index:20;
  height:calc(100% - 70px);
  overflow:hidden;
}
#popmenu-bg {
  background-color:rgba(0,0,0,0.5);
  width:100%;
  height:100%;
}
#popmenu-wrapper {
  position:absolute;
  top:0px;
  right:0px;
  font-size:20px;
  background-color:white;
  z-index:20;
  width:250px;
  height:auto;
  max-width:80%;
  max-height:80%;
}
#popmenu-hide {
  display:none;
  position:absolute;
  top:5px;
  right:5px;
  height:30px;
  width:30px;
  border-radius:3px;
  background-image:url('/images/close.png');
  cursor:pointer;
  background-color:white;
}
#popmenu-content {
  height:100%;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
}
.menu-section {
  text-align:center;
}
.menu-title {
  display:none;
  color:#38baa4;
  padding:10px 10px 0px 10px;
  font-weight:bold;
  font-size:1.5rem;
}
.menu-item {
  position:relative;
  display:inline-block;
  height:40px;
  line-height:40px;
  width:100%;
  text-align:center;
  font-size:1.1rem;
  overflow:hidden;
}
.menu-item a {
  display:block;
  color:black;
  text-decoration:none;
  position:relative;
  width:100%;
  height:100%;
}
.menu-item span {
  height:100%;
  width:100%;
  display:block;
}
.menu-item img {
  height:100%;
  width:100%;
}
.menu-item div.text {
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  transform:translateY(-50%);
}
.menu-item:hover {
  background-color:#32baa4;
  cursor:pointer;
}
#modSelector {
  width:120px;
  position:relative;
}
#modOptions {
  position:absolute;
  top:45px;
  font-size:18px;
  text-align:center;
  background-color:white;
  border:1px solid black;
  z-index:5;
  width:120px;
}
.modOpt {
  line-height:35px;
  cursor:pointer;
  position:relative;
}
.modOpt a {
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
#modSelector a {
  color:black;
  text-decoration: none;
}
.modOpt:hover {
  background-color:#ffffb0;
}
#activeMod {
  line-height:40px;
  text-align:center;
  font-size:16px;
}

@media only screen and (min-width:905px) {
  .mobile_menu {
    display: none;
  }
}

@media only screen and (max-width:905px) {
  #toptools {
    display:none;
  }
  #modSelector {
    display:none;
  }
  #highlightWidget {
    left:10px;
  }
}


/* 1.2.2 NAV BUTTONS */
.navbuttons-wrapper {
  display:flex;
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:25px;
}
.navbutton {
  display:inline-flex;
  width:160px;
  height:44px;
  position:relative;
  margin: 5px 8px;
  border:1px solid #1F242F;
  border-radius:16px;
  padding-right:10px;
}
.navbutton a {
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:34;
}
.navbutton:hover {
  background-color:#1F242F;
}


/* 1.3 FOOTER */

#footer {
  position:absolute;
  display:none;
  bottom:0px;
  width:100%;
  text-align:center;
}

/* 1.4 FORMS */

.task form .button {
  display: inline;
  vertical-align:middle;
}
.task input[type="text"] {
  padding:3px;
  font-size:16px;
}
.task select {
  font-size:16px;
}
.task form input.inactive {
  accent-color:#888888;
}
.task form fieldset {
  border:none;
}
fieldset div {
  display:inline-block;
}
.manage-tasks th {
  padding: 2px 5px;
  border-bottom:1px solid white;
}
.editTask {
  padding:20px;
}
.editTask .editTask-fields {
  display:none;
}
.editTask.edited .editTask-fields {
  display:block;
}
.editTask.edited .editTask-info {
  display:none;
}
.editTask input[type="checkbox"] {
  height:20px;
  width:20px;
}

.editTask button {
  display:none;
}
.editTask.edited button {
  display:block;
}
.editTask div {
  display:inline;
}


.mainButton.inactive {
  background-image:none;
}
.mainButton.sm {

  vertical-align:middle;
}
.mainButton.lg {
  padding:10px 20px;
  border-radius:20px;
}
.mainButton {
  padding: 6px 12px;
  border-radius:20px;
  overflow:hidden;
  display:inline-block;
  font-weight:bold;
  margin: 0px 10px;
  background-image: linear-gradient(0deg, #02c765,#38BAA4);
  background-color:#555;
  color:white;
  border:none;
  margin:0px 10px;
  font-size:1.0rem;
  font-family:'Sarabun',sans-serif;
  cursor:pointer;
  transition:background-image 0.5s;
}
.mainButton.red {
  background-color: #e93d3d;
  background-image:none;
}

.mainButton.inactive {
  background-image:none;
  cursor:auto;
}
.mainButton.continue {
  margin: 25px 0px;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}
.mainButton img {
  float:left;
  width:24px!important;
  height:24px!important;
}
.mainButton .button-text {
  margin:0px 4px;
  display:inline-block;
}

.task-form-wrapper {
  display:block;
  clear:both;
  background-color:#1f283d;
  border-radius:10px;
  padding:10px 5px;
  text-align:center;
}
.form-wrapper {
  text-align:center;
  max-width:350px;
  margin-left:auto;
  margin-right:auto;
}
.button-wrapper {
  margin:8px;
  width:calc(100% - 16px);
  position:relative;
}
.button-wrapper .mainButton {
  vertical-align:unset!important;
}
.form-wrapper h2 {
  margin:5px;
}
#form {
  margin-top:10px;
  padding: 0px;
}
::-webkit-calendar-picker-indicator {
  filter:invert(1);
}
.form-group input, .form-group textarea, .form-group label.fileupload {
  display:inline-block;
  font-size:1.0rem;
  font-weight:100;
  font-family:'Sarabun',sans-serif;
  color:#F5F5F6;
  border:1px solid #1F242F;
  border-radius:10px;
  background-color:unset;
  padding:12px;
  outline:none;
  width:100%;
  text-align:left;
  caret-color:white;
}
.form-group input[type=checkbox] {
  width:20px;
}
.form-group.checkbox label {
  display:inline;
  vertical-align:middle;
}
.form-group.checkbox input[type=checkbox] {
  display:inline;
  width:24px;
  vertical-align:middle;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #1f242f;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #0c111d inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form-group label.fileupload {
  width:calc(100% - 40px);
  height:40px;
  background-image:url('/images/upload_tool.png');
  background-repeat:no-repeat;
  background-position:top right;
  background-size:contain;
  color:#666;
  transition:background-color 0.5s, color 0.5s;
}
label.fileupload.hasfile {
  background-color:#38baa4;
  color:#272727;
}
.form-group input {
  min-height:24px;
}
.form-group input:disabled {
  background-image: url('/images/locked.svg');
  background-position: right 10px top 10px;
  background-repeat: no-repeat;
  opacity:0.3;
}
.form-group textarea:disabled {
  background-image: url('/images/locked.svg');
  background-position: right 10px top 10px;
  background-repeat: no-repeat;
  opacity:0.3;
}
.form-group textarea {
  min-height:80px;
}

#comment_form textarea {
  width:100%;
}
#add_comm.selected {
  background-color:#3B76FF44;
}
.checkbox-group {
  margin:10px 10px 20px 0px;
  padding:0px;
}
.checkbox-group p {
  margin-top:0px;
  margin-bottom:5px;
}
.checkbox-group .checkbox {
  padding-left:20px;
  margin-bottom:0px;
}
.checkbox-group label {
  margin-top:5px;
}
.form-group {
  margin-bottom:20px;
  position:relative;
}
.form-set {
  border-left: 1px solid #333333;
  padding-left: 15px;
  margin: 5px 0px 15px 8px;
}

.form-group.half {
  width:48%;
  display:inline-block;
  margin-right:1%;
}
.form-set .form-group.half {
  padding-bottom:0px;
  margin-bottom:10px;
}

.form-group label, p.form-label {
  display:block;
  color:#F5F5F6;
  margin-top:6px;
  margin-bottom:6px;
  font-size:0.9rem;
}
.form-set .form-group label {
  margin-top:0px;
}
.form-group.center {
  width:100%;
  text-align:center;
}
.form-group.multiple {
  margin-left:20px;
}
.form-group-header {
  position:relative;
  display:inline-block;
  font-size:0.9rem;
}
.form-group.multiple .form-group-header {
  margin-left:-20px;
}
.form-group-header .info-popup-icon {
  top:0px;
  right:-20px;
}
.form-group-header .info-popup-icon .info-popup {
  right:unset;
  left:20px;
}
#form select {
  /*
  border: none;
  border-radius:5px;
  background-color:#DDD;
  padding: 2px 5px;
  font-family: 'Sarabun',sans-serif;
  font-size:1.0rem;
  */
}
#form input[type=submit] {
  padding:8px 40px;
  width:auto;
  height:40px;
  font-weight:bold;
  background-image: linear-gradient(0deg, #02c765, #38baa4);
  display:inline-block;
  cursor:pointer;
  margin-top:30px;
}
#form input[type=submit]:hover {
  background-color:#38BAA477;
}
.form-group .object-cover {
  float:none;
  display:block;
  margin:0px 12px;
}
.form-group .object-cover {
  float:none;
  display:block;
  margin:12px 0px;
}
.file-upload-wrapper {
  text-align:center;
  border: 1px solid #1f242f;
  border-radius:12px;
  padding:12px;
  font-size:0.9rem;
  color: #f5f5f6;
}
.file-upload-wrapper.active {
  background-color:#1f242f;
}
.file-upload-wrapper.error {
  border:1px solid red;
}
.file-upload-wrapper.half {
  width: calc(45% - 24px);
  margin-right:2%;
  display:inline-block;
}
#upload-cover {
  height:80px;
  width:120px;
  position:relative;
}
#upload-cover img {
  height:100%;
  width:100%;
  object-fit:contain;
}
#upload-cover video {
  height:100%;
  width:100%;
  object-fit:contain;
  display:none;
}
#upload-cover.video img {
  display:none;
}
#upload-cover.video video {
  display:block;
}
#upload-cover.audio {
  background-color: #1F242F;
  border-radius:15px;
  background-image:url('/images/recording.svg');
  background-position:center;
  background-repeat:no-repeat;
}
.remove-cover {
  position:absolute;
  height:20px;
  width:20px;
  background-color:#555;
  border-radius:10px;
  background-image:url('/images/close.svg');
  top:-5px;
  right:-5px;
  opacity:0.4;
  background-size:20px 20px;
  transition:opacity 0.3s;
  cursor:pointer;
  z-index:10;
}
.remove-cover:hover {
  opacity:1;
}
#stats-bar {
  text-align:center;
  position:sticky;
  top:0px;
  background-color:#0C111D;
  z-index:5;
}
progress {
  height:20px;
  width:200px;
  border-radius:5px;
  overflow:hidden;
}
progress[value] {
  -webkit-appearance:none;
}
progress::-webkit-progress-bar { background: #1F242F; }
progress::-webkit-progress-value { background: #38BAA4; }
.form-feedback {
  display:inline-block;
  height:35px;
  min-width:60px;
  vertical-align: middle;
  float:right;
  color:red;
}
#workload-meter-wrapper {
  width:200px;
  height:20px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  position:relative;
  background: #ff0000;
  background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(237, 228, 50, 1) 25%, rgba(36, 227, 116, 1) 40%, rgba(36, 227, 116, 1) 60%, rgba(237, 228, 50, 1) 75%, rgba(255, 0, 0, 1) 100%);
}
#workload-meter {
  position:absolute;
  width:5px;
  height:30px;
  background-color:white;
  z-index:1;
  top:-5px;
  transition:left 0.5s;
}
.button-wrapper.processing .form-feedback {
  background-image:url('/images/animatedIcon.gif');
  background-repeat:no-repeat;
  background-position:left;
  background-size:contain;
  display:inline-block!important;
}
button.upload-file {
  padding:12px;
  background-color:unset;
  border:1px solid #1f242f;
  border-radius:12px;
  opacity:0.6;
}
button.upload-file:hover {
  opacity:1;
  background-color:#1f242f;
}
#media-grid-wrapper {
  position:fixed;
  width:calc(60vw - 50px);
  height:calc(60vh - 50px);
  z-index:100;
  background-color: #0C111D;
  top:20%;
  left:20%;
  border-radius:25px;
  padding:25px;
}

#inspector-footer {
  position:absolute;
  bottom:0px;
  left:0px;
  border-top: 2px solid #1f242f;
  width:calc(100% - 24px);
  padding: 8px 12px;
  min-height:39px;
  height:auto;
  max-height:131px;
}
.form-set.hidden select, .form-set.hidden input {
  display:none !important;
}
.custom-link {
  font-size:0.8rem;
  display:inline-block;
  margin-bottom:20px;
}
.custom-link .icon {
  vertical-align:middle;
  margin: 0 0 0 12px;
}
.button-wrapper button {
  /*
  padding: 10px 18px;
  margin:0px 5px;
  border-radius:8px;
  color:white;
  font-weight:bold;
  cursor:pointer;*/
}
.copy-feedback {
  display:inline-block;
  color:#0ACF83;
  font-size:0.8rem;
}
.mainButton.button-cancel, .mainButton.button-inactive {
  background-color:#32394C;
  background-image:unset;
  border: 1px solid #1f242f;
  color:#AAAAAA;
}
.button-cancel:hover, .button-inactive:hover {
  background-color:#1f242F;
  color:white;
}
.mainButton.button-delete {
  background-image:unset;
  background-color: #c11b1b!important;
  border:none;
}
.mainButton.button-delete:hover {
  background-color: red!important;
}
#editModeButton.button-inactive::before {
  content: 'Activate ';
}
.button-submit {
  background-image: linear-gradient(0deg, #02c765,#38BAA4);
  border:none;
}
button:disabled, button[disabled] {
  background-image:none;
  background-color:#444444;
  border:none;
  color:#999999;
  cursor:not-allowed;
}
.processing .button-submit {
  background-image:none;
  background-color:#1f242f;
}
.form-group select {
  width:100%;
  padding: 12px;
  background-color: unset;
  color: #F5F5F6;
  font-size:1rem;
  border:1px solid #1F242F;
  border-radius:12px;
  font-family: 'Sarabun', sans-serif;
  outline:none;
}
.form-group option {
  background-color:#0c111d;
  color: #f5f5f6;
}
.center {
  text-align:center!important;
}
button {
  font-family:'Sarabun',sans-serif;

}
#form .form-group button {
  /*padding: 5px 10px;
  display:inline-block;
  font-weight:bold;
  margin: 0px 10px;
  background-color:#38BAA4;
  color:#272727;
  border:none;
  border-radius:5px;
  margin:0px 10px;
  font-size:1.0rem;
  font-family:'Sarabun',sans-serif;
  */
}
#form .form-group button:hover {
  background-color:#38BAA477;
}
#form input[type=checkbox] {
  display:inline;
  height:18px;
  width:18px;
  vertical-align:middle;
  margin-right:10px;
}


form.reg_form {
  width:400px;
  padding: 15px 30px;
  margin-top:40px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid #777;
  background-color: #ccc;
}

.signup_form {
  min-height:350px;
  max-height:80%;
  width:400px;
  max-width: calc(90% - 50px);
  padding: 10px 25px;
  position:relative;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-radius:10px;
  background-color:#ddd;
  box-shadow:5px 5px 5px #aaa;
  overflow-y:auto;
}
.signup_form .form-group {
  padding-top:3px;
}
.signup_form h2 {
  margin-bottom:0px;
}
.signup_form form {
  padding-top:10px;
}
.signup_form a {
  color:blue;
  cursor:pointer;
}
.signup_form p.login {
  position:absolute;
  bottom:20px;
}
.subcat {
  padding-left:5px;
}
.pages-wrapper {
  width:100%;
  overflow-x:hidden;
  margin-bottom:15px;
}
.pages-slider {
  position:relative;
  left:0px;
  transition:left 1s;
  white-space: nowrap;
}
.page {
  display:inline-block;
  width:calc(100% - 10px);
  padding:0px 5px;
  vertical-align:top;
}
.content .page p {
  margin-top:0px;
  margin-bottom:15px;
  font-size:1.2rem;
}

/* 1.4.1 Toggle */
.toggle-wrapper {
  width: 70px;
  height:24px;
  padding:6px;
  border-radius:18px;
  overflow:hidden;
  background-color:#1F242F;
  position:relative;
}
.toggle-slider {
  height:36px;
  width:41px;
  position:absolute;
  top:0px;
  left:0px;
  transition: left 0.5s;
  z-index:18;
  background-image: linear-gradient(0deg, #02C765,#38BAA4);
}
.toggle-slider.slider-right {
  left: 42px;
}
.toggle-icon {
  z-index:19;
  position:relative;
  pointer-events: none;
  height:22px;
  width:22px;
  display:inline-block;
  margin-left:6px;
  margin-right:4px;
  opacity:0.6;
}




/* 1.5 Lightbox */

#lightbox {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#2b385566;
  z-index:35;
}
#lightbox-hide {
  position:fixed;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}

#lightbox-wrapper {
  position:absolute;
  min-height:200px;
  max-height:90%;
  height:auto;
  max-width:90%;
  width:420px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  overflow-y:scroll;
  background-color:#0c111D;
  border-radius:20px;
}
#lightbox-wrapper.notice {
  text-align:center;
  width:300px;
  min-height:150px;
}
#lightbox-loading {
  visibility:hidden;
  text-align:center;
  position:relative;
  opacity:0;
  position:absolute;
  background-color:#0c111d;
  width:100%;
  height:100%;
  z-index:10;
  transition:opacity 1s visibility 1s;
}
#lightbox-loading-content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
#lightbox-loading div {
  display:block;
}
#lightbox-wrapper.loading #lightbox-loading {
  visibility:visible;
  opacity:1;
}
#lightbox-wrapper::-webkit-scrollbar {
  display:none;
}
#lightbox-wrapper.wide {
  width:90%;
  height:90%;
  transform:none;
  top:5%;
  left:5%;
}

#lightbox-content {
  overflow-y:auto;
  background-color:#0C111D;
  border-radius:10px;
  padding:20px;
  color:white;
  width:calc(100% - 40px);
  /* min-height:400px; */
  height:100%;
}
#lightbox-wrapper.wide #lightbox-content {
  overflow-y:hidden;
}
#lightbox-content a {
  font-weight:normal;
  font-size:0.9rem;
  text-decoration: underline;
  padding-left:5px;
  cursor:pointer;
}
#lightbox-content .button-wrapper a {
  display:inline-block;
}
#lightbox-content h3, #lightbox-content h2 {
  margin-top:5px;
  margin-bottom:5px;
}
#lightbox-content p {
  margin-top:5px;
}

#lightbox-content .closeButton {
  display:block;
  margin-top:40px;
  margin-left:auto;
  margin-right:auto;
}
#lightbox-content .okbutton {
  width:100px;
  margin-top:20px;
}


.warnings p {
  background-size:20px 20px;
  background-position:top left;
  background-repeat:no-repeat;
  padding-left:25px;
  margin-top:15px;
}
p.check_good {
    background-image:url('/images/approved.png');
}
p.check_bad {
  background-image:url('/images/rejected.png');
}


/* Subscribe */
#subscribe-wrapper {
  margin:40px auto 10px auto;
  padding:20px 10px;
  text-align:center;
  max-width:350px;
  background-color:#1f2e2f;
  border: 1px solid #02C665;
  border-radius:10px;
}



/* 1.6.2 Badges */
.badge {
  display:inline-block;
  margin: 2px 4px;
  padding: 3px 12px;
  border: 1px solid #1f242f;
  border-radius:9px;
  background-position:left 8px center;
  background-repeat:no-repeat;
  font-size:0.8rem;

}
.badge-inprogress, .badge-toread, .badge-active, .badge-storyboards, .badge-previsualization, .badge-previs, .badge-roughcut, .badge-concept, .badge-green {
  padding-left: 22px;
  background-image: url('/images/dot-green.svg');
}
.badge-readyforuse {
  padding-left: 22px;
  background-image: url('/images/dot-green.svg');
  border: 1px solid #085D3A;
}
.badge-notspecified, .badge-notstarted {
  padding-left: 22px;
  background-image: url('/images/dot-gray.svg');
  color:#999999;
}
.badge-todo {
  padding-left: 22px;
  background-image: url('/images/dot-gray.svg');
}
.badge-building {
  padding-left: 22px;
  background-image: url('/images/dot-yellow.svg');
  border: 1px solid yellow;
}
.badge-awaitingrevisions, .badge-tobesecured, .badge-suspended, .badge-awaitingfeedback, .badge-revising, .badge-yellow {
  padding-left: 22px;
  background-image: url('/images/dot-yellow.svg');
  border: 1px solid yellow;
  color:yellow;
}
.badge-cancelled, .badge-rejected, .badge-requestpending, .badge-inactive, .badge-red {
  border: 1px solid red;
  padding-left: 22px;
  color: #FDA29B;
  background-color: #55160C;
  background-image: url('/images/dot-red.svg');
}
.badge-orange, .badge-onhold {
  padding-left: 22px;
  background-image: url('/images/dot-orange.svg');
  border: 1px solid orange;
  background-color: #855A0C;
  color:#FFCF78;
}
.badge-completed, .badge-following, .badge-accepted, .badge-finalcut {
  border: 1px solid #085D3A;
  background-image: url('/images/dot-green.svg');
  background-color: #053321;
  color: #75E0A7;
  padding-left: 22px;
}
.badge-archived {
  border: 1px solid #444444;
  color: #999999;
  background-image: url('/images/dot-gray.svg');
  background-color:#222222;
  padding-left: 22px;
}
.badge-unknown {
  color:#999999;
}
.list-item p.status-note {
  color:#999999;
  font-size:0.7rem;
  max-width:140px;
  margin-left:auto;
  margin-right:auto;
}
.list-item.highlighted {
  background-color:#38baa444!important;
}
/* 1.6.3 Category Labels */
.labellist {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  position:relative;
}
.object-info .labellist {
  justify-content:flex-start;
}
.label {
  display: inline-flex;
  background-color: #1F242F;
  padding:4px 8px;
  border-radius:5px;
  margin:2px;
  cursor:default;
}
.label-delete {
  position:relative;
  height:18px;
  width:0px;
  background-image:url('/images/close.svg');
  cursor:pointer;
  margin-left:0px;
  transition: width 0.5s, margin 0.5s;
}
.label:hover .label-delete {
  width:18px;
  margin-left:7px;
}
.addLabel {
  opacity:0.5;
  height:24px;
  width:24px;
  background-image: url('/images/plus-circle-light.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  cursor:pointer;
}
.addLabel:hover {
  opacity:1;
}
.labelSelector-wrapper {
  position:absolute;
}
.labelSelector-lightbox {
  position:fixed;
  z-index:29;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  cursor:not-allowed;
  background-color:#00000044;
}
.labelSelector {
  border-radius:8px;
  min-width:60px;
  overflow:hidden;
  z-index:30;
}
.labelSelector-item {
  background-color:#1f242f;
  width:calc(100% - 10px);
  padding:5px;
  cursor:pointer;
  position:relative;
  z-index:31;
}
.labelSelector-item:hover {
  background-color:#565f73;
}



/* 1.7.5 Progress Bar */

#loadingbar {
  width:200px;
  height:100px;
  position:fixed;
  right:50px;
  bottom:10px;
  z-index:80;
  text-align:center;
  color:black;
  background-color:white;
  border: 1px solid black;
  border-radius:8px;
  box-shadow: 3px 3px 3px #00000044;
  font-size:0.8rem;
}
#loadingbar_wrapper {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}
#loadingbar_text {

  margin-bottom:15px;
}


/* 1.8 Popup Selectors */

#highlightWidget {
  background-color:#FFFF7E;
  border:1px solid black;
  position:fixed;
  bottom:10px;
  left:290px;
  padding:10px 25px;
  border-radius:5px;
  z-index:10;
  text-align:center;
  min-width:120px;
  font-family:"Syne",sans-serif;
}
#highlightWidget h3 {
  margin:0px;
  text-align:center;
  font-size:16px;
}
#highlightWidget .small-icon {
  position:absolute;
  top:0px;
  right:0px;
}


/* 1.9 Dropdowns */
.section {
    width:100%;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    clear:both;
}
.section-header {
  padding:12px;
  position:relative;
}
.section-header h2 {
    margin:0px;
}
.section-body {
  clear:both;
  /*
  max-height:70%;
  overflow-y:scroll;
  */
}
/*
.expanded {
  background-image:url('/images/minus.png');
}
*/

.narrow-textblock {
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.narrow-textblock p {
  margin-bottom:24px;
}
/* 1.10 Navigation Elements */

.navTiles-wrapper {
  text-align:center;
}
.navTile {
  background-color:#1f242f;
  margin:20px;
  width:300px;
  max-width:30%;
  display:inline-block;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  vertical-align:top;
}
.navTile-content {
  padding:20px 30px;
}
.navTile a {
  text-decoration: none;
  display:inline-block;
  position:absolute;
  height:100%;
  width:100%;
  left:0px;
  top:0px;
  z-index:2;
}

/*
.navTile a {
  display:block;
  height:100%;
  width:100%;
  position:absolute;
  left:0px;
  top:0px;
}
*/
.navTile h3 {
  margin-top:0px;
  margin-bottom:4px;
  color:#38baa4;
  font-size:0.9rem;
}
.navTile p {
  margin:0px;
  font-size:0.8rem;
  color:#999999;
}
.navTile:hover {
  background-color:#444444;
}
.navTile:hover p {
  color:white;
}

@media only screen AND (max-width: 500px) {
  .navTile {
    max-width:300px;
    width:calc(100% - 80px);
    margin: 20px 0px;
  }
}

/* 1.12 Tasks */
.task {
  min-height:28px;
  padding:2px 40px 2px 40px;
  margin-bottom:8px;
  position:relative;
}
#newtask {
  padding:2px;
}
.task .task-editfields {
  display:none;
}
.task .float-right {
  position:absolute;
  right:0px;
  top:0px;
}
.task-editfields div {
  display:inline-block;
}
.task.editing .task-editfields {
  display:block;
}
.task-editfields table {
  margin: 5px auto;
}
.task.editing .task-active {
  display:none;
}
.task.skipped .task_delete {
  display:none;
}
.task .task-inactive {
  display:none;
}
.task.inactive {
  display:inline-block;
  padding:2px 2px 10px 30px;
  opacity:0.4;
}
.task.inactive .task-inactive {
  display:block;
}
.task.inactive .task-active {
  display:none;
}
.task-deleted {
  display:none;
}
.task.deleted {
  padding:2px 2px 10px 30px;
  opacity:0.4;
}
.task.deleted .task-active {
  display:none;
}
.task.deleted .task-deleted {
  display:block;
}
.task form {
  display:inline;
}
.task .checkform {
  position:absolute;
  top:0px;
  left:0px;
}
.task input[type='checkbox'] {
  height:20px;
  width:20px;
  position:relative;
  top:4px;
}
.task_points {
  display:inline;
  opacity:0.5;
  vertical-align:middle;
  margin-left:6px;
}
.task_name {
  display:inline;
  vertical-align:middle;
}
.task.completed .task_name {
  text-decoration: line-through;
}
.task.completed .task_edit {
  display:none;
}
.task_repeat {
  display:none;
}
.task.completed .task_repeat {
  display:inline-block;
}
.task.completed .skiptask {
  display:none;
}
.tasklist.starting .skiptask {
  display:none;
}
.tasklist.starting .checkform {
  display:none;
}
.tasklist.starting .task {
  padding-left:20px;
}
.task .icon.skiptask {
  background-position:center;
  background-repeat:no-repeat;
  background-image: url('/images/skip-forward.svg');
  margin:0px;
  position:absolute;
  left:0px;
  top:0px;
}
.task .icon.skiptask.float-right {
  left:unset;
  right:0px;
}
.task.editing {
  padding:2px;
}
.task.skipped {
  opacity:0.4;
}
.task.reviewing.skipped {
  margin-left:30px;
}
.task.skipped .icon.skiptask {
  background-image:url('/images/skip-back.svg');
}
.task.skipped form.checkform {
  display:none;
}
.tasklist .icon {
  vertical-align:middle;
  margin:0px;
}
.task-footer {
  position:absolute;
  right:10px;
  bottom:0px;
  font-size:0.8rem;
}
.task-content {
  margin-left:35px;
  margin-bottom:25px;
}
.task-popup.completed h3.task-name {
  text-decoration:line-through;
  text-decoration-color: #38baa4;
  text-decoration-thickness:3px;
}
.task-assigned .avatar-wrapper {
  margin-right:5px
}
.task-assigned .avatar {
  height:34px;
  width:34px;
}
.task-assigned p {
  line-height:1.1rem;
  font-size:0.9rem;
}
.task-label {
  float:left;
  padding-right:10px;
}
.task-checkbox input[type=checkbox] {
  width:20px;
  height:20px;
  margin-right:10px;
  float:left;
}
.task-object {
  width:100%;
  height:64px;
}
.task-object-body {
  padding-left:75px;
}
.icon a {
  padding:0px!important;
}

.comment-date {
  right:32px!important;
}
.comment-color {
  float:right;
  height:16px;
  width:16px;
  position:absolute;
  right:0px;
  top:0px;
  z-index:30;
  border-radius:8px;
  overflow:hidden;
}
.color-selector {
  width:63px;
  height:20px;
  padding:10px;
  position:absolute;
  right:0px;
  background-color:#182033;
  top:-46px;
  border:2px solid #444444;
  border-radius:12px 12px 0px 12px;
}
.color-dot {
  height:18px;
  width:18px;
  display:inline-block;
  border-radius:10px;
  overflow:hidden;
}
.color-yellow {
  background-color:#FFFF0088;
}
.color-red {
  background-color:#FF000088;
}
.color-green {
  background-color:#00FF0088;
}

span.comment-red {
  background-color:#ff000044;
}
span.comment-green {
  background-color:#00FF0044;
}
span.comment-yellow {
  background-color:#FFFF0044;
}

/* 3.1 Object Lists */

.object-list-wrapper {
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.object-list-topnav h1 a {
  text-transform:uppercase;
  font-weight:normal;
  font-size:1.2rem;
  text-decoration:none;
  color:inherit;
}

.table-wrapper {
  position:relative;
  border: 1px solid #1f242f;
  border-radius:12px;
  overflow:hidden;
}
.toggle-section {
  position:absolute;
  top:20px;
  left:-20px;
  background-image:url('/images/chevron-down.svg');
  background-repeat:no-repeat;

  height:24px;
  width:24px;
  border-radius:12px;
  overflow:hidden;
  background-color:#1f242F;
  cursor:pointer;
}
.toggle-section:hover {
  background-color:#666666;
  opacity:1;
}

.section.closesection .toggle-section {
  background-image:url('/images/chevron-right.svg');
  opacity:1;
}
.section.closesection .table-wrapper {
  display:none!important;
}
.section.closesection .section-body {
  display:none!important;
}
.section.closesection .dashboard-customize {
  display:none!important;
}
.closesection .mainButton {
  display:none;
}
.list-customize {
  position:absolute;
  right:-32px;
  height:30px;
  width:30px;
  background-image:url('/images/customize.png');
  background-size:contain;
  opacity:0.5;
}
.list-customize:hover {
  opacity:1;
  background-color:#38BAA4;
  border-radius:3px;
}
.table-filters {
  /*
  width:100%;
  height:30px;
  */
}
.closesection .table-filters {
  display:none;
}
.cell-comments {
  width:100px;
}
.filter {
  display:inline-block;
  margin:0px 10px;
}
.list-filter {
  position:absolute;
  top:32px;
  right:-32px;
  height:30px;
  width:30px;
  background-image:url('/images/filter.png');
  background-size:contain;
  opacity:0.5;
}
.list-filter:hover {
  opacity:1;
  background-color:#38BAA4;
  border-radius:3px;
}
.item-list {
  width:100%;
  border-collapse:collapse;
}
.item-list th {
  background-color:#0c111d;
  color:#999999;
  font-size:0.7rem;
  padding:10px;
  height:30px;
  text-align:left;
  font-weight:100;
  border-bottom:1px solid #1f242f;
}
.item-list p {
  margin:5px 0px;
  color: #999999;
}
.item-list .cover {
  border:none;
}
.cover video {
  height:100%;
  width:100%;
}
.item-list .video-cover {
  width: 143px;
  margin-left:auto;
  margin-right:auto;
}
.item-list td {
  padding:10px;
  vertical-align:middle;
  border-bottom:1px solid #1f242f;
  font-size:0.8rem;
}
td.filtered {
  display:none;
  position:absolute;
  left:0px;
  right:0px;
  height:100%;
  width:100%;
  background-color:#0C111DEE;
  z-index:20;
  text-align:center;
}
tr.filtering td.filtered {
  display:inherit;
}
td .user-block {
  display:block;
  min-width:100px;
}
.table-row-handle {
  width:6px;
  background-image:url('/images/drag-handle-white.svg');
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.2;
  transition:opacity 0.5s;
  cursor:grab;
}
.table-row-handle:hover {
  opacity:1;
}
.list-item.clickable, .item-tile.clickable {
  cursor:pointer;
}
.list-item h3 {
  font-weight:bold;
  margin:0px;
  display:inline;
  color:white;
}
.list-item p {
  font-style: italic;
  margin:2px 0px;
  color:white;
}
.list-item p.shot-visuals {
  font-style:normal;
  padding:0px 12px;
  text-align:center;
}
p.placeholder {
  color:#999999;
  font-style:italic;
}
.list-item p.morehidden .more {
  display:none;
}
.list-item .thumbnail {
  width:180px;
}
.list-item .thumbnail video {
  width:100%;
  height:auto;
}
.archived {
  opacity:0.5;
  filter:saturate(0.2);
}
.item-list th.nowrap {
  white-space:nowrap;
}
.item-list a {
  text-decoration:none;
  color:inherit;
}
.item-list td.bigText {
  font-size:1.4rem;
  font-weight:bold;
  text-align:center;
  font-family: "Sofia Sans Semi Condensed", sans-serif;
  vertical-align:middle;
}


.bigText img {
  height:60px;
  width:60px;
  opacity:0.5;
}
.bigText span.label {
  display:block;
  font-size:1rem;
  position:relative;
  top:-5px;
}
.date-block {
  text-transform: uppercase;
}
.date-big {
  font-size:1.5rem;
}
.date-small {
  font-size:1rem;
  position:relative;
  top:-5px;
}
.bigText.good {
  color: #38baa4!important;
}
.bigText.bad {
  color: red!important;
}
.item-list td.center {
  text-align:center;
}
.list-category td {
  font-size:1.2rem;
  padding:0px 0px 0px 10%;
  font-weight:bold;
  background-color:#38baa4;
  color:white;
  height:30px;
  line-height:30px;
}
.freeze-row {
  position:sticky;
  top:0px;
  z-index:4;
  background-color:white;
}
.item-list tr {
  position:relative;
}
.item-list tr.approved {
  background-color:#c3ffe1;
}
.item-list tr.selected {
  border: 2px solid yellow;
}
.item-list tr.rejected {
  opacity:0.6;
}
.list-item {
  padding:5px 10px;
  min-height:60px;
  background-color:none;
  transition: background-color 1s;
}
.list-item.clickable:hover {
  background-color:#ffffff11;
}
.list-item img, .commenter img {
  /*
    float:left;
    margin-right:10px;
    */
    object-fit: contain;
    height: 100%;
    width: 100%;
}
.list-item h2 {
  margin:0px;
}


.list-item .addinfo {
    font-style:italic;
    display:inline;
}
.list-item.deleted {
  background-color:#FF2D7B!important;
}
.list-item.pending {
  background-color:#ff000022!important;
  border:1px solid red;
}

.li-tools {
    position:relative;
    text-align:right;
    height:0px;
    vertical-align:top;
}

.item-list .avatar-wrapper {
  width:64px;
  height:64px;
  float:unset;
  display:inline-block;
}
.item-list .avatar {
  width:64px;
  height:64px;
  border-radius:32px;
  font-size:2.2rem;
  line-height:1.7;
}

@media only screen and (max-width:720px) {
  table.item-list {
    overflow-x:auto;
    display:table;
  }
  .item-list .avatar {
    width:40px;
  }
  .cell-comments {
    width:auto;
  }
}

#shot-list {
  border-collapse: collapse;
  width:100%;
}
#shot-list td {

}
.cover {
  height:60px;
  width:143px;
  object-fit:scale-down;
  display:inline-block;
  position:relative;
}
.cover img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.object-cover {
  position:relative;
  /*height:200px!important;*/
}
.expand-cover {
  opacity:0;
  cursor:pointer;
  background-image:url('/images/expand.svg');
  background-repeat:no-repeat;
  background-color:#00000066;
  width:100%;
  height:100%;
  position:absolute;
  background-position:center;
  background-size:24px 24px;
  transition:opacity 0.5s;
  z-index:10;
}
.object-cover video {
  width:100%;
  height:100%;
  object-fit:cover;
}
.expand-cover:hover {
  opacity:1;
}
.board-cover {
  width:120px;
  height:80px;
  position:relative;
}
.board-cover img {
  object-fit:cover;
}

.mediacover {
  height:60px;
  width:143px;
  object-fit:scale-down;
  display:inline-block;
}
.warning {
  margin-bottom:8px;
}
.warning form {
  display:inline;
}

.vcomment textarea {
  width:400px;
  height:60px;
  margin-bottom:3px;
}
.vcomment {
  margin-bottom:10px;
  width:300px;
}
.vcomment span.time {
  padding-right:8px;
}
.vcomm_text {
  background-color:#333;
  padding:3px 7px;
  border-radius:5px;
}
.vcomm_date {
  opacity:0.4;
  float:right;
}

.data-table {
  width: 100%;
}
.data-table td, .data-table th {
  padding: 2px 5px;
}

/* 3.2 Object Single */

.object-single-wrapper {
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.object-single-topnav h1 a {
  text-transform:uppercase;
  font-weight:normal;
  font-size:1.2rem;
  text-decoration:none;
  color:inherit;
}
.object-single-details {

}
.object-cover {
  float:left;
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:32px;
  margin-right:10px;
}
.object-cover.sm {
  width:40px;
  height:40px;
  margin-right:10px;
  margin-bottom:2p;x
}
.item-list .object-cover {
  margin-right:5px;
  margin-left:5px;
  float:none;
  display:inline-block;
}
.object-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.object-cover.person {
  height:144px;
  width:144px;
  border:none;
  border-radius:72px;
}
/*
.object-info p {
  font-size:1rem;
  margin:0px;
}*/
.page-header .company {
  font-style:italic;
  font-size:1.0rem;
  margin-top:0px;
  color: #CECFD2;
}
.page-header .description {
  font-size:0.9rem;
}
.page-tasks {
  position:absolute;
  right:-50px;
  top:0px;
}
.page-task-list .icon {
  margin:2px;
  width:auto;
}
.object-single-approvals {
  clear:both;
  width: 100%;
  max-width:1000px;
  margin-top:15px;
  margin-left:auto;
  margin-right:auto;
}
.object-single-approvals h2 {
  margin-bottom:0px;
  padding-left:15px;
  display:inline;
}
.object-single-approvals table {
  width:100%;
  border:1px solid black;
  background-color:#ccc;
}
.object-single-approvals th {
  font-weight:bold;
}
.approvals-customize {
  background-image:url('/images/customize.png');
  background-size:contain;
}
@media only screen and (min-width:500px) {
  .mobile-only {
    display:none!important;
  }
}
@media only screen and (max-width:500px) {
  .object-cover {
    height:40px;
    width:40px;
  }
  .center-mobile {
    text-align:center;
  }
  .object-single-details .icon {
    display:none;
  }
  .object-single-approvals {
    display:none;
  }
  .content h2 {
    font-size:1.2rem;
  }
  .object-info p {
    margin-top:5px;
    font-size:0.8rem;
  }
  .page-header .company {
    font-size:0.8rem;
  }
  .badge {
    display:none;
  }
  .page-row {
    padding:15px 10px;
  }

  .section-header h2 {
    font-size:1.5rem;
  }
  table.item-list {
    height:auto;
    border-radius:8px;
  }
  .item-list th {
    display:none;
  }
  .item-list td {
    vertical-align:middle;
    font-size:0.7rem;
    padding:6px 8px;
  }
  .noMobile {
    display:none!important;
  }
  div.mainButton, button.mainButton {

  }
  #lightbox {
    top:64px;
    height:calc(100% - 64px);
  }
  #open-comments {
    right:20px;
  }
  .text-block {
    padding:20px;
    width:calc(100% - 40px);
    box-shadow:none;
  }
}
/* 3.3 Object Tiles */

.tiles-wrapper {
  display:flex;
  flex-wrap:wrap;
  /*justify-content:center;*/
}
.item-tile {
  width:240px;
  height:auto;
  min-height:225px;
  display:inline-block;
  position:relative;
  margin:10px 25px;
  border:1px solid #999999;
  border-radius:12px;
  background-color:#1F242F;
  overflow:hidden;
}
.tile-header {
  width:100%;
  height:24px;
  position:absolute;
  top:0px;
  left:0px;
  text-align:left;
  margin: 4px 12px;
}
.tile-image {
  width:240px;
  height:160px;
  overflow:hidden;
  background-color:black;
  position:relative;
}
.tile-image img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.tile-image p {
  text-align:center;
  padding:0px 20px;
  position:relative;
  top:50%;
  transform:translateY(-50%);
  margin:0px;
}
.tile-text {
  width:100%;
  min-height:24px;
}
.tile-footer {
  position:relative;
  padding: 5px 20px;
  font-size:0.8rem;
  color:#999999;
}
.tile-comments {

}
.tile-comments-wrapper {
  position:absolute;
  bottom:0px;
  right:0px;
  padding:5px;
  text-align:right;
  background-color:#000000CC;
  border-radius:5px 0px 0px 0px;
}
.tile-comments-wrapper .comment-icon {
  display:inline-block;
  padding:0px;
  margin:0px;
}
.tile-comments-wrapper .avatar-wrapper {
  width:24px!important;
  height:24px!important;
}
.tile-comments-wrapper .avatar {
  height:24px!important;
  width:24px!important;
  font-size:15px!important;
  line-height:22px!important;
  border:none;
}

.closesection .view-toggle {
  display:none;
}

/*
OLD OBJECT TILES
.tile-wrapper {
  display:inline-block;
  width:250px;
  height:300px;
  position:relative;
  margin:10px 10px;
}
.tile {
  width:250px;
  height:250px;
  position:absolute;
  left:0px;
  top:0px;
}
.tile-image {
  height:100%;
  width:100%;
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
  background-color:#CCC;
  border-radius:12px;
  overflow:hidden;
}
.tile-image img {
  object-fit:cover;
  width:100%;
  height:100%;
}
.tile-content {
  position:absolute;
  height:calc(100% - 20px);
  width:calc(100% - 20px);
  z-index:4;
  padding:10px;
  pointer-events:none;
}
.tile-icon {
  float:right;
  background-color:unset;
  height:40px;
  width:40px;
  pointer-events:all;
  cursor:pointer;
  position:relative;
  transition:background-color 0.5s;
  border-radius:8px;
}
.tile-icon:hover {
  background-color:#272727;

}
.tile-icon img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.tile-name {
  text-align:center;
  width:100%;
  position:absolute;
  top:252px;
}

*/

 /* 3.4 Data Tables */
 .member-list {
   display:inline-block;
   vertical-align:top;
 }
 .member-list .none {
   line-height:42px;
 }
.member-avatar {
  display:inline-block;
  width:32px;
}

/* 3.5 Media */
.media-preview {
  width:100%;
}
.media-preview-artwork {
  width:100%;
}
.media-preview-artwork img {
  max-width:100%;
  max-height:400px;
  object-fit:contain;
}


/* 4.0 Approvals */

.a-actions {
  text-align:center;
  transition:background-color 0.3s;
}
.a-actions div:hover {
  background-color:#5353d3;
}
.a-actions div {
  display:inline-block;
  height:40px;
  width:40px;
  background-position:center;
  background-repeat: no-repeat;
  background-size:contain;
  cursor:pointer;
}
.a-empty {
  background-image:url('/images/empty.png');
}
.a-submitted {
  background-image:url('/images/pending.png');
}
.a-approved {
  background-image:url('/images/approved.png');
}
.a-rejected {
  background-image:url('/images/rejected.png');
}
.asset-row.approved .a-empty {
  opacity:0;
}

/* 5.1 Dashboard / Charts */
.dashboard {
  width:100%;
}
.dashboard-content {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
#dashboard-header h2 {
  display: inline-block;
}
.dashboard-widget {
  width:370px;
  margin:0px 20px 30px 20px;
  background-color:#151d2f;
  border-radius:15px;
  text-align:center;
  height:180px;
  position:relative;
}
.info-popup-icon {
  position:absolute;
  top:8px;
  right:8px;
  width:15px;
  height:15px;
  background-image:url('/images/info-circle.svg');
  background-size:contain;
  opacity:0.5;
}
h2 .info-popup-icon, th .info-popup-icon {
  position:relative;
  display:inline-block;
  top: 0px;
  right:0px;
  vertical-align:top;
}
.info-popup {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:120px;
  font-size:12px;
  color:white;
  font-weight:100;
  background-color:#444444;
  z-index:50;
  border-radius:10px;
  opacity:0.95;
  padding:5px 10px;
}
.info-popup-icon:hover {
  opacity:1;
}
/*
.info-popup-icon:hover .info-popup {
  display:block;
}*/
.info-popup-icon.active {
  opacity:1;
}

.info-popup-icon.active .info-popup {
  display:block;
}
.widget-title {
  position:absolute;
  bottom:-18px;
  width:100%;
  text-align:center;
  color:#666666;
  font-size:0.8rem;
}
.dashboard-widget.wide {
  width:600px;
}
.dashboard-figures {
  height:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.figure-wrapper {
  padding:4px 10px;
  height:80px;
  width:90px;
  position:relative;
}
.figure-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  cursor:pointer;
  z-index:5;
}
.figure-wrapper.clickable:hover {
  background-color:#2b3751;
  border:none;
  border-radius:15px;
}
.data-figure {
  text-align:center;
  color:#38baa4;
  font-size:2.5rem;
  position:relative;
  top:-5px;
}
.data-label {
  text-align:center;
  color:#888888;
  font-size:0.7rem;
  position:relative;
  top:-5px;
}
.dashboard-widget.wide canvas {
  width:100%;
}
.chart-wrapper {
  margin:auto;
  padding:10px 25px;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}
.item-list .chart-wrapper {
  top: unset;
  transform: unset;
  padding:0px;
  width:60px;
  height:60px;
}
.chart-wrapper h3 {
  margin-top:0px;
  text-align:center;
}
.smallpie-wrapper {
  display:inline-block;
  margin:5px 10px;
}
.smallpie-wrapper p {
  margin-top:4px;
  margin-bottom:0px;
  font-size:0.7rem;
}
.meter-chart {
  width:150px;
  height:100px;
}

/* 6.1 Design Elements */
a {
  color:#38baa4;
  text-underline-offset:3px;

}
.animate-fade {
  transition:opacity 1s;
  opacity:1;
}
.faded {
  opacity:0;
}

.defaultText {
  color:#CCC!important;
}
.objectDetail {
  cursor:pointer;
}

#slug {
  text-transform:uppercase;
}

.page-head {
  margin-bottom:25px;
  text-align:center;
  color: #38baa4;
}
.page-head p {
  margin-bottom:10px;
}

.breadcrumbs {
  height:36px;
  width:100%;
  overflow:hidden;
  z-index:3;
}
.crumb {
  display:inline-block;
  height:24px;
  vertical-align:top;
  padding: 6px 6px;
  color:#CECFD2;
  border-radius:12px;
}
.crumb:hover {
  background-color:#1F242F;
}
.crumb.active {
  background-color:#1F242F;
  color:white;

}
.crumb-separator {
  background-image:url('/images/chevron-right.svg');
  width:12px;
  height:36px;
  opacity:0.6;
  display:inline-block;
  background-position:center;
  background-repeat:no-repeat;

}

.breadcrumbs a {
  color:inherit;
  text-decoration:none;
}
p.error, p.warning {
  color:red;
}


.single-item-info {
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  width:80%;
  position:relative;
}
.body-nav-icon {
  position:absolute;
  height:30px;
  width:30px;
  left:-40px;
  top:0px;
  cursor:pointer;
}
.body-nav-icon img {
  height:100%;
  width:100%;
}
.body-inline-icon {
  float:right;
  width:30px;
  height:30px;
  cursor:pointer;
}
.body-inline-icon img {
  height:100%;
  width:100%;
}
.cover-tile {
  display:inline-block;
  margin:10px 20px 30px 20px;
  text-align:center;
  cursor:pointer;
}
.cover-tile img {
  border:1px solid black;
  border-radius:10px;
  width:256px;
  height:144px;
  object-fit:contain;
}
.cover-tile.vertical {
  height:256px;
  width:144px;
}
.cover-tile.square {
  height:144px;
  width:144px;
}
.cover-tile.circle {
  height:200px;
  width:200px;
  border:none;
  border-radius:100px;
  overflow:hidden;
}
.cover-tile.circle img {
  height:100%;
  width:100%;
  object-fit:cover;
}
.sm_cover {
  height:40px;
  width:75px;
}
.center-text {
  text-align:center;
}
.design-tile {
  display:inline-block;
  margin: 5px 10px;
  height:144px;
  width:256px;
  border: 2px solid #999;
  border-radius:7px;
  box-shadow:3px 3px 3px #CCC;
  transition: border 0.5s;
  position:relative;
}
.design-tile img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.design-tile.selected {
  border:2px solid blue;
  background-color:white;
}
.tile-button {
  height:30px;
  width:30px;
  position:absolute;
  cursor:pointer;
  z-index:3;
  background-color: white;
  border:1px solid black;
  border-radius: 15px;
  opacity:0.5;
  transition:opacity 0.5s;
  background-size:contain;
  background-position:center;
  background-repeat: no-repeat;
}
.tile-button:hover {
  opacity:1;
}
.design-expand {
  top:2px;
  left:2px;
  background-image:url('/images/expand_btn.png');

}
.design-open {
  top:2px;
  right:2px;
  background-image: url('/images/open.png');
}
.design-comment {
  bottom:2px;
  left:2px;
}
.fauxlink {
  color:#4A90E2;
  text-align:center;
  text-decoration: underline;
  cursor:pointer;
  font-size:0.8rem;
}
.button-right {
  top:2px;
  right:2px;
}
#details .dropbox {
  background-color:#CCCCCC;
}
.video-cover {
  width:100%;
  height:auto;
  padding:2px 0px !important;
  position:relative;
}
.video-cover video {
  width:100%;
}
.video-overlay {
  background-image:url('/images/playvideo.png');
  opacity:0.7;
  position:absolute;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:40px 40px;
}

#lightbox-content .design-tile {
  height:auto;
  width:auto;
  border:none;
  box-shadow:none;
  position:relative;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
#lightbox-content .design-img {
  display:block;
  height:100%;
  width:100%;
  object-fit:contain;
}
#mode-switch {
  display:block;
  position:absolute;
  top:3px;
  right:3px;
  width:80px;
  height:30px;
}
#switch-slider {
  height:24px;
  width:37px;
  border:3px solid blue;
  border-radius:5px;
  position:absolute;
  left:0px;
  transition: left 0.5s;
}
#switch-slider.right {
  left:38px;
}
span.date-stamp {
  font-size:0.8rem;
  color:#888;
}
span.user-stamp {
  font-size:0.8rem;
  color:#888;
  display:block;
}
.drop-progress {
  display:inline-block;
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
}
.user-icon {
  height:24px;
  width:24px;
  border-radius:12px;
  overflow:hidden;
  float:left;
  margin-right:10px;
}
.user-icon img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center;
}

.hidden {
  display:none!important;
}
.fadeout {
  overflow-y:hidden;
  opacity:0;
  height:0px;
  padding:0px;
  margin:0px;
  transition:opacity 0.5s, height 1s, padding 1s, margin 1s;
}

.float-right {
  float:right;
}
.float-left {
  float:left;
}

/* 6.2 Icons */
.sm-icon {
  display: inline-block;
  vertical-align:text-bottom;
  height:25px;
  width: 25px;
  background-color:white;
  border-radius:3px;
  padding:0px!important;
  cursor:pointer;
}
.sm-icon img {
  height:100%;
  width:100%;
}
#doorbell-button {
  z-index:9!important;
}

/* 7. Animatics */
.animatic-player-wrapper {
  width:100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
#animatic-player-content {
  height:0px;
  width:100%;
  position:relative;
  background-color:black;
}
.animatic-slide {
  height:100%;
  width:100%;
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
.animatic-slide.active {
  display:block;
}
.slide-text {
  font-size:1.2rem;
  text-align:center;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}
.slide-image-wrapper {
  width:100%;
  height:100%;
}
.slide-image-wrapper img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.slide-video-wrapper {
  height:100%;
  width:100%;
}
.slide-video-wrapper video {
  height:100%;
  width:100%;
  object-fit:contain;
}
#animatic-timeline-wrapper {
  height:auto;
  width:100%;
  position:relative;
}
#animatic-timeline-playhead {
  position:absolute;
  width:6px;
  height:calc(100% + 10px);
  background-color:white;
  border:1px solid black;
  top:-5px;
  border-radius:3px;
  left:0px;
  z-index:12;
  opacity:0.8;
}
.animatic-audio-track, .animatic-video-track {
  background-color: #292c35;
  border:1px solid #0C111D;
}
.audio-track-mute {
  position:absolute;
  left: -25px;
}
.timeline-vblock {
  display:inline-block;
  background-color:#8d8d8d;
  border:1px solid black;
  font-size:12px;
  height:20px;
  color:black;
  padding-left:4px;
  transition:background-color 0.3s;
  overflow:hidden;
  cursor:pointer;
}
.timeline-vblock.active {
  background-color:#38baa4;
}
.timeline-ablock {
  background-color:#8d8d8d;
  border:1px solid black;
  padding:2px 5px 2px 25px;
  color:black;
  font-size:0.8rem;
  position:relative;
  background-repeat:no-repeat;
  background-position:left 3px center;
  background-size: 16px 16px;
}
.audio-fullmix, .audio-multiple, .audio-other {
  background-image: url('/images/audio.svg');
}
.audio-music {
  background-image: url('/images/audio-music.svg');
}
.audio-soundeffects {
  background-image: url('/images/audio-effects.svg');
}
.audio-ambience {
  background-image: url('/images/audio-ambience.svg');
}
.audio-dialog {
  background-image: url('/images/audio-dialog.svg');
}
.timeline-ablock.active {
  background-color:#38baa4;
}
.shot-type-icon {
  height:14px;
  width:14px;
  display:inline-block;
  vertical-align:middle;
  opacity:0.6;
}
.shot-type-icon img {
  height:100%;
  width:100%;
  object-fit: contain;
}
.animatic-controls {
  margin-top:10px;
  width:100%;
  text-align:center;
  position:relative;
}
#animatic-curtime {
  position:absolute;
  top:0px;
  left:0px;
}
#animatic-totaltime {
  position:absolute;
  top:0px;
  right:0px;
}
.animatic-button {
  height:28px;
  width:28px;
  border-radius:14px;
  border:none;
  display:inline-block;
  background-color:#777777;
  cursor:pointer;
  transition: background-color 0.3s;
}
.animatic-button:hover {
  background-color:#38baa4;
}
.animatic-button img {
  height:20px;
  width:20px;
  padding:4px;
}
#animatic-playpause {
  background-image:url('/images/play.svg');
  background-size:20px 20px;
  background-position:center;
  background-repeat:no-repeat;
}
#animatic-playpause.playing {
  background-image:url('/images/pause.svg');
}