/*$color-background: #E5F1F5;
$color-active: red;
$pane-back: #fff;


*/
body {
  background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
  height: 100vh;
  font-family: 'Rubik', sans-serif; }

h2, h3, h4, h5 {
  font-family: 'Oswald', sans-serif; }

header .logo-header {
  max-height: 60px;
  margin-right: 1em; }

header .logo-typaz {
  min-height: 60px; }

header .logo-pitman {
  display: none; }

header .logo-typaz {
  transform: scale(0.85); }

.br-strip .col {
  height: 8px;
  background-color: #A8CF3F; }

.br-strip .br-strip-2 {
  background-color: #E86404; }

.br-strip .br-strip-3 {
  background-color: #59CBDD; }

body.br-aolcc {
  /*background: url(../img/aolcc-emblem-watermark_v02.svg) left 20vw top -50vh no-repeat;
    background-size: 100vw auto;*/
  background: url(../img/aolcc-emblem-watermark_v07_OL.svg) center center no-repeat; }
  body.br-aolcc .loader .box {
    background: #A8CF3F; }
  body.br-aolcc section#dashboard .card-sections .icon-section {
    color: #E86404; }
  body.br-aolcc section#dashboard .card-drills .card-typing-item .card-footer .card-icons .bi-circle-fill {
    color: #A8CF3F; }
  body.br-aolcc .list-group-item.active {
    border-color: #A8CF3F;
    background-color: #A8CF3F; }

/*@media (orientation: portrait) {
    body.br-aolcc {
        background-size: auto 100vh;
    }
}*/
body.br-pitman {
  background: url(../img/pitman-seal-v04.svg) top -25px right -10px no-repeat;
  background-size: 270px auto;
  background-color: #EAEDED;
  /* Simplekeyboard overrides */ }
  body.br-pitman .br-strip .col {
    height: 4px;
    background-color: #0661aa; }
  body.br-pitman .logo-aolcc {
    display: none; }
  body.br-pitman .logo-pitman {
    display: block; }
    body.br-pitman .logo-pitman.logo-header {
      transform: scale(0.8); }
  body.br-pitman .modal-tt .svg-wrapper .shape {
    stroke: #0661aa; }
  body.br-pitman .loader .box {
    background: #0661aa; }
  body.br-pitman section#dashboard .card-sections .icon-section {
    color: #A9C65A; }
  body.br-pitman section#dashboard .card-sections .list-group-item.active {
    background-color: #0661aa;
    border-color: #0661aa; }
  body.br-pitman section#dashboard .card-drills .card-typing-item .card-footer .card-icons .bi-circle-fill {
    color: #A9C65A; }
  body.br-pitman .simple-keyboard .tt-highlight {
    background-color: #0661aa;
    color: #fff; }

.btn-svg {
  /*width: 3rem;
	height: 3rem;*/ }
  .btn-svg svg, .btn-svg img.inline-svg, .btn-svg img.abs-svg {
    opacity: 0.4;
    width: 2em; }
  .btn-svg:hover, .btn-svg:focus, .btn-svg:active, .btn-svg.active {
    background-color: #ccc; }
  .btn-svg.btn-medium svg, .btn-svg.btn-medium img.inline-svg {
    width: 1em; }
  .btn-svg.btn-medium-padding {
    padding: 0.5rem; }
  .btn-svg.btn-border-faded {
    border: 1px solid rgba(0, 0, 0, 0.125); }
  .btn-svg .abs-svg.lock {
    position: absolute;
    transform: scale(0.75);
    right: -0.8em;
    bottom: -0.8em;
    background-color: #fff;
    border-radius: 100%;
    border: 2px solid #666;
    padding: 5px;
    opacity: 100%; }

.btn-loader .spinner-grow {
  display: none;
  margin-right: 0.25em; }

.btn-loader .loader-button-loading {
  display: none; }

.btn-loader.loading .spinner-grow {
  display: inline-block; }

.btn-loader.loading .loader-button-loading {
  display: inline; }

.btn-loader.loading .loader-button-static {
  display: none; }

.icon-inline {
  padding: 0;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  opacity: 0.4; }

.custom-checkbox {
  position: relative;
  display: block;
  width: 40px;
  height: 40px; }
  .custom-checkbox .background {
    fill: #4e73df;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s; }
  .custom-checkbox .stroke {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s; }
  .custom-checkbox .check {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    stroke-dashoffset: 22;
    stroke-dasharray: 22;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s; }
  .custom-checkbox input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    -appearance: none;
    -webkit-appearance: none; }
    .custom-checkbox input[type=checkbox]:hover {
      cursor: pointer; }
    .custom-checkbox input[type=checkbox]:checked + svg .background {
      fill: #2e59d9; }
    .custom-checkbox input[type=checkbox]:checked + svg .stroke {
      stroke-dashoffset: 0; }
    .custom-checkbox input[type=checkbox]:checked + svg .check {
      stroke-dashoffset: 0; }
  .custom-checkbox:hover .check {
    stroke-dashoffset: 0; }

.checkbox-hc.form-check-input:checked {
  background-color: #6c757d;
  border-color: #6c757d; }

.checkbox-hc.form-check-input:focus {
  border-color: #6c757d;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25); }

section#drill {
  /*height: 100%;*/ }
  section#drill.active .btn.drill-settings {
    display: none; }
  section#drill.active .btn.drill-stop {
    display: inline-block !important; }

#drill-source, .drill-sample-text {
  position: relative;
  overflow-y: scroll;
  color: #212529;
  background-color: #fff;
  font-size: 1.6em;
  letter-spacing: 0.25px; }
  #drill-source .drill-wrapper, .drill-sample-text .drill-wrapper {
    position: absolute;
    left: 0.75rem;
    top: 0; }
  #drill-source span, .drill-sample-text span {
    transition: color 0.25s ease;
    border-bottom: 5px solid transparent;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    scroll-margin-top: 100px; }
    #drill-source span.lb, .drill-sample-text span.lb {
      display: block; }
    #drill-source span.pb, .drill-sample-text span.pb {
      display: block;
      padding-bottom: 1em; }
    #drill-source span.correct, .drill-sample-text span.correct {
      color: #47912F; }
    #drill-source span.incorrect, .drill-sample-text span.incorrect {
      color: #E86404; }
    #drill-source span.active, .drill-sample-text span.active {
      -webkit-animation-name: cursor;
      animation-name: cursor; }

@keyframes cursor {
  0% {
    border-color: #59CBDD; }
  50% {
    border-color: transparent; }
  100% {
    border-color: #59CBDD; } }

.drill-sample-text {
  min-height: 100px; }

#modal-drill-settings .drill-sample-text {
  max-height: 100px; }

#drill-source.drill-size-1, .drill-sample-text.drill-size-1 {
  font-size: 1em; }

#drill-source.drill-size-2, .drill-sample-text.drill-size-2 {
  font-size: 1.3em; }

#drill-source.drill-size-3, .drill-sample-text.drill-size-3 {
  font-size: 1.6em; }

#drill-source.drill-size-4, .drill-sample-text.drill-size-4 {
  font-size: 2em; }

#drill-source.drill-size-5, .drill-sample-text.drill-size-5 {
  font-size: 3.5em; }

.metrics {
  min-width: 200px;
  opacity: 0.5; }
  .metrics .card-metrics {
    height: 100%; }
    .metrics .card-metrics .drill-title .title {
      border-bottom: 3px solid #999;
      padding-bottom: 0.5em;
      margin-bottom: 0; }
    .metrics .card-metrics .metrics-value {
      color: #aaa;
      transition: opacity 0.5s ease;
      opacity: 0;
      padding: 0.25em 0;
      margin-left: 1.25rem; }
      .metrics .card-metrics .metrics-value span {
        font-size: 2rem; }
    .metrics .card-metrics .metrics-btn-container {
      border-top: 3px solid #999;
      margin: 0.5em 0 0 0;
      padding: 1rem 0; }
    .metrics .card-metrics.show .metrics-value {
      opacity: 1; }
      .metrics .card-metrics.show .metrics-value.inactive {
        opacity: 0.3; }
    .metrics .card-metrics .metrics-options {
      margin-bottom: 1rem; }
    .metrics .card-metrics .btn-nav.lock img.lock {
      display: block !important; }

@media (max-height: 800px) {
  .metrics .card-metrics h5 {
    transform: scale(0.9); }
  .metrics .card-metrics .metrics-value {
    padding: 0 !important; } }

section#dashboard .card-sections {
  min-width: 250px; }
  section#dashboard .card-sections .section-list li {
    transition: background-color 0.5s ease; }
    section#dashboard .card-sections .section-list li:not(.disabled) {
      cursor: pointer; }
  section#dashboard .card-sections .resources-list li {
    cursor: pointer; }

section#dashboard .card-reporting {
  min-width: 300px; }
  section#dashboard .card-reporting .btn-progress {
    display: none; }
  section#dashboard .card-reporting.display-progress .btn-progress {
    display: block; }
  section#dashboard .card-reporting .btn-expand {
    position: absolute;
    top: 0.5em;
    right: 0;
    border: 1px solid rgba(0, 0, 0, 0.125); }

section#dashboard .card-drills .card:not(.disabled) {
  cursor: pointer; }

section#dashboard .card-drills .card-typing-item .card-img-top {
  pointer-events: none; }

section#dashboard .card-drills .card-typing-item .tile-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  border: 3px solid #fff;
  border-radius: 100%;
  padding: 0.8em;
  margin: 3% 25%; }

section#dashboard .card-drills .card-typing-item .callout-icon {
  display: none;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  color: #fff; }

section#dashboard .card-drills .card-typing-item .drill-context-menu {
  position: absolute;
  top: 2em;
  right: 0.5em;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease; }
  section#dashboard .card-drills .card-typing-item .drill-context-menu li:not(.disabled) {
    transition: background-color 0.5s ease; }
    section#dashboard .card-drills .card-typing-item .drill-context-menu li:not(.disabled) i {
      padding-right: 0.5em; }
    section#dashboard .card-drills .card-typing-item .drill-context-menu li:not(.disabled):hover {
      background-color: #eee; }

section#dashboard .card-drills .card-typing-item .card-body {
  width: 100%;
  padding: 0;
  /*.card-icons{
					margin-top: -30px !important;
					font-size: 2rem;
					margin-right: -8px !important;
				}*/ }

section#dashboard .card-drills .card-typing-item .card-footer {
  padding: 0; }
  section#dashboard .card-drills .card-typing-item .card-footer .card-icons {
    line-height: 2em;
    padding-left: 0.5em; }
    section#dashboard .card-drills .card-typing-item .card-footer .card-icons .bi-circle, section#dashboard .card-drills .card-typing-item .card-footer .card-icons .bi-lock {
      color: #999; }
    section#dashboard .card-drills .card-typing-item .card-footer .card-icons .bi-circle-fill, section#dashboard .card-drills .card-typing-item .card-footer .card-icons .bi-lock {
      display: none; }
    section#dashboard .card-drills .card-typing-item .card-footer .card-icons .btn-svg {
      padding: 0; }
      section#dashboard .card-drills .card-typing-item .card-footer .card-icons .btn-svg img {
        width: 2em; }

section#dashboard .card-drills .card-typing-item.card-drill-complete .callout-icon {
  display: block; }

section#dashboard .card-drills .card-typing-item.card-drill-complete .card-icons .bi-circle-fill {
  display: inline; }

section#dashboard .card-drills .card-typing-item.card-drill-complete .card-icons .bi-circle {
  display: none; }

section#dashboard .card-drills .card-typing-item.card-drill-complete.context-menu .drill-context-menu {
  opacity: 1;
  z-index: 1; }

section#dashboard .card-drills .card-typing-item.disabled .card-icons .bi-circle-fill, section#dashboard .card-drills .card-typing-item.disabled .card-icons .bi-circle {
  display: none; }

section#dashboard .card-drills .card-typing-item.disabled .card-icons .bi-lock {
  display: inline; }

section#dashboard.progress-expanded .card-drills {
  display: none !important; }

section#dashboard.progress-expanded .card-reporting {
  flex-grow: 1; }

.container-instruction .video-info button {
  max-height: 3rem; }

/* Info boxes */
section#info .info-card-icon,
#no-access .info-card-icon {
  position: absolute;
  width: 4rem;
  padding: 1em;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid rgba(0, 0, 0, 0.125);
  top: -2rem;
  left: -2rem; }
  section#info .info-card-icon img,
  #no-access .info-card-icon img {
    opacity: 0.5; }

section#info .icon-category,
#no-access .icon-category {
  width: 2rem; }

/* Simplekeyboard overrides */
.simple-keyboard {
  pointer-events: none; }
  .simple-keyboard .hg-button-space {
    flex-grow: 10; }
  .simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
    max-width: none; }
  .simple-keyboard .tt-highlight {
    background-color: #A8CF3F; }

/* Custombox overrides */
.custombox-container {
  display: flex;
  flex-direction: column; }

/* Typaz high contrast mode */
body.high-contrast #drill-source {
  color: #000; }
  body.high-contrast #drill-source span.correct {
    color: #409024; }
  body.high-contrast #drill-source span.incorrect {
    color: #0000ff; }

/* Admin */
.sidebar .sidebar-brand-icon {
  width: 100%;
  padding: 2em; }

.sidebar .loader {
  left: 60px;
  top: 200px; }

.sidebar.bg-aolcc {
  background-color: #3a3b45;
  /*background-color: $br-green;*/ }

.sidebar.toggled .sidebar-brand-icon {
  padding: 0; }

.sidebar.toggled .loader {
  left: 25px; }
  .sidebar.toggled .loader .box {
    width: 50px;
    height: 50px; }
  .sidebar.toggled .loader .shadow {
    width: 50px;
    height: 5px;
    top: 68px; }

.navbar .loader {
  top: 8px; }
  .navbar .loader .box {
    width: 40px;
    height: 40px;
    background-color: #A8CF3F; }
  .navbar .loader .shadow {
    width: 40px;
    height: 4px;
    top: 50px; }

.page-container {
  position: relative;
  min-height: 15em; }
  .page-container .loader .box {
    background-color: #A8CF3F; }

@media (min-width: 768px) {
  .sidebar {
    width: 17rem !important; } }

/* Tables */
table.table-vertical-align-middle td {
  vertical-align: middle !important; }

/* Confirm */
.bootbox .modal-header .modal-title {
  font-family: "Rubik", sans-serif; }

/* Courses */
#courses-map .mapping-course-selection .course-map-card {
  flex-direction: row; }
  #courses-map .mapping-course-selection .course-map-card .card-img-left {
    max-width: 3rem;
    margin-left: 1rem; }

#courses-map .container-mapping {
  width: 100%;
  border: 1px dashed #e3e6f0;
  background-color: #fff;
  padding: 1em; }
  #courses-map .container-mapping .gridly {
    position: relative;
    width: 960px; }
    #courses-map .container-mapping .gridly .brick {
      background-color: #ccc;
      width: 140px;
      height: 140px; }

#courses-map .container-sortable .active-sortable h5.card-header {
  background-color: #E7EBF9; }

#courses-map .module-content.active-sortable {
  background-color: #E7EBF9; }

#courses-map .mapping-modules .module-map-card .card-header {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  font-family: 'Rubik', sans-serif; }
  #courses-map .mapping-modules .module-map-card .card-header .module-label {
    flex-grow: 1;
    cursor: pointer; }
    #courses-map .mapping-modules .module-map-card .card-header .module-label:before {
      content: "\f107";
      font-family: 'Font Awesome 5 Free';
      font-weight: 900; }
    #courses-map .mapping-modules .module-map-card .card-header .module-label.collapsed:before {
      content: "\f106"; }

#courses-map .mapping-modules .module-map-card .module-empty {
  display: block;
  border: 1px dashed lightgray;
  border-radius: 0.3em;
  padding: 1em;
  text-align: center; }

#courses-map .mapping-modules .drag-handle {
  cursor: move; }
  #courses-map .mapping-modules .drag-handle .icon-drag {
    width: 1.5rem;
    opacity: 0.5; }

#courses-map .module-map-card .card-badges .badge {
  margin-right: 0.5em; }
  #courses-map .module-map-card .card-badges .badge.badge-outline {
    border: 1px solid #e3e6f0;
    background-color: #e3e6f0; }
  #courses-map .module-map-card .card-badges .badge .badge-count {
    font-family: 'Oswald', sans-serif;
    display: inline-block;
    padding: 0 0.125em; }
  #courses-map .module-map-card .card-badges .badge img.icon-badge {
    width: 1.5em; }

#courses-map .module-map-card .content-type .content-type-icon {
  width: 30px; }

#courses-map .module-map-card .content-title {
  flex-grow: 1; }

#dashboard .chart-wrapper {
  max-width: 1100px; }

#users-list #table-users-list .btn.disabled {
  pointer-events: none; }

#users-list #table-users-list.instructor-view th:nth-child(5),
#users-list #table-users-list.instructor-view td:nth-child(5) {
  display: none; }

#users-reports .reports-users-selection .user-card {
  flex-direction: row; }
  #users-reports .reports-users-selection .user-card .card-img-left {
    max-width: 3rem;
    margin-left: 1rem; }

#users-reports .chart-wrapper {
  max-width: 1100px; }

#users-exams .exams-users-selection .user-card {
  flex-direction: row; }
  #users-exams .exams-users-selection .user-card .card-img-left {
    max-width: 3rem;
    margin-left: 1rem; }

#users-exams #user-exam-reports .exam-card .card-value {
  flex-basis: 33%;
  min-width: 100px; }

#users-exams #user-exam-reports .exam-card .exam-card-log {
  font-family: "Courier New"; }
  #users-exams #user-exam-reports .exam-card .exam-card-log .lead {
    color: #333;
    font-size: 1.2rem; }
  #users-exams #user-exam-reports .exam-card .exam-card-log .passive-log {
    color: rgba(0, 0, 0, 0.5); }
  #users-exams #user-exam-reports .exam-card .exam-card-log .log-err {
    color: #f00;
    font-weight: bold; }
  #users-exams #user-exam-reports .exam-card .exam-card-log .wavy {
    text-decoration: underline;
    /* All browsers */
    text-decoration-color: red;
    /* Firefox only */
    text-decoration-style: wavy;
    /* Firefox only */ }

.o-50 {
  opacity: 0.5; }

table.table .w-1 {
  width: 1%; }

table.table .no-wrap {
  white-space: nowrap; }

/* Modules */
.btn-cat img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(176deg) brightness(112%) contrast(101%); }

img.icon-category {
  width: 1rem; }

img.icon-small {
  width: 2rem;
  height: 2rem; }

.modal-tt textarea.drill-content {
  min-height: 25vh; }

.modal-tt .video-source-icon {
  width: 1.5rem; }

.modal-tt .card-button.disabled {
  opacity: 0.3; }

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative;
  /* opinion 1 */ }

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  /* opinion 2 */
  font-size: .9em;
  /* opinion 3 */
  font-size: 14.5px;
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0; }

[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  /* opinion 4 */
  z-index: 1001;
  /* absurdity 1 */ }

[tooltip]::after {
  content: attr(tooltip);
  /* magic! */
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
  /* absurdity 2 */ }

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block; }

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important; }

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333; }

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px); }

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -0.5em); }

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333; }

[tooltip][flow^="down"]::after {
  top: calc(100% + 5px); }

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, 0.5em); }

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%); }

[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%); }

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%); }

[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%); }

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0); } }

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%); } }

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards; }

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards; }

@keyframes activeDot {
  0%,
  100% {
    transform: scaleY(1); }
  25% {
    transform: scaleY(0.75); } }

@keyframes inactiveDot {
  0%,
  100% {
    transform: scaleX(1) scaleY(1); }
  25% {
    transform: scaleX(0.85) scaleY(1.25); } }

@keyframes chevronEnterFirst {
  0% {
    opacity: 0;
    transform: rotate(0); }
  100% {
    transform: rotate(45deg); } }

@keyframes chevronEnterSecond {
  0% {
    opacity: 0;
    transform: rotate(0); }
  100% {
    transform: rotate(-45deg); } }

.pagination {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 1rem 0; }
  .pagination:hover button {
    display: block; }
  .pagination ul {
    display: flex;
    padding: 0;
    margin: 0;
    gap: 0.1rem;
    list-style: none; }
    .pagination ul li {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1rem;
      width: 1rem;
      cursor: pointer;
      transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
      .pagination ul li::before {
        content: "";
        display: block;
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 0.25rem;
        background: #000;
        transform-origin: 50% 50%;
        transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s ease-out, opacity 0.2s ease-out;
        opacity: 0.2; }
    .pagination ul li[active] {
      width: 2rem; }
      .pagination ul li[active]::before {
        width: 1.25rem;
        animation: activeDot 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 1; }
    .pagination ul li:not([active])::before {
      animation: inactiveDot 0.6s ease backwards; }
    .pagination ul li:not([active]):hover::before {
      opacity: 0.75; }
  .pagination button {
    /* display: none;*/
    position: relative;
    height: 12px;
    width: 12px;
    padding: 0;
    border: none;
    background: transparent;
    appearance: none;
    cursor: pointer;
    transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0.2; }
    .pagination button:hover {
      opacity: 1; }
    .pagination button:active {
      opacity: 0.8; }
      .pagination button:active::before {
        transform: rotate(35deg) scale(0.85); }
      .pagination button:active::after {
        transform: rotate(-35deg) scale(0.85); }
    .pagination button::before, .pagination button::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      height: 2px;
      width: 100%;
      background: #000;
      transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
    .pagination button:before {
      transform: rotate(45deg);
      animation: chevronEnterFirst 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .pagination button:after {
      transform: rotate(-45deg);
      animation: chevronEnterSecond 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .pagination button.previous::before, .pagination button.previous::after {
      left: 50%;
      transform-origin: 0% 50%; }
    .pagination button.next::before, .pagination button.next::after {
      right: 50%;
      transform-origin: 100% 50%; }

.toast-container {
  width: 90%;
  max-width: 450px;
  margin: 0 auto; }
  .toast-container[class*="toast-pos-"] {
    position: absolute;
    padding: 10px; }
  .toast-container.toast-pos-top {
    top: 0; }
  .toast-container.toast-pos-right {
    right: 0; }
  .toast-container.toast-pos-bottom {
    bottom: 0; }
  .toast-container.toast-pos-left {
    left: 0; }
  .toast-container .toasty {
    display: none;
    padding: 20px;
    margin: 20px 0;
    background: #eeeeee;
    color: #333333; }
    .toast-container .toasty .inline-svg {
      max-width: 2rem;
      margin-right: 1rem; }
    .toast-container .toasty .close-toast {
      float: right;
      text-decoration: none;
      color: #ffffff;
      vertical-align: middle; }

/*
 ----------------------------
 Modal Typing Trainer
 ----------------------------
 */
.custombox-container {
  height: 100%; }

.modal-tt {
  width: 600px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  background-color: #FFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  outline: 0 none;
  color: #999; }
  .modal-tt .modal-tt-header {
    border-bottom: none;
    padding: 1em 1em 0 1em; }
  .modal-tt .modal-tt-body {
    padding: 1em; }
    .modal-tt .modal-tt-body p {
      margin: 0; }
    .modal-tt .modal-tt-body .counter {
      font-size: 2rem;
      margin-bottom: 0;
      color: #999; }
  .modal-tt .svg-wrapper {
    position: relative;
    /*top: 50%;
		transform: translateY(-50%);
		margin: 0 auto;*/
    width: 186px; }
    .modal-tt .svg-wrapper .shape {
      stroke-dasharray: 0 540;
      stroke-dashoffset: -474;
      stroke-width: 3px;
      stroke: #A8CF3F;
      fill: #fff;
      border-radius: 100%;
      transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; }
    .modal-tt .svg-wrapper .circle-inner {
      position: absolute;
      top: -10px;
      left: 0;
      right: 0; }
      .modal-tt .svg-wrapper .circle-inner .card-img-top {
        max-width: 4rem;
        opacity: 0.5; }
    .modal-tt .svg-wrapper.animate .shape {
      stroke-width: 3px;
      stroke-dashoffset: 0;
      stroke-dasharray: 760;
      border-radius: 100%; }
  .modal-tt .svg-wrapper.feedback-circle-errors .shape {
    stroke: #E86404; }
  .modal-tt .svg-wrapper.feedback-circle-nwpm .shape {
    stroke: #59CBDD; }
  .modal-tt .feedback-positive {
    color: #A8CF3F; }
  .modal-tt .feedback-negative {
    color: #00BFFF; }
  .modal-tt .modal-divider {
    border-bottom: 3px solid #aaa; }
  .modal-tt .feedback-up-next .card-img-top, .modal-tt .settings-save .card-img-top {
    max-width: 4rem;
    opacity: 0.5; }
  .modal-tt .feedback-up-next .card-body, .modal-tt .settings-save .card-body {
    padding: 0; }
  .modal-tt .feedback-up-next > *, .modal-tt .settings-save > * {
    flex: 1 1 0;
    padding: 0; }
  .modal-tt .metrics-value {
    color: #aaa;
    transition: opacity 0.5s ease;
    padding: 0.25em 0;
    margin-left: 1.25rem; }
    .modal-tt .metrics-value .icon-inline {
      width: 5rem;
      height: 5rem; }
    .modal-tt .metrics-value span {
      font-family: 'Oswald', sans-serif;
      font-size: 3rem; }

#modal-drill-feedback .card-button-tutorial {
  display: none; }

#modal-drill-feedback.drill-review .card-button-repeat, #modal-drill-feedback.drill-review .card-button-next, #modal-drill-feedback.drill-review .card-button-tutorial {
  display: none !important; }

#modal-drill-feedback.drill-review .card-button-dashboard,
#modal-drill-feedback.drill-review .btn-repeat {
  max-width: 30%; }

#modal-drill-feedback.tutorial .card-button-tutorial {
  display: flex; }

#modal-drill-settings .card-button {
  max-width: 30%; }

@media only screen and (max-device-width: 480px) {
  .modal-tt {
    width: 300px; }
    .modal-tt .modal-tt-body p {
      height: 200px;
      overflow: hidden; } }

.loader {
  /* Uncomment this to make it run! */
  /*
	 animation: loader 5s linear infinite; 
	*/
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 40px); }
  .loader .box {
    width: 100px;
    height: 100px;
    background: #fff;
    animation: animate-box .5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px; }
  .loader .shadow {
    width: 100px;
    height: 10px;
    background: #000;
    opacity: 0.1;
    position: absolute;
    top: 118px;
    left: 0;
    border-radius: 50%;
    animation: shadow .5s linear infinite; }

@keyframes loader {
  0% {
    left: -100px; }
  100% {
    left: 110%; } }

@keyframes animate-box {
  17% {
    border-bottom-right-radius: 6px; }
  25% {
    transform: translateY(9px) rotate(22.5deg); }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px; }
  75% {
    transform: translateY(9px) rotate(67.5deg); }
  100% {
    transform: translateY(0) rotate(90deg); } }

@keyframes shadow {
  50% {
    transform: scale(1.2, 1); } }

/*# sourceMappingURL=tt.css.map */