/************************************************************
RESET
************************************************************/
*, *:before, *:after{
    margin: 0;
    padding: 0;
    outline: 0;

    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: 0em;
    vertical-align: middle;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body{background-color: #eee; color: #333; overflow-x: hidden}
h1{font-size: 2em; font-weight: 300;}
h2{font-size: 1.8em; font-weight: 400;}
h3{font-size: 1.5em; font-weight: 700;}
h4{font-size: 1.2em; font-weight: 700;}
h5{font-size: 1em; font-weight: 700;}
p{margin-bottom: 15px;}
p:last-child{margin-bottom: 0;}
ul{list-style: none;}
img{float: left; border: none; width: 100%; max-width: 100%}
small{font-size: 0.75em;}
strong{font-weight: 700; font-size: 1.2em; vertical-align: baseline;}
a{text-decoration: none;}
a:link, a:visited, a:active{color: inherit;}
button{border:0;}
a img{border: 0;}
embed, video, iframe, iframe[style] {max-width: 100%; height: auto;}
label{display:block; margin: 0 0 0 0;}
input, select, textarea{width:100%; margin: 10px 0px; padding:5px; background-color:rgba(255,255,255,0.8); border: 1px solid #999; font-size: 1em; font-weight: 300; color: #333; resize: none; transition: filter .2s; border-radius: 5px}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus,
input[type=password]:focus, input[type=file]:focus, select:focus, textarea:focus{outline: 2px solid #2196F3;}

select{-webkit-appearance: none; -moz-appearance: none; appearance: none; background: rgba(255,255,255,0.8);}
select > option{background-color: rgba(255,255,255,0.8); color: #333;}
select option:checked {background-color: #d6d6d6 !important; /* for IE */color: #333 !important;}

::selection{background-color: #111111; color: #fff}
::placeholder{color: #555; filter: opacity(0.7)}


input[type=url]{color: #333}

input[type=file]::-webkit-file-upload-button{display: inline-block;  border: none; border-radius: 3px; width: fit-content; width: -moz-fit-content; text-transform: uppercase; font-style: normal; text-align: center; padding: 10px; margin: 5px; box-shadow: 0px 0px 2px #555; cursor: pointer; transition: box-shadow 1s, filter 0.4s; background-color: #2196F3; color: #fff;}
input[type=file]::-webkit-file-upload-button:hover{box-shadow: 0px 0px 10px #555; }
input[type=file]::-webkit-file-upload-button:active{filter:opacity(0.8); }

input[type=range]{appearance: none; -moz-appearance: none; -webkit-appearance: none; height: 5px; border: none; border-radius: 5px; background: #999;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background-color: #448AFF; cursor: pointer;}
input[type=range]::-moz-range-thumb{width: 25px; height: 25px; border-radius: 50%; border: none; background-color: #448AFF; cursor: pointer;}

input[type=radio]{appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 25px; height: 25px; margin: 15px 20px ; border: 1px solid #448AFF; border-radius: 50%; transition: background-color 1s;}
input[type=radio]:checked{width: 25px; height: 25px; background-clip: content-box; background-color: #448AFF; border: 1px solid #448AFF;}

input[type=checkbox]{appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 25px;  height: 25px; margin: 15px 20px; border: 1px solid #448AFF; border-radius: 3px; background-color: rgba(0,0,0,0); transition: background-color 1s;}
input[type=checkbox]:checked{width: 25px; height: 25px; background-clip:content-box; border-radius: 3px; border: 1px solid #448AFF; background-color: #448AFF;}
input:hover, select:hover, textarea:hover, input[type=radio]:hover{filter:opacity(0.8); cursor: pointer}

details li{list-style: none; transition: all 1s; }
details summary::-webkit-details-marker{display:none;}
details summary {display: block;}
summary:after{content: '▼'; margin-left: 10px; float: right; font-size: 0.7em; color: #333; }
summary:hover{cursor: pointer;}


details[open]{outline: 2px solid #448AFF;}
details[open] summary{font-weight: bold; font-size: 1.1em; margin-bottom: 10px; }
details[open] summary:after{content: '▲';font-weight: bold;}
details{margin-bottom: 20px; background-color: rgba(255,255,255,0.8); color: #333; border-radius: 5px; padding:5px; }
details[open] summary ~ * {animation: sweep 1s linear; margin-left: 10px;}
@keyframes sweep {
    0%    {opacity: 0; margin-left: -10px}
    100%  {opacity: 1; margin-left: 10px}
}

hr{border: 1px solid #333;}
mark{padding: 5px; border-radius: 5px; color: #fff; background-color: teal}

/************************************************************
OPACITY
************************************************************/
.opacity-50{filter: opacity(0.5);}
.opacity-80{filter: opacity(0.8);}
.opacity-90{filter: opacity(0.9);}

/************************************************************
FONT-WEIGHT
************************************************************/
.font-thinm{font-weight: 100;}
.font-light{font-weight: 300;}
.font-normal{font-weight: 400;}
.font-bold{font-weight: 700;}

/************************************************************
FONT-SIZE
************************************************************/
.fontsize-0{font-size: 0em;}
.fontsize-0a{font-size: 0.5em}
.fontsize-0b{font-size: 0.7em}
.fontsize-1a{font-size: 1em;}
.fontsize-1b{font-size: 1.5em;}
.fontsize-2a{font-size: 2em;}
.fontsize-2b{font-size: 2.5em;}
.fontsize-3a{font-size: 3em;}
.fontsize-3b{font-size: 3.5em;}

/************************************************************
FLOAT
************************************************************/
.fl-left{float: left;}
.fl-right{float: right;}
.fl-none{float: none;}

/************************************************************
TEXT-ALIGN
************************************************************/
.tx-right{text-align: right !important;}
.tx-left{text-align: left !important;}
.tx-center{text-align: center !important;}
.tx-justify{text-align: justify !important;}

/************************************************************
TEXT-TRANSFORM
************************************************************/
.tx-upper{text-transform: uppercase; }
.tx-lower{text-transform: lowercase; }
.tx-capitalize{text-transform: capitalize; }

/************************************************************
TEXT-DECORATION
************************************************************/
.tx-line-through{text-decoration: line-through}

/************************************************************
TEXT-DECORATION
************************************************************/
.tx-italic{font-style: italic }

/************************************************************
BORDAS
************************************************************/
.border-none{border:none;}

/************************************************************
DISPLAY
************************************************************/
.ds-block{display: block !important;}
.ds-inblock{display: inline-block !important;}
.ds-inline{display: inline !important;}
.ds-flex{display: flex !important;}
.ds-grid{display: grid !important;}
.ds-none{display: none !important;}


/************************************************************
HELPERS
************************************************************/
.text-shadow{text-shadow: 1px 1px 0 #ccc}
.box-shadow{box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.7); -moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.7); }
.box-radius{border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}
.clearfix{clear: both;}

/************************************************************
LOADER
************************************************************/
.loader {display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; overflow: hidden; background: url('../img/loaders/loader.svg') 50% 50% no-repeat rgba(0,0,0,0.9);}
.loader p{position: fixed; top: 60%; color: #fff; font-size: 1.5em; font-weight: bold; width: 100%; text-align: center;}
.loader-container{display:inline-block; width: 100px; margin: 0 30px; padding: 0; }
.loader-container .loader-field{display: none; width: 100px; margin: 0 10px;}

.loader-form{width: 100%; height: 100%; top: 0; left: 0; padding: 0; position: fixed; display: none; z-index: 9999}
.loader-form .background-black{position: fixed; z-index: 998; width: 100%; height: 100%}
.loader-form .loader-area{width: 120px; margin: 0; position: relative; z-index: 999; top: 25%; left: calc(50% - 60px)}
.loader-form .loader-color{width: 150px;}
.loader-form .loader-text{color:#fff; font-weight: bold; font-size: 1.2em; text-align: center;}


    /************************************************************
    MENSAGENS DO SISTEMA
    ************************************************************/
/*Info*/
.alert {position: fixed !important; padding: 20px; margin: 30px; color: white; border-radius: 5px; z-index: 999 !important;}
.alert-item{position: relative; width: fit-content; width: -moz-fit-content;  padding: 20px 20px 20px 20px; margin: 10px; background-repeat: no-repeat; background-position-x: 20px; background-position-y: center; background-size: 40px 40px; box-shadow: 2px 2px 10px #333; border-radius: 3px; font-size: 1em; text-align: left; color: #fff; overflow: hidden; z-index: 100;}
.close-alert {margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 30px; line-height: 20px; cursor: pointer; transition: 0.5s;}
.close-alert:hover {color: #333; }

.alert-info{background-color: rgba(28,119,212,0.95);}
.alert-warning{background-color: rgba( 255,128,0,0.95);}
.alert-error{background-color: rgba( 255,82,82,0.95);}
.alert-deprecated{background-color: rgba( 51,51,51,0.95);}
.alert-accept{background-color: rgba( 76,175,80,0.95);}




/************************************************************
BUTTON
************************************************************/
/*Button flat*/
@supports not ((width: fit-content) or (width: -moz-fit-content)){
    .bt-flat{display: inline-block;  width: auto;}
    .bt-clean{display: inline-block; width: auto;}
}

.bt-flat{display: inline-block; border: none; border-radius: 3px; width: fit-content;  width: -moz-fit-content; text-transform: uppercase; font-style: normal; text-align: center; padding: 10px; margin: 5px; box-shadow: 0px 0px 2px #555; cursor: pointer; transition: box-shadow 1s, filter 0.4s; background-color: var(--ascentColor); color: var(--fontColor);}
.bt-flat:hover{box-shadow: 0px 0px 10px #555;}
.bt-flat:active{filter:opacity(0.8);}
.bt-flat:disabled{filter:opacity(0.3);}


/*Botão Minímo*/
.bt-min{display: inline-block; border: none; color: #333; border-radius: 50%; padding: 5px 7px; margin: 5px; font-size:1em ;  transition: background-color 0.5s;}
.bt-min-label{display: inline-block; border: none; background-color: rgba(0,0,0,0); color: #333; border-radius: 5px; padding: 5px 7px; margin: 5px; font-size:1em ;  transition: background-color 0.5s;}
.bt-min:hover, .bt-min-label:hover{background-color: #333; color: #fff; cursor: pointer}
.bt-min:disabled{filter:opacity(0.3);}

/*Cores de botões*/
.bt-green{background-color: rgba( 76,175,80,0.95); color: #fff; }
.bt-blue{background-color: rgba(28,119,212,0.95); color: #fff; }
.bt-orange{background-color: rgba( 255,128,0,0.95); color: #fff; }
.bt-red{background-color: rgba( 255,82,82,0.95); color: #fff; }
.bt-black{background-color: rgba( 51,51,51,0.95);; color: #fff; }



/*AVATAR*/
.avatar{width: 100%; border: 1px dashed #333; border-radius: 50%; }
.background{display: inline-block; width: 100%; border: 1px dashed #333}

/************************************************************
DEBUG
************************************************************/
.debug{max-width: 500px; max-height: 500px; position: fixed; top: 50px; margin: 0 auto; color: #333; background-color: rgba(255,255,255); z-index: 999; overflow: auto;}

/************************************************************
DESENVOLVIMENTO
************************************************************/
.in-developer{padding: 15px; background-color: rgba(0,0,0,0.5); color: #fff; position: fixed; z-index: 999; bottom: 5px; right: 0}

/************************************************************
SCROLLBAR
************************************************************/

/*Barra de fundo, no estado normal*/
::-webkit-scrollbar {width: 8px; height: 5px; background-color: rgba(0,0,0,0.05); margin: 5px;}

/*Barra de fundo, quando o marcador de inicio ou fim é ativado*/
::-webkit-scrollbar:active{background-color: rgba(0,0,0,0.5);}

/*Barra de fundo, quando o marcador tem o foco (mouse hover)*/
::-webkit-scrollbar:hover{background-color: rgba(0,0,0,0.2);}

/*Marcadores de inicio e fim da rolagem*/
::-webkit-scrollbar-button {width: 8px; height: 5px; background-color: #448AFF;}

/*Barra de fundo, sem mouse hover*/
::-webkit-scrollbar-track {background-color: rgba(0,0,0,0.007); }

/*Barra de fundo, com mouse hover*/
::-webkit-scrollbar-track:hover {background-color: rgba(0,0,0,0.0); }

/*Barra de fundo, quando recebe click*/
::-webkit-scrollbar-track:active {background-color: rgba(0,0,0,0.0); }

/*Barra da posição atual, sem mouse hover*/
::-webkit-scrollbar-thumb {background-color: #448AFF; }

/*Barra da posição atual, com mouse hover*/
::-webkit-scrollbar-thumb:hover {background: #448AFF; }

/*Barra da posição atual, com click do mouse*/
::-webkit-scrollbar-thumb:active {background-color: #2196F3; }