.cursor-pointer { cursor:pointer; }

.NECTAR-DECANTER { display: none; }

/* override default max with of popovers and tooltips */
/* The maximum width of the popover is hard coded by Bootstrap CSS to 276px. */
.popover {
    max-width: 350px;
}
.tooltip-inner {
    max-width: 350px; !important;
    padding:15px;
}
.tooltip {
    --bs-tooltip-zindex: 9998;
}

.definition-link {
    /* cursor:pointer; */
    color: currentcolor;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: #9d9d9d;
    text-decoration-thickness: 1px;
}

.vertical-divider { height: 10px; }

.truncate-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
}
.truncate-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
}

/* Styles for drag-and-drop table */
table tr.sorting-row td {background-color: #fffee2;}
table td.sorter {xbackground-color: #f80; xwidth: 40px; cursor:grab; xvertical-align: middle;} /* ns-resize */
table td.sorter:active {cursor:grabbing;}
table.sorting-table tbody tr:not(.sorting-row) td {opacity: 0.4;}

/* override default max with of popovers */
/* The maximum width of the popover is hard coded by Bootstrap CSS to 276px. */
.popover {
    max-width: 350px;
}

/* Click To Edit - such as profile picture editor */
.click-to-edit {
    position: relative;
    /*width: 50%;*/
}

.cte-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .25s ease;
    backface-visibility: hidden;
}

.cte-middle {
    transition: .25s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.click-to-edit:hover .cte-image {
    opacity: 0.3;
}

.click-to-edit:hover .cte-middle {
    opacity: .5;
}

.cte-text {
    background-color: #000000;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

.opacity-10 {
    opacity: .1;
}
.opacity-20 {
    opacity: .2;
}
.opacity-30 {
    opacity: .3;
}
.opacity-40 {
    opacity: .4;
}
.opacity-50 {
    opacity: .5;
}
.opacity-60 {
    opacity: .6;
}
.opacity-70 {
    opacity: .7;
}
.opacity-80 {
    opacity: .8;
}
.opacity-90 {
    opacity: .9;
}

/* The animation code */
@keyframes make-fade-in {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
/* The element to apply the animation to */
.fade-in {
    animation-name: make-fade-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes make-fade-out {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
/* The element to apply the animation to */
.fade-out {
    animation-name: make-fade-out;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

hr_with_text {
    font-variant: all-small-caps;
    display: flex;
    flex-direction: row;
}
hr_with_text:before,
hr_with_text:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid orange;
    margin: auto;
}



/* unvisited link */
.gnp-nav a:link {
    color: #D0D0D0FF;
    text-decoration: none;
}

/* visited link */
.gnp-nav a:visited {
    color: #D0D0D0FF;
    text-decoration: none;
}

/* mouse over link */
.gnp-nav a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* selected link */
.gnp-nav a:active {
    color: #30c6ff;
    text-decoration: none;
}

.switch-v2 {
    background-color: #ececec;
    border-color: #ececec;
}
.switch-v2:checked {
    background-color: darkred;
    border-color: darkred;
}

.switch-v3 {
    background-color: #ececec;
    border-color: #ececec;
}
.switch-v3:checked {
    background-color: #be9900;
    border-color: #be9900;
}

/* Container with background image/video media */
.media-container {
    height: 10vw;
    max-height:65%;
    min-height:190px;
    width: 100%;
    position: relative;
    background-color: black;
}

.media-container video {
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    z-index: 0;
    opacity: .25;
}
.media-container-bkgd-img {
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    z-index: 0;
    opacity: .2;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.media-container .caption {
    z-index: 1;
    position: absolute;
    top: 0px;
    /*left: 3%;*/
    width: 100%;
    text-align: left;
    color: whitesmoke;
    padding: 0px;
    /*border: 5px solid red;*/
}

.event-header {
    position: relative;
    color: whitesmoke;
    background-image: url('/img/board_game_header_bkgd_2.jpg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-color: black;
}

.minijumbotron {
    height: 135px;
    position: relative;
    color: whitesmoke;
    background-image: url('/img/board_game_header_bkgd_2.jpg');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-color: black;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.balloon-one {
    position: relative;
    /* max-width: 30em; */
    background-color: #fff;
    padding: .8em 1em; /* padding: 1.125em 1.5em; */
    /* font-size: 1.25em; */
    line-height: 125%;
    border-radius: 1rem;
    box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
}

.balloon-one::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 1.5em; /* offset should move with padding of parent */
    border: .75rem solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}

.dialogue-balloon {
    /*background-color: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    font-family: "SanFrancisco";
    font-size: 1.25rem; */
    /*margin: 0 auto 1rem;
    max-width: 600px;
    padding: 0.5rem 1.5rem; */
}

.dialogue-balloon div {
    border-radius: .5rem;
    line-height: 1.25;
    /*max-width: 75%;*/
    padding: 0.5rem 1.5rem .7rem 1rem;
    position: relative;
    /*word-wrap: break-word;*/
}

.dialogue-balloon div::before,
.dialogue-balloon div::after {
    top: 1rem;
    content: "";
    height: 1rem;
    position: absolute;
}

div[class^="from-"] {
    /*margin: 0.5rem 0;*/
    xwidth: fit-content;
}

div.from-them {
    align-items: flex-start;
    background-color: #dcedf9;
    /* color: #000; */
}

div.from-them:before {
    border-bottom-right-radius: 0.8rem 0.7rem;
    border-left: 1rem solid #dcedf9;
    left: -0.35rem;
    transform: translate(0, -0.1rem);
}

div.from-them::after {
    background-color: #fff;
    border-bottom-right-radius: 0.5rem;
    left: 20px;
    transform: translate(-30px, -2px);
    width: 10px;
}

/* ------------------------------ */

.sb {
    border: 2px solid #d0d0d0;
    line-height: 1.25;
    padding: 0.5rem 1.5rem .7rem 1rem;
    border-radius: .5rem;
    position: relative;
    background-color: #fff;
}
.sbp:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid #d0d0d0;
    border-top: 10px solid #d0d0d0;
    border-bottom: 10px solid transparent;
    left: -21px;
    top: 16px;
}
.sbp:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 10px solid #fff;
    border-top: 7px solid #fff;
    border-bottom: 7px solid transparent;
    left: -16px;
    top: 18px;
}

/*
.sbp-ws:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 10px solid #fff3cd;
    border-top: 7px solid #fff3cd;
    border-bottom: 7px solid transparent;
    left: -16px;
    top: 18px;
}
*/

.average-rank {
    padding: 5px;
    background-color: #ffe0d6;
    border: 2px solid #ffa884;
    margin-bottom:15px;
}

.game-subheader-1 {
    background-image: url('/img/game_subheader_1_15p.png');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-color: #041621;
}

.game-subheader-2 {
    background-image: url('/img/game_subheader_2_15p.png');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    background-color: #041621;
}

.text-highlighted {
    color: #FFCC00;
}