*,
*:before,
*:after {
  box-sizing: border-box;
}

/*
vert : #0B8306 rgb(11, 131, 6)
bleu: #16288D rgb(22, 40, 141)
rouge  #D11600  rgb(209, 22, 0)
orange #D17900 rgb(209, 121, 0)
*/

:root {
  --main-bg-color: var(--md-sys-color-background);
  --main-texte-color: var(--md-sys-color-on-background);
  --pied-bg-color: #fff7c9;
  --pied-bg-color2: #c5e454;

  --bandeau-bg-color: #a01275;
  --btn-bg1:#d3d2a1;
  --btn-bg2:rgb(174, 185, 70);
  --btn-bg-hover1:#c6c929;
  --btn-bg-hover2:#a3ad0a;
  --btn-bg-active: #D11600;

  --bg-color-hex: var(--md-sys-color-background);
  --bg-color-rgba5: rgba(255, 0, 0, 0.5); /* Valeur par défaut, sera remplacée par JavaScript */
  --bg-color-rgba8: rgba(255, 0, 0, 0.8); /* Valeur par défaut, sera remplacée par JavaScript */
}




body
{
  /*color: #141414;*/
  color:var(--md-sys-color-on-background);
  background-color: var(-md-sys-color-background);
}

.brand-logo  img
{
    height: 56px;
}

@media only screen and (min-width: 601px) {
.brand-logo  img
{
    height: 64px;
}

}



.alink
{
  color: var(--md-sys-color-on-background);
}


body {
  font-family : "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif" !important ;
}

/**
 * Barre du menu
 */
.app-bar {
  position: relative !important;
  top: -20px !important;
}


.app-bar .app-bar-menu a {
  font-size: 20px !important;
}

h1.h1jeux
{
    font-size: 22pt;
}

h2.h2jeux
{
    font-size: 20pt;
}

h2.h2jeux_no_m
{
    font-size: 20pt;
    margin: 0px 0px 0px 0px;
}



h5.h5jeux
{
    font-size: 14pt;
}

.row .col.minipadcol
{
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}

.row .col
{
    margin-left: 5px;
    margin-right: 5px;
}

.card
{
    margin-bottom: 5px;
}


.dropdown-menu.langue
{
  min-width:  unset;
}

.texte {
  background: #000000;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 12pt;
  text-align: center;
}

.button-link {
  color: #000;
  text-decoration: underline;
  border: 0;
  background: transparent;
  padding: 0; }
  .button-link:hover {
    text-decoration: none; }
  .button-link:active {
    outline: 0; }

.button.big
{
  width: 15rem;
  height: 4rem;
  padding-top: 1.4em;
}

.margeauto
{
	margin:auto;
}

.iblock
{
    display: inline-block;
}

.flex_row
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.flex_row_valign
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.flex_row_valign_nowrap
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.flex_row_valign_nowrap_left
{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}


.arrondi10
{
    border-radius: 10px;
}

.arrondi10p
{
    border-radius: 10%;
}


.ombre-2 {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }


.ombre-3 {
  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }


.ombre-4 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); }


.ombre {
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); }


.nowrap
{
white-space: nowrap;
}

.iblock.browser-default
{
    display: inline-block;
}

.w100
{
    width: 100%;
}

.h100
{
    height: 100%;
}


.aligne_image > img, .aligne_image >  span, .aligne_image > div
{
  vertical-align: middle;
  display: inline-block;
}

.aligne_top  >  img, .aligne_top  > span , .aligne_top  > div
{
  vertical-align: top;
  display: inline-block;
}

.align_l
{
	text-align:left;
}

.align_r
{
	text-align:right;
}

.align_c
{
	text-align:center;
}

.align_j
{
	text-align:justify;
}


.valign_t
{
vertical-align: top;
}

.valign_m
{
vertical-align: middle;

}

.clientclick
{
    cursor:pointer;
}

/* Taille de texte par défaut */
body {
  font-size: 16px;
  /*font-family: Arial, sans-serif;*/
}

/* Texte en gras */
.t-bold {
  font-weight: bold;
}

/* Texte en italique */
.t-italic {
  font-style: italic;
}


/* Ajuster la taille de la police pour les écrans étroits */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Ajuster la taille de la police pour les écrans larges */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}


/* Classes de taille de texte */
.texte-grand {
  font-size: 24px;
}

.texte-moyen {
  font-size: 20px;
}

.texte-normal {
  font-size: 16px;
}

.texte-petit {
  font-size: 12px;
}

/* Ajuster la taille de la police pour les écrans étroits */
@media (max-width: 768px) {
  .texte-grand {
    font-size: 20px;
  }

  .texte-moyen {
    font-size: 16px;
  }

  .texte-normal {
    font-size: 14px;
  }

  .texte-petit {
    font-size: 10px;
  }
}

/* Ajuster la taille de la police pour les écrans larges */
@media (min-width: 1024px) {
  .texte-grand {
    font-size: 30px;
  }

  .texte-moyen {
    font-size: 22px;
  }

  .texte-normal {
    font-size: 18px;
  }

  .texte-petit {
    font-size: 14px;
  }
}



.clear:before,
.clear:after {
  content: " ";
  display: table;
}
.clear:after {
  clear: both;
}


.espaceligne > .row
{
  margin-bottom: 20px;
}

.container-full {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.tcol-10,
.tcol-20,
.tcol-30,
.tcol-40,
.tcol-50,
.tcol-60,
.tcol-70,
.tcol-80,
.tcol-90,
.tcol-100
{

  margin: 0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  position: relative;
  float: left;
}

.tcol-10
{
	width: 10%;
}

.tcol-20
{
	width: 20%;
}

.tcol-30
{
	width: 30%;
}

.tcol-40
{
	width: 40%;
}

.tcol-50
{
	width: 50%;
}

.tcol-60
{
	width: 60%;
}

.tcol-70
{
	width: 70%;
}

.tcol-80
{
	width: 80%;
}

.tcol-90
{
  width: 90%;
}

.tcol-100
{
	width: 100%;
}

.tcol-100MP
{
	width: 100%;
}

.tpush-1 {
  left: 10%;
}
.tpush-2 {
  left: 20%;
}
.tpush-3 {
  left: 30%;
}
.tpush-4 {
  left: 40%;
}
.tpush-5 {
  left: 50%;
}
.tpush-6 {
  left: 60%;
}
.tpush-7 {
  left: 70%;
}
.tpush-8 {
  left: 80%;
}
.tpush-9 {
  left: 90%;
}

.tpull-1 {
  left: -10%;
}
.tpull-2 {
  left: -20%;
}
.tpull-3 {
  left: -30%;
}
.tpull-4 {
  left: -40%;
}
.tpull-5 {
  left: -50%;
}
.tpull-6 {
  left: -60%;
}
.tpull-7 {
  left: -70%;
}
.tpull-8 {
  left: -80%;
}
.tpull-9 {
  left: -90%;
}

.push-1 {
  left: 8.33333%; }

.push-2 {
  left: 16.66667%; }

.push-3 {
  left: 25%; }

.push-4 {
  left: 33.33333%; }

.push-5 {
  left: 41.66667%; }

.push-6 {
  left: 50%; }

.push-7 {
  left: 58.33333%; }

.push-8 {
  left: 66.66667%; }

.push-9 {
  left: 75%; }

.push-10 {
  left: 83.33333%; }

.push-11 {
  left: 91.66667%; }

.push-1-2 {
  left: 50%; }

.push-1-3 {
  left: 33.33333%; }

.push-2-3 {
  left: 66.66667%; }

.push-1-4 {
  left: 25%; }

.push-3-4 {
  left: 75%; }

.push-1-5 {
  left: 20%; }

.push-2-5 {
  left: 40%; }

.push-3-5 {
  left: 60%; }

.push-4-5 {
  left: 80%; }

.pull-1 {
  left: -8.33333%; }

.pull-2 {
  left: -16.66667%; }

.pull-3 {
  left: -25%; }

.pull-4 {
  left: -33.33333%; }

.pull-5 {
  left: -41.66667%; }

.pull-6 {
  left: -50%; }

.pull-7 {
  left: -58.33333%; }

.pull-8 {
  left: -66.66667%; }

.pull-9 {
  left: -75%; }

.pull-10 {
  left: -83.33333%; }

.pull-11 {
  left: -91.66667%; }

.pull-1-2 {
  left: -50%; }

.pull-1-3 {
  left: -33.33333%; }

.pull-2-3 {
  left: -66.66667%; }

.pull-1-4 {
  left: -25%; }

.pull-3-4 {
  left: -75%; }

.pull-1-5 {
  left: -20%; }

.pull-2-5 {
  left: -40%; }

.pull-3-5 {
  left: -60%; }

.pull-4-5 {
  left: -80%; }


.marg-10B
{
margin: 10px 10px 10px 10px;
}

.marg_to-5
{
  margin-top: 5px;
}

.marg_t-10
{
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 0px;
}

.marg_to-10
{
margin-top: 10px;
}

.marg_b-10
{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 10px;
}

.marg-10E
{
margin-left: 10px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 0px;
}

.marg-10
{
margin-left: 10px;
}

.marg-20
{
margin-left: 20px;
}

.marg_r-20
{
margin-right: 20px;
}

.marg_t-20
{
margin-top: 20px;
}
.marg-20B
{
margin: 20px 20px 20px 20px;
}

.pad-5
{
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

.pad-2B
{
padding: 2px 2px 2px 2px;
}

.pad-5B
{
padding: 5px 5px 5px 5px;
}

.pad-10B
{
padding: 10px 10px 10px 10px;
}

.pad-15L
{
padding-left: 15px;
}

.pad-30LR
{
padding-left: 30px;
padding-right: 30px;
}

.pad-10T
{
padding-top: 10px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}


.page-footer {
  padding-top: 20px;
  color: #fff;
  background-color: #1E88E5;
}

.page-footer .footer-copyright {
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(51, 51, 51, 0.08);
}

.footer-copyright a.omesjeux {
  _color: var(--font-on-primary-color-dark-medium);
  background-color: var(--pied-bg-color);
  display: inline-block;
  min-height:unset;
  padding: 0 0 0 0;
}



.card-img.wimg70 {
    width: 70%;
}

.fg-black {
  color: #000000 !important;
}
.bg-black {
  background-color: #000000 !important;
}
.bd-black {
  border-color: #000000 !important;
}
.ol-black {
  outline-color: #000000 !important;
}
.op-black {
  background-color: rgba(0, 0, 0, 0.7);
}

.fg-white {
  color: #ffffff !important;
}
.bg-white {
  background-color: #ffffff !important;
}
.bd-white {
  border-color: #ffffff !important;
}
.ol-white {
  outline-color: #ffffff !important;
}
.op-white {
  background-color: rgba(255, 255, 255, 0.7);
}

.fg-lime {
  color: #a4c400 !important;
}
.bg-lime {
  background-color: #a4c400 !important;
}
.bd-lime {
  border-color: #a4c400 !important;
}
.ol-lime {
  outline-color: #a4c400 !important;
}
.op-lime {
  background-color: rgba(164, 196, 0, 0.7);
}

.fg-green {
  color: #60a917 !important;
}
.bg-green {
  background-color: #60a917 !important;
}
.bd-green {
  border-color: #60a917 !important;
}
.ol-green {
  outline-color: #60a917 !important;
}
.op-green {
  background-color: rgba(96, 169, 23, 0.7);
}

.fg-emerald {
  color: #008a00 !important;
}
.bg-emerald {
  background-color: #008a00 !important;
}
.bd-emerald {
  border-color: #008a00 !important;
}
.ol-emerald {
  outline-color: #008a00 !important;
}
.op-emerald {
  background-color: rgba(0, 138, 0, 0.7);
}

.fg-blue {
  color: #00aff0 !important;
}
.bg-blue {
  background-color: #00aff0 !important;
}
.bd-blue {
  border-color: #00aff0 !important;
}
.ol-blue {
  outline-color: #00aff0 !important;
}
.op-blue {
  background-color: rgba(0, 175, 240, 0.7);
}

.fg-teal {
  color: #00aba9 !important;
}
.bg-teal {
  background-color: #00aba9 !important;
}
.bd-teal {
  border-color: #00aba9 !important;
}
.ol-teal {
  outline-color: #00aba9 !important;
}
.op-teal {
  background-color: rgba(0, 171, 169, 0.7);
}

.fg-cyan {
  color: #1ba1e2 !important;
}
.bg-cyan {
  background-color: #1ba1e2 !important;
}
.bd-cyan {
  border-color: #1ba1e2 !important;
}
.ol-cyan {
  outline-color: #1ba1e2 !important;
}
.op-cyan {
  background-color: rgba(27, 161, 226, 0.7);
}

.fg-cobalt {
  color: #0050ef !important;
}
.bg-cobalt {
  background-color: #0050ef !important;
}
.bd-cobalt {
  border-color: #0050ef !important;
}
.ol-cobalt {
  outline-color: #0050ef !important;
}
.op-cobalt {
  background-color: rgba(0, 80, 239, 0.7);
}

.fg-indigo {
  color: #6a00ff !important;
}
.bg-indigo {
  background-color: #6a00ff !important;
}
.bd-indigo {
  border-color: #6a00ff !important;
}
.ol-indigo {
  outline-color: #6a00ff !important;
}
.op-indigo {
  background-color: rgba(106, 0, 255, 0.7);
}

.fg-violet {
  color: #aa00ff !important;
}
.bg-violet {
  background-color: #aa00ff !important;
}
.bd-violet {
  border-color: #aa00ff !important;
}
.ol-violet {
  outline-color: #aa00ff !important;
}
.op-violet {
  background-color: rgba(170, 0, 255, 0.7);
}

.fg-pink {
  color: #dc4fad !important;
}
.bg-pink {
  background-color: #dc4fad !important;
}
.bd-pink {
  border-color: #dc4fad !important;
}
.ol-pink {
  outline-color: #dc4fad !important;
}
.op-pink {
  background-color: rgba(220, 79, 173, 0.7);
}

.fg-magenta {
  color: #d80073 !important;
}
.bg-magenta {
  background-color: #d80073 !important;
}
.bd-magenta {
  border-color: #d80073 !important;
}
.ol-magenta {
  outline-color: #d80073 !important;
}
.op-magenta {
  background-color: rgba(216, 0, 115, 0.7);
}

.fg-crimson {
  color: #a20025 !important;
}
.bg-crimson {
  background-color: #a20025 !important;
}
.bd-crimson {
  border-color: #a20025 !important;
}
.ol-crimson {
  outline-color: #a20025 !important;
}
.op-crimson {
  background-color: rgba(162, 0, 37, 0.7);
}

.fg-red {
  color: #ce352c !important;
}
.bg-red {
  background-color: #ce352c !important;
}
.bd-red {
  border-color: #ce352c !important;
}
.ol-red {
  outline-color: #ce352c !important;
}
.op-red {
  background-color: rgba(206, 53, 44, 0.7);
}

.fg-orange {
  color: #fa6800 !important;
}
.bg-orange {
  background-color: #fa6800 !important;
}
.bd-orange {
  border-color: #fa6800 !important;
}
.ol-orange {
  outline-color: #fa6800 !important;
}
.op-orange {
  background-color: rgba(250, 104, 0, 0.7);
}

.fg-amber {
  color: #f0a30a !important;
}
.bg-amber {
  background-color: #f0a30a !important;
}
.bd-amber {
  border-color: #f0a30a !important;
}
.ol-amber {
  outline-color: #f0a30a !important;
}
.op-amber {
  background-color: rgba(240, 163, 10, 0.7);
}

.fg-yellow {
  color: #e3c800 !important;
}
.bg-yellow {
  background-color: #e3c800 !important;
}
.bd-yellow {
  border-color: #e3c800 !important;
}
.ol-yellow {
  outline-color: #e3c800 !important;
}
.op-yellow {
  background-color: rgba(227, 200, 0, 0.7);
}

.fg-brown {
  color: #825a2c !important;
}
.bg-brown {
  background-color: #825a2c !important;
}
.bd-brown {
  border-color: #825a2c !important;
}
.ol-brown {
  outline-color: #825a2c !important;
}
.op-brown {
  background-color: rgba(130, 90, 44, 0.7);
}

.fg-olive {
  color: #6d8764 !important;
}
.bg-olive {
  background-color: #6d8764 !important;
}
.bd-olive {
  border-color: #6d8764 !important;
}
.ol-olive {
  outline-color: #6d8764 !important;
}
.op-olive {
  background-color: rgba(109, 135, 100, 0.7);
}

.fg-steel {
  color: #647687 !important;
}
.bg-steel {
  background-color: #647687 !important;
}
.bd-steel {
  border-color: #647687 !important;
}
.ol-steel {
  outline-color: #647687 !important;
}
.op-steel {
  background-color: rgba(100, 118, 135, 0.7);
}

.fg-mauve {
  color: #76608a !important;
}
.bg-mauve {
  background-color: #76608a !important;
}
.bd-mauve {
  border-color: #76608a !important;
}
.ol-mauve {
  outline-color: #76608a !important;
}
.op-mauve {
  background-color: rgba(118, 96, 138, 0.7);
}

.fg-taupe {
  color: #87794e !important;
}
.bg-taupe {
  background-color: #87794e !important;
}
.bd-taupe {
  border-color: #87794e !important;
}
.ol-taupe {
  outline-color: #87794e !important;
}
.op-taupe {
  background-color: rgba(135, 121, 78, 0.7);
}

.fg-dark {
  color: #1d1d1d !important;
}
.bg-dark {
  background-color: #1d1d1d !important;
}
.bd-dark {
  border-color: #1d1d1d !important;
}
.ol-dark {
  outline-color: #1d1d1d !important;
}
.op-dark {
  background-color: rgba(29, 29, 29, 0.7);
}

.fg-darkBrown {
  color: #63362f !important;
}
.bg-darkBrown {
  background-color: #63362f !important;
}
.bd-darkBrown {
  border-color: #63362f !important;
}
.ol-darkBrown {
  outline-color: #63362f !important;
}
.op-darkBrown {
  background-color: rgba(99, 54, 47, 0.7);
}

.fg-darkCrimson {
  color: #640024 !important;
}
.bg-darkCrimson {
  background-color: #640024 !important;
}
.bd-darkCrimson {
  border-color: #640024 !important;
}
.ol-darkCrimson {
  outline-color: #640024 !important;
}
.op-darkCrimson {
  background-color: rgba(100, 0, 36, 0.7);
}

.fg-darkMagenta {
  color: #81003c !important;
}
.bg-darkMagenta {
  background-color: #81003c !important;
}
.bd-darkMagenta {
  border-color: #81003c !important;
}
.ol-darkMagenta {
  outline-color: #81003c !important;
}
.op-darkMagenta {
  background-color: rgba(129, 0, 60, 0.7);
}

.fg-darkIndigo {
  color: #4b0096 !important;
}
.bg-darkIndigo {
  background-color: #4b0096 !important;
}
.bd-darkIndigo {
  border-color: #4b0096 !important;
}
.ol-darkIndigo {
  outline-color: #4b0096 !important;
}
.op-darkIndigo {
  background-color: rgba(75, 0, 150, 0.7);
}

.fg-darkCyan {
  color: #1b6eae !important;
}
.bg-darkCyan {
  background-color: #1b6eae !important;
}
.bd-darkCyan {
  border-color: #1b6eae !important;
}
.ol-darkCyan {
  outline-color: #1b6eae !important;
}
.op-darkCyan {
  background-color: rgba(27, 110, 174, 0.7);
}

.fg-darkCobalt {
  color: #00356a !important;
}
.bg-darkCobalt {
  background-color: #00356a !important;
}
.bd-darkCobalt {
  border-color: #00356a !important;
}
.ol-darkCobalt {
  outline-color: #00356a !important;
}
.op-darkCobalt {
  background-color: rgba(0, 53, 106, 0.7);
}

.fg-darkTeal {
  color: #004050 !important;
}
.bg-darkTeal {
  background-color: #004050 !important;
}
.bd-darkTeal {
  border-color: #004050 !important;
}
.ol-darkTeal {
  outline-color: #004050 !important;
}
.op-darkTeal {
  background-color: rgba(0, 64, 80, 0.7);
}

.fg-darkEmerald {
  color: #003e00 !important;
}
.bg-darkEmerald {
  background-color: #003e00 !important;
}
.bd-darkEmerald {
  border-color: #003e00 !important;
}
.ol-darkEmerald {
  outline-color: #003e00 !important;
}
.op-darkEmerald {
  background-color: rgba(0, 62, 0, 0.7);
}

.fg-darkGreen {
  color: #128023 !important;
}
.bg-darkGreen {
  background-color: #128023 !important;
}
.bd-darkGreen {
  border-color: #128023 !important;
}
.ol-darkGreen {
  outline-color: #128023 !important;
}
.op-darkGreen {
  background-color: rgba(18, 128, 35, 0.7);
}

.fg-darkOrange {
  color: #bf5a15 !important;
}
.bg-darkOrange {
  background-color: #bf5a15 !important;
}
.bd-darkOrange {
  border-color: #bf5a15 !important;
}
.ol-darkOrange {
  outline-color: #bf5a15 !important;
}
.op-darkOrange {
  background-color: rgba(191, 90, 21, 0.7);
}

.fg-darkRed {
  color: #9a1616 !important;
}
.bg-darkRed {
  background-color: #9a1616 !important;
}
.bd-darkRed {
  border-color: #9a1616 !important;
}
.ol-darkRed {
  outline-color: #9a1616 !important;
}
.op-darkRed {
  background-color: rgba(154, 22, 22, 0.7);
}

.fg-darkPink {
  color: #9a165a !important;
}
.bg-darkPink {
  background-color: #9a165a !important;
}
.bd-darkPink {
  border-color: #9a165a !important;
}
.ol-darkPink {
  outline-color: #9a165a !important;
}
.op-darkPink {
  background-color: rgba(154, 22, 90, 0.7);
}
.fg-darkViolet {
  color: #57169a !important;
}
.bg-darkViolet {
  background-color: #57169a !important;
}
.bd-darkViolet {
  border-color: #57169a !important;
}
.ol-darkViolet {
  outline-color: #57169a !important;
}
.op-darkViolet {
  background-color: rgba(87, 22, 154, 0.7);
}

.fg-darkBlue {
  color: #16499a !important;
}
.bg-darkBlue {
  background-color: #16499a !important;
}
.bd-darkBlue {
  border-color: #16499a !important;
}
.ol-darkBlue {
  outline-color: #16499a !important;
}
.op-darkBlue {
  background-color: rgba(22, 73, 154, 0.7);
}

.fg-lightBlue {
  color: #4390df !important;
}
.bg-lightBlue {
  background-color: #4390df !important;
}
.bd-lightBlue {
  border-color: #4390df !important;
}
.ol-lightBlue {
  outline-color: #4390df !important;
}
.op-lightBlue {
  background-color: rgba(67, 144, 223, 0.7);
}

.fg-lighterBlue {
  color: #00ccff !important;
}
.bg-lighterBlue {
  background-color: #00ccff !important;
}
.bd-lighterBlue {
  border-color: #00ccff !important;
}
.ol-lighterBlue {
  outline-color: #00ccff !important;
}
.op-lighterBlue {
  background-color: rgba(0, 204, 255, 0.7);
}

.fg-lightGray {
  color: #e4e4e4 !important;
}
.bg-lightGray {
  background-color: #e4e4e4 !important;
}
.bd-lightGray {
  border-color: #e4e4e4 !important;
}
.ol-lightGray {
  outline-color: #e4e4e4 !important;
}
.fg-lightGray-active:active {
  color: #e4e4e4 !important;
}
.fg-lightGray-hover:hover {
  color: #e4e4e4 !important;
}
.fg-lightGray-focus:focus {
  color: #e4e4e4 !important;
}
.bg-lightGray-active:active {
  background-color: #e4e4e4 !important;
}
.bg-lightGray-hover:hover {
  background-color: #e4e4e4 !important;
}
.bg-lightGray-focus:focus {
  background-color: #e4e4e4 !important;
}
.bd-lightGray-active:active {
  border-color: #e4e4e4 !important;
}
.bd-lightGray-hover:hover {
  border-color: #e4e4e4 !important;
}
.bd-lightGray-focus:focus {
  border-color: #e4e4e4 !important;
}
.ol-lightGray-active:active {
  outline-color: #e4e4e4 !important;
}
.ol-lightGray-hover:hover {
  outline-color: #e4e4e4 !important;
}
.ol-lightGray-focus:focus {
  outline-color: #e4e4e4 !important;
}
.ribbed-lightGray {
  background: #e4e4e4 linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 20px 20px !important;
}
.before-bg-lightGray::before {
  background: #e4e4e4 !important;
}
.before-fg-lightGray::before {
  color: #e4e4e4 !important;
}
.after-bg-lightGray::after {
  background: #e4e4e4 !important;
}
.after-fg-lightGray::after {
  color: #e4e4e4 !important;
}
.op-lightGray {
  background-color: rgba(228, 228, 228, 0.7) !important;
}
.tg-lightGray::before {
  border-color: #e4e4e4;
}