@charset "utf-8";
@import 'normalize';
@import 'variables';
@import 'icon-font';
@import 'extends/tabs';
@import 'extends/datepicker';
// @import 'rtl'; // uncomment to switch to RTL format

/*
Copyright 2008-2013 Concur Technologies, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may
not use this file except in compliance with the License. You may obtain
a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
*/

////////////////////////////////////////////////////////////////////////////////
// GENERAL STUFF
////////////////////////////////////////////////////////////////////////////////

html, body {
  color: $main-text;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @extend %default-font;
  background-color: $main-bg;
  height: 100%;
  -webkit-text-size-adjust: none; /* Never autoresize text */
}

////////////////////////////////////////////////////////////////////////////////
// TABLE OF CONTENTS
////////////////////////////////////////////////////////////////////////////////

#toc > ul > li > a > span {
  float: right;
  background-color: #2484FF;
  border-radius: 40px;
  width: 20px;
}

.toc-wrapper {
  transition: left 0.3s ease-in-out;

  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  bottom: 0;
  width: $nav-width;
  background-color: $nav-bg;
  font-size: 13px;
  font-weight: bold;

  // language selector for mobile devices
  .lang-selector {
    display: none;
    a {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
    }
  }

  // This is the logo at the top of the ToC
  .logo {
    display: block;
    max-width: 40%;
    margin: 14px 0 14px 16px;
  }
  
  // Logo image above replaced with text
  .site-title {
    font-size: 16px;
    display: block;
    margin: 19px 0 20px 15px;

    a {
      color: white;
      text-decoration: none;
    }
  }

  &>.search {
    position: relative;

    input {
      background: $nav-bg;
      border-width: 0 0 1px 0;
      border-color: $search-box-border-color;
      padding: 2px 0 6px 20px;
      box-sizing: border-box;
      margin: $nav-v-padding $nav-padding;
      width: $nav-width - ($nav-padding*2);
      outline: none;
      color: white;
      border-radius: 0; /* ios has a default border radius */
      font-weight: normal;
    }

    input::placeholder {
      color: white;
    }

    &:before {
      position: absolute;
      top: 17px;
      left: $nav-padding;
      color: $nav-text;
      @extend %icon-search;
    }
  }

  .search-results {
    margin-top: 0;
    box-sizing: border-box;
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition-property: height, margin;
    transition-duration: 180ms;
    transition-timing-function: ease-in-out;
    background: $nav-subitem-bg;
    &.visible {
      height: 30%;
      margin-bottom: 1em;
    }

    li {
      margin: 1em $nav-padding;
      line-height: 1;
    }

    a {
      color: $nav-text;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }


  // The Table of Contents is composed of multiple nested
  // unordered lists.  These styles remove the default
  // styling of an unordered list because it is ugly.
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 26px;
  }

  li {
    color: $nav-text;
    transition-property: background;
    transition-timing-function: linear;
    transition-duration: 200ms;
  }

  li.toc-group {
    border-top: 0.4px solid $nav-footer-border-color;
  }
  
  li.toc-child {
    line-height: 31px;
  }

  // This is the currently selected ToC entry
  .toc-link.active {
    background-color: $nav-active-bg;
    color: $nav-active-text;
  }

  // this is parent links of the currently selected ToC entry
  .toc-link.active-parent {
    background-color: $nav-active-parent-bg;
    color: $nav-active-parent-text;
  }

  .toc-list-h2 {
    display: none;
    background-color: $nav-subitem-bg;
    font-weight: 500;
  }

  .toc-h2 {
    padding-left: $nav-padding + $nav-indent;
    font-size: 12px;
  }

  .toc-sep {
    margin: 5px 0;
    padding: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 0.4px solid $nav-footer-border-color;
    display: none;
  }

  .toc-footer {
    padding: 1em 0;
    margin-top: 1em;
    border-top: 0.4px dashed $nav-footer-border-color;

    li,a {
      color: $nav-text;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    li {
      font-size: 0.8em;
      line-height: 1.7;
      text-decoration: none;
    }
  }


  .toc-schema-list.toggle { position:relative; }
  .toc-schema-list.toggle span.toggle:before {
    content: '\02795';
  }
  .toc-schema-list.toggle span.toggle {
    color: #fff;
    float: right;
    top: 0;
    position: relative;
    font-size: 0.8em;
    padding-right: 1.5em;
    position: absolute;
    right: 0;
  }

  .toc-schema-list.toggle {
    cursor: pointer;
  }

  .toc-schema-list.toggle.on span.toggle:before {
    content: '\2796';
  }

  .toc-schema-list.active-parent:before,
  .toc-schema-list.active-parent span.toggle,
  .schema-list li.active-parent li:before,
  .schema-list li.active-parent span.toggle,
  .schema-list li.active-parent,
  .schema-list li.active-parent:before {
    background-color: $nav-active-bg;
    color: $nav-active-text;
  }

  .schema-list {
    display:none;
    list-style: none;
    margin-left: 0;
    overflow: hidden;
  }
  /*.toc-schema-list.toggle.on .schema-list {
    display:block;
  }*/

  .schema-list li {
    padding-left: 4.4em;
    text-indent: -14px;
    font-size: 0.8em;
    cursor: pointer
  }

  .schema-list li:before {
    padding-right: 0;
    content: '»';
    float: left;
  }
}

.toc-link, .toc-footer li {
  padding: 0 $nav-padding 1px $nav-padding;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  color: $nav-text;
  transition-property: background;
  transition-timing-function: linear;
  transition-duration: 130ms;
}

// button to show navigation on mobile devices
#nav-button {
  span {
    display: block;
    $side-pad: $main-padding / 2 - 8px;
    padding: $side-pad $side-pad $side-pad;
    background-color: rgba($main-bg, 0.7);
    transform-origin: 0 0;
    transform: rotate(-90deg) translate(-100%, 0);
    border-radius: 0 0 0 5px;
  }
  padding: 0 1.5em 5em 0; // increase touch size area
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  opacity: 0.7;
  line-height: 16px;
  img {
    height: 16px;
    vertical-align: bottom;
  }

  transition: left 0.3s ease-in-out;

  &:hover { opacity: 1; }
  &.open {left: $nav-width}
}


////////////////////////////////////////////////////////////////////////////////
// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
////////////////////////////////////////////////////////////////////////////////

.page-wrapper {
  margin-left: $nav-width;
  position: relative;
  z-index: 10;
  background-color: $main-bg;
  min-height: 100%;

  padding-bottom: 1px; // prevent margin overflow

  // The dark box is what gives the code samples their dark background.
  // It sits essentially under the actual content block, which has a
  // transparent background.
  // I know, it's hackish, but it's the simplist way to make the left
  // half of the content always this background color.
  .dark-box {
    width: $examples-width;
    background-color: $examples-bg;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .lang-selector {
    position: fixed;
    z-index: 50;
    border-bottom: 5px solid $lang-select-active-bg;
  }
}

.lang-selector {
  background-color: $lang-select-bg;
  width: 100%;
  font-weight: bold;
  a {
    display: block;
    float:left;
    color: $lang-select-text;
    text-decoration: none;
    padding: 0 10px;
    line-height: 30px;
    outline: 0;

    &:active, &:focus {
      background-color: $lang-select-pressed-bg;
      color: $lang-select-pressed-text;
    }

    &.active {
      background-color: $lang-select-active-bg;
      color: $lang-select-active-text;
    }
  }

  &:after {
    content: '';
    clear: both;
    display: block;
  }
}

////////////////////////////////////////////////////////////////////////////////
// CONTENT STYLES
////////////////////////////////////////////////////////////////////////////////
// This is all the stuff with the light background in the left half of the page

.content {
  // fixes webkit rendering bug for some: see #538
  -webkit-transform: translateZ(0);
  // to place content above the dark box
  position: relative;
  z-index: 30;

  &:after {
    content: '';
    display: block;
    clear: both;
  }

  &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl, &>pre.display-inline {
    margin-right: $examples-width;
    padding: 0 $main-padding;
    box-sizing: border-box;
    display: block;

    @extend %left-col;
  }

  &>ul, &>ol {
    padding-left: $main-padding + 15px;
  }

  table ul, table ol {
    padding: 4px 6px 6px 18px;
    margin: 0;
  }

  // the div is the tocify hidden div for placeholding stuff
  &>h1, &>h2, &>div, &>h3.schema-toc {
    clear:both;
  }

  a {
    color: #00698F;
  }
  a:visited {
    color: #0D414D;
  }

  h1 {
    @extend %header-font;
    font-size: 25px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-bottom: $h1-margin-bottom;
    margin-top: 2em;
    border-top: 2px solid rgba(98, 98, 98, 0.3);
    border-bottom: 1px solid rgba(98, 98, 98, 0.3);
    background-color: #F5F5F5;
  }

  h1:first-child, div:first-child + h1 {
    border-top-width: 0;
    margin-top: 0;
  }

  h2, h3.schema-toc {
    @extend %header-font;
    font-size: 19px;
    margin-top: 4em;
    margin-bottom: 0;
    border-top: 0.4px solid rgba(98, 98, 98, 0.3);
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    background-image: linear-gradient(to bottom, rgba(#fff, 0.2), rgba(#fff, 0));
  }
  
  a.schema-anchor {
    display: block;
    margin-top: -5.1em;
    margin-bottom: 5.1em;
    padding-top: 1em;
  }

  // h2s right after h1s should bump right up
  // against the h1s.
  h1 + h2, h1 + div + h2, h1 + h2 + h3.schema-toc, h1 + div + h2 + h3.schema-toc {
    margin-top: $h1-margin-bottom * -1;
    border-top: none;
  }

  h3, h4, h5, h6 {
    @extend %header-font;
    font-size: 15px;
    margin-top: 2.5em;
    margin-bottom: 0.8em;
  }

  h4, h5, h6 {
    font-size: 14px;
  }

  hr {
    margin: 2em 0;
    border-top: 2px solid $examples-bg;
    border-bottom: 2px solid $main-bg;
  }

  table {
    margin-bottom: 1em;
    overflow: auto;
    th,td {
      text-align: left;
      vertical-align: top;
      line-height: 1.6;
      code {
        white-space: nowrap;
      }
    }

    th {
      padding: 5px 10px;
      border-bottom: 1px solid #ccc;
      vertical-align: bottom;
    }

    td {
      padding: 10px;
      border-top: 1px solid #eee;
    }

    tr:last-child {
      border-bottom: 1px solid #ccc;
    }

    tr:first>td {
      top: 0;
    }

    tr:nth-child(odd)>td {
      background-color: darken($main-bg,2.7%);
    }

    tr:nth-child(even)>td {
      background-color: darken($main-bg,5.7%);
    }
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin-left: 15px;
  }

  p, li, dt, dd {
    line-height: 1.6;
    margin-top: 0;
  }

  img {
    max-width: 100%;
    &.medium-image {
      max-width: 70%;
    }
    &.small-image {
      max-width: 60%;
    }
  }


  code {
    background-color: rgba(0,0,0,0.05);
    padding: 3px;
    border-radius: 3px;
    @extend %break-words;
    @extend %code-font;
  }

  pre>code {
    background-color: transparent;
    padding: 0;
  }

  aside {
    padding-top: 1.2em;
    padding-bottom: 1.7em;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    background: $aside-notice-bg;
    line-height: 1.6;

    &.warning {
      background-color: $aside-warning-bg;
    }

    &.success {
      background-color: $aside-success-bg;
    }
  }

  aside:before {
    vertical-align: bottom;
    font-size: 14px;
    padding: 0px 15px 0px 0px;
    width: 25px;
    display: inline-block;
  }

  aside.notice:before {
    @extend %icon-info-sign;
  }

  aside.warning:before {
    @extend %icon-exclamation-sign;
  }

  aside.success:before {
    @extend %icon-ok-sign;
  }

  aside.notice:before {
    content: url("/images/banner-icons/info.svg");
    line-height: 0;
  }

  aside.warning:before {
    content: url("/images/banner-icons/warning.svg");
    line-height: 0;
  }

  aside.success:before {
    content: url("/images/banner-icons/success.svg");
    line-height: 0;
  }

  .icon-check:before {
    @extend %icon-check;
  }

  .icon-close:before {
    @extend %icon-close;
  }

  .search-highlight {
    padding: 2px;
    margin: -3px;
    border-radius: 4px;
    border: 1px solid #F7E633;
    background: linear-gradient(to top left, #F7E633 0%, #F1D32F 100%);
  }
}

// for pages where code samples are turned off, utilise the full page width
.no-code-layout .content {
  &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
      margin-right: 0 !important;
  }
}

////////////////////////////////////////////////////////////////////////////////
// CODE SAMPLE STYLES
////////////////////////////////////////////////////////////////////////////////
// This is all the stuff that appears in the right half of the page

.content {
  pre, blockquote {
    background-color: $code-bg;
    color: #fff;

    margin: 0;
    width: $examples-width;

    float:right;
    clear:right;

    box-sizing: border-box;

    @extend %right-col;

    &>p { margin: 0; }

    a {
      color: #fff;
      text-decoration: none;
      border-bottom: dashed 1px #ccc;
    }
  }

  pre {
    @extend %code-font;
    padding-top: 2em;
    padding-bottom: 2em;
    padding: 1.5em $main-padding;
  }

  blockquote {
    &>p {
      background-color: $code-annotation-title;
      /* padding: $code-annotation-padding 2em; */
      padding: 0.6em 2em 0.8em 2em;
      color: #eee;
    }
  }

  .tooltip{
    position: relative;
    display: inline;
  }
  .tooltip:after{
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: -140px;
    opacity: 0;
    content: attr(data-text); /* might also use attr(title) */
    font-size: 0.8em;
    font-weight: normal;
    font-style: normal;
    height: auto;
    min-width: 100px;
    padding: 5px 8px;
    z-index: 999;
    color: #fff;
    text-decoration: none;
    text-align: center;
    max-width: 25em;
    word-wrap: break-word;
    background: rgba(0,0,0,0.85);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .tooltip:before {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
    left: 50%;
    bottom: 0px;
    opacity: 0;
    content: "";
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: rgba(0,0,0,0.85) transparent transparent transparent;
  }
  .tooltip:after, .tooltip:before {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .tooltip:hover { cursor: help; }
  .tooltip:hover:after{ visibility: visible; opacity: 1; bottom: 28px; }
  .tooltip:hover:before{ visibility: visible; opacity: 1; bottom: 22px; }

  /* tips on bottom */
  .tooltip.bottom:after { bottom: auto; top: 0; }
  .tooltip.bottom:hover:after { top: 28px; }
  .tooltip.bottom:before {
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent rgba(0,0,0,0.85) transparent;
    top: 0px
  }
  .tooltip.bottom:hover:before { top: 20px; }
  /* tips on the right */
  .tooltip.right:after { left: 100%; bottom: -45%; }
  .tooltip.right:hover:after { left: 110%; bottom: -45%; }
  .tooltip.right:before {
    border-width: 5px 10px 5px 0;
    border-color: transparent rgba(0,0,0,0.85) transparent transparent;
    left: 90%;
    bottom: 2%;
  }
  .tooltip.right:hover:before { left: 100%; bottom: 2%; }
  /* tips on the left */
  .tooltip.left:after { left: auto; right: 100%; bottom: -45%; }
  .tooltip.left:hover:after { right: 110%; bottom: -45%; }
  .tooltip.left:before {
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent rgba(0,0,0,0.85);
    left: auto;
    right: 90%;
    bottom: 2%;
  }
  .tooltip.left:hover:before { right: 100%; bottom: 2%; }

}

.content {
  pre, blockquote {
    &.display-inline {
      clear: none;
      width: calc(100% - #{$examples-width});
      padding-top: 1em;
      float: none;
      white-space: pre-wrap;

      * {
        white-space: pre-wrap;
      }
    }
    &.light-box {
      background: #F5F5F5;
      color: initial;
      border: 0.4px solid rgba(128,128,128,0.3);
      border-width: 1px 0;
    }


  }

  ul.error-code-list {
    margin-top: 0.5em;
  }
}

.clear {
  &.right { clear: right; }
  &.left { clear: left; }
  &.both { clear: both; }
}

////////////////////////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
////////////////////////////////////////////////////////////////////////////////
// These are the styles for phones and tablets
// There are also a couple styles disperesed

@media (max-width: $tablet-width) {
  .toc-wrapper {
    left: -$nav-width;

    &.open {
      left: 0;
    }
  }

  .page-wrapper {
    margin-left: 0;
  }

  #nav-button {
    display: block;
  }

  .toc-link {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }
  .content {
    pre, blockquote {
      &.display-inline {
        width: calc(100% - #{$examples-width});
      }
    }
  }
}

@media (max-width: $phone-width) {
  .dark-box {
    display: none;
  }

  %left-col {
    margin-right: 0;
  }

  .toc-wrapper .lang-selector {
    display: block;
  }

  .page-wrapper .lang-selector {
    display: none;
  }

  %right-col {
    width: auto;
    float: none;
  }

  %right-col + %left-col {
    margin-top: $main-padding;
  }

  .content {
    pre, blockquote {
      &.display-inline {
        width: 100%;
      }
    }
  }
}

.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
  color: #909090;
}

.highlight, .highlight .w {
  background-color: $code-bg;
}

.highlight .gi {
  color: #99FF99;
  background-color: rgba(30, 101, 78, 0.5);
  padding: 0.2em 0;
  line-height: 1.5em;
}

.highlight .gd {
  color: #FFAAAA;
  background-color: rgba(214, 0, 0, 0.3);
  padding: 0.2em 0;
  line-height: 1.5em;
}

.content-flagged:before {
display: block;
font-weight: bold;
font-size: 0.8;
color: white;
}

.for-removal:before {
content: 'REMOVE? >>>';
}

.for-removal.end:before {
content: '<<< END REMOVE?';
}

.for-removal {
  background-color: rgb(255, 117, 117);
}

.for-guidance:before {
  content: 'GUIDANCE? >>>';
}
.for-guidance.end:before {
content: '<<< END GUIDANCE?';
}


.for-guidance {
  background-color: rgb(245, 122, 81);
}

.for-discussion:before {
  content: 'DISCUSS? >>>';
}
.for-discussion.end:before {
content: '<<< END DISCUSS?';
}


.for-discussion {
  background-color: rgb(168, 81, 245);
}

.content {
  .method {
    display: block;
    padding: 2px;
    font-size: 0.8em;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    border-radius: 3px;
    color: white;

    &.post {
      background: blue;
    }

    &.put {
      background: orange;
    }

    &.delete {
      background: #333;
    }

    &.get {
      background: green;
    }
  }
}

// staging#305, staging#371
body .tab-json code, body .tab-examples code, body .tab-diff code, body .highlight > code {
    /* background-color: blue; */
    word-break: break-word;
    text-wrap: wrap;
    white-space: break-spaces;
}

// staging#338
// override schema-toc style for custom submenu items
.content h3.schema-toc[data-cds-menu="h3"] {
  margin-top: 2.5em;
  border-top: 0;
  font-size: 15px;
}

// staging#222
// This style adjusts the positioning of the original anchors that were retained to avoid breaking key links.
// Details replicate a.schema-anchor (from staging#311) which made the anchor nav keep the anchor title in view.
p.orig-anchor {
    margin: -5.1em 0 5.1em 0;
    padding-top: 0.1em;
}
