/* Font Import */


.top-canvass {
    width: 100px;
    height: 300px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px #F2F6FB solid
}
.main-canvass {
    width: 100%;
    height: 380px;
    left: 0px;
    top: 0px;
    margin-bottom: 20px;
    /* position: absolute; */
    background: #F2F9FB;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.20);
    border-radius: 10px;
    border: 1px #F2F6FB solid;

}


.main-canvas {
    width: 100%;
    height: 380px;
    left: 0px;
    top: 0px;
    margin-bottom: 20px;
    /* position: absolute; */
    background: #F2F9FB;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.20);
    border-radius: 10px;
    border: 1px #F2F6FB solid;

}

.ribbon-2 {
    --f: 10px;
    /* control the folded part*/
    --r: 15px;
    /* control the ribbon shape */
    --t: 10px;
    /* the top offset */

    width: 90px;
    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path:
        polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%,
            calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)),
            var(--r) calc(50% - var(--f)/2));
    background: #97989b;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

.ribbon-1 {
    --f: 10px;
    /* control the folded part*/
    --r: 15px;
    /* control the ribbon shape */
    --t: 10px;
    /* the top offset */

    width: 90px;
    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path:
        polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%,
            calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)),
            var(--r) calc(50% - var(--f)/2));
    background: #97989b;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

.top-canvas {
    width: 100%;
    height: 300px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px #F2F6FB solid
}



.location-divider {
    width: 100px;
    left: 30px;
    top: 90px;
    position: absolute;
    color: #326FAC;
    border-style: dashed;
    margin: 5px;
}

.load-material {
    width: 100%;
    height: 64px;
    left: 20px;
    top: 168px;
    position: absolute
}

.truck-type-loading-date {
    width: 100%;
    height: 64px;
    left: 35px;
    top: 160px;
    position: absolute
}

.truck-type {}

.loading-date {}

.pricing {
    width: 193px;
    height: 66px;
    left: 34px;
    top: 310px;
    position: absolute
}

.pricing-currency {
    color: #043253;
    font-size: 20px;
    font-weight: 400;
}

.pricing-amount {
    top: 18px;
    position: absolute;
    color: #043253;
    font-size: 16px;
    font-weight: 500;
    margin-top: 4px;
}

.action-btn {
    width: 100px;
    height: 30px;
    top: 320px;
    left: 250px;
    position: absolute
}

.action-btn-primary {
    width: 100px;
    height: 40px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: #043253;
    border-radius: 5px
}

.action-btn-text {
    left: 5px;
    top: 12px;
    position: absolute;
    text-align: center;
    color: white;
    font-size: 0.8em;
    font-weight: 400;
}

audio {
    height: 34px;
    width: 48px;
    /* Adjust the width as needed */
    margin: 20px auto;
    display: block;
    margin-top: -75px;
    margin-left:5px;
    border-radius: 5px;
}


.bg-danger {
    background: rgb(45, 155, 8) !important;
}

/*
* Responsiveness
*/

@media screen and (min-width: 520px) and (max-width: 718px) {
    .action-btn {
        width: 100px;
        height: 30px;
       /* margin-top:350px; */
       margin-left: -100px;
        position: absolute
    }
    .truck-type-loading-date {
        width: 100%;
        height: 64px;
        margin-left: -240px;
        top: 160px;
        position: absolute
    }
    .audio-loading {
        width: 48px;
        margin: 20px auto;
        display: block;
        margin-top: -75px;
        /* margin-left:10px; */
        border-radius: 5px;
    }

  }

  
  @media screen and (min-width: 1797px) and (max-width: 1799px){
    .truck-type-loading-date {
        width: 100%;
        height: 64px;
        margin-left: -750px !important;
        margin-top: 160px;
        position: absolute
    }
    .action-btn {
        width: 100px;
        height: 30px;
       /* margin-top:350px; */
       margin-left: -50px;
        position: absolute
    }

  }


  @media screen and (min-width: 1400px) and (max-width: 1580px){
    audio {
        height: 34px;
        width: 48px;
        /* Adjust the width as needed */
        margin: 20px auto;
        display: block;
        margin-top: -75px;
        margin-left:-30px !important;
        border-radius: 5px;
    }
  }




  /* Styles for screens larger than or equal to 780px and smaller than or equal to 990px */
@media screen and (min-width: 780px) and (max-width: 990px) {
    .action-btn {
        width: 100px;
        height: 30px;
       /* margin-top:350px; */
       margin-left: 150px;
        position: absolute
    }

    .audio-loading {
        width: 48px;
        margin: 20px auto;
        display: block;
        margin-top: -70px;
        margin-left:-10px;
        border-radius: 5px;
    }

    .truck-type-loading-date {
        width: 100%;
        height: 64px;
        margin-left: 200px;
        margin-top: 160px;
        position: absolute
    }

    .date-loading{
        margin-top: -60px;
    }

  }

  @media screen and (min-width: 1144px){
    audio{
        display: none;
    }

  }
  
  @media screen and (min-width: 1024px){
    audio{
        width: 48px;
        margin: 20px auto;
        display: block;
        margin-top: -90px;
        margin-left:5px;
        border-radius: 5px;
    }
  }

  @media screen and (min-width: 1198){
    .action-btn {
        width: 100px;
        height: 30px;
       margin-top:350px;
       margin-left: -165px;
        position: absolute
    }
    audio{
        width: 48px;
        margin: 20px auto;
        display: block;
        margin-top: -90px;
        margin-left:-54px;
        border-radius: 5px;
    }

  }
   
  @media screen and (min-width: 1191)and (max-width: 1391){
    .action-btn {
        width: 100px;
        height: 30px;
       margin-top:350px;
       margin-left: -185px;
        position: absolute
    }

  }
  @media screen and (min-width: 992px)and (max-width: 999px){
    .action-btn {
        width: 100px;
        height: 30px;
       margin-top:350px;
       margin-left: -157px;
        position: absolute
    }

    .truck-type-loading-date {
        width: 100%;
        height: 64px;
        margin-left: -240px;
        margin-top: 160px;
        position: absolute
    }
    .action-btn-primary {
        width: 100px;
        height: 40px;
        left: 0px;
        top: 0px;
        position: absolute;
        background: #043253;
        border-radius: 5px
    }
    audio{
        width: 48px;
        margin: 20px auto;
        display: block;
        margin-top: -90px;
        margin-left:-14px;
        border-radius: 5px;
    }

  }

@media screen and (min-width: 1000px) and (max-width: 1580px) {
    /* Your styles go here */
  
    .action-btn {
        width: 100px;
        height: 30px;
       margin-top:350px;
       margin-left: -100px;
        position: absolute
    }
    .truck-type-loading-date {
        width: 100%;
        height: 64px;
        margin-left: -240px;
        margin-top: 160px;
        position: absolute
    }
    .action-btn-primary {
        width: 100px;
        height: 40px;
        left: 0px;
        top: 0px;
        position: absolute;
        background: #043253;
        border-radius: 5px
    }

    /* audio {
        height: 34px;
     display: none;

  } */
}


@media (max-width: 991px) {
    .action-btn {
        width: 100px;
        height: 30px;
        top: 300px;
        left: 500px;
        position: absolute
    }

    .action-btn-primary {
        width: 100px;
        height: 40px;
        left: 0px;
        top: 0px;
        position: absolute;
        background: #043253;
        border-radius: 5px
    }

    audio {
        height: 34px;
        width: 48px;
        margin: 20px auto;
        display: block;
        margin-top: -88px;
        margin-left:5px;
        border-radius: 5px;
        
    }

   

    .truck-type {
        left: 500px;
    }
    .main-canvas {
        width: 100%;
        height: 360px;
        left: 0px;
        top: 0px;
        margin-bottom: 20px;
        background: #F2F9FB;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.20);
        border-radius: 10px;
        border: 1px #F2F6FB solid;
    
    }
    .pricing {
        width: 40%;
        height: 45px;
        left: 20px;
        top: 300px;
        position: absolute
    }

}

@media only screen and (min-width: 1614px){
    .truck-type-loading-date{
        margin-left:-250px;
    }
    .action-btn {
        width: 170px;
        height: 30px;
        top: 38px;
       margin-left: -70px;
        position: absolute;
        margin-top: 270px;


}
}

@media only screen and (min-width: 1592px){
    .truck-type-loading-date{
        margin-left:-250px;
    }
    .action-btn {
        width: 170px;
        height: 30px;
        top: 38px;
       margin-left: -70px;
        position: absolute;
        margin-top: 270px;


}
}

@media only screen and (min-width: 1642px){
    .truck-type-loading-date{
        margin-left:-250px;
    }
    .action-btn {
        width: 170px;
        height: 30px;
        top: 38px;
       margin-left: -70px;
        position: absolute;
        margin-top: 270px;


}
}
@media only screen and (min-width: 1580px) and  (max-width: 1590px){
    .truck-type-loading-date{
        margin-left:-250px;
    }
    .action-btn {
        width: 170px;
        height: 30px;
        top: 38px;
       margin-left: -70px;
        position: absolute;
        margin-top: 270px;


}
}

@media only screen and (min-width: 1000px) and  (max-width: 1197px){
 
    .action-btn {
        width: 170px;
        height: 30px;
        top: 38px;
       margin-left: -200px;
        position: absolute;
        margin-top: 270px;


}

audio{
    display: none;
}
}


@media only screen and (min-width: 720px) {

    /* For tablets: */
    .truck-type-loading-date {
        top: 180px;
        left: 280px;
    }

    .action-btn {
        width: 170px;
        height: 30px;
        top: 38px;
        left: 355px;
        position: absolute;
        margin-top: 270px;

    }

    .action-btn-text {
        left: 10px;
        top: 12px;
        color: white;
        font-size: 0.8em;
        font-weight: 700;
    }
}


@media only screen and (max-width: 520px) {

    /* For Mobile: */
    .main-canvas {
        height: 410px;
    }

    .top-canvas {
        height: 320px;
    }

    .truck-type-loading-date {
        left: 280px;
    }

    .truck-type {
        left: 176px;
        top: 165px;

    }

    .truck-types {
        left: 60px;
        top: 165px;

    }

  

    .pricing {
        width: 40%;
        height: 45px;
        left: 15px;
        top: 350px;
        position: absolute
    }

    .pricing-currency {
        font-size: 12px;
        font-weight: 400;
    }

    .pricing-amount {
        font-size: 14px;
        font-weight: 500;
    }

    #pricing-amount {
        font-size: 14px;
        font-weight: 500;
        margin-top: -50px !important;
    }

    .action-btn {
        width: 90px;
        height: 30px;
        top: 350px;
        left: 240px;
        position: absolute
    }

    .action-btn-primary {
        width: 100%;
        height: 40px;
        left: 0px;
        top: 0px;
        position: absolute;
        background: #043253;
        border-radius: 5px
    }

    .action-btn-text {
        left: 6px;
        top: 12px;
        color: white;
        font-size: 0.8em;
        font-weight: 500;
    }

}