/* ---------------------------------------------------
COLORS
----------------------------------------------------- */

.color-light-blue {
  color: #EEF1F5 !important;
}

.color-blue {
  color: #3A59A8 !important;
}

.color-dark-blue {
  color: #000051 !important;
}

.color-light-gray {
  color: #e9eaed !important;
  /* color: #D0D6DF !important; */
}

.color-gray {
  color: #AEB4BC !important;
}

.color-dark-gray {
  color: #818891 !important;
}

.color-light-green {
  color: #E5FCF1 !important;
}

.color-green {
  color: #25D366 !important;
}

.color-light-yellow {
  color: #FCF5EB !important;
}

.color-yellow {
  color: #F2A60F !important;
}

.color-light-red {
  color: #FAEAEA !important;
}

.color-red {
  color: #DC3C3C !important;
}

.color-light-purple {
  color: #F5EBFE !important;
}

.color-purple {
  color: #9425D3 !important;
}

.color-light-emerald {
  color: #E3F9F7 !important;
}

.color-emerald {
  color: #25D3BB !important;
}

/* ---------------------------------------------------
BACKGROUND
----------------------------------------------------- */

.bg-gradient-blue {
  background: #3A59A8 linear-gradient(129deg, #557EB4 0%, #192564 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-green {
  background: #25D366 linear-gradient(129deg, #25D366 0%, #25D39E 100%) 0% 0% no-repeat padding-box;
}

.bg-light-blue {
  background: #EEF1F5 !important;
}

.bg-blue {
  background: #3A59A8 !important;
}

.bg-dark-blue {
  background: #000051 !important;
}

.bg-light-gray {
  background: #e9eaed !important;
  /* background: #D0D6DF !important; */
}

.bg-gray {
  background: #AEB4BC !important;
}

.bg-dark-gray {
  background: #818891 !important;
}

.bg-light-green {
  background: #E5FCF1 !important;
}

.bg-green {
  background: #25D366 !important;
}

.bg-light-yellow {
  background: #FCF5EB !important;
}

.bg-yellow {
  background: #F2A60F !important;
}

.bg-light-red {
  background: #FAEAEA !important;
}

.bg-red {
  background: #DC3C3C !important;
}

.bg-light-purple {
  background: #F5EBFE !important;
}

.bg-purple {
  background: #9425D3 !important;
}

.bg-light-emerald {
  background: #E3F9F7 !important;
}

.bg-emerald {
  background: #25D3BB !important;
}

/* ---------------------------------------------------
HOVER COLORS
----------------------------------------------------- */
.hover-light-blue:hover, .hover-light-blue.force-hover {
  color: #EEF1F5 !important;
}

.hover-blue:hover, .hover-blue.force-hover {
  color: #3A59A8 !important;
}

.hover-dark-blue:hover, .hover-dark-blue.force-hover {
  color: #000051 !important;
}

.hover-light-gray:hover, .hover-light-gray.force-hover {
  color: #e9eaed !important;
  /* color: #D0D6DF !important; */
}

.hover-gray:hover, .hover-gray.force-hover {
  color: #AEB4BC !important;
}

.hover-dark-gray:hover, .hover-dark-gray.force-hover {
  color: #818891 !important;
}

.hover-light-green:hover, .hover-light-green.force-hover {
  color: #E5FCF1 !important;
}

.hover-green:hover, .hover-green.force-hover {
  color: #25D366 !important;
}

.hover-light-yellow:hover, .hover-light-yellow.force-hover {
  color: #FCF5EB !important;
}

.hover-yellow:hover, .hover-yellow.force-hover {
  color: #F2A60F !important;
}

.hover-light-red:hover, .hover-light-red.force-hover {
  color: #FAEAEA !important;
}

.hover-red:hover, .hover-red.force-hover {
  color: #DC3C3C !important;
}

.hover-light-purple:hover, .hover-light-purple.force-hover {
  color: #F5EBFE !important;
}

.hover-purple:hover, .hover-purple.force-hover {
  color: #9425D3 !important;
}

.hover-light-emerald:hover, .hover-light-emerald.force-hover {
  color: #E3F9F7 !important;
}

.hover-emerald:hover, .hover-emerald.force-hover {
  color: #25D3BB !important;
}

.bg-hover-light-blue:hover, .bg-hover-light-blue.force-hover {
  background-color: #EEF1F5 !important;
}

.bg-hover-blue:hover, .bg-hover-blue.force-hover {
  background-color: #3A59A8 !important;
}

.bg-hover-dark-blue:hover, .bg-hover-dark-blue.force-hover {
  background-color: #000051 !important;
}

.bg-hover-light-gray:hover, .bg-hover-light-gray.force-hover {
  background-color: #e9eaed !important;
  /* background-color: #D0D6DF !important; */
}

.bg-hover-gray:hover, .bg-hover-gray.force-hover {
  background-color: #AEB4BC !important;
}

.bg-hover-dark-gray:hover, .bg-hover-dark-gray.force-hover {
  background-color: #818891 !important;
}

.bg-hover-light-green:hover, .bg-hover-light-green.force-hover {
  background-color: #E5FCF1 !important;
}

.bg-hover-green:hover, .bg-hover-green.force-hover {
  background-color: #25D366 !important;
}

.bg-hover-light-yellow:hover, .bg-hover-light-yellow.force-hover {
  background-color: #FCF5EB !important;
}

.bg-hover-yellow:hover, .bg-hover-yellow.force-hover {
  background-color: #F2A60F !important;
}

.bg-hover-light-red:hover, .bg-hover-light-red.force-hover {
  background-color: #FAEAEA !important;
}

.bg-hover-red:hover, .bg-hover-red.force-hover {
  background-color: #DC3C3C !important;
}

.bg-hover-light-purple:hover, .bg-hover-light-purple.force-hover {
  background-color: #F5EBFE !important;
}

.bg-hover-purple:hover, .bg-hover-purple.force-hover {
  background-color: #9425D3 !important;
}

.bg-hover-light-emerald:hover, .bg-hover-light-emerald.force-hover {
  background-color: #E3F9F7 !important;
}

.bg-hover-emerald:hover, .bg-hover-emerald.force-hover {
  background-color: #25D3BB !important;
}

/* ---------------------------------------------------
BUTTONS
----------------------------------------------------- */

.btn {
  font-size: small;
  border-radius: 8px;
  opacity: 1;
  font-family: "GothamRounded-Medium";
}

.btn:focus {
  box-shadow: none !important;
}

.btn.btn-hover:hover {
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(58, 89, 168, 0.3);
  -moz-box-shadow: 0px 10px 20px 0px rgba(58, 89, 168, 0.3);
  box-shadow: 0px 10px 20px 0px rgba(58, 89, 168, 0.3);
}

.btn.disabled {
  opacity: .5;
  pointer-events: none;
}

.btn-gradient-blue {
  background: #3A59A8 linear-gradient(129deg, #3A59A8 0%, #192564 100%) 0% 0% no-repeat padding-box;
  color: white!important;
}

.btn-gradient-blue:hover {
  background: #3A59A8;
  color: white!important;
}

.btn-gradient-green {
  background: #25D366 linear-gradient(129deg, #25D366 0%, #25D39E 100%) 0% 0% no-repeat padding-box;
  color: white!important;
}

.btn-gradient-green:hover {
  background: #25D366;
  color: white!important;
}

.btn-light-blue {
  background: #EEF1F5;
  color: #3A59A8!important;
}

.btn-light-blue:hover {
  background: #3A59A8;
  color: white!important;
}

.btn-blue {
  background: #3A59A8;
  color: white!important;
}

.btn-gray {
  background: #AEB4BC;
  color: white!important;
}

.btn-light-green {
  background: #E5FCF1;
  color: #25D366!important;
}

.btn-light-green:hover {
  background: #25D366;
  color: white!important;
}

.btn-green {
  background: #25D366;
  color: white!important;
}

.btn-light-yellow {
  background: #FCF5EB;
  color: #F6DF14!important;
}

.btn-light-yellow:hover {
  background: #F6DF14;
  color: white!important;
}

.btn-yellow {
  background: #F6DF14;
  color: white!important;
}

.btn-light-red {
  background: #FAEAEA;
  color: #DC3C3C!important;
}

.btn-light-red:hover {
  background: #DC3C3C;
  color: white!important;
}

.btn-red {
  background: #DC3C3C;
  color: white!important;
}

.btn-light-purple {
  background: #F5EBFE !important;
  color: #9425D3!important;
}

.btn-light-purple:hover {
  background: #9425D3;
  color: white!important;
}

.btn-light-emerald {
  background: #E3F9F7;
  color: #25D3BB!important;
}

.btn-light-emerald:hover, .btn-emerald:focus {
  background: #25D3BB;
  color: white!important;
}

/* ---------------------------------------------------
INPUT & LABELS
----------------------------------------------------- */

label {
  color: #000051;
  font-family: "GothamRounded-Bold";
}

input, textarea, select {
  border-radius: 7px;
  border: 2px solid #e9eaed;
  /* border: 2px solid #D0D6DF; */
}

::placeholder {
  color: #e9eaed!important;
  /* color: #D0D6DF!important; */
}

input:hover, textarea:hover, select:hover {
  border-color: #818891;
}

input:focus, textarea:focus, select:focus {
  border-color: #AEB4BC !important;
  box-shadow: none !important;
}

input.valid, textarea.valid, select.valid {
  border-color: #25D366 !important;
}

input.invalid, textarea.invalid, select.invalid {
  border-color: #DC3C3C !important;
}

.label-floating label {
  position: absolute;
  top: 0;
  margin: 10px 0 0 13px;
  transition: all 200ms;
  line-height: 18px;
  border-radius: 10px;
  pointer-events: none;
}

.label-floating .form-control:focus+label, .label-floating .form-control:not(:placeholder-shown)+label {
  /* transform: translate3d(0, -63%, 0); */
  top: -10px;
  opacity: 1;
  padding: 0px 7px;
  margin: 0 0 0 5px;
  background-color: white;
}

/* ---------------------------------------------------
LOADING
----------------------------------------------------- */
.loading-backdrop {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.6;
  background-color: #000;
  backdrop-filter: blur(5px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading {
  height: 64px;
  width: 64px;
  border: 4px solid;
  border-radius: 50%;
  border-top: 4px solid #fff;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---------------------------------------------------
FONTS
----------------------------------------------------- */

.text-bold {
  font-family: "GothamRounded-Bold" !important;
}

.text-book {
  font-family: "GothamRounded-Book" !important;
}

.text-light {
  font-family: "GothamRounded-Light" !important;
}

.text-regular {
  font-family: "GothamRounded-Medium" !important;
}

@font-face {
  font-family: "GothamRounded-Bold";
  src: url("../lib/fonts/GothamRounded-Bold.otf");
}

@font-face {
  font-family: "GothamRounded-Book";
  src: url("../lib/fonts/GothamRounded-Book.otf");
}

@font-face {
  font-family: "GothamRounded-Light";
  src: url("../lib/fonts/GothamRounded-Light.otf");
}

@font-face {
  font-family: "GothamRounded-Medium";
  src: url("../lib/fonts/GothamRounded-Medium.otf");
}