:root{
    --dark-blue: #0979d1;
    --light-blue: #ecfaff;
    --blue: #6fb2f1;

    --white: #eee;
}

*{
    margin: 0;
    padding: 10;
    box-sizing: border-box;
    font-family: 'Inter', arial, sans-serif;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-size: 1rem;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background: #f5f5f5;
  background-color: #fff;
  display: flex;
  height: 100vh;
  /*overflow: hidden;*/
}
        .diagram {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .category {
            margin: 10px;
            width: 200px;
        }
        .category label {
            font-weight: bold;
        }
        .category textarea {
            width: 100%;
            resize: none;
        }
        .problem {
            margin: 20px;
            width: 100%;
            text-align: center;
        }
        .arrow {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .arrow:after {
            content: '→';
            font-size: 2rem;
            margin-left: 10px;
        }
		.line {
            content: '→';
            position: absolute;
            height: 1px;
            background-color: black;
            width: calc(80% - 120px); /* Adjust this width based on the desired length */
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
        }
.sidebar {
    width: 82px;
    padding-top: 10px;	
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.x50{ left: 80px; } /*Logo do AME*/
.x150{ left: 250px; } /*Logo do AME*/
.y44{ top: 4px; }/*Logo do AME/OSS*/
.r50{ right: 50px; }/*Logo do OSS*/
.logo-ame {
	width: 151px;
	height: 74px;
	position: absolute;
	border: 0;
	margin: 0; }
.logo-setor {
	width: 151px;
	height: 74px;
	position: absolute;
	border: 0;
	margin: 0; 
	box-shadow: 2px 0 18px rgba(0, 10, 0, 0.26);}
.logo-oss {
	height: 74px;
	position: absolute;
	border: 0;
	margin: 0; }
.header {
    height: 80px;
    background-color: #0979d1;
}

.content {
    display: flex;
    padding: 20px;
}

.footer {
    height: 50px;
    background-color: #ecfaff;
	flex-shrink: 0;
}
.bottom-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background-color: #ecfaff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}
.bottom-bar img {
    height: 50px; /* Ajuste conforme necessário */
}
.address {
    flex: 1;
	margin-left: 80px;
	font-size: 12px;
}
.logo-sp {
    margin-left: auto;
}
.logo-sp img {
    height: 30px; /* Define a altura da imagem */
    width: auto;  /* Mantém a proporção da imagem */
}
.card {
    width: 300px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    text-align: center;
}

.card img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.card-body {
    padding: 20px;
}

.card-body h2 {
    font-size: 1.5em;
    margin: 0 0 10px;
}

.card-body p {
    color: #777;
    margin: 0 0 20px;
}

.card-body button {
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.card-body button:hover {
    background-color: #1976D2;
}

.info-section {
    flex: 1;
}

.info-section h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.info-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px;
}

.info-section ul li {
    margin-bottom: 5px;
    color: #333;
}

.listFolder1 {
	width: 200px;
    height: 200px;
    background-color: lightyellow;
    margin: 0 auto; /* Centraliza horizontalmente */
}
.tree {
  position: relative;
  background: white;
  margin-top: 5px;
  padding: 10px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
}
.tree span {
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.4px;
  color: #a8a8a8;
}
.tree .fa-folder-open, .tree .fa-folder {
  color: #007bff;
}
.tree .fa-file-pdf {
  color: #f21f10;
}
.tree .fa-file-excel {
  color: #087521;
}
.tree .fa-file-word {
  color: #024e9f;
}
.tree .fa-file-image {
  color: #024e9f;
}
.tree .fa-file-lines {
  color: #024e9f;
}
.tree ul {
  padding-left: 5px;
  list-style: none;
  margin-top: 1px;
}
.tree ul li {
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tree ul li:before {
  position: absolute;
  top: 15px;
  left: 0;
  width: 10px;
  height: 1px;
  margin: auto;
  content: "";
  background-color: #666;
}
.tree ul li:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  content: "";
  background-color: #666;
}
.tree ul li:last-child:after {
  height: 15px;
}
.tree ul a {
  cursor: pointer;
}
.tree ul a:hover {
  text-decoration: none;
}
/*----------------------------*/
/*----------------------------*/
/* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: #a1a5b7;
}

/* selected link */
a:active {
  color: blue;
}


/* CONFIG DO MENU*/
.menu, .menu-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #f7f7f7;
    z-index:10;  
    overflow:hidden;
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li img{
  margin-top: 0.3em;
  margin-left: 1em;
  height: 3em;
  width: 3em;
}
.menu li a{
  display: inline-block;
  text-indent: -500em;
  height: 5em;
  width: 5em;
  line-height: 5em;
  text-align:center;
  color: #72739f;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}
.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4em;
}

.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
  background: #267fdd;
  color: #fff;
}
.menu-bar{
    overflow:hidden;
    left:5em;
    z-index:5;
    width:0;
    height:0;
    transition: all 0.1s ease-in-out;
}
.menu-bar li a{
  display: block;
  height: 4em;
  line-height: 4em;
  text-align:center;
  color: #72739f;
  text-decoration:none;  
  position: relative;
  font-family:verdana;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}
.menu-bar li:first-child a{
    height:5em;
    background: #267fdd;
    color: #fff;    
    line-height:5
}


.para{
    color:#033f72;
    padding-left:100px;
    font-size:3em;
    margin-bottom:20px;
}

.open{
    width:10em;
    height:100%;
}
/*
@media all and (max-width: 500px) {
    .container{
        margin-top:100px;
    }
    .menu{
        height:5em;
        width:100%;
    }
    .menu li{
        display:inline-block;
    }
    .menu-bar li a{
        width:100%;
    }
    .menu-bar{
        width:100%;
        left:0;
      bottom: 0;
        height:0;
    }
    .open{
        width:100%;
        height:auto;
    }
    .para{
    padding-left:5px;
}  
}
@media screen and (max-height: 34em){
  .menu li,
  .menu-bar {
    font-size:70%;
  }
}
@media screen and (max-height: 34em) and (max-width: 500px){
  .menu{
        height:3.5em;
    }
}*/