/**
 * Main view formatting */
#application-header-container {
    height           : 75px;
    background-color : #3f4048;
    margin-bottom    : 25px;
}

/**
 * 'Check one more time' ribbon */
#electronic-application-review-banner {
    padding          : 20px 20px;
    text-align       : center;
    font-size        : 18px;
    background-color : lightgrey;
    position         : relative;
    top              : -25px;
    width            : 100%;
}
@media (min-width: 768px) {
    #electronic-application-review-banner {
        padding      : 20px 100px;
        font-size    : 24px;
    }
}

#page-content-wrapper {
    display     : table;
    width       : 100%;
    min-height  : calc(100% - 100px - 395px);
}

#page-content-container {
    height  : 100%;
    width   : 100%;
}

@media (min-width: 992px) {
    #page-content-wrapper { min-height  : calc(100% - 100px - 250px); }
}


/**
 * Page content formatting */
h1 {
    font-weight    : bold;
    letter-spacing : 5px;
    margin         : 25px auto;
}

table {
    width : 100%;
}

table div { border:0px solid red }


/**
 * Styling of form elements */
label { margin-bottom : 0; }

/** Form frame components */
.form-frame {
    border-color : black;
    border-style : solid;
    transition   : background-color 0.5s;
}

.form-frame.h50 { min-height : 50px; }
.form-frame.h60 { min-height : 60px; }
.form-frame.h75 { min-height : 75px; }

.form-frame.left-thick      { border-left-width   : 2px; }
.form-frame.right-thick     { border-right-width  : 2px; }
.form-frame.top-thick       { border-top-width    : 2px; }
.form-frame.bottom-thick    { border-bottom-width : 2px; }

.form-frame.left-thin       { border-left-width   : 1px; }
.form-frame.right-thin      { border-right-width  : 1px; }
.form-frame.top-thin        { border-top-width    : 1px; }
.form-frame.bottom-thin     { border-bottom-width : 1px; }

.form-frame.left-thick-xs   { border-left-width   : 2px; }
.form-frame.right-thick-xs  { border-right-width  : 2px; }
.form-frame.top-thick-xs    { border-top-width    : 2px; }
.form-frame.bottom-thick-xs { border-bottom-width : 2px; }

.form-frame.left-thin-xs    { border-left-width   : 1px; }
.form-frame.right-thin-xs   { border-right-width  : 1px; }
.form-frame.top-thin-xs     { border-top-width    : 1px; }
.form-frame.bottom-thin-xs  { border-bottom-width : 1px; }

.form-frame.left-thick-md,   .form-frame.left-thin-md   { border-left-width   : 0; }
.form-frame.right-thick-md,  .form-frame.right-thin-md  { border-right-width  : 0; }
.form-frame.top-thick-md,    .form-frame.top-thin-md    { border-top-width    : 0; }
.form-frame.bottom-thick-md, .form-frame.bottom-thin-md { border-bottom-width : 0; }

@media (min-width: 768px) {
    .form-frame.left-thick-xs,   .form-frame.left-thin-xs   { border-left-width   : 0; }
    .form-frame.right-thick-xs,  .form-frame.right-thin-xs  { border-right-width  : 0; }
    .form-frame.top-thick-xs,    .form-frame.top-thin-xs    { border-top-width    : 0; }
    .form-frame.bottom-thick-xs, .form-frame.bottom-thin-xs { border-bottom-width : 0; }

    .form-frame.left-thick-md   { border-left-width   : 2px; }
    .form-frame.right-thick-md  { border-right-width  : 2px; }
    .form-frame.top-thick-md    { border-top-width    : 2px; }
    .form-frame.bottom-thick-md { border-bottom-width : 2px; }

    .form-frame.left-thin-md    { border-left-width   : 1px; }
    .form-frame.right-thin-md   { border-right-width  : 1px; }
    .form-frame.top-thin-md     { border-top-width    : 1px; }
    .form-frame.bottom-thin-md  { border-bottom-width : 1px; }
}

.form-frame.section-title { background-color: #eaeaea; }

 /** Same height container **/
 .table-container       { display: table;      width: 100%; height: 100%; }
 .table-container > div { display: table-cell; width: 100%;  }
 .content-bottom        { vertical-align : bottom; }
 .content-middle        { vertical-align : middle; }

.general-field-container > ul {
    list-style-type : none;
    margin          : 0;
    padding         : 0px 0px 0 15px;
}
.fieldWrapper > ul > li, .fieldWrapper > ul > li > label { margin-bottom : 0px; }
.gender-selector              > div:first-child { border : 4px solid transparent; border-radius: 4px; }
.gender-selector:focus-within > div:first-child { border-color : #7ab3d6; }

.school-title {
    font-size      : 130%;
    font-weight    : 600;
    text-transform : uppercase;
    line-height    : 1.2;
}
.school-under-title {
    margin-top     : 2px;
    border-top     : 1px dotted black;
    text-align     : center;
    font-size      : 10px;
}
#id_gender { display: inline; padding-left: 6px; }
#id_gender > li { display: inline; }
#id_gender > li:first-child { margin-right: 10px; }
#id_side_subject_choice > li { display: inline; }
#id_side_subject_choice > li:first-child { margin-right: 10px; }
#id_shifting_schedules { display: inline; padding-left: 6px; }
#id_shifting_schedules > li { display: inline; }
#id_shifting_schedules > li:first-child { margin-right: 10px; }

/** Formatting of form components */
label { font-size : 15px; }
label[for*="payment-method"] { font-size : 19px; }
label.normal-label { width : 75px; }
label.normal-label + input,
label.normal-label + select { width : calc(100% - 80px); }

label.short-label  { width : 50px; }
label.short-label + input,
label.short-label + select { width    : calc(100% - 55px);
                             position : relative;
                             top      : -1px; }

label.small-text {
    font-size : 9px;
    position  : relative;
    top       : 4px;
}


/* Standard height of fields */
input[type="text"]:not(.numeric-field),
input[type="email"]:not(.numeric-field) { height : 29px !important; }

/* Remove special Apple formatting of components */
input[type="text"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:focus, textarea:focus, select:focus { background-color : white; }
input[type="number"] { text-align : center; }
[class*="col-md"].form-frame:focus-within,
[class*="col-md"].form-frame:focus-within input:not(:focus) { background-color : #ffefad; }

input:focus, select:focus, textarea:focus {
 /* border         : 4px solid #7ab3d6;
    border-radius  : 4px; */
    background-color: #eee;
}

/* Specify format for all numeric text input fields */
.fieldWrapper input.numeric-field {
    font-size      : 22px;
    width          : 50px;
    text-align     : center;
}

/* Prevent select fields from jumping */
.selectWrap {
    border-bottom  : 1px dotted black;
    height         : 32px;
}


/* Generic formatting for all textareas */
.form-frame textarea {
    display     : block;
    width       : calc(100% - 1px);
    height      : 50px;
    margin-left : 0px;
}

/*
 * Error styling */
.errors > input { border: 1px solid red; color:red; }
.errorlist > li { font-size : 11px; color:red; }

.general-field-container.has-error {
    border        : 2px solid red;
    border-radius : 5px;
    height        : 54px;
    padding       : 0 5px;
}
.error-bar-cover { float:left; width : 80%; }
.error-bar-cover > div {
    background-color: white;
    top: -2px;
    position: relative;
    padding: 0 10px;
    font-size: 85%;
    color: red;
    left: 30px;
    display: inline-block;
}


.has-help { cursor : help; }
.info-icon {
    width            : 15px;
    height           : 15px;
    background-color : #8fa1ff;
    display          : inline-block;
    text-align       : center;
    color            : white;
    font-size        : 10px;
    position         : relative;
    top              : -2px;
    padding-top      : 1px;
    border-radius    : 3px;
    margin           : 2px;
}

/** Component tweaks - for mobile or all */
input#id_student_full_name  { width : calc(100% - 0px); }
input#id_birth_date { text-align : center; padding-left: 0; padding-right: 0; }
input#id_emso { text-align: center; }
input#id_city { width : 100%; }
input#id_caretaker_ZIP  { width : 60px; text-align: center; }
input#id_caretaker_city { width : 100%; }


/**
 * Error field formatting */
.error-field {
    background-color : #ececec;
    padding          : 10px 20px;
    border-radius    : 6px;
    border           : 1px dotted darkgrey;
    font-family      : monospace;
    font-size        : 16px;
    margin           : 20px 0;
    overflow-x       : auto;
    max-width        : 84vw;
}

/**
 * PIN code entry field */
#input-pin-code {
    font-family      : monospace;
    font-size        : 34px;
    padding          : 16px 0px 16px 26px;
    text-align       : left;
    width            : 170px;
    letter-spacing   : 10px;
    border-radius    : 6px;
    border           : 2px solid #7d1111;
    margin-bottom    : 10px;
    text-transform   : uppercase;
}


/**
 * CONSENT FORM */
.consent-no ,
.consent-yes  {
    font-size  : 18px;
}

.consent-no  > div,
.consent-yes > div {
    text-align    : center;
    width         : 45px;
    float         : right;
    height        : 45px;
    padding       : 8px 6px;
    border-radius : 50px;
    border-width  : 3px;
    border-color  : transparent;
    border-style  : solid;
    cursor        : pointer;
}
.consent-no  > div.is-selected,
.consent-yes > div.is-selected { border-color:black !important; }


.consent-no {
    width      : 50%;
    float      : left;
    text-align : left;
    padding    : 10px 50px;
}
.consent-no > div { float : left; }

.consent-yes {
    width      : 50%;
    float      : left;
    text-align : right;
    padding    : 10px 50px;
}
.consent-yes > div { float : right; }

.consent-divider { padding : 25px 5px 10px; }
.consent-divider > div {
    border-top : 1px solid black;
    width      : 100%;
}