/*
Theme Name:   PureLeapfrogApp
Template:     bootstrap-basic4
Version:      1.0.0
Text Domain:  bootstrap-basic4
*/


.dbg {
/*    display:none!important;*/
    color:purple;
    font-size: 0.75rem!important;
}
.dbg2 {
    color: #162527;
    font-size: 0.75rem!important;
}
.todo, .TODO {
    color:hotpink!important;
    border-color: hotpink!important;
    outline: hotpink!important;
}



/* new styling based on Emma's figma ======================================================================*/

html {
    width:100%;
    height: 100%;
}
body {
    width:100%;
    height: 100%;
    overflow-y: hidden;
}
.longish {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: block!important;
}
.colourup {
    background-color: #F8DE89;
    height: fit-content;
}
/* error handling stuff */
                            .err {
                                display:none;
                            }
                            .error * {
                                color: red!important;
                            }
                            .error input {
                                border-color: red!important;
                            }
                            .error .err {
                                display:flex;
                            }

.mbutton-clear {
    color: #FFAA4D!important;
    border: 1px solid #FFAA4D!important;
    border-radius: 8px;
    padding:12px 20px;
    box-sizing: border-box;
    cursor: pointer;
}
.mbutton-clear span {
    color: #FFAA4D!important;
}
.mbutton-filled {
    color: #A2A8A9!important;
    background-color: #E5E5E5;
    border-radius: 8px;
    padding:12px 20px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    border-width: 0!important;
}
.mbutton-filled span {
    color: #A2A8A9!important;
}
.mbutton-filled.active {
    color: #162527!important;
    background-color: #FFAA4D;
}
.mbutton-filled.active span {
    color: #162527!important;
}
.mbutton-link {
    color: #FFAA4D!important;
    margin: auto 0;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    border-width: 0!important;
    box-sizing: border-box;
}
.modal-content {
    border: 5px solid #F8DE89!important;
    border-radius: 16px!important;
}
.modal-body {
    padding: 16px 24px 40px 24px!important;
}

    .filter-container {
    }
    .filter-container-top {
        border-bottom: 1px solid #e5e5e5;
        gap:10px;
        padding:0 0 24px 0;
    }
    .filter-container.open .filter-container-top{
        border-bottom: 1px solid #162527;
    }
    .filter-container-bottom {
        display:none;
        background-color: #e5e5e5;
        padding:16px;
    }
    .filter-container.open .filter-container-bottom {
        display:flex;
    }

    .filter-container .filter-open {
        display:flex;
    }
    .filter-container.open .filter-open {
        display:none;
    }
    .filter-container .filter-close {
        display:none;
    }
    .filter-container.open .filter-close {
        display:flex;
    }

    .filter-button {
        display
        gap:32px;
        border:1px solid #A2A8A9;
        border-radius: 8px;
        cursor:pointer;
        padding:12px 16px;
    }
    .filter-button span {
        color:#A2A8A9;
    }

    .filter-container.open .filter-button {
        border:1px solid #162527;
        background-color: #f9f9f9;
    }
    .filter-container.open .filter-button span {
        color:#162527;
    }


.mine-xxx {
    color:#A2A8A9;
    cursor: pointer;
}
.mine-xxx.active {
    color:#162527;
}
.mine-xxx .text {
    padding-top: 1px;
}
.mine-xxx .toggle {
    display: flex;
    cursor: pointer;
    width:35px;
    height:16px;
    background-image: url(assets/toggle-off.png);
}
.mine-xxx.active .toggle {
    background-image: url(assets/toggle-on.png);
}
.mt8 {
    margin-top:8px;
}
.hideme.d-flex {
    display: none!important;
}
#save-button {
    color: #A2A8A9;
    background-color:#e5e5e5;
    cursor: pointer;
    padding:12px 20px;
    border-radius: 8px;
}
#save-button.active {
    background-color: #FFAA4D;
    color: #162527;
}
#advance-button {
    color: #A2A8A9;
    background-color:#e5e5e5;
    cursor: pointer;
    padding:12px 20px;
    border-radius: 8px;
}
#advance-button.active {
    background-color: #FFAA4D;
    color: #162527;
}

.w-25 { width: 25%; }
.w-33 { width: 33.3333%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.uplift-tab-container {
    gap:20px;
}
.uplift-tab {
    box-sizing: border-box;
    width: calc(33.3333% - 20px);
    border:1px solid #e5e5e5;
    border-radius: 5px;
    padding:8px;
    gap:16px;
}
.kpage {
    position: fixed;
    top:0;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    width:100%;
    height: 100%;
    font-family: Poppins;
}
body.admin-bar .kpage {
    height: calc(100% - 32px);
    top:32px;
}

.nav-left {
    width:270px;
    height:100%;
    background-color: #F9F9F9;/*let zero grey tint */

    display: flex;
    flex-direction: column;
/*    border-right: 1px solid #D5DBE2;*/
    box-sizing: border-box;    
}
.nav-left-logo {
    width:100%;
    height:72px;
    box-sizing: border-box;    
/*    border-bottom: 1px solid #e5e5e5;  */
    position: relative;
}
.brand-logo {
    position: absolute;
    top: 30px;
    left:24px;
    width:129px;
    height:32px;
    background-image: url('assets/let-zero-logo.png');
    background-size: cover;
    cursor:pointer;
}
.brand-logo2 {
    width:256px;
    height:64px;
    background-image: url('assets/let-zero-logo.png');
    background-size: cover;
}
.nav-left-body {
    width:100%;
    padding:22px 0 22px 16px;
}

.nav-left-button {
    display:flex;
    flex-direction: row;
    width:238px;
    height:40px;
    box-sizing: border-box;    
    gap:6px;
    padding:8px;
    cursor:pointer;
}
.nav-left-button.selected {
    background-color: #F8DE89;
    border-radius: 8px;
}
.nav-left-button-icon {
    width:24px;
    height:24px;
}
.nav-left-button.dashboard .nav-left-button-icon {background-image: url('assets/dashboard.png');}
.nav-left-button.tasklist .nav-left-button-icon {background-image: url('assets/tasklist.png');}
.nav-left-button.projects .nav-left-button-icon {background-image: url('assets/projects.png');}
.nav-left-button.properties .nav-left-button-icon {background-image: url('assets/properties.png');}
.nav-left-button.people .nav-left-button-icon {background-image: url('assets/people.png');}
.nav-left-button.suppliers .nav-left-button-icon {background-image: url('assets/suppliers.png');}
.nav-left-button.logout .nav-left-button-icon {background-image: url('assets/logout.png');}
.nav-left-button-text {
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color:#162527;
    margin:auto 0;
    padding-top:6px;
}
/*========================= */
.page-right {
    width: calc(100% - 270px);
    height:100%;
    overflow-y: auto;
    flex-direction: column;
    flex-grow: 1;
}
.page-hdr {
    width: 100%;
    height:72px;
    display:flex;
    box-sizing: border-box;    
    border-bottom: 1px solid #e5e5e5;/*let zero grey  */
}

.page-body-outer {
    display:flex;
    flex-direction: column;
    padding: 32px 43px 53px 30px;
    gap:16px;
    width: 100%;
    box-sizing: border-box;    
}
.page-body {
    border: 1px solid #E5E5E5;
    border-radius: 24px;
    padding: 24px;
    display:flex;
    flex-direction: column;
}
.page-body2 {
    border: 1px solid #E5E5E5;
    background-color: #F9F9F9;
    border-radius: 24px;
    padding: 24px;
    display:flex;
    flex-direction: column;
}

.modal-title {
    font-weight: 600;
    font-style: SemiBold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #162527;
}
.text-body-small-light {
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #A2A8A9;
}
.text-body-small-regular {
    font-weight: 500;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #162527;
}
.text-body-medium-light {
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #A2A8A9;
}
.text-body-medium-regular {
    font-weight: 500;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #162527;
}

.text-error {
    font-weight: 500;
    font-style: Medium;
    font-size: 11px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 1%;
    color: #F33D14;
}

.text-body-k1 {
    font-weight: 600;
    font-style: SemiBold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color:#162527;
}
/* override bootstrap css */
.nav-tabs {
    border-bottom: 1px solid #e5e5e5!important;
    gap:40px!important;
}

.nav-tabs .nav-link {
    padding: 16px 0!important;
    color: #162527!important;
    font-weight: 400!important;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    border-width: 0 0 3px 0!important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #162527!important;
    background-color: transparent!important;
    border-color: #ffaa4d!important;
    font-weight: 600!important;
}
.breadcrumbs {
    display: flex;
    flex-direction: row;
    margin:auto 0px auto 32px;
    gap:6px;
    max-width: 75%;
}
.breadcrumbs a , .breadcrumbs div {
    display:flex;
    color: #A2A8A9!important;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
}
.breadcrumbs a.hi, .breadcrumbs div.hi{
    color: #162527!important;
}
.breadcrumbs-separator,.vertical-separator{
    display:flex;
    width:1px;
    box-sizing: border-box;
    border-left: 1px solid #A2A8A9;
}


.stage-button {
    display: flex;
    box-sizing: border-box;
    width:32px;
    height: 32px;
    border-radius: 99px;
    border: 1px solid #162527;
}
.stage-button.selected {
    background-color: #F8DE89;
    border: 0px solid #162527;
}
.stage-button-spacer {
    display: flex;
    box-sizing: border-box;
    width:20px;
    height: 16px;
    border-bottom: 2px solid #162527;
}
.gap8  {gap:8px;}
.gap16 {gap:16px;}
.gap32 {gap:32px;}

.icon-eye {
    width:16px;
    height:16px;
    background-image: url('assets/eye.png');
    cursor: pointer;
    right: 8px;
    /* display: block; */
    position: relative;
    margin-top: -34px;    
    margin-left: auto;
}
.icon-eye.off {
    background-image: url('assets/eye-off.png');
}

.icon-filter-search {
    width:16px;
    height:17px;
    background-image: url('assets/search.png');
}
.icon-exclam {
    width:16px;
    height:16px;
    background-image: url('assets/exclamation-circle.png');
}
.icon-right {
    width:16px;
    height:16px;
    background-image: url('assets/arrow-right.png');
}
.icon-filter-open {
    width:16px;
    height:17px;
    background-image: url('assets/filter.png');
}
.icon-filter-close {
    width:16px;
    height:17px;
    background-image: url('assets/x.png');
}
.icon-edit {
    width:16px;
    height:16px;
    background-image: url('assets/pencil-alt.png');
}
.icon-trash {
    width:16px;
    height:16px;
    background-image: url('assets/trash.png');
}
.icon-chev-left {
    width:16px;
    height:16px;
    background-image: url('assets/chevron-left.png');
}
.icon-chev-right {
    width:16px;
    height:16px;
    background-image: url('assets/chevron-right.png');
}
.active>div>.icon-chev-right {
    width:16px;
    height:16px;
    background-image: url('assets/chevron-right-active.png');
}
.icon-refresh {
    width:16px;
    height:16px;
    background-image: url('assets/refresh.png');
}
.icon-plus {
    width:16px;
    height:16px;
    background-image: url('assets/plus.png');
}
.icon-pag-left {
    display:flex;
    width:20px;
    height:21px;
    background-image: url('assets/icon-pag-left.png');
    cursor: pointer;
}
.icon-pag-left.disable { opacity: 0.5;}
.icon-pag-right {
    display:flex;
    width:20px;
    height:21px;
    background-image: url('assets/icon-pag-right.png');
    cursor: pointer;
    box-sizing: border-box;
    /*border: 1px dotted goldenrod;*/
}
.icon-pag-right.disable { opacity: 0.5;}
.icon-pag-ellipsis-left,.icon-pag-ellipsis-right {
    display:flex;
    width:24px;
    height:24px;
    background-image: url('assets/icon-pag-ellipsis.png');
    cursor: pointer;
    box-sizing: border-box;
   /* border: 1px dotted goldenrod;*/
}
.pag-number {
    display:flex;
    flex-direction: column;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    /*    border: 1px dotted goldenrod;*/
    color:#A2A8A9;
    text-align: center;
    cursor: pointer;
}
.pag-number.current {
    background-color: #F8DE89;
    color: #162527;
}

.list-add {
/*    border-bottom-width: 2px;*/
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 12px;
}
.plus-circle {
    width:24px;
    height:24px;
    background-image: url('assets/plus-circle.png');
}

.list-hdr {
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 16px 0px;
    background-color: #F9F9F9;
}
    .list-hdr-item {
        display:flex;
        flex-direction: row;
        gap:4px;
    }
    .sort-icon {
        display:flex;
        margin: auto 0;
        width:16px;
        height: 16px;
        background-image: url(assets/chevron-down.png);
    }
    .list-hdr-item.hi  .sort-icon{
        background-image: url(assets/chevron-down-hi.png);
    }
    .list-hdr-item.hi.desc  .sort-icon{
        background-image: url(assets/chevron-up-hi.png);
    }

.list-body {
    display:flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-top-width: 0;
}
.list-body-row {
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    padding: 20px 0px;
}
.list-body-row:first-child {
    border-top-width: 0px;
}
.list-body-row.hi {
    background: #FFEEE3;
}


.wpcol {
    padding-left:10px;
    display:flex;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    /*border: 1px dotted blueviolet;*/
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #162527;
/*
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
*/
}
.list-hdr .wpcol {
    color: #A2A8A9
}
.wpvar {
    flex-shrink: 1!important;
    flex-grow: 1!important;
}

.role-tag {
    display:flex;
    flex-shrink: 1;
    padding:8px 16px;
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    border-radius: 24px;
    width: fit-content;
}
.role-tag.inactive {
    opacity: 0.35;
}
    .wp5 {width:5%;}
    .wp7_5 {width:7.5%;}
    .wp10 {width:10%;}
    .wp12_5 {width:12.5%;}
    .wp15 {width:15%;}
    .wp20 {width:20%;}
    .wp25 {width:25%;}
    .wp27_5 {width:27.5%;}
    .wp30 {width:30%;}
    .wp35 {width:35%;}
    .wp40 {width:40%;}
    .wp45 {width:45%;}
    .wp50 {width:50%;}
    .wp55 {width:55%;}
    .wp60 {width:60%;}

.project-stage-dot {
                    width:15px;height:15px;border-radius: 999px;flex-shrink: 0;flex-grow: 0;
                }

form.dbg input {
    font-size: 0.75rem!important;
    color:purple!important;
    border-color: purple!important;

}
.clickable {
    cursor:pointer;
    /*color:cornflowerblue;*/
}
.clickable:hover {
    text-decoration: underline;
}
.clink {
    color:#FFAA4D!important;
    cursor:pointer;
    text-decoration: underline!important;
}
.tab-pane {
     padding-top:40px!important;
}
/* old styling follows ====================================================================================*/


    .s-header {
        width:100%;
        display:flex;
        font-weight: bold;
        border-bottom: 2px solid cornflowerblue;
        margin:2rem 0 1rem 0;        
    }
    .tab-header {
        width:100%;
        display:flex;
        flex-direction: row;
        border-bottom:2px solid cornflowerblue;
        box-sizing: border-box;
    }
    .tab-header-tab {
        padding:0.5rem 1rem;
        box-sizing: border-box;
        cursor: pointer;
    }
    .tab-header-tab.hi {
        border:1px solid cornflowerblue;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
    .tab-body {
        width:100%;
        display:flex;
        flex-direction: column;
    }
    .tab-body-tab {
        
        min-height: 100px;
        box-sizing: border-box;
        padding: 1rem 0;
        width:100%;
        display:flex;
        flex-direction: column;
    }
    .tab-body-table {
        border:solid 1px cornflowerblue;
        min-height: 100px;
        box-sizing: border-box;
        padding: 1rem 1rem;
        width:100%;
        display:flex;
        flex-direction: column;
        border-radius: 10px;
    }


hr.hr-blue {
    margin: 2rem 0 ;
    border: 0;
    border-top: 2px solid cornflowerblue;
}

.kpanel {
    display: flex;
    width:100%;
    flex-direction: column;
    padding:16px;
    background-color: white;
    border-top: 0px solid lightgrey;
    border-left: 1px solid lightgrey;
    border-right: 2px solid lightgrey;
    border-bottom: 3px solid lightgrey;
}
.kpanel.kpanel-50{
    display: flex;
    width:49.5%;
}



.kpanel2 {
    display: flex;
    width:100%;
    flex-direction: column;
    padding:16px;
    box-sizing: border-box;
}
.dottyb {
    box-sizing: border-box;
    border:1px dotted gold;
}