.toggleR {
    width: 30%; height: 100Hz; display: inline-block; border-left:1px solid grey;
}

.toggleL {
    display: inline-block; width: 70%;
}

.toggleParent {
    display: flex; width: 100%
}
/*----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------Styles for tag input-----------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

tags-input{display:block}tags-input *,tags-input :after,tags-input :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}tags-input .host{position:relative;margin-top:5px;margin-bottom:5px;height:100%}tags-input .host:active{outline:0}
tags-input .tags{
  -moz-appearance:textfield;
    -webkit-appearance:textfield;
    padding:1px;
    border-radius: 2px;
    overflow:hidden;
    word-wrap:break-word;
    cursor:text;
    background-color:#F4f5f9;
    border-bottom:1px solid #FFFFFF;
    box-shadow: 0px 0px 0px 0 #ffffff inset;
    height:100%;
}
tags-input .tags.focused{
    /*outline:0;
    -webkit-box-shadow:2px 1px 4px rgba(5,139,242,.6);
    -moz-box-shadow:2px 1px 4px rgba(5,139,242,.6);
    box-shadow:2px 1px 4px rgba(5,139,242,.6);*/
    /*-webkit-box-shadow: 0px 7px 15px -10px rgba(5,139,242,1);
    -moz-box-shadow: 0px 7px 15px -10px rgba(5,139,242,1);
    box-shadow: 0px 7px 15px -10px rgba(5,139,242,1);*/

}
tags-input .tags .tag-list{margin:0;padding:0;list-style-type:none}
tags-input .tags .tag-item{
    margin:2px;
    padding:0 5px;
    display:inline-block;
    float:left;
    /*font:8px "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    height:25px;
    line-height:25px;
    border-radius:3px;
    /*background:-webkit-linear-gradient(top,#23AE89 0,#23AE89 47%,#23AE89 100%);
    background:linear-gradient(to bottom,#23AE89 0,#23AE89 47%,#23AE89 100%);*/
    background:-webkit-linear-gradient(top,#470a68 0,#470a68 47%,#470a68 100%);
    background:linear-gradient(to bottom,#470a68 0,#470a68 47%,#470a68 100%);
    color: white;
    font-size: 10px;
}
tags-input .tags .tag-item.selected{background:-webkit-linear-gradient(top,#febbbb 0,#fe9090 45%,#ff5c5c 100%);background:linear-gradient(to bottom,#febbbb 0,#fe9090 45%,#ff5c5c 100%)}
tags-input .tags .tag-item .remove-button{
    margin:0 0 0 5px;
    padding:0;
    border:none;
    background:0 0;
    cursor:pointer;
    vertical-align:middle;
    font:700 16px Arial,sans-serif;color:white;
}
tags-input .tags .tag-item .remove-button:active{color:red}
tags-input .tags .input{
    border:0;
    outline:0;
    margin-left:3px;
    margin-top:1px;
    padding:0;
    padding-left:5px;
    float:left;
    height:26px;
    /*font:12px "Helvetica Neue",Helvetica,Arial,sans-serif*/
    background: #F4f5f9;
}
tags-input .tags .input.invalid-tag{color:red}tags-input .tags .input::-ms-clear{display:none}tags-input.ng-invalid .tags{-webkit-box-shadow:0 0 3px 1px rgba(255,0,0,.6);-moz-box-shadow:0 0 3px 1px rgba(255,0,0,.6);box-shadow:0 0 3px 1px rgba(255,0,0,.6)}tags-input[disabled] .host:focus{outline:0}tags-input[disabled] .tags{background-color:#eee;cursor:default}tags-input[disabled] .tags .tag-item{opacity:.65;background:-webkit-linear-gradient(top,#f0f9ff 0,rgba(203,235,255,.75)47%,rgba(161,219,255,.62)100%);background:linear-gradient(to bottom,#f0f9ff 0,rgba(203,235,255,.75)47%,rgba(161,219,255,.62)100%)}tags-input[disabled] .tags .tag-item .remove-button{cursor:default}tags-input[disabled] .tags .tag-item .remove-button:active{color:#585858}tags-input[disabled] .tags .input{background-color:#eee;cursor:default}tags-input .autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:999;width:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}tags-input .autocomplete .suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}tags-input .autocomplete .suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;/*font:12px "Helvetica Neue",Helvetica,Arial,sans-serif;*/font-size: 10px;color:#000;background-color:#fff}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#fff;background-color:#0097cf}tags-input .autocomplete .suggestion-item em{/*font:normal bold 12px "Helvetica Neue",Helvetica,Arial,sans-serif;*/font-size: 10px;color:#000;background-color:#fff}

/*----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------Styles for jssor-----------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/
#item1 {
    background: #69D2E7;
    height:100%;
    width:320px;
}

#item2 {
    background: #F38630;
    height: 100%;
    width: 320px;
}

#item3 {
    background: #A7DBD8;
    height: 100%;
    width: 320px;
}

div.carouselWrap {
    width: 1036px;
    background: white;
    height: 100%;
    color: white;
    font-family: "Gill Sans / Gill Sans MT", sans-serif;
    font-size: 3em;
    line-height: 568px;
    text-align: center;
}

.animate {
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s;
}

div.float--left {
    float: left;
}

/**
* Generic boilerplate CSS
*/
* { margin: 0px; padding: 0px; }
body {
    background: #2e2c35;
    width: 100%; height: 100%;
}
div.device {
    height: 798px; width: 378px;
    width: 440px; height: 807px;
    background: url('http://creativeda.sh/sandbox/bounce_menu/img/iphone_black.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute; margin: auto;
    top: 0px; bottom: 100px; left: 0px; right: 0px;
}
div.screen {
    height: 568px; width: 320px;
    position: absolute;
    top: 119px; left: 60px;
    overflow: hidden;
}
div.content {
    height:100%;
    width:100%;
    background: #375585;
    position: absolute;
    top: 0px; left: 0px;
    z-index: 300;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}


/*--------------------------------------------------------------------------------------------------------------------*/

/* To avoid a horizontal scrollbar when the page enters/leaves the view */

.disabled {
    pointer-events:none;
    opacity:0.6;
}

.ngIncludeItem {
    /*position: absolute;*/
    top: 35px;
    bottom: 0;
    right: 0;
    left: 0;
    animation-duration: 0.30s;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.30s;
    -webkit-animation-timing-function: ease-in-out;
}

/* colores para los marcadores del FormWizard*/
.firstPage {
    background-color: blue;
}

.secondPage {
    background-color: red;
}

.thirdPage {
    background-color: green;
}

/* When the page enters, slide it from the right */
.ngIncludeItem.ng-enter {
    animation-name: slideFromRight;
    -webkit-animation-name: slideFromRight;
}
/* When the page enters and moveToLeft is true, slide it from the left(out of the user view) to the right (left corner) */
.ngIncludeItem.moveToLeft.ng-enter {
    animation-name: slideFromLeft;
    -webkit-animation-name: slideFromLeft;
}
/* When the page leaves, slide it to left(out of the user view) from the left corner,
    in other words slide it from the left(out of the view) to the left corner but in reverse order */
.ngIncludeItem.ng-leave {
    animation-name: slideFromLeft;
    animation-direction: reverse;
    -webkit-animation-name: slideFromLeft;
    -webkit-animation-direction: reverse;
}
/* When the page leaves, slide it to the right(out of the user view) from the the left corner,
    in other words, slide it from the right but in reverse order  */
.ngIncludeItem.moveToLeft.ng-leave {
    animation-name: slideFromRight;
    animation-direction: reverse;
    -webkit-animation-name: slideFromRight;
    -webkit-animation-direction: reverse;
}

@keyframes slideFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideFromRight {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-webkit-keyframes slideFromLeft {
    0% {
        -webkit-transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}






/* Styles go here */

.stuff-to-show-left {
    position: relative;
    height: 100px;
    -webkit-transition:left linear 0.3s;
    transition:left linear 0.3s;
    left: 0;
}

.stuff-to-show-left.ng-hide {
    left: -100px;
}

.stuff-to-show-left.ng-hide-add, .stuff-to-show-left.ng-hide-remove {
    display:block!important;
}


/*Color personalizado para los tabs inactivos de un tabset*/
.ui-tab-container .nav-tabs {
    background-color: #D0D2D3!important;
}

.table-dynamic .table-bordered thead th .glyphicon-chevron-up, .table-dynamic .table-bordered thead th .glyphicon-chevron-down {
    color: #ffffff;
}
.table-dynamic .table-bordered thead th .glyphicon-chevron-up.active, .table-dynamic .table-bordered thead th .glyphicon-chevron-down.active {
    color: #0e427b;
}

/*---Personalizar cursor de switch en modo deshabilitado----*/
.switch-disabled {
    cursor: not-allowed!important;
    background-color: #EEEEEE!important;
}

/*----Callout Big----------*/
.bs-callout {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-radius: 3px;
    border: 1px solid #eee;
    border-left-width: 5px;
    margin: 20px 0;
    padding: 20px;
}
.bs-callout-success h4 {
    color: #23AE89;
}
/*------------Callout Small------------------*/
.sm-callout {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border: 0px solid #eee;
    border-left-width: 3px;
    padding: 5px;
}
/*------------Callout Color------------------*/
.bs-callout-success {
    background-color: #f3faf3;
    border-left-color: #23AE89;
}
.callout-danger {
    background-color: #f3faf3;
    border-left-color: #ce4844;
}
/*-------Personalizar colores del Navigation Wizard------------*/
.steps-indicator li.current a:before {
    background-color: #0E427B;
}
.steps-indicator li.done a:before {
    background-color: #339933;
}
.steps-indicator li.editing a:before {
    background-color: #ff0000;
}
/*-------Agregar border-left------------*/
.border-left-sm {
    border-left: solid 1px;
}

/*-------------Mostrar en una sola linea la fecha y hora de un evento en la bitácora------------*/
.ui-timeline .tl-item .tl-body .tl-time {width: 200px!important;}
.ui-timeline .tl-item.alt .tl-body .tl-time {right: -270px!important;left: auto!important;}
.ui-timeline .tl-item .tl-body .tl-time {left: -270px!important;right: auto!important;}


/*Estilos para el div que carga archivos (DragAndDrop DigitalCenter)*/
.dropbox {
    border: 2px dashed #bbb;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold;
    color: #bbb;
    margin-bottom: 20px;
}

.dropbox.over {
    border: 2px dashed #0e427b;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold;
    color: #0e427b;
    margin-bottom: 20px;
}

.inputUploadMultipleFiles span {
    color:white;
}
.file-input-name{
    font-size: 0px!important;
}

.overFolderDG:hover{
    text-decoration: underline;
}
/*Color rojo radioactivo para las notificaciones*/


/* --------------------------------------ESTILOS PARA EL LOOK AND FEEL -----------------------------------------------
 ---------------------------------------------------------------------------------------------------------------------*/
/*Color del header*/
.header-color-custom {
    background-color: #470a68 !important;
    border-color: #470a68 !important;
}


.btn-primary{
    background-color: #D0006F!important;
    border-color: #D0006F!important;
}

/*Color del header de las tablas*/
.header-table-color-custom {
    background-color: #E0DAD1 !important;
    color : #470a68;
}

.th-line tr th div{
    line-height: 13px !important;
}

/*Color del los paneles DEFAULT*/
.panel-default > .panel-heading {
    color: #470a68;
    background-color: #EAE8E4 !important;
    border-color: #EAE8E4 !important;
}
.panel-default > .panel-heading strong {
    color: #470a68;
}

.panel-heading strong {
    color: #470a68;
}

.modal-header h4{
    color: #470a68;
}

/*Color de los estatus EN_CAPTURA*/
.badge-warning{
    background-color: #BAAE9D !important;
    border-color: #BAAE9D !important;
}

/*Color del estatus de comentarios en tickets */
.ticket-comment > .info-ticket {
    border-color: #1bafd9 !important;
    color: #5BC0DE !important;
}

/*Color del los paneles PRIMARY*/
.panel-primary > .panel-heading {
    color: #fff;
    background-color: #808080 !important;
    border-color: #808080 !important;
}

.panel-primary {
    border-color: #808080!important;
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #808080!important;
}
.panel-primary > .panel-heading .badge {
    color: #808080!important;
    background-color: #fff!important;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #808080!important;
}

/*Color del los paneles skr*/
.panel-primary-skr > .panel-heading {
    color: #fff;
    background-color: #470a68 !important;
    /*border-color: #470a68 !important;*/
    font-family: Lato !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 10px 10px 0 0 !important;
}

.panel-primary-skr {
    font-family: Lato !important;
    /*border-color: #470a68!important;*/
}

.panel-primary-skr > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #470a68!important;
}

.border-color-primary {
    border: 1px solid #470a68!important;
}

.panel-primary-skr > .panel-heading {
    border-radius: 10px 10px 0 0 !important;
    text-transform: none !important;
}
.panel-primary-skr > .panel-heading .badge {
    color: #470a68!important;
    background-color: #470a68 !important;
}
.panel-primary-skr > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #470a68!important;
}

.text-board-blue {
    color: #006AA1;
}


/*Color rojo radioactivo para las notificaciones*/
.bg-severity-one {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}
.bg-severity-two {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
.bg-severity-three {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.bg-severity-four {
    background-color: #FF2300;
    border-color: #dd2300;
    color: #000;
}

/*-----------------------FONT MONTSERRAT------------------------------------*/
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Monsterrat/Montserrat-Hairline.otf");
}
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Monsterrat/Montserrat-Light.otf");
}
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Monsterrat/Montserrat-Black.otf");
}
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Monsterrat/Montserrat-Bold.otf");
}

@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Monsterrat/Montserrat-Regular.otf");
}


/*-----------------------FONT LATO------------------------------------*/
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Italic.woff2') format('woff2'),
    url('../fonts/Lato/Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-BlackItalic.woff2') format('woff2'),
    url('../fonts/Lato/Lato-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Bold.woff2') format('woff2'),
    url('../fonts/Lato/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-BoldItalic.woff2') format('woff2'),
    url('../fonts/Lato/Lato-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Black.woff2') format('woff2'),
    url('../fonts/Lato/Lato-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Regular.woff2') format('woff2'),
    url('../fonts/Lato/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-LightItalic.woff2') format('woff2'),
    url('../fonts/Lato/Lato-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato Hairline';
    src: url('../fonts/Lato/Lato-HairlineItalic.woff2') format('woff2'),
    url('../fonts/Lato/Lato-HairlineItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato Hairline';
    src: url('../fonts/Lato/Lato-Hairline.woff2') format('woff2'),
    url('../fonts/Lato/Lato-Hairline.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Light.woff2') format('woff2'),
    url('../fonts/Lato/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}



/*estilo ultra condensed para las tablas*/
.ultra-condensed > thead > tr > th, .ultra-condensed > thead > tr > td, .ultra-condensed > tbody > tr > th, .ultra-condensed > tbody > tr > td, .ultra-condensed > tfoot > tr > th, .ultra-condensed > tfoot > tr > td {
    padding: 1px!important;
    font-size: 13px!important;
}




/*--------Colores personalizados para ProgressBar--------------*/
#loading-bar .bar {
    background: #D0006F;
    height: 5px;
}
/* Fancy blur effect */
#loading-bar .peg {
    position: absolute;
    width: 70px;
    right: 0;
    top: 0;
    height: 2px;
    opacity: .45;
    -moz-box-shadow: #00FFFF 2px 0px 6px 2px;
    -ms-box-shadow: #00FFFF 2px 0px 6px 2px;
    -webkit-box-shadow: #00FFFF 2px 0px 6px 2px;
    box-shadow: #00FFFF 2px 0px 6px 2px;
    /*box-shadow: #fff 1px 0 6px 1px;*/
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.bg-white {
    background-color: white;
}

/*----------Agregar asterisco para campos requeridos------------------*/
:required  {
    background: url(../images/required-mark.png) no-repeat!important;
    background-position:left top!important;
    background-size: 1rem!important;
    background-color: #FFF!important;
}

.form-control[disabled]:required, .form-control[readonly]:required, fieldset[disabled] .form-control:required  {
    background: unset!important;
    background-position:unset;
    background-size: unset;
    background-color: #EEEEEE!important;
}

/*----------Estilo para el escroll en las tablas de Reportes-----------*/
.scrollableContainer {
  white-space: normal !important;
    height: 610px;
    position: relative;
    padding-top: 35px;
    overflow: hidden;
}
.scrollableContainer .headerSpacer {
  background-color: #E0DAD1 !important;
  white-space: normal !important;
    border: 1px solid #d5d5d5;
    border-bottom-color: #bbb;
    position: absolute;
    height: 40px;
    top: 0;
    right: 0;
    left: 0;
}
.scrollableContainer th .orderWrapper {

    top: 0;
    right: 2px;
    cursor: pointer;
}
.scrollableContainer th .orderWrapper .order {
    font-size: 8pt;
    color: #BDBDBD;
}
.scrollableContainer th .orderWrapper .active {
    color: #464646;
}

.scrollArea {
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #d5d5d5;
    /*  the implementation of this is still quite buggy; specifically, it doesn't like the
        absolutely positioned headers within
    -webkit-overflow-scrolling: touch;  */
    -webkit-overflow-scrolling: auto;
}
.scrollArea table {
    overflow-x: auto;
    overflow-y: auto;
    margin-bottom: 0;
    width: 100%;
    border: none;
    /*border-collapse: separate;*/
}


.scrollArea::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: transparent;
}

.scrollArea::-webkit-scrollbar
{
	width: 9px;
  height: 9px;
	background-color: transparent;
}

.scrollArea::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
	background-color: #767676;
}

.scrollArea table th {
    padding: 0 !important;
    border: none !important;
    min-width: 50px;
}
.scrollArea table .th-inner {
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    top: -10px;
    vertical-align: top;
    height: 50px;
    line-height: 50px;
    background-color: #E0DAD1 !important;
    color : #470a68;
    margin-left: 5px;
    margin-right: 5px;

}

.scrollArea table .th-inner {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
  white-space: normal !important;
}
.scrollArea table .th-inner {
  white-space: normal !important;
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.scrollArea table .th-inner {
  white-space: normal !important;
  white-space: normal;
}


/***/

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover > .sub-menu {
  visibility: visible;
  display: block;
}

.dropdown-menu .sub-menu-r {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover > .sub-menu-r {
  visibility: visible;
  display: block;
}

/* -----------------Estilos para el scroll en siniestros --------------------------*/
.scrollAreaIncident::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: transparent;
}
.scrollAreaIncident::-webkit-scrollbar
{
	width: 9px;
  height: 9px;
	background-color: transparent;
}

.scrollAreaIncident::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
	background-color: #767676;
}
.head-link {
  color: white;
}
.head-link:hover {
  color: #EAE8E4;
  text-decoration: none;
}
.head-link:active {
  color: #EAE8E4;
  text-decoration: none;
}

/*Cuando el ordenamiento en una tabla esta activado */
.orderActive {
    color: #006AA1!important;
}

.highlighted {
  font-weight: bold;
  color: #555555;
}

/*Resaltar reporte seleccionado en el modulo de Reportes Board*/
.report-board-selected {
  font-weight: bold !important;
}

.report-board-unselected {
  opacity: 0.2 !important;
}

/*Se oculta la tabla de las graficas-*/
.chatClassHideTable div table{
  display: none !important;
}

/*Estilos para sub menus de dropdown*/

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/*Colores para tipos de documentos*/
.policy-doc {
    color: #3D6108;
}
.policy-doc-bg {
    background-color: #D7F8A8;
}
.bail-doc {
    color: #073C6F;
}
.bail-doc-bg {
    background-color: #CEE2F5;
}
.endorsement-doc {
    color: #505014;
}
.endorsement-doc-bg {
    background-color: #FFFFC0;
}
.ot-endorsement-doc {
    color: #AF7F18;
}
.ot-endorsement-doc-bg {
    background-color: #FFFCF6;
}

/*--Estilos para fijar una columna de una tabla -->>>>*/
@media(min-width:801px) {
    .fixed-column {
        position: absolute;
        width: 90px;
        right: 15px;
        background: #ffffff;
        height: 34.5667px;
    }
    .sm-34 {
        height: 34.5667px!important;
    }
}
@media(max-width:800px) {
    .span-col {
        display: none!important;
    }
}
/*<<<<--Estilos para fijar una columna de una tabla --*/


.cursor-pointer {
    cursor: pointer;
}
.pt-3 {
    padding-top: 1rem!important;
}

/*------------Colores personalizados para marcas de Biacoras--------------------*/

.lbk-access {
    background-color: #795548;
    color: #FFFFFF;
}
.lbk-access-err {
    background-color: #d50000;
    color: #FFFFFF;
}
.lbk-cancel {
    background-color: #6c757d;
    color: #FFFFFF;
}
.lbk-create {
    background-color: #28a544;
    color: #FFFFFF;
}
.lbk-delete {
    background-color: #f44336;
    color: #FFFFFF;
}
.lbk-emission {
    background-color: #007bff;
    color: #FFFFFF;
}
.lbk-manual {
    background-color: #17a1b7;
    color: #FFFFFF;
}
.lbk-query {
    background-color: #607d8b;
    color: #FFFFFF;
}
.lbk-query-err {
    background-color: #d50000;
    color: #FFFFFF;
}
.lbk-reactivate {
    background-color: #009688;
    color: #FFFFFF;
}
.lbk-renovation {
    background-color: #33393f;
    color: #FFFFFF;
}
.lbk-update {
    background-color: #fcbf07;
    color: #FFFFFF;
}

/*----------------------------------------------------------------------------------------------------------------------
--------------------------------------Styles for tag input Campaign Wizard----------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

.formWizardCampaign tags-input .tags .input{
    background: #FFFFFF;
}

.formWizardCampaign tags-input .tags{
    background-color:#FFFFFF;
}

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

.only-padding-top{
    padding: 10px 0 0 0 !important;
}

.padding-5{
    padding: 5px 5px 5px 5px!important;
}

.tab-campaign{

}

.tab-campaign-mobile .tab-content{
    padding: 0 !important;
}

@media (max-width: 767px) {
    .my-modal-mobile .modal-dialog{
        margin: 3px 3px 3px 3px !important;
    }
}



/*Estilos usados para div de carga (puntos)*/
.ellipsis {
    text-align: center;
    display: inline-flex;
    vertical-align: middle;
}

.ellipsis > div {
    width: 13px;
    height: 13px;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.ellipsis.md > div {
    width: 33px;
    height: 33px;
}

.ellipsis.white > div{
    background-color: #fff;
}

.ellipsis.primary > div{
    background-color: #D0006F;
}

.ellipsis .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.ellipsis .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

/*Estilos para el input de busqueda general*/
.div-search{

}
.div-search > ul{
    max-height: 80vh;
    overflow-y: auto;
}

.div-search > ul::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: transparent;
}

.div-search > ul::-webkit-scrollbar
{
    width: 9px;
    height: 9px;
    background-color: transparent;
}

.div-search > ul::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
    background-color: #767676;
}

/*Estilos para el input de busqueda en tickets*/
.div-search-ticket{

}
.div-search-ticket > ul{
    max-height: 40vh;
    overflow-y: auto;
}

.div-search-ticket > ul::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: transparent;
}

.div-search-ticket > ul::-webkit-scrollbar
{
    width: 9px;
    height: 9px;
    background-color: transparent;
}

.div-search-ticket > ul::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
    background-color: #767676;
}

/*Estilos para usar typeahead con delay en modales*/
.div-search-typeahead-modal{

}
.div-search-typeahead-modal > ul{
    max-height: 40vh;
    overflow-y: auto;
}

.div-search-typeahead-modal > ul::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: transparent;
}

.div-search-typeahead-modal > ul::-webkit-scrollbar
{
    width: 9px;
    height: 9px;
    background-color: transparent;
}

.div-search-typeahead-modal > ul::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
    background-color: #767676;
}

.table-logbook-ticket > thead > tr > th {
    padding: 1px;
}
.table-logbook-ticket > body > tr > td {
    padding: 1px;
}



treecontrol {
    /* prevent user selection */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* default */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size:13px;
    color: #555;
    text-decoration: none;
}

treecontrol ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    overflow: hidden;
}

/*treecontrol li {

    padding: 0 0 0 20px;
    line-height: 20px;
}*/

treecontrol li {
    position: relative;
    padding: 0 0 0 80px !important;
    line-height: 4px !important;
}

treecontrol li.tree-expanded i.tree-leaf-head, treecontrol li.tree-collapsed i.tree-leaf-head {display:none;}
treecontrol li.tree-expanded i.tree-branch-head, treecontrol li.tree-collapsed i.tree-branch-head {display:inline;}
treecontrol li.tree-leaf i.tree-branch-head {display:none;}
treecontrol li.tree-leaf i.tree-leaf-head {display:inline;}

treecontrol li i.tree-branch-head {
    cursor: pointer;
}

treecontrol li .tree-label {
    cursor: pointer;
    display: inline;
}

treecontrol li .tree-unselectable {
    cursor: not-allowed;
}

treecontrol.tree-classic li.tree-expanded i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/folder.png") no-repeat;
}

treecontrol.tree-classic li.tree-collapsed i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/folder-closed.png") no-repeat;
}

treecontrol.tree-classic li.tree-leaf i.tree-leaf-head {
    padding: 1px 10px;
    background: url("../images/tree/file.png") no-repeat;
}

treecontrol.tree-classic li .tree-selected {
    background-color: #aaddff;
    font-weight: bold;
}

treecontrol.tree-classic li .tree-unselectable {
    color: #ddd;
}

treecontrol.tree-light li.tree-expanded i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/node-opened-2.png") no-repeat;
}

treecontrol.tree-light li.tree-collapsed i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/node-closed-2.png") no-repeat;
}

treecontrol.tree-light li.tree-leaf i.tree-leaf-head {
    padding: 1px 10px;
    width: 16px; height: 16px;
    background: none no-repeat;
}

treecontrol.tree-light li .tree-selected {
    font-weight: bold;
}

treecontrol.tree-light li .tree-unselectable {
    color: #ddd;
}

treecontrol.tree-dark li.tree-expanded i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/node-opened-light.png") no-repeat;
}

treecontrol.tree-dark li.tree-collapsed i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/node-closed-light.png") no-repeat;
}

treecontrol.tree-dark li.tree-leaf i.tree-leaf-head {
    padding: 1px 10px;
    width: 16px; height: 16px;
    background: none no-repeat;
}

treecontrol.tree-dark li .tree-selected {
    font-weight: bold;
}

treecontrol.tree-dark li .tree-unselectable {
    color: #777;
}

treecontrol.tree-dark {
    color: #ddd;
}

treecontrol.tree-boot {
    color: #428bca;
    font-family: inherit;
    font-size: inherit;
}

treecontrol.tree-boot > ul > li {
    padding: 0;
}

treecontrol.tree-boot li > .tree-label {
    display: block;
    padding: 3px 0;
    border-radius: 4px;
}

treecontrol.tree-boot i.tree-branch-head,
treecontrol.tree-boot i.tree-leaf-head {
    float: left;
    height: 16px;
    margin: 5px;
}

treecontrol.tree-boot li.tree-expanded i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/folder.png") no-repeat;
}

treecontrol.tree-boot li.tree-collapsed i.tree-branch-head {
    padding: 1px 10px;
    background: url("../images/tree/folder-closed.png") no-repeat;
}

treecontrol.tree-boot li.tree-leaf i.tree-leaf-head {
    padding: 1px 10px;
    background: url("../images/tree/file.png") no-repeat;
}

treecontrol.tree-boot .tree-label.tree-selected,
treecontrol.tree-boot .tree-label.tree-selected:hover {
    color: #fff;
    background-color: #428bca;
}

treecontrol.tree-boot .tree-label:hover {
    background-color: #eee;
}

.list-style-none {
    list-style: none !important;
}

.w-100 {
    width: 100% !important;
}

.font-weight-normal {
    font-weight: normal !important;
}

.background-color-skr {
    background: #470a68 !important;
    color: #FFFFFF;
}


.widget-s {
    display: inline-block;
    background-color: white;
    font-size: 14px !important;
    line-height: 20px !important;

    margin: 5px;
    vertical-align: top;
    color: #333;

    border-radius: 5px;
    margin: 10px;
    padding-bottom: 20px;
    border: 1px solid lightgray;


    border-radius:5px;
    -webkit-border-radius: 5px;


    display: inline-block;
    page-break-after: always;

    min-width: 400px;
    background:white;

}

.style-card {
    margin-top: 1rem;
    padding-top: 1rem;
    border-radius: 5px;
    background: #ffffff;
    border: 0 !important;
    box-shadow: 0px 1px 10px 7px #f3f3f3;
}

.margin-auto {
    margin: auto !important;
}

.required-mark {
    background: url(../images/required-mark.png) no-repeat!important;
    background-position: left top!important;
    background-size: 1rem!important;
    background-color: #FFF!important;
}