#veterinary-services h3{
    text-align: center;
    font-weight: 700;
}
#veterinary-services p {
    text-align: center;
    font-weight: 500;
}
#veterinary-services h4{
    font-weight: 700;
}
.sticky-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 30px;
}
@media only screen and (max-width: 920px) {
    .sticky-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }
    .sticky-section .card-section .card img {
        width: 100%;
    }
}
.sticky-section .card-section {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    margin-bottom: 50px;
}
.sticky-section .card-section .card-container a{
    text-decoration: none;
    color: #000;
}
.sticky-section .card-section .card {
    display: grid;
    grid-template-columns: 200px 500px;

}
@media only screen and (max-width: 920px) {
    .sticky-section .card-section .card {
        display: flex;
    }
}
.sticky-section .card-section .card .card-body img {
    width: 100%;
    border-radius: 10px;
}

.card-section .card .card-title h5 {
    font-weight: 600;
}
.card-section .card .card-title .rating p {
    /* background-color: #F98866; */
    background-image: linear-gradient(#ff400f, #F88C1F);
    padding: 5px;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
}
.card-section .card .card-title .rating i {
    color: #FF960C;
    font-size: 10px;
    margin-bottom: 15px;
}
.card-section .card .card-title .location {
    display: flex;
    column-gap: 10px;
}
.card-section .card .card-title .client-contact{
    display: flex;
    column-gap: 10px;
    margin-left: -10px;
}
.card-section .card .card-title .card-services{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    align-items: center;
}
.card-section .card .card-title .location i {
    color: #ff4004;
}
.card-section .card .card-title .location p{
    font-size: 14px;
    font-weight: 500;
}
@media only screen and (max-width: 376px) {
    .card-section .card .card-title .card-services  p{
        font-size: 6px !important;
    }
}
.card-section .card .card-title .card-services  p{
    background-color: #D9D9D9;
    font-size: 10px;
    /* font-weight: 600; */
    padding: 5px;
    /* height: 20px; */
    width: 100%;
    border-radius: 8px;
    line-height: 15px;
    text-align: center;
    text-transform: capitalize;
}

.card-section .card .card-title .client-contact .phone{
    background-color: #008000;
    font-size: 12px;
    /* display: flex; */
    /* align-items: center; */
    column-gap: 5px;
    /* padding: 6px; */
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
}
.card-section .card .card-title .client-contact a {
    text-decoration: none;
}
.card-section .card .card-title .client-contact .phone a,
.card-section .card .card-title .client-contact .enquiry a{
    text-decoration: none;
    color: #fff;
}
.card-section .card .card-title .client-contact .whatsapp {
    border: 1px solid #008000;
    font-size: 12px;
    column-gap: 5px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 8px;
}
.card-section .card .card-title .client-contact .whatsapp  {
    color: #008000;
}
.card-section .card .card-title .client-contact .whatsapp a{
    color: #000;
    font-weight: 500;
}
.card-section .card .card-title .client-contact .enquiry {
    background-image: linear-gradient(#ff400f, #F88C1F);
    font-size: 12px;
    display: flex;
    align-items: center;
    column-gap: 5px;
    padding: 6px;
    border-radius: 8px;
    color: #fff;
}
.filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
}
@media only screen and (max-width: 920px) {
    .filters {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 20px;
    }
}
.filters .sort-by .select-btn,
.filters .rating .rating-btn {
    display: flex;
    height: 45px;
    border: 1px solid #e9e3e3;
    padding: 20px;
    font-size: 14px;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    width: auto;
    justify-content: space-between;
}
.filters .Top-Rated,
.filters .all-filters {
    display: flex;
    height: 45px;
    border: 1px solid #e9e3e3;
    color: #fff;
    padding: 20px;
    font-size: 16px;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    column-gap: 8px;
}
.filters .Top-Rated a,
.filters .all-filters a{
    text-decoration: none;
    color: #000;
}
.filters .sort-by .select-btn i,
.filters .rating .rating-btn i {
    font-size: 15px;
    margin-left: 6px;
}

.filters .sort-by.active .options{
    display: block;
}
.filters .rating.active .options{
    display: block;
}
.filters .sort-by,
.filters .rating {
    position: relative;
}

.filters .sort-by .options,
.filters .rating .options {
    position: absolute;
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
    background-color: #fff;
    list-style: none;
    z-index: 11111;
    width: 100%;
    display: none;
}
.filters .sort-by .options .option,
.filters .rating .options .option {
    display: flex;
    height: 45px;
    cursor: pointer;
    padding: 0 16px;
    border-radius: 8px;
    align-items: center;
}
.filters .sort-by .options a,
.filters .rating .options a {
    text-decoration: none;
    color: #000;
}
.filters .sort-by .options .option:hover,
.filters .rating .options .option:hover {
    background-color: #FFF;
}
.sticky-box {
    width: 60%;
    height: 400px;
    border-radius: 20px;
    box-shadow:  1px 2px 6px black;
    position: sticky;
    top: 20px;
    padding: 25px;
    margin-bottom: 50px;
    margin-top: 70px;
}
@media only screen and (max-width: 920px) {
    .sticky-box {
        width: 60%;
        height: 400px;
        background-color: #FFF2D7;
        border-radius: 20px;
        box-shadow:  1px 2px 6px black;
        position: sticky;
        top: 20px;
        padding: 25px;
        margin-bottom: 50px;
        margin-top: 1px;
    }
}
@media only screen and (max-width: 600px) {
    .sticky-box {
        width: 100%;
    }
}
.sticky-box form p {
    color: #000;
}
.sticky-box form .form-data .input-data {
    position: relative;
    height: 50px;
    line-height: 40px;
    margin-bottom: 20px; 
}
.sticky-box form .form-data .input-data input {
    position: absolute;
    height: 90%;
    width: 100%;
    outline: none;
    font-size: 15px;
    padding: 0 20px;
    line-height: 40px;
    border-radius: 5px;
    transition: 0.2s ease;
    border: 1px solid #e9e3e3 !important;
}
.sticky-box form .form-data .input-data label{
    position: absolute;
    left: 15px;
    top: 0; 
    line-height: 40px; 
    transition: 0.2s ease;
    background: transparent;
    padding: 0 4px;
    pointer-events: none;
    background: transparent;
    color: #333;
}
.sticky-box form .form-data .input-data input{
    border: none;
}
.sticky-box form .form-data .input-data input:focus + label,
.sticky-box form .form-data .input-data input:valid + label {
    color: #ff4004;
    height: 60px;
    line-height: 60px;
    transform: translate(-10px, -22px) scale(0.8);
    z-index: 100000;
    padding: 0 4px;
    font-size: 12px;
}

.sticky-section .card-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
@media only screen and (max-width: 920px) {
    .card-section .card .card-title .card-services p {
        font-size: 10px;
    }
}
@media only screen and (max-width: 320px) {
    .card-section .card .card-title .card-services{
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
        margin-bottom: 10px;
    }
    .card-section .card .card-title .card-services p {
        font-size: 6px !important;
        margin-bottom: 4px !important;
    }
}

.form-button{
    margin-top: 50px;
}
.form-button input{
    background-image: linear-gradient(#ff400f, #F88C1F);
    color: #fff;
}
.form-button input:hover{
    background-color: #013674;
    color: #fff;
}

table {
    border-radius: 20px !important;
    border: 1px solid #000;
    margin-bottom: 10px;
}
table th,
table td{
    /* background-color: #F98866 !important; */
    background-image: linear-gradient(#ff400f, #F88C1F);
    padding: 10px;
    border: 1px solid #fff;
    color: #fff;
}

/* ============= Stud services ================ */


.modal-body .step-0 h4{
    text-align: center;
    font-size: 18px;
}
/* .modal-body .step-1 {
    padding: 10px 10px;
} */
.modal-body .step-1 {
    padding-left: 10px;
    padding-right: 10px;
}
.step-1 .form-group {
    width: 100%;
    margin-top: 20px;
}
.step-1 .form-group input {
    width: 94%;
    padding: 6px;
    border: none;
    border: 1px solid #e0dcdc;
    border-radius: 6px;
    outline: none;
    margin-top: 5px;
    margin-left: 12px;
}
.step-1 .form-group label {
    font-weight: 500;
}

.step-1 h4,
.step-2 h4 {
    text-align: center;
    font-weight: 600;
}
button.next-btn,
button.prev-btn,
button.submit-btn {
    float: right;
    margin-top: 25px;
    margin-right: 15px;
    border: none;
    outline: none;
    background-image: linear-gradient(#ff400f, #F88C1F);
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
}

button.prev-btn {
    float: left;
}

.modal-body .form-group .error__msg {
    color: red;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 13px;
    display: none;
}
.step {
    display: none;
}
.step.active {
    display: block;
}

.modal-body .form-group  {
    text-transform: capitalize;
    margin-bottom: 5px;
}

.mating-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 30px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
    .mating-section {
        display: flex;
        justify-content: space-between;
        /* padding: 40px; */
        color: #fff;
        column-gap: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
        flex-direction: column;
        overflow-y: hidden;
    }
    .pet-form {
        background-color: #FFF2D7;
        width: 100% !important;
        height: 500px;
        position: sticky;
        padding: 20px;
        top: 20px;
        border-radius: 10px;
        padding-bottom: 30px;
    } 
    .pat-mating-details {
        margin-top: 40px;
    }
}
.pet-form {
    background-color: #FFF2D7;
    width: 50%;
    height: 500px;
    position: sticky;
    padding: 20px;
    top: 20px;
    border-radius: 10px;
    padding-bottom: 30px;
} 

.pet-form form .form-group {
    position: relative;
}
.pet-form form .form-group i{
    position: absolute;
    right: 10px;
    top: 63%;
}
.pet-form label {
    color: #000;
    margin-bottom: 5px;
    margin-top: 5px;
    text-transform: capitalize;
}
.pat-mating-details {
    width: 100%;
}
.Addpet {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: 20px;
}
@media only screen and (max-width: 768px) {
    .Addpet {
        flex-direction: column;
        align-items: end;
        row-gap: 20px;
    }
}
.Addpet .wrapper-form .name-phoneNumber{
    width: 100%;
}
.Addpet .wrapper-form .name-phoneNumber select{
    font-size: 15px;
    padding: 7px 10px;
    outline: none;
    border-radius: 5px;
    border: 1px solid #e9e3e3;
    color: #8a8989;
}
.Addpet .wrapper-form .name-phoneNumber select option {
    font-size: 15px;
}
.Addpet .search_wrap {
    width: 300px;
    border: 1px solid #e9e3e3;
    border-radius: 10px;
}
.Addpet .search_wrap .search_box {
    position: relative;
    width: 300px;
    height: 36px;
}
.Addpet .search_wrap .input {
    border: 0;
    outline: none;
    color: #8a8989;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
    text-transform: capitalize;
}
.Addpet .search_wrap .search_box .btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background-image: linear-gradient(#ff400f, #F88C1F);
    cursor: pointer;
    color: #fff;
}
.mating-section .btn {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.mating-section .btn input {
    margin-top: 10px;
    padding: 10px;
    text-transform: capitalize;
    /* background-color: #F98866; */
    background-image: linear-gradient(#ff400f, #F88C1F);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}
.mating-section .btn a {
    text-decoration: none;
    text-transform: capitalize;
}
.pat-mating-details .cards-section {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 30px;
}
@media only screen and (max-width: 768px) {
    .pat-mating-details .cards-section {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 30px;
    }
    .pat-mating-details .cards-section .dog-name h4 {
        font-size: 18px;
        margin-top: 5px;
        font-weight: 600;
        color: #000;
    }
    .pat-mating-details .cards-section .contact-details h6 {
        color: #000 !important;
    }
    .pat-mating-details h6,
    .pat-mating-details label {
        color: #000;
    }
}
@media only screen and (max-width: 425px) {
    .pat-mating-details .cards-section {
        display: grid;
        grid-template-columns: repeat(1,1fr) !important;
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 990px) {
    .pat-mating-details .cards-section {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 30px;
    }
}

.pat-mating-details .cards-section .mating-card {
    border: 0.2px solid #c5c3c3;
    border-radius: 18px;
    /* padding: 5px; */
}
.pat-mating-details .cards-section .mating-body img {
    width: 100%;
    border-radius: 18px;
}
.pat-mating-details .cards-section .dog-name h4 {
    font-size: 16px;
    margin-top: 5px;
    font-weight: 600;
}
.pat-mating-details .cards-section .dog-name,
.pat-mating-details .cards-section .dog-details,
.pat-mating-details .cards-section .contact-details,
.pat-mating-details .cards-section .friend-request{
    padding: 5px;
    padding-left: 10px;
}
.pat-mating-details .cards-section .dog-details p {
    font-size: 13px;
    margin-bottom: -2px;
    font-weight: 500;
    color: #000;
    line-height: 1.6rem;
    text-transform: capitalize;
}
.pat-mating-details .cards-section .contact-details {
    display: flex;
    column-gap: 10px;
    margin-top: 10px;
    color: #000;
}
.pat-mating-details .cards-section .contact-details h6 {
    font-size: 11px;
}
.pat-mating-details .cards-section .contact-details img {
    border-radius: 50%;
}

/* .modal-content form .form-group {
    position: relative;
}
.modal-content form .form-group{
    position: absolute;
    right: 10px;
    top: 63%;
} */
/* .pat-mating-details .cards-section .friend-request{
    text-align: -webkit-center;
} */
.pat-mating-details .cards-section .friend-request input{
    font-size: 10px;
    margin-bottom: 8px;
}
.name-phoneNumber .form-group{
    position: relative;
}
.name-phoneNumber .form-group i{
    position: absolute;
    right: 10px;
    top: 26%;
}

.pet-form form .form-group {
    position: relative;
}
.pet-form form .form-group i{
    position: absolute;
    right: 10px;
    top: 63%;
}
@media only screen and (max-width: 768px) {
    .pet-form form .form-group i,
    .name-phoneNumber .form-group i{
        color: #000;
    }
}


/* Buy & Sell */
.buyPet {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 768px) {
    .buyPet {
        flex-direction: column;
    }
    .buyPet h3 {
        font-size: 16px;
    }
}
.all-dog-breeds {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.all-dog-breeds a{
    text-decoration: none;
    color: #000;
}
@media only screen and (max-width: 768px) {
    .all-dog-breeds {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 40px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.all-dog-breeds .dog-img-content {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}
.all-dog-breeds .dog-img-content .dog-img img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* border-radius: 20px; */
}
.all-dog-breeds .dog-img-content .dog-full-details{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}
@media only screen and (max-width: 768px) {
    .all-dog-breeds .dog-img-content .dog-full-details{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }
    .dog-full-details  .dog-name h4 {
        font-size: 15.5px !important;
    }
    .dog-full-details h6{
        font-size: 12px !important;
    }
    .dog-full-details i {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 460px) {
    .all-dog-breeds {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 40px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.dog-img-content .dog-full-details .location-gender {
    display: flex;
    flex-direction: column;
}
.dog-full-details  .dog-name h4 {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 17px;
    /* color: #fff; */
    text-transform: capitalize;
}
.location-gender {
    margin-top: 15px;
}
.location-gender  .location,
.location-gender  .gender{
    display: flex;
    column-gap: 10px;
    align-items: baseline;
}
.location-gender  .gender small {
    text-transform: uppercase;
}
.location-gender  .gender sup {
    text-transform: lowercase;
    font-size: 10px;
    margin-left: -4px;
}
.dog-img-content {
    padding-bottom: 14px;
    border-radius: 10px;
}
.dog-full-details h6{
    font-size: 13px;
    text-transform: capitalize;
}
.dog-img-content .contact-owner-details h3{
    font-size: 18px;
    font-weight: 600;
    margin-top: -10px;
}
.dog-img-content .contact-owner-details p {
    margin-bottom: -1px;
    font-size: 14px;
}
.dog-img-content .contact-owner-details a{
   text-decoration: none;
   font-size: 14px;
   color: #333;
}

/* View Pages */
#view-care .card {
    margin-top: 20px;
    margin-bottom: 10px;
}
#view-care .card .clinic-name-services {
    display: flex;
    justify-content: space-between;
    align-self: center;
}
@media only screen and (max-width: 768px) {
    #view-care .card .clinic-name-services {
        display: flex;
        flex-direction: column;
        align-self: center;
    }
    #view-care .clinic-name-services .avalible-services {
        width: 75%;
    }
}
@media only screen and (max-width: 426px) {
    #view-care .clinic-name-services .avalible-services {
        width: 100%;
    }
    #view-care .clinic-name-services .avalible-services p {
        font-size: 6px !important;
    }
}
#view-care .clinic-name-services .avalible-services {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 10px;
    text-align: center;
}
#view-care .clinic-name-services .avalible-services p {
    font-size: 10px;
    background-color: #D9D9D9;
    padding: 4px;
    border-radius: 3px;
}
#view-care .clinic-name-services h3 {
    font-size: 23px;
    font-weight: 600;
}
#view-care .card .card-body .rating .stars i{
    color: #F88C1F;
    font-size: 13px;
}
#view-care .card .card-body .location {
    margin-top: 10px;
}
#view-care .card .card-body .location i {
    color: #ff400f;
}
#view-care .card .card-body .contact-info {
    display: flex;
    justify-content: space-between;
}
#view-care .card .card-body .contact-info .contact-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}
#view-care .card .card-body .contact-info .contact-icons .whatsapp i {
    background-color:  #008000;
    padding: 6px;
    font-size: 13px;
    height: 30px;
    width: 30px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    border-radius: 6px;
}
#view-care .card .card-body .contact-info .contact-icons .phone i {
    background-image: linear-gradient(#ff400f, #F88C1F);
    padding: 6px;
    font-size: 13px;
    height: 30px;
    width: 30px;
    line-height: 17px;
    text-align: center;
    color: #FFF;
    border-radius: 6px;
}
#view-care .card .card-body .contact-info  .btn a{
    /* background-color: #013674; */
    background-image: linear-gradient(#ff400f, #F88C1F);
    padding: 10px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.full-details {
    display: flex;
    flex: 5;
    gap: 10px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
    .full-details {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }
}

.full-details article .card-imgs .imgs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
    }
    @media only screen and (max-width: 768px) {
        .full-details article .card-imgs .imgs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }
    }
    @media only screen and (max-width:  520px) {
        .full-details article .card-imgs .imgs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
        }
    }
    @media only screen and (max-width:  440px) {
        .full-details article .card-imgs .imgs {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 20px;
        }
    }
.full-details article .card-imgs .imgs img {
    width: 100%;
    border-radius: 10px;
}
.full-details article.address {
    height: 25%;
}
.full-details .photos-infromation-services {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.full-details h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.full-details .photos-infromation-services .card-info {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
}
@media only screen and (max-width: 768px) {
    .full-details h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .full-details .photos-infromation-services .card-info p{
        font-size: 10px !important;
    }
}
@media only screen and (max-width: 378px) {
    .full-details h4 {
        font-size: 13px !important;
        margin-bottom: 10px;
    }
    .full-details .photos-infromation-services .card-info p{
        font-size: 10px !important;
    }
}
.full-details .photos-infromation-services .card-info .timings p {
    font-size: 14px;
    /* margin-left: 15px; */
}
.full-details .photos-infromation-services .services-avaliable .avaliable{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 10px;
    text-align: center;
    width: 60%;
}
@media only screen and (max-width: 768px) {
    .full-details .photos-infromation-services .services-avaliable .avaliable{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 10px;
        text-align: center;
        width: 100%;
    }
    .full-details .photos-infromation-services .services-avaliable .avaliable p {
        font-size: 6px !important;
        background-color: #D9D9D9;
        padding: 4px;
        border-radius: 3px;
        align-items: center;
    }
}
.full-details .photos-infromation-services .services-avaliable .avaliable p {
    font-size: 10px;
    background-color: #D9D9D9;
    padding: 4px;
    border-radius: 3px;
}
.full-details .address .direction a{
    text-decoration: none;
    color: #ff4004;
}
.full-details .address .address-card p {
    font-size: 14px;
}
/* Dropzone Multi Images css */

.drop-section img {
    width: 50%;
}
.drop-section {
    /* min-height: 150px; */
    /* border: 1px dashed #a8b3e3; */
    /* background-image: linear-gradient(#fff, #f1f6ff); */
    border-radius: 12px;
    position: relative;
}
.drop-section div.col:first-child{
    opacity: 1;
    visibility: visible;
    transition-duration: 0.2s;
    transform: scale(1);
    /* width: 300px; */
    margin: auto;
}
.drop-section div.col:last-child{
    font-size: 40px;
    font-weight: 700;
    color: #c0cae1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 300px;
    height: 55px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.6);
    transition-duration: 0.2s;
}
/* i wll use "drag-over-effect" class in js */
.drag-over-effect div.col:first-child {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.1);
}
.drag-over-effect div.col:last-child {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.drop-section span {
    display: block;
    margin: auto;
    color: #707ea0;
    margin-bottom: 5px;
}
.btn-primary {
    background-image: linear-gradient(#ff400f, #F88C1F);
    border: none;
}
.drop-section button{
    color: #fff;
    background-image: linear-gradient(#ff400f, #F88C1F);
    border: none;
    /* margin: auto; */
    display: block;
    margin-bottom: 20px;
    outline: none;
    padding: 7px 20px;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.drop-section input {
    display: none;
}
.list-section {
    /* display: none; */
    text-align: left;
    /* margin: 0px 20px; */
    padding-bottom: 20px;
    margin-left: -30px;
    margin-right: 15px;
}
.list-section .list-title {
    font-size: 1rem;
    color: #707ea0;
    margin-left: 15px;
    font-weight: 600;
}
.list-section li {
    display: flex;
    margin: 15px 0px;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    border-radius: 8px;
    transition-duration: 0.2s;
    align-items: center;
}
.list-section li:hover {
    box-shadow: #e3eaf9 0px 0px 4px 0px, #e3eaf9 0px 12px 16px 0px;
}
.list-section img {
    width: 100%;
}
.list-section li .col {
    flex: .1;
}
.list-section li .col:nth-child(1){
    flex: .15;
    text-align: center;
}
.list-section li .col:nth-child(2){
    flex: .75;
    text-align: left;
    color: #3e4046;
    padding: 8px 10px;
}
.list-section li .col:nth-child(2) div.name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 250px;
    display: inline-block;
    font-size: 0.85rem;
}
.list-section li .col .file-name span {
    color: #707ea0;
    float: right;
}
.list-section li .file-progress{
    width: 100%;
    height: 5px;
    margin-top: 8px;
    border-radius: 8px;
    background-color: #dee6fd;
}
.list-section li .file-progress span {
    display: block;
    width: 5%;
    height: 100%;
    border-radius: 8px;
    background-image: linear-gradient(120deg, #6b99fd, #9385ff);
    transition-duration: 0.4s;
}   
.list-section li .col .file-size {
    font-size: 0.75rem;
    margin-top: 5px;
    color: #707ea0;
}
.list-section li .right-wrong {
    display: flex;
    flex-direction: column;
}
.list-section li .col .fa-xmark,
.list-section li .col .fa-check{
    fill: #d28686;
    background-color: #dee6fd;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: relative;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0%);
    border-radius: 100%;
    cursor: pointer;
}
.list-section li .col .fa-check{
    color: #50a156;
    background-color: transparent;
}
.list-section li.complete span,
.list-section li.complete .file-progress,
.list-section li.complete .fa-xmark{
    display: none;
}
.list-section li.in-prog .file-size,
.list-section li.in-prog .fa-check{
    display: none;
}