/*custom css*/

:focus {
    outline: 0px;
}

.m0 {
    margin: 0px!important;
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    src: local('Oswald Regular'), local('Oswald-Regular'), url("~/fonts/Oswald-Regular-400.woff") format('woff');
}

body {
    background-color: #fff;
}

.loginBody {
    background-color: #f8f8f8;
}

.sidebar ul li a.active {
    background-color: #313131;
    color: #fff;
}

.sidebar ul li a.active:hover {
    background-color: #eee;
    color: #333;
}

a {
    color: #fff;
}

a:hover {
    /*color: #33cafd;*/
    color: #313131;
}

.panel-default>.panel-heading {
    background-color: #fff;
    margin-top: 14px;
}

.loginPanelHead {
    background-color: #f5f5f5 !important;
    margin-top: 0 !important;
    text-align: center;
}

.page-main-header {
    margin: 20px 0 20px;
}

#page-wrapper {
    /*background: #e9e9e9 url("../../pages/tiny_grid.png") repeat 0 0;*/
}

.panel-body {
    background: transparent;
}

.panel {
    border: 1px solid transparent;
    background: transparent;
}

.loginPanel {
    border: 1px solid #d6d6d6;
    background: #fff;
}

.contentTopHeading h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 28px;
    font-family: 'Oswald', sans-serif;
}

.navbar-default {
    background-color: #313131;
}

.sidebar ul li {
    border-color: #555;
}

.navbar-default .navbar-brand {
    color: #fff;
    font-size: 30px;
}

.navbar-default .navbar-brand:hover {
    color: #ddd;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-top: 15px;
}

.fa {
    margin-right: 6px;
}

.btn {
    /*border-radius: 1px;*/
}

.btn-default:hover {
    color: #fff;
    background-color: #313131;
    border-color: #adadad;
}

.loginBody .btn-default {
    color: #fff;
    background-color: #1a1d21;
    border-color: #adadad;
}

.loginBody .btn-default:hover {
    color: #fff;
    background-color: #1d2a32;
    border-color: #192835;
}

.loginLogo {
    width: 130px;
    margin: 5px auto;
}


/*------------form elements----------*/

label {
    font-weight: 500;
}

.form-control {
    border-radius: 1px;
}

.form-group {
    width: 100%;
}

.form-inline label {
    font-weight: 500;
    line-height: 2.4;
}

@media only screen and (min-width: 992px) {
    .inputLabel {
        text-align: right !important;
        padding-right: 5px;
    }
}

.form-inline input,
textarea,
select {
    width: 100% !important;
}

.dataTables_wrapper input {
    width: auto !important;
}

form .row {
    padding-top: 5px;
    padding-bottom: 5px;
}

@media only screen and (max-width: 990px) {
    form .row .checkbox,
    .radio {
        margin-top: 0px;
    }
}


/*--------------Table elements---------*/

.pagination>.active>a {
    background-color: #313131;
    border-color: #555;
}

.pagination>.active>a:hover {
    background-color: #515151;
    border-color: #555;
}

.pagination>li>a {
    color: #333;
}

.pagination>li>a:hover {
    color: #111;
}


/* Top manu and logo */

@media (min-width: 768px) {
    .sidebar {
        margin-top: 65px;
    }
}

.navbar-brand {
    padding: 5px 15px;
    height: 65px;
}

.navbar-top-links {
    margin-top: 10px;
}

.navbar-default {
    border-color: transparent;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-top: 0;
}

footer {
    border-top: 1px solid #555;
    color: #fff;
    /* padding: 20px 0 0 22px; */
    background: #313131;
    margin-bottom: 0px;
    padding: 20px;
}


/*          Remove default attr     */

.paddingRightZero {
    padding-right: 0;
}

.paddingLeftZero {
    padding-left: 0;
}

.marginBottomZero {
    margin-bottom: 8px;
}

.form-groupMarginBottom {
    margin-bottom: 8px;
}

.marginBottom30 {
    margin-bottom: 30px;
}

.marginBottom20 {
    margin-bottom: 20px;
}


/* Page AddNew and Search Block*/

.addNewRow {
    margin: 5px -15px 40px -30px;
}

.input-sm {
    font-size: 14px;
}

.customTable .table>tbody>tr>td,
.customTable .table>tbody>tr>th,
.customTable .table>tfoot>tr>td,
.customTable .table>tfoot>tr>th,
.customTable .table>thead>tr>td,
.customTable .table>thead>tr>th {
    padding: 4px;
    vertical-align: middle;
}

.customTable .btn-group-sm>.btn,
.customTable .btn-sm {
    padding: 3px 8px;
}

.customTable td tdWidth100 {
    width: 100px;
}

.textColorWhite {
    color: #FFF;
}


/*      Popup custom css    */

.customPopupPanel {
    margin: 0 15px;
}

.blockHeader {
    font-size: 16px;
    margin: 15px 0;
    font-weight: 200;
    background-color: #f2f2f2;
    padding: 5px 10px;
    font-family: oswald;
}

@media (min-width: 768px) {
    .modal-dialog {
        margin: 66px auto;
    }
}

.buttonDiv {
    margin: auto;
    text-align: center;
    width: 100%;
}

.buttonDivMargin {
    margin: 40px 0 30px 0;
}

.dashboardScrollingTable {
    max-height: 160px;
    overflow: auto;
}

.paddingTopMargin {
    padding-top: 0px;
}

.paddingBottomMargin {
    padding-bottom: 0px;
}

.controlLabelData {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
}


/*Floating Buttun*/

#fixedbutton {
    position: fixed;
    bottom: 20px;
    right: 30px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
}

#fixedbutton span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

#fixedbutton span:after {
    /*content: '\00bb';*/
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

#fixedbutton:hover span {
    padding-right: 25px;
}

#fixedbutton:hover span:after {
    opacity: 1;
    right: 0;
}


/* Styles go here */

.cssSlideUp {
    transition: .5s;
    max-height: 1000px;
    overflow-Y: auto;
}

.cssSlideUp.ng-hide {
    max-height: 0px;
    transition: .5s;
    overflow-Y: hidden;
}


/*.badge-slider {
      max-height: 2000px;
      -webkit-transition: max-height linear 0.5s;
      -moz-transition: max-height linear 0.5s;
      -o-transition: max-height linear 0.5s;
      transition: max-height linear 0.5s;
      overflow:hidden;
    }

    .badge-slider.ng-hide {
      max-height: 0px;
    }*/

.sl_td {
    text-align: center;
}

.number_td {
    text-align: right;
}

.date_td {
    text-align: center;
}

th {
    text-align: center;
}

input[type=number] {
    text-align: right;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.w20 {
    width: 20px;
}

.btn i.fa,
.panel-body table tr td a i.fa {
    margin-right: 2px;
}

.customTable table table {
    margin-bottom: 0px;
}

.slide {
    opacity: 0;
    display: block!important;
}


/*
.in {
    transition: 200ms opacity ease-in;
    transform-origin: 50% 0%;
    animation: slideIn 300ms ease-in forwards;
} */

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        opacity: .3;
        transform: scale(1);
    }
    100% {
        opacity: 1;
    }
}

.relative {
    position: relative;
}

.prepare-slide {
    position: absolute;
    top: 12px;
    left: 0px;
    z-index: 6;
    transform-origin: 100% 0%;
    transform: scale(0);
    transition: transform 300ms ease-in-out;
}

.shadow1 {
    box-shadow: rgba(0, 0, 0, 0.57) 0px 0px 14px 2px;
}

.shadow2 {
    box-shadow: rgba(0, 0, 0, 0.57) 1px 1px 6px 1px;
}

.shadow3 {
    box-shadow: rgba(0, 0, 0, 0.57) 0px 0px 10px 1px;
}

.p10 {
    padding: 10px;
}

.full {
    width: 100%;
}

.stiky {
    position: absolute;
    top: 120px;
}

.btn.stiky {
    top: 80px;
    z-index: 1;
}

.btn-select {
    margin-top: 10px;
    position: absolute;
    right: 0px;
    z-index: 7;
}

.slide-in {
    transform: scale(1);
}

.sliding-box {
    background: #f2f2f2;
    display: inline-block;
}

.btn-select i {
    transition: transform 200ms ease-in-out;
}

.rotate180 i {
    transform: rotate(180deg);
}

.bbtm {
    border-bottom: 1px solid black;
}

.uib-day button,
.uib-month button,
.uib-year button {
    min-width: 100%;
    border-width: 1px;
    border-color: #fcfafa;
    border-radius: 0px;
}

.uib-button-bar button {
    border-width: 0px;
    box-shadow: none;
    border-radius: 0px;
}

.uib-day button.btn {
    transition: opacity 200ms ease-in;
}

.uib-day button.btn:hover {
    color: #000;
    background: transparent!important;
    opacity: .7;
    border-radius: 10px;
}

.uib-button-bar .uib-datepicker-current {
    margin-right: 10px;
}

.uib-button-bar .uib-clear {
    background: red;
}

.uib-button-bar .uib-close {
    background: green;
}

.uib-weeks td:first-child em {
    background: #e6e6e6;
    color: #626262;
    padding: 5px;
    border-radius: 50%;
    position: relative;
}

.uib-weeks td:first-child em:after {
    content: 'w';
    position: absolute;
    top: -4px;
    left: -3px;
    color: #ff0000;
    background: white;
    border-radius: 50%;
    width: 11px;
    height: 13px;
}

.uib-right,
.uib-left {
    border-width: 0px;
}

.uib-title {
    border-width: 0px 0px 1px 0px;
}

.uib-datepicker,
.uib-datepicker:focus,
.uib-datepicker>div,
.uib-datepicker>div:focus {
    border-width: 0px;
    outline: 0px;
}

#fixedbutton {
    border-radius: 5px;
}


/* Main navbar */

#main-navbar .dropdown-submenu {
    position: relative;
}

#main-navbar .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

#main-navbar .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

#main-navbar .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

#main-navbar .dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

#main-navbar .dropdown-submenu.pull-left {
    float: none;
}

#main-navbar .dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

#main-navbar .container {
    width: 100%;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a {
    color: #fff;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a {
    background-color: #313131;
    color: #fff;
    opacity: .8;
}

#main-navbar .navbar {
    min-height: 65px!important;
}

#main-navbar .navbar-top-links,
#main-navbar .nav.navbar-nav {
    margin-top: 23px;
}

@media (min-width: 768px) {
    #page-wrapper {
        margin: 65px 0 0 0px;
    }
}

#main-navbar .navbar-nav>li>.dropdown-menu {
    margin-top: 0px;
}

#main-navbar .navbar-default .navbar-nav>.active>a:hover {
    background-color: transparent;
    color: #fff;
}

#main-navbar .dropdown-menu>li>a {
    padding: 10px 30px 10px 10px;
    color: #fff;
}

#main-navbar .dropdown-menu>li>a:hover,
#main-navbar .dropdown-menu>li>a:focus {
    background-color: #646363;
}

#main-navbar .nav.navbar-nav>li>a>i {
    margin-right: 10px;
}

#main-navbar .dropdown-menu.multi-level.one-indentation>li>a>i {
    margin-left: 2px;
    margin-right: 10px;
}

#main-navbar .dropdown-menu {
    background-color: #313131;
}

#main-navbar a.dropdown-toggle i {
    margin-right: 14px;
    margin-left: 4px;
}

#main-navbar .dropdown-submenu>a:after {
    margin-right: -18px;
}

@media (min-width: 768px) {
    #main-navbar .navbar-brand {
        margin-left: 0px;
    }
}

.navbar-top-links li:last-child {
    margin-right: -12px;
}

#main-navbar .dropdown-menu {
    box-shadow: none;
    margin-top: 0px;
}

.nav>li>a:focus,
.nav>li>a:hover,
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background-color: transparent;
    border-width: 0px;
    color: #fff;
}

div.menu-toggle-button {
    display: none;
}

#main-navbar .container {
    width: calc(100% - 316px);
    float: left;
}

#main-navbar .right-menu {
    display: inline-block;
    float: right;
    width: 316px;
}

.dropdown-menu.dropdown-user {
    margin-top: 0px;
    border-radius: 0px;
}

button.user-button:hover,
button.user-button:focus,
button.user-button {
    border: 1px solid #fafafa;
    background: transparent;
    color: #fff;
}

@media (max-width: 767px) {
    #main-navbar .container {
        width: 100%;
    }
    #main-navbar .right-menu {
        display: none;
    }
    div.menu-toggle-button {
        display: inline-block;
    }
    div.menu-toggle-button,
    a.navbar-brand {
        box-sizing: border-box;
        width: 33.3333333333%;
    }
    button.navbar-toggle,
    button.user-button {
        margin-top: 15px;
    }
}

@media (min-width: 768px) {
    #main-navbar .right-menu {
        display: inline-block;
    }
}

#loadingImage {
    position: fixed;
    top: 50%;
    left: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .7;
    z-index: 9999;
    top: 0px;
    left: 0px;
}

@media (min-width: 768px) {
    .modal-dialog {
        margin: 0px auto;
        top: 50%;
        transform: translate(0, -50%)!important;
    }
}

.modal-header {
    padding: 0px;
}

.modal-header .panel-group {
    margin-bottom: 0px;
}

.modal-header .panel .panel-heading {
    padding: 30px;
}

.table>tbody:nth-of-type(even) tr {
    background-color: #ffffff;
}

#main-navbar .container .nav.navbar-nav {
    position: static;
    left: 0;
    transform: none;
}

#main-navbar .right-menu {
    position: static;
    z-index: 0;
}

@media (min-width:767px) and (max-width:1320px) {
    #page-wrapper {
        margin: 130px 0 0 0px;
    }
    #main-navbar .navbar {
        margin-bottom: 0px;
    }
    #main-navbar .container {
        width: 100%;
    }
    #main-navbar .navbar-header {
        width: 100%;
    }
    #main-navbar .container .nav.navbar-nav {
        position: relative;
        transform: translateX(-50%) translateY(-12px);
        margin-top: 0px;
        left: 50%;
    }
    #main-navbar .right-menu .dropdown-menu>li>a {
        color: #000;
    }
    #main-navbar .right-menu .dropdown-menu>li>a:hover {
        color: #fff;
    }
    #main-navbar .right-menu .dropdown-menu {
        background-color: #c3c3c3;
    }
    #main-navbar .right-menu {
        position: absolute;
        top: 0px;
        right: 0px;
    }
    #main-navbar .right-menu .nav.navbar-top-links.navbar-right {
        float: none!important;
        text-align: center;
    }
}


/*
    Match color scheama of UI    
*/

.uib-button-bar .uib-datepicker-current,
.uib-button-bar .uib-close,
.uib-button-bar .uib-clear {
    background-color: #ffffff;
    border: 1px solid #2a2929!important;
    color: #000;
    border-radius: 5px!important;
    transition: opacity 200ms ease-in;
}

.uib-button-bar .uib-datepicker-current:hover,
.uib-button-bar .uib-datepicker-current:focus,
.uib-button-bar .uib-datepicker-current:active,
.uib-button-bar .uib-close:hover,
.uib-button-bar .uib-close:focus,
.uib-button-bar .uib-close:active,
.uib-button-bar .uib-clear:hover,
.uib-button-bar .uib-clear:focus,
.uib-button-bar .uib-clear:active {
    background-color: #fff;
    border-color: #313131;
    opacity: .7;
}

.btn-primary {
    background-color: #313131;
    border-color: #313131;
}

.btn-info {
    background-color: #626262;
    border-color: #313131;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #313131;
    border-color: #313131;
    opacity: .7;
}

.btn-info:active:hover,
.btn-primary:active:focus,
.btn-info:active:focus,
.btn-primary:active,
.btn-info:active,
.btn-info:hover,
.btn-info:focus {
    background-color: #626262;
    border-color: #313131;
    opacity: .7;
    outline: 0;
}

#fixedbutton {
    background-color: #313131;
    border: 1px solid #bababa;
}

.btn-info.active {
    color: #fff;
    background-color: #313131;
    border-color: #ffffff;
}

.btn-info.active .text-info {
    color: #fff;
}

.form-control {
    border: 1px solid #8d8989;
    box-shadow: none;
}

.form-control:focus {
    border-color: #000;
    box-shadow: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #f6f5f5;
    color: #000000;
    opacity: .7;
}

.input-group-btn button:hover,
.input-group-btn button:focus,
.input-group-btn button:active,
.input-group-btn button {
    border: 1px solid #313131;
    border-left-width: 0px;
    background: #626262;
    color: #fff;
}

.input-group-btn button:hover,
.input-group-btn button:focus,
.input-group-btn button:active {
    opacity: .9;
    outline: 0;
}
.customTableModal {
    max-height: 300px;
    overflow: auto;
}
.form-group {
    margin-bottom: 8px;
}
/*
    tab css
*/
.nav-tabs>li>a {
    color: #000!important; 
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 5px 9px;
}
.collapse navbar-collapse {
    margin-top: 5px;
}

.GraphMain
{
	width: 1200px;
    font-family: Oswald Light;
    margin: 0px auto;
    background-color: white;
    margin-top: 15px;
    display: flex;
    padding: 10px;
    border-top: 5px solid black;
	border-left: 1px solid black;
	border-Right: 1px solid black;
	border-Bottom: 1px solid black;
	color: Black;
}

.GraphFooter
{
	margin: 0px auto;
	width: 1200px;
    font-family: Oswald Light;
	background-color: Black;
	color: White;
	height: 80px;
	border-top: 5px solid black;
	border-left: 1px solid black;
	border-Right: 1px solid black;
	border-Bottom: 1px solid black;
}

.GraphLeft
{
	width: 620px;
	margin-right: 15px;
	float:left;

}

.GraphLeft h3
{
	text-transform: uppercase;
	line-height: 5px;
}

.month, .month2
{
	float: right;
    width: 70%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0 4px;
    border: none;
}

.month2
{
	width: 90%;
}

.month td, .month2 td
{
	padding:5px ;
}

.Orange 
{
	background-color: #FD7E0D;
	color: white;
}

.Green
{
	background-color: #0F5D47;
    color: white;
}

.black
{
	background-color: #0D0D0D;
	color: white;
}

.GraphLeft h2
{
	text-transform: uppercase;
    font-weight: bold;
    line-height: 25px;
    font-size: 36px;
}

.GraphCenter
{
	width: 180px;
	margin-right: 15px;
	float:left;
}

.GraphRight
{
	width: 370px;
	float:right;
}

.GraphRight h3
{
	float: right;
    background-color: #0F5D47;
    padding: 5px;
    color: white;
    font-weight: bold;
}