@import "../../variables.scss";


.taxMotOuter {
   .taxMotInner {
    //   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      height: 100%;     border-radius: 10px;
    .taxMotHead {
        border-top: 2px solid $green ;
        border-left: 2px solid $green ;
        border-right: 2px solid $green ;
        border-top-left-radius: $bdr-rds + 7;
        border-top-right-radius: $bdr-rds + 7;
        // box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        padding: $pad + 10 $pad + 20;
        border-bottom: 2px solid #dadada ;
        position: relative;
        background: #fff;
        
        // SORN status - orange border
        &.sornStatus {
            border-top: 2px solid orange;
            border-left: 2px solid orange;
            border-right: 2px solid orange;
        }
         // SORN status - orange border       
        
        @media (max-width: $xl) {
            padding: $pad + 5 $pad + 10;
        }
        @media (max-width: $lg) {
            padding: $pad + 5;
        }
        .taxMotHeadLt {
            .cricleImg {
                border: 3px solid $green;
                border-radius: $bdr-rds + 50;
                background-color: $lightgreen;
                box-shadow: 0px 4px 9px 1px rgba(135, 135, 135, 0.3);
                display: flex;
                width: 44px;
                height: 44px;
                line-height: 38px;
                align-items: center;
                justify-content: center;
                
                // SORN status - orange border for circle
                .sornStatus & {
                    border: 3px solid orange;
                    background-color: #fff3e0;
                }
                
                
                @media (max-width: $xl) {
                    width: 40px;
                    height: 40px;
                    img {
                        max-width: 20px;
                    }
                }
            }

             .sornCricleImg {
                border: 3px solid #dbd317 !important;
                background-color: #f7ee16 !important;
                border-radius: 15px !important;
                box-shadow: 0px 4px 9px 1px rgba(135, 135, 135, 0.3);
                display: flex;
                width: 44px;
                height: 44px;
                line-height: 38px;
                align-items: center;
                justify-content: center;
                
                // SORN status - orange border for circle
                .sornStatus & {
                    border: 3px solid orange;
                    background-color: #fff3e0;
                }
                
                
                @media (max-width: $xl) {
                    width: 40px;
                    height: 40px;
                    img {
                        max-width: 20px;
                    }
                }
            }
        }

        .taxMotHeadRt {
            margin-left: $mrg + 10;

            @media (max-width: $xl) {
                margin-left: $mrg + 5;
            }

            h5 {
                color: $darkgrey;
            }

        }
    }
    .taxMotlist {
        border: 2px solid #5ab31b ;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        padding: $pad + 20;
        border-bottom-left-radius: $bdr-rds + 7;
        border-bottom-right-radius: $bdr-rds + 7;
        height: calc(100% - 90px);
        margin-top: -5px;
        
        // SORN status - orange border for list
        .sornStatus & {
            border: 2px solid orange;
        }

        @media (max-width: $xl) {
            padding: $pad + 10;
            height: calc(100% - 75px);
        }

        li {
            border: none;
            padding: 0;
            display: flex;
            justify-content: space-between;
            margin-bottom: $mrg + 20;
            font-size: $font + 8;
            text-align: right;

            .taxMotlistTitle {
                font-weight: $font-weight-heavy;
                flex-shrink: 0;
                margin-right: $mrg;

                @media (max-width: $xl) {
                    margin-right: 0;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }

            @media (max-width: $xl) {
                font-size: $font + 5;
                margin-bottom: $mrg + 10;

            }

            @media (max-width: $lg) {
                // flex-direction: row;
                text-align: left;

            }

            @media (max-width: $sm) {
                flex-direction: column;
            }

        }
    }
}

.taxMotInner.sornStatus {
  .taxMotlist {
    border: 2px solid orange;
  }

   .cricleImg {
      border: 3px solid #dbd317 !important;
      background-color: #f7ee16 !important;
      border-radius: 15px !important;
    }
  
}

.taxMotInner.expired {
  .taxMotHead {
    border-top: 2px solid red;
    border-left: 2px solid red;
    border-right: 2px solid red;
  }
  .taxMotlist {
    border: 2px solid red;
  }
  .taxMotHeadLt {
    .cricleImg {
      border: 3px solid #b90f16;
      background-color: #ea372e;
    }
  }
}
}