.container-fluid:not(footer){
    padding-right: 100px;
    padding-left: 100px;
}

.shadow{
    box-shadow: 3px 5px 11px -5px #7777, -3px 5px 11px -5px #7777;
}

.w-25{
    width:24%
}
.w-75{
    width:74%
}

.d-inline-block{
    display: inline-block;
}

.navbar{
    min-height: 80px;
    margin-bottom: 0px
}
.navbar li{
    padding: 0px 8px
}
.navbar a{
    text-decoration: none;
}
.navbar-brand{
    padding:0px
}
.navbar img{
    width: 200px;
    height:80px;
}

#error{
    display:none;
}

.breadcrumbs{
    margin-bottom: 20px;
    background-color: #efefef;
    padding: 5px 0px;
    text-align: center;
}
.breadcrumbs p{
    margin-bottom: 0px
}
.breadcrumbs a, .breadcrumbs span{
    margin: 0px 15px;
}
.breadcrumbs a:first-child{
    margin-left: 0px;
}

.refresh-btn{
    padding: 5px;
    border-radius: 5px;
    color: white;
    background-color: #3A84FF;
    cursor: pointer;
    margin-left: 20px!important;
}
.refresh-btn:hover{
    color:white
}

.licensing-box .property{
    min-width: 150px;
}

/*Component Details*/

#component .panel-heading{
    display: inline-block;
    width:100%;

}

#org-logo{
    max-height:100px;
    margin-right:20px;
}

#org-logo img{
    max-height:60px;
    display: block
}

#org-logo, #component-main{
    display: inline-block;
}

#component-main h2{
    display: inline;
    margin-right:20px;
}
#component-main h4{
    margin-top:0px
}

#component-main a{
    text-decoration: none;
    vertical-align: super;
}


#component-main i{
   vertical-align: middle;
   font-size: 30px;
   margin-right:7px
}




/*SECURITY*/

.versions-table-header{
    margin-bottom:0
}

.scrollable{
    max-height:400px;
    height:100%;
    overflow-y: auto;
    overflow: none;   
}

.scrollable.overflowing{
    scrollbar-width: thin;
    margin-right: -10px;
}

@-moz-document url-prefix() {
    .scrollable.scrollable.overflowing{
        margin-right: -6px;
    }
}
.scrollable::-webkit-scrollbar{
    width: 10px;
    background-color: #eee;
}
.scrollable::-webkit-scrollbar-thumb{
    background-color: #aaa;
}



/* README */
#component-readme{
    padding: 37px;
    border: 1px solid #777;
    border-radius: 5px;
    background-color: #ddd3;
    margin-bottom: 50px;
}


a i{
    display: block!important;
}

#component-main a i{
    display: inline!important;
}


#scanner-cta{
    background-color: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.125);
    padding: 2px 15px;
    border-radius: 5px
}
#scanner-cta .cta{
    padding: 6px 10px!important
}

.scores-wrapper{
    margin-top:30px
}

.progress{
    position: relative;
}
.progress:after{
    content: attr(data-score);
    position: absolute;
    z-index: 1100;
    color: white;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    margin-top: 0px;
    padding-top: 0px;
    line-height: 1rem;
}
.progress.score-unknown:after{
    color: #777
}
.progress-bar{
    color: transparent
}

.description:empty, .sm-description:empty{
    margin-bottom:0px
}



@media (max-width: 1200px){
    .container-fluid:not(footer){
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (max-width: 1050px){
    .col-md-4{
        width: 100%!important
    }
    .scores-wrapper{
        margin-top: -15px
    }
}

@media (max-width: 875px){
    .scores-wrapper{
        margin-top: 0px
    }
}



/* 


#library{
    text-align: center;
}

.label-light{
    color:white;
    background-color: #aaa;
    margin: 0px 3px;
}


#vulnerabilities-count .card{
    max-width: 180px;
    margin:auto
}
.border-danger{
    border: 2px solid #a94442;
    border-radius: 5px;
}

#circular-meter{
    width: 90vw; 
    height: 12vw;
    margin:auto;
    overflow: hidden;
    padding-top:20px;
    position: relative;
    text-align: center;
    
}

#bar{
    position: absolute;
    z-index: 1000;
}
#threat{
    margin-top: 3%;
    position: absolute;
    width: 100%;
    z-index: 1001;
    height:100%;
}
#threat>*{
    margin:0px
}
#threat>h1{
    margin-bottom:5px
}
#threat .label{
    margin: 0px 5px;
}
#threat span > span{

    vertical-align: middle; 
}

#bar{
    width:90vw;
    height:90vw;
    border-radius: 50%;
    border:4px solid #ddd;
    padding:0px;
    margin:0px;
}
#meter-bar{
    width: 100%;
    height:90vw;
    border-radius: 50%;
    border:4px solid #ddd;
    padding:0px;
    margin-left: 0px;
    /* margin-top: 4px 
}
#meter-clipper{
    width: 100%;
    height: 12vw;
    overflow: hidden;
    position:relative;

}

#meter-wrapper{
    width:calc( 100% + 8px );
    height:calc( 100% + 8px );
    margin-left:-4px;
    margin-top:-4px;
    transform: rotateZ(-82.2deg) rotateY(180deg);
}



#meter-bar{
    border: 5px solid green;
    transition: border .3s ease-in-out;
} 



#meter-spot{
    position: absolute;
    width:  calc( 2vw + .5rem);
    height: calc( 2vw + .5rem);
    background-color: green;
    border-radius: 50%;
    top: 11.6%;
    left: 15.8%;
    transition: background-color .3s ease-in-out;
}

.panel-heading h2{
    margin: 0px
}


@media(max-width: 1600px){
    #circular-meter{
        height:13vw
    }
}


@media(max-width: 1260px){
    
    #threat h1{
        font-size: 2em
    }
}

@media(max-width: 1085px){
    .text-severity{
        display: none;
    }
    #threat h1{
        font-size: 2.5em
    }
}

@media(max-width: 991px){
    #circular-meter{
        height:13.5vw
    }
}
@media(max-width: 822px){
    #circular-meter{
        height:14vw
    }
}
@media(max-width: 710px){
    #circular-meter{
        height:14.5vw
    }
}
@media(max-width: 600px){
    #circular-meter{
        height:15vw
    }
    #threat h1{
        font-size: 1.8em
    }
}
@media(max-width: 550px){
    #circular-meter{
        height:15.5vw
    }
}
@media(max-width: 500px){
    #circular-meter{
        height:16.5vw
    }
}
@media(max-width: 400px){
    #circular-meter{
        height:17.5vw
    }
}
@media(max-width: 350px){
    #circular-meter{
        height:18.5vw
    }
}

@media(max-width: 300px){
    #circular-meter{
        height:19.5vw
    }
}



 */