/* START of Frequently used classes */
.MandatoryControl {
    border:solid 0.3px red !important;
}
.noborder {
	border: none;
}
.width7 {
    width: 7%;
}
.width15 {
    width: 15%;
}
.width20 {
    width:20%;
}
.width25 {
    width:25%;
}
.width30 {
    width: 30%;
}
.width40 {
    width: 40%;
}
.width70 {
    width: 70%;
}
.width80 {
    width: 80%;
}
.fullwidth {
	width: 100%;
}
.fullheight {
	height: 100%;
}
.halfwidth {
	width: 50%;
}
.halfheight {
	height: 50%;
}
.whitecolorfont {
	color: white;
}
.blackcolorfont {
	color: black;
}
.greycolorfont {
	color: #d8d8d8;
}
.greyshadefont {
	color: #A0A0A0;
}
.lightgreycolorfont {
	color: #e0e0e0;
}
.textcenteralign {
	text-align: center;
}
.textleftalign {
	text-align: left;
}
.textrightalign {
	text-align: right;
}
.boldstylefont {
	font-weight: 600;
}
.semiboldstylefont {
    font-weight: 500;
}
.italicstylefont {
	font-style: italic;
}
.normalstylefont {
    font-weight: 400;
}
.lightstylefont {
    font-weight: 100;
}
.floatRight {
	float: right;
}
.floatLeft {
	float: left;
}
.pointercursor {
	cursor: pointer;
}
.mycursor {
	/*cursor: pointer;*/
    font-size: 3vh !important; 
}
.defaultcursor {
    cursor: default;
}
.cursornotallowed {
    cursor: not-allowed;
    /*bugid99125*/
    pointer-events: none;
}
.pointer-events-none {
    pointer-events: none;
}
.displayinlineflex {
	display: inline-flex;
}
.displayinlinefleximp {
	display: inline-flex !important;
}
.displayinlineblock {
	display: inline-block;
}
.displayinline {
  display:inline;
}
.margnrtpt5 {
	margin-right: 0.5%;
}
.margnrtpt6 {
	margin-right: 0.6%;
}
.margnlft1 {
	margin-left: 0.8%; /*1%;*/
}
.margnlft20 {
	margin-left: 20%;
}
.margnlft2 {
	margin-left: 2%;
}
.margnlft07 {
    margin-left: 0.7%;
}
.mrgnlft30 {
   margin-left:30%;
}
.margnrt1 {
	margin-right: 1%;
}
.margnrt2 {
	margin-right: 5%;
}
.margnrt6 {
  margin-right:6%;
}
.margnrt7 {
  margin-right:7%;
}
.mrgnlftrt1 {
  margin-right:1%;
  margin-left:1%;
}
.margntp1vw {
    margin-top: 1vw;
}
.margnbtm1vw {
    margin-bottom: 1vw;
}
.margntp1vh {
    margin-top: 1vh;
}
.margntp2vh {
  margin-top:2vh;
}
.margntp1 {
	margin-top: 1%;
}
.margntp1-5 {
	margin-top: 1.5%;
}
.margntp2 {
	margin-top: 2%;
}
.mrgntp1pt2vh {
   margin-top:1.2vh;
}
.mrgntp9 {
  margin-top:9vh;
}
.marginrg02vw{
	margin-right: 0.2vw;
}
.margntp0-2 {
	margin-top: 0.2%;
}
.margntpchpwd {
	margin-top: 3%;
}
.margin0 {
    margin: 0;
}
.margin1110vw {
    margin :1vw 1vw 1vw 0vw;
}
.paddingpt4 {
	padding-top: 0.4vh;
}
.paddingrl1vw {
    padding-right: 1vw;
    padding-left: 1vw;
}
.paddinglftpt4vw {
  padding-left:0.4vw;
}
.paddingleft1 {
    padding-left: 1vw;
}
.padding10 {
	padding: 1vw;
}
.padding1vw {
    padding: 0.1vw;
}
.paddingtp1 {
    padding-top: 1%;
}
.paddingtop0 {
    padding-top: 0;
}

.paddingleft5 {
    padding-left:5px;
}
.paddingsettingspage {
    padding: 0.6vw 1vw 0.6vw 0vw;
}
/* FONTS */
.xxlargefntsize {
    font-size: 3vw;
}
.xlargefontsize {
    font-size: 2.5vw;
}
.largefntsize {
    font-size: 2vw;
}
.fntsize32 {
	/*font-size: 32px;*/
	font-size: 1.8vw;
}
.fntsize24 {
	/*font-size: 24px;*/
	font-size: 1.5vw;
}

.fntsize22 {
    font-size: 1.3vw;
}
.fntsize18 {
	/*font-size: 18px !important;*/
	font-size: 1.1vw;
}
.fntsize20 {
	/*font-size: 20px;*/
    color:white;
	font-size: 1.2vw;
}
.fntsize16 {
	/*font-size: 16px !important;*/
	font-size: 1vw;
}
.fntsize14 {
	/*font-size: 14px;*/
	font-size: 0.9vw;
}
.fntsize12 {
	/*font-size: 12px;*/
	font-size: 0.8vw;
}
.fntsize10 {
	/*font-size: 10px;*/
	font-size: 0.7vw;
}
.fntsize8 {
	/*font-size: 8px;*/
	font-size: 0.6vw;
}
/* End of Frequently used classes */

.sideMenu {
display:none;
}

.lblRespIcons {
    display:none;
    }

 #btnNewRequestIcon, #btnExportIcon, #btnReassignIcon {
    display:none !important;
    }
 
     #btnShowfilterIcon, #btnHideFiltersIcon {
    display:none;
    }

.displaynone {
    display : none;
}

.displayblock {
    display : block;
}
#SecondHeaderText {
width:50%;
}

.zindex100 {
  z-index:100;
}
.heightauto {
 height:auto !important;
}
.boxshadownone {
      box-shadow:none ! important;
    }
@media (max-width: 700px) {
    .fntsize24 {
        /* Minimum font size */
        font-size: 20px;
    }


    .app-bar {
        position: static;
        height: auto;
        padding-bottom: 0.5vw;
    }

    .fixed-top, .fixed-bottom {
        position: static;
    }

    .flex-grid-header {
        position: static;
        height: auto;
        top: auto;
        max-height: none;
        /*max-height:auto;*/
    }

        .flex-grid-header > div {
            float: none !important;
            display: inline-flex;
            width: auto;
        }

    .gridheaderclass, .gridheaderclasswithTab, .gridheaderclass-noCard {
        position: static;
    }

    .limodwidth {
        width: 90% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .liglbsearchmargin, .ntfcnsClass:not(#liUserData) {
        display: none;
    }

    .limargin {
        margin-right: 4px;
    }

    #spanSelectedCount {
    display:none;
    }

    .lifstdrpdwnwidth {
        width: 22px;
    }

    .imgharmonyapps {
        width: 22px;
    }

    i, .fas, .far, .fab, .lblmpdrpdwnshrtname {
        width:25px!important;
        font-size: 16px;
    }

    .divmpusermodule {
        width: auto;
    }
    /*.app-bar-drop-left-container input, .app-bar-drop-left-container button, .app-bar-drop-left-container label, .divusrdrpdwnbtns div, .divusrdrpdwnbtns span {
    font-size:18px!important;
    }*/

    .fntsize16 {
        font-size: 18px!important;
    }

    .fntsize15, button.accordion, button.accordion1 {
        font-size: 17px!important;
    }

    .fntsize14 {
        font-size: 16px!important;
    }

    .fntsize13 {
        font-size: 15px!important;
    }

    button {
        font-size: 16px!important;
        height:auto !important;
        /*max-height:25px;*/
    }

    .fntsize12 {
        font-size: 14px!important;
    }

    .fntsize11 {
        font-size: 13px!important;
    }

    .fntsize10 {
        font-size: 12px!important;
    }

    .app-bar .app-bar-drop-left-container {
        width: 100%;
        font-size: 17px !important;
        left: 0px;
    }

    .lblmpusrshrtname {
        font-size: 34px!important;
    }

    .lblmpdrpdwnshrtname {
        display: none;
    }

    .sideMenu {
        display: block;
    }

    .lblRespIcons {
        display: block;
    }

    /*Second Bar css Started*/

    #selectTemplates {
        display: block;
    }

    #dvFilterViewDiv {
        display: none;
    }

    #lblDefaultViewDiv {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #SecondHeaderText {
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #btnNewRequest, #btnExport, #btnReassign {
        display: none !important;
    }

    #btnNewRequestIcon, #btnExportIcon, #btnReassignIcon {
        display: block !important;
    }

    #divActins {
        float: right !important;
        margin-top:1%;
    }


    #btnShowfilter, #btnHideFilters {
        display: none !important;
    }

    #btnShowfilterIcon {
        display: block;
    }

    body, label, a, table, div, select, button, input, textarea {
        font-size: 16px!important;
    }

    .percentageRectangle {
        font-size: 14px;
        width: 45px;
    }

    .GridFilterDiv {
        width: 100%;
        left: 0%;
        min-width: 100%;
        max-width: 100%;
        position: static;
    }

    .fontSizeForFilter, .andOrConditionClass {
        font-size: 16px!important;
    }

    .filterNameLabelClass, .filterNamesaveDefaultLabelClass {
        font-size: 16px!important;
    }

    button.accordion::after, button.accordion1::after,button.accordion.active::after, button.accordion1.active::after, button.accordion.active::before, button.accordion1.active::before, .filterSearchConditionLabelClass, .fontSizeForFilter2, .filterLabelClass, .capsuleLabelClass, .ms-options-wrap > .ms-options > ul li.selected label, .ms-options-wrap > .ms-options > ul label:hover, .ms-options-wrap > .ms-options > ul label {
        font-size: 14px !important;
    }

    .popUpBox {
        width: auto;
    }

    .threedotsDiv {
        margin-left: 5%;
        margin-right: 10%;
    }
    
    .floating-box2, .floating-box1, .floating-box3, .floating-box4 {
        width: 100%;
    }

    /*Login Screen Styles*/

    .divSignInPanelClass {
        width: 100%;
        top: 0%;
        height: 100%;
        left: 0%;
        opacity:1;
    }

    .imageHarmonyLogo {
        width: 50px;
    }

    .labelHamrony {
        font-size: 24px;
    }

    .labelWelcome {
        font-size: 19px;
    }

    .inputTextLoginName, .inputTextPassword {
        font-size: 17px!important;
    }

    .d-menu {
        width: auto!important;
    }

    #divSignInPanel input {
        height: 25px!important;
    }

    #divSignInPanel .fullheight {
        height: auto!important;
    }

    .ListEle {
        font-size: 15px!important;
    }

    .rememberMeLabel,.licensedToLabel {
        font-size: 12px!important;
    }

    .buildCopyrightLabel, .copyrightLabel, .helpaTag, .divTermsaTag,.termsaTag {
    font-size:11px!important;
    }

    .dvOuterinitiateGridClass {
    left:0px;
    top:0px;
    width:100%;
    }

    /*Alert Box Styles*/

    #divAlertBox select {
    width:50%;
    }
.fntsize32 {
	font-size: 22px!important;
	/*font-size: 1.8vw;*/
}
.fntsize24,.loading-message {
	font-size: 19px!important;
	/*font-size: 1.5vw;*/
}

.fntsize22 {
    font-size:17px!important;
    /*font-size: 1.3vw;*/
}
.fntsize18 {
	/*font-size: 18px !important;*/
	font-size: 15px!important;
}
.fntsize20 {
	/*font-size: 20px;*/
	font-size: 16px!important;
}

    .alertheader,.alertbuttons {
    height:auto!important;
    }

    .alertboxclass {
    width:95%;
    margin-left:2.5%;
    left:0px;
    top:15%;    
    }

    .alertboxbody {
    top:10%;
    /*bottom:35%;*/
    height:auto;
    }

    .ms-options-wrap > button, input[type=text], input[type=password], input[type=date], input[type=file], select {
    height:auto!important;
    }

    .floating-box, .floating-box1, .floating-box2, .floating-box3, .floating-box4 {
    padding: 4px;
    padding-bottom: 3px;
    /*padding-right: 4px;*/
}

    .progressbarstyle {
    width:55px;
    height:auto;
    }

    .threeDotsClassHeader {
    font-size:14px!important;
    }

    .divPageActionsClassNewReq {
    position:static;
    /*left:-50%;*/
    top:0px;
    }

        .divPageActionsClassNewReq::before {
        width:0px;
        height:0px;
        }

    #divTotalWorkFlowProgress,#divTotalTemplateProgress,#divLeftPanelBarsData {
    height:auto;
    }

    #divLeftPanelInitiatePage {
    width:100%;
    right:0px;
    }

    .lblRespFR {
    float:none!important;
    }

    td {
    padding: 15px;
    padding-left:0.5vw;
    }

    th {
    padding: 8px;
    padding-left:0.5vw;
    }
    
    /*Menu Popup Styles*/
    .xlargefontsize {
    font-size:29px!important;
    }

    .modulesHarmony {
    width:100%!important;
    }

    .accordionbuttonleftspan {
    width:auto!important;
    }

    .accordion span {
    margin-left:5px;
    }

    #divModuleDetails {
    width:100%!important;
    height:100%!important;
    }

    #divModuleDetails .switch {
    display:none;
    }

    /*.gridheaderclass, .gridheaderclasswithTab, .gridheaderclass-noCard {*/
    .gridheaderclass {
        width: 100%!important;
        height: 100%;
    }
    /*left:0%!important;

    }*/

    
    .flex-grid-header > label, .flex-grid-header > div > select, .flex-grid-header > select, .dashboardVersionHeaderLabel, .dashboardViewHeaderLabel {
        font-size: 20px !important;

    }

    .CardTasks {
    width:98%;
    }
}


.semiboldstylefontsize {
    font-weight: 500;
    font-size:0.85vw;
}

.maincardview {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    outline: none;
    overflow: hidden;
}

.maindocview {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1 1 220px;
    -webkit-flex: 1 1 220px;
    flex: 1 1 220px;
    overflow: hidden;
    padding: 7px;
    position: relative;
    vertical-align: top;
    max-width: 100%;
    min-width: 0;
}


.cardview {
    /* flex: 1 1 226px;
    min-width: 226px;
    max-width: 300px;
    transition: 0.3s;*/
      background-color: #fff;
    border: 1px solid #dadce0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 7px;
    overflow: hidden;
    position: relative;
    -webkit-transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
    transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    width:100%;
/*    background-color: #fff;
    border: 1px solid #dadce0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    -webkit-transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
    transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1);*/
}

.filegridclass {
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    margin-left: 10%;
    /*height: 45%;*/
    /*grid-auto-rows: minmax(45%,auto);*/
    grid-auto-rows: 240px;
}

.imgdiv {
    background-color: #fff;
    height: 80%;
    left: 0;
    overflow: hidden;
    /*position: absolute;*/
    text-align: center;
    top: 0;
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
    width: 100%;
    opacity: 1;
}

.fileimgclass {
    background-repeat: no-repeat;
    -webkit-background-size: 64px;
    background-size: 64px;
    display: inline-block;
    height: 80%;
    vertical-align: middle;
    width: 100%;
    padding: 20px;
    opacity: 1;
    transition: .5s ease;
}

.fileimgclassPlusIcon {
    background-repeat: no-repeat;
    -webkit-background-size: 64px;
    background-size: 64px;
    display: inline-block;
    height: 80%;
    vertical-align: middle;
    width: 100%;
    padding: 20px;
    opacity: 1;
    transition: .5s ease;
}

.filenamediv {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 0 0 48px;
    -webkit-flex: 0 0 48px;
    flex: 0 0 48px;
}

.filelabeldiv {
    -webkit-align-self: center;
    align-self: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    font-weight: 500;
    overflow: hidden;
    padding-right: 12px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: -webkit-calc(100% - 56px);
    width: calc(100% - 56px);
}

.smallimgmainclass {
    -webkit-box-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 24px;
    /*padding: 12px 16px;*/
    padding-top:5px;
    padding-bottom:12px;
    padding-right:16px;
    padding-left:16px;
    position: relative;
    width: 24px;
    z-index: 1;
}

.smallimgclass {
    height: 24px;
    position: relative;
    width: 24px;
}

.smallimglabel {
    /*left: 50%;
    position: absolute;*/
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 16px;
    width: 16px;
    padding-top: 4px;
    padding-left: 5px;
    padding-right: 15px;
    padding-bottom: 4px;
}

.divPageActionsClassMultidoc {
    position: absolute;
    /* top: 0.5vh; */
    /* right: 4vh; */
    box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 10%);
    z-index: 10;
    color: white;
    background-color: white;
    width: 10vw;
    padding: 1vh;
}

.plusClass {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.middleMU {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    height: 100%;
    text-align:start;
}

.imgdiv:hover .fileimgclass {
    opacity: 0.3;
}

.imgdiv:hover .middleMU {
    opacity: 0.8;
    width: 100%;
    background-color: black;
}