body,
 html {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
     height: 100%;
 }

 #canvas-main {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
     box-sizing: border-box;
     height: calc(100% - 60px);
 }

 .canvas-container {
     margin: auto;
     /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
     filter: drop-shadow(0 0 5px #000);
     /* border-radius: 8px; */
     /* overflow: hidden; */
 }



 #toolbar {
     display: flex;
     justify-content: center;
     /* background-color: #fff; */
     padding: 10px;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
     /* position: fixed; */
     bottom: 0;
     left: 0;
     right: 0;
 }

 .editoptions {
     display: flex;
     align-items: center;
     margin: 0 10px;
 }

 #editOptions {
     display: none;
     justify-content: center;
     align-items: center;
     /* background-color: #f0f0f0; */
     padding: 10px;
     border-radius: 5px;
     margin-top: 10px;
 }

 #editOptions>* {
     margin: 0 5px;
 }

 .editoptions button,
 #addNewText {
     background-color: #cc0100;
     color: white;
     border: none;
     padding: 8px 12px;
     margin: 0 5px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
 }



 #colorPic {
     width: 30px;
     height: 30px;
     padding: 0;
     border: none;
     border-radius: 50%;
     overflow: hidden;
     cursor: pointer;
 }

 #fontContainer {
     position: relative;
 }

 #fontSelected {
     background-color: #fff;
     border: 1px solid #ddd;
     padding: 8px 12px;
     border-radius: 4px;
     cursor: pointer;
     color: #000;
 }

 #fontSelect {
     position: absolute;
     bottom: 100%;
     left: 0;
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 4px;
     max-height: 200px;
     overflow-y: auto;
     display: none;
     margin-left: 0;
     padding: 10px;
     margin-bottom: 1px;
 }

 #fontSelect li {
     padding: 8px 12px;
     cursor: pointer;
     list-style-type: none;
     color: #000;
 }

 #fontSelect li:hover {
     background-color: #f0f0f0;
 }

 #loading {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
 }

 #loadingcircle {
     width: 50px;
     height: 50px;
     border: 5px solid #f3f3f3;
     border-top: 5px solid #3498db;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

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

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

 #imgUpload {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1001;
 }

 #closeUpload {
     position: absolute;
     top: 20px;
     right: 20px;
     color: white;
     font-size: 24px;
     cursor: pointer;
 }

 #uploadlabel {
     background-color: #cc0100;
     color: white;
     padding: 10px 20px;
     border-radius: 4px;
     cursor: pointer;
 }

 #textInputs {
     margin-top: 10px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     font-size: 16px;
 }

 .touter {
     margin: 4px;
     display: inline-block;
     width: 90%;
     position: relative;
     font-size: 16px;
 }

 .touter input {
     padding: 5px;
     border: 1px solid #ddd;
     border-radius: 4px;
     width: 100%;
     font-size: 16px;
     line-height: 22px;
 }

 .touter span {
     margin-left: 5px;
     cursor: pointer;
     color: #ff4444;
     position: absolute;
     right: -8%;
     top: 5px;
     font-size: 20px;
     width: 35px;
     height: 35px;
 }

 .confirm-dialog {
     display: none;
     position: absolute;
     background-color: white;
     border: 1px solid #ccc;
     padding: 10px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     z-index: 1000;
 }

 button {
     background-color: #cc0100;
     color: white;
     cursor: pointer;
 }

 .confirm-dialog button {
     margin: 5px;
 }