@media only screen and (max-width: 990px){

        .registry-help > div.right{ 
            width: 100%;
            padding-bottom:25px;
            flex-direction: row-reverse;
        }

        .registry-help > div.left{ 
            width: 100%;
            /*padding:25px;*/
            padding-right:0;
            flex-direction: row-reverse;
        }

        .registry-help,.home-dash-help{
            flex-direction: column-reverse;
        }

        .logo-management-wrap > div{ 
            width: 100%;
            padding:25px;
        }

        .login-content{
            min-height:317px;
        }

        .splash-login {
            width: 65% !important;
        }

    }

    @media only screen and (max-width: 414px){
        .panel{
            padding:0;
            /*padding-top:58px;*/
        }
        
    }

    @media (max-width: 1024px){ 
        .page-header-fixed{
            padding-top: 50px;
        }
    }

    @media only screen and (min-width: 1041px){
        .quick-search{
            margin-left:10px;
        }
    }

    @media only screen and (max-width: 320px) and (min-width: 320px){
        .panel{
            padding-top:0px !important;
        }
    }

    @media (max-width: 767px){
        .navbar-header{
            height: 105px !important;
        }
        
        .header .navbar-toggle{
            float: left;
        }
    }

    @media only screen and (max-width: 1024px) and (min-width: 319px){
        .home-dash-help > div{ 
            width: 100%;
            padding-bottom:5px;
        }

        .home-dash > div{
            width: 100%;
            margin: 10px;
            padding-top:5px;
            padding-bottom:5px;
            border-radius: 25px;
            text-align: center;
            background: #C5E4E6;
            border-color: #C5E4E6 !important;
            cursor: pointer;
            margin-right:0;
            margin-left:0;
        }

        .col{
            flex-basis:100%;
            flex-grow: 0;
        }

        h2{
            font-size: 16px !important;
        }

        .home-dash-help{
            padding:0;
           /* margin-top:10px;*/
        }

        #search-b-case{
            padding-top:5px;
        }

        .quicklink-dash>div{
            width:calc(50% - 10px);
        }

    } 

    @media (max-width:991px){
        footer{
            height:100px;
            padding-top:10px;
        } 
        
        .footer-link{
            list-style:none;
            
            padding-bottom:10px; 
        }
            
    } 
        
    @media (max-width:766px){ 
        #splash-search-image,#splash-profile-image,#splash-help-image,#splash-overview-image,#splash-resource-image, #splash-faq-image { 
            background-image:none;
            padding-left:10px;
        }
        .search-image { 
            display:none;
        }
        .splash-participants-img,.splash-instructors-img,.splash-trainings-img { 
            width:75px;
            height:auto;
        }
     
        .pb-3 {
            padding-bottom: 7px !important;
            padding-top: 7px !important;
        }
        .panel-body hr {
            display:none;
        }
        .row>[class^=col-] {
            padding-left: 5px;
            padding-right: 5px;
        }
    } 
    
    @media (max-width:767px){ 
        #header-showcase-contact{
            display:none;
        }

        .panel{
            padding-top: 0px;
            margin-top: 0;
        }

        .pt-2 {
            padding-top: 0px !important;
        }
        
        .panel-body{
            padding: 0px;
        }

        .btn-primary { width:96%; }

        
    }

    @media only screen and (max-width:400px){
        #resourceBannerBox{
            height: 60px !important;
        }

    }

    @media only screen and (max-width:307px){
        #resourceBannerBox{
            height: 80px !important;
        }

        .registryResourceButton{
            height: 51px;
        }

        .panel{
            padding-top: 100px;
        }
    }

    @media only screen and (max-width:291px){
        #resourceBannerBox{
            height: 140px !important;
        }
    }

    @media (min-width:700px){ 
        .buttons-csv {
            display: block;   
        }
    }

    @media (min-width:411px){
        .search-image {
            width:20%;
            height:85px;
        } 
        .splash-participants-img,.splash-instructors-img,.splash-trainings-img { 
            width:75px;
            height:auto;
        }  
    }

    @media (min-width:784px){

        #splash-faq-image, #splash-resource-image, #splash-overview-image, #splash-help-image, #splash-profile-image, #splash-search-image { 
            width:95px;
            width:100%;
            height:85px;
        }  
    }

    @media (max-width: 767px){
        .table-responsive .table>tbody>tr>td, .table-responsive .table>tbody>tr>th, .table-responsive .table>tfoot>tr>td, .table-responsive .table>tfoot>tr>th, .table-responsive .table>thead>tr>td, .table-responsive .table>thead>tr>th {
            white-space: normal !important;
        }

	    .dt-buttons.btn-group>.btn {
            border-radius: 50px !important;
        }
        
    }

     @media (max-width: 600px){
        .mobilewrapper{
            width:100%!important; 
            height:auto!important;
        }

        .table>tbody>tr>td{
            border-top: 0 !important;
        }

        /*.table>tbody>tr{
            border-top: 1px solid #dee2e6 !important;
        }*/

        .colsplit{
            width:100%!important; 
            float:left!important; 
            display:block!important;
        }
    } 

    @media (min-width: 1025px){
        .profile-complete{
            max-width: 55%;
        }
    }



    @media only screen and (max-width: 1210px){ 
        .force-col-12{
            min-width: 96%;
        }
    }

    @media only screen and (max-width: 1402px){ 
        .force-col-4{
            min-width: 33.33333333%;
        }
    }

    @media only screen and (max-width: 915px){ 
        .force-col-6{
            min-width: 50%;
        }
    }

    


    /*Form Table Responsive*/
    @media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
		.stackable-table table, .stackable-table thead, .stackable-table tbody, .stackable-table th, .stackable-table td, .stackable-table tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.stackable-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .stackable-table tr {
            margin: 0 0 1rem 0;
            
        }

        .stackable-table td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .stackable-table td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        #courseDetails td:nth-of-type(1):before { content: "Stipend/Reimbursement Type"; font-weight: bold; color: #242a30;}
		#courseDetails td:nth-of-type(2):before { content: "Institution/Organization Name"; font-weight: bold; color: #242a30;}
		#courseDetails td:nth-of-type(3):before { content: "Units Enrolled/Completed"; font-weight: bold; color: #242a30;}
		#courseDetails td:nth-of-type(4):before { content: "Unit Type"; font-weight: bold; color: #242a30;}
        #courseDetails td:nth-of-type(5):before { content: "Student ID (College/University Only)"; font-weight: bold; color: #242a30;}

        /* Force table to not be like tables anymore */
		.stackable-table table, .stackable-table thead, .stackable-table tbody, .stackable-table th, .stackable-table td, .stackable-table tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.stackable-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .stackable-table tr {
            margin: 0 0 1rem 0;
            
        }

        .stackable-table td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .stackable-table td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .stackable-table, .noMargin tr {
            margin: 0 0 0 0;
            
        }

        #resource-category td:nth-of-type(1):before { content: "Category:"; font-weight: bold; color: #242a30;}
        #resource-category td:nth-of-type(2):before { content: "Spanish:"; font-weight: bold; color: #242a30;}
        #resource-category td:nth-of-type(3):before { content: "Cantonese:"; font-weight: bold; color: #242a30;}

        #instructor-access-summary{ display:none;}

        #instructor-access-summary td:nth-of-type(1):before { content: "Type of Business:"; font-weight: bold; color: #242a30;}
        #instructor-access-summary td:nth-of-type(2):before { content: "Role:"; font-weight: bold; color: #242a30;}
        #instructor-access-summary td:nth-of-type(3):before { content: "Documentation Option 1:"; font-weight: bold; color: #242a30;}
        #instructor-access-summary td:nth-of-type(4):before { content: "Documentation Option 2:"; font-weight: bold; color: #242a30;}
        #instructor-access-summary td:nth-of-type(5):before { content: "Method of Delivery: "; font-weight: bold; color: #242a30;}

        #instructor-access-summary tr:nth-of-type(1) td:nth-of-type(3):after { white-space: pre-wrap; content: "Child Development Only: \A Registry Staff will use Administrator of Record* as reported by Department of Social Services (DSS) - Community Care Licensing (CCL). \A \A For multi-site administrators, please submit a list of facilities, include CCL name of facility, license number, and address."; color: #242a30;height:150px !important;}
        #instructor-access-summary tr:nth-of-type(2) td:nth-of-type(3):after { white-space: pre-wrap; content: "Child Development Only: \A Registry Staff will use Administrator of Record* as reported by Department of Social Services (DSS) - Community Care Licensing (CCL). \A \A For multi-site administrators, please submit a list of facilities, include CCL name of facility, license number, and address."; color: #242a30;height:150px !important;}
        #instructor-access-summary tr:nth-of-type(4) td:nth-of-type(3):after { white-space: pre-wrap; content: "Child Development Only: \A Registry Staff will use Administrator of Record* as reported by Department of Social Services (DSS) - Community Care Licensing (CCL). \A \A For multi-site administrators, please submit a list of facilities, include CCL name of facility, license number, and address."; color: #242a30;height:150px !important;}

        #instructor-access-summary tr:nth-of-type(1) td:nth-of-type(5):after { white-space: pre-wrap; content: "\A Upload Administrative Access authorization document to each profile for which Administrative Access is requested, email or mail (see below)."; color: #242a30;}
        #instructor-access-summary tr:nth-of-type(2) td:nth-of-type(5):after { white-space: pre-wrap; content: "\A Upload Administrative Access authorization document to each profile for which Administrative Access is requested, email or mail (see below)."; color: #242a30;}
        #instructor-access-summary tr:nth-of-type(2) td:nth-of-type(5) { padding-top: 0px !important; }
        #instructor-access-summary tr:nth-of-type(4) td:nth-of-type(5):after { white-space: pre-wrap; content: "\A Upload Administrative Access authorization document to each profile for which Administrative Access is requested, email or mail (see below)."; color: #242a30;}
        #instructor-access-summary tr:nth-of-type(5) td:nth-of-type(5):after { white-space: pre-wrap; content: "\A Upload Administrative Access authorization document to each profile for which Administrative Access is requested, email or mail (see below)."; color: #242a30;}
        #instructor-access-summary tr:nth-of-type(6) td:nth-of-type(5):after { white-space: pre-wrap; content: "\A Upload Administrative Access authorization document to each profile for which Administrative Access is requested, email or mail (see below)."; color: #242a30;}
        #instructor-access-summary tr:nth-of-type(7) td:nth-of-type(5):after { white-space: pre-wrap; content: "\A Upload Administrative Access authorization document to each profile for which Administrative Access is requested, email or mail (see below)."; color: #242a30;}

        #instructor-access-summary td:nth-of-type(1){ word-wrap:break-word; border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#DAEEF4;padding-top:.5em !important;}
        #instructor-access-summary td:nth-of-type(2){ word-wrap:break-word; border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;}
        #instructor-access-summary td:nth-of-type(3){ word-wrap:break-word; border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;}
        #instructor-access-summary td:nth-of-type(4){ word-wrap:break-word; border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;}
        #instructor-access-summary td:nth-of-type(5){ word-wrap:break-word; border-top:1px solid black;border-bottom:1px solid black !important;border-right:1px solid black;border-left:1px solid black;}

        #participantConsolidation td:nth-of-type(1):before { content: "Record to Delete"; font-weight: bold; color: #242a30;}
        #participantConsolidation td:nth-of-type(2):before { content: "Check to Move"; font-weight: bold; color: #242a30;}
        #participantConsolidation td:nth-of-type(3):before { content: "Record to Keep"; font-weight: bold; color: #242a30;}

        #participantConsolidation .form-check-input{ position:relative !important;}

        #licenseList td:nth-of-type(1):before { content: "Number"; font-weight: bold; color: #242a30;}
		#licenseList td:nth-of-type(2):before { content: "Date"; font-weight: bold; color: #242a30;}
		#licenseList td:nth-of-type(3):before { content: "Type"; font-weight: bold; color: #242a30;}
		#licenseList td:nth-of-type(4):before { content: "Capacity"; font-weight: bold; color: #242a30;}
        #licenseList td:nth-of-type(5):before { content: "Status"; font-weight: bold; color: #242a30;}
        #licenseList td:nth-of-type(6):before { content: "";}

        #accreditationList td:nth-of-type(1):before { content: "Type"; font-weight: bold; color: #242a30;}
		#accreditationList td:nth-of-type(2):before { content: "Start Date"; font-weight: bold; color: #242a30;}
		#accreditationList td:nth-of-type(3):before { content: "End Date"; font-weight: bold; color: #242a30;}
		#accreditationList td:nth-of-type(4):before { content: "Status"; font-weight: bold; color: #242a30;}
        #accreditationList td:nth-of-type(5):before { content: "";}

        #degreeList td:nth-of-type(1):before { content: ""; }
        #degreeList td:nth-of-type(2):before { content: "Degree Name"; font-weight: bold; color: #242a30;}
		#degreeList td:nth-of-type(3):before { content: "Institution"; font-weight: bold; color: #242a30;}
		#degreeList td:nth-of-type(4):before { content: "Degree Type"; font-weight: bold; color: #242a30;}
		#degreeList td:nth-of-type(5):before { content: "Degree Level"; font-weight: bold; color: #242a30;}

        #courseList td:nth-of-type(1):before { content: "";}
        #courseList td:nth-of-type(2):before { content: "Course No."; font-weight: bold; color: #242a30;}
		#courseList td:nth-of-type(3):before { content: "Course Name"; font-weight: bold; color: #242a30;}
		#courseList td:nth-of-type(4):before { content: "Year/Semester"; font-weight: bold; color: #242a30;}
		#courseList td:nth-of-type(5):before { content: "Institution"; font-weight: bold; color: #242a30;}
        #courseList td:nth-of-type(6):before { content: "Units"; font-weight: bold; color: #242a30;}
        #courseList td:nth-of-type(7):before { content: "Unit Type"; font-weight: bold; color: #242a30;}
        #courseList td:nth-of-type(8):before { content: "Content Type"; font-weight: bold; color: #242a30;}
        #courseList td:nth-of-type(9):before { content: "Grade"; font-weight: bold; color: #242a30;}

        #credentialList td:nth-of-type(1):before { content: "";}
        #credentialList td:nth-of-type(2):before { content: "Credential Name"; font-weight: bold; color: #242a30;}
		#credentialList td:nth-of-type(3):before { content: "Document Number"; font-weight: bold; color: #242a30;}
		#credentialList td:nth-of-type(4):before { content: "Award Date"; font-weight: bold; color: #242a30;}
		#credentialList td:nth-of-type(5):before { content: "Expiration Date"; font-weight: bold; color: #242a30;}

        #permitList td:nth-of-type(1):before { content: "";}
        #permitList td:nth-of-type(2):before { content: "Permit Name"; font-weight: bold; color: #242a30;}
		#permitList td:nth-of-type(3):before { content: "Document Number"; font-weight: bold; color: #242a30;}
		#permitList td:nth-of-type(4):before { content: "Award Date"; font-weight: bold; color: #242a30;}
		#permitList td:nth-of-type(5):before { content: "Expiration Date"; font-weight: bold; color: #242a30;}

        #trainingList td:nth-of-type(1):before { content: "";}
        #trainingList td:nth-of-type(2):before { content: "Training Code"; font-weight: bold; color: #242a30;}
		#trainingList td:nth-of-type(3):before { content: "Training Name"; font-weight: bold; color: #242a30;}
		#trainingList td:nth-of-type(4):before { content: "Training Sponsor"; font-weight: bold; color: #242a30;}
		#trainingList td:nth-of-type(5):before { content: "Training Hours Earned"; font-weight: bold; color: #242a30;}
        #trainingList td:nth-of-type(6):before { content: "Completion Date"; font-weight: bold; color: #242a30;}

        #noteList td:nth-of-type(1):before { content: "Date:"; font-weight: bold; text-align:center;}
        #noteList td:nth-of-type(2):before { content: "Author:";font-weight: bold; color: #242a30;}
        #noteList td:nth-of-type(3):before { content: "Note:"; font-weight: bold; color: #242a30;}

        #filemanageList td:nth-of-type(1):before { content: "Role"; font-weight: bold; color: #242a30;}
        #filemanageList td:nth-of-type(2):before { content: "Default Upload Status"; font-weight: bold; color: #242a30;}
		#filemanageList td:nth-of-type(3):before { content: "Can User Change Status"; font-weight: bold; color: #242a30;}
		#filemanageList td:nth-of-type(4):before { content: "Can User Edit"; font-weight: bold; color: #242a30;}
		#filemanageList td:nth-of-type(5):before { content: "Can User Delete"; font-weight: bold; color: #242a30;}
        #filemanageList td:nth-of-type(6):before { content: "Allow User to Hide Document"; font-weight: bold; color: #242a30;}
        
        #adminAccessList td:nth-of-type(1):before { content: "Program ID"; font-weight: bold; color: #242a30;}
        #adminAccessList td:nth-of-type(2):before { content: "Program Name"; font-weight: bold; color: #242a30;}
		#adminAccessList td:nth-of-type(3):before { content: "Address"; font-weight: bold; color: #242a30;}
		#adminAccessList td:nth-of-type(4):before { content: "City"; font-weight: bold; color: #242a30;}
		#adminAccessList td:nth-of-type(5):before { content: "Date Requested"; font-weight: bold; color: #242a30;}
        #adminAccessList td:nth-of-type(6):before { content: "Approve"; font-weight: bold; color: #242a30;}
        #adminAccessList td:nth-of-type(7):before { content: "Deny"; font-weight: bold; color: #242a30;}
        #adminAccessList td:nth-of-type(8):before { content: "Clear"; font-weight: bold; color: #242a30;}

        #jobBoardList td:nth-of-type(1):before { content: "";}
        #jobBoardList td:nth-of-type(2):before { content: "Posting Date"; font-weight: bold; color: #242a30;}
		#jobBoardList td:nth-of-type(3):before { content: "Position"; font-weight: bold; color: #242a30;}
		#jobBoardList td:nth-of-type(4):before { content: "Employer"; font-weight: bold; color: #242a30;}
        #jobBoardList td:nth-of-type(5):before { content: "Status"; font-weight: bold; color: #242a30;}
        
        #trackingList td:nth-of-type(1):before { content: ""; }
        #trackingList td:nth-of-type(2):before { content: "Registry ID"; font-weight: bold; color: #242a30;}
		#trackingList td:nth-of-type(3):before { content: "First Name"; font-weight: bold; color: #242a30;}
		#trackingList td:nth-of-type(4):before { content: "Last Name"; font-weight: bold; color: #242a30;}
        #trackingList td:nth-of-type(5):before { content: "Address"; font-weight: bold; color: #242a30;}

        #initiativeDelList td:nth-of-type(1):before { content: "Registry ID"; font-weight: bold; color: #242a30;}
		#initiativeDelList td:nth-of-type(2):before { content: "First Name"; font-weight: bold; color: #242a30;}
		#initiativeDelList td:nth-of-type(3):before { content: "Last Name"; font-weight: bold; color: #242a30;}
        #initiativeDelList td:nth-of-type(4):before { content: ""; }
        
        #initiativeMainList td:nth-of-type(1):before { content: "Initiative Name"; font-weight: bold; color: #242a30;}
        #initiativeMainList td:nth-of-type(2):before { content: "Start Date"; font-weight: bold; color: #242a30;}
		#initiativeMainList td:nth-of-type(3):before { content: "End Date"; font-weight: bold; color: #242a30;}
		#initiativeMainList td:nth-of-type(4):before { content: "";}
        
        #emailInteractionsViewerToParticipant td:nth-of-type(1):before { content: "Subject \A"; font-weight: bold; color: #242a30; white-space: pre;}
		#emailInteractionsViewerToParticipant td:nth-of-type(2):before { content: "From \A"; font-weight: bold; color: #242a30; white-space: pre;}
		#emailInteractionsViewerToParticipant td:nth-of-type(3):before { content: "Date Sent \A"; font-weight: bold; color: #242a30; white-space: pre;}
       

        #emailInteractionsViewerToParticipant #emailToParticipantMessage td:nth-of-type(1):before { 
            content: "";
        }

        #emailInteractionsViewerFromParticipant td:nth-of-type(1):before { content: "Subject \A"; font-weight: bold; color: #242a30; white-space: pre;}
		#emailInteractionsViewerFromParticipant td:nth-of-type(2):before { content: "From \A"; font-weight: bold; color: #242a30; white-space: pre;}
		#emailInteractionsViewerFromParticipant td:nth-of-type(3):before { content: "Date Sent \A"; font-weight: bold; color: #242a30; white-space: pre;}
       

        #emailInteractionsViewerToParticipant #emailFromParticipantMessage td:nth-of-type(1):before { content: "";}

        #userReceivedMessages td:nth-of-type(1):before { content: "Subject \A"; font-weight: bold; color: #242a30; white-space: pre;}
		#userReceivedMessages td:nth-of-type(2):before { content: "From \A"; font-weight: bold; color: #242a30; white-space: pre;}
        #userReceivedMessages td:nth-of-type(3):before { content: "Date Sent \A"; font-weight: bold; color: #242a30; white-space: pre;}
        #userReceivedMessages td:nth-of-type(4):before { content: "\A"; font-weight: bold; color: #242a30; white-space: pre;}

        #userReceivedMessages #messageUserRecieved td:nth-of-type(1):before { 
            content: "";
        }

        #userReceivedMessages #markAsReadMobile td:nth-of-type(1):before { 
            content: "";
        }

        #userSentMessages td:nth-of-type(1):before { content: "Subject \A"; font-weight: bold; color: #242a30; white-space: pre;}
		#userSentMessages td:nth-of-type(2):before { content: "From \A"; font-weight: bold; color: #242a30; white-space: pre;}
        #userSentMessages td:nth-of-type(3):before { content: "Date Sent \A"; font-weight: bold; color: #242a30; white-space: pre;}
        #userSentMessages td:nth-of-type(4):before { content: "\A"; font-weight: bold; color: #242a30; white-space: pre;}

        #userSentMessages #messageUserSent td:nth-of-type(1):before { 
            content: "";
        }

        #trainingEnrollments td:nth-of-type(1):before { content: "Start Date"; font-weight: bold; color: #242a30;}
        #trainingEnrollments td:nth-of-type(2):before { content: "Training Name"; font-weight: bold; color: #242a30;}
        #trainingEnrollments td:nth-of-type(3):before { content: "Training Sponsor"; font-weight: bold; color: #242a30;}
        #trainingEnrollments td:nth-of-type(4):before { content: "Enrollment Status"; font-weight: bold; color: #242a30;}
        #trainingEnrollments td:nth-of-type(5):before { content: "";}

        #trainingEvaluation td:nth-of-type(1):before { content: "";}
		#trainingEvaluation td:nth-of-type(2):before { content: "Strongly Disagree"; font-weight: bold; color: #242a30;}
		#trainingEvaluation td:nth-of-type(3):before { content: "Disagree"; font-weight: bold; color: #242a30;}
		#trainingEvaluation td:nth-of-type(4):before { content: "Agree"; font-weight: bold; color: #242a30;}
        #trainingEvaluation td:nth-of-type(5):before { content: "Strongly Agree"; font-weight: bold; color: #242a30;}
        #trainingEvaluation td:nth-of-type(6):before { content: "N/A"; font-weight: bold; color: #242a30;}
        
        
    }

    @media (min-width: 1025px){
        #instructor-access-summary{
            border-bottom:1px solid black !important;
        }

        #adminclickhere{ display:none;}
    }

    @media (max-width: 1024px){

        #page-list{ display:none;}
        #page-num{ display:none;}
        #li-first{ display:none;}
        #li-last{ display:none;}
        #tdClear{ display:none;}

    }

    @media (max-width: 375px){
        .menu-divider{display:none;}
    }

    @media (max-width: 416px){
        .inner-header{
            background-image:url(images/splash_logo_background.png) !important; 
        }
        .middle-header {
            border-bottom: 2px solid #408EA4 !important;
        }
        .bottom-header{ 
            margin-top: 185px !important;
        }

        .full-width-phone {
            min-width:98% !important;
        }

        /* .relative-media{ 
            position: relative !important;
        }*/
    }

    @media (max-width: 350px){
        .neg-mt-40{
            margin-top: -40px !important;
        }   
    }

    @media only screen and (max-width: 767px), (max-device-width: 1024px) and (min-device-width: 768px){
        .stackable-table td {
            border-top: none;
            border-bottom: none;
        }
    }

    @media only screen and (max-width: 1223px), (max-device-width: 1024px) and (min-device-width: 768px){
        .documentList td, .documentQrisList td, .documentAdminList td, .employmentList td, .requiredDocList td, .notesList td, .participantDocumentList td {
            border-top: none;
            border-bottom: none;
        }
    }

    @media (max-width: 320px){
        .content{
            padding-top: 140px !important;
        }
    }

    @media (min-width: 330px){
        .p-space{
            margin-right: .5rem!important;
         }

        .r-align{
            text-align:right;
        }

        .l-align{
            text-align:left;
        }
     }

     @media (max-width: 1198px){
        .p-space{
            margin-right: 0rem!important;
         }

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

     @media (max-width: 1218px){
         .c-align{
             text-align:center;
         }
     }

     @media (min-width: 1223px){
        .col-sm-12-p {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    @media (max-width: 1605px){ /* */
        .col-p {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    @media (max-width: 1322px){
        /* Force table to not be like tables anymore */
		.stack-table table, .stack-table thead, .stack-table tbody, .stack-table th, .stack-table td, .stack-table tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.stack-table thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .stack-table tr {
            margin: 0 0 1rem 0;
            
        }

        .stack-table td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .stack-table td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        #licenseList.stack-table td:nth-of-type(1):before { content: "Number"; font-weight: bold; color: #242a30;}
		#licenseList.stack-table td:nth-of-type(2):before { content: "Date"; font-weight: bold; color: #242a30;}
		#licenseList.stack-table td:nth-of-type(3):before { content: "Type"; font-weight: bold; color: #242a30;}
		#licenseList.stack-table td:nth-of-type(4):before { content: "Capacity"; font-weight: bold; color: #242a30;}
        #licenseList.stack-table td:nth-of-type(5):before { content: "Status"; font-weight: bold; color: #242a30;}
        #licenseList.stack-table td:nth-of-type(6):before { content: "";}

        #accreditationList.stack-table td:nth-of-type(1):before { content: "Type"; font-weight: bold; color: #242a30;}
		#accreditationList.stack-table td:nth-of-type(2):before { content: "Start Date"; font-weight: bold; color: #242a30;}
		#accreditationList.stack-table td:nth-of-type(3):before { content: "End Date"; font-weight: bold; color: #242a30;}
		#accreditationList.stack-table td:nth-of-type(4):before { content: "Status"; font-weight: bold; color: #242a30;}
        #accreditationList.stack-table td:nth-of-type(5):before { content: "";}

        #enrollInfo.stack-table td:nth-of-type(1):before { content: "Age Group"; font-weight: bold; color: #242a30;}
		#enrollInfo.stack-table td:nth-of-type(2):before { content: "Half Day Enrollments"; font-weight: bold; color: #242a30;}
        #enrollInfo.stack-table td:nth-of-type(3):before { content: "Full Day Enrollments"; font-weight: bold; color: #242a30;}
        
        #additionalSponsorList.stack-table td:nth-of-type(1):before { content: "First Name"; font-weight: bold; color: #242a30;}
		#additionalSponsorList.stack-table td:nth-of-type(2):before { content: "Last Name"; font-weight: bold; color: #242a30;}
        #additionalSponsorList.stack-table td:nth-of-type(3):before { content: "";}
        
        #programCodeList.stack-table td:nth-of-type(1):before { content: "Code"; font-weight: bold; color: #242a30;}
		#programCodeList.stack-table td:nth-of-type(2):before { content: "Description"; font-weight: bold; color: #242a30;}
        #programCodeList.stack-table td:nth-of-type(3):before { content: "";} 
        
        #programNoteList.stack-table td:nth-of-type(1):before { content: "Date:"; font-weight: bold; text-align:center;}
        #programNoteList.stack-table td:nth-of-type(2):before { content: "Author:";font-weight: bold; color: #242a30;}
        #programNoteList.stack-table td:nth-of-type(3):before { content: "Note:"; font-weight: bold; color: #242a30;}

        
    }

    @media (min-width: 300px){ 
        .covid-cta{
            margin-top:0px !important;
        }
    }

    @media (min-width: 767px){ 
        .covid-cta{
            margin-top:105px !important;
        }
    }

    @media only screen and (max-width: 1641px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
        .requestList table, .requestList thead, .requestList tbody, .requestList th, .requestList td, .requestList tr{
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.requestList thead tr{
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .requestList tr{
            margin: 0 0 1rem 0;
            
        }

        .requestList td{
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .requestList td:before, td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .alloc td:before {
            content: "" !important;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        .requestList, .noMargin tr {
            margin: 0 0 0 0;
            
        }

        #requestList td:nth-of-type(1):before { content: "Request ID"; font-weight: bold; color: #242a30;}
        #requestList td:nth-of-type(2):before { content: "Request Date"; font-weight: bold; color: #242a30;}
        #requestList td:nth-of-type(3):before { content: "Request Status"; font-weight: bold; color: #242a30;}
        #requestList td:nth-of-type(4):before { content: "Period"; font-weight: bold; color: #242a30;}
		#requestList td:nth-of-type(5):before { content: "Pathway Type"; font-weight: bold; color: #242a30;}
		#requestList td:nth-of-type(6):before { content: "Pathway Information"; font-weight: bold; color: #242a30;}
        #requestList td:nth-of-type(7):before { content: "Pathway Detail"; font-weight: bold; color: #242a30;}
        #requestList td:nth-of-type(8):before { content: "Unit Type"; font-weight: bold; color: #242a30;text-align:left;}
        #requestList td:nth-of-type(9):before { content: "Additional Information"; font-weight: bold; color: #242a30;}
        #requestList td:nth-of-type(10):before { content: "Goal(s)"; font-weight: bold; color: #242a30;}
        .alloc td:nth-of-type(1):before { content: ""; font-weight: bold; color: #242a30;}
    }

    @media only screen and (max-width: 1456px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
        .documentList table, .documentList thead, .documentList tbody, .documentList th, .documentList td, .documentList tr, 
        .documentAdminList table, .documentAdminList thead, .documentAdminList tbody, .documentAdminList th, .documentAdminList td, .documentAdminList tr,
        .documentQrisList table, .documentQrisList thead, .documentQrisList tbody, .documentQrisList th, .documentQrisList td, .documentQrisList tr,
        .documentUserList table, .documentUserList thead, .documentUserList tbody, .documentUserList th, .documentUserList td, .documentUserList tr, 
        .employmentList table, .employmentList thead, .employmentList tbody, .employmentList th, .employmentList td, .employmentList tr,
        .requiredDocList table, .requiredDocList thead, .requiredDocList tbody, .requiredDocList th, .requiredDocList td, .requiredDocList tr,
        .notesList table, .notesList thead, .notesList tbody, .notesList th, .notesList td, .notesList tr,
        .documentQueueList table, .documentQueueList thead, .documentQueueList tbody, .documentQueueList th, .documentQueueList td, .documentQueueList tr,
        .participantDocumentList table, .participantDocumentList thead, .participantDocumentList tbody, .participantDocumentList th, .participantDocumentList td, .participantDocumentList tr{
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.documentQueueList thead tr, .documentUserList thead tr, .documentList thead tr, .documentAdminList thead tr, .documentQrisList thead tr, .employmentList thead tr, .requiredDocList thead tr, .notesList thead tr, .participantDocumentList thead tr{
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .documentQueueList tr, .documentUserList tr, .documentList tr, .documentAdminList tr, .documentQrisList tr, .employmentList tr, .requiredDocList tr, .notesList tr, .participantDocumentList tr{
            margin: 0 0 1rem 0;
            
        }

        .documentQueueList td, .documentUserList td, .documentList td, .documentAdminList td, .documentQrisList td, .employmentList td, .requiredDocList td, .notesList td, .participantDocumentList td{
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 97% !important;
            text-align: left !important;
        }
        
        .documentQueueList td:before, .documentUserList td:before, .documentList td:before, .documentAdminList td:before, .documentQrisList td:before, .employmentList td:before, .requiredDocList td:before, .notesList td:before, .participantDocumentList td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        .documentQueueList, .documentUserList, .documentList, .documentQrisList, .documentAdminList, .employmentList, .requiredDocList, .notesList, .participantDocumentList, .noMargin tr {
            margin: 0 0 0 0; 
        }

        #documentQueueList td:nth-of-type(1):before { content: ""; }
        #documentQueueList td:nth-of-type(2):before { content: "Flagged"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(3):before { content: "First Name"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(4):before { content: "Last Name"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(5):before { content: "Program ID"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(6):before { content: "Employer Name"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(7):before { content: "County"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(8):before { content: "Upload Date"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(9):before { content: "Doc Type"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(10):before { content: "Rating Date"; font-weight: bold; color: #242a30;}
		#documentQueueList td:nth-of-type(11):before { content: "State Funded"; font-weight: bold; color: #242a30;}
		#documentQueueList td:nth-of-type(12):before { content: "Stipend Applicant"; font-weight: bold; color: #242a30;}
        #documentQueueList td:nth-of-type(13):before { content: "Doc ID"; font-weight: bold; color: #242a30;}

        #documentList td:nth-of-type(1):before { content: "Document ID"; font-weight: bold; color: #242a30;}
        #documentList td:nth-of-type(2):before { content: "Document Type"; font-weight: bold; color: #242a30;}
        #documentList td:nth-of-type(3):before { content: "Upload Date"; font-weight: bold; color: #242a30;}
        #documentList td:nth-of-type(4):before { content: "Description"; font-weight: bold; color: #242a30;}
		#documentList td:nth-of-type(5):before { content: "View"; font-weight: bold; color: #242a30;}
		#documentList td:nth-of-type(6):before { content: "Status"; font-weight: bold; color: #242a30;}
        #documentList td:nth-of-type(7):before { content: "Edit"; font-weight: bold; color: #242a30;}
        #documentList td:nth-of-type(8):before { content: "Flagged"; font-weight: bold; color: #242a30;text-align:left;}
        #documentList td:nth-of-type(9):before { content: "Hide from Employer"; font-weight: bold; color: #242a30;}

        #documentQrisList td:nth-of-type(1):before { content: "Document ID"; font-weight: bold; color: #242a30;}
        #documentQrisList td:nth-of-type(2):before { content: "Document Type"; font-weight: bold; color: #242a30;}
        #documentQrisList td:nth-of-type(3):before { content: "Upload Date"; font-weight: bold; color: #242a30;}
        #documentQrisList td:nth-of-type(4):before { content: "Description"; font-weight: bold; color: #242a30;}
		#documentQrisList td:nth-of-type(5):before { content: "View"; font-weight: bold; color: #242a30;}
		#documentQrisList td:nth-of-type(6):before { content: "Status"; font-weight: bold; color: #242a30;}

        #documentAdminList td:nth-of-type(1):before { content: "Document ID"; font-weight: bold; color: #242a30;}
        #documentAdminList td:nth-of-type(2):before { content: "Document Type"; font-weight: bold; color: #242a30;}
        #documentAdminList td:nth-of-type(3):before { content: "Upload Date"; font-weight: bold; color: #242a30;}
        #documentAdminList td:nth-of-type(4):before { content: "Description"; font-weight: bold; color: #242a30;}
		#documentAdminList td:nth-of-type(5):before { content: "View"; font-weight: bold; color: #242a30;}
		#documentAdminList td:nth-of-type(6):before { content: "Status"; font-weight: bold; color: #242a30;}
        #documentAdminList td:nth-of-type(7):before { content: "Edit"; font-weight: bold; color: #242a30;}
   
        #documentUserList td:nth-of-type(1):before { content: "Document ID"; font-weight: bold; color: #242a30;}
        #documentUserList td:nth-of-type(2):before { content: "Document Type"; font-weight: bold; color: #242a30;}
        #documentUserList td:nth-of-type(3):before { content: "Upload Date"; font-weight: bold; color: #242a30;}
        #documentUserList td:nth-of-type(4):before { content: "Description"; font-weight: bold; color: #242a30;}
		#documentUserList td:nth-of-type(5):before { content: "View Document"; font-weight: bold; color: #242a30;}
		#documentUserList td:nth-of-type(6):before { content: "Status"; font-weight: bold; color: #242a30;}
        #documentUserList td:nth-of-type(7):before { content: "Edit"; font-weight: bold; color: #242a30;}
        #documentUserList td:nth-of-type(8):before { content: ""; font-weight: bold; color: #242a30;}

        #employmentDetails td:nth-of-type(1):before { content: "Facility/Site Name"; font-weight: bold; color: #242a30;}
        #employmentDetails td:nth-of-type(2):before { content: "Agency/Licensee Name"; font-weight: bold; color: #242a30;}
        #employmentDetails td:nth-of-type(3):before { content: "Provider Type"; font-weight: bold; color: #242a30;}
        #employmentDetails td:nth-of-type(4):before { content: "Job Title"; font-weight: bold; color: #242a30;}
		#employmentDetails td:nth-of-type(5):before { content: "Start Date"; font-weight: bold; color: #242a30;}
		#employmentDetails td:nth-of-type(6):before { content: "Verification Date"; font-weight: bold; color: #242a30;}
		#employmentDetails td:nth-of-type(7):before { content: "Ages Served"; font-weight: bold; color: #242a30;}
        #employmentDetails td:nth-of-type(8):before { content: "Funding Sources"; font-weight: bold; color: #242a30;}

        #requiredDocDetails td:nth-of-type(1):before { content: "Document Type"; font-weight: bold; color: #242a30;}
        #requiredDocDetails td:nth-of-type(2):before { content: "Status"; font-weight: bold; color: #242a30;}
        #requiredDocDetails td:nth-of-type(3):before { content: ""; font-weight: bold; color: #242a30;}
	
        #notesDetails td:nth-of-type(1):before { content: "Note"; font-weight: bold; color: #242a30;}
        #notesDetails td:nth-of-type(2):before { content: "Note Date"; font-weight: bold; color: #242a30;}
        #notesDetails td:nth-of-type(3):before { content: "Entered By"; font-weight: bold; color: #242a30;}

        #participantDocumentDetails td:nth-of-type(1):before { content: "Document ID"; font-weight: bold; color: #242a30;}
        #participantDocumentDetails td:nth-of-type(2):before { content: "Document Type"; font-weight: bold; color: #242a30;}
        #participantDocumentDetails td:nth-of-type(3):before { content: "Upload Date"; font-weight: bold; color: #242a30;}
        #participantDocumentDetails td:nth-of-type(4):before { content: "Description"; font-weight: bold; color: #242a30;}
        #participantDocumentDetails td:nth-of-type(5):before { content: "View"; font-weight: bold; color: #242a30;}
        #participantDocumentDetails td:nth-of-type(6):before { content: "Status"; font-weight: bold; color: #242a30;}
		#participantDocumentDetails td:nth-of-type(7):before { content: "Edit"; font-weight: bold; color: #242a30;}
	
    }


    @media only screen and (max-width: 1223px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
		.courseList table, .courseList thead, .courseList tbody, .courseList th, .courseList td, .courseList tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.courseList thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .courseList tr {
            margin: 0 0 1rem 0;
            
        }

        .courseList td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .courseList td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        .courseList, .noMargin tr {
            margin: 0 0 0 0;
            
        }

        #courseDetails td:nth-of-type(1):before { content: "Stipend/Reimbursement Type"; font-weight: bold; color: #242a30;}
		#courseDetails td:nth-of-type(2):before { content: "Institution/Organization Name"; font-weight: bold; color: #242a30;}
		#courseDetails td:nth-of-type(3):before { content: "Units Enrolled/Completed"; font-weight: bold; color: #242a30;}
		#courseDetails td:nth-of-type(4):before { content: "Unit Type"; font-weight: bold; color: #242a30;}
        #courseDetails td:nth-of-type(5):before { content: "Student ID (College/University Only)"; font-weight: bold; color: #242a30;}

    }

    @media only screen and (max-width: 1223px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
		.employmentList table, .employmentList thead, .employmentList tbody, .employmentList th, .employmentList td, .employmentList tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.employmentList thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .employmentList tr {
            margin: 0 0 1rem 0;
            
        }

        .employmentList td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .employmentList td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        .employmentList, .noMargin tr {
            margin: 0 0 0 0;
            
        }

        #employmentList td:nth-of-type(1):before { content: "Employer"; font-weight: bold; color: #242a30;}
        #employmentList td:nth-of-type(2):before { content: "Provider Type"; font-weight: bold; color: #242a30;}
        #employmentList td:nth-of-type(3):before { content: "Job Title"; font-weight: bold; color: #242a30;}
		#employmentList td:nth-of-type(4):before { content: "Start Date"; font-weight: bold; color: #242a30;}
		#employmentList td:nth-of-type(5):before { content: "Verification Date"; font-weight: bold; color: #242a30;}
		#employmentList td:nth-of-type(6):before { content: "Ages Served"; font-weight: bold; color: #242a30;}
        #employmentList td:nth-of-type(7):before { content: "Funding Sources"; font-weight: bold; color: #242a30;}

    }

    @media only screen and (max-width: 1223px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
		.prerequisiteList table, .prerequisiteList thead, .prerequisiteList tbody, .prerequisiteList th, .prerequisiteList td, .prerequisiteList tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.prerequisiteList thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .prerequisiteList tr {
            margin: 0 0 1rem 0;
            
        }

        .prerequisiteList td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .prerequisiteList td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        .prerequisiteList, .noMargin tr {
            margin: 0 0 0 0;
            
        }

        #prerequisiteList td:nth-of-type(1):before { content: ""; font-weight: bold; color: #242a30;}
        #prerequisiteList td:nth-of-type(2):before { content: "Required for all Sponsors"; font-weight: bold; color: #242a30;}
        #prerequisiteList td:nth-of-type(3):before { content: "Required for CDE/F5 Funded"; font-weight: bold; color: #242a30;}
        #prerequisiteList td:nth-of-type(4):before { content: "Column Name"; font-weight: bold; color: #242a30;}
		#prerequisiteList td:nth-of-type(5):before { content: "Description/Instructions"; font-weight: bold; color: #242a30;}

    }

    @media only screen and (max-width: 1223px), (min-device-width: 768px) and (max-device-width: 1024px){
        /* Force table to not be like tables anymore */
		.enrollmentRosterList table, .enrollmentRosterList thead, .enrollmentRosterList tbody, .enrollmentRosterList th, .enrollmentRosterList td, .enrollmentRosterList tr {
			display: block;
        }
        
        /* Hide table headers (but not display: none;, for accessibility) */
		.enrollmentRosterList thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
        }
        
        .enrollmentRosterList tr {
            margin: 0 0 1rem 0;
            
        }

        .enrollmentRosterList td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
            width: 100% !important;
            text-align: left !important;
        }
        
        .enrollmentRosterList td:before {
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
        }

        .showDesktop {
            display: none !important;
        }

        .showMobile{
            display: block !important;
        }

        .enrollmentRosterList, .noMargin tr {
            margin: 0 0 0 0;
            
        }
/*
        #enrollmentRoster td:nth-of-type(1):before { content: "Name"; font-weight: bold; color: #242a30;}
		#enrollmentRoster td:nth-of-type(2):before { content: "Primary Language"; font-weight: bold; color: #242a30;}
		#enrollmentRoster td:nth-of-type(3):before { content: "Cell Phone"; font-weight: bold; color: #242a30;}
		#enrollmentRoster td:nth-of-type(4):before { content: "Status"; font-weight: bold; color: #242a30;}
        #enrollmentRoster td:nth-of-type(5):before { content: "Email"; font-weight: bold; color: #242a30;}
        #enrollmentRoster td:nth-of-type(6):before { content: "Payment Status"; font-weight: bold; color: #242a30;}
        #enrollmentRoster td:nth-of-type(7):before { content: "Training Hours Earned"; font-weight: bold; color: #242a30;}
*/
    } 

    
    @media only screen and (max-width: 600px) {
        .table-modal{
            overflow-x: auto !important;
        }
    }

    @media only screen and (min-width: 992px) {
        .table-modal{
            overflow-x: hidden !important;
        }
    }
    
    @media only screen and (max-width: 78.75em) {
        .submenu .submenu .submenu {
            left: -100%;
            top: 0.5em;
        }
        .submenu {
            min-width: 16em;
        }
    }

    @media only screen and (max-width: 58.75em) {
        .menu li a {
            font-size: 13px;
        }
    }

    @supports (contain: paint){
        @media (min-width: 1200px){
            /*.container {
                max-width: 1050px;
            }*/
            @-moz-document url-prefix() {
                .container {
                    max-width: 1140px !important;
                }
            }
        }
    }
    

    @supports (background: -webkit-named-image(i)){
        @media (min-width: 2648px){
            .container {
                max-width: 1540px !important;
            }
        }

        @media (max-width: 2000px){
            .container {
                max-width: 1140px !important;
            }
            
        }
    }


    @media only screen and (max-width: 1225px), (min-device-width: 768px) and (max-device-width: 1024px){
        header {
    /*     position: relative; */
            padding: 1.5em 2em;
        }

        #header-showcase-menu{
            float:left;
            margin-top:25px;
        }

        .navbar {
            float: right;
        }

        .menu {
            flex-flow: column;
            position: absolute;
            background: var(--primary);
            top: 4.55em;
            left: 0;
            right: 0;
            height: 30vh;
            float: left;
        
            opacity: 0;
            transform: scaleY(0);
            transform-origin: top center;
            transition: 200ms transform cubic-bezier(0.36, 0.4, 0.42, 1.48) 100ms,
                100ms opacity ease-in-out;
                
            overflow-y: scroll;
        }

        .menu > li > a {
            font-size: 13px;
            color: var(--dark);
        }

        .submenu > li > a {
            font-size: 13px;
        }
    
        .submenu {
            top: 0;
            padding-left: 1.5em;
            border-left: 0.12em dotted hsla(342, 99%, 45%, 0.95);
        }

        .submenu .submenu {
            left: 0;
            top: 0;
        }

        .submenu .submenu .submenu {
            left: 0;
            top: 0;
        }
    
        .menu > li:hover > a + .submenu,
        .submenu > li:hover > a + .submenu {
            position: relative;
        }
    
        .hamburger {
            width: 2em;
            height: 0.25em;
            display: block;
            background: var(--dark);
            position: relative;
            cursor: pointer;
            transition: 0.2s transform ease-in-out;
            margin-right:10px;
        }

        .hamburger::after,
        .hamburger::before {
            content: "";
            position: absolute;
            left: 0;
            background: inherit;
            width: 100%;
            height: inherit;
        
            transition: 0.2s transform ease-in-out;
        }
    
        .hamburger::after {
            top: 0.65em;
        }

        .hamburger::before {
            bottom: 0.65em;
        }
    
        .close::after,
        .close::before {
            top: 0;
            transition: 0.2s transform ease-in-out;
        }

        .close::before {
            display: none;
        }

        .close {
            transform: rotate(45deg);
            transition: 0.2s transform ease-in-out;
        }

        .close::after {
            transform: rotate(-90deg);
        }
    
        /* reveal menu */
        input[type="checkbox"]:checked + .menu {
            position: absolute;
            opacity: 1;
            transform: scaleY(1);
            width:max-content;
        }
    }
 
    @media (min-width: 1200px) {
        .col-md-2 {
            -ms-flex: 0 0 23%;
            flex: 0 0 23%;
            max-width: 23%;
        }
    }

    @media (min-width: 992px) {
        .col-md-2 {
            -ms-flex: 0 0 23%;
            flex: 0 0 23%;
            max-width: 23%;
        }
    }        

    @media (min-width: 768px) {
        .col-md-2 {
            -ms-flex: 0 0 23%;
            flex: 0 0 23%;
            max-width: 23%;
        }
    }

   
    #profileModal, #docModal {
        
        align-items: center;
        justify-content: center;
    }

    .modal-body {
        padding: 20px;
    }

    .closeProfileButton, .closeDocumentButton {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .closeProfileButton:hover, .closeDocumentButton:hover {
        cursor: pointer;
    }

    .closeButText, .reminderHeader {
        font-size: 16px;
        font-weight: bold;
    }

    .docText {
        font-size: 14px;
        font-weight: bold;
    }

    .itemList {
        font-weight: bold;
    }

    .infoText, .documentText {
        color: #408EA4;
    }

    .modal-footer {
        text-align: center;
        margin-top: 0px;
        border-top-color: #fff;
        justify-content: center;
        
    }

    .modal-footer button {
        background-color: #408EA4;
    }

    .docList {
        padding-left: 25px;
    }

    .modal-dialog {
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%) !important;
    }
    
    /* For larger screens */
    @media (min-width: 768px) {
        #profileModal .modal-dialog, 
        #docModal .modal-dialog {
            max-width: 600px;
            width: 90%;
        }
    }
    
    /* For mobile screens */
    @media (max-width: 767px) {
        #profileModal .modal-dialog,
        #docModal .modal-dialog {
            margin: 10px;
            width: auto;
        }
    }