.form-group {
    margin: 10px 10px;
}



 span{
 background:#FFF;
 width: auto;
 display: block;
}





.message {
   padding: 3px;
   width: 50%;
}

.message > * {

   /* display: inline-block; */

}

.message .title {
    font-weight: 700;
    font-size: 1.1em;
}

.success.message {
    background: #ffffff;
    background-color: transparent;

}

.error.message {
    background: #f9cece;
    border: 5px solid #7d2929;

}

.error.message .title {
    color: #863030;
}





* {
  box-sizing: border-box;
  background: transparent;

}


/* Style the counter cards */
.card {

  padding: 10px;
  text-align: center;
  background-color:#ffffff;
  background: white;
  color: #ffffff;
 letter-spacing: 0px;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  padding: 10px;
  text-align: center;
  background-color: #f1f1f1;

}


/* Style the counter cards */
.studentCard {

  padding: 3px;
  text-align: center;
  background-color:#ffffff;
  background: white;
  color: #000;
  height: 200px;
  width: 160px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: 5px;
  z-index: 1;
  min-width: 180px;
  font-size: 12px;
  letter-spacing: 0px;

  text-align: center;
  background-color: #f1f1f1;

}

.cardImage {
  border: 0;
  height: 70px;
  width: 77px;
  background-color:transparent;
  display: inline-block;
  top:0%;
  margin-top:-10px;
  margin-bottom:0px;
}

.cardHr {
  margin:2px;
  /* margin-bottom: 1px; */
}



.teacherCard {

  padding: 5px;
  text-align: center;
  /* background-color:#ffffff; */
  /* background: white; */
  color: #747373;
  border: 5px;
  border-color: #ffffff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: 5px;
   width: 15rem;
   height: 18rem;


  text-align: center;
  background-color: #f1f1f1;

}


.teacherCard20 {

  padding: 5px;
  text-align: center;
  /* background-color:#ffffff; */
  /* background: white; */
  color: #747373;
  border: 5px;
  border-color: #ffffff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: 5px;
   width: 15rem;
   height: 20rem;


  text-align: center;
  background-color: #f1f1f1;

}


.teacherTextCard {
  /* box-shadow: 0 0 0 0 transparent; */

    padding: 5px;
    text-align: center;
    /* background-color:#ffffff; */
    /* background: white; */
    color: #747373;
    border: 5px;
    border-color: #ffffff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    margin: 5px;
     width: 15rem;
     height: 8rem;


    text-align: center;
    background-color: #f1f1f1;
}

.cardNotButton {

    padding: 5px;
    text-align: center;
    /* background-color:#ffffff; */
    /* background: white; */
    color: #747373;
    border: 5px;
    border-color: #ffffff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    margin: 5px;
     width: 15rem;
     height: 18rem;


    text-align: center;
    background-color: #f1f1f1;
}




.teacherCardImage {
  border: 0;
  height: 80px;
  width: 88px;
  background-color:transparent;
    display: inline-block;
    top:10%;
    margin-top:10px;
    margin-bottom:10px;
    object-fit: cover; /* Prevents stretching */
}


.audioCard {

  padding: 10px;
  text-align: center;
  background-color:#f1f1f1;
  background: white;
  color: #747373;
  border: 5px;
  border-color: #ffffff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: 10px;
  height: 240px;
  width: 36rem;
  text-align: center;
}


.videoCard {
  padding: 3px;
  text-align: center;
  height: 250px;
  width: 220px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: 6px;
  z-index: 1;
  font-size: 12px;
  background-color: #f1f1f1;
}






/* Float four columns side by side */
.column {

  float: left;
  background-color: #ffffff;
  background: white;
  padding: 10px;
  width: 50px;
    display: table;
    margin-bottom: 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}







.imgBack {
              height: 50px;
              width:50px;
              padding: 5px;
              }


/* Responsive columns */
@media screen and (max-width: 200px) {
  .column {
    width: 25%;
    height: 25%;
    display: block;
        margin-top: 20px;

    }

}
    /* Responsive columns */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        height: 100%;
        display: block;
            margin-top: 20px;

        }


}