/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); /* Poppins */

/* Variables */
:root {
    --open-sans: 'Open Sans';
    --poppins: 'Poppins';
    --roboto: 'Roboto';
    --main-grey: #F5F6F8;
    --background-white: #fcfcfc;
    --component-blue: #109CF1;
    --component-red: #E88383;
    --component-grey: #EBEFF2;
    --text-grey: #334D6E;
    --background-light_blue: #51a6e8;
    --component-green: #00B87C;
    --top-header-height: 60px;
    --min-bottom-tab-height: 355px;
   
}

/* Styles */
body {
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.w-100 {
    width: 100%;
}

.svg_icon_center {
    display: flex;
    align-items: center;
    justify-content: center;
    & > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
    display: flex;
    justify-content: center;
    height: 100%;
    padding: 0 !important;
    padding-left: 8px !important;
    fill: #334D6E;
}

.selectors_parent-hovered:hover {
    .react-datepicker__input-container input {
        background-color: #F6FAFD;
        border: 1px solid var(--component-grey);
        cursor: pointer;

        &:focus {
            border: 1px solid #0085FF !important;
        }
    }

    .react-datepicker__input-container input:focus {

            border: 1px solid #0085FF !important;

    }

    .react-select__control {
        background-color: #F6FAFD !important;
        border: 2px solid var(--component-grey) !important;
        cursor: pointer !important;
    }


    .react-select__control--is-focused {
        border: 1px solid #0085FF !important;
    }

}

.cursor_pointer, .cursor_pointer:hover {
    cursor:pointer;
}

.modal-base {
    background-color: #ffffff;
    position: absolute;
    right: -370px;
    height: 100%;
    width: 370px;
    outline: 0;
    border-left: 1px solid #EBEFF2;
    background: #FCFCFC;
    box-shadow: 6px 0px 18px 0px rgba(0, 0, 0, 0.06);

}

.modal-base_after-open {
    animation: open_filter;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.modal-base_before-close {
    animation: close_filter;
    animation-duration: .7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.overlay-base {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(9, 44, 76, 0.6); */
    opacity: 0;
    transition: all 0.5s ease-in;
  }

  .overlay-base_after-open {
    opacity: 1;
    z-index: 100;
  }
  
  .overlay-base_before-close {
    opacity: 0;
  }
  
   @keyframes open_filter {
      from {
        right: -370px;
      }
      to {
        right: 0;

      }
  
  }
  
  
  @keyframes close_filter {
      from {
        right: 0;
      }
      to {
        right: -370px;
      }
  } 
  
  .mb-4 {
    margin-bottom: 4px !important;
  }

  .mb-8 {
    margin-bottom: 8px !important;
  }

  .mb-16 {
    margin-bottom: 16px !important;
  }

  .mb-20 {
    margin-bottom: 20px !important;
  }

  .mb-32 {
    margin-bottom: 32px !important;
  }

  .mb-40 {
    margin-bottom: 40px !important;
  }

  .mb-50 {
    margin-bottom: 50px !important;
  }

  .mb-64 {
    margin-bottom: 64px !important;
  }

  .mb-128 {
    margin-bottom: 128px !important;
  }

  .mb-256 {
    margin-bottom: 256px !important;
  }


.color_white {
    color: #fff !important; 
}