/* Import Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Noticia+Text');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css?family=Rubik');

/* Basic Body and HTML Styles */
html {
    position: relative;
    min-height: 100%;
}

table.Selection,table.Selection  td,table.Selection th{
 border: none !important;
}

body {
    background-color: #f0f2f5;
    color: #E8E8E8;
    font-family: 'Lato';
}

/* Typography */
.calculator h2 { /* Changed .calculator to .calculator */
    font-family: 'Roboto Slab';
    text-align: center;
    color: #E8E8E8;
}

.calculator h3 { /* Changed .calculator to .calculator */
    font-family: 'Noticia Text';
    text-align: left;
    color: #beccda;
    font-weight: 600;
}

.calculator h1, .calculator h4, .calculator h5 { /* Changed .calculator to .calculator */
    font-family: 'Noticia Text';
    text-align: left;
    color: #E8E8E8;
    font-weight: 600;
}

.calculator h6 { /* Changed .calculator to .calculator */
    font-family: 'Lato';
    text-align: center;
    color: #C4C4C4;
    font-weight: 500;
    margin: 10px 10px 0px 10px;
}

.calculator p { /* Changed .calculator to .calculator */
    font-family: 'Lato';
    text-align: left;
    color: #E8E8E8;
}

.calculator dd { /* Changed .calculator to .calculator */
    font-family: 'Roboto Slab';
    font-size: .9em;
}

.calculator dt { /* Changed .calculator to .calculator */
    font-family: 'Source Sans Pro';
    margin: 2px 0px;
    letter-spacing: 1px;
}

.calculator a { /* Changed .calculator to .calculator */
    color: #86A0BA;
}

.calculator th { /* Changed .calculator to .calculator */
    font-family: 'Source Sans Pro';
    font-weight: normal!important;
}

/* Form Elements */
.calculator input { /* Changed .calculator to .calculator */
    text-align: center;
}

.calculator select:hover { /* Changed .calculator to .calculator */
  background-color: #29313d;
}

.calculator input, .calculator select { /* Changed .calculator to .calculator */
    background-color: #333d4d;
    color: #E8E8E8;
    border-radius: 4px;
}

/* Specific Heading Styles */
.calculator .traits h3,
.calculator .traits h4,
.calculator .rawDiv h3,
.calculator .houseRules h3,
.calculator .points h3 { /* Changed .calculator to .calculator */
    letter-spacing: 1px;
}

/* Tooltip Styles */
.ui-tooltip {
    text-align: center;
    box-shadow: none!important;
    padding: 0px;
    width: 160px;
}

.ui-tooltip-content {
    position: relative;
    font-family: 'Roboto Slab';
    font-size: 14px;
    font-weight: 400;
    color: #E8E8E8;
    background-color: #47566b;
    margin: -10px;
    border-width: 1px!important;
    border-radius: 5px!important;
    border-color: #beccda!important;
    border-style: solid!important;
    padding: 6px 0px;
}

.ui-tooltip-content::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #beccda transparent!important;
}

/* calculator Styles */ 
.calculator { /* Main calculator, was .calculator */
    background-color: #52637a;
    padding: 20px;
}

.calculator .Title { /* Changed .calculator to .calculator */
    text-align: center;
    margin-top: 0px;
}

.calculator .Total { /* Changed .calculator to .calculator */
    background-color: #64768C!important;
}

.calculator .selection, .calculator .TypesTable { /* Changed .calculator to .calculator */
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
}

.calculator .attributetop > th { /* Changed .calculator to .calculator */
    border-bottom: 2px solid #E8E8E8;
}

.calculator .attributeodd > td,
.calculator .attributeeven > td,
.calculator .sanityRow > td,
.calculator .honorRow > td { /* Changed .calculator to .calculator */
    border-bottom: 1px dotted #E8E8E8;
}

.calculator .TypesTable > thead > tr > th { /* Changed .calculator to .calculator */
    border-bottom: 2px solid #E8E8E8;
}

.calculator .TypesTable > tbody > tr > td { /* Changed .calculator to .calculator */
    border-bottom: 1px dotted #E8E8E8;
}

.calculator .traits,
.calculator .raw,
.calculator .stats,
.calculator .houseinfo,
.calculator .houseCenter,
.calculator .nav { /* Changed .calculator to .calculator */
    background-color: #47566b;
    padding: 10px 20px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #12263B;
    color: #E8E8E8;
}
.calculator .points{
    color: #E8E8E8; 
}

.calculator .calcHead { /* Changed .calculator to .calculator */
    display: inline-block;
    padding-right: 32px;
    margin: 0px;
    color: #beccda;
    font-family: 'Roboto Slab';
    font-weight: 400;
    text-align: left;
}

.calculator .rawHead, 
.calculator .houseHead,
.calculator .menuHead { /* Changed .calculator to .calculator */
    display: inline-block;
    padding-right: 32px;
    margin: 0px;
    color: #E8E8E8;
    font-family: 'Roboto Slab';
    font-weight: 400;
    text-align: left;
}


.calculator .saveHead { /* Changed .calculator to .calculator */
    margin: 0px;
    color: #E8E8E8;
    font-family: 'Roboto Slab';
    font-weight: 400;
    text-align: right;
}

/* Hover Effects for Headings */
.calculator .saveHead:hover,
.calculator .rawHead:hover,
.calculator .houseHead:hover,
.calculator .calcHead:hover { /* Changed .calculator to .calculator */
    color: #beccda!important;
    transition: color 0.3s ease;
}

.calculator .nav input,
.calculator .nav span { /* Changed .calculator to .calculator */
    display: none;
}

.calculator .nav::after { /* Changed .calculator to .calculator */
    content: "";
    clear: both;
    display: table;
}

.calculator .navOne,
.calculator .navTwo,
.calculator .navThree { /* Changed .calculator to .calculator */
    text-align: left;
    float: left;
}

.calculator .navFour { /* Changed .calculator to .calculator */
    text-align: right;
    float: right;
}

.calculator .navFive { /* Changed .calculator to .calculator */
    display: none; 
}

.calculator .raceHead { /* Changed .calculator to .calculator */
    margin: 0px;
}

/* List Styles */
.calculator .traits > div > dl > dd,
.calculator .Types > dl > dd,
.calculator .raw > dd { /* Changed .calculator to .calculator */
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
}

.calculator .traits > div > dl > dd > span,
.calculator .Types > dl > dd > span,
.calculator .raw > dd > span { /* Changed .calculator to .calculator */
    margin-left: -6px;
}

/* Firefox-specific Fix */
@-moz-document url-prefix() {
    .calculator .traits > div > dl > dd > span,
    .calculator .Types > dl > dd > span,
    .calculator .raw > dd > span { /* Changed .calculator to .calculator */
        margin-left: 2px;
  }
}

.calculator .attributeodd > td,
.calculator .sanityRow > td { /* Changed .calculator to .calculator */
    background-color: #52637a; 
}

.calculator .Selection { /* Changed .calculator to .calculator */
    width: 70%;
    margin-right: 30%;
    color: white;
}

.calculator .rawDiv,
.calculator .houseRules { /* Changed .calculator to .calculator */
    height: 100%;
    width: 100%;
    display: none;
}

/* Input Number Styles and Fixes */
.calculator .inputCont > table > tbody > tr > td > input[type=number]::-webkit-outer-spin-button,
.calculator .inputCont > table > tbody > tr > td > input[type=number]::-webkit-inner-spin-button,
.calculator .customCost > tbody > tr > td > input[type=number]::-webkit-outer-spin-button,
.calculator .customCost > tbody > tr > td > input[type=number]::-webkit-inner-spin-button { /* Changed .calculator to .calculator */
    -webkit-appearance: none;
    margin: 0;
}

.calculator .inputCont > table > tbody > tr > td > input[type=number],
.calculator .customCost > tbody > tr > td > input[type=number] { /* Changed .calculator to .calculator */
    height: 30px;
    -moz-appearance: textfield;
    width: 46px;
    position: relative;
    padding: 0px;
    margin: 0px;
    font-size: 1.1em;
}

.calculator .inputCont > table > tbody > tr > td,
.calculator .selection > tbody > tr > td,
.calculator .customCost > tbody > tr > td { /* Changed .calculator to .calculator */
    margin: 0px;
    padding: 0px;
    position: relative;
    font-size: 1.1em;
}

/* Button Styles */
.calculator .Reset, 
.calculator .FullReset { /* Changed .calculator to .calculator */
    margin: 2px;
    padding: 6px 12px;
    border-style: outset;
    border-width: 1px;
    border-color: #E8E8E8;
    font-weight: 500;
    border-radius: 4px;
}

.calculator .Reset:hover,
.calculator .FullReset:hover { /* Changed .calculator to .calculator */
  background-color: #29313d;
}

.calculator .Reset:active,
.calculator .FullReset:active { /* Changed .calculator to .calculator */
  background-color: #1f252e; 
}

.calculator .inputCont { /* Changed .calculator to .calculator */
    padding: 0px;
    margin: 0 auto;
    width: 72px;
    text-align: center;
}

/* Up/Down Arrow Button Styles */
.calculator .updown { /* Changed .calculator to .calculator */
    padding: 0px;
    margin: 0px;
    display: inline-block;
    position: relative;
}

.calculator .downup { /* Changed .calculator to .calculator */
    padding: 0px;
    margin: 0px;
    position: relative;
    display: inline-block;
}

.calculator .downup td:nth-child(3n+2) { /* Changed .calculator to .calculator */
    width: 50px;
}

.calculator .updownCont { /* Changed .calculator to .calculator */
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 16px;
    height: 30px;
    top: 0px;
    left: 0px;
}

.calculator .up { /* Changed .calculator to .calculator */
    position: absolute;
    height: 16px;
    width: 16px;
    margin: 0px;
    top: 0px;
    left: 0px;
    border-style: outset;
    border-width: 2px;
    background-color: #333d4d;
    padding: 0px;
    background-position: center;
    background: url('images/uparrow.png') no-repeat; /* Update path if needed */
    background-size: contain;
}

.calculator .down { /* Changed .calculator to .calculator */
    position: absolute;
    height: 16px;
    width: 16px;
    margin: 0px;
    top: 17px;
    left: 0px;
    border-style: outset;
    border-width: 2px;
    background-color: #333d4d;
    padding: 0px;
    background-position: center;
    background: url('images/downarrow.png') no-repeat; /* Update path if needed */
    background-size: contain;
}

.calculator .house > dd > div { /* Changed .calculator to .calculator */
    padding: 0px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.calculator .houseCont { /* Changed .calculator to .calculator */
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.calculator .costCont { /* Changed .calculator to .calculator */
    width: 58%;
    display: inline-block;
    vertical-align: top;
}

.calculator .customCost > tbody > tr > td { /* Changed .calculator to .calculator */
    padding-bottom: 4px;
}

.calculator .customCost { /* Changed .calculator to .calculator */
    width: 100%;
}

.calculator .costChange { /* Changed .calculator to .calculator */
    width: 40px!important;
    text-align: center;
    white-space: nowrap;
}

.calculator .costChange:not(:nth-child(1)) { /* Changed .calculator to .calculator */
    padding-left: 20px;
}

.calculator #SubraceTraits > h4 { /* Changed .calculator to .calculator */
    color: #B8C7D6;
}

.calculator #TotalStr,
.calculator #TotalDex, 
.calculator #TotalCon,
.calculator #TotalInt,
.calculator #TotalWis, 
.calculator #TotalCha { /* Changed .calculator to .calculator */
    font-weight: bold;
}

/* Media Queries for Responsiveness */
@media screen and (min-width: 1px), screen and (min-width: 768px) {
    body {
        margin: 0px;
    }

    .calculator { /* Changed .calculator to .calculator */
        padding: 20px;
        border-radius: 0px 0px 10px 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #12263B;
        width: 100%;
    }
}

@media screen and (min-width: 992px) {
    body {
        margin: 10px 0px 100px 0px;
    }

    .calculator { /* Changed .calculator to .calculator */
        padding: 20px;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #12263B;
        min-width: 709px;
        max-width: 960px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1200px) {
    body {
        margin: 10px 0px 100px 0px;
    }

    .calculator { /* Changed .calculator to .calculator */
        padding: 20px;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #12263B;
        min-width: 709px;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    body {
        margin: 0px;
    }

    .calculator { /* Changed .calculator to .calculator */
        padding: 20px;
        border-radius: 0px 0px 10px 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #12263B;
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    body {
        margin: 10px 0px 100px 0px;
    }

    .calculator { /* Changed .calculator to .calculator */
        padding: 20px;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #12263B;
        min-width: 709px;
        max-width: 960px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px), 
       screen and (min-width: 1200px) and (max-width: 999999px) {
    body {
        margin: 10px 0px 100px 0px;
    }

    .calculator { /* Changed .calculator to .calculator */
        padding: 20px;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #12263B;
        min-width: 709px;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }
}


/* iPhone X/XS Max/11 Pro Max, Pixel XL Styles */
@media 
   only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1366px),
   only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1366px),
   only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1366px),
   only screen and (min-device-pixel-ratio: 2) and (max-width: 1366px),
   only screen and (min-resolution: 192dpi) and (max-width: 1366px),
   only screen and (min-resolution: 2dppx) and (max-width: 1366px),
   only screen and (width: 1125px) and (height: 2436px),
   only screen and (width: 2436px) and (height: 1125px) {

     body {
         margin: 0px;
     }

     .calculator h3, 
     .calculator dt, 
     .calculator dd { /* Changed .calculator to .calculator */
         font-size: 75%; 
     }

     .calculator td, 
     .calculator th,
     .calculator h4 { /* Changed .calculator to .calculator */
         font-size: 75%!important;
     }

     .calculator select { /* Changed .calculator to .calculator */
         font-size: .9em;
     }

     .calculator .Types > dt,
     .calculator .Types > dd { /* Changed .calculator to .calculator */
         font-size: 1em!important;
     }

     .calculator .inputCont > table > tbody > tr > td > input[type=number],
     .calculator .customCost > tbody > tr > td > input[type=number] { /* Changed .calculator to .calculator */
         height: 30px;
         width: 30px;
         font-size: 1.5em;
     }

     .calculator .costCont > table > tbody > tr > td > input[type=number] { /* Changed .calculator to .calculator */
         font-size: 75%; 
     }

     .calculator { /* Changed .calculator to .calculator */
         border-radius: 0px;
         border-style: none;
         border-width: 0px;
         border-color: #12263B;
         width: 100%;
         max-width: 100%;
         padding: 20px 0px; 
     }

     .calculator .traits,
     .calculator .raw, 
     .calculator .stats, 
     .calculator .houseinfo,
     .calculator .houseCenter, 
     .calculator .nav { /* Changed .calculator to .calculator */
         border-radius: 0px;
         border-left-width: 0px;
         border-right-width: 0px;
         padding: 10px 10px!important;
         color: #E8E8E8;
     }
     .calculator .traits{
     color: #E8E8E8;
     }

     .calculator .Reset,
     .calculator .FullReset { /* Changed .calculator to .calculator */
         margin: 0px;
         padding: 4px 6px;
         border-radius: 3px;
         font-size: .9em; 
     }

     .calculator .Selection, 
     .calculator .underline { /* Changed .calculator to .calculator */
         width: 96%;
         margin-left: 2%;
         margin-right: 2%; 
     }

     .calculator .underline h3,
     .calculator .raceHead { /* Changed .calculator to .calculator */
         font-size: 1em; 
     }

     .calculator .inputCont { /* Changed .calculator to .calculator */
         width: 60px; 
         font-size: 75%; 
     }

     .calculator .stats { /* Changed .calculator to .calculator */
         padding: 0px!important; 
     }

     .calculator .downup { /* Changed .calculator to .calculator */
         display: inherit; 
     }

     .calculator .houseCont, 
     .calculator .costCont { /* Changed .calculator to .calculator */
         width: 100%; 
     }

     .calculator .downup td:nth-child(3n+2) { /* Changed .calculator to .calculator */
         width: 30px; 
     }

     .calculator .costChange { /* Changed .calculator to .calculator */
         padding-left: 6px!important; 
         text-align: right; 
         width: 20px!important; 
     }

     .calculator .nav { /* Changed .calculator to .calculator */
         height: 21px; 
         display: flex; 
     }

     .calculator .navFive { /* Changed .calculator to .calculator */
       display: block; 
     }

     .calculator .hamburger { /* Changed .calculator to .calculator */
       display: block; 
       position: relative;
       z-index: 1; 
       -webkit-user-select: none; 
       user-select: none;
       width: 42px; 
     }

     .calculator .hamburger input { /* Changed .calculator to .calculator */
       display: block; 
       width: 40px; 
       height: 32px;
       position: absolute; 
       top: -7px; 
       left: -5px; 
       cursor: pointer; 
       -webkit-touch-callout: none; 
     }

     .calculator .hamburger span { /* Changed .calculator to .calculator */
       display: block;
       width: 33px; 
       height: 4px; 
       margin-bottom: 5px;
       position: relative; 
       background: #e8e8e8; 
       border-radius: 3px; 
       z-index: 1; 
       transform-origin: 4px 0px;
       transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                   background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                   opacity 0.55s ease;
     }

     .calculator .hamburger span:first-child { /* Changed .calculator to .calculator */
       transform-origin: 0% 0%; 
     }

     .calculator .hamburger span:nth-last-child(2) { /* Changed .calculator to .calculator */
       transform-origin: 0% 100%; 
     }

     .calculator .hamburger input:checked ~ span { /* Changed .calculator to .calculator */
       opacity: 1; 
       transform: rotate(45deg) translate(-2px, -1px);
       position: fixed; 
     }

     .calculator .hamburger input:checked ~ span:nth-last-child(3) { /* Changed .calculator to .calculator */
       opacity: 0; 
       transform: rotate(0deg) scale(0.2, 0.2); 
     }

     .calculator .hamburger input:checked ~ span:nth-last-child(2) { /* Changed .calculator to .calculator */
       transform: rotate(-45deg) translate(0, -1px);
       position: fixed; 
       top: 101px; 
     }

     .calculator .menu { /* Changed .calculator to .calculator */
       position: fixed; 
       width: 240px; 
       height: 100%; 
       margin: 0 0 0 -10px; 
       padding: 0px; 
       top: 0px;
       background-color: #64768C; 
       border-color: #12263B; 
       border-width: 1px; 
       list-style-type: none; 
       -webkit-font-smoothing: antialiased; 
       transform-origin: 0% 0%;
       transform: translate(-110%, 0);
       transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
     }

     .calculator .menu div { /* Changed .calculator to .calculator */
       display: list-item; 
       float: none; 
       text-align: left; 
       border-width: 1px; 
     }

     .calculator .menu div:hover { /* Changed .calculator to .calculator */
       background: #47566b; 
     }

     .calculator .menu h3 { /* Changed .calculator to .calculator */
       padding: 10px 0; 
       font-size: 22px; 
       text-align: left; 
       margin-left: 50px; 
     }

     .calculator .navOne { /* Changed .calculator to .calculator */
       margin-top: 65px; 
     }

     .calculator .navFive h3 { /* Changed .calculator to .calculator */
       font-size: 22px; 
       text-align: left; 
       position: absolute;
       top: 79px; 
     }

     .calculator .hamburger input:checked ~ div { /* Changed .calculator to .calculator */
       transform: none;
     }

     .calculator .RacialTraits,
     .calculator .SubraceTraits { /* Changed .calculator to .calculator */
       width: 96%;
       margin-left: 2%;
       margin-right: 2%;
     }
 }