/* DSM STA Custom Styles */

body {
    overflow-x: hidden;
}

.wrapper {
    overflow-x: auto;
}

/* Menu Styles */
body {
    overflow-x: hidden;
}

.wrapper {
    overflow-x: auto;
}

.menu-accordion .menu-item .menu-link {
margin-left: 8px;
padding-left: 20px;
border-radius: 0px;
}



.before\:border-gray-200::before {
left: 7px;
}

.hover\:bg-secondary-active:hover {
background-color: #3D39EA15;
}

.menu-item .menu-link:hover .menu-link-hover\:\!text-primary {
color: #3D39EA !important;
}

.menu-item-active {
background-color: #3D39EA15;
color: #3D39EA !important;
}

.menu-item-active span {
color: #3D39EA !important;
}

.primary-menu-item-active {
color: #3D39EA !important;
}

/* Card Styles */
.card-body {
padding: 20px;
border-top: 0px !important;
border-bottom: 0px;
border: 1px solid #F1F1F4;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}

.card-table {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: 0px 3px 4px 0px #00000008;
}

.card-header {
border: 1px solid #F1F1F4;
border-bottom: 0px !important;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding-top: 30px;
}

.card-footer {
border-style: none !important;
}

.card-header {
padding: 0 30px;
border-bottom: 1px solid #F1F1F4 !important;
}

.card {
border: 0px;
background: transparent;
box-shadow: none;
}

.add-dsm-user {
background: transparent !important;
}

.checkbox-table {
padding-left: 0px !important;
padding-right: 0px !important;
}

.card-buttons {
display: flex;
}

.card-body {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
box-shadow: 0px 3px 4px 0px #00000008;
}

.card-buttons {
margin-top: 30px;
}

.card-container-column {
width: 100%;
display: flex;
margin-top: 60px;
}

.card-right-col {
width: 65%;
margin-left: 15px;
}

.card-left-col {
width: 35%;
margin-right: 15px;
height: max-content;
}

.card-container-column .card {
margin-bottom: 30px;
}

.card-container-column .card-table {
border: 1px solid #F1F1F4;
border-top: 0px;

}

.card-buttons a {
margin-right: 8px;
background: transparent;
border: 0px;
box-shadow: none;
}

/* Table Styles */
.table {
border: 0;
}

.table th {
background: #fff !important;
border: 0px;
padding-bottom: 15px !important;
border-style: dashed !important;
}

.table td:first-child,.table td:last-child  {
padding-right: 0px !important;
}

.table td {
background: #fff !important;
border: 0;
padding-top: 20px !important;
padding-bottom: 20px !important;
padding-right: 30px !important;
border-style: dashed !important;
}

.table img {
object-fit: cover  !important;
margin-right: 15px !important;
}

.table .dsm-club-logo img {
margin-right: 0px !important;
}

.table-bordered tbody {
    border: 1px solid #f1f1f4;
    border-top: 0px
}

.dt-container .table .inline-image-avatar  img {
margin-right: 5px !important;
}

.select {
line-height: 2;
}

.hero-bg img {
object-fit: contain;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}


.table a {
font-size: 14px;
}

.table-auto tr td:nth-child(2) img {
margin-right: 0px;
}

.table-email {
margin-top: 3px;
}

.table th:last-child {
text-align: right;
}

/*  */

/* Questionnare */

.queistionnare-page_wrapper {
height: 100vh;
width: 100vw;
background: url(../media/app/questionnare-bg.png);
background-size:cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}

.queistionnare-page img{
margin-bottom: 24px;
}

.queistionnare-page {
max-width: 353px;
/*max-height: 354px;*/
background: #fff;
display: flex;
text-align: center;
flex-direction: column;
padding: 40px;
}

.dsm-copyright {
    border-top: 1px solid #D2D1FA;
    text-align: center;
    margin: 0 auto;
    position: relative;
    display: block;
    background: #F3F3FC;
    font-family: Inter, system-ui, sans-serif;
    padding-top: 3px;
    font-size: 14px;
    width: 100%;
    padding-bottom: 5px;
}

.dsm-flex-container {
    background: #F3F3FC;
    overflow-x: hidden;
}

.dsm-flex-container .grow {
    display: flex;
    flex-direction: column;
}

.queistionnare-page h1 {
font-size: 24px;
margin-bottom: 16px;
color: #353D53;
}

.queistionnare-page p {
margin-bottom: 30px;
font-size: 16px;
color: #353D53;
}

.progress-bar__title-container .default-logo {
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    overflow-clip-margin: unset;
    overflow: visible;
}



.queistionnare-page .default-logo {
    width: 100%;
    min-height: 100px;
    max-width: 100px;
    max-height: 250px;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}

.progress-bar {
display: flex;
justify-content: space-between;
margin-bottom: 0px;
flex-direction: row;
height: 11px;
background: #D2D1FA; /* Background color for the entire bar */
position: relative; /* Positioning context for the fill */
overflow: hidden; /* Ensure the fill doesn't exceed the bar */
max-width: 353px;
margin-left: auto;
margin-right: auto;
height: 11px
}

.progress-bar-labels {
max-width: 353px;
margin-left: auto;
margin-right: auto;
height: 11px;
display: flex;
justify-content: space-between;
margin-bottom: 24px;
margin-top: 8px;
font-size: 12px;
color: #ACB1C0;
}

.progress-bar-labels .active {
color: #4B5675;
font-weight: 500;
}

.progress-bar__title-container {
max-width: 353px;
margin: 0 auto;
position: relative;
}

.progress-bar__title-container a {
position: absolute;
top: 5px;
}

.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;/* Adjust this dynamically based on progress */
background-color: #3D39EA; /* Fill color */
transition: width 0.3s ease; /* Smooth transition for the fill */
}

.progress-fill-1 {
width: 13%
}

.progress-fill-2 {
width: 26%
}

.progress-fill-3 {
width: 38%;
}

.progress-fill-4 {
width: 50%
}


.progress-fill-5 {
width: 62%
}

.progress-fill-6 {
    width: 74%
}

.progress-fill-7 {
    width: 74%
}

.progress-fill-8 {
    width: 87%
}


.progress-fill-9 {
width: 99%;
}

.progress-bar__title-container {
    display: flex
;
    align-items: center;
    justify-content: space-between;
}

.step-number {
    font-size: 14px;
    background: #ECEBFD;
    color: #353D53;
    padding: 4px 8px;
    border-radius: 26px;
}

.progress-bar__container h2 {
text-align: center;
font-size: 18px;
color: #353D53;
}

.progress-bar__container {
padding: 20px 20px 16px 20px;
background: #fff;
}

.mt-55 {
    margin-top: 55px !important;
}

.required-field:after {
    content: '*';
    color: #EA3939;
    margin-left: 5px;
}
.answer-options-select-column .section:nth-child(2) {
    margin-bottom: 0px;
}

.answer-options-select-column-container {
    margin-top: 20px;
    min-height: calc(auto + 20px);
}
/* Base styling */
.answer-options-select-column {
    display: flex;
    flex-direction: column;
}

.heading-reset {
    display: flex;
    justify-content: space-between;
}

.heading-reset .reset-button {
    padding: 5px;
    background: #ECEBFD !important;
    border-radius: 4px;
    margin-bottom: 20px;

}

.reset-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
}

.selection-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.reset-wrapper-select-multiple {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    justify-content: space-between;

}

.reset-wrapper .reset-button,.reset-wrapper-select-multiple .reset-button {
    padding: 8px;
    margin-top: 3px;
    background: #ECEBFD !important;
    border-radius: 4px;
    margin-right: 10px;
    height: 32px;
    width: 32px;

}

.questionnare-options_wrapper {
    margin-bottom: 5px;
}

/* Section Styling */
.answer-options-select-column .section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

/* Section Title */
.answer-options-select-column .section .section-title {
    font-weight: medium;
    font-size: 16px;
    margin-bottom: 5px;
}

/* Option Layout */
.answer-options-select-column .section .option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Radio Button Styling */
.answer-options-select-column .section .option input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #E8E8EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}

/* Custom Radio Button */
.answer-options-select-column .section .option input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #3D39EA;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s ease-in-out;
}

/* Checked State */
.answer-options-select-column .section .option input[type="radio"]:checked {
    border-color: #3D39EA;
}

.answer-options-select-column .section .option input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Badge Styling */
.answer-options-select-column .section .option .badge {
    padding: 12px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: medium;
    text-align: center;
}

/* Badge Colors */
.answer-options-select-column .section .option .badge.yellow {
    background-color: #FFC00040;
    color: #202431;
}

.answer-options-select-column .section .option .badge.red {
    background-color: #F43F5E20;
    color: #BE123C;
}

.answer-options-select-column .section .option .badge.pink {
    background-color: #db93cd20;
    color: #db93cd;
}

.answer-options-select-column .section .option .badge.blue {
    background-color: #0EA5E920;
    color: #1A1862;
}

.answer-options-select-column .section .option .badge.pink {
    background-color: #db93cd20;
    color: #db93cd;
}

.answer-options-select-column .section .option .badge.green {
    background-color: #C3FEB5;
    color: #294523;
}

.questionnare-container-inside-button {
    background: transparent;
}

.questionnare-container-inside-button .question-card {
    height: auto;
}

.questionnare-container-inside-button .question-card__botside,.questionnare-container-inside-button .next-button {

}

.question-card__botside  .prev-button {
    font-size: 14px;
    font-weight: 600;
    color: #4B5675;
}

.question-card__botside {
    margin-top: 15px;
}

.question-card__botside button {
    margin-bottom: 15px;
    font-size: 14px;
}

.questionnare-options_wrapper {
    width: 100%;
justify-content: space-between;
}

.questionnare-options_wrapper label {
    font-size: 16px;
    font-weight: 500;
}

.questionnare-checkbox {
    width: 64px !important;
    height: 36px !important;
}

.questionnare-checkbox:before {
    width: 28px !important;
    height: 28px !important;
}

.switch input[type=checkbox]:checked, .switch input[type=checkbox][aria-checked="true"] {
    background-color: #3D39EA !important;
}
.switch {
    gap: 0px;
}

.questionnare-container {
background: #F5F5FE;
}

.column {
    flex-direction: column;
    gap: 24px;
}

.question-card {
margin: 24px;
}

.question-card__topside textarea {
width: 100%;
height: 101px;
border: 1px solid #E8E8EB;
border-radius: 6px;
padding: 16px;
resize: none;
}

.question-card__botside .next-button:disabled {
cursor: not-allowed;
opacity: 0.5;
background: #9E9CF4 !important;
}

textarea::placeholder {
color: #868EA3;
font-size: 16px;
}

textarea {
font-size: 16px;
font-family: Inter, system-ui, sans-serif
}

.twotypeconfirm {
position: relative !important;
}

.confirm-container {
    font-size: 14px;
}

.confirm-container label {
    margin-bottom: 10px;
}

.questionnare-container-inside-button  {
    background: transparent;
}

.bg-questionnare-img .dsm-copyright{
    background: transparent;
    padding: 12px 0px;
    color: white;
    border-top: 1px solid #ffffff20;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.bg-questionnare-img .prev-button {
    display: block;
}

.questionnare-container-inside-button .question-card p {
    font-size: 21px;
}

.questionnare-container-inside-button input[type="radio"]:checked + .option {
    border-color: #FECF09;
}



.answer-options-select-column.row-layout .section {
    flex-direction: row;
    justify-content: space-evenly;
}

.answer-options-select-column.row-layout .section .option {
    flex-direction: column-reverse;

}

.question-card h2 {
text-align: left;
font-size: 14px;
font-weight: 600;
color: #868EA3;
margin-bottom: 8px;
}

.question-card p {
text-align: left;
margin-bottom: 20px;
font-size: 16px;
font-weight: 500;
color: #353D53;
}

.question-card h4 {
text-align: left;
font-size: 12px;
font-weight: 500;
color: #868EA3;
margin-bottom: 24px;
}

.h-100 {
background: #F3F3FC;
}

.bg-questionnare-img {
    background-image: url(/assets/media/app/q-bg.jpg);
background-position: center;
background-size: cover;
}

.answer-labels {
display: flex;
margin-top: 5px;
justify-content: space-between;
margin-right: 10px;
margin-left: 10px;
}

.answer-labels span {
line-height: 18px;
width: 30px;
}

.answer-labels__no-m {
margin-right: 0px !important;
margin-left: 0px !important;
}

.answer-labels__no-mb {
    margin-bottom: 0px !important;
    }

.answer-labels span {
text-align: center !important;
font-size: 12px;
color: #4B5675;
font-weight: 500;
}

.questionnare-container {
width: 100%;
max-width: 400px;
margin: auto;
}

.step {
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #D2D1FA;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
z-index: 100 !important;
height: 100%;
}

.step.active {
background-color: #3D39EA;
}

.question-card {
background-color: #fff;
border-radius: 10px;
padding: 20px;
text-align: center;
height: 541px;
display: flex;
justify-content: start;
flex-direction: column;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.answer-options {
display: flex;
justify-content: space-between;
}

.option {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
height: max-content;
border: 2px solid transparent;
border-radius: 8px;
transition: border-color 0.3s;
}

/* Slider fields with graphic */

/* Football Ball Styling */
.football-ball {
position: absolute;
top: 50%; /* Center the ball vertically */
left: 0; /* Start position */
width: 20px; /* Set width of the ball image */
transition: left 0.3s ease; /* Smooth transition when moving */
transform: translateY(-50%); /* Adjust to center the ball vertically */
}
/* Overall container with the football field image */
.football-field {
width: 262px !important;
height: 107px !important; /* Set the height to match the image */
position: relative;
background-image: url('http://127.0.0.1:8000/assets/media/app/football-field.png');
background-size: cover; /* Ensure the image covers the area */
background-position: center; /* Center the image */
}

/* Gauge Container Styling */
.gauge-container {
position: relative;
width: 143px;
height: 71px;
margin: 0 auto;
margin-bottom: 40px;
}

/* Needle SVG Styling */
.needle {
position: absolute;
top: 3%;
left: 50%;
transform-origin: bottom center;
transform: translateX(-50%) rotate(0deg); /* Initial position */
transition: transform 0.3s ease;
width: 22px;
height: 70px;
}

/* Slider Container */
.slider-container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0 auto;
position: relative;
}

/* Custom range slider styling */
#slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 5px;
background: linear-gradient(to right, #3D39EA 0%, #3D39EA var(--slider-percent), #ECEBFD var(--slider-percent), #ECEBFD 100%);
outline: none;
position: relative;
z-index: 1; /* Set slider below the dots */
transition: background 0.3s ease; /* Smooth transition for background */
}

#slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #3D39EA;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
position: relative; /* Ensure it’s above the track */
z-index: 20; /* Set thumb above everything else */
}

/* Creating dots for each step */
.slider-dots {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 1; /* Set dots above the slider but below the thumb */
transform: translateY(-50%);
pointer-events: none; /* Allow slider thumb to be dragged without interference */
}

.slider-dots span {
margin-top: 3px;
width: 10px;
margin-right: -2px;
height: 10px;
border: 2px solid #fff;
background-color: #D2D1FA; /* Default color for inactive dots */
border-radius: 50%;
}

/* Hidden radio buttons */
input[type="radio"] {
display: none;
}

/* Style for selected option */
input[type="radio"]:checked + .option {
border-color: #3D39EA;
}

.option .emoji {
font-size: 24px;
}

.option p {
font-size: 12px;
margin-top: 5px;
color: #777;
}

.next-button {
background-color: #3D39EA;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 20px;
width: 100%;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.next-button:hover,.next-button-enabled:hover {
background-color: #357ab8;
}

.next-button-enabled {
    background-color: #3D39EA;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* DT Custom pagination */

.dt-paging .dt-paging-button {
display: inline-flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
height: 1.875rem;
width: 1.875rem;
font-size: 0.8125rem;
line-height: 0.8125rem;
border-radius: 0.375rem;
padding: 0;
line-height: 0;
color: var(--tw-gray-600);
color: #353D53;
}

.dt-paging .current, .dt-paging .current:hover {
    background: #3D39EA;
    color: #fff;
}

.dt-paging nav {
gap: 10px;
display: flex;
}

.dt-paging nav .disabled {
opacity: 0.4;
}

.dt-paging .dt-paging-button.last,.dt-paging .dt-paging-button.first {
display: none;
}

.dt-paging button:hover {
background-color: #F1F1F4;
}

.dt-paging .next
{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2212%22%20viewBox%3D%220%200%2013%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cmask%20id%3D%22mask0_47_971%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2212%22%3E%3Cg%20clip-path%3D%22url(%23clip0_47_971)%22%3E%3Cg%20clip-path%3D%22url(%23clip1_47_971)%22%3E%3Cpath%20d%3D%22M6.93584%206.40708L3.62906%209.71384C3.3017%2010.0412%203.30172%2010.5719%203.62906%2010.8993C3.95641%2011.2266%204.48711%2011.2266%204.81442%2010.8993L9.19491%206.51883C9.50359%206.21022%209.50359%205.70983%209.19491%205.40122L4.81442%201.02074C4.48713%200.693445%203.95641%200.693445%203.62906%201.02074C3.30172%201.34815%203.30172%201.87886%203.62906%202.20615L6.93584%205.51295C7.18273%205.75984%207.18273%206.16019%206.93584%206.40708Z%22%20fill%3D%22black%22/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Cg%20mask%3D%22url(%23mask0_47_971)%22%3E%3Crect%20x%3D%220.715088%22%20y%3D%220.27002%22%20width%3D%2211.38%22%20height%3D%2211.38%22%20fill%3D%22%23353D53%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_47_971%22%3E%3Crect%20width%3D%2211.38%22%20height%3D%2211.38%22%20fill%3D%22white%22%20transform%3D%22translate(0.715088%200.27002)%22/%3E%3C/clipPath%3E%3CclipPath%20id%3D%22clip1_47_971%22%3E%3Crect%20width%3D%2211.38%22%20height%3D%2211.38%22%20fill%3D%22white%22%20transform%3D%22translate(0.715088%200.27002)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center center;

}

.dt-paging .previous
{
    rotate: 180deg;

    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2212%22%20viewBox%3D%220%200%2013%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cmask%20id%3D%22mask0_47_971%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2212%22%3E%3Cg%20clip-path%3D%22url(%23clip0_47_971)%22%3E%3Cg%20clip-path%3D%22url(%23clip1_47_971)%22%3E%3Cpath%20d%3D%22M6.93584%206.40708L3.62906%209.71384C3.3017%2010.0412%203.30172%2010.5719%203.62906%2010.8993C3.95641%2011.2266%204.48711%2011.2266%204.81442%2010.8993L9.19491%206.51883C9.50359%206.21022%209.50359%205.70983%209.19491%205.40122L4.81442%201.02074C4.48713%200.693445%203.95641%200.693445%203.62906%201.02074C3.30172%201.34815%203.30172%201.87886%203.62906%202.20615L6.93584%205.51295C7.18273%205.75984%207.18273%206.16019%206.93584%206.40708Z%22%20fill%3D%22black%22/%3E%3C/g%3E%3C/g%3E%3C/mask%3E%3Cg%20mask%3D%22url(%23mask0_47_971)%22%3E%3Crect%20x%3D%220.715088%22%20y%3D%220.27002%22%20width%3D%2211.38%22%20height%3D%2211.38%22%20fill%3D%22%23353D53%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_47_971%22%3E%3Crect%20width%3D%2211.38%22%20height%3D%2211.38%22%20fill%3D%22white%22%20transform%3D%22translate(0.715088%200.27002)%22/%3E%3C/clipPath%3E%3CclipPath%20id%3D%22clip1_47_971%22%3E%3Crect%20width%3D%2211.38%22%20height%3D%2211.38%22%20fill%3D%22white%22%20transform%3D%22translate(0.715088%200.27002)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center center;

}
.dt-container .dt-layout-row:last-child {
display: flex;
justify-content: space-between;
border-top: 1px dashed #F1F1F4;
padding-top: 15px;
}

.dt-container .dt-layout-row:last-child select {
padding: 5px 5px;
border: 1px solid #F1F1F4;
background: #FCFCFC;
border-radius: 7px;
}

.dt-container .dt-layout-row:last-child label {
color: #78829D;
font-size: 13px;
font-weight: 400;
margin-left: 8px;
}



/* Badge Styles */
.badge {
font-size: 12px;
}

.needle-new-clock {
    position: absolute;
left: calc(50% + 7px);
top: 30px;
transform-origin: bottom center;
transform: translateX(-50%) rotate(0deg);
transition: transform 0.3s ease;
width: auto;
height: auto;
}

.questionnare-options_wrapper p {
font-size: 16px !important;
margin-bottom: 0px !important;
}


.badge.white-black-border {
background: #fff;
border: 1px solid #E8E8EB;
color: #4B5675;
}

.badge-success {
background: #DFFFEA;
color: #17C653;
border-radius: 50px;
}

.badge-danger {
background: #F9F9F9;
color: #868EA3;
border-radius: 50px;
}

/* Custom search */

.dt-search {
display: none;
}

.dsm-custom-search__wrapper {
padding: 13px 15px;
background: #F9F9F9;
display: flex;
border-radius: 8px;
}

.dsm-custom-search__wrapper svg {
margin-right: 8px;
}

.dsm-custom-search {
background: #f9f9f9;
font-size: 14px;
}

.dsm-custom-search::placeholder {
font-size: 14px;
color: #868EA3;
}

.dsm-custom-search:focus{
outline: none;
}

/* DSM Profile avatar */

.dsm-image-avatar img {
width: 50px;
height: 50px;
object-fit: cover !important;
}

.dsm-profile-avatar img {
object-fit: cover;
}

/* Filter button */
.card-header-button-container {
display: flex;
}

.filter-container {
margin-right: 16px;
}

.filter-container__dropdown {
min-width: 280px;
}

.filter-container__dropdown span{
font-size: 14px;
}

.checkboxes-horizontal,.checkboxes-vertical {
margin-top: 4px;
}

.filter-container__dropdown label {
font-size: 13px !important;
display: flex;
font-weight: 400;
align-items: center;
gap: 6px !important;
margin-right: 10px;
}

.filter-container__dropdown .checkboxes-horizontal {
flex-direction: row;
display: flex;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #f1f1f1;
}

.card-header-button-container .filter-container .filter-container__dropdown {
left: -180px !important;
}

.checkboxes-vertical {
max-height: 140px;
overflow-y: auto;
}

.block-table {
display: block;
}

.block-table h1 {
margin-bottom: 33px;
}

/* Dropdown Styles */
.dropdown-content {
width: 180px;
margin-left: -53px !important;
padding-left: 25px;
padding-right: 25px;
}

.dropdown {
justify-content: flex-end;
}

.dropdown a{
display: block;
margin-bottom: 15px;
}

.dropdown a:last-child{
margin-bottom: 0px;
}

.dropdown-content p:first-child,
.dropdown-content p:last-child {
margin: 0;
}

.table  .dropdown-toggle.active {
background: #ECEBFD80!important;
}

.table  .dropdown-toggle.active .ki-down {
display: none;
}

.table  .dropdown-toggle.active .ki-up {
display: block;
}

.card-header  .dropdown-toggle.active .ki-down {
display: none;
}

.card-header .dropdown-toggle.active .ki-up {
display: block;
}

.dropdown-content.w-full {
left: -68px !important;
margin-left: 0px !important;
}

.table .dropdown .dropdown-content {
margin-left: -20px !important;
}

.dropdown-content p {
margin: 10px 0;
font-weight: 400 !important;
}

.dropdown-content p a:hover {
color: #3D39EA !important;
}

.action-dropdown .dropdown-content {
margin-left: -90px !important;
}

.action-dropdown {
justify-content: flex-end;
}

/* Button Styles */
.btn-primary {
background: #3D39EA !important;
}

.btn-primary:hover, .btn-primary.active {
background: #3D39EA !important;
box-shadow: 0px 4px 12px 0px rgba(61, 57, 234, 0.35);
}

.btn-light, .btn-light:hover, .btn-light.active {
background: #F9F9F9 !important;
border: 0;
box-shadow: none !important;
}

.btn-secondary {
box-shadow: none;
border: 1px solid #3D39EA !important;
color: #3D39EA !important;
}

.btn-secondary:hover {
box-shadow: 0px 4px 12px 0px rgba(61, 57, 234, 0.35) !important;
}

.btn-secondary i {
color: #3D39EA !important;
}

/* Form Styles */
.number {
display: block;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: none;
font-weight: 500;
font-size: 0.8125rem;
line-height: 1;
background-color: var(--tw-light-active);
border-radius: 0.375rem;
height: 2.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border: 1px solid var(--tw-gray-300);
color: var(--tw-gray-700);
}

.select {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDExIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjM3NSAwLjkzNzVMNS41IDUuMDYyNUw5LjYyNSAwLjkzNzUiIHN0cm9rZT0iIzc4ODI5RCIgc3Ryb2tlLXdpZHRoPSIxLjM3NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 11px 6px;
border-color: #e8e8eb;
}

.dsm-user-avatar {
display: flex;
width: 100%;
font-size: 14px;
justify-content: space-between;
align-items: center;
}

.image-input .btn {
margin-top: 0;
margin-right: 0;
}

.image-input .btn-icon-xs i {
font-size: 0.6rem;
box-shadow: 0px 4px 12px 0px #00000017;

}

.select:disabled {
background-color: #e8e8eb;
border: 1px solid #e8e8eb;
}

.card {
box-shadow: none;
border: 0;
}

form .card-body {
padding-left: 30px
}

form .btn-secondary, form .btn-light  {
margin-right: 10px
}

form .btn{
margin-top: .75rem;
}
/* Pagination */
.pagination .btn.active {
background: #3D39EA;
color: #fff;
}

.pagination .btn {
color: #353D53;
margin-right: 5px;
}

.pagination .btn:last-child {
margin-right: 0px;
}

.pagination .btn[disabled] i, .pagination .btn.disabled i {
opacity: 0.5;
}

.ki-outline.ki-black-left:before {
content: url('data:image/svg+xml;utf8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_288_7982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="13"><g clip-path="url(%23clip0_288_7982)"><path d="M6.43584 6.76853L3.12906 10.0753C2.8017 10.4026 2.80172 10.9334 3.12906 11.2607C3.45641 11.5881 3.98711 11.5881 4.31442 11.2607L8.69491 6.88028C9.00359 6.57167 9.00359 6.07128 8.69491 5.76267L4.31442 1.38219C3.98713 1.0549 3.45641 1.0549 3.12906 1.38219C2.80172 1.7096 2.80172 2.24031 3.12906 2.5676L6.43584 5.8744C6.68273 6.12129 6.68273 6.52164 6.43584 6.76853Z" fill="black"/></g></mask><g mask="url(%23mask0_288_7982)"><rect x="0.214966" y="0.630859" width="11.38" height="11.38" fill="%23353D53"/></g><defs><clipPath id="clip0_288_7982"><rect width="11.38" height="11.38" fill="white" transform="translate(0.214966 0.630859)"/></clipPath></defs></svg>');
rotate: 180deg

}

.ki-outline.ki-black-right:before {
content: url('data:image/svg+xml;utf8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_288_7982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="13"><g clip-path="url(%23clip0_288_7982)"><path d="M6.43584 6.76853L3.12906 10.0753C2.8017 10.4026 2.80172 10.9334 3.12906 11.2607C3.45641 11.5881 3.98711 11.5881 4.31442 11.2607L8.69491 6.88028C9.00359 6.57167 9.00359 6.07128 8.69491 5.76267L4.31442 1.38219C3.98713 1.0549 3.45641 1.0549 3.12906 1.38219C2.80172 1.7096 2.80172 2.24031 3.12906 2.5676L6.43584 5.8744C6.68273 6.12129 6.68273 6.52164 6.43584 6.76853Z" fill="black"/></g></mask><g mask="url(%23mask0_288_7982)"><rect x="0.214966" y="0.630859" width="11.38" height="11.38" fill="%23353D53"/></g><defs><clipPath id="clip0_288_7982"><rect width="11.38" height="11.38" fill="white" transform="translate(0.214966 0.630859)"/></clipPath></defs></svg>');
}

/* Datepicker */
.dsm-datepicker {
border: 1px solid var(--tw-gray-300);
width: 100%;
padding: 5px 10px;
border-radius: 0.375rem;
font-family: Inter, system-ui, sans-serif;
font-size: 0.8125rem;
color: #4b5675;
background-color: var(--tw-light-active);
font-family: Inter, system-ui, sans-serif;
font-weight: 500;
}

.dsm-datepicker:focus-visible {
outline: 1px solid var(--tw-primary);
box-shadow: none;
}


/* Miscellaneous Styles */

.h-100 {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}

main {
margin-top: 33px;
min-height: 83vh;
display: flex;
flex-direction: column;
}

main .container-fixed {
width: 100%;
}

main .flex-nowrap {
border: 0px !important;
}

.filter {
margin-right: 20px;
}

.border-success {
border-color: #3D39EA;
}

.input-display-label input[type="radio"]{
    display: block;
}

.table img {
    margin-right: 15px;
}

.table .word-wrap {
    word-wrap: break-word;
    min-width: 210px;
    max-width: 250px;
    display: block;
    text-align: left;
    padding-right: 5px;
}

.roles-wrapper_inner {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.dropdown-toggle-no-bg {
    background: transparent !important;
    height: 20px;
    padding-left: 0px;
}

.flex-start {
    justify-content: flex-start;
}

.dropdown-toggle-username:hover  {
    background: transparent !important;
}

.dropdown-toggle-username {
    font-size: 14px;
    font-weight: 600;
}

.table .dropdown-toggle-username.active {
    background: transparent !important;
}

.dropdown-username .dropdown-content {
 left: 0px !important;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 15px;
 padding-right: 15px;
 width: max-content;
 font-size: 12px;
 color: #071437;
}

.mw-250 {
    width: 250px;
}

svg.text-success {
    display: none;
}

.dsm-club-logo img {
    margin-right: 0px !important;
}


.checkbox-table {
padding-left: 0px !important;
padding-right: 0px !important;
}

.card-buttons {
display: flex;
}

.gap-2\.5 {
gap: 0 !important;
}

.action-dropdown {
margin-right: -6px;
}

.hero-bg {
    background-image: url(../media/images/2600x1600/bg-1.png);
    object-fit: cover;
}

.bb-0 {
border-bottom: 0px !important;
}

.pt-30 {
padding-top: 30px;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-14 {
    font-size: 14px;
}

.gap-8 {
    gap: 8px;
}

.mt-0 {
margin-top: 0px;
}

.d-none {
    display: none;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.ml-16 {
    margin-left: 16px !important;
}

.m0auto {
margin: 0 auto;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-20 {
margin-bottom: 20px;
}

.mt-15 {
margin-top: 15px;
}

.mt-20 {
margin-top: 20px;
}

.lg\:mb-10 {
margin-bottom: 0px;
}

.lg\:pt-5 {
padding-top: 0;
}

.pb-20 {
padding-bottom: 20px;
}

.card-error i:before, .card-submission i:before{
margin-top: -9px;
margin-left: -5px;
}

.card-body {
    overflow-x: auto;
    width: 100%;
}


.card-error .card-body, .card-submission .card-body{
margin-bottom: 20px;
padding: 20px;
border: 1px solid #E8E8EB;
border-top: 1px solid #E8E8EB !important;
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
}

.card-error span, .card-submission span{
display: flex;
}

.card-error .text-2sm, .card-submission .text-2sm {
margin-left: 20px;
}

.cb-link {
display: flex;
flex-direction: column;
gap: 15px;
}

.menu-heading {
padding-bottom: 0.5rem;
padding-top: 1.2rem;
}

.dsm-login .card {
background: #fff;
}

.dsm-login .input .btn {
margin-top: 0px !important;
}

.key-label {
display: flex;
justify-content: space-between;
font-weight: 700;
margin-bottom: 20px;
}

.input,.textarea {
background-color: #fff;
border-radius: 6px;
}

.textarea {
max-height: 121px;
}

.trash-icon {
cursor: pointer;
}

.checkbox[type="checkbox"]:checked, .checkbox[type="checkbox"][aria-checked="true"]  {
background-color: #3D39EA;
border: 1px solid #3D39EA;
}

.checkbox-sm[type="checkbox"]:indeterminate {
background-color: #3D39EA;
border-color: #3D39EA;
}

.empty-state {
padding-bottom: 5rem
}

.container-team-coach-primary {
display: flex;
flex-direction: column;
align-items: center;
}

.container-team-coach-primary img {
margin-bottom: 15px;
object-fit: contain;
}

.container-team-coach-primary .username {
margin-bottom: 14px;
}

.secondary-team-coach .username {
justify-content: space-between;
}

.secondary-team-coach .username .text-lg {
width: 45%;
}

.container-team-coach-secondary .secondary-team-coach .username  {
justify-content: space-between;
}

.secondary-team-coach {
width: 100%;
}

.first-highlight-table tr {
display: flex;
flex-direction: column;
}

.error-message {
display: flex;
flex-direction: column;
font-size: 14px;
font-family: Inter, system-ui, sans-serif;
}

.dsm-mobile-logo {
height: auto;
padding-top: 10px;
}

.flex-dir-col {
flex-direction: column;
}

.flex-dir-col img {
margin-bottom: 60px;
}

.local-server-class {
background: #97bdfa;
position: fixed;
bottom: 0;
width: 100%;
text-align: left;
color: #fff;
padding-left: 7px;
}

.dev-server-class {
background: #ab800a;
position: fixed;
bottom: 0;
width: 100%;
text-align: left;
color: #fff;
padding-left: 7px;
}

.sta-server-class {
background: #0a49ad;
position: fixed;
bottom: 0;
width: 100%;
text-align: left;
color: #fff;
padding-left: 7px;
}

.client-app-class{
    background: #0aad5e;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: left;
    color: #fff;
    padding-left: 7px;
}

.inline-image-avatar  {
display: flex;
align-items: center;
gap: 10px;
}

.grid-container {
display: grid;
padding: 20px 30px;
grid-template-columns: repeat(2, 1fr); /* 2 columns layout */
gap: 2.5rem; /* Space between items */
margin-bottom: 2rem;
}

.item-container {
display: flex;
align-items: left;
flex-direction: column;
gap: 1rem; /* Space between image and text */
}

.image-container .team-image {
width: 50px; /* Adjust the size of the image */
height: 50px;
border-radius: 8px; /* Circle shape */
object-fit: cover;
margin-right: 20px;
}

.text-container {
display: flex;
flex-direction: column;
justify-content: center;
}

.heading {
font-size: 18px; /* Text size */
font-weight: 600;
color: #3F4254; /* Tailwind gray-700 */
position: relative; /* For positioning the right-span */
}

.heading-span {
font-size: 14px;
font-size: 600;
color: #A1A5B7; /* Tailwind gray-600 */
display: block;
margin-top: 0.25rem;
}

.right-span {
font-size: 18px;
font-weight: 400;
color: #868EA3; /* Tailwind success color (green) */
position: relative;
right: 0;
top: 0;
}

.placeholder-image .video-placeholder {
width: 100%; /* Full width placeholder */
height: auto;
margin-bottom: 61px;
margin-top: 8px;
}

.video-description {
font-size: 0.875rem;
color: #4A5568; /* Tailwind gray-700 */
line-height: 1.5;
grid-column: span 2; /* Span across both columns */
text-align: justify; /* Align text for better readability */
}

.container-team-coach-secondary {
display: flex;
border-top: 1px solid #E8E8EB;
padding-top: 15px;
}

.secondary-team-coach {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}

.secondary-team-coach .username div {
font-size: 14px;
font-weight: 500;
}

.secondary-team-coach .email a {
font-size: 14px;
font-weight: 500;
justify-content: start;
text-align: left;
}

.m0auto {
width: 100%;
}

.secondary-label {
font-size: 12px;
color: #353D53;
background: #ECEBFD;
padding: 0 10px;
border-radius: 21px;
margin-left: 8px;
font-weight: 500;
}

.text-left-align {
text-align: left !important;
}

.table-top-heading th {
background: #FCFCFC !important;
}

.justify-text-center {
display: flex;
align-items: center;
justify-content: center;
}

.mt-15 {
margin-top: 15px;
}

.dsm-mobile-logo {
max-height: 100%;
}

#managerWrapper {
width: 100%;
}

#managerWrapper div,#exerciseWrapper div {
display: flex;
margin-bottom: 15px !important;
}

#managerWrapper div i {
margin-top: 4px;
}

form {
width: 100%;
}


#managerWrapper div select {
white-space: nowrap; /* Prevents text from wrapping to the next line */
overflow: hidden; /* Ensures overflowed content is not displayed */
text-overflow: ellipsis; /* Adds three dots (...) when text exceeds the width */
margin-right: 10px;

}

.add-dsm-user div{
margin-left: auto;
display: flex;
position: relative;
margin-top: -20px;
cursor: pointer;
margin-right: 4px;
font-weight: 600;
}

.add-dsm-user div:after {
content: '+';
height: 15px;
width: 15px;
padding-left: 1px;
line-height: 11px;
padding-top: 0px;
margin-top: 5px;
margin-left: 10px;
border-radius: 3px;
border: 1px solid ;

}


.radio-container input {
margin-right: 5px;
}

.radio-container label span {
margin-right: 18px;
}

.radio[type="radio"]:checked, .radio[type="radio"][aria-checked="true"] {
background-color: #3D39EA;
border: 1px solid #3D39EA;
}

.point-single {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.point-single svg {
    margin-left: 10px;
}

.club-manager-wrapper svg,.training_day-single svg {
margin-top: 10px;
}

#training_dayWrapper div{
    display: flex;
margin-bottom: 15px !important;
}

#training_dayWrapper select {
margin-right: 10px;
}

.image-input .image-input-preview {

background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

#positionsWrapper {
width: 100%;
}

.alt-position {
display: flex;
margin-bottom: 15px;
}

.alt-position svg {
display: flex;
margin-left: 10px;
margin-top: 10px;
}

.parent-single,.exercise-single,.training_day-single {
display: flex !important;
}

.exercise-single,.training_day-single  {
    align-items: center;
}



.parent-single .trash-icon {
margin-top: 9px;
}

.consultant-single {
    display: flex;
}
.consultant-single .trash-icon {
    margin-top: 10px;
}

#periodization_single_0 {
    padding-top: 0px;
}

.periodization-single-inner {
    padding-top: 30px;
}

#meta_single_0 {
    padding-bottom: 30px;
    border-bottom: 1px solid #F1F1F4;
}

.meta-single {
border-top: 1px solid #F1F1F4;
}

.meta-single {
border-top: 0px !important;
border-bottom: 1px solid #f1f1f4;
}

.meta-single-inner {
border-bottom: 1px solid #f1f1f4;
padding-bottom: 30px;
padding-top: 30px;
}

#meta_single_0 {
padding-top: 0px;
}

.m--30px {
    margin-bottom: -30px;
}

.parent-single select,
.consultant-single select{
margin-right: 10px;
margin-bottom: 15px;
}

.parent-wrapper,
.consultant-wrapper{
width: 100%;
}

.role-single select {
    margin-right: 10px;
    margin-bottom: 15px;
    }

.role-single .trash-icon {
        margin-top: 9px;
}

.roles-wrapper {
    width: 100%;
}

#managerWrapper i {
cursor: pointer !important;
}

/* Responsive stacking */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Stack content in one column */
}
.right-span {
position: static;
margin-top: 0.25rem; /* Adjust alignment in smaller screens */
}
}

@media (min-width: 1024px) {
.progress-bar, .progress-bar-labels,.progress-bar__title-container,.questionnare-container {
max-width: 600px;
}
}

@media (max-width: 1449px) {
    .secondary-label {
        text-align: center;
        line-height: 13px;
        padding: 6px;
    }
}

.avatar-container {
display: flex;
}

.double-coach__wrapper {
display: flex;
margin-bottom: 16px;
}

.double-coach__wrapper img {
margin-top: 4px;
}

.single-coach__wrapper img {
margin-top: 0px;
}

.single-coach__wrapper {
display: flex;
align-items: center;
}

.single-coach__wrapper .single-coach {
margin-left: 10px;
}



.primary-label {
margin-top: -8px;
margin-bottom: 14px;
font-size: 12px;
background: #3D39EA;
color: #fff;
padding: 1px 8px;
border-radius: 21px;
}

.dsm-club-logo div{
padding: 5px;
border: 1px solid #E8E8EB;
border-radius: 12px;
width: max-content;
height: fit-content;
min-width: 60px;
}


.dsm-club-logo img {
width: 100%;
object-fit: cover;
height: 100%;
height: 55px;
width: 55px;
}

.dsm-team-logo img{
width: 50px;
}

.dsm-team-logo {
align-items: center;
}

.dsm-team-logo span{
margin-left: 30px;
display: flex;
}

.dsm-logo-profile {
object-fit: cover;
object-position: center center;
padding: 5px;
}

.tooltip {
    display: none;
    white-space: nowrap;
    z-index: 10000 !important;
    left: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .email-icon:hover .tooltip {
      display: block !important;
      left: 0%;
      z-index: 100000;
  }

  .email-icon .ki-sms {
      font-size: 1.1rem;
      margin-top: 3px;
  }

  .card-container-column .card-body {
      overflow-x: inherit;

  }

  .table td:first-child .items-center{
      word-break: break-all;
      max-width: 300px;
      margin-right: 15px;
      text-align: left;
      margin-top: 3px;
  }

.club-body-card table tr td:nth-child(2) {
padding: 0 10px !important;
width: 85px;
}

.club-body-card table tr td:nth-child(5) a {
margin-bottom: 10px;
}

.dsm-login .card-body {
margin-bottom: 0px;
}

.dsm-login-logo {
display: flex;
flex-direction: column;
}

.dsm-header-login img{
margin-bottom: 0px !important;
text-align: center;
margin-right: 0px;
}

.dsm-header-login h1 {
margin: 20px 0px;
font-weight: 600;
font-size: 30px;
}

.double-coach__wrapper:last-child {
margin-bottom: 0;
}

.card-body {
margin-bottom: 30px;
}

/* DSM Dropdown */
.dsm-dropdown .dropdown {
position: relative;
display: inline-block;
width: 100%;
}

.dsm-dropdown  .dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100%;
border: 1px solid #ddd;
z-index: 1;
}

.dsm-dropdown .dropdown-content label {
padding: 10px;
display: block;
cursor: pointer;
}

.dsm-dropdown .dropdown.show .dropdown-content {
display: block;
margin-left: 0px !important;
}

.dsm-dropdown .dropdown-btn {
padding: 5px 10px;
border: 1px solid #E8E8EB;
background-color: #FCFCFC;
border-radius: 6px;
cursor: pointer;
width: 100%;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-family: inherit;
color: #4b5675;
font-weight: 500;
}

.dsm-dropdown .dropdown-btn .arrow {
font-size: 12px;
}


.dsm-dropdown .dropdown-content {
padding: 10px;
background: #fff;
border-radius: 6px;
font-size: 14px;
}

.dsm-dropdown .dropdown-content label {
font-size: 14px !important;
font-family: inherit;

}

.dsm-dropdown .dropdown-content input {
position: relative;
top: 2px !important;
margin-right: 10px;
}

.team-single {
display: flex;
margin-bottom: 15px;
}

.team-single svg {
margin-top: 10px;
margin-left: 10px;
}

#teamsWrapper {
width: 100%;
}

.clubs-wrapper {
width: 100%;
}

.clubs-wrapper_inner {
display: flex;
}

.clubs-wrapper div {
display: flex;
}

.clubs-wrapper div svg{
margin-top: 10px;
}

.clubs-wrapper div select {
margin-bottom: 15px;
}

.clubs-wrapper_inner svg,.exercise-single svg{
margin-top: 10px;
margin-left: 10px !important;
}

.badge-empty {
    padding: 12px 16px !important;
}

.row-column-reversed-select {
    margin-bottom: 15px
}

.flex-row-wrap {
flex-direction: row;
flex-wrap: nowrap;
}

.image-input .image-input-placeholder {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

/* Exercises Section */

.items-exercise .description-heading {
    font-size: 15px;
    margin-bottom: 3px;
}

.items-exercise__column {
    max-width: 340px;
    line-height: 18px;
    display: flex;
    flex-direction: column;
}

.items-exercise__column * {
    line-height: 22px;
}

.items-exercise__column ul,.items-exercise__column ol {
    padding-left: 20px;
}

.item-exercise__boxes {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-left: 15px;

}

.item-exercise__boxes--single .box {
    width: 100%;
}

.item-exercise__boxes .box {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border: 1px dashed #DBDFE9;
    border-radius: 12px;
}

.item-exercise__boxes .box .box-title {
    font-size: 16px;
    font-weight: 600;
    color: #353D53;
}

.item-exercise__boxes .box .box-description {
    font-size: 14px;
    font-weight: 400;
    color: #353D53;
}

.item-exercise__boxes .box .box-img {
    height: 50px;
    width: 50px;
    object-fit: contain;
    object-fit: cover;
    border-radius: 50%;
}

.item-exercise__boxes .box .box-avatar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.items-exercise__main-img {
    object-fit: contain;
    max-width: 50%;
    max-height: max-content;
    object-position: top;
    border-radius: 10px;
}

.items-exercise__column ul li{
    list-style: disc;
}

.items-exercise__column ol li{
    list-style-type: decimal;
    margin: 0;
}

.items-exercise__column {
    margin-left: 15px
}

.tooltip-image-upload {
    visibility: hidden;
}

.changed .tooltip-image-upload {
    visibility: visible;
}

.image-exists .tooltip-image-upload {
    visibility: visible;
}


.email-profile-string__container {
  width: 200px; /* Set your desired width */
  word-wrap: break-word; /* Ensures the text will break */
}

.email-profile-string {
  display: inline-block;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 16px;
}




.items-exercise__exercise-img {
    object-fit: contain !important;
    object-position: top !important;
    height: max-content !important;
    border-radius: 12px;
}

.card-col-50 {
    width: 50% !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.card-col-55 {
    width: 55% !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.card-col-45 {
    width: 45% !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.card-col-40 {
    width: 40% !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.card-col-60 {
    width: 60% !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.card-table-link-icon::after{
  content: url("data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%229%22%20viewBox%3D%220%200%208%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.38233%200.970156C7.29217%200.931725%207.19534%200.911341%207.09733%200.910156H0.804832C0.60592%200.910156%200.415155%200.989174%200.274503%201.12983C0.13385%201.27048%200.0548325%201.46124%200.0548325%201.66016C0.0548325%201.85907%200.13385%202.04983%200.274503%202.19049C0.415155%202.33114%200.60592%202.41016%200.804832%202.41016H5.30483L0.249833%207.42766C0.110144%207.56818%200.0317383%207.75827%200.0317383%207.95641C0.0317383%208.15455%200.110144%208.34463%200.249833%208.48516C0.390354%208.62484%200.580443%208.70325%200.778583%208.70325C0.976722%208.70325%201.16681%208.62484%201.30733%208.48516L6.32483%203.47516V7.97516C6.32483%208.17407%206.40385%208.36483%206.5445%208.50549C6.68515%208.64614%206.87592%208.72516%207.07483%208.72516C7.27375%208.72516%207.46451%208.64614%207.60516%208.50549C7.74581%208.36483%207.82483%208.17407%207.82483%207.97516V1.66016C7.82409%201.51209%207.77954%201.36755%207.69679%201.24476C7.61404%201.12197%207.4968%201.02642%207.35983%200.970156H7.38233Z%22%20fill%3D%22%233D39EA%22%2F%3E%3C%2Fsvg%3E");
  display: inline-block;
  margin-left: 5px;
  width: 8px;
  height: 8px;
}

.card-videos video {
    border-radius: 15px;
    margin-bottom: 15px;
}


.m-top-0 {
    margin-top: 0px;
}

.mb-30 {
    margin-bottom: 30px;
}

.card-list-forward {
    border-radius: 10px;
}

.card-list-forward h4 {
    font-size: 15px;
}

.card-list-forward {
    padding: 30px 30px 25px 30px;
    align-items: flex-start;
    border-radius: 10px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: start;

}

.card-list-forward a {
    font-size: 14px;
}

.card-list-forward a:after {
    margin-left: 15px;
    margin-top: -3px;
}

.table-text-left th:last-child {
    text-align: left !important;
}

.font-12 {
    font-size: 12px !important;
}

.mt-40 {
    margin-top: 40px;
}

.mh-200 {
    min-height: 200px;
}

.pb-40 {
    padding-bottom: 40px;
}

.title-rank {
    margin-left: 30px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
}

.title-rank svg {
    margin-right: 10px;
}

.badge {
    border-radius: 15px;
    font-size: 11px;
    height: 8px
}

.badge-empty {
    padding: 12px 16px !important;
}


.badge-info {
    color: #2B28A6;
    background: #F5F5FE;
    margin-left: 10px;
}

.training-badge {
    font-size: 14px !important;
    line-height: 21px;
    font-weight: 400;
    padding: 4px 12px;
    border-radius: 8px;
    width: max-content;
    margin-bottom: 8px;
}

.training-badge__container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 75px;
}

.dsm-dark {
    color: #fefefe !important;
}

.dsm-light {
    color: #4B5675 !important;
}


.card-table thead {
     border-left: 1px solid #F1F1F4;
     border-right: 1px solid #F1F1F4;
    border-bottom: 1px solid #f1f1f4;
}

@media (min-width: 1024px) {
.demo1.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before{
    margin-left: -7px;
}
}


.cke_notification_warning {
    display: none !important;
}

.circle-colored {
    height: 24px;
    width: 24px;
    display: block;
    border-radius: 50%;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.color-picker-wrapper input[type="text"] {
    padding: 0.5em;
    width: 150px;
}

.color-picker-wrapper input[type="color"] {
    max-width: 25px;
    max-height: 40px;
    margin-left: 10px;
    border: none;
    cursor: pointer;
    padding: 0;
}

.image-upload-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-upload-description {
    cursor: pointer;
}

.image-upload-input .image-upload-span {
    color: #3D39EA;
    font-weight: 600;
    cursor: pointer;
}

.note-editable ul {list-style: inside;}

.note-editable ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
.note-editable ol li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
.note-editable ol li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

.dropdown-username button{
    text-align: left !important;
}

.dropdown-username .dropdown-content p {
    margin: 5px 0 7px 0px !important;
}

.club-role-list {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 14px;
    line-height: 16px;
  }
  .club-role-list li {
    margin-bottom: 6px;
  }

  /* Make the dropzone container visible and styled */
  #dropzone-container,  #dropzone-container-2 {
    width: 100%;
    height: 200px;
    border: 2px dashed #3D39EA;
    background: #F5F5FE;
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;  /* Adjust this if necessary */
  }

.dropzone {
    display: flex;
}

.dropzone .dz-preview.dz-image-preview {
    background: #F5F5FE !important;
}

  /* Style the dropzone text */
  #dropzone-text {
    color: #aaa;
    font-size: 16px;
    display: none;
  }

  /* Hide the default file input so only the dropzone is visible */
  #file-input {
    display: none;
  }

  /* Ensure the Summernote text is not overlapping the dropzone */
  .note-dropzone {
    position: relative;
  }

.dropzone .dz-message .dz-button {
    gap: 15px !Important;
    color: #3D39EA !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.dropzone .dz-message {
    margin: auto !important;
    display: flex;
    justify-content: center;
}

.dz-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dz-button:before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url('../media/app/file-upload.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

.tab {
        width: 16.5%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px 20px;
}

.tab_training {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 20px;
}

.tab:disabled,
.tab.disabled {
  cursor: not-allowed; /* Change the cursor to indicate the button is disabled */
  opacity: 0.5; /* Make it look dimmed */
}

.user-select-2 {
    width: 100% !important;
    font-size: 0.8125rem;
}

.select2-search__field::placeholder {
    font-size: 0.8125rem;
    font-weight: 450;
    font-family: Inter, system-ui, sans-serif;
    padding-left: 10px;

}

.select2-selection--multiple {
    width: 100%;
    border-radius: 15px;


}


.select2-selection select2-selection--multiple {
width: 100%;
    padding-left: 10px;
    border-radius: 15px !important;
    padding-top: 3px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:first-child {
    margin-left: 0.75rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #EFEFFD !important;
    border: 1px solid #3D39EA !important;
    border-radius: 4px;
    box-sizing: border-box;
    color: #3D39EA !important;
    display: inline-block;
    margin-left: 5px !important;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    margin-right: 10px;
    margin-top: 2.5px;
    position: absolute;
    right: 0;
    padding: 1px;
}

.select2-results__option {
    font-size: 13px;
}

.select2-container--default .select2-selection--multiple {
    background-color: white !important;
    border: 1px solid #DBDFE9 !important;
    border-radius: 6px !important;
    cursor: text;
    padding-right: 5px !important;
    position: relative;
}

.select2-container--default {
    height: max-content !important;
    display: flex !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
   color: #3D39EA !important;
}

.select2-container .select2-selection--multiple {
    height: max-contents;
}

.select2-container--default .selection {
    width: 100%;
}

.select2-selection {
    height: 100% !important;
    margin-bottom: 4px !important;
}

/* New pagination styling */

#perPageSelect{
    padding: 5px 5px;
    border: 1px solid #F1F1F4;
    background: #FCFCFC;
    border-radius: 7px;
}

.pagination .pagination-item{
    margin-right: 10px;
    border-radius: 0.375rem;
    padding: 0.4rem 0.8rem;
}

.pagination .pagination-item:hover{
    background-color: #F1F1F4;
}

.pagination .pagination-active-item{
    background-color: #3d39ea;
    color: #fff;

}

.pagination-next:hover, .pagination-prev:hover{
    background-color: #F1F1F4;
    border-radius: 0.375rem;
}
.bg-schedule-part-team{
    background-color: #3D39EA !important;
}
.bg-schedule-part-indi{
    background-color: #F9B31A; !important;
}

.color-schedule-part-team{
    color: var(--tw-gray-300);
    font-weight: bold;
}
.color-schedule-part-indi{
    color: var(--tw-gray-800);
    font-weight: bold;
}

.bg-schedule-btn-preparation{
    background-color: #2CED39; !important;
    font-weight: bold;
}
.bg-schedule-btn-training{
    background-color: #0D96D4; !important;
    font-weight: bold;
}

div.card-header.active i.cursor-pointer,
div.preparation-accordion.active i.cursor-pointer {
    transform: rotate(180deg);
}

div.preparation-accordion.active button {
    background-color: #c0defc;
}
.schedule-exercise-img {
    object-position: top;
    border-radius: 10px;
}
.schedule-exercise-boxes .box {
    padding: 10px 10px;
    border: 1px dashed #DBDFE9;
    border-radius: 12px;
}
.schedule-exercise-boxes .box div:first-child {
    font-weight: bold;
}
.schedule-exercise-label {
    margin-top: -8px;
    margin-bottom: 14px;
    font-size: 0.7rem;
    font-weight: bold;
    background: #97bdfa;
    padding: 2px 6px;
    color: var(--tw-gray-900);
    border-radius: 6px;
}
.schedule-exercise-label2 {
    margin-top: -8px;
    margin-bottom: 14px;
    font-size: 0.7rem;
    font-weight: bold;
    background: #f3b159;
    padding: 2px 6px;
    color: var(--tw-gray-900);
    border-radius: 6px;
}
.bg-client {
    background-color: #f5f5fe;
}
.schedule-timer, .training-exercise-timer {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 1.2rem;
    font-style: normal;
    line-height: 1.2rem;
}
.training-exercise{
    border: 1px solid var(--tw-gray-200);
    margin-bottom: 0.3rem;
}
.training-exercise-header {
    border-bottom: 1px solid var(--tw-gray-200);
    padding: 1.5rem 1.5rem;
}
.training-exercise-header.active {
    background: #c0defc;
}
.training-exercise-timer-holder{

}

.training-exercise-body{
    padding: 1.5rem 1.5rem;
}
.training-exercise-timer-play svg{
    fill: #47b647;
}
.training-exercise-timer-pause svg{
    fill: #fca21e;
}

.training-exercise-timer-stop svg{
    fill: #c04;
}

.training-exercise-timer-play svg, .training-exercise-timer-stop svg, .training-exercise-timer-pause svg {
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.disabled-timer-button svg {
    fill: var(--tw-gray-200) !important;
    cursor: not-allowed !important;
}

.disabled-play-button svg {
    display: none;
}

.disabled-pause-button svg {
    display: none;
}

.pause-button-paused svg.pause{
    display: none;
}
.pause-button-paused svg.play{
    display: block;
}
.pause-button-play:not(.disabled-pause-button) svg.pause{
    display: block;
}
.pause-button-play:not(.disabled-pause-button) svg.play{
    display: none;
}
.pause-status-1{
    display: flex;
    font-weight: bold;
}
.pause-status-0{
    display: none;
}

.modal-footer {
    display:flex;
    align-items:center;
    border-top:1px solid var(--tw-gray-200);
    padding-inline-start:1.25rem;
    padding-inline-end:1.25rem;
    padding-block-start:.625rem;
    padding-block-end:.625rem;
}
.training-finished, .client-login {
    background: url(../media/app/questionnare-bg.png) center center;
    background-size: auto 100%;
}
.training-finished img {
    margin-bottom: 0;
    max-height: 150px;
    max-width: 150px;
}
.training-finished .img-holder {
    padding: 1rem;
    border-radius: 1rem;
    background: #f7f7f7;
    margin-bottom: 1.2rem;
}
.training-finished h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tw-gray-100);
}
.timer-box{
    padding: 1rem 1.2rem;
    border: 1px solid #DBDFE9;
    background: #f7f7f7;
    border-radius: 1.2rem;
}
.client-sign-in label{
    color: var(--tw-gray-100) !important;

}
.client-sign-in .btn-icon, .client-sign-in .btn {
    margin-top: 0 !important;
}
.client-sign-in-title{
    font-size: 1.5rem;
    color: var(--tw-gray-100);
    font-weight: 600;
}
.client-login > div {
    max-width: 800px;
}
.club-logo-holder {
    background-color: var(--tw-gray-100);
    border-radius: 1rem !important;
}
.client-login .club-logo-holder {
    padding: 1.5rem 1.5rem;
}
.client-login .club-logo-holder img {
    min-height: 150px;
    width: auto;
}
.club-logo-holder img {
    margin-bottom: 0;
}
.btn-lg {
    height:3rem;
    padding-inline-start:1.25rem;
    padding-inline-end:1.25rem;
    font-weight:500;
    font-size:.875rem;
    gap:.5rem
}
.max-h-\[95\%\] {
    max-height:95%
}

/* Avatar upload component */

.image-input .btn:after{
    content: "x";
}

.image-input .btn.hide-x{
    display: none;
}
/* Tracker table styling */
#tracker_table tbody td:last-child{
    text-align: right;
    padding-right: 1rem !important;
}
.file-sync-running{
    animation: blink 1s linear infinite;
}
@keyframes blink{
    0%{opacity: 1;}
    50%{opacity: .3;}
    100%{opacity: 1;}
}
.btn-black {
    color: #fff;
    background-color: #0e0e0e;
}
.trash-icon-svg {
    cursor: pointer;
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="%23868EA3" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></svg>');
    margin-left: auto;
}
.trash-icon-border{
    border: 1px solid #DBDFE9;
    padding: .3rem;
}

.dynamic-position {
    display: flex;
    margin-bottom: 15px;
}

.dynamic-position svg {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
}
.rating-icon-holder > div {
    cursor: pointer;
}
.observation-item{
    padding: 1rem;
    border-radius: 3px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.scout-rating-yellow{
    color:#ffC107;
}
.scout-rating-red{
    color: #ff3b3b;
}
.scout-rating-green{
    color: #37c939;
}