// Sidebar Panel / Mark Details
.sidebar-content {
    //background: lighten($color_gray, 1%);
    background: $color_gray;
    border-left: 1px solid darken($color_gray, 5%);
    //min-height: 100%;
    //height: calc(100% - 80px);
    height: 100%;
    padding-right: 0;
    position: absolute;
    right: -340px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 600;
    width: 340px;
    top: 80px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    @include xs {
        width: 280px !important;
        left: auto !important;
        right: 0 !important;
        //padding: 20px 21px 20px 20px;
        display: block !important;
        //top: 60px;
        top: 0;
        //box-shadow: 0 6px 13px -6px transparentize(desaturate(darken($color_gray, 50%), 2%), .9) inset, 0 12px 30px -12px transparentize(desaturate(darken($color_gray, 50%), 2%), .93) inset;
    }
    &:after {
        content: "";
        display: block;
        width: 340px;
        height: 12px;
        position: fixed;
        top: 65px;
        right: -340px;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        @include md {
            top: 80px;
            //box-shadow: 0 6px 13px -6px transparentize(desaturate(darken($color_gray, 50%), 2%), .9) inset, 0 12px 30px -12px transparentize(desaturate(darken($color_gray, 50%), 2%), .93) inset;
            background: linear-gradient(transparentize(desaturate(darken($color_gray, 50%), 2%), .95), transparentize(desaturate(darken($color_gray, 50%), 2%), .98), transparentize(desaturate(darken($color_gray, 50%), 2%), 1));
        }
        @include xs {
            display: none;
            top: 120px;
            width: 280px;
            //box-shadow: 0 6px 13px -6px transparentize(desaturate(darken($color_gray, 50%), 2%), .9) inset, 0 12px 30px -12px transparentize(desaturate(darken($color_gray, 50%), 2%), .93) inset;
            background: linear-gradient(transparentize(desaturate(darken($color_gray, 50%), 2%), .95), transparentize(desaturate(darken($color_gray, 50%), 2%), .98), transparentize(desaturate(darken($color_gray, 50%), 2%), 1));
        }
    }
    &.active {
      right: 0;
      &:after {
          right: 0;
      }
      .sidebar-mark-info>header {
        right: 0;
      }
    }
    .close-sidebar {
        display: block;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 14px;
        right: 14px;
        border: 1px solid darken(desaturate($color_gray, 12%), 15%);
        border-radius: 50%;
        @include sm {
          top: 22px;
          right: 18px;
        }
        i {
            display: block;
            width: 22px;
            height: 22px;
            background-position: center center;
            background-size: 8px 8px;
        }
    }
    .sidebar-block {
        padding: 15px 0;
        background: $color_white;
        box-shadow: 0 2px 3px 0 transparentize(desaturate(darken($color_gray, 10%), 10%), .4);
        margin-bottom: 20px;
        .sidebar-inner {
            padding: 0 25px 4px;
            @extend %clearfix;
            p {
                font-size: 14px;
                line-height: 1.6;
            }
            a.btn, button {
                @include font-smoothing;
                font-size: 13px;
                line-height: 16px;
                padding: 9px 20px 8px;
                margin: 0 0 3px;
                font-weight: 600;
                width: 100%;
                box-sizing: border-box;
                float: left;
                color: $color_white;
                text-decoration: none;
                text-transform: none;
                //box-shadow: 0 15px 40px -10px transparentize(white, .8) inset, 0 1px 4px 0 transparentize(black, .9);
                @include md {
                    width: auto;
                    margin: 0;
                }
            }
            a {
                color: $color_dark;
                text-decoration: underline;
            }
            .sidenote {
                padding: 10px 0 0 5px;
                margin-bottom: 0;
            }
        }
    }
    .sidebar-mark-info {
        display: none;
    }
    &.wide {
        &:after {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            margin-left: -20px;
        }
    }
    .sidebar-info-block {
        padding: 25px 0;
        .sidebar-links {
            margin: -25px 0;
            padding: 0;
            li {
                list-style: none;
                a {
                    text-decoration: none;
                    display: block;
                    border-bottom: 1px solid darken($color_lighter, 3%);
                    padding: 25px 25px;
                    color: darken($color_dark, 5%);
                    font-weight: 300;
                    &:visited {
                        color: lighten($color_dark, 20%);
                        background-color: rgba(0,0,0,0.02);
                    }
                }
            }
        }
    }
    .suggestion-heading {
        width: 100%;
        padding: 26px 22px;
        margin: 0px;
        font-weight: 400;
        font-style: italic;
        border-bottom: 1px solid #e7e7e7;
    }

    /////// Tag Input Replacement
    .selectize-control {
      &.multi {
        .item {
          background: #62b3e4;
          border-radius: 3px;
          border: none;
          box-shadow: none;
          text-shadow: none;
          margin: 2px 3px 2px 2px;
          font-size: 12px;
          padding: 2px 6px 2px 7px;
          &:last-of-type {
            margin-right: 6px;
          }
          &.active {
            background: darken(#62b3e4, 12%);
            border-radius: 3px;
            border: none;
            box-shadow: none;
            text-shadow: none;
          }
        }
      }
      .selectize-input {
        background: white;
        border: 1px solid darken(desaturate($color_gray, 15%), 6%);
        border-radius: 2px;
        box-shadow: none;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.5;
        color: lighten($color_dark, 5%);
        transition: all .3s;
        min-height: 40px;
        &.has-items {
          padding: 6px;
        }
        div {
            color: white;
        }
      }
      .selectize-dropdown {
        border: 1px solid darken(desaturate($color_gray, 15%), 6%);
        background: #fff;
        margin: -1px 0 0 0;
        border-top: 0 none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 12px 12px -16px transparentize($color_darkest, .8);
        overflow: hidden;
        .selectize-dropdown-content {
          .create {
            padding: 10px;
            background: white;
            color: $color_darkest;
          }
        }
      }
      &.plugin-remove_button {
         .remove {
           width: 18px;
           font-weight: 500;
           font-size: 16px;
           display: flex;
           flex-direction: column;
           height: 100%;
           justify-content: center;
           align-items: center;
           padding: 0 0 1px 1px;
           //box-shadow: 1px 0 0 0 transparentize(white, .8) inset;
           border: none;
           border-radius: 0 3px 3px 0;
           @include sm {
             &:hover {
               background: transparentize(darken(#62b3e4, 25%), .84);
             }
           }
         }
      }
    }
}
.sidebar-mark-info {
    width: 100% !important;
    //opacity: 0;
    > header {  // (.sidebar-action)
        width: 100%;
        z-index: 99999;
        padding: 12px 14px;
        border-bottom: 1px solid darken(desaturate($color_gray, 15%), 6%);
        @include sm {
            display: block;
            padding: 20px;
        }
        @include xs {
            position: fixed;
            top: 0;
            right: 0;
            width: 280px;
            background: $color_gray;
            right: -340px;
            transition: all .3s ease-in-out;
        }
        .sidebar-heading {
            margin: 5px 0;
            font-weight: 400;
            color: $color_dark_gray;
            font-size: 14px;
            @include sm {
                font-size: 16px;
            }
        }
    }
    > main {
      padding: 24px 20px;
      @include xs {
        padding-top: 76px;
        padding-bottom: 120px;
      }
      section {
        margin-bottom: 24px;
      }
    }
    .section-heading {
      @include title-text;
      display: block;
      margin: 0 0 8px;
      font-size: 11px;
      color: $color_dark_gray;
      font-weight: 600;
    }
    .input-field {
      input {
        font-size: 14px;
        display: block;
        height: 40px;
        background: $color_white;
        border: 1px solid darken(desaturate($color_gray, 15%), 6%);
        width: 100%;
        border-radius: 2px 0 0 2px;
        padding: 8px 9px;
        &[type=text] {
          -webkit-appearance: none;
        }
      }
    }
    .button-field {
      padding-right: 33px;
      position: relative;
      input {
        font-size: 14px;
        display: block;
        height: 40px;
        background: $color_white;
        border: 1px solid darken(desaturate($color_gray, 15%), 6%);
        width: 100%;
        border-radius: 2px 0 0 2px;
        padding: 8px 9px;
        &[type=text] {
          -webkit-appearance: none;
        }
      }
      .copy-link {
        display: block;
        height: 40px;
        background: $color_white;
        border: 1px solid darken(desaturate($color_gray, 15%), 6%);
        width: 34px;
        border-radius: 0 2px 2px 0;
        position: absolute;
        top: 0;
        right: 0;
        svg {
          fill: darken(desaturate($color_gray, 15%), 18%);
          -webkit-transition: all .2s;
          transition: all .2s;
        }
        &:hover {
          @include sm {
            svg {
              fill: darken(desaturate($color_gray, 15%), 24%);
            }
          }
        }
      }
    }
    .mark-title, .mark-url {
      h4 {
          position: relative;
          cursor: pointer;
          @include title-text;
          display: block;
          margin: 0 0 8px;
          font-size: 11px;
          color: $color_dark_gray;
          font-weight: 600;
          i {
              position: absolute;
              right: 5px;
              top: 4px;
              color: $color_dark_gray;
              background-size: 100%;
              width: 10px;
              height: 10px;
          }
      }
      .button-field {
        input {
          background: transparentize($color_white, .6);
          color: $color_dark_gray;
        }
      }
    }
    .sidebar-label {
        position: relative;
        margin-bottom: 34px;
        &:before {
            content: "Label";
            @include title-text;
            display: block;
            margin-bottom: 10px;
            font-size: 11px;
            color: $color_dark_gray;
            font-weight: 600;
        }
        a {
            margin: 0;
            font-size: 13px;
            vertical-align: 1px;
            padding-left: 4px;
            font-weight: 600;
            color: $color_dark_gray;
            &:active, &:focus {
                outline: 0;
            }
        }
        &.label-2 {
            a { color: $color_orange; }
            ul.sidebar-label-list li.label-2 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
                opacity: 1;
            }
            #label-chosen.label-2 { opacity: 0; }
        }
        &.label-3 {
            a { color: $color_blue; }
            ul.sidebar-label-list li.label-3 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
                opacity: 1;
            }
            #label-chosen.label-3 { opacity: 0; }
        }
        &.label-4 {
            a { color: $color_yellow_text; }
            ul.sidebar-label-list li.label-4 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
                opacity: 1;
            }
            #label-chosen.label-4 { opacity: 0; }
        }
        &.label-5 {
            a { color: $color_purple; }
            ul.sidebar-label-list li.label-5 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
                opacity: 1;
            }
            #label-chosen.label-5 { opacity: 0; }
        }
        &.label-6 {
            a { color: $color_green_text; }
            ul.sidebar-label-list li.label-6 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
                opacity: 1;
            }
            #label-chosen.label-6 { opacity: 0; }
        }
        &.label-7 {
            a { color: $color_pink; }
            ul.sidebar-label-list li.label-7 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
                opacity: 1;
            }
            #label-chosen.label-7 { opacity: 0; }
        }
        #label-chosen {
            position: absolute;
            left: 172px;
            top: 26px;
            z-index: 9999;
            display: none;
            font-size: 13px;
            color: $color_dark_gray;
            background: lighten($color_gray, 1%);
            min-width: 68px; // Covers the longest label
            font-weight: 600;
        }
    }
    .sidebar-info-panel {
        padding: 0;
        h4 {
            position: relative;
            //cursor: pointer;
            @include title-text;
            display: block;
            margin: 0 0 8px;
            font-size: 11px;
            color: $color_dark_gray;
            font-weight: 600;
            i {
                position: absolute;
                right: 5px;
                top: 4px;
                color: $color_dark_gray;
                background-size: 100%;
                width: 10px;
                height: 10px;
            }
        }
        section {
            margin-bottom: 24px;
            font-size: 14px;
            line-height: 23px;
            //overflow:hidden;
            a.social-link {
                float:left;
                border: 1px solid $color_light;
                border-right: none;
                background: $color_white;
                text-align: center;
                padding: 8px 11px;
                i {
                    color: $color_dark;
                    font-size: 15px;
                }
                &:last-child {
                    border-right: 1px solid $color_light;
                }
            }
            span.action { cursor: pointer; }
            &.sidebar-info-notes {
                //padding: 5px 10px;
                background: white;
                border: 1px solid darken(desaturate($color_gray, 15%), 6%);
                border-radius: 2px;
                padding: 10px 12px;
                font-size: 13px;
                line-height: 1.5;
                color: lighten($color_dark, 5%);
                min-height: 120px;
                transition: all .3s;
                &.editable {
                  box-shadow: none;
                  border: 1px solid darken(desaturate($color_gray, 10%), 15%);
                }
                a {
                  display: inline-block;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  max-width: 100%;
                  vertical-align: bottom;
                }
            }
            &.sidebar-info-notes a {
                color: $color_darker;
                font-weight: 600;
            }
            img {
                max-width:100% !important;
                height:auto;
                display:block;
            }
            .videoInfo {
                clear: both;
                padding: 8px 0 0 0;
                font-size: 13px;
                span.viLeft {
                    font-style: italic;
                    float: left;
                    font-size: 12px;
                }
                span.viRight {
                    font-style: italic;
                    float: right;
                    font-size: 12px;
                }
                a {
                    color: $color_dark;
                    box-shadow: 0px 1px 0px transparentize($color_dark, .7);
                }
                p {
                    clear: both;
                    padding-top: 18px;
                    line-height: 1.5;
                }
            }
            .hrecipe {
                background: #FFF8DB;
                padding: 10px;
                color: #333;
            }
            .hrecipe .fn {
                font-size: 1.5em;
                padding-bottom: 10px;
            }
            .hrecipe .ingredients {
                margin-left: 10px;
                margin-bottom: 10px;
            }
            .hrecipe .ingredients .ingredient {
                display: block;
                border-bottom: 1px solid #c0c0c0;
                margin-bottom: 6px;
            }
            .hrecipe .yield {
                font-weight: bold;
            }
        }
        textarea {
            width: 100%;
            min-height: 75px;
            background: white;
            border: 1px solid darken(desaturate($color_gray, 15%), 6%);
            border-radius: 2px;
            box-shadow: none;
            padding: 10px 12px;
            font-size: 13px;
            line-height: 1.5;
            color: lighten($color_dark, 5%);
            /*background-color: $color_shade;*/
        }
    }
    button {
        clear: both;
        margin-top: 30px;
        width: 100%;
        padding: 10px 20px 13px;
        font-size: 14px;
        color: white;
        border-radius: 5px;
        @include title-text;
        letter-spacing: normal;
        @include font-smoothing;
        font-weight: 700;
        //box-shadow: 0 30px 60px -24px transparentize(white, .8) inset, 0 2px 7px 0 transparentize(darken($color_darkest, 20%), .85);
        cursor: pointer;
        &[data-action="delete_mark"] {
          background: $color_red;
        }
    }
}
#mark-info-dump ul.sidebar-label-list {
    li {
        a {
            right: 0;
            top: 0px;
            width: 100%;
            position: relative;
            padding: 10px 0 10px 24px;
            font-size: 11px;
        }
    }
}
.sidebar-upgrade-notice {
    padding: 15px 40px;
    text-align: center;
    .unmark-upgrade-icon {
        width: 175px;
        margin: 25px auto;
        img {
            max-width:100%;
        }
    }
    h4 {
        font-size: 17px;
        line-height: 28px;
        font-weight: 400;
        padding: 0 35px;
    }
}
#mobile-sidebar-show {
    display: none;
    width: 56px;
    height: 60px;
    position: absolute;
    right: 0;
    top: 0;
    outline: 0;
    @include xs {
        display: block;
    }
    i {
        width: 18px;
        height: 18px;
        position: absolute;
        display: block;
        top: 50%;
        margin-top: -9px;
        left: 50%;
        margin-left: -9px;
        background: none !important;
        .ball {
            display: block;
            height: 3px;
            width: 3px;
            background: $color_white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            margin-top: -2px;
            left: 50%;
            margin-left: -2px;
            -webkit-transition: all .3s;
            transition: all .3s;
            &:first-child {
                margin-left: -8px;
            }
            &:last-child {
                margin-left: 4px;
            }
        }
    }
    &:focus, &:active {
        outline: 0;
    }
    &.active {
        i {
            .ball {
                display: block;
                height: 2px;
                width: 17px;
                border-radius: 0;
                background: $color_white;
                position: absolute;
                top: 50%;
                margin-top: -1px;
                left: 50%;
                margin-left: -11px;
                &:first-child {
                    width: 10px;
                    margin-top: -4px;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    margin-left: 0px;
                }
                &:nth-child(2) {
                    margin-left: -8px;
                }
                &:last-child {
                    margin-top: 2px;
                    width: 10px;
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                    margin-left: 0px;
                }
            }
        }
    }
}
button.upgradeNowSidebar {
    background-color: $color_blue;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .15em;
    padding: 18px;
    width: 200px;
}
