.cargo {
  font-size: small;
}
.center-text {
  text-align: center;
}
.center-margin {
  margin: 0 auto;
}
.center-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.maincontainer {
  margin: 0 auto;
  position: relative;
  width: 250px;
  height: auto;
}

.thecard {
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
}

.flip {
  width: 100%;
  height: 350px;
  transform-style: preserve-3d;
  transition: all 0.4s ease;
}
.thecard:hover .theback {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.43);
}
.thefront {
  width: 100%;
  height: 300px;
  backface-visibility: hidden;
  background: #ffffff;
  color: rgb(0, 0, 0);
  border-radius: 20px 0 20px 0;
  transition: all 0.4s ease;
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.43);
  overflow: hidden;
}

.theback {
  width: 100%;
  height: 300px;
  backface-visibility: hidden;
  background: #ffffff;
  color: rgb(0, 0, 0);
  transition: all 0.4s ease;
  border-radius: 0 20px 0 20px;
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.43);
  transform: translateY(-100%) rotateY(180deg);
  overflow: hidden;
}

.textarea {
  width: 90%;
  margin: 10px auto;
}

.thecard .top {
  position: absolute;
  top: 0;
  text-align: center;
  background-color: #d32f2f;
  justify-items: center;
  vertical-align: middle;
  width: 100%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  margin: 0 auto;
  border-radius: 0 20px 0 20px;
  transform: translateY(-25px);
  color: #fff;
  transition: 0.4s all;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.43);
}

.top > h3 {
  font-size: 15px;
}

.avatar-container {
  width: 170px;
  margin: 40px auto 5px auto;
}

.avatar {
  max-width: 170px;
  border-radius: 50%;
  left: 50%;
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.43);
}

.name {
  text-align: center;
  font-size: 20px;
  padding: 5px 0;
}

.theback > a {
  bottom: 60px;
}

.card-link {
  position: relative;
  margin: 0;
  width: 30px;
  height: 30px;
}

.card-link > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-links {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.my-gradient {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  display: inline-block;
  /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(100%, rgba(255, 46, 46, 0.1))
  );
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 46, 46, 0.1) 100%
  );
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 46, 46, 0.1) 100%
  );
  /* Opera 11.10+ */
  /* IE10+ */
  background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(255, 255, 255, 0))
    ),
    to(rgba(255, 46, 46, 0.1));
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 46, 46, 0.1) 100%
  );
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000', GradientType=0);
  /* IE6-9 */
}
.radius-front {
  border-radius: 0 0 20px 0;
}
.radius-back {
  border-radius: 0 0 0 20px;
}

/* .theback {
  width: 100%;
  height: 350px;
  backface-visibility: hidden;
  background: #ffffff;
  color: rgb(0, 0, 0);
  transition: all 0.4s ease;
  border-radius: 0 20px 0 20px;
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.43);
  transform: translateY(-100%) rotateY(180deg);
  overflow: hidden;
} */

/* scrollbar */
.scrollbar {
  margin-left: 10px;
  float: left;
  height: 300px;
  width: 95%;
  background: #fff;
  overflow-y: scroll;
  margin-bottom: 25px;
}
.force-overflow {
  min-height: 345px;
}
.scrollbarv2 {
  margin-left: 2px;
  float: left;
  height: 150px;

  width: 98%;
  background: #fff;
  overflow-y: scroll;
  margin-bottom: 10px;
  padding: 5px 8px 0px 8px;
}
.force-overflowv2 {
  height: 165px;
}
.scrollcustom {
  right: 5px;
  left: 5px;
  bottom: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 4px, 4px;
  padding: 4px;

  width: 98%;
  height: auto;
  text-align: justify;
}
.scrollbar-primary::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #4285f4;
}

.scrollbar-primary {
  scrollbar-color: #4285f4 #f5f5f5;
}

.scrollbar-danger::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-danger::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-danger::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #ff3547;
}

.scrollbar-danger {
  scrollbar-color: #ff3547 #f5f5f5;
}

.scrollbar-warning::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-warning::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-warning::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #ff8800;
}

.scrollbar-warning {
  scrollbar-color: #ff8800 #f5f5f5;
}

.scrollbar-success::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-success::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-success::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #00c851;
}

.scrollbar-success {
  scrollbar-color: #00c851 #f5f5f5;
}

.scrollbar-info::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-info::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-info::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #33b5e5;
}

.scrollbar-info {
  scrollbar-color: #33b5e5 #f5f5f5;
}

.scrollbar-default::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-default::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-default::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #2bbbad;
}

.scrollbar-default {
  scrollbar-color: #2bbbad #f5f5f5;
}

.scrollbar-secondary::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #aa66cc;
}

.scrollbar-secondary {
  scrollbar-color: #aa66cc #f5f5f5;
}