.lity-hide {
display: none !important;
}
.lity {
background-color: rgba(92, 102, 167, 0.1);
}
.lity-wrap {
background-color: transparent;
}
.lity-container {
box-shadow: 0 6px 32px 5px rgba(120, 142, 150, 0.16);
outline: 1px solid var(--cp-gray-300) !important;
border-radius: 10px;
background: #fff;
padding: 25px 50px 40px;
width: 680px;
max-width: 90vw;
overflow-y: auto;
}
.lity-image .lity-container {
background: #fff;
padding: 0;
min-width: auto;
}
.lity-content:after {
box-shadow: none;
}
.lity-close {
position: absolute;
width: 29px;
height: 29px;
top: 10px;
right: 10px;
background: #fff;
border: 1px solid var(--cp-gray-300);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--cp-gray-600);
cursor: pointer;
padding: 0;
}
.lity-close:hover,
.lity-close:active {
top: 10px;
color: var(--cp-gray-600);
background: #fff;
}
button.lity-close {
min-width: 29px;
}
.lity-close svg {
width: 9px;
height: 9px;
}
.lity-image .lity-close {
top: -25px;
right: -25px;
}
.lity .files,
.lity .multiple-urls {
margin-top: 20px;
padding-left: 0;
}
.lity .files li,
.lity .multiple-urls li {
display: flex;
align-items: center;
list-style: none;
line-height: 1em;
margin-bottom: 20px;
position: relative;
} .files .file-item {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--cp-gray-300);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 12px;
}
.files .file-item--uploading {
opacity: 0.8;
transition: background 0.3s ease;
}
.files .file-item.deleting {
opacity: 0.5;
pointer-events: none;
}
.files .file-item__icon {
flex-shrink: 0;
display: flex;
align-items: center;
}
.files .file-item__icon svg {
width: 27px;
height: 27px;
}
.files .file-item__details {
flex: 1;
min-width: 0;
}
.files .file-item__name {
display: block;
font-size: var(--cp-h5-sb-size);
line-height: var(--cp-h5-sb-lh);
font-weight: var(--cp-h5-sb-weight);
letter-spacing: var(--cp-h5-sb-spacing);
color: var(--cp-gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
} .files .file-item__download {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--cp-btn-sm-size);
line-height: var(--cp-btn-sm-lh);
font-weight: var(--cp-btn-weight);
letter-spacing: var(--cp-btn-spacing);
background-color: var(--cp-gray-200);
color: var(--cp-gray-900);
border-radius: 9999px;
padding: 6px 18px 6px 17px;
cursor: pointer;
transition: background-color 0.15s ease;
text-decoration: none;
white-space: nowrap;
}
.files .file-item__download:hover {
background-color: var(--cp-gray-300);
color: var(--cp-gray-900);
text-decoration: none;
}
.files .file-item__download svg {
width: 0.8rem;
height: auto;
} .files .file-item__delete {
flex-shrink: 0;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
}
.files .file-item__delete svg {
width: 12px;
height: 15px;
}
.files .file-item__delete:hover svg path {
stroke: var(--cp-error);
}
.files .file-item__icon .components-spinner {
width: 27px;
height: 27px;
margin: 0;
} .lity .files li a.slide-download {
border: 1px solid #dde7ea;
color: #8594a3;
display: block;
line-height: 1em;
padding: 18px 17px 18px 22px;
}
.lity .files li a.slide-download:hover {
border-color: var(--wp--preset--color--leco-cp-secondary);
} .multiple-urls .url-item {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--cp-gray-300);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 12px;
}
.multiple-urls .url-item__icon {
flex-shrink: 0;
display: flex;
align-items: center;
}
.multiple-urls .url-item__icon svg {
width: 23px;
height: 14px;
}
.multiple-urls .url-item__details {
flex: 1;
min-width: 0;
}
.multiple-urls .url-item__title {
display: block;
font-size: var(--cp-h5-sb-size);
line-height: var(--cp-h5-sb-lh);
font-weight: var(--cp-h5-sb-weight);
letter-spacing: var(--cp-h5-sb-spacing);
color: var(--cp-gray-900);
}
.multiple-urls .url-item__url {
display: block;
font-size: var(--cp-small-size);
line-height: var(--cp-small-lh);
color: var(--cp-gray-600);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.multiple-urls .url-item__open {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--cp-btn-sm-size);
line-height: var(--cp-btn-sm-lh);
font-weight: var(--cp-btn-weight);
letter-spacing: var(--cp-btn-spacing);
background-color: var(--cp-gray-200);
color: var(--cp-gray-900);
border-radius: 9999px;
padding: 6px 18px 6px 17px;
cursor: pointer;
transition: background-color 0.15s ease;
text-decoration: none;
white-space: nowrap;
}
.multiple-urls .url-item__open:hover {
background-color: var(--cp-gray-300);
color: var(--cp-gray-900);
text-decoration: none;
}
.multiple-urls .url-item__open svg {
width: 0.8rem;
height: auto;
}
.lity-content .files,
.lity-content .multiple-urls,
.lity-content .client-uploads-container,
.lity-content .image-slider {
margin-top: 2rem;
}
.lity-content .files,
.lity-content .multiple-urls {
margin-bottom: 2rem;
}
.lity-content .module_mark_as_complete {
margin-top: 2rem;
}
.lity-content .module_mark_as_complete,
.lity-content .client-uploads-container {
text-align: center;
}
.lity-content .choose-files {
padding: 1.25rem 1rem;
position: relative;
background-color: var(--cp-gray-100);
border: 1px dashed var(--cp-gray-350);
border-radius: 8px;
cursor: pointer;
font-weight: normal;
line-height: 1.6;
width: 100%;
text-align: center;
}
.lity-content .components-drop-zone {
background-color: #f5fffa;
border-radius: 2px;
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
visibility: hidden;
z-index: 40;
}
.lity-content .components-drop-zone.is-active {
align-items: center;
display: flex;
justify-content: center;
opacity: 1;
visibility: visible;
}
.lity-content .choose-files.drag-over,
.lity-content .choose-files:hover {
border-color: var(--wp--preset--color--leco-cp-primary, #69BDFE);
} .leco-cp__upload-error {
display: flex;
align-items: center;
gap: 12px;
background-color: var(--cp-error-light);
border: 1px solid var(--cp-error-border);
border-radius: 8px;
padding: 14px 16px;
margin-top: 12px;
color: var(--cp-error-dark);
font-size: var(--cp-h5-sb-size);
line-height: var(--cp-h5-sb-lh);
font-weight: var(--cp-h5-sb-weight);
}
.leco-cp__upload-error p {
flex: 1;
margin: 0;
}
.leco-cp__upload-error-dismiss {
flex-shrink: 0;
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: var(--cp-error-dark);
padding: 0 4px;
}
.leco-cp__upload-error-dismiss:hover {
opacity: 0.7;
}
.lity-content .choose-files span {
font-size: var(--cp-h4-size);
line-height: var(--cp-h4-lh);
font-weight: var(--cp-h4-weight);
letter-spacing: var(--cp-h4-spacing);
color: var(--cp-gray-900);
}
.lity-content .choose-files p.max-upload-size {
font-size: var(--cp-small-size);
line-height: var(--cp-small-lh);
font-weight: 400;
padding-bottom: 0;
color: var(--cp-gray-600);
margin-bottom: 0;
}
.lity-content .choose-files p.allowed-file-types {
max-width: 584px;
margin: 0.2rem auto 0;
}
.mark-complete__buttons {
display: flex;
justify-content: center;
gap: 1rem;
background-color: var(--cp-gray-100);
margin: 0 -50px -40px;
padding: 0 50px 40px;
border-radius: 0 0 10px 10px;
}
.mark-complete__btn-link {
cursor: pointer;
}
.mark-complete__btn-confirm {
background-color: var(--wp--preset--color--leco-cp-secondary);
color: var(--wp--preset--color--leco-cp-secondary-text);
border: none;
border-radius: 999px;
width: 173px;
padding: 0.625rem 0;
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-btn-weight);
cursor: pointer;
text-align: center;
}
.mark-complete__btn-confirm:hover {
filter: brightness(95%);
}
.mark-complete__btn-cancel {
background-color: var(--cp-gray-200);
color: var(--cp-gray-700);
border: none;
border-radius: 999px;
width: 173px;
padding: 0.625rem 0;
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-btn-weight);
cursor: pointer;
text-align: center;
}
.mark-complete__btn-cancel:hover {
filter: brightness(95%);
}
.iconset {
display: inline-block;
margin: 0.2em;
padding-top: 3px;
width: 2.25rem;
height: auto;
}
.iconset svg * {
stroke: currentColor;
color: #8594a3;
}
.lity [class^="icon-"] {
display: block;
float: right;
margin-top: -2px;
margin-right: 5px;
margin-left: 5px;
}
.lity [class^="icon-"] svg {
width: 20px;
height: 20px;
}
.lity [class^="icon-"] .st0 {
stroke-width: 4px;
}
.lity .icon-download .st0 {
stroke: currentColor;
stroke-width: 2px;
}
.module .ico-area {
display: block;
line-height: 1;
font-size: 2.626rem;
margin: 0 0 0.625rem;
}
.lity .module {
display: block;
position: relative;
font-size: 0.875rem;
line-height: 1.25;
text-align: center;
min-height: auto;
border-color: #e7eaec;
color: #8594a3;
}
@media (min-width: 1024px) {
.lity .module {
height: calc(100% - 1.25rem);
}
} .lity-content .module {
border: none;
border-radius: 10px 10px 0 0;
text-align: center;
margin: -25px -50px 0;
padding: 1.25rem 30px 1.5rem;
background-color: var(--cp-gray-100);
}
.lity-content .module:hover {
box-shadow: none;
}
.lity-content .module .ico-area {
color: var(--cp-gray-600);
margin-bottom: 0.125rem;
}
.lity-content .module .iconset svg * {
color: var(--cp-gray-600);
}
.lity-content .module .title {
font-size: var(--cp-h1-size);
line-height: var(--cp-h1-lh);
font-weight: var(--cp-h1-weight);
letter-spacing: var(--cp-h1-spacing);
margin-bottom: 0.75rem;
}
.lity-content .module .desc,
.lity-content .module .description {
display: block;
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-h5-weight);
letter-spacing: var(--cp-h5-spacing);
max-width: 500px;
margin-left: auto;
margin-right: auto;
} .lity-content .module .modal-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 20px;
color: var(--cp-gray-600);
font-size: var(--cp-small-size);
line-height: var(--cp-small-lh);
}
.lity-content .module .modal-meta svg {
width: 11px;
height: 12px;
}
.lity-content .module .modal-meta svg path {
fill: var(--cp-gray-600);
}
.lity-content .module .modal-due-date,
.lity-content .module .file-count {
display: flex;
align-items: center;
gap: 6px;
} .lity-content .module .modal-complete-btn {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.modal-complete-btn__link {
background-color: var(--wp--preset--color--leco-cp-secondary);
color: var(--wp--preset--color--leco-cp-secondary-text);
border: none;
border-radius: 999px;
padding: 0.625rem 2.5rem;
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-btn-weight);
cursor: pointer;
}
.modal-complete-btn__link:hover {
filter: brightness(95%);
} .modal-complete-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 1rem;
}
.modal-complete-confirm__label {
font-weight: var(--cp-btn-weight);
color: var(--cp-gray-900);
font-size: var(--cp-h5-size);
}
.modal-complete-confirm__yes {
background-color: var(--wp--preset--color--leco-cp-secondary);
color: var(--wp--preset--color--leco-cp-secondary-text);
border: none;
border-radius: 999px;
padding: 0.625rem 2rem;
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-btn-weight);
cursor: pointer;
}
.modal-complete-confirm__yes:hover {
filter: brightness(95%);
}
.modal-complete-confirm__cancel {
background-color: var(--cp-gray-200);
color: var(--cp-gray-700);
border: none;
border-radius: 999px;
padding: 0.625rem 2rem;
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-btn-weight);
cursor: pointer;
}
.modal-complete-confirm__cancel:hover {
filter: brightness(95%);
} .lity-content .module .modal-completed-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
color: var(--cp-success);
font-size: var(--cp-h5-size);
line-height: var(--cp-h5-lh);
font-weight: var(--cp-btn-weight);
}
.modal-completed-indicator__icon {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: var(--cp-success);
}
.modal-completed-indicator__icon svg {
width: 13px;
height: auto;
}  .lity-content .module-text {
padding: 1.5rem 0 0;
color: var(--cp-gray-900);
font-size: var(--cp-body-portal-size);
line-height: var(--cp-body-portal-lh);
}
.lity-content .module-text--below {
padding-top: 0;
padding-bottom: 0.5rem;
}
.image-slider-wrapper .module-text--above {
padding-bottom: 1rem;
}
.image-slider-wrapper .module-text--below {
padding-top: 1.5rem;
}
.lity-content .module-text p {
margin: 0 0 1rem;
}
.lity-content .module-text p:last-child {
margin-bottom: 0;
}
.lity-content .module-text p + ul,
.lity-content .module-text p + ol {
margin-top: 1.1875rem; }
.lity-content .module-text h2 {
font-size: var(--cp-h1-size);
line-height: var(--cp-h1-lh);
font-weight: var(--cp-h1-weight);
letter-spacing: var(--cp-h1-spacing);
color: var(--cp-gray-900);
margin-top: 1.75rem;
margin-bottom: 0;
}
.lity-content .module-text h2:first-child {
margin-top: 0;
}
.lity-content .module-text h2 + p,
.lity-content .module-text h2 + ul,
.lity-content .module-text h2 + ol {
margin-top: 0.5rem;
}
.lity-content .module-text h3 {
font-size: var(--cp-content-h3-size);
line-height: var(--cp-content-h3-lh);
font-weight: var(--cp-content-h3-weight);
letter-spacing: var(--cp-content-h3-spacing);
color: var(--cp-gray-900);
margin-top: 1.5625rem; margin-bottom: 0;
}
.lity-content .module-text h3:first-child {
margin-top: 0;
}
.lity-content .module-text h3 + p,
.lity-content .module-text h3 + ul,
.lity-content .module-text h3 + ol {
margin-top: 0.375rem;
}
.lity-content .module-text h4 {
font-size: var(--cp-content-h4-size);
line-height: var(--cp-content-h4-lh);
font-weight: var(--cp-content-h4-weight);
letter-spacing: var(--cp-content-h4-spacing);
color: var(--cp-gray-900);
margin-top: 1rem;
margin-bottom: 0;
}
.lity-content .module-text h4:first-child {
margin-top: 0;
}
.lity-content .module-text h4 + p,
.lity-content .module-text h4 + ul,
.lity-content .module-text h4 + ol {
margin-top: 0.375rem;
}
.lity-content .module-text ul,
.lity-content .module-text ol {
display: block;
list-style: none;
margin: 0 0 1rem;
padding-left: 32px;
}
.lity-content .module-text li {
display: block;
position: relative;
margin-bottom: 0.375rem;
line-height: var(--cp-body-portal-lh);
} .lity-content .module-text .is-layout-flex,
.lity-content .module-text .is-layout-grid,
.lity-content .module-text .flex,
.lity-content .module-text .grid {
display: block;
}
.lity-content .module-text ul li::before {
content: "";
position: absolute;
left: -20px;
top: 0.6em;
width: 6px;
height: 6px;
background-color: currentColor;
border-radius: 50%;
}
.lity-content .module-text ol {
counter-reset: list-counter;
}
.lity-content .module-text ol li {
counter-increment: list-counter;
}
.lity-content .module-text ol li::before {
content: counter(list-counter) ".";
font-weight: 700;
position: absolute;
left: -32px;
width: 24px;
text-align: right;
}
.lity-content .module-text a {
color: var(--wp--preset--color--leco-cp-primary);
font-weight: var(--cp-portal-link-weight);
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--leco-cp-secondary);
text-decoration-thickness: var(--cp-link-underline-thickness);
text-underline-offset: var(--cp-link-underline-offset);
text-decoration-skip-ink: auto;
}
.lity-content .module-text a:hover {
text-decoration: none;
color: var(--wp--preset--color--leco-cp-secondary);
}
.lity-content .module-text strong {
font-weight: 700;
}
.lity-content .module-text em {
font-style: italic;
}
.lity-content .empty-state {
padding: 3rem 1rem;
text-align: center;
color: var(--cp-gray-600);
font-size: var(--cp-content-body-size);
line-height: var(--cp-content-body-lh);
}
.lity-content .empty-state svg {
display: block;
margin: 0 auto 1rem;
width: 167px;
height: auto;
}
.lity-content .empty-state p {
max-width: 280px;
margin: 0 auto;
}