/*
 *  @file webe_5.css
 *  @brief styles for site
 *  @author CmPi
 *  @date creation 02/08/2025
 *  @version 214
 */

/* === for both METRO UI CSS V4 and V5 */

/* MDI icons */

.mdi-hover-shake:hover:before {
  -webkit-animation: ani-wrench 2s infinite linear;
  animation: ani-wrench 2s infinite linear;
}
.mdi-stack {
   left: 0;
   position: absolute;
   text-align: center;
   width: 100%;
}

/* a box with vertical title */

.box[data-text] { /* top right bottom left */
  padding: .625rem 1.4rem .625rem 2.5rem;
  position: relative;
  margin: 0 0 .625rem 0;
}
.box[data-text]:before,
.box[data-text]:after {
  display: table;
  content: "";
}
.box[data-text]:after {
  clear: both;
}
.box[data-text]:before {
  position: absolute;
  content: attr(data-text);
  text-transform: lowercase;
  left: 1.5rem;
  top: 11.875rem;
  color: gray;
  display: block;
  font-size: 1rem;
  line-height: 1rem;
  height: 1rem;
  text-align: right;
  white-space: nowrap;
  direction: ltr;
  width: 12.5rem;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}

/* === for METRO UI CSS V5 only */

/* to hide div when the naview is compacted */

div.compacted *.expanded-only {
 display: none;
}

div.expanded *.compacted-only {
 display: none;
}

/* filter configuration */

:root {
  --form-gap-size: 0.5rem;		
  --form-column-min-width: 80px;
}

/* solarized color */

:root{
 /* === Solarized palette */
 /* --- tones */
 --base03:  #002b36;
 --base02:  #073642;
 --base01:  #586e75;
 --base00:  #657b83;
 --base0:   #839496;
 --base1:   #93a1a1;
 --base2:   #eee8d5;
 --base3:   #fdf6e3;
 /* --- colors */
 --syellow:  #b58900;
 --sorange:  #cb4b16;
 --sred:     #dc322f;
 --smagenta: #d33682;
 --sviolet:  #6c71c4;
 --sblue:    #268bd2;
 --scyan:    #2aa198;
 --sgreen:   #859900;
}

.fg-syellow { color: var(--syellow) !important; }
.fg-sorange { color: var(--sorange) !important; }
.fg-sred { color: var(--sred) !important; }
.fg-smagenta { color: var(--smagenta) !important; }
.fg-sviolet { color: var(--sviolet) !important; }
.fg-sblue { color: var(--sblue) !important; }
.fg-scyan { color: var(--scyan) !important; }
.fg-sgreen { color: var(--sgreen) !important; }


div.more-info-box div.content {
 min-height: 100px;	
}