.textMarkerDialog
  z-index: 1000
  width: 260px
  position: absolute
  top: auto
  left: auto
  bottom: 3px
  right: 3px
  margin: auto
  padding:.5em
  background-image: linear-gradient(#2E608D, #23557F)
  box-sizing: border-box
  border: 1px black solid
  border-radius: 5px
  height: 81px
  max-height: 81px
  h5
    color: #D1EDFB;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    cursor:default
  .handle
    width: 40px;
    float: left;
    height: 22px;
    display: block;
    margin-right: 10px;
    position: relative;
    margin-top: 1px;
    margin-left: 1px;
  #startFrom
    margin-right:10px
  #clearLabels
    margin-left:10px
    float:right
  .optionBox
    color: #d1edfb
    margin-bottom: 5px
    float: left
    span.subLabel
      width: 50px
      display: block
      float: left
      line-height: 30px
    > label
      color: #d1edfb
      float: left
      min-width: 40px
      line-height: 24px
      font-size: 12px
      font-weight: 600
  .closeTextMarkerDialogs
    position: absolute
    top: 5px
    right: 4px
    padding: 5px
    cursor: pointer
    svg
      width: 19px
      height: 19px
      fill: #d1edfb
    &:hover
      svg
        fill: #FFF
  .dialog.arrow
    left: 50%
    margin-left: -11px
    border-top-width: 0
    border-bottom-color: #999999
    border-bottom-color: rgba(0, 0, 0, 0.25)
    border-width: 11px
    bottom: -10px
    position: absolute
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #23557f;
    &:after
      content: " "
      top: 1px
      margin-left: -10px
      border-top-width: 0
      border-bottom-color: #23557f
      border-width: 10px

#textMarkerRelabelDialog
  margin: 0
  .relabelOptions
    padding: 15px 0px 0px 0px
  .relabelSelect
    margin-left: 5px
    
#textMarkerOptionsDialog
  .optionsDiv
    padding-top: 10px

//Avoids Cine Play and Text Marker dialog to overlap
#textMarkerOptionsDialog[open='open'] ~ #cineDialog[open='open']
  bottom: 90px

.relabelButtons
  text-align:right

button.viewerBtn
  background-color: #5D9ACE;
  border: 1px solid #6EAEE4;
  font-size: 12px !important;
  color:#FFF
  line-height: 21px;
  &:hover
    color:#FFF

button.btn-secondary
  background-color: #CFE3F5;
  border: 1px solid #E5F3FF;
  font-size: 12px !important;
  color:#0D416D
  &:hover
    color:#0D416D

.iconSwitch
  margin:0px 5px
  .btn
    span
      display: none
    .on
      display: none
    .off
      display: block
    &.btn-link, &.active, &:active, &:hover, &:focus, &.active:focus
      background-color: #225682;
      border: 1px solid #7AB0DE;
      box-shadow: none;
      padding: 1px 7px;
      border-radius: 4px;
      color: #d1edfb;
      box-shadow: none;
      outline: none;
    &:hover
      color:#fff
    &.active
      .on
        display:block
      .off
        display: none