/*FONTS*/
@import url('https://fonts.googleapis.com/css?family=Gudea');

 @media print {
     .no-print, .no_print * {
         display:none !important;
    }
     html {
         background-image: none !important;
    }
}

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

div {
    /*vertical-align: top;*/
}

.bg-vetrak-image {
    background: url(/images/bg.jpg) no-repeat top center fixed; 
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
}

.bg-vetrak-solid {
    background-color:#11aa11;
}

.desktop {
    display:none;
}
.mobile {
    display:none;
}

.nav-link i {
    text-align: center;
    width: 1.25em;
}

.bg-success-grad {
    color: white;
    border: none;
    background: linear-gradient(to right, #04c47f 0%,  #0defa4 100%)!important;
}

.bg-warning-grad {
    color: white;
    border: none;
    background: linear-gradient(to right, #ff9d00 0%,  #ffc107 100%)!important;
}

.bg-danger-grad {
    color: white;
    border: none;
    background: linear-gradient(to right, #dc3545 0%,  #fb5d71 100%)!important;
}

.bg-primary-grad {
    color: white;
    border: none;
    background: linear-gradient(to right, #007bff 0%,  #59a9ff 100%)!important;
}

.bg-success-grad .card-footer, .bg-warning-grad .card-footer, .bg-danger-grad .card-footer, .bg-primary-grad .card-footer{
    border-top: 1px solid rgba(255,255,255,.7);
}


/*ANIMATIONS*/
 @-webkit-keyframes swinging{
     0%{
        -webkit-transform: rotate(10deg);
    }
     50%{
        -webkit-transform: rotate(-5deg)
    }
     100%{
        -webkit-transform: rotate(10deg);
    }
}
 @keyframes swinging{
     0%{
        transform: rotate(10deg);
    }
     50%{
        transform: rotate(-5deg)
    }
     100%{
        transform: rotate(10deg);
    }
}
 .swingimage{
     -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
     -webkit-animation: swinging 0.1s ease-in-out forwards 5.25;
     animation: swinging 0.1s ease-in-out forwards 5.25;
}
 @-ms-keyframes slidein{
     0%{
        -ms-transform: translate(0px, 200px);
    }
     100%{
        -ms-transform: translate(0px, 0px);
    }
}
 @-webkit-keyframes slidein{
     0%{
        -webkit-transform: translate(0px, 200px);
    }
     100%{
        -webkit-transform: translate(0px, 0px);
    }
}
 @keyframes slidein{
     0%{
        transform: translate(0px, 200px);
    }
     100%{
        transform: translate(0px, 0px);
    }
}
 @-ms-keyframes slideout{
     0%{
        -ms-transform: translate(0px, 0px);
    }
     100%{
        -ms-transform: translate(0px, 200px);
    }
}
 @-webkit-keyframes slideout{
     0%{
        -webkit-transform: translate(0px, 0px);
    }
     100%{
        -webkit-transform: translate(0px, 200px);
    }
}
 @keyframes slideout{
     0%{
        transform: translate(0px, 0px);
    }
     100%{
        transform: translate(0px, 200px);
    }
}
 .slidein{
     -ms-transform-origin: 100% 0;
     -webkit-transform-origin: 100% 0;
     transform-origin: 100% 0;
     -ms-animation: slidein 0.5s ease-in-out forwards;
     -webkit-animation: slidein 0.5s ease-in-out forwards;
     animation: slidein 0.5s ease-in-out forwards;
}
 .slideout{
     -ms-transform-origin: 100% 0;
     -webkit-transform-origin: 100% 0;
     transform-origin: 100% 0;
     -ms-animation: slideout 0.5s ease-in-out forwards;
     -webkit-animation: slideout 0.5s ease-in-out forwards;
     animation: slideout 0.5s ease-in-out forwards;
}

.fadeIN {
    opacity:1 !important;
    max-height: 300px !important;
    transition: opacity .25s ease, max-height .5s ease;
}

.fadeIN-notify {
    opacity:1 !important;
    max-height: 100vh !important;
    transition: opacity .25s ease, max-height .5s ease;
}

/*BASIC DISLAY*/
 html, body{
     font-family: 'Gudea', sans-serif;
}
 a{
     color:blue;
}
 td {
     white-space: nowrap;
}
 input, label {
     display:block;
}
 li a:hover {
     background-color: #111111;
}

 .container div{
     white-space: nowrap;
}
 .container{
     position:relative;
}
 #interactive_main.viewport {
    position: relative;
     width: 100%;
     margin-top:-300px;
     height: auto;
     overflow: hidden;
     text-align: center;
}
 #interactive_main.viewport > canvas, #interactive_main.viewport > video {
    max-width: 100%;
    width: 100%;
}
 canvas_main.drawing, canvas_main.drawingBuffer {
    position: absolute;
     left: 0;
     top: 0;
}
 .highlight {
     background-color:yellow;
}
 .Cost_txt{
     width:80px;
}
 .clickable-row{
     cursor: pointer;
}

.vetrak_navbar {
    background-color:green;
}

#searchbox {
    width:200px;
    transition: width .5s ease;
}

.bg-carbon {
    background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) !important;
    background-color: #131313 !important;
    background-size: 20px 20px !important;
}

.bg-carbon-fibre {
    background:
    radial-gradient(#111111 15%, transparent 16%) 0 0,
    radial-gradient(#111111 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px !important;
    background-color:#222222 !important;
    background-size:16px 16px !important;
}

.vetrak_bg{
    background:
    linear-gradient(45deg, #bbbbbb 45px, transparent 45px)64px 64px,
    linear-gradient(45deg, #bbbbbb 45px, transparent 45px,transparent 91px, #aaaaaa 91px, #aaaaaa 135px, transparent 135px),
    linear-gradient(-45deg, #bbbbbb 23px, transparent 23px, transparent 68px,#bbbbbb 68px,#bbbbbb 113px,transparent 113px,transparent 158px,#bbbbbb 158px);
    background-color:#aaaaaa;
    background-size: 128px 128px;
}

 .logoutbtn {
     background-color: #4CAF50;
     color: white;
     padding: 16px;
     font-size: 16px;
     border: none;
     cursor: pointer;
}
 .menubtn {
     display:inline;
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     font-size: 16px;
     border: 1px solid black;
     cursor: pointer;
     border-radius:5px;
}
 .menubtn:hover {
     background-color:#3e8e41;
}
 #searchbtn_top {
     cursor:pointer;
}
 .infobtn {
     background-color: #4CAF50;
     color: white;
     border-radius: 10px 0px 0px 10px;
     width:125px;
     padding: 16px;
     font-size: 16px;
     border: none;
     cursor: pointer;
     margin: 5px 0px;
     display: block;
}
 .infobtn_active{
     background-color: #208c24;
     color: white;
     border-radius: 10px 0px 0px 10px;
     width:125px;
     padding: 16px;
     font-size: 16px;
     border: none;
     cursor: pointer;
     margin: 5px 0px;
     display: block;
}
 .infobtn :active{
     background-color: #208c24;
}

/*MODALS*/
 .legacy-modal {
     display: none;
     position: fixed;
     z-index: 1;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.4);
}
 .legacy-modal-content {
     background-color: #fefefe;
     margin: auto;
     padding: 20px;
     border: 1px solid #888;
     box-shadow: 5px 5px 2px 3px rgba(0, 0, 0, .5);
}

/*TOP BAR UI*/
.top_bar {
    background: url(/images/bg.jpg) no-repeat top center fixed; 
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
    text-align: center;
}
.top_bar * {
    display:inline-block;
    vertical-align:middle;
}
.logo_img_container {
  display:inline-block; float: left;
}
.logo_img_container img{
  margin-left:20px;
}
.logo_img {
  display:inline-block; width:200px; height:54px;
    
}
.searchbox_container {
  display:inline-block;
}
.account_container {
  display:inline-block; float:right; padding-right:10px;
}
.account_container * {
  vertical-align:middle;
}

/*NOTIFICATIONS*/

 #accountinfo td{
     border:1px solid black;
     padding:5px;
}

/*DROPDOWN ACTIONS*/
 .dropbtn-tags {
     text-decoration: none;
     background-color: #4CAF50;
     color: white;
     padding: 16px;
     font-size: 16px;
     border: none;
     cursor: pointer;
     border-radius:5px;
     box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .3);
}
 .dropdown {
     display: inline-block;
}
 .dropdown-content-tags_form {
     text-align:center;
     display: none;
     position: absolute;
     background-color: #efefef;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
 .dropdown-search-content {
     text-align:left;
     border:1px solid black;
     display: none;
     position: absolute;
     background-color: #fff;
     width:500px;
     max-width:90%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 3;
}
 .dropdown-search-content .container{
     padding:10px;
     border:1px solid black;
}
 
 .dropdown-notify-content:hover {
     display: block;
}
 .dropdown-notify-content {
     top:30px;
     text-align:left;

     display: none;
     position: absolute;
     background-color: #fff;
     width: 300px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 2;
     border-radius:5px;
     color:black;
     overflow:hidden;
     max-height: 0;
     opacity: 0;
}
 .dropdown-notify-content .container{
     width:100%;
     padding:10px;
     border-bottom:1px solid black;
}

.dropdown-notify-content .container:last-of-type{
    width:100%;
     padding:10px;
     border:none !important;
}

 .dropdown-notify-content .active:hover{
     background-color:lightgreen;
}
 .dropdown-content-tags_form a {
     color: black;
     padding:15px;
     text-decoration: none;
     display: block;
}
 .dropdown-t1 {
     color: black;
     text-decoration: none;
     display: block;
}
 .dropdown-content a:hover {
     background-color: #b1f1b1;
     transition: background-color 0.25s ease;
}
 .dropdown-content-tags_form a:hover {
    background-color: #8dd18a;
}
 .dropdown-t1:hover {
    background-color: #f1f1f1;
}
 .dropdown:hover .dropdown-content {
     display: block;
}
 .dropdown-t1:hover .dropdown-content-t1 {
     display: block;
}
 .dropdown:hover .dropdown-content {
     display: block;
}
 .dropdown:hover .dropdown-content-tags_form {
     display: block;
}
 .dropdown-content div:hover .dropdown-content-t1 {
     display: block;
}
 .dropdown:hover .dropbtn {
     background-color: #3e8e41;
}

/*FOOTER*/
.footer_container {
    position: absolute;
    bottom:0;
    left:0;
    display:inline-flex;
    background-color:rgba(0,0,0,.5);
    border-top:1px solid white;
    border-bottom:1px solid black;
    width:100%;
    justify-content: space-between;
    color:white;
}
.footer_container *{
    padding:20px;