/* Glogals */
:root
{
  --color-theme:#00A867;
  --color-normal:#000000;
  --color-muted:#6b7280;
  --color-hover:#8a2be2;
  --color-bg:#ffffff;
  --color-bg-block:#d3d3d3;
}
*
{
  margin:0px; 
  padding:0px; 
  border:0px; 
  box-sizing:border-box
}
html, body
{
  height:100%
}
body
{
  font-family: "Segoe UI", "Helvetica", Arial, Helvetica, sans-serif, system-ui;
  font-size: 15px;
  color:var(--color-normal);
  background:var(--color-bg);
}
a
{
  color:var(--color-theme);
  text-decoration:none;
}

/* Main */
main
{
  width: 100%;
  height:auto;
  margin:auto;
  padding: 0px 10px 0px 10px;
  color: var(--color-normal);
  background:var(--color-bg);
}

.cards
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1em;
  margin-top: 1em;
}
.card
{
  background: var(--color-bg-block);
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(18,35,60,0)
}
.card h3
{
  margin:0 0 1em 0
}

div.image-svg
{
  background: var(--color-bg-block);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  gap: 12px; 
}
div.image-svg img
{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* GlassERP */
.glasserp-plan
{
  width: 100%;
  height: auto;
  display: flex;
  margin: 20px;
  gap: 20px;
  padding-right: 20px;
  justify-content:space-between;  
}
.glasserp-plan .plan-text
{
  width: 50%;
  height: auto;
}
.glasserp-plan h4
{
  margin-bottom: 1em;
}
.glasserp-plan .plan-pict
{
  width: 50%;
  height: auto;
  background-color: var(--color-bg-block);
}
.glasserp-plan .plan-pict img 
{
  width: 100%;
  height: auto;
  object-fit: cover;
  padding: 10px;
}

.module-capt
{
  border-bottom: 5px solid var(--color-theme);
}
.module-view
{
  width: fit-content;
  height:auto;
  margin: 20px auto 0px auto;
  padding: 5px 20px 5px 20px;
  color: var(--color-bg);
  border: 1px solid var(--color-theme);
  border-radius: 20px 20px 0px 0px;
  background-color: var(--color-theme);
}
.module-head
{
  width: auto;
  height: 45px;
  display: flex;
  margin-bottom: 10px;
}
.module-type
{
  width: 45px;
  height: 45px;
  color: var(--color-bg);
  border: 1px solid var(--color-theme);
  border-radius: 50%;
  background-color: var(--color-theme);
}
.module-code
{
  width: 100%;
  height: 100%;
  font-family: Consolas;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  transform: scaleX(0.8);
}
.module-name
{
  line-height: 45px;
  padding-left: 8px;
}
.module-desc
{
  font-size: small;
  color: var(--color-muted);
}

/* GlassMES */
.glassmes-svcs
{
  width: 100%;
  display:inline-block;
  margin-top: 1em;
  padding: 1em;
  background: var(--color-bg-block);
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(18,35,60,0)
}
.glassmes-svcs ul
{
  list-style-type: inherit;
  padding: 1em;
}

/* GlassCAM */
.glasscam
{
  display: flex;
  gap:12px
}
.glasscam-itms
{
  width: 50%;
}
.glasscam-item
{
  width: 100%;
  display:inline-block;
  margin-top: 1em;
  padding: 1em;
  background: var(--color-bg-block);
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(18,35,60,0)
}
.glasscam-item ul
{
  list-style-type: inherit;
  padding: 1em;
}
.glasscam-imgs
{
  width: 50%;
  padding: 1em;
}
.glasscam-imgs img
{
  width: 100%;
  height: auto;
  padding: 12px;
  object-fit: cover;
  background-color: var(--color-bg-block);
  border-radius: 8px;
}