/*
JUST FOR STYLING FILES IN THE /users-portal/ 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^=users-portal] #customer-title{
background-color:#307df6;
background-color:#ddd;
margin:20px auto;
color:white;
color:black;
padding:15px;
text-align:center;
max-width:100%;
font-size:110%;
}

body[id^=users-portal] #customer-title b{
font-size:125%;
padding-bottom:12px;
display:block;
}

body[id^=users-portal] form {
margin:0;
padding:0;
border:0px solid red;
max-width:1800px;
}

body[id^=users-portal] #flex-container{
margin:20px auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

body[id^=users-portal] #flex-container .flex{
max-width:600px;
min-width:350px;
width:45%;
margin:20px;
}

body[id^=users-portal] div#flex-container .flex-gray{
min-height:75px;
max-width:400px;
width:33%;
background-color: #e7e7e7;
padding:15px;
text-align:center;
border-radius:7px;
margin:20px;
}

body[id^=users-portal] #flex-container .flex-gray .title,
body[id^=users-portal] #flex-container .flex-gray a.title{
font-weight:bold;
font-size:120%;
margin-bottom:5px;
text-decoration:none;
display:inline-block;
}


body[id^=users-portal] fieldset{
margin-bottom:20px;
padding:20px 20px 20px 20px !important;
border: 1px solid #ccc;
}

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

body[id^=users-portal] label{
font-weight:bold;
}

body#users-portal-login form{
width:100%;
max-width:650px;
margin:20px auto;
}

body#users-portal-login form label{
font-weight:bold;
display:block;
}

body#users-portal-login form input{
margin-bottom:6px;
max-width:400px;
}


body#users-portal-visibility-update form#users-visibility-update-form fieldset{ 
padding:15px;
margin:20px auto;
max-width:500px;
}

body#users-portal-visibility-update form#users-visibility-update-form{
font-size:110%;
} 

body#users-portal-visibility-update form#users-visibility-update-form input[type=checkbox]{ 
border: 1px ;
    width: 20px;
    height: 20px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

body#users-portal-login #showResults ul{
margin:20px 0;
}

body#users-portal-login #showResults ul li{
margin:8px 0;
}

body#users-portal-retrieve-password form#retrieve-password-form fieldset,
body#users-portal-retrieve-username form#retrieve-username-form fieldset{
margin:20px auto;
max-width:600px;
}

body#users-portal-retrieve-password form#retrieve-password-form label,
body#users-portal-retrieve-username form#retrieve-username-form label{
font-weight:bold;
} 

body#users-portal-retrieve-username form#retrieve-username-form input,
body#users-portal-retrieve-password form#retrieve-password-form input{
max-width:450px;
margin-bottom:6px;
}


body[id^=users-portal] ul.list-inline {
margin-left:0px;
padding-left:0;
}

body[id^=users-portal] ul.list-inline li{
margin-bottom:5px;
}

/**
body#users-portal-users-main-page #account-overview-flex{
margin:20px auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
}

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

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

body#users-portal-login-info-update form#update-login-form{
margin:20px auto;
max-width:500px
}
**/

body#users-portal-login-info-update form label{
font-weight:bold;
display:block;
padding:0;
margin:0 0 5px 0;
}

body#users-portal-login-info-update form input{
margin-bottom:6px;
}

body#users-portal-login-info-update form i{
font-size:90%;
}

body#users-portal-home div#portal-announcement{
margin:20px auto;
}

body#users-portal-home #welcome {
font-size:150%;
margin:20px auto;
text-align:center;
}

body#users-portal-home #accounts-table{
margin:0 auto 20px auto;
width:100%;
}

body#users-portal-home #accounts-table h2{
margin:0 auto 20px auto;
text-align:center;
background-color:transparent;
}

body#users-portal-home #accounts-table #columns{
color:#333;
background-color:#f1f1f1;
margin:0px;
}

body#users-portal-home #accounts-table #columns .column-headers{
vertical-align:middle;
text-align:center;
font-weight:bold;
padding:3px 0;
}

body#users-portal-home #accounts-table div.row{
background-color:#f1f1f1;
margin:0;
padding:8px;
}

body#users-portal-home #accounts-table div.col-md-3{
text-align:center;
font-weight:bold;
}

body#users-portal-home #accounts-table div.row:nth-child(odd){
background-color: #fff;
border:1px solid #ccc;
}

body#users-portal-home #accounts-table .div-account-notes{
margin:6px 0;
}

body#users-portal-home #accounts-table .div-account-notes .div-account-notes-inner{
max-height:75px;
overflow:auto;
}

body#users-portal-communication-update #list-wrapper{
margin:20px auto;
max-width:800px;
}

body#users-portal-communication-update #list-wrapper div{
margin:20px 0;
border:1px solid #ccc;
padding:10px;
background-color:#f9f9f9;
}

body#users-portal-communication-update #list-wrapper div .list{
font-weight:bold;
font-size:110%;
}

body#users-portal-communication-update #list-wrapper div .type{
display:block;
margin:5px 0 0 23px;
font-style:italic;
}

body#users-portal-communication-update #list-wrapper div .description{
display:block;
margin:5px 0 0 23px;
}

body#users-portal-communication-update #list-wrapper form input[type=checkbox] {
    border: 1px ;
    width: 20px;
    height: 20px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

body#users-portal-commissions{
background-color:#f1f1f1;
border:0px solid #f1f1f1;
margin:20px auto;
width:98%;
}

body#users-portal-commissions form#commissions-search-form{
margin:20px auto;
padding:7px;
background-color:#f1f1f1;
}

body#users-portal-commissions #commissions-list div.column-headers{
color:#333;
background-color:#f1f1f1;
text-align:center;
margin:0px;
vertical-align:middle;
font-weight:bold;
padding:6px 0;
}

body#users-portal-commissions #commissions-list div.row{
border:1px solid #f1f1f1;
background-color: #f1f1f1;
}

body#users-portal-commissions #commissions-list div.row:nth-child(odd) {
background-color: #fff;
}

body#users-portal-commissions #commissions-list [class*="col-"]{
padding:6px 0;
text-align:center;
}

body#users-portal-commissions #commissions-list .date,
body#users-portal-commissions #commissions-list .balance{
margin-top:7px;
display:block;
}

body#users-portal-commissions #commissions-list [class*="col-"] label{
display:none;
}


body#users-portal-commissions #commissions-list [class*="col-"] .time{
display:block;
}

body#users-portal-commissions #commissions-list [class*="col-"] details{
margin:10px 0;
}

body#users-portal-commissions #commissions-list [class*="col-"] summary{
font-size:115%;
}

body#users-portal-commissions #commissions-list [class*="col-"] .make-payment{
margin:10px 0;
}



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

body[id^=users-portal-customers-favorites] #search-table {
width:100%;
margin:20px auto;
padding:0;
/*
border:1px solid #eee;
*/
}

body[id^=users-portal-customers-favorites] div#search-table div#columns {
border:0;
margin:0;
background-color:#eee;
}

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

body[id^=users-portal-customers-favorites] div#search-table div#row {
margin:0px;
padding:10px;
border:1px solid #eee;
background-color:white;
}

body[id^=users-portal-customers-favorites] div#search-table div#row.row:nth-child(odd) {
      background: #f5f5f5;
    }

body[id^=users-portal-customers-favorites] div#search-table div#row div[class*=col-]{
text-align:center;
}

body[id^=users-portal-customers-favorites] div#search-table div#row a#delete-record{
display:inline;
margin-left:4px;
}

body[id^=users-portal-customers-favorites] div#search-table div#row label{
display:none;
}





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

body[id^=users-portal-customers-services] #services-search-form{
display:block;
margin:20px auto;
border:0;
background-color:#F3F8FC;
padding:8px;
width:100%;
text-align:center;
}

body[id^=users-portal-customers-services] #services-search-form ul.list-inline{
  display: inline-block;
  padding: 3px;
margin:10px auto;
text-align:center;
}

body[id^=users-portal-customers-services] #services-search-form ul.list-inline li{
margin:4px;
}

body[id^=users-portal-customers-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[id^=users-portal-customers-services] #services-header div{
font-weight:bold;
text-align:center;
}

body[id^=users-portal-customers-services] #services-list{
/*
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items: stretch;
*/
width:100%;
margin:0;
border:0px solid red;
}


body[id^=users-portal-customers-services] #services-list div.row{
padding:10px;
border:1px solid #eee;
text-align:center;
margin:0;
}

body[id^=users-portal-customers-services] #services-list div.row:nth-child(odd) {
background: #f5f5f5;
}

body[id^=users-portal-customers-services] #services-list div.row-description{
text-align:left !important;
}

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

body[id^=users-portal-customers-services] #services-list div .id,
body[id^=users-portal-customers-services] #services-list div .name,
body[id^=users-portal-customers-services] #services-list div .description,
body[id^=users-portal-customers-services] #services-list div .amount,
body[id^=users-portal-customers-services] #services-list div .active{
font-weight:bold;
}

body[id^=users-portal-customers-services] #services-list [class*="col-"] label{
display:none;
}


/******************************
payment profiles
*******************************/

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

body#users-portal-payment-profiles-add #payment-profiles-form,
body#users-portal-payment-profiles-update #payment-profiles-form{
max-width:700px;
border:0px solid red;
margin:20px auto;
}

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

body#users-portal-payment-profiles #div-flex div{
max-width:400px;
width:33%;
background-color: #e7e7e7;
padding:15px;
text-align:center;
vertical-align:center;
border-radius:7px;
margin:20px;
min-height:150px;
align-items: center;
}

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

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


body#users-portal-manage-users-update form#manage-users-update-form{
margin:20px auto;
}

body#users-portal-manage-users-update form#manage-users-update-form fieldset{
max-width:500px;
margin:0 auto;
}


body#users-portal-manage-users-add form#manage-users-add-form{
margin:20px auto;
}

body#users-portal-manage-users-add form#manage-users-add-form fieldset{
max-width:600px;
margin:0 auto;
}

body#users-portal-manage-users-access div#users-manage-search-results{
margin:20px auto;
max-width:800px;
border:1px solid #eee;
}

/*
body#users-portal-manage-users-access div#users-manage-search-results div[.^=col-]{
border:1px solid eee;
}
*/

body#users-portal-commissions{
background-color:#f1f1f1;
border:0px solid #f1f1f1;
margin:20px auto;
width:98%;
}

body#users-portal-commissions #commissions-list div.column-headers{
color:#333;
background-color:#f1f1f1;
text-align:center;
margin:0px;
vertical-align:middle;
font-weight:bold;
padding:6px 0;
}

body#users-portal-commissions #commissions-list div.row{
border:1px solid #f1f1f1;
background-color: #f1f1f1;
}

body#users-portal-commissions #commissions-list div.row:nth-child(odd) {
background-color: #fff;
}

body#users-portal-commissions #commissions-list [class*="col-"]{
padding:6px 0;
text-align:center;
}

body#users-portal-commissions #commissions-list .date,
body#users-portal-commissions #commissions-list .balance{
margin-top:7px;
display:block;
}

body#users-portal-commissions #commissions-list [class*="col-"] label{
display:none;
}

body#users-portal-commissions #commissions-list [class*="col-"] .time{
display:block;
}

body#users-portal-commissions #commissions-list [class*="col-"] details{
margin:10px 0;
}

body#users-portal-commissions #commissions-list [class*="col-"] summary{
font-size:115%;
}

body#users-portal-commissions #commissions-list [class*="col-"] .make-payment{
margin:10px 0;
}


body#users-portal-create-account form#create-account-form {
max-width:600px;
margin:20px auto;
}

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


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

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

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

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

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

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

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


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

body[id^=users-portal] #content #column-left ul.navbar-nav >li{
text-align:left;
display:block;
margin:0 0 20px 0;
} 

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

body[id^=users-portal] #content #column-left ul.navbar-nav >li.nav-item b{
font-size:120%;
}

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

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

body[id^=users-portal] #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^=users-portal] #column-left .navbar-brand {
  float: left;
  height: 50px;
  padding: 20px;
  font-size: 20px;
  line-height: 20px;
}


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

#pagination,
.pagination{
margin:20px auto !important;
text-align:center !important;
/*display: inline-block !important;*/
}


.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
 margin: 0 4px;
border: 1px solid #ddd; /* Gray */
}


.pagination a.active {
    background-color: #999;
    color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}



@media (min-width: 768px) {

        body[id^=users-portal] #column-left .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
        }

        body[id^=users-portal] #column-left .sidebar-nav .navbar ul {
        float: none;
        margin:8px 8px 8px 8px;
        text-align:left !important;
        }

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

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

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

}


@media (max-width: 768px) {
	
	body#users-portal-home #accounts-table div[class*="col-"]{
	padding:5px !important;
	margin:0 !important;
	border-bottom:1px solid #e1e1e1;
	}

	body#users-portal-home #accounts-table div{
	text-align:center !important;
	}

}

@media (max-width: 992px) {

	body#users-portal-commissions #commissions-list div#column-headers{
	display:none;
	}

	body#users-portal-commissions #commissions-list [class*="col-"] label{
	display:inline-block;
	}	

	body#users-portal-commissions #commissions-list [class*="col-"]{
	margin:0px;
	}
}