.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.insTeamImage {
    border-radius: 100%; border: 2px solid #D0D0D0; display: flex; flex: 0 0 20px;
    height: 20px !important; justify-content: center; overflow: hidden; position: relative; width: 20px;
}  
.insPlayerImage {
    border-radius: 100%; border: 2px solid #D0D0D0; display: flex; flex: 0 0 50px;
    height: 50px !important; justify-content: center; overflow: hidden; position: relative; width: 50px;
}
.lText {text-decoration:none; color:#000000;}
.hText {text-transform: uppercase;}

@media only screen and (min-width : 500px) {
    .with-arrow {
        position: relative; padding-bottom: -2px; text-align: center;
    }
    .with-arrow::after {
        content: '▼'; position: absolute; bottom: 0; left: 50%;
        transform: translateX(-50%); font-size: 12px; line-height: 1; color: black;
    }
    .with-arrow-top {
        position: relative; padding-top: -2px; text-align: center;
    }
    .with-arrow-top::after {
        content: '▲'; position: absolute; top: 0; left: 50%;
        transform: translateX(-50%); font-size: 12px; line-height: 1; color: black;
    }
}

.view { margin: auto; }
.wrapper { position: relative; overflow: auto; white-space: nowrap; }
.sticky-col { position: -webkit-sticky; position: sticky; }
.first-col { width: 60px; min-width: 60px; max-width: 60px; left: 0px; }
.second-col { white-space: nowrap; left:60px; background-color: #FFFFFF !important; }
.second-col-h { white-space: nowrap; left:60px; background-color: #F8F8F8 !important; }
.mButton { background-color:tomato; border-color: #e63d1f; width:100%; }
.right { border-right: 1px solid #ccc; }
.pleft { padding-left:20px !important; }
.pright { padding-right:20px; }

.headShotImageImg { 
    border-radius: 100%; border: 2px solid #D0D0D0; display: flex; 
    flex: 0 0 150px; height: 150px; justify-content: center; overflow: hidden; position: relative; width: 150px;
}
.bg-gray { background-color: #f2f3f4 !important; }
.bg-green { background-color: #b1e87d !important; }
.bg-blue { background-color: #ccddf1 !important; }

.size-28a { font-size: 28px; font-weight: 900; font-family: "Inter", sans-serif; color: #000000; }
.size-14a { font-size: 14px; font-weight: 700; font-family: "Inter", sans-serif; color: #000000; }
.size-14 { font-size: 13px; font-weight: 300; font-family: "Inter", sans-serif; color: #000000; }
.size-20a { font-size: 20px; font-weight: 700; font-family: "Inter", sans-serif; color: #000000; }

@media only screen and (min-width : 500px) {
    .size-12a { font-size: 12px; font-weight: 400; font-family: "Inter", sans-serif; color: #000000; }
    .size-12b { font-size: 12px; font-weight:700; font-family: "Inter", sans-serif; color: #000000; }
    .tw-1 { width:80px; }
    .tw-2 { width:60px; }
    .r-h { line-height: 22px; padding:1px; }  
    .size-bio { font-size: 15px; font-weight: 400; font-family: "Inter", sans-serif; color: #000000; }
}

@media only screen and (max-width : 500px) {
    .size-12a { font-size: 14px; font-weight: 400; font-family: "Inter", sans-serif; color: #000000; }
    .size-12b { font-size: 14px; font-weight:700; font-family: "Inter", sans-serif; color: #000000; }
    .tw-1 { width:220px !important; }
    .tw-2 { width:110px !important; }
    .r-h { line-height: 32px; padding:1px; }  
    .size-bio { font-size: 18px; font-weight: 400; font-family: "Inter", sans-serif; color: #000000; }
}

.size-32a { font-size: 28px; font-weight: 700; font-family: "Inter", sans-serif; color: #000000; }
.cen { text-align:center; }
.nw { white-space: nowrap; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } 

.addColor { background-color: #198754; }
.removeColor { background-color: #1a237e; }

.addButton {
    margin-top:5px; color: #ffffff; border: none; border-radius: 8px; padding: 5px 5px; 
    font-size: 16px; width:100%; cursor: pointer; display: flex; align-items: center; 
    text-align:center; gap: 4px; 
}

.info-box {
    border-left: 5px solid #007bff; padding: 15px; margin-bottom: 20px; 
    background-color: #f5f5dc; border-radius: 4px;
}
.info-box p {
    margin-top: 0; margin-bottom: 1em; color: #495057; background-color: #f5f5dc; 
}

@media (max-width: 768px) {
    .info-box { padding: 10px; border-left-width: 3px; }
}  

body {
    background-size: cover; background-attachment: fixed; background-repeat: no-repeat; 
    background-position: center top;
}

.main-content-card {
    background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 20px; margin-top: 20px; margin-bottom: 20px;
}