@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);


/*
* Variables
*/
:root {
    --primary-color : #d0319b;
    --light-primary-color: #af428b;
    --light-primary: #f9e4f2;
    --secundary-color: #003853;
    --background-color: #d9e4e8;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-grey: #8e9192;
    --color-green: #059205;
    --color-yellow: #f7ef14;
    --color-red: #ca2222;
    --color-light-blue: #c5eaff;
    --altern-buttons-color: #005f8c;
    --accent-color: #ffca28;
}

/**
* ESTILOS DE SKIN PURPLE
*/

.rounded {
    border-radius: .50rem !important
}

.widget-chart-parent {
    display: flex;
}

.widget-chart {
    background-color: var(--background-color);
    width: 100%;
    font-weight: bolder;
}

.widget-chart canvas {
    min-height: 16rem;
}

.skin-purple .main-header .navbar {
    background-color: var(--primary-color);
}

.skin-purple .main-header .navbar .nav > li > a {
    color: var(--color-white);
    height: 50px;
    padding-top: 11px;
}

.skin-purple .main-header .navbar .sidebar-toggle {
    color: var(--color-white);
}

.btn-altern {
    background-color: var(--altern-buttons-color);
    color: white !important;
}


.k-master-row {
    color: var(--color-black) !important;
    font-weight: bolder !important;
    background-color: rgb(221 255 226) !important;
    border-color: var(--light-primary-color) !important;
}

.k-state-selected {
    color: var(--color-black) !important;
    font-weight: bolder !important;
    background-color: #ffd3d5 !important;
    border-color: var(--light-primary-color) !important;
}

.custom-checkbox {
    width: 15px;
    height: 13px;
    border-radius: 50%;
    background-color: #f2f2f2;
    border: 2px solid #fd9fdc;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

/* Cambiar color cuando está marcado */
.custom-checkbox input[type="checkbox"]:checked {
    background-color: #fd9fdc;
    border-color: #d0319b;
}

#divStateRate, .search_div_style {
    border-radius: 10px;
    margin: 0 auto !important;
}

td.infopurple {
    font-weight: bold;
    color: var(--secundary-color);
}

.btn-month {
    font-size: 15px;
}

.dropdown-menu.user-dropdown-menu.show {
    min-width: 58% !important;
}

.dropdown-menu.translate-dropdown-menu.show {
    min-width: 100% !important;
}

.skin-purple .main-header .logo {
    background-color: var(--primary-color);
    color: var(--color-white);
    border-bottom: 0 solid transparent;
    position: fixed;
}

.skin-purple .main-header li.user-header {
    background-color: var(--color-white);
}

.skin-purple .content-header {
    background: transparent;
}

.skin-purple .wrapper,
.skin-purple .main-sidebar,
.skin-purple .left-side {
    background-color: var(--color-black);
}

.skin-purple .user-panel > .info,
.skin-purple .user-panel > .info > a {
    color: var(--color-white);
}

.skin-purple .sidebar-menu > li.header {
    color: var(--primary-color);
    background: var(--color-black);
}

.skin-purple .sidebar-menu > li:hover > a,
.skin-purple .sidebar-menu > li.active > a {
    color: var(--color-white);
    background: var(--color-black);
    border-left-color: var(--primary-color);
}

.skin-purple .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: var(--color-black);
}

.skin-purple .treeview-menu > li > a {
    color: var(--color-grey);
}

.skin-purple .treeview-menu > li.active > a,
.skin-purple .treeview-menu > li > a:hover {
    color: var(--light-primary-color);
}

.skin-purple .sidebar-form {
    border-radius: 3px;
    border: 1px solid var(--color-black);
    margin: 10px 10px;
}

.skin-purple .sidebar-form input[type="text"],
.skin-purple .sidebar-form .btn {
    box-shadow: none;
    background-color: var(--color-black);
    border: 1px solid transparent;
    height: 35px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.skin-purple .sidebar-form input[type="text"] {
    color: var(--color-black);
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
}

.skin-purple .sidebar-form input[type="text"]:focus,
.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
    background-color: var(--color-white);
    color: var(--color-grey);
}

.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
    border-left-color: var(--color-white);
}

.skin-purple .sidebar-form .btn {
    color: var(--color-grey);
    border-top-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 0;
}

/*----------------------- input checkbox ----------------------*/
.selectLoc[type=checkbox]{
    transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari y Chrome */
    -o-transform: scale(1.5); /* Opera */
    padding: 10px;
    margin-top: 2rem;
}


/*----------------------- resets kijho styles ----------------------*/

.bg-purple-custom {
    background-color: var(--primary-color) !important;
    color: var(--color-white);   
}

.bg-blue-custom {
    background-color: var(--secundary-color) !important;
    color: var(--color-white);
}

.bg-light-green {
    background-color: #b3ffdc !important;
    color: var(--color-black);
}

.bg-light-purple {
    background-color: #eeb4da !important;
    color: var(--color-black);
}

.main-sidebar,
.left-side {
    top: 0 !important;
    z-index: 7777 !important;
    padding-top: 0px!important;
}

.logo-lg img {
    display: block;
    margin: 0 auto;
}

.sidebar-collapse .logo-lg {
    opacity: 0;
}

.sidebar-collapse .user-panel {
    height: 50px;
}

.skin-purple .wrapper,
.skin-purple .main-sidebar,
.skin-purple .left-side {
    background-color: var(--color-white);
}

.content-wrapper,
.right-side {
    background-color: var(--secundary-color)!important;
}

.skin-purple .sidebar-menu > li:hover > a {
    background: var(--secundary-color) none repeat scroll 0 0;
    border-left: 4px solid var(--primary-color);
}

.skin-purple .sidebar-menu > li.active > a {
    background: var(--primary-color) none repeat scroll 0 0;
    border-left: 4px solid var(--secundary-color);
}

.skin-purple .sidebar a {
    color: var(--secundary-color);
    font-weight: bold;
    text-decoration: none;
}

.content-body {
    padding: 15px 15px 20px;
}

.panel {
    background-color: var(--color-grey) !important;
    border: none!important;
    box-shadow: none;
}

.nomar {
    margin: 0;
}

.btn-success {
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}

.panel-heading h3 {
    margin: 0;
    padding: 0;
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--primary-color)!;
}

.pdn20 {
    padding: 2em;
}

.parent_container {
    border-radius: 15px;
}

.hr-separator {
    border: 1px solid var(--secundary-color) !important;
    color: var(--secundary-color) !important;
    width: 100%;
    margin: 0 auto;
    opacity: 30 !important;
}

.hr-separator-login {
    border: 1px solid var(--secundary-color) !important;
    color: var(--secundary-color) !important;
    width: 90%;
    margin: 0 auto;
    opacity: 10 !important;
}

.sidebar-menu > li {
    box-shadow: -1px 0 1px var(--light-primary);
    margin: 0 0 1px;
}

.sidebar-menu > li a,
.btn-success {
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    transition: 0.5s all;
}

.btn-danger {
    background-color: var(--secundary-color);
    border-color: var(--color-black);
}

.btn-danger:hover {
    background-color: var(--secundary-color);
    box-shadow: inset 0px 0px 8px  var(--color-black);
    border-color:  var(--secundary-color);
}

.nlblk {
    display: table;
    width: 100%;
}

.main-sidebar,
.left-side {
    position: fixed;
}

.form-group {
    margin-bottom: 10px;
}

.form-control {
    background-color: var(--color-white);
    border-radius: 5px !important;
}

.mt-1 {
    margin-top: 0.5em !important;
}

.mt-2 {
    margin-top: 1em !important;
}

.mt-3 {
    margin-top: 2em !important;
}

.mt-4 {
    margin-top: 2.5em !important;
}

.mb-1 {
    margin-bottom: 0.5em !important;
}

.mb-2 {
    margin-bottom: 1em !important;
}

.mb-3 {
    margin-bottom: 2em !important;
}

.mb-4 {
    margin-bottom: 2.5em !important;
}

.abscal {
    color: var(--primary-color);
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 7777;
}

.green {
    color: var(--color-green);
}

.red {
    color: var(--color-red);
}

.fw-bolder {
    font-weight: bolder !important;
}

.flex {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    align-items: center;
}

.input-group-addon {
    background: var(--primary-color) none repeat scroll 0 0;
    color: var(--color-white);
}

td.day {
    border-top: 1px solid var(--secundary-color) !important;
}

.bic_calendar .header {
    background-color: var(--primary-color);
    color: var(--color-white);
}

.bic_calendar .header a {
    color: var(--secundary-color) !important;
}

.k-widget.k-tooltip {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

.k-pager-wrap .k-link {
    background: var(--color-grey);
    border-color: var(--color-light-blue);
}

.k-pager-wrap .k-link:hover {
    border-color: var(--secundary-color);
    background: var(--secundary-color)!important;
}

.fancyToPayroll button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-style: solid;
    color: var(--color-white);
    border-radius: 4px;
}

.k-pager-wrap .k-pager-nav.k-pager-last,
.k-webkit .k-pager-nav.k-pager-first+.k-link {
    border-right-color: var(--color-light-blue);
}

.sidebar-collapse .user-panel {
    height: 0;
    padding: 0;
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    top: 50px!important;
}

.dropdown-item:hover {
    color: var(--color-white);
    background-color:  var(--secundary-color);
}

.main-sidebar,
.left-side {
    z-index: 555 !important;
}

.main-header {
    position: relative;
    max-height: 100px;
    z-index: 554;
}

.btn-success {
    color: var(--color-white)!important;
}

.fancybox-opened {
    width: 70%!important;
}

td.totalpurple {
    background-color: var(--primary-color);
    color: var(--color-white);
}

.panel-purple {
    background-color: var(--primary-color)!important;
    color: var(--color-white);
    height: 7em;
}

.panel {
    border-radius: 0px;
}

.main-header .navbar-custom-menu,
.main-header .navbar-right {
    width: calc(100% - 42px);
    position: relative;
    height: 50px;
    display: flex;
}

@keyframes draw {
    0% {
        height: 0;
    }
}

.skill {
    width: 100%;
}

.logohome {
    position: absolute;
    z-index: 0;
}

.panel {
    z-index: 1;
    position: relative;
    padding: 0;
}

.purple {
    background-color: var(--primary-color)!important;
    color: var(--color-white)!important;
    position: relative;
}

.panel-heading,
.panel-info {
    border-radius: 0px!important;
    border: none;
}

.panel-body .table {
    color: var(--secundary-color);
    font-size: 11px;
}

.special {
    color: var(--primary-color);
    font-weight: bold;
}

.panel-body .table td {
    text-align: left;
}

.datepicker {
    z-index: 1000!important;
}

/*calendar reset styles*/

.monthAndYear {
    background-color: var(--primary-color);
}

#bic_calendar .header td a {
    margin: 0 auto;
    display: block;
    float: none!important;
    color: var(--color-white)!important;
}

.bic_calendar .table > tbody > tr > td {
    border-top: 1px solid var(--color-grey);
    text-align: center;
}

.bic_calendar .days-month td {
    background: var(--color-white) !important;
    color: var(--color-white);
}

td.day {
    border-top: 0px solid var(--color-black);
    box-shadow: inset 0px -1px 2px var(--color-black);
    overflow: hidden;
}

.bic_calendar a {
    text-decoration: none !important;
    color: var(--color-black) !important;
    cursor: pointer !important;
}

td[id^=bic_calendar_] {
    background-color: var(--color-white);
}

.invalid-day {
    background-color: var(--color-white);
}


/*end calendar reset styles*/

td.fullbtn {
    display: flex;
    justify-content: center;
}

.button.active {
    background-color: var(--secundary-color)!important;
    border: solid 1px var(--secundary-color)!important;
}

.fullbtn button,
.fullbtn a {
    width: 10%;
    border-radius: 0;
}

.tableDate form {
    width: 200px!important;
    margin: 0 auto;
}

.tableDate .date,
.tableDate input {
    width: 100%;
}

.title-fixed-fancy {
    background-color: var(--color-white);
    width: 100%;
    height: 95px;
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 2;
}

.div#contentSearch {
    height: 90px;
}

a#yearToDate {
    margin-top: 15px;
    margin-bottom: 15px;
}

.delete-check:hover {
    color: var(--primary-color);
}

/*
 * Core: General Layout Style
 * -------------------------
*/

.layout-boxed html,
.layout-boxed body {
    height: 100%;
}

/* Layout */

.layout-boxed .wrapper {
    max-width: 1250px;
    margin: 0 auto;
    min-height: 100%;
    box-shadow: 0 0 8px var(--color-black);
    position: relative;
}

.layout-boxed {
    background: url('../img/boxed-bg.jpg') repeat fixed;
}

/*
 * Content Wrapper - contains the main content
 * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper  ```
 */

.content-wrapper,
.right-side,
.main-footer {
    -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    margin-left: 155px;
    z-index: 820;
}

.layout-top-nav .content-wrapper,
.layout-top-nav .right-side,
.layout-top-nav .main-footer {
    margin-left: 0;
}


.content-wrapper,
.right-side {
    min-height: 100vh;
    background-color: var(--color-white);
    z-index: 800;
}

.main-footer {
    background: var(--color-white);
    padding: 15px;
    color: var(--color-grey);
    border-top: 1px solid var(--color-white);
}


/* Fixed layout */
.fixed .main-header,
.fixed .main-sidebar,
.fixed .left-side {
    position: fixed;
}

.fixed .main-header {
    top: 0;
    right: 0;
    left: 0;
}

.fixed .content-wrapper,
.fixed .right-side {
    padding-top: 50px;
}

.fixed.layout-boxed .wrapper {
    max-width: 100%;
}

/* Content */
.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* H1 - H6 font */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Source Sans Pro', sans-serif;
}


/* General Links */
a {
    outline: none;
    text-decoration: none;
}


/*
 * Component: Main Header
 * ----------------------
 */
.main-header > .navbar {
    -webkit-transition: margin-left 0.3s ease-in-out;
    -o-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
    margin-bottom: 0;
    margin-left: 155px;
    border: none;
    height: 50px;
    border-radius: 0;
}

.layout-top-nav .main-header > .navbar {
    margin-left: 0;
}

.main-header #navbar-search-input.form-control {
    background: var(--color-grey);
    border-color: transparent;
}

.main-header #navbar-search-input.form-control:focus,
.main-header #navbar-search-input.form-control:active {
    border-color: var(--color-black);
    background: var(--color-white);
}

.main-header #navbar-search-input.form-control::-moz-placeholder {
    color: var(--color-white);
    opacity: 1;
}

.main-header #navbar-search-input.form-control:-ms-input-placeholder {
    color: var(--color-white);
}

.main-header #navbar-search-input.form-control::-webkit-input-placeholder {
    color: var(--color-white);
}

.main-header .navbar-custom-menu,
.main-header .navbar-right {
    float: right;
}

.div-toggle {
    background-color: var(--primary-color);
    float:left;
}

.div-toggle a {
    color: var(--color-white);
    text-decoration: none;
    padding: 0.5em 0.8em 0.5em 0.8em;
    border-radius: 10px;
}

.div-toggle a:hover {
    background-color: var(--light-primary-color);
}

.main-header .sidebar-toggle .icon-bar {
    display: none;
}

.main-header .logo {
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    display: block;
    float: left;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    width: 155px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 15px;
    font-weight: 300;
    overflow: hidden;
}

.main-header .logo .logo-lg {
    display: block;
}

.main-header .logo .logo-mini {
    display: none;
}

.main-header .navbar-brand {
    color: var(--color-white);
}

.content-header {
    position: relative;
    padding: 15px 15px 0 15px;
}

.content-header > h1 {
    margin: 0;
    font-size: 24px;
}

.content-header > h1 > small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
}

.content-header > .breadcrumb {
    float: right;
    background: transparent;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    padding: 7px 5px;
    position: absolute;
    top: 15px;
    right: 10px;
    border-radius: 2px;
}

.content-header > .breadcrumb > li > a {
    color: var(--color-grey);
    text-decoration: none;
    display: inline-block;
}

.content-header > .breadcrumb > li > a > .fa,
.content-header > .breadcrumb > li > a > .glyphicon,
.content-header > .breadcrumb > li > a > .ion {
    margin-right: 5px;
}

.content-header > .breadcrumb > li + li:before {
    content: '>\00a0';
}

.navbar-toggle {
    color: var(--color-white);
    border: 0;
    margin: 0;
    padding: 15px 15px;
}

.menu-company-name {
    color: var(--color-white);
    font-size: 17px;
    padding-top: 12px;
    position: absolute;
    height: 50px;
    margin-left: 1em;
    font-weight: bold;
}

.navbar-custom-menu .navbar-nav {
    margin: 0;
    float: left;
    height: 50px;
}


/*
 * Component: Sidebar
 * ------------------
*/
.main-sidebar,
.left-side {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    min-height: 100%;
    width: 155px;
    height: auto;
    z-index: 810;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.sidebar {
    padding-bottom: 10px;
}

.sidebar-form input:focus {
    border-color: transparent;
}

.user-panel {
    position: relative;
    width: 100%;
    padding: 10px;
    overflow: hidden;
}

.user-panel:before,
.user-panel:after {
    content: " ";
    display: table;
}

.user-panel:after {
    clear: both;
}

.user-panel > .image > img {
    width: 100%;
    max-width: 45px;
    height: auto;
}

.user-panel > .info {
    padding: 5px 5px 5px 15px;
    line-height: 1;
    position: absolute;
    left: 55px;
}

.user-panel > .info > p {
    font-weight: 600;
    margin-bottom: 9px;
}

.user-panel > .info > a {
    text-decoration: none;
    padding-right: 5px;
    margin-top: 3px;
    font-size: 11px;
}

.user-panel > .info > a > .fa,
.user-panel > .info > a > .ion,
.user-panel > .info > a > .glyphicon {
    margin-right: 3px;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li > a {
    padding: 12px 5px 12px 15px;
    display: block;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li> a > .ion {
    width: 20px;
}

.sidebar-menu > li .label,
.sidebar-menu > li .badge {
    margin-top: 3px;
    margin-right: 5px;
}

.sidebar-menu li.header {
    padding: 10px 25px 10px 15px;
    font-size: 12px;
}

.sidebar-menu li > a > .fa-angle-left {
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 10px;
    margin-top: 3px;
}

.sidebar-menu li.active > a > .fa-angle-left {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.sidebar-menu li.active > .treeview-menu {
    display: block;
}

.sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 5px;
}

.sidebar-menu .treeview-menu .treeview-menu {
    padding-left: 20px;
}

.sidebar-menu .treeview-menu > li {
    margin: 0;
}

.sidebar-menu .treeview-menu > li > a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 14px;
}

.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar-menu .treeview-menu > li > a > .ion {
    width: 20px;
}

.sidebar-menu .treeview-menu > li > a > .fa-angle-left,
.sidebar-menu .treeview-menu > li > a > .fa-angle-down {
    width: auto;
}


/*
 * Component: Sidebar Mini
 */


.sidebar-menu,
.main-sidebar .user-panel,
.sidebar-menu > li.header {
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-menu:hover {
    overflow: visible;
}

.sidebar-form,
.sidebar-menu > li.header {
    overflow: hidden;
    text-overflow: clip;
}

.sidebar-menu li > a {
    position: relative;
}

.sidebar-menu li > a > .pull-right {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -7px;
}


/*
 * Component: Control sidebar. By default, this is the right sidebar.
 */

.control-sidebar-bg {
    position: fixed;
    z-index: 1000;
    bottom: 0;
}

.control-sidebar-bg,
.control-sidebar {
    top: 0;
    right: -155px;
    width: 155px;
    -webkit-transition: right 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out;
    transition: right 0.3s ease-in-out;
}

.control-sidebar {
    position: absolute;
    padding-top: 50px;
    z-index: 1010;
}

.control-sidebar > .tab-content {
    padding: 10px 15px;
}

.control-sidebar.control-sidebar-open,
.control-sidebar.control-sidebar-open+.control-sidebar-bg {
    right: 0;
}

.control-sidebar-open .control-sidebar-bg,
.control-sidebar-open .control-sidebar {
    right: 0;
}

.nav-tabs.control-sidebar-tabs > li:first-of-type > a,
.nav-tabs.control-sidebar-tabs > li:first-of-type > a:hover,
.nav-tabs.control-sidebar-tabs > li:first-of-type > a:focus {
    border-left-width: 0;
}

.nav-tabs.control-sidebar-tabs > li > a {
    border-radius: 0;
}

.nav-tabs.control-sidebar-tabs > li > a,
.nav-tabs.control-sidebar-tabs > li > a:hover {
    border-top: none;
    border-right: none;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.nav-tabs.control-sidebar-tabs > li > a .icon {
    font-size: 16px;
}

.nav-tabs.control-sidebar-tabs > li.active > a,
.nav-tabs.control-sidebar-tabs > li.active > a:hover,
.nav-tabs.control-sidebar-tabs > li.active > a:focus,
.nav-tabs.control-sidebar-tabs > li.active > a:active {
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.control-sidebar-heading {
    font-weight: 400;
    font-size: 16px;
    padding: 10px 0;
    margin-bottom: 10px;
}

.control-sidebar-subheading {
    display: block;
    font-weight: 400;
    font-size: 14px;
}

.control-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0 -15px;
}

.control-sidebar-menu > li > a {
    display: block;
    padding: 10px 15px;
}

.control-sidebar-menu > li > a:before,
.control-sidebar-menu > li > a:after {
    content: " ";
    display: table;
}

.control-sidebar-menu > li > a:after {
    clear: both;
}

.control-sidebar-menu > li > a > .control-sidebar-subheading {
    margin-top: 0;
}

.control-sidebar-menu .menu-icon {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
}

.control-sidebar-menu .menu-info {
    margin-left: 45px;
    margin-top: 3px;
}

.control-sidebar-menu .menu-info > .control-sidebar-subheading {
    margin: 0;
}

.control-sidebar-menu .menu-info > p {
    margin: 0;
    font-size: 11px;
}

.control-sidebar-menu .progress {
    margin: 0;
}

.control-sidebar-dark {
    color: var(--color-grey);
}

.gray-text {
    color: var(--color-grey);
}

.border-content {
    border-left: 10px solid #f8f9fa;
    background-color: var(--light-primary);
}

.indicators_container {
    width: 100%;
    display: flex;
}

.indicators_container > div {
    display: flex;
    margin-top: 1em !important;
    padding: 1em;
    font-size: 1em;
}

.border-content:hover {
    background-color: var(--light-primary) !important;
}

.indicators_container > div > div {
    display: relative;
    justify-content: center;
    justify-items: center;
}

.indicators_container_icon {
    font-size: 2em !important;
    margin-top: 0.5em !important;
}

.control-sidebar-dark,
.control-sidebar-dark + .control-sidebar-bg {
    background: var(--color-black);
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs {
    border-bottom: var(--color-black);
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
    background: var(--color-black);
    color: var(--color-white);
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus {
    border-left-color: var(--color-black);
    border-bottom-color: var(--color-black);
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:active {
    background: var(--color-black);
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
    color: var(--color-white);
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:focus,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:active {
    background: var(--color-black);
    color: var(--color-white);
}

.control-sidebar-dark .control-sidebar-heading,
.control-sidebar-dark .control-sidebar-subheading {
    color: var(--color-white);
}

.control-sidebar-dark .control-sidebar-menu > li > a:hover {
    background: var(--color-black);
}

.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
    color: var(--color-grey);
}

.control-sidebar-light {
    color: var(--color-grey);
}

.control-sidebar-light,
.control-sidebar-light + .control-sidebar-bg {
    background: var(--color-white);
    border-left: 1px solid var(--color-grey);
}

.control-sidebar-light .nav-tabs.control-sidebar-tabs {
    border-bottom: var(--color-white);
}

.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a {
    background: var(--color-white);
    color: var(--color-black);
}

.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus {
    border-left-color: var(--color-grey);
    border-bottom-color: var(--color-grey);
}

.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:active {
    background: var(--color-white);
}

.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:focus,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:active {
    background: var(--color-white);
    color: var(--color-black);
}

.control-sidebar-light .control-sidebar-heading,
.control-sidebar-light .control-sidebar-subheading {
    color: var(--color-black);
}

.control-sidebar-light .control-sidebar-menu {
    margin-left: -14px;
}

.control-sidebar-light .control-sidebar-menu > li > a:hover {
    background: var(--color-white);
}

.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
    color: var(--color-grey);
}


/* Add fade animation to dropdown menus by appending
 the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/

.open:not(.dropup) > .animated-dropdown-menu {
    backface-visibility: visible !important;
    -webkit-animation: flipInX 0.7s both;
    -o-animation: flipInX 0.7s both;
    animation: flipInX 0.7s both;
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transition-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        transform: perspective(400px);
    }
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
    }
}


/* Fix dropdown menu in navbars */

.navbar-custom-menu > .navbar-nav > li {
    position: relative;
    width: 100%;
    text-align: center;
    height: 50px;
}


/*
 * Component: Form
 * ---------------
 */

.form-control {
    border-radius: 0;
    box-shadow: none;
    border-color: var(--color-grey);
}

.form-control:focus {
    border-color: var(--color-light-blue);
    box-shadow: none;
}

.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder {
    color: var(--color-grey);
    opacity: 1;
}

.form-control:not(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group.has-success label {
    color: var(--color-green);
}

.form-group.has-success .form-control {
    border-color: var(--color-green);
    box-shadow: none;
}

.form-group.has-error label {
    color: var(--color-red);
}

.form-group.has-error .form-control {
    border-color: var(--color-red);
    box-shadow: none;
}


/* Input group */

.input-group {
    border-radius: 0;
    border-color: var(--color-grey);
    background-color: var(--color-white);
}


/* button groups */

.btn-group-vertical .btn.btn-flat:first-of-type,
.btn-group-vertical .btn.btn-flat:last-of-type {
    border-radius: 0;
}

.icheck > label {
    padding-left: 0;
}


/* support Font Awesome icons in form-control */

.form-control-feedback.fa {
    line-height: 34px;
}

.input-lg+.form-control-feedback.fa,
.input-group-lg+.form-control-feedback.fa,
.form-group-lg .form-control+.form-control-feedback.fa {
    line-height: 46px;
}

.input-sm+.form-control-feedback.fa,
.input-group-sm+.form-control-feedback.fa,
.form-group-sm .form-control+.form-control-feedback.fa {
    line-height: 30px;
}


/*
 * Component: Button
 * -----------------
 */

.btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
}

.btn.uppercase {
    text-transform: uppercase;
}

.btn.btn-flat {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

.btn:active {
    -webkit-box-shadow: inset 0 3px 5px var(--color-black);
    -moz-box-shadow: inset 0 3px 5px var(--color-black);
    box-shadow: inset 0 3px 5px var(--color-black);
}

.btn:focus {
    outline: none;
}

.btn.btn-file {
    position: relative;
    overflow: hidden;
}

.btn.btn-file > input[type='file'] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: none;
    background: var(--color-white);
    cursor: inherit;
    display: block;
}

.btn-default {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-grey) !important;
    border-radius: 10px !important;
}

.btn-primary {
    background-color: var(--primary-color)!important;
    color: var(--color-white)!important;
    border-color: var(--color-white)!important;
}

#print {
    display: inline-block !important;
}

.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn[class*='bg-']:hover {
    -webkit-box-shadow: inset 0 0 100px var(--color-black);
    box-shadow: inset 0 0 100px var(--color-black);
}

.btn-app {
    border-radius: 3px;
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    text-align: center;
    color: var(--color-grey);
    border: 1px solid var(--color-white);
    background-color: var(--color-white);
    font-size: 12px;
}

.btn-app > .fa,
.btn-app > .glyphicon,
.btn-app > .ion {
    font-size: 20px;
    display: block;
}

.btn-app:hover {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-grey);
}

.btn-app:active,
.btn-app:focus {
    -webkit-box-shadow: inset 0 3px 5px var(--color-black);
    -moz-box-shadow: inset 0 3px 5px var(--color-black);
    box-shadow: inset 0 3px 5px var(--color-black);
}

.btn-app > .badge {
    position: absolute;
    top: -3px;
    right: -10px;
    font-size: 10px;
    font-weight: 400;
}


/*
 * Component: Callout
 * ------------------
 */

.callout {
    border-radius: 3px;
    margin: 0 0 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid var(--color-white);
}

.callout a {
    color: var(--color-white);
    text-decoration: underline;
}

.callout a:hover {
    color: var(--color-white);
}

.callout h4 {
    margin-top: 0;
    font-weight: 600;
}

.callout p:last-child {
    margin-bottom: 0;
}

/*
 * Component: alert
 * ----------------
 */

.alert {
    border-radius: 3px;
}

.alert h4 {
    font-weight: 600;
}

.alert .icon {
    margin-right: 10px;
}

.alert .close {
    color: var(--color-black);
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.alert .close:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.alert a {
    color: var(--color-white);
    text-decoration: underline;
}

.alert-success {
    border-color: var(--color-green);
}

.alert-danger,
.alert-error {
    border-color: var(--color-red);
}

.alert-info {
    border-color: var(--color-light-blue);
}


/*
 * Component: Nav
 * --------------
 */

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
    color: var(--color-black);
    background: var(--color-white);
}


/* NAV PILLS */

.nav-pills > li > a {
    border-radius: 0;
    border-top: 3px solid transparent;
    color: var(--color-black);
}

.nav-pills > li > a > .fa,
.nav-pills > li > a > .glyphicon,
.nav-pills > li > a > .ion {
    margin-right: 5px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    border-top-color: var(--color-light-blue);
}

.nav-pills > li.active > a {
    font-weight: 600;
}


/* NAV STACKED */

.nav-stacked > li > a {
    border-radius: 0;
    border-top: 0;
    border-left: 3px solid transparent;
    color: var(--color-black);
}

.nav-stacked > li.active > a,
.nav-stacked > li.active > a:hover {
    background: transparent;
    color: var(--color-black);
    border-top: 0;
    border-left-color: var(--color-light-blue);
}

.nav-stacked > li.header {
    border-bottom: 1px solid var(--color-grey);
    color: var(--color-black);
    margin-bottom: 10px;
    padding: 5px 10px;
    text-transform: uppercase;
}


/* NAV TABS */

.nav-tabs-custom {
    margin-bottom: 20px;
    background: var(--color-white);
    box-shadow: 0 1px 1px var(--color-black);
    border-radius: 3px;
}

.nav-tabs-custom > .nav-tabs {
    margin: 0;
    border-bottom-color: var(--color-white);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.nav-tabs-custom > .nav-tabs > li {
    border-top: 3px solid transparent;
    margin-bottom: -2px;
    margin-right: 5px;
}

.nav-tabs-custom > .nav-tabs > li > a {
    color: var(--color-black);
    border-radius: 0;
}

.nav-tabs-custom > .nav-tabs > li > a.text-muted {
    color: var(--color-grey);
}

.nav-tabs-custom > .nav-tabs > li > a,
.nav-tabs-custom > .nav-tabs > li > a:hover {
    background: transparent;
    margin: 0;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--color-grey);
}

.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
    border-color: transparent;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--color-light-blue);
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
    background-color: var(--color-white);
    color: var(--color-black);
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    border-top-color: transparent;
    border-left-color: var(--color-white);
    border-right-color: var(--color-white);
}

.nav-tabs-custom > .nav-tabs > li:first-of-type {
    margin-left: 0;
}

.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
    border-left-color: transparent;
}

.nav-tabs-custom > .nav-tabs.pull-right {
    float: none!important;
}

.nav-tabs-custom > .nav-tabs.pull-right > li {
    float: right;
}

.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
    margin-right: 0;
}

.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
    border-left-width: 1px;
}

.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
    border-left-color: var(--color-white);
    border-right-color: transparent;
}

.nav-tabs-custom > .nav-tabs > li.header {
    line-height: 35px;
    padding: 0 10px;
    font-size: 20px;
    color: var(--color-black);
}

.nav-tabs-custom > .nav-tabs > li.header > .fa,
.nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
.nav-tabs-custom > .nav-tabs > li.header > .ion {
    margin-right: 5px;
}

.nav-tabs-custom > .tab-content {
    background: var(--color-white);
    padding: 10px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.nav-tabs-custom .dropdown.open > a:active,
.nav-tabs-custom .dropdown.open > a:focus {
    background: transparent;
    color: var(--color-grey);
}


/* PAGINATION */

.pagination > li > a {
    background: var(--color-white);
    color: var(--color-grey);
}

.pagination.pagination-flat > li > a {
    border-radius: 0 !important;
}


/*
 * Component: Label
 * ----------------
 */

.label-default {
    background-color: var(--color-white);
    color: var(--color-black);
}


/*
 * Component: modal
 * ----------------
 */

.modal {
    background: var(--color-black);
}

.modal-content {
    border-radius: 0;
    -webkit-box-shadow: 0 2px 3px var(--color-black);
    box-shadow: 0 2px 3px var(--color-grey);
    border: 0;
    width: 100% !important;
}

.modal-header {
    border-bottom-color: var(--color-white);
}

.modal-footer {
    border-top-color: var(--color-white);
}

.modal-primary .modal-header,
.modal-primary .modal-footer {
    border-color: var(--color-light-blue);
}


.modal-info .modal-header,
.modal-info .modal-footer {
    border-color: var(--color-light-blue);
}

.modal-success .modal-header,
.modal-success .modal-footer {
    border-color: var(--color-green);
}

.modal-danger .modal-header,
.modal-danger .modal-footer {
    border-color: var(--color-red);
}

/*
 * Page: Login & Register
 * ----------------------
 */

.login-logo,
.register-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}

.login-logo a,
.register-logo a {
    color: var(--color-black);
}

.login-page,
.register-page {
    background: var(--color-white);
}

.login-box,
.register-box {
    width: 360px;
    margin: 7% auto;
}


.login-box-body,
.register-box-body {
    background: var(--color-white);
    padding: 20px;
    border-top: 0;
    color: var(--color-grey);
}

.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback {
    color: var(--color-grey);
}

.login-box-msg,
.register-box-msg {
    margin: 0;
    text-align: center;
    padding: 0 20px 20px 20px;
}

.social-auth-links {
    margin: 10px 0;
}


/*
 * Page: 400 and 500 error pages
 * ------------------------------
 */

.error-page {
    width: 600px;
    margin: 20px auto 0 auto;
}

.error-page > .headline {
    float: left;
    font-size: 100px;
    font-weight: 300;
}

.error-page > .error-content {
    margin-left: 190px;
    display: block;
}

.error-page > .error-content > h3 {
    font-weight: 300;
    font-size: 25px;
}

#add-new-event {
    -webkit-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.external-event {
    padding: 5px 10px;
    font-weight: bold;
    margin-bottom: 4px;
    box-shadow: 0 1px 1px var(--color-black);
    text-shadow: 0 1px 1px var(--color-black);
    border-radius: 3px;
    cursor: move;
}

.external-event:hover {
    box-shadow: inset 0 0 90px var(--color-black);
}


/*
 * General: Miscellaneous
 * ----------------------
 */

.pad {
    padding: 10px;
}

.margin {
    margin: 10px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.margin-bottom-none {
    margin-bottom: 0;
}

.margin-r-5 {
    margin-right: 5px;
}

.inline {
    display: inline;
}

.description-block {
    display: block;
    margin: 10px 0;
    text-align: center;
}

.description-block.margin-bottom {
    margin-bottom: 25px;
}

.description-block > .description-header {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
}

.description-block > .description-text {
    text-transform: uppercase;
}

.bg-navy,
.bg-black,
.callout.callout-danger,
.callout.callout-warning,
.callout.callout-info,
.callout.callout-success,
.alert-success,
.alert-danger,
.alert-error,
.alert-warning,
.alert-info,
.label-danger,
.label-info,
.label-warning,
.label-primary,
.label-success,
.modal-primary .modal-body,
.modal-primary .modal-header,
.modal-primary .modal-footer,
.modal-warning .modal-body,
.modal-warning .modal-header,
.modal-warning .modal-footer,
.modal-info .modal-body,
.modal-info .modal-header,
.modal-info .modal-footer,
.modal-success .modal-body,
.modal-success .modal-header,
.modal-success .modal-footer,
.modal-danger .modal-body,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    color: var(--color-white) !important;
}

.color-purple {
    color: var(--primary-color);
}

.color-blue {
    color: var(--secundary-color);
}

.color-white {
    color: var(--color-white);
}

.bg-gray {
    color: var(--color-white);
    background-color: var(--color-grey) !important;
}

.bg-gray-light {
    background-color: var(--light-primary);
}

.bg-primary-light {
    background-color: var(--light-primary) !important;
    color: var(--color-black) !important;
}

.bg-black {
    background-color: var(--color-black) !important;
}

.bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
    background-color: var(--color-red) !important;
}


.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
    background-color: var(--color-light-blue) !important;
}

.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: var(--background-color) !important;
}

.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
    background-color: var(--color-green) !important;
}

.bg-navy {
    background-color: var(--secundary-color) !important;
}


.bg-red-active,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: var(--color-red) !important;
}

.bg-aqua-active,
.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: var(--color-light-blue) !important;
}


.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: var(--color-light-blue) !important;
}

.bg-green-active,
.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: var(--color-green) !important;
}

.bg-navy-active {
    background-color: var(--secundary-color) !important;
}


[class^="bg-"].disabled {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

.text-red {
    color: var(--color-red) !important;
}

.text-aqua {
    color: var(--color-light-blue) !important;
}

.text-blue {
    color: var(--color-light-blue) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-light-blue {
    color: var(--color-light-blue) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-gray {
    color: var(--color-grey) !important;
}

.text-navy {
    color: var(--secundary-color) !important;
}

.link-muted {
    color: var(--color-grey);
}

.link-muted:hover,
.link-muted:focus {
    color: var(--color-light-blue);
}

.link-black {
    color: var(--color-black);
}

.link-black:hover,
.link-black:focus {
    color: var(--color-black);
}

.hide {
    display: none !important;
}

.no-border {
    border: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-shadow {
    box-shadow: none!important;
}

.list-unstyled,
.contacts-list,
.users-list,
.mailbox-attachments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.flat {
    border-radius: 0 !important;
}

.text-bold,
.text-bold.table td,
.text-bold.table th {
    font-weight: 700;
}

.text-sm {
    font-size: 12px;
}

.jqstooltip {
    padding: 5px!important;
    width: auto!important;
    height: auto!important;
}

.description-block .description-icon {
    font-size: 16px;
}

.no-pad-top {
    padding-top: 0;
}

.position-static {
    position: static!important;
}

.list-header {
    font-size: 15px;
    padding: 10px 4px;
    font-weight: bold;
    color: var(--color-grey);
}

.list-seperator {
    height: 1px;
    background: var(--color-white);
    margin: 15px 0 9px 0;
}

.list-link > a {
    padding: 4px;
    color: var(--color-grey);
}

.list-link > a:hover {
    color: var(--color-black);
}

.font-light {
    font-weight: 300;
}

.user-block:before,
.user-block:after {
    content: " ";
    display: table;
}

.user-block:after {
    clear: both;
}

.user-block img {
    width: 40px;
    height: 40px;
    float: left;
}

.user-block .username,
.user-block .description,
.user-block .comment {
    display: block;
    margin-left: 50px;
}

.user-block .username {
    font-size: 16px;
    font-weight: 600;
}

.user-block .description {
    color: var(--color-grey);
    font-size: 13px;
}

.user-block.user-block-sm .username,
.user-block.user-block-sm .description,
.user-block.user-block-sm .comment {
    margin-left: 40px;
}

.user-block.user-block-sm .username {
    font-size: 14px;
}

.attachment-block {
    border: 1px solid var(--color-white);
    padding: 5px;
    margin-bottom: 10px;
    background: var(--color-white);
}

.attachment-block .attachment-img {
    max-width: 100px;
    max-height: 100px;
    height: auto;
    float: left;
}

.attachment-block .attachment-pushed {
    margin-left: 110px;
}

.attachment-block .attachment-heading {
    margin: 0;
}

.attachment-block .attachment-text {
    color: var(--color-grey);
}

.connectedSortable {
    min-height: 100px;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.sort-highlight {
    background: var(--color-white);
    border: 1px dashed var(--color-white);
    margin-bottom: 10px;
}

.full-opacity-hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

.full-opacity-hover:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}


/*
 * Misc: print
 * -----------
 */

@media print {
    .no-print,
    .main-sidebar,
    .left-side,
    .main-header,
    .content-header {
        display: none!important;
    }
    .content-wrapper,
    .right-side,
    .main-footer {
        margin-left: 0!important;
        min-height: 0!important;
        -webkit-transform: translate(0, 0) !important;
        -ms-transform: translate(0, 0) !important;
        -o-transform: translate(0, 0) !important;
        transform: translate(0, 0) !important;
    }
    .fixed .content-wrapper,
    .fixed .right-side {
        padding-top: 0!important;
    }
    .table-responsive {
        overflow: auto;
    }
    .table-responsive > .table tr th,
    .table-responsive > .table tr td {
        white-space: normal!important;
    }
}

.header-wrap {
    background: var(--color-white);
    position: fixed;
    width: 100%;
    height: 50px;
    top: -10px;
    z-index: 1;
}

.badge-alert {
    background-color: var(--color-black);
    position: absolute;
    left: -7px;
    top: 31%;
}

.bgGreen {
    background-color: var(--color-green);
    color: var(--color-white);
}

.divDownload {
    margin-bottom: 10px;
}

.upld {
    height: 22px;
}

.tableListPay {
    margin-bottom: 20px;
    margin-top: 20px;
}

.frmYears {
    width: 60px !important;
    height: 28px;
}

.btn-success.focus, .btn-success:focus {
    box-shadow: 0 0 0 0.2rem var(--light-primary-color) !important;
}

.btn-anually-withholding  {
    font-size:12px;
}

.yearPicker {
    text-align: center;
    font-size: 18px;
    font-family: arial;
}

.datepicker table tr td span {
    width: 100%;
    text-align: center;
}

.separator {
    border-right: solid 1px var(--color-light-blue);
}

.dashed {
    border-bottom: solid 1px var(--color-light-blue);
}

.active {
    color: var(--color-yellow);
}

.tblIdState {
    display: none;
}

.highlightBtn {
    border: 4px solid var(--color-white);
}

#orderComp > th > a {
    cursor: pointer;
}

#orderEmp > h > a {
    cursor: pointer;
}

#orderUser > th > a {
    cursor: pointer;
}

.tableCalc {
    overflow-x: auto;
}

#empCodeOk {
    color: var(--color-green);
}

.someElement {
    line-height: 23px;
    margin-top: 20px;
}

#btnSearchCompany {
    height: 33px;
}

#gridEditableParent {
    overflow: auto;
    border-radius: 10px;
    padding: 1em;
}

#gridEditable {
    height: 80%;
    margin: 0 em;
}

.k-grid-delete,
.k-grid-edit {
    width: 100%;
    line-height: 1.3em;
    justify-content: center !important;
    margin: 0 auto !important;
}

.days-month td {
    color: var(--light-primary-color)!important;
}

#check {
    color: var(--color-green);
}

#ban {
    color:var(--color-red);
}

.checkDivPaginator {
    margin-left: 20px;
}

.k-header .k-link {
    text-align: center;
}

::-ms-reveal {
    display: none !important;
}

.hideShowPassword-toggle {
    background-image: url('../../../images/wink.png');
    background-position: left;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 100%;
    overflow: hidden;
    text-indent: -9999em;
    width: 44px;
}

.hideShowPassword-toggle-hide {
    background-position: -44px center;
}

.horizontal li > .dropdown-menu {
    width: 250px;
}

.horizontal .dropdown-menu > li > a {
    color: var(--color-black);
    font-size: 17px!important;
    text-align: center;
    white-space: normal;
}

.notifyList {
    padding-bottom: 5px;
}

.EFTPS {
    display: none;
    cursor: pointer;
    color: var(--color-black);
}

.closeImg {
    margin-top: 0.3em;
    margin-right: 0.7em;
    transition: all .2s ease-in-out;
}

.closeImg:hover {
    transform: scale(1.25);
}

.seenNoty {
    margin-top: 0.3em;
    margin-right: 1em;
    transition: all .2s ease-in-out;
}

.seenNoty:hover {
    transform: scale(1.25);
}

#masterPass {
    color:var(--color-black);
    margin-bottom: 5px!important;
}

.dropdown p {
    display: inline-block;
}

.seeAll {
    padding-bottom: 7px;
    background-color: var(--color-white);
    color: var(--color-black);
}

.fncNotifyList {
    margin-top: 5px;
    background-color: var(--color-white);
    border-radius: 2px;
}

.headerNotifyList {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--primary-color);
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bodyNotifyList {
    margin-left: 15px;
    padding-bottom: 7px;
    padding-top: 7px;
}

.FncContainer {
    width: auto;
    height: 500px;
    overflow: scroll;
    overflow-x: hidden;
}

.rowfncy {
    padding: 15px;
}

#listUploads {
    cursor: pointer;
}

.collap {
    cursor: pointer;
}

.not {
    margin-bottom: 15px;
}

.editBtn {
    margin-bottom: 15px;
}

.animated {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

@keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

.tableIncomes {
    width: 45% !important;
    margin-right: 7px !important;
    border-radius: 10px;
}

.tableDesc {
    border-radius: 10px;
    margin-right: 7px !important;
    width: 27% !important;
}

.tableDeductions {
    border-radius: 10px;
    width: 25% !important;
}

.tableCalc > table {
    margin-bottom: 0px !important;
}

.modal-body {
    display: inline-block;
}

.saveNewQuestion {
    color: var(--color-green);
    display: flex;
    align-items: center;
}

.deleteNewQuestion {
    color: var(--color-red);
    display: flex;
}

.questDiv {
    margin-left: 215px;
    margin-right: auto;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes flash {
    0%, 50%, 100% { 
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }

}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

.incomeBtns{
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 12px;
}
.cien {
    width: 100%;
}

.lang li {
    background-color: var(--color-white);
}

.ui-tab.ui-state-active {
    background-color: var(--primary-color) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--primary-color);
}

.datepicker table tr td span {
    width: 100%;
}

.border-div-section {
    background-color: var(--light-primary);
    border-radius: 10px;
    padding: 2em;
}

.border-div-sub-section {
    background-color: white;
    border-radius: 10px;
    padding: 1em;
}

.btn-success:hover {
    background-color: var(--secundary-color) !important;
    color: var(--color-white) !important;
}

.dropdown-toggle::after {
    display: none!important;
}

i.fa.fa-bell.header-icons-size,
i.fa.fa-globe.header-icons-size  {
    font-size: 20px;
}

i.fa.fa-bell.header-icons-size:hover,
i.fa.fa-globe.header-icons-size:hover,
.header-username-text:hover  {
    color: var(--light-primary);
    transform: scale(1.25);
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
    margin-left: 0;
}

.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .right-side,
.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 50px!important;
    z-index: 840;
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 50px!important;
    z-index: 850;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li {
    position: relative;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    margin-right: 0;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
    border-top-right-radius: 4px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
    border-bottom-right-radius: 4px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-right-radius: 4px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    display: block!important;
    position: absolute;
    width: 180px;
    left: 50px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover >  a > span {
    top: 0;
    margin-left: -3px;
    padding: 12px 5px 12px 20px;
    background-color: inherit;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 44px;
    margin-left: 0;
}

.sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
.sidebar-mini.sidebar-collapse .sidebar-form,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
.sidebar-mini.sidebar-collapse .sidebar-menu li.header {
    transform: translateZ(0);
    display: none!important;
    -webkit-transform: translateZ(0);
}

.sidebar-mini.sidebar-collapse .main-header .logo {
    width: 50px;
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    font-size: 18px;
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
    display: none;
}

.sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 50px;
}

.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
    -webkit-transform: translate(-155px, 0);
    -ms-transform: translate(-155px, 0);
    -o-transform: translate(-155px, 0);
    transform: translate(-155px, 0);
}

ul.dropdown-menu.notification-dropdown-menu.show {
    min-width: 100% !important;
}

.see-all-notifications-label {
    background-color: var(--primary-color);
    color: var(--color-white);
    padding: 0.2em 0.7em 0.2em 0.7em;
    border-radius: 7px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

.see-all-notifications-label:hover {
    background-color: var(--secundary-color);
    color: var(--color-white);
    font-weight: bold;
}

.notification-info {
    background-color: var(--secundary-color);
    color: var(--color-white);
    padding: 0.2em 0.7em 0.2em 0.7em;
    border-radius: 7px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

.notification-info:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
    font-weight: bold;
}

.notification-description {
    font-size: 13px;
}

.header-username {
    margin: 0 auto;
}

/* Contador de notificaciones */
.notification-counter {
    position: relative;
    background-color: var(--secundary-color);
    color: var(--color-white);
    border-radius: 3px;
    padding: 1px 5px;
    font: 14px Verdana;
    right: 13px;
    bottom: 10px;
}

.notification-counter:hover {
    transform: scale(1.25);
}

/** Componente - Toggle Bootstrap  **/

.toggle-handle {
    background-color: var(--color-grey)!important;
}

.toggle-on {
    background-color: var(--primary-color)!important;
    border-color: 1px solid var(--primary-color)!important;
    color: var(--color-white)!important;
}

.toggle-off {
    background-color: var(--secundary-color)!important;
    border-color: 1px solid var(--secundary-color)!important;
    color: var(--color-white)!important;
}

/** Componente - Data Tables  **/

div#employee_table_length,
div#user_table_length,
div#company_table_length,
div#stade_length,
div#track_sales_table_length {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

div#employee_table_filter,
div#user_table_filter,
div#company_table_filter,
div#stade_filter,
div#track_sales_table_filter {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

.primary-concepts,
#concept {
    width: 8em !important;
    margin: 0 auto !important;
}

.float-center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.btn-payroll-daily {
    border-radius: 7px 0px 0px 7px !important;
}

.btn-payroll-hours {
    border-radius: 0px !important;
}

.btn-payroll-list {
    border-radius: 0px 7px 7px 0px !important;
}

body::-webkit-scrollbar {
    width: 15px; 
}

body::-webkit-scrollbar-track {
    background: var(--color-grey);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 20px;
    border: 3px solid var(--light-primary-color);
}

div#calendario_lateral {
    width: 95%;
    margin: 0 auto;
}

.bic_calendar .days-month {
    text-align: center !important;
}

a.button-year-previous,
a.button-month-previous,
a.button-month-next,
a.button-year-next {
    text-align: center;
}

.reprint-payroll > i {
    color: var(--color-white);
}

.reprint-payroll > i:hover, 
.delete-check:hover {
    color: var(--primary-color)!important;
}

/** MEDIA QUERIES **/

/* Styles for mobile devices */
@media (max-width: 600px) { 
    * {
        font-size: 17px;
    }

    .btn-success,
    .btn-primary {
        width: 100%;
    }

    #hours,
    #payPeriods {
        width: 100%!important;
        border-radius: 0px;
        margin: 5px 0;
    }

    .table-responsive .content-header,
    .table-responsive .panel-body,
    .table-responsive .content-body {
        padding: 0;
    }

    .div-toggle {
        margin: 0 !important;
        padding: 0 !important;
    }

    .widget-chart {
        display: none;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 601px) and (max-width: 1024px) {

    .control-sidebar-open .content-wrapper,
    .control-sidebar-open .right-side,
    .control-sidebar-open .main-footer {
        margin-right: 155px;
    }
    .modal-content {
        -webkit-box-shadow: 0 2px 3px var(--color-black);
        box-shadow: 0 2px 3px var(--color-grey);
    }
    .div-toggle {
        background-color: var(--primary-color);
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        text-transform: uppercase;
        float:left;
    }
    .div-toggle a {
        color: var(--color-white);
        text-decoration: none;
        padding: 6px 9px 5px 2px;
    }

    .widget-chart-parent {
        display: block;
    }
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 1024px) {

    .main-header .navbar-custom-menu {
        display: inline-block;
    }

    .navbar-collapse.pull-left {
        float: none!important;
    }

    .navbar-collapse.pull-left+.navbar-custom-menu {
        display: block;
        position: absolute;
        top: 0;
        right: 40px;
    }

    .navbar-custom-menu .navbar-nav > li {
        float: left;
    }

    .main-header .navbar-custom-menu {
        display: inline-block;
    }

    .menu-company-name {
        width: 100%;
        position: relative;
        text-align: center;
    }

    .navbar-custom-menu .navbar-nav {
        margin: 0;
        float: left;
        width: 33%;
    }

    .navbar-custom-menu .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }

    .content-header > .breadcrumb {
        position: relative;
        margin-top: 5px;
        top: 0;
        right: 0;
        float: none;
        background: var(--color-white);
        padding-left: 10px;
    }
    
    .content-header > .breadcrumb li:before {
        color: var(--color-grey);
    }

    .main-header .navbar-custom-menu a,
    .main-header .navbar-right a {
        color: inherit;
    }

    .navbar-custom-menu > .navbar-nav > li {
        position: static;
    }

    .tableIncomes {
        border-radius: 10px;
        width: 45%;
        margin-right: 7px;
    }

    .tableDesc {
        border-radius: 10px;
        margin-right: 7px;
        width: 27%;
    }

    .tableDeductions {
        border-radius: 10px;
        width: 25%;
    }

    .error-page > .error-content > h3 {
        text-align: center;
    }

    .error-page > .error-content {
        margin-left: 0;
    }
}