/*=================================================================================================*/
/*  KP BRAND STYLING                                                                               */
/*  1.0 Variables                                                                                  */
/*    1.1 Color                                                                                    */
/*  2.0 General                                                                                    */
/*  3.0 Typography                                                                                 */
/*  4.0 Header                                                                                     */
/*  5.0 Panels                                                                                     */
/*=================================================================================================*/



/*=================================================================================================*/
/*  1.0 Variables                                                                                  */
/*=================================================================================================*/

/*1.1 COLOR*/
body {
    --kp-blue: #1741A0;
    --kp-violet: #5A2A70;
    --kp-light-blue: #049BE7;
    --kp-dark-blue: #0D2660;
    --kp-medium-blue: #1741A0;
    --kp-slate: #111026;
    --kp-gray: #363739;
    --kp-cerulean-blue: #2E51B9;
    --kp-blue-green: #007185;
    --kp-light-grey: #cecece;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    color: var(--kp-gray) !important;
}

/*=================================================================================================*/
/*  2.0 General                                                                                    */
/*=================================================================================================*/

html, body {
    height: 100%;
}

a {
    color: var(--kp-blue-green);
}

a:hover, a:focus {
    color: var(--kp-blue-green);
}

.ejs a:hover, a:focus {
    color: var(--kp-blue-green);
}

input[type=text] {
    /*border-radius: 1.5em !important;*/
}

/*=================================================================================================*/
/*  3.0 Typography                                                                                 */
/*=================================================================================================*/

h1, .ejs h1 {
    color: var(--kp-slate);
    font-size: 27px;
    font-weight: bolder;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

h2, .ejs h2 {
    color: var(--kp-slate);
    font-size: 23px;
    font-weight: bold;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

h3 {
    color: var(--kp-slate);
    font-size: 21px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;

}

.ejs h3 {
    color: var(--kp-slate);
    font-size: 21px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;

}

h4 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

.ejs h4 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

h5 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

.ejs h5 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

h6 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

.ejs h6 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

h7 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

.ejs h7 {
    color: var(--kp-slate);
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 18px;
}

/*=================================================================================================*/
/*  4.0 Header                                                                                     */
/*=================================================================================================*/

.navbar .nav > li.current > a {
    font-weight: 500 !important;
    box-shadow: inset 0 -5px 0 0 #fff !important;
    -webkit-box-shadow: inset 0 -5px 0 0 #fff !important;
}

.navbar .nav > li > a {
    text-shadow: 0px 0px 0 rgba(0,0,0,0);

}

header#main-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 210;
}

.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    min-width: 0;
}

header#main-header .banner {
    padding: 6px 30px !important;
    background: var(--kp-dark-blue) !important;
}

header#main-header .container {
    max-width: none !important;
}

header#main-header .badge-success {
    background-color: #57B856;
}

header#main-header .badge-success:hover,
header#main-header .badge-success:focus {
    background-color: #439942;
}

#main-header .banner .span8 {
    display: flex;
    float: none;
    justify-content: flex-end;
    flex-grow: 1;
    width: auto;
}

#main-header > .banner .row-fluid {
    display: flex;
    align-items: center;
}

#main-header > .banner .row-fluid > #app-nav {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    margin-right: 10px;
    margin-top: -10px;
}

#main-header > .banner .row-fluid > #app-nav .nav {
    display: none;
    margin: 0;
}

#main-header > .banner  .row-fluid > #app-nav .nav > li > a {
    color: white;
    font-family: "Poppins", "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
    margin-right: 5px;
    padding: 5px;
    border-radius: 5px;
}

#main-header > .banner  .row-fluid > #app-nav .nav > li > a:hover,
#main-header > .banner  .row-fluid > #app-nav .nav > li > a:focus {
    box-shadow: 0 0 0 6px rgba(0,0,0,0.3);
    background-color: rgba(0,0,0,0.3);
}

#main-header > .banner  .row-fluid > #app-nav .nav > li > a.dropdown-toggle b {
    border-top-color: white;
    border-bottom-color: white;
}

#main-header > .banner  .row-fluid > #app-nav .nav > li.dropdown.open > a.dropdown-toggle + .dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
}

#main-header > .banner  .row-fluid > #app-nav .nav > li.dropdown.open > a.dropdown-toggle + .dropdown-menu > li > a {
    color: #028ED4;
    font-family: "Poppins", "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
}

#main-header > .banner  .row-fluid > #app-nav .nav > li.dropdown.open > a.dropdown-toggle + .dropdown-menu > li > a:hover,
#main-header > .banner  .row-fluid > #app-nav .nav > li.dropdown.open > a.dropdown-toggle + .dropdown-menu > li > a:focus {
    color: #0074AD;
}

.mobile-menu-icon {
    display: flex !important;
    float: right;
    justify-content: center;
    align-items: center;
}
/* Logo */
.brand {
    display: block;
    width: 260px;
    margin-top: -1.3em;
    margin-left: -1em;

}

.brand img {
    height: 80px !important;
}


.menu-open #app-nav ul.nav {
    display: flex !important;
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 210;
    background-color: var(--kp-dark-blue);
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start;
    margin-top: 70px !important;
    padding-left: 20px;
    overflow: auto ;
    overflow-y: hidden !important;
}

.menu-open #app-nav ul.nav > li.open {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-open #app-nav ul.nav > li.open ul.dropdown-menu {
    position:static !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin: 0 0 0 0 !important;

}

.menu-open #app-nav ul.nav > li.open ul#admin_drop_options {
    margin: 0 0 0 0 !important;
}

.menu-open #app-nav ul.nav ul.dropdown-menu li {
    border: none !important;
}

.menu-open #app-nav ul.nav ul.dropdown-menu li > a {
    margin-bottom: 20px !important;
    font-size: 16px !important;
    color: #fff;
}


#main-header > .banner  .row-fluid > #app-nav .nav > li.dropdown.open > a.dropdown-toggle + .dropdown-menu > li > a {
    color: #fff;
    font-family: "Poppins", "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
}

#app-nav .nav > li > a {
    margin-bottom: 20px !important;
    font-size: 16px !important;
}

#main-header > .banner .row-fluid > #app-nav .nav {
    display: none;
    margin: 0;
    padding-top: 20px;
}
#main-header > .banner .row-fluid > #app-nav .nav {

}
#main-header > .banner  .row-fluid > #app-nav .nav > li.dropdown.open > a.dropdown-toggle + .dropdown-menu > li > a {
    color: #028ED4;
}

#recurring-events-sidebar.fixed {
    max-width: 250px !important;
}
.assessment-tasks a.progress-circle div {
    padding-top: 0px !important;
    padding-left: 0px !important;

}
/* Mobile Menu */
body.menu-open #select-assessor-btn,
#user-menu-open.menu-open {
    z-index: 1 !important;
}

@media only screen and (max-width: 600px) {

    h1, .ejs h1 {
        font-size: 24px !important;
        padding: 1em 0 .5em 0 !important;
    }

    #main-header > .banner .row-fluid > #app-nav {
        margin-top: 8px !important;
    }
    .menu-open #app-nav ul.nav > li.open {
        align-items: flex-start !important;
        overflow-y: scroll;
        min-height: 200px;

    }

    .user-menu-name {
        display: none !important;
    }
    .menu-open {
        overflow-y: hidden !important;
    }

    .well.no-dashboard-notices {
        margin-top: 2.5em !important;
    }

    .previous-notices {
        margin-top: 0px !important;
        margin-bottom: 1em !important;
    }
    ul.nav.nav-tabs {
        margin-top: 2.5em !important;
    }
    .entrada-search-widget {
        display: flex !important;
    }
    .entrada-search-widget > input.input-large {
        width: 100% !important;
    }

    #filter_dates {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    #filter_dates > div {
        width: 100% !important;
    }

    #filter_dates > div > select.input-medium {
        width: 100% !important;
        border-radius: 1.5em;
        margin-top:.5em !important;


    }

    #filter_dates > span.delivery {
        width:100% !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        margin-top:.5em !important;
    }

    #filter_dates > span.delivery  div {
        display: flex;
        width: 100% !important;
        margin-left: 0px !important;
        margin-top: .5em !important;
    }

    #filter_dates > span.delivery  div > input {
        width: 100%;
        margin-bottom: .5em !important;


    }
    #apply_filters, #remove_filters {
        width: 100%;
        margin: .5em 0 .5em 0 !important;
    }

    /* Assessment Tools */
    #select-assessor-container > div:not(:first-child) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #select-assessor-container > label {
        text-align: start !important;
    }

    #select-assessor-container > .entrada-search-widget {
        width: 100%  !important;
        margin-left: 0px !important;
    }

    #select-assessor-container > .entrada-search-widget > .btn-search-filter {
        width: 100% !important;
    }

    #select-assessor-container >  #disabled-controls > .disabled-overlay > span {
        margin-top: 164px !important;
    }

    #assessment-tool-form >  #disabled-controls > .control-group,
    #assessment-tool-form  #date-of-encounter-container{
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }
    #external-assessors-controls[class='control-group'] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }
    #assessment-tool-form >  #disabled-controls > .control-group > label,
    #assessment-tool-form  #date-of-encounter-container > label,
    #external-assessors-controls > label {
        text-align: start !important;
        width: 100% !important;

    }
    #assessment-tool-form  #date-of-encounter-container > .controls,
    #assessment-tool-form  #date-of-encounter-container > .controls > input  {
        width: 100%;
    }

    #assessment-tool-form >  #disabled-controls > .control-group > .controls,
    #external-assessors-controls > .controls ,
    #external-assessors-controls > .controls input {
        width: 100%  !important;
        margin-left: 0px !important;
        border-radius: 1.5em !important;
        margin-bottom: 6px !important;
    }
    #assessment-tool-form  #course-selector{
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

    }
    #assessment-tool-form  #date-of-encounter-container > .controls,
    #assessment-tool-form .entrada-search-widget{
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        margin-left: 0;

    }

    #assessment-tool-form  #course-selector > label {
        text-align: start !important;
    }

    #assessment-tool-form  #course-selector > .controls {
        width: 100% !important;
        margin-left: 0px !important;
    }

    #assessment-tool-form  #course-selector > .controls > select {
        width: 100% !important;
        border-radius: 1.4em;
        border: 0;
        outline: 1px solid #d9dee2 !important;
        border-right: 10px solid transparent !important;

    }



}

@media (min-width: 600px) {

    .mobile-menu-icon {
        display: flex !important;
    }

    .brand {
        margin-bottom: 0px !important;
    }

    .brand img {
        padding-top:10px !important;
    }
    .welcome-area {
        margin-bottom: 10px;
    }

    #main-header > .banner .row-fluid {
        display: flex;
        align-items: center;
    }

    .menu-open #app-nav ul.nav {
        display: flex !important;
        align-items: flex-start !important;
        padding-left: 20px;
        margin-top: 8px !important;
        align-items: center !important;
    }

    .menu-open #app-nav ul.nav > li.open {
        overflow-y: scroll;
        min-height: 200px;

    }
    .menu-open {
        overflow-y: hidden !important;
    }


}

@media (min-width: 800px) {
    .mobile-menu-icon {
        display: flex !important;
    }
    .menu-open #app-nav ul.nav {
        display: flex !important;
        align-items: center !important;
        padding-left: 20px;
        align-items: flex-start;
        padding-left: 20px;
    }
}

@media (min-width:1320px) {
    .mobile-menu-icon {
        display: none !important;
    }
    #app-nav .nav > li > a {
        margin-bottom: 20px !important;
        font-size: 16px !important;
    }

    #main-header > .banner .row-fluid > #app-nav .nav {
        display: flex !important;
    }

    .menu-open #app-nav ul.nav {
        display: none !important;
    }
}


.banner__inactive-blue {
    background: #0D2660;
}
header#main-header .navbar {
    border: 0px;
}
header#main-header .navbar .navbar-inner {
    background-color: var(--kp-dark-blue) !important;
    float: right !important;
}


.banner__inactive {

}

.banner__inactive-wrapper {
    max-width: 1236px !important;
    margin-left: auto;
    margin-right: auto;
}
.site-header {
    height: 60px;
    padding: 10px 0;
    position: relative;
    /*background-color: rgba(47,85,114,.3) !important;*/
    width: 100%;
    z-index: 2;
    -webkit-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;


}

.site-header__logo {
    position: absolute;
    top: 0;
    left: 40%;
    padding: 14px 14px 0px 14px !important;
    -webkit-transform: translateX(-50%) scale(.8);
    transform: translateX(-50%) scale(.8);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}

.kp-logo {

}

.banner__login-wrapper .login-form {
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: center;
}

.userAvatar {
    border: 2px solid #cfe8ef !important;
}
/*=================================================================================================*/
/*  5.0 Hero                                                                          */
/*=================================================================================================*/

.wrapper-fixed {
    overflow: hidden;
    padding-left: 18px;
    padding-right: 18px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1236px !important;
}

.large-hero {
    border-bottom: 10px solid var(--kp-dark-blue);
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.large-hero h1 h2 {
    color: #fff !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,.1) !important;
}
.large-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(128,128,128,0.75);*/
    background-color: rgba(0,0,0,.6);
}
.large-hero__image {
    display: block;
}

.large-hero__icon {
    width: 56px;
    height: 56px;
    border-radius: 56px;
    background-color: rgba(255,255,255,.3);
    display: inline-block;
    padding: 13px;
    color: #fff;
    font-size: 28px;
}

.large-hero__icon::before {
    content: "\e918";
}

.large-hero__text-content {
    padding-top: 88px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform:translateY(-50%);
    left: 0;
    width: 100%;
    text-align: center;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    a.brand {
        margin-bottom: 0px !important;
    }
    a.brand > img.kp-logo {
        margin-top: 20px !important;
    }
    header#main-header {
        position: absolute !important;
    }
    .large-hero__title {
        font-size: 1rem !important;
        color: #fff !important;
        margin-top: .1rem !important;
        margin-bottom: .1rem !important;

    }
    .large-hero__description {
        line-height: 1.3rem !important;
        padding-bottom: 5px;
        font-size: .85rem !important;
    }

    .inner-content__inactive  #login-form-wrapper {
        display: flex;
        flex-direction: column !important;
    }

    .inner-content__inactive #login-form-wrapper  .span4 {
        width:100% !important;
    }

    .login-card__fixed {
        position: static !important;
        top: auto !important;
        width: auto !important;
    }

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .large-hero__text-content {
        padding-top: 20px !important;
    }
    .large-hero__title {
        font-size: 2rem !important;
        color: #fff !important;
        margin-top: .1rem !important;
        margin-bottom: .1rem !important;

    }
    .inner-content__inactive  #login-form-wrapper {
        display: flex;
        flex-direction: row !important;
    }
    .large-hero__description {
        line-height: 1.3rem !important;
        padding-bottom: 5px;
        font-size: .85rem !important;
    }

    .login-card__fixed {
        position: static !important;
        top: auto !important;
        width: auto !important;
    }

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .large-hero__text-content {
        padding-top: 20px !important;
    }
    .large-hero__title {
        font-size: 1.5rem !important;
        color: #fff !important;
        margin-top: .1rem !important;
        margin-bottom: .1rem !important;

    }
    .large-hero__description {
        line-height: 1.3rem !important;
        padding-bottom: 5px;
        font-size: 1rem !important;
    }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .large-hero__title {
        font-size: 2rem !important;
        color: #fff !important;
        margin-top: .1rem !important;
        margin-bottom: 1rem !important;

    }
    .large-hero__description {
        line-height: 2rem !important;
        padding-bottom: 5px;
        font-size: 1.5rem !important;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

@media (min-width: 800px) {
    .large-hero__text-content {
        padding-top: 60px;
    }

    /*.large-hero__title {*/
    /*    font-size: 4em !important;*/
    /*    margin: .2rem 0 .5rem 0 !important;*/
    /*    font-weight: 300;*/
    /*    color: #fff;*/
    /*    margin: 0;*/
    /*    text-shadow: 2px 2px 0 rgba(0,0,0,.1);*/
    /*}*/
    /*.large-hero__description {*/
    /*    color: #fff;*/
    /*    font-size: 1.5rem;*/
    /*    font-weight: 100;*/
    /*    text-shadow: 2px 2px 0 rgba(0,0,0,.1);*/
    /*    max-width: 30rem;*/
    /*    line-height: 2rem !important;*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*}*/
}


@media (min-width: 530px) {

    /*.large-hero__title {*/
    /*    font-size: 2.2rem !important;*/
    /*    color: #fff !important;*/
    /*}*/
}

.large-hero__subtitle {
    font-weight: 300;
    color: #2f5572;
    font-size: 1.5rem;
    margin: 0;
}

@media (min-width: 530px) {

    /*.large-hero__subtitle {*/
    /*    font-size: 2.9rem*/
    /*}*/
}

.large-hero__description {
    padding-top: 8px !important;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 100;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 530px) {

    /*.large-hero__description {*/
    /*    font-size: 1.5rem !important;*/
    /*}*/
}

/*=================================================================================================*/
/*  5.0 Panels                                                                                     */
/*=================================================================================================*/

.panel-head {
    /*background-color: var(--kp-blue);*/
}

#page-feedback .panel-head {
    background: var(--kp-blue);
}

/*=================================================================================================*/
/*  6.0 Communities                                                                                     */
/*=================================================================================================*/

h4.categ-title {
    color: var(--kp-violet);
    font-size: 13px;
}

.ejs h4.categ-title{
    color: var(--kp-violet);
    font-size: 13px;
}

/*=================================================================================================*/
/*  7.0 Common                                                                                    */
/*=================================================================================================*/

.display-generic {
    /*    background-color: #D9EDF7;
        border: 1px solid #bfdcea;*/
    color: var(--kp-dark-blue);
}

table th {
    /*color: var(--kp-slate);*/
}


/*=================================================================================================*/
/* Logout */
/*=================================================================================================*/
a.log-out{
    color: #fff;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 0;
    padding: 8px 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius:    4px;
    border-radius:         4px;
    -webkit-transition: .2s;
    -moz-transition:    .2s;
    -o-transition:      .2s;
    transition:         .2s;
}

a.log-out:hover,
a.log-out:focus {
    text-decoration: none;
    color: #fff;
    background-color: var(--kp-violet);
}

a.log-out:active,
a.log-out:focus:active {
    text-decoration: none;
    color: #fff;
    background-color: #437530;
}

#content.custom {
    height:100vh !important;
    padding: 0px;

}

#content.custom > .inner-content {
    /*background: #e8edf1 !important;*/
}

.inner-content__inactive {
    background: #e8edf1 !important;
    border: none !important;
    color: #000 !important;
    max-width: 1236px !important;

}
.inner-content__inactive .button-wrapper {
    flex: 1 !important;
}

.inner-content__inactive .button-wrapper > input {
    width: 100%;
}
.inner-content__inactive  h2 {
    color: #000 !important;
}

/*=================================================================================================*/
/* Login */
/*=================================================================================================*/
#login {
    height: 100%;

}
#login-form-wrapper {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row !important;
    padding: 0px;
}
#login-form-wrapper > .span4 {
    padding: 1.5em;
}

#login-form-wrapper > .span8 {
    height: 100vh;
    width: 100%;
    /*background-image: url("../images/school-interior-3200x1580-1-scaled.jpeg");*/
    background-repeat: no-repeat;
    background-size: auto;
}
#login-form-wrapper .btn {
    border-radius: 2em !important;
}

#login-form-wrapper input {
    border-radius: 2em !important;
}

.login-form .login-actions input[type=submit]:focus {
    transform: scale(1) !important;
}

#login-form-wrapper .sso-login-link {
    width: 100%;
    margin-top: 1em !important;
}

.login-card.login__inactive-wrapper {
    border: 1px solid #e8edf1;
    border-radius: 12px !important;
    padding: 1em 1em !important;
    background: #fff !important;
}
.login-card.login__inactive-wrapper input {
    box-shadow: none !important;
}
.login-card.login__inactive-wrapper.login-sso {
    flex-direction: column !important;
}
.login-card.login__inactive-wrapper.login-sso  .button-wrapper {
    padding-bottom: 1.3em !important;
}


#login-form-wrapper > .login__inactive-wrapper  .login-card {
    padding: .5em 0;
    box-shadow: none !important;

}


#login-form-wrapper .span4 {
    padding: 0px !important;
}

#login-form-wrapper > .notices__inactive-wrapper {
    padding-right: .8em !important;
}
#login-form-wrapper > .notices__inactive-wrapper  .notice-card{
    box-shadow: none !important;
    border: 1px solid #e8edf1;
    border-radius: 12px;
    background: #fff !important;
    margin-bottom: 1.5em !important;
}

#login-form-wrapper > .notices__inactive-wrapper  .notice-card:first-child {
    border-radius: 12px 12px 12px 12px !important;
}

#login-form-wrapper > .notices__inactive-wrapper  .notice-card:last-child {
    border-radius: 12px 12px 12px 12px !important;
}

#login-form-wrapper > .notices__inactive-wrapper  .notice-card  h2 {
    margin-top: 5px !important;
    border-bottom: 3px solid var(--kp-blue-green);
}


.login-card__fixed {
    position: fixed;
    width: 231px;
    top: 80px;
}
/*=================================================================================================*/
/* Sidebar */
/*=================================================================================================*/
#sidebar {
    width: 75% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    background-color: #fff !important;
    box-shadow: none;
    border-right: 1px solid var(--kp-light-grey);
    box-shadow: none !important;

}
#sidebar-toggle {
    margin-right: -10px !important;
}

#sidebar-toggle > .fa {
    margin-left: 16px !important;
}
#sidebar > .inner-sidebar > .panel {
    border: none;
}

.grid-sidebar {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
}

.grid-sidebar > #content {
    padding: 30px 0 !important;
}
.panel-head {
    background-color: transparent !important;
}


.panel-head > h3 {
    color: #17323b !important;
    border-bottom: 1px solid #17323b !important;
    font-weight: bolder !important;
    font-size: 1em !important;
}

/*=================================================================================================*/
/* Buttons */
/*=================================================================================================*/
.btn {
    border-radius: 1.5em !important;
}

.input-append, .input-prepend {
    margin-bottom: 0 !important;
}
.input-append > input {
    border-top-left-radius: 1.5em !important;
    border-bottom-left-radius: 1.5em !important;
}
.input-append > #search-button ,
.input-append > button.btn,
.input-append > a.btn {
    border-radius: 0 1.5em 1.5em 0 !important;
}

.input-append > span.add-on:last-child{
    border-top-right-radius: 1.5em !important;
    border-bottom-right-radius: 1.5em !important;
}

.input-append.space-right > input.input-large {
    border-radius: 1.5em !important;
}

.btn-group >a.btn.dropdown-toggle {
    border-radius: 1.5em !important;
}
.btn-group > .btn,
ul.nav.nav-tabs.rounded > li > a[data-toggle="tab"] {
    border-radius: 0 !important;
}


.btn-group > a.btn:first-child,
ul.nav.nav-tabs.rounded > li:first-child > a[data-toggle="tab"]:first-child {
    border-top-left-radius: 1.5em !important;
    border-bottom-left-radius: 1.5em !important;
}

div.btn-group > .btn:last-child,
ul.nav.nav-tabs.rounded > li:last-child > a[data-toggle="tab"]:last-child{
    border-top-right-radius: 1.5em !important;
    border-bottom-right-radius: 1.5em !important;
}

button.btn.dropdown-toggle {
    border-top-right-radius: 1.5em !important;
    border-bottom-right-radius: 1.5em !important;

}

.entrada-search-widget > input#form-search,
.entrada-search-widget > input#item-search {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.btn-group .btn:first-child {
    border-top-left-radius: 1.5em !important;
    border-bottom-left-radius: 1.5em !important;
}
#remove_filters, #apply_filters, #change-faculty-card-visibility {
    margin-top: -3px !important;
}
/*=================================================================================================*/
/* Label */
/*=================================================================================================*/
#dateRow #cEvent_text {
    margin-bottom: 0px !important;
}

/*=================================================================================================*/
/* Links */
/*=================================================================================================*/
a.task-tab {
    border-radius: 1.5em !important;
}

ul.nav.nav-pills > li > a {
    border: 1px solid #d9dee2;
    border-radius: 0 !important;
}
/*=================================================================================================*/
/* Admin drop down */
/*=================================================================================================*/
#admin_tab > ul#admin_drop_options {

}

#admin_tab > ul#admin_drop_options.two-column {
    columns: 2;
    margin: 0em 0 0 -300px !important;

}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 102px;
}

form#event_attendance_form {
    margin: 0 10px 0 0 !important;
}

form#event_attendance_form .disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
    background-color: #ecf0f3 !important;
    border: 1px solid #d9dee2 !important;
    color: #8b959d !important;
    cursor: not-allowed;
    opacity: 1;

}

/* Learner response report styles */

.response-form {
    padding-top: 1em;
}
.response-options {
    font-size: medium;
    
}
.response-options input {
    margin: 0px 10px 0 0 !important;
}

#autocomplete-list-container a:hover {
    color: black;
}
#autocomplete-list-container .ui-menu .ui-menu-item-wrapper {
    padding: 0 !important;
}
#autocomplete-list-container .course-auto-details {
    margin: 5px 5px;
}

#autocomplete-list-container .ui-state-active {
    /* Override styles to make it a no-op */
    background: none !important;
    border: none !important;
    color: inherit !important;
    transition: none !important;
    /* Include any other properties that might cause issues */
  }


div.selector-documents{
    display: flex !important;
}

button.btn-present.active {
    background-color: #007bff !important;  /* Blue background */
    color: white !important;               /* White text */
    border-color: #007bff !important;      /* Blue border */
  }
  
button.btn-absent.active {
    background-color: #dc3545 !important;  /* Optional: Red for Absent */
    color: white !important;
    border-color: #dc3545 !important;
  }