:root {
    --accent-1: rgb(85, 84, 214);
    --accent-1T: 85, 84, 214;
}

/*** Site-wide elements ***/
body { margin: 110px 0px 60px 0px; background-color: rgb(244, 246, 251); color: #262368; }
body.no-top-margin { margin-top: 90px; }
body, div, a, input, textarea, p, select, fieldset { font-family: 'PT Sans', sans-serif; font-weight: 400; box-sizing: border-box; background-repeat: no-repeat; }
input, select { -webkit-appearance: none; }
input[type=text], input[type=password], select, textarea {
    background-color: rgba(195, 203, 228, 0.5); border: 0px; border-radius: 6px; padding: 6px 12px; color: #262368; background-repeat: no-repeat;
}
select { background-image: url('../images/dd-arrow.svg'); background-position: right 8px center; background-size: 16px auto; padding-right: 36px; background-repeat: no-repeat; }
textarea { resize: none; }
input[type=checkbox] { height: 1.25em; width: 1.25em; margin: -0.25em 0.25em -0.25em 0px; border-radius: 3px; background-color: rgba(195, 203, 228, 0.5); transition: 0.3s; }
input[type=checkbox].medium { height: 1.4em; width: 1.4em; }
input[type=checkbox]:checked {
    background-color: rgb(85, 84, 214); background-image: url('../images/check-white.svg'); background-size: 0.8em auto; background-repeat: no-repeat; background-position: center;
}
input[type=text]::placeholder, input[type=password]::placeholder, textarea::placeholder { color: rgb(141, 155, 198); }
input[type=text].error, input[type=checkbox].error, input[type=password].error, select.error, textarea.error, .s-text-selector.error { box-shadow: 0px 0px 0px 2px rgba(237, 21, 93, 0.75); outline: none; }
.invalid-credentials input:not(type=button) { box-shadow: 0px 0px 0px 2px rgba(237, 21, 93, 0.75); outline: none; }
input[type=button], .s-notification input[type=button], .s-modal-buttons input[type=button], .button {
    border-radius: 20px; font-family: 'Mulish'; font-weight: 600; font-size: 0.9em; cursor: pointer; padding: 5px 15px;
    color: #262368; border: 0px; background-color: rgba(195, 203, 228, 0.5); transition: 0.3s;
    box-shadow: 0 0 5px rgba(170, 170, 200, 0.3); background-repeat: no-repeat;
}
input[type=button].small { font-size: 0.85em; padding: 3px 12px; }
.s-modal input[type=button].small { font-size: 0.8em; padding: 5px 12px; }
.s-notification:not(.error) input[type=button], .s-modal-buttons input[type=button] { background-color: rgb(75, 200, 139); color: white; }
input[type=button].t-white, .button.t-white, .t-white { background-color: rgba(255,255,255,0.2); box-shadow: 0px 0px 4px rgba(59, 90, 175, 0.45); color: white; }
input[type=button].t-white:hover:not(:active), .button.t-white:hover:not(:active), .t-white:hover:not(:active) { background-color: rgba(255,255,255,0.3); color:white }
input[type=button].green { background-color: rgb(59, 179, 121); color: white; box-shadow: 0 0 5px rgba(40, 150, 130, 0.3); }
input[type=button].purple, input[type=button].edit-gray:hover { background-color: rgb(85, 84, 214); color: white; box-shadow: 0 0 5px rgba(59, 90, 175, 0.3); }
input[type=button].purple.error { box-shadow: 0px 0px 0px 4px rgba(237, 21, 93, 0.75); outline: none; }
input[type=button].red, input[type=button].delete, input[type=button].delete-gray:hover { background-color: #ed155d; color: white; }
input[type=button].edit-gray, input[type=button].delete-gray, input[type=button].gray { background-color: rgb(141, 155, 198); color: white; }
input[type=button].delete, input[type=button].delete-gray {
    background-image: url('../images/delete-white.svg'); background-position: left 10px center; background-size: 16px auto; padding-left: 32px;
}
input[type=button].edit, input[type=button].edit-gray {
    background-image: url('../images/edit-white.svg'); background-position: left 12px center; background-size: 14px auto; padding-left: 32px;
}
input[type=button].medium { font-size: 0.95em; font-weight: 500; padding: 7px 18px; min-width: 100px; margin: 5px; }
input[type=button].large { font-size: 1.05em; line-height: 1.1em; padding: 10px 20px; min-width: 120px; margin: 8px; }
input[type=text].money-input { background-image: url('../images/dollar-gray.svg'); background-position: left 8px center; background-size: 8px auto; padding-left: 20px; background-repeat: no-repeat; }

h1, h2, h3 { background-repeat: no-repeat; }
h1 { font-size: 1.5em; font-weight: 700; color: #262368; text-align: center; }
h2 { font-size: 1.3em; font-weight: 700; color: #262368; text-align: center; text-decoration: none;}
h3, h5 { font-size: 1.2em; font-weight: 400; color: rgb(80, 100, 150); text-align: center; }
h5 { font-size: 0.9em; margin-bottom: 10px; }
hr { border: 1px rgb(195, 203, 228) solid; }
fieldset { border: 0px; padding: 0px; margin: 20px auto; text-align: left; }
fieldset input[type=text], fieldset input[type=password], fieldset select, fieldset textarea { width: 100%; }
fieldset label, .label { display: block; text-align: left; margin-bottom: 6px; color: #262368; font-size: 0.8em; font-family: Mulish; font-weight: 600; }
fieldset label .more-info { background-color: rgba(195, 203, 228, 0.7); border-radius: 50px; float: right; margin: 0px 0px; height: 1.6em; width: 1.6em; cursor: pointer; text-align: center; font-weight: 700; line-height: 1.7em; font-size: 0.9em; }
body:not(.logged-in) .auth-only, body.logged-in .unauth-only, body:not(.auth-admin) .admin-only, .hidden , body.auth-player .auth-staff-only { display: none !important; }
.link, .link:visited { color: rgb(57, 56, 172); cursor: pointer; }
.block { display: block; }
.text-left { text-align: left; }
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
.flex { display: flex; align-items: center; }
.flex .fill { width: 100%; }
.flex .title { max-width: calc(100% - 50px); display: inline-block; }
div.error, p.error, a.error, .s-modal p.error { color: #ed155d; }
.toolbar { background-color: rgb(85, 84, 214); color: white; font-family: 'Mulish'; font-weight: 600; padding: 12px 16px; border-radius: 8px; box-shadow: 0px 0px 4px rgba(59, 90, 175, 0.45); }
.toolbar.full { border-radius: 0px; }
.toolbar.inputs { padding: 8px }
.toolbar.inputs input[type=text], .toolbar.inputs select { font-size: 0.95em; }
.toolbar .t-white, .toolbar .t-white:hover { background-color: rgba(255,255,255,0.6); color: #262368; }
input[type=text].t-white::placeholder { color: rgba(38, 35, 105, 0.7); }
.w-750, .w-1200 { max-width: calc(100% - 40px); margin: 0px auto; }
.w-750 { width: 750px; }
.w-1200 { width: 1200px; }
.right { float: right; }
.right.space { margin-left: 10px; }
.left { float: left; }
.error-message { color: #ed155d; background-color: rgba(237, 21, 93, 0.2); box-shadow: 0 0 4px rgba(150, 25, 70, 0.1); }
.warning-message { color: rgb(179, 137, 59); background-color: rgb(245, 236, 191); box-shadow: 0 0 4px rgba(150, 140, 50, 0.1); }
.error-message, .warning-message { padding: 10px; border-radius: 8px; display: block; width: 100%; }
.error-message > p, .warning-message > p { margin: 10px 0px 0px; font-size: 0.9em; }
input[type=text].search { background-image: url('../images/search-gray.svg?ver=1'); background-position: left 10px center; background-size: 16px auto; padding-left: 32px; background-repeat: no-repeat; }
input[type=button].filter { border-radius: 6px; box-shadow: none; background-image: url('../images/filters-black.svg?ver=1'); background-position: center; background-size: 16px auto; width: 32px; transition: background-color 0.3s; }
input[type=button].filter.s-menu-active, input[type=button].filter:not(.unsel).s-menu-sel-active, input[type=button].filter.unsel.s-menu-unsel-active { background-image: url('../images/filters-white.svg'); background-color: rgb(85, 84, 214); }
input[type=button].filter.left { margin-right: 10px; } /* For left-hand filter, give space on the right and vice-versa */
input[type=button].filter.right { margin-left: 10px; }
p.gray, ul.gray li { color: rgb(80, 100, 150); }
ul.small li { font-size: 0.85em; }
ul.decimal, ul.number, ul.numbers, ul.numeric { list-style-type: decimal; }
.page-content {
    width: calc(100% - 40px); background-color: white; display: block;
    border-radius: 10px; max-width: 1200px; margin: 20px auto; padding: 30px;
    box-shadow: 0px 0px 4px rgba(59, 90, 175, 0.15);
}
.green-message { color: rgb(59, 179, 121); background-color: rgb(191, 245, 219); padding: 10px; border-radius: 8px; transition: 0.3s; }

.s-modal .info { font-size: 0.95em; color: #262368; padding: 12px 20px; border-radius: 10px; width: 100%; max-width: 400px; margin: 0px auto 20px; background-color: rgba(195, 203, 228, 0.5); text-align: center; }
.s-modal .info p { font-size: 0.85em; color: rgb(80, 100, 150); margin: 8px 0px 0px; font-family: 'Mulish'; }
.s-modal .info .link-button { margin-top: 4px; display: block; }
.s-modal fieldset .info { margin: 0px; }

/*** Sys customizations ***/
.s-notification.error { background-color: #ed155d; box-shadow: 0 0 10px rgba(150, 25, 70, 0.5); }
.s-notification.error input[type="button"] { background-color: white; }
.s-notification { box-shadow: 0 0 14px rgba(32, 45, 99, 0.35); }
.s-notification.green { background-color: rgb(75, 200, 139); color: white; box-shadow: 0 0 14px rgba(9, 131, 74, 0.4); }
.s-notification.green input[type=button] { background-color: white; }
.s-notification input[type=button] { padding: 8px 20px; box-shadow: 0 0 6px rgba(32, 45, 99, 0.3); color: #262368; }
.s-notification input[type=button].green { background-color: rgb(59, 179, 121); color: white; }
.s-notification.green input[type=button].gray { opacity: 0.75; }
.s-notification.purple { background-color: rgb(85, 84, 214); color: white; }
.s-notification.purple input[type=button] { background-color: rgba(255,255,255,0.2); }
.s-notification.small { padding: 10px; }
.s-menu-list li.error { background-color: #ed155d; color: white; }
.s-menu-list li input { margin: 10px 0px 0px; display: block; }
.s-menu-list li input[type=text].inline {
    display: inline-block; color: white; padding: 3px 6px; margin: -5px 0px -5px; text-align: center; font-size: 1em;
    background: rgba(195, 203, 228, 0.3);
}
.s-menu-list li input[type=text].w-30 { width: 30px; }
.s-search-load-bar { background-color: rgb(85, 84, 214); }

.s-input-select-wrap .s-is-toggle { background-image: url('../images/dd-arrow-white.svg?ver=0'); background-color: rgb(85, 84, 214); }
.s-input-select-wrap .s-is-toggle:hover { background-image: url('../images/dd-arrow.svg?ver=0'); }
.s-input-select-wrap:not(:has(input.large)) input { font-size: 0.95em; padding: 4px 36px 4px 10px; }
.s-input-select-wrap:has(input.large) .s-is-toggle { transform: translate(-0.1em, -0.02em); }
.s-input-select-wrap input.t-white { background-color: rgba(255,255,255,0.6); transition: background-color 0.3s; }
.s-input-select-wrap input.t-white:hover { background-color: white; }
.s-input-select-wrap input::placeholder { color:rgb(101, 118, 167); }
.s-input-select-wrap .s-is-results li:hover, .s-input-select-wrap .s-is-results li.hover { background-color: rgb(85, 84, 214); }
.s-input-select-wrap .s-is-results li mark { color: rgb(85, 84, 214); }
.s-input-select-wrap .s-is-results { box-shadow: 0px 3px 10px rgba(59, 90, 175, 0.35); }
.s-modal .s-input-select-wrap input { font-size: 0.95em; }
.s-input-select-wrap input.t-white:hover, .s-input-select-wrap input.t-white:focus { background-color: white; }
fieldset .s-input-select-wrap { width: 100%; }
.s-modal fieldset .s-input-select-wrap input { font-size: 1em; }
fieldset .s-input-select-wrap input { padding: 6px 12px; }
fieldset .s-input-select-wrap .s-is-toggle { margin: 0px 8px -4px -38px; }

.s-modal { background: white; }
.s-modal h1, .s-modal h2 { margin-top: 0px; }
.s-modal input, .s-modal select {font-size: 1em; }
.s-modal-footer a[href^="javascript:"] {
    color: #262368; background-color: rgba(195, 203, 228, .5); padding: 8px 16px; border-radius: 20px;
    font-size: 0.85em; text-decoration: none; font-family: 'Mulish'; font-weight: 600;
}
.s-modal input[type=button].gray { background-color: rgb(176, 185, 214); }
.s-modal > p:not(:first-child):not(.error-message):not(.warning-message) { color: rgb(80, 100, 150); font-family: 'Mulish'; }
.s-modal p.small { font-size: 0.85em; }
.s-modal.normal-font, .s-modal.normal-font textarea { font-size: 1em; }
.s-modal.normal-font .s-modal-buttons { font-size: 1.1em; }

.s-list { box-shadow: 0px 4px 10px rgba(50, 80, 150, 0.3); }
.s-list .s-option { color: #262368; }
.s-list .s-option:hover { background: rgb(85, 84, 214) }

.s-loading-circle span { border-color: rgb(85, 84, 214); }
.s-loading-circle.white span { border-color: white; }
.s-loading-circle.black span { border-color: black; }

.check-list { display: flex; align-content: center; padding: 0px; width: 80%; margin: 0px auto 10px; }
.check-list .s-list-option {
    background-color: rgba(195, 203, 228, 0.5); margin: 7px; text-align: center; font-size: 1em; line-height: 1.4em; cursor: pointer; transition: 0.3s;
    color: #262368; border-radius: 12px; padding: 16px 50px; z-index: 1; position: relative; box-shadow: 0px 0px 4px rgba(59, 90, 175, 0.45); width: 50%;
    background-image: url('../images/check-white.svg'); background-position: center right -50px; background-size: 22px auto; background-repeat: no-repeat;
}
.check-list .s-list-option h4 { color: #262368; margin: 5px; font-size: 1.05em; transition: 0.3s; }
.check-list .s-list-option h4:first-child { margin-top: 0px; }
.check-list .s-list-option h4:only-child { margin-bottom: 0px; }
.check-list .s-list-selected { background-color: rgb(85, 84, 214); color: white; background-position: center right 16px; }
.check-list .s-list-selected h4 { color: white }
.check-list .s-list-option:hover{ background-color: rgb(85, 84, 214); color: white; opacity: 1; }
.check-list .s-list-option:hover h4 { color: white; }
fieldset .bar-list { width: 100%; text-align: center; }
.bar-list { border-radius: 8px; transition: 0.3s; }
.bar-list .s-list-option { padding: 10px; margin: 0px; border-radius: 0px; width: 50%; }
.bar-list .s-list-option:first-of-type:not(:only-of-type) { border-radius: 8px 0px 0px 8px; }
.bar-list .s-list-option:last-of-type:not(:only-of-type) { border-radius: 0px 8px 8px 0px; }
.bar-list .s-list-selected { background-color: rgb(85, 84, 214); color: white; }
.bar-list.align-left .s-list-option, .check-list.align-left .s-list-option { text-align: left; }
.bar-list.check-list .s-list-option { box-shadow: none; }
.bar-list.check-list .s-list-option.s-list-selected { padding-right: 35px; }
.bar-list.check-list.align-left .s-list-option.s-list-selected { padding-right: 50px; }
.bar-list.pad-6 .s-list-option { padding: 6px; }
.bar-list.small .s-list-option { padding: 5px; }
.bar-list.small.check-list .s-list-option.s-list-selected { padding-right: 25px; }
.check-list.small .s-list-option { background-size: 18px auto; }
.check-list.small .s-list-selected { background-position: center right 12px; }
.error .s-list-option, .s-list-option.error, .bar-list.error { box-shadow: 0px 0px 0px 3px rgba(237, 21, 93, 0.75); }
.bar-list.vertical { display: grid; }
.bar-list.vertical .s-list-option { width: 100%; margin-bottom: 1px; }
.bar-list.vertical .s-list-option:first-of-type { border-radius: 8px 8px 0px 0px; }
.bar-list.vertical .s-list-option:last-of-type { border-radius: 0px 0px 8px 8px; }
.bar-list .s-list-option .gray { opacity: 0.5; margin-left: 0.5em; font-size: 0.85em; }

.s-uploader-picker { background-color: rgba(195, 203, 228, 0.5); }
.s-uploader span { border-color: rgb(85, 84, 214); }
.s-uploader-label p { color: rgb(80, 100, 150); font-size: 0.9em; }
.image.s-menu-list li, .black.s-menu-list li, .purple.s-menu-list li, .light-purple.s-menu-list li, .green.s-menu-list li { color: white }

/*** IMAGE EDIT MENU ***/
input[type=button].image-edit-menu {float: right; margin: 8%; padding: 0px; height: 26px; width: 26px; background-color: black; opacity: 0; color: white; font-size: 9px; line-height: 10px; letter-spacing: 0.5px; }
.image.circle input[type=button].image-edit-menu { opacity: 1; margin: 0px; background-color: rgb(85, 84, 214); }
.image:not(.circle):hover input[type=button].image-edit-menu { opacity: 0.4; }
.image:not(.circle):hover input[type=button].image-edit-menu:hover, .image:not(.circle) input[type=button].image-edit-menu.s-menu-active { opacity: 0.5; }
.image.s-menu-list, .black.s-menu-list, .image.s-menu-wedge span, .black.s-menu-wedge span { background-color: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.image.s-uploader input[type=button].image-edit-menu { display: none; }
.s-menu-list.purple, .s-menu-wedge.purple span { background-color: rgb(85, 84, 214); }
.s-menu-list.light-purple, .s-menu-wedge.light-purple span { background-color: #7676DF; }
.s-menu-list.green, .s-menu-wedge.green span { background-color: rgb(75, 200, 139); }

/*** Image Uploader ***/

.modal-picture-uploader .s-uploader { height: 250px; width: 100%; margin-bottom: 20px; }

/*** Header ***/
#header {
    background: white; width: 100%; height: 90px; box-shadow: 0px 4px 6px rgba(57, 96, 182, 0.15); position: fixed; top: 0; display: flex; z-index: 100;
}
#header .title {
    font-size: 1.4em; color: #262368; display: inline-block; /* padding-top: 33px; font-family: 'Roboto'; */ padding-top: 31px; font-family: 'PT Sans', sans-serif; font-weight: 400;
    position: fixed; z-index: -1; margin: 0px auto; left: 0px; right: 0px; width: 50%; text-align: center;
}
#header .buttons { position: fixed; right: 20px; display: inline-flex; height: 90px; padding-top: 20px; width: auto; }
#header .buttons div {
    height: 50px; display: inline-block; background-color: rgba(195, 203, 228, 0.5); border-radius: 100px; white-space: nowrap;
    cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s; margin-left: 15px; color: #262368; font-weight: 400; font-size: 1em; line-height: 50px; 
    background-position: left 12px center; background-size: 22px auto; width: auto; padding: 0px 20px 0px 40px;
}
#header .buttons div:hover { background-color: rgba(195, 203, 228, 1); }
#header .buttons div:active { box-shadow: 0px 0px 14px rgba(80, 100, 150, 0.5) inset; }
.badge {
    background-color: #ed155d; color: white; border-radius: 20px; width: auto; height: 20px; position: absolute; font-family: Mulish; box-shadow: 0 0 5px rgba(150, 25, 70, 0.3);
    min-width: 20px; font-size: 0.7em; display: inline-block; margin: 0px 0px 0px 5px; line-height: 20px; text-align: center; font-weight: 700; padding: 0px 5px;
}
#cart-bttn .badge { margin: 0px 0px 0px 35px }
#header .badge { opacity: 0; }
.badge.active, #header .badge.active { opacity: 1; }
#header #menu-bttn {
    background-color: white; background-image: url('../images/menu.svg?ver=1'); background-position: center; width: 50px; padding: 0px;
}
#header #menu-bttn:hover { background-color: rgba(195, 203, 228, 0.5); }
#header #profile-bttn, #header #sign-in-bttn { background-image: url('../images/profile.svg?ver=0'); }
#profile-bttn img { height: 44px; width: auto; border-radius: 50%; float: left; margin: 3px 11px 0px -37px; }
#header #management-bttn { background-image: url('../images/baseball.svg?ver=0'); }
#header #cart-bttn { background-image: url('../images/cart.svg?ver=0'); background-position: calc(50% - 2px) 50%; width: 50px; padding: 0px; }
#header #cart-bttn .bttn-label { display: none; }
#header #profile-bttn, #header #management-bttn, .logged-in #header #sign-in-bttn { display: none; }
.logged-in #header #profile-bttn, .logged-in #header #management-bttn { display: block; }

#logo {
    background-image: url('../images/logo.png'); background-size: 80px auto;
    margin: 9px 12px; height: 80px; width: 80px; display: inline-block; cursor: pointer;
}

#login-modal:not(.invalid-credentials) #error-message { opacity: 0; margin-top: -50px; }
#login-modal:not(.invalid-credentials) #error-message .link { display: none; }
#login-modal #error-message { font-size: 0.85em; color: #ed155d; margin-bottom: 20px; transition: 0.3s; position: relative; z-index: -1; }
#login-modal #error-message .link { display: inline-block; }

/*** Signup Form ***/
#signup-modal .buttons { margin-top: 20px; }
#signup-modal {min-width: 340px;}
#signup-modal fieldset { width: calc(50% - 15px); display: inline-block; margin: 5px; }
#signup-modal fieldset.full { width: 94%; }

/*** Menu ***/
#menu {
    background: rgb(57, 56, 172); width: 260px; border-radius: 16px; height: calc(100% - 40px);
    padding: 10px; position: fixed; top: 20px; right: -250px; box-shadow: 0px 0px 14px rgba(59, 90, 175, 0.45);
    transition-timing-function: ease-in-out; transition: 0.5s; transform: scale(0.8); z-index: 101; overflow-x: hidden;
}
#menu-nav { height: 40px; }
#menu-buttons { min-height: 500px; }
#menu.open { transform: translateX(-270px) scale(1); }
#menu .link, #menu .link-menu-search {
    display: block; padding: 10px; font-family: 'PT Sans', sans-serif; transition: 0.3s;
    transition-delay: 0.2s; cursor: pointer; color: rgba(255,255,255,0.6); text-decoration: none;
}
#menu .menu-seach-sub { border-left: 1.5px rgba(255,255,255,0.4) solid; margin: 12px 0px 0px 12px; }
#menu .link-menu-search { cursor: default; }
#menu .link-menu-search a:first-of-type { padding-top: 0px; }
#menu .link-menu-search a:last-of-type { padding-bottom: 0px; }
#menu .menu-seach-sub .link { margin-left: 2px; }
#menu .link:hover { text-indent: 4px; color: rgba(255,255,255,1); }
#mn-close, #mn-back {
    background-size: 16px auto; background-position: center; height: 40px; width: 40px; display: inline-block;
    transition: 0.3s; border-radius: 50%; cursor: pointer;
}
#mn-close { background-image: url('../images/x-1.svg?ver=0'); position: fixed; right: 10px; }
#mn-back { background-image: url('../images/back-arrow.svg?ver=0'); }
#menu:not(.sub) #mn-back { opacity: 0; transform: translateX(100px); cursor: default; }
#mn-close:hover, #mn-back:hover { background-color: rgba(255,255,255,0.2); }
#menu .search { background-color: rgb(36, 35, 136); font-size: 1em; width: calc(100% - 20px); margin: 10px; color: white; }

/*** Profile Menu ***/
#profile {
    background: rgb(57, 56, 172); width: 260px; border-radius: 16px; height: auto;
    padding: 10px; position: fixed; top: 100px; right: 19px; box-shadow: 0px 5px 10px rgba(59, 90, 175, .35);
    transition-timing-function: ease-in-out; transition: transform 0.5s, scale 0.5s; z-index: 84; opacity: 0;
    transform: translateY(-185px) scale(0.8);
}
#profile a { text-decoration: none; }
#profile.open { transform: translateY(10px) scale(1); opacity: 1; }
#profile .link { display: block; padding: 10px; font-family: 'PT Sans', sans-serif; transition: 0.3s; transition-delay: 0.2s; cursor: pointer; color: rgba(255,255,255,0.6); }
#profile .link:hover { text-indent: 4px; color: rgba(255,255,255,1); }
#profile.open .link:first-of-type { margin-top: 30px; }
#profile-close {
    background-image: url('../images/x-1.svg?ver=0'); background-size: 16px auto; background-position: center;
    height: 40px; width: 40px; display: inline-block; position: fixed; right: 10px; transition: 0.3s; border-radius: 50%; cursor: pointer;
}
#profile-close:hover { background-color: rgba(255,255,255,0.2); }

/*** Cart Menu ***/
#cart {
    background: rgb(57, 56, 172); width: 260px; border-radius: 16px; height: auto;
    padding: 10px; position: fixed; top: 100px; right: 19px; box-shadow: 0px 5px 10px rgba(59, 90, 175, .35);
    transition-timing-function: ease-in-out; transition: transform 0.5s, scale 0.5s; z-index: 84; opacity: 0;
    transform: translateY(-185px) scale(0.8);
}
#cart a { text-decoration: none; }
#cart.open { transform: translateY(10px) scale(1); opacity: 1; }
#cart .link { display: block; padding: 10px; font-family: 'PT Sans', sans-serif; transition: 0.3s; transition-delay: 0.2s; cursor: pointer; color: rgba(255,255,255,0.6); }
#cart .link:hover { text-indent: 4px; color: rgba(255,255,255,1); }
#cart.open .link:first-of-type { margin-top: 30px; }
#cart-close {
    background-image: url('../images/x-1.svg?ver=0'); background-size: 16px auto; background-position: center;
    height: 40px; width: 40px; display: inline-block; position: fixed; right: 10px; transition: 0.3s; border-radius: 50%; cursor: pointer;
}
#cart-close:hover { background-color: rgba(255,255,255,0.2); }
#oc-checkout_type { margin-bottom: 0px; }

/*** Text Editor ***/
.te-toolbar { margin-bottom: 10px; text-align: left; }
.te-view { display: inline-block; margin-right: 10px; color: rgb(80, 100, 150); cursor: pointer; transition: 0.3s; }
.te-view.selected { color: rgb(85, 84, 214); font-weight: 700; }
.te-view:hover { color: rgb(85, 84, 214); }
.te-buttons { float: right; display: flex; }
.te-b-bttn {
    display: inline-block; font-family: 'Mulish'; font-size: 0.95em; font-weight: 800; color: #262368;
    cursor: pointer; width: 20px; height: 20px; text-align: center; opacity: 0.5; transition: 0.3s; user-select: none; -webkit-user-select: none;
}
.te-b-bttn:hover { opacity: 1; }
.te-b-i { font-style: italic; }
.te-b-l { background-image: url('../images/link-black.svg?ver=1'); background-position: center; background-size: 14px auto; }
.te-b-rs { background-image: url('../images/flag-black.svg?ver=0'); background-position: center; background-size: 14px auto; }
.te-b-d { background-image: url('../images/data-black.svg?ver=1'); background-position: center; background-size: 14px auto; }
.te-b-p { background-image: url('../images/picture-black.svg?ver=0'); background-position: center; background-size: 14px auto; }
.text-editor textarea {
    width: 100%; height: calc(2.6em + 16px); padding: 8px; font-size: 0.9em; line-height: 1.3em; margin-bottom: 10px; caret-color: rgb(85, 84, 214);
}
.text-editor textarea::selection { color: white; background-color:rgb(85, 84, 214); }
.text-editor.preview textarea, .text-editor:not(.preview) .te-preview { display: none; }
.s-modal .text-editor textarea { max-height: calc(100vh - 400px); }
.text-editor textarea { max-height: calc(100vh - 300px); }
.te-preview { border-top: 1px rgba(195, 203, 228, 0.5) solid; border-bottom: 1px rgba(195, 203, 228, 0.5) solid; padding: 10px 0px; margin-bottom: 10px; }
.te-buttons:not(.show-data) .s-sel-cover, .te-buttons.show-data .te-b-bttn { display: none; }
.te-data-fields { display: none; }
.te-buttons .s-sel-cover { color: #262368; background-color: rgba(195, 203, 228, 0.5); padding: 4px 12px; margin-top: -4px; border-radius: 6px; width: 175px; font-size: 0.9em; }
.te-buttons .s-list { font-size: 0.9em; }
.te-save { margin: 0px 6px 0px -1px; }
.te-scope {
    float: right; font-size: 0.9em; padding-top: 5px; font-family: 'Mulish'; font-weight: 600;
    margin-bottom: -50px; width: calc(40%); max-width: 200px;
}
.te-email {
    cursor: pointer; border-radius: 6px; float: right; background-color: rgba(195, 203, 228, 0.5);
    width: 34px; height: 29px; margin: 0px 0px 0px 6px;
}
.te-email a {
    background-image: url('../images/email-black.svg?ver=0'); background-size: 20px auto; background-position: center;
    display: block; width: 100%; height: 100%; opacity: 0.5; transition: opacity 0.3s;
}
.te-email a:hover { opacity: 1; }
.te-email.selected { background-color: rgb(85, 84, 214); }
.te-email.selected a { background-image: url('../images/email-white.svg?ver=0'); opacity: 1; }

/*** Input Select / Searchable Input ***/
.input-select-wrap { display: inline-block; margin: 0px; padding: 0px; }
.input-select-wrap .i-s-toggle {
    background-image: url('../images/dd-arrow-white.svg?ver=0'); background-color: rgb(85, 84, 214); position: relative; right: 0px; cursor: pointer;
    transition: background-color 0.3s; display: inline-block; width: 30px; height: 20px; border-radius: 5px; background-size: 12px auto;
    background-position: center; margin: 0px 0px -5px -34px; box-shadow: 0px 0px 4px rgba(146, 164, 179, 0.8); outline: none;
}
.input-select-wrap .i-s-toggle:hover { background-color: white; background-image: url('../images/dd-arrow.svg?ver=0'); }
.input-select-wrap input { display: inline-block; background: rgba(255,255,255,0.6); margin: 0px; font-size: 0.95em; padding: 4px 36px 4px 10px; transition: 0.3s; }
.input-select-wrap input:hover, .input-select-wrap input:focus { background-color: white; }
.input-select-wrap input::placeholder { color:rgb(101, 118, 167); }
.input-select-wrap .i-s-results {
    width: auto; max-width: 350px; background-color: white; color: #262368; position: absolute; display: block; border-radius: 0px 0px 6px 6px;
    max-height: 300px; box-shadow: 0px 3px 10px rgba(59, 90, 175, .35); transition-timing-function: ease-in-out; margin: 0px; margin-right: 20px;
    transition: 0.3s; opacity: 0; transform: translateY(-20px); overflow: auto; z-index: 5; min-height: 30px;
}
.input-select-wrap .i-s-results.i-s-r-wide { border-radius: 0px 6px 6px 6px; }
.input-select-wrap.open .i-s-results { transform: translateY(0px); opacity: 1; }
.input-select-wrap.open input { border-radius: 6px 6px 0px 0px; }
.input-select-wrap .i-s-results a { padding: 10px; display: block; }
.input-select-wrap .i-s-results a:hover, .input-select-wrap .i-s-results a.hover { background-color: rgb(85, 84, 214); color: white; cursor: pointer; }

/*** Tabbed Page & Other Content ***/
.tab-page, .page-section {
    max-width: 750px; width: calc(100% - 40px); margin: 110px auto;
    background: white; border-radius: 15px; box-shadow: 0px 0px 4px rgba(0,0,0,0.15); padding-bottom: 40px;
}
.page-section { padding: 40px; }
.page-section h1:first-child { margin-top: 0px; }
.page-section span.line { border-top: 2px rgba(195, 203, 228, 0.5) solid; margin: 30px 0px; width: auto; height: 0px; display: block; }
.tab-menu { width: 100%; text-align: center; display: flex; border-radius: 15px 15px 0px 0px; background-color: rgb(85, 84, 214); }
.menu-sel { color: white; padding: 14px; background: rgb(85, 84, 214); cursor: pointer; transition: 0.3s; margin: 0px; box-shadow: none; }
.tm-4 .menu-sel { width: 25%; }
.tm-3 .menu-sel { width: calc(100% / 3); }
.tm-2 .menu-sel { width: 50%; }
.menu-sel .badge { margin: 0px 0px 0px 7px; }
.menu-sel:hover { background: rgba(85, 84, 214, 0.75); box-shadow: none; }
.menu-sel.selected, .menu-sel.s-list-selected { color: rgb(85, 84, 214); background: white; }
.menu-sel:first-of-type { border-radius: 15px 0px 0px 0px; }
.menu-sel:last-of-type { border-radius: 0px 15px 0px 0px; }
.menu-sel .short { display: none; }
.menu-sel.s-list-option:hover:not(:active) { box-shadow: none; }
.tab-header { font-size: 1.4em; margin: 30px auto 10px; }
.tab-content { border-radius: 8px; padding: 20px; max-width: 600px; margin: 0px auto; text-align: center; }
.tab-toolbar { display: flex; max-width: 450px; margin: 0px auto; }
.tab-toolbar .s-input-select-wrap { margin: 0px auto; }
.tt-search { width: 100%; font-size: 1em; }
.list-object { background: rgba(195, 203, 228, 0.5); padding: 10px 15px; border-radius: 8px; margin: 10px auto; max-width: 450px; color: rgb(100, 118, 164); text-align: left; transition: 0.3s; }
.list-object.click { cursor: pointer; }
.list-object.click:hover { box-shadow: 0 0 5px rgba(170, 170, 200, 0.3); }
.list-object a.status, .list-object .menu-button, .list-object .tag, .menu-button { background-color: rgb(59, 179, 121); margin: -2px -5px 0px 0px; color: white; padding: 4px 12px; font-size: 0.8em; border-radius: 15px; float: right; font-family: 'Mulish'; font-weight: 600; cursor: default; transition: 0.3s; }
.list-object .tag { float: none; margin: -2px 10px 0px 10px; }
.list-object a.status.green { box-shadow: 0px 0px 4px rgba(59, 179, 121, 0.2); }
.list-object a.status.gray, .list-object .menu-button, .list-object .tag, .menu-button { color: #262368; background-color: rgb(195, 203, 228); }
.list-object a.status.red { background-color: #ed155d; color: white; box-shadow: 0 0 5px rgba(150, 25, 70, 0.3); }
.list-object a.status.check { background-image: url('../images/check-white-small.svg'); background-position: center; background-size: 12px auto; height: 1.85em; }
.list-object a[href^=""], .list-object a:visited { color: rgb(85, 84, 214); }
.list-object .title { font-size: 1em; font-weight: 700; font-family: 'Mulish'; color: #262368; }
.list-object .actions { text-align: left; margin-top: 10px; }
.list-object .actions input[type=button] { font-size: 0.8em; margin: 0px 6px 0px 0px; }
.list-object .actions input[type=button]:not(.gray):not(.edit-gray):not(.delete-gray):not(.green) { background-color: rgb(85, 84, 214); color: white; box-shadow: 0 0 5px rgba(57, 56, 172, 0.3); }
.list-object .actions input[type=button]:not(.edit-gray):not(.delete-gray):not(.green):hover { background-color: rgb(57, 56, 172); }
.list-object.list-button { text-align: center; padding: 15px; font-size: 0.95em; cursor: pointer; }
.list-object.list-button:hover { box-shadow: 0 0 5px rgba(170, 170, 200, 0.3); }
.list-object.list-button:active { box-shadow: 0 0 5px rgba(170, 170, 200, 0.3) inset; }
.list-object.list-button.add { background-image: url('../images/add-gray.svg'); background-position: left 10px center; background-size: 24px auto; background-repeat: no-repeat; }
.list-object p { margin: 8px 0px 0px; }
.list-object .right-label, .list-object .right-icon { float: right; }
.list-object .right-label.space { margin-right: 10px; }
.list-object .status.s-space { margin-left: 16px; }
.list-object .right-label.space-2, .list-object .status.space-2 { margin-right: 10px; margin-left: 10px; }
.list-object .right-label.bold { font-size: 1em; font-weight: 700; font-family: 'PT Sans'; color: #262368; }
.list-object .right-icon { width: 18px; height: 18px; margin: 0px -5px 0px 0px; }
.list-object .right-icon.delete { background-image: url('../images/delete.svg'); background-size: 18px auto; background-position: center; }
.tab-page fieldset, .page-section fieldset { margin: 10px 5px; }
.list-object .menu-button, .menu-button {
    font-size: 9px; height: 24px; line-height: 24px; padding: 0px; width: 24px; margin-left: 10px; text-align: center; display: block; cursor: pointer;
}
.list-object .menu-button.s-menu-active, .menu-button.s-menu-active { background-color: rgb(85, 84, 214); color: white; }
.list-object .status-badge {
    height: 8px; width: 8px; background-color: rgba(150, 160, 190, 0.6); display: inline-block; border-radius: 8px; margin: 6px 0px 0px 10px; float: right;
}
.list-object .status-badge.green { background-color: rgb(59, 179, 121); box-shadow: 0px 0px 4px rgba(59, 179, 121, 0.5); }
.list-object .status-badge.red { background-color: #ed155d }
.list-object.error { box-shadow: 0px 0px 0px 3px rgba(237, 21, 93, 0.6); }
.list-object input[type=text], .list-object input[type=password], .list-object select, .list-object textarea { background-color: rgba(195, 203, 228, 0.8); margin: 2px -3px; }
.list-object.w-full { max-width: 100%; }

.list-object.large { width: 100%; max-width: 750px; padding: 15px 15px; }
.list-object.large:not(.gray) { background-color: white; box-shadow: 0px 0px 4px rgba(0,0,0,0.15); }
.list-wrap .list-object.large { display: inline-block; margin: 10px; }
.list-wrap-block .list-object.large { display: block; margin: 20px auto; }
.list-wrap, .list-wrap-block { width: 100%; text-align: center; }
.sub-list { margin: 5px -7px; }
.sub-list:last-child { margin-bottom: -5px; }
.list-object.large span { border-top: 2px rgba(195, 203, 228, 0.5) solid; margin: 10px 0px; display: block; width: 100%; }
.sub-list-object { background: rgba(195, 203, 228, 0.5); padding: 6px 12px; border-radius: 4px; margin: 5px 7px; color: rgb(100, 118, 164); text-align: left; transition: 0.3s; display: inline-flex; }
.list-object.large .profile { display: inline-block; width: 75px; height: 75px; background-color: rgba(195, 203, 228, 0.5); border-radius: 4px; margin: 0px 10px 0px 0px; background-size: cover; }
.sub-list-object .sub-profile { height: 1.4em; width: 1.4em; margin: -0.1em 0.5em -0.1em -0.3em; border-radius: 1em; background-color: rgba(150, 160, 190, 0.6); background-size: cover; }
.sub-list-object.wrap .sub-profile { height: 2.4em; width: 2.4em; margin: 0.1em 0.5em 0.1em -0.3em; border-radius: 2em; }
.sub-profile.user-default { background-size: 1em; }
.sub-list-object.wrap .sub-profile.user-default { background-size: 1.4em; }
.list-object.large .title { font-size: 1.1em; font-weight: 600; }
.sub-list-object .title, .list-object.large .sub-list-object .title { font-size: 1em; font-family: 'PT Sans', sans-serif; font-weight: 400; transition: 0.3s; }
.list-object.large .profile.team-default { background-size: 50px; }
.sub-list-object.click { cursor: pointer; }
.sub-list-object.click:hover { box-shadow: 0 0 5px rgba(170, 170, 200, 0.3); background-color: rgb(85, 84, 214); color: rgba(255, 255, 255, 0.8); }
.sub-list-object.click:hover .title { color: white; }
.s-modal .list-object.large { font-size: 0.9em; }

.report-wrap { background-color: rgba(195, 203, 228, 0.5); border-radius: 6px; }
.report-wrap .cell {
    padding: 6px 12px; text-align: left; font-size: 0.95em; color: rgb(100, 118, 164);
    border-color: rgba(100, 118, 164, 0.25); border-style: solid; border-width: 0px; border-bottom-width: 1px;
}
.report-wrap .cell.header { font-size: 0.9em; font-weight: 700; font-family: 'Mulish'; color: #262368; background-color: rgba(100, 118, 164, 0.25); border-bottom: 0px; cursor: default; }
.report-wrap .row .cell.header:first-of-type { border-radius: 6px 0px 0px 0px; }
.report-wrap .row .cell.header:last-of-type { border-radius: 0px 6px 0px 0px; }
.report-wrap .row:last-of-type .cell { border-bottom: 0px; }
.report-wrap .cell.green, .report-wrap .row.green > .cell { color: rgb(8, 172, 93); }
.report-wrap .cell.black, .report-wrap .row.black > .cell { color: #262368; }
.report-wrap .cell.bold, .report-wrap .row.bold > .cell { font-weight: 700; }
.report-wrap .row.dark { background-color: rgba(195, 203, 228, 0.4); }
.report-wrap .cell > .table { width: 100%; }
.report-wrap .cell.align-right { text-align: right; }
.report-wrap .cell.no-padding, .report-wrap .cell:has(div.table) { padding: 0px; }
.report-wrap .cell:has(div.table) { border-left-width: 1px; }
.report-wrap .cell:not(:last-of-type):has(div.table) { border-right-width: 1px; }
.report-wrap .cell.no-wrap { white-space: nowrap; }
.report-wrap .cell.w-100 { width: 100px; }

.user-default { background-image: url('../images/profile.svg?ver=0'); background-position: center; }
.team-default { background-image: url('../images/baseball-gray.svg?ver=0'); background-position: center; }

.tab-page fieldset input[type=text], .tab-page fieldset select, .tab-page fieldset textarea,
.page-section fieldset input[type=text], .page-section fieldset select, .page-section fieldset textarea { font-size: 1em; }

.tab-page fieldset.wrap-2, fieldset.wrap-2, .page-section fieldset.wrap-2, fieldset.wrap-2 { width: calc(50% - 10px); display: inline-block; }
.tab-page fieldset.wrap-3, fieldset.wrap-3, .page-section fieldset.wrap-3, fieldset.wrap-3 { width: calc((100% / 3) - 10px); display: inline-block; }
.tab-page fieldset.wrap-4, fieldset.wrap-4, .page-section fieldset.wrap-4, fieldset.wrap-4 { width: calc(25% - 10px); display: inline-block; }

/*** Game Modal ***/
#game-modal h2 { font-size: 1.2em; }
#game-modal .time { color: rgb(85, 84, 214); }
#game-modal fieldset { max-width: 400px; }
#game-modal .game-results .table { background-color: rgb(85, 84, 214); }
#game-modal .game-results .table .row .cell:first-of-type { width: 100%; font-size: 0.9em; }
#game-modal .game-results .table .row .cell:last-of-type { font-size: 1.2em; }
#game-modal .game-results .table .cell { color: white; }
#game-modal .table .cell { text-align: left; }
#game-modal .more-info .cell { font-size: 0.9em; }
#game-modal .more-info .row .cell:first-of-type { color: rgb(80, 100, 150); padding-right: 10px; }
#game-modal .more-info .row .cell:last-of-type { width: 100%; }
#game-modal .edit-score { color: rgba(70, 71, 73, 0.815); background-color: rgba(219, 224, 241, 0.849); max-width: 60px; text-align: center; margin: 4px 0px; padding: 3px; }
#game-modal #umpire-list { max-width: 400px; margin: 0px auto 20px; font-size: 0.9em; }

/*** Role Request ***/
#rr-search { width: calc(100% - 20px); border-radius: 16px; margin-bottom: 0px; transition: 0.3s; }
#team-results { height: 1px; width: calc(100% - 20px); opacity: 0; overflow: scroll; margin: 0px auto 20px; border-radius: 0px 0px 16px 16px; background: rgba(195, 203, 228, 0.2); transition: 0.3s; }
#team-results .tr-sel { display: block; padding: 5px 10px; margin: 5px; font-family: 'Mulish'; font-size: 0.9em; text-align: left; cursor: pointer; transition: 0.3s; }
#team-results .tr-sel.selected { color: rgb(69, 181, 126) }
#role-request-modal.results-loaded #team-results { height: 150px; opacity: 1; }
#role-request-modal.results-loaded #rr-search { border-radius: 16px 16px 0px 0px; padding: 10px 12px 8px; }
#role-request-modal { overflow: hidden; }
#rr-pane-3 .select-wrap { display: block; width: 100%; text-align: center; margin: 0px auto 20px;}
#rr-pane-2 .select-wrap { display: flex; }
#role-request-modal .role-select { border-radius: 6px; width: calc(50% - 10px); padding: 14px; margin: 5px 5px 20px; cursor: pointer; min-height: 125px; }
#role-request-modal .title-select { border-radius: 6px; width: 100%; padding: 14px; margin: 10px 0px; cursor: pointer; display: block; }
#role-request-modal .role-select a { font-weight: 600; }
#role-request-modal .title-select a { font-weight: 600; }
#role-request-modal .title-select div { display: block;}
#role-request-modal .role-select p { font-size: 0.9em; text-align: left; color: rgb(130, 138, 199); margin: 8px 0px 0px; display: block; }
#role-request-modal .role-select.selected { background-color: rgb(85, 84, 214); color: white; }
#role-request-modal .title-select.selected { background-color: rgb(85, 84, 214); color: white; }
#role-request-modal .role-select.selected p { color: rgb(255, 255, 255, 0.5); }
#role-request-modal .s-page p { font-family: 'Mulish'; font-size: 0.9em; color: rgb(80, 100, 150); }
#role-request-modal .modal-footer .link { font-family: 'Mulish'; font-size: 0.9em; text-decoration: underline; }
#role-request-modal:not(.s-mb-page-0) .modal-footer { display: none; }

.post table th, .post table td {
    border: 1px rgb(231, 234, 240) solid; color: rgb(80, 100, 150); text-align: left; padding: 3px 10px; font-size: 0.9em;
}
.post table th{ font-family: Mulish; }
.post table { border-collapse: collapse; margin: auto; width: 100%; }
#es-modal.content-selected { width: 800px; }
#es-modal fieldset { max-width: 450px; margin: 0px auto 20px; }
#es-content { margin-top: 20px; font-size: 0.9em; }
#es-content h1 { text-align: center; margin: 10px auto; }
#es-modal:not(.content-selected) #es-content { display: none; }

/*** User Invite ***/
.s-modal:not(.team-search) #invite-ts-wrap, .s-modal:not(.franchise-search) #invite-fs-wrap, .s-modal:not(.field-search) #invite-fls-wrap { display: none; }
#role-permissions-wrap h4 { margin-bottom: 0em; }

/*** Site-wide-avaiable modal content ***/
#balance-modal #balance-amount, #adjust-cart-modal #adjustment-amount { width: calc(100% - 10px) }
#balance-form #balance-quantity_wrap {width: 70px; padding-right: 10px; display: inline-block; }
#balance-form:not(.quantitative) #balance-quantity_wrap { display: none; }
#balance-form.quantitative #balance-amount_wrap {width: calc(100% - 70px); display: inline-block; }
#balance-modal fieldset:not(:last-of-type) { margin: 20px auto 0px; }
#balance-modal fieldset.span-2 { width: calc(50%); display: inline-block; }
#balance-modal fieldset.span-3 { width: calc(100%/3); display: inline-block; }
#balance-modal #balance-season_wrap { padding-left: 10px; }
#balance-modal .s-list-option, #adjust-cart-modal .s-list-option { padding: 6px; text-align: center; }
#balance-modal #link_type-wrap, #balance-modal #b-amount-wrap, #adjust-cart-modal #a-amount-wrap { width: 130px; }
#balance-modal #link_id-wrap, #balance-modal #amount_type-wrap, #adjust-cart-modal #amount_type-wrap { flex-grow: 1; }
#balance-modal #balance-link_type { width: calc(100% - 10px); }
#balances-show-more-button { margin-top: 20px; }
#balance-form:not(.category-GAME) #balance-game_wrap { display: none; }

#pef-modal { overflow: hidden; padding: 0px 0px 30px; border-radius: 16px; }
#pef-book-wrap { margin: 30px 30px 0px 30px; width: 780px; }
#pef-book .s-page { padding: 5px; }
.pef-time { max-width: 180px; margin: 14px; }
#pef-calendar { box-shadow: 0 0 5px rgba(70, 124, 154, 0.2); border-radius: 8px; }
#pef-modal .s-cal-day { height: 40px; }
#pef-modal .s-cal-selected { background-color: rgb(85, 84, 214); color: white; }
#pef-modal:not(.contacts) #pane-2 { display: none; }
#pef-modal.contacts { width: auto; }
#pef-modal.contacts #pef-main { display: flex; /*width: 675px;*/ width: 100%; }
#pef-modal.contacts #pane-1 { width: 40%; }
#pef-modal.contacts #pane-1 fieldset:first-of-type { margin-top: 0px; }
#pef-modal.contacts #pane-2 { width: 60%; }
#pef-modal.contacts #pane-2 #p2-fieldset { margin: 0px; padding-left: 20px; }
#pef-modal.hide-filters #pef-filters, #pef-modal.no-filters #pef-filters, #pef-modal:not(.hide-filters) #pef-show-filters { display: none; }
#pef-contacts { margin: 10px 0px 20px 0px; border: 1px rgb(231, 234, 240) solid; /* background-color: rgb(231, 234, 240); */ border-radius: 8px; height: 335px; overflow-y: scroll; box-shadow: 0 0 5px rgba(70, 124, 154, 0.2); }
#pef-contacts .contact { text-align: left; padding: 10px 14px; font-size: 0.9em; /*margin: 0px 0px 1px;*/ border-bottom: 1px rgb(231, 234, 240) solid; min-height: calc(34px + 1.7em); cursor: pointer; background-color: white; }
#pef-contacts .contact fieldset:first-of-type { margin-bottom: 10px; }
#pef-contacts .contact.team { padding-bottom: 4px; }
/* #pef-contacts .contact.selected { background-color: white; padding-left: 40px; background-image: url('../images/check-purple.svg'); background-size: 16px auto; background-position: left 12px center; } */
#pef-contacts .contact.unselected { background-color: rgba(255,255,255,0); opacity: 0.8; }
#pef-contacts .contact .user.unselected { opacity: 0.4; }
#pef-contacts .contact.unselected:not(:last-of-type) { margin-bottom: 0px; border-bottom: 1px rgba(0,0,0,0.06) solid; }
#pef-contacts .contact:last-of-type { margin-bottom: 0px; }
#pef-contacts .contact p { margin: 4px 0px 0px; font-size: 0.8em; }
#pef-contacts .contact .title { font-size: 0.8em; float: right; color: rgb(80, 100, 150); margin-top: 3px; }
#pef-contacts .contact .name { font-weight: 700; }
#pef-contacts .team-users { margin: 6px 0px 0px 20px; }
#pef-contacts .team-users .user { padding: 6px 0px; }
#pef-contacts.s-loading-active { opacity: 0.5; }
#pef-c-check { margin: 0.4em 0px -0.25em 0px; }
#pef-c-filter { /* margin-left: 30px; margin-top: 24px; */ display: flex; }
#pef-c-search { width: 100%; }
#pef-c-add {
    width: 35px; height: 35px; border-radius: 25px; margin: 0px 0px 0px 10px; display: inline-block; background-color: rgb(150, 160, 190); 
    background-image: url('../images/plus-white.svg'); background-size: 18px 18px; background-position: center; cursor: pointer; transition: 0.3s;
}
#pef-c-add:hover { background-color: rgb(85, 84, 214); }
#pef-contacts fieldset { margin: 0px; }
#pef-contacts fieldset.wrap-2 { margin: 4px 0px 0px 0px; width: calc(50% - 5px); }
#pef-contacts fieldset.wrap-2:last-of-type { margin-left: 10px; }
#pef-time, #pef-schedule { text-align: center; }
#pef-schedule.inactive { opacity: 0.5; }
#pef-scheduling .s-list-option { text-align: center; }
.wrap-block fieldset.wrap-3 { width: calc((100% / 3) - ((20px * 2) / 3)); margin: 0px 0px 20px 0px; }
.wrap-block fieldset.wrap-4 { width: calc((100% / 4) - ((20px * 3) / 4)); margin: 0px 0px 20px 0px; }
.wrap-block fieldset:not(:last-of-type) { margin-right: 20px; }
#pef-modal .s-list-option { text-align: center; }
#pef-c-wrap { position: relative; margin: -58px auto; z-index: 1; text-align: center; width: 180px; }
#pef-c-wrap div {
    background-color: rgb(85, 84, 214); color: white; padding: 5px; border-radius: 50px; box-shadow: 0px 0px 4px rgba(59, 90, 175, 0.45);
    font-size: 0.8em; text-align: center; display: inline-block; transition: 0.3s;
}
#pef-c-wrap #pef-c-total { width: 130px; }
#pef-c-wrap #pef-c-export { width: 28px; height: 28px; background-color: rgb(150, 160, 190); cursor: pointer; background-image: url('../images/arrow-white-down.svg?ver=4'); background-position: center; background-size: 12px auto; }
#pef-c-wrap #pef-c-export:hover { background-color: rgb(85, 84, 214); }
#pef-message textarea { min-height: 454px; }
#pef-message-wrap { margin-bottom: 0px; }
#pef-subject-team { font-family: 'Mulish'; font-weight: 600; float: right; }
#pef-subject-team input { font-size: 0.85em; margin-right: 8px; }
.grouping-none #pef-subject-team { opacity: 0.5; }
.grouping-none #pef-subject-team::after { content: " (Group by team to use)"; }
#pef-nc-buttons { text-align: center; }
#pef-nc-buttons input { margin: 10px 3px 0px; width: 65px; }
#pef-confirm-email { width: 100%; text-align: left; background-color: white; margin: 0px 0px 10px; }
#pef-confirm-email .subject { font-family: 'Mulish'; font-weight: 600; margin-bottom: 10px; display: block; }
#pef-confirm-email .md-text { width: 100%; border: 1px rgb(231, 234, 240) solid; border-left: 0px; border-right: 0px; padding: 10px 0px; max-height: 400px; overflow-y: scroll; }
#pef-confirm-total { width: 280px; margin: 20px auto 20px; }
#pef-show-filters { font-size: 0.95em; }

#er-form fieldset { margin-top: 0px; margin-bottom: 40px; padding: 0px 8px; }
#game-form h5 { margin-top: 0.75em; }

/*** Markdown Text ***/
.md-text h1, .md-text h1 a, .md-text .title { font-family: 'Mulish'; color: #262368; font-weight: 700; font-size: 0.95em; line-height: 1.7em; display: block; text-align: left; }
.md-text h1 a { display: initial; }
.md-text p, .md-text ol li, .md-text ul li { color: rgba(80, 100, 150, 0.9); font-size: 0.9em; line-height: 1.6em; }
.md-text h1:first-child { margin-top: 0px; }
.md-text p:last-of-type { margin-bottom: 0px; }
.md-text p:only-child, .md-text p:first-child, .te-preview p:first-child { margin-top: 0px; }
.md-text h1.green, .md-text a.green { color: rgb(75, 200, 139); }
.md-text h1.purple, .md-text a.purple { color: rgb(85, 84, 214); }
.md-text h1.red, .md-text a.red { color: #ed155d; }
.md-text img { width: auto; height: auto; max-height: 300px; max-width: 100%; display: block; margin: 0px auto; }
.md-text table th, .md-text table td {
    border: 1px rgb(231, 234, 240) solid; color: rgba(80, 100, 150, 0.9); text-align: left; padding: 3px 10px; font-size: 0.9em;
}
.md-text table th{ font-family: Mulish;}
.md-text table { border-collapse: collapse; margin: auto; width: 100%; }
h1.flag, a.flag { background-size: 24px auto; background-position: left center; padding-left: 30px; }
h1.green.flag, a.green.flag { background-image: url('../images/flag-green.svg'); }
h1.purple.flag, a.purple.flag { background-image: url('../images/flag-purple.svg'); }
h1.red.flag, a.red.flag { background-image: url('../images/flag-red.svg'); }

/*** Messaging ***/
#message { display: flex; width: 100%; height: 100%; min-height: 300px; min-height: 300px; }
#message > div { display: flex; flex-flow: column; }
#m-history { width: 35%; max-width: 25em; border-right: 1px rgba(195, 203, 228, 0.5) solid; overflow: hidden; }
#m-main {
    display: flex; flex-flow: column; flex-grow: 1; overflow: auto; padding: 0.8em;
    box-shadow: 0px 0px 6px rgba(195, 203, 228, 0.4) inset; 
}
#m-main .m-message { text-align: left; margin: 0em 0em 0.8em; display: flex; width: 100%; }
#m-main .m-text, #m-text-entry .te-preview {
    display: inline-block; padding: 0.4em 0.9em; border-radius: 1.2em; background-color: rgba(195, 203, 228, 0.5); box-shadow: 0px 0px 4px rgba(195, 203, 228, 0.3);
    max-width: 32em; text-align: left; line-height: 1.4em; font-size: 1em;
}
#m-main-wrap { flex-grow: 1; }
#m-main .m-message.m-self { text-align: right; }
#m-main .m-message.m-self .m-text, #m-text-entry .te-preview { background-color: rgb(85, 84, 214); box-shadow: 0px 0px 4px rgba(85, 84, 214, 0.3); color: white; margin-left: 4em; }
#m-main .m-message:not(.m-self) .m-text { margin-right: 4em; }
#m-main .m-message > div > span { display: block; width: 100%; margin: 5px 0px; }
#m-main .m-message .m-p-wrap { width: 2.8em; }
#m-main .m-message .m-m-wrap { width: calc(100%); }
#m-main .m-message:not(.m-self) .m-m-wrap { width: calc(100% - 2.8em); }
#m-main .m-profile { height: 2.2em; width: 2.2em; display: grid; border-radius: 100%; background-color: rgba(195, 203, 228, 0.5); cursor: pointer; }
.m-profile > a { font-size: 0.85em; color: rgb(85, 84, 214); place-self: center; }
#message #m-toobar { border-top: 1px rgba(195, 203, 228, 0.5) solid; padding: 0.8em; text-align: center; }
#m-thread-title { height: 3.4em; display: grid; border-bottom: 1px rgba(195, 203, 228, 0.5) solid; display: flex; }
#m-thread-title > div { place-self: center; }
#m-thread-title > div:not(:nth-of-type(2)) { width: 100px; }
#m-thread-title > div:nth-of-type(2) { flex-grow: 1; }
#m-thread-title > div > a { place-self: center; font-size: 1.1em; color: rgb(85, 84, 214); }
#m-thread-title .m-nav-back {
    color: rgb(85, 84, 214); background-image: url(../images/nav-back-arrow.svg?ver=0); background-position: left 0.8em center;
    background-size: 0.75em auto; cursor: pointer;
}
#m-thread-title .m-nav-back:not(.active) { opacity: 0; cursor: default; }
#m-message-text { padding: 0.4em 0.9em; border-radius: 1.2em; max-height: 400px; font-size: 1em; }
#m-main .m-text > p:first-of-type, #m-text-entry .te-preview > p:first-of-type { margin-top: 0px; }
#m-main .m-text > p:last-of-type, #m-text-entry .te-preview > p:last-of-type { margin-bottom: 0px; }
#m-main .m-text > p:only-of-type, #m-text-entry .te-preview > p:only-of-type { margin: 0px; }
#m-main .m-text img { max-width: 100%; }
#m-main-wrap.type-email_log #m-main .m-text { padding: 0px; background-color: white; }
#m-text-entry .te-view { font-size: 1em; }
.m-profile > a, #m-thread-title > a { font-family: 'Mulish'; font-weight: 600; }
#m-main .m-timestamp { color: rgb(80, 100, 150); font-size: 0.9em; margin-bottom: 1em; text-align: center; }
#m-text-entry:not(.preview) .te-preview { display: none; }
#m-text-entry.preview .te-preview { display: inline-block; margin: 0em 0em 0.5em; }
#m-text-entry.preview { text-align: left; }
#m-main .m-profile > img, #m-history .m-profile img { height: 100%; width: 100%; border-radius: 100%; }
#m-send-tools { display: flex; align-items: center; width: 100%; }
#m-send-tools > div > input[type="checkbox"] { margin-right: 0.6em; }
#m-send-tools > div { width: 50%; color: rgb(80, 100, 150); }
#m-send-tools #m-es-wrap { text-align: left; font-size: 0.9em; display: flex; align-items: center; }
#m-send-tools #m-es-wrap > a { cursor: pointer; }
#m-send-tools > div:last-of-type { text-align: right; }
#m-h-tools { padding: 0.7em; height: 3.4em; display: flex; }
#m-h-tools > input { height: 100%; font-size: 1em; border-radius: 2em; }
#m-h-tools > input:not(:last-of-type) { margin-right: 0.6em; }
#m-h-search { flex-grow: 1; box-shadow: 0px 0px 4px rgba(195, 203, 228, 0.3) inset; width: auto; min-width: auto; }
#m-h-tools > input[type="button"] { width: calc(3.4em - 1.4em); box-shadow: 0px 0px 4px rgba(195, 203, 228, 0.3); }
#m-new-thread { background-image: url('../images/edit.svg'); background-position: center; background-size: 0.8em auto; }
#m-h-list { flex-grow: 1; overflow: auto; }
#m-h-list .m-h-item { margin: 0em 0.8em; padding: 0.5em; border-radius: 0.7em; text-align: left; cursor: pointer; display: flex; }
#m-h-list .m-h-p-wrap { min-width: 3.65em; max-width: 3.65em; margin-left: 0.15em; }
#m-h-list .m-h-content { width: calc(100% - 3.8em); padding: 0.4em 0.8em; }
#m-h-list .m-h-content > a { font-family: 'Mulish'; font-weight: 700; font-size: 1em; display: block; }
#m-h-list .m-h-content > p { font-size: 0.9em; color: rgb(80, 100, 150); margin: 0.4em 0em 0em; display: block; }
#m-h-list .m-h-item.m-t-active { background-color: rgba(195, 203, 228, 0.5); box-shadow: 0px 0px 4px rgba(195, 203, 228, 0.3); }
#m-h-list .m-h-item:not(.m-t-active):hover { background-color: rgba(195, 203, 228, 0.2); }
#m-h-list .m-h-content > p, #m-h-list .m-h-content > a, #m-thread-title > a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#m-history .m-profile { height: 100%; width: 100%; border-radius: 100%; background-color: rgb(223, 228, 242); cursor: pointer; box-shadow: 0px 0px 0.2em rgba(195, 203, 228, 0.5); display: grid; }
#m-h-list .m-h-item.m-t-active .m-profile { background-color: rgba(195, 203, 228, 0.8); }
#m-history .m-profile > a { font-size: 1.1em; }
#m-history .m-profile:has(.m-p-type_team_id), #m-history .m-profile img.m-p-type_team_id { border-radius: 10%; }
/* Multiple profiles */
#m-history .m-h-p-wrap:has(> *:nth-child(1)):has(> *:nth-child(2)) .m-profile { height: 65%; width: 65%; position: relative; box-shadow: 0px 0px 0px 2px white; }
#m-history .m-h-p-wrap:has(> *:nth-child(1)):has(> *:nth-child(2)) .m-profile > a { font-size: 0.8em; }
#m-history .m-h-p-wrap:has(> *:nth-child(1)):has(> *:nth-child(2)) .m-profile:first-of-type { float: left; margin-right: -35%; margin-top: 35%; z-index: 2; }
#m-history .m-h-p-wrap .m-profile:nth-of-type(2) { float: right; margin-left: -35%; z-index: 1; }
/* Unutilized name / time stamp to show above messages */
.m-message > .m-info { color: rgb(80, 100, 150); margin: 0em 0em 0.2em 0.5em; font-family: 'Mulish'; font-weight: 400; font-size: 0.8em; }
.m-message > .m-info > .bold { font-weight: 700; font-size: 0.85em; }
.m-message:has(.m-info) .m-p-wrap { margin-top: 1.45em; }
#m-main .m-stats { display: flex; max-width: 32em; margin-top: 0.5em; }
#m-main .m-stats div { width: 50%; color: rgb(80, 100, 150); line-height: 1.7em; }
#m-main .m-stats div:last-of-type { text-align: right; }
#m-main .m-stats input[type=button]{ margin-left: 0.75em; }
#m-main .m-stats input[type=button].edit, #m-main .m-stats input[type=button].delete { padding-left: 2.5em; }
#m-main .m-stats .sending .progress { display: inline-block; margin-right: 1em; }
#m-main .email-progress { display: flex; }
#m-main-wrap.type-bulk_email #m-toobar, #m-main-wrap.type-email_log #m-toobar { display: none; }

/*** Responsive ***/
@media (max-width: 950px) {
    #header #profile-bttn, #header #management-bttn { background-position: center; width: 50px; padding: 0px; }
    #header .bttn-label { display: none; }
    #header #profile-bttn img { margin: 3px 11px 0px 3px; }
}
@media (max-width: 850px) {
    #header { height: 75px; }
    #profile { top: 85px; }
    #header .title { display: none; }
    #logo { height: 65px; width: 65px; background-size: 65px auto; }
    #header .buttons { padding-top: 13px; right: 13px; }
    body.no-top-margin { margin-top: 75px; }
}
@media (max-width: 600px){
    .menu-sel { font-size: 0.95em; }
    .menu-sel .short { display: inline-block; }
    .menu-sel .long { display: none; }
    .tab-page, .page-section { margin: 0px auto; width: 100%; border-radius: 0px; }
    .tab-menu .menu-sel:first-of-type, .menu-sel:last-of-type { border-radius: 0px; }
    body.tabbed-page, body:has(.page-content) { margin: 75px 0px 0px 0px }
    .page-content { margin: 0px; width: 100%; border-radius: 0; }
}
@media (max-width: 430px){
    #header #sign-in-bttn { font-size: 0px; background-position: center; width: 50px;}
    .s-modal { padding: 50px 20px; }
}

@media (max-width: 310px){
   #profile {position: fixed; right: 0px}
}

.custom-scroll::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.04);
	border-radius: 10px;
	background-color: rgba(0,0,0,0.05);
}
.custom-scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    -webkit-overflow-scrolling: auto;
    width: 6px;
    height: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
	border-radius: 12px;
	background-color: rgba(0,0,0,0.6);
}

#load-bar {
    background: #5bbaff; height: 5px; position: fixed; top: -5px; left: 0px;
    width: 100%; transition: top 0.3s ease-out; z-index: 99999; opacity: 0;
}
.api-loading #load-bar {
    background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%);
    background-repeat: repeat-y; background-position: -2500px 0;
    opacity: 1; top: 0px; animation: shimmerBackground 0.8s linear infinite; animation-delay: 0.5s; transition-delay: 0.5s;
}
@keyframes shimmerBackground {
    0% { background-position:-2500px 0; opacity: 0.8; }
    50% { opacity: 1;}
    100% { background-position:2500px 0; opacity: 0.8; }
}
@media (max-width: 850px) {
    #pef-modal.contacts #pef-main { width: 100%; display: block; }
    #pef-contacts { height: 350px; margin: 0px 0px 20px; }
    #pef-modal.contacts #pane-1, #pef-modal.contacts #pane-2 { width: 100%; }
    #pef-c-filter { margin-left: 0px; margin-bottom: 10px; }
}