/*
    - Copyright (c) 2024 Html Writer (K Karan) All rights reserved.

    -- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to use the Software for personal and learning purposes only, subject to the following conditions --

##Conditions##

    - The Software may not be used for commercial purposes.
    - The Software may not be distributed, sublicensed, or sold.

##Limitations##

**The Software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the Software or the use or other dealings in the Software.**

*/
/* setting page */
#settingsPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 100;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateX(100%);
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#settingsPage.show {
    animation-name: slideInRight;
}

#settingsPage.hide {
    animation-name: slideOutRight;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.setting-header {
    display: flex;
    height: 30px;
    gap: 15px;
    align-items: center;
    padding: 10px;
    background-color: var(--primary-color);
    color: var(--btn-text);

}

.setting-title {
    font-size: 20px;
    font-weight: 600;
}

.heading-primary {
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0 10px 18px;
    color: var(--primary-heading);
    padding-left: 7px;
    border-left: 3px solid var(--theme-mode-color);
}

.Heading-secondary {
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    color: var(--secondary-heading);
}

.Paragraph {
    font-size: 12px;
    color: var(--paragraph-color);
    padding-right: 55px;
    margin: 2px auto;
    opacity: 0.7;
}

.setting-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--btn-text);
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.setting-close-btn:hover {
    background: var(--btn-active);
    border-radius: 50px;
    color: var(--theme-mode-color);
}

#appInfoButton {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    background: none;
    color: var(--btn-text);
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.Settings-Container {
    flex: 1;
    overflow-y: auto;
}

.page-section-card {
    margin: 15px;
    padding: 18px;
    border-radius: 14px;
    background: var(--secondary-color);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.page-section-card:nth-child(1) {
    margin-top: 7px;
}

.page-section-card h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--paragraph-color);
}

hr {
    border: 1px solid var(--secondary-heading);
    margin: 20px 4px 12px 4px;
    opacity: 0.15;
}

.End-Text {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--theme-mode-color);
    margin: 18px auto;
}

/* appInfoModal */

#appInfoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 100;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-100%);
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#appInfoModal.show {
    display: flex;
    animation-name: slideIn;
}

#appInfoModal.hide {
    animation-name: slideOut;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

.app-info-content {
    flex: 1;
    overflow-y: auto;
}

.app-info-header {
    display: flex;
    height: 30px;
    gap: 15px;
    align-items: center;
    padding: 10px;
    background-color: var(--primary-color);
    color: var(--btn-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-info-title {
    font-size: 18px;
    font-weight: 600;
}


.copyRightText {
    font-size: 12px;
    color: var(--paragraph-color);
    text-align: center;
    margin: 10px auto;
}

.closeAppInfoModal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--btn-text);
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.closeAppInfoModal-btn:hover,
.closeAppInfoModal-btn:focus {
    background: var(--btn-active);
    border-radius: 50px;
    color: var(--theme-mode-color);
}

.app-info {
    display: flex;
    align-items: center;
    text-align: left;
    padding-left: 10px;
}

.app-info img {
    width: 70px;
    height: auto;
    margin-right: 25px;
}

.app-info .app-details {
    display: flex;
    flex-direction: column;

}

.app-info .app-name {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: larger;
    letter-spacing: 1px;
    color: var(--primary-heading);
}

.app-info .app-version {
    font-weight: 400;
    margin-top: 5px;
    letter-spacing: 1px;
    color: var(--secondary-heading);
}


/*Font Size*/


.font-size-container {
    display: flex;
    align-items: center;
    height: 50px;
}

.select-fontsize {
    width: fit-content;
    cursor: pointer;
    position: relative;
    transition: 300ms;
    overflow: visible;
    margin-left: auto;
}

.font-size-container h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-heading);
}

.selected-fontsize {
    background-color: var(--primary-color);
    color: var(--primary-heading);
    padding: 8px;
    width: 100px;
    margin-bottom: 3px;
    border-radius: 11px !important;
    position: relative;
    z-index: 100;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 3px solid var(--btn-active);
}

.arrow {
    position: relative;
    right: 0px;
    height: 12px;
    transform: rotate(-90deg);
    width: 25px;
    fill: var(--theme-mode-color);
    z-index: 100;
    transition: 300ms;
}

.options {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 5px;
    background-color: var(--primary-color);
    position: absolute;
    /* Change to absolute for floating effect */
    top: 40px;
    /* Position below the parent */
    left: 0;
    opacity: 0;
    visibility: hidden;
    height: auto;
    overflow: hidden;
    transition: opacity 300ms, visibility 300ms;
    z-index: 99;
    /* Ensure it appears above other elements */
    pointer-events: none;
    /* Prevent hover when not visible */
}

.select-fontsize:hover>.options {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Enable hover when visible */
}

.select-fontsize:hover>.selected-fontsize .arrow {
    transform: rotate(0deg);
}

.option {
    border-radius: 8px;
    margin: 1.5px 0;
    padding: 5px;
    transition: 300ms;
    background-color: var(--secondary-color);
    color: var(--secondary-heading);
    width: 100px;
    font-size: 15px;
}

.option:hover {
    background-color: var(--btn-active);
    color: var(--btn-text-active);
    font-weight: bold;
}

.options input[type="radio"] {
    display: none;
}

.options label {
    display: inline-block;
}

.options label::before {
    content: attr(data-txt);
}

.options input[type="radio"]:checked+label {
    display: none;
}

.select-fontsize:has(.options input[type="radio"]#eight:checked) .selected-fontsize::before {
    content: attr(data-eight);
}

.select-fontsize:has(.options input[type="radio"]#ten:checked) .selected-fontsize::before {
    content: attr(data-ten);
}

.select-fontsize:has(.options input[type="radio"]#twelve:checked) .selected-fontsize::before {
    content: attr(data-twelve);
}

.select-fontsize:has(.options input[type="radio"]#fourteen:checked) .selected-fontsize::before {
    content: attr(data-fourteen);
}

.select-fontsize:has(.options input[type="radio"]#sixteen:checked) .selected-fontsize::before {
    content: attr(data-sixteen);
}

.select-fontsize:has(.options input[type="radio"]#eighteen:checked) .selected-fontsize::before {
    content: attr(data-eighteen);
}

.select-fontsize:has(.options input[type="radio"]#twenty:checked) .selected-fontsize::before {
    content: attr(data-twenty);
}

.select-fontsize:has(.options input[type="radio"]#twentytwo:checked) .selected-fontsize::before {
    content: attr(data-twentytwo);
}

.select-fontsize:has(.options input[type="radio"]#twentyfour:checked) .selected-fontsize::before {
    content: attr(data-twentyfour);
}

.select-fontsize:has(.options input[type="radio"]#twentysix:checked) .selected-fontsize::before {
    content: attr(data-twentysix);
}

.select-fontsize:has(.options input[type="radio"]#twentyeight:checked) .selected-fontsize::before {
    content: attr(data-twentyeight);
}

.select-fontsize:has(.options input[type="radio"]#thirty:checked) .selected-fontsize::before {
    content: attr(data-thirty);
}



/*Toggel checkbox*/

.toggle-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
}

.toggle-container status {
    background: var(--primary-color);
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-mode-color);
    margin-left: 10px;
}

.toggle-container h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-heading);

}

.Toggle-Checkbox {
    font-size: 15px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    margin-left: auto;
}

.Toggle-Checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border: 1px solid var(--btn-text);
    transition: .4s;
    border-radius: 10px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 7px;
    left: 0.27em;
    bottom: 0.25em;
    background-color: #adb5bd;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--theme-mode-color);
    border: 1px solid var(--primary-color);
}

input:focus+.slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked+.slider:before {
    transform: translateX(1.4em);
    background-color: var(--primary-color);
}

/*Model popup*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: flex-end;
    z-index: 100;
}

.model-title {
    font-size: 1.4rem;
    text-align: center;
    color: var(--primary-heading);
    font-weight: 700;
    margin-bottom: 20px;
}

.modal-content {
    background: var(--primary-color);
    width: 100%;
    padding: 30px 10px;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    margin: 10px;
    opacity: 0;
    transform: translateY(100%);
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.modal-content p {
    font-size: 15px;
    color: var(--paragraph-color);
    margin: 12px auto;
}

.modal-content ul {
    list-style-type: square;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: var(--secondary-heading);
    text-align: start;
    opacity: 0.8;
}


.modal-content li {
    margin-bottom: 10px;
    margin-right: 30px;
}

.modal.show .modal-content {
    animation-name: bottomIn;
}

.modal.hide .modal-content {
    animation-name: bottomOut;
}

@keyframes bottomIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bottomOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

.modal-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.model-btn {
    height: 45px;
    width: 30vw;
    font-weight: 700;
    font-size: 16px;
    margin-top: 10px;
    background: var(--btn-color);
    color: var(--btn-text);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.model-btn:hover {
    background-color: var(--btn-active);
    color: var(--btn-text-active);
}


/* Input file name */

.label-file-name {
    position: relative;
    display: flex;
    width: calc(100vw - 40px);
    max-width: 60vw;
    border-radius: 14px;
    border: 3px solid var(--btn-active);
    padding: 15px 10px 15px 45px;
    margin: 0 auto 20px auto;
}

.label-file-name:hover {
    border: 1.5px solid var(--theme-mode-color);
}

.input-save-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    color: var(--secondary-heading);
}

.save-input {
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--theme-mode-color);
    width: 100%;
}

input[type="text"]::placeholder {
    color: var(--secondary-heading);
    font-size: 15px;
}

input[type="text"]:focus {
    outline: none;
}


/* Features faq */
.details-section {
    margin: 15px;
}

details {
    background: var(--secondary-color);
    border-radius: 5px;
    padding: 18px 14px;
    transition: all 0.3s ease;
    margin-bottom: 4px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px;
}

details[open] {
    border-radius: 12px;
    margin-bottom: 8px;
}

details:first-of-type {
    border-radius: 20px 20px 5px 5px;
}


details:last-of-type {
    border-radius: 5px 5px 20px 20px;
}

summary {
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    outline: none;
    transition: color 0.3s ease;
    list-style: none;
    position: relative;
    padding-right: 40px;
    color: var(--secondary-heading);
}

summary:hover {
    color: var(--theme-mode-color);
}


summary::before {
    content: '';
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    width: 0.6em;
    height: 0.6em;
    border-right: 0.14em solid var(--secondary-heading);
    border-bottom: 0.14em solid var(--secondary-heading);
    transform: rotate(-45deg) translateY(-50%);
}

details[open] summary::before {
    content: '';
    transform: rotate(45deg) translateY(-50%);
}

details summary svg {
    height: 1.4em;
    width: 1.4em;
    color: var(--theme-mode-color);
    stroke-width: 2.2;
    background: var(--primary-color);
    padding: 5px;
    border-radius: 8px;
    margin-bottom: -8px;
    margin-right: 5px;
}

details p {
    margin: 15px 0 0;
    padding: 0;
    line-height: 1.6;
    color: var(--paragraph-color);
    opacity: 0.8;
    font-weight: 400;
    font-size: 14px;
}

details p svg {
    height: 1.2em;
    width: 1.2em;
    color: var(--theme-mode-color);
    stroke-width: 2.2;
    background: var(--primary-color);
    padding: 5px;
    border-radius: 5px;
    margin-bottom: -7px;
}

details ul {
    list-style-type: square;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: var(--secondary-heading);
    text-align: start;
    opacity: 0.8;
}


details li {
    margin-bottom: 10px;
    margin-right: 30px;
}


/* Ace editor theme css changes*/

/*For Both Light and dark*/
.ace_print-margin {
    display: none;
}


/* For Dark Theme*/
.ace-cloud_editor_dark {
    background-color: #1a1a1a;
}

.ace-cloud_editor_dark .ace_marker-layer .ace_active-line {
    box-sizing: border-box;
    border-top: 1px solid #3b3e43;
    border-bottom: 1px solid #3b3e43;
}

.ace-cloud_editor_dark .ace_gutter {
    background: #1a1a1a;
    color: #8e96a9;
}

.ace-cloud_editor_dark .ace_gutter-active-line {
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
}

/* For Light Theme*/

.ace-cloud_editor {
    background-color: #e5e5e5;
}

.ace-cloud_editor .ace_marker-layer .ace_active-line {
    box-sizing: border-box;
    border-top: 1px solid #4d5157;
    border-bottom: 1px solid #4d5157;
}

.ace-cloud_editor .ace_gutter {
    background: #e5e5e5;
    color: #8e96a9;
}

.ace-cloud_editor .ace_gutter-active-line {
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
}

/* Import File Modal */
.file-input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-input-wrapper {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: var(--secondary-color);
    border-radius: 14px;
    margin: auto 20px;
}

.file-input-label {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--secondary-heading);
    font-weight: 500;
}

.file-input-icon {
    width: 30px;
    height: 30px;
}

.file-input {
    display: none;
}

.file-input-button {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    margin-left: auto;
    color: var(--btn-text);
}

.file-input-button:hover {
    color: var(--btn-text-active);
    background: var(--primary-color);
}