* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html{
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: Montserrat, sans-serif;
  width: auto;
}

a {
  color: white;
  text-decoration: none;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical */
  align-items: center; /* horizontal */
  font-size: large;
  font-weight: 500;
  font-size: 1.7em; 
  min-height: fit-content;
  border: 0px;
  color: gray;
  transition: .1s ease-out;
}

.box img {
  order: -1; /* imagem no topo */            
  align-self: center;
  max-height: fit-content; 
  max-width: 100% !important;
}


.box a:hover {
  max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 40px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-5px,0, 0);
	transform: translate3d(-5px,0,0);
}

.box img:hover {
  transition: .1s ease-out;
}

.bg-color {
  background-color: #f2f2f2 !important;
}

.bg-footer {
  background: lightgrey;
}

td {
  padding: 6px;
  text-align: center; 
}

.sidenav {
  text-decoration: none;
  color:#d9e2ef;
}

.sidenav-link:hover {
  font-weight: bold;
  color: white;
}

i {
  color: #f8f9fa;
}

.btn-mx {
  margin: 2px;
}


.nav-pills .nav-link.active{
  background-color: #0074A2 !important;
  color: #d9e2ef o !important;
}

.navbar-collapse{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}


.dropdown-menu .dropdown-item:active{
  background-color: #0074A2 !important;
  color: #d9e2ef !important;
}

div .new_html_code {
  width:auto;
  height:auto;
  overflow:hidden;
  display:block;
  border:none;
  padding-left: 11%;
  padding-right: 11%;
  padding-bottom: 5px;
}

.carousel-indicators {
  position: static !important;
}

.carousel-control-next, .carousel-control-prev {

  width: 8% !important;
}

.carousel-dark .carousel-indicators [data-bs-target]{
  background-color: #0074A2 !important;
}

.gray {
  background-color: #86c7e1 !important;
}
.green {
    background-color: #589b7c !important;
}
.blue {
    background-color: #DEAF3F !important;
}
.someredcolor {

  background-color: #dc3545
}
.words {
    height: 2%;
}
.chart {
    width: 100%;
    height: 100%;
}
.results {
    font-weight: bold;
    width: 90%;
}
#leftcol {
  float: left; 
  width: 30%; /* largura da coluna*/
}

#rightcol { /* coluna direira */
  text-align: center;
  margin-left: 0; /* recuar a esquerda */
  margin-right: 0;
}

.canvas {
    width: 350px;
    float: left;
    margin: 8px;
}


/* Tabs */
.tabs {
  
  background-color: none;
  border-radius: 5px 5px 5px 5px;
  
}
ul#tabs-nav {
  list-style: none;
  margin: 0;
  overflow: auto;
  padding-left: 0;
}
ul#tabs-nav li {
  float: left;
  width: 50%;
  font-weight: bold;
  padding: 10px;
  border-width:5px;
  border-radius: 5px 5px 5px 5px;
  border: 12px solid white;
  border-bottom: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  width: 50%;
  text-align: center;
  background-color: #e9ecef;
}
ul#tabs-nav li:hover,
ul#tabs-nav li:hover a{
  border-top: none;
  border-top: 12px solid white;
  background-color: #d4d3d3;
  color: #0074A2;
}

ul#tabs-nav li:hover a{
  border-top: none;
  background-color: #d4d3d3;
  color: #0074A2;
}

ul#tabs-nav li.active {
  border-top: none;
  border-bottom: 12px solid #3d474a;
  background-color: #3d474a;
  color: #FFF;
}


ul#tabs-nav li.active a{
  background-color: #3d474a;
  color: #FFF;
}
#tabs-nav li a {
  text-decoration: none;
  color: #6c757d;
}
.tab-content {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 8px;
  padding-right: 8px;
  
  background-color: #FFF;
  border: 1px solid #e9ecef;
  border-top: none;
}



ul#tabs-nav-normal {
  list-style: none;
  margin: 0;
  overflow: auto;
  padding-left: 0;
}
ul#tabs-nav-normal li {
  float: left;
  width: 50%;
  font-weight: bold;
  padding: 10px;
  border-width:5px;
  border-radius: 5px 5px 5px 5px;
  border: 12px solid white;
  border-bottom: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  width: 50%;
  text-align: center;
  background-color: #e9ecef;
}
ul#tabs-nav-normal li:hover,
ul#tabs-nav-normal li:hover a{
  border-top: none;
  border-top: 12px solid white;
  background-color: #d4d3d3;
  color: #0074A2;
}

ul#tabs-nav-normal li:hover a{
  border-top: none;
  background-color: #d4d3d3;
  color: #0074A2;
}

ul#tabs-nav-normal li.active {
  border-top: none;
  border-bottom: 12px solid #3d474a;
  background-color: #3d474a;
  color: #FFF;
}


ul#tabs-nav-normal li.active a{
  background-color: #3d474a;
  color: #FFF;
}
#tabs-nav-normal li a {
  text-decoration: none;
  color: #6c757d;
}
.tab-content-normal {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 8px;
  padding-right: 8px;
  
  background-color: #FFF;
  border: 1px solid #e9ecef;
  border-top: none;
}

.ui-multiselect {
  max-width: 130px !important;
  margin-top: 5px !important;;
}

.ui-state-default {
  background: #FFF !important;
}

.ui-state-hover{
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%) !important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover{
  background: #FFF !important;
  border-color: none !important;
}

.ui-widget-content{
  max-width: 130px !important;
}

.ui-multiselect-checkboxes label input{
  margin-right: 10px !Important;
}

.ui-corner-all .ui-state-hover{
  border-color: #dbdbdb !important;
  box-shadow: none !important;
}

#user_input_to_simulate_ad {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 282px;
  resize: both;
  overflow: auto;
}

mark {
  padding: 0.1px !important;
  border: solid 0.05px white !important;
  background-color: #0074a233 !important;
}

thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}

th:first-child, td:first-child
{
  position:sticky;
  left:0px;
  background-color:white !important;
  background: white;
}

.kineticjs-content{
  position: absolute !important;
}

.tape-symbol-box{
  border: 1px solid black;
  width: 15px;
  height: auto;
  display: inline-block;
  text-align: center;
  
}



/* Small viewport or screen */
@media only screen and (max-width : 580px) {
  .box {
    font-size: 1em;
    min-height: 60px;
    margin-bottom: 5px;
  }

  .navbar-collapse .dropdown-menu{
    background-color: #00000000 !important;
    text-align: center;
    border-radius: 0 !important;
    border: 0 !important;
  }

  .navbar-collapse .dropdown-menu .dropdown-item{
    color: #9b9d9e;
  }

  .navbar-collapse .dropdown-menu .dropdown-item:active{
    background-color: #0074A2 !important;
    color: #d9e2ef !important;
  }

  .navbar-collapse .dropdown-menu .dropdown-item:hover{
    background-color: #0074A2 !important;
    color: #d9e2ef !important;
  }

  .navbar-collapse .nav-item{
    border-top: #3f3f3f 1px solid;
  }

  #traformationShowText {
    font-size: 11px !important;
  }
  
  #traformationShowText, #completeDiagramText {
    font-size: 11px !important;
  }

  

  #downloadNFAConversion, #textExport, #downloadDFAConversion, #textExport1, #textExport2, #downloadMinDFAConversion {
    font-size: 8.5px !important;

  }

  #nfaExpXlsx, #nfaExpXls, #nfaExpCsv, #nfaExpTxt, #dfaExpXlsx, #dfaExpXls, #dfaExpCsv, #dfaExpTxt, #mindfaExpXlsx, #mindfaExpXls, #mindfaExpCsv, #mindfaExpTxt{

    height: 14px !important;
   
  }
}



/* Small viewport or screen */
@media only screen and (max-width : 992px) and (min-width : 580px) {
  
  .navbar-collapse .dropdown-menu{
    background-color: #00000000 !important;
    text-align: center;
    border-radius: 0 !important;
    border: 0 !important;
  }

  .navbar-collapse .dropdown-menu .dropdown-item{
    color: #9b9d9e;
  }

  .navbar-collapse .dropdown-menu .dropdown-item:active{
    background-color: #0074A2 !important;
    color: #d9e2ef !important;
  }

  .navbar-collapse .dropdown-menu .dropdown-item:hover{
    background-color: #0074A2 !important;
    color: #d9e2ef !important;
  }

  .navbar-collapse .nav-item{
    border-top: #3f3f3f 1px solid;
  }

  #traformationShowText {
    font-size: 11px !important;
  }
  
  #traformationShowText, #completeDiagramText {
    font-size: 11px !important;
  }

  #downloadNFAConversion, #textExport, #downloadDFAConversion, #textExport1, #textExport2, #downloadMinDFAConversion {
    font-size: 15px !important;

  }

  #nfaExpXlsx, #nfaExpXls, #nfaExpCsv, #nfaExpTxt, #dfaExpXlsx, #dfaExpXls, #dfaExpCsv, #dfaExpTxt, #mindfaExpXlsx, #mindfaExpXls, #mindfaExpCsv, #mindfaExpTxt{

    height: 17px !important;
   
  }

  @media only screen and (max-width : 995px) and (min-width : 800px){
    #downloadNFAConversion, #textExport, #downloadDFAConversion, #textExport1, #textExport2, #downloadMinDFAConversion {
      font-size: 8.5px !important;
  
    }
  
    #nfaExpXlsx, #nfaExpXls, #nfaExpCsv, #nfaExpTxt, #dfaExpXlsx, #dfaExpXls, #dfaExpCsv, #dfaExpTxt, #mindfaExpXlsx, #mindfaExpXls, #mindfaExpCsv, #mindfaExpTxt{
  
      height: 11px !important;
     
    }
  
  }

  
}

/* ecras 16:9 */
@media only screen and (max-width: 1600px) and (min-width: 900px) {
  .box {
    min-height: 150px;
  }
  .box p {
    font-size: 12px;
  }

  #traformationShowText {
    font-size: 12px !important;
  }
  
  #traformationShowText, #completeDiagramText {
    font-size: 12px !important;
  }

  @media only screen and (max-width : 1235px) and (min-width : 1015px){
    #downloadNFAConversion, #textExport, #downloadDFAConversion, #textExport1, #textExport2, #downloadMinDFAConversion {
      font-size: 8.5px !important;
  
    }
  
    #nfaExpXlsx, #nfaExpXls, #nfaExpCsv, #nfaExpTxt, #dfaExpXlsx, #dfaExpXls, #dfaExpCsv, #dfaExpTxt, #mindfaExpXlsx, #mindfaExpXls, #mindfaExpCsv, #mindfaExpTxt{
  
      height: 14px !important;
     
    }

}

@media only screen and (max-width : 1314px) and (min-width : 1235px){
  #downloadNFAConversion, #textExport, #downloadDFAConversion, #textExport1, #textExport2, #downloadMinDFAConversion {
    font-size: 12px !important;

  }

  #nfaExpXlsx, #nfaExpXls, #nfaExpCsv, #nfaExpTxt, #dfaExpXlsx, #dfaExpXls, #dfaExpCsv, #dfaExpTxt, #mindfaExpXlsx, #mindfaExpXls, #mindfaExpCsv, #mindfaExpTxt{

    height: 14px !important;
   
  }

}

@media only screen and (max-width : 1497px) and (min-width : 1423px){
  #algorithmInsideSimulationText, #resultsInsideSimulationText{
    font-size: 15px !important;
  }

}
}



/* switches de diferentes tamanhos*/

.form-switch.form-switch-md {
  padding-left: 4.5em;
  height: 2.5em;
}

.form-switch.form-switch-md .form-check-input {
  margin-left: -4.5em;
  height: 2em;
  width: 4em;
}

.form-switch.form-switch-md .form-check-label {
  padding-top: 0.5em;
}

.form-switch.form-switch-lg {
  padding-left: 8.5em;
  height: 4.5em;
}

.form-switch.form-switch-lg .form-check-input {
  margin-left: -8.5em;
  height: 4em;
  width: 8em;
}

.form-switch.form-switch-lg .form-check-label {
  padding-top: 1.5em;
}




.form-switch .form-check-input:focus {
  border-color: rgba(0, 0, 0, 0.25);
  outline: 0;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
  background-color: #0074A2;
  border-color: #0074A2;
  border: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}



.form-switch .form-check-input:focus:not(:checked) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}

.form-check-input:checked{
  background-color: #0074A2!important;
  border-color: #0074A2!important;
}

.btn-primary{
  background-color: #0074A2 !important;
  border-color: #0074A2 !important;
}

.ui-widget {
  font-size: 0.9em !important;
}

.accordion-button:not(.collapsed) {
  color: #0074A2!important;
  background-color: #f7f7f7 !important;
  font-weight: bold;
}

.accordion-button:focus {
  border-color: #0074A2 !important;
}