/*
----------------------------------------------------------------------
Font families - 29/01/2018 12:58 
---------------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto';
    src: url('../resources/Roboto-Regular.eot');
    src: url('../resources/Roboto-Regular.eot') format('embedded-opentype'),
            url('../resources/Roboto-Regular.woff') format('woff'),
            url('../resources/Roboto-Regular.ttf') format('truetype'),
            url('../resources/Roboto-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'OpenSans';
	src: url('../resources/font_OpenSans-Regular.eot'); 
	src: local('OpenSans'),
		url('../resources/font_OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'WebIconFont';
    src: url('../resources/font_icon.eot');
    src: url('../resources/font_icon.eot') format('embedded-opentype'),
            url('../resources/font_icon.woff') format('woff'),
            url('../resources/font_icon.ttf') format('truetype'),
            url('../resources/font_icon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Ikaros';
	src: url('../resources/Ikaros-Regular.eot');
	src: url('../resources/Ikaros-Regular.eot?#iefix') format('embedded-opentype'),
		url('../resources/Ikaros-Regular.woff') format('woff'),
		url('../resources/Ikaros-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Capriola';
    src: url('../resources/capriola-v5-latin-regular.eot');
    src: url('../resources/capriola-v5-latin-regular.eot') format('embedded-opentype'),
            url('../resources/capriola-v5-latin-regular.woff') format('woff'),
            url('../resources/capriola-v5-latin-regular.ttf') format('truetype'),
            url('../resources/capriola-v5-latin-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../resources/jost_light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


* {
    padding:0px;
    margin:0px;
    border: none;
    outline: none;
    /* Below tap-highlight properties have been added on 11 Sep to remove the highlight in mobile devices when a click is made - Alvin Baek, 11/09/2018 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}

html { height:100%;}

body {
    height: 100%;
    font-family:OpenSans, Roboto, Arial;
    font-size: 14px;
    color:#000000;
    padding: 0px;
    margin: 0px;
}


/* Font related ---------------------------------------------------------------------- */
.fontRoboto { font-family:Roboto; }
.fontSans { font-family:OpenSans; }
.fontJost { font-family:Jost; }
.fontIkaros { font-family:Ikaros; }
.fontCapriola { font-family:Capriola; }
.fontIcon { font-family:WebIconFont; }
.fontBold { font-weight: bold; }
.fontItalic { font-style:italic; }
.fontSize9 { font-size: 9px !important; }
.fontSize10 { font-size: 10px !important; }
.fontSize11 { font-size: 11px !important; }
.fontSize12 { font-size: 12px !important; }
.fontSize13 { font-size: 13px !important; }
.fontSize14 { font-size: 14px !important; }
.fontSize15 { font-size: 15px !important; }
.fontSize16 { font-size: 16px !important; }
.fontSize17 { font-size: 17px !important; }
.fontSize18 { font-size: 18px !important; }
.fontSize19 { font-size: 19px !important; }
.fontSize21 { font-size: 21px !important; }
.fontSize23 { font-size: 23px !important; }
.fontSize25 { font-size: 25px !important; }
.fontSize27 { font-size: 27px !important; }
.fontSize30 { font-size: 30px !important; }


h1{
}

h2{
}

h3{
}

/*
----------------------------------------------------------------------
HTML Tag - Alvin Baek | 29/06/2016 8:24
---------------------------------------------------------------------- */
a, a:visited, a:link, a:active, a:focus { color: #139be1; text-decoration: none; outline:0; }
a:hover { color: #05a5f8; text-decoration: underline; }


ul { list-style-type:none; }
ul li { padding:0px; margin:0px; }
img { border:0; width:100%; }

dl{ overflow:hidden; clear:both; }
dl dt{ float:left; }
dl dd{ float:left; }

dl.table{ display: table; border-collapse: collapse; }
dl.table dt{ float:none; display: table-cell; }
dl.table dd{ float:none; display: table-cell; }

select{
    padding:7px 10px;
    border: solid 1px #dfdfdf;
}

object{
    pointer-events: none;
}

.floatLeft { float: left; }
.floatRight { float: right; }
.divClear{
    display: block;
    height: 0px;
    clear: both;
    overflow: hidden;
}
.clearFloat{
    clear: both;
    overflow: hidden;
}

.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}


/* Being used in the jDropdown style to set the location middle of height */
dl.tableMiddle{ display: table; }
dl.tableMiddle dt{ float:none; display: table-cell; vertical-align: middle; height: 100%; }
dl.tableMiddle dd{ float:none; display: table-cell; vertical-align: middle; height: 100%; }

/* Table styles -------------------------------------------------------- */
table { font-weight:normal; border-collapse:collapse; border-spacing:0px; }
table th { font-weight:normal; }
table tr {}
table td{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

table, tr, td{ border:none; }

.table { display:table !important; border-collapse:collapse !important; border-spacing:0px !important; }
.table .cell { display:table-cell !important; vertical-align:top; border:none; }
.table .cellMid { display:table-cell; vertical-align:middle; border: none; }
.table .cellBot { display:table-cell; vertical-align:bottom; border: none; }

.textCenter { text-align:center; }
.textLeft { text-align:left; }
.textRight { text-align:right; }
.width100 {width: 100% !important;}


/* country code */
span.cc{ font-size: 12px !important; color:#ff4400 !important; }

/* Input[type='text'] styles ------------------------------------------------------ */
input[type="text"], input[type="password"]
{
    font-family:OpenSans, Roboto, Arial;
    /* font-family:inherit; */
    font-size:inherit;
    padding:8px 0px;
    /* width:calc(100% - 18px) !important;*/
    width:100%;
    color: #000000;
    cursor:text;
    border:none;
    /* display:block; */
    background-color:transparent;
}

input[type="text"].bottomLine, input[type="password"].bottomLine{
    border-bottom: solid 1px #676767;
}

input[type="number"].bottomLine, input[type="password"].bottomLine{
    border-bottom: solid 1px #676767;
}

input[type="text"]:hover, input[type="password"]:hover { }
input[type="text"]:focus, input[type="password"]:focus { content:""; outline: none; }

input[type="text"].bottomBlue, input[type="password"].bottomBlue{
    border-bottom: solid 1px #03a9f4;
}

input[type="text"].bottomOrange, input[type="password"].bottomOrange{
    border-bottom: solid 1px #ff9900;
}

input[type="text"].bottomWhite, input[type="password"].bottomWhite{
    border-bottom: solid 1px #ffffff;
    color:#ffffff;
}

input[type="text"].bottomWhite::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #cccccc !important;
}

input[type="password"].bottomWhite::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #cccccc !important;
}

input[type='checkbox'] {
    width: 20px;
    height: 20px;        
}

input[type=checkbox]:focus, input[type=checkbox]:active {
    outline:none;
}

input[type=checkbox], label {
    outline:none;
    cursor: pointer;
    vertical-align: middle;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999999;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999999;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #999999;
}

label {
    display:inline-block;
}


/* Textarea styles ------------------------------------------------------ */
textarea
{
    font-family:inherit;
    font-size:inherit;
    overflow-y:auto;
    overflow-x:hidden;
    resize:none;
    vertical-align: top;
    padding:8px 0px;
    width:100%;
    line-height:1.8;
    min-height: 50px;
    min-width:20px;
    border:none;
    background-color:transparent;
    outline: none;
}
textarea:hover{}
textarea:focus{ content:""; outline: none; }

textarea.bottomLine{
    border-bottom: solid 1px #676767;
}

textarea.bottomWhite{
    border-bottom: solid 1px #ffffff;
}

textarea.bottomWhite::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #cccccc !important;
}

.inline{ display:inline-block; }


/* Input group styles ------------------------------------------------------ */
.inputGroup{
    position:relative;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background-color: inherit;
    width:100% !important;
}

.inputGroup .inputLineBlue { position: relative; display:block; border-bottom:solid 1px #cccccc; }
.inputGroup .inputLineBlue:before, .inputGroup .inputLineBlue:after {
  content: '';
  position: absolute;
  height: 1px;
  width: 0px;
  bottom: -1px; /* It should be -1 because main DIV has a border bottom */
  background: #2196f3;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -o-transition: all .2s ease;
}

.inputGroup .inputLineBlue:before { left: 50%; }
.inputGroup .inputLineBlue:after { right: 50%; }
/* active state */
.inputGroup input:focus ~ .inputLineBlue:before, .inputGroup input:focus ~ .inputLineBlue:after { width: 50%; }
.inputGroup textarea:focus ~ .inputLineBlue:before, .inputGroup textarea:focus ~ .inputLineBlue:after { width: 50%; }

.inputUnderlineRed { position: relative; display:block; border-bottom:solid 1px #e91e63; }
.inputUnderlineRed:before, .inputUnderlineRed:after {
  content: '';
  position: absolute;
  height: 1px;
  width: 0;
  bottom: -1px; /* It should be -1 because main DIV has a border bottom */
  background: #f44336;
  transition: 0.2s ease all;
  -o-transition: all 0.2s ease;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.inputUnderlineRed:before { left: 50%; }
.inputUnderlineRed:after { right: 50%; }
/* active state */
.inputGroup input:focus ~ .inputUnderlineRed:before, .inputGroup input:focus ~ .inputUnderlineRed:after { width: 50%; }
.inputGroup textarea:focus ~ .inputUnderlineRed:before, .inputGroup textarea:focus ~ .inputUnderlineRed:after { width: 50%; }


/*
----------------------------------------------------------------------
General use - 29/01/2018 13:00 
---------------------------------------------------------------------- */
.mandatory { }
.mandatory:after {
  content:"*";
  color:red;
  padding:5px 0px 0px 5px;
  font-size:14px;
}

.cursorHand { cursor:pointer; }

.transitionShort{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.transition{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.transitionLong{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.selectNone{
    /* Below is to prevent selecting the text when double-click happens */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}


/* Color related ---------------------------------------------------------------------- */
.colorWhite { color:#ffffff; }
.colorBlack { color:#000000; }
.colorRed { color:#f44336; }
.colorPink { color:#e91e63; }
.colorPurple { color:#9c27b0; }
.colorDeepPurple { color:#312d38; }
.colorIndigo { color:#3f51b5; }
.colorBluer { color:#006dfe;}
.colorBlue { color:#2196f3; }
.colorLightBlue { color:#03a9f4; }
.colorRoyalBlue { color: #7575fc; }
.colorCyan { color:#00bcd4; }
.colorCyanTooltip { color:#1496bb; }
.colorTeal { color:#009688; }
.colorGreen { color:#4caf50; }
.colorDarkGreen {color: #339c37;}

.colorLightGreen { color:#8bc34a; }
.colorLime { color:#cddc39; }
.colorYellow { color:#ffeb3b; }
.colorAmber { color:#ffc107; }
.colorOrange { color:#ff9800; }
.colorDeepOrange { color:#ff5722; }
.colorBrown { color:#795548; }
.colorClouds { color:#ecf0f1; }
.colorClouder { color:#dbe0e0; } 
.colorSilver { color:#bdc3c7; }
.colorConcrete { color:#95a5a6; }
.colorAsbestos { color:#7f8c8d; }
.colorGrayDark { color:#3c595a; }

.testBorder{ border:solid 1px #ff0000 !important; }

.hoverDisabled {
  pointer-events: none;  /**<-----------*/
  opacity: 1;
}

.backLight{ background-color: #f3f4f6; }
.backLight:hover{ background-color: #e2e3e5; }
.backLightNoHov{ background-color: #f3f4f6; }

.backWhite { background-color:#ffffff; }                /* R: 255, G: 255, B: 255 */
.backWhiteNoHov { background-color:#ffffff; }         /* R: 255, G: 255, B: 255 */
.backWhite:hover { background-color:#f7f7f7; }

.backBlack { background-color: #000000;}
.backBlack:hover { background-color: #454545;}

.backPmPink { background-color: #d63549; }

.backRed1 { background-color:#f3013e; }                 /* R: 243, G: 1, B: 62 */
.backRed { background-color:#f44336; }                  /* R: 244, G: 67, B: 54 */
.backRedNoHov { background-color:#f44336; }             /* R: 244, G: 67, B: 54 */
.backRed:hover { background-color:#de3023; }            /* R: 222, G: 48, B: 35 */
.backPink { background-color:#e91e63; }                 /* R: 233, G: 30, B: 99 */
.backPinkNoHov { background-color:#e91e63; }                 /* R: 233, G: 30, B: 99 */
.backPink:hover { background-color:#d41554; }           /* R: 212, G: 21, B: 84 */
.backPurple { background-color:#9c27b0; }               /* R: 156, G: 39, B: 176 */
.backPurpleNoHov { background-color:#9c27b0; }               /* R: 156, G: 39, B: 176 */
.backPurple:hover { background-color:#8a189f; }         /* R: 138, G: 24, B: 159 */
.backDeepPurple { background-color:#673ab7; }           /* R: 103, G: 58, B: 183 */
.backDeepPurpleNoHov { background-color:#673ab7; }           /* R: 103, G: 58, B: 183 */
.backDeepPurple:hover { background-color:#51279d; }     /* R: 81, G: 39, B: 157 */
.backIndigo { background-color:#3f51b5; }               /* R: 63, G: 81, B: 181 */
.backIndigoNoHov { background-color:#3f51b5; }               /* R: 63, G: 81, B: 181 */
.backIndigo:hover { background-color:#2e3ea0; }         /* R: 255, G: 255, B: 255 */
.backBlue { background-color:#2196f3; }                 /* R: 33, G: 150, B: 243 */
.backBlueNoHov { background-color:#2196f3; }                 /* R: 33, G: 150, B: 243 */
.backBlue:hover { background-color:#1287e1; }           /* R: 255, G: 255, B: 255 */

.backRoyalBlue { background-color: #7575fc; }
.backRoyalBlueNoHov { background-color: #7575fc; }
.backRoyalBlue:hover { background-color: #6464eb; }

.backLightBlue { background-color:#03a9f4; }            /* R: 255, G: 255, B: 255 */
.backLightBlueNoHov { background-color:#03a9f4; }            /* R: 255, G: 255, B: 255 */
.backLightBlue:hover { background-color:#0095db; }      /* R: 255, G: 255, B: 255 */
.backCyan { background-color:#00bcd4; }                 /* R: 255, G: 255, B: 255 */
.backCyanNoHov { background-color:#00bcd4; }                 /* R: 255, G: 255, B: 255 */
.backCyan:hover { background-color:#00abbf; }           /* R: 255, G: 255, B: 255 */
.backCyanTooltip { background-color:#1496bb; }          /* R: 255, G: 255, B: 255 */
.backCyanTooltipNoHov { background-color:#1496bb; }          /* R: 255, G: 255, B: 255 */
.backCyanTooltip:hover { background-color:#0683a7; }    /* R: 255, G: 255, B: 255 */

.backCyanDarker { background-color: #047ea2; }
.backCyanDarkerNoHov { background-color: #047ea2; }
.backCyanDarker:hover { background-color: #036d91; }

.backTeal { background-color:#009688; }                 /* R: 255, G: 255, B: 255 */
.backTealNoHov { background-color:#009688; }                 /* R: 255, G: 255, B: 255 */
.backTeal:hover { background-color:#008378; }           /* R: 255, G: 255, B: 255 */
.backGreen { background-color:#4caf50; }                /* R: 255, G: 255, B: 255 */
.backGreenNoHov { background-color:#4caf50; }                /* R: 255, G: 255, B: 255 */
.backGreen:hover { background-color:#379b3c; }          /* R: 255, G: 255, B: 255 */
.backLightGreen { background-color:#8bc34a; }           /* R: 255, G: 255, B: 255 */
.backLightGreenNoHov { background-color:#8bc34a; }           /* R: 255, G: 255, B: 255 */
.backLightGreen:hover { background-color:#75ab35; }     /* R: 255, G: 255, B: 255 */
.backDarkGreen {background-color: #44ad48;}
.backDarkGreenNoHov {background-color: #44ad48;}
.backDarkGreen:hover {background-color: #339c37;}
.backLime { background-color:#cddc39; }                 /* R: 255, G: 255, B: 255 */
.backLimeNoHov { background-color:#cddc39; }                 /* R: 255, G: 255, B: 255 */
.backLime:hover { background-color:#bbc828; }           /* R: 255, G: 255, B: 255 */
.backYellow { background-color:#ffeb3b; }               /* R: 255, G: 255, B: 255 */
.backYellowNoHov { background-color:#ffeb3b; }               /* R: 255, G: 255, B: 255 */
.backYellow:hover { background-color:#edd82b; }         /* R: 255, G: 255, B: 255 */
.backAmber { background-color:#ffc107; }                /* R: 255, G: 255, B: 255 */
.backAmberNoHov { background-color:#ffc107; }                /* R: 255, G: 255, B: 255 */
.backAmber:hover { background-color:#e3ab00; }          /* R: 255, G: 255, B: 255 */
.backOrange { background-color:#ff9800; }               /* R: 255, G: 255, B: 255 */
.backOrangeNoHov { background-color:#ff9800; }               /* R: 255, G: 255, B: 255 */
.backOrange:hover { background-color:#e78800; }         /* R: 255, G: 255, B: 255 */
.backDeepOrange { background-color:#ff5722; }           /* R: 255, G: 87, B: 34 */
.backDeepOrangeNoHov { background-color:#ff5722; }           /* R: 255, G: 87, B: 34 */
.backDeepOrange:hover { background-color:#e33e0b; }     /* R: 255, G: 255, B: 255 */
.backBrown { background-color:#795548; }                /* R: 255, G: 255, B: 255 */
.backBrownNoHov { background-color:#795548; }                /* R: 255, G: 255, B: 255 */
.backBrown:hover { background-color:#6a4538; }          /* R: 255, G: 255, B: 255 */

.backClouds { background-color:#ecf0f1; }               /* R: 255, G: 255, B: 255 */
.backCloudsNoHov { background-color:#ecf0f1; }               /* R: 255, G: 255, B: 255 */
.backClouds:hover { background-color:#d9e3e5; }         /* R: 255, G: 255, B: 255 */
.backClouder { background-color:#dbe0e0; }               /* R: 255, G: 255, B: 255 */
.backClouderNoHov { background-color:#dbe0e0; }               /* R: 255, G: 255, B: 255 */
.backClouder:hover { background-color:#c8d2d4; }         /* R: 255, G: 255, B: 255 */
.backSilver { background-color:#bdc3c7; }               /* R: 255, G: 255, B: 255 */
.backSilverNoHov { background-color:#bdc3c7; }               /* R: 255, G: 255, B: 255 */
.backSilver:hover { background-color:#a4adb3; }         /* R: 255, G: 255, B: 255 */
.backConcrete { background-color:#95a5a6; }             /* R: 255, G: 255, B: 255 */
.backConcreteNoHov { background-color:#95a5a6; }             /* R: 255, G: 255, B: 255 */
.backConcrete:hover { background-color:#809293; }       /* R: 255, G: 255, B: 255 */
.backAsbestos { background-color:#7f8c8d; }             /* R: 255, G: 255, B: 255 */
.backAsbestosNoHov { background-color:#7f8c8d; }             /* R: 255, G: 255, B: 255 */
.backAsbestos:hover { background-color:#6b7b7c; }       /* R: 255, G: 255, B: 255 */
.backDark { background-color:#667172; }                 /* R: 102, G: 113, B: 114 */
.backDarkNoHov { background-color:#667172; }                 /* R: 102, G: 113, B: 114 */
.backDark:hover { background-color:#576364; }           /* R: 87, G: 99, B: 100 */

.backTransp { background-color: transparent; }
.backTranspNoHov { background-color: transparent; }
.backTransp:hover { background-color: rgba(250, 250, 250, 0.3); }

/* Rounded corner related ---------------------------------------------------------------------- */
.radius20px{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

.radius15px{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius:15px;
    -o-border-radius:15px;
    border-radius:15px;
}

.radius10px{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

.radius8px{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

.radius5px{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.radius3px{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.radius50p{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

/* Below style verticalMiddle is being used in jModal, jRuler head point....
Should have position attribute
*/
.verticalMiddle{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.verticalM{
    vertical-align: middle;
}

.displayBlock { display:block; }
.displayNone { display:none !important; }


.button{
    position:relative;
    display:inline-block;
    margin-top:0px;
    cursor:pointer;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.textButton{
    display:inline-block;
    padding:6px 25px;
    cursor:pointer;
    border:solid 1px #ecf0f1;
}

.textButton:hover{
    border:solid 1px #ff0000;
}

.hoverRoundMenu{
    font-family: WebIconFont;
    position:absolute;
    color:#ffffff;
    cursor:pointer;
    text-align:center;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.hoverRoundMenu:hover {
    transform: scale(1.2);
}

.roundIconBtn{
    display:inline-block;
    font-family: WebIconFont;
    color:#ffffff;
    cursor:pointer;
    text-align:center;
    font-size:22px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}



/* Main menu layer */
.zIndexMenu { z-index: 100; }
/* Google map's autocomplete starts with z-index 1000 */
.zIndexLayer1 { z-index: 200; }
.zIndexLayer2 { z-index: 300; }
.zIndexLayer2_1 { z-index: 350; }
.zIndexLayer2_2 { z-index: 400; }
.zIndexLayer2_3 { z-index: 600; }
.zIndexLayer2_4 { z-index: 670; }
.zIndexLayer3 { z-index: 700; }
.zIndexLayer4 { z-index: 800; }
.zIndexLayer5 { z-index: 900; }

.zIndexPopup { z-index: 1000; }

/* Hover button layer. ie) apply button, ..*/
.zIndexHoverButton { z-index: 5000; }
/* List layer */
.zIndexListLayer { z-index: 6000; }
/* Controls move/resize icon layer */
.zIndexEventLayer { z-index: 7000; }
/* layer for tooltip */
.zIndexTooltipLayer { z-index: 8000; }
/* Load, apply layer */
.zIndexLoadLayer { z-index: 9000; }
.zIndexPopupCover { z-index: 9010; }
/* Toast, notification layer */
.zIndexToast { z-index: 12000; }
.zIndexTopDateTimePicker { z-index: 13000; }

label.select {
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size:inherit;
}

label.select:before, label.select:after {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #dfdfdf;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-radius: 2px;
}

label.select:hover:before, label.select:hover:after {
    background-color:#cccccc;
}

input[type=checkbox]:checked + label.select:after {
    content: "\2713";
    color: #ffffff;
    text-align: center;
    box-shadow:0 0 0px 10px #00bcd4 inset;
    border-radius: 4px;
    line-height:17px;
}

/* To remove the extra margin for the child's inline-block display */
.removeMarginInlineBlock {
    word-spacing: 0;
    font-size: 0;
}

.icnInput{
    text-transform: uppercase;
    color:#343434;
}

.wordWrap{
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}


.topHeadCom{
    padding:30px;
    font-size: 20px;
}

.backgroundCoverCenter{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.idxColorWhite { background-color:#ffffff; color:#343434; }
.idxColorGreyDark { background-color:#939393; }
.idxColorRed { background-color: #e14e60; color: #ffffff; }
.idxColorRedH { background-color: #e14e60; color: #ffffff; }
.idxColorRedH:hover { background-color: #d44455; }
.idxColorRedDark { background-color:#843b44; }
.idxColorPurple { background-color: #7c307a; color: #ffffff; }
.idxColorPurpleH { background-color: #7c307a; color: #ffffff; }
.idxColorPurpleH:hover { background-color: #6a2568; }
.idxColorPurpleDark { background-color: #581c56; color: #ffffff; }
.idxColorTeal { background-color: #009688; color:#ffffff; }
.idxColorTealH { background-color: #009688; color:#ffffff; }
.idxColorTealH:hover { background-color: #05877c; color:#ffffff; }
.idxColorTealDark { background-color: #077b71; color:#ffffff; }

/* Popup has a scroll when the parent has s scroll in this case 2 scroll bars are shown. In this case, parent's scroll should be removed by the JS code by adding this class */
.overflow-y-hidden { overflow-y: hidden !important; }

/*
--------------------------------------------------------------------------------
icnLoading style
-------------------------------------------------------------------------------- */
.icnLoadingDIV{
    position:absolute;
    top:0px;
    left:0px;
    /* width:100%; <-- set in the code */ 
    /* height:100%; <-- set in the code*/
    background-color: rgba(240, 240, 240, 0.7);
    text-align:center;
}

.spinner {
    position:relative;
    top:45%;
    width: 40px;
    height: 40px;
    margin:auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #4caf50;
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 3.0s infinite ease-in-out;
  animation: sk-bounce 3.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


/*
Media File upload style
*/
.mu_trashBtn{
    width:40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

/* Make direct page */
.mdInputSyle{
    color:#006dfe !important;
    font-size: 16px !important;
    font-weight: bold !important;;
    border-bottom: solid 1px #000000 !important;
    margin-bottom: 10px !important;
}