.tabcontent{margin-bottom:10px;padding: 10px;line-height: 2em;}

#book {

      width: 80%;

      height: 600px;

      margin: 50px auto;

      box-shadow: 0px 0px 20px rgba(0,0,0,0.5);

    }

    .page {

      width: 100%;

      height: 100%;

      background-color: white;

    }

    .canvas-container {

      display: flex;

      justify-content: center;

      align-items: center;

    }

    canvas {

      width: 100%;

      height: auto;

    }

	.book-title {

            margin: 0 auto;

            text-align: center;

            font-size: 18px;

            font-weight: bold;

            color: #333;

            position: absolute;

            left: 50%;

            transform: translateX(-50%);

        }



		.footnote-button {

            padding: 8px 12px;

            background-color: #4CAF50;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

            font-size: 14px;

        }



        .footnote-button:hover {

            background-color: #45a049;

        }



		/* Spinner container */

        .spinner {

            margin: 15px auto;

            width: 40px;

            height: 40px;

            border: 5px solid #ccc;

            border-top: 5px solid #4caf50; /* Green color for the spinning part */

            border-radius: 50%;

            animation: spin 1s linear infinite; /* Animation for the spinner */

        }



        /* Animation for the spinner */

        @keyframes spin {

            0% { transform: rotate(0deg); }

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

        }



		.popup {

            display: none; /* Hidden by default */

            position: fixed;

            top: 50%;

            left: 50%;

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

            width: 300px;

            padding: 20px;

            background-color: #f9f9f9;

            border: 1px solid #ccc;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

            text-align: center;

            font-family: Arial, sans-serif;

            z-index: 1000;

        }



        .popup p {

            font-size: 16px;

            color: #333;

        }



        /* Style for large page navigation buttons */

        .page-button {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            width: 9%;

            height: 60%;

            color: white;

            font-size: 24px;

            text-align: center;

            line-height: 100px;

            cursor: pointer;

            border-radius: 5px;

            opacity: 0.5;

            margin-top: 38px;

        }



        .left-button {

            left: 10px;

        }



        .right-button {

            right: 10px;

        }



          /* Popup styling */

          #footnoteBox {

            display: none;

            position: fixed;

            top: 50%;

            left: 50%;

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

            width: 420px;

            height: 400px;

            background-color: white;

            border: 2px solid black;

            border-radius: 10px;

            z-index: 1000;

            padding: 20px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

        }



        /* Draggable Header */

        #footnoteHeader {

            cursor: move;

            padding: 10px;

            background-color: #4CAF50;

            color: white;

            border-radius: 10px 10px 0 0;

            position: relative;

            top: -20px;

            left: -20px;

            width: 418px;

        }



        /* Tabs and tab content */

        .footnote-tab {

            display: flex;

            cursor: pointer;

            background-color: #ddd;

        }



        .footnote-tab div {

            flex: 1;

            padding: 7px;

            text-align: center;

            border-right: 1px solid white;

            background-color: #f1f1f1;

        }



        .footnote-tab div:last-child {

            border-right: none;

        }



        .footnote-tab div.active {

            background-color: #777;

            color: white;

        }



        .footnote-tab-content {

            display: none;

            padding:10px;

        }



        .footnote-tab-content.active {

            display: block;

        }



        /* Form styles */

        .form-input {

            display: flex;

            flex-direction: column;

            margin-bottom: 15px;

        }



        .form-input label {

            margin-bottom: 5px;

        }



        .form-input input {

            padding: 5px;

            width: 100%;

            box-sizing: border-box;

        }



        .form-input button {

            padding: 10px;

            background-color: #4CAF50;

            color: white;

            border: none;

            cursor: pointer;

            margin-top: 10px;

        }



        .form-input button:hover {

            background-color: #45a049;

        }



        /* General List styles */

        .footnote-tab-content ul {

            list-style-type: none;

            padding: 0;

        }



        .footnote-tab-content ul li {

            padding: 5px;

            border-bottom: 1px solid #ddd;

        }



          /* Close button styling */

          #closeButton {

            background-color: transparent;

            border: none;

            color: white;

            font-size: 30px;

            cursor: pointer;

            float: right;

    position: relative;

    top: -12px;

        }



        #textContent {

      display: none; /* Initially hide text */

    }



    .inform{

  background: blue;

  -webkit-background-clip: text;

  color: transparent;

  font-weight: bold;

  padding: 5px;

  margin-left:5px;

}

#quote-list {

    max-width: 450px;

    margin: 0 auto;

    padding: 8px;

    height: 290px;

    overflow-y: scroll;

}



.quote-item {

    background-color: #fff;

    border-left: 5px solid #007BFF;

    padding: 10px;

    margin-bottom: 20px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.quote-content {

    font-size: 13px;

    color: #333;

    margin-bottom: 8px;

}



.quote-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: -2px;

}



.quote-footer .page {

    font-size: 10px;

    color: #555;

    margin-top: 5px;

}



.quote-footer button {

    padding: 2px 10px;

    background-color: #007BFF;

    color: #fff;

    border: none;

    cursor: pointer;

    border-radius: 4px;

}



.quote-footer button:hover {

    background-color: #0056b3;

}

  



   /* Button styling */

   .styled-button {

    background-color: #0066cc;

    color: white;

    padding: 15px 30px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.3s;

}



.styled-button:hover {

    background-color: #005bb5;

}



/* Modal styling */

.download-modal {

    display: none;

    position: fixed;

    z-index: 1;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6); /* Black background with a nice overlay */

}



.download-modal-content {

    background-color: white;

    margin: 10% auto;

    padding: 20px;

    border-radius: 10px;

    width: 90%;

    max-width: 400px;

    text-align: center;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    position: relative;

}



/* Close button styling */

.download-modal-close {

    position: absolute;

    top: 15px;

    right: 20px;

    font-size: 28px;

    color: #888;

    cursor: pointer;

    transition: color 0.3s;

}



.download-modal-close:hover {

    color: #333;

}



/* Book info styling */

.book-info {

    text-align: left;

    margin: 20px 10px;

}



.book-info p {

    font-size: 13px;

    margin: 10px 0;

    color: #555;

}



/* Download button styling */

.styled-download-button {

    background-color: #28a745;

    color: white;

    padding: 15px 25px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.3s;

}



.styled-download-button:hover {

    background-color: #218838;

}



.download-modal-content select,

        .download-modal-content textarea {

            width: 100%;

            padding: 8px;

            margin-bottom: 15px;

            border: 1px solid #ccc;

            border-radius: 4px;

        }



        .download-modal-content label {

            font-weight: bold;

            display: block;

            margin-bottom: 5px;

        }



        .FlyoutMenu {

            z-index: 111;

        }



/* For smaller screens */

@media (max-width: 600px) {

    .download-modal-content {

        width: 95%;

    }

}