/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */

.body-content-area {
    display: flex;
}

.body-content {
    padding:15px;
    width:calc(100% - 300px);
}

h1.pagetitle {
    font-size: 1.7rem;
    font-weight: unset;
    color: #7d8b14;
    padding-bottom: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #4c4c4c;
}

    h1.pagetitle a.btn {float:right}
    h3.subpagetitle {
        font-size: 1.5rem;
        font-weight: unset;
        color: #7d8b14;
        padding-bottom: 5px;
        border-bottom: 1px solid #4c4c4c;
    }

/*********************** Header CSS ***********************/

.header-container {
    padding: 1rem;
    background: #98a632;
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .header-container .logo {
        width: 85px;
    }

    .header-container .myacchead {
        display:flex; flex-direction:column; align-items:flex-end
    }

    .header-container .logo img {
        width: 100%
    }

    .header-container .logout {
        margin-top:5px
    }

        .header-container .logout a {
            color: #fff;
            text-decoration: none;
            background: rgba(14,19,24,.7)
        }

/************************* Left Navigation **********************/

.navbar-header {
    background: #E1E2E1;
    width: 300px;
}

    .navbar-header h3.category {
        font-size: 16px;
        background: #4c4c4c;
        margin: 0;
        border-bottom: 1px solid #fff;
        padding: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }


        .navbar-header h3.category.homecategory {
            flex-direction: row
        }

        .navbar-header h3.category span.ui-icon-triangle-1-s {
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: 16px;
            text-rendering: auto;
            line-height: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #98a632;
        }

            .navbar-header h3.category span.ui-icon-triangle-1-s:before {
                content: "\F004B";
            }



        .navbar-header h3.category span.ui-icon-triangle-1-e {
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: 16px;
            text-rendering: auto;
            line-height: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #98a632;
        }

            .navbar-header h3.category span.ui-icon-triangle-1-e:before {
                content: "\F005A";
            }



        .navbar-header h3.category a {
            text-decoration: none;
            color: #98a632;
            font-weight: bold;
        }

        .navbar-header h3.category:hover {
            background: #7d8b14;
        }

            .navbar-header h3.category:hover a {
                color: #fff;
            }

            .navbar-header h3.category:hover span.ui-icon-triangle-1-s {
                color: #ffffff;
            }

            .navbar-header h3.category:hover span.ui-icon-triangle-1-e {
                color: #ffffff;
            }

        .navbar-header h3.category.ui-state-active {
            background: #98a632;
        }

            .navbar-header h3.category.ui-state-active:hover {
                background: #7d8b14;
            }

            .navbar-header h3.category.ui-state-active a,
            .navbar-header h3.category.ui-state-active span.ui-icon-triangle-1-s {
                color: #fff;
            }

    .navbar-header div.subcategory {
    }

        .navbar-header div.subcategory ul {
            margin: 0;
            padding: 0;
        }

            .navbar-header div.subcategory ul li {
                border-bottom: 1px solid #fff;
            }

                .navbar-header div.subcategory ul li a {
                    display: block;
                    padding: 5px;
                    text-decoration: none;
                    color: #4c4c4c
                }

                    .navbar-header div.subcategory ul li a:hover {
                        background: #d2d2d2;
                    }


/******************* Floating Label ***********************/
.form-control:focus {
    border: 1px solid #ced4da!important;
    box-shadow: 0 0 0 0!important;
}
.form-label-group {
    position: relative;
    margin-bottom: 2rem;
}

    .form-label-group > input,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
    }

    .form-label-group > input {
        padding-left: 10px;
        padding-right: 10px;
    }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 10px;
        display: inline-block;
        width: auto;
        margin-bottom: 0; /* Override default `<label>` margin */
        line-height: 2;
        color: #495057;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out; line-height:36px;
    }

    .form-label-group input::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
        padding-left: 15px;
        padding-right: 10px;
    }

        .form-label-group input:not(:placeholder-shown) ~ label,
        .form-label-group select:not(:placeholder-shown) ~ label {
            top: -7px;
            font-size: 12px;
            color: #777;
            left: 5px;
            display: inline-block;
            width: auto;
            background: #fff;
            padding: 0 5px;
            left: 10px;
            line-height: normal;
        }

       
        


.bordershadow {
    background: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.29);
    overflow: hidden;
    border-radius: 4px;
}



/****************** Login Container ***********************/

div.loginlogo {
    padding-bottom: 15px;
    width:90px;
    margin-bottom: 15px;
}

div.loginformerror {
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ff0000;
    background: #edcccc;
    padding: 5px;
}

div.loginlogo img {
    width: 100%
}


div.logincontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

div.logindetails {
    padding: 15px;
    display: flex;
}

    div.logindetails div.loginsection {
        width: 40%;
        padding-right: 15px;
    }

    div.logindetails div.logininfo {
        width: 60%;
        padding-left: 15px;
        border-left: 1px solid #ced4da
    }

    div.logindetails div.rememberchkbox {
        clear: both;
        overflow: hidden
    }

        div.logindetails div.rememberchkbox label {
            position: static;
            float: left;
            line-height: normal;
        }

        div.logindetails div.rememberchkbox input[type=checkbox] {
            float: left;
            margin-top: 2px;
        }

@media (max-width: 768px) {
    div.logincontainer {
        display: block;
        height: auto;
        margin: 15px 0;
    }

    div.logindetails {
        display: block
    }

        div.logindetails div.loginsection {
            width: 100%;
            padding: 0;
        }

        div.logindetails div.logininfo {
            width: 100%;
            padding: 0;
            border: 0;
            margin-top: 40px;
        }
}


input.searchbox {
    width: calc(100% - 65px);
    float: left;
    border-radius: 4px 0 0 4px;
}

.btn.btnsearch {
    width: 65px;
    border-radius: 0 4px 4px 0;
    height: 38px; font-size:25px; line-height:25px;
}

.bordercontainer {
    -webkit-box-shadow: 0px 0px 2px 1px rgba(222,222,222,1) inset;
    -moz-box-shadow: 0px 0px 2px 1px rgba(222,222,222,1) inset;
    box-shadow: 0px 0px 2px 1px rgba(222,222,222,1) inset;
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 5px;
}

.pagerecords {margin-bottom:10px;}
.pagerecords .form-label-group {margin-bottom:0}

.pagination.custompagination {
    width: 100%;
    margin: 0 -15px;
}

    .pagination.custompagination ul.pagination {
        margin: 0
    }

    .pagination.custompagination .paging {
        line-height: 34px;
    }


/************************* Search Results **************************/

div.searchresults {
    border: 1px solid #ced4da
}

    div.searchresults h2 {
        background: #ccd39c;
        padding: 10px;
        margin:0;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
    }

ul.searchlist, ul.searchlist1 {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}


    ul.searchlist.searchlistheader, ul.searchlist1.searchlistheader {
        background: #e1e2e1;
        font-weight: bold;
    }

    ul.searchlist li, ul.searchlist1 li {
        padding: 5px;
        width: 10%
    }
        ul.searchlist li:first-child, ul.searchlist1 li:first-child {
            text-align: center;
            width: 9%
        }
        ul.searchlist li:nth-child(1n+1), ul.searchlist1 li:nth-child(1n+1) {
            text-align: left;
            width: 15%
        }
        ul.searchlist li:nth-child(2n+1), ul.searchlist1 li:nth-child(2n+1) {
            text-align: center;
            width: 8%
        }
        ul.searchlist li:nth-child(3n+1), ul.searchlist1 li:nth-child(3n+1) {
            text-align: left;
            width: 15%
        }
        ul.searchlist li:nth-child(4n+1), ul.searchlist1 li:nth-child(4n+1) {
            text-align: center;
            width: 10%
        }
        ul.searchlist li:nth-child(5n+1), ul.searchlist1 li:nth-child(5n+1) {
            text-align: center;
            width: 7%
        }
        ul.searchlist li:nth-child(6n+1), ul.searchlist1 li:nth-child(6n+1) {
            text-align: center;
            width: 9%
        }
        ul.searchlist li:nth-child(7n+1), ul.searchlist1 li:nth-child(7n+1) {
            text-align: center;
            width: 7%
        }
        ul.searchlist li:nth-child(8n+1), ul.searchlist1 li:nth-child(8n+1) {
            text-align: center;
            width: 10%
        }


 
div.studentdetail ul.searchlist li.admno {width:15%; text-align:center;}
div.studentdetail ul.searchlist li.studentname {width:25%; text-align:left;}
div.studentdetail ul.searchlist li.attendance {width:40%; text-align:left;}
div.studentdetail ul.searchlist li.notes {width:20%; text-align:left;}

div.studenthouse ul.searchlist li.name {width:25%; text-align:left;}
div.studenthouse ul.searchlist li.description {width:65%; text-align:left;}
div.studenthouse ul.searchlist li.action {width:10%; text-align:center;}
div.studenthouse ul.searchlist li.action a {text-decoration:none; margin:0 3px; color:#98a632}
div.studenthouse ul.searchlist.searchlistheader li.action a {font-size:18px;}


ul.searchlist.staffdirectorylist {
    background: #e1e2e1;
    font-weight: bold;
}
ul.searchlist1.staffdirectorylist {
    background: #e1e2e1;
    font-weight: bold;
}
    div.searchresults.staffdirectorylist ul.searchlist li {width:20%}
    div.searchresults.staffdirectorylist ul.searchlist li.staffname {text-align:left}
    div.searchresults.staffdirectorylist ul.searchlist li.cellno {text-align:center}
    div.searchresults.staffdirectorylist ul.searchlist li.gender {text-align:center}
    div.searchresults.staffdirectorylist ul.searchlist li.designation {text-align:center}
    div.searchresults.staffdirectorylist ul.searchlist li.crpid {text-align:center}

        div.pagefilter {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
            flex-direction: row-reverse
        }
    div.pagefilter input#chkMarkAsHoliday {display:none;}
    div.pagefilter input#chkMarkAsPresent {display:none;}

            div.pagefilter input#chkMarkAsNew {
                display: none;
            }
            div.pagefilter input#chkMarkAsRepeat {
                display: none;
            }
            div.pagefilter input#chkMarkAsCompleted {
                display: none;
            }

div.attenpresentdetails {
    border:1px solid #ced4da;
    padding:2px; width:90%; margin-top:5px; display:none;
}
    div.attenpresentdetails ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        background: #e1e2e1; margin-top:2px;
    }
        div.attenpresentdetails ul.attenheader {
            background:#fff; margin-top:0; font-weight:bold
        }
        div.attenpresentdetails ul li.desc {
            width: 50%;
            text-align: left
        }
    div.attenpresentdetails ul li.yes {width:25%; text-align:center;}
    div.attenpresentdetails ul li.no {width:25%; text-align:center;}



ul.studetail {margin:0; padding:0; list-style:none; display:flex}
    ul.studetail li.stuimg {
        width: 200px;
        padding: 5px;
        border: 1px solid #E1E2E1; margin-right:20px;
    }
    ul.studetail li.stuimg img {width:100%}

    ul.studetail li.stuinfo {
        width: calc(100% - 220px);
        background: #f3f3f3;
        padding: 10px;
    }
    ul.studetail li.stuinfo p {margin:0; padding:0 0 10px 0}
        ul.studetail li.stuinfo p.stuname {font-weight:bold; text-transform:uppercase}

div.alphasorting ul.alpha {display:flex; justify-content:center; flex-wrap:wrap}
    div.alphasorting ul.alpha li {
        width: 25px;
        height: 25px;
        text-align: center;
        margin: 2px;
        background: #98a632;
        line-height: 25px;
    }
        div.alphasorting ul.alpha li a {
            color: #fff;
            display: block;
            line-height: 25px;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
        }
        div.alphasorting ul.alpha li.inactive, div.alphasorting ul.alpha li.active {
            background: #dfdfdf
        }
            div.alphasorting ul.alpha li.inactive span, div.alphasorting ul.alpha li.active span {
                font-weight: bold;
                font-size: 12px;
                display: block;
                line-height: 25px;
            }

ul.alphalisting  {margin:0; padding:0; list-style:none; border-top:1px solid #dfdfdf; overflow-y:auto; height:450px}
ul.alphalisting li {display:flex; border:1px solid #dfdfdf; border-top:0; padding:5px; }
ul.alphalisting li.heading {background:#dfdfdf; font-weight:bold}

    ul.alphalisting li div.alphano {width:25%; text-align:center;}
    ul.alphalisting li div.alphano a {color:#98a632; text-decoration:none; font-weight:bold}
    ul.alphalisting li div.alphatown {width:75%; text-align:left;}

    ul.alphalisting.siblindetails li div{width:25%}

/**************************** Print Page ************************/

div.printitemtitle {padding:10px}

div.printitemtitle div.printhead {display:flex; justify-content:space-between; align-items:center}
div.printitemtitle div.printhead h4 {font-weight:bold; text-transform:uppercase; margin:0}
div.printitemtitle div.printhead div.receiptno {font-weight:bold}
div.printitemtitle div.printhead div.logo {width:auto; font-weight:bold; font-size:22px;}
div.printitemtitle div.printhead div.logo img {width:100%}

div.printitemtitle div.printcolumn {margin:10px 0; padding:10px 10px 0; border:1px solid #ccc; display:flex; flex-wrap:wrap}
div.printitemtitle div.printcolumn div.col50per {width:50%; padding-bottom:10px; font-weight:bold; display:flex}
div.printitemtitle div.printcolumn div.col50per label {width:140px}

div.deliverylistdetails {padding:0 10px; }
div.deliverylistdetails table {border:1px solid #ccc; border-bottom:0}

div.deliverylistdetails table .srno {text-align:center; width:10%}
div.deliverylistdetails table .admno {text-align:center; width:20%}
div.deliverylistdetails table .admmonth {text-align:center; width:20%}
div.deliverylistdetails table .admfeetype {text-align:center; width:25%}
div.deliverylistdetails table .admfeeamt {text-align:right; width:25%}

div.deliverylistdetails table tr,
div.deliverylistdetails table td {border-bottom:1px solid #ccc;}

div.deliverylistdetails table.invoicetotal {border:0}

div.deliverylistdetails table.invoicetotal tr, div.deliverylistdetails table.invoicetotal td {padding-bottom:20px}
div.deliverylistdetails table.invoicetotal table {border:0}
    div.deliverylistdetails table.invoicetotal td tr, 
    div.deliverylistdetails table.invoicetotal td td {
        padding: 0;
        border: 0; font-weight:bold
    }

div.remarkauthority {display:flex; margin:0 10px}
div.remarkauthoritydetails {width:140px}


div.tab-content ul.dl-horizontal {
    clear: both;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    border: 1px solid #eee;
    border-top: 0
}

    div.tab-content ul.dl-horizontal.heading {
        margin-top: 10px;
        border-top: 1px solid #eee;
      /*  background: #434345;
        color: #fff;*/
        font-size: 14px;
    }

    div.tab-content ul.dl-horizontal li {
        margin: 0;
        padding: 5px;
        list-style: none;
        line-height: 20px;
        border-left: 1px solid #eee;
        word-break: break-all;
        font-size: 14px;
    }

        div.tab-content ul.dl-horizontal li.namazname {
            width: 15%;
            border-left: 0;
            background-color: bisque;
            font-size:18px;
        }

        div.tab-content ul.dl-horizontal li.namazvalue {
            width: 20%;
            font-size:15px;
        }