html,body{height: 100%}

body {margin: 0;font-family: Roboto,sans-serif;font-weight: 300;line-height: 1.571429;color:  var(--text);text-align: left;background-color: var(--body_bcolor);}

a {text-decoration: none;color: var(--menu_text)}
a:hover, a:focus {color: var(--menu_text_hover)}

.alert-secondary {color: #fff;background-color: rgba(255,255,255,0.2);border-color: transparent;}

h1,h2,h3,h4,h5,h6 {margin-bottom: .5715rem;font-weight: 600;line-height: 1.2;color: var(--text2);}
#wbs-root  h3, .page-header  h1 {margin-bottom: 2rem; border-bottom: 0 !important;}


.alert-success h3, .alert-danger h3{color: inherit;}

/* colores */
.wbs-text-color{color:var(--text)}
.wbs-color{color:var(--color)}
.wbs-color-transparent{color:var(--color_transparent)}
.wbs-color2{color:var(--color2)}
.wbs-color3{color:var(--color3)}
.wbs-alt-color{color:var(--alt_color)}
.wbs-alt-color2{color:var(--alt_color2)}


/* botones */
.btn.focus,.btn:focus{box-shadow: none}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
background-color: var(--color2);border-color: var(--color2);}
.btn-primary {background-color: var(--color); border-color: var(--color);}
.btn-primary:hover, .btn-primary:focus {background-color: var(--color2);border-color:var(--color2)}
.btn-outline-primary {color: var(--color) !important;border-color: var(--color) !important;border: 1px solid;}
.btn-outline-primary:hover {color: #fff !important;background-color: var(--color);border-color: var(--color);}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem var(--color_transparent)}
.btn-warning, .btn-warning:hover {color: #fff;}
.btn-group > .btn {min-width: 40px;}

.form-control:focus {box-shadow: 0 0 0 .2rem var(--color_transparent); border-color:#ced4da }

.wbs-login.offset-md-3.col-md-6 {margin-left: 0;max-width: 100%;}





/* Header */
.wbs-tpl-phone-menu-button {border: 0;color: #fff;background: transparent;margin-right: 15px;display: none}
.wbsa-header {background: var(--header_bcolor);color: var(--header_text);box-shadow: 0 0px 30px rgba(0,0,0,.10) !important; padding: 1rem}
.wbsa-logo {background: var(--brand_bcolor);width: var(--sidebar);padding: 0;text-align: left;}

/* Header right */
.wbsa-header-right {display: flex;align-items: center;}


@media (max-width: 767.98px) {
.wbsa-header.navbar {height: 50px;display: flex;align-content: center;}	
.wbsa-logo {padding: 10px 20px;position: fixed;top: 0;width: 100%;text-align: center}
.wbs-tpl-phone-menu-button {display: block;width: 50px;}
.wbsa-logo img {height: 40px;margin: 0;}
}

/* Content */
.wbsa-content-wrapper {margin-left: var(--sidebar);display: flex;flex-direction: column;width: calc(100% - var(--sidebar)) ;min-height: 90vh;margin-top: 72px;}
.wbsa-content{padding: 2rem 2rem 5rem 2rem; width: 100%;display:  flex ; flex-direction: column;}
.page-header h2{font-size: 26px}
.wbs-info-wrapper {background-color: transparent !important;border: 0 !important;margin-bottom: 0 !important;padding: 0 !important;}


/* Sidebar */
.wbsa-sidebar {background: var(--menu_bcolor);position:fixed;top:72px;bottom:0;left:0;z-index:100;padding:1.5rem 1rem;
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); width: var(--sidebar);}

@media (max-width: 767.98px) {
.wbsa-sidebar {position: fixed;transition: left 0.3s;height: 100%;overflow-y: scroll;top:30px;left: -450px;z-index: 200;box-shadow: none; padding-top: 30px;width: 100%}
.wbsa-sidebar .nav-icon {position: absolute;right: 25px;bottom:40px;	font-size: 20px;	z-index: 1;}
.has-active-menu .wbsa-sidebar {left: 0;}
.wbsa-content-wrapper {margin-left: 0; width: 100%;}
}

#wbs-root {width: 100%;}

/* Formularios */
.form-group {margin-bottom: 1rem;}
.form-row{display: flex; gap:0.5rem}
.form-control:disabled, .form-control[readonly] {background-color: #e9ecef;opacity: 1;} 
.btn-block{width: 100%;}

/* Pagination */
div.pagination {display: flex;justify-content: center;}
.page-item.active .page-link {color: #fff;	background-color: var(--color);	border-color: var(--color);}
.pagination [class^="icon-"] {font-family: "Font Awesome 6 Pro";}
.icon-angle-left::before {content: "";}
.icon-angle-double-left::before {content: "";}
.icon-angle-right::before {content: "";}
.icon-angle-double-right::before {content: "";}

 
/* Avatar */
.wbs-avatar-wrapper {width: 60px;height: 60px;margin: 0 !important;border: 0;}
.wbs-avatar-wrapper img {width: 100%;border-radius: 50%; margin-bottom: 0;}
.modal-backdrop {position: unset;} /* para poner el avatar en la barra de nav que es styky */
@media (max-width: 767.98px) {
.wbsa-logo {padding: 10px 20px;position: fixed;top: 0;width: 100%;text-align: center}
.wbs-tpl-phone-menu-button {display: block;width: 50px;}
.wbsa-logo img {height: 40px;margin: 0;}
.wbs-avatar-wrapper {width: 40px;height: 40px;}
.wbsa-logo {position: relative;flex: 1;}
}


/* Login */
html{height: 100%}
.wbsa-login-page #wbs-root {overflow: visible;}
.wbsa-login-page .wbsa-header {display: none;}
.wbsa-login-page .wbsa-sidebar {display: none;}
.wbsa-login-page .wbsa-footer {display: none;}
.wbsa-login-page { height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.wbsa-login-page .wbsa-content {padding: 0;margin: 0;width: 100%;text-align: center;height: 100vh;display: flex;justify-content: center;align-items: center;}
.wbs-brand {margin-bottom: 20px}
.wbsa-login-page .wbs-panel {background-color: rgba(255,255,255,0.7);width: 400px;border-radius: 22px;color: #000;}
.brand-img {width: 400px;}
.wbsa-login-page .wbs-panel-content {padding: 2rem 1rem 1rem;}
.wbsa-login-page .wbs-register-group-wrapper {overflow:visible;}
.wbsa-login-page .wbsa-content {background-image: none;}
.wbs-panel-content h3 {color: #000;}
.wbsa-login-page .wbsa-content-wrapper{margin-left: 0}
.wbs-login-links-forgot a {color: #333;}
@media (max-width: 767px) {
.wbsa-login-page .wbs-panel {width: auto;}
.wbs-brand {width: 195px;margin: 10px auto 0;}	
.wbsa-login-page .wbsa-content {background-image: none;align-items: start;}	
.wbsa-login-page .wbsa-content-wrapper {padding-top: 10px}
.wbsa-login-page .wbsa-content-wrapper {padding-top: 10px}
.wbs-cf-login {display: flex;flex-direction: column-reverse;}
.wbsa-login-page {position: fixed;top: 0;bottom: 0;left: 0;margin: 0;right: 0;}
#jform_email,#jform_username, #jform_token,#jform_password1,#jform_password2{width: 100%;}
.wbsa-login-page .wbs-panel {width: 90%;margin: 5% auto;}
.wbs-cf-login .wbs-panel {margin: 0;width: auto;}	
.wbs-panel-content h3 {font-size: 18px;}
}




/* scroll bar */
.ss-wrapper { overflow: hidden; width: 100%; height: 100%; position: relative; z-index: 1; float: left;}
.ss-content { height: 100%; width: calc(100% + 18px); padding: 0 0 0 0; position: relative; overflow-x: auto; overflow-y: scroll; box-sizing: border-box;}
.ss-content.rtl { width: calc(100% + 18px); right: auto;}
.ss-scroll { position: relative; background: rgba(0, 0, 0, 0.1); width: 9px; border-radius: 4px; top: 0; z-index: 2;cursor: pointer; opacity: 0; transition: opacity 0.25s linear;}
.ss-hidden {display: none;}
.ss-container:hover .ss-scroll,.ss-container:active .ss-scroll {opacity: 1;}
.ss-grabbed { -o-user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none;}




/* sidebar menu */
.wbsa-side-menu-title {color: var(--menu_text);font-size: 15px;text-transform: uppercase;padding: 0 24px;margin-top: 20px;font-weight: 300;}
.wbsa-side-menu ul {display: flex;flex-direction: column;}
.wbsa-side-menu li {list-style: none;margin-bottom: 0.5rem; color: var(--menu_text);border-radius: 5px;padding: 0.5rem 0;position: relative; display: block;width: 100%;}
.wbsa-side-menu li:last-child {margin-bottom: 0}
.wbsa-side-menu li a {display: block;position: relative;}
.wbsa-side-menu li a:hover{text-decoration: none;}
.wbsa-side-menu li.active, .wbsa-side-menu li.active:hover {background-color: var(--color);}
.wbsa-side-menu li:hover, .wbsa-side-menu li:hover li {background-color:#f5f5f5;}
.wbsa-side-menu .active a {color: #fff;}
.wbsa-side-menu li span.p-2 {width: 34px;text-align: center;padding: 0 !important;}
.wbsa-side-menu ul > li.parent{cursor: pointer;}
.wbsa-side-menu ul > li.parent::before {content:"\f106";position:absolute;right:.5rem;top:8px;transition-duration:0.3s;transform:rotate(180deg);font-family:"Font Awesome 6 Pro";}
.wbsa-side-menu .dropdown-menu {max-height: 0;width: calc(100% - 2rem);position: relative;margin: 1rem 0 0 2rem;display: none;
border: 0;font-size: 90%;	padding: 0;overflow: hidden; transition: max-height 3s ease-in-out;}
.wbsa-side-menu .dropdown.open .dropdown-menu {max-height: 500px; margin: 1rem 0 0 2rem;display: flex;}
.wbsa-side-menu ul > li.parent.open::before{transform:rotate(0deg);}



@media (max-width: 767.98px) {
.wbsa-side-menu > .parent > ul > li > a {padding: 10px 0 10px 18px;}
.wbsa-side-menu li a {width: 95%;}	
}






  
  /*
   * Navbar
   */
  
  .navbar-brand {box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); }
  .navbar .navbar-toggler {top: .25rem;right: 1rem;}
  .navbar .form-control {padding: .75rem 1rem;border-width: 0;border-radius: 0;}

  .form-control-dark {color: #fff;background-color: rgba(255, 255, 255, .1);border-color: rgba(255, 255, 255, .1);}
  .form-control-dark:focus {border-color: transparent;box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);}



 /*Footer*/
.wbsa-footer {background: #fff;padding: 7px 20px;bottom: 0;width: 100%;	left: var(--sidebar);position: fixed}
@media (max-width: 767.98px) {
.wbsa-footer {left: 0;padding: 7px 20px;text-align: center;}
.wbs-notifications-module-icon{display: none;}

}





/* Metrics */
.wbs-metrics-card {border-radius:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);text-align:center;border:1px solid #FFF; background:#fff; display: flex;
  flex-direction: column;justify-content: space-around;}
.wbs-metrics-card-value{color:var(--template-quickicon-color);font-weight: 700;font-size: 1.6rem; margin: 0;}
.wbs-metrics-card-title{margin: 0;color: var(--text-color);letter-spacing: 0.2px;text-transform: uppercase;line-height: 1.2;font-size: 0.8rem;}
.wbs-metrics-ui .wbs-gui-accions{min-width: 300px;}
.size-lg .wbs-metrics-card {width: 206px;padding:1.25rem 1rem;height: 90px;}
.size-sm .wbs-metrics-card {width: 96px;padding: .5rem;height: 64px;}
.size-sm .wbs-metrics-card-value {font-size: 1rem;margin: 0;}
.size-sm .wbs-metrics-format-date .wbs-metrics-card-value {font-size: 0.8rem;}
.size-sm .wbs-metrics-card-title {font-size: 0.6rem;}

/* bottom toolbar phone menu */
.wbsa-tpl-phone-bottom {position: fixed;bottom: 0;height: 50px;	display: flex; 	align-items: center;left: 0;right: 0;justify-content: space-between;	
  background-color: transparent;	background-image: url("../../../images/curva.png");	background-position: top center;}
.wbsa-tpl-phone-bottom-left,.wbsa-tpl-phone-bottom-right{background: #fff;}
.wbsa-tpl-phone-bottom-left, .wbsa-tpl-phone-bottom-right {width: calc(50% - 60px);display: flex;justify-content: space-around;height: 50px;align-items: center;}
.wbsa-tpl-phone-bottom-center {width: 46px;	height: 46px;	background: var(--alt_color2);	border-radius: 50%;	margin-top: -41px;
display: flex;	justify-content: center;	align-items: center;}
.wbsa-tpl-phone-bottom-center a {color: #FFF;}
@media (min-width: 768px) {
.wbsa-tpl-phone-bottom {display: none;}
}





/* Para este cliente */


/*
.wbsa-content {
	background-image: url("../../../images/backgrounds/fondo2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100vh; 
	background-position-x:  right;
	background-position-y:  -38px;
	
	background-attachment: fixed;
}
*/

/* pasar al estilo del groupjoom*/
.wbs-wmedia-list{display:flex;flex-wrap: wrap}
.wbs-wmedia-item {flex: 0 0 33%;padding: 10px 30px;margin-bottom: 20px;}
.wbs-wmedia-item .media-heading {font-size: 20px;}
@media (max-width: 767.98px) {
.wbs-wmedia-item {flex: 0 0 100%;padding: 10px 0px;text-align: center;}
.wbs-wmedia-item .media-heading {font-size: 18px;}	
}
.wbs-wmedia-item-whatsapp {
	float: left;
}

.wbs-wmedia-item-whatsapp i {cursor: pointer;font-size: 30px;background: #25d366;border-radius: 50%;line-height: 26px;color:#fff}
span.wbs-wmedia-item-whatsapp {margin-left: 10px;}

.wbs-wmedia-item-telegram i {cursor: pointer;font-size: 30px;background: #fff;border-radius: 50%;line-height: 26px;color:#32afed}
span.wbs-wmedia-item-telegram {margin-left: 10px;}
.cm-backoffice-title {
	background: #103449;
	text-align: center;
	font-size: 18px;
	padding: 8px 0;
	font-weight: bold;
	margin-bottom: 5px;
}