@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
                        @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap");
                           
    		    
    		        :root   {
                                --gray001       : #E5E4E2; 
                                --gray002       : #D3D3D3; 
                                --gray003       : #B2BEB5; 
                                --gray004       : #C0C0C0; 
                                --gray005       : #A9A9A9; 
                                --gray006       : #899499; 
                                --gray007       : #848884; 
                                --gray008       : #818589; 
                                --gray009       : #708090;     
                                --gray010       : #71797E; 
                                --gray011       : #36454F; 
                              
                                --green001       : #E5E4E2; 
                                --green002       : #D3D3D3; 
                                --green003       : #B2BEB5; 
                                --green004       : #C0C0C0; 
                                --green005       : #A9A9A9; 
                                --green006       : #899499; 
                                --green007       : #848884; 
                                --green008       : #818589; 
                                --green009       : #708090;   
                              
                              
                                   --shade002      : #90e0ef;
                                --shade003      : #00b4d8;
                                --shade001      : #e0fbfc;
                                --shade004      : #0077b6;
                                --shade005      : #03045e;
                                
                               
                                
                              /*
                              
                              
                               --shade005      : #E5E4E2;
                                --shade004      : #D3D3D3;
                                --shade003      : #B2BEB5;
                                --shade002      : #C0C0C0;
                                --shade001      : #A9A9A9;
                              
                                --shade005      : #132a13;
                                --shade004      : #31572c;
                                --shade003      : #4f772d;
                                --shade002      : #90a955;
                                --shade001      : #ecf39e;
                              
                                
                                --shade002      : #90e0ef;
                                --shade003      : #00b4d8;
                                --shade001      : #e0fbfc;
                                --shade004      : #0077b6;
                                --shade005      : #03045e;
                                
                              */
                                
                            }
                            
                     
                            
    		        body    {
                              font-family       : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
                            }
                    
                    .slim   {
                                font-size       :   16em;
                                font-weight     :   100;
                                color           :   var(--gray001)
                            }
                            
                    .button {
                                background: #ACACAC;
                                background: -moz-linear-gradient(45deg, #ACACAC 0%, #DBE4D1 0%, #FFFFFF 100%);
                                background: -webkit-linear-gradient(45deg, #ACACAC 0%, #DBE4D1 0%, #FFFFFF 100%);
                                background: linear-gradient(45deg, #ACACAC 0%, #DBE4D1 0%, #FFFFFF 100%);
                                  border                : none;
                                  color                 : var(--gray011);
                                  padding               : 10px 10px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : .8rem;
                                  border-radius         : 30px;
                                  margin                : 3px;
                            }
                            
                     
                            
                    .i      {        
                                  background-color      : white;
                                  border                : none;
                                  color                 : var(--shade003);
                                  padding               : 7px 7px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : 1.1rem;
                                  border-radius         : 50%;
                                  margin-right          : 10px;
                            }
                            
                            
                    .button_only {
                                  background-color      : var(--shade003); /* Green */
                                  border                : none;
                                  color                 : white;
                                  padding               : 10px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : .8rem;
                                 
                                  border-radius         : 50%;
                                  margin                : 3px;
                            }               
                    
                    .i_only      {        
                                  background-color      : white;
                                  border                : none;
                                  color                 : var(--shade003); /* Green */
                                  padding               : 7px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : 1.1rem;
                                  border-radius         : 50%;
                            }        
                            
                            
                            
                    .button_rev {
                                  background-color      : white;
                                  border                : none;
                                  color                 : var(--shade003); /* Green */
                                  padding               : 10px 10px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : .8rem;
                                  letter-spacing        : 3px;
                                  border-radius         : 30px;
                                  margin                : 3px;
                            }
                            
                     
                            
                    .i_rev      {        
                                  background-color      : var(--shade003);
                                  border                : none;
                                  color                 : white;
                                  padding               : 7px 7px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : 1.1rem;
                                  letter-spacing        : 3px;
                                  border-radius         : 50%;
                                  margin-right          : 10px;
                            }
                            
                            
                    .button_only_rev {
                                  background-color      : white;
                                  border                : none;
                                  color                 : var(--shade003);
                                  padding               : 10px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : .8rem;
                                  letter-spacing        : 3px;
                                  border-radius         : 50%;
                                  margin                : 3px;
                            }               
                    
                    .i_only_rev      {        
                                  background-color      : var(--shade003);
                                  border                : none;
                                  color                 : white;
                                  padding               : 7px;
                                  text-align            : center;
                                  text-decoration       : none;
                                  display               : inline-block;
                                  font-size             : 1.1rem;
                                  letter-spacing        : 3px;
                                  border-radius         : 50%;
                            }    
                    
                    .box_001
                            {
                                 background-color       : var(--shade001);
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : var(--shade005);
                            }
                    .box_002
                            {
                                 background-color       : var(--shade002);
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : white;
                            }
                    .box_003
                            {
                                 background-color       : var(--shade003);
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : white;
                            }
                    .box_004
                            {
                                 background-color       : var(--shade004);
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : white;
                            }
                    .box_005
                            {
                                 background-color       : var(--shade005);
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : white;
                            }
                            
                    .box_transparent
                            {
                                 background-color       : white;
                                 border                 : 1px solid #D3D3D3;
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : var(--gray0011);
                            }        
                            
                    .box_gray
                            {
                                 background-color       : var(--gray001);
                                 border-radius          : 15px;
                                 padding                : 10px;
                                 margin                 : 5px;
                                 color                  : var(--gray011);
                            }         
                            
                    .box_full
                            {
                                 padding                : 0px;
                                 margin                 : 0px;
                                 color                  : var(--gray011);
                            }                
                            
                    .container
                            {
                                 display                : flex;
                                 flex-wrap              : wrap;
                                 padding                : 3px 3px;
                                 width                  : 442px;
                            }
                            
                    .container_no_edge
                            {
                                    display                : flex;
                                    flex-wrap              : wrap;
                                    padding                : 0px 0px;
                                    width                  : 442px;
                                    
                            }         
                            
                            
                     .box_gradient
                            {
                                    background: #ACACAC;
                                    background: -moz-linear-gradient(45deg, #ACACAC 0%, #DBE4D1 0%, #FFFFFF 100%);
                                    background: -webkit-linear-gradient(45deg, #ACACAC 0%, #DBE4D1 0%, #FFFFFF 100%);
                                    background: linear-gradient(45deg, #ACACAC 0%, #DBE4D1 0%, #FFFFFF 100%);
                                    border-radius          : 15px;
                                    padding                : 10px;
                                    margin                 : 5px;
                                    color                  : var(--gray011);
                            }        
                    .expanded_div {
                                flex: 1; 
                            }        
                            
                    .centered         
                            {
                                justify-content        : center; 
                                align-items            : center; 
                            }
                            
                    .left-aligned         
                            {
                                justify-content        : left; 
                                align-items            : left; 
                            }        
                            
                    .right-aligned         
                            {
                                justify-content        : right; 
                                align-items            : right; 
                            }           
                            
                    
                    .font_body
                            {
                                font-size              :  1.0rem;
                            }
                    
                    .font_h1
                            {
                                font-size              :  2.5rem;
                            }        
                    
                    .font_h2
                            {
                                font-size              :  2.0rem;
                            }        
                            
                    .font_h3
                            {
                                font-size              :  1.5rem;
                            }        
                            
                    .font_caption
                            {
                                font-size              :  0.85rem;
                            }        
                    
                    .font_nav
                            {
                                font-size              :  0.75rem;
                            }             
                            
                    .font_tiny
                            {
                                font-size              :  0.65rem;
                            }             
                            
                    
                    .table_formatted   {
                              border-collapse           : collapse;
                              width                     : 95%;
                            }
                            
                   .table_formatted        td {
                              border                    : 1px solid #ddd;
                              padding                   : 8px;
                              font-size                 :  1rem;
                            }
                            
                    .table_formatted        th {
                              border                    : 1px solid #ddd;
                              padding                   : 8px;
                              font-size                 : .85rem;
                            }        
                            
                    .table_formatted        tr:nth-child(even){background-color: #f2f2f2;}
                            
                    .table_formatted        tr:hover {background-color: #ddd;}
                            
                    .table_formatted        th {
                              padding-top               : 10px;
                              padding-bottom            : 10px;
                              text-align                : left;
                              background-color          : var(--shade003);
                              color                     : white;
                              table-layout              : fixed;
                            }        
                            
                            
                            
                    form {
                            width:90%;
                            margin-right            : 10px ;
                            margin-left             : 10px;
                            margin-bottom           : 20px;
                            padding                 : 10px;
                            background              : white;
                            
                          }
                        
                        
                          input[type="text"],
                          input[type="password"],
                          input[type="datetime"],
                          input[type="email"],
                          input[type="number"],
                          input[type="search"],
                          input[type="tel"],
                          input[type="time"],
                          input[type="url"],
                          textarea{
                            border              : none;
                            height              : 50px;
                            margin              : 0;
                            outline             : 0;
                            padding             : 5px;
                            width               : 100%;
                            background-color    : white;
                            color               : black;
                            border-radius       : 8px;
                            margin-bottom       : 6px;
                            margin-right        : 6px;
                            font-weight         : 300;
                            font-style          : normal;
                            font-size           : 1.0rem;
                          }
                          
                          input[type="date"]{
                            border              : none;
                            height              : 50px;
                            margin              : 0;
                            outline             : 0;
                            padding             : 5px;
                            width               : 95%;
                            background-color    : white;
                            color               : black;
                            border-radius       : 8px;
                            margin-bottom       : 6px;
                            margin-right        : 6px;
                            font-weight         : 300;
                            font-style          : normal;
                            font-size           : 1.0rem;
                          }
                          
                          
                          input[type="radio"],
                          input[type="checkbox"] {
                            margin: 0 4px 8px 0;
                          }
                          
                          dropdown {
                                height: 100px;
                            }
                          
                          
                          
                          fieldset {
                            margin-bottom: 10px;
                            border: none;
                          }
                          
                          legend {
                            font-size: .9rem;
                            margin-bottom: 3px;
                            letter-spacing:3px;
                          }
                          
                           label {
                            display             : block;
                            margin-top          : 10px;
                            padding             : 2px;
                            margin-bottom       : 3px;
                            font-weight         : 500;
                            font-style          : normal;
                            font-size           : 0.75rem;
                            letter-spacing      : 5px;
                          }
                          
                          select {
                            border              : none;
                            height              : 50px;
                            margin              : 0;
                            outline             : 0;
                            padding             : 5px;
                            width               : 95%;
                            background-color    : white ;
                            color               : black;
                            border-radius       : 8px;
                            margin-bottom       : 6px;
                            margin-right        : 6px;
                            font-weight         : 300;
                            font-style          : normal;
                            font-size           : .9rem;
                          }
                          
                          select option {
                              border-color          : white;
                              background-color      : white;
                              color                 : #333; 
                              padding               : 5px 10px; 
                            }
                        
                            
                        
                          .box_special{
                                background: #F6F4F1;
                                background: -moz-linear-gradient(45deg, #F6F4F1 0%, #76FF6B 50%, #46FFF5 100%);
                                background: -webkit-linear-gradient(45deg, #F6F4F1 0%, #76FF6B 50%, #46FFF5 100%);
                                background: linear-gradient(45deg, #F6F4F1 0%, #76FF6B 50%, #46FFF5 100%);
                                border-radius          : 15px;
                                padding                : 10px;
                                margin                 : 5px;
                                color                  : white;
                          }      
                            
                            
                    .iconx {  
                          float: left;
                          font-size:1000%;
                          position: absolute;
                          top:2.0rem;
                          left:2.0rem;
                          opacity: .66;
                        }
                        
                        
                            
                        .grey-dark
                        {
                          background: #495057;
                          color: #efefef;
                        }
                        
                        .red-gradient {
                          background: linear-gradient(180deg, rgba(207,82,82,1) 0%, rgba(121,9,9,1) 80%);
                          color: #fff;
                        }
                        .red {
                          background: #a83b3b;
                          color: #fff;
                        }
                        
                        
                        .purple
                        {
                          background:#ADFF2F;
                          color: #fff;
                          opacity:.85;
                          margin-right:20px;
                        }
                        
                        .orange {
                          background: #ffc241;
                          color: #fff;
                        }
                        
                        .kpi-card
                        {
                          overflow: hidden;
                          position: relative;
                          display: inline-block;
                          float: left;
                          padding: 1em;
                          border-radius: 0.7em;
                          font-family: sans-serif;  
                          min-width: 120px;
                          margin-left: 0.5em;
                          margin-top: 0.5em;
                          border-color:white;
                          margin:  auto; 
                          display:flex; 
                          color:#008000;
                          justify-content: center;
                          padding:15px 
                         
                        }
                        
                        .card-value {
                          display: block;
                          font-size: 1.2em;  
                          font-weight: bolder;
                        }
                        
                        .card-text {
                          display:block;
                          font-size: 90%;
                          padding-left: 0.2em;
                        }

                          
                        *,
                        *::before,
                        *::after {
                          margin: 0;
                          padding: 0;
                          box-sizing: border-box;
                         
                        }
                        
                        body {
                          --color: rgba(30, 30, 30);
                          --bgColor: rgba(245, 245, 245);
                          --align-content: center;
                          gap: 2rem;
                          font-family: "Exo 2", sans-serif;
                          color: var(--color);
                          background: white;
                        }
                        
                        h1 { text-align: center }
                        
                        ol {
                          width: min(60rem, 90%);
                          margin-inline: auto;
                        
                          display: flex;
                          justify-content: center;
                          flex-wrap: wrap;
                          gap: 3rem;
                        
                          list-style: none;
                          counter-reset: stepnr;
                        }
                        
                        li:nth-child(6n + 1) { --accent-color: #b8df4e }
                        li:nth-child(6n + 2) { --accent-color: #4cbccb }
                        li:nth-child(6n + 3) { --accent-color: #7197d3 }
                        li:nth-child(6n + 4) { --accent-color: #ae78cb }
                        li:nth-child(6n + 5) { --accent-color: #7dc7a4 }
                        li:nth-child(6n + 6) { --accent-color: #f078c2 }
                        
                        ol li {
                          counter-increment: stepnr;
                           
                          width: 9rem;
                          --borderS: .2rem;
                          aspect-ratio: 1;
                          display: flex;
                          flex-direction: column;
                          justify-content: center;
                          padding-left: calc(var(--borderS) + 1rem);
                          position: relative;
                         
                         
                        }
                        ol li::before,
                        ol li::after {
                          inset: 0;
                          position: absolute;
                          border-radius: 50%;
                          border: var(--borderS) solid var(--bgColor);
                          line-height: 1.2;
                          opacity:.5;
                        }
                        ol li::before {
                          content: counter(stepnr);
                          color: var(--accent-color);
                          padding-left: 5rem;
                          font-size: 8rem;
                          font-weight: 700;
                          overflow: hidden;
                        }
                        
                        ol li::after {
                          content: "";
                          filter: drop-shadow(-0.15rem 0.25rem 0.0675rem rgba(0, 0, 0, 0.55)) blur(5px);
                        }
                        
                        ol li > * { width: 4.5rem }
                        ol li .iconx { font-size: 1.5rem; color: var(--accent-color); text-align: center }
                        ol li .title { font-size: 1.0rem; font-weight: 500; margin-top :25px; }
                        ol li .descr { font-size: 0.8rem; font-weight: 300 }
                        
                       
                       .box_image {
                          width             :   9rem;
                          border            :   5px solid  var(--bgColor);
                          border-radius     :   50%;
                          background-color  :   #ccc;
                          box-shadow        :   -2px -2px 5px rgba(255, 255, 255, 0.6),
                                                2px 2px 5px rgba(0, 0, 0, 0.3);
                        }
                        
                        .box_curve1 {
                          width             : 100vw;
                          height            : 100px;
                          border-color      : transparent transparent #000 transparent;
                          border-radius     : 0 0  55%/100px 0 ;
                        }
                        
                        .box_curve2 {
                          width             : 100vw;
                          height            : 100px;
                          border-color      : transparent transparent #000 transparent;
                          border-radius     : 0 100px  65%/100px 0 ;
                        }
                        
                        .box_curve3 {
                          width             : 100vw;
                          height            : 100px;
                          border-color      : transparent transparent #000 transparent;
                          border-radius     : 0 0  65%/100px 0 ;
                        }
                        
                        
                        .form-popup {
                            display:none;
                            position: fixed;
                            padding:10px;
                            top: 0;
                            left: 0;
                            transform: translate(0, 0);
                            background-color: white;
                            width: 100vw;
                            height:100vh;
                            border: 0px solid #f1f1f1;
                            z-index: 99999999999999999;
                        }
                        
                        /* Add styles to the form container */
                        .form-container {
                          max-width: 380px;
                          padding: 5px;
                         
                        }
                        
                        /* Full-width input fields */
                        .form-container input[type=text], .form-container input[type=password] {
                          width: 100%;
                          padding: 0px;
                          margin: 5px 0 5px 0;
                          border: none;
                          background: #f1f1f1;
                        }
                        
                        /* When the inputs get focus, do something */
                        .form-container input[type=text]:focus, .form-container input[type=password]:focus {
                           background-color: white;
                          outline: none;
                        }
                        
                        /* Set a style for the submit/login button */
                        .form-container .btn {
                          background-color: #04AA6D;
                          color: white;
                          padding: 16px 20px;
                          border: none;
                          cursor: pointer;
                          width: 100%;
                          opacity: 1;
                        }
                        
                        /* Add a red background color to the cancel button */
                        .form-container .cancel {
                          background-color: red;
                        }
                        
                        /* Add some hover effects to buttons */
                        .form-container .btn:hover, .open-button:hover {
                          opacity: 1;
                        }
                        
                        
                        .custom-file-upload {
                            border: 1px solid #ccc;
                            display: inline-block;
                            padding: 6px 12px;
                            cursor: pointer;
                            background-color: #f0f0f0;
                            border-radius: 4px;
                            /* Add other desired styles for your custom button */
                        }
                        
                        input::file-selector-button {
                            background-color: #007bff;
                            color: white;
                            padding: 8px 16px;
                            border: none;
                            border-radius: 4px;
                            cursor: pointer;
                        }
                        
                        
                        @media screen and (-webkit-min-device-pixel-ratio:0) { 
                          select,
                          textarea,
                          input {
                            font-size: 16px;
                          }
                        }  
                              
        
        
       </style>