:root {
   --white-color: #fff;
   --blue-color: #eff2f6;
   --grey-color: #707070;
   --grey-color-light: #aaa;
   --blue-color-hover: #e3e6ed;
   --link-hover: #333;
   --text-color: #141824;
   --border: #cbd0dd;
   --border-hover: #333;
   --sidebar: #fff;
   --navbar: #fff;
   --navbar-blur: rgba(255, 255, 255, 0.5);
   --button: #f5f7fa;
   --button-hover: #cbd0dd;
   --scrollbar: #fff;
   --scrollbar-thumb: rgb(170, 175, 186);
   --scrollbar-thumb-hover: #d3d6de;
   --body: #f5f7fa;
   --toast: #777;
   --toast-color: #e3e6ed;
   --sidebar-blur: rgba(255, 255, 255, 0.5);
   --selection: #141824;
}

body.dark {
   --white-color: #333;
   --blue-color: #31374a;
   --grey-color: #f2f2f2;
   --grey-color-light: #aaa;
   --blue-color-hover: rgb(65, 73, 99);
   --link-hover: white;
   --text-color: #e3e6ed;
   --border: #31374a;
   --border-hover: #777;
   --sidebar: #141824;
   --navbar: #141824;
   --navbar-blur: rgba(20, 24, 36, 0.5);
   --button: #0f111a;
   --button-hover: #141824;
   --scrollbar: #141824;
   --scrollbar-thumb: #31374a;
   --scrollbar-thumb-hover: rgb(65, 73, 99);
   --toast: #31374a;
   --toast-color: #e3e6ed;
   --sidebar-blur: rgba(20, 24, 36, 0.5);
   --selection: #141824;
}

.icon {
   font-size: 12px;
   display: flex;
   justify-content: right;
   cursor: pointer;
}

.modal {
   width: 97%;
   min-height: 95vh;
   height: fit-content;
   background-color: var(--button);
   margin: auto;
   border-radius: 12px;
   border: var(--border);
   padding: 10px;
}

.controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
   height: 30px;
}

#tts {
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#close {
   font-size: 34px;
   cursor: pointer;
   text-align: right;
   transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#close:hover,
#tts:hover {
   color: #f00;
   cursor: pointer;
}

.btn-share {
   padding: 5px 10px;
   color: var(--text-color);
   outline: none;
   border: 1px solid var(--border);
   box-shadow: 0px 0px 20px -20px;
   border-radius: 10px;
   height: 30px;
   background-color: var(--button);
   transition: all 0.3s ease-in-out;
   margin-bottom: 10px;
   margin-left: 5px;
   margin-right: 5px;
   user-select: none;
}

.btn-share:hover {
   background-color: var(--button-hover);
   cursor: pointer;
}

.btn-share:active {
   transform: scale(0.95);
}

.icon {
   font-size: 12px;
   display: flex;
   justify-content: right;
   justify-self: right;
   align-self: right;
   cursor: pointer;
   width: 25px;
   margin-left: 90%;
}

.hidden {
   display: none;
   user-select: none;
}

::selection {
   color: var(--selection);
   background-color: #71c9ce;
}

/*     Mobile Support     */

/* width */
::-webkit-scrollbar {
   width: 5px;
   border-radius: 2.5px;
   box-shadow: 0px 0px 20px -15px;
}

/* Track */
::-webkit-scrollbar-track {
   background: var(--scrollbar-track);
   border-radius: 2.5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 2.5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
   border-radius: 2.55px;
}

.stop {
   width: 115px;
   height: 30px;
   border-radius: 12px;
   border: var(--border);
   color: var(--button-txt);
   background-color: var(--button-bg);
   transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   cursor: pointer;
   outline: none;
   margin-bottom: 10px;
   margin-left: 5px;
   margin-right: 5px;
   user-select: none;
   /* Place it in the center in the bottom */
   position: fixed;
   left: 50%;
   bottom: 0;
   transform: translate(-50%, -50%);
}

.stop:disabled {
   color: grey;
}

.skeleton-container {
   text-align: center;
}

.skeleton-text {
   height: 20px;
   background: linear-gradient(
      90deg,
      var(--blue-color) 45%,
      var(--blue-color-hover) 70%,
      var(--border) 95%
   );
   background-size: 200% 100%;
   animation: loading5 5.5s infinite;
   margin-bottom: 10px;
   border-radius: 5px;
}

.width-300 {
   width: 300px;
}

.width-400 {
   width: 400px;
}

@keyframes loading5 {
   0% {
      background-position: 200% 0;
   }
   100% {
      background-position: -200% 0;
   }
}

/* Make a border changing color */
.border {
   animation: borderColor 1s infinite alternate;
   border-width: 2px;
}

@keyframes borderColor {
   0% {
      border-color: var(--border);
   }
   100% {
      border-color: #6196a6;
   }
}

.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
}

.modal-container {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #ffffff;
   min-width: 320px;
   max-width: 480px;
   border-radius: 0.5rem;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   z-index: 10000;
   transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
   animation: popupFadeIn 0.357s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.modal-header {
   padding: 1.5rem;
   border-bottom: 1px solid #e2e8f0;
}

.modal-title {
   font-size: 1.25rem;
   font-weight: 600;
}

.modal-content {
   padding: 1.5rem;
   max-height: 70vh;
   overflow-y: auto;
}

.modal-footer {
   padding: 1.5rem;
   border-top: 1px solid #e2e8f0;
   text-align: right;
}

.modal-footer button {
   padding: 0.5rem 1rem;
   background-color: #e2e8f0;
   border-radius: 0.25rem;
   transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.modal-footer button:hover {
   background-color: #cbd5e1;
}

/* Popup fade animation */

@keyframes popupFadeIn {
   from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.7);
   }

   to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
   }
}

.modal-close {
   display: inline-block;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
   text-align: center;
   cursor: pointer;
   transition: background-color 0.3s;
   border: none;
   border-radius: 0.25rem;
   background-color: #2563eb;
   color: var(--text-color);
}

.modal-close:hover {
   background-color: #1d4ed8;
}

.modal-close:focus {
   outline: none;
}