@media print {
    .ScreenRoot {
        display: none;
    }
}

@media screen {
    .PrintRoot {
        display: none;
    }
}

Body {
    overflow-x: hidden;
    font-size: 24px;

    font-family: 'Segoe UI';
}

Input {
    font-size: 24px;
}

TextArea {
    font-size: 24px;
    width: 100%;
}

Select {
    font-size: 24px;
}

td {
    font-size: 24px;
}

a {
    font-size: 24px;
}

.BodyArea {
    text-align: center;
}

.Container {
    margin-top: 20px;
}

.TextInput {
    border: 1px solid black;
}

.CheckboxLabel {
    display: inline-block;
}

.Checkbox {
    height: 24px;
    width: 24px;
    border: 1px solid #51DCFF;
    -webkit-appearance: button;
    outline: none;
    font-size: 22px;
    vertical-align: text-bottom;
}

.Checkbox::focused {
    outline: none;
}


.SliderRoot {
    display: inline-block;
    margin-left: 40px;
    margin-right: auto;
    margin-top: 40px;
    width: 400px;
}

.SliderContainer {
    width: 400px;
    height: 40px;
    border: 1px solid black;
}
.Slider {
    width: 20px;
    height: 20px;
    border: 8px solid black;
    border-radius: 50%;
}

.ValueHover {
    position: absolute;
    margin-top: 10px;
}

.Button {
    display: inline;
    border: none;
    outline: none;
    
    background: #51DCFF;
    color: white;
    cursor: pointer;
    height: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

.Button.SmallButton {
    display: inline-block;
    height: 28px;
    margin-left: 20px;
}

.Button:hover {
    background: blue;
}

.Button:active {
    border: none;
    outline: none;
}

.Button:focused {
    border: none;
    outline: none;
}

.WeatherTable {
    border-spacing: 20px;
}

.WeatherCell {
    border-bottom: solid 1px lightgrey;
    width: 900px;
}

.WeatherCell:hover {
    background: skyblue;
}

.TitleText {
    font-size: 40px;
    font-weight: bold;
}

.SubTitleText {
    font-size: 32px;
}

.DescriptionText {
    margin-top: 40px;
}

.ExpandedExpando {
    text-align: left;
}

.CarouselArrow {
    position: absolute;
    width: 55px;
    height: 45px;

    margin-top: -40px;
    border: 1px solid #51DCFF;

    cursor: pointer;

    padding-top: 10px;
}



.CarouselRoot {
    width: 100%;
    overflow: hidden;
}

.CarouselCard {
    position: absolute;
    text-align: left;
    margin-top: 20px;
    border-right: 1px solid grey;
    transition: transform 1s, opacity 1.5s;
    min-height: 300px;
}

.CarouselCardInterior {
    margin-left: auto;
    margin-right: auto;
}

.MenuRoot {
    text-align: left;
}

.MenuButton {
    text-align: center;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border: 1px solid #51DCFF;
    padding: 4px;
    cursor: pointer;
}

.MenuMenu {
    position: absolute;
    border: 1px solid #51DCFF;
    padding: 10px;
    cursor: pointer;
    margin-top: -2px;
    background-color: white;
}

.MenuItem {
    border-bottom: 1px solid grey;
    margin-top: 10px;
}

.NavNav {
    margin-bottom: 20px;
}

.NavItem {
    display: inline-block;
    
    border-bottom: 1px solid #51DCFF;

    margin-right: 10px;
    margin-bottom: 10px;

    cursor: pointer;

    color: black;
    text-decoration: none;
}

.CharacterElement {
    border: 1px solid lightgrey;
    border-radius: 40px;
    display: inline-block;
    margin: 10px;
    padding: 20px;
    text-align: left;
    max-width: 350px;
    vertical-align: top;
}

.CharacterDead {
    background-color: red;
}

.CharacterNamePlate {
    font-weight: bold;
    margin-bottom: 20px;
}

.CharacterDropTarget {
    min-height: 75px;
}

.FamilyElement {
    text-align: left;
}

.SurnameElement {
    font-weight: bold;
    margin-left: 20px;
    margin-top: 30px;
}

.BloodlineElement {
    margin-left: 20px;
}

.FeudElement {
    margin-left:20px;
}

.SelectListRoot {
    margin-top: 30px;
}

.CommunityButton { 
    display: inline-block;
    margin-left: 20px;
}

.NameDiv {
    margin-top: 30px;
}

.SeasonJump {
    color: #51DCFF;
    text-decoration: none;
}

.SeasonJump:visited {
    color: #51DCFF;
}

.BreakHolder {
    position: fixed;
    right: 10;
    bottom: 5%;
}

.HiddenText {
    position: absolute;
    top: -500px;
    color: white;
    background: white;
}

.HouseholdElement {
    border: 1px solid black;
    margin-top: 20px;
}

.HouseholdTitleElement {
    margin-top: 10px;
    margin-left: 20px;
}

.NeedsHanger {
    margin-bottom: 20px;
}

.SupernaturalTable {
    margin-top: 40px;
    text-align: left;
}

.CalendarFormWrapper, .DaysInAWeek, .MonthsText {
    margin-top: 40px;
}

.CalendarDay {
    display: inline-block;
    border: 1px solid black;

    height: 400px;
    width: 400px;
    max-height: 400px;
    max-width: 400px;
    overflow: hidden;
}

.MonthTitle {
    font-weight: bold;
    font-size: 32px;
}

.CalendarInput {
    display: inline-block;
    margin-left: 20px;
}

.ExtraLeftSpace {
    margin-left: 40px;
}

.EncounterDiv, .ItemDiv {
    margin-top: 20px;
}

.UpdateContainer {
    margin-top: 20px;
    text-align: left;
}

.CityContainer {
    text-align: left;
}

.CityName {
    display: inline-block;
    font-weight: bold;
}

.CityDistricts {
    margin-top: 15px;
    font-weight: bold;
}

.CityDistrictDescription {
    margin-left: 20px;
}

.CityCanvas {
    display: block;
    margin-top: 10px;
}

.Button.GenerateCityButton {
    display: inline-block;
}

.MenuRoot.SavedCitiesMenu {
    display: inline-block;
    margin-left: 20px;
}

.MenuButton.SavedCitiesMenu {
    font-size: 24px;
    width: 200px;
    height: 35px;
}

.Button.CityButton {
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 20px;
}

.GeographyMenuLabel {
    margin-top: 20px;
}

.ItemGeneratorButton {
    margin-top: 40px;
}

.DropTarget {
    border: 1px solid grey;
    color: grey;
    width: 200px;
    display: inline-block;
}

.DropTarget.Highlight {
    border: 1px solid black;
    width: 200px;
    color: black;
}

.HiddenImage {
    position: fixed;
    top: -10000;
    left: -10000;
}

.PrintImage {
    border: 1px black;
    border-style: dashed;
}

.ScrollContainer {
    overflow-x: auto;
    overflow-y: auto;
}

.PageBreak {
    clear: both;
    page-break-before: always;
}

.CharacterPrinter {
    display: inline-block;
}

.SelectorContainer {
    margin-bottom: 10px;
}

.CharacterCropper {
    display: inline-block;
}

.SizeSelector {
    display: inline-block;
}

canvas {
    border: 1px dashed black;
}

.MiniContainer, .TokenContainer {
    border: 1px dashed black;
    margin: 10px;
    display: inline-block;
    padding: 5px;
}

.MiniContainer {
    padding-bottom: 50px;
    padding-top: 50px;
}

.MiniContainer hr {
    margin: 2px;
}

.FlippedImage {
    display: block;
    transform: scaleY(-1);
}

.PrintImage {
    display: block;
}

.DiceInputContainer {
    display: inline-flex;
    vertical-align: top;
}

.DiceInput {
    display: inline-flex;
    max-width: 50;
    margin-left: 10px;
    margin-right: 10px;
}

li {
    text-align: left;
}