body {
  padding-top: 42px;
  /*overflow-y:hidden;*/
}

a:focus {
  outline: revert;
  outline-offset: revert;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: revert;
  outline-offset: revert;
}

input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
  outline: revert;
  outline-offset: revert;
}

.starter-template {
  padding: 15px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.starter-template span {
  font-size: 3vw;
  color: #6d6d6d;
  font-weight: bold;
}

.dropdown-menu {
  top: 124%;
  padding: 8px 0;
  border-radius: 6px;
  left: -148px;
}

.dark .dropdown-menu {
  background-color: #26313f;
  border: 1px solid rgb(51 63 78);
}

.dark .dropdown-menu>li>a {
  color: #dcd6d6;
}

.dark .dropdown-menu>li>a:focus, .dark .dropdown-menu>li>a:hover {
  background-color: #324256;
}

.downaload-notes-container, .more-tools-container{
  position: relative;
}

#iconDropdown a {
  cursor: pointer;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #ecf0f1;
  }

  .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #ecdbff;
  }

  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
    color: #ecdbff;
    background-color: #8e44ad;
  }
}

@media (max-width: 767px) {
  .starter-template span {
    font-size: 7vw;
  }
}

.timer-label {
  display: none;
}

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

.nav-tabs {
  font-size: 1.4em;
}

.pip-icon {
  cursor: pointer;
}

.full-width {
  font-size: 20px;
  padding: 20px;
  border-radius: 10px !important;
}

@media (max-width: 498px) {
  .full-width {
    padding: 14px;
    border-radius: 7px !important;
  }
}

.flex-navbar {
  display: flex;
  padding-left: 12px;
  color: white;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
}

.flex-navbar div:nth-child(2) {
  margin-right: 10px;
}

.pip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #7e7d7d;
  font-weight: bold;

  &::after {
    content: "Floating Window is Activated";
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  pointer-events: none; /* Makes overlay non-interactive by default */
  z-index: 10;
  display: none;
}

.navbar-fixed-bottom, .navbar-fixed-top {
  z-index: 9;
}

#pipContainer {
  display: none;
}

.time {
  font-weight: bold;
  letter-spacing: 5px;
}

.brand-title,
.brand-title:hover {
  color: white;
  font-weight: bold;
  font-size: 15px;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 2px;
}

#time,
#time_short,
#time_long {
  font-size: 10vw;
  margin-top: 0;
}

@media (max-width: 767px) {
  #time,
  #time_short,
  #time_long {
    font-size: 18vw;
  }
}

h1 {
  font-size: 80px;
}

.nav>li>a {
  padding: 5px 5px !important;
  margin-right: 0 !important;
  color: black;
}

.nav-tabs>li {
  /* width = (100 / number of tabs). This example assumes 3 tabs. */
  width: 33.33333%;
  text-align: center;
}

.nav-tabs>li.active>a {
  font-weight: bold;
}

.custom-btn {
  color: #fff;
  border-color: #fff;
}

.btn {
  border-radius: 0;
}

.navbar {
  min-height: 41px;
  line-height: 41px;
  !important
}

.navbar-brand {
  float: none;
  text-align: center;
}

footer {
  text-align: center;
}

.modal-content a {
  font-weight: bold;
}

.flex-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-notice {
  background-color: #ecf0ff;
  padding: 20px;
  border-radius: 10px;
}

.about-icon-container {
  display: inline-flex;
  gap: 10px;
  float: left;
}

.btn {
  border-radius: 8px;
}

.vertical-center {
  min-height: 100%;
  /* Fallback for vh unit */
  min-height: 90vh;
  /* You might also want to use
                          'height' property instead.
                          
                          Note that for percentage values of
                          'height' or 'min-height' properties,
                          the 'height' of the parent element
                          should be specified explicitly.
    
                          In this case the parent of '.vertical-center'
                          is the <body> element */

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Align the bootstrap's container vertically */
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  /* In legacy web browsers such as Firefox 9
       we need to specify the width of the flex container */
  width: 100%;

  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
       hence the bootstrap's container won't be aligned to the center anymore.
    
       Therefore, we should use the following declarations to get it centered again */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.affiliate-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: none;
  max-width: 305px;
  border: 1px solid #e0e0e0;
  background: radial-gradient(rgb(100, 100, 100) 0.5px, transparent 0.5px) 0px 0px / 20px 20px, radial-gradient(rgb(100, 100, 100) 0.5px, rgb(221, 221, 221) 0.5px) 10px 10px rgb(221, 221, 221);
  padding: 15px 15px 15px 18px;
  border-radius: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(224, 224, 224);
  border-image: initial;
  background-position: 0px 0px, 10px 10px;
}

.affiliate-popup.show {
  display: block;
  animation: slideIn 0.5s ease-out forwards;
}

.dark .affiliate-popup {
  background: #181e27;
  border-color: #30363d;
}

.dark .affiliate-content a {
  color: #c9d1d9;
}

.dark .affiliate-content a:hover {
  color: #58a6ff;
}

.dark .close-popup {
  color: #8b949e;
}

.dark .close-popup:hover {
  color: #c9d1d9;
}

.affiliate-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.affiliate-content a {
  color: #2c3e50;
  text-decoration: none;
  flex-grow: 1;
}

.affiliate-content a:hover {
  color: #3498db;
}

.close-popup {
  background: none;
  border: none;
  color: #666;
  font-size: 20px;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}

.close-popup:hover {
  color: #333;
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Dark mode styles */
.dark {
  background-color: #0b1215;
  color: #e6edf3;
}

.dark #mainContainer {
  background-color: #0b1215;
}

.dark .navbar-inverse {
  background-color: #0d1117;
  border-color: #30363d;
}

.dark .ql-toolbar.ql-snow {
  background-color: #161b22;
  border-color: #30363d;
}

.dark .ql-container.ql-snow {
  background-color: #0b1215;
  border-color: #30363d;
}

.dark .ql-editor {
  color: #e6edf3;
}

.dark .ql-editor.ql-blank::before {
  color: #8b949e;
}

.dark .ql-editor td {
  border-color: #30363d;
}

.dark .ql-editor .dark-text-override {
  color: #e6edf3 !important;
}

.dark .ql-editor .ql-bg-white {
  background-color: transparent !important;
}

.dark .ql-editor [style*="background-color: rgb(255, 255, 255)"],
.dark .ql-editor [style*="background-color: #fff"],
.dark .ql-editor [style*="background-color: #ffffff"],
.dark .ql-editor [style*="background-color: white"],
.dark .ql-editor [style*="background: rgb(255, 255, 255)"],
.dark .ql-editor [style*="background: #fff"],
.dark .ql-editor [style*="background: #ffffff"],
.dark .ql-editor [style*="background: white"] {
  background-color: transparent !important;
}

.dark .ql-editor [style*="color: rgb(0, 0, 0)"],
.dark .ql-editor [style*="color:rgb(0,0,0)"],
.dark .ql-editor [style*="color: rgb(17, 17, 17)"],
.dark .ql-editor [style*="color:rgb(17,17,17)"],
.dark .ql-editor [style*="color: rgb(34, 34, 34)"],
.dark .ql-editor [style*="color:rgb(34,34,34)"],
.dark .ql-editor [style*="color: rgb(51, 51, 51)"],
.dark .ql-editor [style*="color:rgb(51,51,51)"],
.dark .ql-editor [style*="color: rgb(68, 68, 68)"],
.dark .ql-editor [style*="color:rgb(68,68,68)"],
.dark .ql-editor [style*="color: rgb(85, 85, 85)"],
.dark .ql-editor [style*="color:rgb(85,85,85)"],
.dark .ql-editor [style*="color: rgb(102, 102, 102)"],
.dark .ql-editor [style*="color:rgb(102,102,102)"],
.dark .ql-editor [style*="color: rgb(119, 119, 119)"],
.dark .ql-editor [style*="color:rgb(119,119,119)"],
.dark .ql-editor [style*="color: rgb(136, 136, 136)"],
.dark .ql-editor [style*="color:rgb(136,136,136)"],
.dark .ql-editor [style*="color: rgb(153, 153, 153)"],
.dark .ql-editor [style*="color:rgb(153,153,153)"],
.dark .ql-editor [style*="color: rgba(0, 0, 0"],
.dark .ql-editor [style*="color:rgba(0,0,0"],
.dark .ql-editor [style*="color: #000"],
.dark .ql-editor [style*="color:#000"],
.dark .ql-editor [style*="color: #111"],
.dark .ql-editor [style*="color:#111"],
.dark .ql-editor [style*="color: #222"],
.dark .ql-editor [style*="color:#222"],
.dark .ql-editor [style*="color: #333"],
.dark .ql-editor [style*="color:#333"],
.dark .ql-editor [style*="color: #444"],
.dark .ql-editor [style*="color:#444"],
.dark .ql-editor [style*="color: #555"],
.dark .ql-editor [style*="color:#555"],
.dark .ql-editor [style*="color: #666"],
.dark .ql-editor [style*="color:#666"],
.dark .ql-editor [style*="color: #777"],
.dark .ql-editor [style*="color:#777"],
.dark .ql-editor [style*="color: #888"],
.dark .ql-editor [style*="color:#888"],
.dark .ql-editor [style*="color: #999"],
.dark .ql-editor [style*="color:#999"],
.dark .ql-editor [style*="color: #000000"],
.dark .ql-editor [style*="color:#000000"],
.dark .ql-editor [style*="color: #111111"],
.dark .ql-editor [style*="color:#111111"],
.dark .ql-editor [style*="color: #222222"],
.dark .ql-editor [style*="color:#222222"],
.dark .ql-editor [style*="color: #333333"],
.dark .ql-editor [style*="color:#333333"],
.dark .ql-editor [style*="color: #444444"],
.dark .ql-editor [style*="color:#444444"],
.dark .ql-editor [style*="color: #555555"],
.dark .ql-editor [style*="color:#555555"],
.dark .ql-editor [style*="color: #666666"],
.dark .ql-editor [style*="color:#666666"],
.dark .ql-editor [style*="color: #777777"],
.dark .ql-editor [style*="color:#777777"],
.dark .ql-editor [style*="color: #888888"],
.dark .ql-editor [style*="color:#888888"],
.dark .ql-editor [style*="color: #999999"],
.dark .ql-editor [style*="color:#999999"],
.dark .ql-editor [style*="color: #4d4d4d"],
.dark .ql-editor [style*="color:#4d4d4d"],
.dark .ql-editor [style*="color: black"],
.dark .ql-editor [style*="color:black"] {
  color: #e6edf3 !important;
}

.dark .ql-snow .ql-editor a {
  color: #58a6ff !important;
}

.dark .ql-editor .ql-color-red {
  color: #e60000 !important;
}

.dark .ql-editor .ql-color-orange {
  color: #ff9900 !important;
}

.dark .ql-editor .ql-color-yellow {
  color: #ffff00 !important;
}

.dark .ql-editor .ql-color-green {
  color: #008a00 !important;
}

.dark .ql-editor .ql-color-blue {
  color: #0066cc !important;
}

.dark .ql-editor .ql-color-purple {
  color: #9933ff !important;
}

.dark .ql-editor .ql-color-white {
  color: #ffffff !important;
}

.dark .ql-editor .ql-color-black {
  color: #e6edf3 !important;
}

.dark .ql-snow .ql-editor blockquote {
  border-left-color: #30363d;
  color: #c9d1d9;
}

.dark .ql-snow .ql-editor code,
.dark .ql-snow .ql-editor .ql-code-block-container {
  background-color: #1a1f29;
  color: #e6edf3;
}

.dark .ql-snow .ql-stroke {
  stroke: #c9d1d9;
}

.dark .ql-snow .ql-stroke-miter {
  stroke: #c9d1d9;
}

.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-stroke.ql-fill {
  fill: #c9d1d9;
}

.dark .ql-snow .ql-picker {
  color: #c9d1d9;
}

.dark .ql-snow .ql-picker-options {
  background-color: #1a1f29;
  border-color: #30363d;
  color: #c9d1d9;
}

.dark .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #c9d1d9;
}

.dark .ql-snow.ql-toolbar button:hover,
.dark .ql-snow .ql-toolbar button:hover,
.dark .ql-snow.ql-toolbar button:focus,
.dark .ql-snow .ql-toolbar button:focus,
.dark .ql-snow.ql-toolbar button.ql-active,
.dark .ql-snow .ql-toolbar button.ql-active,
.dark .ql-snow.ql-toolbar .ql-picker-label:hover,
.dark .ql-snow .ql-toolbar .ql-picker-label:hover,
.dark .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.dark .ql-snow .ql-toolbar .ql-picker-label.ql-active,
.dark .ql-snow.ql-toolbar .ql-picker-item:hover,
.dark .ql-snow .ql-toolbar .ql-picker-item:hover,
.dark .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.dark .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #58a6ff;
}

.dark .ql-snow.ql-toolbar button:hover .ql-fill,
.dark .ql-snow .ql-toolbar button:hover .ql-fill,
.dark .ql-snow.ql-toolbar button:focus .ql-fill,
.dark .ql-snow .ql-toolbar button:focus .ql-fill,
.dark .ql-snow.ql-toolbar button.ql-active .ql-fill,
.dark .ql-snow .ql-toolbar button.ql-active .ql-fill,
.dark .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.dark .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.dark .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.dark .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.dark .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.dark .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.dark .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.dark .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.dark .ql-snow.ql-toolbar button:hover .ql-stroke,
.dark .ql-snow .ql-toolbar button:hover .ql-stroke,
.dark .ql-snow.ql-toolbar button:focus .ql-stroke,
.dark .ql-snow .ql-toolbar button:focus .ql-stroke,
.dark .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.dark .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.dark .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.dark .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.dark .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.dark .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.dark .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.dark .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.dark .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.dark .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.dark .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.dark .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.dark .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.dark .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.dark .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.dark .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.dark .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.dark .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.dark .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.dark .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.dark .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.dark .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.dark .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.dark .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #58a6ff;
}

.dark .ql-snow .ql-tooltip {
  background-color: #1a1f29;
  border-color: #30363d;
  color: #c9d1d9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .ql-snow .ql-tooltip input[type=text] {
  background-color: #0d1117;
  border-color: #30363d;
  color: #c9d1d9;
}

.dark .ql-snow .ql-tooltip a {
  color: #58a6ff;
}

.dark .modal-content {
  background-color: #21262d;
  border-color: #30363d;
  color: #c9d1d9;
}

.dark .modal-header {
  background-color: #1a1f29;
  border-bottom-color: #30363d;
}

.dark .modal-footer {
  background-color: #1a1f29;
  border-top-color: #30363d;
}

.dark .modal-body a {
  color: #58a6ff;
}

.dark .modal-header .close {
  color: #c9d1d9;
  opacity: 1;
}

.dark .modal-header .close:hover,
.dark .modal-header .close:focus {
  color: #ffffff;
}

.dark .about-notice {
  background-color: #1a1f29;
  color: #c9d1d9;
}

.dark .donate-icon svg,
.dark .about-icon-container path {
  fill: #c9d1d9;
  stroke: #c9d1d9;
}

/* xs < 768 */
@media screen and (max-width: 767px) {
  h1 {
    font-size: 5em;
  }
}

/* sm */
@media screen and (min-width: 768px) {
  h1 {
    font-size: 5em;
  }

  .navbar-header {
    float: none;
  }
}

/* md */
@media screen and (min-width: 992px) {
  h1 {
    font-size: 5em;
  }
}

/* lg */
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 5em;
  }

}

@media print {
  .ql-toolbar, affiliate-popup {
    display: none !important;
  }
}