body {
}

.myGrid {
    width: 100%;
    height: 400px;
}

.pad0 {
    padding: 0px !important;
}

#input_container {
    position: relative;
    padding: 0;
    margin: 0;
}

#input {
    margin: 0;
    padding-left: 10%;
}

#input_img {
    position: absolute;
    bottom: 20%;
    left: 3%;
    width: 20px;
    height: 20px;
}

.floatright {
    float: right !important;
}

.floatleft {
    float: left !important;
}

.Width7 {
    width: 7% !important;
}

.grid-msg-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
}

.grid-msg-overlay .msg {
    opacity: 1;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 50%;
    background-color: #fff;
    /*border-radius: 4px;
    border: 1px solid #555;*/
    text-align: center;
    font-size: 24px;
    display: table;
 }


.grid-msg-overlay .msg span {
    display: table-cell;
    vertical-align: middle;
}

.page-loading {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
}

.page-loading .msg {
    opacity: 1;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 50%;
    background-color: #fff;
    /*border-radius: 4px;
    border: 1px solid #555;*/
    text-align: center;
    font-size: 24px;
    display: table;
 }


.page-loading .msg span {
    display: table-cell;
    vertical-align: middle;
}

.spinner {
    position: absolute;
    left: 30%;
    top: 50%;
    bottom: 50%;
    right: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0,174,239,.15);
    border-right: 6px solid rgba(0,174,239,.15);
    border-bottom: 6px solid rgba(0,174,239,.15);
    border-top: 6px solid rgba(0,174,239,.8);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.form-group label.mandatory:after {
    content: "*";
    color: red;
}

input.ng-invalid {
    border: 2px red solid;
}

select.ng-invalid {
    border: 2px red solid;
}

.ui-grid-header-canvas {
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.mrgtop5 {
    margin-top: 5%;
}

.padlef5 {
    padding-left: 2%;
}

.ui-grid-pager-control .first-bar {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    width: 10px;
    border-left: solid black !important;
    margin-top: 0px !important;
    height: 12px !important;
    margin-left: 0px;
}

.ui-grid-pager-control .first-triangle {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    border: solid black !important;
    border-width: 0 3px 3px 0 !important;
    display: inline-block !important;
    padding: 3px !important;
}

.ui-grid-pager-control .next-triangle {
    margin-left: 1px;
}

.ui-grid-pager-control .prev-triangle {
    margin-left: 0;
}

.ui-grid-pager-control .last-triangle {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border: solid black !important;
    border-width: 0 3px 3px 0 !important;
    display: inline-block !important;
    padding: 3px !important;
}

.ui-grid-pager-control .last-bar {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 10px;
    border-left: solid black !important;
    margin-top: 0px !important;
    height: 12px !important;
    margin-left: 5px !important;
}

.ui-grid-pager-control button {
    background-color: transparent !important;
    border: none !important;
}

/**********/
/*Styles given by the UI*/
body{
    background-image: url("../images/login_page.jpg");
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    overflow: hidden
}

* {
    box-sizing: border-box;
    
}
img{
    display: block;
    
    width: 18%;
    height: 20%;
    margin: 10% auto 0 auto;
    
}

.logo-text{
    color:black;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.085em;
    font-size: 1.2vw;
    text-align: center;
    font-family: 'calibri' ;
}

.login-container{
    position: relative;
    width: 19.5%;
    top: 49%;
    left: 40.5%;
    

    
}

.input-container{
    display: flex;
    margin-bottom: 5%;
    border: 2px solid rgba(0,0,0,0.4);
    border-radius: 5.5px;
    background: rgba(255,255,255,0.8);
    box-shadow:inset 0px 1px 6px 1px rgba(0,0,0,0.3);
}
.input-container span:first-child{
    display: flex;
    flex-basis: 18%;
    justify-content: center;
    padding: 2.8% 0;
    
}
.input-container input{
    display: flex;
    flex-basis: 82%;
    border: none;
    /*border-left: 1px solid rgba(0,0,0,0.4);*/
    padding-left: 4%;
    background: none;
    letter-spacing: 0.05em;
    font-family: 'Lato', sans-serif;
}
.input-container input:focus{
    outline: none !important;
}
.left-border{
    border-left: 1px solid black;
    margin-top: 1.5%;
    height:20px;
}
.sbmt-btn{
    width: 100%;
    color: white;
    background-color: #0A315D;
    border: none;
    border-radius: 4px;
    padding: 3% 0 1.5% 0;
    font-family: 'calibri' ;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow:inset 0px 14px 6px 1px rgba(255,255,255,0.55);
}

.footer-text{
    color: white;
    font-size: 1vw;
    position: absolute;
    bottom: -0.4%;
    right:4%;
}

.AddEditProfilePanel {
    background-color: rgba(255, 255, 255, 0.3) !important;
    opacity: 1.0 !important;
    border-radius: 0px 0px 5px 5px;
    height: 465px !important;
    border: 1px solid white;
    border-top: none;
    overflow: auto;
    overflow-x: hidden;
}
.Edittextheader{
    font-size: 15px;
padding-top: 6px;
text-decoration: underline;
}


@media  screen and (max-width: 1680px) and (max-height:1050px) {
    /* insert styles here */
    img{

        margin: 13% auto 0 auto;
    }
    
}


/* (1440x900) */
@media  screen and (max-width: 1440px) {
    /* insert styles here */
    img{
        width: 18%;
        height: 20%;
        display: block;
        margin: 12% auto 0 auto;
    }
    
}

/* (1280x1024) */
@media screen and (max-width: 1280px) and (max-height: 1024px){
    /* insert styles here */
    img{

        margin: 15% auto 0 auto;    
    }
    .footer-text{
        bottom: -0.1%;
        }
}



/* (1280x800) */
@media screen and (max-width: 1280px) and (max-height: 800px) {
    img{
        width: 18%;
        height: 19%;
        display: block;
        margin: 12% auto 0 auto;
        
    }
     .login-container{
        top: 0 %;
    }
    
    .footer-text{
        bottom: -0.5%;
        right:4%;
        font-family: 'calibri';
    }
    
}


/*(1280x720) */
@media screen and (max-width: 1280px) and (max-height: 720px){
    img{
        width: 18%;
        height: 19%;
        display: block;
        margin: 11% auto 0 auto;
        
    }
    .footer-text{
        bottom: -1%;
    }
}

/*(1024x768) */
@media screen and (max-width: 1024px) and (max-height: 768px) {
    img{
        width: 18%;
        height: 19%;
        display: block;
        margin: 13% auto 0 auto;
        
    }
    .login-container{
        top: 46%;
    }
}
/*(1152x864) */

@media screen and (max-width: 1152) and (max-height: 864px) {
    img{
        margin: 18% auto 0 auto;
        
    }
    .login-container{
        top: 40%;
    }
}





.ForTest {color:red;}