static/style.css

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

:root{
    --red-main     : #AA0018;
    --dark-red     : #780018;
    --white-main   : #FFFFFFFF;
    --gray-main    : #7a7777;
    --black-main   : #000000FF;
    --red-contrast : #D10047;
    --delight-blue : #5fbcd3;

    --exact        : #3CB371;
    --insert       : #4169E1;
    --delsubts     : #D2122E;
}

body {
    position: relative;
    height: 100%;
    width: 100%;
}

#main-container{
    width: 100%;
    height: 100%;
}

#name-software{
    font-family: 'Fredoka One', cursive;
    font-size: 2em;
}

input[type='checkbox']:hover{
    cursor: pointer;
}

#version-software{
    padding: 18px;
}

#welcome-title{
    font-family: 'Fredoka One', cursive;
    font-size: 2em;
}

#copyright {
    font-size: 13px;
}

.under-link {
  position: relative;
  display: inline-block;
}

a:hover {
    color: var(--delight-blue) !important;
}

.dash-btn{
    margin-left: 30px;
}

#vt-configs{
    margin-top: 10px;
    margin-left: 30px;
}


#fieldset-vt{
    background-color: #F7F7F7;
    max-width:500px;
    padding:16px;
    border-radius: 10px;
}

#fieldset-vt-title{
    font-weight: bold ;
}

.under-link:after {
  content: "";
  position: absolute;
  left:0;
  top: 80%;
  width: 0;
  height: 2px;
  background-color: var(--delight-blue);
  transition: width .3s ease-in-out;
}
.under-link:hover:after {
  width: 100%;
}


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

#compare-btn{
    background-color: var(--red-main);
    border-color: var(--red-main);
    color: white;
    margin-top: 3%;
}

#compare-btn:hover{
    background-color: var(--dark-red)  !important;
    border-color: var(--dark-red) !important;
    color: white;
}

/*
.file-field.medium .file-path-wrapper {
height: 3rem; }
.file-field.medium .file-path-wrapper .file-path {
height: 2.8rem; }

.file-field.big-2 .file-path-wrapper {
height: 3.7rem; }
.file-field.big-2 .file-path-wrapper .file-path {
height: 3.5rem; }
*/

#reference{
    box-shadow:0 0 10px var(--white-main);
}


#top-navbar, #bottom-footer {
    background-color: var(--red-main);
    font-weight: bold;
    color: var(--white-main);
}

#top-navbar a, #top-navbar a:visited, #top-navbar  a:link, #top-navbar  a:hover {
    color: var(--white-main);
}

#bottom-footer a, #bottom-footer a:visited, #bottom-footer a:link, #bottom-footer a:hover {
    color: var(--white-main);
}

footer{
    background-color: var(--red-main) !important;
    right: 0;bottom:0;left:0;
    clear: both;
    position: relative;
    max-height: 100%;
}

/*
.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  margin: 1em 0;
}
.js .file-return {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
}
.js .file-return:not(:empty):before {
  content: "Selected file: ";
  font-style: normal;
  font-weight: normal;
}*/

.form-zone {
    border:solid;
    border-color: var(--black-main);
    border-width:thin;
    box-shadow: 2px 2px 20px var(--gray-main);
}

/*.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}*/

#title-metrics-dashboard{
    font-family: 'Fredoka One', cursive;
}

#title-vt-container{
    font-family: 'Fredoka One', cursive;
}

.jumbotron {
    background-color: var(--white-main);
}


.panel-title {
  position: relative;
}

.panel-title:hover{
    color: var(--red-main);
}


.panel-title::after {
  content: "\f107";
  color: #333;
  top: -2px;
  right: 0px;
  position: absolute;
  font-family: "FontAwesome"
}

.panel-title[aria-expanded="true"]::after {
  content: "\f106";
}

.exact-match{
    color:var(--exact);
}

.insertion{
    color: var(--insert);
}

.delSubts{
    color: var(--delsubts);
}

.exact-matchl{
    color:var(--exact);
}

.insertionl{
    color: var(--insert);
}

.delSubtsl{
    color: var(--delsubts);
}

.char{
    background: rgba(123, 123, 126, 0.4);
}

.clear {
    color: white !important;
}

tr{
    text-align: center;
}

.label-vs{
    text-align: center;
}

.col-vt-text{
    font-family: Helvetica;
    font-size: 17px;
    text-align: justify;
    white-space: pre-wrap;
}


td, th {
  padding: 1px 4px;
}

.info-metrics{
    display: none;
}