#reasoned {
    background-color: white;
    border: 1px solid black;
    color: black;
    margin: 0 auto;
    font-family: "Times New Roman", Times, serif;
    text-align: justify;
    overflow-y: scroll;
    height: 29.7cm;
    width: 21cm;
    text-indent: 2em;
    padding: 1em;
    box-sizing: border-box;
}

#reasoned p,
strong,
em,
u {

    font-family: "Times New Roman", Times, serif;
}
.page p { text-indent: 1cm;text-align: justify;}
#reasoned table {
    text-align: center;
    border-collapse: collapse;
}

#reasoned-wrapper {
  margin: 0 auto;
  overflow-y: auto;
  background: #888;
  padding: 1cm 0;  
  box-sizing: border-box;
}


.page {
  display: flex;
  flex-direction: column;
  width: 21cm;
  height: 29.7cm;
  margin: 0 auto 1cm;  
  background: white;
  border: 1px solid black;
  box-sizing: border-box;
  page-break-after: always; 
}

.page-header,
.page-footer {
  flex: 0 0 2em; 
  height: 0em;     
  display: flex;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
  font-size: 8pt;
  align-items: center;
  text-align: center;
  padding: 0 1em;
}
.page-header{padding: .5cm;}
.footer-right{float:right;} 

.page-content {
  flex: 1 1 auto;       
  overflow: hidden;     
  padding: .5cm;
  box-sizing: border-box;
}


.page-content p,
.page-content table {
  page-break-inside: avoid;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    cursor: url('/img/C.png'), pointer;
    image-rendering: pixelated;
}

a {
    font-style: italic;
    color: blue;
}

ol {
    list-style-position: inside;
}

li {
    font-family: 'Times New Roman', Times, serif;
    text-indent: 4em
}

table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    text-align: center;
}

.tab-bar {
    display: flex;
    border-bottom: 1px solid #ccc;
    font-family: Arial, sans-serif;
    font-size: 14px;
    user-select: none;
}

.tab {
    position: relative;
    padding: 8px 16px;
    margin-right: -1px;
    border: 1px solid #ccc;
    border-bottom: none;
    cursor: pointer;
    background: linear-gradient(to bottom,
            #e0e0e0 0%,
            #ffffff 50%,
            #e0e0e0 100%);
    color: #333;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
    transition: background 0.3s ease;
}

.tab:hover:not(.active-tab) {
    background: linear-gradient(to bottom,
            #d0d0d0 0%,
            #f5f5f5 50%,
            #d0d0d0 100%);
}

.active-tab {
    background: linear-gradient(to right,
            #0056b3 0%,
            #007bff 40%,
            #cfeffc 100%);
    font-weight: bold;
    color: #000;
    border-color: #ccc;
    z-index: 2;
}

.active-tab:hover {
    background: linear-gradient(to right,
            #004494 0%,
            #0056b3 40%,
            #ffffff 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab-contents {
    border: 1px solid #ccc;
    padding: 15px;
    background: #fff;
}

.tab-content {
    display: none;
}

.active-content {
    display: block;
}

button.fancy {
    display: inline-block;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid #ccc;
    background: linear-gradient(to bottom,
            #e0e0e0 0%,
            #ffffff 50%,
            #e0e0e0 100%);
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
    user-select: none;
}


button.fancy:hover {
    background: linear-gradient(to bottom,
            #d0d0d0 0%,
            #f5f5f5 50%,
            #d0d0d0 100%);
}


button.fancy:active {
    background: linear-gradient(to right,
            #0056b3 0%,
            #007bff 40%,
            #cfeffc 100%);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    color: #000;
}


button.fancy:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(0, 123, 255, 0.5),
        inset 0 2px 5px rgba(0, 0, 0, 0.2);
}