*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

:root{
  --link-color:#3e86c9;
  --list-bg: #cfcdc5;
  --hover-desc-color: #fff;
  --hover-desc-background: #586939;
  --border-color:#5f5f5f;
  --small-font: 0.7em;
  --med-font: 0.9em;
  --pop-edit-bg: #fff;
  --list-butt-bg:#2364a0;
  --list-butt-hover-bg:#698841;
  --list-butt-text:#ffffff;
  --doc-control-bg:#ffffff;
  --doc-control-label-bg:#b1b0b0;
  --header-font:'Chivo', sans-serif;
  --document-container-bg:#fff;
  --tool-label-bg:#698841;
  --aux-button-bg:#66d53f;
  --aux-button-hov:#ff1d1d;
  --doc-element-button-bg:#b0db8c;
  --drop-content: #f3f3f3;
  --drop-content-font: 0.8em;
  --drop-content-sub: #9b977d;
  --drop-content-sub-font: 0.8em;
  --drop-hover:#e2e4e6;
  --drop-hover-link:#294d6b;
  --options-frame-color:#ca00d1;
  --text-editor-tools-bg:#a0a56d;
  --doc-item-header-main-bg:#72716e;
  --doc-item-header-bg:#ebeae5;
  --button-font:'Nunito', sans-serif;
}

html{
  height:100%;
}
body{
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  height: 100%;
  padding-top: 100px;
  font-family: 'Nunito', sans-serif;
  background-color: #e9e9e9;
  }

  li{
    list-style: none;    
  }
  
  a{
    font-family: 'Nunito', sans-serif;
    text-decoration: none;
    padding:8px;
  }

  strong{
    font-family: 'Nunito', sans-serif;
    font-size: 40px;
    color: #0b2232;
  }


  h1{
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    margin: 15px 20px;
  }

  h2{
    margin: 8px;
  }

  h3{
    font-family:'Nunito', sans-serif;
    margin-bottom: 10px;
  }

  p{
    font-size: 100%;
    transition: 0.3s;
    padding: 8px;
    text-align: left;
    font-size: 14px;
  }
button{
  border-style: none;
  padding: 4px 4px;
  }

form{
  display:flex;
  flex-direction: column;
 
  padding:10px;
  margin:20px 20px 20px 20px;
  width: 100%; 
}

table{
  border-width: 1px 0px 0px 1px;
  border-style: solid;
  border-color: black;
  border-collapse:collapse;
  width: 100%;
  z-index: 1;
}

table p{
  padding: 0;
  font-size: small;
}

thead{
  width: 100%;
  background-color: #949494;  
}

th{
  border-width: 0px 1px 1px 0px;
  border-style: solid;
  border-color: black;
  padding: 5px;
  font-weight: bold;
  background-color: #adc9dc;
  font-size: 0.7em;
  text-align: left;
}

td{
  border-width: 0px 1px 1px 0px;
  border-style: solid;
  border-color: black;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  background-color: rgb(255, 255, 255);
}

a:visited {
  color: black;
}

.table-caption{
  width:100%;
  background-color: #a0a9b1;
  font-weight: bold;
  color: #000000;
  font-size: 0.9em;
  border-width: 1px 1px 0px 1px;
  border-color: black;
  border-style: solid;  
  text-align: left;
  padding: 2px;
  z-index: 0;
}

.div-caption{
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #000000;
  font-size: 1em;  
  height: auto;
  z-index: 0;
}

input, textarea, select{
  outline: 1px solid black;
}

input, textarea {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: var(--med-font);  
  padding: 5px;
  font-family: 'Nunito', sans-serif;
  border:none;
}

.input-single-row{
  display: flex;
  width: 100%;
  background-color: #fff;
}

label{
  margin-right: 5px;
  margin-bottom:5px;
}

form textarea{
  margin: 0px;
}

.shadow{
  box-shadow: 2px 2px 4px 0px rgba(0,0,1,0.3);
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito/Nunito-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'Chivo';
  src: url(fonts/Chivo/Chivo-VariableFont_wght.ttf);
}

.flow_content_box{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  
}

.filter-box{
  display: flex;
  flex-direction: column;
  width:100%;  
  background-color: #214669;
  color: #fff;
  padding: 5px;
}

.filter-box input{
  border-radius: 5px;
  border-width: 0px;
  width: 100%;
}

.filter-content{
  display: flex;
}

.filter-label{
  width: 100%;
}

.flow_content_row{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  background-color: #925555;
}

.work_area{
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;  
  transition: 0.5s;
}

.step-tools{
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 200px;
  background-color: #dcdddc;
  border: 2px solid black;
  padding: 10px;
  border-radius: 10px;  
  box-shadow: 2px 2px 4px 0px rgba(0,0,1,0.3); 
}

.cat-header{
  width: 100%;
  border: 1px solid black;
  border-width: 0px 0px 1px 0px;
  font-size: 0.8em;
  background-color: #97adc3;
}

.selection-box {
  position: absolute;
  border: 1px dashed #000;
  background: rgba(173, 216, 230, 0.3);
  pointer-events: none; /* Prevent interaction */
}

.text-dim{
  color: #00556e;
}
.text-editor-tools{
  display: flex;
  justify-content: center;
  align-items: center;
  top:70px;
  width:-webkit-fill-available;
  height: 45px;
  background-color:var(--text-editor-tools-bg);
  position:fixed;
  z-index: 2;
}

.import-box{
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-height: 100px;
  max-width: 750px;
  background-color: #fff;
  border: 1px solid black;
  margin: 20px 20px 0px 20px;
  padding: 10px;
}

.arrow-main{
  display: flex;
}

.editor-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  width:25px;
  height: 25px;
  background-color:var(--text-editor-tools-bg);
  transition: 0.2s;
}
.editor-btn:hover {
  background-color: #f8ec82;
}

.draggable_element{
  display: flex;
  justify-content: center;
  align-items: center;
  width:fit-content;
  background-color: #fff;
  border: 3px solid black;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
}

.draggable-step{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 2px solid black;
  border-radius: 10px;
  width: fit-content;
  padding: 5px;
}

.draggable-step select{
  font-size: 0.7em;
  padding:3px;
  width: 100%;
}

.size-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width:15px;
  height:15px;
  border: 1px solid black;
  font-size: 0.8em;
}

.drag-tools-container{
  display: flex;
  width:-webkit-fill-available;
  justify-content: center;
  position:absolute;
  top:70px;
  align-items: center;
  z-index: 2;
  background-color: var(--text-editor-tools-bg);
  padding: 5px;
}

.drop-area{
  height: 100%;
  border: 1px solid green;
  position: relative;
}

.font-size-select{
  padding: 0px;
  width: fit-content;
  font-size: small;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  width:50px;
  height: 25px;
  border-width: 2px;
  margin-right: 10px;
}

.edit_area{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;  
}

.select-step{
  font-size: small;
  padding: 3px;
  width: auto;
}

.document_container{
  display: flex;
  flex-direction: column;
  background-color: var(--document-container-bg);
}

.doc_control_form_container{
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-top: 70px;
  background-color: var(--doc-control-bg);
  align-items: start;
  width: 750px;
  font-size: var(--med-font);
}

.doc_control_inputs_box{
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid black;
  border-width: 1px 0px 0px 1px;
}

.doc_control_form_container textarea{
  border: 1px solid black;
  border-width: 0px 1px 1px 0px;
}

.doc_control_row{
  display: flex;
  width: 100%;
}

.doc_control_inner{
  display: flex;
  width: 100%;  
  border-style: none;
}


.doc_control_row > * {
  border-style:solid;
  border: 1px solid black;
  border-width: 0px 1px 1px 0px;
}

.doc_control_input{
  width:80%;
  padding: 3px;
  font-size: var(--med-font);
}


.doc_control_select{
  padding: 3px;
}

.doc_control_label{
  display: flex;
  width: 30%;
  font-weight: bold;
  padding: 3px 3px 3px 3px;
  background-color: var(--doc-control-label-bg);
  font-size: var(--med-font);
}

.doc-element-tools{
  display: flex;
}

#text-editor{  
  min-height: 150px;
  padding: 10px;
  font-family:'Nunito';
  cursor: text;
}

.info-box{
  display: flex;
  flex-direction: column;
  width:750px;
  background-color: #9fb3b9;
  border:2px solid #454d50;
  margin-bottom: 10px;
  border-radius: 15px;
}

.doc-edit-buttons{
  display: flex;
  align-items: center;
  justify-items: center;
  width: 70%;
  background-color: var(--doc-element-button-bg);
  transition: 0.3s;
  padding: 3px;
  margin-bottom: 2px;
}

.doc-edit-buttons:hover{
  background-color: #405e1f;
  color: #fff;
}

.paragraph-text{
  text-align:start;
}

.create-box{
  display: flex;
  position: relative;
  flex-direction: column;
  margin: 3px;
  padding: 2px;
  border:1px solid var(--aux-button-bg);
}
.tool-button{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: var(--link-color);
  color: #fff;
  border-radius: 10px;
  margin: 10px;
  width:fit-content;
  align-self: center;  
}

.tool-button:hover{
  background-color: var(--list-butt-hover-bg);
}

.tool-button-corner{
  display: flex;
  position: absolute;
  top:0;
  right: 0;
  font-size: 0.7em;
  background-color: var(--aux-button-bg);
  color:#fff;
  padding:2px;
}

.tool-button-corner:hover{
  background-color:var(--aux-button-hov);
}

.expand-button{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background-color: #376c98;
  font-weight: bold;
  padding: 2px 7px 2px 7px;
  cursor: pointer;
  border-radius: 20px;
  margin:20px;
}

.transition-fade{
  opacity: 0;
  transition: opacity 1s;
}

.tools-label{
  display: flex;
  padding: 3px;
  color: #fff;
  background-color: var(--tool-label-bg);  
  justify-content: center;
  align-items: center;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin: 2px;
  background-color:#165385;
  border-radius: 50%;
}

.triangle {
  width: 0;
  height: 0;
  border-left:  7px solid transparent;
  border-right: 7lpx solid transparent;
  border-bottom: 10px solid white;
  rotate: 90deg;
  transition: 0.3s;
}

.tool-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  background-color: var(--link-color);
  color:#fff;
  margin-left: 10px;
  margin-right: 2px;  
}

.tools-select{
  padding: 3px;
  margin: 0px;
}

.heading-text{
  font-weight: bold;
}

.grid_cell_container{
  display: flex;
  justify-content: center;
  align-items: center;  
  width:100%;
}

.flow_content_grid{
  display: grid;
}

.font_bold{
  font-weight: bold;
}

.doc_control_table{
  display: flex;
  flex-direction: column;
  width: 90%;
  font-size: small;
  margin-bottom: 5px;
}

.doc_control_item{
  display: flex;
  justify-content: center;
  width:100%;
  display: flex;
  flex-direction: column;
  margin: -0.5px;
}

.table_cell{
  color: black;
  width:100%;
  padding-left:0.15em;
  padding-right:0.15em;
  border: 0.5px solid black;
  margin: -0.5px;
  margin-right: 0.5px;
}

.grid_row{
  display: grid;
  padding-bottom: 20px;
  grid-column-gap: 20px;
  justify-content: center;
}

.flow_cell_print{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 5px;
  border-style: solid;
  border-width: 0.2em;
  border-radius: 8px;
  border-color: #000;
  font-size: 100%;
  align-items: center;
  width:200px;
  height: 100%;
}

.cell_main{
  display: flex;
  justify-items: center;
  align-items: center; 
  height: 100%;
}

.cell_center{
  display: flex;
  flex-direction: column;
  align-items: center;  
  height: 100%;
}

.cell_side{
  display: flex;
  width: 6px;
  height: 6px;  
  margin: 2.5px;
}

.table_item{
  display: flex;
  flex-direction: column;
  outline: 1px black solid;
  width:100%;
  margin: 0.5px;
}

.table_item_print{
  display: flex;
  flex-direction: column;
  border: 1px black solid;
  font-size: smaller;
  margin: -0.5px;
}

.table_header_print{
  background-color: #dfdfdf;
  padding-left: 5px;
  padding-right: 5px;
}

.table_content_print{
  padding-left: 5px;
  padding-right: 5px;
}

select{
  padding: 5px 10px 5px 10px;  
  width: fit-content;
  font-size: var(--med-font);
  font-weight: bold;
  font-family: 'Nunito', sans-serif; 
  border: none; 
}

option{
  padding:5px;
  border-bottom: 1px solid black;
}

textarea{
  min-height: 120px;
  margin-bottom: 5px;
}

.flow_link{
  background-color:transparent;
  font-weight: 700;
  color:#003470;
  margin-bottom: 3px;
  cursor: pointer;
}

.risk-assessment-preview{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  position: absolute;
  left:790px;
  top:80px;
  width:750px;
  margin-right: 20px;
  min-height: 1040px;  
}

.risk-area{
  display: flex;
  flex-direction: column;  
  width: 100%;
  margin-top:90px;
}

.edit_input{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: medium;     
  padding: 11px;
  font-family: 'Nunito', sans-serif;
  border-style: solid;
  border-color: rgb(124, 71, 83);
  border-width: 2px;
  border-radius: 10px;
}

.j_space_around{
  justify-content: space-around;
}

.standard_margin{
  margin:10px;
}

.standard_padding{
  padding:10px;
}
.auto_wide{
  width: auto;
}

.round_border{
  border-radius: 15px;
}

.big_a{
  font-size: x-large;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
}

#loading-spinner-container {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.spinner {
  top:50%;
  left:50%;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* MAIN MENU */
/* MAIN MENU */
/* MAIN MENU */
/* MAIN MENU */
.form_item{
  margin: 15px 0px 70px 0px;
}

.step_container_print{
  display: flex;
  flex-direction: column;
  font-size: smaller;
  background-color: #fff;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

.step_container_header{
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  background-color: #666666;
  border: 1px solid black;
  margin-bottom: -0.5px;
}
.p_print{
  margin:0;
  padding:0;
}
.split_container{
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #cfcfcf;
}
.tool_panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
  padding: 10px;
  height: 100%;
  left:0;
  color: #fff;
  background-color: #182a34;
  font-size: var(--small-font);
}
.content_panel{  
  width: 75%;
  height: 100%;  
  background-color: #b89bb5;
  overflow: scroll;  
  scrollbar-width: 5px;
  text-align: center;
}

.red-marker{
  box-shadow: 0 0 0 1px red;
}

.mark-date{
  border: 2px solid red;
  margin: -2px;
}

.list_panel{
  display: flex;  
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;  
  overflow: scroll;  
  scrollbar-width: 5px;
  text-align: center;
}

.panel_form{
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: transparent;
  margin: 5px;
  padding: 5px;
}

.a4 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width:750px;
  height: 1060px;
  margin: 20px auto;
  background-color: #fff;
}

.a4_edit {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width:750px;
  height: 1040px;
  background-color: #fff;
}

.a4_header{  
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  width: 100%;
  top:0;  
}

.a4_header_edit{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  top:0;  
}

.a4_footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;  
  width: 100%;
  bottom: 0;  
}
.a4_footer_edit{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  bottom: 0;  
  margin-top: 5px;
  justify-content: flex-end;
}

.prereq_body{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 87px;
  width: 100%;
  height: 100%;
}

.doc_body{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 87px;
  width: 100%;
  height: 100%;
}

.prereq-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid black;
}

.panel_form select{
  margin: 5px;
}

.flow-body-view{
  position: absolute;
  width:100%;  
}

.link-btn-cont{
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-types{  
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
}

.link-opt{
  border-bottom: 1px solid black;
  cursor: pointer;
}

.link-opt:hover {
  background-color: #001413;
  color: #fff;
}

.link-text{
color: #3a83c7;

cursor: pointer;
display: inline-block;
}

.link-preview{
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 2px solid black;
  padding: 10px;
  z-index: 999;
  width:750px;
  height: 1044px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.preview-area{
  display: flex;
  width: 100%;
  outline:1px solid black;
  text-align: left;
  border: none;
  padding: 5px;
}

.preview-label{
  display: flex;
  width: 100%;
  text-align: center;
  outline: 1px solid black;
  background-color: #cacaca;
  font-weight: 700;
  font-size: var(--med-font);
  border: none;
  padding: 3px;
}

.tool-menu{
  position: absolute;
  top:0;
  left:100%;
  display: flex;
  flex-direction: column;
  width:350px;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 2px solid black;
}

.drop-input{
  display: flex;
  flex-direction: column;
  font-size: small;
  width:auto
}

.standard_blue{
  background-color: #0b2232;
  color: #fff;
}

.light_blue{
  background-color:#45597d;
  color: #fff;
}
.wide{
  width: 80%;
}

.relative{
  position:relative;
}

.main_container{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  justify-content: center;
  align-items: center;
 }

 .form_container{
  display: flex;
  flex-direction: column;
  width: 50%;  
  padding:20px;
  align-items: center;
  border-radius: 10px;
 }

.logobar{
  height: 47px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #2b4c5f;
  padding:10px 10px;
  transition: 0.3s;
  z-index: 999;
  }

.navbar{  
  display: flex;
  width: 100%;
  height:26px;
  justify-content: center;
  align-items: center;
  background-color: #1d323f;
  transition: 0.3s;
  z-index: 999;
}

.menu {   
  display: flex;
  align-self:center;
  justify-content: space-between;
  align-items: center;
  gap: 30px;  
  transition: 0.3s;  
}

.menu.active{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.menu a{
  padding: 0px;
}

.menu_gritting{
  color: #fff;
  font-size: 12px;
}

.mobile-menu{
  display: none;
}

.mobile-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width:80%;
  padding: 20px;
  margin: 10px;
  background-color: #558aa9;
  color: #fff;
  font-size: medium;
  cursor: pointer;
  border-radius: 10px;
}

.sub-menu-mobile{
  display: none;
  flex-direction: column;
  background-color: #fff;
  width: 60%;
}

.sub-menu-mobile.active{
  display: flex;
}

.sub-menu-mobile a{
  border: 1px solid black;
  border-width: 0px 0px 1px 0px;
}

.logo-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px 0px 0px 20px;
}

.logo-med{  
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  min-height: 25px;
  margin: 8px;
  background-image: url('flowlogo.png');
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.logo-box p{
  padding: 0px 4px 0px 0px;
}

.notification-page{
  display: flex;
  flex-direction: column;
}


.placeholder{
  position: sticky;
  bottom: 0;
  height: 60px;
  width: 100%;
  background-color:transparent;
  z-index: 1;
}

.section-dropdown{
  display: flex;
  flex-direction: column;
  position:relative;
  background-color: transparent;
  transition: 0.5s;  
  height: 100%;
}

.section-dropdown-content{
  display: none;
  position: absolute;
  top: 100%;
  flex-direction: column; 
  background-color:var(--drop-content);
  transition: 0.5s;
  width: max-content;
  height: auto;  
}

.dropdown-sub{
  display: flex;
  flex-direction: column;
  margin-right: 2px;
  z-index: 99;
}

.dropdown-sub:hover {
  background-color:var(--drop-hover);
}

.dropdown {
  display: flex; 
  z-index: 999;
  height: 100%;
}

.dropdown-sub:hover .dropdown-content .a{
  color: #fff; 
}

.prereq-container{
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #fff;
  width:700px;
  margin: 5px;
  border: 1px solid black;
  font-size: small;
}

.prereq-header{
  display: flex;
  justify-content: space-between;
  background-color: var(--doc-item-header-main-bg);
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
  font-size: large;
}

.prereq-item{
  display: flex;
  flex-direction: column;
}

.prereq-item-header{
  background-color: var(--doc-item-header-bg);
  padding: 3px;
}

.prereq-item-content{
  display: flex;
  background-color: #fff;
  justify-content: start;
  align-items: center;
}

.dropbtn {
  background-color: transparent;
  border: none;
  color:#fff;  
  cursor: pointer;
}

.dropbtn-sub{
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-width: 0px 0px 1px 0px;
  color:#000000;
  padding: 8px 16px;
  font-size: small;
  cursor: pointer;
}

.step-content{
  display: flex;
  flex-direction: column;
  justify-content: left;
  text-align: start;
  max-width: 250px;  
}

.small-checkbox{
  width: auto;
  padding: none;
  margin: 5px;
}

.tools-row{
  justify-content: center;
  align-items: center;
}
.color-dropdown{
  display: flex;
  position: relative;
  width: 15px;
  height: 15px;
  margin: 3px;
  border: 1px solid black;
  background-color: rgb(45, 45, 255);
  cursor: pointer;
}

.color-sample{
  margin: 3px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.colors-container{
  display: none;
  flex-wrap: wrap;
  position: absolute;
  top: -1px;
  left: 100%;
  background-color: #dbe7eb;
  border:1px solid black;
  width: 65px;
  z-index: 3;
}

.small-font{
  font-size: small;
}

.options-frame{
  background-color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 5px 5px 20px 5px;
  border:1px solid var(--options-frame-color);
  margin-top: 5px;
  margin-bottom: 5px;
}

.bottom-tools{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: end;
  width: 100%;
  padding: 0px;
  margin: 0px;
  bottom: 0px;
}

.top-tools{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: end;
  width: 100%;
  padding: 0px;
  margin: 0px;
  top: 0px;
}

.frame-button{
  display: flex;
  background-color: var(--options-frame-color);
  color: #fff;
  width: fit-content;
  margin: 5px;
  font-size: 0.7em;
  transition: 0.3s;
}

.frame-button:hover{
  font-size: 0.85em;
  cursor: pointer;
}

.work-space{
  display: flex;
  flex-direction: column;
}

.page-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.list-tools{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-self: center;
  background-color: #e0dac8;
  margin-bottom: 20px;
}

.filter-item{
  display: flex;
  padding: 5px;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.trans-rec{
  border: 1px solid red;
  position: absolute;
  top: 0px;
  left: 0px;  
}

.grid_row_list{
  display: grid;  
}

.list_item{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #dadfd1;
  max-width: 250px;
}

.list_header{
  display: flex;
  color: #fff;
  width: 100%;
  background-color: #0b2232;
  padding: 5px 15px 5px 15px;
}

.list_box{
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-bottom: 20px;
  width:100%;
}

.list_container{
  display:grid;
  width: 100%;
  background-color:#0b2232;
  row-gap: 1px;
  margin-bottom: 20px;  
}

.submit-form{
  border:1px solid black;
  background-color: #ffffff;
  padding: 0px;
  max-width: 750px;
}

.submit-form label{
  margin: 0px;
}

.custom-form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #dfdfdf;
  min-width:400px;
  max-width:750px;
  padding: 15px;   
}

.form-wrapper{
  width:850px;
}

.hover-info{
  position: absolute;
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 10px;
  background-color: #dcf89c;
  border-radius: 10px;
  border: 2px solid #405820;
}

.custom-form label, input, textarea, select{
  outline: 0px;
  margin:0px;
}

.form-elements-container{
  border:1px solid black;
  border-width: 0px 1px 1px 0px;
}

.user_notice{
  display: flex;
  flex-direction: column;
  width:100%;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size:var(--med-font);  
  font-weight: bold;
  padding: 10px;
  background-color: #e27d7d;
  border-radius: 15px;
  border:3px solid #910000;
  margin: 10px 0px 10px 0px;
}

.drop-down-select{
  position: relative;
}

.dropdown-content-sub {
  display: none;
  flex-direction: column;
  background-color: var(--drop-content-sub);
  width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
  transition: 0.5s;
}

.dropdown-content-sub a{
  color: #ffffff;
  font-size: var(--drop-content-sub-font);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #1f2d38;
  transition: 0.15s;
}

.dropdown-content-sub a:hover{
  background-color:var(--drop-hover-link);
}

.dropdown-content {
  display: none;
  position: absolute;
  top:99%;
  background-color: #f9f9f9;
  width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
  z-index: 100;
  font-size: small;
}

.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #1f2d38;
  transition: 0.15s;  
}

.dropdown-content a:hover {
  color: rgb(212, 212, 212);
  background-color: #575757;
  transition: 0.15s;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.button-container{
padding: 5px;
}

.new-list-item{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--list-bg);
  border-bottom: 1px solid black;
  }

  .list_button{
    color: var(--list-butt-text);
    background-color: var(--list-butt-bg);
    border-radius: 5px;
    padding: 5px 8px 5px 8px;
    font-size: var(--med-font);
    transition: 0.3s;
  }

  .list_button:hover {
    background-color: var(--list-butt-hover-bg);
    color:#fff;
    cursor:pointer;
  }

.popup-edit{
  display: flex;
  flex-direction: column;
  position: absolute;
  border:1px solid black;
  background-color: #fff;
  top:10%;
  left:50%;
  min-width: 300px;
  padding: 15px;
  z-index: 999;
}

.popup-box{
  display: flex;
  flex-direction: column;
  position: fixed;
  top:50%;
  left:50%;
  width:750px;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px;
  background-color: rgb(240, 238, 238);
  border: 1px solid black;
  border-radius: 0px;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  z-index: 999;
}

.popup-note{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top:50%;
  left:50%;
  width:400px;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px;
  background-color: #d6ebff;
  border: 2px solid #214669;
  border-radius: 12px;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  z-index: 999;
}

.popup-note p {
  padding: 0;
  text-justify: distribute;
}

.ccp-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  border:1px solid black
}

.small-button{
  font-size: 10px;
  margin: 2px;
  width:fit-content;
  background-color: var(--link-color);
  color: #fff;
  border-radius: 8px;
}

.stock-control-container{
  display: flex;
  flex-direction: column;
  width: 750px;
  padding: 5px;
  margin: 20px;
  background-color: #fff;
}

.stock-control-component{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

.trace-container{
  display: flex;
  flex-direction: column;
  width: 750px;
  padding: 5px;
  margin: 20px;
  background-color: #fff;
}

.trace-component{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

.form-main{
  display: flex;
  margin: 10px;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-width: 1px 0px 0px 1px;
}

.form-cell{
  display: flex;
  flex-direction: column;
  border-color: var(--border-color);
  font-size: 0.8em;
  width: 100%;
}

.form-tab{
  display: flex;
  flex-direction: column;
  background-color: #dbe9f2;
  min-width: 750px;
  padding: 20px;
  margin: 10px;
  box-shadow: 2px 2px 4px 0px rgba(0,0,1,0.3);
  border-radius: 15px;
  border: 2px solid #86a6bb;
}

.form-tab th{
  background-color: #97bdd7;
}

.form-cell-header{
  width: 100%;
  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
  background-color: #adc9dc;
  font-weight: 700;
  font-size: 12px;
  padding: 5px;
  letter-spacing: -0.3px;
  border: 1px solid var(--border-color);
  border-width: 0px 1px 1px 0px;
}

.form-cell-item{
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: white;
  border:1px solid var(--border-color);
  border-width: 0px 1px 1px 0px;
  padding: 3px;
}

.form-cell p{
  padding: 2px;
  align-self:baseline;
}

.border-main-box{
  border: 1px solid black;
  border-width: 1px 0px 0px 1px;
}

.border-inner{
  border: 1px solid black;
  border-width: 0px 1px 1px 0px;
}

.tools-row{
  display: flex;
  width: 100%;
  background-color: #888888;
  justify-content: center;
  padding: 5px;
}

.margin-small{
  margin: 5px;
}

.close-btn-small{
  display: flex;
  justify-content: center;
  color: #fff;
  background-color: #a01919;
  font-weight: bold;
  padding: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.close-btn-small:hover{
  background-color:#631010;
}


.button-row{
  display: flex;
  width:100%;
  justify-content: space-evenly;
  align-items: center;
}

.table-div{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 0px;
}

.table-div p{
padding: 0;
}

.red_dot{
  position: absolute;
  top:0px;
  left: 80%;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 4px;
}

.close-button{
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: rgb(211, 10, 10);
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  margin: 3px;
  width: 15px;
  height: 15px;
  border-radius: 10px;
}

.notification{
  display: flex;
  position: relative;
  margin: 0px 10px 0px 10px;
}

.search-content{
  display: none;
  flex-direction: column;
  position: absolute;
  top: 40px;
  width: max-content;
  max-height: 300px;
  overflow-y: scroll;
}

table input{
  border-style: none;
}

.form-row{
  display: flex;
  width: 100%;
}

.form-container{
  display: flex;
  flex-direction: column;
  min-width:850px;  
  margin: 10px;
  background-color: #fff;
  margin-bottom: 25px;
}

.production-container{
  display: flex;
  width: 100%;
  gap: 10px;
}

.risk_box{
  display: flex;
  margin-bottom: 15px;
}

.item-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-cell-item input[type='checkbox']{
  padding: 5px;
}

.small-button:hover {
  background-color: #a02341;
  cursor: pointer;
  transition: 0.3s;
}

.tool-button:hover {
  background-color: #a02341;
  cursor: pointer;
  transition: 0.3s;
}

.title-row{
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 4px;
}

.new-list-item:hover .hover-desc{
  display: block;
}

.product-label{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10cm;
  height: 15cm;
  border: 1px solid black;
}

.hover-desc{
  display: none;
  position: absolute;
  color: var(--hover-desc-color);
  background-color: var(--hover-desc-background);
  padding: 5px;
  width:auto;
  font-size: var(--small-font);
  border:1px solid white;
  border-radius: 10px;
  outline: 1px solid black;
  left:100%;
  top:0px;
  z-index: 2;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
}




.assoc_cont{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color:#dadfd1;
}

.general_container{
  display: flex;
  flex-direction: column;
  width: auto;
  justify-content: center;
  align-items: center;
}

.filters_container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #6986bb;
  border-radius: 0px;
  border: 3px solid  #2b374e;
  padding: 0px;
}

.filters_item{
  display: flex;
  flex-direction: column;
  margin:5px 10px 5px 10px;
}
.prereq_controls_input_box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color:var(--doc-control-label-bg);
  width: 100%;
  margin-top: 10px;
  color: #fff;
}
.prereq_controls_box{
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.selection_list_row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}

.selection_list_row p{
  font-size: medium;
  font-weight: 700;
  color: #000;
}

.close_button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}
.close_button:hover{
  background-color: #310000;
  color: #fff;
}

.risk_assessment_main{
  display: flex;
  flex-direction: column;
  margin: 40px;
  width: 100%;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

.risk_assessment_grid{
  display: grid;
  grid-template-columns: 100px auto auto auto 50px;
    width: 100%;
    background-color:  #c7c7c7;    
}

.print_grid{
  display: grid;
  height: 100%;
}

.grid_cell{
  display: flex;
  justify-content: center;
  align-items: center;
}

.table_title{
  padding: 7px;
  outline: 1px solid black;
  outline-offset: -1px;
  background-color: #2e525d;;
  color: #fff;
}

.table_content{
  padding: 4px;
  outline: 1px solid black;
  outline-offset: -1px;}

.table_column{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.table_row{
  display: flex;
  width: 100%;
}

.table_row_main{
  display: flex;
  width: 100%;
  height: 100%;
  outline: 1px solid black;  
  
}
.popup_edit{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  position: absolute;
  padding:25px;
  width: auto;
  background-color: var(--pop-edit-bg);
  border: 3px solid black; 
  border-radius: 15px; 
  z-index: 999;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
}

.control_measure_remote{
  display: flex;
  flex-direction: column;
  position: absolute;
  padding:25px;
  max-width: 300px;
  background-color: var(--pop-edit-bg);
  border: 3px solid black; 
  border-radius: 15px; 
  z-index: 100;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
}

.control_list{
  padding: 4px;
}

.doc_control_box{
  display:flex;
  width:100%;
  outline: 1px solid black;
}

.print_menu{
  display: flex;
  position: absolute;
  top:10px;
  left: 89%;
}

.print_container{
  display: flex;
  width: 100%;
  height:100%;
  background-color:#cccccc;
}

.flow_page{
  background-color: #a699d6;    
  align-items: center;
  width: 210mm;
  height: 297mm;  
  
}

.flex_col{
  display: flex;
  flex-direction: column;
}

.iner_col{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
}

.title_area{
  justify-content: center;
  align-items: center;
  height:80px;
  width:100%;
}

.title_area p{
  margin:0;
  padding:0;
  font-size: small;
}

.title_area h1{
  margin:0px 0px auto 0px;
  font-size: x-large;
}

.flex_row{
  display:flex;
  flex-direction: row;
}

.align_center{
  align-items: center;
}

.justify_center{
  justify-content: center;  
}

.justify_even{
  justify-content: space-evenly;
}

.full_wide{
  width:100%;
}

.settings_grid{
  display: grid;
  grid-template-columns: auto auto auto;
  margin: 20px;
}

.half_container{
  display: flex;
  flex-direction: column;
  width: 50%;
}

.table_header{
  display: flex;
  outline: 1px solid black;
  padding: 5px 10px 5px 10px;
  margin: 0.5px;
  background-color: #b3b3b3;
  font-size: large;
  font-weight: bold;
  width: 100%;
}

.space_between{
  justify-content: space-between;
}

.number_input{
  width:70px;
  margin: 0;
}

.input_print{
  display: flex;
  font-size: 14px;
  width: 100%;
  justify-content: space-between;
  margin: 5px;
}

.doc_history{
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #fff;
  outline: 1px solid black;
  margin: 0.5px;
}

.side_bar{
  width:350px;
  height: 100%;
  position: absolute;
  left:0;
  overflow-y: auto;
  background-color: #9c9c9c;
}

.flow_content{
width:100%;
height: 100%;
justify-content: center;
}

.pdf{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.flow_cell_print p{
  font-size: 0.8em;
  padding: 2px;
}

.print_page_flow{
  background-color: #fff;
  margin-bottom: 50px;  
  page-break-inside:avoid;
  text-align: center;
}

.display_area{
  margin-left: 350px;
  padding: 25px;
  width:100%;
  
  align-items: center;
  overflow-y: scroll;
}

.doc_control{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.canvas_page{
  background-color: #fff;  
  }

.print_panel{
  max-width: 100%;
  background-color: #696969;
  border-radius: 15px;
  padding: 10px;
}

.print_panel_placeholder{
  display: flex;
  flex-direction: column;
  left:0px;
  min-width: 300px;
}


.control_list p{
  font-size: smaller;
  margin: 0px;
  padding: 4px;
}
.step_box{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10px;
  background-color: #fff;
  outline: 2px solid black;
}

.step_header{
  display: flex;
}

.step_name{
  display: flex;
  width: 100%;
  background-color: #1c4664;
  color:#fff;
  padding: 10px;
  font-size: large;
  font-weight: bold;
  justify-content: center;
  align-items: center;
}

.step_name_ccp{
  display: flex;
  width: 175px;
  background-color: #d95454;
  color:#fff;
  padding: 10px;
  font-size: medium;
  font-weight: bold;
  justify-content: center;
  align-items: center;
}

.divider{
  display: flex;
  width: 100%;
  background-color: #8f8f8f;
  color:#000;
  padding: 10px;
  font-size: large;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  outline: 1px solid black;
}

.item_number{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: large;
  font-weight: bold;
  background-color: #be974d;
}

.list_main{
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  outline: 1px solid black;
}

.list_content{
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.list_content p{
  font-size: medium;
}






/* THIS IS HACCP BLOCK */
/* THIS IS HACCP BLOCK */
/* THIS IS HACCP BLOCK */
/* THIS IS HACCP BLOCK */
/* THIS IS HACCP BLOCK */

.my_message{  
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999; 
}

.error_message{
  color: #910000;
  font-weight: bold;
}




.flow_row{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow{
  width: 14px;
  height: 1000px;
  background-image: url(arrow_long.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 3px;
  
}

.arrow02 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #007bff;
  position: relative;
}
.create_flow_menu{
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin: 10px;
  width:100%;
  padding: 30px 30px;
  border-radius: 15px;
}

.create_flow_menu p{
  margin: 30px 0px 0px 0px;
  padding: 0;
  color: #000;
  font-weight: bold;
}

.login-form{
  display: flex;
  flex-direction: column;
  width:50%;  
}

.login-form h1{
  margin: 0px;
  font-size:larger;
}

.create_flow_menu .row{
margin: 25px 5px;
}

.create_flow_menu button{
  margin: 5px;
}
.input_edit_menus{
  margin: 0px 0px 15px 0px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
  background-color: #fff;
  font-size: medium;
  width:100%;
}


.dot{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;  
  cursor: pointer;
  transform: 0.3s;
}

.dotPrint{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5px;
  height: 5px;
}


.dotline{
  display: flex;
  justify-content: center;
  align-items: center;
}

.topCont{
display: block;
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

.flex-center-container{
  display: flex;
  justify-content: center;
}

.block-container{
  display: block;
}

.main-container{
  display: block;
  text-align: left;
  width:100%;
  background-color: #b5b5b5;
}

.edit-menu{
  display: flex;
  justify-content:center;
  align-items: center;
  background-color: #1a2a47;
  transition: 0.3s;
  width:100%;  
  }

.edit-menu button{
  padding: 10px;
  margin: 10px;
  width:auto;
  height: 50px;
  font-size: small;
  border-radius: 5px;
  transition: 0.3s;
}

.edit-menu button:hover{
  background-color:#be974d;
  color: #fff;
}
.edit-menu select{
  padding: 10px;
  margin: 10px;
  width:200px;
  height: 50px;
  font-size: auto;
}

.init_desc{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.add_value_cont{
  width:80%;
  display:block;
  font-size: small;
  color: #ffffff;
  background-color: #333e5d;
  padding: 15px;
  margin: 10px;
  min-height: 75px;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  border-radius: 15px;
}

.init_desc.disable{
  display: none;
}

.risknflow{
  display: none;
  transition: 0.5s;
}

.risknflow.active{
  display: flex;
  flex-direction: column;
  align-items: center;
  top:200px 
}

.holder{
  display: flex;
  flex-direction: column;
  size: a4; 
  align-items: center;
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
  border-radius: 15px;    
}

.list{
  display: grid;
  width:95%;
  grid-row-gap: 3px;
  background-color: #fff;
  border-radius: 15px;
  margin: 30px 0px;
  padding: 30px 0px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
  }

.list-row{
  background-color: #007bff;
}

.list-container{
  margin: 20px 5px 0px 5px;
  background-color: #fff;
}

.center{
  text-align: center;
  align-items: center;
  justify-content: center;
}

.add-row td{
  background-color: rgb(221, 221, 187);
  padding: 0;
  justify-content: center;
}

.apart {
  justify-content: space-between;
}

.even {
  justify-content: space-evenly;
}

.list h1{
  font-size: large;
  text-align: center;
  background-color: #425f2b;
  color: #fff;
  border-width: 0px 1px 0px 0px;
  border-color: #fff;
  border-style: solid;
  margin: 0px;
}
.list h2{
  font-size: large;
  text-align: center;
  font-weight: bold;
  color: #000;
 }

.list-cell{
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 15px;
  border-style: solid;
  border-color: #000;
  border-width: 0px 0px 1px 0px;
  font-size: larger;
  font-weight: 500;
}

.list-id{
  display: flex;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  padding: 15px;
  border-style: solid;
  border-color: #000;
  border-width: 0px 0px 1px 0px;
}

.list-button{
  display: flex;
  padding: 5px;
  justify-content: center;
  align-items: center;
  background-color:#fff;
  color: #003470;
  height: 30px;
  margin: 5px;
  border-style: solid;
  border-radius: 15px;
  border-width: 2px;
  border-color: #003470;
  cursor: pointer;
  transition: 0.3s;
 }

.list-button:hover{
  height: 30px;
  background-color: #8b0000;
  border-color: #310000;
  color: #fff;
}

.contParent{
  display:grid;
  grid-row-gap: 10px;
  grid-row: 2;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  background-color: #4a7ea3;
  border-style: solid;
  border-width: 3px;
  border-radius: 15px;
  border-color: #000000;
  padding: 15px;
  margin: 10px;
  background-color: #a0b17d;
  width:80%;
  }

.flow-container{
  display: grid;
  position: relative;
  grid-row: 1;
  grid-template-columns: 1fr;
  background-color: #4a7ea3;
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
  padding: 15px;
  margin: 10px;
  min-width: 1000px;
}

.flow-container-print{
  display: grid;
  grid-row: 1;
  grid-template-columns: 1fr;
  background-color: #ffffff;
  text-align: left;
}

.risk-container-print{
  display: grid;
  grid-row: 1;
  grid-template-columns: 1fr;
  background-color: #ffffff;
  text-align: left;
  margin-bottom: 60px;
}

.flow-container-print p{
  font-size: medium;
}

.flow-container-print h1{
  font-size: medium;
  margin: 0px;
}

.doc-control{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  height: 50px;
}

.show-options{
  display: block;
  max-height: 400px;
  overflow-y: scroll;
}

.drp-option{
  color:#3d3d3d;
}

.drp-option-general{
  display: flex;
  justify-content: space-between;
  align-items: center;  
  font-size: small;
  height: 30px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
  padding: 2px 5px 2px 5px;
}

.drp-option-general:hover {
  background-color: var(--link-color);
  color: #fff;
  cursor: pointer;
}

.drp-option:hover {
  background-color: var(--link-color);
  color: #fff;
  cursor: pointer;
}

.doc-header{
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border: 1px solid #000;
padding: 5px;
}

.doc-cont{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  padding: 5px;
}

.doc-content-absolute{
  display: flex;
  flex-direction: column;
  position: absolute;
  padding: 15px;
}

.sigmar{
  display: flex;
  justify-content: center;
  align-items: center;
}

.select_container_popup{
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: #fff;
  width: auto;
  padding:15px;
  height: auto;
  border: 3px solid black;
  border-radius: 15px;
  box-shadow: 5px 15px 15px 0px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, 0%);
}


.arrowColumn{
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrowColumnPrint{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
}


.arrowRow{
  display: flex;
  align-items: center;
  height:90px; 
  width: 100%;
  position: relative;
}

.arrow_container{
  display: flex;
  width: fit-content;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 70px;
}

.delArrow{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:30%;
  width:20px;
  height: 20px;
  border-radius: 10px;
  border-style: solid;
  border-color: #243155;
  border-width: 3px;
  color: #243155;
  font-size: larger;
  font-weight: bolder;
  z-index: 1;
  transition: 0.3s;
}

.delArrow:hover{
  border-color: #8b1c00;
  color: #8b1c00;
  transition: 0.3s;
}


.myForm{
display: none;
}
.myForm.active{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width:100%;  
  padding: 5px;
  background-color:#742e37;
  transition: 0.3s ease-in-out;
}

.gen_cont{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: #4a7ea3;
    border-style: solid;
    border-width: 3px;
    border-radius: 15px;
    gap: 5px;
    padding: 20px;
    margin:5px 5px;   
    
}

.block-cont{
display:block;
}
.gen_cont h1{
  color: #fff;
}

.sideForm{
  display: none;
  }

  .sideForm.active
  {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    padding: 5px;
    background-color: #742e37;
    transition: 0.3s ease-in-out;
  }

.selectStep{
  display: none;
}

.selectStep.active{
  display: flex;
    /* height: 30px; */
  width: 200px;
  font-size: medium;
  font-weight: 600;
  padding: 5px;
  margin: 10px;
  border-style: solid;
  border-radius: 7px;
  border-width: 2px;
  border-color: #000;
}
.description{
  display:block;
  padding: 5px;
  font-size: medium;
}

.description p{
  font-size: medium;
}

.sideStep{
  display: none;
}

.sideStep.active{
  display: flex;
  font-family: 'Nunito', sans-serif;
  width: 70%;
  height: 30px;
  width: 200px;
  font-size: medium;
  font-weight: 600;
}

.popup_frame{
  position: fixed;
  display: block;
  left:50px;
  top:100px;
  width: 90%;
  z-index: 98;
  background-color:#d5d0c0;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 15px;  
  padding: 20px;
  box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.75);
}

.popup_body_frame{
  display: flex;
  width: 100%;
  padding: 10px;
}

.popup_frame h1 {
  font-size: large;
  margin: 10px 0px;
}

.popup_column{
  width:50%;
  max-height: 600px;  
}

.popup_column form {
  display: flex;
  flex-direction: column;
}

#message_form{
  margin: 0px 10px 10px 0px;
  padding: 20px;
  background-color:#78a089;
  border-radius: 15px; 
}

#message_form textarea{
  max-width: 99%;
}

#message_form input{
  max-width: 99%;
}

#message_display{
overflow: auto;
}

.reply_container{
  border-style: solid;
  border-width: 2px;
  border-color: #366470;
  background-color: #b8dde6;
  border-radius: 15px;
  max-width: 99%;
  margin: 10px;
  padding: 5px;  
}

.reply_textarea{
  border-radius: 15px;
  padding: 10px;
}

.reply_text{
  max-width: 97%;
  margin: 10px;
  padding: 5px;
  border-radius: 15px;
}

.popup_close{
  position: absolute;
  top:5px;
  left:97%;
  background-color: none;
  }

.popup_close_02{
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  bottom:100%;
  left:100%;
  color:#fff;
  background-color:#004d49;
}
  
.message_container{
  border-style: solid;
  border-width: 2px;
  border-color: #668aa3;
  background-color: #7aa8c9;
  margin: 15px;
  width: 95%;
  padding: 10px;
  border-radius: 15px;  
  transition: 0.3s;
}

.message_container h1 {
  font-size: small;
}

.message_body{
  display: none;
}
.green_dot{
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #5fa543;
  border-radius: 100px;
  right:-110px;
}

.grey_dot{
  background-color: #a5a5a5;
}

.active_body{
  display: flex;
  flex-direction: column; 
}

.hidden{
  display: none;
}

.message_heading{
  display: flex;
}

.message_container h1{
  margin: 7px;
}

.message_container p {
  font-size: medium;
  margin: 20px 0px;
}

.message_container.row {
color: #092e2b;
}
.reply_box{
display: grid;
}

.reply_text_owner{
  border-style: solid;
  border-width: 2px;
  border-color: #366470;
  margin: 10px;
  padding: 15px;
  border-radius: 15px;
  background-color: #b8dde6;
  width:70%;
  justify-self:right;
}

.reply_text{
  border-style: solid;
  border-width: 2px;
  border-color: #6b6e44;
  margin: 10px;
  padding: 15px;
  border-radius: 15px;
  background-color: #e2e6b8;
  width:70%;
  justify-self:left;
}

.expand_button{
  position: absolute;
  background-color: #49325f;
  color: #fff;
  font-size: large;
  font-weight: bold;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  transition: 0.3s;
  right:-60px;
}

.lineframe{  
  font-family: 'Nunito', sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  margin-top:15px;  
}

.lineframe_absolute{ 
  position: absolute; 
  font-family: 'Nunito', sans-serif;
  display: flex;
    
}

.lineframe_absolute h1{
  font-size: medium;
}

.lineframe_absolute p{
  font-size: smaller;
}

.lineframe02{
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: center;
  margin-top:15px;  
  font-size: smaller;
}

.lineframe02 p{
  color: #fff;
  margin: 5px;
}
.lineframe h1{
  font-size: medium;
  padding: 0px 5px;
  margin: 0px 0px;
}
/*
.lineframe p{
  font-size: small;
}*/

.flow-cell{    
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #ffffff;
  border-color: #000000;
  border-style:solid;
  border-width: 3px;
  border-radius: 15px;
  font-weight:300;
  margin: 10px;
  text-align: left;
}

.flow-cell h1{
  font-size: medium;
  margin: 5px;
}

.cell{
  display: flex;
}

.flowchartContainer{
  position: relative;
  display:block;
  width: 210px;
  background-color: #ffffff;
  border-color: #000000;
  border-style:solid;
  border-width: 1px;
}


.riskContainer{
  display:flex;
  flex-direction: column;
  width:100%;
  background-color: #ffffff;
  border-color: #000000;
  border-style:solid;
  border-width: 1px;
}

.riskTitle{
  width:100%;
  background-color: #ffffff;
  border-color: #000000;
  border-style:solid;
  border-width: 1px;
}

.issue_tool{
  display: flex;
  justify-content: space-around;
}

.input-edit{
  border-style: solid;
  border-width: 3px;
  border-radius: 15px;  
}

.custom_risk_container{
  display: flex;
  position: relative;
  color: #fff;
  flex-direction: column;
  align-items: center;
  max-width: 750px;
  margin-bottom: 40px;
}

.white{
  color:#fff;
}

.white-bcg{
  background-color: #fff;
}

.box-padding{
  padding: 10px;
}

.grey-bcg{
  background-color: #cecece;
}

.black{
  color:#000;
}

.custom_risk_sub{  
  display: flex;
  flex-direction: column;
  background-color:var(--doc-control-label-bg);  
  padding: 20px;  
  border: 1px solid black;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 1, 0.3);
  width:100%;
}

.custom_risk_sub label{
  font-weight: 700;
  font-size: var(--med-font);
  margin-right: 7px;
  margin-bottom: 7px;
}

.custom_risk_sub select{
  margin-right: 10px;
  max-width: 200px;
}

.blur {
  filter: blur(5px);
  pointer-events: none; /* Prevent interactions with blurred elements */
}

.container-ver{
  width:50%;
  display:flex;
  flex-direction: column;
  background-color: #4a7ea3;
  border-style: solid;
  border-width: 3px;
  border-radius: 15px;
  align-items: center;
  justify-content: space-evenly;
  gap: 5px;
  padding: 10px 10px;
  margin:5px 5px;
 }

 .container-ver h1{
  font-size:large;
  font-weight: bold;
  margin: 0px;
 }

 .ccp_decision_tool{
  display: flex;
  flex-direction: column;
  width:500px;
  border:1px solid rgb(32, 32, 32);  
  align-items: center;
  background-color: #818181;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 1, 0.3);
  margin-bottom: 10px;
 }




.title-black{
padding: 30px;
margin: 20px;
color: #000;
}
#prereq_cont{
  display:block;
  font-size: small;
  
  margin: 10px;

}
#prereq_cont h1{
  margin: 10px;
  color: #fff;
}
.haccp {
display: flex;
justify-content: center;
align-items: center;
}
.tree_grid{
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: center;
  align-items: center; 
}
.row{
  position: relative;
  display:flex;
  justify-content:space-evenly;
  width: 80%;
  height: 100%;
  margin-bottom: 50px;
}
.column{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  border: 1px solid black;
  border-radius: 15px;  
  padding: 25px;
  margin: 15px;
  background-color: #e0e0e0;
  width:80%;
}

.list_no_edit{
  display:grid;
  width: 80%;
  margin:20px;
  grid-template-columns: auto auto auto;
}

.list_column{
  display:flex;
  flex-direction: column;
}

.list_row{
  width:100%;
  border-bottom: 1px solid black;
  padding: 5px;
}

.list_column button{
  font-size: small;
  padding: 2px;
  background-color: none;
  }

.list_column button:hover{
  font-weight: bold;
  font-size: smaller;  
  color: #21618f;
  cursor: pointer;
  transition: 0.3s; 
}

.column-wide{
  display: flex;
  flex-direction: column;
  margin: 30px 10px;
  align-items: center;
  color: #000;
  padding: 15px;
  width:100%;
}


.iner-column{
  display: flex;
  flex-direction: column;
  margin: 30px 10px;
  align-items: center;
  color: #000;
  padding: 15px;
}

.column label{
  color: #000;
}

.filter-menu{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #0b2232;
  width: 95%;
  max-height: 80px;
  border-radius: 15px;
  }

.filter-menu select{
  padding: 10px;
}

.filter-menu label{
  padding: 10px;
}

.filter-menu h1{
  font-size: medium;
}

.answer_button{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 7px;
  width: 50px;
  height: 30px;
  background-color: #fff;
  border-style: solid;
  border-color: #000;
  border-width: 2px;
  color: #000;
  cursor:pointer;
  transition: 0.3s;
  justify-self: center;
}
.tree_text{
  display: flex;
  justify-content: left;
  flex-direction: column;
  background-color: #8f8f8f;
  color: #2c2c2c;
  border-style: solid;
  border-color: #2c2c2c;
  border-width: 2px;
  border-radius: 15px;
  padding: 10px;
  margin: 7px;
  width:70%;
}
.tree_text h1{
  font-size: medium;
  font-weight: bold;
}

.flow-title{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
}


.edit-menu h1{
  font-family: 'Nunito', sans-serif;
  color: #fff;
  font-size: medium;
}
.archeon{
  width:100%;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overseer{
  display: block;
}

.inerCont{
  display:inline-block;
  text-align: center;
}

  .flowCell{    
    position: relative;
    display: flex;
    font-size: small;
  }

  .flowCell h1{
    font-size: medium;
    margin: 0px 0px;
  }

  .flowCell p{
    font-size: medium;
    font-weight: 500;
  }

  .stepcontent{
    margin: 10px;
  }

  .risk_title_row{
    display: flex;
    background-color:#a0a9b1;
  }

  .risk_title_row .table_item_title{
    background-color: transparent;
  }

  .risk_title_row .table_item_content{
    color: #fff;
  }

  .table_item_title{
    display: flex;
    font-size: small;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #cfcfcf;
    outline: 1px black solid;
    padding: 2px;
    color: #000;
  }

  .table_item_content{
    display: flex;
    align-items: center;
    width:100%;
    padding: 5px;
  }
  .distinct{
    background-color: #c44545;
  }

  .blockFrame{
    display:block;
  }
  .contBlock{
    background-color: #fff;
    display: block;
    justify-content: center;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    border-color: #742e37;
  }

  #risk_assesment{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  #risk_assesment select{
    display: block;
  }

  .title{
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: large;
    font-weight: 700;
  }

  .risk_main_container{
    background-color: #fff;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
  }
  .risk_assessment_block{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .sub_column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;    
  }


  .risk_block{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    outline: 2px solid;
    margin: 10px;
  }

  .risk_title_strip{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color:#7898a7;
    max-height: 50px;
    width: 100%;
    outline: 1px solid black;
  }

  .risk_step_number{
    position: absolute;
    left: 0px;
    background-color: #004d49;
    padding: 5px;
    height: 100%;
    margin: 0px;
    color:#fff;
  }

  .list_block{
    display: flex;
    flex-direction: column;
    outline: 1px solid black;
    width:25%;
  }

  .custom_label{
    color: #fff;
    background-color: #5a6975;
    width: 100%;
    padding: 10px;
  }

  .custom_list_item{
    font-size: small;
    margin: 5px;
  }

  .right_button{
    position: absolute;
    right:0px;
  }

  .score_block{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 25%;
    border-width: 0px 0px 0px 1px;
    border-style: solid;
    border-color: #000;
  }

  .my_paragraph{
    margin:7px;
  }

  .top_label{
    display: flex;
  }

  .risk_title_strip h1{
    font-size: large;
  }

  .risk_content_block{
    display: flex;
  }

  .single_risk_block{
    display: flex;
    flex-direction: column;
    width:100%;
    
  }

  .single_risk_title_strip{
    display: flex;
    position: relative;
    justify-content: space-around;
    width: 100%;
    outline: 1px solid;
    background-color: #c0bcbc;
  }

  .single_risk_content{
    display:flex;
    outline: 1px solid black;
    width: 100%;
  }

  .single_risk_desc{
    padding: 10px;
  }

  .single_risk_score{
    display: flex;
    flex-direction: column;
  }
  .risk_desc{
    display: flex;
    width: 100%;
  }

  .risk_type{
    display: flex;
    align-items: center;
    width: 20%;
    height: 100%;
    position: absolute;
    left:0px;
    padding: 2px 5px;
    outline: 1px solid black;
    color:#fff;
    background-color: #5a6975;
    font-size: large;
  }

  .prob_sev_display{
    outline: 1px solid black;
  }

  .assessment_row{
    display: grid;
    grid-template-columns: auto auto auto;
  }
.custom_checkbox{
  margin: 10px;
  width: 15px;
  height: 15px;
}
  .radialButton{
    display: flex;
    align-items: center;
    justify-content:space-around;
    border-radius:100px;
    margin: 5px;
    width: 35px;
    height: 35px;
    background-color:#1a2a47;
    color: #fff;

  }
  .normalButton{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-around;
    height: 20px;
    background-color:#1a2a47;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: x-small;
  }

  .standAloneButton{
    width:fit-content;
    font-family: var(--button-font);
    padding: 20px 30px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content:space-around;
    height: 20px;
    background-color:#72a530;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 8px;
    color: #fff;
    align-self: center;
  }

  .standAloneButton:hover{
    background-color:#43611c;
    color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
    transition: 0.3s;
    cursor: pointer;
  }

  .alt_button{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #0b607a;
    border-radius: 7px;
    padding: 5px;
  }

  .alt_button:hover{
    background-color:#05303d;
    transition: 0.3s;
    cursor: pointer;
  }

  .message_cont{
    display: flex;
    width: 50%;
    align-content: center;
    justify-content: center;
    color:red;
    font-weight: bold;
    margin: 20px;
    padding: auto;
  }

  .disabled_button{
    background-color: #b1b1b1;
    font-style: italic;
    pointer-events: none;
  }

  .edit_button{
    width:auto;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content:space-around;
    background-color:#1a2a47;
    color: #fff;
  }

  
  .edit_button:hover{
    background-color:#742e37;
    color: #ffffff;    
    transition: 0.6s ease-in-out;    
    cursor: pointer;
  }
  
  

  #remove_selection{
    width:auto;
    background-color: #af824f;
  }

  #remove_selection_edit{
    width:auto;
    background-color: #af824f;
  }
  
  #remove_option{
    width:auto;
    background-color: #af824f;
  }
  

  #addStepBelow {
    background-color:#092e2b;
  }
  #addStepBelow:hover {
    background-color:#001413;
  }
  #delStepButton{
    background-color: #742e37;
  }
  .riskDesBlock{
    display: block;
    width: 210px;
    height: 100%;
    margin-right: 5px;
    background-color: #fff;    
    border-style: solid;
    border-width: 1px;
  }
  
  .sideButton{
    width: 50px;
    display: block;
    align-items: center;
    justify-content:space-around;
    background-color:#1a3947;
    min-height: 100%;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: x-small;
    cursor: pointer;
  }

  .maincell{
    display: flex;
    padding: 10px;
  }

  .normalButton:hover{
    background-color:#742e37;
    color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
    transition: 0.3s;
    cursor: pointer;
  }
  .radialButton:hover{
    background-color:#ffaa29;
    color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
    transition: 0.3s;
    cursor: pointer;
  }
  .sideButton:hover{
    background-color:#be974d;
    color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.9);
    transition: 0.3s;
  }

  .arrow_line{
    display: flex;
    width: 3px;
    height: 100%;
    background-color: #000;
    rotate: 180deg;
  }

  .arrow_point{
    display: flex;
    flex-direction: column;
    width: 1;
    height: 1;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid rgb(0, 0, 0);    
    transform: rotate(180deg);
  }

  .arrow_container_test{
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 12px;
    height: 400px;
    rotate: 0deg;
  }


.flow-name{
  display: block;
  justify-content: space-between;
  background-color: #ffffff;
  margin: 10px;
  padding: 20px;
  width:auto;
  font-weight: bold;
  font-size: large;  
}

#content-parent{
  display: block;
  justify-content: center;
  background-color: #ffffff;
  width: 100%;
}

.main-cont{
  width: 95%;
  display: flex;
  justify-content: space-around;
  margin: 20px;
  background-color: #ffffff;
  padding: 20px;
}
.main-cont-flow{
  width: 100%;
  padding:5px;
  
}
.main-cont-risk{
  width: 100%;
  padding:5px;
  
}
.selection{
  margin: 20px;
}

/* END OF HACCP BLOCK */

#wrapper
{
  border: 1px solid #888;
  display: inline-block;
  padding:20px;

}
header{   
  position: sticky;
  width:100%;
  transition: 0.3s ease-in-out;
  z-index: 3;
  margin-top: -100px;
}


header.shrink {
  height: 50px;
  position: fixed;
  transition: 0.3s;
}

.footer{
  display: flex;
  position: static;
  bottom:0;  
  align-self:flex-end;
  padding: 20px 20px;
  align-items: center;
  justify-content: center;
  width:100%;
  height: 50px;
  background-color:#000000;
  margin: 40px 0px 0px 0px;
}

.assoc_link{
  background-color: transparent;
  font-size: small;
  color:cornflowerblue;
  padding: 7px;
  transition: 0.7s;
}

.assoc_container{
  transition: 0.7s;

}

.assoc_link:hover{
  font-weight: bold;
  transition: 0.7s;
}

.footer p{  
  color:#ffffff;
}

.footertext{
  font-size: smaller;
  font-weight: lighter;
}

 .navbar.shrink{
  height: 50px;
 }

.stepHead{
  font-weight: bold;
}
.stepNum{
  font-weight: bold;
}
.hamburger{
  display: none;
  cursor:pointer;
  height: 100px;
  min-width: 80px;
  background-color: #4a7ea3;
  transform: 0.3s;  
}
.hamburger.shrink{
height:50px
}

.bar{
  display:block;
  width:25px;
  height: 3px;
  margin: 2.5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}

.bar-small{
  display:block;
  position: absolute;
  top:6.5px;  
  width: 8px;
  height: 2px;  
  background-color: #ffffff;
}


 .background{
  display:flex;
  width:100%;
  height: 660px;
  align-items: center;
  justify-content:center;
  background-size: cover;
  background-position:top;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow:inset  0px 0px 15px 0px rgba(0, 0, 0, 0.9);
  margin-bottom: 0px;
  padding-bottom: 60px;
 } 

 .container-hor{
  width:80%;
  height: 400px;
  display:flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
 }
 .container-hor h1{
  font-weight: 400nbn;
 }

 .container-ver-small{
  height:300px;
  width:50%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  margin: 10px 5px;
 }
 .container-ver p{
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  color: #000000;
 }

 .container{
  display: flex;
  justify-content: space-evenly;
  height: auto;
  width:100%;  
 }

 .container-half{
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
  width:1100px;
  height:100%;
  padding-top: 10px;
 }

 .flowcont{
  position: relative;
  padding: 20px;
  width: auto;
  height: auto;
  margin-top: 20px;
  border: 1px solid #ccc;
  background: #fff;
}

 .container-text{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 60px 60px;
  font-size: 20px;
  height: auto;
 }

 .container-text p{
  font-family: 'Nunito', sans-serif;
  color: #1f2d38;
 }

 .container-text a{
  font-size: 20px;
  font-weight: bold;
  color: #4a7ea3;
 }

 .content p{
  font-family: 'Dosis', sans-serif;
  color:#000000;
  font-size: larger;
  transition: 0.3s;
 }

 .content h1{
  color: #000000;
 }

.card{
    margin-top:15px;
    display:flex;
    justify-content:center;
    align-items: center;
    gap:20px;
    min-height: 400px;
    width:100%;
    padding: 0px 10px;    
  }
.card a{
  color: rgb(74, 126, 163);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.card a:hover{
  color:#742e37;
}
.cardrev{
  display:flex;
  justify-content: center;
  align-items:center;
  gap:20px;
  min-height: 400px;
  width:100%;
  padding: 0px 10px;   
}
.cardgraph{
    display: flex;
    width:500px;
    height: 350px;
    background-repeat: no-repeat;
    background-size: contain;
    transition: 0.3s;
  }
.cardtext{
    display: block;
    width: 600px;
    padding: 10px 10px;;
  }

.flex_spaceapart{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.formcontainer{
  display:flex;
  align-items: center;
  padding:20px 20px;
  width:100%;
}
.conttext{
  display:flex;
  flex-direction: column;
  align-items: left;
  width:100%;
  height: 600px;
  padding:20px 20px; 
  background-color: #4a7ea3;
}
.conttext h1{
  color:#ffffff;
  font-size: 28px;
  padding:10px 5px;
    
}
.conttext p{
  padding:5px 5px;

}

.form_row{
  display: flex;
  width:90%;
  margin:20px;
  justify-content: space-between;
  align-items: baseline;
}

.form_input{
  margin:0px;
  background-color: #5691bb;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
  border-style: solid;
  width: 80%;
}

.form_label{
  width:20%;  
}
.maintext{
    color:#1f2d38;
    font-size:larger;
  }

  @media(min-width:821px){

  }

  @media (max-width:1280px) {
    .menu{
      height: auto;
    }

    .form-tab{
      width:auto;
    }

    .mobile-menu{
      display: none;
    }

    .form-container{
      margin: 10px 0px 0px 0px;
      width:100%;
      max-width: none;
      min-width: 0;
      margin-top: 0px;
      margin-bottom: 10px;
    }
    .production-container{
      flex-direction: column;
    }
    .navbar{
      height: auto;
    }
  }
  @media (max-width:820px){
    .hamburger {
      display: flex;
      justify-content: center;
      margin-right: 0px;
      width: 100px;
      height: 47px;
      flex-direction: column;
      transform: 0.3s;
      border: 1px;
      border-radius: 1px;
      border-color: antiquewhite;
    }



    .popup-box{
      width:100%;
    }

    .table{
      max-width: 200px;
    }

    .hamburger.active .bar:nth-child(2){
      opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
      transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
      transform: translateY(-8px) rotate(-45deg);
    }

    .mobile-menu.active{
      display: flex;
      flex-direction: column;
      justify-content:flex-start;
      align-items:center;
      width: 100%;
      height:100vh;
      overflow: scroll;
      padding-bottom: 10px;
    }

    .menu{
      display: none;
    }

    .split_container{
      flex-direction: column;
    }

    .tool_panel{
      width:100%;
      max-width: none;
      height: auto;
    }

    .menu_gritting{
      display:none;
    }
    #cat_list_small{
      display: none;
    }
    .logobar{
      padding-right: 0px;
    }
  }
  @media (max-width:420px){
    table{
      font-size: 1em;
    }
  }

@media print {
  html, body { margin:0 !important; }
  table, tr, td { margin:0 !important; padding:0; }
  /* any other resets you rely on … */
}