* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100vw;
    height: 100vh;
    color: #000000;
    font-weight: normal;
    font-family: "Segoe UI", "Segoe", "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    overflow: hidden;
    font-size: 0.9em;
    font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
}

#noScript { margin:16px; color:Black; }

:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}
:lang(zh){font-family:微软雅黑;}

viewport {
    width: device-width;
}

/* Theme layout styles */

#fullPage, #brandingWrapper {
    	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
    	min-width: 100%;
}
#brandingWrapper
{
    position: absolute;
    background-color:#4488dd;
}
#branding
{       
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: inherit;
    background-repeat: no-repeat;
    background-size: cover;
}
#contentWrapper{
    display: flex;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    min-width: 320px;
    min-height: 338px;
    overflow: hidden;
}

#content
{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    max-width: 440px;
    width: calc(100% - 40px);	
    padding: 44px;
    margin-bottom: 28px;
overflow: hidden;
}
#header
{
    font-size:2em;
    font-weight:lighter;
    font-family:"Segoe UI Light" , "Segoe" , "SegoeUI-Light-final", Tahoma, Helvetica, Arial, sans-serif;
    margin-bottom:0px;
    min-height: 60px;
    word-wrap:break-word;
    overflow:hidden;
}
#header img{
    max-height: 36px;
}

#workArea:before {
    content: "Sign in";
    color: #1b1b1b;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0;
    margin-top: 16px;
    margin-bottom: 24px;
    font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";

}

#workArea
{
    margin-bottom:90px;
    word-wrap:break-word;
}
#footerPlaceholder
{
    height:40px;
}
#footer
{
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: visible;
    z-index: 99;
    clear: both;
    min-height: 28px;
    padding: 0 15px;
}
#footerLinks
{
    float: right;
    padding-top:5px;
    font-size: 12px;
}
#copyright {color:#696969;}
.pageLink { color:#ffffff; padding-left:16px; }

/* Common content styles */

.clear {clear:both;}
.float { float:left; } 
.floatReverse { float:right; } 
.indent { margin-left:16px; } 
.indentNonCollapsible { padding-left:16px; }
.hidden {display:none;}
.notHidden {display:inherit;}
.error { color:#c85305; }
.actionLink { margin-bottom:8px; display:block; }
a
{
    color:#2672ec;
    text-decoration:none;
    background-color:transparent;
}
ul { list-style-type: disc; }
ul,ol,dd { padding: 0 0 0 16px; }
h1,h2,h3,h4,h5,label { margin-bottom: 8px; }
.submitMargin { margin-top:38px; margin-bottom:30px; }
.topFieldMargin { margin-top:8px; }
.fieldMargin { margin-bottom:8px; }
.groupMargin { margin-bottom:30px; } 
.sectionMargin { margin-bottom:64px; }
.block { display: block; }
.autoWidth { width:auto; }
.fullWidth { width: 100%; }
.fullWidthIndent { width:326px; }
.smallTopSpacing { margin-top:15px; }
.mediumTopSpacing { margin-top:25px; }
.largeTopSpacing { margin-top:35px; }
.smallBottomSpacing { margin-bottom:5px; }
.mediumBottomSpacing { margin-bottom:15px; }
.largeBottomSpacing  { margin-bottom:25px; }
input
{
    max-width:100%; 
    font-family:inherit;
    margin-bottom:8px;
box-sizing: border-box;
}
input[type="radio"], input[type="checkbox"] {
    vertical-align:middle;
    margin-bottom: 0px;
}
span.submit, input[type="submit"]
{
    border:none;
    background-color: #0067b8;
    width:auto;
    height:30px;
    padding:4px 20px 6px 20px;
    border-style:solid;
    border-width:1px;
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
	min-width:108px;
    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}
input[type="submit"]:hover,span.submit:hover
{
    background-color: #0067b8;
}
input.text{
    padding: 4px 8px;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(0,0,0,0.4);
    background-color: rgba(255,255,255,0.4);
    height: 32px;
    height: 2rem;
    padding: 6px 10px;
    border-width: 1px;
    border-color: #666;
    border-color: rgba(0,0,0,0.6);
    height: 36px;
    outline: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    padding-left: 0;
   outline: none !important;
}

select
{
    height:28px;
    min-width:60px;
    max-width:100%; 
    margin-bottom:8px;

    white-space:nowrap;
    overflow:hidden;
    box-shadow:none;
    padding:2px;
    font-family:inherit;
}
h1, .giantText
{
   font-size:2.0em; 
   font-weight:lighter;
}          
h2, .bigText
{
   font-size:1.33em;
   font-weight:lighter;
}
h3, .normalText
{
    font-size:1.0em;
    font-weight:normal;
}
h4, .smallText
{
    font-size:0.9em;
    font-weight:normal;
}
h5, .tinyText
{
    font-size:0.8em;
    font-weight:normal;
}
.hint
{
    color:#999999;
}
.emphasis
{
    font-weight:700;
    color:#2F2F2F;
} 
.smallIcon
{
    height:20px;
    padding-right:12px;
    vertical-align:middle;
}
.largeIcon
{
    height:48px;
    /* width:48px; */
    vertical-align:middle;
}
.largeTextNoWrap
{
    height:48px;
    display:table-cell; /* needed when in float*/
    vertical-align:middle;
    white-space:nowrap;
    font-size:1.2em;
}
.idp
{
    height:48px;
    clear:both;
    padding:8px;
    overflow:hidden;
}
.idp:hover 
{
    background-color:#cccccc;
}
.idpDescription
{
    width:80%;
}


#introduction {
    bottom: 0;
    background-color: #f2f2f2;
    padding: 36px 44px 36px 44px;
    position: absolute;
    left: 0;
    margin-bottom: 0px;
}
#submissionArea {  
text-align: right; 
margin-top: 16px;
margin-bottom: 16px;
}
#copyright {color:#696969; display:none;}

#forgot-pw {
    position: absolute;
    top: -60px;
    left: 8%;
}


/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (max-height: 820px) {



    #header {
        min-height:0px;
        overflow: hidden;
    }

    #workArea
    {
        margin-bottom:60px; 
    }
    #introduction {
        background-color: #f2f2f2;
        padding: 24px 44px 36px 60px;
        margin: unset;
    }
}


/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (max-height: 500px) {
    #header {
        padding-top: 30px;
        margin-bottom: 30px;
    }
    #workArea{
        display: inline-block;
        margin-bottom:40px; 
    }
    .groupMargin {
        padding-bottom: 60px;
        margin: 0;
    }

    #loginMessage.groupMargin {
        padding-bottom: 15px;
    }

    #loginMessage.groupMargin {
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
}

/* Form factor: intermediate layout (WAB in non-snapped view falls in here) */
@media only screen and (max-width: 600px) {

#introduction {
    background-color: #f2f2f2;
    padding: 24px 44px 36px 60px;
    margin: unset;
}

    #userNameArea,
    #passwordArea,
    #workArea,
    .fullWidth {
        width: 100%;
    }

    .fullWidthIndent {
        width: 376px;
    }
    #workArea{
        display: inline-block;
        margin-bottom:40px; 
    }
    .groupMargin {
        padding-bottom: 60px;
        margin: 0;
    }

    #loginMessage.groupMargin {
        padding-bottom: 15px;
    }

    #loginMessage.groupMargin {
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
    #forgot-pw {
        left: 8.5%;
    }
}

@media only screen and (max-width: 450px) {
    body {
        font-size: 0.8em;
    }

    #content, #footer {
        width:auto;
    }

    #header {
        width: auto;
    }
    .groupMargin {
        padding-bottom: 60px;
        margin-bottom: 0;
    }

    #loginMessage.groupMargin {
        padding-bottom: 15px;
    }

    #loginMessage.groupMargin {
        padding-bottom: 15px;
        margin-bottom: 30px;
    }

    span.submit, input[type="submit"] {
        font-size: 0.9em;
    }

    .fullWidth
    {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .fullWidthIndent {
        width: 85%;
    }

    .idpDescription
    {
        width:70%;
    }

    #forgot-pw {
        left: 16%;
    }
}

/* Form factor: snapped WAB (for WAB to work in snapped view, the content wrapper width has to be set to 260px) */
@media only screen and (max-width:280px)
{
    .idpDescription
    {
        max-width:160px;
        min-width:100px;
    }
}

/* HRD tiles: keep icon + name on one row at any width (floated name used to wrap under the icon and get clipped) */
.idp
{
    display:flex;
    align-items:center;
    height:auto;
    min-height:48px;
}
.idp .idpDescription
{
    float:none;
    flex:1 1 auto;
    width:auto;
    max-width:none;
    min-width:0;
}
.idp .largeTextNoWrap
{
    display:block;
    height:auto;
    white-space:normal;
}