@import url('normalize.css');
@import url( 'bootstrap-icons.css' );
@import url( 'mdb.min.css' );
@import url( 'jquery-confirm.css' );
@import url( 'jquery-ui.min.css' );

/* === 
Except for the @media tags all other code was purely created for the Example views and can be replaced.
 - Also feel free to use bootstrap if you want.
*/

/* ------------- Tags for Template ----------- */

body { font-size: 16px; line-height: 24px; letter-spacing: 0.1px; position: relative; }
h1{ font-weight: bold; font-size: 56px; line-height: 60px; letter-spacing: 0.4px; }
h2 { font-weight: bold; font-size: 40px; line-height: 46px; letter-spacing: 0.2px; }
h3 { font-weight: normal; font-size: 28px; line-height: 34px; letter-spacing: 0.2px; }
h4 { font-weight: bold; font-size: 26px; line-height: 34px; letter-spacing: 0.2px; }
h5 { font-weight: bold; font-size: 20px; line-height: 26px; letter-spacing: 0.2px; }
h6 { font-weight: normal; font-size: 18px; line-height: 24px; letter-spacing: 0.1px; }
.primary { color: #fa9d1c !important; }
.primary-0 { color: #FFFFFF !important; }
.primary-25 { color: #fdd8a4 !important; }
.primary-50 { color: #fcc477 !important; }
.primary-75 { color: #fab14a !important; }
.btn-secondary, .btn-primary, .page-item.active .page-link { background-color:#fa9d1c; }
.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:hover { background-color: #fab14a; }
.secondary { color: #f5ce95 !important; }
.secondary-25 { color: #fbebd4 !important; }
.secondary-50 { color: #f9e1bf !important; }
.secondary-75 { color: #f8d7aa !important; }
.nav-link{ color: #fa9d1c; }
.black { color: #333132; }
.black-0 { color: #ebebeb; }
.black-1 { color: #adadad; }
.black-2 { color: #8d8d8d; }
.black-3 { color: #858384; }
.black-4 { color: #676767; }
.black-5 { color: #5c5a5b; }
.black-6 { color: #414141; }
.green { color: #40BB8A; }
.green-light { color: #6BC49E; }
.green-dark { color: #20B475; }
.blue { color: #6286C4; }
.blue-light { color: #ADBFE2; }
.blue-dark { color: #486AB3; }
.bg-primary { background-color: #fa9d1c !important; }
.bg-primary-0 { background-color: #FFFFFF !important; }
.bg-primary-25 { background-color: #fdd8a4 !important; }
.bg-primary-50 { background-color: #fcc477 !important; }
.bg-primary-75 { background-color: #fab14a !important; }
.bg-secondary { background-color: #f5ce95 !important; }
.bg-secondary-25 { background-color: #fbebd4 !important; }
.bg-secondary-50 { background-color: #f9e1bf !important; }
.bg-secondary-75 { background-color: #f8d7aa !important; }
.bg-black { background-color: #333132; }
.bg-black-0 { background-color: #ebebeb; }
.bg-black-1 { background-color: #adadad; }
.bg-black-2 { background-color: #8d8d8d; }
.bg-black-3 { background-color: #858384; }
.bg-black-4 { background-color: #676767; }
.bg-black-5 { background-color: #5c5a5b; }
.bg-black-6 { background-color: #414141; }
.bg-green { background-color: #40BB8A; }
.bg-green-light { background-color: #6BC49E; }
.bg-green-dark { background-color: #20B475; }
.bg-blue { background-color: #6286C4; }
.bg-blue-light { background-color: #ADBFE2; }
.bg-blue-dark { background-color: #486AB3; }
.btn-outline-danger{ border-color: #fa9d1c; }
.btn-outline-danger:hover{ background-color: #fa9d1c; border-color: #fa9d1c; color: #FFFFFF; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #fa9d1c; border-color: #fa9d1c; }
.accordion-button:not(.collapsed) { color: #fa9d1c; }
nav { top: 82px !important; z-index: 1021 !important; }
#investor_heading, #user_heading, #dashboard_heading, #bank_statement_heading { top: 139px; }
.disabled { cursor: not-allowed !important; pointer-events: fill !important; }

/* ------------- Form styles ----------- */
.form-select:focus { border-color: #f5ce95; -webkit-box-shadow: 0 0 0 0.25rem rgb(254 208 149 / 25%); box-shadow: 0 0 0 0.25rem rgb(254 208 149 / 25%); }
.form-control:focus { border-color: #f5ce95; -webkit-box-shadow: inset 0 0 0 1px #f5ce95; box-shadow: inset 0 0 0 1px #f5ce95; }
.form-check-input:checked:focus { border-color: #f5ce95; -webkit-box-shadow: 0 0 0 0.25rem rgb(254 208 149 / 25%); box-shadow: 0 0 0 0.25rem rgb(254 208 149 / 25%); }
.form-check-input:checked, .form-check-input[type=radio]:checked:after { border-color: #fa9d1c; background-color: #fa9d1c; }
.form-floating>.form-control { height: 38px; padding: .375rem .75rem; box-shadow: none; border-width: 2px; }
.form-floating>label { font-weight: bold; padding: .25rem .75rem; transition: all .2s; }
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label { opacity: 1; transform: scale(.75) translateY(-1.1rem) translateX(.75rem); background-color: #fff; padding: .25rem .5rem; height: 25px; }
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) { padding-top: .375rem; padding-bottom: .375rem; }
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus { box-shadow: none; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; display: block; transform: translate(0, -50%); top: 53%; pointer-events: none; width: 30px; text-align: center; font-style: normal; }
.input-icon > input { padding-left: 30px; padding-right: 0; }
.input-icon-right > i { right: 0; }
.input-icon-right > input { padding-left: 0; padding-right: 30px; text-align: right; }
.input-group.has-validation .invalid-feedback { margin-top: 0.5rem; }
#user_access_form { max-width: 600px; }
.ui-autocomplete{ z-index: 1061; }
.ui-widget-content .ui-state-active { background-color: #fa9d1c; border-color: #fa9d1c; }
.status-icon { font-size: 8px; line-height: 8px; vertical-align: middle; }
.bi.bi-trash-fill, .bi.bi-pencil-fill, .bi.bi-diagram-2-fill { cursor: pointer; }
.audit-trail { margin: 0; padding: 10px; }
.audit-trail:nth-child(even) { background-color: #E8E9EA; }
.clear { clear: both; }

/* ------ Device = Desktops ALL ------ */
@media ( min-width: 1025px ) {
    
}

/* ------ Device = Desktop Medium Res ------ */
@media (min-width: 1281px ) and (max-width: 1480px) {
    
}

/* ------ Device = Desktops High res ------ */
@media (min-width: 1481px ) {
    
}

/* ------ Device = Laptops, Desktops  ------ */
@media (min-width: 1025px) and (max-width: 1280px) {
   
}

/* ------ Device = Tablets, Ipads (portrait) ------ */
@media (min-width: 768px) and (max-width: 1024px){
    
}

/* ------ Device = Tablets, Ipads (landscape) ------ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
}