/*
 * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * 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.
 */

body {
    background: #fff;
    color: #444;
}

body.dark {
    background: #121822;
    color: #fff;
}

body.widget {
    background: transparent;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    float: left;
}

.col-1 {
    width: 8.33333333%;
}

.col-2 {
    width: 16.66666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333333%;
}

.col-5 {
    width: 41.66666667%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33333333%;
}

.col-8 {
    width: 66.66666667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33333333%;
}

.col-11 {
    width: 91.66666667%;
}

.col-12 {
    width: 100%;
}

.status-message {
    display: block;
    height: 100%;
    width: 100%;
}

.status-message > .message-info,
.status-message > .message-warning,
.status-message > .message-danger,
.status-message > .message-success {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Dark Theme Styles */
body.dark .tt-hint {
    background: transparent !important;
}

body.dark .tt-input {
    border: 1px solid #6B7992  !important;
    color: #E3E5E6;
}

body.dark .form-control-btn {
    color: #E3E5E6;
}

body.dark #date-select .btn-default {
    background: #636C7C;
    color: #fff;
    border-color: #353C48;
}

body.dark #date-select .btn-default:hover, body.dark #date-select .btn-default[aria-expanded=true] {
    background: #1E2531;
}

#date-select .btn-default[aria-expanded=true] {
    background: #e6e6e6;
}

body.dark #date-select .btn-default.active, body.dark #date-select .btn-default.active:hover {
    background: #438CAD;
    border-color: #353C48;
}

body.dark .stats {
    color: #E3E5E6 !important;
}

body.dark .message {
    background: #1E2531;
    color: #E3E5E6 !important;
}

.breadcrumb {
    background: #1E2531;
}

.breadcrumb a:visited {
    color: #E3E5E6;
}

#canvas-tooltip,
#donutDiv-tooltip,
#canvasSuccess-tooltip,
#canvasFailure-tooltip{
    background: #c4c4c4 !important;
    color: #000;
    opacity: 0.9;
    font-size: 12px;
}

body.dark #canvas-tooltip,
body.dark #donutDiv-tooltip,
body.dark #canvasSuccess-tooltip,
body.dark #canvasFailure-tooltip{
    background: #000 !important;
    color: #fff;
}

/* DataTables issue fixing */
.table {
    font-size: 14px;
}

div.dataTables_length select {
    background: transparent;
}

body.dark div.dataTables_length select {
    color: #fff;
    border-color: #353C48;
}

.dataTables_filter input {
    margin: 0 0 0 14px !important;
    background: transparent;
    padding: 0 5px;
    border: 1px solid #747F8F;
}

div.dataTables_length select option {
    color: #31383e;
}

div.dataTables_processing {
    background: transparent !important;
    padding-top: 30px !important;
}

.dataTablesBottom {
    margin: 20px 0 0 0;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span, .pagination >
.active > span:focus,
.pagination > .active > span:hover {
    background: #438CAD;
    border-color: #438CAD;
}

.pagination > li > a,
.pagination > li > span {
    background: transparent;
    color: #353C48;
}

body.dark .pagination > li > a,
body.dark .pagination > li > a:focus,
body.dark .pagination > li > span,
body.dark .pagination > li.active > span:hover,
body.dark .pagination > li.active > a:hover {
    color: #E3E5E6;
    border-color: #353C48;
}

body.dark .pagination > li > span:hover,
body.dark .pagination > li > a:hover {
    background-color: #353C48;
}

body.dark .pagination > li.active > span:hover,
body.dark .pagination > li.active > a:hover {
    background-color: #438CAD;
}

.pagination > li > span:hover,
.pagination > li > a:hover {
    color: #353C48;
}

body[media-screen=xs] .hidden-xs,
body[media-screen=sm] .hidden-sm,
body[media-screen=md] .hidden-md,
body[media-screen=lg] .hidden-lg {
    display: none !important;    
}

body[media-screen=xs] .visible-xs,
body[media-screen=sm] .visible-sm,
body[media-screen=md] .visible-md,
body[media-screen=lg] .visible-lg {
    display: block !important;    
}

body[media-screen=xs] .visible-inline-xs,
body[media-screen=sm] .visible-inline-sm,
body[media-screen=md] .visible-inline-md,
body[media-screen=lg] .visible-inline-lg {
    display: inline !important;    
}

body[media-screen=xs] .visible-inline-block-xs,
body[media-screen=sm] .visible-inline-block-sm,
body[media-screen=md] .visible-inline-block-md,
body[media-screen=lg] .visible-inline-block-lg {
    display: inline-block !important;    
}


.pagination {
    margin: 0px;
    display: block;
    padding: 5px;
}

.pagination ul > li > a, .pagination ul > li > span {
    padding: 2px 6px;
    line-height: 10px;
    border: none;
}

.twitter-typeahead > pre {
    display: none;
}

.typeahead.tt-hint {
    margin-bottom: 0;
    visibility:hidden;
}

#autocomplete-search-box .typeahead{
    vertical-align: middle !important;
    border-radius: 0px;
    width: 100%;
}
.typeahead{
    width: 100%;
}
.twitter-typeahead{
    width: 100%;
}

span.twitter-type[ahead {
    margin: 0;
    padding: 0;
}

input.typeahead.tt-input{
    width: 100%;
    margin: 0px;
    padding: 0px;
}

input.typeahead.tt-hint{
    width: 100%;
}
.input-group{
    padding:0px 20px;
}

#button-group {
    float: right;
    padding: 0px;
    width: 14%;
    display: table-row;
}

#add-filter {
    height: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 12px
}

#remove-filter{
    height: 20px;
    width: 20px;
    padding: 0px;
    font-size: 12px;
    text-align: center;
    line-height: 12px;
    display:none;
}

.residentIdp { padding-left: 20px; }

.residentIdp > a {
    text-decoration: underline;
    color: #e3e5e6;
}

.residentIdp > a:hover { text-decoration: none; }

body.dark svg.marks .mark-group .background {
    fill: #121822 !important;
}

body.dark svg.marks .mark-group .mark-text text {
    fill: #7D8596 !important;
}

body.dark svg.marks .mark-group .mark-rule line {
    stroke: #E3E5E6 !important;
}

body.dark #spLableId{
    background-color: #494D54;
    color: #fff;
    border: 1px solid #494D54;
    border-radius: 0px;
    padding: 4px 5px;
}
body.dark #spLableId:hover{
    background-color: #1E2531;
    border: 1px solid #383636;
}

body.dark #remove-filter{
    background-color: #494D54;
    color: #fff;
    border: 1px solid #494D54;
}

body.dark #remove-filter:hover{
    background-color: #1E2531;
    border: 1px solid #383636;
}

body.dark #add-filter{
    background-color: #494D54;
    color: #fff;
    border: 1px solid #494D54;
}
body.dark #add-filter:hover{
    background-color: #1E2531;
    border: 1px solid #383636;
}
body.dark .gadget-container{
    height: 100%;
}
#autocomplete-search-box{
    width: 100%;
}
.twitter-typeahead > .typeahead.typeahead-inverted.tt-input + pre + .tt-menu {
    top: auto !important;
    bottom: 15px;
    width: 76%;
    left: 0 !important;
}
.tt-suggestion.tt-selectable:hover {
    cursor: pointer;
    background: #494D54;
    color: #fff;
}

.pagination ul{
    display: block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0px auto;
    width: 50px;
    height: 15px;
    margin-bottom: 10px;
}

.pagination ul li a { 
    padding: 5px;
    border-radius: 0 !important;
}

body.dark .pagination ul li a {
    background: #353C48;
    color: #fff;
}

.pagination ul > li > a:hover {
    background-color: #29313e;
    color: #fff;
}

body.dark .pagination ul > li > a:hover {
    background-color: #535f73;
    color: #fff;
}

body.dark .pagination ul li.active a { 
    background: #29313e;
    color: #4f5a6d;
}
.successChart, .failureChart{
    position: relative;
}
.gadget-container .nav{
    margin-bottom: 0px;
    border-bottom: 1px solid #353C48;
}
.nav-tabs > li > a {
    padding: 0px 10px;
    border-radius: 0px;
    border: none;
    color: #B7B7B7;
    background-color: #2C2D2F;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
    color: #FFFFFF;
    cursor: default;
    background-color: #494D54;
    border-bottom-color: transparent;
    border: none;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    border:none;
}
.nav > li > a:hover, .nav > li > a:focus{
    text-decoration: none;
    background-color: #494D54;
}
.tab-content{
    overflow: inherit;
}

.input-group-btn {
    position: relative;
    white-space: nowrap;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
    display: table-cell;
}

body.dark .tt-hint {
    background: transparent !important;
}

body.dark .tt-input {
    border: 1px solid #6B7992 !important;
    color: #E3E5E6;
}

body.dark .tt-menu {
    background-color: #1E2531;
    color: #E3E5E6;
    border: 1px solid #6B7992;
}