@font-face {
    font-family: 'Font Base';
    src: url('font/Font.ttf'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         
}

/* TAG STYLE */
html , body{
    width : 100%;
    height : 100%;
    min-width : 1230px;
    padding: 0;
    margin :0;
    float : left;
}

.body-auto{
    min-width: 200px;
}

body , a , h1, h2, h3 , h4, h5{
    font-family: 'Font Base', sans-serif;
}

a{
    text-decoration: none;
}

input[type=text] , input[type=password] , input[type=email] , textarea , input[type=number] {
    width: 98%;
    padding: 5px 1%;
    font-family: 'Font Base', sans-serif;
    font-size: 14px;
    float: left;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]{
    text-align : right;
}

input[type=submit] , input[type=reset] , input[type=button] ,
button[type=submit] , button[type=reset] , button[type=button] , button{
    font-family: 'Font Base', sans-serif;
    font-size: 14px;
    cursor: pointer;
    float: left;
}

select{
    width: 98%;
    padding: 5px 1%;
    font-family: 'Font Base', sans-serif;
    color : #919191;
    font-size: 14px;
    float: left;
}

input[type=text]:disabled , input[type=password]:disabled , input[type=email]:disabled , textarea:disabled , input[type=number]:disabled, select:disabled{
    background : #EBEBEB;
    border : 1px solid #EBEBEB;
    color : #919191;
    cursor: not-allowed;
}

/* -------------------------  */

/* BASE STYLE */
.clearing5, .clearing10 , .clearing20 , .clearing50{
    width: 100%;
    height: 5px;
    float: left;
}

.clearing10{height: 10px;}
.clearing20{height: 20px;}
.clearing50{height: 50px;}

.bordering{
    width : 100%;
    height: 2px;
    border-top : 1px solid #EBEBEB;
    float :left;
}

.bordering-dark{
    width : 100%;
    height: 2px;
    border-top : 1px solid #AAAAAA;
    float :left;
}

.row-5{
    width: 5%;
    float: left;
}
.row-10{
    width: 10%;
    float: left;
}

.row-15{
    width: 15%;
    float: left;
}

.row-20{
    width: 20%;
    float: left;
}

.row-25{
    width: 25%;
    float: left;
}

.row-30{
    width: 33.3%;
    float: left;
}

.row-35{
    width : 35%;
    float : left;
}

.row-40{
    width : 40%;
    float : left;
}

.row-45{
    width : 45%;
    float : left;
}

.row-half{
    width: 50%;
    float: left;
}

.row-60{
    width : 60%;
    float : left;
}

.row-65{
    width : 65%;
    float : left;
}

.row-70{
    width: 70%;
    float: left;
}

.row-75{
    width: 75%;
    float: left;
}

.row-80{
    width: 80%;
    float: left;
}

.row-85{
    width: 85%;
    float: left;
}

.row-90{
    width: 90%;
    float: left;
}

.row-95{
    width: 95%;
    float: left;
}

.row-full{
    width: 100%;
    float: left;
}

.required{
    color : #08B1AE;
}

.error ,  .success , .info , .draft{
    font-size: 14px;
    color : red;
}

.border-error{
    border-color : red !important;
}

.bg-error{
    background-color : #DF3638 !important;
}

.bg-grey{
    background-color : #EBEBEB !important;
}

.bg-white{
    background-color : #FFF !important;
}

.bg-round{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.success{ color: #56D66F;}
.info{text-align: center; color : #666;}
.draft{ color : #ffe52b;}

.stripes{background : #FAFAFA;}

.font-white , .font-white-hover:hover{color : #FFF !important;}
.font-grey{color : #919191 !important;}
.font-grey-light{color : #EBEBEB !important;}

.font6{font-size: 6px;}
.font8{font-size: 8px;}
.font10{font-size: 10px;}
.font12{font-size: 12px;}
.font14{font-size: 14px;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}
.font20{font-size: 20px;}
.font24{font-size: 24px;}
.font32{font-size: 32px;}
.font40{font-size: 40px;}
.font45{font-size: 45px;}
.font-bold{font-weight: bold !important;}

.align-left{
    text-align : left;
}

.align-center{
    text-align : center !important;
}

.align-right{
    text-align : right;
}

.float-right{
    float : right !important;
}

.pointer{
    cursor : pointer;
}

.padding10{
    padding-top: 10px;
    padding-bottom: 10px;
}

/* -------------------------  */
/* INDEX BASE */
.header{
    background : #FFF;
    min-width: 1180px;
    width: 100%;
    height: 49px;
    border-bottom : 1px solid #EBEBEB;
    float: left;
}

.header-tile{
    background : #F9F9F9;
}

.header-tile-scrollbar{
    background : #F9F9F9;
    border-bottom : 0px;
}

.header .header-back{
    background : url('img/ico_back.png') no-repeat left;
    width : 80px;
    height : 34px;
    margin-top : -49px;
    padding : 15px 0 0 30px;
    font-size : 16px;
    color : #999;
    cursor : pointer;
    float : left;
}

.header .header-button{
    margin-top : -49px;
    margin-right : 20px;
    height : 49px;
    float : right;
}

.header .header-button .header-button-item{
    width : 49px;
    height : 49px;
    cursor : pointer;
    float : left;
}

.header .header-button .header-button-item.header-button-text{
    width : auto;
    padding-left : 35px;
}

.header .header-title{
    width : 100%;
    height : 49px;
    text-align : center;
    float : left;
}

.header .header-title .header-title-wrapper{
    margin : 0 auto;
}

.header .header-title .header-title-icon{
    width : 38px;
    height : 49px;
    float : left;
}

.header .header-title .header-title-label{
    height : 32px;
    padding-top : 17px;
    font-size : 18px;
    color : #999;
    float : left;
}

.badge-notif , .badge-notif-active{
    background: #EBEBEB;
    border-radius : 50%;
    width : 17px;
    height : 14px;
    padding-top: 3px;
    margin-right: 4px;
    text-align: center;
    font-size : 10px;
    color : #919191;
    float : right;
}

.header-button-item .badge-notif , .header-button-item .badge-notif-active{
    margin-top: 5px;
}

.badge-notif-active {
    background: red;
    color : #FFF;
}

.header .header-button .header-text{
    width : 100%;
    padding-top: 15px;
    color : #919191;
    font-size : 16px;
    text-align: center;
    float : left;
}


.btn-got-some-feedback{
    padding : 10px 0;
    background-color: #F4F4F4;
    width: 100%;
    position : absolute;
    bottom : 0;
    border-top : 1px solid #ECECEC;
    cursor : pointer;
}

.btn-got-some-feedback .btn-got-some-feedback-label{
    background : url('img/ico_feedback.png') left no-repeat;
    color : #919191;
    font-size: 15px;
    padding-left : 40px;
    margin-left: 40px;
    padding-top : 5px;
    float : left;
}

.left-list{
    width : 20%;
    min-width : 248px;
    height : 100%;
    border-right : 1px solid #EBEBEB;
    overflow-x: hidden;
    overflow-y: auto;
    float : left;
}

.left-list .lists{
    width : 100%;
    float : left;
}

.left-list .lists .list-item , .left-list .lists .list-item-active , .left-list .lists .list-item-inputing{
    width : 100%;
    padding-top : 5px;
    cursor : pointer;
    float : left;
}
.left-list .lists .list-item:hover , .left-list .lists .list-item-active{
    background : #F5F5F5;
}

.left-list .lists .list-item:hover .list-item-label , .left-list .lists .list-item-active .list-item-label{
    color : #272727;
}

.left-list .lists .list-item .list-item-icon , .left-list .lists .list-item-active .list-item-icon ,
.left-list .lists .list-item-inputing .list-item-icon{
    width : 20%;
    height : 30px;
    float : left;
}

.left-list .lists .list-item .list-item-label , .left-list .lists .list-item-active .list-item-label{
    width : 80%;
    padding: 5px 0 10px;
    border-bottom : 1px solid #EBEBEB;
    font-size: 14px;
    color : #999;
    float : left;
}

.left-list .lists .list-item .list-item-label .list-item-name , .left-list .lists .list-item-active .list-item-label .list-item-name{
    width : 80%;
    float : left;
}

.left-list .lists .list-item .list-item-label .list-item-notification, .left-list .lists .list-item-active .list-item-label .list-item-notification{
    width : 15%;
    height : 20px;
    text-align : right;
    padding-right : 6px;
    float : right;
}

.left-list .lists .list-item .list-item-label .list-item-notification .bullet , .left-list .lists .list-item-active .list-item-label .list-item-notification .bullet{
    width : 5px;
    height : 5px;
    margin : 5px 2px 0 0;
    border-radius : 50%;
    float : left;
}

.left-list .lists .list-item .list-item-label .list-item-delete , .left-list .lists .list-item-active .list-item-label .list-item-delete{
    display : none;
    width : 10%;
    height : 20px;
    float : right;
}

.left-list .lists .list-item-inputing .list-item-input{
    width : 80%;
    padding-bottom : 5px;
    border-bottom : 1px solid #EBEBEB;
    float : left;
}

.left-list .lists .list-item-inputing .list-item-input input{
    width : 78%;
    border : 0;
    font-size: 14px;
    color : #999;
    float : left;
}

.left-list .lists .list-item-inputing .list-item-button{
    display : none;
    width : 32px;
    height : 32px;
    float : right;
}

.left-list .lists .list-item .list-item-full, .left-list .lists .list-item .list-item-full-separator{
    width : 100%;
    padding: 5px 0;
    border: none;
    font-size: 14px;
    color : #999;
    float : left;
}

.left-list .lists .list-item .list-item-full-separator{
    background: #EBEBEB;
    padding: 2px 0;
    font-size: 16px;
    float : left;
}

.left-list .lists .list-item .list-item-full .list-item-full-icon{
    background: #EBEBEB;
    width : 30px;
    height: 30px;
    margin: 0 5px;
    overflow: hidden;
    float : left;
}

.left-list .lists .list-item .list-item-full .list-item-full-icon img{
    display: block;
    max-height : 100%;
    margin : 0 auto;
}

.left-list .lists .list-item .list-item-full .list-item-name{
    padding-top: 8px;
    width: 95%;
}

.left-list .lists .list-item .list-item-full-separator .list-item-name{
    padding : 2px 10px;
    font-weight: bold;
}

.list-item-options{
    width: 10%;
    padding: 18px 0;
    color : #919191;
    cursor: pointer;
    float : right;
}

.list-item-options.filebox-select{
    padding: 12px 0;
}


.left-list .lists .list-item-inputing .list-item-input-full{
    width : 95%;
    margin : 0 2.5%;
    float : left;
}

.left-list .lists .list-item-inputing .list-item-input-full input{
    width : 90%;
    padding : 10px 5%;
    margin: 5px 0;
    border : 0;
    border-radius : 4px;
    float : left;
}

.left-list .lists .list-item-inputing .list-item-button{
    display : none;
    width : 32px;
    height : 32px;
    float : right;
}
.right-content{
    width :78%;
    min-width : 920px;
    height : 100%;
    overflow-y : auto;
    overflow-x : hidden;
    float : right;
}

/*  CONTENT */
.content{
    width: 80%;
    min-width: 1180px;
    overflow-y: auto;
    overflow-x : hidden;
    float: left;
}

.content-page{
    width : 100%;
    min-height : 100%;
    float : left;
}

.content-container{
    width: 980px;
    margin: 0 auto;
    z-index : 1;
}

.content-page-container{
    width : 90%;
    margin : 0 5%;
    float : left;
}

.iframe-box{
    width: 940px;
    margin: 0 auto;
    height : 90%;
    z-index : 1;
    overflow: hidden;
}

.iframe-box .iframe-wrapper{
    height : 100%;
    float: left;
}

.iframe-box iframe{
    border : 0;
    width : 960px;
    height : 100%;
    float : left;
}

.iframe-box.content-scrollbar{
    background : #FFF;
    border : 1px solid #EBEBEB;
    border-radius : 10px;
}

.pagination{
    top : 50%;
    position : absolute;
    min-width : 730px;
    float : left;
}

.pagination .previous , .pagination .next{
    background : url('img/btn_prev.png') no-repeat center;
    width : 50px;
    height : 100px;
    cursor: pointer;
    float : left;
}

.pagination .next{
    background : url('img/btn_next.png') no-repeat center;
    float : right;
}

.slide-content{
    margin : 0 auto;
    margin-top : 20px;
}

.slide-content .slide-content-wrapper{
    float: left;
}

.slide-content .slide-content-wrapper .slide-page , .slide-content .slide-content-wrapper .slide-page-active{
    background : #606060;
    border-radius : 50%;
    width : 10px;
    height : 10px;
    margin : 3px;
    float : left;
}

.slide-content .slide-content-wrapper .slide-page-active{
    background : #08B1AE;
}

.satelite-menu-content{
    position : absolute;
    bottom:10px;
    right: 5px;
    width: 40px;
    height: 40px;
    z-index: 8;
}

.satelite-menu-content.content-scrollbar{
    bottom:40px;
}

.satelite-menu-content .satelite-item , .satelite-menu-content .satelite-item-disabled{    
    border-radius : 50%;
    width: 40px;
    height: 40px;
    position : absolute;
    bottom:10px;
    right: 5px;
    cursor : pointer;
    transition:all 0.5s;
    -webkit-transition: -webkit-all 0.5s;
    transition-timing-function: ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}

.satelite-menu-content .satelite-item-disabled{
    opacity : 0.2;
    cursor: not-allowed;
}

.satelite-menu-content #sat-menu{
    background : url("img/bt_menu.png") no-repeat center;
}

.satelite-menu-content .sat-icon{
    width: 100%;
    height: 100%;
    float : left;
}

.context-menu-list {
    list-style: none;
}
.context-menu-item {
    border: 1px solid silver;
    cursor: pointer;
    padding: 2px 5px;
    width: 100px;
}
.context-menu-separator {
    height: 1px;
    padding: 0px;
    border: none;
}
.context-menu-hover {
    background: silver;
}
area {
    border: 1px solid white;
}

/* NAVIGATION */
.navigation-bar{
    background : #F4F4F4;
    width : 50px;
    float : left;
}

.navigation-button{
    position : absolute;
    top : 20px;
    left : 5px;
    background : url("img/btn_menu_list.png") no-repeat center;
    width : 40px;
    height : 40px;
    z-index : 8;
    cursor : pointer;
}

.navigation{
    position : absolute;
    top : 0;
    left : 0;
    background : #F4F4F4;
    width : 20%;
    min-width : 250px;
    min-height: 500px;
    padding-bottom : 60px;
    transition : all 0.5s ease-in-out;
    opacity : 0;
    z-index : 7;
    overflow: hidden;
}

.navigation .navigation-logo {
    width : 75%;
    margin-top : 5px;
    margin-right : 5%;
    height : 72px;
    background-size: contain !important;
    float : right;
}

.navigation-box{
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    padding-right: 17px;
    padding-bottom: 30px;
    box-sizing: content-box;
}

/* ----------- */
/* NAVIGATES */

.navigates{
    background : #F4F4F4;
    width : 20%;
    min-width : 250px;
    min-height: 500px;
    padding-bottom : 60px;
    float : left;
}

.navigates-menu{
    width : 100%;
    height : 25%;
    float : left;
}

.navigates-menu .nav-link-options{
    width : 98%;
    border-right : 4px solid #ECECEC;
    float : left;
}

.navigates-menu .nav-link-options .nav-link-options-item , .navigates-menu .nav-link-options .nav-link-options-item-active{
    width : 50%;
    height : 50px;
    padding-bottom : 8px;
    border-bottom: 2px solid #D0D0D0;
    cursor : pointer;
    float : left;
}

.navigates-menu .nav-link-options .nav-link-options-item:hover, .navigates-menu .nav-link-options .nav-link-options-item-active{
    padding-bottom : 6px;
    border-bottom: 4px solid #08B1AE;
}

.navigates-wrapper{
    display : none;
    width: 100%;
    height: 75%;
    min-height : 400px;
    overflow : auto;
    float : left;
}

.nav-main-items, .nav-main-items-active , .nav-main-back , .nav-briefcase , .nav-briefcase-active{
    width: 98%;
    padding : 5px 0;
    border-right : 4px solid #ECECEC;
    border-bottom : 1px solid #ECECEC;
    color : #919191;
    cursor : pointer;
    float : left;
    padding-right: 17px;
}

.nav-main-items .nav-main-img , .nav-main-items-active .nav-main-img{
    width : 30px;
    height: 30px;
    margin : 5px 8px;
    overflow : hidden;
    float : left;
}

.nav-main-items .nav-main-img img , .nav-main-items-active .nav-main-img img{
    width : 100%;
    float : left;
}

.nav-main-items .nav-main-icons , .nav-main-items-active .nav-main-icons, .nav-main-back .nav-main-icons{
    width : 32px;
    height: 28px;
    margin : 5px 10px;
    float : left;
}

.nav-main-items .nav-main-label , .nav-main-items-active .nav-main-label , .nav-main-back .nav-main-label{
    width: 69%;
    height: 15px;
    margin : 12px 0;
    font-size :14px;
    float : left;
}

.nav-main-items .nav-main-notif , .nav-main-back .nav-main-notif , .nav-main-items-active .nav-main-notif{
    width : 18px;
    height: 15px;
    margin : 12px 0;
    color : #CDCDCD;
    font-size :14px;
    text-align : center;
    float: left;
}

/* CONTENT RELATED PRODUCTS */
.related-products-box{
    position : fixed;
    top   : 50%;
    right : -280px;
    z-index: 7;
    transition:right 1s;
    transition-timing-function: ease-in-out;
}

.related-products-box .related-products-button{
    width : 80px;
    height : 50px;
    border-radius: 25px 0 0 25px;
    cursor : pointer;
    float : left;
}

.related-products-box .related-products-content{
    border : 1px solid #EBEBEB;
    margin-top : -250px;
    width : 280px;
    height : 500px;
    padding : 10px 0;
    border-radius : 4px 0 0 4px;
    overflow-y : scroll;
    float : left;
}


/* CONTENT SUMMARY */
.summary-box{
    position : fixed;
    top   : 10%;
    right : -465px;
    z-index: 9;
    transition:right 1s;
    transition-timing-function: ease-in-out;
}

.summary-box .summary-box-icon{
    background : url('img/img_rating_bg.png') no-repeat;
    width : 50px;
    height : 36px;
    cursor : pointer;
    float : left;
}

.summary-box .summary-box-content{
    background : #FFF;
    border : 2px solid #D1D1D1;
    padding : 5px;
    width : 450px;
    float : left;
}

.summary-box .summary-box-content .summary-title{
    width : 100%;
    padding : 5px 0;
    border-bottom : 1px solid #D1D1D1;
    text-align : center;
    color : #272727;
    font-size : 16px;
    float : left;
}

.summary-box .summary-box-content .summary-close{
    background : url('img/btn_close.png') no-repeat center;
    width : 30px;
    height : 30px;
    margin-top : -35px;
    cursor : pointer;
    float : right;
}

.summary-box .summary-box-content .summary-text{
    width : 100%;
    min-height : 100px;
    margin : 5px 0;
    font-size : 14px;
    color : #272727;
    float : left;
}

.summary-box .summary-box-content .summary-description{
    width : 100%;
    padding : 10px 0;
    border-top : 1px solid #D1D1D1;
    float : left;
}

.summary-box .summary-box-content .summary-description .summary-briefcase , .summary-box .summary-box-content .summary-description .summary-rating{
    background : url('img/ico_briefcase_sum.png') no-repeat left top;
    padding-left : 30px;
    padding-top : 3px;
    height : 20px;
    margin-right : 20px;
    color : #333;
    font-size : 14px;
    float : left;
}

.summary-box .summary-box-content .summary-description .summary-rating{
    background : url('img/img_rating_small.png') no-repeat left;
}

.summary-box .summary-box-content .summary-description .summary-version{
    padding-top: 5px;
    font-size : 14px;
    color : #919191;
    text-align : right;
    float : right;
}

/* CONTENT RATING */

.rating-box{
    display : none;
    position : fixed;
    top   : -25%;
    left : 50%;
    margin-left : -175px;
    z-index: 9;
    transition:top 1s;
    transition-timing-function: ease-in-out;
} 

.rating-box .rating-box-content{
    background : #FFF;
    border : 2px solid #D1D1D1;
    width : 350px;
    float : left;
}

.rating-box .rating-box-content .rating-title{
    width : 100%;
    margin : 20px 0 10px;
    font-size: 14px;
    color : #313231;
    text-align: center;
    float : left;
}

.rating-box .rating-box-content .rating-stars{
    width : 300px;
    margin : 0 auto;
}

.rating-box .rating-box-content .rating-stars .rating-star-item , 
.rating-box .rating-box-content .rating-stars .rating-star-item-active{
    background: url('img/img_rating_off.png') no-repeat center;
    width : 50px;
    height: 50px;
    margin : 5px;
    cursor : pointer;
    float : left;
} 

.rating-box .rating-box-content .rating-stars .rating-star-item:hover , 
.rating-box .rating-box-content .rating-stars .rating-star-item-active{
    background: url('img/img_rating_on.png') no-repeat center;
}

.rating-box .rating-box-content .rating-buttons{
    width: 100%;
    border-top : 1px solid #D0D0D0;
    margin-top : 20px;
    float: left;
}

.rating-box .rating-box-content .rating-buttons .rating-btn{
    width: 50%;
    padding : 10px 0;
    text-align : center;
    font-size: 14px;
    cursor: pointer;
    float : left;
}

.rating-box .rating-box-content .rating-buttons .rating-btn:hover{
    color : #FFF !important;
}

.rating-box .rating-box-content .rating-buttons #btn-rating-cancel{
    width: 49.5%;
    border-right : 1px solid #D0D0D0;
}

.rating-box .rating-box-content .rating-buttons #btn-rating-submit{
    float : right;
}

/* CONTENT LEARNING */
.learning-container{
    width : 100%;
    overflow : auto;
    float : left;
}

.learning-button-list{
    width: 620px;
    margin : 0 auto;
}

.learning-button-list .learning-button , .learning-button-list .learning-button-active{
    width : 64px;
    height : 64px;
    margin : 0 8px;
    cursor : pointer;
    float : left;
}

.learning-list{
    width : 90%;
    min-width : 730px;
    margin : 0 auto;
}

.learning-list .learning-box{
    background: #EBEBEB;
    border-bottom: 4px solid;
    width: 180px;
    margin: 5px;
    float: left;
}

.learning-list .learning-box .learning-img{
    width: 100%;
    height: 120px;
    float : left;
}

.learning-list .learning-box .learning-img img{
    width: 100%;
    height: 100%;
    float: left;
}

.learning-list .learning-box .learning-desc{
    width : 90%;
    padding: 5%;
    font-size: 12px;
    color : #919191;
    float: left;
}

.learning-list .learning-box .learning-desc h5{
    width: 100%;
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: normal;
    float: left;
}

.learning-list .learning-box .learning-desc h5 a{
    color : #919191;
}

.learning-briefcase , .learning-share{
    background: url('img/btn_add_briefcase_small.png') left center no-repeat;
    width: 76%;
    height: 20px;
    padding-left: 20%;
    padding-top: 5px;
    margin : 3px 2%;
    color: #999;
    font-size: 12px;
    cursor : pointer;
    float: left;
}

.learning-share{
    background: url('img/btn_share_small.png') left no-repeat;
}

.learning-briefcase:hover{
    background: url('img/btn_add_briefcase_small_on.png') left center no-repeat;
}

.learning-share:hover{
    background: url('img/btn_share_small_over.png') left center no-repeat;
}

.briefcase-learning , .briefcase-learning-active{
    width : 30px;
    height : 30px;
    margin-top: -120px;
    margin-right : 5px;
    float: right;
}
.briefcase-learning-active{
    background : url('img/ic_briefcase_indicator_small.png') center no-repeat;
}

.error-block{
    color: red;
}

/* CONTENT COMMENT */
.comment-profile{
    width: 88%;
    padding: 0px 5%;
    float: left;
}

.comment-profile .profile-name , .comment-profile .profile-job , 
.comment-profile .profile-name , .comment-profile .profile-job{
    width: 50%;
    color :#08B1AE;
    font-size: 14px;
    float: left;
}

.comment-profile .profile-job {
    color :#999;
    font-size: 14px;
    text-align: right;
    float : right;
}

.list-comment{
    width : 90%;
    margin : 0 auto;
}

.list-comment .comment-profile{
    width : 98%;
    padding: 1%;
    border : 1px solid #EBEBEB;
}

.list-comment .comment-content{
    width : 98%;
    padding: 1%;
    border : 1px solid #EBEBEB;
    border-top: 0;
    font-size: 14px;
    float : left;
}
.list-comment .comment-content p{
    color : #666;
    margin: 0;
    padding : 0;
}

.list-comment .comment-content .comment-date{
    color : #999;
    font-size: 12px;
    
}

.form-comment{
    width : 90%;
    margin : 0 auto;
}

.form-comment .inputing{
    width: 100%;
    float: left;
}

.form-comment .inputing textarea {
    border: 1px solid #EBEBEB;
    border-radius : 3px;
    color : #999;
    width: 96%;
    padding: 5px 2%;
    resize : none;
    height: 80px;
    float: left;
}

.form-comment .inputing select{
    border: 1px solid #EBEBEB;
    border-radius : 3px;
    color : #999;
    width: 96%;
    padding: 5px 2%;
    float: left;
}

.form-comment .inputing .btn-post-comment, .form-comment .inputing .btn-post-comment-filebox{
    background: #606060;
    color : #FFF;
    border: none;
    border-radius : 3px;
    padding: 5px 15px;
    cursor : pointer;
    float: right;
}

.form-comment .inputing .btn-post-comment:hover{
    background: #08B1AE;
}

/* CONTENT SHARING */

.sharing-box{
    width : 300px;
    background: #FFF;
    border : 1px solid #D0D0D0;
    padding-top : 10px;
    position: fixed;
    top   : 25%;
    right : -302px;
    z-index: 9;
    color : #919191;
    transition:all 1s;
    transition-timing-function: ease-in-out;
}

.sharing-box .sharing-box-title{
    width: 75%;
    padding-left : 4%;
    font-size: 14px;
    float : left;
}

.sharing-box .sharing-box-cancel{
    width: 20%;
    font-size: 14px;
    cursor: pointer;
    float : right;
}

.sharing-box .sharing-box-cancel:hover{
    color : #08B1AE;
}
.sharing-box .sharing-box-item{
    width : 100%;
    border-top : 1px solid #F3F3F3;    
    padding: 10px 0;
    cursor : pointer;
    float : left;
}

.sharing-box .sharing-box-item:hover{
    background: #F4F4F4;
}

.sharing-box .icon-sharing-briefcase , .sharing-box .icon-sharing-pages , .sharing-box .icon-sharing-page , .sharing-box .icon-sharing-download {
    background: url('img/ico_share_briefcase.png') center no-repeat;
    width : 20%;
    height : 50px;
    float : left;
}

.sharing-box .icon-sharing-pages , .sharing-box .icon-sharing-page {
    background: url('img/ico_share_email.png') center no-repeat;
}

.sharing-box .icon-sharing-download{
    background: url('img/ico_share_download.png') center no-repeat;
}

.sharing-box .sharing-box-item-title{
    width: 80%;
    margin-top: 15px;
    font-size: 14px;
    color : #919191;
    float : left;
}

.sharing-form{
    width : 450px;
    background: #FFF;
    border : 1px solid #D0D0D0;
    padding : 10px 0;
    position: fixed;
    top   : 25%;
    right : -452px;
    z-index: 9;
    transition:all 1s;
    transition-timing-function: ease-in-out;
}

.sharing-form .sharing-form-title{
    width : 100%;
    height : 20px;
    font-size: 14px;
    color : #919191;
    border-bottom: 1px solid #D0D0D0;
    padding-bottom: 5px;
    text-align: center;
    float : left;
}

.sharing-form  .sharing-form-button{
    width: 100%;
    height : 20px;
    margin-top: -26px;
    font-size: 14px;
    color : #919191;
    float: left;
}

.sharing-form  .sharing-form-button .sharing-form-send , .sharing-form  .sharing-form-button .sharing-form-send-folder,
.sharing-form  .sharing-form-button .sharing-form-send-log{
    margin-right : 10px;
    cursor: pointer;
    float :right;
}

.sharing-form  .sharing-form-button .sharing-form-cancel{
    margin-left : 10px;
    cursor : pointer;
    float : left;
}

.sharing-form  .sharing-form-button .sharing-form-send:hover , .sharing-form  .sharing-form-button .sharing-form-cancel:hover
.sharing-form  .sharing-form-button .sharing-form-send-folder:hover, .sharing-form  .sharing-form-button .sharing-form-send-log:hover{
    color : #08B1AE;
}

.sharing-form .sharing-form-email{
    width: 100%;
    margin: 5px 0;
    float : left;
}

.sharing-form .sharing-form-email .sharing-form-label{
    width: 23%;
    height: 16px;
    padding: 8px 0;
    margin-left : 2%;
    color: #919191;
    font-size: 14px;
    float: left;
}
.sharing-form .sharing-form-email .sharing-form-input{
    width: 73%;
    color : #919191;
    font-size: 14px;
    float: left;
}

.sharing-form .sharing-form-email .sharing-form-input r{
    color : #0495D8;
    padding: 8px 0;
    float : left;
}

.sharing-form .sharing-form-email .sharing-form-input .input-text , .sharing-form .sharing-form-email .sharing-form-input .input-msg{
    border : 1px solid #EBEBEB;
    border-radius: 4px;
    color : #919191;
    float : left;
}

.sharing-form .sharing-form-email .sharing-form-input .input-msg{
    height : 100px;
    resize : none;
}

.sharing-form .user-list-box{
    background: #FFF;
    width : 335px;
    max-height: 400px;
    margin-top: 30px;
    border : 1px solid #D0D0D0;
    overflow : auto;
    z-index: 200;
    position: absolute;
}

.sharing-form .user-list-box .user-list-item{
    width: 92%;
    padding: 10px 4%;
    border-bottom : 1px solid #D0D0D0;
    cursor: pointer;
    float : left;
}

.sharing-form .user-list-box .user-list-item .user-list-avatar{
    background: #EBEBEB;
    border-radius : 50%;
    width: 50px;
    height : 50px;
    overflow: hidden;
    float: left;
}

.sharing-form .user-list-box .user-list-item .user-list-avatar img{
    width : 100%;
    float : left;
}

.sharing-form .user-list-box .user-list-item .user-list-name{
    width: 200px;
    margin-left: 10px;
    margin-top: 15px;
    color : #000;
    font-weight: bold;
    float: left;
}

/* CONTENT BRIEFCASE */
.icn-briefcase-content{
    display: none;
}

.icn-briefcase-content-active{
    background : url('img/ic_briefcase_indicator.png') no-repeat center;
    width : 50px;
    height : 50px;
    float : right;
}

.multiple-briefcase-box{
    display : none;
    width : 450px;
    background : #FFF;
    border : 2px solid #D1D1D1;
    position : fixed;
    top   : -25%;
    left : 50%;
    margin-left : -225px;
    z-index: 9;
    transition:top 1s;
    transition-timing-function: ease-in-out;
}

.multiple-briefcase-box .multiple-briefcase-text{
    width : 100%;
    padding : 10px 0;
    color : #919191;
    font-size: 14px;
    text-align : center;
    float : left;
}

.multiple-briefcase-box .multiple-briefcase-button{
    width : 100%;
    border-top : 1px solid #D0D0D0;
    float : left;
}

.multiple-briefcase-box .btn-multiple-briefcase{
    width : 33.2%;
    padding: 10px 0;
    font-size: 14px;
    text-align : center;
    cursor : pointer;
    float: left;
}
.multiple-briefcase-box .btn-multiple-briefcase:hover{
    color : #FFF !important;
}

.multiple-briefcase-box #btn-save-multiple-briefcase , .multiple-briefcase-box #btn-save-multiple-briefcase-learning{
    width : 33%;
    border-left : 1px solid #D0D0D0;
    border-right : 1px solid #D0D0D0;
}

/* CONTENT ATTACHMENT */
.attachment-box {
    width : 100%;
    padding : 10px 0;
    float : left;
}

.attachment-box .attachment-title-list{
    width : 90%;
    margin : 0 auto;
}

.attachment-box .attachment-title{
    margin-right : 20px;
    font-size : 15px;
    color : #919191;
    float : left;
}

.attachment-box .btn-open-attach{
    font-size : 15px;
    color : #08B1AE;
    cursor : pointer;
    float : left;
}

.attachment-box .attachment-list{
    width : 70%;
    margin : 20px 0 0;
    max-height : 500px;
    overflow : auto;
    float : left;
}

.attachment-box .attach-box{
    width : 100%;
    float : left;
}

.attachment-box .attach-item{
    width : 100%;
    padding : 10px 0;
    border-bottom : 1px solid #D0D0D0;
    cursor : pointer;
    float : left;
}

.attachment-box .attach-item:hover{
    background : #F4F4F4;
}

.attachment-box .attach-box .attach-item .attach-icon{
    background : url('img/ico_file.png') no-repeat center;
    width: 10%;
    min-width : 60px;
    height : 50px;
    float : left;
}

.attachment-box .attach-box .attach-item .attach-title{
    width: 80%;
    height : 50px;
    color : #919191;
    float : left;
}

/* GALLERY */
.gallery-album-edit{
    display : none;
    width : 80%;
    margin : 10px auto;
}

.gallery-album-edit label{
    margin : 5px 10px;
    color : #919191;
    font-size: 14px;
    float : right;
}

.gallery-album-edit input[type=text]{
    width : 70%;
    padding : 5px 10px;
    border : 0;
    border-radius : 10px;
    background : #EBEBEB;
    color : #919191;
    font-size: 14px;
    float: left;
}

.gallery-menu , .gallery-list{
    width : 100%;
    float : left;
}

.gallery-menu .gallery-title{
    width : 73%;
    padding-left : 2%;
    font-size : 14px;
    color : #919191;
    float : left;
}

.gallery-menu .gallery-sort{
    width : 25%;
    float : right;
}

.gallery-menu .gallery-sort .gallery-text{
    margin : 3px 10px 0 0;
    font-size : 14px;
    color : #919191;
    float : left;
}

.gallery-menu .gallery-sort .gallery-sort-box{
    background : #F5F5F5;
    width : 120px;
    padding : 5px 0;
    border-radius : 30px;
    margin : 0 auto;
    font-size: 14px;
    color : #919191;
    text-align : center;
    cursor : pointer;
    float : left;
}

.gallery-menu .gallery-sort .gallery-sort-box:hover + .gallery-sort-menu{
    display : block;
}

.gallery-menu .gallery-sort .gallery-sort-menu{
    display : none;
    width : 120px;
    position : absolute;
    z-index : 1;
    margin : 5px 0 0 6px;
    cursor : pointer;
}

.gallery-menu .gallery-sort .gallery-sort-menu:hover{
    display : block;
}

.gallery-menu .gallery-sort .gallery-sort-list{
    background : #FFF;
    width : 100%;
    height : 108px;
    padding: 0;
    margin : 30px 0 0 45px;
    border : 1px solid #F6F6F6;
    border-radius : 10px;
    list-style : none;
    float : left;
}

.gallery-menu .gallery-sort .gallery-sort-item{
    width : 100%;
    border-bottom: 1px solid #F6F6F6;
    padding : 5px 0;
    color : #919191;
    font-size: 14px;
    text-align : center;
    float : left;
}

.gallery-menu .gallery-sort #last.gallery-sort-item{
    border : none;
}

.gallery-item{
    background : #FFF;
    border : 1px solid #F6F6F6;
    width : 22.5%;
    margin : 10px 1%;
    padding-bottom : 5px;
    cursor : pointer;
    float : left;
}

.gallery-item:hover{
    padding-bottom: 2px;
    border-bottom : 4px solid;
}

.gallery-item .gallery-action{
    display : none;
    width : 100%;
    margin-top : -115px;
    float : left;
}

.gallery-item .gallery-action .gallery-action-delete{
    width : 20px;
    height : 20px;
    margin-right : 5px;
    float : right;
}

.gallery-item .gallery-item-thumbnail{
    width : 100%;
    height : 120px;
    overflow : hidden;
    float : left;
}

.gallery-item .gallery-item-thumbnail img{
    width : 100%;
    min-height : 100%;
    float : left;
}

.gallery-item .gallery-item-title{
    width : 92%;
    padding : 0 4%;
    margin : 5px 0;
    color : #919191;
    font-size : 14px;
    float : left;
}

.gallery-item .gallery-item-description{
    width : 92%;
    padding : 0 4%;
    margin : 5px 0;
    color : #919191;
    font-size: 14px;
    float : left;
}

.gallery-popup{
    display : none;
    position : fixed;
    top : 20%;
    left : 25%;
    width : 600px;
    height : 400px;
    z-index : 9;
    cursor : pointer;
}

.gallery-popup img{
    display: block;
    margin : 0 auto;
    max-width : 600px;
    max-height : 400px;
}

.gallery-popup video{
    width : 100%;
    float : left;
}
/* -------------------------  */

/* ICONS  */

#nav-resource.nav-link-options-item{
    background : url('img/tab_contents_off.png') no-repeat center;
}

#nav-resource:hover, #nav-resource.nav-link-options-item-active{
    background : url('img/tab_contents_on.png') no-repeat center;
}

#nav-tools.nav-link-options-item{
    background : url('img/tab_tools_off.png') no-repeat center;
}

#nav-tools:hover, #nav-tools.nav-link-options-item-active{
    background : url('img/tab_tools_on.png') no-repeat center;
}

#icn-back{
    background : url('img/ico_back.png') no-repeat center;
}

#icn-next{
    background : url('img/ico_next.png') no-repeat center;
}

#icn-arrow-prev{
    background : url('img/ico_arrow_prev.png') no-repeat center;
}

#icn-arrow-next{
    background : url('img/ico_arrow_next.png') no-repeat center;
}

#icn-dashboard{
    background : url('img/ico_dashboard.png') no-repeat center;
}

#icn-dashgtwy{
    background : url('img/ico_dashboard.png') no-repeat center;
}
#icn-useraccess{
    background: url('img/ico_user_access.png') no-repeat center;
}
#icn-resources{
    background : url('img/ico_resources.png') no-repeat center;
}

#icn-briefcase{
    background : url('img/ico_briefcase.png') no-repeat center;
}

#icn-briefcase-rating{
    background : url('img/ico_briefcase_rating.png') no-repeat center;
}

#icn-people{
    background : url('img/ico_people.png') no-repeat center;
}

#icn-questioner{
    background : url('img/ico_questioner.png') no-repeat center;
}

#icn-checklist{
    background : url('img/ico_checklist.png') no-repeat center;
}

#icn-tasks{
    background : url('img/ico_tasks.png') no-repeat center;
}

#icn-announcement{
    background : url('img/ico_announcement.png') no-repeat center;
}

#icn-gallery{
    background : url('img/ico_gallery.png') no-repeat center;
}

#icn-learning{
    background : url('img/ico_learning_hub.png') no-repeat center;
}

#icn-battery_full{
    background : url('img/battery_full.png') no-repeat center;
}

#icn-maps-cluster{
    background : url('img/icon-maps-cluster.png') no-repeat center;
}

#icn-battery_half{
    background : url('img/battery_half_full.png') no-repeat center;
}

#icn-battery_empty{
    background : url('img/battery_zero.png') no-repeat center;
}

#icn-signal_dn_full{
    background : url('img/signal_dn_full.png') no-repeat center;
}
#icn-signal_dn_half{
    background : url('img/signal_dn_half_full.png') no-repeat center;
}
#icn-signal_dn_empty{
    background : url('img/signal_dn_empty.png') no-repeat center;
}
#icn-signal_up_full{
    background : url('img/signal_up_full.png') no-repeat center;
}
#icn-signal_up_half{
    background : url('img/signal_up_half_full.png') no-repeat center;
}
#icn-signal_up_empty{
    background : url('img/signal_up_empty.png') no-repeat center;
}

#icn-search{
    background : url('img/ico_search.png') no-repeat center;
}

#icn-setting{
    background : url('img/btn_setting.png') no-repeat center;
}

#icn-profile{
    background : url('img/ico_profile.png') no-repeat center;
}
#icn-logout{
    background : url('img/ico_logout.png') no-repeat center;
}
#icn-profile-left{
    background : url('img/ico_profile.png') no-repeat left;
}

#icn-contracts{
    background : url('img/ico_form.png') no-repeat center;
}

#icn-kit{
    background : url('img/ico_store.png') no-repeat center;
}

#icn-folder{
    background: url('img/ico_briefcase_folder.png') center no-repeat;
}

#icn-new-folder{
    background : url('img/ico_new_folder.png') center no-repeat;
}

#icn-form{
    background : url('img/ico_form.png') no-repeat center;
}

#icn-filebox{
    background : url('img/ico_filebox.png') no-repeat center;
}

#icn-catalogue{
    background : url('img/ico_products.png') no-repeat center;
}

#icn-shopping-cart{
    background: url('img/ico_shopping_cart.png') no-repeat center;
}

#icn-account{
    background : url('img/ico_account.png') no-repeat center;
}
#icn-maintenance{
    background : url('img/ico_maintenance.png') no-repeat center;
}
#icn-cluster{
    background : url('img/ico_cluster.png') no-repeat center;
}

#device-btn-billing-manually{
    background : url('img/ico_device_billing_manually.png') no-repeat center;
}

#device-btn-add-cluster{
    background : url('img/ico_add_to_cluster.png') no-repeat center;
}

#icn-device-close-valve{
    background : url('img/ico_device_close_valve.png') no-repeat center;
}

#icn-device-interval{
    background : url('img/ico_device_clock_bg.png') no-repeat center;
}

#icn-device-details{
    background : url('img/ico_device_details.png') no-repeat center;
}

#icn-device-unsign{
    background : url('img/ico_device_unsign.png') no-repeat center;
}

#icn-gateways{
    background : url('img/icon-gateways.png') no-repeat center;
}
#icn-devices{
    background : url('img/icon-devices.png') no-repeat center;
}

#icn-billing{
    background : url('img/ico_billings.png') no-repeat center;
}

#icn-mntrequest{
    background : url('img/ico-request.png') no-repeat center;
}

#icn-accounts{
    background : url('img/ico_account.png') no-repeat center;
}
#icn-services{
    background : url('img/icon-bell.png') no-repeat center;
}
#icn-mntbranch{
    background : url('img/ico-request.png') no-repeat center;
}

#icn-usages{
    background: url('img/ico_usage.png') no-repeat center;
}

#icn-feed{
    background : url('img/ico_news_feed.png') no-repeat center;
}

#icn-locations{
    background: url('img/ico_locations.png') no-repeat center;
}

#icn-feed-url{
    background : url('img/ico_feed_url.png') no-repeat left;
}

#icn-worksheet{
    background : url('img/ico_briefcase.png') no-repeat center;    
}

#icn-aboutus{
    background : url('img/ico_account.png') no-repeat center;
}

#icn-contactus{
    background : url('img/ico_comment.png') no-repeat center;
}

#icn-feed-picture{
    background : url('img/ico_feed_pictures.png') no-repeat left;
}

#icn-feed-status{
    background : url('img/ico_feed_status.png') no-repeat left;
}

#icn-feed-achievement{
    background : url('img/ico_feed_achievements.png') no-repeat left;
}

#icn-feed-news{
    background : url('img/ico_feed_news.png') no-repeat left;
}

#icn-sat-menu{
    background : url('img/float_plus.png') no-repeat center;
}

#icn-sat-learning{
    background : url('img/bt_learning.png') no-repeat center;
}

#icn-sat-learning.satelite-item-disabled{
    background : url('img/bt_learning_disabled.png') no-repeat center;
}

#icn-sat-comment{
    background : url('img/bt_comments.png') no-repeat center;
}

#icn-sat-rating{
    background : url('img/bt_rating.png') no-repeat center;
}

#icn-sat-rating.satelite-item-disabled{
    background : url('img/bt_rating_disabled.png') no-repeat center;
}

#icn-sat-share{
    background : url('img/bt_share.png') no-repeat center;
}

#icn-sat-briefcase{
    background : url('img/bt_briefcase.png') no-repeat center;
}

#icn-sat-info{
    background : url('img/bt_info.png') no-repeat center;
}

#icn-sat-download{
    background : url('img/bt_download.png') no-repeat center;
}

#icn-learn-all{
    background : url('img/tab_all_off.png') no-repeat center;
}

#icn-learn-all:hover , #icn-learn-all.learning-button-active{
    background : url('img/tab_all_on.png') no-repeat center;
}

#icn-learn-news{
    background : url('img/tab_rss_off.png') no-repeat center;
}

#icn-learn-news:hover , #icn-learn-news.learning-button-active{
    background : url('img/tab_rss_on.png') no-repeat center;
}

#icn-learn-video{
    background : url('img/tab_video_off.png') no-repeat center;
}

#icn-learn-video:hover , #icn-learn-video.learning-button-active{
    background : url('img/tab_video_on.png') no-repeat center;
}

#icn-learn-slide{
    background : url('img/tab_slide_off.png') no-repeat center;
}

#icn-learn-slide:hover , #icn-learn-slide.learning-button-active{
    background : url('img/tab_slide_on.png') no-repeat center;
}

#icn-content-update{
    background : url('img/img_updates.png') no-repeat left;
}

#icn-most-popular{
    background : url('img/img_recommended.png') no-repeat left;
}

#icn-prev-month{
    background : url('img/btn_prev_month.png') no-repeat center;
}

#icn-next-month{
    background : url('img/btn_next_month.png') no-repeat center;
}

#icn-events{
    background : url('img/ico_events.png') no-repeat center;
}


#icon-promotion{
    background: url('img/ic_promo.png') no-repeat right;
}

#icon-promotion-left{ 
    background: url('img/ic_promo.png') no-repeat left;
}

#icon-announcement{ 
    background: url('img/ic_general_annoucement.png') no-repeat right;
}

#icon-announcement-left{ 
    background: url('img/ic_general_annoucement.png') no-repeat left;
}

#icon-event{ 
    background: url('img/ic_event.png') no-repeat right;
}

#icon-event-left{
    background: url('img/ic_event.png') no-repeat left;
}

#icon-product{ 
    background: url('img/ic_products.png') no-repeat right;
}

#icon-product-left{ 
    background: url('img/ic_products.png') no-repeat left;
}

#icon-news{ 
    background: url('img/ic_news.png') no-repeat right;
}

#icon-news-left{ 
    background: url('img/ic_news.png') no-repeat left;
}

#icon-blog{ 
    background: url('img/ic_blog.png') no-repeat right;
}

#icon-blog-left{ 
    background: url('img/ic_blog.png') no-repeat left;
}

#icon-location{
    background: url('img/ico_location.png') no-repeat left;
}

#icon-created{
    background: url('img/ico_date.png') no-repeat left;
}

#icon-attachment{
    background: url('img/btn_attach.png') no-repeat left;
}

#icon-camera{
    background: url('img/ico_camera.png') no-repeat center;
}

#icon-home-on , #icon-home-off:hover{
    background: url('img/btn_home_on.png') no-repeat center;
    background-size : 32px 32px;
}

#icon-home-off {
    background: url('img/btn_home_off.png') no-repeat center;
    background-size: 32px 32px;
}

#icon-feed-views{
    background: url('img/ico_view.png') no-repeat left;
}

#icon-feed-likes{
    background: url('img/ico_like_empty.png') no-repeat left;
}

#icon-feed-liked{
    background: url('img/ico_liked.png') no-repeat left;
}

#icon-feed-comments{
    background: url('img/ico_feed_comment.png') no-repeat left;
}

#icon-email-small{
    background: url('img/ico_email_s.png') no-repeat left;
}

#icon-location-small{
    background: url('img/ico_location_s.png') no-repeat left;
}

#icon-phone-small{
    background: url('img/ico_phone_s.png') no-repeat left;
}

#icon-time-small{
    background: url('img/ico_time_s.png') no-repeat left;
}

#icn-services{
    background-position:  center;
    background-repeat: no-repeat;
    background-size: contain;
}

#icon-info{
    background: url('img/ico_info.png') no-repeat center;
}
.icon-trash{
    background : url('img/icon-trash.png') no-repeat center;    
}

#icon-shopping-cart-small{
    background: url('img/ico_shopping_cart_small.png') no-repeat center;
    background-size: 30px 30px;
}

.icon-sharing-download{    
    background: url('img/ico_share_download.png') center no-repeat;
}
.icon-delete{    
    background : url('img/icon-delete.png') no-repeat center;
}
.icon-download{    
    background : url('img/icon-download.png') no-repeat center;
}

#icon-telp{
    background: url('img/icon-profile-telp.png') no-repeat left;
    background-size:70%;
}

#icon-alert{
    background: url('img/icon-alert.png') no-repeat left;
    background-size:40%;
    background-position: center;
}
#icon-building{
    background: url('img/icon-profile-building.png') no-repeat left;
    background-size:70%;
}
#icon-email-at{
    background: url('img/icon-profile-at.png') no-repeat left;
    background-size:70%;
}
#icon-clock{
    background: url('img/icon-profile-clock.png') no-repeat left;
    background-size:70%;
}
#icon-private{
    background: url('img/icon-profile-private.png') no-repeat left;
    background-size:70%;
}
#icon-active{
    background: url('img/icon-profile-active.png')  no-repeat left;
    background-size:70%;
}
#icon-deactive{
    background: url('img/icon-profile-disactive.png') no-repeat left;
    background-size:70%;
}
#icon-branch-date{
    background: url('img/icon-profile-date.png') no-repeat right;
    background-size:25%;
    min-height: 20px;
}

#icon-order-new{
    background: url('img/ico_new.png') no-repeat center;
}

#icon-order-done, .icon-notification-done{
    background: url('img/ico_done.png') no-repeat center;
}

#icon-order-cancelled{
    background: url('img/ico_cancelled.png') no-repeat center;
}

#icon-order-inprogress{
    background: url('img/ico_in_progress.png') no-repeat center;
}

#icon-order-paid{
    background: url('img/ico_paid.png') no-repeat center;
}

#icon-order-expired{
    background: url('img/ico_expired.png') no-repeat center;
}

#icon-order-pending{
    background: url('img/ico_in_progress.png') no-repeat center;
}

#icon-comment-event{
    background : url('img/ico_comment_event.png') no-repeat center;
}

#btn-download{
    background: url('img/icon-download.png') center no-repeat;
}

#btn-search{
    background : url('img/btn_search.png') no-repeat center;
}

#btn-refresh{
    background : url('img/btn_refresh.png') no-repeat center;
}

#btn-feedback{
    background : url('img/btn_feedback.png') no-repeat center;
}

#btn-copy{
    background : url('img/btn_copy.png') no-repeat center;
}

#btn-cut{
    background : url('img/btn_cut.png') no-repeat center;
}

#btn-paste{
    background : url('img/btn_paste.png') no-repeat center;
}

#btn-cek{
    background : url('img/btn_done.png') no-repeat center;
}

#btn-check{
    background : url('img/btn_check.png') no-repeat center;
}

#btn-share{
    background : url('img/btn_share.png') no-repeat center;
}

#btn-edit{
    background : url('img/btn_edit.png') no-repeat center;
}

#btn-add{
    background : url('img/ico_additem.png') no-repeat center;
}

#btn-export{
    background : url('img/ico_btn_export.png') no-repeat center;
}

#btn-back{
    background: url('img/icon-grid.png') no-repeat center;
}

#btn-save-billing{
    background: url('img/icon-save.png') no-repeat center;
}
#btn-calendar{
    background : url('img/btn_calendar_view.png') no-repeat center;
}

#btn-list{
    background : url('img/btn_list_view.png') no-repeat center;
}

#btn-setting{
    background : url('img/btn_setting.png') no-repeat center;
}


#btn-delete{
    background : url('img/ico_delete_content.png') no-repeat center;
}

#btn-trash{
    background : url('img/icon-trash.png') no-repeat center;    
}

#btn-confirm-small{
    background : url('img/btn_confirm_small.png') no-repeat center;
}

#btn-confirm-small-over{
    background : url('img/btn_confirm_small_over.png') no-repeat center;
}

#btn-summary{
    background : url('img/ico_summary.png') no-repeat center;
}

#btn-qrcode{
    background : url('img/btn_qr.png') no-repeat center;
}

#btn-history{
    background : url('img/btn_history.png') no-repeat center;
}

#btn-form-attachment{
    background : url('img/btn_attach.png') no-repeat center;
}

#btn-form-camera{
    background : url('img/btn_forms_camera.png') no-repeat center;
}

#btn-form-gallery{
    background : url('img/btn_forms_gallery.png') no-repeat center;
}

#btn-add-to-cart{
    background: url('img/ico_cart_outline.png') no-repeat left;
    background-size : contain;
}

#btn-sample-csv{
    background : url('img/btn_csv.png') no-repeat center;
}
#btn-delete-cluster{
    background : url('img/btn_delete_cluster.png') no-repeat center;
}

#btn-import{
    background : url('img/btn_import.png') no-repeat center;
}


#btn-print{
    background : url('img/icon-print-small.png') no-repeat center;
}

/* -------------------------  */
/* LOGIN PAGE */
.body-login{
    background: url('img/bg_login.jpg') no-repeat center;
    background-size : 100% 100%;
    width: 100%;
    height: 100%;
    min-height : 600px;
    float: left;
}

.title-login{
    width: 100%;
    float: left;
    text-align: center;
}

.title-login h1{
    width: auto;
    color: #08B1AE;
    font-weight: normal;
    font-size: 30px;
    float: left;
}

.title-login img{
    width: 360px;
    height: auto;
    margin-top: 3%;
}

.title-login-tile{
    width : 100%;
    padding : 0 20px;
    float : left;
}

.apps-name-login-tile{
    padding-top: 20px;
    font-size: 16px;
    float: left;
}

.logo-login{
    /* background: url('img/img_login_logo.png') no-repeat;*/
    width: 360px;
    height: 200px;
    margin : 3% auto 0;
}

.logo-login img{
    width: 100%;
    float: left;
}

.apps-logo-login-tile , .logo-login-tile{
    width: 80%;
    height: 50px;
    float : left;
}

.logo-login-tile{
    float : right;
}

.apps-logo-login-tile img{
    max-width: 100%;
    max-height : 50px;
    float : left;
}

.logo-login-tile img{
    max-width: 100%;
    max-height : 50px;
    float : right;
}

.form-login{
    width: 340px;
    margin : 5px auto;
}

.form-login.tile{
    width : 400px;
    margin : 15% auto;
}

.form-login input[type=text] , .form-login input[type=password] , .form-login input[type=email]{
    width : 96%;
    padding : 10px 2%;
    border: 1px solid #EBEBEB;
    border-radius : 5px;
    color : #999;
}

.form-login form{
    background : rgba(255,255,255,0.5);
    width : 90%;
    border-radius : 5px;
    padding : 5%;
    float : left;
}

.form-login.tile form{
    background : rgba(244,244,244,0.5);
}

.form-login button[type=submit] , .form-login button[type=button] , .form-login button[type=reset]{
    background: #08B1AE;
    width : 98%;
    padding: 7px 0;
    margin : 0 0 0 2%;
    border: none;
    border-radius :4px;
    color:  #FFF;
    text-align: center;
    opacity : 0.5;
    float: left;
}

.form-login button[type=submit]:hover , .form-login button[type=button]:hover , .form-login button[type=reset]:hover{
    opacity : 1;
}

.form-login .inputing{
    width: 100%;
    margin: 2px 0;
    float: left;    
}

.form-login .inputing p{
    width : 100%;
    font-size: 14px;
    text-align : center;
    color : #999;
    float : left;
}

.form-login .labeling{
    width: 12%;
    padding-top: 5px;
    color: #08B1AE;
    float: left;
}

.form-login.tile label{
    padding-top: 1px;
    padding-left: 5px;
    color: #919191;
    font-size : 14px;
    float : left;
}

.form-login input[type=radio]{
    float : left;
}

.form-login .inputing-button{
    width: 50%;
    float: left;
}

.form-login a{
    color : #08B1AE;
    margin-top: 5px;
    float: right;
}

.form-login .btn-click-register{
    margin-right : 2% !important;
    margin-left : 0 !important;
}

.form-login .btn-click-register:disabled{
    opacity : 0.2;
    cursor: not-allowed;
}

.form-login .btn-click-register:hover:disabled{
    opacity : 0.2;
}

.btn-click-forgot {    
    font-size: 14px;
    cursor: pointer;
}

.btn-click-forgot:hover{
    font-weight : bolder;
}

/* -------------------------  */

/* POPUP */
#back-nav , #back-popup , #back-content {
    z-index:8;
    position: fixed;
    display:none;
    height:100%;
    width:100%;
    background:#000000;
    top: 0;
    left: 0;
}

#back-nav{
    z-index: 6;
}

.popup-fullscreen, .popup-huge, .popup-xlarge, .popup-large , .popup-small , .popup-auto, .popup-medium{
    position : fixed;
    background : #FFF;
    display : none;
    width : 500px;
    height : 400px;
    margin : -250px 0 0 -200px;
    top : -50%;
    left : 50%;
    transition : top 1s ease-in-out;
    z-index : 9;
}

.popup-fullscreen{
    width : 100%;
    height : 100%;
    margin : 0;
    top :0;
    left : 0;
}

.popup-fullscreen .popup-content{
    width : 99%;
    height : 90%;
    padding : 0.5%;
    overflow-y: hidden;
}

.popup-huge{
    width : 95%;
    height : 85%;
    top :0;
    left : 17.5%;
}

.popup-xlarge{
    width : 75%;
    left : 27.5%;
}

#map{
    height : 100%;
}


.popup-small{
    width : 300px;
    height : auto;
    max-height : 200px;
    margin : -100px 0 0 -150px;
}

.popup-auto{
    height : auto;
    margin : -150px 0 0 -200px;
}

.popup-medium{
    width : 45%;
    height: auto;
    top : -50%;
    left : 42.5%;
}

.popup-medium .popup-content{
    height : auto;
    max-height : 600px;
    overflow: auto;
}

.popup{
    max-width: 500px;
    background: #FFF;
    border : 1px solid #D0D0D0;
    padding: 10px 0;
    color: #08B1AE;
    display: none;
    font-size: 14px;
    position: fixed;
    top: 20%;
    left: 35%;
    z-index: 9;
}

.popup-fullscreen .popup-close, .popup-xlarge .popup-close , .popup-large .popup-close , .popup-small .popup-close , .popup-auto .popup-close , .popup-huge .popup-close , .popup-medium .popup-close{
   color: #999;
   margin: -28px 10px 0;
   font-size: 14px;
   cursor: pointer;
   float: right;
}

.popup-title{
    width: 100%;
    padding : 10px 0;
    border-bottom: #EBEBEB 1px solid;
    color: #272727;
    text-align: center;
    font-size: 14px;
    float: left;
}

.popup-content{
    width: 96%;
    height : 96%;
    padding : 2%;
    float: left;
}

.popup-content.full{
    width : 100%;
    padding : 0;
}

.popup-xlarge .popup-content, .popup-large .popup-content , .popup-auto .popup-content , .popup-small .popup-content{
    max-height : 320px;
    overflow : auto;
}

.popup-auto .popup-content{
    max-height : 300px;
}

.popup-huge .popup-content{
    width : 100%;
    height : 93%;
    padding : 0;
}

.popup-confirmation{
    width : 50%;
    margin : 10px auto;
}

.popup-confirmation-full{
    width : 95%;
    margin : 0 2.5%;
    float : left;
}

.popup-confirmation .btn-popup-confirmation , .popup-confirmation-full .btn-popup-confirmation{
    background: #D0D0D0;
    width : 45%;
    margin : 3px 2px;
    padding : 10px 0;
    border : 1px solid #EBEBEB;
    border-radius : 4px;
    text-align : center;
    color : #FFF;
    cursor : pointer;
    float : left;
}

.btn-popup-confirmation.bg-base-hover:hover{
    background: #D0D0D0 !important;
}

.popup-confirmation-full .btn-popup-confirmation{
    width : 48%;
}

.popup-buttons{
    width : 100%;
    float : left;
}

.popup-buttons .popup-buttons-item{
    padding : 10px 0;
}

.loader {
   background: #EBEBEB url("img/loading.svg") no-repeat center;
   background-size : 50%;
   border-radius : 50%;
   height: 50px;
   width: 50px;
   display: none;
   z-index: 9999;
   top: 40%;
   left: 50%;
   position: absolute;
   margin-left: -10px;
}
.close {
   color: #919191;
   margin-top: -28px;
   margin-left : 10px;
   font-size: 14px;
   cursor: pointer;
   float: left;
}

.close:hover{
    color : #08B1AE;
}

#error-popup-message , #success-popup-message{
    width : 100%;
    text-align : center;
    margin : 5px 0;
    float : left;
}


.form-popup{
   width: 100%;
   float :left;
}

.form-popup .labeling{
    width: 26%;
    height: 16px;
    padding: 8px 2%;
    color: #919191;
    font-size: 14px;
    float: left;
}
.form-popup .inputing{
    width: 66%;
    padding: 0 2%;
    float: left;
}


.form-popup .inputing p {
    color : #919191;
    margin : 0;
    float : left;
}
.popup-content input[type=submit] , .popup-content input[type=button] , .popup-button {
    background: none;
    border: 0;
    color: #999;
    margin-top: -30px;
    font-size: 14px;
    cursor: pointer;
    float: right;
}

.popup-content select , .popup-content input[type=text] , .popup-content input[type=email] , .popup-content textarea , .popup-content input[type=password] , .popup-content input[type=number]  {
    width : 95%;
    border-radius : 5px;
    border: 1px solid #EBEBEB;
    color: #999;
    float : left;
}

.popup-content textarea {
    resize : none;
    overflow: auto;
}


/* POP UP SEARCH */
.form-popup #input-search-keyword{
    width: 97%;
    padding: 5px;
    float: left;
}

.search-row{
    width : 100%;
    border-bottom : 1px solid #EBEBEB;
    float : left;
}
.form-popup .options-list{
    width: 96%;
    padding: 5px 2%;
    max-height : 400px;
    overflow : auto;
    float: left;
}

.form-popup .options-list-wrapper{
    width : 95%;
    height : 0px;
    padding-left : 5%;
    overflow : hidden;
    transition:all 1s;
    -webkit-transition: -webkit-all 1s;
    transition-timing-function: ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
    float : left;
}

.form-popup .option-collapse , .form-popup .option-expand{
    background : url('img/ico_expand.png') no-repeat center;
    width : 20px;
    height: 20px;
    margin : 5px 0;
    cursor : pointer;
    float : right;
}

.form-popup .option-collapse{
    background : url('img/ico_collapse.png') no-repeat center;
}

.form-popup .options-list .option-list-1 , .form-popup .options-list .option-list-1-active ,
.form-popup .options-list .option-list-2 , .form-popup .options-list .option-list-2-active{
    background: url('img/btn_uncheck.png') no-repeat left;
    width: 90%;
    padding-left : 20px;
    margin : 5px 0;
    font-size : 14px;
    color : #919191;
    cursor : pointer;
    float: left;
}

.form-popup .options-list .option-list-2 , .form-popup .options-list .option-list-2-active{
    font-size: 14px;
    width : 40%;
}

.form-popup .options-list .option-list-1:hover , .form-popup .options-list .option-list-1-active ,
.form-popup .options-list .option-list-2:hover , .form-popup .options-list .option-list-2-active{
    background: url('img/btn_check.png') no-repeat left;
}

.form-popup .options-search .options-search-level2{
    width: 95%;
    margin-top: 10px;
    padding-left: 20px;
    float: left;
}

.options-search input[type=checkbox]{
    display: none;
    float: left;
}

.options-search label{
    background: url('img/btn_uncheck.png') no-repeat left;
    color: #666;
    font-weight: normal;
    background-size : 15px;
    padding-left: 20px;
    cursor: pointer;
    float: left;
}

.options-search input[type=checkbox]:checked + label {
    background: url('img/btn_check.png') no-repeat left;
    background-size : 15px;
    color: #08B1AE;
    font-weight: normal;
}

.search-result{
    height: 100%;
    width: 100%;
    overflow: hidden;
    float: left;
}

.search-result .search-wrapper{
    width: 100%;
    height: 100%;
    padding-right: 18px;
    overflow: auto;
    float: left;
}

.search-content , .search-content-no-result{
    border-bottom: 1px solid #EBEBEB;
    margin-left: 5px;
    padding: 5px 0;
    width: 99%;
    cursor: pointer;
    float: left;
}
.search-content:hover{
    border-radius : 0 25px 25px 0;
    margin-left: 10px;
    background: #F3F3F3;
}

.search-content .info , .search-content-no-result .info{
    width: 87%;
    float: left;
}
.search-content .path , .search-content-no-result .path{
    width: 100%;
    line-height: 20px;
    font-size: 12px;
    color: #A9A9A9;
    float: left;
}
.search-content .icon , .search-content-no-result .icon{
    margin-right: 10px;
    width: 40px;
    height: 40px;
    float: left;
}
.search-content .title , .search-content-no-result .title{
    width: 100%;
    line-height: 20px;
    color: #08B1AE;
    float: left;
}
.search-content .image , .search-content-no-result .image{
    background: url('img/btn_search_content.png') no-repeat;
    background-size : 15px;
    width: 20px;
    margin-right: 10px;
    margin-top: 8px;
    height: 40px;
    float: right;
}

/* POP UP BRIEFCASE */

.btn-save-briefcase , .btn-submit-password , .btn-submit-search{
    float : right;
}

.btn-save-briefcase:disabled{
    color : #D0D0D0;
    cursor: default;
}

.briefcase-list{
    display : none;
    width: 100%;
    float: left;
}

.form-popup .briefcase-item , .briefcase-list .briefcase-item{
    width : 100%;
    border-bottom: 1px solid #D0D0D0;
    float : left;
}

.form-popup .briefcase-item .radio-briefcase{
    display: none;
}

.form-popup .briefcase-item label{
    width: 90%;
    padding: 10px 5%;
    font-weight: normal;
    cursor: pointer;
    float: left;
}

.form-popup .briefcase-item .radio-briefcase:checked + label{
    background: #F4F4F4;
}

.briefcase-list .briefcase-item{
    padding: 2%;
    width: 96%;
    cursor: pointer;
}

.form-popup .briefcase-item .briefcase-folder-popup{
    background: url('img/ico_briefcase_folder.png') left center no-repeat;
    padding-left: 12%;
    width: 88%;
    float : left;
}

#result-briefcase{
    width: 100%;
    max-height : 400px;
    overflow-y : auto;
    overflow-x : hidden;
    float : left;
}

.form-popup .briefcase-item .briefcase-folder-popup .briefcase-folder-name { 
    width: 100%;
    color : #919191;
    font-size: 14px;
    float: left;
}

.form-popup .briefcase-item .briefcase-folder-popup .briefcase-folder-item {
    color : #919191;
    width: 100%;
    font-size: 12px;
    float: left;
}

.form-popup .briefcase-item .icon-add-new-briefcase{
    background: url('img/ico_new_folder.png') center no-repeat;
    width : 17%;
    height: 50px;
    float : left;
}

.form-popup .briefcase-item .input-new-briefcase {
    width: 70%;
    background: none;
    border: 0;
    margin-left : -2%;
    height: 40px;
    float: left;
}

.form-popup .briefcase-item .btn-save-new-briefcase {
    display : none;
    background: url('img/btn_confirm.png') center no-repeat;
    width: 50px;
    height: 50px;
    cursor : pointer;
    float: right;
}


/* -------------------------  */

/* FILL CONTENT */

/* TITLE ICON */
.title-icon {
    height : 32px;
    margin : 0 auto;
}

.title-icon .icon{
    width : 32px;
    height : 32px;
    margin-right : 10px;
    padding-top : 10px;
    float : left;
}

.title-icon .text{
    width : 150px;
    padding-top : 10px;
    font-size : 18px;
    color : #FFF;
    float : left;
}

/* DASHBOARD CONTENT */

.home-content{
    /*background : url('img/bg_home.jpg') no-repeat top;
    background-size : 100% 100%; */
    width : 100%;
    padding-top : 15%;
    height : 80%;
    float : left;
}

.home-content .home-title{
    width : 100%;
    text-align : center;
    color : #FFF;
    font-size : 18px;
    font-weight : bold;
    float : left;
}

/* GRID STYLE */
.home-grid .home-navigasi-container{
    width : 80%;
    height : 180px;
    margin : 10px auto;
    overflow : hidden;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper{
    width : 100%;
    height : 100%;
    border-right : 1px solid #FFF;
    transition : margin 1s ease-in-out;
    float : left;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box{
    padding : 0 5px;
    height : 100%;
    float : left;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item-container{
    width :100%;
    height : 100%;
    margin: 0 auto;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item-container-2{
    width : 50%;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item-container-3{
    width : 33.3%;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item-container-4{
    width : 25%;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item{
    background : #74BC6A;
    height : 100%;
    border-radius : 10px;
    cursor : pointer;
    transition : all 1s ease-in-out;
    float : left;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-4{
    width : 23%;
    margin : 0 1%;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-3{
    width : 31%;
    margin : 0 1.16%;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-2{
    width : 46%;
    margin : 0 2%;
}

.home-grid .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-1{
    width : 96%;
    margin : 0 2%;
}

.home-grid .home-navigasi-item .home-navigasi-item-title{
    width : 92%;
    padding : 10px 4%;
    font-size : 18px;
    float : left;
}

.home-grid .home-navigasi-pagination ,.home-grid .home-highlight-pagination{
    width : 80%;
    padding : 0 10%;
    text-align : center;
    margin : 10px auto;
}

.home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet , .home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet-active ,
.home-grid .home-highlight-pagination .home-highlight-pagination-bullet , .home-grid .home-highlight-pagination .home-highlight-pagination-bullet-active{
    background : #C6C6C6;
    width : 6px;
    height : 6px;
    padding : 3px;
    margin : 2px 1.5px;
    border-radius : 50%;
    cursor : pointer;
    float : left;
}

.home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet:hover , .home-grid .home-highlight-pagination .home-highlight-pagination-bullet:hover{
    background : #D0D0D0;
}
.home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet-active , .home-grid .home-highlight-pagination .home-highlight-pagination-bullet-active{
    background : #EBEBEB;
}

.home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet .bullet-active , .home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet-active .bullet-active ,
.home-grid .home-highlight-pagination .home-highlight-pagination-bullet .bullet-active , .home-grid .home-highlight-pagination .home-highlight-pagination-bullet-active .bullet-active{
    width : 100%;
    height: 100%;
    border-radius : 50%;
    float : left;
}

.home-grid .home-navigasi-pagination .home-navigasi-pagination-bullet-active .bullet-active ,
.home-grid .home-highlight-pagination .home-highlight-pagination-bullet-active .bullet-active{
    background : #272727;
}

.home-grid .home-highlight-container{
    width : 80%;
    height : 200px;
    margin : 10px auto 0;
    overflow : hidden;
}

.home-grid .home-highlight{
    width : 100%;
    height : 100%;
    transition : margin 1s ease-in-out;
    float : left;
}

.home-grid .home-highlight .home-highlight-box{
    padding : 0 5px;
    height : 100%;
    float : left;
}

.home-grid .home-highlight .home-highlight-item{
    background : #EBEBEB;
    width : 23%;
    height : 100%;
    margin : 0 1%;
    border-radius : 10px;
    cursor : pointer;
    float : left;
}

.home-grid .home-highlight .home-highlight-item .home-highlight-item-title{
    width : 92%;
    padding : 10px 4%;
    color : #FFF;
    font-size : 18px;
    float : left;
}

/* TILE STYLE */
.home-tile{
    width : 100%;
    background : #F9F9F9;
    height : 100%;
    margin : 0;
    float : left;
}

.home-tile .home-navigasi-container , .home-tile .home-highlight-container{
    width : 100%;
    height : 60%;
    float : left;
}

.home-tile .home-highlight-container {
    height : 35%;
}

.home-tile .home-navigasi-container .home-navigasi-wrapper , .home-tile .home-highlight-container .home-highlight{
    width : 99%;
    height : 99%;
    padding : 0.5%;
    float : left;
}

.home-tile .home-highlight-container .home-highlight{
    height : 94%;
    overflow : hidden;
}


.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box ,
.home-tile .home-highlight-container .home-highlight .home-highlight-wrapper{
    width : 100%;
    height : 100%;
    float : left;
}

.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box{
    overflow : hidden;
}


.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item-container ,
.home-tile .home-highlight-container .home-highlight .home-highlight-box{
    width : 100%;
    height : 100%;
    float : left;
}

.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-4 .home-navigasi-item-0 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-4 .home-navigasi-item-1 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-4 .home-navigasi-item-2 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-4 .home-navigasi-item-3 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-3 .home-navigasi-item-0 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-3 .home-navigasi-item-1 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-3 .home-navigasi-item-2 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-2 .home-navigasi-item-0 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-2 .home-navigasi-item-1{
    width : 49%;
    height: 48%;
    margin: 0.25% 0.5%;
    border-radius : 8px;
    cursor : pointer;
    float : left;
}

.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-3 .home-navigasi-item-0 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-2 .home-navigasi-item-0 ,
.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-2 .home-navigasi-item-1{
    height : 98.9%;
}

.home-tile .home-navigasi-container .home-navigasi-wrapper .home-navigasi-box .home-navigasi-item-title{
    width : 96%;
    padding : 10px 2%;
    font-size : 18px;
    float : left;
}

.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-title{
    width : 92%;
    padding : 10px 4%;
    font-size : 16px;
    float : left;
}
.home-tile .home-highlight-container .home-highlight .home-highlight-wrapper{
    width : 100%;
    height : 100%;
    overflow : hidden;
    float : left;
}

.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-4,
.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-3,
.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-2,
.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-1{
    width : 24%;
    height : 94%;
    margin : 0.5%;
    border-radius : 8px;
    cursor : pointer;
    float : left;
}

.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-3{
    width : 32.3%;
}

.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-2{
    width : 49%;
}

.home-tile .home-highlight-container .home-highlight .home-highlight-box .home-highlight-item-1{
    width : 99%;
}

.home-tile .home-navigasi-pagination , .home-tile .home-highlight-pagination{
    width : 100%;
    height : 15px;
    float : left;
}

.home-tile .home-highlight-pagination{
    margin-top : -15px;
    height : 10px;
}

.home-tile .home-navigasi-pagination .home-navigasi-pagination-wrapper ,
.home-tile .home-highlight-pagination .home-highlight-pagination-wrapper{
    width : 20%;
    height : 100%;
    margin : 10px auto;
}

.home-tile .home-navigasi-pagination .home-navigasi-pagination-wrapper .home-navigasi-pagination-item ,
.home-tile .home-highlight-pagination .home-highlight-pagination-wrapper .home-highlight-pagination-item{
    background : #919191;
    width : 45px;
    margin : 0 2.5px;
    height : 5px;
    border-radius : 5px;
    cursor : pointer;
    float : left;
}

/* HOME TILE BRIEFCASE STYLE */
.home-tile-briefcase{
    width : 100%;
    background : #FFF;
    height : 100%;
    margin : 0;
    float : left;
}

.home-tile-briefcase .home-tile-briefcase-container{
    width : 80%;
    max-width : 1040px;
    margin : 0 auto;
}

.home-tile-briefcase .home-tile-apps-name{
    padding-top:16px;
    margin-right : 20px;
    font-size: 20px;
    float : left;
}

.home-tile-briefcase .home-tile-apps-logo{
    margin-right : 10px;
    height : 50px;
    float : left;
}

.home-tile-briefcase .home-tile-apps-logo img{
    height : 100%;
    float : left;
}

.home-tile-briefcase .home-tile-user-info{
    padding-top: 20px;
    font-size : 16px;
    color : #919191;
    float : left;
}

.home-tile-briefcase .home-tile-logo{
    height : 50px;
    float : right;
}

.home-tile-briefcase .home-tile-logo img{
    height : 100%;
    float : right;
}

.home-tile-briefcase .home-tile-navigasi-container{
    background: #F9F9F9;
    border-bottom : 1px solid #EBEBEB;
}

.home-tile-briefcase .home-tile-navigasi-item{
    padding : 0 8px;
    cursor: pointer;
    float : left;
}

.home-tile-briefcase .home-tile-navigasi-item.first{
    margin-left : 0;
    height : 40px;
}

.home-tile-briefcase .home-tile-navigasi-item.last{
    margin-right: 0;
    height : 40px;
    float : right;
}

.home-tile-briefcase .home-tile-navigasi-item.active , .home-tile-briefcase .home-tile-navigasi-item:hover{
    background : #FCFCFC;
    border-right: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
}

.home-tile-briefcase .home-tile-navigasi-item .home-tile-navigasi-icon{
    width : 35px;
    height: 35px;
    float : left;
}

.home-tile-briefcase .home-tile-navigasi-item .home-tile-navigasi-label{
    padding : 12px 0;
    font-size : 14px;
    color : #919191;
    float : left;
}

.home-tile-briefcase .home-tile-subnav-container{
    background : #FCFCFC;
    position : absolute;
    top : 100px;
    border-bottom: 1px solid #EBEBEB;
    float : left;
}

.home-tile-briefcase .home-navigasi-subnav{
    display : none;
    width : 100%;
    float : left;
}

.home-tile-briefcase .home-navigasi-subnav-wrapper{
    width : 200px;
    float : left;
}

.home-tile-briefcase .home-navigasi-subnav-item{
    width : 100%;
    padding : 10px 0;
    color : #919191;
    font-size : 14px;
    cursor : pointer;
    float : left;
}

.home-tile-briefcase .home-tile-briefcase-highlight-upper{
    width : 100%;
    height : 48%;
    padding: 1% 0;
    float : left;
}

.home-tile-briefcase .home-tile-briefcase-highlight-lower{
    width : 100%;
    height : 45%;
    float : left;
}

.home-tile-briefcase .home-tile-highlight-item-title{
    width : 92%;
    padding : 10px 4%;
    font-size : 16px;
    float : left;
}

.home-tile-briefcase .home-tile-briefcase-grid-4 .home-tile-highlight-0,
.home-tile-briefcase .home-tile-briefcase-grid-4 .home-tile-highlight-1,
.home-tile-briefcase .home-tile-briefcase-grid-4 .home-tile-highlight-2,
.home-tile-briefcase .home-tile-briefcase-grid-4 .home-tile-highlight-3,
.home-tile-briefcase .home-tile-briefcase-grid-3 .home-tile-highlight-0,
.home-tile-briefcase .home-tile-briefcase-grid-3 .home-tile-highlight-1,
.home-tile-briefcase .home-tile-briefcase-grid-3 .home-tile-highlight-2,
.home-tile-briefcase .home-tile-briefcase-grid-2 .home-tile-highlight-0,
.home-tile-briefcase .home-tile-briefcase-grid-2 .home-tile-highlight-1{
    width : 49%;
    height: 48%;
    margin: 0.25% 0.5%;
    border-radius : 8px;
    cursor : pointer;
    float : left;
}

.home-tile-briefcase .home-tile-briefcase-grid-3 .home-tile-highlight-0,
.home-tile-briefcase .home-tile-briefcase-grid-2 .home-tile-highlight-0,
.home-tile-briefcase .home-tile-briefcase-grid-2 .home-tile-highlight-1{
    height : 98.9%;
}


.home-tile-briefcase .home-highlight-container{
    width : 100%;
    height : 100%;
    overflow : hidden;
    float : left;
}

.home-tile-briefcase .home-highlight{
    width : 100%;
    height : 80%;
    transition : margin 1s ease-in-out;
    float : left;
}

.home-tile-briefcase .home-highlight .home-highlight-box{
    height : 100%;
    float : left;
}

.home-tile-briefcase .home-highlight .home-highlight-item-lower{
    background : #EBEBEB;
    width : 23%;
    height : 100%;
    margin : 0 1%;
    border-radius : 10px;
    cursor : pointer;
    float : left;
}

.home-tile-briefcase .home-highlight .home-highlight-item-lower .home-highlight-item-title{
    width : 92%;
    padding : 10px 4%;
    color : #FFF;
    font-size : 16px;
    float : left;
}

.home-tile-briefcase .home-highlight-pagination{
    text-align : center;
    margin : 10px auto;
}

.home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet , .home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet-active{
    background : #C6C6C6;
    width : 6px;
    height : 6px;
    padding : 3px;
    margin : 2px 1.5px;
    border-radius : 50%;
    cursor : pointer;
    float : left;
}

.home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet:hover{
    background : #D0D0D0;
}
.home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet-active{
    background : #EBEBEB;
}

.home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet .bullet-active , .home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet-active .bullet-active{
    width : 100%;
    height: 100%;
    border-radius : 50%;
    float : left;
}

.home-tile-briefcase .home-highlight-pagination .home-highlight-pagination-bullet-active .bullet-active{
    background : #272727;
}

/* DASHBOARD CONTENT */

.dashboard-content-updates{
    width : 73%;
    padding: 0 1%;
    float : left;
}

.dashboard-recommend-content{
    width : 23%;
    padding : 0 1%;
    float : right;
}

.dashboard-title{
    width : 94%;
    padding : 10px 0 10px 40px;
    height : 20px;
    border-bottom: 1px solid #D0D0D0;
    color : #919191;
    font-size : 15px;
    float : left;
}


.content-update-list{
    width : 97%;
    padding: 10px 0;
    float : left;
}

.content-update-item{
    background: #FFF;
    width: 100%;
    margin: 5px 0;
    border: 1px solid #F6F6F6;
    cursor : pointer;
    float : left;
}
.content-update-item:hover{
    border-bottom : 4px solid;
}

.content-update-item .content-update-img{
    margin-right : 3%;
    width   : 12%;
    height  : 100px;
    float   : left;
}

.content-update-item .content-update-img .content-update-icon-img{
    background: #A9A9A9;
    width : 100px;
    height : 100px;
    float: left;
}

.content-update-item .content-update-title-content{
    width: 84%;
    float : left;
}

.content-update-item .content-update-title-type , .content-update-item .content-update-text , .content-update-item .content-update-valid{
    width: 100%;
    float : left;
}

.content-update-item .content-update-text{
    color : #919191;
    height: 40px;
    font-size : 13px;
}

.content-update-item .content-update-comment , .content-update-item .content-update-rating{
    background : url('img/ico_comment.png') no-repeat left;
    margin-top: 5px;
    margin-right : 10px;
    color : #919191;
    font-size: 13px;
    padding-left : 25px;
    float : left;
}

.content-update-item .content-update-rating{
    padding-left : 23px;
    padding-top : 2px;
    background : url('img/ico_rating.png') no-repeat left;
}

.content-update-item .content-update-title{
    width: 85%;
    padding-top: 5px;
    float : left;
    margin: 5px 0 0;
    font-size: 14px;
}

.content-update-item .content-update-desc{
    color : #919191;
    font-weight : normal;
}

.news-feeds{
    display: none;
    width : 100%;
    padding: 10px 0;
    float : left;   
}

.news-feeds .news-feeds-item{
    width : 100%;
    margin : 5px 0;
    float: left;
}

.news-feeds-item-icon {
    width: 100%;
    height : 130px;
    border : 1px solid #F6F6F6;
    margin-bottom: 10px;
    overflow: hidden;
    float: left;
}

.news-feeds-item-icon img{
    width: 100%;
    float : left;
}

.news-feeds .news-feeds-item .news-feeds-item-content{
    width : 100%;
    border-bottom : 1px solid #EBEBEB;
    cursor : pointer;
    float: left;
}

.news-feeds .news-feeds-item .news-feeds-item-content:hover{
    border-bottom : 4px solid;
}

.news-feeds-item-title , .news-feeds-item-category , .news-feeds-add-briefcase, .news-feeds-item-date{
    width: 100%;
    font-size: 14px;
    float: left;
}

.news-feeds-item-category {
    color : #919191;
}

.news-feeds-item-date {
    color : #919191;
    font-size : 13px;
    margin-bottom : 10px;
}

.news-feeds-add-briefcase{
    border-top: 1px solid #FAFAFA;
    margin-top : 5px;
    padding : 10px 5%;
    color : #E3E3E3;
    text-align : center;
}

/* NAVIGATION LEVEL 2 CONTENT */
.nav-grid .nav2-navigation-container {
    width : 90%;
    margin : 0 auto;
}

.nav-grid .nav2-navigation-box-grid{
    background : #EBEBEB;
    width : 22%;
    height : 280px;
    margin : 5px 0.5%;
    padding : 3px 1%;
    border-radius : 8px;
    cursor: pointer;
    float : left;
}

.nav-grid .nav2-navigation-box-grid .nav2-navigation-box-title{
    width : 100%;
    margin : 5px 0;
    font-size : 18px;
    color : #FFF;
    float : left;
}

.nav-grid .nav2-navigation-box-grid .nav2-navigation-box-subnav , .nav2-navigation-box-grid .nav2-navigation-box-more{
    background : rgba(255,255,255, 0.2);
    width : 90%;
    padding : 10px 5%;
    margin : 5px 0;
    border-radius : 4px;
    font-size : 16px;
    color : #FFF;
    cursor : pointer;
    float : left;
}

.nav-grid .nav2-navigation-box-grid .nav2-navigation-box-subnav:hover{
    background : rgba(255,255,255, 0.5);
}

.nav-grid .nav2-navigation-box-grid .nav2-navigation-box-more{
    background : rgba(255,255,255, 0.8) url('img/ico_show_more.png') no-repeat center;
    height: 15px;
}

.nav-grid .nav2-navigation-popup-subnav{
    width : 80%;
    margin : 5px auto;
    padding : 10px 5%;
    border : 1px solid #EBEBEB;
    border-radius : 4px;
    color : #999;
    font-size : 14px;
    cursor : pointer;
}

.nav-grid .nav2-navigation-popup-subnav:hover{
    background : #F6F6F6;
}

.nav-tile-bg{
    background : #F9F9F9;
}

.nav-tile .nav2-navigation-container{
    width : 100%;
    height : 100%;
    float : left;
}

.nav-tile .nav2-navigation-container .nav2-navigation-box , .nav-tile .nav2-navigation-container .nav3-box-item{
    border-radius : 10px;
    cursor : pointer;
}

.nav-tile .nav2-navigation-container .nav2-navigation-box-title{
    width : 94%;
    padding : 3%;
    float : left;
}

.nav-tile .nav2-navigation-tile-2 .nav2-navigation-item-0 , .nav-tile .nav2-navigation-tile-2 .nav2-navigation-item-1 ,
.nav-tile .nav2-navigation-tile-3 .nav2-navigation-item-0{
    width : 49%;
    height : 98%;
    margin : 0.5% 0.5%;
    font-size : 28px;
    float : left;
}

.nav-tile .nav2-navigation-tile-3 .nav2-navigation-item-1 , .nav-tile .nav2-navigation-tile-3 .nav2-navigation-item-2 ,
.nav-tile .nav2-navigation-tile-4 .nav2-navigation-item-0 , .nav-tile .nav2-navigation-tile-4 .nav2-navigation-item-1 ,
.nav-tile .nav2-navigation-tile-4 .nav2-navigation-item-2 , .nav-tile .nav2-navigation-tile-4 .nav2-navigation-item-3 ,
.nav-tile .nav2-navigation-tile-5 .nav2-navigation-item-0 , .nav-tile .nav2-navigation-tile-5 .nav2-navigation-item-1 ,
.nav-tile .nav2-navigation-tile-5 .nav2-navigation-item-2 , .nav-tile .nav2-navigation-tile-6 .nav2-navigation-item-0 ,
.nav-tile .nav2-navigation-tile-6 .nav2-navigation-item-1 , .nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-0{
    width : 49%;
    height : 48%;
    margin : 0.5% 0.5%;
    font-size : 28px;
    float : left;
}

.nav-tile .nav2-navigation-tile-5 .nav2-navigation-item-3 , .nav-tile .nav2-navigation-tile-5 .nav2-navigation-item-4 ,
.nav-tile .nav2-navigation-tile-6 .nav2-navigation-item-2 , .nav-tile .nav2-navigation-tile-6 .nav2-navigation-item-3 ,
.nav-tile .nav2-navigation-tile-6 .nav2-navigation-item-4 , .nav-tile .nav2-navigation-tile-6 .nav2-navigation-item-5 ,
.nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-1 , .nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-2 ,
.nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-3 , .nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-4 ,
.nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-5 , .nav-tile .nav2-navigation-tile-7 .nav2-navigation-item-6 ,
.nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-0 , .nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-1 ,
.nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-2 , .nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-3 ,
.nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-4 , .nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-5 ,
.nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-6 , .nav-tile .nav2-navigation-tile-8 .nav2-navigation-item-7{
    width : 24%;
    height : 48%;
    margin : 0.5% 0.5%;
    font-size : 22px;
    float : left;
}

/* NAVIGATION LEVEL 3 CONTENT */
.nav-tile .nav3-box{
    width : 100%;
    height : 100%;
    margin :0;
    float : left;
}

.nav-tile .nav3-box .nav3-box-wrapper{
    width : 48%;
    height : 95%;
    margin-right : 2%;
    padding : 1% 0;
    float : right;
}

.nav-tile .nav3-box .nav3-box-wrapper .nav3-box-item{
    background : rgba(255,255,255,0.4) url('img/ico_next.png') no-repeat right;
    width : 94%;
    margin : 5px 0;
    padding : 15px 3%;
    border-radius : 10px;
    font-size : 18px;
    cursor : pointer;
    float : left;
}

.nav-tile .nav3-box .nav3-box-wrapper .nav3-box-item:hover{
    background-color : rgba(255,255,255,1);
}


/* NAVIGATION LEVEL 4 CONTENT */

.content-tabs .nav4-navigation-container{
    max-width : 98%;
    margin : 0 auto;
    opacity : 0;
}

.content-tabs .nav4-navigation-box , .content-tabs .nav4-navigation-box-active{
    background : #E0E0E0;
    padding : 7px 15px;
    margin : 5px 5px;
    border-radius : 4px;
    font-size : 14px;
    color : #FFF;
    cursor : pointer;
    float : left;
}

.content-tabs .nav4-navigation-box-active , .content-tabs .nav4-navigation-box:hover{
    background : #97468B;
}

.content-scrollbar .nav4-navigation-container{
    position : fixed;
    width : 100%;
    bottom : 0;
    border-top : #000 solid 4px;
    background : #272727;
    float: left;
}

.content-scrollbar .nav4-navigation-box , .content-scrollbar .nav4-navigation-box-active{
    border-top : #000 solid 4px;
    padding : 9px 25px 15px;
    font-size : 16px;
    color : #919191;
    cursor : pointer;
    float : left;
}

.content-scrollbar .nav4-navigation-box-active{
    background: #464646;
}

.content-scrollbar .nav4-navigation-wrapper{
    width : 92%;
    margin-top : -4px;
    height : 36px;
    overflow: hidden;
    float : left;
}

.content-scrollbar .nav4-navigation-prev , .content-scrollbar .nav4-navigation-next{
    width : 20px;
    height : 20px;
    margin : 6px;
    cursor : pointer;
    float: left;
}
/* NAVIGATION LEVEL 5 CONTENT */
.nav5-navigation-container{
    max-width : 90%;
    margin : 0 auto;
    opacity : 1;
}

.nav5-navigation-box{
    width : 24%;
    height : 230px;
    margin : 5px 4px;
    border : 1px solid #EBEBEB;
    border-radius : 8px;
    cursor: pointer;
    opacity : 0;
    float : left;
}

.nav5-navigation-box .nav5-navigation-box-title{
    width : 90%;
    height : 65px;
    margin : 10px 0 5px;
    padding : 0 5%;
    font-size : 18px;
    color : #272727;
    float : left;
}

.nav5-navigation-box .nav5-navigation-box-icon{
    width : 100%;
    height : 150px;
    border-radius : 0  0 8px 8px;
    overflow : hidden;
    float : left;
}

.nav5-navigation-box .nav5-navigation-box-icon img{
    display : block;
    float : left;
}

/* RESOURCE CONTENT */
.resource-blank{
    background : url('img/img_select_resource.png') no-repeat center;
    width : 100%;
    height : 100%;
}

/* GALLERY CONTENT */
.gallery-blank, .filebox-blank{
    background : url('img/img_select_album.png') no-repeat center;
    width : 100%;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.cluster-blank{
    background : url('img/ico_cluster_big.png') no-repeat center;
    width : 100%;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

/* BRIEFCASE CONTENT */
.briefcase-blank , .briefcase-empty{
    background : url('img/img_select_folder.png') no-repeat center;
    width : 100%;
    height : 100%;
    float : left;
}

.briefcase-blank{
    background : url('img/img_select_folder.png') no-repeat center;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
}

.briefcase-item-box{
    width : 19%;
    margin : 10px 0.5%;
    border: 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.briefcase-item-box .briefcase-box-img{
    width : 100%;
    height : 150px;
    border-bottom: 1px solid #EBEBEB;
    overflow : hidden;
    float : left;
}

.briefcase-item-box .briefcase-box-img img{
    width : 100%;
    height : 100%;
    float : left;
}

.briefcase-item-box .briefcase-box-title , .briefcase-item-box .briefcase-box-section{
    width : 90%;
    padding : 2px 5%;
    font-size : 15px;
    color : #919191;
    float : left;
}

.briefcase-item-box .briefcase-box-section{
    font-size: 14px;
    color : #919191;
}

.briefcase-item-box .briefcase-box-delete{
    display : none;
    background : url('img/ico_delete_content.png') no-repeat center;
    width : 32px;
    height : 32px;
    margin-top : -150px;
    cursor : pointer;
    float : right;
}

.briefcase-item-box .briefcase-box-rating{
    width : 100%;
    padding : 8px 0 5px;
    border-top : 1px solid #EBEBEB;
    font-size : 15px;
    color : #919191;
    float : left;
}

.briefcase-item-box .briefcase-box-rating .briefcase-icon-rating{
    width : 35px;
    height : 35px;
    margin : -8px 3px 0 5%;
    float : left;
}

.briefcase-item-box .briefcase-box-mark{
    display : none;
    width : 100%;
    height : 2px;
    float : left;
}

.briefcase-item-box:hover .briefcase-box-mark{
    display : block;
    
}

.briefcase-input-folder-name{
    width : 80%;
    margin : 20px auto;
}

.briefcase-input-folder-name label{
    margin : 5px 10px;
    color : #919191;
    font-size: 14px;
    float : right;
}

.briefcase-input-folder-name input[type=text]{
    width : 70%;
    padding : 5px 10px;
    border : 0;
    border-radius : 10px;
    background : #EBEBEB;
    color : #919191;
    font-size: 14px;
    float: left;
}

/* ANNOUNCE CONTENT */
.announce-blank{
    width : 100%;
    margin-top : 20%;
    font-size : 20px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.announce-list{
    width : 98%;
    padding: 10px 0;
    float : left;
}

.announce-item{
    background: #FFF;
    width: 100%;
    margin: 5px 0;
    border: 1px solid #F6F6F6;
    cursor : pointer;
    float : left;
}
.announce-item:hover{
    border-bottom : 4px solid;
}
.announce-item .announce-img{
    margin-right : 3%;
    width   : 10%;
    height  : 100px;
    float   : left;
}

.announce-item .announce-img .announce-icon-img{
    background: #A9A9A9;
    width : 100px;
    height : 100px;
    float: left;
}

.announce-item .announce-title-content{
    width: 85%;
    float : left;
}

.announce-item .announce-title-type , .announce-item .announce-valid , .announce-item .announce-message{
    width: 100%;
    float : left;
}

.announce-item .announce-valid{
    margin-top: 5px;
    color : #919191;
    font-size: 12px;
}


.announce-item .announce-title{
    width: 85%;
    padding-top: 5px;
    float : left;
    margin: 5px 0 0;
    font-size: 14px;
}

.announce-item .announce-message{
    margin: 5px 0 0;
    color : #919191;    
    font-size: 14px;
}

.announce-item .announce-type{
    width : 25px;
    height : 25px;
    margin: 5px 0 0;
    text-align: right;
    color : #919191;    
    font-size: 14px;
    float: right;
}

.calendar-month{
    width : 200px;
    height : 30px;
    margin : 0 auto;
}

.calendar-month .calendar-month-slide{
    width : 20px;
    height: 20px;
    cursor : pointer;
    float: left;
}

.calendar-month .calendar-month-text{
    width : 160px;
    font-size : 14px;
    text-align : center;
    float :left; 
}

.calendar-week-title , .calendar-week{
    width: 100%;
    float : left;
}

.calendar-day-title , .calendar-day{
    display : none;
    width : 14.21%;
    text-align : right;
    font-size: 14px;
    float : left;
}

.calendar-day {
    color : #919191;
    border-right : 1px solid #EBEBEB;
    border-top : 1px solid #EBEBEB;
    cursor : pointer;
}

.calendar-day-1{
    border-left : 1px solid #EBEBEB;
}

.calendar-day:hover{
    background : #F6F6F6;
}

.calendar-day .day-6, .calendar-day .day-7{
    color : #EBEBEB;
}

.calendar-day-title .calendar-day-content, .calendar-day .calendar-day-content{
    width : 90%;
    height : 18%;
    padding : 1% 5%;
    float : left;
} 

.calendar-day .calendar-day-event{
    width : 90%;
    height : 58%;
    padding : 1% 5%;
    float : left;
}

.calendar-day .calendar-day-event .day-event{
    width : 10px;
    height : 10px;
    border-radius : 50%;
    margin-top : 5px;
    float : right;
}
.calendar-day .calendar-day-today{
    background : #EBEBEB;
    width : 90%;
    height : 20%;
    padding : 0 5%;
    font-size: 14px;
    text-align: center;
    color : #FFF;
    float : left;
}

.calendar-events{
    width : 100%;
    border-left : 1px solid #EBEBEB;
    overflow : auto;
    float : left;
}

.calendar-events .calendar-event-empty{
    background : url('img/ico_calendar_empty.png') no-repeat top;
    width : 100%;
    height : 150px;
    margin-top : 80%;
    padding-top : 100px;
    font-size: 14px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.calendar-events .calendar-events-list{
    width : 90%;
    padding : 10px 5%;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-today{
    width : 100%;
    font-size : 14px;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item{
    width : 100%;
    margin : 5px 0;
    border : 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item:hover{
    border-bottom : 4px solid;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-img{
    width : 100%;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-img img{
    width : 100%;
    max-height : 180px;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-content{
    background : #FFF;
    width : 90%;
    padding : 10px 5%;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-content .calendar-event-item-type{
    width : 80%;
    padding-left : 15%;
    margin : 5px 0;
    font-size : 16px;
    color : #919191;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-content .calendar-event-item-title{
    width : 100%;
    margin : 5px 0;
    font-size : 14px;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-content .calendar-event-item-message{
    width : 100%;
    margin : 5px 0;
    font-size: 14px;
    color : #919191;
    float : left;
}

.calendar-events .calendar-events-list .calendar-event-item .calendar-event-content .calendar-event-item-valid{
    width : 100%;
    margin : 5px 0;
    font-size : 12px;
    color : #919191;
    float : left;
}

/* FORMS CONTENT */
.forms-item-box{
    width : 18.5%;
    margin : 5px 0.5%;
    border: 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.forms-item-box .forms-box-img{
    width : 100%;
    height : 150px;
    border-bottom: 1px solid #EBEBEB;
    overflow : hidden;
    float : left;
}

.forms-item-box .forms-box-img img{
    width : 100%;
    height : 100%;
    float : left;
}

.forms-item-box .forms-box-title , .forms-item-box .forms-box-section{
    width : 90%;
    padding : 2px 5%;
    font-size : 15px;
    color : #919191;
    float : left;
}

.forms-item-box .forms-box-section{
    font-size: 14px;
    color : #919191;
}

.forms-item-box .forms-box-valid{
    width : 90%;
    padding : 5px 5%;
    border-top : 1px solid #EBEBEB;
    font-size : 14px;
    color : #919191;
    float : left;
}

.forms-info-container{
    width : 50%;
    margin : 0 auto;
}

.forms-info{
    width : 24%;
    padding : 5px 4.5%;
    font-size : 14px;
    color : #919191;
    float : left;
}

.forms-attach-information{
    background : #FFF;
    position : absolute;
    bottom : 0;
    left : 5%;
    width : 90%;
    padding :10px 0;
    border-top : 1px solid #EBEBEB;
    font-size : 14px;
    color : #919191;
    text-align : center;
}

.forms-scanner{
    padding : 10px;
    float : left;
}

.forms-scanner .scanner-label{
    padding : 10px;
    margin: 0 10px;
    font-size : 14px;
    color : #919191;
    float : left;
}

.forms-scanner .scanner-button{
    background : #EBEBEB;
    width : 100px;
    padding : 10px;
    margin : 0 5px;
    border-radius : 4px;
    font-size : 14px;
    color : #FFF;
    text-align : center;
    cursor : pointer;
    float : left;
}

.forms-locations {
    padding : 10px;
    margin-right : 20px;
    float : right;
}

.forms-locations .locations-icon{
    width : 30px;
    height : 30px;
    margin-top : 3px;
    float : left;
}

.forms-locations .locations-name{
    padding : 10px;
    font-size : 14px;
    color : #919191;
    float : left;
}

.forms-locations .locations-button{
    background : #EBEBEB;
    width : 80px;
    padding : 10px;
    margin : 0 5px;
    border-radius : 4px;
    font-size : 14px;
    color : #FFF;
    text-align : center;
    cursor : pointer;
    float : left;
}

.forms-locations-marker{
    background : #FFF url('img/ico_marker.png') no-repeat left;
    position : absolute;
    bottom : 20px;
    left : 36%;
    width : 23%;
    padding : 25px 0 25px 70px;
    font-size : 16px;
    color : #919191;
}

.list-attach-item{
    width :100%;
    list-style : none;
    padding : 0;
    margin : 0;
    float : left;
}

.list-attach-item li{
    display : inline;
    width : 100px;
    height : 100px;
    margin : 5px;
    overflow : hidden;
    float : left;
}

.list-attach-item li img{
    min-width : 100%;
    height: 100%;
    float : left;
}

.scanner-box , .capture-box , .capture-canvas{
    width : 100%;
    height : 300px;
    float : left;
}

.capture-canvas{
    width : 640px;
    height : 480px;
}
.image-result {
    width : 100%;
    float : left;
}

.image-result img{
    display : block;
    width : 75%;
    margin : 0 auto;
}

.forms-btn-attachment{
    width : 150px;
    margin : 0 5px;
    padding-top : 75px;
    font-size : 14px;
    color : #919191;
    text-align : center;
    cursor : pointer;
    float : left;
}

.forms-btn-snap-wrapper-left , .forms-btn-snap-wrapper-right{
    position: absolute;
    bottom : 0;
}
.forms-btn-snap-wrapper-left{
    left : 0;
}
.forms-btn-snap-wrapper-right{
    right: 0;
}

.forms-btn-snap{
    background : #FFF;
    width : 100%;
    padding : 10px 0;
    height : auto;
    border : 1px solid #EBEBEB;
    font-size : 14px;
    color : #919191;
    text-align : center;
    cursor : pointer;
    float : left;
}

.forms-btn-snap:hover{
    color : #FFF;
}

/* KIT CONTENT */
.kit-blank{
    width : 100%;
    margin-top : 20%;
    font-size : 20px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.kit-welcome-title, .kit-welcome-subtitle{
    width : 100%;
    margin-top :10%;
    font-size : 28px;
    text-align : center;
    float : left;
}

.kit-welcome-subtitle{
    margin-top : 20px;
    font-size : 16px;
}

.kit-btn-check-domain{
    margin : 8px 50px 0 0;
    color : #919191;
    font-size : 14px;
    cursor : pointer;
    float : right;
}

.kit-create-store{
    background : #EBEBEB;
    width: 200px;
    border-radius : 5px;
    padding : 10px 15px;
    text-align : center;
    color : #FFF;
    font-size : 20px;
    margin : 0 auto;
    cursor : pointer;
}

.kit-subdomain-check , .kit-subdomain-cross{
    display : none;
    background : #56D66F;
    width : 20px;
    height :17px;
    margin-top : 3px;
    padding-top : 3px;
    border-radius : 50%;
    font-size : 10px;
    color : #FFF;
    text-align : center;
    float : left;
}

.kit-subdomain-cross{
    background : red;
}

.kit-create-text{
    width : 100%;
    margin : 0;
    font-size : 16px;
    color : #919191;
    text-align : center;
    float : left;
}

.kit-create-note{
    width : 90%;
    margin : 0;
    padding : 0 0 0 20px;
    font-size : 14px;
    color : #919191;
    float : left;
}

.kit-store-content{
    width : 100%;
    margin : 0 auto;
    min-height: 200px;
}

.kit-form-title , .kit-form-text{
    width: 95%;
    padding-top : 8px;
    padding-left : 5%;
    font-size : 14px;
    color : #999;
    float : left;
}
.kit-form-title a{color : #999;}

.kit-form-input{
    width : 100%;
    float : left;
}

.kit-form-input input[type=text]{
    width : 93%;
    border : 1px solid #EBEBEB;
    border-radius : 5px;
}

.kit-form-input textarea{
    width : 94%;
    height : 80px;
    border : 1px solid #EBEBEB;
    border-radius : 5px;
    resize : none;
    float : left;
}

.kit-form-input .kit-button-icon-small{
    background : none;
    border : none;
    width : 32px;
    height: 32px;
    cursor : pointer;
    float : left;
}

.kit-form-error {
    display : none;
    padding : 5px 0 5px 0px;
    font-size : 14px;
    float : left;
}
.kit-form-information{
    width: 95%;
    padding-left : 5%;
    margin-top : 5px;
    font-size: 12px;
    color : #999;
    float : left;
}
.kit-form-image , .kit-form-image-bg{
    width : 100%;
    overflow: hidden;
    float : left;
}

.kit-form-image-bg {
    background : #EBEBEB;
    padding : 5px;
}
.kit-form-image-bg img {
    width : 100%;
    float : left;
}
.kit-form-image img{
    width : 95%;
    float : left;
}

.kit-form-image .kit-form-no-cover {
    background : #FAFAFA;
    width : 95%;
    height : 85%;
    padding-top : 15%;
    font-size : 30px;
    color : #E3E3E3;
    text-align : center;
    float: left;
}

.kit-form-button , .kit-form-button-submit , .kit-form-image .kit-form-upload-image{
    background : #FFF;
    margin-top : 0px;
    border: 1px solid #EBEBEB;
    border-radius : 8px;
    padding : 5px 15px;
    color : #999;
}

.kit-form-button:hover , .kit-form-button-submit:hover {
    color : #FFF;
}

.kit-form-button-submit{
    background : #EBEBEB;
}

.kit-store-cover{
    width : 100%;
    overflow: hidden;
    float : left;
}

.kit-store-cover .kit-form-no-cover {
    background : #FAFAFA;
    width : 95%;
    height : 85%;
    padding-top : 15%;
    font-size : 30px;
    color : #E3E3E3;
    text-align : center;
    float: left;
}

.kit-store-cover img{
    width : 95%;
    float : left;
}

.kit-store-cover-action{
    width : 90%;
    margin-top : -20%;
    padding : 0 5%;
    float : left;
}

.kit-store-cover-action .kit-avatar{
    background : #FFF;
    width : 100px;
    height : 100px;
    border-radius : 50%;
    border : 2px solid #FFF;
    overflow: hidden;
    float : left;
}

.kit-store-cover-action .kit-avatar img{
    width : 100%;
    min-height : 100%;
    float : left;
}

.kit-store-cover-action .kit-store-action-button-left , .kit-store-cover-action .kit-store-action-button-right{
    background : #FFF;
    padding : 8px 10px;
    border-radius : 5px;
    color : #919191;
    font-size : 14px;
    cursor : pointer;
    float : left;
}

.kit-store-cover-action .kit-store-action-button-left:hover , .kit-store-cover-action .kit-store-action-button-right:hover{
    color : #FFF;
}

.kit-store-cover-action .kit-store-action-button-left{
    margin-left : -2px;
}

.kit-store-cover-action .kit-store-action-button-right{
    margin-right : 20px;
    float : right;
}

.posting-tab{
    display : none;
    height : 0px;
    -webkit-transition: height 1s linear ; /* Safari */
    transition: height 1s linear ;
    overflow: hidden;
}

.kit-feeds-input-container{
    width : 620px;
    margin: 0 auto;
}

.kit-feeds-button{
    padding : 20px 10px 20px 60px;
    border-bottom : 1px solid #EBEBEB;
    font-size: 16px;
    color : #919191;
    cursor : pointer;
    float : left;
}


.kit-feeds-delete{
    display : none;
    position : relative;
    background : url('img/ico_delete_content.png') center no-repeat;
    width : 20px;
    height : 20px;
    cursor : pointer;
    float : right;
}

.kit-timeline{
    width : 92%;
    padding : 10px 2%;
    margin : 5px 0;
    border : 1px solid #EBEBEB;
    float: left;
}

.kit-timeline .kit-timeline-profile{
    width : 100%;
    float : left;
}

.kit-timeline .kit-timeline-profile .kit-timeline-avatar{
    width : 8%;
    height : 45px;
    float : left;
}

.kit-timeline .kit-timeline-profile .kit-timeline-avatar-box{
    background : #EBEBEB;
    width : 40px;
    height : 40px;
    border-radius : 50%;
    padding : 2px;
    overflow : hidden;
    float : left;
}

.kit-timeline .kit-timeline-profile .kit-timeline-avatar-box img{
    width : 100%;
    border-radius : 50%;
    float : left;
}

.kit-timeline .kit-timeline-profile .kit-timeline-information{
    width : 90%;
    padding-bottom : 10px; 
    float : left;
}

.kit-timeline .kit-timeline-profile .kit-timeline-information .kit-timeline-information-name , 
.kit-timeline .kit-timeline-profile .kit-timeline-information .kit-timeline-information-date{
    width : 100%;
    color : #919191;
    font-size : 14px;
    float : left;
}

.kit-timeline .kit-timeline-profile .kit-timeline-information .kit-timeline-information-date{
    margin-top : 3px;
    font-size : 12px;
}

.kit-timeline .kit-timeline-profile .kit-timeline-icon{
    width : 64px;
    height : 64px;
    float : right;
}

.kit-timeline-feeds{
    width : 100%;
    padding : 5px 0;
    float : left;
}

.kit-timeline-feeds .kit-timeline-feeds-title , .kit-timeline-feeds .kit-timeline-feeds-desc{
    width : 100%;
    margin : 5px 0;
    font-size : 14px;
    color : #919191;
    float : left;
}

.kit-timeline-feeds .kit-timeline-feeds-title , .kit-timeline-feeds .kit-timeline-feeds-title a{
    color : #919191;
    font-weight: bold;
}


.kit-timeline-feeds .kit-timeline-feeds-picture{
    background : #EBEBEB;
    max-width : 98%;
    padding : 5px;
    margin : 5px 0;
    float : left;
}

.kit-timeline-feeds .kit-timeline-feeds-picture img{
    width : 100%;
    float : left;
}
.kit-timeline-feeds .kit-timeline-feeds-frame{
    width : 100%;
    margin : 5px 0;
    float : left;
}

.kit-timeline-feeds .kit-timeline-feeds-frame iframe{
    width : 400px;
    height : 250px;
    border : none;
    float : left;
}

.kit-order-status-box{
    width : 21%;
    margin : 0 1.5%;
    border : 1px solid #EBEBEB;
    float : left
}

.kit-order-status-box .kit-order-status-box-unread, .kit-order-status-box .kit-order-status-box-read,
.kit-order-status-box .kit-order-status-box-confirmed {
    background : #EBEBEB;
    width : 15%;
    height : 26px;
    float : left;
}

.kit-order-status-box .kit-order-status-box-text{
    width : 80%;
    padding : 5px 2%;
    color : #919191;
    font-size : 14px;
    float: left;
}

.kit-timeline-order{
    width : 90%;
    padding : 0 5%;
    float : left;
}

.kit-timeline-order .kit-order-item{
    width : 100%;
    height : 30px;
    margin : 5px 0;
    border: 1px solid #EBEBEB;
    cursor: pointer;
    float : left;
}

.kit-timeline-order .kit-order-item .kit-order-item-status-read , .kit-timeline-order .kit-order-item .kit-order-item-status-confirmed{
    width : 5%;
    height : 100%;
    float : left;
}

.kit-timeline-order .kit-order-item .kit-order-item-status-read{
    background : #EBEBEB;
}

.kit-order-status-box .kit-order-status-box-confirmed, .kit-timeline-order .kit-order-item .kit-order-item-status-confirmed{
    background : #56D66F;
}

.kit-timeline-order .kit-order-item .kit-order-item-profile{
    width : 66%;
    height : 17px;
    padding : 6.5px 2%;
    font-size : 14px;
    color : #919191;
    float : left;
}

.kit-timeline-order .kit-order-item .kit-order-item-time{
    width : 20%;
    border-left : 1px solid #EBEBEB;
    height : 17px;
    padding : 6.5px 2%;
    font-size : 12px;
    color : #919191;
    text-align : right;
    float: right;
}

.kit-order-container{
    width: 96%;
    border : 1px solid #EBEBEB;
    float : left;
}

.kit-order-container .kit-order-top-action{
    width : 97%;
    padding : 10px 3% 10px 0;
    float : left;
}

.kit-order-container .kit-order-top-action .kit-order-action{
    margin : 0 5px;
    color : #FFF;
    font-size : 14px;
    cursor : pointer;
    float: right;
}

.kit-order-container .kit-order-top-action .kit-order-action:hover{
    font-weight: bold;
}

.kit-order-container .kit-order-top-action .kit-order-action-separator{
    width: 1px;
    height : 15px;
    margin : 0 5px;
    border-right: 1px solid #FFF;
    float: right;
}

.kit-order-container .kit-order-content{
    width : 96%;
    padding : 0 2%;
    float: left;
}

.kit-order-container .kit-order-logo{
    width : 90%;
    float : left;
}

.kit-order-container .kit-order-logo img{ 
    max-height : 75px;
    float: left;
}

.kit-order-container .kit-order-info-box{
    width : 100%;
    border : 1px solid #EBEBEB;
    float : left
}

.kit-order-container .kit-order-top-info-id , .kit-order-container .kit-order-top-info-date{
    margin : 3px 0;
    width : 100%;
    color : #919191;
    font-size : 32px;
    text-align : right;
    float : right;
}

.kit-order-container .kit-order-top-info-id{
    padding-bottom : 5px;
    border-bottom : 1px solid #EBEBEB;
}
.kit-order-container .kit-order-top-info-id r{
    margin-right : 10px;
    font-weight : bold;
}

.kit-order-container .kit-order-top-info-date{
    font-size : 14px;
}

.kit-order-container .kit-order-triangle{
    width: 0;
    height: 0;
    border-bottom: 75px solid #EBEBEB;
    border-left: 75px solid transparent;
    float : right;
}

.kit-order-container .kit-order-top-info-total{
    background : #EBEBEB;
    width : 75%;
    padding : 5px 10px; 
    height : 65px;
    color: #919191;
    font-size : 28px;
    text-align : right;
    float : right;
}

.kit-order-container .kit-order-top-info-buyer{
    width : 75%;
    padding : 5px 10px; 
    height : 65px;
    color: #919191;
    font-size : 28px;
    float : left;
}

.kit-order-container .kit-order-top-info-total r , .kit-order-container .kit-order-top-info-buyer r{
    font-size : 20px;
}

.kit-order-container .kit-order-info-list , .kit-order-container .kit-member-info-list{
    width : 100%;
    padding : 5px 0;
    margin : 5px 0;
    border-bottom : 1px solid #EBEBEB;
    float: left;
}

.kit-order-container .kit-member-info-list{
    border : none;
    font-size : 14px;
    color : #919191;
    float : left;
}

.kit-order-container .kit-member-info-list .kit-member-info-list-title{
    width : 30%;
    float : left;
}

.kit-order-container .kit-member-info-list .kit-member-info-list-member{
    width : 70%;
    float : left;
}

.kit-order-container .kit-order-info-list .kit-order-info-list-title{
    font-size : 16px;
    text-transform : uppercase;
    float : left;
}

.kit-order-container .kit-order-info-list .kit-order-info-list-item{
    font-size : 14px;
    color : #919191;
    float : left;
}

.kit-order-container .kit-order-info-list .kit-order-info-list-name{
    width: 40%;
}

.kit-order-container .kit-order-info-list .kit-order-info-list-qty{
    width : 10%;
    text-align : center;
}

.kit-order-container .kit-order-info-list-action{
    width : 33.33%;
    padding : 10px 0;
    border-bottom : 1px solid #EBEBEB;
    color : #919191;
    font-size : 14px;
    text-align : center;
    cursor : pointer;
    float : left;
}

.kit-order-container .kit-order-info-list .kit-order-info-list-price , 
.kit-order-container .kit-order-info-list .kit-order-info-list-price-item , 
.kit-order-container .kit-order-info-list .kit-order-info-list-total , 
.kit-order-container .kit-order-info-list .kit-order-info-list-total-item{
    width : 20%;
    text-align : right;
}

.kit-order-container .kit-order-info-list .kit-order-info-list-notes , .kit-order-container .kit-order-info-list .kit-order-info-list-history,
.kit-order-container .kit-order-info-list .kit-order-info-list-review{
    width : 100%;
}

.kit-order-container .kit-rating , .kit-order-container .kit-rating-active{
    background: url('img/img_rating_off.png') no-repeat left;
    background-size: 20px;
    padding-left: 30px;
    padding-top: 7px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    float: left;
}

.kit-order-container .kit-rating-active{
    background : url('img/img_rating_on.png') no-repeat left;
    background-size: 20px;
}

.kit-order-container .kit-review{
    padding-top : 7px;
}

.kit-order-container .kit-order-info-contact{
    width : 90%;
    padding : 10px 5%;
    float : left;
}

.kit-order-container .kit-order-info-contact .kit-order-info-contact-name{
    width : 100%;
    padding-bottom: 5px;
    border-bottom: 1px solid #EBEBEB;
    margin : 5px 0;
    font-size: 14px; 
    color : #919191;
    float : left;
}

.kit-order-container .kit-order-info-contact .kit-order-info-contact-other{
    width : 100%;
    margin : 5px 0;
    font-size: 14px; 
    color : #919191;
    float : left;
}

#tab-product-selection{
    width: 300px;
}

.kit-options-tab{
    margin : 0 auto;
}

.kit-options-tab .kit-options-item{
    width : 49%;
    padding : 10px 0;
    font-size : 14px;
    color : #919191;
    text-align: center;
    cursor: pointer;
    float : left;
}

.kit-options-tab .kit-options-item.first{
    border-radius : 4px 0 0 4px;
    border : 1px solid #EBEBEB;
}

.kit-options-tab .kit-options-item.last{
    border-radius : 0 4px 4px 0;
    border-top : 1px solid #EBEBEB;
    border-bottom : 1px solid #EBEBEB;
    border-right : 1px solid #EBEBEB;
}

.kit-product-list-title{
    margin : 10px 0;
    font-size : 14px;
    color : #919191;
}

.kit-product-list-item{
    width: 18%;
    margin: 5px 1%;
    border : 1px solid #EBEBEB;
    border-radius : 4px 4px 0 0;
    float: left;
}

.kit-product-list-item-unselect,  .kit-product-list-item-selected{
    background: #FFF url('img/btn_confirm_small.png') no-repeat top;
    position: relative;
    width: 32px;
    height: 35px;
    margin-bottom: -50px;
    border-radius: 0 0 50% 50%;
    cursor : pointer;
    float : right;
}

.kit-product-list-item-selected{
    background: #FFF url('img/btn_confirm_small_over.png') no-repeat top;
}


.kit-product-list-item .kit-product-list-item-thumb{
    width : 100%;
    height : 175px;
    border-radius : 4px 4px 0 0;
    overflow: hidden;
    float : left;
}

.kit-product-list-item .kit-product-list-item-thumb img{
    display : block;
    width : 100%;
    min-height : 100%;
    margin : 0 auto;
}

.kit-product-list-item .kit-product-list-item-title{
    width : 95%;
    padding : 10px 2.5%;
    font-size : 14px;
    color : #919191;
    cursor : pointer;
    float: left;
}

/* CUSTOMERS CONTENT */
.customers-container{
    background : #F4F4F4;
    width : 96%;
    padding : 2%;
    float : left;
}

.customers-container-no-padd{
    width : 100% !important;
    padding : 0px !important;
}

.customers-container .customers-title{
    margin-right : 10px;
    font-size : 16px;
    font-weight : bold;
    float : left;
}

.customers-container .customers-subtitle{
    margin-right : 10px;
    font-size : 14px;
    font-weight : bold;
    float : left;
}

.customers-container .customers-search-field{
    width : 100%;
    float : left;
}

.customers-container .customers-payment-field{
    width : 95%;
    padding : 10px 2.5%;
    border : 1px solid #EBEBEB;
    opacity : 0.7;
    float : left;
}

.customers-container .customers-search-field .customers-search-field-input ,
.customers-container .customers-payment-field .customers-payment-field-input{
    width : 92%;
    float : left;
}

.customers-container .customers-search-field .customers-search-field-input input[type=text] ,
.customers-container .customers-payment-field .customers-payment-field-input input[type=text]{
    width : 92%;
    padding : 5px 4%;
    float : left;
}

.customers-container .customers-search-field .customers-search-field-input input[type=checkbox] ,
.customers-container .customers-payment-field .customers-payment-field-input input[type=checkbox] ,
.customers-container .customers-payment-field .customers-payment-field-input input[type=radio]{
    margin : 0 5px 0 0;
    float : left;
}

.customers-container .customers-search-field .customers-search-field-input .label-checkbox ,
.customers-container .customers-payment-field .customers-payment-field-input .label-checkbox ,
.customers-container .customers-payment-field .customers-payment-field-input .label-radio{
    margin-left: 5px;
    color : #919191;
    font-size: 12px;
    float : left;
}

.customers-container .customers-payment-field .customers-payment-field-input .label-checkbox{
    font-size : 14px;
}

.customers-container .customers-payment-field .customers-payment-field-input .label-radio{
    margin : 0;
}

.customers-container .customers-search-field .customers-search-field-button,
.customers-container .customers-search-field .payment-search-field-button,
.customers-container .customers-search-field .orders-search-field-button{
    width : 100%;
    padding : 7px 0;
    font-size : 14px;
    color : #FFF;
    text-align : center;
    cursor : pointer;
    float : left;
}
/* LOG001 SALESKIT PRINTING CUSTOMER DETAIL */
.customers-container .customers-btn-add , .customers-container .customers-btn-edit ,
.customers-container .customers-btn-print , .customers-container .contracts-btn-add ,
.customers-container .treatments-btn-add , .customers-container .treatments-usage ,
.customers-container .btn-full-screen , .customers-container .payment-btn-add{
    background : #EBEBEB;
    margin-top: -5px;
    padding : 0 10px 5px;
    color : #919191;
    font-size : 14px;
    cursor : pointer;
    float : left;
}


.customers-container .customers-btn-add r , .customers-container .customers-btn-edit r , .customers-container .contracts-btn-add r,
.customers-container .treatments-btn-add r , .customers-container .payment-btn-add r{
    font-size:  20px;
    margin-right : 5px;
}

.customers-container .customers-btn-print{
    padding : 5px 15px;
    margin-left : 10px;
}
/* END LOG001 */

.customers-container .treatments-usage , .customers-container .btn-full-screen{
    padding : 5px 10px;
}

.customers-container .customers-top-pagination{
    float: right;
}

.customers-container .customers-top-pagination .btn-next , 
.customers-container .customers-top-pagination .btn-previous{
    background : url('img/btn_next_month.png') no-repeat center;
    width : 18px;
    height : 18px;
    margin : 3px;
    cursor : pointer;
    float : left;
}

.customers-container .customers-top-pagination .btn-previous{
    background : url('img/btn_prev_month.png') no-repeat center;
}

.customers-container .customers-top-pagination .customers-top-pagination-input{
    width : 30px;
    height : 18px;
    margin : -3px 5px 3px;
    float : left;
}

.customers-container .customers-top-pagination .customers-top-pagination-input .input-page{
    width : 90%;
    border : 1px solid #EBEBEB;
    color : #919191;
    font-size : 14px;
    text-align : center;
    float : left;
}

.customers-container .customers-top-pagination .customers-top-pagination-text{
    margin : 3px;
    color : #919191;
    font-size : 14px;
    float : left;
}

.customers-container .customers-bottom-pagination{
    width : 151px;
    margin : 0 auto;
}

.customers-container .customers-bottom-pagination .btn-next , 
.customers-container .customers-bottom-pagination .btn-previous{
    background : url('img/btn_next_month.png') no-repeat right;
    padding-right : 25px;
    margin : 3px;
    color : #919191;
    font-size : 14px;
    cursor : pointer;
    float : left;
}

.customers-container .customers-bottom-pagination .btn-previous{
    background : url('img/btn_prev_month.png') no-repeat left;
    padding-left : 25px;
    padding-right : 0px;
}

.customers-container .customers-bottom-pagination .separator-pagination{
    width : 1px;
    height : 30px;
    margin : -3px 5px 0;
    border-right : 1px solid #E3E3E3;
    float: left;
}

.customers-table{
    width : 100%;
    border: 1px solid #EBEBEB;
    border-right : none;
    float : left;
}

.customers-table thead{
    background : #333;
    color : #FFF;
    font-size : 14px;
}

.customers-table tbody{
    color : #919191;
    font-size : 14px;
}

.customers-table th , .customers-table td{
    margin : 0;
    padding : 10px;
    border-right : 1px solid #EBEBEB;
    font-weight: normal !important;
}

.customers-table td{
    padding: 10px 5px;
    font-size : 13px;
    border-bottom : 1px solid #EBEBEB;
}

.customers-table tr td:first{
    border-left : 1px solid #EBEBEB;
}

.customers-table tr td:last{
    border-right : none;
}

.customers-table tbody .row0 {
    background : #FFF;
}

.customers-table tbody .row1 {
    background : #FAFAFA;
}

.customers-table .table-actions{
    padding : 0 10px;
    cursor : pointer;
    float : left;
}

.customers-container .customers-form-label{
    width : 90%;
    padding-top : 7px;
    font-size : 14px;
    color : #919191;
    float : left;
}

.customers-container .customers-form-input{
    width : 90%;
    float : left;
}

.customers-container .customers-form-submit , .customers-container .customers-form-submit-right , .customers-container .customers-form-submit-left , .customers-container .customers-form-submit-fluid-small{
    background : #EBEBEB;
    width : 150px;
    padding : 10px 0;
    border-radius : 4px;
    color : #FFF;
    font-size : 14px;
    text-align : center;
    margin : 0 auto;
    cursor : pointer;
}

.customers-container .customers-form-submit-right{
    margin : 0;
    float : right;
}

.customers-container .customers-form-submit-left{
    margin : 0;
    float : left;
}

.customers-container .customers-form-submit-fluid-small{
    width : 80%;
    margin : 0;
    padding : 5px 0;
    float : left;
}

.customers-container .customers-form-input .customers-form-input-box-disabled ,
.customers-container .customers-form-input .customers-form-textarea-box-disabled{
    background : #EBEBEB;
    font-size : 14px;
    color : #919191;
}

.customers-container .customers-form-input input[type=text] , 
.customers-container .customers-form-input input[type=number] , 
.customers-container .customers-form-input input[type=email],
.customers-container .customers-form-input .customers-form-input-box-disabled,
.customers-container .customers-form-input .customers-form-textarea-box-disabled{
    width : 92%;
    padding : 5px 4%;
    float : left;
}

.customers-container .customers-form-input .customers-form-textarea-box-disabled{
    min-height : 80px;
}

.customers-container .customers-form-input textarea{
    resize : none;
    width : 92%;
    height : 80px;
    padding : 5px 4%;
    float : left;
}

.customers-container .customers-form-input select{
    width : 101%;
    padding : 5px 4%;
    float : left;
}

.customers-container .customers-form-input input[type=radio] , 
.customers-container .customers-form-input input[type=checkbox]{
    margin : 5px;
    float: left;
}

.customers-container .customers-form-input .radio-label{
    margin : 3px;
    color : #919191;
    font-size : 14px;
    float : left;
}

.customers-container .customers-form-input .input-button{
    background : #EBEBEB;
    width : 170px;
    padding : 10px 5px;
    color : #919191;
    font-size : 14px;
    text-align : center;
    border : none;
    cursor : pointer;
    float : left;
}

.customers-container .customers-form-input-error{
    border : 1px solid red;
}

.customers-container .customers-avatar{
    background : #FFF;
    width : 150px;
    height : 150px;
    padding: 3px;
    border : 1px solid #EBEBEB;
    border-radius : 5px;
    overflow : hidden;
    float : left;
}

.customers-container .customers-avatar img{
    width : 100%;
    min-height : 100%;
    float : left;
}

.customers-container .customers-details-box{
    width : 100%;
    height : 345px;
    overflow : hidden;
    float : left;
}

.customers-details-box-expand{
    background : #EBEBEB;
    width : 96%;
    padding :10px 2%;
    font-size: 16px;
    color : #919191;
    text-align : center;
    cursor : pointer;
    float: left;
}

.customers-details-box-expand:hover{
    color : #FFF;
}

.customers-container .customers-information-left, .customers-container .customers-information-right{
    color : #919191;
    font-size : 13px;
    float : left;
}

.customers-container .customers-information-right{
    float : right;
}

.customers-container .customers-information-left r, .customers-container .customers-information-right r{
    font-size : 16px;
}

.customers-container .customers-details-avatar{
    background : #FFF;
    width : 150px;
    height : 150px;
    padding : 3px;
    margin : 0 auto;
}

.customers-container .customers-details-avatar-box{
    width: 100%;
    height : 100%;
    overflow: hidden;
    float: left;
}

.customers-container .customers-details-avatar img{
    width : 100%;
    min-height : 100%;
    float : left;
}

.customers-container .customers-details-item{
    width : 95%;
    float : left;
}

.customers-container .customers-details-item-name , .customers-container .customers-details-item-value{
    width : 100%;
    padding : 2px 0;
    color : #919191;
    font-size : 13px;
    float : left;
}

.customers-container .customers-details-item-value{
    color : #666;
}

.customers-container .authorised-text{
    text-align : left;
    font-size : 12px;
    color : #919191;
    float : left;
}

.image-cropper{
    width : 96%;
    padding : 2%;
    float : left;
}

.image-cropper img{
    width : 480px; 
    margin : 0 auto;
}

.btn-select-package , .btn-auth-discount , .btn-select-document , .btn-cancel-contract , .btn-resave-contract{
    width : 140px;
    height : 18px;
    padding : 10px;
    margin : 0 auto;
    border : 1px solid #EBEBEB;
    border-radius : 4px;
    font-size : 14px;
    color : #919191;
    text-align : center;
    cursor: pointer;
}

.btn-select-package:hover , .btn-auth-discount:hover , .btn-select-document:hover , .btn-cancel-contract:hover , .btn-resave-contract:hover{
    color : #FFF;
}

.btn-cancel-contract.unactive{
    background : #EBEBEB;
    color : #FFF;
}

.customers-container .btn-delete-treatment{
    width : 20px;
    height : 20px;
    margin : 10px auto;
    cursor : pointer;
}

.customers-container .customers-container-tab{
    width : 100%;
    float : left;
}

.customers-container .customers-container-tab .customers-container-tab-item{
    padding : 10px 0px;
    border-bottom: 2px solid #EBEBEB;
    text-align : center;
    font-size : 16px;
    color : #919191;
    cursor : pointer;
    float : left;
}

.customers-container .tab-content{
    width : 96%;
    padding : 0 2%;
    float : left;
}

.treatment-use-form{
    background : #EBEBEB;
    width : 90%;
    border-radius : 5px;
    margin : 0 2.5%;
    padding : 5px 2.5%;
    float : left;
}

.treatment-use-title{
    width : 100%;
    padding : 10px 0 5px;
    margin : 0;
    border-bottom : 1px solid #D0D0D0;
    color : #919191;
    font-size : 14px;
    float : left;
}

.customer-card-iframe{
    width : 100%;
    height : 100%;
    overflow: auto;
    float : left;
}

/* -------------------------  */



/* CONTRACTS PAGE */
.contracts-search-field-button{
    width : 100%;
    padding : 7px 0;
    font-size : 14px;
    color : #FFF;
    text-align : center;
    cursor : pointer;
    float : left;
}
/* -------------------------  */

.text-bold{
    font-weight: bold;
}
.message-container .message-header{
    padding-left: 30%;
}
.message-container .message-header .btn-next , 
.message-container .message-header .btn-previous{
    width : 18px;
    height : 18px;
    margin : 3px;
    cursor : pointer;
    float : left;
}
.message-container .message-header .btn-next{
    background : url('img/btn_next_month.png') no-repeat center;
}
.message-container .message-header .btn-previous{
    background : url('img/btn_prev_month.png') no-repeat center;
}
.message-container .message-header .mdate{ 
    float: left; 
    margin-top: 3px;
    margin-left: 15px;
    margin-right: 15px;
}
.message-container .message-detail{
    color: #999;
    float:left;
    width:95%;
}
.message-container .message-detail .mtitle{    
    color: #000;
    font-size: 35px;
}
.message-container .message-detail .icons{
    float: left;
    text-align: center;
    width: 10%;
}
.message-container .message-detail .mdesc{
    float: left;
    width: 45%;
}
.message-container .message-detail .icon-history{
    background : url('img/btn_history.png') no-repeat center;
}
.message-container .message-detail .icon-payment{
    background : url('img/ico_news.png') no-repeat center;
}

/* CONTRACT CONTENT */
.contract-avatar{
    width : 80px;
    height: 80px;
    margin-right : 15px;
    padding : 3px;
    border : 1px solid #EBEBEB;
    border-radius : 4px;
    float: left;
}

.contract-avatar .contract-avatar-box{
    width : 100%;
    height : 100%;
    overflow : hidden;
    float : left;
}

.contract-avatar .contract-avatar-box img{
    width : 100%;
    min-height : 100%;
    float : left;
}

.contract-customer-info , .contract-package-info , .contract-package-action {
    width : 16%;
    height : 60px;
    padding : 10px;
    margin-right : 10px;
    float : left;
}

.contract-package-info {
    width : 40%;
    height: auto;
}

.contract-package-action{
    width : 42%;
    height : auto;
    margin-left : -30px;
    margin-top : -170px;
    float : right;
}

.contract-customer-info .contract-customer-info-name , .contract-customer-info .contract-customer-info-status ,
.contract-customer-info .contract-customer-info-update , .contract-package-info .contract-package-info-title ,
.contract-package-info .contract-package-info-text{
    width : 100%;
    margin : 3px 0;
    font-size : 16px;
    float : left;
}

.contract-customer-info .contract-customer-info-name , .contract-customer-info .contract-customer-info-update ,
.contract-package-info .contract-package-info-title, .contract-package-info .contract-package-info-text{
    color : #919191;
}

.contract-customer-info .contract-customer-info-status , .contract-customer-info .contract-customer-info-update,
.contract-package-info .contract-package-info-text{
    font-size : 14px;
}

.contract-package-info .contract-package-info-text .contract-package-info-text-left,
.contract-package-info .contract-package-info-text .contract-package-info-text-right{
    width : 18%;
    float : left;
}

.contract-package-info .contract-package-info-text .contract-package-info-text-right{
    width : 75%;
}

.contract-package-action .contract-package-action-button{
    padding : 8px 15px;
    margin : 5px;
    border-radius : 4px;
    font-size : 14px;
    color : #FFF;
    text-align : center;
    cursor : pointer;
    float : right;
}

.contract-cancel-text{
    width : 100%;
    font-size : 14px;
    color : #919191;
    text-align : center;
    float : left;
}

.contract-item , .contract-item-edit , .btn-rounding-contract , .btn-payment-detail , .contracts-customer-view{
    cursor : pointer;
}

.contract-product-usage-title , .contract-product-usage-items{
    width : 100%;
    border-bottom : 1px solid #EBEBEB;
    float : left;
}

.contract-product-usage-title .contract-product-usage-title-field , .contract-product-usage-items .contract-product-usage-items-field{
    width : 20%;
    padding : 10px 0;
    font-size : 14px;
    color : #919191;
    text-align : center;
    float : left;
}

.contract-product-usage-items{
    border : none;
    max-height: 200px;
    padding-bottom : 20px;
    overflow : auto;
}

.contract-product-usage-items .contract-product-usage-items-field{
    border-bottom : 1px solid #EBEBEB;
}

/* -------------------------  */

/* SEARCH CONTENT */
.search-form{
    width : 100%;
    padding : 10px 0;
    border-bottom: 1px solid #F6F6F6;
    float : left;
}

.search-form input[type=text]{
    background : #EBEBEB;
    width : 87%;
    padding: 5px 1%;
    border : 1px solid #F6F6F6;
    border-radius : 8px;
    font-size : 14px;
    float: left;
}

.search-form .btn-search-form{
    background : #D0D0D0;
    width : 100px;
    padding : 5px 0;
    border-radius : 8px;
    font-size : 14px;
    color : #FFF;
    text-align : center;
    cursor : pointer;
    float : right;
}

.search-list{
    width : 100%;
    overflow : auto;
    float : left;
}

.search-item{
    background: #FFF;
    width: 100%;
    margin: 5px 0;
    border: 1px solid #F6F6F6;
    cursor : pointer;
    float : left;
}
.search-item:hover{
    border-bottom : 4px solid;
}
.search-item .search-item-img{
    margin-right : 3%;
    width   : 10%;
    height  : 100px;
    float   : left;
}

.search-item .search-item-img .search-icon-img{
    background: #A9A9A9;
    width : 100px;
    height : 100px;
    float: left;
}

.search-item .search-title-content{
    width: 85%;
    float : left;
}

.search-item .search-item-path{
    width: 100%;
    margin: 5px 0 0;
    color : #919191;    
    font-size: 14px;
    float : left;
}

.search-item .search-item-title{
    width: 85%;
    padding-top: 5px;
    float : left;
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: bold;
}

.search-no-result{
    width : 100%;
    font-size: 14px;
    text-align : center;
    float : left;
}

/* CATALOGUE CONTENT */

.catalogue-navigation{
    width : 300px;
    margin : 0 auto;
}

.catalogue-navigation .catalogue-navigation-item{
    width : 95%;
    margin: 0 2.5%;
    padding : 10px 0;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    font-size : 14px;
    cursor: pointer;
    float : left;
}

.catalogue-navigation .catalogue-navigation-item .symbol{
    margin-left: 10px;
}

.product-list{
    width : 95%;
    margin : 0 2.5%;
    float : left;
}

.product-list .product-item{
    width : 95%;
    margin : 5px 2.5%;
    border : 1px solid #EBEBEB;
    cursor : pointer;
    float: left;
}

.product-list .product-item .product-item-image{
    height : 200px;
    margin-bottom: 2px;
    border-bottom: 2px solid #D0D0D0;
    overflow: hidden;
}

.product-list .product-item .product-item-image img{
    display: block;
    width : 100%;
    min-height: 200px;
    margin: 0 auto;
}

.product-list .product-item .product-text{
    width : 90%;
    padding : 2px 5%;
    font-size : 14px;
    color : #919191;
    float : left;
}

.product-top-pagination{
    width : 95%;
    margin : 0 2.5%;
    float : right;
}

.product-top-pagination-wrapper{
    float : right;
}

.product-top-pagination-text , .product-top-pagination-input{
    margin: 5px;
    font-size : 14px;
    float : left;
}

.product-top-pagination-input input[type=text]{
    width : 30px;
    border : 1px solid #EBEBEB;
    border-radius: 4px;
    margin-top : -5px;
    font-size : 14px;
    float : left;
}

.product-bottom-pagination{
    width : 150px;
    margin : 0 auto;
}

.product-bottom-pagination .product-bottom-pagination-item{
    margin : 5px;
    font-size: 14px;
    cursor : pointer;
    float : left;
}

.product-bottom-pagination .product-bottom-pagination-separator{
    width : 2px;
    height : 20px;
    margin-top: 5px;
    border-left : 1px solid #EBEBEB;
    float : left;
}

.product-bottom-pagination .product-bottom-pagination-item .symbol-right{margin-left: 10px;}
.product-bottom-pagination .product-bottom-pagination-item .symbol-left{margin-right: 10px;}

.orders-bottom-pagination{
    width : 150px;
    margin : 0 auto;
}

.orders-bottom-pagination .orders-bottom-pagination-item{
    margin : 5px;
    font-size: 14px;
    cursor : pointer;
    float : left;
}

.orders-bottom-pagination .orders-bottom-pagination-separator{
    width : 2px;
    height : 20px;
    margin-top: 5px;
    border-left : 1px solid #EBEBEB;
    float : left;
}

.orders-bottom-pagination .orders-bottom-pagination-item .symbol-right{margin-left: 10px;}
.orders-bottom-pagination .orders-bottom-pagination-item .symbol-left{margin-right: 10px;}

.category-box{
    width : 100%;
    height : 100%;
    overflow-y: auto;
    overflow-x : hidden;
    float : left;
}

.category-level-wrapper{
    width : 100%;
    max-height: 0px;
    transition : all 0.5s ease-in-out;
    overflow: hidden;
    float : left;
}

.category-level-wrapper .category-item{
    width : 92%;
    margin : 3px 2.5%;
    border : 1px solid #EBEBEB;
    float : left;
}

.category-level-wrapper .category-item .category-item-label{
    width : 84%;
    padding: 12px 2%;
    font-size : 14px;
    cursor: pointer;
    float : left;
}

.category-level-wrapper .category-item .category-item-button , .category-level-wrapper .category-item .category-item-button-back{
    width : 10%;
    height : 40px;
    border-left: 1px solid #EBEBEB;
    cursor: pointer;
    float : right;
}

.category-level-wrapper .category-item .category-item-button:hover , .category-level-wrapper .category-item .category-item-button-back:hover{
    background-color: #EBEBEB !important;
}

.category-level-wrapper .category-item .category-item-button-back{
    border: none;
    border-right: 1px solid #EBEBEB;
    float : left;
}

.sort-item{
    width :94%;
    padding : 10px 2%;
    margin : 3px 1%;
    border : 1px solid #EBEBEB;
    border-radius: 3px;
    font-size : 14px;
    cursor: pointer;
    float : left;
}

.descriptions-tab{
    background: #EBEBEB;
    width : 95%;
    padding : 10px 1%;
    margin : 0 1.5%;
    border-radius: 2px;
    font-size : 14px;
    cursor : pointer;
    float : left;
}

.descriptions-text{
    width : 95%;
    padding: 0 2.5%;
    height : 120px;
    overflow-y: auto;
    float : left;
}

.descriptions-iframe{
    width : 100%;
    max-height: 375px;
    overflow-y: auto;
    float : left;
}

.slide-product-image-box{
    width : 100%;
    height : 250px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBEBEB;
    overflow: hidden;
    float : left;
}

.slide-product-image-wrapper , .slide-product-image-item{
    height : 100%;
    float : left;
}

.slide-product-image-wrapper{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.slide-product-image-item img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin : 0 auto;
}

.slide-product-pagination{
    width : 98%;
    margin-top: -150px;
    padding : 0 1%;
    float : left;
}

.slide-product-pagination-button.left , .slide-product-pagination-button.right{
    width : 30px;
    height : 30px;
    cursor: pointer;
    float : left;
}

.slide-product-pagination-button.right{
    float : right;
}

.iframe-product-box{
    width : 90%;
    margin: 0 5%;
    z-index : 1;
    overflow: hidden;
    float : left;
}

.iframe-product-box .iframe-product-wrapper{
    width : 100%;
    overflow: hidden;
    float: left;
}

.iframe-product-box iframe{
    width : 100%;
    border : 0;
    margin-bottom: 40px;
    float : left;
}

.iframe-product-box .iframe-file{
    width : 103%;
    height : 350px;
}

.add-to-cart-wrapper, .add-to-cart-wrapper-popup, .cart-set-quantity{
    width : 100%;
    padding: 10px 0;
    color : #919191;
    cursor : pointer;
    float : left;
}

.add-to-cart-button{
    width : 75%;
    height : 21px;
    padding-left: 25%;
    padding-top: 5px;
    float : left;
}

.cart-set-quantity{
    background: none;
    display: none;
    padding : 0;
}

.cart-set-quantity .cart-set-quantity-button, .cart-set-quantity .cart-set-quantity-text{
    height : 21px;
    padding-top: 15px;
    padding-bottom: 10px;
}

/* CHECKOUT CONTENT */
.cart-item-wrapper{
    width : 90%;
    margin : 10px 5%;
    float : left;
}

.cart-item-wrapper .cart-item-thumbnail {
    height : 140px;
    overflow-y: hidden;
}

.cart-item-wrapper .cart-item-thumbnail img{
    display: block;
    max-height: 100%;
    float : left;
}

.cart-item-wrapper .cart-item-information{
    min-height: 140px;
}

.label-cart {
    width : 70px;
    padding-top: 5px;
    float : left;
}

.input-cart {
    width : 30px;
    float : left;
}

.cart-notes{
    width : 100% !important;
    padding : 5px 0 !important;
    border : none;
    float : left;
}

.btn-remove-cart{
    width : 20px;
    height : 20px;
    cursor: pointer;
    float :right;
}

.form-checkout{
    width : 60%;
    margin : 0 20%;
    float : left;
}

.img-thank-you{
    background: url('img/Thank-You.png') no-repeat center;
    height: 50px;
}

.cart-quantity{
    border : 1px solid #EBEBEB;
    border-radius : 4px;
}

.form-checkout input , .form-checkout select{
    width : 95%;
    border: 1px solid #EBEBEB;
    border-radius : 4px;
}

.form-checkout select{
    width : 97%;
}

.form-checkout .input-full{
    width : 96.5%;
}

.buyers-picture{
    width : 90%;
    margin : 10px 10% 10px 0;
    height : 100px;
    overflow: hidden;
    float : left;
}

#buyers-picture{
    width : 100%;
    height : 100%;
    float : left;
}

.btn-buyer-select , .btn-buyer-create , .btn-buyer-search{
    width : 90%;
    padding: 10px 0;
    color : #FFF;
    font-size : 14px;
    cursor : pointer;
    border-radius : 4px;
    float : left;
}

.buyer-item{
    width : 95%;
    padding : 10px 2.5%;
    border-bottom: 1px solid #EBEBEB;
    cursor: pointer;
    float : left;
}

.buyer-item:hover{
    background: #EBEBEB;
}

.btn-buyer-search{padding: 6px 0;float: right;}

/* BUYER ADD */
.buyer-locations-marker{
    background : #FFF url('img/ico_marker.png') no-repeat left;
    position: relative;
    width : 25%;
    margin : 10px 37.5% -80px;
    padding : 25px 0 25px 70px;
    font-size : 16px;
    color : #919191;
    opacity : 0.7;
    z-index: 1;
    float : left;
}

.buyer-location-container {
    position: relative;
    margin-top: -20px;
}

.btn-use-location , .btn-search-location{
    width : 90%;
    padding : 10px 0;
    border-radius: 4px;
    font-size : 14px;
    cursor : pointer;
    float : left;
}

.btn-search-location{
    background: #EBEBEB;
    width : 100%;
    border-radius : 0 4px 4px 0;
    color : #919191;
}

.input-location-name{
    background: rgba(255, 255, 255, 0.8);
    width : 96% !important;
    padding : 9px 2% !important;
    border : 1px solid #EBEBEB;
    border-radius: 4px 0 0 4px;
    font-size: 14px !important;
    color : #919191;
    float : left;
}

.buyers-avatar{
    width : 50%;
    margin : 0 25%;
    float : left;
}

.buyers-avatar img{
    width : 100%;
    border-radius : 4px;
    float : left;
}

.buyers-form-label{
    width : 90%;
    padding : 10px 0 10px 10%;
    font-size : 14px;
    color : #919191;
    float : left;
}

.buyers-form-input{
    width : 100%;
    float : left;
}

.buyers-form-input input[type=text] , .buyers-form-input input[type=email], .buyers-form-input select , .buyers-form-input textarea, .buyers-form-input input[type=number]{
    width : 92%;
    padding : 10px 4%;
    border : none;
    border-radius : 4px;
    font-size: 14px;
    color : #919191;
    float: left;
}

.buyers-form-input select{width : 100%;}
.buyers-form-input textarea{height: 80px; resize: none;}

.buyers-form-input .input-button{
    width : 80%;
    margin : 0 10%;
    padding : 10px 0;
    border-radius: 4px;
    font-size: 14px;
    color : #919191;
    cursor : pointer;
    float : left;
}

.buyers-form-input input[type=radio] ,
.buyers-form-input input[type=checkbox]{
    margin : 5px;
    float: left;
}

.buyers-form-input .radio-label{
    margin : 3px;
    color : #919191;
    font-size : 14px;
    float : left;
}


/* ACCOUNTS CONTENT */
.account-list{
    width : 95%;
    margin : 0 2.5%;
    float : left;
}

.account-items{
    width : 90%;
    margin : 10px 5%;
    border: 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.account-items .account-items-image{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width : 100%;
    height : 175px;
    float : left;
}

.account-items .account-items-information{
    background: #EBEBEB;
    width: 90%;
    padding : 10px 5%;
    float : left;
}

.profile-account-wrapper{
    width : 95%;
    margin : 0 2.5%;
    float : left;
}

.profile-account-wrapper .profile-account-avatar{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width : 80%;
    height : 175px;
    float : left;
}

.profile-account-wrapper .btn-account-action{
    width : 97%;
    margin : 0 2% 0 0;
    padding: 10px 0;
    border : 1px solid #EBEBEB;
    border-radius: 4px;
    cursor: pointer;
    float : left;
}

.form-address{
    width : 85%;
    margin : 0 7.5%;
    float: left;
}

/* FEEDS CONTENT */

.feeds-category-wrapper{
    overflow: hidden;
}

.feeds-category-container{
    width : 106%;
    height: 100%;
    overflow-y: auto;
}

.feeds-category{
    width : 90%;
    padding: 0 5% 0 5%;
    float : left;
}

.feeds-category .feeds-category-item{
    width : 85%;
    margin: 0 5% 20px 0;
    padding: 10px 5%;
    height: 150px;
    cursor : pointer;
    float : left;
}

.feeds-items{
    width : 90%;
    padding: 0 4% 0 5%;
    margin-top: 10px;
    min-height: 98%;
    border-left: 1px solid #EBEBEB;
    float : left;
}

.feeds-items .feed-item{
    width : 96%;
    padding : 10px 2%;
    margin-bottom : 20px;
    border : 1px solid #EBEBEB;
    float : left;
}

.feeds-items .feed-item .feed-item-button{
    cursor : pointer;
}

.feeds-items .feed-item .feed-image-wrapper{
    width : 100%;
    max-height: 250px;
    overflow: hidden;
    float : left;
}

.feeds-items .feed-item .feed-image{
    width : 100%;
    float : left;
}

.feed-info{
    margin : 0 auto;
    cursor : pointer;
}

.feed-info-icon{
    width : 30px;
    height: 20px;
    cursor : pointer;
    float : left;
}

.feed-info-label{
    padding-top: 2px;
    float : left;
}

.feed-info:hover{
    font-weight: bold;
}

.btn-feed-comment{
    padding: 6px 0;
    border-radius: 4px;
    cursor: pointer;
}
.btn-feed-comment:hover{font-weight: bold}

.feed-comments-container{
    width : 100%;
    max-height: 300px;
    overflow: hidden;
    float : left;
}

.feed-comments-container .feed-comments-wrapper{
    width : 106%;
    max-height: 300px;
    overflow-y: auto;
    float : left;
}

.feed-comment-0 , .feed-comment-1{
    width : 90%;
    padding: 10px 5%;
    margin-right: 6%;
    float : left;
}
.feed-comment-1{background: #F4F4F4}

.input-feed-comment{
    width : 90% !important;
    margin-left: 2% !important;;
    border : 1px solid #EBEBEB !important;;
    border-radius :4px !important;;
    float : left !important;;
}

.feed-info-container{
    width : 90%;
    margin: 0 5%;
    float : left;
}

.feed-info-file{
    margin-top: -20px;
}

.feed-info-editor{
    margin-top: 20px;
    margin-bottom: 50px;
}

/* LOCATIONS CONTENT */
.locations-menu-item{
    padding : 10px 0;
    border-bottom : 2px solid #EBEBEB;
    font-size : 14px;
    cursor: pointer;
}

.branch-picture{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width : 80%;
    height : 175px;
    margin : 0 10%;
    float : left;
}

.branch-info-icon{
    background: #FAFAFA;
    width : 30px;
    height : 30px;
    margin-right: 10px;
    float : left;
}

.branch-info-label{
    width : 50%;
    padding-top: 8px;
    color : #919191;
    font-size: 14px;
    float : left;
}

.branch-info-label p{
    padding: 0;
    margin: 0;
    float : left;
}

.map-no-location{
    position : relative;
    background : url('img/no-location-bg.jpg') center no-repeat;
    background-size : cover;
    width: 102.5% !important;
    height : 250px;
    left: -2.5%
}

/* FILEBOX CONTENT */
.filebox-blank{
    background : url('img/ico_filebox_empty.png') no-repeat center;
}

.filebox-filter{
    margin : 2px 0;
    cursor: pointer;
}

.filebox-item, .filebox-item-sub{
    width : 90% !important;
}

.filebox-image{
    display: block;
    max-width : 100%;
    max-height : 80%;
    margin : 5% auto;
}

.filebox-video{
    width : 70%;
    max-height : 65%;
    margin : 10% 15%;
    float : left;
}

.filebox-pdf{
    width : 90%;
    height : 100%;
    margin : 0 5%;
    border : none;
    float : left;
}

.filebox-information{
    background : rgba(0,0,0,0.4);
    position : fixed;
    bottom : -120px;
    width : 78%;
    height : 100px;
    margin-left: -2%;
    z-index : 9;
    transition:all 1s;
    -webkit-transition: -webkit-all 1s;
    transition-timing-function: ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
    float : right;
}

.filebox-information .filebox-information-container{
    width : 95%;
    padding : 10px 2.5%;
    float : left;
}

.filebox-information .filebox-information-icon{
    height : 35px;
}

.filebox-options-box{
    display: none;
    background: #FFF;
    position: absolute;
    width : 90px;
    padding : 5px;
    border: 1px solid #EBEBEB;
    border-radius : 2px;
    float : right;
}

.filebox-options-box .filebox-options-box-item{
    padding : 8px 0;
    border-bottom : 1px solid #EBEBEB;
    cursor : pointer;
}

.filebox-options-box .filebox-options-box-item.last{
    border: none;
}

.filebox-submit , .filebox-cancel{
    width : 48%;
    margin : 5px 1%;
    padding : 10px 0;
    border-radius : 4px;
    cursor: pointer;
    float : left;
}

.filebox-popup-options , .filebox-popup-customer{
    width : 98%;
    padding : 10px 1%;
    border-bottom: 1px solid #EBEBEB;
    float : left;
}

.filebox-popup-options .filebox-popup-options-icon{
    height : 30px;
}

.filebox-popup-customer .filebox-popup-customer-icon{
    width : 50px;
    height : 50px;
    margin-right: 10px;
    border-radius : 50%;
    border : 1px solid #EBEBEB;
    overflow: hidden;
}

.filebox-popup-customer .filebox-popup-customer-icon img{
    width : 100%;
    min-height: 100%;
}

.filebox-popup-options .filebox-popup-options-text{
    margin-top : 5px;
}

.filebox-popup-customer .filebox-popup-customer-text {
    margin-top : 15px;
}

.filebox-popup-customer .filebox-popup-customer-radio{
    background: #FFF;
    width : 8px;
    height: 8px;
    margin-top : 15px;
    border : 1px solid #EBEBEB;
    border-radius : 50%;
    padding : 3px;
    overflow : hidden;
    float : right;
}

.filebox-popup-customer .filebox-popup-customer-radio .filebox-popup-customer-radio-input{
    background: #FFF;
    width : 100%;
    height : 100%;
    border-radius : 50%;
    float : left;
}

.filebox-popup-customer .filebox-popup-customer-radio .filebox-popup-customer-radio-input.active{
    background: #D0D0D0;
}

/* PROFILE CONTENT */
.profile-avatar{
    border: 4px solid #FFF;
    border-radius : 50%;
    margin: -80px 10px 10px;
    width : 80px;
    height: 80px;
    overflow: hidden;
    float: left;
}

.profile-avatar img{
    width: 80px;
}

.profile-user{
    margin: 10px;
    margin-top: -80px;
    padding: 5px 10px 10px;
    font-size: 14px;
    color : #919191;
    float : left;
}

.profile-stats{
    width: 22%;
    padding: 5px 10px;    
    float: left;
}

.profile-stats .profile-stats-icon{
    margin-right: 10px;
    width       : 40px;
    height      : 40px;
    float       : left;
}

.profile-stats #icon-feedback{background  : url('img/ico_feedback_given.png') center no-repeat;background-size : 40px;}
.profile-stats #icon-search  {background  : url('img/ico_search_content.png') center no-repeat;background-size : 40px;}
.profile-stats #icon-login   {background  : url('img/ico_login_access.png') center no-repeat;background-size : 40px;}
.profile-stats #icon-content {background  : url('img/ico_content_access.png') center no-repeat;background-size : 40px;}

.profile-text-bold{
    font-weight : bold;
}

.profile-stats .profile-stats-count{
    font-size: 14px;
    color : #999;
    float: left;
}

.profile-options{
    background: #999;
    margin-top: 80px;
    width: 100%;
    height: 5px;
    float: left;
}

.profile-options .options-title{
    background: #999;
    border-radius : 20px;
    width: 300px;
    padding: 10px 0;
    margin: -20px auto 0;
    color : #FFF;
    text-align: center;
}

.profile-options .btn-click-password , .profile-options .btn-click-shop , .profile-options .btn-click-avatar{
    margin-top: -10px;
    margin-left: 130px; 
    font-size: 12px;
    padding: 5px 15px;
    border-radius : 10px;
    background: #999;
    color : #FFF;
    cursor: pointer;
    float: left;
}

.profile-options .btn-click-password , .profile-options .btn-click-shop { margin-left: 20px;}

.profile-options .btn-click-logout{
    margin-top: -10px;
    margin-left: 20px;
    font-size: 12px;
    padding: 5px 15px;
    border-radius : 10px;
    background: #999;
    float: left;
}

.profile-options .btn-click-logout a{
    display: block;
    font-size: 12px;
    color : #FFF;
}

.profile-options .btn-click-password:hover , .profile-options .btn-click-logout:hover , .profile-options .btn-click-avatar:hover ,
.profile-options .btn-click-shop:hover{
    background: #666;
}

.stats-box{
    margin : 5px 2%;
    width: 29%;
    height : 220px;
    float: left;
}

.stats-box .box{
    margin: 5px 0;
    width: 100%;
    height : 100%;
    float:left;
}

.stats-box h5 {
    margin: 0;
    width: 100%;
    float: left;
}

.stats-line-1 , .stats-line-2{
    margin: 5px;
    margin-top: 15px;
    width: 10px;
    height: 5px;
    float: left;
}

.stats-legend{
    margin: 5px;
    color: #666;
    font-size: 14px;
    float: left;
}

.profile-recommend{
    width: 100%;
    float: left;
}

.profile-recommend .recommend-options{
    width: 252px;
    margin : 0 auto;
}

.profile-recommend .recommend-options .recommend-options-item , .profile-recommend .recommend-options .recommend-options-item-active{
    padding-top: 15px;
    margin: 10px;
    width: 64px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    float: left;
}

.profile-recommend .recommend-options .recommend-options-item:hover , .profile-recommend .recommend-options .recommend-options-item-active{
    background: #08B1AE;
}

#recommend-all{
    background: url('img/tab_all_off.png') center no-repeat;
}

#recommend-all.recommend-options-item-active , #recommend-all:hover{
    background: url('img/tab_all_on.png') center no-repeat;
}

#recommend-video{
    background: url('img/tab_video_off.png') center no-repeat;
}

#recommend-video.recommend-options-item-active, #recommend-video:hover{
    background: url('img/tab_video_on.png') center no-repeat;
}

#recommend-slide{
    background: url('img/tab_slide_off.png') center no-repeat;
}

#recommend-slide.recommend-options-item-active  , #recommend-slide:hover{
    background: url('img/tab_slide_on.png') center no-repeat;
}


.recommend-list{
    width: 760px;
    margin: 0 auto;
}

.recommend-box{
    background: #EBEBEB;
    border-bottom: 8px solid #08B1AE;
    width: 180px;
    margin: 5px;
    float: left;
}

.recommend-box-img{
    width: 100%;
    height: 120px;
    float : left;
}

.recommend-box-img img{
    width: 100%;
    height: 100%;
}

.recommend-box-desc{
    width : 90%;
    padding: 5%;
    font-size: 12px;
    float: left;
}

.recommend-box-desc h5{
    width: 100%;
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: normal;
    float: left;
}

.recommend-box-desc h5 a{
    color : #000;
}

.recommend-bookmark , .recommend-share{
    background: url('img/btn_add_bookmark_small.png') left center no-repeat;
    width: 76%;
    height: 20px;
    padding-left: 20%;
    padding-top: 5px;
    margin : 3px 2%;
    color: #919191;
    font-size: 12px;
    cursor : pointer;
    float: left;
}

.recommend-share{
    background: url('img/btn_share_small.png') left no-repeat;
}

.recommend-bookmark:hover{
    background: url('img/btn_add_bookmark_small_on.png') left center no-repeat;
    color : #08B1AE;
}

.recommend-share:hover{
    background: url('img/btn_share_small_over.png') left center no-repeat;
    color : #08B1AE;
}

.usage-box{
    width : 95%;
    padding : 10px 0;
    margin : 0 2.5%;
    border-radius: 3%;
    float: left;
}


/* -------------------------  */

.billings-grey{
    background : url('img/icon-billings-grey.png') no-repeat center;
}

.billings-new{
    background : url('img/icon-billings-new.png') no-repeat center;
}
/* USAGE VIEW */

.bg-summary{
    background-size: 22%;
    background-repeat: no-repeat;
    background-position: right top;
    background-position-x: 96%;
    background-position-y: 20%;
}


/* MAINTENANCE */
.bg-gateway{
    background-image: url("img/icon-gateway.png");
    background-size: 18%;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-position-x: 96%;
    background-position-y: 80%;
}

.bg-device{
    background-image: url("img/icon-device.png");
    background-size: 18%;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-position-x: 96%;
    background-position-y: 80%;
}
/* END MAINTENANCE */

/* BILLINGS */
.bg-print{
    background-image: url("img/icon-print.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 30%;
}
.bg-mini-print{
    background-image: url("img/icon-mini-print.png");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 70%;
    background-position-y: 30%;
}
.bg-mini-send{
    background-image: url("img/icon-send-to-customer.png");
    background-size: 18%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 86%;
    background-position-y: 14%;
}

.bg-process{
    background-image: url("img/icon-process.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 30%;
}

.bg-message{
    background-image: url("img/icon-message.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 30%;
}

.bg-cancel{
    background-image: url("img/icon-cancel.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 30%;
}

.usage-blank{
    background : url('img/icon-usage.png') no-repeat center;
    width : 100%;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.maintenance-blank{
    background : url('img/ico_request_big.png') no-repeat center;
    width : 100%;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.useraccess-blank{
    background : url('img/ico_user_access_big.png') no-repeat center;
    width : 100%;
    height : 100px;
    margin-top : 10%;
    padding-top : 240px;
    font-size : 14px;
    color : #A0A0A0;
    text-align : center;
    float : left;
}

.usage-billing{
    background : url('img/icon-billing-casier.png') no-repeat center;
    width : 100%;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
    float : left;
}

.orders-wrapper{
    width: 90%;
    margin : 0 5%;
    float : left;
}

.order-item{
    width : 95%;
    margin : 0 2% 10px;
    border : 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.order-item .order-item-thumbnail{
    width : 100%;
    height : 150px;
    border-bottom: 1px solid #EBEBEB;
    overflow: hidden;
    float : left;
}

.order-item .order-item-thumbnail img{
    display: block;
    max-width: 100%;
    height : 100%;
    margin : 0 auto;
}

.order-item .order-item-status{height : 30px;}


.invoice-item{
    width : 95%;
    margin : 0 2% 10px;
    border : 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.invoice-item .invoice-item-thumbnail{
    width : 100%;
    height : 150px;
    border-bottom: 1px solid #EBEBEB;
    overflow: hidden;
    float : left;
}

.invoice-item .invoice-item-thumbnail img{
    display: block;
    max-width: 100%;
    height : 100%;
    margin : 0 auto;
}

.invoice-item .invoice-item-status{height : 30px;}

.request-maintenance-item{
    width : 95%;
    margin : 0 2% 10px;
    border : 1px solid #EBEBEB;
    cursor : pointer;
    float : left;
}

.request-maintenance-item .request-maintenance-item-thumbnail{
    width : 100%;
    height : 150px;
    border-bottom: 1px solid #EBEBEB;
    overflow: hidden;
    float : left;
}

.request-maintenance-item .request-maintenance-item-thumbnail img{
    display: block;
    max-width: 100%;
    height : 100%;
    margin : 0 auto;
}

.request-maintenance-item .request-maintenance-item-status{height : 30px;}

/* CLUSTER LOCATIONS */
.box_header_maps{
    width: 300px;
    height: 300px;
    background-color: white;
    float: left;
}
.box_header_maps_detail{
    width: 300px;
    height: 350px;
    background-color: white;
    float: left;
}

.box_inner{
    width: 100%;
    height: 100px;
    background-color: #DCDCDC;
    float: left;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* ---------------------------------------------- */


/* EVENTS */
.events-blank{
    background : url('img/img_select_events.png') no-repeat center;
    height : 100px;
    margin-top : 10%;
    padding-top : 220px;
    font-size : 14px;
    color : #E3E3E3;
    text-align : center;
}
/* ---------------------------------------------- */




/* INTERNAL VIEW POPUP */
.internal-title , .internal-subtitle{
    width : 100%;
    margin : 3px 0;
    color : #919191;
    font-size : 20px;
    text-align : center;
    float : left;
}

.internal-subtitle{
    font-size : 14px;
}

.internal-item{
    width : 95%;
    height : 240px;
    margin : 0 2.5%;
    cursor : pointer;
    float : left;
}

.internal-item-title{
    width : 90%;
    padding : 10px 5%;
    font-size : 14px;
    float : left;
}

/* ACTIONS MORE */
.actions-more{
    position: relative;
    background: #EBEBEB;
    padding : 5px 10px !important;
    float: right !important;
}

.actions-more .actions-select{
    font-weight: bold;
}

.actions-more .actions-menu{
    background: #FFF;
    border: 1px solid #EBEBEB;
    display: none;
    margin-left: -126px;
    margin-top: 5px;
    position: absolute;
    width : 150px;
}

.actions-more:hover{
    background: #FFF;
    border: 1px solid #EBEBEB;
}
.actions-more:hover .actions-menu{
    display: block;
}

.actions-icon{
    background-color: white;
}

a.actions-icon{
    width : 90%;
    height: auto;
    text-align: left;
    padding: 10px 5%;
    float: left;
}

/* DATE TIME PICKER */
.ui-widget-header{
    background : #FFF !important;
    border: 1px solid #EBEBEB !important;
    color : #919191 !important;
    font-weight : normal !important;
    font-family : 'Font Base' !important;
    font-size : 16px !important;
}

.ui-widget-header .ui-state-hover{
    background : #EBEBEB !important;
    border : 1px solid #FFFFFF !important;
    cursor : pointer !important;
}

.ui-datepicker-calendar{
    color : #919191 !important;
    font-weight : normal !important;
    font-family : 'Font Base' !important;
    font-size : 14px !important;
}

.ui-state-default{
    background : none !important;
    border : none !important;
    color : #919191 !important;
    font-weight : normal !important;
    font-family : 'Font Base' !important;
    font-size : 14px !important;
}

.ui-state-default:hover{
    background : #EBEBEB !important;
    border : none !important;
}

.ui-widget-content{
    border: 1px solid #EBEBEB !important;
}

/* JCROP STYLESHEET */
/* jquery.Jcrop.css v0.9.12 - MIT License */
/*
  The outer-most container in a typical Jcrop instance
  If you are having difficulty with formatting related to styles
  on a parent element, place any fixes here or in a like selector

  You can also style this element if you want to add a border, etc
  A better method for styling can be seen below with .jcrop-light
  (Add a class to the holder and style elements for that extended class)
*/
.jcrop-holder {
  direction: ltr;
  text-align: left;
}
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
  background: #ffffff url("img/Jcrop.gif");
  font-size: 0;
  position: absolute;
}
.jcrop-vline {
  height: 100%;
  width: 1px !important;
}
.jcrop-vline.right {
  right: 0;
}
.jcrop-hline {
  height: 1px !important;
  width: 100%;
}
.jcrop-hline.bottom {
  bottom: 0;
}
/* Invisible click targets */
.jcrop-tracker {
  height: 100%;
  width: 100%;
  /* "turn off" link highlight */
  -webkit-tap-highlight-color: transparent;
  /* disable callout, image save panel */
  -webkit-touch-callout: none;
  /* disable cut copy paste */
  -webkit-user-select: none;
}
/* Selection Handles */
.jcrop-handle {
  background-color: #333333;
  border: 1px #eeeeee solid;
  width: 7px;
  height: 7px;
  font-size: 1px;
}
.jcrop-handle.ord-n {
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -4px;
}
.jcrop-handle.ord-e {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 50%;
}
.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}
.jcrop-handle.ord-nw {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-ne {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 0;
}
.jcrop-handle.ord-se {
  bottom: 0;
  margin-bottom: -4px;
  margin-right: -4px;
  right: 0;
}
.jcrop-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  margin-left: -4px;
}
/* Dragbars */
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
  height: 7px;
  width: 100%;
}
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
  height: 100%;
  width: 7px;
}
.jcrop-dragbar.ord-n {
  margin-top: -4px;
}
.jcrop-dragbar.ord-s {
  bottom: 0;
  margin-bottom: -4px;
}
.jcrop-dragbar.ord-e {
  margin-right: -4px;
  right: 0;
}
.jcrop-dragbar.ord-w {
  margin-left: -4px;
}
/* The "jcrop-light" class/extension */
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
  background: #ffffff;
  filter: alpha(opacity=70) !important;
  opacity: .70!important;
}
.jcrop-light .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000000;
  border-color: #ffffff;
  border-radius: 3px;
}
/* The "jcrop-dark" class/extension */
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
  background: #000000;
  filter: alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.jcrop-dark .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #ffffff;
  border-color: #000000;
  border-radius: 3px;
}
/* Simple macro to turn off the antlines */
.solid-line .jcrop-vline,
.solid-line .jcrop-hline {
  background: #ffffff;
}
/* Fix for twitter bootstrap et al. */
.jcrop-holder img,
img.jcrop-preview {
  max-width: none;
}


.print-area{display: none;}

@media print {
    .navigation , .content , .navigation-bar , .navigation-button {display: none;}
    .print-area{
        display: block;
        width : 100%;
        height : 100%;
        float : left;
    }
}