﻿body {
/*    padding-top: 50px;*/
    padding-bottom: 20px;
    overflow-x:hidden;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.k-button.command-icon,
.k-button.custom-command-icon {
    padding: 4px;
}

table.compact th,
table.compact td,
.k-grid.compact th,
.k-grid.compact td {
    padding: 5px;
}

table.small th,
.k-grid.small th {
    font-size: 0.75rem;
}

table.small td,
.k-grid.small td {
    font-size: 0.75rem;
    font-weight: 400;
}

.k-grid .k-command-cell {
    padding: 4px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

@media (min-width: 1200px) {
    .container {
        width: 95%;
        max-width: 1900px;
    }
}

/* Set width on the form input elements since they're 100% wide by default */
/*
input,
select,
textarea {
    max-width: 280px;
}
*/

.mw-280 {
    max-width: 280px;
}

.popover-title,
.popover-header {
    font-size: 0.8em;
    background-color: royalblue;
    color: white;
}

.popover-content,
.popover-body {
    min-width: 180px;
    font-size: 0.7em;
}

.command-icon {
    margin-bottom: 0rem;
    padding-left: .5rem;
    padding-right: 0px;
    padding-top: .3rem;
    padding-bottom: .2rem;
    min-width: 16px;
}

.del-icon {
    color: red;
    cursor: pointer;
}

.edit-icon {
    color: blue;
    cursor: pointer;
}

@keyframes blink {
    from {border-color: black;}
    to {border-color: red;}
}

.legend {
    font-family: Arial, sans-serif;
    font-size:medium;
    background: #FFF;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
}

.legend h3 {
    margin-top: 0;
}

.emergency{
    position: absolute;
    z-index: 1000;
    top:350px; 
    left:0px; 
    background-color:blue; 
    color:white; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
    padding:5px 10px; 
    font-weight:bold; 
    font-size:large; 
    transform: rotate(-90deg); 
    transform-origin:0 0;
}

.sidebar {
    position: absolute;
    z-index: 1000;
}

.sidebar.handler {
    top:250px; 
    left:0px; 
    background-color:blue; 
    color:white; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
    padding:5px 10px; 
    cursor:grab;
    font-weight:bold; 
    font-size:large; 
    transform: rotate(-90deg); 
    transform-origin:0 0;
    /*animation: sidebar-handler-open 2s forwards;*/
}

.sidebar.content {
    top:130px; 
    left:-250px; 
    width:250px; 
    background-color:white;
    border:solid 1px black; 
    border-bottom-right-radius:10px; 
    border-top-right-radius:10px; 
    padding:10px; 
    /*animation: sidebar-content-open 2s forwards;*/
}

@keyframes sidebar-handler-open {
    from {left:0px;}
    to {left:250px;}
}

@keyframes sidebar-handler-close {
    from {left:250px;}
    to {left:0px;}
}

@keyframes sidebar-content-open {
    from {left:-250px;}
    to {left:0px;}
}

@keyframes sidebar-content-close {
    from {left:0px;}
    to {left:-250px;}
}

.rightSidebar {
    position: absolute;
    z-index: 1000;
}

.rightSidebar.handler {
    top: 250px;
    right: -48px;
    background-color: red;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 10px;
    cursor: grab;
    font-weight: bold;
    font-size: large;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    /*animation: sidebar-handler-open 2s forwards;*/
}

.rightSidebar.content {
    top: 130px;
    right: -328px;
    width: 328px;
    background-color: white;
    border: solid 1px black;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding: 10px;
    bottom: 40px !important;
    /*animation: sidebar-content-open 2s forwards;*/
}

@keyframes rightSidebar-handler-open {
    from {right: -48px;}
    to {right: 280px;}
}

@keyframes rightSidebar-handler-close {
    from {right: 280px;}
    to {right: -48px;}
}

@keyframes rightSidebar-content-open {
    from {right: -328px;}
    to {right: 0px;}
}

@keyframes rightSidebar-content-close {
    from {right: 0px;}
    to {right: -328px;}
}

.rangeSidebar {
    position: absolute;
    z-index: 1000;
}

.rangeSidebar.handler {
    top: 400px;
    right: -110px;
    background-color: red;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 10px;
    cursor: grab;
    font-weight: bold;
    font-size: large;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    /*animation: sidebar-handler-open 2s forwards;*/
}

.rangeSidebar.content {
    top: 130px;
    right: -328px;
    width: 328px;
    background-color: white;
    border: solid 1px black;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding: 10px;
    bottom: 40px !important;
    /*animation: sidebar-content-open 2s forwards;*/
}

@keyframes rangeSidebar-handler-open {
    from {
        right: -110px;
    }

    to {
        right: 220px;
    }
}

@keyframes rangeSidebar-handler-close {
    from {
        right: 220px;
    }

    to {
        right: -110px;
    }
}

@keyframes rangeSidebar-content-open {
    from {
        right: -328px;
    }

    to {
        right: 0px;
    }
}

@keyframes rangeSidebar-content-close {
    from {
        right: 0px;
    }

    to {
        right: -328px;
    }
}

.icon-red {
    color: red;
    margin-right: 8px;
}

.icon-yellow {
    color: orange;
    margin-right: 8px;
}

.table-borderless > tbody > tr > td { 
    border: 0; 
}

.table-listbox table > tbody > tr > td { 
    border: 0; 
    padding-bottom: 2px;
    padding-top: 2px;
}

.table-listbox div.dataTables_scrollBody { 
    border: 1px solid lightgray;
    border-top: none; 
}

/*table.dataTable tbody tr.selected {
  background-color: #B0BED9;
}*/

.table > tbody > tr > td.selected,
.table > tbody > tr > th.selected,
.table > tbody > tr.selected > td,
.table > tbody > tr.selected > th {
  background-color: #B0BED9;
  /*background-color: #d9edf7;*/
}

.table-hover > tbody > tr > td.selected:hover,
.table-hover > tbody > tr > th.selected:hover,
.table-hover > tbody > tr.selected:hover > td,
.table-hover > tbody > tr:hover > .selected,
.table-hover > tbody > tr.selected:hover > th {
  background-color: #a9b7d1;
  /*background-color: #c4e3f3;*/
}

/*td.details-control {
    background: url('./DataTables/images/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('./DataTables/images/details_close.png') no-repeat center center;
}
*/

td.details-control {
    cursor: pointer;
}

td.details-control span:before {
    cursor: pointer;
    display: inline-block;
    font-family: FontAwesome;
    color: #337ab7;
    content: "\f055";
}

tr.shown td.details-control span:before {
    cursor: pointer;
    display: inline-block;
    font-family: FontAwesome;
    color: #DEE7F8;
    content: "\f056";
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

.ssTd {
    word-wrap: break-word;
}

.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

.infobox {
    border:2px solid black;
    margin-top: 8px;
    background:#333;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding: .5em 1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow:0 -1px #000000;
    -webkit-box-shadow: 0 0  8px #000;
    box-shadow: 0 0 8px #000;
}

.ib-div {
    border: 1px solid black;
    padding:0px;
    margin:0px;
    line-height:12px;
}

.ib-line {
    margin:0px;
    padding: 0px 1px;
    background: white;
    color: black;
    font-family: Arial, Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:center;
}

.ib-vehicle {
    margin:0px;
    padding: 0px 1px;
    background: green;
    color: white;
    font-family: Arial, Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:center;
}

.s-padding{
    padding: 0.5rem;
}
.alert-text {
    border: 1px solid red;
/*    margin-bottom: 16px;*/
    padding: 8px;
}

.warning-text {
    border: 1px solid orange;
    margin-bottom: 16px;
    padding: 8px;
}

/* #region custom Kendo UI styles */
.k-button .fa-classic,
.k-button .fa-light,
.k-button .fa-regular,
.k-button .fa-solid,
.k-button .fa-thin,
.k-button .fal,
.k-button .far,
.k-button .fas,
.k-button .fat {
    font-size: inherit;
    line-height: inherit;
    width: auto;
    height: auto;
    margin-left: 0;
}
