/** General */
.center-cropped {
    object-fit: cover; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
}
body {color:rgba(0,0,0,0.87);}
.standalone-avatar{height:40px;width:40px;border-radius:100%;overflow:hidden;max-width:unset;margin-right:12px;object-fit: cover;object-position: center;flex-shrink: 0;}
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.label {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.label-primary {
    background-color: #337ab7;
}
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

/** Other base stuff */
.main-character {height:1em;width:auto;margin-right:3px;}

/** Core Item (not a vue component but something to be used in many vue components) */
.core-item{padding:20px;}
.core-item>*{display:inline-block;}
.avatar img {border-radius:100%;overflow:hidden;max-width:unset;}
.core-item .avatar {margin-right:15px;}
.core-item .dropdown-toggle::after {display:none}
.core-item .character{height:1em;width:auto;margin-right:3px;}
.core-item .skill_level{color:rgba(0,0,0,0.24);}
.core-item .subtitle .admin{font-weight:bold;color:#F8BC33;margin-right:3px;}
.core-item .subtitle .organizer{font-weight:bold;color:#175FFF;margin-right:3px;}
.core-item .subtitle {}
.core-item .center-cropped {height:40px;width:40px;}

.core-item.large .center-cropped {height:80px;width:80px;}
.core-item.large {font-size:15px;}

/** Lots of changes pulsing */
.user-listing.pulsing .ui-block{background-color:#F8BC33;}
.user-listing.pulsing .name{color:rgba(255,255,255,1) !important;}
.user-listing.pulsing .skill_level{color:rgba(255,255,255,0.54) !important;}
.user-listing.pulsing .subtitle .admin{color:rgba(255,255,255,0.54) !important;}
.user-listing.pulsing .subtitle .organizer{color:rgba(255,255,255,0.54) !important;}
.user-listing.pulsing .subtitle .organizer{color:rgba(255,255,255,0.54) !important;}

.user-listing.pulsing .pulse{padding: 0px 20px 20px;}
.user-listing.pulsing .pulse .heading{color:rgba(255,255,255,1) !important;}
.user-listing.pulsing .pulse .text{color:rgba(255,255,255,0.87) !important;}

.user-listing .subtext {padding: 0px 20px 20px;}
.user-listing .latest-post .text{color:rgba(0,0,0,0.87) !important;}
.user-listing .latest-post .timestamp{color:rgba(0,0,0,0.24) !important;}

/** Posts */

.available-reactions-popup {
    position: absolute;
    background-color: white;
    border: rgba(0, 0, 0, 0.1) 1px solid;
    border-radius: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06), 0 1px 5px rgba(0,0,0,0.06);
    visibility: hidden;
    opacity: 0;
    /* https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property */
    transition: visibility 0s, opacity 0.15s linear;
}

.available-reactions-popup.visible {
    visibility: visible;
    opacity: 1;
}

.available-reactions-popup:hover {
    visibility: visible;
    opacity: 1;
}

.available-reactions-popup img:hover {
    transform: scale(1.25);
}

.available-reactions-popup.visible img {
    visibility: visible;
    opacity: 1;
}

.available-reactions-popup:hover img {
    visibility: visible;
    opacity: 1;
}

.available-reactions-popup img {
    visibility: hidden;
    opacity: 0;
    /* https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/ */
    transition: all .2s ease-in-out;
    height: 24px;
    width: 24px;
}

/** Basic Card */
.basic-card .btn-card {cursor:pointer;}
.basic-card .btn-card:hover {
    background-color:rgba(0,0,0,0.01) !important;
}

/** Event Listing */
.event-listing .core-item .avatar {margin-right:0px;}
.event-listing .core-item {padding:20px;}
.event-listing .core-item .avatar img {border-radius:100%;overflow:hidden;max-width:unset;margin-right:15px;}
.event-listing .date {margin-right:12px;color:rgba(0,0,0,0.24)}
.event-listing .location {margin-right:12px;color:rgba(0,0,0,0.24)}
.event-listing .link {margin-right:6px;margin-bottom:0px;padding:0px;}

.event-listing.featured .core-item {box-shadow: 0 0 14px 0 rgba(63,66,87,.1)}
.event-listing.featured .center-cropped {height: 60px;width: 60px;}

.event-listing.featured .tournament {box-shadow: 0 0 7px 0 rgba(63,66,87,.1);padding:8px;margin-bottom:8px;}
.event-listing.featured .tournament .item {margin-right:12px;font-weight:bold;}

.event-listing.event-passed .ui-block {background-color:#ecf0f1;}
.event-listing.event-passed.featured .ui-block {background-color:#FFF;}
.external-event-listing.event-passed .ui-block {background-color:#ecf0f1;}
.event-listing.event-hidden .ui-block {background-color:rgba(244,67,54 ,0.12);}
.event-listing.event-hidden.featured .ui-block {background-color:#FFF;}
.ui-block.routine-hidden {background-color:rgba(244,67,54 ,0.12);}

/** Set Listing */
.set-listing .current-player {font-weight:bold;}
.set-listing .ui-block.win {background-color:rgba(76,175,80 ,0.1);}
.set-listing .ui-block.loss {background-color:rgba(244,67,54 ,0.1);}
.set-listing .core-item .avatar {margin-right:15px;}
.set-listing .core-item {padding:0px;}
.set-listing .core-item .avatar img {border-radius:100%;overflow:hidden;max-width:unset;}
.set-listing .center-cropped {height: 20px;width: 20px;}
.set-listing .header-row {min-height:55px;}

/** Search Result Listing */
.search-result-listing {min-height:48px;width:100%;}
.search-result-listing .ui-block {width:100%;padding:12px;}
.search-result-listing img {height:40px;width:40px;border-radius:100%;overflow:hidden;max-width:unset;margin-right:12px;}

/** Conversation Listing */
.conversation-header-listing.selected-conversation {
    background-color:rgba(0,0,0,0.05) !important;
}

/** Video Listing */
.video-listing.video-hidden .ui-block {background-color:rgba(244,67,54 ,0.12);}

/** Load More Button */
.load-more{text-align: center;padding: 15px 0;font-size: 12px;color: #515365;display: block;font-weight: 700;margin: 0 auto;margin-bottom:30px;}

/** guide-editor */
.page-listing.selected-page {
    background-color:rgba(0,0,0,0.05) !important;
}

/** profile-detail-list */
.profile-detail-list button:disabled {
    color: black;
    background-color: #e9ecef;
    border: 1px solid #e6ecf5;
}
.bg-error {
    background-color:rgba(231, 76, 60, 0.1);
}

/** Just Custom Classes for me */
.faded-red{font-weight:initial;color:rgba(244, 67, 54, 0.54);}
.faded-green{font-weight:initial;color:rgba(76, 175, 80, 0.54);}
.today{font-weight:bold;color:#175FFF !important;}
.passed{font-weight:initial;color:rgba(244,67,54,0.24) !important;}
.admin{font-weight:bold;color:#F8BC33;margin-right:3px;}
.organizer{font-weight:bold;color:#F8BC33;margin-right:3px;}
.bc-purple{background-color:rgba(103,58,183 ,1);} .bc-purple24{background-color:rgba(103,58,183 ,.24);} .bc-purple54{background-color:rgba(103,58,183 ,.54);}
.bc-primary{background-color:#175FFF;} .bc-accent{background-color:#F8BC33;}
.bc-black87{background-color:rgba(0,0,0,0.87);} .bc-black50{background-color:rgba(0,0,0,0.5);} .bc-black24{background-color:rgba(0,0,0,0.24);} .bc-black12{background-color:rgba(0,0,0,0.12) !important;} .bc-black5{background-color:rgba(0,0,0,0.05);} .bc-black2{background-color:rgba(0,0,0,0.02);}
.bc-white87{background-color:rgba(255,255,255,0.87);} .bc-white50{background-color:rgba(255,255,255,0.5);} .bc-white24{background-color:rgba(255,255,255,0.24);}
.bc-off-white-article{background-color:#fbf7f5;}
.bc-off-white{background-color:rgba(0,0,0,0.05);}
.c-primary{color:#175FFF !important;} .c-accent{color:#F8BC33 !important;}
.c-black{color:#000 !important;} .c-black87 {color: rgba(0,0,0,0.87) !important} .c-black54 {color:rgba(0,0,0,0.54) !important;} .c-black24 {color:rgba(0,0,0,0.24) !important;} .c-black12 {color:rgba(0,0,0,0.12) !important;}
.c-white54 {color:rgba(255,255,255,0.54) !important;} .c-white24 {color:rgba(255,255,255,0.24) !important;} .c-white12 {color:rgba(255,255,255,0.12) !important;}
.c-white{color:#FFFFFF !important;} .c-accent{color:#F8BC33;}
.c-discord-background{background-color:#7289da;} .c-facebook-background{background-color:#3B5998;} .c-twitch-background{background-color:#6441A4;} .c-youtube-background{background-color:#ff0000;}
.c-discord{color:#7289da;} .c-facebook{color:#3B5998;} .c-twitch{color:#6441A4;} .c-youtube{color:#ff0000;} .c-twitter{color:#00aced;}
.c-online{color:#38b681;}
.c-green{color:#38b681;}
.c-red{color:#d63031;}
.dropdown-toggle::after {display:none}
.c-link-blue{color:#0652dd !important;}
.no-hover{pointer-events: none !important;}
.bc-black {background-color:rgba(0,0,0,1);}
.bc-white {background-color:rgba(255,255,255,1);}

/** Custom Class: btn-white */
.btn-white.selected {box-shadow:0 0 0 .2rem rgba(0, 0, 0,.12);}
.btn-white.focus,.btn-white:focus,.btn-white:not(:disabled):not(.disabled).active:focus,.btn-white:not(:disabled):not(.disabled):active:focus,.show>.btn-white.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0, 0, 0,.12)}
.btn-white{color:rgba(0,0,0,1);background-color:#FFFFFF;border-color:rgba(0,0,0,0.24)}
.btn-white.no-border{border-color:rgba(0,0,0,0);}
.btn-white:hover{color:rgba(0,0,0,1);background-color:rgba(0,0,0,0.08);}
.btn-white.disabled,.btn-white:disabled{color:rgba(0,0,0,0.54);background-color:#FFFFFF;}
.btn-white:not(:disabled):not(.disabled).active,.btn-white:not(:disabled):not(.disabled):active,.show>.btn-white.dropdown-toggle{color:#000;background-color:rgba(0,0,0,0.08);border-color:rgba(0, 0, 0,.54)}
.btn-white:not(:disabled):not(.disabled).active.no-border
,.btn-white:not(:disabled):not(.disabled):active.no-border,
.show>.btn-white.dropdown-toggle.no-border{border-color:rgba(0,0,0,0);}

/** Custom Class: btn-transparent */
.btn-transparent.selected {box-shadow:0 0 0 .2rem rgba(0, 0, 0,.12);}
.btn-transparent.focus,.btn-transparent:focus,.btn-transparent:not(:disabled):not(.disabled).active:focus,.btn-transparent:not(:disabled):not(.disabled):active:focus,.show>.btn-transparent.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0, 0, 0,.12)}
.btn-transparent{color:rgba(0,0,0,1);background-color:transparent;border-color:rgba(0,0,0,0.24)}
.btn-transparent.no-border{border-color:rgba(0,0,0,0);}
.btn-transparent:hover{color:rgba(0,0,0,1);background-color:rgba(0,0,0,0.08);}
.btn-transparent.disabled,.btn-transparent:disabled{color:rgba(0,0,0,0.54);background-color:transparent;}
.btn-transparent:not(:disabled):not(.disabled).active,.btn-transparent:not(:disabled):not(.disabled):active,.show>.btn-transparent.dropdown-toggle{color:#000;background-color:rgba(0,0,0,0.08);border-color:rgba(0, 0, 0,.54)}
.btn-transparent:not(:disabled):not(.disabled).active.no-border
,.btn-transparent:not(:disabled):not(.disabled):active.no-border,
.show>.btn-transparent.dropdown-toggle.no-border{border-color:rgba(0,0,0,0);}

/** Custom Class: btn-selected */
.btn-selected.focus,.btn-selected:focus,.btn-selected:not(:disabled):not(.disabled).active:focus,.btn-selected:not(:disabled):not(.disabled):active:focus,.show>.btn-selected.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23, 95, 255, .54);}
.btn-selected{color:rgba(255,255,255,1);background-color:rgba(23, 95, 255, 1);border-color:rgba(23, 95, 255, 0.24)}
.btn-selected.no-border{border-color:rgba(0,0,0,0);}
.btn-selected:hover{color:rgba(255,255,255,1);background-color:rgba(23, 95, 255, 1);}
.btn-selected.disabled,.btn-selected:disabled{color:rgba(255,255,255,0.54);background-color:rgba(23, 95, 255, 1);}
.btn-selected:not(:disabled):not(.disabled).active,.btn-selected:not(:disabled):not(.disabled):active,.show>.btn-selected.dropdown-toggle{color:#FFF;background-color:rgba(23, 95, 255, 0.8);border-color:rgba(23, 95, 255, 0.24)}
.btn-selected:not(:disabled):not(.disabled).active.no-border
,.btn-selected:not(:disabled):not(.disabled):active.no-border,
.show>.btn-selected.dropdown-toggle.no-border{border-color:rgba(0,0,0,0);}

/** Custom Class: btn-primary */
.btn-primary.focus,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(63,81,181 ,0.54);}
.btn-primary{color:rgba(255,255,255,1);background-color:rgba(63,81,181 ,1);border-color:rgba(63,81,181 ,0.24);}
.btn-primary.no-border{border-color:rgba(0,0,0,0);}
.btn-primary:hover{color:rgba(255,255,255,1);background-color:rgba(63,81,181 ,1);}
.btn-primary.disabled,.btn-primary:disabled{color:rgba(255,255,255,0.54);background-color:rgba(63,81,181 ,1);}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#FFF;background-color:rgba(63,81,181 ,0.8);border-color:rgba(63,81,181 ,0.24)}
.btn-primary:not(:disabled):not(.disabled).active.no-border
,.btn-primary:not(:disabled):not(.disabled):active.no-border,
.show>.btn-primary.dropdown-toggle.no-border{border-color:rgba(0,0,0,0);}

/** Custom Class: btn-primary */
.btn-selected-2.focus,.btn-selected-2:focus,.btn-selected-2:not(:disabled):not(.disabled).active:focus,.btn-selected-2:not(:disabled):not(.disabled):active:focus,.show>.btn-selected-2.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7 ,0.54);}
.btn-selected-2{color:rgba(255,255,255,1);background-color:rgba(255,193,7 ,1);border-color:rgba(255,193,7 ,0.24)}
.btn-selected-2.no-border{border-color:rgba(0,0,0,0);}
.btn-selected-2:hover{color:rgba(255,255,255,1);background-color:rgba(255,193,7 ,1);}
.btn-selected-2.disabled,.btn-selected-2:disabled{color:rgba(255,255,255,0.54);background-color:rgba(255,193,7 ,1);}
.btn-selected-2:not(:disabled):not(.disabled).active,.btn-selected-2:not(:disabled):not(.disabled):active,.show>.btn-selected-2.dropdown-toggle{color:#FFF;background-color:rgba(255,193,7 ,0.8);border-color:rgba(255,193,7 ,0.24)}
.btn-selected-2:not(:disabled):not(.disabled).active.no-border
,.btn-selected-2:not(:disabled):not(.disabled):active.no-border,
.show>.btn-selected-2.dropdown-toggle.no-border{border-color:rgba(0,0,0,0);}

/** Custom Class: btn-primary */
.btn-white.selected {box-shadow:0 0 0 .2rem rgba(0, 0, 0,.12);}
.btn-white.focus,.btn-white:focus,.btn-white:not(:disabled):not(.disabled).active:focus,.btn-white:not(:disabled):not(.disabled):active:focus,.show>.btn-white.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0, 0, 0,.12)}
.btn-white{color:rgba(0,0,0,1);background-color:#FFFFFF;border-color:rgba(0,0,0,0.24)}
.btn-white.no-border{border-color:rgba(0,0,0,0);}
.btn-white:hover{color:rgba(0,0,0,1);background-color:#fafafa;}
.btn-white.disabled,.btn-white:disabled{color:rgba(0,0,0,0.54);background-color:#FFFFFF;}
.btn-white:not(:disabled):not(.disabled).active,.btn-white:not(:disabled):not(.disabled):active,.show>.btn-white.dropdown-toggle{color:#000;background-color:rgba(0,0,0,0.08);border-color:rgba(0, 0, 0,.54)}
.btn-white:not(:disabled):not(.disabled).active.no-border
,.btn-white:not(:disabled):not(.disabled):active.no-border,
.show>.btn-white.dropdown-toggle.no-border{border-color:rgba(0,0,0,0);}

/** Search Bar */
.search-container {height:48px;width:100%;margin-bottom:0px;}
.search {height:100%;width:100%;font-size:16px;padding-left:16px!important;padding-right:16px!important;background-color:#FFF;color:#000;}
.search:focus {background-color:#FFF;}

/** Inputs are too big by default */
input {padding:0.5rem !important;}
textarea {padding:0.5rem !important;}

/** Markdown Editor */
.wysiwyg-editor {white-space: normal!important;}
.wysiwyg-editor .ql-editor {min-height: 80px;}

/** Timeslot Modal */
.timeslot-modal div.core-detail { display: inline; }
.timeslot-modal .core-detail p {
    margin-bottom: 0;
    display: inline;
    font-size: 1rem;
    /* Copied from .p-md */
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    letter-spacing: normal;
    color: #424242;
    overflow-wrap: break-word;
}

/** Booth Interface */
.booth-interface .quill-display a {
    color: rgb(0, 0, 238);
    text-decoration: underline;
    cursor: auto;
}

.booth-interface .quill-display a:visited {
    color: rgb(85, 26, 139);
}

.booth-interface .quill-display a:link:active {
    color: rgb(255, 0, 0);
}

/** Booth Invites Modal */
.booth-invites-modal .email-preview p {
    font-size: 16px;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}


/** Booth Schedule Modal */
.booth-schedule-modal .vuecal__arrow { display: none; }
.booth-schedule-modal .vuecal__time-column { width: 4.5em; }
.booth-schedule-modal .vuecal__event-time { display: none; }
.booth-schedule-modal .vuecal__event-title { margin-top: 3px; }
.booth-schedule-modal .vuecal__event { border-radius: 4px; }

/** Leave Resume */
.leave-resume-modal input {
    width: initial; 
    display: inline-block;
}

.leave-resume-modal label {
    width: initial; 
}

.leave-resume-modal label a {
    color: rgb(0, 0, 238);
    text-decoration: underline;
    cursor: pointer;
}

.leave-resume-modal label a:visited {
    color: rgb(85, 26, 139);
}

.leave-resume-modal label a:linkactive {
    color: rgb(255, 0, 0);
}


/** Generic Import */
.generic-import-csv-modal .spreadsheet-container {
    flex-direction: column;
    display: inline-flex;
}
.generic-import-csv-modal .spreadsheet {
    max-width: 600px;
    overflow-x: scroll;
}
.generic-import-csv-modal .spreadsheet-row {
    flex-direction: row;
    display: flex;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.generic-import-csv-modal .spreadsheet-cell-bottommost {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.generic-import-csv-modal .spreadsheet-cell {
    padding: 4px 8px;
    width: 170px;
    min-width: 170px;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 28px;
}
.generic-import-csv-modal .spreadsheet-column-header {
    margin-left: -3px;
    padding: 4px 0;
    border-width: 0;
}

/** Session Users Modal */
.session-users-modal .selected-user-container {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

/** Home Page Component */
.home-page .block-header-button:not(:first-child)  {
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 0;
}

.home-page .block-header-button:first-child  {
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    border-left: 0;
    border-right: 0;
}

/** Step Indicator */
.step-indicator .step-badge {
    display: inline-block;
    padding: 0;
    font-size: 11px;
    font-weight: lighter !important;
    line-height: 24px;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: rgba(0,0,0,0.38);
    border-radius:24px;
    position: relative;

    height: 24px;
    width: 24px;
}
.step-indicator .step-badge.active{background-color:#2196F3;}
.step-indicator .step-badge.complete{background-color:#2196F3;}
.step-indicator .step-text{
    font-size:14px;
}

/** Multi Select Pills */
.multi-select-pills .pill {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 20px;
    background-color: lightgrey;
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 6px;
}

.multi-select-pills .pill.selected {
    background-color: deepskyblue;
    color: white;
}