body {
  background-color: #fdf9f9;
  font-family: Arial;
  font-size: 14px;
  color: #353333;
  table-layout: fixed; }

form {
  margin: 0px; }

.grey {
  color: #a5a5a5; }

.border-bottom {
  border-bottom: 1px solid #dbd9d9; }

.button {
  background-color: #2daae2;
  font-weight: bold;
  color: #fff;
  padding: 10px;
  font-size: 13px;
  display: inline-block;
  text-align: Center;
  border-radius: 4px;
  min-width: 150px;
  transition-duration: 0.3s;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  box-sizing: border-box;
  margin-right: 10px; }

.button.alternative {
  background-color: #333333; }

.button.negative {
  background-color: #bf1131; }

.button:active {
  opacity: 0.5; }

.info {
  background-color: #f1f1f1;
  padding: 25px;
  border-radius: 10px;
  color: #757575; }

.info-text {
  font-size: 14px;
  color: #353333;
  margin-bottom: 40px; }

.page {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background-color: #fdf9f9; }

.page.start-out-left {
  left: -100%; }

.page.start-out-right {
  left: 100%; }

.page.start-transparent {
  opacity: 0; }

.page.go-out-left {
  left: -100%;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out; }

.page.go-out-right {
  left: 100%;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out; }

.page.go-in {
  left: 0px;
  opacity: 1;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  z-index: 1000; }

h1 {
  font-family: Roboto;
  font-size: 28px;
  font-weight: 300; }

h2 {
  font-size: 24px;
  font-weight: 600;
  border-bottom: 1px solid #dbd9d9;
  padding-bottom: 10px;
  margin-bottom: 20px; }

.toolbar {
  height: 50;
  display: flex;
  align-items: center;
  background-color: #e6e6e6;
  padding-left: 10px; }

.toolbar-button {
  padding: 10px;
  color: #333;
  cursor: pointer;
  margin: 5px 10px 5px 0;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-weight: 600; }
  .toolbar-button svg {
    margin: 0 5px 0 0; }
    .toolbar-button svg.type1 {
      color: #3788d8; }
    .toolbar-button svg.type2 {
      color: #dc7a00; }
    .toolbar-button svg.type3 {
      color: #b10303; }
    .toolbar-button svg.type4 {
      color: #039e16; }

.toolbar-button:hover {
  background-color: #fff;
  color: #2daae2; }

.toolbar-button:active {
  opacity: 0.5; }

.toolbar-button.app-only {
  display: none; }

.align_right .button {
  margin-left: 10px;
  margin-right: 0px; }

.margin_top_big {
  margin-top: 50px; }

.margin_bottom_big {
  margin-bottom: 50px; }

.margin_bottom {
  margin-bottom: 20px; }

.margin_top {
  margin-top: 20px; }

.project_selector {
  display: flex;
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  border-bottom: 1px solid #ececec;
  height: 65px;
  align-items: center; }

.project_selector_logo {
  max-width: 150px;
  max-height: 50px; }

.project_selector_logo img {
  max-width: 150px;
  max-height: 50px; }

a {
  color: #027db4; }

@media all and (min-width: 600px) {
  .project_selector .desktop_only {
    display: flex;
    height: 65px;
    align-items: center;
    width: 100%; } }

.project_selector_button {
  cursor: pointer;
  padding: 20px;
  border-radius: 3px; }

.project_selector_name {
  padding-left: 20px;
  flex-grow: 1; }

.project_selector_button:active {
  opacity: 0.5; }

.project_selector_button:hover {
  background-color: #ececec; }

@media all and (max-width: 600px) {
  .button {
    display: block;
    padding: 20px;
    width: 100%;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 10px; }
  .button:last-child {
    margin-bottom: 0px; }
  .toolbar {
    height: auto;
    display: flex;
    align-items: initial;
    background-color: transparent;
    padding-bottom: 0px;
    padding-left: 0px;
    margin: 20px; }
  .toolbar-button {
    background-color: #2daae2;
    font-weight: bold;
    color: #fff;
    padding: 10px;
    font-size: 13px;
    display: inline-block;
    text-align: Center;
    border-radius: 4px;
    min-width: 150px;
    transition-duration: 0.3s;
    cursor: pointer;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    flex-grow: 1;
    margin-right: 10px; }
  .toolbar-button:last-child {
    margin-right: 0px; }
  .toolbar-button:hover {
    background-color: #2daae2;
    color: #fff; } }

.popup {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; }

.popup_inner {
  position: absolute;
  width: 60%;
  max-height: 60%;
  background-color: #fff;
  border-radius: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column; }

.popup_content {
  overflow: auto;
  flex-grow: 1;
  padding: 30px; }

.popup_buttons {
  width: 100%; }

.popup_footer {
  flex-grow: 0;
  height: 80px;
  padding-left: 30px;
  padding-right: 30px;
  align-items: center;
  display: flex;
  background-color: #ececec; }

.popup_header {
  border-bottom: 1px solid #e4e4e4;
  padding: 30px;
  font-family: Roboto;
  font-size: 28px;
  font-weight: 300;
  flex-grow: 0; }

@media all and (max-width: 600px) {
  .popup_inner {
    width: 90%;
    max-height: 90%; }
  .popup_footer {
    height: auto;
    padding: 30px; } }

#tooltip {
  position: fixed;
  left: 10px;
  top: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  z-index: 1000;
  padding: 5px;
  color: #fff;
  font-size: 11px;
  display: none; }

/* jaf fix */
.jaf-form-input-select {
  padding-top: 6px !important;
  padding-bottom: 6px !important; }

textarea {
  font-size: 14px; }

input[type='text'] {
  -webkit-appearance: none;
  box-sizing: border-box; }

/* Quill Fix */
.ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor ol, .ql-editor ul {
  margin: 0 0 10px 0 !important; }

.colorpicker-item {
  width: 50px;
  height: 50px;
  border: 3px solid transparent; }

.colorpicker-item.selected {
  border: 3px solid #000; }