.alert-new {
padding: 16px;
margin: 8px;
}

.alert-1-primary {
background-color: rgba(77, 77, 255, 0.05);
}
.alert-1-primary .alert-title {
color: #4d4dff;
}

.alert-1-warning {
background-color: rgba(255, 186, 0, 0.05);
}
.alert-1-warning .alert-title {
color: #ffba00;
}

.alert-2-success {
border-left: 4px solid #2ec946;
background-color: rgba(46, 201, 70, 0.05);
}
.alert-2-success .alert-title {
color: #2ec946;
}

.alert-2-secondary {
border-left: 4px solid #666666;
background-color: rgba(102, 102, 102, 0.05);
}
.alert-2-secondary .alert-title {
color: #666666;
}

.alert-3-primary {
border: 1px solid #cdcdff;
border-radius: 8px;
background-color: rgba(77, 77, 255, 0.05);
}
.alert-3-primary .alert-title {
color: #4d4dff;
}

.alert-3-danger {
border: 1px solid #ffb8b8;
border-radius: 8px;
background-color: rgba(255, 56, 56, 0.05);
}
.alert-3-danger .alert-title, .text-danger {
color: #ff3838;
}

.alert-title {
margin-top: 0;
margin-bottom: 18px;
font-size: 38px;
}

.alert-content {
    font-size: 22px;
}

.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
  }

.loader-big {
    border: 16px solid #ffffff; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 90px;
    height: 90px;
    animation: spin 2s linear infinite;
}

.loader-medium {
    border: 12px solid #ffffff; /* Light grey */
    border-top: 12px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    animation: spin 2s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}