/* REQUIRED */

 @import '~pretty-checkbox/scss/variables';
 @import '~pretty-checkbox/scss/core';
 /* OPTIONALS */

 @import '~pretty-checkbox/scss/elements/default/fill';
 @import '~pretty-checkbox/scss/elements/default/outline';
 @import '~pretty-checkbox/scss/elements/default/thick';
 @import '~pretty-checkbox/scss/elements/font-icon/general';
 @import '~pretty-checkbox/scss/elements/svg/general';
 @import '~pretty-checkbox/scss/elements/image/general';
 @import '~pretty-checkbox/scss/elements/switch/general';
 @import '~pretty-checkbox/scss/elements/switch/fill';
 @import '~pretty-checkbox/scss/elements/switch/slim';
 @import '~pretty-checkbox/scss/extras/toggle';
 @import '~pretty-checkbox/scss/extras/plain';
 @import '~pretty-checkbox/scss/extras/round';
 @import '~pretty-checkbox/scss/extras/curve';
 @import '~pretty-checkbox/scss/extras/animation';
 @import '~pretty-checkbox/scss/extras/disabled';
 @import '~pretty-checkbox/scss/extras/locked';
 @import '~pretty-checkbox/scss/extras/colors';
 @import '~pretty-checkbox/scss/extras/print';
 @import '~pretty-checkbox/scss/states/hover';
 @import '~pretty-checkbox/scss/states/focus';
 @import '~pretty-checkbox/scss/states/indeterminate';
 
 @font-face {
	font-family: 'roommatik-font-regular';
	src:url('../../fonts/Comfortaa-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}




 /*@font-face {
   font-family: 'Domotic font';
   src: url('../../fonts/Product Sans Bold.ttf');
 }
*/
 * {
   font-family: roommatik-font-regular;
 }

 canvas {
   margin-left: 10%;
   margin-top: 5%;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
 }

 span.white-space-pre-line {
  white-space: pre-line;
}

 .text-roommatik {
   color: #3498db;
 }

 .text-roommatik-small {
   color: #3498db;
   font-size: 0.8em;
 }

 .text-roommatik-big {
   color: #3498db;
   font-size: 1.5em;
 }

 .text-roommatik-big2 {
  color: #3498db;
  font-size: 1em;
}

 .text-roommatik-yellow {
   color: #F4BA20;
 }

 .text-roommatik-red {
   color: #b21f2d;
 }

 .text-roommatik-red-big {
   color: #b21f2d;
   font-size: 1.5em;
 }

 .text-roommatik-gray {
   color: rgb(197, 194, 194);
 }

 .text-roommatik-gray-small {
   color: rgb(197, 194, 194);
   font-size: 0.8em;
 }

 .text-roommatik-gray-big {
   color: rgb(197, 194, 194);
   font-size: 1.2em;
 }

 .bigIcon {
   font-size: 2em;
 }
 .mediumIcon {
  font-size: 1.5em;
 }


 .text-roommatik-green {
   color: #37b327;
 }

 .status-blind {
   color: #55c3d2;
   font-size: 22px;
 }

 #roommatik-logo-container {
   margin-right: 0px !important;
   margin-left: 0px !important;
   margin-top: 0px !important;
   padding-top: 0.5%;
   width: 100%;
   height: 12%;
   background: #fff;
   margin-left: 0px;
   left: 0;
   text-align: center;
 }

 .Scene {
   border-radius: 50px 20px;
 }

 .card {
   margin: 1% !important;
 }

 #slavesColumn {
   margin-top: 3%;
 }

 .elementNotRepresented {
   cursor: pointer;
   text-align: left;
 }

 .elementNotRepresented i {
   color: #eaac14;
 }

 .card a {
   color: #FFFFFF !important;
 }

 #container-canvas canvas {
   margin-top: 10%;
   width: 100%;
   height: auto;
 }

 .smallMarginTop {
   margin-top: 1%;
 }

 .smallMarginBottom {
  margin-bottom: 1%;
}

 li {
   cursor: pointer;
 }

 .btn {
   cursor: pointer;
 }

 .red {
   color: #b21f2d;
 }

 .green {
   color: #1c7430;
 }


 #action-columns {
   color: #FFFFFF;
 }

 .parpadea {
   animation-name: parpadeo;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   -webkit-animation-name: parpadeo;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
 }

 /****** LOGIN MODAL ******/

 .loginmodal-container {
   padding: 30px;
   max-width: 350px;
   width: 100% !important;
   background-color: rgb(247, 247, 247);
   margin: 0 auto;
   border-radius: 2px;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   overflow: hidden;
 }

 .loginmodal-container h1 {
   text-align: center;
   font-size: 1.8em;
 }

 .loginmodal-container input[type=submit] {
   width: 100%;
   display: block;
   margin-bottom: 10px;
   position: relative;
 }

 .loginmodal-container input[type=text],
 input[type=password] {
   height: 44px;
   font-size: 16px;
   width: 100%;
   margin-bottom: 10px;
   -webkit-appearance: none;
   background: #fff;
   border: 1px solid #d9d9d9;
   border-top: 1px solid #c0c0c0;
   /* border-radius: 2px; */
   padding: 0 8px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 .loginmodal-container input[type=text]:hover,
 input[type=password]:hover {
   border: 1px solid #b9b9b9;
   border-top: 1px solid #a0a0a0;
   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .loginmodal {
   text-align: center;
   font-size: 14px;
   font-family: 'Arial', sans-serif;
   font-weight: 700;
   height: 36px;
   padding: 0 8px;
   /* border-radius: 3px; */
   /* -webkit-user-select: none;
      user-select: none; */
 }

 .loginmodal-submit {
   /* border: 1px solid #3079ed; */
   border: 0px;
   color: #fff;
   text-shadow: 0 1px rgba(0, 0, 0, 0.1);
   background-color: #4d90fe;
   padding: 17px 0px;
   font-size: 14px;
   /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
 }

 .loginmodal-submit:hover {
   /* border: 1px solid #2f5bb7; */
   border: 0px;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   background-color: #357ae8;
   /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
 }

 .modal-dialog {
   pointer-events: auto !important;
 }

 .loginmodal-container a {
   text-decoration: none;
   color: #666;
   font-weight: 400;
   text-align: center;
   display: inline-block;
   opacity: 0.6;
   transition: opacity ease 0.5s;
 }

 .login-help {
   font-size: 12px;
 }

 .vcenter {
   min-height: 100%;
   /* Fallback for browsers do NOT support vh unit */
   min-height: 100vh;
   /* These two lines are counted as one :-)       */
   display: flex;
   align-items: center;
 }

 /*FIN LOGIN MODAL*/

 /*Efectos*/

 .floatCustom {
   display: inline-block;
   position: relative;
 }

 .float-shadow {
   display: inline-block;
   position: relative;
   transition-duration: 0.3s;
   transition-property: transform;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transform: translateZ(0);
   box-shadow: 0 0 0.1em rgba(0, 0, 0, 0);
 }

 .float-shadow:before {
   pointer-events: none;
   position: absolute;
   z-index: -1;
   content: '';
   top: 100%;
   left: 5%;
   height: 10px;
   width: 90%;
   opacity: 0;
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   /* W3C */
   transition-duration: 0.3s;
   transition-property: transform opacity;
 }

 .float-shadow:hover {
   transform: translateY(-5px);
   /* move the element up by 5px */
 }

 .float-shadow:hover:before {
   opacity: 1;
   transform: translateY(5px);
   /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
 }

 .shadow {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

 .pointer {
   cursor: pointer;
 }

 .cardShadow {
   transition: box-shadow 1.0s ease;
   transition: transform 0.5s ease;
 }

 .cardShadow:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   transform: translate(5px, 5px);
 }

 .float {
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
 }

 .float:hover {
   -webkit-transform: translate(0px, -10px);
   -moz-transform: translate(0px, -10px);
   -ms-transform: translate(0px, -10px);
   -o-transform: translate(0px, -10px);
   transform: translate(0px, -10px);
 }

 /*Fin efectos*/

 /*slider temperatura*/

 .tempMarquer {
   margin-top: 5%;
   margin-left: 25%;
   margin-bottom: 1%;
 }

 .tempMarquerButton {
   margin-right: 10%;
 }

 .tempMarquerButton2 {
   margin-left: 10%;
 }

 input[type=range] {
   height: 26px;
   -webkit-appearance: none;
   margin: 10px 0;
   width: 100%;
 }

 input[type=range]:focus {
   outline: none;
 }

 input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 14px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 1px #50555C;
   background: #50555C;
   border-radius: 14px;
   border: 0px solid #000000;
 }

 input[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 0px solid #000000;
   height: 20px;
   width: 40px;
   border-radius: 12px;
   background: #529DE1;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -3px;
 }

 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #50555C;
 }

 input[type=range]::-moz-range-track {
   width: 100%;
   height: 14px;
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 1px #50555C;
   background: #50555C;
   border-radius: 14px;
   border: 0px solid #000000;
 }

 input[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 0px solid #000000;
   height: 20px;
   width: 40px;
   border-radius: 12px;
   background: #529DE1;
   cursor: pointer;
 }

 input[type=range]::-ms-track {
   width: 100%;
   height: 14px;
   cursor: pointer;
   animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }

 input[type=range]::-ms-fill-lower {
   background: #50555C;
   border: 0px solid #000000;
   border-radius: 28px;
   box-shadow: 1px 1px 1px #50555C;
 }

 input[type=range]::-ms-fill-upper {
   background: #50555C;
   border: 0px solid #000000;
   border-radius: 28px;
   box-shadow: 1px 1px 1px #50555C;
 }

 input[type=range]::-ms-thumb {
   margin-top: 1px;
   box-shadow: 0px 0px 0px #000000;
   border: 0px solid #000000;
   height: 20px;
   width: 40px;
   border-radius: 12px;
   background: #529DE1;
   cursor: pointer;
 }

 input[type=range]:focus::-ms-fill-lower {
   background: #50555C;
 }

 input[type=range]:focus::-ms-fill-upper {
   background: #50555C;
 }

 /*fin slider temperatura*/

 /*GENERAL*/

 .smallMarginLeft {
   margin-left: 2%
 }

 .marginLeft {
   margin-left: 6%
 }

 .smallMarginRight {
  margin-right: 2%
 }

 .chart-line {
   margin-left: 0%;
 }

 .container-fluid {
   width: 75%;
   height: auto;
   position: absolute;
   right: 4em;
   margin-top: 1em;
   box-shadow: 10px, 10px 10px 5px grey;
 }

 .bigMarginTop {
   margin-top: 2em;
 }

 .center {
   margin-left: 20px;
 }

 .card-text {
   color: black;
 }

 .card-body .responsiveIcon i {
   font-size: 50px;
 }

 .float {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   background-color: rgb(0, 163, 204);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .float2 {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   background-color: rgb(0, 204, 17);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .my-float {
   margin-top: 22px;
 }

 .floatMovil {
   position: fixed;
   width: 50px;
   height: 50px;
   bottom: 20px;
   background-color: rgb(0, 163, 204);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .floatMovil2 {
   position: fixed;
   width: 50px;
   height: 50px;
   bottom: 20px;
   background-color: rgb(0, 204, 17);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .my-floatMovil {
   margin-top: 18px;
 }

 .border-info {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

 .microMovil {
   position: fixed;
   width: 3em;
   height: 3em;
   bottom: 1em;
   background-color: rgb(0, 163, 204);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .my-microMovil {
   margin-top: 1em;
 }

 .microWeb {
   position: fixed;
   width: 3em;
   height: 3em;
   bottom: 1em;
   right: 1em;
   background-color: rgb(0, 163, 204);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .microWeb2 {
   position: fixed;
   overflow: auto;
   width: 3em;
   height: 3em;
   bottom: 1em;
   right: 1em;
   background-color: rgb(5, 214, 33);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .microWeb3 {
   position: fixed;
   overflow: auto;
   width: 3em;
   height: 3em;
   bottom: 1em;
   right: 1em;
   background-color: rgb(0, 163, 204);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .microWeb4 {
   position: fixed;
   overflow: auto;
   width: 3em;
   height: 3em;
   bottom: 1em;
   right: 4.2em;
   background-color: rgb(0, 163, 204);
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   box-shadow: 2px 2px 3px #999;
 }

 .my-microWeb {
   text-align: center;
   margin-top: 1em;
 }

 .addMovil {
   margin-left: 250px;
 }

 #programs {
   font-size: 12px;
 }

 .modal-body .tdDes {
   width: 50%;
 }

 .modal-body .tdTime {
   width: 15%;
 }

 .modal-body .tdName {
   width: 15%;
 }

 .modal-body .tdDays {
   width: 25px;
 }

 #seeScenes {
   font-size: 0.9em;
 }

 .input-group-addon {
   width: 3.5em;
   height: 3em;
   background-color: rgba(255, 255, 255, 0.966);
 }

 .input-group-addon i {
   font-size: 2em;
   right: 0.1em;
 }

 #selectPersonalizado {
   height: 3em;
 }

 .pageTitle {
   color: rgb(104, 128, 235);
   margin-bottom: 1em;
 }

 /* FIN GENERAL */

 /*ICONO FAVORITOS*/

 .star {
   visibility: hidden;
   font-size: 30px;
   cursor: pointer;
 }

 .star:before {
   font-family: "Font Awesome 5 Free";
   content: "\f004";
   color: rgb(14, 13, 13);
   position: absolute;
   visibility: visible;
 }

 .star:checked:before {
   font-family: "Font Awesome 5 Free";
   content: "\f004";
   color: rgb(245, 43, 29);
   position: absolute;
 }

 /*FIN ICONO FAVORITOS*/

 /*SLIDERS*/

 input[type="checkbox"].ios-switch+div {
   vertical-align: middle;
   width: 40px;
   height: 20px;
   border: 1px solid rgba(0, 0, 0, .4);
   border-radius: 999px;
   background-color: rgba(0, 0, 0, 0.1);
   -webkit-transition-duration: .2s;
   -webkit-transition-property: background-color, box-shadow;
   -moz-transition-duration: .2s;
   -moz-transition-property: background-color, box-shadow;
   box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0.4);
   margin: 15px 1.2em 15px 2.5em;
 }

 input[type="checkbox"].ios-switch:checked+div {
   width: 40px;
   background-position: 0 0;
   background-color: #3b89ec;
   border: 1px solid #0e62cd;
   box-shadow: inset 0 0 0 10px rgba(59, 137, 259, 1);
 }

 input[type="checkbox"].tinyswitch.ios-switch+div {
   width: 34px;
   height: 18px;
 }

 input[type="checkbox"].bigswitch.ios-switch+div {
   width: 50px;
   height: 25px;
 }

 input[type="checkbox"].green.ios-switch:checked+div {
   background-color: #00e359;
   border: 1px solid rgba(0, 162, 63, 1);
   box-shadow: inset 0 0 0 10px rgba(0, 227, 89, 1);
 }

 input[type="checkbox"].ios-switch+div>div {
   float: left;
   width: 18px;
   height: 18px;
   border-radius: inherit;
   background: #ffffff;
   -webkit-transition-timing-function: cubic-bezier(.54, 1.85, .5, 1);
   -webkit-transition-duration: 0.5s;
   -webkit-transition-property: transform, background-color, box-shadow;
   -moz-transition-timing-function: cubic-bezier(.54, 1.85, .5, 1);
   -moz-transition-duration: 0.5s;
   -moz-transition-property: transform, background-color;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
   pointer-events: none;
   margin-top: 1px;
   margin-left: 1px;
 }

 input[type="checkbox"].ios-switch:checked+div>div {
   -webkit-transform: translate3d(25px, 0, 0);
   -moz-transform: translate3d(25px, 0, 0);
   background-color: #ffffff;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172, 1);
 }

 input[type="checkbox"].tinyswitch.ios-switch+div>div {
   width: 16px;
   height: 16px;
   margin-top: 1px;
 }

 input[type="checkbox"].tinyswitch.ios-switch:checked+div>div {
   -webkit-transform: translate3d(18px, 0, 0);
   -moz-transform: translate3d(18px, 0, 0);
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172, 1);
 }

 input[type="checkbox"].bigswitch.ios-switch+div>div {
   width: 25px;
   -webkit-transform: translate3d(-2px, 0, 0);
   -moz-transform: translate3d(-2px, 0, 0);
 }

 input[type="checkbox"].bigswitch.ios-switch:checked+div>div {
   -webkit-transform: translate3d(25px, 0, 0);
   -moz-transform: translate3d(25px, 0, 0);
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172, 1);
 }

 input[type="checkbox"].green.ios-switch:checked+div>div {
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63, 1);
 }

 /*FIN SLIDERS*/

 /*Animacion ng-if*/

 .animate-if.ng-enter,
 .animate-if.ng-leave {
   transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
 }

 .animate-if.ng-enter,
 .animate-if.ng-leave.ng-leave-active {
   opacity: 0;
 }

 .animate-if.ng-leave,
 .animate-if.ng-enter.ng-enter-active {
   opacity: 1;
 }

 /*Fin animacion ng-if*/

 /*Checkboxs*/

 .checkboxContainer {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 15px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .checkboxContainer input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
 }

 .checkmark {
   position: absolute;
   top: 0;
   left: 0;
   right: -10px;
   height: 18px;
   width: 18px;
   background-color: #ccc;
 }

 .checkboxContainer:hover input~.checkmark {
   background-color: #ccc;
 }

 .checkboxContainer input:checked~.checkmark {
   background-color: #2196F3;
 }

 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }

 .checkboxContainer input:checked~.checkmark:after {
   display: block;
 }

 .checkboxContainer .checkmark:after {
   left: 7px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid #ccc;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 /*FIN CHECKBOXS*/

 /*RADIO BUTTONS*/

 .radioContainer {
   display: block;
   position: relative;
   margin-left: 0.5em;
   padding-left: 26px;
   padding-right: 10px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .radioContainer input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
 }

 .radioCheckmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 20px;
   width: 20px;
   background-color: #eee;
   border-radius: 50%;
 }

 .radioContainer:hover input~.radioCheckmark {
   background-color: #ccc;
 }

 .radioContainer input:checked~.radioCheckmark {
   background-color: #2196F3;
 }

 .radioCheckmark:after {
   content: "";
   position: absolute;
   display: none;
 }

 .radioContainer input:checked~.radioCheckmark:after {
   display: block;
 }

 .radioContainer .radioCheckmark:after {
   top: 6px;
   left: 6px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: white;
 }

 /*FIN RADIO BUTTONS*/

 /*NAVEGACION*/

 #breadcrumb {
   list-style: none;
   display: inline-block;
 }

 #breadcrumb .icon {
   font-size: 14px;
 }

 #breadcrumb li {
   float: left;
 }

 #breadcrumb li i {
   color: #FFF;
   display: block;
   background: #3498db;
   text-decoration: none;
   position: relative;
   height: 40px;
   line-height: 40px;
   padding: 0 10px 0 5px;
   text-align: center;
   margin-right: 23px;
 }

 #breadcrumb li:nth-child(even) i {
   background-color: #2980b9;
 }

 #breadcrumb li:nth-child(even) i:before {
   border-color: #2980b9;
   border-left-color: transparent;
 }

 #breadcrumb li:nth-child(even) i:after {
   border-left-color: #2980b9;
 }

 #breadcrumb li:first-child i {
   padding-left: 15px;
   -moz-border-radius: 4px 0 0 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px 0 0 4px;
 }

 #breadcrumb li:first-child i:before {
   border: none;
 }

 #breadcrumb li:last-child i {
   padding-right: 15px;
   -moz-border-radius: 0 4px 4px 0;
   -webkit-border-radius: 0;
   border-radius: 0 4px 4px 0;
 }

 #breadcrumb li:last-child i:after {
   border: none;
 }

 #breadcrumb li i:before,
 #breadcrumb li i:after {
   content: "";
   position: absolute;
   top: 0;
   border: 0 solid #3498db;
   border-width: 20px 10px;
   width: 0;
   height: 0;
 }

 #breadcrumb li i:before {
   left: -20px;
   border-left-color: transparent;
 }

 #breadcrumb li i:after {
   left: 100%;
   border-color: transparent;
   border-left-color: #3498db;
 }

 #breadcrumb li i:hover {
   background-color: #1abc9c;
 }

 #breadcrumb li i:hover:before {
   border-color: #1abc9c;
   border-left-color: transparent;
 }

 #breadcrumb li i:hover:after {
   border-left-color: #1abc9c;
 }

 #breadcrumb li i:active {
   background-color: #16a085;
 }

 #breadcrumb li i:active:before {
   border-color: #16a085;
   border-left-color: transparent;
 }

 #breadcrumb li i:active:after {
   border-left-color: #16a085;
 }

 /*FIN NAVEGACION*/

 /*LOAD GLOBAL SPINNER*/

 .loading {
   position: fixed;
   z-index: 999;
   height: 3em;
   width: 3em;
   overflow: show;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }

 .loading:before {
   content: '';
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
 }

 .loading:not(:required) {
   font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
   border: 0;
 }

 .navbar-inverse {
   height: 60px;
 }

 /*LOADING SPINNER CONTENT*/

 .spinnerLoading {
   width: 50px;
   height: 40px;
   text-align: center;
   font-size: 10px;
 }

 .spinnerLoading>div {
   background-color: #5bc0de;
   height: 100%;
   width: 6px;
   display: inline-block;
   -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
   animation: sk-stretchdelay 1.2s infinite ease-in-out;
 }

 .responsiveCard {
   padding: 0px !important;
 }

 .responsiveCard h5 {
   margin: 0px !important;
 }

 hr {
   margin-top: 0px !important;
 }

 .card-body {
   margin: 2% !important;
 }

 .test {
   margin: auto;
 }

 .conditionalScroll {
   width: 100%;
   height: 16em;
   /*change to your liking*/
   overflow-y: scroll;
 }

 .spinnerLoading .rect2 {
   -webkit-animation-delay: -1.1s;
   animation-delay: -1.1s;
 }

 .spinnerLoading .rect3 {
   -webkit-animation-delay: -1.0s;
   animation-delay: -1.0s;
 }

 .spinnerLoading .rect4 {
   -webkit-animation-delay: -0.9s;
   animation-delay: -0.9s;
 }

 .spinnerLoading .rect5 {
   -webkit-animation-delay: -0.8s;
   animation-delay: -0.8s;
 }

 @-webkit-keyframes sk-stretchdelay {
   0%,
   40%,
   100% {
     -webkit-transform: scaleY(0.4)
   }
   20% {
     -webkit-transform: scaleY(1.0)
   }
 }

 @keyframes sk-stretchdelay {
   0%,
   40%,
   100% {
     transform: scaleY(0.4);
     -webkit-transform: scaleY(0.4);
   }
   20% {
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
   }
 }

 /*FGLOBAL LOADING SPINNER*/

 /*PARPADEO ICONOS STORES*/

 @-moz-keyframes parpadeo {
   0% {
     opacity: 1.0;
   }
   50% {
     opacity: 0.0;
   }
   100% {
     opacity: 1.0;
   }
 }

 @-webkit-keyframes parpadeo {
   0% {
     opacity: 1.0;
   }
   50% {
     opacity: 0.0;
   }
   100% {
     opacity: 1.0;
   }
 }

 @keyframes parpadeo {
   0% {
     opacity: 1.0;
   }
   50% {
     opacity: 0.0;
   }
   100% {
     opacity: 1.0;
   }
 }

 /*FIN PARPADEO ICONOS STORES*/

 /*RESPONSIVE*/

 /*Movil*/

 @media (max-width: 1025px) {
   /*CAMBIOS RESPECTO TAMAÑO*/
   .microWeb {
     position: fixed;
     width: 3em;
     height: 3em;
     bottom: 1em;
     left: 1em;
     background-color: rgb(0, 163, 204);
     color: #FFF;
     border-radius: 50px;
     text-align: center;
     box-shadow: 2px 2px 3px #999;
   }
   .microWeb2 {
     position: fixed;
     width: 3em;
     height: 3em;
     right: 0.2em;
     background-color: rgb(5, 214, 33);
     color: #FFF;
     border-radius: 50px;
     text-align: center;
     box-shadow: 2px 2px 3px #999;
   }
   .microWeb3 {
     position: fixed;
     width: 3em;
     height: 3em;
     right: 0.2em;
     background-color: rgb(0, 163, 204);
     color: #FFF;
     border-radius: 50px;
     text-align: center;
     box-shadow: 2px 2px 3px #999;
   }
   #programs {
     font-size: 8px;
   }
   .switchMargin {
     margin: auto;
   }
   .switchMargin2 {
     margin-left: 2%;
     margin-right: 20%;
   }
   .responsiveRow {
     margin-left: 30px;
   }
   .card-body label {
     float: right;
     margin-top: 8px;
   }
   .individualCard {
     width: 150px;
     height: 150px;
     margin-right: 500px;
     border: none;
     -webkit-box-shadow: -200px -200px 5px -200px rgba(0, 0, 0, 0);
     -moz-box-shadow: -200px -200px 5px -200px rgba(0, 0, 0, 0);
     box-shadow: -200px -200px 5px -200px rgba(0, 0, 0, 0);
   }
   .responsiveCard {
     border: 0;
     width: 100%;
     height: auto;
     left: 0px;
   }
   .card-body .responsiveIcon {
     display: inline;
   }
   .card-body .responsiveIcon i {
     margin-right: 25px;
     font-size: 1em;
   }
   /*TIPOS DE VISTA SEGUN TAMAÑO */
   .vistaWeb {
     visibility: hidden;
     width: 0px;
     height: 0px;
     display: none;
   }
   .vistaMovil {
     visibility: show;
   }
   /*FIN CAMBIOS RESPECTO TAMAÑO*/
   /*Cambios en los efectos*/
   .float-shadow {
     display: inline-block;
     position: relative;
     transition-duration: 0.3s;
     transition-property: transform;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     transform: translateZ(0);
     box-shadow: 0 0 0px rgba(0, 0, 0, 0);
   }
   .float-shadow:before {
     pointer-events: none;
     position: absolute;
     z-index: -1;
     content: '';
     top: 0%;
     left: 0%;
     height: 0px;
     width: 0%;
     opacity: 0;
     background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0) 0%);
     /* W3C */
     transition-duration: 0.0s;
     transition-property: transform opacity;
   }
   .float-shadow:hover {
     transform: translateY(0px);
     /* move the element up by 5px */
   }
   .float-shadow:hover:before {
     opacity: 1;
     transform: translateY(05px);
     /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
   }
   .shadow {
     box-shadow: 10px, 10px 10px 5px grey;
   }
   .pointer {
     cursor: pointer;
   }
   .cardShadow {
     transition: box-shadow 0.0s ease;
     transition: transform 0.0s ease;
   }
   .cardShadow:hover {
     box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
     transform: translate(0px, 0px);
   }
   .float {
     -webkit-transition: all .0s ease-out;
     -moz-transition: all .0s ease-out;
     -ms-transition: all .0s ease-out;
     -o-transition: all .0s ease-out;
     transition: all .0s ease-out;
   }
   .float:hover {
     -webkit-transform: translate(0px, 0px);
     -moz-transform: translate(0px, 0px);
     -ms-transform: translate(0px, 0px);
     -o-transform: translate(0px, 0px);
     transform: translate(0px, 0px);
   }
   /*Fin cambios efectos*/
   .responsiveContainer {
     width: 100%;
     left: 0;
   }
   .table th,
   .table td {
     padding: 0.20rem;
   }
 }

 @media (min-width: 1025px) {
   .buttonsStores {
     margin-left: 55px;
     margin-top: 15px;
     margin-bottom: 15px;
   }
   .buttonsPulse {
     margin-left: 55px;
     margin-top: 15px;
     margin-bottom: 15px;
   }
   .container-fluid {
     left: 300px;
   }
   .noMarginLeft {
     left: 230px;
   }
   #asignarDispositivos {
     visibility: show;
   }
   #botonesAsignarDispositivos {
     visibility: show;
   }
   #asignarDispositivosMovil {
     visibility: hidden;
     width: 0px;
     height: 0px;
   }
   /*TIPOS DE VISTA SEGUN TAMAÑO */
   .vistaWeb {
     visibility: show;
   }
   .vistaMovil {
     visibility: hidden;
     width: 0px;
     height: 0px;
     display: none;
   }
 }
 /*Responsive*/