/** 
*
* @                           // Phone (Vertical View)      // XS
* @media (min-width:576px)    // Phone (Horizontal View)    // S
* @media (min-width:768px)    // Tablet                     // M
* @media (min-width:992px)    // Small monitor              // L
* @media (min-width:1200px)   // Monitor                    // XL
* @media (min-width:1600px)   // Monitor                    // 2XL
* 
*/

/* Variables */
:root{

  /* From Black to White */
  --color-black: #000000;              /* Black */
  --color-black-90: #000000e6;         /* Black (90% transparency) */
  --color-black-80: #000000cc;         /* Black (80% transparency) */
  --color-black-75: #000000bf;         /* Black (75% transparency) */
  --color-black-70: #000000b3;         /* Black (70% transparency) */
  --color-black-60: #00000099;         /* Black (60% transparency) */
  --color-black-50: #00000080;         /* Black (50% transparency) */
  --color-black-40: #00000066;         /* Black (40% transparency) */
  --color-black-30: #0000004d;         /* Black (30% transparency) */
  --color-black-25: #00000040;         /* Black (25% transparency) */
  --color-black-20: #00000033;         /* Black (20% transparency) */
  --color-black-10: #0000001a;         /* Black (10% transparency) */
  --color-black-5: #0000000d;          /* Black (5% transparency) */
  --color-grey-90: #1a1a1a;            /* Grey containing 90% black */
  --color-grey-80: #333333;            /* Grey containing 80% black */
  --color-grey-70: #4d4d4d;            /* Grey containing 70% black */
  --color-grey-75: #404040;            /* Grey containing 75% black */
  --color-grey-60: #666666;            /* Grey containing 60% black */
  --color-grey-50: #808080;            /* Grey containing 50% black */
  --color-grey-40: #999999;            /* Grey containing 40% black */
  --color-grey-30: #b3b3b3;            /* Grey containing 30% black */
  --color-grey-25: #bfbfbf;            /* Grey containing 25% black */
  --color-grey-20: #cccccc;            /* Grey containing 20% black */
  --color-grey-10: #e5e5e5;            /* Grey containing 10% black */
  --color-grey-5: #f2f2f2;             /* Grey containing 5% black */
  --color-grey-3: #f7f7f7;             /* Grey containing 3% black */
  --color-white: #ffffff;              /* White */
  --color-white-90: #ffffffe6;         /* White (90% transparency) */
  --color-white-80: #ffffffcc;         /* White (80% transparency) */
  --color-white-75: #ffffffbf;         /* White (75% transparency) */
  --color-white-70: #ffffffb3;         /* White (70% transparency) */
  --color-white-60: #ffffff99;         /* White (60% transparency) */
  --color-white-50: #ffffff80;         /* White (50% transparency) */
  --color-white-40: #ffffff66;         /* White (40% transparency) */
  --color-white-30: #ffffff4d;         /* White (30% transparency) */
  --color-white-25: #ffffff40;         /* White (25% transparency) */
  --color-white-20: #ffffff33;         /* White (20% transparency) */
  --color-white-10: #ffffff1a;         /* White (10% transparency) */
  --color-white-5: #ffffff0d;          /* White (5% transparency) */

  /* Red */
  --color-red: #ff0000;                         /* Red */
  --color-red-firebrick: #b22222;               /* Red Firebrick */
  --color-red-federation-of-love: #b80f0a;      /* Red Federation Of Love */
  --color-red-candy-apple: #ff0800;             /* Red Candy Apple */
  --color-red-maroon: #800000;                  /* Red maroon */
  --color-red-ares: #df2800;                    /* Red Ares */

  /* Pink */
  --color-pink: #ffC0cb;                        /* Pink */
  --color-pink-magenta: #ff00ff;                /* Pink Magenta */
  --color-pink-rose: #ff66cc;                   /* Pink Rose */
  --color-pink-brick: #fb607f;                  /* Pink Brick */

  /* Blue */
  --color-blue: #0000ff;                        /* Blue */
  --color-blue-brescian: #0080ff;               /* Blue Brescian */
  --color-blue-egyptian: #1034a6;               /* Blue Egyptian */
  --color-blue-maya: #73c2fb;                   /* Blue Maya */
  --color-blue-guilliman: #6593f5;              /* Blue Guilliman */
  --color-blue-phantom-ship: #2d3436;           /* Blue Phantom Ship */

  /* Green */
  --color-green: #00ff00;                       /* Green */
  --color-green-sesame-street: #00a572;         /* Green Sesame Street */
  --color-green-emerald-reflection: #50c878;    /* Green Emerald Reflection */
  --color-green-luigi: #4cbb17;                 /* Green Luigi */

  /* Yellow */
  --color-yellow: #ffff00;                      /* Yellow */
  --color-yellow-tang: #ffd300;                 /* Yellow Tang */
  --color-yellow-glitter: #fedc56;              /* Yellow Glitter */
  --color-yellow-mikado: #ffc30b;               /* Yellow Mikado */
  --color-yellow-cloudy-carrot: #fda50f;        /* Yellow Cloudy Carrot */
  --color-yellow-ochre: #cc7722;                /* Yellow Ochre */

  /* Orange */
  --color-orange: #fc6600;                      /* Orange */
  --color-orange-summer-citrus: #f9812a;        /* Orange Summer Citrus */

  /* Events */
  --color-error: var(--color-red-federation-of-love);
  --color-filled-error: var(--color-white);
  --color-filled-error-bg: var(--color-error);
  --color-border-error: var(--color-red-maroon);
  
  --color-success: var(--color-green-sesame-street);
  --color-filled-success: var(--color-white);
  --color-filled-success-bg: var(--color-success);
  --color-border-success: var(--color-green-luigi);
  
  --color-warning: var(--color-yellow-glitter);
  --color-filled-warning: var(--color-yellow-ochre);
  --color-filled-warning-bg: var(--color-warning);
  --color-border-warning: var(--color-yellow-tang);

  /* Round settings */
  --px-dropdown-radius: 15px;                     /* Round size for dropdown elements */

  /* Animation settings */
  --animation-time: 750ms;
  --animation-time-immediate: 50ms;

}

/* Global */

html{
  scroll-behavior: smooth;
}

body{
  position: relative; 
  margin: 0 auto; 
  font-size: 16px; 
  font-family: "Roboto", "Segoe UI", "Helvetica", "Arial", "Sans-Serif";
}

body *{  
  position: relative;
  transition: top var(--animation-time) ease-out,
              right var(--animation-time) ease-out,
              bottom var(--animation-time) ease-out,
              left var(--animation-time) ease-out,
              width var(--animation-time) ease-out, 
              height var(--animation-time) ease-out, 
              outline-color var(--animation-time) ease-out, 
              background-color var(--animation-time) ease-out, 
              outline-offset var(--animation-time) linear,
              opacity var(--animation-time) ease-out;
}

div,form{
  position: relative; 
  box-sizing: border-box;
  min-width:0;
}

a, .a{
  box-sizing: border-box; 
  text-decoration: none; 
  cursor: pointer; 
  color: var(--color-green-luigi);
  transition: background-color var(--animation-time-immediate) ease-out;
} 
  a:hover, .a:hover{
    text-decoration: underline; 
  }
  
input, textarea{
  margin: 0; 
  box-sizing: border-box; 
  outline: none;
}

form{
  width: 100%;
}

.p{
  text-align: justify; 
  text-indent: 1rem
}

ul{
  box-sizing: border-box;
}

li{
  box-sizing: border-box;
}

img{
  object-fit:cover; 
  max-width: 100%; 
  max-height: 100%;
}

img.mouse-color, .mouse-color img{
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);
}

img.mouse-color:hover, .mouse-color:hover img{
  -webkit-filter: none; 
  filter: none;
}

*:focus{
  outline: 0;
}
div.ra-outdated-browser{
  position: fixed;
  top: 5px;
  right: 5px;
  left: 5px;
  padding: 25px;
  background: rgba(255,0,0,.8);
  color: var(--color-white);
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: var(--px-dropdown-radius);
  z-index: 1000000000;
}

/* Containers */
.container{margin: 0 auto; width: 100%}
@media (min-width:1200px){.container{width: 1140px}}
.container-full{margin: 0 auto; width: 100%;}
.container-100vh{margin: 0px; padding: 0px; width: 100%; height: 100vh;}

/* Rows */
.row{
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  align-content: stretch; 
  justify-content: flex-start; 
  align-items: flex-start;
}

.column{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

.row.wrap, .column.wrap{flex-wrap: wrap}
.row.nowrap, .column.nowrap{flex-wrap: nowrap}
.row.jcc, .column.jcc{justify-content: center}
.row.jcfs, .column.jcfs{justify-content: flex-start}
.row.jcfe, .column.jcfe{justify-content: flex-end}
.row.jcsb, .column.jcsb{justify-content: space-between}
.row.jcsa, .column.jcsa{justify-content: space-around}
.row.jcse, .column.jcse{justify-content: space-evenly}
.row.aic, .column.aic{align-items: center}
.row.aifs, .column.aifs{align-items: flex-start}
.row.aife, .column.aife{align-items: flex-end}
.row.ais, .column.ais{align-items: stretch}
.row.aib, .column.aib{align-items: baseline}

/**
*  Cols 
*  col-N:  N/12 
*  col-Nr: N in (r)ow
*/
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-s-1, .col-s-2, .col-s-3, .col-s-4, .col-s-5, .col-s-6, .col-s-7, .col-s-8, .col-s-9, .col-s-10, .col-s-11, .col-s-12,
.col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12,
.col-l-1, .col-l-2, .col-l-3, .col-l-4, .col-l-5, .col-l-6, .col-l-7, .col-l-8, .col-l-9, .col-l-10, .col-l-11, .col-l-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-2xl-1, .col-2xl-2, .col-2xl-3, .col-2xl-4, .col-2xl-5, .col-2xl-6, .col-2xl-7, .col-2xl-8, .col-2xl-9, .col-2xl-10, .col-2xl-11, .col-2xl-12,
.col-1r, .col-2r, .col-3r, .col-4r, .col-5r, .col-6r, .col-7r, .col-8r, .col-9r, .col-10r, .col-11r, .col-12r, 
.col-xs-1, .col-xs-2r, .col-xs-3r, .col-xs-4r, .col-xs-5r, .col-xs-6r, .col-xs-7r, .col-xs-8r, .col-xs-9r, .col-xs-10r, .col-xs-11r, .col-xs-12r,
.col-s-1r, .col-s-2r, .col-s-3r, .col-s-4r, .col-s-5r, .col-s-6r, .col-s-7r, .col-s-8r, .col-s-9r, .col-s-10r, .col-s-11r, .col-s-12r,
.col-m-1r, .col-m-2r, .col-m-3r, .col-m-4r, .col-m-5r, .col-m-6r, .col-m-7r, .col-m-8r, .col-m-9r, .col-m-10r, .col-m-11r, .col-m-12r,
.col-l-1r, .col-l-2r, .col-l-3r, .col-l-4r, .col-l-5r, .col-l-6r, .col-l-7r, .col-l-8r, .col-l-9r, .col-l-10r, .col-l-11r, .col-l-12r,
.col-xl-1r, .col-xl-2r, .col-xl-3r, .col-xl-4r, .col-xl-5r, .col-xl-6r, .col-xl-7r, .col-xl-8r, .col-xl-9r, .col-xl-10r, .col-xl-11r, .col-xl-12r,
.col-2xl-1r, .col-2xl-2r, .col-2xl-3r, .col-2xl-4r, .col-2xl-5r, .col-2xl-6r, .col-2xl-7r, .col-2xl-8r, .col-2xl-9r, .col-2xl-10r, .col-2xl-11r, .col-2xl-12r{
  order: 0; 
  align-self: auto; 
  flex: 0 0 100%;
}
.col, .col-auto, .col-xs-auto{
  flex: 0 0 auto; 
  max-width: 100%;
}
.col-1, .col-xs-1{flex: 0 0 8.333%;}    .col-1r, .col-xs-1r{flex: 0 0 100%;}
.col-2, .col-xs-2{flex: 0 0 16.666%;}   .col-2r, .col-xs-2r{flex: 0 0 50.0000%;}
.col-3, .col-xs-3{flex: 0 0 25.000%;}   .col-3r, .col-xs-3r{flex: 0 0 33.3330%;}
.col-4, .col-xs-4{flex: 0 0 33.333%;}   .col-4r, .col-xs-4r{flex: 0 0 25.0000%;}
.col-5, .col-xs-5{flex: 0 0 41.666%;}   .col-5r, .col-xs-5r{flex: 0 0 20.0000%;}
.col-6, .col-xs-6{flex: 0 0 50.000%;}   .col-6r, .col-xs-6r{flex: 0 0 16.6666%;}
.col-7, .col-xs-7{flex: 0 0 58.333%;}   .col-7r, .col-xs-7r{flex: 0 0 14.2857%;}
.col-8, .col-xs-8{flex: 0 0 66.666%;}   .col-8r, .col-xs-8r{flex: 0 0 12.5000%;}
.col-9, .col-xs-9{flex: 0 0 75.000%;}   .col-9r, .col-xs-9r{flex: 0 0 11.1111%;}
.col-10, .col-xs-10{flex: 0 0 83.333%;} .col-10r, .col-xs-10r{flex: 0 0 10.0000%;}
.col-11, .col-xs-11{flex: 0 0 91.666%;} .col-11r, .col-xs-11r{flex: 0 0 9.0909%;}
.col-12, .col-xs-12{flex: 0 0 100%;}    .col-12r, .col-xs-12r{flex: 0 0 8.3333%;}
@media (min-width:576px){
  .col-s-auto{flex: 0 0 auto; max-width: 100%}
  .col-s-1{flex: 0 0 8.333%;}    .col-s-1r{flex: 0 0 100%;}
  .col-s-2{flex: 0 0 16.666%;}   .col-s-2r{flex: 0 0 50.0000%;}
  .col-s-3{flex: 0 0 25.000%;}   .col-s-3r{flex: 0 0 33.3330%;}
  .col-s-4{flex: 0 0 33.333%;}   .col-s-4r{flex: 0 0 25.0000%;}
  .col-s-5{flex: 0 0 41.666%;}   .col-s-5r{flex: 0 0 20.0000%;}
  .col-s-6{flex: 0 0 50.000%;}   .col-s-6r{flex: 0 0 16.6666%;}
  .col-s-7{flex: 0 0 58.333%;}   .col-s-7r{flex: 0 0 14.2857%;}
  .col-s-8{flex: 0 0 66.666%;}   .col-s-8r{flex: 0 0 12.5000%;}
  .col-s-9{flex: 0 0 75.000%;}   .col-s-9r{flex: 0 0 11.1111%;}
  .col-s-10{flex: 0 0 83.333%;}  .col-s-10r{flex: 0 0 10.0000%;}
  .col-s-11{flex: 0 0 91.666%;}  .col-s-11r{flex: 0 0 9.0909%;}
  .col-s-12{flex: 0 0 100%;}     .col-s-12r{flex: 0 0 8.3333%;}
}
@media (min-width:768px){
  .col-m-auto{flex: 0 0 auto; max-width: 100%}
  .col-m-1{flex: 0 0 8.333%;}    .col-m-1r{flex: 0 0 100%;}
  .col-m-2{flex: 0 0 16.666%;}   .col-m-2r{flex: 0 0 50.0000%;}
  .col-m-3{flex: 0 0 25.000%;}   .col-m-3r{flex: 0 0 33.3330%;}
  .col-m-4{flex: 0 0 33.333%;}   .col-m-4r{flex: 0 0 25.0000%;}
  .col-m-5{flex: 0 0 41.666%;}   .col-m-5r{flex: 0 0 20.0000%;}
  .col-m-6{flex: 0 0 50.000%;}   .col-m-6r{flex: 0 0 16.6666%;}
  .col-m-7{flex: 0 0 58.333%;}   .col-m-7r{flex: 0 0 14.2857%;}
  .col-m-8{flex: 0 0 66.666%;}   .col-m-8r{flex: 0 0 12.5000%;}
  .col-m-9{flex: 0 0 75.000%;}   .col-m-9r{flex: 0 0 11.1111%;}
  .col-m-10{flex: 0 0 83.333%;}  .col-m-10r{flex: 0 0 10.0000%;}
  .col-m-11{flex: 0 0 91.666%;}  .col-m-11r{flex: 0 0 9.0909%;}
  .col-m-12{flex: 0 0 100%;}     .col-m-12r{flex: 0 0 8.3333%;}
}
@media (min-width:992px){
  .col-l-auto{flex: 0 0 auto; max-width: 100%}
  .col-l-1{flex: 0 0 8.333%;}    .col-l-1r{flex: 0 0 100%;}
  .col-l-2{flex: 0 0 16.666%;}   .col-l-2r{flex: 0 0 50.0000%;}
  .col-l-3{flex: 0 0 25.000%;}   .col-l-3r{flex: 0 0 33.3330%;}
  .col-l-4{flex: 0 0 33.333%;}   .col-l-4r{flex: 0 0 25.0000%;}
  .col-l-5{flex: 0 0 41.666%;}   .col-l-5r{flex: 0 0 20.0000%;}
  .col-l-6{flex: 0 0 50.000%;}   .col-l-6r{flex: 0 0 16.6666%;}
  .col-l-7{flex: 0 0 58.333%;}   .col-l-7r{flex: 0 0 14.2857%;}
  .col-l-8{flex: 0 0 66.666%;}   .col-l-8r{flex: 0 0 12.5000%;}
  .col-l-9{flex: 0 0 75.000%;}   .col-l-9r{flex: 0 0 11.1111%;}
  .col-l-10{flex: 0 0 83.333%;}  .col-l-10r{flex: 0 0 10.0000%;}
  .col-l-11{flex: 0 0 91.666%;}  .col-l-11r{flex: 0 0 9.0909%;}
  .col-l-12{flex: 0 0 100%;}     .col-l-12r{flex: 0 0 8.3333%;}
}
@media (min-width:1200px){
  .col-xl-auto{flex: 0 0 auto; max-width: 100%}
  .col-xl-1{flex: 0 0 8.333%;}    .col-xl-1r{flex: 0 0 100%;}
  .col-xl-2{flex: 0 0 16.666%;}   .col-xl-2r{flex: 0 0 50.0000%;}
  .col-xl-3{flex: 0 0 25.000%;}   .col-xl-3r{flex: 0 0 33.3330%;}
  .col-xl-4{flex: 0 0 33.333%;}   .col-xl-4r{flex: 0 0 25.0000%;}
  .col-xl-5{flex: 0 0 41.666%;}   .col-xl-5r{flex: 0 0 20.0000%;}
  .col-xl-6{flex: 0 0 50.000%;}   .col-xl-6r{flex: 0 0 16.6666%;}
  .col-xl-7{flex: 0 0 58.333%;}   .col-xl-7r{flex: 0 0 14.2857%;}
  .col-xl-8{flex: 0 0 66.666%;}   .col-xl-8r{flex: 0 0 12.5000%;}
  .col-xl-9{flex: 0 0 75.000%;}   .col-xl-9r{flex: 0 0 11.1111%;}
  .col-xl-10{flex: 0 0 83.333%;}  .col-xl-10r{flex: 0 0 10.0000%;}
  .col-xl-11{flex: 0 0 91.666%;}  .col-xl-11r{flex: 0 0 9.0909%;}
  .col-xl-12{flex: 0 0 100%;}     .col-xl-12r{flex: 0 0 8.3333%;}
}
@media (min-width:1600px){
  .col-2xl-auto{flex: 0 0 auto; max-width: 100%}
  .col-2xl-1{flex: 0 0 8.333%;}    .col-2xl-1r{flex: 0 0 100%;}
  .col-2xl-2{flex: 0 0 16.666%;}   .col-2xl-2r{flex: 0 0 50.0000%;}
  .col-2xl-3{flex: 0 0 25.000%;}   .col-2xl-3r{flex: 0 0 33.3330%;}
  .col-2xl-4{flex: 0 0 33.333%;}   .col-2xl-4r{flex: 0 0 25.0000%;}
  .col-2xl-5{flex: 0 0 41.666%;}   .col-2xl-5r{flex: 0 0 20.0000%;}
  .col-2xl-6{flex: 0 0 50.000%;}   .col-2xl-6r{flex: 0 0 16.6666%;}
  .col-2xl-7{flex: 0 0 58.333%;}   .col-2xl-7r{flex: 0 0 14.2857%;}
  .col-2xl-8{flex: 0 0 66.666%;}   .col-2xl-8r{flex: 0 0 12.5000%;}
  .col-2xl-9{flex: 0 0 75.000%;}   .col-2xl-9r{flex: 0 0 11.1111%;}
  .col-2xl-10{flex: 0 0 83.333%;}  .col-2xl-10r{flex: 0 0 10.0000%;}
  .col-2xl-11{flex: 0 0 91.666%;}  .col-2xl-11r{flex: 0 0 9.0909%;}
  .col-2xl-12{flex: 0 0 100%;}     .col-2xl-12r{flex: 0 0 8.3333%;}
}
.extended{
  flex-shrink: 1;
  flex-grow: 1; 
  flex-basis: 1;
}
.flex-shrink-0{flex-shrink: 0} .flex-shrink-1{flex-shrink: 1}
.flex-grow-0{flex-grow: 0} .flex-grow-1{flex-grow: 1; flex-basis: 0;}


/* Padding */
.padding-0, .padding-xs-0{padding: 0rem !important} .padding-1, .padding-xs-1{padding: 0.3rem !important} .padding-2, .padding-xs-2{padding: 0.6rem !important} .padding-3, .padding-xs-3{padding: 0.9rem !important} .padding-4, .padding-xs-4{padding: 1.2rem !important} .padding-5,.padding-xs-5{padding: 1.5rem !important}
.padding-top-0, .padding-top-xs-0{padding-top: 0rem !important} .padding-top-1, .padding-top-xs-1{padding-top: 0.3rem !important} .padding-top-2, .padding-top-xs-2{padding-top: 0.6rem !important} .padding-top-3, .padding-top-xs-3{padding-top: 0.9rem !important} .padding-top-4, .padding-top-xs-4{padding-top: 1.2rem !important} .padding-top-5, .padding-top-xs-5{padding-top: 1.5rem !important}
.padding-right-0, .padding-right-xs-0{padding-right: 0rem !important} .padding-right-1, .padding-right-xs-1{padding-right: 0.3rem !important} .padding-right-2, .padding-right-xs-2{padding-right: 0.6rem !important} .padding-right-3, .padding-right-xs-3{padding-right: 0.9rem !important} .padding-right-4, .padding-right-xs-4{padding-right: 1.2rem !important} .padding-right-5, .padding-right-xs-5{padding-right: 1.5rem !important}
.padding-bottom-0, .padding-bottom-xs-0{padding-bottom: 0rem !important} .padding-bottom-1, .padding-bottom-xs-1{padding-bottom: 0.3rem !important} .padding-bottom-2, .padding-bottom-xs-2{padding-bottom: 0.6rem !important} .padding-bottom-3, .padding-bottom-xs-3{padding-bottom: 0.9rem !important} .padding-bottom-4, .padding-bottom-xs-4{padding-bottom: 1.2rem !important} .padding-bottom-5, .padding-bottom-xs-5{padding-bottom: 1.5rem !important}
.padding-left-0, .padding-left-xs-0{padding-left: 0rem !important} .padding-left-1, .padding-left-xs-1{padding-left: 0.3rem !important} .padding-left-2, .padding-left-xs-2{padding-left: 0.6rem !important} .padding-left-3, .padding-left-xs-3{padding-left: 0.9rem !important} .padding-left-4, .padding-left-xs-4{padding-left: 1.2rem !important} .padding-left-5, .padding-left-xs-5{padding-left: 1.5rem !important}
@media (min-width:576px){
  .padding-s-0{padding: 0rem !important} .padding-s-1{padding: 0.3rem !important} .padding-s-2{padding: 0.6rem !important} .padding-s-3{padding: 0.9rem !important} .padding-s-4{padding: 1.2rem !important} .padding-s-5{padding: 1.5rem !important}
  .padding-top-s-0{padding-top: 0rem !important} .padding-top-s-1{padding-top: 0.3rem !important} .padding-top-s-2{padding-top: 0.6rem !important} .padding-top-s-3{padding-top: 0.9rem !important} .padding-top-s-4{padding-top: 1.2rem !important} .padding-top-s-5{padding-top: 1.5rem !important}
  .padding-right-s-0{padding-right: 0rem !important} .padding-right-s-1{padding-right: 0.3rem !important} .padding-right-s-2{padding-right: 0.6rem !important} .padding-right-s-3{padding-right: 0.9rem !important} .padding-right-s-4{padding-right: 1.2rem !important} .padding-right-s-5{padding-right: 1.5rem !important}
  .padding-bottom-s-0{padding-bottom: 0rem !important} .padding-bottom-s-1{padding-bottom: 0.3rem !important} .padding-bottom-s-2{padding-bottom: 0.6rem !important} .padding-bottom-s-3{padding-bottom: 0.9rem !important} .padding-bottom-s-4{padding-bottom: 1.2rem !important} .padding-bottom-s-5{padding-bottom: 1.5rem !important}
  .padding-left-s-0{padding-left: 0rem !important} .padding-left-s-1{padding-left: 0.3rem !important} .padding-left-s-2{padding-left: 0.6rem !important} .padding-left-s-3{padding-left: 0.9rem !important} .padding-left-s-4{padding-left: 1.2rem !important} .padding-left-s-5{padding-left: 1.5rem !important}
}
@media (min-width:768px){
  .padding-m-0{padding: 0rem !important} .padding-m-1{padding: 0.3rem !important} .padding-m-2{padding: 0.6rem !important} .padding-m-3{padding: 0.9rem !important} .padding-m-4{padding: 1.2rem !important} .padding-m-5{padding: 1.5rem !important}
  .padding-top-m-0{padding-top: 0rem !important} .padding-top-m-1{padding-top: 0.3rem !important} .padding-top-m-2{padding-top: 0.6rem !important} .padding-top-m-3{padding-top: 0.9rem !important} .padding-top-m-4{padding-top: 1.2rem !important} .padding-top-m-5{padding-top: 1.5rem !important}
  .padding-right-m-0{padding-right: 0rem !important} .padding-right-m-1{padding-right: 0.3rem !important} .padding-right-m-2{padding-right: 0.6rem !important} .padding-right-m-3{padding-right: 0.9rem !important} .padding-right-m-4{padding-right: 1.2rem !important} .padding-right-m-5{padding-right: 1.5rem !important}
  .padding-bottom-m-0{padding-bottom: 0rem !important} .padding-bottom-m-1{padding-bottom: 0.3rem !important} .padding-bottom-m-2{padding-bottom: 0.6rem !important} .padding-bottom-m-3{padding-bottom: 0.9rem !important} .padding-bottom-m-4{padding-bottom: 1.2rem !important} .padding-bottom-m-5{padding-bottom: 1.5rem !important}
  .padding-left-m-0{padding-left: 0rem !important} .padding-left-m-1{padding-left: 0.3rem !important} .padding-left-m-2{padding-left: 0.6rem !important} .padding-left-m-3{padding-left: 0.9rem !important} .padding-left-m-4{padding-left: 1.2rem !important} .padding-left-m-5{padding-left: 1.5rem !important}
}
@media (min-width:992px){
  .padding-l-0{padding: 0rem !important} .padding-l-1{padding: 0.3rem !important} .padding-l-2{padding: 0.6rem !important} .padding-l-3{padding: 0.9rem !important} .padding-l-4{padding: 1.2rem !important} .padding-l-5{padding: 1.5rem !important}
  .padding-top-l-0{padding-top: 0rem !important} .padding-top-l-1{padding-top: 0.3rem !important} .padding-top-l-2{padding-top: 0.6rem !important} .padding-top-l-3{padding-top: 0.9rem !important} .padding-top-l-4{padding-top: 1.2rem !important} .padding-top-l-5{padding-top: 1.5rem !important}
  .padding-right-l-0{padding-right: 0rem !important} .padding-right-l-1{padding-right: 0.3rem !important} .padding-right-l-2{padding-right: 0.6rem !important} .padding-right-l-3{padding-right: 0.9rem !important} .padding-right-l-4{padding-right: 1.2rem !important} .padding-right-l-5{padding-right: 1.5rem !important}
  .padding-bottom-l-0{padding-bottom: 0rem !important} .padding-bottom-l-1{padding-bottom: 0.3rem !important} .padding-bottom-l-2{padding-bottom: 0.6rem !important} .padding-bottom-l-3{padding-bottom: 0.9rem !important} .padding-bottom-l-4{padding-bottom: 1.2rem !important} .padding-bottom-l-5{padding-bottom: 1.5rem !important}
  .padding-left-l-0{padding-left: 0rem !important} .padding-left-l-1{padding-left: 0.3rem !important} .padding-left-l-2{padding-left: 0.6rem !important} .padding-left-l-3{padding-left: 0.9rem !important} .padding-left-l-4{padding-left: 1.2rem !important} .padding-left-l-5{padding-left: 1.5rem !important}
}
@media (min-width:1200px){
  .padding-xl-0{padding: 0rem !important} .padding-xl-1{padding: 0.3rem !important} .padding-xl-2{padding: 0.6rem !important} .padding-xl-3{padding: 0.9rem !important} .padding-xl-4{padding: 1.2rem !important} .padding-xl-5{padding: 1.5rem !important}
  .padding-top-xl-0{padding-top: 0rem !important} .padding-top-xl-1{padding-top: 0.3rem !important} .padding-top-xl-2{padding-top: 0.6rem !important} .padding-top-xl-3{padding-top: 0.9rem !important} .padding-top-xl-4{padding-top: 1.2rem !important} .padding-top-xl-5{padding-top: 1.5rem !important}
  .padding-right-xl-0{padding-right: 0rem !important} .padding-right-xl-1{padding-right: 0.3rem !important} .padding-right-xl-2{padding-right: 0.6rem !important} .padding-right-xl-3{padding-right: 0.9rem !important} .padding-right-xl-4{padding-right: 1.2rem !important} .padding-right-xl-5{padding-right: 1.5rem !important}
  .padding-bottom-xl-0{padding-bottom: 0rem !important} .padding-bottom-xl-1{padding-bottom: 0.3rem !important} .padding-bottom-xl-2{padding-bottom: 0.6rem !important} .padding-bottom-xl-3{padding-bottom: 0.9rem !important} .padding-bottom-xl-4{padding-bottom: 1.2rem !important} .padding-bottom-xl-5{padding-bottom: 1.5rem !important}
  .padding-left-xl-0{padding-left: 0rem !important} .padding-left-xl-1{padding-left: 0.3rem !important} .padding-left-xl-2{padding-left: 0.6rem !important} .padding-left-xl-3{padding-left: 0.9rem !important} .padding-left-xl-4{padding-left: 1.2rem !important} .padding-left-xl-5{padding-left: 1.5rem !important}
}
@media (min-width:1600px){
  .padding-2xl-0{padding: 0rem !important} .padding-2xl-1{padding: 0.3rem !important} .padding-2xl-2{padding: 0.6rem !important} .padding-2xl-3{padding: 0.9rem !important} .padding-2xl-4{padding: 1.2rem !important} .padding-2xl-5{padding: 1.5rem !important}
  .padding-top-2xl-0{padding-top: 0rem !important} .padding-top-2xl-1{padding-top: 0.3rem !important} .padding-top-2xl-2{padding-top: 0.6rem !important} .padding-top-2xl-3{padding-top: 0.9rem !important} .padding-top-2xl-4{padding-top: 1.2rem !important} .padding-top-2xl-5{padding-top: 1.5rem !important}
  .padding-right-2xl-0{padding-right: 0rem !important} .padding-right-2xl-1{padding-right: 0.3rem !important} .padding-right-2xl-2{padding-right: 0.6rem !important} .padding-right-2xl-3{padding-right: 0.9rem !important} .padding-right-2xl-4{padding-right: 1.2rem !important} .padding-right-2xl-5{padding-right: 1.5rem !important}
  .padding-bottom-2xl-0{padding-bottom: 0rem !important} .padding-bottom-2xl-1{padding-bottom: 0.3rem !important} .padding-bottom-2xl-2{padding-bottom: 0.6rem !important} .padding-bottom-2xl-3{padding-bottom: 0.9rem !important} .padding-bottom-2xl-4{padding-bottom: 1.2rem !important} .padding-bottom-2xl-5{padding-bottom: 1.5rem !important}
  .padding-left-2xl-0{padding-left: 0rem !important} .padding-left-2xl-1{padding-left: 0.3rem !important} .padding-left-2xl-2{padding-left: 0.6rem !important} .padding-left-2xl-3{padding-left: 0.9rem !important} .padding-left-2xl-4{padding-left: 1.2rem !important} .padding-left-2xl-5{padding-left: 1.5rem !important}
}

/* Margin */
.margin-0-auto, .margin-xs-0-auto{margin: 0 auto !important}
.margin-0, .margin-xs-0 {margin: 0rem !important} .margin-1, .margin-xs-1 {margin: 0.3rem !important} .margin-2, .margin-xs-2 {margin: 0.6rem !important} .margin-3, .margin-xs-3 {margin: 0.9rem !important} .margin-4, .margin-xs-4 {margin: 1.2rem !important} .margin-5, .margin-xs-5 {margin: 1.5rem !important}
.margin-top-0, .margin-top-xs-0{margin-top: 0rem !important} .margin-top-1, .margin-top-xs-1{margin-top: 0.3rem !important} .margin-top-2, .margin-top-xs-2{margin-top: 0.6rem !important} .margin-top-3, .margin-top-xs-3{margin-top: 0.9rem !important} .margin-top-4, .margin-top-xs-4{margin-top: 1.2rem !important} .margin-top-5, .margin-top-xs-5{margin-top: 1.5rem !important}
.margin-right-0, .margin-right-xs-0{margin-right: 0rem !important} .margin-right-1, .margin-right-xs-1{margin-right: 0.3rem !important} .margin-right-2, .margin-right-xs-2{margin-right: 0.6rem !important} .margin-right-3, .margin-right-xs-3{margin-right: 0.9rem !important} .margin-right-4, .margin-right-xs-4{margin-right: 1.2rem !important} .margin-right-5, .margin-right-xs-5{margin-right: 1.5rem !important}
.margin-bottom-0, .margin-bottom-xs-0{margin-bottom: 0rem !important} .margin-bottom-1, .margin-bottom-xs-1{margin-bottom: 0.3rem !important} .margin-bottom-2, .margin-bottom-xs-2{margin-bottom: 0.6rem !important} .margin-bottom-3, .margin-bottom-xs-3{margin-bottom: 0.9rem !important} .margin-bottom-4, .margin-bottom-xs-4{margin-bottom: 1.2rem !important} .margin-bottom-5, .margin-bottom-xs-5{margin-bottom: 1.5rem !important}
.margin-left-0, .margin-left-xs-0{margin-left: 0rem !important} .margin-left-1, .margin-left-xs-1{margin-left: 0.3rem !important} .margin-left-2, .margin-left-xs-2{margin-left: 0.6rem !important} .margin-left-3, .margin-left-xs-3{margin-left: 0.9rem !important} .margin-left-4, .margin-left-xs-4{margin-left: 1.2rem !important} .margin-left-5, .margin-left-xs-5{margin-left: 1.5rem !important}
@media (min-width:576px){
  .margin-s-0-auto{margin: 0 auto !important}
  .margin-s-0 {margin: 0rem !important} .margin-s-1 {margin: 0.3rem !important} .margin-s-2 {margin: 0.6rem !important} .margin-s-3 {margin: 0.9rem !important} .margin-s-4 {margin: 1.2rem !important} .margin-s-5 {margin: 1.5rem !important}
  .margin-top-s-0{margin-top: 0rem !important} .margin-top-s-1{margin-top: 0.3rem !important} .margin-top-s-2{margin-top: 0.6rem !important} .margin-top-s-3{margin-top: 0.9rem !important} .margin-top-s-4{margin-top: 1.2rem !important} .margin-top-s-5{margin-top: 1.5rem !important}
  .margin-right-s-0{margin-right: 0rem !important} .margin-right-s-1{margin-right: 0.3rem !important} .margin-right-s-2{margin-right: 0.6rem !important} .margin-right-s-3{margin-right: 0.9rem !important} .margin-right-s-4{margin-right: 1.2rem !important} .margin-right-s-5{margin-right: 1.5rem !important}
  .margin-bottom-s-0{margin-bottom: 0rem !important} .margin-bottom-s-1{margin-bottom: 0.3rem !important} .margin-bottom-s-2{margin-bottom: 0.6rem !important} .margin-bottom-s-3{margin-bottom: 0.9rem !important} .margin-bottom-s-4{margin-bottom: 1.2rem !important} .margin-bottom-s-5{margin-bottom: 1.5rem !important}
  .margin-left-s-0{margin-left: 0rem !important} .margin-left-s-1{margin-left: 0.3rem !important} .margin-left-s-2{margin-left: 0.6rem !important} .margin-left-s-3{margin-left: 0.9rem !important} .margin-left-s-4{margin-left: 1.2rem !important} .margin-left-s-5{margin-left: 1.5rem !important}
}
@media (min-width:768px){
  .margin-m-0-auto{margin: 0 auto !important}
  .margin-m-0 {margin: 0rem !important} .margin-m-1 {margin: 0.3rem !important} .margin-m-2 {margin: 0.6rem !important} .margin-m-3 {margin: 0.9rem !important} .margin-m-4 {margin: 1.2rem !important} .margin-m-5 {margin: 1.5rem !important}
  .margin-top-m-0{margin-top: 0rem !important} .margin-top-m-1{margin-top: 0.3rem !important} .margin-top-m-2{margin-top: 0.6rem !important} .margin-top-m-3{margin-top: 0.9rem !important} .margin-top-m-4{margin-top: 1.2rem !important} .margin-top-m-5{margin-top: 1.5rem !important}
  .margin-right-m-0{margin-right: 0rem !important} .margin-right-m-1{margin-right: 0.3rem !important} .margin-right-m-2{margin-right: 0.6rem !important} .margin-right-m-3{margin-right: 0.9rem !important} .margin-right-m-4{margin-right: 1.2rem !important} .margin-right-m-5{margin-right: 1.5rem !important}
  .margin-bottom-m-0{margin-bottom: 0rem !important} .margin-bottom-m-1{margin-bottom: 0.3rem !important} .margin-bottom-m-2{margin-bottom: 0.6rem !important} .margin-bottom-m-3{margin-bottom: 0.9rem !important} .margin-bottom-m-4{margin-bottom: 1.2rem !important} .margin-bottom-m-5{margin-bottom: 1.5rem !important}
  .margin-left-m-0{margin-left: 0rem !important} .margin-left-m-1{margin-left: 0.3rem !important} .margin-left-m-2{margin-left: 0.6rem !important} .margin-left-m-3{margin-left: 0.9rem !important} .margin-left-m-4{margin-left: 1.2rem !important} .margin-left-m-5{margin-left: 1.5rem !important}
}
@media (min-width:992px){
  .margin-l-0-auto{margin: 0 auto !important}
  .margin-l-0 {margin: 0rem !important} .margin-l-1 {margin: 0.3rem !important} .margin-l-2 {margin: 0.6rem !important} .margin-l-3 {margin: 0.9rem !important} .margin-l-4 {margin: 1.2rem !important} .margin-l-5 {margin: 1.5rem !important}
  .margin-top-l-0{margin-top: 0rem !important} .margin-top-l-1{margin-top: 0.3rem !important} .margin-top-l-2{margin-top: 0.6rem !important} .margin-top-l-3{margin-top: 0.9rem !important} .margin-top-l-4{margin-top: 1.2rem !important} .margin-top-l-5{margin-top: 1.5rem !important}
  .margin-right-l-0{margin-right: 0rem !important} .margin-right-l-1{margin-right: 0.3rem !important} .margin-right-l-2{margin-right: 0.6rem !important} .margin-right-l-3{margin-right: 0.9rem !important} .margin-right-l-4{margin-right: 1.2rem !important} .margin-right-l-5{margin-right: 1.5rem !important}
  .margin-bottom-l-0{margin-bottom: 0rem !important} .margin-bottom-l-1{margin-bottom: 0.3rem !important} .margin-bottom-l-2{margin-bottom: 0.6rem !important} .margin-bottom-l-3{margin-bottom: 0.9rem !important} .margin-bottom-l-4{margin-bottom: 1.2rem !important} .margin-bottom-l-5{margin-bottom: 1.5rem !important}
  .margin-left-l-0{margin-left: 0rem !important} .margin-left-l-1{margin-left: 0.3rem !important} .margin-left-l-2{margin-left: 0.6rem !important} .margin-left-l-3{margin-left: 0.9rem !important} .margin-left-l-4{margin-left: 1.2rem !important} .margin-left-l-5{margin-left: 1.5rem !important}
}
@media (min-width:1200px){
  .margin-xl-0-auto{margin: 0 auto !important}
  .margin-xl-0 {margin: 0rem !important} .margin-xl-1 {margin: 0.3rem !important} .margin-xl-2 {margin: 0.6rem !important} .margin-xl-3 {margin: 0.9rem !important} .margin-xl-4 {margin: 1.2rem !important} .margin-xl-5 {margin: 1.5rem !important}
  .margin-top-xl-0{margin-top: 0rem !important} .margin-top-xl-1{margin-top: 0.3rem !important} .margin-top-xl-2{margin-top: 0.6rem !important} .margin-top-xl-3{margin-top: 0.9rem !important} .margin-top-xl-4{margin-top: 1.2rem !important} .margin-top-xl-5{margin-top: 1.5rem !important}
  .margin-right-xl-0{margin-right: 0rem !important} .margin-right-xl-1{margin-right: 0.3rem !important} .margin-right-xl-2{margin-right: 0.6rem !important} .margin-right-xl-3{margin-right: 0.9rem !important} .margin-right-xl-4{margin-right: 1.2rem !important} .margin-right-xl-5{margin-right: 1.5rem !important}
  .margin-bottom-xl-0{margin-bottom: 0rem !important} .margin-bottom-xl-1{margin-bottom: 0.3rem !important} .margin-bottom-xl-2{margin-bottom: 0.6rem !important} .margin-bottom-xl-3{margin-bottom: 0.9rem !important} .margin-bottom-xl-4{margin-bottom: 1.2rem !important} .margin-bottom-xl-5{margin-bottom: 1.5rem !important}
  .margin-left-xl-0{margin-left: 0rem !important} .margin-left-xl-1{margin-left: 0.3rem !important} .margin-left-xl-2{margin-left: 0.6rem !important} .margin-left-xl-3{margin-left: 0.9rem !important} .margin-left-xl-4{margin-left: 1.2rem !important} .margin-left-xl-5{margin-left: 1.5rem !important}
}
@media (min-width:1600px){
  .margin-2xl-0-auto{margin: 0 auto !important}
  .margin-2xl-0 {margin: 0rem !important} .margin-2xl-1 {margin: 0.3rem !important} .margin-2xl-2 {margin: 0.6rem !important} .margin-2xl-3 {margin: 0.9rem !important} .margin-2xl-4 {margin: 1.2rem !important} .margin-2xl-5 {margin: 1.5rem !important}
  .margin-top-2xl-0{margin-top: 0rem !important} .margin-top-2xl-1{margin-top: 0.3rem !important} .margin-top-2xl-2{margin-top: 0.6rem !important} .margin-top-2xl-3{margin-top: 0.9rem !important} .margin-top-2xl-4{margin-top: 1.2rem !important} .margin-top-2xl-5{margin-top: 1.5rem !important}
  .margin-right-2xl-0{margin-right: 0rem !important} .margin-right-2xl-1{margin-right: 0.3rem !important} .margin-right-2xl-2{margin-right: 0.6rem !important} .margin-right-2xl-3{margin-right: 0.9rem !important} .margin-right-2xl-4{margin-right: 1.2rem !important} .margin-right-2xl-5{margin-right: 1.5rem !important}
  .margin-bottom-2xl-0{margin-bottom: 0rem !important} .margin-bottom-2xl-1{margin-bottom: 0.3rem !important} .margin-bottom-2xl-2{margin-bottom: 0.6rem !important} .margin-bottom-2xl-3{margin-bottom: 0.9rem !important} .margin-bottom-2xl-4{margin-bottom: 1.2rem !important} .margin-bottom-2xl-5{margin-bottom: 1.5rem !important}
  .margin-left-2xl-0{margin-left: 0rem !important} .margin-left-2xl-1{margin-left: 0.3rem !important} .margin-left-2xl-2{margin-left: 0.6rem !important} .margin-left-2xl-3{margin-left: 0.9rem !important} .margin-left-2xl-4{margin-left: 1.2rem !important} .margin-left-2xl-5{margin-left: 1.5rem !important}
}

/* Width & Height */
.w5{width: 5px !important}        .h5{height: 5px !important}         .wmin5{min-width: 5px !important}         .wmax5{max-width: 5px !important}         .hmin5{min-height: 5px !important}        .hmax5{max-height: 5px !important}
.w10{width: 10px !important}      .h10{height: 10px !important}       .wmin10{min-width: 10px !important}       .wmax10{max-width: 10px !important}       .hmin10{min-height: 10px !important}      .hmax10{max-height: 10px !important}
.w15{width: 15px !important}      .h15{height: 15px !important}       .wmin15{min-width: 15px !important}       .wmax15{max-width: 15px !important}       .hmin15{min-height: 15px !important}      .hmax15{max-height: 15px !important}
.w20{width: 20px !important}      .h20{height: 20px !important}       .wmin20{min-width: 20px !important}       .wmax20{max-width: 20px !important}       .hmin20{min-height: 20px !important}      .hmax20{max-height: 20px !important}
.w25{width: 25px !important}      .h25{height: 25px !important}       .wmin25{min-width: 25px !important}       .wmax25{max-width: 25px !important}       .hmin25{min-height: 25px !important}      .hmax25{max-height: 25px !important}
.w30{width: 30px !important}      .h30{height: 30px !important}       .wmin30{min-width: 30px !important}       .wmax30{max-width: 30px !important}       .hmin30{min-height: 30px !important}      .hmax30{max-height: 30px !important}
.w40{width: 40px !important}      .h40{height: 40px !important}       .wmin40{min-width: 40px !important}       .wmax40{max-width: 40px !important}       .hmin40{min-height: 40px !important}      .hmax40{max-height: 40px !important}
.w50{width: 50px !important}      .h50{height: 50px !important}       .wmin50{min-width: 50px !important}       .wmax50{max-width: 50px !important}       .hmin50{min-height: 50px !important}      .hmax50{max-height: 50px !important}
.w60{width: 60px !important}      .h60{height: 60px !important}       .wmin60{min-width: 60px !important}       .wmax60{max-width: 60px !important}       .hmin60{min-height: 60px !important}      .hmax60{max-height: 60px !important}
.w70{width: 70px !important}      .h70{height: 70px !important}       .wmin70{min-width: 70px !important}       .wmax70{max-width: 70px !important}       .hmin70{min-height: 70px !important}      .hmax70{max-height: 70px !important}
.w80{width: 80px !important}      .h80{height: 80px !important}       .wmin80{min-width: 80px !important}       .wmax80{max-width: 80px !important}       .hmin80{min-height: 80px !important}      .hmax80{max-height: 80px !important}
.w90{width: 90px !important}      .h90{height: 90px !important}       .wmin90{min-width: 90px !important}       .wmax90{max-width: 90px !important}       .hmin90{min-height: 90px !important}      .hmax90{max-height: 90px !important}
.w100{width: 100px !important}    .h100{height: 100px !important}     .wmin100{min-width: 100px !important}     .wmax100{max-width: 100px !important}     .hmin100{min-height: 100px !important}    .hmax100{max-height: 100px !important}
.w150{width: 150px !important}    .h150{height: 150px !important}     .wmin150{min-width: 150px !important}     .wmax150{max-width: 150px !important}     .hmin150{min-height: 150px !important}    .hmax150{max-height: 150px !important}
.w200{width: 200px !important}    .h200{height: 200px !important}     .wmin200{min-width: 200px !important}     .wmax200{max-width: 200px !important}     .hmin200{min-height: 200px !important}    .hmax200{max-height: 200px !important}
.w250{width: 250px !important}    .h250{height: 250px !important}     .wmin250{min-width: 250px !important}     .wmax250{max-width: 250px !important}     .hmin250{min-height: 250px !important}    .hmax250{max-height: 250px !important}
.w300{width: 300px !important}    .h300{height: 300px !important}     .wmin300{min-width: 300px !important}     .wmax300{max-width: 300px !important}     .hmin300{min-height: 300px !important}    .hmax300{max-height: 300px !important}
.w350{width: 350px !important}    .h350{height: 350px !important}     .wmin350{min-width: 350px !important}     .wmax350{max-width: 350px !important}     .hmin350{min-height: 350px !important}    .hmax350{max-height: 350px !important}
.w400{width: 400px !important}    .h400{height: 400px !important}     .wmin400{min-width: 400px !important}     .wmax400{max-width: 400px !important}     .hmin400{min-height: 400px !important}    .hmax400{max-height: 400px !important}
.w450{width: 450px !important}    .h450{height: 450px !important}     .wmin450{min-width: 450px !important}     .wmax450{max-width: 450px !important}     .hmin450{min-height: 450px !important}    .hmax450{max-height: 450px !important}
.w500{width: 500px !important}    .h500{height: 500px !important}     .wmin500{min-width: 500px !important}     .wmax500{max-width: 500px !important}     .hmin500{min-height: 500px !important}    .hmax500{max-height: 500px !important}
.w600{width: 600px !important}    .h600{height: 600px !important}     .wmin600{min-width: 600px !important}     .wmax600{max-width: 600px !important}     .hmin600{min-height: 600px !important}    .hmax600{max-height: 600px !important}
.w700{width: 700px !important}    .h700{height: 700px !important}     .wmin700{min-width: 700px !important}     .wmax700{max-width: 700px !important}     .hmin700{min-height: 700px !important}    .hmax700{max-height: 700px !important}
.w800{width: 800px !important}    .h800{height: 800px !important}     .wmin800{min-width: 800px !important}     .wmax800{max-width: 800px !important}     .hmin800{min-height: 800px !important}    .hmax800{max-height: 800px !important}
.w900{width: 900px !important}    .h900{height: 900px !important}     .wmin900{min-width: 900px !important}     .wmax900{max-width: 900px !important}     .hmin900{min-height: 900px !important}    .hmax900{max-height: 900px !important}
.w1000{width: 1000px !important}  .h1000{height: 1000px !important}   .wmin1000{min-width: 1000px !important}   .wmax1000{max-width: 1000px !important}   .hmin1000{min-height: 1000px !important}  .hmax1000{max-height: 1000px !important}
.w10p{width: 10% !important}      .h10p{height: 10% !important}       .wmin10p{min-width: 10% !important}       .wmax10p{max-width: 10% !important}       .hmin10p{min-height: 10% !important}      .hmax10p{max-height: 10% !important}
.w20p{width: 20% !important}      .h20p{height: 20% !important}       .wmin20p{min-width: 20% !important}       .wmax20p{max-width: 20% !important}       .hmin20p{min-height: 20% !important}      .hmax20p{max-height: 20% !important}
.w30p{width: 30% !important}      .h30p{height: 30% !important}       .wmin30p{min-width: 30% !important}       .wmax30p{max-width: 30% !important}       .hmin30p{min-height: 30% !important}      .hmax30p{max-height: 30% !important}
.w40p{width: 40% !important}      .h40p{height: 40% !important}       .wmin40p{min-width: 40% !important}       .wmax40p{max-width: 40% !important}       .hmin40p{min-height: 40% !important}      .hmax20p{max-height: 40% !important}
.w50p{width: 50% !important}      .h50p{height: 50% !important}       .wmin50p{min-width: 50% !important}       .wmax50p{max-width: 50% !important}       .hmin50p{min-height: 50% !important}      .hmax20p{max-height: 50% !important}
.w60p{width: 60% !important}      .h60p{height: 60% !important}       .wmin60p{min-width: 60% !important}       .wmax60p{max-width: 60% !important}       .hmin60p{min-height: 60% !important}      .hmax20p{max-height: 60% !important}
.w70p{width: 70% !important}      .h70p{height: 70% !important}       .wmin70p{min-width: 70% !important}       .wmax70p{max-width: 70% !important}       .hmin70p{min-height: 70% !important}      .hmax70p{max-height: 70% !important}
.w80p{width: 80% !important}      .h80p{height: 80% !important}       .wmin80p{min-width: 80% !important}       .wmax80p{max-width: 80% !important}       .hmin80p{min-height: 80% !important}      .hmax80p{max-height: 80% !important}
.w90p{width: 90% !important}      .h90p{height: 90% !important}       .wmin90p{min-width: 90% !important}       .wmax90p{max-width: 90% !important}       .hmin90p{min-height: 90% !important}      .hmax20p{max-height: 90% !important}
.w100p{width: 100% !important}    .h100p{height: 100% !important}     .wmin20p{min-width: 100% !important}      .wmax100p{max-width: 100% !important}     .hmin100p{min-height: 100% !important}    .hmax100p{max-height: 100% !important}
.w100vw{width: 100vw !important}  .h100vh{height: 100vh !important}

/* Various with div's */
.circle{border-radius: 50%}
.circle-text{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 100%; text-align: center}
.absolute-full{width: 100%; height: 100%; background-size: cover;}

/* Overflow */
.overflow-x{overflow-x: auto !important}
.overflow-y{overflow-y: auto !important}
.overflow-hidden{overflow: hidden !important}

/* Inputs */
input:focus, .input:focus, textarea:focus, select:focus, [contentEditable=true]:focus{
  outline: 1px solid var(--color-orange-summer-citrus);
}
  input[type="checkbox"]:focus, input[type="radio"]:focus, input[type='range']:focus{
    outline: 0px;
  }

  input, .input, select{
    padding: 16px; 
    width: 100%; 
    height: 1.8rem; 
    border: 1px solid var(--color-grey-5); 
    border-radius: 50px;
  }
  
  input[type="checkbox"], input[type="radio"]{
    appearance: none;
    padding: initial; 
    width: initial; 
    height: 14px; 
    border: initial; 
    border-radius: initial;
  }
  
  input[type='range']{
    appearance: none;
    padding: initial; 
    width: 100%; 
    height: 10px; 
    border: 1px solid var(--color-grey-5); 
    border-radius: 50px;
    background: var(--color-grey-3);
    cursor: pointer;
  }
  
    input[type='range']::-webkit-slider-thumb{
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%; 
      background: var(--color-grey-30);
      cursor: grab;
    }
    input[type='range']::-moz-range-thumb{
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%; 
      background: var(--color-grey-30);
      cursor: grab;
    }
    input[type='range']:hover::-webkit-slider-thumb{
      background: var(--color-grey-40);
    }
    input[type='range']:hover::-moz-range-thumb{
      background: var(--color-grey-40);
    }
    input[type='range']:active::-webkit-slider-thumb{
      cursor: grabbing;
    }
    input[type='range']:active::-moz-range-thumb{
      cursor: grabbing;
    }

textarea, .wysiwyg {
  padding: 0.6rem; 
  margin: 0.4rem 0; 
  width: 100%; 
  height: 10rem; 
  border: 1px solid var(--color-grey-5); 
  overflow: auto;
  border-radius: 18px;
}

[contentEditable=true]:empty:not(:focus):before{content:attr(data-placeholder); font-size: 0.8rem; color: var(--color-grey-25)}
input[type="checkbox"]:before, input[type="checkbox"]:checked::after{border-radius: 2px;} input[type="radio"]:before, input[type="radio"]:checked::after{border-radius: 50%;}
input[type="checkbox"]:before, input[type="radio"]:before{position: relative; content: " "; display: block; width: 14px; height: 14px; cursor: pointer; border: 2px solid var(--color-grey-50)}
input[type="checkbox"]:checked::after, input[type="radio"]:checked::after{position: relative; top: -15px; left: 3px; content: " "; display: block; width: 12px; height: 12px; cursor: pointer; background: var(--color-grey-50)}
select{width: 100%; background: var(--color-white); border: 1px solid var(--color-grey-5); padding: 0.3rem 0.6rem; cursor: pointer;}
select::-ms-expand{display: none;}
label {padding-left: 5px; height: 14px; cursor: pointer; font-size: 0.8rem;}
/* Input colors */
input[type="checkbox"].red:before, input.red[type="radio"]:before{border: 2px solid var(--color-red-firebrick)}
input[type="checkbox"].green:before, input.green[type="radio"]:before{border: 2px solid var(--color-green-luigi)}
input[type="checkbox"].blue:before, input.blue[type="radio"]:before{border: 2px solid var(--color-blue-brescian)}
input[type="checkbox"].yellow:before, input.yellow[type="radio"]:before{border: 2px solid var(--color-yellow-tang)}
input[type="checkbox"].red:checked::after, input.red[type="radio"]:checked::after{background: var(--color-red-firebrick)}
input[type="checkbox"].green:checked::after, input.green[type="radio"]:checked::after{background: var(--color-green-luigi)}
input[type="checkbox"].blue:checked::after, input.blue[type="radio"]:checked::after{background: var(--color-blue-brescian)}
input[type="checkbox"].yellow:checked::after, input.yellow[type="radio"]:checked::after{background: var(--color-yellow-tang)}
select.red{border-color: var(--color-red-firebrick)}
select.green{border-color: var(--color-green-luigi)}
select.blue{border-color: var(--color-blue-brescian)}
select.yellow{border-color: var(--color-yellow-tang)}

/* Tables */
table{width: 100%; border: 0px; padding: 0px; border-collapse: collapse; border-spacing: 0px; background: var(--color-white); font-size: 0.9rem; overflow: auto;}
thead, th{display: none;}
tr {border-bottom: 3px solid var(--color-grey-5); display: block; margin-bottom: 12px;}
table.vertical tr{border-bottom: 0; margin-bottom: 0}
table.vertical tr:last-child{border-bottom: 3px solid var(--color-grey-5); margin-bottom: 12px;}
th{background: var(--color-grey-3); font-weight: bold; border: 1px solid var(--color-white)}
td{display: block}
th, td {padding: 5px; border-left: 1px solid var(--color-grey-3); border-top: 1px solid var(--color-grey-3); border-right: 1px solid var(--color-grey-3); white-space: normal; text-align: right;}
td::before {content: attr(data-label); float: left; font-weight: bold;}
@media (min-width:768px){
  thead{display: table-header-group}
  th{display: block}
  tr{border: 0; display: table-row; font-weight: inherit;}
  th, td{text-align: center; display: table-cell;}
  td{border-bottom: 1px solid var(--color-grey-3);}
  td::before{display: none;}
}

/* Tooltip */
[data-tooltip]{
  --tooltip-bg-color: var(--color-black-75);
  --tooltip-color: var(--color-white);
  --tooltip-arrow-width: 5px;
  --tooltip-margin: 2px;
  position: relative;
}
  /* Tooltip - Arrow */
  [data-tooltip]::before{
    display: none;
    content: "";
    position: absolute;
    margin-left: calc(var(--tooltip-arrow-width) * -1);
    border-width: var(--tooltip-arrow-width);
    border-style: solid;
  }
    [data-tooltip]:hover::before{
      display: block;
    }
    [data-tooltip]::before,
    [data-tooltip][data-tooltip-position="top"]::before{
      top: calc(0px - var(--tooltip-arrow-width) - var(--tooltip-margin));
      left: 50%;
      border-color: var(--tooltip-bg-color) transparent transparent transparent;
    }
    [data-tooltip][data-tooltip-position="right"]::before{
      top: calc(var(--tooltip-arrow-width) + var(--tooltip-margin));
      left: calc(100% + var(--tooltip-margin));
      border-color: transparent var(--tooltip-bg-color) transparent transparent;
    }
    [data-tooltip][data-tooltip-position="bottom"]::before{
      top: calc(100% - var(--tooltip-arrow-width) + var(--tooltip-margin));
      left: 50%;
      border-color: transparent transparent var(--tooltip-bg-color) transparent;
    }
    [data-tooltip][data-tooltip-position="left"]::before{
      top: calc(var(--tooltip-arrow-width) + var(--tooltip-margin));
      left: calc(var(--tooltip-margin) * -1);
      border-color: transparent transparent transparent var(--tooltip-bg-color);
    }
  /* Tooltip - text */
  [data-tooltip]::after{
    display: none;
    content: attr(data-tooltip);
    position: absolute;
    background-color: var(--tooltip-bg-color);
    color: var(--tooltip-color);
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    font-size: 0.7rem;
    z-index: 1000;
    min-width: 80px;
    max-width: 250px;
    width: max-content;
  }
    [data-tooltip]:hover::after{
      display: block;
    }
    [data-tooltip]::after,
    [data-tooltip][data-tooltip-position="top"]::after{
      top: initial;
      right: initial;
      bottom: calc(100% + var(--tooltip-arrow-width) + var(--tooltip-margin));
      left: initial;
    }
    [data-tooltip][data-tooltip-position="right"]::after{
      top: 0px;
      right: initial;
      bottom: initial;
      left: calc(100% + var(--tooltip-arrow-width) + var(--tooltip-margin));
    }
    [data-tooltip][data-tooltip-position="bottom"]::after{
      top: calc(100% + var(--tooltip-arrow-width) + var(--tooltip-margin));
      right: initial;
      bottom: initial;
      left: initial;
    }
    [data-tooltip][data-tooltip-position="left"]::after{
      top: 0px;
      right: calc(100% + var(--tooltip-arrow-width) + var(--tooltip-margin));
      bottom: initial;
      left: initial;
    }

/* Various with text */
.b, .bold, .bolder{font-weight: bolder !important}
._b, ._bold, ._bolder{font-weight: normal !important}
.i, .italic{font-style: italic !important}
.align-left, .align-xs-left{text-align: left !important} .align-center, .align-xs-center{text-align: center !important} .align-right, .align-xs-right{text-align: right !important}
@media (min-width:576px){
  .align-s-left{text-align: left !important} .align-s-center{text-align: center !important} .align-s-right{text-align: right !important}
}
@media (min-width:768px){
  .align-m-left{text-align: left !important} .align-m-center{text-align: center !important} .align-m-right{text-align: right !important}
}
@media (min-width:992px){
  .align-l-left{text-align: left !important} .align-l-center{text-align: center !important} .align-l-right{text-align: right !important}
}
@media (min-width:1200px){
  .align-xl-left{text-align: left !important} .align-xl-center{text-align: center !important} .align-xl-right{text-align: right !important}
}
@media (min-width:1600px){
  .align-2xl-left{text-align: left !important} .align-2xl-center{text-align: center !important} .align-2xl-right{text-align: right !important}
}

/* Text color */
.c-black{color: var(--color-black)}
.c-white{color: var(--color-white)} 
.c-red{color: var(--color-red-firebrick)}
.c-blue{color: var(--color-blue-brescian)}
.c-green{color: var(--color-green-luigi)}
.c-yellow{color: var(--color-yellow-tang)}
.c-error{color: var(--color-error)}
  .c-error.fill{color: var(--color-filled-error); background: var(--color-filled-error-bg)}
  .c-error.border{border: 1px solid var(--color-border-error)}
.c-success{color: var(--color-success)}
  .c-success.fill{color: var(--color-filled-success); background: var(--color-filled-success-bg)}
  .c-success.border{border: 1px solid var(--color-border-success)}
.c-warning{color: var(--color-warning)}
  .c-warning.fill{color: var(--color-filled-warning); background: var(--color-filled-warning-bg)}
  .c-warning.border{border: 1px solid var(--color-border-warning)}

/* Backgrounds */
.bg-black{background: var(--color-black)}
.bg-white{background: var(--color-white)} 
.bg-red{background: var(--color-red-firebrick)}
.bg-blue{background: var(--color-blue-brescian)}
.bg-green{background: var(--color-green-luigi)}
.bg-yellow{background: var(--color-yellow-tang)}
.bg-error{background: var(--color-error)}
.bg-success{background: var(--color-success)}
.bg-warning{background: var(--color-warning)}

/* Text size */
.size-1{font-size: 0.5rem !important}
.size-2{font-size: 0.6rem !important}
.size-3{font-size: 0.7rem !important}
.size-4{font-size: 0.8rem !important}
.size-5{font-size: 0.9rem !important}
.size-6{font-size: 1.0rem !important}
.size-7{font-size: 1.2rem !important}
.size-8{font-size: 1.4rem !important}
.size-9{font-size: 1.6rem !important}
.size-10{font-size: 1.8rem !important}
.size-11{font-size: 2.0rem !important}
.size-12{font-size: 2.5rem !important}
.size-13{font-size: 3.0rem !important}
.size-14{font-size: 4.0rem !important}
.size-15{font-size: 5.0rem !important}

/* Text paragraph */
.indent-0{text-indent: 0rem;} 
.indent-1{text-indent: 0.5rem;} 
.indent-2{text-indent: 1rem;} 
.indent-3{text-indent: 1.5rem;} 
.indent-4{text-indent: 2rem;} 
.indent-5{text-indent: 2.5rem;} 

/* Show/Hide */
.show, .show-xs {display: initial !important;}
.show-s, .show-m, .show-l, .show-xl{display: none !important}
@media (min-width:576px){.show-s{display: initial !important}}
@media (min-width:768px){.show-m{display: initial !important}}
@media (min-width:992px){.show-l{display: initial !important}}
@media (min-width:1200px){.show-xl{display: initial !important}}
@media (min-width:1600px){.show-2xl{display: initial !important}}
td.show, th.show, td.show-xs, th.show-xs {display: table-cell !important}
td.show-s, th.show-s, td.show-m, th.show-m, td.show-l, th.show-l, td.show-xl, th.show-xl{display: none !important}
@media (min-width:576px){td.show-s, th.show-s{display: table-cell !important}}
@media (min-width:768px){td.show-m, th.show-m{display: table-cell !important}}
@media (min-width:992px){td.show-l, th.show-l{display: table-cell !important}}
@media (min-width:1200px){td.show-xl, th.show-xl{display: table-cell !important}}
@media (min-width:1600px){td.show-2xl, th.show-2xl{display: table-cell !important}}

.hide, .hide-xs{display: none !important}
@media (min-width:576px){.hide-s{display: none !important}}
@media (min-width:768px){.hide-m{display: none !important}}
@media (min-width:992px){.hide-l{display: none !important}}
@media (min-width:1200px){.hide-xl{display: none !important}}
@media (min-width:1600px){.hide-2xl{display: none !important}}


/* Alerts */
.alert_box:empty {display: none}
.alert {display: block; border-radius: 6px; padding: 10px; margin-top: 2px; font-size: 0.8rem; width: 100%} .alert:first-child{margin-top: 0px}
.alert a{text-decoration: underline;}
.alert.box{border-radius: 0}
.alert.green{background: var(--color-filled-success-bg); border: 1px solid var(--color-border-success); color: var(--color-filled-success)}
.alert.green a{color: var(--color-filled-success)}
.alert.red{background: var(--color-filled-error-bg); border: 1px solid var(--color-border-error); color: var(--color-filled-error)}
.alert.red a{color: var(--color-filled-error)}
.alert.yellow{background: var(--color-filled-warning-bg); border: 1px solid var(--color-border-warning); color: var(--color-filled-warning)}
.alert.yellow a{color: var(--color-filled-warning)}
.alerts_js {position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000000; padding: 4px;}
.alerts_js .alert {position: relative; margin: 0 auto; margin: 4px 0;}

/* Button */
a.button{
  font-size: 0.9rem;
}

a.button:hover{
  text-decoration: none;
}

a.button img{
  max-width: inherit !important;
}

.button{
  display: inline-flex; 
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  cursor: pointer; 
  text-decoration: none !important; 
  font-size: 0.9rem; 
  padding: 8px 14px; 
  border: 0; 
  border-radius: 50px;
}

.button.red{color: var(--color-white) !important; background: var(--color-red-ares)}
.button.green{color: var(--color-white) !important; background: var(--color-green-luigi)}
.button.blue{color: var(--color-white) !important; background: var(--color-blue-brescian)}
.button.yellow{color: var(--color-white) !important; background: var(--color-yellow-mikado)}
.button.grey{color: var(--color-white) !important; background: var(--color-grey-25)}
.button.grey-light-gradient{color: var(--color-black); background: linear-gradient(0deg, var(--color-grey-3), var(--color-white))}

.button-group{padding: 2px 5px;}
.button-group .button{border: 1px solid var(--color-grey-5); border-right: 0; border-radius: 0px;}
.button-group .button:first-child{border-top-left-radius: 50px; border-bottom-left-radius: 50px}
.button-group .button:last-child{border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-right: 1px solid var(--color-grey-5)}
.button-group .disabled{border-right: 0 !important;}
.button-group .disabled:last-child{border-right: 1px solid var(--color-grey-5) !important}

.disabled{
  border: 1px solid var(--color-grey-3) !important; 
  background: var(--color-grey-5) !important; 
  color: var(--color-grey-50) !important; 
  cursor: not-allowed !important;
}

/* Pagination */
.page{padding: 3px 5px; margin: 0px 1px 3px 1px; display: block; background: var(--color-white)}
.page:hover{text-decoration: none}
.page.blue{border: 1px solid var(--color-blue-brescian)}
.page.blue:hover, .page.blue.active{color: var(--color-white); background: var(--color-blue-brescian)}
.page.green{border: 1px solid var(--color-green-luigi)}
.page.green:hover, .page.green.active{color: var(--color-white); background: var(--color-green-luigi)}

/* Ordering */
.order-1{order: 1; -webkit-order: 1;} .order-2{order: 2; -webkit-order: 2;} .order-3{order: 3; -webkit-order: 3;} .order-4{order: 4; -webkit-order: 4;} .order-5{order: 5; -webkit-order: 5;}
.order-6{order: 6; -webkit-order: 6;} .order-7{order: 7; -webkit-order: 7;} .order-8{order: 8; -webkit-order: 8;} .order-9{order: 9; -webkit-order: 9;} .order-10{order: 10; -webkit-order: 10;}
.order-11{order: 11; -webkit-order: 11;} .order-12{order: 12; -webkit-order: 12;} .order-13{order: 13; -webkit-order: 13;} .order-14{order: 14; -webkit-order: 14;} .order-15{order: 15; -webkit-order: 15;}
.order-16{order: 16; -webkit-order: 16;} .order-17{order: 17; -webkit-order: 17;} .order-18{order: 18; -webkit-order: 18;} .order-19{order: 19; -webkit-order: 19;} .order-20{order: 20; -webkit-order: 20;}
.order-21{order: 21; -webkit-order: 21;} .order-22{order: 22; -webkit-order: 22;} .order-23{order: 23; -webkit-order: 23;} .order-24{order: 24; -webkit-order: 24;} .order-25{order: 25; -webkit-order: 25;}
.order-26{order: 26; -webkit-order: 26;} .order-27{order: 27; -webkit-order: 27;} .order-28{order: 28; -webkit-order: 28;} .order-29{order: 29; -webkit-order: 29;} .order-30{order: 30; -webkit-order: 30;}
.order-31{order: 31; -webkit-order: 31;} .order-32{order: 32; -webkit-order: 32;} .order-33{order: 33; -webkit-order: 33;} .order-34{order: 34; -webkit-order: 34;} .order-35{order: 35; -webkit-order: 35;}
.order-36{order: 36; -webkit-order: 36;} .order-37{order: 37; -webkit-order: 37;} .order-38{order: 38; -webkit-order: 38;} .order-39{order: 39; -webkit-order: 39;} .order-40{order: 40; -webkit-order: 40;}
.order-41{order: 41; -webkit-order: 41;} .order-42{order: 42; -webkit-order: 42;} .order-43{order: 43; -webkit-order: 43;} .order-44{order: 44; -webkit-order: 44;} .order-45{order: 45; -webkit-order: 45;}
.order-46{order: 46; -webkit-order: 46;} .order-47{order: 47; -webkit-order: 47;} .order-48{order: 48; -webkit-order: 48;} .order-49{order: 49; -webkit-order: 49;} .order-50{order: 50; -webkit-order: 50;}

/* Box shadow */
.shadow-0{-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);}
.shadow-right-1{-webkit-box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.5); box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.5);}
.inner-shadow-right-1{-webkit-box-shadow: inset 1px 0px 3px 0px rgba(0,0,0,0.5); -moz-box-shadow: inset 1px 0px 3px 0px rgba(0,0,0,0.5); box-shadow: inset 1px 0px 3px 0px rgba(0,0,0,0.5);}
.shadow-bottom{-webkit-box-shadow: 0px 5px 5px 0px rgba(100,100,100,0.5); -moz-box-shadow: 0px 5px 5px 0px rgba(100,100,100,0.5); box-shadow: 0px 5px 5px 0px rgba(100,100,100,0.5);}
.box-shadow-bottom{height: 5px; width: 100%; background: linear-gradient(180deg,rgb(180, 180, 180) 0%, rgba(255,255,255,0) 100%); content: ""}

/**
* Loaders 
*/

.loader{
  border-style: solid;
  border-color: rgba(255,255,255,0.85);
  border-top-color: var(--color-grey-50);
  border-radius: 50%;
  animation: loaderSpin 1.5s ease-in-out infinite;
}
  .loader.s16 {border-width: 4px; width: 16px; height: 16px;}
  .loader.s20 {border-width: 4px; width: 20px; height: 20px;}
  .loader.s24 {border-width: 4px; width: 24px; height: 24px;}

  .loader.green{border-top-color: var(--color-success);}
  .loader.yellow{border-top-color: var(--color-warning);}
  .loader.red{border-top-color: var(--color-error);}

  @keyframes loaderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

.box-loading { 
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: box-loading-anim;
  animation-timing-function: linear;
  background: var(--color-white);
  background-image: linear-gradient(90deg, transparent 0%, var(--color-black-5) 25%, transparent 50%);
  background-repeat: no-repeat;
}
  @keyframes box-loading-anim {
    0% {background-position: -100vh 0;}
    100% {background-position: 100vh 0;}
  }

div.ra-cube-loader{
  --cube-size: 50px;
  --leaf-background: var(--color-orange-summer-citrus);
  --leaf-background2: var(--color-black-5);
  --leaf-background3: var(--color-black-10);
}

div.ra-cube-loader div.root-folding{
  width: var(--cube-size);
  height: var(--cube-size);
  transform: rotate(45deg);
  font-size: 0;
}

div.ra-cube-loader div.root-folding span.leaf{
  width: calc(var(--cube-size) / 2);
  height: calc(var(--cube-size) / 2);
  display: inline-block;
}
div.ra-cube-loader div.root-folding span.leaf::before{
  content: "";
  background-color: var(--leaf-background);
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 100% 100%;
  animation: anim-cube-loader-folding 2.5s infinite linear both;
}
  @keyframes anim-cube-loader-folding {
    0%, 10% {
      transform: perspective(140px) rotateX(-180deg);
      opacity: 0;
    }
    25%, 75% {
      transform: perspective(140px) rotateX(0deg);
      opacity: 1;
    }
    90%, 100% {
      transform: perspective(140px) rotateY(180deg);
      opacity: 0;
    }
  }
div.ra-cube-loader div.root-folding span.leaf:nth-of-type(2){
  transform: rotateZ(90deg);
}
  div.ra-cube-loader div.root-folding span.leaf:nth-of-type(2)::before{
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background-color: var(--leaf-background2);
  }
div.ra-cube-loader div.root-folding span.leaf:nth-of-type(3){
  transform: rotateZ(270deg);
}
  div.ra-cube-loader div.root-folding span.leaf:nth-of-type(3)::before{
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    background-color: var(--leaf-background2);
  }
div.ra-cube-loader div.root-folding span.leaf:nth-of-type(4){
  transform: rotateZ(180deg);
}
  div.ra-cube-loader div.root-folding span.leaf:nth-of-type(4)::before{
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    background-color: var(--leaf-background3);
  }

.ra-dots-loader {
  --ra-dots-loader-color: var(--color-grey-50);
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--ra-dots-loader-color);
  color: var(--ra-dots-loader-color);
  box-shadow: 9999px 0 0 -5px var(--ra-dots-loader-color);
  animation: anim-ra-dots-loader 1.5s infinite linear;
  animation-delay: .25s;
}
  .ra-dots-loader::before, .ra-dots-loader::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--ra-dots-loader-color);
    color: var(--ra-dots-loader-color);
  }
  .ra-dots-loader::before {
    box-shadow: 9984px 0 0 -5px var(--ra-dots-loader-color);
    animation: anim-ra-dots-loader-before 1.5s infinite linear;
    animation-delay: 0s;
  }
  .ra-dots-loader::after {
    box-shadow: 10014px 0 0 -5px var(--ra-dots-loader-color);
    animation: anim-ra-dots-loader-after 1.5s infinite linear;
    animation-delay: .5s;
  }

  @keyframes anim-ra-dots-loader-before {
    0% {box-shadow: 9984px 0 0 -5px var(--ra-dots-loader-color);}
    30% {box-shadow: 9984px 0 0 2px var(--ra-dots-loader-color);}
    60%,100% {box-shadow: 9984px 0 0 -5px var(--ra-dots-loader-color);}
  }
  @keyframes anim-ra-dots-loader {0% {box-shadow: 9999px 0 0 -5px var(--ra-dots-loader-color);}
    30% {box-shadow: 9999px 0 0 2px var(--ra-dots-loader-color);}
    60%,100% {box-shadow: 9999px 0 0 -5px var(--ra-dots-loader-color);}
  }
  @keyframes anim-ra-dots-loader-after {
    0% {box-shadow: 10014px 0 0 -5px var(--ra-dots-loader-color);}
    30% {box-shadow: 10014px 0 0 2px var(--ra-dots-loader-color);}
    60%,100% {box-shadow: 10014px 0 0 -5px var(--ra-dots-loader-color);}
  }

/* Drag and Drop file area */
div.ra-dnd{
  outline: 2px dashed var(--color-grey-25); 
  outline-offset: -10px; 
  padding: 20px; 
  background: var(--color-grey-3); 
  font-size: 0.8rem; 
  color: var(--color-grey-50); 
  border-radius: 5px; 
  text-align: center;
}
  div.ra-dnd:hover, 
  div.ra-dnd.hover{
    cursor: pointer; 
    background: var(--color-white); 
    outline: 2px solid var(--color-green-luigi); 
    outline-offset: 5px;
  }

div.ra-dnd div.root-empty{
  display: block; 
  padding: 20px
}

div.ra-dnd div.root-files{
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  padding: 0;
  justify-content: flex-start;
  align-content: stretch;
}

div.ra-dnd .root-thumbnail{
  flex: 0 0 auto;
  width: 140px;
  max-width: 100%;
  min-height: 105px;
  padding: 0;  
  margin: 18px 10px; 
  text-align: left;
  display: flex; 
  flex-direction: column; 
  flex-wrap: nowrap; 
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-white);
  border-radius: 5px;
}

div.ra-dnd .root-thumbnail img{
  object-fit: contain;
}

div.ra-dnd .root-thumbnail .ra-dnd-image{
  height: 120px; 
  max-height: 100%;
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

div.ra-dnd .root-thumbnail .ra-dnd-info{
  width: 100%;
  padding: 2px 5px;
}

div.ra-dnd .root-thumbnail .ra-dnd-info .ra-dnd-name{
  overflow: hidden; 
  text-overflow: ellipsis; 
  font-size: 0.6rem;
  text-align: left;
}

div.ra-dnd .root-thumbnail .ra-dnd-info .ra-dnd-size{
  font-size: 0.6rem;
  text-align: right;
}

div.ra-dnd .root-thumbnail .ra-dnd-remove{
  position: absolute;
  top: -10px;
  right: -10px;
  color: var(--color-red-candy-apple);
  background: var(--color-white);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50px;
  border: 1px solid var(--color-red-candy-apple);
  display: none;
  justify-content: center;
  align-items: center;
}
  div.ra-dnd .root-thumbnail:hover .ra-dnd-remove{
    display: flex;
  }
  div.ra-dnd .root-thumbnail .ra-dnd-remove:hover{
    color: var(--color-white);
    border: 1px solid var(--color-white);
    background: var(--color-red-candy-apple);
  }
  div.ra-dnd .root-thumbnail .ra-dnd-remove .g-icon{
    font-size: 16px;
  }

div.ra-dnd .root-thumbnail .ra-dnd-remove-confirm{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: var(--color-white-90);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  cursor: initial;
}

div.ra-dnd .root-thumbnail .ra-dnd-remove-confirm > *{
  flex: 0 0 100%;
  text-align: center;
}

/* Drag and Drop / Preview image */

div.ra-dnd-preview{
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: var(--color-white);
  z-index: var(--zIndex);
  display: flex;
  justify-content: center;
  align-items: center;
}

div.ra-dnd-preview div.ra-dnd-preview-src{
  z-index: 100;
}

div.ra-dnd-preview div.ra-dnd-preview-src img{
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
}

div.ra-dnd-preview .ra-dnd-preview-close{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 20px;
  padding: 5px;
  z-index: 2000;
}
div.ra-dnd-preview .ra-dnd-preview-close .g-icon{
  font-size: 28px;
  color: var(--color-grey-70);
  cursor: pointer;
}
div.ra-dnd-preview .ra-dnd-preview-close .g-icon:hover{
  color: var(--color-red-candy-apple);
}

div.ra-dnd-preview .ra-dnd-preview-back,
div.ra-dnd-preview .ra-dnd-preview-next{
  position: fixed;
  top: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  z-index: 1000;
}
  div.ra-dnd-preview .ra-dnd-preview-back:hover,
  div.ra-dnd-preview .ra-dnd-preview-next:hover{
    background: var(--color-white-75);
  }

div.ra-dnd-preview .ra-dnd-preview-back{
  left: 0px;
}
div.ra-dnd-preview .ra-dnd-preview-next{
  right: 0px;
}

div.ra-dnd-preview .ra-dnd-preview-back span.g-icon,
div.ra-dnd-preview .ra-dnd-preview-next span.g-icon {
  font-size: 36px;
  padding: 2px;
  background: var(--color-white-50);
  color: var(--color-black-10);
  border: 1px solid var(--color-black-10);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}

/* Draggable items */
[data-ra-sortable] .sortable{
  cursor: grab;
}
[data-ra-sortable] .sortable:active{
  cursor: grabbing;
}
[data-ra-sortable] .sortable.dragged{
  outline: 1px dashed var(--color-grey-20);
  outline-offset: 5px;
}

/* Dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
  .dropdown > .content{
    display: none;
    position: absolute;
    cursor: auto;
    top: 100%;
    left: 5%;
    width: 90%;
    min-width: 160px;
    max-width: 90%;
    box-shadow: 0px 8px 16px 0px var(--color-black-20);
    background: var(--color-white);
    font-size: 0.9rem;
    border-radius: var(--px-dropdown-radius);
    z-index: 1000;
  }
  .dropdown:not([class*="click"]):not([class*="stop"]):hover > .content,
  .dropdown.click.active:not([class*="stop"]) > .content{
    display: block;
  }
  .dropdown > .content.right{
    left: inherit;
    right: 0;
  }
  .dropdown > .content.fit, 
  .dropdown > .content.fit-xs{
    position: absolute;
    left: inherit;
    width: max-content;
  }
  .dropdown > .content.fit-s,
  .dropdown > .content.fit-m,
  .dropdown > .content.fit-l,
  .dropdown > .content.fit-xl,
  .dropdown > .content.fit-2xl{
    position: fixed;
  }
  .dropdown > .content > .link{
    display: flex;
    align-items: center;
    padding: 10px;
    color: var(--color-grey-70);
    border-bottom: 1px solid var(--color-grey-5);
  }
  .dropdown > .content > .link:hover{
    background: var(--color-grey-3);
    text-decoration: none;
  }
  .dropdown > .content > .link:not(.hide){
    border-top-left-radius: var(--px-dropdown-radius);
    border-top-right-radius: var(--px-dropdown-radius);
  }
  .dropdown > .content > .link:not(.hide) ~ .link:not(.hide){
    border-top-left-radius: initial;
    border-top-right-radius: initial;
  }
  .dropdown > .content > .link:nth-last-child(1 of :not(.hide)){
    border-bottom-left-radius: var(--px-dropdown-radius);
    border-bottom-right-radius: var(--px-dropdown-radius);
    border-bottom: 0px;
  }
  .dropdown > .content > .link > span.g-icon:first-child{
    padding-right: 10px;
  }
  @media (min-width:576px){
    .dropdown > .content.fit-s{
      position: absolute;
      left: inherit;
      width: max-content;
    }
  }
  @media (min-width:768px){
    .dropdown > .content.fit-m{
      position: absolute;
      left: inherit;
      width: max-content;
    }
  }
  @media (min-width:992px){
    .dropdown > .content.fit-l{
      position: absolute;
      left: inherit;
      width: max-content;
    }
  }
  @media (min-width:1200px){
    .dropdown > .content.fit-xl{
      position: absolute;
      left: inherit;
      width: max-content;
    }
  }
  @media (min-width:1600px){
    .dropdown > .content.fit-2xl{
      position: absolute;
      left: inherit;
      width: max-content;
    }
  }

/* Charts */

  div.chart.pie{
    position: relative;
    background: var(--color-grey-3);
    height: calc(var(--size, 200) * 1px);
    width: calc(var(--size, 200) * 1px);
    border-radius: 100%;
    overflow: hidden;
  }
  div.chart.pie div.segment{
    --a: calc(var(--over50, 0) * -100%);
    --b: calc((1 + var(--over50, 0)) * 100%);
    --degrees: calc((var(--offset, 0) / 100) * 360);
    position: absolute;
    height: 100%;
    width: 100%;
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
    transform-origin: 50% 100%; 
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  }
  div.chart.pie div.segment:after,
  div.chart.pie div.segment:before{
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--bg);
    content: '';
  }
  div.chart.pie div.segment:before{
    --degrees: calc((var(--value, 45) / 100) * 360);
    transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
    transform-origin: 50% 0; 
    content: attr(data-label);
  }
  div.chart.pie div.segment:after{
    opacity: var(--over50, 0);
  }

/* Cloud Box */
div.ra-root-cloud{
  --cloud-radius: 15px;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-content: stretch;
  align-items: center;
  overflow: auto;
  z-index: var(--zIndex);
}

div.ra-root-cloud div.ra-cloud{
  position: relative;
  background: var(--color-white);
  flex: 0 0 auto; 
  width: 90%;
  border-radius: var(--cloud-radius);
}

div.ra-root-cloud div.ra-cloud div.ra-cloud-body{
  padding: 10px;
}

div.ra-root-cloud div.ra-cloud div.ra-cloud-close{
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: var(--color-grey-70);
  z-index: 100;
}
  div.ra-root-cloud div.ra-cloud div.ra-cloud-close:hover{
    color: var(--color-red-candy-apple);
  }

/* Errors */
input.error, select.error, textarea.error, div.dropdown.select.error{
  outline: 2px solid var(--color-error);
}
input[type="checkbox"].error{
  outline: 0px;
}
input[type="checkbox"]:not(:checked).error::before{
  outline-style: solid;
  outline-color: transparent;
  outline-offset: 0px;
  animation: anim-checkbox-error 5s linear infinite;
}
@keyframes anim-checkbox-error {
  0%{ outline-offset: -18px; outline-color: transparent; }
  20%{ outline-offset: 18px; outline-color: var(--color-error); }
  40%{ outline-offset: -18px; outline-color: transparent; }
  100%{ outline-offset: -18px; outline-color: transparent; }
}

/**
*  Mockup's for devices
*/
div.ra-smartphone-mockup{
  width: 260px;
  height: 500px;
  background: var(--color-grey-80);
  border-radius: 50px;
  border: 2px solid var(--color-grey-50);
  outline: 2px solid var(--color-grey-30);
}

div.ra-smartphone-mockup::before{
  content: "";
  position: absolute;
  top: 1%;
  right: 2%;
  bottom: 1%;
  left: 2%;
  border-radius: 41px;
  background: var(--color-grey-3);
  background: linear-gradient(130deg, var(--color-grey-3) 0%, var(--color-grey-3) 42%, var(--color-grey-5) 60%, var(--color-grey-3) 100%);
}

div.ra-smartphone-mockup::after{
  --camera-diameter: 12px;
  content: "";
  position: absolute;
  top: 2%;
  left: calc(50% - calc(var(--camera-diameter) / 2));
  border-radius: 50px;
  background: radial-gradient(circle, rgba(80,52,85,1) 2%, var(--color-black) 50%, var(--color-black) 100%);
  width: var(--camera-diameter);
  height: var(--camera-diameter);
}

/**
*  Animations
*/

.anim-throw-to-right{
  --anim-duration: var(--ext-anim-duration, 500ms);
  --anim-delay: var(--ext-anim-delay, 0ms);
  --anim-iteration-count: var(--ext-anim-iteration-count, 1);
  --anim-timing-function: var(--ext-anim-timing-function, "linear");
  animation-name: keyanim-throw-to-right;
  animation-duration: var(--anim-duration);
  animation-delay: var(--anim-delay);
  animation-iteration-count: var(--anim-iteration-count);
  animation-timing-function: var(--anim-timing-function);
  transform: translate(100%,0px);
  opacity: 0.1;
}
  @keyframes keyanim-throw-to-right {
    0% { transform: translate(0px,0px); opacity: 1; }
    100% { transform: translate(100%,0px); opacity: 0.1; }
  }

/* Others */
.line-through{text-decoration: line-through}
.clear{clear: both}
.break-word{word-break: break-word} .keep-all{word-break: keep-all}
.expand{cursor: pointer;}
.noselect{-webkit-user-select: none; -ms-user-select: none; user-select: none;}
.validation{font-size: 0.7rem; font-style: italic;}

/* Material Symbols Font */

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('../Fonts/MaterialSymbols/MaterialSymbolsOutlined.woff2') format('woff2'), /* Modern Browsers */
       url('../Fonts/MaterialSymbols/MaterialSymbolsOutlined.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../Fonts/MaterialSymbols/MaterialSymbolsRounded.woff2') format('woff2'), /* Modern Browsers */
       url('../Fonts/MaterialSymbols/MaterialSymbolsRounded.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Material Symbols Sharp';
  src: url('../Fonts/MaterialSymbols/MaterialSymbolsSharp.woff2') format('woff2'), /* Modern Browsers */
       url('../Fonts/MaterialSymbols/MaterialSymbolsSharp.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}

.g-icon{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'FILL' 0,    /*    0 -   1              */
                           'wght' 400,  /*  100 - 700 Weight       */
                           'GRAD' 0,    /*  -25 - 200 Grade        */
                           'opsz' 24;   /*   20 -  48 Optical size */
  -webkit-user-select: none; -ms-user-select: none; user-select: none; /* User can't select these icons */
}
.g-icon.rounded{
  font-family: 'Material Icons Rounded';
}
.g-icon.sharp{
  font-family: 'Material Icons Sharp';
}
.g-icon.filled{
  font-variation-settings: 'FILL' 1;
}

.g-icon.px10{font-size: 10px} .g-icon.px12{font-size: 12px} .g-icon.px14{font-size: 14px} .g-icon.px16{font-size: 16px} .g-icon.px18{font-size: 18px}
.g-icon.px20{font-size: 20px} .g-icon.px22{font-size: 22px} .g-icon.px24{font-size: 24px} .g-icon.px26{font-size: 26px} .g-icon.px24{font-size: 26px}
.g-icon.px30{font-size: 30px} .g-icon.px32{font-size: 32px} .g-icon.px34{font-size: 34px} .g-icon.px36{font-size: 38px} .g-icon.px36{font-size: 38px}
.g-icon.px40{font-size: 40px} .g-icon.px42{font-size: 42px} .g-icon.px44{font-size: 44px} .g-icon.px46{font-size: 46px} .g-icon.px48{font-size: 48px}

.g-icon.spin{
animation-name: spin;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Print Style */

@media print {

  a, blockquote, table, pre{page-break-inside: avoid;}
  h1, h2, h3, h4, h5, h6, img{page-break-after: avoid; page-break-inside: avoid;}
  img{page-break-inside: avoid; page-break-after: avoid;}
  ul, ol, dl{page-break-before: avoid;}

}

/* Roboto Font */

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Thin.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-ThinItalic.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Light.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-LightItalic.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Italic.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-MediumItalic.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-BoldItalic.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-Black.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto/Roboto-BlackItalic.woff2') format('woff2'),
       url('../Fonts/Roboto/Roboto-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
}

