/* BASIC STYLINGS
============================================================================= */
body                            { padding-top:0px; }
pre                             { margin-bottom:20px; }

/* form styling */
#form-container                { background:#FFF; margin-bottom:20px;
    border-radius:5px; }
#form-container .page-header   { background:#FFF; margin:0; padding:30px; 
    border-top-left-radius:5px; border-top-right-radius:5px; }

#form-container .page-header-nobg {
        margin: 0;
        padding: 30px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
}

/* numbered buttons */
#status-buttons a               { color:#636363; display:inline-block; font-size:14px; margin-right:10px; text-align:center; text-transform:uppercase;  font-weight:bold; }
#status-buttons a:hover         { text-decoration:none; }
#status-buttons span            { background:#FFF; display:block; height:40px; margin:0 auto 10px; padding-top:9px; width:40px; border: 2px solid #636363; 
    border-radius:50%; }
/*37a9ad*/
/* active buttons */
/*#status-buttons a.active span   { background:rgba(14, 80, 95, 0.59); color:#FFF; }*/
#status-buttons a.active span {
    background: var(--liu-blue);
    color: #FFF;
}

/* ANIMATION STYLINGS
============================================================================= */
#new-form { 
    position:relative; 
    min-height:300px; 
    overflow:hidden; 
    padding:30px;
}
#change-form {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    padding: 30px;
}

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
	-moz-animation:slideInRight 0.5s both ease;
	animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
	-moz-animation:slideOutLeft 0.5s both ease;
	animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(200%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(200%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(200%); }
	to 		{ -webkit-transform: translateX(0); }
}

.popover-medium {
    max-width: 650px;
}

.popover-large {
    min-width: 700px;
}

.badge-info {
    background-color: #3a87ad !important;
}

hr.style2 {
    border-top: 3px double #8c8b8b;
}

hr.style3 {
    border-top: 1px dashed #8c8b8b;
}

hr.style4 {
    border-top: 1px dotted #8c8b8b;
}

hr.style5 {
    background-color: #fff;
    border-top: 2px dashed #8c8b8b;
}

/*==================================================
 * Panel Effect
 * ===============================================*/
.panel-effect {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.panel-effect-thin {
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
}


.badgetab {
    width:60px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.badgetab:after {
    content: attr(data-count);
    position: absolute;
    background: #84a1a7;
    height: 2.5rem;
    top: -.2rem;
    right: -.75rem;
    width: 2.5rem;
    text-align: center;
    line-height: 2;
    font-size: 1.2rem;
    text-shadow: 1px 1px #000000;
    border-radius: 50%;
    color: white;
    border: 1px solid #5e7377;
}


.circle-img {
    width: 140px;
    height: 140px;
    overflow: hidden;
    margin: 0 auto;
}

.circle-img img {
    height: 100%;
    transform: translateX(-50%);
    margin-left: 50%;
}

/* box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.23);*/

.jumbotron {
    border-bottom: 2px solid #cc8e00;
}
.jumbotron2 {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: center;
    width: 100%;
    background: url(../../images/bg-9-full.jpg) no-repeat center top;
    border-bottom: 2px solid #94b4c5;
    background-size: 2000px auto;
    margin-bottom: 0;
    padding: 40px 0;
    position: relative;
    border-radius: 10px;
    min-height: 150px
}

.jumbotron2 * {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.jumbotron2 h3, .jumbotron2 p {
    border-radius: 0;
    color: #fff;
    text-shadow: 2px 2px 8px #000000
}

.navbar-fixed-top-gold {
    box-shadow: 0 2px 0px 0px #ababab;
}

.jumbotron3 {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: center;
    width: 100%;
    background: url(../../images/bg-10-full.jpg) no-repeat center top;
    border-bottom: 2px solid #c15555;
    background-size: 2000px auto;
    margin-bottom: 0;
    padding: 40px 0;
    position: relative;
    border-radius: 10px;
    min-height: 150px
}

.jumbotron3 * {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.jumbotron3 h3, .jumbotron3 p {
    border-radius: 0;
    color: #fff;
    text-shadow: 2px 2px 8px #000000
}

.fa-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.nav-center {
    display: table;
    width: 70%;
    margin: 0;
}

.nav-center > li {
    float: none;
    display: table-cell;
    text-align: center;
}

/*.nav-center {
    float: left;
    margin: 0;
    margin-left: 20%;
}*/

/*.navbar-nav {
    width: 100%;
    text-align: center;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}*/

[animate-on-change] {
    transition: all 1s;
    -webkit-transition: all 1s;
}

[animate-on-change].changed:after {
    background-color: gold;
    transition: none;
    -webkit-transition: none;
}

.angular-with-newlines {
    white-space: pre-wrap;
}


@media (max-width: 544px) {
    .btn, .btn-group {
        width: 100%;
        padding: 10px;
        margin: 5px;
    }
    .nav-center {
        float: left;
        margin: 0;
    }
}

@media (max-width: 1380px) {
 
    .nav-center {
        float: left;
        margin: 0;
    }
}

.popover-large img {
    -webkit-filter: saturate(60%);
    filter: saturate(60%);
}

.child-data > tr:nth-child(odd) {
    background-color: #9aa6ad !important;
}
.child-data > tr:nth-child(even) {
    background-color: #a8b9c3 !important;
}

/*.icon-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.icon-stack-1x {
    line-height: inherit;
}

.icon-stack-2x {
    font-size: 1.5em;
}*/


.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}