@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap");
@font-face {
    font-family: 'Times LT Std';
    src: url('fonts/TimesLTStd-BoldItalic.woff2') format('woff2'),
    url('fonts/TimesLTStd-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica LT Std';
    src: url('fonts/HelveticaLTStd-BoldObl.woff2') format('woff2'),
    url('fonts/HelveticaLTStd-BoldObl.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica LT Std';
    src: url('fonts/HelveticaLTStd-Obl.woff2') format('woff2'),
    url('fonts/HelveticaLTStd-Obl.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Times LT Std';
    src: url('fonts/TimesLTStd-Roman.woff2') format('woff2'),
    url('fonts/TimesLTStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica LT Std';
    src: url('fonts/HelveticaLTStd-Roman.woff2') format('woff2'),
    url('fonts/HelveticaLTStd-Roman.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'Times LT Std';
    src: url('fonts/TimesLTStd-Italic.woff2') format('woff2'),
    url('fonts/TimesLTStd-Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


.courier, *[typo=Courier] {font-family: 'Courier Prime', monospace !important;}
.courier-bold, *[typo=Courier-Bold]{font-family: 'Courier Prime', monospace !important; font-weight: bold !important;}
.courier-oblique, *[typo=Courier-Oblique]{font-family: 'Courier Prime', monospace !important; font-style: italic !important;}
.courier-bold-oblique, *[typo=Courier-BoldOblique] {font-family: 'Courier Prime', monospace !important; font-weight: bold !important; font-style: italic !important;}

.helvetica, *[typo=Helvetica] {font-family: 'Helvetica LT Std' !important;}
.helvetica-bold, *[typo=Helvetica-Bold]{font-family: 'Helvetica LT Std', monospace !important; font-weight: bold !important;}
.helvetica-oblique, *[typo=Helvetica-Oblique]{font-family: 'Helvetica LT Std', monospace !important; font-style: italic !important;}
.helvetica-bold-oblique, *[typo=Helvetica-BoldOblique] {font-family: 'Helvetica LT Std', monospace !important; font-weight: bold !important; font-style: italic !important;}

.times-bold, *[typo=Times-Bold]{font-family: 'Times LT Std', monospace !important; font-weight: bold !important;}
.times-italic, *[typo=Times-Italic]{font-family: 'Times LT Std', monospace !important; font-style: italic !important;}
.times-bold-italic, *[typo=Times-BoldItalic] {font-family: 'Times LT Std', monospace !important; font-weight: bold !important; font-style: italic !important;}
.times-roman, *[typo=Times-Roman]{font-family: 'Times LT Std', monospace !important; font-weight: 500 !important;}
body{font-family: 'Roboto', Tahoma, Verdana, sans-serif;font-size: 14px; font-weight: 400; background-color:white;}
body {
    margin-bottom: 40px;
}
body.loading , body.loading * {
    cursor: wait !important;
}
body.loading include {
    pointer-events: none;
    user-select: none; /* Evitar selección de texto (opcional) */
}
html { font-size: 14px; background: white}
p {
  margin-bottom: 0.5rem;
}
a, u{
    color: #0081C6;
}

h4 {
  font-size: 2.15rem;
}
h5 {
  font-size: 1.5rem;
}
h6 {
  font-size: 1.3rem;
}
p.big {
  font-size: 1.15rem;
}
.connection-info p {
    font-size: 18px;
    color: #2C2C2C;
}

img{max-width: 100%;}
.bggrey{background-color:#f1f1f1}
.no-bg{background-color: transparent;}
.grey{color:#7F7F7F;}
.medium { font-weight: 500;}

a,
img,
div,
li,
:after,
:before {
  transition: all 0.3s ease-in-out;
}
.fit-content {
  width: fit-content;
}
.display-none {
  display: none;
}
.d-contents {
  display: contents;
}
.vertical-center {
  align-items: center;
}
.vcenter {
  display: flex;
  align-items: center;
}
.hright {
  display: flex;
  justify-content: flex-end;
}
.wrap {
  flex-wrap: wrap;
}
.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
  z-index: 10;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
  z-index: 10;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
  z-index: 10;
}

.opacity-100 {
  opacity: 1;
}
.t-opacity {
  background-color: rgba(223, 244, 255, 0.5) !important;
}
.layout {
  margin: 0;
}
hr {
  margin: 0;
}
.hr-margin {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.text-bold {
  font-weight: 700;
}
.text-semibold {
  font-weight: 600;
}
.text-nobold {
  font-weight: 500;
}
.text-thin{
    font-weight: 300;
}
.font-sm{
    font-size: 0.5rem;
}

.font-smm{
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-sml{
    font-size: 0.85rem;
}
.font-md {
  font-size: 1rem;
}
.font-lg {
  font-size: 1.5rem;
}
.font-xl {
  font-size: 2rem;
}

.bg-lightblue {
  background-color: #dff4ff !important;
}
.bg-f1f1f1 {
    background: #f1f1f1;
}
.bg-lightblue{

  background-color: #DFF4FF !important;
}
.bg-lightgray {
  background-color: rgb(177, 177, 177);
}
.lime-green {
  color: #5fc600;
}
.dark-grey {
  color: #2c2c2c;
}
.blue {
  color: #0081c6 !important;
}
.green {
  color: #64aa2f;
}
.dark-green {
    color: #356114;
}
.user.dark-green{
    color:#0081c6;
}
.grey {
  color: #999;
}
.light-grey {
    color:#CBCBCB;
}
.blue{color:#0081C6 !important}
.green{ color: #64AA2F}
.grey{color:#999;}
.real_grey{color:#ACACAC;}
.med-grey {color: #707070}
.yellow {color: #FFA500}
.red { color: #D21B1B;}
.white { color: #ffffff;}

:root {
    --blau-primari: #0081C6;
    --blau-trans: #0081C620;
    --gris-fosc:#5D5C5C;
    --groc-alert:#FFA500;
    --groc-alert-trans:#FFA50020;
  }

    /*LOGIN*/
.loginerror {
  color: #ff4f4f;
}
.med-grey {
  color: #707070;
}
.yellow {
  color: #ffa500;
}

.red {
  color: #d21b1b;
}
.white {
  color: #ffffff;
}
/*LOGIN*/
.peakway-logo {
  width: 250px;
  padding-bottom: 10px;
}
.login-container{
    /* height: 100vh; */
    height: calc(100vh - 75px);
    display: flex;
    align-items: center;
}

.login-container-wrap{
    margin-bottom: -40px;
}

.login-header{
    height: 75px;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--gris-fosc);
}


textarea.form-control.custom-textarea {
  min-height: 150px;
  background: #f9f9f9;
  border-radius: 8px;
}
.form-container {
  padding: 60px;
  width: 100%;
  /* height: 300px; */
  border-radius: 5px;
  background-color: white;
  box-shadow: rgba(208, 208, 208, 0.8) 0 0 10px;
}
.login-button {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #0081c6;
    border: 1px solid #0081c6;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 6px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: #fff;
    width: 50%;
    cursor: pointer;
}

.login-button:hover {
    background-color: #006da8;
    border-color: #006da8;
}

.login-wrap{
    max-width: 500px;
}

.input-custom{
    background-color: #F5F5F5;
    border: 1px solid #cbcbcb;
}

.login-recoverypass{
    color: var(--gris-fosc);
    text-decoration: underline;
    white-space: nowrap;
}

.login-recoverypass:hover{
    color: var(--gris-fosc);
}

.menu {
  z-index: 1040;
    height: 100%;
    position: fixed;
    width: var(--menu-expanded-width, 210px);
    background-color: white;
    box-shadow: 5px 0 5px -5px rgb(177, 177, 177);
    transition: width 0.5s;
    display: flex;
    flex-direction: column;
}
#menu-lateral.menu.menu-senzill {
    width: 70px;
    transition: width 0.5s;
}

#menu-lateral .senzill {
  display: none;
}
#menu-lateral.menu.menu-senzill .senzill {
  display: block;
}
#menu-lateral.menu.menu-senzill .complet {
  display: none;
}
#menu-lateral.menu.menu-senzill .fa-square-ellipsis-vertical:before {
  content: "\e489";
}
#menu-lateral.menu.menu-senzill .menu-link {
    display: flex;
    /*width: max-content;*/
    transition: none;
}
#menu-lateral.menu.menu-senzill .menu-link:after {
  content: none;
}
#menu-lateral.menu.menu-senzill #menuList {
  position: relative;
}
#menuList li {
  white-space: nowrap;
}
#menuList li .text-menu {
  white-space: nowrap;
  line-height: 1.2;
}
#menu-lateral.menu li.list-unstyled {
  padding-left: 0;
}
#menu-lateral.menu.menu-senzill li.list-unstyled .menu-cnt-icon {
  min-height: 35px;
}
#menu-lateral.menu.menu-senzill li.list-unstyled a {
    padding-left: 15px;
    transition: padding-left 0.5s;
}
#menu-lateral.menu.menu-senzill li:hover a {
  background: #e5f2f9;
}
#menu-lateral.menu.menu-senzill li.list-unstyled:hover .text-menu {
  display: flex;
  align-items: center;
}
#menu-lateral.menu.menu-senzill .text-menu {
    width: 220px;
    padding-left: 20px;
    background: #e5f2f9;
    display:none;
    transition: display 0.5s;
}

#content-right.content.menu-senzill {
    padding-left: 70px;
    transition: padding-left 0.5s;
}
.transition-none {
  transition: none !important;
}
.menu-img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #CBCBCB;
  /*margin-right: 10px;*/
  /* box-shadow: 0px 3px 6px #00000029; */
}
.menu-cnt-icon {
  display: inline-flex;
  min-width: 30px;
  justify-content: left;
  /*margin-right: 5px;*/
  align-items: center;
    justify-content: left;
  min-height: 35px;
}
.customer-icon {
    margin-right: 7px;
}
.peakway-menu {
  margin-top: 45vh;
}
.copyright-menu {
  padding: 15px;
  flex-shrink: 0;
}
.copyright-menu img {
  max-width: 70%;
}

.site-link {
  margin-left: 10px;
  margin-top: 25px;
  margin-bottom: 5px;
}

.blue-line {
  border: 1px solid #0081c6;
  margin-top: 0.6rem;
}

.list-unstyled {
  list-style: none;
  margin-left: 0;
  padding-top: 0;
  padding-left: 15px;
  padding-bottom: 0;
}

.filter-title {
  display: flex;
  align-items: center;
}
.filter-title .custom-input {
    height: 35px;
}
.menu-link {
  padding-left: 14px;
}

.menu-link img {
  display: inline-block;
  margin-right: 10px;
  margin-top: -3px;
}
.menu-link:hover img,
.menu-link:hover::after {
  filter: invert(27%) sepia(51%) saturate(500%) hue-rotate(176deg)
    brightness(100%) contrast(97%);
}
.menu-link:link,
.menu-link:visited,
.menu-link:hover,
.menu-link:active {
  text-decoration: none;
  font-size: 1.1rem;
  color: #333;
  width: 100%;
  display: block;
  position: relative;
}
.menu-link:hover {
  color: #0081c6;
  background: #e5f2f9;
}

.menu-link:hover::after{right:-10px}
.menu-link.selected{
  color:#0081C6;
    background: #e5f2f9;
}

#menu-lateral.menu.menu-senzill li.list-unstyled:not(:hover) .menu-link.selected {
    width: 100% ;
}
#menu-lateral.menu.menu-senzill li.list-unstyled:hover .menu-link {
    width: max-content;
}


.menu-ul {
  padding-left: 0;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.relative {
  position: relative;
}
.icon-logout {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/*CONTENT*/
.flex-direction-column {
    flex-direction: column !important;
}
.card-gray {
    background: #F5F5F5;
    border: 1px solid #CBCBCB;
    border-radius: 8px;
    padding: 20px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
}
.card-gray p {
    margin-top: 13px;
}
.card-gray input[type="radio"] {
    accent-color: #0081C6;
}
.content-box{
    padding: 1.5rem 32px;
    margin-bottom: 1rem;
    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    vertical-align: middle;
}
#header-data.content-box {
    padding-top: 0;
    padding-bottom: 0;
    padding: 0 32px;
}
.content-box .content-noticies {
  padding: 0;
  background: white;
  border-radius: 9px;
}
.content-box .box-noticia {
  padding: 1.5rem;
}
.content-box-transp {
  background-color: transparent;
  box-shadow: none;
}
.content-box.transp {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  vertical-align: middle;
  background-color: transparent;
  box-shadow: none;
}
.content-box-border {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background-color: #fff !important;
  vertical-align: middle;
  border: 1px solid #e8e8e8;
}
.content-box-border-gris {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background-color: #ebebeb !important;
  vertical-align: middle;
  border: 1px solid #888888;
}
.content-box.content-header {
  border-radius: 0;
  border-bottom: 2px solid #0070ba;
  margin-bottom: 0;
  justify-content: left;
}
.pagename {
  font-size: 1.2rem;
  font-weight: 700;
}
.pagename h4 {
    font-size: 1.6rem;
}

/* Header Breadcrumbs */
.header-breadcrumb {
    display: flex;
    align-items: center;
}
.header-breadcrumb .breadcrumb {
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    flex-wrap: nowrap;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.header-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    line-height: 1;
}
.header-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f054";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 0.6rem;
    color: #8c9bab;
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem;
    float: none;
}
.header-breadcrumb .breadcrumb-item a {
    color: #0070ba;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 1rem;
}
.header-breadcrumb .breadcrumb-item a:hover {
    color: #004d80;
    text-decoration: underline;
}
.header-breadcrumb .breadcrumb-item.active {
    color: #2d3748;
    font-weight: 700;
    font-size: 1rem;
}
.content{
    padding-left: calc(var(--menu-expanded-width, 210px) + 16px);
    transition: padding-left 0.5s;

}

.padding-box {
  padding-top: 80px;
  padding-bottom: 50px;
}
.nopadding {
  margin: 0;
  padding: 0;
  padding-right: 10px;
}
.nopadding-0 {
  margin: 0;
  padding: 0;
}
.padding-10 {
  padding: 15px;
}
.padding-10t {
  padding-top: 10px;
}
.padding-10b {
  padding-bottom: 10px;
}

/*SHADOW*/
.box-shadow {
  box-shadow: 0px 2px 8px #00000022;
}

/*HEADER*/
.header-link {
  font-size: 1rem;
}
.profile-img {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  box-shadow: 0px 3px 6px #00000029;
}

button.no-hover:hover {
    color: #0081C6 !important;
}

.hover-blue:hover {
  color: #0081c6;
  text-decoration: solid;
}
.pagetitle img {
  width: 25px;
}
.right-header {
  font-size: 18px;
}
/*.right-header i{margin-left: 10px;}*/
.notificaciones-top {
  display: inline;
  padding: 4px 7px;
  color: #000;
  border-radius: 5px;
}
.notificaciones-top span {
  background: #f00;
  color: #fff;
  font-weight: bold;
  padding: 3px;
  font-size: 10px;
  border-radius: 999px;
  position: absolute;
  right: 0px;
  line-height: 8px;
}
.notificaciones-top i {
  margin: 3px;
}
.usernameheader {
  font-size: 16px;
}
/*RESUM*/
.resum a {
  text-decoration: underline;
}
.dashboard-box {
  width: fit-content;
  margin: auto;
  display: table;
}
.message-box {
  height: 205px;
}
.sign-name {
  font-size: 2rem;
  font-weight: 700;
}
.remaining-signs {
  color: #0081c6;
  font-size: 2rem;
}
/* .remaining-signs > strong{
    font-size: 1.6rem;
} */
.strong {
  font-weight: bold;
}
.sign-number {
}

.sign-details,
.sign-details > a {
  padding-bottom: 15px;
  padding-top: 15px;
  font-size: 0.85rem;
}
.dashboard-img {
  width: 76px;
  margin-right: 25px;
}
.documents-img {
  width: 48px;
  margin-right: 25px;
}
.notifications-img {
  width: 56px;
}
.dashboard-title {
  font-size: 2rem;
  font-weight: 600;
}
.dashboard-number {
  font-size: 2rem;
  font-weight: 400;
  /* color: #5FC600; */
  color: #0081c6;
}
.box-noticia * {
  color: #213953;
  font-size: 16px;
}
.box-noticia .logo {
  max-width: 40px;
}
.box-noticia .title {
  font-weight: bold;
}
.box-noticia .link {
  font-weight: bold;
}
.box-noticia .data {
  font-size: 14px;
}
.notifications-number {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0081c6;
}
.btn-primary {
  background-color: #0081c6; !important
}
.btn-gray {
  background-color: #f1f1f1;
  color: #707070;
}
/*temporal*/
.temporal-sign {
  width: 25%;
  align-content: center;
  margin: 5%;
  position: absolute;
  top: 12.5%;
  margin-left: -12.5%;
}
/*CLIENTS*/
.add-client {
  font-weight: 600;
  font-size: 0.8rem;
  color: #383838;
}
.advanced-filter {
  text-decoration: underline;
  color: #444444;
  text-decoration-color: #444444;
  font-size: 0.6rem;
}
.client-img {
  width: 40px;
}
.edit-img {
  width: 20px;
  margin-left: 10px;
}
.eye-img {
  width: 20px;
  margin-left: 10px;
}
.circle{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
}

.circle-sm{
    width: 2px;
    height: 2px;
    border-radius: 50%;
    display: inline-block;
}
.circle-green,
.circle-Signed {
  background-color: rgb(16, 192, 0);
}
.circle-red,
.circle-Rejected {
  background-color: rgb(182, 0, 0);
}
.circle-orange,
.circle-Pending {
  background-color: rgb(255, 173, 21);
}
.circle-gray,
.circle-Unsigned {
  background-color: rgb(201, 201, 201);
}
.circle-blue {
    background-color: rgb(0, 129, 198);
}
.circle-black,
.circle-Deleted {
    background-color: rgb(0, 0, 0);
}
tr.active {
  background-color: #e1f1fa !important;
}
a.action {
  color: #555;
}
a.action:hover {
  color: #0081c6;
}

a.actionname {
  color: black;
}
a.actionname:hover {
  color: #0081c6;
  text-decoration: none;
}

/*PERFIL*/

.perfil .btn {
  color: white;
  padding: 10px 20px;
}
.upload-photo-button {
  color: #0081c6;
  margin-top: 20px;
  display: block;
}
.profile-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 700;
}
.profile-subtitle {
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 700;
}
.imgprofile img {
  border-radius: 500px;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15);
  width: 100%;
}
.profile-img-big {
  margin: auto;
  height: 200px !important;
  width: 200px !important;
}

.table-profile {
  border: 0px;
}
.table-profile th {
  background-color: #f5f5f5;
}

.table th {
    background: #0081C61A;
}
table.dataTable thead>tr>th.sorting:not(.sorting_asc):before, table.dataTable thead>tr>th.sorting:not(.sorting_desc):after {
    color: #212529;
    opacity: 0.6 !important;
}
.accordion-button{
    padding: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F1F1F1;
}
.content-box-border.big-button{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.backend-img-sm {
  margin: auto;
  height: 150px;
  width: 150px;
}
.change-image {
  color: #444444;
  font-size: 0.8rem;
  -webkit-appearance: media-slider !important;
}
.text-right > u {
  font-size: 1rem;
}
.border {
  border: 1px solid #ced4da;
}
.w-200 {
  width: 200px;
}
.w-250 {
  width: 250px !important;
}
.w-300{
    width: 300px !important;
}
.w-350 {
  width: 350px !important;
}
.w-400 {
  width: 400px;
}
.w-500 {
  width: 500px;
}
.w-600 {
  width: 600px;
}
.w-700 {
  width: 700px;
}
.w-80 {
  width: 100px;
}
.w-70 {
  width: 70px;
}
.w-60 {
  width: 60px;
}
.w-50 {
  width: 50px;
}
.w-50pc {
    width: 50%;

}
.w-40 {
  width: 40px;
}
.w-30 {
  width: 30px;
}
.w-20 {
  width: 20px;
}
.w-10 {
  width: 10px;
}
.h-200 {
  height: 100px;
}

.admin-color {
  width: 40px;
  height: 40px;
  background-color: #0081c6;
  border-radius: 10px;
  display: inline-block;
}
.select{
    background-color: #fff;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #CBCBCB;
}
.bootstrap-select .dropdown-toggle {
  padding: 0;
  bottom: 2px;
}
.bootstrap-select .dropdown-toggle::after {
  border: 0;
  height: 15px;
  width: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/magnifying-glass.svg);
}

.bootstrap-select .btn.dropdown-toggle:hover,
.bootstrap-select .btn.dropdown-toggle:active,
.show > .btn-light.dropdown-toggle {
  color: inherit !important;
  background-color: inherit;
  border: none;
}
.bootstrap-select .btn.dropdown-toggle:focus {
  outline: none !important;
  outline-offset: 0;
  box-shadow: none;
}
.bootstrap-select .btn {
  border-radius: 0;
}
.filter-option-inner-inner {
  color: #495057;
}

.content-box .select {
  /*background-color: #f9f9f9;*/
}
.content-box select,
.content-box input {
  background-color: #f9f9f9;
}
.form-div {
  width: fit-content;
  margin: auto;
}

.inputs {
  border-radius: 8px;
  border: 1px solid #ced4da;
  width: 100%;
  background-color: #f1f1f1;
}
.inputs-now {
  border-radius: 8px;
  border: 1px solid #ced4da;
  background-color: #fff;
  display: inline-block;
}
.content-box .select-clar,
.content-box .input-clar {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #CBCBCB;
  font-size: 1.25rem;
  color: #444444;
  margin-left: 0;
}
.inputs-no100 {
  border-radius: 8px;
  border: 1px solid #ced4da;
  background-color: #f9f9f9;
  width: fit-content;
  display: inline-block;
}
/*NOTIFICACIONS*/
.notifications_new .custom-input {
  padding: 15px;
}
.notifications-circle-big {
  width: 40px;
  height: 40px;
  background-color: #0081c6;
  display: inline-block;
  padding-top: 10px;
  font-weight: 600;
}
.not-circle {
  width: 15px;
  height: 15px;
  background-color: #0081c6;
}
.not-circle-empty {
  width: 15px;
  height: 15px;
  border: 2px solid #0081c6;
}
.not-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
}
.profile-button {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  color: #fff;
  width: 35%;
}

.notificacions thead {
  display: none;
}
/*FIRMAS*/

.excess,
.excess-detail {
  position: relative;
}
.excess::after,
.excess-detail::after {
  border: 1px solid #d21b1b;
  background-color: white;
  color: #d21b1b;
  font-size: 18px;
  font-weight: 300;
  width: 45px;
  height: 45px;
  font-family: "Font Awesome 6 Pro";
  content: "\f071";
  position: absolute;
  right: 5%;
  top: -100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.excess-detail::after {
  top: -300%;
  width: 40px;
  height: 40px;
}

.signatures a:hover {
  text-decoration: none;
}

.signature-title {
  font-size: 1.2rem;
  font-weight: 700;
}
.sign-title {
  font-size: 2rem;
  font-weight: 700;
}
.sign-title-blue {
  font-size: 2rem;
  color: #0081c6;
  font-weight: 700;
}
.sign-subtitle {
  font-size: 1.35rem;
  font-weight: 600;
}
.sign-subtitle-blue {
  font-size: 1.35rem;
  color: #0081c6;
  font-weight: 600;
}

.sign-subtitle-active {
  font-size: 1.35rem;
  color: #0081c6;
  font-weight: 600;
  border-bottom: 4px solid #0081c6;
}
.sign-subtitle-inactive {
  color: #707070;
  font-size: 1.35rem;
}

.sign-subtitle-select:hover {
  text-decoration: none;
}
.sign-subtitle-inactive:hover {
  color: #0081c6;
}

.info-circle {
  width: 15px;
}
.progressbar {
  height: 20px;
  background-color: #f1f1f1 !important;
}
.signatures-details .progressbar {
  height: 30px;
}
.light-darkblue {
  color: #0081c6;
}

.bg-light-darkblue {
  background-color: #0081c6 !important;
}
.custom-select,
.custom-input {
  padding: 1rem 0.75rem;
  height: auto;
}
.custom-select.dashboard-select,
.custom-select.dashboard-select .dropdown-toggle.btn-light {
  background: #0d5b81;
}
.bootstrap-select.dashboard-select .dropdown-toggle::after {
  background-image: url(../img/magnifying-glass_white.svg);
  height: 25px;
  width: 25px;
}

.custom-select.dashboard-select * {
  color: white;
}
.custom-select .dropdown-toggle.btn-light{
  background-color: #fff ;
  border: none;
}
.custom-toggle.dropdown-toggle::after {
  content: none;
}
.custom-select option {
  background-color: #fff;
  border: none;
}
.small-select {
  padding: 5px 10px;
}
.custom-select {
  background-image: url(../img/chevron-down.svg);
}
.panel-group p {
  margin-bottom: 0;
}

.box-icon {
  padding: 3px 6px;
  background: #ebebeb;
  border-radius: 5px;
}
.box-icon a {
  color: black;
}

/*SUSCRIPCIONES*/
.right-bottom {
  position: absolute;
  bottom: 0;
  right: 20px;
}
.hovercursor:hover{
    cursor: pointer;
    color: #0081C6 !important;
}
.hovercursor.hover-grey:hover {color:#999 !important;}

.hovercursor.white:hover{
    color: white !important;
}
.hovercursor.yellow:hover{
    color: #FCA500 !important;
}

/* CERTIFICADOS */
.certificats-info {
  margin-left: 15px;
}
.table-responsive {
  /*min-height: 40vh;*/
    overflow: visible !important;
    position: static !important;
}
.evidences {
  right: 0;
}
.black_anchor {
  font-size: 12px;
  color: #444444;
  text-decoration: underline;
}
h5.title {
  color: #0081c6;
}
h5.subtitle {
    font-size: 16px;
    font-weight: 400;
}
.tooltip.tooltiptext:not(.w-arrow) {
    font-family: 'Montserrat', Tahoma, Verdana, sans-serif;
    visibility: hidden;
    width: 400px;
    max-width: 30vw;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    opacity: 1;
    padding: 35px 25px;
    font-size: 1.1rem;
    line-height: 1.3rem;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
.tooltip.tooltiptext.w-arrow{
    width: 400px;
    visibility: hidden;
    border: 1px solid #f1f1f1;
    font-size: 1.1rem;
    line-height: 1.3rem;
    position: absolute;
    z-index: 1;
    left: 105%;
    top: 25%;
    transform: translateY(0);

}

.tooltip.tooltiptext.w-arrow.small {
    width: 250px;
}

.blue-header {
    width: 100%;
    height: 24px;
    background: #0081C6;
}
.modal-action .btn.btn-middle-gray {
  background-color: #ededed;
  color: #707070;
  border: 1px solid #cbcbcb;
  font-weight: bold;
}
.right-float-icon {
  position: relative;
}
.right-float-icon i {
  position: absolute;
  right: 15px;
  top: 20px;
}
.right-float-icon input {
  padding-right: 45px;
}
.right-float-icon label > span {
  padding-right: 35px;
}
.modal-action .btn {
  color: white;
  padding: 10px 20px;
}
.modal-action .btn.btn-gray {
  background-color: #f1f1f1;
  color: #707070;
}
.modal-mail .modal-content {
  background: #f1f1f1;
}
.mail-content {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  margin-top: 20px;
  padding: 15px 20px;
}
.cnt-input-mail {
  display: inline-flex;
  width: 100%;
  margin-top: 10px;
  align-items: center;
  justify-content: space-between;
}
.mail-input {
  border: 1px solid #cbcbcb;
  border-radius: 8px;
  padding: 5px 15px;
  background: #f9f9f9;
}
.cnt-input-mail-content > div {
  background: #f9f9f9 0% 0% no-repeat padding-box;
  border: 1px solid #cbcbcb;
  border-radius: 8px;
  padding: 5px 10px;
  margin-top: 10px;
}
.float_icon_right {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateX(100%);
}
.num-round {
  float: right;
  border: 1px solid #0081c6;
  border-radius: 99px;
  height: 25px;
  width: 25px;
  margin-left: 10px;
  top: -5px;
  right: -20%;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  color: #0081c6;
}
ol {
  margin-bottom: 0;
}

ol li {
  margin: 5px 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  opacity: 1 !important;
}

.tooltip .tooltiptext {
  font-family: "Montserrat", Tahoma, Verdana, sans-serif;
  visibility: hidden;
  width: 400px;
  max-width: 30vw;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  opacity: 1;
  padding: 35px 25px;
  font-size: 1.1rem;
  line-height: 1.3rem;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.small-tooltip {
  left: 10px !important;
}
.small-tooltip[data-popper-placement="bottom"] {
  top: 15px !important;
}
.tooltip.white-tooltip {
  border-bottom: none;
}
.tooltip.white-tooltip .tooltip-inner {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  color: #444444;
}
.tooltip.white-tooltip .arrow {
  top: 6px;
  left: -5px;
  width: 10px;
  height: 10px;
  box-shadow: none;
}
.tooltip.white-tooltip[data-popper-placement="bottom"] .arrow {
  left: 25%;
  top: -5px;
}
/*DOCUMENTOS*/
.documents tr.active {
  background-color: #0081c6 !important;
  color: #fff;
}
.filter {
  color: #7f7f7f;
}
.filter:hover {
  color: black;
  text-decoration: none;
  font-weight: 700;
}
.document-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}
.document-filter {
  color: #444444;
  font-size: 0.6rem;
}
.documents-title {
  font-size: 1.35rem;
  margin-bottom: 10px;
  font-weight: 700;
}
.documents-title-regular {
  font-size: 1.35rem;
  margin-bottom: 10px;
  font-weight: 500;
}
.documents-subtitle-regular {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 500;
}
.documents-subtitle {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 700;
}
table.content-box {
  padding: 0;
}
table.content-box-border {
  padding: 0;
}
.table td,
.table th {
  font-size: 1rem;
  border: 0px;
  vertical-align: middle;
}
/* .table th { font-size: 1.3rem; border:0px; } */
.table thead th, .table td {padding:7px 0.75rem;}

.dataTables_processing{
  z-index: 99;
}
.dataTables_processing > div {
  display: none;
}
.dataTables_processing > img {
  height: 100px;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2);
}

.dataTables_length select {
  padding: 5px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #cbcbcb;
}
.sorting_desc:after {
  color: #0081c6;
}
.sorting_asc:before {
  color: #0081c6;
}

.pages {
  color: #7f7f7f;
}
.currentpage {
  color: black;
}
.pages:hover {
  color: black;
  text-decoration: none;
  font-weight: 700;
}
.dataTables_paginate,
.dt-buttons {
  text-align: right;
  width: 50%;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
}
.dataTables_info,
.dataTables_length {
  width: 50%;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
}
.pagination {
  justify-content: flex-end;
}
.dt-button {
  color: #0081c6;
  background-color: transparent;
  border: none;
}
.dt-button .text {
  text-decoration: underline;
}
.dt-button:hover {
  opacity: 0.8;
}
.documentdetail td,
.documentdetail th {
  padding: 0.5rem;
}

.btn {
  border-radius: 8px;
  color: #ffffff;
  font-weight: 400;
  font-size: unset;
  padding: 11px 34px;
}
.btn.c-white {
  color: white;
}
.btn:hover{
    color: white !important;
}
.btn.custom-btn:focus {
  box-shadow: none;
}
.btn.custom-btn:hover {
  color: initial !important;
}
.btn-outline-secondary {
  border-color: #7DB958;
}
.btn-outline-secondary:hover {
  background-color: #7DB958;
}

.btn-outline-secondary.unsigned {
  border-color: #888888;
}
.btn-outline-warning {
  border-color: #ffa500;
}
.btn-outline-warning:hover {
  background-color: #ffa500;
}
.btn-outline-danger {
  border-color: #d21b1b;
}
.btn-outline-danger:hover {
  background-color: #d21b1b;
}
.btn-outline-secondary:hover i,
.btn-outline-warning:hover i,
.btn-outline-danger:hover i {
  color: white !important;
}



/* MODAL */
.hiddenModal.hidden {
  display: none;
}
.hiddenModal {
  /*position: absolute;*/
  z-index: 9999;
  text-align: left;
  font-size: 0.8rem;
}
.hiddenModal .arrow {
    left: calc(100% + 4px);
    box-shadow: none;
    border-left: 1px solid #0081C6;
    border-bottom: 1px solid #0081C6;
    z-index: 7;
}
.hiddenModal-certificate .arrow{
    /* right: -55px; */
    top: -5px;
}
.hiddenModal-device .arrow{
    /* right: -55px; */
    top: -25px;
    left: calc(100% + 16px);
}
.hiddenModal-recordatori .arrow {
  top: 0;
  border-right: 1px solid #bbb;
  border-top: 1px solid #bbb;
  right: 50%;
  transform: translateX(50%) rotate(45deg);
  z-index: 5;
}
.icon-right {
  float: right;
}
.certificate-info, .user-info, .subscr-info{
    left: calc(100% + 13px);
}
.signer-info {
    right: calc(100% + 13px);
}

.evidences, .user-info, .certificate-info, .subscr-info, .recordatori-info, .sidebar-info, .device-info{
    position: absolute;
    background: white;
    padding: 5px;
    padding: 5px 15px;
    width: max-content;
    top: -10px;
    /*border: 1px solid #bbb;*/
    z-index: 7;
}
.user-info-content {
    border: 1px solid #bbb;
    border-top: none;
}

.device-info {
    left: calc(100% + 25px); !important;
    top: -29px; !important;
}




.recordatori-info, .sidebar-info {
  padding: 0;
  right: 50%;
}
.recordatori-info .header, .sidebar-info .header{
  background: #0081c6;
  padding: 5px 10px;
}
.recordatori-info .header p.title, .sidebar-info p.title{
  color: white;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;
  margin-right: 15px;
}

.content-evidences,
.user-info-content,
.recordatori-info-content, .sidebar-info-content {
  padding-top: 10px;
  height: fit-content;
  /* overflow-y: scroll; */
    padding: 15px;
    background: white;
}
.custom-multiselect .user-content {
    position: relative;
    max-height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #ced4da;
}
.custom-multiselect .user-content .dropdown-menu {
    display: block !important;
    position: initial !important;
    transform: translate(0) !important;
    border: none;
    border-top: 1px solid #ced4da;
    border-radius: 0;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect {
    display: flex;
    flex-direction: column-reverse;
}
.disabled .custom-multiselect .user-content .dashboardcode-bsmultiselect .dropdown-menu {
    display: none !important;
}
.disabled .custom-multiselect .user-content {
    overflow: hidden;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .dropdown-menu li {
    padding-left: 10.5px !important;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .form-control {
    padding-right: 45px;
    border: none;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .form-control li {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #212529;

}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .form-control li .close {
    opacity: 1;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .form-control li .close:before {
    content: "\f2d3";
    color: #0081C6;
    font-family: 'Font Awesome 6 Pro';
    margin-right: 7px;
    font-weight: 300;
    line-height: 1;
    font-size: 16px;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .form-control li .close span {
    display: none;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .form-control li:last-of-type {
    display: none;
}
.custom-multiselect .user-content .custom-switch {
    position: absolute;
    right: 5px;
    top: 5px;
}
.custom-control-label {
    font-size: 16px;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .custom-control-label::before {
    border-color: #0081C6;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .custom-control-input:checked ~ .custom-control-label::before {
    background: transparent;
    border-color: #0081C6;
}
.custom-multiselect .user-content .dashboardcode-bsmultiselect .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%230081C6' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/></svg>");
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
.user-content {
    scrollbar-width: auto;
    scrollbar-color: #6e6d6f #ffffff;
}

/* Chrome, Edge, and Safari */
.user-content::-webkit-scrollbar {
    width: 8px;
}

.user-content::-webkit-scrollbar-track {
    background: #ffffff;
}

.user-content::-webkit-scrollbar-thumb {
    background-color: #6e6d6f;
    border-radius: 15px;
    border: 3px solid #ffffff;
}



.recordatori-info-content *, .sidebar-info-content * {
  font-size: 1rem;
}
.sidebar-info-content a.small {
    font-size: 80%;
}
.recordatori-info-content input[type="radio"].form-check-input, .sidebar-info-content input[type="radio"].form-check-input{
  margin-left: 0;
}
.recordatori-info-content .checkbox-label{
  margin-left: 20px;
  margin-top: 0.15rem;
}
.sidebar-info-content .checkbox-label{
    margin-left: 25px;
    margin-top: 0;
}

.recordatori-info {
  padding: 0;
  right: 50%;
}
.recordatori-info .header {
  background: #0081c6;
  padding: 5px 10px;
}
.recordatori-info .header p.title {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;
  margin-right: 15px;
}

.content-evidences::-webkit-scrollbar {
  width: 1px;
  background-color: #fff;
}
.container-body::-webkit-scrollbar {
    width: 5px;
    background-color: #fff;
}


.content-evidences::-webkit-scrollbar-thumb {
  background-color: #000000;
}
.container-body::-webkit-scrollbar-thumb {
    border: 2px solid #ffffff;
    background-color: #000000;
}
.arrow {
    position: absolute;
    background: #0081C6;
    width: 19px;
    height: 19px;
    transform: rotate(45deg);
    top: -25px;
    right: -7px;
    box-shadow: 0px 3px 6px #00000029;
}
.arrow-signer {
    position: absolute;
    background: #0081C6;
    width: 19px;
    height: 19px;
    transform: rotate(45deg);
    top: -25px;
    right: -7px;
    box-shadow: 0px 3px 6px #00000029;
}
.white-tooltip .arrow {
    background: #FFFFFF;
}
.inside-evidence p {
  margin-bottom: 0;
}
.inside-evidence {
  border-bottom: 1px solid lightgray;
  padding: 7px 0px;
  margin: 0 5px;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 3px solid #f1a899 !important;
}
.modal-content {
  border-radius: 8px;
}
.modal-dialog {
  margin: 5rem auto;
}
.no-border {
  border: 0 !important;
}
h2.swal2-title {
  font-size: 1.3rem !important;
}
.swal2-styled.swal2-confirm {
  padding: 15px 20px;
  background-color: #0081c6 !important;
  font-size: 1.25rem !important;
}
.swal2-styled.swal2-cancel {
  padding: 15px 20px;
  background-color: transparent !important;
  font-size: 1.25rem !important;
  text-decoration: underline;
  color: black !important;
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: none !important;
}
.btn-primary.btn-primary-modal {
  width: 100%;
}
.alert .material-icons {
  display: none;
}
.alert .close {
  opacity: 1 !important;
  cursor: pointer;
}
.alert[data-notify="container"] {
  width: 100% !important;
  /*position: absolute !important;*/
  top: 85px !important;
  /* left: 0; */
}
.alert .close:before {
  height: 20px;
  width: 20px;
  content: url(../fontawesome6/svg/light/circle-xmark.svg);
  position: absolute;
  /*left: -1.5rem;*/
  right: 15px;
}
.alert.alert-warning .close:before, .alert.alert-danger .close:before {
    left: -1.5rem !important;
}

.alert.alert-success .close:before {
  content: url(../fontawesome6/svg/light/circle-xmark_white.svg);
}
.alert-warning .close:before, .alert.alert-danger .close:before {
  left: 0.5rem;
}
.alert.alert-success {
    background: #64AA2F;
    border-color: #64AA2F;
    color: white;
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 999;
    width: calc(100% - 28px);
}
.alert.alert-warning, .alert.alert-danger {
    z-index: 9999;
    width: fit-content;
    min-width: fit-content;
    margin-top: 0!important;
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 999;
    width: calc(100% - 28px);
}
.resum.dashboard .alert.alert-warning {
    z-index: 9999;
    width: min-content;
}
.resum.dashboard .alert.alert-warning .close:before {
    margin-left: 10px;

}
.recordatori-info .alert.alert-warning {
    z-index: 9999;
    width: fit-content;
    min-width: fit-content;
    position: fixed;
    top: 0;
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 0!important;
    padding-right: 45px;
}


.alert.alert-warning .close .span, .alert.alert-danger .close .span{
    display: none;
}


.alert-info-custom-groc{
    background-color: var(--groc-alert-trans);
    color: #444444;;
    border: 1px solid var(--groc-alert);
}

.alert-info-custom-blau{
    background-color: var(--blau-trans);
    border: 1px solid var(--blau-primari);
    color: #444444;;
}







/* TAULES */

table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
  padding-right: 30px;
  position: relative !important;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_desc_disabled:after {
    content: "\f078" !important;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    /* right: 16px; */
    font-size: 0.9rem;
    bottom: 15% !important;
    /* bottom:2px; */
    /*right: 5px !important;*/
}
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc_disabled:before {
    /* right: 1em; */
    content: "\f077" !important;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 0.9rem;
    bottom: 45% !important;
    /* bottom:14px; */
    /*right: 5px !important;*/
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  position: absolute;
  display: block;
  opacity: 0.3;
}
.sorting_asc:before {
  opacity: 1 !important;
}
.sorting_desc:after {
  opacity: 1 !important;
}
.sorting_asc,
.sorting,
.sorting_desc {
  cursor: pointer;
}
.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #0081c6;
  background-color: #fff;
  border: 1px solid #eee;
}
.page-item.active .page-link {
  background-color: #0081c6;
  border-color: #0081c6;
}
.page-item:last-child .page-link {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.page-item:first-child .page-link {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.pointer {
  cursor: pointer;
}
.no-pointer {
    cursor: initial;
}
.no-decoration {
    text-decoration: none !important;
}
.custom-control-label::before,
.custom-file-label,
.dataTables_length .custom-select {
  display: inline;
  float: left;
}

.paginate_button {
  background-color: #f1f1f1;
  color: #555;
  padding: 10px;
  margin: 3px;
  border-radius: 4px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: 1px solid #ffffff;
}
.paginate_button:hover {
  background-color: #f1f1f1;
  color: #0081c6;
  text-decoration: none;
  border: 1px solid #0081c6;
}
.paginate_button.current {
  color: #0081c6;
  border: 1px solid #0081c6;
}
.paginate_button.disabled {
  display: none;
}

/* Responsive */
header {
  display: none;
}
@media only screen and (max-width: 600px) {
  .site-link {
    margin-left: 0px;
    margin-top: 5px;
  }
  header {
    display: block;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 10px;
  }
  .menu {
    display: none;
    z-index: 999;
    width: 100vw;
    height: 100vh;
  }
  .content-box {
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .content {
    padding-left: 0px;
  }
  .nomob {
    display: none;
  }
  .copyright-menu {
    padding-bottom: 10px;
  }
  .filters {
    display: inline-block;
    margin-top: 10px;
  }
  .filters select,
  .filters input {
    width: 100%;
    margin-left: 0px;
    margin-top: 5px;
  }
}
@media (max-width: 1425px) and (min-width: 1025px) {
  .canvas_container.vertical .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 15px;
  }
}
@media (max-width: 1025px) {
  .wrapper {
    /*min-height: 35vh !important;*/
  }
  .canvas_container.vertical .cnt-canvas,
  .canvas_container.vertical .wrapper {
    /*min-height: 25vh !important;*/
  }
  .canvas_container.vertical .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
}
@media (max-width: 1225px) and (min-width: 1025px) {
  .wrapper {
    /*min-height: 45vh !important;*/
  }
  .canvas_container.vertical .cnt-canvas,
  .canvas_container.vertical .wrapper {
    /*min-height: 30vh !important;*/
  }
}
@media (max-width: 1425px) and (min-width: 1225px) {
  .wrapper {
    /*min-height: 50vh !important;*/
  }
  .canvas_container.vertical .cnt-canvas,
  .canvas_container.vertical .wrapper {
    /*min-height: 30vh !important;*/
  }
  /* .canvas_container.vertical .wrapper {
    min-height: initial !important;
} */
}
@media (min-width: 576px) {
  .modal-dialog.modal-md-custom {
    max-width: 600px;
  }
}

/* OTROS */

.text-warning {
  color: #ffa500 !important;
}
section {
  padding: 0 1rem;
}
.nom_doc {
  font-weight: 400;
}

.date-cnt {
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 1rem;
}
.no-bg {
  background-color: transparent;
  box-shadow: none;
}

/* Filters */

.filter-item {
    padding: 6px 8px;
    border: 1px solid #CBCBCB;
    border-radius: 8px;
    background: #f9f9f9;
    align-items: center;
}
.filter-item p { font-weight: 600; margin-bottom: 0; }
.fa-circle-xmark{
  cursor: pointer;
}
table .fa-circle-xmark{
 cursor: initial;
}

.panel-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.panel-title .icon-accordion:before {
  /* content: "\f067"; */
  content: "\f077";

  font-family: 'Font Awesome 6 Pro';
  font-weight: 800;
}
.accordion-button .icon-accordion:before{
    /* content: "\f067"; */
    content: "\f077";

    font-family: 'Font Awesome 6 Pro';
    font-weight: 800;
}
.panel-title.accordion-filter.collapsed .icon-accordion:before {
    content: "\f078";
}
.accordion-button.collapsed .icon-accordion:before {
    content: "\f078";
}
.table thead th {
    vertical-align: middle;
}
/*.panel-title a.collapsed .icon-accordion:before {*/
/*  !* content: "\f068"; *!*/
/*  content: "\f078";*/
/*}*/

.panel-title > a:hover,
.panel-title > a:active,
.panel-title > a:focus {
  text-decoration: none;
}

.panel-title-form:not(.collapsed) .panel-title-form:not(.title) .fa-chevron-down::before {
  content: "\f077";
}
.panel-group:not(.collapsed) .panel-title-form.title i:before{
  content: "\f077";
}

.file-area {
  width: 100%;
  position: relative;
}
.file-area input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}

.file-dummy {
  width: 100%;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  /* text-align: center; */
  transition: background 0.3s ease-in-out;
  border-radius: 10px;
}
.file-dummy.punts {
    border: 1px dashed #707070;
}


.file-area::hover .file-dummy {
  background: rgba(255, 255, 255, 0.1);
}

input.external-client {
    background: #F1F1F1;
    border: 1px solid #CBCBCB;
    border-radius: 0;


}
input[type=file]:focus + .file-dummy {
  outline: 2px solid rgba(255,255,255,0.5);
  /* outline: -webkit-focus-ring-color auto 5px; */
}

input[type="file"]:valid + .file-dummy {
  border-color: #707070;
  background-color: #f1f1f1;
  display: none;
}
#import-contacts .import .loading,
#import-contacts .import .success {
  display: none;
}
#import-contacts.loading .import .loading {
  display: block;
}
#import-contacts.loading .import .default {
  display: none;
}

#import-contacts.success .import .success {
  display: block;
}
#import-contacts.success .import .loading {
  display: none;
}

input[type="file"]:valid + .dummy-content .success {
  display: inline-block;
}

input[type="file"]:valid + .dummy-content {
  text-align: center !important;
}

input[type="file"]:valid + .dummy-content .default {
  /* display: none; */
}

.file-dummy.file-update {
  width: 50%;
  padding: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
}
.canvas_container .cnt-canvas {
  /*position: absolute;*/
  height: 100%;
  width: 100%;
  /* padding: 2%; */
  /* border: 1px solid #707070; */
}
.canvas_container {
  /* display: inline-flex; */
}
.canvas_container.vertical {
  display: inline-flex;
  width: 100%;
}

.canvas_container.vertical .wrapper {
  min-height: initial;
}
.canvas_container.vertical .cnt-canvas {
  /*min-height: 30vh;*/
  position: initial;
}
#overlay1,
#overlay2,
#overlay3 {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  /*height: 100%;*/
  /*min-height: 55vh;*/
}

.wrapper .cnt-canvas {
  border: 2px solid #707070;
}
.wrapper .img-canvas {
    float: left;
    border-style: solid;
    border-color: #707070;
    border-width: 2px;

}
.wrapper.selected .cnt-canvas, .wrapper.selected .img-canvas {
    border-color: #0081c6;
}
.draggable {
  left: 20px;
  top: 20px;
  width: 105px;
  height: 37px;
  outline: 2px solid #707070;
  position: absolute !important;
  z-index: 999;
  background: #0081c640;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: none;
}
.draggable.signant .overlay {
    font-size: 30px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}
.draggable.signant .overlay {
    background: #0081c640;
}
.draggable.extra{ border-radius: 4px}
.draggable.extra .overlay {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 5px;
    color: #444;
}
.draggable.extra .overlay {
    background: #0081c640;
}
.draggable.form {
  outline: none;
  border: 1px solid #64AA2F;
}

.draggable.form .arrows-draggable {
  display: none;
}
.draggable {
  font-size: 14px;
  /*border-radius: 8px;*/
  font-weight: 400;
  justify-content: left;
  /*padding-left: 7px;
  padding-left: 25px;*/
  top: 0;
  position: absolute;
  min-height: 20px;
  cursor: initial;
}
.draggable.form {
    background-color: #64AA2F80;
}
.handle-drag, .close-draggable {
  cursor: pointer;
}
.draggable.selected {
  /*padding-left: 25px;*/
  outline: none;
  background-color: #64AA2F80;
  border: 1px solid #64AA2F;
}
.draggable:not(.selected) .text-draggable{ display: none}
.draggable.selected .text-draggable{
    display: inline-flex;
    align-items: center;
}
.draggable.form i.close-draggable::before,
.draggable.signant i.close-draggable::before{
  /*font-size: 1rem;*/
  /*line-height: 0.75rem;*/
  color: #0081C6;
}
.draggable .text-draggable {
  position: absolute;
  bottom: 100%;
  left: -1px;
  transform: translateY(-1px);
  width: 250px;
  background: #EDEDED;
  border: 1px solid #CBCBCB;
  color: black;
  padding: 3px 4px;
  /*padding-left: 4px;*/
}

.draggable:not(.form) {
  color: #0081c6;

  border: 1px solid #0081c6;
  background: #0081c640;
}

.form-content.group-content {
    padding: 7px 15px;
}

/*.group-content.collapsed .accordion,*/
.group-content.collapsed .accordion .camps {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-out !important;
}
/*.group-content.collapsed.in .accordion,*/
.group-content.collapsed.in .accordion .camps{
    max-height: 1400px;
    height: auto;
    transition: max-height 1s ease-out !important;
    overflow-y: scroll;
}

.contingutFormulari.collapsed:not(.in) .accordion {
    max-height: 0 !important;
    overflow: hidden;
    transition: max-height 1s ease-out !important;
}
.contingutFormulari.collapsed.in .accordion {
    /*height: 100%;*/
    max-height: 1000px;
    height: auto;
    transition: max-height 1s ease-out !important;
}

#buttons-clients,
#buttons-formularis {
  display: inline-flex;
}
#cnt-clients .user,
#cnt-formularis .formulari {
  margin-right: 5px;
}
.camps.optionsSelected select option[value="Selector opcions"] {
    display: none;
}
.round {
  /* margin: 5px 0;
  display: inline-block;
  padding: 20px;
  background: #888888;
  border-radius: 99px;
  color: white;
  background-color: #25a11a;
  width: 61px;
  height: 61px;
  text-align: center;*/
}
.round.round-sm {
  width: 35px;
  height: 35px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 7px;
  background: #0081c6;
  font-weight: bold;
  border-radius: 99px;
  color: white;
}
.round.verd {
  /*background-color: #25a11a;*/
}
.round.vermell {
  /*background-color: #d55858;*/
}

.send-to .btn,
.modal-add-contact .btn {
  color: white;
  padding: 10px 20px;
}
.send-to .btn-gray,
.modal-add-contact .btn-gray {
  color: #707070;
}

.modal-add-contact #modalHeader,
.contacts #modalHeader {
  padding: 0 3rem;
  padding-top: 2rem;
}
.modal-add-contact #modalBody {
  padding: 0 3rem;
  padding-bottom: 2rem;
}
/*.draggable:not(.form) .close-draggable {
  position: absolute;
  top: 4px;
  right: 3px;
  font-size: 0.7rem;
  color: #444444;
  width: 25px;
  height: 25px;
  left: 0;
}*/
/*.draggable.form .close-draggable { margin: 0 5px}*/
.draggable.form[resize='east']:after {
  content: "\f337";
  position: absolute;
  line-height: 15px;
  font-size: 15px;
  font-family: 'Font Awesome 6 Pro';
  right: 3px;
  bottom: 0;
}
.draggable:not(.form) .close-draggable:before {
  /*left: 3px;*/
  /*position: absolute;*/
}
.arrows-draggable {
  position: absolute;
  top: 4px;
  left: 3px;
  font-size: 0.7rem;
  color: #444444;
}

.send-to .canvas_pagination .disabled {
  display: block;
  opacity: 0.5;
}
.send-to .canvas_pagination .disabled:hover {
  border-color: transparent;
  cursor: initial;
  color: #555;
}
.send-to .canvas_pagination .paginate_button:focus {
  outline: none;
}

.full-table .dataTables_length,
.full-table .dataTables_info {
  padding: 0 20px;
}

.dropdown-menu {
  margin-left: -0.75rem;
  transition: none;
}
.contacts .dropdown-menu {
  left: unset !important;
  right: 0;
  box-shadow: 0 0px 15px -5px rgb(177, 177, 177);
}
.right-header .dropdown-menu {
  margin-left: initial;
  margin-top: 0;
  padding-top: 10px;
  left: unset !important;
  right: 0;
  /*width: 120%;*/
  /*transform: translate3d(-6px, 40px, 0px) translateX(-20%) !important;*/
  z-index: -1;
  box-shadow: 0 0px 15px -5px rgb(177, 177, 177);
}

.right-header .dropdown-menu li {
  padding: 3px 7px;
  font-size: 1.1rem;
    padding-left: 10px;
    padding-right: 15px;
}
.right-header .dropdown-menu li .menu-cnt-icon {
  /*min-width: 20px;*/
}
.right-header .dropdown-menu li.li-content:hover,
.btn-group .dropdown-menu li.li-content:hover {
  background: #e5f2f9;
}
.right-header .dropdown-menu .li-content:hover *,
.btn-group .dropdown-menu .li-content:hover * {
  color: #0081c6;
}
.topnav {
    display: inline-flex;
    width: 100%;
}
.topnav .li-content a {
  float: none;
  text-align: start;
}

.topnav .btn-group {
  border-bottom: 3px solid transparent;
}
.topnav .btn-group:hover {
  border-bottom: 3px solid #0081c6;
  transition: all 1ms;
  border-radius: 0;
}

.full-table {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.full-table .table thead th {
  border-bottom: 1px solid #979797;
}
#clientsTable,
#sendToTable {
  border: none;
}
.full-table .dataTables_paginate,
.full-table .dt-buttons {
  padding-right: 20px;
}

th.checkbox::after,
th.checkbox::before {
  display: none !important;
}

.small-table .dataTables_length,
.small-table .dt-buttons,
.small-table .dataTables_paginate,
.small-table .dataTables_info {
  display: none;
}
.small-table .table-responsive {
  border: 1px solid #707070;
}
#main_sendto .table-responsive {
  /*min-height: 30vh;*/
}
a.gris {
  color: #787878;
}

.documents-title-regular a {
  color: #212529;
}
.documents-title-regular a:hover {
  text-decoration: none;
}
.text-button {
  border: none;
  background-color: transparent;
  display: flex;
  margin: auto;
  font-weight: bold;
}
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #0081C6;
    background: #0081C6;
}
.text-button {
  border: none;
  background-color: transparent;
  display: flex;
  margin: auto;
  font-weight: bold;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: #0081c6;
}
.form-floating .btn {
  padding: 0;
  color: #495057;
}
/* Corregit: Els selects no tenen atribut value, el label sempre ha d'estar amunt quan hi ha opcions */
.form-floating > .form-select ~ label,
.form-floating > .custom-select ~ label {
  transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
  color: #0081c6;
}
.form-floating > .form-select:focus ~ label,
.form-floating > .custom-select:focus ~ label {
  color: #0081c6;
}
/* Fix específic per sign_by_certificate - evitar solapament label amb opció seleccionada */
#sign_by_certificate {
  padding: 0.5rem 0.75rem;
  height: auto;
  font-size: 0.9rem;
}
.form-floating > #sign_by_certificate ~ label {
  transform: scale(0.85) translateY(0.4rem) translateX(0.15rem);
  color: #0081c6;
  background: white;
  padding: 0 0.5rem;
  white-space: nowrap;
  height: auto;
  line-height: 1.2;
}

.field-disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  background-color: #e9ecef !important;
  color: #6c757d !important;
}

#show-emails {
  margin-left: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 8px 7px;
  min-height: 27px;
}
.tag-email {
  margin-left: 0;
  margin-right: 10px;
  background: #cce5ff61;
  border: 1px solid #007bff;
}
.checkbox-content input {
  margin-right: 15px;
}
.checkbox-content label {
  margin-bottom: 0;
}
#show-emails.inputs-now {
  padding: 1rem 0.75rem;
}
#show-emails .tag {
  margin-top: 5px;
}

input[type="date"].date_input::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background: url(../img/calendar-day.svg) no-repeat;
  color: #707070;
  width: 20px;
  height: 20px;
  border-width: thin;
}

/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: auto; /* Enable vertical scroll */
  padding-top: 65px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    z-index:1000;
}
.sidebar-document {
  padding-top: 0;
}


/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 60px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.sidebar-document {
  padding-top: 0;
}


/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 60px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.sidebar-document {
  padding-top: 0;
}


/* The sidebar links */
.sidebar a:not('.updateLink')  {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 60px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s; /* If you want a transition effect */
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}


.sidebar .recordatori-info .header, .sidebar .sidebar-info .header {
  padding: 1rem;
height: 45px;
}
.sidebar .recordatori-info .btn, .sidebar .sidebar-info .btn {
  color: white;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s; /* If you want a transition effect */
  padding: 20px;
}
.dashboard .blue-box {
  background: #0f76a8;
}
.dashboard .green-box {
  background: #31c675;
}
.dashboard .yellow-box {
  background: #feaa2b;
}
.dashboard .red-box {
  background: #ff6b4d;
}
.dashboard .light-blue-box {
  background: #3294a9;
}
.dashboard .dark-blue-box {
  background: #4e6277;
}
.dashboard .custom-box {
  border-radius: 8px;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
}
.dashboard .box-content {
  margin-top: 10px;
}
.dashboard .custom-box * {
  color: #fff;
}
.dashboard .icon {
  font-size: 78px;
  margin-left: auto;
  position: absolute;
  right: 2rem;
  bottom: 1rem;
}
.dashboard .box-small .icon {
  font-size: 30px;
  right: 1rem;
}
.dashboard .box-small p {
  z-index: 6;
}
.dashboard .blue-box .icon {
  color: #0d5b81;
}
.dashboard .green-box .icon {
  color: #1d9152;
}
.dashboard .red-box .icon {
  color: #e42700;
}
.dashboard .yellow-box .icon {
  color: #a76e19;
}
.dashboard .light-blue-box .icon {
  color: #206371;
}
.dashboard .dark-blue-box .icon {
  color: #213953;
}
.dashboard .custom-box .title {
  font-size: 40px;
  font-weight: 700;
}
.dashboard .box-small .title {
    font-size: 34px;
    font-weight: 700;
}
.dashboard .custom-box .subtitle {
  font-size: 18px;
  font-weight: 700;
}
.dashboard .box-small .subtitle {
  font-size: 14px;
  font-weight: 700;
}
.dashboard .custom-box .text {
  font-size: 18px;
  font-weight: 400;
}
.dashboard .box-small .text {
  font-size: 14px;
  font-weight: 400;
}
.dashboard .box-small p {
  margin: 0;
}
.dashboard .custom-box .dropdown * {
    color: #444;
}

.dashboard .custom-box .dropdown-toggle {
    background-color: #f9f9f9;
}

.icon-container {
  display: flex;
  margin-top: auto;
}
.icon-container p {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  z-index: 9;
}
.dashboard .boxes-box {
  height: 100%;
  margin-left: 15px;
  margin-right: 15px;
}
.dashboard .boxes-box .row {
  height: 50%;
}
.dashboard .boxes-box .col-6 {
  padding: 0;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}




.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s; /* If you want a transition effect */
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}

.sidebar .recordatori-info, .sidebar .sidebar-info {
  right: 0;
  position: initial;
  width: 100%;
  height: 100%;
  border-bottom: none;
  border-top: none;
}


#changeFile {
  text-decoration: underline;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 1;
}

#main_sendto p:not(.ubicacio) {
  font-size: 1.2rem;
}
#main_sendto p.recuperarTemplate {
    font-size: 1rem;
}

#main_sendto input{
    font-size: 1rem;

}
#main_sendto textarea {
  font-size: 1.2rem;
}
#main_sendto .form-floating:not(:has(.custom-select)) > label {
  font-size: 1.2rem;
}
#main_sendto .checkbox-content label {
  font-size: 1.2rem;
}
.inline-flex {
  display: inline-flex;
}
.senderHidden {
  height: 100%;
  align-items: center;
  display: flex;
  margin-left: 15px;
}

.custom-control-input.custom-green:checked ~ .custom-control-label::before {
    border-color: #0081C6;
    background-color: #0081C6;
}
.custom-control-input.custom-green:not([disabled]) ~ .custom-control-label::before,
.custom-control-input.custom-green:not([disabled]) ~ .custom-control-label::after {
    cursor: pointer;
}
html:has(.templates) {
  background: white;
}
.no-shadow {
  box-shadow: none;
}
@media (min-width: 1400px) {
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }

  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}
.round-select {
  border-radius: 20px;
  padding: 5px 10px;
}

.hiddenText {
  -webkit-text-security: disc; /* Safari y Chrome */
  -moz-text-security: disc; /* Firefox */
  text-security: disc; /* Estándar */
}

/* notices */
.notices {
    border: 2px solid #0070BA;
    border-top: none;
    position: absolute;
    background: white;
    right: 0;
    padding: 0;
    padding-left: 30px;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
    max-height: calc(100vh - 61px);
    z-index: 10;
    min-height: calc(100vh - 61px);
    position: sticky;
    top: 61px;
}
.notices .fa-forward {
  display: none;
}
.notices.open {
    width:60%;
    max-width: 100%;
    position: fixed;
}

.notices.open .fa-backward {
  display: none;
}
.notices.open .fa-forward {
  display: block;
}
.notices .content-box.transp {
    height: calc(100vh - 86px);
    overflow-y: scroll;
}
.notices.open .content-box.transp {
  overflow: scroll;
}
.notices:not(.open) .box-noticia .text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notices:not(.open) .small-image {
    /*width: 130px;*/
    /*height: 75px;*/
    /*height: fit-content*/
    max-width: 50%;
}

.notices.open .small-image, .notices.open .collapsed-notice {
    display: none;
}
.notices:not(.open) .notice-image, .notices:not(.open) .expanded-notice {
    display: none;
}
.notices.open .notice-image {
    /*max-width: 225px;*/
    /*max-height: 520px;*/
    /*max-height: 600px;*/
    max-width: 100%;
    object-fit: contain;
    object-position: left;
    /*aspect-ratio: 16/9;*/
}

.notices-handler {
  position: absolute;
  left: 0;
  height: 100%;
  display: flex;
  background: #eaf8ff;
  border-right: 2px solid #0070ba;
  align-items: center;
}
html:has(.white-bg) {
  background: white;
}
.no-shadow {
  box-shadow: none;
}
#holder {
  height: 50px;
}
#label {
  margin-bottom: -50px;
  padding-left: 19px;
  padding-top: 2px;
  position: absolute;
  color: #000000;
  font-weight: bold;
}
img.notice-image {
    /*max-width: 100px;*/
    border-radius: 6px;
}
td img.notice-image {
    max-height: 150px;
}
.modal-image {
    display: flex;
    justify-content: center;
}
#input {
  height: 100%;
  padding-bottom: -10px;
}
.topnav {
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px 5px 16px;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 3px solid transparent;
}

.topnav a:not(.button):hover {
  border-bottom: 3px solid #0081c6;
}

.topnav a.active {
  border-bottom: 3px solid #0081c6;
  color: #0081c6;
  font-weight: bold;
}
.small-tooltip {
  left: 10px !important;
}
.small-tooltip[data-popper-placement="bottom"] {
  top: 15px !important;
}
.tooltip.white-tooltip {
  border-bottom: none;
}
.tooltip.white-tooltip .tooltip-inner {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  color: #444444;
}
.tooltip.white-tooltip .arrow {
  top: 6px;
  left: -5px;
  width: 10px;
  height: 10px;
  box-shadow: none;
}
.tooltip.white-tooltip[data-popper-placement="bottom"] .arrow {
  left: 25%;
  top: -5px;
}
.url_input {
  padding-right: calc(1.5em + 0.75rem);
  background-image: url(../img/link.svg);
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(1.15em + 0.775rem) calc(1.15em + 0.775rem);
}
#noticeForm .upload-photo-button {
  width: fit-content;
  background-color: #f9f9f9;
  padding: 1rem 2rem;
  border-radius: 8px;
  border: 1px solid #ced4da;
  color: #444444;
  margin: auto 0;
}
#noticeForm .upload-photo-button:hover {
  background: #0081c6;
}
input[type="date"].date_input::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background: url(../img/calendar-day.svg) no-repeat;
  color: #707070;
  width: 20px;
  height: 20px;
  border-width: thin;
}
.thumbnail-preview {
  height: 100px;
}

/* INPUT */
.custom-multiselect .user-content .custom-checkbox.no-switch {
    position: absolute;
    left: 10px;
    top: 5px;
}
.admin-config .dashboardcode-bsmultiselect .form-control .badge {
    display: none !important;
}

.custom-checkbox.no-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%230081C6' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/></svg>");
}
.custom-checkbox.no-switch .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #007bff;
    background-color: #fff;
}

.password-input i,
.input-icon i{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.btn.blue:hover {
    color: #0081C6 !important;
}
.sorting::before, .sorting_disabled::before{
    margin-bottom: 5px;
    font-size: 16px !important;
}
.sorting::after, .sorting_disabled::after {
    font-size: 16px !important;
}

section > div.row {
    max-width: 100%;
}

select:not(.user) li .custom-control.custom-checkbox:has(input.custom-control-input:checked) {
    display: none !important;
}
.fa-plus.icon-accordion {
    color: #0081C6;
    cursor: pointer;
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #CBCBCB;
    border: none;
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::after {
    background-color: white;
}
.custom-switch .custom-control-input:not([disabled]) ~ .custom-control-label::before{
    border: 2px solid #0081C6;
}
.custom-switch .custom-control-input:not([disabled]):checked ~ .custom-control-label::after {
    background-color: white;
}
.custom-switch .custom-control-input:not([disabled]) ~ .custom-control-label::after {
    background: white;
    border: 2px solid #0081C6;
}
.custom-control-input:disabled ~ .custom-control-label::before {
    background: white;
}
.custom-control-input:disabled ~ .custom-control-label::after {
    background: white;
    border: 2px solid #CBCBCB;
}
.custom-control-input:disabled:checked ~ .custom-control-label::after {
    border-color: white;

}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(0.7rem);
}
.sidebar .modal-header {
    background: #0081C6;
    color: white;
    padding: 10px;
    align-items: baseline;
}
.propietats-content {
    border: 1px solid #CBCBCB;
    border-radius: 8px;
    margin-top: 25px;
    padding: 10px 15px;
}
ul.no-list {
    padding: 0;
    list-style: none;
}
.propietats-content .title {
    border-bottom: 1px solid #f1f1f1;
}
.propietats-content .propietats-body li label{
    color: #0081C6;
    margin-bottom: 0;
    font-size: 12px;
}
.propietats-content .propietats-body li i {
    float: none;
    margin-left: 8px;
}
.propietats-content .propietats-body {
    height: 300px;
    overflow-y: scroll;
}

.borderless {
    border: none;
}
.items-container {
    max-width: fit-content;
    min-width: fit-content;
    margin-left: auto;
    display: flex;
    align-items: center;
}
.textHeader {
    background: #0081C6;
    padding: 0.5rem !important;
    height: 28.85px;
}
.header-popup:not(.textHeader) {
    background: #0081C6;
    padding: 1rem !important;

}

/*  CERTIFICATES TRANSFER  */
.custom-select-radio {
    border: 1px solid #ced4da;
    position: relative;
}
.cnt-elements {
    max-height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.custom-select-radio input[type="radio"], .custom-select-radio input[type="checkbox"] {
    margin-left: 0;
    position: initial;
    visibility: hidden;
}
.custom-select-radio label {
    margin-left: 5px;
}
.custom-select-radio .cnt-selected label:before, .custom-select-radio .cnt-selected label:after {
    content: unset;
}
.custom-select-radio label:before{
    border-radius: 7px;
    border-color: #0081C6;
}
.custom-select-radio .custom-checkbox label:before {
    border-radius: 2px;
}

.custom-select-radio .option {
    padding-left: 10.5px;
}
.custom-select-radio .cnt-selected .option {
    padding-left: 0;
}
 .custom-select-radio .cnt-selected, .custom-select-radio .cnt-elements {
    padding: 7px 0;
}
 .custom-select-radio .cnt-selected {
     padding-left: 10.5px;
 }
.custom-select-radio .cnt-search, .custom-select-radio .cnt-selected {
    border-bottom: 1px solid #ced4da;
 }


.custom-select-radio .cnt-elements .selected{
    display: none;

}

.sidebar .btn-gray {
    background: #acacac;
    border: 1px solid #acacac;

}
.sidebar .btn-gray:hover {
    background: rgba(172, 172, 172, 0.62);
    color: #222 !important;
}
/* Firefox */
.user-content {
    scrollbar-width: auto;
    scrollbar-color: #6e6d6f #ffffff;
}

#cnt-formularis { max-height: 125px; overflow-y: scroll;}
#cnt-clients {max-height: 85px; overflow-y: scroll;}

.camps.ui-sortable::-webkit-scrollbar, #cnt-formularis::-webkit-scrollbar, #cnt-clients::-webkit-scrollbar,
.container-options::-webkit-scrollbar {
    width: 10px;
}
.ul-extraFields::-webkit-scrollbar {
    width: 4px;
}
.camps.ui-sortable::-webkit-scrollbar-track, #cnt-formularis::-webkit-scrollbar-track,
#cnt-clients::-webkit-scrollbar-track, .container-options::-webkit-scrollbar-track,
.ul-extraFields::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.cnt-elements::-webkit-scrollbar-track, .container-options::-webkit-scrollbar-track{
    background: #fff;
}
#cnt-formularis::-webkit-scrollbar-track, #cnt-clients::-webkit-scrollbar-track,
.ul-extraFields::-webkit-scrollbar-track {
    background: #E6E6E6;
}

.camps.ui-sortable::-webkit-scrollbar-thumb, #cnt-formularis::-webkit-scrollbar-thumb, #cnt-clients::-webkit-scrollbar-thumb,
.container-options::-webkit-scrollbar-thumb,
.ul-extraFields::-webkit-scrollbar-thumb {
    background-color: #6e6d6f;
    border-radius: 15px;
    border: 3px solid #f1f1f1;
    cursor:pointer;
}
#cnt-formularis::-webkit-scrollbar-thumb, #cnt-clients::-webkit-scrollbar-thumb,
.cnt-elements::-webkit-scrollbar-thumb, .container-options::-webkit-scrollbar-thumb,
.ul-extraFields::-webkit-scrollbar-thumb{
    background-color: #6e6d6f;
    border: 3px solid #fff;
}
#cnt-formularis::-webkit-scrollbar-thumb, #cnt-clients::-webkit-scrollbar-thumb,
.ul-extraFields::-webkit-scrollbar-thumb {
    border-color:#E6E6E6 ;
    border:none;
}

#cnt-formularis::-webkit-scrollbar-thumb, #cnt-clients::-webkit-scrollbar-thumb,
.ul-extraFields::-webkit-scrollbar-thumb {
    border-radius: 0;
}
.camps.ui-sortable::-webkit-scrollbar-thumb:hover{
    border: 2px solid #f1f1f1;
}
#cnt-formularis::-webkit-scrollbar-thumb:hover, #cnt-clients::-webkit-scrollbar-thumb:hover,
.cnt-elements::-webkit-scrollbar-thumb:hover, .ul-extraFields::-webkit-scrollbar-thumb:hover {
    border: 2px solid #6e6d6f;
}
/* Chrome, Edge, and Safari */
.cnt-elements::-webkit-scrollbar {
    width: 8px;
}

.cnt-elements::-webkit-scrollbar-track {
    background: #ffffff;
}

.cnt-elements::-webkit-scrollbar-thumb {
    background-color: #6e6d6f;
    border-radius: 15px;
    border: 3px solid #ffffff;
}
ul.moduls_actius_list { margin-bottom: 0}
ul.moduls_actius_list li {
    padding-left: 7px;
    margin-top: 15px;
}
ul.moduls_actius_list li::marker {
    content: "\f057";
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -0.0667em;
    font-family: "Font Awesome 6 Pro";
    color: #707070;
}
ul.moduls_actius_list .checked::marker {
    content:"\f058";
    color: #0081C6 !important;
    font-weight: 900;
}

/*  CERTIFICATES TRANSFER  */
.custom-select-radio {
    border: 1px solid #ced4da;
    position: relative;
}
.cnt-elements {
    max-height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.custom-select-radio input[type="radio"], .custom-select-radio input[type="checkbox"] {
    margin-left: 0;
    position: initial;
    visibility: hidden;
}
.custom-select-radio label {
    margin-left: 5px;
}
.custom-select-radio .cnt-selected label:before, .custom-select-radio .cnt-selected label:after {
    content: unset;
}
.custom-select-radio label:before{
    border-radius: 7px;
    border-color: #0081C6;
}
.custom-select-radio .custom-checkbox label:before {
    border-radius: 2px;
}

.custom-select-radio .cnt-selected, .custom-select-radio .cnt-elements {
    padding: 7px 0;
}
.custom-select-radio .cnt-selected {
    padding-left: 10.5px;
}
.custom-select-radio .cnt-search, .custom-select-radio .cnt-selected {
    border-bottom: 1px solid #ced4da;
}


.custom-select-radio .cnt-elements .selected{
    display: none;
}

.custom-checkbox .custom-control-label::before {
    border-color: #0081C6;
}


.form-floating.password-input,
.form-floating.input-icon{
    width: calc(100% - 40px);
}


.new-typo * {
    font-family: 'Roboto', sans-serif;
}
.new-typo table.table th{
    font-weight: 600;
    vertical-align: middle;
}
.topnav a {
    font-size: 17px;
}
.topnav a:not(.sign-subtitle-active) {
    color: #707070;
}
.topnav a.sign-subtitle-select:first-child {
    padding-left: 0;
}
.new-typo .filter-item {
    height: fit-content;
    margin: auto;
    margin-bottom: 4px;
}
.new-typo table *:not(i) {
    font-size: 14px;
}
.small-select {
    padding: 6px;
}

h5.title {
    font-size: 1.2rem;
}
.fa-spin {
    animation-iteration-count: 1!important;
}
#generatePassword:hover {
    cursor: pointer;
}

.form-floating.w-100 > div {
    width: 100%;
}
.custom-container {
    border: 1px solid #CBCBCB;
}
.container-header {
    padding: 9px 15px;
    border-bottom: 1px solid #CBCBCB;
}
.container-body {
    padding: 0 12px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 130px;
}
.container-body .row {
    border-bottom: 1px solid #CBCBCB;
    padding-top: 9px;
}
.container-body .row:last-child {
    border: none;
}
.no_sorting::before, .no_sorting::after,
.sorting_disabled::before, .sorting_disabled::after {
    display: none !important;
}

.icon-accordion {
    color: #0081C6;
    cursor: pointer;
}

.informationContainer {
    position: relative;
    margin: auto 0 auto auto;
}
section.section {
    margin: 0 0.5rem;
}
section.section > div:first-child {
    padding: 0 1rem;
}

.right-0.dropdown-menu {
    right: 0;
}

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

.topnav a {
    display: flex;
    margin-top: auto;
    /*margin-bottom: auto;*/
    align-items: center;
}

.topnav a i {
    margin-left: 10px;
}
.dropdown-menu ul.dropdown-menu a:hover, .dropdown-menu ul.dropdown-menu a.selected {
    background: #0081C61A;
    color: #444444;
}
.import-button {
    border: #CBCBCB 1px solid;
    color: #0081C6;
    font-weight: 600;
    height: 51px;
}
button.import-button:hover{
    color: #0081C6 !important;
}

.input-w-icon input:not([type="checkbox"]) {
    width: calc(100% - 30px);
}

.input-w-icon i {
    right: 22px;
}

.iti {
    width: 100%;
    display: block;
}
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 0;
    margin-left: -1.5rem;
}
.form-check {
    padding-left: 1.5rem;
}

.arrow_box {
    position: relative;
    background: #ffffff;
    padding: 5px 25px 20px;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top:-11px;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    transition: initial;
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #0081C6;
    border-width: 13px;
    margin-top: -13px;
}
.arrow_box:before {

    border-color: rgba(241, 241, 241, 0);
    border-right-color: #f1f1f1;
    border-width: 14px;
    margin-top: -14px;
}


.btn.cancel-btn{
    background: #f1f1f1;
    color: #444444;
}
.btn.cancel-btn:hover {
    background: #f1f1f1;
    color: #444444 !important;
}

.btn-primary:disabled {
    background: #ACACAC;
    border-color: #ACACAC;
}
.btn.cancel-btn:disabled:hover {
    cursor: initial !important;
    color: #444444 !important;
}
.propietats-body i.fa-copy:hover, i.fa-copy {
    cursor: pointer;
}

.hiddenModal-certificate {
    position: absolute;
    right: 0;
    top: 6%;
    left: 25px;
}
.hiddenModal-signer {
    position: absolute;
    top: 6%;
    right: 200%;
}
.hiddenModal-signer .signer-info {
    max-height: 80vh;
    max-width: 400px;
    overflow-y: auto;
}
.hiddenModal-signer .header-popup {
    position: sticky;
    top: 0;
    z-index: 1;
}
.hiddenModal-downloads {
    position: absolute;
    top: 6%;
    right: 84%;
}

.hiddenModal-device {
    position: relative;
    top: 7%;
    right: 84%;
}
.hidden {
    visibility: hidden;
}


input[type="checkbox"]{
    width: 18px;
    height: 18px;
}
.fa-beat {
    animation-duration: 0.5s !important;
    -webkit-animation-duration: 0.5s !important;
}

/** FORMULARI SENDTO **/
#main_sendto .form-header .row div {
  margin-bottom: 10px;
}
#main_sendto .form-header p {
  font-weight: bold;
  color: #444;
  font-size: 14px;
}
#main_sendto .form-header {
  border-bottom: 1px solid #cbcbcb;
}
#main_sendto .form-content {
  margin-top: 10px;
}
.form-content {
  border: 1px solid #cbcbcb;
  background: #f1f1f1;
  padding: 10px 0;
}
.contingutFormulari {
    background: #fff;
}
.contingutFormulari .form-group,
.group-content .form-group,
.preContingutFormulari .form-group,
.pre-group-content .form-group {
    margin-bottom: 0;
}
.container-options {
    max-height: 700px;
    overflow-y: scroll;
    margin-bottom: 15px;
}
.container-options-button button {
  border: 1px solid #cbcbcb;
  width: 100%;
  background: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 5px;
  display: flex;
  padding: 10px 15px;
  align-items: center;
}

button.addFormContent {
  background: #f1f1f1;
  border: 1px solid #cbcbcb;
  color: #0081c6;
  border-radius: 10px;
  margin-top: 15px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
}
.option:not(.noFormat) {
  width: 50%;
  align-items: center;
    padding-right: 20px;
}
.option span {
  width: 100%;
}

.option.noFormat label{
    width: 80%;
}
.formulari-custom-input {
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  background-color: transparent !important;
  margin-bottom: 5px;
  padding: 0;
}
.element-signatura {
  padding: 7px;
  border-radius: 8px;
  width: fit-content;
  display: inline-flex;
  min-width: 150px;
  margin-bottom: 4px;
}
.element-signatura .text-button {
  margin-right: initial;
}
.element-signatura .text-button i {
  color: #0081c6;
  /*color: #A76E19;*/
}
.user .element-signatura.blau .text-button i {
    color: #0081c6;
}
.element-signatura.blau .text-button i {
  color: #1D9152;
}
.element-signatura.gris {
  background: #f9f9f9;
  border: 1px solid #cbcbcb;
}
.element-signatura.blau {
  background: #0081c633;
  border: 1px solid #0081c6;
}
.element-signatura.blau.form {
    background-color: #64AA2F80;
    border: 1px solid #64AA2F;
}
.element-signatura.vermell {
  background: #d21b1b6e;
  border: 1px solid #cbcbcb;
}

#sendToFormContent div {
  transition: max-height 1s ease-out
}

.fa-lg {
  line-height: 0.75em;
}


.canvas_container[columns="1"] .col-md-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;

}





/* MENU CERTIFICATS */
section.certificates .topnav {
    overflow: initial;
}
.topnav.certificates a.certificate-active,
.topnav.stamp a.stamp-active,
.topnav.pending a.pending-active,
.topnav.owned a.owned-active,
.topnav.import a.import-active ,
.topnav.modify a.modify-active,
.topnav.audit a.audit-active,
.topnav.new a.new-active{
    border-bottom: 3px solid #0081C6;
    padding-bottom: 5px;
    font-weight: 600;
    color: #000
}

.popover-container {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    background:  white;
    padding: 11px 30px;
    max-width: 350px;
    box-shadow: rgba(208, 208, 208, 0.8) 0 0 10px;
    transition: all 1s;
}
.popover-container:has(.show){
    max-width: 700px;
    /*right: 0;
    transform: translateX(0%);*/

}
.popoverHeader {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.popoverContent.show {
    height: 80px;
}
.popoverContent {
    height: 0;
    overflow: hidden;
    transition: all 1s;
}
.popoverContent.show {
    margin-top: 1.5rem;
}

.werifid p {
    font-size: 1.429rem;
    color: #444;
}
.werified p.small{
    font-size:  1.071rem;
}
.werified p.big{
    font-size:  1.571rem;
    color: #707070;
}
.werifid button {
    color: white;
    font-size: 1.071rem;
}
.werifid-top {
    height: 480px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/banner-top.jpg);
    /*background-color: #0b2e13;*/
    display: flex;
    align-items: center;
    text-align: justify;
}
#werifid_title {
    color: white;
    font-size: 2.143rem;
    line-height: 4.286rem;
}
.werifid-middle {
    background: #f1f1f1;
    padding: 50px 0;
    text-align: justify;
}
.werifid-middle p {
    line-height: 2.143rem;
    margin-bottom: 20px;
}
.werifid-middle h2 {
    margin: 30px 0;
    font-size: 2.143rem;
    line-height: 1.857rem;
    color: #444;
}
.werifid-footer {
    background: #f1f1f1;
    padding: 50px 0;
    margin-bottom: -40px;
    text-align: justify;
}
.cnt-logos {
    display: inline-flex;
    margin: 30px 0;
}
.cnt-logos a {
    width: 30%;
}
.cnt-logos img{
    height: 100%;
}
.werifid-bottom{
    padding: 50px 0;
    text-align: justify;
}
@media (max-width: 1024px) {
    .popoverContent.show {
        height: 105px;
    }

}
@media (max-width: 768px) {
    html #page-werifid {
        font-size: 11px;
    }
    .login-header {
        height: auto;
        text-align: center;
    }
    .werifid-top {
        height: auto;
        padding: 30px 0;
    }
    .login-header select.w-200 {
        width: 150px;
    }
    .login-header .float-right {
        float: none !important;
    }
    .popoverContent.show {
        height: 65px;
    }
}
@media only screen and (max-width: 768px) and (orientation: landscape) {
    .popover-container {
        position: fixed;
        max-width: unset;
        width: calc(100% - 60px);
    }
    .login-container {
        height: auto;
        padding-bottom: 50px;
    }
    .login-container-wrap {

    }
}

@media (max-width: 425px) {
    .popover-container {
        position: fixed;
        max-width: unset;
        width: calc(100% - 60px);
    }

    .popoverContent.show {
        height: 135px;
    }
}

#reason-text {
    padding: 10px 15px;
    border-radius: 7px;
    background: #e9cbcb;
    min-height: 100px;
}

button.addFormContent {
    background: #f1f1f1;
    border: 1px solid #cbcbcb;
    color: #0081c6;
    border-radius: 10px;
    margin-top: 15px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
}

.handleData, .handleData::before,
.handle, .handle::before,
.handleOption, .handleOption::before{
    cursor: move;
}

.group-content.in .accordion:has(.contingutFormulari.collapsed.in), .contingutFormulari.collapsed.in .accordion {
    overflow: visible;
}
.ttipCheckText.ttip.tooltip.tooltiptext {
    width: 200px;
    left: 0;
    transform: translateX(-105%);
    top: -3px;
    left: -5px;
}
.ttipCheckText.ttip.tooltip.tooltiptext .arrow_box:after {
    border-left-color: #0081C6;
    border-right-color: transparent;
}
.ttipCheckText.ttip.tooltip.tooltiptext .arrow_box:before {
    border-left-color: #f1f1f1;
    border-right-color: transparent;
}

.ttipCheckText.ttip.tooltip.tooltiptext .arrow_box:after,.ttipCheckText.ttip.tooltip.tooltiptext .arrow_box:before {
    right: initial;
    left: 100%;
}

.ttipCheck input.pointer[disabled],
.ttipCheck input.pointer[disabled] + .pointer {
    cursor: context-menu;
}
.fa-copy.blue[disabled] {
    color: #999 !important;
}

.nouAccordion {
    border: 1px solid #0081C6;
}
.nouAccordion .nouAccordionButton:not(.collapsed){
    border-top: 1px solid #0081C6;
}
.nouAccordion .nouAccordionTitle {
    padding: 15px 0;
    background: #0081C61A;
    border-bottom: 1px solid #0081C6;
}


.nouAccordionContent {
    margin: 0 10px;
}

.numSignants.round, .numSignantsFormGeneral.round, .exclamationMark.round {
    border: 1px solid #0081C6;
    border-radius: 99px;
    margin-left: 15px;
    width: 20px;
    height: 20px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: self-end;
    font-size: 15px;
}

#statusContact.numSignants, .round.exclamationMark {
    float: none;
    margin-left: 0;
}
#tempContactMessage {
    display: flex;
    gap: 5px;
    align-items: end;
}
#contactFrame {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.numSignantsForm.round {
    border: 1px solid #999;
    border-radius: 99px;
    margin-left: 15px;
    width: 25px;
    height: 25px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: self-end;
    font-size: 20px;
    color: var(--gray);
}

.numBulkSender.round, .numBulkSenderFormGeneral.round {
    border: 1px solid #0081C6;
    border-radius: 99px;
    margin-left: 15px;
    width: 20px;
    height: 20px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: self-end;
    font-size: 15px;
}
.numBulkSenderForm.round {
    border: 1px solid #999;
    border-radius: 99px;
    margin-left: 15px;
    width: 25px;
    height: 25px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: self-end;
    font-size: 20px;
}

table.table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
}

#sendToTable_wrapper .dataTables_info {
    display: none;
}

/* TEMPLATES */
#templatesTable tr.active {
    background-color: transparent !important;
}

/*
#templatesTable.dataTable  {
    border-collapse: collapse !important;
}*/
/*#templatesTable:has(tr:first-of-type.active) thead th { border-bottom: none}*/
.font14 {
    font-size: 1rem;
}
.font16 {
    font-size: 1.143rem;
}
.font19 {
    font-size: 1.357rem;
}
#templatesTable tr.active .fa-circle-dot {
    display: block;
}
#templatesTable tr .fa-circle-dot , #templatesTable tr.active .fa-circle {
    display: none;
}
.tooltip[data-popper-placement="left"] {
    display: flex;
    justify-content: right;
    margin-right: 10px !important;
}
.tooltip[data-popper-placement="left"].white-tooltip .arrow {
    left: unset;
    right: -4px;

}

.sidebar {
    box-shadow: -5px 0 5px -5px rgb(177, 177, 177)
}
.evidences {
    border: 1px solid #cbcbcb;
    padding:0;
}

.evidences .header {
    padding: 7px;
    background-color: #0081c6;
}

.evidences .content-evidences {
    padding: 7px;
    min-width: 125px;
}
.inside-evidence:last-child {
    border-bottom: none;
}

.cnt-pdf :focus-visible, .cnt-pdf :focus {
    outline: none;
}

.dropdown-menu.show {
    z-index: 9999;
}


.timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    border-radius: 8px;
}

.event {
    position: relative;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-width: 120px;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /*position: relative;*/
    display: inline-block;
    z-index: 2;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.customProgress { position: relative}

.customProgress::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 175px;
    height: 4px;
    background-color: #CBCBCB;
    z-index: 0;
    transform: translateY(-50%);
    margin-top: 10px;
}

.completed .customProgress::before {
    background-color: #0081C6;
    z-index: 1;
}
.odd .customProgress.emailSent::before {
    background-color: #F2F2F2 !important;
    z-index: 2;
}
.even .customProgress.emailSent::before {
    background-color: #fff !important;
    z-index: 2;
}

.circle.blue {
    background-color: #F5F5F5;
    border: 2px solid #0081C6;
}

.circle.orange {
    background-color: #F5F5F5;
    border: 2px solid #F7B500;
}

.circle.dark-orange {
    background-color: #F5F5F5;
    border: 2px solid #FFA500;
}

.circle.green {
    background-color: #F5F5F5;
    border: 2px solid #64AA2F;
}

.circle.red {
    background-color: #e42700;
    border: 2px solid #e42700;
}

.circle.grey {
    background-color: #F5F5F5;
    border: 2px solid #8a8a8a;
}

.label {
    margin-top: 12px;
    font-weight: bold;
    color: #333;
}

.date {
    margin-top: 4px;
    font-size: 0.85em;
    color: #666;
    min-height: 20px;
}

.completed .circle {
    border: none;
    background-color: inherit;
}

.completed .circle.blue {
    background-color: #0081C6;
}

.completed .circle.orange {
    background-color: #F7B500;
}
.completed .label.orange {
    color: #F7B500;
}
.completed .label.red {
    color: #B22222;
}
.completed .circle.dark-orange {
    background-color: #FFA500;
}
.completed .label.dark-orange{
    color: #FFA500;
}
.completed .circle.green {
    background-color: #64AA2F;
}

.completed .label.green {
    color: #64AA2F;
}
.completed .circle.grey {
    background-color: #8a8a8a;
}
.completed .label.grey {
    color: #5a5a5a;
}
.completed .label,
.completed .date {
    color: #666;
}

#massiveSendToTable .completed .label.blue,
#massiveSendToTable .completed .label.orange,
#massiveSendToTable .completed .label.red,
#massiveSendToTable .completed .label.grey,
#massiveSendToTable .completed .label.green{
    text-decoration: underline;
}
#massiveSendToTable .event:not(.completed) .label.blue {
    color: #333 !important;
}
#massiveSendToTable .completed .blue {
    color: #0081C6;
}
#massiveSendToTable .completed .green {
    color: #64AA2F;
}
#massiveSendToTable .completed .red {
    color: #B22222;
}
#massiveSendToTable .completed .grey {
    color: #5a5a5a;
}
#massiveSendToTable .completed .orange {
    color: #F7B500;
}
#massiveSendToTable .label { color: #666;}
#massiveSendToTable .event > .label { font-weight: 400;}

#massiveSendToTable .event .circle.red {
    background-color: #F5F5F5;
    border: 2px solid #B22222;
}
#massiveSendToTable .completed .circle.red {
    background-color: #B22222;
    border: 2px solid #B22222;
}
#massiveSendToTable .event .circle.grey {
    background-color: #F5F5F5;
    border: 2px solid #8a8a8a;
}
#massiveSendToTable .completed .circle.grey {
    background-color: #8a8a8a;
    border: 2px solid #8a8a8a;
}

#uniqueEnvelopeTable .completed .label.blue,
#uniqueEnvelopeTable .completed .label.orange,
#uniqueEnvelopeTable .completed .label.red,
#uniqueEnvelopeTable .completed .label.grey,
#uniqueEnvelopeTable .completed .label.green{
    text-decoration: underline;
}
#uniqueEnvelopeTable .event:not(.completed) .label.blue {
    color: #333 !important;
}
#uniqueEnvelopeTable .completed .blue {
    color: #0081C6;
}
#uniqueEnvelopeTable .completed .green {
    color: #64AA2F;
}
#uniqueEnvelopeTable .completed .red {
    color: #B22222;
}
#uniqueEnvelopeTable .completed .grey {
    color: #5a5a5a;
}
#uniqueEnvelopeTable .completed .orange {
    color: #F7B500;
}
#uniqueEnvelopeTable .label { color: #666;}
#uniqueEnvelopeTable .event > .label { font-weight: 400;}

#uniqueEnvelopeTable .event .circle.red {
    background-color: #F5F5F5;
    border: 2px solid #B22222;
}
#uniqueEnvelopeTable .completed .circle.red {
    background-color: #B22222;
    border: 2px solid #B22222;
}
#uniqueEnvelopeTable .event .circle.grey {
    background-color: #F5F5F5;
    border: 2px solid #8a8a8a;
}
#uniqueEnvelopeTable .completed .circle.grey {
    background-color: #8a8a8a;
    border: 2px solid #8a8a8a;
}
.progresBar .customProgress.emailSent::before {
    background-color: transparent !important;
    z-index: 2;
}
.progresBar {
    background-color: #0081C61A !important;
}
.progresBar td {
    border: 1px solid #0081C6;
}
#massiveSendToTable .timeline {
    align-items: stretch; /* Cambia align-items para igualar alturas */
    margin-bottom: 30px;
}
#massiveSendToTable .timeline .date {
    font-size: 1rem;
}
.status-time{
    position: absolute;
    left: calc(var(--after-width-progress, 50px) + 93px);
    transform: translateX(-50%);
    top: 158px;
    width: max-content;
    color:#2C2C2C;
}
.status-time::before {
    content: "";
    position: absolute;
    background: #0081C6;
    clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
    width: 15px;
    height: 15px;
    transform: translateX(-50%);
    left: 50%;
    top: -20px;
}

.status-time-unique{
    position: absolute;
    left: calc(var(--after-width-progress, 50px) + 131px);
    transform: translateX(-50%);
    top: 158px;
    width: max-content;
    color:#2C2C2C;
}
.status-time-unique::before {
    content: "";
    position: absolute;
    background: #0081C6;
    clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
    width: 15px;
    height: 15px;
    transform: translateX(-50%);
    left: 50%;
    top: -20px;
}
#massiveSendToTable .timeline .event:first-child .circle::after {
    content: '';
    position: absolute;
    top: 87%;
    left: 56%; /* Empieza en el borde derecho del primer círculo */
    width: var(--after-width, 50px);/* Calcula el espacio entre el primer y el último círculo */
    height: 4px;
    background-color: #CBCBCB; /* Línea gris */
    z-index: 1; /* Debajo de los círculos */
    transform: translateY(-50%);
}
#massiveSendToTable .timeline .progressLine:after{
    content: '';
    position: absolute;
    top: 87%;
    left: 53%; /* Empieza en el borde derecho del primer círculo */
    width: var(--after-width-progress, 0px);/* Calcula el espacio entre el primer y el último círculo */
    height: 4px;
    background-color: #0081C6; /* Línea gris */
    z-index: 2; /* Debajo de los círculos */
    transform: translateY(-50%);
}
#massiveSendToTable .event {
    justify-content: space-between; /* Distribuye los elementos dentro de cada evento */
    height: 150px; /* Establece una altura fija para los eventos */
    box-sizing: border-box; /* Asegura que el padding/border no alteren la altura */
}

#uniqueEnvelopeTable .timeline .event:first-child .circle::after {
    content: '';
    position: absolute;
    top: 87%;
    left: 53%; /* Empieza en el borde derecho del primer círculo */
    width: var(--after-width, 50px);/* Calcula el espacio entre el primer y el último círculo */
    height: 4px;
    background-color: #CBCBCB; /* Línea gris */
    z-index: 1; /* Debajo de los círculos */
    transform: translateY(-50%);
}
#uniqueEnvelopeTable .timeline .progressLine:after{
    content: '';
    position: absolute;
    top: 87%;
    left: 53%; /* Empieza en el borde derecho del primer círculo */
    width: var(--after-width-progress, 0px);/* Calcula el espacio entre el primer y el último círculo */
    height: 4px;
    background-color: #0081C6; /* Línea gris */
    z-index: 2; /* Debajo de los círculos */
    transform: translateY(-50%);
}
#uniqueEnvelopeTable tr.progresBar {
    height: 275px; !important;/* o el valor que necesites */
}
#uniqueEnvelopeTable .event {
    justify-content: space-between; /* Distribuye los elementos dentro de cada evento */
    height: 150px; /* Establece una altura fija para los eventos */
    box-sizing: border-box; /* Asegura que el padding/border no alteren la altura */
}


#eNotifyTable  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #0081C6;
    position: relative;
    border-radius: 3px;
}

#eNotifyTable  input[type="checkbox"]:checked {
    background-color: #0081C6;
    border-color: #0081C6;
}

#eNotifyTable  input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.e-notify .opcioFormulari { display: none; }

.custom-switch .custom-control-label::after {
    top: calc(0.25rem + 3px);
    left: calc(-2.25rem + 4px);
    width: calc(1rem - 6px);
    height: calc(1rem - 6px);
}

.custom-switch .custom-control-input:checked:not([disabled]) ~ .custom-control-label::after {
    border-color: white;
}

.custom-control-input:disabled:not(:checked) ~ .custom-control-label::before {
    border: 2px solid #CBCBCB;
}


.user-info-content .fa-copy.fa-lg{
    line-height: normal;
}


canvas {
    aspect-ratio: auto 394 / 559;
}

.wrapper{
    width: 750px;
    height: 100%;
}

.canvas-box .wrapper { margin:auto}
canvas.cnt-canvas {
    position: absolute !important;
    opacity: 0;
}
.canvas_container[columns="1"] .wrapper img{
    width: 100%;

}

.canvas_pagination {
    margin-left: auto;
    margin-right: auto;
}
.canvas_pagination .col {
    padding:0;
}
@media (min-width: 1401px) {
    .wrapper, .canvas_pagination {
        width: 700px;
    }
    .cnt-pdf .col-xl-4{
        -ms-flex: 0 0 33.333333% !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    .cnt-pdf .col-xl-8{
        -ms-flex: 0 0 66.666667% !important;
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    #cnt-formularis {
        max-height: 250px;
    }
    #cnt-clients {
        max-height: 175px;
        overflow-y: scroll;
    }
}
@media (max-width: 1400px) {
    .cnt-pdf .col-lg-12 {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .wrapper {
        width: 950px;
    }

}
.custom-title {
    border-bottom: 1px solid #707070;
}

#buttons-clients:empty + .control {
    display: block;
}

#buttons-clients:not(:empty) + .control {
    display: none;
}
#buttons-formularis:empty + .control {
    display: block;
}

#buttons-formularis:not(:empty) + .control {
    display: none;
}

#extra_file { margin-top: 175px;}

.guardarSignant {
    display: none;
}
#main_sendto .guardarSignant {
    display: block;
}
.nom_doc {
    color: #B22222;
}
.perfil .table-responsive {
    min-height: 40vh;
}
.opcionsSendTo {
    width: 100%;
    border: 1px solid #CBCBCB;
    background: #F1F1F1;
    box-shadow: none;
    margin-top: 10px;
}
.typeSendToPage {
    border-radius: 0;
    box-shadow: none;
}
.loadFileBtn {
    background: #EDEDED;
    border: 1px solid #CBCBCB;
    border-radius: 6px;
    padding: 7px 18px;
    width: fit-content;
    min-width: 175px;
    color: #0081C6;
    font-size: 14px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.temporarySigner input[type="radio"] {
    margin-left: 0;
    position: initial;
}

#sidebarSignant.signantTemporal .selectorTipus{
    display: none;
}
#sidebarSignant.signantTemporal .selectorTipus, #sidebarSignant.signantTemporal .opcionsSignant.selectSignant{
    display: none;
}
#sidebarSignant.signantTemporal .opcionsSignant.nouSignant { display: block;}

#sidebarSignant.signantTemporal #contentTemporarySignerType-select .dropdown-menu{
    transform: none !important;
    width: 125% !important;

}

.variablesMassive {
    display: flex;
    justify-content: flex-end;
}
.variablesMassive > div {
    position: relative;
}

/* Position relative for dropdown-extraFields to position correctly */
#buttons-clients .user {
    position: relative;
}

.dropdown-extraFields{
    display:none;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dropdown-extraFields.show{
    display:block;
    position: fixed;
    background-color: white;
    z-index: 9999;
    min-width: 160px;
}
.ul-extraFields {
    margin-bottom: 0;
    padding: 3px 0;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}
.ul-extraFields li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}
.ul-extraFields li:last-child {
    border-bottom: none;
}
.ul-extraFields li:hover {
    cursor: pointer;
    background-color: #f5f8fa;
}
.ul-extraFields li .field-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ul-extraFields .fa-circle-plus:before,
.element-signatura .fa-circle-plus:before
{ font-size: 19px;}


.ul-extraFields li.selected {
    background-color: #0081C61A;
}
.ul-extraFields li.selected:hover {
    background-color: #0081C626;
}

#extraFieldsTable tr th.text-right, #extraFieldsTable tr td.text-right { width: 10%}



.timesUsed {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    margin-right: 0.5rem !important;
    background-color: #e8e8e8;
    color: #666;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.e-notify .sendCopy { display: none;}
.e-notify .emptyContact { display: none !important;}
.e-notify .guardarSignant { display: block;}

#main_sendto #sidebarSignant .emptyContact p{
    font-size: inherit;
}

#temporaryContactSelector ~ .dropdown-menu.show ul.dropdown-menu li:last-child {
    margin-bottom: 15px;
}

.bulkSendingContainer .file-area {
    width: fit-content;
    margin: 0;
}
.bulkSendingContainer .documents-subtitle-regular{
    margin-bottom: 0;
}

.confirmMassive-swal .swal2-actions button{
    width:100%;
    font-size: 1.06em !important;
}
#massiveSendToOk .modal-dialog {
    max-width: 600px;
}

#massiveSendToTable tr.progresBar label {
    font-weight: regular;
}
.contacts .emptyContact { display:none !important; }

.radio-checkbox label:before{
    border-radius: 2px;

}
.button-header {
    padding-left:0;
    border: 1px solid #0081C6;
    border-radius: 99px !important;
    padding: 0;
    margin:11px 0;
}
.button-header .round{
    margin-left: 0;
}
.dropdown-menu.text-md .text-menu { font-size: 1rem;}
.dropdown-menu .menu-cnt-icon {
    justify-content: left;
    min-width: 25px;
}

.opcionsSignant.nouSignant {
    margin-left: 25px;
}
.opcionsSignant.nouSignant .additionalActions,
.opcionsSignant.nouSignant .additionalActions div{
    margin-top:0 !important;
}

.no-dropdown, .no-click * {
    pointer-events: none;
}
.no-click .openTemporal {
    pointer-events: auto;
}
.no-click .openReminder, .no-click .openReminder i {
    pointer-events: auto;
}
.no-click .bootstrap-select:not(.input-group-btn), .no-click .addFormContent {
    display:none;
}
.no-click td i {
    color: #cbcbcb !important;
}
.no-click .openTemporal i{
    color: #0081C6 !important;
}
.no-click .openReminder i.blue {
    color: #0081C6 !important;
}
.no-click .openReminder i.green {
    color: #64AA2F !important;
}
.no-click.templateItem.panel-titleform i {
    color: #cbcbcb !important;
}


.no-dropdown i{ display:none }
.templatesGenerals  > div {
    display: flex;
    align-items: center;
}
.inputSendingName {
    margin-right: auto;
}


.filter-status-signature {
    font-size: 14px;
    color: #444444;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-status-signature .btn {
    height: fit-content;
}
.filter-status-signature .btn.minedocs {
    border-color: #0081C6;
}
.filter-status-signature .btn.minedocs:hover   {
    color: #444444 !important;
    background-color: #0081C640;
}
.filter-status-signature .btn.signed:hover {
    color: #444444 !important;
    background: #7DB95840;
}

.filter-status-signature .btn.unsigned:hover {
    color: #444444 !important;
    background: #88888840;
}

.filter-status-signature .btn.pending:hover {
    color: #444444 !important;
    background: #FEAA2B40;
}

.filter-status-signature .btn.rejected:hover {
    color: #444444 !important;
    background: #D21B1B40;
}

.filter-status-signature .btn.deleted {
    border-color: #333333;
}
.filter-status-signature .btn.deleted:hover {
    color: #444444 !important;
    background: #33333340;
}


#documentFilter-filter.collapsed i{
    display: none;
}
#documentFilter-filter.collapsed span{
    display: block;
}
#documentFilter-filter:not(.collapsed) i{
    display: block;
}
#documentFilter-filter:not(.collapsed) span{
    display: none;
}
#massiveSendToAccordion-filter:not(.collapsed) span{
    display: none;
}

#massiveSendToAccordion-filter.collapsed i{
    display: none;
}
#massiveSendToAccordion-filter.collapsed span{
    display: block;
}
#massiveSendToAccordion-filter:not(.collapsed) i{
    display: block;
}
#signatureAccordion-filter:not(.collapsed) span{
    display: none;
}

#signatureAccordion-filter.collapsed i{
    display: none;
}
#signatureAccordion-filter.collapsed span{
    display: block;
}
#signatureAccordion-filter:not(.collapsed) i{
    display: block;
}
#eNotifyAccordion-filter:not(.collapsed) span{
    display: none;
}

#eNotifyAccordion-filter.collapsed i{
    display: none;
}
#eNotifyAccordion-filter.collapsed span{
    display: block;
}
#eNotifyAccordion-filter:not(.collapsed) i{
    display: block;
}


a.disabled {
    pointer-events: none;
}
.disabledButton {
    pointer-events: none;
    background: #ACACAC;
    border-color: #ACACAC;
    opacity: 0.65;
}
.m-nom-document {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.m-nom-document .nom_doc, .m-nom-document input {
    width: 100%;
}
.m-nom-document input {
    background-color: transparent;
    border: none;

}
.m-nom-document .element-signatura {
    width: 100%;
}
.filter-tags {
    display: flex;
    gap: 5px;
}
.title-doc {
    overflow-wrap: break-word;
}

.sobreUnicGenerals  .active .filter-item{
    background: #0081C6;
    color:white;
}
.sobreUnicGenerals .filter-tags > span {
    cursor: pointer;
}

.nom_doc {
    position: relative;
}

#saveFileName {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
}
#recoverLink:hover,
#deleteLink:hover{
    color: #0081C6;
}

.wrap-text {
    white-space: normal !important;
    word-break: break-word;
}

.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998; /* por debajo del sidebar */
}

.sidebar-backdrop-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 60px; /* altura equivalente a la parte blanca */
    background-color: rgba(0, 0, 0, 0.4); /* igual al backdrop general */
    z-index: 9998;
}

#sidebarDocumentEvidences,#sidebarDocumentRemember,#sidebarInfoDocument  {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    background: white;
    overflow-y: auto;
    transition: width 0.3s ease;
}

#sidebarDocumentEvidences, #sidebarDocumentRemember {
    z-index: 9999;
}

#sidebarInfoDocument {
    z-index: 9997;
}

.tippy-box[data-theme~='light'] {
    background-color: white;
    color: black;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.tippy-box[data-theme~='light'] ul {
    margin: 0;
    padding-left: 20px;
}
.tippy-box[data-theme~='light'] li {
    margin-bottom: 5px;
}

/* ⚪ Flechas inactivas (sin orden): color gris */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting::before{
    color: #ACACAC !important;
    opacity: 1 !important;
}

/* 🟦 Flechas activas (orden asc o desc): color azul */
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::after {
    color: #0081C6 !important;
    opacity: 1 !important;
}



.modal-zindex{
    z-index: 9999; !important;
}

#massiveSendToTable .timeline .progressLine:after{
    content: '';
    position: absolute;
    top: 87%;
    left: 56%; /* Empieza en el borde derecho del primer círculo */
    width: var(--after-width-progress, 0px);/* Calcula el espacio entre el primer y el último círculo */
    height: 4px;
    background-color: #0081C6; /* Línea gris */
    z-index: 2; /* Debajo de los círculos */
    transform: translateY(-50%);
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    margin-left: 0.25rem;
    text-decoration: none;
    border-radius: 0.25rem;
}

.icon-link:hover {
    cursor: pointer;
}

.icon-link i {
    font-size: 1.5rem;
    line-height: 1;
}

.tooltip .arrow {
    display: none !important;
}
.btn {
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: unset !important;
    padding: 0.6875rem 2.125rem !important; /* Equivalente a padding: 6px 12px */
    line-height: 1.5!important;
}
.btn.btn-gray {
    background-color: #f1f1f1;
    color: #707070 !important;
}
.btn.btn-outline-secondary,
.btn.btn-outline-warning,
.btn.btn-outline-danger{
    color: #1c1b1b !important;
}
.btn.custom-btn {
    color: #1c1b1b !important;
}

.btn-secondary {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn.btn-secondary:hover {
    color: #343a40 !important; /* Negro estándar de Bootstrap */
}


.btn-secondary:hover {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:focus, .btn-secondary.focus {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

/* ========== CORREGIR EL SELECTOR DE LONGITUD DE DATATABLES ========== */
.dataTables_length {
    margin-bottom: 1rem;
}

.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: #495057;
}

.dataTables_length select {
    display: inline-block !important;
    width: auto !important;
    min-width: 75px;
    padding: 0.375rem 0.75rem !important;
    padding-right: 0.375rem !important; /* Espacio para la flecha */
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    vertical-align: middle;
}

.dataTables_length select:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.dataTables_length select:hover {
    border-color: #adb5bd !important;
}

/* ========== SOLO CORREGIR PAGINACIÓN DE DATATABLES ========== */
.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* ========== HACER EL SELECTOR DE LONGITUD MÁS ESTRECHO ========== */
.dataTables_wrapper .dataTables_length select {
    min-width: 55px !important; /* Más estrecho - era 75px */
    width: 55px !important;
    padding-right: 1.5rem !important; /* Menos espacio para la flecha */
}
/* Underline solo en el texto de los botones, no en los íconos */

/* Quitar underline por defecto de todos los botones */
.dt-buttons .dt-button:hover {
    text-decoration: none !important;
}

.dt-buttons .btn:hover {
    text-decoration: none !important;
}

/* Aplicar underline solo al texto dentro de .text */
.dt-buttons .dt-button:hover .text,
.dt-buttons .btn:hover .text {
    text-decoration: underline !important;
    text-decoration-color: #0081C6 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Si el texto está directamente en un span sin clase .text */
.dt-buttons .dt-button:hover span:not(.fa):not([class*="fa-"]),
.dt-buttons .btn:hover span:not(.fa):not([class*="fa-"]) {
    text-decoration: underline !important;
    text-decoration-color: #0081C6 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Asegurar que los íconos NO tengan underline */
.dt-buttons .dt-button:hover i,
.dt-buttons .btn:hover i,
.dt-buttons .dt-button:hover .fa,
.dt-buttons .btn:hover .fa,
.dt-buttons .dt-button:hover [class*="fa-"],
.dt-buttons .btn:hover [class*="fa-"] {
    text-decoration: none !important;
}

/* Color visible para botones de DataTables (Excel, etc.) */
.dt-buttons .dt-button,
.dt-buttons .btn {
    color: #000000 !important;
}

/* Para botones dentro de las celdas de DataTables */
.dataTables_wrapper table tbody td .btn:hover {
    text-decoration: none !important;
}

.dataTables_wrapper table tbody td .btn:hover .text,
.dataTables_wrapper table tbody td a:hover .text {
    text-decoration: underline !important;
    text-decoration-color: #0081C6 !important;
}
/* Estilos para selectores fuera del card azul (estilo general) */
.custom-select-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.custom-select-wrapper label {
    position: absolute;
    top: -8px;
    left: 12px;
    background: white;
    padding: 0 5px;
    font-size: 0.875rem;
    color: #0081C6;
    font-weight: 500;
    z-index: 10;
}

.custom-select-wrapper .bootstrap-select {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background: white;
}

.custom-select-wrapper .bootstrap-select:focus-within {
    border-color: #0081C6 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 129, 198, 0.25);
}

.custom-select-wrapper .bootstrap-select:hover {
    border-color: #0081C6 !important;
}

.custom-select-wrapper .bootstrap-select .dropdown-toggle {
    border: none !important;
    background: transparent !important;
    padding: 0.75rem 0.75rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    box-shadow: none !important;
}

.custom-select-wrapper .bootstrap-select .dropdown-toggle:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.custom-select-wrapper .bootstrap-select .dropdown-toggle:hover {
    border: none !important;
    background: rgba(0, 129, 198, 0.05) !important;
    box-shadow: none !important;
}

.custom-select-wrapper .bootstrap-select .dropdown-toggle:active,
.custom-select-wrapper .bootstrap-select .dropdown-toggle.show {
    border: none !important;
    box-shadow: none !important;
    background: rgba(0, 129, 198, 0.1) !important;
}

/* Personalizar el dropdown */
.custom-select-wrapper .bootstrap-select .bs-searchbox .form-control {
    border: 1px solid #0081C6;
    border-radius: 0.25rem;
}

.custom-select-wrapper .bootstrap-select .bs-searchbox .form-control:focus {
    border-color: #0081C6;
    box-shadow: 0 0 0 0.2rem rgba(0, 129, 198, 0.25);
}

/* Forzar posición del dropdown */
.custom-select-wrapper .bootstrap-select > .dropdown-menu {
    border: 1px solid #0081C6 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    top: 100% !important;
    margin-top: 1px !important;
    left: 0 !important;
    right: auto !important;
    min-width: 100% !important;
    width: 100% !important;
    transform: none !important;
    position: absolute !important;
}

/* Para dropdowns que se abren hacia arriba */
.custom-select-wrapper .bootstrap-select.dropup > .dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 1px !important;
}

/* Asegurar que el contenedor tenga posición relativa */
.custom-select-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.custom-select-wrapper .bootstrap-select {
    position: relative !important;
}

.custom-select-wrapper .bootstrap-select .dropdown-item:hover,
.custom-select-wrapper .bootstrap-select .dropdown-item:focus {
    background-color: rgba(0, 129, 198, 0.1);
    color: #0081C6;
}

.custom-select-wrapper .bootstrap-select .dropdown-item.active {
    background-color: white;
    color: #0081C6;
    font-weight: 600;
}

/* Personalizar el icono de búsqueda */
.bootstrap-select .bs-searchbox .form-control {
    border: 1px solid #0081C6;
    border-radius: 0.25rem;
}

/* Action buttons (Select All / Deselect All) styling */
.custom-select-wrapper .bootstrap-select .bs-actionsbox .btn-group {
    gap: 8px;
}

.bs-actionsbox .actions-btn {
    font-size: 10px !important;
    padding: 2px 6px !important;
    background-color: #0081C6 !important;
    color: white !important;
    border-color: #0081C6 !important;
}

.bootstrap-select .bs-searchbox .form-control:focus {
    border-color: #0081C6;
    box-shadow: 0 0 0 0.2rem rgba(0, 129, 198, 0.25);
}

/* Estilo del dropdown */
.bootstrap-select .dropdown-menu {
    border: 1px solid #0081C6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background-color: rgba(0, 129, 198, 0.1);
    color: #0081C6;
}

.bootstrap-select .dropdown-item.active {
    background-color: #0081C6;
}

/* ============================================
   CUSTOM SELECT DROPDOWN
   ============================================ */
.cs-wrapper {
    position: relative;
    width: 100%;
}
.cs-toggle {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #CBCBCB;
    border-radius: 8px;
    margin-top: 2px;
    max-height: 228px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cs-wrapper.open > .cs-menu {
    display: block;
}
.cs-wrapper.open > .cs-toggle {
    border-color: #0081C6;
}
.cs-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-item:first-child {
    border-radius: 8px 8px 0 0;
}
.cs-item:last-child {
    border-radius: 0 0 8px 8px;
}
.cs-item:hover {
    background-color: rgba(0, 129, 198, 0.08);
    color: #0081C6;
}
.cs-item.active {
    background-color: #0081C6;
    color: #fff;
}
/* Form-floating integration */
.form-floating > .cs-wrapper > .cs-toggle {
    height: calc(3.5rem + 2px);
    padding: 1.625rem 2.25rem 0.625rem 0.75rem;
    line-height: 1.25;
}
.form-floating > .cs-wrapper ~ label {
    transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
    color: #0081C6;
    opacity: 1;
    z-index: 2;
    pointer-events: none;
}
/* Non form-floating (normal label above) */
.cs-wrapper > .cs-toggle {
    height: auto;
}
/* "See more" toggle */
.cs-see-more {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #0081C6;
    font-weight: 500;
    border-top: 1px solid #eee;
    user-select: none;
}
.cs-see-more::before {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    margin-right: 0.5rem;
    display: inline-block;
    transition: transform 0.2s;
}
.cs-see-more.open::before {
    transform: rotate(180deg);
}
.cs-see-more:hover {
    background-color: rgba(0, 129, 198, 0.05);
}
/* Extra group (hidden by default) */
.cs-extra-group {
    display: none;
    border-top: 1px solid #eee;
}
.cs-extra-group.open {
    display: block;
}
/* Live search */
.cs-search-box {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #eee;
}
.cs-search-input {
    width: 100%;
    border: 1px solid #CBCBCB;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    outline: none;
    color: #495057;
}
.cs-search-input:focus {
    border-color: #0081C6;
    box-shadow: 0 0 0 2px rgba(0, 129, 198, 0.15);
}
/* Error state */
.cs-wrapper.ui-state-error > .cs-toggle {
    border-color: #dc3545;
}

/* ============================================
   ESTILOS PARA PRE-FORMULARIO
   Añadir estos estilos al final de base.css
   ============================================ */

/* --------------------------------------------------
   ESTILOS DE CONTENEDORES Y GRUPOS
   -------------------------------------------------- */

/* Contenedor principal del pre-formulario (equivalente a .form-content.group-content) */
.pre-form-content.pre-group-content {
    padding: 7px 15px;
}

/* Grupo colapsado: ocultar campos (igual que .group-content.collapsed .accordion .camps) */
.pre-group-content.pre-collapsed .accordion .preCamps {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-out !important;
}

/* Grupo expandido: mostrar campos (igual que .group-content.collapsed.in .accordion .camps) */
.pre-group-content.pre-collapsed.in .accordion .preCamps {
    max-height: 1400px;
    height: auto;
    transition: max-height 1s ease-out !important;
    overflow-y: scroll;
}

/* Campo individual colapsado */
/*.preContingutFormulari.pre-collapsed:not(.in) .accordion {*/
/*    max-height: 0 !important;*/
/*    overflow: hidden;*/
/*    transition: max-height 1s ease-out !important;*/
/*}*/

/* Campo individual expandido */
.preContingutFormulari.pre-collapsed.in .accordion {
    display: block;
    max-height: none;
    overflow: visible;
}

/* Evitar overflow cuando hay campos expandidos dentro de grupos expandidos */
.pre-group-content.in .accordion:has(.preContingutFormulari.pre-collapsed.in),
.preContingutFormulari.pre-collapsed.in .accordion {
    overflow: visible;
}

/* --------------------------------------------------
   ESTILOS DE CAMPOS
   -------------------------------------------------- */

/* Estilos base del contenedor de formulario */
.pre-form-content {
    border: 1px solid #cbcbcb;
    background: #f1f1f1;
    padding: 10px 0;
}

/* Fondo blanco para campos individuales */
.preContingutFormulari {
    background: #fff;
}

/* --------------------------------------------------
   CONTENEDOR DE OPCIONES (para Selector opcions)
   -------------------------------------------------- */

/* Contenedor de opciones con scroll */
.pre-container-options {
    max-height: 700px;
    overflow-y: scroll;
    margin-bottom: 15px;
}

/* Botón para añadir opciones */
.pre-container-options-button button {
    border: 1px solid #cbcbcb;
    width: 100%;
    background: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    padding: 10px 15px;
    align-items: center;
}

/* --------------------------------------------------
   INPUTS Y FORMULARIOS
   -------------------------------------------------- */

/* Input personalizado para campos del pre-formulario */
.pre-formulari-custom-input {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    background-color: transparent !important;
    margin-bottom: 5px;
    padding: 0;
}

/* --------------------------------------------------
   ELEMENTOS DE FIRMA/CAMPOS (si necesitas draggables)
   -------------------------------------------------- */

.pre-element-signatura {
    padding: 7px;
    border-radius: 8px;
    width: fit-content;
    display: inline-flex;
    min-width: 150px;
    margin-bottom: 4px;
}
.pre-element-signatura .text-button {
    margin-right: initial;
}
.pre-element-signatura .text-button i {
    color: #0081c6;
    /*color: #A76E19;*/
}
.user .pre-element-signatura.blau .text-button i {
    color: #0081c6;
}
.pre-element-signatura.blau .text-button i {
    color: #1D9152;
}
.pre-element-signatura.blau.form {
    background-color: transparent;
    border: 1px solid #64AA2F;
}
.pre-element-signatura.vermell {
    background: #d21b1b6e;
    border: 1px solid #cbcbcb;
}

/* --------------------------------------------------
   CONTADORES Y BADGES
   -------------------------------------------------- */

/* Contador de campos en pre-formulario (equivalente a .numSignantsFormGeneral) */
.numSignantsPreFormGeneral.round {
    border: 1px solid #0081C6;
    border-radius: 99px;
    margin-left: 15px;
    width: 20px;
    height: 20px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: self-end;
    font-size: 15px;
}

/* Contador de campos por grupo */
.preNumSignantsForm.round {
    border: 1px solid #0081C6;
    border-radius: 99px;
    margin-left: 15px;
    width: 20px;
    height: 20px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: self-end;
    font-size: 15px;
}

/* --------------------------------------------------
   BOTONES Y ACCIONES
   -------------------------------------------------- */

/* Botón para añadir contenido al pre-formulario */
button.addPreFormContent {
    background: #f1f1f1;
    border: 1px solid #cbcbcb;
    color: #0081c6;
    border-radius: 10px;
    margin-top: 15px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

/* --------------------------------------------------
   OPCIONES Y ELEMENTOS INDIVIDUALES
   -------------------------------------------------- */

/* Contenedor de opción individual */
.pre-option:not(.noFormat) {
    width: 50%;
    align-items: center;
    padding-right: 20px;
}

.pre-option span {
    width: 100%;
}

.pre-option.noFormat label {
    width: 80%;
}

/* --------------------------------------------------
   HANDLERS Y CURSORES
   -------------------------------------------------- */

/* Cursor de movimiento para handlers del pre-formulario */
.preHandleData, .preHandleData::before,
.preHandle, .preHandle::before,
.preHandleOption, .preHandleOption::before {
    cursor: move;
}


/* --------------------------------------------------
   TOOLTIPS Y AYUDAS PARA PRE-FORMULARIO
   -------------------------------------------------- */

/* Tooltip para checkboxes del pre-formulario */
.preTtipCheck.ttip.tooltip.tooltiptext {
    width: 200px;
    left: 0;
    transform: translateX(-105%);
    top: -3px;
    left: -5px;
}

.preTtipCheck.ttip.tooltip.tooltiptext .arrow_box:after {
    border-left-color: #0081C6;
    border-right-color: transparent;
}

.preTtipCheck.ttip.tooltip.tooltiptext .arrow_box:before {
    border-left-color: #f1f1f1;
    border-right-color: transparent;
}

.preTtipCheck.ttip.tooltip.tooltiptext .arrow_box:after,
.preTtipCheck.ttip.tooltip.tooltiptext .arrow_box:before {
    right: initial;
    left: 100%;
}

/* Cursor deshabilitado para elementos bloqueados */
.preTtipCheck input.pointer[disabled],
.preTtipCheck input.pointer[disabled] + .pointer {
    cursor: context-menu;
}

/* --------------------------------------------------
   ICONOS Y ESTADOS
   -------------------------------------------------- */

/* Icono de copiar deshabilitado en pre-formulario */
.fa-copy.blue[disabled] {
    color: #999 !important;
}

/* --------------------------------------------------
   ESTILOS ADICIONALES ESPECÍFICOS
   -------------------------------------------------- */

/* Contenedor de opciones del pre-formulario cuando está visible */
.pre-opciones {
    /* Añade estilos adicionales si es necesario */
}

/* Estado activo/seleccionado */
.pre-group-content.active {
    border-left: 3px solid #0081C6;
}

/* Hover sobre grupos */
.pre-group-content:hover {
    background-color: #f8f9fa;
}

/* --------------------------------------------------
   MEDIA QUERIES (si es necesario)
   -------------------------------------------------- */

@media (max-width: 768px) {
    .pre-form-content.pre-group-content {
        padding: 5px 10px;
    }

    .pre-container-options {
        max-height: 400px;
    }
}

/* ESTILOS DE CAMPOS PREFORMULARIO */
/* Estilos para el contenedor de campos del formulario */
#preFormulariFieldsContainer {
    background: #ffffff;
    padding: 0;
}

#preFormulariFieldsContainer .form-group-box {
    /*background: #ffffff;*/
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

#preFormulariFieldsContainer .form-group-title {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0081C6;
    display: flex;
    align-items: center;
}

#preFormulariFieldsContainer .form-group-title i {
    color: #0081C6;
    margin-right: 6px;
    font-size: 13px;
}

#preFormulariFieldsContainer .form-field {
    margin-bottom: 16px;
    /*background: #fafafa;*/
    padding: 8px 12px;
    border-radius: 0;
}

#preFormulariFieldsContainer .form-field:last-child {
    margin-bottom: 16px;
}

#preFormulariFieldsContainer .form-field label {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    margin-bottom: 4px;
    display: block;
    line-height: 1.3;
}

#preFormulariFieldsContainer .form-field.required label {
    color: #666666;
}

/* Inputs de texto */
#preFormulariFieldsContainer .form-field input[type="text"],
#preFormulariFieldsContainer .form-field input[type="email"],
#preFormulariFieldsContainer .form-field input[type="number"],
#preFormulariFieldsContainer .form-field input[type="date"],
#preFormulariFieldsContainer .form-field select,
#preFormulariFieldsContainer .form-field textarea {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 2px;
    padding: 8px 10px;
    font-size: 13px;
    color: #333333;
    background: #ffffff;
    transition: border-color 0.15s ease;
}

#preFormulariFieldsContainer .form-field input[type="text"]:focus,
#preFormulariFieldsContainer .form-field input[type="email"]:focus,
#preFormulariFieldsContainer .form-field input[type="number"]:focus,
#preFormulariFieldsContainer .form-field input[type="date"]:focus,
#preFormulariFieldsContainer .form-field select:focus,
#preFormulariFieldsContainer .form-field textarea:focus {
    border-color: #0081C6;
    box-shadow: none;
    outline: 0;
}

#preFormulariFieldsContainer .form-field input::placeholder,
#preFormulariFieldsContainer .form-field textarea::placeholder {
    color: #aaaaaa;
    font-size: 13px;
}

/* Textarea */
#preFormulariFieldsContainer .form-field textarea {
    resize: vertical;
    min-height: 70px;
}

/* Select */
#preFormulariFieldsContainer .form-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    cursor: pointer;
}

#preFormulariFieldsContainer .form-field select option {
    padding: 8px;
}

/* Checkbox */
#preFormulariFieldsContainer .form-field .form-check {
    padding-left: 0;
    display: flex;
    align-items: center;
    margin-top: 0;
    background: transparent;
    padding: 0;
}

#preFormulariFieldsContainer .form-field .form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    margin-top: 0;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-radius: 3px;
    flex-shrink: 0;
    background: #ffffff;
    margin-left: 0; !important;
}

#preFormulariFieldsContainer .form-field .form-check input[type="checkbox"]:checked {
    background-color: #0081C6;
    border-color: #0081C6;
}

#preFormulariFieldsContainer .form-field .form-check label {
    margin-bottom: 0;
    margin-left: 25px;
    cursor: pointer;
    font-size: 13px;
    color: #333333;
    font-weight: 400;
}

/* File input - Diseño especial con previsualización */
.image-upload-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.image-preview-box {
    width: 140px;
    height: 140px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.image-preview-box .preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.image-preview-box .preview-text {
    font-size: 11px;
    color: #999999;
    text-align: center;
}

.clear-image-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #dc3545;
    font-size: 20px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.clear-image-btn:hover {
    color: #c82333;
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.upload-button {
    padding: 7px 20px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background: #f5f5f5;
    color: #333333;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: inline-block;
    margin: 0;
    font-weight: 400;
}

.upload-button:hover {
    background: #eeeeee;
}

/* File input antiguo - ocultar */
#preFormulariFieldsContainer .form-field input[type="file"]:not(.image-upload-wrapper input) {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #cccccc;
}

#preFormulariFieldsContainer .form-field input[type="file"]::file-selector-button {
    padding: 5px 14px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background: #f5f5f5;
    color: #333333;
    font-size: 12px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.15s ease;
}

#preFormulariFieldsContainer .form-field input[type="file"]::file-selector-button:hover {
    background: #eeeeee;
}

/* Alert vacío */
#emptyPreFormulariAlert {
    background-color: #f0f7ff;
    border: 1px solid #d0e7ff;
    border-radius: 2px;
    color: #004085;
    padding: 14px 18px;
    font-size: 13px;
    text-align: center;
}

/* Separador entre grupos */
#preFormulariFieldsContainer .form-group-box + .form-group-box {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
    #preFormulariFieldsContainer .form-field {
        padding: 6px 10px;
        margin-bottom: 12px;
    }

    #preFormulariFieldsContainer .form-group-title {
        font-size: 13px;
    }
}


/** ESTILOS DE DRAGGABLES DE PRE FORMULARIO */
/* ============================================
   ESTILOS PARA CONTENEDOR SEPARADO DE PRE-FORMULARIOS
   ============================================ */

/* Contenedor de pre-formularios (equivalente a #cnt-formularis) */
#cnt-pre-formularis {
    display: flex;
    align-items: baseline;
    margin-bottom: 1.25rem;
}

/* Botones de pre-formularios */
#buttons-pre-formularis {
    display: inline-flex;
    flex-flow: wrap;
}

/* Control de mensaje cuando no hay pre-formularios */
#buttons-pre-formularis:empty + .control {
    display: block;
}

#buttons-pre-formularis:not(:empty) + .control {
    display: none;
}

/* Altura máxima con scroll para muchos pre-formularios */
@media (min-width: 1401px) {
    #cnt-pre-formularis {
        max-height: 250px;
        overflow-y: auto;
    }
}

/* Sección de pre-formularios */
#pre_form_doc_section {
    margin-top: 1rem;
}

#pre_form_doc_section .custom-title {
    border-bottom: 1px solid #707070;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Asegurarse de que el texto draggable de pre-form también tenga estilo apropiado */
.draggable.pre-form .text-draggable {
    position: absolute;
    bottom: 100%;
    left: -1px;
    transform: translateY(-1px);
    width: 250px;
    background: #EDEDED;
    border: 1px solid #CBCBCB;
    color: black;
    padding: 3px 4px;
    /*padding-left: 4px;*/
}

/* Iconos de cierre para pre-formularios */
.draggable.pre-form i.close-draggable::before {
    color: #0081C6;
}

/* Estilos base heredados (iguales para todos los draggables) */
.draggable.pre-form {
    font-size: 14px;
    font-weight: 400;
    justify-content: left;
    top: 0;
    position: absolute;
    min-height: 20px;
    cursor: initial;

    /* Específicos de pre-form en canvas */
    outline: none;
    border: 1px solid #F9C840;
    background-color: #FBDA7F80;
}

/* Ocultar flechas de arrastre (igual que form) */
.draggable.pre-form .arrows-draggable {
    display: none;
}

/* Estado seleccionado */
.draggable.pre-form.selected {
    outline: none;
    background-color: #FBDA7F80;
    border: 1px solid #F9C840;
    box-sizing: border-box;
}

/* Mostrar texto solo cuando está seleccionado */
.draggable.pre-form:not(.selected) .text-draggable {
    display: none;
}

.draggable.pre-form.selected .text-draggable {
    display: inline-flex;
    align-items: center;
}

/* Iconos de cierre */
.draggable.pre-form i.close-draggable::before {
    color: #0081C6;
}

/* Cursor para handles de drag y close */
.draggable.pre-form .handle-drag,
.draggable.pre-form .close-draggable {
    cursor: pointer;
}

/* Resize indicator (si se usa resize='east') */
.draggable.pre-form[resize='east']:after {
    content: "\f337";
    position: absolute;
    line-height: 15px;
    font-size: 15px;
    font-family: 'Font Awesome 6 Pro';
    right: 3px;
    bottom: 0;
}

/* ==================================================
   ASEGURAR QUE LOS ELEMENTOS DEL SIDEBAR NO TENGAN
   LOS ESTILOS DE CANVAS
   ================================================== */

/* Los botones en el sidebar mantienen sus colores originales */
.pre-element-signatura.gris {
    background: #f9f9f9;
    border: 1px solid #cbcbcb;
}

.pre-element-signatura.blau {
    background: #0081c633;
    border: 1px solid #0081c6;
}

/* NUNCA aplicar estilos amarillos a elementos que no estén en el canvas */
#sidebarPreFormulari .pre-element-signatura.gris,
#sidebarPreFormulari .pre-element-signatura.blau,
#buttons-pre-formularis .pre-element-signatura.gris,
#buttons-pre-formularis .pre-element-signatura.blau {
    background: #f9f9f9;
    border: 1px solid #cbcbcb;
}

#sidebarPreFormulari .pre-element-signatura.blau,
#buttons-pre-formularis .pre-element-signatura.blau {
    background: #0081c633;
    border: 1px solid #0081c6;
}

/* Asegurar que el contenedor de pre-formularios desplegados tenga el fondo correcto */
.pre-formulari.dark-green .element-signatura {
    background: transparent;
}

/* ==================================================
   SCROLLBARS PARA CONTENEDORES DE PRE-FORMULARIO
   ================================================== */

/* Firefox */
#cnt-pre-formularis {
    scrollbar-width: auto;
    scrollbar-color: #6e6d6f #E6E6E6;
}

/* Chrome, Edge, and Safari */
#cnt-pre-formularis::-webkit-scrollbar {
    width: 10px;
}

#cnt-pre-formularis::-webkit-scrollbar-track {
    background: #E6E6E6;
}

#cnt-pre-formularis::-webkit-scrollbar-thumb {
    background-color: #6e6d6f;
    border-radius: 0;
    border: none;
    cursor: pointer;
}

#cnt-pre-formularis::-webkit-scrollbar-thumb:hover {
    border: 2px solid #6e6d6f;
}

/* Scrollbar para container de opciones de pre-formulario */
.pre-container-options::-webkit-scrollbar {
    width: 10px;
}

.pre-container-options::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.pre-container-options::-webkit-scrollbar-thumb {
    background-color: #6e6d6f;
    border-radius: 15px;
    border: 3px solid #f1f1f1;
    cursor: pointer;
}

.pre-container-options::-webkit-scrollbar-thumb:hover {
    border: 2px solid #f1f1f1;
}

/* Scrollbar para campos pre-formulario con scroll */
.preCamps.ui-sortable::-webkit-scrollbar {
    width: 10px;
}

.preCamps.ui-sortable::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.preCamps.ui-sortable::-webkit-scrollbar-thumb {
    background-color: #6e6d6f;
    border-radius: 15px;
    border: 3px solid #f1f1f1;
    cursor: pointer;
}

.preCamps.ui-sortable::-webkit-scrollbar-thumb:hover {
    border: 2px solid #f1f1f1;
}

.element-signatura.pre-form.gris {
    background: #f9f9f9;
    border: 1px solid #cbcbcb;
}
.element-signatura.pre-form.blau {
    background: #FBDA7F80;
    border: 1px solid #cbcbcb;
    color: #0b0b0b;!important;
}

/* Campo colapsado - ocultar el accordion (mismo criterio que Formularis) */
.preContingutFormulari.pre-collapsed:not(.in) .accordion {
    max-height: 0 !important;
    overflow: hidden;
    transition: max-height 1s ease-out !important;
}

/* Campo expandido - mostrar todo el contenido */
.preContingutFormulari.pre-collapsed.in .accordion {
    max-height: 1000px;
    height: auto;
    transition: max-height 1s ease-out !important;
}

/* Ajustar padding de secciones internas */
.preContingutFormulari .pre-opciones,
.preContingutFormulari .condicions {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Ocultar el separador cuando el accordion está colapsado */
.preContingutFormulari.pre-collapsed:not(.in) .separator-row {
    display: none;
}

/* Ajustar padding interno para reducir altura */
.preContingutFormulari .pre-opciones,
.preContingutFormulari .condicions {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* --------------------------------------------------
   ICONOS DE COPIAR - PRE-FORMULARIO
   -------------------------------------------------- */

/* Icono de copiar habilitado (azul) */
.preContingutFormulari i.fa-copy.blue:not([disabled]),
.pre-group-content i.fa-copy.blue:not([disabled]) {
    color: #0081C6 !important;
    cursor: pointer;
}

/* Icono de copiar deshabilitado (gris) */
.preContingutFormulari i.fa-copy.grey,
.preContingutFormulari i.fa-copy[disabled],
.pre-group-content i.fa-copy.grey,
.pre-group-content i.fa-copy[disabled] {
    color: #999999 !important;
    cursor: not-allowed;
}

/* Hover sobre icono habilitado */
.preContingutFormulari i.fa-copy.blue:not([disabled]):hover,
.pre-group-content i.fa-copy.blue:not([disabled]):hover {
    color: #005a8c !important;
}

/* Sin hover en iconos deshabilitados */
.preContingutFormulari i.fa-copy[disabled]:hover,
.pre-group-content i.fa-copy[disabled]:hover {
    color: #999999 !important;
    cursor: not-allowed;
}

.btn-secondary {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn.btn-secondary:hover {
    color: #343a40 !important; /* Negro estándar de Bootstrap */
}


.btn-secondary:hover {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:focus, .btn-secondary.focus {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

/* ========== CORREGIR EL SELECTOR DE LONGITUD DE DATATABLES ========== */
.dataTables_length {
    margin-bottom: 1rem;
}

.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: #495057;
}

.dataTables_length select {
    display: inline-block !important;
    width: auto !important;
    min-width: 75px;
    padding: 0.375rem 0.75rem !important;
    padding-right: 0.375rem !important; /* Espacio para la flecha */
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    vertical-align: middle;
}

.dataTables_length select:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.dataTables_length select:hover {
    border-color: #adb5bd !important;
}

/* ========== SOLO CORREGIR PAGINACIÓN DE DATATABLES ========== */
.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* ========== HACER EL SELECTOR DE LONGITUD MÁS ESTRECHO ========== */
.dataTables_wrapper .dataTables_length select {
    min-width: 55px !important; /* Más estrecho - era 75px */
    width: 55px !important;
    padding-right: 1.5rem !important; /* Menos espacio para la flecha */
}
/* Underline solo en el texto de los botones, no en los íconos */

/* Quitar underline por defecto de todos los botones */
.dt-buttons .dt-button:hover {
    text-decoration: none !important;
}

.dt-buttons .btn:hover {
    text-decoration: none !important;
}

/* Aplicar underline solo al texto dentro de .text */
.dt-buttons .dt-button:hover .text,
.dt-buttons .btn:hover .text {
    text-decoration: underline !important;
    text-decoration-color: #0081C6 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Si el texto está directamente en un span sin clase .text */
.dt-buttons .dt-button:hover span:not(.fa):not([class*="fa-"]),
.dt-buttons .btn:hover span:not(.fa):not([class*="fa-"]) {
    text-decoration: underline !important;
    text-decoration-color: #0081C6 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Asegurar que los íconos NO tengan underline */
.dt-buttons .dt-button:hover i,
.dt-buttons .btn:hover i,
.dt-buttons .dt-button:hover .fa,
.dt-buttons .btn:hover .fa,
.dt-buttons .dt-button:hover [class*="fa-"],
.dt-buttons .btn:hover [class*="fa-"] {
    text-decoration: none !important;
}

/* Para botones dentro de las celdas de DataTables */
.dataTables_wrapper table tbody td .btn:hover {
    text-decoration: none !important;
}

.dataTables_wrapper table tbody td .btn:hover .text,
.dataTables_wrapper table tbody td a:hover .text {
    text-decoration: underline !important;
    text-decoration-color: #0081C6 !important;
}

.form-floating > label {
    font-size: 1rem !important;
}

/* Labels encima de los inputs en form-group */
.form-group > label.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0081c6;
    margin-bottom: 0.35rem;
}

.form-group > .form-control,
.form-group > .form-select,
.form-group > .custom-select {
    font-size: 1rem;
}

.btn.btn-primary.btn-lg,
.btn.btn-primary {
    color: white !important;
}


/* ========================================
       ESTILOS RESPONSIVE GENERALES
       ======================================== */

/* Prevenir scroll horizontal en toda la página */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Asegurar que todos los containers respeten el ancho de pantalla */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================
   TABLAS RESPONSIVE
   ======================================== */

/* Contenedores de tablas */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Tablas generales */
table {
    max-width: 100%;
}

/* DataTables específicas */
#recent-documents-table,
#documentsTable,
.documents.table,
.custody-table {
    width: 100% !important;
    max-width: 100%;
}

/* ========================================
   RESPONSIVE MÓVIL (< 768px)
   ======================================== */

@media (max-width: 767.98px) {
    /* Prevenir overflow horizontal */
    body {
        overflow-x: hidden !important;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Ajustar padding de secciones */
    .dashboard {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Widgets del dashboard */
    .col-lg-8, .col-lg-4 {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Tablas en móvil */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    /* Hacer tablas scrolleables horizontalmente */
    .table-responsive table {
        min-width: 600px; /* Ancho mínimo para que sea scrolleable */
    }

    /* Reducir tamaño de fuente en tablas */
    .table-responsive table {
        font-size: 0.8rem;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }

    /* Ajustar widgets */
    .bg-white.rounded-lg {
        padding: 1rem !important;
    }

    /* Documentos recientes específicamente */
    #recent-documents-table_wrapper {
        overflow-x: auto;
    }

    /* DataTables controls */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 0.8rem;
    }

    /* Botones de DataTables */
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .dt-buttons .btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ========================================
   DROPDOWN DE PERFIL RESPONSIVE
   ======================================== */

/* Backdrop oscuro para móvil */
.profile-dropdown-backdrop {
    display: none;
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    pointer-events: none;
}

.profile-dropdown-backdrop.show {
    display: none;
    pointer-events: auto;
}

/* Dropdown de perfil */
.profile-dropdown {
    min-width: 300px;
    padding: 0 !important;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    position: fixed !important;
    z-index: 9999 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    background: white;
    margin-top: 0 !important;
}

/* Adaptación para tablets y móviles */
@media (max-width: 991px) {
    .profile-dropdown {
        min-width: 280px;
        max-width: calc(100vw - 30px);
    }
}

@media (max-width: 768px) {
    /* En móvil, el dropdown debe ocupar casi todo el ancho y estar centrado */
    .profile-dropdown {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        min-width: auto !important;
        max-width: none !important;
        width: calc(100vw - 20px) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-radius: 12px;
    }

    /* Ajustar padding en móvil */
    .profile-dropdown .user-profile-header {
        padding: 1rem !important;
    }

    .profile-dropdown .account-status-section {
        padding: 1rem !important;
    }

    .profile-dropdown .menu-item {
        padding: 0.65rem 1rem !important;
    }

    /* Avatar más pequeño en móvil */
    .profile-dropdown .avatar-container {
        margin-right: 0.75rem !important;
    }

    .profile-dropdown .avatar {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }

    .profile-dropdown .avatar.avatar-lg {
        width: 46px !important;
        height: 46px !important;
        font-size: 1.1rem !important;
    }

    /* Texto más pequeño en móvil */
    .profile-dropdown .user-name {
        font-size: 0.9rem !important;
    }

    .profile-dropdown .user-email {
        font-size: 0.75rem !important;
    }

    .profile-dropdown .section-title {
        font-size: 0.85rem !important;
    }

    .profile-dropdown .status-label {
        font-size: 0.65rem !important;
    }

    .profile-dropdown .status-value {
        font-size: 0.8rem !important;
    }

    .profile-dropdown .menu-text {
        font-size: 0.85rem !important;
    }

    /* Reducir espaciado en tarjetas de estado */
    .profile-dropdown .status-card {
        padding: 0.6rem !important;
    }

    .profile-dropdown .status-icon {
        width: 32px !important;
        height: 32px !important;
        margin-right: 0.6rem !important;
    }

    .profile-dropdown .account-status-grid {
        gap: 0.6rem !important;
    }
}

@media (max-width: 480px) {
    /* Para pantallas muy pequeñas */
    .profile-dropdown {
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
    }

    .profile-dropdown .user-profile-header {
        padding: 0.85rem !important;
    }

    .profile-dropdown .account-status-section {
        padding: 0.85rem !important;
    }

    .profile-dropdown .menu-item {
        padding: 0.6rem 0.85rem !important;
    }

    /* Tablas aún más compactas */
    .table-responsive table {
        font-size: 0.75rem;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 0.375rem !important;
    }
}

/* ========================================
   ELEMENTOS ESPECÍFICOS DEL DASHBOARD
   ======================================== */

@media (max-width: 767.98px) {
    /* Widget de bienvenida */
    .welcome-widget h2 {
        font-size: 1.5rem !important;
    }

    /* Botones de acción */
    .btn-lg {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    /* Estadísticas */
    .stat-card {
        margin-bottom: 1rem;
    }

    /* Cards de documentos */
    .document-card {
        font-size: 0.85rem;
    }

    /* Badges y etiquetas */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}


/* ========================================
   MENÚ SPIN-OFF RESPONSIVE
   ======================================== */

/* Ocultar el header sticky en desktop */
header.sticky-top {
    display: none;
}

/* Mostrar el header sticky solo en móvil */
@media (max-width: 768px) {
    header.sticky-top {
        display: block;
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 1rem 0;
        z-index: 1041;
    }

    header.sticky-top .site-link {
        margin: 0;
        max-height: 40px;
    }

    header.sticky-top .fa-bars {
        font-size: 1.5rem;
        color: #0081C6;
        cursor: pointer;
    }

    /* Menú lateral en móvil - oculto por defecto */
    .menu {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1042;
        width: 280px !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
    }

    /* Menú visible cuando se activa */
    .menu.show {
        transform: translateX(0);
    }

    /* Backdrop oscuro cuando el menú está abierto */
    .menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1041;
    }

    .menu-backdrop.show {
        display: block;
    }

    /* Ajustar el contenido principal para que no tenga padding left */
    #content-right.content {
        padding-left: 0 !important;
        margin-top: 70px; /* Espacio para el header sticky */
    }

    /* Ajustar el logo del menú lateral */
    .menu .site-link {
        max-height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Scroll en el menú si es muy largo */
    .menu {
        overflow-y: auto;
        max-height: 100vh;
    }

    /* Ajustar items del menú para móvil */
    .menu .menu-link {
        font-size: 1rem;
        padding: 0.75rem 14px;
    }

    .menu .menu-cnt-icon {
        min-width: 35px;
    }

    /* Asegurar que el menú simple no se active en móvil */
    #menu-lateral.menu.menu-senzill {
        width: 280px !important;
    }

    #menu-lateral.menu.menu-senzill .complet {
        display: block !important;
    }

    #menu-lateral.menu.menu-senzill .senzill {
        display: none !important;
    }

    #menu-lateral.menu.menu-senzill .text-menu {
        display: flex !important;
        width: auto;
        padding-left: 10px;
        background: transparent;
    }

    /* Ocultar el botón de cambiar menú en móvil */
    .menu .menu-link[href="#"][onclick*="changeMenu"] {
        display: none;
    }

    /* Ajustar copyright del menú */
    .copyright-menu {
        position: relative;
        bottom: auto;
        padding: 1rem;
        margin-top: 2rem;
    }
}

/* Para tablets en modo portrait */
@media (min-width: 769px) and (max-width: 991px) {
    .menu {
        width: var(--menu-expanded-width, 200px);
    }

    #content-right.content {
        padding-left: calc(var(--menu-expanded-width, 200px) + 16px);
    }

    #content-right.content.menu-senzill {
        padding-left: 70px;
    }
}

/* Asegurar que en desktop el menú siempre sea visible */
@media (min-width: 769px) {
    .menu {
        transform: translateX(0) !important;
    }

    .menu-backdrop {
        display: none !important;
    }
}

/* ========================================
   MENU-V3 RESPONSIVE
   ======================================== */

/* Tablet (769px - 991px): menú más estrecho */
@media (min-width: 769px) and (max-width: 991px) {
    .menu-v3 {
        width: 220px;
    }
    .menu-v3 + #content-right,
    .menu-v3 ~ #content-right {
        padding-left: 220px !important;
    }
    .menu-v3-user-popover {
        width: 210px;
        left: 8px;
    }
}

/* Móvil (≤ 768px): menú oculto, header sticky */
@media (max-width: 768px) {
    /* Content-right cuando menu-v3 está activo */
    .menu-v3 ~ #content-right {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    /* Ocultar header de spin-off cuando menu-v3 está activo (ya tiene su propio header) */
    .menu-v3 ~ #content-right #header-data.content-header {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    /* Popover del usuario - full width en móvil */
    .menu-v3-user-popover {
        bottom: auto;
        top: 50%;
        left: 10px !important;
        right: 10px;
        width: calc(100vw - 20px);
        transform: translateY(-50%);
        max-height: 80vh;
        overflow-y: auto;
    }
    .menu-v3-user-popover.open {
        transform: translateY(-50%);
        animation: menuV3PopInMobile 0.18s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes menuV3PopInMobile {
        from { opacity: 0; transform: translateY(-48%) scale(0.97); }
        to { opacity: 1; transform: translateY(-50%) scale(1); }
    }
}

/* ========================================
   DASHBOARD V3 RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    /* Welcome section */
    .welcome-section .welcome-title {
        font-size: 1.1rem !important;
    }
    .welcome-section p.text-muted {
        font-size: 0.85rem;
    }

    /* Quick action cards más compactas */
    .quick-action-card {
        min-height: 80px !important;
        padding: 0.75rem !important;
    }
    .quick-action-card i.fa-2x {
        font-size: 1.3rem !important;
    }
    .quick-action-card span {
        font-size: 0.8rem;
    }

    /* Botón principal de enviar doc */
    .welcome-section .btn-primary.btn-lg {
        font-size: 0.9rem;
        padding: 0.65rem 1rem !important;
    }
    .welcome-section .btn-primary.btn-lg .fa-lg {
        font-size: 1rem !important;
    }

    /* Activity compact grid: 1 columna en móvil muy pequeño */
    .activity-compact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .activity-compact-item {
        padding: 8px 10px;
    }
    .activity-compact-icon {
        width: 28px;
        height: 28px;
    }
    .activity-compact-value {
        font-size: 1rem;
    }
    .activity-compact-label {
        font-size: 0.65rem;
    }

    /* Trust section */
    .trust-section {
        padding: 1rem !important;
    }
    .trust-section h5 {
        font-size: 1rem !important;
    }
    .trust-section p {
        font-size: 0.82rem;
    }
    .security-badges {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .badge-label {
        font-size: 0.78rem;
    }

    /* Documentos recientes */
    .recent-documents {
        padding: 1rem !important;
    }
    .recent-documents h5 {
        font-size: 1rem !important;
    }
    .recent-documents .input-group {
        width: 100% !important;
    }
    .recent-documents .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    /* Pending documents */
    .pending-documents {
        padding: 1rem !important;
    }
    .pending-documents h5 {
        font-size: 1rem !important;
    }
    .pending-item .pe-5 {
        padding-right: 3.5rem !important;
    }
    .pending-item .dates-info {
        flex-direction: column;
    }
    .pending-item .dates-info .me-3 {
        margin-right: 0 !important;
        margin-bottom: 0.25rem;
    }
    .pending-item .d-flex.align-items-center.justify-content-between.mt-2 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    /* Notifications widget */
    .notifications-widget {
        padding: 1rem !important;
        min-height: 200px;
    }
    .notifications-widget h5 {
        font-size: 1rem !important;
    }
    .notification-item {
        padding: 0.75rem !important;
    }
    .notification-icon {
        width: 30px;
        height: 30px;
    }
    .notification-message {
        font-size: 0.85rem;
    }

    /* Widgets generales */
    .bg-white.rounded-lg.shadow-sm.p-4 {
        padding: 1rem !important;
    }
    .bg-white.rounded-lg.shadow-sm.p-4 h5,
    .bg-white.rounded-lg.shadow-sm.p-4 h6 {
        font-size: 1rem !important;
    }
}

/* Pantallas muy pequeñas (≤ 480px) */
@media (max-width: 480px) {
    /* Activity grid: 1 columna */
    .activity-compact-grid {
        grid-template-columns: 1fr;
    }
    .activity-compact-item-full {
        grid-column: auto;
    }

    /* Quick actions: stacking mejorado */
    .quick-action-card {
        min-height: 70px !important;
    }

    /* Pagination más compacta */
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Botones de acción de documentos recientes */
    .doc-actions .btn {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
    }
    .doc-actions .btn i {
        font-size: 0.75rem;
    }
}

/* ========================================
   VISTAS GENERALES RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    /* Fixed width classes → 100% en móvil */
    .w-250,
    .w-200,
    .w-300,
    .w-350 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Topnav con flex-wrap */
    .topnav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .topnav .btn-group {
        order: -1;
    }
    .topnav .ml-auto,
    .topnav .ms-auto {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Filtros/selects en línea → stack vertical */
    .custom-select-wrapper {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
    .d-inline-flex.wrap,
    .d-inline-flex.flex-wrap {
        flex-direction: column;
        width: 100%;
    }

    /* Header data compacto */
    #header-data .pagetitle h4 {
        font-size: 1rem;
    }
    #header-data .right-header {
        display: none;
    }

    /* Sidebars que sobresalen */
    .side-panel,
    [style*="width: 600px"],
    [style*="width:600px"] {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Content box general padding */
    .content-box {
        padding: 0.75rem !important;
    }

    /* Stats/counters en línea */
    .stats-inline span {
        margin-left: 0.5rem !important;
        font-size: 0.82rem;
    }

    /* Modals full-width en móvil */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-xl {
        max-width: calc(100vw - 1rem);
    }

    /* Section padding */
    section {
        padding: 0 !important;
    }
    section .container-fluid {
        padding: 0.75rem !important;
    }
}