﻿/* SHIPPING CONNECTIONS THEME STYLES */
body, html {
    background: #F9F9F9;
    margin: 0;
    padding: 0; /*font-size: 16px;*/
    min-height: 100%;
    overflow: auto;
}

body {
    overflow-x: hidden;
}

html {
    position: relative;
}

.text-uppercase {
    text-transform: uppercase;
}

.form-control {
    font-size: 1em;
}

img {
    max-width: 100%;
}

.form-control {
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
    font-size: 15px !important;
}
/* Validation */
i.required, span.required {
    margin-left: 0.25rem;
    color: #dc3545;
    font-style: normal;
    font-size: small;
}

/* Buttons */
.btn {
    font-size: 18px;
}

    .module.module-button.btn-light .btn, .btn.btn-light {
        border: 2px solid #fff !important;
        color: #fff !important;
        background: none !important;
        font-weight: bold;
    }

    .module.module-button.btn-dark .btn, .btn.btn-dark {
        border: 2px solid #000 !important;
        color: #000 !important;
        background: none !important;
        font-weight: bold;
    }

.module.module-button.btn-light .btn.btn-lg, .module.module-button.btn-light .btn.btn-lg {
    font-size: 19px;
}

/* Select2 */
/* Styled to better match Bootstrap. Consider this CSS an addon to the "select2-bootstrap-css" plugin which gets us 90% there. */
.select2-container {
    display: block !important;
}

    .select2-container .select2-choice, .select2-container-multi .select2-choices {
        /*height: 42px;*/
        line-height: normal;
    }

        .select2-container .select2-choice .select2-arrow b {
            background-position-y: 4px;
        }

    .select2-choice > span:first-child, .select2-chosen, .select2-container .select2-choices .select2-search-field input {
        padding: 2px 12px;
    }

/* TOP BAR */
#topBar-SocialIcons a i.fa {
    font-size: 24px;
    padding: 12px 10px;
}

#header {
    display: block;
    line-height: 23px;
}

.navbar {
    margin-bottom: 0px !important;
}

.navbar-brand {
    padding: 0px;
}

    .navbar-brand > img {
        height: 100%;
        padding: 0px;
        width: auto;
    }

.navbar-nav > li > a {
    font-weight: bold;
}

a.navbar-brand {
    display: inline-block;
    height: auto;
}

    a.navbar-brand img {
        display: block;
    }

div.navbar-header {
    text-align: center;
}

/* PAGES */
.page-header {
    margin: 20px !important;
}

.page-sidebar {
    margin: 20px 0;
}

/* FOOTER */
#footer-container {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* FIXED FOOTER*/
#main-footer {
    bottom: 0;
    width: 100%;
}

#bottomBar {
    padding: 10px 0 0;
    background-color: #f5f5f5;
}

.container .text-muted {
    margin: 20px 0;
}

/* BOTTOM BAR */
#bottomBar-SocialIcons a i.fa {
    padding: 0 10px;
}

/* Sliding Panel */
html.aside-open, html.aside-open body {
    overflow: hidden;
}

    html.aside-open body {
        position: absolute;
        width: 100%;
    }

    html.aside-open #header {
        z-index: auto;
    }

#panel-aside-bg {
    display: none;
    background: #000;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
}

#panel-aside {
    border: none;
    border-radius: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    display: none;
    width: 100%;
    right: 0;
    height: 100%;
    margin: 0;
}

html.aside-open #panel-aside {
    -webkit-box-shadow: -2px 0 10px 1px rgba(0,0,0,0.3);
    box-shadow: -2px 0 10px 1px rgba(0,0,0,0.3);
}

    html.aside-open #panel-aside.show-aside {
        -webkit-box-shadow: none;
        box-shadow: none;
        animation-duration: 0.3s;
        animation-fill-mode: both;
        animation-name: slideInRight;
    }

    html.aside-open #panel-aside.hide-aside {
        -webkit-box-shadow: none;
        box-shadow: none;
        animation-duration: 0.3s;
        animation-fill-mode: both;
        animation-name: slideOutRight;
    }

#panel-aside > div.panel-body {
    overflow-y: auto;
    position: relative;
}

#panel-aside > div.panel-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: none;
    border: 0;
    text-align: right;
    padding: 15px;
}

    #panel-aside > div.panel-footer:empty {
        display: none;
    }

#panel-aside > div.panel-heading {
    border-radius: 0;
    background-color: #505050;
    border-color: #505050;
    color: #fff;
    font-size: 1.2em;
    font-weight: 300;
}

    #panel-aside > div.panel-heading .aside-close {
        float: right;
        padding: 15px;
        margin: -15px;
    }

        #panel-aside > div.panel-heading .aside-close svg {
            color: #fff;
            fill: #fff;
            opacity: 0.7;
            display: block;
            cursor: pointer;
            margin: 0;
            height: 1.2em;
            width: 1.2em;
        }

        #panel-aside > div.panel-heading .aside-close:hover {
            background: #0c8eb8;
        }

            #panel-aside > div.panel-heading .aside-close:hover svg {
                opacity: 1;
            }

#panel-aside .fixed-panel-footer {
    margin: 0 -15px;
    background: #fff;
    border-top: 2px solid #ddd;
    background: #efefef;
    padding: 10px 15px;
}

ul.block-list-menu {
    list-style: none;
}

.sc-phone-header {
    font-size: 24px;
    padding: 15px;
}

    .sc-phone-header a, .sc-phone-header a:hover {
        color: #000;
        text-decoration: none;
    }

.btn-sc-request-quote {
    border: 2px solid #262627 !important;
    color: #262627 !important;
    text-transform: uppercase;
    margin-top: 10px;
}

.btn-sc-white {
    border: 2px solid #fff !important;
    color: #fff !important;
    background: none !important;
    text-transform: uppercase;
}

@media only screen and (min-width : 768px) {
    .sc-phone-header {
        top: 15px;
        position: absolute;
        right: 15px;
        font-size: 24px;
        z-index: 999;
    }

    .btn-sc-request-quote {
        border: 2px solid #262627 !important;
        color: #262627 !important;
        text-transform: uppercase;
        margin-top: 10px;
    }
}

@media only screen and (min-width : 992px) {
}

@media only screen and (min-width : 1200px) {
}

/* Contact Forms*/
.contact-form-cta {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 30px;
    font-family: "Pragati Narrow", sans-serif !important;
    color: #262727;
    font-weight: 500;
}

.contact-form-section {
   /* margin-bottom: 2rem;*/
}

.contact-h2 {
    margin-bottom: 0.25rem;
    margin-top: 0;
    border-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #a6881a;
    border: 0;
}

.contact-h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #8d8d8d;
    text-transform: uppercase;
    border: 0;
}

.contact-h3-2 {
    margin-top: 0;
    border-bottom: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #000;
}

legend.contact-h3 {
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.form-buttons {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Validation Alert */
.validation-error-alert i.fa {
    margin-right: 0.5rem;
}

.validation-error-alert ul {
    padding-left: 0;
    margin-top: 0.5rem;
    list-style-position: inside;
}

/* Carrier Setup 
After upgrading to Bootstrap 4+, change the equipment row to reflect the flex changes... */
.asterisk-note {
    font-size: 1rem;
}

.carrier-loademail-alert {
    background: #d4af42;
    display: inline-block;
    padding: 1rem;
    border-radius: 0.25rem;
}

    .carrier-loademail-alert label.control-label {
        display: none;
    }

.carrier-fastpay-alert ol li {
    font-size: 0.9rem;
}

p.terms-revision {
    font-size: 0.85rem;
    display: block;
    text-align: center;
}

.document-upload-dropzone, .document-upload-dropzone .media-upload {
    border-radius: 0.25rem;
}

    .document-upload-dropzone.uploader-drop-zone.drop span.uploader-drop-zone-text {
        font-size: 1.5rem;
    }

.btn-uploader.ladda-button .ladda-progress {
    background: #d4af28 !important;
}

.tc-underline:after {
    height: 2px;
    width: 100%;
    background: #000;
    bottom: 3px;
    left: 0;
    position: absolute;
    content: "";
}

.tc-underline {
    position: relative;
    padding: 0 0.3rem;
    display: inline-block;
}

i.carrier-error-icon {
    margin-right: 0.25rem;
}

.col-equipment > fieldset {
    margin-top: 1rem;
}

.col-equipment.equipment-overflow fieldset {
    margin-top: 0;
}

.col-equipment.equipment-overflow legend {
    display: none;
    visibility: hidden;
}

.carrier-equipment-checkboxes .checkbox-over {
    margin-top: 0;
    margin-right: 0.75rem;
    display: block;
}

.carrier-equipment-checkboxes .checkbox {
    margin: 0;
}

    .carrier-equipment-checkboxes .checkbox label {
        line-height: 1;
    }

.carrier-equipment-checkboxes legend {
    border-bottom: 0;
    margin: 0;
    font-weight: 600;
}

.equipment-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-equipment {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media only screen and (min-width : 576px) {
    .col-equipment {
        flex: 0 0 33.3%;
        max-width: 33.3%;
    }

        .col-equipment.equipment-overflow legend {
            display: block;
        }

        .col-equipment.equipment-overflow fieldset {
            margin-top: 1rem;
        }
}

@media only screen and (min-width : 768px) {
    .col-equipment {
        flex: 0 0 33.3%;
        max-width: 33.3%;
    }
}

@media only screen and (min-width : 992px) {
    .col-equipment {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

#Module-2220, #Module-2221 {
    text-align: center;
    padding: 1.5rem 1rem 0rem 1rem;
}

#Alert-DD #alert-txt {
    font-size: 1rem !important;
}


@media print {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-1 {
        width: 8.33333333%;
    }

    html, body {
        font-size: 16px;
    }

    .loadprint-sm {
        font-size: 10px;
    }

    .loadprint-md {
        font-size: 13px;
    }

    .contact-form-section {
        margin-bottom: 0;
    }

    .hide-print, .fixed-footer-hr, .footer, .header, .sc-phone-header {
        display: none;
    }

    .sc-phone-header {
        display: none;
    }
}

/* Print Styles */
div.print-break {
    display: none;
}

@media print {
    div.print-break {
        page-break-before: always !important;
        width: 100%;
        display: block;
        position: relative;
    }

    .col-print-12 {
        width: 100% !important;
        float: left !important;
    }

    .col-print-11 {
        width: 91.6667% !important;
        float: left !important;
    }

    .col-print-10 {
        width: 83.3333% !important;
        float: left !important;
    }

    .col-print-9 {
        width: 75% !important;
        float: left !important;
    }

    .col-print-8 {
        width: 66.6667% !important;
        float: left !important;
    }

    .col-print-7 {
        width: 58.3333% !important;
        float: left !important;
    }

    .col-print-6 {
        width: 50% !important;
        float: left !important;
    }

    .col-print-5 {
        width: 41.6667% !important;
        float: left !important;
    }

    .col-print-4 {
        width: 33.3333% !important;
        float: left !important;
    }

    .col-print-3 {
        width: 25% !important;
        float: left !important;
    }

    .col-print-2 {
        width: 16.6667% !important;
        float: left !important;
    }

    .col-print-1 {
        width: 8.33333% !important;
        float: left !important;
    }
}
