
    .last-synced-wrapper{
      margin-top: 40px;
      margin-bottom: 40px;

    }
    .count-wrapper p{
      margin: 0;
    }
    .section-save-other-images{
      margin-top: 40px;
    }
    .custom-group-data {

        display: flex;
        /*border: 2px solid black;*/
        border-radius: 30px;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        width: 15%;
        background-color: white;
    }
    .custom-object-data {
        display: flex;
        /*border: 2px solid black;*/
        border-radius: 30px;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        width: 15%;
        background-color: white;
    }
    .custom-collection-data {
        display: flex;
        /*border: 2px solid black;*/
        border-radius: 30px;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        width: 15%;
        background-color: white;
    }
    .custom-exhibition-data {
        display: flex;
        /*border: 2px solid black;*/
        border-radius: 30px;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        width: 15%;
        background-color: white;
    }
    .custom-artist-data {
        display: flex;
        /*border: 2px solid black;*/
        border-radius: 30px;
        flex-direction: column;
        justify-content: start;
        margin: 10px;
        width: 15%;
        background-color: white;
    }
    .wrapper{
        display: flex;
        flex-direction: row;
    }
    .custom-button-container {
        display: flex;
        justify-content: start;
        text-align: center;
        margin-top: 30px;
        gap: 60px;
        align-items: center;
    }


     .main-heading{
        display: flex;
        align-items: center;
        margin-top: 2px;
    }
    .button-styling{
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 60px;
    }
    h1::selection{
        color: white;
        background-color: black;
    }




    .btn-dark, form#collector-systems-automatic-sync-settings-form .btn-dark {
        padding: 10px 20px !important;
        background-color: #000 !important;
        color: #fff !important;
        border: none;
        border-radius: 5px !important;
        cursor: pointer;
        font-weight: normal !important;
    }
    .btn-dark:disabled, .btn-dark:disabled:hover, form#collector-systems-automatic-sync-settings-form .btn-dark:disabled:hover, form#collector-systems-automatic-sync-settings-form .btn-dark :disabled{
      border: 1px solid #999999;
      background-color: #cccccc;
      color: #666666;
    }

    .btn-dark:hover, form#collector-systems-automatic-sync-settings-form .btn-dark:hover {
        background-color: #2c2b2b;
    }


    #create-image-list-button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #create-image-list-button:hover {
        background-color: #0056b3;
    }

     #create-image-detail-button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #create-image-detail-button:hover {
        background-color: #0056b3;
    }

    #fetch-exhibition-button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #fetch-exhibition-button:hover {
        background-color: #0056b3;
    }
     #fetch-collection-button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #fetch-collection-button:hover {
        background-color: #0056b3;
    }
    #fetch-group-button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #fetch-group-button:hover {
        background-color: #0056b3;
    }

    #sync {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #sync:hover {
        background-color: #0056b3;
    }
    .loading-class{
        display: flex;
        justify-content: center;
        align-Items: center;
    }
    .loading-indicator {
        width:100px;
        height:100px;
        border-radius:50%;
        padding:1px;
        background:conic-gradient(#0000 10%,#575763) content-box;
        -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
        radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
        animation:s4 1s infinite steps(10);
    }
    .loading-indicator-image {
        width:100px;
        height:100px;
        border-radius:50%;
        padding:1px;
        background:conic-gradient(#0000 10%,#575763) content-box;
        -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
        radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
        animation:s4 1s infinite steps(10);
    }
    .loading-indicator-image-object {
        width:100px;
        height:100px;
        border-radius:50%;
        padding:1px;
        background:conic-gradient(#0000 10%,#575763) content-box;
        -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
        radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
        animation:s4 1s infinite steps(10);
    }
    @keyframes s4 {to{transform: rotate(1turn)}}

    .count-wrapper .count-data{
      display: none;

    }


    /*lds-dual-ring spinner start*/
    .lds-dual-ring {
      display: inline-block;
      width: 80px;
      height: 80px;
    }
    .lds-dual-ring:after {
      content: " ";
      display: block;
      width: 64px;
      height: 64px;
      margin: 8px;
      border-radius: 50%;
      border: 4px solid #c5c5c5;
      border-color: #c5c5c5 transparent #c5c5c5 transparent;
      animation: lds-dual-ring 1.2s linear infinite;
    }
    @keyframes lds-dual-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /*lds-dual-ring spinner end*/


.sync-row {
  display: flex;
  align-items: center;
  gap: 15px; /* Adjust spacing between elements */
}

.sync-row .sync-submit {
  margin-left: auto; /* Push the button to the right, if needed */
}

form#collector-systems-automatic-sync-settings-form .container-save-images-on-automatic-sync-to{
    display: flex;
    align-items: center;
    gap: 15px;
}
.section-inner{
    padding-left: 30px;
}
hr.page-break{
    margin: 20px 0;
    border: none;
    height: 2px;
    background: #000;
}

label, #section-data label, #section-images label, #section-automatic-sync label{
font-weight: bold;
font-size: 16px;
}


#images-count-wrapper{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
#images-count-wrapper .image-group:first-child{
    margin-left: 0;
}
#images-count-wrapper h5{
    margin-top: 0;
}

#images-count-wrapper .image-group{
    display: flex;
    border-radius: 30px;
    flex-direction: column;
    justify-content: start;
    margin: 10px;
    width: 15%;
}
#images-count-wrapper .image-group p{
    margin-top: 0;
    margin-bottom: 0;

}
.count-wrapper-images .count-data {
    display: none;

}
.form-horizontal-wrapper{
    display: flex;
    align-items: center;
    gap: 15px;
}
.form-item--save-option{
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-checkbox-wrapper{
    margin: 20px 0 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}
.custom-checkbox{
    display: flex;
    align-items: center;
}

.custom-checkbox-wrapper input[type = 'checkbox']{
    width: 20px;
    height: 20px;
    outline: none;
    box-shadow: none;
}
.custom-checkbox-wrapper label{
    font-weight: 400;
    margin-left: 10px;
}
#section-images{
    margin-top: 40px;
}
