@font-face {
    font-family: FontAwesome;
    src: url(../../fonts/font-awesome/fonts/FontAwesome.otf);
}

@font-face {
    font-family: fontawesome-webfont;
    src: url(../../fonts/font-awesome/fonts/fontawesome-webfont.ttf);
}

@font-face {
    font-family: Roboto-Medium;
    src: url(../../fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
    font-family: Roboto-Light;
    src: url(../../fonts/Roboto/Roboto-Light.ttf);
}

@font-face {
    font-family: Roboto-Regular;
    src: url(../../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
    font-family: Roboto-Bold;
    src: url(../../fonts/Roboto/Roboto-Bold.ttf);
}

.formBlockWarpper:after {
    content: "";
    display: table;
    clear: both;
}

.formBlockWarpper {
    margin-bottom: 20px;
}

.formBlocksmall {
    float: left;
    width: 25%;
    padding: 10px;
    height: 55px;
}

.fromBlock {
    float: left;
    width: 50%;
    padding: 10px;
    height: 55px;
}

.formBlockRE {
    /*used in Report Engine only */
    float: left;
    width: 100%;
    padding: 10px 0px;
    /* height: 55px; */
}

.fromBlockfullwidth {
    /* float: left; */
    width: 100%;
    padding: 10px;
    height: 55px;
}


/* used this form block class in Report Engine Add Template Page .fromBlockfullwidthTextarea  */

.formblockdoubbleheight {
    height: 100px;
    overflow-y: auto;
    padding: 2px;
    float: left;
    width: 100%;
}

.fromBlockpopups {
    width: 100%;
    padding: 0px 5px;
}

.fromBlockpopups2columns {
    width: 50%;
    float: left;
    height: 55px;
    padding: 0px 5px;
}


/******Readonly info used in EMS leave form************/

.rowreadyonlypargraph,
.rowreadyonly {
    margin-bottom: 15px;
}

.rowreadyonlypargraph:after,
.rowreadyonly:after {
    content: "";
    display: table;
    clear: both;
}

.columnreadonly {
    float: left;
    width: 25%;
    padding: 10px;
    height: 55px;
}

.columnreadonly3clminrow {
    float: left;
    width: 33%;
    padding: 10px;
    height: 55px;
}

.columnreadonlymd {
    float: left;
    width: 50%;
    padding: 10px;
    height: 55px;
}

.columnreadonlyfullwidth {
    float: left;
    width: 100%;
    padding: 10px;
    height: 55px;
    margin-bottom: 10px;
}

.smallinfo {
    font-size: 12px;
    color: #B3B3B3;
    margin-bottom: 0px;
    font-family: Roboto-Regular;
    margin-bottom: -5px;
    letter-spacing: 0.5px;
}

.mediuminfo {
    font-size: 14px;
    color: #6A6A6A;
    line-height: 32px;
    font-family: Roboto-Medium;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px;
    display: inline;
    margin-right: 5px;
    /* margin-bottom: 10px; */
}

.mediuminfo:not(:last-of-type):after {
    content: ",";
}

.multiselectoverflow {
    overflow-y: hidden;
    overflow-x: auto;
}

.largeinfo {
    font-size: 17px;
    font-family: Roboto-Medium;
    color: #666666;
    letter-spacing: -0.4px;
    margin-bottom: 2px;
    margin-top: 3px;
}

.longtextinfo {
    font-size: 13px;
    color: #6A6A6A;
    line-height: 17px;
    font-family: Roboto-Light;
    margin-top: 5px;
    margin-bottom: 0;
}

@media screen and (max-width: 600px) {
    .columnreadonly,
    .fromBlock {
        width: 100%;
    }
}

.rowwrapper {
    margin-right: -15px;
    margin-left: -15px;
}

.rowwrapper:before,
.rowwrapper:after {
    display: table;
    content: " ";
}

.colmd1,
.colmd2,
.colmd3,
.colmd4,
.colmd6,
.colmd7,
.colmd8,
.colmd9,
.colmd12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.colmd1 {
    width: 8.33333333%;
}

.colmd2 {
    width: 16.66666667%;
}

.colmd3 {
    width: 25%;
}

.colmd4 {
    width: 33.33333333%;
}

.colmd6 {
    width: 50%;
}

.colmd7 {
    width: 58.33333333%;
}

.colmd8 {
    width: 66.66666667%;
}

.colmd9 {
    width: 75%;
}

.colmd12 {
    width: 100%;
}

.ppWrapper {
    display: flex;
    align-items: center;
}

.ppWrapper .matLabelblocklevel {
    flex-basis: 40%;
}

.ppWrapper mat-form-field,
.ppWrapper .angInput,
.ppWrapper .angSelect,
.ppWrapper .angSlidetoggle,
.ppWrapper .mat-slider {
    flex-basis: 60%;
}