@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --navbar-height: 64px; 
  --sidebar-width:235px;
  --sidebar-small:58px;
}
.sidebar-width {
    padding-left: var(--sidebar-width);
}
.sidebar-small {
    padding-left: var(--sidebar-small);
}

html, body {
    font-family: "Inter", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 14px;
    height: 100%;
}

.main-content-wrap{
    padding-top: var(--navbar-height);
    height: 100%;
}

.main-content-dashboard{
    /*padding-left:var(--sidebar-width);*/
    padding-top: var(--navbar-height);
    flex:1;
    @media screen and (max-width: 768px) {
       padding-left:var(--sidebar-small);
    }
}

.fixedgrid-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1;
    background-color: var(--mud-palette-surface) !important;
}



.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.navbar-custom{
    height:var(--navbar-height);
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color:white !important;
    position: fixed;
    top: 0;
    z-index: 3;
    left: 0;
    right: 0;
    @media screen and (max-width: 768px) {
        height:auto;
    }
    .navbar-collapse{
        .nav-item{
            a{
                font-family: "Roboto", sans-serif !important;
                font-weight: 400;
                font-size: 15px;
                line-height: 100%;
                color: #41AED6;

            }
            .name-text{
                font-family: "Roboto", sans-serif !important;
                font-weight: 500;               
                font-size: 20px;
                line-height: 100%;               
                color: #41AED6;
                text-align:right;
            }
            .sub-name-text{
                  font-family: "Roboto", sans-serif !important;
                font-weight: 400;
                font-size: 16px;
                line-height: 100%;
                color: #41AED6;
                a{                     
                       color: #41AED6;
                 }


            }
            .notify{
                height:24px;
                cursor:pointer;
                position:relative;
                .icon{
                    color: #24355C;
                    font-size: 28px;
                 }
                .count-circle{
                    position: absolute;
                    height: 14px;
                    width: 14px;
                    background-color: #E91E63;
                    border-radius: 50%;
                    top: -2px;
                    right: 0px;
                    font-size: 9px;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                }
                .dropdown-menu{
                    right:0;
                    left:unset !important;
                    margin-top:12px !important;
                    box-shadow: 0px 4px 4px 0px #00000040;
                    background-color:#fff;
                    width:370px;
                    padding:10px 0px;
                    li{
                          a{
                                  font-family: "Roboto", sans-serif !important;
                                font-weight: 400;
                                font-size: 12px;
                                line-height: 100%;
                                color: #FA6D30;
                                word-break: break-all;
                            white-space: normal;
                           }
                      }
                }
            }
        }
        
      @media screen and (max-width: 768px) {
        margin-top:12px;
      }
    }
    .img-logo-wrap{
        img{ 
            height:45px;
            width:auto;
        }
    }
}

.dashboard-home{
    padding:25px 20px;
     @media screen and (max-width: 768px) {
         padding:15px 20px;
    }
    .page-header{
        font-family: "Roboto", sans-serif !important;
        font-weight: 500;
        font-size: 20px;
        line-height: 100%;
        color: #0F2454;
        margin: 20px 0 22px;
         @media screen and (max-width: 768px) {
             font-size: 26px;
        }

    }
    .flex-main-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
            background: #ffffff;
    padding: 12px 0px;
    border-radius: 4px;
    margin-bottom: 10px;
      @media screen and (max-width: 768px) {
          flex-wrap:wrap;
        }
    .page-header{
                    display:flex;
                    align-items:center;
                    gap:10px;
                }
                .refresh-tag{
                    color:red;
                     @media screen and (max-width: 768px) {
         margin-top:8px;
        }
                }
                .dash-icon{
                    color:#24355C;
                    font-size:30px;
                }
    }
   .main-dash-wrapper{
       .filter-section{
        @media screen and (max-width: 480px) {
       flex-direction:column !important;
       align-items:flex-start !important;
        }
        .select-text{
                        font-size:15px;
 @media screen and (max-width: 480px) {
       margin-bottom:3px !important;
        }
                    }
            .dash-drop{
                width: fit-content;
                white-space: break-spaces;
                font-family: Roboto;
                font-weight: 400;
                font-size: 14px;
                line-height: 100%;
                color: #243556;
                height:33px;
                &:focus{
                           box-shadow:none !important;
                           border-color:#dee2e6 !important;
                       }
                 @media screen and (max-width: 480px) {
       width:100%;
        }
            }
            .dropdown{
                text-align:right;
                margin-bottom:20px;
                display:flex; 
                justify-content:flex-end;
                button{
                    box-shadow: 0px 4px 4px 0px #00000040 !important;
                    background-color:#f7f7f7 !important;
                    font-family: "Roboto", sans-serif !important;
                    font-weight: 400;
                    font-style: italic;
                    font-size: 14px;
                    line-height: 100%;
                    color:#676767 !important;
                    border-radius:5px;
                    border:none;
                    height:30px;
                    width:213px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    &::after{
                        display:none;
                    }
                }
                .dropdown-menu{
                    width:213px;
                    .dropdown-item{
                         white-space: break-spaces;
                         font-family: Roboto;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 100%;
                        color:#243556;
                     }
                }
            }
       }
        .card-wrapper{
            display:flex;
            gap:20px;
            flex-wrap:wrap;
             @media screen and (max-width: 768px) {
                flex-direction:column;
            }
            .card{
                box-shadow: 0px 4px 4px 0px #00000040;
                background-color:#ffffff;
                border-radius:4px;
                gap: 12px;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                padding: 20px 10px;
                flex: 0 0 calc((100% - 40px) / 3);
                height:145px;
                 @media screen and (max-width: 1024px) {
                     flex: 0 0 calc((100% - 40px) / 2);
                 }
                 @media screen and (max-width: 768px) {
                     flex: 0 0 calc((100% - 40px) / 1);
                 }
                  @media screen and (max-width: 480px) {
                     flex: unset;
                     width:100%;
                     flex-direction: column;
                    height: auto;
                    align-items: center;
                 }
                .left-wrap{
/*                    height:54px;
                    width:54px;*/
                    flex-shrink:0;
/*                    border-radius:50%;*/
                    .icon{
                        color:#24355C;
                        font-size:25px;
                    }
                }
                .right-wrap{
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    height: 100%;
                    width: 100%;
                    margin-top: 3px;
                      @media screen and (max-width: 480px) {
                    align-items:center;
                 }
                    p{                        
                        font-family: "Roboto", sans-serif !important;
                        font-weight: 400;
                        font-size: 15px;
                        line-height: 100%;
                        color: #24355C;
                     }
                     h6{
                        font-family: "Roboto", sans-serif !important;
                        color: #24355C;
                        font-weight: 800;
                        font-size: 25px;
                        line-height: 100%;
                     }
                     span{
                         font-family: "Roboto", sans-serif !important;
                         color: #676767;
                         font-weight: 400;
                        font-size: 12px;
                            @media screen and (max-width: 480px) {
                    text-align:center;
                 }
                        .color-span{
                            color: #11AF22;
                        }
                     }
                }
/*                &.card-bg-one .left-wrap{
                    background: #41AED6 !important;
                }
                 &.card-bg-two .left-wrap{
                     background: #FA6D30 !important;
                }
                  &.card-bg-three .left-wrap{
                     background: #1D9256 !important;
                }*/
            }
        }
   }
}

.daily-par-rate{
    padding:25px 20px;
    .page-header{
        font-family: "Roboto", sans-serif !important;
        font-weight: 500;
        font-size: 20px;
        line-height: 100%;
        color: #0F2454;
        margin: 20px 0 6px;
    }
    .sub-text{
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        color:#000;
        margin-bottom: 7px;
    }
    .date-wrap{
        display:flex;
        gap:15px;
        align-items: flex-end;
        padding:15px 0px;
         @media screen and (max-width: 480px) {
           flex-direction: column;
        align-items: normal;
       }
        .custom-picker{
            flex:none !important;
            min-width:131px;
           
            .mud-input-control{
                flex:none !important;
            }
            .mud-icon-root{
                font-size:18px !important;
            }
            .mud-input{
                font-size:13px !important;
            }
        }
        .btn-msri{
        }
    }
     .btn-msri{
        font-weight: 500;
        font-size: 13px;
        line-height: 100%;
        box-shadow: none;
        background: #41AED6;
        border-radius:3px;
        border:none;
        min-width:80px;
        min-height:28px;
        &:hover{
                   filter:brightness(0.9);
               }
    }
     .table-wrap{
         .table-responsive{
             table{
                border: 1px solid #797979;
                border-radius:3px;
/*                box-shadow: 0px 4px 4px 0px #00000040;*/
                width: max-content;
                border-collapse: collapse;
                margin-bottom:6px;
                thead{
                    tr{
                        th{
                            background-color: #F5F7FF !important;
                            min-height:39px;
                            vertical-align:middle;
                            padding-left: 15px;
                            z-index:1;
                        }
                    }
                }
                tbody{
                    tr{
                        th,td{
                            min-height: 60px;
                            vertical-align: top;
                            padding-left: 15px;
                            width: 170px;
                            word-wrap: break-word;
                            white-space: pre !important;
                            vertical-align: top;
                            text-align: left;
                        }
                    }
                }
             } 
         }
        .caption-text{
            font-weight: 400;
            font-style: italic;
            font-size: 12px;
            line-height: 100%;
            color:#e41d1d;
        }
     }
    &.pricing-grid{
        .mt-45{
                  margin-top:45px;
              }
        .nav-msri{
            display:flex;
             box-shadow: 0px 4px 4px 0px #00000040;
            border: 3px solid #41AED6;
            border-radius: 8px;
            li{
                  flex:1;
                button{
                          border-radius:3px;
                    width:100%;
                    max-width:100%;
                   background: #F7F7F7;
                   color: #24355C;
                    height:38px;
                    font-weight: 700;
                    font-size: 20px;
                    line-height: 100%;
                    text-transform: uppercase;
                    &.active{
                        background: #41AED6;
                        color:#fff;
                    }
                }
              }
        }
    }
}
.download-modal{
    .modal-content{
        background: #FBFBFB;
        border-radius: 10px;
        .modal-header{
            padding: 16px 15px 5px;
            border: 0;
            h1{
                font-family: "Roboto", sans-serif !important;
                font-weight: 400;
                font-size: 20px;
                line-height: 100%;
                color:#41aed6;
            }
        }
    }
    .modal-body{
        .content-wrapper{
           .error-message{
                color:#e41d1d;
                font-family: "Roboto", sans-serif !important;
                font-weight: 400;
                font-size: 10px;
                line-height: 100%;
            }
            h6{
                font-family: "Roboto", sans-serif !important;
                font-family: Roboto;
                font-weight: 400;
                font-size: 15px;
                line-height: 100%;
                color:#000;

            }
            .date-wrap{

            }
        }
    }
    .modal-footer{
        justify-content: flex-start;
        padding: 0px 10px 10px;
        border: 0;
        button{
            font-weight: 500;
            font-size: 13px;
            line-height: 100%;
            box-shadow:none;
            background: #41AED6;
            border-radius:3px;
            border:none;
            min-width:80px;
            min-height:30px;
        }
    }
}


.login-wrap, .okta-wrap{
    height:100%;
    display:flex; 
    align-items:center;
    justify-content:center;
    .enter-text{
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        color:#000;
    }
    .back-to-login{
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;
        color:#676767;
    }
    .login-box{
     box-shadow: 0px 6px 8px 0px #0000000D;
     background: #F7F7F7;
     border-radius:4px;
     min-width:480px;
     margin:auto;
     display:flex;
     flex-direction:column;
     gap:30px;
     min-height:400px;
     padding:70px 35px;
      @media screen and (max-width: 480px) {
           min-width:90%;
             padding:70px 25px;
    }
    .header{
        display:flex;
        justify-content:center;
        flex-direction:column;
        align-items:center;
        gap:10px;
        .icon{
            color: #41AED6;
            font-size:60px
        }
        h4{
            font-weight: 500;
            font-size: 32px;
            line-height: 100%;
            color:#41aed6;
             font-family: "Roboto", sans-serif !important;
        }
    }
    .label{

    }
    input{
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        border-radius:8px;
        box-shadow: none;
        height:45px;
    }
    .btn-submit{
         font-weight: 500;
         font-size: 16px;
         border-radius:8px;
         width:100%;
         min-height:45px;
         background: #41AED6;
         border:none;
         box-shadow:none;
    }
    }
}
    .flex-wrapper-content{
        display:flex;
        flex-direction:column;
        height:100vh;
    }
.footer{
    padding-right:20px;
      @media screen and (max-width: 768px) {
       padding-left:calc(var(--sidebar-small));
    }
    p{
         color: #9F9C9C;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        padding-left:20px;

     }
}
.audit-log{
    .table-wrap{
        .table-responsive{
            max-height: 1100px;
            overflow: auto;
            table{
                            border:none;
                            border-collapse:separate;
                            border-spacing:0;
                        }
            table thead th{
                              border-top: 1px solid #797979;
                              border-bottom: 1px solid #797979;
                              border-left: 1px solid #797979;
                              border-right:none;
                             &:last-of-type{
                                                   border-right:1px solid #797979;
                                               }
                          }
    table tbody th, table tbody td{
                              border-top:0px;
                              border-bottom: 1px solid #797979;
                              border-left: 1px solid #797979;
                              border-right:none;
                             &:last-of-type{
                                                   border-right:1px solid #797979;
                                               }
                          }
        }
        .page-pagination{
                 display:flex;
                 justify-content:flex-end;
                .pagination{
                    .page-item{
                        a{
                             color:#000 !important;
                         }
                    }
                }
            }
    }
    .form-selection{
        display:flex;
        align-items:center;
        gap:15px;
         @media screen and (max-width: 600px) {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
      
        .btn-wrapper{
            display:flex;
            gap:10px;
            .btn-msri-outlined{
                font-weight: 500;
                font-size: 12px;
                line-height: 100%;
                box-shadow: none;
                background: #fff;
                color:#24355c;
                border-radius:3px;
                border:none;
                min-width:80px;
                min-height:28px;
                border: 1px solid #4B49AC;
                &:hover{
                           filter:brightness(0.93);
                       }
            }
        }
        .form-wrap{
             @media screen and (max-width: 600px) {
               width:100%;
            }
            label{
                font-weight: 400;
                font-size: 13px;
                line-height: 100%;
                color:#000;
             }
            .input-field, select{
/*                 box-shadow: 0px 4px 4px 0px #00000040;*/
                                    border: 1px solid #BDBDBD;
                    background: #fff;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 100%;
                    color:#676767;
                    height:28px;
                    border-radius: 3px;
                }
            .date-wrapper{
                display:flex;
                align-items:center;
                gap:9px;
                 @media screen and (max-width: 600px) {
                   width:100%;
                   flex-direction:column;
                   align-items:flex-start;

                }
                .custom-picker{
                    flex:none !important;
                    min-width:131px;
                     @media screen and (max-width: 600px) {
                       width:100%;
                       min-width:unset;

                    }
                    .mud-input.mud-input-underline:before{
                        border:0;
                    }
                    .mud-input-control{
                        flex:none !important;
                         @media screen and (max-width: 600px) {
                         width:100%;

                        }
                    }
                    .mud-icon-root{
                        font-size:16px !important;
                    }
                    .mud-input{
                                       border: 1px solid #BDBDBD;
                        background: #fff;
                        padding: 0px 5px;
                        font-weight: 400;
                        font-size: 12px !important;
                        line-height: 100%;
                        color:#676767;
                        height:28px;
                        border-radius: 3px;
                    }
                }
            }
        }
    }
}
.file-upload-ui{
    .upload-file{
        p{
            font-weight: 400;
            font-size: 13px;
            line-height: 100%;
            color: #000;
         }
        .upload-file-btn{
            display: flex;
            align-items: center;
            gap: 5px;
            min-height: 27px !important;
            min-width: 125px;
            justify-content: flex-start;
            .icon{
                                font-size: 20px;
             }
        }
    }
    .table-wrap{
        .table-responsive{
            tbody{
                    td{
                          vertical-align:middle !important;
                          width:auto !important;
                        .file-name-wrap{
                            display:flex;
                            justify-content:space-between;
                            .icons-td-wrap{
                                gap:10px;
                                .icon{
                                    font-size: 14px;
                                    color: #1C1B1F;
                                }
                            }
                        }
                        .action{
                            display:flex;
                            .icon{
                                 font-size: 20px;
                                 color: #1C1B1F;
                                 cursor:pointer;
                             }
                        }
                    }
                    th{
                        vertical-align:middle !important;
                    }
            }
     table{
                            border:none;
                            border-collapse:separate;
                            border-spacing:0;
                        }
     
            table thead th{
                              border-top: 1px solid #797979;
                              border-bottom: 1px solid #797979;
                              border-left: 1px solid #797979;
                              border-right:none;
                             &:last-of-type{
                                                   border-right:1px solid #797979;
                                               }
                          }
    table tbody th, table tbody td{
                              border-top:0px;
                              border-bottom: 1px solid #797979;
                              border-left: 1px solid #797979;
                              border-right:none;
                             &:last-of-type{
                                                   border-right:1px solid #797979;
                                               }
                          }
        }
    }
}
.pointer{
    cursor:pointer;
}
.file-upload-modal{
    .modal-content{
        background:#fff !important;
        .content-wrapper{
            .drag-drop-wrap{
                .mud-paper{
                    margin-top:0px !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #F8F8FF;
                    gap:14px;
                    .cloud-icon{
                        margin-bottom: 11px;
                        font-size: 62px;
                        color: #616161;

                    }
                    h6{
                          font-weight:600;
                          font-size:16px;
                          color: #0F0F0F;
                          p{
                               font-size:12px;
                               font-weight:400;
                               color:#676767;
                           }

                      }
                    .browse-link{
                        text-decoration:underline;
                    }
                }
             }
            .loaded-file-wrap{
                background: #F8F8FF;
                padding: 0px 9px 10px;
                border: 1px solid #384EB74D;
                border-radius: 4px;
                max-height: 212px;
                overflow: auto;
                .main-text{
                    font-weight: 600;
                    color: #676767;
                    font-size: 14px;
                    position: sticky;
                    top: 0;
                    background: white;
                    background: #F8F8FF;
                    padding: 3px 0px;
                }
            }
            .form-wrap{
                .text-area{
                    background: #F8F8FF;
                    resize: none;
                    min-height:40px;
                    font-weight: 400;
                    font-size: 13px;
                    line-height: 100%;
                 }
                 .text-area-email{
                    background: #F8F8FF;
                    resize: none;
                    font-weight: 400;
                    font-size: 13px;
                    line-height: 100%;
                    opacity: 0.7;
                    border: 1px dashed #384EB74D;
                 }
                .info-text{
                    font-weight: 400;
                    font-size: 10px;
                    line-height: 100%;
                    color: #E41D1D;
                    margin-top:2px;
                }
                .select-drop {
                    font-weight: 400;
                    font-size: 13px;
                    line-height: 110%;
                    color: #000;
                    min-height: 27px;
                    cursor: pointer;
                    padding: .375rem 2.25rem .250rem .75rem;
                }
                .label-text{
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 100%;
                    color:#000;
                }
                .required:after {
                content:" *";
                color: #E41D1D;
              }
            }
            .file-list{
                width:100%;
                .error-message{
                    font-weight: 500;
                    font-size: 10px;
                    line-height: 18px;
                }
            }
            .file-loader-bar{
                border: 1px solid #676767;
                border-radius: 4px;
                &.file-show-bar{
                    border: 1px solid #11AF22 !important;
                }
                &.error-file-bar{
                    border: 1px solid #E41D1D !important;
                    .actions-wrap{
                        .icon{
                                 color: #E41D1D !important;
                            }
                    }
                }
                .block-wrap{
                    padding: 5px 10px;
                    .f-name{font-size: 12px;color: #0f0f0f;
    }
                    .delete-i-wrap{
                        display:flex;
                        cursor:pointer;
                        .icon{
                            font-size: 18px;
                            color: #CFD8DC;
                        }
                    }
                    .actions-wrap{
                         display:flex;
                         gap:8px;
                         .delete-icon-btn, .edit-icon-btn{
                            display:flex;
                            .icon{
                                    font-size:14px;
                                    color: #1C1B1F;
                                }
                        }
                    }
                }
                .progress{
                    height:3px;
                }
            }
        }
    }
}
.file-download-ui{
    .form-selection{
        .form-wrap{
            flex-basis:22%;
            .date-wrapper{
                .mud-picker{
                    flex: 1 !important;
                    min-width:unset;
                }
            }
        }
   }

    .table-wrap{
        .table-responsive{
            .check-item{
                    .form-check{
                        min-height:unset;
                        margin-bottom:unset;
                        input{
                                 border: 1px solid #455A64;
                                width: 13px;
                                height: 13px;
                                border-radius: 2px;
                                margin-top: 0px;
                                margin-bottom:1px;
                             }
                        }
                }
                tbody{
                tr{
                    th,td{
                        min-height: 60px;
                        vertical-align: top;
                        padding-left: 15px;
                        width: 170px !important;
                        white-space: nowrap !important;
                    }
                    .small-td{
                        width:55px !important;
                    }
                    .download-info{
                        height:22px;
                        .icon{
                                 color: #1C1B1F;
                                 font-size:22px;
                             }
                    }
                    .pending-color{
                         color: #FF9800;
                        font-weight: 600;
                    }
                    .completed-color{
                        color: #11AF22;
                           font-weight: 600;
                    }
                }
            }
      table{
                            border:none;
                            border-collapse:separate;
                            border-spacing:0;
                        }
     
            table thead th{
                              border-top: 1px solid #797979;
                              border-bottom: 1px solid #797979;
                              border-left: 1px solid #797979;
                              border-right:none;
                             &:last-of-type{
                                                   border-right:1px solid #797979;
                                               }
                          }
    table tbody th, table tbody td{
                              border-top:0px;
                              border-bottom: 1px solid #797979;
                              border-left: 1px solid #797979;
                              border-right:none;
                             &:last-of-type{
                                                   border-right:1px solid #797979;
                                               }
                          }
         }
        
    }
}
.logout-modal{
    .modal-content{
        padding: 25px 60px;
        padding: 20px 35px !important;
        width:460px;
        @media screen and (max-width: 480px) {
            width:100%;
        }
    }
    .content-wrapper{
        h6{
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500 !important;
            font-family: "Roboto", sans-serif !important;
            font-size: 20px !important;
            line-height: 100%;
            color:#000 !important;
            .icon{
                font-size: 26px !important;
                color: #1C1B1F !important;
            }
        }
        p{
            font-family: "Roboto", sans-serif !important;
            font-weight: 400 !important;
            font-size: 14px !important;
            color:#000 !important;
            line-height:18px ;
        }
    }
    .btn-msri{
        font-weight: 500 !important;
        font-size: 13px !important;
        line-height: 100%;
        box-shadow: none !important;
        background: #41AED6 !important;
        border-radius:5px !important;
        border:none !important;
        min-width:75px !important;
        min-height:30px !important;
    }
    .btn-msri-outlined{
        font-weight: 500;
        font-size: 13px;
        line-height: 100%;
        box-shadow: none;
        background: #fff !important;
        color:#24355c !important;
        border-radius:5px;
        min-width:75px;
        min-height:30px;
        border: 1px solid #4B49AC !important;
    }
}
.session-modal{
    .modal-content{
        justify-content:center;
        align-items:center;
        display:flex;
        padding: 20px 35px !important;
        width:460px;
        @media screen and (max-width: 480px) {
        width:100%;
        }
    }
}
.toast-message-msri{
    .toast{
              background: #F5F7FF !important;
              box-shadow: 0px 4px 4px 0px #00000040;
              border-radius:3px;
              min-height: 50px;
                display: flex;
                width: fit-content;
                min-width: 300px;
          }
    .toast-body{
        font-family: "Roboto", sans-serif !important;
        font-weight: 400;
        font-size: 15px;
        line-height: 100%;
        &.success-message{
            color: #4B49AC;
            .icon{
                color: #11AF22;
            }
        }
         &.failed-message{
            color: #E41D1D;
            .icon{
                color: #E41D1D;
            }
        }
    }
}
.round-loader {
    width:18px;
    height: 18px;
    border: 2px solid #1C1B1F;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1.6s linear infinite;
}

.elementor-divider-separator {
    border-top: 1px solid grey;
    margin: 20px auto !important;
}

.nav-page h1>b, .contact-page h1 > b {
    color: #24355C;
}

.nav-page a, .contact-page a {
    color: #41AED6;
    text-decoration: underline;
}

.accessibility {
    height: 100% !important;
}
.contact-page {
    height: 100% !important;
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
}
.nav-page
{
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
}
.nav-page p,.contact-page p{font-size: medium !important;}
.privacy-navlinks {
        font-size: large;
        text-decoration: underline;
        color: cornflowerblue;
    }
.nav-page h2 {
    color: #24355C;
    font-weight:bold;
}
.privacy-page h4 {
    color: #41AED6;
}
.section-divider {
    margin: 15px 0;
    border-top: 1px solid #ececec;
}
.border-bottom {
    border-bottom: 1px solid grey;
}
.about-us-page {
        height:100%;
    margin-top: 0rem;
    margin-bottom: 1rem;
    .inner-page-wrap{
       height:100%;
        display:flex;
        @media screen and (max-width: 768px) {
            flex-direction:column;
        }
        .left-side-text{
            background: #24355C;
            flex-basis:48%;
            display: flex;
            flex-basis: 50%;
            flex-direction: column;
            justify-content: center;
            gap: 12px;
            padding: 30px 25px;
            h5{
                font-weight: 800;
                font-size: 32px;
                line-height: 100%;
                color: #FFFFFF;
            }
            p{
                font-weight: 400;
                font-size: 18px;
                line-height: 22px;
                 color: #FFFFFF;
            }
        }
        .right-side-image{
             flex-basis:50%;
             img{
                    width:100%;
                    height:100%;
                }
        }
    }
}

.empty-page{
        padding-top: 80px;
    height: calc(100vh - 115px);
    @media screen and (max-width: 768px) {
          height: calc(100vh - 142px);
    }
    h5{
         font-family: "Roboto", sans-serif !important;
        font-weight: 400;
        font-size: 32px;
        line-height: 100%;
        text-align:center;

      }
}
.empty-layout-footer{
    padding:10px 20px 0px; !important;
    p{
         color: #9F9C9C;
        font-weight: 400;
        font-size: 18px;
        line-height: 100%;

     }
}

.mud-snackbar-location-top-right {
    top: 53px !important;
}
.daily-par-rate-ui table{
    width:100% !important;
}
.z-index-1{
    z-index:1 !important;
}
.mt-4.8{
    margin-top:4.8px;
}
.outer-nav{
    .navbar-nav{
                   gap:10px;
                   li{
                         a{
                                padding: 10px 16px !important;
                                border-radius: 2px;
                                color: #333 !important;
                                font-weight: 600 !important;
                                &.active
                                {
                                    background: #36ADD7;
                                    color: white !important;
                                }
                                      &:hover{
                                              background-color: #2f466f;
                                                color: white !important;
                                            }
                           }
                  }
       }
}
.user-profile-popover{
    right: 10px !important;
    z-index: 1201;
    left: auto !important;
    top: 66px !important;
    padding-left:0px !important;
     padding-right:0px !important;
    width:350px;
    border-radius:3px !important;
    box-shadow: 0px 2px 3px 1px #00000040 !important;
    border: 0.2px solid #6765652b;
    .user-details-wrapper{
                             border-radius:3px;
        .item-list{
                      cursor:pointer;
            display: flex;
            gap: 12px;
                padding: 8px 16px;
            align-items: center ;
                border-bottom: 1px solid #9f9c9cde;
           p{
                        font-family: "Roboto", sans-serif !important;
        font-weight: 400;
        font-size: 14px;
        color:#1c1b1f;
                   }
            .icon{
                    font-size:23px;
                    color:#24355c;
                }
            &:last-of-type{
                border-bottom:none;
            }
            &:hover{
                        background: #D9D9D98A;
                }
         }
     }
}
.user-profile-btn{
        padding: 0px !important;
    width: 0px !important;
    min-width: fit-content !important;
    background: none !important;
    box-shadow: none !important;
    .icon{
             color: #24355C;
    font-size: 31px;
         }
}
.form-control:focus, .form-check-input:focus {
    box-shadow: none!important;
  border: 1px solid #8f8f8fde !important;
}
.custom-picker{
    .mud-input-adornment-end{
                                margin-inline-start: 0px !important;
                            }
                            .mud-icon-button-edge-end{
                                    margin-inline-end: -7px !important;
                            }
                            .mud-icon-root{
                                font-size:16px !important;
                            }
    .mud-icon-button{
                        padding:5px !important; 
                    }
      .mud-input.mud-input-underline:before{
                        border:0;
                    }
                    .mud-input{
                                       border: 1px solid #BDBDBD;
                        background: #fff;
                        padding: 0px 5px;
                        font-weight: 400;
                        font-size: 12px !important;
                        line-height: 100%;
                        color:#676767;
                        height:28px;
                        border-radius: 3px;
                    }
}

.form-select:focus {
    outline: 0;
       box-shadow: none!important;
  border: 1px solid #8f8f8fde !important;
}
.mud-input.mud-input-outlined:focus-within>.mud-input-outlined-border, .mud-input.mud-input-outlined:focus-within .mud-shrink>.mud-input-outlined-border {

           box-shadow: none!important;
  border: 1px solid #8f8f8fde !important;
}
.mud-input-outlined-border{
      border: 1px solid #BDBDBD !important;
}
.tape-cracker{
    .mud-tab-slider
{
    display: none;
}
.mud-tabs-tabbar-wrapper{
    width: 100% !important;
    gap:10px;
}
.mud-tabs-panels{
    padding:0px!important;
}
.mud-tooltip-inline{
    flex:1;
}
    .mud-tabs{
                box-shadow: none;
            }
    .mud-tab{
                       background: #F7F7F7;
                border: 2px solid #41AED6;
                min-height: 32px;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 13px;
        text-transform: capitalize;
        min-width: auto !important;
        white-space: nowrap;
                color: #0F2454;
                &.mud-tab-active{
                                    background: #41AED6;
            color: white;
            border: 2px solid #41AED6;
                               }
            }
.tab-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    padding: 5px 1px 1px 2px;
    gap: 15px;
    height: calc(100vh - 28vh);

    @media screen and (max-width: 768px) {
        flex-direction:column;
        height:100vh;
    }

    .full-card{
                         background: #fbfbfb87;
    border: 1px solid #24355c82;
    border-radius: 4px;
        padding: 16px;
        height:100%;
        width:100%;
     .main-h{
                                    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
                            }
                 }        

    .left-card{
                      flex-basis: 35%;
                                  height:100%;
                                  @media screen and (max-width: 768px) {
     width:100%;
    }
                                  .mud-input{
                                                    background: white;
                                            }
                      .main-h{
                                    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
                            }
                             .file-upload-input {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 10;
        opacity: 0;
    }
      .drag-drop-wrap{
          cursor:pointer;
                .mud-paper{
                    margin-top:0px !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #ffffff;
                    gap:14px;
                    .cloud-icon{
                       margin-bottom: 1px;
                font-size: 45px;
                color: #616161;

                    }
                    h6{
                                         font-weight: 600;
                font-size: 14px;
                color: #0F0F0F;

                      }
                    .browse-link{
                        text-decoration:underline;
                    }
                }
             }
    .custom-picker{
                    flex:none !important;
                    min-width:131px;
                     @media screen and (max-width: 600px) {
                       width:100%;
                       min-width:unset;

                    }
                    .mud-input.mud-input-underline:before{
                        border:0;
                    }
                    .mud-input-control{
                        flex:none !important;
                            width: 100%;
                         @media screen and (max-width: 600px) {
                         width:100%;

                        }
                    }
                    .mud-icon-root{
                        font-size:16px !important;
                    }
                    .mud-input{
                                       border: 1px solid #BDBDBD;
                        background: #fff;
                        padding: 0px 5px;
                        font-weight: 400;
                        font-size: 12px !important;
                        line-height: 100%;
                        color:#676767;
                        height:28px;
                        border-radius: 3px;
                    }
                }
    .main-content{
        display:flex; 
        flex-direction:column;
        background: #fbfbfb87;
    border: 1px solid #24355c82;
    border-radius: 4px;
      @media screen and (max-width: 768px) {
      gap:35px;
    }
        .top-content{
                        flex:1;
                        display:flex;
                        flex-direction:column;
                        gap:13px;
                        
                                .btn-msri-light{

                                }
                                               .mud-input-control.mud-input-control-margin-dense{
                                                   margin:0px !important;
                                               }
                    }
                    .bottom-content{
                         @media screen and (max-width: 768px) {
                            flex-direction:column;
                        }
                        .btn-big{
                                    width:40% !important;
                                    min-width:unset !important;
                                    height:30px;
                                    display:flex;
                                    gap:2px;
                                    align-items:center;
                                    .icon{
                                             color:white;
                                             font-size:18px;
                                         }
                                         .icon-left{
                                                 transform: rotate(180deg);
    font-size: 18px;
                                         }
                                      @media screen and (max-width: 768px) {
                            width:100% !important;
                        }
                                }
                                .btn-light{
                                    background: #e0dbdb42 !important;
                        color: #423f3f !important;
                        border: 1px solid #ababab96 !important;
                                }
                    }
    }
              }
        .right-card {
            flex-basis: 65% !important;
            height: 100%;

            @media screen and (max-width: 768px) {
                width:100%;
            }
        }
        .main-content 
        {
                background: #fbfbfb87;
                border: 1px solid #24355c82;
                border-radius: 4px;
        }
        .main-h{
                font-size: 15px;
                font-weight: 500;
                margin-bottom: 0;
        }
    
    }
      
}

.tape-grid .mud-table-container table thead th {
    color: #000 !important;
    font-weight: 600 !important;
    background-color: #7cc9e0 !important;
}

.tape-grid .mud-table-container table tbody tr:nth-child(odd) {
    background-color: rgba(135, 206, 250, 0.25) !important;
}

.tape-grid .mud-table-container table tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}

.tape-grid .mud-table-container table tbody tr:hover {
    filter: brightness(0.95) !important;
}

.tape-grid .mud-table-container table thead th,
.tape-grid .mud-table-container table thead .mud-table-cell {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Std val page css start*/

/* Layout helpers */
.container-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.grid-flex {
    flex: 1;
    display: flex;
}

.item-flex {
    display: flex;
}

.card-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-relative {
    position: relative;
}

.card-content-scroll {
    flex: 1;
    overflow: auto;
}

.paper-scroll {
    overflow-y: auto;
}

.item-center {
    display: flex;
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* Controls */
.col-button {
    width: 300px;
    font-size: 9px !important;
    justify-content: flex-start;
    display: flex;
    align-items: center;
}

.avatar-small {
    width: 11px !important;
    height: 11px !important;
}

/* Progress wrappers */
.progress-full {
    width: 100%;
}

.progress-primary {
    --mud-palette-primary: #92e0d3;
}

.progress-warning {
    --mud-palette-primary: #f4d44d;
}

.progress-orange {
    --mud-palette-primary: #ffa500;
}

.progress-danger {
    --mud-palette-dark: #FF0000;
}

/* Small helpers */
.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* Std val page css end*/
}

/*file upload*/
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12PX !important;
}

.tape-cracker .tab-inner .matchcol-left-card {
    flex-basis: 50% !important;
    height: 92%;
    padding: 0 !important;
}

.tape-cracker .tab-inner .matchcol-right-card {
    flex-basis: 50% !important;
    height: 92%;
    padding: 0 !important;
} 
/*Tape cracker page*/
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12px !important;
}

.mud-select {
    flex-grow: unset !important;
}

/* Std val page*/

/* Suggestion item in autocomplete */
.suggestion-item {
    cursor: pointer;
    padding: 8px;
}

.card-flex {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 30vh);
    min-height: 0
}

    .card-flex .mud-card-header {
        position: sticky;
        top: 0;
       /* z-index: 10;*/
        background: var(--mud-palette-surface,#fff);
        border-bottom: 1px solid rgba(0,0,0,0.08)
    }

.card-content-scroll {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.5rem
}

.paper-scroll {
    padding: 0.25rem
}
/* Ensure avatar and other small controls stay visible */
.avatar-small {
    z-index: 11
}

.disabled-grid {
    pointer-events: none;
    opacity: 0.6;
}

.nowrap {
    white-space: nowrap;
}

/* Left align the column name button */
.item-left {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.col-button {
    text-transform: none;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px
}

/* Highlight selected column */
.col-selected {
    background-color: var(--mud-palette-primary);
    /*color: var(--mud-palette-primary-contrast-text) !important*/
}
.btn-left {
    text-align: left;
    justify-content: flex-start !important;
}
/*Std val page end*/


/* Block user clicks on tab headers but keep visual styling for TapeCracker tabs only */
.tape-cracker > .mud-tabs > .mud-tabs-tabbar > .mud-tabs-tabbar-inner > .mud-tabs-tabbar-content > .mud-tabs-tabbar-wrapper .mud-tab {
    pointer-events: none !important;
}

.tape-cracker > .mud-tabs > .mud-tabs-tabbar > .mud-tabs-tabbar-inner > .mud-tabs-tabbar-content > .mud-tabs-tabbar-wrapper .mud-tab .mud-tab-label {
    cursor: default !important;
}


.grid-selection-row .d-flex .mud-select .mud-input-control {
    width: 300px !important;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell, .mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-loading {
    z-index: 0 !important;
}