/* 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: 'IMFellEnglishSC'; src: local('IM Fell'), url('/game-plugins/joanofarc/1.1.9/fonts/IMFellEnglishSC/IMFellEnglishSC-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

#rules { background-image: url("/game-plugins/joanofarc/1.1.9/images/rules/background.webp"); background-size: 100%; background-repeat: repeat-y; font-size: 1.1em; }

.title-img { width: 100% !important; }

.rules .summary-callout { border: 2px solid red !important; margin-top: 10px; padding: 10px !important; }

#rules .chapter .title {
    width: fit-content;
    margin: 0 auto;
    font-family: 'IMFellEnglishSC', 'Comic Sans MS', cursive;
    font-size: 2em;
    color: black;
    text-align: center;
    border-bottom: 10px solid transparent;
    border-image: url("/game-plugins/joanofarc/1.1.9/images/rules/title-border.webp") 0 0 100% 0 / 0 0 10px 0 stretch;
    border-top: none;
    margin-bottom: 20px;
}

.rules .padded { padding: 0 30px 0 30px; }
.rules .small-title { font-weight: bold; text-decoration: underline; padding-top: 25px; }
.rules .course-subtitle { background-color: #F7931D80; font-weight: bold; font-size: 1.3em; margin-top: 5px; margin-bottom: 5px; padding-left: 30px; }
.rules .side-by-side { display: flex; justify-content: space-between; }
.rules .side-by-side-left { width: 50%; padding-left: 30px; }
.rules .side-by-side-right { width: 40%; }
.rules .monk-rules-div { display: flex; justify-content: space-around; border: 2px solid black; margin: 25px; padding: 10px; }
.rules .monk-rules-div-left { width: 30%; }
.rules .monk-rules-div-right { width: 55%; }
.rules .actions-header { font-family: 'IMFellEnglishSC', 'Comic Sans MS', cursive; font-size: 1.7em; width: fit-content; border-bottom: 2px solid black; margin-top: 30px; }
.rules .action-choice { font-weight: bold; margin-left: 40px; margin-right: 30%; }
.rules .action-choice-a { background-color: rgba(0, 174, 239, 0.6); }
.rules .action-choice-b { background-color: rgba(255, 242, 0, 0.6); }
.rules .action-choice-c { background-color: rgba(210, 35, 41, 0.6); }
.rules .action-header { font-weight: bold; margin-top: 30px; }
.rules .action-body-a { background-color: rgba(0, 174, 239, 0.3); padding: 10px 30px 10px 30px; }
.rules .farmer-div { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .farmer-div-left { width: 8%; }
.rules .farmer-div-right { width: 90%; }
.rules .knight-div { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .knight-div-left { width: 88%; }
.rules .knight-div-right { width: 10%; }
.rules .knight-inner-div { display: flex; justify-content: space-between; margin-top: 25px; }
.rules .knight-inner-div-left { width: 10%; }
.rules .knight-inner-div-right { width: 88%; }
.rules .boatman-div { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .boatman-div-left { width: 8%; }
.rules .boatman-div-right { width: 90%; }
.rules .craftsman-div { display: flex; justify-content: space-between; margin: 20px 0 0 0; }
.rules .craftsman-div-left { width: 8%; }
.rules .craftsman-div-right { width: 90%; }
.rules .craftsman-example-div { display: flex; justify-content: space-between; margin: 0 0 20px 0; }
.rules .craftsman-example-div-left { width: 65%; }
.rules .craftsman-example-div-center { width: 23%; }
.rules .craftsman-example-div-right { width: 10%; }
.rules .trader-div { display: flex; justify-content: space-between; margin: 20px 0 0 0; }
.rules .trader-div-left { width: 8%; }
.rules .trader-div-right { width: 90%; }
.rules .scholar-div { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .scholar-div-left { width: 8%; }
.rules .scholar-div-right { width: 90%; }
.rules .monk-div { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .monk-div-left { width: 8%; }
.rules .monk-div-right { width: 90%; }

.rules .action-body-b { background-color: rgba(255, 242, 0, 0.3); padding: 10px 30px 10px 30px; }
.rules .with-place-div { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .with-place-div-left { width: 15%; }
.rules .with-place-div-right { width: 83%; }

.rules .action-body-c { background-color: rgba(210, 35, 41, 0.3); padding: 10px 30px 10px 30px; }
.rules .deeds-side-by-side { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .deeds-side-by-side-left { width: 48%; }
.rules .deeds-side-by-side-right { width: 48%; }
.rules .bd-with-icon { display: flex; justify-content: space-between; margin: 20px 0 20px 0; }
.rules .bd-with-icon-left { width: 15%; }
.rules .bd-with-icon-right { width: 83%; }
.rules .bd-with-icon-left-2 { width: 10%; }
.rules .bd-with-icon-right-2 { width: 88%; }

.rules .score-img-on-right { display: flex; justify-content: space-between; }
.rules .score-img-on-right-left { width: 83%; }
.rules .score-img-on-right-right { width: 15%; }

.rules .additional-rule-with-img { display: flex; justify-content: space-between; }
.rules .additional-rule-with-img-left { width: 5%; }
.rules .additional-rule-with-img-right { width: 93%; }
.rules .additional-rule-with-img-left-depot { width: 3%; }
.rules .additional-rule-with-img-right-depot { width: 93%; }
.rules .additional-rule-with-double-img { display: flex; justify-content: space-between; }
.rules .additional-rule-with-double-img-left { width: 5%; }
.rules .additional-rule-with-double-img-center { width: 5%; }
.rules .additional-rule-with-double-img-right { width: 88%; }
.rules .additional-rule-large-right-img { display: flex; justify-content: space-between; }
.rules .additional-rule-large-right-img-left { width: 60%; }
.rules .additional-rule-large-right-img-right { width: 38%; }

.rules .depot-side-by-side { display: flex; justify-content: space-between; }
.rules .depot-side-by-side-left { width: 48%; }
.rules .depot-side-by-side-right { width: 50%; }

.rules .course-solo-sides { display: flex; justify-content: space-between; }
.rules .course-solo-sides-left { width: 85%; }
.rules .course-solo-sides-right { width: 12%; }

.rules .joans-area-split { display: flex; justify-content: space-between; }
.rules .joans-area-split-left { width: 45%; }
.rules .joans-area-split-right { width: 52%; }

.rules .monk-action-sides { display: flex; justify-content: space-between; }
.rules .monk-action-sides-left { width: 85%; }
.rules .monk-action-sides-right { width: 13%; }
.rules .solo-example-padding { padding-bottom: 5px; }

.rules .place-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 0; border: 2px solid black; }
.rules .place-sides { display: flex; justify-content: space-between; padding: 10px; border-top: 2px solid black; border-left: 2px solid black; }
.rules .place-grid-container > div:nth-child(-n+3) { border-top: none; }
.rules .place-grid-container > div:nth-child(3n+1) { border-left: none; }
.rules .place-sides-left { width: 48%; }
.rules .place-sides-right { width: 48%; }

#rules .h4h-with-img { display: flex; justify-content: space-between; align-items: center; }
#rules .h4h-with-img-image { width: 20%; }
#rules .h4h-with-img-text { width: 78%; }