.diff {
    display:inline-block;
}

.result {
    display:inline-block;
    font-size:120%;
    font-weight:700;
}

.roll {
    box-shadow:-1px 1px 3px 2px #888;
    -webkit-box-shadow:-1px 1px 5px 2px #888;
    margin-top:5px;
    width:230px;
    margin-left:3px;
    margin-bottom:8px;
    background-color:#fff;
    font-size:120%;
}

.text_row div {
    display:inline-block;
}

.text_row {
    text-align:left;
    margin:6px 1px;
}

.roll_button:active {
    background-image:url(/images/roll.png)!important;
}

.nav-tabs>li>a {
    background-color:#d0d0d0;
    color:#3e3e3e;
}

.nav-tabs>li {
    cursor:pointer;
}

.nav-tabs>li:not(.active)>a {
    z-index:-1;
}

.roll_button {
    background:rgba(0,72,255,0.33) url(/images/roll.png) no-repeat top left;
    width:23px;
    height:23px;
    background-size:94%;
}

#save_btn {
    background:#eee url(/images/save.png) no-repeat top left;
    height:1.8em;
    background-size:1.7em;
}

.ck.ck-editor {
    min-width:500px!important;
}

.ck-editor__editable {
    min-height:500px!important;
}

#notes {
    height:700px;
    width:500px;
    resize:both;
    overflow:scroll;
}

td,th {
    padding:1px;
}

.Label-name {
    width:70px;
    text-align:right;
}

#combat_stats .label-name {
    width:55px;
}

.stat_table .label-name {
    text-align:center;
    width:auto!important;
    padding-right:5px;
}

.spacer {
    width:10px;
    display:inline-block;
}

.flexrow {
    display:flex;
    align-items:flex-start;
}

.flexcol {
    display:flex;
    align-items:flex-start;
    flex-direction:column;
}

.stat_table th {
    padding:0 5px;
}

.header {
    width:calc(100% + 5px);
    border-width:1px;
    margin-top:-3px;
    border-bottom-style:solid;
    margin-left:-5px;
    text-align:left;
    display:flex;
    min-height:1.5em;
}

.sub-header {
    height:100%;
    border-left-style:solid;
    border-width:1px;
    margin-left:10px;
    padding-left:10px;
    font-weight:400;
    padding-top:.25em;
    padding-bottom:.25em;
}

.stat_table tr {
    text-align:center;
}

.form-control.statbox {
    width:45px;
    display:inline-block;
    height:2.2em;
    padding-right:2px;
    padding-left:8px;
}

select.form-control {
    display:inline-block;
    height:2.2em;
    width:auto;
    padding-left:6px;
}

.checkbox-inline {
    margin-right:3px!important;
}

.statbox {
    width:45px;
}

#output {
    min-width:242px;
    max-width:251px;
    overflow-y:auto;
    overflow-x:hidden;
    display:inline-block;
    background-color: #393939;
    box-shadow:0 0 6px 2px #000;
    margin-right:10px;
}

#chr_sheet {
    flex:1;
    margin-top:5px;
}

div {
    text-align:center;
    line-height:120%;
}

.success {
    font-size:140%!important;
    color:green!important;
}

.fail {
    font-size:140%!important;
    color:red!important;
}

.dice {
    display:inline-block;
    box-shadow:0 0 3px 0 blue inset,0 0 7px 2px RGBA(0,0,0,0.7);
    -webkit-box-shadow:0 0 5px -1px blue inset,0 0 7px 2px RGBA(0,0,0,0.7);
    min-width:20px;
    line-height:120%;
    border-radius:4px;
}

.dice.diff {
    box-shadow:0 0 3px 1px orange inset,0 0 7px 2px RGBA(0,0,0,0.7);
    -webkit-box-shadow:0 0 5px 0 orange inset,0 0 7px 2px RGBA(0,0,0,0.7);
}

.double.diff {
    box-shadow:0 0 3px 2px orange inset,0 0 7px 2px RGBA(0,0,0,0.7);
    -webkit-box-shadow:0 0 5px 1px orange inset,0 0 7px 2px RGBA(0,0,0,0.7);
}

.double {
    box-shadow:0 0 3px 1px blue inset,0 0 7px 2px RGBA(0,0,0,0.7);
    -webkit-box-shadow:0 0 5px 1px blue inset,0 0 7px 2px RGBA(0,0,0,0.7);
    font-weight:700;
}

.add {
    font-weight:700;
}

.plus {
    color:green;
}

.minus {
    color:red;
}

#wrapper {
    display:flex;
    height:calc(99% - 1.5em);
    width:-moz-fit-content;
    width:-webkit-fit-content;
}

.arm_pval,.def_mod {
    width:100%;
    min-height:1em;
}

.arm_name {
    width:15em;
}

.weap_ndice {
    margin-left:5px;
}

.section {
    margin:9px;
    box-shadow:0 0 5px 0;
    width:-moz-fit-content;
    width:-webkit-fit-content;
    padding:5px;
}

#header {
    background-color:#fff;
    box-shadow:0 0 5px 0;
    width:-moz-fit-content;
    width:-webkit-fit-content;
    border-radius:.1em;
    padding:7px 10px;
    margin:8px;
}

.inline-text {
    padding:2px 5px;
    display:inline-block;
    box-shadow:0 0 2px 0;
    background-color:#FDFDFD;
    border-radius:.1em;
}

#top {
    margin-right: 0;
    text-align:left;
}

.dib {
    display:inline-block;
}

.dn {
    display:none!important;
}

#stunt_results {
    border-top-style:solid;
    margin-top:6px;
    border-top-width:1px;
    width:500px;
}

.stunt_toggle {
    display:inline-block;
    border-style:solid;
    border-width:1px;
    border-radius:6px;
    margin:4px;
    padding:1px 3px;
    box-shadow:2px 2px 4px 0;
    cursor:pointer;
}

.stunt_toggle.down {
    background-color:#0f0;
    box-shadow:1px 1px 4px 0 inset;
}

.stunt_toggle.disabled {
    background-color:#aaa;
    box-shadow:0 0;
    cursor:default;
}

.stunt_list {
    width:500px;
    display:none;
}

#stunt_results {
    display:none;
}

#stunt_results.active {
    display:block;
}

#spell_diff,#spell_cost {
    margin-left:3px;
}

#target_opt {
    width:3em;
}

.stunt_list.active {
    display:inline-block!important;
}

#button_row {
    text-align:left!important;
    margin-top:10px;
    margin-bottom:13px;
}

.template_row {
    display:none;
}

.stat_roll {
    margin:0 2px;
}

#main_content {
    background-color: #393939;
    box-shadow:0 0 5px 2px #000;
    width:-webkit-fit-content;
    height:-webkit-fit-content;
    min-width:500px;
    min-height:500px;
}

#tabs {
    text-align:left;
}

.active.tab {
    background-color:#fff;
    box-shadow:0 -4px 5px 1px rgba(0,0,0,.3),-3px 1px 1px -2px rgba(0,0,0,.3);
    border-style:none;
}

.tab {
    border-width:1px;
    border-style:solid;
    padding:6px;
    display:inline-block;
    border-bottom-style:none;
    cursor:pointer;
    position:relative;
    padding-bottom:1px;
    border-radius:.3em .3em 0 0;
}

.untrained {
    color:orange;
}

body {
    background-color:#ffffed;
}

.item_name {
    width:150px;
}

.item_description {
    width:388px;
    overflow-x:hidden;
}

.item_quantity {
    width:50px;
    padding-right:5px;
}

.dmg_col input {
    width:30px;
}

.left {
    text-align:left;
    padding-left:6px;
}

#notes_box {
    width:500px;
    height:650px;
    margin:5px;
}

.item_avail {
    margin-right:72%;
}

.weap_name {
    width:100px;
}

.weap_ammo {
    width:90px;
}

.weap_clip {
    width:40px;
}

.weap_type {
    width:90px;
}

.weap_dmg_type {
    width:80px;
}

.weap_hands {
    width:120px;
}

#money {
    width:60px;
}

#skill_scroll {
    overflow-y:auto;
    resize:vertical;
    height:400px;
}

#item_scroll {
    overflow-y:auto;
    overflow-x:hidden;
    resize:vertical;
    height:394px;
}

.button-div {
    margin-left:auto;
    margin-bottom:.15em;
}

.roll.cast {
    background-color:#d5ffd5;
}

.roll.uncast {
    background-color:#fdd;
}

.label-inline {
    padding:2px 7px;
}

input[type="checkbox"]:checked ~ .favorite:after {
    content:"\2605";
    font-size:200%;
    color:#ffd700;
}

input[type="checkbox"]:not(:checked) ~ .favorite:after {
    content:"\2606";
    font-size:200%;
}

th {
    text-align:center;
}

.section-title {
    font-weight:700;
    text-align:left;
    padding:.25em 1em;
}

.section-title.button-title {
    padding-top:.75em;
}

#header_health,#header_mana {
    position:relative;
}

.pos-rel {
    position:relative;
}

.background {
    width:100%;
    left:0;
    position:absolute;
    top:0;
    height:100%;
    border-radius:.1em;
}

body {
    background-color:#3E3E3E;
    color:#D9D9D9!important;
}

.section {
    background-color:#262626;
}

td,th {
    color:#D9D9D9;
}

#header {
    background-color:#2B2B2B;
    box-shadow:0 0 5px 2px #000;
}

.inline-text {
    color:#fff;
    background-color:#1E1E1E;
    box-shadow:0 0 2px 2px #000;
}

.section {
    box-shadow:0 0 7px 1px #000;
}

.roll {
    background-color: #000; /*#2D2D2D;*/
    color:#FFF;
    box-shadow:-1px 1px 7px 1px #000;
    margin-left:4px;
}

.dice {
    background-color:#000;
    box-shadow:0 0 5px 1px #3636FF inset,0 0 7px 2px RGBA(0,0,0,0.7);
}

.dice.double:not(.diff) {
    box-shadow:0 0 5px 2px #3636FF inset,0 0 7px 2px RGBA(0,0,0,0.7);
}

.plus {
    color:#00CE00;
}

.success {
    color:#12FF31!important;
}

.fail {
    color:#FB2B2B!important;
}

input[type="number"],input[type="checkbox"],input[type="text"],textarea {
    background-color:#000 !important;
    color:#fff !important;
    border-color:RGBA(255,255,255,0.35) !important;
}

select,option {
    background-color:#000!important;
    color:#fff!important;
}

.roll_button {
    background:rgba(119,169,255,.64) url(/images/roll.png) no-repeat top left!important;
    background-size:94%!important;
}

.stunt_toggle {
    box-shadow:2px 2px 5px 3px #000;
    border-color:#404040;
}

.stunt_toggle.disabled {
    color:#000;
    box-shadow:0 0;
}

.stunt_toggle.down {
    background-color:#074A00;
    box-shadow:1px 1px 3px 1px inset #000;
}

.roll.cast {
    background-color:#040;
}

.roll.uncast {
    background-color:#4d0000;
}

.btn-default {
    color:#fff;
    background-color: #00143C;
    border-color:#212528;
}

.btn-default:hover {
    color:#fff;
    background-color:#1e1e1e;
    border-color:#535353;
}

.btn-default:active,
.btn-default:focus {
    color:#fff;
    background-color:#1e1e1e;
    border-color:#aaa;
}

.roll_button:hover {
    background-color:gray!important;
}

.nav-tabs > li.active > a,.nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:hover {
    color:#ececec;
    cursor:default;
    background-color: #393939;
    border:1px solid #0f0f0f;
    border-bottom-color:#000;
    border-bottom-color:transparent;
}

.nav-tabs > li > a {
    background-color:#111;
    color:#ececec;
    border-color:#0f0f0f;
}

.nav-tabs {
    border-bottom:1px solid #393939;
}

.ck.ck-toolbar {
    background-color:#222;
    color:#fff!important;
}

.ck.ck-toolbar svg {
    color:#fff!important;
}

.ck.ck-toolbar .ck-button__label,.ck.ck-toolbar .ck-button {
    color:#fff!important;
    background-color:#222!important;
}

.ck.ck-toolbar .ck-button:hover .ck-button__label,.ck.ck-toolbar .ck-button:hover {
    background-color:#000!important;
}

.ck.ck-toolbar button:hover {
    background-color:#000!important;
}

.ck-editor__editable {
    background-color:#090909!important;
}

#save_btn {
    background-color:#0B0B0B;
    margin-left:2px;
}