html, body {
    height: 100%;
}

.map {
    height: 100%;
    min-height: 100%;
    display: block;
}

.map1 {
    height: 100%;
    min-height: 100%;
    display: block;
}

.fill {
    min-height: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.messageTitleColor {
    color: #F0584C;
}

.LoginRightPanel {
    background-color: #2F2257; /*SecondaryColor*/
}

.LoginLeftPanel {
    background-color: white;
}

.LoginDiv {
    /*top:15%; bottom:25%*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.loginform {
    padding: 1em;
    background-color: #271A4C; /*SecondaryColor*/
    border-right: 40px solid #F0584C; /*PrimaryColor*/
    min-height: 30em;
}

.loginPageTextBox {
    border-color: #F0584C !important; /*PrimaryColor*/
    height: 2.5em !important;
}

.loginlinks {
    font-weight: 600;
}

.loginMessageHeader {
    border-bottom: solid 2px #F0584C; /*PrimaryColor*/
    padding: 0.5em;
    color: #FFF;
}

span[id="lblMessages"] > a {
    color: white;
    text-decoration: underline
}


.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 5px auto #F0584C !important; /*PrimaryColor*/
}

.btn-default:hover {
    border-color: #F0584C; /*PrimaryColor*/
}




/* Large screens ----------- */
@media only screen and (max-width: 8000px) and (min-width: 1410px) {
    /* Styles */

    .VTop {
        margin-top: 10%;
    }

    .PLeft {
        padding-left: 10%;
    }

    .loginform {
        width: 416px;
        margin: auto
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1410px) {
    /* Styles */

    .VTop {
        margin-top: 2%;
    }

    .PLeft {
        padding-left: 0px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1199px) {
    /* Styles */

    .VTop {
        margin-top: 10%;
    }

    .PLeft {
        padding-left: 5%;
    }

    .loginform {
        width: 416px;
        margin: auto
    }
}


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .map {
        height: 50%;
        min-height: 50%
    }
}


/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .map {
        height: 100%;
        min-height: 100%
    }
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .map {
        height: 50%;
        min-height: 50%
    }
}


/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .map {
        height: 100%;
        min-height: 100%
    }
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {

    .map {
        height: 50%;
        min-height: 50%
    }
}


/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .map {
        height: 100%;
        min-height: 100%
    }
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    .map {
        height: 50%;
        min-height: 50%
    }
}


/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    .map {
        height: 100%;
        min-height: 100%
    }
}


/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

    .map {
        height: 50%;
        min-height: 50%
    }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .map {
        height: 100%;
        min-height: 100%
    }
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .map {
        height: 50%;
        min-height: 50%
    }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .map {
        height: 100%;
        min-height: 100%
    }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .map {
        height: 50%;
        min-height: 50%
    }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    .map {
        height: 100%;
        min-height: 100%
    }
}