h2,h3{color:#B5111B}
h1,h2,h3{font-weight:500}
h1{font-size:40px}
.btn-primary.disabled,.btn-primary[disabled]{background-color:#519387;border-color:#488378}
.btn-toolbar{border-bottom:1px solid #ddd}
.navbar{margin:0}

#main-logo{
    width:8%;
    height:15%;
}
.login-header{
    color:#7B3E34;
}
.login-box{
    margin-top: -30px;
}
.textboxcustom{
    border:2px solid #970000 !important;
    border-radius: 0;
}
#sdi{
    font-size: 25px;
}
.formbtncustom{
    background-color: #970000;
    outline:0;
    border: none;
}
.formbtncustom:hover{
    background-color: #970000;
    outline:0;
    border: none;
}
#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    text-align: center;
    background-color: #EFEFEF;
    padding: 10px;
}
#satslogo{
    width: 100px;
    height: auto;
}
#headertext{
    font-weight: bold;
    margin-bottom: 2%;
}
.user-name{
    color:#B5111B;
    font-weight: 500;
    font-family: inherit;
    font-size: 110%;
}
.account-holder{
    margin-top: 5%;
}
#app-tab{
    width:100% !important;
}
#app-tab .tab-content{
    background-color: #fff;
    padding : 5px 15
}
.box{
    display: flex;
    align-items:center;
}
.app-name{
    color:#410303;
    font-weight: 500;
    padding-left: 2%;
}
#sdixs{
    font-size: 20px;
    padding-right: 5%;
}
.app-image{
    width:60px;
    height:60px;
}
.menu {
    display:none;
    clear:both;
    list-style-type: none;
    margin:20px 0 0 0;
}
.menu li {
    width: 40%;
    float: right;
    font-size:14px;
    margin:0;
    padding: 10px 4px;
    background:white;
}
.menu li a {
    color:#B5111B;
}
.menu li:hover > a{
    color:#B5111B;
}

.menu li:hover{
    border-left: 1px solid darkgray;
    border-right: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
    border-top: 1px solid darkgray;
    border-radius: 3px;
}
.account-holder:hover .menu {
    display:block;
}
.icon-color{
    color:#B5111B;
}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #main-logo{
        height: 50%;
        width: 25%;
    }
    .account-holder{
        margin-top: 15%;
    }
    .nav-pills > li {
        width:100%;
    }
    .user-name{
        font-size: 11px;  
    }
    #app-space{
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    .menu li {
        width: 300%;
    }

}
@media only screen and (max-width: 768px) and (orientation : landscape){
    /* For mobile phones landscape: */

    .menu li {
        width: 200%;
    }

}
@media (min-width: 768px) and (max-width: 1024px) {
    #sdi {
        font-size: 20px;
    }
    .menu li {
        width: 100%;
    }


}
/*pixel 2xl*/
@media screen and (device-width: 411px) and (device-height: 823px) and (-webkit-device-pixel-ratio: 3.5)  {
    .user-name{
        font-size: 12px;  
    }
    .account-holder{
        width:83.3333% !important;
    }
}
/*iphone6/7/8*/
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) { 
    .user-name{
        font-size: 11px;  
    }
}
/*iphone6/7/8+*/
@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) { 
    .user-name{
        font-size: 12px;  
    }
}
/*iphone 5/se*/
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
    .account-holder{
        width:100% !important;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) 
{ 
    .account-holder{
        width:100% !important;
    }
}
/*ipad portrait*/
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 1) {
    #main-logo {
        height: 30%;
        width: 15%;
    }
}