.nano {
    position : relative;
    width: 100%;
    height : 100%;
    overflow : hidden;
}

.nano > .nano-content {
    position: absolute;
    overflow: scroll;
    overflow-x: hidden;
    top : 0;
    bottom: 0;
    right: 0;
    left: 0;
}
/*
html[dir="ltr"] .nano > .nano-content {
    right: -5px;
}

html[dir="rtl"] .nano > .nano-content {
    left: -5px;
}
*/
.nano > .nano-content:focus {
    outline: thin dotted;
}

.nano > .nano-content::-webkit-scrollbar {
    display: none;
}

.has-scrollbar > .nano-content::-webkit-scrollbar {
    display: block;
}

.nano > .nano-pane {
    background: rgba(var(--text-color), var(--opacity-divider));
    position : absolute;
    width: 0.25rem;
    right: 0;
    left: auto;
    top: 0;
    bottom : 0;
    visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
    opacity: 0;
    -webkit-transition: .2s;
    -moz-transition : .2s;
    -o-transition : .2s;
    transition: .2s;
    -moz-border-radius: 0.125rem;
    -webkit-border-radius : 0.125rem;
    border-radius : 0.125rem;
}

html[dir="ltr"] .nano > .nano-pane {
    right: 0;
    left: auto;
}

html[dir="rtl"] .nano > .nano-pane {
    right: auto;
    left: 0;
}

.nano > .nano-pane > .nano-slider {
    background: rgba(var(--text-color), var(--opacity-hint));
    position: relative;
    margin: 0;
    -moz-border-radius: inherit;
    -webkit-border-radius : inherit;
    border-radius : inherit;
}

.nano.visible-scrollbar > .nano-pane,
.nano:hover > .nano-pane,
.nano-pane.active,
.nano-pane.flashed {
    opacity: 1;
}