/*
Site specific styles.
*/
/* 
    Created on : 8-May-2017, 4:13:06 PM
    Author     : tangle
*/
body,
html {
    background-color: #2a2d3c;
    font-family: "Roboto Condensed";
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Roboto Condensed";
}

.well h3,
.well h2,
.well h1,
.well h4,
.well h5,
.well h6 {
    margin-top: 0;
}

h1 {
    font-size: 40px;
}

a,
a:hover {
    color: #1e599c;
    text-decoration: none;
}

h2 {
    color: #2e4092;
    border-bottom: 2px solid #000;
    padding-bottom: 20px;
    font-weight: bold;
}

.status input {
    visibility: hidden;
    position: absolute;
}

.block {
    display: block;
    cursor: pointer;
}

/*
    LAYOUT STYLES OVERRIDES
*/

header .logout {
    border-bottom: 5px solid #2e4092;
    width: 100%;
    overflow: auto;
}

header .logout .logout-button {
    background-color: #2e4092;
    padding: 0.5em 1em;
    display: inline;
    float: right;
    text-transform: uppercase;
    color: #fff;
    margin-right: 5%;
    font-family: "Roboto Condensed";
    font-weight: 300;
}

header .logout .logout-button a {
    color: #fff !important;
    /*font-size: 20px;*/
    text-decoration: none;
}

/*.nav .logout-button {*/
/*    background-color: #2e4092;*/
/*    padding:0.5em;*/
/*}*/

header#header {
    background-color: #fff;
}

header#header nav#main-menu-navigation ul > li > a {
    background-color: #ebebeb;
}

header#header ul.system-nav {
    font-size: 20px;
    /*margin-top: 85px;*/
    margin-top: 1em;
    margin-right: -14px;
    font-family: "Roboto Condensed";
}

header#header ul.system-nav > li > a {
    color: #1e599c;
    text-decoration: underline;
}

header .bottom-bar {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d7d7d7+0,ffffff+100 */
    /*background: #d7d7d7; !* Old browsers *!*/
    /*background: -moz-linear-gradient(-45deg, #d7d7d7 0%, #ffffff 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(-45deg, #d7d7d7 0%, #ffffff 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(135deg, #d7d7d7 0%, #ffffff 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d7d7', endColorstr='#ffffff', GradientType=1); !* IE6-9 fallback on horizontal gradient *!*/
    background: #d7d7d7;
}

/*
    NAVIGATION OVERRIDES
*/
#main-wrapper .page-header {
    font-family: "Roboto Condensed";
    font-weight: bold;
    text-align: left;
    margin-top: 25px;
    border-bottom: 0;
}

#main-wrapper .page-header .btn,
#main-wrapper .page-header .btn-group > a {
    font-family: "Fjalla One";
    background-color: #ffd740;
    border: 0;
    font-size: 20px;
    color: #2e4092;
    padding: 10px 20px;
    text-decoration: none;
}

.before-heading .breadcrumb {
    margin: 30px 5% 10px;
}

#main-wrapper .page-header:after {
    content: url("../images/header-underline.png");
    clear: both;
    display: block;
}

header#header nav#main-menu-navigation ul {
    font-family: "Fjalla One";
    font-size: 1.1em;
    /*padding-top: 50px;*/
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /*width: 90%;*/
    text-align: center;
}

header#header nav#main-menu-navigation ul a {
    line-height: normal;
    padding: 10px 0;
    background-color: #ebebeb;
}

header#header nav#main-menu-navigation ul > li {
    max-width: 141px;
    /*margin-bottom: 5px;*/
}

header#header nav#main-menu-navigation ul > li > a {
    color: #2e4092;
    text-decoration: none;
}

header#header nav#main-menu-navigation ul > li.active > a {
    background-color: #fff;
}

#main-wrapper-footer {
    position: relative;
    height: 50px;
}

#main-wrapper-footer .main-logo-img img {
    width: auto;
    position: absolute;
    right: 5%;
}

footer#footer .copyright,
footer#footer .to-top > a {
}

footer#footer .users {
    margin: 5%;
}

footer#footer .users .user {
    background-color: #334095;
    display: inline-block;
    color: #fff;
    padding: 20px;
}

/*
        TABLE OVERRIDES
*/

.table tbody tr td[name="actions"] i {
    color: #000;
    font-size: 20px !important;
}

.table tbody tr td[name="actions"] a {
    text-decoration: none;
}

.table th,
.table tr {
    padding: 15px 8px !important;
}

.pagination * {
    border: 0 !important;
}

.pagination li a {
    padding: 5px;
}

.pagination li.active a,
.pagination li.active a:hover,
.pagination li.active {
    background: none;
    color: inherit;
}

/*
    FORM OVERRIDES
*/

.btn-default {
    font-family: "Fjalla One";
    background-color: #ffd740;
    color: #2e4092;
    border: 0;
    font-size: 20px;
}

.btn {
    font-family: "Fjalla One";
    font-size: 20px;
    border: 0;
}

.btn-sm {
    font-size: 12px;
}

input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
select.form-control,
input[type="text email"].form-control,
input[type="search"].form-control,
input[type="number"].form-control {
    border-radius: 0;
    border: 1px solid #1e599c;
    font-family: "Roboto Condensed";
    padding: 9px 12px;
    height: 40px;
    background-color: #fff;
}

select[multiple].form-control {
    height: auto;
}

.input-group-addon {
    border-color: #1e599c;
}

/*
    TAB NAV OVERRIDES
*/

.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:active,
.nav-tabs > li > a:focus {
    background: #e5e5e5;
    border: 0;
    /* font-size: 20px; */
    font-size: 17px;
    text-decoration: none;
    text-transform: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:active,
.nav-tabs > li.active > a:focus {
    border: 0;
    background: #f6f6f6;
}

.nav-tabs {
    border-bottom: 0;
    margin-bottom: 0;
}

.tabstack {
    margin-bottom: 20px;
}

.tab-content {
    padding: 20px;
    background: #f6f6f6;
}

/*
    CUSTOM STYLES FOR 
*/

.big-white-button {
    border: 1px solid #000;
    padding: 10px;
}

.big-white-button > .row {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.big-white-button > .row > div {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.big-white-button i {
    text-align: center;
    font-size: 4vw;
    display: block;
    margin: 0 auto;
    color: #2e4092;
}

.big-blue-button {
    border-top: 5px solid #ffd740;
    background-color: #133b68;
    color: #fff;
    font-family: "Roboto";
    width: 100%;
    margin: 0;
    padding: 20px;
    text-transform: uppercase;
    display: flex;
    display: -webkit-flex;

    /* font-size: 20px; */
}

.big-blue-button i {
    /* font-size: 3.5vw; */
    font-size: 2em;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    text-align: center;
    align-items: center;
}

.big-blue-button > div {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

div.drag-drop {
    background: #f5f9fe;
    min-height: 200px;
    display: flex;
    display: -webkit-flex;
    margin: 50px 0;
    padding: 3%;
}

div.drag-drop > div {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

div.drag-drop i {
    font-size: 10vw;
    color: #2b599f;
    margin-left: 10%;
}

div.drag-drop span {
    font-size: 20px;
}

div.service-plan {
    background: #f7f7f7;
    position: relative;
    padding: 90px;
}

div.service-plan h3 {
    background: #b0dc86;
    position: absolute;
    top: -24px;
    padding: 20px;
    color: #3c54a9;
    font-weight: 400;
    margin: 0;
    left: 20px;
}

div.service-note {
    background: #f7f7f7;
    position: relative;
    padding: 90px;
}

div.service-note h3 {
    background: #fbd71a;
    position: absolute;
    top: -24px;
    padding: 20px;
    color: #3c54a9;
    font-weight: 400;
    margin: 0;
    left: 20px;
}

div.list {
    background: #e7ecee;
    padding: 3%;
    font-size: 20px;
    margin-top: 5px;
}

div.list ul {
    margin-left: 30%;
}

.stat {
    font-size: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150px;
}

.stat > div:nth-child(1) {
    font-size: 60px;
    line-height: normal;
}

.stat > div:nth-child(2) {
    font-size: 20px;
    font-weight: 300;
    line-height: normal;
}

.notification {
}

/*

    CLIENT TAB STACK OVERRIDE STYLES
    
*/

.tabstack.client-tabs > ul {
    padding-right: 2%;
    margin-top: 100px;
    border: 0;
}

.tabstack.client-tabs > ul > li {
    width: 100%;
    background: transparent url("../images/tab-li.png");
    background-size: 100% 100%;
    margin-bottom: 2px;
}

.tabstack.client-tabs .nav-tabs > li > a,
.tabstack.client-tabs .nav-tabs > li.active > a,
.tabstack.client-tabs .nav-tabs > li > a:hover,
.tabstack.client-tabs .nav-tabs > li.active > a:hover,
.tabstack.client-tabs .nav-tabs > li > a:focus,
.tabstack.client-tabs .nav-tabs > li.active > a:focus {
    border: 0;
    text-decoration: none;
}

.tabstack.client-tabs .nav-tabs > li > a {
    border-bottom: 0;
    padding: 20px;
    background: none;
    text-transform: none;
    font-size: 20px;
}

.tabstack.client-tabs .nav-tabs > li.active {
    background: transparent url("../images/tab-li-active.png");
    background-size: 100% 100%;
}

.tabstack.client-tabs .nav-tabs > li .numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 3px;
    background: #2e4092;
    border: 2px solid transparent;
    color: #666;
    text-align: center;
    display: inline-block;
    margin-right: 5px;
    color: #e7e7e7;
}

.tabstack.client-tabs .nav-tabs > li.active .numberCircle {
    background: #fff;
    color: #2e4092;
}

/*
        NOTES
 */

.note-wrapper {
    background-color: #f7f7f7;
    padding: 2%;
    margin-bottom: 10px;
    position: relative;
    padding-top: 50px;
}

.note-wrapper.add-note {
    margin-top: 50px;
}

.note-wrapper button.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.note-wrapper .text {
    background-color: #ffffff;
    padding: 3%;
}

.note-wrapper.add-note h3 {
    font-family: "Fjalla One";
    background-color: #ffd740;
    color: #2e4092;
    border: 0;
    font-size: 20px;
    display: inline-block;
    padding: 10px;
    position: absolute;
    top: -40px;
    margin-top: 30px;
}

/*
            STAFF STYLES
 */

.staff-button {
    background: #334095;
    color: #fff;
    padding: 30px 5%;
    text-align: center;
    width: 49%;
    float: left;
    margin-right: 0.5%;
    margin-bottom: 10px;
    margin-left: 0.5%;
}

.staff-button .remove {
    display: none;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    left: 0;
}

.staff-button.active {
    background: #fbd71a;
    color: #334095;
    position: relative;
}

.staff-button.active .remove {
    display: block;
}

.staff-button.active:after {
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: -10px;
    content: "";
    background: #fbd71a;
}

.staff-button-dropdown {
    background: #fbd71a;
    padding-top: 10px;
    width: 99%;
    float: left;
    margin-bottom: 1%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    position: relative;
    text-align: center;
}

.staff-button-dropdown ul {
    list-style: inside;
}

/*.staff-button-dropdown .btn {*/
/*    margin: 10px auto;*/
/*    display: block;*/
/*    width: 20%;*/
/*    background-color: #2B599F;*/
/*    text-transform: uppercase;*/
/*    color: #FFF;*/
/*}*/

.staff-button {
    background: #334095;
    color: #fff;
    padding: 30px 5%;
    text-align: center;
    width: 49%;
    float: left;
    margin-right: 0.5%;
    margin-bottom: 10px;
    margin-left: 0.5%;
}

.staff-button .remove {
    display: none;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    left: 0;
}

.staff-button.active {
    background: #fbd71a;
    color: #334095;
    position: relative;
}

.staff-button.active .remove {
    display: block;
}

.staff-button.active:after {
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: -10px;
    content: "";
    background: #fbd71a;
}

.staff-button-dropdown {
    background: #fbd71a;
    padding-top: 10px;
    width: 99%;
    float: left;
    margin-bottom: 1%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    position: relative;
    text-align: center;
}

.staff-button-dropdown table {
}

.staff-button-dropdown table tr:hover {
    background: #e2bf0d;
}

.staff-button-dropdown table tr th,
.staff-button-dropdown table tr td {
    border-top: none;
}

.staff-button-dropdown ul {
    list-style: inside;
}

/*.staff-button-dropdown .btn {*/
/*    margin: 10px auto;*/
/*    display: block;*/
/*    width: 20%;*/
/*    background-color: #2B599F;*/
/*    text-transform: uppercase;*/
/*    color: #FFF;*/
/*}*/

.program-button {
    background: #334095;
    color: #fff;
    padding: 30px 5%;
    text-align: center;
    width: 49%;
    float: left;
    margin-right: 0.5%;
    margin-bottom: 10px;
    margin-left: 0.5%;
}

.program-button .remove {
    display: none;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    left: 0;
}

.program-button.active {
    background: #fff;
    color: #334095;
    position: relative;
}

.program-button.active .remove {
    display: block;
}

.program-button.active:after {
    width: 100%;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: -10px;
    content: "";
    background: #fff;
}

.program-button-dropdown {
    background: #fff;
    padding-top: 10px;
    width: 99%;
    float: left;
    margin-bottom: 1%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    position: relative;
}

.program-button-dropdown ul {
    list-style: inside;
}

.expandable-button {
    cursor: pointer;
}

/*.program-button-dropdown .btn {*/
/*    margin: 10px auto;*/
/*    display: block;*/
/*    width: 20%;*/
/*    background-color: #2B599F;*/
/*    text-transform: uppercase;*/
/*    color: #FFF;*/
/*}*/

a.sub-program {
    margin-left: 20px;
}

.events-modal .event {
    padding: 5px 10px;
    background-color: #ce0607;
    color: #fff;
    border-bottom: 1px solid rgba(220, 220, 220, 1);
    cursor: pointer;
    cursor: hand;
}

.events-modal .event,
.symbiosis-calendar .month > .week > .day > .event {
    background-color: #6136ef !important;
}

ul.clean-list,
ul.cleanlist {
    padding: 0;
    margin: 0;
    list-style: none;
}

.symbiosis-calendar-nav .month-nav-top {
    background-color: #173061 !important;
    font-family: "Fjalla One";
}

.symbiosis-calendar-nav .month-nav-bottom {
    background-color: #2a518d !important;
    font-family: "Fjalla One" !important;
    padding-bottom: 40px !important;
}

.symbiosis-calendar-nav .month-nav-bottom h3 {
    font-family: "Fjalla One" !important;
}

.symbiosis-calendar .month > .week > .day > .day-num {
    font-family: "Fjalla One" !important;
}

.symbiosis-calendar .month > .week > .day {
    position: relative;
    min-height: 150px !important;
}

.symbiosis-calendar .month > .week > .day > .has-events {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    font-family: "Fjalla One" !important;
    color: #fff;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2a518d+70,2a518d+70,2a518d+72,264c83+72 */
    background: #2a518d; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #2a518d 70%, #2a518d 70%, #2a518d 72%, #264c83 72%); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        -45deg,
        #2a518d 70%,
        #2a518d 70%,
        #2a518d 72%,
        #264c83 72%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        135deg,
        #2a518d 70%,
        #2a518d 70%,
        #2a518d 72%,
        #264c83 72%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a518d', endColorstr='#264c83', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    cursor: pointer;
}

.symbiosis-calendar .month > .week > .day > .has-events span {
    position: absolute;
    top: 35%;
    bottom: 0;
    display: block;
    width: 100%;
}

.dashboard-program-wrapper {
    background-color: #2b2d3e;
    /*margin: 0 -6%;*/
    padding: 30px 6%;
}

.dashboard-program-wrapper h1 {
    color: #fff;
    text-transform: uppercase;
    /*margin-bottom: 50px !important;*/
}

@media (max-width: 992px) {
    header#header nav#main-menu-navigation ul {
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: left;
    }

    header#header nav#main-menu-navigation ul > li {
        width: 100%;
    }

    header#header nav#main-menu-navigation ul > li > a {
        background-color: transparent;
        font-size: 20px;
        width: 100%;
        padding: 20px;
    }

    header#header nav#main-menu-navigation ul > li.active > a {
        background-color: transparent;
    }
}

/**Sortable table styles*/
table > thead th .sort-enabled {
    display: block;
    padding-right: 1.2em;
    position: relative;
}

table > thead th .sort-enabled:after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: -0.125em;
    content: "\f0dc";
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

table > thead th .sort-direction-asc:after {
    content: "\f0de";
}

table > thead th .sort-direction-desc:after {
    content: "\f0dd";
}

.lookup-loader {
    display: none;
}

.lookup-loader.in {
    display: block;
}

span.lookup-loader.in {
    display: inline-block;
}

/* ==========================================================================
   Flex: equal heights overwrite on bootstrap grid
   ========================================================================== */
/* http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css */
.fill-height > .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.fill-height > .row > [class*="col-"] {
    /*height:100%;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.fill-height > .row .stub-component {
    flex-grow: 1;
}

/* ==========================================================================
   Stub default styles
   ========================================================================== */

.stub-component {
    border: 1px solid #b3b3b3;
    background-color: #fff;
    padding: 0.8em;
}

.stub-component.primary {
    background-color: #334095;
    border-color: #2b3a9b;
    color: #fff;
}

.stub-component.primary small {
    color: #fff;
}

/* ==========================================================================
   Generic search widget
   ========================================================================== */

.generic-lookup-widget .result-wrapper {
    margin-top: 1em;
}


/* ol.assessment-group-sort {
    list-style-position: inside;
  }
  
  ol.assessment-group-sort li {
    height: 30px;
    line-height: 30px;
  } */