/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Generic buttons.
 * Reference: http://rsxdeployment.azurewebsites.net/docs/components.html#buttons
 */


/* default */
.rsx-button {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    margin: 15px 0;
    padding: 10px 36px;
    vertical-align: middle;
    background-color: #003778;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    color: #fff;
    border: 2px solid #003778;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.55,0,.1,1);
}

.rsx-button:hover,
.rsx-button:focus,
.rsx-circle:hover,
.rsx-circle:focus {
    background-color: #00549a;
    border-color: #00549a ;
}

.number-setup-submit:hover,
.number-setup-submit:focus {
    outline: 2px solid #00549a !important;
    outline-offset: 2px !important;
}



a.rsx-button:hover,
a.rsx-button:focus {
    color: #fff;
}

a.rsx-circle:link,
a.rsx-circle:visited,
a.rsx-circle:hover,
a.rsx-circle:active,
a.rsx-circle:focus  {
    color: #fff;
}

.rsx-button-color-black {
    color: #000;
}

/* white */
.rsx-button_white {
    background-color: #fff;
    border-color: #fff;
    color: #003778!important;
}

a.rsx-button_white:link,
a.rsx-button_white:visited,
a.rsx-button_white:hover,
a.rsx-button_white:active,
a.rsx-button_white:focus {
    color: #00215e !important;
}

a.rsx-button_white.rsx-button_outline:link,
a.rsx-button_white.rsx-button_outline:visited,
a.rsx-button_white.rsx-button_outline:hover,
a.rsx-button_white.rsx-button_outline:active,
a.rsx-button_white.rsx-button_outline:focus {
    color: #fff !important;
}

.rsx-button_white:hover,
.rsx-button_white:focus {
    background-color: #d4dce8;
    border-color: #d4dce8;
}




/* white alternate */
.rsx-button_white-fade {
    background-color: #d4dce8;
    border-color: #d4dce8;
    color: #003778!important;
}

.rsx-button_white-fade:hover,
.rsx-button_white-fade:focus {
    background-color: #b2becf;
    border-color: #b2becf;
}




/* white disabled */
.rsx-button_white.rsx-disabled,
.rsx-button_white[disabled],
.rsx-button_white-fade.rsx-disabled,
.rsx-button_white-fade[disabled] {
    opacity: 0.6;
}

.rsx-button_white.rsx-button_outline.rsx-disabled,
.rsx-button_white.rsx-button_outline[disabled],
.rsx-button_white-fade.rsx-button_outline.rsx-disabled,
.rsx-button_white-fade.rsx-button_outline[disabled] {
    background-color: transparent;
}




/* button within button*/
.rsx-button_nest-close > span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color .5s cubic-bezier(.55,0,.1,1);
    text-align: center;
}

.rsx-button_nest-close .rsx-icon {
    display: inline-block;
    margin-top: 2px;
    padding: 0;
    font-size: 14px;
    color: #003778;
}

/* disabled */
.rsx-button.rsx-disabled,
.rsx-button[disabled] {
    background-color: #babec2;
    border-color: #babec2;
    cursor: default;
}




/* square */
.rsx-button_square {
    border-radius: 0;
}

.rsx-button-square-left {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.rsx-button-square-right {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.rsx-border-left-radius-30 {
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
}

.rsx-border-right-radius-30 {
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

@media (min-width: 519px) {
    .rsx-border-left-radius-30-sm {
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;
    }
}




/* outlined */
.rsx-button_outline,
.rsx-button_outline.rsx-disabled,
.rsx-button_outline[disabled],
.rsx-button_outline:hover,
.rsx-button_outline:focus,
a.rsx-button.rsx-button_outline:hover,
a.rsx-button.rsx-button_outline:focus {
    background-color: transparent;
    border-width: 2px;
    color: #003778;
}

.rsx-button_outline:not([disabled]):hover,
.rsx-button.rsx-button_outline:not([disabled]):hover,
a.rsx-button.rsx-button_outline:not([disabled]):hover,
.rsx-button_outline:focus,
.rsx-button.rsx-button_outline:focus,
a.rsx-button.rsx-button_outline:focus {
    background-color: #ccd7e4;
}


.rsx-button_dark.rsx-button_outline {
    color: #003778;
}

.rsx-button_white.rsx-button_outline {
    background-color: transparent;
    color: #fff!important;
}

.rsx-button_white.rsx-button_outline-gray {
    border-color: #bcbdbf;
}

.rsx-button_white.rsx-button_outline:hover:not([disabled]):not(.rsx-disabled),
.rsx-button_white.rsx-button_outline:focus:not([disabled]):not(.rsx-disabled) {
    color: #fff!important;
    border-color: #fff!important;
    background-color: #3376ae;
}

.rsx-button_white-fade.rsx-button_outline {
    background-color: #3376ad;
    color: #d4dce8!important;
}

.rsx-button_white-fade.rsx-button_outline:hover,
.rsx-button_white-fade.rsx-button_outline:focus {
    background-color: #23669d;
    color: #b2becf!important;
}

.rsx-button_outline.rsx-disabled,
.rsx-button_outline[disabled] {
    color: #babdc2!important;
}

.rsx-circle {
    text-align: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #0e5a9e;
    transition: background 0.5s cubic-bezier(.55,0,.1,1);
}

.rsx-circle .rsx-icon {
    font-size: 25px;
    padding: 14px 10px 10px;
    display: inline-block;
}

.rsx-button > .rsx-icon {
    font-size: 0.7em;
}


@media (max-width: 519px) {
    .rsx-button {
        display: block;
        width: 100%;
    }
}




/* aside text (search) */
.rsx-button_aside-txt {
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 40px;
    padding-left: 20px;
}




/* previous/next buttons*/
.rsx-button-previous,
.rsx-button-next,
.slick-prev,
.slick-next {
    position: absolute;
    z-index: 80;
    top: 50%;
    width: 82px;
    height: 87px;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 0 8px #e1e1e1;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.55,0,.1,1);
}

.slick-prev,
.slick-next {
    font-size: 0;
}

.slick-prev,
.rsx-button-previous {
    left: 0;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.slick-next,
.rsx-button-next {
    right: 0;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
}

.rsx-button-previous:before,
.rsx-button-next:before,
.slick-prev:before,
.slick-next:before {
    content: '\e012';
    font-family: 'bell-icon';
    display: inline-block;
    font-size: 22px;
    color: #003676;
}

.slick-prev:before,
.rsx-button-previous:before {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    top: 10px;
    left: 13px;
    position: absolute;
}

.slick-next:before,
.rsx-button-next:before {
    top: 10px;
    right: 13px;
    position: absolute;
}

.slick-prev.rsx-disabled,
.slick-next.rsx-disabled,
.rsx-button-next.rsx-disabled,
.rsx-button-previous.rsx-disabled {
    background-color: #babdc2;
    border-color: #babdc2;
    cursor: default;
    opacity: 1;
}


@media (max-width: 519px) {
    .slick-prev,
    .rsx-button-previous {
        left: 0;
        -webkit-transform: translate(-55%, -50%);
            -ms-transform: translate(-55%, -50%);
                transform: translate(-55%, -50%);
        background-color: transparent;
        box-shadow: none;
    }

    .slick-next,
    .rsx-button-next {
        right: 0;
        -webkit-transform: translate(55%, -50%);
            -ms-transform: translate(55%, -50%);
                transform: translate(55%, -50%);
        background-color: transparent;
        box-shadow: none;
    }

    .slick-prev:before,
    .rsx-button-previous:before {
        top: 27px;
        left: 49px;
    }

    .slick-next:before,
    .rsx-button-next:before {
        top: 27px;
        right: 49px;
    }

    .slick-prev:hover,
    .rsx-button-previous:hover,
    .slick-prev:focus,
    .rsx-button-previous:focus,
    .slick-next:hover,
    .rsx-button-next:hover,
    .slick-next:focus,
    .rsx-button-next:focus {
        background-color: transparent;
        color: #003676;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-button-previous,
    .rsx-button-next,
    .slick-prev,
    .slick-next {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 999px){
    .rsx-button-size .rsx-button{
        display: inline-block;
        width: auto;
    }
}


@media (min-width: 1000px) {
    .rsx-button-previous,
    .rsx-button-next,
    .slick-prev,
    .slick-next {
        width: 50px;
        height: 50px;
        box-shadow: 0 0 0 10px #e1e1e1;
    }

    .slick-prev:hover:before,
    .rsx-button-previous:hover:before,
    .slick-prev:focus:before,
    .rsx-button-previous:focus:before,
    .slick-next:hover:before,
    .rsx-button-next:hover:before,
    .slick-next:focus:before,
    .rsx-button-next:focus:before {
        color: #fff;
    }

    .slick-prev:hover,
    .rsx-button-previous:hover,
    .slick-prev:focus,
    .rsx-button-previous:focus,
    .slick-next:hover,
    .rsx-button-next:hover,
    .slick-next:focus,
    .rsx-button-next:focus {
        background-color: #00215e;
        color: #fff;
    }
}

.rsx-button-no-style {
    margin: 15px 0;
    padding: 8px;
    border: 0;
    background: none;
}

/* remove button styling - not a modifier class, to be used on its own without .rsx-button */
@media (max-width: 519px) {
    .rsx-button-no-style-xs {
        margin: 15px 0;
        padding: 8px;
        border: 0;
        background: none;
    }

    a.rsx-button-no-style-xs:link,
    a.rsx-button-no-style-xs:visited,
    a.rsx-button-no-style-xs:hover,
    a.rsx-button-no-style-xs:active,
    a.rsx-button-no-style-xs:focus {
        color: inherit !important;
    }
}


@media (min-width: 520px) and (max-width: 999px) {
    .rsx-button-no-style-sm {
        margin: 15px 0;
        padding: 8px;
        border: 0;
        background: none;
    }

    a.rsx-button-no-style-sm:link,
    a.rsx-button-no-style-sm:visited,
    a.rsx-button-no-style-sm:hover,
    a.rsx-button-no-style-sm:active,
    a.rsx-button-no-style-sm:focus {
        color: inherit !important;
    }
}


@media (min-width: 1000px) and (max-width: 1239px) {
    .rsx-button-no-style-md {
        margin: 15px 0;
        padding: 8px;
        border: 0;
        background: none;
    }

    a.rsx-button-no-style-md:link,
    a.rsx-button-no-style-md:visited,
    a.rsx-button-no-style-md:hover,
    a.rsx-button-no-style-md:active,
    a.rsx-button-no-style-md:focus {
        color: inherit !important;
    }
}


@media (min-width: 1240px) {
    .rsx-button-no-style-lg {
        margin: 15px 0;
        padding: 8px;
        border: 0;
        background: none;
    }

    a.rsx-button-no-style-lg:link,
    a.rsx-button-no-style-lg:visited,
    a.rsx-button-no-style-lg:hover,
    a.rsx-button-no-style-lg:active,
    a.rsx-button-no-style-lg:focus {
        color: inherit !important;
    }
}




/* half-moon */
.rsx-button_half-top,
.rsx-button_half-right,
.rsx-button_half-bottom,
.rsx-bottom_half-left {
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
}

.rsx-button_half-top:before,
.rsx-button_half-right:before,
.rsx-button_half-bottom:before,
.rsx-button_half-left:before {
    content: '\e012';
    font-family: 'bell-icon';
    display: block;
    margin-top: 0;
    color: #0e5a9e;
    transition: all .5s cubic-bezier(.55,0,.1,1);
}

.rsx-button_half-bottom {
    border-radius: 104px 104px 0 0;
}

.rsx-button_half-bottom:before {
    margin-top: 4px;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
}




/* close button */
.rsx-button-close {
    position: relative;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #a7a7a7;
}

.rsx-button-close span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 8px;
    color: #fff;
}




/* button groups */
.rsx-button-row {
    text-align: center;
}

.rsx-button-row > .rsx-button:first-child {
    margin-top: 0;
}

.rsx-button-row > .rsx-button:last-child {
    margin-bottom: 0;
}


@media (min-width: 520px) {
    .rsx-button-row > .rsx-button {
        margin: 0 10px;
    }

    .rsx-button-row > .rsx-button:first-child {
        margin-left: 0;
    }

    .rsx-button-row > .rsx-button:last-child {
        margin-right: 0;
    }
}
.rsx-focus-custom:focus {
	outline: 2px solid #0075ff !important;
    text-decoration: none !important;
    outline-offset: 2px;
}