/* general stylesheet */

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--anchor_color);
  font-weight: bold;
}

a.fill-div {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
}

.anchor {
  text-decoration: none;
  cursor: pointer;
  color: var(--anchor_color);
  font-weight: bold;
}

/*** tab slide out ***/
.searching {
  text-align: left;
  width: var(--slidewidth);
  height: var(--slideheight);
  background: var(--slidebackground);
  border: 1px solid var(--border_color);
  z-index: 1000;
  padding: 15px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}

/* for reviews of a recording - open recording */
.usedtemplates {
  border: 1px solid var(--light_border);
}

.usedtemplates tr {
  border-bottom: 1px solid var(--light_border);
}

.node-highlighted .innerDiv {
  /*border: 5px solid #1100ff;*/
  border: 6px solid black;
  box-shadow: 0 0 15px rgba(17, 0, 255, 0.5);
  /*transform: scale(1.05);
  //transition: all 0.2s ease-in-out;*/
}

.node-opacity {
  opacity: 0.8;
  /*transform: scale(1.05);
  //transition: all 0.2s ease-in-out;*/
}

.innerDiv {
  transform: scale(1);
  transition: all 0.2s ease-in-out;
  transform-origin: center;
}


/*.innerDiv:hover {
  transform: scale(1.05);
}*/

#fordiagram {
  //max-width			: 1600px;  
  width: 100vw;
}

#scrolldiagram {
  //overflow-x			: scroll; 
}

#diagramContainer {
  padding: 5px;
  width: 99%;
  height: 99%;
  border: 1px solid var(--container_border);
  //background-color     	: var(--container_background_color);
}

#vdiagramContainer {
  padding: 5px;
  width: 99%;
  height: 99%;
  border: 1px solid var(--container_border);
  //background-color     	: var(--container_background_color);
  overflow: scroll;
}

._jsPlumb_endpoint {
  position: relative;
}

.rotatebutton {
  transform: rotate(-90deg);
}

.maindiv {
  background-color: #b2b4b3;
  font-weight: bold -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

.mainitem {
  width: 20%;
}

.itemconnected {
  color: red;
}

.itemdiv {
  position: relative;
  /*position				: absolute;*/
  background-color: var(--item_background_color);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  padding: 5px;
}

.itemdivselect {
  position: relative;
  background-color: red;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  color: lightgray;
}

.detailitem {
  //text-align 			: left; 
  text-align: center;
  width: 15%;
}

.groupname {
  font-weight: bold;
  text-align: center;
  font-size: 1.2eml
}

.groupnamegrey {
  font-weight: bold;
  text-align: center;
  color: grey;
}

.smallgroupname {
  font-size: 1em;
}

.bold {
  font-weight: bold;
  font-size: 1.1em;
  color: var(--color_bold);
}


dialog::backdrop {
  background-color: rgb(0 0 0/0.5);
  //opacity				: 0.5;
}

.dialogmodalstylerefresh {
  border-radius: 15px 15px 15px 15px;
  font-size: bold;
  font-size: 21px;
}

.dialogmodalstylebusy {
  border-radius: 15px 15px 15px 15px;
  //font-size           : 14px;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  animation: fadein 15s infinite;
  z-index: 9999999;
  position: relative;
}

@keyframes fadein {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 1;
  }

}

@-o-keyframes fadein {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 1;
  }
}

@-ms-keyframes fadein {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 1;
  }
}


.dialogrefreshmsg {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  -webkit-animation: fontbulger 2s infinite;
  -moz-animation: fontbulger 2s infinite;
  -o-animation: fontbulger 2s infinite;
  animation: fontbulger 2s infinite;
}

@-moz-keyframes fontbulger {

  0%,
  100% {
    font-size: 16px;
  }

  50% {
    font-size: 21px;
  }
}

@-o-keyframes fontbulger {

  0%,
  100% {
    font-size: 16px;
  }

  50% {
    font-size: 21px;
  }
}

@keyframes fontbulger {

  0%,
  100% {
    font-size: 16px;
  }

  50% {
    font-size: 21px;
  }
}

.dialogbutton {
  border: 1px solid black;
  cursor: pointer;
  border-radius: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  width: 60px;
  text-align: left;
}

.dialogbuttondesc {
  font-weight: bold;
  font-size: 12px;
}

.formatanchorwithimage {
  vertical-align: middle;
  display: inline-block;
  height: 50px;
}

/* ***** diagram ***** */
.jtk-connector {
  z-index: 4;
}

.jtk-endpoint {
  z-index: 5;
}

.jtk-endpoint rect {
  fill: black;
}

.jtk-overlay {
  z-index: 6;
}

/* ***** volume slider *****/
.divvolumeslider {
  float: left;
  text-align: left;
  width: 365px;
  padding: 0 0 0 10px;
}

#volumeslider {
  background: linear-gradient(to right, #d4cfcf 0%, #ffffff 50%, #ffffff 50%, #f80705 100%);
  border: solid 1px #d4cfcf;
  border-radius: 8px;
  height: 8px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

#volumeslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  background: #b2b4b3;
  cursor: pointer;
  /* Cursor on hover */
  border-radius: 8px;
  height: 15px;
  width: 20px;
}

#tickmarks {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
}

#tickmarks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: black;
  height: 10px;
  line-height: 36px;
  margin: 0 0 0 0;
}

/* ***** end volume slider *****/

/**** Scheduletable ****/
.scheduletable {
  border: collapse;
  width: 99%;
  margin: 0.2em;
  border: 1px solid black;
}

.scheduletable td {
  border: 1px solid black;
}

.scheduletable caption {
  font-size: 1.5em;
  color: black;
  font-weight: bold;
}

.scheduletable tr.columnheadings {
  background-color: var(--main_color1);
  color: white;
  font-weight: bold;
  border-bottom: 1px solid black;
}

.scheduletable tr.columnheadings th {
  border: 1px solid black;
  padding: 5px;
}

.scheduletable tr.total {
  background-color: var(--main_color1);
  color: white;
  font-weight: bold;
  border: 1px solid black;
}

.scheduletable th.th_3 {
  width: 115px;
}

.scheduletable th.th_4 {
  width: 10px;
}

.scheduletable th.th_6 {
  width: 10px;
}

.scheduletable th.th_7 {
  width: 120px;
}

.scheduletable th.th_9 {
  width: 115px;
}

.scheduletable th.th_14 {
  width: 15px;
}


/**** end scheduletable ****/

.smallnote {
  color: var(--main_color1);
  font-weight: bold;
  font-size: 12px;
}

/**** audittable ****/
.audittable {
  border: collapse;
  width: 99%;
  margin: 0.2em;
  border: 1px solid var(--light_border);
}

.audittable td {
  border: 1px solid var(--light_border);
  vertical-align: text-top;
  padding: 5px;
}

.audittable caption {
  font-size: 1.5em;
  color: var(--color_bold);
  font-weight: bold;
}

.audittable tr.columnheadings {
  background-color: var(--main_color1);
  color: var(--color_bold);
  font-weight: bold;
  border-bottom: 1px solid var(--light_border);
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.audittable tr.columnheadings th {
  border: 1px solid var(--light_border);
  padding: 2px;
}

.audittable tr.total {
  background-color: var(--main_color1);
  color: var(--color_bold);
  font-weight: bold;
  border: 1px solid var(--light_border);
}

.audittable th.th_0 {
  width: 200px;
}

.audittable th.th_1 {
  width: 115px;
}

/**** end audittable ****/

/**** Htmltable2****/
.htmltable2 {
  border: collapse;
  width: 75%;
  margin: 0.2em;
  border: 1px solid var(--light_border);
  margin-left: auto;
  margin-right: auto;
}

.htmltable2 td {
  border: 1px solid var(--light_border);
}

.htmltable2 caption {
  font-size: 1.5em;
  color: var(--color_bold);
  font-weight: bold;
}

.htmltable2 tr.columnheadings {
  background-color: var(--main_color1);
  color: var(--color_bold);
  font-weight: bold;
  border-bottom: 1px solid var(--light_border);
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.htmltable2 tr.columnheadings th {
  border: 1px solid var(--light_border);
  padding: 5px;
}

.htmltable2 tr.total {
  background-color: var(--main_color1);
  font-weight: bold;
  border: 1px solid var(--light_border);
}

/**** end HTMLtable2 ****/

.inyellow {
  background-color: yellow;
}

.inorange {
  background-color: orange;
}

.background {
  background-color: var(--main_color1);
}

/**** Supervisortable ****/
.supervisordiv {
  border: 1px solid black;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}

.supervisortable {
  border: collapse;
  width: 100%;
  border: 2px solid black;
}

.supervisortable td {
  border: 1px solid black;
}

.supervisortable caption {
  font-size: 1em;
  font-weight: bold;
  border: 1px solid black;
  padding: 5px 5px 5px 5px;

}

.supervisortable th {
  border: 1px solid black;
  padding: 5px;
}

.supervisortable tr.total {
  font-weight: bold;
  border: 1px solid black;
}

.inred {
  color: red;
  font-weight: bold;
  font-size: 1.2em;
}

.inblack {
  color: black;
}

.notediv {
  width: 98%;
  border: 1px solid var(--border_color1);
  padding: 5px 5px 5px 5px;
  display: inline-block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.roundcornerdiv {
  width: 98%;
  border: 1px solid var(--border_color);
  padding: 5px 5px 5px 5px;
  display: inline-block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

/****** general table without border full width **********/
table.gennobordertable {
  width: 99%;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

table.gennobordertable td {
  padding: 3px 3px 3px 3px;
  border: none;
}

/****** end general table with border full width *******/
.borderline {
  border: 2px solid black;
}

.borderline1px {
  border: 1px solid black;
}

.noborderline {
  border: 2px solid white;
}

/**** searchtable ****/
@media screen {
  .waveform {
    width: 100%;
    border: 1px solid var(--border_color);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
  }
}

@media only print {
  .searchtable caption {
    Display: none;
  }

  .searchtable tr.columnheadings {
    display: none;
  }

  .searchtable tr.columnheadings th {
    display: none;
  }

  .searchtable tr.total {
    display: none;
  }

  .searchtable tr.NOTHING {
    display: none;
  }

  .searchtable tr.odd {
    display: none;
  }

  .player {
    display: none;
  }

  .searchtable {
    border: none;
  }

  .searchtable td {
    border: none;
  }

  .player {
    border: none;
  }

  .timesearching {
    display: none;
  }

  .closebutton {
    display: none;
  }
}

@media screen {
  .signature {
    display: none;
  }
}

@media screen {
  .searchtable {
    border: collapse;
    width: 100%;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
  }

  .searchtable caption {
    font-size: 1.5em;
    font-weight: bold;
  }

  .searchtable td {
    border: 1px solid var(--border_color);
  }

  .searchtable tr.columnheadings {
    background-color: var(--main_color1);
    font-weight: bold;
    border-bottom: 1px solid var(--border_color);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  }

  .searchtable tr.columnheadings th {
    border: 1px solid var(--border_color);
    padding: 5px;
  }

  .searchtable tr.total {
    background-color: var(--main_color1);
    color: black;
    font-weight: bold;
    border: 2px solid var(--border_color);
  }

  .searchtable td.alignright {
    text-align: right;
  }
}

/**** End searchtable ****/

#hideusers {
  display: none;
}

#hideext {
  display: none;
}

#hideselected {
  display: none;
}

#hidenotes {
  display: none;
}

#hideoldnotes {
  display: none;
  text-align: left;
}

#hidemoreinfo {
  display: none;
  text-align: left;
}

#hideaudittrail {
  display: none;
}

#hidescreenshots {
  display: none;
}

#hideemail {
  display: none;
}

#hideaqm {
  display: none;
}

#hidejibe {
  display: none;
}

#hidetranscript {
  display: none;
  height: 300px;
  overflow-y: scroll
}

#hideaudioclips {
  display: none;
}

/**** Graphs ****/
#superstatusgraph {
  font: 14pt arial, sans-serif;
  width: 90%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  color: black;
  background-color: --graph_background_color1);
}

#superstatusgraph .jqplot-series-shadowCanvas {
  background-color: --graph_background_color2);
}

.recordinggraph {
  /* font                	: 20pt arial,sans-serif; */
  width: 1110px;
  height: 175px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  color: var(--graph_color);
  background-color: var(--graph_background_color3);
}

#playgraph .jqplot-series-shadowCanvas {
  background-color: var(--graph_background_color2);
}

.notooltip {
  display: none;
}

.showtooltip {
  background-color: var(--graph_tooltip_color);
  color: var(--graph_tooltip_color);
}

.showlinetooltip {
  color: red;
}

.jqplot-highlighter-tooltip {
  strokeStyle: red;
  fillstyle: red;
}

.jqplot-cursor-tooltip {
  color: red;
  font-size: 1.5em;
  white-space: nowrap;
  background: rgba(208, 208, 208, 0.5);
  padding: 1px;
  z-index: 10000;
}

/**** End Graphs ****/

.showmsg {
  font-weight: bold;
  color: var(--msg_color);
  font-size: 1.2em;
}

.showmsgsmall {
  font-weight: bold;
  color: var(--msg_color);
  font-size: 0.9em;
}

div.left {
  float: left;
}

div.right {
  float: right;
  margin-right: 1em;
}

.aligncenter {
  text-align: center;
}

.alignleft {
  text-align: left;
}

.alignright {
  text-align: right;
}

.alignverticaltop {
  vertical-align: text-top;
}

.alignverticalmiddle {
  vertical-align: middle;
}

.alignverticalbottom {
  vertical-align: bottom;
}

.submitimagebutton {
  border: none;
}


fieldset {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

subjectdiv {
  width: 98%;
  border: 1px solid var(--border_color);
  padding: 5px 5px 5px 5px;
  display: inline-block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}


.auditlegend {
  font-size: 2em;
  text-align: center;
}

/* AQM Reviews  */

#divtemplate {
  Padding: 5px 5px 5px 5px;
}

.divtemplatecss {
  //background-color      : var(--item_background_color);
  //-moz-border-radius    : 20px;
  //-webkit-border-radius : 20px;
  //border-radius         : 20px; 
  //border                : 2px solid #666666;
}

.divreviewheadingscss {
  background-color: var(--review_background_color);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  border: 2px solid #666666;
  Padding: 5px 5px 5px 5px;
}

.divreviewquestionscss {
  background-color: var(--review_background_color);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  border: 2px solid #666666;
  Padding: 5px 5px 5px 5px;
}

/* AQM Reviews  */

.errormsg {
  width: 60%;
  color: red;
  border: 2px solid red;
  margin-left: auto;
  margin-right: auto;
}

/****** general table with border full width **********/
.genbordertable {
  width: 99%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.genbordertable td {
  padding: 3px 3px 3px 3px;
}

/****** end general table with border full width *******/

/****** general table with border 50% width **********/
.genborder50table {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.genborder50table td {
  padding: 3px 3px 3px 3px;
}

/****** end general table with border 50% width **********/

/****** general table with no border 50% width **********/
.gennoborder50table {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

.gennoborder50table td {
  padding: 3px 3px 3px 3px;
  border: none;
}

/****** end general table with no border 50% width **********/

/****** general table with no border 75% width **********/
.gennoborder75table {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

.gennoborder75table td {
  padding: 3px 3px 3px 3px;
  border: none;
}

/****** end general table with no border 75% width **********/

/****** general table with no border 75% width no padding **********/
.gennoborder75nopadding {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

/****** general table with border 75% width **********/
.genborder75table {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid silver;
}

.genborder75table td {
  padding: 3px 3px 3px 3px;
}

/****** end general table with border 75% width *******/

/****** general table with border 65% width **********/
.genborder65table {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid silver;
}

.genborder65table td {
  padding: 3px 3px 3px 3px;
}

/****** end general table with border 60% width *******/

@media only print {
  .showbutton {
    display: none;
  }
}

@media only print {
  .emailtemplateinfo {
    display: none;
  }
}

@media only print {
  .backbutton {
    display: none;
  }
}

/***** Trumbowyg *****/
.trumbowyg-box,
.trumbowyg-editor {
  min-height: unset !important;
  font: 12px arial condensed;
}

.trumbowyg-editor,
.trumbowyg-textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

.trumbowyg-button-pane {
  /*  Take this line out in trumbowyg.css in folder troumbowyg:    .trumbowyg-button-pane //background: $light-color;*/

  background: linear-gradient(var(--main_color1), white);
}

//***** end Trumbowyg *****/


/***** column sizes *****/
td.size3 {
  width: 3%;
  vertical-align: text-top;
}

td.size5 {
  width: 5%;
  vertical-align: text-top;
}

td.size7 {
  width: 7%;
  vertical-align: text-top;
}

td.size8 {
  width: 8%;
  vertical-align: text-top;
}

td.width8 {
  width: 8%;
}

td.size10 {
  width: 10%;
  vertical-align: text-top;
}

td.size12 {
  width: 12%;
}

td.size13 {
  width: 13%;
}

td.size15 {
  width: 15%;
}

td.size20 {
  width: 20%;
  vertical-align: text-top;
}

td.size25 {
  width: 25%;
}

td.size30 {
  width: 30%;
}

td.size35 {
  width: 35%;
}

td.size40 {
  width: 40%;
}

td.size45 {
  width: 45%;
}

td.size47 {
  width: 47%;
}

td.size50 {
  width: 50%;
}

/***** end column sizes *****/

/**** htmlgentable ****/
.htmlgentable {
  border: collapse;
  width: 99%;
  margin: 0.2em;
  border: 1px solid black;
}

.htmlgentable td {
  border: 1px solid black;
}

.htmlgentable caption {
  font-size: 1.5em;
  color: black;
  font-weight: bold;
}

.htmlgentable tr.columnheadings {
  background-color: var(--main_color1);
  color: black;
  font-weight: bold;
  border-bottom: 1px solid black;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.htmlgentable tr.columnheadings th {
  border: 1px solid black;
  padding: 5px;

}

.htmlgentable tr.total {
  background-color: var(--main_color1);
  font-weight: bold;
  border: 1px solid black;
}

/**** end htmlgentable ****/

img:hover {
  transform: scale(1.2);
}

button:hover {
  /*transform: scale(0.8);*/
}


@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

input.password {
  font-family: 'password';
  width: 100px;
  height: 16px;
}

/****** API keys table **********/
.apihtmltable {
  border: collapse;
  width: 100%;
  margin: 0.2em;
  border: 1px solid var(--light_border);
  margin-left: auto;
  margin-right: auto;
}

.apihtmltable td {
  border: 1px solid var(--light_border);
}

.apihtmltable caption {
  font-size: 1.5em;
  color: var(--color_bold);
  font-weight: bold;
}

.apihtmltable tr.columnheadings {
  background-color: var(--main_color1);
  color: var(--color_bold);
  font-weight: bold;
  border-bottom: 1px solid var(--light_border);
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.apihtmltable tr.columnheadings th {
  border: 1px solid var(--light_border);
  padding: 5px;
}

.apihtmltable tr.total {
  background-color: var(--main_color1);
  font-weight: bold;
  border: 1px solid var(--light_border);
}

.apihtmltable th.th_0 {
  width: 200px;
}