.duration-input,
.duration-unit {
    margin-left: .5rem;
    font-size: inherit;    
}

.duration-input {
  width: 3rem;
  text-align: center;
  padding: .25rem;
}
.playback-settings-options {
    padding: 0 1rem;
}

.playback-settings-options label {
    margin-bottom: 1rem;
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.playback-settings-options .option-label {
    font-weight: 600;
    margin-right: .25rem;
}

.playback-settings-options input[type="radio"] {
    margin-right: .5rem;
    margin-top: .25rem;
}

.playback-settings-options .radio-option {
    display: flex;
    flex-direction: column;
}.panel[hidden] {
  display: none;
  /* flex: 1; */
}

.editor-tab-panel {
    margin: 0 auto;
    font-size: .9375rem; 
    width: 100%;
    flex: 1;
    overflow-y: auto;
}

.editor-tab-panel .field-label {
    margin-right: .75rem;
    width: 145px;
}

.editor-tab-panel .help-text {
    width: 95%;
    font-size: inherit;
    margin: 1rem;
    padding: .75rem;
    background: rgba(98, 104, 115, .1);
}.help-text {
  font-size: .9rem;
  line-height: 140%;
}
.editor-focus-indicator {
  height: 0.25rem;
  background: #b2b2b2;
  transition: background 150ms linear;
}

.editor-focus-indicator.active {
  background: rgb(59, 153, 252);
}
.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.editor-toolbar .dropdown-menu .editor-toolbar-button {
    margin: 0;
}

.editor-toolbar .dropdown-menu .trigger {
    padding: 0;
}.editor-toolbar-button {
    font-size: .8rem;
    background: #fff;
    color: #212121;
    border: none;
    cursor: pointer;
    padding: .5rem .5rem .6rem .5rem;
    border-right: 1px solid hsl(0, 0%, 87%);
    display: flex;
    align-items: center;
}

.editor-toolbar-button[aria-pressed="true"], 
.editor-toolbar-button:hover,
.editor-toolbar-button:focus {
    background: hsl(214, 16%, 92%);
}

.editor-toolbar-button .image-icon {
    width: 15px;
    margin-right: .25rem;
}.saving-status {
    font-size: .7rem;
    color: #a09e9e;
    padding: 0rem .5rem;
}.flex-spacer {
  flex: 1 1 auto;
}
.dropdown-menu {
    display: inline-block;
    position: relative;
  }
  
  .dropdown-menu .trigger {
    cursor: pointer;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: bold;
    padding: .4rem .625rem;
    border-radius: .125rem;
  }
  
  .dropdown-menu .trigger:hover,
  .dropdown-menu .trigger:focus,
  .dropdown-menu .trigger.is-open {
    border-color: #CCC;
    background-color: #0088fe;
    color: #fff;
  }
  
  .dropdown-menu .trigger[aria-disabled=true] {
      opacity: .35;
  }

  .dropdown-menu .trigger[aria-disabled=true]:hover, 
  .dropdown-menu .trigger[aria-disabled=true]:focus {
      background-color: transparent;
      background-image: none;
      border-color: transparent;
  }
  
  .dropdown-menu .menu {
    background: #fff;
    border: 1px solid rgba(200, 200, 200, 0.4);
    list-style-type: none;
    position: absolute;
    top: 100%;
    z-index: 99;
    padding-left: 0;
    margin: 4px 0 0 0;
    min-width: 175px;
    box-shadow: 1px 1px 0px rgba(0,0,0,.5);
    border-radius: .125rem;
    font-size: .9rem;
  }
  
  .dropdown-menu .menu.right {
    right: 0;
  }
  
  .dropdown-menu .menu.left {
    left: 0;
  }
  
  .dropdown-menu [role=menuitem] {
    cursor: pointer;
    padding: .75rem .5rem .65rem .5rem
  }
  
  .dropdown-menu [role=menuitem]:hover,
  .dropdown-menu [role=menuitem]:focus {
    color: #064a86;
    background-color: hsla(204, 20%, 96%, 1); 
  }
  
  .dropdown-menu [role=menuitem].is-selected {
    cursor: default;
    font-weight: bold;
  }
  .source-panel {
  display: flex;
  flex-direction: column;
}

.source-panel header {
  z-index: 1;
  position: static;
  flex: 0;
  width: 100%;
}

.source-panel .shadow {
  box-shadow: 0px 3px 5px rgba(0,0,0,.15);
}
.assets-drawer {
    background: hsla(0, 0%, 88%, 1);
;
    padding: 0;
    border: 1px solid hsl(0, 0%, 81%);
    border-left: none;
    border-right: none;
}

.assets-drawer-buttonbar {
    display: flex;
    padding: .5rem;
}

.assets-drawer-buttonbar .primary-button {
    font-size: .8rem;
    padding: .35rem .5rem;
}

.assets-drawer-preview-list {
    display: flex;
    list-style: none;
    overflow: auto;
}

.assets-drawer-preview-list li {
    height: 100px;
    display: flex;
    justify-content: center;
    margin-right: .25rem;
}

.assets-drawer-preview-list [aria-pressed="true"] {
    transform: scale(.9);
    border: 3px solid hsla(208, 99%, 53%, 1);
}

.assets-drawer-preview-list img,
.assets-drawer-preview-list button {
    width: auto;
    height: 100%;
}.button {
  font-family: inherit;
  font-size: inherit;
  padding: .5rem;
  background: hsla(210, 17%, 90%, 1);
  color: #202020;
  border: none;
  border-radius: .15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.button:hover {
  background:hsla(210, 17%, 85%, 1);
  color: #202020;
}

.button[disabled] {
  opacity: .5;
  pointer-events: none;
}

.button .image-icon,
.button .icon {
  width: 16px;
  height: 16px;
  margin-right: .25rem;
}

.primary-button {
    font-size: inherit;
    /* background: hsla(208, 100%, 43%, 1); */
    background: hsla(208, 99%, 53%, 1);
    color: #fff;
}

.primary-button:hover, 
.primary-button:focus {
    color: #fff;
    background: hsla(208, 99%, 48%, 1);
}.field {
    display: flex;
    flex-direction: row;
    padding: .25rem;
    align-items: center;
    font-size: .8325rem;
}

.field .field-label {
    align-items: flex-end;
    flex: 0 0 auto;
    text-align: right;
    margin-right: .5rem;
}

.field input {
    font-size: inherit;
    padding: .25rem;
}

.field select {
    font-size: inherit;
}.fieldset {
  border: none;
  border-top: 1px solid #ddd;
  width: 100%;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
}

.fieldset.no-legend {
  border-top: none;
}

.fieldset[disabled] .field {
  color: #5e5e5e;
}

.fieldset legend {
  font-weight: 600;
  padding: 0 .25rem;
  color:  rgb(59, 62, 69);
}
.checkbox-field {
  align-items: baseline;
}

.checkbox-field input + label {
  margin-left: .25rem;
}
.text-field input {
  width: 175px;
}
.alignment-button {
  padding: .25rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.alignment-button input[type="radio"] {
  margin-right: .25rem;
}

.alignment-button label {
  cursor: pointer;
}


.alignment-button[aria-disabled="true"] label {
  cursor: default;
}

.alignment-button .icon {
  width: 15px;
  height: 15px;
}


.alignment-chooser {
  display: flex;
  flex-direction: row;
}
.font-chooser {
  width: 175px;
  margin-right: .25rem;
}
.rc-color-picker-panel-inner {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 1px 5px #ccc;
  border: 1px solid #ccc;
  padding-bottom: 8px;
}
.rc-color-picker-panel-wrap {
  margin: 5px 0 0;
  height: 30px;
  width: 100%;
  position: relative;
}
.rc-color-picker-panel-wrap-preview {
  position: absolute;
  right: 8px;
}
.rc-color-picker-panel-wrap-ribbon {
  position: absolute;
  left: 8px;
  top: 0;
  right: 43px;
  height: 30px;
}
.rc-color-picker-panel-wrap-alpha {
  position: absolute;
  left: 8px;
  right: 43px;
  bottom: 0;
  height: 12.5px;
}
.rc-color-picker-panel-wrap-has-alpha .rc-color-picker-panel-wrap-ribbon {
  height: 12.5px;
}
.rc-color-picker-trigger {
  border: 1px solid #999;
  display: inline-block;
  padding: 2px;
  border-radius: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff inset;
}
.rc-color-picker-trigger-open {
  box-shadow: 0px 0px 3px #999;
}
.rc-color-picker-panel {
  width: 218px;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  z-index: 9;
  border-radius: 4px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.rc-color-picker-panel * {
  box-sizing: border-box;
}
.rc-color-picker-panel-open {
  display: block;
}
.rc-color-picker-panel-close {
  display: none;
}
.rc-color-picker-panel-preview {
  height: 30px;
  width: 30px;
  overflow: hidden;
  border-radius: 2px;
  background-image: url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
}
.rc-color-picker-panel-preview span {
  box-shadow: 0 0 2px #808080 inset;
}
.rc-color-picker-panel-preview span,
.rc-color-picker-panel-preview input[type=color] {
  position: absolute;
  display: block;
  height: 100%;
  width: 30px;
  border-radius: 2px;
}
.rc-color-picker-panel-preview input[type=color] {
  opacity: 0;
}
.rc-color-picker-panel-board {
  position: relative;
  font-size: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 8px 8px 0px;
}
.rc-color-picker-panel-board span {
  position: absolute;
  border-radius: 10px;
  border: 1px solid #fff;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  left: -999px;
  top: -999px;
  box-shadow: 0 0 1px rgba(120, 120, 120, 0.7);
  z-index: 2;
}
.rc-color-picker-panel-board-hsv {
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  border-radius: 2px;
}
.rc-color-picker-panel-board-value {
  border-radius: 2px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLDAsMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, transparent 0%, #000000 100%);
  background-image: -moz-linear-gradient(top, transparent 0%, #000000 100%);
  background-image: -o-linear-gradient(top, transparent 0%, #000000 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #000000 100%);
}
.rc-color-picker-panel-board-saturation {
  border-radius: 2px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsMCwwKSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(left, #ffffff 0%, transparent 100%);
  background-image: -moz-linear-gradient(left, #ffffff 0%, transparent 100%);
  background-image: -o-linear-gradient(left, #ffffff 0%, transparent 100%);
  background-image: linear-gradient(to right, #ffffff 0%, transparent 100%);
}
.rc-color-picker-panel-board-handler {
  box-shadow: 0 0 2px #808080 inset;
  border-radius: 2px;
  cursor: crosshair;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.rc-color-picker-panel-ribbon {
  position: relative;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0 0 2px #808080 inset;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmY5OTAwIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2NkZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMzNWZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDBmZjY2IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwMDY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMzIwMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2NkMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZjAwOTkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(left, #ff0000 0%, #ff9900 10%, #cdff00 20%, #35ff00 30%, #00ff66 40%, #00fffd 50%, #0066ff 60%, #3200ff 70%, #cd00ff 80%, #ff0099 90%, #ff0000 100%);
  background-image: -moz-linear-gradient(left, #ff0000 0%, #ff9900 10%, #cdff00 20%, #35ff00 30%, #00ff66 40%, #00fffd 50%, #0066ff 60%, #3200ff 70%, #cd00ff 80%, #ff0099 90%, #ff0000 100%);
  background-image: -o-linear-gradient(left, #ff0000 0%, #ff9900 10%, #cdff00 20%, #35ff00 30%, #00ff66 40%, #00fffd 50%, #0066ff 60%, #3200ff 70%, #cd00ff 80%, #ff0099 90%, #ff0000 100%);
  background-image: linear-gradient(to right, #ff0000 0%, #ff9900 10%, #cdff00 20%, #35ff00 30%, #00ff66 40%, #00fffd 50%, #0066ff 60%, #3200ff 70%, #cd00ff 80%, #ff0099 90%, #ff0000 100%);
}
.rc-color-picker-panel-ribbon span {
  position: absolute;
  top: 0;
  height: 100%;
  width: 4px;
  border: 1px solid #000000;
  padding: 1px 0;
  margin-left: -2px;
  background-color: #fff;
  border-radius: 3px;
}
.rc-color-picker-panel-ribbon-handler {
  position: absolute;
  width: 104%;
  height: 100%;
  left: -2%;
  cursor: pointer;
}
.rc-color-picker-panel-alpha {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background-image: url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
  background-repeat: repeat;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.rc-color-picker-panel-alpha-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0 0 2px #808080 inset;
}
.rc-color-picker-panel-alpha span {
  position: absolute;
  top: 0;
  height: 100%;
  width: 4px;
  border: 1px solid #000000;
  padding: 1px 0;
  margin-left: -2px;
  background-color: #fff;
  border-radius: 3px;
}
.rc-color-picker-panel-alpha-handler {
  position: absolute;
  width: 104%;
  height: 100%;
  left: -2%;
  cursor: pointer;
}
.rc-color-picker-panel-params {
  font-size: 12px;
}
.rc-color-picker-panel-params-input {
  overflow: hidden;
  padding: 2px 8px;
}
.rc-color-picker-panel-params input {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  text-align: center;
  padding: 1px;
  margin: 0;
  float: left;
  border-radius: 2px;
  border: 1px solid #CACACA;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.rc-color-picker-panel-params-hex {
  width: 52px;
}
.rc-color-picker-panel-params input[type=number] {
  margin-left: 5px;
  width: 44px;
}
.rc-color-picker-panel-params input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.rc-color-picker-panel-params-lable {
  padding: 2px 8px;
  height: 22px;
  line-height: 18px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.rc-color-picker-panel-params-lable label {
  float: left;
  text-align: center;
}
.rc-color-picker-panel-params-lable-hex {
  width: 52px;
}
.rc-color-picker-panel-params-lable-number,
.rc-color-picker-panel-params-lable-alpha {
  margin-left: 5px;
  width: 44px;
  text-transform: uppercase;
}
.rc-color-picker-panel-params-lable-number:hover {
  border-radius: 2px;
  background-color: #eee;
  box-shadow: 0 0 0 1px #ccc inset;
  cursor: pointer;
}
.rc-color-picker-panel-params-has-alpha input[type=number] {
  width: 32px;
}
.rc-color-picker-panel-params-has-alpha .rc-color-picker-panel-params-lable-number,
.rc-color-picker-panel-params-has-alpha .rc-color-picker-panel-params-lable-alpha {
  width: 32px;
}
.rc-color-picker {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 1000;
}
.rc-color-picker-wrap {
  display: inline-block;
}
.rc-color-picker-slide-up-enter {
  animation-duration: .3s;
  animation-fill-mode: both;
  transform-origin: 0 0;
  display: block !important;
  opacity: 0;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-play-state: paused;
}
.rc-color-picker-slide-up-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  transform-origin: 0 0;
  display: block !important;
  opacity: 0;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-play-state: paused;
}
.rc-color-picker-slide-up-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  transform-origin: 0 0;
  display: block !important;
  opacity: 1;
  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  animation-play-state: paused;
}
.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomLeft,
.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomRight,
.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomLeft,
.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomRight {
  animation-name: rcColorPickerSlideUpIn;
  animation-play-state: running;
}
.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topLeft,
.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topRight,
.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topLeft,
.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topRight {
  animation-name: rcColorPickerSlideDownIn;
  animation-play-state: running;
}
.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomLeft,
.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomRight {
  animation-name: rcColorPickerSlideUpOut;
  animation-play-state: running;
}
.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topLeft,
.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topRight {
  animation-name: rcColorPickerSlideDownOut;
  animation-play-state: running;
}
@keyframes rcColorPickerSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}
@keyframes rcColorPickerSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}
@keyframes rcColorPickerSlideDownIn {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
}
@keyframes rcColorPickerSlideDownOut {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0);
  }
}.color-field {
  display: inline-flex;
  align-items: center;
}

.color-field input[type="text"] {
  width: 5em;
  margin-right: 0.25em;
}
.input-group.horizontal {
  display: inline-block;
}

.input-group.horizontal .input-group-item {
  margin-right: 0.25em;
}
.input-group-item {
  display: inline-flex;
  align-items: baseline;
}
.radio-option input[type="radio"] {
    margin: 0 .25em;
}.footer-panel input[name="footer-text"]{
    width: 250px;
}
.editor {
    display: flex;
}

.editor-panels {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
    flex: 1 auto;
    border: 1px solid rgba(0,0,0,.3);
    border-top: none;
    border-bottom: none;
}

.editor textarea {
    margin: 0 auto;
    width: 100%;
    flex: 1;
    font-size: 1rem;
    font-family: "Helvetica Neue", "Fira Code", "Fira Mono", Inconsolata, Monaco, Consolas, monospace;
    line-height: 150%;
    border: none;
    resize: none;
    padding: 5%;
    outline: none;
}

.tab {
  cursor: pointer;
}


.tab-list {
  list-style: none;
}.icon svg {
    width: inherit;
    height: inherit;
}
.editor-tab-bar {
    font-size: 1rem;
    position: relative;
    color: rgba(0,0,0,0.8);
    flex: 0 0 100px;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,.1);
    height: 100%;
    padding: 1rem;
}


.editor-tab-bar .editor-tabs {
    flex: 1;
}

.editor-tab-bar .button {
    width: 100%;
    margin-bottom: .5rem;
}

.editor-tab-bar .primary-button {
    background:  hsla(208, 30%, 50%, 1);
}

.editor-tab-bar .tab-list  {
    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: center;
}

.editor-tab-bar .tab-list[aria-orientation="vertical"] {
    flex-direction: column;
    font-size: .8rem;
}

.editor-tab-bar .tab-list[aria-orientation="vertical"] .tab {
    width: 60px;
    height: 60px;
    margin-bottom: .5rem;
    user-select: none;
    text-align: center;
    padding: .5rem .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.editor-tab-bar .tab {
    user-select: none;
    text-align: center;
    padding: .5rem .5rem;
}

.editor-tab-bar .tab:hover {
    color: hsla(208, 99%, 43%, 1);
}

.editor-tab-bar .tab-list .tab[aria-selected=true] {
    font-weight: 600;
    text-decoration: none;
    position: relative;
    border-radius: .125rem;
    border: 1px solid rgba(0,0,0,.1);
    background: hsla(0, 0%, 0%, .075);
}

.editor-tab-bar .tab-list .tab[aria-selected=true]:hover {
    color: rgba(0,0,0,0.8);
}
.presentation-stage {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1 auto;
  flex-direction: column;
}
.presentation {
  position: relative;
  /* width: 100%; */
  /* height: 100%; */
}

.presentation .slide {
  background: #ddd;
}

.presentation::backdrop {
  background: rgb(0, 0, 0);
}
.slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1em;
    justify-content: space-around;
}

.slide-upper-padding,
.slide-lower-padding {
    flex: 0 1 auto;
}

.slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    height: inherit;
}

.slide-content p,
.slide-content code,
.slide-content>ul,
.slide-content>ol {
    border: 1px solid transparent;
}

.slide-content p {
    flex: 0 1 auto;
}

.slide-content .slide-image {
    flex: 1 1 auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.slide-content h1,
.slide-content h2,
.slide-content h3,
.slide-content h4,
.slide-content h5 {
    flex: 0 1 auto;
    margin: 0;
}

.slide-content h1 {
    font-size: 2.25em;
}

.slide-content h2 {
    font-size: 1.75em;
}

.slide-content h3 {
    font-size: 1.5em;
}

.slide-content h4 {
    font-size: 1.25em;
}

.slide-content h5 {
    font-size: 1em;
}

.slide-content h2:first-child {
    margin-bottom: 0.35em;
}

.slide-content mark {
    background: skyblue;
    color: black;
}

.slide-content p,
.slide-content blockquote,
.slide-content ol,
.slide-content ul {
    line-height: 140%;
}

.slide-content ol,
.slide-content ul {
    margin-left: 1em;
    text-align: left;
    padding-left: 1em;
}

.slide-content>p,
.slide-content>blockquote,
.slide-content>ol,
.slide-content>ul {
    width: 100%;
    margin: 0 auto;
}

.slide-content p,
.slide-content blockquote, 
.slide-content>p,
.slide-content>blockquote {
    margin-bottom: .5em;
}

.slide-content iframe {
    width: 100%;
    height: 100%;
}

.slide-content img {
    max-width: 100%;
    max-height: 100%;
}

.slide-content li {
    margin-bottom: 0.35em;
}

.slide-content li li {
    line-height: 150%;
    font-size: 0.875em;
    margin-bottom: 0.35em;
}

.slide-content pre {
    margin-top: 0.5em;
    display: flex;
}

.slide-content pre code {
    display: block;
    width: 80%;
    /* margin: 0 auto; */
    font-size: 0.65em;
    text-align: left;
    border: 1px solid transparent;
}

.slide-content table {
    border-collapse: collapse;
    width: 95%;
    margin: 0 auto;
}

.slide-content th,
.slide-content td {
    text-align: center;
}

.slide-content td {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.slide-content .chart-wrapper {
    flex: 1 auto;
    display: flex;
    justify-content: center;
}.presentation {
    box-shadow: 0px 0px 20px rgba(0,0,0,.15);
    border: 1px solid rgba(0,0,0,.2);
}.slide-footer {
  position: absolute;
  padding: 0.5em;
  right: 0;
  bottom: 0;
  font-size: 0.25em;
  width: 100%;
  display: flex;
  line-height: 1em;
}

.slide-footer.dark {
  color: #fff;
}

.slide-footer.light {
  color: #000;
}

.slide-footer.dark .icon svg {
  fill: #fff;
}

.slide-footer.light .icon svg {
  fill: #000;
}

.slide-footer .icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-right: 0.25em;
}

.slide-footer-content {
  display: flex;
  align-items: center;
  line-height: 1em;
}
.watermark-icon {
  height: 1.5em;
  width: auto;
  display: inline-block;
}
.preview-footer {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    flex: 0;
    padding: 0;
    width: 100%;
    font-size: .875rem;
    color: rgba(0,0,0,.75);
    margin-bottom: .25rem;
}

.preview-footer .slide-metadata {
    margin-bottom: .25rem;
}.slide-nav-button {
    font-size: .725rem;
    padding: .2125rem .6125rem;
    border-radius: .125rem;
    background: rgb(200, 208, 216);
    color: hsla(210, 17%, 30%, 1);
}


.preview-navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.preview-navigation .button:first-child {
    margin-right: .125rem;
}

.preview-navigation .button:last-child {
    margin-left: .125rem;
}.slide-metadata {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: .25rem 1.25rem;
}

.slide-metadata .dot {
    margin: 0 .5rem;
}
.play-button {
  font-size: inherit;
  padding: .5rem .5rem;
  white-space: nowrap;
}
.toolbar {
    display: flex;
    flex-direction: row;
}
.toolbar-group {
  display: flex;
  flex: 1 auto;
}
.toolbar-group button {
  margin: 0 .25rem 0 0;
}

.toolbar-group.align-right {
  justify-content: flex-end;
}

.toolbar-group.align-right button {
  margin: 0 0 0 .25rem;
}
.preview-button {
    border: 1px solid rgba(0,0,0,.1);
}
.preview-toolbar {
    margin: -1rem -1rem 1rem -1rem;
}
.preview {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.preview.playing .presentation {
    outline: none;
}

.preview.show-text-boundaries .slide-content p,
.preview.show-text-boundaries .slide-content>ol,
.preview.show-text-boundaries .slide-content>ul,
.preview.show-code-boundaries .slide-content>pre code {
    border: 1px dashed red;
}

.preview-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,.1);
}

.preview-wrapper .preview-footer {
    margin-top: .5rem;
}
.home {
    height: inherit;
    display: grid;
    grid-template-rows: 3.5rem repeat(32,1fr);
    grid-template-columns: repeat(32, 1fr);
}

.home .activity-bar {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 34;
}

.home .editor {
    grid-row-start: 2;
    grid-row-end: 34;
    grid-column-start: 1;
    grid-column-end: 17;
}

.home .preview-wrapper {
    grid-row-start: 2;
    grid-row-end: 35;
    grid-column-start: 17;
    grid-column-end: 34;
}


@media (max-width: 1100px) {

    .home {
        grid-template-rows: 2.5rem repeat(32,1fr);
    }

    .home .button {
        padding: .325;
    }

    .home .activity-bar, 
    .home .toolbar {
        font-size: .8325rem;
    }

    .home .activity-bar-group.file-actions .button {
        margin-right: 0.25rem;
    }

    .home .activity-bar .logo {
        width: 110px;
    }

    .home .activity-bar .mailing-list-link .cta-text {
        display: none;
    }

    .home .preview-wrapper {
        grid-column-start: 1;
        grid-column-end: 33;
        grid-row-start: 2;
        grid-row-end: 16;
        margin: 0;
        padding: 1rem;
    }

    .home .preview-toolbar { 
        margin: -.5rem;
        margin-bottom: .5rem;
  }

    .home .preview-wrapper {
        box-shadow: none;
    }

    .home .preview-wrapper .preview-footer {
        margin-top: 1.5rem;
    }

    .home .editor {
        grid-column-start: 1;
        grid-column-end: 34;
        grid-row-start: 17;
        grid-row-end: 36;
        border-top: 1px solid rgba(0,0,0,.3);
    }

    .home .editor-tab-bar {
        grid-column-start: 1;
        grid-column-end: 34;
        grid-row-start: 13;
        grid-row-end: 13;
        display: flex;
        flex: 0 0 50px;
        justify-content: center;
        width: 100%;
        padding: .5rem;
    }

    .editor-tab-panel .field-label {
        width: 200px;
    }
}
.activity-bar {
  display: flex;
  flex-direction: row;
  z-index: 2;
  font-size: 0.9375rem;
  background: #fff;
  padding: 0 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.activity-bar:focus-within,
.activity-bar:hover {
  opacity: 1;
}

.activity-bar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.activity-bar-group.spacer {
  flex: 1 auto;
}

.activity-bar-button,
.activity-bar-button.trigger {
  display: block;
  margin-right: 0.25rem;
  background: hsla(219, 8%, 45%, 1);
  color: #fff;
  font-size: inherit;
  font-weight: normal;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0rem;
}

.activity-bar-button.primary {
  background: hsla(208, 100%, 43%, 1);
}

.activity-bar-button .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.5rem;
}

.activity-bar-button:hover,
.activity-bar-button:focus,
.activity-bar-button.trigger:hover,
.activity-bar-button.trigger:focus {
  border-color: rgba(255, 255, 255, 0.175);
}

.activity-bar-group.file-actions .button {
  margin-right: 0.5rem;
}

.activity-bar-group.user-actions .activity-bar-button,
.activity-bar-group.site-actions .activity-bar-button {
  background: none;
  box-shadow: none;
}

.activity-bar-group.user-actions .content {
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}

.activity-bar-link {
  padding: 0.5rem;
  border-radius: 0.125rem;
}

.activity-bar .link-button,
.activity-bar-link {
  margin: 0 0.5rem;
}

.activity-bar .link-button,
.activity-bar-link,
.activity-bar-link:visited {
  color: hsl(340, 91%, 41%);
  text-decoration: none;
}

.activity-bar .mailing-list-link {
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
  border: 2px solid hsl(340, 91%, 41%);
  font-weight: bold;
}

.activity-bar .mailing-list-link .cta-text {
    font-size: 80%;
    font-weight: normal;
    display: block;
}

.activity-bar .mailing-list-link:hover {
    background: hsl(340, 91%, 41%);
    color: #fff;
}

.activity-bar-link:hover,
.activity-bar-link:focus {
  color: #fff;
  background: hsl(340, 91%, 41%);
}

.activity-bar .logo {
  width: 132px;
  display: block;
  vertical-align: bottom;
}
.link-button {
  border: 0;
  background: none;
  color: blue;
  text-decoration: underline;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.new-presentation-button {
    
}.modal {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 10%;
  background: rgba(4, 16, 27, 0.65);
  z-index: 100;
  box-shadow: inset 0px 0px 130px rgba(0, 0, 0, 0.15);
}

.modal-panel {
  width: 600px;
  min-height: 300px;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(0,0,0,.1);
  border-radius: .25rem;
}

.modal .close-button {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: .8rem;
  color: #fff;
}

.modal .contents {
  overflow: auto;
}.about .contents {
  padding: 1rem;
  line-height: 140%;
}

.about h2 { margin-top: 1rem; margin-bottom: .5rem; }
.about p, .about ul { margin-bottom: 1rem; }
.about ul { margin-left: 1rem; }
.app {
    height: inherit;
}
/* PREVIEW MODE */

.is-previewing {
    background: #333;
}

.is-previewing  .preview-wrapper {
    grid-row-start: 1;
    grid-row-end: 33;
    grid-column-start: 1;
    grid-column-end: 34;
    margin: 1rem;
    padding: 0;
} 

.is-previewing .preview-footer {
    color: rgba(255,255,255,.75);
}

.is-previewing .toolbar {
    margin: 0 0 1rem 0;
} 

.is-previewing .editor, 
.is-previewing .activity-bar, 
.is-previewing .file-toolbar-group {
    display: none;
}
.full-presentation {
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-presentation:fullscreen {
    cursor: none;
}

.webkit-fullscreen .full-presentation:-webkit-full-screen {
    cursor: none;
}

.full-presentation::backdrop {
    background: rgb(0, 0, 0);
}.general-help {
    overflow: auto;
}

.general-help.side-panel .content {
    font-size: .9325rem;
    line-height: 140%;
    padding: 1rem;
}

.general-help code {
    background: hsl(53, 100%, 83%);
    padding: .0125rem .25rem;
    margin-bottom: .25rem;
    display: inline-block;
}

.general-help pre {
    background: #e8eef8;
    padding: .5rem;
    font-size: 1rem;
    margin: 1rem 0;
    overflow: auto;
}

.general-help pre code {
    background: none;
    padding: 0;
    margin: 0;
}

.general-help .content h2 {
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid #333;
    padding-bottom: .75rem;
}

.general-help .content h2:first-child {
  margin-top: 0;
}

.general-help .content h3 {
    font-weight: normal;
    margin-bottom: 1rem;
}

.general-help .content p {
    margin-bottom: 1rem;
}

.general-help .content ul,
.general-help .content ol {
    margin: 0 0 1rem 1.5rem;
}.side-panel {
    position: absolute;
    top: 0;
    height: 100%;
    width: 600px;
    background: #fff;
    border-left: 1px solid #ddd;
    z-index: 10;
    display: grid;
    grid-template-rows: [header] 3rem [header-end content] auto [content-end];
}

.side-panel.left {
    left: 0;
}

.side-panel.right {
    right: 0;
}

.side-panel header {
    grid-row: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #42464c;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.side-panel .content {
    grid-row: content;
    overflow-y: auto;
    height: auto;
    font-size: .825rem;
}

.side-panel .title {
    font-weight: normal;
    font-size: 1.25rem;
    flex: 1;
}

.side-panel .close-button {
    font-size: 1.25rem;
    color: inherit;
    border: none;
    background: none;
}

.side-panel .title-icon {
    flex: 0;
    height: 25px;
    margin-right: .5rem;
}.keyboard-help section {
    display: flex;
    flex-direction: column;
}

.key-list {
    flex: 1 1 auto;
    margin-bottom: 1rem;
    width: 100%;
}

.key-list caption {
    font-weight: bold;
    text-align: left;
}

.keyset {
    text-align: right;
    width: 200px;
    max-width: 200px;
}

.keyset kbd {
    border-radius: 3px;
    background: whitesmoke;
    border: 1px solid #adadad;
    padding: .15rem .35rem;
    margin: 0 .1rem;
    font-weight: bold;
    font-family: Helvetica;
    font-size: .8rem;
    line-height: 1.75rem;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, .375);
}

.keyset .key-join {
    font-size: .75rem;
    margin: 0 .25rem;
}

.keys-desc {
    padding-left: .5rem;
    width: auto;
}
.notification {
    background: #fff;
    border-radius: .125rem;
    width: 400px;
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: .5rem;
    font-size: .8rem;
    box-shadow: 1px 1px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification .primary-button {
    box-shadow: none;
    border-radius: .125rem;
    background-color: hsla(192, 84%, 32%, 1);
    color: #fff;
    font-size: inherit;
    padding: .35rem .5rem .5rem .5rem;
}

.notification .content {
    line-height: 1.2rem;
}

.notification footer {
    text-align: right;
}.notifications {
    z-index: 20;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
}.error-notification {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.25);
    box-shadow: 0px 2px 8px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    max-width: 700px;
    padding: 1.5rem;
    position: absolute;
    width: 500px;
}

.error-notification-content {
    flex: 1 1 auto;
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

.error-notification-actions {
    display: flex;
}

.error-notification-action {
    flex: 0;
}

.error-notification-actions .button {
    padding: .5rem;
    border: 1px solid transparent;
    margin: 0 .25rem;
}.error-notifications {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    padding-top: 5rem;
    height: 100vh;
    background: rgba(255,255,255,.8);
    box-shadow: inset 0px 0px 105px rgba(0,0,0,.4);
}.files-list-item-modified-at {
    font-size: .75rem;
    color: rgb(94, 114, 119);
}.files-panel {
    padding: .25rem;
    box-shadow: 3px 0px 10px rgba(0,0,0,.2);
}

.files-panel header {
    padding: .5rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border-bottom: 1px solid hsla(0, 0%, 93%, 1);
    width: 100%;
}

.files-list {
    width: 100%;
    font-size: 1rem;
}

.files-panel .activity-dot {
    margin-right: .5rem;
}

.files-list-item {
    line-height: 1.2rem;
    padding: .75rem .5rem .7rem .25rem;
    border-bottom: 1px solid hsla(204, 25%, 90%, 1);
    display: flex;
    align-items: center;
}

.files-list-item:focus-within {
    background: hsla(204, 20%, 96%, 1);
}

.files-list-item-details  {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.files-list-item-title {
    font-weight: 600;
    color: #0271c9;
}

.files-list-item-title:focus {
    outline: none;
}.files-action-menu {
    display: inline-block;
    position: relative;
  }
  
  .files-action-menu .trigger {
    cursor: pointer;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: bold;
    padding: .4rem .625rem;
    border-radius: .125rem;
  }
  
  .files-action-menu .trigger:hover,
  .files-action-menu .trigger:focus,
  .files-action-menu .trigger.is-open {
    border-color: #CCC;
    background-color: #0088fe;
    color: #fff;
  }
  
  .files-action-menu .trigger[aria-disabled=true] {
      opacity: .35;
  }

  .files-action-menu .trigger[aria-disabled=true]:hover, 
  .files-action-menu .trigger[aria-disabled=true]:focus {
      background-color: transparent;
      background-image: none;
      border-color: transparent;
  }
  
  .files-action-menu .menu {
    background: #fff;
    border: 1px solid rgba(200, 200, 200, 0.4);
    list-style-type: none;
    position: absolute;
    top: 100%;
    z-index: 99;
    padding-left: 0;
    margin: 4px 0 0 0;
    min-width: 135px;
    box-shadow: 1px 1px 0px rgba(0,0,0,.5);
    border-radius: .125rem;
    font-size: .75rem;
  }
  
  .files-action-menu .menu {
    right: 0;
  }
  
  .files-action-menu [role=menuitem] {
    cursor: pointer;
    padding: .25rem .5rem .15rem .5rem;
    border-bottom: 1px solid #EEE;
  }
  
  .files-action-menu [role=menuitem]:hover,
  .files-action-menu [role=menuitem]:focus {
    color: #064a86;
  }
  
  .files-action-menu [role=menuitem].is-selected {
    cursor: default;
    font-weight: bold;
  }
  
.activity-dot {
    width: 10px;
    height: 10px;
}
.activity-dot.on .circle-icon {
    fill: green;
}.sk-fading-circle {
    width: 40px;
    height: 40px;
    position: relative;
  }
  
  .sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: rgba(0,0,0,.5);
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  }
  .sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  .sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  .sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  .sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
  }
  .sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  .sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  .sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); 
  }
  .sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); 
  }
  .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; 
  }
  .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; 
  }
  .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; 
  }
  .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; 
  }
  .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; 
  }
  .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; 
  }
  .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; 
  }
  .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
  }
  .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
  .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
  }
  .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
  }
  
  @-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
  }
  
  @keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; } 
  }.loading {
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading .sk-fading-circle {
    margin: 1.5rem auto;
}

.loading .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.loading-message {
font-size: 1.5rem;
    text-align: center;
    color: hsl(0, 0%, 40%);
}
span.emoji {
	display: -moz-inline-box;
	-moz-box-orient: vertical;
	display: inline-block;
	vertical-align: baseline;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	width: 1em;
	height: 1em;
	background-size: 1em;
	background-repeat: no-repeat;
	text-indent: -9999px;
	background-position: 50%, 50%;
	background-size: contain;
}

span.emoji-sizer {
	line-height: 0.81em;
	font-size: 1em;
 	margin: -2px 0;
}

span.emoji-outer {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	height: 1em;
	width: 1em;
}

span.emoji-inner {
	display: -moz-inline-box;
	display: inline-block;
	text-indent: -9999px;
	width: 100%;
	height: 100%;
	vertical-align: baseline;
	*vertical-align: auto;
	*zoom: 1;
}

img.emoji {
	width: 1em;
	height: 1em;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

body {
    /* background: hsla(0,0%,90%,1); */
    background: hsla(214, 8%, 91%, 1);
    height: inherit;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-variant-ligatures: common-ligatures;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

main {
    height: inherit;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visually-hidden:active,
.visually-hidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}