:root{
    --primary: #f8a039;
    --secondary: #ee3f42;
    --green: rgb(74, 165, 74);
    --red: rgb(165, 38, 38);
    --blue: rgb(0, 100, 194);
    --gray: #6a6b6e;
    --dark: #000;
    --primary-alpha: rgb(248, 160, 57, 0.23);  
}

*{
    scroll-behavior: smooth;
}

#sidebar-toggle{
    user-select: none;
    cursor: pointer;
}

.app-sidebar__overlay{
    transition: 0.3s;
    background: rgba(0,0,0,0.4);
    visibility: hidden;
    opacity: 0;
    z-index: 1026;
}

body{
    background: var(--primary-alpha);
}

aside.app-sidebar{
    transition: all 0.3s;
    transform: translate3d(0,0,0);
}

body.side-bar-opened aside.app-sidebar{
    transform: translate3d(-17em,0,0);
}

body.side-bar-opened .app-sidebar__overlay{
    visibility: visible;
    opacity: 1;
}

body.side-bar-opened .main-content{
    margin-left: 0;
}

body.side-bar-opened .main-header{
    padding-left: 0;
}

/* Responsives */
@media( max-width: 767px ){
    aside.app-sidebar{
        transform: translate3d(-17em,0,0);
    }
    body.side-bar-opened aside.app-sidebar{
        transform: translate3d(0,0,0);
    }
}

/* Overrides */
.ui-widget-overlay{
	background: rgba(0,0,0,0.4);
}

.ui-dialog{
	border: none!important;
    border-radius: 6px!important;
    font-family: inherit!important;
	padding: 1em!important;
}

.ui-widget-header{
	background: #fff;
    color: inherit;
    border: none;
}

.ui-dialog .ui-dialog-titlebar-close{
	border: none;
    background: #d22d53;
    border-radius: 3px;
    height: 24px;
}

.ui-dialog .ui-dialog-titlebar-close:before {
    content: "X";
    color: #fff;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
    font-family: inherit!important;
    font-size: inherit!important;
}

.ui-dialog .ui-dialog-buttonpane{
    border: none;
}

#si-999, #aceptar-999, #aceptar-1{
    background: #1ea935;
    color: #fff;
}

#no-999, #cancelar-1{
    background: lightgray;
}

.btn-link{
    color: var(--primary);
}

.btn-main-primary{
    background: var(--primary);
    border-color: var(--primary);
}

.main-signup-header .row>div:first-child .btn, .main-signup-header .row>div:first-child .sp-container button{
    background: var(--primary);
}

.card, .main-header{
    box-shadow: none;
}

/* Helpers */
.bg-primary-alpha{
    background: var(--primary-alpha)!important;
}

.btns-wrapper > *{
    display: block;
    width: 100%;
    margin: 2px;
}
