@media print {
    .print_invisible {
        opacity: 0;
    }

    .print_width {
        width: 100% !important;
        max-width: 100% !important;
    }
}


@media screen and (max-width: 980px) {
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    h1,
    h3 {
        font-size: 5rem;
    }

    h5,
    body,
    h6,
    table th,
    table td,
    .text_input,
    .navbar .dropdown-menu a,
    .navbar .breadcrumb,
    .h4,
    .modal-dialog.modal-notify .heading,
    .delivery_orders_calendar_number_of_orders,
    .dropdown .dropdown-menu .dropdown-item,
    .span_text,
    .tracking_status_span {
        font-size: 2rem !important;
    }

    .btn.btn-sm,
    .btn {
        font-size: 1.5rem;
        padding-right: 1em !important;
        padding-left: 1em !important;
    }

    ul.stepper li a .stepper-circle {
        font-size: 2rem;
        top: -0.5rem;
        left: -0.3rem;
    }

    .stepper-vertical li:not(:last-child):after {
        top: 3.8rem;
    }

    .w-75 {
        width: 70% !important;
    }

    h3,
    .nav_icons_yellow,
    .navbar-toggler,
    .navbar-brand {
        font-size: 3rem !important;
    }

    .w-20,
    .w-95,
    .w-min,
    .w-45 {
        width: 100% !important;
    }

    .w-25 {
        width: 50% !important;
    }

    #packing_tracking_numbers_container {
        text-align: left !important;
    }

    .customer_add_form,
    .customer_label_creation_forms {
        width: 95% !important;
    }

    .switch label .lever {
        width: 7rem;
        height: 2rem;
    }

    .switch label .lever:after {
        width: 3rem;
        height: 3rem;
        top: -.4875rem;
        left: -.6125rem;
    }

    .switch label input[type="checkbox"]:checked + .lever:after {
        left: 4.5rem;
    }

    .login_form_frame {
        width: 93vw !important;
    }

    .gutter.gutter-horizontal {
        flex-basis: 30px !important;
    }

    .custom-control-label::before,
    .custom-control-label::after {
        top: .25rem;
        left: -1.5rem;
        width: 3rem;
        height: 3rem;
    }

    .custom-control-label {
        padding-left: 3rem;
    }

    .close {
        font-size: 4.5rem;
    }

    .form-check-input[type="radio"] + label:before,
    .form-check-input[type="radio"] + label:after {
        position: absolute;
        top: -10px;
        left: -16px;
        z-index: 0;
        width: 36px;
        height: 36px;
        margin: 4px;
        content: "";
        -webkit-transition: 0.28s ease;
        transition: 0.28s ease;
    }

    .delivery_master_route_creator_p {
        width: 18%;
    }

    .btn-group .material-icons,
    .delivery_route_table_nav .material-icons {
        font-size: 60px;
    }

    .mapboxgl-ctrl-group button {
        width: 59px;
        height: 59px;
    }

    .app_nav_links_spans {
        font-size: 1.5rem;
    }

    .delivery_master_route_creator_container {
        min-width: auto;
    }

    .mob_min_content {
        width: min-content;
    }

    div.d-flex {
        display: block !important;
    }

    .btn_select {
        padding: 1em !important;
    }

    div.from_to {
        max-width: 50% !important;
    }

    form.vw-30 {
        width: 100vw;
    }

    #all_routes_map,
    #route_content_container,
    #route_map_driver {
        height: 1500px !important;
    }

    .modal-xl {
        max-width: 95%;
    }
}

.full_size_mapbox,
.full_size_container,
.full_size_mapbox_calendar {
    height: 86vh !important;
}

#route_content_container {
    height: 88vh !important;
}

#all_routes_map,
#route_map_driver,
#route_table_container {
    height: 100%;
}

.delivery_route_table_size,
#home-just,
#profile-just {
    height: 83vh;
}

.switch label input[type="checkbox"]:checked + .lever:after {
    background-color: #FFBB33;
}

.switch label input[type="checkbox"]:checked + .lever {
    background-color: #FFDD99;
}

.inside_table_mapbox > .mapboxgl-canvas-container > .mapboxgl-canvas {
    position: relative;
}

.inside_table_mapbox {
    width: 600px;
    max-width: 45vw;
    min-width: 10vw;
    height: 400px;
    max-height: 30vh;
    min-height: 10vh;
}

.inside_card_mapbox {
    width: 250px;
    height: 300px;
}

.mapbox_inside_table_container {
    white-space: nowrap;
}

.delivery_master_route_creator_p,
.dropdown_max_content {
    width: max-content !important;
}

.vh-88 {
    height: 88vh;
}

.w-20 {
    width: 15vw;
}

.vw-98 {
    width: 100vw;
}

.w-95 {
    width: 95%;
}

.vw-20 {
    width: 20vw;
}

.w-45 {
    width: 45%;
}

.vw-30 {
    width: 32vw;
}

.customer_label_creation_forms,
.admin_label_creation_forms {
    width: 28vw;
    height: max-content;
}

.vw-25 {
    width: 25vw;
}

.vw-93 {
    width: 93vw;
}

body,
.modal-body,
.modal-footer,
.card,
.our_bg {
    background-color: #f8f8f8 !important;
}

h3 {
    font-family: "Rubik Bold", sans-serif;
    color: #0e2f4b;
    font-weight: 700;
    font-size: 2.25rem;
}

h5,
h4,
thead th {
    font-family: "Rubik Bold", sans-serif;
    color: #0e2f4b;
    font-weight: 700 !important;
}

h6 {
    font-family: "Rubik Bold", sans-serif;
    color: #0e2f4b;
    font-weight: 700;
    font-size: 1.1rem;
}

.tracking_status_span,
.delivery_driver_name,
.delivery_route_finish,
.drivers_new_password_span,
.driver_driving_time_spans,
.address_long_lat_spans,
.customer_account_spans,
.add_drivers_spans,
.driver_note_status,
.delivery_calendar_spans,
.time_tracker_spans,
.yellow_text {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    color: #fdc13d;
}

.address_long_lat_spans {
    min-width: 6vw !important;
}

.drivers_new_password_span,
.flex_button {
    flex: 1;
    min-width: max-content;
}

.delivery_route_table_status {
    font-family: "Rubik", sans-serif;
    color: #fdc13d;
}

.shadow_border {
    box-shadow: 0 3px 35px 0 rgba(95, 98, 102, 0.17);
    border-radius: .25rem;
}

.text_input {
    background-color: #fff;
    color: #0e2f4b;
    font-family: "Rubik Regular", sans-serif;
    border: none;
    display: inline-block;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 35px 0 rgba(95, 98, 102, 0.17);
    border-radius: .25rem;
}

ul.stepper li a .stepper-circle {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    color: #fdc13d;
    font-size: 1.5rem;
    margin-right: 1rem;
    position: relative;
    top: -0.5rem;
}

.stepper-vertical li a .label {
    margin-top: 0;
}

.stepper-vertical li:not(:last-child):after {
    background-color: #fdc13d;
}

ul.stepper li a {
    padding: 1.5rem 1.5rem 0 1.5rem;
    text-align: center;
}

.step-content,
.textarea_comment {
    color: #99a2aa;
}

.grey_comment {
    color: #99a2aa;
    font-size: 0.8rem;
    font-weight: bolder;
}

.stepper-vertical li .step-content {
    padding: .4rem .94rem .4rem .94rem;
}

ul.stepper {
    padding: 0;
    margin: 0;
}

.tracking_main_delivery_image {
    width: 95%;
    height: auto;
    margin: 1rem auto;
}

.card_img {
    max-height: 30vh;
    width: auto;
}

.my-custom-scrollbar {
    position: relative;
    overflow: auto;
}

.scroll_form {
    position: relative;
    height: 91vh;
    overflow: auto;
}

.table-wrapper-scroll-y {
    display: block;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #fb3 !important;
    background-color: #fb3 !important;
}

.nav_links_black,
.hover_link,
.hover_link_yellow:hover {
    color: black !important;
}

.nav_icons_yellow,
.hover_link:hover,
.hover_link_yellow {
    color: #fb3 !important;
}

.template_base_logout {
    font-weight: bold;
    color: white;
}

.template_base_logout:hover {
    color: white;
}

.marker-pin:not(.svg_container) {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
}

.marker-pin:not(.svg_container)::after {
    content: '';
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
}

.text_inside_marker:not(svg) {
    position: absolute;
    width: 22px;
    font-size: 14px;
    right: -11px;
    top: -20px;
    margin: 10px auto;
    text-align: center;
}

.driver_marker {
    background-color: #7A7A7A;
}

.flex {
    display: flex;
    flex-direction: row;
}

.gutter.gutter-horizontal {
    cursor: ew-resize;
}

.gutter.gutter-horizontal,
.split {
    float: left;
}

.gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);
}

.gutter {
    background: 50% no-repeat #9ca6b5;
}

.cursor_pointer {
    cursor: pointer;
}

.m-signature-pad--body canvas {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 60vh;
    border: 1px solid #CCCCCC;
}

#app_map {
    height: 30vh;
}

.dropdown-menu {
    z-index: 1100;
}

.btn.btn-danger.w-75,
.btn.btn-warning.w-75 {
    padding: .5rem 1.1rem;
}

.delivery_route_table_nav,
.max_content {
    min-width: max-content !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #fff;
}

.company_prefix_circle {
    width: 6vh;
    height: 6vh;
}

.info_icon_gray {
    color: #ccc;
    background-color: transparent;
}

.flex_2 {
    flex: 2;
}

.flex_1 {
    flex: 1;
}

.flex_7 {
    flex: 7;
}

#delivered_stat {
    max-height: 91vh;
    width: auto;
}

.app_nav_links {
    color: #fff;
}

.driver_note_animation {
    animation: blink 1s linear 1;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

.overflow_scroll {
    overflow: scroll;
}

.h-5rem {
    height: 5rem;
}

.big_arrows {
    font-size: 3rem;
}

.label_creation_link_size {
    width: 20vw;
    height: 30vh;
}

.opacity_33 {
    opacity: 0.5;
}

.widgets_sizing {
    width: 20vw;
    height: 10vw;
}

.customer_label_creation_icons {
    color: #fb3 !important;
    font-size: 4rem;
}

.widgets_icons_yellow {
    color: #fb3 !important;
    font-size: 3rem;
}

.customer_label_creation_spans {
    color: #ccc;
}

.widgets_people_span {
    font-size: 3rem;
}

.yellow_border {
    border: 2px solid #fb3;
}

.newegg-marker.marker-pin {
    background-color: #fb3 !important;
}

.newegg-marker.marker-pin.bg-success {
    background-color: #d400ff !important;
}

.delivery_master_route_creator_container {
    overflow: auto;
    width: min-content;
    min-width: min-content;
}

.w-max {
    width: max-content;
}

.order_search_img {
    width: 25vw;
}

.modal .modal-fluid {
    width: 95%;
    max-width: 95%;
}

.modal_scroll_table {
    height: 80vh
}

.regions_breakdown_map {
    height: 70vh;
}

#region_breakdown_legend {
    height: 45vh;
}

.invert_text {
    font-weight: bold;
    text-shadow: 1px 1px 1px white, -1px -1px 1px white, -1px 1px 1px white, 1px -1px 1px white;
}

.warehouse_icons {
    font-size: 1.2rem;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.info_area {
    width: 100%;
    max-height: 50vh;
}

.delivery_response {
    border-radius: 0 2rem 2rem 2rem;
    max-width: 75%;
}

.princess_response {
    border-radius: 2rem 0 2rem 2rem;
    max-width: 75%;
}

.delivery_block_height {
    height: 89vh;
}

.delivery_map_height {
    height: 80vh;
}

.w-min {
    width: min-content;
}

.json_textarea {
    height: 30vh;
}

.sidebar {
    height: 88vh;
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    box-shadow: 0 3px 35px 0 rgba(95, 98, 102, 0.17);
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #ffbb33;
}

/* The button used to open the sidebar */
.openbtn {
    font-size: 20px;
    cursor: pointer;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #FF8800;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#route_content_container {
    transition: margin-left .5s; /* If you want a transition effect */
}

.stat_table thead th {
    font-size: 0.8rem;
}

.table_icon {
    border: none;
    color: #ffbb33;
    background-color: #ffffff;
    padding: 0;
}

.pin-address-package-quantity {
    color: white;
    font-weight: 600;
    font-size: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -5px;
    right: -3px;
}

.pin-address-package-quantity.big {
    width: 20px;
    height: 20px;
    font-size: 14px;
    top: -9px;
    right: -10px;
}

.company-health-title {
    color: var(--yellow)
}