﻿/* Consumer Goods Application Forms Styles */

@media screen {
    body {
        padding: 0px;
        margin: 0px;
        font-family: arial;
        text-shadow: 0 1px 0 rgba(0,0,0,0.1);
        color: #333333 !important;
    }
}

            a, a:link, a:visited{cursor:pointer; color:#003962;}
            a:hover{color:#41c4dc;}

            .pageContent{
                float:left;
                width:97%;
                padding:0 10px;
            }

            a#menu{
                color: white;
                float: left;
                width: 32px;
                height: 20px;
                background: #41c4dc;
                padding: 7px 5px;
                text-align: center;
                font-family: arial;
                font-size: 14px;
                text-decoration: none;
                line-height: 1.5em;
                margin-top:13px;
            }

            a#menu:hover{
                background:#003962;
            }

            a#menu i {
                margin-top: 3px !important;
                margin-left: 10px;
                margin-right: -4px;
                }

            .fnlLogo{
                margin:15px 10px 10px;
                float:left;
            }

            /*ul.menu{list-style:none; width:210px; padding:0; margin:0px 0 0 0; float:left;}*/
            /*ul.menu li{float:left;width:100%; text-align:left; margin:0px; text-shadow: 0 1px 0 rgba(0,0,0,0.2);}*/
            ul.menu{list-style:none; width:100%; padding:0; margin:0px 0 0 0; float:left;}
            ul.menu li{float:left;width:210px; text-align:left; margin:0px; text-shadow: 0 1px 0 rgba(0,0,0,0.2);}
            ul.menu li.norm{border-right:1px solid #ccc;}
            ul.menu li i {padding:0 10px 0 15px;}

            ul.menu li.header {border-top:1px solid #ccc; background:#f7f7f7;}
            ul.menu li.header a{float:left; border-bottom:1px solid #ccc;width:41px; color:#fff; background:#003962; line-height :32px; text-decoration:none; font-size:12px; height:34px; border-right: 1px solid #ccc;}
            ul.menu li.header a:hover{background:#41c4dc;}
            ul.menu li.header a:last-child{border-right:0px;}

            ul.menu li.norm a{float:left; border-bottom:1px solid #ccc;width:100%; color:#fff; background:#003962; line-height :34px; text-decoration:none; font-size:12px; height:34px;}
            ul.menu li.norm a:hover{background:#41c4dc;}
            ul.menu li.logout a{float:left;border-bottom:1px solid #999 !important; width:100%; color:#fff; background:#003962; line-height:32px; text-decoration:none; font-size:12px; height:34px;}
            ul.menu li.logout a:hover{background:#666666;}

            ul.menu li a i{margin-right:5px;}

            div.topbar{
                position:fixed;
                width:100%;
                background:#f7f7f7;
                border-bottom:1px solid #cccccc;
                z-index:99999;
                min-height:58px;
                text-align:center;
                float:left;
            }
            
                div.topbar a i{
                padding-right: 3px;
                font-size: 14px;
                margin-top: 9px !important;
                float: left;
                }
            

            div.pageTitle{
                position:relative;
                width:45%;
                color:#666666;
                font-weight:normal;
                text-align:center;
                line-height:34px;
                float:left;
                top:5px;
                min-width:340px;
            }

                div.pageTitle span.title{
                    color:#333333;
                    font-size:18px;
                    font-weight:normal;
                    line-height:30px;
                    top:13px;
                    width:100%;
                    text-align:center;
                    float:left;
                }

                div.pageTitle span.dateCreated{
                    color:#999999;
                    font-size:12px;
                    font-weight:normal;
                    line-height:16px;
                    width:100%;
                    text-align:center;
                    float:left;
                }

            div.pageContent{
                z-index:999;
                margin-top:73px;
            }

            div#header_logo{
                margin-top:14px;
                float:right;
                width:200px;
                height:35px;
            }

            #mainMenu{
                float:left; width:210px; overflow:hidden; position:relative; top:13px; height:34px;
            }

            #mainMenu ul.menu li{
                border-top:0px;
                border-bottom:0px;
                border-right:1px solid #f7f7f7;
            }

            #mainMenu ul.menu li:first-child{
                border-left:1px solid #f7f7f7;
            }

            a.footer{
                float: left;
                width: 41px;
                color: #fff;
                background: #003962;
                line-height: 32px;
                text-decoration: none;
                font-size: 12px;
                height: 34px;
            }

            a.footer i {padding:0 10px 0 15px; font-size:14px; line-height: 32px;}
            a.footer:hover{background:#41c4dc;}

            a.sml_btn{
                float: left;
                width: 20px;
                color: #fff;
                background: #003962;
                line-height: 32px;
                text-decoration: none;
                font-size: 12px;
                height: 20px;
            }

            a.sml_btn i {padding:0 5px; float:left; margin-top:4px;}
            a.sml_btn:hover{background:#41c4dc;}

            button.btn{outline:none; border:0px; color:#fff; background:#003962; line-height :32px; text-decoration:none; font-size:14px; height:34px; cursor:pointer; margin-right:15px; text-shadow: 0 1px 0 rgba(0,0,0,0.4); text-align:left; padding-right:20px;}
            button.btn:hover{background:#41c4dc;}
            button.btn:focus{background:#41c4dc;}
            button.btn i {padding:0 5px 0 10px; text-shadow: 0 1px 0 rgba(0,0,0,0.4);}

            button.btn_sml{outline:none; border:0px; color:#fff; background:#003962; line-height :16px; text-decoration:none; font-size:12px; height:24px; cursor:pointer; margin-right:10px; text-shadow: 0 1px 0 rgba(0,0,0,0.4); text-align:left; padding:0 7px !important;}
            button.btn_sml:hover{background:#41c4dc;}
            button.btn_sml i {padding:0 5px 0 10px; text-shadow: 0 1px 0 rgba(0,0,0,0.4);}

            td.h_title{
                padding:3px 7px;
                line-height:1.8em;
                font-size:12px !important;
                text-shadow: 1px 1px 0 rgba(255,255,255,0.9) !important;
            }

            form#MainForm table tr td:first-child{
                padding-left:7px;
            }

            form#MainForm table.idTable tr td{
                padding-left:0px;
            }

            input[type=text], select, textarea{border:#cccccc 1px solid; padding:2px;}
            input[type=text]:focus, select:focus, textarea:focus{border:#41c4dc 1px solid !important;}

                input[type=text]:disabled, select:disabled {
                    border: #cccccc 1px solid;
                    padding: 2px;
                    background: #e8e8e8 url('/qik/_assets/images/layout/disabledBG.png') repeat !important;
                }
            input[type=text].readonly{border:#cccccc 1px solid; padding:2px; background:#e8e8e8 !important;}

            div.leftTop{float:left; width:30%; min-width:300px;}
            div.leftTop img.q_logo {
                float: left;
                padding: 1px 4px;
                margin-top:13px;
            }
            div.rightTop{float:right; width:25%; min-width:200px;}
            
            i.iconPriv{float: left; padding: 8px 11px;}

            button.btn{padding-left:20px;}

            td{padding:2px 0;}

            tr.highlighted{background:#f2fecd;
                -o-transition-duration: 0.8s;
                -moz-transition-duration: 0.8s;
                -ms-transition-duration: 0.8s;
                -webkit-transition-duration: 0.8s;
                transition-duration: 0.8s;
            }

            tr.parkedArea{
                -o-transition-duration: 0.8s;
                -moz-transition-duration: 0.8s;
                -ms-transition-duration: 0.8s;
                -webkit-transition-duration: 0.8s;
                transition-duration: 0.8s;
            }

            div.botConfimationBox{
                float:left; width:99%; border:1px solid #666666; line-height:20px; padding:10px; background:#f2fecd; margin:10px 0; color:#333333;text-shadow: 1px 1px 0 rgba(255,255,255,0.9);}
            }

    hr.divider {
        height: 1px;
        border:0 !important;
        border-top: 1px dotted #cccccc !important;
        margin: 0px 0px 10px 0px;
        padding: 0px;
        float: left;
        width: 100%;
        }

    .req{color:#cc0000 !important; font-weight:bold !important; font-style:normal !important;}
    .copynotes {color:#999999; font-style:italic;}

    div.overlay{background-image:url('/qik/_assets/images/layout/overlay_white_bg.png'); background-repeat:repeat; position:fixed; top: 0; left:0; width:100%; height:100%; float:left; z-index:999999; zoom:1;}

    table.data tr td{font-size:12px; color:#333; padding: 5px; text-shadow: 0 1px 0 rgba(0,0,0,0.1);}
            table.data tr.header, table.data tr.header td {
                background:#cccccc; padding-left:5px; color:#333333; line-height: 1.8em; font-weight:bold;
                font-size: 12px !important;
                text-shadow: 1px 1px 0 rgba(255,255,255,0.9);}
            table.data tr{background:#ffffff; padding-left:5px;}
            table.data tr.dataCol:hover, table.data tr.dataCol:hover td{background:#41c4dc;
                -o-transition-duration: 0.4s;
                -moz-transition-duration: 0.4s;
                -ms-transition-duration: 0.4s;
                -webkit-transition-duration: 0.4s;
                transition-duration: 0.4s;
                color:#fff !important;
                text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
            }

            table.data tr.dataCol:nth-child(even) {
                background-color: #e8e8e8;
            }

            table.data tr.dataCol:hover td a{color:#ffffff;}


            input[type=text], textarea, select {
                -webkit-transition: all 0.30s ease-in-out;
                -moz-transition: all 0.30s ease-in-out;
                -ms-transition: all 0.30s ease-in-out;
                -o-transition: all 0.30s ease-in-out;
                outline: none;
                border: 1px solid #cccccc;
            }

                input[type=text]:focus, textarea:focus, select:focus {
                    box-shadow: 0 0 5px rgba(65, 196, 220, 0.6) !important;
                    border: 1px solid rgba(65, 196, 220, 1) !important;
                }

                    input[type=text]:focus.error, textarea:focus.error {
                        box-shadow: 0 0 5px rgba(204, 0, 0, 0.4) !important;
                        border: 1px solid rgba(204, 0, 0, 1) !important;
                    }

            table.tblAppAF tr td{padding:0px !important;}
            span.SearchArrow {
                width: 0;
                float: left;
                position: relative;
                left: 0px;
                top: 0px;
                height: 0;
                border-style: solid;
                border-width: 10px 0 10px 10px;
                border-color: transparent transparent transparent #ffcc00;
            }


            a.expBtn{text-decoration:none; background:#003962; color:#ffffff; width:21px; height:21px; line-height:21px; text-align:center; text-shadow:none; float:left;}
            a.expBtn:hover{text-decoration:none; background:#41c4dc; color:#ffffff;}

@keyframes pulseGreen {
    from {
        box-shadow: 0px 0px 0px 0px #aae203;
    }

    to {
        box-shadow: 0px 0px 5px 0px #aae203;
    }
}

@keyframes pulseRed {
    from {
        box-shadow: 0px 0px 0px 0px #fe0202;
    }

    to {
        box-shadow: 0px 0px 5px 0px #fe0202;
    }
}

            .btnGreen {background:#99cc00 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.5);}
            .btnGreen:hover, .btnGreen:focus {background:#aae203 !important; /*animation:pulseGreen 1.0s infinite alternate;*/}
            .btnGreen:active, .btnGreen:visited {background:#99cc00 !important; animation:none !important;}

            .btnRed {
                background: #cc0000 !important;
                text-shadow: 0 1px 0 rgba(0,0,0,0.8);
            }

                .btnRed:hover, .btnRed:focus {
                    background: #fe0202 !important;
                    /*animation: pulseRed 1.0s infinite alternate;*/
                }

                .btnRed:active, .btnRed:visited {
                    background: #cc0000 !important;
                    animation: none !important;
                }

.btnOrange, .btnOrange:active, .btnOrange:visited {
    background: #ff6a00 !important;
}

    .btnOrange:hover, .btnOrange:focus {
        background: #FF8040 !important;
    }

            .ConfirmMsgBox {
                width:440px;
                height:220px;
                border: 1px solid #ccc;
                background-color: #f3f3f3;
                position: absolute;
                top:-10px;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                padding:0 10px;
                }

                .ConfirmMsgBox p{
                font-size:12px;
                float:left;
                width:100%;
                line-height:1.25em;
                height:auto;
                margin:0;
                }

                .ConfirmMsgBox h2{
                font-size:16px;
                color:#003962;
                margin-bottom:5px;
                }

                .ConfirmMsgBox span.btn {
                margin: 10px 5px 5px 0px;
                display:inline-block;
                }

        div#noDPIDPanel{
            display:none; position:fixed; bottom:0px; width:100%; padding:10px 20px; background:#fae5e5; color:#000000; z-index:1000; border-top:1px solid #cc0000;animation:pulseRed 1.0s infinite alternate;
        }
        div#noDPIDPanel button{
            text-align:center; position:absolute; right:5%;
        }
        div#noDPIDPanel span.spnMsg{
            float:left; width:100%; text-shadow: 1px 1px 0 rgba(255,255,255,0.9) !important;
        }
        div#noDPIDPanel span.spnMsg i{
            float:left; width:32px;
        }
        div#noDPIDPanel span.spnMsg span.msgTxt {
            float: left; line-height: 28px; height: 28px; width: auto;
        }

        @keyframes pulseRed {
          from { box-shadow:0px 0px 0px 0px #fe0202; }
          to { box-shadow:0px 0px 20px 0px #fe0202; }
        }

        div.currentDetails{
            float:left;
            width:auto;
            padding: 0 10px;
            border: 1px solid #99cc00;
            background: #f2fecd;
            font-weight:bold;
        }

        /******************************************************/
        /* Width - 100 to 480px  *****************/
        /******************************************************/
        @media only screen and (min-width:100px) and (max-width:1200px) {

            div#noDPIDPanel span.spnMsg span.msgTxt {
                float: left; line-height: 1.25em; height: 28px; width: 75%;
            }

            div#noDPIDPanel span.spnMsg{
                margin-bottom:10px;
            }

            div#noDPIDPanel span:last-child{
                margin-bottom:0px !important;
            }

        }

            /**************** PRINT DOCUMENT ****************/

                @media print{
                    div.topbar{float:left; width:680px;}
                    div.leftTop{display:none;}
                    div.topbar img.pshadow{display:none;}
                    table.bottomFooter{display:none;}
                    div.pageTitle{width:75% !important;}
                    div.pageTitle, div.pageTitle span{float:left !important; text-align:left !important;}
                    div.rightTop{float:right; margin-top:-45px;}
                    div.pageContent{padding:0px; margin-left:0px; margin-right:0px;}
                    div.tooltipster-grow-show{display:none;}
                  }