html,
body {
height: 100%;
top: 0 !important;
}
.mat-button,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Roboto' !important;
font-weight: 400;
font-style: normal;
}
.text-center {
text-align: center;
}
.heading-xxxl {
color: var(--text-heading-color);
font-family: var(--font-family);
font-size: 48px;
font-style: normal;
font-weight: 400;
line-height: 56px;
}
.heading-xxl {
color: var(--text-heading-color);
font-family: var(--font-family);
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 40px;
}
.heading-xl {
color: var(--text-heading-color);
text-align: center;
font-family: var(--font-family);
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 32px;
}
.heading-lg {
color: var(--text-heading-color);
font-family: var(--font-family);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
}
.body-xxl {
color: var(--text-primary-color);
font-family: var(--font-family);
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 32px;
}
.body-xl {
color: var(--text-primary-color);
font-family: var(--font-family);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
.body-md {
color: var(--text-primary-color);
font-family: var(--font-family);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.body-sm {
color: var(--text-primary-color);
font-family: var(--font-family);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.body-xs {
color: var(--text-primary-color);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.button-label-sm {
color: var(--grey-800);
font-family: var(--font-family);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px;
}
/*Icon colors*/
.icon-white svg path {
fill: var(--white) !important;
}
.icon-grey-500 svg path {
fill: var(--grey-500);
}
.icon-primary svg path {
fill: var(--icon-primary-color) !important;
}
.icon-secondary svg path {
fill: var(--icon-secondary-color) !important;
}
.icon-purple svg path {
fill: var(--purple-500);
}
.icon-orange-500 svg path {
fill: var(--orange-500);
}
.icon-sea-green-500 svg path {
fill: var(--sea-green-500);
}
.icon-green-500 svg path {
fill: var(--green-500) !important;
}
.icon-green-500 svg circle {
fill: var(--green-500) !important;
}
/*some adjustmenst for icon*/
.xxxl-icon svg {
width: 48px !important;
height: 48px !important;
}
.xxl-icon svg,
path {
height: 32px !important;
width: 32px !important;
}
.xl-icon svg,
path {
height: 24px !important;
width: 24px !important;
}
.lg-icon svg,
path {
height: 20px !important;
width: 20px !important;
}
path {
height: 16px !important;
width: 16px !important;
}
path {
height: 14px !important;
width: 14px !important;
}
.interaction:hover {
cursor: pointer;
transition: background-color 0.2s;
background-color: var(--interaction-link-selected-color);
border-radius: 50%;
}
.clickable {
cursor: pointer;
}
.clickable:hover>span {
color: var(--interaction-link-primary-color);
}
@keyframes fadeOut {
0% {
opacity: 1;
}
99% {
opacity: 0.01;
}
100% {
opacity: 0;
}
}
/*Buttons type*/
.rounded-primary-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
height: 40px;
width: fit-content;
background: var(--interaction-link-primary-color);
border-radius: 100px;
border: 0px;
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
}
.rounded-primary-button-selected {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
height: 40px;
width: fit-content;
background: var(--interaction-link-selected-color);
border-radius: 100px;
border: 0px;
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
}
.rounded-primary-button-disabled {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
height: 40px;
width: fit-content;
background: var(--grey-200);
border-radius: 100px;
border: 0px;
cursor: not-allowed;
padding-left: 24px;
padding-right: 24px;
}
.rounded-primary-button-text {
color: var(--white);
letter-spacing: 0.1px;
}
.rounded-primary-button-disabled-text {
color: var(--grey-500);
letter-spacing: 0.1px;
}
.rounded-primary-button-selected-text {
letter-spacing: 0.1px;
color: var(--interaction-link-primary-color);
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.rounded-secondary-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
width: fit-content;
height: 40px;
border-radius: 100px;
cursor: pointer;
border: 1px solid var(--interaction-link-primary-color);
padding-left: 24px;
padding-right: 24px;
}
.rounded-secondary-button-text {
color: var(--interaction-link-primary-color);
letter-spacing: 0.1px;
}
.rounded-secondary-button-disabled {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
width: fit-content;
height: 40px;
border-radius: 100px;
cursor: not-allowed;
border: transparent;
padding-left: 24px;
padding-right: 24px;
}
.rounded-secondary-button-disabled-text {
color: var(--grey-500);
letter-spacing: 0.1px;
}
.square-primary-button-text {
color: var(--white);
letter-spacing: 0.1px;
}
.square-primary-button-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 83px;
width: fit-content;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
background: var(--interaction-link-primary-color);
border-radius: 4px;
color: var(--text-heading-color);
flex: none;
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
white-space: nowrap;
}
.square-secondary-button {
min-width: 83px;
width: fit-content;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
border-radius: 4px;
color: var(--interaction-link-primary-color);
flex: none;
background-color: var(--grey-100);
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
}
.square-secondary-button-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 83px;
width: fit-content;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
border-radius: 4px;
color: var(--interaction-link-primary-color);
flex: none;
background-color: var(--grey-100);
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
}
.square-secondary-button-text {
color: var(--interaction-link-primary-color);
letter-spacing: 0.1px;
}
.square-primary-button-icon-left-square {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 83px;
width: fit-content;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
background: var(--interaction-link-primary-color);
border-radius: 0 4px 4px 0;
color: var(--text-heading-color);
flex: none;
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
white-space: nowrap;
}
.rounded-secondary-button-no-border {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
width: fit-content;
height: 40px;
border-radius: 100px;
cursor: pointer;
border: transparent;
padding-left: 24px;
padding-right: 24px;
}
/*fonts and color fonts from figma*/
/*colors*/
.black {
color: var(--black);
}
.dark-grey {
color: var(--grey-800);
}
.grey {
color: var(--grey-900);
}
.dark-light-grey {
color: var(--grey-600);
}
.light-grey {
color: var(--grey-400);
}
.selected-grey {
color: var(--grey-500);
}
.purple {
color: var(--purple-500);
}
.red {
color: var(--red-500);
}
.white {
color: var(--white);
}
.orange-500 {
color: var(--orange-500);
}
/*FONTS and names as is on figma from biggest to smallest*/
.bold {
font-weight: 500 !important;
}
/* This one is needed for now. Do not delete it */
.regular-14-20 {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
body {
font-family: 'Roboto' !important;
margin: 0;
overflow-x: hidden;
font-weight: 400;
background-color: var(--grey-100);
}
.header-table {
background-color: var(--white);
border-radius: 5px 5px 0 0;
border-bottom: 1px solid var(--grey-400);
align-items: center;
color: var(--grey-800);
min-height: 70px;
font-size: 1.275rem;
margin-left: 8%;
width: 82%;
padding: 0.3125rem 0.75rem !important;
margin-top: 5%;
}
.table-responsive {
margin-left: 8%;
width: 83%;
min-height: 70px;
margin-bottom: 15%;
border-left: 1px solid var(--grey-200);
background: var(--grey-100);
border-right: 1px solid var(--grey-200);
border-bottom: 1px solid var(--grey-200);
}
.edit {
margin-right: 24px;
}
.delete {
margin-right: 24px;
}
.participant {
padding-left: 12px;
font-weight: 400;
color: var(--grey-800);
font-size: 1.125rem;
}
.example-spacer {
flex: 1 auto;
}
.red-active {
color: var(--grey-800) !important;
float: right;
display: flex !important;
margin-right: 24px;
}
/*Starter component*/
.content>mat-card {
width: 20%;
}
mat-card-content ng-container {
text-align: center;
}
mat-card img {
width: 50%;
}
/*Ls example page*/
.mat-raised-button {
margin-right: 2%;
}
/*header of LS example page*/
.btn-back {
display: inline-block;
cursor: pointer;
font-weight: 300;
font-size: 0.938em;
color: var(--grey-400);
left: 0;
margin-top: 5px;
}
.btn-back-svg {
transform: rotate(180deg);
height: 12px;
width: 12px;
margin-top: 15px;
margin-left: 15px;
}
/*Age group row component*/
.list-item-agegrouprow {
display: flex;
border-radius: 0.25rem !important;
margin-bottom: 15px;
min-height: 73px;
margin-left: 8%;
margin-right: 5%;
margin-top: 1%;
background-color: var(--white);
box-shadow: 0px 2px 5px 0px rgba(102, 102, 102, 0.55);
}
.new-list-item-title {
width: auto;
align-self: center;
justify-self: center;
font-size: 1.375rem;
padding-left: 25px;
}
.sh-with-you {
flex-grow: 1;
padding-left: 15px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.new-list-item-actions {
line-height: 70px;
padding-top: 15px;
}
/*Age group page*/
.training-plan-header {
margin-top: 80px;
margin-bottom: 20px;
width: 30%;
padding-left: 9%;
}
.training-plan-subtitle {
padding-bottom: 2%;
}
.training-plan-subtitle h2 {
font-size: 20px;
font-size: 1.25rem;
max-width: 60%;
min-width: 55%;
padding-left: 9%;
}
/* HORIZONTAL MENU */
.ls-horizontal-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
/* Keep space between logo and settings */
align-items: center;
/* Vertically center items */
height: 70px;
/* Set a fixed height for the toolbar */
}
.horizontal-main-section {
display: flex;
gap: 2px;
flex: 1;
/* Take all available space */
justify-content: center;
/* Center the items */
}
.horizontal-main-section-item {
margin-top: 6px;
height: 64px;
gap: 8px;
display: inline-flex;
flex-direction: column;
border-radius: 4px 4px 0px 0px;
transition: 0.1s ease-out 20ms;
cursor: pointer;
width: fit-content;
}
.horizontal-main-section-item learnsports-icon {
padding-top: 8px;
}
.horizontal-main-section-item:hover {
width: auto;
background-color: var(--grey-100) !important;
color: var(--text-heading-color);
}
.horizontal-main-section-item:hover learnsports-icon svg path {
fill: var(--text-heading-color) !important;
}
.horizontal-main-section learnsports-icon svg path {
fill: var(--white) !important;
}
.horizontal-main-section-selected learnsports-icon svg path {
fill: var(--text-heading-color) !important;
}
.horizontal-main-section-selected {
color: var(--text-heading-color);
background-color: var(--grey-100) !important;
}
.horizontal-main-description {
padding-left: 16px;
padding-right: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
.user-profile-avatar {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
box-shadow:
0px 2px 6px 2px rgba(0, 0, 0, 0.15),
0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}
.new-black-circle {
position: relative;
}
.new-black-circle::before {
content: '';
position: absolute;
width: 120%;
height: 120%;
border-radius: 50%;
border: 2px solid black;
/* You can adjust the border width and color */
box-sizing: border-box;
box-shadow: 0 0 0 4px white inset;
/* Inner white border */
}
.grid-container {
height: 70px;
/* Set a fixed height for the toolbar */
display: grid;
/* Use CSS Grid */
grid-template-columns: repeat(3, 1fr);
/* Three equal columns */
align-items: center;
/* Center items vertically */
width: 100%;
/* Full width */
color: var(--white) !important;
background: var(--text-heading-color) !important;
/* Old browsers */
background: -moz-linear-gradient(var(--top-bar-colour)) !important;
/* FF3.6-15 */
background: -webkit-linear-gradient(var(--top-bar-colour)) !important;
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(var(--top-bar-colour)) !important;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin-bottom: 0;
box-shadow: 0 0 0;
/* No shadow */
}
.column {
text-align: center;
/* Center text horizontally */
}
.column:last-child {
display: flex;
/* Use flexbox for the last column */
justify-content: flex-end;
/* Align items to the right */
align-items: center;
/* Center items vertically */
height: 70px;
/* Ensure the column has a fixed height */
padding-right: 16px;
}
/* Align logo to the left in the first column */
.column:first-child {
padding-left: 16px;
display: flex;
/* Use flexbox for the first column */
justify-content: flex-start;
/* Align items to the left */
align-items: center;
/* Center items vertically */
height: 70px;
/* Ensure the column has a fixed height */
}
.center-column {
display: flex;
gap: 2px;
flex: 1;
/* Take all available space */
justify-content: center;
/* Center the items */
}
/*Good old tricks for dummy components*/
.hide {
display: none !important;
}
.tp-session-view-header-dumy {
width: 60px;
}
/*Implementation of FIGMA elements*/
.create-new-button {
height: 40px;
width: 120px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--interaction-link-primary-color);
color: var(--interaction-link-primary-color);
flex: none;
cursor: pointer;
}
.create-new-button-filled {
height: 40px;
width: 120px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--interaction-link-primary-color);
flex: none;
background: var(--interaction-link-primary-color);
cursor: pointer;
font-weight: 500;
}
.create-new-button-plus {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
height: 40px;
width: 160px;
background: var(--interaction-link-primary-color);
border-radius: 100px;
border: 0px;
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
}
.create-new-button-plus-text {
letter-spacing: 0.1px;
}
.create-select-button-filled-disabled {
height: 40px;
width: 120px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--grey-500);
flex: none;
background: var(--grey-500);
cursor: pointer;
font-weight: 500;
}
.create-select-button-filled-selected {
height: 40px;
width: 120px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--interaction-link-selected-color);
flex: none;
background: var(--interaction-link-selected-color);
cursor: pointer;
font-weight: 500;
}
/*List and list elements for tpview row */
.list-tpview-row {
display: flex;
flex-direction: row;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
margin-bottom: 0.8%;
}
.list-item-tpview-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 8px 8px 20px;
width: 100%;
background: var(--white);
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 2px 6px rgba(0, 0, 0, 0.15);
border-radius: 8px;
}
.list-item-tpview-row-left {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0px 12px 0px;
gap: 24px;
width: 80%;
order: 0;
flex: none;
height: fit-content;
}
.tpview-row-calendar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
width: 37px;
height: 52px;
cursor: pointer;
}
.tpview-row-calendar-day-of-week {
width: 25px;
height: 16px;
display: flex;
align-items: center;
}
.tpview-row-calendar-day {
width: 37px;
height: 40px;
display: flex;
align-items: center;
}
.tpview-row-textbox {
align-items: flex-start;
order: 0;
width: 80%;
}
.tpview-row-textbox:hover {
cursor: pointer;
}
.tpview-row-textbox:hover .tpview-row-session-name {
color: var(--interaction-link-primary-color);
}
.tpview-row-category {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 4px;
width: 100%;
height: 18px;
flex: none;
order: 0;
}
.tpview-row-category learnsports-icon svg {
width: 16px;
height: 16px;
order: 0;
flex: none;
}
.tpview-row-category-name {
display: flex;
width: 100%;
height: 18px;
align-items: center;
flex: none;
order: 1;
}
.tpview-row-session-name {
padding-top: 8px;
flex: none;
flex-grow: 0;
}
.tpview-row-line-text {
padding-top: 8px;
flex: none;
order: 2;
flex-grow: 0;
}
.tpview-row-time {
padding-top: 8px;
height: 20px;
flex: none;
order: 3;
flex-grow: 0;
}
.tpview-row-favourite {
margin-bottom: 36px;
}
.tpview-row-favourite learnsports-icon svg {
width: 16px;
height: 16px;
}
.list-item-tpview-row-right {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px;
width: 20%;
gap: 32px;
}
.list-item-tpview-row-right>learnsports-icon {
cursor: pointer;
}
.tpview-row-participants-div {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
width: 166px;
height: 34px;
flex: none;
order: 0;
}
.tpview-row-responsible {
width: 40%;
height: 18px;
font-weight: 400;
font-size: 12px;
line-height: 18px;
display: flex;
align-items: center;
flex: none;
order: 0;
}
.tpview-row-participants {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px 32px 0px 0px;
width: 40%;
height: 34px;
flex: none;
order: 1;
font-weight: 400;
font-size: 16px;
}
.tpview-row-edit-up {
order: 3;
}
.tpview-row-share {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px 32px 0px 0px;
height: 34px;
flex: none;
order: 2;
align-self: stretch;
}
.tpview-row-trail-week {
order: 5;
margin-right: 32px;
}
.tpview-row-state {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px 20px 0px 0px;
height: 32px;
flex: none;
order: 0;
align-self: stretch;
}
.tpview-row-edit-up learnsports-icon svg,
.tpview-row-share learnsports-icon svg,
.tpview-row-state learnsports-icon svg,
.edit-action learnsports-icon svg {
width: 24px;
height: 24px;
cursor: pointer;
}
.tpview-row-edit-div {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 16px;
flex: none;
order: 1;
width: 280px;
background: var(--other-gradient-white,
linear-gradient(270deg, #fff 88.64%, rgba(255, 255, 255, 0) 100%));
height: 100%;
}
.tpview-row-edit-session-view {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 16px;
flex: none;
order: 1;
width: 280px;
height: 100%;
}
/*TpViewPage - no subs and active tp*/
.tp-inspire-text {
width: 360px;
height: 30px;
margin-left: 40%;
margin-top: 62px;
display: flex;
align-items: center;
}
/*Notify coaches button and modal*/
.notify-coaches-button {
height: 40px;
width: 40px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--interaction-link-primary-color);
color: var(--interaction-link-primary-color);
flex: none;
background-color: var(--grey-100);
cursor: pointer;
margin-right: 12px;
margin-bottom: 8px;
}
.notify-coaches-button:hover {
height: 40px;
width: 40px;
left: 0px;
top: 32px;
border-radius: 100px;
background: rgba(234, 33, 75, 0.1);
flex: none;
cursor: pointer;
margin-right: 12px;
margin-bottom: 8px;
}
.notify-coaches-button learnsports-icon svg {
height: 24px !important;
width: 24px !important;
}
.notify-coaches-modal {
display: flex;
flex-direction: column;
align-items: center;
height: 450px;
width: 100%;
padding: 32px 0px 20px;
border-radius: 4px;
}
.notify-coaches-title {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 42px;
width: 93%;
padding: 0px 20px 12px;
}
.notify-coaches-secret-link-modal {
display: flex;
flex-direction: column;
align-items: center;
width: 96%;
height: 370px;
background: var(--white);
border-radius: 4px;
gap: 16px;
}
.secret-link-modal-title {
width: 300px;
align-items: center;
height: 30px;
padding-top: 28px;
}
.secret-link-modal-text {
width: 650px;
height: 48px;
text-align: center;
}
.share-link-component {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 0px;
gap: 24px;
width: 512px;
height: 200px;
}
.share-link-input {
width: 370px;
height: 49px;
}
.social-media-buttons-container {
justify-content: center;
align-items: center;
gap: 20px;
width: 463px;
height: 56px;
display: flex;
flex-direction: row;
}
.social-media-button {
width: 223px;
height: 56px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solidvar(--black);
background: var(--white);
}
/*Week navigation component*/
.week-navigation {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 32px 0px;
gap: 32px;
}
.left-navigation-div,
.right-navigation-div {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
flex: none;
order: 0;
height: 32px;
}
.double-left-navigation,
.double-right-navigation,
.left-navigation,
.right-navigation {
flex: none;
order: 1;
cursor: pointer;
}
.left-navigation svg {
transform: rotate(180deg) !important;
}
.week-navigation-frame h3 {
padding: 0px 52px;
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: var(--black);
flex: none;
order: 0;
height: 24px;
}
.week-navigation {
height: 20px;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: var(--black);
flex: none;
order: 1;
}
/*TP focus areas - image section*/
.focus-area-sub-heading {
display: flex;
width: 100%;
padding-top: 32px;
margin-bottom: -8px;
}
.image-section {
display: flex;
flex-direction: column;
align-items: center;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
gap: 24px;
min-height: 144px;
}
/*Gallery-img section */
.image-section-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 24px;
}
/*It's different kind of picture*/
.image-section-row-sub-exFa {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.image-style {
-ms-flex: 25%;
flex: 20%;
position: relative;
max-width: 328px;
}
.image-style:hover {
transform: scale(1.03);
-webkit-transition: transform 0.15s ease-in-out;
-o-transition: transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
}
.image-style:not(:hover) {
transform: scale(1);
-webkit-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.image-style>img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 4px;
}
.image-style>img:hover {
cursor: pointer;
}
.image-style>div:hover {
cursor: pointer;
color: var(--interaction-link-primary-color);
}
.image-style>div {
margin-top: 16px;
}
.image-style learnsports-icon svg {
width: 16px;
height: 16px;
margin-top: 2px;
margin-left: 19px;
}
.focus-areas-name {
display: flex;
margin-bottom: 24px;
align-items: center;
}
.arrow-margin {
margin-left: -12px;
}
.selected-menu {
height: 22px;
color: var(--text-heading-color);
border-bottom: solid;
}
/*submenu*/
.submenu-container {
display: flex;
flex-direction: column;
background: var(--grey-100);
border: 1px solid var(--grey-300);
border-top: none;
height: 160px;
}
.submenu-first-row {
min-height: 32px;
margin-top: 14px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.submenu-second-row {
margin-top: 13px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.submenu-third-row {
display: flex;
justify-content: center;
gap: 2%;
}
.submenu-third-row a:hover {
height: 22px;
color: var(--text-heading-color);
border-bottom: solid;
}
.border {
border-bottom: 1px solid var(--interaction-link-primary-color);
margin-bottom: 40px;
}
.submenu-team-border {
margin-right: -34px;
}
.flex-align-center-team>span {
border-bottom: 2px solid transparent;
text-decoration: none;
}
.flex-align-center-team:hover>span {
color: var(--interaction-link-primary-color);
border-bottom: 2px solid var(--interaction-link-primary-color);
}
.flex-align-center-team:hover>learnsports-icon svg path {
fill: var(--interaction-link-primary-color) !important;
}
.flex-align-center-team-your-team {
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}
.flex-align-center-team-your-team>span {
border-bottom: 2px solid transparent;
text-decoration: none;
}
.flex-align-center-team-your-team:hover span.button-label-sm {
color: var(--interaction-link-primary-color);
border-bottom: 2px solid var(--border-color);
}
.submenu-team-avatar-icons {
display: flex;
align-items: center;
justify-content: center;
transform: scale(1, 1);
}
.submenu-avatar-i {
margin-left: -6px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
width: 32px;
height: 32px;
box-shadow:
0px 2px 6px 2px rgba(0, 0, 0, 0.15),
0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}
.submenu-avatar-i-table {
width: 28px;
height: 28px;
box-shadow: none;
}
.submenu-team-initials {
color: var(--white);
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.submenu-back-team {
display: flex;
align-items: center;
cursor: pointer;
}
/*year-week button on tp_view page*/
.year-week-component {
padding-top: 28px;
display: flex;
justify-content: center;
}
.year-week-div {
display: flex;
justify-content: space-between;
/* Change to space-between to control item spacing */
align-items: center;
border: 1px solid var(--colors-borders-border-light-color, #d8d8d9);
width: auto;
/* Updated width */
padding: 4px;
/* Adjusted padding for more space around text */
border-radius: 30px;
/* Rounded corners */
background-color: transparent;
/* Initial background */
}
.yw-text {
padding: 6px 20px;
/* Adjusted padding for the individual spans */
border-radius: 30px;
/* More rounded corners for pill shape */
transition:
background-color 0.3s,
color 0.3s;
/* Smooth transition */
cursor: pointer;
/* Change cursor to pointer on hover */
color: var(--interaction-link-primary-color);
}
/* Adjust margins for spacing */
.yw-text:first-child {
margin-right: auto;
/* Pushes the Year button to the left */
}
.yw-text:last-child {
margin-left: auto;
/* Pushes the Week button to the right */
}
.selectedNow {
background-color: var(--icon-selected-bg-color);
/* Highlight color */
}
/*annual_tp_view*/
.anual-week-gap {
margin-bottom: 56px;
}
.anual-week-header {
width: fit-content;
height: 22px;
margin-left: var(--margin-percentage);
margin-bottom: 12px;
}
.anual-week-header:hover span {
color: var(--interaction-link-primary-color);
cursor: pointer;
}
.anual-description {
display: flex;
justify-content: center;
align-items: center;
}
.week-table-content {
width: 700px;
color: var(--global-black, #000);
text-align: center;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
/* 142.857% */
letter-spacing: 0.1px;
margin-bottom: 80px;
margin-top: 44px;
}
.favorite-icon {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 8px;
flex: none;
order: 3;
align-self: stretch;
}
/*tp_view page*/
.week-section-tp-view {
margin-top: -120px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.tp-text {
align-items: center;
display: flex;
height: 20px;
margin-top: 74px;
}
.create-new-button-position {
flex-direction: row;
display: flex;
align-items: center;
padding: 0px 0px 16px;
padding-top: 52px;
}
.annual-create-new-button-position {
flex-direction: row;
display: flex;
align-items: flex-end;
padding: 0px 0px 16px;
gap: 24px;
padding-top: 52px;
}
.lang-dropdown .selected {
background-color: var(--colors-interaction-selected-item-color,
#e6e6e6) !important;
}
/*TP - favorites page*/
/*sub focus area page*/
.image-section-fa {
display: flex;
flex-direction: column;
align-items: center;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
gap: 12px;
min-height: 144px;
padding-bottom: 32px;
}
.image-style-fa {
width: 100%;
height: 150px;
overflow: hidden;
display: flex;
border-radius: 4px;
}
.image-style-fa>img {
width: 100%;
height: auto;
align-self: center;
}
/*Age groups page */
.submenu-age-groups {
margin-top: 72px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.age-group-background {
background: var(--grey-100);
}
.ag-create-button-position {
flex-direction: row;
display: flex;
justify-content: flex-end;
padding: 0px 0px 16px;
padding-top: 52px;
width: 95%;
}
.tp-team-selector {
width: 20%;
}
.tp-team-form-field {
width: 100%;
}
/*ex-modal edit from library */
.edit-ex-modal {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 100%;
min-height: 654px;
background: var(--global-grey-100, var(--grey-100));
}
.edit-ex-modal-heading {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 0px 40px 12px;
gap: 10px;
width: 96%;
height: 96px;
}
.edit-ex-left {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;
width: 60%;
height: 40px;
}
.edit-ex-duration {
display: flex;
height: 56px;
background: var(--white);
border-radius: 4px 4px 0px 0px;
gap: 24px;
}
.edit-ex-duration mat-form-field {
width: 180px;
}
.ex-text {
width: 60%;
height: 24px;
text-align: center;
font-weight: 500;
margin-bottom: 12px;
}
.ex-filter-section {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 2%;
margin-right: 2%;
}
.ex-total {
display: flex;
margin-left: 3%;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
padding-top: 20px;
width: 180px;
height: 20px;
}
.ex-filter {
display: flex;
flex-direction: row;
padding-top: 20px;
margin-right: 6%;
gap: 8px;
}
.ex-filter-button learnsports-icon svg {
padding-bottom: 20px;
}
.ex-search {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 32px;
width: 70%;
}
.ex-modal-search {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
box-sizing: border-box;
padding-bottom: 24px !important;
gap: 16px;
width: 740px;
height: 72px;
background: var(--white);
border: 2px solid var(--grey-200);
border-radius: 100px;
}
.ex-session-replace {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 74px;
}
.ex-session-replace-2 {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 74px;
padding-right: 32px;
}
.ex-session-replace learnsports-icon svg {
width: 24px !important;
height: 24px !important;
}
.ex-all-details {
margin-top: 1%;
display: flex;
flex-direction: column;
padding-left: 368px;
}
/*ex create modal*/
.ex-specific-form {
width: 60%;
align-items: flex-start;
justify-content: flex-start;
display: flex;
flex-direction: row;
gap: 24px;
padding-top: 24px;
padding-bottom: 70px;
}
.ex-category-tp {
padding-top: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 60%;
gap: 16px;
}
.tp-name-field {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 24px;
width: 558px;
height: 56px;
}
.upload-video-area {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 32px;
height: 138px;
}
.after-upload-video-area {
gap: 20px;
display: flex;
flex-direction: column;
}
.video-name {
border-radius: 100px;
border: 1px solid var(--grey-300) !important;
background: var(--white) !important;
display: flex !important;
width: 255px !important;
height: 56px;
padding-left: 18px;
gap: 12px;
align-items: center !important;
outline: none !important;
}
.drop-upload-button {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px 40px;
gap: 8px;
min-width: 217px;
width: fit-content;
height: 132px;
border-radius: 4px;
border: 1px solid var(--border-color);
background: var(--background-bg-white-color, #fff);
}
.drop-upload-button:hover {
background: var(--interaction-link-selected-color, #fad9d9);
}
.drop-upload-button-dashed {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px 40px;
gap: 8px;
min-width: 217px;
width: fit-content;
height: 132px;
border-radius: 4px;
border: 1px dashed var(--border-color);
background: var(--background-bg-white-color, #fff);
}
.drop-upload-button-text {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: fit-content;
height: 44px;
}
.drop-upload-button-text span {
color: var(--border-color);
}
.drop-upload-button-image {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px 40px;
gap: 8px;
width: 260px;
height: 132px;
border: 1px dashed var(--grey-400);
border-radius: 4px;
}
.drop-upload-button-text-image {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 200px;
height: 44px;
}
.video-terms {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 600px;
height: 24px;
}
.video-terms learnsports-icon svg {
display: flex;
width: 24px !important;
height: 24px !important;
margin-left: 12px !important;
}
.ex-recomended-number-pearsons {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 212px;
}
.mat-lable-title {
width: 175px;
height: 18px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: var(--grey-900);
}
.ex-equipment-needed {
display: flex;
flex-direction: row;
}
.ex-equipment-needed learnsports-icon {
padding-left: 24px !important;
padding-top: 18px !important;
}
.ex-equipment-needed mat-form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 400px !important;
}
.ex-share-options {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 24px;
gap: 32px;
width: 380px;
height: 216px;
}
.ex-create-info {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding-top: 64px;
gap: 32px;
width: 60%;
height: 82px;
}
.ex-created-by {
width: 200px;
height: 18px;
}
/*Ex row*/
.ex-session-view-workout-wrapper {
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
transition: transform 0.4s;
min-height: 76px;
}
.ex-row-title {
margin-top: 12px;
color: var(--black);
}
.ex-row-title:hover {
color: var(--interaction-link-primary-color);
}
.ex-row-desc {
margin-bottom: 16px;
letter-spacing: 0.1px;
}
.ex-row-tag {
gap: 8px;
display: flex;
flex-direction: row;
margin-bottom: 12px;
}
.ex-tag {
border-radius: 4px;
padding: 4px 8px;
}
.ex-session-fav-view-padding {
display: flex;
flex-direction: row;
gap: 16px;
justify-content: flex-end;
margin-left: auto;
}
/*ExLibrary section between image-section and ex-list */
.library-edit-section {
margin-top: 32px;
width: 80%;
margin-left: var(--margin-percentage);
height: 24px;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.left-conatiner {
display: flex;
flex-direction: row;
gap: 10px;
height: 24px;
order: 1;
}
/*Tp Session */
.submenu-selected-edit-container {
display: flex;
flex-direction: column;
background: var(--grey-100);
border-top: none;
height: 202px;
}
.submenu-second-row-selected {
margin-top: 13px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
height: 106px;
}
.submenu-second-row-selected-left {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 55%;
height: 106px;
}
.category-and-name-container {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 4px;
width: 100%;
height: 62px;
}
.coaches-day-date {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 24px;
width: 100%;
height: 32px;
}
.coaches-div {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;
width: 25%;
height: 32px;
}
.submenu-second-row-selected-right {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px;
width: 51%;
height: 34px;
padding-top: 30px;
flex: none;
order: 1;
}
.tp-session-view-header {
width: 80%;
margin-left: var(--margin-percentage);
display: flex;
margin-bottom: 14px;
}
.tp-session-view-header-r1 {
width: 432px;
display: flex;
align-items: center;
}
.tp-session-view-header-clock {
padding-left: 8%;
}
.tp-session-view-header-name {
padding-left: 8%;
}
@media (max-width: 2559px) and (min-width: 1840px) {
/* CSS that should be displayed if width is equal to or less than 991px and larger
than 768px goes here */
.tp-session-view-header-clock {
padding-left: 10%;
}
.tp-session-view-header-name {
padding-left: 10%;
}
}
@media (min-width: 2560px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
.tp-session-view-header-clock {
padding-left: 13%;
}
.tp-session-view-header-name {
padding-left: 13%;
}
}
.tp-session-view-workout-wrapper {
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
transition: transform 0.4s;
}
.tp-session-view-workout-padding {
padding-left: 10%;
}
.tp-session-view-workout-content-wrapper {
padding-top: 32px;
display: flex;
}
.tp-session-view-workout-video {
display: flex;
gap: 16px;
}
.tp-session-view-workout-video video {
width: 312px;
}
.tp-session-view-workout-text-area {
padding-left: 32px;
width: 90%;
}
.tp-session-view-workout-desc {
margin-top: 12px;
margin-bottom: 12px;
}
.tp-session-view-workout-spec-desc {
display: flex;
align-items: center;
justify-content: center;
margin-left: 120px;
}
.workout-session-details {
display: flex;
flex-direction: column;
padding-left: 368px;
}
.tp-session-view-details-button {
display: flex;
}
.tp-session-view-details-button learnsports-icon svg {
width: 14px;
height: 14px;
padding-top: 2px;
padding-right: 10px;
}
.tp-session-view-details-closed span:hover {
color: var(--interaction-link-primary-color);
}
.tp-session-view-details-open span:hover {
color: var(--interaction-link-primary-color);
}
.tp-session-view-details-open learnsports-icon svg {
transition: transform 0.4s;
transform: rotate(-90deg) !important;
margin-top: -2px;
}
.tp-session-view-details-closed learnsports-icon svg {
transition: transform 0.4s;
transform: rotate(90deg) !important;
margin-top: 8px;
}
.tp-session-view-details-content-r1 {
padding-left: 4px;
display: flex;
flex-direction: row;
margin-bottom: 32px;
margin-top: 1%;
}
.tp-session-view-details-content-r2 {
margin-left: 5%;
}
.tp-session-view-total-minutes {
margin-top: 5%;
margin-left: 9%;
}
.tp-session-view-total-minutes2 {
margin-top: 5%;
margin-left: 10%;
}
.tp-session-view-total-minutes3 {
margin-top: 5%;
margin-left: 16%;
}
.tp-session-row-title {
margin-top: 12px;
color: var(--black);
}
.tp-session-row-title:hover {
color: var(--interaction-link-primary-color);
}
.tags-content {
margin-top: 10px;
background: var(--grey-100);
border-radius: 4px;
text-align: center;
width: fit-content;
padding: 0 10px;
line-height: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.material-table {
background-color: var(--white);
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
border-radius: 4px;
}
.material-table>table {
background-color: transparent !important;
border-radius: 4px;
}
mat-paginator {
background-color: transparent !important;
}
.paginator {
padding-top: 18px;
padding-left: var(--margin-percentage);
padding-right: var(--margin-percentage);
}
.material-table-modal {
padding-right: 3%;
padding-left: 3%;
padding-bottom: 3%;
}
.name-cell-text {
padding-left: 10px;
}
.cell-flex {
display: inline-flex;
align-items: center;
}
.tag-cell {
background: var(--grey-100);
border-radius: 4px;
padding: 4px 8px;
margin-top: 12px;
margin-bottom: 16px;
width: fit-content;
white-space: nowrap;
}
.tag-cell-connected {
padding-top: 7px;
}
.tag-cell-blank {
height: 27.98px;
}
.tag-cell-blank-connected {
height: 30px;
margin-bottom: 10px;
}
.equipment-content {
margin-top: 10px;
}
.panel-expanded {
padding-top: 3px;
padding-bottom: 3px;
transform: scale(1.04);
}
.tp-session-view-header-open-animation {
-webkit-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
animation-fill-mode: forwards;
}
.tp-session-view-workout-duration {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.tp-session-view-workout-people {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.tp-session-view-workout-toolbar {
margin-left: auto;
display: flex;
gap: 10px;
}
.tp-session-view-workout-separator {
width: 70px;
height: 0px;
border: 1px solid var(--grey-200);
transform: rotate(90deg);
}
.tp-session-view-header learnsports-icon,
.tp-session-view-header learnsports-icon div {
height: 32px;
width: 32px;
}
.tp-session-view-workout-duration learnsports-icon,
.tp-session-view-workout-duration learnsports-icon div {
height: 32px;
width: 32px;
}
.tp-session-view-workout-padding learnsports-icon,
.tp-session-view-workout-padding learnsports-icon div,
.tp-session-view-workout-padding learnsports-icon svg path {
height: 24px;
width: 24px;
fill: black;
}
.tp-session-view-workout-toolbar learnsports-icon,
.tp-session-view-workout-toolbar learnsports-icon div {
height: 32px;
width: 32px;
}
.tp-session-view-workout-open learnsports-icon svg {
transition: transform 0.4s;
transform: rotate(-90deg) !important;
}
.tp-session-view-workout-closed learnsports-icon svg {
transform: rotate(90deg) !important;
transition: transform 0.4s;
}
.tp-session-view-bottom-content {
margin-top: 3%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.tp-session-view-bottom-content-texting {
margin-top: 24px;
width: 80%;
}
.tp-session-view-bottom-content-row1 {
flex: 2 1 0;
}
.tp-session-view-bottom-content-row2 {
flex: 1 1 0;
}
.tp-session-view-bottom-content-row3 {
flex: 1 1 0;
}
.tp-session-view-bottom-content-padding {
padding-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.tp-session-view-bottom-content-texting-header-bullet-list2 {
background: var(--white);
border-radius: 4px;
height: 40px;
text-align: center;
width: fit-content;
padding: 0 10px;
line-height: 40px;
}
.tp-session-view-bottom-content-percentage {
margin-left: 10px;
height: 40px;
line-height: 40px;
text-align: center;
}
.tp-session-view-bottom-content-tags {
display: flex;
}
.limit-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
/*Ex library - all*/
.library-search-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 0px 0px 0px;
width: 80%;
margin-left: var(--margin-percentage);
}
.search-title {
display: flex;
align-items: center;
}
.modal-background {
background: var(--grey-100);
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 2px 6px 2px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
/*Create team modal - almost same design as is for my team pages*/
.coaches-modal {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 84px;
width: 94%;
margin-left: 3%;
padding: 32px 0px 12px;
}
.coaches-modal-add-coach-modal {
width: 94%;
margin-left: 3%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
background: var(--white);
border-radius: 4px;
margin-bottom: 24px;
box-shadow:
0px 2px 6px 2px rgba(0, 0, 0, 0.15),
0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}
.cocaches-modal-material-table {
margin-left: 3%;
margin-right: 4%;
padding-bottom: 24px;
width: 94%;
padding-top: 24px;
}
/*My team pages */
.coaches {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 84px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
padding: 32px 0px 12px;
}
.coaches-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0px;
height: 40px;
width: 50%;
}
.coaches-right {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px;
gap: 12px;
height: 40px;
width: 50%;
}
.coaches-title {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 32px;
height: 30px;
}
.copy-secret-link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 0px;
gap: 8px;
height: 40px;
order: 0;
cursor: pointer;
border: none;
background-color: var(--grey-100);
}
.link-text {
height: 24px;
}
.padding-x {
margin-top: 16px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.add-coaches-text {
letter-spacing: 0.1px;
color: var(--interaction-link-primary-color);
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.add_coaches_disabled {
width: 149px;
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 24px 10px 16px;
gap: 8px;
border-radius: 100px;
border: 0px;
background: rgba(28, 27, 31, 0.12);
opacity: 0.38;
}
.triple-dots-button {
height: 40px;
width: 40px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--interaction-link-primary-color);
color: var(--interaction-link-primary-color);
flex: none;
background-color: var(--grey-100);
cursor: pointer;
}
.triple-dots-button:hover {
height: 40px;
width: 40px;
left: 0px;
top: 32px;
border-radius: 100px;
background: rgba(234, 33, 75, 0.1);
flex: none;
cursor: pointer;
}
.triple-dots-button-inactive {
height: 40px;
width: 40px;
left: 0px;
top: 32px;
border-radius: 100px;
border: 1px solid var(--grey-300);
background: var(--grey-300);
flex: none;
}
.add-coach-modal {
width: 82%;
margin-left: 9%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
background: var(--white);
border-radius: 4px;
margin-bottom: 24px;
box-shadow:
0px 2px 6px 2px rgba(0, 0, 0, 0.15),
0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}
.add-coach-modal-header {
width: 100%;
height: 30px;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.modal-title {
height: 30px;
align-self: center;
}
.modal-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 0px 16px;
width: 100%;
}
.team-birth-year {
display: flex;
flex-direction: row !important;
}
.team-birth-year mat-form-field {
width: 180px !important;
padding-right: 220px !important;
}
.team-birth-year mat-slide-toggle {
width: 400px !important;
flex-direction: row !important;
}
.team-birth-year-delete {
display: flex;
flex-direction: row !important;
padding-right: 177px;
}
.team-birth-year-delete mat-form-field {
width: 180px !important;
}
.team-birth-year-delete mat-slide-toggle {
width: 400px !important;
flex-direction: row !important;
}
.team-birth-year-delete learnsports-icon {
padding-left: 24px !important;
padding-top: 18px !important;
}
.modal-content-secret-link {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.add_coach_club {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
width: 124px;
height: 56px;
background: var(--interaction-link-primary-color);
border-radius: 4px;
border: 0px;
cursor: pointer;
}
.add-coach-club-container {
padding-right: 270px !important;
}
.modal-text-1 {
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 16px;
height: 24px;
}
.form-model {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0px 0px 0px;
gap: 24px;
width: 80%;
}
.form-model-add-coach-club {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0px;
width: 80%;
gap: 24px;
}
.form-model-add-coach-club>div:first-child {
width: 400px;
}
.form-model-add-coach-club>div mat-form-field:first-child {
width: 60%;
height: 56px;
border-radius: 4px 4px 0px 0px;
display: flex;
align-items: flex-start;
}
.form-model-add-coach-club mat-form-field {
width: 400px;
height: 56px;
border-radius: 4px 4px 0px 0px;
}
.modal-coaches-link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
height: 120px;
width: 80%;
align-self: center;
}
.link-form {
display: flex;
flex-direction: row;
justify-content: center;
}
.secret-link-input {
width: 501px;
border: 1px solid var(--grey-300);
border-radius: 4px 0 0 4px;
outline: none;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.search-input-font-size {
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.email-form {
display: flex;
flex-direction: row;
gap: 24px;
}
.email-field mat-form-field {
display: flex;
width: 400px;
height: 56px;
}
.role-form {
display: flex;
flex-direction: row;
gap: 24px;
}
.permission-form {
display: flex;
flex-direction: row;
gap: 24px;
}
.coach-modal-down-text {
display: flex;
flex-direction: row;
width: 80%;
padding-bottom: 56px;
justify-content: center;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.add-cocahes-modal-text {
padding-top: 24px;
}
.add_coach {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
width: 124px;
height: 56px;
background: var(--interaction-link-primary-color);
border-radius: 4px;
border: 0px;
cursor: pointer;
}
.copy-link {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 16px;
gap: 10px;
width: 140px;
height: 56px;
background: var(--interaction-link-primary-color);
border-radius: 0px 4px 4px 0px;
border: none;
cursor: pointer;
}
.modal-content-players {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.form-model-players {
padding-top: 12px !important;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 24px;
width: 696px;
height: 56px;
}
.nickname-form mat-form-field {
display: flex;
width: 200px;
height: 56px;
}
.phone-form mat-form-field {
display: flex;
width: fit-content + 20px !important;
height: 56px !important;
}
.phone-num-form mat-form-field {
display: flex;
width: 200px;
height: 56px;
}
.modal-bottom-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 42px;
gap: 16px;
width: 399px;
}
.bottom-red-text {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
width: 399px;
height: 64px;
margin-bottom: 30px;
}
/*Coaches info box*/
/*Players table*/
/*Coaches table*/
/*Allow players to be inspired*/
/*Settings pages*/
.settings-menu {
display: grid;
grid-template-columns: 1fr 4fr;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
padding-top: 32px;
column-gap: 38px;
}
.left-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
width: 260px;
}
.settings-content {
max-width: 806px;
}
.user-avatar-div {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
width: 100%;
height: 190px;
align-self: stretch;
order: 0;
}
.avatar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 110px;
height: 110px;
border-radius: 100px;
/*background: rgba(161, 39, 106, 0.15);*/
/* Element drop shaddow */
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}
.avatar-medium {
display: flex;
width: 46px;
height: 56px;
padding: 4px 8px 0px 8px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
}
.avatar-initials {
height: 60px;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 56px;
line-height: 60px;
display: flex;
align-items: center;
text-align: center;
}
.user-full-name {
width: 100%;
height: 30px;
text-align: center;
order: 1;
}
.personal {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 12px;
width: 100%;
}
.section-sub-heading {
width: 100%;
height: 24px;
display: flex;
justify-content: flex-start;
}
.submenu-list {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 100%;
background-color: none;
}
.list-element {
display: flex;
flex-direction: row;
padding: 16px 48px 16px 16px;
gap: 12px;
border-radius: 4px;
height: 56px;
width: 100%;
}
.separator-element {
height: 0px;
border: 1px solid var(--grey-200);
width: 98%;
}
.same-row {
display: flex;
flex-direction: row;
gap: 10px;
}
.right-side {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
order: 1;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px 32px 48px 24px;
gap: 24px;
width: 85%;
background: var(--white);
flex: none;
order: 1;
align-self: stretch;
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 2px 6px 2px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.container-team-info {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px 32px 48px 24px;
width: 85%;
background: var(--white);
flex: none;
order: 1;
align-self: stretch;
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 2px 6px 2px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.container-header {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
}
.my-club-center-icons {
margin-top: 4px;
}
.container-team-info-header {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 24px;
gap: 8px;
}
.container-text {
/*padding-bottom: 24px;*/
width: 75%;
}
.container-text-card-details {
width: 75%;
padding-bottom: 20px;
}
.container-team-info-text {
padding-bottom: 24px;
width: 75%;
}
.container-user-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
}
.container-notifications {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.container-notifications-text {
width: 70%;
display: flex;
flex-direction: column;
gap: 16px;
}
.container-notifications-switch {
width: 30%;
justify-content: flex-end;
display: flex;
}
.container-notifications-switch mat-slide-toggle {
color: var(--green-100) !important;
}
/*Table in Days/time/arena modal*/
.team-plan-table-wrapper {
width: 60%;
transition: transform 0.4s;
}
.team-plan-table-wrapper mat-expansion-panel {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.team-plan-button {
margin-left: 2%;
}
.plan-row-container {
margin-bottom: 2%;
}
.add {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 0px;
gap: 8px;
min-width: 110px;
height: 40px;
background: var(--interaction-link-primary-color);
border-radius: 100px;
border: 0px;
cursor: pointer;
}
.plan-row {
display: flex;
flex-direction: row;
height: 56px;
}
.plan-row-time {
width: 80%;
display: flex;
flex-direction: column;
padding: 8px 16px;
}
.plan-row-action {
gap: 24px;
justify-self: flex-end;
padding: 16px 24px 16px 0px;
}
.color-selector {
display: flex;
flex-direction: row;
gap: 12px;
padding-bottom: 24px;
}
.container-button {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
height: 56px;
padding-top: 12px;
}
.container-button-day-arena {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 20%;
height: 56px;
padding-top: 12px;
padding-right: 40px;
}
.save-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
height: 56px;
background: var(--interaction-link-primary-color);
border-radius: 4px;
border: none;
cursor: pointer;
}
.cancel-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
border-radius: 4px;
background-color: var(--white);
cursor: pointer;
}
.disable-cancel-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
height: 56px;
border: 1px solid var(--disabled-light-color);
border-radius: 4px;
background-color: var(--disabled-light-color);
}
.form-wraper {
display: flex;
flex-direction: column;
width: 50%;
}
.form-wraper-50 {
display: flex;
flex-direction: column;
width: 50%;
}
.form-wraper-user-settings {
display: flex;
flex-direction: column;
width: 50%;
gap: 16px;
}
.delete-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
width: 129px;
height: 56px;
background: var(--interaction-link-primary-color);
border-radius: 4px;
border: none;
cursor: pointer;
}
.download-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--interaction-link-primary-color);
border-radius: 4px;
border: none;
cursor: pointer;
width: 188.33px;
height: 56px;
}
/*Subcriptions*/
.container-sub {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.container-sub-first-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.container-sub-heading {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 24px;
height: 30px;
gap: 10px;
}
.product-container {
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 32px;
width: 100%;
padding-top: 32px;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
width: 260px;
box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.product-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
isolation: isolate;
width: 100%;
height: 174px;
background: var(--text-heading-color);
border-radius: 4px 4px 0px 0px;
align-self: stretch;
}
.product-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 16px;
align-self: stretch;
order: 0;
}
.price {
display: flex;
flex-direction: column;
align-items: center;
width: 212px;
}
.price-text-big {
padding: 24px 0px 0px 0px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.price-description {
width: 100%;
text-align: center;
flex-direction: column;
}
.club-price-button-section {
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
}
.club-button-square {
display: flex;
padding: 16px 24px 16px 16px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 4px;
border: 1px solid var(--global-grey-300, #d8d8d9);
background: var(--global-grey-200, #ddd);
}
.club-red-button-square {
display: flex;
padding: 16px 24px 16px 16px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 4px;
background: var(--interaction-link-primary-color);
}
.cancel-text {
width: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 24px;
text-decoration-line: underline;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--interaction-link-primary-color);
cursor: pointer;
}
.product-content-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 40px;
gap: 8px;
width: 230px;
}
.product-content-list-middle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px 20px 8px 50px;
gap: 8px;
width: 230px;
}
.club-product-content-list {
display: flex;
padding: 4px 24px 40px 24px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.product-desciption {
width: 212px;
}
.product-red-button {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0px 16px;
gap: 16px;
width: 212px;
}
.product-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
width: 212px;
height: 56px;
background: var(--interaction-link-primary-color);
border-radius: 4px;
border: none;
cursor: pointer;
}
.product-text {
width: 230px;
height: 40px;
padding-bottom: 28px;
text-align: center;
}
.payment-radio-button {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px 0px 0px;
}
.payment-radio-button-option {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 12px;
}
.card-update {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 0px 20px 0px;
gap: 12px;
width: 100%;
}
.card-number {
display: flex;
align-items: center;
}
.link-card-update {
display: flex;
align-items: center;
cursor: pointer;
}
/*New payment table*/
.container-sub-payment {
flex-direction: column;
width: fit-content;
}
.new-payment-table {
display: flex;
align-items: center;
justify-content: center;
}
.new-payment-table-header {
display: flex;
height: 56px;
border-bottom: 1px solid var(--grey-200);
background-color: var(--grey-200);
}
.new-payment-table-sub {
width: 17%;
padding: 18px 16px;
align-items: flex-start;
gap: 10px;
}
.new-payment-table-amount {
width: 11%;
padding: 18px 16px;
align-items: flex-start;
gap: 10px;
}
.new-payment-table-periodStart {
width: 10%;
padding: 18px 16px;
align-items: flex-start;
gap: 10px;
}
.new-payment-table-periodEnd {
width: 10%;
padding: 18px 16px;
align-items: flex-start;
gap: 10px;
}
.new-payment-table-receipts {
width: 30%;
padding: 18px 16px;
align-items: flex-start;
gap: 10px;
}
.new-payment-table-payStatus {
width: 20%;
padding: 18px 16px;
align-items: flex-start;
gap: 10px;
}
.new-payment-table-wrapper {
width: 90%;
transition: transform 0.4s;
}
.new-payment-table-wrapper mat-expansion-panel-header {
width: 100% !important;
padding: unset;
}
.subscription-body {
margin-left: -12px;
padding: unset;
width: 100% !important;
}
.subscription-body-sub-column {
width: 110px;
align-items: flex-start;
gap: 10px;
padding: 16px;
}
.subscription-body-amount-column {
padding: 16px;
width: 68px;
align-items: flex-start;
gap: 10px;
}
.subscription-body-periodStart-column {
align-items: flex-start;
gap: 10px;
width: 62px;
padding: 16px;
}
.subscription-body-periodEnd-column {
align-items: flex-start;
gap: 10px;
width: 60px;
padding: 16px;
}
/*Columns for table payment*/
.subscription-colum {
width: 130px;
align-items: flex-start;
gap: 10px;
padding: 16px;
}
.amount-column {
padding: 16px;
width: 80px;
align-items: flex-start;
gap: 10px;
}
.periodStart-column {
align-items: flex-start;
gap: 10px;
padding: 16px;
width: 70px;
}
.periodEnd-column {
align-items: flex-start;
gap: 10px;
width: 70px;
padding: 16px;
}
.receipts-column {
align-items: flex-start;
gap: 10px;
padding: 16px;
width: 240px !important;
}
.payStatus-column {
align-items: flex-start;
gap: 10px;
padding: 16px;
}
/* DateModal */
.button-text-color {
color: var(--interaction-link-primary-color) !important;
}
.date-wrapper {
width: 344px;
}
.date-card {
padding: 8px;
}
.date-card-header {
height: 15%;
padding: 8px;
}
.date-buttons {
display: flex;
justify-content: flex-end;
}
.flex {
display: flex;
}
/*User a lot by submenu*/
.flex-align-center-gap-8 {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.flex-align-center-team {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.date-main-text {
font-weight: 500;
font-size: 12px;
line-height: 16px;
padding-top: 16px;
padding-left: 24px;
padding-right: 24px;
}
.date-subtext {
padding-top: 32px;
padding-left: 24px;
padding-right: 24px;
justify-content: space-between;
}
.date-text {
font-weight: 400;
font-size: 32px;
line-height: 40px;
}
.date-subtext learnsports-icon div {
height: 40px;
}
/* TimeModal */
.time-wrapper {
width: 568px;
background: var(--grey-100);
}
.time-card-header {
height: 15%;
padding: 8px;
}
.time-input {
height: 86px;
width: 96px;
border-radius: 8px !important;
background: var(--grey-100);
}
.time-separator {
color: var(--grey-900);
font-weight: 400;
font-size: 57px;
line-height: 64px;
padding-top: 5%;
padding-left: 6px;
padding-right: 6px;
}
.time-text {
color: var(--grey-600);
color: var(--grey-500);
font-weight: 500;
font-size: 12px;
line-height: 16px;
padding-top: 24px;
padding-bottom: 20px;
}
.time-text-2 {
padding-bottom: 20px;
}
.team-time-text {
color: var(--grey-600);
font-weight: 500;
font-size: 12px;
line-height: 16px;
padding-top: 8px;
padding-bottom: 20px;
}
.time-hour {
padding-left: 24px;
}
.time-minus {
color: var(--grey-900);
font-weight: 400;
font-size: 57px;
line-height: 64px;
padding-top: 13%;
padding-left: 4%;
}
.minutes {
padding-left: 44%;
}
.size {
width: 80px;
padding-top: 20px;
}
.size2 {
width: 80%;
height: 250px;
padding-top: 24px;
}
.size3 {
width: 80px;
}
.textArea {
min-height: 190px;
}
.padding-left {
margin-left: var(--margin-percentage);
margin-top: 24px;
}
.tp-edit-name-input {
width: 36.2%;
}
.tp-edit-date-input {
width: 17.5%;
}
.tp-edit-time-input {
width: 32%;
padding-left: 1.2%;
}
.add-exercise-button-position {
flex-direction: row;
display: flex;
justify-content: flex-end;
padding-right: var(--margin-percentage);
padding-top: 32px;
}
.create-cancel-button {
width: 97px;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
border-radius: 4px;
color: var(--interaction-link-primary-color);
flex: none;
background-color: var(--grey-100);
cursor: pointer;
}
.create-save-button {
width: 97px;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
background: var(--interaction-link-primary-color);
border-radius: 4px;
color: var(--text-heading-color);
flex: none;
cursor: pointer;
}
.tp-session-edit-view-padding {
display: flex;
gap: 16px;
margin-left: auto;
}
.test {
margin-right: 24px;
}
/*modal Are you sure*/
.modal-are-you-sure {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 32px;
padding-bottom: 32px;
isolation: isolate;
width: 100%;
height: auto;
gap: 32px;
}
.are-you-sure-heading {
display: flex;
flex-direction: column;
align-items: center;
width: 350px;
height: auto;
text-align: center;
gap: 12px;
}
.are-you-sure-text {
width: 500px;
height: auto;
text-align: center;
}
.ays-button-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-start;
padding: 0px;
padding-right: 24px;
gap: 24px;
width: 600px;
height: 40px;
}
/*Modal Pop-up-info-box*/
.modal-pop-up-info-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 100%;
height: 410px;
gap: 32px;
padding-bottom: 32px;
padding-top: 32px;
}
.pop-up-info-box-heading {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 273px;
height: 74px;
}
.pop-up-info-box-text {
width: 636px;
height: 192px;
text-align: center;
}
.pop-up-button-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
padding: 24px;
width: 700px;
}
/*Modal Stripe-info*/
.modal-stripe-info {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 100%;
height: 380px;
gap: 32px;
padding-bottom: 32px;
padding-top: 32px;
}
.stipe-info-heading {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
width: 638px;
height: 74px;
}
.stripe-info-text {
width: 636px;
height: 72px;
}
.stripe-check-box-container {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 8px;
width: 650px;
height: 24px;
}
.check-box-text {
padding-top: 10px;
}
.stripe-info-button {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0px 0px 62px;
gap: 24px;
width: 700px;
height: 64px;
}
.stipe-button {
display: flex;
height: 40px;
width: 283px;
gap: 12px;
padding-left: 12px;
border-radius: 100px;
border: 1px solid var(--interaction-link-primary-color);
color: var(--white);
flex: none;
background: var(--interaction-link-primary-color);
cursor: pointer;
flex-direction: row;
}
.stipe-button-text {
width: 201px;
height: 24px;
padding-top: 8px;
padding-bottom: 8px;
}
.stipe-button learnsports-icon {
padding-top: 8px;
}
/*ex-favourire page*/
.library-favorite-top-section {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 0px 4px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
height: 56px;
}
.favorite-filter {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px;
gap: 8px;
}
.info-no-exercises {
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
transition: transform 0.4s;
min-height: 76px;
display: flex;
justify-content: center !important;
}
/*Footer*/
.footer-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 64px;
width: 100%;
height: 132px;
position: relative;
bottom: 0px;
}
.footer-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px 0px 48px 0px;
width: 400px;
height: 132px;
}
/*Create ex page*/
.submenu-create-new-ex {
display: flex;
flex-direction: column;
padding: 0px;
}
.submenu-second-row-create-ex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 24px;
margin-left: 10%;
margin-right: 10%;
gap: 10px;
height: 104px;
}
.submenu-second-row-create-ex-left {
width: 80%;
height: 40px;
}
.submenu-second-row-create-ex-right {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
width: 204px;
height: 56px;
}
.create-new-ex-container {
display: flex;
flex-direction: column;
margin-left: 10%;
margin-right: 10%;
}
.create-ex-video-upload {
display: flex;
flex-direction: column;
padding: 0px;
gap: 24px;
width: 60%;
padding-bottom: 56px;
padding-top: 26px;
}
.create-ex-desc {
display: flex;
flex-direction: column;
gap: 12px;
}
.size4 {
width: 550px;
padding-top: 20px;
}
.cancel-button-page {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 24px;
gap: 10px;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
border-radius: 4px;
cursor: pointer;
background: var(--grey-100);
}
/*Edit USER page*/
.edit-user-title {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 24px;
gap: 8px;
}
.user-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
width: 400px;
padding-bottom: 24px;
}
.user-form mat-form-field {
width: 400px;
height: 56px;
}
.edit-coach-role-form mat-form-field {
display: flex;
align-items: center;
align-items: flex-start;
width: 200px;
}
.edit-user-phone-form {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 24px;
width: 378px;
height: 56px;
}
.edit-user-phone-num-form mat-form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 265px;
height: 56px;
}
.team-info-form {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
}
.team-info-form learnsports-icon {
padding-top: 12px;
}
.team-name {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 260px;
height: 56px;
border-radius: 4px;
}
.sharing-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin-top: 12px;
height: 24px;
}
.sharing-info learnsports-icon {
padding-bottom: 12px;
margin-right: 10px;
}
.sharing-info-text {
width: fit-content;
height: 24px;
}
.edit-user-product-container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 772px;
gap: 24px;
}
.product-name learnsports-icon {
margin-top: 2px !important;
}
.edit-user-product-switch {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
width: 300px;
}
.edit-user-info-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
width: 1140px;
margin-top: 48px;
}
.ex-result-description {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 64px;
}
.ex-result-input {
width: 55%;
}
.connection-description {
margin-top: 48px;
display: flex;
flex-direction: column;
padding-left: var(--margin-percentage);
padding-right: var(--margin-percentage);
gap: 16px;
}
.flex-connection-description {
padding-top: 8px;
display: flex;
gap: 4px;
}
.flex-button {
display: flex;
gap: 8px;
}
.linkTag {
margin-top: 10px;
background: var(--white);
border-radius: 4px;
text-align: center;
width: fit-content;
padding: 0 10px;
line-height: 40px;
height: 40px;
}
.linkTagSelected {
margin-top: 10px;
background: var(--interaction-link-selected-color);
border-radius: 4px;
text-align: center;
width: fit-content;
padding: 0 10px;
line-height: 40px;
height: 40px;
}
.linkTagDescription {
font-weight: 500;
}
.linkTagContainer {
margin-top: 1%;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.linkContainerMargin {
margin-top: 1%;
margin-bottom: 1%;
}
.linkTagButton {
display: flex;
align-items: center;
justify-content: space-between;
}
.arrow-up-down learnsports-icon svg {
width: 15px;
height: 15px;
padding-top: 2px;
padding-right: 10px;
}
.linksFlex {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 8px;
margin-bottom: 24px;
}
.linkTagButton-open .flex learnsports-icon svg {
transition: transform 0.4s;
transform: rotate(-90deg) !important;
margin-top: -2px;
}
.linkTagButton-closed .flex learnsports-icon svg {
transition: transform 0.4s;
transform: rotate(90deg) !important;
margin-top: 6px;
}
.link-tag-connection-button {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.link-tag-connection-button learnsports-icon:hover svg path {
fill: red;
}
.link-tag-connection-button:hover learnsports-icon:hover {
background-color: var(--interaction-link-selected-color);
width: 24px;
height: 24px;
border-radius: 4px;
border-color: var(--interaction-link-selected-color);
}
.hidden-for-now {
display: none;
visibility: hidden;
}
.hidden {
visibility: hidden;
}
.my-training-plans-layout {
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
margin-bottom: 0.8%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.info-widget {
background: var(--global-sea-green-100, #e0efef);
width: 700px;
padding: 24px 24px 32px 24px;
box-shadow:
0px 2px 6px 2px rgba(0, 0, 0, 0.15),
0px 1px 2px 0px rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin-bottom: 40px;
}
.info-widget-warning {
background: var(--global-yellow-100, #fef9e8);
width: 700px;
padding: 24px 24px 32px 24px;
box-shadow:
0px 2px 6px 2px rgba(0, 0, 0, 0.15),
0px 1px 2px 0px rgba(0, 0, 0, 0.3);
border-radius: 4px;
justify-content: space-between;
margin-bottom: 40px;
}
.info-widget-flex {
display: flex;
justify-content: space-between;
}
.info-widget-close-button {
margin-top: -15px;
margin-right: -10px;
}
.info-widget-text {
width: 90%;
white-space: pre-wrap;
}
.info-widget-button {
margin-top: 20px;
}
/*Info widget position*/
.info-wigdet-container-my-team {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px 24px 32px 24px;
}
.coaches-right mat-menu-item {
display: flex;
width: 210px !important;
height: 56px;
padding: 16px 24px 16px 16px;
align-items: center;
gap: 12px;
align-self: stretch;
background-color: yellow !important;
}
.toast-separator {
padding-left: 8px;
border-left: 0.3px solid var(--white);
height: 35px;
opacity: 0.25;
}
app-toast,
.toast-class {
z-index: 222222222;
}
.toast-icon learnsports-icon svg {
height: 26px !important;
width: 26px !important;
}
.toast-icon learnsports-icon {
padding-top: 5px;
}
.toast-action-message {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
}
.custom-search {
border-radius: 100px;
border: 1px solid var(--grey-300) !important;
background: var(--white) !important;
display: flex !important;
width: 350px !important;
height: 40px;
justify-content: center;
align-items: center;
outline: none !important;
}
.table-button {
background-color: var(--grey-100);
width: 24px;
height: 24px;
border-radius: 4px;
border-color: var(--interaction-link-selected-color);
margin-left: 30%;
}
.table-button:hover {
background-color: var(--interaction-link-selected-color);
}
.table-button-open {
background-color: var(--interaction-link-selected-color);
}
.container-relative {
text-align: center;
/* Center horizontally */
vertical-align: middle;
/* Center vertically */
display: table-cell;
/* Allows vertical centering */
height: 100%;
/* Ensure it takes the full height of the cell */
}
.container-name {
position: relative;
width: 200px;
}
/*DASHBOARD*/
.dashboard-container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 24px;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
.dashboard-container-fa {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 24px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.dashboard-grid {
display: grid;
padding-top: 24px;
grid: auto auto/ 1fr 1fr 1fr;
grid-auto-rows: fit-content;
grid-row-gap: 24px;
grid-column-gap: 24px;
justify-content: center;
width: 100%;
margin: 0 auto;
list-style: none;
}
@media (max-width: 1200px) {
.dashboard-grid {
grid: auto auto/ 1fr 1fr;
}
}
.dashboard-grid>.item {
height: fit-content;
gap: 16px;
background-color: var(--white);
}
.dashboard-grid>.item>div {
justify-content: center;
align-items: center;
display: flex;
margin-top: 24px;
margin-left: 16px;
margin-right: 16px;
border-radius: 4px;
align-self: stretch;
min-height: 56px;
}
.dashboard-grid>.item>div>span {
padding: 16px;
}
.dashboard-grid>.item>p>ul {
margin-right: 16px;
padding-bottom: 16px;
}
.dashboard-grid>.item>p>ul>li {
cursor: unset !important;
display: list-item;
padding-bottom: 8px;
}
.dashboard-graphs {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 24px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.graph-column {
display: inline-block;
align-items: center;
width: 15%;
max-height: 500px;
}
.graph-percentage {
display: flex;
justify-content: center;
padding-bottom: 16px;
}
.graph {
border-radius: 4px 4px 4px 4px;
margin-bottom: 16px;
}
.stat-text {
max-height: 20px;
text-align: center;
}
.background-color-1 {
background-color: var(--sea-green-100);
}
.background-color-2 {
background-color: var(--orange-100);
}
.background-color-3 {
background-color: var(--yellow-100);
}
.background-color-4 {
background-color: var(--interaction-link-selected-color);
}
/*Custom search for MODAL*/
.custom-search-modal {
border-radius: 100px;
border: 1px solid var(--grey-300) !important;
background: var(--white) !important;
display: flex !important;
width: 600px !important;
height: 60px;
padding-left: 18px;
gap: 12px;
align-items: center !important;
outline: none !important;
}
/*TP-row in modal*/
.list-tpview-row-modal {
display: flex;
flex-direction: row;
width: 90%;
margin-bottom: 1%;
}
.share-exercises-text {
display: flex;
align-self: flex-start;
align-items: flex-start;
width: 60%;
margin-left: 3%;
padding-bottom: 32px;
}
.share-exercises-text-under {
display: flex;
align-self: flex-start;
align-items: flex-start;
width: 60%;
margin-left: 3%;
gap: 24px;
padding-bottom: 32px;
padding-top: 32px;
flex-direction: column;
}
.coaches-right-modal {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px;
gap: 12px;
height: 40px;
width: 48%;
}
.coaches-modal-ex-share {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 84px;
width: 94%;
margin-right: 4%;
margin-left: 4%;
padding: 32px 0px 12px;
}
.selected-exercises-row {
width: 100%;
}
.ask-for-help-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 24px;
}
.ask-for-help-wrapper:hover .ask-for-help-avatar {
border-radius: 50%;
border: 2px solid var(--interaction-link-primary-color);
cursor: pointer;
}
.ask-for-help-avatar {
border-radius: 50%;
border: 2px solid transparent;
width: 80px;
padding: 0.1em;
}
.ex-text-area {
min-height: 80px;
min-width: 80%;
}
.team-modal-container {
width: 80%;
display: flex;
flex-direction: column;
align-items: flex-start;
/*gap: 24px; */
}
.arena-container {
padding-top: 24px;
width: 40%;
}
.arena-container mat-form-field {
width: 100%;
}
.team-time-input {
height: 56px;
width: 96px;
border-radius: 8px !important;
}
.team-time-separator {
color: var(--grey-900);
font-weight: 400;
font-size: 37px;
line-height: 64px;
padding-left: 6px;
padding-right: 6px;
}
.team-time-minus {
color: var(--grey-900);
font-weight: 400;
font-size: 57px;
line-height: 64px;
padding-top: 9%;
padding-left: 4%;
}
.connection-text-container {
display: flex;
padding-bottom: 24px;
flex-direction: column;
align-items: center;
gap: 2px;
align-self: stretch;
margin-left: 3%;
margin-right: 3%;
}
.connection-link-text {
width: 60%;
justify-content: center;
flex-direction: row;
gap: 10px;
display: flex;
}
.connection-text {
width: 35%;
text-align: center;
}
.connection-week {
width: 25%;
}
.container-dta {
width: 60%;
}
.padding-18px {
margin-top: -18px !important;
}
.conncetion-data-row {
display: flex;
align-items: center;
gap: 12px;
width: 80%;
}
.disabled-field-background mat-label {
background-image: linear-gradient(var(--grey-100), var(--grey-200));
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
/* Upload video overlay modal widget */
.video-upload-modal-overlay {
background-color: var(--grey-600);
opacity: 0.5;
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
margin: 0 auto;
z-index: 10000;
}
.video-upload-modal-white-window {
background-color: var(--white) !important;
border: 1px solid var(--colors-borders-border-dark-color, #909092) !important;
z-index: 10000;
position: fixed;
width: 40vw;
height: auto;
margin: 0 auto;
z-index: 10001;
top: 30vh;
left: 30vw;
display: flex;
flex-direction: column;
border-radius: 4px;
padding: 2vw;
}
.video-upload-modal-title {
width: 100%;
position: relative;
left: 0;
text-align: center;
margin-bottom: 1.5vw;
}
.video-upload-modal-title .body-xxl {
margin-bottom: 1vw;
}
.video-upload-modal-steps {
position: relative;
width: 100%;
display: flex;
justify-content: center;
gap: 48px;
margin-top: 1vw;
}
.video-upload-modal-progress {
position: relative;
width: 60%;
display: flex;
justify-content: left;
gap: 48px;
background: var(--sea-green-100);
margin-left: 20%;
height: 20px;
border-radius: 5px;
margin-bottom: 1vw;
margin-top: 1.5vw;
}
.video-upload-progress-text {
color: var(--sea-green-500);
}
.video-upload-modal-progress-gauge {
background: var(--sea-green-500);
height: 20px;
border-radius: 5px;
}
.text-align-left {
text-align: left;
}
.wrap-page {
display: flex;
}
.grey-overlay {
width: 100vw;
height: 100vh;
z-index: 10000;
background: var(--grey-300);
position: fixed;
top: 0;
left: 0;
}
.admin-actions-cell {
display: flex;
justify-content: right;
flex-direction: row;
gap: 15px;
}
.language-selector {
margin-top: 23px;
}
.admin-edit-body {
margin-top: 24px;
display: flex;
flex-direction: column;
justify-content: left;
gap: 25px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
}
.img-preview {
width: 30vw;
height: auto;
}
.example-chip-list {
align-items: flex-start;
padding: 0px;
gap: 24px;
width: 558px;
height: auto;
}
.admin-button-plus {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 8px;
height: 40px;
width: 160px;
background: var(--interaction-link-primary-color);
border-radius: 100px;
border: 0px;
cursor: pointer;
}
.modal-move-container {
padding: 32px 32px 32px 32px;
}
.modal-move-header {
display: flex;
justify-content: space-between;
}
.modal-move-header-text {
display: flex;
align-items: center;
justify-items: center;
gap: 12px;
}
.modal-move-buttons {
display: flex;
align-items: center;
justify-items: center;
gap: 24px;
}
.modal-move-description {
display: flex;
align-items: center;
justify-content: center;
margin-top: 32px;
}
.modal-move-description span {
max-width: 384px;
}
.modal-move-info-box {
margin-top: 32px;
}
.move-modal-inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 32px;
}
.modal-move-week {
width: 280px;
}
.modal-move-arena {
width: 500px;
}
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none !important;
}
.admin-upload-row {
display: flex;
flex-direction: row;
gap: 24px;
}
.ex-new-wrapper {
margin-left: 2%;
margin-right: 2%;
transition: transform 0.4s;
}
.ex-new-view-workout-toolbar {
margin-left: auto;
}
.ex-new-toolbar-buttons {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
}
.ex-new-view-workout-spec-desc {
display: flex;
align-items: center;
padding-top: 64px;
margin-left: -36px;
}
mat-expansion-panel-header mat-panel-title.tp-session-view-workout-closed {
flex-grow: 3;
}
mat-expansion-panel-header mat-panel-title.exercise-title {
flex-grow: 3;
}
.description-row-padding {
padding-left: 4%;
display: flex;
flex-direction: column;
gap: 12px;
}
.clock-padding {
padding-left: 48px;
}
.tp-session-edit-workout-padding {
padding-left: 5%;
}
.tp-session-edit-workout-duration {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 42px;
}
.tp-session-edit-workout-people {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
}
.tp-session-edit-workout-separator {
margin-top: 12px;
width: 90px;
height: 0px;
border: 1px solid var(--grey-200);
transform: rotate(90deg);
}
.flex-buttons {
display: flex;
}
.flex-filter {
display: flex;
align-items: center;
}
.paginator-modal {
padding-left: 76%;
padding-top: 18px;
}
.admin-toolbar-row {
margin-top: 25px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 30px;
}
.tp-add-arena-button {
margin: 16px;
margin-top: 20px;
height: fit-content;
}
.ex-session-view-workout-padding {
padding-left: 4%;
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-translation-edit-list {
display: flex;
flex-direction: column;
}
.admin-translation-edit-list div {
display: flex;
flex-direction: row;
gap: 1%;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
.translation-admin-dropdown-row {
cursor: pointer;
height: auto;
padding: 5px;
padding-left: 10px;
border-bottom: 1px solid var(--grey-200);
min-height: 25px;
z-index: 100000 !important;
}
.translation-admin-dropdown-row:hover {
background-color: var(--grey-100) !important;
}
mat-expansion-panel-header:hover {
background-color: transparent !important;
}
mat-expansion-panel:hover mat-expansion-panel-header>span>mat-panel-title>div>span:first-of-type {
color: var(--interaction-link-primary-color);
}
.playbutton {
margin-left: 10%;
}
.tp-edit-header {
display: flex;
align-items: center;
justify-content: center;
}
.upload-admin-overlay {
display: flex;
justify-content: center;
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: var(--black);
opacity: 0.5;
z-index: 10000;
}
.upload-admin-overlay .body-xxl {
color: var(--white);
}
.not-clickable {
cursor: default;
}
.contact-me-wrapper {
margin-left: 30%;
margin-right: 30%;
display: flex;
flex-direction: column;
align-items: center;
max-width: 700px;
}
.contact-first-row {
margin-top: 24px;
display: flex;
gap: 24px;
}
.contact-me-main-section {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-buttons {
display: flex;
gap: 24px;
}
.contact-me-avatar {
border-radius: 50%;
border: 2px solid transparent;
width: 180px;
}
.contact-sub-description {
margin-top: 24px;
}
.contact-me-send-button {
margin-left: auto;
}
.contact-me-text-area {
margin-top: 24px;
width: 100%;
height: 104px;
}
.contact-me-text {
height: 104px;
}
.new-players-inspired {
border-radius: 4px;
margin-top: 32px;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
height: 175px;
background-color: var(--white);
background-image: url('https://handball-sport.s3.eu-central-1.amazonaws.com/general/images/my_players_frontend/players-banner-desktop-1140x175px.gif');
background-position: right;
/* Position the background image to the right side */
background-repeat: no-repeat;
}
.new-players-inside {
display: flex;
padding: 12px;
}
.new-players-inside-text {
margin-left: 12px;
margin-top: 44px;
max-width: 35%;
}
@media only screen and (max-width: 1100px) {
.new-players-inside-text {
margin-left: 12px;
margin-top: 44px;
max-width: 55%;
}
}
@media only screen and (min-width: 1101px) and (max-width: 1512px) {
.new-players-inside-text {
margin-left: 12px;
margin-top: 44px;
max-width: 55%;
}
}
.admin-translations-table {
width: 96% !important;
margin-left: 2%;
margin-right: 2%;
}
.ex-all-filter-button {
margin-right: 16px;
margin-left: -8px;
min-width: unset !important;
}
.square-primary-button {
min-width: 86px;
width: fit-content;
height: 56px;
border: 1px solid var(--interaction-link-primary-color);
background: var(--interaction-link-primary-color);
border-radius: 4px;
color: var(--text-heading-color);
flex: none;
cursor: pointer;
padding-left: 24px;
padding-right: 24px;
white-space: nowrap;
}
.dot-elastic {
margin: auto;
position: relative;
width: 6px;
height: 6px;
border-radius: 5px;
background-color: var(--white);
color: var(--white);
animation: dot-elastic 1s infinite linear;
}
.dot-elastic::before,
.dot-elastic::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
}
.dot-elastic::before {
left: -15px;
width: 6px;
height: 6px;
border-radius: 5px;
background-color: var(--white);
color: var(--white);
animation: dot-elastic-before 1s infinite linear;
}
.dot-elastic::after {
left: 15px;
width: 6px;
height: 6px;
border-radius: 5px;
background-color: var(--white);
color: var(--white);
animation: dot-elastic-after 1s infinite linear;
}
@keyframes dot-elastic-before {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1, 1.5);
}
50% {
transform: scale(1, 0.67);
}
75% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes dot-elastic {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1, 1);
}
50% {
transform: scale(1, 1.5);
}
75% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes dot-elastic-after {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1, 1);
}
50% {
transform: scale(1, 0.67);
}
75% {
transform: scale(1, 1.5);
}
100% {
transform: scale(1, 1);
}
}
.lupa-position {
margin-left: auto;
margin-right: 12px;
}
.age-group-option-wrapper {
margin-top: 12px;
margin-bottom: 12px;
}
.age-group-option {
display: flex;
gap: 4px;
}
.age-group-option learnsports-icon svg {
max-width: 16px !important;
max-height: 16px !important;
}
.load-card-skeleton {
display: flex;
flex-direction: row;
align-items: center;
width: 80%;
margin-left: var(--margin-percentage);
margin-right: var(--margin-percentage);
height: 144px;
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 2px 6px rgba(0, 0, 0, 0.15);
border-radius: 8px;
background: linear-gradient(-45deg,
var(--grey-200),
#f0f0f0,
var(--grey-200),
#f0f0f0);
background-size: 400% 400%;
-webkit-animation: Gradient 2.25s ease infinite;
-moz-animation: Gradient 2.25s ease infinite;
animation: Gradient 2.25s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.blur {
filter: blur(4px);
}
.loadText {
margin-left: auto;
margin-right: auto;
border-radius: 4px;
width: 700px;
color: var(--global-black, #000);
text-align: center;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
margin-bottom: 80px;
margin-top: 44px;
background: linear-gradient(-45deg,
var(--grey-200),
#f0f0f0,
var(--grey-200),
#f0f0f0);
background-size: 400% 400%;
-webkit-animation: Gradient 2.25s ease infinite;
-moz-animation: Gradient 2.25s ease infinite;
animation: Gradient 2.25s ease infinite;
}
.active {
border: solid 1px transparent;
background: var(--interaction-link-selected-color, #fad9d9);
}
.header-auto-height {
height: auto !important;
}
.hover-styling {
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.top-session-heading {
display: flex;
justify-content: center;
align-items: center;
margin-top: 72px;
margin-bottom: 24px;
}
.top-session-description {
margin-left: var(--margin-percentage);
margin-bottom: 20px;
}
.tags-container {
display: flex;
margin-top: 12px;
gap: 8px;
}
.tags-new {
border-radius: 4px;
padding: 4px 8px;
background: var(--info-warning-bg-color);
}
.tags-updated {
border-radius: 4px;
padding: 4px 8px;
background: var(--info-neutral-bg-color);
}
.tags-created-by-user {
border-radius: 4px;
padding: 4px 8px;
background: var(--bg-light-grey-color);
}
.tags-created-by-user-invert {
border-radius: 4px;
padding: 4px 8px;
background: var(--white);
}
.tags-club-initials {
border-radius: 4px;
padding: 4px 8px;
background: var(--yellow-100);
}
/*Material override*/
.remove-mat-expansion-panel-padding .mat-expansion-panel-content .mat-expansion-panel-body {
padding: 0 !important;
}
.mat-mdc-menu-item {
padding-left: 16px !important;
padding-right: 32px !important;
}
div.mat-mdc-select-panel {
padding: 0 !important;
border-radius: 4px !important;
}
.cdk-overlay-container .cdk-overlay-pane {
margin-top: 8px;
margin-bottom: 8px;
}
.video-name .mat-mdc-input-element {
border: 1px solid var(--white) !important;
background: var(--white) !important;
display: flex !important;
width: 200px !important;
height: 50px;
align-items: flex-start !important;
outline: none !important;
}
.video-terms .mdc-form-field>label {
display: flex !important;
}
.mat-mdc-paginator {
background: var(--grey-100) !important;
}
.mat-mdc-menu-panel.tripledot-menu-my-team {
margin-top: 12px;
width: 360px !important;
height: 56 !important;
max-width: none !important;
}
.mat-column-select-player {
width: 5%;
height: 52px;
padding: 14px 16px;
gap: 10px;
}
.mat-column-nickname {
width: 22%;
height: 56px;
align-items: flex-start;
padding: 10px 16px;
gap: 10px;
}
.mat-column-phoneNumber {
width: 60%;
height: 56px;
align-items: flex-start;
padding: 16px;
gap: 10px;
}
.mat-column-status-player {
width: 13%;
}
.mat-column-select-coach {
width: 5%;
height: 52px;
padding: 14px 16px;
gap: 10px;
}
.mat-column-coach-name {
width: 15%;
height: 56px;
align-items: flex-start;
padding: 16px;
gap: 10px;
}
.mat-column-coach-role {
width: 10%;
height: 56px;
align-items: flex-start;
padding: 16px;
gap: 10px;
}
.mat-column-coach-permission {
width: 20%;
height: 56px;
align-items: flex-start;
padding: 16px;
gap: 10px;
}
.mat-column-coach-status {
width: 20%;
height: 56px;
align-items: flex-start;
padding: 16px;
gap: 10px;
}
.mat-column-edit-coach {
width: 6%;
height: 56px;
align-items: flex-start;
padding: 16px;
gap: 10px;
}
.edit-user-phone-field mat-form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 100px;
height: 56px;
}
.custom-search .mat-mdc-input-element {
border: 1px solid var(--white) !important;
background: var(--white) !important;
display: flex !important;
width: 260px !important;
height: 30px;
align-items: flex-start !important;
outline: none !important;
}
.custom-search-modal .mat-mdc-input-element {
border: 1px solid var(--white) !important;
background: var(--white) !important;
display: flex !important;
width: 500px !important;
height: 56px;
align-items: flex-start !important;
outline: none !important;
}
.mat-mdc-menu-content {
padding: 0 !important;
}
.mat-mdc-text-field-wrapper {
background-color: var(--white) !important;
}
.disabled-field-background .mat-mdc-text-field-wrapper {
background-color: var(--disabled-light-color) !important;
border: 1px solid var(--colors-borders-border-dark-color, #909092) !important;
margin-bottom: -1.25em !important;
}
.cdk-global-scrollblock {
position: static !important;
width: initial !important;
overflow-y: inherit !important;
}
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: var(--interaction-link-primary-color) !important;
}
.admin-translations-table .mat-column-name {
width: 30%;
}
.admin-translations-table .mat-column-translated {
width: 35%;
}
.orange-checkbox .mdc-checkbox__background {
border-color: var(--orange-500) !important;
}
.mat-pseudo-checkbox {
display: none !important;
}
.mat-mdc-select-value-text {
color: var(--text-primary-color);
font-family: var(--font-family);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}