/* 

    I ADDED THIS TO CLEAN UNUSED CSS AS WELL AS KEEP MY
    CUSTOM CSS IN ONE PLACE NOT ON THE PAGES.

*/



/*
    _________________________________________________________HEADER CUSTOM CSS
*/

	:root {
		
		
	    --color: #0A62C5;
	    
	    
	    	--color-text: white;
	    
	    
	    
	    
	    	--color-secondary: #212121;
	    	
		    
		    	--color-secondary-text: white;
		    
		
		
		
		
			--color-sidebar-menu: #0A62C5;
			
			
		    
		    	--color-sidebar-menu-text: white;
		    
			
		
	}
	
	
	
	
	
		body{
			background: url("../images/BackgroundTables.png") no-repeat center center fixed !important; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
	
	
	
	
		header .header-bkgrd.with-header-image{
			background-image: url('../images/BCAPL_LOGO_125_125.png');
			width: 100%;
            height: auto;
		}
	
		
       /* ___________________________________________________INDEX PAGE CSS
    */
    .icon-balls {
        vertical-align:middle;
        width:40px;
        height:40px;
    }
    
    .title {
        text-align: center; 
    }
    
    .sch-png > img {
        width: 100%;
        height: 80%;
    }
    
    button.blueSub {
        resize:auto;
        color: white;
        min-width:40%;
        height:35px;
        padding: 12px 10px;
        margin: 10px 8px 10px 0;
        line-height:2px;
        box-sizing: border-box;
        border: 2px solid black;
        border-color:#0A62C5;
        border-radius:6px;
        background-color:#0A62C5;
        text-transform: uppercase;
        font-weight: bold;
        
    }
    
    button.blueSub:hover {
        background-color: #499af5;
        border-color: #0A62C5;
        border-radius: 6px;
    }
    
    textarea.conSub {
        resize: none;
        min-width:50%;
        border: 1px solid gray;
        border-radius:6px; 
        font-size: 18px;
        text-indent: 10px;
    }
    
    .bulletin {
        background-color: #ffcccb;
        text-align: center;
        border-radius: 6px;
    }
    
    .bulletin > select {
        border: 1px solid gray;
        border-radius: 6px;
    }
    
    .flex > select {
        border: 1px solid gray;
        border-radius: 6px;
        width: 20%;
        max-width: 60%;
        box-shadow: 2px 2px 5px;
    }
    
    .subForm {
        text-align: center;
        width:100%;
        height: 100%;
    }
    
    .columnCU {
        float: left;
        width: 30%;
        text-align: left;
        margin-left: 10%;
    }
    
    .column2 {
        float: left;
        width: 30%;
        text-align: left;
    }
    
    .column3 {
        float: left;
        width: 30%;
        text-align: left;
    }
    
    .column-aDivisions {
        margin-left: 45%;
        width: 10%;
        text-align: center;
        
    }
    
    .column-inputs {
        width: 60%;
        text-align: center;
    }
    
    .c-i-Label {
        font-family: 'Varela Round', sans-serif;
        font-weight: 700;
        color: var(--color);
        font-size: 20px;
        position: relative;
        top: 5px;
        transform: rotate(-45deg);
        z-index:1;
        text-align: left;
        background-color: transparent;
        /*margin-left: -40px;
        /*text-indent: -30px;*/
    }
    
    .dwn-prnt {
        text-align: center;
    }
    
    .inputs-boxes {
        border: 1px solid gray;
        border-radius: 6px;
        position: relative;
        min-width: 70%;
        /*margin-left:5px;*/
        line-height: 2em;
        text-indent: 10px;
    }
    
    .login-form {
        
    }
    
    .login-form > input {
        height: 25px;
        border-radius: 6px;
        margin: 2px 2px 2px 2px;
        text-indent: 10px;
    }
    
    
    
/* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .phone {
        margin-left: 1em;
        list-style-image:url('https://www.teamhustlebball.org/images/phone_icon_20.png') !important;  
    }
    .email {
        margin-left: 1em;
        list-style-image:url('https://www.teamhustlebball.org/images/email_icon_20.png') !important; 
    }
    .location {
        margin-left: 1em;
        list-style-image:url('https://www.teamhustlebball.org/images/location_icon_20.png') !important; 
    }
    .name {
        margin-left: 1em;
        list-style-image:url('https://www.teamhustlebball.org/images/person_icon_20.png') !important; 
    }
    .fb {
        display:inline;
        list-style-image:url('https://www.teamhustlebball.org/images/facebook_f_icon_60.png') !important;
    }
    .contact {
        list-style-type: none !important;
    }
    
    .confirmList {
        list-style-type: none !important;
        text-align: center;
    }
    
    .check-round {
        position: relative;
    }

    .check-round label {
        background-color: White;
        border: 4px solid #0A62C5;
        border-radius: 50%;
        cursor: pointer;
        height: 25px;
        left: -10px;
        position: absolute;
        top: -4px;
        width: 25px;
    }

    .check-round label:after {
        border: 2px solid white;
        border-top: none;
        border-right: none;
        content: "";
        height: 5px;
        left: 0px;
        opacity: 0;
        position: absolute;
        top: 4px;
        transform: rotate(-45deg);
        width: 15px;
    }

    .check-round input[type="checkbox"] {
        visibility: hidden;
    }

    .check-round input[type="checkbox"]:checked + label {
        background-color: #0A62C5;
        border-color: #0A62C5;
    }

    .check-round input[type="checkbox"]:checked + label:after {
        opacity: 1;
    }
    
    .opt-in {
        text-align:center;
        /*margin-left: 18%;*/
        width: 50%;
        font-size:16px ;
    }
    
    /* Popup container */
    .confirmDivisions {
        width: 100%;
        position: relative;
        display: inline-block;
        
    }
    
/* The actual popup (appears on top) */
    .confirmDivisions .confirmText {
        visibility: hidden;
        max-width: 90%;
        min-height: 10em;
        resize: auto;
        background-color: #F4F8FA;
        color: #88888;
        text-align: center;
        border-radius: 6px;
        box-shadow: 20px 20px 50px 15px #0A62C5;
        padding: 8px 0;
        position: absolute;
        z-index: 2;
        margin-left: 5%;
    }

/* Popup arrow */
    .confirmDivisions .confirmText::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

/* Toggle this class when clicking on the popup container (hide and show the popup) */
    .confirmDivisions .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }
    
    .values {
        color: black;
        font-size: 20px;
        font-weight:bold;
        z-index: 2;
    }
/*  START OF POPUP DIV CSS FOR CONFIRM DIVISIONS POPUP */

/* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
    }
    
/* Popup container */
    .optintext {
        position: relative;
        display: inline-block;
        
    }
    
/* The actual popup (appears on top) */
    .optintext .opt-in-text {
        visibility: hidden;
        min-width: 25%;
        min-height: 2em;
        resize: auto;
        background-color: yellow;
        color: #88888;
        text-align: center;
        border-radius: 6px;
        /*box-shadow: 20px 20px 50px 15px #0A62C5;*/
        padding: 8px 8px;
        position: absolute;
        z-index: 1;
        top: -2.75em;
        left: -5.49em;
        
        
    }

/* Popup arrow */
    .optintext .opt-in-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 25%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: yellow transparent transparent transparent;
    }

/* Toggle this class when clicking on the popup container (hide and show the popup) */
    .optintext .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }
/*  START OF POPUP DIV CSS FOR CONFIRM DIVISIONS POPUP */

/* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
    }
    
/*      MOBILE ADJUSTMENTS START        */    
    
@media screen and (max-width: 1200px) {

/* The actual popup (appears on top) */
    .confirmDivisions .confirmText {
        width: 100%;
        left: 0%;
    }
}
/*  ABOVE ALL GOOD  */

@media screen and (max-width: 900px) {
    
    .optintext {
        width:100%;
    }
    
    /* The actual popup (appears on top) */
    .optintext .opt-in-text {
        
        height:25px;
        min-width: 30%;
        left: -4%;
        bottom:10%;
        top:-37px;
        
        
    }
    .optintext .opt-in-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left:10%;
        right:98%;
    }
}

@media screen and (max-width: 768px) {
    .documents-container {
        text-align: center;
        padding-right: 15%;
        /*width: 100%;*/
    }
    
    .blueSub {
        width:90%;
    }
    .column {
        width: 45%;
    }
    .column2 {
        width: 45%;
    }
    
    .column3 {
        width: 100%;
        margin-left:35%;
    }
    
    .column-inputs {
        display:block;
        width:100%;
        text-align: center;
        margin-left: 0;
        
    }
    
    .c-i-Label {
       text-align: center;
    }
    
    textarea.conSub {
        width: 90%;
    }
    
    .opt-in {
        width:90%;
        margin-left: 6%;
    }
    
    .opt-in-checkbox {
        width:1.2em ;
        height:1.5em ;
        top: .21em;
    }

    .optintext {
        width:100%;
    }
    
    /* The actual popup (appears on top) */
    .optintext .opt-in-text {
        height:25px;
        min-width: 70%;
        bottom: 10%;
        top: -37px;
        
        
    }
    .optintext .opt-in-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left:6%;
        right:94%;
        
    }
    .inputs-boxes {
        min-width: 90%;
    }
}
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        margin-left:30%;
    }
    .column2 {
        width: 100%;
        margin-left:30%;
    }
    
    .column3 {
        width: 100%;
        margin-left: 30%;
    }
    
    .column-aDivisions {
        width: 20%;
        margin-left: 30%;
    }
    .inputs-boxes {
        min-width: 90%;
    }
}

@media screen and (max-width: 500px) {
    
    .column {
        width: 100%;
        margin-left:20%;
    }
    .column2 {
        width: 100%;
        margin-left:20%;
    }
    
    .column3 {
        width: 100%;
        margin-left: 20%;
    }
    
    .column-aDivisions {
        width: 35%;
        margin-left: 20%;
    }
    
    .column-inputs {
        width: 100%;
    }
    
    .inputs-boxes {
        min-width: 90%;
    }
    
}