* {
  box-sizing: border-box;
}

*:before {
  box-sizing: border-box;
}

*:after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

hr {
  width: 70%;
  margin-right: 30%;
}

html {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  height: 100%;
  font-family: 'aptos-light', 'calibri', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  position: relative;
  height: 100%;
}

header {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  height: 90px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

main {
  padding-top: 5px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 5px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  min-height: calc(100vh - 198px);
  display: block;
}

footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(204, 204, 204, 1.0);
  border-top: 1px solid #777;
  color: #ababab;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-size: 12px;
  padding: 20px 15px;
  margin-left: auto;
  margin-right: auto;
}

#theme-toggle:checked~.theme-wrapper footer {
  background-color: #1c1c1c;
  border-top: 1px solid #444;
}

.check {
  display: none;
}

.clear {
  clear: both;
}

.theme-toggle-container {
  margin-left: auto;
  margin-right: auto;
}

.theme-toggle-label {
  position: absolute;
  top: 18px;
  right: 75px;
  width: 48px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.theme-toggle-label:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.theme-toggle-label::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 27px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease, background-image 0.3s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  z-index: 10;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>');
}

#theme-toggle:checked+.theme-toggle-label {
  background-color: rgba(149, 182, 208, 1.0);
}

#theme-toggle:checked+.theme-toggle-label:hover {
  background-color: rgba(176, 200, 220, 1.0);
}

#theme-toggle:checked+.theme-toggle-label::before {
  right: 5px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 0111.21 3 7 7 0 0012 21a9 9 0 009-8.21z"/></svg>');
}

.theme-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgba(125, 125, 125, 1.0);
  background-image: url('https://azure.ms-svr.net/assets/images/img0.jpg');
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-property: all;
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

#theme-toggle:checked~.theme-wrapper {
  background-color: rgba(75, 75, 75, 1.0);
  background-image: url('https://azure.ms-svr.net/assets/images/img1.jpg');

}

.theme-overlay {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  background-attachment: fixed;
  background-size: cover;
  background-image: radial-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#80000000, endColorStr=#00000000, GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#80000000, endColorStr=#00000000, GradientType=0);
}

.microsoft365-container {
  position: relative;
  height: auto;
  width: auto;
  float: left;
}

.microsoft365-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: auto;
}

.microsoft365-menu-grid-icon {
  position: relative;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 17a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4zM5 17a2 2 0 110 4 2 2 0 010-4zm7-7a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4zM5 10a2 2 0 110 4 2 2 0 010-4zm7-7a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4zM5 3a2 2 0 110 4 2 2 0 010-4z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.microsoft365-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.check:checked+label+.microsoft365-submenu {
  display: block;
}

.microsoft365-checkbtn {
  cursor: pointer;
}

.microsoft365-submenu {
  position: absolute;
  display: none;
  min-width: 313px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(204, 204, 204, 1.0);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(204, 204, 204, 1.0);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(204, 204, 204, 1.0);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(204, 204, 204, 1.0);
  border-radius: 5px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  background: rgba(249, 249, 249, 1.0);
  z-index: 3;
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

@media (max-width: 340px) {
  .microsoft365-submenu {
    min-width: auto;
  }

}

.microsoft365-submenu-header {
  margin-bottom: 15px;
  margin-left: 15px;
  margin-right: 15px;
}

.microsoft365-submenu-title {
  font-size: 14px;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-weight: 600;
  color: rgba(0, 0, 0, 1.0);
  float: left;
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-title {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-link-microsoft365 {
  float: right;
  font-size: 14px;
  text-decoration: none;
  color: #0078d4;
}

.microsoft365-submenu-link-microsoft365:hover {
  text-decoration: underline;
  color: #004578;
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-link-microsoft365 {
  color: rgba(149, 182, 208, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-link-microsoft365:hover {
  color: #b0c8dc;
}

@media (max-width: 340px) {
  .microsoft365-submenu-link-microsoft365 {
    float: left;
  }

}

.microsoft365-submenu-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.microsoft365-submenu-column {
  display: inline-block;
  vertical-align: top;
  width: auto;
  font-size: 14px;
  box-sizing: border-box;
}

.microsoft365-submenu-li {
  height: 38px;
  width: 143px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.microsoft365-submenu-li:hover {
  background-color: rgba(0, 0, 0, 0.1)
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.microsoft365-submenu-outlook {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-outlook {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-outlook::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/OutlookLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-word {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-word {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-word::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/WinWordLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-excel {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-excel {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-excel::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/ExcelLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-onenote {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-onenote {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-onenote::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/OneNoteLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-powerpoint {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-powerpoint {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-powerpoint::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/PowerPntLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-todo {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-todo {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-todo::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/ToDoLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-calendar {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-calendar {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-skype::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/SkypeLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-skype {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-skype {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-teams::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/TeamsLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-teams {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-teams {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-calendar::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/CalendarLogo.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.microsoft365-submenu-onedrive {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-onedrive {
  color: rgba(255, 255, 255, 1.0);
}

.microsoft365-submenu-onedrive::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background-image: url('https://azure.ms-svr.net/assets/icons/OneDriveMedTile.scale-180.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.system-select-submenu-link-all {
  float: left;
  font-size: 14px;
  text-decoration: none;
  color: #0078d4;
  margin-top: 15px;
  margin-left: 10px;
}

.system-select-submenu-link-all:hover {
  text-decoration: underline;
  color: #004578;
}

#theme-toggle:checked~.theme-wrapper .system-select-submenu-link-all {
  color: rgba(149, 182, 208, 1.0);
}

#theme-toggle:checked~.theme-wrapper .system-select-submenu-link-all:hover {
  color: #b0c8dc;
}

.microsoft365-submenu-link-apps {
  float: left;
  font-size: 14px;
  text-decoration: none;
  color: #0078d4;
  margin-top: 15px;
  margin-left: 10px;
}

.microsoft365-submenu-link-apps:hover {
  text-decoration: underline;
  color: #004578;
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-link-apps {
  color: rgba(149, 182, 208, 1.0);
}

#theme-toggle:checked~.theme-wrapper .microsoft365-submenu-link-apps:hover {
  color: #b0c8dc;
}

.microsoft-logo-container {
  float: left;
  margin-left: 15px;
}

.microsoft-logo {
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: rgba(250, 250, 250, 1.0);
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.microsoft-logo::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background-image: url('https://azure.ms-svr.net/assets/icons/MsLogo.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.nav-header {
  display: inline-block;
  width: calc(100% - 245px);
  margin-top: 13px;
  margin-left: 50px;
  margin-bottom: 13px;
}

.subnav-header {
  display: block;
  margin-left: 25px;
}

.subnav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 3px;
  transition: color 0.3s ease;
}

.subnav-link:hover {
  color: rgba(255, 255, 255, 0.9)
}

.nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.9)
}

.nav-link-home {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link-home:hover {
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 440px) {
  .nav-link-home {
    display: none;
  }
}

.nav-link-documents {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link-documents:hover {
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 530px) {
  .nav-link-documents {
    display: none;
  }
}

.nav-link-games {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link-games:hover {
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 580px) {
  .nav-link-games {
    display: none;
  }
}

.nav-link-music {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link-music:hover {
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 640px) {
  .nav-link-music {
    display: none;
  }
}

.nav-link-pictures {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link-pictures:hover {
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 710px) {
  .nav-link-pictures {
    display: none;
  }
}

.nav-link-videos {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.nav-link-videos:hover {
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 780px) {
  .nav-link-videos {
    display: none;
  }
}

.overflow-check:checked+.overflow-btn .overflow-menu,
.overflow-btn:hover .overflow-menu {
  display: block;
}

.overflow-btn::before {
  content: "\00B7 \00B7 \00B7";
  font-size: 1em;
  line-height: 1;
}

.overflow-btn {
  cursor: pointer;
  padding: 0 1rem;
  display: inline-block;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
}

.overflow-btn:hover {
  color: rgba(255, 255, 255, 0.9)
}

.overflow-check {
  display: none;
}

.overflow-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(249, 249, 249, 1.0);
  border: 1px solid rgba(204, 204, 204, 1.0);
  border-radius: 0.25rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#theme-toggle:checked~.theme-wrapper .overflow-menu {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

.overflow-nav-link {
  transition: color 0.3s ease;
  text-decoration: none;
  display: block;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

.overflow-nav-link-home {
  transition: color 0.3s ease;
  text-decoration: none;
  display: none;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-home {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link-home:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-home:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 440px) {
  .overflow-nav-link-home {
    display: block;
  }
}

.overflow-nav-link-documents {
  transition: color 0.3s ease;
  text-decoration: none;
  display: none;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-documents {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link-documents:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-documents:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 530px) {
  .overflow-nav-link-documents {
    display: block;
  }
}

.overflow-nav-link-games {
  transition: color 0.3s ease;
  text-decoration: none;
  display: none;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-games {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link-games:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-games:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 580px) {
  .overflow-nav-link-games {
    display: block;
  }
}

.overflow-nav-link-music {
  transition: color 0.3s ease;
  text-decoration: none;
  display: none;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-music {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link-music:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-music:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  .overflow-nav-link-music {
    display: block;
  }
}

.overflow-nav-link-pictures {
  transition: color 0.3s ease;
  text-decoration: none;
  display: none;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-pictures {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link-pictures:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-pictures:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 710px) {
  .overflow-nav-link-pictures {
    display: block;
  }
}

.overflow-nav-link-videos {
  transition: color 0.3s ease;
  text-decoration: none;
  display: none;
  font-size: 12px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(51, 51, 51, 1.0);
  white-space: nowrap;
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-videos {
  color: rgba(255, 255, 255, 0.5);
}

.overflow-nav-link-videos:hover {
  color: rgba(0, 0, 0, 0.9);
  background-color: rgba(221, 221, 221, 1.0);
}

#theme-toggle:checked~.theme-wrapper .overflow-nav-link-videos:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 780px) {
  .overflow-nav-link-videos {
    display: block;
  }
}

.overflow-check:checked+.overflow-btn .overflow-menu {
  display: block;
}

.settings-container {
  position: relative;
  height: auto;
  width: auto;
  float: right;
}

.settings-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: auto;
}

.settings-menu-gear-icon {
  position: relative;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12.01 2.25c.74 0 1.47.1 2.18.25.32.07.55.33.59.65l.17 1.53a1.38 1.38 0 001.92 1.11l1.4-.61c.3-.13.64-.06.85.17a9.8 9.8 0 012.2 3.8c.1.3 0 .63-.26.82l-1.24.92a1.38 1.38 0 000 2.22l1.24.92c.26.19.36.52.27.82a9.8 9.8 0 01-2.2 3.8.75.75 0 01-.85.17l-1.4-.62a1.38 1.38 0 00-1.93 1.12l-.17 1.52a.75.75 0 01-.58.65 9.52 9.52 0 01-4.4 0 .75.75 0 01-.57-.65l-.17-1.52a1.38 1.38 0 00-1.93-1.11l-1.4.62a.75.75 0 01-.85-.18 9.8 9.8 0 01-2.2-3.8c-.1-.3 0-.63.27-.82l1.24-.92a1.38 1.38 0 000-2.22l-1.24-.92a.75.75 0 01-.28-.82 9.8 9.8 0 012.2-3.8c.23-.23.57-.3.86-.17l1.4.62c.4.17.86.15 1.25-.08.38-.22.63-.6.68-1.04l.17-1.53a.75.75 0 01.58-.65c.72-.16 1.45-.24 2.2-.25zm0 1.5c-.45 0-.9.04-1.35.12l-.11.97a2.89 2.89 0 01-4.02 2.33l-.9-.4A8.3 8.3 0 004.28 9.1l.8.59a2.88 2.88 0 010 4.64l-.8.59a8.3 8.3 0 001.35 2.32l.9-.4a2.88 2.88 0 014.02 2.32l.1.99c.9.15 1.8.15 2.7 0l.1-.99a2.88 2.88 0 014.02-2.32l.9.4a8.3 8.3 0 001.36-2.32l-.8-.59a2.88 2.88 0 010-4.64l.8-.59a8.3 8.3 0 00-1.35-2.32l-.9.4a2.88 2.88 0 01-4.02-2.32l-.11-.98c-.45-.08-.9-.11-1.34-.12zM12 8.25a3.75 3.75 0 110 7.5 3.75 3.75 0 010-7.5zm0 1.5a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.settings-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.check:checked+label+.settings-submenu {
  display: block;
}

.settings-checkbtn {
  cursor: pointer;
}

.settings-submenu {
  right: 0;
  position: absolute;
  display: none;
  min-width: auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(204, 204, 204, 1.0);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(204, 204, 204, 1.0);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(204, 204, 204, 1.0);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(204, 204, 204, 1.0);
  border-radius: 5px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  background: rgba(249, 249, 249, 1.0);
  z-index: 2;
}

#theme-toggle:checked~.theme-wrapper .settings-submenu {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

@media (max-width: 340px) {
  .settings-submenu {
    min-width: auto;
  }

}

.settings-submenu-header {
  margin-bottom: 15px;
  margin-left: 15px;
  margin-right: 15px;
}

.settings-submenu-title {
  font-size: 14px;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-weight: 600;
  color: rgba(0, 0, 0, 1.0);
  float: left;
}

#theme-toggle:checked~.theme-wrapper .settings-submenu-title {
  color: rgba(255, 255, 255, 1.0);
}

.settings-submenu-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.settings-submenu-column {
  display: inline-block;
  vertical-align: top;
  width: auto;
  font-size: 14px;
  box-sizing: border-box;
}

.settings-submenu-li {
  height: 32px;
  width: 143px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.settings-submenu-li:hover {
  background-color: rgba(0, 0, 0, 0.1)
}

#theme-toggle:checked~.theme-wrapper .settings-submenu-li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.subnav-container {
  position: relative;
  text-align: left;
  margin-left: 25px;
  display: inline-block;
}

.subnav-radio {
  display: none;
}

.subnav-check {
  display: none;
}

.subnav-toggle {
  font-size: 20px;
  color: rgba(255, 255, 255, 1.0);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.subnav-dropdown {
  display: none;
  position: absolute;
  background: rgba(255, 255, 255, 1.0);
  padding: 4px 0;
  z-index: 2;
  margin-top: 4px;
  border: 1px solid rgba(204, 204, 204, 1.0);
  border-radius: 5px;
  padding: 5px;
}

#theme-toggle:checked~.theme-wrapper .subnav-dropdown {
  background: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

.subnav-option {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 1.0);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 5px;
}

#theme-toggle:checked~.theme-wrapper .subnav-option {
  color: rgba(255, 255, 255, 1.0);
}

.subnav-option:hover {
  background-color: rgba(0, 0, 0, 0.1)
}

#theme-toggle:checked~.theme-wrapper .subnav-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.subnav-check:checked~.subnav-dropdown {
  display: block;
}

.subnav-header {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
}

.subnav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 3px;
}

.subnav-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.subnav-row {
  display: none;
}

#cloudflare:checked~.subnav-header .cloudflare,
#azure:checked~.subnav-header .azure,
#ws2025:checked~.subnav-header .ws2025,
#ws2022:checked~.subnav-header .ws2022,
#ws2019:checked~.subnav-header .ws2019,
#ws2016:checked~.subnav-header .ws2016,
#ws2012r2:checked~.subnav-header .ws2012r2,
#ws2012:checked~.subnav-header .ws2012,
#ws2008r2:checked~.subnav-header .ws2008r2,
#ws2008:checked~.subnav-header .ws2008 {
  display: inline;
}

.search-container {
  width: 50%;
  min-width: 360px;
  max-width: 760px;
  height: 46px;
  margin-top: 20vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  background-color: rgba(255, 255, 255, 1.0);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
  font-size: 0;
}

@media (max-width: 320px) {
  .search-container {
    width: 90%;
  }
}

#search-button {
  display: inline-block;
  vertical-align: middle;
  width: 46px;
  height: 46px;
  padding: 0px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-top-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 20px;
  font-size: 0;
}

.search-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 11px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2.75a7.25 7.25 0 015.63 11.82l4.9 4.9a.75.75 0 01-.98 1.13l-.08-.07-4.9-4.9A7.25 7.25 0 1110 2.75zm0 1.5a5.75 5.75 0 100 11.5 5.75 5.75 0 000-11.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.search-icon-light {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M10 2.75a7.25 7.25 0 015.63 11.82l4.9 4.9a.75.75 0 01-.98 1.13l-.08-.07-4.9-4.9A7.25 7.25 0 1110 2.75zm0 1.5a5.75 5.75 0 100 11.5 5.75 5.75 0 000-11.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  top: 6px;
  left: 30px;
  position: relative;
}

#search-input {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 46px - 50px);
  padding: 10px;
  border: none;
  outline: none;
  font-size: 16px;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #fff;
}

.copilot-icon {
  display: inline-block;
  vertical-align: middle;
  width: 46px;
  height: 46px;
  background-image: url('https://azure.ms-svr.net/assets/icons/copilot_color.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  border-top-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
  cursor: pointer;
}

.search-container>* {
  font-size: 16px;
}

.quick-links-container {
  text-align: center;
  font-size: 0;
}

.quick-link-item,
.quick-link-item-azure,
.quick-link-item-bing,
.quick-link-item-pswa,
.quick-link-item-rdwa,
.quick-link-item-rdwc,
.quick-link-item-rpc,
.quick-link-item-ssrs,
.quick-link-item-wac {
  display: inline-block;
  vertical-align: top;
  width: 47px;
  height: 73px;
  margin: 10px 10px 0 10px;
  text-align: center;
  text-decoration: none;
  color: rgba(51, 51, 51, 1.0);
  font-size: 12px;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (max-width: 50px) {
  .quick-link-item-azure {
    display: inline-block;
  }

}

@media (max-width: 50px) {
  .quick-link-item-bing {
    display: inline-block;
  }

}

@media (max-width: 50px) {
  .quick-link-item-pswa {
    display: inline-block;
  }

}

@media (max-width: 50px) {
  .quick-link-item-rdwa {
    display: inline-block;
  }

}

@media (max-width: 950px) {
  .quick-link-item-rdwc {
    display: none;
  }

}

@media (max-width: 1050px) {
  .quick-link-item-rpc {
    display: none;
  }

}

@media (max-width: 1150px) {
  .quick-link-item-rpc {
    display: none;
  }

}

@media (max-width: 1250px) {
  .quick-link-item-ssrs {
    display: none;
  }

}

@media (max-width: 1350px) {
  .quick-link-item-wac {
    display: none;
  }

}

#theme-toggle:checked~.theme-wrapper .quick-link-item,
#theme-toggle:checked~.theme-wrapper .quick-link-item-azure,
#theme-toggle:checked~.theme-wrapper .quick-link-item-bing,
#theme-toggle:checked~.theme-wrapper .quick-link-item-pswa,
#theme-toggle:checked~.theme-wrapper .quick-link-item-rdwa,
#theme-toggle:checked~.theme-wrapper .quick-link-item-rdwc,
#theme-toggle:checked~.theme-wrapper .quick-link-item-rpc,
#theme-toggle:checked~.theme-wrapper .quick-link-item-ssrs,
#theme-toggle:checked~.theme-wrapper .quick-link-item-wac {
  color: rgba(255, 255, 255, 1.0);
}

.quick-links-image-container {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 1.0);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
}

.quick-links-image-container div,
.quick-links-image-container img {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
}

.quick-links-text-container {
  margin-top: 5px;
}

.azure-logo,
.bing-logo,
.pswa-icon,
.rdwa-icon,
.rdwc-icon,
.rpc-icon,
.ssrs-icon,
.wac-icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.azure-logo {
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20id%3D%22uuid-eb2d266b-f73d-4567-bfc0-6a3aa719f7d6%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22512%22%20height%3D%22512%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20512%20512%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22uuid-d8b368bf-8298-4a61-b61b-0a8d3d9aee0c%22%20x1%3D%22235.036%22%20y1%3D%22449.947%22%20x2%3D%22125.013%22%20y2%3D%22124.912%22%20gradientTransform%3D%22translate%280%20562%29%20scale%281%20-1%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23114a8b%22/%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230669bc%22/%3E%20%3C/linearGradient%3E%20%3ClinearGradient%20id%3D%22uuid-4e734ef6-9b94-4f5e-b60f-082f47ab3a02%22%20x1%3D%22268.961%22%20y1%3D%22298.566%22%20x2%3D%22243.538%22%20y2%3D%22289.97%22%20gradientTransform%3D%22translate%280%20562%29%20scale%281%20-1%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.3%22/%3E%20%3Cstop%20offset%3D%22.071%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.2%22/%3E%20%3Cstop%20offset%3D%22.321%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.1%22/%3E%20%3Cstop%20offset%3D%22.623%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.05%22/%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220%22/%3E%20%3C/linearGradient%3E%20%3ClinearGradient%20id%3D%22uuid-a4e850ca-d3b2-4f24-9c2d-49b87b05e8cc%22%20x1%3D%22255.002%22%20y1%3D%22459.46%22%20x2%3D%22375.771%22%20y2%3D%22137.696%22%20gradientTransform%3D%22translate%280%20562%29%20scale%281%20-1%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233ccbf4%22/%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232892df%22/%3E%20%3C/linearGradient%3E%20%3C/defs%3E%20%3Cg%20id%3D%22uuid-69d3307e-bfc5-4884-9932-998319df5755%22%20data-name%3D%22Layer%201%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22m102.4%2C0h307.2c56.32%2C0%2C102.4%2C46.08%2C102.4%2C102.4v307.2c0%2C56.32-46.08%2C102.4-102.4%2C102.4H102.4c-56.32%2C0-102.4-46.08-102.4-102.4V102.4C0%2C46.08%2C46.08%2C0%2C102.4%2C0Z%22%20fill%3D%22%23fff%22%20stroke-width%3D%220%22/%3E%20%3Cg%3E%20%3Cpath%20d%3D%22m180.476%2C98.794c2.593-7.131%2C9.076-11.669%2C15.559-11.669h106.317l-110.206%2C326.081c-2.593%2C7.131-9.076%2C11.669-15.559%2C11.669h-82.979c-11.669%2C0-20.096-11.669-15.559-22.041L180.476%2C98.794Z%22%20fill%3D%22url%28%23uuid-d8b368bf-8298-4a61-b61b-0a8d3d9aee0c%29%22%20stroke-width%3D%220%22/%3E%20%3Cpath%20d%3D%22m349.675%2C306.241h-167.254c-7.131%2C0-10.372%2C8.428-5.186%2C13.614l107.613%2C99.834c3.241%2C2.593%2C7.131%2C4.538%2C11.669%2C4.538h94.648l-41.49-117.986Z%22%20fill%3D%22%230078d4%22%20stroke-width%3D%220%22/%3E%20%3Cpath%20d%3D%22m196.035%2C87.125c-7.131%2C0-13.614%2C4.538-15.559%2C11.669l-102.427%2C303.392c-3.89%2C11.021%2C4.538%2C22.041%2C15.559%2C22.041h82.979c7.131%2C0%2C13.614-4.538%2C15.559-11.669l20.096-60.289%2C71.958%2C67.42c3.241%2C2.593%2C7.131%2C4.538%2C11.669%2C4.538h94.648l-40.193-117.986h-121.875l73.903-219.116s-106.317%2C0-106.317%2C0Z%22%20fill%3D%22url%28%23uuid-4e734ef6-9b94-4f5e-b60f-082f47ab3a02%29%22%20stroke-width%3D%220%22/%3E%20%3Cpath%20d%3D%22m330.875%2C98.794c-2.593-7.131-9.076-11.669-15.559-11.669h-118.634.648c7.131%2C0%2C13.614%2C4.538%2C15.559%2C11.669l102.427%2C303.392c3.89%2C11.021-4.538%2C22.041-15.559%2C22.041h-1.297%2C119.93c11.669%2C0%2C20.096-11.669%2C15.559-22.041l-103.075-303.392Z%22%20fill%3D%22url%28%23uuid-a4e850ca-d3b2-4f24-9c2d-49b87b05e8cc%29%22%20stroke-width%3D%220%22/%3E%20%3C/g%3E%20%3C/g%3E%20%3C/g%3E%20%3C/svg%3E");
}

.bing-logo {
  background-image: url("https://azure.ms-svr.net/assets/icons/bing-logo-180.png");
}

.pswa-icon {
  background-image: url("https://azure.ms-svr.net/assets/icons/powershell_web_access.png");
}

.rdwa-icon {
  background-image: url("https://azure.ms-svr.net/assets/icons/remote_desktop_web_access.png");
}

.rdwc-icon {
  background-image: url("https://azure.ms-svr.net/assets/icons/remote_desktop_webclient.png");
}

.rpc-icon {
  background-image: url("https://azure.ms-svr.net/assets/icons/remote_procedure_call.png");
}

.ssrs-icon {
  background-image: url("https://azure.ms-svr.net/assets/icons/SQL-Server-Reporting-Services.png");
}

.wac-icon {
  background-image: url("https://azure.ms-svr.net/assets/icons/WindowsAdminCenter.png");
}

.quick-links-menu-container {
  position: relative;
  height: auto;
  width: auto;
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
  background-color: rgba(255, 255, 255, 1.0);
  border-radius: 10px;
}

.quick-links-menu-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: auto;
}

.quick-links-menu-plus-icon {
  position: relative;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='grey' d='M11 5h2v14h-2V5zm-6 6h14v2H5v-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.quick-links-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.check:checked+label+.quick-links-submenu {
  display: block;
}

.quick-links-menu-checkbtn {
  cursor: pointer;
}

.quick-links-submenu {
  right: 0;
  position: absolute;
  display: none;
  min-width: 231px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(204, 204, 204, 1.0);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(204, 204, 204, 1.0);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(204, 204, 204, 1.0);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(204, 204, 204, 1.0);
  border-radius: 5px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  background: rgba(249, 249, 249, 1.0);
  z-index: 2;
}

#theme-toggle:checked~.theme-wrapper .quick-links-submenu {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

@media (max-width: 340px) {
  .quick-links-submenu {
    min-width: auto;
  }

}

.quick-links-submenu-header {
  margin-bottom: 15px;
  margin-left: 15px;
  margin-right: 15px;
}

.quick-links-submenu-title {
  font-size: 14px;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-weight: 600;
  color: rgba(0, 0, 0, 1.0);
  float: left;
}

#theme-toggle:checked~.theme-wrapper .quick-links-submenu-title {
  color: rgba(255, 255, 255, 1.0);
}

.quick-links-submenu-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-links-submenu-column {
  display: inline-block;
  vertical-align: top;
  width: auto;
  font-size: 14px;
  box-sizing: border-box;
}

.quick-links-submenu-li {
  height: 38px;
  width: 143px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.quick-links-submenu-li:hover {
  background-color: rgba(0, 0, 0, 0.1)
}

#theme-toggle:checked~.theme-wrapper .quick-links-submenu-li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.quick-link-submenu-item,
.quick-link-submenu-item-azure,
.quick-link-submenu-item-bing,
.quick-link-submenu-item-pswa,
.quick-link-submenu-item-rdwa,
.quick-link-submenu-item-rdwc,
.quick-link-submenu-item-rpc,
.quick-link-submenu-item-ssrs,
.quick-link-submenu-item-wac {
  display: none;
  float: left;
  vertical-align: top;
  width: 47px;
  height: 73px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-left: 10px;
  text-align: center;
  text-decoration: none;
  color: rgba(51, 51, 51, 1.0);
  font-size: 12px;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


@media (max-width: 50px) {
  .quick-link-submenu-item-azure {
    display: none;
  }

}

@media (max-width: 50px) {
  .quick-link-submenu-item-bing {
    display: none;
  }

}

@media (max-width: 50px) {
  .quick-link-submenu-item-pswa {
    display: none
  }

}

@media (max-width: 50px) {
  .quick-link-submenu-item-rdwa {
    display: inline-block;
  }

}

@media (max-width: 950px) {
  .quick-link-submenu-item-rdwc {
    display: inline-block;
  }

}

@media (max-width: 1050px) {
  .quick-link-submenu-item-rpc {
    display: inline-block;
  }

}

@media (max-width: 1150px) {
  .quick-link-submenu-item-rpc {
    display: inline-block;
  }

}

@media (max-width: 1250px) {
  .quick-link-submenu-item-ssrs {
    display: inline-block;
  }

}

@media (max-width: 1350px) {
  .quick-link-submenu-item-wac {
    display: inline-block;
  }

}

#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-azure,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-bing,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-pswa,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-rdwc,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-rpc,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-ssrs,
#theme-toggle:checked~.theme-wrapper .quick-link-submenu-item-wac {
  color: rgba(255, 255, 255, 1.0);
}

.system-select-container {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
  margin-right: 15px;
  height: auto;
  width: 100%;
  z-index: 10;
}

.system-select-nav-btn {
  width: auto;
  height: 40px;
  border-radius: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-right: 10px;
  padding-left: 10px;
}

.system-select-menu-grid-icon {
  position: relative;
  display: inline-block;
  top: 7px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='8' x2='20' y2='8' stroke='white' stroke-width='2'/%3E%3Cline x1='4' y1='16' x2='20' y2='16' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.system-select-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.check:checked+label+.system-select-submenu {
  display: block;
}

.system-select-checkbtn {
  float: right;
  cursor: pointer;
}

.system-select-menu-text {
  padding-right: 10px;
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-weight: 500;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .system-select-menu-text {
  color: rgba(255, 255, 255, 1.0);
}

.system-select-submenu {
  bottom: 100%;
  right: 0;
  position: absolute;
  display: none;
  width: auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(204, 204, 204, 1.0);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(204, 204, 204, 1.0);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(204, 204, 204, 1.0);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(204, 204, 204, 1.0);
  border-radius: 5px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  background: rgba(249, 249, 249, 1.0);
  z-index: 2;
}

#theme-toggle:checked~.theme-wrapper .system-select-submenu {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

@media (max-width: 340px) {
  .system-select-submenu {
    min-width: auto;
  }

}

.system-select-submenu-header {
  margin-bottom: 15px;
  margin-left: 15px;
  margin-right: 15px;
}

.system-select-submenu-title {
  font-size: 14px;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-weight: 600;
  color: rgba(0, 0, 0, 1.0);
  float: left;
}

#theme-toggle:checked~.theme-wrapper .system-select-submenu-title {
  color: rgba(255, 255, 255, 1.0);
}

.system-select-submenu-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.system-select-submenu-column {
  display: inline-block;
  vertical-align: top;
  width: auto;
  font-size: 14px;
  box-sizing: border-box;
}

.system-select-submenu-li {
  height: 38px;
  width: auto;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.system-select-submenu-li:hover {
  background-color: rgba(0, 0, 0, 0.1)
}

#theme-toggle:checked~.theme-wrapper .system-select-submenu-li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.system-select-submenu-link {
  display: block;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 38px;
  text-decoration: none;
  color: rgba(0, 0, 0, 1.0);
}

#theme-toggle:checked~.theme-wrapper .system-select-submenu-link {
  color: rgba(255, 255, 255, 1.0);
}

.main-root-theme-wrapper {
  color: #fff;
  font-family: 'aptos-light', 'calibri', sans-serif;
}

.main-root-container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.main-container {
  overflow: hidden;
  width: 100%;
}


.main-content {
  display: block;
  float: left;
  width: calc(70% - 2px);
  margin-bottom: 55px;
}

.main-sidebar {
  display: block;
  float: right;
  width: calc(30% - 2px);
  margin-bottom: 55px;
}

.main-sidebar-announcement-root-container {
  overflow: hidden;
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  margin-bottom: 10px;
}

#theme-toggle:checked~.theme-wrapper .main-sidebar-announcement-root-container {
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}

.main-sidebar-announcement-info-container {
  padding: 10px;
}

#theme-toggle:checked~.theme-wrapper .main-announcement-info-container {}

.announcement-title {
  font-weight: bold;
  font-size: 18px;
  color: #0078d4;
  margin-bottom: 5px;
}

#theme-toggle:checked~.theme-wrapper .announcement-title {
  color: #b1c9dd;
}

.announcement-desc {
  margin-top: 8px;
  color: #545454;
  font-size: 14px;
}

#theme-toggle:checked~.theme-wrapper .announcement-desc {
  color: #ccc;
}

.main-default-root-container {
  overflow: hidden;
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  margin-bottom: 10px;
}

#theme-toggle:checked~.theme-wrapper .main-default-root-container {
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}

.main-sidebar-default-root-container {
  overflow: hidden;
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  margin-bottom: 10px;
}

#theme-toggle:checked~.theme-wrapper .main-sidebar-default-root-container {
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}

.main-default-info-container {
  padding: 10px;
}

.main-sidebar-default-info-container {
  padding: 10px;
}

#theme-toggle:checked~.theme-wrapper .main-default-info-container {}

.default-title {
  font-weight: bold;
  font-size: 18px;
  color: #0078d4;
  margin-bottom: 5px;
}

#theme-toggle:checked~.theme-wrapper .default-title {
  color: #b1c9dd;
}

.default-desc {
  margin-top: 8px;
  color: #545454;
  font-size: 14px;
}

.default-summary {
  margin-top: 8px;
  color: #ccc;
  font-size: 16px;
  padding-bottom: 16px;
}

.default-summary a {
  color: #b1c9dd;
}

.default-summary a:hover {
  color: #b0c8dc;
}

#theme-toggle:checked~.theme-wrapper .default-desc {
  color: #ccc;
}

.main-hero-banner-root-container {
  overflow: hidden;
  background-color: rgba(221, 221, 221, 0.8);
  border-color: rgba(204, 204, 204, 1.0);
  max-height: 217px;
  margin-bottom: 10px;
}

#theme-toggle:checked~.theme-wrapper .main-hero-banner-root-container {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
}

.main-hero-banner-img-container {
  float: left;
  width: 160px;
  height: 215px;
  background: #ccc;
}

#theme-toggle:checked~.theme-wrapper .main-hero-banner-img-container {
  background-color: #444;
}

.main-hero-banner-img-container img {
  display: block;
  width: 160px;
  height: 215px;
}

.main-hero-banner-info-container {
  margin-left: 165px;
  padding: 10px;
}

.video-name {
  font-weight: bold;
  font-size: 18px;
  color: #b1c9dd;
  margin-bottom: 5px;
  max-height: 24px;
  overflow: hidden;
}

.video-name a {
  color: #b1c9dd;
}

.video-name a:hover {
  color: #79a3c3;
}

.video-subtitle {
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #868686;
  margin-bottom: .3rem;
}

.video-info {
  margin-top: .5rem;
  color: #868686;
  width: 100%;
  padding: .1rem 0;
  font-size: .85rem;
  display: inline-block;
  align-items: center;
}

.video-rating {
  border-color: #868686;
  background-color: #868686;
  font-size: .8rem;
  min-width: 1.4rem;
  font-weight: 500;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  align-items: center;
  padding: 0 .3rem;
  border-radius: .1rem;
  transition: color .2s, border .2s, background .2s, transform .2s, opacity .2s;
  color: #191919;
  justify-content: center;
}

.video-type {
  display: inline-block;
  padding: 0 .3rem;
}

.raw-sub-dub-total {
  display: inline-block;
  align-items: center;
  color: #cecece;
  font-weight: 500;
  justify-content: center;
}

.raw,
.dub,
.sub {
  margin: 0 .1rem;
  display: inline-block;
  align-items: center;
  font-size: .8rem;
  padding: .4rem;
  background: #494949;
}

.raw::before {
  content: "";
  display: inline-block;
  position: relative;
  top: .2em;
  height: .8rem;
  width: .8rem;
  margin-right: .2rem;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23FFFFFF' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' stroke='%23FFFFFF'%3E%3Cpolygon points='29.2 9 28.86 17 28.6 21.54 28.19 18 27.51 12.54 25.49 12.54 24.81 18 24.4 21.54 24.14 17 23.8 9 22 9 23 23 25.27 23 26.03 18.07 26.49 14 26.5 13.97 26.51 14 26.97 18.07 27.73 23 30 23 31 9 29.2 9'/%3E%3Cpath d='M18,9H14a2,2,0,0,0-2,2V23h2V18h4v5h2V11A2,2,0,0,0,18,9Zm-4,7V11h4v5Z'/%3E%3Cpath d='M10,15V11A2,2,0,0,0,8,9H2V23H4V17H5.48l2.34,6H10L7.63,17H8A2,2,0,0,0,10,15ZM4,11H8v4H4Z'/%3E%3C/svg%3E");
}

.dub::before {
  content: "";
  display: inline-block;
  position: relative;
  top: .2em;
  height: .8rem;
  width: .8rem;
  margin-right: .2rem;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23FFFFFF' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg' stroke='%23FFFFFF'%3E%3Cpath d='M425.818 709.983V943.41c0 293.551 238.946 532.497 532.497 532.497 293.55 0 532.496-238.946 532.496-532.497V709.983h96.818V943.41c0 330.707-256.438 602.668-580.9 627.471l-.006 252.301h242.044V1920H667.862v-96.818h242.043l-.004-252.3C585.438 1546.077 329 1274.116 329 943.41V709.983h96.818ZM958.315 0c240.204 0 435.679 195.475 435.679 435.68v484.087c0 240.205-195.475 435.68-435.68 435.68-240.204 0-435.679-195.475-435.679-435.68V435.68C522.635 195.475 718.11 0 958.315 0Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.sub::before {
  content: "";
  display: inline-block;
  position: relative;
  top: .2em;
  height: .8rem;
  width: .8rem;
  margin-right: .2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 512 512' stroke='%23FFFFFF'%3E%3Cpath d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM208.1 287.7c2.8-2.5 7.1-2.1 9.2.9l19.5 27.7c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.8-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7l-17.5 30.5c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2.1 48 51.1 70.5 92.3 32.6zm210.4 0c2.8-2.5 7.1-2.1 9.2.9l19.5 27.7c1.7 2.4 1.5 5.6-.5 7.7-53.5 56.9-172.7 32.1-172.7-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7L430 222.2c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6z'/%3E%3C/svg%3E");
}

.total {
  margin: 0 .1rem;
  display: inline-block;
  align-items: center;
  font-size: .8rem;
  padding: .4rem;
  background: #3a3a3a;
}

#theme-toggle:checked~.theme-wrapper .video-name {
  color: #b1c9dd;
}

.rating-score {
  color: #ababab;
  margin-right: 10px;
}

.type {
  color: #ababab;
  margin-right: 10px;
}

.release-date {
  color: #ababab;
  margin-right: 10px;
}

.rating-status {
  border-color: #ababab;
  height: 1.4rem;
  font-size: .7rem 10.15px;
  font-weight: 400;
  border-style: solid;
  border-width: 1px;
  display: inline-flex;
  align-items: center;
  padding: 0 .3rem;
  border-radius: .1rem;
  transition: color .2s, border .2s, background .2s, transform .2s, opacity .2s;
  color: #ababab;
  justify-content: center;
  margin-right: 10px;
}

.quality-status {
  border-color: #ababab;
  background: #ababab;
  height: 1.4rem;
  font-size: .8rem;
  min-width: 1.4rem;
  font-weight: 500;
  border-style: solid;
  border-width: 1px;
  display: inline-flex;
  align-items: center;
  padding: 0 .3rem;
  border-radius: .1rem;
  transition: color .2s, border .2s, background .2s, transform .2s, opacity .2s;
  justify-content: center;
  margin-right: 10px;
}

.video-detail {
  max-height: 49.6px;
  overflow: hidden;
}

.video-desc {
  font-size: .95rem;
  color: #ababab;
  line-height: 1.2rem;
  max-height: 57.6px;
  overflow: hidden;
  margin: .8rem 0;
}

.video-meta {
  color: #ababab;
  font-size: .85rem;
  margin: .8rem 0;
}

.meta-value {
  color: #ececec;
}

.sub-dub-total span {
  display: inline-block;
  margin-right: 5px;
  font-size: 11px;
  color: #545454;
}

.actions {
  margin-top: 10px;
}

.content-actions {
  margin: 16px;
  float: right;
}

.btn-primary {
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  height: 36px;
  background: rgba(149, 182, 208, 1.0);
  border-color: rgba(149, 182, 208, 1.0);
  color: #202020;
  text-decoration: none;
  border: none;
  border-radius: 2px;
}

.genres {
  color: #ececec;
}

.genres a {
  color: #b1c9dd;
}

.genres a:hover {
  color: #79a3c3;
}

.btn-primary:hover {
  color: #202020;
  background-color: #b0c8dc;
  border-color: #b8cee0;
}

.btn-secondary1 {
  display: inline-block;
  border-radius: 2px;
  padding-left: 10px;
  padding-right: 15px;
  height: 36px;
  background: #555;
  color: #fff;
  border: none;
  margin-left: 10px;
}

.btn-secondary1:hover {
  color: #fff;
  background-color: #5f5f5f;
  border-color: #656565;
}

.featured-carousel-root-container {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

#theme-toggle:checked~.theme-wrapper .featured-carousel-root-container {
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  background-color: #191919;
}

.carousel-title {
  font-size: 18px;
  color: #0078d4;
  margin-bottom: 10px;
}

#theme-toggle:checked~.theme-wrapper .carousel-title {
  color: #b1c9dd;
}

.tab-container-title {
  font-size: 18px;
  color: #0078d4;
  margin-left: 10px;
  display: inline-block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  width: calc(100% - 227px);
}

#theme-toggle:checked~.theme-wrapper .tab-container-title {
  color: #b1c9dd;
}

.new-container-title {
  font-size: 18px;
  color: #0078d4;
  margin-left: 10px;
  padding-top: 5px;
  padding-bottom: 15px;
  display: inline-block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  width: 120px;
  margin-right: calc(100% - 346.39px);
}

#theme-toggle:checked~.theme-wrapper .new-container-title {
  color: #b1c9dd;
}

.featured-carousel-scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5px;
  overflow-y: hidden;
}

.carousel-item {
  display: inline-block;
  width: 130px;
  margin-right: 10px;
  vertical-align: top;
  white-space: normal;
}

.carousel-item:hover {
  z-index: 10;
  box-shadow: rgba(0, 0, 0, .1) 0 4px 12px;
  transform: scale(0.98);
}

.carousel-item-link {
  text-decoration: none;
}

.carousel-item-img-container {
  position: relative;
  width: 130px;
  height: 175px;
  background: #ccc;
  overflow: hidden;
}

#theme-toggle:checked~.theme-wrapper .carousel-item-img-container {
  background: #444;
}

.carousel-item-img-container img {
  width: 130px;
  height: 175px;
  object-fit: cover;
  display: block;
}

.carousel-item-info {
  text-align: center;
  margin-top: 5px;
  color: #ababab;
  font-size: 12px;
}

.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: white;
  padding: 12px 16px;
  border-radius: 50%;
  display: none;
  pointer-events: none;
}

.carousel-item:hover .play-button-overlay {
  display: block;
}

#theme-toggle:checked~.theme-wrapper .carousel-item-info {
  background-color: #191919;
}

.episode-title {
  font-size: 13px;
  color: #0078d4;
}

#theme-toggle:checked~.theme-wrapper .episode-title {
  color: #b1c9dd;
}

.episode-number {
  font-size: 11px;
  color: #888;
}

.featured-carousel-scroll-container::-webkit-scrollbar {
  height: 8px;
  background-color: #2a2a2a;
}

.featured-carousel-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(149, 182, 208, 1.0);
  border-radius: 4px;
  border: 1px solid #202020;
}

.featured-carousel-scroll-container::-webkit-scrollbar-track {
  background-color: #444;
}

.featured-carousel-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #95b6d0 #444;
}

.content-root-container {
  padding-top: 10px;
  padding-left: 10px;
  border-top: 1px solid #444;
  color: #b1c9dd;
}

#theme-toggle:checked~.theme-wrapper .content-root-container {
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  background-color: #191919;
}

.content-title {
  font-size: 18px;
  color: #b1c9dd;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-bottom: 10px;
}

.content-list {
  background-color: rgba(50, 50, 50, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
  zoom: 1;
}

.content-info {
  height: 80px;
  padding: 5px;
  margin-left: 60px;
  font-size: 13px;
  color: #ababab;
}

.main-content-info {
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
  color: #ababab;
}

.content-title-text {
  font-size: 14px;
  color: #b1c9dd;
  margin-bottom: 4px;
}

.content-details {
  text-align: left;
  font-size: 12px;
  color: #888;
}

.main-footer-root {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(204, 204, 204, 1.0);
  border-top: 1px solid #777;
  color: #ababab;
  font-family: 'aptos-light', 'calibri', sans-serif;
  font-size: 12px;
  padding: 20px 15px;
}

#theme-toggle:checked~.theme-wrapper .main-footer-root {
  background-color: #1c1c1c;
  border-top: 1px solid #444;
}


.main-footer-container {
  margin: 0 auto;
  background-color: rgba(204, 204, 204, 1.0);
}

#theme-toggle:checked~.theme-wrapper .main-footer-container {
  background-color: #1c1c1c;
}

.main-footer-links {
  margin-bottom: 10px;
}

.main-footer-links a {
  display: inline-block;
  margin-right: 15px;
  color: #0078d4;
  text-decoration: none;
}

.main-footer-links a:hover {
  text-decoration: underline;
  color: #004578;
}

#theme-toggle:checked~.theme-wrapper .main-footer-links a {
  color: rgba(149, 182, 208, 1.0);
}

#theme-toggle:checked~.theme-wrapper .main-footer-links a:hover {
  color: #b0c8dc;
}

.main-footer-disclaimer {
  margin-bottom: 10px;
  color: #444;
  line-height: 1.4;
}

#theme-toggle:checked~.theme-wrapper .main-footer-disclaimer {
  color: #888;
}

.main-footer-copy {
  color: #333;
}

#theme-toggle:checked~.theme-wrapper .main-footer-copy {
  color: #666;
}

.tab-container {
  width: 100%;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  font-family: 'aptos-light', 'calibri', sans-serif;
}

.new-container {
  width: 100%;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  font-family: 'aptos-light', 'calibri', sans-serif;
}

input[type="radio"] {
  display: none;
}

.tab-label {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
  width: auto;
  background: #333;
  color: rgba(149, 182, 208, 1.0);
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
  position: relative;
}

#theme-toggle:checked~.theme-wrapper .tab-label {
  color: rgba(149, 182, 208, 1.0);
  background-color: #202020;
}

.tab-label:hover {
  background: #555;
}

#theme-toggle:checked~.theme-wrapper .tab-label:hover {
  color: #fff;
  background-color: #3a3a3a;
}

input[type="radio"]:checked+.tab-label {
  background: #4c4c4c;
  color: #fff;
  border-color: #989898;
}

#theme-toggle:checked~.theme-wrapper input[type="radio"]:checked+.tab-label {
  background: #4c4c4c;
  color: #fff;
  border-color: #989898;
}

.tab-content {
  display: none;
  background: #222;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  color: white;
  max-height: 960px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #95b6d0 #444;
}

#theme-toggle:checked~.theme-wrapper .tab-content {
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  background-color: #191919;
}

.main-tab-content {
  display: none;
  background: #222;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  color: white;
  scrollbar-color: #95b6d0 #444;
}

.new-content {
  display: block;
  background: #191919;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  color: white;
  scrollbar-color: #95b6d0 #444;
}

#theme-toggle:checked~.theme-wrapper .main-tab-content {
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  background-color: #191919;
}

#tab-all:checked~.content #content-all,
#tab-new:checked~.content #content-new,
#tab-trending:checked~.content #content-trending,
#tab-raw:checked~.content #content-raw,
#tab-sub:checked~.content #content-sub,
#tab-dub:checked~.content #content-dub,
#tab-site:checked~.content #content-site,
#tab-series:checked~.content #content-series,
#tab-episode:checked~.content #content-episode {
  display: block;
}

.content-item {
  display: block;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.content-item:hover {
  background-color: #3a3a3a;
}

.content-item-light {
  display: block;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  background-color: #202020;
}

.content-item-light:hover {
  background-color: #3a3a3a;
}

.content-img-container {
  float: left;
  width: 60px;
  height: 80px;
  background: #444;
  overflow: hidden;
}

.content-img-container img {
  width: 100px;
  height: 135px;
  object-fit: cover;
  margin-right: 10px;
}

.main-content-item {
  width: 16.3%;
  padding: 0 .25rem;
  margin-bottom: .5rem;
  text-align: center;
  display: inline-block;
  background: rgb(32, 32, 32);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.main-content-img-container {
  width: 100%;
  background: #444;
  overflow: hidden;
  margin: 0 auto;
  object-fit: cover;
  display: block;
}

.content-title-text {
  font-size: 16px;
}

.content-date {
  font-size: 14px;
  color: #ccc;
}





.main-content-item {
  width: 16.3%;
  padding: 0 .25rem;
  margin-bottom: .5rem;
  text-align: center;
  display: inline-block;
  background: rgb(32, 32, 32);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.main-content-img-container {
  width: 100%;
  background: #444;
  overflow: hidden;
  margin: 0 auto;
}

.main-content-img-container img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.main-content-info {
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
  color: #ababab;
  height: 60px;
}

.content-title-text {
  font-size: 14px;
  color: #b1c9dd;
  margin-bottom: 4px;
}

.content-date {
  font-size: 12px;
  color: #888;
}

.main-content-item {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-content-item:hover {
  z-index: 10;
  box-shadow: rgba(0, 0, 0, .1) 0 4px 12px;
  transform: scale(0.98);
}

.main-content-img-container {
  position: relative;
  overflow: hidden;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: white;
  padding: 0.5rem 0.8rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.main-content-item:hover .play-button {
  opacity: 1;
}

.hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
}

.menu-toggle {
  display: none;
}

.main-content-item .popout-menu {
  position: absolute;
  top: 50px;
  left: 100%;
  color: #ddd;
  padding: 10px;
  font-size: 13px;
  text-align: left;
  display: none;
  z-index: 20;
  background-color: #2d2d2d;
  border: 1px solid #4c4c4c;
  border-radius: .2rem;
  width: 20rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
}

.watch-now {
  height: 2.6rem;
  padding-bottom: 5px;
  width: 83.47999%;
  color: #202020;
  background-color: rgba(149, 182, 208, 1.0);
  border-color: rgba(149, 182, 208, 1.0);
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  line-height: 24px;
}

.watch-now:hover {
  color: #202020;
  background-color: #b0c8dc;
  border-color: #b8cee0;
}

.watch-now-icon {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM10.6935 15.8458L15.4137 13.059C16.1954 12.5974 16.1954 11.4026 15.4137 10.941L10.6935 8.15419C9.93371 7.70561 9 8.28947 9 9.21316V14.7868C9 15.7105 9.93371 16.2944 10.6935 15.8458Z' fill='currentColor'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  color: black;
  position: relative;
  top: 6px;
  left: -5px;
}

.bookmark-btn {
  margin-left: 5px;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: #fff;
  background-color: #4c4c4c;
  border-color: #4c4c4c;
  display: inline-block;
}

.bookmark-btn:hover {
  color: #fff;
  background-color: #5f5f5f;
  border-color: #656565;
}

.bookmark-icon {
  top: 7px;
  left: 8px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' clip-rule='evenodd' d='M14 0H2V16H4L8 12L12 16H14V0ZM7 3V5H5V7H7V9H9V7H11V5H9V3H7Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  color: black;
  position: relative;
}

.play-btn {
  margin-left: 5px;
  width: 24px;
  height: 24px;
  color: #fff;
  background-color: #4c4c4c;
  border-color: #4c4c4c;
  display: inline-block;
  border-radius: 2px;
}

.play-btn:hover {
  color: #fff;
  background-color: #5f5f5f;
  border-color: #656565;
}

.play-icon {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  color: black;
  position: relative;
}

.main-content-item:hover .popout-menu,
.main-content-item .menu-toggle:checked~.popout-menu {
  display: block;
}

@media (max-width: 1200px) {
  .main-content-item:nth-child(n+5) .popout-menu {
    left: auto;
    right: 100%;
  }
}

iframe.sync-video {
  width: 100%;
  min-height: 660px;
  border-width: 0px;
}

iframe.chat {
  width: 100%;
  height: auto;
  min-height: 670px;
  overflow: hidden;
  border-width: 0px;
  display: block;
}

iframe.search {
  width: auto;
  height: auto;
  border-width: 0px;
  display: inline-block;
  width: 360px;
  z-index: 10;
}

#results {
  z-index: 10;
  width: calc(100% - 70px);
  left: 24px;
}

video {
  width: 100%;
  height: auto;
  max-height: 660px;
  display: block;
}

.main-default-video-container {
  overflow: hidden;
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}

#theme-toggle:checked~.theme-wrapper .main-default-video-container {
  background-color: #191919;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}

.body-video-container {
  width: 100%;
  height: auto;
  display: block;
}

.dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  display: none;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#toggleResults:checked~.dropdown {
  display: block;
}

.search {
  position: relative;
  display: inline-block;
  width: calc(100% - 750px);
}

/* Dropdown results styling */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  color: #b1c9dd;
  background-color: #191919;
  border: 1px solid #444;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #95b6d0 #444;
}

.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown li {
  padding: 6px 10px;
  border-bottom: 1px solid #444;
}

.dropdown li a {
  text-decoration: none;
  color: #b1c9dd;
}

.dropdown li a:hover {
  text-decoration: none;
  color: #79a3c3;
}

.dropdown li:last-child {
  border-bottom: none;
}

.dropdown li:hover {
  background-color: #333;
}


#chatBox {
  background-color: rgba(25, 25, 25, 1.0);
  border: 1px solid rgba(25, 25, 25, 1.0);
  padding: 15px;
  border-radius: 8px;
  max-width: 600px;
  margin: auto;
}

#commentsList {
  height: 434px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  scrollbar-width: thin;
  scrollbar-color: #95b6d0 #444;
}

.message {
  margin-top: 10px;
  margin-right: 5px;
  margin-left: 0px;
  display: flex;
  flex-direction: column;
}

.message .name {
  font-weight: bold;
  color: #b7b9c3;
}

.message .text {
  background: #313338;
  padding: 10px;
  margin-top: 2px;
  word-wrap: break-word;
  color: #dcddde;
}

.message .time {
  font-size: 0.75em;
  color: #8e9297;
  margin-top: 3px;
}

#commentForm {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.message {
  color: #fff;
}

.display-name {
  color: #fff;
}

.commentForm-submit {
  background: rgba(149, 182, 208, 1.0);
  border-color: rgba(149, 182, 208, 1.0);
  color: #202020;
}

.send-icon {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%3E%20%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%3E%3C/path%3E%20%3Cpath%20d%3D%22M1.946%209.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454%2019.086c-.15.529-.455.547-.679.045L12%2014l6-8-8%206-8.054-2.685z%22%3E%3C/path%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
}

.commentForm-submit:hover {
  color: #202020;
  background-color: #b0c8dc;
  border-color: #b8cee0;
  cursor: pointer;
}

input,
textarea {
  background-color: rgba(255, 255, 255, 1.0);
  border: 1px solid rgba(0, 0, 0, 1.0);
  color: rgba(0, 0, 0, 1.0);
  padding: 8px;
  border-radius: 4px;
  margin-top: 5px;
}

.filter-btn {
  right: 52px;
  margin-top: 10px;
  height: 22px;
  align-items: center;
  color: #868686;
  background-color: #202020;
  border-color: #202020;
  border: none;
  cursor: pointer;
  width: auto;
  position: absolute;
}

.filter-btn:hover {
  background-color: #343434;
  border-color: #3a3a3a;
}

#searchBox {
  padding-left: 32px;
  width: calc(100% - 69px);
}

.download-menu-container {
  position: absolute;
  display: block;
  font-family: sans-serif;
  margin-top: 1rem;
  float: right;
}

/* Hide toggle */
#toggle-download {
  display: none;
}

/* Download Button */
.download-label {
  background: #0078d7;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  user-select: none;
  transition: background 0.3s ease;
  display: inline-block;
}

.download-label:hover {
  background: #005a9e;
}

/* Panel */
.download-panel {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  width: 160px;
  background: #1e1e1e;
  color: white;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 1rem;
  z-index: 999;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Show panel when checked */
#toggle-download:checked+.download-label+.download-panel {
  display: block;
}

/* Resolution links */
.download-panel .res-link {
  display: block;
  background: #2c2c2c;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 6px;
  text-decoration: none;
  color: white;
  transition: background 0.2s ease;
}

.download-panel .res-link:hover {
  background: #3c3c3c;
}

.clock {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 15px;
  margin-bottom: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  transition: color 0.3s ease;
}

#time {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

#date {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 12px;
  transition: color 0.3s ease;
}

.settings-toggle {
  display: block;
  align-items: center;
}

.settings-toggle-input {
  display: none;
}

.settings-toggle-label {
  display: block;
  align-items: center;
  cursor: pointer;
  width: 95px;
}

.settings-toggle-slider {
  position: absolute;
  top: 53px;
  right: 12px;
  width: 36px;
  height: 18px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 18px;
  transition: background 0.2s ease;
}

.settings-toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 0px;
  background: rgba(255, 255, 255, 1.0);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.settings-toggle-input:checked+.settings-toggle-label .settings-toggle-slider {
  background: rgba(0, 120, 212, 1.0);
}

.settings-toggle-input:checked+.settings-toggle-label .settings-toggle-slider::before {
  transform: translateX(18px);
}

.settings-toggle-text {

  font-size: 13px;
  color: rgba(0, 0, 0, 1.0);
}

















.chat-check {
  display: none;
}

.chat-toggle-btn {
  position: fixed;
  bottom: calc(50% + 70px);
  color: rgba(255, 255, 255, 1.0);
  height: 95px;
  width: auto;
  right: 0px;
  text-align: center;
  padding-top: 36px;
  padding-right: 8px;
  padding-bottom: 0px;
  padding-left: 8px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
}

.chat-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.chat-drawer {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(204, 204, 204, 1.0);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(204, 204, 204, 1.0);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(204, 204, 204, 1.0);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(204, 204, 204, 1.0);
  border-radius: 5px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  background: rgba(249, 249, 249, 1.0);
  color: rgba(0, 0, 0, 1.0);
  z-index: 9998;
  transition: right 0.3s ease;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.4);
}

.chat-check:checked~.chat-drawer {
  right: 0;
}

.chat-header {
  background: rgba(249, 249, 249, 1.0);
  padding: 10px;
  position: relative;
}

.chat-header span {
  font-weight: bold;
}

.chat-close-btn {
  position: absolute;
  right: 10px;
  top: 8px;
  cursor: pointer;
}

/* Messages */
.chat-messages {
  height: calc(100% - 110px);
  overflow-y: auto;
  padding: 10px;
}

.chat-message {
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 4px;
  max-width: 80%;
}

.chat-input {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(204, 204, 204, 1.0);
  border-top: 1px solid #777;
  padding: 8px;
}

.chat-input input {
  position: inline-block;
  width: calc(100% - 36px);
  padding: 5px;
  border: none;
  outline: none;
  margin-top: 0px;
}

.chat-input button {
  width: 32px;
  height: 26px;
  position: inline-block;
  border-radius: 5px;
  background: rgba(0, 120, 212, 1.0);
  border: none;
  color: #fff;
  cursor: pointer;
}

























#chatBox {
  width: 320px;
  margin: 20px auto;
  border: 1px solid #ccc;
  background: #fff;
}

#commentsList {
  height: 300px;
  overflow-y: auto;
  padding: 10px;
}

/* Message */
.message {
  margin: 6px 0;
}

.message .name {
  font-weight: bold;
  font-size: 12px;
}

.message .text {
  padding: 6px;
  border-radius: 4px;
  background: #e0e0e0;
  display: inline-block;
  max-width: 80%;
}

.message .time {
  font-size: 10px;
  color: #666;
}

/* Your messages */
.message[data-user="You"] .text {
  background: #0078d4;
  color: #fff;
  margin-left: 20%;
}

/* Form */
#commentForm {
  border-top: 1px solid #ccc;
  padding: 8px;
}

#commentForm input[type="text"] {
  width: 100%;
  margin-bottom: 5px;
}

#commentForm textarea {
  width: 100%;
  height: 50px;
}

#commentForm button {
  margin-top: 5px;
}