@charset "UTF-8";
/* Registration Template */

* {
    box-sizing: border-box; /**For flexbox**/
}
.background {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    width:100vw;
}
#page-wrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
}
#page-box {
    margin: 1% 0;
    width: 90vw;
    font-size: 1.18vw;
}
@media only screen and (min-width:2000px) and (orientation:landscape)
    {#page-box{width: 80vw;}}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#page-box{width: 96vw;}}

@media only screen and (orientation:portrait)
    {#page-box{width: 96vw;}}
@media only screen and (max-width:768px) and (orientation:portrait)
    {#page-box{font-size: 2vw;}}


#page-body {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-bottom: 3%;
}
#left-column{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width:70%;
    margin-right: 1%;
}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#left-column{width: 95vw;margin-right:0;}}
@media only screen and (orientation:portrait)
    {#left-column{width: 96vw;margin-right:0;}}
@media only screen and (max-width:1024px) and (orientation:portrait)
    {#left-column{font-size:1.3vh;}}/*base unit for all children inside left column*/


#reg-head{
	height:auto;
	background-color:#e0e0e0;
	padding:2% 3% 0.5% 3%;
    margin-bottom: 1.5%;
}
.branch-font-color.reg-head-title{
    font-size: 1.5em;
}
ul{
	list-style: square;
}
li p{
	color:#646464;
}
h4 {
    font-size: 0.8em;
}
#formheader {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height:10em;
    margin-bottom: 1.5%;
}
#form-header-image {
    height: 100%;
    width: 10em;
    background: url("../Assets/registration/sign-up-icon.png") no-repeat center;
    background-size: 80%;
    margin-right: 1.5%;
}
#form-header-label {
    display: flex;
    align-items: center;
    height: 100%;
    font-size:2.5em;
    padding-left: 4%;
    color: #646464;
    width: 85%;
}
#reg-box {
    width: 100%;
}
.reg-section {
    padding: 1% 2% 2% 2%;
    text-align:left;
    background-color: #eeeeee;
    margin-bottom: 1.5%; 
}
.legend-color-size {/**used in form**/
	font-size: 1.5em;
    font-variant: small-caps;
}
form {
    font-size: 1.1em;
}
p b {
    font-size: 120%;/*font-size for Parent/Guardian and Studen*/
}

textarea {
	height:7em;
}
.contact-mail-buttons {
    display:flex;
    flex-flow: row nowrap;
}

.grecaptcha-badge {visibility: hidden;margin-top:-60px;}
.mail-button{
    margin-top:0.5em;
    display:flex;
    justify-content: space-between;
    column-gap:5%;
    flex-flow:row wrap;
}
.mail-button > * {flex:1 100%;}
.mail-button input{flex:1 0 0;}

textarea,
select,
input[type='button'],
input[type='submit'], 
input[type='reset'],
input[type='text'], 
input[type='tel'], 
input[type='email'],
.pulldown         {
    font-family: "Lato";
    border:none;
}
select{
    border:0;
    font-size: 0.8em;
}
textarea,
input[type='text'], 
input[type='tel'], 
input[type='email']{
    width:100%;
    font-size:1em;
    padding-left:10px;
    border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
.pulldown:focus{
    border: 1px solid #888;
    outline: none;
}
input[type='button'],
input[type='submit'], 
input[type='reset']{
    border: none;
    color: white;
    padding: 1.2% 2%;
    text-decoration: none;
    cursor: pointer;
    font-size:1em;
    /*width: 30%;*/
    height:3em;
}
input[type='checkbox'],
input[type='radio']{
    outline:none;
    transform: scale(1.8);
    margin-right:1.1%;
    margin-left:2.5%;
    vertical-align:middle;
    position:relative;
    bottom:3px;
    appearance: none;
    -webkit-appearance: none;
    accent-color: unset; /* disable built-in accent so we paint it */
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    background-color: white;
    cursor: pointer;
}
input[type="checkbox"] {/* Checkbox shape */
    border-radius: 3px;
}
input[type="radio"] {/* Radio shape */
    border-radius: 50%;
}
input[type="checkbox"]:checked::after {/* White check mark for checkbox */
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="radio"]:checked::after {/* White dot for radio button */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
@media only screen and (min-width:769px) and (max-width:1400px) and (orientation: landscape)
    {input[type=checkbox],
    input[type=radio]{
    transform: scale(1.5);
    bottom:2px;}}
@media only screen and (min-width:769px) and (max-width:1024px) and (orientation: portrait)
    {input[type=checkbox],
    input[type=radio]{
    transform: scale(1.5);
    bottom:2px;}}
@media only screen and (max-width:768px) 
    {input[type=checkbox],
    input[type=radio]{
    transform: scale(1.0);
    bottom:2px;}}

#right-column-parent {
    display:flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 30%;
}
@media only screen and (max-width:1400px) and (orientation:landscape)
    {#right-column-parent{display:none;}}
@media only screen and (orientation:portrait)
    {#right-column-parent{display:none;}}


#right-column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}
#right-column-image {
    background: url("../Assets/registration/Girl-Playing-Yamaha.png") no-repeat center;
    background-size: cover;
    width: 19.5em;
    height:29.1em;
    margin-bottom: 10%;
}
@media only screen and (min-width:2000px) and (orientation:landscape)
    {.container-flying-text{font-size:1.5vh;}}


#contactbutton {}
#bottom-box {
    width: 100%;
    height: auto;
    margin-top:5%;
}