.ks-logo img {
	width: 100px;
}

.ks-navbar {
	background: #e70033;
}

.ks-navbar .navbar-brand .ks-logo {
	text-transform: none;
}

.ks-sidebar .ks-sidebar-wrapper, 
.ks-sidebar .ks-wrapper {
	background: #293e6b !important;
	border-right: 1px solid #293e6b !important;
}

.ks-sidebar .ks-wrapper .nav .nav-item.open .nav-link {
	background: #293e6b80;
}

.ks-sidebar .ks-sidebar-wrapper .nav .nav-item:hover > .nav-link,
.ks-sidebar .ks-wrapper .nav .nav-item:hover > .nav-link {
	background: #293e6b80;
	border-bottom: 1px solid #293e6b80;
}

.ks-sidebar .ks-sidebar-wrapper .nav .nav-item .dropdown-menu .dropdown-item, 
.ks-sidebar .ks-wrapper .nav .nav-item .dropdown-menu .dropdown-item {
	background: #293e6b80;
	border-bottom: 1px solid rgba(0,0,0,.11);
	color: #ccc;
}

.ks-sidebar .ks-wrapper .nav .nav-item .nav-link,
.ks-sidebar .ks-wrapper .nav .nav-item .nav-link > .ks-icon {
	color: #FFF;
}

.btn-primary {
	background: #293e6b;
	border-color: #7e99aa; 
}

.btn-primary:hover {
	background: #7e99aa;
}

.ks-tickets-page > .ks-view > .ks-body > .ks-reply {
	height: 56px;
	padding: 10px; 
}

/* FORMULARIOS */
/* Sobreescribe el estilo del check box para alinearlo a la izquierda*/
.form-control.checkbox {
	width: auto;
}

/* Historial de tickets */
.ks-tabs-container .tab-content .tab-pane.tab-tickets  {
	padding: 0;
}

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

.historial .ks-message {
	border-bottom: 1px solid rgba(57,81,155,.2);
}

.historial .ks-body {
	color: #333;
    padding: 15px 20px;
    -js-display: flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto 0%;
}

.historial .ks-avatar {
	margin-right: 12px;
	-webkit-border-radius: 50%;
	position: relative;border-radius: 50%;

}

.historial .ks-content {
    -webkit-box-flex: 1;
    -webkit-flex: auto 1;
    -ms-flex: auto 1;
    flex: auto 1 0%;
}

.historial .ks-name {
    font-weight: 500;
    color: #25628F;
    margin-bottom: 4px;
}

.historial .ks-message {
    font-size: 12px;
    color: rgba(51,51,51,.6);
}

.historial .ks-time {
    float: right;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 400;
    color: #858585;
    position: relative;
    top: 3px;
}

.historial a {
    cursor: pointer;
}

/* Tickets */
.ks-ticket {
	border-left : 75px solid transparent;
	position: relative;
}

.ks-ticket.danger {
	border-left-color: #ef5350;
}

.ks-ticket.normal {
	border-left-color: #789D4A;
}

.ks-ticket.regular {
    border-left-color: #F1BE48;
}

.ks-ticket.cerrado {
    border-left-color: #1B365D;
}

.ks-ticket .nivel {
    text-align: center;
    width: 60px;
    position: absolute;
    top: 8px;
    left: -69px;
    color: #FFF;
}

.ks-ticket .nivel img{
    width: 60px;
    margin-bottom: 4px;
}

/* Profile */
.ks-navbar .nav-item:hover {
    background: #293e6b;
}

/*Extras*/

.ks-list-simple {
	list-style: none;
    padding-inline-start: 0;
    border-bottom: 1px solid #CCC;
}

.ks-message .label-sm {
    font-size: 10px;
    font-weight: 400;
    color: #858585;
    top: 3px;
}

/*aqui para la tabla del dashboard*/

.tdash{
    position: sticky;
    top: 0; 
    text-align: center;
    vertical-align: middle;
    
}

/*para lo redondo de la tabla*/
.supizq{
    border-radius: 30px 0 0 0;
}

.supder{
    border-radius: 0 30px 0 0;
}

.infizq{
    border-radius: 0 0 30px 0;
}

.infder{
    border-radius: 0 0 0 30px;
}

.divdash{
    overflow-y: auto;
    height: 320px;
}

.nombre{
    width: 200px;
}

/*cosas del login a ver si jala*/

@media (min-width: 1281px) {
    .respon{
        height: 100%;
        position:relative;
        z-index: -1;
        display: block;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .respon{
        height: 1280px;
        position:relative;
        z-index: -1;
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .respon{
        height: 1024px;
        position:relative;
        z-index: -1;
        display: block;
    }
  }

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .respon{
        height: 1024px;
        position:relative;
        z-index: -1;
        display: block;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .respon{
        height: 767px;
        position:relative;
        z-index: -1;
        display: block;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .respon{
        height: 480px;
        position:relative;
        z-index: -1;
        display: block;
    }
}

.div-superior{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #312B6D; 
    height: 5%;
    width:110%;
}

.movido{
    position: absolute; 
    width: 80%; 
    height: 100%; 
    background-color: #312B6D; 
    -moz-transform: rotate(60deg) translate(-450px, 0px) skew(1deg, 0deg);
    -webkit-transform: rotate(60deg) translate(-450px, 0px) skew(1deg, 0deg);
    -o-transform: rotate(60deg) translate(-450px, 0px) skew(1deg, 0deg);
    -ms-transform: rotate(60deg) translate(-450px, 0px) skew(1deg, 0deg);
    transform: rotate(60deg) translate(-450px, 0px) skew(1deg, 0deg);
}

.col-rojo{
    z-index: inherit;
    position: absolute; 
    width:5%; 
    height: 80%;
    left: 0; 
    top: 0; 
    background-color: #ED0000;
    -moz-transform: skew(0deg, -28deg);
    -webkit-transform: skew(0deg, -28deg);
    -o-transform: skew(0deg, -28deg);
    -ms-transform: skew(0deg, -28deg);
    transform: skew(0deg, -28deg);
}

.row-rojito{
    z-index: inherit;
    position: absolute;
    right:0;
    top:0;
    background-color: #ED0000; 
    width:30%;
    height: 5%;
    transform-origin: top left;
    -moz-transform: skew(60deg, 0deg);
    -webkit-transform: skew(60deg, 0deg);
    -o-transform: skew(60deg, 0deg);
    -ms-transform: skew(60deg, 0deg);
    transform: skew(60deg, 0deg);
}

.col-red-right{
    z-index: inherit;
    position: absolute;
    right: 0;
    bottom: 200px;
    width: 5%;
    height: 30%;
    background-color: #ED0000;
    transform-origin:bottom;
    -moz-transform: skew(0deg, 0deg);
    -webkit-transform: skew(0deg, 0deg);
    -o-transform: skew(0deg, 0deg);
    -ms-transform: skew(0deg, 0deg);
    transform: skew(0deg, -40deg);
}

.col-red-base{
    z-index: inherit;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5%;
    height: 50%;
    background-color: #ED0000;
}