/* ================================== */
/* =            Global              = */
/* ================================== */


@font-face {
  font-family: 'Myriad Pro';
  src: url("/assets/MyriadPro-Light-98e77f69.otf");
  font-weight: lighter;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url("/assets/MyriadPro-Regular-2b902e89.otf");
  font-weight: normal;
  font-style: normal;
}

/*

Don't use these fonts for now since they are 100kb each.

@font-face {
  font-family: 'Myriad Pro';
  src: url("/assets/MyriadPro-Bold-69cd2088.otf");
  font-weight: bold;
}

@font-face {
  font-family: 'Myriad Pro';
  src: url("/assets/MyriadPro-Semibold-3d762000.otf");
  font-weight: bold;
}
*/


/*$speech-color: #feed6f;*/

html { height:100%; width:100%; }
body { background-color:#e6f1f6; padding:0; margin:0; font-size:13px; font-family: Helvetica, arial, sans-serif; color:#333333; height:100%; width:100% }
p { margin:1em 0; }
img { border:0 }

/* Global Layout */
/*h2 { font-size:15px; color:#89a; font-weight:bold; margin:20px 0}*/
h2 { font-size:15px; color:var(--color-grey-medium); font-weight:bold; margin:20px 0}
a, a:visited { color: #4183C4; text-decoration:none }
a:hover { color: #000 }
hr { border-style:solid; border-width:1px 0 0 0; color:#ddd; }

.field_with_errors { display:inline }

.speech,
.speech-top,
.speech-bottom,
.speech-left,
.speech-right { font-family: Helvetica, arial, sans-serif; padding:12px; line-height:1.4em; font-size:16px; font-weight:lighter; background-color: $speech-color; color: #9c5720; width:250px; position:relative; border-radius:4px; box-shadow: 0px 0px 15px rgba(0,0,0,0.15), 0px 0px 1px 1px rgba(0,0,0,0.1); z-index:1; }

.speech-top:after,
.speech-bottom:after,
.speech-left:after,
.speech-right:after { content: " "; width: 0; height: 0; position: absolute; border-style:solid; display:block; z-index:1; }

.speech-top:after {
  bottom: 100%;
  left: 50%;
  margin-left: -15px;
  border-width: 15px;
  border-color: transparent transparent $speech-color transparent;
}

.speech-bottom:after {
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border-width: 15px;
  border-color: $speech-color transparent transparent transparent;
}

.speech-left:after {
  top: 50%;
  right: 100%;
  margin-top:-15px;
  border-width: 15px;
  border-color: transparent $speech-color transparent transparent;
}

.speech-right:after {
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border-width: 15px;
  border-color: transparent transparent transparent $speech-color;
}

a.delete-link { color:#aa3333 }

.flash-alert { background-color: #a00; color: #fff; padding:15px 20px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; }

.content { margin:auto; padding:15px 0 15px 0 }

/*  TODO: Deprecate these styles  */;
  .notice, .alert, .warning, .info { z-index:1; }
  .notice {  border: 1px solid #d2e9d3; background-color: #e2f9e3; color: #060 }
  .alert { background-color: #a00; color: #fff; }
  .warning { border: 1px solid #efefaf; background-color: #ffffcf; color: #8a8a30; }

.notice, .success, .alert, .warning { font-size:13px; text-align:center; padding: 10px 15px; background-position: 25px 9px; margin-bottom:10px; }

/* box */
/* TODO: rename to pretty-box */
.box, .box-header { padding: 20px }
.box {
  background-color: #fcfcfc;
}
.box-header {
  big {
    font-size: 16px;
  }
  background-color: #f5f5f5;
  border-bottom: solid 1px #eee;
}

/* small box */
.small-box { padding:6px 8px; background-color:#ffffff; }
.small-box hr { border:solid 1px; border-bottom:0; color:#ddd }

.error-list {
  padding: 20px 40px;
  color: white;
  background-color: var(--color-error);
  font-weight: bold;
}

/* override Rails CSS defaults */
/*
.errorExplanation { font-size:12px; background-color:#883333; color:#ffffff; padding:10px; margin:0 0 12px; }
.errorExplanation ul { list-style:inside disc; }
.errorExplanation li { padding:2px 0; }
*/

.fieldWithErrors { display:inline }
.pretty .fieldWithErrors label { color:#990000; font-weight:bold }
.pretty .fieldWithErrors input[type=text] { background-color:#ffbbbb }
.pretty .fieldWithErrors input[type=password] { background-color:#ffbbbb }

/* Flash at the bottom */
.flash { display:none; font-size:14px; margin-left:-20px; position:fixed; text-align:center; bottom:0;
         height:20px; width:100%; padding:20px; font-weight:bold; }

/*.flash { display:none; padding:8px 10px; margin:3px }*/

.paper { background-color:#ffffff; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); }
  .paper h2.discreet { font-size:13px; color:#999; font-weight:normal; margin:20px 0; } /* body background: #e6f1f6*/
  .paper h3 { font-size:14px; font-weight:bold }

.toolbar { padding:7px 10px; background-color:#f3f3f3; border-bottom:solid 1px #e5e5e5; }
  .toolbar-title { text-align:center; color:#89a; font-size:16px; font-weight:bold; }
  .toolbar-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .toolbar .people-count { font-size:13px; color:#999; font-weight:normal; }
    .toolbar .contact-navigation { color:var(--color-grey-medium); }
    .toolbar .return-link,
    .toolbar .tools-menu { flex:1 }
    .toolbar .tools-menu { text-align:right }
      .toolbar .tools-menu .dialog { text-align:left } /* don't inherit the menu's right alignment */


/* Experimental - always show scroll in Safari */
.show-scroll::-webkit-scrollbar { -webkit-appearance: none; width: 7px }
.show-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5) }
.show-scroll::-webkit-scrollbar-track {background-color: rgba(57,57,57, .2); width:2px; border-radius: 4px }

.tools-menu { position:relative }
  .events-index .tools-menu { float:right; margin-left:30px; }
  .tools-menu > a:hover,
  .tools-menu > .popover-trigger:hover { text-decoration:none; color:#000 }
  .tools-menu > a,
  .tools-menu > .popover-trigger { display:inline-block; padding:0 6px 0 5px }
  .tools-menu > .popover-trigger { color:#4183C4; font:inherit }
  .tools-menu > a.selected { color:#000; font-weight:bold; }
  .tools-menu a.last-child { border:0; }  /* last-child unfortunately doesn't work */
  .tools-menu .importing-contacts { display:inline-block; padding-left:6px }
  .tools-menu .failed-import { color:#f33; }
  .tools-menu .successful-import { color:#3a3 }

.last-email-nil,
.last-email-sent,
.last-email-opened,
.last-email-updated,
.last-email-failed { display:inline-block; width:15px }

.last-email-sent { color:#7b7 }
.last-email-opened { color:#7b7 }
.last-email-failed { color:#e66 }
.last-email-updated { color:#aae }

.note { font-weight:normal; border:solid 1px #d5d5d5; background-color:#feed6f; color:#a46425; font-size:16px; padding:15px; line-height:1.5em; z-index:5; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px;}

.getting-started-note {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  margin:100px auto;
  width:360px;
  background-color:#FFFFCF;
  padding:15px;
  font-size:26px;
  line-height:1.2em;
  color:#10903B;
  border:solid 1px #F0F0B3;
  /*font-family:Cambria, Georgia, Times, 'Times New Roman', serif; */
  font-family:'Sue Ellen Francisco', Helvetica, Sans-serif;
  font-family:'Shadows Into Light Two', Helvetica, Sans-serif;
  font-family:"Reenie Beanie",arial,sans-serif;
  font-style:italic;
/*  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:5px;
*/
}

.note, .getting-started-note h2 {
  /*text-shadow: 1px 0px 2px white;*/
  color:#10903B;
  font-size:34px;
  font-weight:normal;
  margin:15px 15px 30px 15px;
}

.getting-started-note p {
  margin:10px;
}

/* ================================== */
/* =            Sidemenu            = */
/* ================================== */

.side-menu { font-size: 13px; background-color: #f5f5f5 }
  .side-menu .menu-hint { font-weight: normal; padding-left: 5px; color: var(--color-grey-light); font-style: italic; font-size: 12px; font-family: Cambria, Georgia, Times, 'Times New Roman', serif; }
  .side-menu a { text-decoration: none; padding: 10px 20px 10px 25px; display: block; border-bottom: solid 1px #eee; }
  .side-menu a:hover { color: #000; }
  .side-menu a:last-child { border-bottom: 0 }
  .side-menu a.selected:last-child { border-bottom: solid 1px #eee}
  .side-menu a.first-child { margin-top: 1px;}
  .side-menu a.selected:first-child { border-top: solid 1px #eee; margin-top:0;}
  .side-menu a.selected { color: #000; font-weight: bold; background-color: #fff }



/*================================================== Application ================================================*/

/* ================================== */
/* =            Banner              = */
/* ================================== */

.banner { display:flex; justify-content: space-between; align-items: center; gap: 30px; font-family: "Myriad Pro"; height:70px; margin: 5px 25px }
 .banner .logo-container { font-size:18px; color:#768ab4 }
 .banner .menu { flex: 1; font-size:16px;}
   .banner .menu a { display:inline-block; text-decoration:none; padding:7px 10px; color:#a3a8ba }
   .banner .menu a.selected { color:#000 }
   .banner .menu a:hover { color:#000 }
 .menu-login { font-size: 14px; color:#838994 }
   .menu-login button { color:#999; display:inline-block; font:inherit }
   .menu-login button:hover { color:#000; }
   .menu-login button .fa-user { margin-right:4px; }
   .menu-login > a { display:inline-block; padding-right:8px; }
   .menu-login .user-menu-popover { margin-top:6px; }
  .banner .search { position:relative; }
    .banner:has(.search:focus-within) .menu { display:none; }
    .banner .search:focus-within { flex:1; }
    .banner .search-icon { position:absolute; top: 8px; left: 7px; color:#aaa; pointer-events:none; }
    .banner .search input[type=text] { box-sizing:border-box; font-size: 16px; border-radius: 20px; padding: 4px 6px 4px 25px; border:solid 1px #e0e0e0; width: 100px;}
    .banner .search:focus-within input[type=text] { width:100%; }

.main-menu-icon-container {
  position: relative;
}

.main-menu-icon {
  cursor: pointer;
  font-size: 26px;
}

@media (min-width: 768px) {
  .main-menu-icon-container {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .logo-container {
    display: none !important;
  }
  .banner .menu {
    display: none !important;
  }
}


/* ============ */
/* = jQueryUI = */
/* ============ */
.ui-widget-overlay { opacity:.6; filter:Alpha(Opacity=60); }
.ui-icon { display:inline-block; zoom:1; display:inline; vertical-align:text-bottom; }
.ui-dialog { padding:0; -moz-box-shadow:0 6px 8px rgba(0,0,0,.5); -webkit-box-shadow:0 6px 8px rgba(0,0,0,.5); box-shadow:0 6px 8px rgba(0,0,0,.5); }
.ui-dialog .ui-dialog-titlebar.ui-widget-header { border-top:none; border-left:none; border-right:none; }
.ui-dialog .ui-dialog-content { padding:6px 8px; }

.ui-dialog.confirmation .ui-dialog-content { text-align:center; overflow:hidden; }


@import "activities";
@import "font-awesome/font-awesome";
@import "dialog";
@import "pagination";
@import "calendar";
@import "utils";
@import "forms";
@import "table";
@import "account";
@import "config";