@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
    --blue-50: #F1F3FF;
    --blue-100: #1E60D4;
    --blue-200: #0050A0;
    --green-50: #F1FFF1;
    --green-100: #137E0F;
    --green-200: #0E6D09;
    --red-50: #FFE6E5;
    --red-100: #CE2521;
    --red-200: #AA0F0F;
    --yellow-50: #FFEDD6;
    --yellow-100: #D17300;
    --yellow-200: #A05000;
    --gray-100: #F3F2F1;
    --gray-200: #F1F3F4;
    --gray-300: #BABABA;
    --gray-400: #505050;
    --gray-500: #E5E5E5;
    --gray-600: #E5EBEE;
    --gray-700: #707070;    
    --gray-800: #DADDE1;    
    --purple-50: #DAD4F5;
    --purple-100: #A44DC4;
    --purple-200: #443294;
    --black: #000000;
    --white: #FFFFFF;

    --bg-gradient-blue: linear-gradient(180deg, #7fa1e1, #3957d1);
    --bg-gradient-green: linear-gradient(180deg, #22E41B, #137E0F);
    --bg-gradient-black: linear-gradient(180deg, #757575, #000000);
    --bg-gradient-red: linear-gradient(180deg, #FF8686, #CE2521);
    --bg-gradient-yellow: linear-gradient(180deg, #FFBD6F, #F9951F);

    --opacity-0: 0;
    --opacity-25: 0.25;
    --opacity-50: 0.50;
    --opacity-75: 0.75;

    --card-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
}

body {
    background-color: #fafbfe;
    color: #191919;
    font-family: 'Lato', sans-serif;
}

body[data-layout=topnav] .container-fluid {
    max-width: 100%;
}

h4,
h4 label {
    color: var(--blue-100);
    font-weight: 900;
}

.breadcrumb-item.active label {
    color: var(--blue-100);
    font-size: 18px;
}

p,
th,
td {
    color: #000;
}

a{
    color: var(--blue-100);
}


/**************************************************/
/***********       BACKGROUND       ***************/    
/**************************************************/
.bg-light {
    background-color: #dadde1 !important;
}

.bg-blue-50 {
    background-color: var(--blue-50) !important;
}

.bg-blue-100 {
    background-color: var(--blue-100) !important;
}

.bg-blue-200 {
    background-color: var(--blue-200) !important;
}

.bg-green-50 {
    background-color: var(--green-50) !important;
}

.bg-green-100 {
    background-color: var(--green-100) !important;
}

.bg-green-200 {
    background-color: var(--green-200) !important;
}

.bg-yellow-50 {
    background-color: var(--yellow-50) !important;
}

.bg-yellow-100 {
    background-color: var(--yellow-100) !important;
}

.bg-yellow-200 {
    background-color: var(--yellow-200) !important;
}

.bg-purple-50 {
    background-color: var(--purple-50) !important;
}

.bg-purple-100 {
    background-color: var(--purple-100) !important;
}

.bg-purple-200 {
    background-color: var(--purple-200) !important;
}

.bg-red-50 {
    background-color: var(--red-50) !important;
}

.bg-red-100 {
    background-color: var(--red-100) !important;
}

.bg-red-200 {
    background-color: var(--red-200) !important;
}

.bg-gray-50 {
    background-color: var(--gray-50) !important;
}

.bg-gray-100 {
    background-color: var(--gray-100) !important;
}

.bg-gray-200 {
    background-color: var(--gray-200) !important;
}

.bg-gray-300 {
    background-color: var(--gray-300) !important;
}

.bg-gray-400 {
    background-color: var(--gray-400) !important;
}

.bg-gray-500 {
    background-color: var(--gray-500) !important;
}

.bg-gray-600 {
    background-color: var(--gray-600) !important;
}

.bg-gray-700 {
    background-color: var(--gray-700) !important;
}

.bg-gray-800 {
    background-color: var(--gray-800) !important;
}

.bg-dragula {
    background-color: #EEEEEE !important;
}

.bg-purple {
    background-color: var(--purple-100) !important;
}

.bg-gradient-blue{
    background-image: var(--bg-gradient-blue);
}

.bg-gradient-green{
    background-image: var(--bg-gradient-green);
}

.bg-gradient-black{
    background-image: var(--bg-gradient-black);
}

.bg-gradient-red{
    background-image: var(--bg-gradient-red);
}

.bg-gradient-yellow{
    background-image: var(--bg-gradient-yellow);
}

.bg-gradient-success-opacity{
    background-image: linear-gradient(180deg, #22E41B, #137E0F);
    opacity: var(--opacity-25);
}

.bg-gradient-black-opacity{
    background-image: linear-gradient(180deg, #757575, #000000);
    opacity: var(--opacity-25);
}

.bg-gradient-danger-opacity{
    background-image: linear-gradient(180deg, #FF8686, #CE2521);
    opacity: var(--opacity-25);
}

.bg-gradient-warning-opacity{
    background-image: linear-gradient(180deg, #FFBD6F, #F9951F);
    opacity: var(--opacity-25);
}

/**************************************************/
/*************        DOC SITE      ***************/    
/**************************************************/
.sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.sidebar-link:hover {
    background-color: var(--blue-50);
}

.sidebar-link.active {
    background-color: rgba(99, 102, 241, 0.2);
    border-left: 3px solid var(--primary-color);
}
        
.code-block {
    background-color: #1e293b;
    color: #f8fafc;
    border-radius: 0.5rem;
    padding: 1rem;
    position: relative;
}

.copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.nav-link {
    color: var(--blue-100);
    border: none;
}

.nav-pills .nav-link.active{
    color: var(--white);
    background-color: var(--blue-100);
}

.nav-tabs .nav-link {
    color: var(--blue-100);
    border: none;
}

@media (max-width: 992px) {
    .sidebar {
        height: auto;
        position: relative;
    }
}

.card{
    background-color: var(--gray-100);
}

.card-header{
    background-color: transparent;
}

.card img{
    width: 50px;
}

.column {
    display: none;
}

.show {
    display: block;

    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;

}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.card.border-success:hover{
    background-color: var(--green-50);
}

.card.border-warning:hover{
    background-color: var(--yellow-50);
}

.border-5 {
    border-width: 10px !important;
}

.card a{
    text-decoration: none;
    border: 0;
}

.card-header{
    color: var(--black);
}