﻿/*------------------Components--------------------*/
.btn, .btn--invisible, .ButtonGroup-item--previous .ButtonGroup-btn, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit), .ButtonGroup-item--next .ButtonGroup-btn.isSubmit {
    min-width: 40px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 0 12px 0 12px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
    transition: all .2s ease;
    user-select: none
}

    .btn:not(.isDisabled), .btn--invisible:not(.isDisabled), .ButtonGroup-item--previous .ButtonGroup-btn:not(.isDisabled), .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit):not(.isDisabled), .ButtonGroup-item--next .ButtonGroup-btn.isSubmit:not(.isDisabled) {
        cursor: pointer
    }

    .btn.hidden, .btn--invisible.hidden, .ButtonGroup-item--previous .ButtonGroup-btn.hidden, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit).hidden, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit.hidden {
        visibility: hidden;
        transition: all .2s ease
    }

    .btn.isDisabled, .btn--invisible.isDisabled, .ButtonGroup-item--previous .ButtonGroup-btn.isDisabled, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit).isDisabled, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit.isDisabled, .btn:hover.isDisabled, .btn--invisible:hover.isDisabled, .ButtonGroup-item--previous .ButtonGroup-btn:hover.isDisabled, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit):hover.isDisabled, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit:hover.isDisabled {
        background-color: #ddd
    }

.btn--invisible {
    height: 32px;
    cursor: default !important;
    visibility: hidden !important
}

.btn-square {
    width: 40px;
    height: 40px;
    padding: 0;
    min-height: 40px;
    max-width: 40px;
    text-align: center
}

.btn-stack {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-top: 12px
}

.btn--x-large {
    width: 312px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-width: 2px !important;
    font-size: 18px;
    letter-spacing: .02em;
    padding: 0 12px 0 12px;
    line-height: 48px
}

.btn-medium {
    min-width: 36px;
    height: 36px;
    border-radius: 3px;
    font-weight: normal;
    line-height: 36px
}

.btn-small {
    min-width: 24px;
    padding: 0 6px 0 6px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: normal;
    line-height: 28px
}

.btn-icon {
    width: auto;
    padding: 0;
    display: inline-block
}

    .btn-icon img {
        vertical-align: middle;
        padding: 0
    }

.btn-label {
    display: inline-block;
    min-width: 40px;
    margin: 0 8px 0 8px
}

.btn-outlined {
    background-color: transparent;
    border: 1px solid #93969e;
    color: #93969e
}

    .btn-outlined:hover {
        border: 1px solid #c3c5ca;
        color: #c3c5ca
    }

.btn-round {
    border-radius: 100%
}

.btn.isDeactivated {
    opacity: .3;
    cursor: not-allowed
}

.btn-list-dropdown {
    display: inline-block;
    width: 24px;
    max-width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 6px;
    text-align: center;
    vertical-align: middle;
    color: #838a94;
    border: 1px solid #838a94;
    border-radius: 100%
}

    .btn-list-dropdown:hover {
        color: var(--white);
        background-color: #838a94;
        cursor: pointer
    }

.btn-blue, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit {
    color: var(--white);
    background-color: var(--campusmain)
}

    .btn-blue:hover, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit:hover, .btn-blue:focus, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit:focus {
        background-color: var(--campuslight)
    }

.btn-campus {
    color: var(--btnPrimaryFront);
    background-color: var(--btnPrimaryBack);
}
    .btn-campus:hover {
        color: var(--btnPrimaryHoverFront);
        background-color: var(--btnPrimaryHover);
    }

    .btn-campus-outlined, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit.btn-outlined {
        border: 1px solid var(--campusmain);
        color: var(--campusmain);
        background-color: transparent
    }

        .btn-campus-outlined:hover, .ButtonGroup-item--next .ButtonGroup-btn.isSubmit.btn-outlined:hover {
            color: var(--btnPrimaryHoverFront);
            background-color: var(--campuslight);
            border: 1px solid var(--campuslight);
        }

.btn-pink {
    color: var(--white);
    background-color: #ff1661
}

.btn-charcoal {
    color: var(--white);
    background-color: var(--account-dark-grey)
}

.btn-grey, .ButtonGroup-item--previous .ButtonGroup-btn, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit) {
    color: var(--white);
    background-color: #93969e
}

    .btn-grey:hover, .ButtonGroup-item--previous .ButtonGroup-btn:hover, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit):hover, .btn-grey:focus, .ButtonGroup-item--previous .ButtonGroup-btn:focus, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit):focus {
        background-color: #c3c5ca
    }

    .btn-grey.btn-outlined, .ButtonGroup-item--previous .ButtonGroup-btn.btn-outlined, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit).btn-outlined {
        border: 1px solid #93969e;
        color: #93969e;
        background-color: transparent
    }

        .btn-grey.btn-outlined:hover, .ButtonGroup-item--previous .ButtonGroup-btn.btn-outlined:hover, .ButtonGroup-item--next .ButtonGroup-btn:not(.isSubmit).btn-outlined:hover {
            border: 1px solid #93969e;
            color: #93969e;
            background-color: #e9eaec
        }

.btn-mediumgrey {
    color: var(--white);
    background-color: #b1b3b9
}

    .btn-mediumgrey:hover {
        background-color: #bfc2c8
    }

.btn-lightgrey {
    color: #93969e;
    background-color: #eceef1
}

    .btn-lightgrey:hover {
        color: #93969e;
        background-color: #f2f3f5
    }

.btn-silver {
    color: var(--white);
    background-color: #cfd5da
}

    .btn-silver:hover {
        background-color: #e8eaec
    }

.btn-green {
    color: var(--white);
    background-color: var(--green)
}

    .btn-green:hover {
        background-color: #8fea91
    }

.btn-white {
    background-color: var(--white)
}

    .btn-white.btn-outlined {
        border-color: var(--white);
        color: var(--white);
        background-color: transparent
    }

        .btn-white.btn-outlined:hover {
            color: var(--campuslight);
            background-color: var(--white)
        }

.ButtonGroup {
    display: inline-block
}

.ButtonGroup-item, .ButtonGroup-item--previous, .ButtonGroup-item--next {
    border-radius: 0;
    float: left;
    margin-left: 0
}

    .ButtonGroup-item > .ButtonGroup-btn, .ButtonGroup-item--previous > .ButtonGroup-btn, .ButtonGroup-item--next > .ButtonGroup-btn {
        border-radius: 4px;
        height: 40px
    }

    .ButtonGroup-item .btn-outlined, .ButtonGroup-item--previous .btn-outlined, .ButtonGroup-item--next .btn-outlined {
        margin-left: -2px
    }

    .ButtonGroup-item:first-child:not(:last-child), .ButtonGroup-item--previous:first-child:not(:last-child), .ButtonGroup-item--next:first-child:not(:last-child) {
        margin-left: 0
    }

        .ButtonGroup-item:first-child:not(:last-child) > .ButtonGroup-btn, .ButtonGroup-item--previous:first-child:not(:last-child) > .ButtonGroup-btn, .ButtonGroup-item--next:first-child:not(:last-child) > .ButtonGroup-btn {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

            .ButtonGroup-item:first-child:not(:last-child) > .ButtonGroup-btn.btn-outlined, .ButtonGroup-item--previous:first-child:not(:last-child) > .ButtonGroup-btn.btn-outlined, .ButtonGroup-item--next:first-child:not(:last-child) > .ButtonGroup-btn.btn-outlined {
                border-right: 1px solid
            }

    .ButtonGroup-item:last-child:not(:first-child) > .ButtonGroup-btn, .ButtonGroup-item--previous:last-child:not(:first-child) > .ButtonGroup-btn, .ButtonGroup-item--next:last-child:not(:first-child) > .ButtonGroup-btn {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

        .ButtonGroup-item:last-child:not(:first-child) > .ButtonGroup-btn.btn-outlined, .ButtonGroup-item--previous:last-child:not(:first-child) > .ButtonGroup-btn.btn-outlined, .ButtonGroup-item--next:last-child:not(:first-child) > .ButtonGroup-btn.btn-outlined {
            border-left: 1px solid
        }

.ButtonGroup-btn {
    border-radius: inherit
}

.Btn-listAction {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    color: #838a94;
    border-radius: 100%
}

    .Btn-listAction:hover {
        color: #6cb8f9;
        cursor: pointer
    }

.green {
    color: var(--green)
}

.NoticeBanner, .NoticeBanner--prelog, .NoticeBanner--dashboard, .NoticeBanner--cookies, .NoticeBanner--noscript {
    position: relative;
    display: block;
    padding: 12px 24px;
    color: var(--white);
    line-height: 24px;
    text-align: center
}

    .NoticeBanner.isDefault, .NoticeBanner--prelog.isDefault, .NoticeBanner--dashboard.isDefault, .NoticeBanner--cookies.isDefault, .NoticeBanner--noscript.isDefault {
        background-color: #93969e
    }

    .NoticeBanner.isProminent, .NoticeBanner--prelog.isProminent, .NoticeBanner--dashboard.isProminent, .NoticeBanner--cookies.isProminent, .NoticeBanner--noscript.isProminent {
        background-color: var(--campusmain)
    }

    .NoticeBanner.isSuccess, .NoticeBanner--prelog.isSuccess, .NoticeBanner--dashboard.isSuccess, .NoticeBanner--cookies.isSuccess, .NoticeBanner--noscript.isSuccess {
        background-color: var(--green)
    }

    .NoticeBanner.isWarning, .NoticeBanner--prelog.isWarning, .NoticeBanner--dashboard.isWarning, .NoticeBanner--cookies.isWarning, .NoticeBanner--noscript.isWarning {
        background-color: var(--yellow)
    }

    .NoticeBanner.isError, .NoticeBanner--prelog.isError, .NoticeBanner--dashboard.isError, .NoticeBanner--cookies.isError, .NoticeBanner--noscript.isError {
        background-color: var(--red)
    }

.NoticeBanner-checkbox {
    display: none
}

    .NoticeBanner-checkbox:checked + .NoticeBanner {
        display: none
    }

    .NoticeBanner-checkbox:checked + .NoticeBanner--prelog {
        display: none
    }

    .NoticeBanner-checkbox:checked + .NoticeBanner--dashboard {
        display: none
    }

    .NoticeBanner-checkbox:checked + .NoticeBanner--cookies {
        display: none
    }

    .NoticeBanner-checkbox:checked + .NoticeBanner--noscript {
        display: none
    }

.NoticeBanner-close {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 3px 2px 1px 2px;
    border: 1px solid var(--white);
    color: var(--white);
    font-size: 12px;
    line-height: 1;
    opacity: .9;
    border-radius: 3px
}

.NoticeBanner-icon {
    padding-right: 24px;
    display: inline-block
}

.NoticeBanner-message {
    display: inline-block
}

.NoticeBanner--prelog, .NoticeBanner--noscript, .NoticeBanner--cookies {
    position: relative;
    top: -7px;
    border-radius: 3px
}

    .NoticeBanner--prelog .NoticeBanner-message, .NoticeBanner--noscript .NoticeBanner-message, .NoticeBanner--cookies .NoticeBanner-message {
        max-width: 900px
    }

@media (max-width:991px) {
    .NoticeBanner--prelog, .NoticeBanner--noscript, .NoticeBanner--cookies {
        margin-right: 48px;
        font-size: 90%;
        line-height: 1.5
    }
}

.NoticeBanner--dashboard {
    padding: 6px 4%
}

    .NoticeBanner--dashboard .NoticeBanner-message {
        max-width: 900px
    }

body.PrelogBody .NoticeBanner--dashboard {
    display: none
}

body.complete .NoticeBanner--dashboard.isForCreators {
    display: none
}

label.error {
    display: block;
    color: var(--errorFront)
}

    label.error:not([for]) {
        margin-top: 20px;
        margin-bottom: 10px
    }
/*------------------End Components--------------------*/

/*------------------------Fix Boostrap dropdown-------------------------*/
.btn-group .dropdown-menu .dropdown-item {
    line-height:24px;
}
.btn-group .dropdown-menu .dropdown-item span.icon {
   
    font-size:1.1em;
    text-align: center;
}

.btn-group .btn.btn-sm.dropdown-toggle {
    line-height: 21px;
    font-weight:normal;
}
/*------------------------End Fix Boostrap dropdown---------------------*/