/**
 * Space Theme
 * https://coolors.co/palette/353535-3c6e71-ffffff-d9d9d9-284b63
 */
.nav-pills {
    --bs-nav-pills-link-active-bg: #284B63 !important;
}

.nav-pills .nav-link {
    --bs-nav-link-color: #284B63 !important;
}
.form-control {
    border: 1px solid #d0d1d1 !important;
    background-color: #f9f9f9 !important;
}

.form-select{
    border: 1px solid #989da2 !important;
    background-color: #f9f9f9 !important;

}
.form-group{
    margin-bottom: 12px;
}
.inactive-row{
    background-color: red;
    position: relative;
}
.inactive-row:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #efefefd6;
    filter: blur(8px);
    opacity: 88%;
}
/* 
---------------------------------------------
Admin Support Page CSS
--------------------------------------------- 
*/
.cst-box-shadow{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10px;
}
.ticket-info-card{
    border: none;
    background-color: #fff;
}
.ticket-info-card .accordion-button{
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
}
.ticket-info-card .accordion-button:not(.collapsed){
    background-color: #e9ecef !important;
    box-shadow: none !important;
    color: #343a40 !important;
}
.ticket-info-card .field-label{
    font-size: 15px;
    color: #343a40;
}
.ticket-info-card .field-detail{
    font-size: 18px;
}
.ticket-info-card .custom-form-select{
    width: fit-content;
    font-size: 13px;
    border: none;
}


/* 
---------------------------------------------
Color Classes Start
--------------------------------------------- 
*/

.redBG{
       background-color: #e76f51;
    color: #fff;
    border: none;
}
.redLight{
             background-color: hsl(12 76% 96% / 1);
}

.cyanBG{
    background-color: #2a9d8f;
    color: #fff;
    border: none;
}
.cyanLight{
          background-color: hsl(173 58% 94% / 1);
}

.orgBG{
   background-color: #fb8500;
    color: #fff;
    border: none;
}
.orgLight{
             background-color: hsl(32 100% 89% / 1);
}

.greenBG{
  background-color: #6a994e;
    color: #fff;
    border: none;
}
.greenLight{
    background-color: hsl(98deg 82.57% 91.87%);
}

.blueBG{
      background-color: #5fa8d3;
    color: #fff;
    border: none;
}
.blueLight{
    background-color: hsl(202 57% 92% / 1);
}

.saffronBG{
      background-color: #ff784f;
    color: #fff;
    border: none;
}
.saffronLight{
    background-color: hsl(42 100% 90% / 1);
}


/* ------Gredient BG  */
.graBG-1{
        background: linear-gradient(to right, rgb(237, 33, 58), rgb(147, 41, 30));
}
.graBG-2{
       background: linear-gradient(to right, rgb(0, 176, 155), rgb(72 231 191));
}
.graBG-3{
       background: linear-gradient(to right, rgb(254, 140, 0), rgb(248, 54, 0));
}
.graBG-4{
          background: linear-gradient(to right, rgb(82, 194, 52), rgb(23 111 0));
}
.graBG-5{
    background: linear-gradient(to right, rgb(252, 0, 255), rgb(201 138 240));
}
.graBG-6{
      background: linear-gradient(to right, rgb(0, 198, 255), rgb(0, 114, 255));
}

.graBG-7{
    background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));
}


/* 
---------------------------------------------
Color Classes End
--------------------------------------------- 
*/


/* 
---------------------------------------------
Shimmer Animation Start
--------------------------------------------- 
*/
.shimmer-animation {
    position: relative;
    overflow: hidden;
    background-color: #588157;
    color: #fff;
    text-decoration: none;
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 4px;
}

.shimmer-animation::before {
    content: '';
    position: absolute;
    top: 4rem;
    left: -16rem;
    background-color: #fff;
    width: 15rem;
    height: 30px;
    transform: rotateZ(-50deg);
    animation-name: cat-card-animation;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    /* animation-direction: alternate;   */
    animation-timing-function: ease-in-out;
    opacity: 35%;

}

@keyframes cat-card-animation {
    from {
        left: -16rem;
    }

    to {
        left: 7rem;
    }
}
.scaleAnimation{
    scale: 0.7;
    animation-name: scale-animation;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;  
    animation-timing-function: ease-in-out;
}

@keyframes scale-animation {
    from {
        scale: 0.7;
    }

    to {
        scale: 1;
    }
}

/* 
---------------------------------------------
Shimmer Animation End
--------------------------------------------- 
*/


/* 
---------------------------------------------
Cards CSS Style Start
--------------------------------------------- 
*/

.dsh-card-wrapper {
    padding: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* -------- Card 1*/
.card-1 {
    width: 20%;
    height: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.card-1:before {
    content: '';
    position: absolute;
    top: -8px;
    right: 8px;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 6px;
    opacity: 17%;
}
.card-1:after {
    content: '';
    position: absolute;
    bottom: 13px;
    left: 13px;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 6px;
    opacity: 10%;
}
.card-1 h3 {
    font-size: 25px;
    margin: 0px;
    margin-bottom: 6px;
    color: #fff;
    font-weight: 700;
}
.card-1 p {
    margin: 0px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    line-height: 135%;
}
  


/* 
---------------------------------------------
Cards CSS Style End
--------------------------------------------- 
*/

@media screen and (max-width: 770px) {
 .card-1 {
    width: 45%;
  }
}

@media (min-width:319px) and (max-width:425px){
    .dsh-card-wrapper{
        padding: 1rem;
    }
    .card-1 p {
    font-size: 13px;
    }
}