/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 40px;
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #2f2f2f;
    color: #eee;
    text-align: center;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
    padding: 60px 15px 0;
}

.container .text-muted {
    margin: 20px 0;
}

#footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.bg-image {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(/images/background-sm.png);
    background-position: 50% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

@media (min-width: 768px) {
    .bg-image {
        background-image: url(/images/background.png);
    }
}

.navbar {
    position: fixed;
    opacity: 1;
    top: 0;
    width: 100%;
}

.navbar-nav > li > a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.navbar-top {
    height: 100px;
    position: relative;
}

.navbar-brand {
    position: absolute;
    top: 0;
    opacity: 1;
    padding: 0;
    height: 51px;
    line-height: 45px;
}

.navbar-brand img {
    height: 39px;
}

.top-logo {
    width: 100%;
    height: auto;
}

.logo-wrapper {
    margin-bottom: 20px;
}

.logo-wrapper > div {
    display: inline-block;
    padding: 0 15px;
}

.logo-wrapper img {
    max-width: 100%;
    height: auto;
}

.panel.panel-ifsta {
    border-radius: 0;
    border: none;
    background-color: rgba(255,255,255,0.9);
}

.panel-ifsta .panel-heading {
    border-radius: 0;
    background: #2f2f2f;
    color: #fff;
    text-align: center;
}

.panel-ifsta .panel-title {
    font-size: 24px;
    font-weight: 400;
}

.panel-default {
    border-color: #ddd;
}

.panel-default > legend.panel-heading {
    margin: 0;
    color: #eee;
    background-color: #444344;
    text-transform: uppercase;
    padding: 2px 15px;
    text-align: left;
}

.panel-default > legend.panel-heading .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-ifsta .panel {
    background-color: transparent;
}

.btn.btn-ifsta {
    background: #c72026;
    border: none;
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.btn.btn-ifsta.btn-grey {
    background: silver;
    color: black;
}

.panel-dark, .well.dark {
    border-color: #222;
}

.panel-dark>.panel-heading, .well.dark, .dropdown-menu.dark {
    background-image: -webkit-linear-gradient(top, #3c3c3c 0, #222 100%);
    background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
}

.dropdown-menu.dark>li>a {
    color: #fff;
}

.dropdown-menu.dark>li>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #666;
    background-image: -moz-linear-gradient(top, #666, #2f2f2f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#2f2f2f));
    background-image: -webkit-linear-gradient(top, #666, #2f2f2f);
    background-image: -o-linear-gradient(top, #666, #2f2f2f);
    background-image: linear-gradient(to bottom, #666, #2f2f2f);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff666666', endColorstr='#ff2f2f2f', GradientType=0)
}

.orgLogo {
    max-height: 125px;
}

#org-header h1 {
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    .bg-image {
        background-position-x: 66%;
    }
}

.avatar{border-radius:3px}
.avatar-xs{width: 16px; height: 16px;}
.avatar-sm{width: 24px; height: 24px;}
.avatar-md{width: 34px; height: 34px;}
.avatar-backdrop{background-color:#d6d6d6;border:0;cursor:default;height:85px;overflow:hidden;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;z-index:0;width:85px}
.avatar-backdrop .avatar-image{background-size:85px 85px;border-radius:3px;display:block;height:85px;left:0;top:0;width:85px;z-index:2}
.avatar-backdrop .avatar-initials{display:block;font-size:36px;font-weight:bold;text-align:center;left:0;line-height:85px;overflow:hidden;position:absolute;top:0;height:85px;width:85px;z-index:1}
.avatar-backdrop .change-text{background:rgba(0,0,0,0.5);bottom:0;color:#fff;display:none;font-weight:bold;height:30px;left:0;line-height:30px;position:absolute;right:0;text-align:center;width:100%;z-index:3}
.avatar-backdrop.ed{cursor:pointer}
.avatar-backdrop.ed:hover .change-text{display:block;text-decoration:underline}
.ipad .avatar-backdrop.ed:hover .change-av-text,.iphone .avatar-backdrop.ed:hover .change-av-text,.ipod .avatar-backdrop.ed:hover .change-av-text,.android .avatar-backdrop.ed:hover .change-av-text{display:none}

.help-links-wrapper {
    text-align: center;
    padding: 15px;
}

.help-links-wrapper a {
    color: #000;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
    display: block;
    padding: 5px 0;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

 .rainbow {
    animation: rainbow 1s linear infinite;
    background-size: 200%;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes rainbow {
    0% { background-position: 0; }
    100% { background-position: -200% };
}

.masquerading-avatar {
    position: relative;
    float: left;
    margin-right: 10px;
}

.avatar-user-parent {
    width: 24px;
    height: 24px;
    display: inline-block;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
    border-radius: 3px;
}

.avatar-user-child-0 {
    width: 12px;
    height: 12px;
    position: absolute;
    right: -15%;
    bottom: -9%;
}


.avatar-user-child-1 {
    width: 6px;
    height: 6px;
    position: absolute;
    right: -15%;
    bottom: -9%;
}

.avatar-user-child-2 {
    width: 3px;
    height: 3px;
    position: absolute;
    right: -15%;
    bottom: -9%;
}

.avatar-user-child-3 {
    width: 1.5px;
    height: 1.5px;
    position: absolute;
    right: -15%;
    bottom: -9%;
}

.avatar-user-child-4 {
    width: 0.75px;
    height: 0.75px;
    position: absolute;
    right: -15%;
    bottom: -9%;
}

.panel-ifsta {
    opacity: 1;
    animation-timing-function: ease;
    animation-name: panel-fade-in;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
}

@keyframes panel-fade-in {
    from {
        opacity: 0;
        margin-top: 40px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}