.box{margin-bottom:2vh;background:linear-gradient(to right,#FFEFBA,#FFFFFF);padding:2% 4%;border-radius:10px;box-shadow:rgba(197,197,197,0.5) .1em .1em .1em}.box h3{font-size:24px;font-weight:800;text-shadow:rgba(197,197,197,0.5) .1em .1em .1em}.box-in-box{padding-left:2vh;margin-bottom:2vh}.box .box-in-box p{font-size:14px;font-weight:400}.box .box-in-box .docimg{margin-top:2vh;max-width:50%;max-height:50%;border-radius:5px}.btn-box{margin-top:2vh}.btn-box .btn{padding:10px 22px;transition:all .5s;box-shadow:rgba(197,197,197,0.8) .1em .1em .1em;border:1px solid;background-color:#3F5EFB;color:#fff;text-decoration:none;transition:all .3s;font-size:14px;font-weight:700;border-radius:1vh}.btn-box .btn:hover{background-color:#f74777;transform:translateY(-5px)}@media(max-width:600px){.box .box-in-box .docimg{max-width:80%;max-height:80%}}

@media only screen and (max-width: 800px) {
    .docsimg {
        height: auto;
        width: 100%;
        
    }
}


.btn-copy {
    color: #fdfdff;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .3rem;
    background-color: #00a2ff!important;
    border-color: #fff;
}
.btn-hero-primary {
    text-transform: none!important;
}

.icon-info {
    color: #3884ff!important;
}



.note {
    font-size: 14px;
    font-weight: 600;
    border: initial;
    border-left: 4px solid #3884ff;
    color: #4c4948;
    background: #eef7fa;
    position: relative;
    margin: 0 0 1rem;
    padding: 24px;
    border-radius: 3px;
    padding-left: 2.65rem;
    margin-top: 32px;
    margin-bottom: 32px;
}


.note.warning {
    border-left-color: #e04f1a;
    background: #ffd9d9;
}


.note> span:before{
    font-family: Font Awesome\ 5 Free;
    position: absolute;
    top: calc(50% - .8rem);
    left: .7rem;
    font-size: larger;
}


.note> .war:before {
    content: "\f071";
    color: #f5222d;
}


.note> .info:before {
    content: "\f06a";
    color: #3b5998;
}