/* Body and structure
-------------------------------------------------- */
body {
    position: relative;
    padding-top: 60px;
    background-color: #fff;
}

/* Space out sub-sections more
-------------------------------------------------- */
section {
    padding-top: 30px;
}

/* Faded out hr */
hr.soften {
    height: 1px;
    margin: 54px 0;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    border: 0;
}


/* Footer
-------------------------------------------------- */
.footer {
    margin-top: 45px;
    padding: 35px 0 36px;
    border-top: 1px solid #e5e5e5;
}
.footer p {
    margin-bottom: 0;
    color: #555;
}
.footer p.light {
    color: #bbb;
}


/* Tables
-------------------------------------------------- */
.table-nonfluid {
   width: auto;
}

td {
    vertical-align: middle !important;
}

table.valign-top td {
    vertical-align: top !important;
}

tr.received {
    border-left: 10px solid #DDDDDD;
}
tr.no {
    border-left: 10px solid #C43C35;
}
tr.maybe {
    border-left: 10px solid #F89406;
}
tr.yes {
    border-left: 10px solid #46A546;
}

tr.current td {
    background-color: #666 !important;
}

table.assignment td {
    padding: 2px;
}

table.celllinks td {
  display:table-cell; padding:0;
}

table.celllinks td > a {
  text-decoration:none; color: #404040; display:block; height:100%;
}

table.celllinks .toggle:hover {
    cursor: pointer;
}

table.celllinks .toggle td {
    padding: 10px 10px 9px 10px;
}

table.celllinks .expand-child td {
    padding: 0;
}

table.table-event-row td {
    padding: 4px 5px;
}

.week-heading-td {
    background-color: #d9d9d7 !important;
    text-align: center;
}


/* action buttons
-------------------------------------------------- */
.actions {
    padding: 15px 0 15px 0;
}

a.export-button {
    margin: 0 5px;
}

/* cover photo highlight
-------------------------------------------------- */

.thumbnail.cover {
    border-color: #000000;
}


/* Simple Spinner
-------------------------------------------------- */

.simple-spinner {
  width: 1.3em;
  height: 1.3em;
  border: 3px solid #0000;
  margin: 5% auto;
  border-left: 3px solid #0006;
  border-right: 3px solid #0006;
  border-radius: 50%;
  transition: transform;
  animation: simple-spinner-animation .6s linear infinite;
}

@keyframes simple-spinner-animation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes simple-spinner-animation {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}




/* Registration management
-------------------------------------------------- */

.spinner-right {
    float: right;
    position: relative;
    z-index: 2000000000;
    left: -13px !important;
    top: 13px !important;
}

#event-filter {
    margin-bottom: 1em;
}

ul.sortable {
    list-style-type: none;
    margin: 0;
    padding: 3px;
    min-height: 90px;
}

#programs .ui-sortable-helper {
    display: table;
}

ul.event-list {
    list-style-type: none;
    margin: 0;
}

.registration.item {
  white-space: normal;
}

.registration.item .clique {
  float: left;
  height: 5px;
  margin-bottom: 4px;
  margin-right: 3px;
  width: 30px;
}

.registration.item .clique.spacer {
  width: 0;
  margin-right: 0;
}

.registration.item .cliques-list-stop {
  clear: both;
}

.registration.item, .element-list .ui-state-highlight {
    margin-bottom: 3px;
    padding-top: 0;
    cursor: move;
    text-align: left;
    width: 100%;
}

.element-list .ui-state-highlight {
    height: 10px;
}

.registration.item.selected {
    background-color: #fea;
}

.registration.item.approved {
    background-color: #5eb95e;
}

.registration.item.ui-sortable-helper {
    -webkit-transform: rotate(-1deg) scale(1.05, 1.05);
    -moz-transform: rotate(-1deg) scale(1.05, 1.05);
}

#accepted-header.warning {
    color: #B94A48;
}

.big-label-h3 {
    font-size: 18px;
    position: relative;
    top: 1em;
}


/* Misc
-------------------------------------------------- */
img {
    max-width: 100%;
}

.btn-settings {
    padding: 0px 12px !important;
    margin-right: 5px;
}

/* Make tables spaced out a bit more */
h2 + table,
h3 + table,
h4 + table,
h2 + .row {
    margin-top: 5px;
}

/* Tighten up spacing */
.well hr {
    margin: 18px 0;
}

/* making my own bootstrap 4 classes */
.p-0 {
    padding: 0;
}

.pt-1 {
    padding-top: 1em;
}

.mr-1 {
    margin-right: 1em;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 1em;
}

.border-top {
    border-top: 1px solid #eee;
}

.mb-1 {
    margin-bottom: 1em;
}

/* Start page
-------------------------------------------------- */
.jumbotron {
    padding: 30px !important;
    font-size: 18px;
}

.jumbotron p {
    line-height: 1.5em;
}

.jumbotron h1 {
    margin-top: 0;
}

#header-img img {
    max-height: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.contact-fix {
    margin-top: 1em !important;
    border-top: 0 !important;
}

#start-welcome-text a {
    color: #006FB8;
}

/* Text
-------------------------------------------------- */
.small  { font-size: .85em; }


/* Alert Block
-------------------------------------------------- */
.alert-block ul {
    padding-left: 20px;
}


/* Feedback
-------------------------------------------------- */
#btn-feedback {
    position: fixed;
    top: 245px;
    z-index: 1030;
    left: -35px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

#btn-feedback:hover {
    left: -5px;
}


/* Forms
-------------------------------------------------- */
form .required {
    color: #B94A48;
    padding: 0 0 0 10px;
    font-weight: bold;
}

fieldset legend {
    width: auto;
    border: none;
    font-weight: bold;
}

.tag-search-button {
    vertical-align: bottom;
}


/* Datetimepicker: https://github.com/trentrichardson/jQuery-Timepicker-Addon
-------------------------------------------------- */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div { padding: 0 5px !important; }

#ui-datepicker-div {z-index: 100 !important;}

/* Dashboard
-------------------------------------------------- */
.stats-caption {
  background-color: #EFEFEF;
  text-align: center;
}

.stats-sub-caption {
  text-align: center;
}

.table-registrations .last-column {
  text-align: right;
}


/* Jump-To-Form fitting into the breadcrumbs
-------------------------------------------------- */
ol.breadcrumb form.jump-to-model {
    margin: 0;
    display: inline-block;
}

ol.breadcrumb form.jump-to-model .select2-container {
    vertical-align: middle;
}


/* Select2 + Crispy Fixes */
.select2-container.form-control {
    padding: 0 !important;
    background-color: inherit !important;
    border: none !important;
    height: 100%;
}


/* In crispy forms, we would need that, but it breaks shit everywhere else.
.select2-drop.select2-with-searchbox.select2-drop-active {
    margin-top: -10px;
}
*/

/* Distribution dialog.
-------------------------------------------------- */
#assignment-dialog .btn-group {
    margin: 5px 0;
    width: 100%;
}

#assignment-dialog .btn-group .btn {
    width: 100%;
}

#assignment-dialog .btn-group .btn .glyphicon-ok,
#assignment-dialog .btn-group .btn .glyphicon-remove {
    float: left;
    margin-right: 12px;
    margin-top: 14px;
}

#assignment-dialog .btn-group .btn .glyphicon-ok {
    display: none;
}

#assignment-dialog .btn-group .btn.active .glyphicon-ok {
    display: inline-block;
}

#assignment-dialog .btn-group .btn.active .glyphicon-remove {
    display: none;
}


/* jQuery sticky plugin.
-------------------------------------------------- */
.sticky {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: white;
}

.sticky.scrolling {
    background-color: rgba(100, 100, 100, 0.5);
    width: auto;
    right: 0;
    left: 0;
    z-index: 1030;
}

.sticky .container {
    padding: 0;
}


/* jQuery calendar plugin.
-------------------------------------------------- */
.table-calendar {
    width: auto;
    display: inline-table;
}

.table-calendar td {
    border: 0;
}

.table.table-calendar tfoot td {
    text-align: center;
}

.table-calendar .inputStartDate, .table-calendar .inputEndDate {
    width: 140px;
}

.table-calendar .date-error input {
    border-color: #b94a48;
}

.table-calendar .date-error .help-inline, .table-calendar .date-error input {
    color: #b94a48;
}


/* Fluffy buttons
-------------------------------------------------- */
.actions .btn {
    margin-bottom: 7px;
}


/* The little helper tooltip */
.help {
    font-size: 16px;
    top: -0.50em;
    position: relative;
}

/* History
-------------------------------------------------- */

.history img {
    float: left;
    border: 1px solid #666;
    margin-top: 2px;
}

.history .history-description {
    padding: 0 0 0 40px;
}

.history .history-date {
    font-size: 13px;
    color: #888;
    margin: 0;
}


/* Warning list
-------------------------------------------------- */
.warning-list {
    margin: 0;
    padding: 0;
}

.warning-list li {
    list-style: none;
    margin-bottom: 5px;
}


/* Start page
-------------------------------------------------- */
.jumbotron h1 {
    font-size: 50px;
}


/* Responsiveness
-------------------------------------------------- */
@media (max-width: 768px) {
    .jumbotron {
        padding: 19px;
    }

    /* step 1 */
    table#events > tbody > tr > td:nth-child(1),
    table#events > thead > tr > th:nth-child(1),
    table#events .toggle td:nth-child(2),
    table#events th:nth-child(2),
    table#events .toggle td:nth-child(3),
    table#events th:nth-child(3),
    table#events .toggle td:nth-child(4),
    table#events th:nth-child(4) {
        display: none;
    }

    /* step 2 */
    .table-adaption.type-distribution td:nth-child(2),
    .table-adaption.type-distribution th:nth-child(2) {
        display: none;
    }
}


/* Warning list
-------------------------------------------------- */
#activeFields, #passiveFields {
    border: 1px solid #eee;
    width: 100%;
    height: 350px;
    overflow-y: scroll;
    padding: 5px 0 0 0;
}
#activeFields li, #passiveFields li {
    margin: 0 5px 5px 5px;
    width: 98%;
    cursor: move;
}


/* Attention Seekers (see https://daneden.me/animate/)
-------------------------------------------------- */

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}

@-webkit-keyframes tada {
    0% {-webkit-transform: scale(1);}	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
    0% {-moz-transform: scale(1);}
    10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
    100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
    0% {-o-transform: scale(1);}
    10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
    100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
    0% {transform: scale(1);}
    10%, 20% {transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
    100% {transform: scale(1) rotate(0);}
}

.tada {
    -webkit-animation-name: tada;
    -moz-animation-name: tada;
    -o-animation-name: tada;
    animation-name: tada;
}

/* Event index
-------------------------------------------------- */

.information-icons span {
    padding: 0 2px 0 2px;
}

.information-icons .fa.pull-right {
    margin-left: 0;
}

/* Pass
-------------------------------------------------- */

.online-payment-btn {
    padding: 10px;
    border: 1px solid #d6d4d4 !important;
    border-radius: 10px;
    margin-top: 5px;
    background-color: white !important;
    background-image: none !important;
}

.online-payment-btn-text {
    color: black !important;
}

.online-payment-btn:hover {
    background-color: rgba(130, 130, 130, 0.06);
}

.header-with-border {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(100, 100, 100, 0.18);
    margin-bottom: 10px;
}

/* toggle radio buttons
-------------------------------------------------- */
.btn-group > .btn-toggle:not(.active) {
    color: #333;
    background-color: #eee;
    border-color: #ccc;
}

/* outstanding claims filter
-------------------------------------------------- */

.modal-form-wrapper {
    display: flex;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
}

.modal-button-group-wrapper {
    padding-top: 4px;
}

.modal-buttons {
    vertical-align: initial;
}

/* Proof App
-------------------------------------------------- */

.proof-edit, .proof-edit:hover, .proof-edit:visited {
    color: #fff;
}

.clickable {
    cursor: pointer;
}

/* Mobile CSS
-------------------------------------------------- */

@media screen and (max-width: 500px) {
    .mobile-font-1em {
        font-size: 1em;
    }

    .mt {
        margin-top: 1em;
    }

    .mb {
        margin-bottom: 2em;
    }

    .mobile-btn-block {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .mobile-white-space {
        white-space: normal;
    }
}

/* Custom Fields
-------------------------------------------------- */

.custom-fields-btn {
    color: #fff !important;
    display: initial !important;
}

.custom-fields-header {
    border-top: solid 2px black;
}

.custom-question-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Organizer
---------------------------------------------------
 */

.debit-organizer-margin > legend {
    margin-bottom: 1px;
}

.organizer-logo {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin: 10px;
}

/* Mail Warnings
---------------------------------------------------
 */

.mail-warning-row {
    border: 1px solid #eee;
    padding: 1em 0;
    margin: 1em 0;
}

.mail-col-border {
    border-right: 1px solid #eee;
}

/* Image Overlay stuff for the event details modal in the search
---------------------------------------------------
 */

.img-overlay-parent > .img-overlay {
  position: relative !important;
  z-index: 12000 !important;
  color: #000;
  top: 0;
  left: 0;
  background: #fff;
  padding: 2px;
  border-radius: 0 0 4px 0;
}
.img-overlay-parent > .img-overlayee {
  position: absolute !important;
  z-index: 11000 !important;
    border-radius: 3px;
}

.img-overlay-parent:hover,
.img-overlay-parent:active {
    border: 1px solid rgb(55, 123, 181);
}

/* Truncating the program name for better mobile layout (applicable when name too long
---------------------------------------------------
 */

.truncate-program-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85vw;
  display: inline-block;
}

@keyframes blink-highlight {
  0%, 100% { background-color: inherit; }
  50% { background-color: #fffa8b; }
}

.blink-highlight {
  animation: blink-highlight 1s ease-in-out infinite;
}