@import "zocial.less";

@icon-font-path: '/desktop/libs/bootstrap/fonts/';

.navbar-toggle .icon-bar {
    background-color: @brand-primary;
}

.blur (@pixels) {
    -webkit-filter: blur(@pixels);
    -moz-filter: blur(@pixels);
    -ms-filter: blur(@pixels);
    filter: blur(@pixels);
}

.border-radius (@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.wrap () {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

body.loading {
    cursor: wait;
}
body.loading #loading {
    display: block;
    opacity: 1;
}
body #loading {
    position: absolute;
    top: 58px;
    z-index: 999;
    left: 0;
    right: 0;
    .progress {
        height: 4px;
    }
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
}
body > .app { padding-top: 50px; }
img {
    max-width: 100%;
}

.userAvatarName {
    img.avatar {
        // max-height: 32px;
    }
    .name {
        // padding-left: 8px;
    }
}

#accountNav .dropdown-toggle img.avatar, #accountMenu img.avatar {
    max-height: 18px;
    max-width: 18px;
    margin: 0px 0px 0px 0px;
}
#accountMenu img.avatar {
    margin: 0px 0px 0px 12px;
    display: none;
    & + .name {
        padding-left: 0px;
    }
}
#accountNav .dropdown-toggle .userAvatarName .name {
    display: none;
}
@media (max-width: @screen-xs-max) {
    #accountNav .dropdown-toggle .userAvatarName .name {
        display: inline;
    }
    #accountNav .dropdown-toggle img.avatar, #accountMenu img.avatar {
        float: right;
    }
}
.btn-group img.avatar {
    max-height: 26px;
    max-width: 26px;
}

.welcomeUser {
    .inputPass {
        margin: 8px 4px;
    }
}

.houseCollection .search, .houseCollection .filter, .houseCollection .layout, .houseCollection .pages {
    float: left;
}
.houseCollection .houseCollectionHeader {
    clear: both;
    width: 100%;
    display: block;
    float: left;
}
.houseCollection .houseCollectionHeader .pages .pagination {
    margin: 0 0 0 10px;
}
.paginationWrap, .pageSizeWrap {
}

table.houseList {
    tr {
        position: relative;
    }
    & > tbody > tr > td {
        vertical-align: middle;
    }
    td.icon {
        width: 80px;
        vertical-align: middle;
    }
    td.at {
        width: 200px;
    }
    img.avatar {
        max-height: 64px;
        max-width: 64px;
        margin-top: 0px;
    }
    td.actions {
        width: 244px;
    }
}

div.actions > div {
    display: inline-block;
}
nav > .navbar-form {
    padding-left: 0;
}
.navbar-default .navbar-form {
    .box-shadow(none);
    padding-top: 0;
    padding-bottom: 0;
    
    ul.pagination {
        display: inline;
    }
    @input-bg: @navbar-default-bg;
    .form-control {
        background-color: @input-bg;
        border: 0;
    }
}

.table-striped > tbody > tr:nth-child(odd).selected > td,
.table-hover > tbody > tr.selected:hover > td,
.table tr.selected {
    background-color: darken(@dropdown-link-active-bg, 0%);
    color: @dropdown-link-active-color;
    a, .btn-link {
        color: @dropdown-link-active-color;
    }
    .dropdown-menu a {
        // background-color: darken(@dropdown-bg, 0%);
        color: @dropdown-link-color;
        &:hover {
            color: @dropdown-link-active-color;
        }
    }
}
.panel.selected {
    border: 1px solid darken(@dropdown-link-active-bg, 0%);
}
.modal-header {
    word-wrap: break-word;
}

.actions {
    .share {
        .owner {
            .name {
                padding: 6px;
            }
        }
    }
}
.privacySelector {
    position: relative;
    text-align: center;
    cursor: pointer;
    .off, .on {
        padding: 2px;
        display: block;
        width: 40px;
        top: 0;
    }
    .off {
        left: 0;
        position: absolute;
    }
    .on {
        position: absolute;
        right: 0;
    }
    .bulb {
        width: 60px;
        background: rgb(111, 111, 111);
        display: block;
        height: 22px;
        border-radius: 25px;
        margin: 0 auto;
    }
    .bulb:after {
        border-radius: 50%;
        border: 1px inset black;
        background: rgba(235, 235, 235, 0.92);
        display: block;
        width: 22px;
        height: 22px;
        position: absolute;
        content: " ";
    }
}
.privacySelector.public {
    .bulb:after {
        left: 55%;
    }
    .bulb {
        background: #47a447;
    }
    .on {
        color: @brand-primary;
    }
    .off {
        color: #CCC;
    }
}
.privacySelector.private {
    .bulb:after {
        right: 55%;
    }
    .off {
        color: #000;
    }
    .on {
        color: #CCC;
    }
}
.actions .share .dropdown-header {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}


.tagsList {
    @tagLineHeight: 34px;
    .tag {
        position: relative;
        .delete.btn,
        .deleteTag.btn {
            display: none;
        }
        &:hover .delete.btn,
        &:hover .deleteTag.btn {
            display: block;
        }
        .delete.btn,
        .deleteTag.btn {
            position: absolute;
            right: 0px;
            bottom: 0;
            top: auto;
        }
        input[type="color"] {
            padding: 0px;
            margin: 0px;
            border: 0px;
            width: @tagLineHeight;
            height: @tagLineHeight;
            border: 0;
            float: left;
            background: transparent;
        }
        .name {
            padding: 0px 6px;
            line-height: @tagLineHeight;
            word-break: break-all;
        }
    }
    .tag.selected {
        background-color: darken(@brand-primary, 30%);
    }
}

.users {
    .btn-group button img {
        max-height: 20px;
    }
}
.dropdown-menu.users {
    min-width: 240px;
    .selectList.users {
        overflow-y: scroll;
        max-height: 300px;
        .select.user {
            padding: 6px 0px;
            .userAvatarName img {
                padding-right: 4px;
            }
            cursor: pointer;
        }
        .select.user:hover {
            background-color: darken(@brand-primary, 20%);
        }
        .select.user.selected {
            background-color: darken(@brand-primary, 30%);
        }
        .houseCollectionHeader {
            .pages {
                display: none;
            }
        }
    }
}

body > .navBackButton {
    position: fixed;
    bottom: 8px;
    left: 8px;
    z-index: 999;
    background: white;
    border-radius: 3px;
    width: 32px;
    padding: 4px 8px;
    box-shadow: 0px 0px 1px black;
}

.booleanThumb {
    .radio-inline {
        input[type="radio"] {
            display: none;
        }
        input[type="radio"]:checked+span.glyphicon {
            background: @brand-success;
            color: white;
        }
        input[type="radio"]:checked+span.glyphicon-thumbs-down {
            background: @brand-danger;
            color: white;
        }
        .glyphicon {
            padding: 18px;
            font-size: 18px;
        }
        .glyphicon:hover {
            cursor: pointer;
        }
    }
}

.carousel {
    .swipeview-slider > div {
        position:relative;
    	display:-webkit-box;
    	display:-moz-box;
    	display:-ms-box;
    	display:-o-box;
    	display:box;
    	-webkit-box-orient:vertical;
    	-moz-box-orient:vertical;
    	-ms-box-orient:vertical;
    	-o-box-orient:vertical;
    	box-orient:vertical;
    	-webkit-box-pack:center;
    	-moz-box-pack:center;
    	-ms-box-pack:center;
    	-o-box-pack:center;
    	box-pack:center;
    	-webkit-box-align:center;
    	-moz-box-align:center;
    	-ms-box-align:center;
    	-o-box-align:center;
    	box-align:center;
    	overflow:hidden;
    	text-align: center;
    	cursor: move;
    	> img {
    	    display: inline-block;
    	    -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            
            pointer-events:none;
            visibility:visible;
            
    	    height: 100%;
            width: auto;
            &.landscape {
                width: 100%;
                height: auto;
            }
            &.portrait {
            }
            &.square {
            }
    	}
    	
    	.caption:empty {
    	    display: none;
    	}
    	.caption {
    	    position: absolute;
            left: 12%;
            right: 12%;
            bottom: 26px;
            text-align: center;
            // color: rgb(255, 255, 255);
            // background: fade(@well-bg, 88%);
            // padding: 10px;
            // font-size: 1em;
            // font-family: proxima-nova;
            // font-weight: 400;
            // border: 2px double rgba(255, 255, 255, 0.2);
            // font-size: 22px;
            // font-style: italic;
            
            text-shadow: 0px 0px 2px @body-bg;
            
            
            &.well {
                background: transparent;
                border: 0;
                font-size: 32px;
                font-weight: bold;
                box-shadow: none;
                opacity: 0;
                top: 0px;
                .transition(2.3s);
                @media (max-width: @screen-md-max) {
                    font-size: 24px;
                }
                @media (max-width: @screen-xs-max) {
                    font-size: 16px;
                }
            }
            .cta {
                // font-family: @font-family-cursive;
                bottom: 0px;
                position: absolute;
                left: 0;
                right: 0;
                text-align: center;
            }
    	}
    	&.swipeview-active {
    	    .caption.well {
                top: 20px;
                opacity: 1;
            }
    	}
    	@media (max-width: @screen-xs-max) {
    	    .caption.well {
                left: 0;
                right: 0;
                // bottom: 28px;
                margin-bottom: 0;
                z-index: 999;
                padding: 4px;
    	    }
    	}
    }
     
    .swipeview-slider > span {
    	-webkit-box-sizing:border-box;
    	display:block;
    	text-align:center;
    	font-size:12px;
    	padding:0 20px;
    }

    height: 555px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    
    .nextSlide, .prevSlide {
        display: none;
        position: absolute;
        z-index: 2;
        bottom: 50px;
        // border-radius: 50%;
        // background: rgba(0,0,0,0.5);
        padding: 0 0;
        // height: 30px;
        // width: 30px;
        text-align: center;
    }
    .nextSlide a, .prevSlide a {
        font-weight: bold;
        font-size: 24px;
        line-height: 27px;
        color: @gray-light;
    }
    .prevSlide {
        left: 20px;
    }
    .nextSlide {
        right: 20px;
    }
    
    .pageIndicators {
        text-align: center;
        position: absolute;
        bottom: 0px;
        z-index: 2;
        margin: 0 auto;
        width: auto;
        left: 0;
        right: 0;
        height: 26px;
        div {
            display: inline-block;
            // background: fade(@gray-dark, 50%);
            background: fade(@panel-default-heading-bg, 44%);
            cursor: pointer;
            &.active {
                // background: black;
                background: @panel-default-heading-bg;
                
                &.flat {
                    border-bottom: 2px solid rgba(255,255,255,0.33);
                }
                &.ball {
                    box-shadow: 0px 0px 1px #FFF;
                }
            }
            
            &.flat {
                transition: background 0.9s;
                height: 100%;
                border-right: 1px solid rgba(255,255,255,0.13);
                border-radius: 1px;
            }
            &.ball {
                box-shadow: 0px 0px 1px @gray-lighter;
                border-radius: 50%;
                height: 12px;
                width: 12px;
                margin: 6px;
                transition: background 0.9s;
            }
        }
    }
    
    
    
    .loading-spinner-wrap {
        display: none;
        width: 100%;
        height: 100%;
        text-align: center;
        
        .loading-spinner {
            display: block;
            margin: 64px auto 0px;
            width: 128px;
        }
        
       .loading-indicator {
           display: block;
            position:relative;
            width:128px;
            height:128px;
            -moz-transform:scale(0.6);
            -webkit-transform:scale(0.6);
            -ms-transform:scale(0.6);
            -o-transform:scale(0.6);
            transform:scale(0.6);
    
            .f_circleG{
            position:absolute;
            background-color:#FFFFFF;
            height:23px;
            width:23px;
            -moz-border-radius:12px;
            -moz-animation-name:f_fadeG;
            -moz-animation-duration:1.04s;
            -moz-animation-iteration-count:infinite;
            -moz-animation-direction:linear;
            -webkit-border-radius:12px;
            -webkit-animation-name:f_fadeG;
            -webkit-animation-duration:1.04s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:linear;
            -ms-border-radius:12px;
            -ms-animation-name:f_fadeG;
            -ms-animation-duration:1.04s;
            -ms-animation-iteration-count:infinite;
            -ms-animation-direction:linear;
            -o-border-radius:12px;
            -o-animation-name:f_fadeG;
            -o-animation-duration:1.04s;
            -o-animation-iteration-count:infinite;
            -o-animation-direction:linear;
            border-radius:12px;
            animation-name:f_fadeG;
            animation-duration:1.04s;
            animation-iteration-count:infinite;
            animation-direction:linear;
            }
            
            .frotateG_01{
            left:0;
            top:52px;
            -moz-animation-delay:0.39s;
            -webkit-animation-delay:0.39s;
            -ms-animation-delay:0.39s;
            -o-animation-delay:0.39s;
            animation-delay:0.39s;
            }
            
            .frotateG_02{
            left:15px;
            top:15px;
            -moz-animation-delay:0.52s;
            -webkit-animation-delay:0.52s;
            -ms-animation-delay:0.52s;
            -o-animation-delay:0.52s;
            animation-delay:0.52s;
            }
            
            .frotateG_03{
            left:52px;
            top:0;
            -moz-animation-delay:0.65s;
            -webkit-animation-delay:0.65s;
            -ms-animation-delay:0.65s;
            -o-animation-delay:0.65s;
            animation-delay:0.65s;
            }
            
            .frotateG_04{
            right:15px;
            top:15px;
            -moz-animation-delay:0.78s;
            -webkit-animation-delay:0.78s;
            -ms-animation-delay:0.78s;
            -o-animation-delay:0.78s;
            animation-delay:0.78s;
            }
            
            .frotateG_05{
            right:0;
            top:52px;
            -moz-animation-delay:0.91s;
            -webkit-animation-delay:0.91s;
            -ms-animation-delay:0.91s;
            -o-animation-delay:0.91s;
            animation-delay:0.91s;
            }
            
            .frotateG_06{
            right:15px;
            bottom:15px;
            -moz-animation-delay:1.04s;
            -webkit-animation-delay:1.04s;
            -ms-animation-delay:1.04s;
            -o-animation-delay:1.04s;
            animation-delay:1.04s;
            }
            
            .frotateG_07{
            left:52px;
            bottom:0;
            -moz-animation-delay:1.17s;
            -webkit-animation-delay:1.17s;
            -ms-animation-delay:1.17s;
            -o-animation-delay:1.17s;
            animation-delay:1.17s;
            }
            
            .frotateG_08{
            left:15px;
            bottom:15px;
            -moz-animation-delay:1.3s;
            -webkit-animation-delay:1.3s;
            -ms-animation-delay:1.3s;
            -o-animation-delay:1.3s;
            animation-delay:1.3s;
            }
            
            @-moz-keyframes f_fadeG{
            0% {
            background-color:#000000;
            }
            100% {
            background-color:#FFFFFF;
            }
            }
            
            @-webkit-keyframes f_fadeG{
            0%{
            background-color:#000000}
            100%{
            background-color:#FFFFFF}
            }
            
            @-ms-keyframes f_fadeG{
            0%{
            background-color:#000000}
            100%{
            background-color:#FFFFFF}
            }
            
            @-o-keyframes f_fadeG{
            0%{
            background-color:#000000}
            100%{
            background-color:#FFFFFF}
            }
            
            @keyframes f_fadeG{
            0%{
            background-color:#000000}
            100%{
            background-color:#FFFFFF}
            }
        }   
    }
    [data-img-loading] {
        .loading-spinner-wrap {
            display: block;
        }
    }
}
@media (max-width: @screen-xs-max) {
    .carousel {
        height: 164px;
        .prevSlide {
            left: 2px;
        }
        .nextSlide {
            right: 2px;
        }
    }
}

.col-md-6.has-feedback .form-control-feedback {
    right: 15px;
}

.user-picker {
    .houseList {
        clear: both;
        .select.user {
            cursor: pointer;
        }
    }
}
.picker-row {
    cursor: pointer;
    margin: 12px 2px;
}


.houseCollection.images.picker {
    .pageSizeWrap {
        display: none;
    }
    .select.image {
        height: 146px;
        border: 4px solid @panel-default-heading-bg;
        
        &:hover {
            border: 4px solid @panel-warning-heading-bg;
            cursor: pointer;
        }
    }
}

.welcomeUser {
    .modal-footer:empty {
        display: none;
    }
}

.lat-lon-select {
    position: relative;
    input[name="menu-item-map-query"] {
        position: absolute;
        z-index: 999;
        left: 49px;
        top: 16px;
        right: 0px;
        width: auto;
    }
}

.file-widget {
    .file-link {
        a {
            word-break: break-all;
        }
    }
}