html,
body {
    height: 100%;
}

#grid {
    display: grid;
    display: -ms-grid;
    grid-template-rows: 20px 2fr 50px;
    -ms-grid-rows:      20px 2fr 50px;
    height: 100%;
    background-color: #fff;
}
.ccp-md #grid {
    grid-template-columns: 0.8fr 2fr 100px;
    -ms-grid-columns:      0.8fr 2fr 100px;
}
.ccp-xs #grid {
    grid-template-columns: 0 2fr 65px;
    -ms-grid-columns:      0 2fr 65px;
}

.grid-left {
    -ms-grid-column:1;
    -ms-grid-column-span:1;
    -ms-grid-row:1;
    -ms-grid-row-span:3;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
}

.ccp-md .grid-left #logo img {
    display: block;
    margin-top: 40px;
    margin-left: 60px;
    margin-right: auto;
    height: 60px;
}

.ccp-xs .grid-left #logo img {
    display: none
}

.grid-top-right {
    -ms-grid-column:3;
    -ms-grid-column-span:1;
    -ms-grid-row:1;
    -ms-grid-row-span:1;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
.grid-center {
    -ms-grid-column:2;
    -ms-grid-column-span:2;
    -ms-grid-row:2;
    -ms-grid-row-span:1;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* This aligns the flex block by center in Desktop mode.*/
.ccp-md .grid-center {
    align-items: center
}

.ccp-md .grid-center > div {
    width: 60%;
    max-width: 600px;
}
.ccp-xs .grid-center > div, .ccp-xs .grid-bottom {
    margin: auto 10px;
}

.grid-bottom-right {
    -ms-grid-column:3;
    -ms-grid-column-span:1;
    -ms-grid-row:3;
    -ms-grid-row-span:1;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}
.grid-bottom {
    -ms-grid-column:2;
    -ms-grid-column-span:1;
    -ms-grid-row:3;
    -ms-grid-row-span:1;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

#already_have_block {
    display: flex;
    margin-bottom:20px;
}

#already_have_primary {
    flex-grow: 1;
    font-size: 2em;
    font-weight: bold;
    line-height:30px;
}

#already_have_secondary {
    align-self:flex-end;
}

.dropup {
    position: relative;
    display: inline-block;
    margin-left:-14px;        // shift left by globe width. lang selector text should be aligned with close button text
}

.ccp-md .dropup .dropup-label {
    padding: 5px 10px;
}
.ccp-xs .dropup .dropup-label {
    padding: 5px 0;
}

.dropup-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 80px;
    bottom: 30px;
    right: 0px;     // activates absolute positioning by x axis
    z-index: 1;
}

.dropup-content a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}

.dropup-content a:hover {background-color: #ccc}
.dropup:hover .dropup-content {
    display: block;
}
.dropup:hover {
    background-color: #F0F0C0;  cursor: pointer;
}
#Modal {
    display: none;
}
#close {
    margin-top: 10px; cursor: pointer;
}
.ccp-md #close {
    padding: 5px 10px;
}
.ccp-xs #close {
    padding: 5px 0;
}

.ccp-copyright {
    margin-top:5px
}
.ccp-md .ccp-copyright {
    margin-left:40px;
}
.ccp-xs .ccp-copyright {
    margin: 5px 0;		// margin-top aligned with ".dropup .dropup-label"
}

.ccp-md .inline-shifted {
    margin-left: 4px
}

#terms-text {
    margin: 20px 40px;
    white-space: pre-line;
}

#login {
    margin-top: 1em;
}
