@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
*
html{
  --svg-icon-size: 20.0mm;
  
}

body {
 font-family: Calibri, sans-serif;
 background-color: var(--color-page-background);
 color: var(--font-color);
 display: flex;
 flex-direction: column;

  
}

footer{
  position:fixed;
  width:100%;
  bottom:0;
}

label {
  color:grey;
  font-weight:bold;
  margin-left:-10px;
}

/* https://redketchup.io/color-picker */
.theme-light {
  
  --menu-bar-background: #26395d;
  --carousel-indicator-bar-background: #f2f2f2;
  --color-menu-dark: var(--menu-bar-background);
  --color-page-background: #ffffff;
  --color-primary: #9db7f3;
  --color-widget-background: #8091e8;
  --color-widget-accent: #0479e7;
  --color-widget-font: #F2F2EF;
  --color-accent-light:#ffffff;
  --color-accent-hover:#c7dbf5;
  --color-accent-selected:#b6cdf3;
  --color-accent-not-selected:#f2f2f2;
  --color-accent-dark:#dde1fcf7;
  --sub-heading-font-color:#1c213c;
  --side-menu-background-color: var(--color-accent);
  --side-menu-font-color: var(--font-color);
  --question-heading-color:#7498ed;
  --font-color: #1f4a70;
  --font-color-hover: #6384a1;
  --color-accent: #efefef;
  --color-inactive : rgb(230, 228, 228);
  --color-key-heading-background: #e5f6ff;
  --font-color-lighter: #4d94c0;
  --tooltip-font-color: #F2F2EF;
  --hamburger-menu-background: var(--color-widget-accent);
  --hamburger-menu-background-light: var(--color-accent-light);
  --hamburger-menu-hover-color: #59aef3;
  --hamburger-menu-font-color: #1c213c;
  --honeycomb-low-color:#E3F2FD;
  --honeycomb-medium-color:#BBDEFB;
  --honeycomb-high-color:#90CAF9;
  --honeycomb-veryhigh-color:#64B5F6;
  --icon-backcolor: #132b3f;
  --icon-level1-forecolor: #F2F2EF;
  --icon-level1-backcolor: #2c484f;
  --icon-level2-forecolor: #F2F2EF;
  --icon-level2-backcolor: #1c3862;
  --status-acceptable-backcolor:#80CBC4;
  --status-not-acceptable-backcolor:#FF8A65;
  --status-incomplete-backcolor: #FFCC80;
  --status-not-applicable-backcolor: #E0E0E0;
  --status-not-answered-backcolor:#9575CD ;
  --status-low-backcolor:#FFF59D;
  --status-medium-backcolor:#FFCC80;
  --status-high-backcolor:#FF8A65;
  --status-critical-backcolor:#9575CD;
  --status-not-answered-backcolor-light:rgb(236, 217, 236);
  --status-low-importance-backcolor:#FFF59D;
 
  --hawkstream-logo-eye: #FF8181;
  
  
}
.theme-dark {
  --menu-bar-background: #2e415f;
  --color-menu-dark: var(--menu-bar-background);
  
  --color-page-background: #1f1b2a;
  --color-primary: #1f1b2a;
  --color-widget-background: #FFFFFF;
  --color-widget-accent: #F2F2EF;
  --color-widget-font: #1f1b2a;
  --color-accent: #232436;
  --color-accent-light:#1d1b20;
  --color-accent-hover:#7caded;
  --color-accent-dark:#3a3d52f7;
  --color-inactive : lightgray;
 
  --sub-heading-font-color:bisque;
  --color-key-heading-background: #252938;
  --side-menu-background-color: #2a3858;
  --side-menu-font-color: var(--font-color);
  --question-heading-color:bisque;
  --font-color: #FFFFFF;
  
  --font-color-lighter: #eff0cb;
  --font-color-hover:var(--font-color-lighter);
  --tooltip-font-color: #1f1b2a;
  --hamburger-menu-background: bisque;
  --hamburger-menu-font-color: #132b3f;
  --hamburger-menu-hover-color: #cecb71;
  --icon-backcolor:  #F2F2EF;
  --icon-level1-forecolor: #383b61;
  --icon-level1-backcolor: #F2F2EF;
  --icon-level2-forecolor: #003ABE;
  --icon-level2-backcolor: #F2F2EF;
  --status-acceptable-backcolor:#04AA6D;
  --status-not-acceptable-backcolor:#FF6347;
  --status-incomplete-backcolor: rgb(250, 178, 46);
  --status-not-applicable-backcolor: darkgray;
  --status-not-answered-backcolor:purple;
 
}

main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-layout{
  position:absolute;
  left:0px;
  top:0px;
  padding-top:18px;
  padding-bottom:40px;
  padding-left:8px;
  padding-right:8px;
   width:160px; 
   height:95px;
   text-align:center;
   cursor:hand;

}

.logo-image {
  width:90px; 
  height:80px; 
  padding-bottom:10px;
  margin-top:-10px;
}

h1 {
  color: #e74c3c;
  margin-bottom: 0.5rem;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.custom-checkbox label {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  display: inline-block; /* Crucial for clickability */
}

.custom-checkbox label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin-left:10px;
  border: 2px solid #ccc;
  background-color: white;
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
  background-color: var(--status-acceptable-backcolor);
  border-color: var(--status-acceptable-backcolor);
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  width: 12px;
  height: 7px;
  margin-left:10px;
  border: solid white;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg);
}

.green-background {
  background-color: lightseagreen;
}

.green-button {
  background-color: lightseagreen;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.container-old {
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top:30px;
  margin-left:30px;
  padding: 1rem 0;
}
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 15rem auto;
  height: 15rem;
  color: var(--color-widget-font);
  background: var(--color-widget-accent);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}

.card--avatar {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
 
.pad-right-10 {
  padding-right:10px;
 }
 
.card--title {
  color: #222;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.card--link {
  text-decoration: none;
  background: #db4938;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
}

.process-focused {
  background-color: lightyellow;
  border: 1px dotted black;
  
}

.process-focused p {
  padding-left: 2px;
  text-align: center;
}

.process-not-focused {
  background-color: white;

}

.process {
  position: relative;
  float: left;
  min-width: 500px;
  max-width:800px;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 3px;
}

.process p {
  padding-left: 2px;
  text-align: center;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.page-container{
  margin-left:8%;
  margin-right:5%;
  margin-top:0px;
  min-height:500px;
  
 
  }

  .page-container-dashboard{
    margin-left:8%;
    margin-right:3%;
    margin-top:0px;
    min-height:500px;
    
   
    }
.display-6{
  margin-bottom:20px;
}
tr:hover {
  background-color:#F4F4F4;
}


table,
th,
td {
  border-collapse: collapse;
  color: var(--font-color);
}

th{
  text-align:left;
  border-bottom:1px dotted #FFFFFF;
}

th,
td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--font-color);
}

.margin-left {
  margin-left: 80px;

}

a:link {
  color: #FFFFFF;
  text-decoration: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.control-heading {
  color: bisque;

  font-size: 130%;
  margin-top: 25px;
  margin-bottom: 5px;
}
.form-label-text {
  color: bisque;
  font-size: 110%;
}
  
.svg-icon{
  width: var(--svg-icon-size);
  height:var(--svg-icon-size);
}
.svg-icon-backcolor-1{
  fill: var(--icon-level1-backcolor);
}

.svg-icon-forecolor-1{
  fill: var(--icon-level1-forecolor);
}

.svg-icon-backcolor-2{
  fill: var(--icon-level2-backcolor);
}

.svg-icon-forecolor-2{
  fill: var(--icon-level2-forecolor);
}

.page-main-heading{
 

margin-left:8%;
font-size:30px;
color: var(--color-menu-darksub-heading-font-color);
background-color:white;


}

.page-sub-heading{
  color: var(--question-heading-color);
  font-size: 150%;
  margin-top:5px;
  margin-right:15px;
 
}

.page-sub-sub-heading{
  color: var(--font-color);
  font-size: 125%;
  margin-top:20px;
  margin-left:10%;
  margin-right:10%;
 
}

.page-sub-sub-heading-no-indent{
  color: var(--font-color);
  font-size: 125%;
  
}


.page-content{
  margin-left:10%;
  width:95%;
  
}

.page-icon-content{
  margin-left:15%;
  margin-top:50px;
  width:80%;
  height:300px;
  display: flex;
}

.page-icon-item{
  color: var(--font-color);
  font-size:120%;
}

.page-icon-image {
  width:80px;
  height:80px;
}
/* Security posture question page styles */
.question-container {
  min-width: 100%;
  max-width: 100%;
  display: flex;
  padding: 0px;
 

}
.question-header {
  min-width: 100%;
  max-width: 100%;
  display: flex;
  background-color: var(--color-accent);
  font-weight: bold;
  margin-top:15px;
}
.question-container:hover {
  background-color: var(--color-accent-hover);
}

.question{
  min-width:25%;
  max-width:25%;

}

.question-attestation{
  margin-left:15px;
  min-width:25%;
  max-width:25%;

}
.question-response{
  margin-left:15px;
  min-width:10%;
  max-width:10%;
  text-align:center;
  

}
.question-status{
  margin-left:15px;
  min-width:10%;
  max-width:10%;
  text-align:center;
  
  
}

.question-status-icon{
  padding-top:5px;
  transform: scale(1.3);
}

.question-security-score-weighting{
 
  min-width:5%;
  max-width:5%;
  text-align:center;

}
.question-action{
  float:right;
  min-width:5%;
  max-width:5%;
  text-align:center;
  margin-left:15px;
  cursor: hand;

}
.question-reference{
  padding-left:15px;
  min-width:10%;
  max-width:10%;
  font-weight:bold;
}



/* Security posture question page styles End */

/* Tile rendered styles styles */ 
.domain-panel{
  max-width: 100%;
  min-width:100%;
  min-height:100px;
  padding-left: 20px !important;
  padding-right: 15px;
  padding-bottom: 30px !important;
  padding-top:20px;
  margin-bottom:25px;
  margin-left:0px;
  background-color: var(--color-accent);
  color: var(--font-color);
  font-weight:bold;
}

.domain-panel-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px,185px));
  gap: 0px;
  padding: 2px;
  min-height: 225px;
  max-height: 225px;
  overflow-y:auto;


  
}

.category-tile {
 
    max-height:92px;
  min-height:92px;
  min-width: 170px;
    max-width: 170px;
  box-shadow: 2px 2px 6px rgb(76, 90, 96);
  
}
.category-tile-is-activated {
 
  background-color: var(--color-accent-light);
}
.category-tile-is-not-activated {
 
  background-color: var(--color-accent-dark);
}
.category-tile-is-not-selected {
 
  background-color: var(--color-inactive);
}

.category-tile-closer {
  max-width: 150px;
  max-height: 0;
  float:right;
  margin-right:10px;
  margin-left:95%;
  font-size:20px;
  margin-top:-5px;
  cursor:hand;
  color: var(--font-color);
}
.category-tile-icon {
  max-height: 0;
  float:left;
  margin-left:5px;
  width:50px;
  font-size:18px;
  margin-top:0px;
  color: var(--font-color);
}
.category-tile-footer{
  margin-left:0px;
  font-size:12px;
  margin-top:3px;
  max-height: 0;
    display:flex;
  color: var(--font-color-lighter);

}

.category-tile-text-display {
  max-width: 100%;
  min-height: 55%;
  color: var(--font-color);
  font-size:12px;
  line-height:14px;
  font-weight: bold;
   display: flex;
  padding-top:20px;
  margin-top: 15px;
  padding-left: 8px;
  cursor: hand;

}
.category-tile:hover {
  background-color:#FFD580;
 
}

.drag-over {
  border: dashed 3px var(--status-acceptable-backcolor);
}

.center-text{
  text-align:center;
}

.middle-text {
  vertical-align: middle;
}
 /* Tile rendered styles End*/ 
/* security posture actions page styles -End */

 .remediation-container {
  min-width: 100%;
  display: flex;
  padding: 10px;
 

}

.remediation-header {
  min-width: 100%;
  display: flex;
   background-color: var(--color-accent);
  font-weight: bold;
  margin-top:15px;
  
}

.remediation-container:hover {
  background-color: var(--color-accent-hover);
}

.action-question-question {
  margin-left: 15px;
  min-width: 12%;
  max-width: 12%;

}
.question-question-body {
  font-size: 90%;
}
.question-comment-body {
  font-size: 90%;
}
.remediation-comment {
  margin-left: 15px;
  min-width: 15%;
  max-width: 15%;
}

.remediation-priority {
  margin-left: 10px;
  min-width: 10%;
  max-width: 10%;
}

.remediation-assigned-to {
  margin-left: 20px;
  min-width: 8%;
  max-width: 8%;
}

.remediation-status {

  min-width: 15%;
  max-width: 15%;
}
.remediation-status-header {
  min-width: 10%;
  max-width: 10%;
  font-weight: bold;
  text-align: center;
}


.remediation-assigned-to-body {
  font-size: 90%;
}

.action-question-reference {
  min-width: 8%;
  max-width: 8%;
  text-align: center;
  padding-left:5px;
}

.remediation-reference {
  min-width: 8%;
  max-width: 8%;
  text-align: center;
 
  padding-left:5px;
}
.associated-risk {
  min-width: 8%;
  max-width: 8%;
  text-align: center;
 
  padding-left:5px;
}

.associated-risk-header {
  min-width: 8%;
  max-width: 8%;
  font-weight: bold;
  text-align: center;
 
  padding-left:5px;
}
.remediation-date-header {
  min-width: 10%;
  max-width: 10%;
  font-weight: bold;
  text-align: center;
 
  padding-left:5px;
}

.remediation-date {
  min-width: 10%;
  max-width: 10%;
  text-align: center;
 
  padding-left:5px;
}

.remediation-small-text{
  font-size: 75%;
}
.remediation-action-header {
  min-width: 100%;
  max-width: 100%;
    margin-left: -60px; 
  font-weight: bold;
  text-align: left;
  
}
.remediation-action {
  min-width: 30%;
  max-width: 30%;

  font-weight: bold;
  text-align: left;
  cursor: hand;
}
/* security posture actions page styles -End */

/* Customer user page style */ 
.customer-is-active{
  width:20%;
  text-align:center;
}
.customer-action{
  width:20%;
  text-align:center;

}



/* Customer user page style - End */ 

/* Checklist status summaries */

.question-summary-container{
  margin-left:500px;
  display:flex;
}

.question-status {
  height: 28px;
  width: 28px;
  margin: 0 2px;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 1;
  color: #FFF;
  padding-top: 2px;
  text-align:center;
  font-size: 16px;
  font-weight:bold;
  margin-top: 5px;
  
  
}

.question-status-incomplete {
  background-color: var(--status-incomplete-backcolor);
}

.question-status-acceptable {
  background-color: var(--status-acceptable-backcolor);
  
}
.question-status-not-acceptable {
  background-color: var(--status-not-acceptable-backcolor);
  
}
.question-status-not-applicable {
  background-color: var(--status-not-applicable-backcolor);
  
  
}



@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* Checklist status summaries  End*/

/* modal dialog */
.modal-title {

color: var(--menu-bar-background);
font-size: 175%;

}

/* modal dialog End */



#panel-content-id {
  min-height:800px;
}
/* Mnagement pages */
.management-row-container {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px #F1F1F1 solid;
  padding-bottom:15px;
  width: 100%;
}
.manage-panel-heading {
  display:flex;
  margin-bottom:10px;
  border-bottom: 10px #F1F1F1 solid;
  width: 100%;
}

.management-row-details {
  width: 50%;
  display: block;

}

.management-row-details-item {
  display: flex;
  width: 100%;
  
}

/* Flags and alerts */

.purpleAlert {

  background-color: var(--status-not-answered-backcolor);
  color: white;


}

.redAlert {

  background-color: var(--status-not-acceptable-backcolor);
  color: white;


}

.orangeAlert {
  background-color: var(--status-incomplete-backcolor);
  color: white;


}

.greenAlert {

  background-color: var(--status-acceptable-backcolor);
  color: white;


}

.yellowAlert {

  background-color: var(--status-low-importance-backcolor);
  color: darkgray;


}
/* Used in the userTasks pages */
.action-heading {
  background-color:#f2f2f2;
  margin-bottom:20px;
  margin-left:-10px;
  margin-right: 0px;
  font-weight:bold;
}

.small-heading {

  font-size: 80%;
 
}
.action-row{
margin-left:6px;
margin-bottom:3px;

}
.action-row:hover {
  background-color: #F2F2F2;
}

.small-content {

 font-size: 70%;
 
}

/* Remdiation */
.priority-code{
  width:10%;
  text-align:center;
}
.priority-code-critical{
  width:10%;
  background-color:var(--status-not-answered-backcolor);
  color:white;
  text-align:center;
}
.priority-code-high{
  width:10%;
  background-color: var(--status-not-acceptable-backcolor);
  color:white;
  text-align:center;
}
.priority-code-medium{
  width:10%;
  background-color:var(--status-incomplete-backcolor);
  color:white;
  text-align:center;
}
.priority-code-low{
  width:10%;
  background-color: var(--status-low-importance-backcolor);
  color:gray;
  text-align:center;
}

.priority-code-unclassified{
  background-color:lightgray;
  color:white;
  text-align:center;
}

.priority-code-small-critical{
  background-color:var(--status-not-answered-backcolor);
  color:white;
  text-align:center;
}
.priority-code-small-high{
  background-color: var(--status-not-acceptable-backcolor);
  color:white;
  text-align:center;
}
.priority-code-small-medium{
  background-color:var(--status-incomplete-backcolor);
  color:white;
  text-align:center;
}
.priority-code-small-low{
  background-color:var(--status-incomplete-backcolor);
  color:gray;
  text-align:center;
}

.priority-code-small-unclassified{
  background-color:lightgray;
  color:rgb(85, 84, 84);
  text-align:center;
}
.summary{
  padding-left:15px;
  width:40%;
}
.remediation-action-container {
  display:flex;
}
.status-code {
  width:15%;
}
.assigned-to-user {
  width:20%;
}
.remediation-action-action {
  text-align: center;
  width: 15%;
  cursor: pointer;
}
.create-date-heading {
  text-align: center;
   width: 20%; 

}
.create-date {
  text-align: center;
  font-size:80%;
  width: 20%; 

}

.acceptable {
  background-color: var(--status-acceptable-backcolor);
}

.not-acceptable {
  background-color: var(--status-not-acceptable-backcolor);
}

.low {
  background-color: var(--status-low-importance-backcolor);
}
.medium {
    background-color: var(--status-incomplete-backcolor);
}
.high {
    background-color: var(--status-not-acceptable-backcolor);
}
.very-high {
    background-color: var(--status-not-answered-backcolor);
}

.centered{
   display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */

}

.risk-exposure-low {

  background-color: var(--status-low-importance-backcolor);
  color:gray;
 
}
.risk-exposure-medium {

  background-color: var(--status-incomplete-backcolor);
  color:white;

}
.risk-exposure-high {

  background-color: var(--status-not-acceptable-backcolor);
  color:white;

}

.risk-exposure-veryhigh {

  background-color: var(--status-not-answered-backcolor);
  color:white;

}

/* framework popup */
.framework-sm-line{
  line-height:90%;
}
.framework-para{
margin-bottom:10px;
}

.framework-heading{
 margin-top:15px; 
font-size:130%;
}
.framework-body{
 margin-left:20px;
 margin-right:10px;
}

.legend {
  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  margin-left: 12px;
  margin-right: 10px;
  align-items: center;
}


/* incident */

.incident-criticality {
 
  text-align: center;
  margin-right: 10px;
}

.incident-criticality-critical {
 
  background-color: var(--status-not-answered-backcolor);
  color: white;
  text-align: center;
}

.incident-criticality-high {
 
  background-color: var(--status-not-acceptable-backcolor);
  color: white;
  text-align: center;
}

.incident-criticality-medium {
 
  background-color: var(--status-incomplete-backcolor);
  color: white;
  text-align: center;
}

.incident-criticality-low {
 
  background-color: var(--status-low-importance-backcolor);
  color: gray;
  text-align: center;
}



.severity{ 
 margin-right: 10px;
}

.severity-critical {
 
  background-color: var(--status-not-answered-backcolor);
  color: white;
  
}


.severity-very-high {
 
  background-color: var(--status-not-answered-backcolor);
  color: white;

}

.severity-high {
 
  background-color: var(--status-not-acceptable-backcolor);
  color: white;

}

.severity-medium {
 
  background-color: var(--status-incomplete-backcolor);
  color:white;

}

.severity-low {
 
  background-color: var(--status-low-importance-backcolor);
  color: gray;

}



/* Assessed risks */

.risk-tolerance {
 
 
  min-width: 8%;
  max-width: 8%;
  text-align: center;
}


.risk-criticality {
 
  min-width: 8%;
  max-width: 8%;
  text-align: center;
}

.risk-criticality-critical {
  min-width: 8%;
  max-width: 8%;
  background-color: var(--status-not-answered-backcolor);
  color: white;
  text-align: center;
}

.risk-criticality-very-high {
  min-width: 8%;
  max-width: 8%;
  background-color: var(--status-not-answered-backcolor);
  color: white;
  text-align: center;
}

.risk-criticality-high {
  min-width: 8%;
  max-width: 8%;
  background-color: var(--status-not-acceptable-backcolor);
  color: white;
  text-align: center;
}

.risk-criticality-medium {
   min-width: 8%;
  max-width: 8%;
  background-color: var(--status-incomplete-backcolor);
  color:white;
  text-align: center;
}

.risk-criticality-low {
  min-width: 8%;
  max-width: 8%;
  background-color: var(--status-low-importance-backcolor);
  color: darkgray;
  text-align: center;
}

.risk-date {
  padding-left: 15px;
  min-width: 8%;
  max-width: 8%;
}

.active-remediations {
  text-align:center;
  min-width: 8%;
  max-width: 8%;
}

.risk-summary {
  padding-left: 15px;
  min-width: 20%;
  max-width: 20%;
}

.data-table-row {
  display: flex;
  line-height:20px;
  padding-top:10px;
  padding-bottom:5px;
  border-bottom: 1px dotted lightgrey;

}

.data-table-content {
  max-height:350px;
  overflow-y:scroll;
   overflow-x:hidden;
  border-bottom: 2px solid lightgrey;
  padding-bottom:10px;
  padding-right:15px;
}

.data-table-content-full {
  border-bottom: 2px solid lightgrey;
  padding-bottom:10px;
  padding-right:15px;
}

.question-reference {
  width: 8%;
}
.remediation-status {
  text-align: center;
  width: 20%;
}
.risk-owner {
  padding-left: 15px;
  width: 10%;
}

.assessed-risk-action {
  text-align: center;
  width: 10%;
  cursor: pointer;
}
.assessed-risk-action-icon {
  text-align: center;
  width:25px;
  cursor: pointer;
}


.risk-customer-reference {
  text-align: center;
   width: 8%;
}

.grey-circle-background {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  margin-left: 50%;
  text-align: center;
  background: #AAAAAA
}

/* This is from the risk nd remediation pages */
.back-icon {
  color: #666666;
  cursor: hand;
  font-size: 32px;
  margin-top: -6px;
  
}
.green-icon {
  color: var(--status-acceptable-backcolor);
  cursor: hand;
  font-size: 32px;
  margin-top: -6px;
}

.white-icon {
  color: white;
  cursor: hand;
  font-size: 24px;
  margin-top: -6px;
}
.purple-icon {
  color: var(--status-not-answered-backcolor);
  cursor: hand;
  font-size: 32px;
  margin-top: -6px;
}
.checkbox-size {
   width: 24px;
   height: 24px; 
}

.green-icon-small {
  color: var(--status-acceptable-backcolor);
  cursor: hand;
  font-size: 24px;
 
}

.orange-icon-small {
  color: var(--status-incomplete-backcolor);
  cursor: hand;
  font-size: 24px;
 
} 
.red-icon-small {
  color: var(--status-not-acceptable-backcolor);
  cursor: hand;
  font-size: 24px;
 
}
.default-icon-small {
   cursor: hand;
  font-size: 24px;
 
}

.radio-lg{
  align-items:center;
  margin-bottom:15px;
  scale: 2.0;
  top: 0.5rem;
 

 
}
.radio-lg .custom-radio-input {
  top: 0.3rem;
 
 
}

.radio-lg .custom-radio-label {
  margin-left:15px;
  font-size: 110%;
  
}


.percentage-circle {

  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 50%;
  display: flex;
  /* or inline-flex */
  align-items: center;
  justify-content: center;
}
.percentage-circle-small {

  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  border-radius: 50%;
  display: flex;
  /* or inline-flex */
  align-items: center;
  justify-content: center;
}

.percentage-circle-large {

  min-width: 80px;
  max-width: 80px;
  min-height: 80px;
  max-height: 80px;
  border-radius: 50%;
  line-height:15px;
  text-align:center;
  display: flex;
  /* or inline-flex */
  align-items: center;
  justify-content: center;
}

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

.red {
  background: var(--status-not-acceptable-backcolor);
  color: white;
 
}

.green {
  background: var(--status-acceptable-backcolor);
  color: white;
}

.yellow {
  background: var(--status-low-importance-backcolor);
  color: black;
 
}


.orange {
  background: var(--status-incomplete-backcolor);
  color: white;
}


.grey {
  background: var(--status-not-applicable-backcolor);
  color: black;
}

.purple {
  background: var(--status-not-answered-backcolor);
  color: white;

}

 /* Zebra striping for rows */
 .stripe:nth-child(odd) {
  background-color: #f2f2f2;
  /* Light gray for odd rows */
}

.stripe:nth-child(even) {
  background-color: #ffffff;
  /* White for even rows */
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center; /* Position arrow */
  background-size: 32px; /* Increase size of the arrow */
  padding-right: 35px; /* More space for larger arrow */
}
/* Disable custom arrow for specific selects */
.no-arrow {
  appearance: auto; /* Restore default browser styling */
  -webkit-appearance: auto;
  -moz-appearance: auto;
  background-image: none; /* Remove the custom arrow */
  padding-right: 10px; /* Adjust padding */
}