@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@700;800;900&display=swap');

body {
}

.shadow1 {
    display: inline-block;
    margin: 20px;
    background-color: rgb(68,68,68); /* Needed for IEs */
    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

    .shadow1 .content {
        position: relative; /* This protects the inner element from being blurred */
        padding: 10px;
        background-color: #f3f2f2;
    }

.DropDownReport {
    display: block;
    padding: 10px 70px 10px 13px !important;
    max-width: 100%;
    height: auto !important;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #555;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bolder;
    line-height: 16px !important;
    box-shadow: inset 0 0 10px #e2e2e2;
    appearance: none;
    /* this is must */ -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.textReport {
    display: block;
    padding: 10px 10px 10px 13px !important;
    max-width: 100%;
    height: auto !important;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #555;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bolder;
    line-height: 16px !important;
    box-shadow: inset 0 0 10px #e2e2e2;
    appearance: none;
    /* this is must */ -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

.btnSubmitReport {
    background-color: #9dd04d;
    color: white;
    font-family: 'Open Sans', sans-serif;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .btnSubmitReport:hover {
        background-color: #45a049;
    }

.ReportFontCss {
    font-family: 'Open Sans', sans-serif;
}

.Note {
    border: 1px solid #CCC;
    padding: 40px 25px;
    background: #FFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    width: 1200px;
    height: 20px;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
}

    .Note.ofh {
        overflow: hidden;
    }

/* Ribbon 5 */
.cross-shadow-ribbon {
    position: absolute;
    background: #EA4335;
    top: -15px;
    padding: 10px;
    margin-left: 15px;
    color: #FFF;
    border-radius: 0 0 2px 2px;
}

    .cross-shadow-ribbon:before {
        content: "";
        position: absolute;
        left: -15px;
        right: 0;
        top: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 15px solid #A42F25;
        border-left: 15px solid transparent;
    }

/*gridviewCss*/

.myGridClass {
    /*this will be the color of the odd row*/
    background-color: #fff;
    margin: auto;
    border: solid 1px #c1c1c1;
    border-collapse: collapse;

}

    /*data elements*/
    .myGridClass td {
        padding: 5px 12px;
        border: solid 1px #c1c1c1;
        font-size:18px;
    }

    /*header elements*/
    .myGridClass th {
        padding: 3px;
        color: #007bff;
        background: #E0E0E0;
        border: solid 1px #c1c1c1;
        font-size: 18px;
        height:30px;
        font-family: 'Alegreya Sans', sans-serif;
        font-weight: 800;
    }

    .myGridClass tr:hover {
        background-color: #f5f5f5;
    }

    .myGridClass th:hover {
        text-decoration: underline;
        color: #0000c1;
        font-weight: bold;
        font-size: 18px;
    }

.myGridClassFooter {
    color: white;
    background-color: #e2e2e2;
    font-weight: bold;
}

/*GridView Paging*/
.myGridPagerClass a,
.myGridPagerClass span {
    border: solid 1px #1E90FF;
    background: #e9e9e9;
    color: #717171;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 12px;
}

.myGridPagerClass a {
    background-color: #f5f5f5;
    color: #1E90FF;
    border: 1px solid #1E90FF;
}

    .myGridPagerClass a:hover {
        background-color: #1E90FF;
        color: #f5f5f5;
    }

.myGridPagerClass span {
    background: #1E90FF;
    color: #f0f0f0;
}
/* end gridviewCss*/


.formHeadingClass {
    font-weight: 700;
    border-bottom: 2px solid #ddd;
    font-size: 18px;
    padding-bottom: 6px;
}

table td {
    table-layout: fixed;
}

.Gridcontainer {
    width: 99%;
    overflow-x: auto;
    white-space: nowrap;
     font-size: 18px;
     font-weight: 700;
}

.OuterboxClass {
    width: 98%;
    height: auto;
    border-radius: 5px;
    border: 1px solid #DCDCDC;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 5px 5px 10px #999;
    overflow: hidden;
}

/* Input Field css */

.inputClass {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d1d1d1;
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
    font-family: inherit;
    font-size: 1.2em;
    line-height: 1.45;
    outline: none;
    padding: 0.2em 0.7em 0.2em;
    -webkit-transition: .18s ease-out;
    -moz-transition: .18s ease-out;
    -o-transition: .18s ease-out;
    transition: .18s ease-out;
}

    .inputClass:hover {
        box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
    }

    .inputClass:focus {
        color: #4b515d;
        border: 1px solid #B8B6B6;
        box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
    }

.inputLblClass {
    background: #fff;
    color: #525865;
    border-radius: 4px;
    border: 1px solid #d1d1d1;
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.45;
    outline: none;
    padding: 0.2em 0.7em 0.2em;
    -webkit-transition: .18s ease-out;
    -moz-transition: .18s ease-out;
    -o-transition: .18s ease-out;
    transition: .18s ease-out;
}

.inputLblDisableClass {
    background: #f1f1da;
    color: #525865;
    border-radius: 4px;
    border: 1px solid #d1d1d1;
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.45;
    outline: none;
    padding: 0.2em 0.7em 0.2em;
    -webkit-transition: .18s ease-out;
    -moz-transition: .18s ease-out;
    -o-transition: .18s ease-out;
    transition: .18s ease-out;
}

.btnBlue {
    background-color: DodgerBlue;
    border: none;
    color: white;
    cursor: pointer;
    text-decoration: none;
    padding-top: 10px;
}

    /* Darker background on mouse-over */
    .btnBlue:hover {
        background-color: RoyalBlue;
    }

.btnGreen {
    background-color: #4CAF50;
    border: none;
    color: white;
    cursor: pointer;
    text-decoration: none;
    padding-top: 10px;
}

    /* Darker background on mouse-over */
    .btnGreen:hover {
        background-color: #45a049;
    }


.btnSubmit {
    background-color: #4CAF50;
    border: none;
    color: white;
    cursor: pointer;
    text-decoration: none;
    padding-top: 8px;
    border-radius: 4px;
}

    .btnSubmit:hover {
        background-color: #45a049;
    }

/* End Input Field css */

/* Progress Tracker css */

ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    ol.progtrckr li {
        display: inline-block;
        text-align: center;
        line-height: 3em;
    }

    ol.progtrckr[data-progtrckr-steps="2"] li {
        width: 49%;
    }

    ol.progtrckr[data-progtrckr-steps="3"] li {
        width: 33%;
    }

    ol.progtrckr[data-progtrckr-steps="4"] li {
        width: 24%;
    }

    ol.progtrckr[data-progtrckr-steps="5"] li {
        width: 19%;
    }

    ol.progtrckr[data-progtrckr-steps="6"] li {
        width: 16%;
    }

    ol.progtrckr[data-progtrckr-steps="7"] li {
        width: 14%;
    }

    ol.progtrckr[data-progtrckr-steps="8"] li {
        width: 12%;
    }

    ol.progtrckr[data-progtrckr-steps="9"] li {
        width: 11%;
    }

    ol.progtrckr li.progtrckr-done {
        color: black;
        border-bottom: 4px solid yellowgreen;
    }

    ol.progtrckr li.progtrckr-todo {
        color: silver;
        border-bottom: 4px solid silver;
    }

    ol.progtrckr li.progtrckr-current {
        color: black;
        border-bottom: 4px solid #A16BBE;
    }

    ol.progtrckr li:after {
        content: "\00a0\00a0";
    }

    ol.progtrckr li:before {
        position: relative;
        bottom: -2.5em;
        float: left;
        left: 50%;
        line-height: 1em;
    }

    ol.progtrckr li.progtrckr-done:before {
        content: "\2714";
        color: white;
        background-color: yellowgreen;
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }

    ol.progtrckr li.progtrckr-todo:before {
        content: "\039F";
        color: silver;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

    ol.progtrckr li.progtrckr-current:before {
        content: "\039F";
        color: #A16BBE;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

/* End Progress Tracker css */

/* Start Alert Message css */
.alertInfo {
    padding: 20px;
    background-color: #c1d8f5;
    color: #135cba;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
    border: 1px solid #4089e6;
}


/* End Alert Message css */





/* Start Heading Title css */
.multi-color-header {
    line-height: 50px;
    padding-left: 20px;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 700;
    text-shadow: 2px 2px 3px #F2F2F2;
    position: relative;
    height: 50px;
    padding-bottom: 6px;
}

    .multi-color-header::after {
        content: '';
        height: 3px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */
        background: rgb(237,128,52); /* Old browsers */
        background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */
    }

/* End Heading Title css */

/* Start Notification count css */
.notification {
    background-color: #ffc092;
    font-family: 'Alegreya Sans', sans-serif;
    color: white;
    text-decoration: none;
    padding: 10px 26px;
    position: relative;
    display: inline-block;
    border-radius: 6px;
    border: none;
    font-weight: 700;
}

    /*.notification:hover {
                background: #d9d9d9;
                color: #555;
            }*/

    .notification .badge {
        box-shadow: 2px 2px 2px grey;
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 3px 10px;
        border-radius: 50%;
        background-color: red;
        /*border:1px solid white;*/
        color: white;
        font-size: 12px;
    }

.notificationActive {
    background-color: #F28123;
    color: white;
    text-decoration: none;
    padding: 10px 26px;
    position: relative;
    display: inline-block;
    border-radius: 6px;
    border: none;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 700;
}

    .notificationActive .badge {
        box-shadow: 2px 2px 2px grey;
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 3px 10px;
        border-radius: 50%;
        background-color: red;
        color: white;
        font-size: 12px;
    }

/* End Notification count css */


.linkbtnCss {
    color: #DD4132;
    text-decoration: none;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 900;
    margin-bottom: 2px;
    background: linear-gradient(to top,#004B8D 0%,#004B8D 10%,transparent 10.01%)no-repeat left bottom / 0 100%;
    transition: background-size 0.5s;
}

    .linkbtnCss:hover {
        background-size: 100% 100%;
    }

/* Start Loader css */

#loader-container {
    width: 100px;
    height: 100px;
    color: white;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    border: 5px solid #3498db;
    border-radius: 50%;
    -webkit-animation: borderScale 1s infinite ease-in-out;
    animation: borderScale 1s infinite ease-in-out;
}

#loadingText {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

@-webkit-keyframes borderScale {
    0% {
        border: 5px solid white;
    }

    50% {
        border: 25px solid #3498db;
    }

    100% {
        border: 5px solid white;
    }
}

@keyframes borderScale {
    0% {
        border: 5px solid white;
    }

    50% {
        border: 25px solid #3498db;
    }

    100% {
        border: 5px solid white;
    }
}
/* End Loader css */

/* Start Loader Background css */

.dialog-background {
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}

.dialog-loading-wrapper {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    height: 100px;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: fixed;
    top: 55%;
    width: 100px;
    z-index: 9999999;
}

.dialog-loading-icon {
    background-color: #FFFFFF !important;
    border-radius: 13px;
    display: block;
    height: 100px;
    line-height: 100px;
    margin: 0;
    padding: 1px;
    text-align: center;
    width: 100px;
}

/* End Loader Background css */

/* Start Loader style css */

.loader {
    position: relative;
    width: 2.5em;
    height: 2.5em;
    transform: rotate(165deg);
}

    .loader:before, .loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.25em;
        transform: translate(-50%, -50%);
    }

    .loader:before {
        animation: before 2s infinite;
    }

    .loader:after {
        animation: after 2s infinite;
    }

@keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }

    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
    }

    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
    }

    100% {
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
}

@keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }

    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
    }

    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
    }

    100% {
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
}
/**
 * Attempt to center the whole thing!
 */
.loader {
    position: absolute;
    top: calc(50% - 1.25em);
    left: calc(50% - 1.25em);
}

/* End Loader style css */

/* Start Tooltip css */
.tooltipCss {
    position: relative;
    text-decoration: none;
    cursor: default;
}

    .tooltipCss:hover {
        text-decoration: none;
    }

    .tooltipCss:after {
        content: attr(alt);
        font-size: 90%;
        line-height: 1.2em;
        color: black;
        width: 400px;
        padding: 5px 10px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background: #ffc79a;
        background: -webkit-linear-gradient(#ffc79a, #ffb071);
        background: -moz-linear-gradient(#ffc79a, #ffb071);
        background: -o-linear-gradient(#ffc79a, #ffb071);
        background: -ms-linear-gradient(#ffc79a, #ffb071);
        background: linear-gradient(#ffc79a, #ffb071);
        -moz-box-shadow: 3px 3px 4px rgba(0,0,0, .65);
        -webkit-box-shadow: 3px 3px 4px rgba(0,0,0, .65);
        box-shadow: 3px 3px 4px rgba(0,0,0, .65);
        position: absolute;
        top: 27px;
        left: -10px;
        display: none;
    }

    .tooltipCss:before {
        z-index: 1000;
        position: absolute;
        content: "";
        top: 15px;
        left: 0px;
        border-right: 7px transparent solid;
        border-left: 7px transparent solid;
        display: none;
    }

    .tooltipCss:hover {
        z-index: 1000;
        position: relative;
        color: #8325f7;
    }

        .tooltipCss:hover:after {
            display: block;
        }

        .tooltipCss:hover:before {
            display: block;
        }

/* End Tooltip css */

/* Start subheading Title css */
.subTitleHeading {
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 0 30px;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    background: #fde4e4;
    color: #800000;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 4px 4px 7px 2px rgba(0,0,0,0.4);
}

/* End subheading Title css*/
/*gridviewCss*/

.myGridClass1 {
    /*this will be the color of the odd row*/
    background-color: #fff;
    margin: auto;
    border: solid 1px #c1c1c1;
    border-collapse: collapse;

}

    /*data elements*/
    .myGridClass1 td {
        padding: 5px 12px;
        border: solid 1px #c1c1c1;
        font-size:18px;
    }

    /*header elements*/
    .myGridClass1 th {
        padding: 3px;
        color: #007bff;
        background: #E0E0E0;
        border: solid 1px #c1c1c1;
        font-size: 18px;
        height:30px;
        
        font-weight: 700;
    }

    .myGridClass1 tr:hover {
        background-color: #f5f5f5;
    }

    .myGridClass1 th:hover {
        text-decoration: underline;
        color: #0000c1;
        font-weight: bold;
        font-size: 18px;
    }

.myGridClassFooter1 {
    color: white;
    background-color: #e2e2e2;
    font-weight: bold;
}

/*GridView Paging*/
.myGridPagerClass1 a,
.myGridPagerClass1 span {
    border: solid 1px #1E90FF;
    background: #e9e9e9;
    color: #717171;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 12px;
}

.myGridPagerClass1 a {
    background-color: #f5f5f5;
    color: #1E90FF;
    border: 1px solid #1E90FF;
}

    .myGridPagerClass1 a:hover {
        background-color: #1E90FF;
        color: #f5f5f5;
    }

.myGridPagerClass1 span {
    background: #1E90FF;
    color: #f0f0f0;
}
/* end gridviewCss*/