html {
        
}
body {
    font-family: Verdana, Arial, sans-serif;
    margin: 0;
    font-size: 14px;
    /*background: #64625f;*/
    background: #44413e;
    min-width: 1360px;
}
body.login {
    background-color: #fff;    
    background-position: 0 1px;
    background-size: 30px 30px;    
    background-image: -webkit-repeating-linear-gradient(0deg, #f1f1f1, #f1f1f1 1px, transparent 1px, transparent 10px), -webkit-repeating-linear-gradient(90deg, #f1f1f1, #f1f1f1 1px, transparent 1px, transparent 10px);
    background-image: repeating-linear-gradient(0deg, #f1f1f1, #f1f1f1 1px, transparent 1px, transparent 10px), repeating-linear-gradient(90deg, #f1f1f1, #f1f1f1 1px, transparent 1px, transparent 10px);
}
.main-top {
    background: #de4444;
    color: #ffffff;
    padding: 10px 15px;
}
.main-top a {
    color: #ffffff;
    text-decoration: none;
}
.main-top a.logo {
    font-size: 10px;
    margin-right: 10px;
}
.main-top a.logo span {
    font-size: 16px; 
    font-weight: bold;
}
.main-container {
    width: 100%;
    background: yellow;
    display: table;
}
.main-left {    
    min-width: 210px;
    width: 210px;
    display: table-cell;
    background: #44413e;
    color: #ffffff;
    vertical-align: top;
    border-right: 2px ridge #878584;    
}
.main-main {
    background: #ffffff;
    display: table-cell;
    color: #45484d;
    vertical-align: top;
}
.main-bottom {
    background: #040404;
    color: #ffffff;
}
/* ------------------------------ button s -----------------------------------*/
.button, a.button {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 15px;
    border-bottom: 1px solid #a41b1b;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}
.button.settings, a.button.settings {
    padding: 5px 10px;    
}
.button.settings img, a.button.settings img {
    width: 15px;
}
.btn-top, a.btn-top {
    background-color: #e77171;
}
.btn-top:hover, a.btn-top:hover {
    background-color: #eb8787;
}
.btn-input, .btn-table, a.btn-input, a.btn-table {
    color: #fff;
    background-color: #d94646;
    border: 1px solid #cf2323;
    padding: 5px 20px;    
    font-weight: bold;
    text-shadow: 1px 1px #6e1c24;    
    outline: none;
}
.btn-input:hover, .btn-table:hover, a.btn-input:hover, a.btn-table:hover {
    background-color: #dc2f2f;
}
.btn-table, a.btn-table {
    font-size: 12px;
    padding: 3px 15px 3px 25px;
    background-size: 20px;
    background-position: left center;
    background-repeat: no-repeat;
    outline: none;
}
.button.edit, .button.remarks, a.btutton.edit, a.button remarks {
    background-image: url('/pics/icons/ic-edit.png');
}
.button.delete, a.button.delete {
    background-image: url('/pics/icons/ic-trash.png');
    background-position: center center;
}
.button.slide, a.button.slide {
    background-image: url('/pics/icons/ic-slide.png');
}
.button.add, a.button.add {
    background-image: url('/pics/icons/ic-moveR.png');
}
.button.remarks, a.button.remarks{
    background-position: center center;
}
.button.ok, a.button.ok {
    background-image: url('/pics/icons/ic-ok.png');
}
.button.print, a.button.print {
    background-image: url('/pics/icons/ic-print.png');
}
/* ---------- main left ----------- */
.main-left a {
    color: #ffffff; 
    text-decoration: none;
}
ul.navi-left, ul.navi-left ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 12px;
}
.navi-left li a {
    display: block;
    padding: 10px 0 10px 40px;
    background: #52504d;
    border-top: 1px solid #64625f;
    border-bottom: 1px solid #64625f;    
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 4% center;
}
.navi-left li a:hover {
    background-color: #363432;
}
.navi-left li ul li a, .navi-left li.on a {
    border: none;
    background-color: #42403e;
}
.navi-left li ul li.on a {
    background-color: #3b3938;
}
.navi-left li ul li a:hover {
    background-color: #3b3938;
}
.navi-left li a.pulpit {
    background-image: url('/pics/icons/ic-pulpit.png');
}
.navi-left li a.zapotrzebowanie {
    background-image: url('/pics/icons/ic-people.png');
}
.navi-left li a.magazyn {
    background-image: url('/pics/icons/ic-warehouse.png');
}
.navi-left li a.realizacja-transportu {
    background-image: url('/pics/icons/ic-wheel.png');
}
.navi-left li a.planowane-transporty {
    background-image: url('/pics/icons/ic-plan.png');
}
.navi-left li a.wyjazdy-sluzbowe {
    background-image: url('/pics/icons/ic-trip.png');
}
.navi-left li a.koszty-pojazdow {
    background-image: url('/pics/icons/ic-cost.png');
}
.navi-left li a.raport {
    background-image: url('/pics/icons/ic-card.png');
}
.navi-left li a.administracja {
    background-image: url('/pics/icons/ic-settings.png');
}
ul.navi-left {
    margin-bottom: 50px;
}
ul.navi-left li ul {
    display: none;
}
ul.navi-left li.on ul {
    display: block;
}
/* ----- welcome box ------ */
.welcome-box {
    border-bottom: 1px solid #64625f;
    padding: 10px;    
}
.welcome-box div {    
    margin-right: 10px;
}
a.welcome-btn img {
    width: 40px; 
    border: 2px solid #64625f;
    border-radius: 5px;
}
a.welcome-btn:hover img {
    border: 2px solid #a1a1a1;    
}
a.welcome-txt {
    color: #d54340;
}
a.welcome-txt:hover {
    text-decoration: underline;
}
/* ---- settings button wrapp itp ----- */
.wrapp-settings {
    background: #363432;
    position: absolute;
    right: 0px;
    top: 30px;
    display: none;
    width: 250px;
    color: #c8c8c8;
    font: bold 12px 'Arial','Verdana',sans-serif;
    padding: 5px 15px;    
}
.wrapp-settings input {
    width: 120px;
    padding: 5px;
}
/* -- */
.log-box.on .login {
    background: #363432;
    border: 0;
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.log-box.on .wrapp-settings {
    display: block;
}
/* --  need div in <a>
.login:focus {
    pointer-events: none;
    cursor: pointer;
    background: #363432;
    border: 0;
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.login:focus .wrapp-settings {
    display: block;
}
*/
/* ------ footer  ------ */
footer.main-bottom {
    padding: 1%;
}
.main-bottom h2 {
    font-size: 18px;
    margin: 0; padding: 0;
    line-height: 18px;
    color: #575655;
}
.foot-col-l {
    margin-right: 100px;
}
.foot-col-r {
    text-align: right;
}
.main-bottom a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
}
.main-bottom a:hover {
    text-decoration: underline;
}
/* ------- breadscrumbs ------- */
.breadscrumbs {
    background: #64625f;
    color: #fff;
    padding: 8px;
    font-size: 11px;
}
.breadscrumbs a {
    color: #fff; 
    text-decoration: none;
}
.breadscrumbs a:hover {
    text-decoration: underline;
}
.breadscrumbs a:first-child {
    background-image: url('/pics/icons/ic-pulpit.png');
    background-position: left center;
    background-size: 20px;
    background-repeat: no-repeat;
    padding-left: 25px;
}
.breadscrumbs a:last-child {
    color: #cccccc;
    pointer-events: none;
}
/* ------ main page ----- */
.main-page {
    color: #575655;
    padding: 5px 10px;
}
.main-page h2 {
    margin: 0; padding: 0; margin-bottom: 15px;
}
.main-page hr {
    border: none;
    border-top: 4px dashed #e5e5e5;
    width: 98%;
    margin: 20px 10px;
}
/* -- */
.fieldset {
    border: 1px solid #e5e5e5;
    margin: 0 0 15px 0;
    padding: 10px;
    font-size: 12px;
}
.fieldset h2, .fieldset label {
    line-height: 30px;
}
.fieldset h2 {
    font-size: 14px;
    background: #f8f8f8;
    margin: -10px -10px 10px -10px;
    font-weight: bold;
    padding-left: 10px;    
}
.fieldset .content {
    padding: 10px;
    font-size: 12px;
}
.filters {
    font-weight: bold;
    font-size: 12px;
}
.filters .fieldset div {
    margin-bottom: 10px;
}
.filters .fieldset form {
    display: inline;
}
.forms input[type=submit], .forms input[type=text], .forms select, .forms textarea {
    margin-right: 25px;
}
.forms input[type=submit].btn-table {
    margin-right: 0px;
}
.forms input[type=text], .forms select, .forms textarea, .forms input[type=password] {
    border: 1px solid #d8d9da;
    border-radius: 5px;
    padding: 7px;
    color: #a7a7a7;
    box-sizing: content-box;
    width: 200px;
    font-weight: normal;
}
.forms textarea {
    width: 350px; height: 110px;
    min-width: 350px; min-height: 110px;
}
.forms textarea.remarks-realization {
    height: 65px; min-height: 65px;
    width: 530px; min-width: 250px;
}
.forms input[type=text]:focus, .forms select:focus, .forms textarea:focus {
    border: 1px solid #66afe9;
    box-shadow: 0px 0px 2px #66afe9;
}
.forms input[type=text].error, .forms select.error, .forms textarea.error, .forms input[type=text].error:focus, .forms select.error:focus, .forms textarea.error:focus {
    border-color: #da8282;
    background-color: #ffd1d1;
}
.forms input.disabled, .forms select.disabled, .forms textarea.disabled, .forms a.disabled {
    border: 1px solid #d8d9da;
    background-color: #e3e3e3;
    cursor: default !important;
    text-shadow: none;
    pointer-events: none;
}
/* --- table ---- */
.grid {
    
}
.forms table {        
    width: 100%;
    font-size: 12px;
    margin-bottom: 10px;
}
.forms table.editing tr:hover, .forms table.highlight tr:hover {    
    background-color: #ededed;
}
.forms table.editing tr:hover {
    cursor: pointer;
}
.forms table tr.header:hover {
    cursor: default;
    background: #f8f8f8;
}
.forms table form, .forms table.highlight form {
    display: inline;
}
.forms tr.header {
    font-size: 14px;
    background: #f8f8f8;    
    font-weight: bold;
}
.forms table td {
    padding: 5px;
    border: 1px solid #dddddd;
}
.forms table .date {
    width: 120px;
}
.forms table .date-hour {
    width: 150px;
}
.forms table .operative {
    min-width: 150px;
    max-width: 150px;
    width: 150px;
}
.forms table .operative2 {
    min-width: 335px;
    max-width: 345px;
    width: 335px;
}
.edit-page div {
    margin-bottom: 20px;
}
.edit-page span {
    display: inline-block;
    width: 200px;
}
.edit-page table tr td {
    border: none;
}
/* ----- red table ----- */
.forms table.red-table {
    font-size: 12px;
}
.forms .red-table tr.header {
    background-color: #e04545;
    color: #fff;
}
.forms table.red-table td {
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.forms table.red-table tr.header td {
    padding: 8px 10px;
}
.red-table .header:hover {
    background-color: #e04545 !important;    
}
.forms table.red-table td:last-child {
    border-right: 1px solid #ddd;
}
/* ---- reservation ---- */
.forms table td.reservation, .reservation:hover {
    background: #bbb !important;
}
/* ----- message ------ */
.message {
    padding: 17px;
    padding-right: 35px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    display: none;
    margin-bottom: 20px;
    position: relative;
    font-weight: normal;
}
.message span {    
    position: absolute;
    top: 13px; right: 13px;
    display: inline-block;
    width: 13px; height: 13px;
    background-image: url('/pics/icons/ic-close.png');    
    background-repeat: no-repeat;    
    background-size: 13px;
    cursor: pointer;
}
.message.success {
    background-color: #609450;
    display: block;
}
.message.error {
    background-color: #bd362f;
    display: block;
}
.custom-tooltip-styling {
    background-color: #bd362f;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    border: none;
    box-shadow: none;
}
.stat-1 { /* zlecone */
    color: red;
    font-weight: bold;
}
.stat-2 { /* przygotowane */
    color: blue;
    font-weight: bold;
}
.stat-3 { /* zaplanowane */
    color: orange;
    font-weight: bold;
}
.stat-4 { /* zrealizowane */
    color: green;
    font-weight: bold;
}
.stat-0 { /* błędny status */
    color: black;
    font-weight: bold;
}
/* ----- logowanie ----- */
.log-wrapp {
    width: 600px; 
    margin: 180px auto;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 5px 5px 25px #888888;
}
.log-header {
    color: #a3a3a3;
    background-color: #64625f;
    padding: 15px;
}
.log-cont {
    padding: 20px;
    font-weight: bold;
    font-size: 12px;
    color: #544f49;
}
.log-cont input {
    margin: 10px 0;
}
.no-rows { 
    color: #fff;
    font-size: 14px;
    background: #878787;
    border: 1px solid #777;
    border-radius: 5px;
    padding: 5px;
    margin: 0;
}
.fieldset-operation-modal {
    margin-top: 30px;
}
/* -------------------------- ajax -------------------------------------------*/
.selectAjax {
    position: absolute;
    top: 45px; 
    left: 5px;
    box-shadow: 0px 0px 2px #66afe9;
    border: 1px solid #66afe9 !important;
    z-index: 100;
    display: none;
}
.selectAjax option:hover {
    background-color: #ddd;
}
/* ------------------- settings --------------------------- */
table.settings-inputs {
    width: auto;
    float: left;
}
.settings-inputs div {
    margin: 0;
}
.settings-inputs div div {
    margin-left: 20px;
}
/* ----- permission ----- */
.perm-opts {
    display: none;
}
.perm-opts-enabled {
    display: block;
}
/* ------------------------  !important --------------------------------------*/
.left {
    float: left !important;    
}
.right {
    float: right !important;
}
.clear {
    clear: both !important;
    margin: 0; padding: 0; width: 0px; height: 0px; line-height: 0px; background: red;
}
.relative {
    position: relative !important;
}
.f-14, a.f-14 {
    font-size: 14px !important;    
}
.w-auto {
    width: auto !important;
}
.w-100pr {
    width: 100% !important;
}
.w-70 {
    width: 70px !important;
}
.w-90 {
    width: 90px !important;
}
.w-150 {
    width: 150px !important;
}
.w-250 {
    width: 250px !important;
}
.w-800 {
    width: 800px !important;
}
.w-30pr {
    width: 30% !important;
}
.w-50pr {
    width: 50% !important;
}
.w-70pr {
    width: 70% !important;
}
.w-25pr {
    width: 25% !important;
}
.h-40 {
    height: 40px;
}
.pad-15 {
    padding: 15px !important;
}
.tb {
    display: table;
}
.tb-tr {
    display: table-row;
}
.tb-td {
    display: table-cell;
}
.scroll {
    overflow-x: scroll;
}
.display-none {
    display: none !important;
}
.margin-0 {
    margin: 0 !important;
}
.margin-right-10 {
    margin-right: 10px !important;
}
.margin-left-10 {
    margin-left: 10px !important;
}
.margin-left-20 {
    margin-left: 20px !important;
}
.margin-top-30 {
    margin-top: 30px;
}
.margin-bottom-20 {
    margin-bottom: 20px;
}
.relative {
    position: relative;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.red {
    color: #bd362f;
}