@font-face {
  font-family: "ATT Aleck Sans Bold";
  src: url("/fonts/ATTAleckSans_Bd.ttf") format("truetype");
}

@font-face {
  font-family: "ATT Aleck Sans Light";
  src: url("/fonts/ATTAleckSans_Lt.ttf") format("truetype");
}

@font-face {
  font-family: "ATT Aleck Sans Regular";
  src: url("/fonts/ATTAleckSans_Rg.ttf") format("truetype");
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  background-color: white;
  font-size: 12px;
  font-family: "ATT Aleck Sans Regular", sans-serif;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container,
body > .container-fluid {
  padding: 80px 15px 0;
  background-color: white;
}
.container .text-muted,
.container-fluid .text-muted {
  margin: 20px 0;
}

/*.footer > .container, .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
}*/

.font-fixed {
  font-family: monospace, monospace;
}

code {
  font-size: 80%;
}

.btn-primary {
  color: #ffffff;
  background-color: #009fdb;
  border-color: #ffffff;
}

.btn-primary:hover,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: #5aacd6;
  border-color: #009fdb;
}

.hdr {
  background-color: #eceee7;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.5);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: white;
  background-color: #009fdb;
}

a {
  color: #009fdb;
}

a:hover {
  color: #5aacd6;
}

a[target="_blank"] {
  font-size: 14px;
}

a[target="_blank"]:after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url('/img/external-link.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

a.local[target="_blank"]:after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  color: #009fdb;
}

.pagination > li.active {
  display: inline;
  background-color: #009fdb;
  color: white;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #009fdb;
  border-color: #4c84c4;
}

.panel-default {
  margin-top: 10px;
}

.panel-default > .panel-heading {
  /*background-color: #eceee7;*/
  font-weight: bold;
}

.panel-default > .panel-heading.terms {
  line-height: 2.429;
}

.panel-default > .panel-footer {
  /*background-color: #eceee7;*/
}

.panel-default > .panel-body.wz-step {
  padding: 25px!important;
}

.panel-default > .panel-footer.wz-step-footer {
  text-align: right;
}


.main-container {
  height: 100%;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  /*padding: 2px;*/
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
  font-size: 11px;
}

.table > tbody > tr > td.nowrap,
.table > tbody > tr > th.nowrap {
  min-width: 140px;
}

.btn-group view-button {
  float: left;
}

.steps-indicator {
  margin-bottom: 30px;
}

.footer {
  position: absolute;
  bottom: 1px;
  width: 100%;
  height: 50px;
  border-top: 1px solid #d2d3d4;
  background-color: #f8f8f8;
  padding-top: 17px;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

table.smartphone-table th,
table.smartphone-table td {
  width: 130px;
}

.collapsing {
  overflow: auto;
}
.min-col-width {
  min-width: 120px;
}

.ellipsis {
  white-space: nowrap;
  width: 150px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis-in {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-menu {
  padding: 15px;
  font-size: 13px;
  font-weight: 100;
  color: #777;
}

.scroller {
  height: 500px;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.alert-gray {
  background-color: #f5f5f5;
  border-color: #dddddd;
}

.alert-gray a {
  color: #333;
  font-size: 14px;
}
.alert-gray a:hover {
  color: #009fdb;
}

.title-logo {
  font-size: 14px;
  font-weight: 300;
  width: 130px;
  display: table;
  height: 50px;
  background-color: #f5f5f5;
}

.title-logo p {
  display: table-cell;
  vertical-align: middle;
}

.circle {
  display: inline-block;
  min-width: 10px;
  padding: 8px 12px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #5bc0de;
  border-radius: 33px;
}

.circle > i {
  top: 4px;
}

.label-success {
  background-color: #4ca90c;
  padding: 4px 3px 2px 3px;
}

.label-danger {
  background-color: #cf2a2a;
  padding: 4px 3px 2px 3px;
}

.alert-danger {
  color: #ffffff;
  background-color: #cf2a2a;
  border-color: #cf2a2a;
}

.btn-danger {
  color: #fff;
  background-color: #cf2a2a;
  border-color: #cf2a2a;
}

.att-sm-button {
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
}

.btn-info {
  color: #fff;
  background-color: #009fdb;
  border-color: #009fdb;
}

.btn-success {
  color: #fff;
  background-color: #4ca90c;
  border-color: #4ca90c;
}

.btn-warning {
  color: #fff;
  background-color: #ffb81c;
  border-color: #ffb81c;
}

.steps-indicator li.done a:before {
  background-color: #4ca90c;
}

.steps-indicator li.editing a:before {
  background-color: #cf2a2a;
}

li.current a:before {
  background-color: #5a5a5a;
}

.steps-indicator li a:before,
.steps-indicator:before {
  background-color: #d2d2d2;
}

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 0px;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

/*.smartphoneCarousel {
    //width:1000px;
}*/

.smartphoneCarousel a.carousel-control {
  background-image: none;
  color: #d2d2d2;
}

.smartphoneCarousel .carousel-indicators li {
  border-color: #d2d2d2;
  background-color: #d2d2d2;
}

.smartphoneCarousel .carousel-indicators {
  bottom: -34px;
}

.carousel-description {
  white-space: pre-wrap; /* CSS 3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  overflow: hidden;
  background-color: transparent;
  border-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.modal-lg {
  width: 1082px;
}

.ttype-button {
  width: 279px;
}

.menu-dropdown {
  font-size: 14px;
  font-weight: 300;
  display: table;
  height: 50px;
  background-color: transparent;
  border-color: transparent;
}

.jumbotron {
  background-color: white;
}

.jumbotron pre {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.smartphone-container {
  background-color: white;
  border: 1px solid #d2d2d2;
  margin: 4px;
  width: 32.5%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding-top: 10px;
  min-height: 275px;
  padding-bottom: 5px;
}

.sel-smartphone {
  float: left;
}

.smartphone-list-description {
  background-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  display: block;
  min-height: 142px;
  overflow-y: auto;
  max-height: 143px;
  width: 190px;
}

.smartphone-img-container {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  width: 103px;
  text-align: center;
}
.smartphone-img {
  margin: auto;
  width: 100px;
}

.text-primary {
  color: #009fdb;
}

.smartphone-agotado {
  color: red;
  text-align: center;
  display: block;
  padding-top: 10px;
  font-size: 18px;
}

.no-wrap {
  white-space: nowrap;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

i.success {
  color: #4ca90c;
}

i.danger {
  color: #cf2a2a;
}

li.danger {
  color: #cf2a2a;
}

.change-password {
  position: relative;
  display: block;
  top: 15px;
}

i.warning {
  color: #ffb81c;
}

.carta {
  margin-top: 5px;
}

.device-owner-panel {
  background-color: #f8f8f8;
  display: inline-block;
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #e7e7e7;
  text-align: center;
  font-size: 14px;
}

.details .form-group {
  margin-bottom: 5px;
  font-size: 11px;
}

.details label {
  color: #009fdb;
}

.download-pdf .row .col-md-3 a {
  font-size: 12px;
}

.download-pdf .row .col-md-3 {
  display: inline-block;
  margin: 10px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  width: 23%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.download-pdf .row .col-md-3.my-center-block {
  margin-left: auto;
  margin-right: auto;
  width: 23%;
  float: none;
}

.center-content {
  text-align: center;
}

.center-content.title {
  font-size: 18px;
  font-weight: bold;
}

.center-content.sub-title {
  font-size: 14px;
  color: #08aae7;
  font-weight: bold;
}

.spinner-container {
  position: relative;
  width: 70px;
}

/* -- Referred --*/
.referred-welcome-title-one {
  background-color: black;
  color: #ffffff;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.referred-welcome-title-two {
  background-color: #009fdb;
  color: #000000;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.referred-welcome-title-three {
  background-color: #009fdb;
  color: #ffffff;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.referred-welcome-title-four {
  background-color: #ffffff;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}

.referred-welcome-title-four div.black {
  color: #000000;
}

.referred-welcome-title-four div.orange {
  color: #ea7400;
}

pre.debug {
  width: 100%;
  display: inline-block;
  max-height: 200px;

  overflow: auto;
}

.att-blue {
  color: #067ab4;
}

.strong-text {
  font-weight: bold;
}

.contact-info-popup {
  position: absolute;
  display: inline-block;
  width: 400px;
  top: 35px;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  padding: 10px;
  font-size: 11px;
  left: -50px;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

.contact-link {
  color: #777;
  text-decoration: none;
}

.contact-link:hover {
  color: #000000;
  text-decoration: none;
}

.plan {
  color: rgb(0, 176, 240);
  font-style: italic;
}

.pointer-hand {
  cursor: pointer;
}

.with-pointer {
  cursor: pointer;
}

.label-large {
  font-size: 100%;
}

.external-confirm-btn {
  width: 80px;
  font-size: 10px;
}

.hc-header-form {
  display: inline-block;
  width: 100%;
}

.hc-header-form .left {
  width: 70%;
  float: left;
  display: inline-block;
}

.hc-header-form .right {
  width: 30%;
  float: left;
  display: inline-block;
}

.gauge-container {
  width: 150px;
  margin: 10px auto;
  text-align: center;
}
#hc-percentage {
  width: 150px;
  height: 75px;
  display: block;
}

.updated-external {
  color: red;
  font-weight: bold;
  white-space: nowrap;
}

.product-sale-new {
  display: inline-block;
  width: 100%;
  text-align: left;
  margin-top: 10px;
}

h3.modal-title.warning-msg {
  font-size: 20px;
}

.balance {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  background-color: #009fdb;
  color: white;
  width: 90%;
  display: block;
  margin: 20px 5% 10px;
  font-size: 12px;
}

/*.balance i {
    font-size: 14px;
}*/

.balance a.btn {
  background-color: white;
  color: #009fdb;
  margin-top: 10px;
}

.balance a.btn:hover {
  background-color: #009fdb;
  color: white;
  border-color: white;
}

.balance span.saldo {
  font-size: 30px;
  font-weight: bold;
}

.balance strong.not-saldo {
  font-size: 13px;
  font-weight: bold;
}

.balance strong.saldo {
  font-size: 20px;
  font-weight: bold;
}

.balance span.countdown {
  /*font-size: 14px;*/
  font-weight: bold;
}

.balance span.uploaded {
  /*font-size: 14px;*/
  font-style: italic;
  border: 1px solid #d0d0d0;
  display: inline-block;
  padding: 5px;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 5px;
}

.balance span.in-progress {
  color: #ffffff;
  font-weight: bold;
  /*font-size: 14px;*/
}

.outlet-container {
  background-color: white;
  border: 1px solid #d2d2d2;
  margin: 4px;
  width: 32.5%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding-top: 10px;
  min-height: 152px;
  padding-bottom: 5px;
}

.scroller-small {
  height: 260px;
  padding: 20px;
  overflow: auto;
  min-height: 264px;
  -webkit-overflow-scrolling: touch;
}

.scroller-balance {
  height: 500px;
  padding: 20px 20px 5px 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.icon-att-linea {
  background-image: url(../img/att_linea.png);
  background-position: center center;
  width: 30px;
  height: 30px;
  display: inline-block;
  background-size: 30px;
  vertical-align: bottom;
}

.icon-att-wifi {
  background-image: url(../img/att_wifi.png);
  background-position: center center;
  width: 30px;
  height: 30px;
  display: inline-block;
  background-size: 30px;
  vertical-align: bottom;
}

.icon-att-directvgo {
  background-image: url(../img/directv-go-icon.svg);
  background-position: center center;
  width: 22px;
  height: 22px;
  background-size: contain;
  display: inline-block;
  vertical-align: bottom;
  margin: 4px;
}

.un-selectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-title > .small,
.panel-title > .small > a,
.panel-title > a,
.panel-title > small,
.panel-title > small > a {
  color: black;
  cursor: pointer;
  font-size: 12px;
  outline: none;
  text-decoration: none;
}

.panel-title > .small,
.panel-title > .small > a:hover,
.panel-title > a:hover,
.panel-title > small,
.panel-title > small > a:hover {
  color: #009fdb;
  text-decoration: none;
  outline: none;
}

div.blue-header {
  background-color: #009fdb;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  margin-bottom: 11px;
}

table.table-blue-headers th {
  color: #ffffff;
  background-color: rgba(39, 159, 219, 0.75) !important;
  border-color: rgba(39, 159, 219, 0.75) !important;
}

/* ----- NEW STYLES ------ */

/*@media (min-width: 1200px) {*/
/*    .container {*/
/*        width:100%!important;*/
/*    }*/
/*}*/

.cards-container {
  background-color: rgba(208, 208, 208, 0.25);
  padding: 10px 20px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
  border-radius: 5px;
  text-align: center;
  padding-top: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #ffffff;
  color: grey;
  border-radius: 5px;
  padding: 10px;
}

.flip-card-front img.media-object {
  margin: auto;
  width: 100px;
  display: block;
  height: 140px;
  background-color: #d0d0d04f;
  text-align: center;
}

.flip-card-front h4.device-name {
  min-height: 40px;
  display: inline-block;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
}

.flip-card-front div.price {
  font-size: 14px;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 14px;
  display: inline-block;
  width: 100%;
  background-color: #309fdb;
  color: white;
}

.flip-card-front div.available {
  margin-top: 10px;
  display: inline-block;
  font-weight: bold;
  width: 100%;
}

/* Style the back side */
.flip-card-back {
  background-color: #279fdb;
  color: white;
  border-radius: 5px;
  padding: 10px;
  min-height: 275px;
  transform: rotateY(180deg);
}

.flip-card-back .device-name {
  min-height: 40px;
  font-family: "ATT Aleck Sans Bold", sans-serif;
  font-size: 16px;
  max-height: 40px;
  height: 40px;
}

.flip-card-back .specs {
  min-height: 130px;
  max-height: 130px;
  height: 130px;
  font-size: 8px;
}

.flip-card-back .action {
}

.flip-card-back button.sel-smartphone {
  display: inline-block;
  background-color: white;
  color: #309fdb;
  width: 100%;
  border-radius: 0;
  bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  height: 35px;
  margin-top: 75px;
}

.flip-card-back button.sel-smartphone:hover {
  background-color: white;
  color: grey;
}

.progress {
  position: relative;
}

.progress span {
  position: absolute;
  display: block;
  width: 100%;
  color: #333333;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.progress {
  background-color: rgba(208, 208, 208, 0.5) !important;
}

.progress-bar-success span {
  color: #ffffff;
}
.progress-bar-warning span {
  color: #ffffff;
}
.progress-bar-danger span {
  color: #ffffff;
}

.step {
  border-top: 1px solid rgba(220, 220, 220, 0.5);
}

.step .pagination {
  margin-top: 0;
}

.cart-header h4 {
  margin-top: 0;
}

/* -- Delivery Points -- */

.custom-nav {
  margin: 0;
  border: none;
}

.custom-tab {
  padding: 0;
  background-color: #e1e1e1;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #309fdb;
  color: #fff;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: #309fdb;
  color: #fff;
}

.custom-tab a {
  padding: 0;
  border: none !important;
  margin: 0;
  height: 100px;
  color: #fff;
}

.custom-tab.active:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(185, 9, 8, 0);
  border-top-color: #309fdb;
  border-width: 10px;
  margin-left: -10px;
}

.delivery-panel {
  padding: 20px 10px;
  display: block;
  width: 100%;
  min-height: 375px;
  border: 1px solid #e4e4e4;
  border-top: 0;
  margin-bottom: 10px;
  border-radius: 4px;
}

.delivery-panel .custom-popup-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.delivery-panel .custom-popup-wrapper > .message {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  color: #868686;
}

.delivery-panel .custom-popup-wrapper > .dropdown-menu {
  position: static;
  float: none;
  display: block;
  min-width: 160px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

legend.request-summary {
  font-size: 14px !important;
}

.devices-popover,
.notes-popover {
  min-width: 500px !important;
  max-width: 600px !important;
  min-height: 140px !important;
  max-height: 400px !important;
  overflow: auto;
}

.notes-popover .timeline {
  min-height: 140px !important;
  max-height: 320px !important;
  overflow: auto;
  font-size: 11px;
  min-width: 250px;
  max-width: 480px !important;
}

.notes-popover .timeline .panel h5.panel-title {
  font-size: 12px !important;
}

.notes-popover {
  font-size: 12px !important;
}

.payment-reference {
  border-radius: 4px;
  border: 1px solid #309fdb;
  display: inline-block;
  width: 100%;
}

.payment-reference .title {
  display: block;
  width: 100%;
  background-color: #309fdb;
  height: 36px;
  padding: 10px;
  color: #ffffff;
  font-weight: bold;
}

.payment-reference .content {
  display: inline-block;
  padding: 10px;
}

.payment-reference .action {
  background-color: #f5f5f5;
  border-top: 1px solid #309fdb;
  height: 50px;
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 0 0 4px 4px;
}

/* REQUEST DETAILS POPOVER */
.modal-outlet-details {
  background-color: #309fdb;
  width: 800px;
  height: 400px;
  min-width: 800px;
  min-height: 400px;
}

.modal-menu-details {
  background-color: #309fdb;
  width: 1100px;
  height: 700px;
  min-width: 1100px;
  min-height: 700px;
}

.request-details-modal {
  background-color: transparent;
}

.request-details-modal-top div.modal-content {
  background-color: #309fdb;
}

.request-details-modal-top div.modal-content h3.popover-title {
  border-radius: 0px;
  background-color: rgb(48, 159, 219);
  border-bottom: 0px;
  color: white;
  font-weight: bold;
  line-height: 25px;
}

.request-details .popover {
  font-size: 12px !important;
  font-family: "ATT Aleck Sans Regular", sans-serif !important;
}

.request-details .popover.top {
  margin-top: 10px;
}

.request-details .tab-content {
  padding: 10px;
  border: 1px solid #309fdb;
  border-bottom: 0px;
  min-height: 400px;
  max-height: 400px;
  overflow: auto;
  background-color: white;
  min-width: 798px;
  max-width: 798px;
  font-size: 12px !important;
  font-family: "ATT Aleck Sans Regular", sans-serif !important;
}

.request-details .nav-tabs {
  border-bottom: none;
  border-top: 1px solid #309fdb;
  margin-left: 10px;
  margin-bottom: 10px !important;
}

.request-details .nav-tabs ul.nav {
  margin-bottom: 10px;
}

.request-details .nav-tabs > li,
.request-details .nav-tabs > li.active {
  margin-bottom: 0;
  margin-top: -1px;
}

.request-details .nav-tabs > li.active a {
  background-color: #ffffff;
  color: #333333;
}

.request-details .nav-tabs > li.active a:hover {
  background-color: #ffffff !important;
  color: #333333;
  border: 0;
}

.request-details .nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
  border: 0;
  color: #ffffff;
  text-decoration: none;
  background-color: transparent;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.request-details .nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 0;
  border-top-color: transparent;
}

.request-details .nav-tabs > li > a:hover {
  background-color: #333333 !important;
}

.request-details .nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  text-decoration: none;
  border: 0;
  border-bottom-color: transparent;
}

.request-details .nav-tabs > li.active > a,
.request-details .nav-tabs > li.active > a:focus,
.request-details .nav-tabs > li.active > a:hover {
  text-decoration: none;
  border: 0;
  border-bottom-color: transparent;
  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
  font-size: 12px !important;
}

.request-details {
  display: block;
  padding: 0px 0px 0px 0px;
  border: 0;
  background-color: #309fdb;
  min-width: 500px;
  max-width: 800px;
  left: 80px !important;
  min-height: 400px;
  max-height: 600px;
  font-size: 12px !important;
  font-family: "ATT Aleck Sans Regular", sans-serif;
}

.request-details div.arrow {
  left: 10% !important;
}

.request-details div.arrow:after {
  border-top-color: #ffffff;
  border-top-color: #309fdb !important;
}

.request-details div.popover-inner {
  padding: 0;
  margin: 0;
  background-color: #309fdb;
  border-radius: 0 0 6px 6px;
}

.request-details div.popover-inner h3.popover-title {
  border-radius: 0px;
  background-color: rgb(48, 159, 219);
  border-bottom: 0px;
  color: white;
  font-weight: bold;
  line-height: 25px;
}

.request-details div.popover-content {
  padding: 0;
}

/* New Styles Fixes */

body {
  height: 100%;
}

.bg {
  /*background-image: url('../img/desk-background.jpg');*/
  background-image: url("../img/desk-background.webp");
  height: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

@media only screen and (max-width: 767px) {
  .bg {
    /* The file size of this background image is 93% smaller
           to improve page load speed on mobile internet connections */
    background-image: url("../img/desk-background_mobile.jpg");
  }

  .tyc-linea .col-md-9 {
    width: 80%;
    display: inline-block;
  }

  .tyc-linea .col-md-1 {
    display: inline-block;
    width: 10%;
    float: left;
  }

  .tyc-linea .col-md-2 {
    display: inline-block;
    width: 10%;
  }
}

body > .container,
body > .container-fluid {
  background-color: transparent;
}

/*@media (min-width: 1200px) {*/
/*    .container {*/
/*        width:100%!important;*/
/*    }*/
/*}*/

.navbar-default {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  min-height: 72px;
  padding-top: 10px;
  -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff !important;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
  color: #279fdb !important;
  background-color: transparent !important;
}

.catalog-menu {
  padding: 15px;
  font-size: 13px;
  font-weight: 100;
  color: #fff !important;
}

.catalog-menu:hover {
  color: #279fdb !important;
}

.menu-dropdown {
  font-size: 14px;
  font-weight: 300;
  display: table;
  height: 50px;
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff;
}

.menu-dropdown:hover {
  color: #ffffff !important;
  background-color: red;
}

.panel-default > .panel-heading {
  color: #ffffff;
  /*background-color: #000000;
    border-color: #000000;*/
  background-color: rgba(39, 159, 219, 0.75) !important;
  border-color: rgba(39, 159, 219, 0.75) !important;
}

.panel-default {
  border-color: rgba(39, 159, 219, 0.5) !important;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: max-content;
  border-top: 1px solid #000000;
  background-color: #000000 !important;
  padding-top: 17px !important;
  color: #ffffff;
  text-align: left;
}

.footer a {
  color: #ffffff;
}

.footer a:hover {
  color: #279fdb !important;
}

.panel-footer {
  padding: 10px 15px;
  background-color: rgba(39, 159, 219, 0.75) !important;
  border-top: 1px solid rgba(39, 159, 219, 0.75) !important;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  color: #ffffff;
}

.panel-footer a {
  color: #ffffff !important;
}

.panel-footer a:hover {
  color: #279fdb !important;
}

.panel-footer a.btn-danger:hover {
  color: #9f9f9f !important;
  background-color: #ac2925 !important;
}

.btn-primary {
  color: #fff;
  background-color: #08aae7;
  border-color: #08aae7;
}

.btn-primary:hover {
  background-color: rgba(8, 170, 231, 0.8);
  border-color: rgba(8, 170, 231, 0.75);
  box-shadow: 0 0 4px 1px rgba(8, 170, 231, 0.5);
}

.btn-info:hover {
  color: #fff;
  background-color: #ea7400;
  border-color: rgba(234, 116, 0, 0.75);
}

.frosted {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

.frosted div.panel-body {
  color: #ffffff;
}

.frosted div.panel-body:before {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.panel-default {
  /*background-color: rgba(0, 0, 0, 0.75)!important;*/
  /*background-color: rgba(208, 208, 208, 0.8)!important;*/
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.panel-default div.panel-body {
  color: #333333;
}

.panel-default div.panel-body:before {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.ttype-button {
  width: 100%;
  margin-bottom: 10px;
}

.att-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
}

.att-icon.icon-user {
  background-image: url("/img/usuario.svg");
}
.att-icon.icon-logout {
  background-image: url("/img/cerrarsesion.svg");
}
.att-icon.icon-config {
  background-image: url("/img/herramientas.svg");
}

.settings {
  padding-top: 2px;
  line-height: 55px;
  color: #009fdb;
  width: 32px;
  font-size: 20px;
  text-align: center;
  font-weight: lighter;
  cursor: pointer;
}

.settings-icons {
  width: 238px;
  text-align: center;
  color: #333333;
}

.btn-config {
  width: 80px !important;
}

.user-profile {
  padding-top: 0;
  line-height: 55px;
}

.user-profile span.user-full-name {
  color: white;
  font-family: "ATT Aleck Sans Regular", sans-serif;
  font-size: 17px;
  text-transform: capitalize;
}

.user-profile span.user-position {
  color: #009fdb;
  font-family: "ATT Aleck Sans Light", sans-serif;
  font-size: 17px;
  text-transform: capitalize;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  padding-left: 10px;
  float: right;
}

/* Specify styling for tooltip contents */
.tooltip.header-tooltip .tooltip-inner {
  color: #ffffff;
  background-color: #009fdb;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.tooltip.header-tooltip {
  top: 33px !important;
}

.user-logout {
  color: white;
  font-family: "ATT Aleck Sans Regular", sans-serif;
  font-size: 17px;
  text-transform: capitalize;
}

.dashboard {
  display: block;
  /* width: 100%; */
  width: 1170px;
  /*margin: 10px 0 0;*/
  padding: 0 30px;
  margin-left: auto;
  margin-right: auto;
}

.app-container {
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  display: grid;
  margin-top: 20px;
}

.app-container.list {
  width: 340px;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.app-container.grid {
  width: 100%;
  background-color: transparent;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.app-container.carousel {
  width: 100%;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#app-list-container.list {
}

#app-list-container.list div.app {
}

#app-list-container.grid {
}

#app-list-container.grid div.app {
}

#app-list-container.grid div.app img {
  object-fit: cover;
  width: 100%;
}

/* App details tooltip */
/* Specify styling for tooltip contents */
.tooltip.app-details .tooltip-inner {
  color: #ffffff;
  background-color: #009fdb;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
/* Hide arrow */
.tooltip.left.app-details .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #009fdb;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
/*cards-container {*/
/*    background-color: rgba(208, 208, 208, 0.25);*/
/*    padding: 10px 20px;*/
/*}*/

.app-card {
  background-color: transparent;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  height: 300px;
  border-radius: 5px;
  text-align: center;
  padding-bottom: 20px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  max-height: 230px;
  margin-bottom: 20px;
  opacity: 80%;
}

/* This container is needed to position the front and back side */
.app-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  /*transition: transform 0.5s;*/
  /*transform-style: preserve-3d;*/
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease-in;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.app-card:hover .app-card-inner {
  /*transform: rotateY(180deg);*/
  transform: rotateY(180deg);
  transition: transform 0.5s ease-out;
}

/* Position the front and back side */
.app-card-front,
.app-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);*/
  min-height: 230px !important;
  max-height: 230px !important;
}

/* Style the front side (fallback if image is missing) */
.app-card-front {
  background-color: #009fdb;
  color: white;
  border-radius: 5px;
  padding: 0;
  min-height: 230px;
  max-height: 230px;
}

.app-card-front img.media-object {
  margin: auto;
  display: block;
  height: 140px;
  background-color: #d0d0d04f;
  text-align: center;
  object-fit: cover;
  width: 100%;
}

.app-card-front h4.app-name {
  min-height: 40px;
  display: inline-block;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Style the back side */
.app-card-back {
  background-color: #ffffff;
  color: #333333;
  border-radius: 5px;
  padding: 0;
  display: block;
  min-height: 230px;
  transform: rotateY(180deg);
}

.app-card-back div.description {
  padding: 10px;
  min-height: 180px;
  max-height: 180px;
  display: block;
  height: 180px;
  font-size: 14px;
  text-align: left;
}

.app-card-back button.sel-app {
  display: inline-block;
  background-color: #ea7400;
  color: #ffffff;
  width: 100%;
  border-radius: 0;
  bottom: 0;
  /* position: absolute; */
  margin-top: 15px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  height: 35px;
  text-transform: uppercase;
  font-family: "ATT Aleck Sans Bold", sans-serif;
}

.app-card-back button.sel-app:hover {
  background-color: #ea7400;
  color: white;
}

/* Carousel items */
.apps-carousel {
}

.apps-carousel .carousel-inner {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.apps-carousel .carousel-card {
  background-color: #009fdb;
  /* display: inline-block; */
  width: 232px;
  min-width: 232px;
  max-width: 232px;
  height: 300px;
  border-radius: 5px;
  text-align: center;
  perspective: 1000px;
  max-height: 280px;
  margin-bottom: 20px;
  float: left;
  min-height: 300px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 0;
  margin-left: 0px;
  margin-right: 15px;
}

.apps-carousel .carousel-card img {
  display: block;
  background-color: #d0d0d04f;
  text-align: center;
  object-fit: cover;
  width: 100%;
  margin: 0;
  position: relative;
  top: 0;
}

.apps-carousel .carousel-card div.carousel-caption {
  top: 0;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;
  display: block;
  bottom: unset;
}

.apps-carousel .carousel-card div.carousel-caption h4 {
  font-size: 14px;
  font-family: "ATT Aleck Sans Bold", sans-serif;
  margin-left: 10px;
  margin-right: 10px;
  min-height: 30px;
  max-height: 30px;
}

.apps-carousel .carousel-card p {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 12px;
  font-family: "ATT Aleck Sans Light", sans-serif;
}

.apps-carousel .carousel-card button {
  display: inline-block;
  background-color: white;
  color: #309fdb;
  width: 100%;
  border-radius: 0;
  /*bottom: 0;*/
  /*position: absolute;*/
  bottom: 0;
  position: fixed;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  height: 35px;
  text-transform: uppercase;
  font-family: "ATT Aleck Sans Bold", sans-serif;
}

.apps-carousel ol.carousel-indicators {
  bottom: -20px;
}

.apps-carousel .carousel-control.left,
.apps-carousel .carousel-control.right {
  background-image: none;
}

.app-list-header h4 {
  color: #ffffff;
  font-family: "ATT Aleck Sans Bold", sans-serif;
}

.app-list-header img {
  margin-left: auto;
  margin-right: auto;
  width: 160px;
}

.alert-panel {
  top: 0px;
  width: 100% !important;
  position: relative;
  margin: 0px auto 0px;
  padding: 0;
  margin: 0;
}

.alert-panel div.panel {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border: 0;
}

.alert-panel div.panel-body {
  font-size: 11px !important;
  padding: 0 !important;
}

.alert-panel div.panel-footer {
  background-color: #ffffff;
  line-height: 30px;
  vertical-align: middle;
  height: 47px;
  border-top: 1px solid #ffffff;
}

@media screen and (min-width: 360px) and (max-width: 360px) {
}

@media (min-width: 960px) {
  .app-container.list {
    /*margin-left: 50%;*/
    /*width: 340px;*/
    margin-left: auto;
    width: 390px;
  }
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
  display: none;
}

.carousel-fade .carousel-indicators {
  z-index: 2;
  position: relative;
  top: 0px;
}

.panel-blue {
  background-color: rgba(39, 159, 219, 0.75) !important;
  border-color: rgba(39, 159, 219, 0.75) !important;
}

.main-panel-blue {
  border-color: rgba(39, 159, 219, 0.75) !important;
}

.panel {
  margin-bottom: 10px;
}

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .modal-dialog.modal-lg {
    width: 95%;
  }

  .modal-dialog.modal-md {
    width: 95%;
  }

  .doc-item {
    margin-bottom: 2px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .doc-item .col-md-1 {
    width: 40px !important;
    display: inline-block !important;
    float: left !important;
  }

  .doc-item .col-md-4 {
    width: 170px;
    display: inline-block;
    float: left;
  }

  .doc-item .col-md-2 {
    display: inline-block;
    width: 56px;
    float: left;
    padding: 0;
  }

  .app-card,
  .carousel-card {
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
  }

  .apps-carousel .carousel-inner {
    width: 87% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .alert-panel {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 50px;
  }

  div.card-grid {
    min-width: 90% !important;
    width: 90% !important;
    max-width: 90% !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  .alerts-carousel {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .alert-panel {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dashboard,
  .alerts-container,
  .app-container,
  #app-list-container.grid {
    width: 100% !important;
  }

  .alerts-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .msg-linea-50 {
    min-height: 470px;
    max-height: max-content;
  }

  .footer {
    position: relative;
    bottom: -60px;
    height: auto;
    margin-top: 0px;
    max-height: 180px;
    padding-bottom: 9px;
  }

  .app-container.list,
  .app-container.grid {
    width: 100%;
    position: relative;
    float: left;
  }

  #app-list-container.grid div.app {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .ttype-button {
    width: 100%;
    white-space: unset;
  }

  /* --------------------- */
  /*.app-container.list {*/
  /*    margin-left: auto;*/
  /*    width: 90%;*/
  /*}*/

  .att-menu li i.att-icon {
    float: left;
    position: relative;
    left: 0;
    top: -5px;
  }

  .att-menu li i.att-icon.icon-user {
    left: 0;
    top: 13px;
  }

  .att-menu li.user-profile {
    padding-left: 15px;
  }

  .att-menu li {
    float: left;
    display: inline-block;
    width: 100%;
  }

  .msg-linea-50 {
    background-color: #279fdb;
    padding: 10px;
    color: white;
    font-size: 11px;
    font-family: "ATT Aleck Sans Regular", sans-serif;
  }

  nav.navbar select.menu-dropdown {
    width: 92%;
    margin-left: 15px;
    margin-right: 15px;
  }

  .steps-indicator {
    width: 100%;
    height: max-content;
    display: block;
    min-height: 150px !important;
  }

  .steps-indicator ul:before {
    background-color: transparent;
  }

  .steps-indicator li {
    width: 100% !important;
  }

  .steps-indicator li a {
    display: inline-block;
    float: left;
    padding-left: 10px;
  }

  .steps-indicator li a:before {
    position: relative;
    display: inline-block;
    float: left;
    left: -10px;
    top: 0;
  }

  .smartphone-container {
    background-color: transparent;
    width: 100%;
    margin-bottom: 10px;
  }

  .smartphone-container div.smartphone-img-container {
    margin-bottom: 15px;
    min-height: 100px;
    max-height: 100px;
    height: 100px;
  }

  .smartphone-container div.smartphone-img-container img {
    height: 100%;
    width: auto;
  }

  .footer {
    position: relative;
    width: 100%;
    height: auto;
    border-top: 1px solid #000000;
    background-color: #000000;
    padding-top: 17px;
    color: #ffffff;
    text-align: center;
    margin-top: 0px;
    bottom: -60px;
  }

  .identidad-request-actions .btn {
    width: 100%;
    white-space: break-spaces;
    margin-bottom: 10px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 480px) and (max-width: 768px) {
  .app-card {
    /*width: 46%!important;*/
    /*float: left;*/
    /*min-width: 46%!important;*/
    /*max-width: 46%!important;*/
    /*margin-right: 20px;*/
  }

  .footer {
    position: relative;
    bottom: -60px;
    height: auto;
    margin-top: 0px;
    max-height: 180px;
    padding-bottom: 9px;
  }

  .app-container.list {
    width: 75%;
    position: relative;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  .app-container.carousel {
    /*background-color: salmon;*/
  }
}

/*!* Medium Devices, Desktops *!*/
/*@media only screen and (min-width : 992px) {*/
/*    .app-card {*/
/*        width: 100%;*/
/*    }*/
/*}*/

/*!* Large Devices, Wide Screens *!*/
/*@media only screen and (min-width : 1200px) {*/
/*    .app-card {*/
/*        width: 100%;*/
/*    }*/
/*}*/

/*!*==========  Non-Mobile First Method  ==========*!*/

/*!* Large Devices, Wide Screens *!*/
/*@media only screen and (max-width : 1200px) {*/

/*}*/

.cards-container {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  width: auto;
  /*margin: 0 40px;*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.cards-container-smartphones {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  width: auto;
  /*margin: 0 40px;*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cards-container-smartphones div.flip-card {
  width: 220px;
}

.cards-container-smartphones div.flip-card img.img-responsive.smartphone {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 153px;
  margin-left: auto;
  margin-right: auto;
}

.cards-container > .card-list {
  min-width: 100% !important;
  width: 100px !important;
  max-width: 100% !important;
  margin: 10px auto;
}

.cards-container > .card-grid {
  /*min-width: 300px!important;
    width: 300px!important;
    max-width: 300px!important;*/
  min-width: 255px;
  width: 255px;
  max-width: 255px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin: 10px auto;
}

span.bene-logo {
  line-height: 50px;
  vertical-align: middle;
}

/* Alerts styles */
/* Alerts */
.msg-linea-50 {
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  color: white;
  font-size: 11px;
  font-family: "ATT Aleck Sans Regular", sans-serif;
  margin-right: 0 !important;
  margin-left: 0 !important;
  min-height: 275px;
  max-height: max-content;
  height: max-content;
  border: 0;
}

.msg-linea-50 strong {
  color: #333;
  font-family: "ATT Aleck Sans Bold", sans-serif;
}

.msg-linea-50 div.bottom {
  font-size: 11px;
  color: black;
  font-weight: bold;
  padding-top: 70px;
}

.msg-linea-50 div.colaborador {
  font-size: 18px;
  padding-bottom: 20px;
}

/* Gastos Funerarios */

.gastos-funerarios input[type="text"] {
  text-transform: uppercase;
}

.small-errors .alert {
  padding: 10px;
  right: -54px;
  float: right;
  width: 174px;
  top: 10px;
  position: relative;
}

.gastos-funerarios .small-errors .alert {
  right: 0;
}

.small-errors .alert button {
  right: 0px;
}

input.ng-invalid {
  border: 1px solid #cf2a2a;
  background-color: #cf2a2a56;
}

input.ng-invalid:focus,
input.ng-invalid:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.input-error-label {
  border: 1px solid #cf2a2a;
  background-color: rgba(207, 42, 42, 0.75);
  margin-top: 2px;
  font-weight: bold;
  padding: 5px;
}

.input-error-label span.error-message:after {
  content: "\e088";
  font-family: "Glyphicons Halflings";
  float: right;
}

.input-error-label span.error-message {
  color: white;
}

input.ng-valid {
  border: 1px solid #4ca90c;
}

/*input.ng-valid:after {*/
/*    content: '\e089';*/
/*    font-family: 'Glyphicons Halflings';*/
/*    float: right;*/

/*}*/

.msg-linea-50 {
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  color: white;
  font-size: 11px;
  font-family: "ATT Aleck Sans Regular", sans-serif;
  margin-right: 0 !important;
  margin-left: 0 !important;
  min-height: 275px;
  max-height: max-content;
  height: max-content;
  border: 0;
}

.msg-linea-50 strong {
  color: #333;
  font-family: "ATT Aleck Sans Bold", sans-serif;
}

.msg-linea-50 div.bottom {
  font-size: 11px;
  color: black;
  font-weight: bold;
  padding-top: 70px;
}

.msg-linea-50 div.colaborador {
  font-size: 18px;
  padding-bottom: 20px;
}

.msg-linea-50 div.banner-img {
  padding: 0;
  background-size: cover;
  height: 296px;
  overflow: hidden;
  margin: 0;
  border: 0;
}

.msg-linea-50 div.banner-img.linea-50 {
  /*background-image: linear-gradient(to left, rgb(48, 159, 219) 1%, rgba(245, 246, 252, .5) 25%), url(../img/alert-banner_01.jpg);*/
  background-image: linear-gradient(
      to left,
      rgb(48, 159, 219) 1%,
      rgba(245, 246, 252, 0.5) 25%
    ),
    url(../img/alert-banner_01.webp);
}

.msg-linea-50 div.banner-img.outlet {
  /*background-image: linear-gradient(to left, rgb(234, 116, 0) 1%, rgba(245, 246, 252, .5) 25%), url(../img/alert-banner_02.jpg);*/
  background-image: linear-gradient(
      to left,
      rgb(234, 116, 0) 1%,
      rgba(245, 246, 252, 0.5) 25%
    ),
    url(../img/alert-banner_02.webp);
}

.msg-linea-50 div.banner-img.welcome {
  /*background-image: linear-gradient(to left, rgb(255, 255, 255) 1%, rgba(245, 246, 252, .5) 25%), url(../img/alert-banner_03.jpg);*/
  background-image: linear-gradient(
      to left,
      rgb(255, 255, 255) 1%,
      rgba(245, 246, 252, 0.5) 25%
    ),
    url(../img/alert-banner_03.webp);
}

.msg-linea-50 div.banner-img img {
  background-size: cover;
  height: 296px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  border: 0;
}

.msg-linea-50 div.body {
  margin: 0;
  padding: 10px 20px 10px 20px;
  background-color: #309fdb;
  text-align: left;
  height: 296px;
  color: white;
  font-size: 14px;
}

.msg-linea-50 .welcome-banner {
  font-size: 24px;
}

.msg-linea-50 .welcome-banner h4 {
  font-size: 26px;
}

span.banner-linea-50-mail {
  font-size: 11px;
}

.msg-linea-50 div.body.blue {
  background-color: #309fdb;
}
.msg-linea-50 div.body.green {
  background-color: #4ca90c;
}
.msg-linea-50 div.body.orange {
  background-color: #ea7400;
}
.msg-linea-50 div.body.white {
  background-color: #ffffff;
  color: #333333;
}
.msg-linea-50 div.body.black {
  background-color: #333333;
}

.msg-linea-50 div.body .left-main {
  font-size: 20px;
}

.msg-linea-50 div.body .left-bottom {
  font-size: 12px;
  color: black;
  font-weight: bold;
  padding-top: 70px;
}

.bene-logo {
  /*font-size: 27px;
    line-height: 27px;
    margin: 0;
    text-align: left;
    width: fit-content;*/
  font-size: 32px;
  line-height: 32px;
  margin: 0;
  text-align: center;
  width: 100%;
}

.bene-logo .bold {
  font-family: "ATT Aleck Sans Bold", serif;
  color: #309fdb;
}

.bene-logo .thin {
  font-family: "ATT Aleck Sans Light", serif;
  color: #333333;
  text-align: left;
  font-weight: 500;
}

.steps-indicator:before {
  position: absolute;
  height: 1px;
  /*width: 1076px;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#apps-menu ul.dropdown-menu,
#external-apps ul.dropdown-menu {
  background-color: #000000;
}

#external-apps ul.dropdown-menu li.no-hover:hover {
  background-color: #000000;
}

#external-apps ul.dropdown-menu li span {
  color: #000000;
  font-size: 11px;
  margin: 5px;
  display: inline-block;
  background-color: white;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px;
}

#apps-menu ul.dropdown-menu li a,
#external-apps ul.dropdown-menu li a {
  color: #ffffff;
}

#apps-menu ul.dropdown-menu li a:hover,
#external-apps ul.dropdown-menu li a:hover {
  background-color: #ea7400;
}

#apps-menu ul.dropdown-menu li,
#external-apps ul.dropdown-menu li {
  background-color: #000000;
}

#apps-menu ul.dropdown-menu li:hover,
#external-apps ul.dropdown-menu li:hover {
  background-color: #ea7400;
}

/*.steps-indicator.steps-1:before, .steps-indicator.steps-2:before, .steps-indicator.steps-3:before,*/
/*.steps-indicator.steps-4:before, .steps-indicator.steps-5:before, .steps-indicator.steps-6:before,*/
/*.steps-indicator.steps-7:before, .steps-indicator.steps-8:before, .steps-indicator.steps-9:before,*/
.upload-document {
  margin-bottom: 10px;
}

.steps-indicator.steps-3:before,
.steps-indicator.steps-4:before,
.steps-indicator.steps-5:before {
  left: 0 !important;
  width: 90% !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
  position: relative;
}

/* UPS Related Styles */
ul.ups-stores {
  display: inline-block;
  float: left;
  min-height: 150px;
  height: 300px;
  max-height: 300px;
  border: 1px solid #309fdb;
  border-radius: 5px;
  overflow: scroll;
  list-style: none;
}

ul.ups-stores li.ups-delivery-point {
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
  margin-bottom: 5px;
  width: 99%;
}

.col-container {
  display: table; /* Make the container element behave like a table */
  width: 100%; /* Set full-width to expand the whole page */
}

.col {
  display: table-cell; /* Make elements inside the container behave like table cells */
}

@media screen and (max-width: 420px) {
  .msg-linea-50 div.body {
    color: #333333;
  }

  .msg-linea-50 {
    height: 869px;
    min-height: 869px;
  }

  .msg-linea-50 div.body {
    height: max-content;
  }
}

.banner-donate-overlay {
  color: #309fdb;
  top: 0;
  position: absolute;
  width: auto;
  height: 100%;
  margin-left: 25%;
  margin-right: 25%;
  padding-top: 10px;
  padding-bottom: 20px;
}

.banner-donate-overlay div.title {
  font-size: 46px;
  font-weight: bold;
}

.banner-donate-overlay div.content {
  font-size: 25px;
  color: #333333;
}

.banner-donate-overlay div.btn-donate {
  background-color: #309fdb;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 20px;
  border-radius: 3px;
  width: 22%;
  margin-top: 10px;
  cursor: pointer;
}

.donate-bg {
  background-image: url("/img/donate_banner_bg.png");
}

@media screen and (min-width: 360px) and (max-width: 360px) {
  .banner-donate-overlay {
    display: inline-block;
    float: left;
    width: 100%;
    left: 0;
    margin: 0;
    padding-top: 34px;
  }

  .banner-donate-overlay .title {
    text-shadow: 0 0 10px rgb(48 159 219);
    color: white;
  }

  .banner-donate-overlay .content {
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .banner-donate-overlay .content .btn-donate {
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
  }

  .huawei-banner {
    background-image: url("/img/banner_huawei_small.png") !important;
    min-height: 869px !important;
    max-height: 869px !important;
    height: 869px !important;
  }

  .huawei-banner .content {
    width: 100% !important;
    padding: 10px !important;
  }

  .huawei-banner .content .title {
    padding-top: 15px;
    padding-left: 120px;
    padding-bottom: 200px;
  }

  .huawei-banner .content .text {
    margin-left: 0 !important;
  }

  .huawei-banner .content .text .normal {
    padding-top: 25px !important;
    padding-bottom: 27px !important;
  }

  .huawei-banner .content .text .red {
    padding-bottom: 30px;
  }

  .huawei-banner .content .text div.btn-go {
    font-size: 24px !important;
    width: 100% !important;
    padding-top: 8px !important;
  }
}

.huawei-banner {
  background-image: url("/img/banner_huawei.png");
  background-color: rgb(48 159 219);
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.huawei-banner .content {
  width: 50%;
  text-align: left;
  padding: 10px 0 0 100px;
}

.huawei-banner .content .title {
  font-size: 40px;
  font-weight: bolder;
}

.huawei-banner .content .title span.small {
  font-size: 75%;
}

.huawei-banner .content .text {
  font-size: 20px;
  margin-left: 32px;
  font-family: "ATT Aleck Sans Light", serif;
}

.huawei-banner .content .text strong {
  color: white;
  font-size: 24px;
}

.huawei-banner .content .text strike {
  text-decoration-color: red;
}

.huawei-banner .content .text .normal {
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
}

.huawei-banner .content .text .red {
  color: #fa5e59;
  font-size: 13px;
  padding-left: 15px;
  font-weight: bold;
}

.huawei-banner .content .text div.btn-go {
  background-color: #fa5e59;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 14px;
  border-radius: 3px;
  width: 140px;
  margin-top: 0px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  float: right;
  padding-top: 3px;
  text-transform: uppercase;
}

.directv-banner {
  background-image: url("/img/banner_directvgo.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.directv-banner div.btn-go {
  background-color: white;
  font-size: 14px;
  border-radius: 3px;
  width: 225px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding-top: 6px;
  text-transform: uppercase;
  margin: auto;
  height: 27px;
  color: #333333;
  bottom: 13%;
  right: 30%;
  position: absolute;
}

.outlet-banner {
  background-image: url("/img/outlet-banner-offer.jpg");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.reserve-calendar {
  background-image: url("/img/reserve-calendar-banner-out.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.rtw-banner-main {
  background-image: url("/img/rtw-banner.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.banner-att-contigo {
  background-image: url("/img/bannerATTcontigo_1110.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.att-contigo-2025 {
  background-image: url("/img/ATT-PORTALEMPL-2025_03-banner_ATTcontigo.jpg");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.subsidio-comedor {
  background-image: url("/img/subsidio-comedor-banner-main.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.subsidio-comedor-int {
  background-image: url("/img/subsidio-comedor-banner-int.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 150px;
  max-height: 150px;
  height: 150px;
}

.dia-madre {
  background-image: url("/img/dia-de-las-madres-banner-main.png?v=202504071c");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.dia-madre-int {
  background-image: url("/img/dia-de-las-madres-banner-int.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 150px;
  max-height: 150px;
  height: 150px;
}

.dia-padre {
  background-image: url("/img/dia-padre-banner-int.png?v=202505151c");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.dia-padre-int {
  background-image: url("/img/dia-padre-banner-main.png?v=202505151c");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 150px;
  max-height: 150px;
  height: 150px;
}

.iphone13 {
  background-image: url("/img/iphone-13.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.survey-nom35-banner {
  background-image: url("/img/NOM-35-ENCUESTA_1110px.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.armalo-banner {
  background-image: url("/img/banner_premium_big.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.armalo-banner-1 {
  background-image: url("/img/armalo-banner-upd-1.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.d20millones-banner {
  background-image: url("/img/20millones-banner.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.resguardo-equipos {
  background-image: url("/img/resguardos-large.png?ts=2022-09-12");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.nom-35-banner-externo {
  /*background-image: url("/img/nom35-banner-externo.png?ts=2022-10-13");*/
  background-image: url("/img/banner-nom-35-big.png?ts=2024-04-09");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.payroll-banner-externo {
  background-image: url("/img/declaracion-externo.png?ts=2022-11-25");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}


.intune {
  background-image: url("/img/intune-large.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.mantenimiento-hd {
    background-image: url(/img/mantenimiento_beneficios_mayo_2025.png?ts=202505232a);
    background-color: #000000;
    background-repeat: no-repeat;
    min-height: auto;
    max-height: 296px;
    height: 259px;
    background-size: contain;
    vertical-align: middle;
    line-height: 296px;
}


.armalo-banner div.btn-go {
  float: right;
  margin-right: 50px;
  margin-top: 40px;
}

.armalo-banner div.btn-go div.regular {
  font-family: "ATT Aleck Sans Light", sans-serif;
  font-size: 30px;
  text-align: left;
}

.armalo-banner div.btn-go span.discount {
  font-size: 60px;
  font-family: "ATT Aleck Sans Bold", sans-serif;
  vertical-align: middle;
}

.armalo-banner div.btn-go .link {
  font-size: 20px;
  margin-top: 40px;
}

.outlet-banner div.btn-go {
  background-color: rgb(66, 158, 222);
  font-size: 18px;
  border-radius: 3px;
  width: 170px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding-top: 6px;
  text-transform: uppercase;
  margin: auto;
  height: 32px;
  color: #ffffff;
  bottom: 10%;
  right: 25%;
  position: absolute;
  box-shadow: 0 0 15px rgba(66, 158, 222, 0.9);
}

.outlet-iphone12pro {
  /*background-image: url('/img/iphone-12-pro-banner-outlet.png');*/
  background-image: url("/img/iphone-12-pro-banner-outlet_updated.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 296px;
  max-height: 296px;
  height: 296px;
  cursor: pointer;
}

.identidad-buen-fin {
  background-image: url("/img/buen_fin.png");
  background-color: #000000;
  background-repeat: no-repeat;
  min-height: 296px;
  max-height: 296px;
  height: 296px;
  cursor: pointer;
}

.outlet-iphone12pro .content {
  display: block;
  width: 50%;
  float: right;
  font-size: 12px;
  margin-top: 70px;
  padding: 10px;
}

.outlet-iphone12pro .content h3 {
  color: #309fdb;
  font-size: 24px;
  font-family: "ATT Aleck Sans Light", serif;
  font-weight: bold;
}

.outlet-iphone12pro .content h3 strong {
  font-size: 20px;
  color: #309fdb;
  font-family: "ATT Aleck Sans Regular", sans-serif;
}

.outlet-iphone12pro .content p.sub-title {
  color: white;
  font-size: 16px;
}

.outlet-iphone12pro .content p.sub-title strong {
  color: white;
}

.outlet-iphone12pro .content p.content-1 {
  color: white;
  font-size: 14px;
}

.outlet-iphone12pro .content p.content-2 {
  color: white;
  font-size: 16px;
}

.outlet-iphone12pro div.btn-go {
  background-color: rgb(66, 158, 222);
  font-size: 16px;
  border-radius: 3px;
  width: auto;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding-top: 6px;
  text-transform: uppercase;
  margin: auto;
  height: 32px;
  color: #ffffff;
  bottom: 7%;
  right: 11%;
  position: absolute;
  box-shadow: 0 0 15px rgba(66, 158, 222, 0.9);
  padding-left: 10px;
  padding-right: 10px;
}

.success-message {
  background-color: #309fdb;
  /*font-size: 1.5em;*/
  /*font-family: "ATT Aleck Sans Regular", sans-serif;*/
  /*color: #ffffff;*/
  /*padding: 25px;*/
  background-image: url("/img/banner-success-factors.png");
  min-height: 275px;
  max-height: 296px;
  height: 296px;
}

.success-message .info {
  float: left;
  display: inline-block;
  width: 20%;
  border: 1px solid;
  min-height: 240px;
  position: relative;
  background-color: #309fdb;
  border-radius: 5px 0 0 5px;
  font-size: 150px;
  vertical-align: middle;
  padding-top: 50px;
  line-height: 189px;
}

.success-message .container {
  background-color: #ffffff;
  color: #333333;
  padding: 10px 20px;
  display: block;
  width: 80%;
  float: left;
  border-radius: 0 5px 5px 0;
}

.success-message .container h3 {
  color: #309fdb;
  font-family: "ATT Aleck Sans Bold", serif;
  font-size: 2em;
}

.success-message .container p.body {
  color: #309fdb;
  font-size: 1em;
}

.success-message .container p.body strong {
  color: #309fdb;
  font-weight: bold;
  font-family: "ATT Aleck Sans Bold", serif;
}

.success-message .container p.sub {
  color: #ea7400;
  font-family: "ATT Aleck Sans Bold", serif;
  font-size: 1.3em;
}

.success-message .container p.footer {
  color: #309fdb !important;
  background-color: transparent !important;
  position: relative;
  bottom: unset;
  width: unset;
  height: unset;
  border-top: unset;
  padding-top: unset !important;
  text-align: center;
  font-weight: bold;
}

.success-message .container p.footer spam.email {
  background-color: #2b542c;
}

.term-letter {
  font-size: 12px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.term-letter div.section {
  margin-top: 20px;
}

.term-letter div.section div.title {
  font-weight: bold;
  margin-bottom: 10px;
}

/* -------------------- */
.tooltip {
  font-family: "ATT Aleck Sans", serif;
}

.tooltip-inner {
  background-color: #337ab7;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  border-top-color: #337ab7;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: #337ab7;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color: #337ab7;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #337ab7;
}
.tooltip.left .tooltip-arrow {
  border-left-color: #337ab7;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #337ab7;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: #337ab7;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #337ab7;
}
/* -------------------- */

.tooltip.foot-note .tooltip-inner {
  width: 320px;
  background-color: #337ab7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.tooltip.foot-note .tooltip-arrow {
  background-color: transparent;
  border-top-color: #337ab7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* --- PAYROLL Styles --- */

p.instructions {
  font-size: 13px;
}

div.letter {
  /*border: 1px solid #d0d0d0;*/
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/
  /*padding: 20px;*/
  /*background-color: #ffffff;*/
  border-top: 1px solid #d0d0d0;
  padding: 20px;
  border-bottom: 1px solid #d0d0d0;
  margin-top: 10px;
}

div.letter div.date {
  font-size: 14px;
  margin-bottom: 20px;
  width: 100%;
  text-align: right;
  color: #337ab7;
  font-weight: bold;
}

div.letter div.body {
  font-size: 14px;
  color: #333333;
}

div.letter div.body span.dynamic {
  color: #337ab7;
  font-weight: bold;
}

div.letter div.body div.signature div.name {
  text-align: center;
  color: #337ab7;
  font-weight: bold;
  font-size: 14px;
}

div.letter div.body div.signature div.letter-actions {
  text-align: center;
}

div.letter div.body div.signature div.signature {
  text-align: center;
  color: #333333;
  font-family: monospace, monospace;
  font-size: 11px;
}

.accept-block {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.mono-font {
  font-family: monospace, monospace;
  font-size: 12px;
}

.modal-body ol {
  list-style: lower-alpha;
}

/* RTW Classes */

.rtw-calendar ul.list-group.employee-list {
  height: 420px;
  overflow-y: scroll;
}

.rtw-calendar ul.list-group.employee-list li.list-group-item.employee {
}

.rtw-calendar ul.list-group.employee-list li.list-group-item.employee:before {
  content: "\e236";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  cursor: move;
}

.rtw-calendar div.filter {
  margin: 10px 5px;
}

.rtw-calendar-table th.friday,
.rtw-calendar-table td.friday {
  /*border-right: 1px solid #d0d0d0;*/
  border-right: 1px solid #333333;
}

.rtw-calendar-table th,
.rtw-calendar-table td {
  text-align: center;
  min-width: 33px;
}

.rtw-calendar-table th span.badge.red,
ul.iconography li span.badge.red {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.rtw-calendar-table th span.badge.yellow,
ul.iconography li span.badge.yellow {
  color: #ffffff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.rtw-calendar-table th span.badge.green,
ul.iconography li span.badge.green {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.rtw-calendar-table td.employee span.badge.red {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.rtw-calendar-table td.employee span.badge.yellow {
  color: #ffffff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.rtw-calendar-table td.employee span.badge.green {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.rtw-calendar-table td.red,
.rtw-calendar-table td.holiday {
  background-color: rgba(217, 83, 79, 0.25);
}
.rtw-calendar-table td.yellow {
  background-color: rgba(240, 173, 78, 0.25);
}
.rtw-calendar-table td.green {
  background-color: rgba(92, 184, 92, 0.25);
}

.rtw-calendar-table th.week {
  border-right: 1px solid #d0d0d0;
}

.rtw-calendar-table th.week:last-child {
  border-right: 0;
}

.rtw-calendar-table td.left {
  text-align: left;
  display: block;
}

.rtw-calendar-table td.employee,
.rtw-calendar-table td.employee {
  border-right: 1px solid #d0d0d0;
  width: 350px;
}

.rtw-calendar-table th.left input.form-control {
  height: 25px;
  font-size: 11px;
  padding-bottom: 2px;
}

.period-container .panel.panel-primary .panel-title > .small,
.period-container .panel.panel-primary .panel-title > .small > a,
.period-container .panel.panel-primary .panel-title > a,
.period-container .panel.panel-primary .panel-title > small,
.period-container .panel.panel-primary .panel-title > small > a {
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  outline: none;
  text-decoration: none;
}

/*Calendario Reserva*/
.employee-calendar {
  margin-top: 20px;
}
.employee-calendar h4 {
  font-weight: bold;
  font-size: 16px;
}

.employee-calendar .calendar .fc-toolbar {
  text-transform: capitalize;
}

.employee-calendar .calendar .fc-toolbar h2 {
  font-size: 20px;
  font-weight: bold;
}

a.fc-day-grid-event.fc-event {
  cursor: pointer;
}

.with-event {
  background-color: green;
}

.with-holiday {
  background-color: red;
}

#calendar table caption {
  font-size: 20px;
  font-family: "ATT Aleck Sans Regular", sans-serif;
  text-align: center !important;
  color: #333333;
  font-weight: bold;
}
#calendar table {
  width: 100%;
  border: 1px solid #ddd;
}

#calendar table td.day, #calendar table td {
  /*#calendar table td {*/
  width: 14.28%;
  height: 65px;
  border: 1px solid #ddd;
  vertical-align: top;
  padding: 5px;
  font-weight: 100 !important;
  font-size: 10px !important;
}

#calendar table td.day.event.holiday {
  background-color: #d0d0d0 !important;
  color: #333333 !important;
}

#calendar table td.green.weekend.not-month.old,
#calendar table td.green.weekend.old,
#calendar table td.green.weekend,
#calendar table td.green.weekend.office-weekend,
#calendar table td.red.weekend.not-month.old,
#calendar table td.red.weekend.old,
#calendar table td.red.weekend,
#calendar table td.yellow.weekend.not-month.old,
#calendar table td.yellow.weekend.old,
#calendar table td.yellow.weekend,
#calendar table td.green.not-month.old,
#calendar table td.yellow.not-month.old,
#calendar table td.red.not-month.old,
#calendar table td.green.old,
#calendar table td.yellow.old,
#calendar table td.red.old,
#calendar table td.holiday,
#calendar table td.holiday.red,
#calendar table td.holiday.green,
#calendar table td.holiday.yellow,
#calendar table td.not-month.old.old-home-office {
  background-color: rgba(208, 208, 208, 0.5) !important;
  background-image: none;
  color: #333333;
  font-weight: 100;
}

/*#calendar table td.green.weekend.office-weekend {*/
/*  background-color: rgb(208, 208, 208) !important;*/
/*  color: #333333!important;*/
/*  background-size: 1px 1px;*/
/*}*/

#calendar table td.green.weekend {
  color: white;
  background-image: repeating-linear-gradient( 45deg, rgba(80, 174, 74, 1) 0, rgba(79, 176, 79, 1) 1px, #ffffff 0, #ffffff 50% );
  background-size: 1px 1px;
}

#calendar table td.yellow.weekend {
  color: white;
  background-image: repeating-linear-gradient(
          45deg,
          rgba(255, 184, 28, 1) 0,
          rgba(255, 184, 28, 1) 1px,
          #ffffff 0,
          #ffffff 50%
  );
  background-size: 1px 1px;
}

#calendar table td.red.weekend {
  color: white;
  background-image: repeating-linear-gradient(
          45deg,
          rgba(207, 42, 42, 1) 0,
          rgba(207, 42, 42, 1) 1px,
          #ffffff 0,
          #ffffff 50%
  );
  background-size: 1px 1px;
}

#calendar table td.green.old.old-home-office {
  background-color: #ff8226 !important;
  background-image: none;
  color: #333333;
  font-weight: 100;
}

#calendar table td.not-month.old.old-home-office,
#calendar table td.green.old.today-home-office,
#calendar table td.red.old.today-home-office,
#calendar table td.yellow.old.today-home-office {
  background-color: rgba(255, 130, 38, 0.8) !important;
  color: white;
}

#calendar table td.green.old span.home-office,
#calendar table td.red.old span.home-office,
#calendar table td.yellow.old span.home-office,
#calendar table td.not-month.old.old-home-office span.home-office,
#calendar table td.not-month.today-home-office span.home-office {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc-home-office.svg) !important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
}

#calendar table td.green.holiday,
#calendar table td.weekend.holiday.not-month {
  background-color: #ffffff !important;
}

#calendar table td.holiday span.holiday {
  display: inline-block;
  position: relative;
  top: 30px;
  color: #333333;
  font-weight: 100;
  display: block;
  position: relative;
  top: 20px;
  color: #333333;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc-holiday.svg) !important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
}

#calendar table td.planned.not-month.old,
#calendar table td.planned.old,
#calendar table td.planned,
#calendar table td.planned.red,
#calendar table td.planned.green,
#calendar table td.planned.yellow,
#calendar table td.temporal.not-month.old,
#calendar table td.temporal.old,
#calendar table td.temporal,
#calendar table td.temporal.red,
#calendar table td.temporal.green,
#calendar table td.temporal.yellow {
  color: white;
  cursor: pointer;
  background-color: rgba(8, 170, 231, 1) !important;
  background-image: none;
}


#calendar table td.event.not-month.old,
#calendar table td.event.old,
#calendar table td.event,
#calendar table td.event.red,
#calendar table td.event.green,
#calendar table td.event.yellow
{
  color: white;
  cursor: pointer;
  background-color: rgba(8, 170, 231, 0.75) !important;
  background-image: none;
}


#calendar table td.event.green.temporal {
  color: white;
  cursor: pointer;
  background-color: rgba(8, 170, 231, 0.8) !important;
  background-image: none;
}

#calendar table td.event span.event {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url('/img/rc-office.svg')!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
}

#calendar table td.planned span.planned,
#calendar table td.green.event.today-home-office span.planned-office,
#calendar table td.green.event span.planned-office {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url('/img/rc_planned.svg')!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
}

#calendar table td.temporal span.temporal {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url('/img/rc_temporal.svg')!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
}

#calendar table td span.day-label {
  display: block;
  position: relative;
  top: 30px;
  color: #ffffff;
}

#calendar table td.red span.day-label {
  display: inline-block;
}
#calendar table td.yellow span.day-label {
  display: inline-block;
}
#calendar table td.green span.day-label {
  display: inline-block;
}
#calendar table td.event span.day-label {
  display: none;
}

#calendar table td.red {
  color: white;
  font-weight: 600;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(207, 42, 42, 1) 0,
    rgba(207, 42, 42, 1) 1px,
    #ffffff 0,
    #ffffff 50%
  );
  background-size: 1px 1px;
}

#calendar table td.yellow {
  color: #8a6d3b;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 184, 28, 1) 0,
    rgba(255, 184, 28, 1) 1px,
    #ffffff 0,
    #ffffff 50%
  );
  background-size: 1px 1px;
}

#calendar table td.green {
  color: white;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(80, 174, 74, 1) 0,
    rgba(79, 176, 79, 1) 1px,
    #ffffff 0,
    #ffffff 50%
  );
  background-size: 1px 1px;
}

#calendar table td span.badge {
  background-color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  float: right;
  margin-right: 5px;
  top: 0;
  position: relative;
  color: #4bae4b;
  padding: 2px 5px 0 5px;
  font-size: 13px !important;
}

#calendar table td.yellow span.badge {
  color: #8a6d3b;
}
#calendar table td.green span.badge {
  color: #4bae4b;
}
#calendar table td.red span.badge {
  color: #cf2a2a;
}
#calendar table td.event span.badge {
  color: #08aae7;
}

#calendar table th {
  background-color: rgba(8, 170, 231, 1);
  color: #fff;
  font-size: 12px;
  padding: 5px;
  text-align: center;
}

#calendar table td span.day-date {
  font-weight: bold;
  font-size: 12px;
}

/* RTW Calendar */

#calendar table.calendar.rtw td.not-month,
#calendar table.calendar.rtw td.day.weekend {
  background-color: #d0d0d0;
  color: #333333;
  background-image: none;
}

#calendar table.calendar.rtw td.day {
  background-color: #ff8226;
  color: white;
  background-image: url("/img/home-office.svg");
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 5px;
  background-position-y: 10px;
}

#calendar table.calendar.rtw td.day.old {
  color: white;
  /* background-color: rgb(229, 229, 247); */
  opacity: 0.6;
  /* background-size: 3px 3px;
  background-image: repeating-linear-gradient(
    45deg,
    #ff8226 0,
    #ff8226 1px,
    #e5e5f7 0,
    #e5e5f7 50%
  ); */
}

#calendar table.calendar.rtw td.day.event {
  background-color: #009fdb;
  color: white;
  background-image: url("/img/office.svg") !important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 5px;
  background-position-y: 10px;
}

#calendar table.calendar.rtw td.day.event.old {
  /* background-color: rgb(229, 229, 247); */
  opacity: 0.6;
  /* background-size: 3px 3px;
  background-image: repeating-linear-gradient(
    45deg,
    rgb(0, 159, 219) 0px,
    rgb(0, 159, 219) 1px,
    rgb(229, 229, 247) 0px,
    rgb(229, 229, 247) 50%
  ); */
  color: white;
}

#calendar table.calendar.rtw td.day.holiday {
  background-color: #00a143 !important;
  color: white;
  background-image: url("/img/holiday.svg") !important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 5px;
  background-position-y: 10px;
}

#calendar table.calendar.rtw td.day.holiday.old {
  color: white;
  /* background-color: rgb(229, 229, 247); */
  opacity: 0.6;
  /* background-size: 3px 3px;
  background-image: repeating-linear-gradient(
    45deg,
    #00a143 0,
    #00a143 1px,
    #e5e5f7 0,
    #e5e5f7 50%
  ) !important; */
}

/* End RTW Calendar */

ul.list-group.iconography {
  font-size: 11px;
}

ul.list-group.iconography li {
  text-align: left;
  padding-top: 5px;
  padding-bottom: 5px;
}

.support {
  position: fixed;
  width: 320px;
  color: white;
  padding: 0;
  min-height: 234px;
  /* max-height: 234px; */
  transition: 0.5s;
  margin: 0;
  /* transform: translate(0, -50%); */
  overflow-x: hidden;
  /* overflow-y: hidden; */
  right: -272px;
  font-size: 14px;
  top: 100px;
  z-index: 1;
  height: 325px;
}

.support div.label {
  position: relative;
  left: 0px;
  font-size: 16px;
  text-transform: uppercase;
  top: 10px;
  float: left;
  margin: 0;
  padding: 0;
  line-height: 48px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #ea7400;
  width: 48px;
  height: 48px;
  display: inline-block;
  text-align: center;
  border-radius: 5px 0 0 5px;
  /*box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.5);*/
}

.support div.content {
  position: relative;
  top: 0;
  padding: 10px;
  margin-left: 48px;
  margin-right: 0;
  background-color: #f0f0f0;
  color: #333333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  height: fit-content;
}

.support div.content h5 {
  font-weight: bold;
}

.support div.content .well {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0;
  font-size: 12px;
  font-family: "ATT Aleck Sans Light", sans-serif;
  border-color: transparent;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

.support:hover {
  right: 0;
}

.att-icon.icon-help {
  background-image: url(../img/ayuda.svg);
  width: 48px;
  height: 48px;
  display: block;
  left: -4px;
  position: relative;
}

.sub-apps-container {
  display: flex;
  -webkit-display: box;
  -moz-display: box;
  -ms-display: flexbox;
  -webkit-display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.sub-apps-container .cards {
  display: flex;
  padding: 1rem;
  margin-bottom: 0;
  /*width: 100%;*/
  width: 25%;

  /*@media(min-width: 40rem) {*/
  /*    width: 50%;*/
  /*}*/
  /*@media(min-width: 56rem) {*/
  /*    width: 33.3%;*/
  /*}*/
}

.sub-apps-container .cards .card-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
  border-radius: 6px;
  /*box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);*/
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.1s;
  -webkit-transition: transform 0.1s;
  min-height: 119px;
  min-width: 257px;
  max-height: 119px;
  max-width: 257px;
}

.sub-apps-container .cards .card-item:hover {
  cursor: pointer;
  /*transform: scale(1.1);*/
  /*-webkit-transform: scale(1.1);*/
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

.sub-apps-container .cards .card-item span.sub-module-icon {
  color: #33aae7;
  margin-top: 15px;
}

.sub-apps-container .cards .card-item.active {
  background-color: #33aae7 !important;
  color: white;
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

.sub-apps-container .cards .card-item.active span.sub-module-icon {
  color: white;
}

.sub-apps-container .cards .card-image {
  opacity: 1;
}

.sub-apps-container .cards .card-item {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 5px;
}

.sub-apps-container .cards .card-title {
  font-size: 14px;
  line-height: 1.1em;
  color: #333333;
  margin-bottom: 0.2em;
  font-weight: bold;
  text-align: start;
}

.sub-apps-container .cards .card-image {
  height: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px 6px 0 0;
  opacity: 0.91;
}

.sub-apps-container .cards .card-item p.description {
  font-size: 11px;
  text-align: left;
}

.sub-apps-container .cards .card-item p.description:hover {
  color: #333333;
}

.sub-apps-container .cards.col-md-4 a,
.sub-apps-container .cards.col-md-4 a:hover {
  color: #333333;
}

.card-item.summary .value {
  font-size: 40px;
  text-align: center;
  font-weight: bold;
}

.card-item.summary .label {
  color: #33aae7;
  font-size: 12px;
  text-align: center;
  min-height: 24px;
  margin: 10px;
  padding: 0;
  white-space: break-spaces;
  max-height: 24px;
  height: 24px;
}

.carousel.reserve-calendar-carousel,
.carousel.rtw-carousel {
  width: 100%;
}

.carousel.reserve-calendar-carousel .carousel-controls,
.carousel.rtw-carousel .carousel-controls {  display: block;
  position: relative;
  width: 120px;
  height: 26px;
  margin-left: auto;
  margin-right: auto;
}

.carousel.reserve-calendar-carousel .carousel-controls .carousel-indicators,
.carousel.rtw-carousel .carousel-controls .carousel-indicators {
  bottom: -6px;
}

.carousel.reserve-calendar-carousel
 .carousel-controls
  .carousel-indicators
  .active,
.carousel.rtw-carousel .carousel-controls
  .carousel-indicators
  .active {
  width: 12px;
  height: 12px;
  background-color: #309fdb;
  /*margin: 0 5px 0 0;*/
  border: 1px solid #ffffff;
}

.carousel.reserve-calendar-carousel .carousel-controls .carousel-indicators li,
.carousel.rtw-carousel .carousel-controls .carousel-indicators li {  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000\9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #333333;
  border-radius: 10px;
}

/* Calendario de Reserva Icons */

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4.active
  .sub-module-icon-rc {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-size: auto;
  margin-top: 15px;
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4
  .sub-module-icon-rc {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-size: auto;
  margin-top: 15px;
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4.active
  .sub-module-icon-rc.lineamientos {
  background-image: url("/img/rc-lineamientos-white.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4
  .sub-module-icon-rc.lineamientos {
  background-image: url("/img/rc-lineamientos-black.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4.active
  .sub-module-icon-rc.calendar {
  background-image: url("/img/rc-calendario-empleado-white.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4
  .sub-module-icon-rc.calendar {
  background-image: url("/img/rc-calendario-empleado-black.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4.active
  .sub-module-icon-rc.contacto {
  background-image: url("/img/rc-contacto-white.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4
  .sub-module-icon-rc.contacto {
  background-image: url("/img/rc-contacto-black.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4.active
  .sub-module-icon-rc.manual {
  background-image: url("/img/rc-manual-white.svg");
}

.sub-apps-container.reserve-calendar-carousel
  .card-item.col-md-4
  .sub-module-icon-rc.manual {
  background-image: url("/img/rc-manual-black.svg");
}

.sub-apps-container.reserve-calendar-carousel
.card-item.col-md-4
.sub-module-icon-rc.declaracion-welcome {
  background-image: url("/img/declaracion-welcome-black.svg");
}

.modal.vertically-centered {
  text-align: center;
  padding: 0 !important;
}

.modal.vertically-centered:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal.vertically-centered .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}


/* --------------------------- */
.sub-apps-container-rtw {
  display: flex;
  -webkit-display: box;
  -moz-display: box;
  -ms-display: flexbox;
  -webkit-display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.sub-apps-container-rtw .cards {
  display: flex;
  padding: 1rem;
  margin-bottom: 0;
  /*width: 100%;*/
  /*width: 20%;*/
  /*width: 16%;*/

}

.sub-apps-container-rtw .cards .card-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
  border-radius: 6px;
  /*box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);*/
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.1s;
  -webkit-transition: transform 0.1s;
  /*min-height: 119px;*/
  /*min-width: 200px;*/
  /*max-height: 119px;*/
  /*max-width: 200px;*/
  min-height: 120px;
  min-width: 167px;
  max-height: 119px;
  max-width: 200px;
}


/* --------------------------- */
.sub-apps-container-mobileiron {
  display: flex;
  -webkit-display: box;
  -moz-display: box;
  -ms-display: flexbox;
  -webkit-display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.sub-apps-container-mobileiron .cards {
  display: flex;
  /*padding: 1rem;*/
  margin-bottom: 0;
  /*width: 100%;*/
  /*width: 20%;*/
  /*width: 16%;*/
  float: left;
  padding: 8px!important;
}

.sub-apps-container-mobileiron .cards .card-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
  border-radius: 6px;
  /*box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);*/
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.1s;
  -webkit-transition: transform 0.1s;
  /*min-height: 119px;*/
  /*min-width: 200px;*/
  /*max-height: 119px;*/
  /*max-width: 200px;*/
  min-height: 120px;
  min-width: 167px;
  max-height: 119px;
  max-width: 204px;
}

.rtw-status.cards {
  padding: 1rem;
  margin-bottom: 0;
  width: 100%;
  display: flex;
}

.rtw-status.cards .card-item {
  background-color: #fff;
  width: 100%;
  border-radius: 6px;
  /* box-shadow: 0 20px 40px -14px rgb(0 0 0 / 25%); */
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 25%);
  transition: transform 0.1s;
  -webkit-transition: transform 0.1s;
  min-height: 90px;
  /*min-width: 200px;*/
  max-height: 90px;
  /*max-width: 200px;*/
  display: block;
  margin-bottom: 5px;
  margin-right: 5px;
  max-width: 204px!important;
  min-width: 204px!important;
}

.rtw-status.cards .card-item.manual {
  background-color: #fff;
  width: 100%;
  border-radius: 6px;
  /* box-shadow: 0 20px 40px -14px rgb(0 0 0 / 25%); */
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 25%);
  transition: transform 0.1s;
  -webkit-transition: transform 0.1s;
  /*min-height: 108px;*/
  /*min-width: 269px;*/
  /*max-height: 90px;*/
  /*max-width: 200px;*/
  display: block;
  margin-bottom: 5px;
  margin-right: 5px;
}

.rtw-status.cards .card-item:hover {
  cursor: pointer;
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

.rtw-status.cards .card-item.active {
  background-color: #33aae7;
  border-color: transparent;
}

.rtw-status.cards .card-item .card-title {
  font-size: 13px;
  font-weight: bold;
  margin-top: 0;
  min-height: 32px;
  margin-bottom: 0;
}

.rtw-status.cards .card-item .status-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: auto;
  margin-top: 0px;
}

.rtw-status.cards .card-item .status-icon.pendientes { background-image: url("/img/planeaciones-pendientes-white.svg"); }
.rtw-status.cards .card-item.active .status-icon.pendientes { background-image: url("/img/planeaciones-pendientes-black.svg"); }

.rtw-status.cards .card-item .status-icon.cerradas { background-image: url("/img/planeaciones-cerradas-black.svg"); }
.rtw-status.cards .card-item.active .status-icon.cerradas { background-image: url("/img/planeaciones-cerradas-white.svg"); }


.rtw-status.cards .card-item .description { font-size: 10px; }
.rtw-status.cards .card-item.active .description { color: #ffffff; font-size: 10px; }



.sub-apps-container-rtw .cards .card-item:hover, .sub-apps-container-mobileiron .cards .card-item:hover {
  cursor: pointer;
  /*transform: scale(1.1);*/
  /*-webkit-transform: scale(1.1);*/
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

.sub-apps-container-rtw .cards .card-item span.sub-module-icon, .sub-apps-container-mobileiron .cards .card-item span.sub-module-icon {
  color: #33aae7;
  margin-top: 15px;
}

.sub-apps-container-rtw .cards .card-item.active, .sub-apps-container-mobileiron .cards .card-item.active {
  background-color: #33aae7 !important;
  color: white;
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

.sub-apps-container-rtw .cards .card-item.active span.sub-module-icon, .sub-apps-container-mobile_iron .cards .card-item.active span.sub-module-icon {
  color: white;
}

.sub-apps-container-rtw .cards .card-image, .sub-apps-container-mobileiron .cards .card-image {
  opacity: 1;
}

.sub-apps-container-rtw .cards .card-item, .sub-apps-container-mobileiron .cards .card-item {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 5px;
}

.sub-apps-container-rtw .cards .card-title, .sub-apps-container-mobileiron .cards .card-title {
  font-size: 10.5px;
  line-height: 1.1em;
  color: #333333;
  margin-bottom: 0.2em;
  font-weight: bold;
  text-align: start;
  /*min-height: 40px;*/
  /*max-height: 40px;*/
  min-height: 26px;
  max-height: 26px;
}

.sub-apps-container-rtw .cards .card-image, .sub-apps-container-mobileiron .cards .card-image {
  height: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px 6px 0 0;
  opacity: 0.91;
}

.sub-apps-container-rtw .cards .card-item p.description, .sub-apps-container-mobileiron .cards .card-item p.description {
  font-size: 10px;
  text-align: left;
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: auto;
  margin-top: 15px;
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.lineamientos, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.lineamientos {
  background-image: url("/img/rtw-lineamientos-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.planeaciones-pendientes, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.planeaciones-pendientes {
  background-image: url("/img/rtw_planeaciones_pendientes-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.planeaciones-aprobadas, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.planeaciones-aprobadas {
  background-image: url("/img/rtw_planeaciones-aprobadas-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.contacto, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.contacto {
  background-image: url("/img/rtw_contacto-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.calendar, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.calendar {
  background-image: url("/img/rtw_calendario_empleado-blue.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.manual, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.manual {
  background-image: url("/img/rc-manual-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.convenio, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.convenio {
  background-image: url("/img/rtw-carta-convenio-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.report, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.report {
  background-image: url("/img/rtw_report-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.mobile-iron, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.mobile-iron {
  background-image: url("/img/mobile-iron-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.resguardo, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.resguardo {
  background-image: url("/img/info-resguardo-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.intune-icon, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.intune-icon {
  background-image: url("/img/intune.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.encuestas, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.encuestas {
  background-image: url("/img/nom-35-encuestas-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.encuestas-contestadas, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.encuestas-contestadas {
  background-image: url("/img/nom-35-encuestas-contestadas-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.declaracion-welcome, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.declaracion-welcome {
  background-image: url("/img/declaracion-welcome-white.svg");
}


.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: auto;
  margin-top: 15px;
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.lineamientos, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.lineamientos {
  background-image: url("/img/rtw-lineamientos-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.contacto, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.contacto {
  background-image: url("/img/rtw_contacto-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.planeaciones-pendientes, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.planeaciones-pendientes {
  background-image: url("/img/rtw_planeaciones_pendientes-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.planeaciones-aprobadas, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.planeaciones-aprobadas {
  background-image: url("/img/rtw_planeaciones-aprobadas-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.calendar, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.calendar {
  background-image: url("/img/rtw_calendario_empleado-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.manual, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.manual {
  background-image: url("/img/rc-manual-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.convenio, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.convenio {
  background-image: url("/img/rtw-carta-convenio-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.report, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.report {
  background-image: url("/img/rtw_report-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.mobile-iron, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.mobile-iron {
  background-image: url("/img/mobile-iron-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.resguardo, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.resguardo {
  background-image: url("/img/info-resguardo-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.intune-icon, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.intune-icon {
  background-image: url("/img/intune-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.encuestas, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.encuestas {
  background-image: url("/img/nom-35-encuestas-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.encuestas-contestadas, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.encuestas-contestadas {
  background-image: url("/img/nom-35-encuestas-contestadas-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.declaracion-welcome, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.declaracion-welcome {
  background-image: url("/img/declaracion-welcome-black.svg");
}



div.well.internal-employee { min-height: 200px; }
div.well.internal-employee label {
  color: #009fdb;
}

div.well.external-employee { min-height: 200px; }
div.well.external-employee label {
  color: #FF8226;
}

div.well.regular-employee label {
  color: #333333;
}

/* Calendar Styles Updated */

#calendar-rtw table caption {
  font-size: 20px;
  font-family: "ATT Aleck Sans Regular", sans-serif;
  text-align: center !important;
  color: #333333;
  font-weight: bold;
}
#calendar-rtw table {
  width: 100%;
  border: 1px solid #ddd;
}

#calendar-rtw table td.day,
#calendar-rtw table td {
  width: 14.28%;
  height: 65px;
  border: 1px solid #ddd;
  vertical-align: top;
  padding: 5px;
  font-weight: 100 !important;
  font-size: 10px !important;
}

#calendar-rtw table td span.badge {
  background-color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  float: right;
  margin-right: 5px;
  top: 0;
  position: relative;
  color: #4bae4b;
  padding: 2px 5px 0 5px;
  font-size: 13px !important;
}

#calendar-rtw table td.green {
  background-color: #50af4c!important;
  color: #ffffff;
}

#calendar-rtw table td.green span.badge {
  color: #50af4c;
}


#calendar-rtw table td.yellow {
  background-color: #ffb81c!important;
  color: #333333;
}

#calendar-rtw table td.yellow span.badge {
  color: #ffb81c;
}


#calendar-rtw table td.red {
  background-color: #cf2a2a!important;
  color: #ffffff;
}

#calendar-rtw table td.red span.badge {
  color: #cf2a2a;
}

#calendar-rtw table td.green.old.planned,
#calendar-rtw table td.green.planned,
#calendar-rtw table td.green.event-office.old,
#calendar-rtw table td.green.event-office,

#calendar-rtw table td.yellow.old.planned,
#calendar-rtw table td.yellow.planned,
#calendar-rtw table td.yellow.event-office.old,
#calendar-rtw table td.yellow.event-office,

#calendar-rtw table td.red.old.planned,
#calendar-rtw table td.red.planned,
#calendar-rtw table td.red.event-office.old,
#calendar-rtw table td.red.event-office,

#calendar-rtw table td.green.planned-temporal,
#calendar-rtw table td.yellow.planned-temporal,
#calendar-rtw table td.red.planned-temporal {
  background-color: #08aae7!important;
  color: #ffffff;
}

#calendar-rtw table td.green.flex-temporal,
#calendar-rtw table td.yellow.flex-temporal,
#calendar-rtw table td.red.flex-temporal {
  background-color: #FB1F6E!important;
  color: #ffffff;
}

#calendar-rtw table td.green.old.planned span.badge,
#calendar-rtw table td.green.planned span.badge,
#calendar-rtw table td.yellow.old.planned span.badge,
#calendar-rtw table td.yellow.planned span.badge,
#calendar-rtw table td.red.old.planned span.badge,
#calendar-rtw table td.red.planned span.badge,
#calendar-rtw table td.green.planned-temporal span.badge,
#calendar-rtw table td.yellow.planned-temporal span.badge,
#calendar-rtw table td.red.planned-temporal span.badge {
  color: #08aae7;
}

#calendar-rtw table td.green.flex-temporal span.badge,
#calendar-rtw table td.yellow.flex-temporal span.badge,
#calendar-rtw table td.red.flex-temporal span.badge
{
  color: #FB1F6E;
}


#calendar-rtw table td.green.old.planned span.planned,
#calendar-rtw table td.green.planned span.planned,
#calendar-rtw table td.green.event-office.old span.planned-office,
#calendar-rtw table td.green.event-office span.planned-office,
#calendar-rtw table td.yellow.old.planned span.planned,
#calendar-rtw table td.yellow.planned span.planned,
#calendar-rtw table td.yellow.event-office.old span.planned-office,
#calendar-rtw table td.yellow.event-office span.planned-office,
#calendar-rtw table td.red.old.planned span.planned,
#calendar-rtw table td.red.planned span.planned,
#calendar-rtw table td.red.event-office.old span.planned-office,
#calendar-rtw table td.red.event-office span.planned-office,
#calendar-rtw table td.green.planned-temporal span.planned-temporal,
#calendar-rtw table td.yellow.planned-temporal span.planned-temporal,
#calendar-rtw table td.red.planned-temporal span.planned-temporal {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc_planned.svg)!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
  cursor: pointer;
}

#calendar-rtw table td.green.planned-temporal span.planned-temporal,
#calendar-rtw table td.yellow.planned-temporal span.planned-temporal,
#calendar-rtw table td.red.planned-temporal span.planned-temporal,
#calendar-rtw table td.green.flex-temporal span.flex-temporal,
#calendar-rtw table td.yellow.flex-temporal span.flex-temporal,
#calendar-rtw table td.red.flex-temporal span.flex-temporal {
  top: 5px!important;
  width: 114px!important;
}


#calendar-rtw table td.green.old.today-home-office,
#calendar-rtw table td.green.not-month.today-home-office.virtual,
#calendar-rtw table td.green.old,
#calendar-rtw table td.yellow.old.today-home-office,
#calendar-rtw table td.yellow.not-month.today-home-office.virtual,
#calendar-rtw table td.yellow.old,
#calendar-rtw table td.red.old.today-home-office,
#calendar-rtw table td.red.not-month.today-home-office.virtual,
#calendar-rtw table td.red.old {
  background-color: #FF8226!important;
}

#calendar-rtw table td.green.old.today-home-office span.home-office,
#calendar-rtw table td.green.not-month.today-home-office span.home-office,
#calendar-rtw table td.green.old span.home-office,
#calendar-rtw table td.yellow.old.today-home-office span.home-office,
#calendar-rtw table td.yellow.not-month.today-home-office span.home-office,
#calendar-rtw table td.yellow.old span.home-office,
#calendar-rtw table td.red.old.today-home-office span.home-office,
#calendar-rtw table td.red.not-month.today-home-office span.home-office,
#calendar-rtw table td.red.old span.home-office {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc-home-office.svg) !important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
  cursor: pointer;
}

#calendar-rtw table td.green.old.today-home-office span.badge,
#calendar-rtw table td.green.not-month.today-home-office span.badge,
#calendar-rtw table td.green.old span.badge,
#calendar-rtw table td.yellow.old.today-home-office span.badge,
#calendar-rtw table td.yellow.not-month.today-home-office span.badge,
#calendar-rtw table td.yellow.old span.badge,
#calendar-rtw table td.red.old.today-home-office span.badge,
#calendar-rtw table td.red.not-month.today-home-office span.badge,
#calendar-rtw table td.red.old span.badge {
  color: #FF8226!important;
}

#calendar-rtw table td.green.old.today-home-office span.day-date,
#calendar-rtw table td.green.not-month.today-home-office span.day-date,
#calendar-rtw table td.green.old span.day-date,
#calendar-rtw table td.yellow.old.today-home-office span.day-date,
#calendar-rtw table td.yellow.not-month.today-home-office span.day-date,
#calendar-rtw table td.yellow.old span.day-date,
#calendar-rtw table td.red.old.today-home-office span.day-date,
#calendar-rtw table td.red.not-month.today-home-office span.day-date,
#calendar-rtw table td.red.old span.day-date {
  color: #ffffff;
}

#calendar-rtw table td.green.not-month.old.today-home-office.weekend,
#calendar-rtw table td.green.not-month.today-home-office.weekend,
#calendar-rtw table td.green.office-weekend.weekend,
#calendar-rtw table td.yellow.not-month.old.today-home-office.weekend,
#calendar-rtw table td.yellow.not-month.today-home-office.weekend,
#calendar-rtw table td.yellow.office-weekend.weekend,
#calendar-rtw table td.red.not-month.old.today-home-office.weekend,
#calendar-rtw table td.red.not-month.today-home-office.weekend,
#calendar-rtw table td.red.office-weekend.weekend {
  background-color: #d0d0d0!important;
}

#calendar-rtw table td.green.office-weekend.weekend span.day-date,
#calendar-rtw table td.green.today-home-office.virtual.weekend-virtual span.day-date,
#calendar-rtw table td.green.not-month.old.weekend span.day-date,
#calendar-rtw table td.green.old.weekend span.day-date,
#calendar-rtw table td.yellow.today-home-office.virtual.weekend-virtual span.day-date,
#calendar-rtw table td.red.today-home-office.virtual.weekend-virtual span.day-date {
  color: #333333;
}

#calendar-rtw table td.green.temporal,
#calendar-rtw table td.green.not-month.today-home-office.virtual.temporal,
#calendar-rtw table td.yellow.temporal,
#calendar-rtw table td.yellow.not-month.today-home-office.virtual.temporal,
#calendar-rtw table td.red.temporal,
#calendar-rtw table td.red.not-month.today-home-office.virtual.temporal {
  background-color: #BF0CEA!important;
  color: #ffffff;
}

#calendar-rtw table td.green.temporal span.badge,
#calendar-rtw table td.green.not-month.today-home-office.virtual.temporal span.badge,
#calendar-rtw table td.yellow.temporal span.badge,
#calendar-rtw table td.yellow.not-month.today-home-office.virtual.temporal span.badge,
#calendar-rtw table td.red.temporal span.badge,
#calendar-rtw table td.red.not-month.today-home-office.virtual.temporal span.badge {
  color: #BF0CEA;
}

#calendar-rtw table td.green.temporal span.event.temporal,
#calendar-rtw table td.yellow.temporal span.event.temporal,
#calendar-rtw table td.red.temporal span.event.temporal {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc_temporal.svg)!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
  cursor: pointer;
}

#calendar-rtw table td.green.wildcard span.badge,
#calendar-rtw table td.yellow.wildcard span.badge,
#calendar-rtw table td.red.wildcard span.badge {
  color: #114ECC;
}

#calendar-rtw table td.green.wildcard span.wildcard,
#calendar-rtw table td.yellow.wildcard span.wildcard,
#calendar-rtw table td.red.wildcard span.wildcard {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/piso-comodin-white.svg)!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
  cursor: pointer;
}


#calendar-rtw table td.green.wildcard,
#calendar-rtw table td.green.not-month.wildcard,
#calendar-rtw table td.green.old.wildcard,
#calendar-rtw table td.yellow.wildcard,
#calendar-rtw table td.yellow.old.wildcard,
#calendar-rtw table td.yellow.not-month.wildcard.virtual,
#calendar-rtw table td.yellow.old.wildcard,
#calendar-rtw table td.red.wildcard,
#calendar-rtw table td.red.old.wildcard,
#calendar-rtw table td.red.not-month.wildcard,
#calendar-rtw table td.red.old.wildcard {
  background-color: #114ECC!important;
  color: white;
}

#calendar-rtw table td.green.event,
#calendar-rtw table td.green.event.today-home-office.virtual,
#calendar-rtw table td.green.event.today-home-office.virtual.weekend-virtual,
#calendar-rtw table td.yellow.event,
#calendar-rtw table td.yellow.event.today-home-office.virtual,
#calendar-rtw table td.yellow.event.today-home-office.virtual.weekend-virtual,
#calendar-rtw table td.red.event,
#calendar-rtw table td.red.event.today-home-office.virtual,
#calendar-rtw table td.red.event.today-home-office.virtual.weekend-virtual {
  background-color: #FB1F6E!important;
  color: #ffffff;
}

#calendar-rtw table td.green.event span.event,
#calendar-rtw table td.green.event span.planned-office,
#calendar-rtw table td.yellow.event span.event,
#calendar-rtw table td.yellow.event span.planned-office,
#calendar-rtw table td.red.event span.event,
#calendar-rtw table td.red.event span.planned-office,
#calendar-rtw table td.green.flex-temporal span.flex-temporal,
#calendar-rtw table td.yellow.flex-temporal span.flex-temporal,
#calendar-rtw table td.red.flex-temporal span.flex-temporal {
  display: block;
  position: relative;
  top: 20px;
  color: #ffffff;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc-office.svg)!important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 32px;
  height: 30px;
  cursor: pointer;
}

#calendar-rtw table td.green.event span.badge,
#calendar-rtw table td.green.event.today-home-office.virtual span.badge,
#calendar-rtw table td.green.event.today-home-office.virtual.weekend-virtual span.badge,
#calendar-rtw table td.yellow.event span.badge,
#calendar-rtw table td.yellow.event.today-home-office.virtual span.badge,
#calendar-rtw table td.yellow.event.today-home-office.virtual.weekend-virtual span.badge,
#calendar-rtw table td.red.event span.badge,
#calendar-rtw table td.red.event.today-home-office.virtual span.badge,
#calendar-rtw table td.red.event.today-home-office.virtual.weekend-virtual span.badge {
  color: #FB1F6E;
}


#calendar-rtw table td.green.holiday,
#calendar-rtw table td.green.holiday.not-month.today-home-office,
#calendar-rtw table td.green.holiday.old.old-foreign,
#calendar-rtw table td.yellow.holiday.old.old-foreign,
#calendar-rtw table td.red.holiday.old.old-foreign {
  background-color: #ffffff!important;
  color: #333333;
}

#calendar-rtw table td.green.holiday span.holiday {
  display: inline-block;
  position: relative;
  top: 30px;
  color: #333333;
  font-weight: 100;
  display: block;
  position: relative;
  top: 20px;
  color: #333333;
  width: 100%;
  font-size: 10px;
  background-image: url(/img/rc-holiday.svg) !important;
  background-repeat: no-repeat;
  background-size: 32px;
  background-position-x: 0px;
  background-position-y: -3px;
  padding-left: 36px;
  height: 30px;
  cursor: pointer;
}


#calendar-rtw table td.green.old.weekend,
#calendar-rtw table td.green.weekend-virtual.virtual.today-home-office,
#calendar-rtw table td.green.old.planned.weekend,
#calendar-rtw table td.yellow.old.weekend,
#calendar-rtw table td.yellow.weekend-virtual.virtual.today-home-office,
#calendar-rtw table td.yellow.old.planned.weekend,
#calendar-rtw table td.red.old.weekend,
#calendar-rtw table td.red.weekend-virtual.virtual.today-home-office,
#calendar-rtw table td.red.old.planned.weekend
{
  background-color: rgba(208, 208, 208, 0.5) !important;
  background-image: none;
  color: #333333;
}

#calendar-rtw table td.green.old.old-foreign,
#calendar-rtw table td.yellow.old.old-foreign,
#calendar-rtw table td.red.old.old-foreign
{
  background-color: rgba(142, 142, 142, 0.5) !important;
  background-image: none;
  color: #333333;
}

#calendar-rtw table td.green.old.weekend span.badge,
#calendar-rtw table td.green.weekend-virtual.virtual.today-home-office span.badge,
#calendar-rtw table td.green.old.planned.weekend span.badge,
#calendar-rtw table td.yellow.old.weekend span.badge,
#calendar-rtw table td.yellow.weekend-virtual.virtual.today-home-office span.badge,
#calendar-rtw table td.yellow.old.planned.weekend span.badge,
#calendar-rtw table td.red.old.weekend span.badge,
#calendar-rtw table td.red.weekend-virtual.virtual.today-home-office span.badge,
#calendar-rtw table td.red.old.planned.weekend span.badge {
  color: rgba(208, 208, 208, 0.5);
}

.download-pdf-manual {
  width: 32px;
  height: 32px;
  background: url('/img/pdf-icon.png');
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
}

.survey {
    font-size: 11px;
}

.survey .row {
    padding-bottom: 10px;
}

.survey .col-md-1 {
    text-align: right;
}

.survey .btn {
    margin-right: 5px
}

.steps-indicator.steps-11:before {
  left: calc(100% / 11 / 2);
  right: calc(100% / 11 / 2);
}

.steps-indicator.steps-12:before {
  left: calc(100% / 12 / 2);
  right: calc(100% / 12 / 2);
}

.steps-indicator.steps-13:before {
  left: calc(100% / 13 / 2);
  right: calc(100% / 13 / 2);
}

.steps-indicator.steps-14:before {
  left: calc(100% / 14 / 2);
  right: calc(100% / 14 / 2);
}

.steps-indicator.steps-15:before {
  left: calc(100% / 15 / 2);
  right: calc(100% / 15 / 2);
}

.steps-indicator.steps-12 li {
  width: calc(100% / 12);
}

.steps-indicator.steps-13 li {
  width: calc(100% / 13);
}

.steps-indicator.steps-14 li {
  width: calc(100% / 14);
}

.steps-indicator.steps-15 li {
  width: calc(100% / 15);
}

.steps-indicator.steps-16 li {
  width: calc(100% / 16);
}

.steps-indicator.steps-17 li {
  width: calc(100% / 17);
}

.steps-indicator.steps-18 li {
  width: calc(100% / 18);
}


.download-resguardo-pdf a.label-link, .download-resguardo-pdf a.label-link-manual { color: #333333; }
.download-resguardo-pdf a.label-link:hover { color: #ce0000; text-decoration: none; }
.download-resguardo-pdf a.label-link-manual:hover { color: #33aae7; text-decoration: none; }

.nom35-summary .row {
  margin-bottom: 20px;
}

.nom35-summary .col-md-2 {
  width: 20%!important;
  padding-left: 5px!important;
  padding-right: 5px!important;
}

.nom35-summary .col-md-2:first-child {
  padding-left: 15px!important;
}

.nom35-summary .col-md-2:last-child {
  padding-right: 15px!important;
  /*padding-top: 4px;*/
}


.smw-cards {
  display: grid;
  /*grid-template-columns: 20% 20% 20% 20% 20%;*/
  grid-template-columns: 50% 50%;
  grid-template-rows: max-content;
  column-gap: 0px;
  row-gap: 10px;
}

.smw-cards .smw-card {
  background-color: #ffffff;
  border: 0;
  border-radius: 3px 0px 0px 3px;
  padding: 0px 5px 0px 5px;
  border-left: 5px solid #009fdb;
  box-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
  margin-left: 0px;
  margin-right: 10px;
}

.smw-cards .smw-card.level-1 { border-left: 5px solid #7030a0; }
.smw-cards .smw-card.level-2 { border-left: 5px solid #00b0f0; }
.smw-cards .smw-card.level-3 { border-left: 5px solid #00b0f0; }
.smw-cards .smw-card.level-4 { border-left: 5px solid #ffc000; }
.smw-cards .smw-card.level-5 { border-left: 5px solid #ffc000; }
.smw-cards .smw-card.level-6 { border-left: 5px solid #538135; }
.smw-cards .smw-card.level-7 { border-left: 5px solid #538135; }
.smw-cards .smw-card.level-8 { border-left: 5px solid #538135; }
.smw-cards .smw-card.level-9 { border-left: 5px solid #002060; }
.smw-cards .smw-card.level-10 { border-left: 5px solid #002060; }

.smw-cards .smw-card.level-1 .smw-card-header { color: #7030a0;}
.smw-cards .smw-card.level-2 .smw-card-header { color: #00b0f0;}
.smw-cards .smw-card.level-3 .smw-card-header { color: #00b0f0;}
.smw-cards .smw-card.level-4 .smw-card-header { color: #ffc000;}
.smw-cards .smw-card.level-5 .smw-card-header { color: #ffc000;}
.smw-cards .smw-card.level-6 .smw-card-header { color: #538135;}
.smw-cards .smw-card.level-7 .smw-card-header { color: #538135;}
.smw-cards .smw-card.level-8 .smw-card-header { color: #538135;}
.smw-cards .smw-card.level-9 .smw-card-header { color: #002060;}
.smw-cards .smw-card.level-10 .smw-card-header { color: #002060;}

.smw-cards .smw-card:nth-child(5n) {
  margin-right: 0px;
}

.smw-cards .smw-card .smw-card-header {
  font-size: 12px;
  font-weight: bold;
  padding: 4px 0px 0px 2px;
  border-bottom: 1px solid #d0d0d0;
  min-height: 50px;
  max-height: 50px;
}

.smw-cards .smw-card .smw-card-body {
  max-height: max-content;
  /*border-bottom: 1px solid #d0d0d0;*/
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 11px;
  /*height: 64px;*/
}

.smw-cards .smw-card .smw-card-footer {
  min-height: 25px;
  max-height: 50px;
  display: grid;
  align-items: center;
  align-content: center;
  font-size: 11px;
  font-weight: bold;
}

/* SMW Graph */
/*.smw-graph {*/

/*}*/

/*.smw-graph .base {*/
/*  border: 1px solid #333333;*/
/*  display: flex;*/
/*  height: 30px;*/
/*}*/

/*.smw-graph .base .risk-level {*/
/*  display: flex;*/
/*}*/

/*.smw-graph .base .risk-level.level-1 { background-color: #009fdb; }*/
/*.smw-graph .base .risk-level.level-2 { background-color: #1db255; }*/
/*.smw-graph .base .risk-level.level-3 { background-color: #fcc231; }*/
/*.smw-graph .base .risk-level.level-4 { background-color: #fca298; }*/
/*.smw-graph .base .risk-level.level-5 { background-color: #bc0015; }*/


.smw-graph {
  height: 20px;
  max-width: 100%;
  margin: 0 auto;
  --heading-size: 2.5rem;
  --color-1: #009fdb99!important;
  --color-2: #1db25599!important;
  --color-3: #fcc23199!important;
  --color-4: #fca29899!important;
  --color-5: #bc001599!important;
}

.charts-css.hide-data .data {
  font-size: 8px;
  line-height: 30px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.info-container {
  height: 30px;
  display: inline-block;
  width: 100%;
}

.info-container a.pull-right {
  margin-right: 0;
  position: relative;
  top: 10px;
}

.list-group.info {
  font-size: 11px;
}

.list-group.info .badge {
  float: left;
  margin-right: 10px;
  font-size: 10px;
  color: #333333a1;
}

.list-group.info .list-group-item {
  padding: 5px;
}

.cat {
  font-size: 12px;
  font-weight: bold;
}

.survey-category-1 { color: #7030a0; background-color: #7030a066; font-weight: bold; }
.survey-category-2 { color: #00b0f0; background-color: #00b0f066; font-weight: bold; }
.survey-category-3 { color: #ffc000; background-color: #ffc00066; font-weight: bold; }
.survey-category-4 { color: #538135; background-color: #53813566; font-weight: bold; }
.survey-category-5 { color: #002060; background-color: #00206066; font-weight: bold; }

.survey-category-1 .panel-heading { color: #7030a0; font-weight: bold; }
.survey-category-2 .panel-heading { color: #00b0f0; font-weight: bold; }
.survey-category-3 .panel-heading { color: #ffc000; font-weight: bold; }
.survey-category-4 .panel-heading { color: #538135; font-weight: bold; }
.survey-category-5 .panel-heading { color: #002060; font-weight: bold; }

.cat.cat-1 { color: #7030a0; }
.cat.cat-2 { color: #00b0f0; }
.cat.cat-3 { color: #00b0f0; }
.cat.cat-4 { color: #ffc000; }
.cat.cat-5 { color: #ffc000; }
.cat.cat-6 { color: #538135; }
.cat.cat-7 { color: #538135; }
.cat.cat-8 { color: #538135; }
.cat.cat-9 { color: #002060; }
.cat.cat-10 { color: #002060; }

.cat-text {
  font-size: 11px;
  min-height: 172px;
}

.list-group.info .badge.level-1 { background-color: #009fdb99; }
.list-group.info .badge.level-2 { background-color: #1db25599;}
.list-group.info .badge.level-3 { background-color: #fcc23199;}
.list-group.info .badge.level-4 { background-color: #fca29899;}
.list-group.info .badge.level-5 { background-color: #bc001599;}


@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.pie {
  --p:20;      /* the percentage */
  --b: 2px;
  --c: #7dc4e8;
  --w: 45px;
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 10px;
  place-content: center;
  font-size: 10px;
  font-weight: bold;
  font-family: inherit;
  justify-content: center;
  align-content: center;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
          radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
          conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
  mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p{
  from{--p:0;}
}

.level-detail {
  width: 18.3%;
  display: inline-block;
  text-align: center;
  border: 1px solid #009fdb;
  margin: 5px;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #009fdb80;
  min-height: 100px;
  height: 100px;
  max-height: 100px;
  position: relative;
  float: left;
}

.level-detail:first-child { margin-left: 0; }
.level-detail:last-child { margin-right: 0; }


.charts-css.bar tbody tr td { height: 100px!important; }


.chart-pie {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.chart-pie caption,
.chart-pie thead,
.chart-pie tfoot {
  display: none;
}
.chart-pie tbody {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-block-end: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.chart-pie tbody tr th {
  display: none;
}
.chart-pie tbody tr td {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  transform: rotate(calc( 1turn * var( --start, 0 ) ));
  background: conic-gradient(var(--color, transparent) 0 calc( 100% * var( --size, 0 ) ), transparent 0 100%);
}
.chart-pie tbody tr td .data {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  transform: rotate(calc( 0.5turn * var( --size, 0 ) ));
}

.movements .accordion-toggle {
  color: #ffffff;
}

.movements .accordion-toggle:hover {
  font-weight: bold;
  color: #ffffff;
}


.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.vehicle, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.vehicle {
  background-image: url("/img/control-vehicular-auto-white.svg");
}

.sub-apps-container-rtw .card-item.col-md-5.active .sub-module-icon-rtw.vehicle-admin, .sub-apps-container-mobileiron .card-item.col-md-5.active .sub-module-icon-rtw.vehicle-admin {
  background-image: url("/img/control-vehicular-admin-white.svg");
  height: 30px;
}


.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.vehicle, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.vehicle {
  background-image: url("/img/control-vehicular-auto-blue.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.equipment, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.equipment {
  background-image: url("/img/mobile-iron-black.svg");
}

.sub-apps-container-rtw .card-item.col-md-5 .sub-module-icon-rtw.vehicle-admin, .sub-apps-container-mobileiron .card-item.col-md-5 .sub-module-icon-rtw.vehicle-admin {
  background-image: url("/img/control-vehicular-admin-blue.svg");
  height: 30px;
}



.control-vehicular.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 5px;
}

.control-vehicular.icon.type_1 { background-image: url('/img/control-vehicular-auto-white.svg'); }
.control-vehicular.icon.type_2 { background-image: url('/img/control-vehicular-pickup-white.svg'); height: 13px!important; }
.control-vehicular.icon.type_3 { background-image: url('/img/control-vehicular-moto-white.svg'); height: 13px!important; }
.control-vehicular.icon.type_4 { background-image: url('/img/control-vehicular-mobileunit-white.svg'); height: 13px!important; }
.control-vehicular.icon.type_5 { background-image: url('/img/control-vehicular-trailer-white.svg'); height: 13px!important;}
.control-vehicular.icon.type_equipment { background-image: url('/img/mobile-screen-button-solid.svg'); width: 10px!important; height: 13px!important;}



.required {
  color: red!important;
  font-weight: bold!important;
  padding-left: 3px!important;
  top: 3px!important;
  position: relative!important;
}

.control-vehicular ul.steps-indicator li a {
  width: 134px!important;
  display: inline-block;
}

.cv-3-cols {
  margin-bottom: 15px;
}

.cv-3-cols div:nth-child(1) {
  margin: 0;
  display: inline;
  padding: 0;
}

.cv-3-cols div:nth-child(3) {
  margin: 0;
  display: inline;
  padding: 0;
}


input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #08AAE7;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #08AAE7;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #08AAE7;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #08AAE7;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #08AAE7;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #08AAE7;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #08AAE7;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #08AAE7;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #08AAE7;
}
input[type=range]:focus::-ms-fill-upper {
  background: #08AAE7;
}

input[type=range].ng-valid {
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}


input[type=range].ng-diabled {
  border: 1px solid red;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}


.row.bottom-line, tr.bottom-line {
  border-bottom: 1px solid #d0d0d0!important;
  padding-bottom: 10px!important;
  padding-top: 10px!important;
}

tr.bottom-line-bold {
  border-bottom: 2px solid #d0d0d0!important;
  padding-bottom: 10px!important;
  padding-top: 10px!important;
}

.row.bottom-line:last-child {
  border-bottom: 0!important;
}

.cv-status span.label {
  padding: 0.5em 0.6em 0.3em!important;
}


.cv-download-pdf {
  margin-bottom: 10px;
  padding-bottom: 0;
  display: inline-block;
}

.cv-download-pdf .icon {
  width: 32px;
  display: inline-block;
  line-height: 32px;
  float: left;
}

.cv-download-pdf .label {
  width: auto;
  display: inline-block;
  line-height: 20px;
  float: left;
  text-align: left;
}

.aviso-privacidad h3 {
  font-size: 14px !important;
  font-weight: bold;
}


@media screen and (min-width: 320px) and (max-width: 667px) {

  .carousel-inner div.card-item.col-md-5 {
    width: 100% !important;
    max-width: 100%;
    text-align: center;
  }

  .carousel-inner div.card-item.col-md-5 .col-md-9 p {
    text-align: center;
    font-size: small;
  }

  .carousel-inner div.card-item.col-md-5 .col-md-9 h2 {
    font-size: larger;
    margin-top: 10px;
    text-align: center;
  }

    /*.survey-question-number {*/
  /*  background-color: red;*/
  /*}*/
  h5 {
    font-size: 15px;
    font-weight: bolder;
  }

  .survey-question-label {
    font-size: 14px;
    margin-bottom: 10px;
  }

  /*.survey-question-options {*/
  /*  position: relative;*/
  /*  display: inline-block;*/
  /*  vertical-align: middle;*/
  /*}*/

  .survey-container ul.steps-indicator {
    margin-bottom: 0;
    min-height: 100px !important;
  }

  .survey-container .survey-options {
    width: 100% !important;
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

  .survey-container ul.steps-indicator li {
    width: fit-content !important;
  }

  .survey-question-option {
    width: 100% !important;
    border-radius: 10px !important;
    margin-bottom: 1px !important;
    border: 1px solid transparent !important;
  }

  .nom35-summary .level-detail {
    width: 17.2% !important;
    font-size: 8px!important;
  }

  .nom35-summary .level-detail  .pie {
    --w: 33px!important;
    font-size: 8px!important;
  }

  .nom35-summary .col-md-2 {
    width: 100% !important;
    margin-bottom: 15px;
  }

  .nom35-summary .col-md-2:first-child {
    padding-left: 5px !important;
  }

  .pie-chart-0, .pie-chart-1, .pie-chart-2, .pie-chart-3, .pie-chart-4, .pie-chart-5, .pie-chart-6, .pie-chart-7, .pie-chart-8 {
    min-height: 400px!important;
  }

  .smw-cards {
    grid-template-columns: 100% !important;
  }

  .smw-cards .smw-card {
    width: 100%!important;
  }
}

.ta-form-section {
  border-radius: 5px;
  border: 1px solid #08aae7;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 10px 10px 0;
}

.plan-cards {
  margin: 10px 0;
}

.plan-card {
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  min-height: 242px;
}

.plan-card div.title {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding-top: 10px;
}

.plan-card div.discount {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #08aae7;
}

.plan-card div.plan-list {
  font-size: 11px;
}

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

.planes-autorizados h5 {
  color: #333333;
  text-transform: uppercase;
  font-family: 'ATT Aleck Sans Bold', sans-serif;
  font-weight: bold;
}

.planes-autorizados .title {
  color: #08aae7;
  font-size: 14px;
  font-weight: bold;
}

.planes-autorizados .discount-card {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  display: inline-block;
  width: 100%;
  float: left;
  min-height: 150px;
}

.planes-autorizados .discount-card .discount-percentage {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  color: #08aae7;
  margin-top: auto;
  margin-bottom: auto;
  height: 150px;
  line-height: 150px;
  font-family: 'ATT Aleck Sans Bold', sans-serif;
  width: 150px;
}

.planes-autorizados .discount-card .discounts {
  display: flex;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
  align-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 150px;
}


/* Permiso Ausencias */

.holiday button  {
  background-color: #FF8226;
  /*border-radius: 32px;*/
  color: #321609;
}

.calendar .holiday button[disabled] {
  background-color: rgba(255, 130, 38, 1)!important;
  /*border-radius: 32px;*/
  color: #321609!important;
}

.existing button,
.existing.active.btn-info button,
.existing.active.btn-info button span.text-info1,
.holiday.existing .btn-info button {
  /*background-color: yellow!important;*/
  border-radius: 0;
  color: #000000;
  background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 85%, #ff0000 85%, #FF0000 90%, #FFFFFF 90%, #ffffff 100%) !important;
  background-size: cover;
}

.calendar button[disabled] {
  background-color: #c1c1c1!important;
  color: #333!important;
}


.added-date button,
.added-date.active.btn-info button,
.added-date.active.btn-info button span.text-info1 {
  background-color: green!important;
  /*border-radius: 32px;*/
  color: #ffffff!important;
}


.pd-textarea-info {
  padding-top: 5px;
  display: block;
  margin-bottom: 0;
  width: 100%;
  text-align: right;
}

.pd-textarea-info-top {
  padding-top: 5px;
  display: block;
  margin-bottom: 0;
  width: 100%;
  text-align: right;
  position: relative;
  top: -90px;
  right: 5px;
}

.date-item {
  border-bottom: 1px solid #d0d0d0;
  display: inline-block;
  width: 100%;
  padding-bottom: 5px;
  padding-top: 0;
  line-height: 21px;
}

.dates-list {
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 20px;
  height: 260px;
  position: absolute;
  bottom: 0;
}

.date-item:last-child {
  border-bottom: none;
}

.date-item .date-item-date {
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  text-align: left;
}

.col-left {
  display: inline-block;
  width: 160px;
  border-bottom: 1px solid #d0d0d0;
  margin: 0 5px 5px 15px;
  vertical-align: top;
  min-height: 37px;
}

.col-right {
  display: inline-block;
  width: 180px;
  border-bottom: 1px solid #d0d0d0;
  margin: 0 5px 5px -25px;
  vertical-align: top;
  min-height: 37px;
}

.employee-info:last-child .col-right, .employee-info:last-child .col-left {
  border-bottom: 0;
}

.col-right.details {
  width: 75% !important;
  margin: 0 5px 5px 0 !important;
  min-height: 20px !important;
}

.col-left.details {
  width: 20% !important;
  min-height: 20px !important;
  border-bottom: 0!important;
}

.iconografia-container {
  display: inline-block;
  width: 243px;
  /*border: 1px solid #08aae7;*/
  border: 1px solid #d0d0d0;
  margin-left: 16px;
  padding: 5px;
  border-radius: 5px;
}

.iconografia-container .iconografia {
  border-bottom: 1px solid #d0d0d0;
  display: inline-block;
  width: 100%;
  padding-top: 6px;
}

.iconografia-container .iconografia:last-child {
  border-bottom: 0;
}

.iconografia-container .iconografia .type-icon {
  border: 1px solid #d0d0d0;
  width: 20px;
  height: 20px;
  display: block;
  float: left;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}

.iconografia-container .iconografia .label {
  color: #333;
}

.iconografia-container .iconografia .type-icon.holiday { background-color: #FF8226; color: #321609; }
.iconografia-container .iconografia .type-icon.disponible {  }
.iconografia-container .iconografia .type-icon.seleccionado { background-color: green !important; color: #ffffff !important; }
.iconografia-container .iconografia .type-icon.prev-seleccionado { background-image:linear-gradient(-45deg, #ffffff 0%, #ffffff 85%, #ff0000 85%, #FF0000 90%, #FFFFFF 90%, #ffffff 100%)!important; color: #333!important; }
.iconografia-container .iconografia .type-icon.out-of-range { background-color: #c1c1c1 !important; color: #333 !important; }


.dates-container {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 270px;
  flex-wrap: wrap;
}

.dates-container span {
  flex: 46px;
  box-sizing: border-box;
  margin: 1px 1px;
  padding-left: 0;
  padding-right: 0;
  width: 46px;
  max-width: 52px;
}

.popover.datesDetails {
  /*width: 440px!important;*/
  /*max-width: 440px!important;*/
  width: 450px !important;
  max-width: 450px !important;
  border-radius: 0!important;
  border-width: 0;
}

.popover.datesDetails .popover-title {
  color: #ffffff !important;
  background-color: rgba(39, 159, 219, 0.75) !important;
  border-radius: 0 !important;
  font-size: 11px;
  font-weight: bold;
}

.popover.datesDetails .arrow {
  border-bottom-width: 2px;
  border-color: transparent;
}

.popover.datesDetails .popover-content .dates-details-row {
  min-height: 20px;
  line-height: 20px;
  text-align: center;
  border-bottom: 1px solid #d0d0d0;
}

.popover.datesDetails .popover-content {
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  width: 450px!important;
  max-width: 450px!important;
  border-bottom: 0 solid transparent !important;
  font-size: 11px!important;
}

.popover.datesDetails .popover-content .dates-details-header .header {
  font-weight: bold;
  text-align: center;
  font-size: 11px!important;
  border-bottom: 1px solid #d0d0d0;
  margin-bottom: 5px;
}

.popover.dateDetails .arrow {
  background-color: red!important;
}

.fixTableHead {
  overflow-y: auto;
  height: 222px;
}

.fixTableHead thead th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 4!important;
}

.fixTableHead tbody td {
  vertical-align: middle!important;
}