body {
   font-weight: 400;
   height: 100vh;
   font-family: 'Roboto', sans-serif;
   font-family: 'Rubik', sans-serif;
   position: relative;
   overflow-x: hidden; 
   overflow-y: auto;
}

body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*chuttersnap-unsplash-vardag.jpg*/ background: linear-gradient(to top, rgba(57, 48, 138, 1), rgba(56, 163, 165, 0.0), rgba(0, 247, 255, 0.0), rgba(37, 79, 97, 0.3), rgba(37, 79, 97, 0.6)), url("chuttersnap-unsplash-vardag.jpg"); /*source: Photo by CHUTTERSNAP on Unsplash Photo by <a href="https://unsplash.com/@chuttersnap?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">CHUTTERSNAP</a> on <a href="https://unsplash.com/photos/9AqIdzEc9pY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>*/
   background: linear-gradient(to top, rgba(34, 34, 34, 0.5), rgba(56, 163, 165, 0.0), rgba(41, 61, 70, 0.5), rgba(37, 79, 97, 0.45), rgba(23, 62, 78, 0.7)), url("https://images.unsplash.com/photo-1414073875831-b47709631146?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center bottom;
   z-index: -1;
}

/*Calendar*/

/*Autumn https://wallpapersafari.com/w/B7N4hv background: linear-gradient(to top, rgb(20, 6, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(11, 113, 172, 0)), url("desktop-1920x1080.jpg");*/
   /*Spring https://vividscreen.info/pic/magic-forest/26231/for-desktop-1920x1080-full-hd background: linear-gradient(to top, rgb(6, 0, 20), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(11, 113, 172, 0)), url("https://th.bing.com/th/id/R.48b6825ff1a6a49a019e8cdc2e180f85?rik=9IMPhXBZAcKSvw&riu=http%3a%2f%2ffiles.vividscreen.info%2fsoft%2f090e9c350cb72e0df7c59f07367c48be%2fMagic-Forest-1920x1080.jpg&ehk=3njVvYAMZ7JXDKDhh9JB3u87Whsftr%2bro3ViGTYQuWQ%3d&risl=&pid=ImgRaw&r=0"); */
   /*Summer https://picturewindowhd.blogspot.com/2018/08/landscape.html background: linear-gradient(to top, rgb(6, 0, 20), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(11, 113, 172, 0)), url("https://www.hdwallpapers.in/download/landscape_huawei_mediapad_m5_stock-1600x900.jpg"); */

/* Winter */
:root {
   --containers: hsla(240, 14%, 8%, 0.7); /*rgba(10, 10, 14, 0.769)*/ /*hsla(240, 17%, 5%, 0.7)*/
   --contrast: rgb(255, 145, 0); 
   --accent: #2949ff; /*#62d451*/
   --borders: #ffffff70;
   --textContent: #cccccc; 
   --events: rgba(16, 16, 22, 0.8); 
   --color-container: transparent;
   --main-clock-color: #2949ff; /*#62d451*/
   --hidden-sidebar: rgb(34, 34, 34);
   --extracted-color: rgb(8, 165, 126);
   --glow: rgba(0, 0, 0, 0);

   --primary-light: rgb(255, 210, 48); /*#c8ffeb*/
   --primary: #ff9100; /*#74d365*/
   --primary-dark: rgb(211, 62, 17); /*#265820*/
   --white: rgba(111, 111, 166, 0.23);
   --greyLight-1: rgba(14, 14, 14, 0.8);
   --greyLight-2: rgba(14, 14, 14, 0.85);
   --greyLight-3: rgb(5, 5, 5);
   --greyLight-4: rgb(40, 40, 40);
   --greyDark: rgb(0, 0, 0);
} 

/* Autumn 
:root {
   --containers: rgba(32, 39, 44, 0.767); 
   --contrast: rgb(255, 126, 21); 
   --accent: rgb(56, 165, 255); 
   --borders: #ffffff70;
   --textContent: #e3e3e3; 
   --events: rgba(0, 0, 0, 0.842); 
   --color-container: transparent;
   --main-clock-color: rgb(56, 165, 255);
   --hidden-sidebar: rgb(27, 26, 26);
   --clock-weather: rgba(32, 39, 44, 0.767); 
   --extracted-color: rgb(255, 126, 21);

   --primary-light: rgb(146, 206, 255);
   --primary: rgb(56, 165, 255);
   --primary-dark: rgb(23, 62, 95);
   --white: rgba(111, 111, 166, 0.15);
   --greyLight-1: rgba(14, 14, 14, 0.8);
   --greyLight-2: rgba(14, 14, 14, 0.85);
   --greyLight-3: rgb(5, 5, 5);
   --greyLight-4: rgb(40, 40, 40);
   --greyDark: rgb(0, 0, 0);
}*/

/* Spring 
:root {
   --containers: rgba(11, 13, 14, 0.83); 
   --contrast: rgb(255, 232, 22); 
   --accent: rgb(76, 63, 197); 
   --borders: #ffffff70;
   --textContent: #e3e3e3; 
   --events: rgba(14, 14, 14, 0.89); 
   --color-container: transparent;
   --main-clock-color: rgb(76, 63, 197);
   --hidden-sidebar: rgb(27, 26, 26);
   --clock-weather: rgba(11, 13, 14, 0.83); 
   --extracted-color: rgb(21, 220, 255);
   --glow: rgba(0, 0, 0, 0.4);

   --primary-light: rgb(119, 110, 194);
   --primary: rgb(76, 63, 197);
   --primary-dark: rgb(28, 24, 71);
   --white: rgba(111, 111, 166, 0.15);
   --greyLight-1: rgba(14, 14, 14, 0.8);
   --greyLight-2: rgba(14, 14, 14, 0.85);
   --greyLight-3: rgb(5, 5, 5);
   --greyLight-4: rgb(40, 40, 40);
   --greyDark: rgb(0, 0, 0);
} */

/* Summer 
:root {
   --containers: rgba(11, 13, 14, 0.83); 
   --contrast: #e98f71; 
   --accent: rgb(26, 236, 183); 
   --borders: #ffffff70;
   --textContent: #e3e3e3; 
   --events: rgba(0, 0, 0, 0.842); 
   --color-container: transparent;
   --main-clock-color: rgb(26, 236, 183);
   --hidden-sidebar: rgb(27, 26, 26);
   --clock-weather: rgba(11, 13, 14, 0.83); 
   --extracted-color: rgb(21, 220, 255);

   --primary-light: rgb(161, 226, 210);
   --primary: rgb(26, 236, 183);
   --primary-dark: rgb(8, 63, 49);
   --white: rgba(111, 111, 166, 0.15);
   --greyLight-1: rgba(14, 14, 14, 0.8);
   --greyLight-2: rgba(14, 14, 14, 0.85);
   --greyLight-3: rgb(5, 5, 5);
   --greyLight-4: rgb(40, 40, 40);
   --greyDark: rgb(0, 0, 0);
}*/

/*Scrollbar*/

/* width */
/*
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}*/
 
[data-theme="light"] {
   --containers: rgba(35, 39, 65, 0.35); 
   --contrast: rgb(255, 242, 100); 
   --accent: #b39ddb; 
   --borders: #ffffff70;
   --textContent: #ffffff; 
   --events: rgba(35, 39, 65, 0.55); 
   --color-container: rgba(35, 39, 65, 0.35); 
   --main-clock-color: #ff0000;
   --hidden-sidebar: rgba(35, 39, 65);
} 

/*Layers*/

.first-layer {
   position: relative;
   height: 850px;
   width: 80%;
   left: 50%;
   transform: translateX(-50%);
   background-color: rgb(78, 78, 78);
   padding: 25px;
   border-radius: 45px;
   display: flex;
   justify-content: end;
}

.second-layer {
   position: relative;
   display: flex;
   justify-content: space-between;
}

/*Glow effect*/

.glow {
  position: relative;
}

.glow:hover::before {
  opacity: 1;
}

.glow::before {
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 0.5s;
  width: 100%;
  border-radius: inherit;
  z-index: -1;
}

.glow::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    var(--glow),
    transparent 40%
  );
}

.glow > .glow-content {
  flex-grow: 1;
}

.border-glow > .border-glow-content {
   position: absolute;
   left: 1.5px;
   right: 1.5px;
   top: 1.5px;
   bottom: 1.5px;
   border-radius: inherit;
   background-color: var(--events); 
   z-index: 0;
}

.border-glow-content {
   border: solid 2px rgba(255, 255, 255, 0.3);
}

.border-glow {
   background: radial-gradient(
    250px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.35),
    transparent 40%
  );
}

/*Calendar again*/

.section-one-wrapper {
   position: relative;
   width: 100%;
   height: min-content;
   overflow: hidden;
}

h3,h4,h5 {
   font-weight: 300 !important;
}

.calendar-wrapper {
   height: auto;
   width: 35%;
   max-width: 570px;
   border-radius: 20px;
}

.placement {
   position: relative;
   width: 80%;
   display: flex;
   flex-direction: row;
}

.calendar-header-container {
   position: relative;
   background-color: var(--containers); 
   backdrop-filter: blur(3px);
   height: fit-content;
   width: 100%;
   color: var(--contrast); 
   border-radius: 20px 20px 0 0;
}

.calendar-header {
   position: relative;
   width: 100%;
   height: 100%;
   padding-top: 13px;
   padding-bottom: 13px;
   border-radius: 20px;
}
/*
.year-toggle {
   position: relative;
   display: inline-block;
   cursor: pointer;
   margin-left: 6px;
   top: 50%;
   transform: translateY(-8%);
}*/

#toggle-icons {
   position: relative;
   width: 22px;
   height: auto;
   border-radius: 22px;
   overflow: hidden;
}

#todayDayName {
   position: relative;
   color: var(--textContent);
   margin: 0;
   text-align: center;
}

/*Season & zodiac*/

#season {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 11%;
   background-color: var(--extracted-color);
   width: 120px;
   height: 120px;
   border-radius: 20px;
}

#outImage-container {
   position: absolute;
   left: 8px;
   top: 8px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 68%;
   width: 68%;
   overflow: hidden;
}

#outImage-container img {
   height: 100%;
   width: 100%;
   cursor: pointer;
}

#zodiac-icon {
   position: relative;
   left: 77%;
   top: 9px;
   color: var(--season-text);
   width: fit-content;
   height: fit-content;
}

#zodiac-icon svg {
   width: 30px;
   height: 30px;
   cursor: pointer;
}

#season-name {
   position: absolute;
   bottom: 3px;
   left: 8px;
   font-size: 17px;
   color: var(--season-text);
   font-weight: bolder;
}

#canvas {
   display: none;
}

/*Calendar again*/

.header-title {
   position: relative;

}

.calendar-content {
   position: relative;
   background-color: var(--containers); 
   color: var(--textContent);
   backdrop-filter: blur(3px);
   padding: 20px;
   padding-left: 1%;
   padding-right: 1%;
   overflow: hidden;
   height: 480px; 
   transition: height 0.5s ease-in-out;
   border-radius: 0 0 20px 20px;
}

.month-wrapper {
   position: relative;
   width: 100%;
   height: fit-content;
}

.month-container {
   position: relative;
   width: 300%; /*300%*/
   scale: 0.32;
   transform: translateX(-104.1%) translateY(-109%); /*translateX(-116.5%) translateY(-122%)*/
   height: fit-content;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
   transition: all 0.5s ease-in-out;
}

.month {
   position: relative;
   font-size: 35px;  
   width: 30%;
   height: 350px;
   padding-bottom: 30px;
   transition: all 0.5s ease-in-out;
}
/*
.month div {
   position: relative;
}*/

.row {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
}

.month-name-grid {
   font-size: 45px;
   font-weight: bolder;
   letter-spacing: 3px;
   cursor: pointer;
   transition: opacity 0.5s ease-in-out;
   transition: color 0.3s ease-out;
}

.month-name-grid:hover {
   transition: color 0.2s ease-in;
   color: var(--accent);
}

#month-name-title {
   position: relative;
   font-weight: bold !important;
   margin-left: 50px;
   width: fit-content;
   cursor: pointer;
}
/*
#month-name-svg {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   left: -8px;
}*/

/*Different month aimations*/

@keyframes reset {
   0% {
      transform: translateX(var(--translateX)) translateY(var(--translateY)); /*translateX(var(--translateX)) translateY(var(--translateY))*/ 
   }
   100% {
      transform: translateX(0%) translateY(0%); 
   }
}
@keyframes container-animation {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(var(--translateX)) translateY(var(--translateY)); /*"353.9%", "117.8%"*/
   }
}
@keyframes container-animation-1 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(249.2%) translateY(117.8%);
   }
}
@keyframes container-animation-2 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(144.2%) translateY(117.8%);
   }
}
@keyframes container-animation-3 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(353.9%) translateY(92.9%);
   }
}
@keyframes container-animation-4 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(249.2%) translateY(92.9%);
   }
}
@keyframes container-animation-5 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(144.2%) translateY(92.9%);
   }
}
@keyframes container-animation-6 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(353.9%) translateY(67.9%);
   }
}
@keyframes container-animation-7 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(249.2%) translateY(67.9%);
   }
}
@keyframes container-animation-8 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(144.2%) translateY(67.9%);
   }
}
@keyframes container-animation-9 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(353.9%) translateY(42.9%);
   }
}
@keyframes container-animation-10 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(249.2%) translateY(42.9%);
   }
}
@keyframes container-animation-11 {
   0% {
      transform: translateX(0%) translateY(0%);
   }
   100% {
      transform: translateX(144.2%) translateY(42.9%);
   }
}

.event-mark {
   width: 5px;
   height: 5px;
   background-color: teal;
   border-radius: 100px;
   position: absolute;
   left: 46%;
   top: 70%;
}

.calendar-footer {
   position: relative;
   height: fit-content; /*200px*/
   font-weight: 300;
   text-align: center;
   /*background-color: var(--containers) !important;*/ 
   overflow: hidden;
   border-radius: 0 0 20px 20px;
   transition: height 0.3s ease-in-out;
   display: flex;
}

.quick-view-childe {
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}

.word-interval-container {
   position: absolute;
   top: 100%;
   width: 100%;
   height: 100%;
   background-color: rgb(34, 34, 34) !important; 
   transition: top 0.5s cubic-bezier(1, 0, 0, 1);
   padding: 0 5px 0 5px;
   border-radius: 20px;
   z-index: 2;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   display: none; /*OBS*/
}

.word-interval-container p {
   color: var(--textContent);
   font-size: 15px;
   padding-left: 5px;
   padding-right: 5px;
}

.word-interval-container div {
   margin-left: auto;
   margin-right: auto;
}

.addForm { 
   position: relative;
   width: calc(100% - 7px);
   height: fit-content;
   /*background-color: rgb(34, 34, 34) !important;
   transition: top 0.5s cubic-bezier(1, 0, 0, 1);*/
   /*display: none; OBS*/
   overflow: hidden;
   left: 50%;
   transform: translateX(-50%);
}

.addForm textarea {
   color: var(--textContent);
   height: auto;
}

.input-field div{
   color: var(--contrast);
} 

.addEventButtons {
   margin-top: 13px;
   text-align: right;
   padding: 0 0.75rem 0 0.75rem;
   display: flex;
   flex-direction: row;
   gap: 5px;
}

.addEventButtons a {
   color: black;
   font-weight: 300;
}

#addEventButton {
   background: var(--contrast);
}

#cancelAdd {
   background-color: grey; /*?*/
}

.emptyForm {
   position: absolute; /*here*/
   left: 50%;
   transform: translateX(-50%);
   padding-top: 0px;
   padding-bottom: 20px;
   padding-left: 15%;
   padding-right: 15%;
   display: none;
}

.emptyForm h4 {
   color: var(--contrast);
   margin-top: -3px;
   white-space: nowrap;
}

.sidebar-wrapper {
   position: relative;
   backdrop-filter: blur(3px);
   color: var(--contrast); 
   background-color: var(--containers) !important; 
   padding-bottom: 20px;
   font-weight: 300;
   border-radius: 20px;
   border-top-left-radius: 0;
   width: 300px;
   height: 800px;
   /*display: none; Remove this*/
}

.sidebar-body {
   position: absolute;
   left: 5px;
   overflow: scroll;
   border-radius: 10px;
   width: calc(100% - 10px);
   height: 67%;
}

.sidebar-title-container { 
   position: relative;
   padding: 20px;
}

.sidebar-title {
   position: relative;
   height: 150px;
   padding: 13px;
   border-radius: 20px;
}

.sidebar-title-text {
   position: relative;
}

.sidebar-events {
   overflow: hidden;
}

.sidebar-events.animate {
   animation: eventsSlide 1s;
}

@keyframes eventsSlide {
   0% {
      transform: translateY(0);
   }
   50% {
     transform: translateY(-105%);
   }
   100% {
      transform: translateY(0);
   }
}

/*Clock & weather & schedule*/

.clock-weather-schedule-wrapper {
   position: absolute;
   display: flex;
   flex-direction: column;
   gap: 27px;
   height: auto;
   width: 100%;
   
}

.clock-weather-wrapper {
   position: relative;
   display: flex;
   flex-direction: row;
   gap: 10px;
   height: auto;
   width: 100%;
}

/*Schedule*/

.schedule {
   top: 27px;
   position: relative;
   width: 100%;
   height: fit-content;
   backdrop-filter: blur(3px);
   background-color: var(--containers);
   padding: 20px;
   border-radius: 20px;
   overflow: hidden;
}

#message {
   position: relative;
   color: var(--borders);
   font-size: large;
   top: -50px;
}

#canvas-container {
   position: relative;
   width: 100%;
   height: fit-content;
   border-radius: 20px;
   overflow: hidden;
}

#imageBox {
   position: relative;
   width: 100%;
   height: 100%;
}

.foregroundOverlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #000;
}

#canvas-container:hover {
   border-radius: 0;
}

.file-btn {
  width: 5rem;
  height: 2rem;
  border-radius: 1rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  color: var(--contrast);
  font-size: smaller;
  margin-top: 17px;
  margin-bottom: 17px;
}

#finput {
  top: 0;
  opacity: 0;
  position: absolute;
}

#HideImage {
   padding: 6px;
   position: absolute;
   color: var(--contrast);
   left: 110px;
   bottom: 11.5rem; /*fix this*/
   cursor: pointer;
   width: 2rem;
   height: 2rem;
   border-radius: 1rem;
   box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
   justify-self: center;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 0.3s ease;
   font-size: smaller;
   margin-top: 13px;
   margin-bottom: 13px;
}

.segmented-control input[type="radio"] {
   -webkit-appearance: none; /* Remove default styles for Safari */
   -moz-appearance: none; /* Remove default styles for Firefox */
   appearance: none; /* Remove default styles for other browsers */
   position: absolute;
} 

.segmented-control {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  width: 20.4rem;
  height: 4rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  position: relative;
}

.segmented-control > label {
  width: calc(100% / 3);
  height: 100%;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--borders);
  transition: all 0.5s ease;
}

.segmented-control > label:hover {
   color: var(--contrast);
}

.segmented-control__color {
  position: absolute;
  height: 3.4rem;
  width: calc(100% / 3 - 0.6rem);
  margin-left: 0.3rem;
  border-radius: 0.8rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: translateX(0);
}

.segmented-control__color.active {
   transform: translateX(calc(6.8rem * (var(--index) - 1)));
} 

.segmented-control > label.active p {
   color: var(--contrast); 
} 

.slider {
  position: relative;
  margin-top: 17px; 
  grid-column: 3 / 4;
  grid-row: 5 / 6;
  align-self: center;
  display: flex;
  flex-direction: column;
  max-height: 70px;
}

.slider__box {
  width: 100%;
  height: 1rem;
  cursor: grab;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider__btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--greyLight-4);
  position: absolute;
  box-shadow: 0px 0.1rem 0.3rem 0px var(--greyLight-3);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider__btn:hover ~ .slider__tooltip {
  opacity: 1;
}

.slider__btn::after {
  content: '';
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

.slider__color {
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0;
  z-index: 100;
  border-radius: inherit;
  background: var(--primary);
  background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
}

.slider__tooltip {
  position: absolute;
  top: 2.6rem;
  height: 2.5rem;
  width: 3rem;
  border-radius: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: var(--primary);
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/*Clock*/
/*
.clock-wrapper {
   position: relative;
   width: calc(50% - 5px);
   height: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(3px);
   border-radius: 20px;
   background-color: var(--containers);
}

.clock-container {
	min-height: 330px;
   overflow: hidden;
	min-width: 350px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 16px;
	position: relative;
	scale:0.4; 
}

.clock {
   margin-top: 20px;
	min-height: 18em;
	min-width: 18em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	background-image: url("clock.png");
	background-position: center center;
	background-size: cover;
	border-radius: 50%;
	border: 4px solid transparent;
	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
		inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
		inset 0 15px 15px rgba(0, 0, 0, 0.3);
	transition: all ease 0.2s;
}

.clock:before {
	content: "";
	height: 0.75rem;
	width: 0.75rem;
	background-color: var(--main-clock-color);
	border: 2px solid transparent;
	position: absolute;
	border-radius: 50%;
	z-index: 1000;
	transition: all ease 0.2s;
}

.hou,
.min,
.sec {
	position: absolute;
	display: flex;
	justify-content: center;
	border-radius: 50%;
}
.hou {
	height: 10em;
	width: 10em;
}
.hou:before {
	content: "";
	position: absolute;
	height: 50%;
	width: 8px;
	background-color: var(--main-clock-color);
	border-radius: 8px;
}
.min {
	height: 12em;
	width: 12em;
}
.min:before {
	content: "";
	height: 50%;
	width: 6px;
	background-color: var(--main-clock-color);
	border-radius: 6px;
}
.sec {
	height: 13em;
	width: 13em;
}
.sec:before {
	content: "";
	height: 60%;
	width: 3px;
	background-color: #fff;
	border-radius: 3px;
}
*/
/*Weather*/
/*
.weather-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   font-size: 120%;
   width: calc(50% - 5px);
   overflow: hidden;
}

.card {
  margin-top: 0;
  margin-bottom: 0;
  backdrop-filter: blur(2px);
  background: var(--containers);
  color: white;
  padding: 2em;
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
}

#search-city {
   position: relative;
   top: -5px;
   left: 5px;
	height: 50px;
	width: 50px;
   margin-bottom: 10px;
   overflow: hidden;
	background-color: transparent;
	background-position: center center;
	background-size: cover;
	border-radius: 50%;
	border: 4px solid transparent;
	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
		inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
		inset 0 15px 15px rgba(0, 0, 0, 0.3);
   outline: none;
   color: var(--accent);
   transition: all 0.2s ease-in-out;
}

#search-city:hover {
   background-color: rgba(20, 20, 31, 0.304);
}

.search-bar {
   position: relative;
   top: -5px;
   left: -5px;
	min-height: 50px;
   height: fit-content;
   padding: 0.4em 1em;
	width: 100%;
   margin-bottom: 10px;
   overflow: hidden;
	background-color: transparent;
	background-position: center center;
	background-size: cover;
	border-radius: 24px;
	border: 4px solid transparent;
	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
		inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
		inset 0 15px 15px rgba(0, 0, 0, 0.3);
   outline: none;
   transition: all 0.2s ease-in-out;
}

.weather-wrapper .search-bar.placeholder {
   color: rgb(122, 122, 122); 
}

.search-bar:hover {
   background-color: rgba(20, 20, 31, 0.304);
}/*

/*Event input field*/

.icon-container {
   position: relative;
   top: 0;
   width: 100%;
   height: max-content;
   display: flex;
   flex-direction: row;
   color: var(--textContent);
   justify-content: space-between;
   gap: 5px;
   padding: 10px;
   padding-top: 20px;
   overflow: scroll;
}

.icon-container div {
   position: relative;
   transition: opacity 0.2s ease-in-out;
   opacity: 0.4;
}

.icon-container div:hover {
   cursor: pointer;
   opacity: 1;
}
/*
.event-input-wrapper {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 10px;
   width: 100%;
   z-index: 1;
}

.event-input-container {
   padding: 5px;
   position: relative;
   width: 45%;
   text-align: left;
   color: var(--textContent);
   font-size: larger;
}

.event-input-container > .search-bar {
   position: relative;
   width: 45%;
}
*/

.search-bar {
   position: relative;
   color: var(--textContent);
   border: dashed 1px var(--textContent);
   border-radius: 6px;
   width: 95%;
   text-align: start;
   max-width: 210px;
}

.search-bar.placeholder {
   color: #ffffff49;
   text-align: center;
}

/*Weather again*/
/*
.city {
   color: #cecece73;
   margin-top: -10px;
   z-index: 1;
}

.weather-svg {
   position: relative;
   display: flex;
   flex-direction: row;
   gap: 5px;
   width: fit-content;
   height: fit-content;
   color: rgb(122, 122, 122);
}

.temp-container {
   color: var(--textContent);
}

h4.temp {
  margin: 0;
}

.flex {
  padding-top: 1em; 
  padding-bottom: 1em; 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.description {
  text-transform: capitalize;
  padding-top: 3em; 
  padding-bottom: 1em; 
  z-index: 1;
}

.weather.loading {
  visibility: hidden;
  max-height: 20px;
  position: relative;
}

.weather.loading:after {
  visibility: visible;
  content: "Loading...";
  color: var(--textContent);
  position: absolute;
  top: 0;
  left: 20px;
}

.circle__btn {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 6rem;
  height: 6rem;
  display: flex;
  margin: 0.6rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 3.2rem;
  color: var(--primary);
  z-index: 300;
  background: var(--greyLight-1);
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  cursor: pointer;
  position: relative;
}

.circle__btn.shadow {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

.circle__btn .play {
  position: absolute;
  opacity: 0;
  transition: all 0.2s linear;
}

.circle__btn .play.visibility {
  opacity: 1;
}

.circle__btn .pause {
  position: absolute;
  transition: all 0.2s linear;
}

.circle__btn .pause.visibility {
  opacity: 0;
}

.circle__back-1, .circle__back-2 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 100;
}

.circle__back-1 {
  box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);
  background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);
  animation: waves 10s linear infinite;
}

.circle__back-1.paused {
  animation-play-state: paused;
}

.circle__back-2 {
  box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);
  animation: waves 10s linear 5s infinite;
}

.circle__back-2.paused {
  animation-play-state: paused;
}

@keyframes waves {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.fa {
   height: 50px;
   scale: 1.2;
}
*/

/*Time input*/

.addForm-row {
   position: relative;
   display: grid;
   padding-top: 10px;
   grid-template-columns: repeat(2, 1fr); /* Two columns in each row */
   place-items: center;
   gap: 20px 0;
   padding-bottom: 20px;
}

.time-input-wrapper {
  position: relative;
  bottom: -9px;
  height: 0;
  max-width: calc(100% - 242px);
  width: calc(50% + 20px);
  display: flex;
  overflow: visible;
}

.time-input-container {
  position: relative;
  height: fit-content;
  width: fit-content;
  overflow: visible;
}

.time-input {
  --time-offset: 0;
  width: 100px;
  min-height: 100px;
  background: rgba(34, 34, 34, 0.8);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--textContent);
  font-size: 15px;
  letter-spacing: 2px;
  perspective: 500px;
  --h1: 1;
  --h2: 2;
  --m1: 3;
  --m2: 4;
  --s1: 5;
  --s2: 6;
}

.cog1 {
  left: calc(100% / 8 * 0);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 8);
  transform: translateZ(3em);
}
.cog2 {
  left: calc(100% / 8 * 1);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 8);
  transform: translateZ(3em);
}
.cog3 {
  left: calc(100% / 8 * 2);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 8);
  transform: translateZ(3em);
}
.cog4 {
  left: calc(100% / 8 * 3);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 8);
  transform: translateZ(3em);
}
.cog5 {
  left: calc(100% / 8 * 4);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 8);
  transform: translateZ(3em);
}
.cog6 {
  left: calc(100% / 8 * 5);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / 8);
  transform: translateZ(3em);
}
.cog7 {
   left: calc(100% / 8 * 6);
   position: absolute;
   top: 0;
   bottom: 0;
   width: calc(100% / 8);
   transform: translateZ(3em);
}
.cog8 {
   left: calc(100% / 8 * 7);
   position: absolute;
   top: 0;
   bottom: 0;
   width: calc(100% / 8);
   transform: translateZ(3em);
}

.time-input,
.time-input:before,
.time-input * {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.time-input:before { 
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(34, 34, 34, .9) 20%, transparent calc(50% - .4ch), transparent calc(50% + .4ch), rgba(34, 34, 34, .9) 80%);
  transform: translateZ(2.6em);
}

.colon {
  display: inline-block;
  opacity: 0.8;
  transform: translateZ(2.5em);
  width: 1ch;
  margin: 0;
  text-align: center;
}

.cog {
  position: relative;
  width: 1ch;
  height: 1ch;
  margin: -0.25ch 0.1ch 0;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
  transform: rotateX(calc(-1turn * (var(--unit) / var(--char-total))));
}

.cog .word,
.cog .char {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1ch;
  height: 1ch;
}

.cog .char {
  transform: rotateX(calc(4deg + (360deg * var(--char-percent)))) translateZ(2.5em);
}

.tens {
  text-align: right;
}

.hours.tens {
  --unit: var(--h1);
}
.hours {
  --unit: var(--h2);
}
.minutes.tens {
  --unit: var(--m1);
}
.minutes {
  --unit: var(--m2);
}
.seconds.tens {
  --unit: var(--s1);
}
.seconds {
  --unit: var(--s2);
}

/*Crossword choose number of words*/
/*
.cross-time-input-wrapper {
   z-index: 1000;
}
*/

.cross.tens {
   --unit: var(--num1);
}
.cross {
   --unit: var(--num2);
}

.cross-cog1 {
   position: absolute;
   top: 0;
   height: 100%;
   width: 100%;
   z-index: 2000;
}

.cross-time-input {
   width: 30px;
   --num1: 1;
   --num2: 15;
}

/*Day word choose time between word change*/

.word-time-input {
   width: 25px;
   --wordNum1: 0;
   --wordNum2: 5;
}

.input-words.tens {
   --unit: var(--wordNum1);
}
.input-words {
   --unit: var(--wordNum2);
}

/**/

.time-input.day-time-input {
   width: 60px;
   --week1: 0;
   --week2: 0;
   --day1: 0;
   --day2: 1;
}

.weeks.tens {
   --unit: var(--week1);
}
.weeks {
   --unit: var(--week2);
}
.input-days.tens {
   --unit: var(--day1); 
}
.input-days {
   --unit: var(--day2); 
}

.day.cog1 {
  left: calc(100% / 4 * 0);
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateZ(3em);
  width: calc(100% / 4);
}
.day.cog2 {
  left: calc(100% / 4 * 1);
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateZ(3em);
  width: calc(100% / 4);
}
.day.cog3 {
  left: calc(100% / 4 * 2);
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateZ(3em);
  width: calc(100% / 4);
}
.day.cog4 {
  left: calc(100% / 4 * 3);
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateZ(3em);
  width: calc(100% / 4);
}


/*Calendar*/

.side-book {
   position: absolute;
   right: 17px;
   top: 10px;
   display: block;
}

.empty-message {
   font-size: 1.2rem;
   padding: 15px 6% 15px 12%;
}

.eventCard {
   width: 290px;
   height: 100%;
   margin-top: 7px;
   color: var(--contrast);
   padding: 12px 24px 12px 24px;
   border-radius: 10px;
   position: relative;
   animation: slideInDown 0.5s;
   line-height: 1.5; 
   letter-spacing: 1px;
}

@keyframes slideInDown {
   0% {
      transform: translateY(-100%);
   }
   100% {
     transform: translateY(0);
   }
}

.eventCard-header {
   position: relative;
   font-weight: bold;
   max-width: 205px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.eventCard-description {
   position: relative;
   color: var(--textContent);
   max-width: 205px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.5; 
   letter-spacing: 0.5px;
}

.eventCard-time {
   padding-top: 5px;
   position: relative;
   font-weight: bolder;
   color: var(--textContent);
   letter-spacing: 1px;
}

.eventCard-header:focus,
.eventCard-description:focus {
  outline: 1px dashed var(--borders); /*?*/
  border-radius: 4px;
}

/*Make this shorter*/

.eventCard:hover > .eventCard-description {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.eventCard:hover > .eventCard-header {
   overflow: visible !important;
   text-overflow: clip !important;
   white-space: normal !important;
}

.eventCard-mark-wrapper {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: 60px;
   border-radius: 10px;
}

.eventCard-icon-wrapper {
   position: absolute;
   right: 4%;
   top: calc(50% + 4px);
   transform: translate(-50%, -50%);
   cursor: pointer;
   height: fit-content;
   width: fit-content;
}

.eventCard-icon-wrapper > .svg-icon {
   color: var(--accent); 
} 

.eventCard-icon-wrapper > .svg-icon:hover {
   color: #db5151; 
}

.eventCard-mark > .svg-icon:hover {
   color: var(--textContent); 
}

.day-mark {
   position: relative;
   top: -10px;
   min-width: 20px;
   min-height: 20px;
   scale: 1;
   background-color: var(--accent);
   border-radius: 20px;
   transition: all 0.5s ease-in-out;
}

.content-wrapper {
   padding-top: 50px;
   padding-bottom: 50px;
   margin-left: 300px;
   margin-right: 75px;
   display: flex;
   justify-content: center;
}

.days {
   position: relative;
   width: 100%;
   left: 0;
   display: flex;
   justify-content: space-between;
}

.col {
   position: relative;
   height: 55px;
   aspect-ratio: 1/1;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   border-radius: 50%;
}

/*
#table-body .row .col { 
   padding: 0.75rem 6.8% 0.75rem 6.8%; 
}

#table-body .col {
   border: 1px solid transparent;
   padding-top: 1.3rem !important;
   padding-bottom: 1.3rem !important;
   border-radius: 5px;
   cursor: pointer;
}

#table-body .col:hover {
   background-color: var(--borders);
}*/

.empty-day {
   cursor: default !important; 
}

.empty-day:hover {
   background-color: transparent !important; 
}

#calendar-table {
   text-align: center;
}

.prev-button {
   position: absolute;
   cursor: pointer;
   left: 0;
   top: 36%;
   color: var(--textContent) !important;
   opacity: 0.5;
   transition: opacity 0.3s ease-in-out;
}

.prev-button i {
   font-size: 4em;
}

.prev-button:hover {
   opacity: 1;
}

.next-button {
   position: absolute;
   cursor: pointer;
   right: 0;
   top: 36%;
   color: var(--textContent) !important;
   opacity: 0.5;
   transition: opacity 0.3s ease-in-out;
}

.next-button i {
   font-size: 4em;
}

.next-button:hover {
   opacity: 1;
}

.event-btn-container {
   position: relative;
   width: 100%;
   height: 148px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   gap: 17px;
   justify-content: center;
   align-items: center;
   transition: width 0.5s ease-in-out;
}

.quick-view {
   position: relative;
   width: 100%;
   height: 148px;
   border-radius: 20px;
   overflow: hidden;
   transition: height 0.5s ease-in-out;
}

.quick-view .eventCard { 
   background-color: transparent;
   max-width: fit-content;
   max-height: fit-content;
   padding: 0 0 0 10px;
   animation: none;
}

.quick-week-message {
   padding-top: 10px;
   position: relative;
   font-size: large;
   font-weight: bolder;
   color: var(--textContent);
}

.quick-week-message::before {
   content: '';
   position: absolute;
   height: 1px;
   width: 75%;
   background-color: rgba(255, 255, 255, 0.2);
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
}

.quick-events {
   display: block;
}

.addEvent { 
   position: relative;
   width: 100%;
   padding: 8px 0 8px 0;
   cursor: pointer;
   border-radius: 25px;
   color: var(--textContent) !important;
   background-color: var(--events);
   transition: all 0.5s;
   font-size: large;
   font-weight: bolder;
   z-index: 1;
   overflow: hidden;
   text-wrap: nowrap;
}

.book {
   position: absolute;
   top: 15px;
   right: 17px;
}

.mobile-header {
   right: 0;
   width: 75px;
   position: fixed;
   z-index: 101;
   height: 100%;
   backdrop-filter: blur(3px);
   background-color: var(--containers) !important;
}

.mobile-header a i {
   color: var(--contrast);
   font-size: 38px;
   margin-top: 13px;
   display: none;
}

.mobile-header h4 {
   margin: 0;
   font-weight: 300;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.fadeOutRight {
  animation-name: fadeOutRight;
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}
.fadeInRight {
  animation-name: fadeInRight;
}
.fadeInLeft {
  animation-name: fadeInLeft;
}

/*Dropdown library*/

.dropdown-library-btn::after {
   position: relative;
   content: "v";
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--events);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   padding: 5px;
   margin-left: 5px;
}

.dropdown-wrapper {
   position: absolute;
   top: 40px;
   right: 0;
   height: 0;
   z-index: 10000;
   border-radius: 20px;
   overflow: hidden;
   transition: all 300ms ease;
   font-size: medium;
   color: var(--textContent);
}

.dropdown-slider {
   position: relative;
   width: fit-content;
   height: fit-content;
   display: flex;
   flex-direction: row;
   gap: 16px;
   background-color: #141414;
   cursor: context-menu;
   transition: all 600ms ease;
}

.dropdown-container {
   position: relative;
   top: 0;
   width: max-content;
   max-width: 400px;
   height: 100%;
   background-color: #303030;
   display: flex;
   flex-direction: column;
   padding: 8px;
   cursor: context-menu;
}

#dropdownLeft {
   left: 0;
}

.topic-header {
   position: relative;
   color: var(--textContent);
   font-size: large;
   width: 100%;
   height: fit-content;
   padding: 8px;
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.topic-header::before {
   content: '';
   position: absolute;
   height: 1px;
   width: 75%;
   background-color: rgba(255, 255, 255, 0.2);
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
}

.dropdown-back {
   position: relative;
   width: 0;
   color: var(--textContent);
   left: -25px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.topic-header-text {
   position: relative;
   width: fit-content;
   height: fit-content;
   text-align: center;
}

.dropdown-back:hover {
   color: #fff;
   scale: 1.05;
}

.topic {
   position: relative;
   display: flex;
   flex-direction: row;
   color: var(--textContent);
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 8px;
   cursor: pointer;
}

.topic:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.action-btn {
   position: absolute;
   text-align: center;
   padding: 8px;
   width: 40px;
   left: 8px;
   top: 50%;
   transform: translateY(-50%);
   height: auto;
   border-radius: 50%;
   color: #62d451;
   background-color: rgba(255, 255, 255, 0.165);
   z-index: 1;
   transition: background-color 0.2s ease-in-out;
}

.action-btn:hover {
   background-color: rgba(255, 255, 255, 0.4);
}

.topic-name {
   position: relative;
   padding-left: 50px;
   padding-right: 20px;
   width: fit-content;
   text-align: left;
}

.view-sub-topics {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-40%);
   color: var(--textContent);
   transition: all 0.3s ease;
}

.topic:hover > .view-sub-topics {
   color: #fff;
   scale: 1.05;
}

/*Table*/

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 9999;
   transition: opacity 0.5s ease-in-out;
}

.table-wrapper {
   position: fixed;
   visibility: hidden;
   width: fit-content;
   min-width: 200px;
   max-width: 100%;
   top: 0;
   bottom: 0;
   background-color: var(--hidden-sidebar);
   z-index: 10000;
   left: 0;
   transition: opacity 0.5s, transform 0.5s;
   opacity: 0;
   transform: translateX(100%);
}

.table-wrapper.show {
   visibility: visible;
   opacity: 1;
   transform: translateX(0);
}
 

.table-wrapper.right-align {
   left: auto;
   right: 0;
}

.table-wrapper.right-align .cell {
   text-align: left;
} 

.table-container { 
   position: relative;
   width: fit-content;
   min-width: 200px;
   max-width: 100%;
   height: 90%;
   bottom: 0;
   background: var(--hidden-sidebar);
   right: 0;
   transition: all 0.3s ease-in-out; 
   overflow: auto;
}

.synonym {
   text-decoration-line: underline;
}

.buttons {
	padding: 16px;
	box-sizing: border-box;
   width: max-content;
   display: flex;
   flex-direction: row;
}
/*
.buttons div {
	padding: 4px 16px;
   margin-right: 5px;
	background: #232741;
	border: 2px solid #FFEA00;
	border-radius: 20px;
	color: #FFEA00;
	font-family: 'Lucida Sans Unicode', Lato, Arial, sans-serif;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.25s;
   width: max-content;
}

.button:hover {
	background: #FFEA00;
	color: #232741;
   border: 2px solid #232741;
}*/

.button--clear:hover {
	background: #db5151;
	color: #000;
}

.inner-table-container { 
   display: flex;
   justify-content: center;
   align-items: center;
}

.table {
   display: table;
   margin: 16px;
   width: 91.5%;
	font-family: 'Lucida Sans Unicode', Lato, Arial, sans-serif;
	font-size: 14px;
}

.row-table {
  display: table-row;
  width: 100%;
  height: 30px;
}

.cell {
  display: table-cell;
  padding: 8px;
  min-width: 120px;
  width: fit-content;
  max-width: 500px;
  color: var(--textContent);
  letter-spacing: 1px;
  font-weight: light;
  box-sizing: border-box;

  border-left: 1px solid #848484;
  border-right: 1px solid #848484;
  border-top: 1px solid #848484;
  border-bottom: 1px solid #848484;

  transition: all 0.5s ease-in-out, border-color 0s;
}

.cell.hide-column {
   border-left: 1px solid #848484 !important;
  border-right: 1px solid #848484 !important;
  border-top: none;
  border-bottom: none;
  font-size: 0;
  line-height: 0;
  background-color: var(--events);
  max-width: 50px;
  min-width: 0;
}

.options-container {
   position: absolute;
   width: fit-content;
   height: fit-content;
   top: var(--header-height);
   background: #303030;
   display: flex;
   flex-direction: column;
   border-radius: 10px;
   margin: 0 !important;
   padding: 8px;
   z-index: 1;
}

.option {
   position: relative;
   margin: 0 !important;
   height: 35px;
   width: 210px;
   font-size: medium;
   font-weight: normal;
   color: var(--textContent);
   border-radius: inherit;
   cursor: pointer;
}

.option::before {
   position: absolute;
   height: 35px;
   width: fit-content;
   bottom: -3px;
   padding: 4px 8px 4px 8px;
   content: attr(data-option-name);
}

.option-before {
   position: relative;
   top: 8px;
   left: 85%;
}

.option:hover {
   background: rgba(124, 124, 124, 0.3);
}

.cell.header {
	background-color: var(--events);
	color: var(--contrast);
	font-size: 1.2em !important;
   line-height: normal !important;
	font-weight: bold;
	letter-spacing: 1px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   border-top: 1px solid #848484 !important;
}

.cell.header span {
   padding-left: 0;
}

.cell.header.hide-column span { 
   display: inline-block;
   white-space: nowrap;
   transform-origin: left;
   transform: rotate(90deg);
   padding-bottom: 60%;
   transition: all 0.5s ease-in-out;
   padding-left: 10px;
} 

.state-before {
   position: absolute;
}

.cell:focus {
  outline: none;
  border-color: var(--contrast);
}

div[row=2] div [col=2] {
	border-color: red;
}

.colors {
   position: absolute;
   top: 0; 
   bottom: 0;
   width: 150px;
   margin-left: -170px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   overflow: hidden;
}

.colors div {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 110px;
   height: 60px;
   background: var(--events);
   margin-top: 2%;
   margin-bottom: 2%;
   border-radius: 10px;
   font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
}

.color1 {
   color: white;
}
.color2 {
   color: #ff00ff;
}
.color3 {
   color: #c300ff;
}
.color4 {
   color: #0008ff;
}
.color5 {
   color: #00e5ff;
}
.color6 {
   color: #37ff00;
}
.color7 {
   color: #fffb00;
}
.color8 {
   color: #ff9500;
}
.color9 {
   color: #ff0000;
}

/*crossword*/

.crossword-position-prog {
   position: relative;
   width: fit-content;
   height: fit-content;
   /*left: 50%;
   transform: translateX(-50%);*/
}

span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 50px;
  transform: translate(-50%, -50%);
  color: #62d451;
}

span#procent::after {
  content: '%';
}

.crossword-prog-wrap {
  position: absolute;
  top: -108px;
  right: -108px;
  width: 300px; 
  height: 300px;
  scale: 0.4;
  z-index: 0;
}

.direction-square {
   color: var(--textContent);
}

.crossword-wrapper {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 100px;
   padding-right: 75px;
   z-index: 1;
}

.crossword-container {
  position: relative;
  height: min-content;
  width: fit-content;
  /*min-width: 400px;*/
  margin:0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cross-btns-wrapper {
   position: relative;
   width: fit-content;
   height: fit-content;
   padding: 20px;
   background-color: var(--containers);
   backdrop-filter: blur(3px);
   border-radius: 20px;
}

.cross-btns-container {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   width: fit-content;
   height: fit-content;
   /*gap: 15px;*/
}

.cross-btn {
   display: flex;
   border-radius: 1rem;
   box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
   cursor: pointer;
   transition: 0.3s ease;
   color: var(--contrast);
   padding: 8px;
   font-size: 1.4rem;
   height: 3.3rem;
   align-items: center;
   justify-content: center;

   margin-right: 15px;
}

.cross-btn.cross-svg svg {
   margin-left: 5px;
}

/*special style buttom*/
.button--closeTable {
   height: fit-content;
   width: auto;
   color: #db5151;
}
/**/

.cross-change-btn {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   width: fit-content;
   height: fit-content;
   /*gap: 15px;*/
}

.cross-time-input-styling {
   position: relative;
   display: flex;
   width: fit-content;
   height: fit-content;

   align-items: center;
   justify-content: center;
	background-color: transparent;
	background-position: center center;
	background-size: cover;
	border-radius: 10px;
	border: 4px solid transparent;
	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
      5px 0 15px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.cross-time-input-styling-inner {
   box-shadow: inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.5), inset 0 15px 15px rgba(0, 0, 0, 0.5);
}

.style-lines {
   position: relative;
   width: fit-content;
   height: fit-content;
   background-color: var(--events);
   backdrop-filter: blur(3px);
   color: var(--textContent); 
   border-radius: 25px;
   padding: 20px;
   margin-bottom: 20px;
   overflow: hidden;
}

.line {  
  position: relative;
  display: flex;
  align-items: flex-start;
  text-align: left;
  height: fit-content;
}

.cross-word, .clue {
   position: relative;
   display: inline-block; 
   padding: 0 5px;
   height: fit-content;
   flex: 1;
   font-size: 16px;
}

.cross-num {
   position: relative;
}

.cross-word {
   padding-right: 8px;
   width: fit-content;
   min-width: 120px;
   max-width: 120px;
   color: #62d451;
}

.clue {
  max-width: 500px;
}

.crossword {
  position: relative;
  display: block;  
  background-color: var(--containers);  
  backdrop-filter: blur(3px);
  border-radius: 25px;
}

.square {  
  position: relative;
  margin: 0 1px 1px 0;
  display: inline-block;
  font-size: clamp(12px, 1.2vw, 24px);
  width: 1.95em;
  height: 1.95em;
  line-height: 1.95em;
  vertical-align: middle;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (max-width: 860px) {
   .square {
      font-size: clamp(12px, 1vw, 24px);
   }
}

.letter {
  position: relative;
  background-color: var(--events);
  color: var(--textContent);
  text-align: center;
   
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.cross-input {
   position: relative; 
   font-size: clamp(12px, 1.2vw, 24px);
   text-transform: uppercase;
   outline: 0;
   border: 0;
   padding: 0;
   margin: -1px 0 0 -1px;
   width: 2.05em;
   height: 2.05em;
   text-align: center;
   background: none; 
} 

@media (max-width: 860px) {
   .cross-input {
      font-size: clamp(12px, 1vw, 24px);
   }
}

.cross-input:focus { 
  -webkit-box-shadow: 0 0 0 1.5px var(--accent);
  -moz-box-shadow: 0 0 0 1.5px var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);  
}

.first-letter-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

.first-letter-content {
  width: fit-content;
  height: fit-content;
  line-height: 1.25em;
  text-align: center;
  font-size: clamp(7px, 0.55vw, 10px);
}

.tooltip {
   position: absolute;
   display: none;
   width: max-content;
   max-width: 200px;
   height: fit-content;
   background-color: rgba(56, 56, 56, 0.8);
   color: var(--textContent);
   font-size: small;
   line-height: 1.2;
   text-align: left;
   padding: 8px;
   z-index: 1;
   border-radius: 10px;
   backdrop-filter: blur(5px);
   padding-right: 30px;
}

.correct-word {
   position: relative;
   opacity: 0;
   color: #62d451;
   height: 0;
}

.tool-clue {
   position: relative;
}

.answerSVG-tooltip {
   position: absolute;
   top: 0;
   right: 0;
   cursor: pointer;
}

.hide {
  visibility: hidden;
}

/*Wiew words*/

.word-wrapper {
   position: relative;
   left: 22px;
   width: 100%;
   height: fit-content;
}

.word-container {
   position: relative;
   width: 100%;
   height: fit-content;
}

.learn-word { 
   position: relative;
   width: 100%;
   max-width: 400px;
   height: fit-content;
   max-height: 85px;
   backdrop-filter: blur(3px);
   background: var(--containers);
   padding: 8px;
   padding-left: 12px;
   border-radius: 20px;
   margin-bottom: 27px;
   overflow: hidden;
   color: #7a7a7a;
   transition: color 0.3s ease-in-out;
}

.learn-word:hover {
   max-height: none;
   color: var(--textContent);
}

.learn-header-word {
   position: relative;
   font-size: larger;
   color: var(--textContent);
}

.learn-description-word {
   position: relative;
}

.content-wrapper .container {
   width: 100%;
   margin-left: -22px;
}

/*Screen size adapt*/
/*
@media (max-width:1655px) {
   main {
      scale: 0.1;
   }
}
@media (max-width:1500px) {
   .calendar-content {
      padding-left: 2%;
      padding-right: 2%;
   }
   body .row {
      margin-bottom: 0;
   }
}

@media (max-width:1225px) {
   .calendar-content {
      padding-left: 0%;
      padding-right: 0%;
   }
}

@media (max-width:1000px) {
   .mobile-header {
      padding: 0;
      padding-top: 10px;
      padding-bottom: 10px;
      width: 100%;
      height: 60px;
   }
   .mobile-header a i {
      margin-top: 0;
      margin-left: 10px;
      display: block;
   }
   .book {
      top: 9px;
   }
   .calendar-wrapper {
      margin-top: 80px;
   }
   .month {
      width: 30%;
   }
   .word-wrapper {
      margin-top: 80px;
   }
   .content-wrapper {
      margin-left: 0;
      margin-right: 0;
   }
   .sidebar-wrapper {
      background-color: var(--hidden-sidebar) !important; 
   }
   .sidebar-title-container {
      background-color: var(--hidden-sidebar) !important; 
   }
   .eventCard {
      background-color: #252525;
   }
   .crossword-wrapper {
      transform: translateX(38px);
   }
}

@media (max-width: 900px) {
   .word-wrapper {
      position: absolute;
      width: 100%;

      left: 50%;
      transform: translateX(-50%);
   }
   .calendar-cells {
      margin-left: 9px;
   }
   .calendar-content {
      padding-left: 10%;
      padding-right: 10%;
   }
   .clock-weather-schedule-wrapper {
      margin-top: 54px;
      transform: translateX(22px);
      position: relative;
   }
   .schedule {
      transform: translateX(22px);
   }
   main {
      display: 0.35;
   }
}

@media (max-width:600px) {
   .calendar-content {
      padding-left: 0;
      padding-right: 0;
   }
}

@media (max-width:640px) {
   main {
      scale: 0.1;
   }
}

@media (max-width:470px) {
   .cell.header {
      font-size: 1em;
	   letter-spacing: 0;
   }
   .table {
      font-size: 10px;
   }
   .button {
      font-size: 12px;
   }
}
*/
/* Solar System Styles */

main {
  top: -10px;
  height: 0;
  position: absolute;
  width: 960px;
  margin: 0 auto;
  padding: 0;
  scale: 0.35;
  z-index: 0;
  right: -373px;
}

ul.solarsystem {
  position: relative;
  height: 640px;
  list-style: none;
  -webkit-transition: all 0.09s ease-in;
  -moz-transition: all 0.09s ease-in;
  -o-transition: all 0.09s ease-in;
  transition: all 0.09s ease-in;
  overflow: hidden;
}

ul.solarsystem li {
  display: block;
  position: absolute;
  border: 2px solid #394057;
  opacity: 0.9;
}

ul.solarsystem li span {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

ul.solarsystem li.active {
  border-color: #aa4200;
}

ul.solarsystem li.active.sun,
ul.solarsystem li.active span {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

ul.solarsystem li.active.sun span,
ul.solarsystem li.active.earth .moon {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

ul.solarsystem li.sun {
  width: 40px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #fc3;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.22, rgb(204, 153, 0)), color-stop(1, rgb(255, 219, 112)));
  background-image: -moz-linear-gradient( center bottom, rgb(204, 153, 0) 22%, rgb(255, 219, 112) 100%);
  top: 302px;
  left: 462px;
  border: none;
  -webkit-box-shadow: 0 0 50px #c90;
  -moz-box-shadow: 0 0 50px #c90;
  box-shadow: 0 0 50px #c90;
  z-index: 100;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

ul.solarsystem li.sun span {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

ul.solarsystem li.mercury {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  border-radius: 52px;
  top: 270px;
  left: 430px;
  z-index: 99;
}

ul.solarsystem li.mercury span {
  background: #b6bac5;
  top: 10px;
  left: 10px;
}

ul.solarsystem li.venus {
  width: 160px;
  height: 160px;
  -webkit-border-radius: 82px;
  -moz-border-radius: 82px;
  border-radius: 82px;
  top: 240px;
  left: 400px;
  z-index: 98;
}

ul.solarsystem li.venus span {
  background: #bf8639;
  top: 118px;
  left: 5px;
}

ul.solarsystem li.earth {
  width: 220px;
  height: 220px;
  -webkit-border-radius: 112px;
  -moz-border-radius: 112px;
  border-radius: 112px;
  top: 210px;
  left: 370px;
  z-index: 97;
}

ul.solarsystem li.earth span {
  background: #06c;
  top: 56px;
  left: 5px;
}

ul.solarsystem li.earth span.moon {
  width: 4px;
  height: 4px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #ccc;
  top: 12px;
  left: 12px;
}

ul.solarsystem li.mars {
  width: 280px;
  height: 280px;
  -webkit-border-radius: 142px;
  -moz-border-radius: 142px;
  border-radius: 142px;
  top: 180px;
  left: 340px;
  z-index: 96;
}

ul.solarsystem li.mars span {
  background: #aa4200;
  top: 0px;
  left: 175px;
}

ul.solarsystem li.jupiter {
  width: 340px;
  height: 340px;
  -webkit-border-radius: 172px;
  -moz-border-radius: 172px;
  border-radius: 172px;
  top: 150px;
  left: 310px;
  z-index: 95;
}

ul.solarsystem li.jupiter span {
  background: #e0ae6f;
  top: 67px;
  left: 24px;
}

ul.solarsystem li.saturn {
  width: 400px;
  height: 400px;
  -webkit-border-radius: 202px;
  -moz-border-radius: 202px;
  border-radius: 202px;
  top: 120px;
  left: 280px;
  z-index: 94;
}

ul.solarsystem li.saturn span {
  background: #dfd3a9;
  top: 24px;
  left: 300px;
}

ul.solarsystem li.saturn span.ring {
  width: 12px;
  height: 12px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: none;
  border: 2px solid #5a4e34;
  left: -3px;
  top: -3px;
  -webkit-transform: skewY(50deg);
  -moz-transform: skewY(50deg);
  -o-transform: skewY(50deg);
  transform: skewY(50deg);
}

ul.solarsystem li.uranus {
  width: 460px;
  height: 460px;
  -webkit-border-radius: 232px;
  -moz-border-radius: 232px;
  border-radius: 232px;
  top: 90px;
  left: 250px;
  z-index: 93;
}

ul.solarsystem li.uranus span {
  background: #82b3d1;
  top: 7px;
  left: 300px;
}

ul.solarsystem li.neptune {
  width: 520px;
  height: 520px;
  -webkit-border-radius: 262px;
  -moz-border-radius: 262px;
  border-radius: 262px;
  top: 60px;
  left: 220px;
  z-index: 92;
}

ul.solarsystem li.neptune span {
  background: #77c2ec;
  top: 0px;
  left: 200px;
}

ul.solarsystem li.pluto {
  width: 580px;
  height: 580px;
  -webkit-border-radius: 292px;
  -moz-border-radius: 292px;
  border-radius: 292px;
  top: 30px;
  left: 190px;
  z-index: 91;
}

ul.solarsystem li.pluto span {
  background: #7c6a5c;
  top: 79px;
  left: 79px;
}

ul.solarsystem li {
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: orbit;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-name: orbit;
}

ul.solarsystem li.earth span {
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: moon;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-name: moon;
}

ul.solarsystem li.mercury {
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
}

ul.solarsystem li.venus {
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8s;
}

ul.solarsystem li.earth {
  -webkit-animation-duration: 12s;
  -moz-animation-duration: 12s;
}

ul.solarsystem li.earth span {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
}

ul.solarsystem li.mars {
  -webkit-animation-duration: 20s;
  -moz-animation-duration: 20s;
}

ul.solarsystem li.asteroids_meteorids {
  -webkit-animation-duration: 50s;
  -moz-animation-duration: 50s;
}

ul.solarsystem li.jupiter {
  -webkit-animation-duration: 30s;
  -moz-animation-duration: 30s;
}

ul.solarsystem li.saturn {
  -webkit-animation-duration: 60s;
  -moz-animation-duration: 60s;
}

ul.solarsystem li.uranus {
  -webkit-animation-duration: 70s;
  -moz-animation-duration: 70s;
}

ul.solarsystem li.neptune {
  -webkit-animation-duration: 100s;
  -moz-animation-duration: 100s;
}

ul.solarsystem li.pluto {
  -webkit-animation-duration: 120s;
  -moz-animation-duration: 120s;
}

@-webkit-keyframes orbit {
  from {
    -webkit-transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg)
  }
}

@-webkit-keyframes moon {
  from {
    -webkit-transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg)
  }
}

@-moz-keyframes orbit {
  from {
    -moz-transform: rotate(0deg)
  }
  to {
    -moz-transform: rotate(360deg)
  }
}

@-moz-keyframes moon {
  from {
    -moz-transform: rotate(0deg)
  }
  to {
    -moz-transform: rotate(360deg)
  }
}