.App {
  text-align: center;
}

body {
  /* background-color: #f1c0ff54 */
  background-color: #f0cbfa54
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.modal {
  max-height: 55% !important;
  height: 70% !important;
  width: 50% !important;
}

.learn-item {
  max-height: 90% !important;
  height: 80% !important;
  width: 90% !important;
}

.modal-team-title {
  padding-top: 20px;
  margin-left: 15px;
}

.modal-team-form {
  margin-top: 20px;
}

.team-form-modal {
  margin-top: 0;
  margin-left: 40px;
}

.modal-close-position {
  position: absolute !important;
  top: -50px !important;
  right: 5px !important;
  color: #fff !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400;
}

th {
  border-radius: 0 !important;
  border: 0 !important;
}

.retro-error-message {
  color: #282c34;
  font-family: 'Raleway', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400;
  margin-left: 6px;
}

.toast-color {
  background-color: #ed143d !important;
}

#toast-container {
  top: 17% !important;
  /* right: auto !important;
  bottom: 10%;
  right:7%;   */
}

.app-nav {
  margin-right: 48% !important;
}

.toast-retro {
  top: 150px !important;
  left: -220%;
}

.timer {
  position: absolute;
  top: 0%;
  right: 0%;
  background-color: #8e1d1d;
  height: 67px;
  width: 260px;
  display: ruby;
  padding-top: 14px;
  border-left: 1px solid white;
  padding-left: 62px;
}

.time {
  margin: 4px 5px;
  font-size: 19px;
  color: white;
  position: absolute;
  margin: auto 0;
  left: 19px;
  top: 19px;
}

.btn-timer {
  margin: 5px;
  border-radius: 10px;
}

.btn-small {
  /* background-color: #ed153d !important; */
  height: 27.4px !important;
  line-height: 27.4px !important;
}

.btn-timer:focus {
  margin: 5px;
  background-color: #ed153d !important;
}

.settings {
  display: inline-flex;
  width: 100%;
  margin-left: 22%;
}

.stats {
  color: #fff;
  text-align: left;
  font-size: 13px;
}

.stats-width {
  /* border-top: 1px solid white; */
  width: 200px;
}

.box {
  border-top: 1px solid rgba(66, 43, 43, 0.2);
  padding: 12px;
}

.stats-title {
  height: 30px;
  padding-top: 5px;
}

.stats-padding {
  padding: 10px;
}

#myChart {
  max-width: 90%;
  max-height: 360px;
}

.table {
  max-width: 90%;
}

table.table td,
th {
  max-width: 70px !important;
  padding: 10px 5px !important;
}

table.table tr:hover:not(:first-child) {
  background-color: #6b1cb81a !important
}

i.large {
  font-size: 6rem !important;
}

i.medium {
  font-size: 4rem !important;
}

i.small {
  font-size: 2.5rem !important;
}

i.custom-small {
  display: inline-block !important;
  font-size: 1.5rem !important;
}

nav {
  min-height: 68px !important;
  line-height: 68px !important;
}

nav ul a:hover:not(.logo) {
  /* background-color: rgb(83 4 124 / 100%) !important; */
  color: white !important;
}

nav ul a.logo:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}

nav ul li a {
  background-color: rgba(0, 0, 0, 0) !important;
  /* color: white !important; */
}

.menu {
  padding-left: 20px !important;
  display: inline-flex !important;
}

.retrospective-menu {
  transition: background-color .3s;
  font-size: 1rem;
  color: #fff;
  display: block;
  padding: 0 15px;
  cursor: pointer;
}

.dropdown-content {
  top: 65px !important;
  width: 170px !important;
  left: 79% !important;
}

.dropdown-content-modal-menu {
  top: 65px !important;
  width: 200px !important;
  left: 23% !important;
}

.dropdown-content-modal-menu-dashboard {
  top: 65px !important;
  width: 200px !important;
  left: 16% !important;
}

.login {
  /* border: 1px solid #E0E0E0 !important; */
  background-color: aliceblue !important;
  width: 100% !important;
  height: 46px !important;
  /* color: #000000; */
  border-radius: 0 !important;
  padding: 15px !important;
  /* margin: 10px 0 !important; */
  outline: none !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
}

textarea:focus-visible {
  border-color: #53047c !important;
  color: #53047c;
  box-shadow: 0 1px 0 0 #53047c !important;
  /* outline-offset: 0px; */
}

input:focus {
  border-bottom: 1px solid #53047c !important;
  box-shadow: 0 0px 0 0 #53047c !important;
}

/* input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #53047c inset !important;
  -webkit-text-fill-color: #fff !important;
} */

/* input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
} */

.form-group {
  width: 100%;
}

.btn-login {
  margin: 5px;
}

.nav-bar-admin {
  position: absolute;
  top: 10%;
  background-color: transparent;
  color: gray !important;
  box-shadow: none !important;
}

.dash-stats {
  width: 21.9%;
  margin: 10px;
  height: 85px;
  padding: 0 !important;
}

.carousel {
  overflow: visible !important;
}

.indicators {
  top: 130%;
}

.carousel .indicators .indicator-item {
  background-color: #53047c !important;
}


.checkbox-white.filled-in:not(:checked)+span:not(.lever):after {
  border: 2px solid white !important;
  background: transparent;
}

.ag-cell {
  text-align: left !important;
}

.ag-header-row.ag-header-row-column {
  background-color: #53047c !important;
  color: white !important;
}

.ag-icon {
  color: white;
}

.tabs {
  background-color: transparent !important;
}

.tabs .tab {
  text-transform: none !important;
}

.tabs .indicator {
  background-color: transparent !important;
}

/* .tabs .li:first {
  border-right: 1px solid #53047c !important;
} */

.tabs .tab a.active {
  color: #53047c !important;
  font-size: 18px !important;
}

.tabs .tab a:not(active) {
  color: #575555 !important;
  font-size: 18px !important;
}

.tabs .tab a:focus {
  background-color: transparent !important;
  color: #53047c !important;
  font-size: 18px !important;
}

.round-left-table-border {
  border-top-left-radius: 10px !important;
  padding-left: 15px !important;
}

.round-right-table-border {
  border-top-right-radius: 10px !important;
}


blockquote {
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  color: #555;
  line-height: 1.6;
  border-left: 5px solid #53047c !important;
}

@media only screen and (min-width: 1200px) {

  .dash-stats {
    width: 23.4% !important;
    margin: 10px;
    height: 85px;
    padding: 0 !important;
  }
}

@media only screen and (min-width: 992px) {
  .dash-stats {
    width: 23.36% !important;
    margin: 10px;
    height: 85px;
    padding: 0 !important;
  }
}



@media screen and (min-width: 380px) and (max-width: 991px) {
  .dash-stats {
    width: 95.7% !important;
    margin: 10px;
    height: 85px;
    padding: 0 !important;
  }

}