/* Base candidates / overrides
-------------------------------------------------- */
.keyline-stroke { border-width: 2px; }
.keyline-dark { border-color: rgba(0,0,0,.75); }
.keyline-light { border-color: rgba(0,0,0,.01); }
.space-top6 { margin-top: 60px; }
.show-in-hover { opacity: 0; }
*:hover > .show-in-hover { opacity: 1; }
.row-fill { height: 100vh; }
.space-top7_5 { margin-top: 75px; }
.space-top10 { margin-top: 100px; }
.space-top26 { margin-top: 260px; }
.space-left36 { margin-left: 360px; }
.space-left17 { margin-left: 170px; }
.invisible { opacity: 0; height: 0; }
.pointer { cursor: pointer; }
.dim { opacity: .5; }
.prose ul { margin-left: 20px; }
.dark .keyline-all.keyline-stroke,
.dark .keyline-bottom.keyline-stroke {
  border-width: 2px;
}

.fill-orange {
  background-color: #ff9933;
}

.button.fill-dark:hover {
  background: rgba(0,0,0,.9);
}

.crimson {
  font-family: 'Crimson Text', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
}

.crimson strong,
.crimson .strong {
  font-family: 'Crimson Text', sans-serif;
  font-size: 16px;
  line-height: 0; /* Things break without this, I don't get it */
  font-weight: 700;
}

.crimson .small,
.crimson.small {
  font-size: 14px;
  line-height: 20px;
}
.limiter-lg {
  width:86.66666%;
  margin-left:auto;
  margin-right:auto;
  }

.rounded-toggle { background: rgba(0,0,0,.5); }
.rounded-toggle:hover { background: rgba(0,0,0,.75); }
.rounded-toggle > *:hover,
.rounded-toggle > * { color: white; }
.rounded-toggle:hover > .active { color: rgba(0,0,0,.75); }

.dark .rounded-toggle .active { background: #404040; }
.dark .rounded-toggle:hover { background: rgba(255,255,255,.25); }
.dark .rounded-toggle:hover > .active { color: white; }

.center-x {
  text-align: center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.fill-lighten0 { background-color: rgba(255,255,255,.05); }
.center-y {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.fill-canvas {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="6" width="6"><rect height="3" width="3" x="3" y="3" style="fill:rgba(0,0,0,.1);"/><rect height="3" width="3" x="0" y="0" style="fill:rgba(0,0,0,.1);"/></svg>');
}
.dark .fill-canvas {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="6" width="6"><rect height="3" width="3" x="3" y="3" style="fill:rgba(255,255,255,.1);"/><rect height="3" width="3" x="0" y="0" style="fill:rgba(255,255,255,.1);"/></svg>');
 }
.fill-dotgrid {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="5" width="5"><ellipse ry="1" rx="1" cy="4" cx="4" style="fill:rgba(0,0,0,.2);"/></svg>');
}

.button:not(.disabled) { cursor: pointer;}
a:not(.disabled) { cursor: pointer;}

.button.disabled.stroke {
  background: transparent;
  box-shadow: 0px 0px 0px 2px rgba(0,0,0,.2) inset;
}

.noscroll {
  height:60vh;
  min-height:600px;
}

.hide {
  display:none;
}

/* scrollbar */
.scroll-styled::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
}
.scroll-styled::-webkit-scrollbar:hover {
  background: transparent;
}
.scroll-styled::-webkit-scrollbar-track {
  background:none;
}
.scroll-styled::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.05);
  border: 4px solid white;
  width: 8px;
  border-radius: 10px;
}
.fill-light.scroll-styled::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.05);
  border: 4px solid #f8f8f8;
  width: 8px;
  border-radius: 10px;
}

.scroll-styled::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.2);
}
.scroll-styled::-webkit-scrollbar-track:hover {
  background: transparent;
}

.dark .scroll-styled::-webkit-scrollbar,
.dark.scroll-styled::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
}
.dark .scroll-styled::-webkit-scrollbar-thumb,
.dark.scroll-styled::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border: 4px solid #404040;
  width: 8px;
  border-radius: 10px;
}
.dark .scroll-styled::-webkit-scrollbar-thumb:hover,
.dark.scroll-styled::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.25);
}
.dark .scroll-styled::-webkit-scrollbar:hover,
.dark.scroll-styled::-webkit-scrollbar:hover {
  background: transparent;
}

/* range input */
input[type=range].editor-range {
  min-width: 0;
  width: 100px;
  height: 20px;
  padding:0;
  border: 2px solid rgba(0,0,0,.5);
  background: white;
  border-radius: 10px;
  margin: 0 0;
  overflow: visible;
  vertical-align: top;
}

input[type=range].editor-range:focus {
  border-color: rgba(0,0,0,.75);
}

input[type=range].editor-range::-webkit-slider-thumb {
  box-shadow: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(0,0,0,.5);
}

input[type=range].editor-range::-ms-thumb {
  box-shadow: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(0,0,0,.5);
}

input[type=range].editor-range::-moz-range-thumb {
  box-shadow: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(0,0,0,.5);
}

input[type=range].editor-range:hover::-webkit-slider-thumb {
  background: rgba(0,0,0,.75);
}

input[type=range].editor-range:hover::-ms-thumb {
  background: rgba(0,0,0,.75);
}

input[type=range].editor-range:hover::-moz-range-thumb {
  background: rgba(0,0,0,.75);
}

.checkbox-pill input[type=checkbox] + *:before {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5);
  background: white;
  margin-right: 10px;
}

/* Guidelines layout
-------------------------------------------------- */

.first-example {
  float: left;
  margin-right: 10px;
  width: calc(50% - 10px);
}

.second-example {
  float: left;
  margin-left: 10px;
  width: calc(50% - 10px);
}

/* colorpickr
-------------------------------------------------- */

.colorpickr {
  position: relative;
  width: 100%;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
  color: rgba(0,0,0,.5);
  font: 10px/15px 'Open Sans', sans-serif;
}

.colorpickr .cp-col:first-child {
  width: 200px;
}

.colorpickr .cp-col:last-child {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  bottom: 20px;
  padding-right: 0;
  left: 200px;
}

.colorpickr fieldset input[type='number'], .colorpickr fieldset input[type='text'] {
  height: 25px;
  background: rgba(0,0,0,.05);
}

.colorpickr input[type='number'],
.colorpickr input[type='text'] {
  color: rgba(0,0,0,.5);
  font: 12px/15px Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace;
}

.colorpickr .cp-floor .cp-output {
  width: 100%;
 }

.colorpickr fieldset label {
  top: 5px;
}

.colorpickr button {
  width: 50%;
  line-height: 10px;
  padding: 5px;
  vertical-align: top;
}

.colorpickr fieldset div:first-child {
  height: 25px;
}

.colorpickr .cp-mode-tabs {
  margin-bottom: 5px;
 }

.colorpickr .cp-inputs > div {
  margin-bottom: 0;
}

.colorpickr fieldset {
  margin-bottom: 5px;
}

.colorpickr .cp-fl {
  display: none;
}

.colorpickr fieldset div:last-child {
  float: right;
  width: 85px;
}

.colorpickr .cp-col {
  padding-left: 0;
}

.colorpickr .cp-colormode-slider {
  right: -80px;
}
.colorpickr input[type=range] {
  min-width: 80px;
}

.colorpickr .cp-floor {
  width: auto;
  position: absolute;
  left: 200px;
  right: 0;
  bottom: 0;
  padding: 0;
}

.colorpickr .cp-fill-tile {
  width: 85px;
  float: right;
}

.colorpickr .cp-hex.cp-relative.cp-fr {
  margin: 0;
}

/* UI components
-------------------------------------------------- */

.icon-grid {
  -webkit-transition:background .125s;
     -moz-transition:background .125s;
      -ms-transition:background .125s;
          transition:background .125s;
}

.icon-grid__button:not(.check) {
  color: rgba(0,0,0,.25);
}

.icon-grid__group:hover .icon-grid__button:not(.check) {
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.5);
}

.dark .icon-grid__button:not(.check) {
  color: rgba(255,255,255,0.25);
}

.dark .icon-grid__button.check {
  border-color: white;
}

.dark .icon-grid__group:hover .icon-grid__button:not(.check) {
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.5);
}

.swatch-shadow {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

.icon-shadow { box-shadow: inset 0 0 0 0px rgba(0,0,0,.05); }
.icon-shadow-activegroup { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.icon-shadow-activegroup:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.selected-icon-actions,
.icon-shadow-active,
.icon-shadow-active:hover {
  background-color: rgba(82, 161, 216, .1);
  box-shadow: inset 0 0 0 1px #52a1d8;
}

.dark .icon-shadow { box-shadow: inset 0 0 0 0px rgba(255,255,255,.05); }
.dark .icon-shadow-activegroup { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.dark .icon-shadow-activegroup:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.dark .icon-shadow-active,
.dark .icon-shadow-active:hover { box-shadow: inset 0 0 0 1px rgba(82, 161, 216, .75); }

/* Modal
-------------------------------------------------- */

.modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal-entity {
  border-radius: 3px;
  overflow: hidden;
  top: 40px;
  margin-left:auto;
  margin-right:auto;
  float:none;
}

.modal-underlay {
  background: rgba(0,0,0,0.1);
}

/* Nubs
-------------------------------------------------- */
.nub {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

.right-nub {
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-left: 8px solid white;
}

.top-nub {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

.bottom-nub {
  position:absolute;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}

.offset-nub {
  right: -8px;
}

.left-nub {
  position:absolute;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid white;
  border-left: 0;
}

.nub-bottom { bottom: 10px; top: auto; }
.nub-top { top: 10px; }

.dark .nub,
.dark.nub {
  border-bottom-color: #404040;
}

.dark .top-nub,
.dark.top-nub { border-bottom-color: #404040; }

.dark .right-nub,
.dark.right-nub { border-left-color: #404040; }

.dark .left-nub,
.dark.left-nub { border-right-color: #404040; }

.left-nub.tooltip-nub   { border-right-color: white;}
.right-nub.tooltip-nub  { border-left-color: white;}
.top-nub.tooltip-nub    { border-bottom-color: white;}
.bottom-nub.tooltip-nub { border-top-color: white;}

.top-nub.nub-darken1 { border-bottom-color: rgba(0,0,0,.1)}
.bottom-nub.light-nub { border-top-color: #f8f8f8; }

.cooltip { z-index: 2; }

/* Media Queries
-------------------------------------------------- */
@media only screen and (max-width:900px) {
  .limiter-lg {
    width: 100%;
    padding-left:20px;
    padding-right:20px;
  }
}

@media only screen and (max-width: 640px) {
  .first-example, .second-example {
    width: 100%;
    margin: auto;
  }
  .clear-margin-mobile {
    margin: 0;
  }
}

/* Transitions
-------------------------------------------------- */

.fade-enter {
  opacity: 0;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: all 200ms ease-out;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0;
  transition: all 200ms ease-out;
}

.iconactions-enter {
  opacity: 0;
  -webkit-transform: scale(.9);
  -moz-transform: scale(.9);
  -ms-transform: scale(.9);
  transform: scale(.9);
}

.iconactions-enter.iconactions-enter-active {
  opacity: 1;
  transition: all 200ms ease-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.iconactions-leave {
  opacity: 1;
}

.iconactions-leave.iconactions-leave-active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 0;
  transition: all 200ms ease-out;
}

.colorpickr-enter {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.colorpickr-enter.colorpickr-enter-active {
  max-height: 250px;
  opacity: 1;
  overflow: hidden;
  transition: all 200ms ease-out;
}

.colorpickr-leave {
  max-height: 250px;
  opacity: 1;
  overflow: hidden;
}

.colorpickr-leave.colorpickr-leave-active {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 200ms ease-out;
}

.modal-enter {
  opacity: 0;
}

.modal-enter .modal-entity {
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);

  transition: all 200ms ease-out;
}

.modal-enter.modal-enter-active {
  opacity: 1;
  transition: all 200ms ease-out;
}

.modal-enter.modal-enter-active .modal-entity {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.modal-leave {
  opacity: 1;
}

.modal-leave .modal-entity {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 150ms ease-out;
}

.modal-leave.modal-leave-active {
  opacity: 0;
  transition: all 200ms ease-out;
}

.modal-leave.modal-leave-active .modal-entity {
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  transition: all 150ms ease-out;
}