#content_form {
    margin-bottom: 5px;
}

.open>.dropdown-menu{
    background-color: var(--portalThemeColor4, #ffffff);
}
.open>.dropdown-menu>li>a{
    color: var(--portalThemeOnColor9, #1276CE);
}


.open .dropdown-menu > li > a:hover,.dropdown-menu > .active > a:hover{
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: Underline;

}
.dropdown-menu>.active>a{
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: Underline;

}
.open .dropdown-menu>.active>a:focus{
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: Underline;

}


/* Target the form by its ID */
#EntityFormPanel {
    width: 800px;  /* Increase the form's width */
    margin: 0 auto;    /* Center the form */
    padding: 30px;     /* Add more padding inside the form */
    background-color: rgb(237, 233, 233);  /* Light background color */
    border-radius: 8px;  /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow effect */
}

/* Target the input fields and textarea inside the form */
#EntityFormPanel input, #EntityFormPanel textarea {
    width: 500px !important;  /* Make input fields and textarea take full width */
    padding: 12px;  /* Add padding for comfortable typing */
    font-size: 1.5rem;  /* Set font size for input text */
    border: 1px solid #ccc;  /* Border color */
    border-radius: 4px;  /* Slightly rounded corners */
    box-sizing: border-box;  /* Ensure padding doesn't affect width */
    transition: border-color 0.3s ease;  /* Smooth transition for border color */

}

/* Make textarea larger by setting a specific height */
#EntityFormPanel textarea {
    height: 200px; 
    /* width: 500px; Set a larger height for the textarea */
}

/* Add styling for input and textarea when focused */
#EntityFormPanel input:focus,
#EntityFormPanel textarea:focus {
    border-color: #5b1212;  /* Change border color when focused */
    outline: none;  /* Remove default outline */
}

/* Styling for the submit button inside the form */
#EntityFormPanel button {
    padding: 12px 20px;  /* Add padding inside the button */
    background-color: #cd6948;  /* Green background color */
    color: white;  /* White text color */
    font-size: 1.2rem;  /* Font size for the button */
    border: none;  /* Remove default border */
    border-radius: 4px;  /* Rounded corners for the button */
    cursor: pointer;  /* Pointer cursor on hover */
    transition: background-color 0.3s ease;  /* Smooth transition for background color */
    margin-top: 10px;  /* Add margin to the top for some space */
}

#ceox_changeduration{

    width: 500px !important;
}

#ceox_requesttitle_name{

    width: 500px !important;
}
#ceox_changeduedate_datepicker_description{
    width: 500px !important;

}

/* SUBMIT BUTTON */
#InsertButton {
    transform: translateX(20px) !important;

}

/* Button hover effect */
#EntityFormPanel button:hover {
    background-color: #45a049;  /* Darken the button color on hover */
}

/* Styling for form fields (label) */
#EntityFormPanel label {
    display: block;  /* Make labels block-level to be on their own line */
    font-size: 2rem;  /* Increase label font size */
    font-weight: 500;  /* Make labels bold */
    margin-bottom: 5px;  /* Add some space below the label */
    color: #333;  /* Dark text color */
}

/* Add spacing between form groups */
#EntityFormPanel .form-group {
    margin-bottom: 20px;  /* Add space between fields */
}


.section-title h3 {
    display: none;
} 



 .input-group {
    display: flex;
    justify-content: space-between;
    margin-right: 5px;
}

.btn-default {

    margin-top: 0 !important; 
    margin-left: 10px !important; 
    background-color: rgb(153, 8, 8) !important;
    padding: 8px 18px !important;

}

/* I THINK THIS IS FOR THE LOOK UP */

.form-close {
    /* margin: 0 !important;
    padding: 12px 6px !important; */
    all: unset !important; /* Remove all styles */
    display: none !important;
}

.modal-header {
    display: none !important;
}

.modal-footer {
    all: unset !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 20px 20px !important;
    

}

.modal-footer button {
    all: unset !important;
    padding: 10px !important;
    border-radius: 20px !important;
    margin-left: 10px !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;

}

.modal-footer button:hover {
    transform: scale(1.1) !important;
  }

.entitylist-search {
    transform: translateX(-100px) !important;
    margin-left: 5px;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;

}


button[title="Search Results"] {
    padding: 8px 20px !important;
    margin: 0px !important;
    transition: transform 0.3s ease !important;
}

button[title="Search Results"]:hover {
    transform: scale(1.1) !important;

}

button[title="Select"] {

    color: white !important;
    background-color: rgb(50, 180, 50) !important;
}

button[title="Cancel"] {
    color: white !important;
    background-color: rgb(213, 97, 97) !important;
}


button[title="Remove value"] {
    display: none !important;
}

/* SUBMIT FORMS DESCRIPTIONS */

.description.above {

    padding: 10px;
    padding-left: 0px;
    opacity: 0.6;
    font-style: italic;
}


.tab-column:nth-of-type(1) {
    width: 75% !important; 
}

/* CALENDER ICON */

span[data-date-icon="icon-calendar fa fa-calendar"] {
    margin: 0 !important;
    padding: 0 !important;

}

span[data-date-icon="icon-calendar fa fa-calendar"]::before {
    display: inline-block !important; /* Make sure the pseudo-element can be transformed */
    transform: translateX(-7px) translateY(2px) !important; /* Apply the transform */
}

/* 'REQUESTED BY' NAME BACKGROUND */
 
#customerid_name {
    background: transparent !important; /* Remove the background */
    border: none !important;
}


/* ACTUAL CALENDER STUFF */


.bootstrap-datetimepicker-widget table {
    table-layout: fixed !important;  /* or 'auto' to allow cells to resize dynamically */
    width: 100% !important;  /* Ensures it uses full width */
    background-color: #f7f7f7 !important;  /* Light background color for the table */
}

.bootstrap-datetimepicker-widget td {
    width: 14.28% !important;  /* Spread the 7 days of the week evenly */
    text-align: center !important; /* Optional, to center align the numbers */
    padding: 5px !important; /* Give some padding for better visibility */
    background-color: #fff !important;  /* White background for each cell */
}

.bootstrap-datetimepicker-widget .day button {
    width: 100% !important; /* Make the buttons take full width of the cells */
    background-color: rgb(174, 16, 16) !important;  /* Set the background color of the day buttons to red */
    color: white !important;  /* Change text color to white */
    border: none !important;  /* Remove border for a clean look */
    padding: 10px 0 !important;  /* Padding for better click area */
    font-size: 14px !important;  /* Ensure text size is consistent */
}

.bootstrap-datetimepicker-widget .day button:hover {
    background-color: rgb(115, 0, 0) !important;  /* Darker red when hovering */
    color: white !important;  /* Keep the text color white on hover */
}

.bootstrap-datetimepicker-widget .today button {
    background-color: rgb(115, 0, 0) !important;  /* Set the 'Today' button background to dark red */
    color: white !important;  /* Text color remains white */
}

.bootstrap-datetimepicker-widget .prev button, 
.bootstrap-datetimepicker-widget .next button {
    color: rgb(174, 16, 16) !important;  /* Set the previous and next buttons to red */
    font-size: 16px !important;  /* Adjust font size for better visibility */
}

.bootstrap-datetimepicker-widget .prev button:hover, 
.bootstrap-datetimepicker-widget .next button:hover {
    color: rgb(115, 0, 0) !important;  /* Darker red when hovered */
}

button[title="Select month"] {
    background-color: rgb(174, 16, 16) !important;
    color: white !important;  /* Optional: change the text color to white for contrast */
    border: none !important;  /* Optional: remove the border for a cleaner look */
    padding: 5px 10px !important;  /* Optional: adjust padding */
}



.glyphicon-chevron-left::before {

    /* padding: 5px !important;  Add padding around the icon */
    display: inline-block !important;  /* Keeps the icon aligned properly */
    color: rgb(174, 16, 16) !important;

}

button[title="Previous month"] {

    background-color: white !important; /* Optional: Adjust background color */
}

.glyphicon-chevron-right::before {

    /* padding: 5px !important;  Add padding around the icon */
    display: inline-block !important;  /* Keeps the icon aligned properly */
    color: rgb(174, 16, 16) !important;

}


button[title="Next month"] {

    background-color: white !important; /* Optional: Adjust background color */
}


/* MY REQUESTS TABLE */

.entity-grid .view-grid table {
    width: 100% !important; /* Full width of the container */
    table-layout: auto !important; /* Allow column widths to adjust based on content */
    border-collapse: collapse !important; /* Collapse table borders for clearer borders */
  }
  
  .entity-grid .view-grid th,
  .entity-grid .view-grid td {
    padding: 12px !important; /* Add padding to cells */
    word-wrap: break-word !important; /* Allow wrapping of text inside cells */
    border: 1px solid #000 !important; /* Add a solid border for clarity */
  }
  
  .entity-grid .view-grid th {
    text-align: left !important; /* Align header text to the left */
    background-color: #f2f2f2 !important; /* Light grey background for the headers */
    font-weight: bold !important; /* Make the text in the headers bold */
    padding-left: 15px !important; /* Extra padding on the left for more space */
    padding-right: 15px !important; /* Extra padding on the right for more space */
    min-width: 200px !important; /* Minimum width to ensure headers have enough space */
  }
  
/* MY REQUESTS TABLE FILTER ICON */
  
.fa.fa-filter::before {
    display: inline-block !important; /* Make sure the pseudo-element can be transformed */
    transform: translateX(-7px) translateY(2px) !important; /* Apply the transform */
}

/* MY REQUESTS TABLE FILTER APPLY BUTTON */

.btn-entitylist-filter-submit {
    color: #fff !important;
}

.btn-entitylist-filter-submit:hover {
    background-color: rgb(115, 0, 0) !important; /* Dark red on hover */
}

.btn:hover {
     background-color: #850101 !important;
}

.visually-hidden.sort-hint {
    display: none !important;
}

.input-group-addon,.input-group-addon.active {
    display: none !important;
    /* padding: 6px 12px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35 !important;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 0; */
}

.visually-hidden {display: none !important;
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog {
    margin: auto;
}

/* MAKING THE INPUT FIELDS THE SAME WIDTH */

.view-toolbar .entitylist-search {
  display: none !important;
}

.caret {
    display: none !important;
}