@keyframes smooth-appear {
    to{
      opacity:1;
    }
}

@keyframes smooth-appear2 {
    to{
      opacity:.2;
    }
}

.appear{
    display:block;
    animation: smooth-appear 3s ease forwards;
}

.check {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: 15px;
    height: 15px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

.check:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(34,50,84,0.03);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.check svg {
    position: relative;
    z-index: 1;
    fill: none;
    top:5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #c8ccd4;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
}

.check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

.check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
}

.check:hover:before {
    opacity: 1;
}

.check:hover svg {
    stroke: #fff;
}

.cbx:checked + .check svg {
    stroke: #fff;
}

.cbx:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
}

.cbx:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    text-align: left;
}

a, a:visited, a:active, a:hover, a:link{
    text-decoration: none;
    color: inherit;
}

.wrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-image: linear-gradient( 86.3deg,  rgba(0,119,182,1) 3.6%, rgba(8,24,68,1) 87.6% );
}

select{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

input[type="text"],input[type="number"]{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

input[type="date"]{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

input,button,select,optgroup,textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input[type="radio"],input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0; 
}

input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"] {
    -webkit-appearance: listbox; 
}

textarea {
    overflow: auto;
    resize: vertical; 
}

*:focus{
    outline: none;
}

.user-container{
    display:block;
    position:fixed;
    height:12px;
    color:#fff;
    font-size:10px;
    top:0px;
    right:0px;
    padding-top:3px;
    padding-right:40px;
    padding-bottom:3px;
    width:calc(100% - 40px);
    text-align:right;
    z-index:500;
    font-weight: 100;
    background:rgba(255,255,255,0);
}

.logout{
    display:block;
    position:absolute;
    right:15px;
    top:3px;
    width:18px;
    height:18px;
}

.mid-square-container{
    display:block;
    position:absolute;
    width:450px;
    height:340px;
    padding-left:50px;
    padding-right:50px;
    border-radius:5px;
    left:calc(50% - 275px);
    top:calc(50% - 170px);
    background:rgb(205,203,204);
    background-image: url('../img/logo.png');
    background-repeat: no-repeat;
    background-position: 90% 10%;
    background-size: 100px;
    transition:.3s;
}

.shadow{
    box-shadow:0px 0px 11px 0px rgba(0,0,0,.45);
}

.border{
    border: 1px solid #bbb;
}

.mid-square-container > .title{
    display:block;
    position:relative;
    width:100%;
    height:25px;
    color:#111;
    background:none;
    text-align:center;
    font-size:16px;
    font-weight: 600;
    margin-top:25px;
}

.mid-square-container > .title-info{
    display:block;
    position:relative;
    width:100%;
    height:25px;
    color:#888;
    background:none;
    text-align:center;
    font-size:12px;
    font-weight: 200;
    margin-top:15px;
}

.mid-square-container > .line{
    display:block;
    position:relative;
    width:100%;
    height:25px;
    line-height:25px;
    text-align:left;
    font-size:12px;
    font-weight:200;
    color:#222;
    margin-top:10px;
}

.line > .input{
    width:calc(100% - 30px);
    border-radius:5px;
    border: none;
    color:black;
    padding-left:15px;
    padding-right:15px;
    background:rgba(253,255,252,.7);
    transition: .3s;
}

.line > .input:focus{
    background:rgba(253,255,252,1);
    transition: .3s;
}

.line > .button{
    outline:none;
    cursor:pointer;
    padding-left:40px;
    padding-right:40px;
    line-height:25px;
    font-weight: 600;
    color: #fff;
    background:linear-gradient(0deg, rgba(201,90,49,1) 0%, rgba(221,96,49,1) 89%, rgba(218,135,104,1) 100%);
    border:none;
    border-radius:10px;
    transition: .3s;
}

.line > .button:hover{
    background:linear-gradient(0deg, rgba(201,90,49,1) 0%, rgba(230,123,82,1) 89%, rgba(247,202,185,1) 100%);
    transition: .3s;
}

.footer{
    display:block;
    position:fixed;
    font-size:10px;
    color:#bbb;
    background:none;
    width:120px;
    bottom:5px;
    left:calc(50% - 60px);
}

.text-danger {
    color: rgba(201,90,49,1) !important;
}

.main-container{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    padding:0px;
    transition:1s;
    opacity:0;
    animation: smooth-appear 3s ease forwards;
    z-index:10;
}

.menu-container{
    display:flex;
    position:relative;
    height:250px;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    background:none;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    gap:0px 25px;
    opacity:0;
    top:calc(50% - 125px);
    color:#fff;
    animation: smooth-appear 3s ease forwards;
}

.menu-container > .title{
    text-align:center;
    color:#fff;
    font-size:1.4em;
}

.menu-container > .item{
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
    background:none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius:20px;
    cursor:pointer;
    transition:.3s;
}

.menu-container > .item:hover{
    background:rgba(0,0,0,.3);
    transition:.3s;
}

.menu-container > .item > .icon {
    background:none;
    width:80px;
    height:80px;
    top:10px;
    left:10px;
    position:relative;
}

.navigation{
    position:fixed;
    display:flex;
    flex-direction:column;
    width:60px;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0px 10px;
    opacity:0;
    color:#fff;
    animation: smooth-appear 3s ease forwards;
    top:10px;
    left:10px;
    background:none;
    transition:.3s;
}

.navigation > .item{
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    background:none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius:20px;
    cursor:pointer;
    transition:.3s;
}

.navigation > .item:hover{
    background:rgba(0,0,0,.3);
    transition:.3s;
}

.navigation > .item > .icon {
    background:none;
    width:40px;
    height:40px;
    top:5px;
    left:5px;
    position:relative;
}

.separador{
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    transform:rotate(90deg);
    text-align:center;
    background:none;
    transition:.3s;
}

.separador > .icon {
    margin-top:5px;
}

.background{
    position:fixed;
    width:100%;
    height:100%;
    background-image: url('../img/logo.png');
    background-repeat: no-repeat;
    background-position: 98% 98%;
    background-size: 150px;
    opacity:0;
    animation: smooth-appear2 3s ease forwards;
    z-index:1;
}

.flex-container{
    display:flex;
    position:relative;
    height:calc(100% - 90px);
    width:90%;
    margin-right:auto;
    margin-left:auto;
    background:none;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    gap:0px 10px;
    opacity:0;
    top:25px;
    color:#fff;
    background:none;
    overflow-y:hidden;
    animation: smooth-appear 3s ease forwards;
}

.flex-container > .title{
    text-align:center;
    color:#fff;
    font-size:1.4em;
}

.flex-container > .flex-item{
    width:calc(50% - 5px);
    height:100%;
    max-height:100%;
    background:none;
    min-width:351px;
}

.flex-container > .flex-item > .flex-data{
    display:block;
    width:100%;
    height:calc(100% - 35px);
    overflow-y:auto;
    background:none;
}

.flex-container > .flex-item > .flex-data > .row{
    display:inline-block;
    position:relative;
    width:100%;
    font-size:.8em;
    height:15px;
    line-height:15px;
}

.flex-container > .flex-item > .flex-data > .row > .col{
    display:inline-block;
    position:relative;
    margin-top:-5px;
    font-size:.8em;
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius:5px;
}

.flex-container > .flex-item > .flex-data > .row > .title{
    font-size:1em;
}

.flex-container > .flex-item > .row{
    display:inline-block;
    width:100%;
    font-size:.8em;
    height:15px;
    line-height:15px;
}

.flex-container > .flex-item > .row > .col{
    display:inline-block;
    font-size:.8em;
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius:5px;
}

.flex-container > .flex-item > .row > .title{
    font-size:1em;
}

.flex-container > .flex-item > .flex-project{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:left;
    font-size:.8em;
    gap:10px 10px;
    opacity:0;
    color:#fff;
    animation: smooth-appear 3s ease forwards;
    bottom:10px;
    padding:10px;
    left:10px;
}

.flex-container > .flex-item > .flex-project > .info{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:left;
    gap:0px 10px;
    opacity:0;
    background:rgb(205,203,204);
    color:#777;
    animation: smooth-appear 3s ease forwards;
    font-size:.9em;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    border-radius:10px;
    width:350px;
    height:auto;
    padding-bottom:15px;
}

.whitebg{
    background: white;
    color:#000;
}

.button2 {
    position:relative;
    float:left;
    top:0px;
    left:0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.button2 svg {
    height: 15px;
    width: 100px;
    fill: rgb(78, 162, 52);
    stroke-width: 2;
}

.button2 svg .o1 {
    stroke: rgba(255, 140, 0, 0.0);
    fill: none;
    transition: all 1s ease-in-out;
}
  
.button2 svg .o2 {
    stroke: rgb(255, 230, 90);
    stroke-dasharray: 20 420;
    stroke-dashoffset: 20;
    transition: all 1s ease-in-out;
}
  
.button2 span {
    position: absolute;
    margin: auto 0;
    text-transform: none;
    letter-spacing: 2px;
}
  
.button2:hover .o1 {
    fill: rgba(0,0,0, 0.3);
}

.button2:hover .o2 {
    stroke-dashoffset: -420;
}

.vertical-flex{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    gap:10px 10px;
    font-size:.8em;
    opacity:0;
    height:450px;
    animation: smooth-appear 2s ease forwards;
}

.vertical-flex > .item {
    font-weight:300;
    width: calc(33% - 5px);
    color:#888;
    text-align:left;
    font-size:.95em;
    transition:.3s;
    background:none;
}

.vertical-flex > .item > .label {
    font-weight:600;
    font-size:1em;
    color:rgba(201,90,49,1);
    font-size:.9em;
}

.vertical-flex > .item > input[type="text"],input[type="number"]{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

.vertical-flex > .item > select{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

.vertical-flex > .item > input[type="date"]{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

Form{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}

.vertical-flex-add{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    gap:10px 10px;
    font-size:.8em;
    opacity:0;
    height:calc(100% - 100px);
    animation: smooth-appear 2s ease forwards;
    margin-left:auto;
    margin-right:auto;
    background:none;
}

.vertical-flex-add > Form > .item {
    font-weight:300;
    width: calc(100% - 0px);
    color:#888;
    text-align:left;
    font-size:.95em;
    transition:.3s;
    background:none;
}

.vertical-flex-add > Form > .item > .label {
    font-weight:600;
    font-size:1em;
    color:rgba(201,90,49,1);
    font-size:.9em;
}

.vertical-flex-add > Form > .item > input[type="text"],input[type="number"]{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

.vertical-flex-add > Form > .item > select{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

.vertical-flex-add > Form > .item > input[type="date"]{
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:white;
    width:calc(100% - 10px);
}

.profile-pic{
    display:block;
    position:relative;
    border-radius:50%;
    margin-left:auto;
    margin-right:auto;
    cursor: pointer;
}

.progress {
    margin: 0 auto;
    width: calc(100% - 8px);
    padding: 4px;
    height: 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
  
.progress-bar {
    height:10px;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.3), rgba(255,255,255, 0.05));
    background-image: -moz-linear-gradient(top, rgba(255,255,255, 0.3), rgba(255,255,255, 0.05));
    background-image: -o-linear-gradient(top, rgba(255,255,255, 0.3), rgba(255,255,255, 0.05));
    background-image: linear-gradient(to bottom, rgba(255,255,255, 0.3), rgba(255,255,255, 0.05));
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

@media (max-width: 960px) {
    .mid-square-container{
      width: 450px; 
      left:calc(50% - 275px);
      transition:.3s;
    }
    .vertical-flex > .item {
        width: calc(33% - 5px);
    }
    .vertical-flex-add{
        width:50%;
    }
    .navigation{
        width:60px;
        transition: .3s;
        top:10px;
        bottom:auto;
        flex-direction: column;
        transition:.3s;
    }
}
@media (min-width: 768px) {
    .mid-square-container {
      width: 450px; 
      left:calc(50% - 275px);
      top:calc(33% - 170px);
      transition:.3s;
    } 
    .vertical-flex > .item {
        width: calc(50% - 5px);
    }
    .vertical-flex-add{
        width:50%;
    }
    .navigation{
        left:0px;
        transition:.3s;
    }
}
@media (max-width: 600px) {
    .mid-square-container {
      width: 200px;
      left:calc(50% - 150px);
      background-size: 50px;
      transition:.3s;
    } 
    .vertical-flex > .item {
        width: calc(50% - 5px);
    }
    .vertical-flex-add{
        width:100%;
    }
    .navigation{
        width:auto;
        transition: .3s;
        flex-direction: row;
        top:auto;
        bottom:10px;
        transition:.3s;
    }
    .separador{
        transform:rotate(0deg);
        width:20px;
        transition:.3s;
    }
}