a i {
    text-align: center;
}

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

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%);*/
}

.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.paragraph {
        background-color: #fff8e1;
        padding: 1rem;
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

        .bd-callout.paragraph p {
            /*padding: 1.5rem 0 0 1.5rem;*/
            padding: 0.5rem 0 1rem 1.5rem;
        }

        .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-success h4.grad {
                float: none;
                font-size: 2rem;
                margin-top: 0;
                margin-bottom: 5px;
            }

    .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;
    }

.btn-flat.btn-menu.grad {
    height: 5.5rem;
    line-height: 6rem;

}

.mdn-Button.grad {
    background-color: #FF9200;
    /*background: linear-gradient(to bottom right, #FF9200 0%, #f0ad4e 100%);*/
    background: linear-gradient(to bottom left, #FFC72C 0%, #fa6c16 100%);
    width: 100%;
}

.mdn-Button.grad.qtn {
    font-size: 1rem;
}

.card.grad, .card.gradprep {
    /*border-radius: 0.5rem;*/
    border-radius: 2vh;
    margin: 0.5rem 0 0.5rem 0;
}

    .card.grad.pink {
        background-color: #FF51B2 !important; /*Room A*/
        color: #f8f8ff;
    }

    .card.grad.green {
        background-color: #4FC538 !important; /*Room B*/
        color: #f8f8ff;
    }

    .card.grad.purple {
        background-color: #8C4FE0 !important; /*Room C*/
        color: #f8f8ff;
    }

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

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

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

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

.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%);*/

        background: linear-gradient(to bottom left, #ffce46 0%, #fa9216 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;
}

.card.gradprep .card-image img.activator {
    border-radius: 2vh 2vh 0 0;
}

.card.gradprep .card-content .card-title {
    /*32px = 2rem*/
    line-height: 2rem;
}

.card.gradprep .card-title {
    /*24px = 1.5rem*/ 
    font-size: 1.2rem;
    font-weight: bold;
}

.card.gradprep .card-reveal {
    background-color: #fff8e1;
}

.card.gradprep .card-content i {
    display: inline-block;
    font-size: 2rem;
    line-height: 2rem;
}

p.gradprep {
    margin: 0;
    padding: 1rem 0 0 0;
}

.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 {
    border: 0;
    border-radius: 0.5rem;
}

    div.div.grad.grey {
        background-color: #999 !important;
    }

    div.div.grad.white {
        background-color: #FFF !important;
    }

.chiffon {
    background-color: #FFF4E6 !important;
}

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

    footer.grad.page-footer.navigation .btn-flat.disabled i {
        color: #1D8279;
    }

footer.grad a.disabled {
    cursor: pointer;
}

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

input[type=text].grad, input[type=password].grad {
    background-color: #fff8e1;
    /*background-color: white;*/
    border-radius: 50vh;
}

img.brand-logo.grad {
    top: 1.5rem;
    box-shadow: none !important;
    margin-bottom: 1rem;
}

.mdn-imgBtn.grad {
    width: 12.25rem;
    height: 12.25rem;
    background: linear-gradient(#999 10%, #9D9D9D 75%);
}

.row.grad.qtn {
    margin-bottom: 0;
}

.row.high {
    /*20px = 1.25rem*/
    margin-bottom: 1.25rem;
}

.row .col.grad.menu {
    /*20px = 1.25rem*/
    margin-bottom: 1.25rem;
}

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

    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 a.disabled {
                color: #9D9D9D;
            }

        .side-nav.grad li.active {
            background-color: #fff59d !important;
            border-radius: 50vh;
            margin: 0.5rem;
        }

            .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), .bd-callout.grad {
    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, .side-nav.grad li.active {
        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 {
    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);
}

/* Switch
   ========================================================================== */
.switch.grad,
.switch.grad * {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 0;
    padding-bottom: 0.9375rem;
    margin-bottom: .8rem;
}

    .switch.grad label {
        cursor: pointer;
        font-size: 1.2rem;
    }

        .switch.grad label input[type=checkbox] {
            opacity: 0;
            width: 0;
            height: 0;
        }

            .switch.grad label input[type=checkbox]:checked + .lever {
                background-color: #84c7c1;
            }

                .switch.grad label input[type=checkbox]:checked + .lever:before, .switch.grad label input[type=checkbox]:checked + .lever:after {
                    left: 18px;
                }

                .switch.grad label input[type=checkbox]:checked + .lever:after {
                    background-color: #26a69a;
                }

        .switch.grad label .lever {
            content: "";
            display: inline-block;
            position: relative;
            width: 36px;
            height: 14px;
            background-color: rgba(0, 0, 0, 0.38);
            border-radius: 15px;
            margin-right: 10px;
            -webkit-transition: background 0.3s ease;
            transition: background 0.3s ease;
            vertical-align: middle;
            margin: 0 16px;
        }

            .switch.grad label .lever:before, .switch.grad label .lever:after {
                content: "";
                position: absolute;
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                left: 0;
                top: -3px;
                -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
                transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
                transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
                transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
            }

            .switch.grad label .lever:before {
                background-color: rgba(38, 166, 154, 0.15);
            }

            .switch.grad label .lever:after {
                background-color: #F1F1F1;
                -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
            }

input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    background-color: rgba(38, 166, 154, 0.15);
}

input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    background-color: rgba(0, 0, 0, 0.08);
}

.switch.grad input[type=checkbox][disabled] + .lever {
    cursor: default;
    background-color: rgba(0, 0, 0, 0.12);
}

.switch.grad label input[type=checkbox][disabled] + .lever:after,
.switch.grad label input[type=checkbox][disabled]:checked + .lever:after {
    background-color: #949494;
}

/*------------------------------------------------------ Date Picker --------------------------------------------------------------------*/
/* Modal */
.datepicker-modal {
    max-width: 325px;
    min-width: 300px;
    max-height: none;
}

.datepicker-container.modal-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0;
}

.datepicker-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 280px;
    margin: 0 auto;
}

    .datepicker-controls .selects-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .datepicker-controls .select-wrapper input {
        border-bottom: none;
        text-align: center;
        margin: 0;
    }

        .datepicker-controls .select-wrapper input:focus {
            border-bottom: none;
        }

    .datepicker-controls .select-wrapper .caret {
        display: none;
    }

    .datepicker-controls .select-year input {
        width: 50px;
    }

    .datepicker-controls .select-month input {
        width: 70px;
    }

.month-prev, .month-next {
    margin-top: 4px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

/* Date Display */
.datepicker-date-display {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
    background-color: #26a69a;
    color: #fff;
    padding: 20px 22px;
    font-weight: 500;
}

    .datepicker-date-display .year-text {
        display: block;
        font-size: 1.5rem;
        line-height: 25px;
        color: rgba(255, 255, 255, 0.7);
    }

    .datepicker-date-display .date-text {
        display: block;
        font-size: 2.8rem;
        line-height: 47px;
        font-weight: 500;
    }

/* Calendar */
.datepicker-calendar-container {
    -webkit-box-flex: 2.5;
    -webkit-flex: 2.5 auto;
    -ms-flex: 2.5 auto;
    flex: 2.5 auto;
}

.datepicker-table {
    width: 280px;
    font-size: 1rem;
    margin: 0 auto;
}

    .datepicker-table thead {
        border-bottom: none;
    }

    .datepicker-table th {
        padding: 10px 5px;
        text-align: center;
    }

    .datepicker-table tr {
        border: none;
    }

    .datepicker-table abbr {
        text-decoration: none;
        color: #999;
    }

    .datepicker-table td {
        border-radius: 50%;
        padding: 0;
    }

        .datepicker-table td.is-today {
            color: #26a69a;
        }

        .datepicker-table td.is-selected {
            background-color: #26a69a;
            color: #fff;
        }

        .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
            color: rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }

.datepicker-day-button {
    background-color: transparent;
    border: none;
    line-height: 38px;
    display: block;
    width: 100%;
    border-radius: 50%;
    padding: 0 5px;
    cursor: pointer;
    color: inherit;
}

    .datepicker-day-button:focus {
        background-color: rgba(43, 161, 150, 0.25);
    }

/* Footer */
.datepicker-footer {
    width: 280px;
    margin: 0 auto;
    padding-bottom: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done {
    color: #26a69a;
    padding: 0 1rem;
}

.datepicker-clear {
    color: #F44336;
}

/* Media Queries */
/*@media only screen and (min-width: 601px) {
    .datepicker-modal {
        max-width: 625px;
    }

    .datepicker-container.modal-content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .datepicker-date-display {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 270px;
        -ms-flex: 0 1 270px;
        flex: 0 1 270px;
    }

    .datepicker-controls,
    .datepicker-table,
    .datepicker-footer {
        width: 320px;
    }

    .datepicker-day-button {
        line-height: 44px;
    }
}*/


@media only screen and (min-width: 481px) {
    .hide-on-small-and-up.graddate {
        display: none !important;
    }
}


    @media only screen and (max-width: 480px) {
        .hide-on-ss-only.graddate {
            display: none !important;
        }
    }

.imgGrad {
    width: 100%;
}

.video-container iframe.grad {
    padding-bottom: 0.3125rem;
}

/*------------------------------------------------------ Text Divider --------------------------------------------------------------------*/
.text-divider {
    display: flex;
    align-items: center;
    --text-divider-gap: 1rem;
}

    .text-divider::before,
    .text-divider::after {
        content: '';
        height: 1px;
        background-color: silver;
        flex-grow: 1;
    }

    .text-divider::before {
        margin-right: var(--text-divider-gap);
    }

    .text-divider::after {
        margin-left: var(--text-divider-gap);
    }