.modal-body {
	background-color: #f8f9fa;
}

.control-label {
	padding-top: 8px;
	text-align: right;
}

.value-label {
	padding-top: 8px;
	text-align: left;
	font-weight:400;
}

.customHeader-label{
	font-size: 30px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.1;
	color: inherit;
	box-sizing: border-box;
}

.pagination{
margin: 6px 0px 6px 0px;
}

.table {
	margin-bottom: 10px;
}

.paginationStats {
	font-size:12px;
	font-weight:400;
}

.pagination-sm {
	font-size:11px;
}


.has-search .form-control-feedback {
    right: initial;
    left: 0;
/*     color: #ccc; // makes the color of the magnifying glass grey instead of black */
	margin-left:16px
 }

.has-search .form-control {
    padding-right: 12px;
    padding-left: 34px;
}

.change_link {
	font-color:red;
}





/* found the following 'scale' solution here:
https://stackoverflow.com/questions/22743457/how-can-i-change-the-size-of-a-bootstrap-checkbox 
*/
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.3); /* IE */
  -moz-transform: scale(1.3); /* FF */
  -webkit-transform: scale(1.3); /* Safari and Chrome */
  -o-transform: scale(1.3); /* Opera */
  padding: 10px;
  margin-right: 5px;
  margin-left: 5px;
}




body {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #222222;
	background-color: #f8f9fa;
	font-weight:400;
	
	/* this property was added to prefer entityDefsVisible dialog from leaving padding-right: 17px on html body after modal close */
	/* see: https://stackoverflow.com/questions/32862394/bootstrap-modals-keep-adding-padding-right-to-body-after-closed */
	padding-right: 0 !important; 
}

h2 {
	font-weight:300;
}

h4 {
	font-weight:400;
}

.btn {
	font-weight:300;
}

label {
	font-weight:400;
}


.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}



.config-menu-icon {
    cursor: pointer; /* Add a pointer cursor to make it look clickable */
    text-decoration: underline; /* Optionally, add underline to mimic a link */
    margin-left: 6px; /* Adjust spacing as needed */
    margin-right: 2px; /* Adjust spacing as needed */
    position: relative; /*top: -0.5em;*/  
    font-size: 16px;
}

.config-menu-headerPosition {
    top: -2px;
}

.config-menu-fieldPosition {
    top: 2px;
}

.config-icon {
    cursor: pointer; /* Add a pointer cursor to make it look clickable */
    text-decoration: underline; /* Optionally, add underline to mimic a link */
    margin-left: 10px; /* Adjust spacing as needed */
    position: relative; top: -0.5em;  font-size: 20px;
}

.box-arrow-icon {
	margin-left:10px;
	color:blue;
}

/* this is here because on the main page, there was too much space between "Applications" and the gear icon when the <h2> and the <i> were on different lines */
h2 {
   white-space: nowrap;
}


div.list-group-item:hover {
	cursor: pointer;
	color: #555;
	text-decoration: none;
	background-color: #f5f5f5;
}

.hover-icon .bi-gear-fill {
  display: none;
}

.hover-icon:hover .bi-gear {
  display: none;
}

.hover-icon:hover .bi-gear-fill {
  display: inline-block;
}



.list-item-container {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Spread items horizontally */
}

.list-group-item {
    flex-grow: 1; /* Expand to fill available space */
}