/*

Tutoralzine Demo 
Original tutorial: Creating a Facebook-like Registration Form with jQuery
Tutorial URL: http://tutorialzine.com/2009/08/creating-a-facebook-like-registration-form-with-jquery/

You are free to use the following demo code for any purpose you see fit.

*/


/* Page styles */

/* Form styles */

input[type="text"],
select,
textarea {
    padding: 3px;
    color: #333333;
    border: 1px solid #96A6C5;
    margin-top: 2px;
    width: 300px;
    font-size: 11px;
}

select {
    width: auto;
    padding: 2px;
}

.formline {
    padding: 3px;
}

.label {
    font-size: 10px;
    display: block;
    text-align: right;
    margin: 0 10px 0 0;
    width: 120px;
}

label .sublabel {
    font-size: 8px;
}

table {
    margin: 0 auto;
    width: 90%;
}

td {
    font-size: 11px;
}

#div-regForm,
.registered {
    border: 3px solid #eeeeee;
    padding: 15px;
    background: url(img/reg_bg.jpg) repeat-x #cbd4e4;
    color: #203360;
    margin: 0px auto 10px auto;
    width: 600px;
}

.form-title,
.form-sub-title {
    font-size: 20px;
    font-family: 'Century Gothic', sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.form-sub-title {
    font-weight: normal;
    padding: 15px 0 6px 0;
}

#error {
    background-color: #ffebe8;
    border: 1px solid #dd3c10;
    padding: 0px 0px;
    text-align: center;
    margin-top
}

.reloadUser {
    float: right;
    margin-right: 11px;
}

.reloadUser div {
    background: url(img/reload.png) no-repeat;
    height: 35px;
    width: 35px;
}

.reloadUser div:hover {
    background: url(img/reload-h.png) no-repeat;
}

.preload {
    background: none !important;
    color: #f00;
    height: 50px;
}

#whatsThis+.popover {
    border: 1px solid #d35400;
    z-index: 1;
}

#whatsThis+.popover>.popover-title {
    background: #d35400;
}

#whatsThis+.popover>.popover-content {
    color: #000;
}

#whatsThis+.popover.right>.arrow:after {
    border-right-color: #d35400;
}

#campus-selection {
    height: 98px;
    width: 306px;
    background: #FFF;
    border: 1px solid #96A6C5;
    overflow: auto;
}

.cbtn {
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 8px;
    outline: none;
    text-decoration: none;
    font-weight: 700;
    min-width: 70px;
    font-size: 12px;
}

.cbtn-primary {
    border-color: #1976D2;
    background-color: #1E88E5;
    color: #FFF;
}

.cbtn-primary:hover,
.cbtn-primary:disabled {
    background-color: #1565C0;
}

.cbtn-primary:disabled {
    color: #90CAF9;
}

.cbtn-secondary {
    border-color: #9E9E9E;
    background-color: #EEEEEE;
    color: #000;
}

.cbtn-secondary:hover,
.cbtn-secondary:disabled {
    background-color: #BDBDBD;
}

.cbtn-secondary:disabled {
    color: #424242;
}

#appointments-container {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

#appointments-container .box-header {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

#appointments-container .box-content {
    display: none;
}

#appointments-container .table-navigation {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

#appointments-container .search-nav {
    display: flex;
    justify-content: flex-end;
}

#appointments-container #search-box {
    width: 36%;
    display: flex;
    border: 1px solid #96A6C5;
    border-radius: 4px;
    background-color: #FFF;
    background-clip: border-box;
}

#search-box input[type="text"] {
    height: 18px;
    width: 100%;
    margin-top: 0px;
    padding: 6px 8px;
    font-size: 14px;
    border: none;
    outline: none;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

#search-box .clear-search {
    width: 40px;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

#search-box .clear-search button {
    display: none;
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 20px;
    outline: none;
    border: none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    background-color: transparent;
    background-clip: border-box;
}

#search-box .clear-search button:hover {
    background-color: #E0E0E0;
}

#appointments-container .info-nav {
    display: flex;
    margin-top: 0.6rem;
}

#appointments-container .info-widget {
    padding-top: 0.4rem;
    font-size: 12px;
}

#appointments-container .navigation-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.6rem;
}

#appointments-container .prev-btn,
#appointments-container .navigation-widget .current-page,
#appointments-container .next-btn {
    display: block;
    padding: 0.4rem;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    min-width: 18px;
}

#appointments-container .navigation-widget .current-page {
    border: 1px solid #1E88E5;
    background-color: #1E88E5;
    color: #FFF;
}

#appointments-container .prev-btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#appointments-container .next-btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#appointments-container .prev-btn,
#appointments-container .next-btn {
    border: 1px solid #9E9E9E;
    background-clip: border-box;
    background-color: #EEEEEE;
    color: #212121;
    text-decoration: none;
}

#appointments-container .prev-btn:hover,
#appointments-container .next-btn:hover {
    background-color: #BDBDBD;
}

#appointments-container .prev-btn.disabled,
#appointments-container .next-btn.disabled {
    background-color: #BDBDBD;
    color: #424242;
    cursor: not-allowed;
}

#appointments-container .info-widget .total-records {
    font-weight: 700;
}

#appointments-container .info-widget .current-page {
    font-weight: 600;
}

#appointments-container .table-process {
    display: none;
}

#appointments-container .table-process .process-content {
    color: #1565C0;
    height: 225px;
    background-color: #FFF;
    background-clip: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

#appointments-container .table-process .process-body {
    text-align: center;
}

#appointments-container .table-process .process-icon {
    font-size: 2rem;
}

#appointments-container .table-process .process-text {
    font-size: 12px;
}

#appointments-container .table-result table {
    width: 100%;
}

#appointments-container .box-footer>.cbtn {
    margin-right: 0.2rem;
}