﻿html,body   { height: 100%; }
html,body   { font-family: 'inter', sans-serif; font-size: clamp(8px, 5vw, 14px); font-weight: normal; color: rgb(65,65,65); margin: 0px; padding: 0px; background: rgb(255,255,255); }

.bgimg {
  background-image: url("/images/background/background.png");
  min-height: 100%;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


@font-face
{
  font-family: 'Inter';
  src: url('/fonts/inter/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'Inter';
  src: url('/fonts/inter/inter-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ====== VASTE WAARDEN ====== */
form            { display: inline; }
img             { border: 0; }
p               { white-space: normal; margin: 0; padding: 0; }
tbody           { font-family: Verdana; font-size: 12px; color: rgb(232,232,232); line-height: 18px; }

p, h1, h2, h3, h4, h5, h6, address, blockquote, hr, form { white-space: normal; margin: 0; padding: 0; }

h1.onderhoud    { font-family: Montserrat; font-size: 16px; color: rgb(0,0,0); letter-spacing: 2px; line-height: 30px; }
h2              { font-family: Montserrat; font-size: 18px; font-weight: normal; letter-spacing: 1px; }
h4.link         { font-family: Calibri; font-size: 16px; font-weight: normal; font-style: italic; text-decoration: none; cursor: pointer; }
h5              { font-family: Calibri; font-size: 14px; font-weight: normal; }
h6              { font-family: Montserrat; font-size: 14px; margin: 0px; padding: 0px; }
h7              { font-family: Montserrat; font-size: 18px; margin: 0px; padding: 0px; }

.link           { text-decoration: none; cursor: pointer; }

/*
article          { font-family: Montserrat; font-size: 14px; color: rgb(65,65,65); line-height: 24px; margin-bottom: 10px; max-width: 1400px; }
article.home     { font-family: Montserrat; font-size: 16px; color: rgb(0,0,0); line-height: 24px; margin: 10px 0px; padding: 10px; background: rgb(255,255,255,1); border-radius: 4px; max-width: 900px; }
article.task     { font-family: Montserrat; font-size: 16px; color: rgb(0,0,0); line-height: 24px; margin: 10px 0px; padding: 10px; background: rgb(255,255,255,1); border: 1px solid #4CAF50; border-radius: 4px; max-width: 100%; }
article.feedback { font-family: Calibri; font-size: 16px; color: rgb(0,0,0); white-space: normal; margin: 0; padding: 10px; background: rgb(255,255,255); border-radius: 5px; max-width: 100%; min-height: 250px; }
*/

article { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.75; }


*.nx-message-icon-fa {
    color: #ffffff !important;
}


svg.nx-message-icon path {
    fill: #ffffff !important;
}

select {
  width: 120px;
  padding: 3px;
  border: 1px solid rgb(66,66,66);
  border-radius: 2px;
  resize: vertical;
  background: rgba(255,255,255,0.7);
  font-family: Calibri;
  font-size: 14px;
}


.logon-info-tooltip {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.logon-info-tooltip-content {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 110%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 420px;
    padding: 8px 10px;
    background: rgb(255,255,255);
    color: rgb(0,0,0);
    border: 1px solid rgb(0,0,0);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    z-index: 9999;
    word-break: break-word;
}

.logon-info-tooltip:hover .logon-info-tooltip-content {
    display: block;
}


/*======  TOOLTIP STYLE ====== */
#tooltip { position: absolute; z-index: 1000; display: none; min-width: 150px; max-width: 450px;}


/* ====== DIV WRAPPER STYLE ====== */
div#wrapper     { position: relative; float: left; display: block; width: 100%; overflow: hidden; text-align: left; }


/* TOPMENU STYLE */
div#topmenu             { margin: 20px 0px 30px 0px; min-width: 980px; height: 24px; vertical-align: center; }



/* DIV LIST STYLE */
div.listtable   { float: left; clear: left; display: table; font-family: Montserrat; font-size: 12px; color: rgb(0,0,0); margin: 0px 0px 5px 0px; padding: 0px; border: 1px solid rgb(161,161,161); }
div.listtr      { display: table-row; }
div.listtd      { padding: 4px; min-height: 20px; border-right: 1px solid rgb(161,161,161); }
div.listcenter  { text-align: center; }


/* TABEL DIV */
div.admintablelist      { float: left; clear: left; display: table; font-family: Montserrat; font-size: 12px; color: rgb(0,0,0); margin: 0px 0px 5px 0px; padding: 0px; border: 1px solid rgb(161,161,161); }
div.admintable          { float: left; clear: left; display: table; font-family: Montserrat; font-size: 12px; color: rgb(0,0,0); margin: 0px 0px 5px 0px; padding: 0px; border: 1px solid rgb(161,161,161); }
div.admintr             { display: table-row; }
div.admintd             { display: table-cell; padding: 4px; height: 20px; line-height: 20px; vertical-align: middle; border-right: 1px solid rgb(161,161,161); }
div.centertd            { text-align: center; }



/* ====== GALLERY2 IMAGE UPLOAD ====== */
#gallery2 .thumbnail        { float: left; margin: 10px; width: 280px; height: auto; }
#gallery2 .thumbnail img    { width: 280px; height: auto; }



.w3-signal-yellow
{color:#fff;background-color:#f7ba0b!important}

.w3-signal-orange
{color:#fff;background-color:#d4652f!important}

.w3-signal-red
{color:#fff;background-color:#a02128!important}

.w3-signal-violet
{color:#fff;background-color:#904684!important}

.w3-signal-blue
{color:#fff;background-color:#154889!important}

.w3-text-signal-blue
{color:#154889}

.w3-signal-green
{color:#fff;background-color:#317f43!important}

.w3-signal-grey
{color:#fff;background-color:#9b9b9b!important}

.w3-signal-brown
{color:#fff;background-color:#7b5141!important}

.w3-signal-white
{color:#000;background-color:#f4f4f4!important}

.w3-signal-black
{color:#fff;background-color:#282828!important}


/* Universele modal shell */
#appModal {
  display: none;                /* standaard dicht */
  position: fixed;
  z-index: 9000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5); /* donkere backdrop */
}

/* De eigenlijke "card" */
#appModalDialog {
  min-width: 600px;
  max-width: 900px;
  max-height: 90vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Header / body / footer styling */
#appModalHeader {
  margin-bottom: 0;
}

#appModalBody {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
  padding: 16px;
  min-height: 200px;
}

#appModalFooter {
  padding: 10px;
}

/* Loader styling */
.appmodal-center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.appmodal-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #ccc;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: appmodal-spin 1s linear infinite;
}
@keyframes appmodal-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* iframe in error view */
.appmodal-iframe {
  width: 100%;
  height: 60vh;
  border: 0;
  background: #fff;
}


@keyframes w3-blink {
  50% { opacity: 0.3; }
}
.w3-blink {
  animation: w3-blink 2s ease-in-out infinite;
  /*animation: w3-blink 3s ease-in-out infinite;*/
}


.attention-icon2 {
  color: info;
  animation: attentionPulse 2.5s ease-in-out infinite;
}

@keyframes attentionPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .35;
    transform: scale(1.15);
  }
}


/**/
