body {
    font-size: 1.4rem;
}



.bg-color-base {
    color: #FFFFFF;
    background-color: #1d384b;
}
.table-bordered-base {
    color: #FFFFFF;
    border: 1px solid #466372;
}
.title-base {
    color: #fff;
    /* background: #3E5462; */
    /* background-image: linear-gradient(to bottom, #3e5462, #384f5e, #314959, #2b4455, #253f51, #253f51, #253f51, #253f51, #2b4455, #314959, #384f5e, #3e5462); */
    background-image: linear-gradient(to bottom, #3e5462, #384f5e, #314959, #2b4455, #253f51, #253f51, #253f51, #253f51, #2b4455, #314959, #384f5e, #3e5462);
    border-top: 2px solid rgba(224, 228, 231, .25);
    border-bottom: 2px solid rgba(224, 228, 231, 0.25);
    width: 100%;
    text-align: center;
}
.form-control-base {
    border: 1px solid #607D8B;
}
.form-control-base:focus {
    border-color: #607D8B !important;
    box-shadow: 0 0 0 4px #B0BEC5 !important;
    outline: none !important;
}
.btn-base {
    color: #FFFFFF;
    background-color: #607D8B;
}
.btn-base:hover {
    color: #FFFFFF;
    background-color: #546E7A;
}
.btn-base:active {
    color: #FFFFFF;
    background-color: #546E7A;
}
.btn-base:focus {
    color: #FFFFFF !important;
    background-color: #546E7A !important;
    outline: none !important;
    border: 1px solid #607D8B  !important;
    box-shadow: 0 0 0 3px #607D8B !important;
}

/*
1. #3498db (Podstawowy), #2e86c1 (Ciemniejszy), #5dade2 (Jaśniejszy)
2. #e74c3c (Podstawowy), #cb4335 (Ciemniejszy), #f1948a (Jaśniejszy)
3. #27ae60 (Podstawowy), #229954 (Ciemniejszy), #58d68d (Jaśniejszy)
4. #f1c40f (Podstawowy), #d4ac0d (Ciemniejszy), #f7dc6f (Jaśniejszy)
5. #8e44ad (Podstawowy), #7d3c98 (Ciemniejszy), #bb8fce (Jaśniejszy)
6. #34495e (Podstawowy), #2c3e50 (Ciemniejszy), #5d6d7e (Jaśniejszy)
7. #16a085 (Podstawowy), #138d75 (Ciemniejszy), #48c9b0 (Jaśniejszy)
8. #e67e22 (Podstawowy), #ca6f1e (Ciemniejszy), #f0b27a (Jaśniejszy)
9. #2ecc71 (Podstawowy), #28b463 (Ciemniejszy), #82e0aa (Jaśniejszy)
10. #f39c12 (Podstawowy), #d68910 (Ciemniejszy), #f8c471 (Jaśniejszy)
*/

:root {
    --color-0-base: #1d384b;
    --color-0-dark: #112736;
    --color-0-light: #466372;
    --color-0-dark-70: #11273651;

    --color-1-base: #3498db;
    --color-1-dark: #2e86c1;
    --color-1-light: #5dade2;
    --color-1-dark-70: #2e86c1b2;

    --color-2-base: #e74c3c;
    --color-2-dark: #cb4335;
    --color-2-light: #f1948a;
    --color-2-dark-70: #cb4335b2;   

    --color-3-base: #27ae60;
    --color-3-dark: #229954;
    --color-3-light: #58d68d; 
    --color-3-dark-70: #229954b2; 

    --color-4-base: #f1c40f;
    --color-4-dark: #d4ac0d;
    --color-4-light: #f7dc6f;
    --color-4-dark-70: #d4ac0db2;   

    --color-5-base: #8e44ad;
    --color-5-dark: #7d3c98;
    --color-5-light: #bb8fce;
    --color-5-dark-70: #7d3c98b2;   

    --color-6-base: #34495e;
    --color-6-dark: #2c3e50;
    --color-6-light: #5d6d7e; 
    --color-6-dark-70: #2c3e50b2;  

    --color-7-base: #16a085;
    --color-7-dark: #138d75;
    --color-7-light: #48c9b0;
    --color-7-dark-70: #138d75b2;   

    --color-8-base: #e67e22;
    --color-8-dark: #ca6f1e;
    --color-8-light: #f0b27a; 
    --color-8-dark-70: #ee7307b2;  

    --color-9-base: #2ecc71;
    --color-9-dark: #28b463;
    --color-9-light: #82e0aa; 
    --color-9-dark-70: #28b463b2;  

    --color-10-base: #f39c12;
    --color-10-dark: #d68910;
    --color-10-light: #f8c471; 
    --color-10-dark-70: #d68910b2;  
}



/* https://mycolor.space/gradient3 */


.bg-color-0 {
    color: #FFFFFF;
    background-color: var(--color-0-base);
}
.table-bordered-0 {
    color: #FFFFFF;
    border: 1px solid var(--color-0-light);
}
.title-0 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-0-light) 0%, var(--color-0-base) 20%, var(--color-0-dark) 45%, var(--color-0-dark) 55%, var(--color-0-base) 80%, var(--color-0-light) 100%);
    border-top: 2px solid var(--color-0-dark-70);
    border-bottom: 2px solid var(--color-0-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-0 {
    border: 1px solid var(--color-0-base);
}
.form-control-0:focus {
    border-color: var(--color-0-base) !important;
    box-shadow: 0 0 0 4px var(--color-0-light) !important;
    outline: none !important;
}
.btn-0 {
    color: #FFFFFF;
    background-color: var(--color-0-base);
}
.btn-0:hover {
    color: #FFFFFF;
    background-color: var(--color-0-dark);
}
.btn-0:active {
    color: #FFFFFF;
    background-color: var(--color-0-dark);
}
.btn-0:focus {
    color: #FFFFFF !important;
    background-color: var(--color-0-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-0-light) !important;
    box-shadow: 0 0 0 3px var(--color-0-light) !important;
}
.check-box-0 {
    color: #FFFFFF;
    border: 1px solid var(--color-0-light) !important;
    background-color: var(--color-0-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-0:hover {
    color: #FFFFFF;
    background-color: var(--color-0-light);
}
.check-box-0:active {
    color: #FFFFFF;
    background-color: var(--color-0-light);
}
.check-box-0:checked {
    color: #FFFFFF !important;
    background-color: var(--color-0-dark) !important;
    border: 1px solid var(--color-0-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-0:focus {
    color: #FFFFFF !important;
    background-color: var(--color-0-base) !important;
    outline: none !important;
    border: 1px solid var(--color-0-light) !important;
    box-shadow: 0 0 0 3px var(--color-0-light) !important;
}
.pagination-0 > nav > ul > .page-item > .page-link  {
    color: var(--color-0-base) !important;
    border-color: var(--color-0-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-0 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-0-light) !important;
    background-color: var(--color-0-dark) !important;  
}


.bg-color-1 {
    color: #FFFFFF;
    background-color: var(--color-1-base);
}
.table-bordered-1 {
    color: #FFFFFF;
    border: 1px solid var(--color-1-light);
}
.title-1 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-1-light) 0%, var(--color-1-base) 20%, var(--color-1-dark) 45%, var(--color-1-dark) 55%, var(--color-1-base) 80%, var(--color-1-light) 100%);
    border-top: 2px solid var(--color-1-dark-70);
    border-bottom: 2px solid var(--color-1-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-1 {
    border: 1px solid var(--color-1-base);
}
.form-control-1:focus {
    border-color: var(--color-1-base) !important;
    box-shadow: 0 0 0 4px var(--color-1-light) !important;
    outline: none !important;
}
.btn-1 {
    color: #FFFFFF;
    background-color: var(--color-1-base);
}
.btn-1:hover {
    color: #FFFFFF;
    background-color: var(--color-1-dark);
}
.btn-1:active {
    color: #FFFFFF;
    background-color: var(--color-1-dark);
}
.btn-1:focus {
    color: #FFFFFF !important;
    background-color: var(--color-1-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-1-light) !important;
    box-shadow: 0 0 0 3px var(--color-1-light) !important;
}
.check-box-1 {
    color: #FFFFFF;
    border: 1px solid var(--color-1-light) !important;
    background-color: var(--color-1-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-1:hover {
    color: #FFFFFF;
    background-color: var(--color-1-light);
}
.check-box-1:active {
    color: #FFFFFF;
    background-color: var(--color-1-light);
}
.check-box-1:checked {
    color: #FFFFFF !important;
    background-color: var(--color-1-dark) !important;
    border: 1px solid var(--color-1-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-1:focus {
    color: #FFFFFF !important;
    background-color: var(--color-1-base) !important;
    outline: none !important;
    border: 1px solid var(--color-1-light) !important;
    box-shadow: 0 0 0 3px var(--color-1-light) !important;
}
.pagination-1 > nav > ul > .page-item > .page-link  {
    color: var(--color-1-base) !important;
    border-color: var(--color-1-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-1 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-1-light) !important;
    background-color: var(--color-1-dark) !important;  
}

.bg-color-2 {
    color: #FFFFFF;
    background-color: var(--color-2-base);
}
.table-bordered-2 {
    color: #FFFFFF;
    border: 1px solid var(--color-2-light);
}
.title-2 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-2-light) 0%, var(--color-2-base) 20%, var(--color-2-dark) 45%, var(--color-2-dark) 55%, var(--color-2-base) 80%, var(--color-2-light) 100%);
    border-top: 2px solid var(--color-2-dark-70);
    border-bottom: 2px solid var(--color-2-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-2 {
    border: 1px solid var(--color-2-base);
}
.form-control-2:focus {
    border-color: var(--color-2-base) !important;
    box-shadow: 0 0 0 4px var(--color-2-light) !important;
    outline: none !important;
}
.btn-2 {
    color: #FFFFFF;
    background-color: var(--color-2-base);
}
.btn-2:hover {
    color: #FFFFFF;
    background-color: var(--color-2-dark);
}
.btn-2:active {
    color: #FFFFFF;
    background-color: var(--color-2-dark);
}
.btn-2:focus {
    color: #FFFFFF !important;
    background-color: var(--color-2-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-2-light) !important;
    box-shadow: 0 0 0 3px var(--color-2-light) !important;
}
.check-box-2 {
    color: #FFFFFF;
    border: 1px solid var(--color-2-light) !important;
    background-color: var(--color-2-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-2:hover {
    color: #FFFFFF;
    background-color: var(--color-2-light);
}
.check-box-2:active {
    color: #FFFFFF;
    background-color: var(--color-2-light);
}
.check-box-2:checked {
    color: #FFFFFF !important;
    background-color: var(--color-2-dark) !important;
    border: 1px solid var(--color-2-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-2:focus {
    color: #FFFFFF !important;
    background-color: var(--color-2-base) !important;
    outline: none !important;
    border: 1px solid var(--color-2-light) !important;
    box-shadow: 0 0 0 3px var(--color-2-light) !important;
}
.pagination-2 > nav > ul > .page-item > .page-link  {
    color: var(--color-2-base) !important;
    border-color: var(--color-2-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-2 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-2-light) !important;
    background-color: var(--color-2-dark) !important;  
}

.bg-color-3 {
    color: #FFFFFF;
    background-color: var(--color-3-base);
}
.table-bordered-3 {
    color: #FFFFFF;
    border: 1px solid var(--color-3-light);
}
.title-3 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-3-light) 0%, var(--color-3-base) 20%, var(--color-3-dark) 45%, var(--color-3-dark) 55%, var(--color-3-base) 80%, var(--color-3-light) 100%);
    border-top: 2px solid var(--color-3-dark-70);
    border-bottom: 2px solid var(--color-3-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-3 {
    border: 1px solid var(--color-3-base);
}
.form-control-3:focus {
    border-color: var(--color-3-base) !important;
    box-shadow: 0 0 0 4px var(--color-3-light) !important;
    outline: none !important;
}
.btn-3 {
    color: #FFFFFF;
    background-color: var(--color-3-base);
}
.btn-3:hover {
    color: #FFFFFF;
    background-color: var(--color-3-dark);
}
.btn-3:active {
    color: #FFFFFF;
    background-color: var(--color-3-dark);
}
.btn-3:focus {
    color: #FFFFFF !important;
    background-color: var(--color-3-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-3-light) !important;
    box-shadow: 0 0 0 3px var(--color-3-light) !important;
}
.check-box-3 {
    color: #FFFFFF;
    border: 1px solid var(--color-3-light) !important;
    background-color: var(--color-3-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-3:hover {
    color: #FFFFFF;
    background-color: var(--color-3-light);
}
.check-box-3:active {
    color: #FFFFFF;
    background-color: var(--color-3-light);
}
.check-box-3:checked {
    color: #FFFFFF !important;
    background-color: var(--color-3-dark) !important;
    border: 1px solid var(--color-3-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-3:focus {
    color: #FFFFFF !important;
    background-color: var(--color-3-base) !important;
    outline: none !important;
    border: 1px solid var(--color-3-light) !important;
    box-shadow: 0 0 0 3px var(--color-3-light) !important;
}
.pagination-3 > nav > ul > .page-item > .page-link  {
    color: var(--color-3-base) !important;
    border-color: var(--color-3-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-3 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-3-light) !important;
    background-color: var(--color-3-dark) !important;  
}

.bg-color-4 {
    color: #FFFFFF;
    background-color: var(--color-4-base);
}
.table-bordered-4 {
    color: #FFFFFF;
    border: 1px solid var(--color-4-light);
}
.title-4 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-4-light) 0%, var(--color-4-base) 20%, var(--color-4-dark) 45%, var(--color-4-dark) 55%, var(--color-4-base) 80%, var(--color-4-light) 100%);
    border-top: 2px solid var(--color-4-dark-70);
    border-bottom: 2px solid var(--color-4-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-4 {
    border: 1px solid var(--color-4-base);
}
.form-control-4:focus {
    border-color: var(--color-4-base) !important;
    box-shadow: 0 0 0 4px var(--color-4-light) !important;
    outline: none !important;
}
.btn-4 {
    color: #FFFFFF;
    background-color: var(--color-4-base);
}
.btn-4:hover {
    color: #FFFFFF;
    background-color: var(--color-4-dark);
}
.btn-4:active {
    color: #FFFFFF;
    background-color: var(--color-4-dark);
}
.btn-4:focus {
    color: #FFFFFF !important;
    background-color: var(--color-4-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-4-light) !important;
    box-shadow: 0 0 0 3px var(--color-4-light) !important;
}
.check-box-4 {
    color: #FFFFFF;
    border: 1px solid var(--color-4-light) !important;
    background-color: var(--color-4-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-4:hover {
    color: #FFFFFF;
    background-color: var(--color-4-light);
}
.check-box-4:active {
    color: #FFFFFF;
    background-color: var(--color-4-light);
}
.check-box-4:checked {
    color: #FFFFFF !important;
    background-color: var(--color-4-dark) !important;
    border: 1px solid var(--color-4-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-4:focus {
    color: #FFFFFF !important;
    background-color: var(--color-4-base) !important;
    outline: none !important;
    border: 1px solid var(--color-4-light) !important;
    box-shadow: 0 0 0 3px var(--color-4-light) !important;
}
.pagination-4 > nav > ul > .page-item > .page-link  {
    color: var(--color-4-base) !important;
    border-color: var(--color-4-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-4 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-4-light) !important;
    background-color: var(--color-4-dark) !important;  
}


.bg-color-5 {
    color: #FFFFFF;
    background-color: var(--color-5-base);
}
.table-bordered-5 {
    color: #FFFFFF;
    border: 1px solid var(--color-5-light);
}
.title-5 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-5-light) 0%, var(--color-5-base) 20%, var(--color-5-dark) 45%, var(--color-5-dark) 55%, var(--color-5-base) 80%, var(--color-5-light) 100%);
    border-top: 2px solid var(--color-5-dark-70);
    border-bottom: 2px solid var(--color-5-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-5 {
    border: 1px solid var(--color-5-base);
}
.form-control-5:focus {
    border-color: var(--color-5-base) !important;
    box-shadow: 0 0 0 4px var(--color-5-light) !important;
    outline: none !important;
}
.btn-5 {
    color: #FFFFFF;
    background-color: var(--color-5-base);
}
.btn-5:hover {
    color: #FFFFFF;
    background-color: var(--color-5-dark);
}
.btn-5:active {
    color: #FFFFFF;
    background-color: var(--color-5-dark);
}
.btn-5:focus {
    color: #FFFFFF !important;
    background-color: var(--color-5-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-5-light) !important;
    box-shadow: 0 0 0 3px var(--color-5-light) !important;
}
.check-box-5 {
    color: #FFFFFF;
    border: 1px solid var(--color-5-light) !important;
    background-color: var(--color-5-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-5:hover {
    color: #FFFFFF;
    background-color: var(--color-5-light);
}
.check-box-5:active {
    color: #FFFFFF;
    background-color: var(--color-5-light);
}
.check-box-5:checked {
    color: #FFFFFF !important;
    background-color: var(--color-5-dark) !important;
    border: 1px solid var(--color-5-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-5:focus {
    color: #FFFFFF !important;
    background-color: var(--color-5-base) !important;
    outline: none !important;
    border: 1px solid var(--color-5-light) !important;
    box-shadow: 0 0 0 3px var(--color-5-light) !important;
}
.pagination-5 > nav > ul > .page-item > .page-link  {
    color: var(--color-5-base) !important;
    border-color: var(--color-5-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-5 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-5-light) !important;
    background-color: var(--color-5-dark) !important;  
}


.bg-color-6 {
    color: #FFFFFF;
    background-color: var(--color-6-base);
}
.table-bordered-6 {
    color: #FFFFFF;
    border: 1px solid var(--color-6-light);
}
.title-6 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-6-light) 0%, var(--color-6-base) 20%, var(--color-6-dark) 45%, var(--color-6-dark) 55%, var(--color-6-base) 80%, var(--color-6-light) 100%);
    border-top: 2px solid var(--color-6-dark-70);
    border-bottom: 2px solid var(--color-6-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-6 {
    border: 1px solid var(--color-6-base);
}
.form-control-6:focus {
    border-color: var(--color-6-base) !important;
    box-shadow: 0 0 0 4px var(--color-6-light) !important;
    outline: none !important;
}
.btn-6 {
    color: #FFFFFF;
    background-color: var(--color-6-base);
}
.btn-6:hover {
    color: #FFFFFF;
    background-color: var(--color-6-dark);
}
.btn-6:active {
    color: #FFFFFF;
    background-color: var(--color-6-dark);
}
.btn-6:focus {
    color: #FFFFFF !important;
    background-color: var(--color-6-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-6-light) !important;
    box-shadow: 0 0 0 3px var(--color-6-light) !important;
}
.check-box-6 {
    color: #FFFFFF;
    border: 1px solid var(--color-6-light) !important;
    background-color: var(--color-6-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-6:hover {
    color: #FFFFFF;
    background-color: var(--color-6-light);
}
.check-box-6:active {
    color: #FFFFFF;
    background-color: var(--color-6-light);
}
.check-box-6:checked {
    color: #FFFFFF !important;
    background-color: var(--color-6-dark) !important;
    border: 1px solid var(--color-6-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-6:focus {
    color: #FFFFFF !important;
    background-color: var(--color-6-base) !important;
    outline: none !important;
    border: 1px solid var(--color-6-light) !important;
    box-shadow: 0 0 0 3px var(--color-6-light) !important;
}
.pagination-6 > nav > ul > .page-item > .page-link  {
    color: var(--color-6-base) !important;
    border-color: var(--color-6-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-6 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-6-light) !important;
    background-color: var(--color-6-dark) !important;  
}

.bg-color-7 {
    color: #FFFFFF;
    background-color: var(--color-7-base);
}
.table-bordered-7 {
    color: #FFFFFF;
    border: 1px solid var(--color-7-light);
}
.title-7 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-7-light) 0%, var(--color-7-base) 20%, var(--color-7-dark) 45%, var(--color-7-dark) 55%, var(--color-7-base) 80%, var(--color-7-light) 100%);
    border-top: 2px solid var(--color-7-dark-70);
    border-bottom: 2px solid var(--color-7-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-7 {
    border: 1px solid var(--color-7-base);
}
.form-control-7:focus {
    border-color: var(--color-7-base) !important;
    box-shadow: 0 0 0 4px var(--color-7-light) !important;
    outline: none !important;
}
.btn-7 {
    color: #FFFFFF;
    background-color: var(--color-7-base);
}
.btn-7:hover {
    color: #FFFFFF;
    background-color: var(--color-7-dark);
}
.btn-7:active {
    color: #FFFFFF;
    background-color: var(--color-7-dark);
}
.btn-7:focus {
    color: #FFFFFF !important;
    background-color: var(--color-7-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-7-light) !important;
    box-shadow: 0 0 0 3px var(--color-7-light) !important;
}
.check-box-7 {
    color: #FFFFFF;
    border: 1px solid var(--color-7-light) !important;
    background-color: var(--color-7-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-7:hover {
    color: #FFFFFF;
    background-color: var(--color-7-light);
}
.check-box-7:active {
    color: #FFFFFF;
    background-color: var(--color-7-light);
}
.check-box-7:checked {
    color: #FFFFFF !important;
    background-color: var(--color-7-dark) !important;
    border: 1px solid var(--color-7-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-7:focus {
    color: #FFFFFF !important;
    background-color: var(--color-7-base) !important;
    outline: none !important;
    border: 1px solid var(--color-7-light) !important;
    box-shadow: 0 0 0 3px var(--color-7-light) !important;
}
.pagination-7 > nav > ul > .page-item > .page-link  {
    color: var(--color-7-base) !important;
    border-color: var(--color-7-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-7 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-7-light) !important;
    background-color: var(--color-7-dark) !important;  
}


.bg-color-8 {
    color: #FFFFFF;
    background-color: var(--color-8-base);
}
.table-bordered-8 {
    color: #FFFFFF;
    border: 1px solid var(--color-8-light);
}
.title-8 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-8-light) 0%, var(--color-8-base) 20%, var(--color-8-dark) 45%, var(--color-8-dark) 55%, var(--color-8-base) 80%, var(--color-8-light) 100%);
    border-top: 2px solid var(--color-8-dark-70);
    border-bottom: 2px solid var(--color-8-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-8 {
    border: 1px solid var(--color-8-base);
}
.form-control-8:focus {
    border-color: var(--color-8-base) !important;
    box-shadow: 0 0 0 4px var(--color-8-light) !important;
    outline: none !important;
}
.btn-8 {
    color: #FFFFFF;
    background-color: var(--color-8-base);
}
.btn-8:hover {
    color: #FFFFFF;
    background-color: var(--color-8-dark);
}
.btn-8:active {
    color: #FFFFFF;
    background-color: var(--color-8-dark);
}
.btn-8:focus {
    color: #FFFFFF !important;
    background-color: var(--color-8-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-8-light) !important;
    box-shadow: 0 0 0 3px var(--color-8-light) !important;
}
.check-box-8 {
    color: #FFFFFF;
    border: 1px solid var(--color-8-light) !important;
    background-color: var(--color-8-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-8:hover {
    color: #FFFFFF;
    background-color: var(--color-8-light);
}
.check-box-8:active {
    color: #FFFFFF;
    background-color: var(--color-8-light);
}
.check-box-8:checked {
    color: #FFFFFF !important;
    background-color: var(--color-8-dark) !important;
    border: 1px solid var(--color-8-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-8:focus {
    color: #FFFFFF !important;
    background-color: var(--color-8-base) !important;
    outline: none !important;
    border: 1px solid var(--color-8-light) !important;
    box-shadow: 0 0 0 3px var(--color-8-light) !important;
}
.pagination-8 > nav > ul > .page-item > .page-link  {
    color: var(--color-8-base) !important;
    border-color: var(--color-8-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-8 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-8-light) !important;
    background-color: var(--color-8-dark) !important;  
}


.bg-color-9 {
    color: #FFFFFF;
    background-color: var(--color-9-base);
}
.table-bordered-9 {
    color: #FFFFFF;
    border: 1px solid var(--color-9-light);
}
.title-9 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-9-light) 0%, var(--color-9-base) 20%, var(--color-9-dark) 45%, var(--color-9-dark) 55%, var(--color-9-base) 80%, var(--color-9-light) 100%);
    border-top: 2px solid var(--color-9-dark-70);
    border-bottom: 2px solid var(--color-9-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-9 {
    border: 1px solid var(--color-9-base);
}
.form-control-9:focus {
    border-color: var(--color-9-base) !important;
    box-shadow: 0 0 0 4px var(--color-9-light) !important;
    outline: none !important;
}
.btn-9 {
    color: #FFFFFF;
    background-color: var(--color-9-base);
}
.btn-9:hover {
    color: #FFFFFF;
    background-color: var(--color-9-dark);
}
.btn-9:active {
    color: #FFFFFF;
    background-color: var(--color-9-dark);
}
.btn-9:focus {
    color: #FFFFFF !important;
    background-color: var(--color-9-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-9-light) !important;
    box-shadow: 0 0 0 3px var(--color-9-light) !important;
}
.check-box-9 {
    color: #FFFFFF;
    border: 1px solid var(--color-9-light) !important;
    background-color: var(--color-9-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-9:hover {
    color: #FFFFFF;
    background-color: var(--color-9-light);
}
.check-box-9:active {
    color: #FFFFFF;
    background-color: var(--color-9-light);
}
.check-box-9:checked {
    color: #FFFFFF !important;
    background-color: var(--color-9-dark) !important;
    border: 1px solid var(--color-9-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-9:focus {
    color: #FFFFFF !important;
    background-color: var(--color-9-base) !important;
    outline: none !important;
    border: 1px solid var(--color-9-light) !important;
    box-shadow: 0 0 0 3px var(--color-9-light) !important;
}
.pagination-9 > nav > ul > .page-item > .page-link  {
    color: var(--color-9-base) !important;
    border-color: var(--color-9-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-9 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-9-light) !important;
    background-color: var(--color-9-dark) !important;  
}


.bg-color-10 {
    color: #FFFFFF;
    background-color: var(--color-10-base);
}
.table-bordered-10 {
    color: #FFFFFF;
    border: 1px solid var(--color-10-light);
}
.title-10 {
    color: #fff;
    background-image: linear-gradient(to bottom, var(--color-10-light) 0%, var(--color-10-base) 20%, var(--color-10-dark) 45%, var(--color-10-dark) 55%, var(--color-10-base) 80%, var(--color-10-light) 100%);
    border-top: 2px solid var(--color-10-dark-70);
    border-bottom: 2px solid var(--color-10-dark-70);
    width: 100%;
    text-align: center;
}
.form-control-10 {
    border: 1px solid var(--color-10-base);
}
.form-control-10:focus {
    border-color: var(--color-10-base) !important;
    box-shadow: 0 0 0 4px var(--color-10-light) !important;
    outline: none !important;
}
.btn-10 {
    color: #FFFFFF;
    background-color: var(--color-10-base);
}
.btn-10:hover {
    color: #FFFFFF;
    background-color: var(--color-10-dark);
}
.btn-10:active {
    color: #FFFFFF;
    background-color: var(--color-10-dark);
}
.btn-10:focus {
    color: #FFFFFF !important;
    background-color: var(--color-10-dark) !important;
    outline: none !important;
    border: 1px solid var(--color-10-light) !important;
    box-shadow: 0 0 0 3px var(--color-10-light) !important;
}
.check-box-10 {
    color: #FFFFFF;
    border: 1px solid var(--color-10-light) !important;
    background-color: var(--color-10-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-10:hover {
    color: #FFFFFF;
    background-color: var(--color-10-light);
}
.check-box-10:active {
    color: #FFFFFF;
    background-color: var(--color-10-light);
}
.check-box-10:checked {
    color: #FFFFFF !important;
    background-color: var(--color-10-dark) !important;
    border: 1px solid var(--color-10-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.check-box-10:focus {
    color: #FFFFFF !important;
    background-color: var(--color-10-base) !important;
    outline: none !important;
    border: 1px solid var(--color-10-light) !important;
    box-shadow: 0 0 0 3px var(--color-10-light) !important;
}
.pagination-10 > nav > ul > .page-item > .page-link  {
    color: var(--color-10-base) !important;
    border-color: var(--color-10-light) !important;
    background-color: #FFFFFF !important;  
}
.pagination-10 > nav > ul > .page-item.active > .page-link  {
    color: #FFFFFF !important;
    border-color: var(--color-10-light) !important;
    background-color: var(--color-10-dark) !important;  
}

.date {
    /* float: right; */
    font-size: .8rem;
}

.pagination > nav > ul {
    margin-bottom: 0;
}          
.pagination > nav > p {
    font-size: .8rem;
    margin-bottom: 0;
}
.pagination > nav > ul > .page-item > .page-link[disabled]  {
    color: #808080 !important; 
}   

@media screen and (max-width: 768px) {
    body {
        font-size: 1rem;
        /*min-height: 100vh; */
    }
    .date {
        display: none;
    }
}