#wrapper.Index header.bg-blur {
    background-color: #F8FAFB;
    background-image: none;
    border: 0 !important;
}

#wrapper.Index header nav.navbar * {
    color: #00135B;
}

.custom-job section {
    padding: 7%;
    padding-top: 4%;
    background-color: #F5F5F5;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
}

.custom-job .section-header {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: calc(3rem + 10px);
    /* identical to box height */
    letter-spacing: -0.01em;
    color: #00135B;
    margin-bottom: .5em;
    text-align: center;
}

.custom-job .help-text {
    text-align: center;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    /* identical to box height */
    /* Foundation /Dark Blue/dark blue-200 */
    color: #8A8DA6;
}

.custom-job button.btn-started {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
}

#custom-job-form .select2-selection {
    height: auto;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid #B0B2C3;
    border-radius: 8px;
    line-height: 1.5;
    color: #B0B2C3;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: 17px 30px;
}

#custom-job-form .total-amount {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.01em;
    color: #01083E;
    text-align: left;
}

#custom-job-form .delivery-date {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.01em;
    color: #01083E;
    text-align: left;
}

#custom-job-form .job-price {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 16px 32px;
    justify-content: space-around;
    flex-direction: row;
    display: flex;
}

.custom-job #custom-job-form .job-price {
    border: 1px solid #B0B2C3;
    background-color: #F5F5F5;
}

#custom-job-form .fast-track {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 144.5%;
    color: #555A7E;
}

#custom-job-form .unit-count-label {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    text-transform: capitalize;
    color: #01083E;
    line-height: normal;
}

#custom-job-form .separator {
    border: 1px solid #B0B2C3;
}

#custom-job-form .dropzone {
    border: 1px solid #B0B2C3;
    border-radius: 8px;
    background-color: #F5F5F5;
    min-height: auto;
    padding: 2%;
}

#custom-job-form .dropzone .dz-message,
#custom-job-form .dropzone .fallback {
    margin: 4% 7%;
}

#custom-job-form .dropzone-previews .dz-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
}

#custom-job-form .dropzone-previews .dz-details .progress-result {
    flex-grow: 1;
    text-align: end;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

#custom-job-form .dropzone-previews .dz-details .progress-result .progress {
    flex-grow: 1;
    margin: auto;
}

#custom-job-form .dropzone-previews .dz-details .progress-result .progress .progress-bar {
    height: .5rem;
}

#custom-job-form .dropzone-previews .dz-details .dz-filename {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
}

#custom-job-form .dropzone-previews .dz-preview {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(229, 229, 229, 0.5);
}

#custom-job-form .dropzone-previews .dz-preview .dz-error-message {
    display: none;
}

#custom-job-form .dropzone-previews .dz-preview.dz-success .dz-error-message {
    display: none;
}

#custom-job-form .dropzone-previews .dz-preview.dz-success .dz-success-message {
    display: flex;
}

#custom-job-form .dropzone-previews .dz-preview.dz-error .progress {
    visibility: hidden;
}

#custom-job-form .dropzone-previews .dz-preview.dz-error .dz-error-message {
    display: flex;
}

#custom-job-form .dropzone-previews .dz-preview.dz-error .dz-success-message {
    display: none;
}

#custom-job-form .box-minmax {
    margin-top: 2px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #B0B2C3;
}

#custom-job-form .box-minmax span:first-child {
    margin-left: 10px;
}

#custom-job-form input[type="range"] {
    font-size: 1rem;
    width: 100%;
}

#custom-job-form input[type="range"] {
    color: #004BF7;
    --thumb-height: 1.125em;
    --track-height: 0.125em;
    --track-color: rgba(0, 0, 0, 0.2);
    --brightness-hover: 180%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}

@media (prefers-color-scheme: dark) {
    #custom-job-form input[type="range"] {
        color: #004BF7;
        --track-color: rgba(255, 255, 255, 0.1);
    }
}

#custom-job-form input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

#custom-job-form input[type="range"]:active {
    cursor: grabbing;
}
/* === WebKit specific styles === */
#custom-job-form input[type="range"],
#custom-job-form input[type="range"]::-webkit-slider-runnable-track,
#custom-job-form input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

#custom-job-form input[type="range"]::-webkit-slider-runnable-track,
#custom-job-form input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

#custom-job-form input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));
    filter: brightness(100%);
    clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
}

#custom-job-form input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

#custom-job-form input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

#custom-job-form input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

#custom-job-form input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
#custom-job-form input[type="range"],
#custom-job-form input[type="range"]::-moz-range-track,
#custom-job-form input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

#custom-job-form input[type="range"]::-moz-range-track,
#custom-job-form input[type="range"]::-moz-range-thumb,
#custom-job-form input[type="range"]::-moz-range-progress {
    background: #fff0;
}

#custom-job-form input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

#custom-job-form input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

#custom-job-form input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

#custom-job-form input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

#custom-job-form input[type="range"]::-moz-range-track,
#custom-job-form input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

#custom-job-form input[type="range"]::-moz-range-thumb,
#custom-job-form input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

#custom-job-form input[type="range"]:hover::-moz-range-thumb,
#custom-job-form input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

#custom-job-form input[type="range"]:active::-moz-range-thumb,
#custom-job-form input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

#custom-job-form input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

.job-designers-options .select2-results__option.select2-results__option--disabled {
    display: none;
}

#custom-job-form .form-check .form-check-label {
    color: #555A7E;
    font-size: 12px;
    line-height: 144.5%;
}

#fast-track-fee .price-container .price-item .currency, #fast-track-fee .price-container .price-item .price {
    color: #555A7E !important;
    font-size: 12px !important;
    line-height: 144.5% !important;
    font-weight: 500 !important;
}

#hiring-fee .price-container .price-item .currency, #hiring-fee .price-container .price-item .price {
    color: #555A7E !important;
    font-size: 14px !important;
    line-height: 144.5% !important;
    font-weight: 600 !important;
}

#custom-job-form .job-title {
    border-radius: 8px;
    border: 1px solid #B0B2C3;
    background-color: transparent;
}

@media (max-width: 767px) {
    #custom-job-form .job-uploader {
        margin-top: 12px;
    }
}

#custom-job-form .job-type {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: .5rem;
}

#custom-job-form .job-type .job-type-label {
    flex-basis: auto;
}

#custom-job-form .job-type label.btn {
    padding: 13.621px 24.215px;
    justify-content: center;
    align-items: center;
    gap: 6.054px;
    border-radius: 12.108px;
    background-color: #f0f0f7;
    margin: 0;
}

#custom-job-form .job-type label.btn:hover {
    background-color: #B0B2C3
}

#custom-job-form .job-type label.btn:checked {
    background-color: blue
}

#custom-job-form .job-type-radio {
    position: absolute;
    left: -9999em;
    /*top: -9999em;*/
}

#custom-job-form .job-type-radio + label.btn {
    float: left;
    padding: 0.5em 0.7em;
    cursor: pointer;
    border: 0;
    margin-right: -1px;
    color: #5e5d63;
    background-color: #e7e7ef;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 121%;
    letter-spacing: -0.21px;
    border-radius: 0;
}

#custom-job-form .job-type-radio:disabled + label.btn {
    color: #9a999e;
    background-color: #e6e6ec;
    cursor: not-allowed;
    pointer-events: none;
}

#custom-job-form .job-type-radio:checked + label.btn {
    background-color: #004bf7;
    color: #fff;
    cursor: default;
}

#custom-job-form .job-type-radio + label.btn {
    border-radius: 12.108px;
}

@media (min-width: 768px) {
    #custom-job-form .job-type {
        clear: both;
        display: inline-block;
    }

    #custom-job-form .job-type-radio + label.btn {
        border-radius: unset;
    }

    #custom-job-form .job-type-radio:first-of-type + label.btn {
        border-top-left-radius: 12.108px;
        border-bottom-left-radius: 12.108px;
    }

    #custom-job-form .job-type-radio:last-of-type + label.btn {
        border-top-right-radius: 12.108px;
        border-bottom-right-radius: 12.108px;
    }
}

@media (min-width:481px) and (max-width: 581px) {
    #custom-job-form .job-type-radio + label.btn {
        font-size: 12px;
    }
}

#custom-job-form .card, #post-job-form .card {
    border: 0;
    border-radius: 8px;
}

#custom-job-form .form-control, #post-job-form .form-control {
    color: #6e6969;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    background-color: transparent;
}

#post-job-form .select2-container--bootstrap-5 .select2-selection {
    font-size: 14px;
    color: #6e6969;
    font-weight: 500;
}

#post-job-form .select2-selection--multiple:not(.select2-selection--clearable):before {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

#post-job-form .form-control + .select2.select2-container.select2-container--bootstrap-5 > .selection > .select2-selection {
    height: auto;
    padding: 17px 13px;
}

#post-job-form .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: #01062C;
    font-size: 0.875rem;
    color: #fff;
    font-weight: 400;
    font-style: normal;
    border-radius: 1.313rem;
    line-height: 18px; /* 128.571% */
}

#post-job-form .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.6rem auto no-repeat;
}

#post-job-form .form-select {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    font-style: normal;
    color: #6e6969;
}

#post-job-form .input-group > .input-group-text:first-child {
    flex-basis: 45px;
}

@media(max-width: 518px) {

    #custom-job-form .job-type-radio + label.btn {
        padding: 0.3em 0.5em;
        font-size: 11px;
        line-height: 20.45px;
    }
}
@media (min-width: 384px) and (max-width: 414px) {
    #custom-job-form .job-type-radio + label.btn {
        padding: 0.3em 0.8em;
    }
}