/* ---------------------------------------------------
    QINIQ COLOR SCHEME
----------------------------------------------------- */

#logo {
    background-color: #470E54;
}
#left-menu {
    background-color: #470E54;
}
.form-signin form {
    background-color: #470E54;
}
.navbar, .bg-brand {
    background-color: #4a104e !important;
}
.text-brand {
    color: #470E54 !important;
}
.text-secondary {
    color: #9b3d9b !important;
}
.subscription:not(.has-kamotik):not(.has-kamotik-scheduled)[data-family='natsagaq_plans'] .get-kamotik + .re-activate:hover,
.subscription:not(.has-kamotik):not(.has-kamotik-scheduled)[data-family='taki_plans'] .get-kamotik + .re-activate:hover,
.subscription:not(.has-kamotik):not(.has-kamotik-scheduled)[data-family='natsagaq_family_plans'] .get-kamotik + .re-activate:hover {
    background-color: #fff;
    color: #9b3d9b;
    border-color: #9b3d9b;
}
input[type="checkbox"]:checked:before, input[type="radio"]:not(.btn-check):checked:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px; /* Green circle size */
    height: 14px;
    background-color: #9b3d9b; /* Green color */
    border-radius: 50%; /* Circular dot */
}
.navbar .collapse > ul a {
    color: #fff;
}
a.navbar-brand.text-uppercase, .navbar .nav-link.dropdown-toggle {
    font-size: 18px;
}
.navbar .collapse .dropdown-menu li a {
    color: #000;
}
h2{
    color: #777;
}
h6 span img {
    padding-right: 5px;
}
h5.text-uppercase{
    color: #777;
}
.fa-key, .navbar .fa-key {
    font-size: 12px !important;
    color: #4a104e;
}
.filter {
    position: absolute;
    right: 15px;
    top: 3px;
    border: 0;
    color: #777;

}
.fa-wifi {
    padding-left: 6px;
}
.fa-phone-square {
    padding-left: 8px;
}
#search {
    height: 70px;
}
.plan-summary .title {
    font-size: 20px;
    vertical-align: middle;
    text-transform: uppercase;
}
.plan-summary .badge{
    font-size: 16px;
    vertical-align: middle;
    text-transform: uppercase;
    height:30px;
}
.strong {
    font-weight: bold;
}
.product-container.selected .btn-outline-primary{
    background-color: #913f98;
    color: #fff;
}
.btn-primary, .btn-default {
    background-color: #9b3d9b;
    background-image: none;
    background-repeat: repeat-x;
    border: 1px solid #9b3d9b;
    color: #fff;
    border-radius: 4px;
}
.badge.bg-brand {
    background-color: #9b3d9b;
}
.btn-outline-primary {
    --bs-btn-color: #913f98;
    --bs-btn-border-color: #913f98;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #913f98;
    --bs-btn-hover-border-color: #913f98;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #913f98;
    --bs-btn-active-border-color: #913f98;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #913f98;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #913f98;
    --bs-gradient: none;
    font-size: 1.4rem !important;
}
.btn-outline-secondary:hover {
    background-color: #fff !important;
    color: #9b3d9b !important;
    border-color: #9b3d9b !important;
}
#toggleDevices:hover img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(900%) hue-rotate(254deg) brightness(100%) contrast(95%);
    -webkit-filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(900%) hue-rotate(254deg) brightness(100%) contrast(95%);
}
.btn-check:checked+.btn:hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    cursor: default;
}
.btn-primary:hover, .btn-primary:focus, .btn-default {
    color: #fff;
    background-color: #000;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}
.btn-primary:active {
    color: #000 !important;
    background-color: #e6e6e6 !important;
    border-color:  #e6e6e6 !important;
    background-image: none !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 5%) !important;
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 5%) !important;
}
.btn-checkout {
    color: #fff;
    background-color: #81c05a !important;
    border-color:  #81c05a !important;
    text-transform: uppercase;
}
.btn-checkout:hover {
    color: #fff;
    background-color: #88d35a !important;
    border-color:  #88d35a !important;
}

body.has-uris-to-accept .modal-backdrop{
    background: url(../img/accept-landscape.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.has-stepper-activate-step-checklist .step [class*="col-"] .fa {
    font-size: 18px;
    vertical-align: middle;
    color: #167ED7 !important;
}
.stepper li.active .badge {
    background: #167ED7 !important;
    color: #fff;
    border-color: #167ED7 !important;
}
.step .fa.fa-info-circle {
    color: #167ED7 !important;
}
.stepper .nav-tabs > li.active > a i {
    color: #167ED7 !important;
}
.is-logged-in .wrapper {
    background-image: none !important;
}
.brandname:after{
    content: "Qiniq";
}
.services:after{
    content: "LTE";
}
.qiniq .local-nav .community-prefix{
    content: "Nunavut";
}
.brand-poster {
    background: url(../img/login.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}



/* ---------------------------------------------------
    Error Page
----------------------------------------------------- */

.menu-wrapper {
    background-color: #fff;
    border-bottom: 2px solid #eee;
    opacity: 0;
    position: fixed;
    transition: opacity .3s;
    width: 100%;
    z-index: -1
}
.menu-wrapper.menu-visible {
    opacity: 1;
    z-index: 1
}
.intro-wrapper {
    background-color: #0082c8
}
.intro {
    height: 560px;
    overflow: hidden;
    position: relative;
}
.intro h1{
    font-size: 100px;
    color: #fff !important;
    font-weight: bold !important;
}
.error-display {
    margin-top: 50px;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}
.anim img, .anim .flame-container {
    bottom: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    padding: 0 10px;
}
.anim .exhaust-fumes{
    bottom: 0;
    left: 45%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    padding: 0 10px;
}
.anim img {
    width: 100%;
}
.rocket img {
    height: 150px;
    max-width: 130px;
    width: auto;
    z-index: 5;
}
.star img {
    max-height: 100px;
    max-width: 100px;
    z-index: 4;
}
.star-top-left img {
    height: 40px;
    left: 0;
    top: 0;
    width: 60px;
    -webkit-animation: a 1s infinite alternate ease-in;
    animation: a 1s infinite alternate ease-in
}
.star-bottom-right img {
    bottom: 200px;
    right: -600px;
    height: 30px;
    width: 50px;
    -webkit-animation: a 1s infinite alternate;
    animation: a 1s infinite alternate
}
.star-bottom-left img {
    bottom: 220px;
    height: 20px;
    right: 450px;
    width: 40px;
}
.cloud-center img {
    max-width: 491px
}
.star-top-right img {
    -webkit-animation: a 1s infinite alternate ease-in-out;
    animation: a 1s infinite alternate ease-in-out
}
.cloud-small img {
    -webkit-animation: b 1s infinite alternate;
    animation: b 1s infinite alternate;
    max-width: 620px;
}
.cloud-large img,
.cloud-small img {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
.cloud-large img {
    max-width: 796px;
    z-index: 6;
    -webkit-animation: b 1s infinite alternate ease-in-out;
    animation: b 1s infinite alternate ease-in-out
}
.ground{
    background-color: #470E54;
    min-height: 150px;
    padding: 20px 0;
}
.flame-container{
    width: 60px;
    height: 150px;
    position:relative;
    transform-origin:center bottom;
    animation-name: flicker;
    animation-duration:3ms;
    animation-delay:200ms;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 4;
}
.rocket .exhaust-flame {
    display: none;
    position: absolute;
    top: 84%;
    width: 28px;
    background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
    height: 150px;
    left: calc(50% - 14px);
    -webkit-animation: exhaust 0.2s infinite;
    animation: exhaust 0.2s infinite;
    opacity: 0.4;
}
.flame{
    bottom: 0;
    position:absolute;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    transform:rotate(135deg) scale(1.5,1.5);
}

.flame.yellow{
    left:15px;
    width: 30px;
    height: 30px;
    background:gold;
    box-shadow: 0 0  9px 4px gold;
}

.flame.orange{
    left:10px;
    width: 40px;
    height: 40px;
    background:orange;
    box-shadow: 0 0  9px 4px orange;
}

.flame.red{
    left:9px;
    width: 50px;
    height: 50px;
    background:OrangeRed;
    box-shadow: 0 0  5px 4px OrangeRed;
}

.flame.white{
    left:15px;
    bottom: 0;
    width: 30px;
    height: 30px;
    background:white;
    box-shadow: 0 0  9px 4px white;
}
.text-yellow{
    color: #ffd800;
}
a.text-yellow:hover{
    color: #fff713 !important;
}

@keyframes flicker{
    0%   {transform: rotate(-1deg);}
    20%  {transform: rotate(1deg);}
    40%  {transform: rotate(-1deg);}
    60%  {transform: rotate(1deg) scaleY(1.04);}
    80%  {transform: rotate(-2deg) scaleY(0.92);}
    100% {transform: rotate(1deg);}
}

@-webkit-keyframes a {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .8
    }
}

@keyframes a {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .8
    }
}

@-webkit-keyframes b {
    0% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        opacity: .8
    }
}

@keyframes b {
    0% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        opacity: .8
    }
}

@media screen and (max-width:1600px) {
    .star-top-left img {
        top: 20px;
    }
}
@media (min-width: 1200px) {
    .clipboard {
        background: url(../img/clipboard.jpg) no-repeat center 0%;
        background-size: contain;
        vertical-align: top;
        position: relative;
        display: block;
        width: 100%;
        height: 600px;
        margin-top:30px;
    }
}
@media (max-width: 480px){
    .anim.star{
        display: none;
    }
}