.toolBar {
  display: none;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 320px;
  width: 160px;
  height: 100%;
  background-color: var(--gray-b);
  font-size: 12px;
}

.toolBar_toolGroup {
  width: calc(100% - 8px);
  padding: 2px;
  border-bottom: 1px solid var(--gray-a);
  margin: 2px;
}
.toolBar_toolGroup-menu {
  background-color: var(--gray-a);
}
.toolBar_toolGroup-hidden {
  display: none;
}

.toolBar_toolGroup-footer {
  position: absolute;
  border-top: 1px solid var(--gray-a);
  bottom: 0px;
  border-bottom: 0px none;
}

.toolBar_menu {
  padding: 2px;
}

.trioboLogo {
  opacity: 0.4;
  width: calc(100% - 8px);
  height: 30px;
  margin: 8px 4px 3px;
  background-image: url('../../triobo-bw.png');
  background-size: 133px 30px;
  background-repeat: no-repeat;
}

.toolIcon {
  box-sizing: border-box;
  border: 1px solid transparent;
  width: calc(100% - 4px);
  height: 28px;
  padding: 4px;
  margin: 2px;
  color: var(--gray-4);
  cursor: pointer;
}
.toolIcon:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.toolIcon:hover {
  border-color: var(--gray-8);
  background-color: var(--gray-a);
}
.toolIcon-hidden {
  display: none;
}
.toolIcon-active, .toolIcon-active:hover {
  background-color: var(--gray-e);
}
.toolIcon-disabled, .toolIcon-disabled:hover {
  color: var(--gray-a);
  border-color: transparent;
  background-color: transparent;
  cursor: default;
}
.toolIcon .svgicon {
  fill: #d00;
}
.toolIcon-disabled .svgicon {
  fill: #888;
}

#toolCloseArticle {
  padding-top: 3px;
}
#toolCloseArticle i {
  font-size:21px;
}

.toolIcon_icon {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  font-size: 16px;  
  text-align: center;
}
.toolIcon_icon .svgicon {
  padding-bottom: 4px;
}

.toolIcon_text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

.versionNotSaved .saveOff {
  display: none;
}

.versionSaved .saveOn {
  display: none;
}

.addContent_title {
  font-weight: 200;
  font-size: 20px;
  color: var(--gray-4);
  margin: 8px 0 4px;
  padding: 4px 0 0;
  text-align: center; 
}

.addContent_column {
  display: inline-block;
  vertical-align: middle;
}
.addContent_column-verticalAligner {
  height: calc(100% - 42px);
  width: 1px;
}
.addContent_column-typeSelector {
  width: calc(100% - 190px);
}
.addContent_column-positionSelector {
  position: relative;
  width: 184px;
  height: 220px;
  border: 1px dotted var(--gray-8);
}
.addContent_positionSelector {
  position: relative;
  width: 100px;
  margin: 58px 34px 30px 40px;
  height: 100px;
  background-color: #0af4; 
  border: 1px solid #0af;
}
.addContent_containerName {
  color: var(--gray-8);
  position: absolute;
  top: -10px;
  left: 3px;
  padding: 0 2px;
  font-size: 8px;
  background-color: var(--gray-c);
}
.addContent_frameName {
  color: var(--selecting-color);
  position: absolute;
  top: -10px;
  left: 3px;
  padding: 0 2px;
  font-size: 8px;
  background-color: var(--gray-c);
}


.addContent_column-positionSelectorInnerOnly {
  border: 0px none;
}
.addContent_column-positionSelectorInnerOnly .addContent_containerName {
  display: none;
}
.addContent_column-positionSelectorInnerOnly .addContent_positionSelector {
  margin: 0px;
  width: 100%;
  height: 100%;
}

.addContent_typeButton {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  border: 1px solid transparent;
  margin: 0;
  padding: 8px;
  width: 33%;
  color: var(--gray-4);
  cursor: pointer;
  background-color: transparent;
  text-align: center;
  font-size: 11px;
}
.addContent_typeButton-fullWidth {
  width: 99%;
}
.addContent_typeButton:hover {
  border-color: var(--gray-8);
  background-color: var(--gray-b);
}
.addContent_typeButton-selected, .addContent_typeButton-selected:hover {
  border-color: var(--gray-8);
  background-color: var(--gray-a);
}
.addContent_typeButton .fa {
  display: block;
  margin-bottom: 4px;
  font-size: 21px;
}


.addContent_selectorButton {
  color: var(--gray-8);
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid var(--gray-8);
  background-color: var(--gray-f);
  cursor: pointer;
  text-align: center;
  padding-top: 5px;
}
.addContent_selectorButton:after {
  content: "\f067";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
}
.addContent_selectorButton-selected {
  background-color: var(--gray-8);
  color: var(--gray-f);
}
.addContent_selectorButton-disabled {
  background-color: var(--gray-c);
  color: var(--gray-a);
}

.addContent_selectorButton-outsideTop {
  left: calc(50% - 12px);
  top: -36px;  
}
.addContent_selectorButton-outsideBottom {
  left: calc(50% - 12px);
  bottom: -36px;  
}
.addContent_selectorButton-outsideLeft {
  left: -36px;  
  top: calc(50% - 12px);
}
.addContent_selectorButton-outsideRight {
  right: -36px;  
  top: calc(50% - 12px);
}
.addContent_selectorButton-insideTop {
  left: calc(50% - 12px);
  top: 4px;  
}
.addContent_selectorButton-insideBottom {
  left: calc(50% - 12px);
  bottom: 4px;  
}
.addContent_selectorButton-insideLeft {
  left: 4px;  
  top: calc(50% - 12px);
}
.addContent_selectorButton-insideRight {
  right: 4px;  
  top: calc(50% - 12px);
}
.addContent_selectorButton-insideText {
  left: calc(50% - 12px);
  top: calc(50% - 12px);
}
.addContent_selectorButton-insideByMouse {
  left: calc(50% - 12px);
  top: calc(50% - 12px);
}
.addContent_selectorButton-insideByMouse:after {
  content: "\f040";
}
.addContent_selectorButton-outsideByMouse {
  right: 0px;  
  bottom: -36px;  
}
.addContent_selectorButton-outsideByMouse:after {
  content: "\f040";
}



.addContent_divider {
  margin-top: 2px;
  border-top: 1px solid var(--gray-a);
}

.addContent_buttons {
  text-align: center;
}