////Inputs


//Text Input
.bip-input-div {
    position: relative;
    .bip-input{
        @extend .form-control;
    }

    .password-visibility-toggle, .calendar-icon{
        cursor:pointer;
        position: absolute;
        top: 9px;
        right: 9px;

        &.fa-eye-slash {
            right: 8px;
        }
    }

    .is-invalid + .password-visibility-toggle{
        padding-right:1.5em;
    }


}

//Label
.bip-label{
    font-weight:bold; 
    padding: 0 $input-padding-x $input-padding-y $input-padding-x; 
}

//Select


.bip-select{
    @extend .form-control;
}

.select2-container{
    display:block;
}


//Checkbox


//Toggle

//Date/Time Picker
.calendar-icon{
    color:$primary !important;
}
.date-picker{
    position:relative;
    .calendar-icon{
        position: absolute;
        top: 9px;
        right: 9px;
        color:$primary !important;
    }

    input{
        &:hover{
            cursor: pointer;
        }
    }


    .qs-datepicker-container{
        color: inherit;
        font-size: 1.1em;
        width:25em;
        max-width:80%;
        border: 1px solid $gray-300;
        .qs-day{
            color: $primary;
        }
        .qs-controls{
            background-color: $primary;
            color: choose-contrast-color($primary);
            padding: 0.6em;
        }
        .qs-arrow{
            &.qs-arrow.qs-right:after{
                border-left-color: choose-contrast-color($primary);
            }
            &.qs-arrow.qs-left:after{
                border-right-color: choose-contrast-color($primary);
            }
            
            &:hover{
                color: inherit;
            }
        }
        .qs-square{
            height: 2em;
        }
    }
}



body .daterangepicker{

    td.active, td.active:hover, .ranges li.active{
        background-color: $primary !important;
    }

    select{
        &.hourselect, &.minuteselect, &.ampmselect, &.monthselect, &.yearselect{
            @extend .form-control;
            display:inline-block;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right .25rem center !important;
            background-color:white !important;
            background-size:1rem !important;
        }
        
        &.monthselect, &.yearselect{
            width:5rem;
        }
        
        &.hourselect, &.minuteselect, &.ampmselect{
            width:4rem;
        }
        
    }

    .calendar-time {
        border-top: 1px solid #ddd;
        margin-left: -8px !important;
        padding-top: 4px;
        padding-left: 4px;
    }

    .drp-selected{
        display:none !important;
    }
}

// .calendar-time {
//     display: inline-block;
//     margin: 0 auto;
//     background-color: #0e346e;
//     padding: 0px 6px;
//     border-radius: 36px;
// }

// .calendar-time select {
//     background-color: transparent !important;
//     border:  none !important;
//     color: white;
//     font-weight: bold;
//     width: 3.5em !important;
// }

.drp-calendar {
    text-align: center;
}



////Buttons
//Primary

//Cancel

//Search

//Edit Form
div#formEditButton {
    display: flex;
    position: absolute;
    border-radius: 100%;
    height: 3em;
    width: 3em;
    cursor: pointer;
    top: 0;
    right: calc(-50% - 0.5em);
    z-index: 11;
    background: $primary;
    color: choose-contrast-color($primary);
    align-items: center;
    justify-content: center;
}





////Modals
.modal-content{
    @extend .rounded;
    span.close {
        position: absolute;
        right: 15px;
    }

    .modal-header{
        background-color: $primary;
        color: white;
    }
    .modal-header{
        @extend .rounded-top;
    }
    .modal-body{
        @include p(5);
    }
}



// Scroll to top button
.scrolltoTop{
    &.floating{
        position: fixed;
        right: 0;
        bottom: 300px;
        z-index: 9;
        padding: 1em 2em;
        background-color: $primary;
        color: choose-contrast-color($primary);
        @extend .rounded-start;
        box-shadow: 2px 2px 10px #000;

    }
    cursor: pointer;
}





//Tabs maybe

ul[role='tablist']{ 
    
    li{
        padding: 0 1px 0 0;  
    }
    .tab-description{
        .row > *{
            @include media-breakpoint-down(md) {
                width: auto;
                max-width: none;
                padding-right: initial;
            }
        }
        > div{
            &:first-of-type{  
                i{
                    color: choose-contrast-color($primary);
                    background: $primary;
                    border-radius: 50%;
                    margin-right: 0;
                    width: 50px;
                    height: 50px;
                    color: white;
                    float: left;
                    padding-top: calc(#{50px} / 4);
                    @include media-breakpoint-down(md) {
                        background-color: transparent; 
                        color: $primary;
                        width: unset;
                        height: unset;
                        padding: 0;
                        font-size: initial;
    
                    }
                }
                
            }
        }
        .mega-content{
            float: left;
            max-width: calc(100% - #{50px});
            @include media-breakpoint-down(md) {
                max-width: unset;
                width: auto;
            }
        }
        span.description{
            font-size: 90%;
            color: #5d5d5d;
            font-weight: 300;
            box-sizing: border-box;
            display: block;
            @include media-breakpoint-down(md) {
                display: none;
            }
        }
        .col-auto{
            @include p(0);
        }  
    }
    .nav-link{
        // color: $text;
        background-color: $gray-100;
        border: 1px solid $gray-300;
        transition: all 0.2s;
        padding-top: 5px;
        font-size:1.1rem;
        padding-top:8px;
        padding-bottom:8px;
        @include px(4);
        @extend .rounded-top;
        i{
            color: inherit; 
            @include me(2); 
        }
        &.active, &:hover{
            background-color:white;  
            padding-top: 12px;
            padding-bottom: 12px;  
            margin-top:-8px;  
            color:$primary;   
        }

        &.active{
            font-weight: 800;
        }
        &.tab-no-icon{
            .mega-content{
                @include ps(0);
                width: 100%;
                max-width: unset;
            }
        }
    }
    &.nav-fill{ 
        &.has-description{
            .nav-link{
                text-align: left;
                @include p(3);
                border          : 1px solid #d8d8d8;
                border-left     : 0!important;
                border-radius   : 0!important;
                height          : calc(100% + 1px);
                display         : flex;
                align-items     : center;
                justify-content : center;

                &:hover, &.active{
                    margin-top: 0!important; 
                }
                &.active{
                    border-bottom: 1px solid white !important; // Border bottom here should match the tab content container colour.
                }
                &:hover:not(.active){
                    background: $primary;
                    color: choose-contrast-color($primary);
                    span{
                        color: choose-contrast-color($primary);
                    }
                    i{
                        background-color: choose-contrast-color($primary);
                        color: $primary;
                        @include media-breakpoint-down(md) {
                            background-color: transparent;
                            color: choose-contrast-color($primary);
                        }
                    }
                }
                

                // Responsive

                @include media-breakpoint-down(md) {
                    padding-top: 5px;
                    padding-bottom: 5px;
                    @include px(4);
                }
                
            }
            li{
                padding: 0;
                max-width: 50%;
                @include media-breakpoint-down(md) {
                    max-width: unset;
                    width: auto!important;
                }
                &:first-of-type{
                    a.nav-link{
                        border-left: 1px solid #d8d8d8 !important;
                        border-top-left-radius: $border-radius !important;
                    }
                }
                &:last-of-type{
                    a{
                        border-top-right-radius: $border-radius!important;
                    }
                }
                
            }
  
        }
    }
    
}
.tab-content{
    border-left:1px solid $gray-300;
    border-bottom:1px solid $gray-300;
    border-right:1px solid $gray-300;
    padding: 1em;
    background-color: white;
}

// Accordion Suggested
.bip-accordion{
    background: none;
    @extend .rounded;
    @include my(2);
    border: 1px solid $gray-300;
    border-bottom: 0;
    .accordion-body{
        border-bottom: 1px solid $gray-300;
    }
    .accordion-item:first-of-type{
        .accordion-btn{
            border-top-left-radius: $border-radius;
            border-top-right-radius: $border-radius;
        }
    }
    .card-header{
        @include p(0);
        background-color: $gray-100;
        &:first-child{
            border-radius: 0;
        }
        &:hover{
            background-color:$primary;
            .btn{
                color: choose-contrast-color($primary);
                i{
                    color: choose-contrast-color($primary);
                }
            }
        }
        &.accord-active{
            .btn{
                &:before{
                    transform: rotate(-180deg);
                }
                &:hover{
                    color: initial;
                }
                color: $primary;
                font-weight: 800;
                
            }
            
            &:hover{
                
                button.btn{
                    color: choose-contrast-color($primary);
                }
                
            }
        }
    }
    .btn{
        @include p(3);
        text-align: left;
        transition: none;
        width: calc(100% - 1rem); // Wrapper Space for right hand icon;
        border-radius: 0;
        position:relative;
        font-weight: normal;
        font-size: 1.1rem;
        &:focus{
            outline: 0!important;
            box-shadow: none;
        }
        &:before{
            content: "\f078";
            font-family: "Font Awesome 5 Pro";
            right: 0.25em;
            position: absolute;
            top: 1.1rem;
        }  
        i{
            color: $primary;
            @include me(2); 
        }

        
    }

}

//Messages
.bip-message{
    border: 2px solid;
    box-shadow: 0px 2px 3px 1px #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bip-message-content{
        padding: 1rem;
        margin:0 auto 0 0;
    }

    .bip-message-close{
        padding: 0 1rem 0 0;
    }

    .bip-message-icon{
        padding: 0 0 0 1rem;
    }

    @include my(3);

    &.bip-message-confirm{
        border-color:$info;
    }

    &.bip-message-info{
        border-color:$warning;
    }

    &.bip-message-error{
        border-color:$danger;
    }

    .bip-message-close{
        cursor:pointer;
    }
}

// Infoboxes
.infobox-meta{
    border-left:1px solid $gray-300;
    h4{
        color: $primary;
    }
}

// Charachter Counter
.bip-input-div{

    &.has-counter{

        .counter-container{
            position: absolute;
            right: 7px;
            max-width: 60px;
            font-size: 0.8em!important;
            top: 7px;
            background-color: $gray-200;
            padding: 1px 3px;
            display: inline-block;
            border-radius: 4px;
        }
        input{
            padding-right: 60px;
        }

    }
    
}






////Tooltips
.tooltip-inner{
    box-shadow: 1px 4px 12px 0px rgba(0, 0, 0, 0.719)!important;
}



////Tables
.bip-table-wrapper{
    overflow-x:auto;
    max-width:100%;

    table{
        @extend .table;  
        @include border-radius();
        overflow: hidden;
        thead{
            @include p(3); 
            background-color:navy;
            color:white;
            th{
                @include px(3);
                font-weight:normal;

                a{
                    color:inherit;
                }
            }
        }
        tbody{
            input{
                margin: 0 auto;
                display: block;
            }
        }
        td{
            @include px(3);
        }
        
    }

    .bip-table-select-all {
        display:flex;
        justify-content: center;
        min-width: 60px; 
        user-select: none;
        >label{
            text-align:center;
            cursor: pointer;
            > input {
                margin: 3px 0;
                cursor: pointer;
            }
        }
    }
}
 
.bip-table-search{
    align-items:flex-end;
    @include mb(3);
}

.clear-search{
    font-weight:bold;
    color:$blue;
    cursor: pointer;
}

.bip-table-adv-filter{
    .bip-table-adv-filter-container{
        border: 1px solid darkgray;
        @extend .rounded;
        @include p(3);
        @include mb(3);
    }

    .bip-table-adv-filter-title{
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:0;
    }

    .bip-table-adv-filter-controls{
        @include mt(2);
        .bip-table-adv-filter-options{
            display:flex;
            flex-direction: column;
        }

    }
    .bip-table-adv-filter-active-filters{
        
        span{
            display:block;
            background:$gray-200;
            @include p(2);
            @include mb(3);
            
        }
    }
}

.bip-actions-menu{
    position: relative;
    display: inline-block;

    .bip-actions-menu-box{
        transform: translateY(-50%);
        top: 0;
        left: 5px;
        position: absolute;
        background: white;
        padding: 0.5em;
        border: 1px solid #eef0f2;
        min-width: 150px;
    } 
    .bip-actions-menu-link{
        cursor: pointer;
        padding: 0 0.25em;
    }
}

.popover a{
    cursor: pointer;
}





.dataTables_wrapper{
    .dataTables_info, .dataTables_length{
        display:inline;
    }

    .dataTables_length{
        :before {
            content: " | ";
        }
    }

    .dataTables_paginate {
        display: flex;
        justify-content: center;
        align-items: center;
        .paginate_button{
            cursor: pointer !important;
            margin: 0 3px;
            
            &.disabled{
                cursor: not-allowed;
                background:$gray-200 !important;
                color:$gray-300 !important;
            }
        }
        >.paginate_button{
            border-radius:3px;
            font-family: "Font Awesome 5 Pro";
            display: flex;
            justify-content: center;
            align-items: center;
            width:2rem;
            height:2rem;
            border:1px solid $gray-200;
            color:$primary;
        }
        >span{
            display:flex;
            flex-wrap:nowrap;
            a.paginate_button{
                display:block;
                text-align:center;
                // width:1.5rem;
                margin:0 0.5rem;
                background:none !important;
                border:none !important;

                &.current{
                    border-bottom:1px solid black !important;
                    font-weight:bold;
                }
            }
        }
    }

    .dataTables_above{
        display:flex;
        align-items: flex-end;
        @include mb(3);
        color:$secondary;
    }

    .dataTables_footer{

        @include media-breakpoint-down(md) {
            display:flex;
            justify-content:space-between;
            align-items:center;
        }

        @include media-breakpoint-up(md) {
            #select-options{
                position:absolute;
            }
        }

    }
}

//Basic Table

//Double Header Table

//Pagination

//Search

//Filter



////TreeNav
// div.treeNav {
//     max-height: 500px;
//     overflow-y: scroll;
//     @extend .beautiful-scroll;
// }

.treeNav strong {
    background: #0e418f;
    padding: 2px 4px;
    color: white;
    border-radius: 3px;
}

.treeNav strong > strong {
    display: none;
}

.treeNav{
    // max-height:50vh;
    // height:500px;
    overflow:auto;
}



////Code Example
.bip-code-example{
        border: 1px solid $gray-200;
        @include my(4);

    .bip-code-example-result{
        padding:1em;
    }
    .bip-code-wrapper{
        display:none;
        max-height: 500px;
        overflow: auto;
        background:$gray-100;
        border-bottom: 1px solid $gray-200;
        @include mb(3);

        pre{
            display:inline-block;
            width:100%;
        }
    }

    .bip-code-example-title{
        // margin:0 0 1rem 0;
        @include p(3);
        display:flex;
        align-items:center;
        background-color: $gray-100;
        border-bottom: 1px solid $gray-200;
        >i{
            
            cursor: pointer;
        }
        h3{
            margin:0;
        }
    }

}