@mvp-rockets/namma-generator/generators/web/templates/styles/globals.css

A generator to generate mvp-rockets projects

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
}


.hideArrow::-webkit-outer-spin-button,
.hideArrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #FCFCFC inset;
}


.hideArrow::-webkit-outer-spin-button,
.hideArrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Date picker START */

.react-datepicker__triangle {
    display: none;
}

.react-datepicker {
    border-color: #6B6B80 !important;
    border-radius: 4px !important;
}

.react-datepicker__navigation-icon--previous::before {
    border-color: #4B4B63 !important;
    border-width: 2px 2px 0px 0px !important;
}

.react-datepicker__navigation-icon--next::before {
    border-color: #4B4B63 !important;
    border-width: 2px 2px 0px 0px !important;
}

.react-datepicker__current-month,
.react-datepicker-year-header {
    color: #1e3a8a !important;
    font-weight: 400 !important;
    margin: 1rem 0 1.5rem 0 !important;
    font-size: 14px !important;
    line-height: 20px;
    font-family: inherit;
}

.react-datepicker__navigation {
    top: 25px !important;
}

.react-datepicker__navigation--next {
    right: 20px !important;
}

.react-datepicker__navigation--previous {
    left: 20px !important;
}

.react-datepicker__header {
    background-color: #fcfcfc !important;
    border-bottom: none !important;
}

.react-datepicker__month {
    padding: 0.5rem 1.5rem 1.5rem 1.5rem !important;
    margin: 0 !important;
    background-color: #fcfcfc !important;
    border-radius: 0 0 0.3rem 0.3rem;
}

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
    color: #4b4b63;
    text-decoration: line-through;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
    width: 2rem !important;
    line-height: 2rem !important;
}

.react-datepicker__day-name {
    color: #4b4b63 !important;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
    background-color: #e5e5eb !important;
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
    background-color: #d1d1db !important;
    border-radius: 0.3rem !important;
    font-weight: normal !important;
    color: #14142B !important;
}

.react-datepicker__day--selected:hover {
    color: #14142B !important;
}

.react-datepicker__day--selected {
    background-color: #1e3a8a !important;
    color: #fcfcfc !important;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin: 0px !important;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
    background-color: #1e3a8a !important;
    color: #fcfcfc !important;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    border-radius: 0px !important;
    margin: 0px !important;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
    min-width: 106px;
    width: 106px !important;
    padding: 17px 18px;
    border-radius: 0px !important;
    font-weight: 400 !important;
}

.react-datepicker.react-datepicker--time-only {
    min-width: 150px;
    width: 100%;
}

.react-datepicker__time-list-item {
    font-size: 14px;
    font-weight: 400;
}

.react-datepicker__time-list-item--selected {
    background-color: #1e3a8a !important;
}

.react-datepicker__time-container,
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
    width: 100% !important;
}

ul.react-datepicker__time-list {
    padding-bottom: 6px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #E5E5EB;
}

::-webkit-scrollbar-thumb {
    background: #1e3a8a;
    height: 60px;
    border-radius: 6px;
}

/* Date picker END */