.app-input-group{

    padding-right: 0.2rem;
    position: relative;
    min-width: 30px;
    width: 100%;
    padding-bottom:0.5rem;
    box-sizing: border-box;
    text-align: left /* !important */;
}

.app-input-box{

    width: 100%;
    position: relative;

}

.app-input-helper {
    font-size:0.85rem;
}

/* hide outline before loading */
.app-input{
  
    border: none;
    outline: none !important;
}


/* Input*/
.app-input-box > input{
  
    border: 0.05rem solid var(--primary);
    border-radius:0.5rem;
  width: 100%;
  height: 1.9rem;
  font-size: 0.95rem;
  padding-left: 0.4rem;
  padding-right: 2rem;
  padding-top:0.3rem;
  padding-bottom:0.3rem;
  background: transparent !important;
  outline: none !important;
}

.app-input-box > input:hover{
    border: 0.1rem solid var(--primary-input-hover);
}

.app-input-box > input:focus{
    border: 0.1rem solid var(--primary-input-hover);
}

.app-input-invalid{
    border: 0.1rem solid var(--danger) !important;
}

.app-input-box > input[type=date]{

  padding-right: 0px !important;
}

.app-input-group > .app-input-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--primary);
  white-space: normal !important;
  
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.app-input-label-hover {
    color: var(--primary-input-hover) !important;
}


.app-input-box > i {
  position: absolute;
  top: 0.5rem;
  right: 0.4rem;
  font-size: 0.9rem;
  color: var(--primary);
  fill: var(--primary);
}

.app-input-box > i.button {
    top: 0.3rem;
    right: 0.3rem;
  color: var(--white) !important;  
  background-color: var(--primary);
  padding: 0.3rem 0.4rem !important;
  font-size: 0.7rem !important;
  border-radius: 50%;
}

.app-input-box > i.button:hover {
  cursor: pointer;
  background-color: var(--primary-input-hover);
}

.app-input-box > i.button:active {
  cursor: pointer;
  background-color: var(--primary-input-hover-light);
}



.app-input-group > .app-input-box > input:focus + .app-input-label {
  color: var(--primary-input-hover);
}

.editor-input-underlined > input:required + .editor-input-label::after,
.editor-input-filled > input:required + .editor-input-label::after {
  content: " *";
  color: red;
}



.editor-input-underlined:not(.editor-input-danger) > input:focus,
.editor-input-filled:not(.editor-input-danger) > input:focus {
  border-color: var(--primary-input-hover);
}

.editor-input-underlined:not(.editor-input-danger) > input:focus ~ i,
.editor-input-filled:not(.editor-input-danger) > input:focus ~ i {
  fill: var(--primary-input-hover);
  color: var(--primary);
}


/* SELECT */
.app-input-box > select{
  
    border: 0.05rem solid var(--primary);
    border-radius:0.5rem;
  width: 100%;
  height: 1.9rem;
  font-size: 0.95rem;
  padding-left: 0.4rem;
  padding-right: 2rem;
  padding-bottom:0.3rem;
  background: transparent !important;
  outline: none !important;
}

.app-input-box > select:hover{
    border: 0.1rem solid var(--primary-input-hover);
}

.app-input-box > select:focus{
    border: 0.1rem solid var(--primary-input-hover);
}



/* TEXTAEA */
.app-input-box > textarea{
  
    border: 0.05rem solid var(--primary);
    border-radius:0.5rem;
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  line-height: 147.6%;
  padding-left: 0.4rem;
  padding-right: 2rem;
  padding-bottom:0.3rem;
  background: transparent !important;
  outline: none !important;
}

.app-input-box > textarea:hover{
    border: 0.1rem solid var(--primary-input-hover);
}

.app-input-box > input:focus{
    border: 0.1rem solid var(--primary-input-hover);
}


/* INPUT BORDER ON ERROR */

.app-input.app-input-error{
  
  border: 0.18rem solid var(--danger) !important;

}

input.app-input:disabled,
select.app-input:disabled,
textarea.app-input:disabled{
  background-color: #eee !important;
  color: #555 !important;
}


/* Checkbox */
.app-check-group{
    padding: 2px;
    position: relative;
    padding-left:23px;
    cursor: pointer;
}
.app-check-box{
    position:absolute;
    top:2px; left:0;
    float:left;
}

.app-check{

    height:18px !important;
    width:18px !important;
    margin-top: 1px;
    float:left;    
}

.app-check-label{
    font-size: 1rem;
    float:left;
}