/* add all special styles used for displaying the rules */

/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract 
   #rules: div with complete rules used at main site
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */

@font-face { font-family: 'Jost'; src: local('Jost Regular'), url('/Games/DTB/fonts/Jost/Jost-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: local('Jost Bold'), url('/Games/DTB/fonts/Jost/Jost-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: local('Jost Italic'), url('/Games/DTB/fonts/Jost/Jost-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Slackey'; src: local('Slackey'), url('/Games/DTB/fonts/Slackey/Slackey-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

#rules .panelOnly { display: none; }

#rules .dino-card { float: right; width: 20%; margin: 0 50px 20px 50px; }
#rules .action-card { float: right; width: 40%; margin: 0 50px 20px 50px; }
.rules .dice { font-size: 20px; }

.rules { font-family: 'Jost', sans-serif; }
.rules .chapter .title { font-family: 'Slackey', 'Comic Sans MS', cursive; text-transform: uppercase;  }

.rules .expansion-container { display: flex; align-items: center; border: 2px solid #000; padding: 15px; gap: 15px; margin-top: 15px; }
.rules .expansion-icon { width: 40px; height: auto; }

.rules .purple-text { color: #7030A0; }

.rules .chapter .purple  { color: white !important; background-color: #7030A0 !important }
.rules .chapter .yellow  { color: black !important; background-color: #FFFF00 !important }
.rules .chapter .blue    { color: black !important; background-color: #00B0F0 !important }
.rules .chapter .blue2   { color: white !important; background-color: #002060 !important }
.rules .chapter .red     { color: white !important; background-color: #C0504D !important }
.rules .chapter .orange  { color: black !important; background-color: #F79646 !important }
.rules .chapter .red2    { color: white !important; background-color: #C00000 !important }
.rules .chapter .purple2 { color: white !important; background-color: #403152 !important }
.rules .chapter .green   { color: black !important; background-color: #92D050 !important }
.rules .chapter .orange2 { color: black !important; background-color: #FFC000 !important }
.rules .chapter .teal    { color: black !important; background-color: #40E0D0 !important }
.rules .chapter .lime    { color: black !important; background-color: #00FF00 !important }
.rules .chapter .gray    { color: black !important; background-color: #B1B5C1 !important }