/*
mainColor: #2B8898;
secondaryColor: #16203B;
btnColor: #2c7584;
backgroudOverlayColor: #000000;
arrowColor: #113670;
adminColor: #16203B;

'3','Hillerød Fodbold','#DE6914','#202020','#2c7584','#000000','#404040','#303030'
'4', 'Sundby', '#A33E3C', '#0C2740', '#2c7584', '#000000', '#2F3A5D', '#0C2740'
*/


/* ------ testing ----------*/

.b1r {
    border: 1px solid red;
}

.b1b {
    border: 1px solid blue;
}

.absCenter {
    position: relative;
    top: 50%; 
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* ------ global ----------*/

/* .camps .calc100 {
    height: calc(100vh - 200px );
    min-height: 200px;
}

@media (max-width:1000px) {
    
    .camps .calc100 {
        height: auto;
        min-height: auto;
    }       
} */

/* 
.camps .w100 {
    width: 100% !important;
}

.camps .h100 {
    height: 100% !important;
} */

/* .camps .font10 {
    font-size: 12px !important;
    text-transform: none !important;
} */

.logoTitle {
    height:30px; 
    width: 130px; 
    float: left; 
    position: absolute; 
    top: calc(50% - 15px); 
    left: calc(50% - 50px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.camps .bgWhite {   
    background-color: white !important;
}

.camps .ptb5 {
    padding: 5px 5px !important;
}

.camps .mr15 {
    margin-right: 15px !important;
}

.camps .mb15 {
    margin-bottom:15px !important;
}

.camps .mt15 {
    margin-top:15px !important;
}

.camps .mb30 {
    margin-bottom:30px !important;
}

.camps .text-center {
    text-align: center;
}

.columns215 .column {
    float: left;
    box-sizing: border-box;
    margin-left: 15px;
}

.columns215 .column {
    width: calc((100% - 15px) / 2);
}

.columns215 .column.first {
    margin-left: 0px;
    width: calc((100% - 15px) / 2);
}

.columns230 .column {
    float: left;
    box-sizing: border-box;
    margin-left: 30px;
}

.columns230 .column {
    width: calc((100% - 30px) / 2);
}

.columns230 .column.first {
    margin-left: 0px;
}



.camps .btnGroup {
    margin-top: 10px;
    position:relative;
}

.camps .btnGroup.right {
    margin-top: 10px;
    position:relative;
    text-align: right;
}



@media (max-width:1000px) {
    
    .columns215 .column,
    .columns230 .column {
        width: 100%;
        float: unset;
        box-sizing: border-box;
        margin-left: 0px;
    }
       
    .columns215 .column.first,
    .columns230 .column.first {
        width: 100%;
        margin-left: 0px;
    }

    .camps .btnGroup {
        margin-top: 10px;
        position:relative;
        bottom: 0px;
    }

    .camps .btnGroup.right {
        margin-top: 10px;
        position:relative;
        text-align: left;
    }

    .camps .btnGroup .button {
        margin-bottom: 5px;
    }
}
    
.campMenu {
    background-size: 45% !important;
    background-position: center top 22px !important;
}

.сhallengesMenu {
    background-size: 90% !important;
    background-position: center top -4px !important;
}

.promotionMenu {
    background-size: 45% !important;
    background-position: center top 10px !important;
}

.campPostMenu {
    background-size: 60% !important;
    background-position: center top 10px !important;
}

.campResultMenu  {
    background-size: 45% !important;
    background-position: center top 10px !important;
    opacity: .7;
}

.camps .bline {
    width: 100%;
    display: block;
    /* padding-top: 10px; */
    margin-top: 10px;
    border-top: 1px solid #D6DCDF;
    margin-bottom: 10px;
}

.camps .textnowrap {
    white-space: nowrap;
    padding-right: 5px;
}

.camps .textanywrap {
    overflow-wrap: anywhere;
}


.camps .displayNone {
    display: none !important;
}

.camps .overflowHidden {
    overflow-x: hidden !important;
}

.camps .button.disabled {
    background-color: rgba(var(--mainColor), .3);
    opacity: .5;
    cursor: default;   
}

.camps .button.gray {
    background-color:  rgba(214,220,223,1); /*##D6DCDF;*/
    color: #333;
}

.camps .button.gray:hover {
    background-color:  rgba(214,220,223,.8); /*##D6DCDF;*/
    color: #333;
}

.camps .btnGroupTwo {
    width: 100%;
    margin: 0;
}

.camps .btnGroupTwo > .button {
    display: inline-block;
    width: calc((100% - 10px) / 2);
    position:relative;
    margin: 0px;
    box-sizing: border-box;
}

.camps .btnGroupTwo > .button:first-child {
    float: left;
}

.camps .btnGroupTwo > .button:last-child {
    float: right;
}


.camps.noResult,
.camps .noResult {
    text-transform: uppercase;
    font-size: 14px;
    color: rgb(242, 242, 242) !important;
    text-align: center;
    width: 100%;
    padding-top: 10px;
}

.box.camps .actions {
    position: absolute;
    top: 10px;
    right: 10px;
} 

.camps .board {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 15px;
}

.camps .board.handle {
    cursor: pointer;
}

.camps .board .eye,
.camps .board .list {
    display: block;
    position: absolute;
    right: 6px;
    top: 60px;
    width: 36px;
    height: 35px;
    /* background-image: url(/images/eye-light.svg);
    background-size: 25px 20px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    filter: invert(100%); */
    background-color: rgba(255, 255, 255, 0.59);
    border-radius: 8px;
    opacity: .5;
    z-index: 1;
    cursor: pointer;
}

.camps .board .list {
    top: 100px;
}

.camps .board .eye::before,
.camps .board .list::before {
    content: '';
    top: 9px;
    left: 8px;
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 20px;

    background-color: rgba(var(--mainColor), 1);
    -webkit-mask-image: url(/images/eye-black.svg);
    mask-image:url(/images/eye-black.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: auto 20px;
    -webkit-mask-size: auto 18px;
    cursor: pointer;
}

.camps .board .list::before {
    left: 9px;
    -webkit-mask-image: url(/images/square-list.svg);
}

.camps .board .eye:hover,
.camps .board .list:hover {
    opacity: 1;
}




.camps .popup {
    float: right;
    width: 220px;
    margin-top: 3px;
    margin-right: 10px;
}

.camps .popup.right {
    margin-right: 25px;
}

.camps .popup.player {
    margin-right: 0px;
    margin-bottom: 15px;
    float: none;
    /* width: calc(100% - 25px); */
    width: 100%;
}

.camps .popup.eval {
    width: 350px;
    margin-right: 25px;
}

.camps .popup.main {
    width: 230px;
    display: inline-block;
    float: none;
    margin-left: 5px;
}


.camps .popup.small {
    width: 190px;
    margin-right: 10px;
}

.camps .popup.mini {
    width: 150px;
    margin-right: 25px;
}

@media (max-width: 1000px) {
    
    .camps .popup {
        width: 100%;
        float: none;
        margin-left: 0px !important;
        position: relative;
        text-align: center;
        padding-right: 0px;
        margin-top: 5px;
    }

    .camps .popup.small {
        width: 100%;
        padding-right: 0px;
    }

    .camps .popup.mini {
        width: 100%;
        margin-right: 0px
    }
    
    .camps .popup.right {
        margin-right: 0px;
    }

    .camps .popup.eval {
        width: 100%;
        margin-right: 0px;
    }
    
    .camps .popup.player {
        margin-right: 0px;
        margin-bottom: 15px;
        width: 100%;
    }
    
}

.camps .categoryFrame .description {
    padding-top: 5px;
    padding-bottom: 5px;
}

.camps .categoryFrame .collapsed {
    display: none;
}


.camps .info,
.camps .infoProm {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;  
} 

.camps .info .bold,
.camps .infoProm .bold {
    font-weight: 600;  
}

.camps .info .up,
.camps .infoProm .up {
    text-transform: uppercase;  
}

.camps .info > div,
.camps .infoProm > div {
    margin-bottom: 5px;
}


.camps .desc,
.camps .descProm {        
    margin-top: 15px;
    font-size: 14px;
    line-height: normal;
    margin-bottom: 15px;  
}

.camps .image {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    /* border-radius: 7px; */
}

.camps .image:after {
    content: "";
    display: block;
    padding-bottom: 45%;
}


.camps .btnGroup {
    display: inline-block;
    width: calc(100% + 30px);
    position:relative;
    margin: 0px;
    margin-left: -15px;    
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.camps .btnGroup .button {
    padding: 9px 10px;
}

.camps .campDate {
    width: 100%;
    display: table;
    padding-bottom: 0px;
}

.camps .campDate > div {
    display: table-cell;
    text-align: center;
    padding: 0px;
}

.camps .campDate .to {
    font-size: 23px;
    width: 40px;
    padding: 0px !important;
}

.camps .btnBox {
    margin-top: 15px;
    width: 100%;
    text-align: right;
}

.camps .btnBox.center {
    text-align: center;
}

.camps .button.rightSide {
    width: 40%;
    display: inline-block;
    text-align: center;
}

.camps .button.centerSide {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.camps .campForm {
    font-weight: 600;  
    margin-left: 10px;
    margin-bottom: 15px;
}

/* ------ ribonList ----------*/

.camps .ribonList {
    margin-bottom: 0px;
}

.camps .ribonList .item {
    display: inline-block;
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
    /* background-size: auto 0px;
    background-repeat: no-repeat;
    background-position: center right 25px; */
}

.camps .ribonList .item .parent,
.camps .ribonList .item .light,
.camps .ribonList .item .parent.gray,
.camps .ribonList .item .child {
    display: inline-block;
    width: 100%;
    /* min-height: 39px; */
    /* line-height: 39px;   */
    font-size: 16px;
    text-transform: uppercase;
    line-height: normal;       
    position: relative;
    text-align: left;
    border: none;
    border-radius: 3px;
    padding: 10px;
    padding-right: 20px;
    background-color: rgba(var(--mainColor), 1);
    cursor: pointer;
    color: white;
    box-sizing: border-box;
    transition: all .2s;
}

.camps .ribonList .item .parent:hover {
    background-color: rgba(var(--mainColor), .8);
}

.camps .ribonList .item .parent.gray.collapsed {
    background-color:  rgba(161,164,174,1) /*#A1A4AE;*/
}

.camps .ribonList .item .parent.gray.collapsed:hover {
    background-color: rgba(168,171,181,1);  
}

.camps .ribonList .item .parent:after,
.camps .ribonList .item .parent.gray:after,
.camps .ribonList .item .child:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
    color: white;
    font-weight: 300;
    z-index: 1;
    display: block;
    transition: all .3s;
    position: absolute;
    line-height: normal;       
    right: 10px; 
    top: calc(50% - 10px);
    /* top: 50%;     
    -webkit-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translate(0%,-50%);  */
}

.camps .ribonList .item .parent.gray:after {
    content: "\f054";
}

.camps .ribonList .item .child,
.camps .ribonList .item .light {    
    background-color: #D6DCDF;
    color: #333;
}

.camps .ribonList .item .light:hover,
.camps .ribonList .item .child:hover {
    background-color: #EFEFEF;
}

.camps .ribonList .item .light:after,
.camps .ribonList .item .child:after {
        color: rgba(var(--mainColor), 1);
}

.camps .ribonList .item .parent.selected:after,
.camps .ribonList .item .parent.collapsed:after,
.camps .ribonList .item .child.collapsed:after {
    content: "\f054";
}

.camps .ribonList .item .parent.gray.collapsed:after {
    content: "";
}

.camps .ribonList .item .child.selected,
.camps .ribonList .item .light.selected {
    background-color: #8B8F99;
    color: white;
}

.camps .ribonList .item .child.selected:hover,
.camps .ribonList .item .light.selected:hover {
    background-color: rgb(139, 143, 153, 1);
    background-color: #a1a5b1;
}

.camps .ribonList .item .child.selected:after,
.camps .ribonList .item .light.selected:after {
    color: white;
    /*content: "\f054";*/  /* > */
    /* content: "\f078"; */
}

.camps .ribonList .item .children {
    display: inline-block;
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
}

.camps .ribonList .item .children.collapsed {
    display: none;
}

.camps .ribonList .item .description {
    display: block;
    text-align: left;
    padding: 10px 5px 10px 5px;
    background-color: #efefef;
    color: #333;
    margin-top: 10px;
}

.camps .ribonList .item .vspace {  
    margin-top: 10px;  
}

.camps .ribonList .item .nospace {
    padding-top: 0px;
}

/* ------ gridList3 ----------*/

.camps .gridList3 > .item{
    width: calc((100% - 10px) / 3);
    float: left;
    height: 50px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0px;
    position: relative;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.camps .gridList3 > .item:nth-child(3n+1) {
    margin-left: 0px;
}

.camps .imagePlaceholder,
.camps .video.imagePlaceholder,
.camps .imagePreview,
.camps .videoPreview {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(var(--secondaryColor), 1);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.camps .imagePlaceholder:hover:before,
.camps .video.imagePlaceholder:hover:before,
.camps .imagePreview:hover:before,
.camps .videoPreview:hover:before {
    content: "\f04b";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 20px;
    color: white;
    font-weight: 800;
    top: 50%; left: 50%;
	-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1000;
}

.camps .imagePlaceholder.none:hover:before,
.camps .imagePreview.none:hover:before {
    content: "";
}


.box.camps .item .actions {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 8px;
    border-radius: 3px;
}

.box.camps .item .actions:hover {
    background-color: white;
}

.box.camps .item .actions .options:before {
    content: "\f141";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 15px;
    font-weight: 400;
    top: 6px;
    left: 3px;
    transition: all .3s;
    line-height: 1px;
}

.box.camps .item .actions .options:hover:before {
    color: rgba(var(--mainColor), 1);
    /* color: red; */
    opacity: 1;
    font-size: 16px;
}

.box.camps .item .actions .optionsPopup  {
    position: absolute;
    z-index: 100001;
    background-color: white;
    border-radius: 7px;
    padding: 9px;
    padding-bottom: 3px;
    box-sizing: border-box;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.25); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.25);
    display: none;
    left: calc(100% - 115px);
    top: 20px;
}

.box.camps .item .actions.active .optionsPopup {
    display: block;
}

/*---------- CAMP POSTS --------*/

.camps #postFilters .filter {
    width: calc((100% - 10px) / 2);  
}

.camps .selectCamp {
    margin-top: 15px;
    width: 100%;
    position: relative;
}

.camps .selectCamp.disabled,
.camps .selectCamp.disabled {
        opacity: .3;    
}

.camps #shareWithCamps {
    display: none;
}

.camps #shareWithCamps.active {
    display: block;
}

/*---------- CAMP TABLE PLAYER --------*/

.camps .campTableView {
    font-size: 14px;
    background-color: rgba(var(--secondaryColor), 1);
    background-color: #F1F2F3;
    color: #424A51;
    font-weight: 400;  
    width: 100%;
}

.camps .campTableView thead {
    color: white;
    font-weight: 400;  
    background-color: #A1A1A1;
    text-transform: uppercase;
}

.camps .campTableView thead tr {
    height: 35px;
}

.camps .campTableView thead tr:nth-child(1){    
    background-color:rgba(var(--mainColor), 1);
    font-weight: 600;  
}


.camps .campTableView tr td {
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: middle;
}

/* .camps .campTableView tbody tr td:nth-last-child(1),
.camps .campTableView tbody tr td:nth-last-child(2) {
    padding-left: 5px;
    padding-right: 5px;
} */


.camps .campTableView  tr td:nth-child(0) {
    border-left: none;   
}
.camps .campTableView tbody tr td:last-child {
    /* border-bottom: none; */
}


.camps .campTableView .box {
    background-color: #293944;
}


.camps .campTableView tbody tr {
    height: 40px;
    border-bottom: 1px solid white;
}

.camps .campTableView .playerLink {
    display: inline-block;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    height: 25px;
    vertical-align: middle;
}

.camps .campTableView .playerLink:hover {
    text-decoration: underline;
    color:rgba(var(--mainColor), 1);
}

.camps .campTableView .playerEdit {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    /* background-color:  rgba(var(--mainColor), 1);
    border-radius: 3px; */
    cursor: pointer;
    opacity: .7;
    
}

.camps .campTableView .playerEdit::before {
    position: absolute;
    color:  black;
    content: '\f044';
    font-family: "Font Awesome 5 Pro";
    font-size: 17px;
    font-weight: 300;
    top: calc(50% - 4px);
    left: calc(50% - 6px);

    /*content: '';
    top: 5px;
    left: 5px;
    width: 12px;
    height: 12px;
    background-color: white;
    -webkit-mask-image: url(/images/pen-light.svg);
    mask-image:url(/images/pen-light.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: auto 11px;
    -webkit-mask-size: auto 11px;*/
}

.camps .campTableView .playerEdit:hover {
    opacity: 1;
}

#campPlayerTableView .sortTableTitle {
    min-width: unset;
}


.camps .button.small {
    font-size: 12px;
    padding: 5px 7px;
    width: auto;
}

.camps .checkbox.small{
    width: 20px;
    height: 20px;  
    border: none;
    background-color: white;
}

.camps .checkbox.small:hover {
    background-color: rgba(var(--mainColor), .8); /*rgba(255, 255, 255, .1);*/
}

.camps .checkbox.small.checked {
    background-color: rgba(var(--mainColor), 1);
    border: none;
}

.camps .checkbox.small.checked:hover {
    cursor: pointer;
    background-color: rgba(var(--mainColor), .8);
}

.camps .checkbox.checked:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 16px;
    font-weight: 300;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    color:white;
}

.camps .checkbox.label {
    display: inline-block;
    margin-right: 7px;
    margin-bottom: 4px;
    background-color: rgba(var(--mainColor), .8);
    border: none;
    vertical-align: middle;
    font-size: 12px;
    color: black;
}




.camps .sortTableSelect {
    border: 1px solid rgba(var(--mainColor), 1);
}

.camps .sortTableSelect select { 
    color: rgba(var(--mainColor), 1);
}

.camps .sortTablePagination a {
    color: lightgrey;
    padding: 4px 10px;
    text-decoration: none;
    transition: background-color .2s;  
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    border-radius: 5px;
    border: 1px solid rgba(var(--mainColor), 1);
    margin-left: 10px;
}

.camps .sortTablePagination a.active {
    background-color: rgba(var(--mainColor), 1);
    color: white;
}
  
.camps .sortTablePagination a:hover:not(.active) {
    background-color: rgba(var(--mainColor), .8);
}

.camps #sortTablePrevPage:hover, #sortTableNextPage:hover {
    font-weight: 900;
    color: rgba(var(--mainColor), 1);
}

.camps .campTableView tr.notApproved {
    opacity: .3;
    /* text-decoration: line-through; */
}

.camps .campTableView tr.highlighted {   
    background-color: #d1d1d1;
}

.camps .campTableViewContainer {
    width: 100%; 
    overflow-x: auto; 
    background: white; 
    border: 0;
    padding: 0;
    margin: 0;
    margin-bottom: 10px; 
}

.camps.box .search {
    margin-bottom: 0px;
    margin-top: -4px;
}

.camps .select.white.disabled {
    background-color: #EFEFEF;
    height: 33px;
    background-image: none;
}

.camps #deleteCampSkill .skills {
    margin-bottom: 20px;
}

.camps #deleteCampSkill .skill {
    margin-top: 5px;
}

.camps #deleteCampSkill .skill:first-child {
    margin-top: 0px;
}

.camps #deleteCampSkill .skill .name {
    float: left;
    width: calc(100% - 44px);
    padding: 10px;
    background-color: rgba(214, 220, 223, .3);
    box-sizing: border-box;
    border-radius: 3px;
}

.camps #deleteCampSkill .skill .delete {
    width: 39px;
    height: 39px;
    font-family: "Font Awesome 5 Pro";
    position: relative;
    font-size: 14px;
    font-weight: 300;
    padding: 0px;
    float: right;
    background-color: rgba(255, 59, 48, 1);
    border-radius: 3px;
    cursor: pointer;
}

.camps #deleteCampSkill .skill .delete:hover {
    background-color: rgba(255, 59, 48, .8);
}

.camps #deleteCampSkill .skill .delete:after {
    content: "\f2ed";
    top: calc(50% - 7px);
    left: calc(50% - 6px);
    position: absolute;
    color: white;
}

/* ------- Challanges ------ */

.camps .grid2 .box {
    width: calc((100% - 15px) / 2);
    float: left;
    margin-left: 15px;
    margin-bottom: 15px;
}

.camps .grid2 .box:nth-child(2n+1) {
    margin-left: 0px;
}

.camps .target  {
    display: inline-block;
    position: relative;
    width: 100%;
}

.camps .target .icon,
.camps .target .icon.edit {
    border: none;
    position: absolute;
    top: calc(50% - 19px);
    color: white;
    transition: background .3s;
    /* cursor: pointer !important; */
    width: 39px;
    height: 39px;
    background-color: rgba(var(--mainColor), 1);
}

.camps .target .icon:after {
    content: "\f648";
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    font-size: 26px;
    color: rgba( 255, 255, 255, .6);
    font-weight: 200;
    top: calc(50% - 13px);
    left: 6px;
}

.camps .target .text,
.camps .target .edit {
    padding-left: 50px;
    padding-right: 50px;
    font-size: 15px;
    font-weight: normal;
    min-height: 39px;
}

.camps .target .icon.small {
    top: calc(50% - 23px);
}

.camps .target .edit {
    padding-right: 0px;
}

.camps .target .text .header {    
    font-weight: 800;
    text-transform: uppercase;
    display: block;
}

.camps .target .text .description,
.camps .target .text p {
    display: block;
    margin: 0;
}

.camps .checkbox.big {
    border: none;
    position: absolute;
    top: calc(50% - 19px);
    right: 0px;
    width: 39px;
    height: 39px;
    background-color: rgba(161, 164, 174, 1);
    color: white;
    transition: background .3s;
    cursor: pointer !important;
}

.camps .checkbox.big:after {
    content: "\f068";
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    font-weight: 400;
    color: white;
    position: absolute;
    left: 11px;
    top: calc(50% - 10px);
}

.camps .checkbox.big.disabled {
    cursor: default !important;
}

.camps .checkbox.big.checked {
    background-color: rgba(var(--mainColor), 1);
}

.camps .checkbox.big.checked:after {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    font-weight: 100;
    color: white;
    position: absolute;
    left: 11px;
    top: calc(50% - 10px);
}

.box .actions .optionsPopup.skill {
    top: 22px;
    left: calc(100% - 240px);
}

.box .actions .optionsPopup.eval {
    top: 22px;
    left: calc(100% - 160px);
    width: 160px;
}

.box .actions .optionsPopup.session {
    top: 22px;
    left: calc(100% - 170px);
    width: 170px;
}

.actions .optionsPopup.eval .option,
.actions .optionsPopup.session .option {
    font-size: 12px;
    min-width: 120px;
    margin-bottom: 6px;
    text-align: right;
}

.camps .buttonLine div {
    width: calc(100% / 2 - 2px);
    display: inline-block;
    text-align: left;
    box-sizing: border-box;
 }

 .camps .buttonLine div:last-child {
    text-align: right;
 }

 .camps .buttonLine input[type="button"] {
    width: calc(100% - 5px);
    text-align: center;
 }


 .camps .display-table {
    display: table; 
    width:100%;
}

.camps .display-table > div { 
    display: table-row; 
}

.camps .display-table > div > div { 
    display: table-cell;
    padding-right: 5px;
    padding-top: 2px;
}

.camps .display-table > div > div:last-child { 
    display: table-cell;
    padding-right: 0px;
}

.camps .noDisplay{
    display: none;
}


.camps .uploadContainer{
    position: relative;
    width: 100%;
    height: 256px;
    display: table;
}

.camps .uploadArea{   
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: darkgray;
    border: 2px dashed rgba(0, 0, 0, .3);
    opacity: .5;
    font-size: 12px;
}

.camps .uploadArea.file_drag_over{  
    color:#000;  
    cursor: pointer;
    background-color: rgba(0, 0, 0, .2); 
}  

.camps .uploadArea.file_uploded{  
    color:#000;  
}  

.camps .uploadArea.file_error{  
    color:red;  
}  

.camps .uploadArea i {
    display: block;
    font-size: 60px;
    margin-bottom: 25px;
}

.camps .uploadArea h1{
    display: block;
    font-size: 18px;
    line-height: 18px;
    /* color: rgba(var(--mainColor), 1); */
}

.loader_small {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: loader_small 2s linear infinite;
	margin: auto auto;
}
  
@keyframes loader_small {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.camps #campReport {
    width: 100%;
    margin-top: 5px;
}

.camps .campReportT {
    display: table;
    width: 100%;
    background-color: transparent;
}

.camps .campReportT .row {
    display: table-row;
}

.camps .campReportT .cell {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    border-bottom: 5px solid white;
    box-sizing: border-box;
    position: relative;
}

.camps .campReportT .cell.margin {
    width: 5px;
}

.camps .campReportT .cell.value {
    width: 39px;
    text-align: center;
}

.camps .campReportT .cell.name {
    background-color: #efefef;
    text-transform: uppercase; 
    color: #333;
    cursor: pointer;  
    padding: 3px 5px 3px 10px; 
    line-height: 22px; 
}

.camps .campReportT .cell.name.selected {
    background-color: rgba(var(--mainColor), 1);
    color: white;}


.camps .campReportT .cell .value {
    width: 39px;
    height: 39px;
    border-radius: 3px;
    background-color: rgba(var(--mainColor), 1);
    color: white; 
    text-align: center;
    font-weight: 600;
    line-height: 39px;
    position: relative;
    cursor: pointer;
}

.camps .campReportT .cell .value:after {
      content: "\f15c";
      font-family: "Font Awesome 5 Pro";
      font-size: 22px;
      color: white;
      font-weight: 200;
      position: absolute;
      top: 2px;
      left: 12px;
      z-index: 1;
      display: block;
      transition: all .3s;
}




.camps .campReport div {
    width: 100%;
    height: 39px;
    font-size: 16px;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;
    margin-top: 5px;
    background-color: transparent;
}

.camps .campReport .name {
    float: left;
    width: calc(100% - 44px);
    /* line-height: 18px; */
    padding-left: 10px;
    text-transform: uppercase;     
    background-color: #efefef;
    color: #333;
    cursor: pointer;
    word-wrap: break-word;
    overflow-wrap: anywhere;    
}

.camps .campReport .name.selected {
    background-color: rgba(var(--mainColor), 1);
    color: white;
}

.camps .campReport .value {
    float: right;
    width: 39px;
    height: 39px;
    border-radius: 3px;
    background-color: rgba(var(--mainColor), 1);
    color: white; 
    text-align: center;
    font-weight: 600;
    line-height: 39px;
    position: relative;
    cursor: pointer;

}

.camps .campReport .value:after {
      content: "\f15c";
      font-family: "Font Awesome 5 Pro";
      font-size: 22px;
      color: white;
      font-weight: 200;
      position: absolute;
      top: 2px;
      left: 12px;
      z-index: 1;
      display: block;
      transition: all .3s;
}

.camps #campReportDatails {
    width: 100%;
    margin-top: 5px;
    cursor: default;
}

.camps .campReportDatails div {
    width: 100%;
    height: 39px;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;
    margin-top: 5px;
    background-color: transparent;
}

.camps .campReportDatails .name {
    float: left;
    width: calc(40%);
    height: 39px;
    line-height: 39px;
    padding-left: 10px;
    text-transform: uppercase;     
    background-color: #9a9a9a;
    color: white; 
    text-align: center;
}

.camps .campReportDatails .value {
    float: right;
    width: calc(60% - 5px);
    height: 39px;
    border-radius: 3px;
    background-color: #efefef;
    color: #333; 
    text-align: center;
    /* font-weight: 600; */
    text-transform: uppercase;     
    line-height: 39px;
    position: relative;
}

.camps #deleteCamp .items {
    margin-bottom: 20px;
}

.camps #deleteCamp .item {
    margin-top: 5px;
}

.camps #deleteCamp .item:first-child {
    margin-top: 0px;
}

.camps #deleteCamp .item .name,
.camps #deleteCamp .item .name.selected {
    float: left;
    width: calc(100% - 44px);
    padding: 10px;
    background-color: rgba(214, 220, 223, .3);
    box-sizing: border-box;
    border-radius: 3px;
    height: 39px;
}

.camps #deleteCamp .item .name.selected {

    background-color: rgba(var(--mainColor), 1);
    color: #efefef;
}

.camps #deleteCamp .item .delete {
    width: 39px;
    height: 39px;
    font-family: "Font Awesome 5 Pro";
    position: relative;
    font-size: 14px;
    font-weight: 300;
    padding: 0px;
    float: right;
    background-color: rgba(255, 59, 48, 1);
    border-radius: 3px;
    cursor: pointer;
}

.camps #deleteCamp .item .delete:hover {
    background-color: rgba(255, 59, 48, .8);
}

.camps #deleteCamp .item .delete:after {
    content: "\f2ed";
    top: calc(50% - 7px);
    left: calc(50% - 6px);
    position: absolute;
    color: white;
}

.camps .chooseSelect {
    margin-bottom: 10px;
}

.camps .chooseSelect.line {
    padding-bottom: 10px;
    border-bottom: 1px solid #D6DCDF;
}

.camps .categories .category.parent.selected:after {
    content: "\f078";
}

#editCategories .category .close.folded {
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
    right: 25px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 3px;
}

#editCategories .category .edit.folded{
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
    right: 50px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 3px;
}

.camps .category.parent.campTest:after,
.camps .category.parent.campEval:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
    color: white;
    font-weight: 300;
    z-index: 1;
    display: inline-block;
    transition: all .3s;
    position: absolute;
    top: 10px;
    right: 5px; 
    line-height: normal;      
}

.camps .category.parent.campTest.folded:after,
.camps .category.parent.campEval.folded:after {
        content: "\f054";
}

.camps .category.parent.campTest.add:after,
.camps .category.parent.campEval.add:after {
        content: "";
}
.camps .category.parent.campTest.folded.add:after,
.camps .category.parent.campEval.folded.add:after {
        content: "";
}

.camps .parentFrame.folded {
    display: none;
}

#editCategories .category.add.editing.campTest {
    padding-top: 21px;
}

#editCategories .category.add.editing.campTest.folded {
    padding-top: 11px;
}

#editCategories .category.add.campTest input[type="button"] {
    top: 16px;
}

#editCategories .category.add.campTest.folded input[type="button"] {
    top: 5px;
}

.categories.campTest .category span {
    background-color: rgba(255, 255, 255, .3);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 2px;
    border-radius: 3px;
    display: inline-block;
    margin-left: 8px;
}

.camps .playersTestTable thead td {
    background-color: rgba(var(--mainColor), 1);
    color: white;
    padding: 7px;
    text-transform: uppercase;
    text-align: center;
}

.camps .playersTestTable {
    border-collapse: collapse;
    width: 100%;
}

.camps .playersTestTable tr {
    border-bottom: 1px solid white;
}

.camps .playersTestTable td {
    background-color: #EFEFEF;
    border-right: 1px solid white;
    padding: 7px;
}

.camps .playersTestTable td.player {
    text-align: left;
    text-transform: uppercase;
    padding-left: 15px;
}

.camps .playersTestTable td.team {
    text-align: center;
    text-transform: uppercase;
}

.camps .playersTestTable td.result {
    text-align: center;
    color: black;
    text-transform: uppercase;
}

.camps .popupHelpText {
    font-size: 12px;
    opacity: .6;
    margin-top: 0px;
    margin-bottom: 5px;
    display: block;
}

.camps .playersEditTestTableFrame {
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
    /* overflow-y:auto;
    max-height: calc(100vh - 350px); */
    margin-bottom: 15px;
}

.camps .playersEditTestTable {
    border-collapse: collapse;
    width: 100%;
}

.camps .playersEditTestTable tr {
    border-bottom: 1px solid white;
}

.camps .playersEditTestTable td {
    background-color: #EFEFEF;
    border-right: 1px solid white;
}


.camps .playersEditTestTable tr td:last-child {
    border-right: none;
}

.camps .playersEditTestTable thead td {
    background-color: rgba(var(--mainColor), 1);
    color: white;
    padding: 7px;
    text-transform: uppercase;
}

.camps .playersEditTestTable .name {
    background-color: #A1A4AE;
    color: white;
    padding: 7px;
}

.camps .playersEditTestTable .team {
    background-color: #A1A4AE;
    color: white;
    padding: 7px;
    text-align: center;

}

.camps .playersEditTestTable .result {
   width: 115px;
}

.camps .playersEditTestTable input {
    border-radius: 0px !important;
    background-color: transparent;
}

.camps .playersEditTestTable input.readOnly {
    background-color: #A1A4AE;
}

.camps .program {
    display: table;
    width: 100%;
    color: #333;
    transition: all .3s;
    box-sizing: border-box;
    font-size: 14px;
    /* cursor: auto; */
    background-color: transparent !important;
    margin-top: 5px;
}

/* .camps .program:after {
    content: "" !important;
} */

.camps .program .header {
    height: auto !important;
    /* margin-top: 5px; */
}

.camps .program .header .name {
    text-transform: uppercase;
    color: white;
    background-color: #A1A4AE;
}

.camps .program .header .duration {
    background-color: rgba(var(--mainColor), 1);
    position: relative;
}

.camps .program .header .duration:before {
    content: "\f2f2";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 18px;
    color: white;
    font-weight: 300;
    top: calc(50% - 9px);
    left: calc(50% - 8px);
}

.camps .program .time {
    margin-top: 5px;
}

.camps .program .margin {
    display: table-cell;
    width: 5px;
    min-width: 5px;
}

.camps .program .name {
    border-radius: 3px;
    display: table-cell;
    background-color: #D6DCDF;
    padding: 10px;
    box-sizing: border-box;
    vertical-align: middle;
    width: 100%;
    transition: all .3s;
}

.camps .program .name.pd5 {
    padding: 5px;
}

.camps .program .name.drill {
    cursor: pointer;
    background-color: #D6DCDF;
}

.camps .program .name.drillnone {
    cursor: default;
    background-color: #D6DCDF;
}

.camps .program .name.break {
    cursor: default;
    background-color: #A1A4AE;
}


.camps .program .name .title {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 1px;
    opacity: .8;
}

.camps .program .name .info {
    display: block;
}

.camps .program .selected .name {
    background-color: #A1A4AE;
}

.camps .program .time:hover > .name.drill {
    color: white;
}

.camps .program .duration {
    background-color: #A1A4AE;
    border-radius: 3px;
    display: table-cell;
    width: 39px;
    min-width: 39px;
    max-width: 39px;
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 14px;
    padding: 5px;
    box-sizing: border-box;
}

.camps .program .duration span {
    display: block;
}

.camps .program .duration span.first {
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.camps .program .fields input[type="text"],
.camps .program .fields.drill input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    padding: 8px 0px;
    background-color: transparent;
    border-radius: 3px;
    transition: background .2s;
    color: #333;
    margin: 0px;  
    border: none;
}

.camps .program .fields.drill input[type="text"] {
     color: white; 
}

.camps .program .fields.drill .title input[type="text"] {
    color: black; 
}

.camps .program .fields input:disabled {
    color: black;
}

.camps .program .fields.drill input:disabled {
    color: white;
}


.camps .program .fields {
    display: table;
    width: 100%;
    height: 100%;
    color: #EFEFEF;
    transition: all .3s;
    box-sizing: border-box;
    font-size: 14px;
    /* cursor: pointer; */
    background-color: transparent !important;
    margin: 0;
}

.camps .program .fields .duration,
.camps .program .fields.drill .duration {
    display: table-cell;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    background-color: white;
    color:  #848484;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 800;
}

.camps .program .fields.drill .duration {
    background-color:#A1A4AE;
    color: #EFEFEF;
}

.camps .program .fields .dot {
    display: table-cell;
    width: 11px;
    min-width: 9px;
    text-align: center;
    vertical-align: middle;
}

.camps .program .fields .dot:after {
    content: "\f111";
    font-family: "Font Awesome 5 Pro";
    color:  #A1A4AE;
    font-size: 5px;
    font-weight: 800;
    position: relative;
    top: -3px;
}

.camps .program .fields .block {
    display: table-cell;
    vertical-align: text-top;
    position: relative;
    text-align: left;
}

.camps .program .fields.drill .block .title,
.camps .program .fields .block .title,
.camps .program .fields.drill .block .info,
.camps .program .fields .block .info {
    width: 100%;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    background-color: white;  
    box-sizing: border-box;
    border-radius: 3px; 
    opacity: 1;
    padding: 8px 0px 8px 10px;
    border: none;
    margin-bottom: 5px;
    color: #333;
}

.camps .program .fields .block .info,
.camps .program .fields.drill .block .info {
        margin-bottom: 0px;
}

.camps .program .fields.drill .block .info {
    background-color:#A1A4AE;
    color: #EFEFEF;
    cursor: auto;
}

.camps .program .fields.drill.edit .block .info {
    background-color: rgba(var(--mainColor), 1);
    color: white;
    cursor: pointer;
}

/* .camps .program .fields.drill.edit .block::after {
    content: 'Select Drill';
    font-size: 16px;
    color: white;
    z-index: 1000;
    line-height: normal;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 45px;
    width: 100%;
    height: 20px;
    border: 1px solid red;
    text-align: center;
    text-transform: uppercase;
} */

/* .camps .program .fields.drill.edit .block .info:after {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Pro" !important;;
    font-size: 18px !important;;
    font-weight: 300 !important;;
    position: absolute !important;;
    top: calc(50% - 9px) !important;;
    right: 10px !important;;
    z-index: 1000 !important;;
    color:red !important;;
} */

.camps .program .fields .icon {
    display: table-cell;
    width: 35px;
    max-width: 35px;
    text-align: center;
    background-color: transparent;
    vertical-align: middle;
}

.camps .program .fields .editIcon, 
.camps .program .fields .saveIcon, 
.camps .program .fields .deleteIcon {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    transition: all .2s;
    cursor: pointer;
    box-sizing: border-box;
    background-color: rgba(var(--mainColor), 1);
    color: #EFEFEF;
    margin: 0 auto;
}

.camps .program .fields .editIcon:hover, 
.camps .program .fields .saveIcon:hover, 
.camps .program .fields .deleteIcon:hover {
    opacity: 0.8;
} 

.camps .program .fields .editIcon:after {
    content: "\f303";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 14px;
    font-weight: 300;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
}

.camps .program .fields .deleteIcon:after {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 19px;
    font-weight: 300;
    top: calc(50% - 9px);
    left: calc(50% - 6px);
}

.camps .program .fields .saveIcon:after {
    font-family: serif;
    content: "OK";
    position: absolute;
    font-size: 14px;
    font-weight: 300;
    top: calc(50% - 8px);
    left: calc(50% - 10px);
    color: white;
}

.camps .box .headline,
.camps.box .headline {
    font-size: 18px;
    color: rgba(var(--mainColor), 1);
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
    margin-bottom: 15px;
    overflow-wrap: anywhere;
}

.camps .box .subheadline,
.camps.box .subheadline {
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.camps .addCampProgramDay {
    width: 100%;
    display: block;
    position: relative;    
}

.camps .addCampProgramDay > div {
    display: inline-block;
    margin: 0 auto;
}

.camps .addCampProgramDay > div:nth-child(1) {
    width: calc(100% - 41px);
    float: left;
}

.camps .addCampProgramDay > div:nth-child(2) {
    width: 37px;
    float: left;
}

.camps .addCampProgramDay input[type="text"] {
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-size: 14px;
    padding: 8px 8px;
    background-color: rgba(255, 255, 255, .1);
    color: white;
    border-radius: 3px;
    transition: background .2s;
    background-color: #EFEFEF;
    color: #333;
    margin: 0px;
    margin-bottom: 0px;
}

.camps .button.add {
    width: 32px;
    height: 32px;
    background-color: rgba(var(--mainColor), 1);
    position: relative;
    padding: 0px;
    margin: 0px;
    float: right;
}

.camps .button.add:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f067";
    font-weight: 300;
    font-size: 15px;
    left: calc(50% - 6px);
    top: calc(50% - 7px);
    position: absolute;
}

.camps .checkbox.recarring.checked {
    background-color: rgba(var(--mainColor), 1);
    border: 2px solid rgba(var(--mainColor), 1);
}

.camps table.recarring {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 50px;
    position: relative;
}

.camps table.recarring td {
    padding-top: 10px;
}

.camps .recarringText {
    white-space: nowrap;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    font-size: 15px;
    position: absolute;
    top: 20px;
    left: 36px;
}

.camps .evaluationCard .table {
    display: table;
    width: 100%;
    margin-bottom: 5px;
    text-transform: uppercase;
    position: relative;
    color: white;
}

.camps .evaluationCard .cell {
    display: table-cell;
    height: 39px;
    vertical-align: middle;
    text-align: left;
    border-radius: 3px;
    background-color: rgba(var(--mainColor), 1);
    cursor: default;
}

.camps .evaluationCard .name {
    padding: 10px;
    box-sizing: border-box;
}

.camps .evaluationCard .margin {
    width: 5px;
    background-color: white;
}

.camps .evaluationCard .value {
    width: 39px;
    text-align: center;
}


#evaluationsCard .evaluation {
    width: 100%;
    margin-top: 5px;
}

#evaluationsCard .evaluation:first-child {
    margin-top: 0px;
}

#evaluationsCard .evaluation div input {
    width: 100%;
    height: 39px;
    font-size: 16px;
    background-color: transparent;
}

#evaluationsCard .evaluation .name {
    float: left;
    width: calc(100% - 44px);
}

#evaluationsCard .evaluation .name input {
    text-align: left;
    /* font-weight: 600; */
    background-color: #efefef;
    text-transform: uppercase;
}

#evaluationsCard .evaluation .value {
    float: right;
    width: 39px;
    height: 39px;
    border-radius: 3px;
    background-color: #b7b7b7;
}

#evaluationsCard .evaluation .value input {
    text-align: center;
    font-weight: 600;
    color: white;
    background-color: transparent;
    text-transform: uppercase;
}

#evaluationsCard .evaluation .value input:focus {
    background-color: rgba(0, 0, 0, .3);
}

#evaluationsCard .popupHelpText {
    text-align: right;
    margin-bottom: 0px;
    margin-top: 5px;
}




.camps .sessionCard .table {
    display: table;
    width: 100%;
    margin-bottom: 5px;
    text-transform: uppercase;
    position: relative;
    color: white;
}

.camps .sessionCard .cell {
    display: table-cell;
    height: 39px;
    vertical-align: middle;
    text-align: left;
    border-radius: 3px;
    background-color: rgba(var(--mainColor), 1);
    cursor: default;
}

.camps .sessionCard .name {
    padding: 10px;
    box-sizing: border-box;
}

.camps .sessionCard .margin {
    width: 5px;
    background-color: white;
}

.camps .sessionCard .value {
    width: 39px;
    text-align: center;
}

.camps .sessionCard .description {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 0px 5px 0px;
    background-color: #efefef;
    color: #333;
    margin-bottom: 5px;
}

.camps p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    word-wrap: break-word;
    overflow-wrap: anywhere;    

}

.camps .sessionCard .description > p,
.camps .children > p {
    display: block;
    margin-block-start: 10px;
    margin-block-end: 5px;
    margin-inline-start: 10px;
    margin-inline-end: 10px;
    word-wrap: break-word;
    overflow-wrap: anywhere;   
}

.camps .sessionCard .description > p {
    margin-block-start: 3px;
}

.camps #sessionCard .session {
    width: 100%;
    margin-top: 5px;
}

.camps #sessionCard .session:first-child {
    margin-top: 0px;
}

.camps #sessionCard .session div input {
    width: 100%;
    height: 39px;
    font-size: 16px;
    background-color: transparent;
}

.camps #sessionCard .session .name {
    float: left;
    width: calc(100% - 44px);
}

.camps #sessionCard .session .name input {
    text-align: left;
    /* font-weight: 600; */
    /* background-color: #efefef; */
    background-color: rgba(var(--mainColor), 1);
    color: white;
    text-transform: uppercase;
}

.camps #sessionCard .session .value {
    float: right;
    width: 39px;
    height: 39px;
    border-radius: 3px;
    background-color: #b7b7b7;
}

.camps #sessionCard .session .value input {
    text-align: center;
    font-weight: 600;
    color: white;
    background-color: transparent;
    text-transform: uppercase;
}

.camps #sessionCard .session .value input:focus {
    background-color: rgba(0, 0, 0, .3);
}

.camps #sessionCard .popupHelpText {
    text-align: right;
    margin-bottom: 0px;
    margin-top: 5px;
}

.camps #sessionCard .session .description {
    width: 100%;
    height: 39px;
    border-radius: 3px;
    background-color: #efefef;
    margin-bottom: 10px;
}

.camps #sessionCard .session .description input {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    color: black;
    background-color: transparent;
}


.camps .chooseEditSession {
    padding-bottom: 10px;
    border-bottom: 1px solid #D6DCDF;
    margin-bottom: 10px;
}

.camps .chooseEditSession .popupHelpText {
    margin-bottom: 5px;
}

.camps.printContent {
    min-width: 600px;
    max-width: 900px;
    position: absolute;
    background-color: white;
    box-sizing: border-box;  
    margin: 0 auto;
}

.camps .printBox {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.camps .printBox .blackLogo {
    /* filter: invert(70%)
         sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);  */
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
    margin-right: 15px;
}

.camps .printBox .blackLogoCard {
    /* filter: invert(70%)
         sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);  */
    width: 120px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
    margin-right: 15px;
}


.camps .printBox .header,
.camps .printBox .headline {
    font-size: 16px;
    text-transform: uppercase;
    color: black;
    margin-bottom: 5px;
    font-weight: 600;
}

.camps .printBox .header {
    font-size: 24px;
    padding-top: 15px;
}


.camps .printBox p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    /* overflow-wrap: anywhere;
    word-break: break-all; */
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.camps .printEvaluation .table {
    display: table;
    width: 100%;
    margin-top: 10px;
}

.camps .printEvaluation .cell {
    display: table-cell;
    height: 39px;
    vertical-align: middle;
    text-align: left;
    background-color: rgba(214, 220, 223, 1);
    border-radius: 3px;
}

.camps .printEvaluation .top {
    color: white;
    text-transform: uppercase;
    background-color: rgba(var(--mainColor), 1);
    padding: 10px;
    box-sizing: border-box;
}

.camps .printEvaluation .name {
    padding: 10px;
    box-sizing: border-box;
}

.camps .printEvaluation .margin {
    width: 5px;
    background-color: white;
}

.camps .printEvaluation .value {
    width: 39px;
    text-align: center;
    background-color: rgba(var(--mainColor), 1);
    color: white;
}

.camps .printCard {
    position: relative;
    padding: 0px !important;
}

.camps .printCard .table {
    display: table;
    width: 100%;
}

.camps .printCard .table .cell {
    display: table-cell;
}

.camps .printCard .table .cell.photo {
    vertical-align: top;
    text-align: center;
    width: 130px;
    height: 130px;
    position: relative;
}

.camps .printCard .table .cell.margin {
    width: 10px;
    background-color: transparent;
}

.camps .printCard .playerPhoto,
.camps .printCard .playerPhoto.border,
.camps .printCard .playerPhoto.club,
.camps .printCard .playerPhoto.clear {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* background-color: rgba(var(--mainColor), 1); */
}

.camps .printCard .playerPhoto.club {
    background-size: contain;
    background-color: transparent;
    border: none;
}

.camps .printCard .playerPhoto.border {
    border: 2px solid rgba(var(--mainColor), 1);
    background-image: none;
    background-color: transparent;
}

.camps .printCard .playerPhoto.clear {
    border: none;
    background-image: none;
    background-color: transparent;
}


.camps .printCard .name {
    font-size: 16px;
    font-weight: 800;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.camps .printCard .info {
    font-size: 16px;
    margin-bottom: 3px;
}

.camps .printCard .info span {
    font-weight: 800;
}

.camps .printEvaluationCard .table {
    display: table;
    width: 100%;
    text-transform: uppercase;
    position: relative;
    cursor: default;
    box-sizing: border-box;
    color: rgba(var(--mainColor), 1);
    font-size: 18px;
    font-weight: 800;
}

.camps .printEvaluationCard .row {
    display: table-row;
}

.camps .printEvaluationCard .cell {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    border: 0;
    box-sizing: border-box;
    height: 39px;
}

.camps .printEvaluationCard .cell.name {
    padding: 0px;
    box-sizing: border-box;
    width: 40px;

}

.camps .printEvaluationCard .cell.margin {
    width: 5px;
    background-color: white;    
}

.camps .printEvaluationCard .cell.margin.line {
    width: 1px;
    border-left: solid 1px rgba(var(--mainColor), 1);
}

.camps .printEvaluationCard .cell.value {
    width: 39px;
    text-align: center;
}


.camps .playerCardBox {
    position: relative;
    margin: 50px auto 0px auto;
    max-width: 90%;
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.camps .playerCardBox .table {
    display: table;
    width: 100%;
}

.camps .playerCardBox .table .row {
    display: table-row;
}

.camps .playerCardBox .table .cell {
    display: table-cell;
    vertical-align: top;
    box-sizing: border-box;
    border: none;
    /* border-bottom: 15px solid transparent; */
}

.camps .playerCardBox .table .cell.margin {
    width: 10px;
    background-color: transparent;
}


.camps .playerCardBox .header,
.camps .playerCardBox .subheader {
    width: 100%;
    text-align: center;
    font-size: 24px;
    padding-top: 50px;
    padding-bottom: 15px;
    font-weight: 800;
    color: rgba(var(--mainColor), 1);
    position: relative;
    text-transform: uppercase;
}

.camps .playerCardBox .subheader {
    font-size: 18px;
    padding-top: 30px;
    border-bottom: 2px solid rgba(var(--mainColor), 1);
    margin-bottom: 15px;
}

.camps .playerCardBox .photo,
.camps .playerCardBox .club {
    position: relative;
    height: 130px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: rgba(var(--mainColor), 1);
    border: none;
    text-align: center;
}

.camps .playerCardBox .club {
    background-color: transparent !important;
}

.camps .playerCardBox .clear {
    background-color: transparent !important;
}

.camps .playerCardBox .border {
    border: 2px solid rgba(var(--mainColor), 1) !important;
    background-color: transparent !important;
}

/* .playerCardBox svg path,
.svgblack {
    fill: black;
    color: black;
    background-color: #848484;
  } */

  .camps .wrapping {
    display: table; 
    width:100%;
    margin: 0;
  }

  .camps .wrapping > div { 
    display: table-cell;
  }
  
  .camps .wrapping > div.clubs {
    width: 40px;
  }

  .camps .wrapping > div .select {
    display: block;
    width: 40px;
  } 

  .camps .invitedPlayers {
    margin-top: 15px;
    margin-left: 10px;
    display: block;  
    font-weight: 400;  
  }

  .camps .invitedPlayers span {
    font-weight: 800;
    padding-left: 5px;
  }

.camps .checkcol {
    width: 25px;
    text-align: left;
}

.option.select-hr { 
    border-bottom: 1px dotted #000; 
}

.camps .notpublished {
    color: red;
    text-align: center;
    font-style: italic;
    font-size: 12px;
    display: block;
    text-transform: uppercase;
    padding-top: 12px;
}


#imagePopupOverlayList {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, .7);
    z-index: 1000010;
}

#imagePopupList {
    width: calc(100% - 200px);
    width: calc(90% - 200px);
    /* max-width: calc(80% - 100px); */
    height: calc(100vh - 150px);
    height: calc(90vh - 150px);
    z-index: 1000011;
    /* background-color: rgba(var(--secondaryColor), 0.8); */
    /* background-color: #333; */

    white-space: nowrap;
    margin: auto;
    position: absolute;
    top: 50px;
    left: 50px;
    bottom: 0;
    right: 0;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-color: rgba(var(--mainColor), 1)  rgba(var(--secondaryColor), 1);
    scrollbar-width: thin;

    transition: all .2s;
}

#imagePopupList .imagePopupDiv {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#imagePopupArrowLeft,
#imagePopupArrowRight {
    width: 50px;
    height: 50px;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1000012;
    opacity: 0;
}

#imagePopupArrowLeft {
    left: 15px;
}

#imagePopupArrowRight {
    right: 15px;
}

#imagePopupArrowLeft:after,
#imagePopupArrowRight:after {
    content: "\f359";
    font-family: "Font Awesome 5 Pro";
    font-size: 50px;
    color: white;
    font-weight: 400;
    display: block;
    transition: all .3s;
}

#imagePopupArrowRight:after {
    content: "\f35a";
}


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: rgba(var(--secondaryColor), 1);
}
  
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(var(--mainColor), .7);
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--mainColor), 1);
}



.camps .btnapprove {
    background-color: rgba(52, 199, 89, 1);
    border: 1px solid transparent;
    border-radius: 3px;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    transition: all .2s;
    background-size: auto 0px;
    background-repeat: no-repeat;
    background-position: center right 25px;
    position: relative;

    display: none;
    height: 20px;
    width: 20px;
    margin-left: 5px;
    box-sizing: border-box;
    vertical-align: sub;
}

.camps .btnapprove:hover {
    background-color: rgba(52, 199, 89, .8);
}

.camps .btnapprove.notApproved {
    display: inline-block;
}

.camps .btnapprove:after {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 13px;
    color: white;
    font-weight: 300;
    top: calc(50% - 6px);
    left: calc(50% - 5px);
}

.camps.popupOverlayBlock {
    background-color: transparent;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.templateSheet {
    display: inline-block;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    color: rgba(var(--mainColor), .8);
    margin-top: 16px;
}

.templateSheet:hover {
    text-decoration: underline;
    color: rgba(var(--mainColor), 1);
}