:root {
    --bs-primary: #950F15;
    --bs-primary-rgb: 149, 15, 21;    
    --bs-secondary: #231F20;
    --bs-secondary-rgb: 35, 31, 32;
    --bs-link-color: #950F15;
    --bs-link-hover-color: #950F15;
}
/* FONTS */
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-Thin.woff') format('woff');
    font-weight:200;
    font-style:normal
}
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-Light.woff') format('woff');
    font-weight:300;
    font-style:normal
}
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-Regular.woff') format('woff');
    font-weight:400;
    font-style:normal
}
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-RegularItalic.woff') format('woff');
    font-weight:400;
    font-style:italic
}
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-Medium.woff') format('woff');
    font-weight:500;
    font-style:normal
}
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-Semibold.woff') format('woff');
    font-weight:600;
    font-style:normal
}
@font-face {
    font-family: 'SF Pro Display';
    src:  url('../fonts/SF-Pro-Display-Bold.woff') format('woff');
    font-weight:700;
    font-style:normal
}

/* GENERAL STYLES */
html { font-size:16px }
body { font-family:'SF Pro Display', sans-serif; color:#231F20 }
a { text-decoration:none }
a:hover { text-decoration:underline }

.opacity-6 { opacity:0.6 }

/* Alerts */
.alert { --bs-alert-border-radius:0 }
.alert-primary { --bs-alert-color:var(--bs-white); --bs-alert-bg:var(--bs-primary); --bs-alert-border-color:transparent }

/* LOGIN */
.accounts .login .row > div:first-child { position:relative; border-radius:0 0 2.5rem 2.5rem; overflow:hidden }
.accounts .login .row > div:first-child:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(35, 31, 32, .5) }
.accounts .login .hero-img { min-height:50vh; max-height:50vh; width:100%; object-fit:cover }
.accounts .login .title { position:absolute; left:50%; transform:translateX(-50%); bottom:3rem; margin:0; min-width:200px; max-width:400px; font-family: 'Julius Sans One', sans-serif; font-size:2.25rem; text-transform:uppercase; text-align:center; letter-spacing:3px; line-height:2.5rem; color:#fff }
.accounts .login .site-logo { display:none }
.accounts .login .content { position:relative; display:flex; flex-direction:column; max-width:460px; margin:0 auto; padding:40px; justify-content:center; overflow:auto; text-align:center }
.accounts .login form { text-align:left }
.accounts .login label { margin-bottom:.5rem }
.accounts .login input[type="email"],
.accounts .login input[type="text"],
.accounts .login input[type="password"] { display:block; width:100%; padding:.75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.accounts .login input[type="email"]:focus,
.accounts .login input[type="text"]:focus,
.accounts .login input[type="password"]:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.accounts .login input[type="submit"] { display:flex; justify-content:center; width:100%; margin:2rem auto; font-family:"SF Pro Display", sans-serif; font-weight:600; text-transform:uppercase; padding:.75rem; color:var(--bs-white); background-color:var(--bs-primary); border:2px solid var(--bs-primary); border-radius:2rem; transition:.15s ease-in-out }
.accounts .login input[type="submit"]:hover { color:var(--bs-secondary); background-color:rgba(149, 15, 21, 0.1) }
.accounts .login a[href*="password-reset"] { font-weight:500 }

.accounts .signup .content { justify-content:flex-start }
.accounts .signup .content ul,
.accounts .signup .content .helptext { opacity:.6; font-size:.875rem }
.accounts .signup .content .helptext { display:block; margin-top:1rem }
.accounts .signup .content select { display: block; padding: .375rem 2.25rem .375rem .75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: .375rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none }
.accounts .signup .content select:focus { outline:0; border-color:var(--bs-primary); box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }

@media only screen and (min-width:1200px) {
    .accounts .login .row > div:first-child { border-radius:0 4rem 4rem 0 }
    .accounts .login .hero-img { min-height:100vh; max-height:100vh }
    .accounts .login .title { bottom:5rem; font-size:3.125rem; line-height:3.75rem }
    .accounts .login .site-logo { display:block; position:absolute; top:40px; left:50%; transform:translateX(-50%) }
    .accounts .login .content { height:100vh }
    .accounts .signup .content { overflow:auto }
    .accounts .signup .site-logo { position:relative; top:0; left:auto; transform:none; margin:0 auto 4rem }
}

/* Reset Password */
.accounts .reset-password { padding:40px 0 0; gap:7rem }
.accounts .reset-password .card { max-width:460px; padding:40px }
.accounts .reset-password .site-logo { display:none }
.accounts .reset-password h1 { font-size:1.5rem }
.accounts .reset-password label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.accounts .reset-password input[type="email"] { display:block; width:100%; padding:.75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.accounts .reset-password input[type="email"]:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.accounts .reset-password input[type="submit"] { display:flex; justify-content:center; width:100%; margin:2rem auto; font-family:"SF Pro Display", sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:.75rem; color:var(--bs-white); background-color:var(--bs-primary); border:2px solid var(--bs-primary); border-radius:2rem; transition:.15s ease-in-out }
.accounts .reset-password input[type="submit"]:hover { color:var(--bs-secondary); background-color:rgba(149, 15, 21, 0.1) }

@media only screen and (min-width:576px) {
    .accounts .reset-password .card-body { text-align:center }
    .accounts .reset-password .site-logo { display:block }
    .accounts .reset-password h1 { font-size:2.75rem }
}

/* Portal */
.portal { background-color:#F7F9FA }
.portal .btn-primary { display:flex; justify-content:center; font-family:"SF Pro Display", sans-serif; font-weight:600; font-size:.875rem; text-transform:uppercase; text-decoration:none; letter-spacing:1px; color:var(--bs-white); background-color:var(--bs-primary); border:2px solid var(--bs-primary); border-radius:2rem; transition:.15s ease-in-out}
.portal a.btn-primary.back { max-width: 80px;}
.portal .btn-primary:hover { color:var(--bs-secondary); background-color:rgba(149, 15, 21, 0.1) }
.portal .offcanvas-menu { --bs-offcanvas-width:300px; background-color:#fff !important; box-shadow:0px 4px 20px 5px rgba(35, 31, 32, 0.1) }
.portal .offcanvas-menu .btn-close { z-index:1021 }
.portal .offcanvas-menu .offcanvas-body { padding:0 }
.portal .site-header .profile-image { max-width:140px; max-height:140px }
.portal .site-header .user-profile .name { font-size:1.125rem }
.portal .site-header .user-profile .email { opacity:0.6 }
.portal .site-header .nav .nav-link { display:flex; align-items:center; white-space:nowrap; font-size:1.125rem; color:#000; border-radius:.5rem }
.portal .site-header .nav .nav-link:before { content:''; display:block; width:24px; height:34px; margin-right:1rem; background-repeat:no-repeat; background-position:50% 50%; background-color:transparent }
.portal .site-header .nav .nav-link.event-attended:before,
.portal .site-header .nav .nav-link.event-list:before { background-image:url(../images/icon_calendar.png) }
.portal .site-header .nav .nav-link.event-upcoming:before { background-image:url(../images/icon_clock.png) }
.portal .site-header .nav .nav-link.match-list:before { background-image:url(../images/icon_heart.png) }
.portal .site-header .nav .nav-link.user-list:before,
.portal .site-header .nav .nav-link.profile:before,
.portal .site-header .nav .nav-link.settings:before { background-image:url(../images/icon_user.png) }
.portal .site-header .nav .nav-link.matchmaking:before { background-image:url(../images/icon_bow.png) }
.portal .site-header .nav .nav-link.advice:before { background-image:url(../images/icon_chat.png) }
.portal .site-header .nav .nav-item.is-active .nav-link { background-color:rgba(149, 15, 21, 0.1) }
.portal .site-header .nav .nav-item.is-active .nav-link.event-attended:before,
.portal .site-header .nav .nav-item.is-active .nav-link.event-list:before { background-image:url(../images/icon_calendar_red.png) }
.portal .site-header .nav .nav-item.is-active .nav-link.event-upcoming:before { background-image:url(../images/icon_clock_red.png) }
.portal .site-header .nav .nav-item.is-active .nav-link.match-list:before { background-image:url(../images/icon_heart_red.png) }
.portal .site-header .nav .nav-item.is-active .nav-link.user-list:before,
.portal .site-header .nav .nav-item.is-active .nav-link.profile:before,
.portal .site-header .nav .nav-item.is-active .nav-link.settings:before { background-image:url(../images/icon_user_red.png) }
.portal .main.events .card { --bs-card-border-color:#eaeaea; --bs-card-cap-bg:transparent; --bs-card-cap-padding-y:1rem; letter-spacing:.5px }
.portal .main.events .card .date { line-height:normal }
.portal .main.events .card .date .day { font-size:1.875rem; letter-spacing:.5px }
.portal .main.events .card .date .month { font-size:.75rem; text-transform:uppercase; letter-spacing:2px }
.portal .main.events .card .card-title { font-weight:600; font-size:.875rem }
.portal .main.events .card .card-text { font-size:.75rem; font-weight:500; text-transform:uppercase; opacity:.6 }
.portal .main.events .card .btn-primary { width:100%; padding:.75rem }
.portal .main.events.upcoming > .container-fluid,
.portal .main.events.attended .col > .container-fluid { border:1px solid #eaeaea }
.portal .main.events.attended .matched-dates .match + .match { margin-top:1rem }
.portal .main.scorecard table thead th { font-size:.875rem; opacity:.6; text-transform:uppercase }
.portal .main.scorecard table thead th .number { display:inline-block; width:20px; margin-right:.5rem; text-align:center }
.portal .main.scorecard table tbody th.rating .text { display:block; position:relative; overflow:hidden; width:18px; height:18px; margin:0 auto }
.portal .main.scorecard table tbody th.rating .text:before { content:''; display:block; width:18px; height:18px; background-repeat:no-repeat; background-position:0 0 }
.portal .main.scorecard table tbody th.rating.lol-nope .text:before { background-image:url(../images/icon_close_table.png) }
.portal .main.scorecard table tbody th.rating.heart .text:before { background-image:url(../images/icon_heart_table.png) }
.portal .main.scorecard table tbody th.rating.not-yet-rated .text:before { background-image:url(../images/icon_help_table.png) }
.portal .main.scorecard table tbody td.number-name .number { display:inline-block; width:20px; margin-right:.5rem; font-size:.75rem; text-align:center; color:#7B7979 }
.portal .main.scorecard table tbody td.score[style*="red"] { background-color:#FFE2E2 !important }
.portal .main.scorecard table tbody td.score[style*="yellow"] { background-color:#F8FFDD !important }
.portal .main.scorecard table tbody td.score[style*="purple"] { background-color:#F2EFFF !important }
.portal .main.scorecard table tbody td.score[style*="blue"] { background-color:#E2FDFF !important }
.portal .main.scorecard table tbody td.score[style*="green"] { background-color:#E3FFE2 !important }
.portal .main.scorecard table tbody td.score .text:before { content:''; display:inline-block; width:22px; height:22px; background-repeat:no-repeat; background-position:0 0 }
.portal .main.scorecard table tbody td.score[style*="red"] .text:before { background-image:url(../images/emoji_red.png) }
.portal .main.scorecard table tbody td.score[style*="yellow"] .text:before { background-image:url(../images/emoji_yellow.png) }
.portal .main.scorecard table tbody td.score[style*="purple"] .text:before { background-image:url(../images/emoji_purple.png) }
.portal .main.scorecard table tbody td.score[style*="blue"] .text:before { background-image:url(../images/emoji_blue.png) }
.portal .main.scorecard table tbody td.score[style*="green"] .text:before { background-image:url(../images/emoji_green.png) }
.portal .main.scorecard table tbody td.note { opacity:.6 }
.portal .main.scorecard table tbody .not-yet-rated ~ td.note { opacity:1; text-align:right }
.portal .main.scorecard table tbody .not-yet-rated ~ td.note a { font-weight:600 }
.portal .main.scorecard.submit table input[type="text"],
.portal .main.scorecard.submit table select { color:var(--bs-secondary); transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out }
.portal .main.scorecard.submit table input[type="text"]:focus,
.portal .main.scorecard.submit table select:focus { border-color:var(--bs-primary); box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.scorecard.submit-single .ratee-profile { max-width:325px; margin:45px auto 0; background-color:#fff; border-radius:20px 20px 0 0; border:1px solid #eaeaea; border-bottom:0 }
.portal .main.scorecard.submit-single .ratee-profile .profile-image { margin-top:-45px }
.portal .main.scorecard.submit-single .ratee-profile .event { font-size:.875rem }
.portal .main.scorecard.submit-single .ratee-profile .event-time { font-size:.875rem; opacity:.6 }
.portal .main.scorecard.submit-single .score-form { max-width:325px; margin:0 auto }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] { max-width:395px; margin:0 auto; padding:1rem 15px; background-color:#fff; border-radius:0 0 20px 20px; border:1px solid #eaeaea; border-top:0 }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div + div { margin-top:.75em }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div { position:relative }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:after { content:''; position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:22px; height:22px; background:url(../images/emoji_green.png) }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(2):after { background-image:url(../images/emoji_blue.png) }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(3):after { background-image:url(../images/emoji_purple.png) }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(4):after { background-image:url(../images/emoji_yellow.png) }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(5):after { background-image:url(../images/emoji_red.png) }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div label { cursor:pointer; padding:1rem 1rem 1rem calc(2rem + 22px); border-radius:8px; font-size:.875rem; letter-spacing:.5px; line-height:1.1; display:flex; flex-direction:row-reverse; justify-content:space-between }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:first-of-type label { background-color:#E3FFE2 }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(2) label { background-color:#E2FDFF }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(3) label { background-color:#F2EFFF }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(4) label { background-color:#F8FFDD }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] div:nth-of-type(5) label { background-color:#FFE2E2 }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] input[type="radio"] { -webkit-appearance:none; appearance:none; margin:0; font:inherit; color:currentcolor; width:1.15em; height:1.15em; border-radius:50%; transform:translateY(-0.075em) }
.portal .main.scorecard.submit-single .score-form div[id="id_score"] input[type="radio"]:checked::before { content:''; position:absolute;  top:50%; width:15px; height:15px; background:url(../images/icon_checked.png) no-repeat; transform:translateY(-50%) }
.portal .main.scorecard.submit-single .score-form .add-notes { display:inline-block; margin-top:1rem; font-size:.75rem; letter-spacing:1px; font-weight:700; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--bs-primary) }
.portal .main.scorecard.submit-single .score-form .add-notes:hover { border-bottom-width:2px }
.portal .main.scorecard.submit-single .score-form .add-notes:before { content:'+' }
.portal .main.scorecard.submit-single .score-form textarea[name="note"] { display:block; width:100%; margin-top:1rem; padding:.75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.scorecard.submit-single .score-form textarea[name="note"]:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.scorecard.submit-single .score-form .buttons { margin-top:2rem }
.portal .main.scorecard.submit-single .score-form .buttons .btn-link { position:relative; overflow:hidden; width:80px; height:80px; margin:0 .75rem; padding:0; text-indent:-9999px; background-color:#950F15; border-radius:100% }
.portal .main.scorecard.submit-single .score-form .buttons .btn-cross { background:url(../images/icon_cross.png) 50% 50% no-repeat rgb(149 15 21 / .2) }
.portal .main.scorecard.submit-single .score-form .buttons .btn-heart { background:url(../images/icon_heart_white.png) 50% 50% no-repeat #950F15 }
.portal .main.profile form p label:first-of-type { display:block; margin-bottom:.5rem; font-weight:700 }
.portal .main.profile form p:first-of-type input[type="checkbox"] { margin-bottom:1rem }
.portal .main.profile form textarea { display:block; width:100%; padding:.75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.profile form textarea:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.profile form select { display: block; padding: .375rem 2.25rem .375rem .75rem; -moz-padding-start: calc(0.75rem - 3px); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: .375rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none }
.portal .main.profile form select:focus { outline:0; border-color:var(--bs-primary); box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.settings form input:not([type="submit"]) { padding:.5rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.settings form input:not([type="submit"]):focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.settings form label { display:block; margin-bottom:.5rem }
.portal .main.events.list .search label,
.portal .main.events.list .btn-create { align-self:center }
.portal .main.events.list .search input[type="text"] { padding:.375rem .75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.events.list .search input[type="text"]:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.events.list .card .btn-delete { width:34px; height:34px; overflow:hidden; color:var(--bs-primary); background-color:var(--bs-white); border-radius:100%; border:1px solid #eaeaea; transition:border .25s ease-in-out }
.portal .main.events.list .card .btn-delete:before { content:''; display:block; width:32px; height:32px; background:url(../images/icon_trash.png) no-repeat 50% 50% }
.portal .main.events.list .card .btn-delete:hover { border-color:var(--bs-primary) }
.portal .main.events.list .card .small { font-size:.75rem }
.portal .main.events.list .card .participants img + img { margin-right:-.375rem }
.portal .main.events.manage form input:not([type="submit"], [type="checkbox"]) { width:100%; padding:.5rem; margin-top:.25rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.events.manage form input:not([type="submit"], [type="checkbox"]):focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.events.manage form div[id="id_participants"] > div { padding:.25rem }
.portal .main.users.list .search input[type="text"] { padding:.375rem .75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.users.list .search input[type="text"]:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.users.list table thead th { font-size:.875rem; opacity:.6; text-transform:uppercase }
.portal .main.users.list table thead th .number { display:inline-block; width:20px; margin-right:.5rem; text-align:center }
.portal .main.users.list table tbody td.number-name .number { display:inline-block; width:20px; margin-right:.5rem; font-size:.75rem; text-align:center; color:#7B7979 }
.portal .main.users.list table .btn-action { width:34px; height:34px; overflow:hidden; color:var(--bs-primary); background-color:#F7F9FA; border-radius:100%; border:1px solid #F7F9FA; transition:border .25s ease-in-out }
.portal .main.users.list table .btn-action:before { content:''; display:block; width:32px; height:32px; background-repeat:no-repeat; background-position:50% 50% }
.portal .main.users.list table .btn-action:hover { border-color:var(--bs-primary) }
.portal .main.users.list table .btn-delete:before { background-image:url(../images/icon_trash.png) }
.portal .main.users.list table .btn-edit:before { background-image:url(../images/icon_edit.png) }
.portal .main.users.list table button { padding:0 }
.portal .main.users.list table button.btn-edit:before { content:'\f0e0'; font-family:'FontAwesome'; font-size:.875rem; line-height:32px; color:#5a5a5a; background-image:none }
.portal .main.users.list table form { display:inline-flex }
.portal .main.users.manage input:not([type="submit"]),
.portal .main.users.manage textarea { width:100%; margin-top:.25rem; padding:.375rem .75rem; line-height:1.5; color:var(--bs-secondary); background-color:#fff; background-clip:padding-box; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.portal .main.users.manage input:not([type="submit"]):focus,
.portal .main.users.manage textarea:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.matches .card { cursor:pointer }
.portal .main.matches .card .card-img-overlay { background:linear-gradient(180deg, rgba(35, 31, 32, 0) 0%, rgb(35 31 32 / .55) 100%); transform:translateY(100%); transition:all .3s }
.portal .main.matches .card.active .card-img-overlay { transform:translateY(0) }
.portal .main.matches .card .card-title { letter-spacing:0.5px }
.portal .main.events.manage form .select2-container { width:100% !important; margin-top:.25rem }
.portal .main.events.manage form .select2-container--default .select2-selection { display:block; width:100%; height:auto; padding:.375rem 2.25rem .375rem .75rem; -moz-padding-start:calc(0.75rem - 3px); font-size:1rem; font-weight:400; line-height:1.5; color:#212529; background-color:#fff; background-repeat:no-repeat; background-position:right .75rem center; background-size:16px 12px; border:1px solid #ced4da; border-radius:.375rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-appearance:none; -moz-appearance:none; appearance:none }
.portal .main.events.manage form .select2-container--default .select2-selection:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .main.events.manage form .select2-container--default .select2-selection--single .select2-selection__arrow { display:none }
.portal .main.events.manage form .select2-container--default .select2-selection--single { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") }
.portal .main.scorecards.list table thead th { font-size:.875rem; opacity:.6; text-transform:uppercase }
.portal .main.scorecards.list table .btn-action { font-weight:600; padding:3px 10px; background-color:rgba(149, 15, 21, 0.1); border-radius:5rem }
.portal .main [data-profile-data-url] { cursor: pointer }
.portal .select2-container--open .select2-dropdown--below { border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem }
.portal .select2-container--default .select2-search--dropdown { padding:.375rem }
.portal .select2-container--default .select2-search--dropdown .select2-search__field { padding:.375rem .75rem; border:1px solid rgba(188, 189, 192, 0.5); border-radius:.375rem }
.portal .select2-container--default .select2-search--dropdown .select2-search__field:focus { color:var(--bs-secondary); background-color:#fff; border-color:var(--bs-primary); outline:0; box-shadow:0 0 0 0.25rem rgb(149 15 21 / 25%) }
.portal .modal.popup .modal-dialog { --bs-modal-width:375px }
.portal .modal.popup .btn-close { position:absolute; left:1rem; top:1rem; text-transform:uppercase; text-decoration:none; letter-spacing:1px; box-sizing:content-box; width:auto; height:auto; padding:.25em .25em; color:#fff; background:none; border:0; border-radius:.375rem; opacity:1; }
.portal .modal.popup .modal-image { display:flex; justify-content:end; margin-bottom:2rem }
.portal .modal.popup .modal-title { text-align:center; font-family: 'Julius Sans One', sans-serif; font-size:1.75em; letter-spacing:1px }
.portal .modal.popup .modal-body { text-align:center; font-family:"SF Pro Display", sans-serif; font-size:.875rem; letter-spacing:1px; font-weight:200 !important }
.portal .modal.popup .modal-bottom { padding:var(--bs-modal-padding) }
.portal .modal.popup .modal-bottom a { font-family:"SF Pro Display", sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:.75rem; color:var(--bs-primary); background-color:var(--bs-white); border:2px solid var(--bs-white); border-radius:2rem; transition:.15s ease-in-out }
.portal .modal.popup .modal-bottom p { margin-top:1rem; font-weight:200; letter-spacing:1px; text-align:center }
.portal .modal.steps .modal-dialog { --bs-modal-width:375px }
.portal .modal.steps .btn-close { position:absolute; left:1rem; top:1rem; text-transform:uppercase; text-decoration:none; letter-spacing:1px; box-sizing:content-box; width:auto; height:auto; padding:.25em .25em; color:var(--bs-primary); background:none; border:0; border-radius:.375rem; opacity:1; }
.portal .modal.steps .modal-image { display:flex; justify-content:center; margin:3rem auto .5rem }
.portal .modal.steps .modal-title { text-align:center; font-family: 'Julius Sans One', sans-serif; font-size:1em; letter-spacing:1px; color:var(--bs-primary) }
.portal .modal.steps .modal-subtitle { margin:.5rem 0 0 !important; text-align:center; font-size:1em; font-weight:500; letter-spacing:1px }
.portal .modal.steps .modal-body { padding:.5rem 1rem; font-size:.875rem; text-align:center; opacity:.65 }
.portal .modal.steps .modal-body p { margin-bottom:.5rem; line-height:normal }
.portal .modal.steps .modal-body p:last-of-type { margin:0 }
.portal .modal.steps .modal-bottom { padding:.5rem 1rem }
.portal .modal.steps .modal-bottom a.btn-primary { display:inline-block !important; color:var(--bs-primary); background-color:var(--bs-white); border:1px solid var(--bs-primary); border-radius:.25rem !important; line-height:normal; font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:0 .25rem }
.portal .modal.steps .modal-bottom .btn-not-again { margin-top:.5rem !important; font-size:.75rem; font-weight:600; text-transform:uppercase; text-decoration:none; letter-spacing:1px; width:auto; height:auto; margin:0 auto; padding:.25em .25em; color:var(--bs-primary); background:none; border:0 }
.portal .modal.steps .modal-bottom .dots { padding:0; margin:.75rem 0 0; list-style:none }
.portal .modal.steps .modal-bottom .dots li { display:inline-block; vertical-align:top; margin:0 .25rem }
.portal .modal.steps .modal-bottom .dots li a { position:relative; overflow:hidden; display:block; width:8px; height:8px; padding:0; text-indent:-9999px; background-color:#EAEAEA; border-radius:5rem }
.portal .modal.steps .modal-bottom .dots li a.active { width:16px; background-color:var(--bs-primary) }
.portal .modal.profile-preview .modal-dialog { --bs-modal-width:375px }
.portal .modal.profile-preview .profile-data { display:flex; flex-direction:column; justify-content:center }
.portal .modal.profile-preview .btn-close { position:absolute; right:1rem; top:1rem }
.portal .modal.profile-preview .modal-image { padding:2rem 1rem 1rem; text-align:center }
.portal .modal.profile-preview .modal-image img { max-height:15rem; margin:0 auto }
.portal .modal.profile-preview .modal-title { text-align:center; font-family: 'Julius Sans One', sans-serif; font-size:1.75em; letter-spacing:1px }
.portal .modal.profile-preview .modal-body { max-height:20rem; font-family:"SF Pro Display", sans-serif; font-size:.875rem; letter-spacing:1px; font-weight:200 !important }

@media only screen and (min-width:768px) {
    .portal .site-header { min-width:370px }
    .portal .offcanvas-menu { min-width:370px; height:100vh; position:sticky; left:0; top:0; bottom:0; z-index:1020 }
    .portal .offcanvas-menu .offcanvas-body { overflow-y:auto; height:100vh }
}

@media only screen and (min-width:992px) {
    .portal .main.settings form label { display:inline-block; margin-right:1rem }
    .portal .main.events.manage form input:not([type="submit"], [type="checkbox"]) { width:auto; min-width:350px; margin-top:0 }
    .portal .main.events.manage form .select2-container { min-width:350px; max-width:350px }
    .portal .main.events.manage form div[id="id_participants"] { margin-left:calc(150px + .5rem); margin-top:calc(-1rem - 1.5em) }
    .portal .main.events.manage form p label { min-width:150px; margin-right:.5rem }
    .portal .main.events.manage form p label[for="id_image"] + a { margin-right:1rem;  }
    .portal .main.events.manage form p label[for="id_image"] ~ br { display:none }
    .portal .main.events.manage form p label[for="id_image"] ~ br + * { min-width:0; border:0 }
    .portal .main.users.list .search label,
    .portal .main.users.list .btn-create { align-self:center }
    .portal .main.users.manage form p { display:flex }
    .portal .main.users.manage label { min-width:150px; margin-right:.5rem }
    .portal .main.users.manage input:not([type="submit"]),
    .portal .main.users.manage textarea { width:auto; min-width:350px; margin-top:0 }
    .portal .main.users.manage textarea { max-width:350px }
}

@media only screen and (min-width:1200px) {
    .portal .main.scorecard table tbody .not-yet-rated ~ td.note a { font-weight:600; padding:3px 10px; background-color:rgba(149, 15, 21, 0.1); border-radius:5rem }
}

@media only screen and (max-width:767px) {
    .portal .site-header { position:sticky; bottom:0; z-index:1020 }
    .portal .main.scorecard.submit table { min-width:600px }
}