@charset "utf-8";
/* CSS Document */
/* Last Edited: 12/03/2025 */

/* Structure
1.1 Main
1.2 Navbar
1.2.1 Pop Menu
1.2.2 Nav Buttons
1.3 Footer
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

2.1 Script
2.2 Translations

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

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.noscroll {
  height:calc(100% - 64px);
}
.content h2 {
  color:#38baa4;
  font-size:1.7rem;
  margin-top:0px;
  margin-bottom:0px;
}
.content p {
  margin:5px 0px;
}

main {
  height:100%;
  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;
}
.page-row {
  padding:30px 20px;
  clear:both;
}
.page-row.full-width {
  padding: 50px 0px;
}
.page-row.title {
  padding:20% 20px;
}
.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;
}
.comment-filters {
  display:inline-block;
  float:left;
}
.comment-filters-icon {

}
.comment-filters-text {
  display:inline-block;
  font-size:0.6rem;
  color:#999999;
}

#comment-filters.active .comment-icon {
  background-color:#1f242f;
}
.comments-objectdetails {
  clear:both;
}
.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;
}
/*
.tiles {
  text-align:center;
}
*/
.content {
  border-left: 2px solid #1F242F;
  border-top: 2px solid #1F242F;
  border-top-left-radius: 30px;
  margin-top:12px;
  margin-right:46px;
  min-height:calc(100% - 62px);
  padding:30px 0px 20px 32px;
}
.content h2 span.header-tag {
  display:block;
  color:white;
  font-size:1.0rem;
  text-align:center
  font-weight:normal;
}
.centerLogo {
  height:125px;
  width:500px;
  background-image:url('/images/CollabrixLogo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-left:auto;
  margin-right:auto;
  max-width:90%;
  max-height:25vw;
}
.centerLogoIcon {
  height:180px;
  width:300px;
  background-image:url('/images/CollabrixIcon.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);
}
#workspace {
  height:calc(100% - 173px);
  position:relative;
  background-color:white;
  padding:30px 20px;
  overflow-y:auto;
}
#workspace h1 {
  color:#38BAA4;
  font-weight:bold;
  font-size:1.8rem;
}
.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);
}
@media only screen AND (max-width:500px) {
  main.has-sidebar {
    margin-left:0px;
  }
  .page-row.title {
    padding: 40% 20px 20% 20px;
  }
  .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/CollabrixLogo.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/CollabrixIcon_sm.png');
    height:44px;
  }
  .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;
}
.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-thumb .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/CollabrixLogo.png');
  background-position:left center;
  background-size:contain;
  background-repeat: no-repeat;
  margin-left:10px;
  height:40px;
  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;
    height:calc(100% - 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;
  }
}

.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 */
.form-wrapper {
  text-align:center;
  max-width:350px;
  margin-left:auto;
  margin-right:auto;
}
.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-group.half {
  width:48%;
  display:inline-block;
  margin-right:1%;

}
.form-group label, p.form-label {
  display:block;
  color:#F5F5F6;
  margin-top:6px;
  margin-bottom:6px;
  font-size:0.9rem;
}
.form-group.center {
  width:100%;
  text-align:center;
}
.form-group.multiple {
  margin-left:20px;
}
.form-group-header {
  position:relative;
  display:inline-block;
}
.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-thumb {
  float:none;
  display:block;
  margin:0px 12px;
}
.form-group .object-thumb {
  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;
}
#upload-thumb {
  height:80px;
  width:120px;
  position:relative;
}
#upload-thumb img {
  height:100%;
  width:100%;
  object-fit:contain;
}
#upload-thumb video {
  height:100%;
  width:100%;
  object-fit:contain;
  display:none;
}
#upload-thumb.video img {
  display:none;
}
#upload-thumb.video video {
  display:block;
}
.remove-thumbnail {
  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-thumbnail:hover {
  opacity:1;
}
progress {
  height:10px;
  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;
}
.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;
}
#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:unset;
  background-image:unset;
  border: 1px solid #1f242f;
  color:#999999;
}
.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;
}


.hiddenupload {
  background-color:#CCC;
  border:1px solid #AAA;
  height:60px;
  width:143px;
  margin-top:5px;
  transition:background-color 0.5s;
}
.hiddenupload.hasfile {
  background-color:#38baa4;
}

.dropbox {
  display:inline-block;
  background-image: url('/images/upload.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  position:relative;
  background-color:#DDD;
  opacity:0.5;
  transition: opacity 0.5s;
  width:100%;
  height:100%;
  background-size:50%;
}
.dropbox:hover {
  opacity:1;
}
.thumbnail {
  position:relative;
}
.thumbnail .dropbox {
  border: none;
  width:60px;
  height:60px;
  border-radius:5px;
}
.person .dropbox {
  background-image: url('/images/upload_tool.png');
  width:120px;
  height:120px;
}
.poster {
  position:relative;
}
.poster .dropbox {
  background-image: url('/images/upload_tool.png');
  width:120px;
  height:120px;
}
.hiddendrop {
  background-color:white;
  opacity:0;
  background-image:url('/images/upload.png');
  position:absolute;
  top:0;
  left:0;
  width:100%!important;
  height:100%!important;
  z-index:10;
}
.hiddendrop:hover {
  opacity:0.5;
}
.thumbdrop:hover {
  opacity:1;
}
.select-thumb {
  width:143px;
}
.select-thumb video {
  width:100%;
}
#selAppCats input[type=checkbox] {
  display:inline-block;
}

/* 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%;
}
.expanded-media {
  position:absolute;
  height:calc(100% - 40px);
  width:calc(100% - 40px);
}
.media-overlay {
  position:absolute;
  top:0px;
  left:0px;
}
.media-artwork {
  width:calc(100% - 220px);
  height:100%;
  background-color:black;
}
.media-artwork video {
  width:100%;
  height:100%;
  object-fit:contain;
}
.media-details h3 {
  word-wrap: break-word;
}
.video-wrapper {
  position:relative;
}
.video-playpause {
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:#000000;
  background-image:url('/images/pause.svg');
  background-size:60px 60px;
  background-position:center;
  background-repeat: no-repeat;
  opacity:0;
  z-index:4;
  cursor:pointer;
  transition:opacity 0.25s;
}
.video-wrapper.paused .video-playpause {
  background-image: url('/images/play.svg');
}
.video-wrapper:hover .video-playpause {
  opacity:0.3;
}
.video-playpause:hover {
  opacity:0.6!important;
}
.media-artwork img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.media-details {
  width:180px;
  padding: 10px 20px;
  position:absolute;
  right:0px;
  top:0px;
}
.media-details h3 {
  margin-bottom:5px;
}
.media-details .description {
  font-style: italic;
  margin:2px 0px;
}
.media-details .finedetails {
  font-size: 12px;
  color: #CCC;
}
.media-details a {
  padding-left: 0px!important;
}
#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');
}

/* 1.5.1 Lightbox Video Player */
#video-notes {
  position:absolute;
  top:10px;
  left:10px;
  height:100px;
  width:calc(100% - 20px);
  cursor:url(/images/draw_icon.png),auto;
  z-index:2;
  opacity:0.5;
}
#video {
  width:100%;
}
#video-timeline {
  width:100%;
  height:20px;
  margin-top:5px;
  background-color:#EEEEEE;
  position:relative;
}
#video-progress {
  position:absolute;
  top:0px;
  left:0px;
  height:20px;
  float:left;
  background-color:#58b4fd;
}
#video-playhead {
  position:relative;
  top:-5px;
  height:30px;
  width:6px;
  border-radius:3px;
  background-color:#CCCCCC;
  border:1px solid black;
  z-index:21;
}
#video-details {
  position:relative;
  margin-top:20px;
  height:50px;
}
#video-comms {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:0px;
}
.vcomm-bubble {
  position:absolute;
  background-image:url('/images/vcommFlag.png');
  height:46px;
  width:44px;
  background-size:contain;
  text-align:right;
  padding-top:4px;
  padding-right:6px;
  color:white;
  font-weight:bold;
  translate:-46px -30px;
  z-index:20;
}
#video-details .time p {
  color:#555;
  margin:0px;
}
#video-current {
  position:absolute;
  left:0px;
  top:0px;
}
#video-tools {
  position:absolute;
  left:50%;
  top:0px;
  transform:translate(-50%, 0px);
}
#video-length {
  position:absolute;
  right:0px;
  top:0px;
}
#play_btn {
  height:50px;
  width:50px;
  border-radius:25px;
  padding:0px;
}
#play_btn img {
  height:100%;
  width:100%;
}
.player_btn {
  height:30px;
  width:30px;
  border-radius:15px;
  padding:0px;
}
.player_btn img {
  height:100%;
  width:100%;
}
.player_btn.selected {
  background-color:#58b4fd;
}

/* 1.6 Projects / Project Management */

.proj-tile {
  margin:15px;
  border: 1px solid black;
  border-radius:5px;
  padding:5px 10px;
  width:350px;
  height:200px;
  display:inline-block;
  text-align:center;
  box-shadow:3px 3px 5px #888888;
  overflow:hidden;
}
.proj-tile.selected {
  border-color:#38BAA4;
  box-shadow:0px 0px 10px 2px #38BAA4;
}

.proj-tile h2 {

}
.proj-tile form {
  margin-top:10px;
  display:inline;
}
.proj-tile .poster {
  height:100%;
  width:40%;
  display:inline-block;
  float:left;
}
.proj-tile .poster img {
  object-fit:contain;
  height:100%;
  width:100%;
}

table.team {
  width:100%;
  border-collapse:collapse;
  box-shadow:3px 3px 5px #888;
}
table.team th {
  text-align:left;
  background-color:#CCC;
}
table.team th, table.team td {
  border:1px solid #AAA;
  padding:3px 5px;
}

/* 1.6.1 Comment Tags */
#tag-select-wrapper {
  position:fixed;
  z-index:20;
  width:150px;
  background-color:#1f242f;
  padding:0px;
  margin:0px;
  border-radius:10px 10px 10px 0px;
  overflow:hidden;
}
#tag-select-wrapper ul {
  margin:0px;
  padding:0px;
}
#tag-select-wrapper li {
  list-style-type:none;
  padding:5px 15px;
  cursor:pointer;
}
li.tagOption:hover {
  background-color:#38baa4;
}
span.tag {
  padding:2px 5px;
  background-color:#38BAA4;
  border-radius:3px;
  margin-right:4px;
  font-size:0.8rem;
}
span.tag::before {
  content:"@";
}
div.tag {
  padding:2px 5px;
  background-color:#38BAA4;
  border-radius:3px;
  margin-right:4px;
  font-size:0.8rem;
}
div.tag.inline {
  display:inline-block;
  margin-left:6px;
  width:auto;
}

.mainButton.sm {
  padding:4px 8px;
}
.mainButton.lg {
  padding:10px 20px;
  border-radius:20px;
}
.mainButton.inactive {
  background-image:none;
}
.mainButton img {
  float:left;
  width:24px!important;
  height:24px!important;
}
.mainButton .button-text {
  margin:0px 4px;
  display:inline-block;
}

.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;
}
.narrow-stripe {
  width:100%;
  padding-top:0px;
  padding-bottom:0px;
  background-color:#626262;
  text-align:center;
  clear:both;
}
.object-stat {
  display:inline-block;
  width:30%;
  max-width:200px;
}
.object-stat h3 {
  text-transform: uppercase;
  font-size:1.2rem;
  margin:0px;
}
.content .object-stat p {
  font-size:3rem;
  margin:0px;
}

/* 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-previs, .badge-roughcut {
  padding-left: 22px;
  background-image: url('/images/dot-green.svg');
}
.badge-notspecified {
  padding-left: 22px;
  background-image: url('/images/dot-gray.svg');
  color:#999999;
}
.badge-awaitingrevisions, .badge-tobesecured, .badge-suspended {
  padding-left: 22px;
  background-image: url('/images/dot-yellow.svg');
  border: 1px solid yellow;
  color:yellow;
}
.badge-cancelled, .badge-rejected, .badge-requestpending, .badge-notstarted, .badge-inactive {
  border: 1px solid red;
  padding-left: 22px;
  color: #FDA29B;
  background-color: #55160C;
  background-image: url('/images/dot-red.svg');
}
.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.6.4 Cost Tiles */

.cost-tile {
  border: 1px solid #1F242F;
  border-radius: 8px;
  width:auto;
  display:inline-block;
  margin:5px;
  overflow:hidden;
}
.cost-tile-header {
  text-align:center;
  background-color: #1F242F;
  padding: 3px 8px;
}
.cost-tile-content {
  padding: 5px 10px;
  text-align: center;
}

/* 1.6.5 Crosslinks */
.crosslink {
  display: inline-block;
  background-color: #1F242F;
  padding:4px 8px;
  border-radius:5px;
  margin:2px;
  cursor:pointer;
  position:relative;
}
.crosslink:hover {
  background-color:#565f73;
}
.crosslink-open {
  width:0px;
  height:20px;
  display:none;
  position:absolute;
  top: calc(50% - 10px);
  right:3px;
}
.crosslink-content {
  display:inline-block;
  pointer-events:none;
}
.crosslink:hover .crosslink-content {
  margin-right:22px;
}
.crosslink:hover .crosslink-open {
  display:block;
  width:20px;
}

/* 1.7 Side trays */


/* 1.7.1 Sidebar */
/* tray on the left that shows reference and navigational items */

#sidebar {
  position:fixed;
  top:70px;
  left:0px;
  width:275px;
  height:calc(100% - 70px);
  border:1px solid black;
  z-index:5;
  transition:left 1s;
}
#sidebarTabs {
  padding:5px 5px 0px 5px;
  position:relative;
  z-index:2;
}
#sidebarHead {
  height:50px;
  background-color:#272727;
  color:white;
  text-align:center;
  font-size:1.5rem;
  font-weight:bold;
  line-height:50px;
}
.sidebarTab {
  background-color:#AAA;
  text-align:center;
  height:25px;
  line-height:25px;
  border:1px solid black;
  border-radius: 5px 5px 0px 0px;
  font-size:14px;
  display:inline-block;
  cursor:pointer;
  padding:0px 7px;
}
.sidebarTab.active {
  background-color:#DDD;
  border-bottom:1px solid #ddd;
}
#sidebarBody {
  background-color: #DDD;
  height:calc(100% - 55px);
  border-top:1px solid black;
  position:relative;
  top:-1px;
  overflow-y:auto;
}

.sidebar-item {
  display:none;
  padding:10px;
}
.sidebar-item.active {
  display:block;
}

.listitem {
  margin-bottom:10px;
  cursor:pointer;
  background-color:#DDD;
  transition:background-color 0.5s;
}
.listitem.highlighted {
  background-color:#ffffcc;
}
.outline-scene {
  font-family:"Courier New",Courier,monospace;
  text-transform: uppercase;
}
.list-detail {
  display:none;
  padding:5px;
  margin:4px 0px 15px 15px;
  background-color:#CCC;
  border:1px solid #999;
  font-size:13px;
}
.list-detail.open {
  display:block;
}
.list-head {
  background-image: url('/images/expand.png');
  background-position:right;
  background-repeat:no-repeat;
  background-size:20px 20px;
  cursor:pointer;
}
.list-head.expanded {
  background-image: url('/images/collapse.png');
  background-size:20px 20px;
}
.item-descr {
  margin-top:6px;
}
.empty {
  color:#AAA;
}

#sidebar.small-icon {
  background-color:rgba(255,255,0,0);
  height:30px;
  width:30px;
  float:right;
  border-radius:5px;
}
#sidebar.small-icon img {
  height:30px;
  width:30px;
}
#sidebar.small-icon:hover {
  background-color:rgba(255,255,0,1);
}
/*
#refScript {
  padding:0px;
  font-family:'courier',monospace;
}
#refScript div {
  margin-bottom:12px;
  padding:0px 10px;
}
#refScript .char {
  text-transform:uppercase;
}
#refScript .p_scene {
  text-transform:uppercase;
}
#refScript .highlight {
  background-color:#38baa4;
}
#sceneList .scene-item a {
  color:black;
  text-decoration:none;
}
#sceneList .slugline {
  font-family:'courier',monospace;
  text-transform:uppercase;
}
#refScript .flagged {
  background-color:#ff000022;
}
*/
#closeSidebar {
  position:absolute;
  right:-21px;
  top:49px;
  height:36px;
  width:20px;
  text-align:center;
  cursor:pointer;
  background-color:#272727;
  border-radius:0px 5px 5px 0px;
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index:10;
  background-image:url('/images/openTray.png');
}
#closeSidebar:hover {
  opacity:1;
}
#sidebar.closed {
  left:-277px;
}
#sidebar.closed #closeSidebar {
  background-image:url('/images/closeTray.png');
}



/* 1.7.2 Inspector */
/* tray on the right that provides details on selected items */

#inspector {
  position:fixed;
  top:0px;
  right:0px;
  height:100%;
  width:330px;
  background-color:#0C111D;
  color:white;
  transition:right 1s;
  border-left: 2px solid #1F242F;
  z-index:10;
  margin-left:40px;
}

#inspector-pull {
  position:absolute;
  width:30px;
  left:-30px;
  z-index:29;
  bottom:5%;
  height:100px;
  border:2px solid #1f242f;
  border-right:none;
  border-radius:12px 0 0 12px;
  background-image: url('/images/chevron-right.svg');
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0C111D;
}
#inspector.closed #inspector-pull {
  background-image:url('/images/chevron-left.svg');
}
#inspector-nav {
  position:relative;
  display:table;
  margin:10px 15px;
  border:2px solid #1f242f;
  border-radius:12px;
  height:36px;
  width: calc(100% - 34px);
}
#settings-nav {
  position:relative;
  display:table;
  margin:10px 15px;
  border:2px solid #1f242f;
  border-radius:12px;
  height:36px;
  width: 800px;
  max-width:100%;
}

.table-row {
  display:table-row;
}
.loadingTable {
  height:100px;
  background-image:url('/images/animatedIcon.gif');
  background-size:75px 50px;
  background-repeat:no-repeat;
  background-position:center;
}
.tableempty {
  height:50px;
  text-align:center;
  font-size:1.0rem!important;
}
.nav-icon {
  display:table-cell;
  text-align:center;
  margin:0px;
  padding:6px 12px;
  border-radius:0px;
}
.loadingscript {
  height:100px;
  background-image:url('/images/animatedIcon.gif');
  background-size:75px 50px;
  background-repeat:no-repeat;
  background-position:center 25px;
  text-align:center;
  padding-top:75px;
}
/*
this is when it was beside the drawer
#inspector-nav {
  position:absolute;
  left:-44px;
  top:300px;
  transform: translateY(-50%);
  width:40px;
  border:2px solid #1f242f;
  border-radius:12px 0 0 12px;
  background-color:#0C111D;
}
.nav-icon {
  margin:6px 2px;
  padding:6px;
}
.nav-icon img {

}
.nav-icon:hover {

}
.nav-icon:hover img {

}

*/
#inspectorHead {
  display:none;
  height:50px;
  width:100%;
}
.inspector-content {
  padding:12px 18px;
}
#inspector-content .loading-inspector {
  height:100%;
  width:100%;
  background-image:url('/images/animatedIcon.gif');
  background-size:75px 50px;
  background-repeat:no-repeat;
  background-position:center;
}

.tableempty {
  height:50px;
  text-align:center;
  font-size:1.0rem!important;
}
#inspector h3 {
  margin:0 0 24px 0;
}
#inspector a {
  text-decoration: none;
  color:inherit;
}
#closeInspector {
  position:absolute;
  right:0px;
  top:0px;
  height:36px;
  width:20px;
  text-align:center;
  cursor:pointer;
  background-color:#272727;
  border-radius:5px 0px 0px 5px;
  z-index:20;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-image:url('/images/close.svg');
}
#inspector.closed {
  right:-330px;
}
#closeInspector:hover {
  opacity:1;
}
#inspector.closed #closeInspector {
  background-image:url('/images/openTray.png');
}

.mode-icon {
  height:30px;
  width:30px;
  margin:10px;
  background-color:#38baa4;
  border-radius:3px;
  display:inline-block;
}
.mode-icon:hover {
  background-color:#C3FFE1;
}
.mode-icon.selected {
  background-color:#3B76FF;
}
.mode-icon img {
  height:100%;
  width:100%;
}

#inspector-content {
  height:100%;
}
#inspector-content.has-nav {
  height:calc(100% - 40px);
}
#inspector-body {
  overflow-y:auto;
  height: calc(100% - 80px);
  width:calc(100% - 20px);
  position:relative;
  padding:10px;
  border-top:2px solid #1f242f;
}

#inspector-body.has-footer {
  height:calc(100% - 191px);
}
/*
#inspector-content.has-nav #inspector-body.has-footer {
  height:calc(100% - 191px);
}
*/
#inspector-body.has-submit {
  height:calc(100% - 98px);
}
#inspector-body.no-footer {
  height:100%;;
}
.inspector-header {
  margin-top:0px;
  display:inline-block;
  width:100%;
}
.inspector-header-icon {
  float:left;
  display: inline-block;
  margin-right:10px;
  padding-top:5px;
}
.inspector-header h3 {
  margin-top:0px;
  margin-bottom:10px;
  display: inline-block;
}
.inspector-header h3 img {
  vertical-align:middle;
}
.inspector-list {
  display:inline;
  width:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
.inspector-list-header {
  height:50px;
}
.inspector-list-item {
  width:calc(100% - 14px);
  cursor:pointer;
  transition:background-color 0.5s;
  padding:6px;
  margin-bottom:8px;
  min-height:40px;
  border: 1px solid #1f242f;
  border-radius:12px;
}
.inspector-list-item:hover {
  background-color:#1f242f;
}
.inspector-list-item h4 {
  margin:0px;
  padding: 0 0 2px 0;
  font-size:0.8rem;
}
.inspector-list-item p {
  margin:0px;
  font-size:0.8rem;
  color:#999999;
}

.inspector-list-item.active {
  background-color:#1f242f;
}
.inspector-list-item-details {
  display:none;
  margin-left:50px;
  margin-top:8px;
  font-size:0.8rem;
}
.inspector-list-item.active .inspector-list-item-details {
  display:block;
}
.inspector-list-item-nav {
  display:inline-block;
  width:100%;
}

form#comment-form {
  margin-bottom:0px;
}
form#comment-form .form-group {
  margin-bottom:0px;
}
.comment-audience-input {
  text-align:right;
  margin-right:75px;
  margin-top:2px;
}
.comment-audience-input label {
  display:inline-block;
  font-size:0.8rem;
  color:#999999;
}
.form-group select.comment-audience-select {
  width:auto;
  padding:4px;
  font-size:0.8rem;
  border:none;
}

.comment-markup {
  display: inline!important;
  cursor:pointer;
}
.comment-markup.comment-overlap {
  background-color:#a0a0ff;
}

.hide-markup .comment-markup {
  background-color:unset!important;
  cursor:default;
}
.hide-comment-markup .comment-markup {
  background-color:unset;
}
.comment-markup.active-markup {
  background-color:#36d16b!important;
}
.comment-markup.hidden {
  display:inline!important;
  background-color:unset!important;
}
#inspector .comments-objectdetails h3 {
  margin-bottom:0px;
}
.comments-objectdetails {
  margin-bottom: 20px;
  margin-top:15px;
}
.scriptline-highlight span.comm-select {
  background-color:#4444ab;
}

@media only screen and (max-width:500px) {
  #main.has-inspector {
    margin-right:inherit;
  }
  #sidebar {
    display:none;
  }
  #inspector {
    position:fixed;
    top:66px;
    right:0px;
    height:calc(100% - 66px);
    z-index:31;
  }

  #inspector-body {
    border:none;
  }
  #inspector-body.has-footer {
    height:calc(100% - 87px);
  }
  #inspector-content {
    background-color:#0c111d;
  }
  #inspector-footer {
    bottom:0px;
    height:41px;
    padding:12px;
    background-color:#0c111d;
  }
  .inspector-content {
    padding:6px;
    overflow-y:auto;
  }
  .icon {

    padding:4px;
    margin:4px;
  }
}

/* 1.7.3 Comment Tray */

.comment-wrapper {
  padding:5px;
  margin-bottom: 30px;
  border-radius:12px;
  cursor:pointer;
  background-position:center;
  background-repeat: no-repeat;
  background-size:40px 40px;
  position:relative;
}
.comment-wrapper:hover {
  /*background-color:#1f242f;*/
}
#no-comment.comment-wrapper {
  cursor:default;
}
.comment-tools {
  display:none;
  height:40px;
  position:absolute;
  bottom:-44px;
  right:0px;
}
.comment-wrapper.active {
  margin-bottom:74px;
  background-color:#00FF0011!important;
  border:2px solid green!important;
}
.comment-wrapper.active .comment-tools {
  display:block;
}
.comment-wrapper.comment-archived {
  opacity:0.5;
  filter:saturate(0.2);
  background-color:#1f242f;
  /*background-image:url('/images/archive.svg');*/
}
.comment-wrapper.comment-accepted {
  border: 1px solid #085D3A;
  background-color:#053321;
  color:#75E0A7;
  /*background-image:url('/images/accepted.svg');*/
}
.comment-wrapper.comment-rejected {
  border:1px solid red;
  color:#FDA29B;
  background-color:#55160C;
  /*background-image:url('/images/rejected.svg');*/
}
.comment-wrapper.comment-deleted {
  border:1px solid red;
  color:#FDA29B;
  background-color:#55160C;
  /*background-image:url('/images/deleted.svg');*/
}


.script .comment-active {
  display:none;
}
.script .comment-archived {
  display:none;
}
.script .comment-accepted {
  display:none;
}
.script .comment-rejected {
  display:none;
}
.script .comment-deleted {
  display:none;
}

.comment-hide-external .comment-external {
  display:none!important;
}
.script.comment-show-Active .comment-active {
  background-color: #cdcdff;
  display:inherit;
}
.script.comment-show-Archived .comment-archived {
  background-color: #cdcdff;
  display:inherit;
}
.script.comment-show-Accepted .comment-accepted {
  background-color: #cdcdff;
  display:inherit;
}
.script.comment-show-Rejected .comment-rejected {
  background-color: #cdcdff;
  display:inherit;
}

/* now block markup when hidden */
.script.comment-show-Active.hide-markup .comment-active {
  background-color: unset;
}
.script.comment-show-Archived.hide-markup .comment-archived {
  background-color: unset;
}
.script.comment-show-Accepted.hide-markup .comment-accepted {
  background-color: unset;
}
.script.comment-show-Rejected.hide-markup .comment-rejected {
  background-color: unset;
}

.comment-thread {
  padding:5px;
  margin-bottom: 12px;
}
.comment {
  position:relative;
  padding:0 10px;
  margin-left:40px;
}
tr.comments .comment {
  margin-left:0px;
}
.comment h2 {
  margin:0px;
  font-size:1rem;
  font-weight:normal;
  color:#CCCCCC;
}
.comment-date {
  font-size:0.7rem;
  color:#999999;
  text-align:right;
}
.comment-header {
  min-height:24px;
  position:relative;
}
.comment-author {
  position:absolute;
  left:0px;
  top:0px;
}
tr.comments .comment-author {
  position:relative;

}
.comment-audience {
  color:#999999;
  position:absolute;
  top:2px;
  right:0px;
  font-size:0.8rem;
}
tr.comments .comment-audience {
  color: white;
  position:relative;
  top:0px;
  right:0px;
}
.scriptnote-date {
  font-size:0.9rem;
  color:#999999;
  text-align:right;
}
.scriptnote {
  padding: 10px 15px;
  margin-bottom:15px;
  border-radius:10px;
}
.scriptnote:hover {
  background-color:#444444;
}
.scriptnote-tools {
  display:none;
  position:relative;
  top:8px;
}
.scriptnote.active {
  margin-bottom:74px;
  background-color:#00FF0011!important;
  border:2px solid green!important;
}
.scriptnote.active .scriptnote-tools {
  display:block;
}
.comment-text {
  color:white;
  border-radius:0px 12px 12px 12px;
  padding:8px 10px;
  background-color: #1f242f;
}
.comment-input {
  outline: none;
  border:1px solid #1f242f;
  border-radius:12px;
  padding:6px 12px;
  width:calc(100% - 100px);
  min-height:24px;
  height:auto;
  max-height:108px;
  overflow:hidden;
}
.comment-input-wrapper .comment-input {
  min-height:90px;
}
.note-input {
  outline: none;
  border:1px solid #1f242f;
  border-radius:12px;
  padding:6px 12px;
  width:calc(100% - 26px);
  height:80px;
  overflow:hidden;
  white-space: nowrap;
}
.comment-add-media {
  position:absolute;
  top:7px;
  right:82px;
  width:24px;
  height:24px;
  background-color:white;
  opacity:0.6;
  border-radius:12px;
  background-image:url('/images/plus-dark.svg');
  background-size: 20px 20px;
  background-position: center;
  background-repeat:no-repeat;
  transition:opacity 0.5s;
  cursor:pointer;
}
.comment-add-media:hover {
  opacity:1;
}
.comment-media-drop {
  height:0px;
  opacity:0;
  width:100%;
  transition:height 0.5s, opacity 0.5s;
}
.comment-media-drop.active {
  height:89px;
  opacity:1;
}
.upload-icon {
  background-image:url('/images/upload.svg');
  background-color:#222222;
  border-radius:12px;
  width:40px;
  height:40px;
  margin-left:auto;
  margin-right:auto;
  background-position:center;
  background-repeat:no-repeat;
}
.comment-accepted .comment-text, .comment-rejected .comment-text, .comment-archived .comment-text, .comment-deleted .comment-text {
  background-color:unset;
}
.comment-replies {
  text-align:right;
  padding:4px;
}
.reply-wrapper {
  width:calc(100% - 30px);
  margin-top:10px;
  margin-left:30px;
}
form.add-reply {
  margin:7px 0 0 0;
  height:44px;
  margin-left:20px;
}
form.add-reply .form-group {
  margin:0px;
}
.add-reply-text {
  width:calc(100% - 75px);
}
.add-reply-button {
  margin: 0px 6px;
}
/*
.form-group input.add-reply-text {
  height:30px;
  line-height:30px;
  margin:7px 0px;
  width:100px;
  padding:0px 10px;
  cursor:pointer;
  transition:width 0.5s;
}
input.add-reply-text:focus {
  width:calc(100% - 60px);
  background-color:#1f242f;
}
*/

.comment-delete {
  position:absolute;
  bottom:2px;
  right:2px;
  width:24px;
  height:24px;
  background-image:url('/images/delete.png');
  background-size:contain;
  opacity:0.4;
}
.comment-delete:hover {
  opacity:1;
}
.comment-reject {
  height:24px;
  width:24px;
  background-image: url('/images/rejected.png');
  background-position:center;
  background-size:contain;
  opacity:0.2;
  transition:opacity 0.5s;
  float:right;
  position:relative;
  top:-7px;
  right:-7px;
  cursor:pointer;
}
.comment-reject:hover {
  opacity:1;
}
.comment-approve {
  height:24px;
  width:24px;
  background-image: url('/images/approved.png');
  background-position:center;
  background-size:contain;
  opacity:0.2;
  transition:opacity 0.5s;
  float:right;
  position:relative;
  top:-7px;
  right:-7px;
  cursor:pointer;
}
.comment-approve:hover {
  opacity:1;
}
.comment.reveal-drop {
  background-image:url('/images/upload.png');
  background-position:center;
  background-repeat:no-repeat;
}
.comment.reveal-drop .comm_text {
  opacity:0.5;
}
.comment.reveal-drop .comm_head {
  opacity:0.5;
}

.fauxfield {
  padding:5px;
  border:1px solid black;
  cursor:text;
  margin-bottom:10px;
  width:calc(100% - 10px);
  min-height:40px;
}
#comment-close-reply {
  height:30px;
  width:30px;
  background-image:url('/images/close.png');
  position:absolute;
  right:0px;
  top:0px;
  cursor:pointer;
}
/* a reply in-thread */

.comment-wrapper.approved {
  background-color:#a8e5a8;
}
.comment-wrapper.rejected {
  background-color:#f5d2d2;
}
/* hide iteractive elements once comment is resolved */
.comment-wrapper.resolved .comment-reject {
  display:none;
}
.comment-wrapper.resolved .comment-approve {
  display:none;
}
.comment-wrapper.resolved button {
  display:none;
}
.comment-wrapper.resolved .comment-delete {
  display:none;
}
.ctext[contenteditable="true"] {
  background-color:white;
  padding:5px;
  border-radius:3px;
}
#comment-text {
  width: calc(100% - 75px);
}
/* 1.7.4 Conversations */

#conversation-wrapper {
  width:450px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}
#record {
  position:absolute;
  right:0px;
  top: 0px;
  height:50px;
  width:50px;
  border-radius:25px;
  background-color:#38BAA4;
  cursor:pointer;
  transition:backgrouondColor .3s;
}
#record.active {
  background-color:#3B76FF;
}
#record img {
  height:100%;
  width:100%;
}
#pending {
  position:absolute;
  top:20px;
  right:55px;
  width:40px;
  height:30px;
  border-radius:15px;
  background-color:#CCC;
  text-align:center;
}
#conversation-list {
  position:absolute;
  right:55px;
  top:60px;
  width:calc(100% - 55px);
}
.conversation-item {
  width:90%;
  margin-right:10%;
  position:relative;
  height:50px;
  border-radius:25px;
  margin-bottom:10px;
  background-color:#CCC;
  margin-left:auto;
}
.conversation-item.self {
  background-color:#38BAA4;
  margin-left:10%;
  margin-right:0px;
}

.conversation-item .play-btn {
  background-image:url('/images/play_btn.png');
  background-size:cover;
  background-position:center;
  height:40px;
  width:40px;
  position:absolute;
  top:5px;
}
.conversation-item.other .play-btn {
  left:0px;
}
.conversation-item.self .play-btn {
  right:0px;
}
.conversation-item .play-btn.active {
  background-image:url('/images/pause_btn.png');
}
.conversation-item .canvas-wrapper {
  width:calc(100% - 50px);
  position:absolute;
  top:0px;
  height:50px;
}
.conversation-item.other .canvas-wrapper {
  left:50px;
}
.conversation-item.self .canvas-wrapper {
  right:50px;
}

/* 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.8.1 Notifications */
#notifications {
  position:relative;
  cursor:pointer;
}
#notifications.active {
  background-image: linear-gradient(0deg, #02c765,#38BAA4);
}

#notification-count {
  display:none;
  position:absolute;
  background-color:#3b76ff;
  bottom:10px;
  right:12px;
  padding:2px 10px;
  font-size:1rem;
  border-radius:7px;
}
#notifications.active #notification-count {
  display: block;
}
.navbarClosed #notification-count {
  right:-8px;
  bottom:-6px;
  padding:1px 8px;
  font-size:0.7rem;
}
ul.notifications, ul.notification-list {
  list-style: none;
  margin:0px;
  padding:0px;
}
ul.notifications li, ul.notification-list li {
  background-size:24px 24px;
  background-position:left 6px center;
  background-repeat:no-repeat;
  background-color:white;
  padding: 5px;
  min-height:42px;
  color:#0c111d;
  border-radius:10px;
  box-shadow:3px 3px 3px black;
  cursor:pointer;
  position:relative;
}
ul.notifications li {
  margin-top:15px;
}
ul.notifications li.note-new, ul.notification-list li.note-new {
  background-color:#38baa4;
}
ul.notification-list {
  margin-bottom:30px;
}
ul.notification-list li {
  width:calc(100% - 70px);
  margin-bottom:20px;
}
li.note-new {
  background-color:#DDD;
  font-weight:bold;
}
ul.notifications li:hover, ul.notification-list li:hover {
  background-color:#afafff;
}
ul.notifications li a, ul.notification-list li a {
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
.note-header {
  font-weight:bold;
}
.note-message {
  font-size:0.9rem;
  color:#444444;
}
.note-icon {
  margin:0px;
  position:absolute;
  right:-40px;
  top:0px;
}
/*
.note-tagged {
  background-image:url('/images/at-sign.svg');
}
.note-collabjoined {
  background-image:url('/images/user_plus.svg');
}
.note-shareopened {
  background-image:url('/images/mail-opened.svg');
}
*/
#notes-wrapper {
  position:absolute;
  z-index:38;
  width:300px;
  bottom:20px;
  right:-325px;
  border-radius:10px;
  overflow:hidden;
}
#notes-popups-wrapper {
  position:absolute;
  z-index:19;
  top:60px;
  right:0px;
}
#notes-popups {
  list-style:none;
  padding:0px;
}
#notes-popups li {
  background-color:white;
  height:30px;
  width:300px;
  background-size:30px 30px;
  background-position:left center;
  background-repeat:no-repeat;
  padding: 2px 5px 2px 35px;
  border:1px solid black;
  border-radius:5px;
  margin-bottom:5px;
  line-height:30px;
}
#notes-popups li:hover {
  background-color:#afafff;
}



/* 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;
  }
}

/* 2.1 SCRIPT  */
/*.intro {
    width:750px;
    padding:0px 20px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
}*/
.script {
  font-family:"Courier New",Courier,monospace;
  font-size:16px;
  width: 100%;
  background-color:white;
  container-type: inline-size;
}
.script.book {
  font-family:"Merriweather", serif;
  font-weight:400;
  font-size:0.9rem;
  line-height:1.5;
}
.script-preview {
  max-width:370px;
  margin-left:auto;
  margin-right:auto;
  max-height:180px;
  border-radius:15px;
  text-align:left;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.script-preview .script {
  pointer-events: none;
}
.script-preview-open {
  height:100%;
  width:100%;
  position:absolute;
  top:0px;
  left:0px;
}
.script-preview:hover .script {
  opacity:0.8;
}
.script-preview-button {
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  color:white!important;
  background-color:#999999!important;
  background-image:none;
  width:150px;
  text-align:center;
}
.script-preview:hover .script-preview-button {
  background-image:linear-gradient(0deg, #02c765,#38BAA4)!important;

}
.script-preview .scriptline-scene {
  margin-top: 5px!important;
}
.script-preview .scriptline-margin {
  display:none;
}
#script.script-preview {
  padding:10px 10px;
}
.scene-wrapper {
  position:relative;
}
.scene-number {
  display:none;
  position:absolute;
  top:0px;
  left:6px;
}
.show-snums .scene-number {
  display:block;
}
.script-version {
  color:#999999;
  font-size:1rem;
  margin-left:15px;
}
.scriptline-wrapper {
  max-width:770px;
  width:calc(100% - 140px);
  margin-left:auto;
  margin-right:auto;
  position:relative;
  width:100%;
  display:table;
  border-left:4px solid white;
}
.scriptline-body {
  display:table-row;
}
.scriptline-status {
  display:table-cell;
}
#script.trackchanges .status-changed {
  border-left: 4px solid #FFFF00;
}
#script.trackchanges .status-added {
  border-left:4px solid #00FF0044;
}
.status-deleted, .status-deleted .scriptline-handle, .status-deleted .scriptline-text, .status-deleted .scriptline-comments {
  display:none;
}

#script.trackchanges .status-deleted {
  display:block;
  border-left:4px solid red;
  height:4px;
  border-top:1px solid #ff000022;
}

.scriptline-handle {
  display:table-cell;
  width:40px;
  background-image:url('/images/drag-handle.svg');
  background-position:center;
  background-repeat:no-repeat;
  transition:opacity 0.5s;
  opacity:0;
  pointer-events: none;
}
.edit-mode .scriptline-handle {
  cursor:pointer;
  pointer-events:auto;
}
.edit-mode .scriptline-handle:hover {
  opacity:0.8;
}
.scriptline-text {
  display:table-cell;
  vertical-align:top;
  width:630px;
  max-width:calc(100% - 140px);
}
.scriptline-comments {
  display:inline-block;
  text-align:left;
  width:auto;
  height:36px;
}
.scriptline-wrapper:hover .scriptline-comments .hover-icon {
  opacity:0.2;
}
.add-comment-icon.sticky {
  opacity:1;
}
.comment-icon {
  display:inline-block;
  border-radius:18px;

}
/*
.comment-icon.active-markup {
  border:2px solid #36d16b;
}
*/
.character {
  margin-left:195px;
  margin-bottom:0px;
  min-height:18px;
}
#charSuggest {
  color: #CCC;
  position:absolute;
  z-index:1;
}
.charName {
  position:relative;
  z-index:2;
  text-transform: uppercase;
  min-width:40px;
}
.charSuggest {
  color:#CCC;
  position:absolute;
  z-index:1;
  text-transform: uppercase;
}
.scriptline-dialog {
  margin-top:14px;
  margin-bottom:14px;
}
.script-dialog-wrapper {
  margin-left:100px;
  margin-right:155px;
  margin-top:0px;
}
.script-parenthetical {
  margin-left: 34px;
  margin-right:80px;
}
.script-parenthetical::before {
  content: "\0028";
}
.script-parenthetical::after {
  content:"\0029";
}

.osvo_btn {
  display:none;
}
.parenthetical {
  margin-left:60px;
  display:block;
}
.scriptline-action {
  margin-top:14px;
  margin-bottom:14px;
}
.script-action {
}
.script-transition {
  text-align:right;
  text-transform:uppercase;
}
.new-scene-prompt {
  position:absolute;
  top:-14px;
  color:#999999;
  font-size:0.8rem;
}
.hover-icon {
  opacity:0;
  transition:opacity 0.5s;
  cursor:pointer;
}
.hover-icon:hover {
  opacity:1!important;
}
.scriptline-margin {
  position:relative;
  width:140px;
}
.scriptline-addtools {
  position:absolute;
}

.scriptline-attachments {
  position:absolute;
  top:0px;
  left:30px;
}
.add-selector {
  opacity:0;
  position:absolute;
  display:block;
  width:30px;
  height:30px;
}
.add-selector:hover {
  opacity:0.4;
}
.add-selector.active {
  opacity:1;
}
.add-selector-content {
  opacity:0;
  position:absolute;
  top:30px;
  width:100px;
  background-color:#DDDDDD;
  border-radius:5px;
  padding:5px;
}
.add-selector.active .add-selector-content {
  opacity:1;
}
.add-selector.active .hover-icon {
  opacity:0.4;
  display:inline-block;
}
.add-selector.active .hover-icon:hover {
  opacity:1;
}
.add-selector-icon {
  display:block;
  height:100%;
  width:24px;
}
.scriptline-media {
  width:30px;
  /* turned off until sub-menu ready
  display:inline-block; */
  display:none;
}
.scriptline-notes {
  width:30px;
  /*  Turned off until sub-menu ready
  display:inline-block;*/
  display:none;
}

.scriptline-scene {
  margin-top:28px;
  margin-bottom:14px;
}
.scriptline-slugline {
  margin-bottom:14px;
  margin-top:28px;
}
.script-slugline {
  text-transform: uppercase;
  position:relative;
  z-index:2;
}
.script-slugline-prompt {
  color:#CCCCCC;
  position:absolute;
  text-transform: uppercase;
  top:0px;
}
.scene_number {
  position:absolute;
  display:none;
  left:0px;
}
.show-snums .scene_number {
  display:block;
}
.transition {
  text-align:right;
  text-transform:uppercase;
  margin-bottom:15px;
}
.translated {
  font-style:italic;
}
.script {
  color: black;
}
.script div {
  /*transition: background-color 1s;*/
  outline:none;
}

.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;
}

/*
.script-dialog span {
  outline:none;
  height:16px;
  display:block;
  margin-left:40px;
}
.script-dialog span::before {
  content: "\0028";
}
.script-dialog span::after {
  content: "\0029";
}*/
.script-dialog-italics {
  font-style:italic;
}
.scene_wrapper {
  margin-bottom:36px;
}
#script .selected {
    background-color: #3B76FF44;
}
#script .highlighted {
    background-color: #FFFFCC;
}
#script .hoverSelect {
    background-color: rgba(255,0,0,0.1);
}
#script .updated {
    background-color: rgba(255,0,0,0.2);
}
#script .saved {
  background-color: rgba(0,255,0,0.2);
}
/*
These are for when edits are tracked in sessions.
#script .pending {
    border-left: 4px solid yellow;
}
#script .edited {
  border-left:4px solid yellow;
  padding-left:6px;
}
#script .added {
  border-left:4px solid green;
  padding-left:6px;
}
*/


@container (max-width: 500px) {
  #workspace {
    padding:30px 10px;
  }
  .script {
    width:100%;
    padding-left:0px;
    padding-right:0px;
  }
  .scriptline-handle {
    display:none;
  }
  .character {
    margin-left:80px;
  }
  .add-selector {
    display:none;
  }
  .scriptline-attachments {
    left:0px;
  }
  .script-dialog {
    margin-left:40px;
    margin-right:60px;
  }
  .pagehead {
    display:none;
  }
  .scriptline-text {
    max-width:calc(100% - 40px);
  }
  .scriptline-margin {
      width:40px;

  }
}

/* OLD METHOD
@media only screen AND (max-width: 500px) {
  #workspace {
    padding:30px 10px;
  }
  .script {
    width:100%;
    padding-left:0px;
    padding-right:0px;
  }
  .scriptline-handle {
    display:none;
  }
  .character {
    margin-left:80px;
  }
  .add-selector {
    display:none;
  }
  .scriptline-attachments {
    left:0px;
  }
  .script-dialog {
    margin-left:40px;
    margin-right:60px;
  }
  .pagehead {
    display:none;
  }
  .scriptline-text {
    max-width:calc(100% - 40px);
  }
  .scriptline-margin {
      width:40px;
  }
}
*/

@media print {
    @page {
        size: A4;
        margin:1in 1in 1in 1.5in;
    }
    body {
        padding:0px;
        max-width:none;
        top:0px;
        position:relative;
    }
    #header {
        display:none;
    }
    .merge {
        display:none;
    }
    .changeType {
        display:none;
    }
    .intro {
        display:none;
    }
    .script {
        width:100%;
        padding:15px;
        margin:15px;
    }
    .scene {
        page-break-after:avoid;
        cursor:pointer;
    }
    .character {
        page-break-after:avoid;
    }
    .dialog {
        orphans:2;
        widows:2;
    }
    .action {
        orphans:2;
        widows:2;
    }

}

/* 2.2 Translations */

.translations {
    width:750px;
    padding:10px 20px;
    background-color:white;
    font-family:"Courier New",Courier,monospace;
    font-size:16px;
}
.trans_orig {
    width:50%;
    float:left;
    display:inline-block;
}
.trans {
    width:50%;
    display:inline-block;
}
.trans_row {
    clear:both;
}
.translations .dialog {
    margin-left:0px;
    margin-right:10px;
}
.translations .character {
    margin-left:50px;
}
.translations .parenthetical {
    margin-left:20px;
}
.translations textarea {
    width:100%;
    height:80px;
}

/* 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 .thumbnail {
  border:none;
}
.thumbnail video {
  height:100%;
  width:100%;
}
.item-list .video-thumb {
  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;
}
.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 {
  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;
}
.list-item p.placeholder, .item-tile p.placeholder {
  color:#999999;
}
.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 {

}
.thumbnail {
  height:60px;
  width:143px;
  object-fit:scale-down;
  display:inline-block;
  position:relative;
}
.thumbnail img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.object-thumb {
  position:relative;
  /*height:200px!important;*/
}
.expand-thumb {
  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-thumb video {
  width:100%;
  height:100%;
  object-fit:cover;
}
.expand-thumb:hover {
  opacity:1;
}
.board-thumb {
  width:120px;
  height:80px;
  position:relative;
}
.board-thumb img {
  object-fit:cover;
}

.mediathumb {
  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-thumb {
  float:left;
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:32px;
}
.object-thumb.sm {
  width:40px;
  height:40px;
  margin-right:10px;
  margin-bottom:2p;x
}
.item-list .object-thumb {
  margin-right:5px;
  margin-left:5px;
  float:none;
  display:inline-block;
}
.object-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.object-thumb.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;
}

.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-thumb {
    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:300px;
  display:inline-block;
  position:relative;
  margin:10px 25px;
  padding:10px 15px;
  border:1px solid #999999;
  border-radius:12px;
  background-color:#1F242F;
}
.tile-header {
  width:100%;
  height:24px;
  position:absolute;
  top:0px;
  left:0px;
  text-align:left;
  margin: 4px 12px;
}
.tile-image {
  width:240px;
  height:160px;
  margin-top:16px;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:16px;
  background-color:black;
}
.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:absolute;
  bottom:3px;
  right:9px;
  font-size:0.8rem;
  color:#999999;
}

/*
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;
}

/* 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%;
}
.thumbnail-tile {
  display:inline-block;
  margin:10px 20px 30px 20px;
  text-align:center;
  cursor:pointer;
}
.thumbnail-tile img {
  border:1px solid black;
  border-radius:10px;
  width:256px;
  height:144px;
  object-fit:contain;
}
.thumbnail-tile.vertical {
  height:256px;
  width:144px;
}
.thumbnail-tile.square {
  height:144px;
  width:144px;
}
.thumbnail-tile.circle {
  height:200px;
  width:200px;
  border:none;
  border-radius:100px;
  overflow:hidden;
}
.thumbnail-tile.circle img {
  height:100%;
  width:100%;
  object-fit:cover;
}
.sm_thumb {
  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:#32baa4;
  text-align:center;
  text-decoration: underline;
  cursor:pointer;
  font-size:0.8rem;
}
.button-right {
  top:2px;
  right:2px;
}
#details .dropbox {
  background-color:#CCCCCC;
}
.video-thumb {
  width:100%;
  height:auto;
  padding:2px 0px !important;
  position:relative;
}
.video-thumb 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 {
  height:20px;
  width:100%;
  position:relative;
}
#animatic-timeline-playhead {
  position:absolute;
  width:6px;
  height:30px;
  background-color:white;
  border:1px solid black;
  top:-5px;
  border-radius:3px;
  left:0px;
}
.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;
}
.timeline-vblock.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');
}