.drawboard {
  border: 1px solid #C5C5C5;
  border-radius: 10px;
  width:100%;
  text-align: center;
  background-color: white;
}
.drawboard.modal{
  width: calc(100% - 36px);
  margin:18px;
  border-radius:2px;
  height:auto;
}
.drawboard .show {
  display: block;
}
.zwibbler-tools{
  border-radius:4px;
  border:1px solid #e6e6e6;
  box-shadow: 1px 1px 3px #e6e6e6;
  display: inline-block;
  padding: 9px;
}

.start-drawing {
  margin: 10px auto;
  padding: 5px 10px;
  font-size: 14px;
}

/* Zwibbler styles */
[zwibbler] {
  position: relative;
  width: 100%;
  height: 100%;
}

[z-canvas] {
  /* position: absolute; */
  width: 99%;
  height: 95%;
}

.tools {
  padding: 9px;
  background-color: white;
  z-index: 10;
  border-radius: 10px;
}

  .tools input {
    /*display: inline;
    vertical-align: middle;*/
  }

  .tools button[tool] {
    width: 40px;
    height: 40px;
    font-size: 18px;
    padding: 5px;
    background-color: white;
    border: none;
    vertical-align: middle;
  }
  .tools button:hover{
    color:black
  }

  .tools input[tool] {
    width: 40px;
    height: 40px;
    font-size: 18px;
    padding: 5px;
    background-color: white;
    border: none;
    /*margin-bottom: 5px;*/
  }

  .tools .selected {
    color: #009BF7;
    fill: #009BF7
  }

  .tools button:disabled {
    color: lightgray;
  }

  .tools input.slider[tool] {
    width: 120px;
    display: inline-block;
    /*height: 40px;*/
  }

  .tools .exit {
    padding: 10px;
    margin: 0 auto;
    color: black;
  }

  .tools .exit:hover {
    color: #009BF7;
  }

  .zwibbler-overlay {
      outline: 0px !important;
  }