﻿
:root {
    --green-color: #33691e;
    --red-color: #a0171a;
    --blue-color: #1e5ab4;
    --yellow-color: #cfa418;
    --purple-color: #652b82;
}


html body, html body .container-fluid, .container-fluid label, .container-fluid a, .container-fluid p, .container-fluid span, .container-fluid table, .container-fluid input, .container-fluid div, .wizardFrame {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 13px;
}

html a {
    color: #8C70A7;
}

    html a:hover {
        color: #492967
    }

    html body .container-fluid {
        background-color: #e7e7e7;
    }

.container-fluid input, .container-fluid select, .container-fluid textarea {
    border-radius: 5px;
    border: 1px solid #a8a8a8;
}

.container-fluid select {
    padding:2px;
}

.secutools-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



.data-row select {
    padding: 4px;
}

.data-row input, .data-row select, .data-row textarea {
    width: 100%;
}

.data-row .datepicker {
    width: 90%;
}

body .data-row input[type="checkbox"] {
    width: auto
}

.container-fluid input:focus-visible {
    outline: none;
    border: 1px solid #652b82;
    box-shadow: #652b82 0px 0px 2px 0px;
}



.section-header {
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-radius: 5px 5px 0px 0px;
}

    .section-header .title-and-icon {
        display: flex;
        align-items: center
    }

    .section-header a {
        background-color: white;
        color: black;
        padding: 5px 15px;
        font-size: 13px;
        border-radius: 5px;
        font-weight: normal;
    }

.section-icon {
    font-size: 20px;
    margin-right: 15px;
    margin-left: 10px;
}

.section-color {
    margin-right: 15px;
    margin-left: 10px;
}

.linked-items .section-header .section-title {
    text-transform: uppercase;
    font-size: 18px;
    margin: 7px 10px;
    display: flex;
    flex: 1;
    align-items: center;
}

.section-header .badge {
    font-weight: normal;
}

.section-header .section-title {
    text-transform: uppercase;
    font-size: 20px;
    margin: 5px;
}

.section-body {
    background-color: white;
    border-radius: 0px 0px 5px 5px;
}

    .section-body .data-section {
        border-top: 2px solid #e9e9e9;
        padding: 0px 20px;
    }

    .section-body .section-table {
        padding: 20px 25px;
        border-top: 2px solid #e9e9e9;
        /*box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;*/
    }

    .section-body .section-filter {
        background-color: white;
        padding: 15px 25px;
        border-top: 2px solid #e9e9e9;
        display: flex;
        flex-direction: row;
        justify-content: start;
        column-gap: 10px;
    }

        .section-body .section-filter .filter-dropdowns {
            display: flex;
            flex-direction: row;
            justify-content: start;
            column-gap: 10px;
            align-items: baseline;
        }

    .section-body .section-gray {
        background-color: #e2e2e2;
        padding: 20px;
        box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
    }

body .container-fluid .row .section-header .section-header-button {
    background-color: transparent;
    border-left: 2px solid #e9e9e9;
    border-radius: 0px;
    border-bottom-left-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    padding: 0px;
    box-shadow: none;
}

    body .container-fluid .row .section-header .section-header-button:hover {
        text-decoration: none;
    }

.section-header .accordion-button::after {
    width: 35px;
    background-position: center;
}

.accordion-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.data-section .data-row {
    margin-top: 10px;
}

.data-section .data-row-with-list {
    margin-top: 10px;
    /*border-top: 2px solid #e9e9e9;*/
    border-bottom: 2px solid #e9e9e9;
}

.data-row div:first-child
{
    font-weight:600;
}

.linked-relation-header {
    display: flex;
    justify-content: space-between;
    background-color: white;
}

    .linked-relation-header span {
        text-transform: uppercase;
        font-size: 20px;
        margin: 5px;
        padding-left: 15px;
    }

.linked-table .it a {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 13px !important;
    color: blue !important;
}

    .linked-table .it a:hover {
        text-decoration: underline !important;
        background: none !important;
    }

.linked-table td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
}

.linked-commands {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 8px;
}

    .linked-commands > div {
        /*    display: flex;
    justify-content: left;*/
        margin-left: 5px;
    }

.linked-table .path-list-hidden {
    border-top: 1px solid black;
    border-bottom: 1px solid black;

    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 10px !important;
}

.linked-table .path-list-hidden {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width:100%;

    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 10px !important;
}

.linked-items .fa-exclamation-triangle {
    display:none;
}

.linked-items #ReqMissing .fa-exclamation-triangle {
    display: inline-block;
    color:red;
}


/*HEADER*/
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: linear-gradient(40deg, var(--purple-color) 0%, rgba(206,116,42,1) 100%);*/
    background: var(--purple-color);
    padding: 18px 15px;
}

    .site-header .header-page-title {
        /*
        height: 26px;*/

        font-family: 'Source Sans Pro';
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 26px;
        display: flex;
        align-items: center;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #FFFFFF;
    }

        .site-header .header-page-title i {
            margin-right: 18px;
        }

.row .green-header {
    /*background: linear-gradient(90deg, var(--green-color) 0%, rgba(51,105,30,0.4573179613642332) 100%);*/
    background: var(--green-color);
}

.row .red-header {
    /*background: linear-gradient(90deg, var(--red-color) 0%, rgba(130,0,3,0.4489146000196954) 100%);*/
    background: var(--red-color)
}

.row .yellow-header {
    /*background: linear-gradient(90deg, var(--yellow-color) 0%, rgba(207,164,24,0.50011908181241246) 100%);*/
    background: var(--yellow-color)
}

.row .blue-header {
    /*background: linear-gradient(90deg, var(--blue-color) 0%, rgba(30,90,180,0.4573179613642332) 100%);*/
    background: var(--blue-color);
}

.logout {
    color: white;
    font-size: 15px;
}

.logged-user {
    color: white;
}



/*NAVIGATION*/

.sidebar-navigation {
    padding: 20px;
    max-height:70vh;
    overflow-y:auto;
}

.nav-item {
    display: flex;
    font-size: 15px;
    align-items: center;
    margin-bottom: 6px;
    align-items:start;
}

    .nav-item .navi-link {
        display: flex;
        flex: 1;
        align-items: center;
    }

    .nav-item a {
        color: #3c3c3c;
    }


    .nav-item .badge {
        margin-left: 10px;
        font-weight: normal;
        background-color: white;
        font-size: 10px;
    }

.Sel .nav-item .navi-link {
    font-weight: bold;
}

.navi-link a {
    flex: 1;
}

.GreenRootBG > :first-child .navi-link a {
    font-weight: bold;
    color: var(--green-color)
}

.RedRootBG > :first-child .navi-link a {
    font-weight: bold;
    color: var(--red-color)
}

.BlueRootBG > :first-child .navi-link a {
    font-weight: bold;
    color: var(--blue-color)
}

.YellowRootBG > :first-child .navi-link a {
    font-weight: bold;
    color: var(--yellow-color)
}

/*BUTTONS*/

.st-btn {
    padding: 4px 19px;
    height: 30px;
    width: fit-content;
    border-radius: 20px !important;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;

    text-transform: uppercase;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
}

    .st-btn a, .st-btn btn, .st-btn label, .st-btn input {
        position: static;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 18px;
        color: #FFFFFF;
    }

        .st-btn a:hover {
            text-decoration: none;
            color: #FFFFFF;
        }

    .st-btn:hover {
        text-decoration: none;
        color: #FFFFFF;
    }

.st-btn-primary {
    background: #5B3381;
}


    .st-btn-primary:hover {
        background: #492967;
    }

    .st-btn-primary:focus {
        box-sizing: border-box;
        background: #8C70A7;
        border: 2px solid #5B3381;
    }

    .st-btn-primary:disabled {
        background: #D6D6D6;
        border-radius: 20px;
    }

.st-btn-secondary {
    background: #929292;
}

    .st-btn-secondary:hover {
        background: #6C6C6C;
    }

    .st-btn-secondary:focus {
        border: 2px solid #6C6C6C;
        box-sizing: border-box;
        border-radius: 20px;
    }

    .st-btn-secondary:disabled {
        background: #D6D6D6;
        border-radius: 20px;
    }

.st-btn-tertiary {
    border: 1px solid #151515;
    box-sizing: border-box;
    border-radius: 20px;
    color: #151515;
}

    .st-btn-tertiary a, .st-btn-tertiary btn, .st-btn-tertiary label, .st-btn-tertiary input {
        position: static;
        font-family: 'Source Sans Pro';
        text-transform: uppercase;
    }

    .st-btn-tertiary:hover {
        background: #E7E7E7;
    }

    .st-btn-tertiary:focus {
        border: 2px solid #9D85B3;
        box-sizing: border-box;
        border-radius: 20px;
    }

    .st-btn-tertiary:disabled {
        border: 1px solid #D6D6D6;
        box-sizing: border-box;
        border-radius: 20px;
        color: #D6D6D6;
    }


.st-btn-dark {
    border: none;
    border-radius: 20px;
    color: white;
    background: rgba(255, 255, 255, 0.25);
    text-transform:uppercase;
}

.st-btn-white-border {
    border: none;
    border-radius: 20px;
    color: white;
    background-color: transparent;
    text-transform: uppercase;
    border: 1px solid white;
}


.st-btn-green {
    background: #007f0e;
}

    .st-btn-green:hover {
        background: #005e0a;
    }

.st-btn-red {
    background: #c60307;
}

    .st-btn-red:hover {
        background: #990306;
    }

.st-btn-small {
    height: 25px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 16px;
    font-style: normal;
    text-transform: capitalize;
}

    .st-btn-small a, .st-btn-small btn, .st-btn-small label, .st-btn-small input {
        font-size: 13px;
        line-height: 16px;
        font-style: normal;
        text-transform: capitalize;
    }

/*BULLETS*/
.bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    margin-top:6px;
}

.BulletRed {
    background-color: var(--red-color);
    /*box-shadow: var(--red-color) 0px 0px 4px 1px;*/
}

.BulletGreen {
    background-color: var(--green-color);
    /*box-shadow: var(--green-color) 0px 0px 4px 1px;*/
}

.BulletBlue {
    background-color: var(--blue-color);
    /*box-shadow: var(--blue-color) 0px 0px 4px 1px;*/
}

.BulletYellow {
    background-color: var(--yellow-color);
    /*box-shadow: var(--yellow-color) 0px 0px 4px 1px;*/
}

.BulletGray {
    background-color: #9a9a9a;
    /*box-shadow: #9a9a9a 0px 0px 4px 1px;*/
}

.mstart-2 {
    margin-left:12px;
}
.mstart-3 {
    margin-left:22px;
}
.mstart-4 {
    margin-left: 32px;
}
.mstart-5 {
    margin-left: 42px;
}
.mstart-6 {
    margin-left: 52px;
}
.mstart-7 {
    margin-left: 62px;
}





/*SIDEBAR SECTION*/
.sidebar-section hr {
    margin: 5px 0px;
}

.sidebar-section .sidebar-section-title {
    color: #652b82;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 10px;
}

.sidebar-section-body {
    padding: 10px 20px;
}

    .sidebar-section-body a {
        font-size: 14px;
        color: #3c3c3c;
        font-weight: normal;
        display: flex;
        flex-direction: column;
    }

    .sidebar-section-body .action-links {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        column-gap: 8px;
    }


/*SEARCH*/
.search-section {
    display: flex;
    flex-direction:column;
}

    .search-section label {
        margin-right: 5px;
    }

    .search-section input, .search-section select {
        width: 100%;
    }



/* FILES CONTROL*/
#FileList #title {
    display: flex;
}

.files-tab {
    display: flex;
    padding: 5px 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    align-items: center;
    width: 150px;
    color: black;
}

    .files-tab:hover {
        background-color: #E7E7E7;
    }

.files-public i {
    color: mediumseagreen;
}

.files-restricted i {
    color: darkorange;
}


.files-confidential i {
    color: red;
}

.files-tab i {
    margin-right: 7px;
}


.icon-combination {
    position: relative;
}

.small-icon {
    position: absolute;
    color: red;
    bottom: 0px;
    right: 5px;
}


/*COLORS*/
#Task {
    color: var(--purple-color);
}

#Event {
    color: var(--yellow-color);
}

#Training {
    color: var(--green-color);
}

#

.st-bg-red {
    background-color: var(--red-color);
}

.st-fg-red {
    color: var(--red-color);
}

.st-bg-green {
    background-color: var(--green-color);
}

.st-fg-green {
    color: var(--green-color);
}

.st-bg-blue {
    background-color: var(--blue-color);
}

.st-fg-blue {
    color: var(--blue-color);
}

.st-bg-yellow {
    background-color: var(--yellow-color);
}

.st-fg-yellow {
    color: var(--yellow-color);
}

.st-bg-purple {
    background-color: var(--purple-color);
}

.st-fg-purple {
    color: var(--purple-color);
}


/*KEYWORD*/
.keyword-display {
    border-top: 2px solid #e9e9e9;
}

    .keyword-display .section-header {
        font-weight: normal;
        color: black;
        border-radius: 0px 0px 5px 5px;
    }



/*LINKED ITEMS*/

.linked-items .accordion-header {
    display: flex;
}

.header-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}

.linked-red .header-circle {
    background-color: var(--red-color);
}

.linked-blue .header-circle {
    background-color: var(--blue-color);
}

.linked-yellow .header-circle {
    background-color: var(--yellow-color);
}

.linked-green .header-circle {
    background-color: var(--green-color);
}

.accordion-header .section-header {
    flex: 1;
}

.linked-items .accordion-item {
    background-color: transparent;
    border: none;
}

.linked-items .accordion-body {
    padding: 0px;
}


/* Task List*/

table#TaskListDetails {
    width: 80%;
}

    table#TaskListDetails thead th {
        border-bottom: 1px #000000;
        padding-bottom: 5px;
        font-weight: bold;
    }

    table#TaskListDetails td {
        padding-top: 5px;
        vertical-align: top;
    }

/*tr#dashedUnderline td a {
    color: #295187;
}*/


/*MODAL*/

html body {
    background-color: transparent;
}

.wizardFrame {
    width: 100vw;
    height: 100vh;
    background-color: white;
}

    .wizardFrame form {
        padding: 20px;
    }

    .wizardFrame form, .wizardFrame .dialog-body, .wizardFrame .dialog-with-sidebar {
        width: auto;
        height: 100%;
    }

.dialog-with-sidebar {
    display: flex;
}

.dialog-sidebar {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid rgb(99 99 99 / 20%);
}

.dialog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 86vh;
}

.dialog-content-commands {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.dialog-content-data {
    flex: 1;
    display: flex;
    overflow: auto;
}

.dialog-content .treeview {
    flex: 1;
    overflow: auto;
}

.treeview a, #treeView a {
    color: #3c3c3c;
}

.wizard-table {
    width: 100%;
}

.container-fluid .actions-header {
    background-color: #bebdbd;
    text-transform: uppercase;
    font-size: 18px;
    padding: 7px 10px;
    border-radius: 4px 4px 4px 4px;
}

.custom-radio {
    display: flex;
    align-items: center;
}

    .custom-radio input {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }


.only-cb {
    display: flex
}

    .only-cb input {
        width: 15px;
        height: 15px;
    }


/*MODALS*/

.st-modal {
    min-height: 50vh;
}

.sm-modal {
    width: 500px;
}

.md-modal {
    width: 700px;
}

.lg-modal {
    width: 900px;
}

.xl-modal {
    width: 1100px;
}

.xxl-modal {
    width: 1200px;
}

.login-section {
    box-shadow: 1px 1px 6px 1px #bfbfbf;
    border-radius: 5px;
    width: 400px;
    height: 331px;
    background-color: white;
    position: relative
}

    .login-section input[type="text"], .login-section input[type="password"] {
        border: 1px solid #d3d3d3;
        padding: 5px;
        border-radius: 5px;
        z-index: 10;
    }


    .login-section svg {
        position: absolute;
        bottom: 0;
        border-radius: 5px;
    }

.header-with-search {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .header-with-search .section-title {
        font-size: 20px;
        text-transform: uppercase;
    }

.collaps-search {
    display: none;
    margin-bottom: 1rem !important;
}

div .collaps-search-show {
    display: block;
}


@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition-property: height, visibility;
        transition-duration: .35s;
    }
}


.table-filters input, .table-filters select {
    width: 100%;
}

body .table-filters input[type="submit"] {
    width: auto;
}

.section-hidden .collapse-icon .fa-chevron-down {
    display: block
}

.section-visible .collapse-icon .fa-chevron-up {
    display: block
}

.collapse-icon .fa-chevron-down, .collapse-icon .fa-chevron-up {
    display: none
}

.section-visible .section-header, .section-hidden .section-header {
    margin: 10px -20px;
    padding-left: 20px;
    border-top: 2px solid #e9e9e9;
    border-bottom: 2px solid #e9e9e9;
    align-items: center;
}

.section-header .collapse-icon {
    border-left: 2px solid #e9e9e9;
    border-radius: 0px;
    padding: 5px 11px;
}

.client-status {
    display: flex;
    justify-content: center;
    background-color: #bebdbd;
}

.cb-list-box tr td {
    display: flex;
    align-items: center;
}


    .cb-list-box tr td input {
        margin-right: 10px;
    }

/*CHOSEN*/

.chosen-container {
    width: 100% !important;
}

body .chosen-container-multi ul.chosen-choices {
    border-radius: 5px;
    border: 1px solid #a8a8a8;
}

/*FOOTER*/

#pageFooter {
    display:flex;
    padding:0px;
    margin-top:15px;
}

#FileList .file-path {
    color: gray;
    padding:0px 1px;
}

#FileList .file-path a {
    background-color: transparent;
    color: gray;
    font-style: italic;
    padding: 5px 5px;
}
