/* Minification failed. Returning unminified contents.
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-6'
(21,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(22,24): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(126,37): run-time error CSS1039: Token not allowed after unary operator: '-crew-5'
(138,29): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
(143,34): run-time error CSS1034: Expected closing parenthesis, found ','
(143,34): run-time error CSS1042: Expected function, found ','
(143,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(156,34): run-time error CSS1034: Expected closing parenthesis, found ','
(156,34): run-time error CSS1042: Expected function, found ','
(156,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(181,34): run-time error CSS1034: Expected closing parenthesis, found ','
(181,34): run-time error CSS1042: Expected function, found ','
(181,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(189,34): run-time error CSS1034: Expected closing parenthesis, found ','
(189,34): run-time error CSS1042: Expected function, found ','
(189,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(199,32): run-time error CSS1034: Expected closing parenthesis, found ','
(199,32): run-time error CSS1042: Expected function, found ','
(199,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(204,32): run-time error CSS1034: Expected closing parenthesis, found ','
(204,32): run-time error CSS1042: Expected function, found ','
(204,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(360,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
(367,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(391,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(424,27): run-time error CSS1030: Expected identifier, found '.'
(424,28): run-time error CSS1030: Expected identifier, found 'scheduled-task'
(424,48): run-time error CSS1031: Expected selector, found ')'
(424,48): run-time error CSS1025: Expected comma or open brace, found ')'
(725,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(737,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
(743,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
(795,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-2'
(810,17): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
(1276,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-1'
(1280,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-2'
(1284,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(1288,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
(1296,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-1'
(1302,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-2'
(1308,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-3'
(1314,28): run-time error CSS1039: Token not allowed after unary operator: '-crew-4'
 */
.clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:16px}.clr-picker input[type=range]::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:16px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input,.clr-hue input{position:absolute;width:calc(100% + 32px);height:16px;left:-16px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px auto}.clr-polaroid .clr-clear{margin:0 10px 15px 10px}.clr-polaroid .clr-close{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px}
[v-cloak] {
    display: none
}

:root {
    --crew-1: #78A7C5;
    --crew-2: #3D4166;
    --crew-3: #2C3D4D;
    --crew-4: #F96561;
    --crew-5: #858a91;
    --crew-6: #C6D8E4;
    --crew-7: #537280;
}

.crew-color-6 {
    color: var(--crew-6);
}

.btn:disabled {
    background-color: var(--crew-3);
    border-color: var(--crew-3);
}

@font-face {
    font-family: lato-bold;
    src: url(/font/lato/Lato-Bold.ttf);
}

@font-face {
    font-family: lato-medium;
    src: url(/font/lato/Lato-Medium.ttf);
}

.js-new-user-form {
    display: none;
}

.js-new-task-form {
    display: none;
}

.flash {
    animation: flash 1s ease-out;
}

.crew-img-600 {
    max-width: 600px;
    margin-top: 50px;
}

.next-to-btn {
    border: none;
    height: 40px;
    border-top-right-radius: 10em;
    border-bottom-right-radius: 10em;
}

@keyframes flash {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: #fbf8b2;
    }
    100% {
        background-color: transparent;
    }
}

.invalid-feedback {
    display: block;
}

.flex-grid-sevenths {
    display: flex;
    flex-wrap: wrap;
    /* border-top: 5px solid #78A7C5;
    border-left: 5px solid #78A7C5; */
}

.flex-grid-sevenths .fg-col {
    flex-grow: 1;
    border-bottom: 5px solid #78A7C5;
    border-right: 5px solid #78A7C5;
    width: 14.28571%;
    min-height: 50px;
    background-color: #ffffff;
    padding: 2px;
}

.flex-grid-sevenths .fg-col.grayed-out {
    background-color: #FFFFFFAA;
}

.scheduled-task {
    cursor: initial !important;
    text-align: left;
    font-size: 75%;
    margin: 0 1px 3px 1px;
    border-radius: 0;
    padding: 5px 5px 1px 5px;
    width: calc(100% - 2px);
    border: none;
}

/* Shifts of tasks that have not been published yet, shown only on a partially
   published schedule (a plain draft is all-unpublished, so no cue is needed).
   Outline rather than border: the tile's inline style sets borderColor to the
   task color, which would swallow a border-based cue. */
.scheduled-task.scheduled-task-unpublished {
    outline: 2px dashed rgba(0, 0, 0, 0.45);
    outline-offset: -2px;
    opacity: 0.75;
}

/* The three tiers of the replacement popup: free, free but reluctant, and not
   available. Named classes rather than Bootstrap's .border-left-success /
   -warning / -danger, because dashboard.css re-points the first two at the
   brand navy (#3D4166) and slate (#2C3D4D) - two of the three stripes would
   come out all but the same color and the tiers would stop reading apart at a
   glance, which is the whole point of boxing them. Colors are the ones the app
   already uses: the .btn-green green, the sb-admin amber, and the CREW coral
   that .border-left-danger resolves to anyway. */
.replacement-tier {
    border-left: 0.25rem solid var(--crew-5);
}

.replacement-tier-available {
    border-left-color: #1cc88a;
}

.replacement-tier-reluctant {
    border-left-color: #f6c23e;
}

.replacement-tier-unavailable {
    border-left-color: var(--crew-4);
}

.scheduled-task .task-volunteer {
    display: inline-block;
    background: rgb(255, 255, 255, 0.5);
    color: black;
    padding: 0 8px;
    border-radius: 5px;
    margin: 0 4px 4px 0;
    transition: background-color 0.35s;
}

.scheduled-task .task-volunteer.clickable {
    cursor: pointer !important;
}

.scheduled-task .task-volunteer.clickable:hover {
    background: rgb(255, 255, 255, 1.0);
}

.scheduled-task .slot-controls {
    display: block;
    margin: 2px 0 4px 0;
    white-space: nowrap;
}

.scheduled-task .slot-controls .slot-count {
    display: inline-block;
    min-width: 14px;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
}

.scheduled-task .slot-control {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: rgb(255, 255, 255, 0.6);
    color: black;
    cursor: pointer;
    vertical-align: middle;
    font-size: 10px;
}

.scheduled-task .slot-control:hover:not(:disabled) {
    background: rgb(255, 255, 255, 1.0);
}

.scheduled-task .slot-control:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.scheduled-task .slot-control.slot-control-remove {
    margin-left: 6px;
    background: rgb(220, 53, 69, 0.75);
    color: white;
}

.scheduled-task .slot-control.slot-control-remove:hover:not(:disabled) {
    background: rgb(220, 53, 69, 1.0);
}

.flex-grid-sevenths .fg-col.day-of-week-header {
    text-align: center;
    min-height: auto;
}

.task-wrapper {
    display: inline-block;
    /* margin-right: 10px; */
    /* white-space: nowrap; */
}

.day-name {
    display: none;
}

@media only screen and (max-width: 767px) {
    .flex-grid-sevenths .fg-col {
        display: block;
        width: 100%;
    }
    .flex-grid-sevenths .fg-col.grayed-out {
        display: none;
    }
    .day-name {
        display: inline-block;
    }
    .flex-grid-sevenths .fg-col.fg-col-end {
        border-bottom: 5px solid #78A7C5;
    }
}

@media print {
    .print-none {
        display: none !important;
    }
    .scheduled-task {
        color: #000000 !important;
        background-color: #FFFFFF !important;
    }
    footer {
        display: none;
    }
}

.crew-embed.flex-grid-sevenths {
    border-top: 5px solid #78A7C5;
    border-left: 5px solid #78A7C5;
}

.embed-mobile-cards {
    padding: 0 4px;
}

.embed-mobile-day {
    margin-bottom: 16px;
}

.embed-mobile-day__header {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2C3D4D;
    background: #C6D8E4;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    border-left: 4px solid #78A7C5;
}

.embed-mobile-day__task {
    padding: 10px 12px;
    border-left: 4px solid #3D4166;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
}

.embed-mobile-day__task:last-child {
    border-radius: 0 0 6px 6px;
    border-bottom: none;
}

.embed-mobile-day__time {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-bottom: 2px;
}

.embed-mobile-day__task-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.embed-mobile-day__volunteer {
    font-size: 0.85rem;
}

.mw-fc {
    max-width: 350px;
}

.mw-form {
    max-width: 550px;
}

.badge-top {
    vertical-align: top;
}

.swap-calendar {
    border: 1px solid #e3e6f0;
    padding: 0.6em 1em;
    background: #FFFFFF;
    border-radius: 15px;
}

.day-label {
    float: right;
    z-index: 1;
    /* background: rgba(255, 255, 255, 0.9); */
    padding: 0 5px;
    border-bottom-left-radius: 5px;
}

/* The "+ Add" quick-add beside a day number (admins, editable month, tomorrow
   onward). Deliberately quiet: it repeats on nearly every cell in the month and
   must not compete with the shifts, so it stays gray until hovered. */
.day-add {
    border: none;
    background: transparent;
    color: #858796;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    margin-right: 2px;
    border-radius: 3px;
    vertical-align: baseline;
    cursor: pointer;
}

.day-add:hover:not(:disabled) {
    background: #4e73df;
    color: #ffffff;
}

.day-add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.scroll-container {
    overflow-y: scroll;
    max-height: 195px;
}

.crew-table th {
    background-color: var(--crew-4);
    color: #FFFFFF;
    font-weight: 400;
}

.crew-table td {
    background-color: #FFFFFF;
    color: var(--crew-3);
}

.auto-resizable-iframe {
    max-width: 1920px;
    margin: 0px auto;
}

.auto-resizable-iframe>div {
    position: relative;
    padding-bottom: 56.25%;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.crew-video .h2 {
    text-transform: uppercase;
    color: var(--crew-3);
}

label {
    font-size: 1.1em;
}

.crew-link-orange {
    color: #f26f70;
}

.crew-inline-box {
    width: 55px;
    display: inline;
}

/* color picker */

.clr-field {
    width: 100%;
}

.clr-field button {
    min-width: 38px;
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}

.fg-filled {
    transition: background-color 0.35s;
    cursor: pointer;
}

.fg-filled:hover:not(:has(.scheduled-task:hover)) {
    background-color: #FFE395 !important;
}

.fg-hide {
    display: none;
}

.fg-full {
    width: 100% !important;
}

.roster {
    color: #2C3D4D !important;
    margin-top: 1em;
    border-collapse: separate;
    border-spacing: 5px;
}

.roster th {
    text-align: center;
}

.roster th,
.roster td {
    background-color: #FFFFFF;
    padding: 2px 5px;
}

.roster .ul-border {
    border-top: none;
    border-left: none;
    background-color: transparent;
}

.roster .roster-light {
    background-color: #FFFFFFAA;
    padding: 5px 10px;
}

/* Roster orientation
   The default roster runs days across the top, which needs more horizontal room
   than a phone in portrait has. Below the tablet breakpoint in portrait we swap to
   the transposed table (tasks across the top, dates down the side) so it grows
   downward instead of sideways. Scoped to @media screen so printing always gets
   the wide table regardless of paper orientation. */

.roster-tall {
    display: none;
}

@media screen and (max-width: 767.98px) and (orientation: portrait) {
    .roster-wide {
        display: none;
    }

    .roster-tall {
        display: block;
    }
}

@media print {
    .roster {
        border-collapse: collapse;
    }
    .roster td, .roster-light {
        border: 1px solid #000000 !important;
    }
}

/* Filter checklists (schedule page, dashboard calendar, embedded calendars)
   The caret that reveals the volunteer/task names kept behind "Display All", so a
   long roster doesn't push the calendar off the screen. */

.crew-filter-toggle {
    padding: 0;
    vertical-align: baseline;
    white-space: nowrap;
}

.crew-filter-toggle i {
    margin-right: .25rem;
}

/* Card text column (e.g. the volunteer/contact cards on Manage Volunteers).
   Bootstrap's .col is a flex item with the default min-width:auto, so it can't
   shrink below its min-content width -- the widest unbreakable token. A long
   email address therefore pushed the row past the card width and made .row's
   flex-wrap drop the button column onto its own line, while a card WITHOUT an
   email stayed side-by-side. Same markup, two different layouts depending on
   the data. min-width:0 lets the column shrink so the layout is decided by the
   breakpoint (col-12 / col-sm) instead of by content length. */
.crew-card-text {
    min-width: 0;
    /* min-width:0 removes the automatic minimum that used to keep long tokens from
       being squeezed, so every child needs to be able to wrap -- not just the email.
       A single-token name (the column allows 50 characters) would otherwise overflow
       the narrowed column and paint under the buttons in the 4-across xl layout. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body {
    background-color: #769DB7;
    background-image: url(/img/bkg-02.jpg);
    background-size: 100% auto;
    background-repeat: repeat-y;
    font-family: lato-medium;
}

.crew-nav {
    font-family: lato-bold;
    font-size: 1.2em;
    padding: 1rem 0.5rem;
}

.logo-name {
    font-size: 1em;
    color: #fdfdfd;
    margin-bottom: 0;
}

.navbar-toggler, .navbar-toggler:focus {
    color: #fdfdfd;
    font-size: 2em;
    padding: 0;
    margin: 0;
}

.crew-nav .nav-item {
    margin-left: 15px;
}

.crew-logo {
    height: 68px;
}

.crew-logo-footer {
    width: 68px;
    margin-bottom: 20px;
}

.border-left-danger {
    border-left-color: #f26f70 !important;
}

.crew-btn {
    background-color: #FDFDFD;
    color: #759bb3;
    border: none;
    font-size: 1.2em;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 100px;
}

.crew-btn:hover, .crew-btn:active, .crew-btn:focus {
    background-color: #f26f70 !important;
    color: #FDFDFD !important;
}

.crew-btn-nav {
    background-color: transparent;
    border-radius: 100px;
    color: #FDFDFD;
    border: none;
    font-size: 1em;
    padding-left: 30px;
    padding-right: 30px;
}

.crew-btn-nav:hover, .crew-btn-nav:active, .crew-btn-nav:focus {
    background-color: #FDFDFD !important;
    color: #759bb3 !important;
}

.crew-btn-nav-i {
    background-color: #FDFDFD;
    border-radius: 100px;
    color: #759bb3;
    border: none;
    font-size: 1em;
    padding-left: 30px;
    padding-right: 30px;
}

.crew-btn-nav-i:hover, .crew-btn-nav-i:active, .crew-btn-nav-i:focus {
    background-color: #f26f70 !important;
    color: #FDFDFD !important;
}

.crew-btn-cta {
    background-color: #FDFDFD;
    color: #759bb3;
    border: none;
    font-size: 2em;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 100px;
}

.crew-btn-cta:hover, .crew-btn-cta:active, .crew-btn-cta:focus {
    background-color: #f26f70 !important;
    color: #FDFDFD !important;
}

.crew-btn-transparent {
    color: #FDFDFD;
    border: 1px solid #FDFDFD;
    text-decoration: none !important;
    padding: 0 15px 1px 15px;
    border-radius: 100px;
}

.crew-btn-transparent:hover, .crew-btn-transparent:active, .crew-btn-transparent:focus {
    background-color: #FDFDFD !important;
    color: #353954 !important;
}

.crew-btn-orange {
    background-color: #f26f70;
    color: #fdfdfd;
    border: none;
    font-size: 1.2em;
    border-radius: 100px;
    text-decoration: none !important;
}

.crew-btn-orange:hover, .crew-btn-orange:active, .crew-btn-orange:focus {
    background-color: #FDFDFD !important;
    color: #f26f70 !important;
}

.crew-btn-cta-orange {
    background-color: #f26f70;
    color: #fdfdfd;
    border: none;
    font-size: 2em;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 100px;
}

.crew-btn-cta-orange:hover, .crew-btn-cta-orange:active, .crew-btn-cta-orange:focus {
    background-color: #FDFDFD !important;
    color: #f26f70 !important;
}

h1, .h1 {
    font-family: lato-bold;
    font-size: 4em;
    margin-bottom: 2rem;
}

h2, .h2 {
    color: #f26f70;
    font-family: lato-bold;
    font-size: 3em;
    margin-bottom: 2rem;
}

.crew-block {
    color: #1d1851;
    margin-bottom: 50px;
}

.crew-section {
    margin-top: 50px;
}

.crew-section-dark {
    background-color: #2d3252;
    color: #FDFDFD;
    padding: 50px 0;
}

.crew-section-light {
    background-color: #95b0c4;
    color: #FDFDFD;
    padding: 50px 0;
}

.crew-section-light-bar {
    background-color: #C6D8E4;
    color: #000000;
    padding: 50px 0;
    border-top: 10px solid #FFFFFF;
}

.crew-section-light-bar-2 {
    background-color: #BFD2E0;
    color: #000000;
    padding: 50px 0;
    margin-top: 0;
}

.headline-full-width {
    font-size: 4em;
    line-height: 60px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--crew-3);
    /* text-align: justify; */
    /* letter-spacing: -7px;
    text-align-last: justify;
    display: inline-block; */
}

.headline-full-width-orange {
    font-size: 4em;
    line-height: 60px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--crew-4);
    margin-top: 25px;
    display: inline-block;
}

.headline-full-width-orange-box {
    background-color: var(--crew-4);
    color: #FFFFFF;
    padding: 0 15px;
    display: inline-block;
    font-size: 80px;
    height: 120px;
    line-height: 120px;
}

.headline-full-width-orange-text {
    font-size: 155px;
    display: inline-block;
    position: absolute;
    right: 10px;
    bottom: 37px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .headline-full-width {
        font-size: 3em;
    }
    .headline-full-width-orange-box {
        font-size: 60px;
        height: 90px;
        line-height: 90px;
    }
    .headline-full-width-orange-text {
        font-size: 100px;
        bottom: 20px;
    }
}

@media only screen and (max-width: 500px) {
    .headline-full-width {
        font-size: 2.8em;
    }
    .headline-full-width-orange-box {
        font-size: 60px;
        height: 90px;
        line-height: 90px;
    }
    .headline-full-width-orange-text {
        font-size: 100px;
        bottom: 20px;
    }
}

.crew-badge-white {
    background-color: #FFFFFF;
    font-size: 1.2em;
    display: inline-block;
    border-radius: 10em;
    color: var(--crew-2);
    padding: 5px 15px;
    margin: 15px 15px 0 15px;
}

.light-bar-circle {
    background-color: #BFD2E0;
    background-image: url(/img/cloud.svg);
    background-size: 192px;
    background-position-x: -1px;
    border: 10px solid #FFFFFF;
    border-radius: 100em;
    width: 210px;
    height: 210px;
    margin: auto;
    color: var(--crew-4);
    font-size: 1.2em;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}

.light-bar-circle span {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 0 42px 10px 42px;
    line-height: 1.1em;
    width: 190px;
}

@media only screen and (min-width: 992px) {
    .crew-section-light-bar {
        margin-top: 155px;
    }
    .light-bar-circle {
        margin-top: -155px;
    }
}

.crew-block-a {
    min-height: 500px;
    margin-bottom: 50px;
}

.crew-block-a img {
    max-height: 500px;
    position: absolute;
    right: 0;
    z-index: -1;
    object-fit: contain;
}

.crew-block-b {
    min-height: 500px;
    margin-bottom: 50px;
}

.crew-block-b img {
    max-height: 500px;
    position: absolute;
    left: 0;
    z-index: -1;
    object-fit: contain;
}

.crew-block-c {
    min-height: 500px;
    margin-bottom: 50px;
}

.crew-block-c img {
    max-height: 500px;
    position: absolute;
    right: 0;
    z-index: -1;
    object-fit: contain;
}

.crew-bkg-img-right {
    position: absolute;
    right: 0;
    /* width: 80%;
    max-width: 800px; */
    z-index: -1;
    object-fit: contain;
    max-height: 500px;
}

.crew-bkg-img-right-1k {
    max-width: 1000px;
}

.crew-bkg-img-full {
    position: absolute;
    right: 0;
    width: 100%;
    z-index: -1;
}

.crew-bkg-img-squiggle {
    width: 100%;
    z-index: -1;
}

.crew-mt-100 {
    margin-top: 100px;
}

.crew-mt-n50 {
    margin-top: -50px;
}

.crew-bkg-img-left {
    position: absolute;
    left: 0;
    width: 80%;
    max-width: 1000px;
    z-index: -1;
    /* transform: translateY(250px); */
}

.crew-bkg-img-full-div {
    margin-top: calc(100vw / 2.9);
    margin-bottom: calc(100vw / 2.9);
}

.crew-bkg-blue {
    color: #759bb3;
    background-color: #d8ecf7;
    margin: -1px 0;
    padding: 32px 0;
}

.crew-offset {
    margin-top: 100px;
}

.crew-offset-lg {
    margin-top: 300px;
}

p, li {
    font-size: 1.2em;
}

.crew-negative {
    color: #FDFDFD;
}

.crew-negative h2 {
    color: #FDFDFD;
}

.crew-white {
    color: #000000;
    background: #FFFFFF;
    padding: 50px 0;
}

.crew-shade {
    color: #FDFDFD;
    background: rgb(79, 83, 112);
    background: linear-gradient(90deg, rgba(79, 83, 112, 1) 0%, rgba(44, 49, 81, 1) 100%);
    padding: 50px 0;
}

.crew-shade .card-body {
    color: #000000;
    font-size: 1em;
}

.invalid-feedback {
    font-size: 1em;
    color: #f26f70;
}

.crew-shade a {
    color: #FDFDFD;
    text-decoration: underline;
}

.pad-100 {
    padding: 100px 0;
}

.pad-200 {
    padding: 200px 0;
}

.login-img {
    margin-bottom: 50px;
    width: 100%;
    max-width: 150px;
}

.img-100 {
    width: 100%;
}

.crew-valign {
    align-self: center;
}

.crew-break {
    overflow-wrap: break-word;
}

.crew-orange {
    color: #f1c1bf;
}

.crew-orange-2 {
    color: #f26f70;
}

.crew-blue {
    color: #1d1851;
    font-family: lato-bold;
    text-transform: uppercase;
}

.crew-img-full {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: block;
    padding: 0 30px;
}

.crew-footer {
    background-color: #f26f70;
    color: #fdfdfd;
}

.crew-footer p:nth-of-type(2) {
    margin: 0;
}

.crew-footer a {
    color: #fdfdfd;
}

.crew-block {
    color: #1d1851;
}

.crew-block .h2 {
    color: #FDFDFD;
}

.min-500 {
    min-height: 500px;
}

.min-550 {
    min-height: 550px;
}

.min-650 {
    min-height: 650px;
}

.navbar-toggler-icon {
    line-height: 1.5em;
}

.crew-svg {
    width: 100%;
}

.crew-svg-500 {
    max-width: 500px;
}

.crew-svg-300 {
    max-width: 300px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-50 {
    margin-top: 50px;
}

form .form-control {
    font-size: 1.2em;
    line-height: 1.5;
    background: #fdfdfd;
    border-color: #fdfdfd;
}

form .input-group-text {
    color: #007CD6;
    background: transparent;
}

::placeholder {
    color: #007CD6 !important;
    opacity: 0.5;
}

.crew-relative {
    position: relative;
}

.crew-float-icon {
    color: #007CD6;
    font-size: 1.2em;
    line-height: 42px;
    position: absolute;
    right: 12px;
    top: 0;
}

.css-login input.form-control {
    text-align: center;
}

.crew-form form .form-control {
    background: #FFFFFF;
    color: #000000;
    border: 1px solid #81B4E1;
    font-size: 1.1em;
}

.crew-form form label, .crew-form form .invalid-feedback, .crew-form form p {
    font-size: 1.1em;
}

.crew-form form .form-control::placeholder {
    color: #8B8B8B !important;
}

.crew-form a {
    color: #81B4E1;
    text-decoration: underline;
}

.crew-btn-cta-blue {
    background-color: #81B4E1;
    color: #fdfdfd;
    border: none;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 1.2em;
    border-radius: 5px;
    display: block;
    width: 100%;
}

.crew-btn-cta-blue:hover, .crew-btn-cta-blue:active, .crew-btn-cta-blue:focus {
    background-color: #f26f70 !important;
    color: #fdfdfd !important;
}

.crew-btn-cta-blue.chosen {
    background-color: #f26f70;
    color: #fdfdfd;
}

.mw-400 {
    max-width: 400px;
}

.crew-neg {
    margin-top: -100px;
    color: #4A4B4F;
}

.crew-neg .card {
    border: none;
    box-shadow: 0 0 2px #B9BCC5;
}

.crew-neg .bg-primary {
    background: #78A7C5 !important;
}

.crew-neg .bg-success {
    background: #3D4166 !important;
}

.crew-neg .bg-warning {
    background: #2C3D4D !important;
}

.crew-neg .bg-danger {
    background: #F96561 !important;
}

.crew-neg .h2 {
    font-size: 1.6em;
}

.crew-neg p, .crew-neg li {
    font-size: 1em;
}

.crew-neg .card-body {
    min-height: 140px;
}

.crew-neg .list-group-flush>.list-group-item:first-child {
    border-top-width: 1px;
}

.crew-dollar {
    display: block;
    font-size: 4em;
    font-weight: bold;
}

.crew-suffix {
    position: absolute;
    right: 15px;
    margin-top: 18px;
}

.crew-carret {
    font-size: 100px;
    text-align: center;
    margin-top: -45px;
    margin-bottom: -45px;
}

.crew-highlight {
    background: #F99B93;
    border-radius: 100px;
    padding: 5px 10px;
    margin-left: -10px;
}

.crew-highlight-primary {
    background: #78A7C544;
}

.crew-highlight-success {
    background: #3D416644;
}

.crew-highlight-warning {
    background: #2C3D4D44;
}

.crew-highlight-danger {
    background: #F9656144;
}

.crew-carret-primary {
    color: #78A7C5;
}

.crew-carret-success {
    color: #3D4166;
}

.crew-carret-warning {
    color: #2C3D4D;
}

.crew-carret-danger {
    color: #F96561;
}

.crew-btn-cta-primary, .crew-btn-cta-success, .crew-btn-cta-warning, .crew-btn-cta-danger {
    background-color: #F96561;
    color: #fdfdfd;
    border: none;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 1.1em;
    border-radius: 100px;
    display: block;
    width: 100%;
    text-decoration: none !important;
}

.crew-btn-cta-primary {
    background-color: var(--crew-1);
}

.crew-btn-cta-success {
    background-color: var(--crew-2);
}

.crew-btn-cta-warning {
    background-color: var(--crew-3);
}

.crew-btn-cta-danger {
    background-color: var(--crew-4);
}

.crew-upgrade {
    border-radius: 5px;
}

.crew-btn-cta-primary:hover, .crew-btn-cta-primary:active, .crew-btn-cta-primary:focus {
    background-color: var(--crew-1);
    opacity: 0.8;
    color: #fdfdfd !important;
}

.crew-btn-cta-success:hover, .crew-btn-cta-success:active, .crew-btn-cta-success:focus {
    background-color: var(--crew-2);
    opacity: 0.8;
    color: #fdfdfd !important;
}

.crew-btn-cta-warning:hover, .crew-btn-cta-warning:active, .crew-btn-cta-warning:focus {
    background-color: var(--crew-3);
    opacity: 0.8;
    color: #fdfdfd !important;
}

.crew-btn-cta-danger:hover, .crew-btn-cta-danger:active, .crew-btn-cta-danger:focus {
    background-color: var(--crew-4);
    opacity: 0.8;
    color: #fdfdfd !important;
}

a.crew-alt-a {
    color: #f26f70;
    text-decoration: none;
}

a.crew-alt-a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* 
@media only screen and (max-width: 190px) {
    .light-bar-circle {
        height: 210px;
    }
} */

@media only screen and (max-width: 991px) {
    /* .light-bar-circle {
        height: 150px;
    } */
    .crew-offset-lg {
        margin-top: 60px;
    }
    .crew-btn-nav, .crew-btn-nav-i {
        padding-left: 15px;
        padding-right: 15px;
    }
    .crew-block-a, .crew-block-b, .crew-block-c {
        min-height: initial;
    }
    .crew-block-a img {
        max-height: initial;
        max-width: 450px;
    }
    .crew-block-b img {
        max-height: initial;
        max-width: 350px;
    }
    .crew-block-c img {
        max-height: initial;
        max-width: 350px;
    }
    .crew-neg {
        margin-bottom: 100px;
    }
    .crew-neg:last-child {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px) {
    .crew-logo {
        height: 34px;
        margin-left: 1rem;
    }
    .crew-section-top {
        margin-top: 15px;
    }
    .logo-name {
        display: none;
    }
    h1, .h1 {
        font-size: 3em;
    }
    h2, .h2 {
        font-size: 2em;
    }
    .crew-block-a img {
        max-width: 50%;
    }
    .crew-block-b img {
        max-width: 50%;
    }
    .crew-block-c img {
        max-width: 50%;
    }
    .crew-mobile-nav .crew-btn-nav-i {
        background-color: transparent;
        border-radius: 100px;
        color: #FDFDFD;
        border: none;
        font-size: 1em;
        padding-left: 30px;
        padding-right: 30px;
    }
    .crew-mobile-nav .crew-btn-nav-i:hover, .crew-mobile-nav .crew-btn-nav-i:active, .crew-mobile-nav .crew-btn-nav-i:focus {
        background-color: #FDFDFD !important;
        color: #759bb3 !important;
    }
    .crew-mobile-nav .crew-btn-nav, .crew-mobile-nav .crew-btn-nav-i {
        padding: .5rem 1rem;
    }
    .navbar-toggler-icon {
        font-size: 43px;
    }
}

@media only screen and (max-width: 575px) {
    .crew-bkg-img-right, .crew-bkg-img-left {
        opacity: 0.25;
    }
    .crew-offset, .crew-offset-lg {
        margin-top: 0;
    }
    .crew-block-a img, .crew-block-b img, .crew-block-c img {
        opacity: 0.2;
        max-width: 75%;
    }
}

/* .slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
} */