@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --brand-color: #008a38;
    --danger-color: #dc3545;
    --white-color: #fff;
    --text-color: #1d1d1b;
    --input-border-color: #d8d8d8;
    --input-background-color: #EAECF0;
}

*, body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 300;
}
    
.btn {
    border-radius: 100px;
    padding: 8pxls® 16px;
    font-size: 1rem;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    background: var(--white-color);
}
    
.btn:hover, .btn:active {
    color: var(--white-color);
}
    
.btn-primary {
    border-color: var(--brand-color);
    color: var(--brand-color);
}
    
.btn-primary:hover, .btn-primary:active {
    border-color: var(--brand-color);
    background: var(--brand-color);
}
    
.link-danger {
    border: none;
    text-decoration: underline;
    color: var(--danger-color);
    background: none;
    height: 46px;
}
    
.link-danger:hover, .link-danger:active {
    color: var(--danger-color);
    font-weight: 500 ;
    background: none;
}

label {
    color: var(--text-color);
    font-weight: 600 ;
    font-size: 1rem ;
    line-height: 1rem ;
    padding-bottom: 0.8rem ;
}

label[for=consenso] {
    font-weight: 400;
    font-size: 0.875rem;
    padding-bottom: 0;
}

input:not([type=submit]):not([type=checkbox]), select {
    background-color: var(--input-background-color);
    border-color: var(--input-border-color);
    border-width: 0px 0px 0px 0px ;
    border-radius: 0px 0px 0px 0px ;
    appearance: none ;
    color: inherit ;
    font-size: inherit ;
    font-family: inherit ;
    font-weight: inherit ;
    font-style: inherit ;
    text-transform: inherit ;
    letter-spacing: inherit ;
    line-height: inherit ;
    flex-basis: 100% ;
    padding-inline-end: 20px ;
    padding: 1em ;
    accent-color: var(--brand-color);
    color: var(--text-color);
    height: 46px ;
    line-height: 18px ;
    font-size: 14px ;
}

textarea {
    background-color: var(--input-background-color);
    border-color: var(--input-border-color);
    border-width: 0px 0px 0px 0px ;
    border-radius: 0px 0px 0px 0px ;
    appearance: none ;
    padding-inline-end: 20px ;
    padding: 1em ;
    color: var(--text-color);
    line-height: 18px ;
    font-size: 14px ;
}

input[type=checkbox] {
    margin-right: .5em ;
    height: 18px;
    width: 18px;
}

.select-wrapper {
    position: relative;
}

.select-caret-down-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 10px;
    pointer-events: none;
    font-size: 11px;
}

.cer-form .row, a#addItem {
    margin-bottom: 32px ;
}

a#addItem {
    display: inline-block;
    color: var(--brand-color);
}

a#addItem:hover, a#addItem:active {
    font-weight: 500;
}

.modal-header {
    border-bottom: none;
}

.modal-header, .modal-body {
    padding: 0;
}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.modal-title-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

p.modal-subtitle {
    font-size: .875rem;
}

button[data-bs-dismiss=modal] {
    align-self: flex-start;
}

p.cer-name {
    font-size: 1.125rem;
}

.cer-name, .cer-email {
    font-weight: 600;
}

a, a:hover, a:active {
    color: var(--brand-color);
}

a:hover, a:active {
    font-weight: 500;
}

.btn-secondary {
    color: var(--text-color);
}

.btn-danger {
    background: var(--danger-color);
}

.btn-danger:hover, .btn-danger:active {
    border-color: var(--danger-color);
    background: var(--white-color);
    color: var(--text-color);
}