/* =========================================================
   THE DESIGNERS COLLABORATIVE
   ULTIMATE MEMBER - LOGIN / REGISTER / PASSWORD RESET / ACCOUNT
   ========================================================= */

:root {
    --tdc-blue: #395690;
    --tdc-green: #009f76;
    --tdc-light-green: #78c1c1;
    --tdc-black: #000;
    --tdc-white: #fff;
    --tdc-grey: #666;
    --tdc-light-grey: #e5e5e5;
    --tdc-border:#e5e5e5;
}


/* =========================================================
   MAIN ULTIMATE MEMBER WRAPPER
   ========================================================= */

.um {
    box-sizing: border-box;
    font-family: Lato;
}

.um *,
.um *::before,
.um *::after {
    box-sizing: border-box;
}


/* =========================================================
   FORM CONTAINER
   ========================================================= */

.um .um-form {
    width: 100%;
}
.um-login,.um-register,.um-password,.um.um-login.um-logout {
    padding: 30px;
    background: #efefef;
    max-width: 600px !important;
}

.um.um-login.um-logout .um-form {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
}
.um.um-login.um-logout .um-form .um-misc-with-img {
    margin: 0;
    padding: 0;
}
.um.um-login.um-logout .um-misc-ul li::before {
    display: none !important;
}
.um-misc-img a,.um.um-login.um-logout .um-misc-ul li { border: none !important; }
.um.um-login.um-logout .um-misc-ul li {
    width: 250px !important;
    background: #395690;
    padding: 10px;
    border: 6px solid #fff !important;
}
.um.um-login.um-logout .um-misc-with-img div strong {
    color: #333 !important;
}
.um.um-login.um-logout .um-misc-ul li a { color: #fff !important;width: 100%;
    display: inline-block; }
.um.um-login.um-logout .um-misc-with-img {
    border-right: 1px solid #e5e4e4;
    padding-right: 30px !important;
}

/* =========================================================
   FIELD LABEL
   ========================================================= */

.um .um-field-label {
    margin-bottom: 8px !important;
}

.um .um-field-label label {
    color: var(--tdc-black) !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
}


/* =========================================================
   INPUTS
   ========================================================= */

.um .um-form input[type="text"].um-form-field.um-error,
.um .um-form input[type="email"].um-form-field.um-error,
.um .um-form input[type="password"].um-form-field.um-error,
.um .um-form input[type="tel"].um-form-field.um-error,
.um .um-form input[type="number"].um-form-field.um-error,
.um .um-form input[type="url"].um-form-field.um-error,
.um .um-form select.um-form-field.um-error,
.um .um-form textarea.um-form-field.um-error {
    border: 2px solid red !important;
}


.um .um-form input[type="text"].um-form-field, 
.um .um-form input[type="email"].um-form-field,
.um .um-form input[type="password"].um-form-field,
.um .um-form input[type="tel"].um-form-field,
.um .um-form input[type="number"].um-form-field,
.um .um-form input[type="url"].um-form-field,
.um .um-form select.um-form-field,
.um .um-form textarea.um-form-field {

    width: 100% !important;
    height: 52px !important;

    background: #fff !important;

    border: 2px solid var(--tdc-blue) !important;
    border-radius: 0 !important;

    color: #222 !important;

    box-shadow: none !important;
    outline: none !important;

    padding: 10px 14px !important;

    transition: all .3s ease;
}


/* INPUT FOCUS */

.um .um-form input[type="text"].um-form-field:focus,
.um .um-form input[type="email"].um-form-field:focus,
.um .um-form input[type="password"].um-form-field:focus,
.um .um-form input[type="tel"].um-form-field:focus,
.um .um-form input[type="number"].um-form-field:focus,
.um .um-form input[type="url"].um-form-field:focus,
.um .um-form select.um-form-field:focus,
.um .um-form textarea.um-form-field:focus {
    border: 2px solid var(--tdc-blue) !important;
    box-shadow:none !important;
}
.um-field-error .um-field-arrow{
    top: -21px;
    color: #a00000 !important;
}
/* .um-field-error {
    display: none !important;
} */

/* PLACEHOLDER */

.um .um-form input::placeholder,
.um .um-form textarea::placeholder {

    color: #777 !important;
    opacity: 1;
}


/* =========================================================
   PASSWORD FIELD / EYE ICON
   ========================================================= */

.um .um-field-area-password {
    position: relative;
}

.um .um-field-area-password input {
    padding-right: 45px !important;
}

.um .um-toggle-password {
    color: var(--tdc-blue) !important;
    line-height: 52px;
}

.um .um-toggle-password:hover {
    color: var(--tdc-green) !important;
}


/* =========================================================
   MAIN BUTTON
   EXACT TDC STYLE
   ========================================================= */

.um .um-button,
.um input[type="submit"].um-button,
.um input[type="button"].um-button {

    font-family: "optima-lt-pro", sans-serif;
    border: 6px solid #fff !important;
    text-align: center;
    text-decoration: none;
    color: #fff !important;
    background: #395690 !important;
    font-weight: 700 !important;
    display: inline-block;
    font-size: 20px !important;
    letter-spacing: 1.25px;
    line-height: 54px !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    margin-top: 15px;
    text-transform: uppercase;
    position: relative;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: all .4s ease-in-out;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase !important;
}


/* BUTTON HOVER */

.um .um-button:hover,
.um .um-button:focus,
.um input[type="submit"].um-button:hover,
.um input[type="submit"].um-button:focus {
    color: #395690 !important;
    background: #fff !important;
    border: 6px solid #395690 !important;
    box-shadow: none !important;
    margin-top: 15px;
    text-decoration: none;
}


/* =========================================================
   SECONDARY BUTTON
   REGISTER / LOGIN
   ========================================================= */

.um .um-button.um-alt {

    color: #395690 !important;

    background: #fff !important;

    border: 6px solid #395690 !important;
}

.um .um-button.um-alt:hover,
.um .um-button.um-alt:focus {

    color: #fff !important;

    background: #395690 !important;

    border: 6px solid #fff !important;
}


/* =========================================================
   LOGIN / REGISTER BUTTON COLUMNS
   ========================================================= */

.um .um-col-alt .um-half {
    width: 48% !important;
}

.um .um-col-alt .um-half:first-child {
    float: left;
}

.um .um-col-alt .um-half:last-child {
    float: right;
}


/* =========================================================
   FORGOT PASSWORD LINK
   ========================================================= */

.um .um-col-alt-b {
    margin-top: 0px !important;
    text-align: center;
}

.um .um-col-alt-b a,
.um .um-link-alt {

    color: var(--tdc-blue) !important;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 4px;

    transition: color .3s ease;
}

.um .um-col-alt-b a:hover,
.um .um-link-alt:hover {

    color: var(--tdc-green) !important;
}


/* =========================================================
   KEEP ME SIGNED IN
   ========================================================= */

.um .um-field-checkbox-option,.um-field-checkbox-state i {
    color: #333 !important;
}

.um .um-field-checkbox-state,.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i {
    color: var(--tdc-blue) !important;
}

.um .um-field-checkbox:hover .um-field-checkbox-state {
    color: var(--tdc-green) !important;
}
.um-toggle-password:hover i { color: #395690 !important; }


/* =========================================================
   PASSWORD RESET TEXT
   ========================================================= */

.um-password .um-field-block {

    color: #333;

    line-height: 1.6;

    margin-bottom: 20px;
}

/* =========================================================
   ERROR / VALIDATION
   ========================================================= */

.um .um-field-error {

    background: #fff !important;

    color: #a00000 !important;

    border-left: 4px solid #a00000 !important;

    border-radius: 0 !important;
}

.um .um-notice {

    background: #eaf6f2 !important;

    color: #222 !important;

    border-left: 5px solid var(--tdc-green) !important;

    border-radius: 0 !important;
}

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.um-account {

    width: 100%;

    background: #fff;

    border: 1px solid var(--tdc-light-grey);
}


/* =========================================================
   ACCOUNT SIDEBAR
   ========================================================= */

.um-account-side {

    background: var(--tdc-blue) !important;

    padding-bottom: 20px;
}


/* ACCOUNT USER IMAGE */

.um-account-meta-img img {

    border-radius: 0 !important;

    border: 5px solid #fff !important;
}


/* ACCOUNT USER NAME */

.um-account-name a {

    color: #fff !important;

    text-decoration: none !important;

    font-weight: 600;
}

.um-account-profile-link a {

    color: #fff !important;

    text-decoration: underline !important;

    opacity: .9;
}


/* =========================================================
   ACCOUNT SIDEBAR TABS
   ========================================================= */

.um-account-side ul {
    margin: 20px 0 0 !important;
    padding: 0 !important;
}

.um-account-side li {
    margin: 0 !important;
    padding: 0 !important;
}


/* TAB */

.um-account-side .um-account-link {

    display: block;

    color: #fff !important;

    background: transparent !important;

    border-radius: 0 !important;

    padding: 16px 20px !important;

    text-decoration: none !important;

    transition: all .3s ease;
}


/* TAB HOVER */

.um-account-side .um-account-link:hover {

    background: #fff !important;

    color: var(--tdc-blue) !important;
}


/* ACTIVE TAB */

.um-account-side .um-account-link.current {

    background: #fff !important;

    color: var(--tdc-blue) !important;
}


/* TAB ICON */

.um-account-side .um-account-icon {

    color: inherit !important;
}


/* TAB TITLE */

.um-account-side .um-account-title {

    color: inherit !important;
}


/* TAB ARROW */

.um-account-side .um-account-arrow {

    color: inherit !important;
}


/* =========================================================
   ACCOUNT MAIN CONTENT
   ========================================================= */

   .um-account .um-account-icontip::after {
       content: attr(original-title) !important;
       position: absolute !important;
       left: 40px !important;
       top: 50% !important;
       transform: translateY(-50%) !important;
       color: #000 !important;
       white-space: nowrap !important;
       opacity: 1 !important;
       visibility: visible !important;
       display: block !important;
       z-index: 99999 !important;
       font-size: 16px;
   }
   .um-account .um-account-icontip {padding-left: 10px !important;
    padding-top: 6px !important;text-align: left !important;}

    .um-account .um-account-side ul li a.um-account-link.current .um-account-icontip::after { color: #fff !important; }

   .um-account-side {
       width: 220px !important;
       background: #fff !important;
       /* border-right: 1px solid var(--tdc-border) !important; */
       padding: 0 !important;
   }

   .um-account-side .um-account-meta {
       padding: 30px 20px !important;
       text-align: center !important;
       background: #fff !important;
       border: 0 !important;
       margin-bottom: 0 !important;
    pointer-events: none;
   }

   .um-account-side .um-account-link {
       display: flex !important;
       align-items: center !important;
       gap: 12px !important;

       width: 100% !important;
       min-height: 55px !important;

       padding: 0 20px !important;

       color: var(--tdc-blue) !important;
       background: #fff !important;

       border-top: 1px solid var(--tdc-border) !important;

       text-decoration: none !important;
       transition: all .25s ease !important;
   }

   .um-account-side .um-account-link:hover {
       background: #f5f8fb !important;
   }


   .um-account-side .um-account-link.current {
       background: var(--tdc-blue) !important;
       color: #fff !important;
   }

   .um-account-side .um-account-link.current .um-account-icon,
   .um-account-side .um-account-link.current .um-account-title,
   .um-account-side .um-account-link.current .um-account-arrow {
       color: #fff !important;
   }

   .um-account-main {
       width: calc(100% - 220px) !important;
       padding: 40px 45px !important;
       background: #fff !important;
    border-left: 1px solid var(--tdc-border) !important;
   }

   .um-account-heading {
       color: var(--tdc-blue) !important;
       font-size: 24px !important;
       font-weight: 700 !important;
       padding-bottom: 15px !important;
       margin-bottom: 25px !important;

       border-bottom: 3px solid var(--tdc-light-green) !important;
   }

   .um-account-heading i {
       color: var(--tdc-green) !important;
       margin-right: 8px !important;
   }

/* =========================================================
   MOBILE ACCOUNT NAVIGATION
   ========================================================= */

.um-account-nav {

    margin-bottom: 15px;
}

.um-account-nav>a {

    display: block;

    padding: 16px 18px !important;

    background: var(--tdc-blue) !important;

    color: #fff !important;

    text-decoration: none !important;

    border-radius: 0 !important;

    font-weight: 600;
}

.um-account-nav>a.current {

    background: var(--tdc-blue) !important;

    color: #fff !important;
}

.um-account-nav .ico,
.um-account-nav .arr {

    color: inherit !important;
}

.um-password .um-field-block{ 
    padding: 0 20px; 
    font-size: 16px; 
}


/* New Style */

.um-page-account .um-account-main div.um-account-heading i { 

    top:0px;
}
.um-page-account .um-account-main .um-field{

    padding:20px 0 0 0;
}


.um-page-account .um-account-main  .um-col-alt.um-col-alt-b{
    margin-left: -5px;
    margin-right: -5px;

}
.um-page-account .um-account-main .um-account-meta img{
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.um-page-account .um-account-main .um-left{
    width: 100%;

}
.um-page-account .um-account-side li a span.um-account-icontip i.um-faicon-user{
    margin-left: 3px;
}

.um-page-account .um-account-main p{
    font-size: 16px;
    color: #000000;
}
.um-page-account .um-account-side ul{
    border-radius: 0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
}

/***** Courses page Style Start *****/

.archive .tdc-cource-archive-list-inner .course-card img{ 

    width: 100%; 
}
.archive .tdc-cource-archive-list-inner .course-card{ 

    border: 2px solid; border-image:linear-gradient(0deg, #0a9a69 0%, #5cb3aa 100%) 1; padding-bottom: 30px; 
}
.archive .tdc-cource-archive-list-inner .course-card h3, .archive .course-card p{ 
    
    padding-left: 20px; padding-right: 20px; 
}
.archive .tdc-cource-archive-list-inner .row{

    --bs-gutter-x: 30px;
}
/***** Courses page Style End *****/


/***** Courses Single Page Style Start *****/

.single .blog-inner-page .top-author ul{ 
    
    background-color: transparent; background: linear-gradient(170deg, #395690 0%, #009661 100%);
 }
.single .blog-inner-page .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled{

    background: linear-gradient(170deg, #395690 0%, #009661 100%);
    border-radius: 0;
}
.single .blog-inner-page .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-label{
    
    font-size: 16px;
    color:#ffffff;
    text-align: center;
}
.single .blog-inner-page .learndash-wrapper .ld-status{
    padding: 8px 20px;
    border-radius: 0;
}
.single .blog-inner-page .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-price{
    color:#ffffff;
}
.single .blog-inner-page .ld-course-status-action{
    border-radius: 0 !important;
}
.single .blog-inner-page .ld-course-status.ld-course-status-not-enrolled .ld-course-status-action .ld-button, .single .blog-inner-page .ld-course-status.ld-course-status-not-enrolled .learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) a:not(.button):not(.screen-reader-shortcut){
    padding: 13px 30px 12px 30px !important;

}
.single .blog-inner-page .learndash-wrapper .ld-expand-button, .single .blog-inner-page .ld-course-status-action .ld-button, .single .blog-inner-page .learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-course-status.ld-course-status-not-enrolled a:not(.button):not(.screen-reader-shortcut){
    border: 3px solid #fff !important;
    border-bottom: 3px solid #fff !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    line-height: normal;
    font-family: "optima-lt-pro", sans-serif !important;
}
.single .blog-inner-page .learndash-wrapper .ld-expand-button:hover,.single .blog-inner-page .ld-course-status.ld-course-status-not-enrolled .ld-course-status-action .ld-button:hover,.single .blog-inner-page .ld-course-status-action .ld-button:not([disabled]):not(.ld-button-reverse):not(.ld-button-transparent):not(.ld--ignore-inline-css):hover{
    border: 3px solid #395690 !important;
    background-color: #ffffff !important;
    color: #395690 !important;
}
.single .blog-inner-page .learndash-wrapper .ld-tooltip [role="tooltip"]{ 
    border-radius: 0 !important; 
}
.single .blog-inner-page .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details .ld-expand-button, .single .blog-inner-page .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details .ld-expand-button:hover{ 
    border:0 !important 
}
.single .blog-inner-page .learndash-wrapper .ld-expand-button .ld-icon{
    position: relative;
    top: 1px;
}
.single .blog-inner-page .ld-item-list-item-preview .ld-expand-button .ld-icon{
    position: relative;
    top: -1px;
    min-width: 20px;
    height: 20px;

}

/***** Courses Single Page Style End *****/



/* =========================================================
   MOBILE
   ========================================================= */


@media (max-width: 1200px) {
    .um-page-account .um-account .um-account-icontip::after{
         content: attr(title) !important;
    }
}

@media (max-width: 767px) {

    .um-account-main {

        padding: 20px !important;
    }

    .um .um-col-alt .um-half {

        width: 100% !important;

        float: none !important;

        margin-bottom: 10px;
    }

    .um .um-col-alt .um-half .um-button {

        width: 100% !important;
    }
   
     .archive .tdc-cource-archive-list-inner .row .mb-4:last-child{
     
        margin-bottom: 0 !important;
    }   
    

}

@media (max-width: 575px) {
    .um-page-account .um-account .um-account-side, .um-page-account .um-account .um-account-main {
        width: 100% !important;
        max-width: inherit !important;
    }
    .um-page-account .um-account .um-account-nav a{
        color:#ffffff !important;
        line-height: normal;
        font-size: 15px;
        padding: 12px 0px 14px 50px !important;
    }
    .um-page-account .um-account-meta-img{
        padding-top: 30px;
    }
    .um-page-account .um-account-nav span.arr{
        right:15px;
        top: 5px;
        transition: 0.5s;
    }
    .um-page-account .um-account .um-account-nav a.current span.arr{
        transform: rotate(180deg);
    }
    .um-page-account .um-account .um-account-nav span.ico{
        left: 15px;
        top: 8px;
    }
    .um-account-name{
        padding-top: 0;
        margin-bottom: 20px;
    }
    .um-page-account .um-account .um-account-tab{
        border-bottom:0;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .um {

        width: 100% !important;
    }

    .um .um-form input[type="text"],
    .um .um-form input[type="email"],
    .um .um-form input[type="password"],
    .um .um-form input[type="tel"],
    .um .um-form input[type="number"],
    .um .um-form input[type="url"],
    .um .um-form select,
    .um .um-form textarea {

        height: 48px !important;

        padding: 8px 12px !important;
    }

    .um .um-button,
    .um input[type="submit"].um-button {

        width: 100% !important;

        font-size: 17px;

        line-height: 48px;

        min-height: 48px;
    }

    .um-account-main {

        padding: 15px !important;
    }

    .um-col-1 > .um-field:first-child{ 
        
        padding-top: 0px; 
    }

    .um-password .um-field-block{ 

        padding: 0 0px; 
    
    }
    .um-login, .um-register, .um-password, .um.um-login.um-logout{ 
        padding: 30px 20px;
    }

    .um-page-account .um-account-main .um-field:nth-child(2){

        padding:5px 0 0 0;
    }
}