.ti {
  font-size: 2rem;
}

.user-icon-custom {

  border-radius: 50%;
  width: 30%;
}

.color-blue {
  color: #3347c0;
}

.underline {
  text-decoration: underline !important;
}

.btn-primary {
  color: #2f41b1 !important;
  background-color: #a0ceff !important;
  border-color: #a0ceff !important;
}

.btn-primary:hover {
  color: #2f41b1 !important;
  background-color: #a0ceff !important;
  border-color: #2f41b1 !important;
}

.bg-label-primary {
  background-color: #a0ceff !important;
  color: #2f42b4 !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus {
  background-color: #2f42b3
}

.nav-pills .nav-link:not(.active):hover {
  color: #2f42b3;
  background-color: #a0ceff;
}

.u-grey-80 {
  background-color: #2f42b3;
}

.lesson-item.active {
  background: aliceblue;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #3347c0;
  background-color: aliceblue;
}

.user-icon-custom {

  border-radius: 50%;
  width: 30%;
}

.header-shadow {
  box-shadow: 10px 6px 30px 3px rgba(0, 0, 0, 0.4);
}

.color-blue {
  color: #3347c0;
}

.underline {
  text-decoration: underline !important;
}

.btn-primary {
  color: #2f41b1 !important;
  background-color: #a0ceff !important;
  border-color: #a0ceff !important;
}

.btn-primary:hover {
  color: #2f41b1 !important;
  background-color: #a0ceff !important;
  border-color: #2f41b1 !important;
}

.bg-label-primary {
  background-color: #a0ceff !important;
  color: #2f42b4 !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus {
  background-color: #2f42b3
}

.nav-pills .nav-link:not(.active):hover {
  color: #2f42b3;
  background-color: #a0ceff;
}


.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show.dropdown-toggle,
.show>.btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #2f42b3 !important;
  border-color: #2f42b3 !important;
}

ul:not(.u-unstyled) {
  margin-top: 42px;
}
.m-7-10{
  margin: 7% 10%;
}
.w-px-115{
  width: 115px !important;
}

.h-px-115{
  height: 115px !important;
}
.font-medium{
  font-size: medium;
}
.font-small{
  font-size: small;
}

.dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active {
  background-color: #3347c0;
  color: #fff !important;
}




.fw-400{
  font-weight: 400;
}

.subject-button{
  margin: 11px 11px;
  font-size: x-large;
  width: 155px;
  justify-content: space-between;
}


.title-large{
  color: #3347c0;
  font-size: x-large;
}

.footer{
  position: relative;
}

h1.u-title
{
font-weight: 400;
font-size: 6rem;
line-height: 1.1;
margin-top: 20px;
margin-bottom: 20px;
}
h2.u-subtitle
{
font-weight: 400;
font-size: 3rem;
line-height: 1.1;
margin-top: 20px;
margin-bottom: 20px;
}
h1:not(.u-title)
{
font-weight: 400;
font-size: 4.5rem;
line-height: 1.1;
/* margin-top: 20px; */
margin-bottom: 20px;
}
h2:not(.u-subtitle)
{
font-weight: 400;
font-size: 3rem;
/* line-height: 1.1; */
/* margin-top: 20px; */
margin-bottom: 20px;
}
h3
{
font-weight: 400;
font-size: 2.25rem;
line-height: 1.2;
margin-top: 20px;
margin-bottom: 20px;
}
h4
{
font-weight: 400;
font-size: 1.5rem;
line-height: 1.2;
/* margin-top: 20px; */
margin-bottom: 20px;
}
h5
{
font-weight: 400;
font-size: 1.25rem;
line-height: 1.2;
/* margin-top: 20px; */
margin-bottom: 20px;
}
h6
{
font-weight: 400;
font-size: 1.125rem;
line-height: 1.2;
/* margin-top: 20px; */
margin-bottom: 20px;
}
.icon {
  width: 26px;
  height: 26px;
  background-color: #2f42b3;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: unset;
  border-radius: 50%;
}
.ti{
  font-size: 1.1rem;
}
.lessons-menu{
  max-height: 569px;
  overflow: auto;
  border-radius: 5px;
}


.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  clip-path: polygon(
    100% 100%,0 100%,999px calc(100% - 999px),calc(100% - 999px) calc(100% - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: #BD1550; /* the main color  */
}