.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-text-color);
}

.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;
  overflow-x: hidden;
  overflow-y: auto;            /* ← allow page to grow */
  

}

/* Use where page length should fill screen */
.page-container-fill {
  min-height: calc(100vh - 70px);
} 


.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: 20px;
  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: 90%;

}

.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: 80px;
  min-height: 80px;
  min-width: 160px;
  max-width: 160px;
  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: 50px;
  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: pointer;
  

}

.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 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: var(--status-not-answered-backcolor);


}

.redAlert {

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


}

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


}

.greenAlert {

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


}

.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 {
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
  text-align: center;
  vertical-align: middle;
}

.priority-code-critical {
  
  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: white;

}

.priority-code-high {
  
  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
  background: white;
}

.priority-code-moderate {
 
  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
  background: white;
}

.priority-code-low {
 
  border: solid 1px var(--status-low-backcolor);
  color: gray;
 
  background: white;

}

.priority-code-unclassified {
  border: solid 1px lightgray;
  color: gray;
   background: white;
   max-width: 80px;
 min-width: 80px;
  max-height:25px;
  min-height:25px;
}

.priority-code-small-critical {
  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: white;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
}

.priority-code-small-high {
  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
   background: white;
   max-width: 80px;
   min-width: 80px;
   max-height:25px;
  min-height:25px;

}

.priority-code-small-moderate {
  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
   background: white;
   max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
}

.priority-code-small-low {
  border: solid 1px var(--status-low-backcolor);
  color: gray;
   background: white;
   max-width: 80px;
 min-width: 80px;
  max-height:25px;
  min-height:25px;

}

.priority-code-small-unclassified {
  border: solid 1px lightgray;
  color: rgb(85, 84, 84);
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
  
}

.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-backcolor);
}

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

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

.very-high {
  background-color: var(--status-veryhigh-backcolor);
}


.acceptable-rating {
  border: solid 1px var(--status-acceptable-backcolor);
  background-color: white;
  color: var(--status-acceptable-text-color);
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;

}

.not-acceptable-rating {
  border: solid 1px var(--status-not-acceptable-backcolor);
  background-color: white;
  color: var(--status-not-acceptable-backcolor);
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
}

.low-rating {
  border: solid 1px var(--status-low-backcolor);
  background-color: white;
  color: grey;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
}

.moderate-rating {
  border: solid 1px var(--status-moderate-backcolor);
  background-color: white;
  color: var(--status-moderate-text-color);
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
}

.high-rating {
  border: solid 1px var(--status-high-backcolor);
  background-color: white;
  color: var(--status-high-backcolor);
}

.very-high-rating {
  border: solid 1px var(--status-veryhigh-backcolor);
  background-color: white;
  color: var(--status-veryhigh-backcolor);
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
}


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

}

.risk-exposure-low {

  border: solid 1px var(--status-low-backcolor);
  color: gray;
  background: white;

}

.risk-exposure-moderate {

  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
  background: white;

}

.risk-exposure-high {

  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
  background: white;

}

.risk-exposure-veryhigh {

  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: 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 */S

.incident-criticality {
  background-color:orange;

  text-align: center;
  vertical-align: middle;
  margin-right: 10px;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
   margin-right:10px;
}

.incident-criticality-critical {

  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: white;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
   margin-right:10px;
}

.incident-criticality-high {

  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
  background: white;
  font-weight: bold;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
   margin-right:10px;
}

.incident-criticality-moderate {

  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
  background: white;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
  margin-right:10px;

}

.incident-criticality-low {

  border: solid 1px var(--status-low-backcolor);
  color: gray;
  background: white;
  max-width: 80px;
  min-width: 80px;
  max-height:25px;
  min-height:25px;
   margin-right:10px;

}



.severity {
   text-align: center;
  vertical-align: middle;
  margin-right: 10px;
  max-width: 80px;
 min-width: 80px;
  max-height:25px;
  min-height:25px;
   margin-right:10px;
}

.severity-critical {

  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: white;

}


.severity-very-high {

  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: white;

}

.severity-high {

  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
  background: white;

}

.severity-moderate {

  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
  background: white;

}

.severity-low {

  border: solid 1px var(--status-low-backcolor);
  color: gray;
  background: white;

}



/* Assessed risks */

.risk-tolerance {


  min-width: 8%;
  max-width: 8%;
  text-align: center;
}


.risk-criticality {

  min-width: 8%;
  max-width: 8%;
  text-align: center;
  vertical-align: middle;
}

.risk-criticality-critical {
  min-width: 8%;
  max-width: 8%;
   margin-left:10px;
  border: solid 1px var(--status-veryhigh-backcolor);
  background: white;
  color: var(--status-veryhigh-backcolor);
  text-align: center;

}

.risk-criticality-very-high {
  min-width: 8%;
  max-width: 8%;
   margin-left:10px;
  border: solid 1px var(--status-veryhigh-backcolor);
  background: white;
  color: var(--status-veryhigh-backcolor);
  text-align: center;

}

.risk-criticality-high {
  min-width: 8%;
  max-width: 8%;
  margin-left:10px;
  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
  text-align: center;
  background: white;

}

.risk-criticality-moderate {
  min-width: 8%;
  max-width: 8%;
   margin-left:10px;
  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
  text-align: center;
  background: white;

}

.risk-criticality-low {
  min-width: 8%;
  max-width: 8%;
   margin-left:10px;
  border: solid 1px var(--status-low-backcolor);
  color: darkgray;
  text-align: center;
  background: white;

}

.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 {
  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-text-color);
  cursor: hand;
  font-size: 32px;
  margin-top: -6px;
}

.orange-icon {
  color: var(--status-incomplete-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-text-color);
  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;


}


.red-box {
  border: solid 1px var(--status-high-backcolor);
  color: var(--status-high-backcolor);
  background: white;
  text-align: center;
  max-width: 110px;
  min-width: 110px;


}

.green-box {
  border: solid 1px var(--status-acceptable-backcolor);
  color:  var(--status-acceptable-text-color);
  background: white;
  text-align: center;
  max-width: 110px;
  min-width: 110px;


}

.yellow-box {
  border: solid 1px var(--status-low-backcolor);
  color: black;
  background: white;
  text-align: center;
  max-width: 110px;
  min-width: 110px;


}


.orange-box {
  border: solid 1px var(--status-moderate-backcolor);
  color: var(--status-moderate-text-color);
  background: white;
  text-align: center;
  max-width: 110px;
  min-width: 110px;


}


.grey-box {
  border: solid 1px var(--status-not-applicable-backcolor);
  color: black;

  background: white;
  text-align: center;
  max-width: 110px;
  min-width: 110px;


}

.purple-box {
  border: solid 1px var(--status-veryhigh-backcolor);
  color: var(--status-veryhigh-backcolor);
  background: white;
  text-align: center;
  max-width: 110px;
  min-width: 110px;



}

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

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

.stripe:nth-child(even) {
  background: white;
  /* 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 */
}