body, .nav{
  background: url('../assets/images/_bg_cluster.jpg');
  background-repeat: repeat;
}

a, a:hover, a:focus, a:active {
  outline: none;
  text-decoration: none;
}

.ellipsis{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.no-border {
  border-radius: 0px !important;
}

.border{
  border-color: #f097ba;
  border-width: 2px;
  border-style: solid;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.absolute.center {
  top: 50%;
  left: 50%;
}

.absolute.left {
  top: 0;
  left: 0;
}

.word-break {
  word-break: break-all;
}

.overlay {
  background: rgba(31, 31, 31, .4);
}

.content {
  padding-top: 80px;
  /* padding-bottom: 120px; */
}

.content-inner {
  overflow-y: scroll;
  height: 100%;
}

.fit-none{
  object-fit: none;
}

.fit-cover{
  object-fit: cover;
}

.w-100 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-70 {
  width: 70% !important;
}

.w-60 {
  width: 60%;
}

.w-50 {
  width: 50%;
}

.w-40 {
  width: 40%;
}

.w-33 {
  width: 33.333333333333%;
}

.w-b-33 {
  flex-basis: 33%;
}

.w-30 {
  width: 30% !important;
}

.w-25 {
  width: 25%;
}

.h-100 {
  height: 100%;
}

.h-80 {
  height: 80%;
}

.h-50 {
  height: 50%;
}

.h-100-vh {
  height: 100vh;
}

.h-80-vh {
  height: 80vh;
}

.h-50-vh {
  height: 50vh;
}

.h-100-p {
  height: 100px;
}

.h-max-600-p {
  max-height: 600px;
}

.h-max-500-p {
  max-height: 500px;
}

.h-max-50 {
  max-height: 50%;
}

.h-max-70 {
  max-height: 70%;
}

.z-999 {
  z-index: 999;
}

.z-10 {
  z-index: 10;
}

.pointer {
  cursor: pointer;
}

.y-scroll {
  overflow-y: scroll;
}

.x-scroll {
  overflow-x: scroll;
}

.y-hidden {
  overflow-y: hidden;
}

.bad-input {
  color: #a94442 !important;
  position: relative !important;
  left: 0 !important;
  -moz-animation: .7s 1 shake linear !important;
  -webkit-animation: .7s 1 shake linear !important;
}

/* CLASSIC ELEMENT */

.classic-container {
  background-color: #f097ba;
  border-radius: 10px;
  width: 70%;
}

.classic-container-btn {
  width: 70%;
  margin: 0 auto;
}

.button-cutter {
  padding: 5px 15px;
  border-radius: 5px;
  color: #000;
  background: #fff;
  cursor: pointer;
  opacity: .5;
}

.button-cutter:hover {
  opacity: 1;
}

.button {
  padding: 10px 20px;
  border-radius: 5px;
  border: solid 2px #f097ba;
  color: #f097ba;
  cursor: pointer;
  opacity: 1.0;
}

.button.white {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

.button.back {
  border: none;
  color: white;
  background-color: #D8D8D8;
}

.button:not([disabled]):not(.back):hover {
  background-color: #f097ba !important;
  color: #FFF !important;
}

[disabled], .button-secondary {
  opacity: .65;
  cursor: not-allowed;
}

.button-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  border: solid 2px #FFF;
  color: #FFF;
  cursor: pointer;
  opacity: 1.0;
}

.button-secondary:not([disabled]):not(.back):hover {
  background-color: #FFF !important;
  color: #f097ba !important;
}

.button-third {
  padding: 10px 20px;
  border-radius: 5px;
  background: #f097ba;
  color: #FFF;
  cursor: pointer;
  opacity: 1.0;
}

p, span {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.c-element {
  padding: 10px;
  width: 50%;
}

.element {
  width: 80%;
  border: solid 3px #FFF;
  border-radius: 10px;
  display: inline-block;
  cursor: pointer;
}

.element:hover, .element.active {
  background-color: #FFF;
}

.element:hover>*, .element.active>* {
  color: #f097ba !important;
}

.element-inverse {
  width: 80%;
  border: solid 3px #f097ba;
  background-color: #FFF;
  border-radius: 10px;
  display: inline-block;
  cursor: pointer;
}

.element-inverse:hover, .element-inverse.active {
  background-color: #f097ba;
}

.element-inverse:hover>*, .element-inverse.active>* {
  color: #fff !important;
}

.element.left, .element-inverse.left {
  margin-right: 0;
  margin-left: auto;
}

.element.right, .element-inverse.right {
  margin-right: auto;
  margin-left: 0;
}

.element i.fas {
  font-size: 4em;
  color: #FFF;
}

.element-inverse i.fas {
  font-size: 4em;
  color: #f097ba;
}

.element img, .element svg {
  width: 4em;
  color: #FFF;
  display: block;
}

.element-inverse img, .element-inverse svg {
  width: 4em;
  color: #f097ba;
  display: block;
}

/* TOOLTIP MANDATORY */

.tooltip-mandatory {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .2s ease-in-out;
}

.tooltip-mandatory.active {
  transform: scaleY(1.0);
}

.tooltip-mandatory p {
  background-color: #f097ba !important;
  color: #FFF !important;
  padding: 10px 20px;
  border-radius: 5px;
}

.tooltip-mandatory p.reverse {
  color: #f097ba !important;
  background-color: #FFF !important;
  padding: 10px 20px;
  border-radius: 5px;
}

/* CLASSIC INPUT */

.c-input {
  border: solid 2px #FFF;
  border-radius: 5px;
}

.c-input-inverse {
  border: solid 2px #f097ba;
  border-radius: 5px;
}

input, textarea {
  /* resize: none; */
  background-color: transparent;
  border: none;
  display: block;
  width: 100%;
  padding: 6px 12px;
  /* font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px; */
}

input:active, textarea:active, input:focus, textarea:focus {
  box-shadow: none;
  outline: none;
}

input {
  height: 50px;
}

input::placeholder {
  color: #FFF;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #FFF;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #FFF;
}

input.red::placeholder {
  color: #f097ba;
}

input.red::-webkit-input-placeholder, textarea.red::-webkit-input-placeholder {
  color: #f097ba;
}

input.red:-moz-placeholder, textarea.red:-moz-placeholder {
  color: #f097ba;
}

/* input.red::placeholder {
  color: #f097ba;
}

input.red::-webkit-input-placeholder, textarea.red::-webkit-input-placeholder {
  color: #f097ba;
}

input.red:-moz-placeholder, textarea.red:-moz-placeholder {
  color: #f097ba;
} */

/* FLEX */

.flex {
  display: flex;
}

.flex.frow {
  flex-direction: row;
  margin: 0;
}

.flex.fcolumn {
  flex-direction: column;
}

.flex.wrap {
  flex-wrap: wrap;
}

.place-center {
  place-items: center;
}

.right {
  margin-right: 0;
  margin-left: auto;
}

.left {
  margin-left: 0;
  margin-right: auto;
}

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 1;
}

@media only screen and (max-width: 425px) {
  .classic-container {
    width: 80%;
  }
  .c-element {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 20px;
  }
  .element {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .classic-container {
    width: 100%;
    border-radius: 0px;
  }
}

/*CUSTOM CHECKBOX */

label.checkbox {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.checkbox {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.checkbox input {
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: solid 2px #FFF;
}

/* When the checkbox is checked, add a blue background */

.checkbox input~.checkmark {
  background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.checkbox input:checked~.checkmark:after {
  display: block;
}

.checkbox input[type=checkbox] {
  position: relative !important;
}

/* Style the checkmark/indicator */

.checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* PAGINATION */

nav .pagination ul.pagination {
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto Slab', Arial, sans-serif !important;
  cursor: pointer;
}

nav .pagination>li>span:focus, nav .pagination>li>span:hover, nav .pagination>li>span {
  z-index: 0;
  color: #2b332e;
  background-color: #fff;
  border-color: #ddd;
}

/* DOWN ARROW BOUNCE */

.fa-angle-double-down {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
  }
}

@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -o-transform: translateY(0);
  }
  40% {
    -o-transform: translateY(-30px);
  }
  60% {
    -o-transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}