/*====================*/
/* COLOR green scheme */
/*====================*/
html {
    font-size: 14px;
}

body {
    background-color: #DFF5DE;
    font-family: Verdana, Geneva, sans-serif;
}


div.row h1 {
    margin-top: 0px;
    font-size: 24px;
    font-weight: bold;
}

div.row h2 {
    margin-top: 0px;
    font-size: 18px;
}


.red .active a,
.red .active a:hover {
    background-color: green;
}


a {
    color: #225200; /* #337ab7;*/
    text-decoration: underline;
    color: black;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    background-color: green;
    text-decoration: none;
}

.nav-pills > li > a {
    border-radius: 4px;
    border: solid 1px #999;
    text-decoration: none;
}


nav.navbar a {
    text-decoration: none;
}

table thead th a {
    text-decoration: none;
}

    table thead th a:hover {
        text-decoration: none;
        color: aqua;
    }

.pagination {
    margin-top: 10px;
    margin-bottom: 0px;
}

    .pagination li.info span,
    .pagination li.size span {
        background-color: transparent;
    }

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        background-color: #225200; /* #337ab7;*/
        border-color: #225200; /* #337ab7;*/
        text-decoration: none;
    }

    .pagination > li > a, .pagination > li > span {
        color: #225200; /* #337ab7;*/
        text-decoration: none;
    }

label {
    font-weight: bold;
}

    span.large_data_heading,
    label.large_data_heading {
        font-weight: bold;
        font-size: 1.2em;
        display: inline-block;
        padding-right: 4px;
        text-align: right;
    }

span.large_data_value {
    font-weight: normal;
    font-size: 1.2em;
}

span.data_heading,
label.data_heading {
    font-weight: bold;
    display: inline-block;
    padding-right: 4px;
    text-align: right;
}

span.data_value {
    font-weight: normal;
}

@media (min-width: 992px) {
    span.data_heading_col1,
    label.data_heading_col1 {
        width: 115px;
    }

    span.data_heading_col3,
    label.data_heading_col3 {
        width: 270px;
    }

    span.data_heading_col2,
    label.data_heading_col2 {
        width: 180px;
    }

    span.data_heading_small,
    label.data_heading_small {
        width: 60px;
    }

    span.data_heading_inline,
    label.data_heading_inline {
        display: inline;
    }
}

@media (min-width: 768px) {
    span.data_heading_col1,
    label.data_heading_col1 {
        width: 115px;
    }

    span.data_heading_col2,
    label.data_heading_col2 {
        width: 180px;
    }

    span.data_heading_col3,
    label.data_heading_col3 {
        width: 265px;
    }

    span.data_heading_small,
    label.data_heading_small {
        width: 60px;
    }

    span.data_heading_inline,
    label.data_heading_inline {
        display: inline;
    }
}


div.section-band {
    background-color: green;
    color: #fff;
    margin-left: 0px;
    margin-right: 0px;
}

.panel-heading {
    margin-left: 0px;
    margin-right: 0px;
}

.panel-body {
    padding: 0px;
}

    .panel-body table {
        width: 100%;
    }

        .panel-body table td {
            padding: 4px;
        }

div.panel div.heading-highlight {
    background-color: #CFF;
    color: black;
}


table thead tr.heading-highlight th {
    background-color: #CFF;
    color: black;
}

div#rowButtons {
    margin-top: 10px;
    margin-bottom: 20px;
}

label.error, span.error {
    color: red;
    font-weight: 200;
    font-size: 11px;
}

/*===============================*/
/* Date Time Picker              */
/*===============================*/

span.calendar-icon {
    width: 20px;
    padding-top: 2px;
    padding-left: 0px;
    padding-right: 0px;
}
/*===============================*/
/* Credits table                 */
/*===============================*/
table.credits_table tbody td {
    padding: 1px;
    font-size: 0.85em;
}

    table.credits_table tbody td.heading {
        text-align: right;
        padding-right: 3px;
        border-right: none;
        font-weight: bold;
    }

    table.credits_table tbody td.value {
        border-left: none;
        text-align: center;
        padding-right: 3px;
    }

div.credits_1 table {
    /*border-top: none;*/
}

    div.credits_1 table td {
        border-top: none;
    }

@media (min-width: 992px) {
    /* For large screens credits tables are side by side */
    div.credits_0 {
        padding-right: 0px;
    }

    div.credits_1 {
        padding-left: 0px;
    }

        div.credits_1 table {
            border-left: none;
        }

            div.credits_1 table td {
                border-left: none;
                border-top: solid 1px black;
            }
}

/*===========================
    Common Sections
=============================*/
div#sectionStudent,
div#sectionSchool {
    margin-top: 10px;
    margin-bottom: 10px;
}

    div#sectionStudent .row,
    div#sectionSchool .row,
    div.section-form .row {
        margin-top: 2px;
    }

        div#sectionStudent .row label,
        div#sectionSchool .row label,
        div.section-form .row label {
            margin-bottom: 2px;
        }

    div#sectionStudent input#StudentCellPhone {
        width: 110px;
    }

@media (min-width: 992px) {
    #sectionSchool span.data_heading_col1,
    #sectionSchool label.data_heading_col1,
    div.section-form span.data_heading_col1,
    div.section-form label.data_heading_col1 {
        width: 160px;
    }
}

/*==============================
 * Responsive text aligning
 *==============================*/
.text-xs-left {
    text-align: left;
}

.text-xs-right {
    text-align: right;
}

.text-xs-center {
    text-align: center;
}

.text-xs-justify {
    text-align: justify;
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-justify {
        text-align: justify;
    }
}

@media (min-width:992px) {
    .text-md-left {
        text-align: left;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-justify {
        text-align: justify;
    }
}

@media (min-width: 1200px ) {
    .text-lg-left {
        text-align: left;
    }

    .text-lg-right {
        text-align: right;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-justify {
        text-align: justify;
    }
}


/*=============================*/
/* Bootstrap 3 - 3rd level menu
/*=============================*/
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }


/*===============*/
/* TABLE styling */
/*===============*/

table {
    border: solid 1px #000;
    border-collapse: collapse;
}

    table thead th {
        border: solid 1px #999999;
        background-color: green;
        color: #fff;
        padding: 5px;
        text-align: left;
        height: 40px;
    }

        table thead th a {
            color: #fff;
            font-weight: bold;
        }

        table thead th.sort_asc {
            background-image: url(images/sort_asc.png);
            background-repeat: no-repeat;
            background-position: center right;
        }

        table thead th.sort_desc {
            background-image: url(images/sort_desc.png);
            background-repeat: no-repeat;
            background-position: center right;
        }

    table tbody td {
        border: solid 1px #000;
        border-collapse: collapse;
        padding: 5px;
        color: black;
        background-color: #DFF5DE;
    }

    table tbody tr.alternate td {
        color: black;
        background-color: #fff;
    }

    /*================*/
    /* Table Scroller */
    /*================*/
    table.scroll-table {
        border-left: none;
        border-right: none;
        border-collapse: separate;
    }

        table.scroll-table td {
            border-top: none;
            border-bottom: none;
            border-left: none;
            border-collapse: separate;
        }

        table.scroll-table tbody tr td:first-child {
            border-left: solid 1px #000;
        }

        table.scroll-table th,
        table.scroll-table td {
            vertical-align: top;
        }

/*====================================*/
/* Modal                              */
/*====================================*/

.modal-backdrop {
    display: none;
}

.modal#dialogConfirm,
.modal#dialogAlert {
    height: 250px;
}

.modal-content {
    overflow: hidden;
}

.modal#dialogAlert #dialogAlertOK,
.modal#dialogConfirm #dialogConfirmCancel,
.modal#dialogConfirm #dialogConfirmOK {
    min-width: 75px;
}

.modal-content .bg-info {
    background-color: #d9edf7 !important;
}

/*====================================*/
/* Make AODA color contrast compliant *
/*====================================*/
.btn-success,
.btn-info,
.btn-danger,
.btn-secondary {
    color: #000000;
    font-weight: bold;
    min-width: 75px;
}

    .btn-success:disabled,
    .btn-info:disabled,
    .btn-danger:disabled,
    .btn-secondary:disabled,
    .btn-success[disabled],
    .btn-info[disabled],
    .btn-danger[disabled],
    .btn-secondary[disabled],
    .btn-success:disabled:hover,
    .btn-info:disabled:hover,
    .btn-danger:disabled:hover,
    .btn-secondary:disabled:hover,
    .btn-success[disabled]:hover,
    .btn-info[disabled]:hover,
    .btn-danger[disabled]:hover,
    .btn-secondary[disabled]:hover {
        color: #DFF5DE;
        background-color: darkgrey;
    }


/*====================================*/
/* Mark a required field              *
/*====================================*/
.required:after {
    content: "*";
    font-weight: 100;
    color: red;
}

.norequired:after {
    content: "\00a0\00a0";
    font-weight: 100;
    color: white;
}

/*-----------------------------------*/
/* Buttons                           */
/*-----------------------------------*/
.btnReset,
.btnSearch,
.btnClose,
.btnSave,
.btnCancel {
    width: 75px;
}

/*========================================*/
/*   for Kendo Grid                       */
/*=========================================*/
.k-grid-header .k-header {
    height: 20px;
    padding: 5px;
}

.k-grid tbody tr {
    line-height: 20px;
}

.k-grid tbody td {
    padding: 5px;
}

.k-grid td{
    white-space: nowrap;
}

.k-grid-header .k-header,
.k-header,
.k-grid-header,
.k-grouping-header {
    background-color: darkgreen;
}

    .k-grid-header .k-header > .k-link, .k-header, .k-treemap-title {
        color: white;
    }

/*Pagesize dropdown*/
.k-widget .k-dropdown {
    background: #dff5de;
    border: black;
}

.k-pager-numbers .k-state-selected {
    background: darkgreen;
    border-color: #dff5de;
}

.k-state-selected {
    color: white;
}

.k-dropdown-wrap .k-select {
    background: #dff5de;
}

.k-dropdown-wrap .k-input {
    background: #dff5de;
}

.k-pager-wrap {
    background-color: #dff5de;
    color: black;
}

.k-ff .k-pager-numbers .k-current-page .k-link, .k-ff .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view, .k-ie11 .k-pager-numbers .k-current-page .k-link, .k-ie11 .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view, .k-safari .k-pager-numbers .k-current-page .k-link, .k-safari .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view, .k-webkit .k-pager-numbers .k-current-page .k-link, .k-webkit .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view {
    background-color: #dff5de;
}

.k-grid-header th.k-header {
    vertical-align: middle;
}

.k-filter-row th, .k-grid-header th.k-header {
    font-weight: 800;
    font-size: 13px;
}

.k-grid table tbody,
.k-grid-content table tbody td,
.k-grid-content-locked table tbody td {
    font-size: 12px;
}

.k-grid tbody tr td {
    vertical-align: top;
}

.k-calendar th {
    color: #000000;
    background-color: #00d0ff;
    height: 16px;
}

.k-dropdown-wrap .k-input, .k-numeric-wrap .k-input, .k-textbox > input {
    width: 60px !important;
}

.k-autocomplete .k-input, .k-dropdown-wrap .k-input, .k-multiselect-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input, .k-selectbox .k-input, .k-textbox > input {
    text-indent: .2em !important;
}

.k-picker-wrap {
    background-color: #ffffff !important;
}

.tdsb-panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    border-color: #ddd;
}

    .tdsb-panel .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        background-color: #CFF;
        color: black;
    }

    .tdsb-panel .panel-body {
        padding: 0px;
    }

.main-section-dividen {
    padding-bottom: 12px;
}

.btn-myschool {
    color: #241f1f !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    font-size: 0.85rem !important;
}

.btn-myschool:hover {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    font-size: 0.85rem !important;
}

.btn-myschool:focus, .btn-myschool.focus {
    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5) !important;
    color: #fff !important;
}

.btn-myclass {
    color: #241f1f !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    font-size: 0.85rem !important;
}

.btn-myclass:hover {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    font-size: 0.85rem !important;
}

.btn-myclass:focus, .btn-myclass.focus {
    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5) !important;
    color: #fff !important;
}

.lable-text-padding {
    padding-left: 20px;
}

.calendar-width {
    width: 150px;
}

.dropdownlist-height {
    height: 25px;
}

.dropdown-ingrid {
    height: 20px;
    width: 100%;
}

.calendar-ingrid {
    width: 99%;
    height: 21px;
}

legend {
    display: block;
    width: 130px !important;
    max-width: 90%;
    padding: 5px;
    margin-bottom: .3rem;
    @include font-size(1.2rem);
    font-weight: bold;
    text-align: left;
}

/*overwrite form-control in bootstrap to reduce height */
.form-control {
    height: calc(1.1em + 0.65rem + 2px) !important;
    padding: 0.175rem 0.15rem !important;
    font-size: 0.98rem !important;
}

.container {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

@media (min-width: 576px) {
    .container {
        max-width: 95% !important;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 95% !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 95% !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 95% !important;
    }
}

.container-fluid {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 2px;
    padding-left: 2px;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    padding-left: 13px;
    padding-right: 13px;
}

.input-box{
        height:28px;
        border:1px solid #ced4da;
        border-radius:0.25rem;
}