@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400&display=swap');

@font-face {
font-family: 'Rupee';
font-style: normal;
font-weight: 600;
src: local('Rupee'), local('Rupee'), url(fonts/Rupee_Foradian.ttf) format('opentype');
}
.rupee {
font-family: 'Rupee';
}

@font-face {
    font-family: 'icon-reports';
    src: url('fonts/icon-reports.eot?z4clg7');
    src: url('fonts/icon-reports.eot?z4clg7#iefix') format('embedded-opentype'),
        url('fonts/icon-reports.ttf?z4clg7') format('truetype'),
        url('fonts/icon-reports.woff?z4clg7') format('woff'),
        url('fonts/icon-reports.svg?z4clg7#icon-reports') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icon-reports' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-XLS:before {
    content: "\e900";
    color: #119411;
}

.icon-arrow-down:before {
    content: "\e901";
    color: #b4b4b4;
}

.icon-breakup:before {
    content: "\e902";
    color: #f37921;
}

.icon-cleander:before {
    content: "\e903";
    color: #b4b4b4;
}

.icon-PDF:before {
    content: "\e904";
    color: #ee2424;
}

.icon-search:before {
    content: "\e905";
    color: #b4b4b4;
}
#login_error{ color: red !important; padding-bottom:10px; font-size: 13px !important;display: block;font-weight: 400 !important; text-align: left !important;}

body { font-family: 'Roboto', sans-serif; font-weight: 400; overflow-x: hidden; overflow-y: auto; font-size: 15px; line-height: 1.5;
letter-spacing: .5px; position: relative; background: #f1f2f7; }
a, a:hover{ text-decoration: none !important;}
.rupee {font-family: 'Rupee';}
p{font-size: 1.2rem;}

header{background: #231965; margin-bottom: 1.5rem;}
.logo{width: 220px;}
.top_nav{list-style: none; padding: 0;}
.top_nav li{display: inline-block; padding: 0 0 0 1.25rem;}
.top_nav li a{color: #fff; padding: 0.5rem 0 0.5rem 1rem; font-size: 0.925rem;}
.top_nav .open_trading_btn{ padding: 0.5rem 1rem;}
.btn_orange{background: #f36f21; color: #fff; width: 100%; display: block; text-align: center; padding: 8px; border-radius: 25px;font-size: 0.925rem;}
.open_trading_btn{background:transparent; color: #f36f21 !important; width: 100%; display: block; text-align: center; padding: 8px; border-radius: 25px;font-size: 0.925rem; border: 2px solid #f36f21;}
.signature_box{width: 200px; height: 50px;}

.x_panel { background: #fff; padding: 1rem; margin: 0 0 1.25rem; }
.login_box h2{ font-size: 1.75rem; color: #282828; font-weight: 500;margin-bottom: 40px;}
.login_box h2:after{border-bottom: 2px solid #F37021; content: ""; display: block; width: 40px; padding-top: 0.5rem}
.login_box label{font-size: 1rem; color: #83838B;}
.login_box label span{font-size: 12px; }
.login_box .form-control{padding:1rem  0.75rem;}
.enterotp label{font-size: 1rem; }
.enterotp  label span{font-size: 1rem; color: #282828; font-weight: 500;}
.resend_otp{font-size: 14px; color: #633EE3;}
.login_box .btn-primary.viewReport{font-size: 1.2rem;}
.error{ color: red !important;  font-size: 13px !important;display: block;font-weight: 400 !important; text-align: left !important;}
.form__field.valid {border: 2px solid #f36f21  !important;}
.error:focus ~ .form__label{color:red;}
span#email-error, span#select_state-error {color: red;font-size: 12px;font-weight: 300;}
.error:focus, .error:focus-visible, .error:valid{
border: 2px solid red !important;}
.otp_box p{line-height: 1.2; font-size: 12px; color: #1E1C57;}
#OTP.valid {border: 2px solid red  !important;}
.otp_box input{ padding: 7px 10px; border-radius: 5px; border:1px solid #d4d4d4;width: 100%;height:42px; }
#timer{background: transparent; color: #f36f21; padding:10px 15px; border-radius: 0px 5px 5px 0px; /*border: 1px solid #ccc; margin: 0 0 0 -6rem;*/ font-size: 13px; border-left: 1px solid #ccc; position: absolute; right: 0; top:0; }
#timer span {font-size: 13px;color: #f36f21;font-weight: 600;}
#btnResendOtp{ border-left: 1px solid #ccc; position: absolute; right: 0; border-radius: 0; top:0;}
.text-button {background: transparent ; color: #5c49d8; padding: 10px; border-radius: 5px; border:0px solid #000;}
.otp_msg{ font-size: 12px !important; color: green !important; padding-left: 0.25rem}
.resentotp_msg{ font-size: 12px !important; color: #000 !important; padding-left: 0.25rem}
.none_otp{ display: none !important;}
.formgroup { position: relative;}
.dp_main{position: relative;}
.edit{position: absolute; bottom: 10px; right: 10px;}
.resend_msg{font-size: 13px; color: green; margin-top: -15px;}

.head h3{ font-size: 1.5rem; color: #272727; margin-bottom: .875rem; font-weight: 400; }
.dvReportspage label { font-size:14px; color: #818181; font-weight: 400; }
.dvReportspage .form-control { font-size:1rem; color: #212121 !important; }
.inputdateRange input {
background: url(../images/cleander.svg) no-repeat 96.5% 50%;
padding-right: 2rem;
}
.btn-primary.viewReport { background-color: #F37921; border-radius: 60px; border-color: #F37921; font: normal normal 14px/13px Roboto; height: 40px; width: auto; padding: 0 1rem; box-shadow: none !important; } 
.btn-outline-primary.btn-outline-report { background-color: transparent; border-radius: 60px; border-color: #403654; font: normal normal 14px/13px Roboto; height: 40px; width: 100%; padding: 0 1rem; box-shadow: none !important; color: #403654 }
.btndownload {background: transparent;border: none;font: normal normal normal 26px/22px Roboto;vertical-align: middle;outline: none;}
.modal .close { color: #000; opacity: 1; background: #ffffff; /* height: 25px; */ /* width: 25px; */ vertical-align: top; line-height: 15px !important; border-radius: 50%; position: absolute; right: 30px; top: 30px; font-size: 20px; padding: 0; font-weight: normal; z-index: 1099; }
.main_popup h2{color: #231965; font-size: 1.5rem;}
.dp_details_tbl{width: 100%;}
.dp_details_tbl td{padding: 0.5rem; border-bottom: 1px solid #f0f0f0; font-size: 15px; color: #212529;; text-align: left;} 
.dp_details_tbl td:first-child{color: #000; font-weight: 500; width: 25%;}
.ui-widget.ui-widget-content{z-index: 1060 !important;}
.dp_holding_details td{background: #fff !important;}
.dp_holding_details, .dataTables_wrapper {border: 1px solid #ccc !important;}
.dp_holding_details .border-0{border-bottom: 0px !important;}
.dp_holding_details th{background: #eeeeee; font-size: 14px;  font-weight: 400 !important;
border-bottom: 1px solid #ccc !important; }
.dp_holding_details td{font-size: 14px;border-bottom: 1px solid #ccc !important; border-top:0px !important; }
table{
    width: 100%;
}
table.dataTable.no-footer{border: 0px !important; }

/*.holding_valuation_report{border: 1px solid #ccc;}
.holding_valuation_report td{width: 50%;}
.holding_valuation_report td{font-size: 13px;  vertical-align: top;}
.holding_valuation_report td table td:first-child{font-weight: bold; width: 30%;}
.holding_valuation_report td table td:last-child{ width: 70%;}
.holding_valuation_report td table td{padding: 0.5rem; border-bottom: 1px solid #ccc !important;border-top:0px !important;}
.holding_valuation_report .border-0{border-bottom: 0px !important;}*/
.table_tophead {border: 1px solid #ccc; padding: 0.5rem 0;}

#DPTable1 td:nth-child(2){width: 35%;}
.table_tophead h2{font-size: 14px;border-bottom: 1px solid #ccc; padding-bottom: 0.5rem;color: #212529!important; font-weight: normal;}
.table_tophead p{font-size: 14px;border-bottom: 0px ; font-weight: bold; margin-bottom: 0px;}
#DPTable1 tr td:nth-child(1), #DPTable1 tr td:nth-child(3){ font-weight: bold; color: #969696}





@media only screen and (min-width:768px) {
.dp_holding_details td,th{padding: 0.5rem !important;  }
}


@media only screen and (max-width:768px) {
.checkbox_main{margin-top: 0 !important;}
.top_nav li a {color: #fff;/*padding: 0.5rem;*/font-size: 12px;}
.top_nav li{padding: 0 0 0 0.25rem;}
.login_box h2{ font-size: 1.25rem; color: #282828; font-weight: 500;}
.enterotp label{font-size: 14px;color: #4B389C;}
.enterotp  label span{font-size: 13px;color: #282828;font-weight: 500;}
.head h3{font-size: 1.25rem;}
.opd_mobile{font-size: 12px;}
.login_box h2{margin-bottom: 20px;}
.dp_holding_details th,td{font-size: 13px !important;}
	.holding_valuation_report td{width: 100%; display: block; font-size: 12px !important;}
	.holding_valuation_report td table td{display: inline-block; }
	
	.holding_valuation_report td table td:first-child{font-weight: bold; width: 35%;}
.holding_valuation_report td table td:last-child{ width: 65%;}
	.holding_valuation_report .border-0{border-bottom: 1px solid #ccc !important;}
	#DPTable1 tr td{display: block; width: 100% !important;    padding: 0.1rem 0.5rem;}
	#DPTable1 tr td:nth-child(1), #DPTable1 tr td:nth-child(3){border:none !important; font-weight: bold; color: #969696}
	
	
	
}

/*checkbox*/
.span_pseudo, .checkbox_main span:before, .checkbox_main span:after {content: "";display: inline-block;background: #e86b1f ;width: 0;height: 0.2rem;position: absolute;transform-origin: 0% 0%;}
.checkbox_main {position: relative;height: 0.0rem;display: flex;align-items: center;/* margin-top: 45px;*/}
.checkbox_main input { display: none;}
.checkbox_main input:checked ~ span { background: #fff;  border-color: #dcdcdc;}
.checkbox_main input:checked ~ span:before { width: 0.700rem;height: 0.15rem;transition: width 0.1s;transition-delay: 0.3s;}
.checkbox_main input:checked ~ span:after {width: 0.4rem;height: 0.15rem;transition: width 0.1s;transition-delay: 0.2s;}
.checkbox_main input:disabled ~ span {background: #ececec;border-color: #dcdcdc;}
.checkbox_main input:disabled ~ label {color: #dcdcdc;}
.checkbox_main input:disabled ~ label:hover {cursor: default;}
.checkbox_main label {padding-left: 2rem;position: relative;z-index: 2;cursor: pointer;margin-bottom:0;margin-right:3px;}
.checkbox_main span {display: inline-block;width: 1rem;height: 1rem;border: 1px solid #ccc;position: absolute;left: 0;transition: all 0.2s;z-index: 1;box-sizing: content-box;}
.checkbox_main span:before {transform: rotate(-55deg);top: 0.700rem;left: 0.37rem;}
.checkbox_main span:after {transform: rotate(35deg);bottom: 0.35rem;left: 0.2rem;}
/*checkbox*/


/*Styling for form starts*/
.form__group {position: relative;padding: 15px 0 0; margin-bottom: 30px;}
.form__field {font-family: inherit;width: 100%;border: 1px solid #d2d2d2;outline: 0;font-size: 16px;color: #1E1C57 !important;padding: 6px 12px;background: transparent;transition: border-color 0.2s;font-weight: 400;border-radius: 3px;height: 42px;}
.form__field::placeholder {color: transparent;}
.form__field:placeholder-shown ~ .form__label {font-size: 16px;cursor: text;top: 25px;left: 10px;color: #808080;white-space: nowrap; }
.enterotp label{color: #83838B !important;}
.form__group label, .form__field:focus ~ .form__label {position: absolute;top: -16px;display: block;/*transition: 0.2s;*/font-size: 16px;padding: 0;font-weight: 400;color: #4B389C;white-space: nowrap;left: 0;background: transparent !important;}
.form__field:focus ~ .form__label {color: #4B389C ;background:#fff;position:absolute;left:0px;}
.form__field:focus{padding-bottom: 6px;border: 2px solid #f36f21;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5500s ease-in-out 0s;-webkit-text-fill-color: #4f4f4f !important;}

.form__field.valid {border: 2px solid #4B389C !important;}
.error:focus ~ .form__label{color:red;}
span#email-error, span#select_state-error {color: red;font-size: 12px;font-weight: 300;}
.error:focus, .error:valid{
border: 2px solid red !important;}
/*.form__group textarea{height: 100px;}*/
/*Styling for form ends*/
:focus-visible {
  border: 2px solid red !important;
}




#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background: #000;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    font-size: 16px;
    white-space: nowrap; font-weight: 400;
}

#toast #desc{

    
    color: #fff;
   
    padding: 16px;
    
    overflow: hidden;
	white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px} 
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px} 
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}