.bg { 
    /* The image used */
    /*background: url("../img/tatasky_bg.png") no-repeat center center fixed;*/
    background-color: #0189b6 !important;

    /* Full height */
    height: 30%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body
{
    background-color: #f2f2f2 !important;
}

/*Header Style*/
nav ul a
{
    color: #000;
}

.sidenav{
  background-color: #666666;
}

.sub_menu
{
  display: none;
  /*background: #51aac7;*/
  background:#00a9d6;
}

.help .btn-ed-style, .report_filter .btn-ed-style
{
background-color: #0189b6!important;
    width: 30px;
    height: 30px;
line-height: 15px;
}

.help .btn-ed-style .btn-floating, .report_filter .btn-ed-style .btn-floating
{
padding: 2px;
    width: 25.4px;
    height: 25.4px;
line-height: 15px;
}

.help .icon-ed-style, .report_filter .icon-ed-style{

font-size: 0.9rem;
line-height: 15px;
}


.page-name
{
  font-size: 1.1rem;
}

.breadcrumb {
    padding: 0;
    background: transparent;
    margin-bottom: 0.25rem;
    font-size: 12px !important;
}

.btn-ed-style
{
  background: #dc3545;
}

.btn-ed-style:hover
{
  background: #dc3545;
}

.btn-ed-style:active,
.btn-ed-style:focus,
.view-active
{
  background: blue;
}

.btn-layout 
{
    background-color: #0189b6!important;
    height: 30px;
    line-height: 20px;
    padding: 0 10px;
}

/* Left Navigation Bar*/
div.arrow-up {
  z-index: 5001;
  position: fixed;
  height:auto;
  width:60px;
  background-color:#666666;
  border:1px solid #666666;
  /*position:relative;          /* damit nachher :before und :after mit position:absolute */
                    /* absolut an der box ausgerichtet werden können        */
  top: 70px;
  border-radius-top-left:10px;
  border-radius-top-right:10px;
  display: block; /* Make the links appear below each other instead of side-by-side */
  text-align: center; /* Center-align text */
  /*padding: 5px; /* Add some padding */
  color: white; /* White text color */
  font-size: 18px; /* Increased font-size */
}

.initial{
  width: 30px;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  padding: 5px 20px 5px 0px;
}

.icon-bar {
  z-index: 5001 !important;
  position: fixed;
  max-height: 70%;
  width:60px;
  top: 120px;
  background-color: #666666; 
  border-radius-bottom-right: 3px;
  border-radius-bottom-left: 3px;
  z-index: 5000;
  overflow-y: auto;
}

.icon-bar a i, .arrow-up a i
{
  width: 30px;
  color: white; /* White text color */
  font-size: 14px; /* Increased font-size */
  text-decoration: none;
  padding-right: 15px;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;   
  /*padding: 5px;*/
}

.main-menu li a i, .main-menu li a span, .sidenav li>a{
  color: white; /* White text color */
  font-size: 14px; /* Increased font-size */
}

.sidenav li>a{
  padding: 0 20px;
}
.icon-bar a, .arrow-up a {
  display: block; /* Make the links appear below each other instead of side-by-side */
  text-align: left; /* Center-align text */
  padding: 6px 15px 6px 15px;
  font-size: 14px; /* Increased font-size */
  color: white; /* White text color */
  text-decoration: none;
}

/*.icon-bar a:hover {
    background-color: #000;
}*/

.icon-bar a .menu-text, .arrow-up a .menu-text{
  display: none;
  padding: 5px;
  text-align: left;
}

/*
 *  STYLE 16
 */

.icon-bar::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

.icon-bar::-webkit-scrollbar
{
  width: 12px;
  background-color: rgba(255, 255, 255, 0.5);
}

.icon-bar::-webkit-scrollbar-thumb
{
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: -webkit-linear-gradient(top, #67cbe3 0%, #67cbe3 100%);
}


.navbar-fixed{
  z-index: 5001 !important;
}

.arrow-up:before {
  position:fixed;         /* positioniert sich an box                 */
  left:20px;            /* border-breite mal 2                      */           /* für die andere Seite wäre es right:-20px */ 
  top:-20px;
  content:'';             /* leerer Inhalt */
  height:0;
  width:0;
  border:10px solid transparent;
  z-index:1;              /* graues Kaestchen unterste Ebene */
}

.arrow-up:after{
    position:absolute;          /* positioniert sich an box                      */
    left:22px;            /* border-breite mal 2 minus dicke des Schattens */
    top:-20px;
    content:'';             /* leerer Inhalt */
    height:0;
    width:0;
    border:10px solid transparent;
    z-index:2;              /* weißes Kaestchen über der Ebene :before */
}

.arrow-up:before {
    border-bottom-color:#666666;     /* stellt den Schatten dar                        */
                      /* für die andere Seite wäre es border-left-color */
}  

.arrow-up:after {
    border-bottom-color:#666666;     /* stellt das kleine weiße Dreieck dar            */
                      /* für die andere Seite wäre es border-left-color */
}
/* Application color theame*/

.btn-ed-config{
    background: #ff4949;
    color: #fff !important;
}  

.btn-ed-config:hover{
    background: #ff495cc4;
    color: #fff !important;
} 

.btn-ed-config i{
    color: #fff;
}       

/*Dashboard card styles*/
#dashboard_satus_1{
        background-image: linear-gradient(to bottom, #666666, #6f7383, #6a82a2, #5595be, #00a9d6);
    }
#dashboard_satus_2{
        background-image: linear-gradient(to bottom, #666666, #6f7383, #6a82a2, #5595be, #00a9d6);
    }
#dashboard_satus_3{
        background-image: linear-gradient(to bottom, #666666, #6f7383, #6a82a2, #5595be, #00a9d6);
    }
#dashboard_satus_4{
        background-image: linear-gradient(to bottom, #666666, #6f7383, #6a82a2, #5595be, #00a9d6);
    }
#dashboard_satus_5{
       background-image: linear-gradient(to bottom, #666666, #6f7383, #6a82a2, #5595be, #00a9d6);
}
#dashboard_satus_6{
       background-image: linear-gradient(to bottom, #666666, #6f7383, #6a82a2, #5595be, #00a9d6);

.dashboard-content{
  padding: 15px;
  background: #FFF;
  border-radius: 10px;
  margin-top: 5px;
}

.chart_style{
    background: #FFF; 
}
/*Help menu*/





.table td, .table th
{
  padding: 0.5rem;
}



.fixed-action-btn
{
  bottom: 50px;
}

i.shake:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s; 
    /* When the animation is finished, start again */
    animation-iteration-count: 1; 
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}


.style1_bg
{
    background-color: #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 0 24px 38px 3px` rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
}


.tabs .tab a:hover, .tabs .tab a.active{
    background-color: #fbb8b857 !important;
    color: #ee6e73;
    cursor: pointer;
}