body {
    background-color: rgb(241 245 249);
}

/*****************************/
/*          Utilities       */
/*****************************/
/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* Spacing */
.mt-6 {
    margin-top: 4rem;
}

.top-10px {
    top: 10px;
}

.top-20px {
    top: 20px;
}

.end-10px {
    right: 10px;
}

.end-20px {
    right: 20px;
}

/* font-size */
.fs-110percent {
    font-size: 110%;
}

.fs-90percent {
    font-size: 90%;
}

.fs-80percent {
    font-size: 80%;
}

.fs-70percent {
    font-size: 70%;
}

/* Sizes */
.min-h-90vh {
    min-height: 90vh;
}

.max-w-500px {
    max-width: 500px;
}

.w-full {
    width: 100%;
}

.w-fit {
    width: fit-content;
}

.h-fit {
    height: fit-content;
}

/* Lists */
.list-style-none {
    list-style: none;
}

/* Text color */
.text-red-200 {	color: rgb(254 202 202);}
.text-red-300 {	color: rgb(252 165 165);}
.text-red-400 {	color: rgb(248 113 113);}
.text-red-500 {	color: rgb(239 68 68);}
.text-red-600 {	color: rgb(220 38 38);}
.text-red-700 {	color: rgb(185 28 28);}
.text-red-800 {	color: rgb(153 27 27);}
.text-red-900 {	color: rgb(127 29 29);}

.text-orange-400 {color: rgb(251 146 60);}

.text-yellow-400 {color: rgb(250 204 21);}

/* Background color */
.bg-red-700 {
    background-color: rgb(185 28 28);
}

.bg-red-500 {
    background-color: rgb(239 68 68);
}

.bg-orange-400 {
    background-color: rgb(251 146 60);
}

.bg-yellow-400 {
    background-color: rgb(250 204 21);
}

/* Whitespace */
.no-break {
    white-space: nowrap;
}

/* Z indexes */
.z-100 {
    z-index: 100;
}

/* Word wrap */
.word-break {
    word-wrap: break-word;
}

/*****************************/
/*          Components      */
/*****************************/
/* Tags */
main {
    margin-top: 55px;
}

/*** Texts ***/
.helper-text {
    font-size: 0.75rem;
}

/*** Buttons ***/
.icon-btn-light {
    color: rgb(203 213 225);
    transition-duration: 0.25s;
}

.icon-btn-light:hover,
.icon-btn-light.active {
    color: #ffffff;
}

.icon-btn-dark {
    color: rgb(203 213 225);
    transition-duration: 0.25s;
    cursor: pointer;
}

.icon-btn-dark:hover,
.icon-btn-dark.active {
    color: #000000;
}

.text-btn-dark {
    color: rgb(107 114 128);
    transition-duration: 0.25s;
    cursor: pointer;
}

.text-btn-dark:hover,
.text-btn-dark.active {
    color: #000000;
}

.btn-sm i {
    font-size: 0.75rem;
}

/* Brief displays */
/* Brief display show short summary of something with buttons 'See more'
and 'See less' to toggle all information related to that thing */
.brief-display .see-more-btn,
.brief-display .see-less-btn {
    text-align: center;
    font-weight: 500;
    color: rgb(148 163 184);
    transition-duration: 0.25s;
    cursor: default;
    margin-top: 10px;
}

.brief-display .see-more-btn:hover,
.brief-display .see-less-btn:hover {
    color: #000;
}

/* Group card */
.group-card.selected {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    background-color: rgb(241 245 249);
}

/* Navbar */
nav.navbar .nav-item .role-instructions-btn {
    cursor: pointer;
    transition-duration: 0.25s;
    color: #ffffff;
    font-size: 75%;
}
nav.navbar .nav-item .role-instructions-btn:hover {
    color: rgb(209 213 219);
}

/*****************************/
/* Previously inlined styles */
/*****************************/

.container-command {
    word-wrap: break-word;
}

.mx-auto {
    width: 90%;
}

.outer-div {
    margin-top: 100px;
}

/* Hit point progress container */
.hit-point-title[data-step="1"] {
    left: 0%;
}

.hit-point-title[data-step="2"] {
    left: 20%;
}

.hit-point-title[data-step="3"] {
    left: 40%;
}

.hit-point-title[data-step="4"] {
    left: 60%;
}

.hit-point-title[data-step="5"] {
    left: 80%;
}

.hit-point-title[data-step="6"] {
    left: 100%;
}

/* Navbar */
nav.navbar .nav-item .role-instructions-btn {
    cursor: pointer;
    transition-duration: 0.25s;
    color: #ffffff;
    font-size: 75%;
}
nav.navbar .nav-item .role-instructions-btn:hover {
    color: rgb(209 213 219);
}

.notification-bell .dropdown-menu {
    max-height: 500px;
    overflow: auto;
}

.notification-bell .dropdown-item {
    width: 300px;
    white-space: normal;
}
nav.navbar .user-avatar-dropdown .dropdown-menu {
    min-width: 200px;
}
nav.navbar .user-avatar-dropdown .dropdown-menu .dropdown-item {
    white-space: normal;
}