/* Site-wide Font: Open Sans */
html body {
  font-family: 'Open Sans', sans-serif !important;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
}

.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
  font-family: 'Open Sans', sans-serif;
}

/*Home page heading and sub heading */
.section-landing .row > div .section-landing-sub-heading {
    letter-spacing: normal;
    text-transform: none;
}

.section-landing .row > div .section-landing-heading {
    letter-spacing: normal;
    text-transform: none;
}


/* Footer Banner */
.section-diagonal-right .section-diagonal-right-content:before {
    background-color: #616161;
}

/* Footer Banner image */
.section-diagonal-right .section-diagonal-right-content { 
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Supreme_court_footer.jpg") no-repeat;
  background-size: cover;
}

.section-diagonal-right {
  margin-bottom: -22px;
}


/* Custom styles for the btn-primary class */
.btn-primary, .previous-btn {
  /* Default button style */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 3px; 
  background: #000000; 
  padding: 6px 12px 6px 12px;
  height: 35px;
  min-width: max-content;
  margin: 0px 10px 0px 0px;
  font-size: 15px;
  text-decoration: none;
  /* Hover state */
  &:hover,
  &:focus {
    background-color: #505050; /* Hover background color */
    box-shadow: 0px 0px 0px 4px rgba(85, 85, 85, 0.25);
  }

  /* Pressed state */
  &:active {
    background: #454545; /* Pressed background color */
  }

  /* Disabled state */
  &:disabled {
    background: #DBDADD; /* Disabled background color */
  }
}

/* Custom styles for the btn-primary class */
.submit-btn {
  /* Default button style */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #425778; 
  

  /* Hover state */
  &:hover,
  &:focus {
    background-color: #344660; /* Hover background color */
    box-shadow: 0px 0px 0px 4px rgba(85, 85, 85, 0.25);
  }

  /* Pressed state */
  &:active {
    background: #273448; /* Pressed background color */
  }

  /* Disabled state */
  &:disabled {
    background: #DBDADD; /* Disabled background color */
  }
}

/* Make warning buttons black */
.btn-warning {
  background-color: #000;
  color: #FFF;
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  color: #2f5fef;
  background-color: #e6e6e6;
  border-color: #1040d1;
}


 
/* Make the 'back' buttons black */
.previous-btn {
  color: #FFF;
}


.UKSCtable {
  border-radius: 6px;
  border: 1px solid #B8B5BB !important; /* Outer border for the table */
  background: #FFF; /* White background for the table */
  width: 100%; 
  overflow: hidden; 
}

.UKSCtable thead tr {
  background: #F7F7F8; 
}

.UKSCtable thead th {
  padding: 12px 20px;
  border-bottom: 1px solid #B8B5BB !important; 
  color: rgba(26, 20, 31, 0.65); 
  font-family: 'Open Sans', sans-serif; 
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5; 
  background-color: transparent !important; /* Overriding Bootstrap */
}

.UKSCtable thead th a {
  pointer-events: none;  /* Makes the link non-interactive */
  cursor: default;       /* Changes the cursor to the default arrow */
}

.UKSCtable td {
  padding: 12px 20px;
  color: #19141F; 
}

.UKSCtable, .UKSCtable thead th {
  border-collapse: separate !important;
}

.UKSCtable thead th a {
  color: rgba(26, 20, 31, 0.65); /* This is the grey color from the th styling above */
  text-decoration: none; /* This removes the underline */
}

/* Handle various pseudo-classes to ensure the link stays grey */
.UKSCtable thead th a:visited,
.UKSCtable thead th a:hover,
.UKSCtable thead th a:active,
.UKSCtable thead th a:focus {
  color: rgba(26, 20, 31, 0.65);
  text-decoration: none;
}

input[type="radio"], input[type="checkbox"] {
  margin-right: 10px; 
}




.step-box { /* Styling for step buttons including green 'tick' + complete  */
  margin: 10px 0;  
}


.step-btn {
  height: 160px; 
  max-width: 250px;
  min-width: 250px;
  line-height: 1.3 !important; 
  position: relative; 
  padding: 20px; 
  text-align: center; 
  white-space: normal; /* Allows the text to wrap to the next line */
  overflow: hidden; 
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}

.step-done {
  position: absolute;
  bottom: 10% !important; /* Positions at the bottom */
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
  margin-top: 5px;
}

/* When a step is done/completed */
.step-btn.btn-completed {
  background-color: #078107;
  color: white; 
/*  pointer-events: none; /* Prevents the button from being clicked */
/*  cursor: not-allowed; /* Changes the cursor to the "not allowed" symbol */
}

.step-btn.btn-completed .step-done {
  display: block; 
}

.tick-icon {
  top: auto;
  position: static;
}

.btn-disabled {
  pointer-events: none; /* Prevents the button from being clicked */
  cursor: not-allowed; /* Changes the cursor to the "not allowed" symbol */
  background-color: #DBDADD; 
  color: #1A141F; 
}

/* Specific override for cursor and pointer events when both classes are present */
.step-btn.btn-completed.btn-disabled {
  pointer-events: none; /* Prevents the button from being clicked */
  cursor: not-allowed; /* Changes the cursor to the "not allowed" symbol */
}

.clickenabled {
  pointer-events: auto !important;
  cursor: pointer !important;
}





/* restrict the width of date-picker controls */
.datetimepicker {
  display: flex;
  align-items: stretch;
  width: 100%; 
}

.datetimepicker .form-control {
  flex-grow: 1;
}

.input-group-addon {
  flex-shrink: 0;
  flex-grow: 0;
}


input[data-date-format="DD/MM/YYYY"] {
  max-width: 200px; 
}

.input-group .input-group-addon, 
.input-group .input-group-btn {
    width: auto; /* Override Bootstrap's style */
}

.datepicker-days {
  font-size: 16px;
}

/* Styles for Confirm Service list and buttons */



.parties-list {
  display: inline-flex;
  flex-direction: column;
  min-width: 300px;
  max-width: 100%; 
}

.parties-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border: 2px solid Black;
  min-width: 0; 
}

.parties-name {
  flex-grow: 1;
  min-width: 0; 
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.parties-list .btn {
  position: relative;
  padding-left: 35px;
  padding-right: 35px;
}

.completed {
  background-color: green;
  color: white;
  pointer-events: none;
  cursor: not-allowed;
}

.completed.tick-left::before,
.completed.tick-right::after {
    content:"\e013"; /* Glyphicons tick icon */
    font-family: 'Glyphicons Halflings'; 
    font-weight: 400;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white; 
}


.completed.tick-left::before {
  left: 10px;
}

.completed.tick-right::after {
  right: 10px;
}


.completed:hover,
.completed:focus {
  background-color: green;
  color: white;
}

.completed.clickenabled,
.completed.clickenabled:hover,
.completed.clickenabled:focus {
  background-color: green;
  color: white;
}


.parties-list .parties-row {
  font-size: 1em !important; 
  line-height: normal !important; 
}

.parties-row .btn.btn-primary {
  min-width: 182px; 
  white-space: nowrap; /* Prevent wrapping of text inside the button */
}