@charset "UTF-8";
/**
 * Retrieves a color value from the $material-colors Sass map
 * Inspired by https://github.com/nilskaspersson/Google-Material-UI-Color-Palette/
 *
 * @function
 * @param {string} color-name             - quoted, lower-case, dasherized color
 *                                          name (e.g. 'pink', 'amber')
 * @param {string} [color-variant='500']  - quoted, lowercase color variant (e.g.
 *                                          '200', 'a100')
 */
/**
 * GLOBAL VARIABLES
 * note: this file is OMITTED from the scss compiler (see paths-app.js)
 * instead, it is @included in bootstrap.scss so it is loaded before other scss
 */
/**
 *		icomoon.com
 * 		custom icon font
 **/
@font-face {
  font-family: "icomoon";
  src: url("../assets/icomoon_fonts/icomoon.eot?arifm");
  src: url("../assets/icomoon_fonts/icomoon.eot?arifm#iefix") format("embedded-opentype"), url("../assets/icomoon_fonts/icomoon.ttf?arifm") format("truetype"), url("../assets/icomoon_fonts/icomoon.woff?arifm") format("woff"), url("../assets/icomoon_fonts/icomoon.svg?arifm#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * GLOBAL STYLES: ADDHERE CUSTOM ELEMENTS & STYLES
 */
.tool-icon {
  text-transform: none;
}

.tool-icon:not([disabled]) ng-md-icon {
  color: #9e9e9e;
  transition: color 0.1s;
}
.tool-icon:not([disabled]):hover {
  color: #ffb74d;
}
.tool-icon:not([disabled]):hover ng-md-icon {
  color: #ffb74d;
}
.tool-icon:not([disabled]).active ng-md-icon {
  color: white;
}

.tool-icon[disabled] {
  opacity: 0.5;
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate270 {
  transform: rotate(270deg);
}

.mirror {
  transform: scaleX(-1);
}

.ah-action-link, .ah-action-link a {
  min-width: 0;
  text-align: left;
  padding: 6px 0;
  font-weight: 400;
  cursor: pointer;
  color: #039be5;
  transition: color 0.1s;
  text-decoration: none;
}
.ah-action-link ng-md-icon, .ah-action-link a ng-md-icon {
  transition: color 0.1s;
  transform: translateY(-2px);
  color: #039be5;
}
.ah-action-link ng-md-icon.rotate90, .ah-action-link a ng-md-icon.rotate90 {
  transform: translateY(-2px) rotate(90deg);
}
.ah-action-link:hover, .ah-action-link a:hover {
  color: #0277bd;
}
.ah-action-link:hover ng-md-icon, .ah-action-link a:hover ng-md-icon {
  color: #0277bd;
}
.ah-action-link.disabled, .ah-action-link a.disabled {
  color: #9e9e9e;
  pointer-events: none;
}
.ah-action-link.disabled ng-md-icon, .ah-action-link a.disabled ng-md-icon {
  color: #9e9e9e;
}
.ah-action-link.active, .ah-action-link a.active {
  color: #ff8a65;
}
.ah-action-link.active ng-md-icon, .ah-action-link a.active ng-md-icon {
  color: #ff8a65;
}

.ah-toggle-button {
  position: relative;
  cursor: pointer;
  text-align: center;
  z-index: 10;
}
.ah-toggle-button .icon-container {
  width: 30px;
  margin: auto;
  background-color: white;
  transform: translateY(10px);
  border-radius: 10px;
  transition: background-color 0.2s;
  text-align: center;
  color: #9e9e9e;
}
.ah-toggle-button .icon-container:hover {
  background-color: #ffb74d;
}
.ah-toggle-button .icon-container:hover ng-md-icon {
  color: white;
}
.ah-toggle-button.label {
  text-align: left;
  display: flex;
  justify-content: flex-start;
}
.ah-toggle-button.label .icon-container {
  transform: none;
  margin: 0;
}
.ah-toggle-button.label .label {
  margin-right: 10px;
  display: flex;
  align-items: center;
  color: #9e9e9e;
  font-weight: bold;
  font-size: 0.8em;
}

.ah-tools-panel {
  background-color: white;
  padding: 10px;
}
.ah-tools-panel .tool-icon.delete-forever ng-md-icon {
  color: red;
}
.ah-tools-panel .tool-icon .mouse-out {
  display: inline-block;
}
.ah-tools-panel .tool-icon .mouse-in {
  display: none;
}
.ah-tools-panel .tool-icon:hover {
  color: #ffb74d;
}
.ah-tools-panel .tool-icon:hover .mouse-out {
  display: none;
}
.ah-tools-panel .tool-icon:hover .mouse-in {
  display: inline-block;
}

.ah-action-button {
  display: flex;
  justify-content: center;
  border-radius: 12px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  background-color: white;
  transition: opacity 0.2s;
  opacity: 0.4;
}
.ah-action-button ng-md-icon {
  transition: color 0.2s;
  width: 18px;
  height: 18px;
  color: black;
}
.ah-action-button.active {
  opacity: 1;
}
.ah-action-button.active ng-md-icon {
  color: #ff8a65;
}
.ah-action-button:hover {
  opacity: 0.6;
}
.ah-action-button.ah-action-button-lt {
  background-color: rgb(189, 189, 189);
}
.ah-action-button.ah-action-button-lt ng-md-icon {
  color: white;
}
.ah-action-button.ah-action-button-lt.active {
  background-color: #ff8a65;
}
.ah-action-button.ah-action-button-lt:hover {
  background-color: #a4a4a4;
}
.ah-action-button.ah-action-button-lt:hover.active {
  background-color: #ff6332;
}

.wrap-height {
  height: 100%;
}

.panel-controls {
  min-height: 50px;
}

.link-secondary {
  color: #2196f3;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}
.link-secondary:hover {
  color: #1976d2;
}

.size-control {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  min-height: 10px;
  color: #9e9e9e;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.size-control:hover {
  cursor: row-resize;
}

.simple-text-button {
  cursor: pointer;
}
.simple-text-button:hover {
  color: #f57c00 !important;
  text-decoration: underline;
}

.icon-unlock-alt:before {
  content: "\e900";
}

.icon-lock:before {
  content: "\e901";
}

.ah-select-dropdown md-optgroup {
  padding: 10px 0;
}
.ah-select-dropdown md-optgroup label {
  padding: 0px 16px 10px 16px;
  text-transform: none;
  font-size: 0.8em;
  font-weight: 500;
}
.ah-select-dropdown md-optgroup:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
.ah-select-dropdown .md-text {
  font-size: 0.9em;
}
.ah-select-dropdown md-option {
  height: 30px;
}
.ah-select-dropdown md-select-menu,
.ah-select-dropdown md-content {
  max-height: 500px;
}
.ah-select-dropdown .show-all {
  display: block;
  text-align: center;
}
.ah-select-dropdown .show-all button {
  margin-bottom: 0;
}

.ah-asset-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0px 5px 1px 5px;
  border-radius: 8px;
  background-color: #bdbdbd;
  text-align: center;
  line-height: 1.3em;
  font-size: 0.8em;
  font-weight: bold;
  color: white;
}

.add-page-container,
.add-slide-container {
  cursor: pointer;
  position: relative;
  align-self: stretch !important;
  outline: none;
  min-width: 80px;
  margin: 4px;
  background-color: #fcfcfc;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 2px;
  transition: background-color 0.3s;
}
.add-page-container ng-md-icon,
.add-slide-container ng-md-icon {
  color: rgb(215, 215, 215);
}
.add-page-container:hover,
.add-slide-container:hover {
  background-color: #ffb74d;
  font-weight: 500;
}
.add-page-container:hover ng-md-icon,
.add-slide-container:hover ng-md-icon {
  color: white;
}

.add-slide-container {
  width: 122px;
  margin-bottom: 8px;
  transition: width 0.5s ease;
}
.add-slide-container.wide {
  width: 162px;
}

.slide-icon {
  fill: #9e9e9e;
  transition: fill 0.15s linear;
}
.slide-icon .icon-bg {
  fill: white;
}
.slide-icon:hover {
  fill: #ffa726;
}

.aspect-switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9e9e9e;
  min-height: 40px;
}
.aspect-switch-container .aspect-ratio-button {
  min-width: 30px;
  border-radius: 0;
}
.aspect-switch-container .aspect-ratio-button .slide-icon {
  fill: #9e9e9e;
  width: 70px;
  height: 70px;
}
.aspect-switch-container .aspect-ratio-button .slide-icon .icon-bg {
  fill: white;
}
.aspect-switch-container .aspect-ratio-button .slide-icon svg {
  width: 100%;
  height: 100%;
}
.aspect-switch-container .aspect-ratio-button.default .slide-icon, .aspect-switch-container .aspect-ratio-button.selected .slide-icon {
  fill: #42a5f5;
}

md-switch.confidential-switch {
  margin: 0;
}
md-switch.confidential-switch.ng-not-empty .md-thumb:after {
  color: white;
  content: "\e901";
}
md-switch.confidential-switch .md-thumb:after {
  display: block;
  content: "\e900";
  font: normal normal normal 12px/1 icomoon;
  color: #9e9e9e;
  line-height: 21px;
  text-align: center;
}

md-switch.ocr-switch {
  margin: 0;
}

.notification-badge {
  position: absolute;
  border-radius: 50%;
  background-color: #f4511e;
  border: 2px solid white;
  width: 15px;
  height: 15px;
  top: -7.5px;
  right: -7.5px;
}
.notification-badge.small {
  border: 1px solid white;
  width: 10px;
  height: 10px;
  top: -5px;
  right: -5px;
}

.ah-remove-button, .ah-add-button {
  z-index: 1;
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0 !important;
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 50% !important;
}
.ah-remove-button ng-md-icon, .ah-add-button ng-md-icon {
  color: #1e88e5;
  transition: color 0.15s;
}
.ah-remove-button ng-md-icon:hover, .ah-add-button ng-md-icon:hover {
  color: #ffb74d;
}

.ah-add-button {
  right: auto;
  left: -8px;
}

.text-icon-button {
  display: inline-flex;
}
.text-icon-button > span {
  padding: 0 5px;
}

/**
 * GLOBAL STYLES: ANGULAR & MATERIAL ELEMENTS
 */
md-content {
  background-color: white;
}

md-input-container {
  margin: 18px 0;
}

.md-errors-spacer {
  display: none;
}

md-paging button {
  height: 35px !important;
  width: 35px !important;
  margin: 5px !important;
}

[ng-click] {
  outline: none;
}

.md-tooltip {
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  height: auto;
}

md-dialog .warning {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #f44336;
  color: #f44336;
}

.md-button[type=file] > input[type=file] {
  display: none;
}

.md-placeholder,
md-input-container label,
md-checkbox {
  color: #616161;
}

.md-dialog-container {
  z-index: 100;
}

md-backdrop.md-dialog-backdrop {
  z-index: 99;
}

md-checkbox {
  margin-bottom: 5px;
  color: #616161;
}
md-checkbox .md-icon {
  border-color: #9e9e9e !important;
}
md-checkbox.active {
  color: #2196f3;
}
md-checkbox.md-checked .md-icon {
  border-color: #64b5f6 !important;
  background-color: #64b5f6 !important;
}
md-checkbox.md-checked .md-icon:after {
  border-color: white !important;
}

.md-button {
  color: #616161;
}

.md-button.md-raised.md-primary:not([disabled]) {
  color: white;
  background-color: #0277bd;
}

.md-button.md-icon-button {
  height: auto;
  width: auto;
  min-height: 0;
  min-width: 0;
  line-height: 20px;
  align-self: center;
  flex-shrink: 0;
  padding: 5px;
  margin: 0;
  border-radius: 4px;
}
.md-button.md-icon-button.rotate45 {
  transform: translate(0px, -2px) rotate(-45deg);
}
.md-button.md-icon-button.wide {
  padding: 2px 5px;
}

ng-md-icon.small {
  width: 15px;
  height: 15px;
}
ng-md-icon.small-medium {
  width: 20px;
  height: 20px;
}
ng-md-icon.small-medium.wide {
  width: 28px;
  height: 26px;
}
ng-md-icon.medium {
  width: 27px;
  height: 27px;
}
ng-md-icon.med-large {
  width: 40px;
  height: 40px;
}
ng-md-icon.large {
  width: 55px;
  height: 55px;
}
ng-md-icon.x-large {
  width: 70px;
  height: 70px;
}
ng-md-icon svg {
  width: 100%;
  height: 100%;
}

md-divider.vertical {
  border-top-width: 0;
  border-right: 1px solid rgb(215, 215, 215);
  height: 100%;
}

md-tabs {
  width: 100%;
  height: 100%;
}
md-tabs .md-tab {
  font-size: 17px;
  font-weight: bold;
  color: #9e9e9e;
  text-transform: none;
  padding-top: 14px;
}
md-tabs .md-tab ng-md-icon {
  transform: translate(-2px, -2px);
}
md-tabs md-ink-bar {
  background: #42a5f5 !important;
}

/**
 * GLOBAL STYLES: HTML ELEMENTS
 */
html,
body {
  height: 100%;
  overflow: hidden !important;
}

body {
  position: relative;
}
body * {
  box-sizing: border-box;
}

/* Scrollbar styles */
/* total width */
::-webkit-scrollbar {
  background-color: #fff;
}

/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}

/* scrollbar itself */
::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 4px solid #f6f6f6;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
  display: none;
}

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

.md-color-picker-input-container {
  cursor: pointer;
}
.md-color-picker-input-container md-input-container {
  display: none;
}
.md-color-picker-input-container .md-color-picker-preview {
  top: auto !important;
}
.md-color-picker-input-container .md-color-picker-clear {
  bottom: auto !important;
  right: -30px !important;
}

addin-component {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: hsl(240, 3.7%, 15.9%);
}

addin-workspace-component {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: white;
}
addin-workspace-component #workspace-container {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
addin-workspace-component #workspace-container > * {
  height: 100%;
}
addin-workspace-component .form-edit, addin-workspace-component .project-settings {
  display: flex;
}
addin-workspace-component .artwork-chooser-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
addin-workspace-component .chooser-header {
  background: #0277bd;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex: 0 0 50px;
}
addin-workspace-component .chooser-header .chooser-title {
  color: white;
  font-weight: bold;
}

ah-ng-color-selector {
  display: block;
}
ah-ng-color-selector .toggle-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 3px;
  background-color: white;
  border: 1px solid rgb(215, 215, 215);
  padding: 2px;
  cursor: pointer;
}
ah-ng-color-selector .toggle-button .toggle-icon {
  position: relative;
  display: flex;
  height: 20px;
  width: 35px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
ah-ng-color-selector .toggle-button .toggle-icon span {
  z-index: 1;
}

ah-ng-text-field {
  display: block;
  width: 100%;
}
ah-ng-text-field.textarea {
  height: 100%;
}

asset-history {
  display: flex;
  flex-wrap: wrap;
}
asset-history .history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 3px;
  margin: 2px;
  background-color: #9e9e9e;
}
asset-history .history-icon:hover {
  background-color: #f57c00;
  background-color: #42a5f5;
}
asset-history .history-icon ng-md-icon {
  color: white;
}
asset-history .history-icon ng-md-icon:hover {
  color: white;
}

._md-panel-backdrop.md-default-theme, ._md-panel-backdrop {
  z-index: auto;
  background: rgb(78, 155, 232);
  background: linear-gradient(0deg, rgb(78, 155, 232) 0%, rgb(78, 155, 232) 35%, rgb(255, 255, 255) 100%);
}

.login-ah-logo {
  height: 70px;
  width: 240px;
  max-width: 90vw;
  margin: auto;
  margin-bottom: 10px;
}

#auth-content {
  font-size: 1.5em;
  padding: 100px;
  background-image: url("images/PapersFlying.png");
}

#login-form {
  width: 90vw;
  max-width: 500px;
  background-color: #ffffff;
  border-radius: 2%;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 300px) {
  #login-form .dialog-header {
    display: flex;
    flex-direction: column;
  }
}
#register-form, #update-form {
  width: 600px;
}
#terms {
  min-width: 600px;
  overflow: hidden;
  min-height: 70vh;
}
#terms md-content {
  overflow: auto;
}

#register-form,
#login-form,
#update-form,
#terms {
  font-size: 1.3em;
  padding: 0;
}
#register-form .yellow,
#login-form .yellow,
#update-form .yellow,
#terms .yellow {
  color: #f6ff00;
}
#register-form .hl,
#login-form .hl,
#update-form .hl,
#terms .hl {
  color: #f70404;
}
#register-form .small,
#login-form .small,
#update-form .small,
#terms .small {
  font-size: 0.8em;
}
#register-form .link,
#login-form .link,
#update-form .link,
#terms .link {
  color: #3f51b5;
  cursor: pointer;
}
#register-form .link:hover,
#login-form .link:hover,
#update-form .link:hover,
#terms .link:hover {
  color: #283593;
  text-decoration: underline;
}
#register-form md-toolbar,
#login-form md-toolbar,
#update-form md-toolbar,
#terms md-toolbar {
  background-color: transparent;
  height: 80px;
  padding: 0;
  padding-bottom: 0%;
  margin-bottom: 0%;
  font-size: 24px;
  color: rgb(95, 95, 95);
}
#register-form md-content,
#login-form md-content,
#update-form md-content,
#terms md-content {
  color: #f78e04;
  background-color: transparent;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 40px;
}
#register-form md-input-container,
#login-form md-input-container,
#update-form md-input-container,
#terms md-input-container {
  width: calc(100% - 36px);
}
#register-form md-input-container .md-input,
#login-form md-input-container .md-input,
#update-form md-input-container .md-input,
#terms md-input-container .md-input {
  transform: translateX(36px);
}
#register-form md-input-container .md-errors-spacer,
#login-form md-input-container .md-errors-spacer,
#update-form md-input-container .md-errors-spacer,
#terms md-input-container .md-errors-spacer {
  min-height: 0;
}
#register-form md-input-container ng-md-icon.success,
#login-form md-input-container ng-md-icon.success,
#update-form md-input-container ng-md-icon.success,
#terms md-input-container ng-md-icon.success {
  color: #43a047;
}
#register-form md-input-container label,
#login-form md-input-container label,
#update-form md-input-container label,
#terms md-input-container label {
  transform: translate3d(36px, 28px, 0) scale(1);
}
#register-form md-input-container.md-input-has-value label, #register-form md-input-container.md-input-focused label,
#login-form md-input-container.md-input-has-value label,
#login-form md-input-container.md-input-focused label,
#update-form md-input-container.md-input-has-value label,
#update-form md-input-container.md-input-focused label,
#terms md-input-container.md-input-has-value label,
#terms md-input-container.md-input-focused label {
  transform: translate3d(36px, 6px, 0) scale(0.75);
}
#register-form md-input-container#signup-email,
#login-form md-input-container#signup-email,
#update-form md-input-container#signup-email,
#terms md-input-container#signup-email {
  margin-top: 5px;
}
#register-form md-input-container.agree,
#login-form md-input-container.agree,
#update-form md-input-container.agree,
#terms md-input-container.agree {
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
  width: 100%;
}
#register-form .name-row > md-input-container,
#login-form .name-row > md-input-container,
#update-form .name-row > md-input-container,
#terms .name-row > md-input-container {
  margin-right: 10px;
}
#register-form .name-row > md-input-container:nth-child(1),
#login-form .name-row > md-input-container:nth-child(1),
#update-form .name-row > md-input-container:nth-child(1),
#terms .name-row > md-input-container:nth-child(1) {
  max-width: 195px;
}
#register-form .name-row > md-input-container:nth-child(2),
#login-form .name-row > md-input-container:nth-child(2),
#update-form .name-row > md-input-container:nth-child(2),
#terms .name-row > md-input-container:nth-child(2) {
  max-width: 54px;
}
#register-form .name-row > md-input-container:nth-child(3),
#login-form .name-row > md-input-container:nth-child(3),
#update-form .name-row > md-input-container:nth-child(3),
#terms .name-row > md-input-container:nth-child(3) {
  max-width: 195px;
  margin-right: 0px;
}
#register-form .error-message,
#login-form .error-message,
#update-form .error-message,
#terms .error-message {
  width: 100%;
  margin: 20px 0 0 0;
  background-color: white;
  color: #f44336;
  font-size: 0.9em;
  text-align: center;
  font-weight: bold;
}
#register-form .red,
#login-form .red,
#update-form .red,
#terms .red {
  color: #f44336;
}
#register-form .md-button.login, #register-form .md-button.signup,
#login-form .md-button.login,
#login-form .md-button.signup,
#update-form .md-button.login,
#update-form .md-button.signup,
#terms .md-button.login,
#terms .md-button.signup {
  text-align: center;
  height: 50px;
  width: 100%;
  text-transform: none;
  font-size: 22px;
  font-weight: bold;
  margin: 10px 0;
  color: #ffffff;
  background-color: #0050FF;
}

#calendar {
  display: flex;
  flex-flow: row wrap;
  font-family: sans-serif;
  width: 400px;
  height: 600px;
  align-items: flex-end;
  align-content: flex-start;
  background-color: white;
  padding-left: 20px;
}
#calendar * {
  flex: 1 100%;
}
#calendar .h1 {
  font-size: 2em;
}
#calendar .h2 {
  flex: 1 30%;
  font-size: 1.5em;
}
#calendar .h3 {
  flex: 1 70%;
  font-size: 1em;
}
#calendar .h4 {
  font-size: 0.8em;
}
#calendar #calendar-container {
  margin-top: 10px;
  max-height: 510px;
  overflow-y: scroll;
  border: 1px solid rgb(215, 215, 215);
}
#calendar #calendar-items-list {
  position: relative;
  display: flex;
  flex-flow: column;
}
#calendar #calendar-items-list .calendar-item {
  display: flex;
  margin: 0 0 10px 0;
  padding: 20px 0;
  flex-flow: row wrap;
  align-items: flex-start;
  background-color: #F8F8F8;
}
#calendar #calendar-items-list .calendar-item .item-date {
  flex: 1 30%;
  text-align: right;
}
#calendar #calendar-items-list .calendar-item .item-title {
  flex: 1 70%;
}
#calendar #calendar-items-list .calendar-item .item-title span, #calendar #calendar-items-list .calendar-item .item-title p {
  padding-left: 8%;
  margin: 0;
}
#calendar #calendar-items-list .calendar-item .item-edits {
  text-align: right;
  padding-right: 10px;
}
#calendar #calendar-items-list .calendar-item .item-edits button {
  width: 24px;
  min-width: 0;
  text-align: center;
  padding: 0;
}
#calendar #calendar-items-list .calendar-item:last-of-type {
  margin-bottom: 0;
}
#calendar .blue {
  color: #3190E3;
}
#calendar .orange {
  color: #F36B46;
}
#calendar .gray {
  color: #37474F;
}
#calendar .light-gray {
  color: #4e5e65;
}
#calendar .right {
  text-align: right;
}
#calendar .md-button {
  margin: 0 0 -20px 0;
  color: #c4c4c4;
  text-align: right;
  transition: color 0.5s;
}
#calendar .md-button:hover {
  background-color: inherit !important;
  color: #8d8d8d;
}

callout-maker-component {
  position: absolute;
  width: 100%;
  height: 100%;
}
callout-maker-component ah-addin-callout-maker {
  height: 100%;
}

color-chooser {
  border-radius: 3px;
}
color-chooser ng-md-icon {
  fill: white;
}

#color-chooser-panel {
  width: 204px;
  padding: 2px;
  background: white;
}
#color-chooser-panel .item {
  width: 40px;
  height: 40px;
  border: 2px solid white;
  outline: none;
}
#color-chooser-panel .item:hover {
  border: 2px solid #03a9f4;
}
#color-chooser-panel .item.selected {
  border: 2px solid #424242;
}
#color-chooser-panel .remove {
  display: flex;
  align-items: center;
  justify-content: center;
}
#color-chooser-panel .remove ng-md-icon {
  color: #9e9e9e;
}

design-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
design-component .design-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 73px);
  min-height: 400px;
  overflow-y: visible;
  background-color: white;
}
design-component .design-top.full-height {
  flex: 1 1 1000px;
}
design-component .design-spacer {
  flex: 2 2 auto;
  min-height: 30px;
}
design-component .design-bottom {
  position: relative;
  flex: 1 1 auto;
  padding: 10px;
  overflow: hidden;
  border-right: 1px solid rgb(215, 215, 215);
  border-left: 1px solid rgb(215, 215, 215);
  margin: 0 5px;
}
design-component .design-bottom.has-comments {
  background-color: #fff3e0;
}
design-component .design-bottom .markup-btns {
  position: absolute;
  top: -5px;
  right: 6px;
  z-index: 20;
}
design-component .design-bottom .comments {
  height: 100%;
}
design-component .size-control {
  border-right: 1px solid rgb(215, 215, 215);
  border-left: 1px solid rgb(215, 215, 215);
  border-top: 1px solid rgb(215, 215, 215);
  margin: 0 5px;
}
design-component .size-control .drag-icon {
  pointer-events: none;
}
design-component .size-control.has-comments {
  background-color: #fff3e0;
}
design-component .preview-container {
  flex: 1 1 540px;
  height: 100%;
  position: relative;
  margin: 15px 15px 0 15px;
}
design-component .preview-container .background-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
design-component .preview-container .spinner-overlay {
  background-color: rgba(255, 255, 255, 0.85);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
design-component .preview-container .spinner-overlay .progress-text {
  margin-top: 20px;
  max-width: 380px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #283593;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px;
}
design-component .preview-container.failed {
  border: 1px solid red;
}
design-component .drop-hint {
  display: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: black;
  font-size: 2em;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}
design-component .drop-hint ng-md-icon {
  margin: 0 20px 0 0;
  color: black;
}
design-component .drop-hint.show {
  display: flex;
  opacity: 0.3;
}
design-component .show-slides {
  transform: translateX(6px);
}
design-component .show-slides ng-md-icon {
  color: #9e9e9e;
}
design-component .show-slides.alert ng-md-icon {
  color: #f57c00;
}
design-component .slide-controls {
  margin-bottom: 5px;
}
design-component .md-icon-button.show-compare-button {
  margin: 0;
  padding: 1 !important;
  border-radius: 50%;
}
design-component .md-icon-button.show-compare-button ng-md-icon {
  color: #9e9e9e;
  border-radius: 50%;
  transition: color 0.2s;
}
design-component .md-icon-button.show-compare-button ng-md-icon:hover {
  color: #f57c00;
}
design-component .md-icon-button.show-compare-button.active ng-md-icon {
  color: #f57c00;
  background-color: white;
}
design-component .add-slide-button {
  margin: 2px 0;
  min-width: 0px;
  color: #616161;
  text-transform: none;
}
design-component .slides-container {
  position: relative;
  flex: 0 0 auto;
  z-index: -1;
  height: 0px;
  transition: height 0.5s ease;
  margin: 0 5px 10px 5px;
}
design-component .slides-container.expand {
  z-index: 1;
  height: 140px;
}
design-component .slides-scroll-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: #fafafa;
  padding: 0px 5px;
  border: 1px solid rgb(215, 215, 215);
}
design-component .pages-container {
  position: relative;
  display: flex;
  padding: 5px;
  min-height: 120px;
}
design-component .page-thumb {
  position: relative;
  padding: 5px;
  display: flex;
  align-items: center;
}
design-component .page-thumb img {
  height: 67.5px;
  width: 90px;
  outline: 1px solid #9e9e9e;
  background-color: white;
  cursor: pointer;
  transition: opacity 0.1s, width 0.5s ease, height 0.5s ease;
  opacity: 0.5;
}
design-component .page-thumb.wide img {
  width: 120px;
}
design-component .page-thumb .delete-button {
  position: absolute;
  top: 14px;
  right: -2px;
  margin: 0;
  padding: 0 !important;
  transition: opacity 0.2s;
  opacity: 0;
  border-radius: 50%;
}
design-component .page-thumb .delete-button ng-md-icon {
  color: #c62828;
  background-color: white;
  border-radius: 50%;
  transition: color 0.2s;
}
design-component .page-thumb .delete-button ng-md-icon:hover {
  color: #f44336;
}
design-component .page-thumb .compare-button {
  position: absolute;
  bottom: 14px;
  left: 8px;
  margin: 0;
  padding: 1 !important;
  transition: opacity 0.2s;
  opacity: 1;
  border-radius: 50%;
}
design-component .page-thumb .compare-button ng-md-icon {
  color: #616161;
  background-color: white;
  border-radius: 50%;
  transition: color 0.2s;
}
design-component .page-thumb .compare-button ng-md-icon:hover {
  color: #f57c00;
}
design-component .page-thumb .annotations-icon {
  position: absolute;
  top: 28px;
  left: 6px;
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
  background: #ff8a65;
}
design-component .page-thumb .annotations-icon ng-md-icon {
  fill: white;
}
design-component .page-thumb .slide-type-icon {
  position: absolute;
  bottom: 18px;
  right: 2px;
  padding: 4px;
  border-radius: 4px;
}
design-component .page-thumb .slide-type-icon.ppt-icon {
  background: #ffab91;
}
design-component .page-thumb .slide-type-icon.add-page-icon {
  background: #64b5f6;
}
design-component .page-thumb .slide-type-icon ng-md-icon {
  fill: white;
}
design-component .page-thumb:nth-child(2) img {
  height: 90px;
  width: 120px;
}
design-component .page-thumb:nth-child(2).wide img {
  width: 160px;
}
design-component .page-thumb:nth-child(2) .slide-type-icon {
  bottom: 6px;
  right: 2px;
}
design-component .page-thumb:nth-child(2) .delete-button {
  top: 4px;
}
design-component .page-thumb:nth-child(2) .annotations-icon {
  top: 18px;
  left: 6px;
}
design-component .page-thumb:hover img {
  outline: 1px solid #42a5f5;
}
design-component .page-thumb:hover .delete-button {
  opacity: 1;
}
design-component .page-thumb.selected {
  background-color: white;
}
design-component .page-thumb.selected .add-page-icon {
  background: #1e88e5;
}
design-component .page-thumb.selected .ppt-icon {
  background: #ff8a65;
}
design-component .page-thumb.selected .annotations-icon {
  background: #f4511e;
}
design-component .page-thumb.selected img {
  opacity: 1;
}
design-component .page-thumb.processing {
  opacity: 0.5;
}
design-component .page-thumb.failed {
  border: 1px solid red;
}
design-component .commands {
  margin: 30px 0;
  width: 90%;
}
design-component .error-warning {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 10px;
  background: #ef6c00;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}
design-component .error-warning ng-md-icon {
  color: yellow;
  font-size: 1.5em;
}

.dark design-component .design-top {
  background-color: rgb(230, 230, 230);
}
.dark design-component .spinner-overlay {
  background-color: rgba(230, 230, 230, 0.85);
}

download-history {
  display: flex;
  flex-direction: column;
  color: #616161;
}
download-history .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1a237e;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
download-history .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
download-history .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

firepad .indent-index {
  display: inline-block;
  width: 15px;
  margin-left: 17px;
  padding: 2px 0 0 2px;
  font-size: 0.9em;
  color: #9e9e9e;
  border-left: 1px solid rgb(215, 215, 215);
}
firepad #firepad, firepad #firepad + .firepad {
  height: 220px;
}
firepad .powered-by-firepad {
  display: none;
}
firepad .firepad-toolbar-wrapper .firepad-btn-group:nth-child(9) {
  display: none;
}
firepad .firepad-btn, firepad .firepad-btn:visited, firepad .firepad-btn:active {
  font-size: 12px;
  padding: 4px 4px 2px 4px;
  border-bottom-width: 1px;
}
firepad .firepad-btn-group {
  margin: 0 7px 0 0;
}
firepad .firepad-btn-group > .firepad-btn:first-child, firepad .firepad-btn-group > .firepad-btn:last-child {
  border-radius: 0;
}
firepad .firepad-toolbar {
  padding-left: 0;
  height: 35px;
  line-height: 35px;
  border: none;
}
firepad .firepad-with-toolbar .CodeMirror {
  top: 35px;
  border: 1px solid rgb(215, 215, 215);
}
firepad .online-people {
  margin: 5px 0 0 0;
  padding-left: 0;
  position: relative;
  z-index: 10;
}
firepad .online-indicator {
  width: 25px;
  display: inline-block;
  margin-right: 5px;
}
firepad .online-indicator img {
  width: 100%;
}
firepad .online-indicator .color-indicator {
  height: 4px;
}
firepad .firepad-btn-group:nth-child(1),
firepad .firepad-btn-group:nth-child(2),
firepad .firepad-btn-group:nth-child(5) {
  display: none;
}
firepad .indicator-tooltip {
  background-color: #FF5722;
  padding: 3px 6px 4px 6px;
  min-width: 60px;
}
firepad tooltip._left tip-arrow {
  border-left-color: #FF5722;
}
firepad tooltip._right tip-arrow {
  border-right-color: #FF5722;
}
firepad tooltip._top tip-arrow {
  border-top-color: #FF5722;
}
firepad tooltip._bottom tip-arrow {
  border-bottom-color: #FF5722;
}

folder-view {
  display: flex;
  height: 100%;
}
folder-view .list-container {
  flex: 2 2 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 20px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  overflow: hidden;
  margin: 10px;
}
folder-view .list-container dropzone {
  border-radius: 20px;
}
folder-view .folder-toolbar .tool-icon {
  margin-left: 10px !important;
}
folder-view table.md-table.md-row-select tbody.md-body > tr.md-row.selected {
  transition: background-color 0.05s !important;
  background-color: #bbdefb !important;
}
folder-view table.md-table.md-row-select tbody.md-body > tr.md-row.selected:hover {
  background-color: #bbdefb !important;
}
folder-view .ocr-complete {
  color: #43a047;
  font-weight: bold;
}
folder-view .ocr-processing {
  animation: pulse 3s infinite;
  font-weight: bold;
}
folder-view .ocr-embedded-cell ng-md-icon {
  color: #43a047;
}
@keyframes pulse {
  0% {
    color: #ffb74d;
  }
  50% {
    color: #fb8c00;
  }
  100% {
    color: #ffb74d;
  }
}
folder-view .details, folder-view .details-placeholder {
  flex: 0 0 350px;
  margin: 40px 10px;
  color: #616161;
  overflow-x: hidden;
  overflow-y: auto;
}
folder-view .details .asset-name, folder-view .details-placeholder .asset-name {
  color: #616161;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
}
folder-view .details .preview-image, folder-view .details-placeholder .preview-image {
  padding: 15px;
  text-align: center;
}
folder-view .details .preview-image img, folder-view .details-placeholder .preview-image img {
  background-color: white;
  border: 1px solid #9e9e9e;
  max-width: 100%;
  max-height: 360px;
  cursor: zoom-in;
}
folder-view .details .asset-info, folder-view .details-placeholder .asset-info {
  padding: 15px;
}
folder-view .details .asset-info .info-row, folder-view .details-placeholder .asset-info .info-row {
  margin-bottom: 15px;
}
folder-view .details .asset-info .info-row.tags, folder-view .details-placeholder .asset-info .info-row.tags {
  position: relative;
}
folder-view .details .asset-info .info-row.tags tag-chooser, folder-view .details-placeholder .asset-info .info-row.tags tag-chooser {
  display: block;
}
folder-view .details .asset-info .confidential-switch, folder-view .details-placeholder .asset-info .confidential-switch {
  display: inline-block;
  margin-left: 10px;
  height: 17px;
}
folder-view .details .info-row.file-name, folder-view .details-placeholder .info-row.file-name {
  margin-bottom: 10px;
}
folder-view .details .info-subhead, folder-view .details-placeholder .info-subhead {
  font-size: 0.85em;
  color: #9e9e9e;
}
folder-view .details .info-subhead.inline, folder-view .details-placeholder .info-subhead.inline {
  display: inline-block;
}
folder-view table.md-table.md-row-select td.md-cell:nth-child(n+3):nth-last-child(n+2),
folder-view table.md-table.md-row-select th.md-column:nth-child(n+3):nth-last-child(n+2) {
  padding: 0 30px 0 0;
}

form-component {
  flex: 1 1 auto;
}
form-component .content-container {
  display: flex;
  height: 100%;
  min-width: 550px;
}
form-component .content-container > .content-left {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
form-component .form-tools {
  margin: 10px 0 5px 0;
  width: 100%;
}
form-component .group-container {
  display: flex;
  height: 100%;
  padding-top: 49px;
}
form-component .group-container .content {
  position: relative;
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
}
form-component .group-container .content .form-tools {
  position: absolute;
  top: -39px;
  right: 0;
}
form-component .group-container .content .slidePlaceholder {
  flex: 0 0 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}
form-component .group-container .content .comments {
  flex: 1 1 auto;
}
form-component .group-container .content .group-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  color: #9e9e9e;
  font-size: 1.2em;
  font-weight: bold;
}
form-component .group-container .group-details {
  flex: 0 0 350px;
}
form-component .notes-container {
  padding: 10px;
}

hotness {
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
hotness ng-md-icon {
  color: #bdbdbd;
  transition: color 0.2s ease;
  outline: none;
}
hotness ng-md-icon.editable {
  cursor: pointer;
}
hotness ng-md-icon.active {
  color: #ff8a65;
}
hotness ng-md-icon.hovered {
  color: #f57c00;
}
hotness ng-md-icon.remove-hotness:hover {
  color: #f57c00;
}

.logger-info-panel {
  font-size: 1.5em;
}

logger-component {
  display: inline-block;
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
logger-component .tools-row {
  display: flex;
  align-items: center;
}
logger-component .spacer {
  flex: 1 1 auto;
}
logger-component .log-table-body {
  overflow: auto;
  border: 1px solid rgb(215, 215, 215);
}
logger-component .log-row {
  display: flex;
  border-bottom: 1px solid rgb(215, 215, 215);
  cursor: pointer;
}
logger-component .log-row.header-row {
  background-color: rgb(224, 224, 224);
  font-weight: bold;
}
logger-component .log-row:nth-child(odd) {
  background-color: rgb(242, 242, 242);
}
logger-component .log-row:hover {
  background-color: rgb(224, 224, 224);
}
logger-component .log-row > * {
  flex: 1 1 auto;
  padding: 3px;
  font-size: 0.8em;
}
logger-component .log-row .message {
  flex: 0 1 33%;
}
logger-component .log-row .index {
  flex: 0 0 30px;
}
logger-component .log-row .spacer {
  flex: 2 0 auto;
}
logger-component .log-row .webhook {
  flex: 0 0 125px;
}
logger-component .log-row .date, logger-component .log-row .email {
  flex: 0 0 180px;
}
logger-component .log-row .duration {
  flex: 0 0 100px;
}
logger-component .log-row .pptapi-source {
  flex: 0 0 110px;
}
logger-component .log-row.important {
  background-color: #ffecb3;
}
logger-component .log-row.error {
  background-color: #ffcdd2;
  font-weight: bold;
}

ng-tree-container {
  position: relative;
  display: flex;
  flex: 0 0 350px;
  transition: flex-basis 0.25s ease-out;
}
ng-tree-container.no-animation {
  transition: none;
}
ng-tree-container .collapse-btn {
  position: absolute;
  top: 0;
  left: 0;
}
ng-tree-container ah-tree {
  flex: 1 1 auto;
}
ng-tree-container .tree-resize-control {
  flex: 0 0 5px;
  writing-mode: vertical-lr;
  background-color: transparent;
  transition: border 0.1s;
  border-right: 1px solid transparent;
}
ng-tree-container .tree-resize-control:hover {
  cursor: col-resize;
  border-right: 1px solid rgb(215, 215, 215);
}

@keyframes hideAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes showAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.notifications-panel {
  background-color: white;
  width: 310px;
  position: relative;
}
.notifications-panel .notification-header {
  padding: 2px 5px 2px 10px;
  background-color: #F5F5F5;
  position: relative;
}
.notifications-panel .notification-header span {
  line-height: 34px;
}
.notifications-panel .notification-scroller {
  height: 290px;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}
.notifications-panel .notification-scroller .notification-bar:last-child {
  border-bottom: none;
}
.notifications-panel .no-notifications {
  height: 100%;
  width: 100%;
  top: 0;
  text-align: center;
  position: absolute;
  opacity: 1;
}
.notifications-panel .no-notifications.ng-hide {
  opacity: 0;
}
.notifications-panel .no-notifications.ng-hide-remove {
  transition: opacity 0.5s linear;
  transition-delay: 0.5s;
}
.notifications-panel .no-notifications ng-md-icon {
  width: 100px;
  height: 100px;
  color: #eeeeee;
}
.notifications-panel .no-notifications ng-md-icon + div {
  color: #9e9e9e;
  font-size: 14px;
  font-weight: bold;
}
.notifications-panel .notification-bar {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  padding: 5px 10px 8px 10px;
  min-height: 58px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.notifications-panel .notification-bar.new {
  background-color: rgba(238, 238, 238, 0.4);
}
.notifications-panel .notification-bar.ng-leave {
  animation: 0.35s hideAnimation;
}
.notifications-panel .notification-bar.ng-enter {
  animation: 0.35s showAnimation;
}
.notifications-panel .notification-bar:hover {
  background-color: rgba(158, 158, 158, 0.2);
}
.notifications-panel .notification-bar .user-avatar {
  color: #9e9e9e;
  font-size: 13px;
  font-weight: bold;
  background-color: rgb(215, 215, 215);
  text-align: center;
  line-height: 40px;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  margin-top: 4px;
}
.notifications-panel .notification-bar .notification-date {
  font-size: 11px;
  color: #9e9e9e;
}
.notifications-panel .notification-bar .notification-text {
  font-weight: normal;
  font-size: 15px;
}
.notifications-panel .notification-bar .notification-text a {
  text-decoration: none;
  color: #2196F3;
}
.notifications-panel .notification-bar .notification-clear {
  pointer-events: initial;
  cursor: pointer;
  color: #9e9e9e;
}
.notifications-panel .notification-bar .notification-clear .small {
  display: block;
}

pdf-component {
  position: absolute;
  width: 100%;
  height: 100%;
}
pdf-component > div {
  height: 100%;
}

.pdf-viewer-container {
  display: none;
}

.pdf-dialog-container {
  min-height: 90%;
  min-width: 90%;
  background: white;
  border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
}
.pdf-dialog-container .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 10px;
  background-color: rgb(33, 150, 243);
  color: rgb(255, 255, 255);
  transition: background-color 0.3s ease;
}
.pdf-dialog-container .header.new-ui {
  background-color: #000;
}
.pdf-dialog-container .header .title {
  font-size: 20px;
  font-weight: bold;
}
.pdf-dialog-container .header .title .beta-label {
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
  background-color: #2e7d32;
  padding: 0px 5px;
  border-radius: 20px;
}
.pdf-dialog-container .header .title .new-ui-toggle {
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  position: relative;
  z-index: 100;
}
.pdf-dialog-container .header .title .new-ui-toggle:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.pdf-dialog-container .header .title .new-ui-toggle.active {
  background-color: #fb8c00;
  border-color: #fb8c00;
}
.pdf-dialog-container .header .file-info {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.pdf-dialog-container .header .file-info .active-session-data {
  display: flex;
}
.pdf-dialog-container .header .file-info .spacer {
  margin: 0 10px;
  font-weight: 300;
}
.pdf-dialog-container .header .file-info .node-index {
  margin: 0 5px;
  background-color: white;
  color: rgb(33, 150, 243);
  border-radius: 3px;
  padding: 0 5px;
}
.pdf-dialog-container .header .ocr-icon-container {
  cursor: pointer;
  z-index: 10;
}
.pdf-dialog-container .header .ocr-icon-container.fully-loaded .ocr-icon ng-md-icon {
  color: #03a9f4;
}
.pdf-dialog-container .header .file-controls {
  display: flex;
  align-items: center;
}
.pdf-dialog-container .header .ocr-icon {
  font-size: 0.9rem;
  font-weight: 600;
  color: #9e9e9e;
  border-radius: 12px;
  padding: 1px 6px;
  border: 2px solid #bdbdbd;
  background-color: rgb(245, 245, 245);
  margin-top: 5px;
}
.pdf-dialog-container .header .ocr-icon ng-md-icon {
  transform: translateY(-2px);
}
.pdf-dialog-container .header .ocr-icon.ocr-complete {
  border: 2px solid #4caf50;
  color: #4caf50;
}
.pdf-dialog-container .header .ocr-icon.ocr-missing {
  opacity: 0.8;
}
.pdf-dialog-container .header .open-in-new-button {
  margin-left: 5px;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
}
.pdf-dialog-container .header .open-in-new-button:hover {
  color: #ffb74d;
}
.pdf-dialog-container .header .beta-version-button {
  margin-right: 10px;
}
.pdf-dialog-container .header .beta-version-button.active {
  background-color: #2e7d32;
  border: 1px solid white;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  font-weight: bold;
}
.pdf-dialog-container md-dialog-actions {
  display: flex;
  width: 100%;
  background-color: #eee;
  border-top: 1px solid silver;
}
.pdf-dialog-container .left-actions, .pdf-dialog-container .center-actions, .pdf-dialog-container .right-actions {
  display: flex;
  align-items: center;
  flex: 1 1 33%;
}
.pdf-dialog-container .left-actions {
  justify-content: flex-start;
}
.pdf-dialog-container .center-actions {
  justify-content: center;
  display: flex;
  gap: 10px;
}
.pdf-dialog-container .right-actions {
  justify-content: flex-end;
}
.pdf-dialog-container .default-preset-button .default-layout-thumb {
  height: 36px;
}
.pdf-dialog-container .action-hint {
  background-color: #616161;
  color: white;
  padding: 5px 10px;
}
.pdf-dialog-container .pdf-dialog-content {
  width: 100%;
  position: relative;
}
.pdf-dialog-container .pdf-dialog-content .viewer {
  height: 100%;
}
.pdf-dialog-container .pdf-dialog-content .viewer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pdf-dialog-container .pdf-dialog-content .loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
.pdf-dialog-container .document-ocr-data {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: #9e9e9e;
  padding: 0 20px;
}
.pdf-dialog-container .document-ocr-data.ocr-complete {
  color: #43a047;
}
.pdf-dialog-container .document-ocr-data.ocr-processing {
  animation: pulse 3s infinite;
  font-weight: bold;
}
.pdf-dialog-container .open-parent-document-button.has-version-select {
  margin-right: 0;
}
.pdf-dialog-container .document-version-select {
  margin: 0px 5px;
}
.pdf-dialog-container .document-version-select .md-select-value {
  border: none;
  min-width: auto;
  min-height: auto;
}
.pdf-dialog-container .document-version-select .md-select-value .md-select-icon {
  width: auto;
}
.pdf-dialog-container .document-version-select.hide-label {
  margin: 0px;
}
.pdf-dialog-container .document-version-select.hide-label .md-select-value span:first-child {
  display: none;
}

.pdf-panel._md-panel-hidden {
  display: block;
  visibility: hidden;
  z-index: -1000 !important;
  top: -100%;
}
.pdf-panel._md-panel-hidden .md-panel {
  opacity: 1;
}
.pdf-panel._md-panel-shown {
  visibility: visible;
}
.pdf-panel.full-screen .pdf-dialog-container {
  height: 100%;
  width: 100%;
}

.new-pdf-viewer-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  border-radius: 6px;
  overflow: hidden;
}
.new-pdf-viewer-container > * {
  pointer-events: auto;
}

[role=dialog] {
  position: relative;
}
[role=dialog] > .viewer {
  position: absolute;
  z-index: 1;
}
[role=dialog] > .viewer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
[role=dialog]:not(.use-new-ui) > .viewer {
  top: 40px;
  left: 0;
  right: 0;
  bottom: 52px;
}
[role=dialog].use-new-ui > .viewer {
  top: 50px;
  left: var(--left-panel-width, 0px);
  right: var(--right-panel-width, 0px);
  bottom: 60px;
  z-index: 1;
  transition: left 0.3s ease, right 0.3s ease;
}

.pdf-dialog-content {
  width: 100%;
  position: relative;
}

project-select-component {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 10px;
  font-size: 17px;
  font-weight: bold;
  height: 50px;
  color: #616161;
}
project-select-component md-select {
  margin: 0 5px;
}
project-select-component md-select:focus .md-select-value {
  color: inherit !important;
}
project-select-component .md-select-icon {
  color: #9e9e9e;
}
project-select-component .md-text {
  display: inline-block;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
project-select-component.ps-light .md-select-value {
  color: white !important;
}
project-select-component.ps-light .md-select-icon {
  color: white;
}
project-select-component.ps-light md-select:focus .md-select-value {
  color: white !important;
}

project-settings-component {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
project-settings-component .close-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  cursor: pointer;
}
project-settings-component .close-button:hover {
  color: #2196f3;
}
project-settings-component .tab-content.team {
  display: flex;
  flex-direction: column;
  height: 100%;
}
project-settings-component .tab-content.general {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}
project-settings-component md-input-container.wide {
  width: 100%;
  max-width: 600px;
}
project-settings-component md-input-container .md-input[disabled] {
  color: black;
}
project-settings-component .md-table-toolbar {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
project-settings-component .md-table-toolbar.alternate .md-button {
  color: white;
}
project-settings-component md-table-container {
  height: 100%;
}
project-settings-component .md-row th.md-column,
project-settings-component .md-row td.md-cell {
  text-align: center;
}
project-settings-component .md-row th.md-checkbox-column,
project-settings-component .md-row td.md-checkbox-cell,
project-settings-component .md-row th.email,
project-settings-component .md-row td.email {
  text-align: left;
}
project-settings-component .md-row th > .md-sort-icon {
  display: none;
}
project-settings-component .md-row th.md-active > .md-sort-icon {
  display: inline-block;
}
project-settings-component .md-row td.email {
  vertical-align: middle;
  white-space: nowrap;
}
project-settings-component .md-row td.email.pending {
  color: #9e9e9e;
}
project-settings-component .md-row td.email.owner {
  font-weight: bold;
}
project-settings-component .md-row td.email.owner img {
  border: 2px solid #ff8a65;
}
project-settings-component .md-row td.email .pending-email-icon {
  height: 20px;
  width: 20px;
}
project-settings-component .md-row td.email .pending-email-icon svg {
  height: 100%;
  width: 100%;
}
project-settings-component .md-row td.email .user-avatar {
  padding: 0 3px;
  border: 1px solid #d7d7d7;
  font-size: 15px;
  color: #9e9e9e;
}
project-settings-component .md-row td.email span {
  margin-left: 5px;
}
project-settings-component .md-row td.email img {
  height: 20px;
  border-radius: 3px;
  display: inline-block;
}
project-settings-component .ah-card {
  width: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 5px;
  padding: 10px;
  margin: 12px;
  background-color: white;
  box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.15);
}
project-settings-component .label {
  color: #616161;
  margin: 0 10px 10px 0;
}
project-settings-component .ah-card.project-info .label {
  color: #9e9e9e;
  font-size: 0.9em;
}
project-settings-component .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: #9e9e9e;
  color: white;
  margin-bottom: 10px;
}
project-settings-component .edit-info-button {
  position: absolute;
  top: 50px;
  right: 0px;
  min-width: auto;
  width: 50px;
  z-index: 100;
}
project-settings-component .thumb-container {
  position: relative;
  display: inline-block;
  border: 1px solid rgb(215, 215, 215);
  cursor: pointer;
}
project-settings-component .thumb-container img {
  border: 1px solid rgb(215, 215, 215);
  height: 70px;
}
project-settings-component .thumb-container .thumb-placeholder {
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 245, 245);
}
project-settings-component .thumb-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
project-settings-component .thumb-container:hover .ah-remove-button, project-settings-component .thumb-container:hover .ah-add-button {
  opacity: 1;
}
project-settings-component .thumb-container:hover img {
  border: 3px solid #90caf9;
}
project-settings-component .setting-row {
  display: flex;
  align-items: center;
  margin: 4px 0;
}
project-settings-component .setting-row .label {
  margin: 0 0 0 10px;
}
project-settings-component .worker-tags-input {
  display: flex;
}
project-settings-component .worker-tags-input md-input-container {
  flex: 1 1 auto;
}
project-settings-component .info-entry {
  color: #616161;
  font-weight: bold;
  margin-bottom: 10px;
}
project-settings-component .project-image .preview-image {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
project-settings-component .project-image .preview-image img {
  margin-top: 10px;
  border: 1px solid rgb(215, 215, 215);
  max-width: 350px;
  max-height: 260px;
}
project-settings-component .controls {
  text-align: center;
}
project-settings-component .reset-button {
  color: #616161 !important;
}
project-settings-component .controls-row {
  color: #616161;
}
project-settings-component .actions {
  display: flex;
  flex-direction: column;
}
project-settings-component .actions .md-button {
  margin-top: 20px;
}
project-settings-component .inline-radio-group {
  display: flex;
}
project-settings-component .inline-radio-group md-radio-button {
  margin-right: 15px;
}

rich-input {
  display: block;
}
rich-input md-input-container {
  position: relative;
}
rich-input .rich-input {
  overflow: hidden;
  line-height: 26px;
  float: none;
  min-height: 26px;
  height: auto;
}
rich-input .rich-input.singleline {
  white-space: nowrap;
}
rich-input .rich-input p {
  margin: 0;
}
rich-input .rich-input.textarea {
  overflow: auto;
  min-height: 126px;
  max-height: 200px;
  height: auto;
  padding: 10px;
  border: 1px solid rgb(215, 215, 215);
}
rich-input .medium-editor-element h1, rich-input .medium-editor-element h2, rich-input .medium-editor-element h3, rich-input .medium-editor-element h4, rich-input .medium-editor-element h5 {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}
rich-input .medium-editor-element h1:before {
  content: "• ";
}
rich-input .medium-editor-element h2:before {
  content: "•• ";
}
rich-input .medium-editor-element h3:before {
  content: "••• ";
}
rich-input .medium-editor-element h4:before {
  content: "•••• ";
}
rich-input .medium-editor-element h5:before {
  content: "••••• ";
}
rich-input .medium-editor-placeholder:after {
  color: gray;
  font-style: normal;
}

shared-folder-component {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: white;
}
shared-folder-component #workspace-container {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
shared-folder-component #workspace-container > * {
  height: 100%;
}

slide-details-setting {
  display: block;
  padding: 10px;
}
slide-details-setting .top-row {
  display: flex;
}
slide-details-setting .thumb-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
}
slide-details-setting .thumb-container img {
  outline: 1px solid #90a4ae;
  height: 70px;
}
slide-details-setting .thumb-container .thumb-placeholder {
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 245, 245);
}
slide-details-setting .thumb-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
slide-details-setting .thumb-container:hover .ah-remove-button, slide-details-setting .thumb-container:hover .ah-add-button {
  opacity: 1;
}
slide-details-setting .thumb-container:hover img {
  outline: 3px solid #64b5f6;
}
slide-details-setting .setting-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
slide-details-setting .setting-info .setting-name {
  font-weight: bold;
  margin-bottom: 10px;
}
slide-details-setting.vertical-layout .top-row {
  flex-direction: column-reverse;
  align-items: center;
}
slide-details-setting.vertical-layout .setting-info {
  margin: 0;
}
slide-details-setting.vertical-layout .setting-info .setting-name {
  margin-bottom: 3px;
  text-align: center;
}
slide-details-setting.vertical-layout .controls-container {
  display: none;
}

slide-edit {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
slide-edit .canvas-element {
  position: relative;
}
slide-edit .toolbar {
  position: absolute;
  display: flex;
  pointer-events: all;
  bottom: -35px;
  right: 0px;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: flex-end;
}
slide-edit .toolbar > * {
  margin-left: 5px !important;
}
slide-edit .toolbar .spacer {
  flex: 2 1 auto;
}
slide-edit .toolbar .open-select-button {
  color: #9e9e9e;
  font-size: 0.8em;
  transform: translateX(-3px);
  padding: 5px 0;
  margin: 0;
}
slide-edit .toolbar .open-select-button[disabled] {
  color: #bdbdbd;
}
slide-edit .toolbar .open-select-button:not([disabled]):hover {
  color: #ffb74d;
}
slide-edit .toolbar .default-layout-thumb {
  height: 25px;
  outline: 1px solid rgb(215, 215, 215);
  cursor: pointer;
}
slide-edit .toolbar .default-layout-thumb:hover {
  outline: 1px solid #42a5f5;
}
slide-edit .toolbar .overlay-opacity-slider {
  position: absolute;
  right: 392px;
}
slide-edit .toolbar .collect-elements-button {
  position: absolute;
  right: 332px;
}
slide-edit .toolbar .default-layout-button {
  position: absolute;
  right: 182px;
  top: 0px;
}
slide-edit .toolbar .open-layouts-button {
  position: absolute;
  right: 162px;
}
slide-edit .toolbar .open-presets-button {
  position: absolute;
  right: 252px;
}
slide-edit .toolbar .default-preset-button {
  position: absolute;
  right: 272px;
  top: 0px;
}
slide-edit .toolbar .align-items-button {
  position: absolute;
  right: 80px;
}
slide-edit .toolbar .align-items-button .align-button-icon {
  width: 64px;
  height: 32px;
  margin-top: 8px;
}
slide-edit .toolbar .undo-button {
  position: absolute;
  right: 35px;
}
slide-edit .toolbar .redo-button {
  position: absolute;
  right: 0px;
}
slide-edit .md-button.active > ng-md-icon {
  fill: #f57c00;
}
slide-edit .md-button.md-icon-button {
  border-radius: 4px;
}
slide-edit .video-icon ng-md-icon {
  color: #f57c00;
}
slide-edit .animation-video-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
slide-edit .animation-video-container video {
  width: 100%;
  height: 100%;
}
slide-edit .animation-video-container .animation-video {
  transition: 0.2s linear opacity;
}
slide-edit .animation-video-container .animation-video.hidden {
  opacity: 0;
}
slide-edit .canvas-container {
  transition: opacity 0.15s ease-in;
  position: absolute;
  left: 0;
  right: 0;
  outline-width: 1px;
  outline-color: #6b6b6b;
  outline-style: solid;
}
slide-edit .canvas-container.canvas-hidden {
  opacity: 0;
  pointer-events: none;
}

slide-sorter {
  display: flex;
  flex-direction: column;
}
slide-sorter .content-container {
  overflow: hidden;
  display: flex;
  flex: 1 2 auto;
}
slide-sorter ah-tree-grid-view {
  flex: 1 1 auto;
}
slide-sorter .sidebar {
  flex: 0 0 250px;
  border-left: 1px solid rgb(215, 215, 215);
  padding: 10px;
  font-size: 0.9em;
}
slide-sorter .grid-container {
  flex: 2 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
  padding: 20px;
  max-height: 100%;
}
slide-sorter .controls-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
slide-sorter .label {
  color: #616161;
  margin-right: 5px;
}
slide-sorter .grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  width: 140px;
  height: 120px;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 10px;
}
slide-sorter .grid-item .name {
  overflow: hidden;
  max-width: 100%;
  min-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #9e9e9e;
  font-size: 0.8em;
  margin-bottom: 5px;
}
slide-sorter .grid-item .image {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
}
slide-sorter .grid-item img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgb(215, 215, 215);
  box-shadow: 2px 2px 2px 0 #ccc;
}
slide-sorter .grid-item.active img {
  outline: 4px solid #2196f3;
  box-shadow: 6px 6px 6px 0 #ccc;
}
slide-sorter .grid-item.selected {
  background-color: #bbdefb;
  border: 3px solid #90caf9;
}
slide-sorter .grid-item.processing {
  background-color: #ffccbc;
}
slide-sorter .grid-item .placeholder, slide-sorter .grid-item .folder-node, slide-sorter .grid-item .notes-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid rgb(215, 215, 215);
  flex: 1 1 auto;
  background-color: #eeeeee;
}
slide-sorter .grid-item .folder-node, slide-sorter .grid-item .notes-node {
  border-radius: 20px;
  background-color: transparent;
  width: 90px;
}
slide-sorter .grid-item .folder-node ng-md-icon, slide-sorter .grid-item .notes-node ng-md-icon {
  color: #757575;
}
slide-sorter .grid-item .folder-node {
  border: none;
}
slide-sorter .grid-item .number {
  position: absolute;
  left: 5px;
  top: 30px;
  background-color: #1976d2;
  padding: 0 5px;
  color: white;
  font-weight: bold;
}
slide-sorter .grid-item .number.require-update {
  background-color: #ff7043;
}
slide-sorter .grid-item .context-menu-button {
  position: absolute;
  inset: 0;
  border: 1px solid red;
}
slide-sorter .grid-item .compare-icon {
  position: absolute;
  right: 7px;
  bottom: 10px;
  color: #616161;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}
slide-sorter .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1a237e;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
slide-sorter .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
slide-sorter .secondary-screen-header .close-button {
  flex: 0 1 100px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
slide-sorter .secondary-screen-header .close-button ng-md-icon {
  margin: 0;
}
slide-sorter .secondary-screen-header .icon-bg {
  fill: transparent;
}
slide-sorter .secondary-screen-header .tree-select {
  margin-left: 20px;
}
slide-sorter .secondary-screen-header .tree-select md-input-container {
  margin: 0;
}
slide-sorter .secondary-screen-header .tree-select md-input-container .md-select-value {
  color: white !important;
}
slide-sorter .secondary-screen-header .tree-select md-input-container .md-select-icon {
  color: white;
}

slideshow-component {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: hidden;
  justify-content: center;
  background-color: black;
}
slideshow-component .slideshow-tools {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px 10px;
  display: flex;
  gap: 5px;
  z-index: 20;
}
slideshow-component .slideshow-tools .tool-icon {
  border: 1px solid #616161;
}
slideshow-component .slideshow-tools .tool-icon:hover {
  border: 1px solid #ffb74d;
}
slideshow-component .slideshow-tools .tool-icon.active {
  border: 1px solid #ff8a65;
}
slideshow-component .slideshow-tools .tool-icon.active ng-md-icon {
  color: #ff8a65;
}
slideshow-component .slideshow-tools .spacer {
  flex: 2 0 auto;
}
slideshow-component .slideshow-tools .spacer.short {
  flex: 0 0 30px;
}
slideshow-component .slideshow-tools .node-label, slideshow-component .slideshow-tools .node-index, slideshow-component .slideshow-tools .node-index-out-of {
  color: white;
  display: flex;
  align-items: center;
}
slideshow-component .slideshow-tools .node-index-container {
  display: flex;
  margin: 0px 5px;
  cursor: pointer;
}
slideshow-component .slideshow-tools .node-index-container:hover > * {
  color: #ffb74d;
}
slideshow-component .slide-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 100px);
  min-height: 400px;
  overflow-y: visible;
  margin: 0 10px;
}
slideshow-component .preview-container {
  flex: 1 1 540px;
  height: 100%;
  position: relative;
}
slideshow-component .preview-container .background-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: 0;
}
slideshow-component .preview-container .background-image.visible {
  transition: 0.2s opacity ease-out;
  opacity: 1;
}
slideshow-component .preview-container .spinner-overlay {
  background-color: rgba(255, 255, 255, 0.85);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
slideshow-component .preview-container .spinner-overlay .progress-text {
  margin-top: 20px;
  max-width: 380px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #283593;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px;
}
slideshow-component .preview-container.failed {
  border: 1px solid red;
}
slideshow-component .drop-hint {
  display: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: black;
  font-size: 2em;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}
slideshow-component .drop-hint ng-md-icon {
  margin: 0 20px 0 0;
  color: black;
}
slideshow-component .drop-hint.show {
  display: flex;
  opacity: 0.3;
}

.tags-autocomplete .count {
  transform: translateY(-1px);
  margin-left: 5px;
}

tag-chooser .count {
  position: absolute;
  top: -5px;
  right: -8px;
}
tag-chooser md-chip {
  overflow: hidden;
}
tag-chooser .md-chip-remove md-icon {
  min-width: 0;
  min-height: 0;
  width: 15px !important;
}

team-view-component {
  border-left: 1px solid rgb(215, 215, 215);
  width: 0px;
  transition: width 0.5s ease;
  padding-top: 25px;
}
team-view-component.show {
  width: 130px;
}
team-view-component .user-container {
  display: flex;
  min-width: 120px;
  justify-content: space-between;
  font-weight: 500;
  line-height: 1.8em;
  color: #9e9e9e;
  padding: 2px 7px;
  transition: color 0.15s linear, background-color 0.15s linear;
  cursor: default;
}
team-view-component .user-container .more {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s linear;
}
team-view-component .user-container .number {
  font-size: 0.75em;
  padding: 2px 3px 3px 2px;
  border-radius: 50%;
  border: 1px solid #e53935;
  color: #e53935;
  transition: border 0.15s linear, font-weight 0.15s linear;
}
team-view-component .user-container .number:hover {
  font-weight: 700;
  color: #c62828;
  border: 1px solid #c62828;
}
team-view-component .user-container .chat {
  transition: color 0.15s linear;
}
team-view-component .user-container .chat:hover {
  color: #fb8c00;
}
team-view-component .user-container:hover {
  background-color: white;
  color: #1565c0;
}
team-view-component .user-container:hover .more {
  opacity: 1;
}

user-projects-component {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  background-color: #fafafa;
}
user-projects-component .sub-header {
  flex: 0 0 48px;
  display: flex;
  background-color: #eeeeee;
  color: #9e9e9e;
  font-weight: bold;
  border-bottom: 1px solid rgb(215, 215, 215);
}
user-projects-component .sub-header > * {
  display: flex;
  align-items: center;
  justify-content: center;
}
user-projects-component .sub-header > * > * {
  margin: 0 3px;
}
user-projects-component .sub-header .left, user-projects-component .sub-header .right {
  flex: 0 0 300px;
}
user-projects-component .sub-header .center {
  flex: 1 1 auto;
}
user-projects-component .user-projects-content {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
user-projects-component #user-projects-sidebar, user-projects-component #user-projects-collections-sidebar {
  position: relative;
  transition: flex-basis 0.25s ease-out;
  overflow: hidden;
}
user-projects-component #user-projects-sidebar.collapsed, user-projects-component #user-projects-collections-sidebar.collapsed {
  flex: 0 0 30px;
}
user-projects-component #user-projects-sidebar.no-animation, user-projects-component #user-projects-collections-sidebar.no-animation {
  transition: none;
}
user-projects-component #user-projects-sidebar .collapse-button, user-projects-component #user-projects-collections-sidebar .collapse-button {
  position: absolute;
  left: 0;
  top: 15px;
}
user-projects-component #user-projects-sidebar .project-list-filters, user-projects-component #user-projects-collections-sidebar .project-list-filters {
  margin-left: 30px;
}
user-projects-component #user-projects-collections-sidebar .collapse-button {
  left: auto;
  right: 0;
}
user-projects-component #user-projects-collections-sidebar .project-list-filters {
  margin-left: 10px;
  margin-right: 50px;
}
user-projects-component .md-button {
  min-width: 30px;
  min-height: 30px;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
user-projects-component ng-md-icon {
  outline: none;
  cursor: pointer;
  margin: 0;
}
user-projects-component ng-md-icon.group-header-icon, user-projects-component ng-md-icon.project-icon {
  fill: transparent;
}
user-projects-component ng-md-icon.group-header-icon:hover, user-projects-component ng-md-icon.project-icon:hover {
  fill: white !important;
}
user-projects-component ng-md-icon.no-click {
  cursor: default;
}
user-projects-component ng-md-icon:not(.visibility-icon) {
  transition: fill 0.2s;
}
user-projects-component .show-groups {
  transition: background-color 0.2s;
}
user-projects-component .show-groups.groups-hidden ng-md-icon {
  fill: #ff8a65;
}
user-projects-component .show-groups[disabled], user-projects-component .show-groups[disabled]:hover {
  background-color: #9e9e9e;
  color: white;
}
user-projects-component .show-groups[disabled] ng-md-icon, user-projects-component .show-groups[disabled]:hover ng-md-icon {
  cursor: default;
}
user-projects-component .show-groups:hover:not([disabled]) {
  color: #ffb74d;
}
user-projects-component .grab-handle ng-md-icon {
  position: relative;
  cursor: move;
}
user-projects-component .collection {
  color: #0d47a1;
}

workspace-component {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: white;
}
workspace-component.sharing {
  border: 3px solid red;
}
workspace-component #workspace-header {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px 12px;
  background-color: white;
  border-bottom: 1px solid rgb(215, 215, 215);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 11;
}
workspace-component #workspace-header .tool-icon.shared ng-md-icon {
  color: #039be5;
}
workspace-component #workspace-header .tool-icon.shared.followed ng-md-icon {
  color: red;
}
workspace-component #workspace-header .logo-container {
  height: 46px;
  cursor: pointer;
}
workspace-component #workspace-header .logo-container img {
  height: 100%;
}
workspace-component #workspace-header .project-select-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
workspace-component #workspace-header .project-select-container project-select-component {
  pointer-events: all;
}
workspace-component #workspace-header .spacer {
  flex: 1 1 auto;
}
workspace-component #workspace-header .app-controls, workspace-component #workspace-header .project-controls {
  display: flex;
  align-items: center;
}
workspace-component #workspace-header .app-controls .notification-badge, workspace-component #workspace-header .project-controls .notification-badge {
  top: 2px;
  right: 6px;
}
workspace-component #workspace-header .app-controls .vertical-divider, workspace-component #workspace-header .project-controls .vertical-divider {
  border-left: 1px solid rgb(215, 215, 215);
  height: 46px;
  margin: 0 5px;
}
workspace-component #workspace-header .user-avatar {
  height: auto;
  width: auto;
  min-height: 0;
  min-width: 0;
  margin: 0 0 0 5px;
  padding: 0 5px;
  border: 1px solid rgb(215, 215, 215);
  font-size: 24px;
  color: #9e9e9e;
  transition: color 0.15s linear !important;
}
workspace-component #workspace-header .user-avatar:hover {
  color: #ffb74d;
}
@media (max-width: 959px) {
  workspace-component #workspace-header .logo-container {
    height: 40px;
  }
}
workspace-component #workspace-header.dev-header {
  background-color: #08496D;
}
workspace-component #workspace-header.dev-header project-select-component {
  color: white;
}
workspace-component #workspace-header.dev-header .tool-icon:not(.shared) ng-md-icon, workspace-component #workspace-header.dev-header .user-avatar {
  color: white;
}
workspace-component #workspace-header.dev-header .tool-icon:not(.shared) ng-md-icon:hover, workspace-component #workspace-header.dev-header .user-avatar:hover {
  color: #ffb74d;
}
workspace-component #workspace-container {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
workspace-component #workspace-container > * {
  height: 100%;
}
workspace-component .form-edit, workspace-component .project-settings {
  display: flex;
}
workspace-component .close-team {
  position: absolute;
  top: 65px;
  right: 0px;
  display: none;
}
workspace-component .close-team.show {
  display: block;
}
workspace-component .sleep-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(38, 50, 56, 0.5);
  transition: opacity 0.5s;
}
workspace-component .sleep-overlay.ng-hide {
  opacity: 0;
}

accordion {
  display: block;
}
accordion .transclude-container {
  display: block;
  width: 100%;
}
accordion accordion-header {
  cursor: pointer;
}
accordion accordion-header.force-open {
  cursor: auto;
}
accordion accordion-content .transclude-container {
  overflow: hidden;
  transition: 0.25s max-height ease-in-out, 0.25s opacity;
  will-change: max-height;
}
accordion accordion-content .transclude-container.is-hidden {
  position: absolute;
  display: none;
}

dropzone {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  border: 1px dashed black;
  background-color: #ffb74d;
  color: white;
  font-size: 2em;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}
dropzone ng-md-icon {
  margin: 0 20px 0 0;
  color: white;
}
dropzone > * {
  pointer-events: none;
}

body.is-dragover dropzone:not(.disabled) {
  display: flex;
  opacity: 0.8;
  z-index: 1000;
}
body.is-dragover dropzone:not(.disabled).is-dragover {
  z-index: 1000;
  opacity: 1;
}

file-chooser {
  display: inline-block;
}
file-chooser input[type=file] {
  display: none;
}
file-chooser label {
  display: block;
  cursor: pointer;
}

spinner {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  display: inline-block;
}
spinner .spinner-container {
  position: relative;
}
spinner .spinner-container div {
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1em solid transparent;
  border-radius: 50%;
  animation: rotate360 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  will-change: transform;
}
spinner .spinner-container div:nth-child(1) {
  animation-delay: 0.2;
}
spinner .spinner-container div:nth-child(2) {
  animation-delay: -0.2s;
}
spinner .spinner-container div:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
manager-outline {
  flex: 1 1 auto;
  overflow: auto;
  border-right: 1px solid rgb(215, 215, 215);
}
manager-outline .tree-controls {
  flex: 0 0 40px;
  display: flex;
  padding: 15px;
  background-color: #fafafa;
  border-top: 1px solid rgb(215, 215, 215);
}
manager-outline .tree-controls .spacer {
  flex: 1 1 auto;
}
manager-outline .tree-controls .checkbox-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}
manager-outline .tree-controls .checkbox-button md-checkbox {
  margin: 0;
  min-width: 0;
  width: 20px;
}
manager-outline .tree-controls .project-list-filters md-input-container {
  margin: 0;
}
manager-outline .tree-controls .project-list-filters md-input-container .md-errors-spacer {
  display: none;
}
manager-outline .tree-controls .project-list-filters .clear-button {
  min-width: 0;
}
manager-outline .outline-container {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: visible;
  padding: 10px 25px;
}
manager-outline .outline-container .check-box {
  margin: 0 0 0 5px;
}
manager-outline .outline-container .check-box:not(.md-checked) .md-icon {
  background-color: white;
}
manager-outline .outline-container .number-badge {
  min-width: 18px;
  height: 18px;
  line-height: 17px;
  padding: 1px 3px;
  background-color: #2196f3;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  color: white;
  text-align: center;
}
manager-outline .outline-container .number-badge.group-badge {
  background-color: #9e9e9e;
}
manager-outline .outline-container li.hidden {
  min-height: 0px;
}
manager-outline .outline-container li.hidden > .tree-node {
  display: none;
}
manager-outline .outline-container .tree-node {
  border-bottom: 1px solid rgb(215, 215, 215);
  padding: 5px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
manager-outline .outline-container .tree-node:hover {
  background-color: #eeeeee;
}
manager-outline .outline-container .tree-node.active {
  background-color: #b3e5fc;
}
manager-outline .outline-container .sub-nodes {
  padding-left: 63px;
}
manager-outline .outline-container .node-name {
  padding-left: 10px;
}

manager-outline-details {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #eeeeee;
  border-top: 1px solid rgb(215, 215, 215);
  border-bottom: 1px solid rgb(215, 215, 215);
}
manager-outline-details .node-details {
  flex: 1 1 auto;
  padding: 10px 25px;
  overflow: auto;
}
manager-outline-details .settings {
  flex: 0 0 auto;
  padding: 10px 25px;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid rgb(215, 215, 215);
  background: white;
}
manager-outline-details .settings .indent {
  margin-left: 30px;
}
manager-outline-details .subheader {
  margin-bottom: 10px;
  color: #9e9e9e;
}
manager-outline-details .options-button {
  color: #616161;
}
manager-outline-details .info-box {
  max-width: 250px;
  margin: 10px 0;
}
manager-outline-details .info-box .header {
  color: #9e9e9e;
}
manager-outline-details .info-box img {
  width: 100%;
  border: 1px solid rgb(215, 215, 215);
  cursor: zoom-in;
}

manager-tree {
  border: 1px solid rgb(215, 215, 215);
  flex: 0 0 250px;
  color: #616161;
  overflow: auto;
  background-color: #e0e0e0;
  direction: rtl;
}
manager-tree > * {
  direction: ltr;
}
manager-tree .tree-row {
  padding: 3px 5px;
  cursor: pointer;
  overflow: hidden;
}
manager-tree .directory-header {
  display: flex;
  justify-content: flex-start;
}
manager-tree .directory-header ng-md-icon {
  flex: 0 0 auto;
  color: #9e9e9e;
}
manager-tree .directory-header .group-name {
  flex: 1 1 auto;
  margin: 0 0 0 5px;
  white-space: nowrap;
}
manager-tree .group-list-container {
  overflow: hidden;
  margin-bottom: 15px;
}
manager-tree .group-list-container .project-name {
  white-space: nowrap;
}
manager-tree .group-list-container .tree-row {
  padding-left: 41px;
}
manager-tree .group-list-container .tree-row.selected {
  background-color: white;
  font-weight: 500;
  color: #424242;
}
manager-tree .group-list-container .tree-row:hover {
  background-color: #e3f2fd;
}
manager-tree .group-list-container .tree-row.current {
  color: #ff5722;
}
manager-tree .group-list-container .tree-row.current ng-md-icon {
  transform: translateY(-1px);
}
manager-tree .group-list-container .tree-row.pinned-current {
  font-size: 1.1em;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid #757575;
}
manager-tree .group-list-container.ng-enter {
  transition: 0.15s linear opacity;
  opacity: 0;
}
manager-tree .group-list-container.ng-enter.ng-enter-active {
  opacity: 1;
}
manager-tree .group-list-container.ng-leave {
  transition: 0.15s linear opacity;
  opacity: 1;
}
manager-tree .group-list-container.ng-leave.ng-leave-active {
  opacity: 0;
}

artwork-editor-component {
  display: flex;
  flex-direction: column;
}
artwork-editor-component textarea {
  min-width: 240px;
}
artwork-editor-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1976d2;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
artwork-editor-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
artwork-editor-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  background-color: #d2d6e0;
}
artwork-editor-component .col {
  padding: 10px;
  overflow: auto;
}
artwork-editor-component .col-1 {
  flex: 0 0 400px;
  background-color: #d9ebff;
  border: solid 5px #0158bb;
  border-radius: 8px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
artwork-editor-component .col-2 {
  flex: 1 0 auto;
  max-width: 420px;
  min-width: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid rgb(215, 215, 215);
  border-right: 1px solid rgb(215, 215, 215);
  background-color: #ffffff;
  border: solid 3px #0158bb;
  border-radius: 8px;
  margin: 8px;
}
artwork-editor-component .col-3 {
  flex: 1 1 auto;
  background-color: #ffffff;
  border: solid 3px #0158bb;
  border-radius: 7px;
  margin: 8px;
}
artwork-editor-component .col-3 .control-details-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  gap: 0px;
  padding: 0px;
}
artwork-editor-component .col-3 .control-details-layout .controls-section {
  flex: 1 1 50%;
  overflow: auto;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section {
  flex: 1 1 50%;
  overflow: auto;
  background-color: #d9ebff;
  border-radius: 10px;
  border: solid 4px #0158bb;
  padding: 14px 10px 10px 10px;
  margin: 40px 0 40px 0;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container {
  display: inline-block !important;
  width: 100%;
  background-color: #ffffff !important;
  border-radius: 5px !important;
  margin: 24px 0 !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container label {
  color: #0158bb !important;
  font-weight: 500;
  font-size: 1em !important;
  transform: translateY(-5px) !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container input, artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container input[type=number], artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container input[type=text], artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container textarea, artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container md-select {
  width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-input-container input[type=number] {
  width: 5em !important;
  margin-right: 10px !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-radio-group {
  margin-bottom: 10px !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-radio-group label {
  display: block;
  margin-bottom: 10px;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section md-radio-group md-radio-button {
  display: inline-block;
  margin-right: 10px;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section .numeric-data {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
  margin-bottom: 10px !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section .numeric-data md-input-container {
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 100px;
  background-color: #ffffff !important;
  border-radius: 5px !important;
  margin: 20px 20px 20px 20px !important;
}
artwork-editor-component .col-3 .control-details-layout .input-fields-section .numeric-data md-input-container input, artwork-editor-component .col-3 .control-details-layout .input-fields-section .numeric-data md-input-container input[type=number] {
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 5px !important;
  margin: 0 !important;
}
artwork-editor-component .artwork-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
artwork-editor-component .artwork-details .name-section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
artwork-editor-component .artwork-details > md-button {
  align-self: flex-start !important;
  margin: 5px 0 !important;
  min-width: auto !important;
}
artwork-editor-component .dev-tools-section {
  margin-top: auto;
  padding: 10px;
}
artwork-editor-component .dev-tools-header {
  font-weight: bold;
  font-size: 0.9em;
  color: #0158bb;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
artwork-editor-component .download-button-container {
  padding-top: 10px;
  text-align: left;
}
artwork-editor-component .download-link-button {
  font-size: 0.6rem !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  text-align: left !important;
  display: inline-block !important;
}
artwork-editor-component .download-link-button span {
  font-size: 0.6rem !important;
}
artwork-editor-component .download-link-button ng-md-icon {
  font-size: 14px !important;
}
artwork-editor-component .name-input {
  display: block;
  flex: 2;
  min-width: 220px;
  margin: 50px 0 0 0;
  background-color: #ffffff;
  border: #0158bb solid 2px;
  border-radius: 5px;
}
artwork-editor-component .name-input label {
  padding-top: 30px;
  font-weight: 800;
  font-size: 1.6rem;
  color: #0158bb !important;
}
artwork-editor-component .name-input textarea {
  font-weight: bold;
  color: #0158bb;
}
artwork-editor-component .image-container {
  flex-shrink: 0;
  position: relative;
  margin-left: -10px;
  margin-top: 10px;
  padding: 5px;
}
artwork-editor-component .image-container .label {
  font-size: 0.8em;
  margin-bottom: 5px;
}
artwork-editor-component .image-container img {
  height: 80px;
  max-width: 100%;
  padding: 0px;
  border-radius: 5px;
  border: solid 1px #000000;
}
artwork-editor-component .image-container .thumb-placeholder {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 245, 245);
  border: 1px solid rgb(215, 215, 215);
  border-radius: 5px;
}
artwork-editor-component .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
artwork-editor-component .image-container .ah-remove-button {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
}
artwork-editor-component .image-container:hover .ah-remove-button {
  opacity: 1;
}
artwork-editor-component .actions-container {
  display: flex;
  flex-direction: column;
  height: 160px;
}
artwork-editor-component .actions-container .md-button {
  text-align: left;
}
artwork-editor-component .section-header {
  width: 100%;
  font-weight: bold;
  font-size: 1.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
}
artwork-editor-component .section-header md-select {
  margin: 0;
}
artwork-editor-component .style-list-container {
  width: 100%;
}
artwork-editor-component .element-style, artwork-editor-component .control-list-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 0 5px;
  height: 36px;
  border: 0px;
  background-color: #1976d2;
  font-weight: bold;
  color: white;
}
artwork-editor-component .element-style.alert, artwork-editor-component .control-list-item.alert {
  border: 1px solid #ef5350;
  background-color: #ef5350;
}
artwork-editor-component .element-style.alert .index, artwork-editor-component .control-list-item.alert .index {
  background-color: #c62828;
}
artwork-editor-component .element-style:not(.selected), artwork-editor-component .control-list-item:not(.selected) {
  background-color: white;
  color: #616161;
}
artwork-editor-component .element-style:not(.selected) .md-button, artwork-editor-component .control-list-item:not(.selected) .md-button {
  color: #616161;
}
artwork-editor-component .element-style .grab-handle, artwork-editor-component .control-list-item .grab-handle {
  margin-right: 5px;
  opacity: 0.5;
}
artwork-editor-component .element-style .index, artwork-editor-component .control-list-item .index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  margin-right: 6px;
  background-color: #0d47a1;
  line-height: 0;
  color: white;
}
artwork-editor-component .element-style .name, artwork-editor-component .control-list-item .name {
  flex: 1 1 auto;
}
artwork-editor-component .element-style .md-button, artwork-editor-component .control-list-item .md-button {
  color: white;
}
artwork-editor-component .control-list-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 5px 20px 5px 5px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px 0 0 5px;
  background-color: #757575;
}
artwork-editor-component .control-list-item.selected {
  background-color: #0158bb !important;
}
artwork-editor-component .control-list-item:not(.selected) {
  background-color: rgb(247, 247, 247);
  color: #616161;
}
artwork-editor-component .control-list-item:not(.selected) .md-button {
  color: #616161;
}
artwork-editor-component .control-list-item .grab-handle {
  margin-right: 5px;
  opacity: 0.5;
}
artwork-editor-component .control-list-item .index {
  flex: 0 0 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  margin-right: 6px;
  background-color: #424242;
  line-height: 0;
  color: white;
}
artwork-editor-component .control-list-item .name {
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
artwork-editor-component .control-list-item .md-button {
  color: white;
}
artwork-editor-component .control-list-item .control-buttons {
  display: flex;
}
artwork-editor-component .style-details-container {
  border: 1px solid #1976d2;
}
artwork-editor-component .style-details-container.alert {
  border: 1px solid #ef5350;
}
artwork-editor-component .style-details-container.alert .style-details-header {
  background-color: #ef5350;
}
artwork-editor-component .control-details-container {
  border: 1px solid #616161;
}
artwork-editor-component .style-details-header, artwork-editor-component .control-details-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  background-color: #1976d2;
  font-weight: bold;
  color: white;
}
artwork-editor-component .control-details-header {
  background-color: #616161;
  display: none !important;
}
artwork-editor-component .control-details-content {
  padding: 10px;
  display: flex;
  border: solid 0px !important;
}
artwork-editor-component .control-details-content .left-col, artwork-editor-component .control-details-content .right-col {
  flex: 1 1 50%;
}
artwork-editor-component .control-details-content .left-col {
  padding-right: 10px;
}
artwork-editor-component .control-details-content .right-col {
  border: solid 0px !important;
  padding-left: 10px;
}
artwork-editor-component .control-details-content .right-col md-input-container {
  display: inline-block;
}
artwork-editor-component .control-details-content .right-col md-input-container input[type=number] {
  width: 5em;
  margin-right: 10px;
}
artwork-editor-component .control-details-content .right-col md-radio-group label {
  display: block;
  margin-bottom: 10px;
}
artwork-editor-component .control-details-content .right-col md-radio-group md-radio-button {
  display: inline-block;
  margin-right: 10px;
}
artwork-editor-component .control-details-content .color-control .label {
  color: #616161;
  font-size: 0.8em;
  margin-bottom: 5px;
}
artwork-editor-component .style-details-content {
  padding: 10px;
}
artwork-editor-component .style-details-content .top-row {
  display: flex;
}
artwork-editor-component .style-details-content .top-row .left-col {
  padding-right: 10px;
}
artwork-editor-component .style-details-content .top-row .right-col {
  padding: 0 10px;
  border-left: 1px solid rgb(215, 215, 215);
}
artwork-editor-component .style-details-content .section-header {
  border-top: 1px solid rgb(215, 215, 215);
  margin-top: 15px;
}
artwork-editor-component .type-select-container md-input-container {
  min-width: 230px;
}
artwork-editor-component .control-details-content {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgb(215, 215, 215);
  padding: 5px;
  margin: 5px 0;
}
artwork-editor-component .control-details-content .control-row {
  margin-bottom: 10px;
}
artwork-editor-component .control-details-content md-radio-button {
  display: inline;
  margin-left: 10px;
}
artwork-editor-component .control-details-content input[type=number] {
  width: 4em;
  margin-right: 10px;
}
artwork-editor-component .control-details-content .text-control-values {
  display: flex;
  flex-direction: column;
}

background-builder-component {
  display: flex;
  flex-direction: column;
}
background-builder-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1976d2;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
background-builder-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
background-builder-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  background-color: #d2d6e0;
}
background-builder-component .col {
  padding: 10px;
  overflow: auto;
}
background-builder-component .col-1 {
  flex: 0 0 400px;
  background-color: #d9ebff;
  border: solid 5px #0158bb;
  border-radius: 8px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
background-builder-component .column-header {
  display: flex;
  justify-content: flex-end;
  padding: 0px;
}
background-builder-component .column-header .save-button-top {
  font-size: 0.8em !important;
  min-width: auto !important;
  border-radius: 5px;
}
background-builder-component .name-display {
  display: flex;
  align-items: center;
  flex: 2;
  min-width: 220px;
  font-weight: bold;
  font-size: 1.2em;
  color: #0158bb;
  padding-top: 50px;
}
background-builder-component .file-name {
  margin: 10px 3px;
  color: #616161;
  font-weight: 500;
  font-size: 0.8rem;
}
background-builder-component .file-name .file-name-label {
  font-size: 0.7rem;
  color: #9e9e9e;
  margin-bottom: 3px;
}
background-builder-component .template-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
background-builder-component .template-details .name-section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
background-builder-component .template-details > md-button {
  align-self: flex-start !important;
  margin: 5px 0 !important;
  min-width: auto !important;
}
background-builder-component .dev-tools-section {
  margin-top: auto;
  padding: 10px;
}
background-builder-component .dev-tools-header {
  font-weight: bold;
  font-size: 0.9em;
  color: #0158bb;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
background-builder-component .download-button-container {
  padding-top: 10px;
  text-align: left;
}
background-builder-component .download-link-button {
  font-size: 0.6rem !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  text-align: left !important;
  display: inline-block !important;
}
background-builder-component .download-link-button span {
  font-size: 0.6rem !important;
}
background-builder-component .download-link-button ng-md-icon {
  font-size: 14px !important;
}
background-builder-component .image-container {
  flex-shrink: 0;
  position: relative;
  margin-right: 15px;
  margin-top: 10px;
  padding-left: 20px;
}
background-builder-component .image-container img {
  height: 80px;
  max-width: 100%;
  padding-top: 10px;
}
background-builder-component .background-details-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  max-width: 520px;
  min-width: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #0158bb rgba(255, 255, 255, 0);
  scrollbar-width: thin;
  border-left: 1px solid rgb(215, 215, 215);
  border-right: 1px solid rgb(215, 215, 215);
  background-color: #ffffff;
  border: solid 3px #0158bb;
  border-radius: 8px;
  margin: 8px;
}
background-builder-component .style-details-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  background-color: #1976d2;
  font-weight: bold;
  color: white;
}
background-builder-component .style-details-content {
  flex: none;
  display: block;
  overflow: visible;
}
background-builder-component .style-details-content .style-info {
  display: block;
  overflow: visible;
  padding: 0px;
}
background-builder-component .section-header {
  width: 100%;
  font-weight: bold;
  font-size: 1.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0 0;
  padding: 4px 0 16px 4px;
}
background-builder-component .section-subheader {
  font-weight: bold;
  font-size: 1em;
  color: #616161;
  margin-right: 10px;
}
background-builder-component .section-divider {
  width: 100%;
  height: 3px;
  background-color: #0158bb;
  margin: 30px 0 30px 0;
  opacity: 0.3;
}
background-builder-component .margins-box {
  background-color: #d9ebff;
  border-radius: 8px;
  padding: 15px;
}
background-builder-component .margins-box .section-header {
  margin: 0 0 24px 0;
  padding: 0;
}
background-builder-component .title-rules-box {
  background-color: #d9ebff;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
}
background-builder-component .title-rules-box .section-header {
  margin: 0 0 24px 0;
  padding: 0;
}
background-builder-component .overrides-box {
  background-color: #d9ebff;
  border-radius: 8px;
  padding: 15px;
}
background-builder-component .overrides-box .section-header {
  margin: 0 0 10px 0;
  padding: 0;
}
background-builder-component .theme-colors-box {
  background-color: #d9ebff;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
}
background-builder-component .theme-colors-box .section-header {
  margin: 0 0 10px 0;
  padding: 0;
}
background-builder-component .details-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 12px 0 12px;
}
background-builder-component .details-row.border-top {
  border-top: 2px solid #98bfeb;
  padding-top: 24px;
  padding-bottom: 12px;
}
background-builder-component .details-row .input-label {
  width: 40px;
  font-size: 0.9em;
  color: #616161;
}
background-builder-component .details-row.color-input {
  margin: 6px 0 0 0;
  border-bottom: 1px solid #9e9e9e;
  padding-bottom: 6px;
}
background-builder-component .details-row.color-input .label {
  flex: 1 1 auto;
  color: #616161;
}
background-builder-component .details-row.color-input .hex-color {
  font-weight: bold;
  margin: 0 5px;
  color: #616161;
}
background-builder-component input[type=number] {
  width: 50px;
  margin: 0 7px;
}
background-builder-component input[type=number].wide {
  width: 70px;
}
background-builder-component .select-container {
  margin: 0 20px;
}
background-builder-component md-switch {
  margin: 0;
}
background-builder-component ng-md-icon {
  margin: 0;
}
background-builder-component .third-col-container {
  background-color: #ffffff;
  border: solid 3px #0158bb;
  border-radius: 7px;
  margin: 8px;
  scrollbar-color: #0158bb rgba(255, 255, 255, 0);
  scrollbar-width: thin;
  width: 500px;
}
background-builder-component .third-col-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  background-color: #616161;
  font-weight: bold;
  color: white;
}
background-builder-component .third-col-content {
  display: flex;
  flex-direction: column;
}
background-builder-component .third-col-content .theme-colors-section .details-row.color-input {
  margin: 6px 0;
  border-bottom: 1px solid #9e9e9e;
  padding-bottom: 6px;
}
background-builder-component .third-col-content .theme-colors-section .details-row.color-input .label {
  flex: 1 1 auto;
  color: #616161;
  font-weight: 500;
}
background-builder-component .third-col-content .theme-colors-section .details-row.color-input .hex-color {
  font-weight: bold;
  margin: 0 5px;
  color: #616161;
  font-family: monospace;
  font-size: 0.9em;
}

design-builder-component {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #D2D6E0;
}
design-builder-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1976d2;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
design-builder-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
design-builder-component .header-button {
  margin: 0px 20px;
  font-weight: normal;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0.8;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
design-builder-component .header-button:first-of-type {
  margin-left: 40px;
}
design-builder-component .header-button:hover {
  opacity: 1;
}
design-builder-component .header-button.active {
  opacity: 1;
  font-weight: bold;
  color: #eeff00;
  outline: solid 2px #eeff00;
}
design-builder-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  overflow: auto;
}

docx-template-editor-component {
  display: flex;
  flex-direction: column;
}
docx-template-editor-component textarea {
  min-width: 240px;
}
docx-template-editor-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1a237e;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
docx-template-editor-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
docx-template-editor-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
}
docx-template-editor-component .full-row {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
docx-template-editor-component .full-row.row-1 {
  margin-top: 40px;
  flex: 0 0 180px;
  align-items: flex-start;
}
docx-template-editor-component .full-row.row-2 {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}
docx-template-editor-component .full-row .col {
  flex: 1 1 auto;
  padding: 10px;
}
docx-template-editor-component .full-row .col-1 {
  flex: 0 0 400px;
}
docx-template-editor-component .full-row .col-2, docx-template-editor-component .full-row .col-3 {
  flex: 1 1 50%;
  overflow: hidden;
}
docx-template-editor-component .name-input {
  display: block;
  height: 40px;
  margin: 0 20px;
}
docx-template-editor-component .name-input textarea {
  font-weight: bold;
}
docx-template-editor-component .image-container {
  display: inline-block;
  position: relative;
  min-height: 80px;
}
docx-template-editor-component .image-container .label {
  font-size: 0.8em;
  margin-bottom: 5px;
}
docx-template-editor-component .image-container img {
  height: 80px;
  width: 80px;
  border: 1px solid rgb(215, 215, 215);
  background-color: #eeeeee;
}
docx-template-editor-component .image-container .thumb-placeholder {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 245, 245);
  border: 1px solid rgb(215, 215, 215);
}
docx-template-editor-component .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
docx-template-editor-component .image-container:hover .ah-remove-button {
  opacity: 1;
}
docx-template-editor-component .actions-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 160px;
}
docx-template-editor-component .actions-container .md-button {
  text-align: left;
}
docx-template-editor-component .section-header {
  font-weight: bold;
  display: flex;
  align-items: center;
}
docx-template-editor-component .style-list-container {
  width: 100%;
}
docx-template-editor-component .element-style, docx-template-editor-component .control-list-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 0 5px;
  height: 36px;
  border: 1px solid #1976d2;
  background-color: #1976d2;
  font-weight: bold;
  color: white;
}
docx-template-editor-component .element-style.alert, docx-template-editor-component .control-list-item.alert {
  border: 1px solid #ef5350;
  background-color: #ef5350;
}
docx-template-editor-component .element-style.alert .index, docx-template-editor-component .control-list-item.alert .index {
  background-color: #c62828;
}
docx-template-editor-component .element-style:not(.selected), docx-template-editor-component .control-list-item:not(.selected) {
  background-color: white;
  color: #616161;
}
docx-template-editor-component .element-style:not(.selected) .md-button, docx-template-editor-component .control-list-item:not(.selected) .md-button {
  color: #616161;
}
docx-template-editor-component .element-style .grab-handle, docx-template-editor-component .control-list-item .grab-handle {
  margin-right: 5px;
  opacity: 0.5;
}
docx-template-editor-component .element-style .index, docx-template-editor-component .control-list-item .index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  margin-right: 6px;
  background-color: #0d47a1;
  line-height: 0;
  color: white;
}
docx-template-editor-component .element-style .name, docx-template-editor-component .control-list-item .name {
  flex: 1 1 auto;
}
docx-template-editor-component .element-style .md-button, docx-template-editor-component .control-list-item .md-button {
  color: white;
}
docx-template-editor-component .control-list-item {
  border: 1px solid #757575;
  background-color: #757575;
}
docx-template-editor-component .control-list-item .index {
  background-color: #424242;
}
docx-template-editor-component .style-details-container {
  border: 1px solid #1976d2;
}
docx-template-editor-component .style-details-container.alert {
  border: 1px solid #ef5350;
}
docx-template-editor-component .style-details-container.alert .style-details-header {
  background-color: #ef5350;
}
docx-template-editor-component .control-details-container {
  border: 1px solid #616161;
}
docx-template-editor-component .style-details-header, docx-template-editor-component .control-details-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  background-color: #1976d2;
  font-weight: bold;
  color: white;
}
docx-template-editor-component .control-details-header {
  background-color: #616161;
}
docx-template-editor-component .control-details-content {
  padding: 10px;
  display: flex;
}
docx-template-editor-component .control-details-content .left-col, docx-template-editor-component .control-details-content .right-col {
  flex: 1 1 50%;
}
docx-template-editor-component .control-details-content .left-col {
  padding-right: 10px;
}
docx-template-editor-component .control-details-content .right-col {
  border-left: 1px solid rgb(215, 215, 215);
  padding-left: 10px;
}
docx-template-editor-component .control-details-content .right-col md-input-container {
  display: inline-block;
}
docx-template-editor-component .control-details-content .right-col md-input-container input[type=number] {
  width: 5em;
  margin-right: 10px;
}
docx-template-editor-component .control-details-content .right-col md-radio-group label {
  display: block;
  margin-bottom: 10px;
}
docx-template-editor-component .control-details-content .right-col md-radio-group md-radio-button {
  display: inline-block;
  margin-right: 10px;
}
docx-template-editor-component .control-details-content .color-control .label {
  color: #616161;
  font-size: 0.8em;
  margin-bottom: 5px;
}
docx-template-editor-component .style-details-content {
  padding: 10px;
}
docx-template-editor-component .style-details-content .top-row {
  display: flex;
}
docx-template-editor-component .style-details-content .top-row .left-col {
  padding-right: 10px;
}
docx-template-editor-component .style-details-content .top-row .right-col {
  padding: 0 10px;
  border-left: 1px solid rgb(215, 215, 215);
}
docx-template-editor-component .style-details-content .section-header {
  border-top: 1px solid rgb(215, 215, 215);
  margin-top: 15px;
}
docx-template-editor-component .type-select-container md-input-container {
  min-width: 230px;
}
docx-template-editor-component .control {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgb(215, 215, 215);
  padding: 5px;
  margin: 5px 0;
}
docx-template-editor-component .control accordion-header .transclude-container {
  background-color: #757575;
}
docx-template-editor-component .control accordion-header .transclude-container .index {
  background-color: #424242;
}
docx-template-editor-component .control .control-row {
  margin-bottom: 10px;
}
docx-template-editor-component .control md-radio-button {
  display: inline;
  margin-left: 10px;
}
docx-template-editor-component .control input[type=number] {
  width: 4em;
  margin-right: 10px;
}
docx-template-editor-component .control .text-control-values md-input-container {
  width: 100%;
}

layout-builder-component {
  display: flex;
  flex-direction: column;
}
layout-builder-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1976d2;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
layout-builder-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
layout-builder-component .template-select-container {
  margin: 0 20px;
  padding: 0 20px;
  background-color: #eeeeee;
}
layout-builder-component .template-select-container .md-select-value {
  color: white;
}
layout-builder-component .template-select-container md-input-container {
  margin: 0px;
}
layout-builder-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
}
layout-builder-component .layout-display {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
layout-builder-component .layout-display .layout-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  background-color: rgb(224, 224, 224);
}
layout-builder-component .layout-display .layout-canvas-container .canvas-element.lower-canvas {
  border: 1px solid #bdbdbd;
  background-color: white;
}
layout-builder-component .layout-display .layout-tools {
  flex: 0 0 50px;
  min-height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #eeeeee;
}
layout-builder-component .layout-display .layout-tools .tools-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  padding: 10px;
  margin: 0 5px;
  border: 1px solid rgb(215, 215, 215);
}
layout-builder-component .layout-display .layout-tools .tools-container .align-button-icon {
  width: 32px;
  height: 32px;
}
layout-builder-component .layout-display .layout-tools .grid-size-input {
  width: 60px;
}
layout-builder-component .layout-display .layout-tools .position-controls input {
  font-size: 0.8em;
  width: 5em;
}
layout-builder-component .layout-display .layout-tools .position-controls .control-container:not(:first-child) {
  padding-left: 10px;
}
layout-builder-component .page-selector {
  flex: 0 0 80px;
  background-color: rgb(224, 224, 224);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
layout-builder-component .page-selector .header {
  color: #616161;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
layout-builder-component .page-selector .page-icon-container {
  flex: 1 1 auto;
  height: 10px;
}
layout-builder-component .page-selector .page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width: 40px;
  margin-bottom: 10px;
  opacity: 0.7;
  background-color: rgb(0, 200, 255);
  color: white;
  font-weight: bold;
  font-size: 30px;
  cursor: pointer;
  transition: 0.2s opacity;
}
layout-builder-component .page-selector .page-icon:hover {
  opacity: 1;
}
layout-builder-component .snapshot-details {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgb(215, 215, 215);
}
layout-builder-component .snapshot-details .text-input {
  width: 100%;
  text-align: left;
}
layout-builder-component .snapshot-details .text-input .label {
  margin: 0;
}
layout-builder-component .snapshot-details .label {
  margin-left: 20px;
  color: #9e9e9e;
}
layout-builder-component .snapshot-details .header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px 20px 20px;
  border-bottom: 1px solid rgb(215, 215, 215);
}
layout-builder-component .snapshot-details .header > * {
  width: 100%;
  text-align: center;
}
layout-builder-component .snapshot-details .header input {
  font-weight: bold;
  width: 100%;
}
layout-builder-component .snapshot-details .header img {
  border: 1px solid rgb(215, 215, 215);
  width: 180px;
  background-color: white;
}
layout-builder-component .snapshot-details .controls {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}
layout-builder-component .snapshot-details .controls-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
layout-builder-component .snapshot-details .controls-row.actions {
  height: 80px;
}
layout-builder-component .snapshot-details .controls-row .label {
  flex: 1 1 auto;
  margin-left: 10px;
  color: #616161;
}
layout-builder-component .snapshot-details .controls-row input[type=number] {
  width: 3em;
}
layout-builder-component .snapshot-details .controls-row.centered {
  justify-content: center;
}
layout-builder-component .snapshot-details .controls-row.element-hidden {
  margin: 10px 0;
}
layout-builder-component .snapshot-details .text-element-type-select {
  margin-top: 20px;
}
layout-builder-component .snapshot-details .text-element-type-select > * {
  width: 100%;
  max-width: 230px;
}
layout-builder-component .snapshot-list {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  border-left: 1px solid rgb(215, 215, 215);
}
layout-builder-component .snapshot-list .header {
  color: #616161;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
layout-builder-component .snapshot-list .snapshots-list-container {
  flex: 1 1 auto;
  height: 10px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 5px;
  cursor: pointer;
}
layout-builder-component .snapshot-list .snapshot-container {
  display: flex;
  align-items: center;
  position: relative;
  transition: background-color 0.2s;
}
layout-builder-component .snapshot-list .snapshot-container .favorite {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  height: 30px;
}
layout-builder-component .snapshot-list .snapshot-container .favorite ng-md-icon {
  color: #9e9e9e;
}
layout-builder-component .snapshot-list .snapshot-container .favorite:hover ng-md-icon {
  color: #90caf9;
}
layout-builder-component .snapshot-list .snapshot-container .favorite.active ng-md-icon {
  color: #1e88e5;
}
layout-builder-component .snapshot-list .snapshot-container .image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 7px 10px;
}
layout-builder-component .snapshot-list .snapshot-container .image-container .snapshot-label {
  color: #616161;
  margin-bottom: 5px;
}
layout-builder-component .snapshot-list .snapshot-container .image-container .snapshot-image img {
  height: 70px;
  background-color: white;
  border: 1px solid rgb(215, 215, 215);
}
layout-builder-component .snapshot-list .snapshot-container .image-container .thumb-placeholder {
  height: 70px;
  width: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(215, 215, 215);
}
layout-builder-component .snapshot-list .snapshot-container .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
layout-builder-component .snapshot-list .snapshot-container .drag-handle {
  display: flex;
  justify-content: center;
}
layout-builder-component .snapshot-list .snapshot-container .drag-handle ng-md-icon {
  color: #9e9e9e;
}
layout-builder-component .snapshot-list .snapshot-container .drag-handle:hover ng-md-icon {
  color: #616161;
}
layout-builder-component .snapshot-list .snapshot-container .delete-snapshot {
  position: absolute;
  top: 5px;
  right: 1px;
}
layout-builder-component .snapshot-list .snapshot-container .delete-snapshot ng-md-icon {
  color: #9e9e9e;
}
layout-builder-component .snapshot-list .snapshot-container .delete-snapshot:hover ng-md-icon {
  color: #ffb74d;
}
layout-builder-component .snapshot-list .snapshot-container .drag-handle, layout-builder-component .snapshot-list .snapshot-container .delete-snapshot {
  opacity: 0;
  transition: opacity 0.2s;
}
layout-builder-component .snapshot-list .snapshot-container:hover {
  background-color: #e3f2fd;
}
layout-builder-component .snapshot-list .snapshot-container:hover .drag-handle, layout-builder-component .snapshot-list .snapshot-container:hover .delete-snapshot {
  opacity: 1;
}
layout-builder-component .snapshot-list .snapshot-container.selected {
  background-color: #bbdefb;
}

layout-builder-container-component {
  display: flex;
  flex-direction: column;
  background: #D2D6E0;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
layout-builder-container-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1976d2;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
layout-builder-container-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
layout-builder-container-component .template-select-container {
  margin: 0 20px;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  border: solid 1px #ffffff;
}
layout-builder-container-component .template-select-container .md-select-value {
  color: white;
}
layout-builder-container-component .template-select-container .md-select-icon {
  color: white;
}
layout-builder-container-component .template-select-container md-input-container {
  margin: 0px;
}
layout-builder-container-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
layout-builder-container-component .secondary-screen-footer {
  flex: 0 0 auto;
}
layout-builder-container-component .position-tools {
  scrollbar-color: #B7BDCD #D2D6E0;
  scrollbar-width: thin;
  padding-right: 2px;
}
layout-builder-container-component .layout-canvas-container {
  flex: 1 1 auto;
  height: calc(72vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  touch-action: pan-x pan-y;
  position: relative;
}
layout-builder-container-component .layout-canvas-container .canvas-element {
  position: relative;
}
layout-builder-container-component .layout-canvas-container .canvas-element.lower-canvas {
  position: relative;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  outline: 5px solid #0158BB;
  border-radius: 6px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 25px;
}
layout-builder-container-component .layout-canvas-container .canvas-element.upper-canvas {
  position: relative;
}
layout-builder-container-component .layout-canvas-container .zoom-reset-button {
  position: relative;
  margin-top: -490px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  pointer-events: auto;
}
layout-builder-container-component .layout-canvas-container .zoom-reset-button:hover {
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
layout-builder-container-component .layout-canvas-container .zoom-reset-button ng-md-icon {
  color: #666;
}
layout-builder-container-component .layout-display {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
layout-builder-container-component .layout-display .layout-tools {
  flex: 0 0 50px;
  min-height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #eeeeee;
}
layout-builder-container-component .layout-display .layout-tools .tools-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  padding: 10px;
  margin: 0 5px;
  border: 1px solid rgb(215, 215, 215);
}
layout-builder-container-component .layout-display .layout-tools .grid-size-input {
  width: 60px;
}
layout-builder-container-component .layout-display .layout-tools .position-controls input {
  font-size: 0.8em;
  width: 5em;
}
layout-builder-container-component .layout-display .layout-tools .position-controls .control-container:not(:first-child) {
  padding-left: 10px;
}
layout-builder-container-component .page-selector {
  flex: 0 0 80px;
  background-color: rgb(224, 224, 224);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
layout-builder-container-component .page-selector .header {
  color: #616161;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
layout-builder-container-component .page-selector .page-icon-container {
  flex: 1 1 auto;
  height: 10px;
}
layout-builder-container-component .page-selector .page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width: 40px;
  margin-bottom: 10px;
  opacity: 0.7;
  background-color: rgb(0, 200, 255);
  color: white;
  font-weight: bold;
  font-size: 30px;
  cursor: pointer;
  transition: 0.2s opacity;
}
layout-builder-container-component .page-selector .page-icon:hover {
  opacity: 1;
}
layout-builder-container-component .snapshot-details {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgb(215, 215, 215);
}
layout-builder-container-component .snapshot-details .text-input {
  width: 100%;
  text-align: left;
}
layout-builder-container-component .snapshot-details .text-input .label {
  margin: 0;
}
layout-builder-container-component .snapshot-details .label {
  margin-left: 20px;
  color: #9e9e9e;
}
layout-builder-container-component .snapshot-details .header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px 20px 20px;
  border-bottom: 1px solid rgb(215, 215, 215);
}
layout-builder-container-component .snapshot-details .header > * {
  width: 100%;
  text-align: center;
}
layout-builder-container-component .snapshot-details .header input {
  font-weight: bold;
  width: 100%;
}
layout-builder-container-component .snapshot-details .header img {
  border: 1px solid rgb(215, 215, 215);
  width: 180px;
  background-color: white;
}
layout-builder-container-component .snapshot-details .controls {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}
layout-builder-container-component .snapshot-details .controls-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
layout-builder-container-component .snapshot-details .controls-row.actions {
  height: 80px;
}
layout-builder-container-component .snapshot-details .controls-row .label {
  flex: 1 1 auto;
  margin-left: 10px;
  color: #616161;
}
layout-builder-container-component .snapshot-details .controls-row input[type=number] {
  width: 3em;
}
layout-builder-container-component .snapshot-details .controls-row.centered {
  justify-content: center;
}
layout-builder-container-component .snapshot-details .controls-row.element-hidden {
  margin: 10px 0;
}
layout-builder-container-component .snapshot-details .text-element-type-select {
  margin-top: 20px;
}
layout-builder-container-component .snapshot-details .text-element-type-select > * {
  width: 100%;
  max-width: 230px;
}
layout-builder-container-component .snapshot-list {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  border-left: 1px solid rgb(215, 215, 215);
}
layout-builder-container-component .snapshot-list .header {
  color: #616161;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
layout-builder-container-component .snapshot-list .snapshots-list-container {
  flex: 1 1 auto;
  height: 10px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 5px;
  cursor: pointer;
}
layout-builder-container-component .snapshot-list .snapshot-container {
  display: flex;
  align-items: center;
  position: relative;
  transition: background-color 0.2s;
}
layout-builder-container-component .snapshot-list .snapshot-container .favorite {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  height: 30px;
}
layout-builder-container-component .snapshot-list .snapshot-container .favorite ng-md-icon {
  color: #9e9e9e;
}
layout-builder-container-component .snapshot-list .snapshot-container .favorite:hover ng-md-icon {
  color: #90caf9;
}
layout-builder-container-component .snapshot-list .snapshot-container .favorite.active ng-md-icon {
  color: #1e88e5;
}
layout-builder-container-component .snapshot-list .snapshot-container .image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 7px 10px;
}
layout-builder-container-component .snapshot-list .snapshot-container .image-container .snapshot-label {
  color: #616161;
  margin-bottom: 5px;
}
layout-builder-container-component .snapshot-list .snapshot-container .image-container .snapshot-image img {
  height: 70px;
  background-color: white;
  border: 1px solid rgb(215, 215, 215);
}
layout-builder-container-component .snapshot-list .snapshot-container .image-container .thumb-placeholder {
  height: 70px;
  width: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(215, 215, 215);
}
layout-builder-container-component .snapshot-list .snapshot-container .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
layout-builder-container-component .snapshot-list .snapshot-container .drag-handle {
  display: flex;
  justify-content: center;
}
layout-builder-container-component .snapshot-list .snapshot-container .drag-handle ng-md-icon {
  color: #9e9e9e;
}
layout-builder-container-component .snapshot-list .snapshot-container .drag-handle:hover ng-md-icon {
  color: #616161;
}
layout-builder-container-component .snapshot-list .snapshot-container .delete-snapshot {
  position: absolute;
  top: 5px;
  right: 1px;
}
layout-builder-container-component .snapshot-list .snapshot-container .delete-snapshot ng-md-icon {
  color: #9e9e9e;
}
layout-builder-container-component .snapshot-list .snapshot-container .delete-snapshot:hover ng-md-icon {
  color: #ffb74d;
}
layout-builder-container-component .snapshot-list .snapshot-container .drag-handle, layout-builder-container-component .snapshot-list .snapshot-container .delete-snapshot {
  opacity: 0;
  transition: opacity 0.2s;
}
layout-builder-container-component .snapshot-list .snapshot-container:hover {
  background-color: #e3f2fd;
}
layout-builder-container-component .snapshot-list .snapshot-container:hover .drag-handle, layout-builder-container-component .snapshot-list .snapshot-container:hover .delete-snapshot {
  opacity: 1;
}
layout-builder-container-component .snapshot-list .snapshot-container.selected {
  background-color: #bbdefb;
}

control-preset-manager {
  padding: 20px;
  display: flex;
  width: 100%;
}
control-preset-manager .control-details-container {
  max-width: 600px;
}
control-preset-manager .control-details-container .input-fields-section {
  display: none;
  background-color: #d9ebff;
  padding: 20px;
}
control-preset-manager .input-fields-only .controls-section {
  display: none;
}
control-preset-manager .col.input-fields-section {
  min-width: 500px;
  background-color: #d9ebff !important;
  border: solid 3px #0158bb;
  border-radius: 8px;
  padding-top: 40px;
  margin-top: 40PX;
  margin-bottom: 40PX;
}
control-preset-manager .col.input-fields-section md-input-container {
  margin-bottom: 30px !important;
}
control-preset-manager .col.input-fields-section .numeric-data {
  margin-bottom: 30px;
}
control-preset-manager .col.input-fields-section md-radio-group {
  margin-bottom: 25px;
}

style-builder-component {
  display: flex;
  flex-direction: column;
}
style-builder-component .template-select-container {
  margin: 0 20px;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}
style-builder-component .template-select-container .md-select-value {
  color: white;
  z-index: 1000;
}
style-builder-component .template-select-container md-input-container {
  margin: 0px;
}
style-builder-component .secondary-screen-header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #1976d2;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
style-builder-component .secondary-screen-header .spacer {
  flex: 1 1 auto;
}
style-builder-component .secondary-screen-content {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  background-color: #d2d6e0;
}
style-builder-component .col {
  padding: 10px;
  overflow: auto;
}
style-builder-component .col-1 {
  flex: 0 0 400px;
  background-color: #d9ebff;
  border: solid 5px #0158bb;
  border-radius: 8px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
style-builder-component .name-input {
  display: block;
  flex: 2;
  min-width: 220px;
  margin: 50px 0 0 0;
  background-color: #ffffff;
  border: #0158bb solid 2px;
  border-radius: 5px;
}
style-builder-component .name-input label {
  padding-top: 30px;
  font-weight: 800;
  font-size: 1.6rem;
  color: #0158bb !important;
}
style-builder-component .name-input textarea {
  font-weight: bold;
  color: #0158bb;
}
style-builder-component .template-select-compact {
  flex: 0 0 auto;
  margin-top: 50px;
}
style-builder-component .template-select-compact md-input-container {
  margin: 0;
  width: 40px !important;
  height: 40px !important;
}
style-builder-component .template-select-compact md-input-container .md-input {
  border-bottom: none !important;
}
style-builder-component .template-select-compact md-input-container:after {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container:before {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container .md-input-line {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container .md-input-focused .md-input-line {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container md-select {
  background-color: #ffffff;
  border: #0158bb solid 2px;
  border-radius: 5px;
  padding: 3px;
}
style-builder-component .template-select-compact md-input-container md-select:after, style-builder-component .template-select-compact md-input-container md-select:before {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container md-select .md-select-underline {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container md-select .md-select-value {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0158bb;
  min-height: 20px;
  border-bottom: none !important;
  width: 100% !important;
  max-width: 40px !important;
  z-index: 1000;
}
style-builder-component .template-select-compact md-input-container md-select .md-select-value.md-select-placeholder {
  border-bottom: none !important;
}
style-builder-component .template-select-compact md-input-container md-select .md-select-value.md-select-placeholder:after, style-builder-component .template-select-compact md-input-container md-select .md-select-value.md-select-placeholder:before {
  display: none !important;
}
style-builder-component .template-select-compact md-input-container md-select .md-select-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-170%, -50%) !important;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
}
style-builder-component .template-select-compact md-input-container md-select.md-focused {
  border-color: #0158bb;
}
style-builder-component .file-name {
  margin: 10px 3px;
  color: #616161;
  font-weight: 500;
  font-size: 0.8rem;
}
style-builder-component .file-name .file-name-label {
  font-size: 0.7rem;
  color: #9e9e9e;
  margin-bottom: 3px;
}
style-builder-component .images-container {
  margin: 20px 0;
  display: flex;
}
style-builder-component .template-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
style-builder-component .template-details .name-section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
style-builder-component .template-details > md-button {
  align-self: flex-start !important;
  margin: 5px 0 !important;
  min-width: auto !important;
}
style-builder-component .image-container {
  flex-shrink: 0;
  position: relative;
  margin-left: -10px;
  margin-top: 10px;
}
style-builder-component .image-container .label {
  font-size: 0.8em;
  margin-bottom: 5px;
}
style-builder-component .image-container img {
  height: 80px;
  max-width: 100%;
  padding-top: 10px;
}
style-builder-component .image-container .thumb-placeholder {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 245, 245);
  border: 1px solid rgb(215, 215, 215);
  border-radius: 5px;
}
style-builder-component .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
style-builder-component .image-container .ah-remove-button {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
}
style-builder-component .image-container:hover .ah-remove-button {
  opacity: 1;
}
style-builder-component .style-list {
  margin: -10px;
  padding: 8px;
  padding-bottom: 10px;
  background-color: #0158bb;
}
style-builder-component .dev-tools-section {
  margin-top: auto;
  padding: 10px;
}
style-builder-component .dev-tools-header {
  font-weight: bold;
  font-size: 0.9em;
  color: #0158bb;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
style-builder-component .download-button-container {
  padding-top: 10px;
  text-align: left;
}
style-builder-component .download-link-button {
  font-size: 0.6rem !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  text-align: left !important;
  display: inline-block !important;
}
style-builder-component .download-link-button span {
  font-size: 0.6rem !important;
}
style-builder-component .download-link-button ng-md-icon {
  font-size: 14px !important;
}
style-builder-component .style-list-simple {
  color: #666;
  font-size: 0.85em;
  line-height: 1.2;
}
style-builder-component .style-list-simple label {
  display: inline;
  margin-right: 8px;
}
style-builder-component .element-style-simple {
  display: inline;
  margin-right: 6px;
}
style-builder-component .element-style-simple:after {
  content: ", ";
}
style-builder-component .element-style-simple:last-child:after {
  content: "";
}
style-builder-component .style-details-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  max-width: 420px;
  min-width: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #0158bb rgba(255, 255, 255, 0);
  scrollbar-width: thin;
  border-left: 1px solid rgb(215, 215, 215);
  border-right: 1px solid rgb(215, 215, 215);
  background-color: #ffffff;
  border: solid 3px #0158bb;
  border-radius: 8px;
  margin: 8px;
}
style-builder-component .style-details-container.alert {
  border: 1px solid #ef5350;
}
style-builder-component .style-details-container.alert .style-details-header {
  background-color: #ef5350;
}
style-builder-component .section-header {
  width: 100%;
  font-weight: bold;
  font-size: 1.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
style-builder-component .section-header md-select {
  margin: 0;
}
style-builder-component .element-style, style-builder-component .control-list-item {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px 0 0 5px;
  padding: 5px 20px 5px 5px;
}
style-builder-component .element-style.selected, style-builder-component .control-list-item.selected {
  background-color: #0158bb !important;
}
style-builder-component .element-style.alert, style-builder-component .control-list-item.alert {
  border: 1px solid #ef5350;
  background-color: #ef5350;
}
style-builder-component .element-style.alert .index, style-builder-component .control-list-item.alert .index {
  background-color: #c62828;
}
style-builder-component .element-style:not(.selected), style-builder-component .control-list-item:not(.selected) {
  background-color: rgb(247, 247, 247);
  color: #616161;
}
style-builder-component .element-style:not(.selected) .md-button, style-builder-component .control-list-item:not(.selected) .md-button {
  color: #616161;
}
style-builder-component .element-style .grab-handle, style-builder-component .control-list-item .grab-handle {
  margin-right: 5px;
  opacity: 0.5;
}
style-builder-component .element-style .index, style-builder-component .control-list-item .index {
  flex: 0 0 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  margin-right: 6px;
  background-color: #0d47a1;
  line-height: 0;
  color: white;
}
style-builder-component .element-style .name, style-builder-component .control-list-item .name {
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
style-builder-component .element-style .md-button, style-builder-component .control-list-item .md-button {
  color: white;
}
style-builder-component .element-style .control-buttons, style-builder-component .control-list-item .control-buttons {
  display: flex;
}
style-builder-component .control-list-item {
  background-color: #757575;
}
style-builder-component .control-list-item .index {
  background-color: #424242;
}
style-builder-component .text-level-row {
  display: flex;
  gap: 5px;
}
style-builder-component .text-level-row .level-index {
  color: #9e9e9e;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
}
style-builder-component .text-level-row .level-label {
  flex: 2 0 auto;
}
style-builder-component .selection-group-container {
  margin-bottom: 30px;
}
style-builder-component .style-details-content md-input-container {
  margin: 16px 0 !important;
}
style-builder-component .style-details-content md-input-container label {
  margin-bottom: 0px !important;
}
style-builder-component .style-details-content .padding-adjust-container {
  display: flex;
  flex-direction: column;
}
style-builder-component .style-details-content .padding-adjust-container md-input-container {
  margin: 10px 0 !important;
}
style-builder-component .control-details-container {
  flex: 1 1 auto;
  background-color: #ffffff;
  border: solid 3px #0158bb;
  border-radius: 7px;
  margin: 8px;
  scrollbar-color: #0158bb rgba(255, 255, 255, 0);
  scrollbar-width: thin;
}
style-builder-component .control-details-container .control-details-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  gap: 0px;
  padding: 0px;
}
style-builder-component .control-details-container .control-details-layout .controls-section {
  flex: 1 1 50%;
  overflow: auto;
}
style-builder-component .control-details-container .control-details-layout .input-fields-section {
  flex: 1 1 50%;
  overflow: auto;
  background-color: #d9ebff;
  border-radius: 10px;
  border: solid 4px #0158bb;
  padding: 14px 10px 10px 10px;
  margin: 40px 0 40px 0;
}
style-builder-component .control-details-container .control-details-layout .input-fields-section md-input-container {
  margin-bottom: 10px !important;
}
style-builder-component .control-details-container .control-details-layout .input-fields-section .numeric-data {
  margin-bottom: 20px;
}
style-builder-component .control-details-container .control-details-layout .input-fields-section md-radio-group {
  margin-bottom: 30px;
}
style-builder-component .secondary-screen-content[ng-if*=controlPresets] .control-details-container {
  border: solid 0px red !important;
  background-color: #ffe6e6 !important;
}
style-builder-component .style-details-header, style-builder-component .control-details-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 36px;
  background-color: #1976d2;
  font-weight: bold;
  color: white;
}
style-builder-component .control-details-header {
  background-color: #616161;
}
style-builder-component .control-details-content {
  display: flex;
  flex-direction: column;
}
style-builder-component .control-details-content md-input-container {
  display: inline-block !important;
  width: 100%;
  background-color: #ffffff !important;
  border-radius: 5px !important;
  margin: 24px 0 !important;
}
style-builder-component .control-details-content md-input-container label {
  color: #0158bb !important;
  font-weight: 500;
  font-size: 1em !important;
  transform: translateY(-5px) !important;
}
style-builder-component .control-details-content md-input-container input, style-builder-component .control-details-content md-input-container input[type=number], style-builder-component .control-details-content md-input-container input[type=text], style-builder-component .control-details-content md-input-container textarea, style-builder-component .control-details-content md-input-container md-select {
  width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
style-builder-component .control-details-content md-input-container input[type=number] {
  width: 5em !important;
  margin-right: 10px !important;
}
style-builder-component .control-details-content md-radio-group label {
  display: block;
  margin-bottom: 10px;
}
style-builder-component .control-details-content md-radio-group md-radio-button {
  display: inline-block;
  margin-right: 10px;
}
style-builder-component .control-details-content .numeric-data {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
}
style-builder-component .control-details-content .numeric-data md-input-container {
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 100px;
  background-color: #ffffff !important;
  border-radius: 5px !important;
  margin: 20px 20px 20px 20px !important;
}
style-builder-component .control-details-content .numeric-data md-input-container input, style-builder-component .control-details-content .numeric-data md-input-container input[type=number] {
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 5px !important;
  margin: 0 !important;
}
style-builder-component .control-details-content .color-control .label {
  color: #616161;
  font-size: 0.8em;
  margin-bottom: 5px;
}
style-builder-component .control-details-content .gradient-control .gradient-block {
  border: 1px solid rgb(215, 215, 215);
  background-color: rgb(224, 224, 224);
  height: 200px;
  cursor: pointer;
}
style-builder-component .control-details-content .image-control .default-image-container {
  cursor: zoom-in;
}
style-builder-component .control-details-content .image-control .default-image-container img {
  max-width: 100%;
  border: 1px solid rgb(215, 215, 215);
}
style-builder-component .style-details-content {
  flex: none;
  display: block;
  overflow: visible;
}
style-builder-component .style-details-content .style-info {
  display: block;
  overflow: visible;
  padding: 10px;
}
style-builder-component .style-details-content .controls-list {
  display: block;
  overflow: visible;
  padding: 10px;
}
style-builder-component .type-select-container md-input-container {
  width: 100%;
}
style-builder-component .type-select-container md-input-container md-select {
  width: 100%;
}
style-builder-component .type-select-container md-input-container md-select md-select-value {
  width: 100%;
  max-width: none;
  z-index: 1000;
}
style-builder-component .type-select-container.auto-apply-select .md-text {
  display: flex;
}
style-builder-component .type-select-container.auto-apply-select .md-text .index {
  margin-right: 10px;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 4px;
  min-width: 20px;
  height: 20px;
  font-size: 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
}
style-builder-component .type-select-container.auto-apply-select .md-text .name {
  padding-top: 2px;
}
style-builder-component .control {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgb(215, 215, 215);
  padding: 5px;
  margin: 5px 0;
}
style-builder-component .control accordion-header .transclude-container {
  background-color: #757575;
}
style-builder-component .control accordion-header .transclude-container .index {
  background-color: #424242;
}
style-builder-component .control .control-row {
  margin-bottom: 10px;
}
style-builder-component .control md-radio-button {
  display: inline;
  margin-left: 10px;
}
style-builder-component .control input[type=number] {
  width: 4em;
  margin-right: 10px;
}
style-builder-component .control .text-control-values md-input-container {
  width: 100%;
}
style-builder-component .md-select-value {
  overflow: hidden;
  max-width: 225px;
}
style-builder-component .header-button {
  margin: 0px 10px;
  font-weight: normal;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0.8;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
style-builder-component .header-button:first-of-type {
  margin-left: 40px;
}
style-builder-component .header-button:hover {
  opacity: 1;
}
style-builder-component .header-button.active {
  opacity: 1;
  font-weight: bold;
}
style-builder-component .can-delete-toggle {
  margin: 50px 0 20px 0;
}
style-builder-component .control-presets-button {
  background-color: #0158bb !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 0.8em !important;
  padding: 0px 10px !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  min-height: 38px !important;
}
style-builder-component .control-presets-button:hover {
  background-color: #0146a3 !important;
}

.snippet-quick-select {
  max-width: 300px;
}

.style-builder-tag-select {
  max-width: 500px;
  border: 1px solid rgb(215, 215, 215);
}
.style-builder-tag-select .tag-label {
  color: #9e9e9e;
  margin-left: 10px;
}
.style-builder-tag-select .tag-option {
  color: #616161;
  margin-left: 10px;
}
.style-builder-tag-select .auto-apply-option .md-text {
  display: flex;
}
.style-builder-tag-select .auto-apply-option .md-text .index {
  margin-right: 10px;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 4px;
  min-width: 20px;
  height: 20px;
  font-size: 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.style-builder-tag-select .auto-apply-option .md-text .name {
  padding-top: 2px;
}

.md-select-menu-container {
  z-index: 1003 !important;
  background-color: #ffffff !important;
  border-radius: 5px !important;
}

sl-menu {
  z-index: 1040 !important;
}

.modal-dropdown-with-close,
sl-menu {
  z-index: 1050 !important;
  pointer-events: auto !important;
}

.control-presets-overlay .modal-dropdown-with-close:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background-color: #ffffff !important;
  opacity: 1 !important;
  border-bottom: 1px solid #e0e0e0;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.control-presets-overlay .modal-dropdown-with-close md-content {
  margin-top: 24px !important;
  padding-top: 0 !important;
  max-height: calc(100% - 24px) !important;
}
.control-presets-overlay .modal-dropdown-with-close md-content > * {
  margin-top: 0 !important;
}
.control-presets-overlay .modal-dropdown-with-close md-content > *:first-child {
  margin-top: 8px !important;
}
.control-presets-overlay .modal-dropdown-with-close md-content md-option:first-child {
  margin-top: 0 !important;
}

.dropdown-close-button {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  color: #666 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  background-color: transparent !important;
  z-index: 1002 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dropdown-close-button:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
}
.dropdown-close-button:before {
  content: "✕" !important;
}

.control-presets-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.control-presets-overlay style-builder-component .col-1 {
  margin: 0px !important;
}
.control-presets-overlay .overlay-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
  pointer-events: auto;
}
.control-presets-overlay.dropdown-active .overlay-backdrop {
  pointer-events: none;
}
.control-presets-overlay .overlay-modal {
  position: relative;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  width: 1000px;
  height: 768px;
  display: flex;
  flex-direction: column;
  z-index: 1001;
}
.control-presets-overlay .overlay-modal .overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 20px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  border-radius: 8px 8px 0 0;
}
.control-presets-overlay .overlay-modal .overlay-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
}
.control-presets-overlay .overlay-modal .overlay-header .overlay-close {
  color: #666;
}
.control-presets-overlay .overlay-modal .overlay-header .overlay-close:hover {
  color: #333;
}
.control-presets-overlay .overlay-modal .overlay-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  position: relative;
  display: flex;
  gap: 0;
}
.control-presets-overlay .overlay-modal .overlay-content .col-1 {
  max-height: 640px;
  max-width: 340px;
  overflow-y: hidden;
  background-color: #ffffff !important;
  border: solid 0px #0158bb !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0px !important;
}
.control-presets-overlay .overlay-modal .overlay-content .col-1 .section-header {
  flex: 0 0 auto;
}
.control-presets-overlay .overlay-modal .overlay-content .col-1 .style-list-container {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  direction: rtl;
}
.control-presets-overlay .overlay-modal .overlay-content .col-1 .style-list-container > * {
  direction: ltr;
}
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section {
  max-height: 640px;
  min-width: 540px;
  overflow-y: auto;
  padding: 10px !important;
  margin: 0 !important;
}
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section md-input-container {
  margin: 18px 0 !important;
}
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section md-input-container md-select,
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section md-input-container sl-menu {
  z-index: 1002;
  position: relative;
}
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section md-radio-group {
  margin-bottom: 10px !important;
}
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section .numeric-data {
  margin-bottom: 10px !important;
}
.control-presets-overlay .overlay-modal .overlay-content .input-fields-section .numeric-data md-input-container {
  margin: 8px 10px !important;
}

#add-user-dialog {
  width: 700px;
  max-width: 95%;
}
#add-user-dialog .warning {
  font-weight: bold;
  color: #f44336;
}

.ah-tools-panel:has(#align-tools) {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

#align-tools {
  background: #EDF1F4;
  border-radius: 8px;
  padding: 15px;
  padding-left: 0;
  box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.5);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: stretch;
}
#align-tools .drag-handle {
  width: 24px;
  align-self: stretch;
  cursor: move;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: -15px 16px -15px 0;
  padding: 0 4px;
  border-radius: 8px 0 0 8px;
  background: rgba(21, 142, 213, 0.08);
  background-image: radial-gradient(circle, #158ED5 2px, transparent 2px), radial-gradient(circle, #158ED5 2px, transparent 2px), radial-gradient(circle, #158ED5 2px, transparent 2px), radial-gradient(circle, #158ED5 2px, transparent 2px), radial-gradient(circle, #158ED5 2px, transparent 2px), radial-gradient(circle, #158ED5 2px, transparent 2px);
  background-size: 4px 4px;
  background-position: 7px calc(50% - 10px), 13px calc(50% - 10px), 7px 50%, 13px 50%, 7px calc(50% + 10px), 13px calc(50% + 10px);
  background-repeat: no-repeat;
}
#align-tools .drag-handle::before, #align-tools .drag-handle::after {
  content: "";
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#align-tools .drag-handle:hover {
  background-color: rgba(21, 142, 213, 0.15);
}
#align-tools .align-grid {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
#align-tools .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}
#align-tools .align-col {
  background-color: #F6F8FA;
  border-radius: 8px;
  padding: 0 8px 8px;
}
#align-tools .bg-col {
  background-color: #F6F8FA;
  border-radius: 8px;
  padding: 0 8px 8px;
}
#align-tools .align-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}
#align-tools .title-col {
  margin-top: 10px;
  margin-bottom: 2px;
}
#align-tools .align-title {
  font-size: 13px;
  font-weight: 700;
  color: #158ED5;
}
#align-tools sl-icon-button.align-btn {
  font-size: 28px;
}
#align-tools sl-icon-button.align-btn::part(base) {
  color: #158ED5;
  padding: 4px;
}
#align-tools sl-icon-button.align-btn::part(base):hover {
  color: #FFB74D;
}
#align-tools sl-tooltip::part(body) {
  background-color: rgba(44, 43, 43, 0.76);
  color: #EDEDED;
  font-size: 12px;
  padding: 4px 8px;
}
#align-tools .options-col {
  min-width: 180px;
  align-items: flex-start;
  padding: 10px 8px;
}
#align-tools .options-col-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
#align-tools .switch-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}
#align-tools .switch-label {
  font-size: 14px;
  color: #808080;
  font-weight: 500;
}
#align-tools .indented-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 12px;
  border-left: 2px solid #d9e2ea;
}
#align-tools .indented-options.hidden {
  visibility: hidden;
  pointer-events: none;
}
#align-tools sl-switch::part(control) {
  width: 48px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  box-sizing: border-box;
  background: #D5DCE7;
  border: 2px solid #EAF2F5;
  box-shadow: inset 2px 4px 4px 2px rgba(167, 180, 200, 0.17), -2px -4px 4px 0 rgba(255, 255, 255, 0.51), 2px 4px 10px 1px rgba(167, 180, 200, 0.56);
  display: flex;
  align-items: center;
  transition: all 0.25s ease;
}
#align-tools sl-switch.checked::part(control),
#align-tools sl-switch[checked]::part(control) {
  background: #90E8C1;
  border: 2px solid #EAF2F5;
  box-shadow: inset 2px 4px 4px 2px rgb(127, 205, 172), inset -2px -4px 4px 0 rgba(255, 255, 255, 0.01), 2px 4px 10px 1px rgba(167, 180, 200, 0.56);
}
#align-tools sl-switch::part(thumb) {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #EDF1F4;
  box-shadow: 0px 4px 8px rgba(121, 144, 173, 0.35), -2px -2px 4px rgba(255, 255, 255, 0.45);
  transition: transform 0.25s ease;
}
#align-tools sl-switch.checked::part(thumb),
#align-tools sl-switch[checked]::part(thumb) {
  transform: translateX(2px);
}
#align-tools sl-switch,
#align-tools sl-icon-button {
  outline: none !important;
}
#align-tools sl-switch::part(base):focus-visible {
  outline: none;
}
#align-tools .callout-options .options-col-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slide-style-details-panel {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  background: white;
  padding: 20px;
  overflow-y: auto;
  width: 450px;
}
.slide-style-details-panel .element-style-container {
  padding: 10px;
}
.slide-style-details-panel .element-style-container > md-input-container {
  width: 100%;
}
.slide-style-details-panel .group0 {
  border-left: 3px solid #90caf9;
}
.slide-style-details-panel .group1 {
  border-left: 3px solid #ffcc80;
}
.slide-style-details-panel .group2 {
  border-left: 3px solid #80cbc4;
}
.slide-style-details-panel .group3 {
  border-left: 3px solid #ffe082;
}
.slide-style-details-panel .group4 {
  border-left: 3px solid #9fa8da;
}
.slide-style-details-panel .missing {
  border: 2px solid red;
}
.slide-style-details-panel .top-row {
  display: flex;
}
.slide-style-details-panel .thumb-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
}
.slide-style-details-panel .thumb-container img {
  border: 1px solid #90a4ae;
  height: 70px;
}
.slide-style-details-panel .thumb-container .thumb-placeholder {
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(245, 245, 245);
}
.slide-style-details-panel .thumb-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
.slide-style-details-panel .thumb-container:hover .ah-remove-button, .slide-style-details-panel .thumb-container:hover .ah-add-button {
  opacity: 1;
}
.slide-style-details-panel .thumb-container:hover img {
  border: 3px solid #90caf9;
}
.slide-style-details-panel .setting-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.slide-style-details-panel .setting-info .setting-name {
  font-weight: bold;
  margin-bottom: 10px;
}
.slide-style-details-panel .controls-container {
  margin: 10px;
  border: 1px solid rgb(215, 215, 215);
}
.slide-style-details-panel .control {
  border-bottom: 1px solid rgb(215, 215, 215);
  padding: 10px 0;
}
.slide-style-details-panel .control .md-button {
  width: 100%;
  background-color: rgb(245, 245, 245);
}
.slide-style-details-panel .control md-input-container {
  margin: 0 5px;
}
.slide-style-details-panel .control > * {
  padding: 10px;
}
.slide-style-details-panel .control-info {
  padding: 0 10px;
}
.slide-style-details-panel .control-info .control-details {
  font-size: 0.9em;
}
.slide-style-details-panel .checkbox-control {
  padding: 5px 10px;
}
.slide-style-details-panel .number-control {
  display: flex;
  align-items: flex-start;
}
.slide-style-details-panel .number-control input {
  width: 3em;
}
.slide-style-details-panel .text-control {
  padding-top: 17px;
}
.slide-style-details-panel .text-control md-input-container {
  width: 100%;
}
.slide-style-details-panel .color-control {
  display: flex;
  align-items: center;
}
.slide-style-details-panel .color-control .control-info {
  flex: 1 1 auto;
}
.slide-style-details-panel .color-control input {
  width: 6em;
}

#artwork-select-dialog {
  max-height: 500px;
  overflow: auto;
}
#artwork-select-dialog .entry:hover {
  cursor: pointer;
  background-color: #bbdefb;
}
#artwork-select-dialog .entry:hover img:hover {
  outline: 1px solid #90a4ae;
}

#artwork-tools .drag-handle {
  border-top: 1px solid #9e9e9e;
  border-bottom: 1px solid #9e9e9e;
  height: 5px;
  margin-bottom: 10px;
  cursor: move;
}
#artwork-tools .item-count {
  color: #9e9e9e;
  cursor: pointer;
}
#artwork-tools .selected-tag-display {
  display: inline-block;
  min-width: 1.5em;
  padding: 0px 5px 1px 5px;
  border-radius: 8px;
  background-color: #9e9e9e;
  text-align: center;
  line-height: 1.3em;
  font-size: 0.8em;
  font-weight: bold;
  color: white;
  max-width: 70px;
  padding: 0px 8px;
  border-radius: 12px;
  font-size: 1em;
  line-height: 1.5em;
  transform: translateY(5px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#artwork-tools .show-art {
  border: 1px solid rgb(215, 215, 215);
  max-width: 440px;
  max-height: 500px;
  padding: 5px;
  overflow: auto;
  display: none;
}
#artwork-tools .show-art.show {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#artwork-tools .show-art .table-item {
  position: relative;
  text-align: center;
  border: 1px solid rgb(215, 215, 215);
}
#artwork-tools .show-art .table-item.selected {
  outline: 4px solid #42a5f5;
}
#artwork-tools .show-art .table-item .label {
  font-size: 0.8rem;
  padding: 5px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#artwork-tools .show-art .table-item .image-container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#artwork-tools .show-art .table-item .image-container img {
  border: none;
  max-width: 100%;
  max-height: 100%;
}
#artwork-tools .show-art .table-item .view-edit-tools {
  position: absolute;
  bottom: 3px;
  left: 3px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
}
#artwork-tools .show-art .table-item:hover .view-edit-tools {
  opacity: 1;
}
#artwork-tools .select-art-btn:disabled ng-md-icon {
  color: rgb(238, 238, 238);
}
#artwork-tools .select-art-btn:disabled:hover ng-md-icon {
  color: rgb(245, 245, 245);
}

.ah-art-tag-menu .tag-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0px 5px 1px 5px;
  border-radius: 8px;
  background-color: #9e9e9e;
  text-align: center;
  line-height: 1.3em;
  font-size: 0.8em;
  font-weight: bold;
  color: white;
}

.asterism-style-panel {
  display: flex;
  flex-direction: column;
  background: white;
  padding: 20px;
}
.asterism-style-panel .control-row {
  display: flex;
  align-items: flex-end;
  color: #616161;
  margin-bottom: 15px;
}
.asterism-style-panel .control-row md-input-container, .asterism-style-panel .control-row md-checkbox {
  margin: 0;
  width: 50px;
}
.asterism-style-panel .control-row .label {
  margin-left: 10px;
}
.asterism-style-panel .reset-button {
  display: flex;
  margin-top: 10px;
  cursor: pointer;
}
.asterism-style-panel .reset-button ng-md-icon {
  margin: 0;
}
.asterism-style-panel .reset-button .label {
  margin-left: 20px;
}
.asterism-style-panel .reset-button:hover {
  color: #ffb74d;
}
.asterism-style-panel hr {
  width: 100%;
  margin-top: 20px;
}

#autofill-data-editor-dialog {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  max-height: 650px;
  height: 80vh;
  min-width: 400px;
  max-width: 80vw;
  width: 850px;
  background-color: white;
  color: #9e9e9e;
}
#autofill-data-editor-dialog .header {
  flex: 0 0 50px;
  align-items: center;
  display: flex;
  padding: 10px;
  background-color: #1a237e;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
#autofill-data-editor-dialog .legal-name-field {
  padding: 5px 20px 0 20px;
}
#autofill-data-editor-dialog .legal-name-field md-input-container {
  width: 100%;
  padding: 0;
}
#autofill-data-editor-dialog .data-type-chooser {
  flex: 0 0 50px;
  align-items: center;
  display: flex;
}
#autofill-data-editor-dialog .data-type-chooser .data-type-link {
  padding: 10px;
  text-transform: capitalize;
}
#autofill-data-editor-dialog .content-container {
  display: flex;
  flex-direction: column;
  flex: 1 2 auto;
  overflow: hidden;
  padding: 10px;
}
#autofill-data-editor-dialog .add-new-link {
  margin-left: 6px;
}
#autofill-data-editor-dialog .data-container {
  overflow: auto;
}
#autofill-data-editor-dialog .data-container .data-item {
  display: flex;
  padding-right: 10px;
}
#autofill-data-editor-dialog .data-container .data-item md-input-container {
  margin: 5px 0;
}
#autofill-data-editor-dialog .data-container .data-item .label-input {
  flex: 1 1 auto;
}
#autofill-data-editor-dialog .panel-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 60px;
}

#background-select-dialog {
  max-height: 500px;
  overflow: auto;
}
#background-select-dialog .background-entry:hover {
  cursor: pointer;
  background-color: #bbdefb;
}
#background-select-dialog .background-entry:hover img:hover {
  outline: 1px solid #90a4ae;
}

#billing-dialog {
  max-width: 500px;
}
#billing-dialog .md-title, #billing-dialog .md-subheader {
  text-align: center;
}
#billing-dialog .source-select {
  width: 230px;
  margin: 40px auto;
  color: #9e9e9e;
}
#billing-dialog .source-select .md-checked {
  color: #616161;
}
#billing-dialog .description {
  color: #616161;
  margin: 0 20px;
}

#copy-dialog {
  max-width: 500px;
}

#preset-select-dialog {
  background-color: #f5f5f5;
  padding: 0;
  overflow: hidden;
  min-height: 530px;
}
#preset-select-dialog .drag-dialog {
  pointer-events: none;
  color: #9e9e9e;
  padding: 5px 10px;
}
#preset-select-dialog .drag-dialog hr {
  margin: 3px 0;
}
#preset-select-dialog .header {
  background-color: #757575;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 3px;
  margin-bottom: 5px;
}
#preset-select-dialog .snapshots-list-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 500px;
  padding: 5px;
  cursor: pointer;
}
#preset-select-dialog .snapshot-container {
  display: flex;
  align-items: center;
  position: relative;
  transition: background-color 0.2s;
}
#preset-select-dialog .snapshot-container .favorite {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  height: 30px;
}
#preset-select-dialog .snapshot-container .favorite ng-md-icon {
  color: #9e9e9e;
}
#preset-select-dialog .snapshot-container .favorite:hover ng-md-icon {
  color: #90caf9;
}
#preset-select-dialog .snapshot-container .favorite.active ng-md-icon {
  color: #1e88e5;
}
#preset-select-dialog .snapshot-container .image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 7px 10px;
}
#preset-select-dialog .snapshot-container .image-container .snapshot-label {
  color: #616161;
  margin-bottom: 5px;
  max-width: 120px;
  font-size: 0.9em;
}
#preset-select-dialog .snapshot-container .image-container .snapshot-image img {
  height: 70px;
  background-color: white;
  border: 1px solid rgb(215, 215, 215);
}
#preset-select-dialog .snapshot-container .image-container .thumb-placeholder {
  height: 70px;
  width: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(215, 215, 215);
}
#preset-select-dialog .snapshot-container .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
#preset-select-dialog .snapshot-container .image-container .edit-button {
  position: absolute;
  right: 15px;
  top: 33px;
  background: white;
}
#preset-select-dialog .snapshot-container:hover {
  background-color: #e3f2fd;
}

#dev-tools-dialog {
  width: 400px;
  display: flex;
  flex-direction: column;
}
#dev-tools-dialog .md-dialog-content {
  display: flex;
  flex-direction: column;
  flex: 2 1 auto;
}
#dev-tools-dialog .controls-panel, #dev-tools-dialog .data-panel {
  height: 100%;
}
#dev-tools-dialog.show-data {
  max-width: none;
  max-height: none;
  width: 95vw;
  height: 95vh;
}
#dev-tools-dialog .header {
  display: flex;
  font-size: 1.5em;
  padding: 10px;
}
#dev-tools-dialog .header > * {
  display: block;
}
#dev-tools-dialog .header .spacer {
  flex: 2 1 auto;
}
#dev-tools-dialog .header .back-button {
  flex: 0 0 auto;
  color: #9e9e9e;
  margin-right: 20px;
}
#dev-tools-dialog .content-body {
  padding: 10px;
}
#dev-tools-dialog .data-panel {
  display: flex;
  flex-direction: column;
}
#dev-tools-dialog .data-panel .content-body {
  flex: 2 1 auto;
}
#dev-tools-dialog .data-panel code, #dev-tools-dialog .data-panel .editable-data {
  height: 100%;
  width: 100%;
  display: block;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 9.5px;
  font-size: 1.1em;
  line-height: 1.42857143;
  white-space: pre;
}
#dev-tools-dialog .data-panel .editable-data {
  resize: none;
  overflow: auto;
}
#dev-tools-dialog .control-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  height: 46px;
}
#dev-tools-dialog .control-row .data-type, #dev-tools-dialog .control-row .link {
  display: inline-block;
  min-width: 120px;
  margin-left: 11px;
}
#dev-tools-dialog .control-row .md-button {
  min-width: auto;
  margin: 5px;
  color: #9e9e9e;
}
#dev-tools-dialog .control-row.slides-range input {
  width: 3em;
}

.logs-container {
  display: inline-block;
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.logs-container .log-table-body {
  overflow: auto;
  border: 1px solid rgb(215, 215, 215);
}
.logs-container .log-row {
  display: flex;
  border-bottom: 1px solid rgb(215, 215, 215);
}
.logs-container .log-row.header-row {
  background-color: rgb(224, 224, 224);
  font-weight: bold;
}
.logs-container .log-row:nth-child(odd) {
  background-color: rgb(238, 238, 238);
}
.logs-container .log-row > * {
  flex: 1 1 auto;
  padding: 5px;
  font-size: 0.9em;
}
.logs-container .log-row .message {
  flex: 0 1 33%;
}
.logs-container .log-row .index {
  flex: 0 0 30px;
}
.logs-container .log-row .spacer {
  flex: 2 0 auto;
}
.logs-container .log-row .webhook {
  flex: 0 0 150px;
}
.logs-container .log-row .date {
  flex: 0 0 200px;
}
.logs-container .log-row .duration {
  flex: 0 0 100px;
}
.logs-container .log-row .date {
  flex: 0 0 200px;
}
.logs-container .log-row.important {
  color: white;
  background-color: darkgrey;
  font-weight: bold;
}

#direct-form-nav-slideshow {
  display: flex;
  align-items: center;
}
#direct-form-nav-slideshow .text {
  margin-right: 10px;
}
#direct-form-nav-slideshow .direct-nav-input {
  width: 70px;
}
#direct-form-nav-slideshow .md-errors-spacer {
  display: none;
}

#doc-merge-mrimary-select-dialog .dialog-content {
  padding-bottom: 0;
  min-height: 250px;
  color: #616161;
}
#doc-merge-mrimary-select-dialog .dialog-content > * {
  margin-bottom: 10px;
}
#doc-merge-mrimary-select-dialog .dialog-content .header {
  font-size: 22px;
  font-weight: 500;
}
#doc-merge-mrimary-select-dialog .dialog-content .options-container {
  display: flex;
  margin-top: 20px;
}
#doc-merge-mrimary-select-dialog .dialog-content md-radio-group {
  margin-bottom: 20px;
}

#document-data-editor-dialog {
  display: flex;
  flex-direction: column;
  height: 90vh;
  width: 90vw;
  background-color: white;
  overflow: hidden;
}
#document-data-editor-dialog .header {
  flex: 0 0 50px;
  align-items: center;
  display: flex;
  padding: 10px;
  background-color: #1a237e;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
#document-data-editor-dialog .content-container {
  display: flex;
  flex-direction: column;
  flex: 1 2 auto;
  overflow: auto;
  padding: 10px;
}
#document-data-editor-dialog .section-label {
  color: #9e9e9e;
  font-weight: bold;
}
#document-data-editor-dialog .doc-info, #document-data-editor-dialog .version-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgb(215, 215, 215);
  padding: 10px;
}
#document-data-editor-dialog .doc-info {
  margin-bottom: 20px;
}
#document-data-editor-dialog .info-row {
  width: 45%;
  min-width: 300px;
  margin-bottom: 10px;
}
#document-data-editor-dialog .info-row .label {
  font-size: 0.8em;
  margin-right: 10px;
  color: #9e9e9e;
}
#document-data-editor-dialog .text-input {
  min-width: 300px;
  border: 1px solid rgb(215, 215, 215);
  padding: 5px;
}
#document-data-editor-dialog .info-row {
  display: flex;
  align-items: center;
}
#document-data-editor-dialog .thumb-container {
  cursor: pointer;
  border: 1px solid rgb(215, 215, 215);
  align-self: flex-start;
}
#document-data-editor-dialog .version-list-item {
  border: 1px solid rgb(215, 215, 215);
  margin-bottom: 10px;
}
#document-data-editor-dialog .version-list-item .version-list-item-header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: 20px;
       column-gap: 20px;
  padding: 10px 10px 10px 30px;
}
#document-data-editor-dialog .version-list-item .version-list-item-header .accordion-open-button {
  position: absolute;
  top: 5px;
  left: 5px;
}
#document-data-editor-dialog .version-list-item .current-version-label {
  flex: 0 0 100%;
  background: #64b5f6;
  color: white;
  padding: 5px;
  font-weight: bold;
}
#document-data-editor-dialog .version-list-item.current-version {
  border: 5px solid #64b5f6;
}
#document-data-editor-dialog .version-list-item .version-list-item-content {
  padding: 10px 10px 10px 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
}
#document-data-editor-dialog .version-list-item .version-list-item-content > * {
  width: 300px;
}
#document-data-editor-dialog .document-ocr-data {
  font-size: 0.9em;
  color: #9e9e9e;
  padding: 0 5px;
}
#document-data-editor-dialog .document-ocr-data .data-value {
  font-weight: bold;
}
#document-data-editor-dialog .document-ocr-data.ocr-complete {
  color: #43a047;
}
#document-data-editor-dialog .document-ocr-data.ocr-processing {
  animation: pulse 3s infinite;
  font-weight: bold;
}
#document-data-editor-dialog .panel-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 60px;
}
#document-data-editor-dialog .starting-page-input {
  width: 70px;
}

#download-dialog {
  width: 650px;
  min-width: 500px;
}
#download-dialog .controls-container {
  border: 1px solid rgb(215, 215, 215);
  padding: 10px;
}
#download-dialog .control-row {
  padding: 10px 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: #9e9e9e;
}
#download-dialog .control-row .md-button {
  margin: 0;
  width: 250px;
  height: 100%;
}
#download-dialog .control-row .settings {
  width: 150px;
}
#download-dialog .control-row .slidenumber {
  margin-left: 10px;
}
#download-dialog .control-row md-input-container {
  margin: 0 10px;
}
#download-dialog .control-row md-input-container .md-errors-spacer {
  display: none;
}
#download-dialog .control-row md-input-container .md-input {
  border-bottom: 1px solid #1565c0;
  min-width: 50px;
}
#download-dialog .control-row md-input-container.filename, #download-dialog .control-row md-input-container.control-text-input {
  flex: 1 1 auto;
  margin: 0 10px;
}
#download-dialog .control-row .control-value {
  flex: 1 1 auto;
  margin: 0 10px;
  display: flex;
}
#download-dialog .control-row .char-count {
  margin-top: 10px;
  font-size: 0.9em;
  color: #9e9e9e;
}

.download-doxctemplate-select {
  z-index: 1000;
}

#download-progress {
  width: 300px;
  height: 80px;
  color: #616161;
  font-size: 0.8em;
}
#download-progress .header {
  font-weight: bold;
  margin-bottom: 5px;
}
#download-progress md-progress-linear {
  margin: 10px 0;
  background-color: #eeeeee;
}
#download-progress md-progress-linear .md-bar1 {
  opacity: 0.2 !important;
  background-color: #212121;
  z-index: 100;
}
#download-progress .display-data {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

#edit-calendar-item .data {
  background-color: #eeeeee;
  padding: 10px;
}
#edit-calendar-item md-dialog-content {
  min-width: 396px;
}
#edit-calendar-item md-content {
  background-color: white;
}
#edit-calendar-item .md-block {
  width: 100%;
}

#element-block-panel {
  max-width: 95vw;
  min-width: 600px;
  max-height: 95vh;
  background-color: white;
}
#element-block-panel .block-template-container .element-header > * {
  cursor: default;
}
#element-block-panel .header-panel {
  line-height: 1;
  font-size: initial;
}
#element-block-panel .editor-container, #element-block-panel .textarea {
  font-size: 1.3rem;
}
#element-block-panel text-details {
  display: block;
  width: 80vw;
  height: 80vh;
}
#element-block-panel text-details .text-details-content {
  max-height: none;
  height: 100%;
}
#element-block-panel text-details .text-content-container ah-ng-text-field {
  height: 100%;
}
#element-block-panel text-details .text-content-container ah-ng-text-field ah-text-field {
  height: 100%;
}
#element-block-panel .thumb-container {
  flex: 0 0 100%;
  height: auto;
  width: auto;
  padding: 10px;
}
#element-block-panel .ah-action-button.open-styles-button, #element-block-panel .ah-action-button.smart-paste-button {
  width: auto;
  gap: 5px;
  justify-content: center;
  padding: 0 5px;
  cursor: pointer;
  opacity: 1;
}
#element-block-panel .ah-action-button.open-styles-button .style-label, #element-block-panel .ah-action-button.smart-paste-button .style-label {
  display: flex;
  align-items: center;
  opacity: 0.4;
  color: #616161;
}
#element-block-panel .ah-action-button.open-styles-button ng-md-icon, #element-block-panel .ah-action-button.smart-paste-button ng-md-icon {
  opacity: 0.4;
}
#element-block-panel .ah-action-button.open-styles-button:hover .style-label, #element-block-panel .ah-action-button.open-styles-button:hover ng-md-icon, #element-block-panel .ah-action-button.smart-paste-button:hover .style-label, #element-block-panel .ah-action-button.smart-paste-button:hover ng-md-icon {
  opacity: 0.6;
}
#element-block-panel .ah-action-button.smart-paste-button {
  padding: 0 10px;
  margin-right: 10px;
}
#element-block-panel .panel-actions {
  display: flex;
  justify-content: flex-end;
}

.fullscreen-image-panel {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullscreen-image-panel > div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  cursor: zoom-out;
}
.fullscreen-image-panel > div img {
  background: white;
  transform: scale(2);
  max-width: 46vw;
  max-height: 46vh;
  outline: none;
}
.fullscreen-image-panel > div .info-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: white;
  min-width: auto;
  padding: 2px;
}
.fullscreen-image-panel > div .info-button ng-md-icon {
  color: #9e9e9e;
  transition: color 0.15s linear;
}
.fullscreen-image-panel > div .info-button:hover {
  background-color: #fafafa;
}
.fullscreen-image-panel > div .info-button:hover ng-md-icon {
  color: #ffb74d;
}

.gradient-picker-panel {
  width: 250px;
  background-color: white;
}
.gradient-picker-panel .button-container {
  display: flex;
  justify-content: space-between;
}

#form-history-dialog {
  min-width: 800px;
  display: flex;
  flex-direction: column;
}
#form-history-dialog md-toolbar {
  color: white;
  background-color: #546e7a;
}
#form-history-dialog md-toolbar .md-toolbar-tools {
  font-weight: bold;
}
#form-history-dialog md-dialog-content {
  color: #9e9e9e;
  max-height: 80vh;
  min-height: 300px;
}
#form-history-dialog .status-icon {
  color: #616161;
}

#import-callout-mask-dialog {
  max-width: 90vw;
}
#import-callout-mask-dialog .layout-container {
  display: flex;
  flex-wrap: wrap;
}
#import-callout-mask-dialog .group-container {
  flex: 0 1 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#import-callout-mask-dialog .image-container {
  display: flex;
  align-items: center;
  border: 1px solid #757575;
  background-image: url(./../assets/checkerboard.svg);
  background-size: 24px;
  background-repeat: repeat;
  margin: 10px;
  padding: 5px;
}
#import-callout-mask-dialog .image-container img {
  width: 100%;
}
#import-callout-mask-dialog .image-container.selected {
  outline: 4px solid #42a5f5;
  box-shadow: 6px 6px 6px 0 #ccc;
}

.invite-select-panel {
  max-height: 600px;
  background: white;
  width: 250px;
}

#label-preset-select-dialog {
  background-color: #f5f5f5;
  padding: 0;
  overflow: hidden;
  min-height: 530px;
  width: 200px;
}
#label-preset-select-dialog .header {
  background-color: #757575;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 3px;
  margin-bottom: 5px;
}
#label-preset-select-dialog .create-new-button {
  display: flex;
  justify-content: stretch;
  border: 3px solid rgb(224, 224, 224);
  background-color: white;
  cursor: pointer;
  border-radius: 10px;
  margin: 3px;
  padding: 5px;
}
#label-preset-select-dialog .create-new-button ng-md-icon {
  color: #616161;
}
#label-preset-select-dialog .create-new-button:hover {
  background-color: rgb(242, 242, 242);
}
#label-preset-select-dialog .create-new-button:active {
  background-color: rgb(238, 238, 238);
}
#label-preset-select-dialog .list-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 500px;
  padding: 5px;
  cursor: pointer;
}
#label-preset-select-dialog .item-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s;
}
#label-preset-select-dialog .item-container .favorite {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  height: 30px;
}
#label-preset-select-dialog .item-container .favorite ng-md-icon {
  color: #9e9e9e;
}
#label-preset-select-dialog .item-container .favorite:hover ng-md-icon {
  color: #90caf9;
}
#label-preset-select-dialog .item-container .favorite.active ng-md-icon {
  color: #1e88e5;
}
#label-preset-select-dialog .item-container .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 7px 10px;
  width: 122px;
  height: 70px;
  border: 1px solid rgb(215, 215, 215);
  background-color: white;
}
#label-preset-select-dialog .item-container .image-container img {
  max-width: 95%;
  max-height: 95%;
  background-color: white;
}
#label-preset-select-dialog .item-container .image-placeholder-container {
  margin: 7px 10px;
  height: 70px;
  width: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(215, 215, 215);
}
#label-preset-select-dialog .item-container .image-placeholder-container ng-md-icon {
  color: rgb(189, 189, 189);
}
#label-preset-select-dialog .item-container:hover {
  background-color: #e3f2fd;
}

#layout-select-dialog {
  background-color: #f5f5f5;
  padding: 0;
  overflow: hidden;
  min-height: 530px;
}
#layout-select-dialog .drag-dialog {
  pointer-events: none;
  color: #9e9e9e;
  padding: 5px 10px;
}
#layout-select-dialog .drag-dialog hr {
  margin: 3px 0;
}
#layout-select-dialog .header {
  background-color: #757575;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 3px;
  margin-bottom: 5px;
}
#layout-select-dialog .snapshots-list-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 500px;
  padding: 5px;
  cursor: pointer;
}
#layout-select-dialog .snapshot-container {
  display: flex;
  align-items: center;
  position: relative;
  transition: background-color 0.2s;
}
#layout-select-dialog .snapshot-container .snapshot-tools {
  display: flex;
  flex-direction: column;
}
#layout-select-dialog .snapshot-container .favorite, #layout-select-dialog .snapshot-container .edit-button {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  height: 30px;
}
#layout-select-dialog .snapshot-container .favorite ng-md-icon, #layout-select-dialog .snapshot-container .edit-button ng-md-icon {
  color: #9e9e9e;
}
#layout-select-dialog .snapshot-container .favorite:hover ng-md-icon, #layout-select-dialog .snapshot-container .edit-button:hover ng-md-icon {
  color: #90caf9;
}
#layout-select-dialog .snapshot-container .favorite.active ng-md-icon, #layout-select-dialog .snapshot-container .edit-button.active ng-md-icon {
  color: #1e88e5;
}
#layout-select-dialog .snapshot-container .image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 7px 10px;
}
#layout-select-dialog .snapshot-container .image-container .snapshot-label {
  color: #616161;
  margin-bottom: 5px;
  max-width: 120px;
  font-size: 0.9em;
}
#layout-select-dialog .snapshot-container .image-container .snapshot-image img {
  height: 70px;
  background-color: white;
  border: 1px solid rgb(215, 215, 215);
}
#layout-select-dialog .snapshot-container .image-container .thumb-placeholder {
  height: 70px;
  width: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(215, 215, 215);
}
#layout-select-dialog .snapshot-container .image-container .thumb-placeholder ng-md-icon {
  color: rgb(189, 189, 189);
}
#layout-select-dialog .snapshot-container:hover {
  background-color: #e3f2fd;
}
#layout-select-dialog .create-new-button {
  display: flex;
  justify-content: stretch;
  border: 3px solid rgb(224, 224, 224);
  background-color: white;
  cursor: pointer;
  border-radius: 10px;
  margin: 3px;
  padding: 5px;
}
#layout-select-dialog .create-new-button ng-md-icon {
  color: #616161;
}
#layout-select-dialog .create-new-button:hover {
  background-color: rgb(242, 242, 242);
}
#layout-select-dialog .create-new-button:active {
  background-color: rgb(238, 238, 238);
}

#new-project-dialog {
  width: 500px;
  color: #616161;
}
#new-project-dialog .md-dialog-content {
  display: flex;
  flex-direction: column;
}
#new-project-dialog .project-name {
  width: 100%;
  margin-bottom: 30px;
}
#new-project-dialog .project-name .md-errors-spacer {
  display: none;
}
#new-project-dialog .controls-row {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
}

.default-design-select-popup {
  z-index: 110;
}
.default-design-select-popup .design-project-name {
  font-size: 0.9em;
  color: #9e9e9e;
}

.ocr-menu-panel {
  min-width: 300px;
}
.ocr-menu-panel .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  cursor: move;
}
.ocr-menu-panel .close-button {
  position: absolute;
  top: 7px;
  right: 5px;
  cursor: pointer;
  color: #9e9e9e;
}
.ocr-menu-panel .close-button:hover {
  color: #616161;
}
.ocr-menu-panel .menu-row {
  display: flex;
  align-items: center;
}
.ocr-menu-panel .menu-row .md-button {
  margin: 4px 0;
  width: 100%;
  text-align: left;
}
.ocr-menu-panel .menu-row .md-button:not([disabled]) {
  color: #616161;
}
.ocr-menu-panel .menu-row .md-button:not([disabled]) ng-md-icon {
  color: #9e9e9e;
}
.ocr-menu-panel .menu-row input {
  margin: 0 5px;
}
.ocr-menu-panel .document-ocr-data {
  font-size: 0.9em;
  color: #9e9e9e;
  padding: 0 5px;
}
.ocr-menu-panel .document-ocr-data .data-value {
  font-weight: bold;
}
.ocr-menu-panel .document-ocr-data.ocr-complete {
  color: #43a047;
}
.ocr-menu-panel .document-ocr-data.ocr-processing {
  animation: pulse 3s infinite;
  font-weight: bold;
}
.ocr-menu-panel .show-more-accordion .ah-toggle-button.label {
  justify-content: center;
}

#open-alternate-doc-version-dialog .dialog-content {
  padding-bottom: 0;
  min-height: 250px;
  color: #616161;
}
#open-alternate-doc-version-dialog .dialog-content > * {
  margin-bottom: 10px;
}
#open-alternate-doc-version-dialog .dialog-content .header {
  font-size: 22px;
  font-weight: 500;
}
#open-alternate-doc-version-dialog .dialog-content .options-container {
  display: flex;
  margin-top: 20px;
}
#open-alternate-doc-version-dialog .dialog-content md-radio-group {
  margin-bottom: 20px;
}

.outline-copy-panel {
  display: flex;
  flex-direction: column;
  height: 90vh;
  width: 90vw;
  background: white;
}
.outline-copy-panel.expanded {
  min-height: 100vh;
  max-height: 100vh;
  min-width: 100vw;
}
.outline-copy-panel .chooser-header {
  background: #0277bd;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
}
.outline-copy-panel .chooser-header .chooser-title {
  color: white;
  font-weight: bold;
}
.outline-copy-panel .content {
  display: flex;
  overflow: hidden;
}
.outline-copy-panel .panel-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 50px;
  border-top: 1px solid rgb(215, 215, 215);
}
.outline-copy-panel .panel-controls .spinner-container {
  margin: 0 20px;
}

#page-switch-tools .drag-handle {
  border-top: 1px solid #9e9e9e;
  border-bottom: 1px solid #9e9e9e;
  height: 5px;
  margin-bottom: 10px;
  cursor: move;
}
#page-switch-tools .item-count {
  color: #9e9e9e;
  cursor: pointer;
}
#page-switch-tools .selected-tag-display {
  display: inline-block;
  min-width: 1.5em;
  padding: 0px 5px 1px 5px;
  border-radius: 8px;
  background-color: #9e9e9e;
  text-align: center;
  line-height: 1.3em;
  font-size: 0.8em;
  font-weight: bold;
  color: white;
  max-width: 70px;
  padding: 0px 8px;
  border-radius: 12px;
  font-size: 1em;
  line-height: 1.5em;
  transform: translateY(5px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#page-switch-tools .show-art {
  border: 1px solid rgb(215, 215, 215);
  max-width: 410px;
  max-height: 500px;
  overflow: auto;
  display: none;
  padding: 10px;
}
#page-switch-tools .show-art.show {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#page-switch-tools .show-art .art-img {
  position: relative;
  display: inline-block;
  border: 1px solid rgb(215, 215, 215);
}
#page-switch-tools .show-art .art-img.selected {
  outline: 4px solid #42a5f5;
}
#page-switch-tools .show-art .art-img img {
  border: none;
  max-width: 110px;
  max-height: 90px;
}
#page-switch-tools .show-art .art-img .view-edit-tools {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
}
#page-switch-tools .show-art .art-img:hover .view-edit-tools {
  opacity: 1;
}
#page-switch-tools .select-art-btn:disabled ng-md-icon {
  color: rgb(238, 238, 238);
}
#page-switch-tools .select-art-btn:disabled:hover ng-md-icon {
  color: rgb(245, 245, 245);
}

#pinning-controls {
  border: 1px solid rgb(215, 215, 215);
}
#pinning-controls .pinning-radio-group {
  width: 72px;
  display: flex;
  flex-wrap: wrap;
}
#pinning-controls .pinning-radio-group md-radio-button {
  margin: 2px;
  width: 20px;
  height: 20px;
}

#project-info-panel {
  width: 400px;
  background-color: white;
}
#project-info-panel .header {
  background-color: #1565c0;
}
#project-info-panel .layout-container {
  display: inline-block;
  width: 100%;
}
#project-info-panel .preview-image {
  width: 100%;
  max-height: 100%;
}

#update-artwork-dialog {
  max-width: 850px;
  width: 95%;
}
#update-artwork-dialog md-input-container {
  margin: 0;
}
#update-artwork-dialog md-input-container:first-child {
  margin-right: 5px;
}
#update-artwork-dialog md-input-container:last-child {
  margin-left: 5px;
}
#update-artwork-dialog md-input-container .md-errors-spacer {
  display: none;
}
#update-artwork-dialog md-input-container .md-input {
  border-bottom: 1px solid #1565c0;
}
#update-artwork-dialog .md-dialog-content {
  color: #9e9e9e;
  padding-bottom: 0;
}
#update-artwork-dialog .md-dialog-content .md-title {
  display: inline-block;
  font-size: 16px;
  margin-bottom: 8px;
}
#update-artwork-dialog .md-dialog-content .file-table {
  border: 1px solid rgb(215, 215, 215);
  padding: 10px;
  margin: 10px 0;
}
#update-artwork-dialog .md-dialog-content .file-table .md-column {
  padding: 0 0 10px 0;
  border-bottom: #9e9e9e;
  color: #9e9e9e;
}
#update-artwork-dialog .md-dialog-content .file-table .md-row {
  height: auto;
}
#update-artwork-dialog .md-dialog-content .file-table .md-cell {
  color: #616161;
  border: none;
  padding: 0 10px 0 0;
}
#update-artwork-dialog .md-dialog-content .file-table .md-cell.remove {
  width: 10px;
}
#update-artwork-dialog .md-dialog-content .file-table .md-cell.filename {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#update-artwork-dialog .md-dialog-content .file-table .md-cell.name {
  max-width: 300px;
  min-width: 200px;
  padding-right: 20px;
}
#update-artwork-dialog .md-dialog-content .file-table .md-cell.name md-input-container {
  width: 100%;
  margin: 0;
}
#update-artwork-dialog .md-dialog-content .file-table .md-cell.range {
  width: 150px;
  min-width: 150px;
}
#update-artwork-dialog .md-dialog-content .file-table .md-errors-spacer {
  min-height: 0;
}
#update-artwork-dialog .md-dialog-content .option-row {
  margin: 20px 0;
}
#update-artwork-dialog .md-dialog-content .option-row > *:first-child {
  margin-right: 20px;
}
#update-artwork-dialog .md-dialog-content .option-row tag-chooser {
  width: 70%;
}
#update-artwork-dialog .md-dialog-content .option-row .confidential-switch {
  zoom: 1.3;
  margin-top: 7px;
}
#update-artwork-dialog .md-dialog-content .option-row hotness {
  margin-top: 10px;
  zoom: 0.8;
}
#update-artwork-dialog .md-dialog-content .option-row md-input-container {
  width: 80%;
}
#update-artwork-dialog .md-dialog-content md-progress-linear {
  margin-top: 15px;
  margin-bottom: 15px !important;
}
#update-artwork-dialog md-dialog-actions {
  margin-top: 20px;
}

#save-document-dialog {
  width: 90%;
  max-width: 800px;
}
#save-document-dialog .dialog-content {
  color: #616161;
}
#save-document-dialog .dialog-content .header {
  font-size: 22px;
  font-weight: 500;
}
#save-document-dialog .dialog-content .options-container {
  margin-top: 20px;
}
#save-document-dialog .dialog-content md-radio-group {
  margin: 20px;
}
#save-document-dialog .dialog-content .info-row {
  display: flex;
  width: 45%;
  min-width: 300px;
  margin-bottom: 10px;
}
#save-document-dialog .dialog-content .info-row .label {
  font-size: 0.8em;
  margin-right: 10px;
  color: #9e9e9e;
}
#save-document-dialog .dialog-content .hotness {
  margin: 10px 0;
}
#save-document-dialog .dialog-content .tags {
  margin: 0 20px 20px 0;
}

#sharing-dialog {
  width: 650px;
}
#sharing-dialog::-webkit-scrollbar {
  display: none;
}
#sharing-dialog .sharing-header {
  background-color: #039be5;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  position: relative;
}
#sharing-dialog .sharing-header ::-moz-placeholder {
  color: white;
}
#sharing-dialog .sharing-header ::placeholder {
  color: white;
}
#sharing-dialog .sharing-header md-chips.md-default-theme .md-chips,
#sharing-dialog .sharing-header md-chips .md-chips {
  box-shadow: 0 1px white;
}
#sharing-dialog .sharing-header md-chips-wrap {
  margin-right: 100px;
}
#sharing-dialog .sharing-header .md-button {
  position: absolute;
  margin: 0;
  right: 24px;
}
#sharing-dialog .sharing-header input {
  color: white;
  caret-color: currentColor;
}
#sharing-dialog .sharing-body {
  transition: 0.5s ease-out height;
}
#sharing-dialog .sharing-body.ng-hide {
  display: block !important;
  height: 0;
}
#sharing-dialog md-toolbar {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
#sharing-dialog md-toolbar .md-button {
  margin: 0;
}
#sharing-dialog md-toolbar .md-toolbar-tools {
  justify-content: space-between;
}
#sharing-dialog md-toolbar.alternate {
  background-color: #f44336;
}
#sharing-dialog md-toolbar.alternate .md-button {
  color: white;
}
#sharing-dialog tag-chooser {
  width: 100%;
}
#sharing-dialog .following-status {
  color: #86e286;
}

#slide-context-menu {
  min-width: 300px;
  background-color: white;
}
#slide-context-menu .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  cursor: move;
}
#slide-context-menu .menu-row {
  display: flex;
  align-items: center;
}
#slide-context-menu .menu-row.snapping, #slide-context-menu .menu-row.value-only, #slide-context-menu .menu-row.checkbox {
  margin-top: 8px;
  margin-bottom: 10px;
  padding-left: 15px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}
#slide-context-menu .menu-row.snapping .label, #slide-context-menu .menu-row.value-only .label, #slide-context-menu .menu-row.checkbox .label {
  padding: 2px 0 0 0;
  flex: 2 1 auto;
}
#slide-context-menu .menu-row.snapping md-select, #slide-context-menu .menu-row.value-only md-select, #slide-context-menu .menu-row.checkbox md-select {
  margin: 0;
  width: 130px;
}
#slide-context-menu .menu-row.pickup-apply-position-controls, #slide-context-menu .menu-row.top-row {
  border-bottom: 1px solid rgb(215, 215, 215);
}
#slide-context-menu .menu-row.indent {
  margin-left: 20px;
}
#slide-context-menu .number-input {
  width: 50px;
  height: 30px;
  margin-right: 5px;
}
#slide-context-menu .md-button {
  min-width: auto;
  text-align: left;
  margin: 6px;
}
#slide-context-menu .md-button:not([disabled]) {
  color: #101214;
}
#slide-context-menu .md-button:not([disabled]) ng-md-icon {
  color: #101214;
}
#slide-context-menu .md-button.active {
  color: #ff8a65;
}
#slide-context-menu .md-button.full-row {
  width: 100%;
}
#slide-context-menu .top-row {
  padding: 5px 10px 10px 10px;
}
#slide-context-menu .top-row .md-button {
  border-radius: 50%;
  background-color: #42a5f5;
  min-width: auto;
  min-height: auto;
  width: 28px;
  height: 28px;
  padding: 3px;
  margin: 0;
  margin-right: 28px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
#slide-context-menu .top-row .md-button ng-md-icon {
  min-width: auto;
  margin: 0;
  color: white !important;
}
#slide-context-menu .top-row .md-button:not([disabled]):hover {
  background-color: #1e88e5;
}
#slide-context-menu .top-row .md-button[disabled] {
  background-color: #bdbdbd;
}
#slide-context-menu .row-icon {
  margin-left: 10px;
  display: flex;
  color: #616161;
}
#slide-context-menu md-checkbox {
  margin: 8px 0;
}
#slide-context-menu .label-container {
  display: flex;
  padding: 0 6px;
  align-items: center;
  color: #616161;
  font-size: 14px;
  font-weight: 500;
}
#slide-context-menu ng-md-icon {
  min-width: 24px;
  margin-right: 5px;
}
#slide-context-menu .row-label {
  padding-top: 3px;
  color: #616161;
  margin-right: 10px;
}
#slide-context-menu .row-label.section-header-label {
  margin: 15px 0;
}
#slide-context-menu .layer-button {
  text-align: center;
}
#slide-context-menu .layer-button ng-md-icon {
  margin: 0;
}

.slide-style-details-panel {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  background: white;
  padding: 20px;
  overflow-y: auto;
}
.slide-style-details-panel .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  cursor: move;
}
.slide-style-details-panel .template-container {
  padding: 10px 0;
  color: #616161;
}
.slide-style-details-panel .asset-header {
  color: #9e9e9e;
  margin: 10px 0;
  font-weight: bold;
  font-size: 0.8em;
}
.slide-style-details-panel .assets-container .horiz-rule {
  border-top: 1px solid rgb(215, 215, 215);
}
.slide-style-details-panel .assets-container accordion-content > .transclude-container:not(.is-hidden) {
  padding: 10px 0;
  border-bottom: 1px solid rgb(215, 215, 215);
}
.slide-style-details-panel .assets-container.animated {
  transition: all 0.8s ease-in-out;
}
.slide-style-details-panel .section-divider {
  width: 100%;
}
.slide-style-details-panel .settings-btn {
  align-self: flex-start;
  margin: 4px 0;
}
.slide-style-details-panel .settings-btn ng-md-icon {
  min-width: 25px;
  transform: translateY(-2px);
  color: #9e9e9e;
  margin-right: 6px;
}
.slide-style-details-panel .settings-btn.on {
  color: #ff8a65;
}
.slide-style-details-panel .settings-btn.on ng-md-icon {
  color: #ff8a65;
}
.slide-style-details-panel .resolution-input {
  width: 80px;
  margin: 0;
}
.slide-style-details-panel .element-styles-container > md-input-container {
  width: 100%;
}
.slide-style-details-panel .create-layout-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.slide-style-details-panel .group0 {
  border-left: 3px solid #90caf9;
}
.slide-style-details-panel .group1 {
  border-left: 3px solid #ffcc80;
}
.slide-style-details-panel .group2 {
  border-left: 3px solid #80cbc4;
}
.slide-style-details-panel .group3 {
  border-left: 3px solid #ffe082;
}
.slide-style-details-panel .group4 {
  border-left: 3px solid #9fa8da;
}
.slide-style-details-panel .missing {
  border: 2px solid red;
}
.slide-style-details-panel .background-quick-select-container .md-select-value {
  border: none !important;
}
.slide-style-details-panel .background-quick-select-container .md-select-value > span:first-child {
  display: none;
}

#slide-title-panel {
  min-width: 600px;
  max-height: 90vh;
}
#slide-title-panel .notes-field {
  min-height: 600px;
}
#slide-title-panel .editor-container {
  font-size: 1.3em;
}

#slideshow-tools-menu {
  background-color: white;
}
#slideshow-tools-menu .menu-row {
  display: flex;
}
#slideshow-tools-menu .md-button {
  min-width: auto;
  text-align: left;
  margin: 6px;
}
#slideshow-tools-menu .md-button.active {
  color: #ff8a65;
}
#slideshow-tools-menu .md-button.full-row {
  width: 100%;
}
#slideshow-tools-menu .row-icon {
  margin-left: 10px;
  display: flex;
  color: #616161;
}
#slideshow-tools-menu ng-md-icon {
  min-width: 24px;
  margin-right: 5px;
}

#snippet-editor-dialog {
  min-height: 300px;
  max-height: 650px;
  height: 80vh;
  min-width: 400px;
  max-width: 80vw;
  width: 850px;
  background-color: white;
  color: #9e9e9e;
}
#snippet-editor-dialog .header {
  min-height: 40px;
  font-weight: bold;
  background-color: #4a148c;
  color: white;
  padding-left: 10px;
}
#snippet-editor-dialog .header ng-md-icon {
  margin: 0 10px;
}
#snippet-editor-dialog md-content {
  width: 100%;
  background-color: white;
  padding: 0 40px;
}
#snippet-editor-dialog .input-container {
  padding: 0;
  margin: 20px 0 0;
}
#snippet-editor-dialog .list-row {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  padding: 6px 3px;
}
#snippet-editor-dialog .list-row:hover .remove-icon, #snippet-editor-dialog .list-row:hover .grab-handle {
  color: #9e9e9e;
}
#snippet-editor-dialog .ah-asset-count {
  margin-left: 10px;
}
#snippet-editor-dialog .remove-icon {
  transition: color 0.2s;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  color: transparent;
  outline: none;
  cursor: pointer;
}
#snippet-editor-dialog .remove-icon svg {
  width: 100%;
  height: 100%;
}
#snippet-editor-dialog .remove-icon:hover {
  color: #ffb74d !important;
}
#snippet-editor-dialog .list-container {
  margin-top: 30px;
  border: 1px solid #ddd;
  padding: 0 10px;
  overflow: auto;
}
#snippet-editor-dialog md-input-container .md-errors-spacer {
  min-height: 0;
  min-width: 1px;
}
#snippet-editor-dialog .grab-handle {
  cursor: move;
  padding: 5px;
  color: transparent;
}
#snippet-editor-dialog .fa-bars {
  color: lightgrey;
}
#snippet-editor-dialog .list-item[contenteditable=true]:focus, #snippet-editor-dialog .list-item[contenteditable=true]:hover {
  color: blue;
}
#snippet-editor-dialog .panel-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 60px;
}

#spinner-dialog {
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 320px;
  color: #616161;
}
#spinner-dialog .message {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  padding: 20px 0;
}
#spinner-dialog .spinner-container {
  flex: 2 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#style-save-dialog {
  min-width: 800px;
  display: flex;
  flex-direction: column;
  color: #616161;
}
#style-save-dialog md-toolbar {
  color: white;
  background-color: #1a237e;
}
#style-save-dialog md-toolbar .md-toolbar-tools {
  font-weight: bold;
}
#style-save-dialog md-dialog-content {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
#style-save-dialog .layout-preview {
  display: inline-block;
  width: 500px;
  padding: 10px;
}
#style-save-dialog .layout-preview img {
  max-width: 100%;
}
#style-save-dialog .layout-details {
  display: inline-block;
  width: 300px;
  padding: 10px;
}
#style-save-dialog .details-row {
  margin-bottom: 20px;
}
#style-save-dialog .progress-container {
  display: inline-block;
  width: 100%;
  height: 25px;
  padding: 10px;
}

#table-preset-select-dialog {
  background-color: #f5f5f5;
  padding: 0;
  overflow: hidden;
  min-height: 530px;
  width: 200px;
}
#table-preset-select-dialog .header {
  background-color: #757575;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 3px;
  margin-bottom: 5px;
}
#table-preset-select-dialog .create-new-button {
  display: flex;
  justify-content: stretch;
  border: 3px solid rgb(224, 224, 224);
  background-color: white;
  cursor: pointer;
  border-radius: 10px;
  margin: 3px;
  padding: 5px;
}
#table-preset-select-dialog .create-new-button ng-md-icon {
  color: #616161;
}
#table-preset-select-dialog .create-new-button:hover {
  background-color: rgb(242, 242, 242);
}
#table-preset-select-dialog .create-new-button:active {
  background-color: rgb(238, 238, 238);
}
#table-preset-select-dialog .list-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 500px;
  padding: 5px;
  gap: 5px;
  cursor: pointer;
}
#table-preset-select-dialog .item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s;
}
#table-preset-select-dialog .item-container .favorite {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  height: 30px;
}
#table-preset-select-dialog .item-container .favorite ng-md-icon {
  color: #9e9e9e;
}
#table-preset-select-dialog .item-container .favorite:hover ng-md-icon {
  color: #90caf9;
}
#table-preset-select-dialog .item-container .favorite.active ng-md-icon {
  color: #1e88e5;
}
#table-preset-select-dialog .item-container .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 7px 10px;
  width: 122px;
  height: 70px;
  border: 1px solid rgb(215, 215, 215);
  background-color: white;
}
#table-preset-select-dialog .item-container .image-container img {
  max-width: 95%;
  max-height: 95%;
  background-color: white;
}
#table-preset-select-dialog .item-container .image-placeholder-container {
  margin: 7px 10px;
  height: 70px;
  width: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(215, 215, 215);
}
#table-preset-select-dialog .item-container .image-placeholder-container ng-md-icon {
  color: rgb(189, 189, 189);
}
#table-preset-select-dialog .item-container .preset-label {
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
}
#table-preset-select-dialog .item-container:hover {
  background-color: #e3f2fd;
}

#tag-editor-dialog {
  min-height: 300px;
  max-height: 650px;
  height: 80vh;
  min-width: 400px;
  max-width: 80vw;
  width: 850px;
  background-color: white;
  color: #9e9e9e;
}
#tag-editor-dialog md-toolbar {
  min-height: 40px;
  font-weight: bold;
  background-color: #1e88e5;
  color: white;
}
#tag-editor-dialog md-toolbar ng-md-icon {
  margin: 0 10px;
}
#tag-editor-dialog md-content {
  width: 100%;
  background-color: white;
  padding: 0 40px;
}
#tag-editor-dialog .tag-editor-tabs {
  height: 48px;
  padding: 0 10px;
}
#tag-editor-dialog .tag-editor-tabs .md-tab {
  padding: 12px 10px;
  font-size: 0.9em;
}
#tag-editor-dialog .te-input-container {
  padding: 0;
  margin: 20px 0 0;
}
#tag-editor-dialog .tag-row {
  border-bottom: 1px solid #ddd;
  height: 40px;
  padding: 3px;
}
#tag-editor-dialog .tag-row:hover .remove-icon, #tag-editor-dialog .tag-row:hover .grab-handle {
  color: #9e9e9e;
}
#tag-editor-dialog .ah-asset-count {
  margin-left: 10px;
}
#tag-editor-dialog .remove-icon {
  transition: color 0.2s;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  color: transparent;
  outline: none;
  cursor: pointer;
}
#tag-editor-dialog .remove-icon svg {
  width: 100%;
  height: 100%;
}
#tag-editor-dialog .remove-icon:hover {
  color: #ffb74d !important;
}
#tag-editor-dialog .te-tags-container {
  margin-top: 30px;
  border: 1px solid #ddd;
  padding: 0 10px;
  overflow: auto;
}
#tag-editor-dialog md-input-container .md-errors-spacer {
  min-height: 0;
  min-width: 1px;
}
#tag-editor-dialog .grab-handle {
  cursor: move;
  padding: 5px;
  color: transparent;
}
#tag-editor-dialog .fa-bars {
  color: lightgrey;
}
#tag-editor-dialog .te-list-item[contenteditable=true]:focus, #tag-editor-dialog .te-list-item[contenteditable=true]:hover {
  color: blue;
}
#tag-editor-dialog .panel-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 60px;
}

#text-format-tools {
  color: #101214;
  display: flex;
}
#text-format-tools .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  cursor: move;
}
#text-format-tools ng-md-icon:not([disabled]):not(:hover) {
  color: #101214;
}
#text-format-tools .tool-icon.active ng-md-icon {
  color: #ff8a65;
}
#text-format-tools md-checkbox {
  color: #101214;
}
#text-format-tools md-select {
  margin: 0 10px;
}
#text-format-tools .tool-group {
  display: flex;
  padding: 0 5px;
}
#text-format-tools .tool-group:not(:first-child) {
  border-left: 1px solid rgb(238, 238, 238);
}
#text-format-tools .size-input {
  display: flex;
  align-items: center;
}
#text-format-tools .size-input input {
  display: block;
  width: 50px;
}

.style-class-select-panel {
  display: flex;
  flex-wrap: wrap;
  background: white;
  padding: 20px;
  gap: 20px;
  max-width: 800px;
}
.style-class-select-panel .style-class-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 150px;
  height: 150px;
}
.style-class-select-panel .style-class-container .style-class-button {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
.style-class-select-panel .style-class-container .style-class-button .label {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  flex: 0 0 40px;
  padding-top: 20px;
}
.style-class-select-panel .style-class-container .style-class-button .icon {
  flex: 2 1 auto;
  display: flex;
  justify-content: center;
}
.style-class-select-panel .subclass-select-container {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
}
.style-class-select-panel .subclass-select-container md-input-container {
  margin: 0 !important;
}
.style-class-select-panel .subclass-select-container .md-select-value {
  border: none;
  min-width: auto;
}
.style-class-select-panel .subclass-select-container .md-select-value .md-select-icon {
  width: auto;
}
.style-class-select-panel .subclass-select-container .md-select-value span:not(.md-select-icon) {
  display: none;
}

#upload-dialog {
  max-width: 850px;
  width: 95%;
}
#upload-dialog md-input-container {
  margin: 0;
}
#upload-dialog md-input-container:first-child {
  margin-right: 5px;
}
#upload-dialog md-input-container:last-child {
  margin-left: 5px;
}
#upload-dialog md-input-container .md-errors-spacer {
  display: none;
}
#upload-dialog md-input-container .md-input {
  border-bottom: 1px solid #1565c0;
}
#upload-dialog .md-dialog-content {
  color: #9e9e9e;
  padding-bottom: 0;
}
#upload-dialog .md-dialog-content .md-title {
  display: inline-block;
  font-size: 16px;
  margin-bottom: 8px;
}
#upload-dialog .md-dialog-content .file-table {
  border: 1px solid rgb(215, 215, 215);
  padding: 10px;
  margin: 10px 0;
}
#upload-dialog .md-dialog-content .file-table .md-column {
  padding: 0 0 10px 0;
  border-bottom: #9e9e9e;
  color: #9e9e9e;
}
#upload-dialog .md-dialog-content .file-table .md-row {
  height: auto;
}
#upload-dialog .md-dialog-content .file-table .md-cell {
  color: #616161;
  border: none;
  padding: 0 10px 0 0;
}
#upload-dialog .md-dialog-content .file-table .md-cell.remove {
  width: 10px;
}
#upload-dialog .md-dialog-content .file-table .md-cell.filename {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#upload-dialog .md-dialog-content .file-table .md-cell.name {
  max-width: 300px;
  min-width: 200px;
  padding-right: 20px;
}
#upload-dialog .md-dialog-content .file-table .md-cell.name md-input-container {
  width: 100%;
  margin: 0;
}
#upload-dialog .md-dialog-content .file-table .md-cell.range {
  width: 150px;
  min-width: 150px;
}
#upload-dialog .md-dialog-content .file-table .md-errors-spacer {
  min-height: 0;
}
#upload-dialog .md-dialog-content .option-row {
  margin: 20px 0;
}
#upload-dialog .md-dialog-content .option-row > *:first-child {
  margin-right: 20px;
}
#upload-dialog .md-dialog-content .option-row tag-chooser {
  width: 70%;
}
#upload-dialog .md-dialog-content .option-row .confidential-switch {
  zoom: 1.3;
  margin-top: 7px;
}
#upload-dialog .md-dialog-content .option-row hotness {
  margin-top: 10px;
  zoom: 0.8;
}
#upload-dialog .md-dialog-content md-progress-linear {
  margin-top: 15px;
  margin-bottom: 15px !important;
}
#upload-dialog md-dialog-actions {
  margin-top: 20px;
}

#upload-single-dialog {
  width: 350px;
  max-width: 90%;
}
#upload-single-dialog .control-row {
  padding: 10px 0;
}
#upload-single-dialog md-input-container {
  margin: 0 10px 0 0;
}
#upload-single-dialog md-input-container .md-errors-spacer {
  display: none;
}
#upload-single-dialog md-input-container .md-input {
  border: 1px solid #1565c0;
  width: 50px;
}

#view-callout-dialog {
  max-width: 90vw;
}
#view-callout-dialog .layout-container {
  display: flex;
  flex-wrap: wrap;
}
#view-callout-dialog .group-container {
  flex: 0 1 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#view-callout-dialog .image-container {
  display: flex;
  align-items: center;
  border: 1px solid #757575;
  background-image: url(./../assets/checkerboard.svg);
  background-size: 24px;
  background-repeat: repeat;
  margin: 10px;
  padding: 5px;
}
#view-callout-dialog .image-container img {
  width: 100%;
}

artwork-details {
  display: inline-block;
  width: 100%;
  font-size: 0.8em;
}
artwork-details .material-model-name {
  margin-bottom: 0.5em;
}

.element-block-drag .element-container {
  background-color: white;
}

.label-font-select .label-font-missing {
  font-style: italic;
}

element-block, .element-block {
  display: block;
  background-color: white;
}
element-block .element-container, .element-block .element-container {
  position: relative;
  overflow: hidden;
  margin: 5px;
  border-radius: 5px;
}
element-block .border-element, .element-block .border-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border: 1px solid rgb(189, 189, 189);
  border-radius: 5px;
}
element-block .element-header, element-block .element-header .transclude-container, .element-block .element-header, .element-block .element-header .transclude-container {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  height: 48px;
  cursor: default;
  color: white;
  font-weight: 600;
  line-height: 1rem;
  font-size: 0.9rem;
  padding-right: 5px;
}
element-block .element-header .icon-container, element-block .element-header .transclude-container .icon-container, .element-block .element-header .icon-container, .element-block .element-header .transclude-container .icon-container {
  flex: 0 0 auto;
  display: flex;
  position: relative;
  gap: 2px;
  align-items: center;
  cursor: pointer;
  height: 100%;
  min-width: 30px;
  padding: 0 3px;
}
element-block .element-header .icon-container.no-click, element-block .element-header .transclude-container .icon-container.no-click, .element-block .element-header .icon-container.no-click, .element-block .element-header .transclude-container .icon-container.no-click {
  cursor: auto;
}
element-block .element-header .expand-icon, element-block .element-header .transclude-container .expand-icon, .element-block .element-header .expand-icon, .element-block .element-header .transclude-container .expand-icon {
  position: absolute;
  left: 3px;
  top: 3px;
  background: white;
  opacity: 0;
  transition: 0.2s opacity;
}
element-block .element-header .expand-icon ng-md-icon, element-block .element-header .transclude-container .expand-icon ng-md-icon, .element-block .element-header .expand-icon ng-md-icon, .element-block .element-header .transclude-container .expand-icon ng-md-icon {
  color: #9e9e9e;
}
element-block .element-header .ah-action-button:not(.active), element-block .element-header .drag-handle, element-block .element-header .transclude-container .ah-action-button:not(.active), element-block .element-header .transclude-container .drag-handle, .element-block .element-header .ah-action-button:not(.active), .element-block .element-header .drag-handle, .element-block .element-header .transclude-container .ah-action-button:not(.active), .element-block .element-header .transclude-container .drag-handle {
  opacity: 0;
}
element-block .element-header .ah-action-button.active:hover, element-block .element-header .transclude-container .ah-action-button.active:hover, .element-block .element-header .ah-action-button.active:hover, .element-block .element-header .transclude-container .ah-action-button.active:hover {
  opacity: 1;
}
element-block .element-header .ah-action-button.open-styles-button, element-block .element-header .transclude-container .ah-action-button.open-styles-button, .element-block .element-header .ah-action-button.open-styles-button, .element-block .element-header .transclude-container .ah-action-button.open-styles-button {
  opacity: 0.4;
}
element-block .element-header .settings-button, element-block .element-header .transclude-container .settings-button, .element-block .element-header .settings-button, .element-block .element-header .transclude-container .settings-button {
  margin-right: 5px;
}
element-block .element-header .header-icon, element-block .element-header .transclude-container .header-icon, .element-block .element-header .header-icon, .element-block .element-header .transclude-container .header-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
element-block .element-header .header-icon .icon-bg, element-block .element-header .transclude-container .header-icon .icon-bg, .element-block .element-header .header-icon .icon-bg, .element-block .element-header .transclude-container .header-icon .icon-bg {
  fill: transparent;
}
element-block .element-header .header-icon img, element-block .element-header .transclude-container .header-icon img, .element-block .element-header .header-icon img, .element-block .element-header .transclude-container .header-icon img {
  max-width: 100%;
  max-height: 100%;
}
element-block .element-header .header-icon.header-icon-image, element-block .element-header .transclude-container .header-icon.header-icon-image, .element-block .element-header .header-icon.header-icon-image, .element-block .element-header .transclude-container .header-icon.header-icon-image {
  border: 2px solid rgb(189, 189, 189);
  background-color: rgb(189, 189, 189);
}
element-block .element-header .header-icon ng-md-icon, element-block .element-header .transclude-container .header-icon ng-md-icon, .element-block .element-header .header-icon ng-md-icon, .element-block .element-header .transclude-container .header-icon ng-md-icon {
  color: rgb(189, 189, 189);
}
element-block .element-header .spacer, element-block .element-header .transclude-container .spacer, .element-block .element-header .spacer, .element-block .element-header .transclude-container .spacer {
  flex: 1 1 auto;
  align-self: stretch;
}
element-block .element-header .spacer:not(.no-point), element-block .element-header .transclude-container .spacer:not(.no-point), .element-block .element-header .spacer:not(.no-point), .element-block .element-header .transclude-container .spacer:not(.no-point) {
  cursor: pointer;
}
element-block .element-header .spacer.no-click, element-block .element-header .transclude-container .spacer.no-click, .element-block .element-header .spacer.no-click, .element-block .element-header .transclude-container .spacer.no-click {
  cursor: auto;
}
element-block .element-header .drag-handle, element-block .element-header .transclude-container .drag-handle, .element-block .element-header .drag-handle, .element-block .element-header .transclude-container .drag-handle {
  background: transparent;
  cursor: grab;
}
element-block .element-header .drag-handle:active, element-block .element-header .transclude-container .drag-handle:active, .element-block .element-header .drag-handle:active, .element-block .element-header .transclude-container .drag-handle:active {
  cursor: grabbing;
}
element-block .element-header .toggle-icon-container, element-block .element-header .transclude-container .toggle-icon-container, .element-block .element-header .toggle-icon-container, .element-block .element-header .transclude-container .toggle-icon-container {
  cursor: pointer;
}
element-block .element-header .toggle-icon-container ng-md-icon, element-block .element-header .transclude-container .toggle-icon-container ng-md-icon, .element-block .element-header .toggle-icon-container ng-md-icon, .element-block .element-header .transclude-container .toggle-icon-container ng-md-icon {
  color: rgb(189, 189, 189);
}
element-block .element-header .toggle-icon-container:hover ng-md-icon, element-block .element-header .transclude-container .toggle-icon-container:hover ng-md-icon, .element-block .element-header .toggle-icon-container:hover ng-md-icon, .element-block .element-header .transclude-container .toggle-icon-container:hover ng-md-icon {
  color: #a4a4a4;
}
element-block .element-header .icon-container:hover .expand-icon, element-block .element-header .transclude-container .icon-container:hover .expand-icon, .element-block .element-header .icon-container:hover .expand-icon, .element-block .element-header .transclude-container .icon-container:hover .expand-icon {
  opacity: 0.5;
}
element-block .element-content-container, .element-block .element-content-container {
  position: relative;
  padding: 2px 10px 10px 10px;
}
element-block .element-content-container .enable-date-button-container, .element-block .element-content-container .enable-date-button-container {
  position: absolute;
  right: 0;
  bottom: 8px;
}
element-block .type-select-container md-input-container, .element-block .type-select-container md-input-container {
  width: 80%;
  margin: 18px 0 0 0;
}
element-block .details-element, .element-block .details-element {
  position: relative;
  display: block;
  border: 1px solid transparent;
}
element-block .details-element .thumb-container, .element-block .details-element .thumb-container {
  position: relative;
  flex: 0 0 100px;
  width: 120px;
  margin-top: 5px;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
element-block .details-element .thumb-container img, .element-block .details-element .thumb-container img {
  max-height: 100%;
  max-width: 100%;
  outline: 1px solid #9e9e9e;
}
element-block .details-element .thumb-container .cross-fade-button, .element-block .details-element .thumb-container .cross-fade-button {
  position: absolute;
  top: 0px;
  right: -30px;
  background-color: transparent;
}
element-block .details-element .thumb-container .view-edit-tools, .element-block .details-element .thumb-container .view-edit-tools {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
}
element-block .details-element .thumb-container .view-edit-tools .ah-action-button, .element-block .details-element .thumb-container .view-edit-tools .ah-action-button {
  opacity: 0.6 !important;
}
element-block .details-element .thumb-container .view-edit-tools .ah-action-button:hover, .element-block .details-element .thumb-container .view-edit-tools .ah-action-button:hover {
  opacity: 0.8 !important;
}
element-block .details-element .thumb-container:hover .view-edit-tools, .element-block .details-element .thumb-container:hover .view-edit-tools {
  opacity: 1;
}
element-block .details-element .info-row, .element-block .details-element .info-row {
  display: flex;
  margin: 10px 0;
  color: #616161;
  word-break: break-word;
}
element-block .details-element .info-row p, .element-block .details-element .info-row p {
  margin: 0;
}
element-block .details-element .info-row.margin-right, .element-block .details-element .info-row.margin-right {
  margin-right: 20px;
}
element-block .details-element .info-row md-input-container, .element-block .details-element .info-row md-input-container {
  width: 100%;
}
element-block .details-element .info-row md-radio-group, .element-block .details-element .info-row md-radio-group {
  margin-left: 10px;
}
element-block .details-element .info-row .label, .element-block .details-element .info-row .label {
  margin-left: 10px;
  transform: translateY(3px);
}
element-block .details-element .info-row input[type=number], .element-block .details-element .info-row input[type=number] {
  width: 50px;
}
element-block .path-element-data, .element-block .path-element-data {
  cursor: pointer;
}
element-block .path-element-data:hover .info-row, .element-block .path-element-data:hover .info-row {
  color: #ffb74d;
}
element-block sticky-details, element-block path-details, .element-block sticky-details, .element-block path-details {
  font-size: 0.8em;
}
element-block .element-container.callout-block-container, element-block .element-container.asterism-block-container, .element-block .element-container.callout-block-container, .element-block .element-container.asterism-block-container {
  border-radius: 0;
  background-color: rgb(230, 230, 230);
  margin: 0px 0 10px 0;
  padding: 10px;
}
element-block .element-container.callout-block-container .element-header, element-block .element-container.callout-block-container .element-header .transclude-container, element-block .element-container.asterism-block-container .element-header, element-block .element-container.asterism-block-container .element-header .transclude-container, .element-block .element-container.callout-block-container .element-header, .element-block .element-container.callout-block-container .element-header .transclude-container, .element-block .element-container.asterism-block-container .element-header, .element-block .element-container.asterism-block-container .element-header .transclude-container {
  height: auto;
  max-height: auto;
  background-color: transparent;
}
element-block .element-container.callout-block-container .element-header .asterism-icon, element-block .element-container.callout-block-container .element-header .transclude-container .asterism-icon, element-block .element-container.asterism-block-container .element-header .asterism-icon, element-block .element-container.asterism-block-container .element-header .transclude-container .asterism-icon, .element-block .element-container.callout-block-container .element-header .asterism-icon, .element-block .element-container.callout-block-container .element-header .transclude-container .asterism-icon, .element-block .element-container.asterism-block-container .element-header .asterism-icon, .element-block .element-container.asterism-block-container .element-header .transclude-container .asterism-icon {
  color: #616161;
  font-weight: bold;
  font-size: 1.1em;
  margin: 0 auto;
}
element-block .element-container.callout-block-container .callout-element, element-block .element-container.asterism-block-container .callout-element, .element-block .element-container.callout-block-container .callout-element, .element-block .element-container.asterism-block-container .callout-element {
  margin: 0;
  padding: 0;
}
element-block .element-container.callout-block-container .drag-handle ng-md-icon, element-block .element-container.asterism-block-container .drag-handle ng-md-icon, .element-block .element-container.callout-block-container .drag-handle ng-md-icon, .element-block .element-container.asterism-block-container .drag-handle ng-md-icon {
  color: #616161;
}
element-block .element-container.callout-block-container .drag-handle ng-md-icon:hover, element-block .element-container.asterism-block-container .drag-handle ng-md-icon:hover, .element-block .element-container.callout-block-container .drag-handle ng-md-icon:hover, .element-block .element-container.asterism-block-container .drag-handle ng-md-icon:hover {
  color: #616161;
  opacity: 1;
}
element-block .element-container.disabled, .element-block .element-container.disabled {
  background-image: linear-gradient(45deg, rgb(224, 224, 224) 25%, rgb(245, 245, 245) 25%, rgb(245, 245, 245) 50%, rgb(224, 224, 224) 50%, rgb(224, 224, 224) 75%, rgb(245, 245, 245) 75%, rgb(245, 245, 245) 100%);
  background-size: 10px 10px;
}
element-block .element-container.disabled .drag-handle, .element-block .element-container.disabled .drag-handle {
  opacity: 1 !important;
}
element-block .element-container.disabled .drag-handle ng-md-icon, .element-block .element-container.disabled .drag-handle ng-md-icon {
  color: white;
}
element-block .element-container.disabled .drag-handle:hover, .element-block .element-container.disabled .drag-handle:hover {
  opacity: 0.6;
}
element-block .element-container.disabled .drag-handle:hover ng-md-icon, .element-block .element-container.disabled .drag-handle:hover ng-md-icon {
  color: white;
}
element-block .element-container.callout-block-container.disabled,
element-block .element-container.disabled.callout-block-container .element-header,
element-block .element-container.disabled .element-header .transclude-container, .element-block .element-container.callout-block-container.disabled,
.element-block .element-container.disabled.callout-block-container .element-header,
.element-block .element-container.disabled .element-header .transclude-container {
  background-image: linear-gradient(45deg, rgb(180, 180, 180) 25%, rgb(215, 215, 215) 25%, rgb(215, 215, 215) 50%, rgb(180, 180, 180) 50%, rgb(180, 180, 180) 75%, rgb(215, 215, 215) 75%, rgb(215, 215, 215) 100%);
  background-size: 10px 10px;
}
element-block .element-container:hover .ah-action-button:not(.active), .element-block .element-container:hover .ah-action-button:not(.active) {
  opacity: 0.4;
}
element-block .element-container:hover .ah-action-button:not(.active):hover, .element-block .element-container:hover .ah-action-button:not(.active):hover {
  opacity: 0.6;
}
element-block .element-container:hover .animation-settings, .element-block .element-container:hover .animation-settings {
  opacity: 1;
}
element-block.selected .border-element, .element-block.selected .border-element {
  border: 2px solid #64b5f6;
}
element-block.selected .border-element.calloutGroup, .element-block.selected .border-element.calloutGroup {
  border: 2px solid rgb(241, 119, 32);
}
element-block.selected .element-header, element-block.selected .element-header .transclude-container, element-block.highlighted .element-header, element-block.highlighted .element-header .transclude-container, .element-block.selected .element-header, .element-block.selected .element-header .transclude-container, .element-block.highlighted .element-header, .element-block.highlighted .element-header .transclude-container {
  background-color: #bbdefb;
}
element-block.selected .element-header.calloutGroup, element-block.selected .element-header .transclude-container.calloutGroup, element-block.highlighted .element-header.calloutGroup, element-block.highlighted .element-header .transclude-container.calloutGroup, .element-block.selected .element-header.calloutGroup, .element-block.selected .element-header .transclude-container.calloutGroup, .element-block.highlighted .element-header.calloutGroup, .element-block.highlighted .element-header .transclude-container.calloutGroup {
  background-color: rgb(255, 237, 213);
}
element-block.selected .element-header .header-icon ng-md-icon, element-block.selected .element-header .transclude-container .header-icon ng-md-icon, element-block.highlighted .element-header .header-icon ng-md-icon, element-block.highlighted .element-header .transclude-container .header-icon ng-md-icon, .element-block.selected .element-header .header-icon ng-md-icon, .element-block.selected .element-header .transclude-container .header-icon ng-md-icon, .element-block.highlighted .element-header .header-icon ng-md-icon, .element-block.highlighted .element-header .transclude-container .header-icon ng-md-icon {
  color: white;
}
element-block.selected .element-container .toggle-icon-container ng-md-icon, element-block.highlighted .element-container .toggle-icon-container ng-md-icon, .element-block.selected .element-container .toggle-icon-container ng-md-icon, .element-block.highlighted .element-container .toggle-icon-container ng-md-icon {
  color: rgb(238, 238, 238);
}
element-block.selected .element-container .icon-container:hover .toggle-icon-container ng-md-icon, element-block.highlighted .element-container .icon-container:hover .toggle-icon-container ng-md-icon, .element-block.selected .element-container .icon-container:hover .toggle-icon-container ng-md-icon, .element-block.highlighted .element-container .icon-container:hover .toggle-icon-container ng-md-icon {
  color: #d7d7d7;
}
element-block.selected .drag-handle ng-md-icon, element-block.highlighted .drag-handle ng-md-icon, .element-block.selected .drag-handle ng-md-icon, .element-block.highlighted .drag-handle ng-md-icon {
  color: white;
}
element-block.selected .drag-handle:hover ng-md-icon, element-block.highlighted .drag-handle:hover ng-md-icon, .element-block.selected .drag-handle:hover ng-md-icon, .element-block.highlighted .drag-handle:hover ng-md-icon {
  color: white;
}
element-block.title-element-block .header-icon, .element-block.title-element-block .header-icon {
  transform: translateX(3px);
}
element-block.title-element-block .styles-button, .element-block.title-element-block .styles-button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px 0 5px;
  width: 85px;
}
element-block.title-element-block .styles-button .label, .element-block.title-element-block .styles-button .label {
  color: #9e9e9e;
  font-weight: 500;
}

page-details {
  opacity: 1 !important;
}
page-details .used-in-form-container {
  border: 1px solid rgb(215, 215, 215);
  padding: 5px 10px;
  color: #616161;
  font-size: 0.9em;
}
page-details .used-in-form {
  line-height: 1.4em;
  color: #616161;
}
page-details .used-in-form a {
  text-decoration: none;
  color: #2196f3;
  cursor: pointer;
}
page-details .used-in-form a:hover {
  color: #ffb74d;
}
page-details .used-in-form .index {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 3px;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 5px;
  color: #616161;
  font-size: 0.9em;
  line-height: 20px;
  text-align: center;
}
page-details .used-in-form.selected {
  font-weight: bold;
}
page-details .page-data-accordion {
  margin: 0 0 25px 0;
}
page-details .page-metadata-container {
  display: inline-block;
  width: 100%;
  padding: 10px;
  border: 1px solid rgb(215, 215, 215);
}
page-details .page-metadata-container .md-chip-content {
  max-width: 230px !important;
}

sidebar-container-component {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  position: relative;
  transition: flex-basis 0.25s ease-out;
  flex: 0 0 320px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
sidebar-container-component .toggle-btn {
  position: absolute;
  top: 5px;
  right: 15px;
  z-index: 15;
}
sidebar-container-component.collapsed {
  flex: 0 1 50px;
  text-align: center;
  padding: 0;
}
sidebar-container-component:not(.collapsed) .toggle-btn.white ng-md-icon {
  color: white;
}

slide-details {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s;
  width: 100%;
  overflow-y: scroll;
}
slide-details.visible {
  opacity: 1;
}
slide-details .details-header {
  position: sticky;
  top: 0;
  min-height: 80px;
  margin-bottom: 10px;
  background-color: white;
  z-index: 10;
}
slide-details .details-header .create-button {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-weight: bold;
  background-color: #f57c00;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s;
}
slide-details .details-header .create-button:hover {
  background-color: #ff9800;
}
slide-details .details-header .create-button.processing {
  background-color: rgb(238, 238, 238);
  cursor: default;
  font-size: 1em;
  color: #9e9e9e;
}
slide-details .details-header .create-button.processing spinner {
  margin: 0 20px;
}
slide-details .details-header .create-button.processing .processing-text {
  flex: 1 1 auto;
  margin-right: 20px;
}
slide-details .details-header .duration {
  position: absolute;
  bottom: 10px;
  right: 20px;
  color: #616161;
  opacity: 0.8;
  font-size: 0.85em;
  cursor: pointer;
}
slide-details .details-header .white {
  color: white;
}
slide-details .details-header .animate-btn {
  position: absolute;
  bottom: 0px;
  left: 10px;
  width: 30px;
  display: flex;
  justify-content: center;
}
slide-details .details-header .animate-btn.white ng-md-icon {
  color: white;
}
slide-details .collapsed-content {
  margin-top: 50px;
}
slide-details .collapsed-content .create-button {
  background-color: #f57c00 !important;
  cursor: pointer;
  transition: background-color 0.2s;
}
slide-details .collapsed-content .create-button ng-md-icon {
  color: white !important;
}
slide-details .collapsed-content .create-button:hover {
  background-color: #ff9800 !important;
}
slide-details .collapsed-content .create-button.processing {
  background-color: rgb(238, 238, 238) !important;
}
slide-details .block-group-label {
  margin-left: 5px;
  font-size: 0.9rem;
  color: #9e9e9e;
  font-weight: 500;
}
slide-details accordion {
  margin: 10px 0;
}

text-details .text-details-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
text-details .text-content-container {
  flex: 1 2 auto;
  height: 200px;
  margin-right: 3px;
}
text-details .text-content-container.text-content-container-small {
  height: auto;
}

#user-projects-collections-sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
  color: #9e9e9e;
}
#user-projects-collections-sidebar .project-list-filters {
  position: relative;
  margin: 15px;
}
#user-projects-collections-sidebar .project-list-filters md-input-container {
  width: 100%;
  margin: 0 0 10px;
}
#user-projects-collections-sidebar .project-list-filters md-input-container .md-errors-spacer {
  min-height: 0;
}
#user-projects-collections-sidebar .project-list-filters .clear-button {
  position: absolute;
  top: 0px;
  right: 0;
  min-width: auto;
  margin: 0;
  line-height: 0;
}
#user-projects-collections-sidebar .project-list-container {
  background-color: transparent;
  padding: 10px;
}
#user-projects-collections-sidebar .project-name {
  flex: 1 1 auto;
}
#user-projects-collections-sidebar .info-button {
  min-width: 25px;
  min-height: 25px;
  line-height: 0px;
  margin: 0px;
  transform: translateX(-3px);
}
#user-projects-collections-sidebar .info-button:hover {
  background-color: transparent;
}
#user-projects-collections-sidebar .info-button:hover ng-md-icon {
  fill: #616161 !important;
}
#user-projects-collections-sidebar .list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-bottom: 1px solid rgb(215, 215, 215);
}
#user-projects-collections-sidebar .list-item:hover .info-button ng-md-icon {
  fill: #9e9e9e;
}
#user-projects-collections-sidebar .info {
  display: flex;
  align-items: flex-start;
  flex: 0 0 100%;
  color: #616161;
}
#user-projects-collections-sidebar .preview-image {
  padding-top: 10px;
  max-width: 220px;
  cursor: zoom-in;
}

#user-projects-groups-desktop {
  flex: 1 1 auto;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}
#user-projects-groups-desktop .group {
  width: 300px;
  min-width: 300px;
  height: 300px;
  margin: 10px;
  border-radius: 10px;
  background: white;
}
#user-projects-groups-desktop .group .group-header {
  border-bottom: 1px solid #9e9e9e;
  height: 50px;
  border-radius: 10px 10px 0 0;
  padding: 0 16px 0 8px;
  font-size: 1.13em;
  transition: background-color 0.5s cubic-bezier(0.35, 0, 0.25, 1);
}
#user-projects-groups-desktop .group .group-header:hover ng-md-icon, #user-projects-groups-desktop .group .group-header:hover md-select .md-select-value .md-select-icon:after {
  fill: #bdbdbd;
}
#user-projects-groups-desktop .group .group-header .group-name {
  margin: 0 5px;
  line-height: 1.2em;
  max-height: 44px;
  overflow: hidden;
}
#user-projects-groups-desktop .group .group-header .md-button {
  background-color: transparent;
}
#user-projects-groups-desktop .group .group-header .md-button.md-raised {
  background-color: rgba(255, 255, 255, 0.2);
}
#user-projects-groups-desktop .group .group-header .md-button.md-raised ng-md-icon {
  fill: white;
}
#user-projects-groups-desktop .group .group-list-container {
  background-color: transparent;
  margin-bottom: 10px;
}
#user-projects-groups-desktop .group .group-list-container md-list {
  min-height: 200px;
  padding: 0;
}
#user-projects-groups-desktop .group .group-list-container md-list md-list-item {
  padding: 0;
}
#user-projects-groups-desktop .group .group-list-container md-list md-list-item:hover ng-md-icon {
  fill: #9e9e9e;
}
#user-projects-groups-desktop .group .group-list-container md-list md-list-item .md-list-item-inner {
  padding: 0 13px 0 10px;
}
#user-projects-groups-desktop .group .group-list-container md-list md-list-item .remove-button, #user-projects-groups-desktop .group .group-list-container md-list md-list-item .info-button {
  min-width: 25px;
  min-height: 25px;
  line-height: 0px;
  margin: 0px;
  transform: translateX(-3px);
}
#user-projects-groups-desktop .group .group-list-container md-list md-list-item .remove-button:hover, #user-projects-groups-desktop .group .group-list-container md-list md-list-item .info-button:hover {
  background-color: transparent;
}
#user-projects-groups-desktop .group .group-list-container md-list md-list-item .md-button {
  padding: 0;
}
#user-projects-groups-desktop .group .group-list-container md-list .md-list-item-text {
  outline: none;
}

#user-projects-sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
  color: #9e9e9e;
}
#user-projects-sidebar .project-list-filters {
  position: relative;
  margin: 15px;
}
#user-projects-sidebar .project-list-filters md-input-container {
  width: 100%;
  margin: 0 0 10px;
}
#user-projects-sidebar .project-list-filters md-input-container .md-errors-spacer {
  min-height: 0;
}
#user-projects-sidebar .project-list-filters .clear-button {
  position: absolute;
  top: 0px;
  right: 0;
  min-width: auto;
  margin: 0;
  line-height: 0;
}
#user-projects-sidebar .project-list-filters .active-label {
  color: #212121;
}
#user-projects-sidebar .project-list-filters .sorting-links {
  display: flex;
}
#user-projects-sidebar .project-list-filters .sorting-links .ah-action-link {
  margin-right: 10px;
}
#user-projects-sidebar .project-list-container {
  background-color: transparent;
  padding: 10px;
}
#user-projects-sidebar .project-list-container .info-button {
  min-width: 25px;
  min-height: 25px;
  line-height: 0px;
  margin: 0px;
  transform: translateX(-3px);
}
#user-projects-sidebar .project-list-container .info-button:hover {
  background-color: transparent;
}
#user-projects-sidebar .project-list-container md-list {
  padding: 0;
}
#user-projects-sidebar .project-list-container md-list md-list-item {
  padding: 0;
}
#user-projects-sidebar .project-list-container md-list md-list-item:hover ng-md-icon {
  fill: #9e9e9e;
}
#user-projects-sidebar .project-list-container md-list md-list-item .md-button {
  padding: 0 15px;
}
#user-projects-sidebar .project-list-container md-list md-list-item > .md-button:hover {
  background-color: transparent;
}
#user-projects-sidebar .project-list-container md-list md-list-item .md-list-item-text {
  outline: none;
  line-height: 1.6em;
  margin: 5px;
  width: 100%;
}