body { padding: 0; margin: 0; background-color: #d7d7d7; font-family: Quicksand, sans-serif; }
.page-header { position: fixed; background-color: white; margin: 0; left:0; top: 0; width: 100%;  }
.page-header .logged-in-user { float: right; margin: 10px; display: none;}
.page-header .selection { float: right; margin: 10px;}
.page-header .sel-count { color: rgb(51, 122, 183) !important; border: none; background: none !important; cursor: pointer;  }
.page-header .sel-count:hover { text-decoration: underline; color:rgb(241, 101, 73); }
.page-header .logo {width:64px; vertical-align: middle; margin: 5px; float: left;} 
.page-header button { padding: 10px; text-align: center; display: inline-block; color: white; 
                      font-weight: bold; background-color: rgb(51, 122, 183); border: none;
                      margin: 0; border-radius: 3px; cursor: pointer; }
.page-header button:hover { background-color: rgb(241, 101, 73); }
.page-header .ieps-name { display: inline-block; margin: 10px 0 0 0; }
.page-header .ieps-name+br+span { display: inline-block; font-size: 12px;}
.page-header .ieps-name+br+span > a { text-decoration: none; color: black;}
.page-header .ieps-name+br+span > a:hover { text-decoration: underline;}


.container { display: flex; justify-content: center !important; margin: 100px auto; }

div[data-step] { display: none; }
div[data-step='1'] { display: block; }

.container .search { text-align: center; padding-bottom: 10px; border-bottom: solid 1px #888; margin-bottom: 20px;}
.container .search-course { padding: 5px 10px; width: 400px;} 
.container .template,
.container .cart,
.container .courses { display: none; }
.container .cart main { background-color: white; padding: 10px; margin-bottom: 30px; width: 1000px; text-align: center;}
.container .cart button#empty-cart  { padding: 20px 40px; text-align: center; display: inline-block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               margin: 20px 0; border-radius: 3px; cursor: pointer; }
.container .cart button#empty-cart:hover { background-color: rgb(51, 122, 183); }

.container .groups-header { text-align: center; background-color: white; padding: 5px 10px; margin-bottom: 10px; width:800px;; }
.container .groups-header h3 { font-size: 16px;}
.container .groups-header p { text-align: justify; font-size:12px;}
.group { display: flex; flex-direction: row; box-sizing: border-box; box-shadow: 4px 4px 4px #777;  background-color: white; margin-bottom: 20px;}
.group .img { background: rgba(0, 0, 0, 0) repeat scroll 0% 0% / cover; width:180px;}
.group .text { width: calc(100% - 180px); padding: 20px;}
.group .text h2 { margin: 0; font-size: 16px; }
.group .text p { min-height: 120px; min-width: 380px; font-size:10px;} 
.group .sched-pdf { font-weight: bold; text-decoration: none; color: rgb(51, 122, 183); }
.group .sched-pdf:hover { text-decoration: underline; color: rgb(241, 101, 73);  }
.group[data-pack='0'] .group-add-cart { display: none;}
.group[data-pack='1'] .group-add-cart { float:right; display: inline-block; background-color: rgb(51, 122, 183); color: white; font-weight: bold; padding: 10px; border: none; cursor: pointer;  }
.group[data-pack='1'] .group-add-cart:hover { background-color: rgb(241, 101, 73);   }
.group .group-details { border: none; background: none; display:inline-block; color: rgb(51, 122, 183); cursor: pointer; padding:10px 0;  }
.group .group-details:hover { text-decoration: underline; }

.container header,
.container footer.back-to-groups { background-color: white; cursor: pointer; padding: 10px; margin-bottom: 30px; color: rgb(51, 122, 183);  }
.container footer.review-cart { background-color: white; cursor: pointer; padding: 10px; margin-bottom: 30px; color: rgb(51, 122, 183);  text-align: right; }


.course { display: flex; flex-direction: row; box-sizing: border-box; box-shadow: 4px 4px 4px #777;  background-color: white; margin-bottom: 20px; max-width: 1000px;}
.course .img { background: rgba(0, 0, 0, 0) repeat scroll 0% 0% / cover; width:180px;}
.course .text { width: calc(100% - 180px); padding: 20px;}
.course .text h2 { margin: 0; font-size: 14px; }
.course .text h4 { margin: 0; font-size: 11px; }
.course .text p { min-height: 120px; min-width: 380px; font-size:10px;} 
.course .buttons { text-align: center; }
.course .sched-pdf { margin-left:10px; font-weight: bold; text-decoration: none; color: rgb(51, 122, 183); }
.course .sched-pdf:hover { text-decoration: underline; color: rgb(241, 101, 73);  }
.course .course-add-cart { float:right; display: inline-block; background-color: rgb(51, 122, 183); color: white; font-weight: bold; padding: 10px; border: none; cursor: pointer; font-family: Quicksand,sans-serif; font-size: 14px;  }
.course .course-add-cart:hover { background-color: rgb(241, 101, 73);   }
.course .avail.full + .course-add-waitlist + .course-add-cart { display: none; }
.course .avail:not(.full) + .course-add-waitlist { display: none; }
.course .course-add-waitlist { float:right; display: inline-block; background-color: #99558e; color: white; font-weight: bold; padding: 10px; border: none; cursor: pointer; font-family: Quicksand,sans-serif; font-size: 14px;  }
.course .course-add-waitlist:hover { background-color: #7327a8;   }
.course .course-add-cart+span { display: none; font-family: Quicksand,sans-serif; font-size: 14px;}
.course.selected .course-add-cart { display: none; }
.course.selected .course-add-waitlist { display: none; }
.course.selected .course-add-cart+span { float:right; display: inline-block; background-color: rgb(241, 101, 73); color: white; font-weight: bold; padding: 10px; border: none; }
.course .course-details { border: none; background: none; display:inline-block; color: rgb(51, 122, 183); cursor: pointer; padding:10px 0; float:left; }
.course .course-details:hover { text-decoration: underline; }
.course .avail { text-align: center; display:inline-block; padding:5px 10px; margin-top:5px; color: white; background-color: rgb(51, 122, 183); font-weight: bold; border-radius: 3px; }
.course .avail.full { background-color: firebrick; font-weight: bold;}
.course.no-wl .course-add-waitlist { visibility: hidden !important;}

.auth { margin-top: 30px; width: 450px; background-color: white; padding: 5px; }
.auth h1, .auth h3 { text-align: center; margin: 0;}
.auth p { text-align: justify;}
.auth .error { color: red; display: none; margin-bottom: 10px;}
.auth .error a { color: red; }
.auth .error.success { color: rgb(51, 122, 183); display: none; margin-bottom: 10px;}
.auth label { font-weight: bold;}
.auth .link { padding: 10px 5px; cursor:pointer; color: rgb(51, 122, 183);  }
.auth .link:hover { text-decoration: underline;}

.auth input { display: block; width: 100%; margin: 5px 0 20px; border: none; border-bottom: solid 1.5px #ccc; }
.auth button { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
.auth button:hover { background-color: rgb(51, 122, 183); }

.profile { margin-top: 30px; max-width: 1000px; }
.profile main { background-color: white; padding: 10px; margin-bottom: 30px;}
.profile label { font-weight: bold; font-size: 14px;}
.profile input { display: block; width: calc(100% - 50px); margin: 5px 0 20px; border: solid 1.5px #ccc; border-radius: 2px; margin: 5px; padding: 8px 10px; }
.profile select { display: block; width: calc(100% - 50px); margin: 5px 0 20px; border: solid 1.5px #ccc; border-radius: 2px; margin: 5px; padding: 8px 10px; }
.profile button { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
.profile button:hover { background-color: rgb(51, 122, 183); }
.profile .link { padding: 10px 5px; cursor:pointer; color: rgb(51, 122, 183);  }
.profile .link:hover { text-decoration: underline;}

.profile main .row {display: flex; flex-direction: row; width: 800px;}
.profile main .row  .w100 { flex: 0 0 100%;}
.profile main .row  .w75 { flex: 0 0 75%;}
.profile main .row  .w50 { flex: 0 0 50%;}
.profile main .row  .w45 { flex: 0 0 45%;}
.profile main .row  .w33 { flex: 0 0 33.33%;}
.profile main .row  .w20 { flex: 0 0 20%;}

.cart-review  button#do-reg  { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
.cart-review button#do-reg:hover { background-color: rgb(51, 122, 183); }
.cart-review main { background-color: white; padding: 10px; margin-bottom: 30px; width: 1000px;}
.cart-review .exo-explain { display: none; border: solid 1px #777; background-color: #ddd; font-size: 10px; padding: 5px;margin: 5px; width: 350px; }                                                                               

.tbl-courses { width: 100%; }
.tbl-courses tfoot { display: none; }
.tbl-courses thead th { text-align: center; color:white; background-color: rgb(51, 122, 183); padding: 2px 5px; }
.tbl-courses tbody .course-per { display: block; padding: 0 5px; text-align: center; width: 60px;}
.tbl-courses tbody td { padding: 2px 5px; text-align: left; }
.tbl-courses tbody tr:nth-child(even) { background-color: #ddd; }
.tbl-courses tbody tr:last-child td { border-bottom: solid 2px rgb(51, 122, 183); }
.tbl-courses .cart-empty-row td { padding: 10px; font-weight: bold; text-align: center; background-color: yellow; font-size: 14px; }
.tbl-courses .waitlist td { background-color: #c6b6df; }
.tbl-courses .waitlist span.wl { background-color: #99558e; color: white; font-weight: bold; margin: 1px 15px; padding: 1px 5px; }
.cart-review .global-cost { float:right; display: inline-block; max-width: 400px; text-align: center; }
.cart-review .global-cost .amount { display: inline-block; padding: 10px 20px; border: solid 2px rgb(51, 122, 183); color: rgb(51, 122, 183);  background-color: #deedf7; font-weight: bold; text-align: center; }
.cart-review .global-cost p { font-size: 12px; text-align: justify; }
.cart-review .bottom { clear: both;}
.remove-course-from-cart { border: none; background-color: #e69090; border-radius: 3px; display: inline-block; padding: 2px; text-align: center; cursor: pointer; }
.remove-course-from-cart img { width: 24px; height: 24px; vertical-align: middle; }
.cart-review .select-exo { border: solid 1.5px #ccc; border-radius: 2px; margin: 5px; padding: 8px 10px; width: 350px; }
.cart-review .error { color: red; display: none; font-weight:bold; padding-top: 30px;}
.reg-confirmed { background: white; margin-top: 100px; padding: 20px; max-width: 1000px;}
.reg-confirmed h2 { margin-bottom: 40px; }
.reg-confirmed p { text-align: justified; }

.cost-unofficial { display: none; color: darkred; font-weight: bold; border: solid 2px darkred; padding: 3px 8px; background-color: #f0a8a8;}
.roi-accept { background-color: white; padding: 10px;}
.chk-roi { transform: scale(1.5); margin:  20px;}
.link-roi { color: #555;}

.email-verify, #verify-email { display: none; }
input[name='mail-verif-code'] { font-size: 26px; text-align: center; width: 100px; font-family: quicksand; }

span.mf { color: red; }
#msgBoxROI { display: none; }
#msgBoxROI > div { background-color: white; padding: 20px 10px; height: calc(100% - 50px);}

button#docs-upload { padding: 20px 0; text-align: center; display: block; color: white; 
               font-weight: bold; background-color: rgb(241, 101, 73); border: none;
               width: 100%; margin: 20px 0; border-radius: 3px; cursor: pointer; }
button#docs-upload:hover { background-color: rgb(51, 122, 183); }