.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}

.div-crop-img {
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 25px;
	
}

/* The Attendance class */
.attendance {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.attendance input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.attendance:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.attendance input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.attendance input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.attendance .checkmark:after {
  left: 9px;
  top: 3px;
  width: 5px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.select-img-thumbnail ul {
  list-style-type: none;
}

.select-img-thumbnail li {
  display: inline-block;
}

.select-img-thumbnail input[type="radio"][id^="myCheckbox"] {
  display: none;
}

.select-img-thumbnail label {
  border: 1px solid #fff;
  padding: 5px;
  display: block;
  position: relative;
  margin: 5px;
  cursor: pointer;
}

.select-img-thumbnail label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

.select-img-thumbnail label img {
  height: 75px;
  width: 75px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

.select-img-thumbnail :checked + label {
  border-color: #ddd;
}

.select-img-thumbnail :checked + label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

.select-img-thumbnail :checked + label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}


.divider-hr {                                                           /* minor cosmetics */
        display: table;
        font-size: 20px;
        text-align: center;
        width: 100%;                                            /* divider width */
        margin: 20px auto;                                      /* spacing above/below */
}
.divider-hr span { display: table-cell; position: relative; }
.divider-hr span:first-child, .divider-hr span:last-child {
        width: 50%;
        top: 11px;                                                      /* adjust vertical align */
        -moz-background-size: 100% 2px;         /* line width */
        background-size: 100% 2px;                      /* line width */
        background-position: 0 0, 0 100%;
        background-repeat: no-repeat;
}
.divider-hr span:first-child {                          /* color changes in here */
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
        background-image: -webkit-linear-gradient(180deg, transparent, #000);
        background-image: -moz-linear-gradient(180deg, transparent, #000);
        background-image: -o-linear-gradient(180deg, transparent, #000);
        background-image: linear-gradient(90deg, transparent, #000);
}
.divider-hr span:nth-child(2) {
        color: #000; padding: 0px 5px; width: auto; white-space: nowrap;
}
.divider-hr span:last-child {                           /* color changes in here */
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
        background-image: -webkit-linear-gradient(180deg, #000, transparent);
        background-image: -moz-linear-gradient(180deg, #000, transparent);
        background-image: -o-linear-gradient(180deg, #000, transparent);
        background-image: linear-gradient(90deg, #000, transparent);
}

.div-sticky {
        position: -webkit-sticky;
        position: sticky;
        height:40px;
        z-index: 9999;
}

.button-fixed {
        position:fixed;
        padding:0.5em 1.5em;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        transition: all 0.2s ease-in 0s;
        z-index: 9999;
        cursor:pointer;
        border-radius: 2em;
}

.button-fixed:disabled { background:#c8cbcf;}

.left-top {
        left:1em;
        top:1em;
}

.right-bottom {
        right:1em;
        bottom:1em;
}

.left-bottom {
        left:1em;
        bottom:1em;
}

.button-success {
        border-color:#11ba49;
        color:#11ba49;
}

.button-warning {
        border-color:#eb9d36;
        color:#eb9d36;
}

.button-danger {
        border-color:#f01411;
        color:#f01411;
}

.remove-side-margin {
        margin-left:0px;
        margin-right:0px;
}
.pagination-header {height:45px; overflow-x:auto; overflow-y:hidden; margin:5px 5px 0px 5px;}
.pagination-header a {display: inline-block; color: #afafb3;font-weight: bold; font-size:16px; text-decoration: none; padding:10px 10px; transition: background-color .3s;}
.pagination-header a.done {color: black;}
.pagination-header a.correct {color: green;}
.pagination-header a.wrong {color: red;}
.pagination-header a.active {border-bottom: 3px solid black;}