:root {
    --color-primary: #489AFF;
    --color-success: #6AE45E;
    --color-warning: #FFA25C;
    --color-danger: #FF5A5A;
    --color-white: #ffffff;

    --color-disabled: #BBBBBB;

    --lc-color-primary: #B0D4FF;
    --lc-color-success: #B6FFAE;
    --lc-color-warning: #FFD3AE;
    --lc-color-danger: #FFB6B6;

}



/** INPUTS **/
.vui-container{
  padding: 0.5rem 0px;
}

.vui-label{
  display: block;
  color: #5D5D5D;
  font-size: 0.8rem;
  padding: 4px;
}

.vui-field{
    padding: 0.4rem 0.4rem;
    border-radius: 8px;
    border: 2px solid #C2C2C2;
    font-size: 1rem;
    width: 100%;
}

.vui-field:focus{
    border-color: #DADADA;
    outline-color: var(--color-primary);
    outline: 3px solid #C3E2FF;
}



/** MODAL **/
.vui-modal{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    background-color: #48484878;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.vui-modal-body{
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    background-color: #FFFFFF;
    padding: 1rem;
    border-radius: 8px;
    z-index: 10;
}




/** UNIVERSAL STYLES **/
.shadow{box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);}
.shadow-md{box-shadow: 0px 8px 19px 4px rgba(0,0,0,0.1);}
.shadow-lg{box-shadow: 0px 8px 19px 12px rgba(0,0,0,0.1);}





/** BUTTON BASE **/
.btn {
    position: relative;
    overflow: hidden;
    font-size: 16px;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: #fff;
    color: #212121;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/** OUTLINED BASE **/
.btn.btn-outlined {
    background-color: transparent;
    border: 1px solid var(--color-disabled);
    color: var(--color-disabled);
}

/** CONTAINED BASE **/
.btn.btn-contained {
    color: #fff;
    border: 1px solid transparent;
    /* background-color removed to allow user-defined bg */
}

/** PRIMARY VARIANTS **/
.btn.btn-outlined.primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn.btn-contained.primary,
.btn.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/** SUCCESS VARIANTS **/
.btn.btn-outlined.success {
    border-color: var(--color-success);
    color: var(--color-success);
}

.btn.btn-contained.success,
.btn.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/** WARNING VARIANTS **/
.btn.btn-outlined.warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.btn.btn-contained.warning,
.btn.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

/** DANGER VARIANTS **/
.btn.btn-outlined.danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn.btn-contained.danger,
.btn.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

/** ACTIVE STATE **/
.btn:active {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/** RIPPLE EFFECT **/
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 600ms linear;
    pointer-events: none;
    opacity: 0.5;
    width: 100px;
    height: 100px;
}

/* Ripple colors */
.btn.btn-outlined.primary .ripple,
.btn.btn-contained.primary .ripple,
.btn.btn-primary .ripple {
    background-color: var(--lc-color-primary);
}

.btn.btn-outlined.success .ripple,
.btn.btn-contained.success .ripple,
.btn.btn-success .ripple {
    background-color: var(--lc-color-success);
}

.btn.btn-outlined.warning .ripple,
.btn.btn-contained.warning .ripple,
.btn.btn-warning .ripple {
    background-color: var(--lc-color-warning);
}

.btn.btn-outlined.danger .ripple,
.btn.btn-contained.danger .ripple,
.btn.btn-danger .ripple {
    background-color: var(--lc-color-danger);
}

.btn.btn-outlined .ripple {
    background-color: var(--color-disabled);
}

/** KEYFRAMES **/
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-main-icon{
  font-size: 1rem !important;
  vertical-align: middle;
}


.btn-icon .btn-main-icon{
  padding-right: 0;           
}


/** TEXTS FORMATTING **/
.text-white{color: var(--color-white);}
.text-primary{color: var(--color-primary);}
.text-success{color: var(--color-success);}
.text-danger{color: var(--color-danger);}
.text-warning{color: var(--color-warning);}

.fs-small{font-size: 0.5rem;}
.fs-medium{font-size: 1.5rem;}
.fs-large{font-size: 2rem;}
.fw-bold{font-weight: bold;}