/*
JUST FOR STYLING FILES IN THE /myAccount/ DIRECTORY 
DO NOT EDIT THIS FILE
THIS IS THE DEFAULT CSS FILE
IT SITS ABOVE THE WEBSITE CSS FILE
PLACE EDITS IN THE WEBSITES CSS FILE 
*/

body[id^=myaccount] #content form {
margin:20px auto;
padding:0;
border:0px solid red;
max-width:1200px;
}


body[id^=myaccount] #content .search-form{
margin:20px auto;
border:1px solid #ccc;
padding:10px;
text-align:center;
width:100%;
}

body[id^=myaccount] #content .form-group label{
display: inline-block;
font-weight:bold;
padding:0 10px;
}

body[id^=myaccount] #content .form-group input[type=submit] {
font-size:125%;
}

body[id^=myaccount] #content form fieldset {
margin-bottom:20px;
padding:20px;
border: 1px solid #ccc;
}

body[id^=myaccount] fieldset legend{
 background: #e1e1e1;
    padding: 5px 10px ;
    font-size: 125%;
  font-weight:bold;
    margin: 8px 0 0 0px;
}

body#myaccount-home #welcome {
font-size:160%;
margin:30px auto;
}

body[id^=myaccount] table th {
font-size:110%;
font-weight:bold;
color:#000;
background-color:#ccc;
border:0px solid #999;
text-align:left;
padding:3px 10px;
margin:0px;
vertical-align:middle;
text-align:center;
}

body#myaccount-orders  #orders-form{
max-width:1200px;
margin:20px auto;
}

body#myaccount-orders  #myaccount-orders-table{
max-width:1200px;
margin:20px auto;
}

body#myaccount-login #content form#login-form{
width:700px !important;
margin:20px auto;
}

body#myaccount-retrieve-password #content form{
max-width:500px;
}

body#myaccount-retrieve-account #content form{
max-width:800px;
margin:20px auto;
}

body#myaccount-confirm-account #content #confirm-account-form{
max-width:600px;
margin:30px auto;
}

body[id^=myaccount] #content form ul.list-inline {
margin-left:0;
margin-bottom:0;
}

body#myaccount-students #div-flex{
margin:20px auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

body#myaccount-students #div-flex div{
max-width:400px;
width:33%;
background-color: #e7e7e7;
padding:15px;
text-align:center;
border-radius:7px;
margin:20px;
}

body#myaccount-students #div-flex div name,
body#myaccount-students #div-flex div a.name{
font-weight:bold;
font-size:120%;
display:block;
text-decoration:none;
margin-bottom:9px;
}

body#myaccount-students #div-flex div .delete,
body#myaccount-students #div-flex div .email,
body#myaccount-students #div-flex div .dob,
body#myaccount-students #div-flex div .phone{
display:block;
margin:5px 0;
}

body#myaccount-payment-profiles #div-flex{
margin:20px auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

body#myaccount-payment-profiles #div-flex div{
max-width:400px;
width:33%;
background-color: #e7e7e7;
padding:15px;
text-align:center;
border-radius:7px;
margin:20px;
}

body#myaccount-payment-profiles #div-flex div method,
body#myaccount-payment-profiles #div-flex div a.method{
font-weight:bold;
font-size:120%;
display:block;
text-decoration:none;
margin-bottom:9px;
}

body#myaccount-payment-profiles #div-flex div .delete,
body#myaccount-payment-profiles #div-flex div .status,
body#myaccount-payment-profiles #div-flex div .type,
body#myaccount-payment-profiles #div-flex div .number{
display:block;
margin:5px 0;
}


body#myaccount-overview #account-overview-flex{
margin:20px auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

body#myaccount-overview #account-overview-flex div{
max-width:400px;
width:33%;
background-color: #e7e7e7;
padding:15px;
text-align:center;
border-radius:7px;
margin:20px;
}

body#myaccount-overview #account-overview-flex div a.title{
font-weight:bold;
font-size:120%;
display:block;
margin-bottom:1px;
text-decoration:none;
}


body#myaccount-user-logins #div-flex{
margin:20px auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

body#myaccount-user-logins #div-flex div{
max-width:400px;
width:33%;
background-color: #e7e7e7;
padding:15px;
text-align:center;
border-radius:7px;
margin:20px;
}

body#myaccount-user-logins #div-flex div a.name{
font-weight:bold;
font-size:120%;
display:block;
text-decoration:none;
margin-bottom:9px;
}

body#myaccount-user-logins #div-flex div .delete,
body#myaccount-user-logins #div-flex div .active,
body#myaccount-user-logins #div-flex div .email,
body#myaccount-user-logins #div-flex div .phone{
display:block;
margin:5px 0;
}


body#myaccount-payment-profiles #payment-profiles-add-table{
max-width:1400px;
}

body#myaccount-payment-profiles-add #payment-profiles-form,
body#myaccount-payment-profiles-update #payment-profiles-form{
max-width:800px;
border:0px solid red;
}

body#myaccount-payment-profiles div#payment-profiles-search-table { 
/*
display:flex;
flex-direction:row;
flex-wrap:wrap;
*/
width:100%;
margin:20px auto;
padding:0;
/*
border:1px solid #eee;
*/
}

body#myaccount-payment-profiles div#payment-profiles-search-table div#columns { 
border:0;
margin:0;
}

body#myaccount-payment-profiles #payment-profiles-search-table div#columns div[class*=columns]{
background-color:#eee;
text-align:center;
font-weight:bold;
padding:10px;
margin:0;
border:0;
}

body#myaccount-payment-profiles div#payment-profiles-search-table div#row {
margin:0px;
padding:10px;
border:1px solid #eee;
background-color:white;
}

body#myaccount-payment-profiles div#payment-profiles-search-table div#row label{
display:none;
}

body#myaccount-payment-profiles div#payment-profiles-search-table div.row#row:nth-child(odd) {
background: #f5f5f5;
} 

body#myaccount-primary-contact-update #content form{
max-width:700px;
}

body#myaccount-primary-contact-profile-update #content form{
max-width:700px;
}

body#myaccount-account-update #content form{
max-width:700px;
}

body#myaccount-username-password-update #content form{
max-width:800px;
}


body#myaccount-payments ul#bottom-menu{
margin:20px auto;
display:table;
text-align:center;
}

/*********************************
///FAVORITES
*********************************/

body#myaccount-favorites #search-table {
width:100%;
margin:20px auto;
padding:0;
/*
border:1px solid #eee;
*/
}

body#myaccount-favorites div#search-table div#columns {
border:0;
margin:0;
background-color:#eee;
}

body#myaccount-favorites #search-table div#columns div[class*=col-]{
text-align:center;
font-weight:bold;
padding:10px;
margin:0;
border:0;
}

body#myaccount-favorites div#search-table div#row {
margin:0px;
padding:10px;
border:1px solid #eee;
background-color:white;
}

body#myaccount-favorites div#search-table div#row.row:nth-child(odd) {
      background: #f5f5f5;
    }

body#myaccount-favorites div#search-table div#row div[class*=col-]{
text-align:center;
}

body#myaccount-favorites div#search-table div#row a#delete-record{
display:inline;
margin-left:4px;
}

body#myaccount-favorites div#search-table div#row label{
display:none;
}

/* 
###############################################
sidebar nav 
https://www.jonathanbriehl.com
Vertical menu for Bootstrap 3
make sidebar nav vertical 
###############################################
*/

body[id^=myaccount-home] #content #column-left {
text-align:left !important;
}

body[id^=myaccount] #content #column-right {
text-align:left !important;
}

body[id^=myaccount] #content #column-left .sidebar-nav .navbar{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin:10px 0;
text-align:left !important;
}

body[id^=myaccount] #content #column-left .navbar .navbar-toggler{
text-align:center;
min-width:99%;
}
body[id^=myaccount] #content #column-left .navbar .navbar-toggler .navbar-toggler-icon{
min-width:99%;
}


body[id^=myaccount] #content #column-left ul.navbar-nav  {
text-align:left !important;
display:block;
min-width:350px;
}

body[id^=myaccount] #content #column-left ul.navbar-nav >li ,
body[id^=myaccount] #content #column-left ul.navbar-nav >li.nav-item {
text-align:left;
display:block;
}

body[id^=myaccount] #column-left ul.navbar-nav >li >a {
padding-left:0;
}

body[id^=myaccount] #column-left ul.navbar-nav >li >a.edit {
 padding-top:0px !important;
 padding-bottom:0px !important;
padding-left:5px;
display:inline;
font-size:12px;
}

body[id^=myaccount] #column-left .navbar-brand {
  float: left;
  height: 50px;
  padding: 20px;
  font-size: 20px;
  line-height: 20px;
}


body[id^=myaccount] #column-left .sidebar-nav .navbar blockquote {
padding: 0;
margin: 5px 0 10px 10px;
font-size: 90%;
border-left: 0px solid #eee;
}

/**************************
// SERVICES
**************************/

body#myaccount-services #services-search-form{ 
display:block;
margin:20px auto;
border:0;
background-color:#F3F8FC;
padding:8px;
width:100%;
text-align:center;
}

body#myaccount-services #services-search-form ul.list-inline{ 
  display: inline-block;
  padding: 3px;
margin:10px auto;
text-align:center;
}

body#myaccount-services #services-search-form ul.list-inline li{ 
margin:4px;
}

body#myaccount-services #services-header{
margin:0;
border:0px solid red;
background-color:#eee !important;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items: stretch;
padding:5px;
width:100%;
}

body#myaccount-services #services-header div{
font-weight:bold;
text-align:center;
}

body#myaccount-services #services-list{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items: stretch;
width:100%;
margin:0;
}

body#myaccount-services #services-list div{
padding:10px;
border:1px solid #eee;
text-align:center;
margin:0;
}

body#myaccount-services #services-list div .id,
body#myaccount-services #services-list div .type,
body#myaccount-services #services-list div .active,
body#myaccount-services #services-list div .category,
body#myaccount-services #services-list div .category2,
body#myaccount-services #services-list div .name,
body#myaccount-services #services-list div .description,
body#myaccount-services #services-list div .student,
body#myaccount-services #services-list div .session,
body#myaccount-services #services-list div .room,
body#myaccount-services #services-list div .class_dates,
body#myaccount-services #services-list div .class_times,
body#myaccount-services #services-list div .amount,
body#myaccount-services #services-list div .cycle,
body#myaccount-services #services-list div .day,
body#myaccount-services #services-list div .date{
display:block;
margin:5px 0;
}

body#myaccount-services #services-list div .id,
body#myaccount-services #services-list div .name,
body#myaccount-services #services-list div .description,
body#myaccount-services #services-list div .amount,
body#myaccount-services #services-list div .active{
font-weight:bold;
}

/**************************
// STUDENTS
**************************/

body#myaccount-students #search-results{
margin:20px auto;
text-align:center;
}

body#myaccount-students #students-table{
margin:20px auto;
border:1px solid #eee;
}

body#myaccount-students #students-header{
margin:0;
border:0px solid red;
background-color:#eee !important;
padding:5px;
width:100%;
font-weight:bold;
text-align:center;
}


body#myaccount-students div#students-list div.row {
margin:0px;
padding:10px;
border:1px solid #eee;
background-color:white;
}

body#myaccount-students div#students-list div.row:nth-child(even) {
background: #f5f5f5;
}

body#myaccount-students div#students-list div[class*=col-]{
text-align:center;
}

body#myaccount-students div#students-list label{
display:none;
}

body#myaccount-students div#students-list .first_name,
body#myaccount-students div#students-list .last_name{
font-size:110%;
}

body#myaccount-students div#students-list .last_name{
font-weight:bold;
}

body#myaccount-students div#students-list .dob,
body#myaccount-students div#students-list .gender,
body#myaccount-students div#students-list .email,
body#myaccount-students div#students-list .phone{
display:block;
margin:0 0 6px 0;
}


body#myaccount-students-update form#students-update{
margin:20px auto;
max-width:600px;
}

body#myaccount-create-account form#create-account-form,
body#myaccount-create-account form#create-account-profile-form,
body#myaccount-create-account form#create-account-employer-form,
body#myaccount-create-account form#create-account-billing-form{
margin:20px auto;
max-width:900px;
}

body#myaccount-create-account form label{
margin-left:-8px;
}

body#myaccount-create-account form#create-account-form #_agree_to_terms{
 height: 18px;
  width: 18px;
}

body#myaccount-create-account #create-account-bottom-menu{
margin:20px auto;
}

body#myaccount-create-account #create-account-bottom-menu ul {
margin:0 auto;
text-align:center;
}

body#myaccount-create-account #create-account-bottom-menu ul li{
margin:10px;
}


body#myaccount-employer-update form#update-account-employer-form,
body#myaccount-user-logins-update form#user-logins-update-form,  
body#myaccount-secondary-contact-update form#secondary-contact-update-form{
margin:20px auto;
max-width:700px;

}

body#myaccount-create-account #membership-info{
margin:20px auto;
padding:10px;
text-align:center;
background-color:#ddecf6;
}

body#myaccount-create-account #membership-info .name{
font-weight:bold;
display:block;
margin:5px 0;
}

body#myaccount-create-account #membership-info .back,
body#myaccount-create-account #membership-info .amount,
body#myaccount-create-account #membership-info .length,
body#myaccount-create-account #membership-info .day-month,
body#myaccount-create-account #membership-info .prorated,
body#myaccount-create-account #membership-info .application-fee{
display:block;
margin:5px 0;
}



@media (min-width: 768px) {

	body[id^=myaccount] #column-left .sidebar-nav .navbar .navbar-collapse {
	padding: 0;
	max-height: none;
  	}
	
	body[id^=myaccount] #column-left .sidebar-nav .navbar ul {
	float: none;
	margin:8px 8px 8px 8px;
	text-align:left !important;
	}

	/**
	body#myaccount #column-left .sidebar-nav .navbar ul:not {
    	display: block;
  	}
	**/

	body[id^=myaccount] #column-left .sidebar-nav .navbar li {
    	float: none;
    	display: block;
 	margin:0 0 15px 0; 
	}

	body[id^=myaccount] #column-left .sidebar-nav .navbar li a {
    	padding-top: 2px;
    	padding-bottom: 2px;
  	}
	
}

@media (max-width:972px){

	body#myaccount-students #students-header,
	body#myaccount-payment-profiles div#payment-profiles-search-table div#columns {
	display:none;
	}
	
	body#myaccount-payment-profiles div#payment-profiles-search-table div#row div{
	margin:10px;
	}

	body#myaccount-students #students-list label,
	body#myaccount-payment-profiles div#payment-profiles-search-table div#row label{
	display:inline-block !important;
	}

	body#myaccount-students #students-list label:after,
	body#myaccount-payment-profiles div#payment-profiles-search-table div#row label:after {
        content: ": " !important;
	}

	body#myaccount-students div#students-list div[class*=col-]{
	margin:4px 0;
	}

	body#myaccount-favorites div#search-table div#columns {
        display:none;
        }

        body#myaccount-favorites div#search-table div#row div{
        margin:10px;
        text-align:center;
        }
        body#myaccount-favorites div#search-table div#row label{
        display:inline;
        }

        body#myaccount-favorites div#search-table div#row label:after {
        content: ": " !important;
        }

	body#myaccount-services #services-list div{
	border:0px solid #eee;
	text-align:center;
	margin:0;
	}

}