@media print {
  #kt_header_mobile,
  #kt_subheader,
  #kt_aside,
  #kt_header,
  .float-btn {
    display: none !important;
  }

  .pdf-page,
  .container-fluid,
  .card-body,
  #kt_wrapper {
    padding: 0 !important;
  }

  .card {
    border: 0 !important;
  }

  h3 {
    border: 1px solid #999;
    font-weight: 700;
  }
  h3.bg-primary {
    background: #003876 !important;
  }
  h3.bg-secondary {
    background: #e3292e !important;
  }
}
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 13px !important;
  font-weight: 400;
  font-family: Poppins, Helvetica, sans-serif !important;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bg-secondary {
  background: #e3292e !important;
}
.btn.btn-clean:not(:disabled):not(.disabled).active,
.btn.btn-clean:not(:disabled):not(.disabled):active:not(.btn-text),
.show .btn.btn-clean.btn-dropdown,
.show > .btn.btn-clean.dropdown-toggle,
.btn.btn-clean.focus:not(.btn-text),
.btn.btn-clean:focus:not(.btn-text),
.btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled) {
  color: #003876 !important;
}

.overS {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.max-h-550 {
  max-height: 550px !important;
}

.max-h-800 {
  max-height: 800px !important;
}

.table thead th {
  border-bottom: none !important;
  color: #fff;
  align-items: center;
  vertical-align: middle !important;
  /*text-align: center;*/
}

.offcanvas {
  z-index: 9999;
}

.logo-font {
  font-family: pirulen, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.actionsBtn {
  min-width: 230px;
  text-align: center;
}

.offcanvas-left {
  left: -550px;
}

.offcanvas.offcanvas-right {
  right: -550px;
}
.image-input .image-input-wrapper {
  width: 220px;
  height: 220px;
}
.actionsBtn span {
  width: 100%;
  text-align: center;
}

.tooltip .tooltip-inner {
  background-color: #e52229;
  color: #fff;
  text-transform: uppercase !important;
}
.bs-tooltip-auto[x-placement^="bottom"],
.bs-tooltip-bottom {
  display: none;
}
.ngx-dropdown-list-container {
  max-height: 500px;
}
/* button.ngx-dropdown-button {  min-width: 250px;} */

.red,
.active a,
.breadcrumb-item.active span {
  color: #e52229;
}
input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: "FontAwesome";
  content: "\f073";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: 6px;
  color: rgb(223, 8, 8);
  font-size: 20px;
}
input[type="date"] {
  position: relative;
  padding: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}
.zin99 {
  z-index: 9999;
}
.fa-cog:before,
.fa-gear:before {
  content: "\f013" !important;
}
.bg_x::after {
  content: "";
  width: 400px;
  height: 400px;
  position: absolute;
  background-size: 100%;
  opacity: 0.5;
  bottom: 0px;
  right: 0px;
  background: url("../media/logos/xmera-logo-white.png") no-repeat;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgb(237 237 237 / 32%);
}

.bs-tooltip-right .arrow::before {
  border-right-color: #e52229;
}

.side {
  overflow: visible !important;
  max-height: 650px;
  width: 70px;
}

#kt_card_3 .card-body {
  min-height: 480px;
}

.item-pu {
  border-bottom: solid 0.5px rgba(199, 191, 191, 0.623);
}

.text-hover-primary:hover,
a.text-hover-primary:hover,
a:hover .navi-text {
  color: #e52229 !important;
}

a:hover .symbol .symbol-label {
  background-color: #e52229 !important;
}

a:hover .symbol .symbol-label i {
  color: #fff !important;
}

.header {
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 65px;
  position: relative;
  z-index: 2;
}

.header-fixed.subheader-fixed .subheader {
  position: fixed;
  height: 54px;
  top: 65px;
  left: 0;
  right: 0;
  -webkit-transition: top 0.3s ease;
  transition: top 0.3s ease;
  z-index: 95;
  -webkit-box-shadow: 0 10px 30px 0 rgb(82 63 105 / 8%);
  box-shadow: 0 10px 30px 0 rgb(82 63 105 / 8%);
  background-color: #fff;
  border-top: 1px solid #ebedf3;
  margin: 0;
}

.bg-aside {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#003876+23,003876+23,1e5799+100 */
  background: #003876;
  /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    #003876 23%,
    #003876 23%,
    #1e5799 100%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    #003876 23%,
    #003876 23%,
    #1e5799 100%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #003876 23%, #003876 23%, #1e5799 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#003876', endColorstr='#1e5799', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.offcanvas-content .col-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.symbol.symbol-150.d250 {
  width: 100%;
}
.symbol.symbol-150.d250 > img {
  max-width: 100%;
  max-height: 250px;
  height: 100%;
}
/* 
.offcanvas.rh {
    width: 100%;
    max-width: 530px;
    min-width: 300px;
    left: -530px;
} */

@media (max-width: 425px) {
  .offcanvas {
    width: 82% !important;
  }
}

.offcanvas.rh.offcanvas-on {
  left: 0 !important;
}
.offcanvas-on .tab-pane a {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
}
.nav.nav-tabs .tab-4 .nav-link {
  padding: 0.3rem 1em !important;
  margin-bottom: 0.8em;
}

.nav-pills .tab-4 .nav-link {
  border-radius: 2em;
}

.nav.nav-tabs.nav-tabs-line .nav-item.tab-4 {
  text-align: center;
}

.datatable.datatable-default > .datatable-table {
  min-width: 800px;
}
#registro_control,
#reclutamiento_seleccion,
#evaluacion_desempeno {
  max-width: 440px;
  width: 100%;
  left: -550px;
}

.header-fixed.subheader-fixed.subheader-enabled .wrapper {
  padding-top: 70px;
}

@media (max-width: 991.98px) {
  #configuracion,
  #recursos_humanos,
  #academico,
  #Seguridad,
  #xdigit,
  #admin_tab {
    left: -550px;
  }

  .aside,
  .aside-secondary-enabled .aside {
    width: 120px !important;
  }

  .offcanvas-mobile {
    left: -420px !important;
  }

  div#kt_header {
    display: none;
  }

  .header-fixed.subheader-fixed .subheader {
    top: 54px;
  }
}

.btn.btn-sm i.flaticon-ver {
  font-size: 2rem;
}

.btn.btn-sm i.flaticon-pdf-file {
  font-size: 1.8rem;
}
.arrow::before {
  border-top-color: #e52229 !important;
}
.bs-tooltip-top .tooltip-inner {
  padding: 0 0.5rem !important;
}
.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.bs-tooltip-top .arrow::before {
  top: 0.4rem;
}
.bs-tooltip-auto[x-placement^="right"] .arrow,
.bs-tooltip-right .arrow {
  left: -5px !important;
}
.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.bs-tooltip-right .arrow::before {
  border-width: 0.4rem 0.4rem 0.5rem 0.2rem !important;
}
.font-ultra {
  font-weight: 800 !important;
}
.offcanvas.offcanvas-on {
  visibility: visible;
}
@media (min-width: 992px) {
  .header-fixed.subheader-fixed .header {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-bottom: 2px solid #003876;
  }

  .aside-enabled .header.header-fixed {
    left: 100px;
  }

  .aside-minimize .aside {
    -webkit-box-shadow: 0 5px 40px 1px rgb(2 39 80 / 64%);
    box-shadow: 0 5px 40px 1px rgb(2 39 80 / 64%);
    /* width: 130px !important; */
  }
  /* .aside .aside-primary {width: 130px !important;} */

  .header-fixed .header {
    -webkit-box-shadow: 0 0 40px 0 rgb(82 63 105 / 10%);
    box-shadow: 0 0 40px 0 rgb(82 63 105 / 10%);
  }

  .header.header-fixed {
    height: 65px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 97;
  }

  .aside-fixed.aside-minimize:not(.aside-minimize-hover) .wrapper {
    padding-left: 100px;
  }

  .header-fixed.subheader-fixed.subheader-enabled .wrapper {
    padding-top: 70px;
  }

  .subheader-fixed.aside-minimize .subheader {
    left: 100px !important;
  }

  .aside-enabled.subheader-fixed .subheader {
    left: 265px;
  }

  .header-menu-wrapper {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .header-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .header-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 100%;
    margin: 0;
  }

  .header-menu .menu-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .header-menu .menu-nav > .menu-item:first-child {
    padding-left: 0;
  }

  .header-menu .menu-nav > .menu-item.menu-item-rel {
    position: relative;
  }

  .header-menu .menu-nav > .menu-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0.25rem;
    padding: 0 0.25rem;
  }

  .header .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
  .header .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
    background-color: rgba(77, 89, 149, 0.06);
  }

  .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: none;
  }

  .header .header-menu .menu-nav > .menu-item > .menu-link {
    border-radius: 4px;
  }

  .header-menu.header-menu-layout-default .menu-nav > .menu-item > .menu-link {
    padding: 0.65rem 1.1rem;
  }

  .header-menu .menu-nav > .menu-item > .menu-link {
    background-color: none;
  }

  .header-menu .menu-nav > .menu-item > .menu-link {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
  }

  .header-menu .menu-nav > .menu-item .menu-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none;
    position: relative;
    vertical-align: middle;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    outline: 0 !important;
    text-decoration: none;
    cursor: pointer;
  }

  .header
    .header-menu
    .menu-nav
    > .menu-item.menu-item-active
    > .menu-link
    .menu-text,
  .header
    .header-menu
    .menu-nav
    > .menu-item.menu-item-here
    > .menu-link
    .menu-text {
    color: #3699ff;
    font-weight: 500;
    font-size: 1rem;
    text-transform: initial;
    width: auto;
  }

  .header-menu .menu-nav > .menu-item .menu-link .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0;
  }

  .header
    .header-menu
    .menu-nav
    > .menu-item.menu-item-active
    > .menu-link
    .menu-arrow,
  .header
    .header-menu
    .menu-nav
    > .menu-item.menu-item-here
    > .menu-link
    .menu-arrow {
    color: #003876;
  }

  .header-menu
    .menu-nav
    > .menu-item.menu-item-active
    > .menu-link
    > .menu-arrow {
    color: #003876;
  }

  .header .header-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: #6c7293;
  }

  .header-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: #b5b5c3;
  }

  .header-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    font-size: 0.6rem;
    width: 20px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .header-menu .menu-nav > .menu-item > .menu-link > .menu-arrow {
    display: none;
  }

  .header-menu .menu-nav > .menu-item .menu-link .menu-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .header-menu .menu-nav > .menu-item .menu-submenu.menu-submenu-classic {
    padding: 20px 0;
  }

  .header-menu .menu-nav > .menu-item .menu-submenu.menu-submenu-left {
    right: auto;
    left: 0;
  }

  .header-menu .menu-nav > .menu-item .menu-submenu {
    background-color: #fff;
    -webkit-box-shadow: 0 15px 50px 0 rgb(82 63 105 / 15%);
    box-shadow: 0 15px 50px 0 rgb(82 63 105 / 15%);
    padding: 0;
    border-radius: 4px;
    width: 275px;
    margin: 0 auto;
    left: auto;
    right: auto;
    display: none;
    z-index: 98;
    position: absolute;
    top: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transform-style: preserve-3d;
    border-radius: 4px;
    padding: 20px 0;
  }

  .header-menu .menu-nav > .menu-item .menu-submenu .menu-subnav {
    list-style: none !important;
    padding: 0;
    margin: 0;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    > .menu-subnav
    > .menu-item {
    padding: 0;
  }

  .header-menu .menu-nav > .menu-item .menu-inner > .menu-item,
  .header-menu .menu-nav > .menu-item .menu-subnav > .menu-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0;
    padding: 10px 20px;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    > .menu-subnav
    > .menu-item
    > .menu-link {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 11px 30px;
  }

  .header-menu .menu-nav > .menu-item .menu-inner > .menu-item .menu-link,
  .header-menu .menu-nav > .menu-item .menu-subnav > .menu-item .menu-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-decoration: none;
    position: relative;
    vertical-align: middle;
    outline: 0 !important;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    > .menu-subnav
    > .menu-item
    > .menu-link
    .menu-icon.svg-icon {
    height: 23px;
    width: 23px;
    margin-left: -2px;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    > .menu-subnav
    > .menu-item
    > .menu-link
    .menu-icon {
    color: #b5b5c3;
    font-size: 1.4rem;
    width: 33px;
    padding: 0;
    line-height: 0;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-inner
    > .menu-item
    .menu-link
    .menu-icon,
  .header-menu
    .menu-nav
    > .menu-item
    .menu-subnav
    > .menu-item
    .menu-link
    .menu-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33px;
    flex: 0 0 33px;
    padding: 0;
    font-size: 1.4rem;
  }

  .header-menu .menu-nav > .menu-item .menu-link .menu-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    > .menu-subnav
    > .menu-item
    > .menu-link
    .menu-text {
    color: #3f4254;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    > .menu-subnav
    > .menu-item
    > .menu-link
    .menu-text {
    font-weight: 400;
    font-size: 1rem;
    text-transform: initial;
  }

  .header-menu
    .menu-nav
    > .menu-item
    .menu-inner
    > .menu-item
    .menu-link
    .menu-text,
  .header-menu
    .menu-nav
    > .menu-item
    .menu-subnav
    > .menu-item
    .menu-link
    .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 400;
    font-size: 1rem;
    text-transform: initial;
  }

  .header-menu .menu-nav > .menu-item .menu-link .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0;
  }

  .accordion.accordion-svg-toggle.card
    .card-header
    .card-title.collapsed
    .svg-icon
    svg {
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  .card-header.collapsed .card-title.sys .svg-icon svg {
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
    -webkit-transform: rotate(0) !important;
    transform: rotate(0) !important;
  }

  .card-header .card-title.sys .svg-icon svg {
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
    -webkit-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important;
  }

  .accordion.accordion-svg-toggle.card .card-header {
    cursor: pointer;
  }

  .accordion.accordion-svg-toggle.card .card-header .card-title .svg-icon svg {
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .topbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0;
  }

  .topbar .dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .dropdown,
  .dropleft,
  .dropright,
  .dropup {
    position: relative;
  }

  .topbar .topbar-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1700px !important;
  }
}

.spinner-container {
  height: 70vh;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.field:hover i,
.field:hover h5 {
  color: #003876;
}

.field:hover {
  border: 1px solid #003876 !important;
  border-radius: 5px !important;
}

.card-header {
  border-bottom: 1px solid #ebedf3 !important;
}

.h-min-448px {
  min-height: 448px;
}

.pointer {
  cursor: pointer;
}

.btn-primary:hover {
  background: #0753a9 !important;
}
/* div#kt_card_3 {
    padding-bottom: 80px;
} */

/* .ocr [data-action=change] input {
    width: 0!important;
    height: 0!important;
    overflow: hidden;
    opacity: 0;
} */

.dtl_font_primary .form-group label {
  color: #003876 !important;
}
.dtl_font .form-group label,
.wz_dtl .form-group label {
  font-size: 1.2em !important;
}

.form-check-input,
.wz_dtl .form-check-inline .form-check-input {
  width: 20px;
  height: 20px;
}

.bg-light-dtl {
  background-color: #eee5ff;
  color: #8950fc !important;
}

.text-dtl {
  color: #8950fc !important;
}

.svg-icon.svg-icon-dtl svg g [fill] {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
  fill: #8950fc !important;
}

.modal-backdrop.show {
  opacity: 0.8 !important;
}

/* label.input-file.custom-file-upload.btn-primary {
    color: #fff;
    padding: .5em;
    width: 100%;
    font-size: 1.2rem;
} */

.offcanvas.offcanvas-right.offcanvas-on {
  height: 100vh;
  background: linear-gradient(
    #003876 2%,
    #003876 178px,
    rgba(245, 248, 250, 8) 178px
  );
}

.form-group label {
  font-size: 1.1em !important;
  /* color: #003876; */
  font-weight: 500;
}

.check-dtl input {
  margin-top: 0 !important;
  margin-right: 1em;
}

.check-dtl:hover {
  background-color: #003876;
  color: #fff;
}

.check-dtl {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* .table-responsive {
    margin-bottom: 2em;
    border-bottom: 1px solid #e6e9ec;
} */

.btn.btn-circle {
  border-radius: 50% !important;
}

.dtl-list:nth-of-type(odd) {
  background-color: #ebedf3;
}

.tooltip {
  background-color: red !important;
  border-radius: 5px !important;
}

.tooltip::after {
  color: white !important;
  border-color: red transparent transparent !important;
}

.toggle.ios,
.toggle-on.ios,
.toggle-off.ios {
  border-radius: 20px;
}

.toggle.ios .toggle-handle {
  border-radius: 20px;
}

#configuracion-rrhh a,
#configuracion .offcanvas-content a,
#recursos_humanos .offcanvas-content a,
#academico .offcanvas-content a,
#Seguridad .offcanvas-content a,
#xdigit .offcanvas-content a,
#admin_tab .offcanvas-content a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.offcanvas-left.offcanvas-on {
  left: 0 !important;
  visibility: visible;
}

.cruz {
  margin-left: 14px !important;
}

.nav.nav-pills .nav-link {
  color: #333;
}

i {
  font-size: 1.25rem;
  color: #333;
}

.modal-header {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.sidebar_content .nav.nav-tabs .nav-link {
  border-color: #ebedf3 #ebedf3 #e4e6ef;
}

.sidebar_content .nav.nav-tabs .nav-item .nav-link.active,
.sidebar_content .nav.nav-tabs .nav-item .nav-link.active i,
.nav-link.active i {
  color: #fff;
}

.sidebar_content .nav.nav-tabs .nav-item .nav-link i {
  line-height: 1;
}

.sidebar_content .nav.nav-tabs .nav-item .nav-link i,
.sidebar_content .nav.nav-tabs .nav-item .nav-link {
  color: #003876;
}
.sidebar_content .nav.nav-tabs .nav-item .nav-link {
  padding: 0.5em;
}

.sidebar_content .nav.nav-tabs .nav-item .nav-link.active:hover i {
  color: #fff;
}
.sidebar_content .nav.nav-tabs .nav-item .nav-link.active:hover {
  border-color: #fff;
  color: #fff;
}
.sidebar_content .nav.nav-tabs .nav-item .nav-link:hover i {
  color: #e52229;
}
.sidebar_content .nav.nav-tabs .nav-item .nav-link:hover {
  border-color: #e52229;
  color: #e52229;
}

.aside-nav .btn.btn-clean i {
  color: #fff;
}

.swal2-warning .swal2-icon-content:before {
  font-size: 40px;
  position: absolute;
  left: 12px;
  z-index: 99;
  background: #fff;
  top: 12px;
}

.digitarTBL tr {
  cursor: pointer;
}

.float-btn {
  position: fixed;
  top: 145px;
  right: 20px;
  cursor: pointer;
}

.configTbl .dropdown-item.active,
.configTbl .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #ebedf3;
}

/* SCROLL */
/* width */
::-webkit-scrollbar {
  width: 0.5em !important;
  height: 0.5em !important;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e52229;
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}

.wizard.wizard-1
  .wizard-nav
  .wizard-steps
  .wizard-step:hover
  .wizard-label
  .wizard-icon,
.wizard.wizard-1
  .wizard-nav
  .wizard-steps
  .wizard-step:hover
  .wizard-label
  .wizard-title,
.wizard.wizard-1
  .wizard-nav
  .wizard-steps
  .wizard-step:hover
  .wizard-label
  .wizard-arrow,
.wizard.wizard-1
  .wizard-nav
  .wizard-steps
  .wizard-step:hover
  .wizard-label
  .flaticon2-left-arrow-1:before {
  color: #003876 !important;
}

.accordion .card .card-header {
  background-color: #fff !important;
}

.arequerido .card-body {
  min-height: 100px !important;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: #003876;
}

.wizard.wizard-1 .wizard-nav .wizard-steps .carousel-item .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-around;
  -ms-flex-pack: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: wrap;
}

#carouselWizard .carousel-inner {
  padding: 0 40px !important;
}

#carouselWizard .carousel-item {
  margin-right: 0 !important;
  float: none !important;
}

#carouselWizard .carousel-control-prev {
  left: 10px;
}

#carouselWizard .carousel-control-next {
  right: 10px;
}

#carouselWizard .carousel-control-prev,
#carouselWizard .carousel-control-next {
  width: 20px;
}

#carouselWizard .carousel-control-next-icon,
#carouselWizard .carousel-control-prev-icon {
  width: 20px;
  height: 70px;
}

/* // Responsive Bootstrap Tabs */
.wz_dtl_responsive {
  display: block;
  min-width: 100%;
  overflow-x: auto;
}

.wz_dtl_scroll {
  min-width: 100%;
}

.wz_dtl_scroll .wizard-steps {
  -webkit-box-pack: flex-start !important;
  -ms-flex-pack: flex-start !important;
  justify-content: flex-start !important;
}

.wz_dtl_scroll .wizard-steps {
  white-space: nowrap;
  flex-wrap: nowrap !important;
  display: inline-block;
  min-width: 100%;
}
.scrollPanel {
  overflow: auto !important;
  height: 100% !important;
  padding-bottom: 9.5rem !important;
}
.wizard.wizard-1
  .wizard-nav
  .wizard-steps
  .wizard-step[data-wizard-state="done"]
  .wizard-arrow,
.wizard.wizard-1
  .wizard-nav
  .wizard-steps
  .wizard-step[data-wizard-state="done"]
  .wizard-label
  .wizard-icon {
  color: #003876 !important;
}

.ngx-dropdown-container .ngx-dropdown-button {
  height: calc(1.5em + 1.65rem + 2px) !important;
}

.ngx-dropdown-container .ngx-dropdown-list-container ul li {
  margin: 5px !important;
  border-bottom: 1px solid #ccc !important;
}
.ngx-dropdown-container .ngx-dropdown-list-container ul li:hover {
  background: rgb(204 204 204 / 14%);
}

.ngx-dropdown-container .ngx-dropdown-list-container ul li :hover {
  background-color: #abc5dc !important;
}
h2.mat-dialog-title {
  padding: 1em;
  background: #003876;
  color: #fff;
}
.mat-dialog-container {
  padding: 0 !important;
}
.mat-dialog-content {
  margin: 0 !important;
  padding: 1em !important;
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column;
}
.mat-dialog-content-custom {
  /* display: block; */
  /* margin: 0 -24px; */
  /* padding: 0 24px; */
  max-height: 65vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* .mat-dialog-actions {
  margin-bottom: 0 !important;
  border-top: 1px solid #003876;
  padding: 0.5em !important;
} */

.mat-dialog-actions {
  margin-bottom: 0 !important;
  border-top: 1px solid #003876;
  padding: 1.5em !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.card.card-custom > .card-header {
  min-height: auto !important;
}
.photo .symbol {
  cursor: pointer;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.w-90 {
  width: 90%;
}
.w-80 {
  width: 80%;
}
#kt_wizard .input-group {
  justify-content: space-between;
}
#kt_wizard .input-group-append .btn,
#kt_wizard .input-group-prepend .btn {
  padding: 0.5em !important;
}
.audit-approval .nav-link {
  border-radius: 10px;
  border: 1px solid #ccc;
  margin: 0 0.3em;
}
.audit-approval .nav-link:hover {
  background-color: #003876 !important;
  color: #fff !important;
}
.audit-approval .nav-link:hover .nav-icon i,
.audit-approval .nav-link:hover .nav-text {
  color: #fff !important;
}
.audit-approval .nav-link.active {
  color: #fff;
  background-color: #003876;
  border: transparent;
}

.card.card-custom {
  -webkit-box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
  box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
  border: 0;
}
.audit-approval .font-size-h2 {
  font-size: 3.75rem !important;
}
.border-primary {
  border: 1px solid #003876 !important;
}
.pdf-list {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;

  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.pdf-items {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;

  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;

  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.pdf-items-col {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--single {
  min-height: 44px;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__arrow:after,
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow:after {
  font-size: 1rem !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 11px !important;
}
.c-btn {
  min-height: 44px !important;
}
.selected-list .c-angle-down,
.selected-list .c-angle-up {
  width: 1rem;
  height: 1rem;
}
.c-angle-down c-icon {
  font-size: 1rem;
}
.list-filter {
  border-bottom: 1px solid #01264e !important;
  background: #003876;
}
.list-filter .c-search svg {
  fill: #fff !important;
}
.list-filter input {
  background: #003876;
  color: #fff;
}
.list-filter input {
  background: #003876;
  color: #fff;
}
.list-filter input::placeholder {
  color: #fff;
}
h4.text-danger {
  color: #e3292e !important;
}
.pdf-page .symbol > img {
  border-radius: 20px !important;
}
.pdf-page .symbol .symbol-badge {
  border: 3px solid #fff;
}
.symbol.symbol-lg-200 .symbol-badge {
  width: 20px;
  height: 20px;
}
.subtitle {
  color: #b5b5c3;
}
.refX .subtitle {
  color: #28a745;
}
.tab-primary .nav-tabs .nav-item.show .nav-link,
.tab-primary .nav-tabs .nav-link.active {
  color: #5e6278;
  background-color: #fff;
  border-color: #003876 #003876 #fff;
}
.tab-primary .nav-tabs {
  border-bottom: 1px solid #003876;
}
/* .tab-primary .tab-content {
    padding: 1em;
    border: 1px solid #003876;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 0;
} */
.modal-md-600 {
  max-width: 600px !important;
}
.modal-md-800 {
  max-width: 800px !important;
}
.modal-content {
  -webkit-box-shadow: 0 0.5rem 3rem rgb(0 0 0 / 60%);
  box-shadow: 0 0.5rem 3rem rgb(0 0 0 / 60%);
}
.mapicon {
  height: 45px;
  width: 100%;
  background: url(../media/icon-img/map-ico.png) no-repeat center center;
  background-size: contain;
}
a.active .mapicon,
a:hover .mapicon {
  height: 45px;
  width: 100%;
  background: url(../media/icon-img/map-ico-b.png) no-repeat center center;
  background-size: contain;
}
.nav.exp .nav-link.active .nav-icon i,
.nav.exp .nav-link:hover:not(.disabled) .nav-icon i,
.nav.exp .show > .nav-link .nav-icon i {
  color: #e00015 !important;
}
.expediente .font-bold,
.expediente strong,
.expediente h4 {
  color: #003876;
  /* font-size: 1.4em; */
  margin: 0.3em;
  float: left;
  line-height: 20px;
}
.expediente .list-group-item,
.expediente .pdf-items {
  font-size: 1.2em;
}
.swal2-popup .swal2-icon {
  margin: 2rem auto 0 !important;
}
#PVacante button.ngx-dropdown-button {
  background: none !important;
  border: 0 !important;
}
.dtl_font .form-group .check-dtl.plz {
  font-size: 1em !important;
}
.no_border {
  border: 0 !important;
}
.atbl.table td,
.atbl.table th {
  border-top: 0 !important;
}
.border-tabs-primary.nav-tabs {
  border-bottom: 1px solid #003876;
}
.border-tabs-primary.nav-tabs .nav-link:focus,
.border-tabs-primary.nav-tabs .nav-link:hover,
.border-tabs-primary.nav-tabs .nav-item.show .nav-link,
.border-tabs-primary.nav-tabs .nav-link.active {
  border-color: #003876 #003876 #fff !important;
}
/* .switch.switch-sm.switch-primary:not(.switch-outline) input:empty~span:before {
    background-color: rgb(0 56 118 / 71%) !important;
} */
.switch.switch-primary:not(.switch-outline) input:checked ~ span:before {
  background-color: #067d21 !important;
}
.menuIz .nav-item {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;

  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;

  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;

  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.full-container {
  background-color: red;
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
}

/* ############################################## SVG ################################# */

.nodeHasChildren {
  fill: white;
}

.nodeDoesNotHaveChildren {
  fill: white;
}

.nodeRepresentsCurrentUser {
  stroke: Chartreuse;
  stroke-width: 3;
}

text {
  fill: dimgray;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.node {
  cursor: pointer;
}

.node-collapse {
  stroke: grey;
}

.node-collapse-right-rect {
  fill: #70c645;
  stroke: #70c645;
}

.node text {
  fill: white;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 10px;
}

.node circle {
  stroke-width: 1px;
  stroke: #70c645;
  fill: #70c645;
}

.node-group .emp-name {
  fill: #2a2896;
  font-size: 12px;
  font-weight: 600;
  background-color: #c19e45;
}

.node-group .emp-position-name {
  fill: #59525b;
  font-size: 11px;
  background-color: #c19e45;
}

.node-group .emp-area {
  fill: #91a4a5;
  font-size: 10px;
  background-color: #c19e45;
}

.node-group .emp-count,
.node-group .emp-count-icon {
  fill: #91a4a5;
  font-size: 12px;
  background-color: #c19e45;
}

.dropdown-menu > .dropdown-item,
.dropdown-menu > li > a {
  display: flex;
  align-items: center;
}

.ngx-dropdown-container[_ngcontent-bfb-c92]
  .ngx-dropdown-button[_ngcontent-bfb-c92] {
  width: 100%;
  min-height: 30px;
  padding: 5px 10px;
  background-color: #fff;
}

.border-primary {
  border: 1px solid #003876;
}
.ngx-dropdown-container[_ngcontent-bfb-c92] button[_ngcontent-bfb-c92] {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.42857143;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.multiselect-dropdown {
  border: 1px solid #ccc !important;
  border-radius: 4px;
  /* margin-left: 0.5rem!important; */
  margin-right: 0.5rem !important;
  /* margin-top: 4px; */
}

.multiselect-dropdown .dropdown-btn {
  display: flex !important;
  border: none !important;
  width: 100%;
  padding: 6px 12px;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 2.14 !important;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  min-height: 42.93px !important;
  /* margin-top: 4px; */
  /* overflow: hidden; */
  max-width: 84%;
  /* white-space: nowrap; */
}

.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
  position: relative;
  right: 0;
  color: #999;
  margin-top: 4px;
  border-style: solid;
  border-color: #7f7f7f !important;
  border-style: solid;
  border-width: 0.1em 0.1em 0 0 !important;
  content: "";
  display: inline-block;
  height: 10px;
  position: relative;
  vertical-align: text-top;
  width: 10px;
  top: 5px !important;
  transform: rotate(135deg);
}

.secciones-modulos .ngx-dropdown-button {
  min-width: 170px;
}

.secciones-modulos .multiselect-dropdown {
  min-width: 170px;
}

/* .br-none{} */

.rounded-left-0 button:first-child {
  border-radius: 4px 0 0 4px !important;
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
  background-color: #6eadf5 !important;
}

.subheader-separator.subheader-separator-ver {
  width: 1px;
  height: 22px;
}
.subheader-separator {
  display: block;
  width: 12px;
  height: 4px;
  border-radius: 2px;
}

.form-control:focus {
  color: rgb(63, 66, 84);
  background-color: rgb(255, 255, 255);
  border-color: rgb(103 168 237) !important;
  outline: 0px;
}
.form-control.form-control-solid:focus,
.form-control:focus {
  background-color: #fff !important;
}

.input-group .ng-dirty .ngx-dropdown-container button {
  max-width: 280px;
  width: 280px;
}

.input-group .ng-dirty .ngx-dropdown-container button span:first-child {
  display: inline-block;
  width: calc(240px - 20px) !important;
  overflow: hidden !important;
  margin-right: 1.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svg-icon.svg-icon-success svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #50cd89;
}

/* #kt_quick_user > div.offcanvas-content > .menu-item.px-5 > a:hover, */
/* #kt_quick_user > .offcanvas-content > .menu-item > .menu-link:hover {
    transition: color .2s ease,background-color .2s ease;
    color: #009ef7;
} */

/* #kt_quick_user > .offcanvas-content > .menu-item > .menu-link:hover {
    transition: color .2s ease,background-color .2s ease;
    background-color: rgba(245,248,250,.8);
} */

.menu-item .menu-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  flex: 0 0 100%;
  padding: 0.65rem 1rem;
  transition: none;
  outline: 0 !important;
}

.bg-gradient-2 {
  /* background: linear-gradient(-45deg, #0a2540, #010e1d, #0a2540, #062b57); */
  background-image: url(../images/bg-atentoapp-3.jpg);
  background-position: top center;
  background-size: cover;
  /* background-size: 400% 400%; */
  /* -webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite; */
}

.bg-gradient-3 {
  /* background: linear-gradient(-45deg, #0a2540, #010e1d, #0a2540, #062b57); */
  background-image: url(../images/Itla-Wao-blue.jpg);
  background-position: top center bottom;
  background-size: cover;
  /* background-size: 400% 400%; */
  /* -webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite; */
}

.button-abalible {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem;
  border: 1px solid transparent;
  border-radius: 3px;
  -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  -webkit-appearance: none;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  background-color: #6e7f91;
  color: #fefefe;
  font-weight: 500;
  text-decoration: none;
  padding: 1em 3em;
}

.button-abalible:hover,
.button:focus {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.button-gradient {
  border: 0;
  background: #46dc9e;
  background-image: linear-gradient(
    to right,
    #0a8d80,
    #34af9d,
    #50b9ab,
    #04ac9c
  );

  background-size: 300% 100%;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.button-gradient:hover {
  background-position: 100% 0;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.button-unabalible {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem;
  border: 1px solid #8d8d8d9e;
  border-radius: 3px;
  -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  -webkit-appearance: none;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  background: transparent !important;
  background-image: none !important;
  color: #fefefe;
  font-weight: 500;
  text-decoration: none;
  padding: 1em 3em;
  opacity: 0.6;
}

.left-card {
  width: 100%;
  max-width: 25%;
  /* background: rgb(243, 243, 243); */
  /* background: linear-gradient(321deg, rgba(14,42,92,1) 0%, rgba(17,61,115,1) 35%, rgba(23,68,121,1) 100%); */

  /* background: linear-gradient(321deg, rgb(212 220 235) 0%, rgb(225 225 225) 35%, rgb(215 215 215) 100%); */
  box-shadow: 0 10px 30px 0 rgb(82 63 105 / 5%);
}

.btn-container {
  text-align: center;
  position: relative;
  width: 300px;
  margin: 0 auto;
  cursor: pointer;
}

.btn-container button {
  position: relative;
  height: 50px;
  width: 280px;
  border: 0;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 1.1em;
  letter-spacing: 0.2em;
  overflow: hidden;
  box-shadow: 0 4px 12px 0 rgba(152, 160, 180, 10);
  z-index: -2;
}

.fill-one {
  position: absolute;
  background-image: linear-gradient(to right, #e040fb, #00bcd4);
  height: 70px;
  width: 420px;
  border-radius: 5px;
  margin: -40px 0 0 -140px;
  z-index: -1;
  transition: all 0.4s ease;
}

.container-one:hover .fill-one {
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  transform: translateX(100px);
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hexagon {
  width: 96.75px;
  height: 150px;
  background-image: linear-gradient(90deg, #00ffb8, #13ce9a);
  border-radius: 15px;
  transition: transform 400ms ease;
}
.hexagon:hover {
  transform: rotate(30deg);
}
.hexagon:before,
.hexagon:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  background-image: inherit;
  border-radius: inherit;
}
.hexagon:before {
  transform: rotate(60deg);
}
.hexagon:after {
  transform: rotate(-60deg);
}

body {
  margin: 0;
  background-color: #f3f6f9;
}

.center {
  position: relative;
  transform: translate(-50%, -50%);
}

.button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0) rotate(30deg);
}

/* End of container */

.btn-lobby-container {
  min-width: 240px;
}

.button {
  cursor: pointer;
  width: 200px;
  height: 173.2050807569px;
  float: left;
}
.button:nth-child(2) {
  margin-right: 0;
}
.btn-lobby-container:hover .button .hex:nth-child(2) {
  opacity: 1;
  transform: scale(1.2);
}
.btn-lobby-container:hover .button .hex:nth-child(1) {
  opacity: 1;
  transform: scale(1.1);
}

.btn-lobby-container:hover .button .hexagon-2:nth-child(3) {
  opacity: 1;
  transform: scale(1) rotate(-30deg) translate3d(30%, 88%, 0);
}

.content-button {
  position: relative;
  min-height: 290px;
  display: flex;
  justify-content: center;
  min-width: 240px;
}

.content-text {
  /* opacity: 1;
    transform: scale(1.5) rotate(-30deg) translate3d(28%, 87%, 0);
    position: absolute; */
  /* margin-top: 170px;
    line-height: 1.4; */

  margin-top: 8px;
  line-height: 1.4;
  position: absolute;
  bottom: 0;
}

.btn-lobby-container:hover .button .hex:nth-child(1) div:before,
.btn-lobby-container:hover .button .hex:nth-child(1) div:after {
  height: 15px;
}

.hex {
  position: absolute;
  top: 0;
  left: 50px;
  width: 100px;
  height: 173.2050807569px;
  opacity: 0.5;
}
.hex:nth-child(1) {
  transform: scale(0.9);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 0;
}
.hex:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}
.hex div {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  width: 100px;
  height: 173.2050807569px;
  transform-origin: center center;
}
.hex div:before,
.hex div:after {
  content: " ";
  position: absolute;
  /* background: var(--color-angular); */
  width: 100%;
  height: 2px;
  transition: height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hex div:before {
  top: 0;
}
.hex div:after {
  bottom: 0;
}

.hex:nth-child(1) div:after,
.hex:nth-child(1) div:before {
  height: 4px;
}

.hex:nth-child(1) {
  opacity: 0.8;
}

.hex div:nth-child(1) {
  transform: rotate(0deg);
}
.hex div:nth-child(2) {
  transform: rotate(60deg);
}
.hex div:nth-child(3) {
  transform: rotate(120deg);
}

:root {
  /* Change this to change the appearance of the hexaons */
  --hex-width: 100px;
  --hex-between: 10px;

  /* Other hexagon dimentions */
  --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
  --hex-margin: calc(var(--hex-width) / 2);
  --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
  --hex-transition: all 0.2s ease;

  /* Colors */
  --color-hex-default: #000000;
  --color-hex-hover: #ffffff;
  --color-angular: #dd0031;
  --color-atom: #66595c;
  --color-bootstrap: #563d7c;
  --color-bootstrap2: #a3184e;
  --color-circleci: #343434;
  --color-css: #1572b6;
  --color-git: #b45f2e;
  --color-gulp: #da4648;
  --color-haskell: #5d4f85;
  --color-html: #e34f26;
  --color-javascript: #f7df1e;
  --color-meteor: #de4f4f;
  --color-python: #3776ab;
  --color-rails: #cc0000;
  --color-sass: #cc6699;
  --color-vuejs: #4fc08d;
  --color-webpack: #8dd6f9;
}

.hexagon-2 {
  align-items: center;
  background-color: var(--color-hex-default);
  cursor: pointer;
  display: flex;
  fill: white;
  height: var(--hex-height);
  justify-content: center;
  margin: var(--hex-border) 0;
  position: relative;
  transition: var(--hex-transition);
  width: var(--hex-width);
  transform: scale(1.2) translate3d(42%, 41%, 0) rotate(-30deg);
  border-radius: 3px;
}

.hexagon-2::after,
.hexagon-2::before {
  border-left: var(--hex-margin) solid transparent;
  border-right: var(--hex-margin) solid transparent;
  content: "";
  left: 0;
  position: absolute;
  transition: var(--hex-transition);
  width: 0;
}
.hexagon-2::after {
  border-top: var(--hex-border) solid var(--color-hex-default);
  top: 98%;
  width: 0;
}
.hexagon-2::before {
  border-bottom: var(--hex-border) solid var(--color-hex-default);
  bottom: 99.1%;
}

.hexagon-2:hover {
  background-color: var(--color-hex-hover);
}
.hexagon-2:hover::after,
.hexagon-2:hover::before {
  border-top-color: var(--color-hex-hover);
  border-bottom-color: var(--color-hex-hover);
}

.hexagon-2:nth-child(8n + 5),
.hexagon-2:nth-child(8n + 6),
.hexagon-2:nth-child(8n + 7),
.hexagon-2:nth-child(8n + 8) {
  margin-left: calc(var(--hex-width) / 2 + var(--hex-between) / 2);
}

.content-text span {
  color: #dae2e5;
}
.content-text label {
  color: #b2bcc0;
}

.unative .content-text,
.unative .button {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.unative {
  pointer-events: none;
  cursor: default;
  display: block;
}

.color-angular .hexagon-2,
.color-angular .hex div:before,
.color-angular .hex div:after {
  background-color: var(--color-angular);
}

.color-angular .hexagon-2::after,
.color-angular .hexagon-2::before {
  border-top-color: var(--color-angular);
  border-bottom-color: var(--color-angular);
}

.color-angular:hover {
  fill: var(--color-angular);
}

.color-sass .hexagon-2,
.color-sass .hex div:before,
.color-sass .hex div:after {
  background-color: var(--color-sass);
}

.color-sass .hexagon-2::after,
.color-sass .hexagon-2::before {
  border-top-color: var(--color-sass);
  border-bottom-color: var(--color-sass);
}

.color-sass:hover {
  fill: var(--color-sass);
}

.color-vuejs .hexagon-2,
.color-vuejs .hex div:before,
.color-vuejs .hex div:after {
  background-color: var(--color-vuejs);
}

.color-vuejs .hexagon-2::after,
.color-vuejs .hexagon-2::before {
  border-top-color: var(--color-vuejs);
  border-bottom-color: var(--color-vuejs);
}

.color-vuejs:hover {
  fill: var(--color-vuejs);
}

.color-webpack .hexagon-2,
.color-webpack .hex div:before,
.color-webpack .hex div:after {
  background-color: var(--color-webpack);
}

.color-webpack .hexagon-2::after,
.color-webpack .hexagon-2::before {
  border-top-color: var(--color-webpack);
  border-bottom-color: var(--color-webpack);
}

.color-webpack:hover {
  fill: var(--color-webpack);
}

.color-rails .hexagon-2,
.color-rails .hex div:before,
.color-rails .hex div:after {
  background-color: var(--color-rails);
}

.color-rails .hexagon-2::after,
.color-rails .hexagon-2::before {
  border-top-color: var(--color-rails);
  border-bottom-color: var(--color-rails);
}

.color-rails:hover {
  fill: var(--color-rails);
}

.color-python .hexagon-2,
.color-python .hex div:before,
.color-python .hex div:after {
  background-color: var(--color-python);
}

.color-python .hexagon-2::after,
.color-python .hexagon-2::before {
  border-top-color: var(--color-python);
  border-bottom-color: var(--color-python);
}

.color-python:hover {
  fill: var(--color-python);
}

.color-meteor .hexagon-2,
.color-meteor .hex div:before,
.color-meteor .hex div:after {
  background-color: var(--color-meteor);
}

.color-meteor .hexagon-2::after,
.color-meteor .hexagon-2::before {
  border-top-color: var(--color-meteor);
  border-bottom-color: var(--color-meteor);
}

.color-meteor:hover {
  fill: var(--color-meteor);
}

.color-html .hexagon-2,
.color-html .hex div:before,
.color-html .hex div:after {
  background-color: var(--color-html);
}

.color-html .hexagon-2::after,
.color-html .hexagon-2::before {
  border-top-color: var(--color-html);
  border-bottom-color: var(--color-html);
}

.color-html:hover {
  fill: var(--color-html);
}

.color-haskell .hexagon-2,
.color-haskell .hex div:before,
.color-haskell .hex div:after {
  background-color: var(--color-haskell);
}

.color-haskell .hexagon-2::after,
.color-haskell .hexagon-2::before {
  border-top-color: var(--color-haskell);
  border-bottom-color: var(--color-haskell);
}

.color-haskell:hover {
  fill: var(--color-haskell);
}

.color-gulp .hexagon-2,
.color-gulp .hex div:before,
.color-gulp .hex div:after {
  background-color: var(--color-gulp);
}

.color-gulp .hexagon-2::after,
.color-gulp .hexagon-2::before {
  border-top-color: var(--color-gulp);
  border-bottom-color: var(--color-gulp);
}

.color-gulp:hover {
  fill: var(--color-gulp);
}

.color-git .hexagon-2,
.color-git .hex div:before,
.color-git .hex div:after {
  background-color: var(--color-git);
}

.color-git .hexagon-2::after,
.color-git .hexagon-2::before {
  border-top-color: var(--color-git);
  border-bottom-color: var(--color-git);
}

.color-git:hover {
  fill: var(--color-git);
}

.color-css .hexagon-2,
.color-css .hex div:before,
.color-css .hex div:after {
  background-color: var(--color-css);
}

.color-css .hexagon-2::after,
.color-css .hexagon-2::before {
  border-top-color: var(--color-css);
  border-bottom-color: var(--color-css);
}

.color-css:hover {
  fill: var(--color-css);
}

.color-bootstrap .hexagon-2,
.color-bootstrap .hex div:before,
.color-bootstrap .hex div:after {
  background-color: var(--color-bootstrap);
}

.color-bootstrap .hexagon-2::after,
.color-bootstrap .hexagon-2::before {
  border-top-color: var(--color-bootstrap);
  border-bottom-color: var(--color-bootstrap);
}

.color-bootstrap:hover {
  fill: var(--color-bootstrap);
}

.color-bootstrap2 .hexagon-2,
.color-bootstrap2 .hex div:before,
.color-bootstrap2 .hex div:after {
  background-color: var(--color-bootstrap2);
}

.color-bootstrap2 .hexagon-2::after,
.color-bootstrap2 .hexagon-2::before {
  border-top-color: var(--color-bootstrap2);
  border-bottom-color: var(--color-bootstrap2);
}

.color-bootstrap2:hover {
  fill: var(--color-bootstrap2);
}

.color-atom .hexagon-2,
.color-atom .hex div:before,
.color-atom .hex div:after {
  background-color: var(--color-atom);
}

.color-atom .hexagon-2::after,
.color-atom .hexagon-2::before {
  border-top-color: var(--color-atom);
  border-bottom-color: var(--color-atom);
}

.color-atom:hover {
  fill: var(--color-atom);
}

.display-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mat-dialog-container {
  height: inherit !important;
}

@media (max-width: 945px) {
  .container-lobby .col-md-3 {
    width: 100% !important;
  }
}

@media (max-width: 992px) {
  .header-mobile.header-mobile-lobby {
    background-color: #000837d9 !important;
    border-bottom: 1px solid #ffffff4a !important;
  }

  .container-lobby .col-md-3 {
    display: none;
  }

  .container-lobby .col-md-9.col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .container-lobby .col-md-9.col-sm-12 .col-md-4 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

@media (max-width: 994px) {
  .btn-lobby-container {
    min-width: 230px;
  }

  .content-button {
    min-width: 230px;
  }
}

@media (max-width: 570px) {
  .container-lobby .col-md-9.col-sm-12 .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media (max-width: 1270px) {
}

@media (min-width: 768px) {
  .pdf-page .symbol.symbol-lg-200 > img {
    width: 100%;
    max-width: 150px;
    height: auto;
  }
}
@media (min-width: 992px) {
  .pdf-page .symbol.symbol-lg-200 > img {
    width: 100%;
    max-width: 200px;
    height: auto;
  }
}
@media (max-width: 991.98px) {
  .aside .aside-primary {
    width: 100px !important;
  }
}
@media (min-width: 1025px) {
  .d-des-none {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .image-input .image-input-wrapper {
    width: 150px;
    height: 150px;
  }
}

/* ############################################## SVG ################################# */

.h-44 {
  height: 44.88px;
}
.dropdown-btn {
  white-space: nowrap !important;
}

.alert.alert-info {
  background-color: #d5e1ff !important;
  border-color: #d5e1ff !important;
  color: #333;
}

@media (min-width: 1200px) {
  .modal-dialog.modal-xxl {
    max-width: 1404px !important;
  }
}

@media (max-width: 731px) {
  .input-group .ngx-dropdown-container button span:first-child {
    width: calc(140px - 20px) !important;
    white-space: nowrap;
  }
  .c-right,
  .c-left {
    width: 100%;
  }

  .c-right button,
  .c-left button {
    margin-bottom: 0.5rem;
  }

  .c-right .form-group {
    margin-bottom: 0.5rem;
  }

  .institution {
    min-width: 260px;
    margin-bottom: 0.5rem;
  }

  .dropdown-toggle {
    width: 100%;
  }

  .input-group button {
    margin-bottom: 0rem;
  }

  .btn-view-dashboard {
    width: 100% !important;
  }

  .font-size-h3 {
    font-size: 1.1rem !important;
  }
  .breadcrumb-item + .breadcrumb-item {
    padding-left: 0rem !important;
  }
}

@media (max-width: 1510px) {
  .input-group .ngx-dropdown-container button span:first-child {
    width: calc(140px - 20px) !important;
    white-space: nowrap;
  }
}

@media (max-width: 1450px) {
  .c-right,
  .c-left {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .pdf-page .symbol.symbol-lg-200 > img {
    width: 100%;
    max-width: 150px;
    height: auto;
  }
}

@media (min-width: 992px) {
  .pdf-page .symbol.symbol-lg-200 > img {
    width: 100%;
    max-width: 200px;
    height: auto;
  }
}

@media (max-width: 991.98px) {
  .aside .aside-primary {
    width: 120px !important;
  }

  .aside .aside-primary ul li span {
    font-size: 12px;
    font-weight: 200;
    line-height: normal;
    display: block;
  }

  .aside .aside-primary .btn-group-lg > .btn.btn-icon,
  .aside .aside-primary .btn.btn-icon.btn-lg {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
  }

  .side {
    width: 120px;
    padding: 1rem;
  }
}

@media (min-width: 1025px) {
  .d-des-none {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .image-input .image-input-wrapper {
    width: 150px;
    height: 150px;
  }
}

/* Large screens ----------- */
@media (max-width: 1800px) {
  /* .ngx-dropdown-container span.display-text,
    .input-group .ngx-dropdown-container button span:first-child  {
        width: calc(70% - 30%)!important;
    } */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* .card-header .col-sm-12.col-md-6,
    .card-header .c-left {
        padding-left: 0!important;
        padding-right: 0!important;
    } */

  .card-header .c-left .card-toolbar .btn {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .card-header .col-sm-12.col-md-5,
  .card-header .c-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .card-header .col-sm-12.col-md-5 .col .col-12.pr-0,
  .card-header .c-right {
    padding-right: 12.5px !important;
  }

  .card-header .c-right .row {
    margin-top: 0.5rem !important;
  }

  .card-header .c-left .card-toolbar {
    margin-bottom: 0 !important;
  }

  .card-toolbar .col-md-4 {
    margin-right: 0 !important;
  }

  .card-toolbar .btn.btn-outline-primary {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .card.card-custom .card-header {
    margin-top: 0 !important;
  }

  .btn-view-dashboard .btn.btn-outline-primary {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .btn-view-dashboard {
    margin-top: 0 !important;
  }

  .v-desk {
    display: none;
  }

  .header-mobile h2 {
    width: 100%;
    padding-left: 1rem;
  }

  el-caption {
    width: 100%;
  }

  .table-responsive .d-flex .justify-content-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: space-between !important;
  }

  .gender {
    display: block !important;
  }
  .gender div,
  .gender div label {
    width: 100%;
  }

  .gender div label {
    justify-content: flex-start !important;
  }

  .wizard-steps {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .nav.nav-tabs {
    display: block;
  }

  .nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom-left-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
  }

  .border-tabs-primary.nav-tabs .nav-link:focus,
  .border-tabs-primary.nav-tabs .nav-link:hover,
  .border-tabs-primary.nav-tabs .nav-item.show .nav-link,
  .border-tabs-primary.nav-tabs .nav-link.active {
    border-color: #003876 !important;
  }

  .ng-pristine .row {
    margin-bottom: 0 !important;
  }

  .mr-0-mobile {
    margin-right: 0 !important;
  }
  .mb-0-mobile {
    margin-bottom: 0 !important;
  }
  .mb-2-mobile {
    margin-bottom: 0.5rem !important;
  }

  .d-block-mobile {
    display: block !important;
  }

  .mx-0-mobile {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .px-0-mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media only screen and (min-device-width: 480px) and (max-device-width: 992px) {
  .card-header .c-left .card-toolbar .btn {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .card-header .col-sm-12.col-md-5,
  .card-header .c-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .card-header .col-sm-12.col-md-5 .col .col-12.pr-0,
  .card-header .c-right {
    padding-right: 12.5px !important;
  }

  .card-header .c-right .row {
    margin-top: 0.5rem !important;
  }

  .card-header .c-left .card-toolbar {
    margin-bottom: 0 !important;
  }

  .card-toolbar .col-md-4 {
    margin-right: 0 !important;
  }

  .card-toolbar .btn.btn-outline-primary {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .card.card-custom .card-header {
    margin-top: 0 !important;
  }

  .btn-view-dashboard .btn.btn-outline-primary {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .btn-view-dashboard {
    margin-top: 0 !important;
  }

  .v-desk {
    display: none;
  }

  .header-mobile h2 {
    width: 100%;
    padding-left: 1rem;
  }

  el-caption {
    width: 100%;
  }

  .table-responsive .d-flex .justify-content-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: space-between !important;
  }

  .gender {
    display: block !important;
  }
  .gender div,
  .gender div label {
    width: 100%;
  }

  .gender div label {
    justify-content: flex-start !important;
  }

  .wizard-steps {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .nav.nav-tabs {
    display: block;
  }

  .nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom-left-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
  }

  .border-tabs-primary.nav-tabs .nav-link:focus,
  .border-tabs-primary.nav-tabs .nav-link:hover,
  .border-tabs-primary.nav-tabs .nav-item.show .nav-link,
  .border-tabs-primary.nav-tabs .nav-link.active {
    border-color: #003876 !important;
  }

  .ng-pristine .row {
    margin-bottom: 0 !important;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 992px) {
  .col-md-4 {
    max-width: 100% !important;
  }
  .mr--5::before {
    margin-right: -5px !important;
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}