/*add task*/
.form-group label {
    text-align: left!important;
}

.form-container .cancel {
    background-color: #ccc;
    color: #818181!important;
}

.table {
    --table-bg: #ebf1ff;
}

div#mySidenav{background: #ebf1ff;}

.card-progress {
    background: #fff;
}

/*sop task filter*/
@media screen and (max-width:992px){
.status-container {display: flex;flex-wrap: wrap;flex: 1;}.filter-sop-task {margin: 0;min-width: 100%;flex: 1;display: flex;flex-grow: 1;margin-bottom: 10px;}.filter-sop-form {display: flex;flex: 1;}}

/*add template for SOP*/
@media screen and (min-width:992px){
div#keyResultForm {
    width: auto;
}}
@media screen and (max-width:992px){
.form-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #f1f1f1;
    z-index: 20;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    width: 100%;
    overflow: scroll;
    height: 100vh;
    overflow-x: hidden;
}}


/*add task window*/

textarea#archiveNotesInput {
    width: 100%;
}
.btn-mini-group {
    display: flex;gap:10px;
}

@media screen and (max-width:992px){
.main-title h1 {
    font-size: 20px;
}  
  
#mySidenav a.closebtn {padding: 0px;width: 100%;text-align: right;padding-right: 20px;}
a.btn.btn-mini, .a.btn.btn-mini.delete-button {
    margin: 0px!important;
}
  
#mySidenav input {
    width: 100%;
}
.key-result-card {
    margin: 15px 0px;
}
.key-result-body {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    flex-direction: column;
}

.key-result-section {
    display: flex;
    justify-content: space-between;
    font-size: 14px!important;
}
.key-result-section+.key-result-section {
    border-left: 1px solid #ddd;
    padding-left: 0px!important;
    font-size: 14px;
}
#mySidenav table.table {
	margin: 0px!important;
	width: 100%!important;
}

.keyResultTitle {
	margin: 0px 0px!important;
}

.TopMySideNav {
	display: flex;
	align-items: center!important;
	margin-bottom: 30px;
	justify-content: space-between;
	padding: 10px;
}
.card-progress {
    margin: 20px 15px!important;
    width: auto!important;
}
.key-result-header {
    font-size: 14px!important;
}

.key-result-header .amount {
    font-size: 14px!important;
}
}/**/



/*expanded description*/
@media screen and (max-width:992px){
/* Container for table */
.expand-description {
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
    max-width: 100%; /* Ensures it doesn’t exceed the screen width */
}

/* Ensure table width fits its container */
table.table.expanded-table{
    width: 100%; /* Makes the table take full width of container */
    table-layout: fixed; /* Keeps columns evenly distributed */
}

/* Wrap text and handle overflow in table cells */
table.table.expanded-table th,
table.table.expanded-table td {
    word-wrap: break-word;
    white-space: normal; /* Allows text to wrap within cells */
    overflow: hidden; /* Hides overflowing text */
}
}/**/
 
/* Mobile view: stack each row in a single column */
/*@media (max-width: 768px) {
    .table, .table tbody, .table tr {
      display: block;
      width: 100%;
    }
  
    .table tr {
      border-bottom: 1px solid #ddd;
    }
  
    .table th, .table td {
      display: block;
      width: 100%;
      text-align: left;
    }
  
    .table th {
      font-weight: bold;
      background-color: #f9f9f9;
    }
  
    .table td {
      padding: 8px 16px;
      border-bottom: 1px solid #ddd;
    }
  }*/

/*OKR GOAL*/