/* Global */
.menu-content-open{
    pointer-events: auto !important;
}

:root {
    --inner-border-width: 0px;
}

:host{
    --inner-border-width: 0px;
}

ion-select {
    color: black;
}

ion-item-divider{
    --background: transperent;
}

ion-select-option {
    color: black;
}

ion-select::part(text) {
    padding-left: 12px;
}

.big-logo {
    max-width: 128px;
    margin: 0 auto;
}

.cs-vertical-center {
    top: 50%;
    position: absolute;
    width: 100%;
    transform: translateY(-50%);
}

.qf-forgot-password {
    text-align: end;
    padding: 14px 0;
    font-size: 14px;
}

.qf-forgot-password a {
    color: var(--qf-font-color-primary);
    text-decoration: none;
    font-weight: 600;
}

[aria-checked=true].sc-ion-alert-ios .alert-checkbox-icon.sc-ion-alert-ios {
    border-color: var(--ion-color-secondary, #3880ff);
    background: var(--ion-color-secondary, #3880ff);
}

[aria-checked=true].sc-ion-alert-ios .alert-radio-label.sc-ion-alert-ios {
    color: #000000;
}

[aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios {
    border-color: var(--ion-color-secondary, #3880ff);
}

ion-modal {
    --border-radius: 8px!important;
}

ion-modal .ion-page:not(ion-nav .ion-page) {
    height: auto !important;
}

.alert-button.sc-ion-alert-ios{
    color: black;
}

ion-list-header {
    padding-left: 16px;
}

ion-searchbar ion-icon {
    right: 16px !important;
    left: auto !important;
    color: var(--ion-color-primary);
}

ion-item.ion-color-bluebox {
    --padding-start: 16px;
}

ion-list.ion-color-bluebox {
    --padding-start: 16px;
}

ion-searchbar{
    padding: 0 !important;
    /*padding-left: 0px !important;*/
}

ion-searchbar input{
    padding: 0 0 0 16px !important;
}

.searchbar-input-container.sc-ion-searchbar-ios {
    height: 45px;
}

ion-toolbar{
    --background: var(--ion-color-primary);
    --padding-start: 7px;
    --padding-end: 4px;
}

ion-item {
    --background: transparent;
    /*--border-color: var(--ion-color-grey);*/
    /*--color: var(--qf-font-color-grey);*/
    --min-height: 52px;
    font-size: 16px;
    border: 0 !important;
}

.searchbar-input {
    background-color: white !important;
}

.item-inner{
    border-style: unset !important;
}

/* Image */
.qf-snap-scroll ion-card.qf-image {
    width: 187px;
    /*height: 100px;*/
    background: transparent;
    margin-top: 15px;
    margin-bottom: 15px;
}

.qf-snap-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    flex-flow: row nowrap;
    padding-left: 16px;
    display: flex;
}

.qf-snap-scroll::-webkit-scrollbar,
.segment-scrollable::-webkit-scrollbar {
    display: none;
}

ion-card.qf-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto 187 / 100;
}

.snap-item-wrapper {
    /*padding-left: 16px;*/
    scroll-snap-align: start;
}

.snap-item-wrapper:last-child {
    padding-right: 16px;
}

.snap-item-wrapper:only-child {
    padding-left: 0;
}

/* Card */

.qf-snap-scroll ion-card-header {
    padding: 11px 21px 12px 10px;
}

/* Toolbar */
ion-button.ion-toolbar {
    --tab-button-inactive: #000000;
}

.header-translucent ion-toolbar ion-button {
    --opacity: 1;
}

ion-toolbar ion-button {
    color: #000000;
    /*--padding-start: 9px;*/
    --padding-end: var(--padding-start);
}

:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
    color: #000000;
}

.button-native{
    color: #000000;
}

ion-menu-button {
    color: #000000;
}

.searchbar-cancel-button .sc-ion-searchbar-ios, .searchbar-ios-cancel .sc-ion-searchbar-ios{
    color: var(--ion-color-secondary);
    padding-right: 17px;
}

/* Swiper */
.swiper-pagination-bullet-active{
    background: #FFFFFF;
    opacity: 0.7;
    width: 18px;
    border-radius: 5px;
}
.swiper-pagination-fraction{
    background: var(--ion-color-primary);
    width: 61px;
    border-radius: 17px 17px 0 0;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;
    right: 0;
    font-family: 'Open Sans', sans-serif;
    padding: 3px 0 1px;
}
.swiper-pagination-current{
    font-weight: 600;
}

#onboarding.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    width: auto;
    margin-left: 44px;
    margin-bottom: 25px;
    scale: 1.3;
}


#onboarding .swiper-pagination-bullet{
    background-color: #FFF;
}

#onboarding .swiper-pagination-bullet-active{
    background-color: #2F5476;
    opacity: 1;
}
/*ion-content{*/
/*    --background: url("../../public/assets/img/background.svg") 0 0/100% 100% no-repeat;*/
/*}*/

/* Fish Details */
ion-toolbar.details{
    --background: var(--ion-color-secondary);
    --padding-start: 7px;
    --padding-end: 7px;
}

.ion-color-qf-transparent{
    --background: transparent;
    outline-color: #2b6cb0;
}

/* Auth */
.login-box ion-item ion-icon {
    margin: auto 16px 5px 0;
    opacity: .7;
}

.login-box ion-card-content ion-item {
    --padding-start: 0;
}

.login-box ion-card-header {
    padding: 20px 16px 0;
}

.login-box ion-card-title {
    font-size: 14px;
    opacity: .7;
}

.login-box ion-item {
    font-size: 14px;
}

.login-box ion-card-content {
    padding: 0 16px 16px;
}

ion-back-button{
    color: black;
    background: white;
    --icon-font-size: 1.4em;
    --icon-margin-end: 0;
    width: 45px;
    height: 45px;
    border-radius: 10px;
}

/*Transitions*/
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

ion-popover{
    --height: 50px;
    --width: 100px;
    --background: rgba(255, 255, 255, 0.14);
}

ion-popover ion-content {
    --background: rgba(255, 255, 255, 0.14);
}

@font-face {
    font-family: 'Righteous';
    src: url('../../public/assets/fonts/righteous.ttf');
}