.hr {
    background-color: #eeeeee;
    margin: 10px 0;
    width: 100%;
    height: 1px;
}
.hr.pink {
    background-color: rgba(194, 61, 71, 0.1);
    margin: 10px 0;
    width: 100%;
    height: 1px;
}
@media screen and (max-width: 1500px) {
    .content{width: auto !important; }
  }
.content {
    width: 1500px;
    margin: 0 auto;
    padding-bottom: 27rem;
    padding-top: 56px;

    h2 {
        font-family: "HAPPINESS-SANS-title";
        font-size: 40px;
    }

    h3 {
        font-family: "Pretendard-B";
        font-size: 25px;
        position: relative;
        padding-left: 20px;
        margin-bottom: 20px;

        &::before {
            content: '';
            background: url(../../images/icon/subtitle.png);
            width: 7px;
            top: 6px;
            left: 0;
            height: 17px;
            display: block;
            position: absolute;
        }
    }

    .gopage {
        font-family: "Pretendard-L";
        font-size: 17px;
        text-align: right;

    }

    .gopage::after {
        content: '\2192';
        font-size: 18px;
    }


    /* pagination */
    .pagination {
        button {
            width: 40px;
            height: 40px;
            margin: 0 4px;
            border: 1px solid #f0f1f4;
            background-color: #fff;
            border-radius: 50px;
        }

        button.page-number {
            font-size: 20px;
            color: #555555;
            width: 40px;
            height: 40px;
            background-color: #f0f1f4;
            border-radius: 50px;
        }

        button.page-number.clicked {
            background-color: #ce3e48;
            color: #fff;
        }

        .anticon {
            svg {
                font-size: 17px;

                path {
                    color: #636364;
                }
            }


        }
    }



}

.sub-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.breadcrumb-list {
    ul {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    li {
        font-size: 16px;

        p {
            font-size: 16px;
            color: #000;
            font-family: "Pretendard-L";
            margin-left: 5px;
        }

        &:first-child {
            display: flex;
            align-items: center;
        }

        &:last-child {
            font-family: "Pretendard-SB";
        }
    }
}


.btn-group {
    gap: 10px;

    button.cancel {
        width: 130px;
        background-color: #f9f9f9;
        border: 1px solid #636364;
    }

    button.register {
        width: 130px;
        background-color: #ce3e48;
        color: #fff;

        a, span {
            color: #fff;
        }
    }
}

form, .form {
    margin: 0 auto;
    border: 1px solid #dddddd;
    border-radius: 20px;

    input {
        padding: 0 15px;
        height: 50px;
        border: 1px solid #dddddd;
        border-radius: 5px;
        font-size: 16px;
        width: inherit;
    }

    dd {
        display: flex;
        align-items: center;

        p {
            font-size: 20px;
            font-family: "Pretendard-L";
            line-height: 30px;
        }

        span {
            font-size: 20px;
            font-family: "Pretendard-SB";
        }
    }

    label {
        position: relative;
        width: 200px;
        font-size: 18px;
        flex-shrink: 0;

        &.require::after {
            position: absolute;
            top: 5px;
            padding-left: 3px;
            content: "*";
            color: #df2d2d;
        }
    }


}

/* 카테고리 */
.category {
    display: flex;
    gap: 5px;

    .category-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    li {
        width: fit-content;
        border-radius: 3px;
        padding: 5px 10px;
        font-family: "Pretendard-SB" !important;
        font-size: 14px;

        &:nth-child(odd) {
            color: #a5067b;
            border: 1px solid #a5067b;
        }

        &:nth-child(even) {
            color: #007ac3;
            border: 1px solid #007ac3;
        }

        button {
            margin-left: 15px;
        }
    }
}

/* 로그인 */
.login-form {
    width: 600px;
    padding: 50px 60px;
    dd{display: block;}
    label {
        color: #666;
        font-size: 16px;
        display: block;
        margin-bottom: 6px;
    }

    button {
        font-size: 22px;
        font-family: "Pretendard-B";
        background: linear-gradient(132deg, #3e355c, #763954);
        width: 100%;
        padding: 19px 0;
        border-radius: 15px;
        margin-top: 10px;

        img {
            margin: 0 12px 0 0;
        }

        span {
            color: #fff;
        }
    }
    input{width: -webkit-fill-available;}
    .check-area {
        display: flex;
        input {
            margin-right: 5px;
        }
        label{width: auto;}
    }
}

/* 내정보 */
.info-form,
.pwchange-form {

    padding: 30px 50px;

}

.pwchange-form {
    input {
        width: 40%;
    }
}

.invalid-feedback.border {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #fbf1f2 !important;
    border: 1px solid #ce3e48 !important;
    border-radius: 20px;
    padding: 8px 24px;
    margin-left: 20px !important;

    span {
        font-size: 14px !important;
        color: #e22d2d;
        font-family: "Pretendard-EL" !important;
    }
}

.info-form {
    dd {
        img {
            margin-right: 17px;
        }

        span {
            width: 118px;
        }
        .ck-content{font-size: 20px;     font-family: "Pretendard-L";}
    }
}

/* 통합검색 */
.search-form {
    dl {
        padding: 35px 75px;

        dd {
            display: flex;
            align-items: center;

            p {
                font-size: 18px;
                font-family: "Pretendard-SB";
                width: 180px;
                flex-shrink: 0;
            }

            input[type="text"] {
                background-color: #f6f6f6;
                border: 0;
            }
        }
        dd.category-dd{
            ul{
                flex-wrap: wrap;
            max-height: 80px;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            }

        }
        .mark {
            width: fit-content;
            margin: 0 11px;
        }

    }

    background-image: linear-gradient(#fff, #fff),
    linear-gradient(-45deg, #ca3e49, #3f355c);
    background-origin: border-box;
    background-clip: content-box,
    border-box;
    border: 3px solid transparent;
    border-radius: 32px;


    .btn-group {
        display: flex;
        justify-content: center;

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 140px;
            font-family: "Pretendard-B";
            font-size: 16px;
            border-radius: 30px;

            &.reset {
                border: 1px solid #ccc;
            }

            &.search {
                background: linear-gradient(132deg, #3e355c, #763954);

                p {
                    color: #fff;
                }
            }
        }
    }

    ul {
        display: flex;
        gap: 15px;
    }

    li {
        display: flex;
        align-items: center;
        width: 175px;
        gap: 12px;
        label{cursor: pointer;}
    }




}

.select-box {
    width: 106px;
    height: 30px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    flex-shrink: 0;
    padding: 0 10px;
    line-height: 30px;
    margin-left: 30px;

    select {

        width: 100%;
        border: 0;
        font-size: 14px;
    }
}

.search-result {
    margin-top: 40px;



    .resultext {
        .main-img {
            width: 320px;
            height: 220px;
            border-radius: 24px;
        }

        display: flex;
        align-items: center;

        p {
            width: max-content;
            font-family: "Pretendard-L";
            font-size: 17px;

            b {
                color: #ce3e48;
            }
        }

        img {
            object-fit: contain;
        }
    }

    .result-box {
        display: flex;
        justify-content: space-between;
        border: 1px solid #ddd;
        border-radius: 24px;
        padding: 30px;
        margin-bottom: 30px;
        cursor: pointer;
        .main-img{
            width: 320px;
            height: 220px;
            border-radius: 24px;
            flex-shrink: 0;
            img{
                width: 100%;
                height: 100%;
                border-radius: 24px;
                object-fit: contain;
            }
        }
    }

    .text-box {
        cursor: pointer;
        p,
        li {
            font-family: "Pretendard-L";

        }

        .text {
            width: 1048px;
            font-size: 16px;
            color: #555555;
            overflow: hidden;
            /* Hide any overflow */
            text-overflow: ellipsis;
            /* Add an ellipsis at the end */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* Limit to 2 lines */
            -webkit-box-orient: vertical;
            margin-bottom: 20px;
        }

        h5 {
            font-family: "Pretendard-B";
            font-size: 25px;
            margin-bottom: 20px;

        }

        .address {
            font-size: 20px;
            margin-bottom: 18px;
        }

        .date {
            ul {
                display: flex;
                gap: 20px;
            }

            li {
                font-size: 17px;

                b {
                    margin-left: 5px;
                }
            }
        }
    }

    .tabs {
        .tab-box {
            display: flex;
            justify-content: end;
            gap: 25px;
        }

        .tab-title {
            display: flex;
            align-items: center;
            gap: 13px;

            p {
                cursor: pointer;
                font-family: "HAPPINESS-SANS-REGULAR";
                color: #cccccc;
                font-size: 17px;

                b {
                    color: #cccccc;
                }
            }

        }

        .tab-title.active p {
            color: #000;

            b {
                color: #ff4141;

            }

        }

        .tab-content {
            .content-wrap {
                margin-top: -23px;
            }

            .box-wrap {
                width: 454px;
                height: 370px;

                .box {
                    background-image: linear-gradient(#fff, #fff),
                        linear-gradient(-45deg, #fff, #fff);
                    background-origin: border-box;
                    background-clip: content-box, border-box;
                    border: 3px solid transparent;
                    border-radius: 32px;
                }

                .box:hover {
                    background-image: linear-gradient(#fff, #fff),
                        linear-gradient(-45deg, #ca3e49, #3d355d);
                }

                .tab-image {
                    width: 100%;
                    height: 297px;
                    object-fit: cover;
                    border-radius: 30px;
                }

            }

        }

    }

    .list-wrap {
        border-top: 2px solid #000;

        &>li {
            border-bottom: 2px solid #eeeeee;
            padding: 30px 10px;
        }
    }
    .no-results{
        text-align: center;
        padding: 60px 0;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;

    }
    .no-results p:first-of-type {
        font-size: 32px;
        font-family: "Pretendard-B";
        margin-top: 45px;
    }

    .no-results p:last-of-type {
        font-size: 18px;
        line-height: 30px;
        font-family: "Pretendard-L";
        margin-top: 30px;
    }
}



/*사진 기록물 등록페이지 */
.insert-form {
    padding: 10px 0;
    border-top: 2px solid #000;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;

    dl {
        dd {
            padding: 0 24px;

            li {
                p {
                    font-family: "Pretendard-L";
                    font-size: 16px;
                }
            }
        }

        textarea {
            min-height: 425px;
            width: 100%;
        }

        .category-add {
            width: 72px;
            height: 29px;
            color: #fff;
            background-color: #000;
            border-radius: 15px;
            margin-left: 10px;
        }
    }

    .invalid-feedback {
        display: flex;
        border: 0;
        background-color: transparent;
        margin-left: 10px;
        span{
            color: #e22d2d;
            font-size: 14px;
            font-family: "Pretendard-EL";
        }

    }

}

.file-input {
    display: none;
}

/* Style the custom label (the clickable button) */
.file-label {
    display: inline-block;
    padding: 25px 0px;
    width: 100% !important;
    background-color: #f6f6f6;
    border: 2px dashed #dadada;
    color: white;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;

}

.file-label>div p {
    font-family: "Pretendard-B" !important;
    font-size: 20px !important;
}

/* Style the label on hover */
.file-label:hover {}

/* Style for the file names display */
.file-names {
    display: block;
    /* Make each file name appear on a new line */
    font-size: 16px;
    color: #333;

    &> div, span {
        color: #dadada;
    }

    .file-wrap {
        border: 1px solid #dadada;
        border-radius: 10px;
        padding: 12px;

        .file-name {
            display: flex;
            align-items: center;

            img {
                margin-right: 10px;
            }

        }
    }
}


/* 모달 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 배경 어두운 투명도 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background-color: #fff;
    padding: 50px 35px;
    border-radius: 8px;
    max-width: 1000px;
    width: 100%;
    text-align: center;

    h2 {
        font-family: "Pretendard-B";
        font-size: 30px;
    }

    /* pagination */
    .pagination {
        button {
            width: 40px;
            height: 40px;
            margin: 0 4px;
            border: 1px solid #f0f1f4;
            background-color: #fff;
            border-radius: 50px;
        }

        button.page-number {
            font-size: 20px;
            color: #555555;
            width: 40px;
            height: 40px;
            background-color: #f0f1f4;
            border-radius: 50px;
        }

        button.page-number.clicked {
            background-color: #ce3e48;
            color: #fff;
        }

        .anticon {
            svg {
                font-size: 17px;

                path {
                    color: #636364;
                }
            }


        }
    }

    .modal-search {
        padding: 13px;
        background-color: rgba(0, 61, 97, 0.05);
        border-radius: 10px;

        input {
            padding: 0px 20px;
            background-color: #fff;
            border-radius: 5px;
            width: 300px;
            height: 45px;
            font-size: 16px;
            margin-right: 5px;
        }

        .search-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 45px;
            gap: 5px;
            border-radius: 5px;
            background-color: #000;
            p {
                font-size: 16px;
                color: #fff;
                font-family: "Pretendard-SB";
            }
        }
    }



    .register-b {
        width: 110px;
        height: 40px;
        font-size: 18px;
        background-color: #000;
        color: #fff;
        font-family: "Pretendard-M";
        border-radius: 50px;
    }

}


/* 사진기록물 상세페이지 */
.gallery-form {
    border: 0;

    dl {
        padding: 30px 0 0 0;
        border-top: 2px solid #000;

        dd {
            position: relative;
            background: #f6f6f6;
            padding: 25px 0px;

            p {
                flex: 1;
                font-size: 35px;
                text-align: center;
                font-family: "Pretendard-B"
            }

            .date {
                position: absolute;
                right: 30px;

                span {
                    font-family: "Pretendard-R";
                    font-size: 18px;
                }

                img {

                    object-fit: contain;
                    margin-right: 10px;
                }

            }


        }

    }

    .gallery {
        margin-bottom: 107px;
        position: relative;

        &.video {
            margin-bottom: 50px;

            img {
                height: 800px;
                border-radius: 20px;
            }
        }

        .main-swiper {
            .swiper {
                width: 100%;

                .swiper-slide {
                    img {
                        height: 800px;
                        width: 100%;
                        object-fit: contain;
                        background-color: #ddd;
                    }
                }

            }
        }

        .thumbnail {
            width: 1127px;
            padding: 30px 0px;
            background-color: #fff;
            border-radius: 90px;
            position: absolute;
            z-index: 1;
            left: 50%;
            transform: translateX(-50%);
            bottom: -10%;
            box-shadow: 1px 2px 19px 1px rgba(0, 0, 0, 0.04);

            .swiper {
                width: 940px;
                position: initial;
                height: 120px;
                margin: 0 auto;
                .swiper-slide{
                    background-image: linear-gradient(#fff, #fff),
                    linear-gradient(-45deg, #fff, #fff);
                    background-origin: border-box;
                    background-clip: content-box, border-box;
                    border: 3px solid transparent;
                }
                .swiper-slide:hover,
                .active-thumb {
                    background-image: linear-gradient(#fff, #fff),
                    linear-gradient(-45deg, #ca3e49, #3d355d);
                }
                .swiper-wrapper {
                    margin: 0;
                }

                .swiper-slide img {
                    width: -webkit-fill-available;
                    cursor: pointer;
                    object-fit: contain;

                }

                input{position: absolute; right: 6px; top: 6px; z-index: 5;}
            }
        }

        .swiper-button-prev,
        .swiper-button-next {
            box-shadow: none;
            margin-top: -35px;
        }

        .swiper-button-prev {
            left: 20px;
        }

        .swiper-button-next {
            right: 20px;
        }


    }

    .img-box {
        margin-right: 50px;
        width: 600px;
        height: 360px;
    }

    .info-form {
        background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #ca3e49, #3f355c);
        background-origin: border-box;
        background-clip: content-box, border-box;
        border: 3px solid transparent;
        border-radius: 32px;
        padding: 0;
        height: 360px;

        .info-box {
            padding: 50px 40px;

            dl {
                border: 0;
                padding: 37px;
                border-radius: 20px;
                background-color: #f5f6f8;

                dd {
                    background-color: transparent;
                    padding: 0;

                    p {
                        font-size: 20px;
                        text-align: left;
                        font-family: "Pretendard-L";
                    }
                }
            }
        }

    }


    .btn-group {
        margin-top: 24px;
        text-align: center;

        button {
            width: 160px;
            height: 45px;
            font-family: "Pretendard-B";
            font-size: 16px;
            padding: 13px 21px;
            text-align: left;
            margin: 0 5px;
        }

        .select-down {
            background-image: url(../../images/downbtn_border.png);
        }

        .all-down {
            background-image: url(../../images/downbtn_bg.png);
            color: #fff;
        }
    }


}
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    p{color: #fff;}
    p:first-of-type {
        font-size: 30px;
        font-family: "Pretendard-B";
        margin-top: 28px;
    }
    p:last-of-type {
        font-size: 22px;
        font-family: "Pretendard-M";
        margin-top: 18px;
    }
  }
  .loading-spinner {
    background: url(../../images/loading.png);
   width: 178px;
   height: 178px;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

/* 회원관리,  카테고리 관리 */
.management {
    .left-con {
        width: 350px;
        margin-right: 55px;
    }

    .search-area {
        gap: 5px;
        padding: 0;
        height: 40px;
    }

    .search-wrap {

        position: initial;
        transform: none;

        input {
            width: 100%;
            height: 100%;
            border: 1px solid #000;
            border-radius: 5px;
        }

        .select-box {
            border-color: #000;
            width: 100px;
            height: 100%;

            select {
                width: 100%;
                color: #000;
            }
        }

        .search-btn {
            position: relative;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background-color: #000;
            border-radius: 5px;

            img {
                position: absolute;
                left: 50%;
                right: 50%;
                transform: translateX(-50%) translateY(-50%);
            }

        }
    }

    .btn-group-small {
        gap: 5px;

        .button {
            &.flex {
                img {
                    text-align: left;
                    margin-right: 10px;
                }

                p {
                    text-align: center;
                }
            }
        }
    }

    .select-box {
        width: 230px;
        height: 50px;
        border: 1px solid #ddd;
        padding: 0 15px;
        margin: 0;

        select {
            width: 100%;
            height: 100%;
            font-size: 16px;
            /* color: #999999; */
        }
    }

    .switch {
        label {
            margin-top: -12px;
        }
    }

    table {
        border-radius: 10px;
        overflow: hidden;

        thead {
            display: table;
            width: 100%;
            background-color: #636364;

            th {
                color: #fff;
                border: 1px solid #eee;
            }
        }

        td {
            /* border: 1px solid #eee; */
            text-align: center;
        }
        tbody {
            border: 1px solid #eee;
            display: block;
            min-height: 53rem;
            max-height: 53rem; /* Adjust the height as per your requirement */
            overflow-y: auto;
            overflow-x: hidden; /* Optional: Prevent horizontal scroll */
          }
          tbody tr{
            table-layout: fixed; display: table;width: 100%;
            td{cursor: pointer;}
        }
        tbody tr:hover td {
            background-color: rgba(194, 61, 74, 0.1);
        }

    }

    .delete-member {
        background-color: #f5f8f9;

        td {
            color: #aaaaaa;

        }
    }

    textarea {
        border-color: #ddd;
    }
}



/* 인풋 커스텀 */


input[type="date"] {
    position: relative;
    width: 158px;
    border-radius: 8px;
    background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
}

input[type="date"]::placeholder {
    color: #fff;
    ;
}

input[type='date']::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

input[type="checkbox"] {
    position: relative;
    width: 22px;
    height: 22px;
    padding: 0;
    accent-color: #544483;
    /* This will change the checkbox color when checked */
    border: 1px solid #cccccc;
    /* This controls the border color */
    border-radius: 4px;
    /* Optional: rounded corners */
    background-color: #fff;
    /* Default background */
    appearance: none;
    /* Remove the default checkbox appearance */
    cursor: pointer;
}

/* Checked state of the checkbox */
input[type="checkbox"]:checked {
    background-color: #544483;
    /* Custom background when checked */
    border-color: #544483;
    /* Custom border color when checked */
}

input[type="checkbox"]:checked::before {
    content: '';
    background-image: url(../../images/check.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 2px;
    top: 5px;
    width: 15px;
    height: 11px;
}

input[type="checkbox"]:checked+label {
    color: rgba(0, 0, 0, 0.12);
    /* Change the label color when checkbox is checked */
}

input[type="checkbox"]+label,
input[type='radio']+label {
    font-size: 17px;
    font-family: "Pretendard-L";
    width: 140px;
    flex-shrink: 0;
}

/* 기본스타일 제거, 버튼 모양 재설정 */
input[type='radio'] {
    flex-shrink: 0;
    -webkit-appearance: none;
    /* 웹킷 브라우저에서 기본 스타일 제거*/
    -moz-appearance: none;
    /* 모질라 브라우저에서 기본 스타일 제거*/
    appearance: none;
    /*기본 브라우저에서 기본 스타일 제거*/
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #ccc;
    /*체크되지 않았을 때의 테두리 색상*/
    border-radius: 50%;
    outline: none;
    /*focus 시에 나타나는 기본 스타일 제거*/
    cursor: pointer;
}

/* 체크 시 버튼 모양 스타일*/
input[type='radio']:checked {
    background-color: #544483;
    /*체크 시 내부 원 색상*/
    border: 4px solid #fff;
    /*라인이 아닌, 라인과 원 사이 색상*/
    box-shadow: 0 0 0 1px #ccc;
    /*라인*/
}

.switch {
    input[type="checkbox"] {
        height: 0;
        width: 0;
        visibility: hidden;
    }

    label {
        cursor: pointer;
        text-indent: -9999px;
        width: 65px;
        height: 28px;
        background: #787878;
        display: block;
        border-radius: 100px;
        position: relative;
        transition: background-color 0.3s ease;
        /* Added smooth transition for background */
    }

    label:after {
        content: '';
        position: absolute;
        top: 4px;
        left: 5px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        transition: left 0.3s ease, transform 0.3s ease;
        /* Smooth transition for the toggle ball */
    }

    /* When the input is checked */
    input:checked+label {
        background: #544483;
        /* Color when active */
    }

    input:checked+label:after {
        left: calc(100% - 5px);
        transform: translateX(-100%);
        /* Keeps the ball moving smoothly */
    }

    /* Optional: Make the toggle ball slightly larger during the click for a better effect */
    label:active:after {
        width: 20px;
        /* Slightly increase the ball size */
        height: 20px;
    }
}




/* table*/
table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #000;
}

thead {
    background-color: #f6f6f6;
}

th {
    font-family: "Pretendard-SB";
    font-size: 18px;
}

tbody tr {
    border-bottom: 1px solid #eeeeee;

    td {
        font-size: 16px;
        font-family: "Pretendard-L";
    }
}

td,
th {
    padding: 10px 0;
}