/*** Accordion Component ***/
.accordion {
    margin-top: 10px;
    .itemHead {
        padding: 5px;
        font-size: 16px;
        font-family: $bt-font-family-bold;
        background: $bt-indigo-light;
        margin-bottom: 4px;
        color: $bt-white;
        cursor: pointer;
        .icon {
            float: right;
            transition: all 0.2s ease;
        }
    }
    .itemContent {
        min-height: 60px;
        padding: 5px;
        margin-top: -2px;
        margin-bottom: 2px;
        transition: all 0.2s ease;
    }
}

/*** Carousel Component ***/
.carousel {
    position: relative;
    margin: 0 auto;
    padding: 5px;
    .navig {
        position: relative;
        margin: 5px 0;
        text-align: center;
        .dots {
            display: inline;
            list-style: none;
            padding: 0;
            position: relative;
            margin: 3px auto;
            .dot {
                display: inline;
                list-style-type: none;
                padding: 0 2px;
                button {
                    background-color: $bt-grey-light-40;
                    border-radius: 50%;
                    height: 15px;
                    font-size: 0;
                    line-height: 0;
                    margin: 0;
                    transition-duration: 0.3s;
                    width: 15px;
                }
                &.active {
                    button {
                        background-color: $bt-indigo;
                    }
                }
            }
        }
        button {
            background: none;
            border: none;
            font-weight: bold;
            font-size: 16pt;
        }
        button[disabled] {
            background: none !important;
            border: none !important;
            opacity: 0.4;
            cursor: default;
        }
        button.prev {
            float: left;
        }
        button.next {
            float: right;
        }
    }
}

/*** Bar Loader ***/
.barLoader {
	margin: 0 auto;
	position: relative;
	max-width: 300px;
	.loadText {
		text-align: center;
        padding: 3px 0;
        &.neg {
            color: $bt-white;
        }
	}
}
.bars {
    height: 40px;
    margin: 10px auto;
    position: relative;
    width: 40px;
    .bar {
        background: $bt-white;
        bottom: 1px;
        height: 5px;
        position: absolute;
        width: 3px;
        animation: barloader 0ms -800ms linear infinite alternate;
        &.grey {
            background: #767676;
        }
        &.red {
            background: #c0392b;
        }
        &.green {
            background: #2ecc71;
        }
        &.blue {
            background: #3498db;
        }
        &.yellow {
            background: #e67e22;
        }
        &.pink {
            background: #e74c8c;
        }
        &.purple {
            background: #9b59b6;
        }
        &.white {
            background: $bt-white;
        }
        &.black {
            background: #000000;
        }
    }
    .bar:nth-child(1){
        left: 1px;
        animation-duration: 474ms;
    }
    .bar:nth-child(2){
        left: 5px;
        animation-duration: 433ms;
    }
    .bar:nth-child(3){
        left: 9px;
        animation-duration: 407ms;
    }
    .bar:nth-child(4){
        left: 13px;
        animation-duration: 458ms;
    }
    .bar:nth-child(5){
        left: 17px;
        animation-duration: 400ms;
    }
    .bar:nth-child(6){
        left: 21px;
        animation-duration: 427ms;
    }
    .bar:nth-child(7){
        left: 25px;
        animation-duration: 441ms;
    }
    .bar:nth-child(8){
        left: 29px;
        animation-duration: 419ms;
    }
    .bar:nth-child(9){
        left: 33px;
        animation-duration: 487ms;
    }
    .bar:nth-child(10){
        left: 37px;
        animation-duration: 442ms;
    }
}
@keyframes barloader {
    0% {
       opacity: .35;
        height: 3px;
    }
    100% {
        opacity: 1;
        height: 28px;
    }
}

/**** Main Loader ****/
#spinner {
    width: 50%;
    min-width: 280px;
    text-align: center;
    position: absolute;
    z-index: 1600;
    top: 45%;
    left: 25%;
    .message {
        margin-top: 10px;
        padding: 5px;
        border-radius: 4px;
        color: #000;
    }
    .loader {
        margin: 0 auto;
        span {
            display: inline-block;
            width: 10px;
            height: 40px;
        }
    }
    span.item-1 {
        background: #2ecc71;
        animation: scale 1.2s linear -0.9s infinite;
    }
    span.item-2 {
        background: #3498db;
        animation: scale 1.2s linear -0.8s infinite;
    }
    span.item-3 {
        background: #9b59b6;
        animation: scale 1.2s linear -0.7s infinite;
    }
    span.item-4 {
        background: #e67e22;
        animation: scale 1.2s linear -0.6s infinite;
    }
    span.item-5 {
        background: #c0392b;
        animation: scale 1.2s linear -0.5s infinite;
    }
    span.item-6 {
        background: #e74c3c;
        animation: scale 1.2s linear -0.4s infinite;
    }
    span.item-7 {
        background: #e74c8c;
        animation: scale 1.2s linear -0.3s infinite;
    }
}

/***** Spin Loader *****/
.spinLoader {
    margin: 10px auto;
    max-width: 300px;
    position: relative;
    text-align: center;
    .loadText {
        padding: 3px 0;
        text-align: center;
    }
    .loading {
        background-color: transparent;
        border-radius: 50%;
        border: 4px solid transparent;
        box-sizing: border-box;
        display: inline-block;
        padding: 0.5em;
        position: relative;
        vertical-align: middle;
    }
    .outer {
        animation: spinner 1s infinite;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
    }
    .inner {
        animation: spinner 1s infinite;
        border-bottom-color: transparent !important;
        border-top-color: transparent !important;
        opacity: 0.9;
    }
}
@keyframes spinner {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

/***** Drawer and Menu inside it *****/
.drawerWrap {
    .bm-drawer {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 500; /* Stay on top */
        top: 0;
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
        &.left {
            left: 0;
            right: auto;
        }
        &.right {
            left: auto;
            right: 0;
        }
        .closeIcon {
            position: absolute;
            top: 6px;
            right: 6px;
            cursor: pointer;
        }
        .title {
            font-size: 1.2em;
            padding: 5px 0;
        }
        &.dark {
            background-color: #555;
            color: $bt-white;
            .title {
                color: $bt-white;
            }
        }
        &.bt {
            background-color: $bt-indigo;
            color: $bt-white;
            .title {
                color: $bt-white;
            }
        }
        &.light {
            background-color: #f6f6f6;
            color: #000;
            .title {
                color: #5b5b5b;
            }
        }
        .bm-item-list {
            padding: 5px;
            color: inherit;
        }
    }
    .bm-burger-button {
        position: absolute;
        width: 36px;
        height: 30px;
        margin-top: 1%;
        cursor: pointer;
        .burger-icon {
            font-size: 20pt;
        }
        &.left {
            left: 1%;
        }
        &.right {
            right: 1%;
        }
        &.bt {
            color: $bt-indigo;
        }
    }
}
.navMenu {
    padding: 5px 2px;
    font-size: 0.9em;
    text-align: left;
    ul {
        list-style: none;
    }
    .navStack {
        padding: 5px 0;
        li {
            cursor: pointer;
            padding: 5px 8px;
            border-radius: 5px;
            margin: 2px 0;
            .navIcon {
                float: right;
            }
        }
    }
    .navMain {
        .grouped {
            border-width: 1px 0;
            border-style: solid;
            padding: 2px 0;
            h4 {
                font-size: 1.1em;
                padding: 5px 0;
            }
        }
        li {
            cursor: pointer;
            padding: 8px 3px;
            .navIcon {
                float: right;
                margin-right: 2px;
                margin-top: 2px;
            }
        }
    }
    &.bt {
        .navStack li {
            background-color: #7b02d1;
        }
        .navMain li:hover {
            background-color: #8c0de7;
        }
    }
    &.dark {
        .navStack li {
            background-color: rgb(131, 131, 131);
        }
    }
    &.light {
        .navStack li {
            background-color: #cecece;
        }
    }
}

/***** Tabs Component ****/
$grey-border: $bt-grey-light-40;
$inactive-tab: $bt-newpink-light;
$active-tab: $bt-indigo;
$inactive-tab-dialog: $bt-blue-light;
$active-tab-dialog: $bt-blue-dark;
.tabWrapper {
    margin: 5px 0;
    position: relative;
    display: inline-table;
    width: 100%;
    .tab-content {
        padding: 5px;
        box-sizing: border-box;
        background: $bt-white;
        border-top: 2px solid $active-tab;
        border-left: 1px solid $grey-border;
        border-right: 1px solid $grey-border;
        border-bottom: 1px solid $grey-border;
        &.vertical{
            border-top: 1px solid $grey-border;
            border-bottom: 1px solid $grey-border;
            &.right {
                border-right: 2px solid $active-tab;
                border-left: 1px solid $grey-border;
            }
            &.left {
                border-left: 2px solid $active-tab;
                border-right: 1px solid $grey-border;
            }
        }
        &.dialog {
            border-top: 2px solid $active-tab-dialog;
        }
    }
    .cells {
        display: table-cell;
        vertical-align: top;
    }
    /* Normal tabs */
    ul.normtabs {
        margin: 0px;
        padding: 0px;
        list-style: none;
        li {
            background: $inactive-tab;
            color: #000;
            display: inline-block;
            padding: 5px 10px;
            cursor: pointer;
            margin: 0 3px;
            border-bottom: 0;
            &.disabled {
                cursor: not-allowed;
                color: #000;
                background: #bbb
            }
            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                margin-right: 0;
            }
        }
        li.active {
            background: $active-tab;
            color: $bt-white;
            font-family: $bt-font-family-bold;
            &.disabled {
                cursor: not-allowed;
                color: #000;
                background: #bbb
            }
        }
        &.left {
            text-align: left;
        }
        &.right {
            text-align: right;
        }
        &.center {
            text-align: center;
        }
    }
    /* Dialog tabs */
    ul.diatabs {
        margin: 0px;
        padding: 0px;
        list-style: none;
        li {
            background: $inactive-tab-dialog;
            color: #000;
            display: inline-block;
            padding: 5px 10px;
            cursor: pointer;
            margin: 0 3px;
            &.disabled {
                cursor: not-allowed;
                color: #000;
                background: #bbb
            }
            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                margin-right: 0;
            }
        }
        li.active {
            background: $active-tab-dialog;
            color: $bt-white;
            font-family: $bt-font-family-bold;
            &.disabled {
                cursor: not-allowed;
                color: #000;
                background: #bbb
            }
        }
        &.left {
            text-align: left;
        }
        &.right {
            text-align: right;
        }
        &.center {
            text-align: center;
        }
    }
    /* Vertical Tabs */
    ul.verttabs {
        margin: 0px;
        padding: 0px;
        li {
            background: $inactive-tab;
            color: #000;
            padding: 5px 8px;
            cursor: pointer;
            margin: 3px 0;
            &.disabled {
                cursor: not-allowed;
                color: #000;
                background: #bbb
            }
            &:first-child {
                margin-top: 0;
            }
        }
        li.active {
            background: $active-tab;
            color: $bt-white;
            font-family: $bt-font-family-bold;
            &.disabled {
                cursor: not-allowed;
                color: #000;
                background: #bbb
            }
        }
    }
}

/****** Toast Messages Component *******/
.toastContainer {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1500;
    .message {
        margin: 5px auto 10px;
        padding: 5px;
        border-radius: 6px;
        font-size: 0.9em;
        position: relative;
        width: 60%;
        text-align: left;
        display: flex;
        flex-direction: column;
        background-color: $bt-white;
        box-shadow: $bt-toast-shadow;
        .message-header {
            display: flex;
            justify-content: space-evenly;
            .stateIcon {
                width: 2%;
                padding: 2px 5px;
            }
            .closeIcon {
                padding: 2px 5px;
                cursor: pointer;
            }
            .header {
                flex-grow: 1;
                font-weight: bold;
                padding: 2px 5px;
            }
        }
        .text {
            padding: 3px 4px;
            width: 100%;
        }
        hr {
            border: 1px dashed;
        }
        &.error {
            background-color: $bt-red-light;
            color: text-contrast($bt-red-light, $bt-white, $bt-black);
        }
        &.warn {
            background-color: $bt-amber-light;
            color: text-contrast($bt-amber-light, $bt-white, $bt-black);
        }
        &.info {
            background-color: $bt-blue-light;
            color: text-contrast($bt-blue-light, $bt-white, $bt-black);
        }
        &.success {
            background-color: $bt-green-light;
            color: text-contrast($bt-green-light, $bt-white, $bt-black);
        }
    }
    a.msgLink {
        padding: 0 2px;
        cursor: pointer;
        position: relative;
        text-decoration: underline;
    }
}

/***** Modal Component *****/
.genModalBox {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1300;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    .genModal {
        min-width: 280px;
        background: $bt-white;
        position: relative;
        margin: 5% auto 0 auto;
        border-radius: 4px;
        padding: 5px;
        width: 30%;
        text-align: left;
        .modalHeader {
            padding: 5px 3px;
            .icon {
                cursor: pointer;
                float: right;
                font-size: 1.2rem;
            }
            h4 {
                display: inline-block;
                line-height: 1em;
                font-family: $bt-font-family-bold;
            }
        }
        .modalContent {
            font-size: 0.95em;
            padding: 5px;
            line-height: 1.5em;
            text-align: justify;
            min-height: 50px;
        }
        .modalFooter {
            padding: 5px 0;
            > div {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;
            }
            .spacer {
                flex-grow: 1;
            }
        }
    }
    .genModal.small {
        width: 40%;
    }
    .genModal.medium {
        width: 60%;
    }
    .genModal.large {
        width: 90%;
    }
}

/***** Modal Form Component *****/
.genModalFormBox {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    animation-delay: 0.5s;
    text-align: left;
    .modalFormWrapper {
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 10px;
        padding: 5px 0;
        &.medium {
            width: 70%;
            left: 15%;
        }
        &.full {
            width: 94%;
            left: 3%;
        }
    }
    .modalFormContent {
        position: relative;
        background: $bt-white;
        height: 83%;
        padding: 10px 8px;
        overflow: hidden;
    }
    .modalFormHead {
        position: relative;
        background: $bt-blue;
        padding: 10px 8px;
        border-radius: 2px 2px 0 0;
        color: $bt-white;
        .icon {
            font-size: 1.2rem;
            cursor: pointer;
            float: right;
            color: $bt-white;
        }
        .help {
            padding: 0 8px;
            color: $bt-white;
        }
        h4 {
            display: inline-block;
            line-height: 1em;
            color: $bt-white;
            font-family: $bt-font-family-bold;
        }
    }
    .modalFormFooter {
        position: relative;
        background: $bt-white;
        padding: 5px 8px;
        border-top: 2px solid #eee;
        text-align: right;
        border-radius: 0 0 2px 2px;
        min-height: 30px;
        > div {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
        }
        .spacer {
            flex-grow: 1;
        }
    }
}

/****** Date Picker Component *******/
.datepicker {
    position: relative;
    text-align: left;
    .icon {
        top: -28px;
        left: -5px;
        float: right;
        color: grey;
        cursor: pointer;
        position: relative;
    }
    .calendar {
        position: absolute;
        z-index: 100;
        background: $bt-white;
        width: 100%;
        min-width: 250px;
        color: #000;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
        font-size: 16px;
        header {
            display: flex;
            height: 30px;
            align-items: center;
            justify-content: space-evenly;
            span {
                display: inline-block;
                text-align: center;
                width: 100%;
                height: 28px;
            }
            .prev {
                width: 14.25%;
                position: relative;
                &:after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    border: 6px solid transparent;
                    border-right: 10px solid #000;
                    margin-left: -5px;
                }
                &:not(.disabled) {
                    cursor: pointer;
                    &:hover {
                        background: #eee;
                    }
                }
            }
            .next {
                width: 14.25%;
                position: relative;
                &:after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    border: 6px solid transparent;
                    border-left: 10px solid #000;
                    margin-left: 5px;
                }
                &:not(.disabled) {
                    cursor: pointer;
                    &:hover {
                        background: #eee;
                    }
                }
            }
            .prev.disabled {
                &:after {
                    border-right: 10px solid #ddd;
                }
            }
            .next.disabled {
                &:after {
                    border-left: 10px solid #ddd;
                }
            }
            .up {
                font-family: $bt-font-family-bold;
                line-height: 25px;
                &:not(.disabled) {
                    cursor: pointer;
                    &:hover {
                        background: #eee;
                    }
                }
            }
        }
        .disabled {
            color: #ddd;
            cursor: default;
        }
        .blocks {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            &.year {
                justify-content: center;
            }
        }
        .cell {
            display: inline-block;
            position: relative;
            padding: 5px;
            width: 13.9%;
            height: 30px;
            text-align: center;
            vertical-align: middle;
            line-height: 16px;
            &:not(.blank) {
                &:not(.selected) {
                    &:not(.disabled).day {
                        cursor: pointer;
                        &:hover {
                            background-color: $bt-grey-light-90;
                        }
                    }
                    &:not(.disabled).month {
                        cursor: pointer;
                        &:hover {
                            background-color: $bt-grey-light-90;
                        }
                    }
                    &:not(.disabled).year {
                        cursor: pointer;
                        &:hover {
                            background-color: $bt-grey-light-90;
                        }
                    }
                }
            }
            &.blank {
                margin: 0;
            }
            &.current {
                background: $bt-blue-light;
                color: $bt-black;
            }
            &.selected {
                background: $bt-indigo;
                color: $bt-white;
                cursor: default;
            }
            &.grey {
                color: #888;
                &:hover {
                    background: inherit;
                }
            }
            &.day-header {
                font-size: 0.8em;
                cursor: inherit;
                &:hover {
                    background: inherit;
                }
            }
            &.month {
                width: 33%;
            }
            &.year {
                width: 33%;
            }
        }
    }
}

/****** Time picker component ******/
.time-picker {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: middle;
    * {
        box-sizing: border-box;
    }
    .icon {
        top: -28px;
        left: -5px;
        float: right;
        color: grey;
        cursor: pointer;
        position: relative;
    }
    .dropdown {
        position: absolute;
        z-index: 5;
        left: 2%;
        background: $bt-white;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
        height: 10em;
        width: 280px;
        font-weight: normal;
        .select-list {
            height: 10em;
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-flow: row nowrap;
            align-items: stretch;
            justify-content: space-between;
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            li {
                text-align: center;
                padding: 0.3em 0;
                color: #161616;
                &:not(.hint) {
                    &:hover {
                        background: rgba(0, 0, 0, 0.08);
                        color: #161616;
                        cursor: pointer;
                    }
                }
            }
            li.active {
                background: $bt-indigo;
                color: $bt-white;
                &:hover {
                    background: $bt-indigo;
                    color: $bt-white;
                }
            }
        }
        ul.minutes {
            border-left: 1px solid $bt-white;
        }
        ul.seconds {
            border-left: 1px solid $bt-white;
        }
        ul.apms {
            border-left: 1px solid $bt-white;
        }
        .hint {
            color: #a5a5a5;
            cursor: default;
            font-size: 0.8em;
        }
    }
}

/** Dynamic Stepper Component **/
.stepperWarp {
    text-align: center;
    margin: 5px auto;
    ul {
        border: none;
        position: relative;
        box-sizing: border-box;
        &.horizontal {
            width: 100%;
            height: 5px;
            margin: 20px 0 0px;
            position: relative;
            box-sizing: border-box;
            background-position: 0 0, 0 100%;
            background-repeat: no-repeat;
            li {
                position: absolute;
                margin-top: -15px;
            }
            .details {
                position: absolute;
                left: -45px;
                top: -32px;
                padding: 2px;
                border-radius: 3px;
                font-size: 0.9em;
                margin-top: 68px;
                width: 130px;
            }
        }
        &.vertical {
            text-align: center;
            width: 5px;
            .details {
                float: left;
                padding: 2px;
                margin-top: -30px;
                margin-left: 40px;
                border-radius: 3px;
                font-size: 0.9em;
                width: 130px;
                text-align: left;
            }
            li {
                margin-top: 30px;
                margin-left: -13px;
            }
            &.right {
                margin-left: 100px;
                .details {
                    float: right;
                    text-align: right;
                    margin-left: 0;
                    margin-right: 25px;
                }
            }
        }
    }
    .blob {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border-width: 2px;
        border-style: solid;
        padding: 5px 0;
        cursor: pointer;
        span {
            margin-left: -4px;
            position: absolute;
            margin-top: -3px;
            font-size: 0.8em;
        }
        .icon {
            margin-left: -8px;
            position: absolute;
        }
        &.white {
            border-color: $bt-indigo;
            background: $bt-white;
            color: $bt-black;
        }
        &.purple {
            border-color: $bt-indigo;
            background: $bt-indigo;
            color: $bt-white;
        }
        &.black {
            border-color: $bt-black;
            background: $bt-black;
            color: $bt-white;
        }
        &.grey {
            border-color: $bt-grey-dark-20;
            background: $bt-grey-dark-20;
            color: $bt-white;
        }
        &.amber {
            border-color: $bt-amber;
            background-color: $bt-amber;
            color: text-contrast($bt-amber, $bt-white, $bt-black);
        }
        &.green {
            border-color: $bt-green;
            background-color: $bt-green;
            color: text-contrast($bt-green, $bt-white, $bt-black);
        }
        &.pink {
            border-color: $bt-newpink;
            background-color: $bt-newpink;
            color: text-contrast($bt-newpink, $bt-white, $bt-black);
        }
        &.red {
            border-color: $bt-red;
            background-color: $bt-red;
            color: text-contrast($bt-red, $bt-white, $bt-black);
        }
    }
}