/**

 * PRO styles

 *

 * Hidden boxes, disabled buttons, etc.

 */

[hidden] {

    display: none !important;

}

.repeatable-row-featured input[disabled] {

    opacity: 0.6;

}

#repeatable-fieldset-one-featured.disabled,

#repeatable-fieldset-one.disabled {

    position: relative;

    padding: 16px;

}

#repeatable-fieldset-one-featured.disabled::after,

#repeatable-fieldset-one.disabled::after {

    content: "";

    position: absolute;

    z-index: 1;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background: url('assets/css_asset_43.svg?v=76cdf8a24d') no-repeat 98% center / 24px, repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px);

}



.has-pro-account .has-pro-fields {

    /* No extra styles */

}

.has-free-account .has-pro-fields {

    margin: 48px 0;

}





/**

 * Cinnamon User Profile Settings

 */





/**

 * Button containers

 */

.ui-buttons--center {

    display: flex;

    gap: 0.5em;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

}

.ui-buttons--space-between {

    display: flex;

    gap: 0.5em;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

}







/**

 * Buttons

 */

.ui-button {

    border: 0 none;

    border-radius: 48px;

    box-shadow: none;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    font-size: 14px;

    font-weight: 400;

    margin: 2px 0;

    padding: 8px 16px;

    text-align: center;

    text-decoration: none;

    box-sizing: border-box;

    vertical-align: middle;



    transition: box-shadow 0.3s ease 0s;

}



.ui-button-small {

    font-size: 12px;

    padding: 6px 12px;

}



.ui-button--primary,

.ui-button--secondary,

.ui-button--tertiary,

.ui-button--positive,

.ui-button--negative,

.ui-button--link,

.ui-button--active,



.entry a.ui-button--primary,

.entry a.ui-button--secondary,

.entry a.ui-button--tertiary,

.entry a.ui-button--positive,

.entry a.ui-button--negative,

.entry a.ui-button--link,

.entry a.ui-button--active,



a.ui-button--primary,

a.ui-button--secondary,

a.ui-button--tertiary,

a.ui-button--positive,

a.ui-button--negative,

a.ui-button--link,

a.ui-button--active,

a.ui-button--outline {

    color: #ffffff;

}

.ui-button--primary {

    background-color: var(--component-color-primary);

}

.ui-button--secondary {

    background-color: var(--component-color-secondary);

}

.ui-button--tertiary,

.ui-button--active {

    background-color: var(--component-color-tertiary);

}

.ui-button--positive {

    background-color: var(--component-color-positive);

}

.ui-button--negative {

    background-color: var(--component-color-negative);

}

.ui-button--link {

    background-color: transparent;

}

.ui-button--outline {

    box-shadow: inset 0 0 0 1px var(--component-color-secondary);

}



.ui-button--user,

.ui-button--user:hover {

    color: var(--primary-color);

    background-color: #ffffff;

}



.ui-button--primary:hover,

.ui-button--secondary:hover,

.ui-button--tertiary:hover,

.ui-button--positive:hover,

.ui-button--negative:hover,

.ui-button--active:hover,

.ui-button--link:hover,

.ui-button--user:hover {

    box-shadow: inset 0 0 0 128px rgba(0, 0, 0, 0.10);

}

.ui-button--outline:hover {

    box-shadow: inset 0 0 0 1px currentColor;

}



.ui-button svg {

    margin-right: 4px;

}



.ui-button.hire {

}



.ui-button.hire:hover {

    background-color: #f0f0f0;

    color: inherit;

}





/**

 * Dropdown menu

 */

.ui-dropdown {

    display: flex;

    flex-direction: column;

    margin: 0;

    padding: 0;

}

.ui-dropdown li {

    margin: 0;

    padding: 0;

    list-style: none;

}

.ui-dropdown li a {

    display: flex;

    padding: 8px 16px;

    color: #ffffff;

    text-decoration: none;

}

.ui-dropdown li a:hover {

    background-color: var(--component-color-secondary);

    display: flex;

    padding: 8px 16px;

    color: #ffffff;

    text-decoration: none;

}







/**

 * Popup/modal/dropdown "Close" icon

 */

.ui-icon--close {

    position: absolute;

    top: 0;

    right: 0;

    cursor: pointer;



    background: none;

    border: 0 none;

    border-radius: 100%;



    font-size: 18px;



    display: inline-block;

    width: 36px;

    height: 36px;

    line-height: 36px;

    text-align: center;

    transition: background-color 0.2s ease-in-out;

}

.ui-icon--close:hover {

    background-color: rgba(0, 0, 0, 0.25);

    background-color: #515355;

}

.ui-icon--close .ionicon {

    margin-right: 0;

}



/**

 * Popup/modal/dropdown generic styles

 */

.ui-element--modal {

    z-index: 256;

}







/**

 * Confirmation popup

 */

.ui-simple-modal-dialog {

    position: fixed;

    z-index: 256;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.25);

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

}



.ui-simple-modal-dialog--inner {

    background-color: var(--component-medium-grey);

    border-radius: var(--component-radius);

    box-shadow: var(--component-shadow);



    color: #ffffff;

    min-width: 320px;

    min-height: 160px;

    display: flex;

    flex-flow: column wrap;

    align-items: center;

    animation: fadein .25s ease-in-out;

}



@keyframes fadein {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}





.ui-simple-modal-title {

    width: 100%;

    text-align: center;

    padding: 8px 0;

    position: relative;

}



.ui-simple-modal-title-text {

    margin-left:30px;

    font-weight: 600;

}



.ui-simple-modal-close {}



.ui-simple-modal-text {

    margin: auto 24px 0 24px;

}



.ui-simple-modal-button-group {

    margin: auto 0 16px 0;

}



.ui-simple-modal-button-group button {

    border-radius: 48px;

    border: 0 none;

    background-color: #0066ff;

    padding: calc(0.333em + 2px) calc(0.667em + 2px);

    margin: 0 8px;

    transition: all 0.3s ease 0s;

    text-decoration: none;

    box-shadow: none;

    cursor: pointer;

    display: inline-block;

    font-size: 13px;

    text-align: center;

    text-decoration: none;

    word-break: break-word;

    box-sizing: border-box;

    min-width: 100px;

}



.ui-simple-modal-button-group button.ui-simple-modal-button-green {

    background-color: #0066ff;

}

.ui-simple-modal-button-group button.ui-simple-modal-button-red {

    background-color: #515355;

}







.ps-loader.ps-loader--posters {

    display: none;

}



.ps-loader {

    display: flex;

    position: relative;

    width: fit-content;

    height: 80px;

    margin: 0 auto;

}

.ps-loader div {

    display: inline-block;

    position: absolute;

    left: 0;

    width: 8px;

    background: var(--component-color-secondary);

    animation: ps-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;

}

.ps-loader div:nth-child(1) {

    left: 0;

    animation-delay: -0.24s;

}

.ps-loader div:nth-child(2) {

    left: 16px;

    animation-delay: -0.12s;

}

.ps-loader div:nth-child(3) {

    left: 32px;

    animation-delay: 0s;

}

@keyframes ps-loader {

    0% {

        top: 8px;

        height: 48px;

    }

    50%, 100% {

        top: 24px;

        height: 24px;

    }

}







/**

 * Thin UI Popovers

 */

[data-popover-target] {

    cursor: pointer;

}

[data-popover] {

    font-size: 13px;

    border-radius: var(--component-radius);

    background-color: var(--component-medium-grey);

    padding: 16px 36px 16px 16px;

    position: absolute;

    top: 0;

    left: 160px;

    z-index: 999;

}

[data-popover] .thin-ui-popover-body {

    position: relative;

    z-index: 1;

}

[data-popover] p {

    margin: 8px 0;

    font-weight: 400;

    font-size: 14px;

}

[data-popover] .thin-ui-popover-close-button {

    position: absolute;

    z-index: 2;

    top: 2px;

    right: 2px;

    width: 30px;

    height: 30px;

    color: #bababa;

    border: none;

    box-shadow: none;

    background: none;

    border-radius: 20px;

    padding: 0;

}

[data-popover] .thin-ui-popover-close-button:hover {

    background: #e7e7e7;

    color: #ffffff;

}



.thin-ui-popover--container {

    position: relative;

}



.thin-ui-popover {

    min-width: 320px;

    max-width: 320px;



    box-shadow: var(--component-shadow);

}

.thin-ui-popover.hide {

    display: none !important;

}







/**

 * Panels, columns, etc.

 */

.ui-panel {

    background-color: var(--component-dark-grey);

    border-radius: var(--component-radius);

    padding: 24px;

}

.ui-panel--stacked {

    margin-bottom: 24px;

}

.ui-panel--flex {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.ui-panel h3 {

    margin-top: 0;

}

.ui-panel.ui-panel--flex h3 {

    margin-top: 0;

    margin-bottom: 0;

    padding-top: 0;

    padding-bottom: 0;

}



.cinnamon-user-profile-editor .ui-panel h3 {

    margin: 2em 0 1em 0;

}





/**

 * Upgradable input fields

 */

.ui-upgrade--wrap {

    position: relative;

}

.ui-upgrade--button {

    display: inline-flex;

    align-items: center;



    background-color: #ffffff;

    color: #000000;

    font-weight: 600;

    border-radius: var(--component-radius);

    position: absolute;

    top: 2px;

    right: 2px;

    height: calc(100% - 4px); /* top * 2 */

    padding: 0 12px;

}

.ui-upgrade--button:hover {

    background-color: #000000;

    color: #ffffff;

}

.ui-upgrade--button svg,

.ui-upgrade--button i {

    margin-right: 4px;

}

.ui-upgrade--wrap input {

    padding-right: 128px !important;

}







/**

 * Uploader (v7)

 */

#ps-block-uploader--featured {

    min-height: 256px;

    margin: 16px 0;

}



#ps-add-block--image {

    color: #ffffff;

}







/**

 * Note box (popup)

 */

.note-box {

    background: var(--component-dark-grey);

    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.5);

    color: #ffffff;

    width: 40%;

    text-align: center;

    padding: 50px;

    border-radius: var(--component-radius);

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: none;

}

.note-box span {

    float: right;

    cursor: pointer;

    font-size: 20px;

}

.note-box h2 {

    padding-bottom: 20px;

}







/**

 * Tags

 */

.tagify {

    background-color: var(--component-input);

    border-radius: var(--component-radius);

    border: 0 none;

    padding: 12px;

}

.tagify__tag > div > *,

.tagify__tag__removeBtn {

    color: #ffffff;

}

.tagify__tag > div::before {

    box-shadow: 0 0 0 2em var(--component-color-primary) inset;

    border-radius: 48px;

}

.tagify__tag:focus div::before,

.tagify__tag:hover:not([readonly]) div::before {

    box-shadow: 0 0 0 2em #d3e2e2 inset;

}

.tagify__tag__removeBtn:hover+div::before {

    box-shadow: 0 0 0 2em rgba(211, 148, 148, .3) inset !important;

}

.tagify__input {

    line-height: 1;

}

.tagify__input::before,

.tagify__input:focus:empty::before {

    color: #ffffff;

}



.tagify__tag:hover:not([readonly]) div::before {

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    box-shadow: 0 0 0 2em var(--component-color-primary) inset;

}



#aep_ww {

    position: fixed;

    z-index: 100;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    text-align: center;

}



#aep_ww:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.25);

    z-index: 99;

}



#aep_win {

    font-size: 18px;

    margin: 0 auto 0 auto;

    width: 400px;

    text-align: center;

    position: relative;

    z-index: 300;

    top: 50%;

    transform: translateY(-50%);



    padding: 24px;



    background-color: #202225;

    border-radius: var(--component-radius);

    box-shadow: var(--component-shadow);

}



#aep_win input {

    font-family: inherit;

    font-size: inherit;

}



#aep_prompt {

    margin: 8px 0;

}

.aep-buttons {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    margin-top: 24px;

}







.tail-select {

    width: 100%;

    margin: 0 0 24px 0;

    padding: 0;

}

.tail-select .select-label {

    padding: 12px 30px 12px 16px;

    background-color: var(--component-input);

    border-radius: var(--component-radius);

    box-shadow: none;

}

.tail-select .select-label:after {

    top: 20px;

}



.tail-select-container .select-handle {

    width: auto;

    cursor: pointer;

    display: inline-block;

    position: relative;

    text-align: left;

    font-weight: 400;

    text-shadow: none;

    vertical-align: unset;

    background-color: #000000;

    border-width: 0;

    border-style: solid;

    border-color: transparent;

    transition: background 142ms linear;

    color: #FFFFFF;

    background: var(--component-color-primary);

    padding: 6px 12px 6px 12px;

    margin: 0 4px;

    border-radius: 48px;

    font-size: 12px;

    line-height: 1;

}

.tail-select-container.select-label .select-handle {

    margin: 0 4px;

}









/**

 * Tooltip

 */

.component-tooltip {

    position: relative;

    transition: all 0.3s ease-in-out;

}

.component-tooltip--content {

    visibility: hidden;

    z-index: 1;

    opacity: .40;

    width: 240px;

    padding: 16px;

    background: #202225;

    color: #ffffff;

    position: absolute;

    bottom: 72px;

    left: calc(-56px / 2);

    border-radius: var(--component-radius);

    font: 16px;

    transition: all 0.3s ease-in-out;

}

.component-tooltip--content::after {

    content: " ";

    width: 0;

    height: 0;



    border-style: solid;

    border-width: 12px 12.5px 0 12.5px;

    border-color: #202225 transparent transparent transparent;



    position: absolute;

    left: calc(50% - 12px);

    bottom: -11px;

}



.component-tooltip:hover .component-tooltip--content{

    visibility: visible;

    opacity: 1;

    transition: .3s linear;

}







/**

 * Vertical tabs

 */

.component--vertical-tabs {

    display: flex;

    flex-direction: column;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style-type: none;

}



.component--vertical-tabs > li > a {

    padding: 10px;

    display: block;

    cursor: pointer;

    background-color: red;

    white-space: nowrap;

}



.component--vertical-tabs > li > a:hover,

.component--vertical-tabs > li.active > a,

.component--vertical-tabs > li.active > a:hover,

.component--vertical-tabs > li.active > a:focus {

    background-color: blue;

}



.component--vertical-tabs-content > .component--vertical-tabs-pane {

    display: none;

}



.component--vertical-tabs-content > .component--vertical-tabs-pane.active {

    display: block;

    width: calc(100% - 40px);

    padding: 20px;

}



.component--vertical-tabs-content > .active {

    display: block;

}







div.umodal-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

}

div.umodal-wrapper section.umodal {

    font-size: 18px;

    text-align: center;

    z-index: 300;



    display: block;

    width: 100%;

    max-width: 360px;

    margin: 128px auto 0;

    color: #ffffff;



    padding: 24px;

    background-color: var(--component-medium-grey);

    border-radius: var(--component-radius);

    box-shadow: var(--component-shadow);

}

div.umodal-wrapper section.umodal a.umodal-close {

    display: block;

    margin-top: 36px;

    height: 36px;

    background: var(--component-color-secondary);

    color: white;

    line-height: 36px;

    text-align: center;

    border-radius: 5px;

    cursor: pointer;

}

div.umodal-wrapper section.umodal a.umodal-close:hover {

    background: #000000;

}





.avatar-profile-only {

  border:3px solid #141517;

  width: 120px;

  height: 120px!important;

  object-fit: cover;

}



.user_has_banner_avatar {

    z-index:99!important;

    top: calc(100% - 60px);

    position: absolute;

}







@media (max-width: 768px) {

.user_has_banner_avatar {

    top: calc(100% - 90px);

}

}