@import url('https://fonts.googleapis.com/css?family=Play:400,700&subset=cyrillic,cyrillic-ext,greek,latin-ext,vietnamese');
/*Style Main NAvbar*/
body{
    font-family: 'Roboto', sans-serif;
}
.top-header {
    margin-bottom: 20px;
}
.sticky-wrapper{
    height: auto!important;
}
.logo-brand {
    height: 70px;
    margin-left: 90px;
}

.logo-area {
    background: #fff;
}

.arrow {
    float: right;
    display: none;
}
.chart-list{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    
}
.padd-0{
    padding: 0px;
}
/******************Social Area*************************************/

/************Social emd***************/

.user-profile img {
    height: 65px;
    width: 65px;
    border-radius: 100%;
    border: 2px solid #fff;
    padding: 4px;
}

.user-profile {
    background: #26ace2;
    padding: 4px;
}

.user-profile h3 {
    margin: 0px;
    font-size: 18px;
    color: #fff;
}

.user-profile-buttom li a {
    padding: 11px 16px;
    background: #e91740;
    color: #fff;
}

.user-profile-buttom li a:focus,
.user-profile-buttom li a:hover {
    background: #e91740 !important;
}

.user-profile-buttom .open > a,
.user-profile-buttom .open > a:focus,
.user-profile-buttom .open > a:hover {
    background: #e91740;
    border: none;
}

.user-profile-buttom .dropdown-menu {
    padding: 0px;
    margin: 0px;
    width: 200px;
    border: none;
    border-radius: 0px;
    z-index: 9999;
    padding: 4px;
}

.user-profile-buttom .dropdown-menu li {
    margin-bottom: 10px;
}

.user-profile-buttom .dropdown-menu li a {
    background: #26ace2;
}

.user-profile-buttom .dropdown-menu li a:hover {
    box-shadow: none;
    color: #fff;
}

.school_name {
    font-size: 35px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 70px;
    color: #e91740;
}

.main-navbar {
    padding: 0px;
    background: #fff !important;
    border-bottom: none;
    box-shadow: -4px 5px 9px -5px;
}

.home-content-area {
        padding: 20px 20px;
    box-shadow: 0px 0px 10px -4px;
    margin-bottom: 15px;
    border-radius: 10px;
    background: #fff;
    height: 479px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
}

.content-box {
    position: relative;
    box-shadow: 1px 4px 10px -6px #222;
    margin-bottom: 30px;
    padding: 10px 0px 1px;

}

.content-box:hover .content-box-icon {
    box-shadow: 1px 4px 10px -6px;
}

.content-box:hover a,
.content-box:active a,
.content-box:focus a {
    text-decoration: none;
}

.content-box a h4 {
    color: #222;
    font-weight: 700;
    font-family: serif;
    font-size: 15px;
}

.content-box-icon {
    width: 50px;
    height: 50px;
    background: #ce2a1b;
    display: block;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    border-radius: 100%;
    margin: auto;
    color: #fff;
}
/*leftside-boxleftside-boxleftside-boxleftside-box*/
.leftside-box{
background: #fff;
    margin-bottom: 15px;
}
.leftside-chart {
    background: #fff;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: 4px 3px 10px -6px;
}
.bg-vaiolet {
    background: #673ab7;
}

.bg-blue {
    background: rgb(38, 172, 226);
}

.bg-light-red {
    background: #e91740;
}

.bg-light-blue {
    background: #009688;
}

h3 {
    font-family: 'Inconsolata';
}

h1 {
    font-family: 'Inconsolata';
}

h2 {
    font-family: 'Inconsolata';
}

h4 {
    font-family: 'Inconsolata';
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
}

.tn-box {
    width: 360px;
    position: relative;
    margin: 0 auto 20px auto;
    padding: 25px 15px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: default;
    display: none;
}

.tn-box p {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding: 0 10px 0 60px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.tn-box p:before {
    text-align: center;
    border: 3px solid rgba(255, 255, 255, 1);
    margin-top: -17px;
    top: 50%;
    left: 20px;
    width: 30px;
    content: 'i';
    font-size: 30px;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: 5px;
    left: 2%;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(255, 255, 255, 0.6);
}


/* Colors */

.tn-box-color-1 {
    background: #ffe691;
    border: 1px solid #f6db7b;
}

.tn-box-color-1 p {
    color: #7d5912;
}

.tn-box-color-2 {
    background: #99ffb1;
    border: 1px solid #7ce294;
}

.tn-box-color-2 p {
    color: #2d8241;
}

.tn-box-color-3 {
    background: #dd9aff;
    border: 1px solid #b367db;
}

.tn-box-color-3 p {
    color: #69288b;
}


/* Fire the animations */

input.fire-check:checked ~ section .tn-box {
    display: block;
    -webkit-animation: fadeOut 5s linear forwards;
    -moz-animation: fadeOut 5s linear forwards;
    -o-animation: fadeOut 5s linear forwards;
    -ms-animation: fadeOut 5s linear forwards;
    animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
    -webkit-animation: runProgress 4s linear forwards 0.5s;
    -moz-animation: runProgress 4s linear forwards 0.5s;
    -o-animation: runProgress 4s linear forwards 0.5s;
    -ms-animation: runProgress 4s linear forwards 0.5s;
    animation: runProgress 4s linear forwards 0.5s;
}


/* If you use JavaScript you could add a class instead: */

.tn-box.tn-box-active {
    display: block;
    -webkit-animation: fadeOut 5s linear forwards;
    -moz-animation: fadeOut 5s linear forwards;
    -o-animation: fadeOut 5s linear forwards;
    -ms-animation: fadeOut 5s linear forwards;
    animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
    -webkit-animation: runProgress 4s linear forwards 0.5s;
    -moz-animation: runProgress 4s linear forwards 0.5s;
    -o-animation: runProgress 4s linear forwards 0.5s;
    -ms-animation: runProgress 4s linear forwards 0.5s;
    animation: runProgress 4s linear forwards 0.5s;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    99% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }
    99% {
        opacity: 0;
        -moz-transform: translateY(-30px);
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        -o-transform: translateY(0px);
    }
    99% {
        opacity: 0;
        -o-transform: translateY(-30px);
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }
    99% {
        opacity: 0;
        -ms-transform: translateY(-30px);
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        transform: translateY(0px);
    }
    99% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes runProgress {
    0% {
        width: 0%;
        background: rgba(255, 255, 255, 0.3);
    }
    100% {
        width: 96%;
        background: rgba(255, 255, 255, 1);
    }
}

@-moz-keyframes runProgress {
    0% {
        width: 0%;
        background: rgba(255, 255, 255, 0.3);
    }
    100% {
        width: 96%;
        background: rgba(255, 255, 255, 1);
    }
}

@-o-keyframes runProgress {
    0% {
        width: 0%;
        background: rgba(255, 255, 255, 0.3);
    }
    100% {
        width: 96%;
        background: rgba(255, 255, 255, 1);
    }
}

@-ms-keyframes runProgress {
    0% {
        width: 0%;
        background: rgba(255, 255, 255, 0.3);
    }
    100% {
        width: 96%;
        background: rgba(255, 255, 255, 1);
    }
}

@keyframes runProgress {
    0% {
        width: 0%;
        background: rgba(255, 255, 255, 0.3);
    }
    100% {
        width: 96%;
        background: rgba(255, 255, 255, 1);
    }
}


/* Let's add some different durations for the demo */

input.fire-check:checked ~ section .tn-box:nth-child(2) {
    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    -o-animation-duration: 6s;
    -ms-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

input.fire-check:checked ~ section .tn-box:nth-child(2) .tn-progress {
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -o-animation-duration: 5s;
    -ms-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

input.fire-check:checked ~ section .tn-box:nth-child(3) {
    -webkit-animation-duration: 9s;
    -moz-animation-duration: 9s;
    -o-animation-duration: 9s;
    -ms-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

input.fire-check:checked ~ section .tn-box:nth-child(3) .tn-progress {
    -webkit-animation-duration: 7.5s;
    -moz-animation-duration: 7.5s;
    -o-animation-duration: 7.5s;
    -ms-animation-duration: 7.5s;
    animation-duration: 7.5s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    animation-delay: 0.9s;
}


/* Last example pauses on hover (causes problems in WebKit browsers) */

.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}

html {
    background-color: #fff !important;
}

#loader img {
    left: 46%;
    margin: 0 auto;
    position: absolute;
}

#page-wrapper {
    padding: 50px 0px;
    background: #f5f5f5;
}

.admin_footer {
    position: absolute;
    bottom: 0;
}

.student_photo_preview img {
        height: 100px;
    margin-bottom: 15px;
}

.student_photo_preview {
   
}

.colCentered {
    float: none;
    margin: 0 auto;
}

.center-form {
    margin: 0 auto;
}

.required_field {
    position: absolute;
    right: 0;
    top: 10px;
    color: red;
}

.msg_container {
    width: 400px;
    border: 1px solid #D8D8D8;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial;
    font-size: 11px;
    text-transform: uppercase;
    background-color: rgb(236, 255, 216);
    color: green;
    text-align: center;
    margin: 0 auto;
}

.student_attendance_remark {
    height: 35px;
    font-size: 10px;
}


/*Bootstrap overwrite*/

.form-control:focus {
    border-color: #66afe9;
    box-shadow: none !important;
    outline: 0 none;
}

.update_modal {
    max-height: 600px;
    overflow-y: scroll;
}

.update_modal .modal-header {
    background-color: #FFE4C4;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 35px;
}

td {
    vertical-align: middle !important;
}

.student_pro-photo {
    border: 5px solid #EEEEEE;
}

.st-name {
    height: 100px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    /* column | row */
}

.st-main-container {
    margin-top: 2%;
}

.an1 {
    animation-duration: 2s;
    animation-delay: .3s;
}

.an2 {
    animation-duration: 2s;
    animation-delay: .5s;
}

.an3 {
    animation-duration: 2s;
    animation-delay: .7s;
}

.an4 {
    animation-duration: 2s;
    animation-delay: .9s;
}

.an5 {
    animation-duration: 2s;
    animation-delay: 1.1s;
}

.an6 {
    animation-duration: 2s;
    animation-delay: 1.3s;
}

.modal-header {
    background-color: #eee;
}

.modal-footer {
    background-color: #eee;
}

button.close {
    background: #ddd none repeat scroll 0 0;
    border: 1px dotted #006699;
    cursor: pointer;
    padding: 0 7px !important;
}

.slider_img_preview {
    width: 100px;
}

.msg {
    display: none;
}

.testimonial {
    padding: 10px 20px;
}

.testimonial p {
    font-family: "Inconsolata";
    font-size: 21px;
    letter-spacing: 1px;
    line-height: 2;
}

.testimonial h3 {
    font-family: "Inconsolata";
    font-size: 34px;
    font-weight: bold;
}

.testimonial span {
    font-family: "Inconsolata";
    text-decoration: underline;
    font-weight: bold;
    font-style: italic;
}

.testimonial_footer {
    margin-top: 50px;
    padding: 15px 0;
}

.testimonial_footer .date {
    margin-top: 30px !important;
}

.btn-mred {
    color: #FFFFFF;
    background-color: #E01919;
    border-color: #BD4242;
}

.btn-mred:hover,
.btn-mred:focus,
.btn-mred:active,
.btn-mred.active,
.open .dropdown-toggle.btn-mred {
    color: #FFFFFF;
    background-color: #871111;
    border-color: #BD4242;
}

.btn-mred:active,
.btn-mred.active,
.open .dropdown-toggle.btn-mred {
    background-image: none;
}

.btn-mred.disabled,
.btn-mred[disabled],
fieldset[disabled] .btn-mred,
.btn-mred.disabled:hover,
.btn-mred[disabled]:hover,
fieldset[disabled] .btn-mred:hover,
.btn-mred.disabled:focus,
.btn-mred[disabled]:focus,
fieldset[disabled] .btn-mred:focus,
.btn-mred.disabled:active,
.btn-mred[disabled]:active,
fieldset[disabled] .btn-mred:active,
.btn-mred.disabled.active,
.btn-mred[disabled].active,
fieldset[disabled] .btn-mred.active {
    background-color: #E01919;
    border-color: #BD4242;
}

.btn-mred .badge {
    color: #E01919;
}

.glyphsize {
    font-size: 48px !important;
}

.selecionado {
    background-color: #483D8B;
}

.pagina {
    float: left;
    margin-bottom: 5px;
}

.tile {
    float: left;
    height: 100px;
    margin: 15px 25px 0 0;
    padding: 2px;
    width: 145px;
}

.amarelo {
    background: #daa520 none repeat scroll 0 0;
    color: white;
    padding: 14px 0;
    text-align: center;
}

.box_shaddow {
    box-shadow: 0 16px 26px -10px rgba(90, 90, 90, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.box_custom {
    height: 100px;
    background-color: blue;
}

.amarelo i {
    font-size: 28px;
    margin-bottom: 6px;
}

.amarelo p {
    font-size: 20px;
}

.vermelho {
    background: #CD0000;
}

.azul {
    background: #4682B4;
}

.verde {
    background-color: #2E8B57;
}


/*++++++++++++++++++++++++++++++++++++++++*/

/*Table Desigm*/

/*-----------------------------------------*/

.heading-box {
    position: relative;
   
    overflow: hidden;
}

.heading-box-sm {
    margin-top: 20px;
}

.heading-box-sm .table_title_heading {
    font-size: 20px;
}

.table_title_heading {
    display: none;
    margin-bottom: 0px;
    text-align: center;
    position: relative;
    font-size: 25px;
    font-weight: 600 !important;
    color: #282f39 !important
}

.custom_th {
    color: #26ace2;
}

.custom_table_design thead tr th {
    border-top: 1px solid #ddd!important;
    
    padding: 10px 5px;
    background: #efefef !important
    color: #343434;
    font-size: 11px;
}

.custom_table_design tbody tr td {
    
    padding: 4px 10px !important;
    font-size: 12px;
}

.text-whtite {
    color: #fff;
}

.table_edit-btn {
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 6px 10px !important;
    background: green !important;
}

.table_edit-btn1 {
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 6px 10px !important;
    background: #26ace2 !important;
}

.table-delete-btn {
    color: #fff !important;
    border: none;
    border-radius: 0px;
    padding: 6px 10px !important;
    background: red !important;
}

.table-delete-btn1 {
    color: #fff !important;
    border: none;
    border-radius: 0px;
    padding: 6px 10px !important;
    background: #e91740 !important;
}

.massage-button-area {
    background: #f5f5f5;
    padding: 10px 15px;
    height: 600px;
}

.mar-top-20 {
    margin-top: 20px;
}

/**********Modal style*************/

.edit_modal_box .modal-header {
    padding: 12px 20px;
    background: #26ace2;
    color: #fff;
}

.edit_modal_box .modal-header h4 {
    font-size: 20px;
    text-transform: uppercase;
}

.edit_modal_box .modal-header .modal-close_btn {
    background: #fff;
}

.edit_modal_box .modal-body .control-label {
    font-size: 13px !important;
    margin: 0px;
}

.form_group .form-control {
    border-radius: 0px;
    border: none;
    border-bottom: 2px solid #c5c5c5;
    box-shadow: 0px 0px 0px 1px #c5c5c5;
}

.form_group textarea {
    min-height: 120px;
}

.form_group .control-label {
        font-size: 12px !important;
    margin-bottom: 6px !important;
    color: #272e38 !important;
}

.mar-top-30 {
    margin-top: 30px !important;
}

.add-payment-form input {
    padding: 0px !important;
    margin-left: 30px !important;
}

.mar-top-0 {
    margin-top: 0px !important;
}

.form_group {
        padding: 0px 0px;
    padding-bottom: 3px;
    margin: 10px 0 0 0 !important;
}

.close_bnt_bg {
    border-radius: 0px;
    border: none;
    background: #e91740 !important;
    color: #fff;
}

.update_btn_bg {
    border-radius: 0px;
    border: none;
    background: #26ace2 !important;
    color: #fff;
}

.report-month {
    background: #27ace2;
    color: #fff;
}

.update_btn_bg1 {
    border-radius: 0px;
    border: none;
    padding: 7px 30px;
    background: #008000 !important;
    color: #fff;
}

.update_btn_bg1:hover {
    color: #fff;
}


.update_btn_bg2 {
    border-radius: 0px;
    border: none;
    padding: 7px 30px;
    background: #e91740 !important;
    color: #fff;
}

input:checked {
    background: #26ace2;
}

.panel_heading {
    background: #008000 !important;
    color: #fff !important;
    padding: 0px 15px;
}

.panel_heading h2 {
    font-size: 20px;
}

.bg-white {
    background: #fff !important;
}

.nav_tabs_settings {
    background: #26ace2;
    margin-bottom: 20px;
    border-radius: 0px;
}

.nav_tabs_settings > li > a:hover {
    background-color: #e91740;
    color: #fff;
}
.nav_tabs_settings >li>a{
    color: #fff;
}
.nav_tabs_settings > li.active > a,
.nav_tabs_settings > li.active > a:focus,
.nav_tabs_settings > li.active > a:hover {
    color: #fff;
    cursor: pointer;
    background-color: #e91740;
    border: none;
    border-radius: 0px;
    border-bottom-color: transparent;
}

.input-file-design {
    top: 15px !important;
    width: 200px !important;
    padding: 8px;
    background: #26ace2;
    color: #fff;
    opacity: 1 !important;
}

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

/* Example stylistic flourishes */

.fileContainer {
    background: #27ace2;
    color: #fff;
    padding: .5em;
    width: 112px;
}

.fileContainer [type=file] {
    cursor: pointer;
}

/**********delete Mdal*************/

.mar-bot-30 {
    margin-bottom: 30px;
}

.delete_modal_box .modal-body h3 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
}


/*Stkcy footer*/

#stcky-footer {
    padding: 10px 15px 10px 15px;
    background-color: #26ace2;
}
#stcky-footer p{
    margin-bottom: 0px;
}
.stcky-footer-link.text-right {
    color: #fff;
    font-size: 16px;
}

.stcky-footer-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1em;
    color: #fff;
}

.stcky-footer-text p b {
    color: #0b5caa;
}

.stcky-footer-text p i {
    color: #0b5caa;
}

.stcky-footer-link .stcky-link-list li {
    float: left;
}

.stcky-footer-link .stcky-link-list li a {
    font-size: 1em;
    font-size: 1em;
    padding: 0px 10px;
    color: #fff;
}

.mar-top-30 {
    margin-top: 30px !important;
}

.custom-table-tr td,
.custom-table-tr th {
    padding: 5px 10px !important;
}

@media only screen and (max-width: 768px) {
    #page-wrapper {
        padding: 20px 10px;
    }
}


@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

.certificate-content p {
    color: #222;
    font-weight: 600;
    line-height: 30px;
}

.certificate-content p span {
    color: #555;
    font-style: italic;
    font-family: 'Great Vibes', cursive;
}

.result-info-bottom {
    margin-bottom: 150px;


}

.copyright-transcript p {
    color: #222;
    font-style: italic;
    font-weight: 600;
}


.result-info .table {
    border: 1px solid #222;
    margin-bottom: 0px;
}

.result-info .table thead tr th {
    border: 1px solid #222;
    color: #222;
    text-align: center;
}

.result-info .table tbody tr td {
/*    border: 1px solid #222;
    color: #222;*/
font-size: 11px;
    text-align: center;
}
.result-info .table thead tr td {
/*    border: 1px solid #222;
    color: #222;*/
font-size: 11px;
    text-align: center;
}
.tittle-name h2 {
    font-size: 25px;
    color: #222;
    line-height: 45px;
}
.tittle-name h3 {
    font-size: 20px;
    color: #222;
    font-weight: 500;
    line-height: 45px;
}

.tittle-name .academic {
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
}

.transcript-info .list-group .list-group-item {
    font-weight: 600;
    color: #222;
    border: 0px;
}

.transcript-info .list-group .list-group-item span {
    font-style: italic;
}

/*=====================================================
CLOCK
====================================================*/

#clock {
    position: relative;
}

#clock:after {
    content: '';
    position: absolute;
    width: 400px;
    height: 20px;
    border-radius: 100%;
    left: 50%;
    margin-left: -200px;
    bottom: 2px;
    z-index: -1;
}


#clock .display {
    text-align: center;
    padding: 50px 15px 91px;
    border-radius: 6px;
    position: relative;
    height: 54px;
}


/*-------------------------
	Light color theme
--------------------------*/

#clock.light {
    background-color: #f3f3f3;
    color: #272e38;
}

#clock.light:after {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#clock.light .digits div span {
    background-color: #272e38;
    border-color: #272e38;
}

#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after {
    background-color: #272e38;
}

#clock.light .alarm {
    background: url('../img/alarm_light.jpg');
}

#clock.light .display {
    background-color: #dddddd;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) inset, 0 1px 1px #fafafa;
    border-radius: 0px;
}

.sticky-wrapper #header{
    z-index: 9999!important;
}
/*-------------------------
	Dark color theme
--------------------------*/

#clock.dark {
    background-color: #272e38;
    color: #cacaca;
}

#clock.dark:after {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#clock.dark .digits div span {
    background-color: #cacaca;
    border-color: #cacaca;
}

#clock.dark .alarm {
    background: url('../img/alarm_dark.jpg');
}

#clock.dark .display {
    background-color: #0f1620;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) inset, 0 1px 1px #2d3642;
}

#clock.dark .digits div.dots:before,
#clock.dark .digits div.dots:after {
    background-color: #cacaca;
}


/*-------------------------
	The Digits
--------------------------*/

#clock .digits div {
    text-align: left;
    position: relative;
    width: 28px;
    height: 50px;
    display: inline-block;
    margin: 0 4px;
}

#clock .digits div span {
    opacity: 0;
    position: absolute;

    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#clock .digits div span:before,
#clock .digits div span:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

#clock .digits .d1 {
    height: 5px;
    width: 16px;
    top: 0;
    left: 6px;
}

#clock .digits .d1:before {
    border-width: 0 5px 5px 0;
    border-right-color: inherit;
    left: -5px;
}

#clock .digits .d1:after {
    border-width: 0 0 5px 5px;
    border-left-color: inherit;
    right: -5px;
}

#clock .digits .d2 {
    height: 5px;
    width: 16px;
    top: 24px;
    left: 6px;
}

#clock .digits .d2:before {
    border-width: 3px 4px 2px;
    border-right-color: inherit;
    left: -8px;
}

#clock .digits .d2:after {
    border-width: 3px 4px 2px;
    border-left-color: inherit;
    right: -8px;
}

#clock .digits .d3 {
    height: 5px;
    width: 16px;
    top: 48px;
    left: 6px;
}

#clock .digits .d3:before {
    border-width: 5px 5px 0 0;
    border-right-color: inherit;
    left: -5px;
}

#clock .digits .d3:after {
    border-width: 5px 0 0 5px;
    border-left-color: inherit;
    right: -5px;
}

#clock .digits .d4 {
    width: 5px;
    height: 14px;
    top: 7px;
    left: 0;
}

#clock .digits .d4:before {
    border-width: 0 5px 5px 0;
    border-bottom-color: inherit;
    top: -5px;
}

#clock .digits .d4:after {
    border-width: 0 0 5px 5px;
    border-left-color: inherit;
    bottom: -5px;
}

#clock .digits .d5 {
    width: 5px;
    height: 14px;
    top: 7px;
    right: 0;
}

#clock .digits .d5:before {
    border-width: 0 0 5px 5px;
    border-bottom-color: inherit;
    top: -5px;
}

#clock .digits .d5:after {
    border-width: 5px 0 0 5px;
    border-top-color: inherit;
    bottom: -5px;
}

#clock .digits .d6 {
    width: 5px;
    height: 14px;
    top: 32px;
    left: 0;
}

#clock .digits .d6:before {
    border-width: 0 5px 5px 0;
    border-bottom-color: inherit;
    top: -5px;
}

#clock .digits .d6:after {
    border-width: 0 0 5px 5px;
    border-left-color: inherit;
    bottom: -5px;
}

#clock .digits .d7 {
    width: 5px;
    height: 14px;
    top: 32px;
    right: 0;
}

#clock .digits .d7:before {
    border-width: 0 0 5px 5px;
    border-bottom-color: inherit;
    top: -5px;
}

#clock .digits .d7:after {
    border-width: 5px 0 0 5px;
    border-top-color: inherit;
    bottom: -5px;
}


/* 1 */

#clock .digits div.one .d5,
#clock .digits div.one .d7 {
    opacity: 1;
}

/* 2 */

#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3 {
    opacity: 1;
}

/* 3 */

#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3 {
    opacity: 1;
}

/* 4 */

#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7 {
    opacity: 1;
}

/* 5 */

#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7 {
    opacity: 1;
}

/* 6 */

#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7 {
    opacity: 1;
}


/* 7 */

#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7 {
    opacity: 1;
}

/* 8 */

#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7 {
    opacity: 1;
}

/* 9 */

#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7 {
    opacity: 1;
}

/* 0 */

#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7 {
    opacity: 1;
}


/* The dots */

#clock .digits div.dots {
    width: 5px;
}

#clock .digits div.dots:before,
#clock .digits div.dots:after {
    width: 5px;
    height: 5px;
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
}

#clock .digits div.dots:after {
    top: 34px;
}


/*-------------------------
	The Alarm
--------------------------*/

#clock .alarm {
    width: 16px;
    height: 16px;
    bottom: 20px;
    background: url('../img/alarm_light.jpg');
    position: absolute;
    opacity: 0.2;
}

#clock .alarm.active {
    opacity: 1;
}


/*-------------------------
	Weekdays
--------------------------*/

#clock .weekdays {
    font-size: 12px;
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    text-align: center;
}


#clock .weekdays span {
    opacity: 0.2;
    padding: 0 5px;
}

#clock .weekdays span.active {
    opacity: 1;
}


/*-------------------------
		AM/PM
--------------------------*/

#clock .ampm {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
}
.logo-area {
    background: #fff;
    text-align: center;
}
.logo-brand {
    height: 70px;
}
.top-header {
    margin-top: 10px;
    margin-bottom: 20px;
}
.modal-add-btn{
    border-radius: 0px;
    background: green;
    border:1px solid green;
    color: #fff;
    box-shadow: none;
}
.modal-add-btn:hover{
     background: green;
     border:1px solid green;
     color: #fff;
}
.fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

.fade-scale.in {
  opacity: 1;
  transform: scale(1);
}
.fade-scale.out {
  opacity: 0;
  transform: scale(0);
}
.modal-centering{
    transform: translateX(-50%)translateY(-50%)!important;
    top: 50%;
    left: 50%;
    margin: 0px;
}
.modal-centering .modal-header {
    padding: 5px 10px;
    background: green;
    border: 0px;
    border-radius: 4px;
}
.modal-centering .modal-header .modal-title {
    color: #fff;
    text-align: left;
    font-size: 18px;
}
.modal-centering .modal-body{
     text-align: left;
}
.modal-centering .modal-header .close{
    background: #fff;
    border:none;
    opacity: 1;
    margin-top: 0px;
}

.modal-centering .modal-footer {
    border-top: 1px solid #ddd;
    padding: 5px 10px;
    background: #fff;
}
/*============================================*/
/*/*====custom-panel=====*/
.goto-home {
    position: fixed;
    top: 50px;
    background: #33addd;
    right: 0px;
    z-index: 9999;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
}
.goto-home .fa{
    color: #fff;
}
.custom-panel {
    border-radius: 0px;
    box-shadow: 1px 2px 15px -4px;
    border: none;
}
.custom-panel .panel-heading {
    background: #fff;
    padding: 15px 10px;
}
.custom-panel .panel-heading .panel-title {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}
.custom-panel .panel-body {
    padding: 5px 10px;
    height: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.custom-panel .panel-body .table{
    margin-bottom: 0px;
}
.custom-panel .panel-footer{
    padding: 5px 10px;
    background: #fff;
}
.custom-panel .panel-footer a{
    color: #222;
}
.custom-panel .panel-body .table tbody tr td{
    font-size: 15px;
    padding: 5px;
}
.btn-info {
    border-radius: 0px;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    margin-top: 3px;
}