* {box-sizing: border-box; -moz-box-sizing: border-box; font-family: 'Montserrat', sans-serif;}

body {margin: 0; padding:0; font-size: 14px; background:#f5f5f5;}

h1 {margin:0; padding-bottom: 10px;}

h1 {font-weight: 400;}
h1 span {display:block; font-size: 14px;}

p {line-height: 1.6em;}

hr {border:0; margin: 20px 0; height: 10px; background:#f2f2f2;}

.form-title {font-size: 1.15em; font-weight: 700; margin-bottom: 15px;}

.form-item {margin-bottom: 15px;}
.form-item label {display:block; margin-bottom: 7px;}
.form-item select, .form-item textarea, .form-item input {display:block; padding: 10px; width: 100%;}
.form-item input[type="checkbox"] {display:inline-block; width: auto;}
.form-item p.input-result { margin-top: 0; padding: 0.8em 1.2em; background: #F5F5F5; font-size: 0.85em; line-height: 1.4em; letter-spacing: 0.05em; }

.form-item textarea {height: 75px;}

.btn {background:#009dae; display:inline-block; padding: 10px 15px; color:#fff; text-decoration:none; border-radius: 3px; -moz-border-radius: 3px; text-align:center;}
.btn-cancel {color:#999;}
.btn-delete {color:#bf1e1e;}

.form-tab-btns {list-style:none; margin: 0; padding: 0;}
.form-tab-btns li {float:left; margin: 0 10px 10px 0;}
.form-tab-btns li:last-child {margin-right: 0 0 10px 0;}

.form-tab-btns li a {display:block; padding: 5px 10px; background:#f2f2f2; border: 1px solid #ccc; border-radius: 5px; text-decoration: none; color:#333;}

.form-tab-btns li a.tab-btn-active {background:#009dae; color:#fff; border: 1px solid #009dae;}

.container {max-width: 1400px; margin: 0 auto; width: 96%;}

.relative {position:relative;}

.float-left {float:left;}
.float-right {float:right;}

.clear-after::after {clear:both; display: block; content:"";}

.stretch {width: 100%;}

.rounded {-webkit-box-shadow: 0 0 50px 0 rgb(0 0 0 / 3%);    box-shadow: 0 0 50px 0 rgb(0 0 0 / 3%); border-radius: 5px;    -moz-border-radius: 5px; overflow: hidden;}

.margin-top {margin-top:30px;}
.margin-right {margin-right:50px;}
.margin-bottom {margin-bottom:30px;}

.width50 {float:left; width: 48.5%;}
.width50:last-child {float:right;}

.width60 {float:left; width: 59%;}
.width40 {float:right; width: 39%}

.width33 {float:left; width: 30%; margin-right: 5%;}
.width33:last-child {margin-right:0;}

.width20 {float:left; width: 18%; margin-right: 2%;}
.width20:last-child {margin-right:0;}

.width25 {float:left; width: 23.5%; margin-right: 2%;}
.width25:last-child {margin-right:0;}

header {background:#fff; border-bottom: 1px solid #e5e5e5; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.03);  box-shadow: 0 0 50px 0 rgba(0,0,0,.03); position:relative; z-index:1;}
.logo {float:left; padding: 5px 0;}
.logo img {max-width: 95px;}

nav {float:right;}
nav ul {list-style: none; padding:0; margin:0; float:left;}
nav ul.sec-nav {border-left:1px solid #ccc; margin-left: 20px; padding-left: 20px;}

nav ul li {float:left;}

nav ul li a {padding: 27px 15px; text-decoration: none; display:block; font-weight: 700; color:#009dae;}
nav ul.sec-nav li a {color:#999;}

.main-body {padding: 50px 0;}

/* Today's Appointments */

.filter-container {padding:20px; margin: 20px 0; background: rgba(0,0,0,.05); border-radius: 5px; border: 1px solid #ccc;}
.filter-container .form-item {margin-bottom: 0;}
.filter-rb-container {float:left; margin-right: 20px;}

.today-time-slot {background:#fff; padding: 30px; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.03);  box-shadow: 0 0 50px 0 rgba(0,0,0,.03); margin-bottom: 20px; border-radius: 5px; -moz-border-radius: 5px; position:relative;  border: 1px solid #e5e5e5;}
.today-time-slot:hover {background:#009dae; cursor:pointer;}
.today-time-slot:hover * {color:#fff;}

.today-left {position:absolute;padding-top: 10px;}
.today-right {margin-left: 180px; margin-right: 180px; border-left: 1px solid #ccc; padding-left: 50px;}
    .today-person {font-size: 2em;}
    .today-reffarl {margin-bottom: 15px; font-style: italic;}

.today-action {position:absolute; right:30px; top: 30px;}
.today-action a {background:#009dae; display:inline-block; padding: 10px 15px; color:#fff; text-decoration:none; border-radius: 5px; -moz-border-radius: 5px; font-weight: 700;}

.modal {position:fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 50px; background:#0e3f44d0; overflow: auto; display:none; z-index:999;}
.modal-content-container {padding: 30px; background:#fff; max-width: 800px; border-radius: 5px; -moz-border-radius: 5px;}

.modal-content {display:none;}

.modal-content-container .today-person { text-align:center; background:url(../images/beWellnm_logo.png) no-repeat top center; background-size: auto 75px; padding-top: 100px; margin-bottom: 30px;}
.modal-content-container .today-person span {display:block; font-size: 14px; font-style: italic; margin-top: 10px;}

.modal-cancel-btn {margin-top: 30px; text-align:center;}

.close-modal-container {text-align:center;}
.close-modal-container a {color:#333; text-decoration:none;}


/* Provider Profile */
.main-body-profile {margin-top: 30px; }

.profile-background {background: url(../images/sample-banner.jpg) no-repeat; min-height: 400px;}
.profile-information {background:#fff; padding: 30px 30px 30px 200px;}

.profile-pic {position:absolute; z-index:1; top: -75px; left: 30px; height: 150px; width: 150px; border-radius: 200px; -moz-border-radius: 200px; background:url(../images/profile-pic.jpg) no-repeat; background-size: cover; border: 5px solid #fff;}

.profile-content-section {background:#fff; padding: 30px;}
.profile-section-title {font-weight: 700; font-size: 1.15em;}

.open-status { display: block;    position: relative;    margin-bottom: 20px;    font-size: 12px;    font-style: italic;}
.office-open::before {  background: green; display:inline-block; height: 10px; width: 10px; content:""; border-radius: 10px; -moz-border-radius: 10px; margin-right: 10px;}

.date-container {border-bottom: 1px solid #ccc; padding: 15px 0;}
.date-container:last-child {border-bottom: 0;}
.date-title {font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;}
.date-container a {display:inline-block; border: 1px solid #009dae;
    border-radius: 3px; -moz-border-radius: 3px; margin-right: 5px; color:#009dae; padding: 5px; text-decoration:none; }
    .date-container a:hover {background:#009dae; color:#fff;}


/*Sample Calendar*/
.sample-calendar {width: 100%; border-collapse: collapse;}

.sample-calendar th { border: 1px solid #ccc; text-align:left; padding: 5px;}

.sample-calendar td { border: 1px solid #ccc; padding: 5px; background:#fff; height:30px; vertical-align: top;}
.sample-calendar td:hover {background:#f5f5f5; cursor: pointer;}
.sample-calendar tr:first-child td {cursor: pointer; background:#fff;}

/*Add Client*/
.possible-match {background:#009dae; padding: 30px;}
.possible-match li {margin-bottom: 10px;}
.possible-match * {color:#fff;}

.main-table {width: 100%; border-collapse: collapse; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.1);   box-shadow: 0 0 50px 0 rgba(0,0,0,.1); border-radius: 5px;}

.main-table th { border-bottom: 1px solid #ccc; text-align:left; padding: 15px;}

.main-table td { border-bottom: .5px solid #ccc; padding: 15px; background:#fff; height:30px; vertical-align: top;}
.main-table tr:hover td {background:#f5f5f5;}

/*Schedule Client*/
.appt-container {background:#fff; padding: 30px; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.03);  box-shadow: 0 0 50px 0 rgba(0,0,0,.03); margin-bottom: 20px; border-radius: 5px; -moz-border-radius: 5px; position:relative;  border: 1px solid #e5e5e5;}


.appt-content {margin-left: 180px; margin-right: 180px; border-left: 1px solid #ccc; padding-left: 50px;}
.appt-person { margin-bottom:10px;}    
.appt-person a {font-size: 2em; text-decoration:none; color:#009dae;}
    .appt-quals {margin-bottom: 15px; font-style: italic;}

.today-action {position:absolute; right:30px; top: 30px;}
.today-action a {background:#009dae; display:inline-block; padding: 10px 15px; color:#fff; text-decoration:none; border-radius: 5px; -moz-border-radius: 5px; font-weight: 700;}

/* Admin Dashboard */
.dash-number {background:#fff; padding: 15px; margin-top: 30px; font-size: 50px; font-weight: 900;}
.dash-number span {display:block; margin-bottom: 3px; font-weight:400; font-size: 12px; text-transform:uppercase;}

.dash-data { padding: 30px; background:#fff; }

footer {text-align:center; margin: 30px 0;}

/* Initative */

.Initative {display:none; border-top: 10px solid #f5f5f5; margin-top: 30px; padding-top: 30px;}


.audience-indicator {margin-bottom: 30px;}
.audience-indicator .big-number {font-size: 60px; font-weight: 900;}

.sent-message-stats { margin-bottom: 2em; padding: 0.4em 2em 1.6em; border: 1px solid #009dae; border-radius: 3px; }
    .sent-message-stats h3 { font-weight: normal; }
    .sent-message-stats .highlight { margin: 1.4em -2em; padding: 0.4em 2em; background: #F5F5F5; }

.send-test { margin-top: 3em; margin-bottom: 1em; padding: 1.6em 2em 2em; border: 1px solid #009dae; border-radius: 3px; background: #f5f5f5; }

/* Appointment Modal */
#modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.appointment-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 3px;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}
.appointment-close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.appointment-close-modal:hover, .appointment-close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.appointment-modal-body {
    margin: 25px auto;
    text-align: center;
}
@keyframes animatetop {
    from {top: 50%; opacity: 0}
    to {top: 50%; opacity: 1}
}
.appointment-yes-modal {
    background-color: #009dae;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 4px;
    transition-duration: 0.4s;
    cursor: pointer;
}
.appointment-yes-modal:hover {
    background-color: #4CAF50;
    color: #fff;
}
.appointment-no-modal {
    background-color: #009dae;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 4px;
    transition-duration: 0.4s;
    cursor: pointer;
}
.appointment-no-modal:hover {
    background-color: #f5821f;
    color: white;
}
#appointment-details {
    text-align: left;
    padding: 0 20px;
}
#submit-appt {
    background-color: #009dae;
    color: #fff;
    padding: 10px 15px;
    margin: 16px auto;
    border-radius: 3px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    transition-duration: 0.4s;
    cursor: pointer;
}

/* Schedule page */
.schedule-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 3px;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}

.schedule-modal-body {
    margin: 25px auto;
    text-align: center;
}

.sample-calendar td[rowspan] {
    cursor: default;
}

@keyframes animatetop {
    from {top: 50%; opacity: 0}
    to {top: 50%; opacity: 1}
}
/* Tabs */
.tabs { border-bottom: 1px solid rgba(0,0,0,.1); margin-bottom: 20px;}
.tabs a { display: inline-block; text-decoration:none; padding: 10px 10px 20px; font-weight: 400;}
.tabs a.active { border-bottom: 5px solid #009dc0; font-weight: 700; color:#000;}