/* Main Colours Used

    black:      #000000
    Dark Grey:  #333333
    Grey:       #868686
    light Grey: #999999
                #bbbbbb
    white:      #FFFFFF
*/

/*  Initial Page Config  */

body { margin: 0; padding: 0; background: transparent; }
a { text-decoration: none; }
body, h1, h2, h3, p, input, textarea { font-family: 'Lato', 'Open Sans', sans-serif; }


/*  General  */

.hidden { display: none; }
i.hidden {display: none; }
div.inherit { width: inherit; }

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}



/* Mobile CSS */

.Desktop { display: none; }
.desktop { display: none; }
.Mobile { display: none; }
.mobile { display: none; }
.clickable { cursor: pointer !important; }


/*  Containers  */

div.scoi_split.w45 { width: 100%; }
div.scoi_split.left { float: left; clear: left; }
div.scoi_split.right { float: right; clear: right; }
div.scoi_split.w12.center { margin: 30px 25%; }
div.scoi_split.w23.center { margin: 30px 16.66%; }
div.scoi_split.w12.center.fw, div.scoi_split.w23.center.fw { margin: 0; }
div.scoi_split.fw { width: 100% !important; float: left; clear: both !important; }
div.scoi_split.fixed { position: fixed; }
div.scoi_split.transition { transition: all 0.5s }

div.scoi_section { width: calc(100% - 20px); float: left; position: relative; margin: 10px; background: transparent; overflow: hidden; }
div.scoi_section.in-content { border: none; margin: 0 0 10px 0; width: 100%; box-shadow: none; }
div.scoi_section h3 { font-size: 18px; font-weight: 400; width: 100%; margin: 0; padding: 5px; text-align: center; box-sizing: border-box; letter-spacing: 1px; cursor: default; }
div.scoi_section h3 a { color: white; text-decoration: none; }
div.scoi_section h3 i { float: right; padding: 1px; }
div.scoi_section .content > p { margin: 5px 10px 5px 10px; width: calc(100% - 20px); clear: both; float: left; box-sizing: border-box; }
div.scoi_section h4 { margin: 10px; width: calc(100% - 20px); clear: both; float: left; box-sizing: border-box; }

/* Input Layout */

div.input6 {
    float: left;
    width: 100%;
    margin: 25px 0 0 0;
}

div.input6 input {
    float: left;
    margin: 0;
    padding: 20px;
    width: calc(100% - 50px);
    font-size: 20px;
}

div.input6 input[type="button"] {
    width: 580px;
}

div.input6 select {
    float: left;
    margin: 0;
    padding: 20px;
    width: calc(100% - 5px);
    font-size: 20px;
}

div.input6.dob select {
    height: 68px;
    float: left;
}

div.input6.dob select.day {
    width: 30%;
    clear: none;
}

div.input6.dob select.month {
    width: calc(40% - 11px);
    clear: none;
    margin-left: 11px;
}

div.input6.dob select.year {
    clear: none;
    width: calc(30% - 12px);
    margin-left: 11px;
}

div.input6 i {
    color: ghostwhite;
    font-size: 20px;
    margin: 8px;
    float: left;
}

div.input6 i:hover {
    cursor: pointer;
}

div.input6 label {
    margin: 5px;
    /*width: calc(100% - 10px);*/
    /*color: #fe389a;*/
    color: ghostwhite;
    font-size: 20px;
    clear: none;
}

div.input6 p {
    float: left;
    margin: 0 0 0 40px;
    clear: both;
    color: ghostwhite;
}


div.form_success { float: right; padding: 8px; clear: none; }
div.form_success p { font-size: 16px; float: left; line-height: 28px; margin: 5px 7px 2px 5px; padding: 0; clear: none; width: auto; max-width: calc(100% - 70px); }
div.form_success i { color: green; font-size: 24px; float: left; clear: left; padding: 5px 5px 5px 0; }
div.form_success i.large { font-size: 36px; margin: 10px; padding: 0; }
div.form_success.label i { margin: 17px 0 0 0; }

div.form_errors { float: left; padding: 10px 25px; clear: both; width: calc(100% - 20px); background-color: #FFFCE1; box-sizing: border-box; border: solid #999999 1px; margin: 10px; }
div.form_errors p { font-size: 16px; float: left; line-height: 28px; clear: none; padding: 0; margin: 5px 0 2px 15px; width: calc(100% - 50px); text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }
div.form_errors i { color: #E2B921; font-size: 24px; float: left; clear: left; padding: 5px 0; }
div.form_errors i.large { font-size: 36px; margin: 10px; padding: 0; }


.no_clear { clear: none; }
.automargin { margin-left: auto; margin-right: auto; position: absolute; }

td { font-size: 12px; }

a { color: #6698FF; }
a.scoi_join { text-decoration: none; }
a:hover { color: black; }

label { float: left; font-weight: bold; clear: both; font-size: 14px; }

h1,h2,h3,h4,h5,h6,strong,th/*,label*/ { color: #fe389a; }

hr { float: left; clear: both; width: 100%; }

div.inherit { width: inherit; }

div.right { float: right; }
div.left { float: left; }
.clear { clear: both; }

h3.scoi_section {
    text-indent: 5px;
    margin: 0 0 10px 0;
    padding-top: 6px;
    height: 24px;
    width: 100%;
    clear: both;
    float: left;
    color: white;
    text-decoration: none;
}


.button-tiny { float: left; clear: none; border: 1px solid ; color: #6698FF; border-radius: 5px; font-weight: normal; height: 19px; margin: 1px 2px; cursor: pointer; }
.button-tiny:hover { background: #6698FF; color: white; outline: none;}
.button-tiny:focus { background: #6698FF; color: white; outline: none; box-shadow: none; }
.button-small { float: left; clear: none; border: 1px solid #6698FF; color: #6698FF; border-radius: 10px; font-weight: bold; height: 29px; margin: 0 2px 0 2px; cursor: pointer; }
.button-small:hover { background: #6698FF; color: white; outline: none }
.button-small:focus { background: #6698FF; color: white; outline: none; box-shadow: none; }
.button-big { float: left; clear: none; border: 1px solid #6698FF; color: #6698FF; margin: 10px; padding: 10px; border-radius: 10px; font-weight: bold; font-size: 14px; cursor: pointer; }
.button-big:hover { background: #6698FF; color: white; outline: none; }
.button-big:focus { background: #6698FF; color: white; outline: none; box-shadow: none; }

.button-green:hover, .button-green:focus { background: #fe389a !important; cursor: pointer; }
.button-red:hover, .button-red:focus { background: red !important; }
.button-black:hover, .button-black:focus { background: black !important; }
.button-orange:hover, .button-orange:focus { background: #FF9900 !important; }
.button-blue:hover, .button-blue:focus { background: #3883fd !important; }
.button-disabled { color: darkgrey !important; border-color: darkgrey !important; background: #f5f5f5 !important; }
.button-disabled:hover { color: darkgrey !important; border-color: darkgrey !important; box-shadow: none; background: #f5f5f5 !important; cursor: default; }

.email_hover { display: none; position: absolute; max-width: 250px; background: #dedede; top: 30px; left: 10px; padding: 5px; border: 1px solid black; border-radius: 8px; z-index: 99; }


textarea.mh100 { max-height: 100px; }
textarea.mh200 { max-height: 200px; }
textarea.mh280 { max-height: 280px; }

.break { clear: right; }

.ui-widget-overlay { position: fixed !important }
.ui-dialog-titlebar-close span { margin: -8px !important; }

.marg0 { margin: 0 !important; }
div.no-overflow { overflow: hidden; border-radius: inherit; }

i.small { font-size: 18px; margin: 5px 0; width: inherit; text-align: center; }
i.medium { font-size: 60px; margin: 5px 0; width: inherit; text-align: center; }
i.large { font-size: 100px; margin: 10px 0; width: inherit; text-align: center; }

th.separation { background: #6698FF; padding: 6px 4px; border-radius: 10px 10px 20px 20px; vertical-align: top }

i.header { font-size: 24px; margin: 1px; padding: 0; }

table.hover tr:hover { background-color: lightgray; }