// IMPORTED FROM OTHER FILES


.fx-sandbox {


  @import 'utils/fx-functions';
  @import 'utils/fx-mixins';
  @import 'utils/fx-utils';

  @import 'themes/fx-bootstrap-queries';
  @import 'themes/fx-variables';
  @import 'base/fx-buttons';
  @import 'base/fx-fonts-import';
  @import 'base/fx-icons';
  @import 'base/fx-preload';
  @import 'base/fx-radio-checkbox';
  @import 'base/fx-typography';

  /* Visualization Box Style */



  $box-height: 450px;
  // 430px content + 23px toolbar height + 1px border between vb-toolbar and content (the border affects the dimensions because of the nature of the h6 title inside)
  //$back-and-border-color: #e0e0e0;
  $back-and-border-color: #e0e0e0;
  // $fenix-light-gray
  $box-content-height: 424px;
  // 450px minus the 23px vb-toolbar
  $detail-height: 350px;
  $sidebar-process-container-height: 360px;
  $toolbar-font-size: 11px;
  $cmd-left-width: 85px;
  $cmd-right-width: 192px;


  // Standard Fenix Theme

  $fx-secondary-color: desaturate( $fx-cool-blue, 50% );

  .fx-text-primary-color{
    color: $fx-cool-blue;
  }

  .fx-button-primary-color {
    color: white;
    border-color: darken($fx-cool-blue, 10%);
    background-color: $fx-cool-blue;

    &:hover {
      color: white;
      border-color: darken($fx-cool-blue, 10%);
      background-color: darken($fx-cool-blue, 5%);
    }

    &:focus {
      color: white;
      border-color: darken($fx-cool-blue, 20%);
      background-color: darken($fx-cool-blue, 15%);
    }

  }

  .fx-background-color-primary-color{
    background-color: $fx-cool-blue;
  }


  .fx-box {
    height: $box-height;
    //border: 1px solid $back-and-border-color;

    [data-content] {
      display: none;
      height: $box-height;
      position: relative;

      .loading {
        position: absolute;
        top: 45%;

      }

    }

    .front-content, .back-content {
      height: $box-content-height;
      overflow: hidden;
    }

    [data-content="error"], [data-content="loading"], [data-content="empty"], [data-content="huge"], [data-content="toomany"] {
      border: 1px solid $back-and-border-color;
    }

    /* Hovered */

    .box-title {
      margin-left: $cmd-left-width;
      margin-right: $cmd-right-width;
    }

    .toolbar-cmd-left, .toolbar-cmd-right {
      opacity: 1;
      pointer-events: auto;
    }

    @media screen and (min-width: $screen-sm) {

      & {

        .front-toolbar {

          .toolbar-cmd-left, .toolbar-cmd-right {
            opacity: 0;
            pointer-events: none;
            @include animate(0.3s, 0.2s);
          }

          .box-title {
            margin-left: 15px;
            margin-right: 15px;
            @include animate(0.3s, 0.2s);
          }

        }

      }

      &:hover {

        .front-toolbar {

          .toolbar-cmd-left, .toolbar-cmd-right {
            opacity: 1;
            pointer-events: auto;
          }

          .box-title {
            margin-left: $cmd-left-width;
            margin-right: $cmd-right-width;
          }

        }

      }

    }

    @media screen and (min-width: $screen-md) {

    }
    @media screen and (min-width: $screen-lg) {

    }

    //show only the status only correspondent tab content
    $statuses: "ready" "error" "loading" "empty" "huge" "toomany";

    @each $status in $statuses {

      &[data-status="#{$status}"] {

        [data-content="#{$status}"] {
          display: block;

        }
      }
    }

    [data-content="ready"] {

      [data-section] {
        display: none;
      }

      //show only the selected tab
      $sections: "chart" "table" "map" "blank" "metadata" "download";

      @each $sec in $sections {

        &[data-tab="#{$sec}"] {

          [data-section="#{$sec}"] {
            display: block;

          }
        }
      }
    }
  }

  .vb-toolbar {

    background-color: white;
    border-bottom: 1px solid $back-and-border-color;

    .meta-btn {
      margin-top: 2px;
    }

    .toolbar-cmd-left {
      width: $cmd-left-width;
      position: absolute;
      top: 0;
      left: 0;
    }

    .toolbar-cmd-right {
      width: $cmd-right-width;
      position: absolute;
      top: 0;
      right: 0;
      text-align: right;
      font-size: 0; /* Avoid space between elements with display inline */

      button {
        float: none; /* Avoid 1px bug on the right in md resolution */
        margin-left: 0 !important; /* Avoid 1px bug of the bootstrap's btn-group */
        display: inline-block;

        &[data-action="flip"] {
          background-color: $back-and-border-color;
        }

        &:last-child {
          margin-right: 0; /* Remove margin from the last child of btn-group */
        }

      }

    }

    button {
      border: 0;
      background-color: transparent;
      font-size: 16px;
      padding: 1px 10px 0 10px;
      @include fx-no-border-radius;

      &.active, &:active {

      }

      &.focus, &:focus {

      }

      &[disabled] {
        background-color: transparent;
        border: 0;
        opacity: 1;

        span {
          opacity: 0.35;
        }

      }

      &:hover {
        border: 0;
        border-color: transparent;
        background-color: $back-and-border-color;
        color: $fx-cool-blue;

      }

    }

    .box-title {

      margin-top: 5px;
      margin-bottom: 5px;

    }

  }

  /*Flip effect */
  /* entire container, keeps perspective */
  .flip-container {
    perspective: 1000;
    height: $box-height;
  }

  /* flip the pane when hovered*/
  .flip-container.flipped .flipper {
    transform: rotateY(180deg);
  }

  /* flip speed goes here */
  .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    height: 100%;
    position: relative;
  }

  /* hide back of pane during swap */
  .front, .back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid $back-and-border-color;
  }

  /* FRONT pane, placed above back */
  .front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
    background-color: white;
    //border: 1px solid $back-and-border-color;


    .tab-item-content[id^="metadata"] {
      padding:0 15px;
      overflow-y: scroll;
      overflow-x: hidden;
    }

  }



  .tab-item-content-wrapper {
    position: relative;
    z-index: 0;
    height: 100%;

  }

  .visualization-item-toolbar {
    //position: relative;
    //z-index: 1;
  }

  .tab-item-content {
    height: 100%;

    &[id^="table"], &[id^="chart"] {
      padding: 40px 15px 15px 15px;
    }


    //&[id^="metadata"] {
    //  padding:0 15px;
    //  overflow-y: scroll;
    //  overflow-x: hidden;
    //}



  }




  [data-section] {
    position: relative;
    height: 100%;

  }

  /* Z-index fix */

  .front-toolbar, .back-toolbar {
    position: relative;
    z-index: 1;
  }

  .back-toolbar {
    /* COOL BACK TOOLBAR EFFECT */
    opacity: 0.5;
    @include fx-transfor-me(rotateY(180deg));
    pointer-events: none;

    * {
      pointer-events: none !important;
    }

  }

  .front-content, .back-content {
    position: relative;
    z-index: 0;
  }

  /* BACK, initially hidden pane */
  .back {
    transform: rotateY(180deg);
    background-color: $back-and-border-color;
    //border: 1px solid $back-and-border-color;
  }

  [data-role="back-content"] {
    height: 100%;
  }

  .back-toolbar {
    position: relative;
    z-index: 1;
  }

  .back-content {
    position: relative;
    z-index: 0;


    .alert{
      position: absolute;
      width: calc(100% - 30px);
      z-index: 2;
    }

  }

  .process-details {
    height: $detail-height;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
    //padding: 0 15px;

    [data-tab="metadata"]{
      padding: 0 15px;
    }

    [data-tab="filter"]{


      .swiper-wrapper{
        //width: calc(100% - 30px);
        //height: calc(100% - 50px);
        //margin-left: 15px;
        //margin-top: 15px;
      }

    }

    [data-tab="aggregations"]{
      padding: 0 15px;
    }

    [data-tab="map"]{
      padding: 0 15px;
    }

  }


  .show-back-sidebar {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;
  }

  .sidebar-title {
    color: $fenix-secondary-text;
    padding: 0 15px;
    border-bottom: 1px solid $back-and-border-color;
    padding-bottom: 10px;
  }



  /* Filter Swiper */

  .filter-slide {

    padding: 15px;
    border: 1px solid transparent;
    @include animate();


    [data-selector]{

      .btn-group.controller{
        opacity: 1; //Restore the enable button opacity
      }

    }



    &.swiper-slide-active{

      /* Stylize the active filter */

      //background-color: rgba($fx-cool-blue, 0.05);
      //border-color: rgba($fx-cool-blue, 0.2);

    }


  }


  .fx-grid-item{



    &[data-size="full"]{

      .filter-slide {

        @media screen and (min-width: $screen-xs) {
          width: 50%;
        }

      }



    }


    &[data-size="half"]{


      .filter-slide {

        //@media screen and (min-width: $screen-md) {
        //  width: 50%;
        //}

      }

    }


  }

  .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'#{$fx-cool-blue}'%2F%3E%3C%2Fsvg%3E");
    left: 0;
    right: auto;
    background-size: 20px 30px;
  }

  .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'#{$fx-cool-blue}'%2F%3E%3C%2Fsvg%3E");
    right: 2px;
    left: auto;
    background-size: 20px 30px;
  }



  .swiper-pagination-bullet-active{
    background: $fx-cool-blue;
  }


  .back-right-content {
    height: 100%;
    padding-top: 15px;
    position: relative;
    z-index: 0;
  }

  .swiper-container {
    width: 100%;
    height: $detail-height;
  }

  .back-row {
    position: relative;
    height: 100%;
  }

  [data-role='back-sidebar'] {
    z-index: 1;
    height: 100%;
    position: absolute;


    .sidebar-content {
      background-color: white;
      border: 1px solid $back-and-border-color;
      height: calc(100% - 30px);
      width: calc(100% - 30px);
      position: absolute;
      top: 15px;
      left: 15px;

      .process-steps-container {
        padding: 5px 15px;
        position: absolute;
        bottom: 0;
        height: $sidebar-process-container-height;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
      }

    }

    @media screen and (max-width: $screen-xs) {

    }

    @media screen and (min-width: $screen-sm) {
      position: absolute;
    }

    @media screen and (min-width: $screen-md) {
      position: relative;

    }

    @media screen and (min-width: $screen-lg) {
      position: relative;
    }

  }

  [data-tab].active {
    //.step-container{
    //  background-color: #fd433c;
    //  color: white;
    //}
  }

  .step-container {
    padding: 5px 10px;
    margin: 7px 0;
    cursor: pointer;
    background-color: $back-and-border-color;
    position: relative;

    .step-title {
      font-weight: normal;
      margin: 0;
      margin-left: 25px;
      color: $fenix-text;
    }

    .step-icon {

      display: inline-block;
      position: absolute;
      height: 100%;
      width: 29px;
      top: 0;
      left: 0;
      color: white;

      &:before {
        font-size: 16px;
        position: relative;
        top: 4px;
        left: 7px;
      }

    }

    &.active {

      &:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 8px 8px;
        border-color: transparent transparent $fenix-text transparent;
        line-height: 0px;
        _border-color: #000000 #000000 $fenix-text #000000;
        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
      }
    }

  }

  //[data-tab="metadata"].step-container{
  //  background-color: #fd433c;
  //
  //
  //  .step-icon{
  //    background-color: #b02f2a;
  //  }
  //}
  //
  //[data-tab="filter"].step-container, [data-tab="aggregations"].step-container{
  //  background-color: #747ab6;
  //
  //  .step-icon{
  //    background-color: #5c6190;
  //  }
  //}
  //
  //
  //
  //[data-tab="map"].step-container{
  //  background-color: #74a2b6;
  //
  //
  //  .step-icon{
  //    background-color: #5c8190;
  //  }
  //}

  /*********************
    Shadows
  **********************/



  .z-depth-0 {
    box-shadow: none !important;
  }

  .z-depth-1, .btn-floating {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }

  .z-depth-1-half, .btn-floating:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }

  .z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .z-depth-3 {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  }

  .z-depth-4 {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  }

  .z-depth-5 {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
  }

  .hoverable:hover {
    transition: box-shadow .25s;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .btn-floating {
    display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 2;
    width: 37px;
    height: 37px;
    line-height: 37px;
    padding: 0;
    @include fx-border-radius(50%);
    transition: .3s;
    cursor: pointer;
    vertical-align: middle;
    margin: 10px;
  }

  [data-role="toolbar"] {
    height: $box-content-height;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    position: absolute;
    background-color: white;
    padding-top: 60px; // to keep the button visible
    top: 0;
    left: -1200px;
    @include animate();

    &.in {
      left: 0;
    }

  }



  .btn-fx-toolbar, .btn-fx-toolbar-confirm {

    position: absolute;
    top: 0;
    left: 0;

    span[class^="icojam_"] {

      color: white;
      font-size: 20px;
      position: relative;
      top: 3px;

    }

  }

  .btn-fx-toolbar-confirm {
    left: 50px;
    background-color: white;
    opacity: 0;
    pointer-events: none;

    &.in {
      opacity: 1;
      pointer-events: auto;
    }

    span[class^="icojam_"] {
      color: $fenix-text;
    }

  }

  /* OLAP */
  $olap-headers-color: #f4f4f4;
  $olap-drag: #bbbbbb;

  .tab-item-content {

    .gt-viewport {
      font-family: "Lucida Console", Monaco, monospace !important;
      font-size: 12px !important;
      color: $fenix-text !important;
    }

  }

  .gt-hd-row td .gt-inner {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .gt-inner {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .gt-row-selected td {
    background-color: $fx-main-color-lighter;

  }

  .gt-head-wrap {
    td {
      background-color: $olap-headers-color !important;
    }
  }

  /* Freezed Rows */

  .gt-freeze-div[id*="bodyDiv"] {

    td {
      background-color: $olap-headers-color !important;
    }

  }

  /* Freezed Header */

  .gt-hd-split {
    background-color: transparent !important;
    border-right: 1px solid #bbbbbb !important;
    padding-left: 5px !important;
    position: relative;
    overflow: visible;

    &:before {
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      left: 3px;

      width: 1px;
      border-right: 1px solid #bbbbbb;
    }

  }



  .gt-freeze-div[id*="headDiv"] {

    table {
      border-bottom: 1px solid #d6d6d6 !important; /* Suspicious */
    }

    td {
      background-color: $olap-headers-color !important;
    }

  }

  .gt-row-over td {
    border-bottom-color: $fx-cool-blue;
  }

  .gt-table {
    //display: none;
  }

  .gt-row-even {
    background-color: white;
  }



  /* Hide selectors */

  [data-section="table"], [data-section="chart"]{

    [data-role="toolbar"]{

      [data-group="hidden"], [data-group="aggregations"], [data-group="values"], [data-selector="aggregatorValue"]{
        display: none !important;
      }

    }

  }


  /* Toolbar */

  .gt-toolbar-box {
    padding-top: 5px;
    height: 30px;
  }

  .gt-button-split {
    width: 15px;
    background-color: transparent;
  }

  .gt-image-button div, .gt-image-button button {
    position: relative;
    top: 3px;
  }

  .gt-toolbar-text {
    margin-left: 3px;
  }


  /* Map Tab */


  [data-section="map"]{

    .btn-fx-toolbar-confirm{
      display: none;

    }

  }

  .fm-icon-close{
    display: none;

  }

  .fm-controller-box-content{
    //position: relative;
    min-height: 50px;
    //border:1px solid $superlight-gray
    padding: 6px 12px;
    @include fx-box-shadow(0px, 1px, 1px, rgba(0,0,0,.075), true);
    @include fx-border-radius(4px);
    background-color: white;
    background-image: none;
    border: 1px solid $fenix-hr;

    &[id*="controller-baselayer-content"]{
      @include fx-noshadow;
      @include fx-no-border;
      padding: 0;
    }





  }





  .fm-controller-box-item{
    cursor: pointer;
    margin: 3px;
    padding: 1px 3px;
    background-color: $summary-bg;


    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
      top: 25px;
      width: 27px; height: 27px;
      border: 1px solid #AAA;
      background: #DDD;
      background: white !important; /* W3C */
      border-radius: 27px;
      -moz-border-radius: 27px;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
      cursor: pointer;
    }


    .ui-slider-handle{
      top: -14px !important;
    }

    .ui-widget-header{
      background-color: $fx-cool-blue;
    }

  }


  .btn-fx-status-btn {


    span[class^="icojam_"] {

      color: white;
      font-size: 20px;
      position: relative;
      top: 3px;

    }

  }

  .content-message{
    margin-top: 80px;
  }

  .content-message-img{
    width: 140px;
    height: 129px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 25px auto;


    &.empty-img{
      background-image: url("#{$fx-ui-common}/img/mascot-empty-gray.svg");
    }


    &.error-img{
      background-image: url("#{$fx-ui-common}/img/mascot-error-gray.svg");
    }


    &.huge-img{
      background-image: url("#{$fx-ui-common}/img/mascot-huge-gray.svg");
    }


  }



  /* Map Fix */

  [data-section="map"]{

    [data-role="toolbar"]{


      .fm-controller-box-item-baselayer-content{
        margin-bottom: 15px !important;
        height: 25px !important;

        .fm-controller-box-item-baselayer-text.fm-controller-item-title{
          label{
            display: none;
          }
        }


      }

      .fm-controller-box-item-baselayer-content-selected{
        background-color: #ccc !important;
      }

      .irs-bar, .irs-bar-edge{
        border: none;
      }

      .fm-controller-box-item{
        border: none;
      }

      .fm-controller-box-icons{
        padding-left: 40px;
      }

      .fm-icon-enable, .fm-icon-disable{
        position: absolute;
        left: 0;
        top: 37px;
        background-image: none;
        @include fx-border-radius(50%);
        background-color: $fx-cool-blue;
      }

      .fm-icon-disable{
        background-color: #ccc;
      }

      .fm-controller-box-icons-container{
        margin-right: 0;
        padding: 0;
      }

      .fm-icon-box-background{
        background-color: transparent;
      }

      .fm-controller-box-title{
        font: inherit;
        color: inherit;
        width: auto;
      }

      .fm-standard-hr{
        display: none;
      }

      .fm-controller-item-title{
        font: inherit;
        width: auto;
        color: inherit;
      }

      .fm-controller-box-content{
        min-height: 0;
        padding: 0;
        overflow-y: visible;
        overflow-x: visible;
        border: none;
        @include fx-noshadow;
      }

      .fm-controller-external .fx-toolbar-map-holder{
        float: none;
        width: auto;

        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        background-color: transparent;
        @include fx-no-border-radius;

      }

      .fm-icon-layer-panel-sprite{
        display: none;
      }



    }



  }



/* Sandbox End */

}