:root {
    --white: #ffffff;
    --yellow: #FFC700;
    --yellow-hover: #FFC700;
    --grey: #f1f1f1;
    --logo-grey: #818181;
    --purple: #0078E9;
    --purple-hover: #0078E9;
    --invalid: #dc3545;
    --custom-black: #000;
}
.text-brand {
    color: var(--purple);
}
.burger-icon {
    z-index: 1000;
}
.swiper-pagination-custom {
    bottom: 30px;
}
.page-item.active .page-link {
    background-color: var(--purple);
    border-color: var(--purple);
}
.box-image-job .job-top-creator-head {
    background-color: rgb(231 172 127 / 35%);
}
/* table.table-bordered.dataTable th */
table.table-bordered.dataTable td {
    border-bottom-width: 1px;
    border-color: var(--grey);
    border-bottom: 1px solid var(--grey);
}
.page-link {
    color: var(--purple);
}
.page-link:hover {
    color: var(--purple);
}
.contact-from-area .contact-form-style button,
.btn.btn-default,
.nav-right li button.active,
.btn-brand-hover:hover {
    color: var(--white);
    background-color: var(--purple);
}
.banner-hero .text-small-primary--disk::before {
    background-color: var(--purple);
}
.header .text-link-bd-btom::before,
.noUi-connect,
.block-progress-status .item-progress .info-progress .progress .progress-bar,
.datepicker table tr td.active.active,
.datepicker table tr td span.active.active, 
.datepicker table tr td span.active.disabled.active, 
.datepicker table tr td span.active.disabled:active, 
.datepicker table tr td span.active.disabled:hover.active, 
.datepicker table tr td span.active.disabled:hover:active, 
.datepicker table tr td span.active:active, 
.datepicker table tr td span.active:hover.active, 
.datepicker table tr td span.active:hover:active {
    background: var(--purple);
}
.cb-container .checkmark:after {
    background: var(--purple) url(../imgs/theme/icons/tick.svg) no-repeat center;
}
.banner-hero .text-small-primary,
.card-grid-2 .card-block-info .card-text-price,
.header .main-menu li a:hover,
.header .text-link-bd-btom,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li:hover > a,
.card-grid a:hover,
.card-grid-2 a:hover,
.card-grid-3 h5 a:hover,
.btn-link:hover,
.list-recent-jobs .card-job .card-job-top--info .card-job-top--price,
.modal-title,
.label-link:hover,
a:hover,
.header .main-menu li a.active,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a.active, 
.hover-link:hover,
.btn-small {
    color: var(--purple);
}
.form-control,
.select2-container .select2-selection--single .select2-selection__rendered,
.hover-link {
    color: var(--custom-black);
}
.btn.btn-default:hover,
.nav-right li button:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.widget-categories li:hover span.count {
    color: var(--white);
    background-color: var(--purple-hover);
}
.text-icon-first::before {
    background-color: var(--yellow);
}
.sticky-bar.stick {
    border-bottom: 3px solid #7a1fd033;
}
.text-brand-10 {
    color: var(--yellow);
}
.noUi-horizontal .noUi-handle {
    border: 3px solid var(--yellow);
}
.cb-container input:checked ~ .checkmark {
    border: 2px solid var(--purple);
}

.employers-list .card-employers .employers-name h5:hover a,
.card-blog-1 h3.post-title a:hover,
.label-link,
a {
    color: var(--purple-hover);
}
.header .main-menu li a {
    font-weight: 700;
}
.widget-categories li span.count {
    background-color: rgba(81, 146, 255, 0.12);
    color: #1f2938;
    min-width: 40px;
}
.modal-header {
    border-bottom: unset;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.modal-tabs-header {
    padding: 0;
}
.modal-tabs-header .modal-header {
    padding: 0;
}
.modal-tabs-header .modal-header .nav-pills .nav-link.nav-first {
    border-top-right-radius: 20px;
}
.modal-tabs-header .modal-header .nav-pills .nav-link.nav-last {
    border-top-left-radius: 20px;
}
.modal-tabs-header .modal-header .nav-pills .nav-link {
    background-color: #ecf0f180;
    font-size: 18px;
    font-weight: 500;
    padding-top: 25px;
    padding-bottom: 25px;
    color: var(--purple-hover);
    border-radius: unset;
}
.modal-tabs-header .modal-header .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #fff;
    color: var(--yellow);
}
.modal-content {
    background-color: #fff;
    background-clip: unset;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 20px;
}
.sidebared-modal .modal-content {
    border: unset;
}
.modal-footer {
    border-top: #ecf0f180;
    background-color: #ecf0f180;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.modal-title {
    font-weight: 600;
}
.modal-backdrop {
    background: #d1d1d1ad;
}
.invalid {
    color: var(--invalid);
}
.heading-image-rd.online figure::before {
    background: unset;
}
.modal .accordion-button {
    border-left: unset;
    border-right: unset;
}
.modal .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}
.modal .accordion-button::after {
    position: absolute;
    left: 1.25rem;
}
.modal .accordion-button:not(.collapsed)::after {
    position: absolute;
    left: 1.25rem;
}

.form-control:disabled, .form-control[readonly] {
    background-color: var(--white);
}
.text-justify {
    text-align: justify;
}
.header-logo img {
    min-width: 155px;
    max-width: 155px;
}
.card-block-info h5{
    height: 60px;
    overflow: hidden;
}
.footer-logo {
    max-width: 200px;
}

.control-image {
    position: relative;
    text-align: center;
    height:200px;
    border: 1px solid var(--purple);
    border-radius: 20px;
    width: 100%;
}
.control-image:hover {
    background: var(--grey);
}
.control-image > i {
    position:relative;
    top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}
.control-image > img {
    border-radius: 19px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.control-image:hover > img {
    opacity: 0.3;
}
.control-image:hover .middle {
    opacity: 1;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.control-image .text button {
    background: white;
    padding: 10px;
    border-radius: 50%;
}

.employers-list .card-employers .btn-brand-hover {
    border: thin solid var(--purple);
    font-size: 14px;
}

.form-card {
    padding: 15px;
    border: 1px solid #d1d1d1;
    border-radius: 20px;
}

.form-card .btn-close {
    float: right;
}

@keyframes append-animate {
	from {
		transform: scaleY(0);
		opacity: 0;
	}
	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

.insert-animation {
	transform-origin: 50% 0;
	animation: append-animate .3s linear;
}

.job-top-creator-head h5 {
    font-size: 19px; 
    color: var(--purple);
}

.btn-custom-warning {
    color: var(--yellow);
    border: 1px solid var(--yellow);
}
.btn-custom-warning:hover {
    color: var(--yellow-hover);
    border: 1px solid var(--yellow-hover);
}
.swiper-pagination-customs-active, .swiper-pagination-customs:hover {
    background: var(--purple);
    border-radius: 50%;
}
.btn-border:hover {
    background-color: var(--purple);
}
.contact-from-area i {
    font-size: 40px;
    color: var(--purple);
}
.text-blue {
    color: var(--yellow);
}
.header .main-menu li a {
    /* font-weight: 600; */
    color: #585858;
}
#scrollUp {
    background-color: var(--yellow);
}
.card-grid-2 .card-block-info .card-grid-2-img-medium .card-grid-2-img-small {
    background: #7750a22e;
}
.footer .footer-bottom strong {
    color: var(--ora);
}
.header {
    padding: 20px 0;
}
.toast {
    background-color: #030303;
}
.toast-info {
    background-color: #3276b1;
}
.toast-info2 {
    background-color: #2f96b4;
}
.toast-error {
    background-color: #FC4F4F;
}
.toast-success {
    /* background-color: #019267; */
    background-color: var(--purple);
}
.toast-warning {
    background-color: #FF9F45;
}
.widget-categories {
    background-color: #ffffff !important;
}
.btn-warning {
    color: #000;
    background-color: #FF9F45;
    border-color: #FF9F45;
}
.btn-outline-warning {
    color: #FF9F45;
    border-color: #FF9F45;
}
.btn-outline-warning:hover {
    color: #000;
    background-color: #FF9F45;
    border-color: #FF9F45;
}

.text-yellow-6 {
    font-size: 25px;
    color: #FF9F45;
}


.card-grid-3 h5 a {
    color: #1f2938;
    font-size: 24px;
    line-height: 1.33;
    font-weight: 700;
}
.card-grid-3 .card-grid-3-image {
    position: relative;
    padding: unset;
}
.card-grid-3 .card-grid-3-image figure img {
    border-radius: 0px;
}

.card-blog-1 h3.post-title a {
    color: #1f2938;
    font-size: 24px;
    line-height: 1.33;
    font-weight: 700;
}
.card-blog-1 {
    border-radius: 15px;
    padding: 0;
}
.card-blog-1 .post-thumb {
    border-radius: 0px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.card-blog-1 .post-thumb img {
    border-radius: 0px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.card-blog-1 .card-block-info {
    padding: 0 30px 30px 30px;
}

.card-grid-2 h5 a {
    color: #1f2938;
    font-size: 24px;
    line-height: 1.33;
    font-weight: 700;
}

.buttons-filter .btn-outline-warning {
    color: var(--yellow);
}

.buttons-filter .btn-outline-warning:hover {
    color: var(--white);
}
.btn-outline-warning {
    color: var(--yellow);
}
.btn-outline-warning:hover {
    color: var(--white);
}

.btn-outline-danger {
    color: var(--invalid);
    border-color: var(--invalid);
}
.btn-outline-danger:hover {
    color: var(--white);
    background-color: var(--invalid);
}
table.dataTable {
    background: var(--grey);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
table.dataTable thead {
    margin-bottom: 6px;
}
table.dataTable tbody {
    background: var(--white);
}

a.fb {
    font-weight: 500;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    padding: 13px 30px 15px 44px;
    background: #fff;
    color: #3A5A97;
    text-shadow: 0 -1px 0 rgba(0,0,20,.4);
    text-decoration: none;
    line-height: 1;
    position: relative;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #3A5A97;
    min-height: 49px;
}

.connect {
    display: inline-block;
    /* position: relative;
    height: 23px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
    text-align: center;
    width: 29px;
    line-height: 23px; */
    margin: -5px -13px -2px 7px;
}

a.google {
    font-weight: 500;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    padding: 15px 30px 15px 44px;
    background: #fff;
    color: #dd4b39;
    text-shadow: 0 -1px 0 rgb(0 0 20 / 40%);
    text-decoration: none;
    line-height: 1;
    position: relative;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #dd4b39;
    min-height: 49px;
}
.connect-google {
    display: inline-block;
    /* position: relative;
    height: 23px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
    text-align: center;
    width: 29px;
    line-height: 23px; */
    margin: -5px -13px -2px 7px;
}

.social-button {
    background-position: 25px 0px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    width: 100%;
    border-radius: 3px;
    margin: 10px auto;
    outline: rgb(255, 255, 255) none 0px;
    padding-left: 20%;
    transition: all 0.2s cubic-bezier(0.72, 0.01, 0.56, 1) 0s;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#facebook-connect {
    background: rgb(255, 255, 255) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook.svg?sanitize=true') no-repeat scroll 5px 0px / 30px 50px padding-box border-box;
    border: 1px solid rgb(60, 90, 154);
}

#facebook-connect:hover {
    border-color: rgb(60, 90, 154);
    background: rgb(60, 90, 154) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook-white.svg?sanitize=true') no-repeat scroll 5px 0px / 30px 50px padding-box border-box;
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease-out;
}

#facebook-connect span {
    box-sizing: border-box;
    color: rgb(60, 90, 154);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    border: 0px none rgb(255, 255, 255);
    outline: rgb(255, 255, 255) none 0px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#facebook-connect:hover span {
    color: #FFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#google-connect {
    background: rgb(255, 255, 255) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
    border: 1px solid rgb(220, 74, 61);
}

#google-connect:hover {
    border-color: rgb(220, 74, 61);
    background: rgb(220, 74, 61) url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus-white.png') no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease-out;
}

#google-connect span {
    box-sizing: border-box;
    color: rgb(220, 74, 61);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    border: 0px none rgb(220, 74, 61);
    outline: rgb(255, 255, 255) none 0px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#google-connect:hover span {
    color: #FFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.header .text-link-bd-btom {
    color: var(--yellow) !important;
}

.header .text-link-bd-btom:hover {
    color: var(--yellow-hover) !important;
}