:root {
    --portal-purple: #773dbd;
    --portal-yellow: #f5b335;
    --portal-light-yellow: #f5cd80;
}

body {
    padding-top:5px;
    padding-bottom: 20px;
}

.portal-body {
    background-image: url("../images/Crocus_Symbol_RGB.jpg");
    background-position: calc(100% + 190px) -170px;
    background-repeat: no-repeat;
}

.disabled {
    pointer-events: none;
    opacity: .44;
}

.hidden {
    display: none;
}

.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden; 
    transition: 0.5s; 
    display: none;
}

.overlay-content {
    position: relative;
    top: 25%; 
    width: 100%; 
    text-align: center;
    margin-top: 30px; 
}

.portal-style *
{
    font-family: Montserrat, Arial, sans-serif;
}

.portal-style .purple {
    color: var(--portal-purple);
}

.portal-style .yellow {
    color: var(--portal-yellow);
}

.portal-style .black {
    color: black;
}

.portal-style footer
{
    text-align: right;
    font-weight: bold;
}

.portal-style hr
{
    color: var(--portal-purple);
    border-top: 5px solid;
    opacity: 1.0;
}

.portal-style a:not(.x-button,.btn),
.portal-style h1,
.portal-style h2,
.portal-style h3,
.portal-style h4,
.portal-style h5,
.portal-style h6 {
    color: var(--portal-purple);
}

.portal-style h1,
.portal-style h2,
.portal-style h3,
.portal-style h4,
.portal-style h5,
.portal-style h6 {
    font-weight: bold;
}

.portal-style h1.yellow,
.portal-style h2.yellow,
.portal-style h3.yellow,
.portal-style h4.yellow,
.portal-style h5.yellow,
.portal-style h6.yellow {
    color: var(--portal-yellow);
}



.portal-style thead{
    background-color: var(--portal-purple);
    color: white;
}

.portal-style table:not(.table) thead,
.portal-style table:not(.table) tbody,
.portal-style table:not(.table) tfoot,
.portal-style table:not(.table) tr,
.portal-style table:not(.table) th,
.portal-style table:not(.table) td {
    border-width: inherit;
}

.portal-style .x-button {
    background-color: var(--portal-purple);
    color: white;
    /* font-size: x-large; relocated to internal styles */ 
    padding: 10px;
}

.portal-style .x-button a
{
    color: white;
}

.portal-style .x-button a,
.portal-style a.x-button
{
    text-decoration: none;
}

.portal-style .x-button a:hover,
.portal-style a.x-button:hover
{
    text-decoration: underline;
}

.portal-style .button-right-image
{
    margin-left: 5px;
}


.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 250px;
    top: 0;
    left: 0;
    min-height: 250px;
    background: #b2afc4;
    color: Black;
    transition: all 0.3s;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}


.card a {
    color: var(--bs-btn-color) !important;
}

.card-title {
    color: var(--bs-black) !important;
}


.portal-style .guide h3,
.portal-style .guide h4,
.portal-style .guide h5,
.portal-style .guide h6 {
    color: var(--bs-gray-700) !important;
}

.guide .elementTable {
    font-size: 12px;
}

.guide hr {
    
    margin: 0 0 .5rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: .1;
}

.guide #guide-nav a {
    color: var(--bs-gray-500);
    text-decoration: none;
}

.guide #guide-nav a.active
{
    font-weight:bold;
        color:var(--portal-purple);
        
}
[data-href] {
    cursor: pointer;
}


.bg-purple {
    background: var(--bs-gray-400);
    color: white;
}


.btn-primary {
    color:#fff !important;
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--portal-purple);
    --bs-btn-border-color: var(--portal-purple);
    --bs-btn-hover-color: var(--portal-yellow) !important;
    --bs-btn-hover-bg: var(--portal-purple);
    --bs-btn-hover-border-color: var(--portal-purple);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--portal-purple);
    --bs-btn-active-border-color: var(--portal-purple);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--portal-purple);
    --bs-btn-disabled-border-color: lighten(var(--portal-purple), 50%);
}
    .btn-primary:hover {
        color: var(--portal-yellow) !important;
    }

    .portal-module .card-img-top {
    background: var(--bs-gray-400);
    color: white;
}

.portal-module .card-img-top {
    background: var(--portal-purple);
}



.portal-module.active:hover .card-img-top {
    color: var(--portal-yellow);
    background-image:none !important;
}


#validationStepTable .badge{display:block}
#validationStepTable .badge:not(.inprogress) .spinner-border {
    display: none;
}
.badge .spinner-border {
    width: var(--bs-badge-font-size);
    height: var(--bs-badge-font-size);
    vertical-align: baseline;
}


/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}









.nav-portal .nav-item.disabled ul{
    display:none;
}










/* Performance Evaluation Tree */

.tree,
.tree ul,
.tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    font-size: 12px;
    min-width: 100%;
}

    .tree,
    .tree ul {
        display: table;
    }

        .tree ul {
            width: 100%;
        }




        .tree ul {
            background: rgba(207,213,234,.8);
        }



        .tree li {
            display: table-cell; 
            padding: .5em 0;
            vertical-align: middle;
            padding-bottom: 0;
            text-align: center;
        }

            .tree li:before {
                outline: solid 2px green;
                content: "";
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .tree li.label li:before {
                outline: none;
            }

            .tree li:first-child:before {
                left: 50%;
            }

            .tree li:last-child:before {
                right: 50%;
            }

        .tree code,
        .tree span {
            border: solid .1em #2E5392;
            border-radius: 6px;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .2em .5em;
            position: relative;
            vertical-align: middle;
            height: 60px;
            background: #2F5493;
            min-width: 100px;
            color: white;
            display: inline-flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
        }



        .tree li.label, .tree li.label li {
            text-align: left;
            font-weight: bold;
            line-height: 1.2;
            width: 100px;
        }

            .tree li.label span {
                border: none;
                background: none !important;
                box-shadow: none !important;
                color: black;
            }

                .tree li.label ul:before,
                .tree li.label code:before,
                .tree li.label span:before {
                    outline: none;
                    content: "";
                    height: .5em;
                    left: 50%;
                    position: absolute;
                }

        .tree ul:before {
            outline: solid 2px purple;
            content: "";
            height: 6px;
            left: 50%;
            position: absolute;
        }




        .tree code:before,
        .tree span:before {
            outline: solid 2px blue;
            content: "";
            height: 4px;
            left: 50%;
            position: absolute;
        }

        .tree li:before, .tree ul:before, .tree code:before,
        .tree span:before {
            outline-color: #777;
        }


        .tree li:has(li:hover) > span,
        .tree li:not(:has(li:hover)):hover span {
            background: #4372C4;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 3px;
        }






        .tree ul:before {
            top: -10px;
        }

        .tree code:before,
        .tree span:before {
            top: -7px;
        }

        .tree > li {
            margin-top: 0;
        }

        .tree > ul:before,
        .tree > ul > li:before,
        .tree > ul > li:after,
        .tree > ul > li > code:before,
        .tree > ul > li > span:before {
            outline: none;
        }



        .tree ul.show {
            display: table;
        }


        .tree ul {
            border-top: 5px solid #fff;
        }