/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;} /* Remove button padding in Firefox */ 

/*
 *   Styles
 */
 
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
 
html {min-height:100%; height:100%;}

body {min-height:100%; height:100%; font-family:'Hind', sans-serif; background:#f7f7f7; color:#5b5958;}

body,
input,
select,
textarea {font-family:'Hind', sans-serif; font-weight:400; font-size:14px; line-height:1em;}

a:link,
a:visited {color:#163e72; text-decoration:underline;}
a:hover {text-decoration:none;}

button,
a.button:link,
a.button:visited {display:inline-block; padding:8px 15px; border:0; background:#464646; outline:none; color:#fff; text-decoration:none; cursor:pointer;}
button:hover,
a.button:hover {background:#1d62ab; color:#fff;}

a.button-delete:link,
a.button-delete:visited,
button.delete {background:#c00;}

button.save,
a.button-save {background:#fe9d64;}

strong {font-weight:bold;}
em {font-style:italic;}

small,
.small {font-size:80%; text-transform:uppercase; color:rgba( 0,0,0, .25 );}

h1 {margin:0 0 20px 0; font-size:36px; line-height:1.4em; font-weight:bold;}
h2 {margin:0 0 1em 0; font-size:24px; line-height:1.4em;}

p {margin:0 0 1em 0; float:left; width:100%;}
p:last-child {margin-bottom:0;}

ul {list-style:disc; margin:0 0 1em 25px; float:left;}
ul li {width:100%;}

hr {margin:5px 0 10px 0; padding:0; background:transparent; color:transparent; height:0px; border:0; border-bottom:1px solid #d9d9d9;}

textarea,
input[type="text"],
input[type="number"],
input[type="password"],
select {padding:5px; background:#fff; border:1px solid #d7d7d7; outline:none; line-height:1em;}

label input[type="checkbox"],
label input[type="radio"] {margin:0 5px 0 0; vertical-align:0px;}

.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}

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

.clear-left {clear:left;}
.clear-right {clear:right;}
.clear {clear:both;}

.full-width {width:100%;}


.panel {float:left; width:100%;}
.panel .inner {width:100%; max-width:1200px; margin:0 auto;}


.tag {display:inline-block; padding:5px 8px; background:#e6e6e6;}
.tag small {color:#aaa;}


body.login {padding:30px; background:#464646;}
body.login .panel .inner {max-width:600px; padding:30px; background:#fff; border-radius:5px; box-shadow:0px 0px 5px 0px rgba( 0,0,0, 1 ); text-align:center;}
body.login .g-signin2 {display:inline-block;}


.pageresponse {margin:0 0 1em 0; padding:15px; background:#ffc; text-align:center;}


nav {margin:0 0 1em 0; padding:15px 0;}
nav a:link,
nav a:visited {padding:10px; background:#e6e6e6; text-decoration:none; font-weight:bold; text-transform:uppercase;}

table.list {}
table.list tr th {padding:8px;}
table.list tr td {padding:8px; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;}
table.list tr td:first-child {border-left:1px solid #d7d7d7;}
table.list tr td:last-child {border-right:1px solid #d7d7d7;}
table.list tr td.button {width:1px;}

table.form {width:100%;}
table.form tr th {padding:8px 8px 8px 0; white-space:nowrap; font-weight:bold;}
table.form tr td {width:100%; padding:8px;}
table.form textarea {width:100%; min-height:125px; line-height:1.4em;}

.calendar-scroll {float:left; width:100%; overflow:auto;}

.calendar {float:left; width:100%;}

.week-view {min-width:1200px;}
.week-view th,
.week-view td {width:14.285%; border:1px solid #d7d7d7; background:#fff; text-align:center;}
.week-view th {padding:8px; font-weight:bold;}
.week-view th a:link,
.week-view th a:visited {text-decoration:none; color:#000;}
.week-view th.today,
.week-view td.today {background:#ffc;}
.week-view td {padding:15px; vertical-align:top;}

.calendar small {color:rgba( 0,0,0, .3 );}
.calendar p {color:rgba( 0,0,0, .3 );}
.calendar a.button:link,
.calendar a.button:visited {background:none; border:2px solid #000; color:#000; font-weight:bold; text-transform:uppercase; font-size:12px;}
.calendar a.button:hover {background:#000; color:#fff;}
.calendar h3 {margin:0 0 10px 0; text-align:left; text-transform:uppercase; font-weight:bold; font-size:12px; line-height:1em; color:rgba( 0,0,0, .4 );}

.booking {display:inline-block; width:100%; margin:0 0 1em 0; padding:6px 10px; border:1px solid #d7d7d7; background:#f7f7f7; color: #000000}
a.booking:link,
a.booking:visited {text-decoration:none; color:#000;
  -webkit-transition: border-color .2s;
  transition: border-color .2s;
}
a.booking:hover {border-color:#000 !important;}
.booking .part {display:block; padding:6px 0; border-top:1px solid rgba( 0,0,0, .15 );}
.booking .part:first-child {border-top:0;}
.booking .collapsed {display:none;}

.day-view {min-width:1px;}
.day-view .booking {text-align:left;}
.day-view .booking .part {border:0;}
.day-view .booking hr {width:100%; margin:5px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .15 );}

@media all and (max-width:1020px){
  
  body {padding-bottom:50px;}
  
  .panel .inner {padding:0;}
  
  .pad-responsive,
  .panel .pad-responsive {padding:0 30px;}
  
  .break-responsive {display:block; width:100%; height:15px;}
  
  nav {text-align:center;}
  
  nav a:link,
  nav a:visited,
  a.button:link,
  a.button:visited,
  button {padding:8px 20px; font-size:18px; line-height:1em;}
  
  .calendar tbody,
  .calendar tr,
  .calendar th,
  .calendar td {display:block; width:100%; border-bottom:0;}
  .calendar p {float:none;}
  
  .calendar tr {margin-bottom:20px; border-bottom:1px solid #d7d7d7;}
  .calendar tr.headers,
  .calendar tr.totals,
  .calendar tr.days,
  .calendar tr.buttons {display:none;}
  
  .calendar th.header {padding:0; background:#696969; color:#fff; font-size:24px; line-height:1em; text-align:left;}
  .calendar th.header br {display:none;}
  .calendar th.header a:link,
  .calendar th.header a:visited {display:block; padding:15px; color:#fff;}
  .calendar th.header small {float:right; font-size:18px; color:rgba( 255,255,255, .4 );}
  
  .week-view {min-width:1px;}
  .week-view th,
  .week-view td {padding:15px; text-align:left;}
  
}

@media all and (max-width:768px){
  
  table.form tbody,
  table.form tr,
  table.form th,
  table.form td {display:block; width:100%;}
  table.form tr th,
  table.form tr td {padding:5px 0;}
  
  .emailchecklist {
    grid-template-columns: 300px !important;
  }
  
}

#manualEmailContainer {
  position: relative;
}

#manualEmailQuestion::after {
  content:"\003F" ;
  margin-left: 10px;
  font-size: 30px;
  position: relative;
  top: 5px;
}

#manualEmailQuestion:hover > #manualEmailTooltip {
  display: inline-block;
}

#manualEmailTooltip {
  position: absolute;
  bottom: 100%;
  right: 27%;
  width: 350px;
  background: lightgrey;
  color: #5b5958;
  text-shadow: 0 0 black;
  padding: 20px 20px;
  border-radius: 25px;
  display: none;
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  max-width: 470px;
  width: 100%;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header span {
  margin-top: 0;
  font-weight: bold;
}

.modal-footer span {
  font-weight: bold;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}