@import url('https://fonts.googleapis.com/css?family=Uncial+Antiqua&display=swap'); .charsheet { font-family:Arial; --sombre: RGB(023,082,112); --clair: RGB(220, 229, 237); --encart: RGB(198, 192, 182); min-width: 800px; } .itemcontrol { z-index:2; } .btn { border-radius:0px; } div, span, input[type="number"], input[type="text"], textarea, select, h1, h2, label, button[type="roll"], button[type="action"], b { display:flex; } label { padding:0px; margin:0px; } select { margin-bottom:0px; border-radius:0px; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number], input[type=text] { -moz-appearance:textfield; border-radius:0px; } textarea { border:none; width:100%; padding:0px; text-align:justify; border-radius:0px; margin:0px; } .repcontrol { display:flex; width:100%; justify-content:space-between; flex-direction:row-reverse; } .repcontrol > .btn { padding-bottom:0px; border-radius:0px; border:1px solid var(--sombre); padding-top:0px; } div.sheet-autoex { line-height: 1.4em; min-height: 1.4em; cursor: text; text-align: left; position:relative; width:100%; } div.sheet-autoex > span { visibility: hidden; display: block; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre-wrap; text-align: inherit; min-height: inherit; height:100%; word-wrap:anywhere; padding-left:2px; padding-right:2px; } div.sheet-autoex > textarea { display: block; z-index: 1; position: absolute; top: 0; left: 0; height: 100%; width: calc(100% - 4px);; overflow: hidden; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre-wrap; text-align: inherit; min-height: inherit; resize: none; margin:0px; padding-left:2px; padding-right:2px; } div.sheet-autoex > textarea::placeholder { font-family:"Contrail One"; color: #575957da; text-transform: capitalize; font-style: italic; text-align: center; font-size: 95%; font-weight:normal; } div.sheet-autoex22 { min-height:22px; } div.sheet-autoex24 { min-height:24px; } div.sheet-autoex26 { min-height:26px; } div.sheet-autoex28 { min-height:28px; } div.sheet-autoex40 { min-height:40px; } div.sheet-autoex100 { min-height:100px; } div.sheet-container { width:calc(100% - 60px); flex-wrap:wrap; justify-content:space-between; min-height:inherit; background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/TL5.png"), url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/TR5.png"), url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/MR4.png"), url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/BR.png"), url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/BL.png'), url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/TL6-2.png"); background-size: 800px 100px, 800px 100px, 21px 50%, 21px 50%, 800px 30px, 800px; background-repeat: no-repeat, repeat-x, no-repeat, no-repeat, repeat-x, no-repeat; background-position-x: -1px, 800px, 100%, 100%, -1px; background-position-y: 0px, 0px, 100px, 100%, bottom, 100px; padding-right: 35px; padding-bottom: 40px; align-content: flex-start; padding-left: 25px; } div.sheet-container > img { width: 800px; min-width: 800px; position: absolute; top: 172px; left: 29px; z-index: 50; } div.sheet-options { position:absolute; width:calc(100% - 95px); min-width:765px; } div.sheet-options > input[type="hidden"][value="1"] ~ div { display:flex; } div.sheet-options > div { display:none; position:absolute; width:275px; padding:10px; flex-wrap:wrap; justify-content:space-between; border:1px solid black; border-radius:10px; background:var(--encart); margin-left:calc(100% - 310px); margin-top:20px; } div.sheet-options > div > label { width:100%; justify-content:space-between; line-height:25px; font-size:13px; } div.sheet-options > div > label:not(:first-of-type) { margin-top:5px; } div.sheet-options > div > label > span { width:50%; align-items:center; } div.sheet-options > div > label > select { width:50%; text-align:center; border:0px; margin:0px; padding:0px; } div.sheet-options > label { width:24px; height:24px; margin-left:auto; } div.sheet-options > label > input[type="checkbox"] { position:absolute; width:24px; height:24px; opacity:0; z-index:99; } div.sheet-options > label > input[type="checkbox"] ~ span { width:100%; } div.sheet-options > label > input[type="checkbox"] ~ span::before { display:flex; content:"y"; width:100%; height:24px; font-size:25px; font-family:"pictos"; color:var(--clair); opacity:0.5; align-items:center; } div.sheet-options > label > input[type="checkbox"]:checked ~ span::before { opacity:1; } input[type="hidden"].sheet-tab[value="1"] ~ div > div.sheet-tab1, input[type="hidden"].sheet-tab[value="2"] ~ div > div.sheet-tab2, input[type="hidden"].sheet-tab[value="3"] ~ div > div.sheet-tab3, input[type="hidden"].sheet-tab[value="4"] ~ div > div.sheet-tab4, input[type="hidden"].sheet-tab[value="5"] ~ div > div.sheet-tab5 { display:flex; } input[type="hidden"].sheet-tab[value="2"] ~ div { background:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/fond-tab3.png"); padding-right:0px; padding-bottom:0px; } input[type="hidden"].sheet-tab[value="2"] ~ div > div.sheet-options { width:calc(100% - 120px); min-width:740px } input[type="hidden"].sheet-tab[value="2"] ~ div > .sheet-tab2 { background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/fondF2R.png"), url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/fondF2L.png"); background-repeat: no-repeat, no-repeat; background-size: cover, auto 100%; margin-top: 20px; padding-left: 60px; padding-bottom: 10px; padding-right: 20px; background-position-x: 40px, 9px; } span.sheet-headerInitiative { border: 1px solid black; background: white; font-weight: bold; padding-left: 5px; padding-right: 5px; margin-left: -25px; color: black; height:18px; position:absolute; } div.sheet-header { width:100%; justify-content:space-evenly; margin-top:45px; } div.sheet-header > label { width:calc(50% - 85px); justify-content:space-between; background:white; color:RGB(023,082,112); height:30px; align-items:center; padding-left:5px; } div.sheet-header > label > span { width:100px; text-transform:uppercase; } div.sheet-header > label > input[type="text"] { width:calc(100% - 90px); padding:0px; border:0px; } div.sheet-menu { width:100%; justify-content:space-between; margin-top:30px; } div.sheet-menu > label { width:calc((100% / 2) - 10px) ; justify-content:space-between; } div.sheet-menu > label > input[type="radio"] { position:absolute; width:calc((100% / 2) - 70px) ; height:32px; opacity:0; min-width:236.667px; } div.sheet-menu > label > input[type="radio"] ~ span { width:100%; } div.sheet-menu > label > input[type="radio"] ~ span::before { display:flex; content:attr(title); width:100%; height:30px; line-height:30px; justify-content:center; font-variant:small-caps; background:var(--sombre); color:white; border:1px solid black; font-size:14px; } div.sheet-menu > label > input[type="radio"]:checked ~ span::before { background:var(--clair); color:black; } div.sheet-tab1 { display:none; width:100%; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; } div.sheet-tab2, div.sheet-tab3, div.sheet-tab4 { display:none; width:100%; flex-wrap:wrap; justify-content:space-between; min-height:815px; } div.sheet-tab3 { margin-top:20px; } div.sheet-tab1 > div.sheet-col2-2 { width: calc(60% - 30px); flex-wrap:wrap; justify-content:space-between; } div.sheet-tab1 > div.sheet-col2-2 > img { align-self:flex-end; margin-left:auto; margin-right:auto; max-height:100px; margin-bottom:10px; } div.sheet-tab2 > div.sheet-col3-2 { width: calc(50% - 30px); flex-wrap:wrap; justify-content:space-between; align-content:flex-start; } div.sheet-tab2 > div.sheet-col3-1 { width: calc(65% - 10px); flex-wrap:wrap; justify-content:space-between; align-content:flex-start; } div.sheet-tab3 > div.sheet-col4-1, div.sheet-tab3 > div.sheet-col4-2 { width: calc((100% / 2) - 20px); flex-wrap:wrap; justify-content:space-between; align-content:flex-start; } div.sheet-competences, div.sheet-domaines { width: 100%; background-color:RGB(234, 231, 228); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; } div.sheet-competences > h1, div.sheet-domaines > h1 { width: 100%; text-transform: uppercase; color: RGB(023,082,112); font-size: 25px; height: max-content; align-items: center; font-weight: 505; } div.sheet-competences > h1::before, div.sheet-domaines > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/Icone-competences.png'), #175270; width: 40px; height: 50px; background-size: 35px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: right; margin-right: 10px; } div.sheet-competences > div { width:calc(50% - 5px); justify-content:space-between; flex-wrap:wrap; } div.sheet-competences > div > div:first-of-type { width: 95px; align-items:center; padding-top:31px; justify-content: space-between; } div.sheet-competences > div > div:first-of-type > img { height: 40px; opacity: 0.5; width:50px; } div.sheet-competences > div > div:first-of-type > input[type="number"] { padding: 0px; text-align: center; height: 35px; font-size: 20px; width: 40px; border-color:black; color:black; } div.sheet-competences > div > div:first-of-type > button[type="roll"] { position:absolute; padding:0px; border:0px; margin:0px; background:transparent; align-items:center; margin-left:60px; margin-top:70px; } div.sheet-competences > div > div:first-of-type > button[type="roll"]::before { font-size: 35px; color: var(--sombre); font-family: dicefontd12; content: "L"; } div.sheet-competences > div > div:last-of-type { width:calc(100% - 100px); justify-content:space-between; flex-wrap:wrap; } div.sheet-competences > div > div:last-of-type > div { width:100%; justify-content:space-between; flex-wrap:wrap; } div.sheet-competences > div > div:last-of-type > div > div { width:60%; border-top:1px solid black; border-right:1px solid black; border-left:1px solid black; height:30px; align-items:center; } div.sheet-competences > div > div:last-of-type > div:first-of-type > div { width:calc(60% - 5px); padding-left:5px; } div.sheet-competences > div > div:last-of-type > div:first-of-type > div > span:first-of-type { width:calc(100% - 30px); border-right:1px solid black; height:inherit; align-items:center; } div.sheet-competences > div > div:last-of-type > div:last-of-type > div { border-bottom:1px solid black; } div.sheet-competences > div:not(:nth-of-type(1)):not(:nth-of-type(2)) > div:last-of-type > div:first-of-type > div { border-top:0px; } div.sheet-competences > div > div:last-of-type > div:first-of-type > div { background:var(--sombre); color:white; text-transform:uppercase; font-weight:bold; } div.sheet-competences > div > div:last-of-type > div:first-of-type > span { background:var(--sombre); color:white; font-weight:bold; } div.sheet-competences > div > div:last-of-type > div:not(:first-of-type) > div, div.sheet-competences > div > div:last-of-type > div:not(:first-of-type) > span { color:black; font-weight:normal; } div.sheet-competences > div > div:last-of-type > div > div > button[type="roll"] { padding:0px; margin:0px; border:0px; background:transparent; width:calc(100% - 30px); border-right:1px solid black; font-size:14px; height:inherit; align-items:center; } div.sheet-competences > div > div:last-of-type > div > div > button[type="roll"]::before { font-size: 20px; margin-right: 2px; color: var(--sombre); font-family:dicefontd12; content:"L"; } div.sheet-competences > div > div:last-of-type > div > div > span:last-of-type { width:30px; font-size:14px; justify-content:center; font-weight:normal; } div.sheet-competences > div > div:last-of-type > div > span { width:calc((40% / 2) - 9px); border-top:1px solid black; border-right:1px solid black; border-left:1px solid black; border-bottom:0px; height:30px; align-items:center; justify-content:center; font-size:12px; } div.sheet-competences > div > div:last-of-type > div > input[type="number"] { width:calc((40% / 2) - 9px + 2px); border-top:1px solid black; border-right:1px solid black; border-left:1px solid black; border-bottom:0px; height:31px; text-align:center; padding:0px; min-width:45px; } div.sheet-competences > div > div:last-of-type > div:last-of-type > input[type="number"] { border-bottom:1px solid black; } div.sheet-competences > div > div:last-of-type > div:nth-of-type(2n+2) > span, div.sheet-competences > div > div:last-of-type > div:nth-of-type(2n+2) > div, div.sheet-competences > div > div:last-of-type > div:nth-of-type(2n+2) > input[type="number"] { background:var(--clair); } div.sheet-competences > div > div:last-of-type > div:nth-of-type(2n+3) > span, div.sheet-competences > div > div:last-of-type > div:nth-of-type(2n+3) > div, div.sheet-competences > div > div:last-of-type > div:nth-of-type(2n+3) > input[type="number"] { background:white; } div.sheet-domaines { margin-top:10px; } div.sheet-domaines > .repcontainer { width:100%; flex-wrap:wrap; justify-content:space-between; } div.sheet-domaines > .repcontainer > .repitem { width:calc((100% / 3) - 5px); justify-content:space-between; align-items:center; align-content:flex-start; } div.sheet-domaines > .repcontainer > .repitem > input[type="text"] { width: calc(100% - 22px - 22px); border: 0px; padding: 0px; border-bottom: 1px dotted var(--sombre); height: 30px; background: transparent; padding-top: 10px; color:black; min-width:0px; } div.sheet-domaines > .repcontainer > .repitem > button[type="roll"] { width:18px; background:transparent; padding:0px; margin:0px; border:0px; align-self:center; } div.sheet-domaines > .repcontainer > .repitem > button[type="roll"]::before { font-size: 20px; color: var(--sombre); font-family: dicefontd12; content: "L"; } div.sheet-domaines > .repcontainer > .repitem span { font-size:13px; font-variant:small-caps; justify-content:center; border-bottom:1px dotted var(--sombre); height:30px; align-items:flex-end; } div.sheet-domaines > .repcontainer > .repitem select { width: 100px; border:0px; height:30px; padding:0px; text-align:center; background:transparent; border-bottom:1px dotted var(--sombre); padding-top:10px; } div.sheet-domaines > .repcontainer > .repitem select > optgroup { background:var(--sombre); color:white; } div.sheet-domaines > .repcontainer > .repitem select > optgroup > option:nth-of-type(odd) { background:var(--clair); color:black; } div.sheet-domaines > .editmode > .repitem { width:100%; } div.sheet-ressources { width: calc(40%); background-color:RGB(234, 231, 228); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; align-items:flex-start; align-content:flex-start; } div.sheet-ressources > h1 { width: 100%; text-transform: uppercase; color: RGB(023,082,112); font-size: 25px; height: max-content; align-items: center; font-weight: 505; } div.sheet-ressources > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-ressources.png'), #175270; width: 40px; height: 50px; background-size: 25px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-ressources > div { width:100%; justify-content:flex-end; margin-bottom:5px; } div.sheet-ressources > div > span { width:calc((100% / 3) - 10px); color:var(--sombre); font-weight:bold; font-size:15px; text-align:center; } div.sheet-ressources > div:not(:first-of-type) { width:100%; justify-content:space-between; } div.sheet-ressources > div:not(:first-of-type) > div { width:calc((100% / 3) - 10px); } div.sheet-ressources > div:not(:first-of-type) > span { width:calc((100% / 3) - 10px); color:var(--sombre); line-height:30px; font-weight:bold; font-size:15px; } div.sheet-ressources > div > div > input[type="number"] { width:50%; color:var(--sombre); height:30px; border:1px solid black; text-align:center; margin:auto; padding:0px; font-size:16px; } div.sheet-ressources > h2 { width:100%; color:var(--sombre); line-height:30px; justify-content:center; font-size:14px; } div.sheet-ressources > .repcontainer, div.sheet-ressources > .repcontainer > .repitem, div.sheet-ressources > .repcontrol { width:100%; margin:0px; flex-wrap:wrap; } div.sheet-ressources > .repcontainer > .repitem { justify-content:space-between; } div.sheet-ressources > .repcontainer > .repitem > .itemcontrol > .btn { padding-top:2px; padding-bottom:1px; } div.sheet-ressources > .repcontainer:not(:nth-last-of-type(2)) > .repitem:not(:first-of-type) { margin-top:5px; } div.sheet-ressources > .repcontainer:not(:nth-last-of-type(2)) > .repitem > input[type="text"] { width:calc(100% - 67px); height:23px; padding:0px; border:0px; border-bottom:1px dashed var(--sombre); background:transparent; color:black; } div.sheet-ressources > .repcontainer:not(:nth-last-of-type(2)) > .repitem > input[type="number"] { width:40px; height:23px; padding:0px; margin:0px; font-size:14px; border:0px; border-bottom:1px dashed var(--sombre); background:transparent; color:black; } div.sheet-ressources > .repcontainer:not(:nth-last-of-type(2)) > .repitem > button[type="roll"] { width:17px; height:22px; margin:0px; padding:0px; border:0px; background:transparent; border-bottom:1px dashed var(--sombre); } div.sheet-ressources > .repcontainer:not(:nth-last-of-type(2)) > .repitem > button[type="roll"]::before { font-size: 20px; margin-right: 2px; color: var(--sombre); font-family: dicefontd12; content: "L"; } div.sheet-ressources > .repcontainer:not(:nth-last-of-type(2)) > .repitem > div.sheet-autoex > textarea { background:transparent; border-bottom:1px dashed var(--sombre); border-right:1px dashed var(--sombre); border-left:1px dashed var(--sombre); color:black; } div.sheet-ressources > .repcontainer:nth-last-of-type(2) > .repitem > input[type="text"] { width:100%; height:23px; padding:0px; border:0px; border-bottom:1px dashed var(--sombre); background:transparent; color:black; } div.sheet-vie { width: 100%; background-color:RGB(234, 231, 228); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:center; padding-bottom:10px; align-items:flex-start; align-content:flex-start; align-self:flex-start; } div.sheet-vie > h1 { width: 100%; text-transform: uppercase; color: RGB(023,082,112); font-size: 25px; height: max-content; align-items: center; font-weight: 505; } div.sheet-vie > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-lignes-de-vie.png'), #175270; width: 40px; height: 50px; background-size: 25px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-vie > div { width:100%; justify-content:center; } div.sheet-vie > div > input[type="hidden"][value="1"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="2"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="2"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="3"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="3"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="3"] ~ div:first-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="4"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="4"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="4"] ~ div:first-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="4"] ~ div:first-of-type > label:nth-of-type(4) > span::before, div.sheet-vie > div > input[type="hidden"][value="5"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="5"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="5"] ~ div:first-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="5"] ~ div:first-of-type > label:nth-of-type(4) > span::before, div.sheet-vie > div > input[type="hidden"][value="5"] ~ div:last-of-type > label:nth-of-type(5) > span::before, div.sheet-vie > div > input[type="hidden"][value="6"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="6"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="6"] ~ div:first-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="6"] ~ div:first-of-type > label:nth-of-type(4) > span::before, div.sheet-vie > div > input[type="hidden"][value="6"] ~ div:last-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="6"] ~ div:last-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:first-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:first-of-type > label:nth-of-type(4) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:last-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:last-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="7"] ~ div:last-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:first-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:first-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:first-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:first-of-type > label:nth-of-type(4) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:last-of-type > label:nth-of-type(1) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:last-of-type > label:nth-of-type(2) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:last-of-type > label:nth-of-type(3) > span::before, div.sheet-vie > div > input[type="hidden"][value="8"] ~ div:last-of-type > label:nth-of-type(4) > span::before { background:black; } div.sheet-vie > div > div { width:40%; justify-content:space-evenly; margin-top:5px; } div.sheet-vie > div > div > label { width:15px; height:15px; } div.sheet-vie > div > label { position:absolute; margin-right:40%; margin-top:5px; width:15px; height:15px; } div.sheet-vie > div > div > label > input[type="radio"], div.sheet-vie > div > label > input[type="radio"] { position:absolute; width:15px; height:15px; opacity:0; z-index:99; } div.sheet-vie > div > div > label > input[type="radio"] ~ span, div.sheet-vie > div > label > input[type="radio"] ~ span { width:100%; } div.sheet-vie > div > div > label > input[type="radio"] ~ span::before { content:""; width:13px; height:13px; border:1px solid black; border-radius:15px; background:transparent; box-shadow: 2px 2px 1px black; } div.sheet-vie > div:hover > label > input[type="radio"] ~ span::before { opacity:0.5; } div.sheet-vie > div > label > input[type="radio"] ~ span::before { opacity:0; content:"X"; width:13px; height:13px; border:1px solid black; border-radius:15px; background:transparent; box-shadow: 2px 2px 1px black; display: flex; justify-content: center; align-items: center; font-size: 15px; padding-left: 1px; } div.sheet-vie > div > div > label > input[type="radio"]:checked ~ span::before { background:black; } div.sheet-themeAstral { width: calc(50% - 30px); background-color:RGB(208, 197, 188); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; align-items:flex-start; align-content:flex-start; align-self:flex-start; } div.sheet-themeAstral > h1 { width: 100%; text-transform: uppercase; color: #a55233; font-size: 25px; height: max-content; align-items: center; font-weight: 505; font-family:"Uncial Antiqua"; } div.sheet-themeAstral > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-creation-trinite.png'), #a55233; width: 40px; height: 50px; background-size: 35px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-themeAstral > label { width: 100%; justify-content:space-between; } div.sheet-themeAstral > label > span { width: 125px; font-family:"Uncial Antiqua"; height: 30px; font-weight: bold; font-size: 15px; text-transform:uppercase; align-items:flex-end; } div.sheet-themeAstral > label > input[type="text"], div.sheet-themeAstral > label > select { width: calc(100% - 135px); background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; padding-top:10px; font-weight:bold; } div.sheet-themeAstral > div { width:calc(50% - 10px); flex-wrap:wrap; } div.sheet-themeAstral > div > h2 { width: 100%; font-family:"Uncial Antiqua"; height: 30px; font-weight: bold; font-size: 15px; justify-content:center; text-transform:uppercase; margin-top:20px; align-content:flex-end; } div.sheet-themeAstral > div > .repcontainer, div.sheet-themeAstral > div > .repcontainer > .repitem { width:100%; flex-wrap:wrap; } div.sheet-themeAstral > div > .repcontainer > .repitem > input[type="Text"], div.sheet-themeAstral > div > .repcontainer > .repitem > select { width: 100%; text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; height:30px; padding-top:10px; font-weight:bold; } div.sheet-vieAnterieure, div.sheet-experience { width:100%; background-color:RGB(208, 197, 188); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; align-items:flex-start; align-content:flex-start; align-self:flex-start; } div.sheet-experience { margin-top:20px; } div.sheet-vieAnterieure > h1, div.sheet-experience > h1 { width: 100%; text-transform: uppercase; color: #a55233; font-size: 25px; height: max-content; align-items: center; font-weight: 505; font-family:"Uncial Antiqua"; } div.sheet-vieAnterieure > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-trinites-en-guerre.png'), #a55233; width: 40px; height: 50px; background-size: 35px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-experience > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-experience.png'), #a55233; width: 40px; height: 50px; background-size: 35px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-vieAnterieure > input[type="Text"], div.sheet-experience > input[type="Text"] { width: 100%; text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; height:30px; padding-top:10px; margin-left:20px; margin-right:20px; } div.sheet-middle { flex-wrap:wrap; width:100%; justify-content:space-between; align-items:center; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/symbole-trinites.png'); background-size: auto calc(100% - 75px); background-repeat: no-repeat; background-position-x: center; min-height: 320px; } div.sheet-middle > div { width:200px; flex-wrap:wrap; justify-content:space-between; } div.sheet-middle > div:nth-of-type(2) { width:calc(100% - 400px); } div.sheet-middle > div:nth-of-type(4) { align-self: flex-end; margin-left: auto; margin-right: auto; } div.sheet-middle > div > h1 { width: 100%; text-transform: uppercase; color: #a55233; font-size: 25px; height: max-content; align-items: center; font-weight: 505; font-family:"Uncial Antiqua"; justify-content:center; } div.sheet-middle > div > label { width: 100%; justify-content:space-between; } div.sheet-middle > div > label > span { width: 95px; font-size:13px; color:black; font-weight:normal; align-items:flex-end; } div.sheet-middle > div:nth-of-type(1) > label:first-of-type > span, div.sheet-middle > div:nth-of-type(3) > label:first-of-type > span { width: 60px; font-size:13px; color:black; font-weight:normal; align-items:flex-end; } div.sheet-middle > div:last-of-type > label > span { width: max-content; font-size:13px; color:black; font-weight:normal; align-items:flex-end; white-space:nowrap; } div.sheet-middle > div > label > input[type="text"], div.sheet-middle > div > label > input[type="number"], div.sheet-middle > div > label > select { width: calc(100% - 95px); text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; min-width:0px; height:19px; } div.sheet-middle > div > button[type="action"] { display: flex; width: 100%; margin: 0px; padding: 0px; justify-content: center; height: 30px; font-size: 20px; align-items: center; font-weight: bold; box-shadow:3px 3px 1px black; margin-top:5px; transition: all 0.2s; } div.sheet-middle > div > button[type="action"]:hover { box-shadow:none; } div.sheet-middle > div:nth-of-type(1) > button[type="action"] { background: var(--clair); color:black; border-color:var(--sombre); } div.sheet-middle > div:nth-of-type(3) > button[type="action"] { background: var(--sombre); color:white; border-color:var(--clair); } div.sheet-middle > div:nth-of-type(1) > label:first-of-type > input[type="text"], div.sheet-middle > div:nth-of-type(3) > label:first-of-type > input[type="text"], div.sheet-middle > div:nth-of-type(1) > label:first-of-type > select, div.sheet-middle > div:nth-of-type(3) > label:first-of-type > select { width: calc(100% - 60px); text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; min-width:0px; } div.sheet-middle > div:last-of-type > label > input[type="number"] { width: 100%; text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; margin-left:5px; } div.sheet-middle > div:first-of-type > label:nth-of-type(1) > span, div.sheet-middle > div:first-of-type > label:nth-of-type(2) > span { font-weight:bold; } div.sheet-grandLivre { width:100%; background-color:RGB(208, 197, 188); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; align-items:flex-start; align-content:flex-start; align-self:flex-start; } div.sheet-grandLivre > h1 { width: 100%; text-transform: uppercase; color: #a55233; font-size: 25px; height: max-content; align-items: center; font-weight: 505; font-family:"Uncial Antiqua"; } div.sheet-grandLivre > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-grand-livre2.png'), #a55233; width: 40px; height: 50px; background-size: 35px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-grandLivre > div { width: calc(50% - 10px); flex-wrap:wrap; } div.sheet-grandLivre > div > h2 { width: 100%; font-family: "Uncial Antiqua"; height: 30px; font-weight: normal; font-size: 14px; justify-content: center; text-transform: uppercase; align-content: flex-end; } div.sheet-grandLivre > div > div { width: 100%; justify-content:space-between; margin-bottom:4px; } div.sheet-grandLivre > div > div:nth-of-type(1) > span { width: calc(100% - 41px); } div.sheet-grandLivre > div > div:nth-of-type(1) > button[type="action"] { width: 18px; height: 18px; border: 0px; padding: 0px; justify-content: center; margin-top: auto; font-size: 11px; background: var(--sombre); color: white; box-shadow: 3px 3px 1px black; border: 1px solid white; font-weight: bold; } div.sheet-grandLivre > div > div:nth-of-type(1) > button[type="action"]:first-of-type { margin-right:1px; } div.sheet-grandLivre > div > div:nth-of-type(1) > button[type="action"]:hover { box-shadow: none; } div.sheet-grandLivre > div > .repcontainer, div.sheet-grandLivre > div > .repcontainer > .repitem { width:100%; flex-wrap:wrap; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:first-of-type { width: 21px; height: 21px; background: var(--sombre); border: 1px solid black; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:last-of-type { width: 15px; height: 15px; background: white; border: 1px solid black; border-radius:50%; margin-top:auto; margin-bottom:auto; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:first-of-type > input[type="checkbox"] { width: 22px; height: 22px; opacity: 0; position: absolute; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:last-of-type > input[type="checkbox"] { width: 17px; height: 17px; opacity: 0; position: absolute; } div.sheet-grandLivre > div > .repcontainer > .repitem > label > input[type="checkbox"] ~ span { width:100%; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:first-of-type > input[type="checkbox"] ~ span::before { display: flex; content: "+"; width: 100%; height: 21px; justify-content: center; align-items: center; color: white; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:first-of-type > input[type="checkbox"]:checked ~ span::before { content: "-"; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:last-of-type > input[type="checkbox"] ~ span::before { display: flex; content: ""; width: 100%; height: 21px; justify-content: center; color: var(--sombre); font-size:22px; line-height:12px; } div.sheet-grandLivre > div > .repcontainer > .repitem > label:last-of-type > input[type="checkbox"]:checked ~ span::before { content: "✓"; } div.sheet-grandLivre > div > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(2)[value="0"] ~ input[type="text"] { display:flex; } div.sheet-grandLivre > div > .repcontainer > .repitem > select { width: calc(100% - 40px); text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; height:22px; padding-right:23px; } div.sheet-grandLivre > div > .repcontainer > .repitem > input[type="Text"] { display:none; width: 100%; text-align:center; background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; height:22px; } div.sheet-grandLivre > div > .repcontainer > .repitem > input[type="hidden"][value="1"] ~ div { display:flex; } div.sheet-grandLivre > div > .repcontainer > .repitem > div { display:none; width:100%; flex-wrap:wrap; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > label, div.sheet-grandLivre > div > .repcontainer > .repitem > div > div { width:100%; justify-content:space-between; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > label > span { width:50px; font-size:13px; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > label > input[type="text"] { width:calc(100% - 55px); background: transparent; border: 0px; padding: 0px; border-bottom: 1px dashed black; height: 22px; font-size:11px; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > div { flex-wrap:wrap; margin-top:5px; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > div > span { width:100%; justify-content:center; font-weight:bold; font-size:13px; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > div > div > textarea { width:calc(100% - 4px); background: transparent; border: 1px dashed black; padding: 0px; padding-right:1px; padding-left:1px; } div.sheet-grandLivre > div > .repcontainer > .repitem > div > div > div > span { padding: 0px; padding-right:2px; padding-left:2px; } div.sheet-grandLivre > div > .repcontainer > .repitem > .itemcontrol > .btn { padding-top:1px; padding-bottom:1px; } div.sheet-zodiaque { width:100%; background-color:RGB(208, 197, 188); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; align-items:flex-start; align-content:flex-start; align-self:flex-start; } div.sheet-zodiaque > h1 { width: 100%; text-transform: uppercase; color: #a55233; font-size: 25px; height: max-content; align-items: center; font-weight: 505; font-family:"Uncial Antiqua"; } div.sheet-zodiaque > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-zodiaque.png'), #a55233; width: 40px; height: 50px; background-size: 35px; background-repeat: no-repeat; background-position-y: center; margin-left: -10px; background-position-x: center; margin-right: 10px; } div.sheet-zodiaque > span { font-family: "Uncial Antiqua"; height: 30px; font-weight: normal; font-size: 14px; justify-content: center; text-transform: uppercase; align-items: flex-end; } div.sheet-zodiaque > span:first-of-type { width:calc(100% - 400px); } div.sheet-zodiaque > span:not(:first-of-type) { width:80px; } div.sheet-zodiaque > div:nth-of-type(1), div.sheet-zodiaque > div:nth-of-type(2) { flex-wrap:wrap; width:calc(50% - 10px); } div.sheet-zodiaque > div:nth-of-type(1) > div, div.sheet-zodiaque > div:nth-of-type(2) > div { width:100%; justify-content:space-between; } div.sheet-zodiaque > div:nth-of-type(1) > h2, div.sheet-zodiaque > div:nth-of-type(2) > h2 { width: 100%; font-size: 13px; font-weight: normal; justify-content: center; font-family: "Uncial Antiqua"; text-transform: uppercase; height: 30px; } div.sheet-zodiaque > div:nth-of-type(1) > div > span, div.sheet-zodiaque > div:nth-of-type(2) > div > span { width:calc(100% - 41px); } div.sheet-zodiaque > div:nth-of-type(1) > div > button[type="action"], div.sheet-zodiaque > div:nth-of-type(2) > div > button[type="action"] { width: 18px; height: 18px; border: 0px; padding: 0px; justify-content: center; margin-top: auto; font-size: 11px; background: var(--sombre); color: white; box-shadow: 3px 3px 1px black; border: 1px solid white; font-weight: bold; } div.sheet-zodiaque > div:nth-of-type(1) > div > button[type="action"]:first-of-type, div.sheet-zodiaque > div:nth-of-type(2) > div > button[type="action"]:first-of-type { margin-right:1px; } div.sheet-zodiaque > div:nth-of-type(1) > div > button[type="action"]:hover, div.sheet-zodiaque > div:nth-of-type(2) > div > button[type="action"]:hover { box-shadow:none; } div.sheet-zodiaque > .repcontainer, div.sheet-zodiaque > .repcontainer > .repitem { width:100%; flex-wrap:wrap; justify-content:space-between; } div.sheet-zodiaque > .repcontainer > .repitem > .itemcontrol > .btn { padding-top:1px; padding-bottom:1px; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(2) { width:calc(100% - 400px); flex-wrap:wrap; align-content:flex-start; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(2) > label { width: 21px; height: 21px; background: var(--sombre); border: 1px solid black; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(2) > label > input[type="checkbox"] { width: 22px; height: 22px; opacity: 0; position: absolute; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(2) > label > input[type="checkbox"] ~ span { width:100%; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(2) > label > input[type="checkbox"] ~ span::before { display: flex; content: "+"; width: 100%; height: 21px; justify-content: center; align-items: center; color: white; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(2) > label > input[type="checkbox"]:checked ~ span::before { content: "-"; } div.sheet-zodiaque > .repcontainer > .repitem > div > select { width:calc(100% - 24px); height: 22px; background: transparent; padding: 0px; border: 0px; border-bottom: 1px dashed black; color: black; } div.sheet-zodiaque > .repcontainer > .repitem > div > input[type="text"] { display:none; width:calc(100% - 24px); padding:0px; border:0px; border-bottom:1px dashed black; height:22px; background:transparent; font-size:11px; } div.sheet-zodiaque > .repcontainer > .repitem > div > input[type="hidden"][value="0"] ~ input[type="text"] { display:flex; } div.sheet-zodiaque > .repcontainer > .repitem > div > input[type="hidden"][value="0"] ~ select { display:none; } div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="1"] ~ div > select, div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="1"] ~ div > div.sheet-autoex { display:flex; } div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="1"] ~ div > input[type="text"] { display:flex; width:100%; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) { width:400px; flex-wrap:wrap; justify-content:space-between; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > input[type="hidden"][value="1"] ~ label, div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > input[type="hidden"][value="1"] ~ span:nth-of-type(1), div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > input[type="hidden"][value="1"] ~ span:nth-of-type(3) { display:flex; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > input[type="hidden"][value="0"] ~ span:nth-of-type(2), div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > input[type="hidden"][value="0"] ~ span:nth-of-type(4) { display:flex; } div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="0"] ~ div:nth-of-type(3) > input[type="hidden"][value="1"] ~ span:nth-of-type(1), div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="0"] ~ div:nth-of-type(3) > input[type="hidden"][value="0"] ~ span:nth-of-type(2), div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="0"] ~ div:nth-of-type(3) > input[type="hidden"][value="1"] ~ span:nth-of-type(3), div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="0"] ~ div:nth-of-type(3) > input[type="hidden"][value="0"] ~ span:nth-of-type(4), div.sheet-zodiaque > .repcontainer > .repitem > input[type="hidden"][value="0"] ~ div:nth-of-type(3) > label:last-of-type { display:none; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > label { display:none; width:100%; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > label > span { width: 45px; font-size: 13px; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > label > input[type="text"] { width: 150px; background: transparent; border: 0px; padding: 0px; border-bottom: 1px dashed black; height: 22px; font-size: 13px; color: black; } div.sheet-zodiaque > .repcontainer > .repitem > div:nth-of-type(3) > span { display:none; width:100%; font-weight:bold; font-size:13px; font-variant:small-caps; justify-content:center; } div.sheet-zodiaque > .repcontainer > .repitem > div:not(:nth-of-type(2)) > div { width:80px; height:22px; justify-content:center; align-items:center; } div.sheet-zodiaque > .repcontainer > .repitem > div:not(:nth-of-type(2)) > div > label { width:15px; height:15px; } div.sheet-zodiaque > .repcontainer > .repitem > div:not(:nth-of-type(2)) > div > label > input[type="checkbox"] { position: absolute; width: 15px; height: 15px; opacity: 0; z-index: 99; } div.sheet-zodiaque > .repcontainer > .repitem > div:not(:nth-of-type(2)) > div > label > input[type="checkbox"] ~ span { width:100%; } div.sheet-zodiaque > .repcontainer > .repitem > div:not(:nth-of-type(2)) > div > label > input[type="checkbox"] ~ span::before { content: ""; width: 13px; height: 13px; border: 1px solid black; border-radius: 15px; background: transparent; box-shadow: 2px 2px 1px black; } div.sheet-zodiaque > .repcontainer > .repitem > div:not(:nth-of-type(2)) > div > label > input[type="checkbox"]:checked ~ span::before { background:black; } div.sheet-zodiaque > .repcontainer > .repitem > div > div.sheet-autoex { display:none; width:100%; background: transparent; border: 1px dashed black; color: black; height:auto; } div.sheet-zodiaque > .repcontainer > .repitem > div > div.sheet-autoex > textarea { background: transparent; color: black; } div.sheet-lameSoeur { width:calc(35% - 10px); background-color:RGB(208, 197, 188); z-index:0; margin-top:10px; flex-wrap:wrap; padding-left:5px; padding-right:5px; justify-content:space-between; padding-bottom:10px; align-items:flex-start; align-content:flex-start; align-self:flex-start; } div.sheet-lameSoeur > h1 { width: 100%; text-transform: uppercase; color: #a55233; font-size: 20px; height: max-content; align-items: center; font-weight: 505; font-family:"Uncial Antiqua"; } div.sheet-lameSoeur > h1::before { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Trinites/img/icone-lame-soeur.png'), #a55233; width: 35px; height: 50px; background-size: 10px; background-repeat: no-repeat; background-position-y: 140%; margin-left: -10px; background-position-x: center; margin-right: 3px; } div.sheet-lameSoeur > label { width: 100%; justify-content:space-between; } div.sheet-lameSoeur > label > span:first-of-type { width: max-content; font-size:13px; font-weight:normal; align-items:flex-end; font-family: "Uncial Antiqua"; text-transform:uppercase; } div.sheet-lameSoeur > label:nth-of-type(2) > span:last-of-type { width: calc(100% - 95px); font-size:13px; font-weight:normal; align-items:flex-end; justify-content:left; font-family: "Uncial Antiqua"; padding-bottom:2px; } div.sheet-lameSoeur > label:nth-of-type(2) > button[type="roll"], div.sheet-lameSoeur > .repcontainer > .repitem > button[type="roll"] { width: 20px; height:18px; background:transparent; border:0px; padding:0px; margin:0px; margin-top:2px; } div.sheet-lameSoeur > label:nth-of-type(2) > button[type="roll"]::before, div.sheet-lameSoeur > .repcontainer > .repitem > button[type="roll"]::before { font-size: 25px; color: var(--sombre); font-family: dicefontd12; content: "L"; } div.sheet-lameSoeur > label > input[type="text"] { width: calc(100% - 100px); background:transparent; border:0px; padding:0px; border-bottom:1px dashed black; } div.sheet-lameSoeur > h2, div.sheet-lameSoeur > div:nth-of-type(2) > h2 { width: 100%; font-size:13px; font-weight:normal; justify-content:center; font-family: "Uncial Antiqua"; text-transform:uppercase; height:30px; } div.sheet-lameSoeur > div:nth-of-type(2) { width: 100%; z-index:99; padding-left:41px; margin-bottom:4px; } div.sheet-lameSoeur > div:nth-of-type(2) > h1 { width: calc(100% - 41px); } div.sheet-lameSoeur > div:nth-of-type(2) > button[type="action"] { width: 18px; height:18px; border:0px; padding:0px; justify-content:center; margin-top:auto; font-size:11px; background:var(--sombre); color:white; box-shadow: 3px 3px 1px black; border:1px solid white; font-weight:bold; } div.sheet-lameSoeur > div:nth-of-type(2) button[type="action"]:first-of-type { margin-right:1px; } div.sheet-lameSoeur > div:nth-of-type(2) button[type="action"]:hover { box-shadow: none;; } div.sheet-lameSoeur > div.sheet-autoex > textarea { background:transparent; border:1px dashed black; padding-right:1px; padding-left:1px; } div.sheet-lameSoeur > .repcontainer, div.sheet-lameSoeur > .repcontainer > .repitem { width:100%; flex-wrap:wrap; justify-content:space-between; } div.sheet-lameSoeur > .repcontainer > .repitem:not(:first-of-type) { margin-top:2px; } div.sheet-lameSoeur > .repcontainer > .repitem > label { width:21px; height:21px; background:var(--sombre); border:1px solid black; } div.sheet-lameSoeur > .repcontainer > .repitem > label > input[type="checkbox"] { width:22px; height:22px; opacity:0; position:absolute; } div.sheet-lameSoeur > .repcontainer > .repitem > label > input[type="checkbox"] ~ span { width:100%; } div.sheet-lameSoeur > .repcontainer > .repitem > label > input[type="checkbox"] ~ span::before { display:flex; content:"+"; width:100%; height:21px; justify-content:center; align-items:center; color:white; } div.sheet-lameSoeur > .repcontainer > .repitem > label > input[type="checkbox"]:checked ~ span::before { content:"-"; } div.sheet-lameSoeur > .repcontainer > .repitem > select { width:calc(100% - 24px - 20px); height:22px; background:transparent; padding:0px; border:0px; border-bottom:1px dashed black; color:black; } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="text"] { display:none; width:100%; height:22px; background:transparent; padding:0px; border:0px; border-bottom:1px dashed black; color:black; } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(2)[value="0"] ~ input[type="text"] { display:flex; } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(2)[value="0"] ~ select { display:none; } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(2)[value="0"] ~ input[type="text"] { width:calc(100% - 24px - 20px); } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(1)[value="1"] ~ div, div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(1)[value="1"] ~ select { display:flex; } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(1)[value="1"] ~ input[type="text"] { width:calc(100% - 20px); } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(1)[value="1"] ~ select { width:calc(100% - 24px - 20px); } div.sheet-lameSoeur > .repcontainer > .repitem > input[type="hidden"]:nth-of-type(2)[value="0"] ~ select { width:calc(100% - 24px); } div.sheet-lameSoeur > .repcontainer > .repitem > div { width:100%; display:none; flex-wrap:wrap; } div.sheet-lameSoeur > .repcontainer > .repitem > div { width:100%; display:none; flex-wrap:wrap; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label { width: 100%; justify-content: space-between; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label:nth-of-type(1) > span { width: 90px; font-size: 13px; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label:nth-of-type(1) > input[type="text"] { width: calc(100% - 95px); background: transparent; border: 0px; padding: 0px; border-bottom: 1px dashed black; height: 22px; font-size: 11px; color:black; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label:nth-of-type(2) > span { width: 50px; font-size: 13px; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label:nth-of-type(3) > span { width: 65px; font-size: 13px; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label:nth-of-type(2) > input[type="text"] { width: calc(100% - 55px); background: transparent; border: 0px; padding: 0px; border-bottom: 1px dashed black; height: 22px; font-size: 11px; color:black; } div.sheet-lameSoeur > .repcontainer > .repitem > div > label:nth-of-type(3) > input[type="text"] { width: calc(100% - 65px); background: transparent; border: 0px; padding: 0px; border-bottom: 1px dashed black; height: 22px; font-size: 11px; color:black; } div.sheet-lameSoeur > .repcontainer > .repitem > div > div { margin-top:5px; margin-bottom:5px; } div.sheet-lameSoeur > .repcontainer > .repitem > div > div > textarea { background:transparent; border:1px dashed black; color:black; } div.sheet-lameSoeur > .repcontainer > .repitem > .itemcontrol > .btn { padding-top:1px; padding-bottom:1px; } div.sheet-initiative { width:100%; flex-wrap:wrap; justify-content:space-between; background:RGB(234, 231, 228); padding:10px; margin-top:10px; } div.sheet-initiative > div { width:100%; height:22px; align-items:center; justify-content:space-between; } div.sheet-initiative > div:not(:first-of-type) { margin-top:5px; } div.sheet-initiative > div > button[type="roll"] { padding: 0px; margin: 0px; border: 0px; background: transparent; font-size: 14px; height: inherit; align-items: center; color:var(--sombre); font-weight:bold; box-shadow:none; } div.sheet-initiative > div > button[type="roll"]::before { font-size: 20px; margin-right: 2px; color: var(--sombre); font-family: dicefontd12; content: "L"; } div.sheet-initiative > div > label { width:50%; height:22px; } div.sheet-initiative > div > label > input[type="radio"] { position:absolute; width:calc(50% - 25% - 50px); height:22px; opacity:0; } div.sheet-initiative > div > label > input[type="radio"] ~ span { width:100%; } div.sheet-initiative > div > label > input[type="radio"] ~ span::before { display:flex; content:attr(title); width:100%; height:20px; border:1px solid black; color:white; font-weight:bold; justify-content:center; background:var(--sombre); font-size:13px; } div.sheet-initiative > div > label > input[type="radio"]:checked ~ span::before { color:black; background:var(--clair); } div.sheet-conditionInitiative, div.sheet-primesPenalites { width:100%; flex-wrap:wrap; justify-content:space-between; border:1px solid black; margin-top:10px; } div.sheet-conditionInitiative > label, div.sheet-primesPenalites > div { width:100%; justify-content:space-between; min-height:30px; align-items:center; } div.sheet-conditionInitiative > label:not(:last-of-type), div.sheet-primesPenalites > div:not(:last-of-type) { border-bottom:1px solid black; } div.sheet-conditionInitiative > label:nth-of-type(2n+2), div.sheet-primesPenalites > div:nth-of-type(2n+2) { background:var(--white); } div.sheet-conditionInitiative > label:nth-of-type(2n+3), div.sheet-primesPenalites > div:nth-of-type(2n+3) { background:var(--clair); } div.sheet-conditionInitiative > label:first-of-type, div.sheet-primesPenalites > div:first-of-type { background:var(--sombre); } div.sheet-conditionInitiative > label > span, div.sheet-primesPenalites > div > span { justify-content:center; font-size:13px; font-weight:normal; text-align:center; min-height:30px; align-items:center; word-break:break-word; color:black; padding-right:2px; padding-left:2px; } div.sheet-conditionInitiative > label:first-of-type > span, div.sheet-primesPenalites > div:first-of-type > span { color:white; } div.sheet-conditionInitiative > label:first-of-type > span, div.sheet-primesPenalites > div:first-of-type > span { font-weight:505; } div.sheet-conditionInitiative > label > span:first-of-type { width:70%; border-right:1px solid black; } div.sheet-conditionInitiative > label > span:last-of-type, div.sheet-primesPenalites > div > span:nth-of-type(1), div.sheet-primesPenalites > div > span:nth-of-type(3) { width:30%; } div.sheet-tabActions { position: absolute; min-width: 19px; min-height: 200px; margin-top: 147px; z-index: 101; } div.sheet-tabPrimes { position: absolute; min-width: 19px; min-height: 200px; margin-top: 355px; z-index: 100; } div.sheet-tabPenalites { position: absolute; min-width: 19px; min-height: 200px; margin-top: 563px; z-index: 99; } div.sheet-tabInitiative { position: absolute; min-width: 19px; min-height: 200px; margin-top: 771px; z-index: 98; } div.sheet-tabActions > label { width: 100%; height: 207.1px; background: var(--encart); border-top-right-radius: 30px; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; transition:all 0.5s; } div.sheet-tabPrimes > label, div.sheet-tabPenalites > label, div.sheet-tabInitiative > label { width: 100%; height: 207.1px; background: var(--sombre); border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; transition:all 0.5s; } div.sheet-tabInitiative > label { border-bottom-right-radius:30px; } div.sheet-tabActions > label > input[type="checkbox"], div.sheet-tabPrimes > label > input[type="checkbox"], div.sheet-tabPenalites > label > input[type="checkbox"], div.sheet-tabInitiative > label > input[type="checkbox"] { position: absolute; opacity: 0; width: 20px; height: 209.1px; } div.sheet-tabActions > label > span, div.sheet-tabPrimes > label > span, div.sheet-tabPenalites > label > span, div.sheet-tabInitiative > label > span { text-transform: uppercase; justify-content: center; color: white; font-size: 16px; writing-mode: sideways-rl; width: 19px; align-items: center; } div.sheet-tabActions > input[type="hidden"][value="1"] ~ div { width:370px; visibility:visible; opacity:1; z-index:99; } div.sheet-tabInitiative > input[type="hidden"][value="1"] ~ div { width:390px; visibility:visible; opacity:1; z-index:99; } div.sheet-tabPrimes > input[type="hidden"][value="1"] ~ div, div.sheet-tabPenalites > input[type="hidden"][value="1"] ~ div { width:490px; visibility:visible; opacity:1; z-index:99; } div.sheet-tabActions > input[type="hidden"][value="0"] ~ div, div.sheet-tabPrimes > input[type="hidden"][value="0"] ~ div, div.sheet-tabPenalites > input[type="hidden"][value="0"] ~ div, div.sheet-tabInitiative > input[type="hidden"][value="0"] ~ div { width:0px; visibility:hidden; opacity:0; z-index:-99; } div.sheet-tabActions > input[type="hidden"][value="1"] ~ label { margin-left:391px; border-left:1px solid white; } div.sheet-tabPrimes > input[type="hidden"][value="1"] ~ label, div.sheet-tabPenalites > input[type="hidden"][value="1"] ~ label { margin-left:491px; } div.sheet-tabInitiative > input[type="hidden"][value="1"] ~ label { margin-left:391px; } div.sheet-tabActions > div { display:flex; height:187.1px; position:absolute; border-top:1px solid black; border-left:1px solid black; border-bottom:1px solid black; background:var(--encart); padding:10px; flex-wrap:wrap; transition:all 0.5s; overflow:hidden; } div.sheet-tabActions > div > span::before { content: "4"; font-family: "pictos"; color: var(--sombre); margin-right: 5px; } div.sheet-tabActions > div > span:not(:last-of-type) { margin-bottom: 5px; } div.sheet-tabActions > div > span > b { display: contents; color: var(--sombre); } div.sheet-tabPrimes > div, div.sheet-tabPenalites > div { display:flex; height:380px; position:absolute; border:1px solid black; background:white; flex-wrap:wrap; transition:all 0.5s; overflow:hidden; } div.sheet-tabInitiative > div { display:flex; height:270px; position:absolute; border:1px solid black; background:white; flex-wrap:wrap; transition:all 0.5s; overflow:hidden; } div.sheet-tabPrimes > div > div, div.sheet-tabPenalites > div > div { width: 100%; justify-content: space-between; min-height: 30px; align-items: center; } div.sheet-tabPrimes > div > div > span, div.sheet-tabPenalites > div > div > span { justify-content: center; font-size: 13px; font-weight: normal; text-align: center; min-height: 30px; align-items: center; word-break: break-word; color: black; padding-right: 2px; padding-left: 2px; } div.sheet-tabPrimes > div > div > label, div.sheet-tabPenalites > div > div > label { width:100px; margin-right:1px; margin-left:2px; margin-bottom:1px; margin-top:1px; } div.sheet-tabPrimes > div > div > label > input[type="checkbox"], div.sheet-tabPenalites > div > div > label > input[type="checkbox"] { position:absolute; opacity:0; width:100px; height:30px; } div.sheet-tabPrimes > div > div > label > input[type="checkbox"] ~ span, div.sheet-tabPenalites > div > div > label > input[type="checkbox"] ~ span { width:100%; } div.sheet-tabPrimes > div > div > label > input[type="checkbox"] ~ span::before, div.sheet-tabPenalites > div > div > label > input[type="checkbox"] ~ span::before { display:flex; content:"Appliquer"; width:100%; height:28px; border:1px solid black; justify-content:center; font-weight:bold; line-height:28px; font-size:13px; color:black; } div.sheet-tabPrimes > div > div > label > input[type="checkbox"]:checked ~ span::before, div.sheet-tabPenalites > div > div > label > input[type="checkbox"]:checked ~ span::before { background-color:var(--sombre); color:white; } div.sheet-tabPrimes > div > div:first-of-type > span, div.sheet-tabPenalites > div > div:first-of-type > span { color: white; font-weight:505; } div.sheet-tabPrimes > div > div > span:nth-of-type(1), div.sheet-tabPrimes > div > div > span:nth-of-type(3), div.sheet-tabPenalites > div > div > span:nth-of-type(1), div.sheet-tabPenalites > div > div > span:nth-of-type(3) { width:calc(30% - 33.66px); } div.sheet-tabPrimes > div > div > span:nth-of-type(3), div.sheet-tabPenalites > div > div > span:nth-of-type(3) { border-right:1px solid black; height:100%; } div.sheet-tabPrimes > div > div:first-of-type > span:nth-of-type(3), div.sheet-tabPenalites > div > div:first-of-type > span:nth-of-type(3) { border-right:1px solid black; height:100%; } div.sheet-tabPrimes > div > div:first-of-type > label, div.sheet-tabPenalites > div > div:first-of-type > label { width:100px; justify-content:center; height:30px; align-items:center; } div.sheet-tabPrimes > div > div:first-of-type > label > button[type="action"], div.sheet-tabPenalites > div > div:first-of-type > label > button[type="action"] { width: 100px; position: absolute; opacity: 0; height: 30px; margin: 0px; padding: 0px; } div.sheet-tabPrimes > div > div:first-of-type > label > span, div.sheet-tabPenalites > div > div:first-of-type > label > span { font-variant:small-caps; color:white; font-size:11px; font-weight:normal; } div.sheet-tabPrimes > div > div:first-of-type > label > span::before, div.sheet-tabPenalites > div > div:first-of-type > label > span::before { content:"1"; font-family:"pictos"; margin-right:2px; } div.sheet-tabPrimes > div > div > span:nth-of-type(2), div.sheet-tabPenalites > div > div > span:nth-of-type(2) { width: calc(40% - 33.66px - 1px); border-left: 1px solid black; border-right: 1px solid black; min-height: 100%; } div.sheet-tabPrimes > div > div:first-of-type, div.sheet-tabPenalites > div > div:first-of-type { background: var(--sombre); } div.sheet-tabPrimes > div > div:nth-of-type(2n+3), div.sheet-tabPenalites > div > div:nth-of-type(2n+3) { background: var(--clair); } div.sheet-tabPrimes > div > div:nth-of-type(2n) > label > span::before, div.sheet-tabPenalites > div > div:nth-of-type(2n) > label > span::before { background-color: var(--clair); } div.sheet-tabPrimes > div > div:nth-of-type(2n+3) > label > span::before, div.sheet-tabPenalites > div > div:nth-of-type(2n+3) > label > span::before { background-color: white; } div.sheet-tabPrimes > div > div:not(:last-of-type), div.sheet-tabPenalites > div > div:not(:last-of-type) { border-bottom: 1px solid black; } div.sheet-tabInitiative > div > label > span { justify-content: center; font-size: 13px; font-weight: normal; text-align: center; min-height: 30px; align-items: center; word-break: break-word; color: black; padding-right: 2px; padding-left: 2px; } div.sheet-tabInitiative > div > label:first-of-type { background:var(--sombre); } div.sheet-tabInitiative > div > label:first-of-type > span { color:white; font-weight:505; } div.sheet-tabInitiative > div > label > span:nth-of-type(1) { width: 70%; border-right: 1px solid black; } div.sheet-tabInitiative > div > label > span:nth-of-type(2) { width: 30%; } div.sheet-tabInitiative > div > label:nth-of-type(2n+3) { background:var(--clair); } div.sheet-actions { width:100%; flex-wrap:wrap; padding:10px; background:var(--encart); margin-top:10px; } div.sheet-actions > h1 { width:100%; font-size:16px; color:white; border-bottom:1px solid white; text-transform:uppercase; } div.sheet-actions > span { width:100%; } div.sheet-actions > span::before { content:"4"; font-family:"pictos"; color:var(--sombre); margin-right:5px; } div.sheet-actions > span:not(:last-of-type) { margin-bottom:5px; } div.sheet-actions > span > b { display:contents; color:var(--sombre); } div.sheet-primesPenalites > div > span:nth-of-type(1) { font-weight:bold; } div.sheet-primesPenalites > div > span:nth-of-type(2) { width:40%; border-left:1px solid black; border-right:1px solid black; min-height:100%; } div.sheet-penalites { margin-top:10px; } .sheet-rolltemplate-base { --sombre: RGB(023,082,112); --clair: RGB(220, 229, 237); --encart: RGB(198, 192, 182); display:flex; flex-wrap:wrap; width: 100%; justify-content:space-between; background:RGB(234, 231, 228); color:RGB(111,091,115); border:1px solid black; } .sheet-rolltemplate-base > h1 { display:flex; width: 100%; font-weight: 505; font-variant: small-caps; font-size: 20px; align-items: center; justify-content:center; color:white; word-wrap: anywhere; line-height: inherit; min-height: 30px; padding-right: 5px; padding-left: 5px; background:var(--sombre); } .sheet-rolltemplate-base > div { display:flex; width: 100%; justify-content:space-between; height:30px; } .sheet-rolltemplate-base > div:nth-of-type(odd), .sheet-rolltemplate-base > span:nth-of-type(even) { background:var(--clair); } .sheet-rolltemplate-base > div:nth-of-type(even), .sheet-rolltemplate-base > span:nth-of-type(odd) { background:white; } .sheet-rolltemplate-base > span:not(:nth-last-of-type(1)) { border-bottom:1px solid black; } .sheet-rolltemplate-base > div > span:first-of-type { display:flex; width: 70%; font-weight: 505; font-variant: small-caps; font-size: 14px; align-items: center; color:black; padding-left:5px; } .sheet-rolltemplate-base > div > span:last-of-type { display:flex; width: 30%; font-weight: 505; font-variant: small-caps; font-size: 14px; align-items: center; justify-content:space-evenly; color:black; } .sheet-rolltemplate-base > span { display:flex; width: 100%; font-weight: 505; font-size: 14px; align-items: center; justify-content:center; color:black; word-wrap:anywhere; text-align:justify; min-height:30px; } .sheet-rolltemplate-base > div.sheet-primePenalite { width:100%; flex-wrap:wrap; } .sheet-rolltemplate-base > div.sheet-primePenalite { border-top:2px solid black; height:auto; background:white; } .sheet-rolltemplate-base > div.sheet-primePenalite > h2 { display:flex; width:100%; justify-content:center; font-size:16px; color:black; line-height:30px; } .sheet-rolltemplate-base > div.sheet-primePenalite > span { display:inline; width:100%; justify-content:left; border-top:1px solid black; font-weight:normal; background:var(--clair); padding-right:2px; } .sheet-rolltemplate-base > span.sheet-paragraphe { justify-content:left; border-top:1px solid black; font-weight:normal; } .sheet-rolltemplate-base .inlinerollresult { background-color: transparent; border: none; padding:0px; } .sheet-rolltemplate-base .inlinerollresult.fullcrit { border: none; color:green; } .sheet-rolltemplate-base .inlinerollresult.fullfail { border: none; color:red; } .sheet-rolltemplate-base .inlinerollresult.importantroll { border: none; color:blue; }