:root {
  color-scheme: light dark;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

html {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  background: #eff3f6;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.loader__content-wrapper {
  display: flex;
  gap: 12px;
  animation: loader-opacity-keyframes infinite alternate-reverse 1s;
}

.loader_disabled {
  display: none;
}

.loader__title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loader__title,
.loader__subtitle {
  color: #101828;
  font-weight: bold;
  font-family: sans-serif;
}

.loader__title {
  font-size: 40px;
}

.loader__subtitle {
  font-size: 20px;
}

.loader__icon {
  width: 40px;
}

.loader__icon.loader__icon_light {
  display: none;
}

.docx_viewer_container {
  position: relative;
  padding: 30px 12px;
}

.back_button {
  position: absolute;
  top: 12px;
  left: 12px;
  color: white;
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #193fb3;
  border: none;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
}

.back_button:hover {
  background-color: #5c80ed;
}

.error-wrapper {
  padding: 20px 40px;
  border: 3px solid white;
  border-radius: 15px;
  background: #0a111c;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (prefers-color-scheme: dark) {
  .back_button {
    color: black;
    background-color: #8198ee;
  }

  .back_button:hover {
    background-color: #637fe5;
  }

  body:not(._light_loader) {
    background: #101828;
  }
  body:not(._light_loader) .loader__icon.loader__icon_light {
    display: block;
  }
  body:not(._light_loader) .loader__icon.loader__icon_dark {
    display: none;
  }
  body:not(._light_loader) .loader {
  }
  body:not(._light_loader) .loader__title,
  body:not(._light_loader) .loader__subtitle {
    color: #98a2b3;
  }
}

body._dark_loader {
  background: #101828;
}
body._dark_loader .loader__icon.loader__icon_light {
  display: block;
}
body._dark_loader .loader__icon.loader__icon_dark {
  display: none;
}
body._dark_loader .loader__title,
body._dark_loader .loader__subtitle {
  color: #98a2b3;
}

@keyframes loader-opacity-keyframes {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0;
  }
}