:root {
   --primary-color: #4a6cf7;
   --secondary-color: #6c757d;
   --success-color: #198754;
   --light-bg: #f8f9fa;
   --border-radius: 8px;
 }

 html {
   scroll-behavior: smooth;
 }

 html,
 body {
   height: 100%;
   color: #5a5a5a;
   background: #ffffff;
 }

 body {
   background-color: #f5f7ff;
   font-family: 'Raleway', 'Segoe UI', system-ui, -apple-system, sans-serif;
   padding: 10px;
   color: #333;
 }

 #editor {
   position: relative;
   width: 100%;
   height: 700px;
   font-family: 'Raleway', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   /* font-weight: 700; */
   /* font-weight: normal; */
   font-size: large;
 }

 main {
   background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   /* background-image: url("https://source.unsplash.com/category/nature/1600x900/?weather"); */
 }

 #progress {
   margin-bottom: 20px;
   vertical-align: top;
 }

 .btn-warning:not(:disabled):not(.disabled).active,
 .btn-warning:not(:disabled):not(.disabled):active,
 .show>.btn-warning.dropdown-toggle {
   color: #212529;
   background-color: #dc3545;
   border-color: #dc3545;
 }

 #messageDiv {
   margin-top: 10px;
   margin-bottom: 15px;
 }

 .custom-control-label::before {
   background-color: #fff;
 }

 #page-container {
   position: relative;
   padding-bottom: 60px;
   min-height: 100vh;
 }

 ul.dropdown-menu {
   background-color: #fff;
 }

 #clear {
   cursor: pointer;
   float: right;
   margin-top: -33px;
   margin-right: 4px;
 }

 #server-results {
   display: grid;
   height: 100%;
 }

 .converted-image {
   max-height: 100vh;
   max-width: 100%;
   margin: auto;
 }

 .upload-container {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
 }

 #editor-container {
   scroll-margin-top: 80px;
 }

 #preview-container {
   scroll-margin-top: 80px;
 }


 #desc {
   margin-bottom: 1rem;
 }

 #tool-intro ol {
   list-style-type: decimal;
   margin: 0;
   margin-left: 1.4em;
   padding: 0;
   counter-reset: li-counter;
 }

 #tool-intro ol>li {
   position: relative;
   margin-bottom: 10px;
   padding-left: 0.5em;
   min-height: 1.5em;
   border-left: 2px solid #CCCCCC;
 }

 #url {
   padding: .375rem 1.1rem;
 }

 #url:focus {
   outline: none;
 }

 .meta {
   font-weight: bold;
 }

 .date {
   font-weight: bold;
   margin-top: 10px;
 }

 .page-header {
   padding-top: 60px;
   background-color: #fff;
 }

 .hidden {
   display: none;
 }

 .dropdown-menu>li>a.hidden {
   display: none;
 }

 .btn-file {
   position: relative;
   overflow: hidden;
 }

 .btn-file input[type=file] {
   position: absolute;
   top: 0;
   right: 0;
   min-width: 100%;
   min-height: 100%;
   font-size: 100px;
   text-align: right;
   filter: alpha(opacity=0);
   opacity: 0;
   outline: none;
   background: white;
   cursor: inherit;
   display: block;
 }

 #loading {
   margin-top: 10px;
   margin-bottom: 20px;
 }

 .container {
   max-width: 1200px;
 }

 .header {
   text-align: center;
   margin-bottom: 30px;
 }

 .header h1 {
   color: var(--primary-color);
   font-weight: 700;
   margin-bottom: 10px;
 }

 .header p {
   color: var(--secondary-color);
   font-size: 1.1rem;
 }

 .btn-bar {
   background: linear-gradient(135deg, #ffffff 0%, #f1f5ff 100%);
   border-radius: var(--border-radius);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   padding: 15px;
   margin-bottom: 25px;
   border: 1px solid #e1e6ff;
 }

 .btn-action {
   min-width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   transition: all 0.2s ease;
 }

 .btn-primary {
   background: linear-gradient(to right, #4a6cf7, #6b8aff);
   border: none;
   font-weight: 600;
 }

 .btn-primary:hover {
   background: linear-gradient(to right, #3a5cd8, #5a78e6);
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(74, 108, 247, 0.3);
 }

 .toggle-label {
   cursor: pointer;
   padding: 10px 15px;
   border-radius: 6px;
   transition: background-color 0.2s;
   display: flex;
   align-items: center;
   background-color: rgba(74, 108, 247, 0.08);
   border: 1px solid rgba(74, 108, 247, 0.15);
 }

 .toggle-label:hover {
   background-color: rgba(74, 108, 247, 0.12);
 }

 .form-check-input:checked {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
 }

 .editor-container {
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   margin-bottom: 30px;
 }

 .editor-header {
   background: linear-gradient(135deg, #4a6cf7 0%, #6b8aff 100%);
   color: white;
   padding: 12px 20px;
   font-weight: 600;
 }

 #markdown-editor {
   min-height: 400px;
   padding: 20px;
   border: none;
   resize: vertical;
   font-family: 'Consolas', 'Monaco', monospace;
   line-height: 1.6;
 }

 #markdown-editor:focus {
   outline: none;
   box-shadow: inset 0 0 0 2px rgba(74, 108, 247, 0.3);
 }

 .preview-container {
   background-color: white;
   border-radius: var(--border-radius);
   padding: 25px;
   height: 735px;
   overflow: auto;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   border: 1px solid #e1e6ff;
 }

 .preview-header {
   color: var(--primary-color);
   font-weight: 700;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 2px solid #e1e6ff;
 }

 #markdown-preview {
   line-height: 1.6;
   padding: 10px;
 }

 #markdown-preview code {
   background-color: #f3f4f6;
   padding: 2px 6px;
   border-radius: 4px;
   font-family: 'Consolas', 'Monaco', monospace;
   font-size: 0.95em;
 }

 #markdown-preview pre {
   background-color: #f8f9fa;
   padding: 16px;
   border-radius: 6px;
   overflow: auto;
   border: 1px solid #e9ecef;
   margin: 16px 0;
 }

 #markdown-preview pre code {
   background: none;
   padding: 0;
   border-radius: 0;
 }

 #markdown-preview table {
   width: 100%;
   border-collapse: collapse;
   margin: 16px 0;
 }

 #markdown-preview table th,
 #markdown-preview table td {
   padding: 8px 12px;
   border: 1px solid #dee2e6;
 }

 #markdown-preview table th {
   background-color: #f8f9fa;
   font-weight: 600;
 }

 #markdown-preview blockquote {
   border-left: 4px solid #4a6cf7;
   padding-left: 16px;
   margin: 16px 0;
   color: #6c757d;
   font-style: italic;
 }

 .filename-input {
   max-width: 150px;
   min-width: 100px;
   font-size: 0.9rem;
 }

 .filename-container {
   position: relative;
   display: flex;
   align-items: center;
 }

 .filename-label {
   white-space: nowrap;
   margin-right: 8px;
   font-size: 0.9rem;
   color: #495057;
 }

 #themeSelectGroup {
   max-width: 400px;
 }

 @media (max-width: 992px) {
   .btn-text {
     display: none;
   }

   .btn-mobile {
     font-size: 1.2rem;
     padding: 10px;
   }

   .toggle-text {
     display: none;
   }

   #generate-pdf,
   #loadDefault {
     margin-bottom: 1rem;
   }

   .filename-label {
     /*  display: none; */
   }

   .filename-input {
     max-width: 120px;
   }

   #themeSelectGroup {
     margin-top: 1rem;
   }
 }

 @media (max-width: 768px) {
   .btn-group {
     margin-top: 15px;
     width: 100%;
     justify-content: center;
   }

   .filename-container {
     margin-top: 10px;
     justify-content: center;
     width: 100%;
   }

   .filename-input {
     max-width: 200px;
   }
 }

 .tooltip-icon {
   display: inline-block;
   margin-left: 8px;
   color: #6c757d;
   cursor: help;
 }

 .toast-container {
   z-index: 1100;
 }


 /* Custom, iPhone Retina */
 @media only screen and (min-width : 320px) {}

 /* Extra Small Devices, Phones */
 @media only screen and (min-width : 480px) {}

 /* Small Devices, Tablets */
 @media only screen and (min-width : 768px) {}

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {}

 /* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {}