.yv-cursor-pointer {
    cursor: pointer;
}

body {

    .main-container{
        position:absolute;
        display: block;
        width: 100%;
        height: 100%;

    }

    &.in-pc-browser .main-container{
        background: url("../img/body_background.jpeg") no-repeat center;
        background-size: cover;

        .main-container-inner {
            position: absolute;
        }
    }
    
    .yv-main-logo-content {
        background: url('../img/splash.png') no-repeat center;
        background-size: cover;
        
        .spinner {
            position: absolute;
            top: 65%;
            left: calc(50% - 12px);
        }
    }
}

body, p, pre, input, h2, textarea, span {
    font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei;
}

.row{
    text-align: center;
    padding: 10px 0px 0px;
}

.col {
    cursor: pointer;
    position: relative;
}

.adding {
    border: 1px solid #999999;
    width: 60px;
    border-radius: 10px;
}

.icon-40-raw {
    @include sized-icon(40px, 4px);
}

.icon-40 {
    @extend .icon-40-raw;
    @include icon-left;
}
    
.icon-50-raw {
    @include sized-icon(50px, 4px);
}

.icon-50 {
    @extend .icon-50-raw;
    @include icon-left;
}
    
.icon-50-right {
    @extend .icon-50-raw;
    right: 35px;
    top: 10px;
    position: absolute;
}

.yv-login-with-user-icon {
    border-top: 1px solid #414247;
    border-bottom: 1px solid #292a2d;
    border-left: 0px;
    border-right: 0px;
    text-align:center;
    margin: 0;
    border: none;

    .inner {
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
        margin: 15px auto;
        display: block;
        width: 100px;
        height: 100px;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

}

.yv-divider {
    border: none;
    background-color: transparent;
}

.yv-logout-button {
    margin: 0 10px;
}

.yv-text-right {
    position: absolute;
    text-align: center;
    top: 17px;
    right: 35px;
    max-width: 150px;        
}

.padding-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.transparent {
    background: transparent !important;
}

.fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

.modal-wrapper {
    width: 100%;
    height: 100%;
}

/* Fix modal backdrop for smaller devices */
@media (max-width: 679px) {
    .active .modal-backdrop-bg {
        opacity: 0;
    }
    .modal-backdrop-bg {
        -webkit-transition: opacity 300ms ease-in-out;
        transition: opacity 300ms ease-in-out;
        background-color: #000;
        opacity: 0;
    }
}

.scroll-view {
    position: absolute;
    width: 100%;
}

.scroll-view .scroll {
    min-height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.full {
    top: 1px;
    bottom: 0;
}

.grey-text {
    color: grey;
}

.content-light {
    background-color: white;
}

.content-dark {
    background-color: black;
}

.yv-item-radio {
    margin-right: 0px;
}

.yv-item-checkbox {
    border: none;
    padding-top: 8px;
    
    >label.checkbox {
        margin-top: -25px !important;
    }
}

.thin-border-divider {
    @include background-border(bottom, #ddd);
    width: 100%;
    height: 1px;
}

.hide-fade {
    opacity: 1;

    &.ng-hide {
        opacity: 0;
    }
    
    &.ng-hide-add, &.ng-hide-remove {
        transition: 0.5s linear all;
    }
}

.yv-fade {
    &.ng-enter {
        transition: 0.5s linear all;
        opacity: 0;
    }
    
    &.ng-enter.ng-enter-active {
        opacity: 1;
    }

    &.ng-leave {
        transition: 0.5s linear all;
        opacity: 1;
    }

    &.ng-leave.ng-leave-active {
        opacity: 0;
    }
}

.yv-fade-enter {
    &.ng-enter {
        transition: 0.5s linear all;
        opacity: 0;
    }
    
    &.ng-enter.ng-enter-active {
        opacity: 1;
    }
}

.yv-fade-leave {
    &.ng-leave {
        transition: 0.5s linear all;
        opacity: 1;
    }

    &.ng-leave.ng-leave-active {
        opacity: 0;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.has-tabs.no-tabs:not(.has-tabs-top) {
    bottom: 0;
}

.no-tabs.has-tabs-top {
    top: 44px;
}

.bg-ready {
    background-color: $balanced;
}

.bg-busy {
    background-color: $assertive;
}

.bg-rest {
    background-color: $energized;
}
