a i {
    text-align: center;
}

.alert.grad {
    /*10px = 0.625rem*/
    margin-bottom: 0.625rem;
    border-radius: 50vh;
    font-size: 1.5rem;
}

.barConfirmPercent {
    background-color: gray;
    border-radius: 50vh;
    color: gray;
}

.progress-bar.grad {
    /*24px = 1.5rem*/
    line-height: 24px;
}

body {
    /*background-color: #bbb !important;*/
    background-color: #DADDE1; /*Facebook BG*/
    /*background: linear-gradient(0deg, rgba(29,130,121,1) 0%, rgba(240,173,78,1) 100%);*/
}

.row.grad.summary{
    height: 100%;
    vertical-align: middle;
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .5rem;
    border-radius: .25rem;
}

    .bd-callout.grad {
        background-color: #fff8e1;
        padding: .25rem;
        margin-top: .25rem;
        margin-bottom: .25rem;
        /*border-radius: 2vh;*/
        border-radius: 50vh;
    }

        .bd-callout.grad i {
            /*40px = 2.5rem*/
            font-size: 2.5rem;
            line-height: 2.5rem;
            margin: 0 auto;
        }

        .bd-callout.grad p {
            padding: 0;
        }

    .bd-callout-success {
        /*border: 0.125rem solid #5cb85c;*/
        border-left-width: .35rem;
        /*border-left-color: #5cb85c;*/
        border-left-color: #1D8279;
    }
        
    .bd-callout-success h4 {
        color: #5cb85c;
    }

    .bd-callout-info {
        border-left-color: #5bc0de;
    }

    .bd-callout-info h4 {
        color: #5bc0de;
    }

.bd-callout-danger {
    border-left-color: #d9534f;
}

    .bd-callout-danger h4 {
        color: #d9534f;
    }

.bd-callout-warning {
    border-left-color: #f0ad4e;
}

    .bd-callout-warning h4 {
        color: #f0ad4e;
    }

.card.grad {
    border-radius: 0.5rem;
    margin: 0.5rem 0 0.5rem 0;
}

    .card.grad.absent {
        background-color: lightgray;
    }

    .card.grad.leave {
        background-color: lightblue;
    }

    .card.grad .row {
        margin: 0;
        padding: 0.3rem;
    }

    .card.grad .card-content {
        /*10px = 0.625rem*/
        padding: 0.8rem;
        color: #1d8279;
    }

        .card.grad .card-content img {
            width: 100%;
            border-radius: 2vh;
        }

    .card.grad .card-title {
        /*24px = 1.5rem
            48px = 3rem*/
        font-size: 1.5rem;
        line-height: 3rem;
    }

        .card.grad .card-title.summary {
            font-size: 5rem;
            line-height: 7rem;
            font-weight: bolder;
        }

        .card.grad .card-content p {
            text-align: left;
            font-size: 1rem;
        }

.card.grad .card-action {
    /*10px = 0.625rem*/
    padding: 0.8rem;
    border-top: none;
}

.card.grad .card-action .card-title {
    /*24px = 1.5rem
    48px = 3rem*/
    font-size: 1.5rem;
    line-height: 3rem;
}

    /*Nighty*/
    .card.grad .card-image img {
        /*100px = 6.25rem*/
        height: 100%;
        width: 8rem;
        /*border-radius: 2rem;*/
        border-radius: 50vh;
        /*padding: 0.25rem;*/
        margin: 0.5rem;
    }

.card.horizontal.gradmain {
    border-radius: 50vh;
}

    .card.horizontal.gradmain .card-image {
        /*KMUTT CI*/
        background: linear-gradient(to bottom left, #FFC72C 0%, #fa6c16 100%);
    }

.card.horizontal .card-content.card-menu.grad {
    height: 6rem;
    line-height: 6rem;
}

.card.horizontal .card-image img.card-menu.grad {
    height: 5.5rem;
    width: 5.5rem;
    margin: 0.5rem;
}

.grad.status {
    background-color: lightgray;
    color: lightgray;
    margin: 0 auto;
    border-radius: 50vh;
    padding: 0.25rem;
    /*180px = 11.25rem*/
    height: 6rem;
    width: 6rem;
}

    .grad.status i {
        color: lightgray;
        height: 5.5rem;
        line-height: 5.5rem;
    }

    .grad.status.present {
        background-color: olivedrab;
        color: olivedrab;
    }

    .grad.status.late {
        background-color: goldenrod;
        color: goldenrod;
    }

    .grad.status.absent {
        background-color: tomato;
        color: tomato;
    }

    .grad.status.leave {
        background-color: darkcyan;
        color: darkcyan;
    }

.grad .text-display {
    font-size: 1.5rem;
    line-height: 1.5rem;
    vertical-align: middle;
}

.grad .text-topic {
    line-height: 1.5rem;
    vertical-align: middle;
}

.container.no-bg.grad {
    top: -0.5rem;
}

    .container.no-bg.grad .row.ss {
        margin-bottom: 0;
    }

.collapsible.grad {
    /*2px = 0.125rem*/
    /*border: 0.125rem solid #f0ad4e;*/
    border: 0;
    border-radius: 0.5rem;
}

    .collapsible.grad.paragraph {
        background-color: #fff8e1;
    }

        .collapsible.grad.paragraph p {
            margin: 0;
            /*padding: 0 0 1.5rem 1.5rem;*/
            padding: 0.5rem 0 1rem 1.5rem;
        }

        .collapsible.grad.paragraph h4.grad {
            color: #5cb85c;
            float: none;
            font-size: 1.5rem;
            margin-top: 0;
            margin-bottom: 5px;
        }

    .collapsible.grad .collapsible-header {
        font-size: 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
        margin-bottom: 0.35rem;
        /*padding-bottom: 0.35rem;*/
        /*background: linear-gradient(to bottom right, #FF9200 0%, #f0ad4e 100%);*/
        background: linear-gradient(to bottom left, #FFC72C 0%, #fa6c16 100%);
    }

    .collapsible.grad .collapsible-body {
        background-color: transparent;
        /*background-color: #999 !important;*/
        border-radius: 0 0 0.5rem 0.5rem;
        margin: 0.35rem;
    }

div.div.grad.grey {
    background-color: #999 !important;
    border: 0;
    border-radius: 0.5rem;
}

div.div.grad.white {
    background-color: #DADDE1 !important;
    border: 0;
    border-radius: 0.5rem;
}

div.div.grad.yellow {
    background-color: #fff8e1 !important;
    border: 0;
    border-radius: 0.5rem;
}

footer.grad {
    background-color: #999 !important;
    border-radius: 2vh 2vh 0 0;
}

    footer.grad.page-footer.navigation .btn-flat.disabled i, footer.grad.page-footer.navigation .btn-flat i {
        color: #1D8279;
    }
    
    footer.grad a.disabled {
        cursor: pointer;
        color: #fff8e1;
    }

    footer.grad .row.grad {
        margin-bottom: 0;
        margin-top: 0;
    }

.mdn-Button.grad {
    background-color: #FF9200;
}

.mdn-txtHeader.grad {
    font-size: 2em;
    margin-bottom: 0.625rem;
}

.modal.Form-Login.grad {
    top: 40% !important;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 1rem;
    max-height: 70%;
    height: auto;
    width: 85%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2vh;
    will-change: top, opacity;
}

.row.bordertop {
    border-top: 1px solid rgba(160,160,160,.5);
    padding-top: 20px;
}

.row.grad.footer {
    /*50px = 3.125rem*/
    margin-bottom: 3.125rem;
}

.row.grad .col img {
    /*100px = 6.25rem*/
    height: 100%;
    width: 11rem;
    border-radius: 2rem;
    /*padding: 0.25rem;*/
}

    span.grad.badge {
        color: transparent;
        border-radius: 4vh;
        margin: 6px;
        width: 30px;
        height: 30px;
        min-width: 0;
    }

    .side-nav.grad {
        background-color: #bbb !important;
    }

        .side-nav.grad a {
            color: #1D8279;
        }

        .side-nav.grad li.active {
            background-color: #fff59d !important;
        }

            .side-nav.grad li.active a {
                color: #e65100;
            }

.tabs.grad.tabs-transparent {
    background-color: #dff0d8;
}

.tabs.grad.tabs-transparent .tab a,
.tabs.grad.tabs-transparent .tab.disabled a,
.tabs.grad.tabs-transparent .tab.disabled a:hover {
    color: #9D9D9D;
}

    .tabs.grad.tabs-transparent .tab a:hover,
    .tabs.grad.tabs-transparent .tab a.active {
        color: #1D8279;
    }

.tabs.grad.tabs-transparent .indicator {
    background-color: #1D8279;
}

/*--- box-shadow ---*/
.z-depth-0 {
    box-shadow: none !important;
}

span.grad.badge, footer.grad, .card.grad .card-image img, .collapsible.grad, .page-footer.navigation .btn-flat:not(.disabled) {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.z-depth-2, .mdn-tblLogin {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4, .modal {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}