﻿/* Global Styles */

/* ------------------------------- */

body {
    padding-top: 100px;
    background-color: #f8f8f8;
}

/* Wrappers */

/* ------------------------------- */
select.form-control{width:auto;min-width: 180px;}

#wrapper {
    width: 100%;
}

#page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

button i.fa, button span.glyphicon{
    font-size: 14px;margin-right: 5px;
}
#page-wrapper i.fa, #page-wrapper span.glyphicon{font-size: 14px;margin-right: 5px;}

/* Navigation */

/* ------------------------------- */

/* Top Right Navigation Dropdown Styles */

.navbar-top-links li {
    display: inline-block;
}

.navbar-top-links li:last-child {
    margin-right: 15px;
}

.navbar-top-links li a {
    padding: 15px;
    min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
    display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
    margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}

/* Sidebar Menu Styles */

.navbar-static-side ul li {
    border-bottom: 1px solid #e7e7e7;
}

.sidebar-search {
    padding: 15px;
}

.arrow {
    float: right;
}

.fa.arrow:before {
    content: "\f104";
}

.active > a > .fa.arrow:before {
    content: "\f107";
}

.nav-second-level li,
.nav-third-level li {
    border-bottom: none !important;
}

.nav-second-level li a {
    padding-left: 37px;
}

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        min-height: 800px;
        border-left: 1px solid #e7e7e7;
    }
    body {
        padding-top: 65px;
    }
    .navbar-static-side {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
    .AddConditionVcoin .toVcoin, .AddConditionVcoin .fromVcoin {width:80px;float:left;margin-right:10px}
    table.fixedHeader-floating{position:fixed !important;background-color:white}
    table.fixedHeader-floating.no-footer{border-bottom-width:0}
    table.fixedHeader-locked{position:absolute !important;background-color:white}
    table.fixedHeader-floating{margin:0 !important}
    table.fixedHeader-floating td{padding:3px 5px !important}
}
@media print{table.fixedHeader-floating{display:none}}
@media(max-height:600px) and (max-width:767px) {
    .sidebar-collapse {
        max-height: 300px;
        overflow-y: scroll;
    }
}

@media(max-height:400px) and (max-width:767px) {
    .sidebar-collapse {
        max-height: 200px;
        overflow-y: scroll;
    }
}
@media(max-height:400px) and (min-width:380px) and (max-width:767px) and (orientation:landscape){
    #form .col-xs-12{
        width:50%
    }
    #form .col-xs-12-lc{
        width:100% !important
    }
    #formConfig .date{width:60% !important}
    #FunctionPartial .btn-circle, #ServicePartial .btn-circle{width:22px;height:22px;float:left;}
    #form .submit.col-xs-12{width:100%}
    .button.col-xs-12{
        width:100% !important
    }
    .date{
        width: 80% !important;
    }
    select.form-control{
        width:80% !important
    }
    #ddlSelectChart{
        width : 120px !important;
    }
    .input-icon>.form-control {
        padding-left: 5px;
    }
    #formConfig select.form-control, #formConfig #contextProduct{
        width:60% !important
    }
}
/* Buttons */

/* ------------------------------- */

.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

/* Pages */

/* ------------------------------- */

/* Dashboard Chat */

.chat {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body {
    margin-left: 60px;
}

.chat li.right .chat-body {
    margin-right: 60px;
}

.chat li .chat-body p {
    margin: 0;
    color: #777777;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
    margin-right: 5px;
}

.chat-panel .panel-body {
    height: 350px;
    overflow-y: scroll;
}

/* Login Page */

.login-panel {
    margin-top: 25%;
}

/* Flot Chart Containers */

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}

/* DataTables Overrides */

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: transparent;
}

/*table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
}*/

/*table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
}*/

table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
}

table.dataTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
}
table.dataTable, table.dataTable td, table.dataTable th {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  white-space:nowrap
}
/* Circle Buttons */

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1.33;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.show-grid [class^="col-"] {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    background-color: #eee !important;
}

.show-grid {
    margin: 15px 0;
}
.tcenter span.control-label{
    margin-bottom : 10px;
    font-size : 14px;
    font-weight : bold;
    color : red;
}
.tcenter {
    text-align:center;
}
.submit input.btn {
    margin : 10px 0;
}
.clear{
    clear:both;
}
.control-label .required {
color: #e02222;
font-size: 12px;
padding-left: 2px;
}

.well {
background-color: #fafafa;
border: 1px solid #eee;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.well span{font-size : 13px;}
.label {
font-size: 12px !important;
padding: 3px 6px 3px 6px;
margin-right : 5px;
}
.label, .badge {
font-weight: 300;
text-shadow: none !important;
}
.label-danger, .badge-danger {
background-color: #ed4e2a;
background-image: none !important;
}
.input-xlarge {
width: 80% !important;
}
@media (min-width:768px) and (max-width:992px) {
    .page-header{
        font-size : 25px;
    }
    .navbar-static-side{
        width:200px;
        font-size: 87%
    }
    #page-wrapper{
        padding:0 0;
    }
    .navbar-header img{zoom:75%}
    body{padding-top: 80px;}
    .container{padding:0}
    .navbar-top-links li a{
        padding: 3px;
        min-height: 20px;
    }
    .login .content .input-icon{margin-left:40px}
    select.form-control{width:120px;min-width: 120px;}
    .text-info{width:85px}
    .input-icon>.form-control{padding-left:5px}
    .date{
        width: 160px;
    }
}
@media (min-width: 234px) and (max-width:767px) {
    .flip-scroll table {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    position: relative;
    width: 100%;
}
    .flip-scroll thead {
    display: block;
    float: left;
}
    .flip-scroll th {
    border: 0!important;
    border-bottom: 1px solid #ddd!important;
    border-right: 1px solid #ddd!important;
    font-size: 13px!important;
    padding: 5px;
    width: auto!important;
    display: block;
    text-align: right;
}
    .flip-scroll td, .flip-scroll th {
    margin: 0;
    vertical-align: top;
}
    .flip-scroll td {
    display: block;
    min-height: 1.25em;
    text-align: left;
    border-top: 0!important;
    border-left: 0!important;
    border-right: 0!important;
    border-bottom: 0;
        box-sizing: border-box;
        white-space:nowrap
}
    .flip-scroll thead tr {
    display: block;
}
    .flip-scroll tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}
    .flip-scroll tbody tr {
    border-left: 1px solid #ddd;
}
    .flip-scroll tbody tr {
    display: inline-block;
    vertical-align: top;
    margin-left: -5px;
}
    .flip-scroll .table-bordered.flip-content tbody tr td {
    font-size: 13px;
    line-height: 1.43;
}
    #ReportPartial .alert.alert-info{padding:5px 0}
    h3.titleReport{font-size:14px}
    .removeFilter.btn-circle, .removeVcoin.btn-circle{
        right:0;
    }
    .AddConditionVcoin .content{
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    .AddConditionVcoin .toVcoin, .AddConditionVcoin .fromVcoin {width:40px;float:left;margin-right:10px}
    #config .panel{margin:0}
    #formConfig .text-info{width:70px}
    #formConfig .date{width:150px}
    #formConfig #contextProduct {width:120px}
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
        max-height: inherit;
    }
    select.form-control {
        width: 120px;
        min-width: 120px;
    }
    #selectProduct, .col-xs-12{padding:0}
    .input-xlarge {
        width: 90% !important;
    }

    .page-header {
        font-size: 20px;
    }

    .table-bordered {
        table-layout: auto;
        word-wrap: break-word;
    }

    .navbar-header {
        padding: 7px 18px 0 !important;
    }

    .navbar-top-links li a {
        padding: 5px 15px;
        min-height: inherit;
    }

    .navbar-header img {
        zoom: 90%;
    }

    .navbar-toggle {
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 5px;
    }

    #dataTables tr th {
        text-align: center;
        white-space: nowrap;
    }

    .navbar-top-links {
        text-align: center;
        font-size: 95%;
    }

    .login .content {
        width: 100%;
    }
    .login .content .input-icon{
        width:80%
    }
    .input-icon > .form-control{
        padding-left:33px !important;
    }
    .input-icon {
        /*width: 80%;*/
        margin-left: 25px;
    }
    .input-icon>.form-control {
        padding-left: 5px;
    }
    .nav-third-level li a {
        padding-left: 52px !important;
    }

    ul.dropdown-menu li a {
        font-size: 13px !important;
    }

    .btn {
        font-size: 12px !important;
    }

    body{font-size:12px;padding-top:65px}
    ul.nav-tabs > li > a{padding:5px 5px}
    .form-control{height:30px;padding:3px 7px;width:180px}
    #loginForm input.form-control{width:100% !important}
    #formConfig{padding-top:0}
    .panel-title{font-size:12px}
    #contextProduct, #contextFunction{white-space:normal}

    .dd-list .dd-list{
        padding-left: 20px  !important;
    }
    .dd-handle{
        margin-left:10px  !important
    }
    .dd-item > button{
        left:-12px !important;
    }
}
@media (min-width:235px) and (max-width: 284px) {
    .navbar-top-links li a {
        padding : 8px;
    }
    .navbar-top-links {
        text-align:center;
        font-size:82%;
    }
    .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts {
        width : 210px;
    }
    .navbar-top-links .dropdown-menu li a{
        padding : 3px 10px;
    }
    .navbar-top-links .dropdown-menu li a div{
        white-space :initial;
    }
    .navbar-top-links .dropdown-tasks {
        margin-left : -45px;
    }
    .navbar-top-links .dropdown-alerts{
        margin-left : -97px;
    }
    .navbar-top-links .dropdown-menu li a div{
        text-align : left;
        zoom : 85%;
    }
    .navbar-top-links .dropdown-user{
        text-align : left;
    }
    .navbar-header img{
        zoom: 60%;
    }  
    #side-menu{font-size:80%;}
    .navbar-toggle{zoom:80%;}
    .pagination{zoom:85%}
    .page-header{font-size:17px;margin-top:20px}
    #TemplateContent{zoom:80%;}
    #Loading img{zoom:60%}
    h3.panel-title{font-size:13px !important}
}
@media (max-width: 234px) {
    h3.panel-title{font-size:12px !important}
    .navbar-toggle{
        zoom:70%;
          margin: 0;
    }
    .navbar-header{padding:5px !important;}
    .navbar-header img{zoom:70%}
    .navbar-top-links{font-size: 10px;}
    #TemplateContent{zoom:80%;}
    .pagination{zoom:85%}
    .page-header{font-size:17px;margin-top:20px}
    #side-menu{  font-size: 80%;}
    #Loading img{zoom:60%}
    .navbar-top-links li a{padding:10px 3px;min-height:inherit !important}
}

.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .cf { zoom: 1; }
*:first-child+html .cf { zoom: 1; }

a { color: #2996cc; }
a:hover { text-decoration: none; }

p { line-height: 1.5em; }
.small { color: #666; font-size: 0.875em; }
.large { font-size: 1.25em; }


.dd { position: relative; display: block; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; }

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }

.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }

.dd-item > button { display: block; position: absolute; left:-25px; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
/*.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }*/

.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                      -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                         -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                              linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}


.nestable-lists { 
    display: block; clear: both; padding: 0; width: 100%; border: 0; 
    /*border-top: 2px solid #ddd; border-bottom: 2px solid #ddd;*/ }

#nestable-menu { padding: 0; margin: 20px 0 0; }

#nestable-output,
#nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

#nestable2 .dd-handle {
    color: #fff;
    border: 1px solid #999;
    background: #bbb;
    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
    background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
    background:         linear-gradient(top, #bbb 0%, #999 100%);
}
#nestable2 .dd-handle:hover { background: #bbb; }
#nestable2 .dd-item > button:before { color: #fff; }

@media only screen and (min-width: 700px) {

    .dd { float: left; width: 100%;    padding-bottom: 20px; }
    .dd + .dd { margin-left: 2%; }
    
    .nestable-lists {
         width:80%;
         margin:0 auto
    }
}

.dd-hover > .dd-handle { background: #2ea8e5 !important; }


.dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd3-content:hover { color: #2ea8e5; background: #fff; }

.dd-dragel > .dd3-item > .dd3-content { margin: 0; }

.dd3-item > button { margin-left: 30px; }

.dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
    border: 1px solid #aaa;
    background: #ddd;
    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
    background:    -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
    background:         linear-gradient(top, #ddd 0%, #bbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
.dd3-handle:hover { background: #ddd; }
@media (min-width: 992px) and (max-width: 1024px) {
    .date{
        width: 180px;
    }
    select.form-control{
        width: auto;
        min-width: 150px;
    }
    .input-icon>.form-control{
        padding-left:10px;
    }
}
@media (min-width: 1025px) {
    .date{
        width: 180px;
    }
    select.form-control {
        width: auto;
        min-width: 160px;
    }
    #formConfig #contextProduct{width:140px}
    table.dataTable{
        width:100%;
        table-layout:fixed;
        word-break: break-word;
    }
}


