/*
Copyright (c) 2022 EARCE.NET

Author: d.idei@earce.net
Description: Simple CSS to apply "Flexible Design"
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* -------------------------------------------------- */
*
{
  box-sizing: border-box;
}
  
body {
  margin    : 0;
}

@media screen and (max-width: 700px) {
  .flex_container {
    flex-direction: column;
  }
}

.flex_menubar {
  display   : flex;
}

.flex_container {
  display   : flex;
  flex-wrap : wrap;
}

.flex_side {
  flex      : 25;
  padding   : 10px;
}

.flex_main {
  flex      : 75;
  padding   : 10px;
}

.flex_item1 {
  flex      : 1;
  margin    : 2px;
}

.flex_item2 {
  flex      : 2;
  margin    : 2px;
}

.flex_item3 {
  flex      : 3;
  margin    : 2px;
}

.flex_item4 {
  flex      : 4;
  margin    : 2px;
}


/* -------------------------------------------------- */

.wizard_container {
  max-width:80%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}