/*css*/

body {
    background-color: #f5f5f5;
    color: #787878;
    direction: rtl;
    font-family: "GESS", arial, tahoma;
    font-weight: 400;
}

.button {
    background-color: #157b6e;
    color: #fff;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none !important;
}

.button.button-large {
    padding: 15px 50px;
    font-size: 20px;
}

input[type="submit"].button,
input[type="button"].button,
button.button {
    border-width: 0;
}

.button:hover,
.button:active,
.button:visited {
    color: #fff;
}

.reset {
    margin: 0;
    padding: 0;
}
/*==================
	boostrap extend
=====================*/

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

a.label:hover,
a.label:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.label:empty {
    display: none;
}

.btn .label {
    position: relative;
    top: -1px;
}

.label-default {
    background-color: #777777;
}

.label-default[href]:hover,
.label-default[href]:focus {
    background-color: #5e5e5e;
}

.label-primary {
    background-color: #337ab7;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #286090;
}

.label-success {
    background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
    background-color: #449d44;
}

.label-info {
    background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
    background-color: #31b0d5;
}

.label-warning {
    background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
    background-color: #ec971f;
}

.label-danger {
    background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
    background-color: #c9302c;
}

/*==================
	ready classes
=====================*/

.full-width {
    width: 100%
}

.narrow-col,
.narrow-row {
    padding: 0;
}

@media (max-width: 767px) {
    .narrow-xs {
        padding-left: 0;
        padding-right: 0;
    }
}

.margin10top {
    margin-top: 10px
}

.margin20top {
    margin-top: 20px
}

.margin20right {
    margin-right: 20px;
}

.margin10right {
    margin-right: 10px;
}

.padding15right {
    padding-right: 15px;
}
ul.normalize,
ul.normalize li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mobile-number-formating {
    font-size: 20px;
    letter-spacing: 4px;
}

.english_numbers {
    font-family: tahoma !important;
}

.color-success,
.color-success * {
    color: #5cb85c;
}

.light-font {
    font-weight: normal;
}

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

header {
    color: #fff;
    padding-bottom: 20px;

    background: #1bbaa4; /* Old browsers */
    background: -moz-linear-gradient(top, #1bbaa4 0%, #17a996 32%, #18a793 33%, #18a18f 42%, #169b86 50%, #179280 62%, #168978 72%, #178373 84%, #147d6c 94%, #157c6b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1bbaa4), color-stop(32%, #17a996), color-stop(33%, #18a793), color-stop(42%, #18a18f), color-stop(50%, #169b86), color-stop(62%, #179280), color-stop(72%, #168978), color-stop(84%, #178373), color-stop(94%, #147d6c), color-stop(100%, #157c6b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1bbaa4 0%, #17a996 32%, #18a793 33%, #18a18f 42%, #169b86 50%, #179280 62%, #168978 72%, #178373 84%, #147d6c 94%, #157c6b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1bbaa4 0%, #17a996 32%, #18a793 33%, #18a18f 42%, #169b86 50%, #179280 62%, #168978 72%, #178373 84%, #147d6c 94%, #157c6b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1bbaa4 0%, #17a996 32%, #18a793 33%, #18a18f 42%, #169b86 50%, #179280 62%, #168978 72%, #178373 84%, #147d6c 94%, #157c6b 100%); /* IE10+ */
    background: linear-gradient(to bottom, #1bbaa4 0%, #17a996 32%, #18a793 33%, #18a18f 42%, #169b86 50%, #179280 62%, #168978 72%, #178373 84%, #147d6c 94%, #157c6b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbaa4', endColorstr='#157c6b', GradientType=0); /* IE6-9 */

}

header .logo {
    border: 5px rgba(235, 224, 182, .25) solid;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    -webkit-box-shadow: 0 0 15px 0 rgba(13, 104, 90, .75);
    box-shadow: 0 0 15px 0 rgba(13, 104, 90, .75);
    margin-top: -10px;
    float: right;
    margin-left: 40px;
}

@media (max-width: 991px) {
    header {
        text-align: center;
    }

    header .logo {
        float: none;
        margin-left: 0;
    }

    header h1 {
        font-size: 25px;
        margin: 10px 0 0 0;
    }
}

/*====================
	Menu
====================*/

nav.menu {
    background-color: #d4c58d;
    color: #fff;
    font-weight: 600;
}

@media (min-width: 992px) {
    nav.menu > .container > ul {
        display: block !important;
    }
}

@media (max-width: 991px) {
    nav.menu > .container > ul {
        display: none;
    }
}

nav.menu ul,
nav.menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav.menu a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}

@media (max-width: 1199px) {
    nav.menu a {
        font-size: 15px;
        font-weight: 400;
    }
}

nav.menu a:hover,
nav.menu a:active {
    background-color: #c3b377
}

nav.menu > .container > ul > li {
    float: right;
    margin: 0 5px;
    position: relative;
}

@media (max-width: 1199px) {
    nav.menu > .container > ul > li {
        margin: 0 2px;
    }
}

@media (max-width: 991px) {
    nav.menu > .container > ul > li {
        float: none;
        margin: 0;
        border-top: 1px #c3b377 solid
    }
}

nav.menu ul > li > a {
    padding: 10px 10px;
    display: inline-block;
}

@media (max-width: 991px) {
    nav.menu ul > li > a {
        display: block;
    }

}

nav.menu ul > li ul {
    display: none;
    border: 1px #c3b377 solid;
}

@media (min-width: 992px) {
    nav.menu ul > li ul {
        display: none !important;
        z-index: 99999;
        position: relative;
    }
}

@media (min-width: 992px) {
    nav.menu ul > li:hover ul {
        display: block !important;
        position: absolute;
        top: 42px;
        left: 0;
        right: 0;
        min-width: 200px;
        background-color: #d4c58d;
    }

    nav.menu ul > li:hover ul a {
        display: block;
    }
}

nav.menu ul > li ul li {
    display: block;
    width: 100%;
}

nav.menu ul > li ul a {
    font-size: 15px;
    font-weight: 400;
    padding-right: 25px;
}

nav.menu ul > li ul a:before {
    content: '-';
    margin-left: 15px;
}

nav.menu .menu-mobile {
    display: none;
    text-decoration: none;
}

nav.menu .menu-mobile:hover,
nav.menu .menu-mobile:active {
    background-color: #d4c58d;
}

@media (max-width: 991px) {
    nav.menu .menu-mobile {
        display: block;
        padding: 15px 0;
        text-align: right;
    }

    nav.menu .menu-mobile .bars {
        width: 35px;
        margin-left: 15px;
        float: right;
        margin-top: 4px;
    }

    nav.menu .menu-mobile .bars .bar {
        width: 100%;
        height: 3px;
        background-color: #fff;
        display: block;
        margin: 0 0 3px 0;
    }
}

/*===================
	Stufent select
====================*/
.select-student {
    background-color: #fff;
    border-radius: 5px;
    border: 1px #e2e2e2 solid;
    margin: 20px 0 30px 0;
}

.select-student .select-student-head {
    background: #f2f0f0;
    float: right;
    height: 55px;
    border-left: 1px #dfdfdf solid;
    margin-left: 20px;
    font-weight: 400;
    line-height: 55px;
    padding: 0 20px;
}

@media (max-width: 991px) {
    .select-student .select-student-head {
        float: none;
        margin: 0;
        text-align: center;
        font-size: 20px;
    }
}

.select-student form {
    padding: 10px 0;
}

@media (max-width: 991px) {
    .select-student form {
        width: 90%;
        margin-right: 5%;
    }
}

.select-student form label.label {
    font-weight: 400;
}

@media (max-width: 991px) {
    .select-student form label.label {
        display: block;
        text-align: right;
    }
}

.select-student form select {
    height: 30px;
    border: 1px #ccc solid;
    background-color: #f2f1f1;
    border-radius: 5px;
    font-weight: 400;
    min-width: 250px;
    margin-right: 20px;
}

@media (max-width: 991px) {
    .select-student form select {
        margin: 0;
        width: 100%;
        text-align: center;

        height: 40px;

    }
}

.select-student form input[type="submit"] {
    background-color: #3e9085;
    padding: 7px 20px;
    font-size: 15px;
    margin-right: 20px;
    vertical-align: middle;
    border-radius: 5px;
    border-width: 0;
    color: #fff;
    font-weight: 400;
}

@media (max-width: 991px) {
    .select-student form input[type="submit"] {
        width: 100%;
        margin: 0;
        margin-top: 10px;
        padding: 7px 0;
    }
}

/*===================
	Stufent Head
====================*/

.student-head {
    border-top: 1px #e7e7e7 solid;
    border-bottom: 1px #e7e7e7 solid;
    padding: 20px 0 10px 0;

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f3f3f3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0); /* IE6-9 */
}

@media (max-width: 991px) {
    .student-head {
        text-align: center;
        margin: 40px 0;
    }

}

.student-head .student-head-img {
    float: right;
    border: 5px #fff solid;
    margin-top: -40px;
}

@media (max-width: 991px) {
    .student-head .student-head-img {
        float: none;
        margin-top: -60px;
    }
}

.student-head .student-head-title {
    float: right;
    margin-right: 20px;
}

@media (max-width: 991px) {
    .student-head .student-head-title {
        float: none;
        margin-right: 0;
    }
}

.student-head .student-head-title h4,
.student-head .student-head-title h2 {
    color: #000;
    margin: 0;
    font-size: 14px;
}

.student-head .student-head-title h2 {
    font-weight: 600;
    font-size: 18px;
    margin-top: 10px;
}

.student-head-score {
    padding-right: 30px;
}

.student-head .student-head-title.student-head-score h2 {
    background-color: #b63833;
    color: #fff;
    border-radius: 10px;
    padding: 4px 10px;
    text-align: center;
    letter-spacing: 2px;
}

@media (max-width: 991px) {
    .student-head-score {
        padding-right: 0;
    }

    .student-head .student-head-title.student-head-score h4 {
        margin-top: 20px;
    }

    .student-head .student-head-title.student-head-score h2 {
        display: inline-block;
    }
}

.student-head .button {
    float: left;
    padding: 0 0 0 15px;
    overflow: hidden;
    vertical-align: middle;

    margin-left: 10px;
}

@media (max-width: 991px) {
    .student-head .button {
        float: none;
        display: inline-block;
        /* margin-bottom: -40px; */
        margin-left: 0;
        margin-top: 10px;
    }
}

.student-head .button i {
    background-color: #3e9085;
    padding: 15px;
    font-size: 20px;
    margin-left: 15px;
    vertical-align: middle;
}

/*==================
	Student Add log
====================*/

.student-add-log {
    background-color: #f0f0f0;
    border: 1px #ccc solid;
    border-radius: 10px;
    margin: 20px 0;
    overflow: hidden;

    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
}

.student-add-log .head {
    padding: 15px;
    font-size: 18px;
}

.student-add-log.homework-add-log .head {
    background-color: #f8f8f8;
}

.student-add-log .head i.fa {
    font-size: 20px;
    margin-left: 10px;
}

.student-add-log h1 {
    color: #157b6e;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.student-add-log .row {
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;

    padding-right: 30px;
    padding-left: 30px;
}

@media (max-width: 991px) {
    .student-add-log .row {
        padding-right: 0;
        padding-left: 0;
    }
}

.student-add-log .row:nth-child(2n+1) {
    background-color: #f0f0f0;
}

.student-add-log .row:nth-child(2n) {
    background-color: #f8f8f8;
}

.student-add-log input[type="text"],
.student-add-log input[type="number"],
.student-add-log select {

    height: 30px;
    border: 1px #ccc solid;
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 992px) {
    .student-add-log .RecitationMemoraize {
        border-left: 1px #e0e0e0 solid;
    }
}

@media (max-width: 991px) {
    .student-add-log .RecitationMemoraize {
        border-bottom: 1px #e0e0e0 solid;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
}

.student-add-log .RecitationAttendance > div,
.student-add-log .RecitationMemoraize > div,
.student-add-log .RecitationReview > div,
.student-add-log .RecitationFixing > div {
    margin-top: 10px;
}

@media (max-width: 991px) {
    .student-add-log .RecitationAttendance > div[class*=col-],
    .student-add-log .RecitationMemoraize > div[class*=col-],
    .student-add-log .RecitationReview > div[class*=col-],
    .student-add-log .RecitationFixing {
        padding-left: 0;
        padding-right: 0;

    }

    .student-add-log .RecitationAttendance h1 {
        padding-right: 20px;
        padding-left: 20px;
    }

}

.student-add-log .RecitationAttendance {
}

.student-add-log .RecitationAttendance h1 {
    float: right;
    margin: 0;
}

.student-add-log .submit input[type="submit"] {
    background-color: #157b6e;
    color: #fff;
    padding: 15px 50px;
    border-radius: 5px;
    text-decoration: none;
    border: 0;
}

/*==================
	Student Progress
===================*/
/*http://jsfiddle.net/vg3s18k5/*/
.progress {
    border-top: 1px #e7e7e7 solid;
    border-bottom: 1px #e7e7e7 solid;

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #fbfbfb 21%, #f5f5f5 36%, #f7f7f7 37%, #ebebeb 68%, #e4e4e4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(21%, #fbfbfb), color-stop(36%, #f5f5f5), color-stop(37%, #f7f7f7), color-stop(68%, #ebebeb), color-stop(100%, #e4e4e4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #fbfbfb 21%, #f5f5f5 36%, #f7f7f7 37%, #ebebeb 68%, #e4e4e4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #fbfbfb 21%, #f5f5f5 36%, #f7f7f7 37%, #ebebeb 68%, #e4e4e4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #fbfbfb 21%, #f5f5f5 36%, #f7f7f7 37%, #ebebeb 68%, #e4e4e4 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 21%, #f5f5f5 36%, #f7f7f7 37%, #ebebeb 68%, #e4e4e4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e4e4e4', GradientType=0); /* IE6-9 */

}

.progress .item {
    padding: 20px 0;
}

/* progress right [graph] */

.progress .item .graph {
    float: right;
    position: relative;
    margin-left: 20px;
}

.progress .item .graph span {
    width: 100%;
}

.progress .item .graph .middle-data {
    position: absolute;;
    top: 20px;
    left: 0;
    right: 0;
}

.progress .item .graph .middle-data p,
.progress .item .graph .middle-data b {
    margin: 0;
    text-align: center;
}

.progress .item .graph .middle-data .row1 {
    font-size: 30px;
    line-height: 25px;
}

.progress .item .graph .middle-data .row1 {
}

.progress .item .graph .middle-data .row1 {
}

/* progress left [details] */
.progress .item .details {

}

.progress .item .details i {
    background-color: #d7d7d7;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    font-size: 20px;
    float: right;
    margin-left: 10px;
    margin-top: 10px;
}

.progress .item .details h2 {
    font-weight: bold;
    font-size: 22px;
    margin: 0;
    margin-bottom: 5px;
}

.progress .item .details h3 {
    font-weight: normal;
    font-size: 20px;
    margin: 0 5px 0 0;
}

.progress .item .details .details-info {
    margin-top: 7px;
}

.progress .item .details .details-info .row1 {
    color: #444;
    font-size: 17px;
    font-weight: bold;
}

/* progress positive or negative colors */
.progress .item.low-progress .graph .middle-data .row1,
.progress .item.low-progress .details i,
.progress .item.low-progress .details h2,
.progress .item.low-progress .details .details-info .row1 {
    color: #cb4b4b;
}

.progress .item.high-progress .graph .middle-data .row1,
.progress .item.high-progress .details i,
.progress .item.high-progress .details h2,
.progress .item.high-progress .details .details-info .row1 {
    color: #52b045;
}

/*===================
	student log
====================*/

.student-log {
    background-color: #fff;
    border: 1px #dfdfdf solid;
    padding: 10px 0;
}

@media (max-width: 991px) {
    .student-log {
        background-color: transparent;
        border-left-width: 0;
        border-right-width: 0
    }
}

.student-log article {
    background-color: #f5f5f5;
    border: 1px #e1e1e1 solid;
    text-align: center;
    margin: 0 10px;
    margin-top: -1px;
}

@media (max-width: 991px) {
    .student-log article {
        margin: 40px 0;
        border-width: 0;
        -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .25);
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, .25);
        border-radius: 7px;
        overflow: hidden;
    }
}

.recitationRight {
    padding: 0;
}

.recitationRight .RecitationDayName {
    font-size: 20px;
    margin: 0;
}

.recitationRight .RecitationDate {
    margin: 0
}

.recitationRight .RecitationDate .day {
    font-size: 40px;
    line-height: 50px;
    margin: 0
}

.recitationRight .RecitationDate .month {
    font-size: 20px;
    margin: 0
}

.recitationRight .RecitationDate .year {
    font-size: 13px;
    margin: 5px 0 0 0
}

.recitationRight .score-badge {
    background-color: #b63833;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: normal;
    padding: 2px 8px;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 7px;
}

@media (max-width: 991px) {
    .recitationRight {
        color: #fff;
        background-color: #3c8f84;
        padding: 7px 15px;
    }

    .recitationRight .RecitationDayName {
        float: right;
        font-size: 16px;
        padding-top: 0;
    }

    .recitationRight .RecitationDayName i {
        margin-left: 10px;
    }

    .recitationRight .RecitationDate {
        float: left;
    }

    .recitationRight .RecitationDate .day,
    .recitationRight .RecitationDate .month,
    .recitationRight .RecitationDate .year {
        display: inline;
        font-size: 16px;
        line-height: 16px;
        margin-right: 5px;
    }

    .recitationRight .score-badge {
        margin-top: 0;
    }

}

.recitationDetails {
    padding: 0;
}

.recitationDetails .edit-button-per-recitation {
    float: left;
    background: transparent;
    border: 0;
    color: #ccc;
}

.recitationDetails .edit-button-per-recitation:hover {
    color: #444;
}

.recitationDetails .RecitationFixing {
    padding: 0;
}

.recitationDetails .RecitationFixing .row1,
.recitationDetails .RecitationFixing .row2 {
    background-color: #fcfcfc;
    border: 1px #d7d7d7 solid;
    line-height: 84px;
    font-size: 18px;
    margin-top: -1px;
}

@media (max-width: 991px) {
    .recitationDetails .RecitationFixing .row1,
    .recitationDetails .RecitationFixing .row2 {
        line-height: 34px;
    }

}

.recitationDetails .RecitationFixing .row1 .title,
.recitationDetails .RecitationFixing .row2 .title {
    background-color: #419287;
    color: #fff;
    float: right;
    padding: 0 10px;
    min-width: 20%;

}

.recitationDetails .RecitationMemoraize,
.recitationDetails .RecitationReview {
    padding: 0;
}

.recitationDetails .RecitationMemoraize .row1,
.recitationDetails .RecitationMemoraize .row2,
.recitationDetails .RecitationReview .row1,
.recitationDetails .RecitationReview .row2 {
    background-color: #fcfcfc;
    border: 1px #d7d7d7 solid;
    line-height: 45px;
    font-size: 18px;
    margin-top: -1px;

}

.recitationDetails .RecitationMemoraize .row1 .ayah,
.recitationDetails .RecitationMemoraize .row2 .ayah,
.recitationDetails .RecitationReview .row1 .ayah,
.recitationDetails .RecitationReview .row2 .ayah {
    float: left;
    background-image: url('../img/Aya.png');
    background-size: contain;
    width: 35px;
    height: 45px;
    line-height: 45px;
    margin-left: 10px;
    font-size: 14px;
    text-align: center;
}

.recitationDetails .RecitationMemoraize .row1 .title,
.recitationDetails .RecitationMemoraize .row2 .title,
.recitationDetails .RecitationReview .row1 .title,
.recitationDetails .RecitationReview .row2 .title {
    background-color: #419287;
    color: #fff;
    float: right;
    padding: 0 10px;
    min-width: 20%;
}

.recitationDetails .RecitationMemoraize .row3,
.recitationDetails .RecitationReview .row3 {
    background-color: #fcfcfc;
    border: 1px #d7d7d7 solid;
    margin-top: -1px;

}

.recitationDetails .RecitationMemoraize .row3 .col1,
.recitationDetails .RecitationMemoraize .row3 .col2,
.recitationDetails .RecitationReview .row3 .col1,
.recitationDetails .RecitationReview .row3 .col2 {
    width: 50%;
    float: right;
    line-height: 45px;
    font-size: 18px;
    border-right: 1px #d9d9d9 solid;
}

.recitationDetails .RecitationMemoraize .row3 .col1 .title,
.recitationDetails .RecitationMemoraize .row3 .col2 .title,
.recitationDetails .RecitationReview .row3 .col1 .title,
.recitationDetails .RecitationReview .row3 .col2 .title {

    text-align: center;
    display: block;
    float: right;
    width: 50%;
}

.recitationDetails .RecitationMemoraize .row3 .col1,
.recitationDetails .RecitationReview .row3 .col1 {
    border-right: 6px #c4c4c4 solid;
}

@media (max-width: 991px) {

    .recitationDetails .RecitationMemoraize .row3 .col1,
    .recitationDetails .RecitationReview .row3 .col1 {
        border-right-width: 0;
    }
}

.recitationDetails .RecitationMemoraize .row4,
.recitationDetails .RecitationReview .row4 {
    background-color: #fcfcfc;
    border: 1px #d7d7d7 solid;
    margin-top: -1px;
    border-right: 7px #c4c4c4 solid;
    text-align: right;
    font-size: 16px;
    padding: 4px 10px 5px 10px;
}

@media (max-width: 991px) {

    .recitationDetails .RecitationMemoraize .row4,
    .recitationDetails .RecitationReview .row4 {
        border-right-width: 0;
    }

}

.nodata {
    display: table;
    height: 170px;
    text-align: center;
    width: 100%;
    border: 1px #d7d7d7 solid;
    background-color: #fcfcfc;
}

.nodata .message {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #878787;
    background-color: #fcfcfc;
    border: 0;

}

.nodata .message i {
    color: #c7c7c7;
    font-size: 40px;
}

.nodata .message p {
    font-size: 20px;
}

/* absent case*/

@media (min-width: 992px) {
    .absent .recitationRight {
        padding-left: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-right: 15px;
    }

    .absent .recitationRight h3 {
        display: none
    }

    .absent .recitationRight .RecitationDayName {
        font-size: 20px;
        margin: 0;
        padding-top: 0;
        background-color: #ebebeb;
    }

    .absent .recitationRight .RecitationDate {
        text-align: center;
        padding: 5px 10px;
        margin: 3px 10px;
    }

    .absent .recitationRight .RecitationDate .day,
    .absent .recitationRight .RecitationDate .month,
    .absent .recitationRight .RecitationDate .year {
        display: inline;
        font-size: 15px;
        line-height: 15px;
        margin: 0;
        margin-left: 10px;
    }

}

.absent .recitationDetails {
    line-height: 80px;
    text-align: right;
    font-size: 18px;
    vertical-align: middle;
    padding-right: 25px;
    padding-left: 25px;
}

.absent .recitationDetails i {
    font-size: 30px;
    vertical-align: middle;
    margin-left: 10px;
    color: #c7c7c7;
}

@media (max-width: 991px) {
    .absent .recitationDetails {
        text-align: center;
        line-height: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/*====================
	Footer
====================*/
footer {
    background-color: #e7e7e7;
    padding: 25px 0;
    text-align: center;
    color: #989898;
    font-family: tahoma;
    font-size: 14px;
    margin-top: 40px;
}
#footer a i {

    display: inline-block !important;
    width: 40px;
    height: 40px;
    line-height: 45px !important;
    margin: 5px;
    color: #d4c58d ;
    font-size: 20px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: #fff;
}
#footer a i:hover {
    color:#fff;
    background:#179280;
}
/*===================
	student log ( homework view)
====================*/
.view-homework {
    border: 1px #ccc solid;
    background-color: #fff;
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 5px;
}

.view-homework > h2 {
    background-color: #419287;
    color: #fff;
    margin: 0;
    padding: 15px;
    font-size: 20px;
}

.view-homework > h2 .inline-button {
    float: left;
    color: #fff;
    font-size: 15px;
    background-color: rgba(255, 255, 255, .25);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
}

.view-homework .view-col {
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    clear: both;
    padding-left: 20px;
    padding-right: 20px;
}

.view-homework .view-col h3 {
    margin: 0;
    margin-bottom: 15px;
    font-size: 21px;
}

.view-homework .view-col {
    font-size: 20px;
}

.view-homework .view-col .title-cell {
    margin-left: 30px;
    min-width: 100px;
    padding-top: 5px;
}

.view-homework .view-col .title-cell,
.view-homework .view-col .from-cell,
.view-homework .view-col .to-cell {
    float: right;
    height: 40px;
    line-height: 40px;
}

.view-homework .view-col .ayah {
    display: inline-block;
    background-image: url('../img/Aya.png');
    background-size: contain;
    width: 35px;
    height: 45px;
    line-height: 45px;
    margin-left: 20px;
    font-size: 14px;
    text-align: center;
    margin-right: 10px;
}

.view-homework .first-col {
    border-left: 1px #ccc solid;
}

/*=====================
inner pages shared styles
=======================*/

.page-title {
    color: #157b6e;
    background-color: #ebebeb;
    padding: 30px 0;
}

.page-title h1 {
    font-size: 35px;
    margin: 0;
}

form label {
    font-size: 18px;
}

form .required label:after {
    color: #e32;
    content: '*';
    display: inline;
}

.form .form-row {
    margin-bottom: 20px;
}

.form.full-width-form .form-row input,
.form.full-width-form .form-row select {
    width: 100%;
}

.form.full-width-form .form-row input {
    padding: 10px;
}

.form select {
    height: 40px;
    border: 1px #ccc solid;
    border-radius: 5px;
}

dl {
}

dl dt {
    float: right;
    clear: both;
    width: 35%;
    border-left: 1px rgba(0, 0, 0, .05) solid;
}

dl dd {
    float: left;
    width: 65%;
}

/* 50/50 mode */
dl.ratio-50-50 dt {
    width: 50%;
}

dl.ratio-50-50 dd {
    width: 50%;
}



dl dt,
dl dd {
    padding: 15px 25px;
}

dl dt .fa,
dl dd .fa {
    margin-left: 20px;
    font-size: 18px;
    color: rgba(0, 0, 0, .2);
}



dl dt.altrow,
dl dd.altrow,
.entry-detail dt:nth-child(4n+1) + dd,
.entry-detail dt:nth-child(4n+1){
    background-color: rgba(0, 0, 0, .03);
}

/* left actions */
.side-actions {
    background-color: rgba(225, 225, 225, .5);
    margin-top: -40px;
    border-radius: 3px;
    padding-bottom: 10px;
    border: 1px #ccc solid;
}

@media (max-width: 991px) {
    .side-actions {
        margin-top: 30px;
    }
}

.side-actions a {
    margin-bottom: 10px;
    display: block;
    border: 1px rgba(250, 250, 250, 1) solid;
    padding: 10px 15px;
    background-color: rgba(251, 251, 251, 1);
    text-decoration: none;
    color: #bcbcbc;
    font-size: 16px;
    font-weight: 600;
}

.side-actions a:hover {
    background-color: #d4c58d;
    color: #fff;
    border-color: #d4c58d;
}

.side-actions a i.fa {
    color: inherit;
    font-size: 20px;
    margin-left: 10px;
}

/*====================
	Page:
	candidates -> Add
====================*/

.conditions {
    background-color: #fff;
    border: 1px #ccc solid;
    border-radius: 6px;
    margin-top: 30px;
    padding: 7px 15px;
}

/*====================
	Page:
	candidates -> view
====================*/

.candidates.view {
    background-color: #fff;
    border-radius: 5px;
    border: 1px #ebebeb solid;
    margin-top: 20px;
    margin-bottom: 20px
}

.candidates.view .actions {
    text-align: center;
    padding: 15px;
    border-top: 1px #ebebeb solid;
}

.candidates.view .candidates-view-header {
    padding: 15px;
    border-bottom: 1px #ebebeb solid;
    margin: 0;
    color: #157b6e;
}

/*====================
	Page:
	candidates -> view
====================*/
.candidates.index {

}

.theTable {
    border: 1px #ccc solid;
    background-color: #fff;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
}

.theTable .theHead {
    padding: 5px 0;
    background-color: #F0F0F0;
    border-bottom: 1px #ccc solid;
    font-weight: 600;
    text-align: center;
}

.theTable .theRow {
    /* padding: 15px 0; */
    text-align: center;
    border-bottom: 1px #ccc solid;
}

.theRow td {
    padding: 5px;
}

.theTable .theRow:nth-child(2n+1) {
    background-color: rgba(0, 0, 0, .04);
}

.theTable .theHead > div,
.theTable .theRow > div,
.theTable .theHead tr > td{
    padding: 15px 0;
}

.theTable .theHead > div,
.theTable .theRow > div{
    float: right;
}

.theTable .theHead > div:nth-child(1),
.theTable .theRow > div:nth-child(1) {
    width: 7%;
}

.theTable .theHead > div:nth-child(2),
.theTable .theRow > div:nth-child(2) {
    width: 25%;
}

.theTable .theHead > div:nth-child(3),
.theTable .theRow > div:nth-child(3) {
    width: 13%;
}

.theTable .theHead > div:nth-child(4),
.theTable .theRow > div:nth-child(4) {
    width: 13%;
}

.theTable .theHead > div:nth-child(5),
.theTable .theRow > div:nth-child(5) {
    width: 20%;
}

.theTable .theHead > div:last-child,
.theTable .theRow > div:last-child {
    width: 22%;
}

/* four */


.theTable.theTable--4 .theHead > div:nth-child(1),
.theTable.theTable--4 .theRow > div:nth-child(1) {
    width: 7%;
}

.theTable.theTable--4 .theHead > div:nth-child(2),
.theTable.theTable--4 .theRow > div:nth-child(2) {
    width: 25%;
}

.theTable.theTable--4 .theHead > div:nth-child(3),
.theTable.theTable--4 .theRow > div:nth-child(3) {
    width: 18%;
}

.theTable.theTable--4 .theHead > div:last-child,
.theTable.theTable--4 .theRow > div:last-child {
    width: 50%;
}



.theTable .theRow > div > label {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

@media (min-width: 991px) {
    .theTable .theRow > div > label {
        display: none;
    }

}

@media (max-width: 991px) {

    /*
    .theTable .theHead>div:nth-child(1),
    .theTable .theRow>div:nth-child(1){
        width:10%;
    }
    .theTable .theHead>div:nth-child(2),
    .theTable .theRow>div:nth-child(2){
        width:35%;
    }
    .theTable .theHead>div:nth-child(3),
    .theTable .theRow>div:nth-child(3){
        width:16%;
    }
    .theTable .theHead>div:nth-child(4),
    .theTable .theRow>div:nth-child(4){
        width:16%;
    }
    .theTable .theHead>div:nth-child(5),
    .theTable .theRow>div:nth-child(5){
        width:23%;
    }
    .theTable .theHead>div:last-child{
        display: none;
    }
    .theTable .theRow>div:last-child{
        float: none;
        width: 100%;
    }*/
    .theTable .theHead {
        display: none;
    }

    .theTable .theHead > div,
    .theTable .theRow > div {
        float: none;
        width: 100% !important;
        padding: 15px 0;
        text-align: center;
    }

    .theTable .theRow > div:last-child {
        text-align: center;
    }

}
.role .theTable .theHead > div, .role .theTable .theRow > div,.role .theTable .theHead > div, .role .theTable .theRow > div{

    width: 14.33%;
}
.role .theTable .theHead > div:nth-child(1), .role .theTable .theRow > div:nth-child(1),.role .theTable .theHead > div:nth-child(5), .role .theTable .theRow > div:nth-child(5){

    width: 7%;
}

.paging-outer {
    text-align: center;
}

.paging span {
    margin-left: 15px;
    margin-right: 15px;
}
/*==========================
	Page:
	Education
==========================*/
  .educations{
    margin-bottom: 145px;
  }
/*==========================
	Page:
	attendances Teachers
==========================*/

.attendancesTeachers > h2 {
    background-color: #ebebeb;
    text-align: right;
    margin: 0;
    padding: 15px;
    font-size: 24px;
    border: 1px #ccc solid;
    font-size: 22px;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm {
    background-color: #fff;
    border: 1px #ccc solid;
    margin: 20px 0;
    padding: 10px;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-title,
.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-icon,
.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit {
    display: inline;
    float: right;
    margin: 0;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-title label {
    margin-left: 20px;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-title #select_date {
    padding: 5px;
    margin: 0 10px;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-icon.datepicker_img img {
    width: 25px;
    height: 25px;
    margin-top: 3px;
}

.ui-datepicker-inline.ui-datepicker {
    position: absolute;
    z-index: 99999;
    margin-top: 30px;
}
.start_date .datepicker_img , .end_date .datepicker_img{
  position: absolute;
  top: 43px;
  left: 25px;
}
.start_date .ui-datepicker-inline.ui-datepicker , .end_date .ui-datepicker-inline.ui-datepicker{
  margin-top: 5px !important;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit {
    margin-right: 20px;
}

.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit button,
.attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit input[type="submit"] {
    background-color: #157b6e;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    text-decoration: none !important;
    border: 0;
    margin-right: 20px;
}

@media (max-width: 767px) {

    .attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit {
        display: block;
        float: none;
    }

    .attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit button,
    .attendancesTeachers #AttendancesTeacherGetAttendanceForm .col-submit input[type="submit"] {
        width: 100%;
        margin: 50px 0 20px 0;
        display: block;
    }
}

.attendancesTeachers #AttendancesTeacherRegisterForm {
}

.attendancesTeachers #AttendancesTeacherRegisterForm .row {
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px #ccc solid;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    margin: 0;
}

.attendancesTeachers #AttendancesTeacherRegisterForm .row:first-child {
    border-top: 1px #ccc solid;
}

.attendancesTeachers #AttendancesTeacherRegisterForm .row:nth-child(2n+1) {
    background-color: #f8f8f8;
}

.attendancesTeachers #AttendancesTeacherRegisterForm .row .col-name {
    line-height: 40px;
}

.attendancesTeachers .status-flag {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50px;
    overflow: hidden;
    display: inline-block;
    margin-left: 10px;
}

.attendancesTeachers .status-flag[data-status="green"] {
    background-color: #2ECC71;
}

.attendancesTeachers .status-flag[data-status="red"] {
    background-color: #CF000F;
}

.attendancesTeachers .status-flag[data-status="orange"] {
    background-color: #F7CA18;
}

.attendancesTeachers .legend {
    padding: 10px;
    margin: 10px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 5px;
}

.attendancesTeachers .legend .status-flag {
    margin-right: 25px;
    margin-left: 5px;
}

.attendancesTeachers .submit {
    margin: 20px 0;
}

.attendancesTeachers .submit .button {
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
    min-width: 200px;
}

/*==========================
	Page:
	studentTodaySummaryBox
==========================*/

.studentTodaySummary {
    margin: 10px 0;
    padding: 10px;
}

.studentTodaySummaryBox {
    background-color: #fff;
    border: 1px #ccc solid;
    border-radius: 10px;
    padding: 5px 10px;
}

.studentTodaySummaryBox .StudentName {
    width: 30%;
    float: right;
    display: block;
    line-height: 35px;
    padding-right: 10px;
}

.studentTodaySummaryBox .SummaryContent {
    width: 70%;
    float: right;
    display: block;
}

.studentTodaySummaryBox .SummaryContent .StudentName {
    width: 40%;
    float: right;
}

.StudentName .label {
    padding: 5px 10px;
    border-radius: 10px;
    margin-left: 10px;
}

.StudentName .label.label-default {
    background-color: #e1e1e1;
    color: #000;
}

.StudentName .label.label-success {
    background-color: green;
    color: #fff;
}

.studentTodaySummaryBox .SummaryContent .attendance {
    width: 60%;
    float: right;
}

.studentTodaySummaryBox .SummaryContent .attendance p {
    width: 20%;
    display: block;
    float: right;
    line-height: 35px;
    margin: 0;
}

.studentTodaySummaryBox .SummaryContent .attendance .attended,
.studentTodaySummaryBox .SummaryContent .attendance .absent,
.studentTodaySummaryBox .SummaryContent .attendance .excused {
    float: right;
    margin: 0 10px;
}

@media (max-width: 991px) {

    .studentTodaySummaryBox .StudentName {
        width: 100%;
        float: none;
        display: block;
        padding-right: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .studentTodaySummaryBox .SummaryContent {
        width: 100%;
        float: none;
    }

    .studentTodaySummaryBox .SummaryContent .StudentName {
        width: 100%;
        float: none;
    }

    .studentTodaySummaryBox .SummaryContent .attendance {
        width: 100%;
        float: none;
        text-align: center;
    }

    .studentTodaySummaryBox .SummaryContent .attendance p {
        width: auto;
        float: none;
        display: inline;
    }

    .studentTodaySummaryBox .SummaryContent .attendance .attended,
    .studentTodaySummaryBox .SummaryContent .attendance .absent,
    .studentTodaySummaryBox .SummaryContent .attendance .excused {
        float: none;
        display: inline-block;
    }
}

/* =============================
	Login form
===============================*/

.login-form {
    background-color: #fff;
    border: 1px #ccc solid;
    border-radius: 10px;
    margin-top: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.login-form label {
    font-weight: 400;
}

.login-form .col-md-6 {
    margin-top: 10px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 5px 10px;
}

@media (max-width: 991px) {
    .login-form .text-right,
    .login-form .text-left {
        text-align: center;
    }

    .login-form .text-right {
        padding-right: 40px;
        padding-left: 40px;
    }

    .login-form input {
        width: 100%;
        margin-bottom: 20px;
    }

    .login-form .submit {
        text-align: center;
    }

    .login-form .button {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        display: block;
    }
}

.login-form .submit {
    margin-top: 20px;
}

.login-form .submit .button {
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 20px;
}

.login-form .note {
    color: #ccc;
}

/*===============================
message-full-width
==============================*/

.message-full-width {
    background-color: #fff;
    margin-top: 40px;
    padding: 10px;
    border-radius: 10px;
    border: 1px #ccc solid;
}

.message-full-width .message {
    margin-bottom: 20px;
    border: 0;
}

/* =============================
	Alerts
===============================*/

.error-message {
    margin-top: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;

    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.message {
    margin-top: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;

    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.message.alert-success {
    background-color: #a9e6a9;
    border-color: #169016;
    color: #169016;
}

.alert-inline {
    font-weight: 400;
    font-size: 16px;
}

.alert-inline.alert-inline-danger {
    color: #a94442;
}

/* =============================
	Print -> Reports
===============================*/
.for-print {
    color: #000;
}

.for-print table {
    width: 95%;
    border: 1px #ccc solid;
    margin: 0 auto
}

.for-print tr {
    text-align: center;
}

.for-print td, .for-print th {
    text-align: center;
    border: 1px #ccc solid;
    padding: 5px 0;
}

.for-print th {
    font-weight: bold;
    padding: 10px 0;
}

/* =============================
	OverAll Reports
===============================*/
.filtersDropDown{
    margin-top: 5px;
    height: 30px;
    border: 1px #ccc solid;
    background-color: #f2f1f1;
    border-radius: 5px;
    font-weight: 400;
    min-width: 180px;
    margin-right: 20px;
}
.filtersPanel {
    background: #fff;
    border-radius: 10px;
    border: 1px #d7d7d7 solid;
    margin: 20px 0;
    padding: 0 0 10px 0;
}

.filtersPanel__item {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
}

.filtersPanel__item .radio input[type=radio],
.filtersPanel__item .radio-inline input[type=radio],
.filtersPanel__item .checkbox input[type=checkbox],
.filtersPanel__item .checkbox-inline input[type=checkbox] {
    margin: 0 15px 0 0;
    position: relative;
}

.filtersPanel__item label {
    font-size: 14px;
    padding-right: 10px;
}

.filtersPanel__itemHead {
    display: block;
    background-color: #ebebeb;
    padding: 10px 20px 10px 20px;
    text-align: right;
    font-size: 18px !important;
}

.filtersPanel__itemHead .fa {
    margin-left: 10px;
}

.filtersPanel__item:first-child .filtersPanel__itemHead {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.filtersPanel__submit {
    margin: 0 10px;
    padding: 5px 50px !important;
}

.datepicker_img {
    display: inline-block;
}

.filterResultsPanel {
    margin: 20px 0;
}

.filterResultsPanel__table {
    border: 1px #ccc solid !important;
    background-color: #fff;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
}

.filterResultsPanel__table,
.filterResultsPanel__table tr,
.filterResultsPanel__table th,
.filterResultsPanel__table td {
    text-align: center;
}

/*===============================
	Dashboards
=================================*/
.chart_table {
    overflow: hidden;
    margin: 20px 0;
    border: 1px #ccc solid;
    background: #fff;
    border-radius: 5px;
}

.chart_table div {
    margin: 0 auto;
}

.ui-tabs {
    padding: 0 !important;
    border: 0 !important;
}

.ui-tabs-nav {
    border-radius: 0 !important;
    background: #f5f5f5 !important;
    border: 0 !important;
    padding: 0 !important;
}

.ui-tabs-nav li {
    margin: 1px 0 0 .2em !important;
}

.ui-tabs-panel.ui-widget-content.ui-corner-bottom {
    border: 1px #ccc solid;
}

.ui-widget-content table {
    width: 100%;
}

.ui-widget-content table td,
.ui-widget-content table th {
    font-size: 16px;
    line-height: 25px;
    padding: 7px 0 !important;
    text-align: center;
}

.ui-widget-content table tr:nth-child(2n+1) {
    background-color: #ebebeb;
    border-bottom: 1px #ccc solid;
}

.ui-widget-content table tr:nth-child(2n) {
    background-color: #f8f8f8;
    border-bottom: 1px #ebebeb solid;
}

/*===============================
	Charts
===============================*/
.chart_container {
    overflow: hidden;
    margin: 20px 0;
    border: 1px #ccc solid;
    background: #fff;
    border-radius: 5px;
}

.chart_container div {
    margin: 0 auto;
}

/*===============================
	my students summary
===============================*/

.StudentName .label.label-danger,
.StudentName .label.label-danger a {
    color: #fff !important;
}

.form-inlined{
    background: #fff;
    margin: 0 10px 10px 10px;
    border: 1px #ebebeb solid;
    padding: 15px;
}


/*===============================
	Term Table
=================================*/

.termTable {
    overflow-x: auto;
}

.termTable__container{
    min-width: 991px;
}

.termTable__header{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    background-color: #419287;
    margin-bottom: 10px;
    font-size: 22px;
    margin-top: 10px;
}

.termTable__row {
    margin-bottom: 5px;

}

.termTable__row--head {
    margin-bottom: 5px;
    margin-top: 5px;
}

.termTable__col {
    width: 12%;
    margin-left: .25%;
    margin-right: .25%;
    float: right;
    /*outline: 1px #ccc solid;*/
    background-color: #fff;

    min-height: 80px;
}

.termTable__col--head {
    text-align: center;

    background-color: #419287;
    color: #fff;
    font-size: 20px;
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;

    min-height: initial;
}

.termTable__col--sideHead{
    background-color: #d4c58d;
    color: #fff;

    padding: 5px;

    -webkit-border-radius: 0 7px 7px 0;
    -moz-border-radius: 0 7px 7px 0;
    border-radius: 0 7px 7px 0;
}

.termTable__monthCell {}
.termTable__monthCell__count{
    width: 30%;
    float: right;

    font-size: 30px;
    text-align: center;
}
.termTable__monthCell__countSuper{
    font-size: 12px;
    vertical-align: super;
}
.termTable__monthCell__items{
    width: 70%;
    float: left;
    text-align: left;
    position: relative;
    height: 70px;
}
.termTable__monthCell__itemsTop{
    height: 40px;
    position: absolute;
    top:0;
    left:0;
}

.termTable__monthCell__itemsBottom{
    position: absolute;
    bottom: 0;
    left:0;
}
.termTable__monthCell__item{
    font-size: 14px;
}


.termTable__dayCell {
    border: 1px #ccc solid;
    background-color: #fff;
    min-height: 80px;
}

.termTable__dayCell--eid {
    background: rgb(217, 242, 229);
}

.termTable__dayCell--exam {
    background: rgb(255, 205, 215);
}

.termTable__dayCell--off {
    background: rgb(200, 200, 200);
}

.termTable__dayCell__days {
    width: 20%;
    float: right;
    position: relative;
    background-color: #e7e7e7;
    text-align: center;
    border-left: 1px #ccc solid;
}

.termTable__dayCell__dayTop {
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    border-bottom: 1px #ccc solid;
}

.termTable__dayCell__dayBottom {
    line-height: 40px;
    height: 40px;
    font-size: 16px;
}

.termTable__dayCell__text {
    width: 80%;
    float: left;
    padding: 7px;
    max-height: 80px;
    overflow-y: auto;
}


.termTable__legend{
    margin-top: 20px;
    border-top: 1px #ccc solid;
    padding-top: 7px;
    text-align: left;
}
.termTable__legend__item{
    margin-right: 20px;
    display: inline-block;
}
.termTable__legend__itemBox{
    border: 1px #444 solid;
    height: 15px;
    width: 20px;
    display: inline-block;
}
.termTable__legend__itemTitle{
    font-size: 14px;
    margin-right: 5px;
    display: inline-block;
}





/* ==============================
	dataTables -> header actions
================================*/

.dataTables_wrapper .ui-buttonset {
    list-style-type: none !important;
    padding: 0;
    margin: 10px 0;
}

.dataTables_wrapper .ui-buttonset li {
    list-style-type: none !important;
    display: inline-block;
    margin-left: 10px;
}

.dataTables_wrapper .ui-buttonset .ui-button{
    background-color: #157b6e !important;
    color: #fff !important;
    border-radius: 5px;
    border: 0;
    padding: 2px 5px
}

.filterResultsPanel .toggle-vis-area{
    font-size: 0;
}

.filterResultsPanel .toggle-vis-area .toggle-vis {
    font-size: 14px;
    margin-left: 10px;
    border: 1px #ccc solid;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 5px;
    cursor: pointer;
    text-decoration: none !important;
}

.highlight_btn{
  background-color : #157b6e !important;
  color : #fff !important
}
/*====================
    student log actions
====================*/

a.load_more {
    display: block;
    background: #419287;
    margin: 10px auto;
    color: #fff;
    line-height: 40px;
    text-align: center;
    border-radius: 7px;
    font-weight: bold;
    font-size: 16px;
    min-width: 30%;
    width: 200px;
}

img.recitation_loader{
    display: block;
    text-align: center;
    margin: 10px auto;
}


/*=============================
checbox
=============================*/

input[type="checkbox"].checkbox-styled-flat {
    position: absolute;
    margin: 8px 16px 0 0;
}
input[type="checkbox"].checkbox-styled-flat + label {
    position: relative;
    padding: 5px 50px 0 0;
    line-height: 2.0em;
}
input[type="checkbox"].checkbox-styled-flat + label:before {
    content: "";
    position: absolute;
    display: block;
    right: 0;
    top: 10px;
    width: 40px; /* x*5 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].checkbox-styled-flat + label:after {
    content: "";
    position: absolute;
    display: block;
    right: 0px;
    top: 10px;
    width: 24px; /* x*3 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type="checkbox"].checkbox-styled-flat + label:hover:after {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
input[type="checkbox"].checkbox-styled-flat:checked + label:after {
    margin-right: 16px;
}
input[type="checkbox"].checkbox-styled-flat:checked + label:before {
    background: #55D069;
}

.inline_check_box{
    display: inline;
}
.inline_check_box  input[type=checkbox] , .selected_working_days input[type=checkbox] {
    display: none;
}
.inline_check_box  input[type=checkbox] + label , .selected_working_days input[type=checkbox] + label{
    cursor: pointer;
}
.inline_check_box  input[type=checkbox] + label , .selected_working_days  input[type=checkbox] + label{
    color: lightgray;
    font-weight: normal;
}
.inline_check_box  input[type=checkbox]:checked + label , .selected_working_days input[type=checkbox]:checked + label{
    color: #222222;
    font-weight: normal;
}
.inline_check_box  input[type=checkbox] + label::before , .selected_working_days input[type=checkbox] + label::before{
    content:url(chk_off.png);
    background-repeat: no-repeat;
    direction: rtl;
    text-align: right;
    padding-left: 30px;
    background-position: right;
}
.inline_check_box  input[type=checkbox]:checked + label::before , .selected_working_days input[type=checkbox]:checked + label::before{
    content:url(chk_on.png);
    background-repeat: no-repeat;
    direction: rtl;
    text-align: right;
    padding-left: 30px;
    background-position: right;
}

/* LARGE */

input[type="checkbox"].checkbox-styled-flat-lg {
    margin: 10px 20px 0 0;
}
input[type="checkbox"].checkbox-styled-flat-lg + label {
    position: relative;
    padding: 7px 60px 0 0;
    line-height: 2.3em;
}
input[type="checkbox"].checkbox-styled-flat-lg + label:before {
    width: 50px; /* x*5 */
    height: 30px; /* x*3 */
    border-radius: 20px; /* x*2 */
}
input[type="checkbox"].checkbox-styled-flat-lg + label:after {
    width: 30px; /* x*3 */
    height: 30px; /* x*3 */
    border-radius: 20px; /* x*2 */
}
input[type="checkbox"].checkbox-styled-flat-lg + label:hover:after {
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
input[type="checkbox"].checkbox-styled-flat-lg:checked + label:after {
    margin-right: 20px; /* x*2 */
}


/* ==============================
	select2 dropdown
================================*/
.select2-container .select2-selection--single{
    height: 44px !important;
    border-radius: 0 !important;
    direction:rtl !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    top:8px !important;
    right:auto !important;
    left:1px !important;
}
.select2-results__option[aria-selected]{
  text-align: right;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  text-align: right;
}
/* alert */
.alert-danger{
  color :red;
  margin-top: 5px;
}
/* bulk_subscribe */
.bulk_subscribe{
  margin-top: 5px;
}
/*filter input*/
/* ==============================
	fonts
================================*/

@font-face {
    font-family: "GESS";
    src: url(../fonts/GE_SS_Two_Medium.eot?) format("eot"), url(../fonts/GE_SS_Two_Medium.woff) format("woff"), url(../fonts/GE_SS_Two_Medium.ttf) format("truetype"), url(../fonts/GE_SS_Two_Medium.svg#GESSTwoMedium-Medium) format("svg");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'GESS';
    src: url(../fonts/GESSTwoLight.eot);
    src: url(../fonts/GESSTwoLight.eot?#iefix) format("embedded-opentype"), url(../fonts/GESSTwoLight-Light.ttf) format("truetype"), url(../fonts/GESSTwoLight.woff) format("woff");
    font-style: normal;
    font-weight: 500
}