.fleet_select{ width:200px; margin-right:10px; margin-left:10px; background-color:#827c93; !important; color: #fff; padding-left:7px; } .content_fleet_external{ transition: 0.5s; box-shadow: 5px 5px 30px; } .card-body{ margin-bottom:10px; } .content_fleet_external:hover{ transform: translateY(-5px); box-shadow: 10px 10px 10px; cursor:pointer; } .fleet_content{ height:auto; } .fleet_main{ margin-top: 40px; margin-left: 2%; width:96%; } .fleet_content_main{ margin-left:10px; height:24vh; } .fleet_content_graph{ margin-left:10px; height:24vh; } .fleet_content_graph_inner{ height:20vh; } .fleet_img_content{ width=170px; height:170px; margin-left:30px; margin-top:10px; } .fleet_other_info{ height:14vh; margin-left:10px; margin-bottom:10px; } .o_action_manager { overflow: auto !important; } .oh_dashboards{ overflow-y: scroll; -moz-overflow-y: scroll; -webkit-overflow-y: scroll; -ms-overflow-y: scroll; -o-overflow-y: scroll; vertical-align: middle; overflow-x: clip; max-height: -webkit-fill-available; background-color:#FFF; } #table_status { width: 80%; margin-left: 49px; margin-top: 30px; font-family: Arial, Helvetica, sans-serif; } #table_status tr:nth-child(even){background-color: #f2f2f2;} #table_status tr:hover {background-color: #ddd;} .fleet-pill { align-items: center; font-family: "Open Sans", Arial, Verdana, sans-serif; font-weight: bold; font-size: 11px; display: inline-block; height: 100%; white-space: nowrap; width: auto; position: relative; border-radius: 100px; line-height: 1; overflow: hidden; padding: 0px 8px 0px 7px; text-overflow: ellipsis; line-height: 1.25rem; color: #fff; word-break: break-word; background: #0253e8; } .fleet_content_titles { text-align: center; margin-top: 74px; margin-left: -18px; } .align_center{ text-align:center; } .fleet_container { padding: 50px 0; text-align: center; } .chart { position: relative; display: inline-block; color: #999; font-size: 20px; text-align: center; margin-top: -43px; margin-left:-4px; } .chart figcaption { padding: 50px 25px; width: 190px; height: 190px; border: 20px solid #f0e4eb; border-radius: 100px; line-height: 50px; } .chart img { position: absolute; max-width: 100px; max-height: 100px; background: white; } .img_ext { top: 50px; left: 45px; } .chart svg { position: absolute; top: 0; left: 0; } .outer { fill: transparent; stroke: #333; stroke-width: 20; stroke-dasharray: 534; transition: stroke-dashoffset 2s; -webkit-animation-play-state: running; /* firefox bug fix - won't rotate at 90deg angles */ -moz-transform: rotate(-89deg) translateX(-190px); } .chart:hover .outer { stroke-dashoffset: 534 !important; -webkit-animation-play-state: paused; } /* END Circle colors and graphic positions */ .chart[data-percent='75'] .outer { stroke-dashoffset: 133; -webkit-animation: show75 3s; animation: show75 3s; } .fleet_icon-div{ font-size:25px; color:#fff; background-color:#ffac00; height:14vh; } .fleet_icon-content{ height:24vh; font-size:40px; } .fleet_icon-content i{ margin-top:9vh; color:#fff; } .fleet_border-content{ background-color: #fff; border: solid; border-width: 1px; } @-webkit-keyframes show75 { from { stroke-dashoffset: 537; } to { stroke-dashoffset: 134; } } @keyframes show75 { from { stroke-dashoffset: 537; } to { stroke-dashoffset: 124; } } @media (min-width: 1374px) and (max-width: 1873px){ .fleet_content_graph{ width:64% !important; } .fleet_content_main{ width:31.5% !important; } .fleet_img_content{ margin-left:0px; } } @media (min-width: 1024px) and (max-width: 1374px){ .fleet_content_graph{ width:64% !important; } .fleet_content_main{ width:31.5% !important; } .fleet_img_content{ width:96%; margin-left:0px; height:auto !important; } .card-body:first-child{ display:flex; align-items:center; max-width:110px; } }