@import "settings";
@import "foundation";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switch",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: condensed;
  src: local('Open Sans'), local('OpenSans'), url('opensans.woff') format('woff');
}

.hidden {
  display: none;
}

#footer {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;

  a {
    color: #999;
  }

  a:hover {
    color: #333;
  }
}

.left-content {
  padding-top: 40px;
  padding-left: 20px;
}

.left-header {
}

.right-content {
  padding-top: 10px;
  padding-left: 50px;
  padding-right: 50px;
}

.right-info {
  margin-top: 15px;
}

#menu {
  margin-top: 10px;
}

.log-tab {
    background: #6f6f6f;
    color: #f2f2f2;
    padding: 20px;
    font-size: 14px;
}

table {
    border: 0px;
    border-collapse:collapse;
    border-spacing:0;


    th {
        font-weight: normal !important;
        font-size: 16px !important;
        background-color: #fff !important;
        border-bottom: 1px solid #efefef !important;;
        color: #333 !important;
    }

    td {
        color: #555 !important;
    }

    tfoot {
        background-color: #fff !important;
    }
}

table.dataTable {
    td, th {
        text-align: left;
        padding: 5px 10px;

        .button {
          margin: 0px;
        }
    }
    input[type="checkbox"] {
        margin: 3px 0.5ex !important;
    }
    textarea {
      min-height: 33px !important;
      height: 33px;
      padding: 5px 10px;
      margin: 0px !important;
    }
    select,input[type="text"] {
        margin: 0px !important;
    }
}

table:not(.no-hover) {

    tr.odd:hover td:not(.dataTables_empty) {
        background-color: #2ba6cb !important;
        cursor: pointer;
        color: #FFF !important;
    }

    tr.even:hover td:not(.dataTables_empty) {
        background-color: #2ba6cb !important;
        cursor: pointer;
        color: #FFF !important;
    }
}

td.open-control:hover {
    cursor: pointer;

}

input.search {
  margin: 0px;
}

.markrow { background-color:#cdebf5 !important; }
.markrowselected { background-color:#2ba6cb !important; color: #FFF; }
.markrowchecked { background-color:#cdebf5; }


// User settings and zone
.user-zone-container {
    position: relative;

    .user-zone-info {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 1;

        .button {
            background: #fff;
            border: none;
        }

        .button:hover {
            background: #F5F5F5;
        }
    }
}


.white_button {
    background-color: #fff !important;
    border: none;

    &:hover {
      color: $primary-color !important;
    }
}

// Navigation side bar
#logo {
    margin-top: 10px;
}

.side-nav {

    .topTab {

        a {
            color: #333 !important;
        }

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

    .subTab {
        margin-left: 18px;

        &:hover {
          border-left: 3px solid #999;
        }

        a {
            color: #777 !important;

            &:hover {
              color: #555 !important;
            }
        }
    }

    li {
      border-left: 3px solid #fff;

      a {
        padding: 0.2323rem 0.875rem !important;
      }
    }

    .navigation-active-li {
        a {
            color: #222 !important;
        }

        border-left: 3px solid #008cba !important;
    }

    i {
        margin-right: 3px
    }
}

.header-row {
  margin-bottom: 20px !important;
  margin-top: 25px !important;

  .resource-id {
    color: #999;
    display: none;
  }

  .resource-info-header {
    color: #777;
  }
}

// action block

input[type="text"],
select {
  height: rem-calc(33px) !important;
  padding: rem-calc(5px) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.subheader {
  color: #555;
}

.header-info {
  margin-top: -5px;
  margin-bottom: 5px;

  input {
    //margin-top: -10px !important;
  }
}

.button.secondary {
  color: #555;
}

.button {
  margin-right: 3px;
}

// Dropdown
.f-dropdown {
  text-align: left;
  li {
    padding: 0px 10px;
  }
}

// Form
.fa-question-circle {
  color: #afafaf !important;
}

.value_td {
    text-overflow:ellipsis;
    word-break: break-all;
}

.key_td {
  color: #777 !important;
}

.configuration_attrs {
  .key_td {
    width: 30%;
  }
}

.reveal-modal {
  fieldset {
    margin-bottom: 30px !important;
  }
}

.has-tip {
  margin-left: 10px;
  color: #555;
  font-weight: normal;
}

// Totals

.dashboard-widget-footer {
  margin-bottom: 50px !important;
}

.totals-info {
  span {
    color: #777;

  }

  a {
    color: #777 !important;

    &:hover {
      color: #0098c3 !important
    }
  }

  small {
    color: #ACACAC;
  }
}

.noUiSlider {
  border: none;
  margin-top: 12px;

  &.horizontal {
    width: 100% !important;
  }
}


// Dashboard

fieldset {
  margin-top: 0px;
  margin-bottom: 20px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 15px;

  legend {
    font-weight: normal !important;
    font-size: 16px !important;
    color: #555;
  }
}

.label.allocated {
  background-color: rgb(43,166,203);
  color: #fff;
}
.label.real {
  background-color: rgb(112,125,133);
  color: #fff;
}
.label.total {
  background-color: rgb(172,90,98);
  color: #fff;
}

.success-color {
  color: $success-color !important;
}

.alert-color {
  color: rgb(172,90,98) !important;
}


// Tabs
//.tabs.vertical {
//  dd {
//    border-right: 1px solid #dfdfdf;//

//  }//

//  dd.active {
//    border-left: 1px solid #dfdfdf;
//    border-top: 1px solid #dfdfdf;
//    border-bottom: 1px solid #dfdfdf;
//    border-right: 1px solid #FFFFFF;//

//    a {
//      font-weight: bold !important;
//    }
//  }
//}

.tabs {
  dd {
    border: 1px solid #efefef;
  }

  dd.active {
    a {
      font-weight: bold !important;
    }
  }

  &.wizard_tabs dd {
    border: 1px solid #dfdfdf !important;
  }
}

.bordered-tabs {
  .tabs-content {
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-radius: 3px;
    min-height: 300px;

    &.vertical {
      border-left: 1px solid #cfcfcf;
    }

    &:not(.vertical) {
      border-top: 1px solid #cfcfcf;
      margin-top: -2px
    }
  }

  dl {
    dd {
      border: 0px;
    }

    &.vertical {
      .remove-tab {
        float: right !important;
        margin-top: 4px;
      }

      dd.active {
        border-left: 3px solid #008cba;
      }

      dd:not(.active) {
        border-left: 3px solid #fff;

        &:hover {
          border-left: 3px solid #999;
        }
      }
    }

    &:not(.vertical) {
      dd.active {
        border-bottom: 3px solid #008cba;
      }

      dd:not(.active) {
        &:hover {
          border-bottom: 3px solid #999;
        }
      }
    }

    dd.active {
      a {
        background: #fff;
        color: #222;
        font-weight: normal !important;
      }
    }

    dd:not(.active) {
      a {
        color: #777 !important;
        background: #fff;

        &:hover {
          color: #333 !important;
        }
      }
    }
  }
}

.remove-tab:hover {
  color: $alert-color;
  cursor: pointer;
}

/*.tabs:not(.vertical) {
  dd.active {
    border-bottom: 0px;
  }
}

.tabs.vertical {
  dd.active {
    border-right: 0px;
  }
}*/

// Right info

.right-info-tabs {
  dd {
    width: 84px;
  }

  i {
    font-size: 20px;
    margin-bottom: -10px;
  }

  a {
    color: #555 !important;
    padding: 10px 0px !important;
    font-size: 12px !important;
  }

  dd.active {
    a {
      color: #333 !important;
    }
  }
}

// Reveal

.reveal-modal h3 {
    margin-left: -20px;
    margin-bottom: 25px !important;
}

.reveal-body {
    padding: 5px 20px;
}


.max-height{
}

.form_buttons {
  padding-top: 30px;
}


// Progress bar

.quotas {
  fieldset {
    padding-top:  5px;
    padding-bottom: 0px;
  }
}

.provision-bullet-item {

  .progress {
    height: 10px;
    background-color: #fff;
  }

  .progress-text {
  }
}


.quota_table {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  clear: both;
  max-width: none !important;
  width: 100%;
}

ul.pagination li a {
  background: #f5f5f5;
  border: 1px solid #efefef;
  color: #555;
}

ul.pagination li.unavailable a {
  background: #fff;
  border: 0px;
  color: #999;
}

ul.pagination li.current a {
  background: #fff;
  border: 1px solid #efefef;
  color: #333;

  &:hover {
    background: #fff;
    border: 1px solid #efefef;
    color: #333;
  }
}

div.dataTables_length label,
div.dataTables_filter label,
div.dataTables_info {
  color: #999;
  font-weight: normal;
}

div.dataTables_length label {
  float: left;
  text-align: left;
  margin-bottom: 0;
}

div.dataTables_length {
  float: right !important;
}

div.dataTables_length select {
  width: 75px;
  margin-bottom: 0;
  font-size: 10px !important;
  height: 26px !important;
  margin-left: 15px;
}

div.dataTables_filter label {
  float: right;
  margin-bottom: 0;
}
div.dataTables_filter input {
  display: inline-block !important;
  width: auto !important;
  margin-bottom: 0;
}

div.dataTables_info {
  padding-top: 2px;
  font-size: 0.875em;
}

div.dataTables_paginate {
  float: right;
  margin: 0;
}

table.dataTable {
  clear: both;
  margin: 0.5em 0 !important;
  max-width: none !important;
  width: 100%;

  tr {
    background: none !important;
  }
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
}

table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }

table.dataTable th:active {
  outline: none;
}

/* Scrolling */
div.dataTables_scrollHead table {
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody tbody tr:first-child th,
div.dataTables_scrollBody tbody tr:first-child td {
  border-top: none;
}

div.dataTables_scrollFoot table {
  margin-top: 0 !important;
  border-top: none;
}





/* Growl */
.jGrowl-notification h1 {
    display: none !important;
}

.jGrowl-notification, .jGrowl-notify-submit {
    background-color: #dfdfdf!important;
    color: #333;
    width: 335px !important;
}

.jGrowl-notify-error {
    background-color: #F39999!important;
    color: #660000;
}

.jGrowl-closer {
    background-color: #555!important;
    width: 335px !important;
}

.jGrowl-close {
  font-size: 1.5em !important;
}

.alert-box-error {
    border: 0px!important;
    background-color: #F39999!important;
    color: #660000;
}


.custom-panel {
  @include panel();

  border-color: #efefef;
  margin-bottom: 0px;
}

.provision-pricing-table  {
  @include pricing-table-container;
  //border: 1px solid #efefef;
  //box-shadow: 0px 1px #dfdfdf;
  padding: 5px;
  border: 1px solid #dfdfdf !important;

  .provision-title  {
    @include pricing-table-title;

    font-weight: normal;
    color: #555;
  }
  .provision-price  {
    @include pricing-table-price;
  }
  .provision-description   {
    @include pricing-table-description;
  }
  .provision-bullet-item {
    @include pricing-table-bullet;

    padding: 5px 10px;
  }
  .provision-cta    {
    @include pricing-table-cta;
  }


  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  background: #f7f7f7;

  li {
    background: none !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &.hoverable.only-one:not(.selected):hover {
    cursor: pointer;
  }

  &.hoverable.more-than-one:hover {
    cursor: pointer;
  }

  .only-on-hover {
    color: #cfcfcf !important
  }

  &:not(.selected):hover {
    border-color: #afafaf !important;

    .only-on-hover {
      color: #0099c3 !important
    }
  }

  &.selected {
    //border: 1px solid #0099c3;
    border: 1px solid #0099c3 !important;
  }

}

.deploying-bg {
  background-color: #C7731F !important;
}

.error-bg {
  background-color: #cf280e !important;
}


.powering_off-bg {
  background-color: #cf280e !important;
}

.off-bg {
  background-color: #999;
}

.running-bg {
  background-color: #368a54 !important;
}


.deploying-color {
  color: #C7731F;
}

.error-color {
  color: #cf280e;
}

.powering_off-color {
  color: #cf280e;
}

.off-color {
  color: #555;
}

.running-color {
  color: #368a54;
}

.provision_back,
.provision_show_vm_accordion,
.provision_show_user_accordion,
.provision_show_flow_accordion {
  padding: 0px !important;  
}

.provision-input {
  border-color: #dfdfdf;
  border-radius: 3px;
}

.provision-search-input {
  width: 200px !important;
  height:39px !important;
  border-radius: 3px;
  border-color: #efefef;
  margin: 0px !important;
}

#provision_list_vms_filter select,
#provision_list_templates_filter select,
#provision_list_flows_filter select  {
  width: 200px !important;
  height:35px !important;
  border-radius: 3px;
  border-color: #efefef;
  float: right !important;
  margin: 5px 10px 0px 0px;
}

.accordion {
  a.accordion-a {
   border: 1px solid #efefef;
   background: #f7f7f7;
   border-radius: 5px;
   color: #555 !important;
  }
}

.alert-box.secondary {
  margin-top: 10px;
}

hr {
  border-color: #dfdfdf;
}


.provision-logo img {
  padding: 10px;
  border-radius: 3px;
  height: 80px;
}

.provision_action_icons {
  margin-bottom: 5px;
  font-size: 14px;

  .white {
    color: #007d9c;
    background: #fff ;
    //border-width: 1px ;
    border-color: $primary-color ;
  }

  .button {
    margin-right: 3px;
  }

  a{
    &:hover {
      //color: $primary-color;
    }

    //color: #007d9c;
    font-weight: bold;

    //i {
    //  color: #555;
    //}

  }
}

.policies_table {
  th {
    font-size: 14px !important;
  }
}

.accordion_advanced {
    margin-bottom: 10px;
    &>a {
      padding: 10px 20px;
      font-size: 13px;
      color: #555;
      background: #f7f7f7;
      border: 1px solid #f7f7f7;
      //margin-left: 20px;


      .fa {
        margin-right: 10px;
        color: #777;
      }

      &.active {
        background: #fff;
        border: 0px;
        border-bottom: 3px solid #008cba;
        font-weight: bold;

        .fa-chevron-down {
          display: none;
        }
      }

      &:not(.active){
        border: 1px solid #efefef;
        border-radius: 3px;

        .fa-chevron-up {
          display: none;
        }
      }

      &:hover {
        background: #dfdfdf;
        color: #333333;
      }
    }

    &>.content {
      border-top: 1px solid #cfcfcf;
      //border-radius: 3px;
      padding: 20px;
      margin-top: 8px;
    }
}

.accordion {
  dd {
    &.active {
      .only-not-active {
        display: none;
      }
      .only-active {
        display: inline-block;
      }
    }

    &:not(.active) {
      .only-active {
        display: none;
      }
      .only-not-active {
        display: inline-block;
      }
    }
  }
}

.accordion_list {
  dd {
    &>a {
      padding: 0px;
      background: #fff !important;
    }

    &>.content {
      padding: 5px 0px;
    }

    &:first-child>h2 {
      border-bottom: 1px solid #dfdfdf;
      padding-bottom: 10px;

      .button {
        margin: 0px 3px;
      }

      select {
        height: 39px !important;
        margin: 0px 5px 0px 0px !important;
        float: right !important;
        width: auto !important;
      }

      input {
        margin: 0px 10px !important;
      }
    }
  }

}

.vm_info_inline_list {
  .fa:not(.fa-square) {
    color: #afafaf;
  }

  li {
    margin-right: 30px;
  }
}

.range-slider-active-segment {
  background: #cfcfcf;
}

// There is a bug in zurb foundation and the tooltip z-index is < than modal
.tooltip {
  z-index: 2000;
}

.flot-tick-label {
  color: #999;
}

#li_support-tab {
  background: #f7f7f7;
  border-radius: 3px;
  padding: 5px 0px;
  margin-top: 30px;
  //text-align: center !important;

  .support_title {
    color: #333;
  }
  .support_info {
    margin-top: 10px;
    width: 100%;
  }
  .support_pending {
    color: #777;
  }
  .support_open {
    color: #777;
  }
  .support_button {
    margin-top: 15px;
  }
  .support_connect {
    margin-top: 10px;
    width: 100%;
    color: #777;
  }
  .support_connect_button {
    margin-top: 15px;
  }
}

#user_ssh_public_key_text, #config_ssh_public_key_text {
  font-size: 0.875rem; 
  color: #777; 
  padding: 0px 10px; 
  overflow-x:hidden; 
  text-overflow: 
  ellipsis; height: 120px;
}

.vm-action-disabled {
    //color: red !important;
    color: #cfcfcf !important;
/*
    &:hover {
        color: $alert-color !important;
    }
*/
    cursor: default !important;
}
/*
.vm-action-enabled {
    &:hover {
      color: $primary-color !important;
    }
}
*/