/* Following changes are made to align with previous version of Bootstrap
 * 3 (i.e, 3.4.1) while updating the bootstrap to 5 (i.e, 5.3.1) for few elements
 */

h4 {
  font-size: 18px;
}

.sidebar-nav a {
  color: #337ab6;
  text-decoration: none;
}

a {
    text-decoration: none;
}

a:focus, a:hover {
    color: #23527c;
    text-decoration: underline;
}

.border-color {
    border-color: #ddd;
}

.form-control:focus {
    /*color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #66afe9;*/ /* change this to match Bootstrap 3 */
   /* outline: 0; */
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); /* change this to match Bootstrap 3 */
}

.form-control {
    font-size: var(--bs-body-font-size);
}

.has-success .form-control-feedback {
    color: #3c763d;
}

.text-info {
    color: #31708f !important;
}

/* to hide the caret after drop down*/
.nav-link.dropdown-toggle::after {
    display: none;
}


.btn-primary {
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #2e6da4;

    --bs-btn-active-bg: #286090;
    --bs-btn-active-border-color: #204d74;

    --bs-btn-hover-bg: #286090;
    --bs-btn-hover-border-color: #204d74;

    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
}

/* form-group is dropped from BS5 onwards.
Following is a corresponding modification. 
    Alternatively mb-3 also can be used in BS5.
*/
.form-group {
    margin-bottom: 1rem !important;
}

.input-group-text {
    font-size: var(--bs-body-font-size);
}

.input-group-text.glyphicon {
    top: 0px;
}

:root {
    --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-tertiary-bg: #eee;
    --bs-border-radius: 4px;
}

/* Following class id is defined in existing 'login.css'
Here we are over-ridding the margin value which was only applicable for mid and above screen
size in existing definition.
*/
#login {
    margin: 5em 0;
}

.btn-block {
    width: 100%;
}

.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-nav-link-padding-x: 1rem;
}

.btn {
    --bs-btn-font-size: var(--bs-boxy-font-size);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    text-indent: 20px;
    margin-left: -20px;
}

.checkbox > label {
    padding-left:20px;
}

.card-footer {
    padding: 10px 15px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.custom-well {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    padding: 10px;
    row-gap: 1rem;
}

.white-btn {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color:#fff;
}

.no-padding {
    padding: 0 !important;
}

.padding-options {
    padding: 0.5rem;
}

.bg-light-dark-2 {
    background-color: #eee;
}

.static-para {
    margin-bottom: 0rem;
}

.h4-bs5 {
  font-size: 1rem;
}

.align-items-center {
  align-items: center;
}

.sa-input-error.show {
  display: block !important;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
}

/*
  The following css stylings are for contextual menu to work in bootstrap5
*/
.open > .dropdown-menu {
  display: block; /* The dropdown-menu does not have display:block in bs5*/
}

.open > .dropdown-menu > li {
  font-size: 0.85rem;
  cursor: pointer;
}

.open > .dropdown-menu > li:hover {
  background-color: lightgray;
}

.open > .dropdown-menu > li > a {
  text-decoration: none;
  display:block; /*This helps to make the entire row clickable in menu*/
}

.open > .dropdown-menu > .disabled {
  pointer-events: none;
  opacity: 0.50;
}

.open > .dropdown-menu > .divider {
  height: 1px;
  background-color: #ccc;
}
/* Bootstrap5 specific CSS for contextual-menu ends here */