/************ button`s ********/

.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

/* filled button */

.sdp-btn-filled {
    border-radius: 5px;
    border: 0;
}

.sdp-btn-filled-primary {
    background: #0A592B;
    color: #FFFFFF;
}

.sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #C0FFDA;
    color: #0A592B;
}

.sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}


/* dark */
.dark .sdp-btn-filled-primary {
    background-color: #C0FFDA;
    color: #0A592B;
}

.dark .sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #A7FFCC;
    color: #08381C;
}

.dark .sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #8DFFBD;
    color: #08381C;
}

.dark .sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #8DFFBD;
    color: #08381C;
}


.sdp-btn-filled-secondary {
    background-color: #182F40;
    color: #ffffff;

}

.sdp-btn-filled-secondary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #DFF2FF;
    color: #182F40;
}

.sdp-btn-filled-secondary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-secondary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary{
    background-color: #DFF2FF;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #D0EAFC;
    color: #101F2A;
}

.dark .sdp-btn-filled-secondary:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #101F2A;
}

.dark .sdp-btn-filled-secondary:focus{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #101F2A;
}

.sdp-btn-filled-tertiary {
    background-color: #015558;
    color: #FFFFFF;
}

.sdp-btn-filled-tertiary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #C2FDFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.dark .sdp-btn-filled-tertiary{
    background-color: #C2FDFF;
    color: #015558;
}

.dark .sdp-btn-filled-tertiary:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #AAFCFF;
    color: #002A2C;
}

.dark .sdp-btn-filled-tertiary:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #002A2C;
}

.dark .sdp-btn-filled-tertiary:focus{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #002A2C;
}

/* outlined button */

.sdp-btn-outlined {
    border: 1px solid #A3A3A3 !important;
}

.sdp-btn-outlined-primary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #0A592B;
}

.sdp-btn-outlined-primary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-outlined-primary:active {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-primary:focus {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-outlined-primary{
    border: 1px solid #CCCCCC;
    background-color: #212121;
    color: #C0FFDA;
}

.dark .sdp-btn-outlined-primary:hover{
    border: 1px solid #CCCCCC;
    background: #C0FFDA;
    color: #0A592B;
}

.dark .sdp-btn-outlined-primary:active{
    background: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-outlined-primary:focus{
    background: #DAFFE9;
    color: #0A592B;
}


.sdp-btn-outlined-secondary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F9FCFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:active {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:focus {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-outlined-secondary{
    border: 1px solid #CCCCCC;
    background-color: #212121;
    color: #DFF2FF;
}

.dark .sdp-btn-outlined-secondary:hover{
    border: 1px solid #CCCCCC;
    background: #DFF2FF;
    color: #182F40;
}

.dark .sdp-btn-outlined-secondary:active{
    background: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-outlined-secondary:focus{
    background: #ECF7FF;
    color: #182F40;
}

.sdp-btn-outlined-tertiary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F1FEFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:active {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:focus {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-outlined-tertiary{
    border: 1px solid #CCCCCC;
    background-color: #212121;
    color: #C2FDFF;
}

.dark .sdp-btn-outlined-tertiary:hover{
    border: 1px solid #CCCCCC;
    background: #C2FDFF;
    color: #015558;
}

.dark .sdp-btn-outlined-tertiary:active{
    background: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-outlined-tertiary:focus{
    background: #DAFDFF;
    color: #015558;
}



/* text button */

.sdp-btn-text-primary {
    background-color: transparent;
    color: #0A592B;
}

.sdp-btn-text-primary:hover {
    background: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-text-primary:active {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-primary:focus {
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-text-primary{
    background-color: transparent;
    color: #C0FFDA;
}

.dark .sdp-btn-text-primary:hover{
    background: #C0FFDA;
    color: #0A592B;
}

.dark .sdp-btn-text-primary:active{
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-text-primary:focus{
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-secondary {
    background-color: transparent;
    color: #182F40;
}

.sdp-btn-text-secondary:hover {
    background: #F9FCFF;
    color: #182F40;
}

.sdp-btn-text-secondary:active {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-secondary:focus {
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-text-secondary{
    background-color: transparent;
    color: #DFF2FF;
}

.dark .sdp-btn-text-secondary:hover{
    background: #DFF2FF;
    color: #182F40;
}

.dark .sdp-btn-text-secondary:active{
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-text-secondary:focus{
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-tertiary {
    background-color: transparent;
    color: #015558;
}

.sdp-btn-text-tertiary:hover {
    background: #F1FEFF;
    color: #015558;
}

.sdp-btn-text-tertiary:active {
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-text-tertiary:focus {
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-text-tertiary{
    background-color: transparent;
    color: #C2FDFF;
}

.dark .sdp-btn-text-tertiary:hover{
    background: #C2FDFF;
    color: #015558;
}

.dark .sdp-btn-text-tertiary:active{
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-text-tertiary:focus{
    background-color: #DAFDFF;
    color: #015558;
}