/*.TileSelected { border: 2px solid orange; }
.Tile button { display: none; }
.TileSelected button { display: inline-block; }*/

.BgSuccess { background: forestgreen; }
.BgDanger { background: red; }
.FgSuccess { background: darkgreen; }
.FgDanger { background: darkred; }

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.popupContent {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

* {
    font-family: 'Ubuntu', sans-serif;

    --color-kappHover:   #22d3ee;
    --color-kappLight:   #adf3ff;
    --color-kappFaded:   #ebfbff;
    --color-bgSecondary: #fafafa;
    --color-bgHighlight: #ffccbc;
    --color-bgClickable: #fd5e0f;
    --color-bgDanger:    #d40000;
    --color-bgSuccess:   #5b993e;
    --color-bgWarning:   #f3b000;
    --color-fgText:      #000000;
    --color-fgSoft:      #616161;
    --color-fgBorder:    #e4e4e4;
    --color-fgNormal:    #b9b9b9;
    --color-fgSelected:  #fd5e0f;
    --color-fgDanger:    #b40000;
    --color-fgSuccess:   #2e710c;
    --color-fgCalendar:  #c4e9f1;

    --color-secondary:  #f1e4f3;
    --color-primary:    #ffffff;
    --color-element:    #9999a1;
    --color-text-icon:  #3c3c3b;
    --color-kapp:       #0899b1;
    --color-trainer:    #9f9fed;
    --color-shop:       #0acdff;
    --color-hotel:      #f4af6a;
    --color-breeder:    #66101f;
    --color-sitter:     #eb7bc0;
    --color-danger:     #bc0029;
    --color-dangerFaded: #fff0f3;
    --color-success:    #32965d;

    --font-title: font-bold, [--color-text-icon];
    --font-subtitle : font-semibold, --color-text-icon;

    --google-font-color-notocoloremoji:colrv1;
}

body {
    color: #3c3c3b;
}

.fill-white {
    fill: white;
}

/* TO CONVERT COLORS FOR SVG https://codepen.io/sosuke/pen/Pjoqqp */
.fgSoftSvg {
    filter: invert(40%) sepia(3%) saturate(13%) hue-rotate(24deg) brightness(90%) contrast(86%);
}

.fgWhiteSvg {
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(100deg) brightness(103%) contrast(101%);
}

.fgBlackSvg {
    filter: invert(0%) sepia(0%) saturate(3924%) hue-rotate(231deg) brightness(96%) contrast(101%);
}

.fgDangerSvg {
    filter: invert(10%) sepia(89%) saturate(5217%) hue-rotate(339deg) brightness(91%) contrast(108%);
}

.fgSuccessSvg {
    filter: invert(27%) sepia(54%) saturate(3385%) hue-rotate(75deg) brightness(85%) contrast(91%);
}

.fgSelectedSvg {
    filter: invert(52%) sepia(92%) saturate(3419%) hue-rotate(350deg) brightness(96%) contrast(107%);
}

.fgkappSvg {
    filter: invert(41%) sepia(90%) saturate(413%) hue-rotate(140deg) brightness(100%) contrast(106%);
}

.fgkappHoverSvg {
    filter: invert(69%) sepia(73%) saturate(861%) hue-rotate(147deg) brightness(95%) contrast(96%);
}

.fgIconSvg {
    filter: invert(21%) sepia(78%) saturate(8%) hue-rotate(105deg) brightness(87%) contrast(91%);
}

/* blink / pulse */
.animate-blink {
    animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .15;
  }
}

/* Hide the spinbox buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Cacher la scrollbar sans désactiver le scroll */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none !important;  /* Pour Internet Explorer et Edge */
    scrollbar-width: none !important;      /* Pour Firefox */
    scrollbar-gutter: unset !important;
    background: transparent !important;
}

/* Scrollbar pour Chrome, Edge et Safari */
.scrollbar-thin::-webkit-scrollbar {
    width: 2px; /* Définit la largeur de la scrollbar */
    height: 2px; /* Pour les scrollbars horizontales */
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent; /* Rend l'arrière-plan de la scrollbar transparent */
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3); /* Couleur discrète pour le "curseur" de la scrollbar */
    border-radius: 10px; /* Arrondit la scrollbar */
}

/* Scrollbar pour Firefox */
.scrollbar-thin {
    scrollbar-width: thin; /* Utilise une scrollbar fine */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Couleur du curseur et de la piste */
    scrollbar-gutter: stable;
}

/* Animate CSS FadeIn */

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

/* latin italic light */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCp6KVjbNBYlgoKejZftVyPN4E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin italic regular */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCu6KVjbNBYlgoKej70l0k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin italic medium */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCp6KVjbNBYlgoKejYHtFyPN4E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin italic bold */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin normal light */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin normal regular */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin normal medium */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCv6KVjbNBYlgoCjC3jsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin normal bold */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v21/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* emoji flags 1 */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2) format('woff2');
  unicode-range: U+1f1e6-1f1ff;
}

/* emoji flags 2 */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2) format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7;
}

.emoji {
    font-family: "Noto Color Emoji", 'Ubuntu', sans-serif;
    font-weight: 400;
    font-style: normal;
}