body {


    /*** colors for SweetAlert2 ***/
    --swal-error: #cc3333;
    --swal-error-hover: #b81f1f;
    --swal-success: #008c00;
    --swal-success-hover: #007800;
    --swal-warning: #e67300;
    --swal-warning-hover: #d25f00;
    --swal-info: #0d6efd;
    --swal-info-hover: #005ae9;
    --swal-font: #efefef;

    /** other color variables **/
    --color-green: #008c00;
    --color-red: #cc3333;
    --color-red-hover: #b02a37;
    --color-orange: #e67300;
    --color-white: #fefefe;
    --blue-primary: #0d6efd;
    --blue-primary-hover: #0b5ed7;
	
	--switcher-dark-mode: #2b2f33;
	--switcher-light-mode: #e0e0e0;
	--switcher-color-100: rgba(255,255,255,1.00);
	--switcher-color-075: rgba(255,255,255,0.75);
	--switcher-color-050: rgba(255,255,255,0.50);




}





/*** sweetAlert2 ***/
.swal2-popup {
    font-size: 0.9rem !important;
    font-weight: lighter !important;
    font-family: firasans;
}
.colored-toast.swal2-icon-success {
    background-color: var(--swal-success) !important;
    cursor: default;
}
.colored-toast.swal2-icon-error {
    background-color: var(--swal-error) !important;
    cursor: pointer;
}
.colored-toast.swal2-icon-warning {
    background-color: var(--swal-warning) !important;
    cursor: default;
}
.colored-toast.swal2-icon-info {
    background-color: var(--swal-info) !important;
    cursor: default;
}
.colored-toast .swal2-title,
.colored-toast .swal2-close,
.colored-toast .swal2-html-container {
    color: var(--swal-font);
}
/*** end of sweetAlert2 ***/














/*** links ***/
a {text-decoration: none !important;}

a.bcg-zero {
    color: var(--ft-color-op-100);
	text-decoration: none;
}
a.bcg-zero:hover {
    color: #e67300;
}

/*** forms ***/
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
    outline: 0 !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.form-control:focus {
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}



/*** my-buttons ***/

.btn.btn-orange {
    background-color: var(--swal-warning);
    border-color: var(--swal-warning);
    color: var(--swal-font);
}

.btn.btn-orange:hover,
.btn.btn-orange:active {
    background-color: var(--swal-warning-hover);
    border-color: var(--swal-warning-hover);
	color: var(--swal-font);
}

.btn-outline {
    background-image: var(--end-pattern);
    color: var(--ft-color-op-100);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    background-image: none;
    background-color: var(--blue-primary);
    color: var(--color-white);
    border: 1px solid var(--blue-primary);
}

.btn-outline-active {
    background-image: none;
    background-color: var(--blue-primary);
    color: var(--color-white);
    border: 1px solid var(--blue-primary);
}

.btn-red {
    background-color: var(--color-red);
    color: var(--ft-color-op-100);
    border: 1px solid var(--color-red);
}

.btn-red:hover {
    background-color: var(--color-red-hover);
    color: var(--color-white);
    border: 1px solid var(--color-red-hover);
}

/* =========================
   BACKGROUNDS
========================= */
.bg-transparent {background-color: transparent;}
.bg-zero {background-color: var(--color-bg-zero);}
.bg-start {background-color: var(--color-bg-start);}
.bg-orange {background-image: var(--orange-pattern);}
.bg-red {background-image: var(--red-pattern);}
.bg-green {background-image: var(--green-pattern);}
.bg-middle {background-image: var(--start-pattern);}
.bg-lighter {background-image: var(--end-pattern);}
.bg-border-color {background-color: var(--color-border);}
.bg-gradient-blue {background-image: linear-gradient(to right, #0c0c4f , #2351f4);}

/*** utilities ***/
.bor-bottom { border-bottom: 1px solid var(--color-border); }
.bor-top { border-top: 1px solid var(--color-border); }
.bor-all { border: 1px solid var(--color-border); }

.col-gray { color: var(--color-border); }
.col-white { color: var(--color-white); }

.ft-size-080 {font-size: 0.80em;}
.ft-size-085 {font-size: 0.85em;}
.ft-size-090 {font-size: 0.90em;}
.ft-size-110 {font-size: 1.1em;}
.ft-size-120 {font-size: 1.2em;}
.ft-size-130 {font-size: 1.3em;}
.ft-size-140 {font-size: 1.4em;}
.ft-size-150 {font-size: 1.5em;}
.ft-size-250 {font-size: 2.5em;}
.ft-size-300 {font-size: 3.0em;}
.ft-size-325 {font-size: 3.25em;}
.ft-color-020 {color: var(--ft-color-op-020);}
.ft-color-030 {color: var(--ft-color-op-030);}
.ft-color-040 {color: var(--ft-color-op-040);}
.ft-color-050 {color: var(--ft-color-op-050);}
.ft-color-060 {color: var(--ft-color-op-060);}
.ft-color-070 {color: var(--ft-color-op-070);}
.ft-color-080 {color: var(--ft-color-op-080);}
.ft-color-090 {color: var(--ft-color-op-090);}
.ft-color-100 {color: var(--ft-color-op-100);}
.rounded-25 { border-radius: 25px; }
.rounded-left {border-top-left-radius: 15px; border-bottom-left-radius: 15px;}
.overflow-auto { overflow: auto; }
.img-props {width: 70px; height: 70px;}


/*** dark/light-mode switcher ***/

.switch-label {color: var(--ft-color-op-030);}
.switch-color-100 {color: var(--switcher-color-100);}
.switch-color-075 {color: var(--switcher-color-075);}
.switch-color-050 {color: var(--switcher-color-050);}
.switch-fs-size-100 {font-size: 1.2em;}
.toggle {cursor: pointer; display: inline-block;}
.toggle-switch {
    display: inline-block;
    background: var(--blue-primary);
    border-radius: 16px;
    width: 38px;
    height: 24px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}
.toggle-switch:before, .toggle-switch:after {content: "";}
.toggle-switch:before {
    display: block;
    background: var(--color-white);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {background: var(--color-white);}
.toggle-checkbox:checked + .toggle-switch {background: var(--blue-primary);}
.toggle-checkbox:checked + .toggle-switch:before {left: 18px;}
.toggle-checkbox {position: absolute; visibility: hidden;}