*
{
    margin: 0;
}

html, body
{
    height: 100%;
    overflow-x: hidden;
}

body
{
    padding-top:      60px;
    background-color: #DCDCDC;
}

h1, h2, h3, h4, h5, h6
{
    padding: 0px 0px;
    margin:  0px 0px;
}

h2 {
    font-size: 32px !important;
}

.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: #729FCF;
}

td span {
    display:none; 
}
.wrapper
{
    min-height: 100%;
    height:     auto !important; 
    height:     100%;
    margin:     0 auto -150px;
}

table {
    background-color: #fff;
}

.table>tbody>tr.date-group {
    text-align: left;
    font-size: 14px;
    background-color: #7F8C8D;
    color: #fff;
    font-weight: bold;
}

.input-group-addon {
    min-width:200px;// if you want width please write here //
    text-align:left;
}

#main-container
{
    min-height:  100%;
    padding-top: 50px;
}

.alert-danger {
    color: #fff;
}

.footer, .push
{
    height: 150px; 
}

.footer {
    background-color: #DCDCDC;
    text-align: center;
}

.container .jumbotron, .jumbotron {
    padding: 0;
    padding: 20px 30px;
}

.datepicker {
    z-index:1151 !important;
}

.navbar-brand img {
    max-height: 30px;
}

.navbar-brand {
    background-color: #DCDCDC;
}
.navbar-inverse .btn-link:focus, .navbar-inverse .btn-link:hover, .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-link:hover {
    background-color: #DCDCDC;
    color: #fff;
}

.navbar-brand {
    float: left;
    font-size: 18px;
    line-height: 10px;
    padding: 10px;
}

/* ==================================================
   #HEADER NAVIGATION#
   ================================================== */
   #nav-container
   {
    background: #729FCF;
}

.navbar-inverse .btn-link, .navbar-inverse .navbar-brand, .navbar-inverse .navbar-link {
    color: #fff;
}

.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-text {
    color: #fff;
}

.navbar-inverse .navbar-nav > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > a:hover
{
    color: #729FCF;
    background-color: #DCDCDC;
    font-size:        14px;
    border:           none;
}

.navbar-inverse .navbar-nav > li > a:hover
{
    color: #729FCF;
    background-color: #DCDCDC;
    font-size:        14px;
}

.btn-link
{
    margin-right: 8px;
}

.btn-link:focus, .btn-link:hover
{
    text-decoration:  none;
    color: #729FCF;
    background-color: #DCDCDC;
    font-size:        14px;
}

.nabar-nav {
    margin-top: 5px !important;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover
{
    color: #729FCF;
    background-color: #DCDCDC;
    font-size:        14px;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover
{
    color: #729FCF;
    background-color: #DCDCDC;
    font-size:        14px;
}



.navbar-inverse, .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form
{
    border: none;
}



.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #ddd;
}

td .fa {
    font-size: 18px;
}

.header-table {
    text-align: center;
    padding-bottom: 20px;
}
#add-user {
    margin-bottom: 20px;
}

.input-group {
    padding-top: 5px;
}

.modal-header {
    margin-bottom: 15px;
    border-bottom: 1px #dfdfdf solid;
}
.modal-body {
    overflow: hidden;
    margin: 30px 0px;
    background-color: #fff;
}

.warning-td {
    background-color: #E74C3C !important; 
    color: #fff; 
    font-weight: bold;
}

.blocked-tr {
    background-color: #FFFF66 !important; 

}

.warning-td-sub {
    color: #E74C3C !important; ; 
    font-weight: bold;
}

#loading-content {
    font-size: 128px;
    text-align: center;
    margin-top: 30px;
}

.input-group-addon.data {
    color: #fff;
    background-color: #aab2bd;
    border-color: #96a0ad;
    font-size:12px !important;
    padding: 0px 15px !important;
    min-width:100px;
    text-align:left;
}

#datas-table_length,#users-table_length,#trucks-table_length {
    text-align: right;
    margin-bottom: -30px;
}

div.dataTables_length select {
    width: 75px;
    display: inline-block;
    height: 24px;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.paginate_button {
    margin: 0px 2px;
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer; cursor: hand; 
}

.paginate_button.disabled{
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
}

div.dataTables_paginate {
    margin-top: -20px;
}


/* ==================================================
   #LOGIN MODAL
   ================================================== */

   #loginModal {
    margin-top: 100px;
}

#loginModal .form {
    padding-top: 30px;
}

#loginModal .form-group {
    margin: 10px 10px;
}


.btn-primary.active, .btn-primary.disabled, .btn-primary:active, .btn-primary[disabled] {
    background-color: #324234;
}


.group-btn {
    height: 24px;
    width: 24px;
    font-size: 12px;
    text-align:center;
    padding: 4px 6px;
}

/* ==================================================
   #Emerald Flat Button
   ================================================== */
   .emerald-flat-button
   {
    position:                        relative;
    vertical-align:                  top;
    width:                           100%;
    height:                          60px;
    padding:                         0;
    font-size:                       22px;
    color:                           white;
    text-align:                      center;
    text-shadow:                     0 1px 2px rgba(0, 0, 0, 0.25);
    background:                      #2ecc71;
    border:                          0;
    border-bottom:                   2px solid #28be68;
    cursor:                          pointer;
    -webkit-box-shadow:              inset 0 -2px #28be68;
    box-shadow:                      inset 0 -2px #28be68;
    -webkit-border-top-left-radius:  0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft:      0px;
    -moz-border-radius-topright:     0px;
    border-top-left-radius:          0px;
    border-top-right-radius:         0px;
}

.emerald-flat-button:active
{
    top:                1px;
    outline:            none;
    -webkit-box-shadow: none;
    box-shadow:         none;
    background-color:   #28be68;
    background:         #28be68;
}

.emerald-flat-button:hover
{
    top:                1px;
    outline:            none;
    -webkit-box-shadow: none;
    box-shadow:         none;
    background-color:   #28be68;
    background:         #28be68;
}

/* ==================================================
   -- END OF #Emerald Flat Button
   ================================================== */


   @media (max-width: 978px) {
    .datatable {
      overflow: hidden;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
  }


  .table-wrapper {
     position: relative;
     clear: both;
     height: 300px;
     width: 350px;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
 }

 .row {
  padding:0;
  margin:0;
}

.col-md-12 {
  padding:0;
  margin:0;
}



body {
  padding:0;
}

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
  margin-left: 0;
  margin-right: 0;
  margin-bottom:0;
}
}

@media (max-width: 1390px)
{
    table {
        font-size:11px;
    }
}


@media (max-width: 992px)
{
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse
    {
        margin-right: -15px;
        margin-left:  -15px;
    }
}

@media (max-width: 768px)
{
    .navbar-nav
    {
        text-align: center;
        font-size:  18px;
        overflow:   auto;
        overflow-x: hidden;

    }

    .navbar-inverse .navbar-nav > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > a:hover
    {
        font-size: 18px;
    }

    .navbar-inverse .navbar-nav > li > a:hover
    {
        font-size: 18px;
    }

    .btn-link
    {
        font-size: 18px;
    }

    .btn-link:focus, .btn-link:hover
    {
        font-size: 18px;
    }

    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover
    {
        font-size: 18px;
    }

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover
    {
        font-size: 18px;
    }

    .form-control
    {
        width:  90%;
        margin: 0 auto;
        height: 52px;
    }

}