/* print css */
@page {
  size: A4 landscape;
}

@media print {
  body {
    transform: scale(0.8);
    position: absolute;
    top: -30px;
  }

  .print-header {
    display: block;
    width: 1024px;
    height: 64px;
  }
  .print-header img {
    float: right;
    height: 64px;
  }

  .print-header h1 {
    float: left;
    white-space: nowrap;
    letter-spacing: 0px;
    font-size: 24px;
    font-weight: 400;
    color: rgb(66, 66, 66);
    line-height: 64px;
    padding-left: 12px;
    margin: 0;
  }

  .menubar, .menu-drawer, .react-resizable-handle, .toolbar, .toolbar-color-dropdown, .tooltiptext, button {
    display: none !important;
  }

  .postit {
    border: 1px solid grey !important;
  }

  .postit textarea {
    background-color: transparent !important;
  }
}

@media screen {
  .print-header {
    display: none;
  }
}

html {
  font-family: 'Roboto', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    color: #424242; /* grey800 */
}

h2 {
  font-weight: normal;
  font-size: 1.2em;
}

.menubar {
  /*background-image: url('resources/businessmakeover_background.png');*/
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: 668px;
}

.sidebar {
    position: fixed;
    bottom: 0px;
    top: 0px;
    right: -340px;
    width: 300px;
    padding: 100px 40px;
    background-color: #f0f0ee;
    box-shadow: 0px 0px 9px #000;
    transition: 1.2s cubic-bezier(0.32, 1, 0.23, 1);
    transform: translate3d(-0px, 0, 0);
}

.sidebar-open {
    transform: translate3d(-340px, 0, 0)
}

#footer p {
  float: right;
  text-align: right;
  font-style: italic;
}

input {
    width: 100%;
    padding: 4px;
    font-size: 1.2em;
}

.funstuff {
    position: fixed;
    bottom: 0;
}

/* colors */
.orange {
  background-color: #F9904A !important;
}
.postit.orange .postit-color-layer svg {
  fill: #F9904A !important;
}
.blue {
  background-color: #699FC9 !important;
}
.postit.blue .postit-color-layer svg {
  fill: #699FC9 !important;
}
.yellow {
  background-color: #F4E96F !important;
}
.postit.yellow .postit-color-layer svg {
  fill: #F4E96F !important;
}
.green {
  background-color: #7EBA59 !important;
}
.postit.green .postit-color-layer svg {
  fill: #7EBA59 !important;
}
.pink {
  background-color: #E86F9B !important;
}
.postit.pink .postit-color-layer svg {
  fill: #E86F9B !important;
}

/* block styling */
.block h1 {
  font-size: 1.2em;
  font-weight: normal;
  padding: 6px;
  margin: 0px;
}

.block > a {
  float: right;
  cursor: pointer;
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px;
  color: #fad189;
}

.block .fa {
  color: inherit !important;
}

/* post it styling */
.postit {
  padding: 0;
/*  background-color: #F4E96F;*/
  z-index: 999;
  overflow: hidden;
  word-wrap: break-word;
  border: none;
  box-shadow: 2px 2px lightgray;
}

.postit-color-layer {
  position: absolute;
  z-index: -1;
}

.postit-color-layer svg {
  fill: #F4E96F;
}

.postit p, .postit textarea {
  display: block;
  margin: 3px;
  padding: 4px;
  font: inherit;
  font-size: 1em;
  border: none;
}

.postit textarea {
  background-color: rgba(255, 255, 255, 0.25);
  resize: none;
}

.postit .selected {
  border: 2px solid black;
}

.postit .handle {
  cursor: move;
/*  background-color: rgba(255, 255, 255, 0.5);*/
  height: 12px;
}

.postit .handle svg {
  fill: white;
  fill-opacity: 0.5;
}

.toolbar {
  height: 22px;
  padding: 5px;
  position: absolute;
  border: none;
  background-color: lightgrey;
  z-index: 1000;
}

.color-button {
  float: left;
  width: 20px;
  border: 1px solid darkgrey !important;
  border-color: darkgrey;
  height: 20px;
  cursor: pointer;
}

.toolbar-color-dropdown {
  background-color: lightgrey !important;
  padding: 2px;
  width: 24px;
}
.toolbar-color-dropdown .color-button {
  float: none;
}

.react-draggable-dragging {
  z-index: 999;
}

.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
  background-position: bottom right;
  padding: 0 3px 3px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: se-resize;
}

.addbutton {
  display: inline-block;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  visibility: hidden;
}

.addbutton .tooltip {
    visibility: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    width: 110px;
    height: 12px;
    background-color:grey;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    position: absolute;
    z-index: 1000;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.5s;
}

.addbutton .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.addbutton:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Tooltip text */
.tooltiptext {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    width: 90%;
    background-color:grey;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 4px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1001;
    top: 48px;
    right: 5px;
    margin-left: 0px;

    /* Fade in tooltip */
    opacity: 1;
    transition: opacity 1s;
}

.tooltiptext p {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    padding: 0px;
    margin: 0px;
}

.tooltiptext li {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    margin-left: -1em;
}

.fb-login {
  border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgb(66, 66, 66); line-height: 48px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; white-space: nowrap; background: none;

/*  margin-left: 0px; padding: 0px 16px 0px 72px; position: relative;*/
}

/* fixes for material-ui */

.open-dialog-contents, .template-dialog-contents {
}

.message-snackbar span {
  color: white;
}

.block-pointer:after {

content:
"";

display:
inline-block;

position:
absolute;

width:
0;

height:
0;

top:
-2px;

left:
74px;

border-style:
solid;

border-width:
110px 0
110px 26px;

}

.block-pointer.definitiefase:after
 {

border-color:
transparent transparent
transparent rgb(0,
51,
153);

}

.block-pointer.ontwerpfase:after
 {

border-color:
transparent transparent
transparent rgb(204,
51,
5);

}

.block-pointer.resultaatfase:after
 {

border-color:
transparent
transparent transparent
rgb(0,
153,
51);

}

.block h1 {

font-size:
1em;

}