:root{ --headerheight : 60px; --headerspace : 60px; --footerheight : 50px; --footerspace : 50px; --emptyfooterheight : 0rem; --usedfooterheight : 50px; --canvasheight : calc(100dvh - var(--footerspace) - var(--headerspace)); --innercanvas : calc(100dvh - var(--footerspace) - var(--headerspace)); --vehiclelist : calc(100dvh - var(--footerspace) - var(--headerspace) - 5rem); --carddashboard : calc(100dvh - var(--footerspace) - var(--headerspace) - 2rem); --lp_back : var(--yellow); --lp_letter : #000; --fa-primary-opacity : 0.8; --fa-secondary-opacity : 0.5; --webkit-focus-ring-color:transparent; --fa-font-regular : "Font Awesome 6 Pro"; --vehicleDetailsWidth : 500px; --vehicleListWidth : 350px; --page-flow :row-reverse; } /* CANVAS DEFINITIONS */ header {display:block!important;} body {overflow-x:hidden;overflow-y:hidden;scroll-behavior: smooth; direction: ltr;background-color: var(--body);accent-color: var(--primary);} .bg-light {background-color: var(--white);} header {height : var(--headerspace);} footer {height : var(--footerheight);} .main-row {display: flex;flex-flow: var(--page-flow);margin-right: -15px;margin-left: -15px;} .notification_button {position: absolute;bottom: 1rem;padding-left: 1px;overflow: hidden;transition: width 0.5s, padding-left 0s 0.5s;display: flex;flex-direction:row;} .notification_button .but {padding:0.5rem 1rem;height:40px;width:40px;background-color:orange;color: white; border-top-left-radius: var(--rounding); border-bottom-left-radius: var(--rounding);} .notification_button.active {width: 100%; min-height:40px;max-height:500px;transition: width 0.5s, padding-left 0.5s; } .notification_button:active > .content {min-height: 40px;border: 1px solid #ddd;border-bottom-left-radius: var(--rounding-xl);box-shadow: var(--cardshadow);} .notification_button_index {position: absolute;top:calc(var(--headerheight) + 5px);right:01rem;width:40px;height:40px;padding-left: 0px;overflow: hidden;transition: width 0.5s, padding-left 0s 0.5s;display: flex;flex-direction:row;} .notification_button_index .but {padding:0.5rem 1rem;height:40px;width:40px;background-color:orange;color: white; border-top-left-radius: var(--rounding); border-bottom-left-radius: var(--rounding);} .notification_button_index:active {width: 100%; min-height:40px;height:500px;transition: width 0.5s, padding-left 0.5s; } .notification_button_index:active > .content {z-index: 11000;min-height: 40px;border: 1px solid #ddd;border-bottom-left-radius: var(--rounding-xl);box-shadow: var(--cardshadow);} .fixed-top {top: 0px;right: 0px; left: 0px;} nav.navbar {height:var(--headerheight);border-radius:0rem;border-bottom:0px solid #ddd;padding:0 0;} .navbar-brand {font-size: 190%;margin: 0;font-weight:900;} /*.navbar-expand-lg.navbar-collapse {height: var(--headerheight);} .navbar-nav {height: var(--headerheight);}*/ ul.navbar-nav.ml-auto.group-selector {padding-left: 1.5rem;} ul.navbar-nav.profile {padding-right: 1.5rem;} .navbar-light .navbar-nav .nav-link {color: inherit; border-bottom:3px solid transparent!important;margin: 0 .25rem;} .navbar-light .navbar-nav .nav-link:focus, nav .navbar-nav .nav-link:hover {border-bottom :3px solid var(--secondary);} nav .navbar-nav .nav-item .nav-link.active {border-bottom: 3px solid var(--secondary)!important; font-weight: 700;border-left:0px;} .nav .nav-item-divider {height: 0;margin: .5rem 0;overflow: hidden;border-top: 1px solid var(--cardbordercolor);} .nav-item.last {margin-right :1rem;} .navbar-light {background-color: var(--body);} .navbar-primary {background-color: var(--primary);} .navbar-secondary {background-color: var(--secondary);} .navbar-dark {background-color: var(--dark);} .dropdown-toggle::after {border: solid transparent;border-width: 0 2px 2px 0;display: inline-block;padding: 3px;transition: transform .2s, margin .2s;transform: rotate(45deg);margin: -3px 6px 0 6px;} .btn {font-size:inherit;} .container-fluid {padding-left:0px;padding-right:0px} .container-xxl {max-width: 1900px; margin: auto;} .map-pagina {overflow-y: hidden; overflow-x:hidden;background-color: var(--cardback) ; } .adminpad {width:100%; height:100%;overflow-y:auto;;overflow-x:hidden; padding-right:1rem;} .footer {bottom: 0;line-height:var(--footerheight) ;overflow-y:hidden; margin: 0px;border-radius: 0rem;position:sticky;} #showfeatures {background-color: var(--body); overflow-y: auto;max-height: calc(var(--vehiclelist) - 3rem);min-height: calc(var(--vehiclelist) - 3rem);padding:1rem} .featurecard {min-height:450px;max-height:550px; overflow-y: hidden;} .featurecontent {height: 150px;overflow-y: auto;} .featurefooter {height:150px;} #collapseMapFilter {margin-top:1rem;border-radius: var(--rounding);} .shift-left {left: -9px;} .shift-right {right: -9px;} .breadcrumb {color : inherit;} .breadcrumb-item a:hover {text-decoration: underline;} .map-vehiclelist {height: var(--innercanvas);z-index: 150 ; overflow-y: hidden; transition: all 0.1s linear;max-width:var(--vehicleListWidth );padding:0;} .map-vehicledetails {height: var(--innercanvas);z-index: 5; overflow-y: auto; transition: all 0.8s linear;max-width:var(--vehicleDetailsWidth ); } .leftmenu-sticky {position: sticky; padding-top: .5rem; overflow-x: hidden; overflow-y: auto; min-width:270px; background-color: var(--body);} .leftmenu-sticky a.nav-link {color: var(--dark);} .leftmenu-sticky a.nav-link.active {background-color: var(--cardback);color:var(--normaltext);border-color:var(--secondary);font-weight: 500} #sidebar a.nav-link.active {background-color: var(--body)!important;color:var(--normaltext);border-color:var(--secondary);font-weight: 500;} .leftmenu {position:relative; padding-top: .5rem; overflow-x: hidden; overflow-y: auto; min-width:270px; border-radius: var(--rounding); background-color: var(--body); } .leftmenu a.nav-link {color: var(--white);} .section {position: relative;padding-top: 0rem; padding-bottom: 0rem;} .left {float: left; width:310px;height: 99%;padding: 5px;overflow-y: noscroll} .pad {float: left; width:100%; position:relative;border: 0px solid var(--secondaryborder);height: var(--innercanvas);padding:0px .5rem; } .demopad {float: left; width:100%; height: calc(100vh - 50px);position:relative;border: 0px solid #3C8BDC } .IndexPad {float: left; width:100%; height: calc(100vh - 240px);position:relative;border: 0px solid #3C8BDC } .dpad {float: left; width:100%; height: 370px;position:relative;border: 0px solid #3C8BDC;max-height:230px; } .dlpad {float: left; width:100%; height: calc(70vh - 125px);position:relative;border: 0px solid #3C8BDC } .dgpad {float: left; width:100%; height: calc(30vh);position:relative;} #GraphDelayedVehicles {width:100%;} .reportpad {float: left; width:100%; height: calc(var(--vehiclelist) - 2rem) ; position:relative; } .alertpad {float: left; width:100%; height: calc(100vh - 190px);position:relative;border: 0px solid lightgray;min-height:700px; } .advisepad {float: left; width:100%; height: calc(40vh);position:relative;border: 0px solid lightgray; } #map {float: left; width:100%; height: 100%;z-index:5;} #demo {position:absolute; top:5px; right:5px; background-color:rgba(255,255,255,0.4); width:200px; height:600px; z-index: 100;} #FleetTripTable {min-height:80px} #ShowDetails {overflow-y: hidden;} #VehicleFilter {text-align: left !important;padding: .75rem;background-color:var(--secondaryborder);border-radius:var(--rounding);} .AdminList {height: calc(var(--canvasheight) - 2rem);z-index: 2;overflow-y:hidden;overflow-x:hidden;/*background-color: var(--cardbordercolor); padding-left: 1rem;*/} .VehicleFilter {height: 50px;} .dt-right {text-align:right;} .dt-left {text-align:left;} .dt-center {text-align:center;} .DriveTimeList {max-height: calc(var(--vehiclelist) - 110px);z-index: 2;overflow-y:auto;overflow-x:hidden;} .shadow-0 {box-shadow: none;} section {display: block; overflow-y: auto; overflow-x: hidden;} #VehicleInfoD {line-height:16px;overflow-y:auto;overflow-x:hidden;} .vehicleDetailsCard {overflow-y: hidden; overflow-x: hidden; background-color: var(--secondaryborder); border-width: var(--cardborder) var(--cardborder) var(--cardborder) 0;} .vehicleListCard {overflow-y: hidden; overflow-x: hidden; } .vehicleListCard .card-body {overflow-y: hidden;overflow-x: hidden;padding:.5rem;padding-top:0px } .VehicleList {overflow-y: auto; overflow-x: hidden; height: calc(var(--innercanvas) - 5rem);} .mono {font-family: var(--font-family-monospace);font-size : 0.7rem} .vehicleDetailsCard > .card-title {min-height: 100px;border-radius:0px;} .vehicleDetailsCard > .tab-content {overflow-y: auto;overflow-x: hidden;height: calc(var(--vehiclelist) - (100px - var(--footerheight))); margin:0px; padding: 0px;background: var(--secondaryborder);} .vehiclegroup {margin: 0px;margin-top:-8px; padding-left:.5rem;border-left: 2px solid var(--secondaryfill);} .vehiclegroup > .VehicleListing {margin-right:5px;background-color:var(--body);} .vehiclegroup-title {border-left: 2px solid var(--secondaryfill);background-color: var(--body);} .VehicleListing {padding:.5rem;margin:.5rem 0 0 0;background-color:var(--body);line-height:1.2rem;border-left:4px solid transparent; border-radius: var(--rounding);} .TripListing:hover, .TripListing:hover a, .TripListingActive:hover, .VehicleListing.active:hover, .VehicleListing:hover a, .VehicleListing:hover {color: var(--light);background-color: var(--primary);} .VehicleListing.alert-danger:hover {color: var(--danger)!important;background-color: var(--primary);border-radius: var(--rounding);box-shadow:2px 2px 5px var(--danger);} .VehicleListing:hover .fa-light {font-weight: 700;} .VehicleListingHR {height:1px;border-bottom :1px solid var(--gray);} .VehicleListing.active {margin-left: 0;background-color: var(--secondaryborder);border-left:4px solid transparent;color:var(--light);} .VehicleListInfo {font-weight: 400;} .VehicleListName {font-weight: 700;} .footerMobile {bottom: 0;width: 100%;height: 70px;line-height: 34px;overflow-y:hidden;} #TermsAndConditionsText {height: calc(70vh);line-height:16px;overflow-y:auto;overflow-x:hidden;padding:10px;} #VehicleInfoTrip {height: calc(100vh - 420px); min-height:500px; line-height:16px; overflow-y:hidden; overflow-x:hidden; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; border-radius: var(--rounding);} #TripInfo {max-height: calc(100vh - 470px); overflow-y: auto;} .no-flow {overflow-x: hidden;overflow-y: hidden;} .flow-clip {overflow-x: clip;overflow-y: clip;height:1rem;} .v-clip {overflow-x: clip;overflow-y: auto;} .v-clip {overflow-x: clip;overflow-y: auto;} a:hover {text-decoration: none;} .VehicleDetailsTable {height: calc(80vh - 175px);line-height:14px;overflow-y: auto;overflow-x: hidden;min-height: 200px;/* padding:10px; */} img.rounded {max-width:100px!important; max-height:100px!important;} #VMList {height: calc(100vh - 250px); line-height:14px; overflow-y: auto; overflow-x: hidden; min-height: 200px; padding:10px;} #VehicleAlertDetails, #VehicleAlert {height: calc(100vh - 450px); line-height:12px; overflow-y: auto; overflow-x: hidden; min-height: 400px; padding:10px;} .AlertMap {height: calc( var(--vehiclelist) - var(--headerspace) - 1rem ); line-height:12px; overflow-y: hidden; overflow-x: hidden; min-height: 200px; padding:10px; width:100%;} .GeoFenceMap {height: calc( var(--vehiclelist) - var(--headerspace) - 14rem ); line-height:12px; overflow-y: hidden; overflow-x: hidden; min-height: 200px; padding:10px; width:100%; box-shadow: 0px 3px 5px #ddd; z-index: 10;} .VTMap {height: calc(30vh); line-height:12px; overflow-y: hidden; overflow-x: hidden; min-height: 200px; padding:10px; font-size:13px;} #AdviseData,#AlertHistory {overflow-y: auto; overflow-x: hidden; padding:10px; font-size:13px;} #AdviseData .card.warning .card-body {border-left:5px solid var(--warning);background-color: var(--primaryborder);} #AdviseData .card.danger .card-body {border-left:5px solid var(--danger);background-color: var(--primaryborder);} #VehicleAlertTable {overflow-y: hidden;} #popup {width:130%;} #popup td {padding-right:5px;} #UpdateMap {font-weight:700; float:right;display:block; border-radius: var(--rounding); width:160px; height: 24px; padding: 0px 12px;} #info {font-size:14px;} #navbar-group-selector {cursor:auto;/*min-width: 300px;*/} .tooltip {position: relative;display: inline-block;opacity:1;} .tooltip .tooltiptext {visibility: hidden; width: 200px;background-color: #fff;box-shadow: 1px 1px 4px #444;color: inherit;text-align: left;position: absolute; z-index: 1;font-size:95%;top:20px; margin-left: -100px;padding:10px} .tooltip:hover .tooltiptext {visibility: visible;} .tooltipcard {min-width: 250px;} .payoff {text-transform: uppercase;font-weight: 500;color:var(--color_on_primary);} .info-box-content {padding: 10px 10px; margin-left: 60px;} .VehicleList , .VehicleList:link, .VehicleList:visited {line-height:18px; width:100%; overflow-y: scroll; text-decoration:none;} .VehicleListDInfo {font-size:75%; color:#666; font-weight: 400;} .TripList , .TripList:link, .TripList:visited, .TripList:hover {font-size:14px; line-height:16px; width:100%; overflow-y: scroll; text-decoration:none;} .TripHeader {font-size:18px; line-height:16px; width:100%; overflow-y: scroll; text-decoration:none;} .TripDHeader {font-size:14px; line-height:18px; width:100%; overflow-y: scroll; text-decoration:none;} .DealerInfo {line-height:1.2rem;padding-right: 5px; padding-bottom:3px;} .media {padding:16px;margin:12px 0;overflow:hidden;margin-top:0;} .media-item {padding-top:.5rem;} .img-thumbnail {padding: 0rem; background-color: transparent; border: 0px solid #dee2e6;border: 1px solid #ddd; max-width: 60px; height:60px;} .img_usercard {background-color:transparent; border-radius:50%;height:80px;} .MapInfo {font-size:16px; width:100%; color: #222;} .MapInfo tr {border-bottom: 1px dotted #eee; line-height:16px; font-size:12px; width:100%; word-wrap: break-word; display:inline-block;} .MapInfoTD1 {line-height:22px; font-size:12px; width:130px;} .MapInfoTD2 {line-height:22px; font-size:12px; text-overflow:ellipsis;} .mapleftcolumn {margin-left: 0px; padding-left: 0px;} .maprightcolumn {margin-right: 0px; padding-right: 0px;} .VehicleListIcon, .VehicleListIcon:hover {width:50px; padding-right:.5rem; text-decoration:none;} .badge-counter {position: relative; transform-origin: top right; margin-left: -.5rem!important; top: -0.5rem!important;} .alert-badge:hover {background-color: var(--primaryborder);} .alert-badge {border: var(--cardborder) solid transparent;background-color: var(--body);box-shadow:var(--cardshadow)!important;padding :.25rem .5rem; border-radius: var(--rounding);color:inherit;line-height:1.5} .alert-badge.dashboard {min-width:140px; max-width:400px;} .dashboard .stat-change {display: none;} .dashboard:hover .stat-change {font-weight: 500; padding-right: .5rem; vertical-align: middle;display: block;} #myChartCanvas {height:180px!important; width: 100%;} .statsbadge {border: 0px solid var(--cardbordercolor)!important;font-size: var(--defaultfontsize)!important;font-weight: 700;padding : 0.25rem .5rem;background-color: var(--body);border-radius: var(--rounding);} .servicebadge {font-size: 90%;font-weight: 400;margin: 0 0.25rem 0.5rem 0;padding: .15rem 0.35rem;background-color: var(--body);text-transform: uppercase;border-radius: var(--rounding);} .tirebadge {font-size: 90%;font-weight: 400;margin: 0 0.25rem 0.25rem 0;padding: .15rem 0.35rem;height:1.5rem;background-color:var(--primary);text-transform: lowercase;border-radius: 25%;color:var(--white)} .axlebadge {font-size: 90%;font-weight: 400;margin: 0 0.25rem 0.25rem 0;padding: .15rem 0.35rem;background-color: var(--gray);text-transform: lowercase;border-radius: 25%;padding: 0 5px; align-content:center;z-index:40;} .axelLine {background-color: var(--body);border-radius: var(--rounding-xl);border: 1px dashed var(--primaryfill);} .axelLine:after {content: '';position: absolute;top: 50%;border-top: 2px dashed var(--primaryfill);width: 100%;transform: translateY(-50%);z-index:20;} .axelColumn {max-width:5rem;} .axelColumnEmpty {clip-path: polygon(0 40%, 0 0, 100% 0, 100% 100%, 0 100%, 0 60%, 100% 60%, 100% 40%);background-color: var(--cardback);margin-top: -4px; margin-bottom: 0px; margin-left: 25px;} .front {transform: rotate(-90deg);} .tpmscard {max-width: 420px;min-width: 370px;margin:0 1rem;} .emptybadge {content: " ";border-right: 2px dashed var(--primaryfill);margin: 0 0.25rem 0.25rem 0;;padding: .15rem 0.35rem;height:1.5rem;} .tabpanel_vehicledetails {overflow-y: auto;overflow-x: hidden;padding:1rem} .MI_HeaderIcon {float:left; padding-right: 10px; width:40px;} .MI_HeaderText {float:left; padding-top: 15px; vertical-align:bottom; font-size:16px;} .MI_Header {border-bottom: 1px solid #999; width:100%; float:left;} .VI_TL, .VI_TL:hover {color:black; cursor:pointer; width:30px; text-decoration:none; font-weight:bold;} .Underbar {display:block; } .btn {border-radius: var(--rounding);} .ml {left:-0.4rem;} #text {color : #000;} select {height: var(--line-height); padding: 0px 6px;border-radius: 0px; } .dropdown-item-selected {font-weight:900;background-color: var(--body);} .dropdown-item:disabled {text-transform: lowercase;font-style: italic;} .ToolTip_DL {line-height:24px; color: #444; font-size:100%; padding-right: 5px;} .tooltipicon {width:30px;text-align: left;vertical-align: center;} #TestDR {width:400px; margin:50px;} #driverlist {width:400px; margin:50px; height:200px;} #sticker {margin: 40px; height: 100px; background-color: #eee; position: relative; overflow: hidden; padding:10px;} #sticker div {position: absolute; width: 20px; height: 20px; border-radius: 100%; background-color: #FFF;} .notification-area {display: table-cell; vertical-align: top; overflow-y: auto; overflow-x: hidden; } #outPopUp {position: absolute; width: 90%; max-width:500px; z-index: 15; top: 5%; left: 5%; margin: 0px 0 0 0px; background: #efefef; opacity:0.9; border-radius :var(--rounding); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05); float:left;} .form-signin-heading {padding : 10px; text-align:center; font-weight:bold;} #tableVehicles {overflow-y: hidden; } .tab-content {margin-top:2px} .normalFont {font-size:100%;} .rFMSGraph {height: 160px;padding:0px;margin:0px;text-align:center;vertical-align:center;} .MonitorGraph {height: 80px; text-align:center;vertical-align:center;} .rFMSTripGraph {height: 200px; padding:0px;margin:0px;text-align:center;vertical-align:center;} .rFMSDriverGraph {height: 160px; padding:0px;text-align:center;vertical-align:center;margin-top:1rem;} .rFMSTripGraph2 {height: 210px; max-height: 500px; padding:0px;margin:0px;text-align:center;vertical-align:center;} .rFMSTripGraph3 {height: 230px; max-height: 500px; padding:0px;margin:0px;text-align:center;vertical-align:center;} .FleetGraph {height: 230px;padding:0px;margin:0px;text-align:center;vertical-align:center;} .FleetGraph2 {height: 260px;padding:0px;margin:0px;text-align:center;vertical-align:center;} .DashGraph {height: 120px;padding:0px;margin:0px;text-align:center;vertical-align:center;opacity:0.6;} #DriveTimeGraph {min-height: 200px;line-height:16px;overflow-y:auto;overflow-x:hidden;padding:10px;} .drivetimecicrle {color:var(--body);} .moveup {margin-top: -40px;} .apigraphdiv {max-width:450px;min-width:250px;} .apigraph {border:1px solid var(--primaryborder);} .apigraph:hover {background-color:var(--body);} .api-active {box-shadow: 1px 1px 10px var(--primaryborder);margin : -2px 0 4px 0;} .admincard {background-color:var(--primaryborder);margin-bottom:30px;border: 2px solid transparent;height:90px;} .admincard:hover {border: 2px solid var(--primaryborder);} .admincard-body {overflow-y:auto;max-height:calc(50vh);overflow-x:hidden;} .rFMSStats {min-height:100px; width: 100%;padding:5px;text-align:center;} .rFMSTitle {height:40px;width:100%;padding:5px;text-align:center;font-size:200%;font-weight:bold;} .AlertLine {padding:10px 15px 20px 10px; border-bottom: 1px solid #eee;} .AdviseHeader {padding:10px 10px 10px 5px; border-bottom: 1px solid #666; font-size:150%; width: 100%; display: table; } .AdviseBox {/* height:300px; */ margin-right:3px; margin-left:3px;} .AdviseText {padding:5px;line-height:14px; overflow-y:auto; overflow-x:hidden; min-height: 10px;} .StatusLineHeader {margin:0 0 10px 0;border-bottom: 1px solid #ddd;width:100%;padding-top:10px;} .StatusValue {font-weight: 400;} .StatusValueFake {font-weight: bold; color:#999; font-style: italic;} .StatusMessage {padding-top:20px;} .wrapper {width:100%;} .pagina-mobile {background-color:transparent;border-radius:0px; box-shadow:0px 0px 0px #ddd; margin:0px; height: calc(100vh - 200px);overflow-y:auto;overflow-x:hidden} .pc-card {height:100%;} .pdc-pagina {overflow-y:auto;overflow-x: hidden;background-color:var(--cardbordercolor); } .pdccatcard-success {border-left: 3px solid var(--success);border-radius:0px; text-transform: uppercase;} .pdccatcard-damage {border-left: 3px solid var(--danger);border-radius:0px; text-transform: uppercase;} .pdc-card-pagina {overflow-y: auto;overflow-x: hidden; margin-right: 15px;margin-left: 15px;height: var(--innercanvas);width:100%} .pdc-check-pagina {overflow-y: auto;overflow-x: hidden;margin-right: 0px;margin-left: 0px;max-height:calc(100vh - 305px)} .border-category {border: 1px solid var(--secondaryborder)!important;background-color: var(--secondaryborder);text-transform: uppercase;} .border-subcategory {border: 1px solid var(--secondaryborder);border-bottom: 1px solid var(--secondary)} .pdc-small-line {line-height:10px;} .inner-report {overflow-y: auto;overflow-x: hidden;margin-right: -15px;margin-left: -15px;height: calc(100vh - 400px);} #TripGraph {display: block; width: 1630px; height: 255px;} #TripTable {min-height:50px;overflow-y: hidden;} .leaflet-div-icon {background:red; border:5px solid rgba(255,255,255,0.5); color:blue; font-weight:bold; text-align:center; border-radius:50%; line-height:30px;} #alertData {text-align: left;} .VehicleListInfo {font-weight: 400;} .VehicleListName {font-weight: 700;} .small {font-size:85%;letter-spacing: 0px;} .normal {font-size:100%;letter-spacing: 0px;font-weight: 400;} .large {font-size:150%;} .tiny {font-size: 75%;} .XL-larger {font-size:300%;} .collapsing {transition: none!important;} .aboutlogo {width:200px;margin:auto;height:100px!important} .VehicleDetailsIconArea {width:4rem;} .border-title {position: absolute;z-index: 15; margin-top: -25px; margin-left: 0rem; padding: .125rem;} .border-subtitle {position: absolute;z-index: 15;margin-top: -1.5rem;margin-left: 2rem; padding: .5rem;} .rotate-icon {-webkit-transform: rotate(180deg); transform: rotate(180deg);} .ck.ck-editor__main>.ck-editor__editable {background: transparent;border-radius: 0;} .select_old {color:#aaa; font-weight:400; /* font-style: italic; */} .searchResetBtn {margin-left:-20px;} .SearchFilter {width:100%;line-height: 1.5rem} .SearchIcon {width:36px;vertical-align:middle;} /*sidebar settings map.php*/ #VehicleSearch {height:320px;} .btn:focus, btn:active, .btn:not(:disabled):not(.disabled):active:focus {box-shadow: 0 0 0;} .btn-circle {border-radius: 100%; width: 40px; height: 40px; padding: 10px;} .btn-circle.btn-lg {width: 50px; height: 50px; padding: 14px 15px;} .chat-list li .chat-img img {width: 45px; border-radius: 100%;} .notify .heartbit {position: absolute; top: -20px; right: -4px; height: 25px; width: 25px; z-index: 10; border: 5px solid #fc4b6c; border-radius: 70px; -moz-animation-iteration-count: infinite; -animation: heartbit 1s ease-out; -o-animation-iteration-count: infinite; -animation: heartbit 1s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} /* Spinner settings */ .loader {width: 8px;height: 26px;display: inline-block; position: relative; border-radius: 4px; color: #FFF; box-sizing: border-box; animation: animloader 0.6s linear infinite; } @keyframes animloader { 0% { box-shadow: 20px -10px, 40px 10px, 60px 0px;} 25% { box-shadow: 20px 0px, 40px 0px, 60px 10px;} 50% { box-shadow: 20px 10px, 40px -10px, 60px 0px;} 75% { box-shadow: 20px 0px, 40px 0px, 60px -10px;} 100% {box-shadow: 20px -10px, 40px 10px, 60px 0px;} } .maploader {font-size: 48px;font-weight: 600;display: inline-block;letter-spacing: 2px;font-family: Arial, Helvetica, sans-serif;color: #FFF;box-sizing: border-box;animation: spotlight 2s linear infinite alternate; } @keyframes spotlight {0% , 20% { opacity: 1; letter-spacing: 2px; } 80% , 100% { opacity: 0; letter-spacing: 32px; } } .containerDemo {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;} /* Form variables *******************************/ .form-control-ro {padding:.5rem;border-radius: var(--rounding);height: 2rem;font-weight:700;background-color: var(--body); } .form-control {font-weight:500;font-size:inherit;transition: all 0.2s ease-out;background-color: var(--body);color:var(--primary)} .form-control:focus + label {color: var(--normaltext);top: .25rem;left: 1rem;font-size:90%;} .form-control + label {position: absolute;top: 1.75rem;left: 1.75rem;font-size: 90%;font-weight: 400;color: var(--primary); transition: all 0.2s ease-out;} .form-control.has-value + label {position: absolute;top: 0.25rem;left: 1rem;font-size: 90%;font-weight: 500;color: #bbbec0; transition: all 0.2s ease-out;border-radius: 0;} .login {padding:2.5rem 1rem 1rem;background-color: transparent !important;border-bottom: 1px solid #ddd;border-radius: 0px;outline: 0;} .custom-control-label {color: var(--primary);} .form-control:focus {outline: none;border-width:0px;background-color:var(--primaryborder);box-shadow: none;color:inherit;} .form-group {margin-bottom: 0.5rem;} .input-group-addon {position: absolute;right: 0px;z-index: 10;padding: 0.375rem 0.75rem;} .form-control.input-group.date {border-radius: var(--rounding);} .form-control:disabled, .form-control:disabled:focus, .form-control[readonly], .form-control[readonly]:focus {opacity: 1;border-radius: var(--rounding);cursor: default;background-color: var(--body);color:var(--normaltext);font-weight: 500;} .form-control:focus #filtername {border-top-right-radius: 0!important;border-bottom-right-radius: 0!important;} .login:focus {padding-bottom:1rem;padding-top:2.5rem;border-bottom:2px solid var(--primary)} .loginbox .logo-image {float: right;} .btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active {box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%); } .progressTC {width: 100%; height: 16px;} a.text-primary:focus, a.text-primary:hover {color:inherit!important;} /* Sidebar Clickable */ .sidebar {height: calc(100vh - 120px);width: 0; position: fixed;z-index: 2000; top: 60px; left: 10px; overflow-x: hidden; overflow-y: auto; transition: 0.5s; box-shadow: 2px 2px 15px #888;} .sidebar a {padding: 0px ;display: block; transition: 0.3s;} .close {position: absolute;right: 1rem;top:1rem; margin-left: 50px;padding:5px; font-weight: 900;color:var(--secondary); text-shadow: 0;font-size:150%} .openbtn {cursor: pointer;;border: none;} .openbtn:hover {background-color: transparent;} #main {transition: margin-right .5s;} #TripDetailsGraph {max-height:200px;} /* VehicleDetails Sidebar Clickable */ .VDsidebar {width: 0; position: absolute; z-index: 500;top: 0px;right: 0; overflow-x: hidden; transition: 0.5s;;} .VDsidebar a {padding: 0px ;display: block; transition: 0.3s;} .VDsidebar .closebtn {position: absolute;top: 20px;right: 10px; margin-left: 50px;font-size:36px; font-weight: 900;} /* PDCDetails Sidebar Clickable */ .pdcdetsidebar {/* width: 0; position: absolute; */ z-index: 500;top:0px;right: 0; overflow-y: hidden;overflow-x: hidden; transition: 0.15s;height:100%} /*.pdcdetsidebar a {padding: 0px ;display: block; transition: 0.15s;}*/ .pdcdetsidebar .closebtn {position: relative;margin-left: 15px;font-weight: 900;font-size: 20px;} .btn-round {border-radius:50%;width:36px;height:36px;border:1px solid transparent;} button:focus { /* outline: 1px dotted; */ outline: 0px auto -webkit-focus-ring-color; } [data-toggle="collapse"][aria-expanded="true"] .fa:after {content: "\f068";font-weight:500;} [data-toggle="collapse"][aria-expanded="false"] .collapsed .fa:after {content: "\2b";font-weight:500;} .card-title.import {min-height: 60px;} .card-title {margin :0;letter-spacing: 0px;padding:1rem;border-bottom:var(--cardborder)solid var(--cardbordercolor);text-transform:uppercase;font-weight:700;line-height: var(--line-height); padding-top:1rem} .card.boxed .card-title {text-transform: uppercase;font-weight: 700;line-height: var(--line-height);margin-top: -0.6rem;margin-left: 1rem;background-color: var(--cardback);display: initial;padding: 0 0.25rem;width: fit-content;} .map-vehicledetails .card.boxed .card-title {background-color: var(--cardback);display: initial;margin :0;letter-spacing: 0px;padding:0 1rem;width: fit-content;padding-top:1rem} .card.boxed {border: 1px solid var(--body);} input[type=radio] + label {color: #ccc; font-style: italic;} input[type=radio]:checked + label {color: #f00; font-style: bold; background-color:#F60;} .useronline {border: 3px solid var(--success); } .contact {min-width:300px;max-width:400px;background-color:var(--body) ;} .mini-card {font-size: 95%;min-height: 5rem;} .mini-card-body {font-size: 95%;min-height: 5rem;max-height: 240px;overflow-y: auto;} .page-title {display: inline-block; color:var(--cardtitle); font-size: 110%;font-weight:700; line-height: var(--lineheight); white-space: nowrap;margin-bottom: var(--defaultfontsize); text-transform: uppercase;} .page-title .breadcrumb {color:var(--success); } .card-title.page-title {height: 60px;} .sticky {position: -webkit-sticky;position: sticky;} .nameBadge {font-size: 1rem;font-weight:700;padding:.6rem;border-radius: 50%;width:calc(var(--lineheight) - 5px);height:calc(var(--lineheight) - 5px);} .logo-image {background-image: var(--logoimg);min-width:80px;height: 40px;background-position: center;background-repeat: no-repeat;background-size: contain; position: relative; background-position: left;} .logo-image-xl {background-image: var(--logoimg);min-width:80px;height: 120px;background-position: center;background-repeat: no-repeat;background-size: contain; position: relative; background-position: left;} .logo-about {background-image: var(--logocredit);min-width:120px;height: 120px;background-position: center;background-repeat: no-repeat;background-size: contain; position: relative;} .logo-footer {background-image: var(--logocredit);min-width:40px;height: 40px;background-position: center;background-repeat: no-repeat;background-size: contain; position: relative;} .gray {color:var(--gray);} .DashTileMap {height:var(--carddashboard);border-radius:var(--rounding-xl); box-shadow: var(--cardshadow);} .groupmap {border-radius: inherit;border-top-left-radius: 0; border-top-right-radius: 0;} .fleetmap {border-radius: inherit;} .DashTileCards {max-height:var(--carddashboard);;overflow-y: auto;overflow-x: hidden;min-height: 80px;border-radius:var(--rounding-xl); box-shadow: var(--cardshadow)} .DashTile {position: relative;z-index: 10; height:0rem;margin-top:-1px} .DashBadge {padding:0 1rem; display: flex;flex-direction: row;flex-wrap: no-wrap;justify-content: space-evenly; position: relative; top: 0.5rem;} .DashBadge .badge {margin:1rem 0.5rem;border-radius: var(--rounding-xl);color:var(--white);background-color: var(--secondary);height:3.5rem; box-shadow:var(--cardshadow); display: flex; flex-direction: column;font-size:150%!important;} .badge.drive {background-color:var(--drive)} .badge.work {background-color:var(--work);} .badge.rest {background-color:var(--rest);} .badge.workshop {background-color:var(--workshop);} .badge.today {background-color:var(--today);} .pointer {cursor:pointer;} .VehicleLicensePlate {padding:.3rem;background-color: var(--lp_back);color:var(--lp_letter)!important;font-weight: bold;border-left: 5px solid var(--blue);border-radius: .25rem;} .badge-light {color: var(--dark);background-color: var(--light);line-height:var(1rem);} .badge-pill {height:2rem;} .badge-pill:hover {background-color: var(--primary);color:var(--light);} .profile-card-2 .profile {border-radius: var(--rounding);position: absolute; top: 1rem; left: 80px; max-width: 100px; border: 3px solid rgba(255, 255, 255, 1); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%);box-shadow:3px 3px 15px #aaa;} .profile-card-2 .card-header{height:100px;} .profile-card-2 .card-body {margin-top:2rem;} /* Datatable row styling */ /* datatables */ table.dataTable.display tr.active td:first-child {border-left : 5px solid var(--primary);border-radius:0px; } table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > * {background-color: var(--body)} table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {background-color: transparent;} .dt-buttons.btn-group {float:right;} div.dataTables_wrapper div.dataTables_filter {text-align: right; float: left; margin-right: 10px;} div.dataTables_wrapper div.dataTables_paginate {float: right;} div.dataTables_wrapper div.dataTables_info {float: left;} .dataTables_wrapper .dataTables_filter input {border: 0px solid #aaa;border-radius: var(--rounding);background-color: var(--primaryborder);} table.dataTable {clear: both; max-width: none !important; border-collapse: separate !important;line-height:var(--table-line-height) ;} table.dataTable.display tbody tr, table.dataTable.stripe tbody tr {background-color: transparent;border-radius: var(--rounding);line-height: var(--table-line-height);} table.dataTable.stripe tbody tr:hover, table.dataTable.display tbody tr:hover {background-color: var(--primaryborder);border-radius: var(--rounding);} table.dataTable.display tbody tr a {color : inherit;} .button-cell {color : transparent} tr:hover .button-cell {color : var(--light);} table.dataTable.display {min-height:40px;border-spacing: 0px 5px;} table.dataTable.mapitem {min-height:10px;border-spacing: 0px 5px;} table.dataTable.mapitem tbody tr {background-color: transparent;border-radius: var(--rounding);line-height: calc(var(--table-line-height) - 5px);} table.dataTable.mapitem tbody tr.odd {background-color: var(--body);} table.dataTable.row-border tbody tr:hover {background-color: var(--primary);color : #fff;} /* tr.even:hover, tr.odd:hover {background-color: var(--primary); color: #fff;box-shadow: 3px 3px 5px #333;} */ table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {text-align: center;} table.dataTable tr.dtrg-group.dtrg-level-0 th {line-height: 1rem;} table.dataTable tr.dtrg-group.dtrg-level-0 th:hover {background-color:transparent!important} .table.dataTable th {line-height:1.5rem;font-size:85%;text-align: center;} .table thead th {border-bottom: 0px;border-top: 0px ; padding: 0 0.5rem!important} .table td, .table th {padding:0px;border-top: 0px solid #dee2e6!important;} td a {color: inherit;} td a:hover {color: inherit;} table.dataTable tbody th, table.dataTable tbody td {padding: 6px;} .trsmall {line-height :10px;height:10px;border-top:1px solid #666;} table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_disabled, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {font-weight:400;;border-bottom: 1px solid var(--secondary);color: var(--primaryfill);} table.dataTable tr.dtrg-group td {background-color:var(--white); } table.dataTable tr.dtrg-group td:hover {background-color: var(--primary); color:var(--light); } table.dataTable tr.dtrg-group.dtrg-level-0 td {font-weight:bold;background-color: var(--primaryborder);} table.dataTable tr.dtrg-group.dtrg-level-0 td:hover, table.dataTable tr.dtrg-group.dtrg-level-1 td:hover {font-weight:bold;background-color: var(--primary)!important;} table.dataTable tr.dtrg-group.dtrg-level-1 td, table.dataTable tr.dtrg-group.dtrg-start.dtrg-level-0, table.dataTable tr.dtrg-group.dtrg-level-2 td {padding-top:0.25em;padding-bottom:0.25em;padding-left:2em;font-size:0.9em;line-height: 2rem;} table.dataTable tr.dtrg-group.dtrg-level-2 td {background-color:#f3f3f3} .card table.dataTable tr.dtrg-group.dtrg-level-0 td {font-weight: 700;text-transform: uppercase;font-size: var(--defaultfontsize) ;background-color:var(--primaryborder);border-bottom: 1px solid var(--secondaryborder);border-radius: 0px!important;} .card table.dataTable tr.dtrg-group.dtrg-level-0 td:hover {background-color:inherit;} tr.dtrg-group.dtrg-start.dtrg-level-1, tr.dtrg-group.dtrg-start.dtrg-level-2, tr.dtrg-group.dtrg-start.dtrg-level-3 {line-height: 20px;} .dataTables_length {display: none;} .dataTables_scrollBody {border:0px solid #ddd; padding-right: 0px;} div.dataTables_wrapper div.dataTables_paginate ul.pagination {margin: 5px 0;} div.dataTables_wrapper div.dataTables_processing {background-color: transparent;} table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after {position: absolute;bottom: 0.9em;display: block;opacity: 0;} table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {right: 1em;font-family:'Font Awesome 6 Pro';content: "\f0dd";bottom:4px} table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {right: 1em;font-family:'Font Awesome 6 Pro';content: "\f0de";bottom:4px} table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:after {opacity: 1;} table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {right: -1px;} table.dataTable.no-footer {border-bottom:none;} table.dataTable.display tr td:first-child {border-top-left-radius: var(--rounding);border-bottom-left-radius: var(--rounding);} table.dataTable.display tr td:last-child {border-top-right-radius: var(--rounding);border-bottom-right-radius: var(--rounding);} .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {color:var(--secondary)!important;display:none;} .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--light)!important; background: -webkit-linear-gradient(top, var(--primaryfill) 0%,var(--primaryfill) 100%); background: -moz-linear-gradient(top, var(--primaryfill) 0%,var(--primaryfill) 100%); background: -ms-linear-gradient(top, var(--primaryfill) 0%,var(--primaryfill) 100%); background: -o-linear-gradient(top, var(--primaryfill) 0%,var(--primaryfill) 100%); background: linear-gradient(to top, var(--primaryfill) 0%,var(--primaryfill) 100%); } button.dt-button, div.dt-button, a.dt-button, input.dt-button { padding: 0.15rem 0.25rem!important;font-size: 90%;} .cell_bold {font-weight:700;} .cell_warning {font-weight:700;color: #FFA500;} .cell_danger {font-weight:700;color: #d73814;} .sorting_desc, .sorting_asc {font-weight: 600!important;} .sorting_1 {font-weight: 600!important;} .page-item.disabled .page-link {border-color: transparent;background-color: transparent;color:#ddd} .page-item.active .page-link {z-index: 1;color: var(--primary);background-color: var(--primaryborder); border-color: var(--primary); border-radius:var(--rounding);box-shadow: 0px 0px 0px } .page-link {border: 0px} .page-link:hover {z-index: 2;color: #fff;background-color:var(--primary); border-color:var(--primaryborder);border-radius:var(--rounding);box-shadow:0 0 0;}*/ .page-link:focus {z-index: 3; outline: 0;box-shadow: 0 0 0 transparent;} .sorting_1 {font-weight: 700;} .table-striped tbody tr:nth-of-type(odd):hover, .display table tbody tr:hover {background-color: var(--primary);color:var(--light)} .rowTotal {background-color: var(--secondary)!important;color:var(--light);} div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button, div.dt-container .dt-paging .dt-paging-button.current {padding: 0.25rem .5rem !important;background-color: var(--body);color: var(--dark) ;border-color: transparent;} div.dt-buttons > .dt-button:hover:not(.disabled), div.dt-buttons > div.dt-button-split .dt-button:hover:not(.disabled), div.dt-container .dt-paging .dt-paging-button:hover, div.dt-container .dt-paging .dt-paging-button.current:hover div.dt-buttons > .dt-button:focus-visible:not(.disabled), div.dt-buttons > div.dt-button-split .dt-button:focus-visible:not(.disabled), div.dt-container .dt-paging .dt-paging-button:focus-visible, div.dt-container .dt-paging .dt-paging-button.current:focus-visible {background-color: var(--primaryborder);border-color: transparent;outline: none;} div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {display:none; } table.dataTable.row-border > tbody > tr > *, table.dataTable.display > tbody > tr > * {border-top: 0px solid rgba(0, 0, 0, 0.15); } th.dt-ordering-asc .dt-column-title, th.dt-ordering-desc .dt-column-title {font-weight: 700;opacity: 0.8;color: var(--normaltext);} table.dataTable.order-column > tbody tr > .sorting_1, table.dataTable.order-column > tbody tr > .sorting_2, table.dataTable.order-column > tbody tr > .sorting_3, table.dataTable.display > tbody tr > .sorting_1, table.dataTable.display > tbody tr > .sorting_2, table.dataTable.display > tbody tr > .sorting_3 {box-shadow: none!important;} table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {opacity: 0.8;color: var(--normaltext);} table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {text-align: center; } /* last Datatables settings */ .info-box-number {font-size: 125%;font-weight: 700;} .custom-control-input:focus~.custom-control-label::before {box-shadow:none;} .custom-control-input:checked~.custom-control-label::before {color:var(--body,#fff);border-color:var(--primary);background-color:var(--primary);} .rotate-icon {-webkit-transform: rotate(180deg); transform: rotate(180deg);} .dataTables_length {display:hidden;} .panel-title {border-bottom: 1px solid #ddd;font-weight: bold;} .TripListName {font-weight:400;} .TripListNameS {font-weight:400;font-size:90%;} .TripListing {padding: 5px;line-height: 26px;background-color: var(--body);border-radius:var(--rounding);border-left:4px solid transparent;color:inherit} .TripListing.active {border-left:4px solid var(--primary);border-bottom-left-radius: 0px;border-top-left-radius: 0px;} .TripDay {border-left: 1px solid var(--primaryfill);padding:0.25rem;margin-left: 3px; padding-left:1rem} .DriverInfo {margin-bottom: 0px ;min-height: 60px;border-top:0px solid #ddd; background-color:transparent;} .TripListingBreak {padding:0px;margin:0 6px ;line-height: 20px;background-color: transparent;border-radius:var(--rounding);} .TripBreakLine {padding: 0px;margin: 0 0.5rem;height: 1px;background-color: transparent;border-top: 1px solid var(--primaryborder);} .TripBreakText {top: -13px;position: relative;background-color: var(--white);height: 16px;margin: 4px 0;} .TripListingEmpty {margin-bottom: 0px ;} .DriverInfo:hover {margin-bottom: 0px;color: #666;} .TooltipLine, .StatusLine,.tooltiptxt {line-height: calc(var(--defaultfontsize) * 2 );} .StatusValue {font-weight:700;} .available {color : var(--gray);} .rest {color : var(--success);} .drive {color : #00529C;} .work {color : var(--orange);} .bg-available {background-color : var(--light); color: var(--dark)} .bg-rest {background-color : var(--success); color: var(--light)} .bg-drive {background-color : var(--primary); color:var(--light)} .bg-work {background-color : var(--orange); color:var(--light)} /* leaflet overruling */ .leaflet-container .leaflet-control-attribution a, .leaflet-container .leaflet-control-attribution { background-color: transparent!important;color:transparent!important} .leaflet-touch .leaflet-bar {border: 0px solid rgba(0,0,0,0.2);background-clip: padding-box;} .leaflet-retina .leaflet-control-layers-toggle {font-size:1rem;opacity:1;font-weight:700;background-size: 20px 20px;} .leaflet-control-layers-toggle:before {font-family:var(--fa-font-regular);width:26px; height:26px;left: 5px; font-size:var(--defaultfontsize);line-height:26px; opacity:1;font-weight:300;content:"\f5fd";} .leaflet-touch .leaflet-control-layers-toggle {width: 30px; height: 30px;} .leaflet-control-layers-toggle {background-color:#FFF; width: 26px; height: 26px;border-radius:2rem;background-size: 18px 18px; } .leaflet-control-layers-selector {margin-right: 0.5rem;margin-left: 0.5rem;} .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {border: 0px solid rgba(0,0,0,0.2);background-clip: padding-box;} .leaflet-control-layers {background-color: transparent;} .leaflet-control-layers-expanded {position: relative;padding: 6px 10px 6px 10px;color: inherit;background: var(--body);border-radius:var(--rounding);} .leaflet-tooltip {position: absolute;padding: 0px;border:0px!important;background-color:var(--red);border-radius: var(--rounding);box-shadow: 0px 0px 0px!important;} .leaflet-container {font: inherit;} .rotated-markerdiv {text-align: center; background-color: inherit; border: 1px solid #000;} .rotate-north {transform: rotate(0); -moz-transform: rotate(0);-webkit-transform: rotate(0); -o-transform: rotate(0);-ms-transform: rotate(0);} .leafletpopup {box-shadow:2px 2px 8px #999;border-radius: var(--rounding);min-width:220px;font-weight:500;font-size:96%;line-height: 1.2rem;} .leafletpopup .card-body {font-size:95%;line-height: 1.5rem;color:var(--primary)} .leafletpopup .card-title {font-size:90%;line-height: 1.5rem;background-color: var(--primaryborder);margin-bottom:0px} .leaflet-touch .leaflet-bar button {width: 24px;height: 24px;line-height: 23px;margin-top: .25rem;border-radius: 50%;} .leaflet-bar button:last-of-type:hover, .leaflet-bar button:first-of-type:hover, .leaflet-bar button:hover {background-color: var(--secondary);color:var(--light)} .leaflet-bar {box-shadow: none;} .leaflet-top {background-color: var(--body);border-radius:1rem;top:5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;} .leaflet-control-layers {box-shadow: none;} .leaflet-container a {color: var(--primary);background-color:var(--white);} .leaflet-control-layers-toggle {background-color: var(--white);} .leaflet-bar a.leaflet-disabled {cursor: default;background-color: var(--primaryborder); color: var(--secondary);} .leaflet-disabled {display: none;} .leaflet-bar button:last-of-type, .leaflet-bar button:first-of-type, .leaflet-container a, .leaflet-bar button {background-color: var(--cardback);border:0;border-radius:50%!important;margin: 0.25rem 0rem;color:var(--normaltext)} .leaflet-bar a:last-child, .leaflet-bar a:first-child {margin-bottom:.25rem;border-radius:50%!important} .leaflet-left .leaflet-control {margin:.25rem;} .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle {border: 1px solid var(--cardbordercolor); padding: .5rem; border-radius: var(--rounding);margin-top: -3rem;margin-left: 2rem;;} .leaflet-bar button:last-of-type:hover, .leaflet-bar button:first-of-type:hover, .leaflet-container a:hover, .leaflet-bar button:hover {background-color: var(--primary);border:0;color: var(--light);font-weight: 700;} /* leaflet Pulse Marker */ .leaflet-pulsing-icon {border-radius: 100%;box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.75);} .leaflet-pulsing-icon:after {content: ""; border-radius: 100%; height: 300%; width: 300%;position: absolute; margin: -100% 0 0 -100%;} @keyframes pulsate { 0% {transform: scale(0.1, 0.1);opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% {opacity: 1;-ms-filter: none; filter: none ;} 100% {transform: scale(1.8, 1.8);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }} .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {font-weight: 500;} /* MarkerCluster overruling */ .marker-cluster-small {background-color: var(--primaryborder);} .marker-cluster-small div {background-color: var(--primaryfill);color:#fff;} .marker-cluster-medium {background-color: var(--primaryborder);;} .marker-cluster-medium div {background-color: var(--primaryfill);color:#fff;} .marker-cluster-large {background-color: var(--primaryborder);;} .marker-cluster-large div {background-color: var(--primaryfill);color:#fff;} /* Start Reportlogo settings */ .trips, .distance, .fuelused, .fuelusage, .co2,.days, .sum-drive,.badge.drive,.badge.work,.badge.rest,.badge.workshop,.badge.today, .sum-work, .sum-rest, .sum-avail, .sum-today, .sum-week { text-align:left; position:relative;} .trips::before, .distance::before,.fuelused::before,.fuelusage::before,.co2::before,.days::before, .sum-drive::before,.sum-work::before,.sum-rest::before,.sum-avail::before,.sum-today::before, .badge.drive::before,.badge.work::before,.badge.rest::before,.badge.workshop::before,.badge.today::before, .sum-week::before {position:absolute;font-family:'Font Awesome 7 Pro'; bottom:.75rem;left:.75rem; font-size:22px;opacity:.7;font-weight:300;color:inherit} .trips::before:hover, .distance::before:hover, .fuelused::before:hover, .fuelusage::before:hover, .co2::before:hover, .days::before:hover {font-weight:700;} .trips::before {content:"\f11e"; line-height:20px} .distance::before {content:"\f4d7"; line-height:20px} .fuelused::before {content:"\f52f"; line-height:20px} .fuelusage::before {content:"\f043"; line-height:20px} .co2::before {content:"\f46a"; line-height:20px} .days::before {content:"\f073"; line-height:20px} .sum-drive::before {content:"\f2bd"; } .sum-work::before {content:"\f7d9"; } .sum-rest::before {content:"\f236"; } .sum-available::before {content:"\f0c8"; } .sum-today::before {content:"\f783"; } .sum-week::before {content:"\f784"; } .badge.drive::before {content:"\f04b"; } .badge.work::before {content:"\f04c"; } .badge.rest::before {content:"\f04d"; } .badge.workshop::before {content:"\f7d9"; } .badge.today::before {content:"\f783"; } /* End Reportlogo settings */ .blink {border: 5px solid transparent;animation: blinkingBackground 2s infinite;} @keyframes blinkingBackground {0% { border-color: transparent} 100% { border-color: var(--warning);} } .editor_delete:hover, .editor_edit:hover {color:#FFF;} /* Start VehicleInfo settings */ .fa_background::before {position:absolute;font-family:'Font Awesome 6 Pro'; top:2rem;right:0rem; color: var(--cardback);font-size:4rem;opacity:.5;font-weight:900;transform: scaleX(-1); } .truck_background::before {content:"\f0d1"; } .etruck_background::before {content:"\e3d0"; } .trailer_background::before {content:"\e041"; } .ship_background::before {content:"\f21a"; } .bus_background::before {content:"\f207"; } .fa-shuttle-van_background::before {content:"\f5b6"; } .car_background::before {content:"\f5e4"; } .truck-pickup_background::before{content:"\f63c"; } .motorcycle_background::before {content:"\f21c"; } .taxi_background::before {content:"\f1ba"; } .plane_background::before {content:"\f072"; } .bicycle_background::before {content:"\f206"; } .moped_background::before {content:"\e3b9"; } .cart_background::before {content:"\f07a"; } /* End VehicleInfo settings */ div::-webkit-scrollbar-track {height:calc(100vh - 4px);margin-top:4px;margin-bottom:4px;margin-left:-20px;margin-right:1rem;width:2px} div::-webkit-scrollbar-track-piece {background-color: transparent;;width:4px;} div::-webkit-scrollbar-thumb {background-color: transparent;border-radius:4px;} div::-webkit-scrollbar {width:4px;padding-right: 4px; margin-right:4px;} div:hover::-webkit-scrollbar-track-piece {background-color: var(--secondaryborder);width:4px;} div:hover::-webkit-scrollbar-thumb {background-color: var(--primaryborder);border-radius:4px;} .sloader {border: .2em solid var(--light); border-left: .2em solid var(--primary);} .xoader {border: .2em solid var(--light); border-left: .2em solid var(--primary);} .bloader {border: .3em solid var(--light); border-left: .3em solid var(--primary);} /* popover settings */ .driver-popover {background-color: var(--body);color: inherit;} .driver-popover .driver-popover-title {font-size: 20px;} .driver-popover .driver-popover-title, .driver-popover .driver-popover-description, .driver-popover .driver-popover-progress-text {color: inherit; margin-right: 5rem;} .driver-popover button {flex: 1;text-align: center;background-color:var(--primary);color: #ffffff;border: 0;text-shadow: none;padding: 0.375rem .5rem;border-radius: var(--rounding);} .driver-popover button:hover {background-color: var(--info);color: #ffffff;} .driver-popover .driver-popover-navigation-btns {justify-content: space-between;gap: 3px;} .driver-popover .driver-popover-close-btn {color: var(--primary); background-color: transparent;border-color: transparent;} .driver-popover .driver-popover-close-btn:hover {color: #000;background-color: transparent;border-color: transparent;} .driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {border-left-color: var(--body);} .driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {border-right-color: var(--body);} .driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {border-top-color: var(--body);} .driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {border-bottom-color: var(--body);} .driver-popover-footer {margin-top: 2rem;} /* end of popover settings */ /* Login animation */ #slider {width:100%;height:100%; animation-delay: 0s; transform: translateY(-100%); -webkit-transform: translateY(-100%);} .slide-in {animation: slide-in 1.5s forwards; -webkit-animation: slide-in 0.6s forwards;} .slide-out {animation: slide-out 2.5s forwards; -webkit-animation: slide-out 2.5s forwards;} @keyframes slide-in {100% { transform: translateY(0%); }} @-webkit-keyframes slide-in {100% { -webkit-transform: translateY(0%); }} @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); }} @-webkit-keyframes slide-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-100%); }} .section-login {margin:auto;height: calc(100vh);} .section-login-banner {position: relative;background-color:var(--gray-dark);max-width: 100%; margin:auto;height: 230px} .login-body {background-color:var(--light); } .carousel-indicators li {opacity: 0.3;transition: opacity 0s ease;position: relative; background-color: var(--primary);width:10px;height:10px;border-radius:50%;margin-bottom:0px} .carousel-indicators {position:relative;} .carousel-fade .carousel-item {opacity: 0;transition-duration: 1s;transition-delay: 0s; transition-property: opacity;} .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right {opacity: 1;color: var(--gray);position:relative;} .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {opacity: 0;} .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev {transform: translateX(-200%);transform: translate3d(0, 0, 0);} .carousel-caption {position: relative;right: 0%;margin:1rem; padding:1rem;top: .5rem;left: 0%;z-index: 10;color:var(--normaltext);text-align: left;background-color: var(--secondaryborder);border-radius: var(--rounding-xl);} .carousel-item {overflow-y: auto;padding-top:0px;} .logintext {font-size:90px;color:#fff;font-weight:900;text-shadow: 2px 2px 5px #bbb;text-shadow: 2px 2px 13px var(--primary);position: fixed;top: 50%; left: 50%; transform: translate(-50%, -50%);} .pagina-login {height:calc(100vh - 6rem);margin:2rem;border-radius: var(--rounding-xl);display:flex;flex-flow:var(--page-flow)} .logintext {animation: fadein 5s; -moz-animation: fadein 5s; -webkit-animation: fadein 5s; -o-animation: fadein 5s;} .title {font-size:90px;color:var(--light);font-weight:900;text-shadow: 2px 2px 5px #bbb;text-shadow: 2px 2px 13px var(--primary);} .login-body {background-color:transparent; } .loginbox {margin:auto 1rem;max-width:var(--vehicleListWidth);position:relative;} .loginbox .card {background-color: transparent;} .login-message {height: auto;overflow-y: hidden;} .loginbox-info {border-radius: var(--rounding);display: block; background-color: var(--cardback);height: 100%;padding:1rem 0;} .login-text {font-size :75px; font-weight:700; line-height:75px;} .login-text-big {font-size :150px; font-weight:700;line-height:100px;} .login-control {border:0; border-radius:0px; display: block;font-weight:700;width: 100%;padding: .375rem ; line-height: 1.5; background-clip: padding-box;border-radius: var(--rounding);transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;} .login-control:focus {outline: 0;font-weight: 700;} .loginPhrase {font-weight:900;font-size: 2rem;min-height:80px;display:block;text-align:right;} .login-title {font-weight: 900;margin: auto;font-size: 48px;color: var(--light);text-shadow: 0 3px var(--secondary);line-height: 48px;border-radius: var(--rounding-xl);align-items: center;justify-content:center;min-width:50%} .login-bg {background-image: var(--login_bg_img);margin:1rem;background-size: 100% ;background-repeat: no-repeat; background-position: center center;background-size:cover;width:100%;display: flex;border-radius: var(--rounding-xl); display: flex;flex-flow: column;justify-content: center; } .trans-light {background-color: rgba(0,0,0,0.6);color: var(--light);border-bottom-left-radius: var(--rounding-xl);border-bottom-right-radius: var(--rounding-xl);} .notificationButton {position: relative;display: flex;flex-flow: row-reverse;} /* Sidebar */ .leftmenu {position: fixed;top: 90px;bottom: 0;left: 30px;z-index: 100; /* Behind the navbar */ padding: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);} .nav-tabs .nav-link {font-weight: 400;border-bottom: 3px solid transparent;margin-right: 0.3rem;} .nav-tabs .nav-link.active:hover {font-weight: 700;background-color: var(--primaryborder);border-bottom: 3px solid var(--primary);} .nav-tabs .nav-item {margin-bottom: -2px;margin-right:0;} .nav-tabs.nav-link:hover {color:var(--primary); background-color: var(--secondary)!important;border-bottom:3px solid var(--primary)} .nav-link:focus {color:var(--primary);} .nav-link-divider {width: 0;border-right: var(--cardborder) solid var(--cardbordercolor);height: calc(4.375rem - 2rem); margin: auto .5rem;} .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background-color: var(--secondaryborder);} .modal-body .nav-tabs .nav-link.active {background-color: var(--cardback);} .leftmenu .nav-link.active {color: #007bff;} .leftmenu-heading {font-size: .75rem;text-transform: uppercase;} .rightpage {top:50px;} .group-selector .ss-main .ss-single-selected {font-weight:700;text-transform: uppercase; line-height: 36px;background-color: var(--cardback);padding: 0.25rem .375rem;border-radius: var(--rounding);} .group-selector .ss-content.ss-open {min-width: 250px;right:0px } .ss-main.group-selector {min-width: 250px;text-align: right; } .accordion>.card>.card-header {margin-bottom: 0px;} .dropdown-menu.megamenu {left:0rem; right:0; width:900px; padding:0px;} .megamenu.show {margin-top: .25rem;} .dropdown-menu {font-size:100%;border:var(--cardborder) solid var(--cardbordercolor)!important;} .dropdown-toggle {color: rgba(255,255,255,0.5);} .dropdown-item:hover, .dropdown-item:focus {color: var(--white)!important;text-decoration: none;background: var(--primary);} .dropdown-item.active, .dropdown-item:active {color: #fff; text-decoration: none; background-color: var(--secondary);/* background: var(--primary) linear-gradient(180deg, #266cab, var(--primary)) repeat-x; */} #pdc_main,#pdc_details,#pdc_check,#pdc_details, #pdc_details2,#pdc_details3 {width:33%;} .pdc_damage_item {display: flex; align-items: center!important;border-radius: 0;margin-top:0.1rem;margin-right:1rem;background-color: rgba(255, 255, 255, 0.1);} .pdc_damage_item:first-child {border-top-left-radius: var(--rounding);border-top-right-radius: var(--rounding);} .pdc_damage_item:last-child {border-bottom-left-radius: var(--rounding);border-bottom-right-radius: var(--rounding);} .pdc_cat_item {display: flex; align-items: center!important;padding: 0rem;margin:0.5rem 1rem;} .catcard>ul { margin-left: 0; margin-bottom: 1rem;} .telltale- {display:none} .telltale-INFO {background-color: var(--primary);border: 1px solid var(--primary); padding: .25rem;border-radius:var(--rounding);margin-right:.5rem;margin-bottom:.5rem;color:#fff} .telltale-YELLOW {background-color: var(--yellow);border: 1px solid var(--yellow); padding: .25rem;border-radius:var(--rounding);margin-right:.5rem;margin-bottom:.5rem;color:#fff} .telltale-RED {background-color: var(--danger); border: 1px solid var(--danger); padding: .25rem;border-radius:var(--rounding);margin-right:.5rem;margin-bottom:.5rem;color:#fff} ul {margin-bottom:0px; padding-inline-start: 1rem;} canvas#signature-pad {background: #fff; width: 100%; height: 100%;cursor: crosshair;} button#clear {height: 100%;background:var(--secondary);cursor: pointer;} button#clear span {transform: rotate(90deg);display: block;} /** * placeholder-loading v0.4.0 * Author: Zalog (https://www.zalog.ro/) * License: MIT **/ div.is-loading .ph-item, div.is-loading .alert-badge, div.is-loading h2, div.is-loading p { background: #eee; background: linear-gradient(110deg,var(--body) 8%,var(--secondaryborder) 18%, var(--body) 33%); border-radius: 5px; background-size: 200% 100%; -webkit-animation: 1.5s shine linear infinite; animation: 1.5s shine linear infinite; } @-webkit-keyframes shine {to {background-position-x: -200%;}} @keyframes shine {to {background-position-x: -200%;}} .ph-item {position:relative;display:flex;flex-wrap:wrap;overflow:hidden;direction:ltr;background-color:transparent;height:var(--line-height);content :" "} .ph-item, .ph-item *, .ph-item :after {background-color:transparent;} .ph-item :before {box-sizing:border-box} .ph-item:before {position:absolute;background-color:var(--body);top:0;right:0;bottom:0;left:50%;z-index:1;width:200%;margin-left:-100%;background:linear-gradient(90deg,hsla(0,0%,100%,0) 46%,hsla(0,0%,100%,.35) 50%,hsla(0,0%,100%,0) 25%) 50% 50%;-webkit-animation:phAnimation 1.3s linear infinite;animation:phAnimation 1.3s linear infinite;content:" ";pointer-events:none} .ph-item>* {display:flex;flex:1 1 auto;flex-flow:column;;margin-right:15px;margin-left:15px} .ph-row {display:flex;flex-wrap:wrap;} .ph-row div {height:calc(var(--table-line-height) );margin-top:.5rem;background-color:var(--secondaryborder);} .ph-row .big,.ph-row.big div {height:var(--table-line-height)} .ph-row .empty {background-color:hsla(0,0%,100%,0)} .ph-col-1 {flex:0 0 8.167%;padding:0 .5rem} .ph-col-2 {flex:0 0 16.66667%;padding:0 .5rem;margin:.15rem 0;} .ph-col-4 {flex:0 0 33.33333%;padding:0 .5rem;margin:.15rem 0 ;} .ph-col-6 {flex:0 0 50%;padding:0 .5rem;margin:.15rem 0;} .ph-col-8 {flex:0 0 66.66667%;padding:0 .5rem;margin:.15rem 0;} .ph-col-10 {flex:0 0 83.33333%;padding:0 .5rem;margin:.15rem 0;} .ph-col-12 {flex:0 0 100%;padding:0 .5rem;margin:.15rem 0;} [class*=ph-col] {direction:ltr} [class*=ph-col]>*+.ph-row {margin-top:5px} [class*=ph-col]>*+* {margin-top:5px} .ph-avatar {position:relative;width:100%;min-width:60px;overflow:hidden;background-color:var(--primaryborder);border-radius:50%} .ph-avatar:before {display:block;padding-top:100%;content:" "} .ph-picture {width:100%;height:80px;background-color:var(--primaryborder)} @-webkit-keyframes phAnimation {0%{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}} @keyframes phAnimation {0%{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}} /*************************** end Placeholder ***********************/ .divright {border-bottom-right-radius: .5rem;border-top-right-radius: .5rem;} .moveleft {margin-left: -5px; /* border-bottom-right-radius: .5rem; */ margin-right: 5px;} .field-icon {float: right;margin-right: 20px;margin-top: -25px; position: relative; z-index: 2;} .alert-card {height: calc( var(--vehiclelist) - var(--pagetitle) - 2rem );} /* highcharts general settings */ .highcharts-background {fill: transparent;} .highcharts-title {fill: var(--primary);font-size: inherit;font-weight: 700;} .highcharts-container {font-size: inherit;} .highcharts-data-label text, text.highcharts-data-label {fill: var(--primary);font-size: 80%} .highcharts-color-0 {fill: var(--primaryborder);stroke: var(--primary);} .highcharts-color-1 {fill: var(--secondaryborder);stroke: var(--secondary);} .highcharts-color-2 {fill: var(--tertiary);stroke: var(--tertiary);} .highcharts-color-4 {fill: var(--quaternary);stroke: var(--quaternary);} .highcharts-color-5 {fill: var(--danger);stroke: var(--danger);} .highcharts-color-6 {fill: #00529c;stroke: #00529c;} .highcharts-color-7 {fill: var(--danger);stroke: var(--danger);} .highcharts-color-9 {fill: var(--secondaryborder);stroke: var(--secondary);} .highcharts-color-10 {fill: transparent;stroke:transparent} .highcharts-column-series rect.highcharts-point {stroke: var(--primary);stroke-width:0px} .highcharts-data-label-connector {fill: none;} .highcharts-xaxis-grid .highcharts-grid-line {stroke-width: 1px;stroke: var(--primaryborder);} .highcharts-xaxis .highcharts-tick {stroke-width: 1px; stroke: #ddd;} .highcharts-minor-grid-line {stroke-dasharray: 2, 2; stroke: var(--secondaryborder);} .highcharts-axis-labels {font-size: 75%!important;} .datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {background-image: linear-gradient(to bottom,var(--primary),var(--primarygradient)); color: var(--light);border-radius: 1rem;} #loadprogress {text-transform: initial; color:var(--secondary);} .hide {display:none !important; transition: opacity 1s ease-out;opacity: 0; } .modal-body {border-bottom-left-radius: var(--rounding);border-bottom-right-radius: var(--rounding);} table.dataTable.smalltable tbody tr, table.dataTable.smalltable thead>tr>th {font-size: 85%;line-height: 22px;} #logging {height : calc( var(--vehiclelist) - 2rem ); overflow-y:auto;} #monitoring {height : calc(30vh ); overflow-y:auto;} .datepicker-days {padding: 0 0.5rem;} .text-cap {display: block;color: #1e2022;font-size: .8125rem;font-weight: 600;letter-spacing: .03125rem;text-transform: uppercase;margin-bottom: 1rem;} .text-dark {color: var(--dark);} #APIScheduler, #SystemScheduler {max-height: 35vh;overflow-y: auto;} #ActionWindow, #FencesWindow {transition: all 0.3s linear;} .TableVehicleDamage, .pdc_list {height: 320px;} .card-img, .card-img-top{border-top-left-radius: 0px;border-top-right-radius: 0px;height: 120px;object-fit: cover;opacity: .85;} DashTileCards:hover, DashTileMap:hover {box-shadow: 0px 0px 10px var(--secondary)!important;} /* avatar */ .avatar:not(img) {background-color: #fff;} .avatar-circle {border-radius: 50%;} .avatar {position: relative;display: inline-block;width: 3.125rem;height: 3.125rem; border-radius: 0.5rem;} .avatar:hover .avatar-img { opacity: 0.3;} .avatar:hover .avatar-button {opacity: 1.0;} .avatar-button {transition: .5s ease;opacity: 0;line-height: 1.5rem;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); text-align: center;} .avatar-circle .avatar, .avatar-circle .avatar-img, .avatar-circle .avatar-initials {border-radius: 50%!important;} .avatar-img {max-width: 100%;height: 100%;-o-object-fit: cover; object-fit: cover;border-radius: 0.5rem; opacity: 1;display: block;transition: .5s ease;backface-visibility: hidden;} .avatar-xxl {width: 7rem;height: 7rem;} .avatar-xl {width: 5rem;height: 5rem;} .avatar-l {width: 3rem;height: 3rem;} .avatar-m {width: 2rem;height: 2rem;} #APIScheduler, #SystemScheduler {max-height: 35vh;overflow-y: auto;} .text-date {color: var(--secondary);} #ActionWindow, #FencesWindow {transition: all 0.3s linear;} .card-img, .card-img-top{border-top-left-radius: 0px!important;border-top-right-radius: 0px!important;height: 140px;object-fit: cover;padding:0px 0rem;margin-top: -10px;} .DashTileCards:hover .card-img-top {transform: scale(1.0);} .bg-trans {background-color: transparent} .chat-contact:hover .onlyhover, .speech-bubble-left:hover .onlyhover, .speech-bubble-right:hover .onlyhover {display:inline-block;} @keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 1; }} /* Chat settings */ .chat-contact:hover .onlyhover, .speech-bubble-left:hover .onlyhover, .speech-bubble-right:hover .onlyhover {display:inline-block;} .onlyhover {display:none} .chat-row-menu, .chat_thread_menu {position: absolute;color: var(--gray);top: 5px;right: 5px;background-color: transparent; border-radius: var(--rounding);z-index: 15; animation: fadeIn 1s; } .chat-menu {background-color: var(--body);} .chat-menu-right, .chat-menu-left {z-index:100;} .chat-row-menu-item {display: block;width: 100%;padding: 0.25rem .5rem;clear: both;font-weight: 400;color: var(--primary); text-align: inherit;white-space: nowrap;border: 0;} .chat-row-menu-item:hover {color: var(--light)!important;text-decoration: none;background: var(--primary);} .badge.badge_on_icon {position:relative;top: -6px;right:3px;color:var(--white);height:1.5rem;width:1.5rem;border-radius:1.5rem;} .chat-contact {background-color: var(--secondaryborder);margin-bottom:0.5rem;padding:10px;height:65px;border-radius: var(--rounding);} .chat-contact.active {background-color: var(--primaryborder);border-color: var(--primaryborder);color:inherit;} .chat-contact:hover {border-color: transparent;font-weight:700;color:var(--primary)} .bold {font-weight: 700;} .chat-main-box {position: relative; overflow: hidden;} .chat-main-box .chat-left-aside {position: relative;float: left;z-index: 9;padding: 0px; top: 0px; height:100%;width:400px; } .chat-main-box .chat-left-aside .open-panel {display: none; cursor: pointer; position: absolute; left: -webkit-calc(100% - 1px); top: 50%; z-index: 100; background-color: #fff; -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2); box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2); border-radius: 0 var(--rounding-xl) var(--rounding-xl) 0; line-height: 1; padding: 15px 8px 15px 4px;} .chat-main-box .chat-left-aside .chat-left-inner {position: relative;border-radius: 0; height: calc( var(--canvasheight) - 3rem);border: var(--cardborder) solid var(--cardbordercolor);padding: 0px;overflow-y: auto;margin-right:1rem; border-radius: var(--rounding-xl);} .chat-left-inner.chat-open {border-top-right-radius: 0!important;border-bottom-right-radius: 0!important;} .chat-main-box .chat-right-aside .chat-right-inner {position: relative; height: calc(var(--canvasheight) - 3rem);} .chat-main-box .chat-right-aside {display: flex ;flex-flow: column;border: var(--cardborder) solid var(--cardbordercolor);border-radius: var(--rounding-xl);} .chat-list {margin: 0px; padding: 0px;} .slimScrollDiv {overflow-y: auto;} .chatonline img {margin-right: 10px; float: left; width: 45px;height:45px;object-fit: cover;} .img-circle {border-radius: 100%;} img {vertical-align: middle; border-style: none;} .chat-rbox {background-color: var(--body);} .chat-main-box .chat-left-aside .chat-left-inner .style-none li {list-style: none; overflow: hidden;border-radius:var(--rounding);padding:0 } .chatonline li a {padding: 13px 0; float: left; width: 100%;} .chatonline li a span {color: #67757c;} .chatonline li a span small {display: block; } ul.chatonline {padding: 0 1rem 1rem 1rem;} .chat-content-date {display: flex;flex-direction: row;justify-content: center;} .chat-date {position:relative;padding: 5px 10px;margin-top:5px; text-align: center;border-radius: var(--rounding); background-color: var(--body)} .form-material .form-control {background-position: center bottom, center calc(100% - 1px); background-repeat: no-repeat; background-size: 0 2px, 100% 1px; padding: 0; -webkit-transition: background 0s ease-out 0s; -o-transition: background 0s ease-out 0s; transition: background 0s ease-out 0s;} .chat-main-box .chat-right-aside .chat-list {overflow-y: auto; height: calc(var(--innercanvas) - 60px - 4rem);user-select: text;} .chat-list li {list-style: none; margin-top: 0px;} .chat-list li .chat-img {display: inline-block; width: 45px; vertical-align: top;} .chat-list li .chat-content {width: 50%; display: inline-block; padding-left:1rem;padding-right:1rem;z-index:10;} .chat-list li .chat-time{text-align: right;color: #99abb4; bottom: -20px;user-select: none;display: inline-block;} .chat-list li .chat-content h5 {color: #99abb4;} .chat-list li .chat-content .box {display: inline-block; margin-top: 5px; text-align: left;box-shadow: var(--cardshadow);} .chat-list-bg {background: url("https:/./images/chatbg.jpg");background-size: contain;} .chat-list-bg-trans {background-color: var(--cardback)} .chat-emptyline {height:1rem;width:100%;background-color: transparent;} .chatpad {height: calc(100vh - 190px);border-radius: var(--rounding);} .chat-header {height: 60px;padding:0.5rem!important;font-weight: 700;font-size: 125%;background-color: var(--secondaryborder);border-radius: var(--rounding);border-bottom-left-radius: 0; border-bottom-right-radius: 0;} .chat-header .active {background-color:var(--secondaryborder);} .chat-header-search {padding:1rem .5rem; height :65px;border-bottom:1px solid var(--primaryborder);background-color: var(--body)} .chat-footer-send {bottom : var(--line-height);width:100%} .chat-footer {border-bottom-left-radius: var(--rounding);border-bottom-right-radius: var(--rounding);padding: .5rem .5rem;min-height:var(--lineheight);max-height: calc(var(--lineheight) * 2);background-color: var(--secondaryborder) ;} .chat_background {background-image: url(/images/communications.webp);opacity: .3;height: 300px;object-fit: cover; background-repeat: no-repeat;background-position: center; background-position: center;} .chat-badge {border:0; border-radius:var(--rounding);padding: .375rem .5rem;width:100%} .chat-avatar-img {height: 45px;border-radius:50%; padding:1px; border: 2px solid transparent;opacity: 1; object-fit: cover; display: block; /*vertical-align: middle;*/ transition: .5s ease; backface-visibility: hidden;} .box {border-radius: var(--rounding);padding: 10px;} .chat-list li.reverse {text-align: right;} .speech-bubble-left {position: relative;background: var(--primaryborder);border-radius: var(--rounding);border-bottom-left-radius: 0;border-bottom:1px solid #ddd;;z-index: 10;} .speech-bubble-right {position: relative;background: var(--secondaryborder);border-radius: var(--rounding);border-bottom-right-radius: 0;z-index: 10;} .readstatus {padding :0 .5rem;font-size: 90%;} textarea.form-control {height:var(--lineheight);max-height: calc(var(--lineheight) * 2);} .progress {height:8px;box-shadow: 0 0 0;background-color: var(--body);} .fixed-bottom {display: none;} /* end */ @media (max-width: 992px) { :root { --vehiclelist : calc(100vh - var(--footerspace) - var(--headerspace) - 130px); --innercanvas : calc(100vh - var(--footerspace) - var(--headerspace) - 4rem); --defaultfontsize : 14px; --headerheight : 50px; --headerspace : 50px; } ul.navbar-nav.ml-auto.group-selector {padding-left: 0rem;padding: 0rem;flex-direction: row;border-top:1px solid #aaa;} ul.navbar-nav.profile {padding-right: 1.5rem;} .navbar-light .navbar-nav .nav-link {margin: 0 0.5rem;} .navbar-nav .dropdown-menu {text-align: right;line-height:var(--line-height)} .vehicleListCard .card-body {overflow-y: hidden;overflow-x: hidden;padding:0;} .title {font-size:40px;text-align: center; line-height: 60px} .subtitle {font-size:14px; text-align: center; } .carousel-caption {margin: 0rem; } .section-login {background-color:transparent;max-width: 100%;height: calc(100vh - 60px);} .section-login-banner {position: relative;background-color:transparent;max-width: 100%;margin:auto;height: 230px} .section-login {background-color:transparent;height: calc(100vh ); margin: 0 auto;} .pagina {margin: 0px ; overflow-y:auto;overflow-x:hidden;padding: 0.5rem !important;} /*.inner-pagina {background-color: #00529c;}*/ .pagina-login {border-radius: 0px;margin: 1rem;display: flex;flex-flow: wrap-reverse;align-content: start;} .login-text-big {font-size: 60px;height:100%;} .login-text-big {font-size: 60px;} .loginbox {font-size: inherit;margin:1rem;} .login-text {font-size: 40px;} .loginPhrase,.greetings {display:none;} .today {text-align: center;} .logininfo {display:none!important} .login-bg {background-position: center center;background-repeat: no-repeat;background-size: cover;margin:0px!important;height:220px;max-width:calc(var(--vehicleListWidth) + 2rem);} .logintext {font-size: 60px;color: #fff; font-weight: 900;text-shadow: 2px 2px 13px var(--primary); width:90%;position: fixed; top: 50%; transform: translate(-50%, -50%);} .loginbox-info:before {padding:0rem;height:90% ;transition-duration: 200ms;transform: translate(-50px, 0px); } .loginbox-info {height:auto;} .login-message {padding:0px;} .login-title {margin:auto;text-align: center;} .leftmenu-sticky {min-width:50px; } .DashTileCards, .DashTile {min-height:30px;} .DashGroupTile {background-color: #eee; min-height: 150px; max-height: 600px; margin-bottom: 30px; margin-left: -20px; margin-right: -20px; border-radius: var(--rounding);} .page-title-secondary {display:none;} .info-box-number {font-weight:900} .card {border-radius: var(--rounding-xl);} .pc-card {border : 1px solid var(--secondaryborder);height:calc(100% - 30px);font-size:120%} .navbar-collapse {padding: 1rem;border-radius: var(--rounding);background-color: var(--body);position: relative;top: 2px;margin-left: 20%;right: 5px;box-shadow: 4px 4px 15px #555;text-align: right!important;margin-left: auto!important;max-width:70%} .navbar-nav-extra {display: flex;flex-direction: row;padding: 10px;margin-bottom: 0;list-style: none; } .navbar-mobile {background-color:#F2f2f2; color: #222;} .navbar-brand {font-size:1rem;font-weight:700;color:#111;} .navbar-dark {color: #222;;height:var(--headerheight);} .navbar-dark .navbar-toggler{border: 0;color: #111;} .nav-link-divider {display: none;} .navbar-nav.nav-buttons {display: flex;flex-direction: row;} .nav-item.nav-buttons {text-align: right;} .border-subtitle {background-color: #F2f2f2; font-size: 0.9rem;} .form-group {margin-bottom: 0.5rem;} .show-md {display:none;} table.dataTable thead>tr>td.sorting {padding-top: .125rem;font-weight:400} .dataTables_scrollHead {padding-top:0rem; } #pdc_main,#pdc_details,#pdc_check,#pdc_details, #pdc_details2,#pdc_details3 {width:100%;} .pdcdetsidebar {width: 0; padding:0px!important;position: absolute; z-index: 500;top:0px;right: 0; overflow-y: hidden;overflow-x: hidden; transition: 0.15s;height:100%} .pdcdetsidebar a {display: block; transition: 0.15s;} .pdcdetsidebar .closebtn {position: relative;margin-left: 15px;font-weight: 900;font-size: 20px;} .navbar .has-megamenu {position:static!important;} .dropdown-menu.megamenu.show {left:5rem; right:0; width:96%; padding:0px;top: 45px; } .megamenu.show {margin-top: .25rem;} .left {float: left; width:310px;height: 99%;background-color:#fff; padding: 5px;position: absolute;overflow-y: noscroll} .pad {float: left; width:100%; height: calc(45vh);;position:relative;} .dpad {float: left; width:100%; height: calc(45vh);position:relative;} .dlpad {float: left; width:100%; height: calc(40vh);position:relative;} .dgpad {float: left; width:100%; height: calc(30vh);position:relative;} .IndexPad {float: left; width:100%; height: calc(40vh - 80px);position:relative;} .reportpad {float: left; width:100%; height: calc(50vh - 30px);position:relative;} #map {float: left; width:100%; height: 100%;} #driverlist {float: left; width:100%; height: 480px;position:relative;} .alertpad {float: left; width:100%; height: calc(100vh - 220px);position:relative;} .advisepad {float: left; width:100%; height: calc(40vh);position:relative;} body {display:block;/* padding-top: 60px; */;line-height:1.5rem;} .mob-padding {margin-bottom:20px; } .mapleftcolumn {margin-left: 1rem; padding-left: 1rem} .maprightcolumn {margin-right:1rem ; padding-right: 1rem;} #VehicleInfo {min-height: calc(100vh - 30px);height: calc(60vh - 30px);line-height:16px;overflow-y:hidden;overflow-x:hidden;padding:10px;} .VehicleList, .VehicleList:link, .VehicleList:visited, .VehicleList:hover {line-height:18px;width:100%;color: black;overflow-y: scroll;text-decoration:none;} .vehiclegroup > .VehicleListing, .VehicleListing {margin-right:5px;background-color:var(--secondaryborder);} .mhide {display:none;} .tpmscard {min-width: 300px;max-width: 420px; } .fixed-bottom {height:var(--footerheight);display:block;} #VehicleDetails {overflow-y: auto;overflow-x: hidden;width:100%;max-width:100%;margin:0;} #VehicleList {width:100%; height: var(--canvasheight);max-width:100%;min-width:100%;margin-right:0px} #VList {height: calc(100vh - 30px);line-height:12px;overflow-y: auto;overflow-x: hidden;min-height: 200px;padding:10px;} #VehicleAlertDetails, #VehicleAlert {height: calc(60vh);line-height:12px;overflow-y: hidden;overflow-x: hidden;min-height: 200px;padding:10px;overflow-y: hidden; } .FleetGraph {height:150px;padding:0px;margin:0px;text-align:center;vertical-align:center;} #AdviseData, #AlertHistory {line-height:12px;overflow-y: auto; overflow-x: hidden;padding:10px;overflow-y: hidden; } .AdviseHeader {padding : 10px 10px 10px 5px;font-size:150%; width: 100%;display: table; } .AdviseBox {min-height:10px;margin-right:3px;margin-left:3px; padding:10px; } .AdviseText {padding:5px;line-height:14px;overflow-y:auto;overflow-x:hidden; min-height: 10px; } #rFMSTable {padding-bottom:10px} .info-box-number {display: block;font-weight: bold;} .notification-area {max-height : calc(40vh);overflow-y: auto;vertical-align: top;} .form-control-ro {padding:.5rem;border-radius: 0px;line-height: 1rem;background-color:var(--body);} .content-header > .breadcrumb {display:none;} .navbar-nav .dropdown-menu .dropdown-item { position: static; float: none;padding :0 0.5rem;} .collapse.show {display: block; } #VehicleInfoD {overflow-y: auto;padding:0 1rem;} #VehicleSearch {display:none;} .section-full {background-color: transparent; max-width: 100%; margin: auto;} .border-subtitle {font-size: 0.9rem;margin-top: -1.2rem; margin-left: 1rem; padding: .5rem;} .chatpad {height: calc(100vh - 300px);border-radius: var(--rounding);} .chat-main-box .chat-right-aside .chat-list {padding:0px;} .inner-pagina {margin:0!important;padding:0!important;} .card-header, .pc-card, .card-header:first-child {border-radius:0px} ::-webkit-scrollbar {width:0px;} .pdc-pagina {overflow-y:auto;background-color:var(--body); } .pdc-card-pagina {overflow-y: auto;overflow-x: hidden;margin-right: 0px; margin-left: 0px;height: var(--canvasheight) ;width:100%} .pdc-check-pagina {overflow-y: auto;overflow-x: hidden;margin-right: 0px; margin-left: 0px;max-height: calc(100vh - 175px); } .vehicleDetailsCard > .card-header {border-radius:0px} .fa_background::before {top: 60px; right:0rem} .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { padding-right: 1px; padding-left: 1px; } .card-img, .card-img-top {display:none;} .chat-main-box .chat-left-aside .chat-left-inner {position: relative;border-radius: var(--rounding-xl);background-color: transparent;} .chat-header {border-bottom:1px solid var(--secondaryborder); border-top-left-radius: var(--rounding);border-top-right-radius: var(--rounding);height: 60px;padding: 0.5rem!important;font-weight: 700;font-size: 125%;} .chat-main-box {border-radius: var(--rounding-xl); } .moveup {margin-top:0px;} .btn.ftr {border-radius: 50%;background-color: inherit;position: relative;color:inherit} .btn.ftr.active {position: relative;padding: 10px; border:10px solid var(--white);background-color: var(--primary);color:var(--body);transform: translatey(-20px);transition-duration: .2s; } .btn.ftr:before {content: '';position: absolute;top: 10px; left: 0; width: 100%;height: 100%;background: var(--primary);border-radius: 50%; filter: blur(5px);opacity:0;transition: .5s;transition-delay: 0.15s;} .btn.ftr.hover {position: relative;padding: 10px; border:10px solid var(--white);background-color: var(--secondary);color:var(--white);transform: translatey(-20px);transition-duration: .2s; } .ftr-nav {position: relative;width: 100%;height: 60px;background: white;display: flex;justify-content: center;align-items: center;border-radius: 10px;} .ftr-nav ul {width: 50%;display: flex;} .ftr-nav ul li {list-style: none;position: relative;width: 70px; /* ul: width 350 / 5 = 70 */height: 60px; z-index: 2;} .ftr-nav ul li a {text-decoration: none;color:#555; position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;} .ftr-nav ul li a .icon {position:relative;background: #fff;display:block;width: 55px;height: 55px;text-align: center;line-height: 65px;border-radius: 65px; color: #222327; font-size: 1.5em; transition: 0.5s; transition-delay: 0s;} .ftr-nav ul li.active a .icon {background: var(--primary);color: #fff;transform: translatey(-27px);transition-delay: 0.15s;} .ftr-nav ul li a .icon:before {content: '';position: absolute;top: 10px;left: 0;width: 100%;height: 100%;background: var(--clr);border-radius: 50%;filter: blur(5px); opacity:0; transition: .5s; transition-delay: 0.15s;} .ftr-nav ul li.active a .icon:before {opacity: 0.5;transition-delay: 0.25s;} .indicator {position: absolute;top: -35px;width: 70px;height: 70px;background: #fff;border-radius: 50%;z-index: 1; transition: 0.5s;} .indicator::before {content: '';position: absolute;top: 5px;left: -27.5px;width: 30px;height: 30px;border-radius: 50%;box-shadow: 15px 18px #fff} .indicator::after {content: ''; position: absolute; top: 5px;right: -27.5px;width: 30px;height: 30px;border-radius: 50%;box-shadow: -15px 18px #fff} .ftr-nav ul li:nth-child(1).active ~ .indicator {transform: translatex(calc(70px * 0));} .ftr-nav ul li:nth-child(2).active ~ .indicator {transform: translatex(calc(70px * 1));} .ftr-nav ul li:nth-child(3).active ~ .indicator {transform: translatex(calc(70px * 2));} .ftr-nav ul li:nth-child(4).active ~ .indicator {transform: translatex(calc(70px * 3));} .ftr-nav ul li:nth-child(5).active ~ .indicator {transform: translatex(calc(70px * 4));} .pagina-chat {margin: 0px;overflow-y: auto;overflow-x: hidden;padding: 10px 10px;} .DashTileMap {height:calc(var(--carddashboard) - 40vh );border-radius:var(--rounding-xl); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;} .DashTileCards {max-height:var(--carddashboard);;overflow-y: auto;overflow-x: hidden;min-height: 80px;border-radius:var(--rounding-xl); box-shadow: var(--cardshadow);} .DashTile {position: relative;top: .5rem; z-index: 10; margin: 0;padding:.5rem 0} .DashBadge {padding:0 1rem; display: flex;flex-direction: row;} .DashBadge .badge {margin:0 .5rem;border-radius: var(--rounding-xl);color:var(--white);background-color: var(--secondary);min-width:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; font-size:150%!important; display: flex;flex-direction: column;} .badge.drive {background-color:var(--drive)} .badge.work {background-color:var(--work);} .badge.rest {background-color:var(--rest);} .badge.workshop {background-color:var(--workshop);} .today {background-color:var(--today);} .logo-image {height: 26px} .nav-item.last {margin-right :0rem;} .chat-list li .chat-content {width: 95%; display: inline-block; padding-left:1rem;padding-right:0rem;} .media-item {padding-top: .5rem;font-size:85%;} .chat-right-aside {padding:0px;} .adminpad {padding-right: 0px;} } /* End of Settings for small screen */ /******************************* * MODAL AS LEFT/RIGHT SIDEBAR * Add "left" or "right" in modal parent div, after class="modal". * Get free snippets on bootpen.com *******************************/ .modal.right .modal-dialog {position: absolute; top:var(--headerheight);right:2rem;max-width: 1000px;max-height: 70%;-webkit-transform: translate3d(0%, 0, 0);-ms-transform: translate3d(0%, 0, 0);-o-transform: translate3d(0%, 0, 0);transform: translate3d(0%, 0, 0);} .modal.right .modal-content {height: 100%;overflow-y: auto;} .modal.right.fade .modal-dialog {float:right;-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;-moz-transition: opacity 0.3s linear, right 0.3s ease-out;-o-transition: opacity 0.3s linear, right 0.3s ease-out;transition: opacity 0.3s linear, right 0.3s ease-out;} .modal.right.fade.in .modal-dialog {right: 0;} .modal-rfms {width:700px;max-width: 100%;} .modal-body {padding: 0rem;background-color: var(--cardback);} .modal-body .tab-content {min-height: 450px;} .modal-content.card {width: 100%;} .modal-content {background-color: var(--cardback);border-radius: var(--rounding);border: none;} .modal-header {border-bottom-color: var(--cardbordercolor);background-color:var(--body);border-width: 0px;} .SmallLine {line-height: 1.75rem;} .iconbox {width:30px;} textarea#serviceDescription {min-height:80px;} textarea#serviceDescription {min-height:80px;} loginmessage {max-height:250px;overflow-y:auto;} .animated {-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both; -webkit-animation-duration:.5s;-moz-animation-duration: .5s;-ms-animation-duration: .5s;-o-animation-duration: .5s;animation-duration: .5s;} @-webkit-keyframes fadeinleft { 0% { opacity: 0; -webkit-transform: translateX(-100%);} 100% {opacity: 1;-webkit-transform: translateX(0);}} @-moz-keyframes fadeinleft { 0% { opacity: 0;-moz-transform: translateX(-200%);} 100% {opacity: 1;-moz-transform: translateX(0); }} @keyframes fadeinleft { 0% { opacity: .0;transform: translateX(-200%);} 100% {opacity: 1;transform: translateX(0);}} @keyframes fadeintop { 0% { opacity: 1;transform: translateY(-200%);} 100% {opacity: 1;transform: translateY(0);}} @keyframes fadeinright { 0% { opacity: 0;transform: translateX(200%);} 100% {opacity: 1;transform: translateX(0);}} @keyframes fadeinbottom{ 0% { opacity: 0;transform: translateY(200%);} 100% {opacity: 1;transform: translateY(0);}} @keyframes fadein { 0% { opacity: 0;} 100% {opacity: 1;}} .animated:nth-child(1){animation-delay: 0.2s;} .animated:nth-child(2){animation-delay: 0.15s;} .animated:nth-child(3){animation-delay: 0.2s;} .animated:nth-child(4){animation-delay: 0.25s;} .animated:nth-child(5){animation-delay: 0.3s;} .animated:nth-child(6){animation-delay: 0.35s;} .animated:nth-child(7){animation-delay: 0.4s;} .animated:nth-child(8){animation-delay: 0.45s;} .animated:nth-child(9){animation-delay: 0.5s;} .animated:nth-child(10){animation-delay: 0.55s;} .animated:nth-child(11){animation-delay: 0.6s;} .animated:nth-child(12){animation-delay: 0.65s;} .animated:nth-child(13){animation-delay: 0.7s;} .animated:nth-child(14){animation-delay: 0.75s;} .animated:nth-child(15){animation-delay: 0.8s;} .animated:nth-child(16){animation-delay: 0.85s;} .animated:nth-child(17){animation-delay: 0.9s;} .animated:nth-child(18){animation-delay: 0.95s;} .animated:nth-child(19){animation-delay: 1s;} .animated:nth-child(20){animation-delay: 1.05s;} .fadeinleft {-webkit-animation-name: fadeinleft;-moz-animation-name: fadeinleft;-o-animation-name: fadeinleft;animation-name: fadeinleft;} .fadeintop {-webkit-animation-name: fadeintop;-moz-animation-name: fadeintop;-o-animation-name: fadeintop;animation-name: fadeintop;} .fadeinright {-webkit-animation-name: fadeinright;-moz-animation-name: fadeinright;-o-animation-name: fadeinright;animation-name: fadeinright;} .fadein {-webkit-animation-name: fadein;-moz-animation-name: fadein;-o-animation-name: fadein;animation-name: fadein;} #scroll {position:fixed;right:10px;bottom:40px;cursor:pointer;width:50px;height:50px;background-color:var(--primary);text-indent:-9999px;display:none;-webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px;z-index: 1200;} #scroll span {position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px; height:0; width:0; border:8px solid transparent;border-bottom-color:#ffffff;} #scroll:hover {background-color:var(--secondary);opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)";} /* tijdelijk formwizard*/ /*Background color*/ /*form styles*/ #msform {text-align: center; position: relative; margin-top: 20px;} #msform fieldset .form-card {background: white; border: 0 none; border-radius: 0px; padding: 20px 40px 30px 40px; box-sizing: border-box; width: 94%; position: relative;} #msform fieldset {background: white;border: 0 none;border-radius: 0.5rem;box-sizing: border-box;width: 100%;margin: 0;padding-bottom: 20px; /*stacking fieldsets above each other*/ position: relative;} /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) {display: none;} #msform fieldset .form-card { text-align: left; color: #9E9E9E;} #msform input, #msform textarea { padding: 0px 8px 4px 8px;border: none;border-bottom: 1px solid #ccc;border-radius: 0px; margin-bottom: 25px;margin-top: 2px; width: 100%;box-sizing: border-box;color: #2C3E50;font-size: 16px;letter-spacing: 1px;} #msform input:focus, #msform textarea:focus {-moz-box-shadow: none !important; -webkit-box-shadow: none !important;box-shadow: none !important;border: none;font-weight: bold;border-bottom: 2px solid var(--primary);outline-width: 0;} /*Blue Buttons*/ #msform .action-button {width: 100px;background: var(--primary);font-weight: bold;color: white;border: 0 none;border-radius: var(--rounding);cursor: pointer; padding: 10px 5px;margin: 10px 5px;} #msform .action-button:hover, #msform .action-button:focus {box-shadow: 0 0 15px var(--success);} /*Previous Buttons*/ #msform .action-button-previous {width: 100px;background: var(--secondary);font-weight: bold;color: white;border: 0 none;border-radius: var(--rounding);cursor: pointer; padding: 10px 5px;margin: 10px 5px;} #msform .action-button-previous:hover, #msform .action-button-previous:focus { box-shadow: 0 0 15px var(--warning);} /*Dropdown List Exp Date*/ select.list-dt {border: none; outline: 0;border-bottom: 1px solid #ccc;padding: 2px 5px 3px 5px;margin: 2px;} select.list-dt:focus {border-bottom: 2px solid var(--primary);} /*FieldSet headings*/ .fs-title {font-size: 25px;color: #2C3E50;margin-bottom: 10px;font-weight: bold;text-align: left;} /*progressbar*/ #progressbar {margin-bottom: 30px;overflow: hidden;color: lightgrey;} #progressbar .active {color: #000000;} #progressbar li {list-style-type: none;font-size: 12px;float: left;position: relative;} /*Icons in the ProgressBar*/ #progressbar #account:before {font-family: var(--fa-font-regular);content: "\f023";} #progressbar #personal:before {font-family: var(--fa-font-regular);content: "\f007";} #progressbar #api:before {font-family: var(--fa-font-regular);content: "\f09d";} #progressbar #drivetime:before {font-family: var(--fa-font-regular);content: "\f09d";} #progressbar #confirm:before {font-family: var(--fa-font-regular);content: "\f00c";} #progressbar li:before {width: 50px;height: 50px;line-height: 45px;display: block;font-size: 18px;color: #ffffff;background: lightgray;border-radius: 50%;margin: 0 auto 10px auto;padding: 2px;} #progressbar li:after {content: '';width: 100%;height: 2px;background: lightgray;position: absolute;left: 0;top: 25px;z-index: -1;} #progressbar li.active:before, #progressbar li.active:after {background: var(--secondary);} .radio-group {position: relative;margin-bottom: 25px;} .radio {display:inline-block;width: 204;height: 104;border-radius: 0;background: lightblue;box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);box-sizing: border-box;cursor:pointer;margin: 8px 2px; } .radio:hover {box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);} .radio.selected {box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);} .fit-image {width: 100%;object-fit: cover;} /* einde formwizard */ input:focus-visible {outline-offset: 0px;border: 0px solid transparent;} .fa-regular {color:var(--normaltext)} .in-active {color:gray;font-style:italic;} .input-group-append {margin-left:0px;} .form-control .btn-right {border-top-right-radius: 0px;border-bottom-right-radius: 0px;} .logo-area {padding:0 0.5rem;margin-right:1rem;background-color: var(--logoback);} .nav-link:hover .fa-light {font-weight: 900;} table.dataTable.display tbody tr:hover .fa-light {font-weight: 900;color:var(--normaltext); }; input[type="range" i]::-webkit-slider-runnable-track {background-color:var(--body);} input::-ms-track {height: 40px} .form-group .alert-badge {min-height: 4rem;} .alert-badge:hover .fa-light, .btn.ftr.active .fa-light {font-weight: 700;} .increase::before {margin-right: .5rem;font-family:var(--fa-font-regular);content: "\f062";font-weight:700;} .decrease::before {margin-right: .5rem;font-family:var(--fa-font-regular);content: "\f063";font-weight:700;} .custom-switch .custom-control-input .form-control {display:none} .custom-switch .custom-control-input:checked .form-control {display : block} .custom-control-value {display: flex !important;margin-top:0.5rem;margin-right:1.rem;max-width:100%} .bars-container {display: flex;gap: var(--barsGap);width: 100%;padding: .5rem;background-color:transparent;} .lb {--bar-height: 5px;position: relative;width: calc(100% / var(--barsCount));height: var(--bar-height);border-radius: 0;overflow: hidden;} .lb:first-child {border-top-left-radius : .5rem;border-bottom-left-radius : .5rem;} .lb:last-child {border-top-right-radius : .5rem;border-bottom-right-radius : .5rem;} .lb::before {content: "";position: absolute;width: 100%;height: 100%;background: var(--background);} .bg-tertiary,.btn-tertiary {background-color: var(--tertiary);} .bg-quaternary,.btn-quaternary {background-color: var(--quaternary);} .text-tertiary {color:var(--tertiary);} .text-quaternary {color:var(--quaternary);} /* Motiflix styling */ .notiflix-notify {background-color: var(--cardback) !important; color: var(--normaltext) !important; border-radius: var(--rounding) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; border-left-width: 5px !important; border-left-style: solid !important;border-top: none !important;border-right: none !important;border-bottom: none !important;} .notiflix-notify-success {border-left-color: var(--success) !important; } .notiflix-notify-success .notiflix-notify-icon svg {fill: var(--success) !important;} .notiflix-notify-failure {border-left-color: var(--danger) !important;} .notiflix-notify-failure .notiflix-notify-icon svg {fill: var(--danger) !important;} .notiflix-notify-warning {border-left-color: var(--warning) !important; } .notiflix-notify-warning .notiflix-notify-icon svg {fill: var(--warning) !important;} .notiflix-notify-info {border-left-color: var(--info)!important; } .notiflix-notify-info .notiflix-notify-icon svg {fill: var(--info) !important;} .notiflix-notify-icon {color: inherit !important;height:26px} .notiflix-notify-message {padding-left: 10px !important; } .modal-xl {max-width: 1400px;} fieldset.fieldclass {padding: 1rem; margin: 0px; border-radius: var(--rounding); color: var(--normaltext);border : 1px solid var(--secondaryborder);} fieldset.fieldclass.no-group {padding: 0rem; margin: 0px; border : 0px solid var(--secondaryborder);} fieldset.fieldclass legend {font-size: var(--defaultfontsize);font-weight: 500;border-radius: var(--rounding);padding :0.25rem .75rem;} .column {box-sizing: border-box;overflow-y: auto; border: 0px solid #ccc; background-clip: padding-box;border-radius : var(--rounding);} .column-one {width: 450px; flex-shrink: 0;} .column-two {width: 0;padding: 0;margin: 0; background-color: var(--secondaryBORDER); flex-shrink: 0;overflow: hidden; border:0;transition: width 0.5s ease-in-out,padding 0.5s ease-in-out,margin-left 0.5s ease-in-out,margin-right 0.5s ease-in-out;} .column-two.visible {width: 400px;margin: 0 1rem;border:inherit;} .details-content-wrapper {/*width: calc(300px - (2 * 1.5rem));*/ box-sizing: border-box;opacity: 0;transition: opacity 0.2s ease-in-out;} .column-two.visible .details-content-wrapper {opacity: 1;transition-delay: 0.2s;} .column-three {flex-grow: 1; transition: width 0.5s ease-in-out; } /* Canvas layout definitions */ .draggable-field {padding: 8px 12px;overflow: hidden; margin: 5px 0; background-color: var(--cardback);border: 1px solid #ced4da; border-radius: 0.375rem; cursor: grab;transition: background-color 0.2s ease-in-out; display: flex; align-items: center;} .draggable-field:hover {background-color: var(--secondary) } .draggable-field .field-icon {margin-right: .5rem; color: #495057;margin-top:0 } #form-canvas.row {min-height: 60vh;max-height: 80vh;overflow-y: auto;border: var(--cardborder) solid var(--cardbordercolor); padding: .5rem; background-color: var(--body); border-radius: 0.375rem; position: relative; margin:0px;} .canvas-row {border: var(--cardborder) dashed var(--cardbordercolor);padding: .5rem;margin-bottom: .5rem; width: 100%; min-height: 60px; background-color: var(--body); display: flex; flex-wrap: wrap;gap: .5rem;box-sizing: border-box;cursor: grab; border-radius:var(--rounding)} .layout-column {border: var(--cardborder) dashed var(--cardbordercolor);padding: .5rem;height :100%;min-height: 60vh;gap: 1.5rem; background-color: var(--secondaryborder);border-radius:var(--rounding);display: flex;flex-direction: column;gap: 10px;} .canvas-layout-block { border: 1px solid var(--primary) ; padding: 10px; margin-bottom: 0; /* Gap is handled by form-canvas */ border-radius: 0.375rem; background-color: #e7f3ff; /* Light blue background */ cursor: grab; transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out; flex: 0 1 calc(50% - 10px); /* Two blocks per line, accounting for half the canvas gap */ box-sizing: border-box; min-height: 100px; /* Min height to be a drop target */ display: flex; /* To contain its content (either field-rows or a group) */ flex-direction: column; } .canvas-layout-block.dragging { opacity: 0.5; border-style: dashed !important; } .canvas-group-container { border-radius: 0.375rem; width: 100%; /* Take full width of parent layout-block */ box-sizing: border-box; /* cursor: grab; Group itself is not independently draggable, its parent layout-block is */ } .canvas-group-container legend { padding: 0 10px; font-weight: bold; color: #343a40; width: auto; float: none; font-size: 1.2em; margin-bottom: 10px; cursor: pointer; } ._canvas-group-container fieldset { padding: 10px; min-height: 70px; } /* Renamed from .canvas-row to .field-layout-row */ .field-layout-row { border: 1px dashed #ced4da; /* Light dash for internal rows */ background-color: #ffffff; padding: 10px; margin-bottom: 10px; border-radius: 0.375rem; min-height: 60px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; width: 100%; } .canvas-layout-block > .field-layout-row:last-child, .canvas-group-container fieldset > .field-layout-row:last-child { margin-bottom: 0; /* No bottom margin for the last field row in its container */ } .canvas-field-placeholder {padding: 8px 12px; background-color: var(--cardback); border: 1px solid var(--secondaryfill);color: var(--primary); border-radius: var(--rounding); display: flex; align-items: center;cursor: pointer; flex-grow: 0; flex-shrink: 0;min-width: 100px; box-sizing: border-box;transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;margin: 0 0.25rem; margin-bottom: 0.5rem;} .canvas-field-placeholder:hover { background-color: #e7f3ff; border-color: #0056b3; } .canvas-field-placeholder.selected { border-color: #fd7e14; background-color: #fff3e0; } .canvas-field-placeholder.dragging { opacity: 0.5; border-style: dashed !important; } .canvas-field-placeholder .field-icon { margin-right: 8px; margin-top:0;} .canvas-field-placeholder .field-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;margin-top:0; } .canvas-empty-message {position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); color: #6c757d; font-style: italic;width: 100%; text-align: center; } #delete-zone {margin-top: 0px; padding: .375rem 2rem; text-align: center;border: 1px dashed var(--danger); border-radius: 0.375rem;color: #dc3545; background-color: var(--dangerborder); transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;} #delete-zone.drag-over-delete {background-color: var(--dangerborder); border-color: var(--danger); color: #b02a37; font-weight: bold; } .config-output {margin-top: 20px; background-color: #343a40; color: #f8f9fa; padding: 15px; border-radius: 0.375rem; font-family: monospace; white-space: pre-wrap; min-height: 200px; } .section-header {font-size: 1.2rem; color: #343a40; } .loading-spinner {display: none; margin-left: 10px; } .canvas-header-controls button {font-size: 0.875rem; } .layout-row {display: flex; width: 100%; flex-wrap: wrap; } #fields-list {height :60vh;overflow-y: auto;overflow-x: hidden;background-color:var(--body);border-radius: var(--rounding);} .layout-column, .canvas-row { position: relative; } /* Style for Column IDs */ .layout-column[data-column-id]::before { content: "col: " attr(data-column-id); /* Display "Col: " followed by the ID */ position: absolute; top: -1px; /* Position slightly overlapping the top border */ right: 50px; /* Position slightly overlapping the left border */ background-color: #6c757d; /* A distinct background for the ID tag */ color: white; padding: 2px 6px; font-size: 0.7em; /* Small font size */ font-weight: bold; font-family: monospace; border-bottom-right-radius: 5px; /* Style as a small tab */ border: 1px solid #6c757d; /* Match background or slightly darker */ z-index: 10; /* Ensure it's above other elements if needed */ line-height: 1; } /* Style for Item Wrapper Row IDs (the .canvas-row inside .layout-column) */ .layout-column > .canvas-row[data-item-row-id]::before { content: " row: " attr(data-item-row-id); /* Display "Item Row: " followed by ID */ position: absolute; top: 0px; /* Position slightly inside the top border */ left: 4px; /* Position slightly inside the left border */ background-color: rgba(233, 236, 239, 0.85); /* Lighter, slightly transparent background */ color: #495057; padding: 1px 4px; font-size: 0.65em; font-family: monospace; border-radius: 3px; z-index: 5; /* Below column ID if they could overlap, but position should prevent it */ line-height: 1; } /* Optional: Add a little more top padding to the elements so the ID tag doesn't obscure content */ .layout-column { padding-top: 25px; /* Increased padding to make space for the "Col: ID" tag */ } #form-canvas fieldset.fieldclass {padding: 0 .5rem.51rem; margin: 0px; border-radius: var(--rounding); color: var(--normaltext);border : 1px solid var(--secondaryfill);} fieldset.fieldclass.no-group {padding: 0rem; margin: 0px; border : 0px solid var(--secondaryborder);} #form-canvas fieldset.fieldclass legend {font-size: var(--defaultfontsize);border-radius: var(--rounding);font-weight:500;} .tab-content {border-top: 0;padding: .5rem;border-bottom-left-radius: 0.375rem;border-bottom-right-radius: 0.375rem;background-color: var(--cardback) } #form-canvas-tab-pane {display: flex;flex-direction: column;height: auto;} #form-canvas {flex-grow: 1; } .config-output-container {min-height: 60vh; display: flex; flex-direction: column; } #config-output {flex-grow: 1;background-color: var(--body);font-family: monospace;font-size:90%;white-space: pre-wrap;padding: .5rem;border-radius: var(--rounding); overflow-y: auto;max-height:70vh } .field-lock-icon {color: #6c757d; font-size: 0.85em; flex-shrink: 0; } #fields-list-container {min-height:60vh;background-color: var(--body);border-radius:var(--rounding)}