:root {
    --success-subtle: #c5e2c5;
    --danger-subtle: #F8D7DA;
    --dark-subtle: #CED4DA;
    --secondary-subtle: #A8A8A8;
    --info-subtle: #adceeb63;
    --warning-2: #FD8E39;
    --bg-hover: #F8F9FA;
}
/* Bootstrap Update */
.form-row label { font-weight: 600; }
.button, .button-no-bck { cursor: pointer; font-size: 16px; padding: 4px; text-decoration: none; color: #000; }
.button:hover { background-color: #007bff; color: #fff; text-decoration: none; }
.button-no-bck:hover { background-color: transparent; color: #fff!important; text-decoration: none; }
.img-action:hover { filter: brightness(1.75) }
/*div.card-body:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.125); }*/
.table-sm td, .table-sm th, .table-sm span, .table-sm a {
    font-size: .65625rem;
}
.flex-center { display: flex; align-items: center; }
.flex-centered { display: flex; align-items: center; justify-content: center; }
/*.list-group-item-action:hover { background-color: #d3d3d3 }*/

/*.collapse { visibility: hidden; }*/

/*.collapse.show { visibility: visible; display: block; }*/

/*.collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-property: height, visibility; transition-property: height, visibility; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease; transition-timing-function: ease }*/

/*.collapsing.width { -webkit-transition-property: width, visibility; transition-property: width, visibility; width: 0; height: auto; }*/
/*.card-body .table tr:first-child td, .card-body .table tr:first-child th { border-top: 0; border-bottom: 0; }*/

/* background */
.bg-success-subtle { background-color: var(--success-subtle)!important; }
.bg-danger-subtle { background-color: var(--danger-subtle)!important; }
.bg-dark-subtle { background-color: var(--dark-subtle)!important; }
.bg-secondary-subtle { background-color: var(--secondary-subtle)!important; }
.bg-info-subtle { background-color: var(--info-subtle)!important; }
.bg-warning-2 { background-color: var(--warning-2)!important; }
.border-warning-2 { border-color: var(--warning-2)!important; }
.text-warning-2 { color: var(--warning-2)!important; }
.text-secondary-subtle { color: var(--secondary-subtle)!important; }
.hover { background-color: #d3d3d3; }
/* text */

/* Sorting */
table thead th.sorting { cursor: pointer; }
table thead th.sorting span:hover { text-decoration: underline; }
table thead .sorting_num_desc:after { font-family: 'Font Awesome 6 Free'; content: '\f163'; margin-left: 5px; text-decoration: none!important;}
table thead .sorting_num_asc:after { font-family: 'Font Awesome 6 Free'; content: '\f162'; margin-left: 5px; text-decoration: none!important;}
table thead .sorting_txt_desc:after { font-family: 'Font Awesome 6 Free'; content: '\f15e'; margin-left: 5px; text-decoration: none!important;}
table thead .sorting_txt_asc:after { font-family: 'Font Awesome 6 Free'; content: '\f15d'; margin-left: 5px; text-decoration: none!important;}
/*table thead .sorting_asc { background-image: url("../images/sort_asc.png"); }
table thead .sorting_desc { background-image: url("../images/sort_desc.png"); }
table thead .sorting_asc_disabled { background-image: url("../images/sort_asc_disabled.png"); }
table thead .sorting_desc_disabled { background-image: url("../images/sort_desc_disabled.png"); }*/

/* FormMaker Exclude */
.exc div.exclude { transition: all 2s ease-out; visibility: hidden; opacity: 0; }
.exc:hover div.exclude { transition: all 2s ease-out; visibility: visible; opacity: 1; }
.exc div.exclude.active { visibility: visible; opacity: 1; }

/* Form View */
.viewForm p.form-control-plaintext { padding: 0px; }
.viewForm label.form-label { margin-bottom: 0.2em; }

.cb-panel { padding: 5px 0px 5px 30px !important; }
.cb-panel input[type="checkbox"] { cursor: pointer; }
.cb-panel label::before, .cb-panel label::after { margin-top: 2px; }
.cb-panel input[type="checkbox"]:checked + label::before { background-color: #fff; border-color: #fff; }
.cb-panel input[type="checkbox"]:checked + label::after { color: #428bca; transform: scale(1) rotateZ(0deg); transition: all .2s ease-in; opacity: 1; }

/* FormMaker Calendar */
.calendar table tr td:hover { background-color: #ddd; }
.calendar table tr td { cursor: pointer; }
.calendar table tr td.sel { background-color: #66afe9; }
.calendar table tr td, .calendar table tr th { text-align: center; font-size: 80%; }

/* FormMaker Token Select */
.fmToken { padding: 0; height: auto; cursor: text; position: relative; }
.fmToken .img-remove { float: right; padding: 10px 4px; display: inline-block; color: red; cursor: pointer; opacity: 0.5; }
/*top:0px;position:absolute;right:0px;*/
.fmToken .img-remove:hover { opacity: 1; }
.form-control.focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); }
.form-control optgroup { color: #428bca; }
.form-control optgroup option { color: #000; }
.fmToken input { border: none; box-shadow: none; outline: 0px; margin: 6px 0 6px 12px; }
.fmTokenResult { display: inline; }
.fmTokenResult span { display: inline-block; box-sizing: border-box; border-radius: 3px; border: 1px solid #d9d9d9; background-color: #ededed; white-space: nowrap; cursor: default; padding: 2px 0 2px 6px; margin: 3px 0 3px 12px; cursor: default; }
.fmTokenResult span:hover { border-color: #b9b9b9; }
.fmTokenResult span a { display: inline-block; padding: 0 5px; color: #d9d9d9; }
.fmTokenResult span a:hover { text-decoration: none; color: #555; }
/*.fmTokenResult span.isLabel { border: 1px solid #2e6da4; background-color: #fff; padding: 0px;color:#2e6da4;}
.fmTokenResult span.isLabel label {font-style: italic;font-weight:normal;color:#fff;background-color: #337ab7;border-right: 1px solid #2e6da4;display: inline-block;padding:2px 6px;margin:0px 6px 0 0;}
.fmTokenResult span.isLabel a{padding: 2px 5px;margin-left:5px;}
.fmTokenResult span.isLabel a:hover {text-decoration: none; color:#fff;background-color: #337ab7; }
*/
.fmTokenResult span.isLabel { border: 1px solid #ccc; background-color: #fff; padding: 0px; color: #666; }
.fmTokenResult span.isLabel label { font-style: italic; font-weight: normal; color: #666; background-color: #ddd; border-right: 1px solid #ccc; display: inline-block; padding: 2px 6px; margin: 0px 6px 0 0; }
.fmTokenResult span.isLabel a { padding: 2px 5px; margin-left: 5px; }
.fmTokenResult span.isLabel a:hover { text-decoration: none; color: #666; background-color: #eee; }

.fmTokenSelect { display: none; position: absolute; z-index: 1031; overflow-y: auto; overflow-x: hidden; box-shadow: 0 5px 15px rgba(0,0,0,.5); }
.fmTokenSelectSearch { display: none; visibility: visible; }
.fmTokenSelect ul { margin: 0; }
.fmTokenSelect .hover { background-color: #ededed; cursor: pointer; }
.fmTokenSelect .selected { color: #bbb; cursor: no-drop; }
.fmTokenSelect .bg { background-color: #66afe9; border-radius: 4px; font-weight: bold; color: #fff; padding: 0 2px; }

.form-select-checkbox { cursor: default; }

.form-select-xs { padding: .15rem 1.25rem .15rem .25rem; font-size: .75rem; }

/* Loading */
.loader { border: 8px solid #ccc; /* Light grey */ border-top: 8px solid #66afe9; /* Blue */ border-radius: 50%; width: 50px; height: 50px; display: inline-block; animation: spin 2s linear infinite; }

.badge-right {float:right;}

.paper { box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12) }

/* Scroll-bar style */
::-webkit-scrollbar { background-color: #fff; width: 16px; }
::-webkit-scrollbar-thumb { background-color: #b5b5b5; border-radius: 16px; border: 5px solid #fff}
::-webkit-scrollbar-thumb:hover { background-color: #969696; border: 4px solid #fff; }
::-webkit-scrollbar-thumb:active { background-color: #7c7c7c; }
::-webkit-scrollbar-button { display: none; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.miniloader { border-width: 3px; height: 20px; width: 20px; }

.warning-input,
.error-input {
    display: block;
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.error-input{
    border-color: #c72824;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c72824'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c72824' stroke='none'/%3e%3c/svg%3e");
}

.form-control:invalid:focus, .form-control.error-input:focus { border-color: #c72824; box-shadow: 0 0 0 0.25rem rgba(199, 40, 36, 0.25); }

.warning-input {
    border-color: #ff9000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ff9000' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
}

.form-control:invalid:focus, .form-control.warning-input:focus { border-color: #ff9000; box-shadow: 0 0 0 0.25rem rgba(255, 144, 0, 0.25); }

.error-feedback,
.warning-feedback { width: 100%; margin-top: 0.25rem; font-size: .875em }

.error-feedback { color: #c72824 }

.warning-feedback { color: #ff9000; }

/* Lexique Option #2 */
.lex2 { margin: 0; padding: 0; }
.lex2 > li { display: block; margin-bottom: 2.5em; padding: 20px; border: 1px solid #eee; border-left-width: 5px; border-radius: 3px; border-left-color: #337ab7; }
.lex2 h4 { font-size: 16px; font-weight: bold; }

/* Lexique Option #3 */
.leadLex { margin: 2em 0 0; }
.leadLex .search { margin-right: 20px; }

@media (max-width: 767px) {
    .leadLex #count { display: inline-block; margin-top: 15px; margin-left: 5px; }
    .leadLex .pull-right { margin-top: 10px; }
}

.lex { margin: 3em 0 0; padding: 0; }
.lex > li { display: block; margin-bottom: 2.5em; position: relative; }
.lex > li .act { position: absolute; right: 5px; padding: 10px; opacity: 0; cursor: pointer; transition: opacity 0.2s ease-out; }
.lex > li:hover .act { opacity: 1; transition: opacity 0.5s ease-in; }
.lex > li .act .fa-pencil-square-o { font-size: 17px; position: relative; top: 1px; padding: 4px 4px 3px 4px; margin-right: 5px; }

.lex > li h4 { margin: 0; font-size: 16px; font-weight: bold; padding: 15px 5px 12px 15px; border: 1px solid #ddd; border-width: 1px 1px 0 5px; border-radius: 0 5px 0 0; border-left-color: #337ab7; box-shadow: inset 0 -3px 0 -1px #ddd; }
.lex > li p { margin: -1px 0 0 0; padding: 10px 5px 10px 15px; border: 1px solid #ddd; border-width: 0 1px 1px 5px; border-radius: 0 0 5px 0; border-left-color: #337ab7; background-color: #eee; }

.lex > li h4 .form-group { width: 100%; padding-right: 10px; margin-top: 0; }
.lex > li .form-control { width: 100%; }
.lex > li > form > div.form-group { white-space: nowrap; width: 100%; text-align: right; margin-top: 5px; }


.stepper { position: relative; padding: 0; margin: 0; width: 100%; list-style: none; overflow: hidden; transition: height .2s ease-in-out; display: flex; justify-content: space-between }
.stepper-item { flex: auto; min-height: 3rem }
.stepper-item:first-child .stepper-text:before { visibility: hidden; }
.stepper-item:last-child .stepper-text:after { visibility: hidden; }
.stepper-item .stepper-text:before { flex: 1; height: 3px; width: 100%; margin-right: .5rem; content: ""; background-color: #dedede }
.stepper-item .stepper-text:after { flex: 1; height: 3px; width: 100%; margin-left: .5rem; content: ""; background-color: #dedede }
.stepper-item.completed .stepper-text:before { background-color: #5cb85c; }
.stepper-item.active .stepper-text:before { background-color: #5cb85c; }
.stepper-item.completed .stepper-text:after { background-color: #5cb85c; }
.stepper-text { display: flex; align-items: center; text-decoration: none; color: unset; line-height: 1.3; }
.stepper-desc { font-size: 80%; color: #999; }
.stepper-item.active .stepper-text, .stepper-item.completed .stepper-text { cursor: pointer }
.stepper-text:focus { outline: none }
.stepper-counter { margin: 0.5rem 0 0.5rem 0; display: flex; justify-content: center; align-items: center; color: #fff; background-color: #bbb; border-radius: 100%; font-size: .875rem; width: 1.5rem; height: 1.5rem }
.stepper-item.completed .stepper-counter { background-color: #5cb85c; }
.stepper-item.active .stepper-counter { background-color: #25639b; }
.stepper-item .stepper-title { color: #aaa; }
.stepper-item.active .stepper-title { color: #000; }
.stepper-item.completed .stepper-title { color: #555; }

@media (max-width: 576px) {
    .stepper-counter { margin: 1rem auto }
    /*.stepper-item { display: none; }*/
    .stepper-item.active { display: block; }
    .stepper-desc { display: none; }
    .stepper-title { display: none; }
    /*.stepper-item .stepper-text:before { display: none }
    .stepper-item .stepper-text:after { display: none }*/
}


.circle-wrap { margin: 10px auto; width: 100px; height: 100px; background: #dedede; border-radius: 50%; border: 1px solid #dedede; }
.circle-wrap .circle .mask,
.circle-wrap .circle .fill { width: 100px; height: 100px; position: absolute; border-radius: 50%; }
.circle-wrap .circle .mask { clip: rect(0px, 100px, 100px, 50px); }
.circle-wrap .inside-circle { width: 72px; height: 72px; border-radius: 50%; background: #fff; line-height: 70px; text-align: center; margin-top: 14px; margin-left: 14px; color: #000; position: absolute; z-index: 100; font-weight: 700; font-size: 1.5em; }
/* color animation */
/* 3rd progress bar */
.circle-wrap .mask .fill { clip: rect(0px, 50px, 100px, 0px); }
.circle-wrap .mask.full, .circle-wrap .circle .fill { transform: rotate(180deg); }
.circular-chart { display: block; margin: 10px auto; max-width: 100%; max-height: 250px }
.circular-full { display: block; margin: 10px auto; max-width: 100%; max-height: 250px }


.btn-default {
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #dbdbdb;
    border-color: #ccc;
    background-color: #fff;
    border-color: #ccc;
    transition: none;
}

    .btn-default:focus, .btn-default:hover {
        background-color: #e0e0e0;
        background-position: 0 -100px;
    }

    .btn-default.active, .btn-default:active {
        background-color: #d4d4d4;
        border-color: #dbdbdb;
    }

    .btn-default.disabled, .btn-default.disabled.active, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled], .btn-default[disabled].active, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default.active, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
        background-color: #e0e0e0;
        background-image: none
    }

.no-style { background: none; border: none; outline: none; box-shadow: none; }

.topSearchDiv {
    display: inline-block;
}
.maxContainer {
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    .maxContainer { max-width: 690px; }
}
@media (max-width: 767px) {
	.topSearchBox { max-width: 280px !important; }
	.topSearchDiv { position: relative; top: 1px; }
}

@media (min-width: 768px) {
	.topSearchBox { min-width: 370px !important }
    .maxContainer { max-width: 800px; }
}

@media (min-width: 992px) {
	.topSearchBox { min-width: 350px !important; }
    .maxContainer { max-width: 960px; }
}

@media (min-width: 1200px) {
    .topSearchBox { min-width: 350px !important}
    .maxContainer { max-width: 1140px; }
}

@media (min-width: 1400px){
    .maxContainer { max-width: 1320px; }
}

@media (min-width: 1600px) {
    .maxContainer { max-width: 1600px; }
}

.circle-element, .circle-element-full {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

.circle-element:hover {
    stroke: #5bc0de;
    transition: 300ms ease-in-out;
}

.circle-element:not(:hover) {
    transition: 300ms ease-in-out;
}

.circle-element-full {
    stroke: #dedede;
}

.overview {
    transition: box-shadow .3s;
}

.overview:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.4);
}

@keyframes progress { 0% { stroke-dasharray: 0 100; } }

.custom-file{
    max-width: 80%;
    margin-right: 1rem;
    height: max-content;
    display: flex;
}

.inputfile {
    opacity: 0;
    width: 12rem;
    height: 2.5rem;
    overflow: hidden;
    position: absolute;
}

.inputfile + label {
    max-width: 100%;
    font-size: 1rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.4rem;
    padding-inline: 0.8rem!important;
    border-radius: 0.2rem;
    /* 10px 20px */
}

.inputfile:focus + label, .inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 1rem;
}

.inputfile-6 + label {
    color: #f1e5e6;
    background-color: #25639B;
    padding-right: 0.4rem;
}

    .inputfile-6:focus + label,
    .inputfile-6.has-focus + label,
    .inputfile-6 + label:hover {
        background-color: #224768;
        transition: 300ms;
    }


.long-arrow-left {
    display: block;
    margin: 20px auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    transform: rotate(225deg);
}

.long-arrow-left::after {
    content: "";
    display: block;
    width: 2px;
    height: 15px;
    background-color: black;
    transform: rotate(-45deg) translate(4.5px, 2px);
    left: 0;
    top: 0;
}

/* Schedule */
table.schedule tr.table-light { border-radius: 8px }

/* Custom Background Color */
.clickable-tr:hover { 
    --bs-table-striped-bg: transparent; 
    --bs-table-striped-color: #ffffff !important; 
    background-color: #428bca !important; 
    color: #ffffff !important;
    cursor: pointer;
}

.bg-warn-light {
    background-color: rgba(255, 198, 26, 0.3)
}

.bg-pink-transparent {
    background-color: rgba(255, 0, 220, 0.1)
}

.bg-pink-light {
    background-color: rgba(255, 0, 220, 0.2)
}

.bg-brown {
    background-color: #b24f2e!important
}

.bg-violet {
    background-color: #7524b7!important;
}

.checkbox-animation-in {
    animation: checkboxIn ease-in 100ms
}

.checkbox-animation-out {
    animation: checkboxOut ease-in 100ms;
}

.tr-primary-macaron {
    position: relative;
}
.tr-success-macaron {
    position: relative;
}

.tr-primary-macaron::after {
    content: " ";
    right: -6px;
    top: 0%;
    position: absolute;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    background-color: cornflowerblue;
}

.tr-success-macaron::after {
    content: " ";
    right: -6px;
    top: 30%;
    position: absolute;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    background-color: #0fb70c;
}

@keyframes checkboxIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 100%;
    }
}

@keyframes checkboxOut {
    from {
        opacity: 100%;
    }

    to {
        opacity: 0;
    }
}

/** STEP PROGRESS STYLE */
.stepper-wrapper {
    font-family: Arial;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

 .stepper-item::before {
     position: absolute;
     content: "";
     border-bottom: 5px solid #ccc;
     width: 100%;
     top: 20px;
     left: -50%;
     z-index: 2;
 }

 .stepper-item::after {
     position: absolute;
     content: "";
     border-bottom: 5px solid #ccc;
     width: 100%;
     top: 20px;
     left: 50%;
     z-index: 2;
 }

 .stepper-item .step-counter {
     position: relative;
     z-index: 5;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #ccc;
     margin-bottom: 6px;
 }

 .stepper-item.active {
     font-weight: bold;
 }

 .stepper-item.completed .step-counter {
     background-color: #25639b;
     color: #fff;
 }

 .stepper-item.completed::after {
     position: absolute;
     content: "";
     border-bottom: 5px solid #25639b;
     width: 100%;
     top: 20px;
     left: 50%;
     z-index: 3;
 }

.active-step {
    animation: stepAnimation alternate-reverse infinite ease-in-out 500ms;
}

 .stepper-item:first-child::before {
     content: none;
 }

 .stepper-item:last-child::after {
     content: none;
 }

 @keyframes stepAnimation {
    from {
        background-color: #ccc;
        color: #000;
    }

    to {
        background-color: #25639b;
        color: #fff;
    }
 }

/* SPINNER -> https://loading.io/css/ */

.full-page-spinner {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 2000;
    top: 0;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

.lds-ring {
    display: inline-block;
    position: relative;
    left: 1.5rem;
    top: -0.1rem;
    width: 250px;
    height: 200px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    margin: 0px;
    border: 3px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* NOTIFICATION STACK */

.notif-elevation {
    z-index: 1100;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    top: 2rem;
    right: -100%;
    margin: 1rem;
}

.notif-on {
    animation: notifOn 700ms ease-in-out forwards;
}

.notif-off {
    animation: notifOff 700ms ease-in-out forwards;
}

.notif-icon {
    width: 2rem;
}

.timing-toast {
    animation: timingToast 7s ease-in forwards;
}

@keyframes notifOn {
    from {
        right: -100%;
    }

    to {
        right: 0;
    }
}


@keyframes notifOff {
    from {
        right: 0;
    }

    to {
        right: -100%;
    }
}

@keyframes timingToast {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.accordion-button-white::after {
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(200deg) brightness(105%) contrast(101%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E")!important;
}

@keyframes flashesAnim {
    0% {
        border-color: transparent;
    }

    50% {
        border-color: currentColor;
    }

    100% {
        border-color: transparent;
    }
}

.flashes { animation: flashesAnim 500ms 3; }
.hover-el:hover { background-color: rgba(0,0,0,0.2); }

.drag-base { padding: 0.5rem; background-color: #D0E2FF; }
.drag-on { animation: dragon; animation-duration: 200ms; padding: 1rem; background-color: #FFFFFF; }
.drag-off { animation: dragoff; animation-duration: 200ms; padding: 0.5rem; background-color: #D0E2FF; }

@keyframes dragoff {
    from { padding: 1rem; background-color: #FFFFFF; }
    to { padding: 0.5rem; background-color: #D0E2FF; }
}
@keyframes dragon {
    from { padding: 0.5rem; background-color: #D0E2FF; }
    to { padding: 1rem; background-color: #FFFFFF; }
}

.JSON-parent {
/*    background-color: #1e1e1e; */
    color: #000000;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
}

.JSON-key {
    color: #A31515;
}

.JSON-string {
    color: #0451A5;
}

.JSON-number {
    color: #098658;
}

.JSON-boolean {
    color: #b249a4;
    font-weight: bold;
}

.JSON-null {
    color: #808080;
}