:root {
    --azulescuro: #003970;
    --azulroyal: #004FAF;
    --azulpadrao: #016AA1;
    --azulclaro: #82D4FF;
    --cinzaescuro: #565657;
    --cinzaclaro: #eee;
    --verdevertex: #6FD44E;
    --branco: #ffffff;
    --preto: #000000;
    --vermelho: #B23C3C;
    --verdeescuro: #36A910;
    --bordarcolorinputs: #C6DFED;
    --amareloalerta: #FFE500;
}

html {
    scroll-padding-top: 200px;
}

/*change the thinkness of the scrollbar here*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* -webkit-box-shadow: inset 0 0 6px #002b5f ; */
    -webkit-box-shadow: inset 0 0 6px #ccc ;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background: var(--cinzaclaro);
  }
  
/*add a shadow to the scrollbar here*/
::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 0px #002b5f; */
    -webkit-box-shadow: inset 0 0 0px #ccc;
    box-shadow: inset 0 0 0px #ccc;
    -webkit-border-radius: 10px;
        /* border-radius: 10px; */
}

/*this is the little scrolly dealio in the bar*/
::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    background: #ccc;
    height: 3px;
}

/*nobody needs this little scrollbar corner, I mean really, get rid of it haha*/
::-webkit-scrollbar-corner {
    display: none;
    height: 0px;
    width: 0px;
}

.h-100{height: 100%!important;}
.h-200{height: 200px!important;}
.h-300{height: 300px!important;}
.h-400{height: 400px!important;}
.h-500{height: 500px!important;}
.h-600{height: 600px!important;}
.h-700{height: 700px!important;}
.h-800{height: 800px!important;}

.w-300{width: 300px!important;}
.w-400{width: 400px!important;}
.w-500{width: 500px!important;}
.w-600{width: 600px!important;}
.w-700{width: 700px!important;}
.w-800{width: 800px!important;}
.w-900{width: 900px!important;}
.w-1000{width: 1000px!important;}
.w-1200{width: 1200px!important;}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/* Default bootstrap */
.form-control{
    font-size: 0.8rem;
}
.form-label {
    margin-bottom: 5px;
    font-size: 0.8rem;
}   
.form-select{
    font-size: 0.8rem;
}
/************/
.hide{
    display: none!important;
}
.show{
    display: block!important;
}
 /* botão */
 .btn-pd {
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0px 5px 5px #00000030;
    border: 0;
    color: #fff;
    text-decoration: none;
    height: 35px;
    transition: all 1s;
}
.btn-pd-verde{
    background: var(--verdeescuro);
}
.btn-pd-verde:hover{
    background: var(--verdevertex);
}
.btn-pd-azul{
    background: var(--azulescuro);
}
.btn-pd-azul:hover{
    background: var(--azulpadrao);
}
/*  */
.container-full{
    display: none;
}
.loading-init{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-init h3{
    color: #999999;
    letter-spacing: -0.5px;
    font-size: 18px;
    padding-top: 20px;
}
.loading-init .ico{
    padding: 40px 0;
    background: url('../img/loading.gif') no-repeat center center;
    background-size: 50%;
    opacity: 0.9;
    display: block;
}
.loading-init h3 span{
    position: relative;
    top: 50px;
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    margin: auto;
    
  }
  .loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #ccc;
    animation: prixClipFix 2s linear infinite ;
  }
  .loader::after{
    border-color: var(--azulroyal);
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 6px;
    opacity: 0.8;
  }

  @keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
  }

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }