.chartOptions {
   font-family: Roboto,Verdana,Arial,sans-serif;
   outline: 0;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-items: center;

   > .table {
    display: flex;
    min-width: 290px;
    flex-grow: 1;
    height: 34px;
    justify-content: center;
    align-items: flex-end;
    .row {
       display: table-row;
       .cell {
          vertical-align: middle;
          display: table-cell;

          .charttype-name, .timeperiod-name {
             padding-right: 5px;
          }
       }
    }
    &.justified-center .indicator-dialog {
       margin: auto;
    }
    &.justified-center + .instrument_name {
        margin-top: 12px;
    }
    &.justified-flex-start .indicator-dialog {
       margin-left: 20px !important;
    }
  }

  .nav-caret.triangle {
    float: right;
    margin-top: 13px;
    margin-right: 5px;
  }

  .chartOptions_button {
     height: 30px;
     margin-left: 5px;
     border-radius: 2px;
     transition: none;
     > span {
        transition: none;
        display: inline-block;
        img { max-height: 20px; }
        span {
          transition: none;
        }
     }
     span[data-balloon] {
        display: block;
        height: 34px;
     }
     &.button_selected {
        color: #FFF;
        z-index: +1;
     }
     .indicator-w-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'%3E %3Cpolyline fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='2' points='7.14 16.68 18.02 7.5 31.84 19.3 42.86 10.75'/%3E %3Crect fill='%23fff' x='7.14' y='23.37' width='3.88' height='19.13'/%3E %3Crect fill='%23fff' x='15.1' y='15.67' width='3.88' height='26.83'/%3E %3Crect fill='%23fff' x='23.06' y='22.3' width='3.88' height='20.2'/%3E %3Crect fill='%23fff' x='31.02' y='26.8' width='3.88' height='15.7'/%3E %3Crect fill='%23fff' x='38.98' y='18.83' width='3.88' height='23.67'/%3E%3C/svg%3E");
     }
  }
  .chartOptions_overlay {
    margin-top: 0px;
    position: absolute;
    z-index: +1;
    margin-left: 5px!important;
    background: #fff;
    border: 1px solid #c2c2c2;
    span[data-balloon]:before {
       line-height: 0;
       height: 0;
       font-size: 12px;
       box-shadow: none;
       border-radius: 0;
       border: none;
       display: block !important;
    }
    &.indicators {
       width: 100%;
       margin-left: 0 !important;
       height: 80%;
       max-height: 500px;
       overflow: hidden;
       border: none;
       left: 0;
       background: transparent;
       pointer-events: none;
       & > .indicator-dialog {
          pointer-events: all;
          height: 100%;
          width: 90%;
          max-width: 400px;
          position: relative;
          box-sizing: border-box;
          border: 1px solid #d2d2d2;
          margin: auto;
          background: white;
       }
    }
  }

  .img {
    display: inline;

    img, span, div {
      width: 20px;
      height: 20px;
      margin: 5px;
    }
    
  }

  .vertical-bottom {
    font-size: 0.8em;
    margin-top: 11px;
    line-height: 8px;
    &.charttype-name {
      margin-left: -5px;
      vertical-align: top;
    }
    &.button {
      padding: 4px 7px 2px 7px;
      width: auto;
      margin-right: 4px;
      border-radius: 3px;
      height: 15px;
      &:hover {
        background: #dedede;
      }
    }
    &.time {
      width: auto;
      margin-left: 5px;
      margin-top: 13px;
    }
  }

  .timeperiod {
    .vertical-bottom{
      padding-left: 5px;
    }
  }

  .timePeriodOverlay {
    .vertical-bottom.button{
      width: 29px;
      height: 31px;
      box-sizing: border-box;
      text-align: center;
      margin-top: 3px;
      margin-bottom: 3px;
      padding-top: 11px;
    }
    .row {
      display: flex;
      .cell {
        display: flex;
        &:nth-child(odd) {
          width: 60px;
        }
      }
      &:not(:last-child) {
        border-bottom: 1px solid #c2c2c2;
      }
    }
  }

  .chartTypeOverlay {
    .row {
      display: flex;
      &:nth-last-child(2), &:nth-last-child(3), &.showborder{
        border-bottom: 1px solid #c2c2c2;
      }
      &:hover {
        background: #dedede;
        cursor: pointer;
      }
      .cell {
        display: flex;
        width: 100%;

        & > * {
          pointer-events: none;
        }
      }
    }
  }

  .drawingToolOverlay {
    .row {
      display: flex;
      &:not(:last-child) {
        border-bottom: 1px solid #c2c2c2;
      }
      :hover {
        background: #dedede;
        cursor: pointer;
      }
      .img img {
        margin: 4px;
      }
    }
  }

  .exportOverlay {
     margin-left: -140px !important;
    .row {
      display: flex;
      width: 100%;
      /*&:nth-child(2n):not(:last-child) {
        border-bottom: 1px solid #c2c2c2;
      }*/
      .cell {
        display: flex;
        width: 100%;
        a img {
          width: 50px;
          height: 50px;
          margin-left: -8px;
          margin-right: -3px;
        }
        .table.download {
          margin:10px 6px 10px 4px;
          span {
            padding-top: 11px;
            height: 19px;
            margin: 0px 0px 0px 5px;
          }
        }
        .vertical-bottom {
          margin-left: 7.5px;
          height: 22.5px;
        }
        input {
          margin-left: 7.5px;
          font-size: 0.8em;
          margin-bottom: 10px;
          width: 93%;
          border: 1px solid #c2c2c2;
          box-shadow: none;
          padding: 0px 5px 0px 5px;
          font-weight: 600;
        }
      }
    }
  }

  .chartOptions_overlay.loadSaveOverlay {
    width: 200px;
    font-size: 0.8em;
    margin-left: -120px !important;
    .chart-template-manager-root {
      max-height: 310px;
      overflow-y: auto;
      overflow-x: hidden;
      .menu {
        a {
          margin: 5px;
          display: block;
          width: 95%;

          span {
            display: block;
          }
        }

        input[type="file"] {
          display: none;
        }
      }
      .save-as, .rename, .confirm {
        padding: 5px;

        .title { margin: 5px 0; }
        button { margin-top: 5px;}
        .button {
          width: 100%;
          text-align: center;
          button {
            margin-right: 5px;
          }
        }
      }
      .templates {
        padding: 5px;
        width: 190px;
        & > div > div {
          margin: 5px 0;
        }

        .template {
          display: inline-block;
          width: 190px;
          padding-bottom: 5px;
          &:not(:last-child){
            border-bottom: 1px solid #dedede;
          }
          word-wrap: break-word;
          a.options:not(:last-child) {
            margin-right: 10px;
          }
          .name {
            transition: color 0.2s;
            cursor: pointer;
            margin-bottom: 3px;
            &.active {
              font-weight: bold;
              color: #e98024
            }
            &:hover {
              color: #e98024;
            }
          }
        }
      }
    }
    .confirm .title {
      text-align: center;
    }
    .errors {
      height: 1em;
      .error {
        color: red;
      }
    }
    span.back-arrow {
      cursor: pointer;
       & > span {
          position: relative;
          display: inline-block;
          width: 16px;
          height: 16px;
          top: 2px;
          margin-right: 5px;
          background-image: svg('./images/back-arrow.svg') !important;
          background-repeat: round;
          cursor: pointer;
      }
    }
  }
  .countBubl {
    position: absolute;
    margin-left: 25px;
    margin-top: -33px;
    background: #e1812e;
    color: #fff;
    font-size: 0.55em;
    border-radius: 10px;
    padding: 1px 1px 1px 2px;
    min-width: 10px;
    text-align: center;
  }

  .instrument_name {
     padding: 0 5px;
  }
}

.chartOptions_button {
  background: #f2f2f2;
}