:root {
    --jr-primary-color: #07a287;
    --jr-secondary-color: #018e76;
    --jr-white-color: #ffffff;
    --jr-default-color: #212529;
    --iqon-theme-color:#002E46;
    --iqon-theme-colorhover:#001E2E;
    --blue: #324cdd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #ec0c38;
    --orange: #fd7e14;
    --yellow: #fa3a0e;
    --green: #2dce89;
    --teal: #00A9A2;
    --cyan: #11cdef;
    --white: #fff;
    --gray: #f7fafc;
    --gray-dark: #333333;
    --primary: #7571f9;
    --secondary: #9097c4;
    --success: #6fd96f;
    --info: #4d7cff;
    --warning: #f29d56;
    --danger: #ff5e5e;
    --light: #f8f9fa;
    --dark: #001524;
}



body {
    margin: 0 0 30px 0;
}

.jr-body, .jr-nav-dropdown-menu, .jr-modal-title, .jr-btn-secondary, .jr-name, .jr-form-control, .jr-form-select, .jr-btn {
    font-size: 13px;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-dark .navbar-toggler {
    border: none;
}

.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .jr-name  {
    color: var(--jr-white-color);
}

.navbar-dark .navbar-nav .nav-link.active {
    font-weight: bold;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    background: var(--jr-secondary-color);
}

.jr-nav-dropdown-menu, .jr-nav-dropdown-item {
    background: var(--jr-secondary-color);
    color: var(--jr-white-color);
}

.jr-nav-dropdown-item:hover, .jr-modal-header {
    background: var(--jr-primary-color);
    color: var(--jr-white-color);
}

.jr-modal-content a {
    color: var(--jr-default-color);
    text-decoration: none;
}

h6 {
    margin-bottom: 0;
}

.jr-bg {
    background: var(--jr-primary-color);
}

.jr-avatar {
    max-width: 40px;
}

.jr-btn, .jr-btn-secondary {
    border: transparent;
}

.jr-btn-secondary {
    background: var(--jr-primary-color);
}

.jr-btn-secondary:hover, .jr-btn-secondary:focus, .jr-btn-secondary:active:focus {
    background: var(--jr-secondary-color);
    border: transparent;
    box-shadow: none;
}

.jr-form-control:focus, .jr-form-select:focus, .jr-form-check-input:focus, input[type="date"]:focus-visible, input[type="time"]:focus-visible, .form-control[type=file]:focus, .form-control[type=file]:focus-visible {
    border-color: var(--jr-secondary-color);
    box-shadow: 0 0 0 0.25rem rgb(1 142 118 / 25%);
}

.jr-border {
    border: 1px solid var(--jr-primary-color);
}

.jr-border-secondary {
    border-color: var(--jr-primary-color);
}

.jr-form-check-input {
    border: 1px solid rgba(1, 142, 118, 1);
}

.jr-form-check-input:checked {
    background-color: var(--jr-primary-color);
    border-color: var(--jr-primary-color);
}

.jr-form-select, .jr-form-control {
    border: 1px solid var(--jr-primary-color);
}

input[type="date"], input[type="time"] {
    border: 1px solid var(--jr-primary-color);
    border-radius: 0.25rem;
    padding: .375rem .75rem;
}

input[type="date"]:focus-visible, input[type="time"]:focus-visible, .form-control[type=file]:focus-visible {
    outline: 0;
}

.form-control[type=file] {
    border: 1px solid rgba(1, 142, 118, 1);
}

.jr-footer {
    margin-top: 80px !important;
    padding: 25px !important;
    bottom: 0;
    position: relative !important;
}

.jr-copyright {
    color: var(--jr-white-color);
    text-align: center;
}

 
.form-label { 
    margin-top: 5px !important;
    margin-bottom: 1px !important;
}
.btn{
    margin: 5px !important;
    border-radius: 3px !important;
    min-width: 100px !important;
}

ul.pagination>li {
    margin-left: 3px !important ;
    margin-right: 3px !important ;
}
.span-button-edit{
    font-size: 9px; background-color: orange;color:white; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; cursor: pointer; border-radius: 3px;
}.span-button-remove{
    font-size: 9px; background-color: red;color:white; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; cursor: pointer; border-radius: 3px;
}
.margin-left-10{
    margin-left: 10px !important;
}

input.form-control.input-sm.input-small.input-inline {
    height: 30px !important;
}
select.form-control.input-sm.input-xsmall.input-inline{
    height: 30px !important;
}
/* html,
body {
  height: 100%  !important;
} */
.my-1 {
    margin-top: 0px !important;
    margin-bottom: 0.25rem!important;
}
.required-input{
    color: red !important;
}
.select2-container--default .select2-selection--single { 
    height: 33px !important;
}
select.form-control.input-sm.input-xsmall.input-inline {
    font-size: 12px !important;
}
input.form-control.input-sm.input-small.input-inline {
    font-size: 12px !important;
}

table.dataTable thead th, table.dataTable thead td {
      padding: 8px !important;
}
table.dataTable tbody th, table.dataTable tbody td {
      padding: 8px !important;
}
.fa-btn{
    cursor: pointer;
}
.hide{
    display: none !important;
}
.show{
    display: block !important;
}
select.select2-hidden-accessible { 
    position: inherit !important; 
}
.container-fluid.jr-bg {
    background: #27394F !important;
}
.jr-nav-dropdown-menu, .jr-nav-dropdown-item {
    background: var(--jr-secondary-color);
    color: var(--jr-white-color);
    background: #27394F !important;
}
a.dropdown-item.jr-nav-dropdown-item:hover {
    color: green !important;
}
.btn-light {
    background: darkgray !important;
    color: white !important;
}
.btn-light:hover {
    background: darkgrey !important;
}

.jr-border-x{
    border: 1px solid #07a287 !important;
        margin-top: 30px !important;
}
 
.jr-border{
    border: 1px solid white !important;
}
.jr-form-control {
    border: 1px solid #aaa !important;
}
.jr-form-select, .jr-form-control {
    border: 1px solid #aaa !important;
}
input[type="date"], input[type="time"] {
    border: 1px solid #aaa !important;
}

.btn-success{
    background: #27394F !important;
}
select.select2-hidden-accessible {
    /*position: absolute !important;*/
    margin-top: -5px !important;
}

.select2-container{
    width: 100% !important;
}

.jr-nav-dropdown-item:hover, .jr-modal-header {
    background: #27394F !important; 
}

.hr-divider{
            width: 100%; 
            text-align: center; 
            border-bottom: 1px solid rgb(230,230,230); 
            line-height: 0.1em;
            font-size: 14px;
} 
.hr-divider span { 
            background: white; 
            padding:0 10px; 
}
#classrec-table td{
    border: 1px solid black;
}
#classrec-table th{
    border: 1px solid black;
}

.shaded-fel{
    background-color: rgb(180, 180, 180);
}
.gho-hover-table:hover{
    background-color: #cfe3fa;
}
.gho-btn-save{
    background-color: #3387b7 ;
    color: white;
}
.gho-btn-update{
    background-color: #f0e181 ;
    color: black;
}
.gho-btn-update:hover, .gho-btn-save:hover, .gho-btn-delete:hover{
    background-color: #cfe3fa;
    color: black;
}
.gho-btn-delete{
    background-color: #f08181 ;
    color: white;
}

/* LOADER ON DASHBOARDS */
        .loader-overlay {
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .lds-ring {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }

        .lds-ring div {
            box-sizing: border-box;
            display: block;
            position: absolute;
            width: 64px;
            height: 64px;
            margin: 8px;
            border: 8px solid #3498db;
            border-radius: 50%;
            animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            border-color: #3498db transparent transparent transparent;
        }

        @keyframes lds-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        /* LOADER ON DASHBOARDS */

.gho-tbl-icon{
  
    background-color: #d15854;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 5px;
}

.gho-tbl-icon i{
    color: white !important;
   
}

.notificationKeyIndex {
  color: green;
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notificationKeyIndex .ghoBadge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;

}

.fatherMotherShow {
 display: none !important;

}
.tbl-btn-viewgho{
    cursor: pointer;
    background-color: #edf1fc;
    border:  1px solid grey;
}
.tbl-btn-viewgho:hover{
    background-color: #dedefc !important;
}


/* Tooltip text */
.gho-tooltiptext {
    visibility: hidden;
  opacity: 0;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
    border:  1px solid grey;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.gho-tooltip:hover .gho-tooltiptext {
    visibility: visible;
    
    opacity: 1;
  transition: opacity  0s linear .6s;
}

.gho-select{
    background-color: #f5f5ff !important;
    font-size: 12px !important;
}
.gho-select:focus{
    background-color: #e0ecff !important;

}

.gho-input{
    background-color: #f5f5ff !important;
    font-size: 12px !important;
}
.gho-input:focus{
     background-color: #e0ecff !important;

}
.gho-link-button{
    text-decoration: none;
}
.gho-link-button:hover{
    color: red !important;
}

.select2-container--default .select2-selection--single{
    background-color: #f5f5ff !important;
    font-size: 12px !important;
}
.select2-container--default .select2-selection--single:focus{
    background-color: #e0ecff !important;

}
.select2-search__field{
    background-color: #e0ecff !important;
    font-size: 11px !important;
}
.select2-results { 
    background-color: #e0ecff !important;
    font-size: 11px !important;
    padding: 1px !important;
    margin: 0;
}

.alertify-notifier .ajs-message.ajs-warning{
    color: black !important;
    background: #abdbe3 !important;

}

.header-title-box{
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: groove;
  background-color: #eee;
}
.header-title-box:focus{

   background-color: #cde2f7;

}

.gho-modal-overlay{
    background-color: rgba(0, 0, 0, 0.72) ;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
   
}

.gho-modal-form{
    background-color: rgba(255, 255, 255, 1) ;
    z-index: 5;
  
}

.gho-hover:hover{
    color: red !important;

  
}
.alertify-notifier .ajs-message.ajs-warning{
    color: black !important;
    background: #abdbe3 !important;

}
.shadow-boxer{
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px !important;
}

.shadow{
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px !important;
}
/* for application state mode */
.mode-msg {
    position: sticky;
    top: 0;
    left: 1px;
    z-index: 0;
    background: #053853fc !important;
}
/* for application state mode */