/*common*/
#FrmAlert {
    padding: 5px;
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
    width: 80%;
    font-weight: bold;
    position: relative;
    display: inline-block;
    text-align: Center;
    float: left;
   
}


    #FrmAlert.Icon {
        float: left;
        width: 16px;
        margin-right: 20px;
     
    }

    #FrmAlert.Hide {
        display: none;
        overflow: hidden;
    }

    #FrmAlert.success {
        background-color: forestgreen ;
    }

    #FrmAlert.info {
        background-color: steelblue ;
 
    }

    #FrmAlert.warning {
        background-color: orange  ;
        
    }

.critical {
    background-color: #FF0000;
}


.FormWrapper {
    border: 0px solid #a1a1a1;
    padding: 10px;
  
    min-height: 350px;
    text-align: center;
    height: auto;
    position: relative;
    overflow: auto;
    margin: 0px auto;
}


.FormLayout {
  
    border: 1px solid #a1a1a1;
    padding: 2px;
  
    min-height: 350px;
    text-align: center;
    height: auto;
    position: relative;
    overflow: auto;
    margin: 0px auto;
}

.FormLayoutNoborder {
    border: none !important;
}

.FormSmall {
    min-height: 350px;
}


.FormLayout .title {
    display: block;
    clear: left;
    text-align: center;
    text-decoration: underline;
    font-weight: bold
}

.FormLayout select, .FormLayout input {
    display: inline-block;
    width: 120px;
    float: left;
    margin-top: 3px;
}

.FormLayout label {
    display: inline-block;
    width: 180px;
    float: left;
    margin-top: 3px;
    clear: left;
}

.FormLayout span {
    display: inline-block;
    width: 180px;
    float: left;
    margin-top: 3px;
    clear: left;
}

.IconSmall {
    width: 16px;
    border: 0px !important;
    max-width: 16px;
}

.IconMedium {
    min-width: 25px;
    border: 0;
    max-width: 30px;
    border: 0
}



.FormLayout textarea {
    display: block;
    width: 200px;
    height: 50px;
    float: left;
    margin-top: 3px;
}

.FormLayout .textareawide {
    display: block;
    width: 600px !important;
    height: 50px;
    float: left;
    margin-top: 3px;
}

.FormLayout input[type=submit] {
    padding: 5px;
    background: #C0C0C0;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    right: 10px;
    bottom: 10px;
    float: right;
    transition: background 600ms;
    cursor: pointer;
    bottom: 0
}

.FormLayout input[type=button], .FormLayout button {
    padding: 5px;
    background: #C0C0C0;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    right: 10px;
    bottom: 0px;
    float: right;
    transition: background 600ms;
    cursor: pointer;
    width: auto;
    border: none;
}

.FormLayout .help {
    color: #0000FF;
    font-size: 1em;
    float: left;
    Width: 100%
}

.FormLayout .datalabel {
    display: inline-block;
    text-align: left;
    font-size: 1em;
    float: left;
    color: #0000FF;
    min-width: 100px;
    max-width: 200px;
}
  .YesNo {
    max-width: 50px;
}
 .SmallField{
     max-width:50px;
 }
#FormCmdBar input[type=image]{
    float:right;
}

.checkboxList {
    clear: both;
    display: inline-block;
    width: 100% !important;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
}

    .checkboxList input {
        float: left;
        margin-bottom: 0;
        vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
        text-align: left;
        cursor: pointer;
        width: 15px;
        height: 15px;
        top: 0;
        border-radius: 4px;
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
    }

    .checkboxList label {
        margin-bottom: 0;
        vertical-align: top; /* Fixes any weird issues in Firefox and IE */
        text-align: left;
        float: right;
        bottom: 20px;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 25px;
    }

.checkboxFour {
    clear: both;
    display: inline-block;
    width: 100% !important;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
}


    .checkboxFour input {
        float: left;
        margin-bottom: 0;
        vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
        text-align: left;
        cursor: pointer;
        width: 15px;
        height: 15px;
        top: 0;
        border-radius: 4px;
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
    }

    .checkboxFour label {
        margin-bottom: 0;
        vertical-align: top; /* Fixes any weird issues in Firefox and IE */
        text-align: left;
        float: right;
        bottom: 10px;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

#FlexItem {
    flex: 0 0 65%
}

fieldset {
    text-align: left;
}

legend {
    font-weight: bold;
}

.ProfilePhoto {
    margin: 0 0 1em 1em;
    position: relative;
    border: 1px;
    max-width: 148px;
    max-height: 150px;
}

.ImageTile {
    margin: 0 0 1em 1em;
    position: relative;
    border: 1px;
    max-width: 100px;
    max-height: 100px;
}

.MyDataGrid {
    max-width : 900px;
    border: solid 1px black;
    min-width: 80%;
    font-size:12px;
}

    .MyDataGrid .header, .footer {
        background-color: #646464;
        font-family: Arial;
        color: white;
        text-align: center;
        font-size: 1em;
    }

    .MyDataGrid .rows {
        background-color: #fff;
        font-family: Arial;
        font-size: 1em;
        color: #000;
        min-height: 20px;
        text-align: left;
        border: none 0px transparent;
    }


        .MyDataGrid .rows:hover, .alt:hover {
            background-color: cornflowerblue;
            font-family: Arial;
            color: #fff;
            text-align: left;
        }

    .MyDataGrid .selectedrow {
        background-color: cornflowerblue;
        font-family: Arial;
        color: #fff;
        font-weight: bold;
        text-align: left;
    }
    

    .MyDataGrid a /** FOR THE PAGING ICONS  **/ {
        background-color: lightgray ;
        padding: 3px 3px 3px 3px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

        .MyDataGrid a:hover /** FOR THE PAGING ICONS  HOVER STYLES**/ {
            background-color: #000;
            color: #fff;
        }

    .MyDataGGrid span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
        background-color: #c9c9c9;
        color: #000;
        padding: 1px 1px 1px 1px;
        max-width: 15px;
    }

    .MyDataGrid .Pager {
        background-color: #646464;
        font-family: Arial;
        max-height: 15px;
        text-align: Right;
    }

    .MyDataGrid td {
        padding: 5px;
    }

    .MyDataGrid th {
        padding: 5px;
    }

    .MyDataGrid .ActionColumn {
        
        float: right;
    }

    .MyDataGrid .NoData {
        align-content: initial;
        font-weight: 200;
    }
.MyDataGrid select {
   width: 100% ;
   min-width:100px;
    max-width: 150px !important;
    overflow: hidden;
}
.GridHeader {
    background-color: gray;
    color: White;
    font-weight: bold;
}
.GridFooter {
    background-color: gray;
    color: White;

}
    .GridHeader a {
        background-color: Gray;
        color: #C16914;
        font-weight: bold;
    }
    .GridHeader a {
        background-color: white;
        color: #C16914;
        font-weight: bold;
    }
        .GridHeader a:active {
            color: Black;
            font-weight: bold;
        }

.GridRow {
    background-color: white;
}

.GridAlternatingRow {
    background-color: #f3f3f3;
    color: #000;
}


.GridPager {
    color: #C16914;
    font-weight: bold;
}

    .GridPager a {
        color: #C16914;
        font-weight: normal;

    }

.GridEmptyData {
    text-align: center;
    font-weight: bold
}
#TabPageContainer {
    display: inline-block;
    height: 30px;
    position: relative;
    width: 100%;
    margin: 0;
}

    #TabPageContainer img {
        float: right;
        vertical-align: top;
        clear: both;
        top: 0;
    }


.required , .Required{
    
    border-color: red !important;
    
}
.required:after {
    content:"*";
        color:red
}
.validator {
    color: red;
    float: right;
    position: relative;
    vertical-align: middle;
    border-color: red !important;
    display: inline-block;
    white-space: nowrap;
    

}
.validator2 {
    position: relative;
    float: right;
    margin-right: 4.3em;
    margin-top: -0.1em;
    display: block;
}
.validator3 {
    display: inline-block;
    width: 180px;
    float: left;
    margin-top: 3px;
    clear: left;
}
.validatorsummary {
    display: inline-block;
    width: 80%;
    float: left;
    margin-top: 3px;
    clear: left;
    text-align:center;
    color:red
}

.textboxAslabel {
    border: none;
    background-color: transparent;
    border-color: #FFF;
}

    @media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
        .tablink {
            font-size: 1.5vh;
        }

        .FormColumn {
            display: grid;
            grid-template-columns: 100%;
            grid-gap: 5px;
            color: #444;
        }

        .FormCell {
            color: black;
            border-radius: 5px;
            border: medium;
            padding: 3px;
            font-size: 1em;
            text-align: center;
            margin-bottom: 5px;
        }

            .FormCell h1 {
                font-size: 2em;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                border: dashed;
            }
    }

    /* Desktops and laptops ----------- */
    @media only screen and (min-width : 768px) {
        .FormColumn {
            display: grid;
            grid-template-columns: 49% 49%;
            grid-gap: 5px;
            color: #444;
        }

        .FormCell {
            color: black;
            border-radius: 5px;
            border: medium;
            padding: 5px;
            font-size: 1em;
            text-align: center;
            margin-bottom: 5px;
        }
    }