/**
*
* Giovanni M. López Orenday
* @gmlo_89
* dashboard.css
*
**/

@import "bootstrap.less";

body {
    background: #f1f1f1;
}

/**
 * Variables
 */

/**
 * Errors
 */
label.input-error {
    font-size: 11px;
    font-style: italic;
    font-weight: normal;
    color: @state-danger-text;
}


input.input-error,
textarea.input-error,
select.input-error {
    border-color: @state-danger-text;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken(@state-danger-text, 10%);
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%);
      .box-shadow(@shadow);
    }
}




/**
 * Panels
 */

.panel.panel-default {
   -webkit-box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
   -moz-box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
   box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
    .panel-heading {
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
        .glyphicon {
            color: #104985;
            margin-right: 5px;
        }
    }
    .panel-body {
        &> .row {
            margin-left: 10px;
            margin-right: 10px;
        }
    }
}

/**
 * Tabspanel
 */
.tab-content {
    .tab-pane {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
        -moz-box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
        box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
        background: #fff;
        &> .row {
            margin:0;
            padding:15px 10px;

            .form-group {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }
}

/**
 * Datatables.
 */

.dataTables_processing {
    background: #FFF;
    position: absolute;
    left:45%;
    top:20px;
    border: 1px solid #CCC;
    font-size: 14px;
    font-weight: bold;
    padding:10px 10px 10px 30px;

    &:after {
        position: absolute;
        left:5px;
        top:8px;
        content: '\e031';
        font-family: 'Glyphicons Halflings';
        font-size: 18px;
        color: darken(@brand-primary, 30%);

        .icon-refresh-animate

    }
}

.icon-refresh-animate {
    animation-name: rotateThis;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-animation: rotateThis 1s infinite linear;
    -moz-animation: rotateThis 1s infinite linear;
    -ms-animation: rotateThis 1s infinite linear;
    -o-animation: rotateThis 1s infinite linear;

}
@-o-keyframes rotateThis {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-ms-keyframes rotateThis {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-moz-keyframes rotateThis {
 from {-moz-transform:rotate(0deg);}
 to {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotateThis {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes rotateThis {
    from { transform: scale( 1 ) rotate( 0deg );   }
    to   { transform: scale( 1 ) rotate( 360deg ); }
}



.dataTables_wrapper {
    position: relative;
    & .row {
        background: none;
        margin:0;
        color:#333;
        padding:15px 0;
        select, input {
            color: #000;
        }
    }
}


table.dataTable {
    margin-bottom: 0 !important;
    background: #fff;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
box-shadow: 0px 0px 5px 0px rgba(207,207,207,1);
}
table.dataTable thead {
    background: #E9E9E9;
}
table.dataTable thead th.sorting_asc {
    background: none;
    border-bottom-color: @brand-primary;
    &:after {
        content: '\e113';
        float:right;
        font-family: 'Glyphicons Halflings';
        font-size: 11px;
    }
}

table.dataTable thead th.sorting_desc {
    background: none;
    border-bottom-color: @brand-primary;
    &:after {
        content: '\e114';
        float:right;
        font-family: 'Glyphicons Halflings';
        font-size: 11px;
    }
}

table.dataTable thead th.sorting {
    background: none;

    &:after {
        content: '\e150';
        float:right;
        font-family: 'Glyphicons Halflings';
        font-size: 11px;
        color: #999;
    }
}



/* Modulos */
.main-container {
    header {
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        .module-title {
            color: #555;
            font-weight: normal;
            margin:0;
            .glyphicon {
                color: #888;
                margin-right: 10px;
                font-size: 26px;
            }
        }
    }
    .btn-bar {
        margin:0 0 10px 0;
        border-bottom: 1px solid #CCC;
        padding:5px;
    }
}

/* Menú lateral */
.sidebar {
	position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 80px 0 20px 0;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background: url(../img/micro_carbon.png);
    border-right: 5px solid #ddd;

    .brand {
        width: 100%;
        color: #585858;
        font-size: 20px;
        background: #000;
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        text-align: center;
        position: absolute;
        top:0;
        left:0;
        right: 0;
        -webkit-transition-duration: 500ms;
        -moz-transition-duration: 500ms;
        -o-transition-duration: 500ms;
        transition-duration: 500ms;
        &:hover {
            color: #fff;
            text-decoration: none;
        }
    }

    /* Menú */
    .navbar {
        background: none;
        border:none;
    }
    .navbar-collapse {
        padding:0;
    }
    .navbar-nav {
        background: none;
        width: 100%;
        border-top:1px solid #3b3b43;
        & > li {
            border-bottom:1px solid #3b3b43;
            width: 100%;
            a {
                padding:10px 15px;
                text-align: left;
                color: #95a0aa;
                .no-border-radius;
                font-size: 18px;
                .caret {
                    margin-top: 5px;
                }
                .glyphicon {
                    margin:0 15px 0 0;
                }
            }
            ul li a {
                font-size: 16px !important;
                padding:3px 15px 3px 25px;
            }

            ul li.active > a,
            ul li.active > a:hover,
            ul li.active > a:focus
            {
                color: #fff;
                background: none;
                position: relative;
                &:after {
                    position: absolute;
                    right: 0;
                    top:4px;
                    width: 0px;
                    content: ' ';
                    border-right: 10px solid #ddd;
                    border-bottom: 10px solid transparent;
                    border-top: 10px solid transparent;
                    height: 10px;
                }
            }
        }

        & > li.active > a,
        & > li.active > a:hover,
        & > li.active > a:focus
        {
            background: @brand-primary;
            .glyphicon {
                color:  #fff;
            }
            .title {
                color: #fff;
            }


        }
    }
}

/* Menú top */
.navbar-primary {
    margin: 0 -15px 20px -15px;

    .dropdown.user > a {
        padding-top:5px;
        padding-bottom:5px;
        & img {
            width: 35px;
        }
    }

    /* Pata mostrar información del usuario en el menú*/
    .navbar-content  {
        width:320px;
        padding: 15px;
        padding-bottom:10px;
    }
    .navbar-content:before, 
    .navbar-content:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: 15px !important;
    }
    .navbar-footer {
        background-color:#DDD;
    }
    .navbar-footer-content { padding:15px 15px 15px 15px; }
    .dropdown-menu {
        padding: 0px;
        overflow: hidden;
    }
}

/* Login */
body.login {
     background: url("../img/large_leather.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.cont-login {
	width: 400px;
	margin:60px auto 0 auto;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(122,121,122,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(122,121,122,1);
    box-shadow: 0px 0px 10px 0px rgba(122,121,122,1);
    position: relative;
	.header {
		background: #333;
		color: #FFF;

		.title {
			padding: 8px 15px;
			text-align: center;
			font-size: 24px;
			font-weight: bold;
			margin:0;
		}

		.description {
			padding: 4px 15px 8px 15px;
			font-size: 16px;
			margin:0;
		}
	}
    label.input-error {
        display:none !important;
    }
	.body {
		

		.input-group {
			margin: 0px;
			background: #EBEBEB;
			padding: 30px 15px 0 15px;
		}

		

		label.checkbox {
			margin: 0px;
			background: #EBEBEB;
			padding: 25px 15px 25px 15px;
			font-size: 14px;
		}

		label.checkbox input {
			margin:5px 10px;
		}
	}

	.alert {
		margin:0px;
	}

    .login-help {
        position: absolute;
        bottom: -30px;
        right: 0;
    }
}



/* Helpers */
.no-border-radius {
	border-radius: 			0px !important;
    -moz-border-radius: 	0px !important;
    -webkit-border-radius: 	0px !important;
}


.no-margin {
    margin-left:0;
    margin-right:0;
}