@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); html { scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; font-size: 16px; padding-top: 65px !important; background-color: #f1f1f1 !important; } body.offline-body { padding-top: 100px !important; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select.form-control { font-size: 16px; height: 48px; border-radius: 0px; } input[type=number], input[type=time] { -webkit-appearance: none; } textarea, .textarea { min-height: 120px; font-size: 16px !important; border-radius: 0px !important; padding: 10px 15px !important; } .form-control { width: 100% !important; } p { margin: 0 0 10px; } label { font-weight: 600; } hr { border-top: 1px solid #e2e2e2; } section { padding-top: 55px; padding-bottom: 55px; } .hidden-label { display: block; height: 0px; opacity: 0; margin: 0; padding: 0; } .title { font-size: 18px; font-weight: 700; margin-top: 25px; } .clearfix { clear: both; } .no-padd-top { padding-top: 0; } .no-padd-bot { padding-bottom: 0; } .padd-top-20 { padding-top: 20px; } .padd-top-40 { padding-top: 40px; } .padd-bot-20 { padding-bottom: 20px; } .padd-bot-40 { padding-bottom: 40px; } .no-padding { padding: 0; } .mtop-1 { margin-top: 10px; } .mtop-2 { margin-top: 20px !important; } .mtop-3 { margin-top: 30px; } .mtop-4 { margin-top: 40px !important; } .mtop-5 { margin-top: 50px !important; } .mtop-6 { margin-top: 60px !important; } .mbot-1 { margin-bottom: 10px; } .mbot-2 { margin-bottom: 20px; } .mbot-3 { margin-bottom: 30px; } .mbot-4 { margin-bottom: 40px; } .mbot-5 { margin-bottom: 50px; } .mbot-5 { margin-bottom: 60px; } .btn-primary { color: #fff !important; font-size: 15px !important; font-weight: 600 !important; text-transform: uppercase !important; padding: 15px 30px !important; border-radius: 4px !important; margin-top: 15px !important; border: 2px solid #E52520 !important; background-color: #E52520 !important; border-radius: 30px !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #000 !important; background-color: #fff !important; border-color: #E52520 !important; -webkit-box-shadow: 1px 5px 6px rgba(33, 33, 33, 0.30); box-shadow: 1px 5px 6px rgba(33, 33, 33, 0.30); } .btn-success, .btn-warning { color: #fff; font-size: 15px; font-weight: 600; padding: 15px 30px; border-radius: 4px; margin-top: 15px; border-radius: 30px; } .btn-warning { border: 2px solid #f39c11; background-color: #f39c11; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: #e67e22; border-color: #e67e22; } .btn-success { color: #fff; background-color: #27ae60; border-color: #27ae60; } .btn-sm { padding: 10px 25px; } .btn-block { display: inline-block; } .navbar { display: none; } #stc-nav-title { font-weight: 600; } nav.navbar>.container-fluid { width: 100%; } #stc-navbar>ul { position: relative; margin-top: 0px; margin-right: 0px; width: 100%; } #stc-navbar ul a { padding: 0; font-size: 18px; margin-left: 0px; } .navbar-default { position: fixed; right: 0; left: 0; z-index: 99990; text-align: center; padding-top: 10px; padding-bottom: 10px; min-height: 65px !important; background-color: #fff; box-shadow: 0px 3px 7px 0px rgba(39, 38, 38, 0.2); } .navbar-default #stc-navbar .navbar-nav>li>a { color: #E52520; } .navbar-default #stc-navbar .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:active { color: #efd300; border-bottom: 0; } .navigation-bar h1 { display: inline-block; font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 0; } #stc-back-nav { opacity: 1; } #stc-back-nav>i.fa { display: initial; font-size: 35px; } .back-btn { position: absolute; left: 20px; top: -12px; color: #E52520; font-size: 28px; } .back-btn:hover, .back-btn:focus, .back-btn:active { color: #efd300; } .navbar-default .navbar-collapse { display: block!important; } .collapse.navbar-collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-nav>li:first-child #stc-back-nav { position: relative; color: #fff !important; padding-left: 18px; margin-top: 0; } .navbar-nav>li:first-child #stc-back-nav:before { position: absolute; color: #fff !important; font-family: 'FontAwesome'; content: '\f104'; font-size: 36px; /*top: -8px;*/ left: 0; height: 45px; text-align: center; width: 45px; padding: 10px 13px 10px 10px; background-color: #E52520; border-radius: 50%; } .navbar-nav>li:first-child #stc-back-nav:hover:before { color: #fff !important; background-color: #efd300; } .navbar-nav>li:last-child #stc-call-dispatch { position: relative; display: inline-block; color: #fff !important; padding-right: 18px; } .navbar-nav>li:last-child #stc-call-dispatch:after { position: absolute; color: #ffffff !important; font-family: 'FontAwesome'; content: '\f095'; font-size: 25px; text-align: center; top: -11px; right: 0px; height: 45px; width: 45px; padding-top: 13px; background-color: #E52520; border-radius: 50%; } .navbar-nav>li:last-child #stc-call-dispatch:hover:after { color: #fff !important; background-color: #efd300; } .navbar-nav>li:first-child { width: 20%; } .navbar-nav>li:nth-child(2) { font-size: 20px; text-transform: uppercase; text-align: center; width: 60%; cursor: context-menu; } .navbar-nav>li:nth-child(2) a { color: #000 !important; cursor: context-menu; margin-top: 12px !important; } .navbar-nav>li:last-child { text-align: right; width: 20%; } .navbar-nav>li:last-child>a { margin-top: 12px !important; } .start-screen .logo { margin-bottom: 20px; } .white-box { border-radius: 8px; padding: 20px 25px; background-color: #fff; box-shadow: 0px 3px 7px 0px rgba(39, 38, 38, 0.2); } .white-box .labels { font-weight: 600; margin-bottom: 2px; } .maps { display: block; padding: 0; border: 0; height: 250px; width: 100%; } .job-box { display: block; cursor: pointer; border-radius: 6px; padding: 12px; margin-bottom: 15px; border: 2px solid #fff; background-color: #fff; box-shadow: 0px 3px 7px 0px rgba(39, 38, 38, 0.2); } .job-box:hover { background-color: #f7f7f7; } .job-box p { line-height: 1.2; margin-bottom: 6px; padding-left: 90px; } .job-box .job-img { float: left; margin-right: 10px; height: 75px; width: 75px; border-radius: 100%; background-color: #e5e5e5; background-size: contain; background-position: center center; } .no-webp .job-box .job-img { background-image: url('../images/misc-5/pending.png'); } .webp .job-box .job-img { background-image: url('../images/misc-5/pending.webp'); } .no-webp .job-box .job-img.dispatched { background-image: url('../images/misc-5/dispatched.png'); } .webp .job-box .job-img.dispatched { background-image: url('../images/misc-5/dispatched.webp'); } .no-webp .job-box .job-img.collected { background-image: url('../images/misc-5/collected.png'); } .webp .job-box .job-img.collected { background-image: url('../images/misc-5/collected.webp'); } .job-box .job-title { font-weight: 400; } .job-box.critical { border: 2px solid #E52520; } .bike-issue { margin-top: 40px; margin-right: -10px; margin-left: -10px; } .bike-issue>div { padding-right: 10px; padding-left: 10px; } .navbar-right { float: right!important; } .start-screen { text-align: center; padding-top: 10vh; } .alert, .ci-message { color: #ffffff; text-align: center; padding: 10px 15px; margin: 15px 15px 10px 15px; border-radius: 5px; box-shadow: 0px 3px 5px 0px rgba(39, 38, 38, 0.2); } .alert-success, .text-success { border-color: #27ae60; background-color: #27ae60; } .alert-danger, .alert-danger { border-color: #e63d2b; background-color: #e63d2b; } .alert-warning, .alert-warning { border-color: #f39c12; background-color: #f39c12; } .alert h4, .ci-message h4 { font-size: 20px; margin-top: 0; } .alert ul li, , .ci-message ul li { text-align: left; } .ci-message .stc-api-errors { margin-bottom: 0; } .cont-label p { font-size: 13px; } .cont-label { width: 25%; } .btn-full { width: 75%; } .stc-thumbnail { background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; background-attachment: scroll; background-repeat: no-repeat; background-position: center; height: 150px; } .modal-header { color: #fff; background-color: #e52520; } .modal-header .close { color: #fff; font-size: 32px; opacity: .8; } .modal-backdrop { z-index: 999991; } .modal { z-index: 999992; } @media screen and (max-width: 1200px) { .cont-label { width: 30%; } .btn-full { width: 70%; } } .btn-full .btn-group { width: 100%; } .btn-full .btn-group>.btn { width: 33.333333%; } .btn-danger { color: #fff; font-weight: 600; background-color: #E52520; border: 2px solid #c1221e; } .content-wrap { padding-top: 30px; } .content-wrap .stc-tabs .stc-tab-content { padding: 20px 10px 0px 10px; border: 1px solid #d9d9d9; background-color: #e2e2e2; } .stc-tabs .nav-tabs>li>a { color: #000; font-size: 15px; font-weight: 600; padding: 15px 20px; text-transform: uppercase; border-radius: 8px 8px 0 0; background-color: #ffffff; } .stc-tabs .nav-tabs li.active a { color: #fff !important; font-size: 15px; padding: 15px 20px; border-radius: 8px 8px 0 0; background-color: #e52520; } section .stc-tabs .nav-tabs>li>a:hover { color: #000 !important; background-color: #efd300; } .nav-tabs, .tabs-below>.nav-tabs, .tabs-left>.nav-tabs, .tabs-right>.nav-tabs { margin-bottom: 0; } .content-wrap .nav-tabs>li { width: 50%; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { color: #000; background-color: #efd300; border-color: #ceb70c; box-shadow: 1px 5px 6px rgba(33, 33, 33, 0.20); } .btn-danger.active, .btn-danger:active, .btn-danger.active:hover, .open>.btn-danger.dropdown-toggle { color: #000 !important; background-color: #efd300 !important; border-color: #ceb70c !important; box-shadow: 1px 5px 6px rgba(33, 33, 33, 0.20); } .btn.btn-danger { padding: 15px 10px; text-transform: uppercase; } .search-box, .form-group { position: relative; } .search-box:after { position: absolute; color: #E52520 !important; font-family: 'FontAwesome'; content: '\f002'; font-size: 23px; top: 6px; right: 10px; } .loader { position: absolute; left: 50.5%; margin-left: -50px; top: 50%; margin-top: -50px; border: 12px solid #f3f3f3; border-top: 12px solid #E52520; border-radius: 50%; width: 80px; height: 80px; animation: spin 1.2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-container { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999993; background-color: #fff; -moz-opacity: 0.95; opacity: 0.95; filter: alpha(opacity=95); } .page-off { text-align: center; padding-top: 20vh; } #connection { position: fixed; width: 100%; z-index: 99990; margin-top: -35px; padding: 3px 10px; border-radius: 0; margin: 0px 0px 10px 0px; } .offline-body #connection { margin-top: -35px; } #notification { display: none; cursor: pointer; } #notification.show, #connection.show { display: initial; } .modal-dialog { margin: 80px 10px !important; } #stc-take-break-form .strow, .stc-custom-form .strow { display: none; } #stc-take-break-form .strow~.strow { display: block; } #stc-job-form .form-group { display: none; } #stc-job-form .form-group.active { display: block !important; } #stc-back-nav { visibility: hidden; } #stc-back-nav.display { visibility: visible; } #stc-ci-message p { margin: 0; } .stc-img-con { position: relative; } #stc-take-break-section .job-box { cursor: default; } .stc-img-con .stc-img-rm { position: absolute; color: #fff; top: -10px; right: 0px; padding: 4px 10px; background: #E52520; border-radius: 50%; box-shadow: 0 1px 1px #000; } .stc-bikes h2 { font-size: 18px; } @media (min-width: 768px) { .modal-dialog { margin: 80px auto !important; } } @media screen and (max-width: 1199px) { .content-wrap .container>.row>div:first-child, .content-wrap .container>.row>div:last-child, .start-screen .container>.row>div:first-child, .start-screen .container>.row>div:last-child { width: 10%; } .content-wrap .container>.row>div:nth-child(2), .start-screen .container>.row>div:nth-child(2) { width: 80%; } } @media screen and (max-width: 991px) { .content-wrap .container>.row>div:first-child, .content-wrap .container>.row>div:last-child, .start-screen .container>.row>div:first-child, .start-screen .container>.row>div:last-child { width: 0%; } .content-wrap .container>.row>div:nth-child(2), .start-screen .container>.row>div:nth-child(2) { width: 100%; } } @media screen and (max-width: 767px) { #stc-navbar ul a { font-size: 14px; } #stc-navbar #stc-nav-title { font-size: 18px; } .navbar-header { display: none; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; } #stc-navbar>ul { margin: 0; } .navbar-nav>li:last-child #stc-call-dispatch:after { top: -12px; } .start-screen { padding-top: 6vh; } } @media screen and (max-width: 550px) { #stc-navbar ul a { font-size: 8px; } #stc-navbar #stc-nav-title { font-size: 16px; } .navbar-nav>li:last-child #stc-call-dispatch:after { right: -5px; } .content-wrap { padding-top: 20px; } .cont-label, .btn-full { width: 100%; } .white-box { padding: 15px; } .bike-issue>div { padding-right: 10px; padding-left: 10px; margin-bottom: 15px; } .job-box p { padding-left: 72px; } .job-box .job-img { height: 60px; width: 60px; } .loader { left: 52.5%; } .content-wrap .stc-tabs .stc-tab-content { padding: 20px 5px 0px 5px; } } @media screen and (max-width: 375px) { #stc-navbar ul a { font-size: 6px; } #stc-navbar #stc-nav-title { font-size: 16px; } .text-danger, .text-success { margin-left: 5px; margin-right: 5px; } .content-wrap .container>.row>div { padding-right: 5px; padding-left: 5px; } .btn-full { margin-bottom: 10px; } .btn.btn-danger { padding: 15px 6px; } .btn-full .btn-group>.btn:first-child, .btn-full .btn-group>.btn:nth-child(2) { width: 30%; } .btn-full .btn-group>.btn:nth-child(3) { width: 40%; } .stc-tabs .tab-pane.active { padding: 0px; } .stc-tabs .nav-tabs li.active a { font-size: 14px; padding: 15px; } .stc-tabs .nav-tabs>li>a { font-size: 14px; padding: 15px; } .job-box { padding: 10px; } } .stc-img-con { position: relative; } .stc-img-con .stc-img-rm { position: absolute; color: #fff; top: -10px; right: -5px; padding: 5px 10px; background: #e52520; border-radius: 50%; box-shadow: 0 1px 1px #000; } #stc-take-break-section .job-box { cursor: default; } #stc-rider-notes-container { margin-top: 30px; } #stc-rider-notes { min-height: 100px; max-height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: #f5f5f5; padding: 10px 12px 0px 12px; border: 1px solid #ccd0d2; } #stc-rider-notes .date { font-weight: 600; } #stc-rider-notes .stc-rider-note { margin-bottom: 12px; } #stc-login-form .form-group, #stc-login-form .stformfooter { padding: 0px; }