.page-user-dashboard h1 {
    font-size: 0 !important;
}

.user-dashboard-section .disp-name,
.user-dashboard-section #navigation h4 {
    font-size: 1.2rem;
}

.status,
.user-card-full .social-link li {
    display: inline-block
}

.add-project,
.bg-image,
.form-btn,
.icon-info {
    position: relative
}

.form-btn::before,
.sales button::before {
    font-family: FontAwesome;
    position: absolute
}

.pagination,
.sales .btn-group,
div#user_data_filter {
    float: right
}

#navigation h4.disp-name {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}

.circle-logo,
.circle-tile,
.header-top li,
.icon-info .label,
.login-form,
.login-inner h1,
.logo.logostyle,
.pagination li a,
.ui-datepicker-calendar td a,
.update-img {
    text-align: center
}

.change-profile-img {
    position: absolute;
    right: 0px;
    top: 15px;
    background: #ffb404;
    padding: 3px 8px;
    border-radius: 50%;
    color: #fff;
}

.file-upload .square,
.login-signup,
.status {
    vertical-align: middle
}

.cs-data,
.disp-name,
.user-dashboard {
    font-family: var(--fontcontent)
}

:root {
    --csprimary: #1b3b4c;
    --cssecondary: #ffc000;
    --cscolor1: #273060;
    --cscolor2: #245f7e;
    --cscolor3: #365370;
    --cscolor4: #0e4a7a;
    --bg-color: #ffffff;
    --fullwidth: 100%;
    --fontheading1: "Raleway", Sans-serif;
    --fontheading2: "Raleway", Sans-serif;
    --fontheading3: "Raleway", Sans-serif;
    --fontcontent: "Raleway", Sans-serif;
}

.container-fluid.display-table {
    font-size: 15px;
    /*background-color: #edf4fb;*/
    padding: 15px
}

[class*=" vicon-"],
[class^=vicon-] {
    font-size: 18px
}

.es-20 {
    height: 20px
}

.es-30 {
    height: 30px
}

.es-50 {
    height: 50px
}

.navi .active a {
    background: #ffc000;
    /*border-left: 5px solid #326c8b;*/
    padding-left: 15px;
    color: #000
}

.navi a {
    color: var(--cl-black);
    display: block;
    font-size: .875rem;
    font-weight: 700;
    padding: .875rem 1rem;
    text-decoration: none;
    font-family: var(--e-global-typography-primary-font-family);
}

h6 {
    font-size: 14px
}

.navi i {
    font-size: 16px;
    margin-right: 10px;
    color: #ffc000
}

.navi .active i {
    color: #000;
}

.navi a:hover i {
    color: #ffc000;
}

.navi a:hover {
    text-decoration: none;
    color: #fff
}

#navigation {
    border: 1px solid rgb(243 244 246);
    padding: 1.2rem;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.update-img {
    padding: 15px 0
}

.update-img a span {
    background-color: #fcc009;
    color: #000;
    width: 100%;
    padding: 8px 20px;
    line-height: 20px;
    border-radius: 0.75rem;
}

.update-img a span:hover {
    background-color: #fcc009;
    color: #000
}

.fa-3x {
    font-size: 40px;
    line-height: 72px
}

.px-4 {
    padding-right: auto;
    padding-left: auto
}

.logostyle img {
    width: 100px;
    max-width: 7rem;
    border-radius: 50%;
    height: 100px;
    margin: 10px auto;
    border: 4px solid #fcc009;
}

.ui-datepicker-calendar td {
    padding: 2px
}

.status {
    font-size: 30px;
    margin: 2px 2px 0 0;
    line-height: 10px
}

.text-success {
    color: #10c469
}

.text-info {
    color: #62c9e8
}

.text-warning,
table.table td a.edit {
    color: #ffc107
}

.text-danger {
    color: #ff5b5b
}

.pagination {
    margin: 0 0 5px
}

.pagination li a {
    border: none;
    font-size: 13px;
    min-width: 30px;
    min-height: 30px;
    color: #999;
    margin: 0 2px;
    line-height: 30px;
    border-radius: 2px;
    padding: 0 6px
}

.pagination li a:hover {
    color: #666
}

.pagination li.active a,
.pagination li.active a.page-link {
    background: #03a9f4
}

.pagination li.active a:hover {
    background: #0397d6
}

.pagination li.disabled i {
    color: #ccc
}

.pagination li i {
    font-size: 16px;
    padding-top: 6px
}

.hint-text {
    float: left;
    margin-top: 10px;
    font-size: 13px
}

.padding {
    padding: 3rem !important
}

.user-card-full {
    overflow: hidden
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin-bottom: 30px
}

.login-header .navbar-right,
.m-r-0 {
    margin-right: 0
}

.m-l-0 {
    margin-left: 0
}

.user-card-full .user-profile {
    border-radius: 5px 0 0 5px
}

.bg-c-lite-green {
    background: -webkit-gradient(linear, left top, right top, from(#f29263), to(#ee5a6f));
    background: linear-gradient(to right, #ee5a6f, #f29263)
}

.tab-content .tab-pane,
.user-profile {
    padding: 20px 0
}

.m-b-25 {
    margin-bottom: 25px
}

.login-inner h1,
.m-b-20,
table {
    margin-bottom: 20px
}

.img-radius,
.rounded {
    border-radius: 5px
}

.navi ul {
    padding-left: 0
}

@media only screen and (min-width: 1400px) {
    p {
        font-size: 14px
    }
}

.card-block {
    padding: 1.25rem
}

.card .card-block p {
    line-height: 25px
}

.text-muted {
    color: #919aa3
}

.b-b-default {
    border-bottom: 1px solid #e0e0e0
}

.f-w-600 {
    font-weight: 600
}

.p-b-5 {
    padding-bottom: 5px
}

.m-b-10 {
    margin-bottom: 10px
}

.m-t-40,
.my-orders {
    margin-top: 20px
}

.user-card-full .social-link li a {
    font-size: 20px;
    margin: 0 10px 0 0;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.circle-tile {
    margin-bottom: 15px
}

.circle-tile-heading {
    transition: .3s ease-in-out;
    width: 80px
}

.circle-tile-heading .fa {
    line-height: 80px
}

.circle-tile-description {
    text-transform: uppercase
}

.circle-tile-heading {
    border: 3px solid rgba(255, 255, 255, .3);
    border-radius: 100%;
    color: #fff;
    height: 80px;
    position: relative;
    transition: .3s ease-in-out;
    width: 80px
}

.circle-tile-heading.dark-blue:hover {
    background-color: #2e4154
}

.circle-tile-heading.green:hover {
    background-color: #138f77
}

.circle-tile-heading.orange:hover {
    background-color: #da8c10
}

.circle-tile-heading.blue:hover {
    background-color: #2473a6
}

.circle-tile-heading.red:hover {
    background-color: #cf4435
}

.circle-tile-heading.purple:hover {
    background-color: #7f3d9b
}

.tile-img {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .9)
}

.dark-blue {
    background-color: #34495e
}

.green {
    background-color: #16a085
}

.blue {
    background-color: #2980b9
}

.orange {
    background-color: #f39c12
}

.red {
    background-color: #e74c3c
}

.purple {
    background-color: #8e44ad
}

.dark-gray {
    background-color: #7f8c8d
}

.gray {
    background-color: #95a5a6
}

.light-gray {
    background-color: #bdc3c7
}

.yellow {
    background-color: #f1c40f
}

.text-dark-blue {
    color: #34495e
}

.text-green {
    color: #16a085
}

.text-blue {
    color: #2980b9
}

.text-orange {
    color: #f39c12
}

.text-red {
    color: #e74c3c
}

.text-purple {
    color: #8e44ad
}

.text-faded {
    color: rgba(255, 255, 255, .7)
}

.bg-image {
    background: url(../images/background-login.jpg) 0 0/cover no-repeat;
    width: 100%;
    height: 100vh;
    display: table
}

.login-header {
    display: inline-block;
    width: 100%;
    background: #0e1a35
}

.login-signup {
    display: table-cell;
    width: 100%
}

.login-logo img {
    cursor: pointer;
    max-width: 171px;
    padding: 23px 15px 22px;
    width: 100%
}

.login-header .nav-tabs>li.active>a,
.login-header .nav-tabs>li.active>a:focus,
.login-header .nav-tabs>li.active>a:hover {
    background-color: transparent;
    border: none;
    color: #fff
}

.login-header .nav-tabs>li>a {
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 48px;
    padding: 15px 30px;
    color: #fff
}

.login-header .nav-tabs {
    border-bottom: none
}

.login-header .nav-tabs>li {
    margin-bottom: 0
}

.header-rightside .nav>li>a:focus,
.header-rightside .nav>li>a:hover,
.login-header .nav>li>a:focus,
.login-header .nav>li>a:hover {
    background: 0 0;
    text-decoration: none
}

.login-header .nav-tabs>li.active {
    border-bottom: 6px solid #5584ff
}

.login-inner h1 {
    color: #8492af;
    font-size: 48px;
    font-weight: 300;
    margin-top: 0
}

.login-inner h1 span,
.sales .dropdown-menu>a:hover {
    color: #5584ff
}

.login-form input {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color -moz-use-text-color #d4d9e3;
    border-image: none;
    border-style: none none solid;
    border-width: medium medium 1px;
    font-weight: 300;
    width: 100%;
    color: #8492af;
    padding: 15px 50px;
    font-size: 17px;
    max-width: 550px
}

.login-form label {
    margin-bottom: 30px;
    width: 100%
}

.user input {
    background: url("../images/user.png") 7px 12px no-repeat rgba(0, 0, 0, 0)
}

.pass input {
    background: url("../images/password.png") 7px 12px no-repeat rgba(0, 0, 0, 0)
}

.mail input {
    background: url("../images/mail.png") 4px 12px no-repeat rgba(0, 0, 0, 0)
}

.login-signup .tab-content {
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .176);
    display: inline-block;
    margin-top: -8px;
    width: 100%
}

.form-btn {
    background: #5584ff;
    border: none;
    border-radius: 100px;
    color: #fff;
    font-weight: 400;
    max-width: 250px;
    padding: 10px 0;
    width: 100%;
    margin: 40px 0;
    box-shadow: 0 2px 8px #d2d2d2;
    -moz-box-shadow: 0 2px 8px #d2d2d2;
    -webkit-box-shadow: 0 2px 8px #d2d2d2
}

.add-project,
.view {
    color: #fff;
    font-size: 14px;
    font-weight: 600
}

.form-btn::before {
    content: "";
    right: 17px;
    top: 9px
}

.form-details {
    padding: 35px 0
}

.home {
    background: #f6f7fa
}

.display-table {
    display: table;
    padding: 0;
    height: 100%;
    width: 100%
}

.display-table-row {
    display: table-row;
    height: 100%
}

.display-table-cell {
    display: table-cell;
    float: none;
    height: 100%
}

.header-top li,
.sales,
.view,
table.table td a {
    display: inline-block
}

.v-align {
    vertical-align: top
}

.header-top {
    margin: 0;
    padding-top: 2px
}

.header-top img {
    border-radius: 50%;
    max-width: 48px;
    width: 100%
}

.add-project {
    background: #5584ff;
    border-radius: 100px;
    padding: 10px 27px 10px 45px
}

.add-project::before {
    background: url("../images/plus.png") no-repeat rgba(0, 0, 0, 0);
    content: "";
    height: 12px;
    left: 17px;
    position: absolute;
    top: 12px;
    width: 12px
}

#my-cool-chart svg,
.img-responsive,
.job-manager-jobs,
.sales,
.select.filtersData,
.select2.select2-container {
    width: 100%
}

.add-project:hover,
.modal-header.login-header h4 {
    color: #fff
}

.header-top .dropdown-toggle,
.header-top i {
    color: #0e1a35
}

.label.label-primary {
    border-radius: 50%;
    font-size: 9px;
    left: 8px;
    position: absolute;
    top: -9px
}

.icon-info .label {
    border: 2px solid #fff;
    font-weight: 500;
    padding: 3px 5px
}

.header-top .dropdown-menu {
    border: none;
    left: -85px;
    padding: 17px
}

.view {
    background: #5584ff;
    border-radius: 100px;
    margin-top: 10px;
    padding: 10px 15px
}

.navbar-content>span {
    font-size: 13px;
    font-weight: 700
}

.search input {
    border: none;
    font-size: 15px;
    padding: 15px 9px;
    width: 100%;
    background: url("../images/search.png") 99% 12px no-repeat rgba(0, 0, 0, 0);
    color: #8492af
}

.navbar-default {
    background-color: #fff;
    border-color: #fff
}

.job-manager-jobs tfoot td,
.navbar-toggle {
    border: none
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: rgba(0, 0, 0, 0)
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #0e1a35
}

.circle-logo {
    margin: 0 auto;
    max-width: 30px
}

.hidden-xs {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.user-dashboard h1 {
    color: #0e1a35;
    font-size: 30px;
    font-weight: 500;
    margin: 0;
    padding: 21px 0
}

.sales {
    background: #fff;
    border: 1px solid #d4d9e3;
    padding: 15px
}

.sales button {
    background: rgba(0, 0, 0, 0);
    border: 1px solid #dadee7;
    border-radius: 100px;
    font-size: 15px;
    letter-spacing: .5px;
    padding-right: 32px;
    color: #0e1a35
}

.sales button::before {
    content: "";
    right: 12px;
    top: 11px
}

.sales h2 {
    color: #8492af;
    float: left;
    font-size: 21px;
    font-weight: 600;
    margin: 0;
    padding: 9px 0 0
}

.btn.btn-secondary.btn-lg.dropdown-toggle>span {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px
}

.sales .dropdown-menu {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 30px;
    width: 100%;
    color: #0e1a35
}

.modal-body input,
.modal-body textarea {
    border: 1px solid #d4d9e3;
    font-weight: 300;
    color: #8492af;
    font-size: 14px;
    width: 100%
}

.btn.active,
.btn:active,
.sales .btn-group.open .dropdown-toggle {
    box-shadow: none
}

.sales .dropdown-menu>a {
    color: #0e1a35;
    display: inline-block;
    font-weight: 800;
    padding: 9px 0;
    text-align: center;
    width: 100%
}

#pmpro_account-links,
#pmpro_actionlink-logout,
#pmpro_actionlink-profile,
.modal-footer .add-project::before,
.shield-buttons,
input[type=file],
table.table td .add {
    display: none
}

.close,
.close:focus,
.close:hover {
    color: #fff;
    opacity: 1;
    text-shadow: none
}

.modal-body input {
    margin: 5px 0;
    padding: 14px 10px
}

.modal-body textarea {
    height: 200px;
    margin-top: 5px;
    padding: 9px 10px
}

.modal-footer .add-project {
    background: #5584ff;
    border: none;
    border-radius: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 30px;
    position: relative
}

.modal-footer {
    border: 0;
    padding: 10px 15px 26px;
    text-align: right
}

.cancel {
    background: #0e1a35;
    border: none;
    border-radius: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 30px;
    position: relative
}

.modal {
    top: 10%;
    max-width: 100%;
}

.modal-dialog {
    max-width: 800px;
    width: 100%;
}

.modal-header .close {
    margin-top: 2px
}

.search input:focus {
    border-bottom: 1px solid #bdc4d4;
    line-height: 22px;
    transition: .1s
}

.modal-header.login-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.row.cs-pagination {
    background-color: #f6f6f6;
    padding: 6px;
    margin: 0px 10px;
    border-radius: 5px;
    box-shadow: 0 0 2px #8080804d;
    align-items: center;
}

.row.cs-pagination div#pagination {
    text-align: right;
    float: right;
}

.hint-text {
    font-size: 13px;
}

div#pagination a {
    background-color: #afafaf;
    margin: 3px;
    padding: 0px 10px;
    color: #fff;
}

div#pagination .page-numbers.current {
    background-color: #2b5971;
    margin: 3px;
    padding: 0px 10px;
    color: #fff;
}

.pagination {
    margin: 0 0 5px;
}


@media only screen and (max-device-width: 767px) {
    .login-logo img {
        margin: 0 auto
    }

    .login-details .nav-tabs>li {
        text-align: center;
        width: 50%
    }

    .login-signup .login-inner h1 {
        font-size: 26px;
        margin-bottom: 0;
        margin-top: 10px
    }

    .login-inner .login-form input {
        font-size: 15px;
        max-width: 100%;
        padding: 15px 45px
    }

    .login-inner .form-details {
        padding: 25px
    }

    .login-inner .login-form label {
        margin-bottom: 20px;
        width: 100%
    }

    .login-inner .form-btn {
        margin: 0;
        max-width: 180px
    }

    .tab-content .tab-pane {
        padding: 20px 0
    }

    #navigation .navi a {
        color: rgb(75 85 99);
        font-size: .875rem;
        padding: 20px;
        text-align: center
    }

    #navigation .navi i {
        margin-right: 0
    }

    #navigation .navi .active a,
    #navigation .navi a:hover {
        background: #122143;
        border-left: none;
        display: block;
        padding-left: 20px
    }

    header .header-top img {
        max-width: 38px
    }

    .v-align header {
        padding: 12px 15px
    }

    header .header-top li {
        padding-left: 13px;
        padding-right: 6px
    }

    .navbar-default .navbar-toggle {
        border-color: transparent
    }

    .navbar-header .navbar-toggle {
        float: left;
        margin: 0;
        padding: 0;
        top: 12px
    }

    [type=reset],
    [type=submit],
    button,
    html [type=button] {
        outline: 0
    }

    .user-dashboard .sales h2 {
        color: #8492af;
        float: left;
        font-weight: 600;
        margin: 0;
        padding: 13px 0 0
    }

    .user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle>span {
        font-size: 11px
    }

    .user-dashboard .sales button {
        font-size: 11px;
        padding-right: 23px
    }

    .user-dashboard .sales h2 {
        font-size: 12px
    }

    .gutter {
        padding: 0
    }
}

@media only screen and (max-device-width: 992px) {
    header .header-top li {
        padding-left: 20px;
        padding-right: 0
    }

    header .logo img {
        max-width: 125px
    }
}

@media only screen and (min-device-width: 767px) and (max-device-width:998px) {
    .user-dashboard .header-top {
        padding-top: 5px
    }

    .user-dashboard .header-rightside {
        display: inline-block;
        float: left;
        width: 100%
    }

    .user-dashboard .header-rightside .header-top img {
        max-width: 41px
    }

    .user-dashboard .sales button {
        font-size: 10px
    }

    .user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle>span {
        font-size: 12px
    }

    .user-dashboard .sales h2 {
        font-size: 15px
    }
}

/* ------------------------------------------------------------------
   Desktop sidebar nav responsiveness (>=992px)
   Lay each item out as an icon + label flex row so a long label
   ("Update Profile", "View Company Profile") wraps *beside* the
   vertically-centred icon instead of collapsing the icon on top of the
   text — keeping every item a uniform single row.
------------------------------------------------------------------ */
@media only screen and (min-width: 992px) {
    #navigation .navi ul li a {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #navigation .navi ul li a i {
        margin-right: 0;
        flex: 0 0 auto;
    }

    #navigation .navi ul li a h4 {
        margin: 0;
        min-width: 0;
        text-align: left;
    }
}

/* Narrow-column shrink keyed to viewport width (max-width). The legacy
   max-device-width query below never fires when the browser window is
   smaller than the physical screen, so a mid-size desktop window kept the
   full-size label in a ~200-250px sidebar and wrapped it awkwardly. */
@media only screen and (min-width: 992px) and (max-width:1350px) {
    #navigation .logo img {
        max-width: 100px;
        width: 100%;
    }

    .user-dashboard-section #navigation h4 {
        font-size: 1rem;
    }
}

@media only screen and (min-device-width: 998px) and (max-device-width:1350px) {
    .site-navigation ul.menu li a {
        font-size: 13px;
        padding: 0.4rem !important;
    }

    .text-xl {
        font-size: 1.1rem;
        line-height: 1.5rem;
    }
}

.table-wrapper {
    width: 100%;
    margin: auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}

.table-title {
    padding-bottom: 10px;
    margin: 0 0 10px
}

.table-title h2 {
    margin: 6px 0 0;
    font-size: 22px
}

.table input,
button,
input[type=submit] {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143
}

.table-title .add-new,
.table-title .add-newedu {
    float: right;
    height: 30px;
    font-weight: 700;
    font-size: 12px;
    text-shadow: none;
    min-width: 100px;
    border-radius: 50px;
    line-height: 13px
}

.table-title .add-newedu i {
    margin-right: 4px
}

table.table tr td,
table.table tr th {
    border-color: #e9e9e9
}

table.table th i {
    font-size: 13px;
    margin: 0 5px;
    cursor: pointer
}

table.table th:last-child {
    width: 100px
}

table.table td a {
    cursor: pointer;
    margin: 0 5px;
    min-width: 24px
}

table.table td a.add {
    color: #27c46b
}

table.table td a.delete,
table.table td a.deleteBtn {
    color: #e34724
}

table.table td i {
    font-size: 19px
}

table.table td a.add i {
    font-size: 24px;
    margin-right: -1px;
    position: relative;
    top: 3px
}

table.table .form-control {
    height: auto;
    line-height: 20px;
    box-shadow: none;
    border-radius: 2px
}

table.table .form-control.error {
    border-color: #f50000
}

.bg-secondary-soft {
    background-color: rgba(208, 212, 217, .1)
}

.file-upload .square {
    height: 250px;
    width: 250px;
    margin: auto;
    border: 1px solid #e5dfe4;
    background-color: #fff;
    border-radius: 5px
}

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(208, 212, 217, .5)
}

.btn-success-soft {
    color: #28a745;
    background-color: rgba(40, 167, 69, .1)
}

.btn-danger-soft {
    color: #dc3545;
    background-color: rgba(220, 53, 69, .1)
}

.square.position-relative.display-2.mb-3 img {
    max-width: 200px
}

.custom-file-upload {
    border: 1px solid #cdcdcdd1;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    margin: 15px 0;
    background-color: #313b3d00;
    color: #000;
    display: block
}

input#but_upload {
    height: 40px;
    font-size: 15px
}

#password-strength-status {
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 5px
}

.medium-password {
    background-color: #b7d60a;
    border: 1px solid #bbb418
}

.weak-password {
    background-color: #ce1d14;
    border: 1px solid #aa4502
}

.strong-password {
    background-color: #12cc1a;
    border: 1px solid #0fa015
}

.plancancelled {
    color: red
}

.planchanged {
    color: #00f
}

.planactive {
    color: green
}

.disp-name {
    text-align: center;
}

table {
    width: 100%;
    max-width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse
}

.table>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

.table>tbody>tr>td,
.table>tbody>tr>th {
    border: none;
    padding: 12px;
    text-align: left
}

.table input {
    display: block;
    width: 100%;
    height: 34px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.table input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)
}

button,
input[type=submit] {
    color: #fff;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 30px
}

button {
    background-color: #5cb85c;
    border-color: #4cae4c
}

button:focus,
button:hover {
    background-color: #449d44;
    border-color: #398439
}

input[type=submit]:focus,
input[type=submit]:hover {
    background-color: #286090;
    border-color: #204d74
}

/* The generic `button` rule above adds margin-top:10px for dashboard form
   buttons, but the bare <button> selector also matches the global header
   hamburger (.site-navigation-toggle), nudging it down out of vertical
   alignment. Reset it so the header toggle keeps header.css's positioning.
   Scoped to .site-header so no dashboard form button is affected. */
.site-header .site-navigation-toggle {
    margin-top: 0;
}

.my-orders .active a,
button#removeDisable {
    background-color: #ffc000
}

.remove_employee {
    margin: 0;
    background-color: #d9534f;
    border-color: #d43f3a
}

.remove_employee:hover {
    background-color: #c9302c;
    border-color: #ac2925
}

.edit-profile,
.my-orders li a,
.mycred-table,
.profile-readfull .col-md-6,
div#customFilter,
input.form-control,
select {
    background-color: #fff
}

.user-dashboard {
    padding: 0 20px
}

.row.profile-readfull {
    padding: 10px 0
}

.profile-readfull .col-md-6 {
    flex: 0 0 48%;
    margin: 0 10px;
    padding: 20px;
    box-shadow: 0 0 10px #f2f2f2
}

.btn-info:hover,
a.btn.plans:hover {
    background-color: #009688
}

.cs-label {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
    color: #939393
}

.cs-data {
    font-size: 14px;
    color: #000
}

button#removeDisable {
    float: right;
    border-radius: 10px 10px 0 0;
    position: relative;
    color: #000
}

/*button#removeDisable2 {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}*/

.cs-label-1 {
    font-size: 25px;
    padding-bottom: 15px;
    margin-bottom: 30px
}

.table-wrapper h3::before {
    top: 50%;
}

.edit-profile {
    width: 100%;
    margin: 20px auto 30px;
    padding: 20px
}

.edit-profile label,
form#updateBillingAddress label {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 5px
}

input.form-control,
select,
select.form-control {
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    color: #565656;
    padding: 8px 12px;
    height: 42px;
    -webkit-box-shadow: none;
    box-shadow: none
}

.my-orders li a {
    font-size: 16px;
    color: #000
}

.table .form-control {
    height: 45px;
    line-height: 28px
}

th,
td {
    padding: 15px;
    width: auto;
    border: none;
}

th {
    padding: 20px 15px;
    background-color: var(--cl-light-gray) !important;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e9e9e9;
}

input[type=submit] {
    background-color: #1b3b4c;
    border-color: #1b3b4c;
    height: 40px
}

.btn-info {
    background-color: var(--cssecondary);
    color: #000 !important
}

a.btn.plans:hover {
    color: #fff
}

.about-avatar img {
    border-radius: 50%;
    box-shadow: 0 0 10px grey;
    padding: 3px
}

#job-manager-job-dashboard,
div#user_data_wrapper {
    background-color: #fff;
    padding: 20px
}

div#customFilter {
    padding: 10px;
    align-items: center;
    box-shadow: 0 0 5px #80808040;
    border-radius: 30px;
    margin-top: 20px
}

.job-manager-jobs tfoot a:hover,
button#clearFilters {
    background-color: #1b3b4c;
    color: #fff
}

button#clearFilters {
    height: 42px;
    border: none;
    margin-top: 0
}

.job-manager-jobs th,
td {
    border: 1px solid #bdbdbd;
    padding: 15px
}

.job-manager-jobs tfoot a {
    background-color: #f2b601;
    padding: 10px 30px;
    float: right;
    color: #000;
    font-size: 16px;
    text-transform: uppercase
}

#login .submit_button {
    width: 50%;
    color: #000;
    background-color: #fdb430;
    border-radius: 30px
}

@media only screen and (max-width: 700px) {
    .login-section {
        padding: 20px 10px
    }

    .login-section .text-black {
        padding: 15px;
        width: 100%
    }

    .es-50 {
        height: 0
    }

    .mob-pad-0 {
        padding: 0
    }

    form#login input {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
        text-align: center
    }

    .login-section h4 {
        font-size: 20px
    }
}

.download-btn {
    background-color: #ffb619;
    text-align: center;
    padding: 10px;
    margin: 20px
}

.download-btn a {
    color: #000;
    font-size: 16px
}

.parent {
    height: 100vh
}

.parent>.row {
    display: flex;
    align-items: center;
    height: 100%
}

.col img {
    width: 100%;
    cursor: pointer;
    transition: transform 1s;
    object-fit: cover
}

.col label,
.img-wrap {
    overflow: hidden;
    position: relative
}

.card-product-grid:hover .btn-overlay,
.imgbgchk:checked+label>.tick_container {
    opacity: 1
}

.imgbgchk {
    opacity: 0
}

.imgbgchk:checked+label>img {
    opacity: .3
}

.tick_container {
    transition: .5s;
    opacity: 0;
    position: absolute;
    /*top: 50%;*/
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center
}

.tick {
    background-color: #ffc000;
    color: #fff;
    font-size: 16px;
    padding: 8px 12px;
    height: 40px;
    width: 40px;
    border-radius: 100%
}

.update-btn {
    background-color: #1b3b4c;
    border: none;
    color: #fff;
    float: right
}

.notice-warning {
    border-color: #feaf20
}

.notice-warning>strong {
    color: #feaf20
}

.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #ffc000;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2)
}

.notice-sm {
    padding: 10px;
    font-size: 80%
}

.notice-lg {
    padding: 35px;
    font-size: large
}

.notice.notice-warning {
    margin-top: 30px
}

.file-preview .fileinput-remove {
    top: 1px;
    right: 1px;
    line-height: 10px;
    font-size: 16px;
    background-color: #ff5722;
    padding: 15px;
    border: none;
    border-radius: 30px
}

.file-preview .fileinput-remove::before {
    content: '\f00d';
    font-family: 'evo_FontAwesomeS', 'evo_FontAwesome', 'evo_FontAwesomeB'
}

.icon-control {
    margin-top: 5px;
    float: right;
    font-size: 80%
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

.btn-light {
    background-color: #fff;
    border-color: #e4e4e4
}

.list-menu {
    list-style: none;
    margin: 0;
    padding-left: 0
}

.list-menu a {
    color: #343a40
}

.card-product-grid .info-wrap {
    overflow: hidden;
    padding: 18px 20px
}

[class*=card-product] a.title {
    color: #212529;
    display: block
}

.card-product-grid .btn-overlay {
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    left: 0;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    position: absolute;
    background: rgba(0, 0, 0, .5)
}

.form-control {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: none;
    margin-bottom: 10px
}

.form-control:focus {
    border: 1px solid #34495e
}

.select2.select2-container .select2-selection {
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 34px;
    margin-bottom: 15px;
    outline: 0;
    transition: .15s ease-in-out
}

.select2.select2-container .select2-selection .select2-selection__rendered {
    color: #333;
    line-height: 32px;
    padding-right: 33px
}

.select2.select2-container .select2-selection .select2-selection__arrow {
    background: #f8f8f8;
    border-left: 1px solid #ccc;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    height: 32px;
    width: 33px
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
    background: #f8f8f8
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
    border: 1px solid #34495e
}

.select2.select2-container .select2-selection--multiple .select2-selection__choice {
    -webkit-border-radius: 3px
}

.select2-container .select2-dropdown {
    background: 0 0;
    border: none;
    margin-top: -5px
}

.select2-container .select2-dropdown .select2-results,
.select2-container .select2-dropdown .select2-search {
    padding: 0
}

.select2-container .select2-dropdown .select2-search input {
    outline: 0;
    border: 1px solid #34495e;
    border-bottom: none;
    padding: 4px 6px
}

.select2-container .select2-dropdown .select2-results ul {
    background: #fff;
    border: 1px solid #34495e
}

.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
    background-color: #3498db
}

input#seachmembers {
    width: 94%
}

span#searchUsers {
    position: relative;
    right: 40px
}

.vibebp_members_directory_filter span {
    background-color: #ff000000;
    padding: 0
}

.vibebp_members_directory_filter_values {
    position: relative;
    top: 5px;
    background-color: #f1f5f7
}

.vibebp_members_directory_filter {
    background-color: #ff0a0a00;
    margin-bottom: 10px;
    box-shadow: none
}

.select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0;
    height: auto;
    margin-bottom: 0
}

.select2.select2-container .select2-selection--multiple {
    height: auto;
    min-height: auto;
    border: none;
    margin-bottom: 15px;
    border-bottom: 1px solid #2196f3;
    border-radius: 10px;
    margin-top: 5px
}

.select2.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 10px;
    line-height: 29px;
    background-color: #fff;
    border-radius: 10px
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: #5897fb;
    position: relative;
    top: 20px
}

.select2.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #bce8ff;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 4px 4px 0 0;
    padding: 0 15px;
    height: 30px;
    line-height: 26px;
    font-size: 14px;
    position: relative
}

.select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    position: absolute;
    top: -8px;
    right: -5px;
    height: 16px;
    width: 16px;
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    background-color: red;
    border-radius: 50px;
    left: auto
}

.filter-sidebar {
    background-color: #f1f5f7;
    padding: 20px;
    border-radius: 30px;
    margin-right: 15px;
    max-width: 23%;
    box-shadow: 0 0 5px #c5c5c5
}

input.filterBtn:hover {
    background-color: #f5bb11
}

input.filterBtn {
    width: 99%;
    background-color: #1b3b4c;
    height: 45px;
    border-radius: 30px;
    margin-top: 15px;
    cursor: pointer
}

a.btn.filterBtn {
    float: right;
    position: relative;
    border-radius: 30px;
    font-weight: 600
}

form#updatecollegeDatas {
    padding: 30px 0px;
}

.form-group label {
    font-weight: 600;
    /*margin-bottom: 10px;*/
}

button#removeDisable2 {
    margin-left: 30px;
}

input.file-caption-name.form-control.kv-fileinput-caption {
    background: #fff;
    margin-bottom: 0px;
}

.file-caption.icon-visible .btn {
    height: 42px;
    margin: 0px;
    border-right: 2px solid #fff;
}

.file-caption.icon-visible .btn:hover {
    border-right: 0px;
}

.btn-primary.btn-file {
    background: var(--global-color-yellow);
    border: 1px solid var(--global-color-yellow);
    color: #000;
}

.btn-primary.btn-file:hover {
    background: var(--global-color-yellow);
    border: 1px solid var(--global-color-yellow);
    color: #000;
}

a.btn {
    background: var(--global-color-yellow);
    color: #000;
    font-weight: 500;
}

a.btn {
    background: #fcc009;
}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
    border: 1px solid var(--global-color-yellow) !important;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav>li {
    position: relative;
    display: block
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px
}

.nav>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background-color: #eee
}

.nav>li.disabled>a {
    color: #777
}

.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
    color: #777;
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent
}

.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
    background-color: #eee;
    border-color: #428bca
}

.nav .nav-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5
}

.nav>li>a>img {
    max-width: none
}

.nav-tabs {
    border-bottom: 1px solid #ddd
}

.nav-tabs>li {
    float: left;
    margin-bottom: -1px
}

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0
}

.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent
}

.nav-tabs.nav-justified {
    width: 100%;
    border-bottom: 0
}

.nav-tabs.nav-justified>li {
    float: none
}

.nav-tabs.nav-justified>li>a {
    margin-bottom: 5px;
    text-align: center
}

.nav-tabs.nav-justified>.dropdown .dropdown-menu {
    top: auto;
    left: auto
}

i.fa.fa-money-bill-alt:after {
    content: "\f0d6";
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified>li {
        display: table-cell;
        width: 1%
    }

    .nav-tabs.nav-justified>li>a {
        margin-bottom: 0
    }
}

.nav-tabs.nav-justified>li>a {
    margin-right: 0;
    border-radius: 30px
}

.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus {
    border: 1px solid #ddd
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified>li>a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0
    }

    .nav-tabs.nav-justified>.active>a,
    .nav-tabs.nav-justified>.active>a:hover,
    .nav-tabs.nav-justified>.active>a:focus {
        border-bottom-color: #fff
    }
}

.nav-pills>li {
    float: left
}

.nav-pills>li>a {
    border-radius: 30px
}

.nav-pills>li+li {
    margin-left: 2px
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
    color: #fff;
    background-color: #428bca
}

.nav-stacked>li {
    float: none
}

.nav-stacked>li+li {
    margin-top: 2px;
    margin-left: 0
}

.nav-justified {
    width: 100%
}

.nav-justified>li {
    float: none
}

.nav-justified>li>a {
    margin-bottom: 5px;
    text-align: center
}

.nav-justified>.dropdown .dropdown-menu {
    top: auto;
    left: auto
}

@media (min-width: 768px) {
    .nav-justified>li {
        display: table-cell;
        width: 1%
    }

    .nav-justified>li>a {
        margin-bottom: 0
    }
}

.nav-tabs-justified {
    border-bottom: 0
}

.nav-tabs-justified>li>a {
    margin-right: 0;
    border-radius: 30px
}

.nav-tabs-justified>.active>a,
.nav-tabs-justified>.active>a:hover,
.nav-tabs-justified>.active>a:focus {
    border: 1px solid #ddd
}

@media (min-width: 768px) {
    .nav-tabs-justified>li>a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0
    }

    .nav-tabs-justified>.active>a,
    .nav-tabs-justified>.active>a:hover,
    .nav-tabs-justified>.active>a:focus {
        border-bottom-color: #fff
    }
}

.tab-content>.tab-pane {
    display: none;
    visibility: hidden
}

.tab-content>.active {
    display: block;
    visibility: visible
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.fade.in {
    opacity: 1;
}

.well {
    min-height: 20px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

input.btn-change-pass:hover {
    color: #fff;
}

.fa-money:before {
    content: "\f0d6";
}

.active-tab {
    background: var(--e-global-color-black) !important;
    color: var(--e-global-color-accent) !important;
    border: 1px solid var(--e-global-color-black) !important;
}

@media only screen and (max-width: 767px) {
    .filter-col {
        max-width: 95%;
        margin: 0 auto
    }
}



/* Jai css */
.user-dashboard .card.shadow-sm.border-0.tri-avatar-card {
    max-width: 100%;
    margin-top: 20px;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    padding: 20px;
}

.user-dashboard p.text-muted.small.mb-4 {
    font-size: 16px;
    font-weight: 400;
}

.user-dashboard .small.text-muted {
    font-size: 16px;
    font-weight: 400;
}

.user-dashboard label.form-label.d-block {
    font-size: 16px;
}

.user-dashboard button#tri-avatar-trigger,
.user-dashboard button.btn.btn-color-1 {
    font-weight: 600;
}

.user-dashboard .table-title .add-new,
.table-title .add-newedu {
    height: 35px;
    font-size: 16px;
}

.user-dashboard .col-sm-8.pr-0 h5.cs-label-1,
.user-dashboard .col-sm-8.mr-0 h5.cs-label-1 {
    padding-bottom: 30px;
}

.user-dashboard ul.nav.nav-tabs.my-orders li a {
    text-decoration: none;
}

.user-dashboard ul.nav.nav-tabs.my-orders li.active a {
    background-color: #fcc009;
    color: #000;
    font-weight: 600;
    border-radius: 30px;
}

.user-dashboard ul.nav.nav-tabs.my-orders li a {
    background-color: #1b3b4c;
    color: #fff;
    border-radius: 30px;
}

.user-dashboard table.table td a {
    text-decoration: none;
}

.user-dashboard ul.mycred-order-notes {
    margin-left: 0;
}

.user-dashboard ul.mycred-order-notes li {
    list-style-type: none;
}

.user-dashboard a.woocommerce-button.button.view,
.update-img a span {
    font-weight: 600;
}

.user-dashboard .parent-div .col-md-4.text-center.mb-4 a.btn:hover {
    background-color: #000;
    color: #fff;
}

.user-dashboard .btn-group {
    border-radius: 30px;
    margin-right: 10px;
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}

/* Clear gap between the top action buttons (Download Resume / Upload Resume)
   on the career/ChooseCv tab. .btn-pref is a flex row, so use gap and drop the
   button groups' own right margin so the spacing is even. */
.user-dashboard .btn-pref {
    gap: 12px;
}

.user-dashboard .btn-pref>.btn-group {
    margin-right: 0;
}

.user-dashboard .btn-pref .btn{
    padding: 12px 20px;
}

.table-title .openUploadModal{
    display: flex;
    width: 236px;
    gap: 5px;
}

#updateDocuemntModal .modal-footer .btn-default,
#addDocuemntModal .modal-footer .btn-default{
    border-radius: 25px;
}

#updateDocuemntModal .modal-footer .btn-success,
#addDocuemntModal .modal-footer .btn-success{
    height: auto;
    padding: 12px 20px;
}

.user-dashboard .btn-group a.btn.active {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff;
}

.user-dashboard .parent-div .cs-label {
    font-size: 20px;
    color: #000;
}

.navi ul li a {
    border-radius: 0.75rem !important;
    margin-top: 20px;
}

.btn {
    border-radius: 30px;
}

.user-dashboard tbody#userData {
    opacity: 5 !important;
}

a.btn,
.btn.btn-primary.btn-file {
    border-radius: 30px;
}

.page-user-dashboard div#navigation ul li:last-child {
    display: none;
}




/* Buttons hover css*/
.btn,
#navigation .navi li a,
ul.nav.nav-tabs.my-orders li a,
.user-dashboard a.woocommerce-button.button.view {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before,
.btn::after,
#navigation .navi li a::before,
#navigation .navi li a::after,
ul.nav.nav-tabs.my-orders li a::before,
ul.nav.nav-tabs.my-orders li a::after,
.user-dashboard a.woocommerce-button.button.view::before,
.user-dashboard a.woocommerce-button.button.view::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #000;
    transition: transform 0.4s ease;
    z-index: -1;
}

.btn::before,
#navigation .navi li a::before,
ul.nav.nav-tabs.my-orders li a::before,
.user-dashboard a.woocommerce-button.button.view::before {
    left: 0;
    transform: translateX(-100%);
}

.btn::after,
#navigation .navi li a::after,
ul.nav.nav-tabs.my-orders li a::after,
.user-dashboard a.woocommerce-button.button.view::after {
    right: -1px;
    transform: translateX(100%);
}

.btn:hover::before,
#navigation .navi li a:hover::before,
ul.nav.nav-tabs.my-orders li a:hover::before,
.user-dashboard a.woocommerce-button.button.view:hover::before {
    transform: translateX(0);
}

.btn:hover::after,
#navigation .navi li a:hover::after,
ul.nav.nav-tabs.my-orders li a:hover::after,
.user-dashboard a.woocommerce-button.button.view:hover::after {
    transform: translateX(0);
    right: 0;
}

.btn:hover,
#navigation .navi li a:hover,
ul.nav.nav-tabs.my-orders li a:hover {
    color: #fcc000 !important;
}

button.btn.btn-color-1:hover,
button#removeDisable2:hover,
a.btn.plans.btn-color-1:hover {
    color: #fcc000 !important;
}

.navi i:hover::before,
.navi .active i:hover::before {
    color: #fcc000 !important;
}

a.add_employee.btn-color-2 {
    background: transparent !important;
    color: #1b3b4c !important;
    border: none;
    font-weight: 600;
}

a.add_employee.btn-color-2:hover {
    background: none !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

.user-dashboard .table-wrapper {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding: 20px;
    margin-top: 20px;
    border-radius: 30px;
}

/* ============================================================
   Responsive user dashboard (<= 991px)
   The sidebar (#navigation) and content use a CSS-table layout
   (display:table-cell) that never stacks on small screens, and the
   legacy Bootstrap-3 hidden-xs/hidden-sm classes are inert under
   Bootstrap 5 (so the labels never collapse). Break the table into
   a single column and turn the sidebar into a compact wrapping
   nav strip above the content.
   Markup: themes/trikona-main/dashboard/user_dashboard.php
           themes/trikona-main/dashboard/template-parts/profile_left_menu.php
   ============================================================ */
@media (max-width: 991px) {

    /* Break the CSS table so the cells stack into one column. The section
       itself becomes a centered vertical flex column; the row + cells fall
       back to block so they still fill the full width. */
    .page-user-dashboard .user-dashboard-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .page-user-dashboard .user-dashboard-section .display-table-row {
        display: block;
        width: 100%;
    }

    .page-user-dashboard .user-dashboard-section .display-table-cell {
        display: block;
        width: 100%;
        /* base.css pins these cells via .col-2-5/.col-9-5 { max-width:25%/75% }
           with no mobile override, so width:100% alone is clamped and the
           sidebar stays stuck at 25% (name wraps a word per line, content
           never fills the row). Lift the cap so the stacked cells go full
           width. Higher specificity than base.css, so no !important needed. */
        max-width: 100%;
        float: none;
    }

    /* Tame the wrapper's inline left padding on small screens */
    .page-user-dashboard .user-dashboard-section {
        padding-left: 15px !important;
        padding-right: 15px;
    }

    /* Sidebar becomes a compact card above the content */
    .page-user-dashboard #navigation {
        margin-bottom: 20px;
    }

    .page-user-dashboard #navigation .logostyle img {
        width: 64px;
        height: 64px;
    }

    /* Nav items: an even grid of icon + label pills so every menu item
       stays visible AND the rows line up into tidy, equal-width columns
       (3 across on tablet, 2 on phones — see the <=575px block below).
       A flex-wrap layout left ragged rows because pills were auto-width. */
    .page-user-dashboard #navigation .navi ul,
    .page-company-dashboard #navigation .navi ul {
        display: grid;
        /* minmax(0,1fr) — NOT 1fr — so a long label ("View Company Profile"
           on the company dashboard) can't force one track past the viewport
           (1fr = minmax(auto,1fr), whose min-content = the whole nowrap word). */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        padding-bottom: 6px;
    }

    .page-user-dashboard #navigation .navi ul li,
    .page-company-dashboard #navigation .navi ul li {
        width: auto;
    }

    .page-user-dashboard #navigation .navi ul li a,
    .page-company-dashboard #navigation .navi ul li a {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 100%;
        min-width: 0;
        /* wrap long labels instead of letting nowrap text clip out of the
           pill (the company menu has multi-word items like "View Company
           Profile" / "Manage Jobs" that don't fit one line at 2-up on 390px). */
        white-space: normal;
        margin-top: 0 !important;
        padding: 0.6rem 0.9rem;
        text-align: left;
        border: 1px solid rgb(243 244 246);
    }

    .page-user-dashboard #navigation .navi ul li a h4,
    .page-company-dashboard #navigation .navi ul li a h4 {
        display: inline-block;
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .page-user-dashboard #navigation .navi ul li a i,
    .page-company-dashboard #navigation .navi ul li a i {
        margin-right: 0;
        font-size: 16px;
    }

    /* Keep the active pill yellow on real phones too: the legacy
       max-device-width:767px block repaints .active a navy (#122143) with
       black text — unreadable. This higher-specificity rule wins in both
       the resized-browser and real-device cases. */
    .page-user-dashboard #navigation .navi ul li.active a,
    .page-user-dashboard #navigation .navi ul li a:hover,
    .page-company-dashboard #navigation .navi ul li.active a,
    .page-company-dashboard #navigation .navi ul li a:hover {
        background: #ffc000;
        color: #000;
    }

    .page-user-dashboard #navigation .navi ul li.active a i,
    .page-user-dashboard #navigation .navi ul li a:hover i,
    .page-company-dashboard #navigation .navi ul li.active a i,
    .page-company-dashboard #navigation .navi ul li a:hover i {
        color: #000;
    }

    /* Content fills the available width */
    .page-user-dashboard .user-dashboard {
        padding: 0;
    }
}

/* ============================================================
   Responsive user dashboard — content panels (<= 991px)
   The panels rendered inside .user-dashboard (Update Profile, Experience,
   Education, Memberships, My Credits, Resume) use data tables and a few
   custom flex rows that overflow a phone viewport. Bootstrap-5 col-* form
   grids already stack below their breakpoints, so the remaining gaps are:
   wide <table> elements, the resume-style picker's equal-width `.col`
   layout, and hard-coded image heights.
   Markup: themes/trikona-main/dashboard/template-parts/*.php
   ============================================================ */
@media (max-width: 991px) {

    /* Data tables (skills, experience, education, memberships, credits)
       scroll horizontally instead of forcing the page wider than the
       screen. Treating the table as a block scroll container avoids any
       markup change across the template parts. Scoped to the shared
       `.user-dashboard` content wrapper (not the `page-user-dashboard`
       body slug) so it also covers the User Dashboard template rendered
       on other slugs, e.g. `/membership-details/` where the memberships
       table would otherwise clip its right-hand columns off-screen. */
    .user-dashboard table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Keep all dashboard imagery (resume previews, CV cards) inside the
       viewport and drop hard-coded pixel heights so they scale down. */
    .page-user-dashboard .user-dashboard img {
        max-width: 100%;
        height: auto;
    }

    /* Resume-style picker (download_resume.php) uses Bootstrap-5 `.col`,
       which stays equal-width (4 across) on every screen size. Wrap to
       two per row on tablets (one per row on phones, below). */
    .page-user-dashboard #chooseResume .row {
        flex-wrap: wrap;
    }

    .page-user-dashboard #chooseResume .row>.col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Legacy `.btn-group-justified` (Bootstrap 3) is inert under
       Bootstrap 5; let action button groups wrap rather than overflow. */
    .page-user-dashboard .user-dashboard .btn-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {

    /* Two nav columns on phones (three is too cramped for labels). */
    .page-user-dashboard #navigation .navi ul,
    .page-company-dashboard #navigation .navi ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* One resume preview per row on phones. */
    .page-user-dashboard #chooseResume .row>.col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

#updateProjectModal .upload__btn {
    background: var(--cl-yellow);
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

#updateProjectModal .upload__btn p {
    margin: 0;
}

#updateProjectModal .upload__btn:hover {
    color: #fcc000;
    background: var(--cl-black);
}

/* =====================================================================
   TRIKONA MOBILE DASHBOARD ENHANCEMENTS (<= 767px, mobile view only)
   Scoped to /user-dashboard/ (this stylesheet only loads there).
   Desktop layout is intentionally left untouched.
   Covers: collapsible menu dropdown, avatar+name row, single-row
   scrollable stat cards, and horizontally scrollable edu/exp tables.
   ===================================================================== */

/* The nav toggle button is desktop-hidden by default; shown on mobile. */
.trikona-nav-toggle {
    display: none;
}


.cwx-membership-pagination {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cwx-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #DDE4EF;
    border-radius: 6px;
    background: #fff;
    color: var(--e-global-color-black);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.cwx-page-btn:hover {
    background: var(--cl-yellow);
    border-color: var(--cl-yellow);
}
.cwx-page-active {
    background: var(--cl-yellow);
    border-color: var(--cl-yellow);
    color: var(--cl-black);
    font-weight: 700;
}
.cwx-page-next {
    font-weight: 600;
}


@media only screen and (max-width: 767px) {

    /* --- Foundation: reflow the table-based two-column layout to a stack --- */
    .user-dashboard-section .display-table,
    .user-dashboard-section .display-table-row {
        display: block;
        width: 100%;
    }

    .user-dashboard-section .display-table-cell {
        display: block;
        width: 100%;
        height: auto;
    }

    .user-dashboard-section .col-2-5,
    .user-dashboard-section .col-9-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .user-dashboard-section #navigation {
        margin-bottom: 1rem;
        padding: 1rem;
    }

    /* --- Task 3: profile photo + name on a single row --- */
    #navigation .trikona-profile-head {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #navigation .trikona-profile-head .logo.logostyle {
        order: -1;
        /* avatar first, name second */
        margin: 0;
        flex: 0 0 auto;
    }

    #navigation .trikona-profile-head .logostyle img {
        width: 56px;
        height: 56px;
        margin: 0;
        border-width: 3px;
    }

    #navigation .trikona-profile-head .text-center {
        text-align: left;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    #navigation .trikona-profile-head h4.disp-name,
    .user-dashboard-section .trikona-profile-head .disp-name {
        font-size: 1rem;
        line-height: 1.4;
        margin: 0;
        word-break: break-word;
    }

    #navigation .trikona-profile-head .change-profile-img {
        top: -4px;
        right: -4px;
        padding: 2px 6px;
        font-size: 11px;
    }

    /* --- Task 1: collapse the whole menu into a single dropdown --- */
    .trikona-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.75rem;
        padding: 0.75rem 1rem;
        background: var(--csprimary);
        color: #fff;
        font-weight: 700;
        border-radius: 0.75rem;
        cursor: pointer;
        user-select: none;
    }

    .trikona-nav-toggle .fa-bars {
        margin-right: 8px;
        color: #ffc000;
    }

    .trikona-nav-toggle .trikona-nav-toggle-caret {
        transition: transform 0.3s ease;
    }

    /* Menu list is collapsed by default on mobile, expands when toggled */
    #navigation .navi {
        display: none;
        margin-top: 0.5rem;
    }

    #navigation .trikona-nav-toggle-checkbox:checked~.navi {
        display: block;
    }

    #navigation .trikona-nav-toggle-checkbox:checked~.trikona-nav-toggle .trikona-nav-toggle-caret {
        transform: rotate(180deg);
    }

    /* Tighten menu item spacing inside the dropdown */
    #navigation .navi ul li a {
        margin-top: 8px;
        text-align: left;
        padding: 12px 16px;
    }

    #navigation .navi i {
        margin-right: 12px;
    }

    /* --- Task 2: dashboard stat cards in a single horizontally-scrollable row --- */
    .trikona-stat-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .trikona-stat-cards>[class*="col-"] {
        flex: 0 0 auto;
        width: 42%;
        min-width: 150px;
        max-width: 220px;
        scroll-snap-align: start;
    }

    .trikona-stat-cards .circle-tile {
        height: 100%;
        padding: 0.9rem 0.55rem !important;
    }

    /* Keep card labels/values wrapped inside the narrow card (no side overflow). */
    .trikona-stat-cards .circle-tile-content {
        height: auto !important;
    }

    .trikona-stat-cards .circle-tile-description,
    .trikona-stat-cards .circle-tile-number {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .trikona-stat-cards::-webkit-scrollbar {
        height: 6px;
    }

    .trikona-stat-cards::-webkit-scrollbar-thumb {
        background: rgba(27, 59, 76, 0.35);
        border-radius: 3px;
    }

    /* --- Task 5: keep edu/experience tables usable (horizontal scroll) --- */
    .user-dashboard .table-wrapper {
        padding: 14px;
    }

    .trikona-table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .trikona-table-scroll>table {
        min-width: 620px;
        margin-bottom: 0;
    }
}

/* Collapse the empty banner gap on small screens.
   The site header is a position:fixed pill (header.css: .site-header { top:30px })
   and `.banner-section { padding-top:120px }` reserves clearance for it. On the
   dashboard the page title (h1) is hidden (font-size:0), so that 120px is dead
   space between the fixed header and the profile card. Trim it to just clear the
   compact mobile pill; keep extra room when the WP admin bar is present. Scoped to
   the header's own <=991px pill regime so desktop clearance is untouched. */
@media only screen and (max-width: 991px) {
    .page-user-dashboard .banner-section {
        padding-top: 90px !important;
        padding-bottom: 0 !important;
    }

    .admin-bar .page-user-dashboard .banner-section {
        padding-top: 104px !important;
    }

    .page-user-dashboard .user-dashboard-section {
        margin-top: 0 !important;
    }
}

/* ============================================================
   Mobile dashboard tweaks (student role)
   Markup: themes/trikona-main/dashboard/template-parts/my_account.php
           themes/trikona-main/dashboard/template-parts/top_head.php
   ============================================================ */
@media (max-width: 767px) {
    /* My Account (?myaccout=true): keep Orders / Billing Address /
       Update Password on ONE row instead of wrapping to two lines. The float
       layout is swapped for a non-wrapping flex row (scrolls if it ever
       overflows a very narrow screen). */
    .user-dashboard ul.nav.nav-tabs.my-orders {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 0;
    }
    .user-dashboard ul.nav.nav-tabs.my-orders > li {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }
    .user-dashboard ul.nav.nav-tabs.my-orders li a {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Shrink the stat-card icon badges so they don't dominate the narrow
       horizontally-scrollable cards. Flex-center so the glyph sits dead
       centre regardless of its own line-height. */
    .trikona-stat-cards .circle-tile-heading {
        width: 52px;
        height: 52px;
        border-width: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* The stat icons are FontAwesome 5 (`.fas ... fa-3x`), so the legacy
       `.fa` selector never matched them and `.fa-3x` (40px glyph, 72px
       line-height) overflowed the 52px badge — the "bad" oversized look.
       Target the <i> itself so it applies to .fa/.fas alike, and reset the
       inflated size + line-height. */
    .trikona-stat-cards .circle-tile-heading i {
        font-size: 1.4rem;
        line-height: 1;
    }
}

/* ── Add/Edit Experience & Education modal — mobile fixes ─────────────────────
   On mobile two floating buttons (help FAB + Report Issue FAB) sit ABOVE the modal
   (z-index ~99998/99990 vs the modal's 1055) and overlap it: the help FAB covers the
   Organization dropdown's arrow so it won't open on tap, and the Report Issue FAB
   covers the Save button when you scroll down. The modal is also `top:84px; height:100vh`
   so its bottom (the footer) is pushed below the viewport. */
@media (max-width: 767px) {
    /* Keep the floating action buttons out of the way while a modal is open */
    body.modal-open #cl-faq-fab,
    body.modal-open .cl-faq-fab,
    body.modal-open .ter-fab {
        display: none !important;
    }

    /* Fit the modal within the visible area (below the fixed header) so the footer is reachable */
    #experienceModal,
    #educationModal {
        bottom: 0;
        height: auto;
    }

    /* Pin Cancel/Save to the bottom of the modal so they stay visible while scrolling the form */
    #experienceModal .modal-footer,
    #educationModal .modal-footer {
        position: sticky;
        bottom: 0;
        margin-top: 0;
        background: #fff;
        border-top: 1px solid #eef2f7;
        z-index: 3;
    }

    /* Select2 dropdown chevron: the default tiny CSS-triangle renders broken/invisible on some
       mobile browsers. Replace it with a pure-CSS border chevron (no SVG/data-URI) so it shows
       reliably everywhere. */
    #experienceModal .select2-selection__arrow,
    #educationModal .select2-selection__arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* Sit flush against the field's right edge (default `right:15px` left a white gap) */
        right: 0 !important;
        border-radius: 0 6px 6px 0 !important;
    }
    #experienceModal .select2-selection__arrow b,
    #educationModal .select2-selection__arrow b {
        position: static !important;
        width: 9px !important;
        height: 9px !important;
        margin: 0 0 3px 0 !important;
        border: 0 !important;
        border-right: 2px solid #12303f !important;
        border-bottom: 2px solid #12303f !important;
        transform: rotate(45deg);
        box-sizing: border-box;
    }
}

/* ============================================================
   Responsive Company Dashboard (<= 767px)
   The company dashboard (body.page-company-dashboard) has its own
   markup — a .container-fluid.display-table with Bootstrap col-md-3 /
   col-md-9 CSS-table cells — so the .user-dashboard-section reflow
   rules further up never reach it. Break that table layout into a
   single stacked column; the shared .trikona-profile-head /
   .trikona-nav-toggle / .trikona-stat-cards components (styled in the
   <=767px blocks above) are reused via matching markup.
   Markup: themes/trikona-main/templates/company_dashboard.php
           themes/trikona-main/template-parts/company-dashboard/company_top_header.php
   Breakpoint matches the student dashboard (<=991px) so the shared
   .navi grid menu always has a full-width sidebar to lay out in.
   ============================================================ */
@media only screen and (max-width: 991px) {

    /* Break the CSS table so sidebar + content stack into one column. */
    .page-company-dashboard .container-fluid.display-table,
    .page-company-dashboard .display-table-row {
        display: block;
        width: 100%;
    }

    /* The structural row is a Bootstrap .row with negative gutters
       (margin:-12px). Once it's a full-width block, that negative left
       margin shifts the whole stack left (3px gap left vs 27px right — the
       "not centred" look). Zero the row's horizontal margins so the column
       sits symmetrically inside the container's 15px padding. */
    .page-company-dashboard .display-table-row {
        margin-left: 0;
        margin-right: 0;
    }

    .page-company-dashboard .display-table-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        float: none;
    }

    /* Sidebar becomes a compact card above the content. */
    .page-company-dashboard #navigation {
        margin-bottom: 1rem;
    }

    /* Company dashboard names the profile heading h3 (user dashboard
       uses h4); mirror the h4 sizing so it doesn't clip/overflow. */
    .page-company-dashboard #navigation .trikona-profile-head h3.disp-name {
        font-size: 1rem;
        line-height: 1.4;
        margin: 0;
        word-break: break-word;
    }

    /* Content column fills the available width. */
    .page-company-dashboard .user-dashboard {
        padding: 0;
    }

    /* Company Profile sub-tabs (.btn-pref): the Bootstrap-3
       btn-group-justified is inert under BS5, so the tab buttons
       overflow/clip (reading as black boxes). Wrap them into a
       readable 2-up grid and keep their labels visible (the legacy
       hidden-xs label wrappers would otherwise hide the text). */
    .page-company-dashboard .user-dashboard .btn-pref {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
        margin-right: 0;
    }

    .page-company-dashboard .user-dashboard .btn-pref > .btn-group {
        flex: 1 1 calc(50% - 8px);
        margin: 0 !important;
        border-radius: 0.75rem !important;
    }

    .page-company-dashboard .user-dashboard .btn-pref > .btn-group .btn {
        width: 100%;
        white-space: normal;
        padding: 10px 12px;
    }

    .page-company-dashboard .user-dashboard .btn-pref .btn .hidden-xs {
        display: block !important;
    }
}