﻿/*
    bem

    assumptions:
    modifier is not used for default
    modifier is used for: small, large, color, filter, action, drop-down? (down arrow)

    policies:
    filter buttons are white-grey and default
    action buttons are white-secondary and default
*/

.albany-action-header {
    background-color: rgba(124, 193, 66, 0.3);
    float: left;
    width: 100%;
}

.albany-action-header__text {
    font-size: 2em;
    display: inline-block;
    font-weight: bold;
    vertical-align: -3px;
    margin-left: 10px;
}

.albany-action-header__nwrap {
    float: left;
    padding: 10px;
}

.albany-action-header__pwrap {
    float: right;
    padding: 10px;
}

.albany-action-header__back {
    display: inline-block;
}

/* PRO-TIP BOX */
.albany-protip {
    display: flex;
    justify-content: center;
    align-items: center;
}

.albany-protip__box, .albany-protip__box .albany-protip__close:hover {
    border: 1px solid #2270cc;
    background-color: #D3E4F8;
    color: #222;
}

.albany-protip__box {
    position: relative;
    padding: 5px 100px 5px 5px;
    margin: 10px 0;
}

.albany-protip__text {
    font-size: 12px;
}

.albany-protip__box .albany-protip__close {
    color: #222;
    text-shadow: 0 1px 0 rgba(0,0,0,0.75);
    font-weight: bold;
    font-size: 11px;
    position: absolute;
    right: 8px;
    top: 4px;
    padding: 0 5px;
    padding-bottom: 2px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    border: 1px solid transparent;
    border-radius: 3px;
}

.albany-protip__icon {
    width: 23px;
    margin-right: 10px;
}

/* Fix for tag input box not disappearing quick enough (bad transition) */
.chosen-container-multi .chosen-choices {
    transition: none;
    -webkit-transition: none;
}

    .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
        transition: none;
        -webkit-transition: none;
    }

/* dropdown */
.albany-dropdown {
    text-align: left;
    display: inline-block;
    font-family: proximasoft-regular;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    border-radius: 0;
    cursor: pointer;
    text-shadow: none;
    margin: 0px;
    padding: 0px;
    position: static;
}

    .albany-dropdown > .albany-dropdown__list > li > a {
        width: 100%;
        display: inline-block;
        padding: inherit;
        margin: -5px -45px -5px -15px;
    }

.albany-dropdown__btn {
    display: inline-block;
    text-align: left;
    /*default*/
    padding: 10px 15px;
    margin: 0px;
}

.albany-dropdown__child-btn {
    display: inline-block;
    text-align: left;
    /*default*/
    margin: 0px;
}

.albany-dropdown__btn .fa-chevron-down {
    display: unset;
}

.albany-dropdown__list {
    text-align: left;
    display: none;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: absolute;
    margin-top: 0;
    z-index: 1;
    white-space: nowrap;
    list-style-type: none;
}

.albany-dropdown__list--right {
    right: 0;
}

    .albany-dropdown__list > li {
        text-align: left;
        margin: 0px;
        padding: 5px 15px;
        padding-right: 45px;
    }

form.albany-dropdown__list > span {
    display: inline-block;
    text-align: left;
    margin: 0px;
    padding: 10px 15px;
    padding-right: 30px;
}

form#tableView.albany-dropdown__list > label {
    display: inline-block;
    text-align: left;
    margin: 0px;
    padding: 10px 15px;
    padding-right: 30px;
}

.albany-dropdown__child-list {
    text-align: left;
    display: none;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: absolute;
    margin-top: 0.25rem;
    z-index: 1;
    white-space: nowrap;
    background: white;
    border: 2px solid gray;
}

    .albany-dropdown__child-list--right {
        right: 0;
    }

    .albany-dropdown__child-list > li {
        text-align: left;
        margin: 0px;
        padding: 5px 15px;
        padding-right: 45px;
    }
/* color: white-secondary */
.albany-dropdown--white-secondary {
}

    .albany-dropdown--white-secondary > .albany-dropdown__btn, .albany-dropdown--white-secondary > .albany-dropdown__btn:visited {
        background: white;
        color: #2270CC;
        border: 2px solid #2270CC;
    }

    .albany-dropdown--white-secondary > .albany-dropdown__list {
        background: white;
        border: 2px solid #2270CC;
    }

        .albany-dropdown--white-secondary > .albany-dropdown__list > li {
            background: white;
            color: #2270CC;
        }

            .albany-dropdown--white-secondary > .albany-dropdown__list > li > * {
                background: white;
                color: #2270CC;
            }

            .albany-dropdown--white-secondary > .albany-dropdown__list > li:hover {
                background: #2270CC;
                color: white;
            }

                .albany-dropdown--white-secondary > .albany-dropdown__list > li:hover > * {
                    background: #2270CC;
                    color: white;
                }

/* color: white-grey */
.albany-dropdown--white-grey {
}

    .albany-dropdown--white-grey > .albany-dropdown__btn, .albany-dropdown--white-grey > .albany-dropdown__btn:visited {
        background: white;
        color: black;
        border: 2px solid grey;
    }

    .albany-dropdown--white-grey > .albany-dropdown__list {
        background: white;
        border: 2px solid grey;
    }

        .albany-dropdown--white-grey > .albany-dropdown__list > li {
            background: white;
            color: black;
        }

            .albany-dropdown--white-grey > .albany-dropdown__list > li > * {
                background: white;
                color: black;
            }

            .albany-dropdown--white-grey > .albany-dropdown__list > li:hover {
                background: grey;
                color: white;
            }

                .albany-dropdown--white-grey > .albany-dropdown__list > li:hover > * {
                    background: grey;
                    color: white;
                }

/* color: action-call */
.albany-dropdown--action-call {
}

    .albany-dropdown--action-call > .albany-dropdown__btn, .albany-dropdown--action-call > .albany-dropdown__btn:visited {
        /* 80% saturation, 80% brightness */
        border: 2px solid #ca5f44;
        background: #ca5f44;
        color: white;
    }

        .albany-dropdown--action-call > .albany-dropdown__btn:hover {
            /* 50% saturation, 80% brightness */
            border: 2px solid #b26e5b;
            background: #b26e5b;
            color: white;
        }

        .albany-dropdown--action-call > .albany-dropdown__btn:hover {
            /* 50% saturation, 80% brightness */
            border: 2px solid #b26e5b;
            background: #b26e5b;
            color: white;
        }

        .albany-dropdown--action-call > .albany-dropdown__btn:active {
            /* 100% saturation, 60% brightness */
            border: 2px solid #c2492f;
            background: #c2492f;
            color: white;
        }

        .albany-dropdown--action-call > .albany-dropdown__btn:focus {
            /* border, 60% brightness */
            border: 2px solid #F15B3B;
            background: #c2492f;
            color: white;
        }

        .albany-dropdown--action-call > .albany-dropdown__btn:disabled {
            /* 50% saturation, 90% brightness */
            border: 2px solid #bd7460;
            background: #bd7460;
            color: white;
        }

    .albany-dropdown--action-call > .albany-dropdown__list,
    .albany-dropdown--action-call .albany-dropdown__child-list {
        background: white;
        border: 2px solid grey;
    }

        .albany-dropdown--action-call > .albany-dropdown__list > li,
        .albany-dropdown--action-call .albany-dropdown__child-list > li {
            background: white;
            color: black;
        }

            .albany-dropdown--action-call > .albany-dropdown__list > li > *,
            .albany-dropdown--action-call .albany-dropdown__child-list > li > * {
                background: white;
                color: black;
            }

            .albany-dropdown--action-call > .albany-dropdown__list > li:hover,
            .albany-dropdown--action-call .albany-dropdown__child-list > li:hover {
                background: #ca5f44;
                color: white;
            }

                .albany-dropdown--action-call > .albany-dropdown__list > li:hover > *:not(ul),
                .albany-dropdown--action-call .albany-dropdown__child-list > li:hover > *:not(ul) {
                    background: #ca5f44;
                    color: white;
                }

/* color: green-primary */
.albany-dropdown--green-primary {
}

    .albany-dropdown--green-primary > .albany-dropdown__btn, .albany-dropdown--green-primary > .albany-dropdown__btn:visited {
        /* 80%  saturation, 80% brightness */
        border: 2px solid #7CC142;
        background: #7CC142;
        color: white
    }

        .albany-dropdown--green-primary > .albany-dropdown__btn:hover {
            /* 50% saturation, 80% brightness */
            border: 2px solid #8aa770;
            background: #8aa770;
            color: white;
        }

        .albany-dropdown--green-primary > .albany-dropdown__btn:hover {
            /* 50% saturation, 80% brightness */
            border: 2px solid #8aa770;
            background: #8aa770;
            color: white;
        }

        .albany-dropdown--green-primary > .albany-dropdown__btn:active {
            /* 100% saturation, 60% brightness */
            border: 2px solid #649b35;
            background: #649b35;
            color: white;
        }

        .albany-dropdown--green-primary > .albany-dropdown__btn:focus {
            /* border, 60% brightness */
            border: 2px solid #649b35;
            background: #7cc142;
            color: white;
        }

        .albany-dropdown--green-primary > .albany-dropdown__btn:disabled {
            /* 50% saturation, 90% brightness */
            border: 2px solid #9ebc82;
            background: #9ebc82;
            color: white;
        }

    .albany-dropdown--green-primary > .albany-dropdown__list {
        background: white;
        border: 2px solid grey;
    }

        .albany-dropdown--green-primary > .albany-dropdown__list > li {
            background: white;
            color: black;
        }

            .albany-dropdown--green-primary > .albany-dropdown__list > li > * {
                background: white;
                color: black;
            }

            .albany-dropdown--green-primary > .albany-dropdown__list > li:hover {
                background: #7CC142;
                color: white;
            }

                .albany-dropdown--green-primary > .albany-dropdown__list > li:hover > * {
                    background: #7CC142;
                    color: white;
                }

/* Sliders */
.switch {
    position: relative;
    display: inline-block;
    float: right;
    height: 26px;
    width: 50px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 2px solid #2270CC;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 3px;
        background-color: #2270CC;
        -webkit-transition: .4s;
        transition: .4s;
    }

.on {
    display: none;
    left: 28%;
    color: #2270CC
}

.off {
    color: #2270CC;
    left: 72%;
}

.on, .off {
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/* End Toggle Button */