body {
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    #min-height: 100vh;
    word-break: break-word;
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*color: white;*/
}
#viewport {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#content {
    width: 100%;
    position: relative;
    margin-right: 0;
}
@media (max-width: 992px) {
    .active-sidebar {
        margin-left: 0px;
        left: -250px;
    }
    .sidebar1 {
        margin-left: 250px;
        left: -500px;
    }
    .sidebar2 {
        margin-left: 0px;
    }
    .viewport1 {
        padding-left: 0px;
    }
    .activeViewPort {
        padding-left: 0px;
    }
}
@media (min-width: 992px) {

    .active-sidebar {
        margin-left: 250px;
        left: -500px;
    }

    .sidebar1 {

        left: -250px;
    }

    .viewport1 {
        padding-left: 0px;
    }

    .activeViewPort {
        padding-left: 250px;
    }

}
#sidebar {
    z-index: 1000;
    position: fixed;
    left: -250px;
    width: 250px;
    height: 100%;
    overflow-y: auto;
    background: #37474F;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top:0;
}
#sidebar header {
    background-color: #263238;
    font-size: 20px;
    line-height: 52px;
    text-align: center;
}
#sidebar header a {
    color: #fff;
    display: block;
    text-decoration: none;
}
#sidebar header a:hover {
    color: #ff3d3a;
    text-decoration: none;
}
a.l2 {
    padding: 16px 38px!important;
}
#sidebar .nav a {
    background: none;
    border-bottom: 1px solid #455A64;
    color: #CFD8DC;
    padding: 16px 24px;
    width: 250px;
}
#sidebar .nav a:hover {
    background-color: #343a40 !important;
    color: #ECEFF1;
    text-decoration: none;
}
#activeElementSideBar {
    background-color: #343a40 !important;
    color: #ECEFF1;
    text-decoration: none;
}
#sidebar .nav a i {
    margin-right: 16px;
}
.navSidebar > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    width: 100%;
}
.sidebar-toggler {

    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border-radius: 0.25rem;
    border-color: transparent;
}
.backw {
    background: white;
}
.MW_colElement {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 3%;
    margin-top: 20vh;
    border-radius: 10px;
}
.enviName {
    background-color: rgba(250, 250, 250, 0.9);
    width: 100%;
    height: 100%;
    padding: 4rem;
    border-radius: 8px;
}
.transColor {
    background-color: rgba(31, 31, 31, 0.99);
}
.modal-content {
    background-color: rgba(31, 31, 31, 0.98);
    color:white;
}
.colStyle {
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none;
}
.bg-inactive {
    background-color: rgba(255, 0, 0, 0.5) !important;
}
.bg-inactive:hover {
    background-color: rgba(255, 0, 0, 0.71) !important;
}
.enviNameClick:hover {
    background: rgba(250, 250, 250, 0.9);
    cursor: pointer;
}
a, a:hover {
    color: inherit;
    text-decoration: none;
}
div[role="treeitem"] {
    background-color: #343a40;
}

div[role="treeitem"]:hover {
    background-color: #23282e !important;
}
#errorContainer {
    font-size: large;
    max-width: 40ch;
    word-wrap: break-word;
    z-index: 1500;
    position: fixed;
    right: 0px;
    top: 10vh
}
#MainContent2 {
    margin-top: 10rem;
}

.modal-footer {
    border-top: 1px solid #ff000000;
}

.table {
    word-break: normal;
    /*color:white!important;*/
}
button[data-checkActive='1']>input[type='checkbox'] {
    display: none;
}
button[data-checkActive='1']>span[data-icon='1']{
    opacity: 0;
}
button[data-checkActive='1'].active>span[data-icon='1'] {
    opacity: 1;
}
/*loading*/
@keyframes ldio-4zwh7x54wvv {
    0% { transform: translate(-50%,-50%) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-4zwh7x54wvv div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 20px solid #32d25b;
    border-top-color: transparent;
    border-radius: 50%;
}
.ldio-4zwh7x54wvv div {
    animation: ldio-4zwh7x54wvv 1s linear infinite;
    top: 100px;
    left: 100px
}
.loadingio-spinner-rolling-de2dx25kj5q {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: none;
}
.ldio-4zwh7x54wvv {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
}
.ldio-4zwh7x54wvv div { box-sizing: content-box; }
/* generated by https://loading.io/ */
#loading{
    position:fixed;
    text-align: center;
    z-index: 3000;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height:100vh;
    margin:auto;
}
#loading>div{
    position: relative;
    top:35%;
}
.pt-9{
    padding-top:9vh;
}
#loginContainer{
    padding: 3%;margin-top: 5vh;border-radius: 10px;font-size: large;
}
.listaAwarii{
    padding: 3%;border-radius: 10px;font-size: large;
}
.chart{
    width: 100%;background: #bababa;
}
.ModifyCompanyBtn{
    right:1vw;top:1vh;
}

.mainTableViewAwi>tr>td{
    font-size: 0.7rem;
}
.mainTableViewAwi>tr>th, .mainTableViewAwi>tr>td{
    padding:0.2rem;
}

.tds5{
    background-color:#a63737;
    border-radius: 4px 4px 4px 4px!important;
    padding:0 !important;
}
.tds5>div:first-child{
    background-color: #db7070;
    border-radius:  4px 4px 0 0;
}
.tds4{
    background-color:#37a64c;
    border-radius: 4px 4px 4px 4px!important;
    padding:0 !important;
}
.tds4>div:first-child{
    background-color: #70db85;
    border-radius:  4px 4px 0 0;
}
.tds3{
    background-color:#68a1e5;
    border-radius: 4px 4px 4px 4px!important;
    padding:0 !important;
}
.tds3>div:first-child{
    background-color: #2b72d0;
    border-radius:  4px 4px 0 0;
}
.tds2{
    color:white;
    background-color:#603535;
    border-radius: 4px 4px 4px 4px!important;
    padding:0 !important;
}
.tds2>div:first-child{
    background-color: #664040;
    border-radius:  4px 4px 0 0;
}
.tds1{
    background-color:#666666 ;
}
.tds0{
    background-color:#aaaaaa ;
}
.trHeader{
    width: 70px;
}
.errorConBar{
    color:red;
}
.langimg{
    max-height: 1.2rem
}
.plateimg{
    max-height: 1.4rem
}
 .table-low-padding td, .table-low-padding th{
     padding-top:0.3rem;
     padding-bottom:0.3rem;
 }
@keyframes blinkRed {
    50% { background-color: #dc3545; }
}
.blinkBackgroundRed{ /*or other element you want*/
    animation: blinkRed .5s step-end infinite alternate;
}