/*ANNOTATION CLASS STYLE DEFINITIONS
	If we do them here we can make media
	type queries to style for different type screen sizes

*/
.annotation-blob-preview {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
}

.annotation-thumbnail-view {
  width: 150px;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: center;
  height: calc(100% - 30px);
  text-align: center;
  border: 1px #cec9c9 solid;
  border-radius: 5px;
  background-color: lightgrey;
}

.active-thumbnail {
  border: 2px solid #704498;
  margin-bottom: 2px;
}

.inactive-thumbnail {
  opacity: 0.7;
  margin-bottom: 2px;
}

.annotation-display-with-thumbnail {
  padding: 5px;
  width: 100%;
  height: calc(100% - 35px);
  border: 1px #cec9c9 solid;
}

.annotation-active-page-view {
  vertical-align: top;
  display: inline-block;
  height: 100%;
  width: calc(100% - 160px);
}

.controls-container, .annotation-pan-div, .annotation-controls-on-left > .annotation-widget-controls-container > .annotation-pan-zoom-tools-group, .annotation-controls-on-left > .annotation-widget-controls-container > .annotation-widget-tools-container, .annotation-controls-on-left > .annotation-widget-controls-container > .annotation-shapes-tools-container, .annotation-controls-on-left > .annotation-widget-controls-container > .annotation-drawing-tools-container {
  width: calc(100% - 25px); /*cater for scroll bar if required*/
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: center;
  display: inline-block;
  border: 1px #cec9c9 solid;
  border-radius: 5px 5px 2px 2px;
  vertical-align: top;
  overflow-y: auto;
  overflow-x: hidden;
}

.annotation-user-action-area {
  height: calc(100% - 0px);
  width: calc(100% - 0px);
  display: inline-block;
}
.annotation-user-action-area.using-shared-controls {
  height: 100% !important;
  width: 100% !important;
}

.lower-canvas {
  background: grey;
  border: 1px #cec9c9 solid;
}

.annotation-canvas-area {
  margin-left: 1px;
  padding: 2px;
  border: 4px white solid;
}
.annotation-canvas-area.in-panning-mode {
  border: 4px rgba(148, 181, 228, 0.968627451) solid !important;
}
.annotation-canvas-area.shared-controls-inactive {
  border: 4px lightgrey solid;
}
.annotation-canvas-area.shared-controls-active {
  border: 4px #072456 solid;
}

.line-thickness-indicator {
  min-width: 50px;
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
  vertical-align: middle;
  /*border: 1px solid black;*/
}

.annotation-colour-group {
  /*min-width: 213px;
  width: 100%;*/
}
.annotation-colour-group > .tool-group-buttons > .btn {
  width: 60px !important;
}

.annotation-thickness-group {
  /*min-width: 213px;
  width: calc(100% - 5px);*/
}

.component-tiny > .annotation-widget-controls-container {
  /*background: red;*/
  width: 370px;
}
.component-tiny > .annotation-user-action-area {
  width: calc(100% - 400px);
  float: right;
}

.component-small > .annotation-widget-controls-container {
  /*background: orange;*/
  width: 370px;
}
.component-small > .annotation-user-action-area {
  width: calc(100% - 400px);
  float: right;
}

.component-medium > .annotation-widget-controls-container {
  /*background: yellow;*/
  width: 370px;
}
.component-medium > .annotation-user-action-area {
  width: calc(100% - 400px);
  float: right;
}

.component-large > .annotation-widget-controls-container {
  /*background: green;*/
  width: 370px;
}
.component-large > .annotation-user-action-area {
  width: calc(100% - 400px);
  float: right;
}

.annotation-controls-on-left {
  display: inline-block;
  clear: both;
  border: 1px #cec9c9 solid;
  height: calc(100% - 25px);
  position: relative;
}
.annotation-controls-on-left > .annotation-user-action-area {
  /*width: 74%;*/
  position: relative;
  float: right;
}
.annotation-controls-on-left > .annotation-widget-controls-container {
  /*overflow-y: auto;*/
  height: calc(100% - 5px);
  /*width: 25%;*/
  display: inline-block;
  position: relative;
}
.annotation-controls-on-left > .annotation-widget-controls-container .left-widgets {
  float: left;
}
.annotation-controls-on-left > .annotation-widget-controls-container .right-widgets {
  float: right;
}
.annotation-controls-on-left > .annotation-widget-controls-container > .annotation-drawing-controls {
  overflow-y: auto;
  height: calc(100% - 235px);
}
.annotation-controls-on-left > .annotation-widget-controls-container > .annotation-pan-zoom-tools-group {
  position: absolute;
  bottom: 0;
  height: 375px;
}
.annotation-controls-on-left > .annotation-widget-controls-container > .annotation-pan-zoom-tools-group > .tool-group-buttons {
  float: right;
  width: 65px;
}
.annotation-controls-on-left > .annotation-widget-controls-container > .annotation-pan-zoom-tools-group > .annotation-pan-div {
  float: left;
}

.annotation-widget-data-container {
  /*width:25%;*/
}

.annotation-zoom-pan-group {
  width: 100%;
}
.annotation-zoom-pan-group > .tool-group-buttons {
  width: 63px;
  float: right;
  height: 100%;
}

.annotation-pan-div {
  border: 2px solid lightgrey;
  height: 200px;
  background-color: #eaeaea;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: calc(100% - 80px);
  margin-top: 6px;
  position: relative;
}

.annotation-side-zoom-div {
  border: 2px solid lightgrey;
  height: 115px !important;
  background-color: #eaeaea;
  display: inline-block;
}
.annotation-side-zoom-div.btn {
  /*width: calc(100% - 9em) !important;*/
}

.annotation-pan-location-indicator {
  border: 1px solid red;
  position: absolute;
}

.annotation-drawing-tools-group {
  display: inline-block;
  /*border: 1px #cec9c9 solid;*/
  border-radius: 5px 5px 2px 2px;
  vertical-align: top;
  border: none;
  /*width: calc(100% - 5px);*/
}
.annotation-drawing-tools-group > .tool-group-heading {
  /*text-align: center;*/
  font-size: small;
  font-weight: bold;
  /*background: #efefef;*/
  padding: 5px;
  border-bottom: 1px #cec9c9 solid;
  text-shadow: white 1px 1px;
  color: grey;
  background: none;
  border: none;
  text-align: left;
}
.annotation-drawing-tools-group > .tool-group-buttons {
  min-height: 31px;
}
.annotation-drawing-tools-group > .tool-group-buttons > .btn {
  border: 1px solid #c1c1c1;
  flex-grow: 1;
  height: 4em;
  /*min-width: 4em;*/
  width: 35px;
  margin: 0;
  padding: 1px;
}

.annotation-widget-data-contaner {
  overflow-y: auto;
  overflow-x: hidden;
}