/* ================================================= FONT FACE ================================================= */

@font-face {
    font-family:bebasneue;
    src: url("../fonts/BebasNeue.ttf");
    
}


/*GLOBAL ELEMENTS*/

body {
    font-family: sans-serif;
	background-color: #000000;
	margin: 0px;
	overflow: hidden;
}

.input-text {
    padding:1.5%;
    background:#000;
    border-radius:5px;
    border:1px #AAA solid;
    color:#CCC;
    width:97%;
}

.input-text:focus {
    background:#111; 
    box-shadow:0px 0px 5px #FFF inset;
}
/* ================================================= MARKERS ================================================= */
.title-container {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1001;
    padding:20px;
}

.main-title {
    font-size:40px;
    font-family:bebasneue;
    color:#FFF;
}

.sub-title {
    font-size:small;
    color:#FFF;
}

/* ================================================= MARKERS ================================================= */

#marker{
    border-radius:4px;
	position: absolute;
	background-color: rgba(0,0,0,0.8);
    padding:8px;
	color: #FFF;
    border:1px solid #222;
    cursor:pointer;
}

#marker:hover{
    box-shadow:0px 0px 15px #FFF;
    background:rgba(120,120,120,0.95) !important;
}

.marker-title{
	font-family: bebasneue;
	font-weight: lighter;
    letter-spacing: 0.04em;
}

.marker-detail-container{
    border-top:2px solid #666;
    padding-top:5px;
    font-size:small;
}

.marker-detail-label {   
    float:left;
    margin-right:20px;
    font-weight: bold;
}

.marker-detail-value {   
    float:right;
}

/* Specific Marker Size */

.marker-big {
	background-color: rgba(0,0,0,0.95) !important;   
}

.marker-current {
    color:#333 !important;
    box-shadow:0px 0px 15px #FFF;
    border: 2px solid #333 !important; 
	background-color: rgba(200,200,200,0.95) !important;   
}

.marker-big .marker-title{
    font-size:x-large;
}

.marker-small .marker-title{
   font-size:large;
}

.marker-small .marker-detail-container{
    display:none !important;
}

.marker-hidden {
    display:none !important;
}

/* ================================================= LEFT SIDEBAR ================================================= */

.leftbar-container {
    position:absolute;
    bottom:0px;
    left:20px;
    width:120px;
    height:100%;
    z-index:1000;
    overflow: visible !important;
}

#bank-chart-container {
    top:100px;
    position:absolute;
}

.highcharts-container {
    overflow: visible !important;
}

.bank-filter-container {
    width:105px;
    position:absolute;
    top:105px;
    left:130px;
}

.bank-filter-button {
    border-radius:0px !important;
    background:#111;
    color:#AAA !important;
    border: 1px solid !important; 
    border-right: 10px solid !important; 
}

.bank-filter-button:hover {
    background:#222;
}

#mandiri-filter {
    border-color:#013066 !important;
}
#bri-filter {
    border-color:#E0EEF7 !important;
}
#bni-filter {
    border-color:#00525D !important;
}
#cimb-filter {
    border-color:#6E2127 !important;
}
#bca-filter {
    border-color:#FFCC00 !important;
}

.bank-filter-box-down {
    border:1px solid !important;
    color:#666 !important;
}

  .ui-autocomplete {
    height: 900px;
  }
      
/* ================================================= RIGHT SIDEBAR ================================================= */

.rightbar-container {
    position:absolute;
    padding-top:20px;
    padding-right:20px;
    padding-left:20px;
    top:0px;
    right:0px;
    width:25%;
    min-width:252px;
    height:100%;
    z-index:1000;
    background: #000;
    /*border-left:2px #111 solid;*/
    box-shadow:-20px 0px 50px #000000;
}

.chart-header {
	font-family: bebasneue;
    font-size:20px;
	color: #AAA;
    letter-spacing: 1.5px;
    padding-bottom:3px;
    margin-bottom:5px;
}

#debet-chart-header{
    border-bottom:2px solid #5698FD;
}

#credit-chart-header{
    border-bottom:2px solid #FF8833;
}

.chart-container {
    margin-bottom:10px; 
}

.filter-container {
    position:absolute;
    bottom:20px;
    letter-spacing: 0.04em;
    right:50%;
    margin-right:-126px;
    background:#000;
}

.label-filter-container {
    color:#CCC;
    font-family: bebasneue;
}

.debet-filter-container {
    margin-bottom:10px;  
    height:40px;
}

.credit-filter-container {
    margin-bottom:20px;  
    height:40px;
}

.filter-label {
    float:left;
    width:40px;
    margin-right:10px;
    margin-bottom:5px;
    text-align:center;
}

.filter-circle {
    border-radius:50%;
    width:40px;
    height:40px;
    float:left;
    margin-right:10px;
    cursor:pointer;
    text-align:center;
    line-height: 30px;
}

.filter-innercircle {
    border-radius:50%;
    position:relative;
    top:5px;
    left:5px;
    width:30px;
    height:30px;
    background-color:#111;
    box-shadow:0px 0px 15px #000 inset;
}

.filter-circle:hover{
    box-shadow:4px 4px 10px #333 inset;
}

.filter-innercircle:hover{
    box-shadow:4px 4px 15px #000 inset;
    color:#666;
}

.filter-box {
    color:#000;
    border-radius:4px;
    font-family:bebasneue;
    font-size:large;
    float:left;
    width:100px;
    text-align:center;
    height:25px;
    margin-top:5px;
    padding-top:5px;
    cursor:pointer;
    box-shadow:0px -2px 15px #000 inset;
    border:1px solid #000;
}

.filter-box:hover{
    box-shadow:5px 5px 15px #000 inset;
    color:#111;
    border:1px solid #000;
}

/* Filter Color */
#debet-filter {
    background:#5698FD;
}

#credit-filter {
    background:#FF8833;
}


#debet-skt-filter {
    background-color:#2146FF;
    color:#2146FF;
}

#debet-rtgs-filter {
    background-color:#5698FD;
    color:#5698FD;
}

#debet-tt-filter {
    background-color:#DAF6F5;
    color:#DAF6F5;
}

#credit-skt-filter {
    background-color:#FF4422;
    color:#FF4422;
}

#credit-rtgs-filter {
    background-color:#FF8833;
    color:#FF8833;
}

#credit-tt-filter {
    background-color:#FFCC88;
    color:#FFCC88;
}

/* clicked button */
.filter-box-down{
    box-shadow:4px 4px 15px #000 inset;
    color:#999;
    background-color:#333 !important;
    border:1px solid #222;
}

.filter-box-down:hover{
    box-shadow:4px 4px 15px #000 inset;
    color:#999;
    background-color:#222 !important;
    border:1px solid #222;
}

.filter-circle-down {
    background-color:#454545 !important;
    box-shadow:4px 4px 15px #111 inset;
    color:#000000 !important;
}

/*  */

.search-box{
    margin-bottom:10px;
    width:100%;
}

#search-suggestion {
    position:absolute;
    border-radius:2px;
    background:#CCC;   
    z-index:999999999999999;
    margin-top:-4px;
    max-height:50%;
    overflow-y: auto;
    padding:0px;
    display:none;
}

#search-suggestion li {
    background:#CCC;   
    padding:10px;
    font-size:x-small;
    list-style: none;
    cursor:pointer;
}

#search-suggestion li:hover {
    background:#AAA;   
}

#slider-title {
    color:#FFF;
    font-family:bebasneue;
    text-align:center;
    letter-spacing:3px;
    margin-top:8px;
}

#time-slider-container {
    height:85px;
    z-index:999999;
    position:absolute;
    bottom:10px;
	background-color: rgba(0,0,0,0.8);
    border:2px #AAA solid;
    border-radius:5px;
    min-width:270px;
}

#time-slider {
    width:90%;
    margin:10px auto;
}

.time-ticks-container {
    width:100%;
    margin-left:2%;
}

.time-tick {
    color:#999;
    text-align:center;
    font-size:10px;
    float:left;
    width:5%;
    margin-right:3.15%;
    cursor:pointer;
}

.ui-widget-header {
    height:5px !important;
    background:#AAA !important;   
    box-shadow: 0px 2px 3px #CCC inset;
}

.ui-slider-horizontal{
    height:5px !important;
    background:#666 !important;
    border-radius:5px !important;
    border:none !important;
    box-shadow: 0px 5px 5px #333 inset;
}

.ui-slider-handle{
    cursor:pointer !important;
    height:11px !important;
    width:11px !important;
    border-radius:50%;
    border:2px solid #333 !important;
    box-shadow: 0px 0px 5px #FFF;
}

#option-container {
    padding:0px 10px;
    height:85px;
    z-index:999999;
    position:absolute;
    bottom:10px;
	background-color: rgba(0,0,0,0.8);
    border:2px #AAA solid;
    border-radius:5px;
    color:#FFF;
    width:120px;
}

#option-title {
    color:#FFF;
    font-family:bebasneue;
    text-align:center;
    letter-spacing:3px;
    margin-top:8px;
    margin-bottom:4px;
}

.option-item {
    font-size:12px !important;
}

.option-item label {
    position:relative;
    top:-2px;   
}