:root {
    --kabel-bold: "ITCKabelStd-Bold";
    --kabel-book: "Kabel-Book";
    --kabel-medium: "KabelMedium";
    --kabel-heavy: "Kabel-Heavy";
    --kabel-light: "Kabel-Light";
    --itckabel-book: "ITCKabelStd-Book";

    --kabel-bold-2: "ItcKabel-Bold";
    --kabel-book-2: "KabelBook";
    --kabel-medium-2: "ItcKabel-Medium";
    --kabel-heavy-2: "Kabel-Heavy";
    --kabel-light-2: "Kabel-Light";
    --itckabel-book-2: "ItcKabel-Book";

    --lato-light: "Lato-Light";
    --lato-bold: "Lato-Bold";
    --lato-regular: "Lato-Regular";
    --lato-black: "Lato-Black";

    --font-black: var(--lato-black);
    --font-bold: var(--lato-bold);
    --font-regular: var(--lato-regular);
    --font-light: var(--lato-light);

    --navbar-height: 75px;
    --blue-color: #1b3a6a;
    --green-color: #1abbbc;
    --red-color: #d15f6a;
    --yellow-color: rgb(213, 194, 57);
    --blue-rating-color: rgb(44, 180, 232);
    --dark-rating-blue-color: rgb(33, 83, 164);
    --facebook-color: rgb(27, 58, 106);
    --linkedin-color: rgb(0, 119, 181);
    --gray-color: rgb(140,140,140);
    --check-color: rgb(109, 189, 69);
    --border-gray-color: rgb(227, 227, 229);
    --check-gray-color: rgb(208, 210, 211);
    --color-job-footer: rgb(241, 241, 242);
    --color-modal-placeholder: rgb(163, 166, 166);
    --color-modal-placeholder2: rgb(93, 93, 93);
    --color-background-chat: rgba(209, 95, 106, 0.2);
    --color-received-chat: rgb(85, 88, 89);
    --backgroundcolor-received-chat: rgb(195, 197, 197);
    --footer-height: 400px;
}
body {
    overflow-x: hidden;
    /*width: 100vw !important;*/
    font-family: var(--font-regular);
    font-size: 15px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0;
}
button {
    cursor: pointer;
}
::-moz-selection {
    color: #fff;
    background: #006DAF;
}
::selection {
    color: #fff;
    background: #006DAF;
}
p {
    margin: 0;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
a { 
    color: inherit !important;
    text-decoration: none !important; 
}
.ar {
    font-family: "GEDinarOne-Medium";
}
ar {
    font-family: "GEDinarOne-Medium";
}
output { 
    position: absolute;
    font-family: var(--font-heavy);
    font-size: 15px;
    top: 20px;
}
textarea {
    font-size: 14px;
    width: 100%;
    height: 120px;
    background-color: var(--color-job-footer);
    color: var(--color-modal-placeholder);
    border: none;
    padding: 10px;
    resize: none;
}
textarea::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
    color: var(--color-modal-placeholder);
}
textarea::-moz-placeholder /* Firefox 19+ */ {
    color: var(--color-modal-placeholder);
}
textarea:-ms-input-placeholder /* IE 10+ */ {
    color: var(--color-modal-placeholder);
}
textarea:-moz-placeholder /* Firefox 18- */ {
    color: var(--color-modal-placeholder);
}
font-12 {
    /*font-size: 12px;*/
}
select {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance : none;
    padding: 0px 30px 0px 10px !important;
}

select-arrow {
    display: block;
    position: relative;
    cursor: pointer;
}

select-arrow:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f107";
    color: var(--color-modal-placeholder);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
    top: 49%;
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    cursor: pointer;
}
sort-by {
    position: relative;
    display: block;
    text-align: right;
    color: var(--green-color);
    font-size: 18px;
    cursor: pointer;
    right: 25px;
    margin-top: 10px;
}
sort-by > select-arrow:after {
    color: var(--green-color);
    right: -25px;
    font-size: 25px;
}
heavy {
    font-family: var(--font-heavy);
}
bold {
    font-family: var(--font-bold);
}
medium {
    font-family: var(--font-medium);
}
light {
    font-family: var(--font-light);
}
.swal-overlay {
    z-index: 999999999999;
}
.overflowhidden {
    overflow: hidden;
}
.t1 .fa-star, .t1 .fa-star-o {
    color: var(--red-color) !important;
}
.t2 .fa-star, .t2 .fa-star-o {
    color: var(--yellow-color) !important;
}
.t3 .fa-star, .t3 .fa-star-o {
    color: var(--green-color) !important;
}
.t4 .fa-star, .t4 .fa-star-o {
    color: var(--blue-rating-color) !important;
}
.t5 .fa-star, .t5 .fa-star-o {
    color: var(--rating-dark-blue) !important;
}
.red-color {
    color: var(--red-color) !important;
}
.white-color {
    color: white !important;
}
.blue-color {
    color: var(--blue-color) !important;
}
.green-color {
    color: var(--green-color) !important;
}
.p-rest {
    display: none;
}
.read-more {
    cursor: pointer;
}
.relative-x-middle {
    position: relative;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    left: 50%;
}
.relative-y-middle {
    position: relative;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 50%;
}
.relative-xy-middle {
    position: relative;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.absolute-x-middle {
    position: absolute !important;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    left: 50% !important;
}
.absolute-y-middle {
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 50%;
}
.absolute-xy-middle {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
li {
    position: relative;
}
.red-opacity:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--red-color);
    top: 0;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.d-flow-root {
    display: flow-root;
}
.btn {
    border-radius: 10px;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.title, .username {
    font-size: 16px;
    font-family: var(--font-black);
}
.post-color {
    background: #1b3b6a;
}
.post-color-text {
    color: #1b3b6a!important;
}
.pr-50 {
    padding-right: 50px;
}
.pt-50 {
    padding-top: 50px;
}
.height-25 {
    height: 25px !important;
}
.height-50 {
    height: 50px !important;
}
.dropzone .dz-preview {
    margin: 12px !important;
}
.setyear {
    position: absolute;
    top: -2.5em;
    left: 50%;
    width: 60px;
    height: 1em;
    text-align: center;
    color: red;
    font-weight: bold;
    white-space: nowrap;
}
.overflow {
    overflow: hidden;
}
.mt-15 {
    margin-top: 15px;
}
.mt-45 {
    margin-top: 45px;
}
.mt-60 {
    margin-top: 60px;
}
.form-control:focus{    
    box-shadow: none !important;
    border-color: #024f9e;
}
.minimize {
    color: white;
    font-size: 35px;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    right: 20px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
.show-password {
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: 50%;
    right: 25px;
    cursor: pointer;
}
.remember-me {
    padding-bottom: 10px;
}

/*---------- Map ----------*/
    /* The location pointed to by the popup tip. */
      .map .popup-tip-anchor {
        height: 0;
        position: absolute;
        /* The max width of the info window. */
        width: 200px;
      }
      /* The bubble is anchored above the tip. */
      .map .popup-bubble-anchor {
        position: absolute;
        width: 100%;
        bottom: /* TIP_HEIGHT= */ 8px;
        left: 0;
      }
      .map .popup-bubble-content {
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
      }
    .map .profile-picture .accepted svg, .map .profile-picture .declined svg {
        height: 25px;
        width: 25px;
    }
    .map .profile-picture {
        position: relative;
        width: 90px;
        height: 90px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .map .profile-picture img {
        border-color: white ;
    }
    .map .profile-picture.animation:after {
        content: "";
        border-radius: 50%;
        height: 110px;
        width: 110px;
        position: absolute;
        margin: -13px 0 0 -13px;
        -webkit-animation: pulsate 1s ease-out;
                animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        box-shadow: 0 0 1px 2px var(--red-color);
        -webkit-animation-delay: 1.1s;
                animation-delay: 1.1s;
        background-color: var(--red-color);
        top: 4% !important;
        left: 4% !important;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        z-index: -1;
    }
    .map .distance {
        font-family: var(--font-bold) !important;
        font-size: 17px !important;
        color: black !important;
        text-align: center !important;
        padding: 0px !important;
        margin: 0 !important;
    }
    @-webkit-keyframes pulsate {
        0% {
            -webkit-transform: scale(0.1, 0.1);
                    transform: scale(0.1, 0.1);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }
        50% {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        }
        100% {
            -webkit-transform: scale(1.2, 1.2);
                    transform: scale(1.2, 1.2);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }
    }
    @keyframes pulsate {
        0% {
            -webkit-transform: scale(0.1, 0.1);
                    transform: scale(0.1, 0.1);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }
        50% {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        }
        100% {
            -webkit-transform: scale(1.2, 1.2);
                    transform: scale(1.2, 1.2);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }
    }
    .map .rating.background {
        background-color: white;
    }
    .map .rating {
        width: auto;
        padding: 5px;
        height: auto;
        border-radius: 5px;
        margin-top: 2px;
    }
    .map .rating ul {
        font-size: 17px;
        top: 0 !important;
    }
    .map .rating ul li:not(:last-child) {
        margin-right: 5px;
    }
    .map .btn-map {
        height: 40px;
        width: 120px;
        text-transform: uppercase;
        background-color: var(--red-color);
    }
    .map .image-popup {
        height: 50px;
        width: 120px;
        margin: 5px 0;
    }
    .map .image-popup img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
/*---------- Map ----------*/

/*---------- Calendar ----------*/
    .datepicker.dropdown-menu {
        margin: 0;
        padding: 0;
    }
    .datepicker.dropdown-menu .table-condensed thead tr:nth-child(2) {
        background-color: rgb(233,240,250);
        color: var(--red-color);
        font-family: var(--font--medium);
    }
    .datepicker.dropdown-menu .table-condensed thead tr:nth-child(3), .datepicker .table-condensed tbody {
        font-family: var(--font-heavy);
    }
    .datepicker.dropdown-menu .table-condensed thead tr:nth-child(3) {
        color: var(--color-modal-placeholder);
    }
    .datepicker.dropdown-menu .table-condensed tbody {
        color: var(--green-color);
    }
    .datepicker.dropdown-menu .table-condensed tbody .old, .datepicker .table-condensed tbody .new {
        color: rgb(226, 226, 228);
    }
/*---------- Calendar ----------*/

/*---------- Image Modal ----------*/
    .custom-modal .image-modal {
        max-height: 100%;
        z-index: 99999999999999999;
    }
    .custom-modal .image-modal img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .custom-modal .input-custom {
        font-size: 15px;
    }
/*---------- Image Modal ----------*/

/*---------- Notification ----------*/
    .notification-custom {
        position: fixed;
        background: white;
        right: -800px;
        top: 95px;
        width: 400px;
        height: auto;
        box-shadow: 5px 5px 16px 0px rgba(0,0,0,0.06);
        z-index: 100;
        -webkit-transition: ease 0.3s;
        transition: ease 0.3s;
        border-radius: 20px;
        padding: 10px 10px;
    }
    .notification-custom.open {
        right: 50px;
    }
    .notification-custom .profile-picture {
        width: 70px;
        height: 70px;
    }
    .notification-custom .btn-close {
        width: 80px;
        height: 32px;
        margin: 0;
        background-color: var(--blue-color);
        margin-bottom: 6px;
    }
    .notification-custom .btn-view {
        width: 80px;
        height: 32px;
        margin: 0;
        background-color: var(--red-color);
    }
    .notification-custom > div > div:not(:first-child):not(:last-child) {
        width: calc(100% - 70px - 80px);
    }
    .notification-custom > div > div:last-child {
        width: 80px;
    }
    .notification-custom .title {
        font-size: 15px;
        color: var(--green-color);
        text-transform: uppercase;
        margin: 0;
        line-height: 20px;
    }
    .notification-custom .sub-title {
        font-size: 15px;
        font-family: var(--font-light);
        color: var(--red-color);
        text-transform: uppercase;
        margin: 0;
        line-height: 20px;
    }
/*---------- Notification ----------*/

/*---------- Main Loader ----------*/
    .loader-custom {
        position: fixed;
        height: 100vh;
        width: 100vw;
        background-color: white;
        z-index: 999999999;
    }
    .loader-custom svg {
        position: absolute;
        min-width: 300px;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: 80vw;
        max-width: 700px;
        height: 100%;
        overflow: visible;
    }
    .loader-custom .g1 {
        -webkit-transition: ease 1s;
        transition: ease 1s;
    }
    .loader-custom .g2 {
        -webkit-transition: ease 1s;
        transition: ease 1s;
    }
    .loader-custom .g3 {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    .loader-custom .g1.open {
        position: absolute;
        -webkit-transform: translateX(-7vw);
                transform: translateX(-7vw);
    }
    .loader-custom .g2.open {
        position: absolute;
        -webkit-transform: translateX(7vw);
                transform: translateX(7vw);
    }
    .loader-custom .g3.open {
        -webkit-animation-duration: 1.1s;
        animation-duration: 1.1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }

        to {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }

        to {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        }
    }
/*---------- Main Loader ----------*/

/*---------- Loader ----------*/
    .loader {
        display: none;
        height: 100%;
        width: 100%;
        text-align: center;
    }
    .loader svg path, .loader svg rect{
        fill: var(--green-color);
    }
    .loader svg {
        -webkit-animation:spin 0.5s linear infinite;
        animation:spin .5s linear infinite;
    }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/*---------- Loader ----------*/

/*---------- Profile Picture ----------*/
    .profile-picture {
        position: relative;
        width: 100px;
        height: 100px;
    }
    .profile-picture img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        border-radius: 50%;
        border: 3px solid var(--green-color);
    }
    .profile-picture .edit {
        position: absolute;
        bottom: 0px;
        height: 27px;
        width: 27px;
        border-radius: 50%;
    }
    .profile-picture .edit svg {
        cursor: pointer;
    }
    .profile-picture .accepted {
        position: absolute;
        top: -2px;
        right: -6px;
    }
    .profile-picture .declined {
        position: absolute;
        top: -2px;
        right: -6px;
    }
    .profile-picture input[type=file] {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
/*---------- Profile Picture ----------*/

/*---------- Input Custom ----------*/
    .input-custom {
        font-family: var(--font-light);
        padding: 0px 20px;
        border-radius: 10px !important;
        box-shadow: none !important;
        border: 2px solid var(--green-color) !important;
        background: transparent;
        margin: 0;
    }
/*---------- Input Custom ----------*/

/*---------- Mobile Number + Country Code ----------*/
    .mobile-number {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .mobile-number .country-code {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        width: 20% !important;
        padding: 0 !important;
        text-align: center;
    }
    .mobile-number .number {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        margin-left: -2px !important;
    }
/*---------- Mobile Number + Country Code ----------*/

/*---------- Custom Modal ----------*/
    .custom-modal {
        position: fixed;
        background-color: rgba(27, 58, 106, 0.5);
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        height: 100%;
        width: 100%;
        z-index: 99999999;
    }
    .custom-modal .custom-footer {
        max-height: calc(90vh - 60px);
        padding: 20px 30px;
    }   
    .custom-modal > div.child-modal {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        background-color: white;
        width: 100vw !important;
        max-width: 650px;
        height: auto;
        max-height: 90vh;
        overflow: auto;
    }
    .custom-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--color-modal-placeholder);
    }
    .custom-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--color-modal-placeholder);
    }
    .custom-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--color-modal-placeholder);
    }
    .custom-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--color-modal-placeholder);
    }
    .custom-modal input[type=password] {
        color: var(--green-color);
    }
    .custom-modal .input-custom {
        width: 100%;
        height: 40px;
        box-shadow: none !important;
        padding: 0px 20px;
        margin: 5px 0;
        color: var(--color-modal-placeholder);
    }
    .custom-modal .close-custom {
        position: absolute;
        font-size: 30px;
        top: 3px;
        right: 12px;
        font-weight: 100;
        cursor: pointer;
        -webkit-user-select: none; /* Safari 3.1+ */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
    }
    .custom-modal .custom-header .close-custom {
        color: white;
    }
    .close-custom.sm {
        display: none;
    }
/*---------- Custom Modal ----------*/

/*---------- Global Website ----------*/
    .min-height{
        overflow-x: hidden;
        width: 100vw !important;
        min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
        position: relative;
        top: var(--navbar-height);
    }
    * {
        outline: none !important;
    }
/*---------- Global Website ----------*/

/*---------- Useful ----------*/
    .useful svg.active .stt0, .useful svg.active .stt1, .useful svg.active .str0, .useful svg.active .str1 {
        fill: #1abbbc;
        stroke: #1abbbc;
    }
/*---------- Useful ----------*/

/*---------- Breadcrumb ----------*/
    .breadcrumb-custom {
        font-family: var(--font-light);
        font-size: 16px;
        text-transform: capitalize;
    }
    .breadcrumb-custom .active {
        color: var(--green-color);
    }
/*---------- Breadcrumb ----------*/

/*---------- Rate ----------*/
    .rating .fa-star, .rating .fa-star-o {
        color: var(--red-color); 
        position: relative;
    }
    .rating.r1 .fa-star, .rating.r1 .fa-star-o.r2 {
        color: var(--red-color); 
    }
    .rating.r2 .fa-star, .rating.r2 .fa-star-o {
        color: var(--yellow-color);
    }
    .rating.r3 .fa-star, .rating.r3 .fa-star-o {
        color: var(--green-color);
    }
    .rating.r4 .fa-star, .rating.r4 .fa-star-o {
        color: var(--blue-rating-color);
    }
    .rating.r5 .fa-star, .rating.r5 .fa-star-o {
        color: var(--dark-rating-blue-color);
    }
    .rating {
        width: 115px;
        height: 35px;
    }
    .rating ul {
        -webkit-column-count: 5;
           -moz-column-count: 5;
                column-count: 5;
        position: relative;
        list-style: none !important;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .rating ul.trust {
        -webkit-column-count: 3;
           -moz-column-count: 3;
                column-count: 3;
    }
    .rating ul li {
        position: relative;
    }
    .rating.enabled i {
        cursor: pointer;
    }
    .rating span {
        padding: 0 3px;
    }
    .rating ul:first-child li:not(:last-child) {
        margin-right: 8px !important;
    }
    .rating ul:last-child li:not(:last-child) {
        margin-right: 5px;
    }
    .rating.trust ul li:not(:last-child) {
        margin-right: 5px;
    }
    .rating .rating-red {
        color: var(--red-color);
    }
    .rating .rating-yellow {
        color: var(--yellow-color);
    }
    .rating .rating-green {
        color: var(--green-color);
    }
    .rating .rating-blue {
        color: var(--blue-rating-color);
    }
    .rating .rating-dark-blue {
        color: var(--dark-rating-blue-color);
    }
    .total-rates {
        color: var(--red-color);
        font-family: var(--font-book);
        margin-left: 12px;
        position: relative;
        top: -11px;
    }
    .rating .low:after {
        content: "Low";
        position: absolute;
        top: 20px;
        left: 3px;
        font-family: var(--font-book);
        color: var(--gray-color);
    }
    .rating .high:after {
        content: "High";
        position: absolute;
        top: 20px;
        right: -5px;
        font-family: var(--font-book);
        color: var(--gray-color);
    }
/*---------- Rate ----------*/

/*---------- Switch ----------*/
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
        top: 6px;
        margin: 0px;
    }
    .switch input {
        display:none;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 21px;
        width: 21px;
        left: 3px;
        bottom: 2px;
        border: 3px solid white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    input:checked + .slider {
        background-color: var(--red-color);
    }
    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(24px);
        transform: translateX(24px);
    }
    input:checked + .slider:after {
        content: "ON";
        color: white;
        font-family: var(--font-medium);
        font-size: 12px;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 49%;
        left: 21px;
    }
    input:not(checked) + .slider:after {
        content: "OFF";
        color: white;
        font-family: var(--font-medium);
        font-size: 12px;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 49%;
        right: -8px;
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
/*---------- Switch ----------*/

/*---------- Error Message ----------*/
    div.error-message {
        padding-top: 5px;
        text-align: center;
    }
    .error-message {
        color: rgb(209, 95, 106) !important;
    }
    .error-message::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: rgb(209, 95, 106) !important;
    }
    .error-message::-moz-placeholder /* Firefox 19+ */ {
        color: rgb(209, 95, 106) !important;
    }
    .error-message:-ms-input-placeholder /* IE 10+ */ {
        color: rgb(209, 95, 106) !important;
    }
    .error-message:-moz-placeholder /* Firefox 18- */ {
        color: rgb(209, 95, 106) !important;
    }
/*---------- Error Message ----------*/

/*---------- Custom Range ----------*/
    .range-custom {
      -webkit-appearance: none;
      width: 100%;
      margin: 20px 0;
      height: 0px;
    }
    .range-custom:after {
        content: "\25CF";
        color: var(--green-color);
        position: relative;
        top: -12px;
        left: -2px;
    }
    .range-custom:before {
        content: "\25CF";
        color: var(--green-color);
        position: relative;
        top: -12px;
        right: -2px;
    }
    .range.multiple {
        height: 45px;
    }
    .range {
        margin-top: 15px;
    }
    .range.multiple .range-custom {
        position: absolute;
        width:calc(100% - 30px);
    }
    .range-custom::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px;
        cursor: pointer;
        background: var(--green-color);
        border-radius: 0px;
        border: 0px solid #010101;
    }
    .range-custom::-webkit-slider-thumb {
        box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
        cursor: pointer;
        -webkit-appearance: none;
        background-color: transparent;
        position: relative;
        top: -15px;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 12px solid var(--green-color);
        box-shadow: none;
    }
    .range-custom::-moz-range-thumb {
        box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
        cursor: pointer;
        -webkit-appearance: none;
        background-color: transparent;
        position: relative;
        top: -15px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 15px solid var(--green-color);
        box-shadow: none;
    }
    .range-custom::-ms-thumb {
        box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
        cursor: pointer;
        -webkit-appearance: none;
        background-color: transparent;
        position: relative;
        top: -15px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 15px solid var(--green-color);
        box-shadow: none;
    }
/*---------- Custom Range ----------*/

/*---------- Pagination ----------*/
    .parent-pagination {
        margin: 70px 0px;
    }
    .parent-pagination .pagination {
        position: relative;
        left: 50%;
        -webkit-transform: translate(-50%);
                transform: translate(-50%);
        width: 450px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                    -ms-grid-row-align: center;
                align-items: center;
    }
    .parent-pagination .pagination .page-link:hover, .parent-pagination .pagination .page-link:click {
        background: transparent !important;
    }
    .parent-pagination .pagination .page-item {
        color: var(--gray-color);
    }
    .parent-pagination .pagination .page-item a {
        border: 0;
    }
    .parent-pagination .pagination .page-item.active .page-link {
        background-color: transparent;
        box-shadow: none;
        color: var(--green-color) !important;
    }
    .parent-pagination .pagination .page-item.arrow a {
        height: 28px;
        width: 28px;
        border: 2px solid var(--green-color);
        position: relative;
        border-radius: 50%;
    }
    .parent-pagination .pagination .page-item.arrow a > i {
        font-size: 16px;
        color: var(--green-color);
        font-weight: 800;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        left: 50%;
    }
    .parent-pagination .pagination .page-item.viewall {
        font-family: var(--font-bold);
        color: var(--green-color);
    }
/*---------- Pagination ----------*/

/*---------- Check Input One ----------*/
    .check-input .item {
        color: #fff;
        position: relative;
        text-transform: uppercase;
    }
    .check-input input[type=radio]{
        position: absolute;
        visibility: hidden;
    }
    .check-input label{
        display: block;
        position: relative;
        font-size: 15px;
        padding: 0px 25px 0px 80px;
        margin: 0;
        line-height: 30px;
        z-index: 9;
        cursor: pointer;
        -webkit-transition: all 0.25s linear;
        border-radius: 10px;
    }
    .check-input .check {
        display: block;
        position: absolute;
        border: 2px solid #fff;
        border-radius: 100%;
        height: 25px;
        width: 25px;
        top: 2px;
        left: 30px;
        z-index: 5;
        transition: border .25s linear;
        -webkit-transition: border .25s linear;
    }
    .check-input .item:hover .check {
        border: 2px solid #fff;
    }
    .check-input .check:before {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 13px;
        width: 13px;
        top: 4px;
        left: 4px;
        margin: auto;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
    }
    .check-input input[type=radio]:checked ~ .check:before{
        background: #fff;
    }
/*---------- Check Input One ----------*/

/*---------- Square Check Input ----------*/
    .square-check-input .item {
        color: var(--red-color);
        position: relative;
        text-transform: uppercase;
    }
    .square-check-input input[type=radio]{
        position: absolute;
        visibility: hidden;
    }
    .square-check-input label{
        display: block;
        position: relative;
        padding: 0px 25px 0px 70px;
        margin: 30px 0px;
        line-height: 30px;
        z-index: 9;
        cursor: pointer;
        -webkit-transition: all 0.25s linear;
        font-family: var(--font-medium);
    }
    .square-check-input .check {
        display: block;
        position: absolute;
        border: 2px solid var(--border-gray-color);
        height: 28px;
        width: 28px;
        top: 2px;
        left: 0;
        z-index: 5;
        transition: border .25s linear;
        -webkit-transition: border .25s linear;
    }
    .square-check-input .item:hover .check {
        border: 2px solid var(--border-gray-color);
    }
    .square-check-input .check:before {
        display: block;
        position: absolute;
        content: '';
        height: 18px;
        width: 18px;
        top: 3px;
        left: 3px;
        margin: auto;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
    }
    .square-check-input input[type=radio]:checked ~ .check:before{
        background: var(--red-color);
        z-index: 999;
    }
/*---------- Square Check Input ----------*/

/*---------- Check Input Two ----------*/
    .check-input-two {
        width: 100%;
    }
    .check-input-two ul {
        -webkit-column-count: 3;
           -moz-column-count: 3;
                column-count: 3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .check-input-two ul li {
        color: var(--green-color);
        position: relative;
        margin-right: 19px;
    }
    .check-input-two ul li input[type=radio], .check-input-two ul li input[type=checkbox] {
        position: absolute;
        visibility: hidden;
    }
    .check-input-two ul li label {
        color: var(--green-color);
        font-size: 13px;
        display: block;
        position: relative;
        padding-left: 23px;
        margin: 0;
        line-height: 30px;
        z-index: 9;
        cursor: pointer;
        -webkit-transition: all 0.25s linear;
    }
    .check-input-two ul li .check {
        display: block;
        position: absolute;
        border: 2px solid var(--green-color);
        border-radius: 100%;
        height: 16px;
        width: 16px;
        top: 6px;
        left: 3px;
        z-index: 5;
        transition: border .25s linear;
        -webkit-transition: border .25s linear;
    }
    .check-input-two ul li:hover .check {
        border: 2px solid var(--green-color);
    }
    .check-input-two ul li .check:before {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 8px;
        width: 8px;
        top: 2px;
        left: 2px;
        margin: auto;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
    }
    .check-input-two input[type=radio]:checked ~ .check:before, .check-input-two input[type=checkbox]:checked ~ .check:before {
        background: var(--green-color);
    }
    .check-input-two input[type=radio]:checked ~ label, .check-input-two input[type=checkbox]:checked  ~ label {
        text-transform: uppercase;
        font-family: var(--font-bold);
    }
/*---------- Check Input Two ----------*/

/*---------- Check Input Three ----------*/
    .check-input-three {
        display: flex;
        width: 100%;
    }
    .check-input-three > div label {
        width: 60px
    }
    .check-input-three ul {
        -webkit-column-count: 2;
           -moz-column-count: 2;
                column-count: 2;
        width: 100%;
    }
    .check-input-three ul li {
        color: #fff;
        position: relative;
        text-transform: uppercase;
    }
    .check-input-three > .row > div {
        color: #fff;
        position: relative;
        text-transform: uppercase;
        padding: 0 4px !important;
    }
    .check-input-three input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    .check-input-three label{
        font-size: 13px;
        letter-spacing: 1px;
        display: block;
        position: relative;
        margin-right: 5px;
        padding: 9px 4px;
        z-index: 9;
        line-height: 15px;
        cursor: pointer;
        -webkit-transition: all 0.25s linear;
        background-color: transparent;
        border-radius: 10px;
        width: 100%;
        text-align: center;
        border: 2px solid var(--green-color);
        color: var(--green-color);
    }
    .check-input-three input[type=checkbox]:checked ~ label, .check-input-three input[type=radio]:checked ~ label{
        background-color: var(--green-color);
        border-radius: 10px;
        color: white;
    }
    .check-input-three .left label {
        padding: 0;
        height: 27px;
        line-height: 25px;
        margin: 0px;
        border-bottom-right-radius: unset !important;
        border-top-right-radius: unset !important;
        width: 70px;
    }
    .check-input-three .right label {
        padding: 0;
        height: 27px;
        line-height: 25px;
        margin: 0px;
        border-bottom-left-radius: unset !important;
        border-top-left-radius: unset !important;
        width: 70px;
    }
    .check-input-three .middle label {
        padding: 0;
        height: 27px;
        line-height: 25px;
        margin: 0px;
        border-radius: unset !important;
        width: 70px;
    }
    .check-input-three .row {
        margin-right: -4px;
        margin-left: -4px;
    }
/*---------- Check Input Three ----------*/

/*---------- Check Input Four | Schedule ----------*/
    .check-input-four {
        width: 100%;
    }
    .check-input-four ul {
        -webkit-column-count: 7;
           -moz-column-count: 7;
                column-count: 7;
        margin-left: 5px;
    }
    .check-input-four ul li {
        color: #fff;
        position: relative;
        text-transform: uppercase;
        width: 150%;
    }
    .check-input-four ul li input[type=checkbox], .check-input-four ul li input[type=radio]{
        position: absolute;
        visibility: hidden;
    }
    .check-input-four ul li label{
        font-family: var(--font-bold);
        font-size: 18px;
        line-height: 38px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        border: 1px solid var(--green-color);
        color: var(--green-color);
    }
    .check-input-four input[type=checkbox]:checked ~ label, .check-input-four input[type=radio]:checked ~ label{
        background-color: var(--green-color);
        color: white;
    }
    .check-input-four ul li.left label {
        padding: 0;
        height: 25px;
        line-height: 25px;
        margin: 0px;
        border-bottom-right-radius: unset !important;
        border-top-right-radius: unset !important;
    }
    .check-input-four ul li.right label {
        padding: 0;
        height: 25px;
        line-height: 25px;
        margin: 0px;
        border-bottom-left-radius: unset !important;
        border-top-left-radius: unset !important;
    }
/*---------- Check Input Four | Schedule ----------*/

/*---------- Scroll Icon ----------*/
    .icon-scroll {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        cursor: pointer;
        width: 25px;
    }
    .icon-scroll .mouse {
        height: 36px;
        width: 24px;
        border: 2px solid var(--green-color);
        border-radius: 20px;
    }
    .icon-scroll:hover .wheel {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-animation: mouse-wheel 1.2s ease;
        animation: mouse-wheel 1.2s ease;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
    .icon-scroll .wheel {
        position: relative;
        display: block;
        height: 6px;
        width: 6px;
        margin: 6px auto 0;
        background: var(--green-color);
        border-radius: 50%;
        -webkit-animation: mouse-wheel-out 1.2s ease;
        animation: mouse-wheel-out 1.2s ease;
    }
    .icon-scroll:hover .a1 {
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        margin-top: 2px;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
    }
    .icon-scroll:hover span {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-animation: mouse-scroll 2s infinite;
        animation: mouse-scroll 2s infinite;
    }
    .icon-scroll span {
        display: block;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--green-color);
        border-bottom: 2px solid var(--green-color);
        margin: 0 0 4px 7px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
    }
    .icon-scroll:hover .a2 {
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        -webkit-animation-delay: .4s;
        animation-delay: .4s;
    }
    .icon-scroll:hover span {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-animation: mouse-scroll 2s infinite;
        animation: mouse-scroll 2s infinite;
    }
/*---------- Scroll Icon ----------*/

/*---------- Job Post ----------*/
    jobs {
        display: block;
    }
    jobs .sub-list > .row {
        margin-left: -6px;
        margin-right: -6px;
    }
    jobs .sub-list .job-parent {
        padding: 6px;
    }
    jobs .links {
        color: var(--border-gray-color);
        font-family: var(--font-bold);
        font-size: 16px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    jobs .links .active {
        color: var(--red-color);
    }
    jobs .links label:not(:last-child) {
        margin-right: 50px;
    }
    jobs .job {
        border: 2px solid var(--border-gray-color);
        width: 100%;
    }
    jobs .header {
        overflow: hidden;
        position: relative;
    }
    jobs .header.red-header:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--red-color);
        top: 0;
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    jobs .job header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px;
    }
    jobs .job .name {
        position: relative;
        width: calc(100% - 40px - 110px); /* 100% - (width of image) - (width of rating div) */
        padding: 0 10px;
    }
    jobs .job .name > div {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
    }
    jobs .job .profile-picture {
        width: 40px;
        height: 40px;
    }
    jobs .job .profile-picture img {
        border: 2px solid var(--green-color);
    }
    jobs .job .name {
        color: var(--blue-color);
    }
    jobs .job picture div {
        width: 100%;
        height: 200px;
    }
    jobs .job picture div img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    jobs .job .jobFooter {
        font-size: 15px;
        padding: 10px;
        background-color: var(--color-job-footer);
    }
    jobs .job .jobFooter2 {
        font-size: 15px;
        padding: 10px;
        border-top: 2px solid var(--border-gray-color);
    }
    jobs .job .cost cost {
        font-family: var(--font-bold);
    }
    jobs .job .cost {
        text-transform: uppercase;
        color: var(--green-color);
    }
    jobs .job .content {
        font-family: var(--font-light);
        color: var(--gray-color);
    }
    jobs .job .date {
        font-family: var(--font-heavy);
        color: var(--green-color);
    }
    jobs .job .red-date {
        font-family: var(--font-medium);
        color: var(--red-color);
    }
    jobs .job .gray-date {
        font-family: var(--font-medium);
        color: var(--color-modal-placeholder);
    }
    jobs .title {
        color: var(--green-color);
        font-size: 20px;
        line-height: 20px;
    }
    jobs .sub-title {
        color: var(--red-color);
        font-size: 15px;
    }
    jobs .sub-list {
        margin-top: 20px;
    }
    jobs view-in-list {
        display: none;
    }
    jobs .paid-monthly {
        color: var(--red-color);
        font-family: var(--font-light);
    }
    jobs .jobFooter .title {
        font-size: 15px;
        color: var(--red-color);
        text-transform: uppercase;
    }
    jobs t-header {
        position: absolute;
        background-color: rgba(255,255,255,0.9);
        display: block;
        width: 100%;
        padding: 7px 15px;
        color: var(--green-color);
        height: 40px;
    }
    jobs t-header span {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        left: 55px;
    }
    jobs t-header img{
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        left:10px;
        width: 30px;
        height: 30px;
        -o-object-fit: contain;
           object-fit: contain;
    }
    jobs .view-all {
        font-family: var(--font-bold);
        font-size: 15px;
        float: right;
        color: var(--red-color);
        text-transform: capitalize;
    }
    jobs .jobs-count {
        font-family: var(--font-medium);
        font-size: 14px;
        background-color: var(--green-color);
        color: white;
        padding: 0 2px;
        height: 20px;
        text-align: center;
        border-radius: 5px;
        position: relative;
        top: -3px;
        margin-left: 20px;
    }
    jobs .rating ul li {
        position: relative;
    }
    jobs .rating ul:first-child li:not(:last-child) {
        margin-right: 5px !important;
    }
    jobs .rating ul.trust li:not(:last-child) {
        margin-right: 32px !important;
    }
    jobs .rating.trust ul li:not(:last-child) {
        margin-right: 8.5px !important;
    }
    jobs .rating .fa-star, jobs .rating .fa-star-o {
        color: var(--red-color);
        font-size: 20px;
    }
    jobs .rating ul:last-child {
        left: 2px;
    }
/*---------- Job Post ----------*/

/*---------- Grid View | List View ----------*/
    .check-input.grid-list input[type=radio]:not(:checked) ~ label {
        font-family: var(--font-book);
        text-transform: uppercase;
    }
    .check-input.grid-list .item {
        display: inline-block !important;
    }
    .check-input.grid-list input[type=radio]:checked ~ label {
        background-color: var(--green-color);
    }
    .check-input.grid-list label {
        width: 100px !important;
        height: 40px !important;
        line-height: 40px !important;
    }
/*---------- Grid View | List View ----------*/

/*---------- Navigation ----------*/
    .navbar-custom {
        font-family: var(--font-heavy);
        color: var(--blue-color);
        position: fixed;
        top: 0px;
        background-color: white;
        width: 100vw;
        height: var(--navbar-height);
        padding: 0;
        z-index: 99999;
        box-shadow: 0 2px 16px rgba(0,0,0,.3);
    }
    .navbar-custom .nav-link {
        padding: .5rem 0rem .5rem 10px;
    }
    .navbar-custom .navbar-brand{
        height: var(--navbar-height);
        padding: 0;
    }
    .navbar-custom .navbar-brand svg{
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .navbar-custom .navbar-nav li{
        height: var(--navbar-height);
        line-height: var(--navbar-height);
        padding: 0 10px;
    }
    .navbar-custom .navbar-nav li.active{
        font-family: var(--font-bold);
        text-transform: uppercase;
        color: var(--green-color);
    }
    .navbar.navbar-dark .navbar-nav .nav-item.active>.nav-link {
        background-color: #ffffff00;
    }
    .navbar-custom .btn-job {
        padding: 0px 25px;
        background-color: var(--blue-color);
        text-transform: uppercase;
        font-weight: 500;
        vertical-align: middle;
        margin: 0px 50px;
        line-height: 42px;
        height: 42px;
    }
    .navbar-custom .login-side {
        position: relative;
        display: flex;
    }
    .navbar-custom .login-side .loggedin-user .fa.fa-angle-down {
        font-size: 22px;
        font-weight: bolder;
    }
    .navbar-custom .login-side .loggedin-user span {
        padding-right: 15px;
        padding-left: 8px;
    } 
    .navbar-custom .login-side .login-user span {
        padding-left: 8px;
    }
    .navbar-custom a {
        font-weight: 600;
    }
    .navbar-custom .fa.fa-navicon {
        font-size: 30px;
    }
    .navbar-custom .user-options {
        display: none;
        font-family: var(--font-medium);
        width: 225px;
        background-color: white;
        line-height: 40px;
        position: absolute;
        right: 4px;
        top: 64px;
        box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1), -3px -3px 11px 0 rgba(0, 0, 0, 0.1);
    }
    .navbar-custom .user-options a {
        /*font-size: 12px;*/
    }
    .navbar-custom .user-options > .arrow {
        color: white;
        position: absolute;
        right: 10px;
        top: -24px;
        font-size: 30px;
    }
    .navbar-custom .user-options > .menu > div {
        padding: 0 10px;
        border-bottom: 1px solid var(--blue-color);
        text-align: left;
    }
    .navbar-custom .user-options > .menu > div:last-child {
        border-bottom: 0 !important;
    }
    .navbar-custom .user-options .logout {
        text-align: center;
        background-color: var(--red-color);
        color: white;
        padding: 0px !important;
        border: 0px !important;
        text-transform: uppercase;
    }
    .navbar-custom settings {
        display: inline-block;
    }
    .navbar-custom settings .settings {
        width: 300px;
    }
    settings img {
        width: 23px;
        height: 42px;
    }
    settings {
        position: relative;
        display: block;
        text-transform: uppercase;
        margin-left: 15px;
    }
    settings img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        cursor: pointer;
    }
    settings .settings {
        display: none;
        background-color: #fff;
        line-height: 40px;
        position: absolute;
        right: -7px;
        top: 64px;
        box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1), -3px -3px 11px 0 rgba(0, 0, 0, 0.1);
        z-index: 1;
    }
    settings .settings > .arrow {
        color: white;
        position: absolute;
        right: 10px;
        top: -24px;
        font-size: 30px;
    }
    settings .settings > .menu > div {
        padding: 0 10px;
        border-bottom: 1px solid var(--blue-color);
        text-align: left;
    }
    settings .settings > .menu > div:last-child {
        border-bottom: 0 !important;
    }
    settings .settings .check-input-three {
        margin-bottom: 15px;
    }
    settings .settings .check-input-three > div:not(:last-child) label {
        border-right: 1px;
    }
    settings .settings .check-input-three > div label {
        width: 70px;
    }
/*---------- Navigation ----------*/

/*---------- Hamburger Menu ----------*/
    .navbar-custom .hamburger-menu {
        height: 54px;
        cursor: pointer;
    }
    .navbar-custom .navbar-toggler {
        padding: 0px;
        margin: 0px;
    }
    .navbar-custom .bar, .navbar-custom .bar:after, .navbar-custom .bar:before {
        width: 40px;
        height: 4px;
    }
    .navbar-custom .bar {
        position: relative;
        -webkit-transform: translateY(25px);
                transform: translateY(25px);
        background: var(--blue-color);
        -webkit-transition: all 0ms 300ms;
        transition: all 0ms 300ms;
    }
    .navbar-custom .bar.animate {
        background: rgba(255, 255, 255, 0);
    }
    .navbar-custom .bar:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 10px;
        background: var(--blue-color);
        -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .navbar-custom .bar:after {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        background: var(--blue-color);
        -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
   .navbar-custom  .bar.animate:after {
        top: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .navbar-custom .bar.animate:before {
        bottom: 0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
/*---------- Hamburger Menu ----------*/

/*---------- Reviews ----------*/
    .reviews {
        margin-top: 100px !important;
    }
    .reviews .rating {
        width: 145px;
    }
    .reviews .title, .reviews .username {
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
        text-transform: uppercase;
    }
    .reviews .rating .title {
        color: var(--green-color) !important;
    }
    .reviews .more-reviews {
        float: right !important;
        font-size: 20px !important;
        font-family: var(--font-bold) !important;
        color: var(--red-color) !important;
    }
    .reviews .title {
        /*font-family: var(--font-heavy);*/
    }
    .reviews .date {
        color: var(--gray-color) !important;
    }
    .reviews .filter-by {
        float: right;
        color: var(--gray-color) !important;
    }
    .reviews .filter-by span:first-child {
        font-family: var(--font-regular) !important;
        text-transform: capitalize !important;
        margin-right: 10px !important;
    }
    .reviews .filter-by span:not(:first-child) {
        font-family: var(--bold-regular) !important;
    }
    .reviews .filter-by span.active:not(:first-child) {
        color: var(--green-color) !important;
    }
    .reviews .filter-by span:not(:first-of-type):not(:last-of-type) {
        margin-right: 5px !important;
    }
    .reviews .fa-star:before, .reviews .fa-star-o:before {
        font-size: 22px !important;
    }
    .reviews .title, .reviews .rating, .reviews .title {
        height: 25px !important;
    }
    .reviews .date {
        height: 20px !important;
    }
    .reviews .review {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }
    .reviews .review:not(:last-of-type) {
        border-bottom: 2px solid #d2d2d2 !important;
    }
    .reviews p {
        /*font-size: 13px !important;*/
        color: var(--gray-color) !important;
    }
    .reviews .useful > div {
        float: right !important;
    }
    .reviews .useful .title > span:first-of-type {
        font-family: var(--font-light) !important;
        margin-right: 10px;
    }
    .reviews .rating ul {
        width: 120px !important;
    }
/*---------- Reviews ----------*/

/*---------- User Jobs ----------*/
    user-job {
        margin-top: 80px !important;
        display: block;
        position: relative;
    }
    user-job .rating {
        width: 145px;
    }
    user-job .title {
        color: var(--red-color);
        /*font-family: var(--font-bold);*/
        font-size: 20px;
        text-transform: uppercase;
    }
    user-job .view-all {
        float: right;
        color: var(--red-color);
        font-family: var(--font-bold);
        /*font-size: 13px;*/
    }
    user-job .main-row {
        padding-bottom: 20px;
    }
    user-job .first-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    user-job .first-row > div {
        width: calc(100% / 5 - 20px);
        height: 78px;
    }
    user-job .first-row > div:not(:last-child) {
        margin-right: 20px;
        border-right: 1px solid var(--color-modal-placeholder);
    }
    user-job .username {
        color: var(--green-color);
        font-family: var(--font-bold);
        font-size: 20px;
        text-transform: uppercase;
    }
    user-job .title-date .title {
        color: var(--red-color);
        /*font-family: var(--font-medium);*/
        font-size: 20px;
        text-transform: uppercase;
    }
    user-job .title-date .date {
        color: var(--red-color);
        /*font-family: var(--font-light);*/
        /*font-size: 13px;*/
        position: relative;
        top: -6px;
    }
    user-job .rating .title {
        color: var(--green-color) !important;
    }
    user-job .fa-star:before, user-job .fa-star-o:before {
        font-size: 22px !important;
    }
    user-job .paragraph {
        /*font-size: 13px !important;*/
        color: var(--gray-color) !important;
        font-family: var(--font-book);
        padding: 15px 0px;
    }
    user-job .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    user-job .useful > div {
        float: right !important;
        color: var(--green-color);
    }
    user-job .useful .title > span:first-of-type {
        font-family: var(--font-light) !important;
    }
    user-job .rating ul {
        width: 120px !important;
    }
    user-job .options {
        text-align: center;
    }
    user-job .options input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    user-job .over-all-experience + label .st440,
    user-job .over-all-experience + label .st441,
    /* Circle */
    user-job .over-all-experience + label .st442 {
        fill:var(--green-color);
        stroke:white;
    } 

    user-job .communication + label .st450,
    /* Circle */
    user-job .communication + label .st451 {
        fill:var(--green-color);
        stroke:white;
    } 

    user-job .speed + label .st460,
    /* Circle */
    user-job .speed + label .st461 {
        fill:var(--green-color);
        stroke:white;
    }

    user-job .professional-service + label .st470,
    /* Circle */
    user-job .professional-service + label .st471 {
        fill:var(--green-color);
        stroke:white;
    } 

    user-job .work-quality + label .st480,
    /* Circle */
    user-job .work-quality + label .st481 {
        fill:var(--green-color);
        stroke:white;
    } 

    /* Circle */
    user-job .politeness + label .st490,
    user-job .politeness + label .st491 {
        fill:var(--green-color);
        stroke:white;
    } 
    user-job .over-all-experience + label p,
    user-job .communication + label p,
    user-job .speed + label p,
    user-job .professional-service + label p,
    user-job .work-quality + label p,
    user-job .politeness + label p {
        color: var(--green-color) !important;
        /*font-size: 10px !important;*/
    }
/*---------- User Jobs ----------*/

/*---------- Endorsements ----------*/
    .endorsements {
        margin-top: 60px;
    }
    .endorsements .sub-title {
        color: var(--color-modal-placeholder);
    }
    .endorsements .content  {
        color: var(--green-color);
        font-size: 15px;
        margin-top: 15px;
    }
    .endorsements .content > div div:first-child {
        text-align: center;
    }
    .endorsements .content > div:not(:last-child) {
        border-right: 1px solid var(--color-modal-placeholder);
    }
    .endorsements .content > div div:not(:last-child):not(:first-child) {
        font-family: var(--font-heavy);
        height: 50px;
        text-align: center;
    }
    .endorsements .content > div div:last-child {
        font-family: var(--font-bold);
        text-align: center;
    }
/*---------- Endorsements ----------*/

/*---------- Chat Row ----------*/
    chat-row {
        display: block;
        padding: 30px 50px;
    }
    chat-row:not(:last-child) {
        border-bottom: 1px solid rgb(163, 165, 165);
    }
    chat-row.gray {
        background-color: var(--color-job-footer);
    }
    chat-row.red {
        background-color: var(--color-background-chat) !important;
    }
    chat-row .username {
        font-size: 20px;
        font-family: var(--font-heavy);
        color: var(--green-color);
        text-transform: uppercase;
    }
    chat-row .message {
        font-size: 16px;
        font-family: var(--font-light);
        color: var(--red-color);
    }
    chat-row .read {
        /*font-size: 13px;*/
        font-family: var(--font-light);
        color: var(--red-color);
        text-transform: capitalize;
    }
    chat-row .not.read {
        /*font-size: 13px;*/
        font-family: var(--font-light);
        color: var(--gray-color);
        text-transform: capitalize;
    }
    chat-row .btn {
        height: 35px;
        font-size: 15px;
        text-transform: uppercase;
        width: 100%;
        margin: 0;
    }
    chat-row .btn-delete {
        background-color: var(--red-color);
    }
    chat-row .btn-open {
        background-color: var(--blue-color);
    }
    chat-row .date-sent {
        /*font-size: 13px;*/
        font-family: var(--font-light);
        color: var(--green-color);
        float: right;
        padding-bottom: 15px;
    }
/*---------- Chat Row ----------*/

/*---------- Footer ----------*/
    footer {
        font-family: var(--font-heavy);
        background-color: var(--green-color);
        color: #fff;
        letter-spacing: 1px;
        font-size: 16px;
        position: relative;
        top: var(--navbar-height);
    }
    footer > div {
        padding: 25px 0;
    }
    footer li:before {
        content: ". ";
        font-weight: 900;
    }
    footer .categories ul {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
    footer .apps .app {
        margin: 0 5px 0 0px;
        border: 1px solid;
        border-radius: 10px;
        height: 35px;
        width: 125px;
        text-align: center;
        padding: 1px 3px;
    }
    footer .apps .app a {
        height: 35px;
        width: 125px;
    }
    footer .apps img {
        max-width: 100%;
        height: 85%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 45%;
        position: relative;
    }
    footer .middle .title {
        height: 45px;
        margin-bottom: 10px;
    }
    footer .title {
        /*font-family: var(--font-bold);*/
        text-transform: uppercase;
        font-size: 17px
    }
    footer .form-sub {
        font-family: var(--font-light);
        border: 2px solid white !important;
        border-radius: 10px;
        width: 250px;
        height: 45px;
        background: transparent;
        box-shadow: none !important;
        color: white;
        padding: 0 15px;
        margin: 0 12px 0 0;
    }
    footer .form-sub:focus {
        color: white;
    }
    footer .form-sub::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: white;
        font-size: 16px;
    }
    footer .form-sub::-moz-placeholder { /* Firefox 19+ */
        color: white;
        font-size: 16px;
    }
    footer .form-sub:-ms-input-placeholder { /* IE 10+ */
        color: white;
        font-size: 16px;
    }
    footer .form-sub:-moz-placeholder { /* Firefox 18- */
        color: white;
        font-size: 16px;
    }
    footer .btn-sub {
        height: 45px;
        background-color: white;
        color: #1bbcbc !important;
        width: 130px;
        margin: 0;
    }
    footer .address {
        text-transform: uppercase;
        font-size: 13px;
        font-family: var(--font-light);
    }
/*---------- Footer ----------*/

/*---------- Index Page ----------*/
    .index-page {
        position: relative;
    }
    .index-page .background-image {
        position: relative;
        height: calc(100vh - var(--navbar-height));
        width: 100vw;
        left: 0;
        top: 0;
    }
    .index-page .background-image img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .index-page .form-custom {
        position: absolute;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        width: 600px;
    }
    .index-page .form-custom .input {
        position: relative;
        padding: 25px 0px;
    }
    .index-page .form-custom .input .input-custom {
        background-color: white;
        width: 100%;
        border: 0 !important;
        height: 60px;
    }
    .index-page .form-custom .input .svg {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        right: 10px;
        height: 30px;
        width: 30px;
    }
    .index-page .form-custom .input .svg svg {
        height: 30px;
        width: 30px;
    }

    .index-page .check-input{
        margin: 0 45px;
    }
    .index-page .check-input .item:hover .check {
        border: 2px solid #fff;
    }
    .index-page .check-input .item .check:before {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 13px;
        width: 13px;
        top: 4px;
        left: 4px;
        margin: auto;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
    }
    .index-page .check-input input[type=radio]:checked ~ .check:before{
        background: #fff;
    }
    .index-page .form-custom .buttons {
        text-align: center;
        text-align: -webkit-center;
    }
    .index-page .form-custom .buttons button {
        cursor: pointer;
    }
    .index-page .form-custom .btn-search {
        background-color: var(--blue-color);
        text-transform: uppercase;
        width: 200px;
        margin: 0 15px 0 0;
        letter-spacing: 1px;
        height: 50px;
    }
    .index-page .form-custom .btn-findsomething {
        background-color: var(--green-color);
        text-transform: uppercase;
        width: 200px;
        margin: 0 15px 0 0;
        letter-spacing: 1px;
        height: 50px;
    }
/*---------- Index Page ----------*/

/*---------- Login Modal---------*/
    .login-modal {
        padding: 50px;
        width: 400px !important;
    }
    .login-modal div.error-message {
        height: 50px;
    }
    .login-modal .home-logo{
        position: absolute;
        top: -60px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .login-modal .logo svg {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        top: 50%;
        left: 50%;
        width: 60%;
        height: 100%;
    }
    .login-modal .login, .login-modal .signup {
        text-transform: uppercase;
        /*font-size: 12px;*/
    }
    .login-modal .login {
        font-family: var(--font-heavy);
        color: var(--green-color);
    }
    .login-modal .signup {
        font-family: var(--font-light);
        color: var(--blue-color);
        text-align: right;
    }
    .login-modal .login-form .btn-login {
        width: 100%;
        height: 40px;
        background: var(--green-color);
        margin: 5px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .login-modal .login-form .btn-facebook {
        width: 100%;
        height: 40px;
        background: var(--facebook-color);
        margin: 5px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .login-modal .login-form .btn-linkedin {
        width: 100%;
        height: 40px;
        background: var(--linkedin-color);
        margin: 0;
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .login-modal .forgot-password {
        font-family: var(--font-heavy);
        font-size: 13px;
        color: var(--green-color);
        text-align: right;
        line-height: 30px;
        cursor: pointer;
    }
/*---------- Login Modal---------*/

/*---------- Register Modal---------*/
    .register-modal {
        padding: 50px;
    }
    .register-modal .home-logo{
        position: absolute;
        top: -90px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .register-modal div.error-message {
        height: 50px;
    }
    .register-modal .logo svg {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        top: 50%;
        left: 50%;
        width: 60%;
        height: 100%;
    }
    .register-modal .login, .register-modal .signup {
        text-transform: uppercase;
        /*font-size: 12px;*/
    }
    .register-modal .login {
        font-family: var(--font-heavy);
        color: var(--green-color);
    }
    .register-modal .signup {
        font-family: var(--font-light);
        color: var(--blue-color);
        text-align: right;
    }
    .register-modal .register-form .btn-signup {
        width: 100%;
        height: 40px;
        background: var(--green-color);
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
/*---------- Register Modal---------*/

/*---------- Verification Code Modal---------*/
    .verificationcode-modal {
        padding: 50px;
        width: 400px !important;
    }
    .verificationcode-modal .home-logo{
        position: absolute;
        top: -90px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .verificationcode-modal .logo svg {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        top: 50%;
        left: 50%;
        width: 60%;
        height: 100%;
    }
    .verificationcode-modal .verification {
        font-family: var(--font-bold);
        text-transform: uppercase;
        font-size: 20px;
        text-align: center;
        padding-bottom: 10px;
    }
    .verificationcode-modal .codesent {
        color: var(--green-color);
        text-align: center;
    }
    .verificationcode-modal .input-custom {
        width: 100%;
        box-shadow: none !important;
        padding: 0px 5px !important;
        margin-right: 10px !important;
        margin-left: 10px !important;
        background-color: var(--green-color);
        color: white !important;
        text-align: center;
    }
    .verificationcode-modal .verificationcode-form .btn-verificationcode {
        border: 2px solid var(--green-color) !important;
        border-radius: 10px;
        width: 100%;
        height: 36px;
        background: var(--green-color);
        box-shadow: none !important;
        margin: 5px 0;
        padding: 0 2%;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .verificationcode-modal form.verificationcode-form {
        max-width: 400px;
        margin: auto;
    }
    .verificationcode-modal .verificationcode-form .btn-submit {
        border: 2px solid var(--blue-color) !important;
        border-radius: 10px;
        width: 100%;
        height: 36px;
        background: var(--blue-color);
        box-shadow: none !important;
        margin: 5px 0;
        padding: 0 2%;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .verificationcode-modal .verification-inputs {
        margin: 40px 0px;
        padding: 0 20px;
    }
/*---------- Verification Code Modal---------*/

/*---------- Reset Password Modal---------*/
    .reset-modal {
        padding: 50px;
        width: 400px !important;
    }
    .reset-modal .home-logo{
        position: absolute;
        top: -90px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .reset-modal .logo svg {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        top: 50%;
        left: 50%;
        width: 60%;
        height: 100%;
    }
    .reset-modal .login, .reset-modal .signup {
        text-transform: uppercase;
        /*font-size: 12px;*/
    }
    .reset-modal .login {
        font-family: var(--font-heavy);
        color: var(--green-color);
    }
    .reset-modal .signup {
        font-family: var(--font-light);
        color: var(--blue-color);
        text-align: right;
    }
    .reset-modal .reset-form .btn-resetpassword {
        width: 100%;
        height: 40px;
        background: var(--green-color);
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
/*---------- Reset Password Modal---------*/

/*---------- Login & Register Modal---------*/
    .login span, .signup span {
        cursor: pointer;
    }
    .remember-me ul li {
        color: var(--green-color);
        position: relative;
        display: inline-block;
    }
    .remember-me ul li input[type=checkbox] {
        position: absolute;
        visibility: hidden;
    }
    .remember-me ul li label {
        font-family: var(--font-light);
        color: var(--green-color);
        /*font-size: 14px;*/
        display: block;
        position: relative;
        padding-left: 25px;
        margin: 0;
        line-height: 30px;
        z-index: 9;
        cursor: pointer;
        -webkit-transition: all 0.25s linear;
    }
    .remember-me ul li .check {
        display: block;
        position: absolute;
        border: 2px solid var(--green-color);
        border-radius: 100%;
        height: 16px;
        width: 16px;
        top: 6px;
        left: 3px;
        z-index: 5;
        transition: border .25s linear;
        -webkit-transition: border .25s linear;
    }
    .remember-me ul li:hover .check {
        border: 2px solid var(--green-color);
    }
    .remember-me ul li .check:before {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 8px;
        width: 8px;
        top: 2px;
        left: 2px;
        margin: auto;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
    }
    .remember-me input[type=checkbox]:checked ~ .check:before{
        background: var(--green-color);
    }
/*---------- Login & Register Modal---------*/

/*---------- Terms and conditions Page | Privacy Page ----------*/
    .privacy-page, .terms-page {
        padding: 45px 0;
    }
    .privacy-page .title, .terms-page .title {
        /*font-family: var(--font-bold);*/
        font-size: 25px;
        text-align: center;
        padding-bottom: 45px;
    }
    .privacy-page p, .terms-page p {
        padding-bottom: 16px;
        padding-bottom: 16px;
        padding-bottom: 1rem;
    }
/*---------- Terms and conditions Page | Privacy Page ----------*/

/*---------- About Page ----------*/
    .about-page .backgound-image {
        position: relative;
        height: 50vh;
        width: 100%;
        overflow: hidden;
    }
    .about-page .backgound-image img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .about-page .about-block {
        position: relative;
        background-color: rgba(255,255,255,0.8);
        top: -200px;
        width: 100%;
        padding: 25px;
        padding-right: 50px;
    }
    .about-page .about-block .title {
        font-size: 25px;
        color: var(--green-color);
        padding-bottom: 25px;
    }
    .about-page .about-block .title2 {
        font-size: 20px;
        color: var(--green-color);
    }
    .about-page .about-block .paragraph {
        color: var(--gray-color);
    }
    .about-page .iphonex-picture {
        position: relative;
        top: -235px;
        height: 450px;
        float: left;
        width: 250px;
    }
    .about-page .iphonex-picture img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .about-page .samsung-picture {
        position: relative;
        top: -150px;
        height: 450px;
        float: left;
        width: 250px;
    }
    .about-page .samsung-picture img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .about-page .about-block .paragraph p {
        padding-bottom: 15px;
    }
/*---------- About Page ----------*/

/*---------- Home Page ----------*/
    .home-page .map {
        width: 100%;
        height: calc(100vh - var(--navbar-height) - 80px);
    }
    .home-page .map span {
        display: none !important;
    }
    .home-page .rating ul:last-child {
        position: relative;
        top: -5px;
    }
    .home-page .scroll-icon {
        position: relative;
        text-align: center;
        height: 80px;
    }
    .home-page .scroll-icon svg {
        cursor: pointer;
        height: 80px;
    }
    .home-page .check-input {
        width: 100%;
    }
    .home-page .check-input input[type=radio]:checked ~ label {
        background-color: var(--green-color);
    }
    .home-page .check-input .item {
        text-align: center;
    }
    .home-page .check-input .item label{
        letter-spacing: 1px;
        padding: 0px 5px;
        background-color: var(--check-gray-color);
        border-radius: 10px;
        width: 100%;
    }
    .home-page .wage .check-input-three label, .home-page .distance .check-input-three label {
        width: 50px;
    }
    .home-page .btn-online, .home-page .btn-busy, .home-page .btn-offline {
        letter-spacing: 1px;
        padding: 0;
        margin: 0;
        line-height: 35px;
        height: 35px;
        background-color: var(--check-gray-color);
        width: 100%;
        text-transform: capitalize;
    }
    .home-page .btn-online.active {
        background-color: var(--green-color);
    }
    .home-page .btn-busy.active {
        background-color: var(--blue-color);
    }
    .home-page .btn-offline.active {
        background-color: var(--red-color);
    }
    .home-page .filter.title {
        font-size: 20px;
        padding: 25px 0px 10px 0;
        color: var(--green-color);
    }
    .home-page .filter.title .num {
        float: right;
        background-color: var(--green-color);
        color: white;
        height: 20px;
        line-height: 18px;
        width: auto;
        text-align: center;
        font-size: 14px;
        border-radius: 4px;
        padding: 0 2px;
    }
    .home-page .panel {
        padding: 15px;
        box-shadow: 2px 2px 7px 0px rgba(0,0,0,.06);
    }
    .home-page .input-custom {
        background-color: var(--green-color);
        color: white;
        padding: 0 30px 0 15px !important;
        margin-right: 5px !important;
    }
    .home-page .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: white;
    }
    .home-page .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: white;
    }
    .home-page .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: white;
    }
    .home-page .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: white;
    }
    .home-page .search-form .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--blue-color);
    }
    .home-page .search-form .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--blue-color);
    }
    .home-page .search-form .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--blue-color);
    }
    .home-page .search-form .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--blue-color);
    }
    .home-page .input .svg {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        right: 20px;
        height: 25px;
        width: 25px;
    }
    .home-page .input .svg svg {
        height: 25px;
        width: 25px;
    }
    .home-page .input {
        position: relative;
    }
    .home-page .input .input-custom {
        background-color: white;
        width: 400px;
        padding: 0px 50px 0 15px !important;
        border: 0 !important;
        color: var(--blue-color);
        box-shadow: 1px 5px 11px rgba(0,0,0,0.2) !important;
        height: 45px;
        margin: 0px !important;
    }
    .home-page .search-icon {
        position: absolute;
        z-index: 1;
        top: 20px;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        right: 55px;
    }
    .home-page p.reset {
        font-family: var(--font-light);
        color: var(--green-color);
        /*font-size: 14px;*/
        line-height: 35px;
        padding: 0;
        cursor: pointer;
    }
    .home-page .btn-morefilters, .home-page .btn-submit {
        background-color: var(--red-color);
        width: 100%;
        border-radius: 10px;
        margin: 0;
        height: 45px;
    }
    .home-page .more-filters {
        display: none;
    }
    .home-page .wage, .home-page .distance {
        font-family: var(--font-light);
        color: var(--green-color);
        /*font-size: 14px;*/
        padding-top: 45px;
    }
    .home-page .wage svg, .home-page .distance svg {
        position: relative;
        top: 4px;
    }
    .home-page .main-jobs {
        padding-bottom: 10px;
        width: 100%;
    }
    .home-page .main-jobs:first-child {
        padding-top: 20px;
    }
    .home-page .main-jobs:not(:first-child) {
        padding-top: 50px;
    }
    .home-page .main-jobs .title {
        /*font-family: var(--font-heavy);*/
        color: var(--green-color);
        font-size: 21px;
        line-height: 20px;
    }
    .home-page .check-input-three ul li.online-jobs label {
        height: 45px;
        line-height: 43px;
        border-bottom-right-radius: unset !important;
        border-top-right-radius: unset !important;
        padding: 0px;
    }
    .home-page .check-input-three ul li.local-jobs label {
        height: 45px;
        line-height: 43px;
        border-bottom-left-radius: unset !important;
        border-top-left-radius: unset !important;
        padding: 0px;
    }
    .home-page .wage .check-input-three ul, .home-page .distance .check-input-three ul {
        -webkit-column-count: unset;
           -moz-column-count: unset;
                column-count: unset;
        float: right;
        display: table;
        width: 100%;
    }
    .home-page .check-input-three.jobs ul li label {
        font-family: var(--font-heavy);
    }
    .home-page .check-input-three.jobs ul {
        -webkit-column-count: unset;
           -moz-column-count: unset;
                column-count: unset;
        display: table;
        width: 100%;
    }
    .home-page .wage .check-input-three ul li, .home-page .distance .check-input-three ul li {
        display: table-cell;
        width: 50%;
    }
    .home-page .check-input-three.jobs ul li {
        display: table-cell;
        width: 50%;
    }
    .home-page .distance .range output span {
        font-family: var(--font-light);
        /*font-size: 13px;*/
    }
    .home-page .search-form {
        position: fixed;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 115px;
        left: 50%;
        z-index: 10;
    }
    .home-page .search-form .arrow {
        display: none;
        color: white;
        position: absolute;
        right: 22px;
        top: 28px;
        font-size: 30px;
        z-index: 10;
        height: 0;
    }
    .home-page .search-form .result {
        position: fixed;
        display: none;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 100px;
        left: 50%;
        height: auto;
        width: 400px;
        background-color: white;
        box-shadow: 3px 3px 9px rgba(0,0,0,0.1);
        padding: 20px;
        max-height: 155px;
        overflow: auto;
    }
    .home-page .search-form .clearall {
        float: right;
        /*font-size: 10px;*/
        color: var(--blue-color) !important;
        position: relative;
        top: -15px;
        right: -11px;
    }
    .home-page .search-form .result li {
        /*font-size: 12px;*/
        color: var(--blue-color);
    }
    .home-page .search-form .result li:not(:last-child) {
        border-bottom: 0.5px solid var(--blue-color);
        padding-bottom: 15px;
        padding-top: 15px;
    }
    .home-page .search-form .result li:first-child {
        padding-top: 0px;
    }
    .home-page .search-form .result li:last-child {
        padding-top: 15px;
    }
/*---------- Home Page ----------*/

/*---------- Job Page ----------*/
    .job-page {
        font-family: var(--font-book);
    }
    .job-page .job-slick {
        height: 100%;
        width: 100%;
        max-height: 566px;
    }
    .job-page .job-details {
        width: 90%;
    }
    .job-page .job-slick img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .job-page .username {
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
    }
    .job-page .title, .job-page .title2 {
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
    }
    .job-page .fa-star:before, .job-page .fa-star-o:before {
        font-size: 25px;
    }
    .job-page .rating {
        width: 145px;
        font-size: 17px;
    }
    .job-page .rating span {
        padding: 0 8px;
    }
    .job-page .rating ul li {
        margin-right: 8px !important;
    }
    .job-page .trust ul.trust li {
        margin-right: 35px !important;
    }
    .job-page .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .job-page .paragraph {
        color: var(--gray-color);
        /*font-size: 14px;*/
    }
    .job-page .date {
        font-family: var(--font-light);
        color: var(--red-color);
    }
    .job-page .monthly-cost {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        right: -580px;
        top: 300px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
    }
    .job-page .monthly-cost .monthly {
        color: white;
        font-family: var(--font-light);
        font-size: 17px;
        position: relative;
        top: 6px;
    }
    .job-page .monthly-cost .cost {
        color: white;
        font-family: var(--font-heavy);
        font-size: 24px;
        line-height: 26px;
    }
    .job-page .schedule .title {
        text-align: center;
    }
    .job-page .schedule {
        position: relative;
        left: 20%;
        width: 80%;
    }
    .job-page .schedule .time {
        color: var(--green-color);
    }
    .job-page .schedule .time > div {
        width: 50%;
        height: 52px;
    }
    .job-page .schedule .time > div:first-of-type { 
        border-right: 2px solid var(--green-color);
    }
    .job-page .schedule .time > div:last-of-type > section { 
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .job-page .schedule .time section span:first-of-type {
        font-family: var(--font-book);
        /*font-size: 14px;*/
    }
    .job-page .schedule .time section span:last-of-type {
        font-family: var(--font-heavy);
        font-size: 18px;
    }
    .job-page .btn-more-jobs, .job-page .btn-contact, .job-page .btn-report {
        width: 100%;
        height: 45px;
        margin: 0;
    }
    .job-page .btn-more-jobs {
        border: 2px solid var(--green-color);
        background: transparent;
        color: var(--green-color) !important;
        text-transform: uppercase;
        margin-bottom: 10px;
    } 
    .job-page .btn-contact {
        font-size: 15px;
        background-color: var(--green-color);
        text-transform: uppercase;
        margin-right: 5px;
    } 
    .job-page .btn-report {
        font-size: 15px;
        background-color: var(--red-color);
        text-transform: uppercase;
        margin-left: 5px;
    }
/*---------- Job Page ----------*/

/*---------- Reviews Page ----------*/
    .reviews-page {
        font-family: var(--font-book);
    }
    .reviews-page .reviews {
        margin-top: 20px !important;
        margin-bottom: 30px;
    }
/*---------- Reviews Page ----------*/

/*---------- Jobs Page ----------*/
    .jobs-page .job {
        margin-top: 30px
    }
    .jobs-page .main-jobs {
        margin-bottom: 30px;
    }
    .jobs-page jobs .title {
        font-size: 25px;
    }
    .jobs-page .check-input .item {
        text-align: center;
    }
    .jobs-page .check-input .item label{
        font-family: var(--font-light);
        /*font-size: 13px;*/
        letter-spacing: 1px;
        padding: 0px 5px;
        background-color: var(--check-gray-color);
        width: 100%;
    }
/*---------- Jobs Page ----------*/

/*---------- Profile Page ----------*/
    .profile-page .min-height {
        margin-bottom: 60px;
    }
    .profile-page .btn-personal, .profile-page .btn-my-jobs, .profile-page .btn-my-history {
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--color-job-footer);
        width: 100%;
        color: var(--color-modal-placeholder) !important;
    }
    .profile-page .btn-personal.active, .profile-page .btn-my-jobs.active, .profile-page .btn-my-history.active {
        background-color: var(--green-color);
        color: white !important;
    }
    .profile-page .profile-picture {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        margin-bottom: 10px;
        width: 120px;
        height: 120px;
    }
    .profile-page .profile-picture + div {
        margin-bottom: 80px;
        text-align: center;
    }
    .profile-page .menu, .profile-page .first-row {
        margin-bottom: 50px;
    }
    .profile-page .rating {
        width: 145px;
        font-size: 17px;
    }
    .profile-page .fa-star:before, .profile-page .fa-star-o:before {
        font-size: 25px;
    }
    .profile-page .rating span {
        padding: 0 8px;
    }
    .profile-page .rating ul li {
        margin-right: 8px !important;
    }
    .profile-page .rating.trust ul li {
        margin-right: 35px !important;
    }
    .profile-page .title {
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
        line-height: 20px;
    }
    .profile-page .sub-title {
        font-family: var(--font-light);
        color: var(--green-color);
    }
    .profile-page .find-on-map .sub-title {
        font-size: 12px;
    }
    .profile-page .map {
        width: 100%;
        height: 100%;
    }
    .profile-page .map span {
        display: none !important;
    }
    .profile-page .find-on-map {
        width: 400px;
        padding: 15px;
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: rgba(255,255,255,0.9);
        border-radius: 5px;
    }
    .profile-page .locations {
        font-family: var(--font-book);
        width: 400px;
        padding: 10px 15px;
        position: absolute;
        top: 135px;
        right: 20px;
        background-color: var(--green-color);
        border-radius: 5px;
        height: 115px;
    }
    .profile-page .locations li {
        /*font-size: 12px;*/
        color: white;
    }
    .profile-page .locations li:not(:last-child):not(:first-child) {
        border-bottom: 0.5px solid white;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .profile-page .locations li:first-child {
        border-bottom: 0.5px solid white;
        padding-bottom: 8px;
    }
    .profile-page .locations li:last-child {
        padding-top: 8px;
    }
    .profile-page .btn-activate {
        height: 35px;
        width: 140px;
        background-color: var(--red-color);
        margin: 0;
        position: absolute;
        right: 16px;
    }
    .profile-page .add-locaions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-family: var(--font-light);
        font-size: 18px;
        color: var(--green-color);
        cursor: pointer;
    }
    .profile-page .add-locaions .plus {
        color: white;
        background-color: var(--green-color);
        width: 20px;
        height: 20px;
        line-height: 17px;
        text-align: center;
        border-radius: 50%;
        margin-right: 15px;
        font-size: 20px;
    }
    .profile-page .about-me {
        height: 210px;
    }
    .profile-page .btn-edit, .profile-page .btn-save {
        height: 35px;
        width: 130px;
        float: right;
    }
    .profile-page .btn-edit {
        background-color: var(--blue-color);
    }
    .profile-page .btn-save {
        background-color: var(--green-color);
        display: none;
    }
    .profile-page .custom-panel {
        margin-top: 60px;
    }
    .profile-page .custom-panel .title, .profile-page .custom-panel .sub-title {
        color: white;
    }
    .profile-page .custom-panel .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 20px;
        height: 80px;
    }
    .profile-page .custom-panel .custom-header > div > div:first-child {
        padding-bottom: 5px;
    }
    .profile-page .btn-add {
        height: 40px;
        width: 180px;
        float: right;
        background-color: white;
        color: var(--red-color) !important;
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        right: 20px;
        margin: 0;
    }
    .profile-page .custom-panel .custom-footer {
        position: relative;
        background-color: var(--color-job-footer);
        font-family: var(--font-book);
        width: 100%;
        height: 100%;
        padding: 15px;
    }
    .profile-page .custom-panel .custom-footer li.active {
        font-family: var(--font-bold);
        color: var(--green-color);
    }
    .profile-page .custom-panel .custom-footer li {
        /*font-size: 14px;*/
        color: var(--color-modal-placeholder);
    }
    .profile-page .custom-panel .custom-footer li:not(:last-child) {
        border-bottom: 0.5px solid var(--color-modal-placeholder);
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .profile-page .custom-panel .custom-footer li:first-child {
        padding-top: 0px;
    }
    .profile-page .custom-panel .custom-footer li:last-child {
        padding-top: 10px;
    }
    .profile-page .custom-panel .activate-mark, .profile-page .custom-panel .dollar {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 54%;
        right: 210px;
    }
    .profile-page .hourly-rate .input {
        height: 40px;
        width: 170px;
        float: right;
        border: 2px solid white;
        border-radius: 10px;
        color: white !important;
        font-family: var(--font-heavy);
        /*font-size: 11px;*/
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        right: 20px;
    }
    .profile-page .hourly-rate .input * {
        position: relative;
        top: 5px;
        font-family: var(--font-heavy);
        font-size: 15px;
    }
    .profile-page .hourly-rate .input .input-custom {
        padding: 0;
        text-align: right;
        width: 50%;
        border: 0 !important;
        color: white;
    }
    .profile-page .hourly-rate .input .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: white;
        font-family: var(--font-heavy);
        font-size: 15px;
    }
    .profile-page .hourly-rate .input .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: white;
        font-family: var(--font-heavy);
        font-size: 15px;
    }
    .profile-page .hourly-rate .input .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: white;
        font-family: var(--font-heavy);
        font-size: 15px;
    }
    .profile-page .hourly-rate .input .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: white;
        font-family: var(--font-heavy);
        font-size: 15px;
    }
    .profile-page .payment .custom-footer span {
        font-family: var(--font-heavy);
        text-transform: uppercase;
        color: var(--green-color);
        /*font-size: 13px;*/
    }
    .profile-page .payment .custom-footer  a {
        text-transform: capitalize;
        color: var(--color-modal-placeholder) !important;
        position: relative;
        top: -9px;
    }
    .profile-page .payment .custom-footer > .active a {
        color: var(--green-color) !important;
    }
    .profile-page .payment .custom-footer > div > div {
        padding: 7px 0px;
    }
    .profile-page .payment .custom-footer > div:first-child {
        height: calc(100% - 85px);
    }
    .profile-page .custom-panel.verify-info .verified, .profile-page .custom-panel.verify-info .verify {
        float: right;
        text-transform: capitalize;
    }
    .profile-page .custom-panel.verify-info .verify {
        cursor: pointer;
    }
    .profile-page .my-skills .input-custom {
        color: var(--green-color);
        background-color: white;
        border: 0 !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .profile-page .my-skills .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-size: 14px;
        color: var(--green-color);
    }
    .profile-page .my-skills .input-custom::-moz-placeholder /* Firefox 19+ */ {
        font-size: 14px;
        color: var(--green-color);
    }
    .profile-page .my-skills .input-custom:-ms-input-placeholder /* IE 10+ */ {
        font-size: 14px;
        color: var(--green-color);
    }
    .profile-page .my-skills .input-custom:-moz-placeholder /* Firefox 18- */ {
        font-size: 14px;
        color: var(--green-color);
    }
    .profile-page .my-skills .input {
        position: relative;
        margin-bottom: 10px;
    }
    .profile-page .my-skills .input .svg {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 47%;
        right: 0;
        height: 15px;
        width: 15px;
    }
    .profile-page .my-skills .custom-footer .row {
        -webkit-column-count: 4;
           -moz-column-count: 4;
                column-count: 4;
        margin-right: -5px;
        margin-left: -5px;
    }
    .profile-page .my-skills .custom-footer .row > div:first-child {
        padding-left: 5px;
        padding-right: 5px;
    }
    .profile-page .my-skills .custom-footer .row > div:last-child {
        padding-left: 5px;
        padding-right: 5px;
    }
    .profile-page .my-skills .custom-footer .row > div:not(:first-child):not(:last-child) {
        padding-left: 5px;
        padding-right: 5px;
    }
    .profile-page .my-skills .custom-footer .row > div > div {
        background-color: var(--green-color);
        border-radius: 10px;
        border: none !important;
        height: 40px;
        text-align: center;
        color: white;
        font-family: var(--font-light);
        font-size: 13px;
        position: relative;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
    .profile-page .my-skills .custom-footer .row div label {
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        margin: 0;
        padding: 0 14px; 
        max-height: 40px;
    }
    .profile-page .my-skills .custom-footer .row div .close-custom {
        position: absolute;
        top: 3px;
        right: 5px;
    }
    .profile-page .my-skills .custom-footer .btn-add-filter, .profile-page .custom-footer .btn-add-payment {
        background-color: var(--green-color);
        height: 40px;
        width: 50%;
        margin: 0;
        margin-right: 15px;
    }
    .profile-page .my-skills .custom-footer .btn-clear, .profile-page .custom-footer .btn-upload-photo {
        background-color: var(--blue-color);
        height: 40px;
        width: 50%;
        margin: 0;
        margin-left: 15px;
    }
    .profile-page .custom-footer .btn-add-payment {
        margin-bottom: 15px !important;
    }
    .profile-page .custom-footer .btn-add-payment, .profile-page .custom-footer .btn-upload-photo {
        width: 100% !important;
        margin: 0;
    }
    .profile-page .my-skills .custom-footer .btn-add-filter {
        background-color: var(--green-color);
        height: 40px;
        width: 50%;
        margin: 0;
        margin-right: 15px;
    }
    .profile-page .my-skills .custom-footer .btn-clear {
        background-color: var(--blue-color);
        height: 40px;
        width: 50%;
        margin: 0;
        margin-left: 15px;
    }
    .profile-page .payment .radio-option input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        cursor: pointer;
    }
    .profile-page .payment .radio-option {
        cursor: pointer;
        height: 28px;
        width: 28px;
        margin-right: 15px;
    }
    .profile-page .payment .radio-option input:not(:checked) ~ .checked {
        display: none !important;
    }
    .profile-page .payment .radio-option input:checked ~ .checked {
        display: block !important;
    }
    .profile-page .payment .radio-option input:not(:checked) ~ .unchecked {
        display: block !important;
    }
    .profile-page .payment .radio-option input:checked ~ .unchecked {
        display: none !important;
    }
    .profile-page .my-wallet no-wallets {
        display: block;
    }
    .profile-page .my-wallet no-wallets section {
        text-align: center;
        padding: 20px 0;
    }
    .profile-page .my-wallet no-wallets .btn-activate-now {
        height: 40px;
        width: 220px;
        background-color: var(--green-color);
        margin: 0;
        margin-top: 10px;
    }
    .profile-page .my-wallet no-wallets > .title {
        color: var(--green-color);
    }
    .profile-page .my-wallet no-wallets .sub-title {
        color: var(--green-color) !important;
        /*font-size: 13px;*/
    }
    .profile-page .my-wallet have-wallets {
        display: block;
    }
    .profile-page .my-wallet have-wallets .sub-title {
        font-family: var(--font-bold);
        color: var(--green-color) !important;
        /*font-size: 13px;*/
    }
    .profile-page .my-wallet have-wallets section > div {
        font-family: var(--font-heavy);
        /*font-size: 13px;*/
        color: var(--green-color);
        padding: 10px 0;
    }
    .profile-page .my-wallet have-wallets .arrows {
        float: right;
        position: relative;
        top: 9px;
    }
    .profile-page .my-wallet account > section > div:first-child {
        width: 80px
    }
    .profile-page .my-wallet account > section > div:last-child {
        width: 80px;
        color: var(--red-color);
        font-family: var(--font-bold);
        /*font-size: 12px;*/
        text-align: right;
    }
    .profile-page .my-wallet account  {
        display: none;
    }
    .profile-page .my-wallet account > section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .profile-page .my-wallet account > section > div:not(:first-child):not(:last-child) {
        width: 100%;
        color: var(--green-color) !important;
    }
    .profile-page .my-wallet account svg {
        top: 0!important;
    }
    .profile-page .my-wallet account .btitle svg {
        top: 4px !important;
        position: relative;
    }
    .profile-page .my-wallet account .atitle {
        font-family: var(--font-heavy);
        padding-bottom: 5px;
        border-bottom: 1px solid var(--color-modal-placeholder2);
    }
    .profile-page .my-wallet account .btitle {
        font-family: var(--font-light);
    }
    .profile-page .my-wallet account .btitle:not(:last-child) {
        border-bottom: 1px solid var(--color-modal-placeholder2);
    }
    .profile-page .my-wallet account .btitle div {
        padding-bottom: 5px;
        padding-top: 5px;
    }
/*---------- Profile Page ----------*/

/*---------- Verify Phone Number modal ----------*/
    .custom-modal .phone-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .phone-modal .custom-header .title {
        color: white;
        /*font-family: var(--font-bold);*/
        text-transform: uppercase;
        font-size: 20px;
    }
    .custom-modal .phone-modal .custom-footer .error-message {
        padding: 0px;
    }
    .custom-modal .phone-modal .custom-footer .title {
        /*font-family: var(--font-heavy);*/
        color: var(--green-color);
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    .custom-modal .phone-modal .custom-footer .input-custom {
        background-color: transparent !important;
        border: 1px solid var(--color-modal-placeholder) !important;
        height: 35px;
        font-family: var(--font-medium);
        padding: 0px 10px;
        margin-bottom: 20px;
        max-width: 300px;
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .custom-modal .phone-modal .custom-footer .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-family: var(--font-medium);
    }
    .custom-modal .phone-modal .custom-footer .input-custom::-moz-placeholder /* Firefox 19+ */ {
        font-family: var(--font-medium);
    }
    .custom-modal .phone-modal .custom-footer .input-custom:-ms-input-placeholder /* IE 10+ */ {
        font-family: var(--font-medium);
    }
    .custom-modal .phone-modal .custom-footer .input-custom:-moz-placeholder /* Firefox 18- */ {
        font-family: var(--font-medium);
    }
    .custom-modal .phone-modal .custom-footer .btn-submit {
        height: 35px;
        width: 250px;
        background-color: var(--green-color);
        margin: 0;
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
/*---------- Verify Phone Number modal ----------*/

/*---------- Add Education Modal | Add Employment Modal ----------*/
    .custom-modal .ecducation-modal .custom-header, .custom-modal .employment-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .ecducation-modal .custom-header .title, .custom-modal .employment-modal .custom-header .title {
        color: white;
        text-transform: uppercase;
        font-size: 20px;
    }
    .custom-modal .ecducation-modal .custom-footer span, .custom-modal .employment-modal .custom-footer span {
        font-family: var(--font-heavy);
        color: var(--blue-color);
        font-size: 18px;
    }
    .custom-modal .ecducation-modal .custom-footer .input-custom, .custom-modal .employment-modal .custom-footer .input-custom {
        background-color: transparent !important;
        border: 1px solid var(--color-modal-placeholder) !important;
        height: 35px;
        font-family: var(--font-medium);
        /*font-size: 12px;*/
        padding: 0px 10px;
    }
    .custom-modal .ecducation-modal .custom-footer .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .ecducation-modal .custom-footer .input-custom::-moz-placeholder /* Firefox 19+ */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .ecducation-modal .custom-footer .input-custom:-ms-input-placeholder /* IE 10+ */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .ecducation-modal .custom-footer .input-custom:-moz-placeholder /* Firefox 18- */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .employment-modal .custom-footer .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .employment-modal .custom-footer .input-custom::-moz-placeholder /* Firefox 19+ */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .employment-modal .custom-footer .input-custom:-ms-input-placeholder /* IE 10+ */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .employment-modal .custom-footer .input-custom:-moz-placeholder /* Firefox 18- */ {
        font-family: var(--font-medium);
        /*font-size: 12px;*/
    }
    .custom-modal .ecducation-modal .custom-footer .input-custom.description, .custom-modal .employment-modal .custom-footer .input-custom.description {
        height: 135px;
    }
    .custom-modal .ecducation-modal .custom-footer .btn-save,.custom-modal .employment-modal .custom-footer .btn-save {
        height: 35px;
        width: 250px;
        background-color: var(--green-color);
        margin: 0;
    }
/*---------- Add Education Modal | Add Employment Modal ----------*/

/*---------- My Skills Modal ----------*/
    .custom-modal .myskills-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .myskills-modal .custom-header .title {
        color: white;
        /*font-family: var(--font-bold);*/
        font-size: 20px;
        text-transform: uppercase;
    }
    .custom-modal .myskills-modal .custom-footer .title {
        color: var(--blue-color);
    }
    .custom-modal .myskills-modal .custom-footer .clear {
        font-family: var(--font-medium);
        color: var(--blue-color);
        float: right;
    }
    .custom-modal .myskills-modal .input-custom {
        background-color: var(--color-job-footer);
        border: none !important;
        height: 35px;
        color: var(--blue-color);
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .myskills-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--blue-color);
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .myskills-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--blue-color);
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .myskills-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--blue-color);
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .myskills-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--blue-color);
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .myskills-modal .check-input-three ul {
        -webkit-column-count: 4;
           -moz-column-count: 4;
                column-count: 4;
    }
    .custom-modal .myskills-modal .btn-reset {
        background-color: var(--red-color);
        height: 35px;
        width: 150px;
        margin: 0;
        float: right;
    }
    .custom-modal .myskills-modal .input {
        position: relative;
    }
    .custom-modal .myskills-modal .input .svg {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 47%;
        right: 0;
        height: 15px;
        width: 15px;
    }
/*---------- My Skills Modal ----------*/

/*---------- Add Payment Modal ----------*/
    .custom-modal .add-payment-modal {
        top: 40% !important;
    }
    .custom-modal .add-payment-modal input[type=file] {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        width: 1px;
    }
    .custom-modal .add-payment-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .add-payment-modal .custom-header .title {
        color: white;
        /*font-family: var(--font-bold);*/
        font-size: 20px;
        text-transform: uppercase;
    }
    .custom-modal .add-payment-modal .input-custom {
        height: 35px;
        color: var(--green-color);
        font-family: var(--font-light);
        padding: 0px 10px;
        border: 1px solid var(--green-color) !important;
    }
    .custom-modal .add-payment-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--green-color);
        font-family: var(--font-light);
    }
    .custom-modal .add-payment-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--green-color);
        font-family: var(--font-light);
    }
    .custom-modal .add-payment-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--green-color);
        font-family: var(--font-light);
    }
    .custom-modal .add-payment-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--green-color);
        font-family: var(--font-light);
    }
    .custom-modal .add-payment-modal span {
        font-size: 18px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .custom-modal .add-payment-modal .btn-upload-photo {
        float: right;
        width: 150px;
        height: 35px;
        background-color: var(--green-color);
        position: relative;
        top: -3px;
        margin: 0;
    }
    .custom-modal .add-payment-modal .custom-footer .btn-save {
        height: 35px;
        width: 150px;
        background-color: var(--green-color);
        margin: 0;
    }
    .custom-modal .add-payment-modal label.question-icon {
        font-family: var(--font-book);
        font-size: 18px;
        color: var(--green-color);
        text-transform: uppercase;
        margin-left: 10px;
        position: relative;
        width: 26px;
        height: 26px;
        text-align: center;
        top: 0px;
        margin-bottom: 0;
        cursor: pointer;
    }
    .custom-modal .add-payment-modal label.question-icon:after {
        content: "";
        border: 1px solid var(--green-color);
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        left: 1px;
        top: 3px;
    }
    .custom-modal .add-payment-modal select-arrow {
        z-index: 5;
        padding: 0 !important;
        cursor: pointer;
    }
    .custom-modal .add-payment-modal select-arrow:after {
        color: var(--green-color);
    }
    .custom-modal .add-payment-modal .list-box {
        display: none;
        background-color: white;
        position: absolute;
        width: 100%;
        top: 42px;
        max-height: 155px;
        overflow: auto;
    }
    .custom-modal .add-payment-modal select-arrow .list-box > div {
        padding: 3px 0;
        color: var(--green-color);
        font-family: var(--font-light);
        /*font-size: 14px;*/
    }
    .custom-modal .add-payment-modal select-arrow .input-custom {
        padding: 4px 0;
        text-align: left !important;
    }
    .custom-modal .add-payment-modal select-arrow.countries-list img, .custom-modal .add-payment-modal select-arrow.payments-list img {
        width: 25px;
        height: 25px;
        -o-object-fit: contain;
           object-fit: contain;
        border-radius: 10px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .custom-modal .add-payment-modal select-arrow .input-custom label {
        margin: 0; 
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .custom-modal .add-payment-modal select-arrow .list-box label {
        margin: 0; 
        position: relative;
        -webkit-transform: translateY(18%);
                transform: translateY(18%);
    }
/*---------- Add Payment Modal ----------*/

/*---------- Question Modal ----------*/
    .custom-modal .question-modal {
        background-color: var(--green-color) !important;
        padding: 25px 20px !important;
        color: white !important;
        top: calc(40% + 350px) !important;
        display: none;
    }
    .custom-modal .question-modal .title {
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .custom-modal .question-modal .sub-title {
        /*font-size: 13px;*/
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .custom-modal .question-modal .btn-ok {
        height: 35px;
        width: 150px;
        background-color: white;
        color: var(--green-color) !important;
        text-transform: uppercase;
        margin: 0;
    }
    .custom-modal .question-modal img {
        max-width: 100%;
        max-height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
/*---------- Question Modal ----------*/

/*---------- Edit Payment Modal ----------*/
    .custom-modal .edit-payment-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .edit-payment-modal .custom-header .title {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
    }
    .custom-modal .edit-payment-modal .input-custom {
        height: 35px;
        color: var(--green-color);
        font-family: var(--font-light);
        padding: 0px 10px !important;
        border: 1px solid var(--green-color) !important;
        width: 260px;
        text-align: center;
    }
    .custom-modal .edit-payment-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--green-color);
        font-family: var(--font-light);
        /*font-size: 14px;*/
    }
    .custom-modal .edit-payment-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--green-color);
        font-family: var(--font-light);
        /*font-size: 14px;*/
    }
    .custom-modal .edit-payment-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--green-color);
        font-family: var(--font-light);
        /*font-size: 14px;*/
    }
    .custom-modal .edit-payment-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--green-color);
        font-family: var(--font-light);
        /*font-size: 14px;*/
    }
    .custom-modal .edit-payment-modal p {
        /*font-size: 14px;*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .custom-modal .edit-payment-modal span {
        /*font-size: 13px;*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .custom-modal .edit-payment-modal .custom-footer .btn-submit {
        height: 35px;
        width: 260px;
        background-color: var(--green-color);
        margin: 0;
    }
/*---------- Edit Payment Modal ----------*/

/*---------- New Location Modal ----------*/
    .custom-modal .new-location-modal .custom-header,
    .custom-modal .edit-location-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .new-location-modal .custom-header .title,
    .custom-modal .edit-location-modal .custom-header .title {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
    }
    .custom-modal .new-location-modal .input-custom,
    .custom-modal .edit-location-modal .input-custom {
        height: 35px;
        font-family: var(--font-light);
        /*font-size: 12px;*/
        padding: 0px 10px !important;
        border: 1px solid var(--color-modal-placeholder) !important;
    }
    .custom-modal .new-location-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .new-location-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .new-location-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .new-location-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .edit-location-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .edit-location-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .edit-location-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .edit-location-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        font-family: var(--font-light);
        /*font-size: 12px;*/
    }
    .custom-modal .new-location-modal textarea.input-custom,
    .custom-modal .edit-location-modal textarea.input-custom {
        height: 135px;
    }
    .custom-modal .new-location-modal span,
    .custom-modal .edit-location-modal span {
        font-family: var(--font-heavy);
        color: var(--blue-color);
        font-size: 18px;
    }
    .custom-modal .new-location-modal .custom-footer .map,
    .custom-modal .edit-location-modal .custom-footer .map {
        height: 200px;
        width: 100%;
    }
    .custom-modal .new-location-modal .custom-footer .map span,
    .custom-modal .edit-location-modal .custom-footer .map span {
        display: none !important;
    }
    .custom-modal .new-location-modal .custom-footer .btn-save, .custom-modal .new-location-modal .custom-footer .btn-pin-location,
    .custom-modal .edit-location-modal .custom-footer .btn-save, .custom-modal .edit-location-modal .custom-footer .btn-pin-location {
        height: 35px;
        width: 170px;
        background-color: var(--green-color);
        margin: 0;
    }
    .custom-modal .new-location-modal .custom-footer .btn-pin-location,
    .custom-modal .edit-location-modal .custom-footer .btn-pin-location {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        left: 50%;
        bottom: -10px;
    }
    .custom-modal .edit-location-modal .custom-footer .btn-delete {
        height: 35px;
        width: 150px;
        background-color: var(--red-color);
        margin: 0;
        margin-right: 5px;
    }
    .custom-modal .edit-location-modal .custom-footer .btn-save {
        margin-left: 5px;
    }
/*---------- New Location Modal ----------*/

/*---------- My Jobs Page ----------*/
    .my-jobs-page .min-height {
        margin-bottom: 60px;
    }
    .my-jobs-page .btn-personal, .my-jobs-page .btn-my-jobs, .my-jobs-page .btn-my-history {
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--color-job-footer);
        width: 100%;
        color: var(--color-modal-placeholder) !important;
    }
    .my-jobs-page .btn-personal.active, .my-jobs-page .btn-my-jobs.active, .my-jobs-page .btn-my-history.active {
        background-color: var(--green-color);
        color: white !important;
    }
    .my-jobs-page jobs .job .cost cost {
        font-family: var(--font-bold);
    }
    .my-jobs-page jobs .job .cost {
        font-family: var(--font-medium);
        font-size: 17px;
        text-transform: uppercase;
        color: var(--green-color);
    }
    .my-jobs-page jobs .title {
        text-transform: uppercase;
    }
    .my-jobs-page jobs .main-jobs {
        padding: 60px 0;
    }
    .my-jobs-page jobs .sub-list .job-parent {
        padding: 6px;
    }
/*---------- My Jobs Page ----------*/

/*---------- Incomplete Job Page ----------*/
    .incomplete-job-page {
        font-family: var(--font-book);
    }
    .incomplete-job-page .job-slick {
        height: 100%;
        width: 100%;
        max-height: 535px;
    }
    .incomplete-job-page .job-slick img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .incomplete-job-page .main-title {
        font-family: var(--font-bold);
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .incomplete-job-page .username {
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
        text-transform: uppercase;
        margin-right: 20px;
        line-height: 21px;
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        text-align: center;
    }
    .incomplete-job-page .title svg {
        margin-left: 20px;
    }
    .incomplete-job-page .username book {
        font-family: var(--font-book);
    }
    .incomplete-job-page .username bold {
        font-family: var(--font-bold);
    }
    .incomplete-job-page .title {
        /*font-family: var(--font-heavy);*/
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
    }
    .incomplete-job-page .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .incomplete-job-page .paragraph {
        color: var(--gray-color);
        /*font-size: 14px;*/
    }
    .incomplete-job-page .date, .incomplete-job-page .date2 {
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
    }
    .incomplete-job-page .date span, .incomplete-job-page .date2 span {
        position: relative;
        top: 18%;
    }
    .incomplete-job-page .date {
        font-family: var(--font-light);
        color: var(--green-color);
        margin-right: 20px;
        width: 95px;
        height: 70px;
    }
    .incomplete-job-page .date2 {
        font-family: var(--font-light);
        color: var(--red-color);
        margin-right: 0px;
        padding-left: 20px;
        width: 200px;
        border-left: 2px solid var(--color-modal-placeholder);
        height: 70px;
    }
    .incomplete-job-page .hourly-cost {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: calc(100vw - 150px);
        top: 190px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
        text-align: center;
    }
    .incomplete-job-page .hourly-cost div {
        position: relative;
        left: 45px;
    }
    .incomplete-job-page .hourly-cost .hourly {
        position: relative;
        top: 0px;
        color: white;
        font-family: var(--font-light);
        /*font-size: 13px;*/
        text-transform: uppercase;
    }
    .incomplete-job-page .hourly-cost .cost {
        position: relative;
        top: 3px;
        color: white;
        font-family: var(--font-heavy);
        font-size: 24px;
        line-height: 26px;
    }
    .incomplete-job-page .btn-chat, .incomplete-job-page .btn-report, .incomplete-job-page .btn-stop-worker {
        width: 100%;
        height: 45px;
        margin: 0;
        color: white;
        text-transform: uppercase;
    }
    .incomplete-job-page .btn-chat {
        background: var(--green-color);
        margin-bottom: 10px;
    } 
    .incomplete-job-page .btn-report {
        background-color: var(--red-color);
        margin-right: 5px;
    } 
    .incomplete-job-page .btn-stop-worker {
        background-color: var(--blue-color);
        margin-left: 5px;
    }
    .incomplete-job-page .job-time {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        top: 16px;
    }
    .incomplete-job-page .job-time div {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 31%;
        text-align: center;
        padding: 0px 25px;
    }
    .incomplete-job-page .job-time div bold{
        font-family: var(--font-bold);
    }
    .incomplete-job-page .job-time div:not(:last-child) {
        color: var(--green-color);
        border-right: 2px solid var(--color-modal-placeholder);
    }
    .incomplete-job-page .buttons {
        margin-top: 50px;
    }
    .incomplete-job-page  .job-time div:last-child {
        color: var(--red-color);
    }
    .incomplete-job-page .user-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 25px;
    }
/*---------- Incomplete Job Page ----------*/

/*---------- Pending Job Page ----------*/
    .pending-job-page {
        font-family: var(--font-book);
    }
    .pending-job-page .job-slick {
        height: 100%;
        width: 100%;
        max-height: 535px;
    }
    .pending-job-page .job-slick img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .pending-job-page .main-title {
        font-family: var(--font-bold);
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .pending-job-page .username {
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
        text-transform: uppercase;
        margin-right: 20px;
        line-height: 21px;
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        text-align: center;
    }
    .pending-job-page .title svg {
        margin-left: 20px;
    }
    .pending-job-page .username book {
        font-family: var(--font-book);
    }
    .pending-job-page .username bold {
        font-family: var(--font-bold);
    }
    .pending-job-page .title {
        /*font-family: var(--font-heavy);*/
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
    }
    .pending-job-page .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .pending-job-page .paragraph {
        color: var(--gray-color);
        width: 90%;
        /*font-size: 14px;*/
    }
    .pending-job-page .buttons {
        margin-top: 50px;
    }
    .pending-job-page .date, .pending-job-page .date2 {
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
    }
    .pending-job-page .date span, .pending-job-page .date2 span {
        position: relative;
        top: 18%;
    }
    .pending-job-page .date {
        font-family: var(--font-light);
        color: var(--green-color);
        margin-right: 20px;
        width: 90px;
        height: 70px;
    }
    .pending-job-page .date2 {
        font-family: var(--font-light);
        color: var(--red-color);
        margin-right: 0px;
        padding-left: 20px;
        width: 180px;
        border-left: 2px solid var(--color-modal-placeholder);
        height: 70px;
    }
    .pending-job-page .hourly-cost {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: calc(100vw - 150px);
        top: 237px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
        text-align: center;
    }
    .pending-job-page .hourly-cost div {
        position: relative;
        left: 60px;
    }
    .pending-job-page .hourly-cost .hourly {
        position: relative;
        top: 0px;
        color: white;
        font-family: var(--font-light);
        /*font-size: 13px;*/
        text-transform: uppercase;
    }
    .pending-job-page .hourly-cost .cost {
        position: relative;
        top: 3px;
        color: white;
        font-family: var(--font-heavy);
        font-size: 24px;
        line-height: 26px;
    }
    .pending-job-page .btn-chat, .pending-job-page .btn-report, .pending-job-page .btn-stop-worker, .pending-job-page .btn-job-complete, .pending-job-page .btn-stop-timer {
        width: 100%;
        margin: 0;
        color: white;
        text-transform: uppercase;
    }
    .pending-job-page .btn-chat, .pending-job-page .btn-report, .pending-job-page .btn-stop-worker {
        height: 45px;
    }
    .pending-job-page .btn-job-complete, .pending-job-page .btn-stop-timer {
        height: 40px;
    }
    .pending-job-page .btn-chat {
        background: var(--green-color);
        margin-bottom: 10px;
    } 
    .pending-job-page .btn-report {
        background-color: var(--red-color);
        margin-right: 5px;
    } 
    .pending-job-page .btn-stop-worker {
        background-color: var(--blue-color);
        margin-left: 5px;
    }
    .pending-job-page .btn-job-complete {
        background-color: var(--red-color);
    } 
    .pending-job-page .btn-stop-timer {
        background-color: var(--blue-color);
        margin-bottom: 2px;
    }
    .pending-job-page .job-time {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        top: 16px;
    }
    .pending-job-page .job-time div {
        width: 175px;
    }
    .pending-job-page .job-time div:first-child {
        padding-right: 35px;
    }
    .pending-job-page .job-time div:not(:first-child):not(:last-child) {
        padding: 0px 35px;
    }
    .pending-job-page .job-time div:last-child {
        padding: 0;
    }
    .pending-job-page .job-time div {
        position: relative;
        text-align: center;
    }
    .pending-job-page .job-time div bold{
        font-family: var(--font-bold);
    }
    .pending-job-page .job-time div:nth-child(1), .pending-job-page .job-time div:nth-child(2) {
        color: var(--green-color);
        border-right: 2px solid var(--color-modal-placeholder);
    }
    .pending-job-page .job-time div:nth-child(3) {
        color: var(--red-color);
    }
    .pending-job-page .user-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 25px;
    }
/*---------- Pending Job Page ----------*/

/*---------- Repetitive Job Page ----------*/
    .repetitive-job-page {
        font-family: var(--font-book);
    }
    .repetitive-job-page .job-slick {
        height: 100%;
        width: 100%;
        max-height: 470px;
    }
    .repetitive-job-page .job-slick img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .repetitive-job-page .main-title {
        font-family: var(--font-bold);
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .repetitive-job-page .username {
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
        text-transform: uppercase;
        margin-right: 20px;
        line-height: 21px;
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        text-align: center;
    }
    .repetitive-job-page .title {
        /*font-family: var(--font-heavy);*/
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
    }
    .repetitive-job-page .job-details {
        border-bottom: 1px solid var(--color-modal-placeholder);
    }
    .repetitive-job-page .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .repetitive-job-page .paragraph {
        color: var(--gray-color);
        min-height: 200px;
        padding-bottom: 30px;
        /*font-size: 14px;*/
    }
    .repetitive-job-page .date {
        font-family: var(--font-light);
        color: var(--red-color);
        margin-bottom: 3px;
        margin-top: 10px;
    }
    .repetitive-job-page .date2 {
        font-family: var(--font-light);
        color: var(--color-modal-placeholder);
        padding-bottom: 15px;
    }
    .repetitive-job-page .hourly-cost {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: calc(100vw - 150px);
        top: 185px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
    }
    .repetitive-job-page .hourly-cost div {
        position: relative;
        left: 60px;
    }
    .repetitive-job-page .hourly-cost .hourly {
        position: relative;
        top: 0px;
        color: white;
        font-family: var(--font-light);
        font-size: 20px;
        text-transform: uppercase;
    }
    .repetitive-job-page .hourly-cost .cost {
        position: relative;
        top: 3px;
        color: white;
        font-family: var(--font-medium);
        font-size: 24px;
        line-height: 26px;
    }
    .repetitive-job-page .btn-more-jobs, .repetitive-job-page .btn-create-job, .repetitive-job-page .btn-create-new-job {
        width: 100%;
        height: 45px;
        margin: 0;
        color: white;
        text-transform: uppercase;
    }
    .repetitive-job-page .btn-more-jobs {
        background: var(--green-color);
        margin-bottom: 10px;
    } 
    .repetitive-job-page .btn-more-jobs svg {
        margin-right: 7px;
    }
    .repetitive-job-page .btn-create-job {
        background-color: var(--blue-color);
        margin-right: 5px;
    } 
    .repetitive-job-page .btn-create-new-job {
        background-color: var(--blue-color);
        margin-left: 5px;
    }
    .repetitive-job-page .rating {
        width: 90px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .repetitive-job-page .rating div:first-child {
        color: var(--color-modal-placeholder);
    }
    .repetitive-job-page .rating ul {
        width: 140px;
    }
    .repetitive-job-page .job-details + .rating .fa-star, .repetitive-job-page .job-details + .rating .fa-star-o {
        font-size: 20px;
    }
/*---------- Repetitive Job Page ----------*/

/*---------- My History Page ----------*/
    .my-history-page .min-height {
        margin-bottom: 60px;
    }
    .my-history-page .btn-personal, .my-history-page .btn-my-jobs, .my-history-page .btn-my-history {
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--color-job-footer);
        width: 100%;
        color: var(--color-modal-placeholder) !important;
    }
    .my-history-page .btn-personal.active, .my-history-page .btn-my-jobs.active, .my-history-page .btn-my-history.active {
        background-color: var(--green-color);
        color: white !important;
    }
    .my-history-page jobs .job .cost cost {
        font-family: var(--font-bold);
        font-size: 20px;
    }
    .my-history-page jobs .job .cost {
        font-family: var(--font-medium);
        font-size: 15px;
        text-transform: uppercase;
        color: var(--green-color);
    }
    .my-history-page jobs .main-jobs {
        padding: 60px 0 20px 0;
    }
    .my-history-page jobs .sub-list .job-parent {
        padding: 6px;
    }
    .my-history-page jobs .jobFooter .title {
        color: var(--green-color);
    }
    .my-history-page jobs label.date {
        width: 50px;
    }
    .my-history-page jobs .rating .fa-star, .my-history-page jobs .rating .fa-star-o {
        font-size: 25px;
    }
    .my-history-page jobs .rating ul:first-child li:not(:last-child) {
        margin-right: 10px !important;
    }
/*---------- My History Page ----------*/

/*---------- My All History Page ----------*/
    .my-all-history-page jobs .rating .fa-star, .my-all-history-page jobs .rating .fa-star-o {
        font-size: 25px;
    }
    .my-all-history-page .main-jobs {
        margin: 40px 0;
    }
    .my-all-history-page .min-height {
        margin-bottom: 60px;
    }
    .my-all-history-page jobs .rating ul:first-child li:not(:last-child) {
        margin-right: 10px !important;
    }
/*---------- My All History Page ----------*/

/*---------- Post a Job Page ----------*/
    .post-a-job-page .min-height {
        height: calc(100vh - var(--navbar-height));
    }
    .post-a-job-page .form-custom {
        width: 270px;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        text-align: center;
    }
    .post-a-job-page .svg svg {
        margin: 0px !important;
        top: 0 !important;
    }
    .post-a-job-page .title {
        /*font-family: var(--font-bold);*/
        font-size: 30px;
        color: var(--green-color);
        margin: 10px 0px;
    }
    .post-a-job-page .btn-post-job {
        font-size: 18px;
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--red-color);
        width: 100%;
    }
/*---------- Post a Job Page ----------*/

/*---------- Posting a Job Page ----------*/
    .posting-a-job-page .min-height {
        margin-bottom: 60px;
    }
    .posting-a-job-page .first-row {
        min-height: 300px;
        padding-bottom: 50px;
    }
    .posting-a-job-page .check-input-three ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .posting-a-job-page regular-job {
        margin-top: 80px;
    }
    .posting-a-job-page .first-row > .row {
        min-height: 300px;
    }
    .posting-a-job-page .first-row .check-input .check {
        border: 2px solid var(--green-color);
        left: 0px;
        height: 23px;
        width: 23px;
        top: 4px;
    }
    .posting-a-job-page .first-row .check-input input[type=radio]:checked ~ .check:before {
        background: var(--green-color);
        top: 3px;
        left: 3px;
    }
    .posting-a-job-page .first-row .check-input input[type=radio]:checked ~ label {
        font-family: var(--font-bold);
    }
    .posting-a-job-page .first-row .check-input .check:before {
        top: 3px;
        left: 3px;
    }
    .posting-a-job-page .first-row .check-input label {
        color: var(--blue-color);
        /*font-size: 12px;*/
        padding: 0px 0px 0px 40px;
        text-transform: capitalize;
    }
    .posting-a-job-page .first-row .title select-arrow {
        color: var(--blue-color);
        /*font-family: var(--font-bold);*/
        font-size: 20px;
        padding: 20px 0 10px 0px;
    }
    .posting-a-job-page .first-row .title select-arrow:after {
        font-size: 30px;
    }
    .posting-a-job-page .first-row textarea.input-custom {
        color: var(--color-modal-placeholder);
        /*font-size: 13px;*/
        border-radius: 0 !important;
        padding: 10px;
    }
    .posting-a-job-page .first-row textarea.input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--color-modal-placeholder);
        font-family: var(--font-light);
        /*font-size: 13px;*/
    }
    .posting-a-job-page .first-row textarea.input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--color-modal-placeholder);
        font-family: var(--font-light);
        /*font-size: 13px;*/
    }
    .posting-a-job-page .first-row textarea.input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--color-modal-placeholder);
        font-family: var(--font-light);
        /*font-size: 13px;*/
    }
    .posting-a-job-page .first-row textarea.input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--color-modal-placeholder);
        font-family: var(--font-light);
        /*font-size: 13px;*/
    }
    .posting-a-job-page .first-row .sub-title2 {
        font-family: var(--font-bold);
        color: var(--blue-color);
        font-size: 15px;
        padding: 15px 0 20px 0px;
    }
    .posting-a-job-page .first-row .description {
        font-family: var(--font-medium);
        /*font-size: 13px;*/
        color: var(--color-modal-placeholder);
        padding-left: 15px;
    }
    .posting-a-job-page .schedule-parent {
        background-color: var(--green-color);
        padding: 50px 0px;
    }
    .posting-a-job-page .schedule {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
        width: 100%;
        max-width: 420px;
    }
    .posting-a-job-page .schedule .title {
        /*font-family: var(--font-heavy);*/
        text-transform: uppercase;
        color: white;
        font-size: 20px;
        padding-bottom: 5px;
        text-align: center;
    }
    .posting-a-job-page .schedule .time {
        color: white;
    }
    .posting-a-job-page .schedule .time > div {
        width: 50%;
        height: 52px;
    }
    .posting-a-job-page .schedule .time > div:first-of-type { 
        border-right: 2px solid white;
    }
    .posting-a-job-page .schedule .time > div:last-of-type > section { 
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
    }
    .posting-a-job-page .schedule .time section span:first-of-type {
        font-family: var(--font-book);
        /*font-size: 14px;*/
    }
    .posting-a-job-page .schedule .time section input {
        font-family: var(--font-heavy);
        font-size: 18px;
        width: 95px;
        color: white;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    .posting-a-job-page .schedule .time section select-arrow:after {
        left: 80px;
        top: 45%;
        font-size: 25px;
        color: var(--red-color);
    }
    .posting-a-job-page .schedule .time section input::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-size: 18px;
        color: white;
    }
    .posting-a-job-page .schedule .time section input::-moz-placeholder /* Firefox 19+ */ {
        font-size: 18px;
        color: white;
    }
    .posting-a-job-page .schedule .time section input:-ms-input-placeholder /* IE 10+ */ {
        font-size: 18px;
        color: white;
    }
    .posting-a-job-page .schedule .time section input:-moz-placeholder /* Firefox 18- */ {
        font-size: 18px;
        color: white;
    }
    .posting-a-job-page .schedule .check-input-four ul li label {
        border: 1px solid white;
        color: white;
        cursor: pointer;
    }
    .posting-a-job-page .schedule .check-input-four input[type=checkbox]:checked ~ label, .posting-a-job-page .schedule .check-input-four input[type=radio]:checked ~ label{
        background-color: white;
        color: var(--green-color);
    }
    .posting-a-job-page .calendars .input-custom {
        border: 0 !important;
        background-color: var(--blue-color);
        color: white;
        font-family: var(--font-bold);
        font-size: 15px;
        padding: 0px 15px;
        height: 100%;
    }
    .posting-a-job-page .calendars .input-custom:not(:last-child) {
        margin-bottom: 10px;
    }
    .posting-a-job-page .calendars .input-custom select-arrow {
        height: 100%;
    }
    .posting-a-job-page .calendars label:last-child .input-custom select-arrow span {
        margin-right: 19px;
    }
    .posting-a-job-page .calendars label:first-child .input-custom select-arrow span {
        margin-right: 10px;
    }
    .posting-a-job-page .calendars label {
        width: 100%;
        height: 45px;
        background-color: var(--blue-color);
        border-radius: 10px;
    }
    .posting-a-job-page .calendars .input-custom svg {
        position: relative;
        top: 8px;
    }
    .posting-a-job-page .calendars .input-custom .start_date, .posting-a-job-page .calendars .input-custom .end_date {
        background: transparent;
        border: 0;
        width: 150px;
        color: white;
        padding: 0px 15px;
    }
    .posting-a-job-page .calendars select-arrow:after {
        font-size: 30px;
        color: white;
        right: -4px;
    }
    .posting-a-job-page .visibility .check-input-three li {
        width: 110px;
    }
    .posting-a-job-page .visibility .check-input-three input:not(:checked) ~ label {
        color: white;
    }
    .posting-a-job-page .visibility .check-input-three input:checked ~ label {
        color: var(--green-color);
    }
    .posting-a-job-page .visibility .check-input-three li label {
        width: 100%;
        height: 100%;
        line-height: 30px;
        border: 2px solid white;
    }
    .posting-a-job-page .visibility .check-input-three input:not(checked) + label svg .st400 {
        fill: white;
    }
    .posting-a-job-page .visibility .check-input-three input:checked + label svg .st400 {
        fill: var(--green-color);
    }
    .posting-a-job-page .visibility .check-input-three input:checked + label {
        background-color: white;
    }
    .posting-a-job-page .visibility .check-input-three input:not(checked) + label {
        background-color: var(--green-color);
    }
    .posting-a-job-page .visibility .check-input-three svg {
        position: relative;
        top: 2px;
    }
    .posting-a-job-page .visibility .check-input-three span {
        position: relative;
        top: 1px;
    }
    .posting-a-job-page .visibility .check-input-three li.right {
        left: -1px;
    }
    .posting-a-job-page .visibility .check-input-three li.left {
        right: -1px;
    }
    .posting-a-job-page .visibility .check-input-three {
        position: relative;
        left: -8px;
    }
    .posting-a-job-page .custom-panel.visibility .custom-header div.right {
        right: -100px;
    }
    .posting-a-job-page .custom-panel .custom-header div.right {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        right: -45px;
    }
    .posting-a-job-page .custom-panel .custom-header  div.right.date {
        font-family: var(--font-light);
        font-size: 15px;
        color: white;
    }
    .posting-a-job-page .custom-panel .custom-header .deadline {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        right: 200px;
    }
    .posting-a-job-page .custom-panel.upload-photo .title {
        /*font-family: var(--font-bold);*/
        font-size: 20px;
        color: var(--blue-color); 
        margin-bottom: 15px;
    }
    .posting-a-job-page .custom-panel.upload-photo li button.close {
        position: absolute;
        right: 20px;
        top: 5px;
        float: unset;
        display: none;
    }
    .posting-a-job-page .custom-panel.upload-photo .title svg {
        position: relative;
        top: 3px;
    }
    .posting-a-job-page .custom-panel.upload-photo .images ul {
        -webkit-column-count: 4;
           -moz-column-count: 4;
                column-count: 4;
    }
    .posting-a-job-page .custom-panel.upload-photo .images img {
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        cursor: pointer;
        max-height: 206px;
    }
    .posting-a-job-page .custom-panel.upload-photo .images input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    .posting-a-job-page .title {
        /*font-family: var(--font-heavy);*/
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
        line-height: 20px;
    }
    .posting-a-job-page .sub-title {
        font-family: var(--font-light);
        font-size: 12px;
        color: var(--green-color);
    }
    .posting-a-job-page .map {
        width: 100%;
        height: 100%;
    }
    .posting-a-job-page .map span {
        display: none !important;
    }
    .posting-a-job-page .find-on-map {
        width: 400px;
        padding: 15px;
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: rgba(255,255,255,0.9);
        border-radius: 5px;
    }
    .posting-a-job-page .locations {
        font-family: var(--font-book);
        width: 400px;
        padding: 10px 15px;
        position: absolute;
        top: 135px;
        right: 20px;
        background-color: var(--green-color);
        border-radius: 5px;
        height: 115px;
    }
    .posting-a-job-page .locations li {
        /*font-size: 12px;*/
        color: white;
    }
    .posting-a-job-page .locations li:not(:last-child) {
        border-bottom: 0.5px solid white;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .posting-a-job-page .locations li:first-child {
        padding-top: 0px;
    }
    .posting-a-job-page .locations li:last-child {
        padding-top: 10px;
    }
    .posting-a-job-page .btn-activate {
        height: 40px;
        width: 150px;
        background-color: var(--red-color);
        margin: 0;
        position: absolute;
        right: 16px;
    }
    .posting-a-job-page .add-locaions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-family: var(--font-light);
        font-size: 18px;
        color: var(--green-color);
        cursor: pointer;
    }
    .posting-a-job-page .add-locaions .plus {
        color: white;
        background-color: var(--green-color);
        width: 20px;
        height: 20px;
        line-height: 17px;
        text-align: center;
        border-radius: 50%;
        margin-right: 15px;
        font-size: 20px;
    }
    .posting-a-job-page .custom-panel {
        margin-top: 60px;
    }
    .posting-a-job-page .custom-panel .title, .posting-a-job-page .custom-panel .sub-title {
        color: white;
    }
    .posting-a-job-page .custom-panel .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 20px;
        height: 80px;
    }
    .posting-a-job-page .custom-panel .custom-footer {
        position: relative;
        background-color: white;
        border: 2px solid var(--color-job-footer);
        border-top: 0px;
        font-family: var(--font-book);
        width: 100%;
        padding: 20px;
        height: calc(100% - 80px);
    }
    .posting-a-job-page .custom-panel.type-of-job .custom-footer select-arrow:after,
    .posting-a-job-page .custom-panel.payment-method .custom-footer select-arrow:after {
        font-size: 30px;
        color: var(--red-color);
    }
    .posting-a-job-page .custom-panel.type-of-job .custom-footer select.input-custom,
    .posting-a-job-page .custom-panel.payment-method .custom-footer select.input-custom,
    .posting-a-job-page .custom-panel.payment-method .custom-footer input.input-custom {
        border: 2px solid var(--border-gray-color) !important;
        width: 225px;
        /*border-radius: 0 !important;*/
        height: 45px !important;
        font-family: var(--font-medium);
        /*font-size: 13px;*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .posting-a-job-page .custom-panel.payment-method .custom-footer input.input-custom {
        position: absolute;
        top: -9px;
        left: 125px;
        width: 140px;
        z-index: 10;
    }
    .posting-a-job-page .custom-panel.type-of-job,
    .posting-a-job-page .custom-panel.payment-method {
        height: 360px;
        overflow: hidden;
    }
    .posting-a-job-page .custom-panel.type-of-job .custom-footer svg,
    .posting-a-job-page .custom-panel.payment-method .custom-footer svg {
        position: relative;
        top: 8px;
        margin-right: 15px;
    }
    .posting-a-job-page .custom-panel.payment-method .range {
        color: var(--blue-color) !important;
    }
    .posting-a-job-page .custom-panel.payment-method .range .range-custom:after,
    .posting-a-job-page .custom-panel.payment-method .range .range-custom:before {
        color: var(--red-color);
    }
    .posting-a-job-page .custom-panel.payment-method .range-custom::-webkit-slider-runnable-track {
        background: var(--red-color);
    }
    .posting-a-job-page .custom-panel.payment-method .range-custom::-webkit-slider-thumb {
        border-top: 12px solid var(--blue-color);
    }
    .posting-a-job-page .custom-panel.payment-method .range-custom::-moz-range-thumb {
        border-top: 15px solid var(--red-color);
    }
    .posting-a-job-page .custom-panel.payment-method .range-custom::-ms-thumb {
        border-top: 15px solid var(--red-color);
    }
    .posting-a-job-page .buttons {
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
        margin-top: 50px;
        width: 100%;
        max-width: 300px;
    }
    .posting-a-job-page .btn-reset, .posting-a-job-page .btn-cancel, .posting-a-job-page .btn-send {
        width: 100%;
        height: 45px;
        margin: 0;
    }
    .posting-a-job-page .btn-reset {
        background: var(--green-color);
        color: white !important;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-right: 5px;
    }
    .posting-a-job-page .btn-cancel {
        background: var(--green-color);
        color: white !important;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-left: 5px;
    }
    .posting-a-job-page .btn-send {
        background: var(--blue-color);
        color: white !important;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .posting-a-job-page regular-job {
        display: block;
    }
/*---------- Posting a Job Page ----------*/

/*---------- Job Request Page ----------*/
    .job-request-page .container {
        padding-top: 50px;
    }
    .job-request-page .view-all {
        font-family: var(--font-bold);
        /*font-size: 13px;*/
        float: right;
        color: var(--red-color);
    }
    .job-request-page .check-input-three ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .job-request-page job-request {
        display: block;
    }
    .job-request-page job-request .title svg {
        margin-left: 20px;
    }
    .job-request-page job-request .job-slick {
        height: 100%;
        width: 100%;
        max-height: 535px;
    }
    .job-request-page job-request .job-slick img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .job-request-page job-request .title {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-heavy);*/
    }
    .job-request-page job-request .paragraph {
        font-family: var(--font-book);
        /*font-size: 14px;*/
        color: var(--gray-color);
    }
    .job-request-page job-request .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .job-request-page job-request .job-details > div:nth-child(1) {
        border-bottom: 1px solid var(--color-modal-placeholder);
        padding-bottom: 20px;
    }
    .job-request-page job-request .job-details > div:nth-child(2) {
        border-bottom: 1px solid var(--color-modal-placeholder);
        padding: 50px 0;
    }
    .job-request-page job-request .job-details > div:nth-child(3) {
        padding-top: 40px;
    }
    .job-request-page job-request .paragraph {
        width: 80%;
    }
    .job-request-page job-request .per-hour {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translate(-50%, -20%);
                transform: translate(-50%, -20%);
        right: -580px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
        text-align: center;
        z-index: 1;
    }
    .job-request-page job-request .per-hour div {
        position: relative;
        left: 45px;
    }
    .job-request-page job-request .per-hour .cost {
        position: relative;
        top: 3px;
        color: white;
        font-family: var(--font-heavy);
        font-size: 29px;
        line-height: 26px;
        color: white;
    }
    .job-request-page job-request .per-hour .hourly {
        position: relative;
        top: 0px;
        color: white;
        font-family: var(--font-light);
        text-transform: uppercase;
    }
    .job-request-page job-request .job-details > div:nth-child(2) .title2 {
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
        line-height: 20px;
        padding-bottom: 15px;
    }
    .job-request-page job-request .job-details > div:nth-child(2) .date {
        font-family: var(--font-light);
        /*font-size: 15px;*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .job-request-page job-request .job-details > div:nth-child(2) > div:not(:last-child) {
        border-right: 1px solid var(--color-modal-placeholder);
    }
    .job-request-page job-request .job-details > div:nth-child(2) > div:not(:first-child) {
        text-align: center;
    }
    .job-request-page job-request .job-details > div:nth-child(2) > div {
        width: 50%;
    }
    .job-request-page job-request .check-input-three ul {
        width: 197px;
    }
    .job-request-page job-request .check-input-three li {
        width: 90px;
    }
    .job-request-page job-request .check-input-three li label {
        width: 105px;
        height: 100%;
        line-height: 30px;
    }
    .job-request-page job-request .check-input-three li.right label {
        left: 14px;
    }
    .job-request-page job-request .check-input-three input:checked + label svg .st400 {
        fill: white;
    }
    .job-request-page job-request .check-input-three span {
        position: relative;
        top: 1px;
    }
    .job-request-page job-request .deadline-side > label {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .job-request-page job-request select-arrow {
        width: 100%;
    }
    .job-request-page job-request .select svg {
        position: relative;
        top: 9px;
        margin-right: 10px;
    }
    .job-request-page job-request select.input-custom {
        border: 2px solid var(--border-gray-color) !important;
        width: 100%;
        border-radius: 0 !important;
        height: 45px !important;
        font-family: var(--font-medium);
        /*font-size: 13px;*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .job-request-page job-request .btn-remove {
        width: 100%;
        background-color: var(--red-color);
        text-transform: uppercase;
        margin-right: 5px;
        height: 45px;
    }
    .job-request-page job-request .buttons {
        margin: 50px 0;
    }
    .job-request-page job-request .btn-outsource {
        width: 100%;
        background-color: var(--blue-color);
        text-transform: uppercase;
        margin-left: 5px;
        height: 45px;
    }
/*---------- Job Request Page ----------*/

/*---------- Job Seekers Page ----------*/
    .job-seekers-page .container {
        padding-top: 50px;
    }
    .job-seekers-page .row.r1 {
        padding-bottom: 80px;
        border-bottom: 1px solid var(--color-modal-placeholder);
    }
    .job-seekers-page .row.r2 {
        padding: 20px 0;
        border-bottom: 1px solid var(--color-modal-placeholder);
    }
    .job-seekers-page .title {
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
        padding-bottom: 10px;
        line-height: 20px;
    }
    .job-seekers-page .title2 {
        font-size: 20px;
        color: var(--red-color);
        text-transform: uppercase;
    }
    .job-seekers-page .rate .title2 {
        color: var(--blue-color);
    }
    .job-seekers-page .date {
        color: var(--red-color);
        font-family: var(--font-light);
        text-transform: uppercase;
    }
    .job-seekers-page .sub-title {
        /*font-size: 13px;*/
        color: var(--blue-color);
        font-family: var(--font-light);
        text-transform: uppercase;
    }
    .job-seekers-page .paragraph {
        /*font-size: 14px;*/
        color: var(--gray-color);
    }
    .job-seekers-page .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .job-seekers-page .per-hour {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        right: -580px;
        top: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
        text-align: center;
    }
    .job-seekers-page .per-hour div {
        position: relative;
        left: 45px;
    }
    .job-seekers-page .per-hour .cost {
        position: relative;
        top: 3px;
        color: white;
        font-family: var(--font-heavy);
        font-size: 29px;
        line-height: 26px;
        color: white;
    }
    .job-seekers-page .per-hour .hourly {
        position: relative;
        top: 0px;
        color: white;
        font-family: var(--font-light);
        /*font-size: 13px;*/
        text-transform: uppercase;
    }
    .job-seekers-page .row.r2 .title {
        color: var(--blue-color);
    }
    .job-seekers-page .row.r2 .profile-picture {
        width: 150px;
        height: 150px;
    }
    .job-seekers-page .rating ul {
        width: 170px;
    }
    .job-seekers-page .rating .fa-star, .job-seekers-page .rating .fa-star-o {
        font-size: 30px;
    }
    .job-seekers-page .rating span {
        padding: 0 10.5px;
        font-size: 17px;
    }
    .job-seekers-page .total-rates {
        margin-left: 130px;
        color: var(--blue-color);
    }
    .job-seekers-page .btn-locate {
        width: 100%;
        background-color: var(--red-color);
        height: 40px;
        margin-top: 5px;
    }
    .job-seekers-page .btn-locate svg {
        position: relative;
        top: 1px;
        margin-right: 2px;
    }
    .job-seekers-page .button-locate {
        width: 150px;
    }
    .job-seekers-page .r6 {
        margin-top: 90px;
    }
    .job-seekers-page .my-skills {
        margin-bottom: 20px;
    }
    .job-seekers-page .my-skills .custom-footer {
        padding-bottom: 10px;
    }
    .job-seekers-page .my-skills .custom-footer .row {
        -webkit-column-count: 4;
           -moz-column-count: 4;
                column-count: 4;
        margin-right: -5px;
        margin-left: -5px;
    }
    .job-seekers-page .my-skills .custom-footer ul {
        -webkit-column-count: 8;
           -moz-column-count: 8;
                column-count: 8;
        width: 90%;
    }
    .job-seekers-page .my-skills .custom-footer ul li {
        background-color: var(--green-color);
        border-radius: 10px;
        border: none !important;
        height: 40px;
        text-align: center;
        color: white;
        font-family: var(--font-light);
        font-size: 14px;
        position: relative;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
    .job-seekers-page .my-skills .custom-footer .row li label {
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        margin: 0;
        padding: 0 5px; 
    }
    .job-seekers-page .custom-panel .title, .job-seekers-page .custom-panel .sub-title {
        color: white;
    }
    .job-seekers-page .custom-panel .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 20px;
        height: 80px;
    }
    .job-seekers-page .custom-panel .custom-header > div > div:first-child {
        padding-bottom: 5px;
    }
    .job-seekers-page .custom-panel .custom-footer {
        position: relative;
        background-color: var(--color-job-footer);
        font-family: var(--font-book);
        width: 100%;
        padding: 20px;
        height: 100%;
    }
    .job-seekers-page .endorsements {
        margin: 100px 0;
    }
    .job-seekers-page .endorsements .sub-title {
        margin-bottom: 40px;
    }
    .job-seekers-page .btn-view-profile {
        width: 100%;
        background-color: var(--red-color);
        text-transform: uppercase;
        height: 40px;
    }
    .job-seekers-page .r6 .d-flex > div:first-child {
        border-right: 1px solid var(--color-modal-placeholder);
        margin-right: 25px;
        padding-right: 25px;
    }
    .job-seekers-page .r6 .d-flex > div span {
        font-family: var(--font-medium);
        color: var(--green-color);
    }
    .job-seekers-page .r6 .d-flex > div span:last-child {
        font-family: var(--font-light);
    }
    .job-seekers-page .btn-chat, .job-seekers-page .btn-decline, .job-seekers-page .btn-assign-job, .job-seekers-page .btn-view-more {
        width: 100%;
        height: 40px;
    }
    .job-seekers-page .btn-chat {
        margin-bottom: 10px;
    }
    .job-seekers-page .btn-chat, .job-seekers-page .btn-view-more {
        background-color: var(--green-color);
    }
    .job-seekers-page .btn-decline{
        background-color: var(--blue-color);
        margin-right: 5px;
        margin-bottom: 10px;
    } 
    .job-seekers-page .btn-assign-job {
        background-color: var(--red-color);
        margin-left: 5px;
        margin-bottom: 10px;
    }
    .job-seekers-page .rating ul:last-child li:not(:last-child) {
        margin-right: 20px !important;
    }
    .job-seekers-page .rating.trust ul:last-child li:not(:last-child) {
        margin-right: 64px !important;
    }
    .job-seekers-page .rating .low:after, .job-seekers-page .rating .high:after {
        color: var(--blue-color);
    }
    .job-seekers-page .buttons {
        margin-top: 30px;
        margin-bottom: 90px;
    }
/*---------- Job Seekers Page ----------*/

/*---------- Request Private Job Page ----------*/
    .request-private-job-page {
        font-family: var(--font-book);
    }
    .request-private-job-page .container {
        padding-top: 50px;
    }
    .request-private-job-page .job-slick {
        height: 100%;
        width: 100%;
        max-height: 480px;
    }
    .request-private-job-page .job-slick img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .request-private-job-page .main-title {
        font-family: var(--font-bold);
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .request-private-job-page .username {
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
        text-transform: uppercase;
        margin-right: 20px;
        line-height: 21px;
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        text-align: center;
    }
    .request-private-job-page .title {
        /*font-family: var(--font-heavy);*/
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
    }
    .request-private-job-page .job-details {
        border-bottom: 1px solid var(--color-modal-placeholder);
        width: 90%;
    }
    .request-private-job-page .read-more {
        color: var(--red-color);
        text-transform: uppercase;
    }
    .request-private-job-page .paragraph {
        color: var(--gray-color);
        min-height: 160px;
        padding-bottom: 30px;
        /*font-size: 14px;*/
    }
    .request-private-job-page .date {
        font-family: var(--font-light);
        color: var(--red-color);
        margin-bottom: 3px;
        margin-top: 10px;
    }
    .request-private-job-page .date2 {
        font-family: var(--font-light);
        color: var(--color-modal-placeholder);
        padding-bottom: 15px;
    }
    .request-private-job-page .per-hour {
        background-color: var(--green-color);
        width: 500px;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: calc(100vw - 150px);
        top: 170px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0px;
    }
    .request-private-job-page .per-hour div {
        position: relative;
        left: 45px;
    }
    .request-private-job-page .per-hour .hourly {
        position: relative;
        top: 0px;
        color: white;
        font-family: var(--font-light);
        font-size: 18px;
        text-transform: uppercase;
    }
    .request-private-job-page .per-hour .cost {
        position: relative;
        top: 3px;
        color: white;
        font-family: var(--font-medium);
        font-size: 29px;
        line-height: 26px;
    }
    .request-private-job-page .rating ul {
        width: 170px;
    }
    .request-private-job-page .rating ul li:not(:last-child) {
        margin-right: 13px !important;
    }
    .request-private-job-page .rating.trust ul li {
        margin-right: 45px !important;
    }
    .request-private-job-page .rating .fa-star, .request-private-job-page .rating .fa-star-o {
        font-size: 25px;
    }
    .request-private-job-page .rating span {
        padding: 0 9px;
    }
    .request-private-job-page .total-rates {
        margin-left: 80px;
    }
    .request-private-job-page .btn-locate {
        width: 150px;
        background-color: var(--red-color);
        height: 40px;
        margin-top: 20px;
    }
    .request-private-job-page .btn-locate svg {
        position: relative;
        top: 1px;
        margin-right: 2px;
    }
    .request-private-job-page .btn-view-profile, .request-private-job-page .btn-negotiate, .request-private-job-page .btn-accept-job, .request-private-job-page .btn-decline-job {
        width: 100%;
        height: 40px;
        margin: 0;
        margin-bottom: 10px;
    }
    .request-private-job-page .btn-view-profile, .request-private-job-page .btn-negotiate{
        background-color: var(--green-color);
    } 
    .request-private-job-page .btn-accept-job{
        background-color: var(--blue-color);
        margin-right: 5px;
    } 
    .request-private-job-page .btn-decline-job {
        background-color: var(--red-color);
        margin-left: 5px;
    }
    .request-private-job-page .row.r1  {
        border-bottom: 1px solid var(--color-modal-placeholder);
        padding-bottom: 50px;
    }
    .request-private-job-page .buttons {
        margin: 80px 0px;
    }
/*---------- Request Private Job Page ----------*/

/*---------- Fovarites Modal ----------*/
    .custom-modal .favorites-modal {
        top: 50% !important;
    }
    .custom-modal .favorites-modal .close-custom.sm {
        background-color: white;
        color: var(--green-color);
        line-height: 20px;
        top: 19px;
    }
    .custom-modal .favorites-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .favorites-modal .custom-header .title {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
    }
    .custom-modal .favorites-modal .input-custom {
        height: 30px;
        font-family: var(--font-light);
        padding: 0px 10px !important;
        border: 1px solid var(--color-modal-placeholder) !important;
    }
    .custom-modal .favorites-modal .input-custom {
        color: var(--green-color);
        background-color: white;
        border: 0 !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .custom-modal .favorites-modal .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        color: var(--green-color);
    }
    .custom-modal .favorites-modal .input-custom::-moz-placeholder /* Firefox 19+ */ {
        color: var(--green-color);
    }
    .custom-modal .favorites-modal .input-custom:-ms-input-placeholder /* IE 10+ */ {
        color: var(--green-color);
    }
    .custom-modal .favorites-modal .input-custom:-moz-placeholder /* Firefox 18- */ {
        color: var(--green-color);
    }
    .custom-modal .favorites-modal .input {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        right: -80px;
        width: 190px;
    }
    .custom-modal .favorites-modal .input .svg {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 47%;
        right: 0;
        height: 15px;
        width: 15px;
    }
    .custom-modal .favorites-modal .profile-picture {
        width: 70px;
        height: 70px;
    }
    .custom-modal .favorites-modal .profile-picture .accepted {
        position: absolute;
        top: unset;
        bottom: -8px;
        right: -3px;
    }
    .custom-modal .favorites-modal .profile-picture .accepted svg {
        height: 23px;
        width: 23px;
    }
    .custom-modal .favorites-modal .username {
        font-family: var(--font-medium);
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
        position: relative;
        width: calc(100% - 200px - 70px);
        padding-left: 20px;
    }
    .custom-modal .favorites-modal .username span {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
    }
    .custom-modal .favorites-modal .buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .custom-modal .favorites-modal .buttons .btn {
        height: 35px;
        text-transform: uppercase;
        margin: 0;
        position: relative;
        top: 22%;
    }
    .custom-modal .favorites-modal .btn-send-request {
        color: var(--check-gray-color);
        background-color: var(--red-color);
        width: 125px;
        margin-right: 8px !important;
    }
    .custom-modal .favorites-modal .btn-delete {
        color: white;
        background-color: var(--blue-color);
        width: 70px;
    }
    .custom-modal .favorites-modal .custom-footer li:not(:last-child) {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--green-color);
    }
/*---------- Fovarites Modal ----------*/

/*---------- Payment Pages ----------*/
    .payment-page .container {
        padding-top: 50px;
    }
    .payment-page .row.r1, .payment-page .row.r2 {
        border-bottom: 1px solid var(--color-modal-placeholder);
        text-transform: uppercase;
    }
    .payment-page .row.r1 {
        text-align: center;
        padding-bottom: 50px;
        margin-bottom: 20px;
    }
    .payment-page .row.r2 {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .payment-page .title {
        /*font-family: var(--font-heavy);*/
        color: var(--red-color);
        font-size: 20px;
        text-transform: uppercase;
    }
    .payment-page .profile-picture {
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
        margin: 30px 0 10px 0;
    }
    .payment-page .username {
        font-family: var(--font-heavy);
        color: var(--green-color);
        font-size: 20px;
        margin-bottom: 20px;
    }
    .payment-page .cost {
        font-family: var(--font-heavy);
        color: var(--green-color);
        font-size: 20px;
        padding-bottom: 5px;
    }
    .payment-page .sub-title {
        font-family: var(--font-light);
        color: var(--red-color);
        font-size: 20px;
    }
    .payment-page .date {
        font-family: var(--font-light);
        color: var(--red-color);
        /*font-size: 14px;*/
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .payment-page .paragraph {
        font-family: var(--font--medium);
        color: var(--color-modal-placeholder);
        /*font-size: 14px;*/
    }
    .payment-page .paragraph .read-more {
        text-transform: uppercase;
        color: var(--green-color);
    }
    .payment-page .sub-title2 {
        font-family: var(--font-bold);
        color: var(--blue-color);
        font-size: 15px;
    }
    .payment-page .sub-title2 .switch {
        margin-left: 15px;
        margin-top: -5px;
    }
    .payment-page .row.r3 .description {
        font-family: var(--font-medium);
        color: var(--color-modal-placeholder);
        /*font-size: 13px;*/
        padding-left: 15px;
    }
    .payment-page .btn {
        width: 100%;
        height: 40px;
        text-transform: uppercase;
        font-size: 15px;
    }
    .payment-page .btn-pay {
        background-color: var(--blue-color);
        margin-bottom: 10px;
    }
    .payment-page .btn-report {
        background-color: var(--red-color);   
    }
/*---------- Payment Pages ----------*/

/*---------- Choose Payment Modal ----------*/
    .custom-modal .choose-payment-modal .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 15px;
        height: 60px;
    }
    .custom-modal .choose-payment-modal .custom-header .title {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
    }
    .custom-modal .choose-payment-modal .custom-footer {
        height: 300px;
    }
    .custom-modal .choose-payment-modal .custom-footer span {
        font-family: var(--font-heavy);
        text-transform: uppercase;
        color: var(--green-color);
    }
    .custom-modal .choose-payment-modal .custom-footer  a {
        text-transform: capitalize;
        color: var(--color-modal-placeholder) !important;
        position: relative;
        top: -9px;
    }
    .custom-modal .choose-payment-modal .custom-footer > .active a {
        color: var(--green-color) !important;
    }
    .custom-modal .choose-payment-modal .custom-footer > div > div {
        padding: 7px 0px;
    }
    .custom-modal .choose-payment-modal .custom-footer > div:first-child {
        height: calc(100% - 46px);
    }

    .custom-modal .choose-payment-modal .custom-footer .radio-option input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        cursor: pointer;
    }
    .custom-modal .choose-payment-modal .custom-footer .radio-option {
        cursor: pointer;
        height: 28px;
        width: 28px;
        margin-right: 15px;
    }
    .custom-modal .choose-payment-modal .custom-footer .radio-option input:not(:checked) ~ .checked {
        display: none !important;
    }
    .custom-modal .choose-payment-modal .custom-footer .radio-option input:checked ~ .checked {
        display: block !important;
    }
    .custom-modal .choose-payment-modal .custom-footer .radio-option input:not(:checked) ~ .unchecked {
        display: block !important;
    }
    .custom-modal .choose-payment-modal .custom-footer .radio-option input:checked ~ .unchecked {
        display: none !important;
    }
    .custom-modal .choose-payment-modal .custom-footer .buttons {
        position: relative;
    }
    .custom-modal .choose-payment-modal .custom-footer .buttons .btn-choose-payment {
        width: 100%;
        height: 40px;
        background-color: var(--green-color);
    }
/*---------- Choose Payment Modal ----------*/

/*---------- Declined Transfer Modal ----------*/
    .custom-modal .declined-transfer-modal {
        padding: 50px 15px;
        text-align: center;
        text-transform: uppercase;
    }
    .custom-modal .declined-transfer-modal .title {
        font-size: 20px;
        color: var(--green-color);
    }
    .custom-modal .declined-transfer-modal .btn {
        height: 40px;
        width: 260px;
        margin-bottom: 10px;
    }
    .custom-modal .declined-transfer-modal .btn-update {
        background-color: var(--blue-color);
    }
    .custom-modal .declined-transfer-modal .btn-chat {
        background-color: var(--green-color);
    }
    .custom-modal .declined-transfer-modal .btn-try {
        background-color: var(--green-color);
    }
    .custom-modal .declined-transfer-modal .btn-support {
        background-color: var(--red-color);
    }
/*---------- Declined Transfer Modal ----------*/

/*---------- Rating Modal ----------*/
    .custom-modal .rating-modal {
        padding: 20px;
        text-align: center;
        text-transform: uppercase;
    }
    .custom-modal .rating-modal .title {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-bold);*/
    }
    .custom-modal .rating-modal .title2 {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-light);*/
    }
    .custom-modal .rating-modal .btn {
        height: 40px;
        width: 100%;
        margin: 0;
    }
    .custom-modal .rating-modal .btn-done {
        background-color: var(--blue-color);
        margin-right: 5px;
    }
    .custom-modal .rating-modal .btn-report {
        background-color: var(--red-color);
        margin-left: 5px;
    }
    .custom-modal .rating-modal .rating {
        width: 160px;
    }
    .custom-modal .rating-modal .rating .fa-star, .custom-modal .rating-modal .rating .fa-star-o {
        font-size: 30px;
    }
    .custom-modal .rating-modal textarea.input-custom {
        height: 130px;
        width: 100%;
        border: 1px solid var(--green-color);
        color: var(--color-modal-placeholder);
        font-family: var(--font-light);
        /*font-size: 13px;*/
        padding: 6px !important;
        border-radius: 0 !important;
    }
    .custom-modal .rating-modal .options label {
        cursor: pointer;
        display: block;
    }
    .custom-modal .rating-modal .options p {
        font-size: 12px;
        color: var(--color-modal-placeholder);
    }
    .custom-modal .rating-modal .options input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    .custom-modal .rating-modal .over-all-experience:checked + label .st440,
    .custom-modal .rating-modal .over-all-experience:checked + label .st441,
    /* Circle */
    .custom-modal .rating-modal .over-all-experience:checked + label .st442 {
        fill:var(--green-color);
        stroke:white;
    } 

    .custom-modal .rating-modal .communication:checked + label .st450,
    /* Circle */
    .custom-modal .rating-modal .communication:checked + label .st451 {
        fill:var(--green-color);
        stroke:white;
    } 

    .custom-modal .rating-modal .speed:checked + label .st460,
    /* Circle */
    .custom-modal .rating-modal .speed:checked + label .st461 {
        fill:var(--green-color);
        stroke:white;
    }

    .custom-modal .rating-modal .professional-service:checked + label .st470,
    /* Circle */
    .custom-modal .rating-modal .professional-service:checked + label .st471 {
        fill:var(--green-color);
        stroke:white;
    } 

    .custom-modal .rating-modal .work-quality:checked + label .st480,
    /* Circle */
    .custom-modal .rating-modal .work-quality:checked + label .st481 {
        fill:var(--green-color);
        stroke:white;
    } 

    /* Circle */
    .custom-modal .rating-modal .politeness:checked + label .st490,
    .custom-modal .rating-modal .politeness:checked + label .st491 {
        fill:var(--green-color);
        stroke:white;
    } 
    .custom-modal .rating-modal .over-all-experience:checked + label p,
    .custom-modal .rating-modal .communication:checked + label p,
    .custom-modal .rating-modal .speed:checked + label p,
    .custom-modal .rating-modal .professional-service:checked + label p,
    .custom-modal .rating-modal .work-quality:checked + label p,
    .custom-modal .rating-modal .politeness:checked + label p {
        color: var(--green-color) ;
    }
/*---------- Rating Modal ----------*/

/*---------- Report Modal ----------*/
    .custom-modal .report-modal {
        padding: 20px;
        text-align: center;
    }
    .custom-modal .report-modal .title {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-light);*/
        text-transform: uppercase;
    }
    .custom-modal .report-modal .title2 {
        font-size: 20px;
        color: var(--red-color);
        /*font-family: var(--font-bold);*/
        text-transform: uppercase;
    }
    .custom-modal .report-modal .btn {
        height: 40px;
        width: 100%;
        margin: 0;
    }
    .custom-modal .report-modal .btn-cancel {
        background-color: var(--blue-color);
        margin-right: 5px;
    }
    .custom-modal .report-modal .btn-send {
        background-color: var(--red-color);
        margin-left: 5px;
    }
    .custom-modal .report-modal textarea.input-custom {
        height: 130px;
        width: 100%;
        border: 1px solid var(--green-color);
        color: var(--color-modal-placeholder);
        font-family: var(--font-light);
        /*font-size: 13px;*/
        padding: 6px !important;
        border-radius: 0 !important;
    }
    .custom-modal .report-modal select-arrow:after {
        font-size: 35px;
        color: white;
    }
    .custom-modal .report-modal select.input-custom {
        height: 50px;
        width: 100%;
        border: 1px solid var(--green-color);
        background-color: var(--green-color);
        color: white;
        font-family: var(--font-light);
        /*font-size: 13px;*/
        padding: 6px !important;
        border-radius: 0 !important;
    }
    .custom-modal .report-modal select.input-custom option {
        color: var(--green-color);
        background-color: white;
        border: none;
        height: 20px;
    }
/*---------- Report Modal ----------*/

/*---------- User Profile Page ----------*/
    .user-personal-page .min-height {
        margin-bottom: 50px;
    }
    .user-personal-page .btn-personal, .user-personal-page .btn-jobs {
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--color-job-footer);
        width: 100%;
        color: var(--color-modal-placeholder) !important;
    }
    .user-personal-page .btn-personal.active, .user-personal-page .btn-jobs.active {
        background-color: var(--green-color);
        color: white !important;
    }
    .user-personal-page .btn-locate, .user-personal-page .btn-add-favorite {
        width: 48%;
        height: 40px;
        margin: 0;
    }
    .user-personal-page .btn-locate {
        background-color: var(--red-color);
        margin-right: 1%;
    }
    .user-personal-page .btn-add-favorite {
        background-color: var(--green-color);
        margin-left: 1%;
    }
    .user-personal-page .btn-add-favorite .fa-star:before {
        font-size: 15px;
    }
    .user-personal-page .first-row {
        max-width: 350px;
        width: 100%;
        position: relative;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        left: 50%;
        text-align: center;
    }
    .user-personal-page .first-row > div:not(:last-child) {
        margin-bottom: 20px;
    }
    .user-personal-page .profile-picture {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        margin-bottom: 10px;
        width: 120px;
        height: 120px;
    }
    .user-personal-page .menu, .user-personal-page .first-row, .user-personal-page .about-me, .user-personal-page .my-skills, .user-personal-page .my-skills, .user-personal-page .row.buttons {
        padding-top: 50px;
    }
    .user-personal-page .rating {
        width: 145px;
        font-size: 17px;
    }
    .user-personal-page .rating ul li {
        margin-right: 8px !important;
    }
    .user-personal-page .rating.trust ul li {
        margin-right: 36px !important;
    }
    .user-personal-page .fa-star:before, .user-personal-page .fa-star-o:before {
        font-size: 25px;
    }
    .user-personal-page .rate-parent .title {
        text-align: right;
    }
    .user-personal-page .rating span {
        padding: 0 8px;
    }
    .user-personal-page .title {
        text-transform: uppercase;
        color: var(--green-color);
        font-size: 20px;
        line-height: 20px;
    }
    .user-personal-page .sub-title {
        font-family: var(--font-light);
        color: var(--green-color);
    }
    .user-personal-page .about-me > div:last-child {
        min-height: 115px;
        background-color: var(--color-job-footer);
        color: var(--color-modal-placeholder);
        padding: 20px 15px;
        font-size: 14px;
    }
    .user-personal-page .about-me .paragraph .read-more {
        text-transform: uppercase;
        color: var(--green-color);
    }
    .user-personal-page .custom-panel .title {
        color: white;
    }
    .user-personal-page .custom-panel .custom-header {
        position: relative;
        width: 100%;
        background-color: var(--green-color);
        padding: 20px;
        height: 80px;
    }
    .user-personal-page .custom-panel .custom-footer {
        position: relative;
        background-color: var(--color-job-footer);
        font-family: var(--font-book);
        width: 100%;
        padding: 20px;
        height: 100%;
    }
    .user-personal-page .my-skills .custom-footer {
        padding-bottom: 10px;
    }
    .user-personal-page .my-skills .custom-footer .row {
        -webkit-column-count: 4;
           -moz-column-count: 4;
                column-count: 4;
        margin-right: -5px;
        margin-left: -5px;
    }
    .user-personal-page .my-skills .custom-footer ul {
        -webkit-column-count: 8;
           -moz-column-count: 8;
                column-count: 8;
        width: 90%;
    }
    .user-personal-page .my-skills .custom-footer ul li {
        background-color: var(--green-color);
        border-radius: 10px;
        border: none !important;
        height: 40px;
        text-align: center;
        color: white;
        font-family: var(--font-light);
        font-size: 14px;
        position: relative;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
    .user-personal-page .my-skills .custom-footer .row li label {
        position: relative;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        margin: 0;
        padding: 0 10px; 
    }
    .user-personal-page .btn-send {
        height: 40px;
        width: 100%;
        background-color: var(--green-color);
        margin: 0;
        margin-bottom: 10px;
    }
    .user-personal-page .btn-report {
        height: 40px;
        width: 50%;
        background-color: var(--red-color);
        font-size: 15px;
        margin: 0;
        margin-right: 5px;
    }
    .user-personal-page .btn-block {
        height: 40px;
        width: 50%;
        background-color: var(--blue-color);
        font-size: 15px;
        margin: 0;
        margin-left: 5px;
    }
/*---------- User Profile Page ----------*/

/*---------- User Jobs Page ----------*/
    .user-jobs-page .btn-personal, .user-jobs-page .btn-jobs {
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--color-job-footer);
        width: 100%;
        color: var(--color-modal-placeholder) !important;
    }
    .user-jobs-page .btn-personal.active, .user-jobs-page .btn-jobs.active {
        background-color: var(--green-color);
        color: white !important;
    }
    .user-jobs-page .menu {
        padding-top: 50px;
    }
    .user-jobs-page jobs .title {
        /*font-family: var(--font-bold);*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .user-jobs-page jobs {
        display: block;
        padding: 100px 0px;
    }
/*---------- User Jobs Page ----------*/

/*---------- Messages Page | Chat Page ----------*/
    .messages-page .min-height {
        padding-bottom: 50px;
    }
    .messages-page .btn-pending, .messages-page .btn-you-assigned, .messages-page .btn-assigned-to,
    .chat-page .btn-pending, .chat-page .btn-you-assigned, .chat-page .btn-assigned-to {
        letter-spacing: 1px;
        margin: 0;
        height: 40px;
        background-color: var(--color-job-footer);
        width: 100%;
        color: var(--color-modal-placeholder) !important;
    }
    .messages-page .btn-pending.active, .messages-page .btn-you-assigned.active, .messages-page .btn-assigned-to.active,
    .chat-page .btn-pending.active, .chat-page .btn-you-assigned.active, .chat-page .btn-assigned-to.active {
        background-color: var(--green-color);
        color: white !important;
    }
    .messages-page .menu {
        padding: 50px 0;
    }
/*---------- Messages Page | Chats Page ----------*/

/*---------- Chats Page ----------*/
    .chat-page .menu {
        padding: 50px 0 30px 0;
    }
    .chat-page .first-row {
        background-color: var(--green-color);
        padding: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
    }
    .chat-page .first-row .profile-picture {
        width: 65px;
        height: 65px;
    }
    .chat-page .first-row .profile-picture img {
        border: 3px solid white;
    }
    .chat-page .first-row .username {
        color: white;
        font-size: 20px;
        margin-left: 15px;
    }
    .chat-page .first-row .buttons {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        right: -120px;
    }
    .chat-page .first-row .buttons2 {
        position: absolute;
        bottom: -83px;
        right: 0;
        box-shadow: 2px 2px 13px 0px rgba(0,0,0,0.3);
        z-index: 9;
        background-color: white;
        width: 160px;
        display: none;
    }
    .chat-page .first-row .buttons2 .btn {
        width: 100%;
        margin: 0 !important;
        background-color: transparent;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    .chat-page .first-row .btn {
        height: 35px;
        background-color: white;
        width: 130px;
        color: var(--red-color) !important;
        margin: 0px;
    }
    .chat-page .first-row .btn-delete {
        margin-right: 10px;
    }
    .chat-page .messages {
        height: 400px;
        margin-top: 3px;
        min-height: 200px;
    }
    .chat-page .message {
        position: relative;
        width: 60%;
        border-radius: 20px;
        margin: 40px 0;
        padding: 5px 5px 30px 5px;
    }
    .chat-page .message.received {
        background-color: var(--green-color);
        color: white;
    }
    .chat-page .message.sent {
        left: calc(40% - 20px);
        background-color: var(--backgroundcolor-received-chat);
        color: var(--color-received-chat);
    }
    .chat-page .message p {
        font-family: var(--font-book);
        /*font-size: 14px;*/
        margin: 15px;
        margin-bottom: 0px;
    }
    .chat-page .message time {
        position: absolute;
        display: block;
        bottom: 0;
        right: 17px;
        font-family: var(--font-light);
        font-size: 20px;
    }
    .chat-page .message.sent time {
        right: 60px !important;
    }
    .chat-page .message marks {
        position: absolute;
        display: block;
        bottom: 3px;
        right: 17px;
    }
    .chat-page .message.sent marks svg:first-child {
        position: relative;
        left: 4px;
    }
    .chat-page .message.sent.delivered.read marks .st500 {
        stroke: var(--red-color);
    }
    .chat-page .message.sent:last-child:after {
        content: "";
        width: 20px;
        height: 20px;
        background-color: var(--backgroundcolor-received-chat);
        position: absolute;
        -webkit-transform: translate(-50%,-50%) rotate(45deg);
                transform: translate(-50%,-50%) rotate(45deg);
        top: 50%;
        right: -19px;
        z-index: -1;
    }
    .chat-page .message.sent.delivered svg {
        display: initial !important;
        position: relative;
        left: 4px;
    }
    .chat-page .type-message {
        width: 100%;
        background-color: var(--color-job-footer);
        padding: 15px 0;
    }
    .chat-page .type-message .input-custom {
        border: 0 !important;
        background-color: white;
        color: var(--color-modal-placeholder);
        height: 50px;
    }
    .chat-page .type-message input[type=file] {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        width: 0;
        left: 101vw;
    }
    .chat-page .type-message .btn {
        height: 50px;
        color: var(--red-color) !important;
        background-color: white;
        margin: 0;
    }
    .chat-page .type-message .btn-attachement {
        width: 60px;
        margin-right: 10px;
        margin-left: 10px;
    }
    .chat-page .type-message .btn-attachement svg {
        position: relative;
        top: 3px;
    }
    .chat-page .type-message .btn-send {
        width: 150px;
    }
    .chat-page .message.sent img, .chat-page .message.sent video {
        max-height: 250px;
        max-width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        border-radius: 20px;
    }
    .chat-page .message.sent .icon {
        width: 60px;
        height: 60px;
    }
    .chat-page .message.sent .icon img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        border-radius: 0 !important;
    }
    .chat-page .message.sent .fileName {
        position: relative;
        width: calc(100% - 60px);
    }
    .chat-page .message.sent .fileName span {
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        top: 50%;
        left: 10px;
    }
    .chat-page .three-dots-menu {
        display: none;
        position: absolute;
        right: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        font-size: 15px;
        cursor: pointer;
    }
    .three-dots-menu:after {
        content: "\2022";
        position: absolute;
        left: 0;
        top: 10px;
        cursor: pointer;
    }
    .three-dots-menu:before {
        content: "\2022";
        position: absolute;
        left: 0;
        bottom: 10px;
        cursor: pointer;
    }
/*---------- Chats Page ----------*/

/*---------- Notifications Page ----------*/
    .notifications-page {
        padding: 70px 0px;
    }
    .notifications-page .main-title {
        font-family: var(--font-bold);
        /*font-size: 14px;*/
        color: var(--green-color);
        text-transform: uppercase;
    }
    .notifications-page notification {
        display: block;
        border-bottom: 1px solid var(--color-modal-placeholder);
        margin-top: 25px;
        padding-bottom: 25px;
    }
    .notifications-page .username {
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .notifications-page .title2 {
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .notifications-page .date {
        font-family: var(--font-light);
        /*font-size: 14px;*/
        color: var(--red-color);
        height: 45px;
        margin: 0;
    }
    .notifications-page .cost {
        color: var(--green-color);
        float: right;
        margin: 0;
        height: 45px;
    }
    .notifications-page .cost span:first-child {
        font-family: var(--font-medium);
        font-size: 20px;
    }
    .notifications-page .cost span:last-child {
        font-family: var(--font-light);
        /*font-size: 13px;*/
        position: relative;
        top: -9px;
    }
    .notifications-page .paragraph {
        font-family: var(--font-medium);
        /*font-size: 13px;*/
        color: var(--color-modal-placeholder);
    }
    .notifications-page .read-more {
        text-transform: uppercase;
        color: var(--red-color);
    }
    .notifications-page .buttons {
        height: 35px;
        margin-top: 15px;
        float: right;
    }
    .notifications-page .btn {
        font-size: 15px;
        text-transform: uppercase;
        width: 150px;
        margin: 0px;
        height: 35px;
    }
    .notifications-page .btn-delete {
        background-color: var(--red-color);
        margin-right: 5px;
    }
    .notifications-page .btn-view {
        background-color: var(--green-color);
        margin-left: 5px;
    }
    .notifications-page .btn-view svg {
        height: auto;
        width: 18px;
        margin-right: 5px;
    }
/*---------- Notifications Page ----------*/

/*---------- Job Assigned 1 Modal ----------*/
    .custom-modal .job-assigned1-modal {
        padding: 50px;
        text-align: center;
    }
    .custom-modal .job-assigned1-modal .logo {
        position: relative;
        padding-bottom: 50px;
    }
    .custom-modal .job-assigned1-modal .logo label {
        position: relative;
        width: 126px;
        height: 110px;
        margin: 0;
    }
    .custom-modal .job-assigned1-modal .logo label svg {
        position: absolute;
        right: 0;
    }
    .custom-modal .job-assigned1-modal .title {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-medium);*/
        text-transform: uppercase;
        padding-bottom: 30px;
    }
    .custom-modal .job-assigned1-modal .btn {
        height: 40px;
        width: 150px;
        margin: 0;
    }
    .custom-modal .job-assigned1-modal .btn-walking {
        background-color: var(--blue-color);
        margin-right: 5px;
    }
    .custom-modal .job-assigned1-modal .btn-by-car {
        background-color: var(--red-color);
        margin-left: 5px;
    }
/*---------- Job Assigned 1 Modal ----------*/

/*---------- Job Assigned 2 Modal ----------*/
    .custom-modal .job-assigned2-modal {
        padding: 50px;
        text-align: center;
    }
    .custom-modal .job-assigned2-modal .logo {
        position: relative;
        padding-bottom: 5px;
    }
    .custom-modal .job-assigned2-modal .logo label {
        position: relative;
        width: 126px;
        height: 110px;
        margin: 0;
    }
    .custom-modal .job-assigned2-modal .logo label svg {
        position: absolute;
        right: 0;
    }
    .custom-modal .job-assigned2-modal .title {
        font-size: 20px;
        color: var(--red-color);
        /*font-family: var(--font-medium);*/
        text-transform: uppercase;
        padding-bottom: 30px;
    }
    .custom-modal .job-assigned2-modal .title2 {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-medium);*/
        text-transform: uppercase;
        padding-bottom: 10px;
    }
    .custom-modal .job-assigned2-modal .minutes {
        font-family: var(--font-light);
        color: var(--green-color);
        margin-bottom: 10px;
    }
    .custom-modal .job-assigned2-modal .minutes label {
        position: relative;
        height: 200px;
        width: 200px;
        border: 1px solid var(--red-color);
        border-radius: 50%;
        margin: 0px;
    }
    .custom-modal .job-assigned2-modal .minutes span {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        left: 50%;
    }
    .custom-modal .job-assigned2-modal .minutes span:first-child input {
        position: relative;
        font-size: 60px;
        font-family: var(--font-light);
        color: var(--green-color);
        background-color: transparent;
        border: 0 !important;
        width: 100px;
        text-align: center;
        top: 66px;
    }
    .custom-modal .job-assigned2-modal .minutes span:first-child input::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
        font-family: var(--font-light);
        color: var(--green-color);
    }
    .custom-modal .job-assigned2-modal .minutes span:first-child input::-moz-placeholder /* Firefox 19+ */ {
        font-family: var(--font-light);
        color: var(--green-color);
    }
    .custom-modal .job-assigned2-modal .minutes span:first-child input:-ms-input-placeholder /* IE 10+ */ {
        font-family: var(--font-light);
        color: var(--green-color);
    }
    .custom-modal .job-assigned2-modal .minutes span:first-child input:-moz-placeholder /* Firefox 18- */ {
        font-family: var(--font-light);
        color: var(--green-color);
    }
    .custom-modal .job-assigned2-modal .minutes span:last-child {
        top: 60%;
        font-size: 21px;
        text-transform: uppercase;
    }
    .custom-modal .job-assigned2-modal .btn-ok {
        background-color: var(--red-color);
        margin-right: 5px;
        height: 40px;
        max-width: 200px;
        margin: 0;
        width: 100%;
    }
/*---------- Job Assigned 2 Modal ----------*/

/*---------- Transfer Failed Modal ----------*/
    .custom-modal .transfer-failed-modal {
        padding: 50px;
        text-align: center;
    }
    .custom-modal .transfer-failed-modal .logo {
        position: relative;
        padding-bottom: 30px;
    }
    .custom-modal .transfer-failed-modal .title {
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
        position: relative;
    }
    .custom-modal .transfer-failed-modal .title2 {
        font-size: 18px;
        color: var(--green-color);
        text-transform: uppercase;
        position: relative;
    }
    .custom-modal .transfer-failed-modal .title2 label {
        text-align: left;
        height: 54px;
        max-width: 360px;
        width: 100%;
    }
    .custom-modal .transfer-failed-modal .btn-chat {
        background-color: var(--blue-color);
        margin-right: 5px;
        height: 40px;
        max-width: 300px;
        width: 100%;
        font-size: 20px;
        margin: 0;
    }
/*---------- Transfer Failed Modal ----------*/

/*---------- Security Page ----------*/
    .security-page .min-height {
        padding-top: 50px;
    }
    .security-page .custom-row {
        margin-bottom: 50px;
    }
    .security-page .side-image {
        width: 40px;
        height: 40px;
    }
    .security-page .side-image img {
        width: 100%;
        max-height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .security-page .title {
        /*font-family: var(--font-bold);*/
        font-size: 20px;
        color: var(--green-color);
        text-transform: uppercase;
    }
    .security-page .paragraph {
        font-family: var(--font-medium);
        /*font-size: 13px;*/
        color: var(--color-modal-placeholder);
    }
/*---------- Security Page ----------*/

/*---------- How It Works Page ----------*/
    .how-it-works-page .title {
        color: var(--green-color);
        text-transform: uppercase;
        font-size: 20px;
    }
    .how-it-works-page .title1 {
        color: var(--green-color);
        text-transform: uppercase;
        font-size: 25px;
        font-family: var(--font-black);
    }
    .how-it-works-page .paragraph {
        font-family: var(--font-medium);
        color: var(--color-modal-placeholder);
    }
    .how-it-works-page ul {
        list-style: disc;
        margin-left: 15px;
    }
    .how-it-works-page ul li {
        padding-left: 15px;
    }
    .how-it-works-page .first-row, .how-it-works-page .second-row, .how-it-works-page .third-row {
        border-bottom: 1px solid var(--color-modal-placeholder);
    }
    .how-it-works-page .first-row ul li {
        margin-bottom: 5px
    }
    .how-it-works-page .second-row ul li {
        margin-bottom: 20px
    }
    .how-it-works-page ul .title2 {
        color: var(--blue-color);
    }
    .how-it-works-page .first-row {
        padding-bottom: 50px;
        margin-bottom: 50px;
    }
    .how-it-works-page .first-row .image {
        width: 115%;
        height: 100%;
    }
    .how-it-works-page .first-row .image img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .how-it-works-page .first-row > div:first-child {
        padding-top: 70px;
    }
    .how-it-works-page .second-row {
        padding-bottom: 50px;
        margin-bottom: 50px;
    }
    .how-it-works-page .second-row .map {
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
    }
    .how-it-works-page .second-row .buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .how-it-works-page .second-row .buttons .btn {
        width: 50%;
        height: 40px;
        text-transform: uppercase;
    }
    .how-it-works-page .second-row .buttons .btn-locate {
        background-color: var(--red-color);
        margin-right: 5px;
    }
    .how-it-works-page .second-row .rating {
        width: calc(100% - 60px);
    }
    .how-it-works-page .second-row .rating ul li {
        margin-right: 13px !important;
    }
    .how-it-works-page .second-row .rating.trust ul li {
        margin-right: 57px !important;
        margin-left: 7px;
    }
    .how-it-works-page .second-row .parent-rating  {
        margin-top: 20px;
    }
    .how-it-works-page .second-row .parent-rating .title2 {
        font-size: 20px;
        text-align: right;
        color: var(--green-color);
    }
    .how-it-works-page .second-row .rating .fa-star, .how-it-works-page .second-row .rating .fa-star-o {
        font-size: 28px;
    }
    .how-it-works-page .second-row .rating ul li {
        padding: 0px !important;
    }
    .how-it-works-page .second-row .buttons .btn-add {
        background-color: var(--green-color);
        margin-left: 5px;
    }
    .how-it-works-page .third-row {
        padding-bottom: 50px;
        margin-bottom: 50px;
    }
    .how-it-works-page .third-row .list label:not(:last-child) {
        margin-bottom: 50px;
    }
    .how-it-works-page .third-row .title {
        margin-top: 30px;
    }
    .how-it-works-page .third-row .list .title2 {
        color: var(--green-color);
        text-transform: uppercase;
    }
    .how-it-works-page .third-row .image + .description {
        width: 90%;
        position: relative;
        left: 10%;
        background-color: var(--green-color);
        color: white;
        padding: 35px 20px;
    }
    .how-it-works-page .third-row .image {
        width: 100%;
        height: 300px;
    }
    .how-it-works-page .third-row .image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .how-it-works-page .fourth-row {
        padding-bottom: 100px;
    }
    .how-it-works-page .fourth-row .payments {
        padding: 35px 20px;
        background-color: var(--color-job-footer);
    }
    .how-it-works-page .fourth-row .payments .payment.p1, .how-it-works-page .fourth-row .payments .payment.p2 {
        padding-bottom: 60px;
    }
    .how-it-works-page .fourth-row .payments .payment {
        padding-left: 40px;
    }
    .how-it-works-page .fourth-row .payments .payment hr {
        margin: 0;
        width: 50px;
        background-color: var(--green-color);
        height: 1px;
    }
    .how-it-works-page .fourth-row .payments .title2 {
        color: var(--blue-color);
        padding: 2px 0px;
    }
/*---------- How It Works Page ----------*/

/*---------- Online Job Modal ----------*/
    .custom-modal .online-job-modal {
        padding: 70px;
        text-align: center;
    }
    .custom-modal .online-job-modal .logo {
        position: relative;
        padding-bottom: 10px;
    }
    .custom-modal .online-job-modal .logo label {
        position: relative;
        width: 126px;
        height: 110px;
        margin: 0;
    }
    .custom-modal .online-job-modal .logo label svg {
        position: absolute;
        right: 0;
    }
    .custom-modal .online-job-modal .title {
        font-size: 20px;
        color: var(--green-color);
        /*font-family: var(--font-blod);*/
        text-transform: uppercase;
        padding-bottom: 10px;
    }
    .custom-modal .online-job-modal .title2 {
        font-size: 15px;
        color: var(--red-color);
        text-transform: uppercase;
        text-align: left;
    }
    .custom-modal .online-job-modal .date {
        font-family: var(--font-light);
        color: var(--red-color);
        text-align: left;
        margin-bottom: 5px;
    }
    .custom-modal .online-job-modal .paragraph {
        background-color: var(--color-job-footer);
        color: var(--color-modal-placeholder);
        padding: 20px;
        /*font-size: 13px;*/
        font-family: var(--font-medium);
        margin-bottom: 10px;
        text-align: left;
    }
    .custom-modal .online-job-modal .wage {
        font-family: var(--font-light);
        /*font-size: 13px;*/
        color: var(--green-color);
        text-transform: uppercase;
        margin-top: 10px;
        margin-bottom: 40px;
    }
    .custom-modal .online-job-modal .wage svg {
        position: relative;
        top: 5px;
    }
    .custom-modal .online-job-modal .pays {
        font-family: var(--font-medium);
        font-size: 20px;
        color: var(--green-color);
        text-transform: capitalize;
        margin-top: 10px;
        margin-bottom: 40px;
    }
    .custom-modal .online-job-modal .buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .custom-modal .online-job-modal .btn {
        height: 40px;
        width: 50%;
        text-transform: uppercase;
        margin: 0;
    }
    .custom-modal .online-job-modal .btn-accept {
        background-color: var(--red-color);
        margin-right: 5px;
    }
    .custom-modal .online-job-modal .btn-decline {
        background-color: var(--blue-color);
        margin-left: 5px;
    }
/*---------- Online Job Modal ----------*/

/****************************************************************************************************************************/
/* web responsive layout */
/* Smartphones Portrait */
@media (max-width: 767px) {
    /*---- Close Icon ----*/
        .custom-modal .close-custom.sm {
            display: block;
        }
    /*---- Close Icon ----*/

    /*---- Endorsements ----*/
        .endorsements .content > div {
            padding-bottom: 25px;
        }
        .endorsements .content > div:nth-child(5), .endorsements .content > div:nth-child(6) {
            padding-bottom: 0px;
        }
        .endorsements .content > div:nth-child(2), .endorsements .content > div:nth-child(4) {
            border: 0;
        }
    /*---- Endorsements ----*/

    /*---- Navbar ----*/
        .navbar-custom .navbar-collapse {
            background-color: white;
            position: absolute;
            top: var(--navbar-height);
            width: 100vw;
            left: 0;
            height: auto;
            box-shadow: 0px 10px 16px rgba(0,0,0,.3);
            display: none;
        }
        .navbar-custom .btn-job {
            height: 100%;
            max-height: 42px;
        }
        .navbar-custom .navbar-nav li {
            height: 50px;
            line-height: 50px;
        }
        .navbar-custom .user-options {
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            left: 50%;
            top: -112px;
            z-index: 10;
        }
        .navbar-custom .user-options > .arrow {
            color: var(--red-color);
            left: 50%;
            top: 102%;
            -webkit-transform: translate(-50%, -50%) rotate(180deg);
                    transform: translate(-50%, -50%) rotate(180deg);
        }
        .navbar-custom {
            padding: 0 16px;
        }
    /*---- Navbar ----*/

    /*---- Footer ----*/
        footer .top .pages ul {
            -webkit-column-count: 2;
               -moz-column-count: 2;
                    column-count: 2;
            margin-bottom: 30px;
        }
        footer .categories ul {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
        }
        footer .categories ul li {
            padding-bottom: 5px;
        }
        footer .apps .app:last-child {
            margin: 0px
        }
        footer .apps .app {
            width: 50%;
        }
        footer .middle .middle1, footer .middle .middle2 {
            margin-bottom: 30px;
        }
        footer .middle .title {
            height: auto;
        }
        footer .bottom div:nth-child(2) {
            padding-top: 30px;
            padding-bottom: 30px;
        }
        footer .bottom div:nth-child(2) > div > div:first-child {
            padding: 0;
            text-align: left !important;
            padding-left: 15px !important;
        }
        footer .bottom div:nth-child(2) > div > div:last-child {
            padding: 0;
            text-align: right !important;
            padding-right: 15px !important;
        }
        footer .middle br {
            display: none;
        }
    /*---- Footer ----*/

    /*---- Check Input ----*/
        .check-input .check {
            left: 0px;
        }
        .check-input label {
            padding: 0px 0px 0px 35px;
        }
    /*---- Check Input ----*/

    /*---- Index Page ----*/
        .index-page .form-custom {
            width: 95%;
        }
        .index-page .check-input {
            margin: 0px;
        }
        .index-page .form-custom .btn-search {
            margin: 0 0 15px 0;
            height: 50px;
        }
        .index-page .form-custom .btn-findsomething {
            margin: 0px;
            height: 50px;
        }
    /*---- Index Page ----*/

    /*---- Home Page ----*/
        .home-page .input .input-custom, .home-page .search-form .result {
            width: 300px;
        }
        .home-page .container {
            padding-left: 20px;
            padding-right: 20px;
        }
        .home-page .panel {
            display: none;
        }
        .home-page .grid-list {
            display: none;
        }
        .home-page .wage .check-input-three ul li label, .home-page .distance .check-input-three ul li label {
            width: 100%;
        }
    /*---- Home Page ----*/

    /*---- Jobs Page ----*/
        .jobs-page .grid-list {
            display: none;
        }
    /*---- Jobs Page ----*/

    /*---- Pagination ----*/
        .pagination {
            width: 310px;
        }
        .pagination a {
            padding-left: 8px;
            padding-right: 8px;
        }
    /*---- Pagination ----*/

    /*---- Modal ----*/
        .custom-modal .custom-footer {
            padding: 15px;
        }
        .verificationcode-modal .home-logo {
            top: -97px;
        }
        .register-modal .home-logo {
            top: -50px;
        }
        .login-modal .home-logo {
            top: -75px;
        }
        .reset-modal .home-logo {
            top: -170px;
        }
        .custom-modal .question-modal {
            top: 50%;
            height: 530px;
        }
        .custom-modal .question-modal > .row {
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
        }
        .custom-modal .question-modal > .row .btn-ok {
            width: 100%;
        }
        .custom-modal .question-modal > .row > div:first-child {
            max-width: 100%;
            -webkit-box-flex: unset;
                -ms-flex: unset;
                    flex: unset;
            position: relative;
            top: 60px;
        }
        .custom-modal .question-modal > .row > div:last-child {
            position: absolute;
            top: -50px;
            max-width: 100%;
            -webkit-box-flex: unset;
                -ms-flex: unset;
                    flex: unset;
            height: 90px;
            text-align: center;
        }
        .custom-modal .register-modal, .custom-modal .login-modal, .custom-modal .reset-modal, .custom-modal .verificationcode-modal, .custom-modal .transfer-failed-modal {
            padding: 15px;
        }
    /*---- Modal ----*/

    /*---- Job Page ----*/
        .job-page .second-row {
            margin-top: 30px;
        }
        .job-page .second-row > div:first-child {
            display: block !important;
        }
        .job-page .second-row > div:first-child .profile-picture {
            position: relative;
            margin-bottom: 15px;
        }
        .job-page .second-row > div:first-child .username {
            margin-bottom: 15px;
        }
        .job-page .job-details .date {
            margin-top: 10px;
        }
        .job-page .job-details {
            width: 100%;
        }
        .job-page .schedule {
            width: 100%;
            left: 0;
        }
        .check-input-four ul li label {
            position: relative;
            left: -6px;
        }
        .job-page .monthly-cost {
            top: 410px;
            left: calc(100vw - 180px);
            -webkit-transform: unset;
                    transform: unset;
            position: relative;
        }
    /*---- Job Page ----*/
    
    /*---- Reviews ----*/
        .reviews p {
            margin-top: 20px;
        }
        .reviews .useful > div {
            float: none !important;
        }
        .reviews .useful .title {
            font-size: 19px;
        }
    /*---- Reviews ----*/

    /*---- About page ----*/
        .about-page .about-block {
            padding-right: 25px;
        }
        .about-page .iphonex-picture, .about-page .samsung-picture {
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            left: 50%;
        }
        .about-page .iphonex-picture {
            top: -18%;
        }
        .about-page .samsung-picture {
            top: -9%;
        }
    /*---- About page ----*/

    /*---- Profile page ----*/
        .profile-page .menu .row > div:first-child {
            padding-right: 0px;
        }
        .profile-page .menu .row > div:last-child {
            padding-left: 0px;
        }
        .profile-page .menu .row > div:not(:last-child):not(:first-child) {
            padding-right: 7.5px;
            padding-left: 7.5px;
        }
        .profile-page .map {
            margin-top: 20px;
            height: 300px;
        }
        .profile-page .find-on-map {
            position: relative;
            width: 100%;
            padding: 0px;
            top: unset;
            right: unset;
            margin-top: 20px;
        }
        .profile-page .find-on-map .d-flex {
            display: block !important;
        }
        .profile-page .btn-activate {
            width: 120px;
            right: 0px;
            bottom: -8px;
        }
        .profile-page .locations {
            position: relative;
            top: 20px;
            right: unset;
            width: 100%;

        }
        .profile-page .btn-add {
            width: 40px;
            right: 10px;
        }
        .profile-page .btn-add svg {
            margin: 0px !important;
        }
        .profile-page .btn-add span {
            display: none;
        }
        .profile-page .custom-panel .activate-mark {
            right: 70px;
        }
        .profile-page .hourly-rate .input {
            width: 100%;
            bottom: -74%;
            left: 50%;
            top: unset;
            border-radius: 0px;
            border: 2px solid var(--green-color);
            color: var(--green-color) !important;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
        }
        .profile-page .hourly-rate .input .input-custom {
            color: var(--green-color);
        }
        .profile-page .hourly-rate .input .input-custom::-webkit-input-placeholder /* Chrome/Opera/Safari */ {
            color: var(--green-color);
        }
        .profile-page .hourly-rate .input .input-custom::-moz-placeholder /* Firefox 19+ */ {
            color: var(--green-color);
        }
        .profile-page .hourly-rate .input .input-custom:-ms-input-placeholder /* IE 10+ */ {
            color: var(--green-color);
        }
        .profile-page .hourly-rate .input .input-custom:-moz-placeholder /* Firefox 18- */ {
            color: var(--green-color);
        }
        .profile-page .st70 {
            fill: var(--green-color) !important;
        }
        .profile-page .custom-panel .dollar {
            top: 128%;
            left: 10px;
        }
        .profile-page .hourly-rate .input .input-custom {
            width: 45%;
            padding-left: 45px;
        }
        .profile-page .my-skills .custom-footer .btn-add-filter {
            margin-right: 5px;
        }
        .profile-page .my-skills .custom-footer .btn-clear {
            margin-left: 5px;
        }
        .profile-page .custom-panel.payment .custom-footer {
            height: auto !important;
            min-height: 310px !important;
        }
        .profile-page .payment .custom-footer > div:first-child {
            height: auto;
            margin-bottom: 50px;
        }
        .profile-page .btn-personal, .profile-page .btn-my-jobs, .profile-page .btn-my-history {
            font-size: 13px;
        }
        .profile-page .custom-panel.portfolio {
            margin-top: 100px;
        }
        .profile-page .my-wallet account > section {
            display: block;
        }
        .profile-page .my-wallet account > section > div:last-child {
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .profile-page .my-wallet account > section > div:first-child {
            margin-bottom: 15px;
        }
        .profile-page .my-wallet account .btitle > div:first-child {
            font-size: 12px;
        }
        .profile-page .profile-picture + div {
            margin-bottom: 50px;
        }
    /*---- Profile page ----*/
    
    /*---- Add Payment modal ----*/
        .custom-modal .add-payment-modal {
            top: 50% !important;
        }
    /*---- Add Payment modal ----*/

    /*---- My Jobs page ----*/
        .my-jobs-page .menu .row > div:first-child {
            padding-right: 0px;
        }
        .my-jobs-page .menu .row > div:last-child {
            padding-left: 0px;
        }
        .my-jobs-page .menu .row > div:not(:last-child):not(:first-child) {
            padding-right: 7.5px;
            padding-left: 7.5px;
        }
    /*---- My Jobs page ----*/

    /*---- Edit Location page ----*/
        .edit-location-modal .btn-delete, .edit-location-modal .btn-save {
            width: 130px !important;
        }
    /*---- Edit Location page ----*/

    /*---- My History page ----*/
        .my-history-page .menu .row > div:first-child {
            padding-right: 0px;
        }
        .my-history-page .menu .row > div:last-child {
            padding-left: 0px;
        }
        .my-history-page .menu .row > div:not(:last-child):not(:first-child) {
            padding-right: 7.5px;
            padding-left: 7.5px;
        }
    /*---- My History page ----*/

    /*---- Noification modal ----*/
        .notification-custom {
            width: calc(100% - 30px);
        }
        .notification-custom.open {
            right: 15px !important;
        }
        .notification-custom .profile-picture {
            position: relative;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            left: 50%
        }
        .notification-custom > div {
            display: block !important;
        }
        .notification-custom > div > div:not(:first-child):not(:last-child) {
            width: 100%
        }
        .notification-custom > div > div:not(:first-child):not(:last-child) > section {
            -webkit-transform: unset;
                    transform: unset;
            margin: 15px 0px;
        }
        .notification-custom > div > div:last-child {
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
        .notification-custom > div > div:last-child > button {
            width: 50%; 
        }
        .notification-custom > div > div:last-child > .btn-close {
            margin-right: 5px;
        }
        .notification-custom > div > div:last-child > .btn-view {
            margin-left: 5px;
        }
    /*---- Noification modal ----*/

    /*---- My Jobs page ----*/
        .my-jobs-page .btn-personal, .my-jobs-page .btn-my-jobs, .my-jobs-page .btn-my-history {
            font-size: 13px;
        }
    /*---- My Jobs page ----*/

    /*---- Incomplete Jobs page ----*/
        .incomplete-job-page .hourly-cost {
            position: relative;
            -webkit-transform: unset;
                    transform: unset;
            top: unset;
            margin: 30px 0;
        }
        .incomplete-job-page .user-row {
            display: block;
        }
        .incomplete-job-page .username {
            position: relative;
            top: -46px;
            right: -60px;
        }
        .incomplete-job-page .job-time div {
            position: unset;
            -webkit-transform: unset;
                    transform: unset;
            padding: 0 9px;
        }
        .incomplete-job-page .btn-chat svg {
            right: 15px !important;
        }
        .incomplete-job-page .job-details {
            width: 90%;
        }
        .incomplete-job-page .job-time {
            margin-bottom: 50px;
        }
    /*---- Incomplete Jobs page ----*/

    /*---- Pending Jobs page ----*/
        .pending-job-page .hourly-cost {
            -webkit-transform: unset;
                    transform: unset;
            position: relative;
            margin: 30px 0;
            top: unset;
        }
        .pending-job-page .user-row {
            display: block;
        }
        .pending-job-page .username {
            position: relative;
            top: -46px;
            right: -60px;
        }
        .pending-job-page .job-time div {
            position: unset;
            -webkit-transform: unset;
                    transform: unset;
            padding: 0 9px !important;
        }
        .pending-job-page .job-time div:last-child {
            position: absolute;
            bottom: -110px;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .pending-job-page .btn-chat svg {
            right: 30px !important;
        }
        .pending-job-page .buttons {
            margin-top: 170px;
        }
    /*---- Pending Jobs page ----*/

    /*---- Repetitive Jobs page ----*/
        .repetitive-job-page .hourly-cost {
            top: unset;
            position: relative;
            -webkit-transform: unset;
                    transform: unset;
            margin: 35px 0px;
        }
        .repetitive-job-page .user-row {
            display: block;
        }
        .repetitive-job-page .username {
            position: relative;
            top: -46px;
            right: -60px;
        }
        .repetitive-job-page .job-time div {
            position: unset;
            -webkit-transform: unset;
                    transform: unset;
            padding: 0 9px !important;
        }
        .repetitive-job-page .job-time div:last-child {
            position: absolute;
            bottom: -92px;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .repetitive-job-page .btn-chat svg {
            right: 30px !important;
        }
        .repetitive-job-page .buttons {
            margin-top: 170px;
        }
    /*---- Repetitive Jobs page ----*/
    
    /*---- Posting a Job page ----*/
        .posting-a-job-page .map {
            margin-top: 20px;
            height: 300px;
        }
        .posting-a-job-page .find-on-map {
            position: relative;
            width: 100%;
            padding: 0px;
            top: unset;
            right: unset;
            margin-top: 20px;
        }
        .posting-a-job-page .find-on-map .d-flex {
            display: block !important;
        }
        .posting-a-job-page .btn-activate {
            width: 110px;
            right: 0px;
            bottom: -8px;
            height: 45px;
        }
        .posting-a-job-page .locations {
            position: relative;
            top: 20px;
            right: unset;
            width: 100%;

        }
        .posting-a-job-page .btn-add {
            width: 40px;
            right: 10px;
        }
        .posting-a-job-page .btn-add svg {
            margin: 0px !important;
        }
        .posting-a-job-page .btn-add span {
            display: none;
        }
        .posting-a-job-page .custom-panel.upload-photo .images ul {
            -webkit-column-count: 2;
               -moz-column-count: 2;
                    column-count: 2;
        }
        .posting-a-job-page .custom-panel.upload-photo .images img {
            margin-bottom: 5px;
        }
        .posting-a-job-page .visibility .title {
            position: relative;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            left: 50%;
            top: -18px;
            width: 145px;
        }
        .posting-a-job-page .custom-panel.visibility .custom-header div.right {
            position: absolute;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            top: 70%;
            right: unset; 
            left: 50%;
        }
        .posting-a-job-page .visibility .check-input-three {
            left: unset;
        }
        .posting-a-job-page .custom-panel .custom-header .deadline {
            right: 80px;
            top: 30px;
        }
        .posting-a-job-page .custom-panel .custom-header div.right.date {
            font-size: 14px;
            top: 60px;
            right: -65px;
        }
        .posting-a-job-page .schedule .check-input-four ul {
            -webkit-column-count: 7;
               -moz-column-count: 7;
                    column-count: 7;
            margin: 0 11px !important;
            position: relative;
        }
        .posting-a-job-page .schedule .check-input-four ul li label {
            position: relative;
            width: 33px;
            height: 33px;
            line-height: 31px;
            transform: translateX(6px);
        }
        .posting-a-job-page .schedule .time {
            position: relative;
            left: 4px;
        }
        .posting-a-job-page .schedule .time svg {
            width: 40px;
            height: 40px;
        }
        .posting-a-job-page .schedule .time section select-arrow:after {
            left: 73px;
            top: -32%;
        }
        .posting-a-job-page .calendars .input-custom .start_date, .posting-a-job-page .calendars .input-custom .end_date {
            width: auto;
            padding: 0;
            padding-left: 8px;
        }
        .posting-a-job-page .custom-panel.type-of-job .custom-footer svg, .posting-a-job-page .custom-panel.payment-method .custom-footer svg {
            margin-right: -3px;
            left: -9px;
        }
        .posting-a-job-page .custom-panel.payment-method .custom-footer input.input-custom {
            left: 106px;
        }
    /*---- Posting a Job page ----*/

    /*---- Time Picker ----*/
        .popover {
            left: 50% !important;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
    /*---- Time Picker ----*/

    /*---- Square Check Input ----*/
        .square-check-input label {
            padding: 0px 0px 0px 50px;
        }
    /*---- Square Check Input ----*/

    /*---- Job Request page ----*/
        .job-request-page .container {
            padding-top: 20px;
        }
        .job-request-page job-request .paragraph {
            width: 100%;
        }
        .job-request-page job-request .per-hour {
            position: relative;
            -webkit-transform: unset;
                    transform: unset;
            top: 20px;
            left: calc(100vw - 160px);
        }
        .job-request-page job-request .job-details {
            margin-top: 50px;
        }
        .job-request-page job-request .check-input-three li label {
            width: 60px;
        }
        .job-request-page job-request .check-input-three li.right label {
            left: -30px;
        }
        .job-request-page job-request .deadline-side > label {
            top: 29%;
        }
        .job-request-page job-request:not(:first-child) {
            margin: 50px 0;
        }
    /*---- Job Request page ----*/

    /*---- Job Seekers page ----*/
        .job-seekers-page .per-hour {
            top: 80px;
        }
        .job-seekers-page .row.r1 {
            margin-top: 90px;
        }
        .job-seekers-page .rating, .job-seekers-page .rating ul {
            width: unset;
        }
        .job-seekers-page .button-locate {
            margin-bottom: 30px !important;
            margin-top: 10px !important;
        }
        .job-seekers-page .rating ul:last-child li:not(:last-child) {
            margin-right: 10px !important;
        }
        .job-seekers-page .rating.trust ul:last-child li:not(:last-child) {
            margin-right: 7px !important;
        }
        .job-seekers-page .total-rates {
            margin-left: 10px !important;
        }
        .job-seekers-page .row.r2 {
            padding: 90px 0;
        }
        .job-seekers-page .my-skills .custom-footer ul {
            -webkit-column-count: 2;
               -moz-column-count: 2;
                    column-count: 2;
        }
    /*---- Job Seekers page ----*/

    /*---- Repetitive Jobs page ----*/
        .request-private-job-page .per-hour {
            position: relative;
            -webkit-transform: unset;
                    transform: unset;
            top: unset;
            margin: 30px 0;
        }
        .request-private-job-page .profile-picture {
            margin: 10px 0px;
        }
        .request-private-job-page .job-details {
            width: 100%;
        }
        .request-private-job-page .rating-parent {
            margin-top: 35px !important;
            margin-bottom: 20px;
        }
    /*---- Repetitive Jobs page ----*/

    /*---- Favorites modal ----*/
        .custom-modal .favorites-modal .buttons {
            position: absolute;
            top: 85px;
            left: 50%;
            -webkit-transform: translate(-50%);
                    transform: translate(-50%);
        }
        .custom-modal .favorites-modal .custom-footer li {
            padding-bottom: 60px !important;
        }
        .custom-modal .favorites-modal .username {
                width: calc(100% - 70px);
        }
        .custom-modal .favorites-modal .input {
            width: 170px;
        }
    /*---- Favorites modal ----*/

    /*---- Payment page ----*/
        .payment-page .row.r1 {
            margin-bottom: 50px;
        }
        .payment-page .row.r2 {
            margin-bottom: 50px;
            padding-bottom: 50px;
        }
        .payment-page .buttons {
            margin-bottom: 50px;
            margin-top: 50px;
        }
    /*---- Payment page ----*/

    /*---- User Personal page ----*/
        .user-personal-page .btn-locate, .user-personal-page .btn-add-favorite {
            font-size: 14px;
        }
        .user-personal-page .rate-parent {
            margin-top: 50px;
        }
        .user-personal-page .my-skills .custom-footer ul {
            -webkit-column-count: 2;
               -moz-column-count: 2;
                    column-count: 2;
        }
        user-job .first-row {
            display: block;
            text-align: center;
        }
        user-job .profile-picture {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        user-job .first-row > div {
            border: 0 !important;
        }
        user-job span, user-job .options > div {
            position: unset !important;
            top: unset !important;
            -webkit-transform: unset !important;
                    transform: unset !important;
        }
        user-job .first-row > div {
            width: 100%;
            height: auto;
        }
        user-job .username {
            margin: 15px 0;
        }
        user-job .rating {
            margin-bottom: 20px;
        }
        user-job .useful .title {
            float: unset !important;
            font-size: 19px;
        }
    /*---- User Personal page ----*/

    /*---- Messages page ----*/
        .messages-page .btn-pending, .messages-page .btn-you-assigned, .messages-page .btn-assigned-to, .chat-page .btn-pending, .chat-page .btn-you-assigned, .chat-page .btn-assigned-to {
            font-size: 14px;
        }
        .chat-page .three-dots-menu {
            display: block;
        }
        chat-row {
            padding: 30px 15px;
        }
        .messages-page .profile-picture {
            width: 50px;
            height: 50px;
        }
        chat-row .date-sent {
            padding-bottom: 5px;
            padding-top: 15px;
        }
    /*---- Messages page ----*/

    /*---- Chats page ----*/
        .chat-page .first-row .buttons {
            display: none;
        }
    /*---- Chats page ----*/

    /*---- Notifications page ----*/
        .notifications-page .btn {
            width: 142px;
        }
    /*---- Notifications page ----*/

    /*---- Job Assigned modal ----*/
        .custom-modal .job-assigned1-modal, .custom-modal .job-assigned2-modal {
            padding: 20px;
        }
        .custom-modal .job-assigned1-modal .btn {
            width: 122px;
        }
        .custom-modal .job-assigned2-modal .minutes label {
            width: 170px;
            height: 170px;
        }
        .custom-modal .online-job-modal {
            padding: 20px;
        }
        .custom-modal .online-job-modal .wage, .custom-modal .online-job-modal .pays {
            margin-bottom: 0px;
        }
    /*---- Job Assigned modal ----*/

    /*---- How It Works page ----*/
        .how-it-works-page .first-row .image {
            width: 300px;
            height: 280px;
        }
        .how-it-works-page .second-row .rating ul li {
            margin-right: 10px !important;
        }
        .how-it-works-page .second-row .rating.trust ul li {
            margin-right: 14px !important;
        }
        .how-it-works-page .third-row > div:first-child {
            padding-right: 15px !important;
        }
        .how-it-works-page .third-row {
            padding-bottom: 0px; 
        }
        .how-it-works-page .third-row .list label:not(:last-child) {
            margin-bottom: 20px;
        }
    /*---- How It Works page ----*/
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Smartphones Landscape */
@media (max-width : 767px) and (orientation : landscape) {


}

/****************************************************************************************************************************/
/* web responsive layout */
/* Tablets Landscape */
@media (min-width : 768px) and (max-width : 1023px)  {
    /*---- Navbar ----*/
        .navbar-custom .navbar-collapse {
            background-color: white;
            position: absolute;
            top: var(--navbar-height);
            width: 100vw;
            left: 0;
            height: auto;
            box-shadow: 0px 10px 16px rgba(0,0,0,.3);
            display: none;
        }
        .navbar-custom .btn-job {
            height: 100%;
            max-height: 42px;
        }
        .navbar-custom .navbar-nav li {
            height: 50px;
            line-height: 50px;
        }
        .navbar-custom .user-options {
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            left: 50%;
            top: -112px;
            z-index: 10;
        }
        .navbar-custom .user-options > .arrow {
            color: var(--red-color);
            left: 50%;
            top: 102%;
            -webkit-transform: translate(-50%, -50%) rotate(180deg);
                    transform: translate(-50%, -50%) rotate(180deg);
        }
        .navbar-custom {
            padding: 0 16px;
        }
    /*---- Navbar ----*/
    
    /*---- About page ----*/
        .about-page .iphonex-picture, .about-page .samsung-picture {
            top: -152px;
        }
        .about-page .samsung-picture {
            float: right;
        }
    /*---- About page ----*/

    /*---- Home page ----*/
        .home-page .panel {
            position: fixed;
            background-color: white;
            z-index: 13;
            width: 320px;
            max-height: calc(100vh - var(--navbar-height));
            top: var(--navbar-height);
            left: -350px;
            -webkit-transition: ease 0.3s;
            transition: ease 0.3s;
        }
        .home-page .panel.open {
            left: 0px;
        }
    /*---- Home page ----*/

    /*---- How It Works page ----*/
        .how-it-works-page .second-row .rating ul li {
            margin-right: 6px !important;
        }
        .how-it-works-page .second-row .rating.trust ul li {
            margin-right: 11px !important;
        }
    /*---- How It Works page ----*/

    /*---- Job page ----*/
        .job-page .monthly-cost {
            top: 180px !important;
        }
        .job-page .second-row {
            margin-top: 50px;
        }
        .job-page .schedule {
            left: 10%;
        }
    /*---- Job page ----*/

    /*---- Job Request page ----*/
        .job-request-page job-request .per-hour {
            -webkit-transform: translate(-50%, 0%);
                    transform: translate(-50%, 0%);
        }
        .job-request-page .job-details {
            margin-top: 40px;
        }
    /*---- Job Request page ----*/

    /*---- Job Seekers page ----*/
        .job-seekers-page .per-hour {
            top: 155px;
        }
        .job-seekers-page .my-skills .custom-footer ul {
            -webkit-column-count: 4;
               -moz-column-count: 4;
                    column-count: 4;
            width: 90%;
        }
    /*---- Job Seekers page ----*/

    /*---- Pending Jobs page ----*/
        .pending-job-page .job-details {
            margin-top: 40px;
        }
    /*---- Pending Jobs page ----*/
    
    /*---- Posting a Job page ----*/
        .posting-a-job-page .map {
            height: 320px;
        }
        .posting-a-job-page .calendars label {
            width: 48%;
        }
        .posting-a-job-page .calendars label:last-child {
            margin-left: 2%;
        }
    /*---- Posting a Job page ----*/

    /*---- Profile page ----*/
        .profile-page .map {
            height: 320px;
        }
        .profile-page .map-parent {
            margin-top: 40px;
        }
    /*---- Profile page ----*/

    /*---- User Jobs page ----*/
        user-job .first-row > div {
            width: 100%;
        }
        user-job .first-row > div:not(:last-child) {
            margin-right: 10px;
        }
    /*---- User Jobs page ----*/

    /*---- User Personal page ----*/
        .user-personal-page .my-skills .custom-footer ul {
            -webkit-column-count: 4;
               -moz-column-count: 4;
                    column-count: 4;
        }
    /*---- User Personal page ----*/
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Laptops 1024px */
@media (min-width : 1024px) and (max-width : 1439px) {
    .navbar-custom .btn-job {
        padding: 0px 15px;
        margin: 0px 10px;
    }
    .pending-job-page .btn-chat svg {
        right: 30px !important;
    }
    .repetitive-job-page .hourly-cost {
        top: 90px;
    }
}

/****************************************************************************************************************************/
/* web responsive layout */
/* Laptops 1440px */
@media (min-width : 1440px) and (max-width : 2559px) {


}

/****************************************************************************************************************************/
/* web responsive layout */
/* Laptops 2560px */
@media (min-width : 2560px) {


}