/* 
21/07/2022 - Talles Roque de Freitas - Começo do Scap CSS - Style Capsule CSS

A idéia é ter um arquivo "dispositivo" principal fixo (scap.css) que recebe um
arquivo "cápsula" customizável (scap.cap.css) que contém a identidade visual de um site.

Os termos são definidos/configurados na "cápsula", através de variáveis css, 
e organizados/aglomerados em classes no "dispositivo". O html então chama as classes/id's
do dispositivo. A idéia é facilitar e organizar a criação de identidades visuais distintas
para sites.

Possui também um arquivo "opinionated" (scap.opinionated.css) que define tags html no css.
Normalmente scap.css não define nenhuma tag html, define apenas classes para só influenciar
seu layout quando for explicitamente chamado. "Opinionated" define as tags diretamente, te
dando um layout "padrão" sem você ter que se preocupar muito em estilizar. O scap.opinionated.css
não precisa ser chamado diretamente no layout pois é declarado dentro do scap.css. Para não
utilizá-lo basta comentar a linha onde ele é chamado.

Ordem recomendada de css no layout:

scap.cap.css  <--- identidade visual do site, customizável, pode ser renomeado.
scap.css  <------- arquivo scap padrão, organiza as variáveis do scap.cap.css em classes.
override.css <---- opcional, arquivo seu para sobreescrever qualquer coisa do scap que não sirva no seu site.


*/


/* comentar linha abaixo se quiser desativar modo "opinionated" (estiliza tags) */
/* @import "scap.opinionated.css"; */


/* 
-----------------------------------
 -        ||button area||        -
-----------------------------------
*/

.button {
    cursor: pointer; /* default for buttons */
    display: inline-block; /* should be standard for all buttons */
    line-height: var(--text-line-height-close-01); /* buttons should have a specific line-height, sometimes different from the rest of the text*/
    text-align: center; /* should be standard for all buttons */
    text-decoration: var(--text-decoration-button) !important; /* remove 'important' later. its there now to address issues upstreams */
    /*vertical-align: middle;*/ /* default, probably unnecessary*/
    border: var(--border-button);
    padding: var(--padded-text-main);/*0.375rem 0.75rem;*/ /*0.8rem 0.9rem;*/
    font-size: var(--font-size-main);
    border-radius: var(--border-radius-main);
}

.button-main{
    color: var(--color-font-over-dark);
    background-color: var(--color-main);
}
.button-main:hover {
    color: var(--color-font-over-dark);
    background-color: var(--color-main-lighten-01);
}
.button-main:active {
    box-shadow: var(--box-shadow-main);    
}

.button-large{
    padding: var(--padded-text-large);
}


/* parte de sobrescrita a ser refatorada/removida com o tempo */


.sds-card-group{

    box-shadow: 3px 3px 3px black;


}



/* sobrescreve tom de botões vermelhos de #dc3545 para x #bE2b2b
   e os hovers de #bb2d3b para #e43636 */




  .btn-check:focus + .btn-danger, .btn-danger:focus {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #b02a37;
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
  }
  .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
    color: #ffffff;
    background-color: #b02a37;
    border-color: #a52834;
  }
  
  .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
  }
  
  .btn-danger:disabled, .btn-danger.disabled {
    color: #ffffff;
    background-color: #BE2B2B;
    border-color: #BE2B2B;
  }


/* substitui botões amarelos */



.btn-primary:hover {
    color: #ffffff;
    background-color: #e43636 !important;
    border-color: #e43636 !important;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #bb2d3b;
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5) !important;
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5) !important;

}
.btn-primary:disabled, .btn-primary.disabled {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}



/* substitui botões azuis */


.btn-info:hover {
    color: #ffffff;
    background-color: #e43636;
    border-color: #e43636;
}
.btn-check:focus + .btn-info, .btn-info:focus {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #bb2d3b;
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5) !important;
}
.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
    color: #ffffff;
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}
.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5) !important;
}   

/*
.btn-outline-info {
    color: #BE2B2B !important;
    border-color: #BE2B2B !important;
}
*/
.btn-outline-info:hover {
    color: #ffffff;
    background-color: #BE2B2B !important;
    border-color: #BE2B2B !important;
}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5) !important;
}
.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
    color: #ffffff;
    background-color: #BE2B2B !important;
    border-color: #BE2B2B !important;
}
.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5) !important;
}
.btn-outline-info:disabled, .btn-outline-info.disabled {
    color: #BE2B2B !important;
    background-color: transparent;

}
  

.link-info {
    color: #BE2B2B;
}

.border-info {
    border-color: #BE2B2B !important;
}


.btn-sample:active {
    color: #BE2B2B;
    border-color: #BE2B2B !important;
    box-shadow: none;
}


.btn-success:active:focus {
    color: #ffffff; 
    background-color: #161617; 
    border-color: #494F57;
}



/* sobrescreve estilo de campos de formulário*/

.form-control {
    margin: 5px;
}



/* sobrscreve tamanho do banner principal */

.fullspan{
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;    
}
/*
.container-fluid{
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
*/
/*
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
*/


/* reduzindo separação da primeira section*/


.short-section{
    padding: 4rem 0;
}
.form-group {
    margin-bottom: 2rem;
}



/* sobrescreve tamanho da imagem do logo da navbar */

#mainNav .navbar-brand img {
    height: 2.6rem;
}

/* sobrescreve o tamanho da navbar em si */

#mainNav {
    padding-top: 0.4rem;
    padding-bottom: 0.47rem;
    border: none;
    background-color: transparent;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}

.contrast-area{ /* meant for divs that use a stronger color */
    color: #ffffff;
    background-color: #BC2828;
    border-color: #BC2828;
}

.secondary-area{ /* meant for divs that use an alternate, usually more neutral color, like the backside of a product */
    color: #ffffff;
    background-color: #343a40;
    border-color: #343a40;    
}



.contrast-area{ /* meant for divs that use a stronger color */
    color: #ffffff;
    background-color: var(--color-main);
    border-color: var(--color-main);
}