/****** CI branding ******/
/* Colour scheme - copied over from AMOS*/
:root {
  /*p for primary, s for secondary, t for tertiary*/
  --p-orange: #e84610;
  --p-blue: #009fe3;
  --p-grey: #4a4a4f;
  --p-navy: #445261;
  --p-red: #d63649;
  --s-grey: #e6ecf0;
  --s-yellow: #efb920;
  --s-pink: #ff5a60;
  --s-teal: rgb(35, 187, 187);
  /* purple added on top of AMOS colours */
  --s-purple: #a383a3;
  --t-grey: #e0e7ff;
  --bg-grey: #f5f5f5;
  --table-grey: #8798ad;
  --table-darkgrey: #e9e7e7;
}

body {
  background-color: var(--p-navy);
  color: var(--p-grey);
  font-family: Montserrat, sans-serif;
}

.h1 {
  background-color: var(--p-navy);
  color: #fff;
  font-size: 2rem;
  padding: 0.5rem 1rem;
}

.bg-success {
  background-color: var(--s-teal) !important;
}

.introjs-showElement {
  color: var(--p-grey);
}

label {
  color: var(--t-grey);
}

#dates label {
  color: var(--p-navy);
}

#locked-start-date,
#locked-end-date {
  border-bottom: 1px solid var(--t-grey);
  color: var(--table-grey);
}

#total-day-label {
  padding-top: 0.4rem;
}

.info-banner {
  background-color: var(--p-blue);
  color: #fff;
  margin: 1rem auto;
  width: 95%;
}

#lessons-table-wrapper {
  display: block;
  max-height: 70vh;
  overflow-y: scroll;
}

/* table header styling */

#day-header {
  min-width: 4vw;
}

.table-header {
  min-width: 7vw;
}


/* body styling */
#lessons tbody tr {
  cursor: pointer;
}

tbody tr [type="checkbox"]+label:before,
tbody tr :not(.complete) [type="checkbox"]+label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  z-index: 0;
  border: 2px solid #5a5a5a;
  border-radius: 1px;
  margin-top: 2px;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -ms-transition: 0.2s;
  transition: 0.2s;
  transform: rotate(0deg);
}

tbody tr.before-schedule {
  background-color: var(--s-yellow);
}

tbody tr.complete {
  background-color: var(--t-grey);
}

tbody tr.complete [type="checkbox"]+label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #4285f4;
  border-bottom: 2px solid #4285f4;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

tbody tr.current {
  background-color: rgba(35, 187, 187, 0.5);
}

tbody tr.today {
  background-color: var(--s-purple);
  color: var(--table-darkgrey);
}

tbody tr.today:hover {
  color: inherit;
}

.close-icon {
  position: absolute;
  right: 10px;
  cursor: pointer;
  font-size: x-large;
}

.progress,
.progress .progress-bar {
  height: 33px;
  color: #424242;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 3px;
}

.progress {
  border: 1px solid #bbb1b1;
  height: 36px;
}

.accordion {
  margin-bottom: 10px;
  background-color: #fafafa;
  box-shadow: 5px 8px 15px rgb(193, 200, 206);
}

span {
  color: #313639;
  font-size: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

/* Copy to Clipboard Modal */
#copyToClipboardModal {
  padding-right: 0 !important;
}

#copyToClipboardModal .modal-dialog {
  margin: 0;
  max-width: 100%;
}

#copyToClipboardModal .badge {
  padding: 1em;
  color: #fafafa;
  background-color: #00c851;
  border-radius: 7%;
}

#copyToClipboardModal p {
  margin: initial;
  font-size: 1em;
}

#date-error {
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

/* --- Icons and Badges --- */

.fa-times {
  color: var(--p-red);
}

.fa-lock {
  cursor: pointer;
}

.fa-lock-open {
  color: var(--p-navy);
}

.badge-copy {
  background-color: var(--s-teal) !important;
}

.badge-days {
  background-color: var(--p-blue);
  color: var(--t-grey);
  font-size: 0.8rem;
}

/* --- Buttons --- */

/* override Bootstrap */
button.btn {
  border-radius: 0.125rem;
  font-weight: bold;
  margin: 0;
}

/* default button size */
button.btn.btn-sm {
  min-height: 30px;
  min-width: 130px;
}

/* remove button bottom margin from MDN */
.modal-footer .btn+.btn {
  margin-bottom: 0;
}

.info-button {
  background-color: var(--p-blue);
}

.primary-button {
  background-color: var(--s-teal);
}

.danger-button {
  background-color: var(--s-pink);
}

button.danger-reverse-button {
  border: 1px solid var(--s-pink);
  color: var(--p-red) !important;
}

.danger-reverse-button:hover {
  background-color: var(--s-pink);
  color: var(--t-grey) !important;
}

.btn.btn-sm.info-button:hover,
.btn.primary-button:hover,
.btn.danger-button:hover {
  color: #000 !important;
}

/* adjust total days positioning on sm screens */
@media screen and (min-width: 576px) and (max-width: 767px) {
  #total-day-label div {
    width: 75%;
  }
}