/* CR_COLLECTIVE_V172M_GLOBAL_PLAYER_FULL_WIDTH_TOPTRACKS_MATCH */

:root {
  --cr-v172m-player-menu-edge: var(--cr-unified-detected-sidebar-offset, var(--cr-v170s-menu-edge, var(--cr-v170p-sidebar-offset, 248px)));
}

html body .cr-u-player,
html body .cr-u-player[data-minimized="1"] {
  left: var(--cr-v172m-player-menu-edge) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 24px 0 0 0 !important;
  box-sizing: border-box !important;
}

html body .cr-u-player:not([data-minimized="1"]) .cr-u-main {
  grid-template-columns: minmax(245px, .95fr) minmax(390px, 1.35fr) minmax(230px, .72fr) auto !important;
  padding: 12px 18px !important;
}

html body .cr-u-player[data-minimized="1"] .cr-u-main {
  grid-template-columns: minmax(245px, .95fr) minmax(390px, 1.35fr) minmax(230px, .72fr) auto !important;
  padding: 10px 18px !important;
}

html body .cr-u-player .cr-u-embed {
  padding-left: 12px !important;
  padding-right: 18px !important;
  padding-bottom: 14px !important;
}

html body .cr-u-player .cr-u-embed iframe {
  width: 100% !important;
  min-height: 330px !important;
  max-height: min(48vh, 430px) !important;
  margin: 0 auto !important;
}

html body .cr-u-player .cr-u-actions,
html body .cr-u-player .cr-u-links {
  align-items: center !important;
}

@media (max-width: 1280px) {
  html body .cr-u-player:not([data-minimized="1"]) .cr-u-main,
  html body .cr-u-player[data-minimized="1"] .cr-u-main {
    grid-template-columns: minmax(220px, .9fr) minmax(330px, 1.25fr) minmax(190px, .65fr) auto !important;
  }
}

@media (max-width: 980px) {
  html body .cr-u-player,
  html body .cr-u-player[data-minimized="1"] {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 22px !important;
  }

  html body .cr-u-player:not([data-minimized="1"]) .cr-u-main,
  html body .cr-u-player[data-minimized="1"] .cr-u-main {
    grid-template-columns: 1fr auto !important;
  }

  html body .cr-u-player .cr-u-center,
  html body .cr-u-player[data-minimized="1"] .cr-u-center,
  html body .cr-u-player .cr-u-side,
  html body .cr-u-player[data-minimized="1"] .cr-u-side {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  html body .cr-u-player .cr-u-embed iframe {
    min-height: 230px !important;
  }
}