/*
 * Copyright 2000-2015 JetBrains s.r.o.
 *
 * 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.
 */

#examples-list-resizer {
    border-top-left-radius: 4px;
    border-right: 1px solid #969696;
    width: 240px;
}

.examples-list {
    position: absolute;
    max-height: 100%;
    overflow: auto;
    overflow-x: hidden;
    width: 100%;
    line-height: 1;
}

.examples-folder {
    padding: 8px;
}

.examples-closed-folder-icon {
    display: inline-block;
    width: 5px;
    min-width: 7px;
    height: 10px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -550px;
    position: relative;
    top: 3px;
}

#examples-list .ui-accordion-header.ui-state-active {
    cursor: default;
    color: #000000;
}

#examples-list .ui-accordion-header {
    -webkit-transform: translate3d(0, 0, 0); /*without this first item in accordion sometimes disappears if you are using mac. Deep magic*/
    display: flex;
    overflow: hidden;
    background: white;
    outline: none;
    color: #3164a0;
    margin: 0;
    padding: 6px 0 6px 6px;
    font-size: 14px;
    line-height: 1.2;
}

#examples-list .ui-accordion-header .container{
    flex-grow: 1;
    padding-left: 7px;
    padding-right: 5px;
}

#examples-list > .ui-accordion-header:first-child {
    border-top-left-radius: 4px;
}

#examples-list .ui-icon.examples-open-folder-icon {
    display: inline-block;
    width: 7px;
    min-width: 7px;
    height: 7px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -600px;
    top: 6px;
    position: relative;
}

.folder-header[depth="0"]{
    border-bottom: 1px solid #e9e9e9;
}

.folder-header[depth="0"].ui-state-active{
    border-bottom: 0;
}

.folder-header.ui-state-active + .ui-widget-content{
    background-color: #f3f5f8;
    border-bottom: 1px solid #e9e9e9;
}

.folder-header .text {
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-name-span {
    font-size: 14px;
    padding-left: 20px;
    box-sizing: border-box;
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    max-height: 16px;
    white-space: nowrap;
    word-wrap: break-word;
}

.examples-project-name {
    position: relative;
    cursor: pointer;
    display: block;
    color: #3164a0;
    background: inherit;
    padding: 6px 6px 6px 10px;
}

.examples-project-name.selected{
    color: black;
}

#examples-list [depth="0"] {
    padding-left: 6px;
}

#examples-list [depth="1"] {
    padding-left: 21px;
}

#examples-list [depth="2"] {
    padding-left: 36px;
}

#examples-list [depth="3"] {
    padding-left: 51px;
}

#examples-list [depth="4"] {
    padding-left: 66px;
}

.current-project-name {
    display: block;
    font-size: 14px;
    padding: 6px 6px 6px;
    color: #000000;
    background-color: #d8d8d8;
}

.examples-project-name>.icon {
    position: absolute;
    width: 15px;
    height: 13px;
    background: url("/static/images/icons_all_sprite.svg") -50px -0px;
}

.examples-project-name.modified>.icon {
    background: url("/static/images/icons_all_sprite.svg") -50px -50px;
}

#examples-list .ui-icon {
    position: relative;
    left: auto;
    top: 3px;
    margin-top: 0;
    float: left;
}

.login-link {
    display: inline-block;
    position: relative;
    font-size: 14px;
    padding-right: 4px;
    color: #3164a0;
}

.folder-header.ui-state-active .icons .icon,
.file-header:hover .icons .icon,
.examples-project-name:hover .icons .icon{
    display: inline-block;
}

.icons .icon{
    display: none;
}

.folder-header .icons{
    margin-top: 0;
}

.icons {
    position: absolute;
    display: inline-block;
    background: inherit;
    padding-left: 4px;
    margin-top: 8px;
    top: 0;
    right: 0;
}

.new-file.icon {
    float: left;
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin-right: 4px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -250px;
}

.new-file.icon:hover{
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -300px;
}

.selected.modified .revert.icon {
    position: relative;
    display: inline-block;
    float: left;
    cursor: pointer;
    height: 11px;
    width: 10px;
    top: 1px;
    margin-right: 4px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -150px -350px;
}

.selected.modified .revert.icon:hover {
    background: url("/static/images/icons_all_sprite.svg") no-repeat -150px -400px;
}

.progress-folder-content .examples-project-name.modified > .icon {
    width: 18px;
    height: 15px;
    background: url("/static/images/icons_all_sprite.svg") -50px -150px;
}

.progress-folder-content .examples-project-name.completed > .icon {
    width: 18px;
    height: 15px;
    background: url("/static/images/icons_all_sprite.svg") -50px -100px;
}

.delete.icon {
    float: left;
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin-right: 6px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -350px;
}

.delete.icon:hover {
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -400px;
}

.rename.icon {
    float: left;
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin-right: 4px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -450px;
}

.rename.icon:hover {
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -500px;
}

.file-header-wrapper{
    color: #3164a0;
}

.file-header-wrapper.selected {
    color: #000000;
    background-color: #c1dcff;
}


.file-header {
    cursor: pointer;
    line-height: 16px;
    font-size: 14px;
    position: relative;
    background-color: inherit;
    padding: 6px;
}

.file-header .text {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 18px;
    word-wrap: break-word;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 16px;
    white-space: nowrap;
}

.file-header.hover .text {
    max-height: none;
    white-space: normal;
}

.file-header>.icon {
    position: absolute;
    float: left;
    width: 13px;
    height: 16px;
}

.file-header.modified>.icon {
    margin-top: -2px;
    margin-left: -2px;
    width: 15px;
    height: 18px;
}

.icon.kotlin {
    background: url("/static/images/icons_all_sprite.svg") no-repeat -0px -300px;
}

.icon.java.unmodifiable {
    width: 23px;
    height: 16px;
    margin-left: -10px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -0px -800px;
}

.icon.kotlin.unmodifiable {
    width: 23px;
    height: 16px;
    margin-left: -10px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -0px -500px;
}

.file-header.modified>.icon.kotlin {
    background: url("/static/images/icons_all_sprite.svg") no-repeat -0px -350px;
}

.icon.kotlin-test.unmodifiable {
    width: 23px;
    height: 19px;
    margin-left: -10px;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -0px -550px;
}

.new-project.icon {
    cursor: pointer;
    width: 17px;
    height: 15px;
    margin-top: 7px;
    margin-right: 3px;
    display: inline-block;
    background: url("/static/images/icons_all_sprite.svg") no-repeat -50px -200px;
}

.progressbar {
    width: 100%;
    height: 4px;
    top: 0;
    left: 0;
    margin-top: 4px;
    background: #19bf44;
    position: relative;
}

.progressbar .level-mark-container{
    top : -3px;
    padding: 3px;
    height: 100%;
}

.progressbar .level-mark-container .level-mark {
    height: 100%;
    width: 2px;
    background-color: yellow;
}

.progressbar .empty-fill {
    background-color: #d7d7d7;
    position: absolute;
    right: 0;
    height: 100%;
}

.counter {
    position: absolute;
    color: black;
    right: 10px;
    top: 7px;
}


.radial-progressbar {
    height: 18px;
    width: 18px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.radial-progressbar img {
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: -1;
}

a.advent-of-code-link {
    margin-left: 4px;
    outline: none;
}

.advent-of-code-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("/static/images/star.svg");
}

.advent-of-code-icon:hover {
    background-image: url("/static/images/starHover.svg");
}