.form {
    font-family: var(--bs-body-font-family);
    font-size: 15px;
    margin-bottom: 20px
}

    .form input:not([type="hidden"]):not([type="submit"]):not([type="radio"]):not([type="file"]):not([type="checkbox"]), .form select, .form textarea, .form .SlectBox {
        width: 100%;
        display: block;
        font-size: 15px;
        padding: 10px 5px;
        line-height: 1;
        border-radius: 6px
    }

    .form label {
        display: block
    }

    .form select, .form .SlectBox, .form textarea, .form input:not([type="hidden"]):not([type="submit"]):not([type="radio"]):not([type="file"]):not([type="checkbox"]) {
        border: 1px solid #d8d8d8;
        min-height: 44px;
        padding: 10px
    }

    .form textarea, .form input:not([type="hidden"]):not([type="submit"]):not([type="radio"]):not([type="file"]):not([type="checkbox"]) {
        background-color: #f9f9f9
    }

    .form .SumoSelect {
        width: 100%
    }

    .form .SlectBox {
        width: 100%;
        background: #fbfbfb;
        background: -moz-linear-gradient(top,#fbfbfb 0%,#e4e4e4 100%);
        background: -webkit-linear-gradient(top,#fbfbfb 0%,#e4e4e4 100%);
        background: linear-gradient(to bottom,#fbfbfb 0%,#e4e4e4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb',endColorstr='#e4e4e4',GradientType=0)
    }

    .form .SumoSelect > .CaptionCont > label > i {
        opacity: .3
    }

    .form input[type="radio"] + span, .form input[type="checkbox"] + span {
        margin: 0 1em 0 .5em;
        vertical-align: middle;
        display: inline;
        line-height: 1.2
    }

    .form .field-wrap {
        margin-bottom: 20px
    }

    .form * {
        font-family: Arial,sans-serif
    }

    .form textarea {
        resize: vertical
    }

    .form h3.heading {
        color: #ec5123 !important;
        font-family: "United Sans",sans-serif;
        font-size: 23px !important;
        font-weight: 400 !important;
        margin-bottom: .5em !important
    }

        .form h3.heading:before, .form h3.heading:after {
            content: " ";
            display: table
        }

        .form h3.heading:after {
            clear: both
        }

        .form h3.heading:before, .form h3.heading:after {
            content: " ";
            display: table
        }

        .form h3.heading:after {
            clear: both
        }

        .form h3.heading i {
            display: block;
            font-size: 15px;
            color: #000;
            font-family: Arial,sans-serif
        }

    .form td label {
        display: inline;
        padding-left: 3px
    }

@media(min-width:768px) {
    .form h3.heading i {
        float: right;
        display: inline
    }
}

.form fieldset.bordered {
    padding: 0
}

@media(min-width:768px) {
    .form fieldset.bordered {
        background-color: #fbfbfb;
        border: 1px solid #dfdfdf;
        padding: 20px;
        border-radius: 4px
    }
}


.cs-select {
    border: 1px solid #e5e5e5;
    border-bottom: none;
    background-color: #fbfbfb;
    padding: 20px 20px 40px
}

    .cs-select .cs-select-list {
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 15px
    }

        .cs-select .cs-select-list .cs-select-item {
            display: inline-block;
            float: left;
            width: 33.33333333%;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 20px;
            position: relative
        }

@media(min-width:768px) {
    .cs-select .cs-select-list .cs-select-item {
        float: left;
        width: 25%
    }
}

@media(min-width:768px) {
    .cs-select .cs-select-list .cs-select-item:nth-child(4n+1) {
        clear: both
    }
}

@media(max-width:767px) and (min-width:571px) {
    .cs-select .cs-select-list .cs-select-item:nth-child(3n+1) {
        clear: both
    }
}

@media(max-width:570px) {
    .cs-select .cs-select-list .cs-select-item {
        width: 50%
    }

        .cs-select .cs-select-list .cs-select-item:nth-child(odd) {
            clear: both
        }
}

.cs-select .checkbox-wrap {
    position: absolute;
    left: 15px
}

    .cs-select .checkbox-wrap .custom-check {
        margin-right: 13px;
        height: 21px;
        width: 21px;
        line-height: 21px;
        font-size: 14px;
        padding-left: 2px;
        border-radius: 4px;
        vertical-align: middle
    }

        .cs-select .checkbox-wrap .custom-check.orange {
            background: #fff;
            background: -moz-linear-gradient(-45deg,#fff 0%,#dedede 100%);
            background: -webkit-linear-gradient(-45deg,#fff 0%,#dedede 100%);
            background: linear-gradient(135deg,#fff 0%,#dedede 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dedede',GradientType=1);
            border: 1px solid #c9c9c9;
            box-shadow: -1px -1px 2px #fff inset
        }

            .cs-select .checkbox-wrap .custom-check.orange.checked {
                background: #ec5123;
                border: none;
                box-shadow: none
            }

    .cs-select .checkbox-wrap input[type="radio"], input[type="checkbox"] {
        height: 20px;
        width: 20px;
        margin: 0
    }

.cs-select .checkbox-label {
    color: #ec5123;
    font-family: Arial,sans-serif;
    font-size: 15px;
    line-height: 21px;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    padding-left: 44px
}

.cs-select .btn {
    padding-left: 35px;
    padding-right: 35px
}


#distributor-map-large {
    max-width: 100%;
    height: auto;
}

.distributor-map a.worldwide {
    color: var(--primary-color);
    text-decoration: underline;
    text-align: center;
    display: block;
    margin: 1em 0
}

    .distributor-map a.worldwide:hover, .distributor-map a.worldwide:focus {
        text-decoration: none
    }

.distributor-map.mobile .map {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto
}

.map-tooltip {
    border: 1px solid #878787 !important;
    background-color: #fff !important;
    color: #000 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(0,0,0,.5) !important;
    font-size: 13px !important;
    padding: 18px !important;
    overflow: visible !important
}

    .map-tooltip .qtip-titlebar {
        border: none !important;
        background-color: #fff !important;
        padding: 0 !important;
        font-size: 15px !important;
        overflow: visible !important
    }

        .map-tooltip .qtip-titlebar:before {
            position: absolute;
            border-right: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            content: "";
            display: block;
            top: 35px;
            left: -27px;
            z-index: 9999
        }

        .map-tooltip .qtip-titlebar:after {
            position: absolute;
            border-right: 10px solid #878787;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            content: "";
            display: block;
            top: 35px;
            left: -28px;
            z-index: 99
        }

    .map-tooltip * {
        line-height: 1.2
    }

    .map-tooltip a {
        color: #ec5123;
        text-decoration: underline
    }

        .map-tooltip a:hover, .map-tooltip a:focus {
            text-decoration: none
        }

    .map-tooltip .qtip-content {
        padding: 0
    }

        .map-tooltip .qtip-content h6 {
            display: none
        }

ul.map-state-list {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    list-style: none
}

@media(max-width:767px) {
    ul.map-state-list {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px)
    }
}

ul#distributor-list {
    display: block !important
}

ul#distributor-list {
    display: none
}

ul#distributor-list {
    margin: 0;
    padding: 0;
    list-style: none
}

    ul#distributor-list li {
        font-size: 15px;
        padding: 20px;
        line-height: 1.2
    }

        ul#distributor-list li:nth-child(even) {
            background-color: #f1f1f1
        }

        ul#distributor-list li h6 {
            font-family: "United Sans",sans-serif;
            font-size: 16px;
            margin: 0 0 .25em;
            font-weight: 400
        }

    ul#distributor-list a {
        color: #ec5123;
        text-decoration: underline
    }

        ul#distributor-list a:hover, ul#distributor-list a:focus {
            text-decoration: none
        }

.state-select .SumoSelect {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 15px
}

.state-select .SlectBox {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
    font-weight: normal !important;
    text-align: center !important;
    vertical-align: middle !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    border-radius: 4px !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    display: inline-block !important;
    box-shadow: 0 8px 0 #808080 !important;
    color: #fff !important;
    font-family: "United Sans",sans-serif !important;
    font-weight: 300 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    padding: 12px 20px 7px !important;
    text-decoration: none !important;
    border: none !important;
    -webkit-transition: .15s linear !important;
    -moz-transition: .15s linear !important;
    -o-transition: .15s linear !important;
    -ms-transition: .15s linear !important;
    transition: .15s linear !important;
    background: var(--primary-color) !important;
    box-shadow: 0 8px 0 hsl(from var(--primary-color) h s calc(l - 12)) !important
}

    .state-select .SlectBox:focus, .state-select .SlectBox:active:focus, .state-select .SlectBox.active:focus, .state-select .SlectBox.focus, .state-select .SlectBox:active.focus, .state-select .SlectBox.active.focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px
    }

    .state-select .SlectBox:hover, .state-select .SlectBox:focus, .state-select .SlectBox.focus {
        color: #333;
        text-decoration: none
    }

    .state-select .SlectBox:active, .state-select .SlectBox.active {
        outline: 0;
    }

    .state-select .SlectBox.disabled, .state-select .SlectBox[disabled], fieldset[disabled] .state-select .SlectBox {
        cursor: not-allowed;
        pointer-events: none;
        opacity: .65;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .state-select .SlectBox:hover, .state-select .SlectBox:focus {
        background: hsl(from var(--primary-color) h s calc(l - 5));
    }

    .state-select .SlectBox > label {
        top: 45%
    }

        .state-select .SlectBox > label > i {
            background: url(https://www.echo-usa.com/images/arrow-white-down.png) no-repeat 0 0 transparent;
            position: relative;
            opacity: 1;
            top: 0;
            right: 8px;
            width: 10px;
            height: 9px
        }

#distributor-network-page h1 + p {
    font-weight: 400;
    line-height: 1.2
}

@media(min-width:768px) {
    #distributor-network-page h1 + p {
        font-size: 18px
    }
}


.form-group-type-2 {
    margin-bottom: 26px
}

    .form-group-type-2 label {
        font-size: 14px
    }

        .form-group-type-2 label a {
            color: #ec5123;
            text-decoration: underline;
            font-weight: 400
        }

        .form-group-type-2 label span {
            color: #ec5123
        }

    .form-group-type-2 .form-control {
        height: 48px;
        border-radius: 7px;
        box-shadow: none;
        background: #fbfbfb;
        background: -moz-linear-gradient(top,#fbfbfb 0%,#f7f7f7 100%);
        background: -webkit-gradient(left top,left bottom,color-stop(0%,#fbfbfb),color-stop(100%,#f7f7f7));
        background: -webkit-linear-gradient(top,#fbfbfb 0%,#f7f7f7 100%);
        background: -o-linear-gradient(top,#fbfbfb 0%,#f7f7f7 100%);
        background: -ms-linear-gradient(top,#fbfbfb 0%,#f7f7f7 100%);
        background: linear-gradient(to bottom,#fbfbfb 0%,#f7f7f7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb',endColorstr='#f7f7f7',GradientType=0)
    }

        .form-group-type-2 .form-control + .form-control {
            margin-top: 22px
        }

    .form-group-type-2 .radio-button-type-1 {
        padding-left: 0;
        padding-right: 0;
        padding-top: 7px
    }

    .form-group-type-2:after {
        display: block;
        clear: both;
        content: ""
    }

.SumoSelect > .CaptionCont > label > i:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    border-top: 9px solid white;
    border-bottom: 9px solid transparent;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent
}

.form-group-type-2 .SlectBox {
    width: 100%;
    display: block;
    font-size: 15px;
    padding: 10px 5px;
    line-height: 1;
    border-radius: 6px !important
}

.form-group-type-2 select, .form-group-type-2 .SlectBox {
    border: 1px solid #d8d8d8 !important;
    min-height: 44px;
    padding: 10px
}

.form-group-type-2 .SumoSelect {
    width: 100%
}

.form-group-type-2 .SlectBox {
    width: 100%;
    background: #fbfbfb;
    background: -moz-linear-gradient(top,#fbfbfb 0%,#e4e4e4 100%);
    background: -webkit-linear-gradient(top,#fbfbfb 0%,#e4e4e4 100%);
    background: linear-gradient(to bottom,#fbfbfb 0%,#e4e4e4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb',endColorstr='#e4e4e4',GradientType=0)
}

.SumoSelect > .SlectBox > label > i {
    background: none !important
}