/*
 * INDEX
 *
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/opensans/OpenSans-Italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/opensans/OpenSans-BoldItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/opensans/OpenSans-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/opensans/OpenSans-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/opensans/OpenSans-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/proximanova/ProximaNova-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/proximanova/ProximaNova-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/proximanova/ProximaNova-Bold.woff2) format('woff2');
}

html, body {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: var(--font-size-default);
  line-height: var(--line-height-md);
  color: var(--text-color);
}

button, input, select, textarea {
  font: inherit;
}

.form-wrapper {
  position: relative;
  padding: 1rem 1.5rem 1.5rem;
  z-index: 2;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-xl);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
  background-color: var(--light);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  position: relative;
  padding: 0;
  border: 0;
}

label {
  display: inline-block;
  font-weight: 400
}

:focus {
  outline: 0 !important
}

a:active, a:focus, a:hover, button, button:active, button:focus, embed, input::-moz-focus-inner, object {
  outline: 0
}

.open > .dropdown-menu {
  animation-name: flipInX;
  animation-duration: .4s;
  animation-fill-mode: both
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
  40% {
    transform: perspective(400px) rotateX(-10deg)
  }
  70% {
    transform: perspective(400px) rotateX(10deg)
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}

p {
  margin: 0 0 var(--space-sm);
}

.text-color-important {
  color: var(--text-color) !important;
}

.react-datepicker__month-read-view--selected-month,
.react-datepicker__day-name,
.react-datepicker__month-option {
  text-transform: capitalize;
}

.react-datepicker__day--keyboard-selected {
  background: var(--gray-100) !important;
  color: black !important;
}