/*Start Login form*/

.block-user-login-block form#openid-connect-login-form {
    position: absolute;
    bottom: 95px;
    right: 40px;
}

/*End Login form*/

.ticket-table {
    display: none;
}

.breadcrumb-content-inner .breadcrumb-content-main {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    z-index: 11;
    padding: 50px 15px 50px;
    text-align: center;
}

.ticket-table tr.Low, .ticket-table tr.Rendah{
    background-color: #f1ffe8;
    border-top: 3px solid #bcffb3;
}

.ticket-table tr.Medium, .ticket-table tr.Sederhana {
background-color: #eff1fe;
    border-top: 3px solid #b5c4fe;
}

.ticket-table tr.High, .ticket-table tr.Tinggi {
    background-color: #ffffdd;
    border-top: 3px solid #ffcf73;
}

.ticket-table tr.Urgent, .ticket-table tr.Mendesak {
    background-color: #fddddd;
    border-top: 3px solid #fc8596;
}

.ticket-table table > thead > tr > th, .ticket-table table > thead > tr > td, .ticket-table table > tbody > tr > th, .ticket-table table > tbody > tr > td, .ticket-table table > tfoot > tr > th, .ticket-table table > tfoot > tr > td {
    border-color: #dee2e600;
    border-width: 0px 0px 0px 0;
    border-style: solid;
}

.ticket-table tr td {
    border: 0;
    vertical-align: middle;
    padding: 10px 10px 10px 10px !important;
    color: #222222;
}
.ticket-table table{
border-color: #dee2e600;
}

.ticket-table tr td a {
    color: #0f72ae;
}

.button-submit-right {
    text-align: right;
}

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

a.btn.btn-submit-ticket {
    border-radius: 5px;
    padding: 10px 15px;
    height: 50px;
    background: #209687;
}

a.btn.btn-submit-ticket:hover {
    background: #0f7a6d;
}

.login-box {
    border: 1px solid #222222;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    padding: 10px 40px;
}

.login-icon {
    position: absolute;
    left: 0;
    right: 0;
    top: -100px;
}

.register-note {
    position: relative;
    margin-top: 80px;
    color: #007be5;
    font-size: larger;
    border-bottom: 1px solid;
}

.block-user-login-block ul {
    display: flex;
    padding-left: 0;
    margin-top: 20px;
}

.block-user-login-block ul li {
    list-style: none;
    padding: 0;
    margin-right: 20px;
}

body.user-logged-in .login-user-col {
    display: none;
}

.ticket-table .views-exposed-form {
    display: inline-flex;
    margin-bottom: 20px;
}

.ticket-table .views-exposed-form .form-text, .ticket-table .views-exposed-form .form-select {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #797F89;
    height: 40px;
    border-radius: 3px;
    width: 100%;
}

/*Start Ticket Color Matrix */

/* 1. Define the updated high-contrast color palette */
:root {
  --color-critical-red: #ffe0e3;
  --color-high-orange: #ffe8c6;
  --color-medium-yellow: #fbf6c8;
  --color-low-yellow-green: #edf1c2;
  --color-resolved-green: #d6fdfb;
  --color-closed-green: #c2f7cd;

  /* Use black text for high contrast on these light backgrounds */
  --color-text-dark: #000000;
}

/* 2. Background utility classes (no changes needed here) */
.bg-critical-red { background-color: var(--color-critical-red); }
.bg-high-orange { background-color: var(--color-high-orange); }
.bg-medium-yellow { background-color: var(--color-medium-yellow); }
.bg-low-yellow-green { background-color: var(--color-low-yellow-green); }
.bg-resolved-green { background-color: var(--color-resolved-green); }
.bg-closed-green { background-color: var(--color-closed-green); }

/*Open*/
.ticket-table tr._62-671 {
    background-color: var(--color-critical-red);
    border-top: 3px solid #edb2b8;
}

.ticket-table tr._62-670 {
    background-color: var(--color-high-orange);
    border-top: 3px solid #efce9d;
}

.ticket-table tr._62-669 {
    background-color: var(--color-high-orange);
    border-top: 3px solid #efce9d;
}

.ticket-table tr._62-668 {
    background-color: var(--color-medium-yellow);
    border-top: 3px solid #ffcf73;
}

/*Pending*/
.ticket-table tr._63-671 {
    background-color: var(--color-high-orange);
    border-top: 3px solid #efce9d;
}

.ticket-table tr._63-670 {
    background-color: var(--color-high-orange);
    border-top: 3px solid #efce9d;
}

.ticket-table tr._63-669 {
    background-color: var(--color-medium-yellow);
    border-top: 3px solid #e9e3ad;
}

.ticket-table tr._63-668 {
    background-color: var(--color-low-yellow-green);
    border-top: 3px solid #dbdfaa;
}

/*Waiting Customer*/
.ticket-table tr._66-671 {
    background-color: var(--color-high-orange);
    border-top: 3px solid #efce9d;
}

.ticket-table tr._66-670 {
    background-color: var(--color-medium-yellow);
    border-top: 3px solid #e9e3ad;
}

.ticket-table tr._66-669 {
    background-color: var(--color-low-yellow-green);
    border-top: 3px solid #dbdfaa;
}

.ticket-table tr._66-668 {
    background-color: var(--color-low-yellow-green);
    border-top: 3px solid #dbdfaa;
}

/*Waiting 3rd party*/
.ticket-table tr._67-671 {
    background-color: var(--color-medium-yellow);
    border-top: 3px solid #e9e3ad;
}

.ticket-table tr._67-670 {
    background-color: var(--color-medium-yellow);
    border-top: 3px solid #e9e3ad;
}

.ticket-table tr._67-669 {
    background-color: var(--color-low-yellow-green);
    border-top: 3px solid #dbdfaa;
}

.ticket-table tr._67-668 {
    background-color: var(--color-resolved-green);
    border-top: 3px solid #b5d5b6;
}

/*Resolved*/
.ticket-table tr._64-671 {
    background-color: var(--color-resolved-green);
    border-top: 3px solid #b5d5b6;
}

.ticket-table tr._64-670 {
    background-color: var(--color-resolved-green);
    border-top: 3px solid #b5d5b6;
}

.ticket-table tr._64-669 {
    background-color: var(--color-resolved-green);
    border-top: 3px solid #b5d5b6;
}

.ticket-table tr._64-668 {
    background-color: var(--color-resolved-green);
    border-top: 3px solid #b5d5b6;
}

/*Closed*/
.ticket-table tr._65-671 {
    background-color: var(--color-closed-green);
    border-top: 3px solid #8ccfc9;
}

.ticket-table tr._65-670 {
    background-color: var(--color-closed-green);
    border-top: 3px solid #8ccfc9;
}

.ticket-table tr._65-669 {
    background-color: var(--color-closed-green);
    border-top: 3px solid #8ccfc9;
}

.ticket-table tr._65-668 {
    background-color: var(--color-closed-green);
    border-top: 3px solid #8ccfc9;
}
/* 3. Basic styling for the table (no changes needed here) */
.status-matrix {
  border-collapse: collapse;
  margin: 20px 0;
  font-family: sans-serif;
  color: var(--color-text-dark);
}

.status-matrix th, .status-matrix td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: center;
}

.status-matrix th {
  background-color: #f4f4f4;
}

.status-matrix .priority-header {
    text-align: left;
    font-weight: bold;
}

.ticket-color img.icon {
    margin-top: 4px;
}
/*End Ticket Color Matrix*/