/* ALL LOADERS */

.loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

/* LOADER 1 */

.loader-1:before,
.loader-1:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top-color: #3498db;
}

.loader-1:before {
  z-index: 100;
  animation: spin 1s infinite;
}

.loader-1:after {
  border: 10px solid #ccc;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* LOADER 2 */

.loader-2 span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
}

.loader-2 span:nth-child(1) {
  animation: bounce 1s ease-in-out infinite;
}

.loader-2 span:nth-child(2) {
  animation: bounce 1s ease-in-out 0.33s infinite;
}

.loader-2 span:nth-child(3) {
  animation: bounce 1s ease-in-out 0.66s infinite;
}

@keyframes bounce {

  0%,
  75%,
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  25% {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

/* LOADER 3 */

.loader-3:before,
.loader-3:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  background-color: #3498db;
  animation: squaremove 1s ease-in-out infinite;
}

.loader-3:after {
  bottom: 0;
  animation-delay: 0.5s;
}

@keyframes squaremove {

  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
    -ms-transform: translate(0, 0) rotate(0);
    -o-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0);
  }

  25% {
    -webkit-transform: translate(40px, 40px) rotate(45deg);
    -ms-transform: translate(40px, 40px) rotate(45deg);
    -o-transform: translate(40px, 40px) rotate(45deg);
    transform: translate(40px, 40px) rotate(45deg);
  }

  50% {
    -webkit-transform: translate(0px, 80px) rotate(0deg);
    -ms-transform: translate(0px, 80px) rotate(0deg);
    -o-transform: translate(0px, 80px) rotate(0deg);
    transform: translate(0px, 80px) rotate(0deg);
  }

  75% {
    -webkit-transform: translate(-40px, 40px) rotate(45deg);
    -ms-transform: translate(-40px, 40px) rotate(45deg);
    -o-transform: translate(-40px, 40px) rotate(45deg);
    transform: translate(-40px, 40px) rotate(45deg);
  }
}

/* LOADER 4 */

.loader-4 span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
  opacity: 0;
}

.loader-4 span:nth-child(1) {
  animation: opacitychange 1s ease-in-out infinite;
}

.loader-4 span:nth-child(2) {
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}

.loader-4 span:nth-child(3) {
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange {

  0%,
  100% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }
}

/* LOADER 5 */

.loader-5 span {
  display: block;
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 20px;
  height: 20px;
  background-color: #3498db;
}

.loader-5 span:nth-child(2) {
  animation: moveanimation1 1s ease-in-out infinite;
}

.loader-5 span:nth-child(3) {
  animation: moveanimation2 1s ease-in-out infinite;
}

.loader-5 span:nth-child(4) {
  animation: moveanimation3 1s ease-in-out infinite;
}

@keyframes moveanimation1 {

  0%,
  100% {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }

  75% {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px);
  }
}

@keyframes moveanimation2 {

  0%,
  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  75% {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
  }
}

@keyframes moveanimation3 {

  0%,
  100% {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

  75% {
    -webkit-transform: translate(30px, 30px);
    -ms-transform: translate(30px, 30px);
    -o-transform: translate(30px, 30px);
    transform: translate(30px, 30px);
  }
}

/* LOADER 6 */

.loader-6 {
  top: 40px;
  left: -2.5px;
}

.loader-6 span {
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #3498db;
}

.loader-6 span:nth-child(1) {
  animation: grow 1s ease-in-out infinite;
}

.loader-6 span:nth-child(2) {
  animation: grow 1s ease-in-out 0.15s infinite;
}

.loader-6 span:nth-child(3) {
  animation: grow 1s ease-in-out 0.30s infinite;
}

.loader-6 span:nth-child(4) {
  animation: grow 1s ease-in-out 0.45s infinite;
}

@keyframes grow {

  0%,
  100% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
  }

  50% {
    -webkit-transform: scaleY(1.8);
    -ms-transform: scaleY(1.8);
    -o-transform: scaleY(1.8);
    transform: scaleY(1.8);
  }
}

/* LOADER 7 */

.loader-7 {
  -webkit-perspective: 120px;
  -moz-perspective: 120px;
  -ms-perspective: 120px;
  perspective: 120px;
}

.loader-7:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: flip 1s infinite;
}

@keyframes flip {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(180deg) rotateX(180deg);
  }
}

/* LOADER 8 */

.loader-8:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 10px);
  left: 0px;
  background-color: #3498db;
  animation: rotatemove 1s infinite;
}

@keyframes rotatemove {
  0% {
    -webkit-transform: scale(1) translateX(0px);
    -ms-transform: scale(1) translateX(0px);
    -o-transform: scale(1) translateX(0px);
    transform: scale(1) translateX(0px);
  }

  100% {
    -webkit-transform: scale(2) translateX(45px);
    -ms-transform: scale(2) translateX(45px);
    -o-transform: scale(2) translateX(45px);
    transform: scale(2) translateX(45px);
  }
}

/* Insert Your Custom CSS Here */

/* don't display validation tick mark for group of checkboxes */
.checkbox-group .fa-check:before { content: ""; }

/* add some spacing between email and password input fields */
#login_form #email-input-wrapper { margin-bottom: 10px; }

/* add some padding to dropzone for gallery upload */
#dropzone_upload_gallery, #dropzone_upload_album_photo { padding: 30px; border: 3px dashed #ffffff; }

div.dz-drag-hover { border: 3px dashed #428bca !important;}

div.preview-container { margin-bottom: 10px; }

#photo_description { margin-top: 10px; }

#galleryphotos div, #albumphotos div { width: 200px; height:200px; display: inline-block; margin: 2px; }

#photo_gallery_modal .modal-footer, #album_photo_modal .modal-footer { padding: 5px; }

/* style for tagging students on photos */
#photo_gallery_modal .gallery-photo,  #album_photo_modal .album-photo{
  position: relative;
}
.taggable img {
  cursor: crosshair;
}
.photoTagger, .tag {
  position:absolute;
}
.faceBox, .box {
  border:solid 3px white;
  width:60px;
  height:60px;
  float:left;
}
.tagged .box {
  display: none;
}
.tagged:hover .box {
  display: block;
}
.tag.point .box {
  display: block;
}
.typeaheadWrapper {
  position: absolute;
  left: 50%;
  top: 100%;
}
.typeaheadContainer {
  position: relative;
  left: -50%;
  top: 4px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.typeaheadContainer:after, .typeaheadContainer:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.typeaheadContainer:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 5px;
  margin-left: -5px;
}
.typeaheadContainer:before {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 6px;
  margin-left: -6px;
}

.ui-autocomplete.ui-front {
  z-index: 1100;
}

.tagged-students img { width: 50px; }

table.table-smallwidth th {
  padding: 8px !important;
}

.nowrap {
  white-space: nowrap;
}

.fixed-width-text-display {
  white-space: nowrap;
    /*width: 100%;                   /* IE6 needs any width */
    overflow: hidden;              /* "overflow" value must be different from  visible"*/
    -o-text-overflow: ellipsis;    /* Opera < 11*/
    text-overflow:    ellipsis;
}

.african-phone-mask, .us-phone-mask { letter-spacing: 2px; }

#report_result { overflow: auto; }

/* animate loading icon */
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.completed { text-decoration: line-through; }

.content-list .list-wrapper>li.read { background: #F9F9F9 }
.content-list .list-wrapper>li.read:hover { background: #F5F5F5 }
.content-list .list-wrapper>li.read a { color: #5e656b }


/* Select 2 */
.select2-results li {
  padding: 5px !important;
  margin: 0 !important;
}
.select2-results li:hover {
  background-color: #F5F5F5;
  cursor: pointer;
}
.select2-results a {
  color: #666;
  padding: 0 !important;
  margin: 0 !important;
}
.select2-results a {
  clear: both;
}
.select2-results .menu-icon {
  display: block;
  float: left;
  text-align: center;
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 12px;
}
.select2-results .menu-text {
  display: block;
  margin-left: 55px;
  text-transform: none;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.select2-results .menu-info {
  display: block;
  font-size: 11.4px;
  font-style: italic;
  color: #939ba2;
  text-transform: capitalize;
}

.selected-student {
    margin-right: 5px;
    float: left;
}

.selected-student .menu-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 5px;
}

.btn.second-line {
  margin-top: 1px;
}

table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #FFF;
}

.report-fields-container {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

.report-fields-container>div {
  margin-bottom: 20px;
}

.delete_sponsor_dashboard_faq_form button {
  padding: 0;
  background-color: transparent;
}

.delete_sponsor_dashboard_faq_form button:hover {
  background-color: inherit;
}


/* CSS code for displaying albums */
div.album {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.album:hover {
    border: 1px solid #777;
}

div.album img {
    width: 100%;
    height: auto;
}

div.album-desc {
    padding: 15px;
    text-align: center;
}

.album-photo, .gallery-photo {
    display: inline-block;
    overflow: hidden;
}

.album-photo img:hover, .gallery-photo img:hover {
    opacity: 0.8
}
.album-photo:hover a, .gallery-photo:hover a {
    opacity: 1;
    z-index: 500;
    color: inherit;
}
.photo-slide-button {
    display: block;
    position: absolute;
    /*top: -100%;*/
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: inherit;
    text-shadow: 0px 2px 4px #ffffff;
}
.photo-slide-button:hover {
  color: inherit;
}

#previous_photo {
  text-align: left;
  top: 40%;
  right: 90%;
  bottom: 40%;
}
#next_photo {
  text-align: right;
  top: 40%;
  left: 90%;
  bottom: 40%;
}

.min-height-124 {
  min-height: 124px;
}

.min-height-148 {
  min-height: 148px;
}