[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "icon-font";
    font-style: normal;
    font-weight: normal;
    /* speak: never; */
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.image-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px
}

.image-item {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    background: #fff;
    text-align: center;
    overflow: hidden
}

.image-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px
}

.image-item p {
    font-size: 12px;
    margin-top: 5px;
    color: #555;
    word-break: break-word
}

.merge-pdf-container h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.image-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.image-item {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    background: #fff;
    text-align: center;
    overflow: hidden;
}

.image-item img {
    width: 100%;
    height: 120px;
    /* Fixed height for uniform look */
    object-fit: cover;
    /* Crop large images */
    border-radius: 4px;
}

.image-item p {
    font-size: 12px;
    margin-top: 5px;
    color: #555;
    word-break: break-word;
    /* Prevent filename overflow */
}

.image-item .actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 5px;
}

.image-item button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.subtitle {
    font-size: 16px;
    color: #444;
}

.features {
    color: green;
    font-weight: 500;
}

.upload-box {
    background: #fff8e1;
    border: 2px dashed #008cff;
    border-radius: 10px;
    padding: 20px;
    width: 80%;
    max-width: 900px;
    margin: 20px auto;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
}

.upload-header .rating {
    color: #333;
    font-weight: bold;
}

.upload-header .rating i {
    color: #ff9800;
    margin-right: 5px;
}

.upload-header .desktop-app {
    color: #c62828;
    text-decoration: none;
    font-size: 14px;
}

.upload-header .desktop-app i {
    font-size: 12px;
    margin-left: 3px;
}

.choose-files {
    text-align: center;
    margin: 20px 0;
}

.choose-btn {
    background: #d97900;
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.choose-btn:hover {
    background: #bf6c00;
}

.drop-text {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
}

.terms {
    font-size: 12px;
    color: #333;
}

.terms span {
    color: #c62828;
}

.upload-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.protection {
    font-size: 14px;
    color: #333;
}

.protection i {
    color: green;
    margin-right: 5px;
}

.icons {
    display: flex;
    gap: 10px;
}

.icons .icon {
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icons .icon:hover {
    transform: scale(1.1);
}

@keyframes passing-through {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }
}

.dropzone,
.dropzone * {
    box-sizing: border-box;
}

.dropzone {
    min-height: 230px;
    padding: 15px 15px;
    text-align: center;
    position: relative;
    border: 2px dashed #0078d5;
    border-color: var(--theme-dropzone-border-color, #0078d5);
    background-color: #fff7d6;
    background-color: var(--theme-dropzone-bg-color, #fff7d6);
}

.dropzone:not(.dz-started):not(.no-shadow) {
    box-shadow: 0 0 0 10px #fffce5;
    box-shadow: 0 0 0 10px var(--theme-dropzone-bg-color, #fffce5);
}

.dropzone+.dropzone {
    margin-top: 30px;
}

.dropzone.dz-clickable {
    cursor: pointer;
}

.dropzone.dz-clickable>.lowerLeft,
.dropzone.dz-clickable>.lowerRight,
.dropzone.dz-clickable>.upperLeft,
.dropzone.dz-clickable>.uperRight {
    cursor: default;
}

.dropzone.dz-started {
    background-image: none;
}

.dropzone.dz-started .dz-message {
    display: none;
}

.dropzone .dz-message {
    text-align: center;
    font-weight: 400;
    font-size: 24px;
    margin: 1em 0;
}

.dropzone .dz-previews {
    cursor: pointer;
}

.dropzone .dz-preview {
    width: 150px;
}

.dropzone .dz-preview .dz-image {
    width: 150px;
    height: 150px;
}

/* @media (max-width: 500px) {
    .dropzone .dz-preview {
        width: 135px;
    }

    .dropzone .dz-preview .dz-image {
        width: 135px;
    }
} */

.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    user-select: none;
    background-color: transparent;
    background-color: var(--theme-dropzone-preview-bg-color, transparent);
    background: transparent;
    background: var(--theme-dropzone-preview-bg, transparent);
}

.dropzone .dz-preview:hover {
    z-index: 1000;
}

.dropzone .dz-preview:not(.dz-image-preview) .dz-image img {
    display: none;
}

.dropzone .dz-preview.dz-complete.dz-file-preview .dz-details {
    opacity: 1;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
    transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    opacity: 0;
    font-size: 13px;
    padding: 0 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    color: var(--theme-dropzone-preview-details-color, rgba(0, 0, 0, 0.9));
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dropzone:not(.sorting) .dz-preview.dz-image-hover .dz-details {
    opacity: 1;
}

.dropzone .dz-preview .dz-details .dz-size,
.dropzone .dz-preview .dz-details .dz-pages,
.dropzone .dz-preview .dz-details .dz-extension {
    font-size: 14px;
    white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-size strong {
    font-weight: normal;
}

.dropzone .dz-preview .dz-filename {
    white-space: nowrap;
    font-size: 12px;
    margin: 5px 0;
    text-align: center;
    width: 100%;
}

.dropzone .dz-preview .dz-filename:hover span {
    padding: 3px;
    border: 1px solid #c8c8c8;
    border: var(--theme-dropzone-preview-filename-hover-border,
            1px solid #c8c8c8);
    background-color: #fff;
    background-color: var(--theme-dropzone-preview-filename-hover-bg-color, #fff);
}

.dropzone .dz-preview .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-filename:not(:hover) span {
    border: 1px solid transparent;
    padding: 3px;
}

.dropzone .dz-preview .dz-details .dz-pages span,
.dropzone .dz-preview .dz-details .dz-size span,
.dropzone .dz-preview .dz-details .dz-extension span {
    padding: 0.2em 0.4em;
    background-color: rgba(255, 255, 255, 0.9);
}

.dropzone .dz-preview .dz-image {
    overflow: hidden;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-color: var(--theme-dropzone-preview-image-box-border-color, #ddd);
    background-color: #f0f0f0;
    background-color: var(--theme-dropzone-preview-image-box-bg-color, #f0f0f0);
}

.dropzone:not(.sorting) .dz-preview .dz-image:hover {
    background-color: var(--theme-dropzone-preview-image-box-hover-bg-color,
            var(--theme-dropzone-preview-image-box-bg-color, #bbb));
}

.dropzone:not(.sorting) .dz-preview .dz-image:hover img {
    opacity: 0.3;
}

.dropzone .dz-preview.sortable-chosen .dz-image {
    background-color: #c8e1f3;
    background-color: var(--theme-dropzone-preview-image-sortable-chosen-bg-color,
            #c8e1f3);
}

.dropzone .dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    box-shadow: 0 0 5px rgb(0 0 0 / 25%);
    box-shadow: var(--theme-dropzone-preview-image-shadow,
            0 0 5px rgb(0 0 0 / 25%));
    border: 1px solid #e0e0e0;
    border: var(--theme-dropzone-preview-image-border, 1px solid #e0e0e0);
    pointer-events: none;
}

.dropzone .dz-preview[data-rotate="90"] .dz-image img {
    transform: rotate(90deg);
}

.dropzone .dz-preview[data-rotate="180"] .dz-image img {
    transform: rotate(180deg);
}

.dropzone .dz-preview[data-rotate="270"] .dz-image img {
    transform: rotate(270deg);
}

.dropzone .dz-preview.dz-success:not(.sortable-sorted) .dz-success-mark {
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation-iteration-count: 1;
}

.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 20px;
    left: 50%;
    top: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    background: #f7f7f7;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dotted #ccc;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    display: block;
    background: #e3c549;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width 300ms ease-in-out;
}

.dropzone .dz-preview .dz-progress .dz-upload-text {
    position: relative;
    left: 0;
    top: 0;
    font-size: 11px;
    font-weight: 500;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    font-size: 10px;
    bottom: 26px;
    left: -8px;
    width: calc(100% + 16px);
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em;
    color: #fff;
    color: var(--theme-dropzone-preview-error-color, white);
}

.dropzone:not(.listView) .dz-preview.dz-processing:not(.dz-complete) .dz-details .dz-size {
    display: none;
}

.dropzone:not(.listView) .dz-preview.dz-error .dz-details {
    display: none;
}

.dropzone .dz-tools {
    font-size: 15px;
    white-space: nowrap;
    padding: 3px 0;
    display: flex;
    justify-content: center;
    gap: 0.25em;
}

.dropzone .dz-tools [class*="icon-"] {
    color: #31759f;
    color: var(--theme-dropzone-file-tools-color, #31759f);
    cursor: pointer;
    padding: 3px 2px;
}

.dropzone .dz-tools [class*="icon-"]:hover {
    background-color: #e5f2fc;
    background-color: var(--theme-dropzone-file-tools-hover-bg-color, #e5f2fc);
}

.dropzone .dz-tools .dz-remove {
    color: #c05353;
    margin-left: auto;
}

[dir="rtl"] .dropzone .dz-tools .dz-remove {
    margin-left: 0;
    margin-right: auto;
}

.dropzone .dz-tools .icon-ccw,
.dropzone .dz-tools .icon-cw {
    color: #8b568c;
}

.dropzone.listView .fileInfo {
    margin-bottom: 30px;
}

.dropzone.listView .dz-preview {
    position: relative;
    vertical-align: top;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;
    min-height: 58px;
    border: 1px solid #f0f0f0;
    border-color: var(--theme-dropzone-list-view-preview-border-color, #f0f0f0);
    background-color: #fff;
    background-color: var(--theme-dropzone-list-view-preview-bg-color, #fff);
}

.dropzone.listView .dz-preview .dz-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 0 solid #ddd;
    border-color: var(--theme-dropzone-list-view-preview-image-border-color,
            #ddd);
}

.dropzone.listView .dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100%;
}

.dropzone.listView .dz-preview .dz-details {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 20;
    font-size: 15px;
    min-width: 100px;
    max-width: 100%;
    padding: 5px;
    text-align: start;
    line-height: 100%;
    flex-grow: 1;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    color: rgba(0, 0, 0, 1);
    color: var(--theme-dropzone-list-view-preview-details-color,
            rgba(0, 0, 0, 1));
    transform: none;
}

.dropzone.listView .dz-preview .dz-filename {
    font-size: 16px;
    margin: 0;
    display: inline-block;
    padding: 3px 5px 3px 10px;
    flex-grow: 1;
    text-align: start;
}

.dropzone.listView .dz-preview .dz-details .dz-size span,
.dropzone.listView .dz-preview .dz-details .dz-size:hover span,
.dropzone.listView .dz-preview .dz-details .dz-pages span,
.dropzone.listView .dz-preview .dz-details .dz-pages:hover span,
.dropzone.listView .dz-preview .dz-details .dz-extension span,
.dropzone.listView .dz-preview .dz-details .dz-extension:hover span,
.dropzone.listView .dz-preview .dz-filename span,
.dropzone.listView .dz-preview .dz-filename:hover span {
    border: 1px solid transparent;
    background-color: transparent !important;
}

.dropzone.listView .dz-preview .dz-details .dz-size,
.dropzone.listView .dz-preview .dz-details .dz-pages,
.dropzone.listView .dz-preview .dz-details .dz-extension {
    font-size: 14px;
    margin: 0;
    display: inline-block;
    padding: 3px 5px 3px 10px;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

/* @media (max-width: 500px) {

    .dropzone.listView .dz-preview .dz-details .dz-size,
    .dropzone.listView .dz-preview .dz-details .dz-pages,
    .dropzone.listView .dz-preview .dz-details .dz-extension {
        display: none;
    }
} */

.dropzone.listView .dz-preview .dz-details .dz-size strong {
    font-weight: normal;
}

.dropzone.listView .dz-preview .dz-error-mark {
    display: none;
}

.dropzone.listView .dz-preview.sortable-chosen {
    background-color: #f0f0f0;
    background-color: var(--theme-dropzone-list-view-preview-sortable-chosen-bg-color,
            #f0f0f0);
}

.dropzone.listView .dz-preview .dz-error-message {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.25em;
}

.dropzone .dz-message {
    display: flex;
    flex-direction: column;
    min-height: 130px;
    justify-content: center;
}

.dropzone .dz-message .info {
    margin-bottom: 20px;
}

.dropzone .dz-message .note {
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
}

.dropzone .dz-message .note.terms {
    font-size: 12px;
}

.dropzone .dz-message .chooseFile {
    font-size: 30px;
    font-weight: 500;
    font-family: system-ui, arial;
    text-decoration: none;
    color: #0078d5;
    color: var(--theme-dropzone-message-choose-file-color, #0078d5);
    display: flex;
    justify-content: center;
}

.dropzone .dz-message .chooseFile .btn {
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 28px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
}

.dropzone.sortable .dz-preview {
    cursor: move;
}

.dropzone.sortable .dz-preview .dz-tools {
    cursor: default;
}

.dropzone:not(.dz-started).hasUpperLeft,
.dropzone:not(.dz-started).hasUpperRight {
    padding-top: 30px;
}

.dropzone.hasLowerLeft,
.dropzone.hasLowerRight {
    padding-bottom: 50px;
}

.dropzone.listView.hasLowerLeft,
.dropzone.listView.hasLowerRight {
    padding-bottom: 60px;
}

.dropzone .lowerRight {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

[dir="rtl"] .dropzone .lowerRight {
    left: 5px;
    right: auto;
}

.dropzone .lowerLeft {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    direction: ltr;
}

[dir="rtl"] .dropzone .lowerLeft {
    right: 5px;
    left: auto;
}

.dropzone .upperLeft {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

[dir="rtl"] .dropzone .upperLeft {
    right: 5px;
    left: auto;
}

.dropzone .upperRight {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

[dir="rtl"] .dropzone .upperRight {
    left: 5px;
    right: auto;
}

.dropzone .importTools {
    display: inline-block;
    position: relative;
}

.dropzone .importTools .tools {
    display: flex;
    align-items: center;
}

.dropzone .importTools .tools .tool {
    cursor: pointer;
    display: inline-block;
    font-size: 26px;
    color: #0078d5;
    color: var(--theme-dropzone-import-tools-color, #0078d5);
}

.dropzone .importTools .tools .tool * {
    cursor: pointer;
}

.dropzone .importTools .tools .tool:hover {
    background-color: #e5f2fc;
    background-color: var(--theme-dropzone-import-tools-hover-bg-color, #e5f2fc);
}

.dropzone .importTools .tools .tool svg {
    max-width: 30px;
    height: 30px;
}

.dropzone .importTools .tools .spacer {
    margin: 0 3px;
    width: 1px;
    height: 20px;
    background-color: silver;
}

.dropzone .importTools .tools .moreToolsOpener {
    font-size: 14px;
    padding: 6px 5px;
}

[dir="rtl"] .dropzone .importTools .tools .moreToolsOpener {
    transform: scaleX(-1);
}

.dropzone .importTools .filesystemImport::before {
    position: relative;
    left: 0;
    top: -1px;
}

.dropzone .importTools .moreImportTools {
    position: absolute;
    right: 80px;
    bottom: 0;
}

[dir="rtl"] .dropzone .importTools .moreImportTools {
    left: 80px;
    right: auto;
}

.dropzone .importTools .moreImportTools .tools {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dropzone .fileInfo {
    display: none;
    pointer-events: none;
    opacity: 0.75;
    font-size: 11pt;
    margin-bottom: 15px;
}

.dropzone.dz-started .fileInfo {
    display: block;
}

.dropzone .fileTools {
    pointer-events: none;
}

.dropzone .fileTools .fileTool {
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    color: inherit;
    pointer-events: auto;
}

.dropzone .fileTools .fileTool:hover {
    background-color: #eee;
    background-color: var(--theme-dropzone-file-tool-hover-bg-color, #eee);
}

.dropzone .fileTools .fileTool * {
    vertical-align: middle;
    cursor: pointer;
}

.dropzone .fileTools .fileTool img {
    max-height: 20px;
}

.dropzone.scrollable {
    overflow-y: auto;
    height: 250px;
}

.dropzone.scrollable.hasLowerLeft,
.dropzone.scrollable.hasLowerRight {
    height: 280px;
    padding-bottom: 30px;
}

.dropzone .fileSecuritySign {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px;
}

.dropzone .fileSecuritySign .info {
    font-size: 14px;
}

.dropzone .hiddenFileSecuritySignInfo .fileSecuritySign .info,
.dropzone.dz-started .fileSecuritySign .info {
    display: none;
}

/* @media (max-width: 500px) {
    .dropzone .fileSecuritySign .info {
        display: none;
    }
} */

.dropzone .viewSelect {
    display: inline-flex;
    align-items: center;
    margin: 3px;
    vertical-align: middle;
    color: #666;
    color: var(--theme-dropzone-view-select-color, #666);
}

.dropzone:not(.dz-started) .viewSelect {
    display: none;
}

.dropzone .viewSelect>* {
    display: inline-block;
    font-size: 22px;
}

.dropzone .viewSelect * {
    cursor: pointer;
}

.dropzone:not(.listView) .viewSelect .gridView {
    display: none;
}

.dropzone.listView .viewSelect .listView {
    display: none;
}

.dropzone .sortTools {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 3px;
    vertical-align: middle;
    font-size: 0;
    color: #666;
    color: var(--theme-dropzone-sort-tools-color, #666);
}

.dropzone:not(.dz-started) .sortTools {
    display: none;
}

.dropzone .sortTools>* {
    display: inline-block;
    font-size: 18px;
    margin-right: 5px;
}

.dropzone .sortTools * {
    cursor: pointer;
}

.dropzone .ratingView {
    display: inline-flex;
    align-items: center;
    position: relative;
    left: -1px;
}

.dropzone .ratingView .content {
    display: flex;
    align-items: center;
}

.dropzone .ratingView .star {
    font-size: 22px;
    color: #e7a81b;
    color: var(--theme-dropzone-rating-star-color, #e7a81b);
    position: relative;
    left: 0;
    top: -1px;
}

.dropzone .ratingView .value {
    margin-right: 5px;
    font-size: 15px;
}

[dir="rtl"] .dropzone .ratingView .value {
    margin-right: 0;
    margin-left: 5px;
}

.dropzone .ratingView .votes {
    font-size: 0.8em;
    color: #333;
    color: var(--theme-dropzone-rating-votes-color, #333);
}

.dropzone.dz-started .ratingView {
    display: none;
}

/* @media (max-width: 500px) {
    .dropzone .ratingView {
        display: none;
    }
} */

.dropzone.importing .dz-message {
    visibility: hidden;
}

.dropzone.importing::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/squares.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 30%;
}

.dropzone.immutable .importTools,
.dropzone.immutable .dz-remove {
    display: none;
}

.dropzone.dz-started .notStarted {
    display: none;
}

.dropzone .desktopVersionLink a {
    font-size: 14px;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dropzone .desktopVersionLink a .text {
    font-size: 14px;
    position: relative;
    top: -1px;
}

.dropzone.dz-started .desktopVersionLink {
    display: none;
}

/* @media (max-width: 500px) {
    .dropzone .desktopVersionLink {
        display: none;
    }
} */

.dropzone.dz-drag-hover:not(.sorting)>* {
    opacity: 0.5;
}

.dropzone.dz-drag-hover:not(.sorting) * {
    pointer-events: none;
}

.dropzone.dz-drag-hover:not(.sorting) {
    border-style: solid;
    overflow: hidden;
}

.dropzone .dz-drag-hover-message {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 32px;
    pointer-events: none;
    z-index: 999;
    color: #ccc;
    color: var(--theme-dropzone-drag-hover-color, #ccc);
    background-color: #444;
    background-color: var(--theme-dropzone-drag-hover-bg-color, #444);
}

.dropzone.hasDragHoverMessage.dz-drag-hover:not(.sorting)>*:not(.dz-drag-hover-message) {
    visibility: hidden;
}

.dropzone.hasDragHoverMessage.dz-drag-hover:not(.sorting) .dz-drag-hover-message {
    display: flex;
    opacity: 1;
}

body.hasLayerWindow {
    overflow: hidden;
}

.layerWindowWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    overflow: auto;
}

.layerWindow {
    position: relative;
    text-align: left;
    border: 0 none;
    margin: 0;
    padding: 0;
    color: #000;
    border: 1px solid #555;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
    margin: auto;
    max-width: 100%;
    flex: 0 1 auto;
    display: flex;
    box-sizing: border-box;
}

.layerWindow a {
    color: #0048b2;
}

.layerWindowTitle {
    padding: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: left;
}

.layerWindowClose {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    font-family: sans-serif;
    font-size: 28px;
    color: #555;
    cursor: pointer;
    display: flex;
    z-index: 1;
}

.layerWindowClose svg {
    width: 24px;
    height: 24px;
    fill: #555;
}

.layerWindowClose:hover {
    background-color: #f0f0f0;
}

.layerWindowBody {
    color: #000;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 1 auto;
}

.layerWindowBody.noTitle {
    margin: 10px;
}

/* @keyframes : focus {
    outline: none;
} */

html,
body {
    margin: 0;
    padding: 0;
    color: #000;
    border: 0 none;
    min-width: 360px;
    font-family: system-ui, arial, sans-serif;
    letter-spacing: 0.02em;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

html {
    height: 100%;
    overflow-y: scroll;
}

body {
    min-height: 100%;
    color: #000;
    color: var(--theme-body-color, #000);
    background-color: #fff;
    background-color: var(--theme-body-bg-color, #fff);
    text-align: center;
}

[dir="rtl"] {
    direction: rtl;
}

[dir="ltr"] {
    direction: ltr;
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.25em;
    font-weight: 700;
    margin-bottom: 15px;
}

h2 {
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 15px;
}

h3 {
    font-size: 1em;
    font-weight: 700;
}

h1+h2 {
    margin-top: -5px;
    font-size: 1.2em;
    color: inherit;
    color: var(--theme-subtitle-color, inherit);
}

a,
a:visited,
span.link {
    text-decoration: none;
    cursor: pointer !important;
    color: #900000;
    color: var(--theme-link-color, #900000);
}

a:hover:not(.btn):not(.noHover),
span.link:hover {
    text-decoration: none;
    color: red;
    color: var(--theme-link-hover-color, red);
}

a.larger,
span.link.larger {
    font-size: 1.2em;
}

a.underline,
span.link.underline {
    text-decoration: underline;
}

a.plus::before,
span.link.plus::before {
    content: "+ ";
    font-size: 0.8em;
    white-space: nowrap;
}

a.plus::after,
span.link.plus::after {
    content: " +";
    font-size: 0.8em;
    white-space: nowrap;
}

a.saquo::before,
span.link.saquo::before {
    content: "› ";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

a.saquo::after,
span.link.saquo::after {
    content: " ‹";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

a.raquo::before,
span.link.raquo::before {
    content: "» ";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

a.rightArrow::after,
span.link.rightArrow::after {
    content: " →";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

img {
    max-width: 100%;
    box-sizing: border-box;
    border: 0 none;
    height: auto;
}

img:not([src]),
img[src=""] {
    border: 0 none;
    box-sizing: border-box;
    background-color: #eee;
    overflow: hidden;
    background-color: var(--theme-no-src-bg-color, #eee);
}

iframe {
    max-width: 100%;
    box-sizing: border-box;
    border: 0 none;
}

iframe:not([src]),
iframe[src=""] {
    box-sizing: border-box;
    background-color: #eee;
    background-color: var(--theme-no-src-bg-color, #eee);
}

iframe.video169 {
    max-width: 100%;
    max-height: calc(100vw * 9 / 16);
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.disc {
    list-style: disc outside;
    padding-left: 1.1em;
}

[dir="rtl"] ul.disc.smaller {
    padding-left: 0;
    padding-right: 1.1em;
}

ul.smaller {
    font-size: smaller;
}

button,
[onclick] {
    cursor: pointer;
}

.noUserSelect,
img {
    user-select: none;
}

.hidden,
.template {
    display: none !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(100%);
}

.enableOnDocReady {
    pointer-events: none;
}

.showOnDocReady {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}

.errorBox {
    padding: 5px;
    border: 2px solid red;
}

.okBox {
    padding: 5px;
    border: 2px solid green;
}

.inputError,
.formElementError {
    border-color: red;
    border-style: dashed;
}

.round10 {
    border-radius: 10px;
}

.round5 {
    border-radius: 5px;
}

.middle {
    vertical-align: middle;
}

.middleAll * {
    vertical-align: middle;
}

.clickable:hover {
    cursor: pointer;
}

.clear {
    float: none;
    clear: both;
}

.clearfix::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.ib {
    display: inline-block;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.textLeft,
.tl {
    text-align: left !important;
}

[dir="rtl"] .textLeft,
[dir="rtl"] .tl {
    text-align: right !important;
}

.textCenter,
.tc {
    text-align: center !important;
}

.textRight,
.tr {
    text-align: right !important;
}

[dir="rtl"] .textRight,
[dir="rtl"] .tr {
    text-align: left !important;
}

.emoji {
    font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
        "Segoe UI Symbol";
}

.fhl {
    display: flex;
    justify-content: center;
}

.fhc {
    display: flex;
    justify-content: center;
}

.fhr {
    display: flex;
    justify-content: flex-end;
}

.fvt {
    display: flex;
    align-items: flex-start;
}

.fvm {
    display: flex;
    align-items: center;
}

.fvb {
    display: flex;
    align-items: flex-end;
}

.singleLine {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mt0 {
    margin-top: 0 !important;
}

.mt05 {
    margin-top: 0.5em !important;
}

.mt1 {
    margin-top: 1em !important;
}

.mt2 {
    margin-top: 2em !important;
}

.mt3 {
    margin-top: 3em !important;
}

.mt4 {
    margin-top: 4em !important;
}

.mt5 {
    margin-top: 5em !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb05 {
    margin-bottom: 0.5em !important;
}

.mb1 {
    margin-bottom: 1em !important;
}

.mb2 {
    margin-bottom: 2em !important;
}

.mb3 {
    margin-bottom: 3em !important;
}

.mb4 {
    margin-bottom: 4em !important;
}

.mb5 {
    margin-bottom: 5em !important;
}

.mr0 {
    margin-right: 0 !important;
}

.mr05 {
    margin-right: 0.5em !important;
}

.mr1 {
    margin-right: 1em !important;
}

.mr2 {
    margin-right: 2em !important;
}

.mr3 {
    margin-right: 3em !important;
}

.mr4 {
    margin-right: 4em !important;
}

.mr5 {
    margin-right: 5em !important;
}

.ml0 {
    margin-left: 0 !important;
}

.ml05 {
    margin-left: 0.5em !important;
}

.ml1 {
    margin-left: 1em !important;
}

.ml2 {
    margin-left: 2em !important;
}

.ml3 {
    margin-left: 3em !important;
}

.ml4 {
    margin-left: 4em !important;
}

.ml5 {
    margin-left: 5em !important;
}

.m0 {
    margin: 0 !important;
}

.m05 {
    margin: 0.5em !important;
}

.m1 {
    margin: 1em !important;
}

.m2 {
    margin: 2em !important;
}

.m3 {
    margin: 3em !important;
}

.m4 {
    margin: 4em !important;
}

.m5 {
    margin: 5em !important;
}

.nhm1px {
    margin-left: -1px;
    margin-right: -1px;
}

.nhm2px {
    margin-left: -2px;
    margin-right: -2px;
}

.pt0 {
    padding-top: 0 !important;
}

.pt05 {
    padding-top: 0.5em !important;
}

.pt1 {
    padding-top: 1em !important;
}

.pt2 {
    padding-top: 2em !important;
}

.pt3 {
    padding-top: 3em !important;
}

.pt4 {
    padding-top: 4em !important;
}

.pt5 {
    padding-top: 5em !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb05 {
    padding-bottom: 0.5em !important;
}

.pb1 {
    padding-bottom: 1em !important;
}

.pb2 {
    padding-bottom: 2em !important;
}

.pb3 {
    padding-bottom: 3em !important;
}

.pb4 {
    padding-bottom: 4em !important;
}

.pb5 {
    padding-bottom: 5em !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pr05 {
    padding-right: 0.5em !important;
}

.pr1 {
    padding-right: 1em !important;
}

.pr2 {
    padding-right: 2em !important;
}

.pr3 {
    padding-right: 3em !important;
}

.pr4 {
    padding-right: 4em !important;
}

.pr5 {
    padding-right: 5em !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl05 {
    padding-left: 0.5em !important;
}

.pl1 {
    padding-left: 1em !important;
}

.pl2 {
    padding-left: 2em !important;
}

.pl3 {
    padding-left: 3em !important;
}

.pl4 {
    padding-left: 4em !important;
}

.pl5 {
    padding-left: 5em !important;
}

.p0 {
    padding: 0 !important;
}

.p05 {
    padding: 0.5em !important;
}

.p1 {
    padding: 1em !important;
}

.p2 {
    padding: 2em !important;
}

.p3 {
    padding: 3em !important;
}

.p4 {
    padding: 4em !important;
}

.p5 {
    padding: 5em !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}

.row.nowrap {
    flex-wrap: nowrap;
}

.row.center {
    justify-content: center;
    align-items: center;
}

.row.hcenter {
    justify-content: center;
}

.row.vcenter {
    align-items: center;
}

.col,
[class*="col-"] {
    box-sizing: border-box;
    position: relative;
}

.col-0 {
    display: none;
}

.col-25 {
    width: 25%;
}

.col-33 {
    width: 33.33333333%;
}

.col-50 {
    width: 50%;
}

.col-66 {
    width: 66.66666666%;
}

.col-75 {
    width: 75%;
}

.col-100 {
    width: 100%;
    margin-left: auto;
}


.btn.orange,
.btn.action {
    --btn-color: #d97d0d;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.green {
    --btn-color: #4caf50;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.blue {
    --btn-color: #008cba;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.red {
    --btn-color: #f44336;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.black {
    --btn-color: #444;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.white {
    --btn-color: #fff;
    --btn-text-color: #333;
}

.btn.gray {
    --btn-color: #ccc;
    --btn-text-color: #444;
}

.btn.yellow {
    --btn-color: #f1d600;
    --btn-text-color: #444;
}

.btn.amber {
    --btn-color: #ffbf00;
    --btn-text-color: #444;
}

.btn,
.btn:visited {
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 0 none;
    text-decoration: none;
    font-family: arial, sans-serif;
    font-size: inherit;
    background-color: #d97d0d;
    background-color: var(--btn-color, #d97d0d);
    color: #fff;
    color: var(--btn-text-color, #fff);
    border: 2px solid #d97d0d;
    border: 2px solid var(--btn-color, #d97d0d);
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--btn-text-shadow, none);
    border-radius: 4px;
    gap: 10px;
    user-select: none;
}

.btn svg {
    fill: white;
    fill: var(--btn-text-color);
}

.btn,
.btn * {
    transition-duration: 0s;
}

.btn:hover {
    filter: brightness(0.85);
}

.btn.disabled,
.btn[disabled] {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(100%);
}

.btn.uppercase {
    text-transform: uppercase;
}

.btn.big,
.btn.large {
    font-size: 20px;
}

.btn.bold {
    font-weight: bold;
}

.btn.action {
    font-weight: 500;
    font-size: 20px;
}

.btn.border {
    border-color: #555;
}

.btn.outline:hover {
    filter: none;
}

.btn.outline:not(:hover) {
    background-color: #fff;
    text-shadow: none;
    color: #d97d0d;
    color: var(--btn-color, #d97d0d);
}

.btn.outline:not(:hover) svg {
    fill: #d97d0d;
    fill: var(--btn-color, #d97d0d);
}

.btn.linkLike {
    border: 0 none;
    background-color: transparent;
    text-shadow: none;
    color: #057da4;
}

.btn.linkLike:hover {
    filter: none;
    text-decoration: underline;
}

.btn.round {
    border-radius: 50%;
}

.btn .extInfo {
    font-size: 0.62em;
    position: relative;
    top: 1px;
}

.btn>span {
    white-space: nowrap;
}

.btn.wrappable,
.btn.wrapable {
    flex-wrap: wrap;
}

.toggleBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 1px;
}

.toggleBtn input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    right: 0;
    bottom: 0;
}

.toggleBtn .slider {
    top: 0;
    left: 0;
    width: 45px;
    height: 26px;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ccc;
    background-color: var(--theme-toogle-btn-off-slider-bg-color, #ccc);
}

.toggleBtn,
.toggleBtn * {
    cursor: pointer;
}

.toggleBtn .slider:before {
    content: "";
    height: 22px;
    width: 22px;
    transition: 0.4s;
    margin: 0 2px;
    background-color: #fff;
    background-color: var(--theme-toogle-btn-slider-inner-bg-color, #fff);
}

.toggleBtn input:checked+.slider {
    justify-content: flex-end;
    background-color: #0078d5;
    background-color: var(--theme-toogle-btn-on-slider-bg-color, #0078d5);
}

.toggleBtn .slider.round {
    border-radius: 100px;
}

.toggleBtn .slider.round:before {
    border-radius: 50%;
}

.toggleBtn .label {
    margin: 0 5px;
}

.op075h1 {
    opacity: 0.75 !important;
}

.op075h1:hover {
    opacity: 1 !important;
}

.container {
    width: 1270px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    max-width: 100%;
}

.container.fullWidth {
    width: 100%;
}

.stickyContainer {
    position: relative;
}

#topBar {
    height: 50px;
    width: 100%;
    margin-bottom: 60px;
    padding-top: 3px;
    line-height: 1;
    border-bottom: 2px solid #0078d5;
    border-color: var(--theme-normal-color);
}

#topBar,
#topBar * {
    color: #0078d5;
    color: var(--theme-normal-color);
}

#topBar .container {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

#topBar .leftPane {
    width: calc(50% - 60px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#topBar .centerPane {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

#topBar .rightPane {
    width: calc(50% - 60px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#topBar .logo {
    line-height: 1;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #0078d5;
    border-color: var(--theme-normal-color);
    box-sizing: border-box;
    background-color: #fff;
    background-color: var(--theme-top-bar-logo-bg-color, #fff);
    width: 100px;
    height: 100px;
    display: inline-block;
}

#topBar .logo a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

#topBar .logo img {
    width: 100%;
    height: auto;
}

#topBar .logo:hover {
    box-shadow: 0 0 10px #aaa;
}

#topBar .brand {
    text-align: left;
    vertical-align: middle;
}

#topBar .brand a {
    font-size: 30px;
    font-weight: bold;
}

#topBar .allToolsLink {
    display: inline-flex;
    align-items: center;
    padding-top: 5px;
    gap: 5px;
    margin-left: 20px;
    margin-right: 0;
}

[dir="rtl"] #topBar .allToolsLink {
    margin-left: 0;
    margin-right: 20px;
}


#topBar .allToolsToggle {
    margin-left: 20px;
    cursor: pointer;
}

[dir="rtl"] #topBar .allToolsToggle {
    margin-left: 0;
    margin-right: 20px;
}

#topBar .allToolsToggle::after {
    content: "v";
    display: inline-block;
    margin-left: 5px;
    font-weight: normal;
    transform: scaleX(1.5) scaleY(0.65);
}

[dir="rtl"] #topBar .allToolsToggle::after {
    margin-left: 0;
    margin-right: 5px;
}

#topBar .allToolsToggle.active::after {
    transform: scaleX(1.5) scaleY(0.6) rotate(180deg) translateY(-2px);
}


#topBar .menu {
    text-align: left;
    color: #fff;
    font-weight: bold;
}



#topBar .burger.active {
    transform: rotate(90deg);
}

#topBar .download {
    display: inline-block;
    vertical-align: middle;
    height: 32px;
}



#share {
    font-size: 18px;
    text-align: center;
}

#share img {
    cursor: pointer;
}

#home {
    text-align: center;
}

#home .noLimits {
    margin-bottom: 30px;
}

#tool {
    text-align: center;
    margin-bottom: 70px;
}

#tool .main {
    min-height: 300px;
    margin-bottom: 30px;
}

#tool .noLimits {
    text-align: center;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 20px;
    margin-top: -5px;
    color: inherit;
    color: var(--theme-tool-no-limits-color, inherit);
}



#tool .bottomInfo {
    padding-bottom: 30px;
}

#tool .bottomInfo::before {
    content: "ⓘ";
    font-size: 1.25em;
    display: block;
    margin-top: 20px;
}

#tool .bottomAttention {
    margin-bottom: 30px;
}

#tool .bottomAttention::before {
    content: "⚠️";
    font-size: 1.2em;
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
}

#tool .bottomInfo+.section,
#tool .bottomAttention+.section {
    margin-top: 70px;
}

.infoCells {
    text-align: center;
}

.infoCells .cell {
    width: 30%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: inline-block;
    padding: 8px;
    text-align: center;
    vertical-align: top;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.infoCells .cell h3,
.infoCells .cell .title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: block;
    padding: 10px 0;
}

.infoCells .cell img {
    vertical-align: top;
}

.infoCells .cell p {
    margin: 0;
    line-height: 24px;
    font-weight: 400;
    font-size: 15px;
}

.infoCells:not(.noInfoIcons) .cell::before {
    content: "";
    display: block;
    height: 24px;
    background-image: url(images/info_light.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.infoCells .cell::before svg {
    fill: #999 !important;
}

.infoCells .cell>span[class^="icon-"] {
    font-size: 24px;
    opacity: 0.75;
}



.topBottomNotification {
    display: block;
    padding: 10px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    background-color: #fdf8e4;
    color: #333;
    font-size: 0.9em;
}

.topBottomNotification.fixed,
.topBottomNotification.sticky {
    z-index: 999;
    margin: auto;
    width: 100%;
    left: 0;
}

.topBottomNotification.fixed {
    position: fixed;
}

.topBottomNotification.sticky {
    position: sticky;
}

.topBottomNotification.success {
    background-color: #def0d8;
    color: #007121;
}

.topBottomNotification.warn {
    background-color: #ffe9ce;
    color: #754101;
}

.topBottomNotification.error {
    background-color: #fbd8d8;
    color: #690101;
}

.topBottomNotification.top {
    top: 0;
    border-bottom: 1px solid silver;
    margin-bottom: 20px;
}

.topBottomNotification.bottom {
    bottom: 0;
    border-top: 1px solid silver;
}

.topBottomNotification .text-xl {
    font-size: 1.6em;
}

.topBottomNotification .text-l {
    font-size: 1.2em;
}

.topBottomNotification a:not(.btn),
.topBottomNotification a:not(.btn):hover {
    color: maroon !important;
    text-decoration: underline;
}

.topBottomNotification a.close {
    position: absolute;
    display: block;
    top: 4px;
    right: 2px;
    color: maroon;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
}

.topBottomNotification a.close:hover {
    text-decoration: none;
}

.adBlock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.adText {
    text-align: center;
    font-family: monospace;
    padding: 3px 10px;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1;
    color: #222;
    color: var(--theme-ad-text-color, #222);
    text-transform: uppercase;
    min-width: 140px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--theme-ad-text-bg-color, #004c8e10);
}

.adBlock.mouseOverAdSpace .adText {
    background-color: var(--theme-ad-text-hover-bg-color,
            var(--theme-ad-text-bg-color, #004c8e10));
    color: var(--theme-ad-text-hover-color, var(--theme-ad-text-color, #222));
}

.adSpace {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
    margin: auto;
    max-width: 100%;
}

.adBlock:not(.filled) .adSpace,
.adBlock .adSpace[data-ad-status="unfilled"] {
    box-sizing: border-box;
    background-color: rgba(128, 128, 128, 0.05);
    background-color: var(--theme-no-ad-bg-color, rgba(128, 128, 128, 0.05));
}

.adSpace.d980x250m300x250 {
    width: 980px;
    height: 250px;
}

.adSpace.d970x250m300x250 {
    width: 970px;
    height: 250px;
}

.adSpace.d980x90m336x280,
.adSpace.d980x90m300x250,
.adSpace.d980x90m320x100 {
    width: 980px;
    height: 90px;
}

.adSpace.d970x90m336x280,
.adSpace.d970x90m300x250,
.adSpace.d970x90m320x100 {
    width: 970px;
    height: 90px;
}

.adSpace.d728x90m336x280,
.adSpace.d728x90m300x250,
.adSpace.d728x90m320x100 {
    width: 728px;
    height: 90px;
}


input,
select,
textarea {
    border: 1px solid #ccc;
    border-color: var(--theme-input-border-color, #ccc);
    background-color: #fff;
    background-color: var(--theme-input-bg-color, #fff);
    color: #000;
    color: var(--theme-input-color, #000);
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: #aaa;
    color: var(--theme-input-placeholder-color, #aaa);
}

input {
    font-size: 0.9em;
    padding: 2px;
    min-height: 24px;
    box-sizing: border-box;
}

input.glow {
    border: solid 2px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input.glow:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0059a2;
    accent-color: var(--theme-check-accent-color, #0059a2);
}

input:disabled {
    background-color: var(--theme-input-disabled-bg-color, #f5f5f5);
    opacity: 0.5;
}

select {
    min-height: 24px;
    font-size: 1em;
    box-sizing: border-box;
}

option[disabled] {
    opacity: 0.4;
}

.inputFieldWithUnitWrapper {
    display: flex;
    white-space: nowrap;
}

.inputFieldUnit {
    border: 1px solid #ccc;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0 none;
    border-color: var(--theme-input-unit-border-color, #ccc);
    background-color: var(--theme-input-unit-bg-color, #eee);
    font-size: 0.85em;
    font-family: Arial, Helvetica, sans-serif;
}

.note.terms {
    font-size: 13px;
    font-weight: 400;
}

.inputZone {
    border: 2px dashed #0078d5;
    border-color: var(--theme-input-zone-border-color, #0078d5);
    background-color: #fffce5;
    background-color: var(--theme-input-zone-bg-color, #fffce5);
    padding: 50px 20px;
    text-align: center;
}

.inputZone .title {
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 15px;
}

.pdfLoadZone {
    border: 1px solid #6d93a5;
    padding: 15px 7px;
    text-align: center;
    margin: 30px 0;
}

.pdfLoadZone>.tools {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdfLoadZone>.tools [class*="icon-"] {
    font-size: 1.4em;
    margin: 5px 5px;
    color: #666;
    color: var(--theme-pdf-load-zone-tool-color, #666);
}

.pdfLoadZone>.tools .textBtn {
    font-size: 1.1em;
    display: inline-block;
    padding: 2px;
    margin: 5px 5px;
    color: #333;
    color: var(--theme-pdf-load-zone-tool-color, #333);
}

.pdfLoadZone>.tools [class*="icon-"]:hover,
.pdfLoadZone>.tools .textBtn:hover {
    color: #0078d5;
    color: var(--theme-pdf-load-zone-tool-hover-color,
            var(--theme-normal-color, #0078d5));
}

.pdfLoadZone>.sep {
    height: 1px;
    margin: 20px 0;
    background-color: #ddd;
    background-color: var(--theme-pdf-load-zone-sep-color, #ddd);
}

.pdfLoadZone>.note {
    margin-bottom: 20px;
}

.pdfLoadZone>.note+.pdfFile,
.pdfLoadZone>.sep+.pdfFile {
    margin-top: -20px;
}

.pdfLoadZone .pdfFile+.pdfFile {
    border-top: 1px solid #ddd;
    border-top: 1px solid var(--theme-pdf-load-zone-sep-color, #ddd);
}

.pdfTargetZone {
    margin-top: 5px;
    border: 1px solid #49626d;
    padding: 15px 7px;
    text-align: center;
    margin: 30px 0;
}

.pdfTargetZone .note {
    margin-bottom: 20px;
}

.resultZone {
    margin-top: 5px;
    border: 1px solid #6d93a5;
    padding: 7px;
    text-align: center;
    margin: 30px 0;
}

.resultZone .tools * {
    vertical-align: middle;
}

.workerZone {
    margin-top: 30px;
    border: 1px solid #1aaa16;
    border-color: var(--theme-worker-zone-border-color, #1aaa16);
    display: flex;
    flex-direction: column;
    box-sizing: content-box;
    overflow-x: hidden;
    position: relative;
}

.workerZone .info {
    padding: 5px;
    font-size: 0.85em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #efe;
    background-color: var(--theme-worker-zone-info-bg-color, #efe);
    color: #555;
    color: var(--theme-worker-zone-info-color, #555);
}

.workerZone .info .key {
    color: #555;
    color: var(--theme-worker-zone-info-key-color, #555);
}

.workerZone .info .value {
    color: navy;
    color: var(--theme-worker-zone-info-value-color, navy);
}

.workerZone .content {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 330px;
}

.workerZone iframe.workerFrame {
    display: block;
    border: 0 none;
    flex: 1 1 auto;
    min-height: 330px;
}

.workerZone .loader {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #999;
    box-shadow: 32px 0 #999, -32px 0 #999;
    animation: workerZone-loader 0.5s ease-out infinite alternate;
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
}

@keyframes workerZone-loader {
    0% {
        background-color: #9992;
        box-shadow: 32px 0 #9992, -32px 0 #999;
    }

    50% {
        background-color: #999;
        box-shadow: 32px 0 #9992, -32px 0 #9992;
    }

    100% {
        background-color: #9992;
        box-shadow: 32px 0 #999, -32px 0 #9992;
    }
}

.workerZone .error {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    align-items: center;
    color: var(--theme-workerZone-error-color, #c05353);
    font-size: 1.1em;
}

.workerZone .error .xhrError .code {
    font-weight: bold;
}

#form {
    padding: 1px 0;
}

#form.stickyTop {
    position: sticky;
    top: -1px;
    background-color: #fff;
    background-color: var(--theme-body-bg-color, #fff);
}

#form.stickyTop.stuck {
    border-bottom: 1px solid #ccc;
    z-index: 99;
}

#form.stickyBottom {
    position: sticky;
    bottom: -1px;
    background-color: #fff;
    background-color: var(--theme-body-bg-color, #fff);
    border-top: 1px solid transparent;
    z-index: 99;
}

#form.stickyBottom.stuck {
    border-top-color: #ccc;
}

#params {
    background-color: #fff;
    background-color: var(--theme-params-bg-color, #fff);
    border: 1px solid #ddd;
    border-color: var(--theme-params-border-color, #ddd);
    padding: 3px 0;
    margin: 3px 0;
    font-size: 0.9em;
    min-height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
}

[dir="rtl"] #params {
    text-align: right;
}

#params [class^="icon-"] {
    font-size: 20px;
}

#params .toggleBtn .slider {
    width: 36px;
    height: 20px;
}

#params .toggleBtn .slider:before {
    width: 17px;
    height: 17px;
}

#params .param {
    box-sizing: border-box;
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
    align-items: center;
    margin: 0;
    padding: 3px 5px;
    border: 2px solid transparent;
}

#params .param input[type="checkbox"] {
    margin: 0;
}

#params .param.flex {
    display: inline-flex;
}

#params .param label {
    overflow: hidden;
    text-overflow: ellipsis;
}

#params .toggleIcon {
    font-size: 15px;
    padding: 3px 2px;
    cursor: pointer;
}

#params .toggleIcon:hover {
    background-color: var(--theme-params-toggle-icon-hover-bg-color, #f5f5f5);
}

#params .toggleIcon.checked {
    background-color: var(--theme-params-toggle-icon-checked-bg-color, #ddd);
}

#params .flexBreak {
    display: none;
    flex-basis: 100%;
    height: 0;
}

#form.inline #params .flexBreak {
    display: none !important;
}

#params .ms-options-wrap>button {
    background-color: #fff;
    background-color: var(--theme-input-bg-color, #fff);
    color: #999;
    color: var(--theme-input-placeholder-color, #999);
    border: 1px solid #ccc;
    border-color: var(--theme-input-border-color, #ccc);
}

#params .ms-options-wrap.ms-has-selections>button {
    color: #333;
    color: var(--theme-input-color, #333);
}

#params .ms-options {
    background-color: #fff;
    background-color: var(--theme-params-ms-options-bg-color, #fff);
    color: #333;
    color: var(--theme-params-ms-options-color, #333);
}

#params .ms-options label:hover {
    background-color: #efefef;
    background-color: var(--theme-params-ms-options-item-hover-bg-color, #efefef);
}

#params .ms-options li.selected label {
    background-color: #efefef;
    background-color: var(--theme-params-ms-options-selected-item-hover-bg-color,
            #efefef);
}

#actionButtons {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#actionButtons .btn {
    font-size: 24px;
    margin: 0;
    min-height: 44px;
}

#actionButtons.stickyBottom {
    position: sticky;
    bottom: 3px;
    z-index: 100;
}

#form.stickyBottom #actionButtons,
#form.stickyTop #actionButtons {
    margin-top: 3px;
}

#form:not(.inline) #actionButtons .btn {
    border-radius: 24px;
    padding: 10px 20px;
    font-size: 24px;
    min-width: 250px;
    line-height: 1;
    font-weight: 500;
}

#form.autoInline.inline {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

#form.autoInline.inline #actionButtons {
    margin: 2px 0;
}



#pdfLoadZone+#form #actionButtons {
    margin-top: 3px;
}

#form.centered #params {
    margin: 20px 0 20px 0;
    padding: 8px 0;
    justify-content: center;
    border-style: solid;
    border-width: 1px;
}



#form.centered #params input,
#form.centered #params select {
    min-height: 26px;
    font-size: 14px;
}

#form.centered #params.scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
}

#form.centered #params.scrollable .param {
    padding: 3px;
}

#form.centered #actionButtons {
    flex-direction: column;
    gap: 5px;
}

#dropzoneUploadIndicator {
    font-size: 12px;
    min-width: 350px;
    display: flex;
    min-height: 18px;
    justify-content: center;
    align-items: center;
}

#footer {
    text-align: center;
    padding: 20px 0;
    background-color: #fcfcfc;
    background-color: var(--theme-footer-bg-color, #fcfcfc);
    border-top: 1px solid #f3f3f3;
    border-top: var(--theme-footer-border-top, 1px solid #f3f3f3);
    margin-top: 70px;
}

#footerLinks {
    margin-bottom: 20px;
}

#footerSocialLang {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

#footerUrl {
    margin-top: 20px;
}

#footerNote {
    margin-top: 30px;
    color: #666;
    color: var(--theme-footer-color, #666);
    font-size: 0.85em;
}

#footerNote .love {
    font-size: 0;
}

#footerNote .love::after {
    content: "❤️";
    font-size: 16px;
    color: red;
}

#footerSocial {
    display: flex;
    gap: 10px;
    justify-content: center;
}

#footerSocial a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}



#footer .spacer {
    padding: 0 5px 0 5px;
}

#footerLinks a,
#footerLinks span.link {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9em;
    box-sizing: border-box;
}

#footer .bordered {
    border: 1px solid #d0d0d0;
}

#footer .slogan {
    margin-top: -50px;
    margin-bottom: 35px;
    font-size: 0.8em;
    color: #666;
    color: var(--theme-footer-slogan-color, #666);
}



#footerLangSwitch {
    position: relative;
    margin: auto;
    width: 200px;
    margin-top: 40px;
    display: inline-block;
}

#footerLangSwitch ul {
    width: 100%;
    padding: 0;
    margin: auto;
    text-align: center;
    position: absolute;
    bottom: 100%;
    list-style-type: none;
    box-sizing: border-box;
    border-radius: 0.25em;
}

#footerLangSwitch ul li {
    display: none;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    background-color: var(--theme-footer-lang-switch-bg-color, #fff);
    color: var(--theme-footer-lang-switch-color, #000);
}

#footerLangSwitch ul:not(.clicked) li.selected {
    border-radius: 0.25em;
    display: flex;
}

#footerLangSwitch ul.clicked {
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
}

#footerLangSwitch ul.clicked li {
    display: block;
    border-width: 0;
}

#footerLangSwitch ul.clicked li:first-child {
    margin-top: 0;
}

#footerLangSwitch ul.clicked li.selected {
    pointer-events: none;
}

#footerLangSwitch li:hover {
    filter: brightness(0.85);
}

#footerLangSwitch a {
    text-decoration: none;
    font-size: 16px;
    color: inherit;
    padding: 8px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    gap: 5px;
    flex: 1;
}

#footerLangSwitch ul.clicked li.selected a {
    color: red;
}

#footerLangSwitch ul:not(.clicked) li.selected a:before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGZpbGw9Im5vbmUiIGNvbG9yPSIjNDQ0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEyLDIyIEMxNC42NjY2NjY3LDE5LjU3NTc1NzYgMTYsMTYuMjQyNDI0MiAxNiwxMiBDMTYsNy43NTc1NzU3NiAxNC42NjY2NjY3LDQuNDI0MjQyNDIgMTIsMiBDOS4zMzMzMzMzMyw0LjQyNDI0MjQyIDgsNy43NTc1NzU3NiA4LDEyIEM4LDE2LjI0MjQyNDIgOS4zMzMzMzMzMywxOS41NzU3NTc2IDEyLDIyIFoiLz48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yLjUgOUwyMS41IDlNMi41IDE1TDIxLjUgMTUiLz48L3N2Zz4=);
    width: 18px;
    height: 18px;
    position: relative;
    left: 0;
    top: 1px;
}

.section {
    padding-top: 90px;
    padding-bottom: 90px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    left: 0;
    top: 0;
}

.section>.icon {
    margin-top: -40px;
    margin-bottom: 20px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.section>.icon img {
    height: 100px;
}

.section>.title {
    font-size: 2.2em;
    margin-bottom: 40px;
    text-align: center;
}

.section>.subTitle {
    font-size: 1.2em;
    margin-top: -25px;
    margin-bottom: 30px;
    text-align: center;
}

.section:nth-of-type(odd) {
    position: relative;
    background-color: #e5f2fc;
    background-color: var(--theme-bg-color, #e5f2fc);
    background: #e5f2fc;
    background: var(--theme-section-odd-bg, #e5f2fc);
}

.sectionsCollapsed .section:nth-of-type(odd):not(.expanded) {
    background: var(--theme-section-odd-collapsed-bg, #e5f2fc);
}

.sectionsCollapsed .section:nth-of-type(odd).expanded {
    background: var(--theme-section-odd-expanded-bg,
            var(--theme-section-odd-collapsed-bg, #e5f2fc));
}

.sectionsCollapsed .section:not(.expanded) {
    padding: 24px;
    cursor: pointer;
}

.sectionsCollapsed .section:not(.expanded):hover {
    color: #c00000;
    color: var(--theme-section-collapsed-hover-color, #c00000);
}

.sectionsCollapsed .section:not(.expanded)>*:not(.title) {
    display: none;
}

.sectionsCollapsed .section:not(.expanded)>.title {
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
}

.sectionsCollapsed .section:not(.expanded) .title::after {
    content: "v";
    display: inline-block;
    padding: 2px 4px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 0.8em;
    color: #666;
    transform: scaleX(1.5) scaleY(0.65);
}

[dir="rtl"].sectionsCollapsed .section:not(.expanded) .title::after {
    margin-left: 0;
    margin-right: 10px;
}

.sectionsCollapsed .section.expanded .collapseHandle {
    background-color: #ffdca2;
    background-color: var(--theme-section-collapse-color, #ffdca2);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxNGw1LTUgNSA1eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: center center;
    height: 30px;
    margin-top: -90px;
    margin-bottom: 60px;
    cursor: pointer;
}

.sectionsCollapsed .section.expanded .collapseHandle:hover {
    background-color: #fbc25f;
    background-color: var(--theme-section-collapse-hover-color, #fbc25f);
}

.toolSelect {
    text-align: center;
}

.toolSelect .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.toolSelect .toolLink {
    display: inline-block;
    width: 165px;
    height: 100px;
    text-align: center;
    background-color: #fff;
    background-color: var(--theme-tool-select-tool-link-bg-color, #fff);
    border: 1px solid #7fbef2;
    border-color: var(--theme-tool-select-tool-link-border-color,
            #7fbef2) !important;
    padding: 5px;
    margin: 5px 5px;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    color: inherit;
    flex-shrink: 0;
    border-radius: 3px;
}

.hasHover .toolSelect .toolLink:hover {
    background-color: #e5f2fc;
    background-color: var(--theme-hover-bg-color, #e5f2fc);
}

.section:nth-of-type(odd) .toolSelect .toolLink:not(:hover) {
    background-color: #fdfdfd;
    background-color: var(--theme-tool-select-tool-link-bg-color-alt,
            var(--theme-tool-select-tool-link-bg-color));
}

.toolSelect.larger .toolLink {
    width: 230px;
    height: 125px;
}

.toolSelect.xl .toolLink {
    width: 330px;
    height: 150px;
    font-size: 1.4em;
}

.toolSelect.xl .toolLink .label {
    font-size: 18px;
}

.toolSelect .toolLink .icon {
    height: 60%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    box-sizing: border-box;
}

.toolSelect .toolLink .icon img {
    max-height: 100%;
    width: auto;
}

.toolSelect .toolLink .icon.withPadding {
    padding: 15px;
    padding-bottom: 0;
}

.toolSelect .toolLink:hover .icon {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

.toolSelect .toolLink .label {
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
    font-size: 11pt;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* @media (max-width: 400px) {
    .toolSelect .toolLink {
        width: 150px;
    }
} */

.toolSelect .toolLink .favstar {
    position: absolute;
    top: -2px;
    right: -3px;
    font-size: 14px;
    cursor: pointer;
    padding: 3px;
}

html[dir="rtl"] .toolSelect .toolLink .favstar {
    left: -3px;
    right: auto;
}

.toolSelect .toolLink .favstar .icon-star-empty {
    color: rgba(102, 102, 102, 0.7);
}

.toolSelect .toolLink .favstar .icon-star {
    color: rgba(231, 113, 27, 0.7);
}

.toolSelect .filters {
    padding: 0;
    font-size: 13px;
    margin: 0 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    color: var(--theme-tool-select-filers-color, #666);
}

.toolSelect .filters>* {
    display: inline-block;
    margin: 5px;
}

.toolSelect .filter {
    cursor: pointer;
    white-space: nowrap;
}

.toolSelect .filter.active {
    text-decoration: underline;
}

.toolSelect .filters .sep {
    padding: 0 2px;
    display: inline-block;
}

.toolSelect .filters .sep::before {
    content: " | ";
}

.toolSelect .filters input {
    width: 200px;
    height: 21px;
    flex-shrink: 1;
    border-radius: 4px;
}

.toolSelect .filters input:focus {
    outline: none;
}

/* @media (max-width: 600px) {
    .toolSelect .filters {
        flex-wrap: wrap;
    }

    .toolSelect .filters input {
        width: 364px;
        height: 25px;
    }

    .toolSelect .filters .searchSep {
        display: none;
    }
} */

#topToolSelect {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 5px dotted #0078d5;
    border-bottom-color: var(--theme-top-tool-select-sep-color, #0078d5);
    margin-top: 70px;
}

/* @media (min-width: 500px) {
    #topToolSelect .toolSelect .toolLink {
        display: flex;
        width: 200px;
        height: 55px;
        align-items: center;
    }

    #topToolSelect .toolSelect .toolLink .icon {
        width: 40%;
        height: 100%;
        margin-right: 10px;
        border: 0 solid red;
    }

    [dir="rtl"] #topToolSelect .toolSelect .toolLink .icon {
        margin-right: 0;
        margin-left: 10px;
    }

    #topToolSelect .toolSelect .toolLink .label {
        text-align: left;
        justify-content: flex-start;
        border: 0 solid red;
        height: 100%;
    }

    [dir="rtl"] #topToolSelect .toolSelect .toolLink .label {
        text-align: right;
    }
}

@media (min-width: 1800px) {
    #topToolSelect .toolSelect .toolLink {
        width: 250px;
        height: 75px;
    }
} */

.pdfFile {
    padding: 30px 0;
}

.pdfFile .pdfFileTools {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdfFile .pdfFileTools i[class^="icon-"] {
    font-size: 20px;
    cursor: pointer;
    margin: 5px 8px;
    color: #777;
    color: var(--theme-pdf-file-tool-color, #777);
}

.pdfFile .pdfFileTools .textBtn {
    cursor: pointer;
    margin: 5px 8px;
    color: #777;
    color: var(--theme-pdf-file-tool-color, #777);
}

.pdfFile .pdfFileTools i[class^="icon-"]:hover,
.pdfFile .pdfFileTools .textBtn:hover {
    color: #0078d5;
    color: var(--theme-pdf-file-tool-hover-color,
            var(--theme-normal-color, #0078d5));
}

.pdfPages {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.pdfPage {
    display: inline-flex;
    box-sizing: border-box;
    margin: 10px;
    position: relative;
    top: 0;
    left: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.pdfPage.square {
    width: 300px;
    height: 300px;
}

.pdfPageCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pdfPageMiddle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pdfPageContent {
    position: relative;
}

.pdfPageImgContainer {
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.pdfPageImg {
    border: 1px solid #ccc;
    max-width: 300px;
    max-height: 300px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.pdfPageNumber {
    position: absolute;
    top: 1px;
    right: 1px;
    font-family: monospace;
    font-size: 13px;
    padding: 1px 3px 1px 4px;
    background-color: rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
    color: #555;
    user-select: none;
}

.pdfPage:not(.rendered) .pdfPageNumber {
    display: none;
}

.pdfPage.square.rot-0 .pdfPageContent {
    transform: rotate(0deg);
}

.pdfPage.square.rot-90 .pdfPageContent {
    transform: rotate(90deg);
}

.pdfPage.square.rot-180 .pdfPageContent {
    transform: rotate(180deg);
}

.pdfPage.square.rot-270 .pdfPageContent {
    transform: rotate(270deg);
}

.pdfPage.remove,
.pdfPage.removed {
    opacity: 0.3;
}

.pdfPage.remove:hover,
.pdfPage.removed:hover {
    opacity: 0.7;
}

.pdfPage.marked .pdfPageImg {
    border: 1px solid #da5f10;
    box-shadow: 0 0 5px 0px #da5f1099;
}

.pdfPage.iconOverlay .pdfPageContent::after {
    display: none;
}

.pdfPage.iconOverlay.rendered .pdfPageContent::after {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.pdfPage.iconOverlay.rendered .pdfPageContent:hover::after {
    opacity: 1;
}

.pdfPage.iconOverlay.rendered .pdfPageContent:hover .pdfPageImg {
    filter: grayscale(100%) brightness(0.8);
}

.pdfPage.clickable {
    cursor: auto;
}

.pdfPage.clickable .pdfPageContent {
    cursor: pointer;
}

.pdfPage.moveable .pdfPageContent {
    cursor: move;
}

.pdfPage.sortable-chosen {
    opacity: 0.5;
}

.pdfPage.rendered.iconOverlay.moveable .pdfPageContent::after {
    background-image: url(images/move.svg);
}

.pdfPage.iconOverlay.moveable.sortable-chosen .pdfPageContent::after {
    display: none !important;
}

.pdfFileLoader,
.pdfPageLoader {
    max-width: 100px;
    max-height: 100px;
    box-sizing: border-box;
}

.pdfPageLoader {
    max-width: 50px;
    max-height: 50px;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.pdfPageEnlarge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 13px;
    padding: 2px 0 2px 2px;
    background-color: rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
    color: #555;
    cursor: pointer;
}

.blockquotes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
}

.blockquotes .cell {
    text-align: start;
    max-width: 970px;
    padding: 5px;
    box-sizing: border-box;
    flex: 1;
}

blockquote {
    display: block;
    padding: 50px 25px 25px 25px;
    margin: 0 0 20px;
    position: relative;
    line-height: 1.2;
    background-color: #fff;
    background-color: var(--theme-blockquote-bg-color, #fff);
    box-shadow: 0 0 5px 1px #ccc;
    box-shadow: 0 0 5px 1px var(--theme-blockquote-box-shadow-color, #ccc);
    color: #222;
    color: var(--theme-blockquote-color, #222);
}

blockquote::before {
    content: "“";
    font-size: 80px;
    font-family: arial, sans-serif;
    font-weight: bold;
    color: #999;
    position: absolute;
    left: calc(50% - 20px);
    top: -10px;
}

blockquote em {
    font-style: italic;
}

.alert {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ebccd1;
    color: #a94442;
    background-color: #f2dede;
}

#rateSection .stars {
    user-select: none;
    display: flex;
    justify-content: center;
}

#rateSection .star {
    cursor: pointer;
    padding: 0 10px;
}

#rateSection .star::before {
    content: "☆";
    font-size: 30px;
    font-style: normal;
}

#rateSection .star.active::before {
    content: "★";
    color: #e7711b;
}

#rateSection textarea {
    height: 90px;
    width: 90%;
    max-width: 800px;
    font-size: 15px;
    font-family: inherit;
    margin: 10px 0 15px;
    padding: 5px;
    box-sizing: border-box;
}

#rateSection button {
    font-size: 15px;
    padding: 3px 10px;
}

.featureMarks {
    line-height: 2;
}

.featureMarks i {
    text-decoration: none;
    font-style: normal;
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
}

.featureMarks i::before {
    content: "\2713";
    color: #00af50;
    padding-right: 5px;
}

.noLimits.featureMarks i::before {
    color: #00af50;
}

ul.featureMarks {
    list-style: none;
    text-align: left;
    padding: 0;
    padding-left: 40px;
}

[dir="rtl"] ul.featureMarks {
    text-align: right;
    padding-right: 40px;
    padding-left: 0;
}

ul.featureMarks li {
    margin-bottom: 15px;
}

ul.featureMarks li::before {
    content: "\2713";
    color: #00af50;
    display: inline-block;
    font-weight: bold;
    padding-right: 10px;
    margin-left: -22px;
}

[dir="rtl"] ul.featureMarks li::before {
    padding-right: 0;
    margin-left: 0;
    padding-left: 10px;
    margin-right: -22px;
}

.toolBar {
    color: #000;
    color: var(--theme-tool-bar-color, #000);
    background-color: #fff;
    background-color: var(--theme-tool-bar-bg-color, #fff);
    border-bottom: 1px solid gray;
    border-bottom-color: var(--theme-tool-bar-border-bottom-color, gray);
    font-size: 0.85em;
    user-select: none;
    display: flex;
    justify-content: flex-start;
}

.toolBar *::selection {
    background: none;
}

.toolbar svg * {
    fill: var(--theme-tool-bar-color, #000);
}

.toolGroup {
    text-align: left;
    padding: 4px;
    border: 1px dotted silver;
    border: 1px dotted var(--theme-tool-group-border-color, silver);
    display: inline-block;
    vertical-align: middle;
    margin: 1px;
    height: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.toolGroup * {
    vertical-align: middle;
}

.toolGroup.disabled {
    display: none;
}

.toolGroup>span,
.toolGroup>div,
.toolGroup [data-role] {
    display: inline-block;
}

.toolGroup .material-icons {
    font-size: 24px;
    color: #444;
    color: var(--theme-tool-bar-icon-color, #444);
}

.toolGroup span[data-role].material-icons:hover {
    color: #317eb7;
}

.toolGroup .hoverFill:hover {
    fill: #317eb7;
}

.toolGroup svg.filledIcon,
.toolGroup .filledIconWrapper svg {
    fill: #444;
    fill: var(--theme-tool-bar-icon-color, #444);
    stroke: none;
}

.toolGroup svg.filledIcon:hover,
.toolGroup .filledIconWrapper:hover svg {
    fill: #317eb7;
    fill: var(--theme-tool-bar-icon-hover-color, #317eb7);
}

.toolGroup svg.strokedIcon,
.toolGroup .strokedIconWrapper svg {
    stroke: #000;
    stroke: var(--theme-tool-bar-icon-color, #000);
    fill: none;
}

.toolGroup svg.strokedIcon:hover,
.toolGroup .strokedIconWrapper:hover svg {
    stroke: var(--theme-tool-bar-icon-hover-color, #317eb7);
}

.toolGroup .down {
    background-color: #b3dbf9;
    background-color: var(--theme-tool-bar-down-bg-color, #b3dbf9);
}

.toolGroup [data-role] svg {
    height: 24px;
    max-width: 32px;
}

.toolGroup [data-role].down svg {
    height: 20px;
    margin: 2px;
}

.toolGroupWrapper {
    display: flex;
    justify-content: flex-start;
    gap: 1px 1px;
    flex-wrap: wrap;
}

.toolPopper {
    display: none;
    border: 1px solid silver;
    border-color: var(--theme-tool-popper-border-color, silver);
    background-color: var(--theme-tool-popper-bg-color, #f8f8f8);
    padding: 5px;
    margin: 9px 5px 5px 5px;
    z-index: 1;
}

.numberedList li {
    text-align: center;
    padding: 10px;
    counter-increment: item;
}

.numberedList li::before {
    content: counter(item);
    background: #c5c5c5;
    border-radius: 50%;
    color: #fff;
    width: 1.8em;
    text-align: center;
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.darkTheme .numberedList li::before {
    color: #222;
}

#relatedToolsSection .toolLink {
    white-space: nowrap;
}

#relatedToolsSection .toolLink {
    display: inline-block;
    padding: 20px;
    font-size: 18px;
}

[data-tippy-root] {
    text-align: left;
}

[dir="rtl"] [data-tippy-root] {
    text-align: right;
}

.tippyMenu {
    pointer-events: all;
}

.tippyMenu>div {
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.tippyMenu>div:hover {
    background-color: var(--theme-tippy-menu-item-hover-bg-color, #666);
}

.tippyMenu>div i {
    font-size: 16px;
}

.tippy-box[data-theme="tippyMenu"] .tippy-content {
    overflow: hidden;
    border-radius: 4px;
    padding: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.spin,
.spin-cw {
    animation: spin 2s infinite linear;
}

.spin-ccw {
    animation: spin 2s infinite linear;
    animation-direction: reverse;
}


.qas {
    padding: 0 20px;
    max-width: 700px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.qas .qa {
    text-align: start;
    padding: 15px 0;
    border-bottom: 1px solid var(--theme-qas-sep-color, #ddd);
}

.qas .qa:first-child {
    border-top: 1px solid var(--theme-qas-sep-color, #ddd);
}

.qas .qa .question {
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    color: #333;
    color: var(--theme-qas-question-color, #333);
    display: flex;
    justify-content: space-between;
}

.qas .qa .question::after {
    content: "v";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    margin-left: 10px;
    font-weight: normal;
    transform: scaleX(1.5) scaleY(0.65);
}

[dir="rtl"] .qas .qa .question::after {
    margin-left: 0;
    margin-right: 10px;
}

.qas .qa.active .question::after {
    transform: scaleX(1.5) scaleY(0.6) rotate(180deg) translateY(-2px);
}

.qas .qa.active .question,
.qas .qa .question:hover {
    color: #c00000;
    color: var(--theme-qas-active-color, #c00000);
}

.qas .qa .answer {
    color: #111;
    color: var(--theme-qas-answer-color, #111);
    font-size: 14px;
    line-height: 1.5;
    background-color: #f9f9f9;
    background-color: var(--theme-qas-answer-bg-color, #f9f9f9);
    overflow: hidden;
    box-sizing: border-box;
    display: none;
    padding: 10px 5px;
    margin-top: 10px;
}

.qas .qa.active .answer {
    display: block;
}

.qas p {
    padding: 0 10px;
    margin: 8px 0;
}

.qas ol,
.qas ul {
    padding: 0 10px;
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qas ol {
    list-style-type: decimal;
}

.qas ul {
    list-style-type: disc;
}

.qas ol li::marker {
    font-weight: 600;
}

.developer-bio {
    font-size: 14px;
    margin-top: 3em;
    margin-bottom: -2em;
}

.developer-bio>* {
    vertical-align: middle;
}

.developer-bio .image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 5px;
}

[dir="rtl"] .developer-bio .image {
    margin-right: 0;
    margin-left: 5px;
}

.overlay {
    margin: auto;
    position: relative;
    background-color: #fff;
    background-color: var(--theme-overlay-bg-color, #fff);
    box-shadow: 0 0 5px 1px #777;
    box-shadow: 0 0 5px 1px var(--theme-overlay-box-shadow-color, #777);
    border: 1px solid #777;
    border-color: var(--theme-overlay-border-color, #777);
}

.overlayWrapper {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(80, 80, 80, 0.4);
    display: flex;
    overflow: auto;
}

.overlayClose {
    position: absolute;
    top: 0;
    right: 0;
}

html.hasOverlayFilePreview {
    overflow: hidden;
}

html.hasOverlayFilePreview body {
    overflow: scroll;
}

.overlayFilePreview {
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.overlayFilePreview .tools {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(240, 240, 240, 0.8);
    padding: 5px 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 1;
    display: flex;
    align-items: center;
}

.overlayFilePreview .tools>* {
    color: #333;
}

.overlayFilePreview .tools>i {
    padding: 0 5px;
    cursor: pointer;
}

.overlayFilePreview .tools>i:hover {
    color: #0078d5;
}

.overlayFilePreview .tools .currentPage {
    font-size: 0.8em;
    white-space: nowrap;
}

[dir="rtl"] .overlayFilePreview .tools>i.icon-left-open,
[dir="rtl"] .overlayFilePreview .tools>i.icon-right-open {
    transform: scaleX(-1);
}

.overlayFilePreview .content {
    overflow-x: auto;
    overflow-y: auto;
    display: block;
    width: 100%;
    height: 100%;
    direction: ltr;
    position: absolute;
    left: 0;
    top: 0;
}

.overlayFilePreview .content.dragging {
    cursor: move;
}

.overlayFilePreview .elementWrapper {
    overflow: hidden;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
}

.componentLoadStart {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.45);
    background-color: var(--theme-component-load-start-bg-color,
            rgba(0, 0, 0, 0.45));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.componentLoadStart .main {
    background-color: #fff;
    background-color: var(--theme-component-load-start-main-bg-color, #fff);
    padding: 10px 30px 30px 30px;
    margin: 15px;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 15px;
    color: #222;
    box-sizing: border-box;
    width: 360px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.componentLoadStart .main .head {
    display: flex;
    align-items: center;
    margin: 0 -20px 0 -20px;
}

.componentLoadStart .main .head .expand {
    flex: 1 1;
    min-width: 20px;
}

.componentLoadStart .main .head .iconWrapper {
    display: inline-flex;
    margin-right: 8px;
}

html[dir="rtl"] .componentLoadStart .main .head .iconWrapper {
    margin-right: 0;
    margin-left: 8px;
}

.componentLoadStart .main .head .iconWrapper img {
    width: 20px;
    height: 20px;
}

.componentLoadStart .main .head .iconWrapper span {
    font-size: 22px;
    color: #0061fe;
}

.componentLoadStart .main .head .closeWrapper span {
    font-size: 18px;
    color: #bc7979;
}

.componentLoadStart .main .head .closeWrapper:hover {
    background-color: rgba(0, 0, 0, 0.1);
    background-color: var(--theme-component-load-start-close-bg-color,
            rgba(0, 0, 0, 0.1));
    cursor: pointer;
}

.componentLoadStart .main .content {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.componentLoadStart .main .content .loadSpinnerWrapper {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.componentLoadStart .main .content .loadSpinner {
    width: 50px;
    height: 50px;
}

.componentLoadStart .main .content .startButtonWrapper {
    margin-top: 30px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}

.componentLoadStart .main .content .startButton {
    border-radius: 15px;
    border: 0 none;
    background-color: #0078d5;
    color: #fff;
    padding: 8px 16px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.componentLoadStart .main .content .startButton:hover {
    filter: brightness(0.85);
}

.componentLoadStart.success .main {
    background-color: #d0ffd0;
    background-color: var(--theme-component-load-start-error-main-bg-color,
            #caffca);
}

.componentLoadStart.error .main {
    background-color: #ffd0d0;
    background-color: var(--theme-component-load-start-error-main-bg-color,
            #ffcaca);
}

.imageSlider {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 10px;
    margin: auto;
}

.imageSlider button.prev,
.imageSlider button.next {
    color: transparent;
    outline: 0;
    background: 0 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 30px);
    border: 0 none;
    border-radius: 10px;
    background-color: #ff8020;
    display: block;
    opacity: 0.75;
    cursor: pointer;
}

.qa .answer {
    display: none;
    /* keep answers hidden by default */
}

.qa.active .answer {
    display: block;
    /* show when active */
}

.qa .question {
    cursor: pointer;
    /* make it look clickable */
    position: relative;
    padding-right: 20px;
}

.qa .question::after {
    content: "▼";
    /* arrow */
    position: absolute;
    right: 0;
    transition: transform 0.3s;
}

.qa.active .question::after {
    transform: rotate(-180deg);
    /* rotate arrow when open */
}

.imageSlider button.prev {
    left: 0;
}

.imageSlider button.next {
    right: 0;
}

[dir="rtl"] .imageSlider button.prev {
    right: 0;
    left: auto;
    transform: scale(-1, 1);
}

[dir="rtl"] .imageSlider button.next {
    left: 0;
    right: auto;
    transform: scale(-1, 1);
}

.imageSlider button.prev:before,
.imageSlider button.next:before {
    width: 6px;
    height: 6px;
    border-top: 3px solid #fff;
    content: "";
    display: block;
}

.imageSlider button.prev:before {
    border-left: 3px solid #fff;
    transform: translateX(1px) rotate(-45deg);
}

.imageSlider button.next:before {
    border-right: 3px solid #fff;
    transform: translateX(-1px) rotate(45deg);
}

.imageSlider .list {
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% - 50px);
    overflow-x: hidden;
    align-items: stretch;
    justify-content: flex-start;
}

.imageSlider .list .item {
    overflow: hidden;
    width: calc(100% / 3);
    flex-shrink: 0;
    flex-grow: 0;
}

.imageSlider.threeBoxes .list .item {
    width: calc(100% / 3);
}

.imageSlider.oneBox .list .item {
    width: calc(100%);
}

.imageSlider.twoBoxes .list .item {
    width: calc(100% / 2);
}

.imageSlider.threeBoxes .list .item {
    width: calc(100% / 3);
}

/* @media (max-width: 950px) {
    .imageSlider:not(.oneBox) .list .item {
        width: calc(100% / 2);
    }
}

@media (max-width: 650px) {
    .imageSlider .list .item {
        width: calc(100%) !important;
    }
} */

.imageSlider .list .item .box {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 8px;
    height: 230px;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
}

.imageSlider.h180 .list .item .box {
    height: 180px;
}

.imageSlider.h200 .list .item .box {
    height: 200px;
}

.imageSlider.h220 .list .item .box {
    height: 220px;
}

.imageSlider.h250 .list .item .box {
    height: 250px;
}

.imageSlider.h300 .list .item .box {
    height: 300px;
}

.imageSlider.h350 .list .item .box {
    height: 350px;
}

.imageSlider .list .item .box {
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
    box-shadow: var(--theme-image-slider-box-shadow,
            0 0 6px 0 rgba(0, 0, 0, 0.25));
}

.imageSlider .list .item.active .box {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
    box-shadow: var(--theme-image-slider-active-box-shadow,
            0 0 8px 0 rgba(0, 0, 0, 0.5));
}

.imageSlider .list .item .box:after {
    content: "\01F50D";
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.9;
    pointer-events: none;
    border-top-left-radius: 5px;
    padding: 2px;
    background-color: #fff;
    font-size: 13px;
}

.imageSlider .list .item .box img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    user-select: none;
    object-fit: cover;
}

.imageSlider .list .item .caption {
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    margin: 10px;
}

.imageSlider .dots {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    height: 20px;
    gap: 5px;
}

.imageSlider .dots button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    border: 0;
    color: transparent;
    outline: 0;
    background: 0 0;
}

.imageSlider .dots button:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "•";
    opacity: 0.25;
    color: #000;
    width: 10px;
    height: 10px;
    font-size: 20px;
    font-family: arial, sans-serif;
}

.imageSlider .dots button:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "•";
    opacity: 0.3;
    width: 10px;
    height: 10px;
    font-size: 20px;
    font-family: arial, sans-serif;
    color: #000;
    color: var(--theme-image-slider-dots-color, #000);
}

.imageSlider .dots button.active:before {
    opacity: 1;
}

.imageSlider .dots button:hover:before {
    opacity: 0.75;
}

.imageSlider .disabled {
    pointer-events: none !important;
    opacity: 0.25 !important;
    filter: grayscale(50%);
}


@font-face {
    font-family: "icon-font";
    src: url(/fonts/icon-font.eot);
    src: url(/fonts/icon-font.eot#iefix) format("embedded-opentype"),
        url(/fonts/icon-font.woff2) format("woff2"),
        url(/fonts/icon-font.woff) format("woff"),
        url(/fonts/icon-font.ttf) format("truetype"),
        url(/images/icon-font.svg#icon-font) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "icon-font";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0.2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-sort-name-up:before {
    content: "\e001";
}

.icon-sort-name-down:before {
    content: "\e002";
}

.icon-grid:before {
    content: "\e003";
}

.icon-list:before {
    content: "\e004";
}

.icon-dropbox:before {
    content: "\e005";
}

.icon-doc-add:before {
    content: "\e006";
}

.icon-paper-plane:before {
    content: "\e007";
}

.icon-cloud-print:before {
    content: "\e008";
}

.icon-cut:before {
    content: "\e009";
}

.icon-download:before {
    content: "\e00a";
}

.icon-edit:before {
    content: "\e00b";
}

.icon-envelope:before {
    content: "\e00c";
}

.icon-fax:before {
    content: "\e00d";
}

.icon-lock-1:before {
    content: "\e00e";
}

.icon-merge:before {
    content: "\e00f";
}

.icon-restart:before {
    content: "\e010";
}

.icon-save:before {
    content: "\e011";
}

.icon-times:before {
    content: "\e012";
}

.icon-ellipsis-vert:before {
    content: "\e013";
}

.icon-trash:before {
    content: "\e014";
}

.icon-linkedin:before {
    content: "\e015";
}

.icon-twitter:before {
    content: "\e016";
}

.icon-facebook:before {
    content: "\e017";
}

.icon-star:before {
    content: "\e018";
}

.icon-heart:before {
    content: "\e019";
}

.icon-star-empty:before {
    content: "\e01a";
}

.icon-cog:before {
    content: "\e01b";
}

.icon-minus:before {
    content: "\e01c";
}

.icon-toggle-off:before {
    content: "\e01d";
}

.icon-toggle-on:before {
    content: "\e01e";
}

.icon-cw:before {
    content: "\e01f";
}

.icon-ccw:before {
    content: "\e020";
}

.icon-arrows-cw:before {
    content: "\e021";
}

.icon-dot-circled:before {
    content: "\e022";
}

.icon-circle-empty:before {
    content: "\e023";
}

.icon-color-adjust:before {
    content: "\e024";
}

.icon-palette:before {
    content: "\e025";
}

.icon-menu:before {
    content: "\e026";
}

.icon-info-outline:before {
    content: "\e027";
}

.icon-emo-unhappy:before {
    content: "\e028";
}

.icon-ok:before {
    content: "\e029";
}

.icon-down-open:before {
    content: "\e02a";
}

.icon-up-open:before {
    content: "\e02b";
}

.icon-left-open:before {
    content: "\e02c";
}

.icon-right-open:before {
    content: "\e02d";
}

.icon-right-hand:before {
    content: "\e02e";
}

.icon-eye:before {
    content: "\e02f";
}

.icon-left:before {
    content: "\e030";
}

.icon-link-ext:before {
    content: "\e031";
}

.icon-plus-squared:before {
    content: "\e032";
}

.icon-minus-squared:before {
    content: "\e033";
}

.icon-zoom-in:before {
    content: "\e034";
}

.icon-zoom-out:before {
    content: "\e035";
}

.icon-italic:before {
    content: "\e036";
}

.icon-google-drive:before {
    content: "\e038";
}

.icon-compress:before {
    content: "\e039";
}

.icon-plus:before {
    content: "\e03a";
}

.icon-search:before {
    content: "\e03b";
}

.icon-money-off:before {
    content: "\e03c";
}

.icon-cloud-off:before {
    content: "\e03d";
}

.icon-unlimited:before {
    content: "\e03e";
}

.icon-no-installation:before {
    content: "\e03f";
}

.icon-devices:before {
    content: "\e040";
}

.icon-memory:before {
    content: "\e041";
}

.icon-tools:before {
    content: "\e042";
}

.icon-easy-to-use:before {
    content: "\e043";
}

.icon-lock:before {
    content: "\e044";
}

.icon-lightbulb:before {
    content: "\e045";
}

.icon-high-quality:before {
    content: "\e046";
}

.icon-tune:before {
    content: "\e047";
}

.icon-info:before {
    content: "\e048";
}

.icon-code:before {
    content: "\e049";
}

.icon-bold:before {
    content: "\e805";
}

@keyframes passing-through {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }
}

.dropzone,
.dropzone * {
    box-sizing: border-box;
}

.dropzone {
    min-height: 230px;
    padding: 15px 15px;
    text-align: center;
    position: relative;
    border: 2px dashed #0078d5;
    border-color: var(--theme-dropzone-border-color, #0078d5);
    background-color: #fff7d6;
    background-color: var(--theme-dropzone-bg-color, #fff7d6);
}

.dropzone:not(.dz-started):not(.no-shadow) {
    box-shadow: 0 0 0 10px #fffce5;
    box-shadow: 0 0 0 10px var(--theme-dropzone-bg-color, #fffce5);
}

.dropzone+.dropzone {
    margin-top: 30px;
}

.dropzone.dz-clickable {
    cursor: pointer;
}

.dropzone.dz-clickable>.lowerLeft,
.dropzone.dz-clickable>.lowerRight,
.dropzone.dz-clickable>.upperLeft,
.dropzone.dz-clickable>.uperRight {
    cursor: default;
}

.dropzone.dz-started {
    background-image: none;
}

.dropzone.dz-started .dz-message {
    display: none;
}

.dropzone .dz-message {
    text-align: center;
    font-weight: 400;
    font-size: 24px;
    margin: 1em 0;
}

.dropzone .dz-previews {
    cursor: pointer;
}

.dropzone .dz-preview {
    width: 150px;
}

.dropzone .dz-preview .dz-image {
    width: 150px;
    height: 150px;
}

@media (max-width: 500px) {
    .dropzone .dz-preview {
        width: 135px;
    }

    .dropzone .dz-preview .dz-image {
        width: 135px;
    }
}

.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    user-select: none;
    background-color: transparent;
    background-color: var(--theme-dropzone-preview-bg-color, transparent);
    background: transparent;
    background: var(--theme-dropzone-preview-bg, transparent);
}

.dropzone .dz-preview:hover {
    z-index: 1000;
}

.dropzone .dz-preview:not(.dz-image-preview) .dz-image img {
    display: none;
}

.dropzone .dz-preview.dz-complete.dz-file-preview .dz-details {
    opacity: 1;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
    transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    opacity: 0;
    font-size: 13px;
    padding: 0 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    color: var(--theme-dropzone-preview-details-color, rgba(0, 0, 0, 0.9));
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dropzone:not(.sorting) .dz-preview.dz-image-hover .dz-details {
    opacity: 1;
}

.dropzone .dz-preview .dz-details .dz-size,
.dropzone .dz-preview .dz-details .dz-pages,
.dropzone .dz-preview .dz-details .dz-extension {
    font-size: 14px;
    white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-size strong {
    font-weight: normal;
}

.dropzone .dz-preview .dz-filename {
    white-space: nowrap;
    font-size: 12px;
    margin: 5px 0;
    text-align: center;
    width: 100%;
}

.dropzone .dz-preview .dz-filename:hover span {
    padding: 3px;
    border: 1px solid #c8c8c8;
    border: var(--theme-dropzone-preview-filename-hover-border,
            1px solid #c8c8c8);
    background-color: #fff;
    background-color: var(--theme-dropzone-preview-filename-hover-bg-color, #fff);
}

.dropzone .dz-preview .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-filename:not(:hover) span {
    border: 1px solid transparent;
    padding: 3px;
}

.dropzone .dz-preview .dz-details .dz-pages span,
.dropzone .dz-preview .dz-details .dz-size span,
.dropzone .dz-preview .dz-details .dz-extension span {
    padding: 0.2em 0.4em;
    background-color: rgba(255, 255, 255, 0.9);
}

.dropzone .dz-preview .dz-image {
    overflow: hidden;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-color: var(--theme-dropzone-preview-image-box-border-color, #ddd);
    background-color: #f0f0f0;
    background-color: var(--theme-dropzone-preview-image-box-bg-color, #f0f0f0);
}

.dropzone:not(.sorting) .dz-preview .dz-image:hover {
    background-color: var(--theme-dropzone-preview-image-box-hover-bg-color,
            var(--theme-dropzone-preview-image-box-bg-color, #bbb));
}

.dropzone:not(.sorting) .dz-preview .dz-image:hover img {
    opacity: 0.3;
}

.dropzone .dz-preview.sortable-chosen .dz-image {
    background-color: #c8e1f3;
    background-color: var(--theme-dropzone-preview-image-sortable-chosen-bg-color,
            #c8e1f3);
}

.dropzone .dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    box-shadow: 0 0 5px rgb(0 0 0 / 25%);
    box-shadow: var(--theme-dropzone-preview-image-shadow,
            0 0 5px rgb(0 0 0 / 25%));
    border: 1px solid #e0e0e0;
    border: var(--theme-dropzone-preview-image-border, 1px solid #e0e0e0);
    pointer-events: none;
}

.dropzone .dz-preview[data-rotate="90"] .dz-image img {
    transform: rotate(90deg);
}

.dropzone .dz-preview[data-rotate="180"] .dz-image img {
    transform: rotate(180deg);
}

.dropzone .dz-preview[data-rotate="270"] .dz-image img {
    transform: rotate(270deg);
}

.dropzone .dz-preview.dz-success:not(.sortable-sorted) .dz-success-mark {
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation-iteration-count: 1;
}

.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 20px;
    left: 50%;
    top: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    background: #f7f7f7;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dotted #ccc;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    display: block;
    background: #e3c549;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width 300ms ease-in-out;
}

.dropzone .dz-preview .dz-progress .dz-upload-text {
    position: relative;
    left: 0;
    top: 0;
    font-size: 11px;
    font-weight: 500;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    font-size: 10px;
    bottom: 26px;
    left: -8px;
    width: calc(100% + 16px);
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em;
    color: #fff;
    color: var(--theme-dropzone-preview-error-color, white);
}

.dropzone:not(.listView) .dz-preview.dz-processing:not(.dz-complete) .dz-details .dz-size {
    display: none;
}

.dropzone:not(.listView) .dz-preview.dz-error .dz-details {
    display: none;
}

.dropzone .dz-tools {
    font-size: 15px;
    white-space: nowrap;
    padding: 3px 0;
    display: flex;
    justify-content: center;
    gap: 0.25em;
}

.dropzone .dz-tools [class*="icon-"] {
    color: #31759f;
    color: var(--theme-dropzone-file-tools-color, #31759f);
    cursor: pointer;
    padding: 3px 2px;
}

.dropzone .dz-tools [class*="icon-"]:hover {
    background-color: #e5f2fc;
    background-color: var(--theme-dropzone-file-tools-hover-bg-color, #e5f2fc);
}

.dropzone .dz-tools .dz-remove {
    color: #c05353;
    margin-left: auto;
}

[dir="rtl"] .dropzone .dz-tools .dz-remove {
    margin-left: 0;
    margin-right: auto;
}

.dropzone .dz-tools .icon-ccw,
.dropzone .dz-tools .icon-cw {
    color: #8b568c;
}

.dropzone.listView .fileInfo {
    margin-bottom: 30px;
}

.dropzone.listView .dz-preview {
    position: relative;
    vertical-align: top;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;
    min-height: 58px;
    border: 1px solid #f0f0f0;
    border-color: var(--theme-dropzone-list-view-preview-border-color, #f0f0f0);
    background-color: #fff;
    background-color: var(--theme-dropzone-list-view-preview-bg-color, #fff);
}

.dropzone.listView .dz-preview .dz-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 0 solid #ddd;
    border-color: var(--theme-dropzone-list-view-preview-image-border-color,
            #ddd);
}

.dropzone.listView .dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100%;
}

.dropzone.listView .dz-preview .dz-details {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 20;
    font-size: 15px;
    min-width: 100px;
    max-width: 100%;
    padding: 5px;
    text-align: start;
    line-height: 100%;
    flex-grow: 1;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    color: rgba(0, 0, 0, 1);
    color: var(--theme-dropzone-list-view-preview-details-color,
            rgba(0, 0, 0, 1));
    transform: none;
}

.dropzone.listView .dz-preview .dz-filename {
    font-size: 16px;
    margin: 0;
    display: inline-block;
    padding: 3px 5px 3px 10px;
    flex-grow: 1;
    text-align: start;
}

.dropzone.listView .dz-preview .dz-details .dz-size span,
.dropzone.listView .dz-preview .dz-details .dz-size:hover span,
.dropzone.listView .dz-preview .dz-details .dz-pages span,
.dropzone.listView .dz-preview .dz-details .dz-pages:hover span,
.dropzone.listView .dz-preview .dz-details .dz-extension span,
.dropzone.listView .dz-preview .dz-details .dz-extension:hover span,
.dropzone.listView .dz-preview .dz-filename span,
.dropzone.listView .dz-preview .dz-filename:hover span {
    border: 1px solid transparent;
    background-color: transparent !important;
}

.dropzone.listView .dz-preview .dz-details .dz-size,
.dropzone.listView .dz-preview .dz-details .dz-pages,
.dropzone.listView .dz-preview .dz-details .dz-extension {
    font-size: 14px;
    margin: 0;
    display: inline-block;
    padding: 3px 5px 3px 10px;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 500px) {

    .dropzone.listView .dz-preview .dz-details .dz-size,
    .dropzone.listView .dz-preview .dz-details .dz-pages,
    .dropzone.listView .dz-preview .dz-details .dz-extension {
        display: none;
    }
}

.dropzone.listView .dz-preview .dz-details .dz-size strong {
    font-weight: normal;
}

.dropzone.listView .dz-preview .dz-error-mark {
    display: none;
}

.dropzone.listView .dz-preview.sortable-chosen {
    background-color: #f0f0f0;
    background-color: var(--theme-dropzone-list-view-preview-sortable-chosen-bg-color,
            #f0f0f0);
}

.dropzone.listView .dz-preview .dz-error-message {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.25em;
}

.dropzone .dz-message {
    display: flex;
    flex-direction: column;
    min-height: 130px;
    justify-content: center;
}

.dropzone .dz-message .info {
    margin-bottom: 20px;
}

.dropzone .dz-message .note {
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
}

.dropzone .dz-message .note.terms {
    font-size: 12px;
}

.dropzone .dz-message .chooseFile {
    font-size: 30px;
    font-weight: 500;
    font-family: system-ui, arial;
    text-decoration: none;
    color: #0078d5;
    color: var(--theme-dropzone-message-choose-file-color, #0078d5);
    display: flex;
    justify-content: center;
}

.dropzone .dz-message .chooseFile .btn {
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 28px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
}

.dropzone.sortable .dz-preview {
    cursor: move;
}

.dropzone.sortable .dz-preview .dz-tools {
    cursor: default;
}

.dropzone:not(.dz-started).hasUpperLeft,
.dropzone:not(.dz-started).hasUpperRight {
    padding-top: 30px;
}

.dropzone.hasLowerLeft,
.dropzone.hasLowerRight {
    padding-bottom: 50px;
}

.dropzone.listView.hasLowerLeft,
.dropzone.listView.hasLowerRight {
    padding-bottom: 60px;
}

.dropzone .lowerRight {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

[dir="rtl"] .dropzone .lowerRight {
    left: 5px;
    right: auto;
}

.dropzone .lowerLeft {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    direction: ltr;
}

[dir="rtl"] .dropzone .lowerLeft {
    right: 5px;
    left: auto;
}

.dropzone .upperLeft {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

[dir="rtl"] .dropzone .upperLeft {
    right: 5px;
    left: auto;
}

.dropzone .upperRight {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

[dir="rtl"] .dropzone .upperRight {
    left: 5px;
    right: auto;
}

.dropzone .importTools {
    display: inline-block;
    position: relative;
}

.dropzone .importTools .tools {
    display: flex;
    align-items: center;
}

.dropzone .importTools .tools .tool {
    cursor: pointer;
    display: inline-block;
    font-size: 26px;
    color: #0078d5;
    color: var(--theme-dropzone-import-tools-color, #0078d5);
}

.dropzone .importTools .tools .tool * {
    cursor: pointer;
}

.dropzone .importTools .tools .tool:hover {
    background-color: #e5f2fc;
    background-color: var(--theme-dropzone-import-tools-hover-bg-color, #e5f2fc);
}

.dropzone .importTools .tools .tool svg {
    max-width: 30px;
    height: 30px;
}

.dropzone .importTools .tools .spacer {
    margin: 0 3px;
    width: 1px;
    height: 20px;
    background-color: silver;
}

.dropzone .importTools .tools .moreToolsOpener {
    font-size: 14px;
    padding: 6px 5px;
}

[dir="rtl"] .dropzone .importTools .tools .moreToolsOpener {
    transform: scaleX(-1);
}

.dropzone .importTools .filesystemImport::before {
    position: relative;
    left: 0;
    top: -1px;
}

.dropzone .importTools .moreImportTools {
    position: absolute;
    right: 80px;
    bottom: 0;
}

[dir="rtl"] .dropzone .importTools .moreImportTools {
    left: 80px;
    right: auto;
}

.dropzone .importTools .moreImportTools .tools {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dropzone .fileInfo {
    display: none;
    pointer-events: none;
    opacity: 0.75;
    font-size: 11pt;
    margin-bottom: 15px;
}

.dropzone.dz-started .fileInfo {
    display: block;
}

.dropzone .fileTools {
    pointer-events: none;
}

.dropzone .fileTools .fileTool {
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    color: inherit;
    pointer-events: auto;
}

.dropzone .fileTools .fileTool:hover {
    background-color: #eee;
    background-color: var(--theme-dropzone-file-tool-hover-bg-color, #eee);
}

.dropzone .fileTools .fileTool * {
    vertical-align: middle;
    cursor: pointer;
}

.dropzone .fileTools .fileTool img {
    max-height: 20px;
}

.dropzone.scrollable {
    overflow-y: auto;
    height: 250px;
}

.dropzone.scrollable.hasLowerLeft,
.dropzone.scrollable.hasLowerRight {
    height: 280px;
    padding-bottom: 30px;
}

.dropzone .fileSecuritySign {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px;
}

.dropzone .fileSecuritySign .info {
    font-size: 14px;
}

.dropzone .hiddenFileSecuritySignInfo .fileSecuritySign .info,
.dropzone.dz-started .fileSecuritySign .info {
    display: none;
}

@media (max-width: 500px) {
    .dropzone .fileSecuritySign .info {
        display: none;
    }
}

.dropzone .viewSelect {
    display: inline-flex;
    align-items: center;
    margin: 3px;
    vertical-align: middle;
    color: #666;
    color: var(--theme-dropzone-view-select-color, #666);
}

.dropzone:not(.dz-started) .viewSelect {
    display: none;
}

.dropzone .viewSelect>* {
    display: inline-block;
    font-size: 22px;
}

.dropzone .viewSelect * {
    cursor: pointer;
}

.dropzone:not(.listView) .viewSelect .gridView {
    display: none;
}

.dropzone.listView .viewSelect .listView {
    display: none;
}

.dropzone .sortTools {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 3px;
    vertical-align: middle;
    font-size: 0;
    color: #666;
    color: var(--theme-dropzone-sort-tools-color, #666);
}

.dropzone:not(.dz-started) .sortTools {
    display: none;
}

.dropzone .sortTools>* {
    display: inline-block;
    font-size: 18px;
    margin-right: 5px;
}

.dropzone .sortTools * {
    cursor: pointer;
}

.dropzone .ratingView {
    display: inline-flex;
    align-items: center;
    position: relative;
    left: -1px;
}

.dropzone .ratingView .content {
    display: flex;
    align-items: center;
}

.dropzone .ratingView .star {
    font-size: 22px;
    color: #e7a81b;
    color: var(--theme-dropzone-rating-star-color, #e7a81b);
    position: relative;
    left: 0;
    top: -1px;
}

.dropzone .ratingView .value {
    margin-right: 5px;
    font-size: 15px;
}

[dir="rtl"] .dropzone .ratingView .value {
    margin-right: 0;
    margin-left: 5px;
}

.dropzone .ratingView .votes {
    font-size: 0.8em;
    color: #333;
    color: var(--theme-dropzone-rating-votes-color, #333);
}

.dropzone.dz-started .ratingView {
    display: none;
}

@media (max-width: 500px) {
    .dropzone .ratingView {
        display: none;
    }
}

.dropzone.importing .dz-message {
    visibility: hidden;
}

.dropzone.importing::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/squares.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 30%;
}

.dropzone.immutable .importTools,
.dropzone.immutable .dz-remove {
    display: none;
}

.dropzone.dz-started .notStarted {
    display: none;
}

.dropzone .desktopVersionLink a {
    font-size: 14px;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dropzone .desktopVersionLink a .text {
    font-size: 14px;
    position: relative;
    top: -1px;
}

.dropzone.dz-started .desktopVersionLink {
    display: none;
}

@media (max-width: 500px) {
    .dropzone .desktopVersionLink {
        display: none;
    }
}

.dropzone.dz-drag-hover:not(.sorting)>* {
    opacity: 0.5;
}

.dropzone.dz-drag-hover:not(.sorting) * {
    pointer-events: none;
}

.dropzone.dz-drag-hover:not(.sorting) {
    border-style: solid;
    overflow: hidden;
}

.dropzone .dz-drag-hover-message {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 32px;
    pointer-events: none;
    z-index: 999;
    color: #ccc;
    color: var(--theme-dropzone-drag-hover-color, #ccc);
    background-color: #444;
    background-color: var(--theme-dropzone-drag-hover-bg-color, #444);
}

.dropzone.hasDragHoverMessage.dz-drag-hover:not(.sorting)>*:not(.dz-drag-hover-message) {
    visibility: hidden;
}

.dropzone.hasDragHoverMessage.dz-drag-hover:not(.sorting) .dz-drag-hover-message {
    display: flex;
    opacity: 1;
}

body.hasLayerWindow {
    overflow: hidden;
}

.layerWindowWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    overflow: auto;
}

.layerWindow {
    position: relative;
    text-align: left;
    border: 0 none;
    margin: 0;
    padding: 0;
    color: #000;
    border: 1px solid #555;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
    margin: auto;
    max-width: 100%;
    flex: 0 1 auto;
    display: flex;
    box-sizing: border-box;
}

.layerWindow a {
    color: #0048b2;
}

.layerWindowTitle {
    padding: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: left;
}

.layerWindowClose {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    font-family: sans-serif;
    font-size: 28px;
    color: #555;
    cursor: pointer;
    display: flex;
    z-index: 1;
}

.layerWindowClose svg {
    width: 24px;
    height: 24px;
    fill: #555;
}

.layerWindowClose:hover {
    background-color: #f0f0f0;
}

.layerWindowBody {
    color: #000;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 1 auto;
}

.layerWindowBody.noTitle {
    margin: 10px;
}

/* @keyframes : focus {
    outline: none;
} */

html,
body {
    margin: 0;
    padding: 0;
    color: #000;
    border: 0 none;
    min-width: 360px;
    font-family: system-ui, arial, sans-serif;
    letter-spacing: 0.02em;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

html {
    height: 100%;
    overflow-y: scroll;
}

body {
    min-height: 100%;
    color: #000;
    color: var(--theme-body-color, #000);
    background-color: #fff;
    background-color: var(--theme-body-bg-color, #fff);
    text-align: center;
}

[dir="rtl"] {
    direction: rtl;
}

[dir="ltr"] {
    direction: ltr;
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.25em;
    font-weight: 700;
    margin-bottom: 15px;
}

h2 {
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 15px;
}

h3 {
    font-size: 1em;
    font-weight: 700;
}

h1+h2 {
    margin-top: -5px;
    font-size: 1.2em;
    color: inherit;
    color: var(--theme-subtitle-color, inherit);
}

a,
a:visited,
span.link {
    text-decoration: none;
    cursor: pointer !important;
    color: #900000;
    color: var(--theme-link-color, #900000);
}

a:hover:not(.btn):not(.noHover),
span.link:hover {
    text-decoration: none;
    color: red;
    color: var(--theme-link-hover-color, red);
}

a.larger,
span.link.larger {
    font-size: 1.2em;
}

a.underline,
span.link.underline {
    text-decoration: underline;
}

a.plus::before,
span.link.plus::before {
    content: "+ ";
    font-size: 0.8em;
    white-space: nowrap;
}

a.plus::after,
span.link.plus::after {
    content: " +";
    font-size: 0.8em;
    white-space: nowrap;
}

a.saquo::before,
span.link.saquo::before {
    content: "› ";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

a.saquo::after,
span.link.saquo::after {
    content: " ‹";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

a.raquo::before,
span.link.raquo::before {
    content: "» ";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

a.rightArrow::after,
span.link.rightArrow::after {
    content: " →";
    font-size: 1em;
    position: relative;
    top: -1px;
    white-space: nowrap;
}

img {
    max-width: 100%;
    box-sizing: border-box;
    border: 0 none;
    height: auto;
}

img:not([src]),
img[src=""] {
    border: 0 none;
    box-sizing: border-box;
    background-color: #eee;
    overflow: hidden;
    background-color: var(--theme-no-src-bg-color, #eee);
}

iframe {
    max-width: 100%;
    box-sizing: border-box;
    border: 0 none;
}

iframe:not([src]),
iframe[src=""] {
    box-sizing: border-box;
    background-color: #eee;
    background-color: var(--theme-no-src-bg-color, #eee);
}

iframe.video169 {
    max-width: 100%;
    max-height: calc(100vw * 9 / 16);
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.disc {
    list-style: disc outside;
    padding-left: 1.1em;
}

[dir="rtl"] ul.disc.smaller {
    padding-left: 0;
    padding-right: 1.1em;
}

ul.smaller {
    font-size: smaller;
}

button,
[onclick] {
    cursor: pointer;
}

.noUserSelect,
img {
    user-select: none;
}

.hidden,
.template {
    display: none !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(100%);
}

.enableOnDocReady {
    pointer-events: none;
}

.showOnDocReady {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}

.errorBox {
    padding: 5px;
    border: 2px solid red;
}

.okBox {
    padding: 5px;
    border: 2px solid green;
}

.inputError,
.formElementError {
    border-color: red;
    border-style: dashed;
}

.round10 {
    border-radius: 10px;
}

.round5 {
    border-radius: 5px;
}

.middle {
    vertical-align: middle;
}

.middleAll * {
    vertical-align: middle;
}

.clickable:hover {
    cursor: pointer;
}

.clear {
    float: none;
    clear: both;
}

.clearfix::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.ib {
    display: inline-block;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.textLeft,
.tl {
    text-align: left !important;
}

[dir="rtl"] .textLeft,
[dir="rtl"] .tl {
    text-align: right !important;
}

.textCenter,
.tc {
    text-align: center !important;
}

.textRight,
.tr {
    text-align: right !important;
}

[dir="rtl"] .textRight,
[dir="rtl"] .tr {
    text-align: left !important;
}

.emoji {
    font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
        "Segoe UI Symbol";
}

.fhl {
    display: flex;
    justify-content: center;
}

.fhc {
    display: flex;
    justify-content: center;
}

.fhr {
    display: flex;
    justify-content: flex-end;
}

.fvt {
    display: flex;
    align-items: flex-start;
}

.fvm {
    display: flex;
    align-items: center;
}

.fvb {
    display: flex;
    align-items: flex-end;
}

.singleLine {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mt0 {
    margin-top: 0 !important;
}

.mt05 {
    margin-top: 0.5em !important;
}

.mt1 {
    margin-top: 1em !important;
}

.mt2 {
    margin-top: 2em !important;
}

.mt3 {
    margin-top: 3em !important;
}

.mt4 {
    margin-top: 4em !important;
}

.mt5 {
    margin-top: 5em !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb05 {
    margin-bottom: 0.5em !important;
}

.mb1 {
    margin-bottom: 1em !important;
}

.mb2 {
    margin-bottom: 2em !important;
}

.mb3 {
    margin-bottom: 3em !important;
}

.mb4 {
    margin-bottom: 4em !important;
}

.mb5 {
    margin-bottom: 5em !important;
}

.mr0 {
    margin-right: 0 !important;
}

.mr05 {
    margin-right: 0.5em !important;
}

.mr1 {
    margin-right: 1em !important;
}

.mr2 {
    margin-right: 2em !important;
}

.mr3 {
    margin-right: 3em !important;
}

.mr4 {
    margin-right: 4em !important;
}

.mr5 {
    margin-right: 5em !important;
}

.ml0 {
    margin-left: 0 !important;
}

.ml05 {
    margin-left: 0.5em !important;
}

.ml1 {
    margin-left: 1em !important;
}

.ml2 {
    margin-left: 2em !important;
}

.ml3 {
    margin-left: 3em !important;
}

.ml4 {
    margin-left: 4em !important;
}

.ml5 {
    margin-left: 5em !important;
}

.m0 {
    margin: 0 !important;
}

.m05 {
    margin: 0.5em !important;
}

.m1 {
    margin: 1em !important;
}

.m2 {
    margin: 2em !important;
}

.m3 {
    margin: 3em !important;
}

.m4 {
    margin: 4em !important;
}

.m5 {
    margin: 5em !important;
}

.nhm1px {
    margin-left: -1px;
    margin-right: -1px;
}

.nhm2px {
    margin-left: -2px;
    margin-right: -2px;
}

.pt0 {
    padding-top: 0 !important;
}

.pt05 {
    padding-top: 0.5em !important;
}

.pt1 {
    padding-top: 1em !important;
}

.pt2 {
    padding-top: 2em !important;
}

.pt3 {
    padding-top: 3em !important;
}

.pt4 {
    padding-top: 4em !important;
}

.pt5 {
    padding-top: 5em !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pb05 {
    padding-bottom: 0.5em !important;
}

.pb1 {
    padding-bottom: 1em !important;
}

.pb2 {
    padding-bottom: 2em !important;
}

.pb3 {
    padding-bottom: 3em !important;
}

.pb4 {
    padding-bottom: 4em !important;
}

.pb5 {
    padding-bottom: 5em !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pr05 {
    padding-right: 0.5em !important;
}

.pr1 {
    padding-right: 1em !important;
}

.pr2 {
    padding-right: 2em !important;
}

.pr3 {
    padding-right: 3em !important;
}

.pr4 {
    padding-right: 4em !important;
}

.pr5 {
    padding-right: 5em !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl05 {
    padding-left: 0.5em !important;
}

.pl1 {
    padding-left: 1em !important;
}

.pl2 {
    padding-left: 2em !important;
}

.pl3 {
    padding-left: 3em !important;
}

.pl4 {
    padding-left: 4em !important;
}

.pl5 {
    padding-left: 5em !important;
}

.p0 {
    padding: 0 !important;
}

.p05 {
    padding: 0.5em !important;
}

.p1 {
    padding: 1em !important;
}

.p2 {
    padding: 2em !important;
}

.p3 {
    padding: 3em !important;
}

.p4 {
    padding: 4em !important;
}

.p5 {
    padding: 5em !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}

.row.nowrap {
    flex-wrap: nowrap;
}

.row.center {
    justify-content: center;
    align-items: center;
}

.row.hcenter {
    justify-content: center;
}

.row.vcenter {
    align-items: center;
}

.col,
[class*="col-"] {
    box-sizing: border-box;
    position: relative;
}

.col-0 {
    display: none;
}

.col-25 {
    width: 25%;
}

.col-33 {
    width: 33.33333333%;
}

.col-50 {
    width: 50%;
}

.col-66 {
    width: 66.66666666%;
}

.col-75 {
    width: 75%;
}

.col-100 {
    width: 100%;
    margin-left: auto;
}

@media (max-width: 80em) {
    .col-xl-0 {
        display: none;
    }

    .col-xl-25 {
        width: 25%;
    }

    .col-xl-33 {
        width: 33.33333333%;
    }

    .col-xl-50 {
        width: 50%;
    }

    .col-xl-66 {
        width: 66.66666666%;
    }

    .col-xl-75 {
        width: 75%;
    }

    .col-xl-100 {
        width: 100%;
        margin-left: auto;
    }
}

@media (max-width: 64em) {
    .col-l-0 {
        display: none;
    }

    .col-l-25 {
        width: 25%;
    }

    .col-l-33 {
        width: 33.33333333%;
    }

    .col-l-50 {
        width: 50%;
    }

    .col-l-66 {
        width: 66.66666666%;
    }

    .col-l-75 {
        width: 75%;
    }

    .col-l-100 {
        width: 100%;
        margin-left: auto;
    }
}

@media (max-width: 48em) {
    .col-m-0 {
        display: none;
    }

    .col-m-25 {
        width: 25%;
    }

    .col-m-33 {
        width: 33.33333333%;
    }

    .col-m-50 {
        width: 50%;
    }

    .col-m-66 {
        width: 66.66666666%;
    }

    .col-m-75 {
        width: 75%;
    }

    .col-m-100 {
        width: 100%;
        margin-left: auto;
    }
}

@media (max-width: 35.5em) {
    .col-s-0 {
        display: none;
    }

    .col-s-25 {
        width: 25%;
    }

    .col-s-33 {
        width: 33.33333333%;
    }

    .col-s-50 {
        width: 50%;
    }

    .col-s-66 {
        width: 66.66666666%;
    }

    .col-s-75 {
        width: 75%;
    }

    .col-s-100 {
        width: 100%;
        margin-left: auto;
    }
}

@media (max-width: 26.5em) {
    .col-xs-0 {
        display: none;
    }

    .col-xs-25 {
        width: 25%;
    }

    .col-xs-33 {
        width: 33.33333333%;
    }

    .col-xs-50 {
        width: 50%;
    }

    .col-xs-66 {
        width: 66.66666666%;
    }

    .col-xs-75 {
        width: 75%;
    }

    .col-xs-100 {
        width: 100%;
        margin-left: auto;
    }
}

.btn.orange,
.btn.action {
    --btn-color: #d97d0d;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.green {
    --btn-color: #4caf50;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.blue {
    --btn-color: #008cba;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.red {
    --btn-color: #f44336;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.black {
    --btn-color: #444;
    --btn-text-color: #fff;
    --btn-text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
}

.btn.white {
    --btn-color: #fff;
    --btn-text-color: #333;
}

.btn.gray {
    --btn-color: #ccc;
    --btn-text-color: #444;
}

.btn.yellow {
    --btn-color: #f1d600;
    --btn-text-color: #444;
}

.btn.amber {
    --btn-color: #ffbf00;
    --btn-text-color: #444;
}

.btn,
.btn:visited {
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 0 none;
    text-decoration: none;
    font-family: arial, sans-serif;
    font-size: inherit;
    background-color: #d97d0d;
    background-color: var(--btn-color, #d97d0d);
    color: #fff;
    color: var(--btn-text-color, #fff);
    border: 2px solid #d97d0d;
    border: 2px solid var(--btn-color, #d97d0d);
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--btn-text-shadow, none);
    border-radius: 4px;
    gap: 10px;
    user-select: none;
}

.btn svg {
    fill: white;
    fill: var(--btn-text-color);
}

.btn,
.btn * {
    transition-duration: 0s;
}

.btn:hover {
    filter: brightness(0.85);
}

.btn.disabled,
.btn[disabled] {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(100%);
}

.btn.uppercase {
    text-transform: uppercase;
}

.btn.big,
.btn.large {
    font-size: 20px;
}

.btn.bold {
    font-weight: bold;
}

.btn.action {
    font-weight: 500;
    font-size: 20px;
}

.btn.border {
    border-color: #555;
}

.btn.outline:hover {
    filter: none;
}

.btn.outline:not(:hover) {
    background-color: #fff;
    text-shadow: none;
    color: #d97d0d;
    color: var(--btn-color, #d97d0d);
}

.btn.outline:not(:hover) svg {
    fill: #d97d0d;
    fill: var(--btn-color, #d97d0d);
}

.btn.linkLike {
    border: 0 none;
    background-color: transparent;
    text-shadow: none;
    color: #057da4;
}

.btn.linkLike:hover {
    filter: none;
    text-decoration: underline;
}

.btn.round {
    border-radius: 50%;
}

.btn .extInfo {
    font-size: 0.62em;
    position: relative;
    top: 1px;
}

.btn>span {
    white-space: nowrap;
}

.btn.wrappable,
.btn.wrapable {
    flex-wrap: wrap;
}

.toggleBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 1px;
}

.toggleBtn input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    right: 0;
    bottom: 0;
}

.toggleBtn .slider {
    top: 0;
    left: 0;
    width: 45px;
    height: 26px;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ccc;
    background-color: var(--theme-toogle-btn-off-slider-bg-color, #ccc);
}

.toggleBtn,
.toggleBtn * {
    cursor: pointer;
}

.toggleBtn .slider:before {
    content: "";
    height: 22px;
    width: 22px;
    transition: 0.4s;
    margin: 0 2px;
    background-color: #fff;
    background-color: var(--theme-toogle-btn-slider-inner-bg-color, #fff);
}

.toggleBtn input:checked+.slider {
    justify-content: flex-end;
    background-color: #0078d5;
    background-color: var(--theme-toogle-btn-on-slider-bg-color, #0078d5);
}

.toggleBtn .slider.round {
    border-radius: 100px;
}

.toggleBtn .slider.round:before {
    border-radius: 50%;
}

.toggleBtn .label {
    margin: 0 5px;
}

.op075h1 {
    opacity: 0.75 !important;
}

.op075h1:hover {
    opacity: 1 !important;
}

.container {
    width: 1270px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    max-width: 100%;
}

.container.fullWidth {
    width: 100%;
}

.stickyContainer {
    position: relative;
}

#topBar {
    height: 50px;
    width: 100%;
    margin-bottom: 60px;
    padding-top: 3px;
    line-height: 1;
    border-bottom: 2px solid #0078d5;
    border-color: var(--theme-normal-color);
}

#topBar,
#topBar * {
    color: #0078d5;
    color: var(--theme-normal-color);
}

#topBar .container {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

#topBar .leftPane {
    width: calc(50% - 60px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#topBar .centerPane {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

#topBar .rightPane {
    width: calc(50% - 60px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#topBar .logo {
    line-height: 1;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #0078d5;
    border-color: var(--theme-normal-color);
    box-sizing: border-box;
    background-color: #fff;
    background-color: var(--theme-top-bar-logo-bg-color, #fff);
    width: 100px;
    height: 100px;
    display: inline-block;
}

#topBar .logo a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

#topBar .logo img {
    width: 100%;
    height: auto;
}

#topBar .logo:hover {
    box-shadow: 0 0 10px #aaa;
}

#topBar .brand {
    text-align: left;
    vertical-align: middle;
}

#topBar .brand a {
    font-size: 30px;
    font-weight: bold;
}

#topBar .allToolsLink {
    display: inline-flex;
    align-items: center;
    padding-top: 5px;
    gap: 5px;
    margin-left: 20px;
    margin-right: 0;
}

[dir="rtl"] #topBar .allToolsLink {
    margin-left: 0;
    margin-right: 20px;
}

@media (max-width: 1024px) {
    #topBar .allToolsLink {
        display: none !important;
    }
}

#topBar .allToolsToggle {
    margin-left: 20px;
    cursor: pointer;
}

[dir="rtl"] #topBar .allToolsToggle {
    margin-left: 0;
    margin-right: 20px;
}

#topBar .allToolsToggle::after {
    content: "v";
    display: inline-block;
    margin-left: 5px;
    font-weight: normal;
    transform: scaleX(1.5) scaleY(0.65);
}

[dir="rtl"] #topBar .allToolsToggle::after {
    margin-left: 0;
    margin-right: 5px;
}

#topBar .allToolsToggle.active::after {
    transform: scaleX(1.5) scaleY(0.6) rotate(180deg) translateY(-2px);
}

@media (max-width: 1024px) {
    #topBar .allToolsToggle {
        display: none !important;
    }
}

#topBar .menu {
    text-align: left;
    color: #fff;
    font-weight: bold;
}

@media (max-width: 600px) {
    #topBar .brand .sub {
        display: none !important;
    }
}

#topBar .burger.active {
    transform: rotate(90deg);
}

#topBar .download {
    display: inline-block;
    vertical-align: middle;
    height: 32px;
}

@media (max-width: 600px) {
    #topBar .download {
        display: none !important;
    }
}

#share {
    font-size: 18px;
    text-align: center;
}

#share img {
    cursor: pointer;
}

#home {
    text-align: center;
}

#home .noLimits {
    margin-bottom: 30px;
}

#tool {
    text-align: center;
    margin-bottom: 70px;
}

#tool .main {
    min-height: 300px;
    margin-bottom: 30px;
}

#tool .noLimits {
    text-align: center;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 20px;
    margin-top: -5px;
    color: inherit;
    color: var(--theme-tool-no-limits-color, inherit);
}

@media (max-width: 500px) {
    #tool .noLimits {
        font-size: 1em;
        padding: 0 0;
        border: 0 none;
        font-weight: 400;
    }
}

#tool .bottomInfo {
    padding-bottom: 30px;
}

#tool .bottomInfo::before {
    content: "ⓘ";
    font-size: 1.25em;
    display: block;
    margin-top: 20px;
}

#tool .bottomAttention {
    margin-bottom: 30px;
}

#tool .bottomAttention::before {
    content: "⚠️";
    font-size: 1.2em;
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
}

#tool .bottomInfo+.section,
#tool .bottomAttention+.section {
    margin-top: 70px;
}

.infoCells {
    text-align: center;
}

.infoCells .cell {
    width: 30%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: inline-block;
    padding: 8px;
    text-align: center;
    vertical-align: top;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.infoCells .cell h3,
.infoCells .cell .title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: block;
    padding: 10px 0;
}

.infoCells .cell img {
    vertical-align: top;
}

.infoCells .cell p {
    margin: 0;
    line-height: 24px;
    font-weight: 400;
    font-size: 15px;
}

.infoCells:not(.noInfoIcons) .cell::before {
    content: "";
    display: block;
    height: 24px;
    background-image: url(images/info_light.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.infoCells .cell::before svg {
    fill: #999 !important;
}

.infoCells .cell>span[class^="icon-"] {
    font-size: 24px;
    opacity: 0.75;
}

@media (max-width: 900px) {
    .infoCells .cell {
        width: 45%;
    }
}

@media (max-width: 650px) {
    .infoCells .cell {
        width: 90%;
    }
}

.topBottomNotification {
    display: block;
    padding: 10px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    background-color: #fdf8e4;
    color: #333;
    font-size: 0.9em;
}

.topBottomNotification.fixed,
.topBottomNotification.sticky {
    z-index: 999;
    margin: auto;
    width: 100%;
    left: 0;
}

.topBottomNotification.fixed {
    position: fixed;
}

.topBottomNotification.sticky {
    position: sticky;
}

.topBottomNotification.success {
    background-color: #def0d8;
    color: #007121;
}

.topBottomNotification.warn {
    background-color: #ffe9ce;
    color: #754101;
}

.topBottomNotification.error {
    background-color: #fbd8d8;
    color: #690101;
}

.topBottomNotification.top {
    top: 0;
    border-bottom: 1px solid silver;
    margin-bottom: 20px;
}

.topBottomNotification.bottom {
    bottom: 0;
    border-top: 1px solid silver;
}

.topBottomNotification .text-xl {
    font-size: 1.6em;
}

.topBottomNotification .text-l {
    font-size: 1.2em;
}

.topBottomNotification a:not(.btn),
.topBottomNotification a:not(.btn):hover {
    color: maroon !important;
    text-decoration: underline;
}

.topBottomNotification a.close {
    position: absolute;
    display: block;
    top: 4px;
    right: 2px;
    color: maroon;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;
}

.topBottomNotification a.close:hover {
    text-decoration: none;
}

.adBlock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.adText {
    text-align: center;
    font-family: monospace;
    padding: 3px 10px;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1;
    color: #222;
    color: var(--theme-ad-text-color, #222);
    text-transform: uppercase;
    min-width: 140px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--theme-ad-text-bg-color, #004c8e10);
}

.adBlock.mouseOverAdSpace .adText {
    background-color: var(--theme-ad-text-hover-bg-color,
            var(--theme-ad-text-bg-color, #004c8e10));
    color: var(--theme-ad-text-hover-color, var(--theme-ad-text-color, #222));
}

.adSpace {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
    margin: auto;
    max-width: 100%;
}

.adBlock:not(.filled) .adSpace,
.adBlock .adSpace[data-ad-status="unfilled"] {
    box-sizing: border-box;
    background-color: rgba(128, 128, 128, 0.05);
    background-color: var(--theme-no-ad-bg-color, rgba(128, 128, 128, 0.05));
}

.adSpace.d980x250m300x250 {
    width: 980px;
    height: 250px;
}

.adSpace.d970x250m300x250 {
    width: 970px;
    height: 250px;
}

.adSpace.d980x90m336x280,
.adSpace.d980x90m300x250,
.adSpace.d980x90m320x100 {
    width: 980px;
    height: 90px;
}

.adSpace.d970x90m336x280,
.adSpace.d970x90m300x250,
.adSpace.d970x90m320x100 {
    width: 970px;
    height: 90px;
}

.adSpace.d728x90m336x280,
.adSpace.d728x90m300x250,
.adSpace.d728x90m320x100 {
    width: 728px;
    height: 90px;
}

@media (max-width: 1000px) {

    .adSpace.d980x250m300x250,
    .adSpace.d970x250m300x250 {
        width: 300px;
        height: 250px;
    }

    .adSpace.d980x90m336x280,
    .adSpace.d980x90m300x250,
    .adSpace.d980x90m320x100,
    .adSpace.d970x90m336x280,
    .adSpace.d970x90m300x250,
    .adSpace.d970x90m320x100 {
        width: 728px;
        height: 90px;
    }
}

@media (max-width: 750px) {

    .adSpace.d980x90m336x280,
    .adSpace.d970x90m336x280,
    .adSpace.d728x90m336x280 {
        width: 336px;
        height: 280px;
    }

    .adSpace.d980x90m300x250,
    .adSpace.d970x90m300x250,
    .adSpace.d728x90m300x250 {
        width: 300px;
        height: 250px;
    }

    .adSpace.d980x90m320x100,
    .adSpace.d970x90m320x100,
    .adSpace.d728x90m320x100 {
        width: 320px;
        height: 100px;
    }
}

input,
select,
textarea {
    border: 1px solid #ccc;
    border-color: var(--theme-input-border-color, #ccc);
    background-color: #fff;
    background-color: var(--theme-input-bg-color, #fff);
    color: #000;
    color: var(--theme-input-color, #000);
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: #aaa;
    color: var(--theme-input-placeholder-color, #aaa);
}

input {
    font-size: 0.9em;
    padding: 2px;
    min-height: 24px;
    box-sizing: border-box;
}

input.glow {
    border: solid 2px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
}

input.glow:focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0059a2;
    accent-color: var(--theme-check-accent-color, #0059a2);
}

input:disabled {
    background-color: var(--theme-input-disabled-bg-color, #f5f5f5);
    opacity: 0.5;
}

select {
    min-height: 24px;
    font-size: 1em;
    box-sizing: border-box;
}

option[disabled] {
    opacity: 0.4;
}

.inputFieldWithUnitWrapper {
    display: flex;
    white-space: nowrap;
}

.inputFieldUnit {
    border: 1px solid #ccc;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0 none;
    border-color: var(--theme-input-unit-border-color, #ccc);
    background-color: var(--theme-input-unit-bg-color, #eee);
    font-size: 0.85em;
    font-family: Arial, Helvetica, sans-serif;
}

.note.terms {
    font-size: 13px;
    font-weight: 400;
}

.inputZone {
    border: 2px dashed #0078d5;
    border-color: var(--theme-input-zone-border-color, #0078d5);
    background-color: #fffce5;
    background-color: var(--theme-input-zone-bg-color, #fffce5);
    padding: 50px 20px;
    text-align: center;
}

.inputZone .title {
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 15px;
}

.pdfLoadZone {
    border: 1px solid #6d93a5;
    padding: 15px 7px;
    text-align: center;
    margin: 30px 0;
}

.pdfLoadZone>.tools {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdfLoadZone>.tools [class*="icon-"] {
    font-size: 1.4em;
    margin: 5px 5px;
    color: #666;
    color: var(--theme-pdf-load-zone-tool-color, #666);
}

.pdfLoadZone>.tools .textBtn {
    font-size: 1.1em;
    display: inline-block;
    padding: 2px;
    margin: 5px 5px;
    color: #333;
    color: var(--theme-pdf-load-zone-tool-color, #333);
}

.pdfLoadZone>.tools [class*="icon-"]:hover,
.pdfLoadZone>.tools .textBtn:hover {
    color: #0078d5;
    color: var(--theme-pdf-load-zone-tool-hover-color,
            var(--theme-normal-color, #0078d5));
}

.pdfLoadZone>.sep {
    height: 1px;
    margin: 20px 0;
    background-color: #ddd;
    background-color: var(--theme-pdf-load-zone-sep-color, #ddd);
}

.pdfLoadZone>.note {
    margin-bottom: 20px;
}

.pdfLoadZone>.note+.pdfFile,
.pdfLoadZone>.sep+.pdfFile {
    margin-top: -20px;
}

.pdfLoadZone .pdfFile+.pdfFile {
    border-top: 1px solid #ddd;
    border-top: 1px solid var(--theme-pdf-load-zone-sep-color, #ddd);
}

.pdfTargetZone {
    margin-top: 5px;
    border: 1px solid #49626d;
    padding: 15px 7px;
    text-align: center;
    margin: 30px 0;
}

.pdfTargetZone .note {
    margin-bottom: 20px;
}

.resultZone {
    margin-top: 5px;
    border: 1px solid #6d93a5;
    padding: 7px;
    text-align: center;
    margin: 30px 0;
}

.resultZone .tools * {
    vertical-align: middle;
}

.workerZone {
    margin-top: 30px;
    border: 1px solid #1aaa16;
    border-color: var(--theme-worker-zone-border-color, #1aaa16);
    display: flex;
    flex-direction: column;
    box-sizing: content-box;
    overflow-x: hidden;
    position: relative;
}

.workerZone .info {
    padding: 5px;
    font-size: 0.85em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #efe;
    background-color: var(--theme-worker-zone-info-bg-color, #efe);
    color: #555;
    color: var(--theme-worker-zone-info-color, #555);
}

.workerZone .info .key {
    color: #555;
    color: var(--theme-worker-zone-info-key-color, #555);
}

.workerZone .info .value {
    color: navy;
    color: var(--theme-worker-zone-info-value-color, navy);
}

.workerZone .content {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 330px;
}

.workerZone iframe.workerFrame {
    display: block;
    border: 0 none;
    flex: 1 1 auto;
    min-height: 330px;
}

.workerZone .loader {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #999;
    box-shadow: 32px 0 #999, -32px 0 #999;
    animation: workerZone-loader 0.5s ease-out infinite alternate;
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
}

@keyframes workerZone-loader {
    0% {
        background-color: #9992;
        box-shadow: 32px 0 #9992, -32px 0 #999;
    }

    50% {
        background-color: #999;
        box-shadow: 32px 0 #9992, -32px 0 #9992;
    }

    100% {
        background-color: #9992;
        box-shadow: 32px 0 #999, -32px 0 #9992;
    }
}

.workerZone .error {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    align-items: center;
    color: var(--theme-workerZone-error-color, #c05353);
    font-size: 1.1em;
}

.workerZone .error .xhrError .code {
    font-weight: bold;
}

#form {
    padding: 1px 0;
}

#form.stickyTop {
    position: sticky;
    top: -1px;
    background-color: #fff;
    background-color: var(--theme-body-bg-color, #fff);
}

#form.stickyTop.stuck {
    border-bottom: 1px solid #ccc;
    z-index: 99;
}

#form.stickyBottom {
    position: sticky;
    bottom: -1px;
    background-color: #fff;
    background-color: var(--theme-body-bg-color, #fff);
    border-top: 1px solid transparent;
    z-index: 99;
}

#form.stickyBottom.stuck {
    border-top-color: #ccc;
}

#params {
    background-color: #fff;
    background-color: var(--theme-params-bg-color, #fff);
    border: 1px solid #ddd;
    border-color: var(--theme-params-border-color, #ddd);
    padding: 3px 0;
    margin: 3px 0;
    font-size: 0.9em;
    min-height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
}

[dir="rtl"] #params {
    text-align: right;
}

#params [class^="icon-"] {
    font-size: 20px;
}

#params .toggleBtn .slider {
    width: 36px;
    height: 20px;
}

#params .toggleBtn .slider:before {
    width: 17px;
    height: 17px;
}

#params .param {
    box-sizing: border-box;
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
    align-items: center;
    margin: 0;
    padding: 3px 5px;
    border: 2px solid transparent;
}

#params .param input[type="checkbox"] {
    margin: 0;
}

#params .param.flex {
    display: inline-flex;
}

#params .param label {
    overflow: hidden;
    text-overflow: ellipsis;
}

#params .toggleIcon {
    font-size: 15px;
    padding: 3px 2px;
    cursor: pointer;
}

#params .toggleIcon:hover {
    background-color: var(--theme-params-toggle-icon-hover-bg-color, #f5f5f5);
}

#params .toggleIcon.checked {
    background-color: var(--theme-params-toggle-icon-checked-bg-color, #ddd);
}

#params .flexBreak {
    display: none;
    flex-basis: 100%;
    height: 0;
}

#form.inline #params .flexBreak {
    display: none !important;
}

#params .ms-options-wrap>button {
    background-color: #fff;
    background-color: var(--theme-input-bg-color, #fff);
    color: #999;
    color: var(--theme-input-placeholder-color, #999);
    border: 1px solid #ccc;
    border-color: var(--theme-input-border-color, #ccc);
}

#params .ms-options-wrap.ms-has-selections>button {
    color: #333;
    color: var(--theme-input-color, #333);
}

#params .ms-options {
    background-color: #fff;
    background-color: var(--theme-params-ms-options-bg-color, #fff);
    color: #333;
    color: var(--theme-params-ms-options-color, #333);
}

#params .ms-options label:hover {
    background-color: #efefef;
    background-color: var(--theme-params-ms-options-item-hover-bg-color, #efefef);
}

#params .ms-options li.selected label {
    background-color: #efefef;
    background-color: var(--theme-params-ms-options-selected-item-hover-bg-color,
            #efefef);
}

#actionButtons {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#actionButtons .btn {
    font-size: 24px;
    margin: 0;
    min-height: 44px;
}

#actionButtons.stickyBottom {
    position: sticky;
    bottom: 3px;
    z-index: 100;
}

#form.stickyBottom #actionButtons,
#form.stickyTop #actionButtons {
    margin-top: 3px;
}

#form:not(.inline) #actionButtons .btn {
    border-radius: 24px;
    padding: 10px 20px;
    font-size: 24px;
    min-width: 250px;
    line-height: 1;
    font-weight: 500;
}

#form.autoInline.inline {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

#form.autoInline.inline #actionButtons {
    margin: 2px 0;
}

@media (min-width: 850px) {
    #form.inline {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
    }

    #form.autoInline.inline #actionButtons {
        margin: 0;
    }
}

#pdfLoadZone+#form #actionButtons {
    margin-top: 3px;
}

#form.centered #params {
    margin: 20px 0 20px 0;
    padding: 8px 0;
    justify-content: center;
    border-style: solid;
    border-width: 1px;
}

@media (min-width: 900px) {
    #form.centered #params {
        column-gap: 15px;
    }
}

#form.centered #params input,
#form.centered #params select {
    min-height: 26px;
    font-size: 14px;
}

#form.centered #params.scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
}

#form.centered #params.scrollable .param {
    padding: 3px;
}

#form.centered #actionButtons {
    flex-direction: column;
    gap: 5px;
}

#dropzoneUploadIndicator {
    font-size: 12px;
    min-width: 350px;
    display: flex;
    min-height: 18px;
    justify-content: center;
    align-items: center;
}

#footer {
    text-align: center;
    padding: 20px 0;
    background-color: #fcfcfc;
    background-color: var(--theme-footer-bg-color, #fcfcfc);
    border-top: 1px solid #f3f3f3;
    border-top: var(--theme-footer-border-top, 1px solid #f3f3f3);
    margin-top: 70px;
}

#footerLinks {
    margin-bottom: 20px;
}

#footerSocialLang {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

#footerUrl {
    margin-top: 20px;
}

#footerNote {
    margin-top: 30px;
    color: #666;
    color: var(--theme-footer-color, #666);
    font-size: 0.85em;
}

#footerNote .love {
    font-size: 0;
}

#footerNote .love::after {
    content: "❤️";
    font-size: 16px;
    color: red;
}

#footerSocial {
    display: flex;
    gap: 10px;
    justify-content: center;
}

#footerSocial a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1000px) {
    #footerUrl {
        margin-left: auto;
        margin-right: auto;
        margin-top: -35px;
        width: 200px;
        position: relative;
    }
}

@media (max-width: 600px) {
    #footerSocialLang {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }
}

#footer .spacer {
    padding: 0 5px 0 5px;
}

#footerLinks a,
#footerLinks span.link {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9em;
    box-sizing: border-box;
}

#footer .bordered {
    border: 1px solid #d0d0d0;
}

#footer .slogan {
    margin-top: -50px;
    margin-bottom: 35px;
    font-size: 0.8em;
    color: #666;
    color: var(--theme-footer-slogan-color, #666);
}

@media (max-width: 600px) {
    #footer .mcol {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #footer .mcol>* {
        display: inline-block;
        padding: 15px 20px;
    }

    #footer .mhide {
        display: none;
    }
}

#footerLangSwitch {
    position: relative;
    margin: auto;
    width: 200px;
    margin-top: 40px;
    display: inline-block;
}

#footerLangSwitch ul {
    width: 100%;
    padding: 0;
    margin: auto;
    text-align: center;
    position: absolute;
    bottom: 100%;
    list-style-type: none;
    box-sizing: border-box;
    border-radius: 0.25em;
}

#footerLangSwitch ul li {
    display: none;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    background-color: var(--theme-footer-lang-switch-bg-color, #fff);
    color: var(--theme-footer-lang-switch-color, #000);
}

#footerLangSwitch ul:not(.clicked) li.selected {
    border-radius: 0.25em;
    display: flex;
}

#footerLangSwitch ul.clicked {
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
}

#footerLangSwitch ul.clicked li {
    display: block;
    border-width: 0;
}

#footerLangSwitch ul.clicked li:first-child {
    margin-top: 0;
}

#footerLangSwitch ul.clicked li.selected {
    pointer-events: none;
}

#footerLangSwitch li:hover {
    filter: brightness(0.85);
}

#footerLangSwitch a {
    text-decoration: none;
    font-size: 16px;
    color: inherit;
    padding: 8px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    gap: 5px;
    flex: 1;
}

#footerLangSwitch ul.clicked li.selected a {
    color: red;
}

#footerLangSwitch ul:not(.clicked) li.selected a:before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGZpbGw9Im5vbmUiIGNvbG9yPSIjNDQ0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0iTTEyLDIyIEMxNC42NjY2NjY3LDE5LjU3NTc1NzYgMTYsMTYuMjQyNDI0MiAxNiwxMiBDMTYsNy43NTc1NzU3NiAxNC42NjY2NjY3LDQuNDI0MjQyNDIgMTIsMiBDOS4zMzMzMzMzMyw0LjQyNDI0MjQyIDgsNy43NTc1NzU3NiA4LDEyIEM4LDE2LjI0MjQyNDIgOS4zMzMzMzMzMywxOS41NzU3NTc2IDEyLDIyIFoiLz48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0yLjUgOUwyMS41IDlNMi41IDE1TDIxLjUgMTUiLz48L3N2Zz4=);
    width: 18px;
    height: 18px;
    position: relative;
    left: 0;
    top: 1px;
}

.section {
    padding-top: 90px;
    padding-bottom: 90px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    left: 0;
    top: 0;
}

.section>.icon {
    margin-top: -40px;
    margin-bottom: 20px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.section>.icon img {
    height: 100px;
}

.section>.title {
    font-size: 2.2em;
    margin-bottom: 40px;
    text-align: center;
}

.section>.subTitle {
    font-size: 1.2em;
    margin-top: -25px;
    margin-bottom: 30px;
    text-align: center;
}

.section:nth-of-type(odd) {
    position: relative;
    background-color: #e5f2fc;
    background-color: var(--theme-bg-color, #e5f2fc);
    background: #e5f2fc;
    background: var(--theme-section-odd-bg, #e5f2fc);
}

.sectionsCollapsed .section:nth-of-type(odd):not(.expanded) {
    background: var(--theme-section-odd-collapsed-bg, #e5f2fc);
}

.sectionsCollapsed .section:nth-of-type(odd).expanded {
    background: var(--theme-section-odd-expanded-bg,
            var(--theme-section-odd-collapsed-bg, #e5f2fc));
}

.sectionsCollapsed .section:not(.expanded) {
    padding: 24px;
    cursor: pointer;
}

.sectionsCollapsed .section:not(.expanded):hover {
    color: #c00000;
    color: var(--theme-section-collapsed-hover-color, #c00000);
}

.sectionsCollapsed .section:not(.expanded)>*:not(.title) {
    display: none;
}

.sectionsCollapsed .section:not(.expanded)>.title {
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
}

.sectionsCollapsed .section:not(.expanded) .title::after {
    content: "v";
    display: inline-block;
    padding: 2px 4px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 0.8em;
    color: #666;
    transform: scaleX(1.5) scaleY(0.65);
}

[dir="rtl"].sectionsCollapsed .section:not(.expanded) .title::after {
    margin-left: 0;
    margin-right: 10px;
}

.sectionsCollapsed .section.expanded .collapseHandle {
    background-color: #ffdca2;
    background-color: var(--theme-section-collapse-color, #ffdca2);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxNGw1LTUgNSA1eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: center center;
    height: 30px;
    margin-top: -90px;
    margin-bottom: 60px;
    cursor: pointer;
}

.sectionsCollapsed .section.expanded .collapseHandle:hover {
    background-color: #fbc25f;
    background-color: var(--theme-section-collapse-hover-color, #fbc25f);
}

.toolSelect {
    text-align: center;
}

.toolSelect .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.toolSelect .toolLink {
    display: inline-block;
    width: 165px;
    height: 100px;
    text-align: center;
    background-color: #fff;
    background-color: var(--theme-tool-select-tool-link-bg-color, #fff);
    border: 1px solid #7fbef2;
    border-color: var(--theme-tool-select-tool-link-border-color,
            #7fbef2) !important;
    padding: 5px;
    margin: 5px 5px;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    color: inherit;
    flex-shrink: 0;
    border-radius: 3px;
}

.hasHover .toolSelect .toolLink:hover {
    background-color: #e5f2fc;
    background-color: var(--theme-hover-bg-color, #e5f2fc);
}

.section:nth-of-type(odd) .toolSelect .toolLink:not(:hover) {
    background-color: #fdfdfd;
    background-color: var(--theme-tool-select-tool-link-bg-color-alt,
            var(--theme-tool-select-tool-link-bg-color));
}

.toolSelect.larger .toolLink {
    width: 230px;
    height: 125px;
}

.toolSelect.xl .toolLink {
    width: 330px;
    height: 150px;
    font-size: 1.4em;
}

.toolSelect.xl .toolLink .label {
    font-size: 18px;
}

.toolSelect .toolLink .icon {
    height: 60%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    box-sizing: border-box;
}

.toolSelect .toolLink .icon img {
    max-height: 100%;
    width: auto;
}

.toolSelect .toolLink .icon.withPadding {
    padding: 15px;
    padding-bottom: 0;
}

.toolSelect .toolLink:hover .icon {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

.toolSelect .toolLink .label {
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
    font-size: 11pt;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 400px) {
    .toolSelect .toolLink {
        width: 150px;
    }
}

.toolSelect .toolLink .favstar {
    position: absolute;
    top: -2px;
    right: -3px;
    font-size: 14px;
    cursor: pointer;
    padding: 3px;
}

html[dir="rtl"] .toolSelect .toolLink .favstar {
    left: -3px;
    right: auto;
}

.toolSelect .toolLink .favstar .icon-star-empty {
    color: rgba(102, 102, 102, 0.7);
}

.toolSelect .toolLink .favstar .icon-star {
    color: rgba(231, 113, 27, 0.7);
}

.toolSelect .filters {
    padding: 0;
    font-size: 13px;
    margin: 0 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    color: var(--theme-tool-select-filers-color, #666);
}

.toolSelect .filters>* {
    display: inline-block;
    margin: 5px;
}

.toolSelect .filter {
    cursor: pointer;
    white-space: nowrap;
}

.toolSelect .filter.active {
    text-decoration: underline;
}

.toolSelect .filters .sep {
    padding: 0 2px;
    display: inline-block;
}

.toolSelect .filters .sep::before {
    content: " | ";
}

.toolSelect .filters input {
    width: 200px;
    height: 21px;
    flex-shrink: 1;
    border-radius: 4px;
}

.toolSelect .filters input:focus {
    outline: none;
}

@media (max-width: 600px) {
    .toolSelect .filters {
        flex-wrap: wrap;
    }

    .toolSelect .filters input {
        width: 364px;
        height: 25px;
    }

    .toolSelect .filters .searchSep {
        display: none;
    }
}

#topToolSelect {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 5px dotted #0078d5;
    border-bottom-color: var(--theme-top-tool-select-sep-color, #0078d5);
    margin-top: 70px;
}

@media (min-width: 500px) {
    #topToolSelect .toolSelect .toolLink {
        display: flex;
        width: 200px;
        height: 55px;
        align-items: center;
    }

    #topToolSelect .toolSelect .toolLink .icon {
        width: 40%;
        height: 100%;
        margin-right: 10px;
        border: 0 solid red;
    }

    [dir="rtl"] #topToolSelect .toolSelect .toolLink .icon {
        margin-right: 0;
        margin-left: 10px;
    }

    #topToolSelect .toolSelect .toolLink .label {
        text-align: left;
        justify-content: flex-start;
        border: 0 solid red;
        height: 100%;
    }

    [dir="rtl"] #topToolSelect .toolSelect .toolLink .label {
        text-align: right;
    }
}

@media (min-width: 1800px) {
    #topToolSelect .toolSelect .toolLink {
        width: 250px;
        height: 75px;
    }
}

.pdfFile {
    padding: 30px 0;
}

.pdfFile .pdfFileTools {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdfFile .pdfFileTools i[class^="icon-"] {
    font-size: 20px;
    cursor: pointer;
    margin: 5px 8px;
    color: #777;
    color: var(--theme-pdf-file-tool-color, #777);
}

.pdfFile .pdfFileTools .textBtn {
    cursor: pointer;
    margin: 5px 8px;
    color: #777;
    color: var(--theme-pdf-file-tool-color, #777);
}

.pdfFile .pdfFileTools i[class^="icon-"]:hover,
.pdfFile .pdfFileTools .textBtn:hover {
    color: #0078d5;
    color: var(--theme-pdf-file-tool-hover-color,
            var(--theme-normal-color, #0078d5));
}

.pdfPages {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.pdfPage {
    display: inline-flex;
    box-sizing: border-box;
    margin: 10px;
    position: relative;
    top: 0;
    left: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.pdfPage.square {
    width: 300px;
    height: 300px;
}

.pdfPageCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pdfPageMiddle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pdfPageContent {
    position: relative;
}

.pdfPageImgContainer {
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.pdfPageImg {
    border: 1px solid #ccc;
    max-width: 300px;
    max-height: 300px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.pdfPageNumber {
    position: absolute;
    top: 1px;
    right: 1px;
    font-family: monospace;
    font-size: 13px;
    padding: 1px 3px 1px 4px;
    background-color: rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
    color: #555;
    user-select: none;
}

.pdfPage:not(.rendered) .pdfPageNumber {
    display: none;
}

.pdfPage.square.rot-0 .pdfPageContent {
    transform: rotate(0deg);
}

.pdfPage.square.rot-90 .pdfPageContent {
    transform: rotate(90deg);
}

.pdfPage.square.rot-180 .pdfPageContent {
    transform: rotate(180deg);
}

.pdfPage.square.rot-270 .pdfPageContent {
    transform: rotate(270deg);
}

.pdfPage.remove,
.pdfPage.removed {
    opacity: 0.3;
}

.pdfPage.remove:hover,
.pdfPage.removed:hover {
    opacity: 0.7;
}

.pdfPage.marked .pdfPageImg {
    border: 1px solid #da5f10;
    box-shadow: 0 0 5px 0px #da5f1099;
}

.pdfPage.iconOverlay .pdfPageContent::after {
    display: none;
}

.pdfPage.iconOverlay.rendered .pdfPageContent::after {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.pdfPage.iconOverlay.rendered .pdfPageContent:hover::after {
    opacity: 1;
}

.pdfPage.iconOverlay.rendered .pdfPageContent:hover .pdfPageImg {
    filter: grayscale(100%) brightness(0.8);
}

.pdfPage.clickable {
    cursor: auto;
}

.pdfPage.clickable .pdfPageContent {
    cursor: pointer;
}

.pdfPage.moveable .pdfPageContent {
    cursor: move;
}

.pdfPage.sortable-chosen {
    opacity: 0.5;
}

.pdfPage.rendered.iconOverlay.moveable .pdfPageContent::after {
    background-image: url(images/move.svg);
}

.pdfPage.iconOverlay.moveable.sortable-chosen .pdfPageContent::after {
    display: none !important;
}

.pdfFileLoader,
.pdfPageLoader {
    max-width: 100px;
    max-height: 100px;
    box-sizing: border-box;
}

.pdfPageLoader {
    max-width: 50px;
    max-height: 50px;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.pdfPageEnlarge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 13px;
    padding: 2px 0 2px 2px;
    background-color: rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
    color: #555;
    cursor: pointer;
}

.blockquotes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
}

.blockquotes .cell {
    text-align: start;
    max-width: 970px;
    padding: 5px;
    box-sizing: border-box;
    flex: 1;
}

blockquote {
    display: block;
    padding: 50px 25px 25px 25px;
    margin: 0 0 20px;
    position: relative;
    line-height: 1.2;
    background-color: #fff;
    background-color: var(--theme-blockquote-bg-color, #fff);
    box-shadow: 0 0 5px 1px #ccc;
    box-shadow: 0 0 5px 1px var(--theme-blockquote-box-shadow-color, #ccc);
    color: #222;
    color: var(--theme-blockquote-color, #222);
}

blockquote::before {
    content: "“";
    font-size: 80px;
    font-family: arial, sans-serif;
    font-weight: bold;
    color: #999;
    position: absolute;
    left: calc(50% - 20px);
    top: -10px;
}

blockquote em {
    font-style: italic;
}

.alert {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ebccd1;
    color: #a94442;
    background-color: #f2dede;
}

#rateSection .stars {
    user-select: none;
    display: flex;
    justify-content: center;
}

#rateSection .star {
    cursor: pointer;
    padding: 0 10px;
}

#rateSection .star::before {
    content: "☆";
    font-size: 30px;
    font-style: normal;
}

#rateSection .star.active::before {
    content: "★";
    color: #e7711b;
}

#rateSection textarea {
    height: 90px;
    width: 90%;
    max-width: 800px;
    font-size: 15px;
    font-family: inherit;
    margin: 10px 0 15px;
    padding: 5px;
    box-sizing: border-box;
}

#rateSection button {
    font-size: 15px;
    padding: 3px 10px;
}

.featureMarks {
    line-height: 2;
}

.featureMarks i {
    text-decoration: none;
    font-style: normal;
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
}

.featureMarks i::before {
    content: "\2713";
    color: #00af50;
    padding-right: 5px;
}

.noLimits.featureMarks i::before {
    color: #00af50;
}

ul.featureMarks {
    list-style: none;
    text-align: left;
    padding: 0;
    padding-left: 40px;
}

[dir="rtl"] ul.featureMarks {
    text-align: right;
    padding-right: 40px;
    padding-left: 0;
}

ul.featureMarks li {
    margin-bottom: 15px;
}

ul.featureMarks li::before {
    content: "\2713";
    color: #00af50;
    display: inline-block;
    font-weight: bold;
    padding-right: 10px;
    margin-left: -22px;
}

[dir="rtl"] ul.featureMarks li::before {
    padding-right: 0;
    margin-left: 0;
    padding-left: 10px;
    margin-right: -22px;
}

.toolBar {
    color: #000;
    color: var(--theme-tool-bar-color, #000);
    background-color: #fff;
    background-color: var(--theme-tool-bar-bg-color, #fff);
    border-bottom: 1px solid gray;
    border-bottom-color: var(--theme-tool-bar-border-bottom-color, gray);
    font-size: 0.85em;
    user-select: none;
    display: flex;
    justify-content: flex-start;
}

.toolBar *::selection {
    background: none;
}

.toolbar svg * {
    fill: var(--theme-tool-bar-color, #000);
}

.toolGroup {
    text-align: left;
    padding: 4px;
    border: 1px dotted silver;
    border: 1px dotted var(--theme-tool-group-border-color, silver);
    display: inline-block;
    vertical-align: middle;
    margin: 1px;
    height: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.toolGroup * {
    vertical-align: middle;
}

.toolGroup.disabled {
    display: none;
}

.toolGroup>span,
.toolGroup>div,
.toolGroup [data-role] {
    display: inline-block;
}

.toolGroup .material-icons {
    font-size: 24px;
    color: #444;
    color: var(--theme-tool-bar-icon-color, #444);
}

.toolGroup span[data-role].material-icons:hover {
    color: #317eb7;
}

.toolGroup .hoverFill:hover {
    fill: #317eb7;
}

.toolGroup svg.filledIcon,
.toolGroup .filledIconWrapper svg {
    fill: #444;
    fill: var(--theme-tool-bar-icon-color, #444);
    stroke: none;
}

.toolGroup svg.filledIcon:hover,
.toolGroup .filledIconWrapper:hover svg {
    fill: #317eb7;
    fill: var(--theme-tool-bar-icon-hover-color, #317eb7);
}

.toolGroup svg.strokedIcon,
.toolGroup .strokedIconWrapper svg {
    stroke: #000;
    stroke: var(--theme-tool-bar-icon-color, #000);
    fill: none;
}

.toolGroup svg.strokedIcon:hover,
.toolGroup .strokedIconWrapper:hover svg {
    stroke: var(--theme-tool-bar-icon-hover-color, #317eb7);
}

.toolGroup .down {
    background-color: #b3dbf9;
    background-color: var(--theme-tool-bar-down-bg-color, #b3dbf9);
}

.toolGroup [data-role] svg {
    height: 24px;
    max-width: 32px;
}

.toolGroup [data-role].down svg {
    height: 20px;
    margin: 2px;
}

.toolGroupWrapper {
    display: flex;
    justify-content: flex-start;
    gap: 1px 1px;
    flex-wrap: wrap;
}

.toolPopper {
    display: none;
    border: 1px solid silver;
    border-color: var(--theme-tool-popper-border-color, silver);
    background-color: var(--theme-tool-popper-bg-color, #f8f8f8);
    padding: 5px;
    margin: 9px 5px 5px 5px;
    z-index: 1;
}

.numberedList li {
    text-align: center;
    padding: 10px;
    counter-increment: item;
}

.numberedList li::before {
    content: counter(item);
    background: #c5c5c5;
    border-radius: 50%;
    color: #fff;
    width: 1.8em;
    text-align: center;
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.darkTheme .numberedList li::before {
    color: #222;
}

#relatedToolsSection .toolLink {
    white-space: nowrap;
}

#relatedToolsSection .toolLink {
    display: inline-block;
    padding: 20px;
    font-size: 18px;
}

[data-tippy-root] {
    text-align: left;
}

[dir="rtl"] [data-tippy-root] {
    text-align: right;
}

.tippyMenu {
    pointer-events: all;
}

.tippyMenu>div {
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.tippyMenu>div:hover {
    background-color: var(--theme-tippy-menu-item-hover-bg-color, #666);
}

.tippyMenu>div i {
    font-size: 16px;
}

.tippy-box[data-theme="tippyMenu"] .tippy-content {
    overflow: hidden;
    border-radius: 4px;
    padding: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.spin,
.spin-cw {
    animation: spin 2s infinite linear;
}

.spin-ccw {
    animation: spin 2s infinite linear;
    animation-direction: reverse;
}

@media (max-width: 500px) {
    .hideOnMobile {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .desktopOnly {
        display: none;
    }
}

.qas {
    padding: 0 20px;
    max-width: 700px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.qas .qa {
    text-align: start;
    padding: 15px 0;
    border-bottom: 1px solid var(--theme-qas-sep-color, #ddd);
}

.qas .qa:first-child {
    border-top: 1px solid var(--theme-qas-sep-color, #ddd);
}

.qas .qa .question {
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    color: #333;
    color: var(--theme-qas-question-color, #333);
    display: flex;
    justify-content: space-between;
}

.qas .qa .question::after {
    content: "v";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    margin-left: 10px;
    font-weight: normal;
    transform: scaleX(1.5) scaleY(0.65);
}

[dir="rtl"] .qas .qa .question::after {
    margin-left: 0;
    margin-right: 10px;
}

.qas .qa.active .question::after {
    transform: scaleX(1.5) scaleY(0.6) rotate(180deg) translateY(-2px);
}

.qas .qa.active .question,
.qas .qa .question:hover {
    color: #c00000;
    color: var(--theme-qas-active-color, #c00000);
}

.qas .qa .answer {
    color: #111;
    color: var(--theme-qas-answer-color, #111);
    font-size: 14px;
    line-height: 1.5;
    background-color: #f9f9f9;
    background-color: var(--theme-qas-answer-bg-color, #f9f9f9);
    overflow: hidden;
    box-sizing: border-box;
    display: none;
    padding: 10px 5px;
    margin-top: 10px;
}

.qas .qa.active .answer {
    display: block;
}

.qas p {
    padding: 0 10px;
    margin: 8px 0;
}

.qas ol,
.qas ul {
    padding: 0 10px;
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qas ol {
    list-style-type: decimal;
}

.qas ul {
    list-style-type: disc;
}

.qas ol li::marker {
    font-weight: 600;
}

.developer-bio {
    font-size: 14px;
    margin-top: 3em;
    margin-bottom: -2em;
}

.developer-bio>* {
    vertical-align: middle;
}

.developer-bio .image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 5px;
}

[dir="rtl"] .developer-bio .image {
    margin-right: 0;
    margin-left: 5px;
}

.overlay {
    margin: auto;
    position: relative;
    background-color: #fff;
    background-color: var(--theme-overlay-bg-color, #fff);
    box-shadow: 0 0 5px 1px #777;
    box-shadow: 0 0 5px 1px var(--theme-overlay-box-shadow-color, #777);
    border: 1px solid #777;
    border-color: var(--theme-overlay-border-color, #777);
}

.overlayWrapper {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(80, 80, 80, 0.4);
    display: flex;
    overflow: auto;
}

.overlayClose {
    position: absolute;
    top: 0;
    right: 0;
}

html.hasOverlayFilePreview {
    overflow: hidden;
}

html.hasOverlayFilePreview body {
    overflow: scroll;
}

.overlayFilePreview {
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.overlayFilePreview .tools {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(240, 240, 240, 0.8);
    padding: 5px 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 1;
    display: flex;
    align-items: center;
}

.overlayFilePreview .tools>* {
    color: #333;
}

.overlayFilePreview .tools>i {
    padding: 0 5px;
    cursor: pointer;
}

.overlayFilePreview .tools>i:hover {
    color: #0078d5;
}

.overlayFilePreview .tools .currentPage {
    font-size: 0.8em;
    white-space: nowrap;
}

[dir="rtl"] .overlayFilePreview .tools>i.icon-left-open,
[dir="rtl"] .overlayFilePreview .tools>i.icon-right-open {
    transform: scaleX(-1);
}

.overlayFilePreview .content {
    overflow-x: auto;
    overflow-y: auto;
    display: block;
    width: 100%;
    height: 100%;
    direction: ltr;
    position: absolute;
    left: 0;
    top: 0;
}

.overlayFilePreview .content.dragging {
    cursor: move;
}

.overlayFilePreview .elementWrapper {
    overflow: hidden;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
}

.componentLoadStart {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.45);
    background-color: var(--theme-component-load-start-bg-color,
            rgba(0, 0, 0, 0.45));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.componentLoadStart .main {
    background-color: #fff;
    background-color: var(--theme-component-load-start-main-bg-color, #fff);
    padding: 10px 30px 30px 30px;
    margin: 15px;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 15px;
    color: #222;
    box-sizing: border-box;
    width: 360px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.componentLoadStart .main .head {
    display: flex;
    align-items: center;
    margin: 0 -20px 0 -20px;
}

.componentLoadStart .main .head .expand {
    flex: 1 1;
    min-width: 20px;
}

.componentLoadStart .main .head .iconWrapper {
    display: inline-flex;
    margin-right: 8px;
}

html[dir="rtl"] .componentLoadStart .main .head .iconWrapper {
    margin-right: 0;
    margin-left: 8px;
}

.componentLoadStart .main .head .iconWrapper img {
    width: 20px;
    height: 20px;
}

.componentLoadStart .main .head .iconWrapper span {
    font-size: 22px;
    color: #0061fe;
}

.componentLoadStart .main .head .closeWrapper span {
    font-size: 18px;
    color: #bc7979;
}

.componentLoadStart .main .head .closeWrapper:hover {
    background-color: rgba(0, 0, 0, 0.1);
    background-color: var(--theme-component-load-start-close-bg-color,
            rgba(0, 0, 0, 0.1));
    cursor: pointer;
}

.componentLoadStart .main .content {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.componentLoadStart .main .content .loadSpinnerWrapper {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.componentLoadStart .main .content .loadSpinner {
    width: 50px;
    height: 50px;
}

.componentLoadStart .main .content .startButtonWrapper {
    margin-top: 30px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}

.componentLoadStart .main .content .startButton {
    border-radius: 15px;
    border: 0 none;
    background-color: #0078d5;
    color: #fff;
    padding: 8px 16px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.componentLoadStart .main .content .startButton:hover {
    filter: brightness(0.85);
}

.componentLoadStart.success .main {
    background-color: #d0ffd0;
    background-color: var(--theme-component-load-start-error-main-bg-color,
            #caffca);
}

.componentLoadStart.error .main {
    background-color: #ffd0d0;
    background-color: var(--theme-component-load-start-error-main-bg-color,
            #ffcaca);
}

.imageSlider {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 10px;
    margin: auto;
}

.imageSlider button.prev,
.imageSlider button.next {
    color: transparent;
    outline: 0;
    background: 0 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 30px);
    border: 0 none;
    border-radius: 10px;
    background-color: #ff8020;
    display: block;
    opacity: 0.75;
    cursor: pointer;
}

.imageSlider button.prev {
    left: 0;
}

.imageSlider button.next {
    right: 0;
}

[dir="rtl"] .imageSlider button.prev {
    right: 0;
    left: auto;
    transform: scale(-1, 1);
}

[dir="rtl"] .imageSlider button.next {
    left: 0;
    right: auto;
    transform: scale(-1, 1);
}

.imageSlider button.prev:before,
.imageSlider button.next:before {
    width: 6px;
    height: 6px;
    border-top: 3px solid #fff;
    content: "";
    display: block;
}

.imageSlider button.prev:before {
    border-left: 3px solid #fff;
    transform: translateX(1px) rotate(-45deg);
}

.imageSlider button.next:before {
    border-right: 3px solid #fff;
    transform: translateX(-1px) rotate(45deg);
}

.imageSlider .list {
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% - 50px);
    overflow-x: hidden;
    align-items: stretch;
    justify-content: flex-start;
}

.imageSlider .list .item {
    overflow: hidden;
    width: calc(100% / 3);
    flex-shrink: 0;
    flex-grow: 0;
}

.imageSlider.threeBoxes .list .item {
    width: calc(100% / 3);
}

.imageSlider.oneBox .list .item {
    width: calc(100%);
}

.imageSlider.twoBoxes .list .item {
    width: calc(100% / 2);
}

.imageSlider.threeBoxes .list .item {
    width: calc(100% / 3);
}

@media (max-width: 950px) {
    .imageSlider:not(.oneBox) .list .item {
        width: calc(100% / 2);
    }
}

@media (max-width: 650px) {
    .imageSlider .list .item {
        width: calc(100%) !important;
    }
}

.imageSlider .list .item .box {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 8px;
    height: 230px;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
}

.imageSlider.h180 .list .item .box {
    height: 180px;
}

.imageSlider.h200 .list .item .box {
    height: 200px;
}

.imageSlider.h220 .list .item .box {
    height: 220px;
}

.imageSlider.h250 .list .item .box {
    height: 250px;
}

.imageSlider.h300 .list .item .box {
    height: 300px;
}

.imageSlider.h350 .list .item .box {
    height: 350px;
}

.imageSlider .list .item .box {
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
    box-shadow: var(--theme-image-slider-box-shadow,
            0 0 6px 0 rgba(0, 0, 0, 0.25));
}

.imageSlider .list .item.active .box {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
    box-shadow: var(--theme-image-slider-active-box-shadow,
            0 0 8px 0 rgba(0, 0, 0, 0.5));
}

.imageSlider .list .item .box:after {
    content: "\01F50D";
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.9;
    pointer-events: none;
    border-top-left-radius: 5px;
    padding: 2px;
    background-color: #fff;
    font-size: 13px;
}

.imageSlider .list .item .box img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    user-select: none;
    object-fit: cover;
}

.imageSlider .list .item .caption {
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    margin: 10px;
}

.imageSlider .dots {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    height: 20px;
    gap: 5px;
}

.imageSlider .dots button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    border: 0;
    color: transparent;
    outline: 0;
    background: 0 0;
}

.imageSlider .dots button:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "•";
    opacity: 0.25;
    color: #000;
    width: 10px;
    height: 10px;
    font-size: 20px;
    font-family: arial, sans-serif;
}

.imageSlider .dots button:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "•";
    opacity: 0.3;
    width: 10px;
    height: 10px;
    font-size: 20px;
    font-family: arial, sans-serif;
    color: #000;
    color: var(--theme-image-slider-dots-color, #000);
}

.imageSlider .dots button.active:before {
    opacity: 1;
}

.imageSlider .dots button:hover:before {
    opacity: 0.75;
}

.imageSlider .disabled {
    pointer-events: none !important;
    opacity: 0.25 !important;
    filter: grayscale(50%);
}

@media (max-height: 650px) {
    #topBar .logo {
        width: 80px;
        height: 80px;
    }

    #topBar {
        margin-bottom: 30px;
    }

    h1 {
        margin-bottom: 10px;
        font-size: 1.85em;
    }

    h2 {
        margin-bottom: 10px;
        font-size: 1em;
    }

    h1+h2 {
        font-size: 1.1em;
    }

    #tool .noLimits {
        font-size: 0.9em;
        margin-bottom: 15px;
    }

    #toolBottomAd.mt3,
    #toolBottomAd2.mt3 {
        margin-top: 2em !important;
    }

    .dropzone .dz-message {
        margin: 0.5em 0;
    }
}


/* image to psd page css section start */

.section-box {
    max-width: 850px;
    margin: 25px auto;
    padding: 25px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.section-box h3 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #d97900;
    display: inline-block;
    padding-bottom: 6px;
}

/* ===== Filter Form Layout ===== */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    align-items: center;
    margin-bottom: 25px;
    text-align: left;
}

.form-row label {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
    color: #444;
}

/* Options inside dropdown */
.form-row select option {
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* Hover effect on options (works in Chrome/Edge/Opera) */
.form-row select option:hover {
    background: #ffe5cc;
    color: #d97900;
    font-weight: 600;
}

.form-row select {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    background: #fff;
    color: #333;
    min-width: 140px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Hover + Focus effect */
.form-row select:hover {
    border-color: #f57c00;
    box-shadow: 0 0 6px rgba(245, 124, 0, 0.3);
}

.form-row select:focus {
    border-color: #e86a00;
    box-shadow: 0 0 8px rgba(232, 106, 0, 0.4);
}

/* Make label + select look like small card */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 160px;
}


/* ===== Primary Big Button ===== */
.primary-btn {
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #d97900;
    color: #fff;
    transition: all 0.3s ease;
}

.primary-btn:hover {
    background: #b55d00;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(217, 121, 0, 0.3);
}

/* ===== Result Section ===== */
.result-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 25px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.result-container p {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
}

/* ===== Action Buttons (Preview + Download) ===== */
.action-btn {
    padding: 12px 28px;
    margin: 0 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    /* fully rounded */
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Preview Button (Orange) */
#preview-btn {
    background: #d97900;
    color: #fff;
    padding: 5px;
    border-radius: 6px;
}

#preview-btn:hover {
    background: #e86a00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

/* Download Button (Dark Orange) */
#download-btn {
    background: #d97900;
    color: #fff;
    padding: 5px;
    border-radius: 6px;
}

#download-btn:hover {
    background: #b55d00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 121, 0, 0.3);
}

/* ===== Convert Button ===== */
.convert {
    padding: 12px 28px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    background: #f57c00;
    color: #fff;
    transition: all 0.3s ease;
}

.convert:hover {
    background: #e86a00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

/* ===== Preview Box Styling ===== */
/* Upload & Preview Box same width */
.upload-box,
.preview-box {
    width: 100%;
    max-width:740px;
    /* 🔥 same width for both */
    margin: 20px auto;
    border-radius: 12px;
}

/* Preview Box Specific */
.preview-box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    border: 2px dashed #d97900;
    background: #fffaf4;
    justify-content: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
}

.img-card {
    position: relative;
    width: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.img-card:hover {
    transform: scale(1.05);
}

.img-card img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #eee;
}

.remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #e63946;
    color: #fff;
    border: none;
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.remove-btn:hover {
    background: #d00000;
}

/* Hidden Class */
.hidden {
    display: none !important;
}

/* End */

.allToolsBtnWrap .btn.orange {
    background-color: orange;
    color: #fff;
    border-radius: 24px !important;
    border: 2px solid orange;
    transition: all 0.3s ease-in-out;
}

/* Hover: remove background, show border, text turns orange */
.allToolsBtnWrap .btn.orange:hover {
    background-color: transparent;
    color: orange;
    border-color: orange;
}

/* Active/Focus state */
.allToolsBtnWrap .btn.orange:active,
.allToolsBtnWrap .btn.orange:focus {
    background-color: orange;
    color: #fff;
    border-color: orange;
}

html.blueTheme {
    --theme-normal-color: #0078d5;
    --theme-border-color: #7fbef2;
    --theme-bg-color: #f6fafe;
    --theme-subtitle-color: #444;
    --theme-hover-bg-color: #e5f2fc;
    --theme-tool-select-tool-link-bg-color: #f6fafe;
    --theme-tool-select-tool-link-bg-color-alt: #fff;
    --theme-tool-select-tool-link-border-color: #7fbef2;
    --theme-input-zone-border-color: #0078d5;
    --theme-dropzone-border-color: #0078d5;
    --theme-dropzone-import-tools-hover-bg-color: #e5f2fc;
    --theme-dropzone-file-tools-hover-bg-color: #e5f2fc;
    --theme-input-bg-color: #fdfeff;
    --theme-section-odd-bg: linear-gradient(180deg,
            #fff 0%,
            #f8fcff 5%,
            #f8fcff 95%,
            #fff 100%);
    --theme-section-odd-collapsed-bg: #f6fafe;
    --theme-section-odd-expanded-bg: #f6fafe;
    --theme-ad-text-hover-bg-color: #004c8e38;
}

html.blueTheme.alt1 {
    --theme-dropzone-bg-color: #e8f0ff;
    --theme-tool-select-tool-link-bg-color: #f9f9f9;
    --theme-dropzone-import-tools-hover-bg-color: #d1e1fd;
}

html.orangeTheme {
    --theme-normal-color: #ea7700;
    --theme-border-color: #f3b472;
    --theme-bg-color: #fefaf6;
    --theme-hover-bg-color: #fdf1e5;
    --theme-tool-select-tool-link-bg-color: #fefaf6;
    --theme-tool-select-tool-link-bg-color-alt: #fff;
    --theme-tool-select-tool-link-border-color: #f3b472;
    --theme-input-zone-border-color: #ea7700;
    --theme-dropzone-border-color: #ea7700;
    --theme-top-tool-select-sep-color: #ea7700;
    --theme-toogle-btn-on-slider-bg-color: #ea7700;
    --theme-dropzone-import-tools-hover-bg-color: #fdf1e5;
    --theme-dropzone-file-tools-hover-bg-color: #fdf1e5;
    --theme-input-bg-color: #fffcfa;
    --theme-section-odd-bg: linear-gradient(180deg,
            #fff 0%,
            #fefaf6 3%,
            #fefaf6 97%,
            #fff 100%);
    --theme-section-odd-collapsed-bg: #fefaf6;
    --theme-section-odd-expanded-bg: #fefaf6;
    --theme-ad-text-bg-color: #ea770020;
    --theme-ad-text-hover-bg-color: #ea770059;


}

.pdf-upload-container {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

.upload-box-custom {
    background: #fff;
    border: 2px dashed #6a5acd;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    width: 280px;
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-upload {
    background: linear-gradient(135deg, #6a5acd, #836fff);
    color: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.btn-upload:hover {
    opacity: 0.9;
}

.pdf-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pdf-preview img {
    width: 50px;
    height: 50px;
}

.pdf-preview span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    word-break: break-all;
}

.hidden {
    display: none;
}

.preloader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #6a5acd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 15px auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.loader-text {
    font-size: 14px;
    color: #555;
    margin-top: 8px;
    font-weight: 500;
    text-align: center;
}

.hidden {
    display: none;
}

/* Redact PDF CSS */
.redact-controls {
    font-family: Arial, sans-serif;
    margin-top: 20px;
}

.row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 300px;
    /* fixed width so they stay side by side */
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

#search-text,
#detect-option {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

.action-btn {
    background: #d97900;
    color: white;
    font-weight: bold;
    padding: 12px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
    min-width: 200px;
    text-align: center;
}

.action-btn:hover {
    background: #d97900;
}
  /* watermarkpage */
  /* Options Box */
                        .options-box {
                            background: #fff;
                            padding: 25px;
                            border-radius: 12px;
                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                            max-width: 650px;
                            margin: auto;
                            margin-top: 20px;
                        }

                        /* Tabs */
                        .tab-buttons {
                            display: flex;
                            margin-bottom: 20px;
                        }

                        .tab-buttons button {
                            flex: 1;
                            padding: 12px;
                            border: none;
                            cursor: pointer;
                            border-radius: 6px 6px 0 0;
                            font-weight: bold;
                            background: #eee;
                            transition: 0.3s;
                        }

                        .tab-buttons button.active {
                            background: #d97900;
                            color: #fff;
                        }

                        /* Forms */
                        .form-section {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 20px;
                        }

                        .form-group {
                            display: flex;
                            flex-direction: column;
                        }

                        .form-group label {
                            font-weight: bold;
                            margin-bottom: 6px;
                            font-size: 14px;
                            color: #444;
                        }

                        .form-section.hidden {
                            display: none;
                        }

                        .form-section input,
                        .form-section select {
                            width: 100%;
                            padding: 10px;
                            border: 1px solid #ccc;
                            border-radius: 6px;
                            font-size: 14px;
                        }

                        .full-width {
                            grid-column: span 2;
                            /* Submit button will take full row */
                        }

                        /* Submit button */
                        .submit-btn {
                            grid-column: span 2;
                            background: #d97900;
                            color: #fff;
                            padding: 12px;
                            border: none;
                            border-radius: 6px;
                            font-size: 16px;
                            cursor: pointer;
                            transition: 0.3s;
                        }

                        .submit-btn:hover {
                            background: #dad611;
                        }