body {

        background-image: URL('/img/bg.gif');
        background-attachment: fixed;
    }

    .main_div1 {

        padding-bottom:50px;

    }

    .main_div2 {

        padding:0px 0px 0px 0px; 
        border-right: 5px solid #D4D4D4;
        float: left;
    }

    .main_div31 {

        padding:0px 10px 10px 0px; 
        border-bottom: 5px solid #D4D4D4;
        float: left;
        width: 100%;
    }

    .main_div32 {

        padding:25px 10px 10px 0px; 
        border-bottom: 5px solid #D4D4D4;
        float: left;
        width: 100%;
    }

    .main_div33 {

        padding:0px 10px 10px 0px; 
        border-bottom: 5px solid #D4D4D4;
        float: left;
        width: 100%;
    }

    .main_div4 {

        padding:0px 0px 0px 0px; 
        float: left;
    }

    .main_div41 {

        padding:0px 10px 10px 0px; 
        float: left;
        width: 100%;
    }

    .hdr_h4 {

        margin-top: 0px; 
        color:#09C;

    }

    .hdr_href {

        float: right;

    }

    .hdr_font {

        font-size: 16px;

    }

    .hdr_span {

        float: right; 
        margin-right: 10px; 
        font-size: 12px; 
        color: #4A4A4A; 
        padding: 5px;

    }

    .div_cms2 {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;

    }

    .div_cms5 {

        color: #2F4F4F;

    }

    .div_cms6 {

        height: 48px;
        color: #2F4F4F;

    }

    .div_cms7 {

        font-size: 20px;
        color:#FFF;
        text-shadow: 1px 1px #969696;

    }

    .div_cms8 {

        font-size: 14px;

    }

    .div_cms_renewal {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #8470FF);

    }

    .div_cms_redem {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #6495ED);

    }

    .div_cms_sales {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #43CD80);

    }

    .div_cms_inv {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #DA70D6);

    }

    .div_cms_loan {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #EE7942);

    }

    .div_cms_notif {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #9ACD32);

    }

    .div_mos_notif {

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #778899);
        /*background-image: linear-gradient(to right, #FFF, #A2B5CD);*/

    }

    .div_gl_overview {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #33A1C9);

    }

    .div_trans_data {

        font-size: 20px;
        color:#FFF;
        text-shadow: 1px 1px #969696;
        padding-right: 8px;
        border-bottom-right-radius: 10px; 
    }

    .div_data_clr1 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #d3e9fe, #2e84d5);
    }

    .div_data_clr2 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #e3fb69, #bada55);
    }

    .div_data_clr3 {
        background-image: linear-gradient(to right, #FFF, #ffe4e1, #ff7373);
    }

    .div_data_clr4 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #e6e6fa, #b399fd);
    }

    .div_data_clr5 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #b0e0e6, #20b2aa);
    }

    .div_data_clr6 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #fff68f, #ffd700);
    }

    .div_data_clr7 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #b6fcd5, #20b2aa);
    }

    .div_data_clr8 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #d3e9fe, #4ca3dd);
    }

    .div_data_clr9 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #d3e9fe, #69b1fb);
    }

    .div_data_clr10 {
        background-image: linear-gradient(to right, #FFF, #FAFAFA, #dcedc1, #bada55);
    }

    .div_trans_overview {

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #FFF);

    }

    .div_trans_overview1 {

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #ff7373);

    }

    .div_trans_overview2 {

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #bada55);

    }

    .div_trans_overview3 {

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #a7b4ff);

    }

    .div_trans_overview4 { 

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #a6e2eb);

    }

    .div_trans_overview5 {

        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #c5a1ff);

    }

    .icon-label {
        font-size: 12px;
    }

    .data-text {
        font-size: 12px;
        padding-top: 4px;
    }

    .plus-clr {
        color: #000;
        font-size: 12px;
    }

    .div_gl_balance {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #4682B4);

    }

    .div_am_notif {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-image: linear-gradient(to right, #FFF, #5F9EA0);

    }


    .new_notif {

        font-weight: bold; 
        color: #424242;
    }

    .div_qf1 {

        width: 12vw;
        float: left;
        padding: 5px 0px 5px 15px;
    }

    .div_qf2 {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px;*/ 
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-color: #FAFAFA;

    }

    .div_qf3 {

        height: 200px;

    }
    
    .div_qf5 {

        color: #3D3D3D; 
        text-align: center; 
        padding-top: 10px;

    }

    .div_qf6 {

        color: #545454; 
        text-align: center; 
        padding-top: 10px; 
        height: 50px; 
        font-size: 14px;

    }

    .icon_report {

        color: #AB82FF;

    }

    .icon_master {

        color: #09C;
        
    }

    .icon_import {

        color: #FF6A6A;
        
    }

    .href_act_qf {

        /*border: 2px solid #458B00;*/
        color:#458B00;

    }

    .href_rep_qf {

        /*border: 2px solid #473C8B;*/
        color:#473C8B;
        
    }

    .href_tbl_qf {

        /*border: 2px solid #104E8B;*/
        color:#104E8B;
        
    }

    .href_set_qf {

        /*border: 2px solid #2F4F4F;*/
        color:#2F4F4F;
        
    }

    .href_import_qf {

        /*border: 2px solid #DC143C;*/
        color:#DC143C;
        
    }

    .href_monitor_qf {

        /*border: 2px solid #EE4000;*/
        color:#EE4000;
        
    }

    .href_history_qf {

        /*border: 2px solid #CDCD00;*/
        color:#CDAD00;
        
    }

    .href_control_qf {

        /*border: 2px solid #483D8B;*/
        color:#483D8B;
        
    }

    .div_qf7 {

        color: #4A4A4A; 
        text-align: center; 
        padding-top: 25px;

    }

    .div_control2 {

        /*box-shadow: 1px 2px 3px 1px #999999; */
        border-radius: 0px; 
        background-color: #FFF;

    }

    .div_control3 {

        height: 200px;

    }
    
    .div_control5 {

        color: #3D3D3D; 
        text-align: center; 
        padding-top: 10px;

    }

    .div_control6 {

        color: #545454; 
        text-align: center; 
        padding-top: 10px; 
        height: 50px; 
        font-size: 16px;

    }

    .div_control7 {

        color: #4A4A4A; 
        text-align: center; 
        padding-top: 5px;

    }

    .div_fin4 {

        padding: 0px;

    }

    .div_fin_span {

        color: #FFF;
        font-weight: bold;
        
    }

    .profit_head {

        padding: 8px 10px 8px 15px;
        background-image: linear-gradient(to right, #FFF, #4682B4);

    }

    .profit1 {

        padding: 8px 10px 8px 15px;
        background-image: linear-gradient(to right, #FFF, #EDEDED, #7D9EC0);

    }

    .profit2 {

        padding: 8px 10px 8px 15px; 
        background-image: linear-gradient(to right, #FFF, #7D9EC0);
        
    }

    .online_head {

        padding: 8px 10px 8px 15px;
        background-image: linear-gradient(to right, #FFF, #5F9EA0);

    }

    /*MAIN DASHBOARD*/

    .main_dash_panel {

        /*box-shadow: 1px 2px 3px 1px #999999; 
        border-radius: 0px; */
        border:1px solid #C2C2C2;
        border-radius: 5px;
        background-color: #fff;

    }

    .main_dash_body {

        height: 250px;

    }

    .main_dash_body2 {

        height: 210px;

    }
    
    .main_dash_icon1 {

        color: #435894; 
        text-align: center; 
        padding-top: 0px;

    }

    .main_dash_icon2 {

        color: #858585; 
        text-align: center; 
        padding-top: 0px;

    }

    .main_dash_icon3 {

        color: #EEA2AD; 
        text-align: center; 
        padding-top: 0px;

    }

    .main_dash_title {

        color: #000; 
        text-align: center; 
        padding-top: 10px; 
        height: 50px; 
        font-size: 20px;

    }

    .main_dash_title2 {

        color: #000; 
        text-align: center; 
        padding-top: 10px; 
        height: 50px; 
        font-size: 16px;

    }

    .main_dash_active {

        color: #545454; 
        text-align: center; 
        padding-top: 10px; 
        height: 50px; 
        font-size: 14px;

    }

    .main_dash_avail {

        color: #32CD32;
        text-align: center; 
        padding-top: 15px; 
        height: 50px; 
        font-size: 14px;

    }

    .main_dash_button {

        color: #4A4A4A; 
        text-align: center; 
        padding-top: 0px;

    }

    .main_dash_footer {

        height: 40px;
        text-align: center;

    }

    .main_dash_btn_blue {

        border: 2px solid #27408B; 
        color:#27408B;
        font-size: 12px;

    }

    .main_dash_btn_red {

        border: 2px solid #DC143C; 
        color:#DC143C;
        font-size: 12px;
        
    }

    .main_dash_btn_black {

        border: 2px solid #000;
        color:#000;
        
    }

    .main_dash_header {

        text-transform: uppercase; 
        text-align: center; 
        color: #FFF; 
        font-weight: bold; 
        margin-top: 0px; 
        padding: 15px;
        background-image: linear-gradient(to left, #FFF, #435894, #FFF);
        border: 1px solid #C2C2C2;
        border-radius: 5px;
        text-shadow: 0px 2px #575757; 
        font-size: 25px;
        letter-spacing: 3px;

    }

    .dash_title {

        padding: 10px 10px 10px 10px;
        background-image: linear-gradient(to right, #FFF, #C2C2C2, transparent);

    }

    .dash_title_cat {

        color: #4A4A4A;
        font-size: 14px;
    }

    /* width */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
    }
     
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: transparent; 
      border-radius: 10px;
      background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background-image: linear-gradient(to top, #A2B5CD 0%, #6495ED 100%);
    }

    .navcon {

      height: 93vh; 
      overflow: hidden;

    }

    .navcon:hover {

      overflow: auto;

    }

    .app-footer {

        text-align: left; 
        left: 0px; 
        right: 0px; 
        bottom: 0px; 
        z-index: 1; 
        background-image: linear-gradient(to left, #FFF, #586aa0, #435894);
        position: absolute;
        width: 100%; 
        font-family: arial;

    }

    .footer-right {

        font-weight: bold; 
        font-size: 11px; 
        color: #104E8B; 
        float: right;
        
    }

    .footer-left {
  
        font-size: 13px; 
        color: #FFF;
        
    }

    .page-container {

      position: relative;
      min-height: 100vh;

    }


    /*NEW*/

    .div_right {
        padding: 0px;
    }

    .div_right_row {
        padding: 8px 10px 8px 15px;
        font-weight: bold;
    }

    .row-spn-dtl {
        font-size: 12px;
        color: #989fa4;
        font-style: italic;
        font-weight: 100;
    }

    .row-spn-dtl2 {
        font-size: 12px;
        color: #989fa4;
        font-style: italic;
        font-weight: 100;
    }

    .row-spn-dtl3 {
        font-size: 12px;
        color: #989fa4;
        font-weight: 100;
    }

    .row-spn-mng {
        margin-top: 10px;
        margin-right: 10px;
        font-weight: 100;
    }

    .row-spn-number {
        margin-right: 10px;
        font-weight: 100;
        font-size: 14px;
    }

    .row-spn-text {
        margin-top: 0px;
        margin-right: 0px;
        font-weight: bold;
        font-size: 16px;
        color: #20b2aa;
        text-align: right;
    }

    .row-spn-title {
        margin-left: 5px;
    }

    .spn-a{
        color: #989fa4;
    }

    .mstr-icon {
        color: #09C;
    }

    .set-icon {
        color: #ff6666;
    }

    .rep-icon {
        color:#20b2aa;
    }

    .com-title {
        font-size: 16px;
        color:#407294;
    }

    .control-prd {
        padding: 20px 20px 15px 20px;
    }

    .control-prd2 {
        padding: 5px 15px 10px 15px;
    }

    .backup {
        padding: 20px 10px 20px 10px;
        text-align: center;
        line-height: 25px;
    }

    .fnt-1x {
        font-size: 14px;
    }

    .fnt-2x {
        font-size: 16px;
        color: #20b2aa;
    }

    .fnt-3x {
        font-size: 18px;
    }

    .fnt-4x {
        font-size: 20px;
    }

    .clr-year {
        color: #20b2aa;
    }

    .clr-month {
        color: #ff7373;
    }

    .clr-curr {
        color: #468499;
        border-radius: 30px;
        padding: 3px 7px 3px 7px;
    }

    .clr-bckup {
        color: #ff4040;
    }

    .clr-history {
        color: #bada55;
    }

    .clr-history2 {
        color: #00baff;
    }

    .clr-def {
        color: #808080;
    }

    .clr-fun {
        color: #4ca64c;
    }

    .clr-rep {
        color: #4ca3dd;
    }

    .clr-book {
        color: #407294;
    }

    .fa-online {
        font-size: 16px;
        color: #00e5a3;
    }

    .indnt {
        text-indent: 20px;
    }

    .cal-icon {
        font-size: 40px;
    }

    .conv-icon {
        color: #c0c0c0;
    }

    .txt-hgt {
        line-height: 30px;
    }

    .conv-alert {
        color: #999999;
        padding: 10px 20px 20px 20px;
        font-weight: 100;
        text-align: center;
        font-size: 18px;
    }

    .conv-a {
        font-size: 12px;
    }

    .book-reg {
        padding: 20px 10px 20px 10px;
        text-align: center;
        line-height: 25px;
    }

    .book-code {
        font-weight: bold;
    }

    /*NAVIGATION*/

    .nav-main-head {
        margin-bottom: 0; 
        background-image: linear-gradient(to left, #FFF, #586aa0, #435894); 
        position: fixed; 
        left: 0px; 
        right: 0px; 
        top: 0px; 
    }

    .nav-main-name {
        color: #c0d6e4 !important; 
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 
        opacity: 1; 
        font-size: 14px; 
        font-weight: bold; 
        font-family: arial; 
        text-transform: uppercase; 
        text-indent: 5px; 
        letter-spacing: 3px;
    }

    .home-alert {
        padding: 8px 15px 8px 15px; 
        font-size: 14px; 
        margin-top: 10px; 
        margin-left: 10px; 
        margin-right: 10px; 
        margin-bottom: 10px;
    }

    .home-logo {
        text-align: center; 
        background: #FFF;
    }

    .home-title1 {
        color: #FFF; 
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 
        opacity: 1; font-size: 18px;  
        background-image: linear-gradient(to left, #FFF, #586aa0, #FFF); 
        border-radius: 0px; 
        text-align: center;
    }

    .home-title2 {
        padding: 30px 0px 30px 0px; 
        font-size: 35px; 
        font-weight: bold;
        color: #636b6f; 
        text-align: center; 
        line-height: 50px; 
        text-shadow: 2px 4px 3px rgba(0,0,0,0.2); 
        background-image: linear-gradient(to right, #586aa0, #FFF, #586aa0); 
        text-transform: uppercase;
    }

    .home-address {
        text-align: center; 
        font-size: 16px; 
        background-image: linear-gradient(to left, #FFF, #DCDCDC, #FFF);
    }

    .home-abrv {
        text-align: center; 
        font-size: 14px; 
        color: #545454; 
        font-weight: bold; 
        font-family: arial; 
        background: #FFF;
    }

    .home-login {
        font-size: 12px; 
        font-weight: bold; 
        text-transform: uppercase;
    }

    .home-cred {
        background-image: linear-gradient(to bottom, #586aa0, #FFF); 
        padding: 50px 70px 30px 70px;
    }

    .home-btn-submit {
        border:2px solid #97a2c4; 
        font-size: 12px; 
        font-weight: bold; 
        text-transform: uppercase;
    }

    .home-page-logo {
        text-align: center;
    }

    .home-page-app-name {
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        color: #FFF;
        padding-top: 30px;
        /*text-shadow: 2px 4px 3px rgba(0,0,0,0.6);*/
        text-transform: uppercase;
        text-shadow: -1px -1px 0 #293141, 1px -1px 0 #293141, -1px 1px 0 #293141, 1px 1px 0 #293141;
    }

    .home-page-app-con {
        text-align: center;
        font-size: 30px;
        color: #FFF;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0px 20px 20px 0px;
    }

    .home-page-owner {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #000;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
        padding-top: 20px;
    }

    .home-page-line {
        padding: 0px;
    }

    .home-break {
        border: 3px solid #232a38;
        background: #232a38;
    }

    .home-page-address {
        text-align: center;
        font-size: 16px;
        color: #000;
    }

    .home-page-welcome {
        background: rgba(0, 0, 0.8, 0.2);
    }