@import "normalize.css"; 
@import "spacing.css"; 

@font-face {
   font-family: "screen";
   src: url("/template/fonts/Estedad-FD[KSHD,wght].woff2?#iefix") format("woff2");
   font-weight: 1 1000;
   font-display: swap;
}

:root{
   --primary-rgb: 7, 140, 123;  		/* 078C7B */
   --secondary-rgb: 63, 76, 92; 		/* 3f4c5c */
   
   --white-rgb: 255, 255, 255; 		/* FFFFFF */
   --black-rgb: 0, 0, 0;      		/* 000000 */
   --gray-rgb: 201, 201, 201;  		/* C9C9C9 */
   --cream-rgb: 244, 242, 238; 		/* f4f2ee */
   --light-rgb: 224, 224, 224; 		/* E0E0E0 */
   --ultralight-rgb: 250, 250, 250; 	/* FAFAFA */
   --dark-rgb: 133, 133, 133;  		/* 555555 */
   --ultradark-rgb: 69, 69, 69; 		/* 141414 */

   --success-rgb: 0, 166, 147; 		/* 00A693 */
   --danger-rgb: 204, 51, 51;  		/* CC3333 */
   --warning-rgb: 217, 144, 88; 		/* D99058 */
   
   --columns: 12;
   --gutter: 1.5%;
   --unit: calc((100% - (var(--columns) - 1) * var(--gutter)) / var(--columns));
}
   
/* Structure */

.container {
   position: relative;
   width: 100%;
   max-width: 1080px;
   overflow: hidden;	
   margin: 0 auto;
   padding: 0 20px;
   box-sizing: border-box; 
}
   .container:after, .row:after, .u-cf {content: ""; display: table; clear: both; }  

   @media print {.container {width: 100% !important; max-width: 100% !important;}}		

.row {box-sizing: border-box;}

.column,
.columns {
   width: 100%;
   float: right;        
   box-sizing: border-box;
}

@media (min-width: 550px) {
   .container { width: 85%; }

   .column,
   .columns {
      float: right;
      margin-right: var(--gutter);
   }
   .column:first-child,
   .columns:first-child {
      margin-right: 0;
   }

   .one.column,
   .one.columns                    { width: var(--unit); }
   .two.columns                    { width: calc(var(--unit) * 2 + var(--gutter)); }
   .three.columns                  { width: calc(var(--unit) * 3 + var(--gutter) * 2); }
   .four.columns                   { width: calc(var(--unit) * 4 + var(--gutter) * 3); }
   .five.columns                   { width: calc(var(--unit) * 5 + var(--gutter) * 4); }
   .six.columns                    { width: calc(var(--unit) * 6 + var(--gutter) * 5); }
   .seven.columns                  { width: calc(var(--unit) * 7 + var(--gutter) * 6); }
   .eight.columns                  { width: calc(var(--unit) * 8 + var(--gutter) * 7); }
   .nine.columns                   { width: calc(var(--unit) * 9 + var(--gutter) * 8); }
   .ten.columns                    { width: calc(var(--unit) * 10 + var(--gutter) * 9); }
   .eleven.columns                 { width: calc(var(--unit) * 11 + var(--gutter) * 10); }
   .twelve.columns                 { width: 100%; margin-left: 0; }

   .one-third.column               { width: calc(var(--unit) * 4 + var(--gutter) * 3); }
   .two-thirds.column              { width: calc(var(--unit) * 8 + var(--gutter) * 7); }
   .one-half.column                { width: calc(var(--unit) * 6 + var(--gutter) * 5); }

   .offset-by-one.column,
   .offset-by-one.columns          { margin-left: calc(var(--unit) * 1 + var(--gutter) * 1); }
   .offset-by-two.column,
   .offset-by-two.columns          { margin-left: calc(var(--unit) * 2 + var(--gutter) * 2); }
   .offset-by-three.column,
   .offset-by-three.columns        { margin-left: calc(var(--unit) * 3 + var(--gutter) * 3); }
   .offset-by-four.column,
   .offset-by-four.columns         { margin-left: calc(var(--unit) * 4 + var(--gutter) * 4); }
   .offset-by-five.column,
   .offset-by-five.columns         { margin-left: calc(var(--unit) * 5 + var(--gutter) * 5); }
   .offset-by-six.column,
   .offset-by-six.columns          { margin-left: calc(var(--unit) * 6 + var(--gutter) * 6); }
   .offset-by-seven.column,
   .offset-by-seven.columns        { margin-left: calc(var(--unit) * 7 + var(--gutter) * 7); }
   .offset-by-eight.column,
   .offset-by-eight.columns        { margin-left: calc(var(--unit) * 8 + var(--gutter) * 8); }
   .offset-by-nine.column,
   .offset-by-nine.columns         { margin-left: calc(var(--unit) * 9 + var(--gutter) * 9); }
   .offset-by-ten.column,
   .offset-by-ten.columns          { margin-left: calc(var(--unit) * 10 + var(--gutter) * 10); }
   .offset-by-eleven.column,
   .offset-by-eleven.columns       { margin-left: calc(var(--unit) * 11 + var(--gutter) * 11); }

   .offset-by-one-third.column,
   .offset-by-one-third.columns    { margin-left: calc(var(--unit) * 4 + var(--gutter) * 4); }
   .offset-by-two-thirds.column,
   .offset-by-two-thirds.columns   { margin-left: calc(var(--unit) * 8 + var(--gutter) * 8); }
   .offset-by-one-half.column,
   .offset-by-one-half.columns     { margin-left: calc(var(--unit) * 6 + var(--gutter) * 6); }
}

/* Base */

body {
   direction: rtl;
   margin: 0px;
   padding: 0px;
   font: 400 12pt/18pt screen;
   color: rgb(var(--ultradark-rgb));
   opacity: 0;
   transition: opacity .5s;
   background-repeat: no-repeat;
   background-attachment: fixed;
   counter-reset: h4;
  }

   @media print {

      @page {
         margin-top: 1.8cm;
         margin-bottom: 1.8cm;
         margin-left: 2cm;
         margin-right: 2cm;
      }

      html, body, #office {
         background: rgb(var(--white-rgb)) !important;
         margin: 0 !important;
         padding: 0 !important;        
         color: rgb(var(--black-rgb)) !important;
      }
   }

/* Typography */

h1, h2, h3, h4, h5, h6 {margin: 0; transition: all .3s ease-out; }

h1 { color: rgb(var(--secondary-rgb)); font: 700 20pt/26pt screen;}
   h1:hover { text-decoration: none; color: rgb(var(--primary-rgb)); }

h2 { font: 400 14pt/18pt screen; color: rgb(var(--dark-rgb));}

h4:not(.box-row h4) { counter-reset: h5; margin-top: 32px !important; }
   h4:not(.box-row h4):before { counter-increment: h4; content: counter(h4) ". "; }

h5 { counter-reset: h6; margin-top: 16px !important; }
   h5:before { counter-increment: h5; content: counter(h5) "." counter(h4) ". "; }

h6 { margin-top: 8px !important; }
   h6:before { counter-increment: h6; content: counter(h6) "." counter(h4) "." counter(h5) ". "; }

   h4 + br, h5 + br, h6 + br, p + br, p + br + br, p br:first-of-type, ul + br, ul + br + br, ul > br, ol + br, ol + br + br, ol > br, li + br, .box-row + br, .box-row + br + br, article > br, aside > br, div + br, .actions br { display: none; }

p {text-indent: 24px; margin-bottom: 8px !important; }
   p:first-of-type, h4 + br + p, h5 + br + p, h6 + br + p { text-indent: 0; }

b, strong {font-weight: 550;}

a {
   font-weight: 550;
   line-height: 0;
   color: rgb(var(--secondary-rgb)); 
   text-decoration: none;
   width: fit-content;
   transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -webkit-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
}
   #office a {color: rgb(var(--ultradark-rgb));}

   a:visited {text-decoration: none;}
   a:hover {color: rgb(var(--primary-rgb));}
      @media print {
         a {color: rgb(var(--black-rgb)); text-decoration: none;}
         a:visited {color: rgb(var(--black-rgb)); text-decoration: none;}
         a:hover {color: rgb(var(--black-rgb)); text-decoration: none;}
      }

/* Buttons */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 16px 2px 16px;
color: rgb(var(--ultradark-rgb));
text-align: center;
font-weight: 500;
letter-spacing: 1px;
font-size: 12pt;  
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid rgb(var(--gray-rgb));
cursor: pointer;
box-sizing: border-box;
transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: rgb(var(--primary-rgb));
border-color: rgb(var(--primary-rgb)) !important;
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: rgb(var(--white-rgb));
background-color: rgb(var(--secondary-rgb));
border-color: rgb(var(--secondary-rgb));} 
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: rgb(var(--white-rgb));
background-color: rgb(var(--primary-rgb)) !important;
border-color: rgb(var(--primary-rgb));}
input[type="radio"] {margin: 0 12px 0 4px;}
input[type="radio"]:first-of-type {margin-right: 0;}
input::file-selector-button {
   color: rgb(var(--dark-rgb));
   padding: 6px 8px;
   margin-left: 12px;
   border: 1px solid rgb(var(--light-rgb));
   background: transparent;
   border-radius: 4px; }

/* Forms */
form input:not([type="checkbox"], [type="radio"]),
form textarea,
form select,
form button {width: 100%; box-sizing: border-box;}
   .checkbox {display: flex; gap: 4px; align-items: flex-start;}
label {color:rgb(var(--ultradark-rgb)); font: 400 9pt/14pt screen;}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px;
background-color: rgb(var(--ultralight-rgb));
border: 1px solid rgb(var(--light-rgb));
font-weight: 600;
color: rgb(var(--ultradark-rgb));
font-size: 11pt;
font-family: screen;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; 
transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
select[multiple] {min-height: 250px;}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
   -moz-appearance: none;
	   appearance: none; }
textarea {
min-height: 150px;
padding-top: 6px;
overflow:hidden;
line-height: 16pt;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid rgb(var(--primary-rgb));
outline: 0; }
label,
legend {
display: inline-block;}
fieldset {
padding: 0;
border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
display: inline; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;}
   #office input:not([type="submit"],[type="button"],[type="file"]), #office textarea:not(code, .code), #office select {background-color: rgb(var(--white-rgb));}


.userForm label input {margin: 0 0 0 4px; }
   .userForm .field, .userForm .field input {width: 100% !important; box-sizing: border-box !important;}
   .userForm p { line-height: 1.6; }
   .userForm textarea { min-height: 250px; }
   .userForm optgroup { font: normal 11pt/14pt screen; }
   .userForm .linerbox { font: 500 12pt/16pt screen; margin-top: 12px; }
      .userForm .linerbox a { font: 700 12pt/16pt screen; }
      .userForm .linerbox input { background-color: rgb(var(--white-rgb)); }
      .userForm .linerbox input:last-of-type { margin-bottom: 2px; }

   .userForm .three.columns {color: rgb(var(--ultradark-rgb)); font: 400 10pt/14pt screen; padding: 0 0 12px 0;}
      .userForm .three.columns a { font: 600 10pt/14pt screen; }
      @media screen and (max-width: 850px) {
         .userForm .columns {width: 100% !important; margin-right: 0;} 
      }
      @media screen and (min-width: 850px) {.userForm .three.columns {padding: 0 0 0 12px; text-align: left; } }
     
   [data-condition-value] {display: none;}

.btn-loading {opacity: 0.6; pointer-events: none;}
.btn-success {background: rgba(var(--success-rgb), 1) !important; color: rgb(var(--white-rgb)) !important;}
.btn-error {background: rgba(var(--danger-rgb), 1) !important; color: rgb(var(--white-rgb)) !important;}

/* Utilities */

ol {list-style: decimal;}
ul {list-style-type:circle;}
ol:not(#toc.ol, #office ol), ul:not(#toc ul, #office ul) {margin: 12px 0 16px 0; padding: 0 24px 0 0;}
br + ol:first-of-type, li > br + ul:first-of-type, li > ul:first-of-type, li > ol:first-of-type  {margin: 6px 0 16px 0;}
li {margin: 4px 0 8px 0;}

th,
td {
text-align: right;
border-bottom: 1px solid rgb(var(--light-rgb)); }
th:first-child,
td:first-child {
padding-right: 0; }
th:last-child,
td:last-child {
padding-left: 0; }

button {margin-bottom: 0; }
input, textarea, select, fieldset {margin-bottom: 0.5rem;}
pre, blockquote, dl, figure, table, p, form {margin: 0; width: 100%;}

.u-full-width, .u-max-full-width { width: 100% !important; box-sizing: border-box !important; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }
.ltr {direction: ltr;}

/* Components */

.content {
   box-sizing: border-box;
   z-index: 1;
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   transition: all .3s ease-out;		
}

.box {
   --box-padding: 36px;
   padding: var(--box-padding);
   color: rgb(var(--ultradark-rgb));
   overflow: hidden;
   border: 1px solid rgb(var(--light-rgb));
   background-color: rgb(var(--white-rgb));
   border-radius: 8px;
   transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
   @media screen and (max-width: 750px) {.box {--box-padding: 24px;}}

      .box:hover {border-color: rgb(var(--gray-rgb));}
         form .box {background: rgb(var(--ultralight-rgb));}
         .box + form {margin-top: 16px;}
			.box .linerlist .liner {margin-top: 0px;}

      .box .icons {
         display: flex;
         justify-content: space-between;
         padding-top: 6px;
      }
         .box .icons img {
            display: inline-block;
            width: 25px;
            height: 25px;
            cursor: pointer;
            opacity: 0.5;
            filter: saturate(25%) grayscale(100%);
            transition: opacity .2s ease-out, filter .2s ease-out;
         }
            .box .icons img:hover {opacity: 1; filter: saturate(100%) grayscale(0%);}

   .box .photo {
      height: 250px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top left;
      margin: 
         calc(-1 * var(--box-padding)) 
         calc(-1 * var(--box-padding)) 
         calc(-2 * var(--box-padding)) 
         calc(-1 * var(--box-padding));
      flex-grow: 1;
   }
      @media screen and (min-width: 850px) {.box .photo {margin-bottom: calc(-3 * var(--box-padding));}}
      @media print {.box .photo, .box .title {display:none !important;}}

   .box .content .icon {
      width: 48px;
      height: 48px;
      filter: grayscale(100%);
      opacity: 0.4;
   }

   .box .content .title {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto; 
      max-width: fit-content;
      word-break: break-word;
   }
      .box .content .title h3 {font: 700 16pt/24pt Screen !important; margin-top: 8px !important;}
      .box .content .title span {
         color: rgb(var(--dark-rgb));
         font: normal 11pt/15pt screen;
      }

      .box .content article {font: 400 12pt/18pt Screen;}
         #office .box .content article {font: 400 11pt/18pt Screen;}
         
      .box .content article img {
         width: 24px;
         filter: grayscale(100%);
         opacity: 0.6;
         margin-bottom: -8px;
      }

      .box .content .title + article {margin-top: 24px; }

      .box .image img {width: 100%;} 

   .credit {
	   display: flex;
	   align-items: center;
	   gap: 4px;
	   font: 400 9pt/14pt screen;
      margin-top: 6px;
   }
   .credit a {
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; 
      white-space: nowrap;
   }  
   .credit img {width: 16px !important; filter: grayscale(100%); opacity: 0.6;}

	.box-item .comment {
	   margin-top: 8px;  
      text-align: center;
	   font: 400 9pt/14pt screen;
   }
   		   
.box-row {  
   border-radius: 6px; 
   padding: 16px 20px;
   border: 1px solid rgb(var(--light-rgb));
   background-color: rgba(0, 0, 0, .025); 
   color: rgb(var(--ultradark-rgb));
   overflow: hidden;
   position: relative; 
   transition: all .3s ease-out;
   margin: 0 0 6px 0;
}
   .box-row:hover {border: 1px solid rgb(var(--gray-rgb)); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;}
   .print .box-row {font: normal 14pt / 18pt print !important; margin: 12px 0;}

   .box-row .icon {width: 24px !important; height: 24px !important;}
   .box-row h4, .article .box-row h4 {
	   color: rgb(var(--secondary-rgb));
	   font: 600 11pt / 14pt screen !important;
	   margin: 0px 0 0px 0;
	   flex-grow: 1;
	   transition: all .3s ease-out;
   }
	   .box-row h4:hover {color: rgb(var(--primary-rgb));}

	   .print .box-row h4 {font: normal 14pt / 18pt printB !important;}

   .box-row article  {
	   padding: 12px 0px 0px 0px;
	   line-height: 1.4;
   }
	   .box-row article h1, .box-row article h2, .box-row article h3 {display: none;}	
	   .brands .box-row article {display: none !important;} 		
	   .print .box-row article {line-height: 1.2;}
			   
code, .code {
   height: 500px;
   direction:ltr;
   font: normal 14px/24px consolas, courier, monospace;
   white-space: pre-line;
   background-color: #F0F0E5 !important;
   width: 100%;
}

   .fileview, .photoview {
      background-color: rgb(var(--ultralight-rgb));
      background-size: contain !important; 
      background-repeat: no-repeat;
      height: 160px; 
      margin-bottom: 8px; 
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgb(var(--light-rgb)); 
      direction: ltr;
      text-transform: uppercase;
      font:700 14pt/14pt screen;
      opacity: 0.7; filter: saturate(25%);
      transition: all .2s ease-out;				
   }
      .fileview:hover, .photoview:hover {
         opacity: 1; filter: saturate(100%);
      }			

   .actions {margin: 16px 0 0; font: normal 10pt/14pt screen; display: flex; flex-direction: column; gap: 8px;}
      .actions .actions, .actions input {margin: 0 !important;}
      .actions:after {display: none;}
      .actions a {width: 100%;} 
      @media (min-width: 750px) {.actions .actions {flex-direction: row;}}   
      @media (max-width: 750px) {.actions .columns {width: 100%; margin-right: 0;}}

   @media print {
      button, input[type="submit"], input[type="reset"], input[type="button"], footer, .actions, .grid-item:has(.search-wrapper) { display: none !important;}
   }

   .success, .success a {color: rgb(var(--success-rgb)) !important;}
   .danger, .danger a {color: rgb(var(--danger-rgb)) !important;}
   .warning, .warning a {color: rgb(var(--warning-rgb)) !important;}

   .info.box, .success.box, .danger.box, .warning.box {border-radius: 6px; transition: border-color 0.2s ease;}
   .info.box {background-color: rgba(var(--gray-rgb), 0.2); border: 1px solid rgba(var(--gray-rgb), 0.5) !important;}
   .success.box {background-color: rgba(var(--success-rgb), 0.1); border: 1px solid rgba(var(--success-rgb), 0.5) !important; }
   .danger.box {background-color: rgba(var(--danger-rgb), 0.1); border: 1px solid rgba(var(--danger-rgb), 0.5) !important; }
   .warning.box {background-color: rgba(var(--warning-rgb), 0.1); border: 1px solid rgba(var(--warning-rgb), 0.5) !important; }

   .copy-on-click {cursor: alias; margin: 12px 0 4px; font: 400 12pt/16pt screen !important; padding: 48px 28px 20px; background-color: rgb(var(--secondary-rgb)); border-radius: 0; color: rgb(var(--ultralight-rgb)); transition: all .3s ease-out; }
      .copy-on-click:hover { background-color: rgb(var(--primary-rgb)); }

   .english {
      font: normal 12pt/14pt Times;
      direction: ltr;
      text-align: left;
   } 
     
   .toc {
      font: normal 10pt/14pt screen !important;
      list-style-type: none !important;
      padding: 16px 18px;
      margin: 0 0 36px 0;
      border: 1px solid rgb(var(--light-rgb));
      border-radius: 6px;
      background-color: rgb(var(--ultralight-rgb));
      color: rgb(var(--ultradark-rgb));
      counter-reset: h4-counter;
   } 
      #toc:empty::before  {
         content: '.';
         opacity: 0;
      }
   
         .toc a {
            text-decoration: none;
            color: rgb(var(--ultradark-rgb)); 
            transition: all 0.3s ease;
         }
         .toc a:hover {font-weight: 600 !important; color: rgb(var(--secondary-rgb));}
         .toc-level-0 a {font-weight: 500 !important;}
         .toc-level-1 a {font-weight: 450 !important;}
         .toc-level-2 a {font-weight: 400 !important;}
         .toc-level-0:not(.toc-level-0:last-of-type), .toc-level-1, .toc-level-2 {margin-bottom: 4px;}
         .toc-sublist {list-style-type: none; margin: 4px 0 12px 0; padding-inline-start: 12px;}
         .toc > li {
            counter-increment: h4-counter;
            counter-reset: h5-counter; 
         }
         
         .toc-sublist > li {
            counter-increment: h5-counter;
            counter-reset: h6-counter; 
         }
         
         .toc-sublist .toc-sublist > li {
            counter-increment: h6-counter;
         }
         
         .toc-level-0 a::before {
            content: counter(h4-counter) ". ";
         }
         
         .toc-level-1 a::before {
            content: counter(h5-counter) "." counter(h4-counter) ". ";
         }
         
         .toc-level-2 a::before {
            content: counter(h6-counter) "." counter(h5-counter) "." counter(h4-counter) ". ";
         }

/* -- Grids */	  

.grid { 
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: 4px;
   grid-auto-flow: row;
   grid-gap: 12px;
   clear: both;
 }
   @media screen and (max-width: 950px) {
      .grid {
         grid-template-columns: 1fr;
         grid-auto-flow: row !important;
      }
   }
   .grid-item {
      grid-column: span 1;
      grid-row: span 12;
      border-radius: 8px;
      border: 1px solid rgb(var(--light-rgb));
      overflow: hidden;
      word-break: break-word;
      max-width: 100%;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
   }
      .grid-item:hover {border-color: rgb(var(--gray-rgb)); box-shadow: rgba(0,0,0,0.1) 0 1px 2px; transform: translateY(-1px);}
         .grid-item:has(.grid-menu.list):hover, .grid-item.box:hover {box-shadow: none; transform: none;}

      .grid-item:has(.chart) {overflow:visible;}
      
      @media (max-width:950px) {.grid-item { grid-column: span 4 !important; }}
      @media print {
         .grid-item, .grid-item .content {border: 0.25px solid rgb(var(--dark-rgb)); border-radius: 8px; background-color: #fff !important;}
         .grid-item, .grid-item .content:has(.grid-menu), .grid-item, .grid-item .content.chart {border: none;}
      }

      .tall, .wide-tall, .wider-tall, .widest-tall {grid-row: span 24; }
      .taller, .wide-taller, .wider-taller, .widest-taller {grid-row: span 36; }
      .tallest, .wide-tallest, .wider-tallest, .widest-tallest {grid-row: span 60; }

      .wide, .wide-tall, .wide-taller, .wide-tallest { grid-column: span 2; }
      .wider, .wider-tall, .wider-taller, .wider-tallest { grid-column: span 3; }
      .widest, .widest-tall, .widest-taller, .widest-tallest { grid-column: span 4; }
 
.grid-menu {font: 400 11pt/17pt Screen;}
   .grid-menu.hide, .hiding {display:none;}
                
   .grid-menu .grid-item {
      user-select:none;  
      transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; 
      background-color: rgb(var(--white-rgb), 1);
   }
      .grid-menu .grid-item[data-detail], .grid-menu .grid-item[data-link] {cursor: pointer;}

      .grid-menu .grid-item.divider:hover {box-shadow: none; transform: none;}

      .grid-menu .grid-item.box {grid-row: span 19 !important;}
         @media screen and (max-width: 850px) {.grid-menu .grid-item.box {grid-row: span 20 !important;}}
         @media screen and (max-width: 750px) {.grid-menu .grid-item.box {grid-row: span 22 !important;}}
         @media screen and (max-width: 450px) {.grid-menu .grid-item.box {grid-row: span 22 !important;}}

      .grid-menu .grid-item .content {padding: 24px; width:100%;}    
         .grid-menu .grid-item[class*=" left-"] .content {align-items: flex-end;}
         .grid-menu .grid-item.box .content {padding: 0;}
         .grid-menu .grid-item .content.chart {padding: 0 0 0 24px; height: 180px; margin: -60px 0 -12px 0; flex-direction: row; filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.25));}
         .grid-menu .grid-item .content.search {z-index: 999; height: 112px;  padding: 0 36px 16px 36px;}
         .grid-menu .grid-item .content:has(.grid-menu.list) {padding: 0; justify-content: center;}
         
         .grid-menu.list {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 12px;
            padding: 2px 0 0 2px;
            scrollbar-width: none;
            -ms-overflow-style: none;
         }
            .grid-item .grid-menu.list {margin: 0 36px;}
            .grid.grid-menu.list::-webkit-scrollbar {display: none;}
            .grid.grid-menu.list .grid-item {flex: 0 0 auto; min-width: 20px;}
            .grid.grid-menu.list h3 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

         .grid-menu .grid-item .content .image {
            background-size: contain;
            background-position: top left; 
            background-repeat: no-repeat;	   
            flex-grow: 1;
            margin: -24px -24px 0 -24px;      
         }
            .grid-menu .grid-item .content .liner + .image {background-size: cover; margin: 4px 0 0 0;}
            #office .grid-menu .grid-item .content .image {background-size: contain;} 
  
            .grid-menu .grid-item .content h3 {color: rgb(var(--secondary-rgb)); font: 600 13pt/19pt screen; margin-top: auto;}
             
            .grid-menu .grid-item[class*=" left-"] .content h3 {display:flex; flex-direction: column; align-items: flex-end; text-align: left;}
               .grid-menu .grid-item .content h3 img {
                  display: block;
                  width: 24px;
                  margin: 0 0 8px 0; 
                  filter: grayscale(100%);
                  opacity: 0.4;
               }

               .grid-menu .grid-item .content h3:hover {color: rgb(var(--primary-rgb));}
               .grid-menu .grid-item .content h3 + span {display: flex; flex-direction: column; width:100%; color: rgb(var(--dark-rgb)); font: 400 11pt/15pt screen;}
               .grid-menu .grid-item[class*=" left-"] .content span {text-align: left; align-items: flex-end;}
               .grid-menu .grid-item .content h3 + span .inputs {margin-top: 12px; width:100%; display: flex; gap: 12px;}
               .grid-menu .grid-item .content span + article {margin-top: 12px;}
               .grid-menu .grid-item[class*=" left-"] .content article {text-align: left; align-items: flex-end;}


   .grid-menu-detail {
      overflow: hidden;
      display:none;
      opacity:0;
      transform:translateY(12px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      font: 400 12pt/20pt Screen;
      color: rgb(var(--ultradark-rgb));
   }
      .grid-menu-detail .content:not(.box .content) {
         background-color: rgb(var(--white-rgb));
         padding: 36px;
      }

      .grid-menu-detail .content > span {font: 400 12pt/16pt Screen; color: rgb(var(--dark-rgb));}
      .grid-menu-detail .content h3 + img {margin-top: 16px;}
      .grid-menu-detail .content article {margin-top: 16px;}

      .grid-menu-detail h4 {font: 600 14pt/20pt screen !important;}
      .grid-menu-detail h4:not(p + br + h4, p + br + br + h4):first-of-type {margin-top: 0 !important;}
      .grid-menu-detail h5 {font: 550 13pt/19pt screen;}
      .grid-menu-detail h6 {font: 500 12pt/18pt screen;}

      .grid-menu-detail.is-active {display:block;}
         .public .grid-menu-detail.is-active h3 {font: 700 16pt/24pt screen;}
         .public .grid-menu-detail.is-active h3 + img {margin-top: 16px;}

         .grid-menu-detail.is-active .liner:first-of-type {margin-bottom: 24px;}
         .grid-menu-detail.is-active .box-row .liner {margin: 0px; align-items: center;} 
         .grid-menu-detail.is-active .box-row article .liner {margin: 0 0 4px 0;}
         .grid-menu-detail.is-active .box-row article .liner:last-child {margin: 8px 0 0 0;}
         .grid-menu-detail.is-active .grid-menu, .grid-menu-detail.is-active .calendar {margin-top: 24px;}
         .grid-menu-detail.is-active .actions:not(.grid-menu .actions, article .actions) {flex-direction: row; justify-content: space-between;}

         @media print {
            .grid-menu {margin: 0 !important;}
            .grid-menu-detail.is-active.box {padding: 0px; border:none !important;}
            .grid-menu-detail.is-active.box:hover {box-shadow: none;}
            .grid-menu-detail.is-active.box .grid-item {border: 0.25px solid rgba(var(--black-rgb), 0.5)};
         }
      .grid-menu-detail.is-visible {opacity:1; transform:none;}
      .grid-menu-detail.grid-item:hover {transform:none;}
      .grid-menu-detail.success-form {border: 1px solid rgba(var(--success-rgb), 1) !important; box-shadow: 0 0 5px rgba(var(--success-rgb), 0.5) !important; }
      .grid-menu-detail.error-form {border: 1px solid rgba(var(--danger-rgb), 1) !important; box-shadow: 0 0 5px rgba(var(--danger-rgb), 1) !important; }
 
   .grid-menu-back {}
 
/* -- Dividers */	  

.line {display: flex; gap: 8px; align-items: center; margin: 32px 0 0; filter: grayscale(100%); transition: color 0.5s ease, opacity 0.5s ease;}
   .line img {height: 16px;}
   .line a { font-size: 10pt; text-decoration: none; color: rgb(var(--black-rgb)) !important; opacity: 0.6;}
   .line span { font: 400 9pt screen; padding-right: 4px; }   
   .line:hover, .line a:hover {filter: grayscale(0); opacity: 1;}
   .line:before, .line:after { content: ''; flex-grow: 1; height: 0.75px;  margin: auto; transition: filter 0.5s ease, opacity 0.5s ease; opacity: 0.2; }
   .line:before {background: rgb(var(--danger-rgb)); max-width: 5%;}
   .line:after {background: rgb(var(--success-rgb)); min-width: 5%;}
   .line.brand::before, .line.brand::after { background: rgb(var(--primary-rgb)); }
   .line:hover::before, .line:hover::after {opacity: 1;}

.liner {display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; width: 100%; margin: 16px 0 4px; font: 550 9pt/13pt screen; color: rgba(0,0,0,0.6); transition: all 0.3s ease-out; }
   .liner span:first-of-type {order: 1;  flex: 0 0 auto; white-space: nowrap;}
   .liner span:last-child {order: 3; display: block; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
   .liner.lg span {font: 600 11pt/16pt screen;}
   .liner:after {content: ''; flex: 1; min-width: 8px; height: 1px; order: 2; background: rgba(0,0,0,0.1); margin: auto 0;}
   .liner:hover, .liner span:hover {color: rgb(var(--primary-rgb)) !important;}
      
      .liner:not(.box-item .row .liner, #log .liner):first-of-type {margin-top: 0 !important; }
      .liner img {width: 24px !important; height: 24px !important; flex-shrink: 0; display: block; align-self: center; margin-bottom: 4px !important; filter: grayscale(100%); opacity: 0.4;}

      .print .liner, .print .liner a, .edit .liner, .edit .liner a {font: normal 12pt/16pt print !important; }

   @media print {
      .line, .liners {display: none;}
      .liner:after {background: rgb(var(--dark-rgb));}
   }
   
   .slide, .slides, .slidex { cursor: pointer; }

/* -- User */	  

header {margin: 36px 0 24px 0; display: flex; gap: 16px;}
   header div {gap: 16px; display: flex; align-items:center; }
   header img {height: 36px;}

   @media screen and (max-width: 950px) {
      header {align-items: center;}
      header div {flex-direction: column; align-items: flex-start !important; gap: 0px;}
   }
   
footer .container { 
   padding: 24px 20px 36px 20px !important;
   display:flex;
   justify-content: space-between; 
   align-items: flex-start;
   flex-wrap: wrap; 
   gap: 16px;
}
   footer .container::after {content: ''; display: none;}
      footer .container > :last-child {width: 100%; color: rgb(var(--dark-rgb)); font: 300 8pt/14pt screen;}
      #office footer .container {gap: 72px; align-items: flex-end;}      
      #office footer .container > :last-child {width: fit-content; text-align: left; flex-grow: 1; color: rgb(var(--dark-rgb)); font: 300 8pt/14pt screen;}
      footer .col {display:flex; flex-direction: column; gap: 8px;}   
         footer .col:empty {display:none;}   
      footer a {display: inline-flex; align-items: center; color: rgb(var(--ultradark-rgb)); font: 600 11pt/14pt screen; text-decoration: none; opacity: 0.8; max-width: fit-content;}
         footer a img, .edit .toolbar img { width: 24px; filter: grayscale(100%); opacity: 0.6; margin: 0 0 0 6px !important; }
         footer a:hover {opacity: 1; font-weight: 700;}

      @media screen and (max-width: 750px) {
         #office footer .container {gap: 12px; padding-bottom: 32px !important; justify-content: space-evenly;}
         #office footer .container > :last-child {width: 100%; padding: 0 16px; text-align: right;}
      }
   
/* -- Items */

[class*="transparent"] {
   border-radius: 0px;
   background: none !important;
   border: none;
   padding: 0 !important;
   box-shadow: none;
}
   [class*="transparent"]:hover {box-shadow:none; transform: none;}

[class*="transparent-border"] {
   background: none !important;
   border-radius: 0px !important;
}

[class*="transparent-border-radius"] {
   background: none !important;
}

.divider {
   grid-row: span 6; 
   background: none !important;
   border: none;
   border-radius: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
   .divider:hover, .divider div:hover {border: none; box-shadow: none;}
      .divider .liner {font: 600 12pt/14pt screen;}
      .divider .content {padding: 0;}
      
   .divider.first, .public .divider {grid-row: span 4 !important;}

.photo {background-size: contain; background-repeat: no-repeat;}

.cta .content {
   padding: 36px !important;
	font: normal 13pt/18pt screen !important;
}
   .cta .content .image {margin: -36px -36px 24px -36px !important;}     
   .cta h3 {font: 700 18pt/28pt Screen;}

video {
 width: 100%;
 height: 100%;
 position: absolute;
 object-fit: cover;
 z-index: 0;
}
   .caption {
	   z-index: 2;
	   position: relative;
   }
   .caption h3 {
	   background: rgb(var(--white-rgb), 4);
	   font: normal 11pt/15pt screen !important;
	   max-width: fit-content;
	   padding: 8px 16px;
   }

   .logout {color: rgb(var(--danger-rgb)) !important;}
   
   @media screen and (max-width: 850px) {
      /*.ulogin .columns {width: 100% !important; margin-right: 0;}
      .ulogin .screen {display: none;} */
   }