/*
-------------------------
  PLANTILLA LESSONS UPV
-------------------------
*/

:root {
  --upv-lessons-assessment-background: #FAA500;
  --upv-lessons-assessment-color: var(--sakai-text-color-2);
  --upv-lessons-assignment-background: #FAA500;
  --upv-lessons-assignment-color: var(--sakai-text-color-2);
  --upv-lessons-forum-background: #FAA500;
  --upv-lessons-forum-color: var(--sakai-text-color-2);
  --upv-lessons-resource-background: #A40E0E;
  --upv-lessons-resource-hover-background: #E5554F;
  --upv-lessons-resource-color: #FFFFFF;
  --upv-lessons-subpage-background: #338fc2;
  --upv-lessons-subpage-hover-background: #59CBE8;
  --upv-lessons-subpage-color: #FFFFFF;
  --upv-lessons-section-background: #054d82;
  --upv-lessons-section-color: #FFFFFF;
  --upv-lessons-question-background: #424A50;
  --upv-lessons-question-color: #FFFFFF;
  --upv-lessons-question-input-background: #3F4444;
  --upv-lessons-question-input-color: #FFFFFF;
  --upv-lessons-checklist-background: #424A50;
  --upv-lessons-checklist-color: #FFFFFF;
  --upv-lessons-checklist-input-background: #3F4444;
  --upv-lessons-checklist-input-color: #FFFFFF;
  --upv-lessons-student-content-background: #424A50;
  --upv-lessons-student-content-color: #FFFFFF;
  --upv-lessons-student-content-input-background: #3F4444;
  --upv-lessons-student-content-input-color: #FFFFFF;
}

/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-display: block;
  font-family: bootstrap-icons;
  src: url("fonts/bootstrap-icons.woff2?1fa40e8900654d2863d011707b9fb6f2") format("woff2"),url("fonts/bootstrap-icons.woff?1fa40e8900654d2863d011707b9fb6f2") format("woff")
}

/* end fonts */

/* general */

.column {
  font-family: "Inter", sans-serif;
  font-size: 16.0px;
  border: 0px solid white !important;
}

.column .right-col {
  padding-left: 0;
}

.column .rowdescription {
  margin: 15px 0px 0px 30px;
}

/* end general */

/* heading */

.sectionHeader,
.sectionHeader:hover {
	background-color: var(--upv-lessons-section-background);
  font-family: "Poppins", sans-serif;
	font-weight: 700;
  border-radius: 0px !important;
  padding: 40px;
  color: var(--upv-lessons-section-color);
}

.sectionHeader .collapseIcon {
	padding-right: 20px;
}

/* end heading */

/* sub-page */

.pageType .itemlink span {
  align-items: center;
  background: var(--upv-lessons-subpage-background) !important;
  display: flex;
  padding: 20px 30px;
  width: auto;
  margin: 0 auto;
  text-decoration: none !important;
  color: var(--upv-lessons-subpage-color) !important;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  /* outline: 0px dashed var(--sakai-background-color-1);
  outline-offset: 0px; */
  transition: all 0.15s ease-in-out;
  border-radius: 0px;
}

.pageType .itemlink span:hover,
.pageType .itemlink span:active {
  color: var(--upv-lessons-subpage-color) !important;
  border: none;
  /* outline: 3px dashed var(--sakai-text-color-1);
  outline-offset: 2px; */
  border-radius: 0px;
  padding: 30px 30px;
}

.pageType .itemlink span::before {
  content: "\F194";
  color: var(--upv-lessons-subpage-color) !important;
  font-family: "bootstrap-icons";
  display: inline-block;
  margin-right: 10px;
  font-size: 16px;
}

.pageType .contentCol .usebutton {
  align-items: center;
  background: var(--upv-lessons-subpage-background) !important;
  display: inline-flex;
  padding: 15px 30px;
  width: auto;
  margin: 0 auto;
  text-decoration: none !important;
  color: var(--upv-lessons-subpage-color) !important;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  /* outline: 0px dashed var(--sakai-background-color-1);
  outline-offset: 0px; */
  transition: all 0.15s ease-in-out;
  border-radius: 100px;
}

.pageType .contentCol .usebutton:hover,
.pageType .contentCol .usebutton:active {
  color: var(--upv-lessons-subpage-color) !important;
  background: var(--upv-lessons-subpage-hover-background) !important;
  border: none;
  /* outline: 3px dashed var(--sakai-text-color-1);
  outline-offset: 2px; */
  border-radius: 100px;
  padding: 15px 30px;
}

.pageType .contentCol .usebutton::before {
  content: "\F194";
  color: var(--upv-lessons-subpage-color) !important;
  font-family: "bootstrap-icons";
  display: inline-block;
  margin-right: 10px;
  font-size: 16px;
}

.listType .statusCol {
  width: 0px;
}

/* end sub-page */

/* tool content */

.listType .link-div .fa-item-text {
  display: none;
  vertical-align: text-top;
}

.assessmentType .itemlink {
  color: var(--upv-lessons-assessment-color);
}
/* .resourceType .itemlink {
  color: var(--upv-lessons-resource-color);
} */
.forumType .itemlink {
  color: var(--upv-lessons-forum-color);
}
.assignmentType .itemlink {
  color: var(--upv-lessons-assignment-color);
}

.assessmentType .itemlink,
/* .resourceType .itemlink, */
.forumType .itemlink,
.assignmentType .itemlink {
  position: static;
  margin: auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
}

.assessmentType .itemlink::before {
  background: var(--upv-lessons-assessment-background);
  color: var(--upv-lessons-assessment-color);
}
/* .resourceType .itemlink::before {
  background: var(--upv-lessons-resource-background);
  color: var(--upv-lessons-resource-color);
} */
.forumType .itemlink::before {
  background: var(--upv-lessons-forum-background);
  color: var(--upv-lessons-forum-color);
}
.assignmentType .itemlink::before {
  background: var(--upv-lessons-assignment-background);
  color: var(--upv-lessons-assignment-color);
}

.assessmentType .itemlink::before,
/* .resourceType .itemlink::before, */
.forumType .itemlink::before,
.assignmentType .itemlink::before {
  position: absolute;
  top: -6px;
  display: grid;
  width: 56px;
  height: 56px;
  transition: all 0.3s ease;
  justify-content: right;
  align-content: center;
  padding: 20px;
  font-size: 20px;
}

.assessmentType .itemlink:hover:before {
  color: var(--upv-lessons-assessment-background)
}
/* .resourceType .itemlink:hover:before {
  color: var(--upv-lessons-resource-background)
} */
.forumType .itemlink:hover:before {
  color: var(--upv-lessons-forum-background)
}
.assignmentType .itemlink:hover:before {
  color: var(--upv-lessons-assignment-background)
}

.assessmentType .itemlink:hover:before,
/* .resourceType .itemlink:hover:before, */
.forumType .itemlink:hover:before,
.assignmentType .itemlink:hover:before {
  width: calc(100% - 25px);
}

.assessmentType .itemlink span {
  color: var(--upv-lessons-assessment-color);
}
/* .resourceType .itemlink span {
  color: var(--upv-lessons-resource-color);
} */
.forumType .itemlink span {
  color: var(--upv-lessons-forum-color);
}
.assignmentType .itemlink span {
  color: var(--upv-lessons-assignment-color);
}

.assessmentType .itemlink span,
/* .resourceType .itemlink span, */
.forumType .itemlink span,
.assignmentType .itemlink span {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 20px;
}

.assessmentType .item-group-titles,
/* .resourceType .item-group-titles, */
.forumType .item-group-titles,
.assignmentType .item-group-titles {
  position: relative;
  line-height: 18px;
  text-transform: uppercase;
  padding-left: 0px;
  display: block;
  text-align: end;
  padding-top: 10px;
}

.assessmentType .itemlink::before {
  content: "\F271";
  font-family: bootstrap-icons;
}

/*
.resourceType .itemlink::before {
  content: "\F3D8";
  font-family: bootstrap-icons;
}
*/

.forumType .itemlink::before {
  content: "\F264";
  font-family: bootstrap-icons;
}

.assignmentType .itemlink::before {
  content: "\F444";
  font-family: bootstrap-icons;
}

.resourceType .itemlink {
  align-items: center;
  background: var(--upv-lessons-resource-background) !important;
  display: inline-flex;
  padding: 5px 20px;
  width: auto;
  margin: 0 auto;
  text-decoration: none !important;
  color: var(--upv-lessons-resource-color) !important;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  cursor: pointer;
  border: none;
  /* outline: 0px dashed var(--sakai-background-color-1);
  outline-offset: 0px; */
  transition: all 0.15s ease-in-out;
  border-radius: 100px;
}

.resourceType .itemlink::before {
  display: none;
}

.resourceType .itemlink:hover,
.resourceType .itemlink:active {
  color: var(--upv-lessons-resource-color) !important;
  background: var(--upv-lessons-resource-hover-background) !important;
  border: none;
  /* outline: 3px dashed var(--sakai-text-color-1);
  outline-offset: 2px; */
  border-radius: 100px;
  padding: 5px 20px;
}

.questionDiv .contentCol {
  background-color: var(--upv-lessons-question-background) !important;
  color: var(--upv-lessons-question-color) !important;

  & input[type="radio"] {
    margin-bottom: 2px;
  }

  .question-submit {
    background: var(--upv-lessons-question-input-background) !important;
    padding: 15px 25px !important;
    text-decoration: none !important;
    color: var(--upv-lessons-question-input-color) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    cursor: pointer !important;
    border: solid 1px var(--upv-lessons-question-input-color) !important;
    /* border-radius: 0px !important; */
    margin-top: 1rem !important;
  }
}
.checklistDiv {
  background-color: var(--upv-lessons-checklist-background) !important;
  color: var(--upv-lessons-checklist-color) !important;

  & input[type="checkbox"] {
    margin-bottom: 2px;
  }
}
.studentContentTable {
  background-color: var(--upv-lessons-student-content-background) !important;
  color: var(--upv-lessons-student-content-color) !important;

  .studentContentTitle {
    padding-left: 8px;
    padding-bottom: 8px;
    margin: 0px !important;
  }

  .studentRow .studentContentTitle {
    padding-left: 0px !important;
  }

  .studentLink {
    color: var(--upv-lessons-student-content-color) !important;
    text-decoration: none !important;
    &:hover,
    &:active {
      color: var(--upv-lessons-student-content-color) !important;
      text-decoration: underline !important;
    }
  }

  .addStudentContent {
    background: var(--upv-lessons-question-input-background) !important;
    padding: 15px 25px !important;
    text-decoration: none !important;
    color: var(--upv-lessons-question-input-color) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    cursor: pointer !important;
    border: solid 1px var(--upv-lessons-question-input-color) !important;
    /* border-radius: 0px !important; */
    margin-top: 1rem !important;
  }
}

/* .questionDiv .contentCol,
.checklistDiv,
.studentContentTable {
  border-radius: 0px;
  width: 100%;
  max-width: none;
} */

/* end tool content */

/* links */

.column a[href] {
  text-decoration: none;
}

.column a[href]:hover {
  text-decoration: none;
}

.textbox a {
  text-decoration: underline !important;
  color: var(--sakai-text-color-1) !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.textbox a:hover {
  text-decoration: underline;
  color: var(--sakai-primary-color-1) !important;
}

.textbox a:active {
  text-decoration: underline;
  color: var(--sakai-primary-color-1) !important;
}

.column a img:hover {
  border: none;
  outline: 0px dashed var(--sakai-background-color-1);
  outline-offset: 0px;
  transition: all 0.15s ease-in-out;
}

.column a img:hover {
  border: none;
  outline: 3px dashed var(--sakai-text-color-1);
  outline-offset: 2px;
}

/* end links */
