/* XPages Application CSS */
.xsp .estadoAdmiracionTriangulo {
	color:#E84C20;
	font-size:20pt;
}
.buttonMarca{
	display: block;
    font-size: 1rem;
    background: #e76c67;
    border: 1px solid #e76c67;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
}
.xsp .estadoBasuraOcre {
	color:#9F86B7;
	font-size:20pt;
}
.xsp .estadoLupaVioleta {
	color:#b733a7;
	font-size:20pt;
}
.xsp .todoGrey {
	color:#a9a9a9!important;
}
.xsp .estadoAdmiracionCirculo {
	color:#f0ad4e;
	font-size:20pt;
}
.xsp .estadoTilde {
	color:#5cb85c;
	font-size:20pt;
}
.xsp .estadoTareasAzul {
	color:#9ED4E7;
	font-size:20pt;
}
.xsp .estadoAdmiracionTrianguloBg {
	background-color:#E84C20;
}
.xsp .estadoBasuraOcreBg {
	background-color:#9F86B7;
}
.xsp .estadoLupaVioletaBg {
	background-color:#b733a7;
}
.xsp .todoGreyBg {
	background-color:#a9a9a9!important;
}
.xsp .estadoAdmiracionCirculoBg {
	background-color:#f0ad4e;
}
.xsp .estadoTildeBg {
	background-color:#5cb85c;
}
.xsp .estadoTareasAzulBg {
	background-color:#9ED4E7;
}

.xsp .btnIncomplete {
	background-color:#777777;
	color:white;
	border-color:#777777;
}
.xsp .btnIncomplete:hover {
	background-color:#555555;
	border-color:#555555;
}

.xsp .todoStatusIcon14{
	font-size: 14pt;
	position: relative;
	top: 2px;
}

.dashBtn {
	margin-bottom: 4px;
}
.buttonPanel {
	margin: 20px 0px;
}

/*Agrego */
@media (min-width: 1200px) {
	.xsp .xspDashTitle {
		font-size: 24px !important;
    	line-height: 33px !important;
	}
}

@media (max-width: 1200px) {
	.xsp .todoGlyphSize {
		font-size:32pt !important;
	}
	.xsp .xspDashTitle {
		font-size:10pt !important;
	}
	
}

@media (max-width: 992px) {
	.xsp .todoGlyphSize {
		font-size:32pt !important;
	}
	.xsp .xspDashTitle {
		font-size:10pt !important;
	}
	
}

.xspDataViewAuthor {
	min-width:150px;
}

.xspDataViewDue {
	min-width:120px;
}

@media (max-width: 768px) {
	.dropdown-menu.xspDropdown {
		text-align:center;
	}
	.dropdown-menu.xspDropdown input{
		width: 50%;
		display: inline;
	}
	.dropdown-menu.xspDropdown .xspDropdownLabel{
		color:white;
	}
	.dropdown-menu.xspDropdown .alert {
		float:none;
		padding:4px;
		margin-top:6px;
		margin-bottom:0px;
		display:block;
	}
	.xspNavbar .navbar-collapse .navbar-text {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.xspDataViewPriority, .xspDataViewDue, .xspDataViewDetail {
		display:none;
	}
	.xspDataViewAuthor {
		min-width:120px;
	}
}

@media (min-width: 768px) {
	.navbar-collapse .navbar-nav {
		float:right;
		margin-left:20px;
	}
	.dropdown-menu.xspDropdown {
		right:0;
		left:auto;
	}
	.dropdown-menu.xspDropdown .alert {
		float:right;
		padding:4px;
		margin-bottom:0px;
	}
}

@media (max-width: 600px) {
	.buttonPanel,
	.dashPager {
		text-align: center;
	}
	.buttonPanel,
	.dashPager .pagination {
		margin: 4px 0px;
	}	
	div.pull-right,
	div.pull-left {
		width: 100%;
	}
	.xsp .todoGlyphSize {
		font-size:30pt !important;
	}
	
	/* Fix padding for form on XS devices */
	.xsp .xspFormTableContainer .form-table .control-label {
		padding-left: 8px;
	}
	.xsp.dbootstrap .xspFormTableContainer {
		padding: 8px;
	}
}

.xsp .navbar-collapse {
	text-align:center;
}
.xsp .navbar-collapse .navbar-right li {
	display:inline-block;
}
.table.dataview td {
	vertical-align: middle;
}

/* Styles for indicator colouring on navbar menu */
.homeStyle .glyphicon-home.utilIcon,
.todoStyle .glyphicon-th-list.utilIcon,
.completeStyle .glyphicon-ok.utilIcon,
.urgentStyle .glyphicon-exclamation-sign.utilIcon,
.overdueStyle .glyphicon-warning-sign.utilIcon {
	color: white;
}

.navbar-right .utilIcon{
	padding-top:2px;
}
/* Fix colour of underlines on dashboard */
.xspDash a:hover {
	text-decoration: none;
} 
.xspDash a h3:hover {
	text-decoration: underline;
}

.xspDropdown {
	min-width:380px;
	margin-top:12px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
}
@media (min-width: 768px) {
	.xspDropdown {
		min-width:380px;
	}
}

.navbar-collapse .navbar-nav:hover {
	cursor: default;
}
.dropdown .dropdown-toggle:hover {
	cursor: pointer;
}

/* Set max width of new form */
.xsp .xspFormTableContainer {
	max-width: 580px;
}
/* Set warning alert style */
.xsp .xspWarning {
	max-width: 490px;
	padding-right: 14px;
}

.dashboardContentPane {
	min-height: 200px;
}
@media (max-width: 768px) {
	.dashboardContentPane {
		min-height: 328px;
	}
}
@media (max-width: 600px) {
	.dashboardContentPane {
		min-height: 270px;
	}
}

/* spin animation classes for loading icon */
.glyphicon.glyphicon-repeat.spin {
	padding: 10px;
	float: right;
	display:inline-block;
}
.spin {
  filter: blur(0); /*fixes jumpiness in FF */
  -webkit-animation: 1.0s spin linear infinite;
  -moz-animation: 1.0s spin linear infinite;
      -o-animation: 1.0s spin linear infinite;
  animation: 1.0s spin linear infinite;
     -webkit-transform-origin: 50% 50%;
         transform-origin:50% 50%;
         -ms-transform-origin:50% 50%; /* IE 9 */
}

@-moz-keyframes spin { 
	100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin { 
	100% { transform:rotate(360deg); }
}

/* Bootstrap 4 Styles */
.xsp.bootstrap4 .estadoTareasAzul {
	color:#0275d8;
}
.xsp.bootstrap4 .estadoTareasAzulBg {
	background-color:#0275d8;
}
.xsp.bootstrap4 .dropdown-menu.xspDropdown .xspDropdownLabel{
	color:#373a3c;
}
.xsp.bootstrap4 .navbar-nav.pull-xs-right .nav-link:hover,
.xsp.bootstrap4 .navbar-nav.pull-xs-right .nav-link:focus {
    background-color: transparent;
}
.xsp.bootstrap4 .navbar-dark .navbar-nav .nav-link:focus,
.xsp.bootstrap4 .navbar-dark .navbar-nav .nav-link:hover {
    color: white;
}
.xsp.bootstrap4 .navbar-collapse .pull-xs-right li {
	display:inline-block;
}
.xsp.bootstrap4.homeStyle .glyphicon-home.utilIcon,
.xsp.bootstrap4.todoStyle .glyphicon-th-list.utilIcon,
.xsp.bootstrap4.completeStyle .glyphicon-ok.utilIcon,
.xsp.bootstrap4.urgentStyle .glyphicon-exclamation-sign.utilIcon,
.xsp.bootstrap4.overdueStyle .glyphicon-warning-sign.utilIcon {
	color: white;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.xsp.bootstrap4 .glyphicon-home.utilIcon,
.xsp.bootstrap4 .glyphicon-th-list.utilIcon,
.xsp.bootstrap4 .glyphicon-ok.utilIcon,
.xsp.bootstrap4 .glyphicon-exclamation-sign.utilIcon,
.xsp.bootstrap4 .glyphicon-warning-sign.utilIcon {
	padding: 0 0.5rem;
	padding-top: 0.15rem;
}
.xsp.bootstrap4 .xspDropdown {
	margin-top:13px;
}
/* Set max width of new form */
.xsp.bootstrap4 .xspFormTableContainer {
	max-width: 620px;
}
/* Set warning alert style */
.xsp.bootstrap4 .xspWarning {
	max-width: 620px;
	padding-right: 1rem;
}

.xsp.bootstrap4 .xspNavbarContent .nav-custom{
	padding: 0.425rem 1rem
}

.xsp.bootstrap4 .navbar-collapse .pull-right li {
	display:inline-block;
}

.xsp.bootstrap4 .dropdown-menu.xspDropdown .xspDropdownLabel{
	color:#373a3c;
}

.xsp.bootstrap4 .navbar-nav.pull-right .nav-link:hover,
.xsp.bootstrap4 .navbar-nav.pull-right .nav-link:focus {
    background-color: transparent;
}

.xsp.bootstrap4 .navbar-dark .navbar-nav .nav-link:focus,
.xsp.bootstrap4 .navbar-dark .navbar-nav .nav-link:hover {
    color: white;
}
.xsp .dashBadge {
	font-size: 12px;
}
/*
Small circle buttons: <button class="btn btn-success btn-circle btn-circle-sm m-1"><i class="fa fa-check"></i></button>
Regular circle buttons: <button class="btn btn-success btn-circle m-1"><i class="fa fa-check"></i></button>
Large circle buttons: <button class="btn btn-success btn-circle btn-circle-lg m-1"><i class="fa fa-check"></i></button>
Xl circle buttons:  <button class="btn btn-success btn-circle btn-circle-xl m-1"><i class="fa fa-check"></i></button>
*/


.btn-circle {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
}

.btn-circle i {
  position: relative;
  top: -1px;
}

.btn-circle-sm {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 0.9rem;
}

.btn-circle-lg {
  width: 55px;
  height: 55px;
  line-height: 55px;
  font-size: 1.1rem;
}

.btn-circle-xl {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 1.3rem;
}


body {
  background: #f8f8fd;
  color: #514B64;
  min-height: 100vh;
}

.button-33 {
  background-color: #c2fbd7;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-33:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}