@charset "utf-8";



html {
    min-height: 100%;
}

body {
}

[v-cloak] {
    display: none;
}

table {
    margin: 0 0 .8rem;
    font-size: 1.4rem;
}

h1 {
    font-size: 2.4rem;
}

h2 {
    margin: 0 auto .8rem;
    text-align: center;
    font-size: 1.4rem;
}

h2 > a {
    color: var(--h2-a-color);
}

h3 {
    margin: 0 0 1.6rem;
    font-size: 2rem;
}

p {
    margin: 0 0 1.6rem;
    text-align: justify;
    font-size: 1.6rem;
    line-height: 1.6;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.clear {
    clear: both;
}

.revX {
    transform: scale(1, -1);
}

.revY {
    transform: scale(-1, 1);
}

.red {
    color: var(--red-color);
}

.code {
    font-weight: normal;
    font-size: 1.4rem;
}

.c {
    text-align: center !important;
}

.r {
    text-align: right !important;
}

.l {
    text-align: left !important;
}

.j {
    text-align: justify !important;
}

.m0a {
    margin: 0 auto !important;
}

.tbdr {
    border-top: .1rem solid var(--bdr-border-color);
}

.bbdr {
    border-bottom: .1rem solid var(--bdr-border-color);
}

.rotate90,
.rotate180,
.rotate270 {
    display: block;
}

.rotate90 {
    transform: rotate(90deg);
}

.rotate180 {
    transform: rotate(180deg);
}

.rotate270 {
    transform: rotate(270deg);
}




/* Font */

.material-symbols-outlined {
    vertical-align: top;
}


/* Input */

input[type='text'],
input[type='keyword'],
input[type='number'],
input[type='password'],
.inputDate input {
    height: 3.5rem;
    border: .1rem solid var(--input-border-color);
    border-radius: .4rem;
    line-height: 3.5rem;
}

input[type='text']:disabled,
input[type='keyword']:disabled,
input[type='number']:disabled,
input[type='password']:disabled,
.inputDate input:disabled {
    border: .1rem solid  var(--input-disabled-border-color);
}

input[type="number"], 
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  -moz-appearance: textfield; 
  margin: 0; 
} 

input[type='radio'],
input[type='checkbox'] {
    min-width: 1.6rem;
    min-height: 1.6rem;
    margin-right: .8rem;
    transform: scale(1.3);
}

input[type='radio'] + label,
input[type='checkbox'] + label {
    margin-right: 2rem;
}

select {
    min-width: 6.3rem;
    height: 3.5rem;
    padding: 0 .8rem;
    border: none;
    border-radius: .4rem;
    line-height: 3.5rem;
}

textarea {
    border: .1rem solid var(--input-border-color);
    border-radius: .4rem;
}


/* Button */

button {
    appearance: none;
    border: none;
    border-radius: .4rem;
    text-align: center;
    background: var(--button-background);
    color: var(--button-color);
    cursor: pointer;
}

button:hover {
    background: var(--button-hover-background);
}

button:active {
    background: var(--button-active-background);
}

button.nigate,
button[disabled],
button[disabled]:hover,
button[disabled]:active {
    background: var(--button-disabled-background);
    opacity: .3 !important;
    cursor: default !important;
}

button .ion {
}

.btnS {
    min-width: 3.2rem;
    min-height: 3.2rem;
    font-size: 1.4rem;
}

.btnM {
    min-width: 6.3rem;
    min-height: 3.2rem;
    padding: .7rem 1.5rem;
    font-size: 1.4rem;
}

.btnM .ion {
  font-size: 1.7rem;
  line-height: 1.4rem;
  vertical-align: middle;
}

.btnL {
    min-width: 6.3rem;
    min-height: 4.5rem;
    padding: .7rem 1.5rem;
    font-size: 1.4rem;
}

.btnL .ion {
  font-size: 1.7rem;
  line-height: 1.4rem;
  vertical-align: middle;
}

.submit {
    background: var(--submit-background);
    color: var(--submit-color);
}

.submit:hover {
    background: var(--submit-hover-background);
}

.submit:active {
    background: var(--submit-active-background);
}

.reset {
    background: var(--reset-background);
    color: var(--reset-color);
}

.reset:hover {
    background: var(--reset-hover-background);
}

.reset:active {
    background: var(--reset-active-background);
}

.toolBtn {
    width: 4.5rem;
    height: 4.5rem;
    border: .1rem solid var(--tool-btn-border-color);
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding: .7rem;
    background: var(--tool-btn-background);
    color: var(--tool-btn-color);
}

.toolBtn.use {
    color: var(--tool-btn-use-color);
}

.toolBtn.use:hover {
    color: var(--tool-btn-use-hover-color);
}

.toolBtn.use:active {
    background: var(--tool-btn-use-active-background);
}



/* Loading & Progress bar (button)  */

.loadingBg {
    width: 100vw;
    height: 100vh;
    background: var(--loading-bg-background);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

.loading {
    display: block;
    width: 10rem;
    height: 10rem;
    margin: -5rem 0 0 -5rem;
    text-align: center;
    font-size: 5rem;
    line-height: 10rem;
    color: var(--loading-color);
    position: fixed;
    top: 50vh;
    left: 50vw;
    animation: rotation 2s steps(48, end) infinite;
    z-index: 5;
}

.loading span {
    vertical-align: top;
    font-size: 5rem;
    line-height: 10rem;
}

@keyframes rotation {

    0% {
      transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }

}



/* Container*/

#app {
    min-height: 100vh;
    font-size: 1.4rem;
    color: var(--app-color);
}



/* Transition */

.v-enter-active,
.v-leave-active {
    transition: all .1s ease-out;
}

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: scale(1.1);
}