/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

body {
    background-color: #DADADA;
}

    body > .grid {
        height: 100%;
    }

/*.image {
    margin-top: -100px;
}*/

.column {
    max-width: 450px;
}

.icon.large {
    font-size: 2em;
}

i.grid.icon:hover {
    color: #009FDA;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

#side_menu {
    padding-top: 60px;
}


.masthead {
    position: relative;
    padding-top: 80px;
    min-height: 665px;
}

html, body, #container {
    height: 95%;
}

body > #container {
    height: 100%;
    min-height: 0;
    overflow-y: scroll;
    padding-bottom: 150px
}


#container .masthead {
    margin-left: 1%;
    margin-right: 1%;
}

#footer {
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 50px;
}

#content {
    padding-bottom: 3em;
}


/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view] {
    height: 65px;
}

.ui-view-container {
    position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

[ui-view].ng-enter {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5);
    -moz-transform: scale3d(0.5, 0.5, 0.5);
    transform: scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

[ui-view].ng-leave {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    -moz-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
}

[ng-click],
[ui-sref] {
    cursor: pointer;
}

.hover-pointer {
    cursor: pointer;
}


#webacc .tab.header.segment .vertical.menu {
    display: none;
    margin: 2rem 0em 1rem;
}

#webacc .pointing.menu .right.menu .list {
    display: none;
}

#webacc .launch.button {
    position: fixed;
    top: 70px;
    z-index: 500;
}

    #webacc .launch.button span {
        display: none;
    }

        #webacc .launch.button span.sidemenu_text {
            display: inline;
        }

/*@media only screen and (max-width : 600px) {
    #webacc .tab.header.segment .tabular.menu {
        display: none;
    }

    #webacc .tab.header.segment .vertical.menu {
        display: block;
    }
}

@media only screen and (max-width : 1288px) {
    #webacc .pointing.menu .ui.dropdown {
        display: none;
    }

    #webacc .pointing.menu .right.menu .list {
        display: inline;
    }
}

@media only screen and (max-width: 454px) {
    #webacc .pointing.menu .right.menu .input {
        width: 143px;
    }
}*/

#fourth {
    display: none;
}

#dropdown-reference {
    width: 350px;
}

#webacc .autocompletedropdown-pagination {
    display: inline-block;
    color: #1e70bf;
    text-decoration: none;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
    #second, #third {
        display: none;
    }

    #fourth {
        display: block;
    }
}

@media screen and (min-width: 0px) and (max-width: 404px) {
    #company-header {
        font-size: 0.7em;
    }
}

@media screen and (min-width: 405px) and (max-width: 500px) {
    #company-header {
        font-size: 0.8em;
    }
}

@media screen and (min-width: 501px) and (max-width: 800px) {
    #company-header {
        font-size: 0.9em;
    }
}

@media screen and (min-width: 801px) and (max-width: 900px) {
    #dropdown-reference {
        width: 100px;
    }
}

@media screen and (min-width: 901px) and (max-width: 1000px) {
    #dropdown-reference {
        width: 200px;
    }
}

.ui.dropdown .menu .selected.item, .ui.dropdown.selected {
    font-weight: bolder;
}

.ui.dropdown .filtered.item {
    display: block !important;
}

.skeleton-box {
    display: inline-block;
    height: 2.5em !important;
    position: relative;
    overflow: hidden;
    background-color: #dddbdd;
}

    .skeleton-box::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
        animation: shimmer 5s infinite;
        content: '';
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}