@charset "UTF-8";

body {
    background-color: #F4F4F4;
}

#wrap {
    width:      100%;
    max-width:  100%;
    margin:     0 auto;
    padding:    0;
    box-sizing: border-box;
    text-align: left;
}

div#panel-header {
    width:      100%;
    max-width:  none;
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* Panel toolbar: the blue navigation bar. Renamed from #toolbar to #panel-toolbar to avoid
   the conflicting background image from the shared v5.css/#toolbar rules. */
div#panel-toolbar {
    --panel-toolbar-h: 48px;
    width:       100%;
    max-width:   none;
    box-sizing:  border-box;
    font-size:   13px;
    color:       white;
    background:  #0062c6;
    min-height:  var(--panel-toolbar-h);
    line-height: var(--panel-toolbar-h);
    position:    relative;
    z-index:     1;
    box-shadow:  0 2px 3px rgba(0, 0, 0, 0.05);
}

div#panel-toolbar p,
div#panel-toolbar a:link,
div#panel-toolbar a:visited,
div#panel-toolbar a:hover,
div#panel-toolbar a:active {
    font-weight: normal;
    color:       white;
    margin:      0;
    padding:     0 0.5em;
    line-height: var(--panel-toolbar-h);
    background-color: #0062c6;
    text-decoration: none;
}

/* Tab links: full-height so the active accent bar sits flush at the bottom of the blue bar */
div#panel-toolbar a {
    display:       inline-block;
    height:        var(--panel-toolbar-h);
    border-bottom: 3px solid transparent;
    box-sizing:    border-box;
    position:      relative;
}

/* Menu option font size (kept separate from the smaller "Logged in as ..."/logout text) */
div#panel-toolbar p a {
    font-size: 0.9rem;
}

/* Separator between tabs: only as tall as the text, vertically centered (not the full bar height) */
div#panel-toolbar p a::before {
    content:        '';
    display:        inline-block;
    width:          1px;
    height:         1em;
    margin:         0 1em 0 0;
    background:     rgba(255, 255, 255, 0.25);
    vertical-align: middle;
}

div#panel-toolbar p a.first::before {
    display: none;
}

/* Accent bar at the bottom of the box for the selected tab. It should sit under the
   text only, so we inset it past the left padding (0.5em) + the separator (1px width +
   1em right margin) and pull it in by the right padding (0.5em). */
div#panel-toolbar a.active::after {
    content:    '';
    position:   absolute;
    left:       calc(1.5em + 1px);
    right:      0.5em;
    bottom:     -3px;
    height:     4px;
    background: white;
}

/* The first tab has no separator, so the bar only needs to clear the left padding */
div#panel-toolbar p a.first.active::after {
    left: 0.5em;
}

/* Logo on the left of the blue bar.
   Use flex centering: vertical-align on an inline image aligns to the text baseline,
   which leaves it sitting at the top of the much taller toolbar bar. */
div#panel-toolbar a.panel-dare-logo {
    float:         left;
    display:       flex;
    align-items:   center;
    height:        var(--panel-toolbar-h);
    padding:       0 48px 0 12px;
    border-left:   none;
    border-bottom: none;
}

div#panel-toolbar a.panel-dare-logo img {
    height:  32px;
    width:   auto;
    display: block;
}

/* Logged-in user block on the right: "Logged in as ..." with the logout link stacked underneath */
div#panel-toolbar .panel-dare-user {
    float:           right;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    height:          var(--panel-toolbar-h);
    padding:         0 0.75em;
    text-align:      right;
    box-sizing:      border-box;
}

div#panel-toolbar .panel-dare-user span,
div#panel-toolbar .panel-dare-user a {
    display:     block;
    height:      auto;
    margin:      0;
    padding:     0;
    border:      none;
    background:  none;
    font-size:   13px;
    line-height: 1.35;
    color:       white;
}

div#panel-toolbar .panel-dare-user a::before {
    display: none;
}

button.toolbar-nav-toggle {
    display:     none;
    float:       left;
    margin:      0;
    padding:     0 0.65em;
    height:      var(--panel-toolbar-h);
    line-height: var(--panel-toolbar-h);
    border:      none;
    background:  transparent;
    color:       #fff;
    cursor:      pointer;
    font-size:   18px;
    box-sizing:  border-box;
    vertical-align: middle;
}

button.toolbar-nav-toggle:hover,
button.toolbar-nav-toggle:focus {
    background-color: rgba(255, 255, 255, 0.12);
    outline: none;
}

button.toolbar-nav-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

@media (max-width: 1000px) {
    div#panel-toolbar {
        position:   relative;
        overflow:   visible;
        min-height: var(--panel-toolbar-h);
        height:     auto;
    }

    button.toolbar-nav-toggle {
        display: block;
    }

    div#panel-toolbar:not(.is-open) p.toolbar-nav-links {
        display: none;
    }

    div#panel-toolbar.is-open p.toolbar-nav-links {
        display:         flex;
        flex-direction:  column;
        align-items:     stretch;
        position:        absolute;
        top:             100%;
        left:            0;
        right:           auto;
        width:           max-content;
        max-width:       calc(100vw - 16px);
        height:          auto;
        margin:          0;
        clip:            auto;
        overflow:        visible;
        white-space:     normal;
        z-index:         200;
        padding:         0;
        background:      #0062c6;
        border:          1px solid #fff;
        border-top:      none;
        box-shadow:      0 4px 10px rgba(0, 0, 0, 0.25);
    }

    div#panel-toolbar.is-open p.toolbar-nav-links a {
        display:       block;
        border-left:   none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        line-height:   40px;
        padding:       0 1em;
        text-align:    center;
    }

    /* The vertical separator before each tab only makes sense for the
       horizontal wide-view bar, not the stacked hamburger dropdown */
    div#panel-toolbar.is-open p.toolbar-nav-links a::before {
        display: none;
    }

    /* In the dropdown there's no separator and the text is centered, so the
       active bar should span the full row rather than the wide-view text inset */
    div#panel-toolbar.is-open p.toolbar-nav-links a.active::after {
        left:  0;
        right: 0;
    }

    div#panel-toolbar.is-open p.toolbar-nav-links a:last-child {
        border-bottom: none;
    }
}

/* Below the full-width toolbar: fixed max width (legacy panel), centered, shrinks on narrow viewports */
div#main {
    width:            100%;
    max-width:        1280px;
    margin-left:      auto;
    margin-right:     auto;
    padding:          0 10px 1em 10px;
    background-color: #FFFFFF;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #373A3F;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

h1 {
    color: #212121;
    font-family: arial, sans-serif;
    font-size: 18pt;
    line-height: 23px;
    padding: 2px;
    margin-bottom: 0.5em;
    margin-top: 0.7em;
    padding-left: 10px;
    text-align: left;
    font-weight: normal;
}

h2 {
    color: #212121;
    font-family: arial, sans-serif;
    font-size: 18pt;
    line-height: 23px;
    padding: 2px;
    margin-bottom: 0.5em;
    margin-top: 0.7em;
    padding-left: 10px;
    text-align: left;
    font-weight: normal;
}

h3 {
    color: #212121;
    font-family: arial, sans-serif;
    font-size: 13pt;
    line-height: 23px;
    margin-bottom: 10px;
    font-weight: normal;
}

div.edged-box h2 {
    padding-left: 0px;
}

td {
    color: #373A3F;
    font-size: 13px;
    padding-top:     0.5em;
    vertical-align:  middle;
}

th {
    vertical-align: middle;
    text-align:     left;
    padding-top:    0.5em;
}

/* Standard A Hover Effect */
a,a:visited,a:active {
    color: #0062c6;
    font-weight: bold;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

/* Input / Form Controls */
form {
    margin: 0;
    padding: 0;
}
form.other input,form.other textarea,form.other select {
    font-family: arial, sans-serif;
    font-size: 10px;
    border: 1px solid #d4d0c8;
    background-color: #e7ebf7;
    color: #373A3F;
}
input.button {
    font-family: arial, sans-serif;
    font-size: 10px;
    border: 2px ridge #E0E2DF;
    color: #373A3F;
}
input.check {
    font-family: arial, sans-serif;
    font-size: 10px;
    border: 0px solid #b2df76;
    background-color: white;
    color: #373A3F;
}

input.radio {
    font-family: arial, sans-serif;
    font-size: 10px;
    background-color: #ffffff;
    border: 0px;
}

tr.thead th {
    padding: 0.5em;
}

hr {
    color: #f5f5f5;
}

div.tools {
    margin:     0 0 5px 0;
    padding:    0.5em;
    text-align: center;
    border:     1px solid #d7d7d7;
}

span.example {
    display: block;
    font-style: italic;
}

table.data tr.highlight th, table.data tr.highlight td {
    /*background-color: #eeffcf;*/
    background-color: #77D7FF;
}

.inline {
    display: inline;
}

.slots {
    font-weight: bold;
}

.error {
    color: red;
}

p.info,div.info {
    font-size: 12px;
    border: 1px solid #d4d0c8;
    background-color: #f5f5f5;
    padding: 1em 1em 1em 1em;
    margin: 1em 1em 1em 1em;
    vertical-align: middle;
}

p.maintext {
	margin-left: 10px;
	margin-right: 10px;
}

table.spacious {
    margin: 0 10px;
    border-collapse: collapse;
    border: 1px solid #d7d7d7;
}

table.spacious tr td, table.spacious tr th {
    padding: 5px 1em;
}

.calcell {
    font-family: arial, sans-serif;
    font-size: 10px;
    border:    0;
    background-color: #ffffff;
    color:       #373A3F;
    margin-top:  0;
    padding-top: 0;
    margin-bottom: 7px;
}

.clickable,.tog_visible,.tog_hidden {
    cursor: pointer;
    cursor: hand;
}

.expired {
    color: grey;
}

div.edged-box {
    margin: 5px -10px;
    padding: 4px 20px;
    border: 1px solid #d4d0c8;
    background-color: #f5f5f5;
}

div.edged-box a {
    padding:       4px 0.5em;
    border-top:    1px solid #d4d0c8;
    border-bottom: 1px solid #d4d0c8;
    border-left:   1px solid #d4d0c8;
    border-right:  1px solid #d4d0c8;
}
div.edged-box a+a { /* doesn't work in IE6 */
    border-left:  1px solid #f5f5f5;
}

div.edged-box a:hover {
    color: #000;
    border: 1px solid #555;
    background-color: #ffffff;
    text-decoration: none;
}

div.rounded-box {
    margin:  1em 10px;
    padding: 1em 20px;
    border:  1px solid #d4d0c8;
}

/* Styled forms */
form.styled {
    width:     500px;
    font-family: arial, sans-serif;
    font-size: 9pt;
    color:     #333;
}

form.styled legend {
    padding-left: 0;
}

form.styled legend, form.styled label {
    color: #333;
}

form.styled fieldset {
    border: none;
}

form.styled fieldset fieldset {
    background: none;
}

form.styled fieldset ol li {
    padding: 5px 10px 7px 10px;
}

form.styled fieldset fieldset ol {
    border-top: none;
}

form.styled fieldset ol {
    border-top: 1px solid #d4d0c8;
}

form.styled fieldset ol li.last {
    clear: both;
    border-top: 1px solid #d4d0c8;
    border-bottom: 1px solid #d4d0c8;
}
/* Styled forms over */

/* Styled form template */

form.styled fieldset {
    margin-top:    10px;
    margin-bottom: 10px;
}

form.styled legend {
    padding:     0 2px;
    font-family: arial, sans-serif;
    font-weight: normal;
    color:       #0062c6;
    font-size:   15pt;
    _margin:     0 -7px; /* IE Win */
}

form.styled label {
    display:        block;
    line-height:    1.8em;
    vertical-align: top;
}

form.styled label.error {
	font-style: italic;
	color: red;
}

form.styled fieldset ol {
    margin:  0;
    padding: 0;
}

form.styled fieldset ol li {
    list-style: none;
    padding:    5px;
    margin:     0;
}

form.styled fieldset fieldset {
    border: none;
    margin: 3px 0 0 0;
}

form.styled fieldset fieldset legend {
    padding-left: 0;
    margin-left:  -6px;
    font-weight: normal;
    font-size:   1em;
    color:       #333;
    _margin:     0 -7px; /* IE Win */
}

form.styled fieldset fieldset label {
    display: block;
    width:   auto;
}

form.styled em {
    font-weight: bold;
    font-style:  normal;
    color:       #f00;
}

form.styled fieldset fieldset label {
    margin-left: 1em;  /* Width plus 3 (html space) */
}

/*\*//*/
form.styled legend {
    display: inline-block;
}
/* IE Mac legend fix */

form.styled fieldset li#toggle_moreoptions,form.styled fieldset li.first {
	border-top: 1px solid #cccccc;
}

form.styled fieldset li#toggle_moreoptions + li.toggle_moreoptions {
	border-top: 1px solid #cccccc;
}

form.styled fieldset li.toggle_moreoptions + li { /* TODO: Does this work in IE - No, it doesn't */
	border-top: 1px solid #cccccc;
}

form.styled fieldset li.toggle_moreoptions + li.toggle_moreoptions {
	border-top: none;
}

form.styled fieldset li.toggle_moreoptions, .toggle_see_all_companies {
	display: none;
	padding-left: 20px;
}

div.error_messages p {
	margin-bottom: 0;
}

table.zebra tr.subrow th {
    background-color: #fcfcfc;
    color: #373a3f;
	 border-left: 1px solid #0062c6;
	 padding-left: 20px;
}

#main table.zebra tr.last th, #main table.zebra tr.last td {
    border-bottom: none;
}

table.zebra tr.subrow th, table.zebra tr.subrow td {
	 border-bottom:    1px solid #d7d7d7;
    border-top:       1px solid #d7d7d7;
}

table.zebra tr.tog_visible th {
	 padding-left: 20px;
    background: url('/images/common/expand.gif') 0% 50% no-repeat;
}

table.zebra tr.tog_hidden th {
	 padding-left: 20px;
    background: url('/images/common/collapse.gif') 0% 50% no-repeat;
}

table.zebra {
    border-collapse: collapse;
    border: 1px solid #0062c6;
}

table.zebra .not_important {
	color: #999999;
}

table.zebra .important {
	color: #373a3f;
	font-weight: bold;
}

table.zebra tr.odd td {
	background-color: #eaf1f9;
}

table.zebra tr.adcourier .important {
    background-color: #70a00e;
}

table.zebra td.data, table.zebra th.data {
	text-align: center;
	padding-left: 0; /* get rid of the left hand padding */
}

table.zebra td {
	background-color: #ffffff;
	padding: 5px 0 5px 10px;
	border-left: 1px solid #c6ccdc;
}

table.zebra th {
	padding: 7px 0 7px 10px;
	border-left: 1px solid #8999bf;
	color: #ffffff;
	background-color: #0062c6; /* should be the same as table.zebra border color */
	font-family: arial, sans-serif;
	font-weight: bold;
}

/* Neccessary because IE doesn't support element + element CSS selectors */
table.zebra tr th.first, table.zebra tr td.first {
	border-left: 0;
}

table.zebra tr.tools td {
	border-top: 1px solid #0062c6;
	border-left: 1px solid #0062c6;
	background-color: #ffffff;
}

.notyet {
	color: #cccccc;
	font-style: italic;
}

a.notactive:link, a.notactive:visited, a.notactive:hover {
	color: #cccccc;
	font-weight: normal;
}

div.collapsible {
	border: 1px solid #8eb9e6;/* #0062c6; /*#c5ddf9;*/
	padding-top: 1px;
	margin-bottom: 2px;
	background-color: #eaf1f9;
}

div.collapsible div.head {
	background-color: #bed7f0; /* /* #0062c6;/*#d9ecff;*/
	padding-top: 4px;
	padding-bottom: 4px;
}

div.collapsible div.body {
	padding-left: 2em;
	padding-right: 2em;
}

div.collapsible div.head a.toggle {
	background: transparent url(/images/common/collapse.gif) no-repeat;
}

div.collapsible div.head a {
	padding-left: 2em;
	padding-right: 2em;
	color: #004c99;
}

/* Lighter divider drawn between consecutive users (Overview page). Declared before
   the .separator rule so that, on equal specificity, the blue office/team separator
   below wins whenever both classes happen to apply to the same cell. */
td.user-separator, th.user-separator {
    border-top: 1px solid rgb(142, 185, 230, 0.5);
}

tr.separator td, tr.separator th, td.separator, th.separator {
	border-top: 1px solid #8eb9e6;
}

tr.separator td,tr.separator th {
	border-bottom: 1px solid #8eb9e6;
}

div.body table {
	border-collapse: collapse;
}

.juice_bar {
        background-color: #ecd9ef;
        border: 1px solid #bf7fc9;
}

.bb-pwstrength-meter {
  font-size: inherit !important;
}
.bb-pwstrength-show-password {
  font-size: inherit !important;
}

/* these are mostly-copied from adcourier's v5.css, removing a few
   font / color changes that we don't want in Frisbee */

.modal-container .modal {
  display: block;
  width: 65%;
  overflow: hidden;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  z-index: 1010;
  border-radius: 3px;
  font-family: arial, sans-serif;
}
  .modal-container .modal .modal-header {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #e3e3e3; }
    .modal-container .modal .modal-header h2 {
      padding: 30px;
      margin: 0; }
.modal-container .modal .modal-body {
  max-height: 75vh;
  overflow: scroll;
  padding: 15px;
}
.modal-container .modal-overlay {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5; }

.d-none {
  display: none !important; }
.p-20 {
  padding: 20px !important; }
.m-10 {
  margin: 10px !important; }
.float-right {
  float: right; }
.btn {
  padding: 10px 15px;
  border-radius: .25rem;
  font-family: arial, sans-serif;
  font-weight: bold;
}
.btn-primary {
  border-color: #1768a4;
  background-color: #1A76BA;
  color: #ffffff;
}
.btn-secondary {
  border-color: #1768a4;
  background-color: #ffffff;
  color: #1A76BA;
}
.isDisabled {
  cursor: wait;
  opacity: 0.5;
}