/* #9F2D3E //red */
/* #00836D verde */
/* azul: #19639A; */

/* Bootstrap CSS */
@import url("bootstrap.min.css");

/* Google Font CSS */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* Custom CSS */
@import url("reset.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

/* Variables */
:root{

  --header-height:56px;
  --sidebar-width:286px;

  --dashboard-page-header-height:80px;

}

/* Login Start */
.login-wrapper {
  min-height: 100dvh;
  background-color: #f5f9fc;
  position: relative;
  isolation: isolate;
}
.login-wrapper::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 180px;
  background-color: var(--primary);
  content: "";
  z-index: -1;
}
.login-wrapper .container {
  max-width: 1190px;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: url("../images/login-bg.png") left center no-repeat;
  background-size: auto 100%;
}
.login-form-box {
  background-color: white;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  border: 1px solid var(--disable);
  min-height: calc(100dvh - 100px);
}
.login-form-box > * > :not(:last-child) {
  margin-bottom: 25px;
}
.login-form-box .logo {
  margin-inline: auto;
  display: block;
}
.login-form-box .form-control {
  height: var(--form-control-height);
}
.form-list > :not(:last-child) {
  margin-bottom: 16px;
}
.password-toggle-btn{position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 1; background: url('../images/eye-off.png') center center no-repeat; background-size: 16px auto;}
.password-toggle-btn.active{background: url('../images/eye.png') center center no-repeat; background-size: 16px auto;}
.otp-controls{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; max-width: 310px; margin-inline: auto;}
.login-form-box .form-control.otp-input{text-align: center; aspect-ratio: 1; height: auto; font-size: 20px;}
.otp-links{max-width: 310px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between;}
.send-data-box{border-radius: 16px; border: 1px solid var(--sky-blue); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;}
.send-data-box .box-icon{background-color: rgba(72,70,92,.04);}
@media(width < 576px){
  .login-form-box{padding: 25px; min-height: auto;}
}
/* Login End */

/* Dashboard Start */
.dashboard{height: 100dvh; background-color: #f5f5fb; display: flex; flex-direction: column;}
.dashboard .dashboard-header{background-color: white; height: var(--header-height); padding: 0 40px 0 14px; display: flex; align-items: center; box-shadow: 0 0 2px rgba(75,70,95,0.2); position: relative; z-index: 99;}
.dashboard .dashboard-content{height: calc(100dvh - var(--header-height)); display: flex;}
.dashboard .dashboard-sidebar{background-color: white; width: var(--sidebar-width); height: 100%; display: flex; flex-direction: column; overflow: auto; flex-shrink: 0;}
.dashboard .dashboard-pages{height: 100%; width: calc(100vw - var(--sidebar-width)); overflow: auto; overflow-x: hidden;}

.dashboard-header .logo{margin-right: auto;}
.dashboard-header .logo img{max-width: 100px;}
.dashboard-header .nav-icon:not(:last-child){margin-right: 8px;}
.dashboard-header .nav-icon{width: 24px; aspect-ratio: 1; position: relative; cursor: pointer;}
.dashboard-header .nav-icon::before, .dashboard-header .nav-icon::after{position: absolute; left: 50%; width: 75%; height: 2px; content: ""; background-color: var(--primary); display: block;}
.dashboard-header .nav-icon::before{top: 25%; transform:translate(-50%, 0);}
.dashboard-header .nav-icon::after{bottom: 25%; transform:translate(-50%, 0);}
.dashboard-header .nav-icon.active::before{top: 50%; transform:translate(-50%, 0) rotate(-45deg);}
.dashboard-header .nav-icon.active::after{bottom:none; top: 50%; transform:translate(-50%, 0) rotate(45deg);}
.dashboard-header-links{display: flex; align-items: center; gap: 0 40px;}
.dashboard-header-links > *{display: block; position: relative;}
.user{display: flex; align-items: center; gap: 0 16px; color: var(--text-color-2); font-weight: 500;}
.user-image{width: 24px; border-radius: 100%;}
.notification-link span{display: grid; place-items: center; font-size: 10px; line-height: 1; width: 12px; aspect-ratio: 1; color: white; background-color: var(--danger);  position: absolute; right: -25%; top: 10%; border-radius: 100%;}
@media(width < 1200px){
  .dashboard-header-links{gap: 0 20px;}
  .user{gap: 0 10px; font-size: var(--fs-sm);}
}
@media(width < 768px){
  .user p{display: none;}
}
/* Dashboard End */

/* Menu Start */
.dashboard .dashboard-sidebar .menu{flex: 1 0 0%;}
.menu{padding-top: 10px;}
.menu li a{display: flex; align-items: center; gap: 0 10px; min-height: 54px; padding: 0 14px; font-size: var(--fs); font-weight: 700; color: var(--primary);}
.menu li a.active{background-color: var(--sky-blue-light);}
.menu li a .menu-icon{width: 20px; display: flex; justify-content: center;}
.menu li a .menu-icon svg{display: block;}
.dashboard .dashboard-sidebar .menu + p{padding: 24px 14px; font-size: var(--fs); font-weight: 500; color: var(--primary); line-height: 1;}
@media(width < 1200px){
  .menu li a{min-height: 46px; font-size: var(--fs-sm);}
}

.dashboard .dashboard-sidebar.icon-only{--sidebar-width:auto;}
.dashboard .dashboard-sidebar.icon-only .menu li a p{display: none;}
.dashboard .dashboard-sidebar.icon-only .menu li a p + *{display: none;}
.dashboard .dashboard-sidebar.icon-only .menu + p{text-align: center;}
.dashboard .dashboard-sidebar.icon-only .menu + p span{display: none;}
.dashboard .dashboard-sidebar.icon-only .menu li a .menu-icon{width: 40px;}
.dashboard .dashboard-header{background-color: white; height: var(--header-height); padding: 0 14px 0 14px;}

.welcome-modal-content{padding: 35px 50px;}
.welcome-modal-content figure:not(:last-child){margin-bottom: 16px;}
.welcome-modal-content .btn{min-width: 250px;}

.dashboard-pages{padding: 30px 30px 0 30px;}
.white-box{background-color: white; border-radius: 12px;}
.dashboard-page-header:not(:last-child), .dashboard-page-content:not(:last-child){margin-bottom: 12px;}
.dashboard-page-header-group{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;}
.page-header-icon{height: var(--form-control-height); aspect-ratio: 1; display: grid; place-items: center; border-width: 1px; border-style:solid; border-radius: 6px; transition: var(--transition); border-color: var(--disable); position: relative;}
.page-header-icon.has-counter{margin-top: 11px; margin-right: 11px;}
.page-header-icon-counter{position: absolute; right: 0; top: 0; transform: translate(50%, -50%); width: 22px; aspect-ratio: 1; border-radius: 100%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 500;}
.page-header-icon-counter.bg-danger{color: white;}
.page-header-icon svg path{stroke:var(--disable);}
.page-header-icon.page-header-icon-sm{height: calc(var(--form-control-height) - 8px);}
.dashboard-page-header .form-control.search{height: var(--form-control-height);}
.page-header-icon.page-header-icon-primary{border-color: var(--primary);}
.page-header-icon.page-header-icon-primary.active{background-color: var(--primary);}
.page-header-icon.page-header-icon-primary svg path{stroke: var(--primary);}
.page-header-icon.page-header-icon-success{border-color: var(--success);}
.dashboard-page-header-group .page-header-icon.page-header-icon-success.active{background-color: var(--success);}
.page-header-icon.page-header-icon-success svg path{stroke: var(--success);}
.page-header-icon.active svg path{stroke: white;}
.dashboard-page-header-group .form-control.search{height: var(--form-control-height);}
.dashboard-page-footer{padding-bottom: 16px;}

@media(width < 1200px){
  .dashboard-pages {
    padding: 15px 15px 0 15px;
  }
}

table.table{margin-bottom: 0; width: 100%;}
table{--bs-border-color:var(--light-grey-2); min-height: 100%; vertical-align: middle;}
table thead tr th, table tbody tr td{padding: 10px 16px !important; vertical-align: middle;}
table thead tr th > *, table tbody tr td > *{display: flex; align-items: center; gap: 0 20px;}
table thead tr th{ --bs-table-bg:var(--light-grey-2); color: var(--text-color-4) !important; font-weight: 600; font-size: var(--fs);}
table thead tr th{white-space: nowrap; border: 1px solid var(--light-grey-2);}
table tbody tr td{border: 1px solid var(--light-grey-2);}
.table-header-count{width: 30px; aspect-ratio: 1; border-radius: 100%; background-color: var(--primary); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 500; color: white;}
table tbody tr:hover td, table tbody tr.active td{background-color: var(--light-grey-3);}
table tbody tr td p{font-size: var(--fs); font-weight: 500; color: var(--text-color-4);}
table .dropdown-toggle{padding: 5px 0;}
.table-avatar{width: 33px; aspect-ratio: 1; border-radius: 100%; overflow: hidden;}
.table-avatar img{object-fit: cover; width: 100%; height: 100%;}
svg.pin-icon.inactive path{stroke: var(--disable) !important;}

.avatar-and-name{display: flex; align-items: center;}
@media(width < 576px){
  .table-item-detail-header .close-btn{position: absolute; right: 20px; top: 30px; margin: 0; padding: 0;}
}

.attachment-item{border-radius: 12px; border: 1px solid var(--grey-1); background-color: var(--grey-2); width: 112px; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center;}
button.attachment-item{background-color: var(--light-grey-2); border-color: var(--light-grey-2);}
.attachment-item.attachment-item-danger{border-color: var(--danger); background: none;}
.attachment-item.attachment-item-danger svg path{stroke: var(--danger);}

.module-list-item input[type="checkbox"]{display: none;}
.module-list-item label{display: block; position: relative; padding-left: 44px !important;}
.module-list-icon{width: 34px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px;}
.module-list-icon.module-list-icon-lg{width: 66px;}
.module-list-icon.module-list-icon-lg > *{width: 40%;}
.module-list-icon.danger{background-color: #EBBAD6;}
.module-list-icon.info{background-color: #EBCFBA;}
.module-list-icon.success{background-color: #BAEBCF;}
.module-list-item.danger p{color: #9F2D3E;}
.module-list-item.info p{color: #845700;}
.module-list-item.success p{color: #2D836A;}
.module-list-item label::before{position: absolute; left: 12px; top: 50%; transform:translateY(-50%); content: ""; width: 18px; height: 18px; border: 2px solid #212B32; border-radius: 2px;}
.module-list-item input[type="checkbox"]:checked ~ label::before{border-color: var(--primary); background: url(../images/check.svg) center center no-repeat; background-size: 60% auto;}
.module-list-item input[type="checkbox"]:checked ~ label{background-color: var(--light-grey-2); border-color: var(--primary);}
.module-item-info-color{color: #845700;}
.module-item-danger-color{color: #9F2D3E;}
.module-list-item-disable .module-list-icon{background-color: var(--grey-2);}
.module-list-item-disable .module-list-icon img{filter: grayscale(100%);}

.attach-file input[type="file"]{display: none;}
.attach-file label{height: 44px; border-radius: 6px; background-color: var(--light-grey-2); display: flex; align-items: center; justify-content: center; gap: 12px; font-size: var(--fs); font-weight: 500; color: var(--primary); padding: 0 10px;}

.page-sidebar{width: 300px;}
@media(width < 992px){
  .page-sidebar{width: 100%;}
}

.search-module-list{border-radius: 6px; border: 1px solid var(--grey-2);}
.search-module-list li{display: flex; align-items: center; gap: 5px 10px; min-height: 44px; position: relative; padding: 0 16px; padding-left: 22px;}
.search-module-list li:not(:last-child){border-bottom: 1px solid var(--grey-2);}
.search-module-list li::before{position: absolute; left: 0; top: 0; width: 8px; height: 100%; background-color: var(--sky-blue-light); content: "";}
.search-module-list li p{font-size: var(--fs-sm); font-weight: 500; color: var(--text-color-4);}
.search-module-list li:hover, .search-module-list li.active{background-color: var(--light-grey-2);}
.search-module-list li:hover p, .search-module-list li.active p{color: var(--primary);}
.search-module-list li:hover::before, .search-module-list li.active::before{background-color: var(--primary);}

.features-search-list li input{margin: 0; width: 18px; height: 18px; border: 2px solid #666666;}
.features-search-list li label{font-size: var(--fs-sm); font-weight: 500; color: var(--text-color-4); line-height: 16px; display: flex; align-items: center; gap: 0 10px; height: 44px; padding: 0 8px;}
.features-search-list li:hover{background-color: var(--light-grey-2);}
.features-search-list li input:checked{background-color: var(--primary); border-color: var(--primary);}
.features-search-list li input:checked ~ label{background-color: var(--light-grey-2);}

.search-module-list-block{min-width: 290px;}

.map-bg{background: url('../images/map-image.jpg') center center no-repeat; background-size: cover;}

.property-card{border-radius: 4px; border: 1px solid var(--grey-1);}
.property-card figure{height: 100px; overflow: hidden;}
.property-card figure img{object-fit: cover; width: 100%; height: 100%;}
.property-card-icon{width: 20px; aspect-ratio: 1; padding: 2px;}
.property-card-icon svg{width: 15px; display: grid; place-items: center;}
.property-card .bg-purple-extra-light svg path{stroke: var(--purple);}
.property-cards-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}

.dashboard-page-header-height{min-height: var(--dashboard-page-header-height); flex-shrink: 0;}
.dashboard-page-content.dashboard-page-content-height{height: calc(100dvh - var(--dashboard-page-header-height) - var(--header-height));}
.dashboard-page-content-grid{display: grid; grid-template-columns: repeat(2, 1fr);}

.dashboard-page-content-grid-2{display: grid; grid-template-columns: auto 1fr;}
.map-bg-wrap{width: 400px;}
.property-cards-grid-2{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.property-cards-grid-3{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.property-card-image{position: relative;}
.property-card-image-label{position: absolute; left: 0; top: 0; width: 100%; min-height: 24px; padding: 0 10px;}
.property-card-image-label.sky-blue{background-color: #22A3E6;}
.property-card-image-label.green{background-color: #00A488;}
.property-card-image-label.yellow{background-color: #B28F00;}

.nav-tabs-wrap {border-bottom: 2px solid #C0C0C0;}
.nav-tabs-wrap .nav.nav-tabs{border: 0;}

@media(width < 1499px){
  .property-cards-grid-2{grid-template-columns: repeat(2, 1fr);}
  .property-cards-grid-3{grid-template-columns: repeat(3, 1fr);}
}
@media(width < 1399px){
  .dashboard-page-content-grid-2{grid-template-columns: 1fr;}
  .property-cards-grid-2{grid-template-columns: repeat(3, 1fr);}
  .property-cards-grid-3{grid-template-columns: repeat(2, 1fr);}
  .map-bg-wrap{width: 100%; min-height: 300px; overflow: hidden;}
}
@media(width > 1199px){
  .property-cards-grid-wrap{overflow: auto;}
}
@media(width < 1200px){
  .map-bg{min-height: 400px;}
  .dashboard-page-content-grid{grid-template-columns: 1fr; gap: 20px;}
  .property-cards-page{overflow: auto;}
}
@media(width < 992px){
  .property-cards-grid-2{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 768px){
  .map-bg{min-height: 300px;}
  .property-cards-grid{grid-template-columns: 1fr;}
  .property-cards-grid-2{grid-template-columns: 1fr;}
  .property-cards-grid-3{grid-template-columns: repeat(1, 1fr);}
}

.Sport-fit-image{width: 140px; aspect-ratio: 1.8/1; border-radius: 6px;}
.Sport-fit-image img{width: 100%; height: 100%; object-fit: contain; border-radius: inherit;}
.content-image{width: 140px; aspect-ratio: 1.8/1; border-radius: 6px;}
.content-image img{width: 100%; height: 100%; object-fit: contain; border-radius: inherit;}
.property-box-headding svg{display: block;}
.property-box-headding.success{color: var(--success);}
.property-box-headding.success svg path{stroke: var(--success);}
.property-box-headding.purple{color: var(--purple);}
.property-box-headding.purple svg path{stroke: var(--purple);}
.property-box-headding.info{color: var(--info);}
.property-box-headding.info svg path{stroke: var(--info);}
.property-box-headding.danger{color: var(--danger);}
.property-box-headding.danger svg path{stroke: var(--danger);}
.property-box-headding.sky-blue{color: var(--sky-blue);}
.property-box-headding.sky-blue svg path{stroke: var(--sky-blue);}
.min-map{height: 130px; min-height: auto;}
.border-box-bg-header{background-color: var(--light-grey-2); border-radius: inherit;}

table.plans-table{border-collapse: collapse; width: 100%;}
table.plans-table thead tr{border-bottom: 2px solid #C0C0C0;}
table.plans-table thead tr th, table.plans-table tbody tr td{padding: 5px !important; border: 0;}
.table-badge{font-size: 12px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 0 5px; line-height: 1; padding: 5px 8px; border-radius: 4px; background-color: var(--grey-2); color: var(--text-color-4);}
.table-badge svg{width: 12px; display: block;}
.table-badge svg path{stroke:var(--text-color);}
.table-badge.danger{background-color: #FFF3F2; color: var(--danger); text-align: center;}
.table-badge.success{background-color: #E0F8F1; color: var(--success); text-align: center;}
.table-badge.primary{background-color: var(--sky-blue-light); color: var(--primary); text-align: center;}
.table-badge.info{background-color: #fefff0; color: #B28F00; text-align: center;}
.table-badge.info svg path{stroke: #B28F00;}


.table-badge.purple{background-color: var(--purple-extra-light); color: var(--purple); text-align: center;}
.table-badge.purple svg path{stroke: var(--purple); color: var(--purple);}
.table-badge.sky-blue{background-color: var(--sky-blue-light); color: var(--sky-blue); text-align: center;}
.table-badge.sky-blue svg path{stroke: var(--sky-blue); color: var(--sky-blue);}

.table-color-indicator{border-radius: 4px; width: 40px; height: 30px; background-color: #F7F7F7; display: grid; place-items:center;}
.table-color-indicator::after{display: block; width: 18px; height: 18px; border-radius: 100%; content: ""; background-color: #D9D9D9;}
.table-color-indicator.blue{background-color:#E1F4FD;}
.table-color-indicator.blue::after{background-color: #22A3E6;}
.table-color-indicator.green{background-color:#FFFCEE;}
.table-color-indicator.green::after{background-color:#B28F00;}

.devider-row{display: flex; align-items: center; margin: -5px -8px;}
.devider-row > *{padding: 5px 8px; position: relative;}
.devider-row > :not(:last-child)::after{position: absolute; right: 0; top: 50%; transform:translateY(-50%); content: ""; width: 2px; height: 14px; background-color: #212B32; content: "";}

@media(width < 768px){
  .devider-row{display: block;}
  .devider-row > :not(:last-child)::after{display: none;}
}

.table-grid-row{display: grid; grid-template-columns: repeat(7, 1fr);}
.table-grid-row > :not(:last-child){border-right: 1px solid #dcdcdc;}
.table-grid-col{height: 60px; min-width: 150px;}
.table-list-ul li{height: 60px;}
.table-grid-row > *{position: relative;}
.table-grid-item-box{position: absolute; left: 0; top: 0; height: 100%; border: 1px solid var(--sky-blue); border-left-width: 4px; border-radius: 6px; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2px 4px; background-color: white;}
.table-grid-item-box p{white-space: nowrap;}
.table-grid-item-user figure{flex-shrink: 0; width: 25px; height: 25px; border-radius: 100%;}
.table-grid-item-user figure img{object-fit: cover; width: 100%; height: 100%; border-radius: inherit;}
.table-grid-wrap-grid{display: grid; grid-template-columns: 240px 1fr; overflow: auto;}
.table-accordian-header{min-height: 24px; display: flex; align-items: center;}
.table-accordian-checkbox{width: 30px;}
.table-accordian-content{padding-left: 30px; padding-top: 10px;}
.row-images{display: flex; flex-wrap: wrap; gap: 10px;}
.row-images figure{width: 70px; aspect-ratio: 1; border-radius: 6px;}
.row-images figure img{border-radius: inherit; object-fit: cover; width: 100%; height: 100%;}
.table-accordian li:not(:last-child){margin-bottom: 15px;}
.table-accordian li.active .table-accordian-header .table-accordian-arrow-icon{transform: rotate(-180deg);}
.table-accordian li .table-accordian-content{display: none;}
.table-accordian li .table-accordian-header{cursor: pointer;}
.table-accordian li .table-accordian-header p.time{opacity: 0; visibility: hidden; transition: 150ms linear;}
.table-accordian li.active .table-accordian-header p.time{opacity: 1; visibility: visible;}

.execution-box{width: 330px;}
.chat-list li figure{flex-shrink: 0; width: 36px; aspect-ratio: 1; border-radius: 100%;}
.chat-list li figure img{object-fit: cover; width: 100%; height: 100%; border-radius: inherit;}
.chat-input-wrap{position: relative;}
.chat-input-wrap input{padding-right: 40px;}
.chat-input-wrap button{position: absolute; right: 5px; top: 50%; transform:translateY(-50%); height: 80%; aspect-ratio: 1; border-radius: 6px; background-color: var(--primary); display: grid; place-items: center;}
.table tr.bg-success-light td{background: none;}

.select-team li:not(:last-child){margin-bottom: 5px;}
.select-team .checkbox label{padding: 10px; padding-left: 40px;}
.select-team .checkbox label::before{left: 10px;}
.select-team .checkbox input[type="checkbox"]:checked ~ label{background-color: #E1F4FD;}
.select-team .checkbox label .select-team-item{display: none;}
.select-team .checkbox input[type="checkbox"]:checked ~ label .select-team-item{display: block;}
.select-team-sidebar{width: 260px;}
@media(width < 768px){
  .select-team-sidebar{width: 100%;}
}

.search-module-list .Sport-fit-image{width: 70px;}
.counter-field-wrap p{background-color: white; display: flex; align-items: center; white-space: nowrap; border-top-left-radius: var(--form-control-radius); border-bottom-left-radius: var(--form-control-radius); font-size: var(--fs-sm); font-weight: 600; padding: 0 10px; border: 1px solid var(--disable); border-right: 0;}
.counter-field-wrap .form-control{border-top-left-radius: 0; border-bottom-left-radius: 0; width: 60px; text-align: center; padding-right: 0;}

table.modal-table{width: 100%;}
table.modal-table thead tr th, table.modal-table tbody tr td{border: 0; padding: 6px 4px !important;}
.measurement-checkbox-item .checkbox label{background-color: var(--grey-2); display: flex; padding: 10px; padding-left: 35px; flex-wrap: wrap; gap: 10px;}
.measurement-checkbox-item .checkbox label::before{left: 10px;}
.measurement-checkbox-item .checkbox input[type="checkbox"]:checked ~ label{background-color: var(--light-grey-2);}

tr.bg-light-grey-2 td{background: none;}
.fixed-buttons{position: fixed; left: 0; bottom: 0; width: 100%; padding: 15px 30px; background-color: white;}


.count{width: 28px; padding: 5px; background-color: white; border-radius: 5px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-color-4); line-height: 1;}

table.work-orders-table{width: 100%; border-collapse: collapse;}
table.work-orders-table thead tr th, table.work-orders-table tbody tr td{padding: 6px !important; border: 0;}
table.work-orders-table tbody tr:hover td{background: none;}
table.work-orders-table thead tr th div{display: flex; align-items: center; justify-content: center; gap: 5px; height: 44px; border-radius: 12px; background-color: var(--light-grey-2); font-size: var(--fs); font-weight: 600; color: var(--success);}
table.work-orders-table tbody tr td > div{height: 110px; border-radius: 12px; border: 1px solid #A9D8F1; background-color: var(--light-grey-2); padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 142px;}
table.work-orders-table tbody tr td div .number{color: #A9D8F1;}
.order-counter{display: flex; justify-content: space-between; padding-top: 10px; width: 100%;}
.order-counter-item{width: 30px; height: 30px; border-radius: 6px; background-color: white; border-width: 1px; border-style: solid; border-color: #4C6272; margin-right: 10px; position: relative; display: grid; place-items: center;}
.order-counter-item span{display: grid; place-items: center; background-color: #4C6272; width: 20px; aspect-ratio: 1; border-radius: 100%; position: absolute; right: 0; top: 0; transform:translate(50%, -50%); font-size: var(--fs-sm); font-weight: 600; color: white;}
.order-counter-item.sky-blue{border-color: var(--sky-blue);}
.order-counter-item.sky-blue span{background-color: var(--sky-blue);}
.order-counter-item.sky-blue svg path{stroke: var(--sky-blue);}
.order-counter-item.success{border-color: #00A488;}
.order-counter-item.success span{background-color: #00A488;}
.order-counter-item.success svg path{stroke: #00A488;}
.order-counter-item.danger{border-color: var(--danger);}
.order-counter-item.danger span{background-color: var(--danger);}
.order-counter-item.danger svg path{stroke: var(--danger);}

.ticket{display: flex;}
.ticket-image{width: 70px; height: 80px; flex-shrink: 0; border-radius: 6px; overflow: hidden;}
.ticket-image img{object-fit: cover; width: 100%; height: 100%;}
.ticket-label{background-color: #9D9D9D; border-radius: 6px; padding: 2px 5px;}
.ticket-label-obscuro{background-color: #5e5b5b; border-radius: 6px; padding: 2px 5px;}
@media(width < 768px){
  .ticket{display: block;}
  .ticket > :not(:last-child){margin-bottom: 10px;}
}


.accordian-item:not(:last-child){margin-bottom: 10px;}
.accordian-item{border-radius: 6px; background-color: #FCFCFC;}
.accordian-item-header{position: relative;}
.accordian-item-angle{position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.accordian-item-header, .accordian-item-content{padding: 12px 12px 12px 40px;}
.accordian-header-label{font-size: 12px; white-space: nowrap; border-radius: 6px; background-color: #F7F7F7; padding: 2px 4px;}
.accordian-header-label.success{color: white !important; background-color: var(--success);}
.accordian-header-label.danger{color: white !important; background-color: var(--danger);}
.accordian-header-label.info{color: white !important; background-color: var(--primary);}
.accordian-item.active{border: 1px solid var(--primary); background-color: #f8fbff;}
.accordian-item.active .accordian-item{border: 0;}
.accordian-item.active > .accordian-item-header .accordian-item-angle{transform: translateY(-50%) rotate(90deg);}
.accordian-item.active > .accordian-item-header p{color: var(--primary);}
.accordian-item.active > .accordian-item-header .accordian-item-angle svg path{stroke: var(--primary);}
.accordian-item .accordian-item{background: none;}
.accordian-item .accordian-item .accordian-item-header, .accordian-item .accordian-item .accordian-item-content{padding-left: 20px; padding-right: 0;}
.accordian-item .accordian-item .accordian-item-header .accordian-item-angle{left: 0;}
.accordian-item-content.hide{display: none;}
.accordian-item-content.show{display: block;}

.accordian-item.active > .accordian-item-header.dark-header p{color: #212B32 !important;}
.accordian-item.active > .accordian-item-header.dark-header .accordian-item-angle svg path{stroke: #212B32 !important;}
.accordian-item.active > .accordian-item-header.primary-header p{color: var(--primary) !important;}
.accordian-item.active > .accordian-item-header.primary-header .accordian-item-angle svg path{stroke: var(--primary) !important;}
.accordian-item.active > .accordian-item-header.danger-header p{color: var(--danger) !important;}
.accordian-item.active > .accordian-item-header.danger-header .accordian-item-angle svg path{stroke: var(--danger) !important;}


.page-header-button{border-radius:6px; height: var(--form-control-height); display: flex; align-items: center; color: var(--text-color); padding: 0 16px; gap: 0 15px;}
.page-header-button.page-header-button-white{background-color: white;}
.border-primary{border: 1px solid var(--primary) !important;}

.box-accordian-item:not(:last-child){margin-bottom: 12px;}
.box-accordian-item{background-color: white; border-radius: 6px; padding: 10px;}
.box-accordian-label{font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text-color-4); display: inline-flex; align-items: center; background-color: var(--grey-2); padding: 3px 5px; border-radius: 4px;}
.box-accordian-label.active{background-color: var(--success); color: white;}
.box-accordian-label.success{background-color: #E0F8F1; color: var(--success);}
.box-accordian-label.primary{background-color: #E1F4FD; color: var(--primary);}
.box-accordian-label.danger{background-color: #FFF3F2; color: var(--danger);}
.box-accordian-item.active{border: 1px solid var(--success);}
.box-accordian-item.active svg.rotate{transform: rotate(90deg);}
.box-accordian-item-content{margin-top: 10px;}
.pl-30{padding-left: 30px;}

.docuemnt-image{position: relative;}
.docuemnt-image button{position: absolute; right: 0; top: 0; transform: translate(50%, 0);}

/* CUSTOM CSS */

.rotate-180{
    transform: rotate(180deg);

    transition: transform 0.3s ease;
}

.animate{
    transition: transform 0.3s ease;
}


.dataTables_paginate .paginate_button {

    margin: 0 0.25rem;
    width: 40px !important;
    height: 29px !important;
    padding-top: 4px !important;
    padding-right: 16px !important;
    padding-bottom: 4px !important;
    padding-left: 16px !important;
    border-radius: 6px !important;
    color: #0f6491 !important;
    background-color: #fff;
    border: 1px solid #dee2e6;
    font-weight: 700 !important;
}

.dataTables_paginate .paginate_button.current {
    color: #fff !important;
    background-color: #0f6491;
    border-color: #0f6491;
}

.dataTables_paginate .paginate_button:hover:not(.current) {
    color: #0f6491 !important;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.pac-container {
    z-index: 10000 !important;
  }

  .v-select {
    width: 100%;
    font-size: 1rem;
  }

  .v-select .vs__dropdown-toggle {
    margin-bottom: 5px ;
    min-height: 38px;
    border: 1px solid #495057;
    border-radius: 0.375rem;
  }

  /* .v-select .vs__actions {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.4rem;
  } */

  .v-select .vs__clear,
  .v-select .vs__open-indicator {
    position: relative;
    transform: none;
    color: #adb5bd; /* color claro para íconos */
    cursor: pointer;
  }

  .v-select .vs__clear:hover,
  .v-select .vs__open-indicator:hover {
    color: #fff;
  }

  .cursor-pointer{
    cursor: pointer !important;
  }

    .custom-after::after {
        background-color: var(--dynamic-color); /* Usar una variable CSS */
    }


/* Aplica a los th que tengan las flechas de DataTables */
th.sorting, th.sorting_asc, th.sorting_desc {
    padding-right: 20px !important; /* Aumenta el espacio en el lado derecho */
    vertical-align: middle !important; /* Centra el contenido verticalmente */
}

/* Opcional: Si el texto está muy pegado a la flecha, agrega margen al texto */
th > div, th > span {
    margin-right: 20px;
}

/* Opcional: Si la flecha está alineada arriba, puedes forzar alineación vertical */
th .sorting-icon, th .sort-icon, th .datatable-sort-icon {
    vertical-align: middle;
}


table.dataTable {
  table-layout: auto !important;
  width: 100% !important;
}
table.dataTable th,
table.dataTable td {
  min-width: 90px;
  padding: 8px 16px;
  box-sizing: border-box;
  word-break: break-word;
}

/* Ajuste global para v-select */
.v-select {
  width: 100%;
  overflow: visible !important;
}

.v-select .vs__dropdown-toggle {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding-right: 35px !important;
  overflow: visible;
}

.v-select .vs__selected {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 30px;
}

.v-select .vs__actions {
  position: absolute;
  right: 1px;
  top: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  height: auto;
}

.v-select .vs__clear,
.v-select .vs__open-indicator {
  /* display: flex !important; */
  align-items: center;
  justify-content: center;
  width: 18px !important;
  height: 18px !important;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none !important;
}

.v-select .vs__clear svg,
.v-select .vs__open-indicator svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.5;
}




.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip hidden by default */
.tooltip-text {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12px;
  transition: opacity 0.17s;
  z-index: 12;
  pointer-events: none;
  white-space: pre-line;
  min-width: 120px;
  max-width: 250px;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Tooltip arrow (for all sides) */
.tooltip-text::after {
  content: '';
  position: absolute;
  border-style: solid;
}

/* — POSITIONING — */
/* Top */
.tooltip-text.top {
  bottom: 125%; left: 50%; transform: translateX(-50%);
}
.tooltip-text.top::after {
  top: 100%; left: 50%; transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: #222 transparent transparent transparent;
}
/* Bottom */
.tooltip-text.bottom {
  top: 125%; left: 50%; transform: translateX(-50%);
}
.tooltip-text.bottom::after {
  bottom: 100%; left: 50%; transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #222 transparent;
}
/* Left */
.tooltip-text.left {
  right: 125%; top: 50%; transform: translateY(-50%);
}
.tooltip-text.left::after {
  left: 100%; top: 50%; transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #222;
}
/* Right */
.tooltip-text.right {
  left: 125%; top: 50%; transform: translateY(-50%);
}
.tooltip-text.right::after {
  right: 100%; top: 50%; transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-color: transparent #222 transparent transparent;
}
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* CLAVE: no recorta, agrega espacios */
  object-position: center;
  border-radius: inherit;
  display: block;


}

.image-detail {
  object-fit: contain;    /* CLAVE: no recorta, agrega espacios */
  object-position: center;
  border-radius: inherit;
  display: block;


}