.buttonGreen {
  background-color: #7ac43d;
  box-shadow: inset 0 2px 0 0 #74EE0F, inset 0 -4px 0 0 #63B024, inset 0 4px 0 0 #BDF98C;
  border: solid 3px #63B024;
  cursor: pointer;
}
.buttonGreen:hover {
  border: solid 3px #7ac43d;
}
.buttonGreen:active {
  background-color: #63B024;
  box-shadow: inset 0 0 0 0 #63B024, inset 0px 2px 0 0 #BDF98C;
  border: solid 3px #63B024;
}
.buttonOrange {
  background-color: #FBA62D;
  box-shadow: inset 0 2px 0 0 #e98320, inset 0 -4px 0 0 #e98320, inset 0 4px 0 0 #ffefd2;
  border: solid 3px #ea7415;
  cursor: pointer;
}
.buttonOrange:hover {
  border: solid 3px #FBA62D;
}
.buttonOrange:active {
  background-color: #ea7415;
  box-shadow: inset 0 0 0 0 #ea7415, inset 0px 2px 0 0 #ffefd2;
  border: solid 3px #ea7415;
}
.buttonBlue {
  background-color: #42B2FC;
  box-shadow: inset 0 2px 0 0 #7fc7f7, inset 0 -4px 0 0 #30A2ED, inset 0 4px 0 0 #B9E3FF;
  border: solid 3px #1482FD;
  cursor: pointer;
}
.buttonBlue:hover {
  border: solid 3px #42B2FC;
}
.buttonBlue:active {
  background-color: #1482FD;
  box-shadow: inset 0 0 0 0 #1482FD, inset 0px 2px 0 0 #B9E3FF;
  border: solid 3px #1482FD;
}
.buttonViolet {
  background-color: #9C77CF;
  box-shadow: inset 0 2px 0 0 #B58EEC, inset 0 -4px 0 0 #8b66bd, inset 0 4px 0 0 #D7BBFE;
  border: solid 3px #835BBA;
  cursor: pointer;
}
.buttonViolet:hover {
  border: solid 3px #9C77CF;
}
.buttonViolet:active {
  background-color: #835BBA;
  box-shadow: inset 0 0 0 0 #835BBA, inset 0px 2px 0 0 #D7BBFE;
  border: solid 3px #835BBA;
}
.buttonRed {
  background-color: #ff5a5f;
  box-shadow: inset 0 2px 0 0 #ec494e, inset 0 -4px 0 0 #ec494e, inset 0 4px 0 0 #ff9093;
  border: solid 3px #e9464b;
  cursor: pointer;
}
.buttonRed:hover {
  border: solid 3px #ff5a5f;
}
.buttonRed:active {
  background-color: #e9464b;
  box-shadow: inset 0 0 0 0 #e9464b, inset 0px 2px 0 0 #ff9093;
  border: solid 3px #e9464b;
}
.buttonOrangeDiploma {
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.76), inset 2px -2.3px 0 0 #df6c0f, inset 1.7px 3.6px 0 0 #ffd69c, inset 0px -6.5px 0 0 #e98320;
  background-image: linear-gradient(to bottom, #ffd700, #fba62d, #f19d25);
  border: solid 4px #1ebfcf;
}
.buttonOrangeDiploma:hover {
  background-image: linear-gradient(#ffb348, #ffb348);
}
.buttonOrangeDiploma:active {
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.76), inset 0.7px -0.8px 0 0 #df6c0f, inset 0.2px 0.5px 0 0 #ffd69c;
  background-image: linear-gradient(#ee870e, #ee870e);
}
.iconButton {
  border-width: 2px;
}
.scrollBar {
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.scrollBar::-webkit-scrollbar {
  width: 24px;
}
.scrollBar::-webkit-scrollbar-track {
  border-radius: 12px;
  background-color: #232628;
  border: 11px solid #6483bc;
  box-shadow: 0 0 0 1px hsl(216, 100%, 84%);
}
.scrollBar::-webkit-scrollbar-thumb {
  width: 18px;
  border-radius: 12px;
  box-shadow: 0px 0.5px 0.5px 0 rgba(60, 74, 137, 0.71) inset;
  background-image: linear-gradient(to top, #9ccdff, #cce8ff);
  border: 3px solid transparent;
  background-clip: content-box;
}
.scrollBar::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(to top, #b7d9ff, #e1eeff);
}
.scrollBar.golden {
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.scrollBar.golden::-webkit-scrollbar-track {
  background-color: #634730;
  border: 11px solid #826044;
  box-shadow: 0 0 0 1px #f5c28f;
}
.scrollBar.golden::-webkit-scrollbar-thumb {
  box-shadow: 0px 0.5px 0.5px 0 rgba(60, 74, 137, 0.71) inset;
  background-image: linear-gradient(to top, #c3955a, #ffe4a2);
}
.scrollBar.golden::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(to top, #c3a475, #ffefc1);
}
.scrollBar.brown {
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.scrollBar.brown::-webkit-scrollbar-track {
  background-color: #F7A278;
  border: 11px solid #fff2e6;
  box-shadow: 0 0 0 1px #f8ccb6;
}
.scrollBar.brown::-webkit-scrollbar-thumb {
  box-shadow: 0.1px 0.5px 0.5px 0 rgba(60, 74, 137, 0.71) inset;
  background-image: linear-gradient(to top, #d45d22, #ad4b1b);
}
.scrollBar.brown::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(to top, #f57d42, #cc6d3f);
}
.scrollBar.thinBar::-webkit-scrollbar {
  width: 15px;
}
/*IMPORTANTE: problemas con animaciones que hagan transform, poner la sombra en un hijo y animar el padre*/
.scrollfade-container {
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 1;
}
.scrollfade-container.fade-top {
  background: linear-gradient(to top, transparent calc(100% - 48px), #ffffff 100%);
}
.scrollfade-container.fade-middle {
  background: linear-gradient(to top, transparent calc(100% - 48px), #ffffff 100%), linear-gradient(to bottom, transparent calc(100% - 48px), #ffffff 100%);
}
.scrollfade-container.fade-bottom {
  background: linear-gradient(to bottom, transparent calc(100% - 48px), #ffffff 100%);
}
.logo-header {
  width: 179px;
  height: 48px;
  background-image: url("../../images/logos/negativo-azul.png");
  background-size: 179px 48px;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}
@media (min-resolution: 1.5dppx) {
  .logo-header {
    background-image: url("../../images/logos/negativo-azul@2x.png");
    background-size: 179px 48px;
  }
}
.CHRISTMAS .logo-header {
  background-image: url("../../images/logos/azul_xmas.png");
  background-size: contain;
}
.logo-header.logo-chess {
  width: 265px;
  height: 43px;
  background-image: url("../../images/logos/logo-chess.png");
  background-size: 265px 43px;
  background-size: contain !important;
  background-repeat: no-repeat;
}
@media (min-resolution: 1.5dppx) {
  .logo-header.logo-chess {
    background-image: url("../../images/logos/logo-chess@2x.png");
    background-size: 265px 43px;
  }
}