div {
    padding: 5px;
}

body {
    font-family: "Proxima Nova", sans-serif !important; /* Specify your desired font family */
    font-size: 16px !important; /* Specify your desired font size */
}

/* Apply styles to the form */
form {
    background-color: #f7e9f3;
    border-radius: 5px;
    margin: auto;
    width: 100%;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-row {
    display: flex;
    align-items: center;
    padding: 10px;
    height: auto;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.form-row > div {
    margin-right: 20px;
}

.form-row select,
.form-row input[type="text"],
.form-row input[type="checkbox"] {
   height: 40px;
   width: 220px;
   margin-inline-start: inherit;
   margin-inline-end: initial;
   margin-left: 10px;
   border-radius: 5px;
   align-items: center;
   /*flex: 1 1 auto;*/ /* Allow items to grow and shrink */
}

.custom-select {
    height: 40px !important;
    width: 220px !important;
    margin-inline-start: inherit !important;
    margin-inline-end: initial !important;
    margin-left: 10px !important;
    border-radius: 5px !important;
    align-items: center !important;
    appearance: none; /* Remove default arrow */
    background-color: transparent; /* Optional: make background transparent */
    border: 1px solid #ccc; /* Optional: add a border */
}

    /* Add a hover effect */
    .custom-select:hover {
        background-color: blue; /* Change background color on hover */
        color: white; /* Change text color on hover */
    }



 Basic dropdown container styling 
.version-dropdown-container {
    position: relative;
    height: 40px !important;
    width: 100% !important;
    padding: unset;
}


.version-dropdown {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;  
    padding-right: 30px; 
    background-color: white;  
    height: 40px !important;
    width: 100% !important;
    margin-inline-start: inherit !important;
    margin-inline-end: initial !important;
    border-radius: 5px;
    align-items: center;
    border: 1px solid #ccc;
    cursor: pointer; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

     Set selected option background color 
    .version-dropdown option:focus {
        background-color: #3399FF !important; 
        color: white !important; 
    } 
    .version-dropdown option:checked {
        background-color: gray !important; 
        color: white !important;  
    }

 Add a custom arrow 
.version-dropdown-container::after {
    content: '▼';  
    position: absolute;
    top: 50%;
    padding:unset;
    transform: translateY(-50%);
    pointer-events: none;  
    font-size: 9px; 
    color: #7b7d7d; 
}

 Styling for dropdown options 
.version-dropdown option {
    padding: 10px;
    background-color: white;  
    color: #333;
}

.form-row input[type="submit"] {
   height: 40px;
   width: auto;
   margin-inline-start: inherit;
   margin-inline-end: initial;
   margin-left: 10px;
   align-items: center;
   /*flex: 1 1 auto;*/ /* Allow items to grow and shrink */
}

.form-row label {
   padding-left: 10px;
}

/* Style for the CreateBtn button */
#CreateBtn {
    margin-left: auto; /* Pushes the button to the right */
    background-color: #c460a6;
    border: none !important;
    outline: none;
    border-color: transparent !important;
}

#CreateBtn:hover {
    background-color: #c460a6; /* Set the same color as the background color */
    border: none !important;
    border-color: transparent !important;
    outline: none;
}

/* Remove focus outline on click */
#CreateBtn:focus {
    outline: none;
    border: none !important;
    border-color: transparent !important;
    }

.custom-h5 {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #c460a6 !important;
}

.custom-h6 {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #c460a6 !important;
    margin-top: 15px;
}

.readonly-input {
    border: none !important;
    background-color: #f7e9f3;
    opacity: 1;
}

hr {
    border-color: #c460a6 !important;
    opacity: unset !important;
    border: solid 1px #c460a6 !important;
    background-color:none;
}

#redirectbtn {
    background-color: #c460a6; /* Blue background color */
    color: #fff; /* White text color */
    border: none !important; /* Remove border */
    padding: 10px 20px; /* Add padding */
    border-radius: 5px; /* Add border radius */
    height: 40px;
    width: auto;
    margin-left: 5px;
}

.containermain {
    background-color: white;
    margin-top: 5rem;
    width: 85%;
    margin-left: auto; /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */
}

/* Apply styles to the table */
table {
    width: 100%; /* Set table width to 100% of its container */
    border-collapse: collapse; /* Collapse table borders */
}

/* Apply styles to table headers */
th {
    /*background-color: #ebc5de !important;*/ /* Set background color for header cells */
    border: 1px solid #ddd; /* Add border to header cells */
    padding: 8px; /* Add padding to header cells */
    text-align: left; /* Align text to the left within header cells */
    /*font-weight: normal !important; */
}

/* Apply styles to table cells */
td {
    border: 1px solid #ddd; /* Add border to cells */
    padding: 8px; /* Add padding to cells */
    text-align: left; /* Align text to the left within cells */
}

/* Apply alternate row color */
tr:nth-child(even) td {
    background-color: #f7e9f3; /* Set background color for even rows */
}

tr:nth-child(odd) td {
    background-color: #eecde4 /* Set background color for even rows */
}

p {
    margin-top: inherit;
    margin-bottom: inherit;
    margin: 5px;
    word-spacing: normal;
    border-spacing: initial;
    display: inline-block;
    padding: 5px;
}

input {
    column-span: revert;
    border-spacing: inherit;
    margin-block-start: auto;
    margin-block-end: auto;
    margin: inherit;
    display: inline-block;
    padding: 5px;
}

label {
    padding-top: initial;
}

/* Set text color to black */
input[type="text"] {
    color: black;
    border: 1px solid black;
    height: 40px !important;
}

    /* Disabled state for input fields */
    input[type="text"]:read-only {
        background-color: white;
        color: #a0a0a0; /* Gray text */
        border: 1px solid black;
        height: 40px !important;
        cursor: not-allowed; /* Not-allowed cursor */
    }

.alert {
    /*padding: 20px;*/
    background-color: #FF3131 !important;
    color: white;
}

.success {
    padding: 20px;
    background-color: #04AA6D;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px !important;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* Apply styles for textboxes and dropdowns */
select {
    border: 1px solid black !important; /* Black border */
    height: 40px !important; /* Set height to 40 pixels */
    color: black; /* Black text color */
    vertical-align: middle !important;
    align-items: center !important;
    line-height: 40px !important; /* Vertically center the text */
}

.select2-container .select2-selection--single {
    border: 1px solid black !important; /* Black border */
    height: 40px !important; /* Set height to 40 pixels */
    color: black; /* Black text color */
    border-radius: 5px;
    vertical-align: middle !important;
    align-items: center !important;
    line-height: 40px !important /* Vertically center the text */
}

.select2-container--default .select2-selection--single {
    border: 1px solid black !important; /* Black border */
    height: 40px !important; /* Set height to 40 pixels */
    color: black; /* Black text color */
    border-radius: 5px;
    vertical-align: middle !important;
    align-items: center !important;
    line-height: 40px !important; /* Vertically center the text */
}

.select2-selection__rendered {
    display: flex !important;
    align-items: initial !important;
    margin-top: 5px !important;
}

/* Center align the selection arrow in Select2 */
.select2-selection__arrow {
    display: flex !important;
    align-items: center !important;
    margin-top: 5px !important;
}




[type=button] {
    background-color: #c460a6; /* Background color */
    color: #fff; /* White text color */
    border: none !important; /* Remove border */
    padding: 10px 20px; /* Add padding */
    border-radius: 5px; /* Add border radius */
    height: 40px;
}

/* Apply styles to the buttons */
input[type="submit"],
input[type="button"],
button#Fetch {
    background-color: #c460a6; /* Background color */
    color: #fff; /* White text color */
    border: none !important; /* Remove border */
    padding: 10px 20px; /* Add padding */
    border-radius: 5px; /* Add border radius */
    height: 40px;
}
    button#Fetch img {
        margin-right: 10px; /* Add space between the icon and text */
    }

    /* Remove background color and border on mouse hover */
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #c460a6 !important; /* Set background color to transparent */
    border-color: #c460a6 !important; /* Set border color to transparent */
    cursor: pointer;
}

    /* Style for the disabled state */
    input[type="submit"]:disabled,
    input[type="button"]:disabled {
        background-color: #d8a9c6; /* Muted pinkish-gray background */
        color: #f2e3ed; /* Light gray text color */
        cursor: not-allowed; /* Not-allowed cursor */
    }
/* Remove focus outline */
input[type="submit"]:focus,
input[type="button"]:focus {
    outline: #c460a6 !important; /* Remove focus outline */
    background-color: #c460a6 !important; /* Set background color to transparent */
    border-color: #c460a6 !important; /* Set border color to transparent */
}

/* Remove border color on click */
input[type="submit"]:active,
input[type="button"]:active {
    outline: none !important; /* Remove focus outline */
    background-color: none !important; /* Set background color to transparent */
    border-color: none !important; /* Set border color to transparent */
    border: none !important;
}

.number {
    border: 1px solid black !important; /* Black border */
}

.closebtn:hover {
    color: black;
}

::placeholder {
    color: #A5A9B1 !important;
}

input[type="date"] {
    padding: 8px;
    border: 1px solid black !important;
    border-radius: 5px;
    height: 40px;
}

/* Header styles */
.header {
    background-color: #c460a6; /* Header background color */
    color: #fff; /* Header text color */
    justify-content: center;
    align-items: center;
    height: 70px;
}

/* Top row styles */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Heading styles */
.heading h4 {
    margin-right: auto; /* Remove default margin */
    text-align: center;
    color: white;
}

/* Logo styles */
.logo img {
    width: 120px; /* Adjust logo width */
    height: 58px; /* Maintain aspect ratio */
}

/* More Info styles */

td .moreInfo {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

    td .moreInfo:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

/* web api styles */

.http-request-icon {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}


/* Navbar styles */
.navbar.navbar-expand-sm.navbar-light {
    margin: auto; /* Center the navbar horizontally */
    width: 85%; /* Adjust the width to fit the content */
    background-color: #eecde4; /*#DD9FCB;*/
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    display: grid;
    height: 60px;
    margin-top: 8px;
    padding-top: 5px;
    border-radius: 5px
}

/* Navbar collapse styles */
.navbar-collapse {
    display: grid; /* Use flexbox */
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    height: 40px;
}

/* Navigation styles */
.nav-link {
    color: #0056b3;
    font-size: 18px !important;
    text-decoration: underline; /* Underline on hover */
}

.nav-link:hover {
    color: #c460a6 !important; /* Darker blue color on hover */
    text-decoration: underline; /* Underline on hover */
    font-size: 18px !important;
    font-weight: bold;
}

.navigation ul {
    list-style-type: none; /* Remove default list style */
    padding: 0; /* Remove default padding */
    text-align: center; /* Center the navigation links */
}

.navigation li {
    display: inline-block; /* Display navigation links horizontally */
    margin-right: 10px; /* Adjust margin between navigation links */
}

.navigation li:last-child {
    margin-right: 0; /* Remove margin from the last navigation link */
}

.navigation a {
    color: #fff; /* Navigation link color */
    text-decoration: underline; /* Remove default underline */
}

/* Footer styles */
footer {
    background-color: #c460a6 !important;
    color: white !important;
    padding: 10px !important;
    text-align: center !important;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin-top: auto;
    height: 50px;
    padding-top: 20px;
}

input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border: none;
}

input:checked {
    accent-color: white;
    color: gray;
    outline: 1px solid darkgray;
    border: none;
}