* {
    font-family: Helvetica;
    margin: 0;
    padding: 0;
    background-color: #222;
    color: #fff;
}

::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="orange" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
    
}
*::before,
*::after {
  box-sizing: border-box;
}

/* NAVBAR */
#logo img {
    height: 40px;

}

#navbar {
    padding: 1.2em 1.4em;
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    border-bottom: 1px solid #f6982d;

}
#navbar div {
    display: flex;
    align-items: center;

}
#navbar ul {
    display: flex;
    list-style: none;
}
#navbar ul li {
    margin-left: 1em;
}

#navbar ul li a {
    text-decoration: none;
    transition: .5s;
    font-weight: bold;
}

#navbar ul li a:hover {
    color:#f6982d
}
/*CONTAINER*/

.container {
    min-height: 60vh;
    padding: 1em;

}

/*MESSAGES */
.message {
    padding: 1em;
    color: #004085;
    background-color: #cce5ff;
    border: 1px solid #cce5ff;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto 2em;
    max-width: 60%;
}
.sidenav {
    margin-left: 0;
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #222; 
}

.sidenav ul {
    list-style: none;
    
}
.sidenav ul li {
    margin-bottom: 2em;
}

.sidenav ul li a {
    text-decoration: none;
    transition: .5s;
    font-weight: bold;
    text-transform: uppercase;
}

.sidenav ul li a:hover {
    color:#f6982d
}

/* LOGIN E REGISTER */
.auth-container {
    max-width: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.auth-container div.forupload {
    display: flex;
    
    justify-content: space-between;
}

.auth-container h2 {
    margin-bottom: 1em;
    color: #fff;
    border-left: 4px solid #f6982d;
    padding: .3em;
}

.auth-container a {
    color: #f6982d;
}


.itemfile-container {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #333;
}

.itemfile-container div {
    display: flex;
    background-color: transparent;
    
}

.itemfile-container div button {
    padding: 5px;
    background-color: transparent;
}


.itemfile-container h3{
    font-size: small;
    font-weight: normal;
    background-color: transparent;
}

.container-log {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 1em;
}

.container-log textarea {
    height: 200px;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #f6982d;
    font-size: small;
}

.form-control {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}
.form-control label {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.form-control input, 
.form-control textarea {
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #f6982d;
    font-size: medium;
}



select {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
  }
  
  select::-ms-expand {
    display: none;
  }

  select::after {
    box-sizing: border-box;
  }
  :root {
    --select-border: #f6982d;
    --select-focus: #f6982d;
    --select-arrow: var(--select-border);
    --form-control-color: #f6982d;
    --form-control-disabled: #959495;
  }
  .select {
    
    min-width: 15ch;
    max-width: 70ch;
    height: 24px;
    border: 1px solid var(--select-border);
    border-radius: 3px;
    padding: 0.25em 0.5em;
    font-size: medium;
    cursor: pointer;
    line-height: 1.1;
    background-color: #222;
    grid-template-areas: "select";
    display: grid;
    align-items: center;
  }
  .select::after {
    content: "";
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    justify-self: end;
  }
  select,
    .select:after {
    grid-area: select;
    }


form input[type='submit'],
.btn {
    background-color: transparent;
    color: #f6982d;
    border: 2px solid #f6982d;
    padding: 0.5em 1.2em;
    margin-bottom: 1em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: .5s;

}
form input[type='submit']:hover,
.btn:hover {
    background-color: #f6982d;
    color: #fff;
}

form input[type='submit'],
.btn-small {
    background-color: transparent;
    color: #f6982d;
    border: 1px solid #f6982d;
    padding: 0.3em 1.2em;
    margin-bottom: 1em;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: .5s;

}
form input[type='submit']:hover,
.btn-small:hover {
    background-color: #f6982d;
    color: #fff;
}








/*input file  */




.title-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.title-container h2 {
    border-left: 4px solid #f6982d;
    padding: 10px;
    
}

.dashboard h3 {
    font-size: small    ;
}

.dashboard ul {
    list-style: none;
}

.dashboard form input[type="text"] {
    border: none;
    border-bottom: 1px solid #fff;
    padding: 0.5em;
    margin-right: 1em;
    width: 60%;
}

.subheader {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subheader form .subheader-search input[type="text"] {
    border: none;
    border-bottom: 1px solid #fff;
    padding: 0.5em;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 60%; 
    font-size:medium;

}
.subheader .subheader-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subheader .subheader-search div {
    display: flex;
    flex-direction: row;
}
.subheader-search .container-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.5em;
}
.subheader-search .container-data .form-control {
    margin-bottom: 0;
}
.subheader-search .container-status {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.order-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;
    margin: 0 auto 1em;
}

.order-container form {
    margin: 0;
}
.order-container button {
    margin-bottom: 0;
    border: none;
    cursor: pointer;
}
.order-container button:hover,
.order-container i:hover,
.order-container a:hover {
    color: #f6982d;
}

.order-container button,
.order-container i,
.order-container a {
    margin: 0 7px;
}

.dashboard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.dashboard ul li {
    padding: 4px;
    /*border-bottom: 1px solid #f6982d; */
    display: flex;
    align-items: center;
    justify-content: left;
}


.dashboard .label {
    font-weight: bold;
    color: #f6982d;
    text-align: left;
}

.dashboard .actions {
    display: flex;
}

.dashboard .actions .btn {
    color: #fff;
    border-color: #fff;
    margin: 0 0.5em;
}

/* .dashboard .actions .btn-small {
    color: #fff;
    border-color: #fff;
    margin: 0 0.5em;
} */

/* TICKETLIST */
.ticketlist-container {
    padding: 0.5em;
    display: flex;
    background-color: #333;
    border-radius: 5px;
    width: 100%;
}

.ticketlist-container .colunaID { 
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 50px;
}

.ticketlist-container .colunaContent div{ 
    border-left: 1px solid #f6982d;
    padding-left: 0.5em;
    background-color: transparent;
}


.ticketlist-container .colunaID h3 span,
.ticketlist-container .colunaID h2 span,
.ticketlist-container .colunaContent div h3 span
{
    background-color: transparent;
    font-weight: bold;
    color: #f6982d;
}
.ticketlist-container .colunaContent div h3 span.status-aprovado
{
    background-color: transparent;
    font-weight: bold;
    color: #00FF00;
}

.ticketlist-container .colunaContent div h3 span.status-bloqueado
{
    background-color: transparent;
    font-weight: bold;
    color: #FF0000;
}



.ticketlist-container .colunaContent {
    display: flex;
    width: 90%;
    justify-content: space-between;
    padding-left: 0.5em;
    background-color: transparent;
}
.ticketlist-container .colunaContent div{
    align-items: stretch;
    width: 100%;
}

.ticketlist-container h2,
.ticketlist-container h3 {
    background-color: transparent;
}
.ticketlist-container div {
    background-color: transparent;
}
.ticketlist-container div.act {
    display: flex;
    justify-content: space-between;
}
.ticketlist-container div div.actions {
    display: flex;
    flex-direction: column;
    padding-right: 0.5em;
    justify-content: space-between;

    
}
.ticketlist-container div div.actions form{

    background-color: transparent;
    align-content: space-between;
}

.ticketlist-container div div.actions .btn-small {
    width: 100%;
    /* background-color: #333; */
}

/*PERMISSIONS TABLE */
.table-permissions {
    display: none;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.table-permissions .section {
    display: flex;
    flex-direction: column;
    width: 200px;
}

.table-permissions .section-label {
    border-bottom: 1px solid #f6982d;
    
}

.table-permissions .section-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100px;
    
}

.table-permissions .section-item,
.table-permissions .section-value {
    margin-bottom: 0.5em;
    
}

.containerPermissions {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    
}
.containerPermissions .primeiraLinha ,
.containerPermissions .segundaLinha {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5em;
    
    
}

.containerPermissions div div {
    width: 120px;
}


input[type=file]::file-selector-button {
    background-color: transparent;
    color: #f6982d;
    border: 2px solid #f6982d;
    padding: 0.5em 1.2em;
    margin-bottom: 1em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: .5s;
  }
  input[type=file]::file-selector-button {
    background-color: transparent;
    color: #f6982d;
    border: 2px solid #f6982d;
    padding: 0.5em 1.2em;
    margin-bottom: 1em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: .5s;
  }
  
  input[type=file]::-ms-browse:hover {
    background-color: #f6982d;
    color: #fff;
  }
  
  input[type=file]::-webkit-file-upload-button:hover {
    background-color: #f6982d;
    color: #fff;
  }
  
  input[type=file]::file-selector-button:hover {
    background-color: #f6982d;
    color: #fff;
  }




/*FOOTER*/
footer {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f6982d;
}

footer span {
    font-weight: bold;
    color: #f6982d;
}

h3 span {
    font-weight: bold;
    color: #f6982d;
}



.report-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.report-container h2 {
    margin-bottom: 1em;
    color: #fff;
    border-left: 4px solid #f6982d;
    padding: .3em;
}

.report-container ul {
    list-style: none;
}

.reportHeader {
    display: flex;
    flex-direction: row;
    background-color: #333;
    padding: 1em;
}

.reportHeader h4 {
    background-color: transparent;
    color:#f6982d;
    text-align: center;
}

.reportItem {
    display: flex;
    flex-direction: row;
    background-color: #333;
    padding-left: 1em;
    padding-bottom: 0.5em;
}
.reportItem h5 {
    background-color: transparent;
    text-align: center;
}

.reportItem h4 {
    background-color: transparent;
    color: yellow;
    text-align: center;
}

.column-width-50 {
    width: 50px;
}
.column-width-100 {
    width: 100px;
}
.column-width-150 {
    width: 150px;
}
.column-width-200 {
    width: 200px;
}



.checkboxBig[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #222;
    /* Not removed via appearance */
    margin: 0 1.5em;
    font: inherit;
  color: #f6982d;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid #f6982d;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  }

  .checkboxBig::before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }
  .checkboxBig:checked::before {
    transform: scale(1);
  }
  .checkboxBig:focus {
    outline: max(2px, 0.15em) solid #f6982d;
    outline-offset: max(2px, 0.15em);
  }
  .checkboxBig:disabled {
    --form-control-color: var(--form-control-disabled);
  
    color: var(--form-control-disabled);
    cursor: not-allowed;
  }

  /* PAGINATION */
  .pagination {
    margin: 10px auto;
    display: table;
    font-family: arial;
}
.pagination ul {
    margin: 0px;
    padding: 0px;
}
.pagination ul li {
    list-style: none;
    float: left;
    margin: 5px 7px;
}
.pagination ul li:hover{
  opacity: 0.9;
}
.pagination ul li a {
    font-size: 12px;
    text-decoration: none;
    padding: 2px;
    border-radius: 4px;
    color: #f6982d;
    border: 2px solid #f6982d;
    min-width: 20px;
    height: 20px;
    text-align: center;
    display: -moz-inline-grid;
    display: -ms-inline-grid;
    display: inline-grid;
    align-items: center;
}
.pagination ul li.active a,
.pagination ul li span.disabled {
    font-size: 12px;
    text-decoration: none;
    padding: 2px;
    border-radius: 4px;
    background-color: #f6982d;
    color: #222;
    border: 2px solid #f6982d;
    min-width: 20px;
    height: 20px;
    text-align: center;
    display: -moz-inline-grid;
    display: -ms-inline-grid;
    display: inline-grid;
    align-items: center;
}
.pagination ul li.disabled {
    display: none;
}
.pagination ul li.active {
    color: #333;
}
.pagination ul li.active:hover,
.pagination ul li.disabled:hover,
.pagination ul li a:hover{
  opacity: 0.8;
}

.pagination ul li:first-child a,
.pagination ul li:last-child a{
    border: none;
    line-height: 30px;
    display: block;
}
/*--For small devices CSS--*/
@media (max-width: 767px){
.pagination ul li a {
    font-size: 12px;
    padding: 2px;
    min-width: 20px;
    height: 20px;
}
.pagination ul li span.current,
.pagination ul li span.disabled {
  font-size: 12px;
    padding: 2px;
    min-width: 20px;
    height: 20px;
}
.pagination ul li {
    margin: 5px 4px;
}
.pagination ul li:first-child a,
.pagination ul li:last-child a {
    line-height: 23px;
}
}