/* 
    Created on : 25-may-2016, 10:01:12
    Author     : Israel Garaballú
*/

/* GENERAL */
@import url(font-Roboto.css);
@import url(font-StarLiteIdentificacion.css);
@import url(font-StarLiteIdentificacionStar.css);

html, body,
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6,
.tooltip, .popover,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field,.select2-container--bootstrap .select2-selection {
    font-family: 'Roboto' !important;
}
body {
    color: #616161;
}
.toggle-group .btn,
.toggle-group .btn:hover,
.badge {
    font-weight: 400;
}
label {
    margin-bottom: 0px;
    color: #4d4d4d;
    font-weight: 400;
}
.btn,
.btn:hover,
.btn:active,
.btn:focus,
.btn:active:hover {
    border-radius: 0;
}
.btn-primary, .btn-danger, .btn-success {
    font-weight: 400;
}
.btn i {
    font-size: 14px;
}
.slimScrollDiv,
.sidebar {
    overflow: visible !important;
}
.tooltip .tooltip-inner {
    background: #424242;
    border-radius: 0;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #424242;
}
.tooltip.in {
    opacity: 1;
}
.select2-results__option {
    margin: 0;
    min-height: 32px;
}
.display-none {
    display: none;
}
/* HEADER */
.main-header,
.main-header > .navbar {
    background-color: #66b1ff;
}
.main-header .logo {
    width: 100px !important;
    min-height: 70px;
    padding: 9px;
    background-image: url('../img/logo-negativo.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
}
.main-header .logo span {
    display: none !important;
}
.main-header > .navbar {
    margin-left: 100px !important;
    min-height: 70px;
}
.main-header .navbar .sidebar-toggle {
    padding: 20px;
    font-size: 20px;
}
.navbar-custom-menu .user-menu {
    padding: 25px 15px;
}
.main-header .navbar .appInfo {
    float: left;
    height: 40px;
    margin: 15px;
    padding-left: 10px;
    border-left: solid 1px white;
}
.main-header .navbar .appInfo p {
    margin: 0;
    font-weight: 300;
}
.main-header .navbar .appInfo p:first-child {
    color: white;
    font-weight: bold;
}

/* HEADER LOGIN */
.navbar-custom-menu .user-menu {
    font-weight: normal;
    margin-right: 100px;
}
@media (min-width: 768px) {
    .navbar-custom-menu .user-menu {
        margin-right: 0px;
    }
}
.navbar-custom-menu .user-menu span,
.main-header .navbar .appInfo {
    display: none;
}
.navbar-custom-menu .user-menu a {
    padding: 0;
    display: inline;
    margin-left: 15px;
    color: white;
    font-weight: bold;
}
.navbar-custom-menu .user-menu a:hover,
.navbar-custom-menu .user-menu a:focus {
    background: transparent;
    color: #FFFFFF;
}
@media (min-width: 768px) {
    .navbar-custom-menu .user-menu span,
    .main-header .navbar .appInfo {
        display: inline;
    }
}

/* SIDEBAR */
.main-sidebar {
    padding-top: 70px;
}
.main-sidebar, .wrapper {
    background-color: #303030;
}
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    border-left: 0;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a {
    background: #FFFFFF;
    border-left: 0;
    color: #66b1ff;
}
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    color: #6a6a6a;
    padding: 12px 10px;
    text-align: center;
}

/* SIDEBAR COLLAPSE */
.main-sidebar,
.left-side {
    width: 70px;
}
.control-sidebar-bg,
.control-sidebar {
    right: -70px;
    width: 70px;
}
@media (min-width: 768px) {
    .content-wrapper,
    .right-side,
    .main-footer {
        margin-left: 70px;
    }
    .sidebar-collapse .main-sidebar,
    .sidebar-collapse .left-side {
        -webkit-transform: translate(-70px, 0);
        -ms-transform: translate(-70px, 0);
        -o-transform: translate(-70px, 0);
        transform: translate(-70px, 0)
    }
    .control-sidebar-open .content-wrapper,
    .control-sidebar-open .right-side,
    .control-sidebar-open .main-footer {
        margin-right: 70px
    }
}
@media (max-width: 767px) {
    .sidebar-open .content-wrapper,
    .sidebar-open .right-side,
    .sidebar-open .main-footer {
        -webkit-transform: translate(70px, 0);
        -ms-transform: translate(70px, 0);
        -o-transform: translate(70px, 0);
        transform: translate(70px, 0)
    }
    .main-sidebar,
    .left-side {
        -webkit-transform: translate(-70px, 0);
        -ms-transform: translate(-70px, 0);
        -o-transform: translate(-70px, 0);
        transform: translate(-70px, 0)
    }
}
.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 0px !important;
}
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .right-side,
.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 0px !important;
}

/* CONTENT */
.content-wrapper {
    background: #FFFFFF;
}
.content-wrapper .content,
.content-wrapper .content-header {
    max-width: 1262px;
    margin-left: auto;
    margin-right: auto;
}
.content-wrapper .content-header h1 {
    color: #000000;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 500;
}
.fixed .content-wrapper {
    padding-top: 78px;
}

/* CONTENT LIST TABLES */
body.list table {
    border: 0;
}
body.list .table-responsive {
    overflow-x: unset;
    overflow-y: visible;
}
body.list table thead th,
body.list table thead th a,
body.list table thead th span,
body.list table thead th a:hover,
body.list table thead th.sorted,
body.list table thead th.sorted a,
body.list table thead th.sorted span {
    background: transparent;
}
body.list table thead th a,
body.list table thead th span,
body.list table thead th.sorted,
body.list table thead th.sorted a,
body.list table thead th.sorted i,
body.list table thead th.sorted a:hover i {
    color: #616161;
}
body.list .table thead tr th.sorted:first-child,
body.list .table thead tr th.sorted,
body.list .table thead tr th {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #CCCCCC;
    border-left: 0;
}
body.list .table tbody {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
body.list table tbody td.actions a {
    font-weight: 400;
}
body.list table tbody td.actions ul.dropdown-menu {
    background-color: #3D3D3D;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
body.list table tbody td.actions ul.dropdown-menu > li {
    margin: 10px 0;
}
body.list table tbody td.actions ul.dropdown-menu > li > a {
    color: #FFFFFF;
    margin: 0;
}
body.list table tbody td.actions ul.dropdown-menu > li > a:hover,
body.list table tbody td.actions ul.dropdown-menu > li > a:focus,
body.list table tbody td.actions ul.dropdown-menu > li > a:active {
    color: #3D3D3D;
}
.toggle-group .toggle-on,
.toggle-group .toggle-on.btn-xs,
.toggle-group .toggle-on:hover,
.toggle-group .toggle-on:active,
.toggle-group .toggle-on:active:hover {
    background-color: #52BF90;
    border: 0;
}
.toggle.btn-success,
.toggle.btn-success:hover,
.toggle.btn-success:active,
.toggle.btn-success:focus,
.toggle.btn-success:active:hover {
    background-color: #52BF90;
}
.toggle-group .toggle-off,
.toggle-group .toggle-off.btn-xs,
.toggle-group .toggle-off:hover,
.toggle-group .toggle-off:active,
.toggle-group .toggle-off:active:hover {
    background-color: #FE5C5C;
    border: 0;
}
.toggle.btn-danger,
.toggle.btn-danger:hover,
.toggle.btn-danger:active,
.toggle.btn-danger:focus,
.toggle.btn-danger:active:hover {
    background-color: #FE5C5C;
}

/* FORMS */
form[data-view="new"] input.form-control,
form[data-view="new"] .select2 .select2-selection,
form[data-view="edit"] input.form-control,
form[data-view="edit"] .select2 .select2-selection {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    box-shadow: none !important;
    padding: 5px 0px;
}
form[data-view="new"] .select2 *,
form[data-view="edit"] .select2 * {
    box-shadow: none !important;
}
form[data-view="new"] .select2-container--bootstrap.select2-container--focus .select2-selection,
form[data-view="new"] .select2-container--bootstrap.select2-container--open .select2-selection,
form[data-view="new"] .select2-container--bootstrap .select2-dropdown,
form[data-view="edit"] .select2-container--bootstrap.select2-container--focus .select2-selection,
form[data-view="edit"] .select2-container--bootstrap.select2-container--open .select2-selection,
form[data-view="edit"] .select2-container--bootstrap .select2-dropdown {
    border-color: #444444;
}

/* LOGIN */
body.fosuser {
    background-color: #F2F2F2;
}
body.fosuser .login {
    width: 400px;
    max-width: 100%;
    margin: 80px auto;
}
body.fosuser .login .login-logo {
    height: 82px;
    width: 100%;
    background-image: url('../img/logo.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
}
body.fosuser .login label[for="username"],
body.fosuser .login label[for="password"],
body.fosuser .login input[type="text"],
body.fosuser .login input[type="password"] {
    color: black;
    width: 100%;
    float: left;
}
body.fosuser .login label[for="username"],
body.fosuser .login label[for="password"] {
    text-align: center;
    margin-top: 50px;
}
body.fosuser .login input[type="text"],
body.fosuser .login input[type="password"] {
    background-color: transparent;
    border-top: 0px;
    border-right: 0px;
    border-bottom: solid 1px #4d4d4d;
    border-left: 0px;
    box-shadow: none !important;
    padding: 5px 0px;
    text-align: center;
}
body.fosuser .login .login-remember {
    width: 100%;
    float: left;
    margin: 25px auto;
    text-align: center;
}
body.fosuser .login input[type="submit"] {
    background-color: #66b1ff;
    color: white;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 70px;
    border: 0px;
    cursor: pointer;
}

/* MENU ICONS */
.main-sidebar .fa {
    font-size: 24px !important;
    width: auto !important;
}
.main-sidebar .fa-sl {
    font-size: 40px !important;
    width: auto !important;
}
.fa-sl {
    font-family: StarLiteIdentificacion !important;
    text-transform: none;
}
.fa-sl.sl-personal::before {
    content: "c";
}
.fa-sl.sl-tarjetas::before {
    content: "t";
}
.fa-sl.sl-zonas::before {
    content: "z";
}
.fa-sl.sl-user::before {
    content: "u";
}
/*
.fa-sl.sl-seccion::before {
    font-family: StarLiteIdentificacionStar !important;
    font-size: 22px !important;
    margin-right: 10px;
    content: "s";
    color: #66b1ff;
}
*/

/* CALENDAR */
#listado-horarios .loader {
    display: none;
    left: 38%;
    position: absolute;
    margin: 100px auto;
    font-size: 10px;
    border-top: medium solid rgba(85,85,85, 0.2);
    border-right: medium solid rgba(85,85,85, 0.2);
    border-bottom: medium solid rgba(85,85,85, 0.2);
    border-left: medium solid #555555;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
#listado-horarios .loader,
#listado-horarios .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.ui-datepicker-inline {
    width: 100%;
    background: transparent;
    border: 0;
    color: #616161;
}
.ui-datepicker-inline .ui-datepicker-header {
    background: transparent;
    text-transform: uppercase;
}
.ui-datepicker-inline .ui-datepicker-calendar th,
.ui-datepicker-inline .ui-datepicker-calendar td {
    display: inline-table;
    margin: 2%;
    width: 10%;
}
.ui-datepicker-inline .ui-datepicker-calendar td {
    cursor: pointer;
    border: 0;
    text-align: center;
    padding: 0;
}
.ui-datepicker-inline .ui-datepicker-calendar td .ui-state-default {
    width: 25px;
    box-shadow: none;
    display: inline-block;
}
.ui-datepicker-inline .ui-datepicker-calendar td:hover .ui-state-default,
.ui-datepicker-inline .ui-datepicker-calendar td:active .ui-state-default,
.ui-datepicker-inline .ui-datepicker-calendar td .ui-state-hover,
.ui-datepicker-inline .ui-datepicker-calendar td .ui-state-active {
    background: #FFCC00;
    border: 0;
    border-radius: 50%;
    color: #616161;
    text-shadow: none;
}
.ui-datepicker-inline .ui-datepicker-calendar td:active .ui-state-default,
.ui-datepicker-inline .ui-datepicker-calendar td .ui-state-active {
    background: #FFCC00 !important;
}
.ui-datepicker-inline .ui-datepicker-calendar td:hover .ui-state-default,
.ui-datepicker-inline .ui-datepicker-calendar td .ui-state-hover {
    background: #EDEDED;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute !important;
}

/* LECTOR QR */
#info .title {
    border-bottom: solid 1px #CCCCCC;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 25px;
}
#info .form-control {
    background: #ffffff none repeat scroll 0 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    margin-bottom: 25px;
}
#info .image img {
    max-width: 150px;
    margin-bottom: 25px;
}
#cam {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 188px;
    width: 357px;
}
#cam .camToggle {
    position: fixed;
    bottom: 50px;
    right: 328px;
    height: 79px;
    width: 29px;
    background-image: url('/bundles/identificacionBundle/resources/img/lectorQR_cerrar.png');
    cursor: pointer;
}
#cam .camFrame {
    position: absolute;
    height: 188px;
    width: 328px;
    background-image: url('/bundles/identificacionBundle/resources/img/lectorQR_marco.png');
    z-index: 1000;
    margin: 0px 0px 0px 29px;
}
#cam canvas {
    position: absolute;
    width: 193px;
    height: 145px;
    margin: 22px 0px 0px 50px;
}
#cam[data-toggle="closed"] {
    width: 29px;
}
#cam[data-toggle="closed"] .camToggle {
    right: 0px;
    background-image: url('/bundles/identificacionBundle/resources/img/lectorQR_abrir.png');
}
#cam[data-toggle="closed"] .camFrame {
    width: 0px;
}
#cam[data-toggle="closed"] canvas {
    width: 0px;
}