@tailwind utilities;
@tailwind components;

.container{
    width: 100%;
}

@media (min-width: 768px){

    .container{
        max-width: 768px;
    }
}

@media (min-width: 1024px){

    .container{
        max-width: 1024px;
    }
}

@media (min-width: 1280px){

    .container{
        max-width: 1280px;
    }
}

@media (min-width: 1440px){

    .container{
        max-width: 1440px;
    }
}

@media (min-width: 1600px){

    .container{
        max-width: 1600px;
    }
}

@media (min-width: 1920px){

    .container{
        max-width: 1920px;
    }
}

.svg{
    display: flex;
}

.svg svg {
    fill: #6F8DC2;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
  }
.static{
    position: static;
}
.fixed{
    position: fixed;
}
.absolute{
    position: absolute;
}
.sticky{
    position: -webkit-sticky;
    position: sticky;
}
.inline{
    display: inline;
}
.table{
    display: table;
}
.hidden{
    display: none;
}
.w-24{
    width: 6rem;
}
.border{
    border-width: 1px;
}
.bg-brand-maggioli-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--brand-maggioli-05), var(--tw-bg-opacity));
}
.bg-label-amaranth-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-amaranth-05), var(--tw-bg-opacity));
}
.bg-label-aqua-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-aqua-05), var(--tw-bg-opacity));
}
.bg-label-blue-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-blue-05), var(--tw-bg-opacity));
}
.bg-label-green-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-green-05), var(--tw-bg-opacity));
}
.bg-label-lime-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-lime-05), var(--tw-bg-opacity));
}
.bg-label-orange-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-orange-05), var(--tw-bg-opacity));
}
.bg-label-orchid-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-orchid-05), var(--tw-bg-opacity));
}
.bg-label-sky-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-sky-05), var(--tw-bg-opacity));
}
.bg-label-yellow-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-yellow-05), var(--tw-bg-opacity));
}
.bg-label-violet-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--label-violet-05), var(--tw-bg-opacity));
}
.bg-status-error-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--status-error-05), var(--tw-bg-opacity));
}
.bg-status-info-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--status-info-05), var(--tw-bg-opacity));
}
.bg-status-success-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--status-success-05), var(--tw-bg-opacity));
}
.bg-status-warning-05{
    --tw-bg-opacity: 1;
    background-color: rgba(var(--status-warning-05), var(--tw-bg-opacity));
}
.fill-label-blue-05{
    fill: rgb(var(--label-blue-05));
}
.fill-label-green-06{
    fill: rgb(var(--label-green-06));
}
.lowercase{
    text-transform: lowercase;
}
.shadow{
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.filter{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
*, ::before, ::after{
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
}


:host {
  --fill-brand-synbee-08: #1a74a1;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  border-radius:0 0 10px 10px;
  font-family: Roboto, serif;
  z-index: 1;
}
/*.svg{*/
/*  fill: --fill-brand-synbee-08;*/
/*}*/

.reminder-header{
  display: flex;
  background-color: #FFFFFF;
  padding:15px 40px;
  height: 60px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 10px 10px 0 0;

}
.reminder-header-noshadow{
  display: flex;
  background-color: #FFFFFF;
  padding:15px 40px;
  height: 60px;
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.badge-container {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  font-weight: normal;
  color: #4C4C4C;
  font-family: Karla, serif;

}
.creation-date-container{
  margin-left: 0.5rem;
  margin-top: 0.1rem;
}
img {
  width: 22px;
}
.addon-title{
  display: flex;
  flex-direction: column;
}
.header-title-view-mode{
  flex-grow: 1;
  display: block;
  text-align: start;
  font-weight: bold;
  font-size: 24px;
  margin-left: 2rem;
}
.search-box{
  flex-grow: 1;
  display: block;
}
.img-container{
  flex:none;
  margin-top: 7px;

}
