﻿.scrollContainer
{
    float:right;
    display:inline-block;
    height:86%;
    margin-right:1%;
}

.scrollTopArrow {
    width: 100%;
    height: 3%;
    margin-bottom: 20%;
    user-select: none;
    background: linear-gradient(45deg, transparent 65%, #fff 65%), linear-gradient(-45deg, transparent 65%, #fff 65%), linear-gradient(to bottom, #FF0000, #FF0000);
}

.scrollBottomArrow {
    width: 100%;
    height: 3%;
    margin-top: 20%;
    user-select: none;
    background: linear-gradient(225deg, transparent 65%, #fff 65%), linear-gradient(-225deg, transparent 65%, #fff 65%), linear-gradient(to bottom, #FF0000, #FF0000);
}

.scrollTopArrowNoStyle {
    width: 100%;
    height: 5%;
    user-select: none;
    background-image: url(/images/arrow-up.png);
    background-position: center;
    background-size:contain;
    background-repeat:no-repeat;
}

.scrollBottomArrowNoStyle {
    width: 100%;
    height: 5%;
    user-select: none;
    background-image: url(/images/arrow-down.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.scrollLeftArrow {
    width: 2%;
    height: 100%;
    user-select: none;
    display: inline-block;
    float: left;
}

.scrollRightArrow {
    width: 2%;
    height: 100%;
    margin-left:1%;
    user-select: none;
    display: inline-block;
    float: left;
}

.scrollTrack {
    width: 100%;
    height: 90%;
    margin-top: 1%;
    background: linear-gradient(to right, RGBA(0,0,0,0), RGBA(0,0,0,0) 40%, #3D3D3D 40%, #3D3D3D 60%, RGBA(0,0,0,0) 60%, RGBA(0,0,0,0));
    user-select: none;
}

.scrollTab
{
    width: 95%;
    height: 10%;
    min-height: 1%;
    background: linear-gradient(to right, #9D9D9D, #696969);
    border: 1px #666666 solid;
    border-radius: 4px;
    position: relative;
    user-select: none;
    touch-action: none;
}

.scrollTrackHorizontal {
    width: 90%;
    height: 100%;
    margin-left: 1%;
    background: linear-gradient(to bottom, RGBA(0,0,0,0), RGBA(0,0,0,0) 40%, #3D3D3D 40%, #3D3D3D 60%, RGBA(0,0,0,0) 60%, RGBA(0,0,0,0));
    user-select: none;
    display: inline-block;
    float: left;
}

.scrollTabHorizontal
{
    width: 75%;
    height: 95%;
    background: linear-gradient(to bottom, #9D9D9D, #696969);
    border: 1px #666666 solid;
    border-radius: 4px;
    position: relative;
    user-select: none;
    display: inline-block;
    touch-action: none;
}

.scrollTopArrow.short {
    height: 7%;
}

.scrollBottomArrow.short {
    height: 7%;
}

.scrollTrack.short {
    height: 80%;
    margin-top: 5%;
}

/*post info vertical scroll arrows and track*/
#scrollTopArrowPostInfo {
    width: 100%;
    margin-bottom: -25%;
    /*margin-bottom: 40%;
    padding-bottom: 20%;*/
}

#scrollBottomArrowPostInfo {
    width: 100%;
}

.scrollTrackPostInfo {
    width: 100%;
    height: 60%;
    background: linear-gradient(to right, RGBA(0,0,0,0), RGBA(0,0,0,0) 40%, #999999 40%, #999999 60%, RGBA(0,0,0,0) 60%, RGBA(0,0,0,0));
    user-select: none;
}

.scrollTabPostInfo {
    width: 95%;
    height: 10%;
    min-height: 1%;
    background: linear-gradient(to bottom, transparent, transparent 70%, rgba(192, 192, 192, 1)), linear-gradient(to right, #FFFFFF 60%, rgba(192, 192, 192, 1));
    border: 1px #CCCCCC solid;
    border-radius: 4px;
    position: relative;
    user-select: none;
    touch-action: none;
}

/*finance info scroll arrows and track*/
#scrollTopArrowFinInfo {
    width: 100%; 
}

#scrollBottomArrowFinInfo {
    width: 100%;
    margin-top: 10%;
}

.scrollTrackFinInfo {
    width: 100%;
    height: 75%;   
    background: linear-gradient(to right, RGBA(0,0,0,0), RGBA(0,0,0,0) 40%, #999999 40%, #999999 60%, RGBA(0,0,0,0) 60%, RGBA(0,0,0,0));
    user-select: none;
}

.scrollTabFinInfo {
    width: 95%;
    height: 10%;
    min-height: 1%;
    background: linear-gradient(to bottom, transparent, transparent 70%, rgba(192, 192, 192, 1)), linear-gradient(to right, #FFFFFF 60%, rgba(192, 192, 192, 1));
    border: 1px #CCCCCC solid;
    border-radius: 4px;
    position: relative;
    user-select: none;
    touch-action: none;
}