/*
 The generic custom.css file that applies styles across the entire site/application.
 i.e., font-faces, etc.

 @name custom.css
 @version 1.0.0
 @author Darren Howard <darren@screwlooseit.com.au>
 @copyright (c) 2023, Screwloose IT.
*/

body {
    background: #F1F1F1;
}

.login-logo {
    margin-right: -65px;
    margin-top: -50px;
}

.no-resize {
    resize:none!important;
}

.logo-login {
    margin-top: -63px;
    margin-left: 65px;
    height: 60px;
}

/**
CODE FORMATTING
*/
.__log {
    font-size:12px;
    overflow-wrap: break-word !Important;
    word-wrap: break-word !Important;
    hyphens: auto !Important;
    overflow-x: scroll!important;
}
.string {
    color: green;
    max-width:90%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.number {
    color: darkorange;
}
.boolean {
    color: blue;
}
.null {
    color: magenta;
}
.key {
    color: red;
}

.error-text a {
    --tw-text-opacity: 1;
    color: rgb(28 100 242 / var(--tw-text-opacity));

}

.error-border {
    border: 2px solid rgb(200 30 30);
    padding: 8px;
}
form input.invalid {
    border-color: rgb(200 30 30);
}
.error-border .error-text {
    color: rgb(200 30 30);
    font-weight:bold;
}

form .invalid-field ::placeholder {
    color:rgb(200 30 30 / var(--tw-placeholder-opacity));
}
form .invalid-field input,
form .invalid-field input:focus {
    color:rgb(119 29 29 / var(--tw-text-opacity));
    background-color: rgb(253 242 242 / var(--tw-bg-opacity));
    border-color: rgb(240 82 82 / var(--tw-border-opacity));
    --tw-ring-color: rgb(240 82 82 / var(--tw-border-opacity));
}
form .invalid-field label {
    color:rgb(200 30 30 / var(--tw-text-opacity));
}

form .valid-field ::placeholder {
    color: #6B7280;
    opacity: 1;
}
form .valid-field input,
form .valid-field input:focus {
    color:rgb(17 24 39 / var(--tw-text-opacity));
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    --tw-ring-color: rgb(209 213 219 / var(--tw-border-opacity));
}
form .valid-field label {
    color:rgb(17 24 39 / var(--tw-text-opacity));
}

input[type="text"]:disabled{
    background-color: #A0A0A0;
}

input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}

#availability-message {
    font-weight:bold;
    font-size: 1em;
}
#availability-message svg{
    height:36px;
    width: 36px;
}
#availability-message.available-true {
    color:rgb(4 108 78 / var(--tw-bg-opacity));
    
}
#availability-message.available-true svg {
    fill: rgb(4 108 78 / var(--tw-bg-opacity));

}

#availability-message.available-false {
    color: rgb(208 56 1 / var(--tw-bg-opacity));
    
}
#availability-message.available-false svg {
    fill: rgb(208 56 1 / var(--tw-bg-opacity));
}
button svg {
    display: inline;
}
:not(button) > a:hover {
    font-weight: 700;
    text-decoration: underline;
}

.progress_bar {
    transition: all ease-out 400ms ;
    width:0;
}
.progress_bar.pb0,
#password-field .htmx-added .progress_bar.old-pb0 {
    width:0;
    background-color: rgb(208 56 1 / var(--tw-bg-opacity));
}
.progress_bar.pb25,
#password-field .htmx-added .progress_bar.old-pb25 {
    width:25%;
    background-color: rgb(208 56 1 / var(--tw-bg-opacity));
}
.progress_bar.pb50,
#password-field .htmx-added .progress_bar.old-pb50 {
    width:50%; 
    background-color: rgb(227 160 8 / var(--tw-bg-opacity))
}
.progress_bar.pb75,
#password-field .htmx-added .progress_bar.old-pb75 {
    width:75%; 
    background-color:rgb(4 108 78 / var(--tw-bg-opacity))
}
.progress_bar.pb100,
#password-field .htmx-added .progress_bar.old-pb100 {
    width:100%;
    background-color:rgb(4 108 78 / var(--tw-bg-opacity))
}

.space-y-6 > :not([hidden]).error-text.mt-2 {
    margin-top: .5rem;
}

.status-btn {
    display:none;
    cursor: default;
}
main.register-company-page button.register-company-btn
{
    display: none;
} 

main.register-company-page .reg-section {
    display: none;
}

main.register-company-page[data-stage="0"] #stage-0.reg-section,
main.register-company-page[data-stage="1"] #stage-1.reg-section,
main.register-company-page[data-stage="2"] #stage-2.reg-section,
main.register-company-page[data-stage="3"] #stage-3.reg-section,
main.register-company-page[data-stage="4"] #stage-4.reg-section,
main.register-company-page[data-stage="5"] #stage-5.reg-section {
    display: block;
}
main.register-company-page[data-stage="0"] nav ol > .nav-item-0 *,
main.register-company-page[data-stage="1"] nav ol > .nav-item-1 *,
main.register-company-page[data-stage="2"] nav ol > .nav-item-2 *,
main.register-company-page[data-stage="3"] nav ol > .nav-item-3 *,
main.register-company-page[data-stage="4"] nav ol > .nav-item-4 *,
main.register-company-page[data-stage="5"] nav ol > .nav-item-5 * {
    font-weight: bold;

}

#stage-0 .not-stage-0 {
    display:none;
}
main.register-company-page[data-stage="0"] nav ol > .nav-item {
    font-weight: normal;
}
main.register-company-page[data-stage="0"] .back-btn {
    display: none;
}
main.register-company-page[data-stage="4"] .continue-btn {
    display: none;
}
main.register-company-page[data-stage="0"] .bottom-nav {
    justify-content: end;
}
.datepicker.active.hidden {
    display:none;
}

.card-heading
{
    background-color: #303055;
    color:white;
}

.card-footer a,
.company-summary a {
    color:rgb(29 78 216 / var(--tw-bg-opacity));
}
.company-summary a {
    text-decoration: underline;
}

.htmx-indicator.indicator-holder {
    opacity: 1;
}

.htmx-indicator[aria-hidden=true],
.htmx-indicator.wait-btn  {
    display: none;
}

.htmx-indicator.htmx-request,
.htmx-indicator .continue-btn,
.htmx-indicator.htmx-request .wait-btn  {
    display: inline;
}

.htmx-indicator.htmx-request .wait-btn.centered,
.wait-btn.centered {
    display: block;
    margin: auto;
    font-size: larger;
}

.htmx-indicator .wait-btn,
.htmx-indicator.htmx-request .hide-while-submitting,
.htmx-indicator.htmx-request .continue-btn {
    display: none;
}


.application-status.status-class-warning {
    color:#D97706;
}

.application-status.status-class-error {
    color:#991B1B;
}


  table.rounded {
    border-collapse: separate;
    border-spacing: 0;
  }

  table.rounded thead,
  table.rounded thead tr {
    background: transparent;
  }

  table.rounded tr th,
  table.rounded tr td {
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  table.rounded tr th:first-child,
  table.rounded tr td:first-child {
    border-left: 1px solid transparent;
  }
  table.rounded tr th {
    border-top: 1px solid transparent;
    text-align: left;
    background-color: rgb(30, 27, 75);
    font-weight: 600;
  }
  table.rounded tr th.text-center {
    text-align: center;
  }
  

  /* top-left border-radius */
  table.rounded tr:first-child th:first-child {
    border-top-left-radius: 16px;
  }
  
  /* top-right border-radius */
  table.rounded tr:first-child th:last-child {
    border-top-right-radius: 16px;
  }
  
  /* bottom-left border-radius */
  table.rounded tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
  }
  
  /* bottom-right border-radius */
  table.rounded tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
  }

  /** Datatables Fix **/
  main div.dt-container select.dt-input {
    padding-right:1rem;
    background-position: right 0.25rem center;
  }
  @media (max-width: 767px) {
        main div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-start {
            text-align: left;
        }
        main div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-end {
            text-align: left;
        }
 }

 table.datatable tr:nth-child(2n) td {
    background-color: #CECEFD;
 }

 #mailbox-tab [aria-selected=true] {
    text-decoration: none;
 }

 #mailbox-tab li:first-child [role=tab] {
    border-radius: 8px 0 0 8px;
 }
 #mailbox-tab li:last-child [role=tab] {
    border-radius: 0 8px 8px 0;
 }


 #mailbox-tab [aria-selected=true][role=tab],
 #mailbox-tab [aria-selected=true][role=tab]:hover{
    background: rgb(30 27 75 / var(--tw-bg-opacity));
    color:white;
 }