.animate-top{
position:relative;
animation:animatetop 0.4s
}
@keyframes animatetop{
from{top:-300px;opacity:0} 
to{top:0;opacity:1}
} .browse-template-modal .modal button.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
padding: 0 0 1rem;
margin: 0 0 0 auto;
background-color: transparent;
border: 0;
cursor: pointer;
}
.browse-template-modal .modal button.close:not(:disabled):not(.disabled) {
cursor: pointer;
}
.browse-template-modal .modal-header {
border-bottom: none;
padding-top: 0;
padding-bottom: 0;
}
.browse-template-modal .modal-header button {
margin: 0;
margin-left: auto;
}
.browse-template-modal .modal {
display: none;
position: fixed;
left: 50%;
top: 56%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
z-index: 9;
width: 100%;
height: 100%;
overflow: auto;
}
.browse-template-modal .modal-content {
width: 80%;
height: 80%;
border-radius: 8px;
margin: 5% auto;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.175);
outline: 0;
}
.browse-template-modal .modal-body {
height: calc(100% - 56px);
}
.browse-template-modal #browse-template-iframe {
width: 100%;
height: 100%;
}
.browse-template-modal .modal-body {
flex: 1 1 auto;
padding: 1rem;
}
.browse-template-modal .modal-body p {
margin-top: 0;
margin-bottom: 1rem;
}
.browse-template-modal .modal-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #e9ecef;
}
.browse-template-modal .modal-footer>*{
margin: 5px;
} .browse-template-modal .btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
cursor: pointer;
}
.browse-template-modal .btn:focus, .browse-template-modal .btn:hover {
text-decoration: none;
}
.browse-template-modal .btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.browse-template-modal .btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.browse-template-modal .btn-secondary {
color: #fff;
background-color: #7c8287;
border-color: #7c8287;
}
.browse-template-modal .btn-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}