.wrsi
{
    margin: 5px;
    padding: 5px;
    width: auto;
}

/*** usado no framework - NÃO EXCLUIR ***/
.wrsiLayoutRow
{
    display: inline;
}

/*** usado no framework - NÃO EXCLUIR ***/
.wrsiLayoutColumn
{
    display: block;
}

.wrsiH
{
    font-size: '';
}

.wrsiLabel
{
    margin:  0px, 0px, 0px, 5px;
    padding: 0px, 0px, 0px, 0px;
    width: auto;
    font-size: 14px;
    color: blue;
}

.wrsiDiv
{
    padding: 0px;
}

.wrsiLegend
{
    margin-left: 10px;
    font-size: 14px;
    color: blue;
}

/*** usado prinicpalmente para <img> isolado usado como ícone - NÃO EXCLUIR ***/
.wrsiIcon
{
    width: 13px; 
}

/*** usado em <input> com classes wrsiIcon e wrsiInput OU wrsiIcon e wrsiTextarea juntas - NÃO EXCLUIR ***/
.wrsiIcon.wrsiInput,  .wrsiIcon.wrsiButton, .wrsiIcon.wrsiTextarea, 
.wrsiIcon.wrsiSelect, .wrsiIcon.wrsiMeter,  .wrsiIcon.wrsiProgress
{
    padding-right: 25px;
    background-size: 12px;
    background-position-x: calc(100% - 5px);
    background-position-y: center;
    background-repeat: no-repeat;
}

/*** usado em <input> com classes wrsiIcon e wrsiTextearea juntas ***/
/*** mantém o ícone 5px abaixo do canto superior direito deixando espaço para a barra de rolagem ***/
/*** NÃO EXCLUIR ***/
.wrsiIcon.wrsiTextarea, .wrsiIcon.wrsiSelect
{
    background-position-x: calc(100% - 20px);
    background-position-y: 5px;
}

/*** usado em <input> com classes wrsiIcon e wrsiButton juntas com valor = '' ***/
/*** mantem o ícone centralizado ***/
/*** NÃO EXCLUIR ***/
.wrsiIcon.wrsiButton[value='']
{
    background-position-x: center;
}

.wrsiInput, .wrsiSelect, .wrsiTextarea, .wrsiFieldset, .wrsiButton
{
    border: 2px solid #a7a7ed;
    border-radius: 15px;
    margin-top: 0px;
    width: auto;
    text-align: left;
}

.wrsiDate, .wrsiNumber
{
    width: 100px;
}

.wrsiColor
{
    width: 70px;
    height: 36px;
}

.wrsiMeter 
{
    width: 25%;
    height: 36px;
}

.wrsiProgress
{
    width: 25%;
    height: 25px;
}

.wrsiNote
{
    /* border: 1px solid black; */
    color: blue;
    border: none;
    width:  auto;
    padding: 0px;
    margin-left: 0px;
}

.wrsiNote.wrsiLayoutColumn
{
    margin-left: 5px;
}

.wrsiField, .wrsiGroup
{
    border:  0px solid #a7a7ed;
    border-radius: 5px;
    margin: 0px;
    padding: 0px;
}

.wrsiFieldItem
{
    margin:5px;
    padding-left:2px;
    border-style:none;
    width:10px;
}

.wrsiFieldset
{
    /* overflow: auto; */
}

.wrsiFile
{
    /* max-width:300px; */
    /* display:block; */
}

.wrsiButton
{
    height: 26px;
    text-align: center;
    color: #ffffff;
    background-color: #bdbdf6;
    border-color: #7f7f7f;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 0px 1px #363535;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.wrsiButton:active
{
    color: black;
    /*** altera a posição dos paddings em 1px para dar o efeito de pressionamento ***/
    padding-top:    6px;
    padding-right:  calc(padding-left - 1px);
    padding-bottom: 4px;
    padding-left:   6px;
    background-position-y: calc(background-position-y + 2px);
    box-shadow: 0px 0px 0px 0px #363535, inset 2px 2px 2px #363535;
    transform: translate(2px 2px);
}

button.wrsiAccordion
{
    border: 1px solid;
    width: 200px;
    height: 50px;
}

.wrsiCheckbox, .wrsiRadio
{
    cursor:pointer;
}

.wrsiList
{
    color:blue;
    margin-left:8px;
    padding:0px 0px 0px 15px;
}

.wrsiInvalid
{
    color:brown;
    font-weight:bold;
    background-color:#f1f1f1;
}

.wrsiHidden
{
    visibility: hidden;
}

.wrsiSecret
{
    border: none;
    width:  0px;
    height: 0PX;
}

:invalid
{
    border-color: orangered;
}

::marker
{
    color:blue;
    font-size:25px;
}